/* ===== Login Overlay ===== */
        .login-overlay {
            position: fixed;
            inset: 0;
            background: rgba(6, 3, 11, 0.9);
            backdrop-filter: blur(12px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            transition: opacity .3s ease, visibility .3s ease;
        }
        .login-overlay.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .login-card {
            background: var(--surface);
            border-radius: 32px;
            padding: 48px 40px;
            width: min(420px, 90vw);
            text-align: center;
            border: 1px solid rgba(255, 255, 255, .1);
            box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
        }
        .login-avatar {
            width: 120px;
            height: 120px;
            border-radius: 24px;
            overflow: hidden;
            margin: 0 auto 16px;
            border: 4px solid rgba(232, 165, 209, .4);
            box-shadow: 0 12px 32px rgba(232, 165, 209, .35);
            background: rgba(255, 255, 255, .05);
        }
        .login-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            image-rendering: pixelated;
        }
        .login-card input {
            width: 100%;
            margin-top: 16px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, .2);
            background: rgba(255, 255, 255, .05);
            color: var(--text);
            padding: 14px 16px;
            font-size: 1rem;
            text-align: center;
        }
        .login-card button#login-submit {
            margin-top: 16px;
            width: 100%;
            border: none;
            border-radius: 16px;
            background: var(--accent);
            color: #fff;
            font-weight: 700;
            font-size: 1rem;
            padding: 14px 16px;
            min-height: 44px;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .login-card button#login-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(232, 165, 209, .4);
        }
        .login-status {
            margin-top: 12px;
            font-size: .9rem;
            color: var(--muted);
            min-height: 20px;
        }

        .vote-page {
            padding: 60px 0 120px;
            min-height: 100vh;
        }
        .vote-hero {
            text-align: center;
            margin-bottom: 40px;
        }
        .vote-hero h1 {
            background: linear-gradient(120deg, var(--accent), var(--accent-2), var(--mint));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 200% auto;
            animation: voteHeroGrad 8s ease-in-out infinite;
        }
        @keyframes voteHeroGrad { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        .vote-hero .lead { max-width: 640px; margin: 12px auto 0; color: var(--muted); }

        /* ===== Vote List (refined cards) ===== */
        .vote-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 24px 0 32px;
        }
        .vote-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 14px 18px;
            background: var(--surface);
            border: 1px solid rgba(255,255,255,.06);
            border-radius: 16px;
            text-decoration: none;
            color: inherit;
            position: relative;
            overflow: hidden;
            transition: transform .25s cubic-bezier(.34,1.2,.64,1), border-color .2s, box-shadow .2s;
        }
        .vote-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(232,165,209,.08), rgba(245,184,122,.04));
            opacity: 0;
            transition: opacity .25s;
            pointer-events: none;
        }
        .vote-card:hover {
            transform: translateY(-2px);
            border-color: rgba(232,165,209,.3);
            box-shadow: 0 10px 28px rgba(0,0,0,.25);
        }
        .vote-card:hover::before { opacity: 1; }

        .vote-card-rank {
            width: 38px; height: 38px;
            display: inline-flex; align-items: center; justify-content: center;
            font-weight: 800; font-size: 1.02rem;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #fff;
            border-radius: 12px;
            flex-shrink: 0;
            font-variant-numeric: tabular-nums;
            box-shadow: 0 3px 10px rgba(232,165,209,.35);
            position: relative;
            z-index: 1;
            font-family: 'Montserrat', sans-serif;
        }

        .vote-card-info {
            flex: 1; min-width: 0;
            display: flex; flex-direction: column; gap: 2px;
            position: relative;
            z-index: 1;
        }
        .vote-card-name {
            font-weight: 700;
            font-size: 1rem;
            color: var(--text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.3;
            font-family: 'Montserrat', sans-serif;
        }
        .vote-card-domain {
            font-size: .77rem;
            color: var(--muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .vote-card-cta {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 9px 18px;
            min-height: 44px;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #fff;
            font-weight: 700;
            font-size: .86rem;
            border-radius: 99px;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
            box-shadow: 0 2px 8px rgba(232,165,209,.25);
            transition: box-shadow .2s, transform .2s;
            white-space: nowrap;
        }
        .vote-card:hover .vote-card-cta {
            box-shadow: 0 6px 16px rgba(232,165,209,.45);
        }
        .vote-card-cta svg { transition: transform .2s; }
        .vote-card:hover .vote-card-cta svg { transform: translateX(3px); }

        /* Light mode */
        body.light-mode .vote-card {
            background: #FFFFFF;
            border-color: rgba(24,20,16,.08);
            box-shadow: 0 2px 8px rgba(24,20,16,.04);
        }
        body.light-mode .vote-card:hover {
            border-color: rgba(212,74,44,.30);
            box-shadow: 0 10px 28px rgba(24,20,16,.08);
        }
        body.light-mode .vote-card-icon {
            background: #F8F2E8;
            border-color: rgba(24,20,16,.08);
        }

        /* Mobile */
        @media (max-width: 640px) {
            .vote-card {
                flex-wrap: wrap;
                padding: 14px 16px;
                gap: 12px;
            }
            .vote-card-info { flex-basis: calc(100% - 100px); }
            .vote-card-cta {
                flex-basis: 100%;
                justify-content: center;
                margin-top: 4px;
                padding: 11px 18px;
            }
        }


        .vote-card.voted {
            opacity: 0.6;
            filter: grayscale(0.8);
            border-color: rgba(0, 255, 0, 0.3) !important;
        }
        .vote-card.voted .vote-card-cta {
            background: #27ae60 !important;
            color: #fff !important;
        }
        
        /* ===== Info / Tip boxes (cleaner pastel) ===== */
        .info-box {
            background: rgba(245, 184, 122, .12);
            border: 1px solid rgba(245, 184, 122, .3);
            border-radius: 18px;
            padding: 24px;
            margin: 32px 0;
        }
        .info-box h3 {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 0;
            margin-bottom: 16px;
            font-family: 'Montserrat', sans-serif;
            color: var(--accent-2);
        }
        .info-box ul {
            margin: 0;
            padding-left: 24px;
            color: var(--muted);
        }
        .info-box li {
            margin: 8px 0;
            line-height: 1.6;
        }
        .tip-box {
            background: rgba(168, 232, 240, .12);
            border: 1px solid rgba(168, 232, 240, .3);
            border-radius: 18px;
            padding: 24px;
            margin: 32px 0;
        }
        .tip-box h3 {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 0;
            margin-bottom: 12px;
            font-family: 'Montserrat', sans-serif;
            color: var(--mint);
        }
        .tip-box p {
            margin: 0;
            color: var(--muted);
            line-height: 1.6;
        }
        @media (max-width: 640px) {
            .vote-link-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
        }
        
        /* ===== VOTE PAGE 2-COLUMN GRID ===== */
        .vote-content-grid {
            display: grid;
            grid-template-columns: 1fr 280px;
            gap: 32px;
            align-items: start;
        }
        .vote-links-column {
            min-width: 0;
        }
        @media (max-width: 960px) {
            .vote-content-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* ===== TOP VOTERS SIDEBAR ===== */
        .top-voters-sidebar {
            position: sticky;
            top: 24px;
            background: var(--surface);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 18px;
            padding: 22px 18px 18px;
        }
        .top-voters-header {
            display: flex; align-items: center; gap: 10px;
            margin-bottom: 4px;
        }
        .top-voters-header svg { color: var(--accent); flex-shrink: 0; }
        .top-voters-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            font-weight: 800;
            color: var(--text);
            margin: 0;
            letter-spacing: 0.02em;
        }
        .top-voters-sub {
            font-size: 0.74rem;
            color: var(--muted);
            margin: 0 0 16px 0;
        }
        .top-voters-range-tabs {
            display: inline-flex; gap: 2px; padding: 3px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 10px; margin-bottom: 14px;
        }
        .top-voters-range-tab {
            padding: 5px 11px; border: none; cursor: pointer;
            background: transparent; color: var(--muted);
            font-size: 0.72rem; font-weight: 700; border-radius: 8px;
            font-family: inherit; transition: all 0.2s;
        }
        .top-voters-range-tab:hover { color: var(--text); }
        .top-voters-range-tab.active {
            background: var(--bg-alt); color: var(--text);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        }

        /* ===== Podium top 3 — đỉnh chóp ===== */
        .top-voters-sidebar { position: relative; }
        .top-voters-sidebar::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0;
            height: 220px;
            background: radial-gradient(ellipse 70% 100% at center top, rgba(240,180,41,.06), transparent 70%);
            pointer-events: none; z-index: 0;
            border-radius: 18px 18px 0 0;
        }
        .top-voters-sidebar > * { position: relative; z-index: 1; }

        .top-voters-podium {
            display: flex; align-items: flex-end; justify-content: center;
            gap: 8px; padding: 28px 4px 14px;
        }
        .tv-podium-item {
            flex: 1; max-width: 84px;
            display: flex; flex-direction: column; align-items: center;
            position: relative;
        }

        /* Avatar wrap — holds halo + sparkles + crown */
        .tv-podium-avatar-wrap {
            position: relative;
            display: inline-flex; align-items: center; justify-content: center;
            margin-bottom: 8px;
        }
        .tv-podium-avatar-wrap::before {
            content: '';
            position: absolute; inset: -8px;
            border-radius: 50%;
            opacity: .85;
            z-index: 0;
        }
        .tv-podium-item.r1 .tv-podium-avatar-wrap::before {
            background: radial-gradient(circle, rgba(255,216,107,.55), rgba(240,180,41,.15) 50%, transparent 70%);
            animation: haloPulse 2.4s ease-in-out infinite;
        }
        .tv-podium-item.r2 .tv-podium-avatar-wrap::before {
            background: radial-gradient(circle, rgba(225,230,240,.4), transparent 65%);
        }
        .tv-podium-item.r3 .tv-podium-avatar-wrap::before {
            background: radial-gradient(circle, rgba(217,148,102,.4), transparent 65%);
        }
        @keyframes haloPulse {
            0%, 100% { opacity: .85; transform: scale(1); }
            50%      { opacity: 1; transform: scale(1.12); }
        }

        /* Flat avatar (minotar.net/helm) — face + hat layer, opaque PNG, fills frame, reliable */
        .tv-podium-avatar {
            position: relative; z-index: 1;
            image-rendering: pixelated;
            border-radius: 12px;
            border: 3px solid;
            display: block;
            background: rgba(255,255,255,.04);
        }
        .tv-podium-item.r1 .tv-podium-avatar {
            width: 68px; height: 68px;
            border-color: #f0b429;
            box-shadow: 0 0 0 2px rgba(255,216,107,.25), 0 6px 22px rgba(240,180,41,.5);
        }
        .tv-podium-item.r2 .tv-podium-avatar {
            width: 52px; height: 52px;
            border-color: #c0c5d0;
            box-shadow: 0 0 0 2px rgba(225,230,240,.2), 0 4px 14px rgba(192,197,208,.4);
        }
        .tv-podium-item.r3 .tv-podium-avatar {
            width: 52px; height: 52px;
            border-color: #c47f40;
            box-shadow: 0 0 0 2px rgba(217,148,102,.2), 0 4px 14px rgba(196,127,64,.4);
        }

        /* Crown floats above #1 */
        .tv-podium-crown {
            position: absolute;
            top: -16px; left: 50%;
            transform: translateX(-50%);
            width: 32px; height: 24px;
            color: #ffd86b;
            z-index: 2;
            filter: drop-shadow(0 4px 8px rgba(240,180,41,.55));
            animation: crownFloat 2.6s ease-in-out infinite;
        }
        .tv-podium-item:not(.r1) .tv-podium-crown { display: none; }
        @keyframes crownFloat {
            0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3deg); }
            50%      { transform: translateX(-50%) translateY(-3px) rotate(3deg); }
        }

        /* Sparkle particles around #1 */
        .tv-podium-sparkles {
            position: absolute; inset: -16px;
            pointer-events: none; z-index: 2;
        }
        .tv-podium-item:not(.r1) .tv-podium-sparkles { display: none; }
        .tv-podium-sparkles span {
            position: absolute;
            width: 5px; height: 5px;
            background: #ffd86b;
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(255,216,107,.9), 0 0 16px rgba(240,180,41,.6);
            animation: sparkle 2.2s ease-in-out infinite;
            opacity: 0;
        }
        .tv-podium-sparkles span:nth-child(1) { top: 8%;  left: 18%;  animation-delay: 0s; }
        .tv-podium-sparkles span:nth-child(2) { top: 22%; right: 8%;  animation-delay: .55s; }
        .tv-podium-sparkles span:nth-child(3) { bottom: 18%; left: 10%; animation-delay: 1.1s; }
        .tv-podium-sparkles span:nth-child(4) { bottom: 28%; right: 18%; animation-delay: 1.65s; }
        @keyframes sparkle {
            0%, 100% { opacity: 0; transform: scale(0); }
            50%      { opacity: 1; transform: scale(1.3); }
        }

        /* Name + votes */
        .tv-podium-name {
            font-size: 0.76rem; font-weight: 700;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            max-width: 100%; color: var(--text);
            line-height: 1.25;
            text-align: center;
        }
        .tv-podium-item.r1 .tv-podium-name {
            font-size: 0.88rem; font-weight: 800;
            background: linear-gradient(135deg, #ffd86b, #f0b429);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .tv-podium-votes {
            font-size: 0.74rem; font-weight: 800;
            font-variant-numeric: tabular-nums; margin-top: 3px;
            display: inline-flex; align-items: center; gap: 3px;
            color: var(--accent);
        }
        .tv-podium-item.r1 .tv-podium-votes { color: #f0b429; font-size: .82rem; }
        .tv-podium-item.r2 .tv-podium-votes { color: #c0c5d0; }
        .tv-podium-item.r3 .tv-podium-votes { color: #c47f40; }
        .tv-podium-votes svg { width: 10px; height: 10px; }

        /* Pedestal — 3D with gradient + embossed rank number */
        .tv-podium-pedestal {
            margin-top: 10px;
            width: 100%;
            border-radius: 6px 6px 2px 2px;
            position: relative;
            overflow: hidden;
            display: flex; align-items: center; justify-content: center;
            color: rgba(0,0,0,.55);
            font-weight: 900;
            font-family: 'Montserrat', sans-serif;
            font-variant-numeric: tabular-nums;
            text-shadow: 0 1px 1px rgba(255,255,255,.45);
            letter-spacing: .02em;
        }
        .tv-podium-pedestal::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0;
            height: 45%;
            background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
            pointer-events: none;
        }
        .tv-podium-pedestal::after {
            content: '';
            position: absolute; bottom: 0; left: 0; right: 0;
            height: 35%;
            background: linear-gradient(0deg, rgba(0,0,0,.18), transparent);
            pointer-events: none;
        }
        .tv-podium-item.r1 .tv-podium-pedestal {
            height: 38px;
            background: linear-gradient(180deg, #ffe88a 0%, #f0b429 50%, #b8860b 100%);
            box-shadow: 0 4px 14px rgba(240,180,41,.35), inset 0 1px 0 rgba(255,255,255,.6);
            font-size: 1.3rem;
        }
        .tv-podium-item.r2 .tv-podium-pedestal {
            height: 30px;
            background: linear-gradient(180deg, #f0f3fa 0%, #c0c5d0 50%, #898d99 100%);
            box-shadow: 0 3px 10px rgba(192,197,208,.25), inset 0 1px 0 rgba(255,255,255,.6);
            font-size: 1.05rem;
        }
        .tv-podium-item.r3 .tv-podium-pedestal {
            height: 24px;
            background: linear-gradient(180deg, #e8a675 0%, #c47f40 50%, #8b5a2b 100%);
            box-shadow: 0 3px 8px rgba(196,127,64,.25), inset 0 1px 0 rgba(255,255,255,.5);
            font-size: .95rem;
        }
        .tv-podium-pedestal-num {
            position: relative; z-index: 1;
            line-height: 1;
        }

        /* Subtle divider between podium and list */
        .top-voters-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
            margin: 6px 0 10px;
        }

        /* Voter list (rank 4+) */
        .top-voters-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .top-voter-card {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 10px;
            transition: background 0.15s ease;
        }
        .top-voter-card:hover { background: rgba(255, 255, 255, 0.03); }

        .top-voter-rank {
            width: 22px; text-align: center; flex-shrink: 0;
            font-weight: 700; font-size: 0.74rem; color: var(--muted);
            font-variant-numeric: tabular-nums;
            font-family: 'Montserrat', sans-serif;
        }
        .top-voter-avatar {
            width: 28px !important;
            height: 28px !important;
            border-radius: 6px;
            image-rendering: pixelated;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.1);
            display: block;
        }
        .top-voter-info { flex: 1; min-width: 0; }
        .top-voter-name {
            font-weight: 600;
            font-size: 0.82rem;
            color: var(--text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.2;
        }
        .top-voter-bar {
            height: 3px;
            background: rgba(255,255,255,.07);
            border-radius: 2px;
            overflow: hidden;
            margin-top: 4px;
        }
        .top-voter-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            border-radius: 2px;
            transition: width .5s ease;
        }
        .top-voter-votes-num {
            font-size: 0.84rem;
            font-weight: 800;
            color: var(--accent);
            flex-shrink: 0;
            min-width: 32px;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        /* Loading & empty states */
        .top-voters-loading,
        .top-voters-empty {
            text-align: center;
            padding: 24px 12px;
            color: var(--muted);
        }
        .top-voters-loading .spinner {
            display: inline-block;
            width: 22px;
            height: 22px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-bottom: 8px;
        }
        .top-voters-loading p,
        .top-voters-empty p { font-size: 0.78rem; margin: 0; line-height: 1.45; }
        .top-voters-empty-icon {
            display: inline-flex; align-items: center; justify-content: center;
            width: 40px; height: 40px; border-radius: 50%;
            background: rgba(255,255,255,.04);
            color: var(--muted); margin-bottom: 8px;
        }
        .top-voters-empty-icon svg { width: 20px; height: 20px; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Light mode */
        body.light-mode .top-voters-sidebar {
            background: #FFFFFF;
            border-color: rgba(24, 20, 16, 0.08);
            box-shadow: 0 2px 10px rgba(24, 20, 16, 0.05);
        }
        body.light-mode .top-voter-card:hover { background: #F8F2E8; }
        body.light-mode .top-voters-range-tabs {
            background: #F8F2E8;
            border-color: rgba(24, 20, 16, 0.06);
        }
        body.light-mode .top-voters-range-tab.active {
            background: #FFFFFF;
            box-shadow: 0 1px 3px rgba(24, 20, 16, 0.08);
        }