/*Badges*/
.badge-glass {
    --glass-rgb: 108,117,125;
    --glass-text: #5f6870;
    --glass-solid: linear-gradient(135deg, #D0D0D0, #9B9B9B 45%, #6B6B6B);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--glass-text);
    /* tint  →  white base  →  gradient glass edge */
    background: linear-gradient(180deg, rgba(var(--glass-rgb),.07) 0%, rgba(var(--glass-rgb),.17) 100%) padding-box, linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, rgba(var(--glass-rgb),.55), rgba(255,255,255,.95) 45%, rgba(var(--glass-rgb),.35)) border-box;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), /* top rim light   */
    inset 0 -3px 8px rgba(var(--glass-rgb),.12), /* depth at bottom */
    0 1px 2px rgba(var(--glass-rgb),.14), /* contact shadow  */
    0 8px 18px -6px rgba(var(--glass-rgb),.38); /* colored glow    */

    transition: transform .25s ease, box-shadow .25s ease;
}

    /* glossy reflection on the top half */
    .badge-glass::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 1px;
        left: 8%;
        right: 8%;
        height: 52%;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.15));
        pointer-events: none;
    }

    /* light sweep (plays on hover, or loops with .glass-shimmer) */
    .badge-glass::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: -80%;
        width: 45%;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
        transform: skewX(-20deg);
        pointer-events: none;
    }

    .badge-glass:hover::after {
        animation: glassShimmer .9s ease;
    }

.glass-shimmer::after {
    animation: glassShimmer 3.2s ease-in-out infinite;
}

.badge-glass:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 8px rgba(var(--glass-rgb),.14), 0 2px 4px rgba(var(--glass-rgb),.16), 0 12px 24px -6px rgba(var(--glass-rgb),.48);
}

/* status dot */
.badge-glass .dot {
    position: relative;
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(var(--glass-rgb));
    box-shadow: 0 0 0 3px rgba(var(--glass-rgb),.16), 0 0 8px rgba(var(--glass-rgb),.75);
}

.glass-live .dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgb(var(--glass-rgb));
    animation: glassPulse 1.6s ease-out infinite;
}

/* icons inherit the badge color */
.badge-glass svg {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
}

/* ---- Solid "candy glass" ---- */
.badge-glass.glass-solid {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%) padding-box, var(--glass-solid) padding-box, linear-gradient(180deg, rgba(255,255,255,.75), rgba(var(--glass-rgb),.6)) border-box;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.14), 0 2px 3px rgba(var(--glass-rgb),.25), 0 10px 22px -6px rgba(var(--glass-rgb),.6);
}

    .badge-glass.glass-solid::before {
        height: 45%;
        background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
    }

    .badge-glass.glass-solid::after {
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    }

    .badge-glass.glass-solid .dot {
        background: #fff;
        box-shadow: 0 0 0 3px rgba(255,255,255,.3), 0 0 8px rgba(255,255,255,.9);
    }

.glass-solid.glass-live .dot::after {
    background: #fff;
}

/* ---- Sizes ---- */
.badge-glass.glass-sm {
    padding: 5px 16px;
    font-size: 12px;
    gap: 6px;
}

.badge-glass.glass-lg {
    padding: 10px 24px;
    font-size: 15px;
    gap: 9px;
}
/* icon size follows badge size */
.badge-glass.glass-sm svg {
    width: 12px;
    height: 12px;
}

.badge-glass.glass-lg svg {
    width: 16px;
    height: 16px;
}


/* ---- Square glass icon tile (for stat cards) ---- */
.glass-tile {
    border-radius: 14px !important;
    padding: 0 !important;
    width: 46px;
    height: 46px;
    justify-content: center;
}

    .glass-tile svg {
        width: 20px;
        height: 20px;
    }

@keyframes glassShimmer {
    0% {
        left: -80%;
    }

    60%, 100% {
        left: 130%;
    }
}

@keyframes glassPulse {
    0% {
        transform: scale(1);
        opacity: .7;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* ================= Colors ================= */
/* Start palette */
.bg-start-1-glass {
    --glass-rgb: 3,192,252;
    --glass-text: #0290C2;
    --glass-solid: linear-gradient(135deg, #6DE1FC, #03C0FC 50%, #0298C8);
}

.bg-start-2-glass {
    --glass-rgb: 160,2,250;
    --glass-text: #A002FA;
    --glass-solid: linear-gradient(135deg, #D69BFF, #A002FA 55%, #7A00C2);
}

.bg-start-3-glass {
    --glass-rgb: 0,50,252;
    --glass-text: #0032FC;
    --glass-solid: linear-gradient(135deg, #45A1FF, #0032FC 60%, #0024B8);
}

.bg-start-4-glass {
    --glass-rgb: 21,128,61;
    --glass-text: #15803D;
    --glass-solid: linear-gradient(135deg, #b4ec51, #21a366 50%, #15803D);
}

.bg-start-5-glass {
    --glass-rgb: 250,5,5;
    --glass-text: #E00404;
    --glass-solid: linear-gradient(135deg, #FF8FB8, #FA0505 50%, #B80303);
}

.bg-start-6-glass {
    --glass-rgb: 207,160,132;
    --glass-text: #A0704F;
    --glass-solid: linear-gradient(135deg, #EBCDB8, #CFA084 50%, #A9785A);
}

.bg-start-gray-glass {
    --glass-rgb: 108,117,125;
    --glass-text: #5f6870;
    --glass-solid: linear-gradient(135deg, #D0D0D0, #9B9B9B 45%, #6B6B6B);
}

/* Official palette */
.bg-official-1-glass {
    --glass-rgb: 0,114,198;
    --glass-text: #0072C6;
    --glass-solid: linear-gradient(135deg, #6DE1FC, #45A1FF 40%, #0072C6 75%, #2A75C9);
}

.bg-official-2-glass {
    --glass-rgb: 20,169,199;
    --glass-text: #10889F;
    --glass-solid: linear-gradient(90deg, #3AC7F4, #14A9C7, #4EE283);
}

.bg-official-3-glass {
    --glass-rgb: 33,163,102;
    --glass-text: #1A8452;
    --glass-solid: linear-gradient(135deg, #b4ec51, #21a366 50%, #217346);
}

.bg-official-4-glass {
    --glass-rgb: 217,4,4;
    --glass-text: #C80404;
    --glass-solid: linear-gradient(135deg, #FF8FB8, #FA0505 35%, #D90404 65%, #8A0202);
}

.bg-official-5-glass {
    --glass-rgb: 233,108,0;
    --glass-text: #C85C00;
    --glass-solid: linear-gradient(135deg, #FFCB99, #FF8800 35%, #E96C00 65%, #A94A00);
}

.bg-official-6-glass {
    --glass-rgb: 132,94,194;
    --glass-text: #7651B5;
    --glass-solid: linear-gradient(90deg, #845EC2, #D65F8E, #FF6F91);
}

/* ================= Official gradients ================= */
.bg-official-gradient-1 { background: linear-gradient(135deg, #6DE1FC 0%, #45A1FF 40%, #0072C6 75%, #2A75C9 100%) !important; }
.bg-official-gradient-2 { background: linear-gradient(90deg, #3AC7F4, #14A9C7, #4EE283) !important; }
.bg-official-gradient-3 { background: linear-gradient(135deg, #b4ec51 0%, #21a366 50%, #217346 100%) !important; }
.bg-official-gradient-4 { background: linear-gradient(135deg, #FF8FB8 0%, #FA0505 35%, #D90404 65%, #8A0202 100%) !important; }
.bg-official-gradient-5 { background: linear-gradient(135deg, #FFCB99 0%, #FF8800 35%, #E96C00 65%, #A94A00 100%) !important; }
.bg-official-gradient-6 { background: linear-gradient(90deg, #845EC2, #D65F8E, #FF6F91) !important; }