/* ═══════════════════════════════════════════════════════════════════════
   GoalZone v2 — DAZN-inspired FIFA football platform
   Palette: #0C161C deep | #141F27 card | #1A2B36 elevated
            #F4FF47 accent | #E63946 live | #ff9500 elite
   ═══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg-deep:     #0C161C;
    --bg-card:     #141F27;
    --bg-elevated: #1A2B36;
    --bg-hover:    #213342;
    --accent:      #F4FF47;
    --accent-dim:  rgba(244,255,71,.14);
    --accent-glow: rgba(244,255,71,.07);
    --live:        #E63946;
    --live-dim:    rgba(230,57,70,.18);
    --elite:       #ff9500;
    --elite-dim:   rgba(255,149,0,.15);
    --green:       #2dce89;
    --blue:        #4dabf7;
    --text-1:      #FFFFFF;
    --text-2:      #8B9EA9;
    --text-3:      #4d6272;
    --border:      rgba(255,255,255,.07);
    --border-hi:   rgba(255,255,255,.13);
    --radius-s:    6px;
    --radius-m:    10px;
    --radius-l:    16px;
    --topbar-h:    36px;
    --header-h:    60px;
    --font:        'Inter',system-ui,-apple-system,sans-serif;
    --ease:        .2s ease;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg-deep);color:var(--text-1);min-height:100vh;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:3px}

/* ── Top Bar ─────────────────────────────────────────────────────────── */
.top-bar{
    height:var(--topbar-h);
    background:rgba(8,14,19,.95);
    border-bottom:1px solid var(--border);
    font-size:12px;
}
.top-bar-inner{
    max-width:1440px;margin:0 auto;padding:0 20px;
    height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.top-bar-left,.top-bar-right{display:flex;align-items:center;gap:16px}
.topbar-live{display:flex;align-items:center;gap:5px;color:var(--live);font-weight:700;font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.topbar-link{color:var(--text-2);font-weight:500;transition:color var(--ease)}
.topbar-link:hover,.topbar-link.active{color:var(--text-1)}
.topbar-user{display:flex;align-items:center;gap:7px}
.topbar-username{font-weight:600;color:var(--text-1)}
.topbar-upgrade{
    padding:3px 10px;border-radius:12px;
    background:var(--accent);color:var(--bg-deep);
    font-weight:800;font-size:11px;letter-spacing:.3px;
    transition:opacity var(--ease);
}
.topbar-upgrade:hover{opacity:.85}

/* Tier badges */
.tier-badge{
    display:inline-block;padding:2px 7px;border-radius:10px;
    font-size:10px;font-weight:800;letter-spacing:.5px;
}
.tier-free {background:rgba(139,158,169,.15);color:var(--text-2)}
.tier-pro  {background:var(--accent-dim);color:var(--accent);border:1px solid rgba(244,255,71,.3)}
.tier-elite{background:var(--elite-dim);color:var(--elite);border:1px solid rgba(255,149,0,.3)}

/* ── Main Header ─────────────────────────────────────────────────────── */
.site-header{
    position:sticky;top:0;z-index:200;
    height:var(--header-h);
    background:rgba(12,22,28,.94);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border);
    transition:box-shadow var(--ease);
}
.header-inner{
    max-width:1440px;margin:0 auto;padding:0 20px;
    height:100%;display:flex;align-items:center;gap:8px;
}
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-right:8px}
.logo-icon{font-size:20px}
.logo-text{font-size:19px;font-weight:900;letter-spacing:-.5px;color:var(--accent);text-transform:uppercase}

/* Primary nav */
.primary-nav{display:flex;align-items:center;gap:2px;flex:1}

/* Dropdowns */
.nav-dropdown{position:relative}
.nav-item{
    display:flex;align-items:center;gap:5px;
    padding:7px 12px;border-radius:var(--radius-s);
    font-size:13px;font-weight:600;color:var(--text-2);
    white-space:nowrap;transition:var(--ease);cursor:pointer;
}
.nav-item:hover,.nav-item.active{background:var(--bg-elevated);color:var(--text-1)}
.nav-item.active{color:var(--accent)}
.dropdown-arrow{font-size:9px;margin-left:1px;transition:transform var(--ease)}
.nav-dropdown:hover .dropdown-arrow{transform:rotate(180deg)}

.dropdown-panel{
    display:none;position:absolute;top:calc(100% + 6px);left:0;
    min-width:260px;background:var(--bg-card);
    border:1px solid var(--border-hi);border-radius:var(--radius-m);
    box-shadow:0 16px 48px rgba(0,0,0,.5);
    z-index:300;overflow:hidden;
}
.nav-dropdown:hover .dropdown-panel{display:block}
.dropdown-header{
    padding:10px 16px 8px;font-size:10px;font-weight:800;
    text-transform:uppercase;letter-spacing:1px;color:var(--text-3);
    border-bottom:1px solid var(--border);
}
.dropdown-item{
    display:flex;align-items:center;gap:10px;
    padding:10px 16px;font-size:13px;font-weight:500;
    transition:background var(--ease);
}
.dropdown-item:hover{background:var(--bg-elevated)}
.dropdown-item.active{color:var(--accent);background:var(--accent-glow)}

/* Header actions */
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.search-form{
    display:flex;align-items:center;
    background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:18px;overflow:hidden;transition:border-color var(--ease);
}
.search-form:focus-within{border-color:rgba(244,255,71,.4)}
.search-input{
    background:none;border:none;outline:none;
    color:var(--text-1);padding:7px 14px;font-size:13px;width:160px;
}
.search-input::placeholder{color:var(--text-3)}
.search-btn{padding:7px 12px;color:var(--text-2);transition:color var(--ease)}
.search-btn:hover{color:var(--accent)}
.btn-upgrade-sm{
    padding:7px 14px;border-radius:18px;
    background:var(--accent);color:var(--bg-deep);
    font-size:12px;font-weight:800;white-space:nowrap;
    transition:opacity var(--ease);
}
.btn-upgrade-sm:hover{opacity:.85}
.hamburger{display:none;flex-direction:column;gap:4px;padding:8px}
.hamburger span{display:block;width:20px;height:2px;background:var(--text-1);border-radius:2px;transition:var(--ease)}

/* ── Mobile menu ─────────────────────────────────────────────────────── */
.mobile-menu{
    display:none;position:fixed;
    inset:calc(var(--topbar-h) + var(--header-h)) 0 0 0;
    background:var(--bg-card);z-index:190;overflow-y:auto;
    transform:translateX(100%);transition:transform .3s ease;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-inner{padding:16px}
.mob-section-label{
    padding:10px 8px 6px;font-size:10px;font-weight:800;
    text-transform:uppercase;letter-spacing:1px;color:var(--text-3);
}
.mobile-league-item{
    display:flex;align-items:center;gap:12px;
    padding:11px 8px;border-bottom:1px solid var(--border);
    font-size:14px;font-weight:500;transition:color var(--ease);
}
.mobile-league-item:hover,.mobile-league-item.active{color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
.main-content{flex:1;min-height:0}
.container{max-width:1440px;margin:0 auto;padding:0 20px}
.page-layout{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:24px;max-width:1440px;margin:0 auto;padding:24px 20px;
}
.main-col{min-width:0}
.side-col{min-width:0}

/* ── Live Ticker ──────────────────────────────────────────────────────── */
.live-ticker{background:var(--live);padding:7px 0;overflow:hidden}
.ticker-track{
    display:flex;align-items:center;
    animation:ticker 50s linear infinite;
    width:max-content;white-space:nowrap;
}
.ticker-track:hover{animation-play-state:paused}
.ticker-live-badge{
    background:rgba(0,0,0,.3);font-size:10px;font-weight:900;
    letter-spacing:1px;text-transform:uppercase;padding:2px 12px;margin-right:24px;flex-shrink:0;
}
.ticker-item{
    display:inline-flex;align-items:center;gap:8px;
    padding:0 20px;font-size:13px;font-weight:700;
    border-right:1px solid rgba(255,255,255,.25);
}
.ticker-item img{width:16px;height:16px;object-fit:contain}
.ticker-score{background:rgba(0,0,0,.25);padding:1px 8px;border-radius:4px;font-weight:900}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero{
    position:relative;overflow:hidden;
    background:#0a131a;
    padding:52px 20px 44px;border-bottom:1px solid var(--border);
    min-height:340px;
}

/* Background slider */
.hero-bg-slides{position:absolute;inset:0;z-index:0}
.hero-slide{
    position:absolute;inset:0;
    background-size:cover;background-position:top;
    opacity:0;transition:opacity 1.2s ease;
}
.hero-slide.active{opacity:1}

/* Layered overlay: dark + subtle gradient so text is always legible */
.hero-slide-overlay{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
        linear-gradient(to right, rgba(10,19,26,.92) 0%, rgba(10,19,26,.65) 55%, rgba(10,19,26,.30) 100%),
        linear-gradient(to top,   rgba(10,19,26,.6)  0%, transparent 60%);
}

/* Content sits above slides + overlay */
.hero-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;display:flex;align-items:center;gap:40px}
.hero-content{flex:1}
.hero-eyebrow{
    display:inline-flex;align-items:center;gap:7px;
    border:1px solid rgba(244,255,71,.35);background:var(--accent-dim);
    border-radius:20px;padding:4px 12px;
    font-size:11px;font-weight:800;color:var(--accent);
    text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px;
}
.hero-title{font-size:clamp(26px,4.5vw,50px);font-weight:900;letter-spacing:-1.5px;line-height:1.1;margin-bottom:10px}
.hero-title .accent{color:var(--accent)}
.hero-sub{font-size:15px;color:var(--text-2);max-width:460px}
.hero-kpis{display:flex;gap:28px;margin-top:24px;flex-wrap:wrap}
.kpi-num{font-size:26px;font-weight:900;color:var(--accent);line-height:1}
.kpi-num.live-col{color:var(--live)}
.kpi-label{font-size:11px;color:var(--text-2);margin-top:3px;text-transform:uppercase;letter-spacing:.5px}

/* Right side: logo + dots stacked */
.hero-right{display:flex;flex-direction:column;align-items:center;gap:16px;flex-shrink:0}
.hero-logo-wrap{
    position:relative;
    width:160px;height:160px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:radial-gradient(circle, rgba(10,19,26,.85) 40%, rgba(10,19,26,.0) 75%);
    /* Accent ring glow */
    box-shadow:0 0 0 1px rgba(244,255,71,.18), 0 0 40px rgba(244,255,71,.12);
}
.hero-logo{
    width:120px;height:120px;object-fit:contain;
    position:relative;z-index:1;
    filter:
        drop-shadow(0 0 24px rgba(244,255,71,.55))
        drop-shadow(0 4px 16px rgba(0,0,0,.9));
}

/* Slider dot controls */
.hero-dots{display:flex;gap:8px;justify-content:center}
.hero-dot{
    width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(255,255,255,.3);padding:0;transition:all .3s ease;
}
.hero-dot.active{background:var(--accent);transform:scale(1.3)}

/* ── Section tabs ────────────────────────────────────────────────────── */
.section-tabs{
    display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
    border-bottom:1px solid var(--border);background:var(--bg-card);
    position:sticky;top:var(--header-h);z-index:90;padding:0 20px;
}
.section-tabs::-webkit-scrollbar{display:none}
.tab-btn{
    padding:13px 18px;font-size:13px;font-weight:700;color:var(--text-2);
    border-bottom:2px solid transparent;white-space:nowrap;transition:var(--ease);flex-shrink:0;
}
.tab-btn:hover{color:var(--text-1)}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-panel{display:none}.tab-panel.active{display:block}

/* ── Section layout ──────────────────────────────────────────────────── */
.section{padding:28px 20px}
.section-max{max-width:1440px;margin:0 auto}
.section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-title{
    font-size:16px;font-weight:800;letter-spacing:-.2px;
    display:flex;align-items:center;gap:9px;
}
.section-title::before{content:'';display:block;width:3px;height:18px;background:var(--accent);border-radius:2px}
.section-link{font-size:12px;color:var(--text-2);font-weight:600;transition:color var(--ease)}
.section-link:hover{color:var(--accent)}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-m);overflow:hidden;margin-bottom:16px;
}
.sidebar-card-title{
    padding:12px 16px;font-size:12px;font-weight:800;
    text-transform:uppercase;letter-spacing:.8px;color:var(--text-3);
    border-bottom:1px solid var(--border);
}
.sidebar-item{
    display:flex;align-items:center;gap:10px;
    padding:10px 16px;border-bottom:1px solid var(--border);
    font-size:13px;font-weight:500;transition:background var(--ease);
    cursor:pointer;
}
.sidebar-item:last-child{border-bottom:none}
.sidebar-item:hover{background:var(--bg-elevated)}
.sidebar-item img{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.sidebar-item .badge{margin-left:auto;font-size:10px;font-weight:700;padding:2px 7px;border-radius:9px}
.badge-live{background:var(--live-dim);color:var(--live)}
.badge-soon{background:var(--accent-dim);color:var(--accent)}
.badge-ft{background:rgba(255,255,255,.07);color:var(--text-3)}

/* ── Fixture day blocks & horizontal scroll rows ─────────────────────── */
.fixture-day-block{margin-bottom:28px;min-width:0}

/* ── Live scores page ────────────────────────────────────────────────── */
.live-comp-header{
    display:flex;align-items:center;gap:8px;
    padding:8px 0 10px;border-bottom:1px solid var(--border);margin-bottom:10px;
}
.live-comp-name{font-weight:800;font-size:13px;color:var(--text-1);flex:1}
.live-comp-name:hover{color:var(--accent)}
.live-count-pill{
    font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;
    background:var(--live-dim);color:var(--live);
}
.live-badge-sm{
    display:inline-flex;align-items:center;justify-content:center;
    width:16px;height:16px;border-radius:50%;
    background:var(--live);color:#fff;
    font-size:9px;font-weight:900;margin-left:4px;vertical-align:middle;
}

/* ── Horizontal card slider row ──────────────────────────────────────── */
.fixture-scroll-row{
    display:flex;
    gap:12px;
    overflow-x:scroll;
    overflow-y:hidden;
    padding:4px 0 14px;
    scrollbar-width:none;
    -ms-overflow-style:none;
    width:100%;
    box-sizing:border-box;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
}
.fixture-scroll-row::-webkit-scrollbar{display:none}

/* ── Match card ──────────────────────────────────────────────────────── */
.match-snap-card{
    flex:0 0 150px;
    width:150px;
    display:flex;flex-direction:column;align-items:center;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-l);padding:16px 10px 14px;
    transition:background var(--ease),border-color var(--ease);
    color:inherit;text-decoration:none;gap:10px;
    -webkit-tap-highlight-color:transparent;
}
.match-snap-card:active{background:var(--bg-hover)}
@media(hover:hover){
    .match-snap-card:hover{background:var(--bg-hover);border-color:var(--border-hi)}
}
.match-snap-card.snap-live{border-color:rgba(230,57,70,.4);background:rgba(230,57,70,.05)}
.match-snap-card.featured-card{border-color:rgba(244,255,71,.25);background:rgba(244,255,71,.04)}
.match-snap-card.snap-result{border-color:var(--border)}

.snap-team{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%}
.snap-crest-wrap{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.snap-crest{width:40px;height:40px;object-fit:contain}
.snap-crest-ph{font-size:24px}
.snap-name{
    font-size:11px;font-weight:700;text-align:center;
    line-height:1.25;width:100%;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
}

.snap-center{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    width:100%;
}
.snap-score{font-size:20px;font-weight:900;letter-spacing:-1px;line-height:1}
.snap-vs{font-size:13px;font-weight:800;color:var(--text-3);letter-spacing:1px}
.snap-time{font-size:15px;font-weight:900;color:var(--accent)}
.snap-date{font-size:10px;color:var(--text-3);font-weight:500;margin-top:1px}

/* ── Legacy fixture grid (used on other pages) ───────────────────────── */
.fixture-grid{display:grid;gap:6px}
.fixture-card{
    display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;gap:10px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-m);padding:14px 18px;
    transition:background var(--ease),border-color var(--ease);
    cursor:pointer;color:inherit;
}
.fixture-card:hover{background:var(--bg-hover);border-color:var(--border-hi)}
.fixture-card.live-card{border-color:rgba(230,57,70,.35);background:rgba(230,57,70,.04)}
.fixture-card.featured-card{border-color:rgba(244,255,71,.2);background:rgba(244,255,71,.03)}

.team-block{display:flex;align-items:center;gap:11px}
.team-block.away{flex-direction:row-reverse}
.team-logo{width:34px;height:34px;object-fit:contain;flex-shrink:0}
.team-name{font-size:14px;font-weight:700;line-height:1.3}
.team-block.away .team-name{text-align:right}

.match-center{text-align:center;flex-shrink:0;min-width:80px}
.match-score{font-size:22px;font-weight:900;letter-spacing:-1px;line-height:1}
.match-score .ht-score{font-size:11px;color:var(--text-3);font-weight:500;display:block;margin-top:2px}
.match-time-label{font-size:11px;color:var(--text-2);margin-top:4px;font-weight:500}
.match-date-label{font-size:13px;color:var(--text-2);font-weight:600}
.minute-pill{
    display:inline-block;background:var(--live);color:#fff;
    font-size:10px;font-weight:900;padding:2px 8px;border-radius:10px;margin-top:4px;
    animation:pillpulse 2s ease-in-out infinite;
}
@keyframes pillpulse{0%,100%{opacity:1}50%{opacity:.65}}
.live-dot{
    display:inline-block;width:7px;height:7px;
    background:var(--live);border-radius:50%;margin-right:4px;
    animation:dotpulse 1.5s ease-in-out infinite;vertical-align:middle;
}
@keyframes dotpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

/* match-meta row below fixture card — round, venue */
.fixture-meta-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 18px 10px;
    font-size:11px;color:var(--text-3);
    border-top:1px solid var(--border);
}

/* ── Standings table ──────────────────────────────────────────────────── */
.standings-wrap{overflow-x:auto}
.standings-table{width:100%;border-collapse:collapse;font-size:13px}
.standings-table th{
    padding:9px 10px;text-align:left;color:var(--text-3);
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
    border-bottom:1px solid var(--border);
}
.standings-table th.c,.standings-table td.c{text-align:center}
.standings-table td{
    padding:10px 10px;border-bottom:1px solid var(--border);vertical-align:middle;
}
.standings-table tr:hover td{background:var(--bg-elevated)}
.standings-table tr.promo td:first-child{border-left:3px solid var(--green)}
.standings-table tr.europe td:first-child{border-left:3px solid var(--blue)}
.standings-table tr.relegation td:first-child{border-left:3px solid var(--live)}
.rank-n{font-weight:700;color:var(--text-3)}

/* ── Results table ───────────────────────────────────────────────────── */
.results-table .result-row{cursor:pointer}
.results-table .result-row:hover td{background:var(--bg-elevated)}
.result-date{font-size:11px;color:var(--text-3);white-space:nowrap;width:44px}
.result-team{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.result-team--home{justify-content:flex-end;text-align:right}
.result-team--away{justify-content:flex-start;text-align:left}
.result-crest{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.result-score{font-size:14px;font-weight:900;white-space:nowrap;min-width:56px}
.result-score-sep{color:var(--text-3);font-weight:400;margin:0 3px}
.result-winner{color:var(--text-1)}
.result-loser{opacity:.42}
.result-extra{display:block;font-size:9px;color:var(--text-3);font-weight:500;margin-top:1px}
@media(max-width:540px){.hide-xs{display:none}}
.team-cell{display:flex;align-items:center;gap:9px;font-weight:700}
.team-cell img{width:20px;height:20px;object-fit:contain}
.pts-cell{font-weight:900;font-size:14px}
.form-dots{display:flex;gap:3px}
.fw,.fd,.fl{
    width:17px;height:17px;border-radius:3px;
    font-size:9px;font-weight:900;display:flex;align-items:center;justify-content:center;
}
.fw{background:rgba(45,206,137,.2);color:var(--green)}
.fd{background:rgba(139,158,169,.15);color:var(--text-2)}
.fl{background:var(--live-dim);color:var(--live)}

/* Group stage table */
.group-label{
    font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;
    color:var(--accent);padding:12px 0 6px;
}

/* ── Top scorers ──────────────────────────────────────────────────────── */
.scorers-list{display:grid;gap:5px}
.scorer-row{
    display:flex;align-items:center;gap:12px;padding:11px 14px;
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-m);
    transition:background var(--ease);
}
.scorer-row:hover{background:var(--bg-hover)}
.scorer-rank{width:22px;text-align:center;font-size:12px;font-weight:800;color:var(--text-3);flex-shrink:0}
.scorer-rank.gold{color:var(--accent)}
.scorer-rank.silver{color:#aab8c2}
.scorer-rank.bronze{color:var(--elite)}
.scorer-photo{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--bg-elevated);flex-shrink:0}
.scorer-info{flex:1;min-width:0}
.scorer-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scorer-club{font-size:11px;color:var(--text-2);display:flex;align-items:center;gap:5px;margin-top:2px}
.scorer-club img{width:13px;height:13px;object-fit:contain}
.scorer-stat-block{text-align:center;flex-shrink:0}
.scorer-main-stat{font-size:20px;font-weight:900;color:var(--accent);line-height:1}
.scorer-stat-lbl{font-size:9px;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px}
.scorer-assists{font-size:11px;color:var(--text-2);margin-top:2px}

/* ── Match detail hero ────────────────────────────────────────────────── */
.match-hero{
    background:linear-gradient(180deg,#162535 0%,var(--bg-deep) 100%);
    padding:44px 20px 32px;text-align:center;border-bottom:1px solid var(--border);
}
.match-hero-league{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin-bottom:22px;font-size:12px;color:var(--text-2);font-weight:600;
}
.match-hero-teams{
    display:flex;align-items:center;justify-content:center;gap:16px;
    max-width:700px;margin:0 auto;
}
.match-hero-team{flex:1;text-align:center}
.match-hero-logo{width:80px;height:80px;object-fit:contain;margin:0 auto 10px;filter:drop-shadow(0 4px 20px rgba(0,0,0,.6))}
.match-hero-name{font-size:18px;font-weight:900;letter-spacing:-.3px}
.match-hero-score{font-size:60px;font-weight:900;letter-spacing:-3px;min-width:150px;text-align:center;line-height:1}
.match-hero-score .ht{display:block;font-size:13px;font-weight:500;color:var(--text-3);letter-spacing:0;margin-top:4px}
.match-hero-meta{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.status-pill{
    padding:4px 12px;border-radius:20px;font-size:11px;font-weight:800;
    text-transform:uppercase;letter-spacing:.6px;
}
.status-live{background:var(--live-dim);color:var(--live);border:1px solid rgba(230,57,70,.4)}
.status-ft{background:rgba(255,255,255,.07);color:var(--text-2)}
.status-ns{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(244,255,71,.3)}
.status-ht{background:rgba(255,149,0,.15);color:var(--elite)}
.venue-info{font-size:12px;color:var(--text-3);margin-top:10px}

/* ── Events timeline ─────────────────────────────────────────────────── */
.timeline{display:grid;gap:3px;padding:4px 0}
.timeline-event{
    display:grid;grid-template-columns:1fr 48px 1fr;
    align-items:center;gap:8px;padding:9px 12px;
    border-radius:var(--radius-s);transition:background var(--ease);
}
.timeline-event:hover{background:var(--bg-elevated)}
.event-home{text-align:right}
.event-away{text-align:left}
.event-mid{text-align:center;font-size:11px;font-weight:800;color:var(--accent)}
.event-player-name{font-size:13px;font-weight:700}
.event-sub-detail{font-size:11px;color:var(--text-2);margin-top:2px}
.event-icon-wrap{font-size:16px}

/* ── Stats bars ───────────────────────────────────────────────────────── */
.stats-container{padding:0 4px}
.stat-team-heads{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:14px 16px;background:var(--bg-elevated);border-radius:var(--radius-m);margin-bottom:16px}
.sth-team{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px}
.sth-team.right{flex-direction:row-reverse}
.sth-label{font-size:11px;color:var(--text-3);text-align:center;font-weight:600}
.stat-rows{display:grid;gap:12px}
.stat-row .stat-lbl{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px;font-weight:600}
.stat-lbl-home{color:var(--accent)}
.stat-lbl-key{color:var(--text-2)}
.stat-lbl-away{color:var(--live)}
.stat-bar{display:flex;height:4px;border-radius:2px;background:var(--bg-elevated);overflow:hidden}
.stat-bar-h{background:var(--accent);border-radius:2px 0 0 2px}
.stat-bar-a{background:var(--live);border-radius:0 2px 2px 0}

/* ── Lineup grid ─────────────────────────────────────────────────────── */
.lineup-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lineup-side-title{
    display:flex;align-items:center;gap:8px;padding:12px 14px;
    background:var(--bg-elevated);border-radius:var(--radius-m);margin-bottom:10px;font-weight:800;
}
.lineup-list{display:grid;gap:3px;margin-bottom:14px}
.lineup-player{
    display:flex;align-items:center;gap:9px;
    padding:8px 12px;background:var(--bg-card);border-radius:var(--radius-s);
}
.lineup-num{font-size:11px;font-weight:900;color:var(--accent);width:20px;text-align:center;flex-shrink:0}
.lineup-name{font-size:13px;font-weight:600;flex:1}
.lineup-pos{font-size:10px;color:var(--text-3);flex-shrink:0}
.lineup-sub-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);padding:8px 0 4px}
.lineup-player.sub-player{opacity:.65}

/* ── H2H ─────────────────────────────────────────────────────────────── */
.h2h-summary{
    display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;gap:12px;padding:16px;
    background:var(--bg-elevated);border-radius:var(--radius-m);margin-bottom:16px;text-align:center;
}
.h2h-big{font-size:32px;font-weight:900}
.h2h-lbl{font-size:11px;color:var(--text-2);margin-top:3px}
.h2h-sep{font-size:18px;color:var(--text-3)}
.h2h-win{color:var(--green)}.h2h-draw{color:var(--text-2)}.h2h-lose{color:var(--live)}

/* ── Predictions ─────────────────────────────────────────────────────── */
.pred-bar-wrap{margin-bottom:16px}
.pred-bar{
    display:grid;grid-template-columns:1fr 1fr 1fr;
    height:8px;border-radius:4px;overflow:hidden;gap:2px;
}
.pred-home{background:var(--accent);border-radius:4px 0 0 4px}
.pred-draw{background:var(--text-3)}
.pred-away{background:var(--live);border-radius:0 4px 4px 0}
.pred-labels{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:6px;font-size:12px;font-weight:700}
.pred-labels span:nth-child(2){text-align:center;color:var(--text-2)}
.pred-labels span:first-child{color:var(--accent)}
.pred-labels span:last-child{text-align:right;color:var(--live)}
.pred-advice{
    background:var(--bg-elevated);border-radius:var(--radius-m);padding:14px 16px;
    display:flex;align-items:flex-start;gap:10px;font-size:13px;
}

/* ── Player profile ──────────────────────────────────────────────────── */
.player-hero{
    background:linear-gradient(135deg,#0a1922 0%,#1a2d3e 100%);
    padding:44px 20px;border-bottom:1px solid var(--border);
}
.player-hero-inner{max-width:900px;margin:0 auto;display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}
.player-photo-wrap{flex-shrink:0}
.player-photo{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--border-hi);background:var(--bg-elevated)}
.player-meta{flex:1}
.player-name{font-size:32px;font-weight:900;letter-spacing:-.8px;margin-bottom:6px}
.player-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.player-badge{padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700;background:var(--bg-elevated);color:var(--text-2)}
.player-stats-strip{display:flex;gap:24px;flex-wrap:wrap;margin-top:16px}
.pstat{text-align:center}
.pstat-val{font-size:22px;font-weight:900;color:var(--accent);line-height:1}
.pstat-lbl{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}

/* ── Team page ────────────────────────────────────────────────────────── */
.team-hero{
    background:linear-gradient(180deg,#162232 0%,var(--bg-deep) 100%);
    padding:44px 20px;border-bottom:1px solid var(--border);
}
.team-hero-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:28px;flex-wrap:wrap}

/* ── Search ──────────────────────────────────────────────────────────── */
.search-hero-block{
    padding:44px 20px 28px;text-align:center;
    background:linear-gradient(180deg,var(--bg-card),var(--bg-deep));
    border-bottom:1px solid var(--border);
}
.search-big-bar{
    display:flex;max-width:580px;margin:20px auto 0;
    background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:var(--radius-m);overflow:hidden;
    transition:border-color var(--ease);
}
.search-big-bar:focus-within{border-color:rgba(244,255,71,.4)}
.search-big-bar input{
    flex:1;background:none;border:none;outline:none;
    color:var(--text-1);padding:13px 18px;font-size:15px;
}
.search-big-bar input::placeholder{color:var(--text-3)}
.search-big-bar button{
    background:var(--accent);color:var(--bg-deep);
    padding:13px 22px;font-weight:800;font-size:14px;transition:opacity var(--ease);
}
.search-big-bar button:hover{opacity:.85}
.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.result-card{
    display:flex;align-items:center;gap:12px;
    padding:14px;background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-m);transition:border-color var(--ease),background var(--ease);
    color:inherit;
}
.result-card:hover{border-color:rgba(244,255,71,.25);background:var(--bg-elevated)}
.result-card img{width:44px;height:44px;object-fit:contain;flex-shrink:0}
.result-name{font-size:14px;font-weight:700}
.result-sub{font-size:12px;color:var(--text-2);margin-top:2px}

/* ── Premium gate ────────────────────────────────────────────────────── */
.premium-gate{
    text-align:center;padding:48px 20px;
    background:linear-gradient(135deg,rgba(244,255,71,.04),rgba(255,149,0,.03));
    border:1px dashed rgba(244,255,71,.2);border-radius:var(--radius-l);
    margin:20px 0;
}
.gate-icon{font-size:36px;margin-bottom:10px}
.gate-title{font-size:18px;font-weight:900;margin-bottom:6px}
.gate-msg{font-size:14px;color:var(--text-2);margin-bottom:20px}
.gate-btn{
    display:inline-block;padding:12px 28px;border-radius:var(--radius-m);
    background:var(--accent);color:var(--bg-deep);font-weight:800;font-size:14px;
    transition:opacity var(--ease);
}
.gate-btn:hover{opacity:.85}

/* ── Plans page ──────────────────────────────────────────────────────── */
.plans-hero{
    text-align:center;padding:60px 20px 40px;
    background:linear-gradient(180deg,var(--bg-card),var(--bg-deep));
    border-bottom:1px solid var(--border);
}
.plans-hero h1{font-size:40px;font-weight:900;letter-spacing:-1.5px;margin-bottom:10px}
.plans-hero p{font-size:16px;color:var(--text-2)}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;max-width:1000px;margin:0 auto;padding:40px 20px}
.plan-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-l);padding:28px;position:relative;overflow:hidden;
    transition:border-color var(--ease),transform var(--ease);
}
.plan-card:hover{transform:translateY(-3px)}
.plan-card.featured{border-color:rgba(244,255,71,.4);background:linear-gradient(180deg,rgba(244,255,71,.04),var(--bg-card))}
.plan-card.elite-card{border-color:rgba(255,149,0,.3);background:linear-gradient(180deg,rgba(255,149,0,.04),var(--bg-card))}
.plan-badge-top{
    position:absolute;top:16px;right:16px;padding:3px 10px;border-radius:12px;
    font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
}
.plan-name{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text-2);margin-bottom:6px}
.plan-price{font-size:40px;font-weight:900;letter-spacing:-1.5px;line-height:1}
.plan-price sup{font-size:18px;font-weight:700;vertical-align:super;letter-spacing:0}
.plan-period{font-size:13px;color:var(--text-2);margin-bottom:20px}
.plan-features{display:grid;gap:8px;margin:20px 0}
.plan-feature{display:flex;align-items:flex-start;gap:8px;font-size:13px}
.plan-feature .check{color:var(--green);font-size:14px;flex-shrink:0;margin-top:1px}
.plan-feature .cross{color:var(--text-3);font-size:14px;flex-shrink:0;margin-top:1px}
.plan-feature .locked{color:var(--text-3)}
.plan-btn{
    display:block;width:100%;padding:13px;border-radius:var(--radius-m);
    text-align:center;font-weight:800;font-size:14px;margin-top:20px;
    transition:opacity var(--ease);
}
.plan-btn-free{background:var(--bg-elevated);color:var(--text-2)}
.plan-btn-pro{background:var(--accent);color:var(--bg-deep)}
.plan-btn-elite{background:var(--elite);color:#fff}
.plan-btn:hover{opacity:.85}

/* ── Auth forms ──────────────────────────────────────────────────────── */
.auth-page{
    min-height:calc(100vh - var(--topbar-h) - var(--header-h));
    display:flex;align-items:center;justify-content:center;padding:40px 20px;
}
.auth-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-l);padding:36px;width:100%;max-width:420px;
}
.auth-title{font-size:24px;font-weight:900;margin-bottom:6px}
.auth-sub{font-size:14px;color:var(--text-2);margin-bottom:28px}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.form-input{
    width:100%;padding:11px 14px;background:var(--bg-elevated);
    border:1px solid var(--border);border-radius:var(--radius-s);
    color:var(--text-1);font-size:14px;font-family:var(--font);
    transition:border-color var(--ease);outline:none;
}
.form-input:focus{border-color:rgba(244,255,71,.4)}
.form-input::placeholder{color:var(--text-3)}
.form-submit{
    width:100%;padding:13px;border-radius:var(--radius-m);
    background:var(--accent);color:var(--bg-deep);font-weight:900;
    font-size:15px;margin-top:8px;transition:opacity var(--ease);
}
.form-submit:hover{opacity:.85}
.form-alt{text-align:center;margin-top:16px;font-size:13px;color:var(--text-2)}
.form-alt a{color:var(--accent);font-weight:700}
.form-error{
    background:var(--live-dim);border:1px solid rgba(230,57,70,.35);
    color:var(--live);padding:10px 14px;border-radius:var(--radius-s);
    font-size:13px;margin-bottom:16px;
}
.form-success{
    background:rgba(45,206,137,.1);border:1px solid rgba(45,206,137,.3);
    color:var(--green);padding:10px 14px;border-radius:var(--radius-s);
    font-size:13px;margin-bottom:16px;
}

/* ── Injuries / Transfers ────────────────────────────────────────────── */
.injury-list{display:grid;gap:6px}
.injury-row{
    display:flex;align-items:center;gap:12px;
    padding:12px 14px;background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-m);
}
.injury-photo{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--bg-elevated);flex-shrink:0}
.injury-info{flex:1}
.injury-name{font-size:14px;font-weight:700}
.injury-detail{font-size:12px;color:var(--text-2);margin-top:2px}
.injury-type{
    padding:3px 9px;border-radius:10px;font-size:11px;font-weight:700;flex-shrink:0;
}
.injury-type.muscular,.injury-type.muscle{background:rgba(230,57,70,.15);color:var(--live)}
.injury-type.knee,.injury-type.foot{background:rgba(255,149,0,.15);color:var(--elite)}
.injury-type.suspended{background:var(--accent-dim);color:var(--accent)}
.injury-type.other,.injury-type.illness{background:rgba(255,255,255,.07);color:var(--text-2)}
.transfer-row{
    display:flex;align-items:center;gap:12px;
    padding:12px 14px;background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-m);
}
.transfer-arrow{font-size:16px;color:var(--text-3);flex-shrink:0}
.transfer-team{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;flex:1}
.transfer-team img{width:20px;height:20px;object-fit:contain}
.transfer-fee{
    padding:3px 9px;border-radius:10px;font-size:11px;font-weight:700;
    background:rgba(45,206,137,.12);color:var(--green);flex-shrink:0;
}
.transfer-fee.loan{background:var(--accent-dim);color:var(--accent)}
.transfer-fee.free{background:rgba(255,255,255,.07);color:var(--text-2)}

/* ── Utilities ────────────────────────────────────────────────────────── */
/* ── Tab content spinner ─────────────────────────────────────────────── */
.tab-spinner{
    width:32px;height:32px;border-radius:50%;
    border:3px solid rgba(244,255,71,.15);
    border-top-color:var(--accent);
    animation:tabSpin .7s linear infinite;
}
@keyframes tabSpin{to{transform:rotate(360deg)}}

/* ── Content skeleton loader ─────────────────────────────────────────── */
/* While loading: hide real content */
.content-loading{visibility:hidden;pointer-events:none}

/* Skeleton overlay */
#contentSkeleton{
    position:absolute;
    top:0;left:0;right:0;
    padding:20px 16px;
    display:flex;flex-direction:column;gap:12px;
    z-index:10;
    pointer-events:none;
}
#contentSkeleton.sk-done{display:none}

/* Shimmer animation */
@keyframes shimmer{
    0%{background-position:-600px 0}
    100%{background-position:600px 0}
}
.sk-block{
    border-radius:var(--radius-m);
    background:linear-gradient(90deg,
        var(--bg-elevated) 0%,
        var(--bg-hover) 50%,
        var(--bg-elevated) 100%);
    background-size:1200px 100%;
    animation:shimmer 1.4s ease-in-out infinite;
}
.sk-tall  {height:140px}
.sk-medium{height:72px}
.sk-short {height:52px}

.empty-state{text-align:center;padding:56px 20px;color:var(--text-2)}
.empty-state .ei{font-size:36px;margin-bottom:10px}
.empty-state h3{font-size:17px;font-weight:800;margin-bottom:5px;color:var(--text-1)}
.skeleton{
    background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-elevated) 50%,var(--bg-card) 75%);
    background-size:200% 100%;animation:skel 1.5s ease infinite;
    border-radius:var(--radius-s);height:56px;margin-bottom:6px;
}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.pill-accent{background:var(--accent-dim);color:var(--accent)}
.pill-live{background:var(--live-dim);color:var(--live)}
.pill-muted{background:rgba(255,255,255,.06);color:var(--text-2)}
.pill-green{background:rgba(45,206,137,.12);color:var(--green)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.three-col-main{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.divider{height:1px;background:var(--border);margin:16px 0}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer{
    background:var(--bg-card);border-top:1px solid var(--border);
    padding:40px 20px 0;margin-top:0;flex-shrink:0;
}
.footer-inner{
    max-width:1440px;margin:0 auto;
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:32px;
}

.footer-logo{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.footer-tagline{font-size:13px;color:var(--text-2);line-height:1.6;margin-bottom:16px;max-width:260px}
.footer-upgrade-btn{
    display:inline-block;padding:9px 20px;border-radius:var(--radius-m);
    background:var(--accent);color:var(--bg-deep);font-weight:800;font-size:13px;
}
.footer-col-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text-3);margin-bottom:12px}
.footer-col a{display:block;font-size:13px;color:var(--text-2);margin-bottom:8px;transition:color var(--ease)}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{
    border-top:1px solid var(--border);padding:16px 0 20px;text-align:center;
    font-size:12px;color:var(--text-3);
}
.footer-bottom a{color:var(--text-2)}.footer-bottom a:hover{color:var(--accent)}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media(max-width:1024px){
    .page-layout{grid-template-columns:1fr}
    .side-col{display:none}
    .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
    .primary-nav{display:none}
    .hamburger{display:flex}
    .mobile-menu{display:block}
    .search-form{display:none}
    .btn-upgrade-sm{display:none}
    .three-col-main{grid-template-columns:1fr}
    .two-col{grid-template-columns:1fr}
    .match-hero-score{font-size:42px}
    .match-hero-name{font-size:15px}
    .match-hero-logo{width:60px;height:60px}
    .hero-logo-wrap{width:100px;height:100px}
    .hero-logo{width:80px;height:80px}
    .hero-inner{flex-direction:column}
    .hero-right{flex-direction:row;gap:20px;align-items:center}
    .hero-slide-overlay{
        background:linear-gradient(to bottom, rgba(10,19,26,.75) 0%, rgba(10,19,26,.88) 100%);
    }
    .standings-table td:nth-child(n+7),
    .standings-table th:nth-child(n+7){display:none}
    .lineup-cols{grid-template-columns:1fr}
    .footer-inner{grid-template-columns:1fr;gap:0;padding-bottom:16px}
    .footer-col:not(:first-child){display:none}
    .site-footer{padding:20px 20px 0}
    .plans-grid{grid-template-columns:1fr}
    .top-bar-right .topbar-link{display:none}
}

/* ── Subscribed state indicators & account dropdowns ─────────────────── */
.topbar-subscribed{
    padding:3px 10px;border-radius:12px;
    background:rgba(45,206,137,.15);
    border:1px solid rgba(45,206,137,.3);
    color:#2dce89;
    font-weight:800;font-size:11px;letter-spacing:.3px;
    cursor:pointer;
}
.topbar-account-wrap{position:relative}
.topbar-account-menu{
    position:absolute;top:calc(100% + 8px);right:0;
    background:#141F27;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    min-width:190px;
    box-shadow:0 8px 28px rgba(0,0,0,.5);
    overflow:hidden;
    display:none;
    z-index:500;
}
.topbar-account-wrap.open .topbar-account-menu{display:block}

.btn-subscribed-sm{
    padding:7px 14px;border-radius:18px;
    background:rgba(45,206,137,.12);
    border:1px solid rgba(45,206,137,.25);
    color:#2dce89;
    font-size:12px;font-weight:800;white-space:nowrap;
    cursor:pointer;
}
.acct-dropdown-wrap{position:relative}
.acct-dropdown-menu{
    position:absolute;top:calc(100% + 8px);right:0;
    background:#141F27;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    min-width:200px;
    box-shadow:0 8px 28px rgba(0,0,0,.5);
    overflow:hidden;
    display:none;
    z-index:500;
}
.acct-dropdown-wrap.open .acct-dropdown-menu{display:block}

.acct-menu-item{
    display:block;
    padding:11px 16px;
    font-size:13px;font-weight:600;
    color:#8B9EA9;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:background .12s,color .12s;
}
.acct-menu-item:last-child{border-bottom:none}
.acct-menu-item:hover{background:rgba(255,255,255,.05);color:#fff}
.acct-menu-danger{color:#ff8a8a}
.acct-menu-danger:hover{background:rgba(230,57,70,.1);color:#ff6b6b}

.footer-subscribed-badge{
    display:inline-block;padding:7px 16px;border-radius:var(--radius-m);
    background:rgba(45,206,137,.12);
    border:1px solid rgba(45,206,137,.25);
    color:#2dce89;font-weight:800;font-size:13px;
}