/* ═══════════════════════════════════════════════════════════════════════════
   FanReactionsFC.com — Design System
   Dark editorial sports-magazine theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
/* Self-hosted (was loaded from fonts.googleapis.com) so no request/IP is
   sent to Google before consent — see /privacy. Single variable-weight
   file covers 400–800, latin subset only (site is English-only). */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/fonts/Inter-Variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Reset & Base ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Aligned 1:1 with the FRFC Design System handoff (Apr 2026).
     Key rules (do not drift without updating the design system too):
       • Navy + yellow duo only. One gradient: 135deg navy → navy-deep.
       • Cards have NO resting shadow. Hover only: translateY(-2px)
         + border darkens to text-muted + the soft shadow below.
       • The system leans on borders, not shadows.
  */
  /* ── Brand ── */
  --navy:     #061A5D;
  --yellow:   #F6BE06;
  --star:     #F6BE06;
  /* ── Light palette ── */
  --bg:       #F0F2F7;
  --bg-card:  #FFFFFF;
  --bg-hover: #E8EBF2;
  --bg-input: #F5F7FB;
  --border:   #D0D5E0;
  --text:     #111827;
  --text-dim: #4B5563;
  --text-muted:#6B7280;
  --accent:   #061A5D;
  --accent-hover:#0A2478;
  --accent-soft:rgba(6,26,93,.07);
  --accent-text:#FFFFFF;
  --red:      #E63946;
  --green:    #2ECC71;
  --blue:     #3B82F6;
  --purple:   #8B5CF6;
  --orange:   #F97316;
  /* ── Radii ── */
  --radius-sm:6px;
  --radius:   10px;
  --radius-lg:16px;
  --radius-pill:100px;
  /* ── Elevation ── */
  --shadow:   0 2px 12px rgba(0,0,0,.06);
  --focus-ring: 0 0 0 3px rgba(6,26,93,.08);
  /* ── Type scale ──
     Eight steps, 11px floor. Everything on the site resolves to one of
     these — if a design needs a size that isn't here, the step is wrong,
     not the scale. Replaced 50+ ad-hoc rem values whose most-used members
     were 10–11px, which made the whole UI read as "small text everywhere".
     Exception: .avatar-fallback keeps `em` on purpose so initials scale
     with whatever avatar size contains them. */
  --fs-xs:   11px;  /* micro: badges, timestamps, footnotes — FLOOR */
  --fs-sm:   12px;  /* small meta, dense table cells */
  --fs-base: 13px;  /* default UI text: buttons, labels, most copy */
  --fs-md:   15px;  /* body copy, lead paragraphs */
  --fs-lg:   18px;  /* card + subsection titles */
  --fs-xl:   21px;  /* section headings */
  --fs-2xl:  27px;  /* page hero titles */
  --fs-3xl:  36px;  /* homepage h1, hero stat numbers */
  /* ── Spacing (4px base) ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-9: 36px;
  --s-10:40px;
  --s-15:60px;
  --header-bg:rgba(255,255,255,.92);
  --font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-w:    1200px;
  /* Back-compat aliases kept for .rankings-card and any other recent
     additions that still reference the old shadow / border-soft names.
     These resolve to the single --shadow / --border tokens above. */
  --shadow-sm: none;
  --shadow-md: var(--shadow);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.16);
  --border-soft: var(--border);
}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-hover)}
img{display:block;max-width:100%}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
::selection{background:var(--navy);color:#fff}

/* ── Utility ───────────────────────────────────────────────────────────── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 20px}
/* Reading-width variants — compose with .container */
.container-narrow{max-width:560px}
.container-mid{max-width:720px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ── Section rhythm ──────────────────────────────────────────────────────
   Page vertical spacing came from inline styles repeated across every
   renderer (`style="padding-top:28px;padding-bottom:60px"` and friends),
   which is how the values drifted to 24/28/60 at random and why button
   and type drift kept reappearing — inline styles bypass the system.
   Three named steps, all drawn from the --s-* scale:
     .section          page body under a hero (28 / 60)
     .section-stack    a block that stacks under another (28 top only)
     .section-message  centered empty / error / loading state (60 / 20)
*/
.section{padding-top:var(--s-7);padding-bottom:var(--s-15)}
.section-stack{padding-top:var(--s-7)}
.section-message{padding:var(--s-15) var(--s-5);text-align:center}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em}
.badge-accent{background:var(--navy);color:#fff}
.badge-gold{background:rgba(246,190,6,.12);color:#b8860b;border:1px solid rgba(246,190,6,.3)}
.badge-verified{background:var(--navy);color:var(--yellow);border:1px solid var(--navy);flex-shrink:0;vertical-align:middle}
.badge-green{background:rgba(46,204,113,.12);color:var(--green);border:1px solid rgba(46,204,113,.2)}
.badge-dim{background:var(--bg-hover);color:var(--text-dim);border:1px solid var(--border)}
.badge-live{background:var(--red);color:#fff;animation:pulse-live 1.8s infinite}
@keyframes pulse-live{0%,100%{opacity:1}50%{opacity:.65}}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:var(--radius-pill);background:var(--bg-hover);color:var(--text-dim);font-size:var(--fs-sm);font-weight:500;border:1px solid var(--border);transition:all .15s;cursor:pointer}
.chip:hover{background:var(--bg-input);color:var(--text)}
.chip.active{background:var(--navy);color:var(--yellow);border-color:var(--navy);font-weight:600}
.chip-league-logo{width:18px;height:18px;object-fit:contain;display:inline-block}

/* ── Header / Nav ──────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.nav-brand{display:flex;align-items:center;gap:8px;font-size:var(--fs-lg);font-weight:700;color:var(--text);white-space:nowrap}
.nav-brand .brand-logo{width:36px;height:36px;object-fit:contain;flex-shrink:0}
.nav-brand .brand-logo-round{width:40px;height:40px;object-fit:contain;flex-shrink:0;border-radius:50%}
.nav-brand .brand-fan{color:var(--yellow);font-weight:800}
.nav-brand .brand-reactions{color:var(--navy);font-weight:800}
.nav-brand .brand-fc{color:var(--yellow);font-weight:800}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-link{padding:7px 14px;border-radius:var(--radius-sm);font-size:var(--fs-base);font-weight:500;color:var(--text-dim);transition:all .15s}
.nav-link:hover{color:var(--text);background:var(--bg-hover)}
.nav-link.active{color:var(--text);background:var(--bg-hover);font-weight:600}
.nav-link.live-dot::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:6px;animation:pulse-live 1.8s infinite}
.nav-actions{display:flex;align-items:center;gap:8px}

/* Skip link — off-screen until keyboard focus, then visible above the header. */
.skip-link{position:absolute;left:12px;top:8px;z-index:300;padding:8px 14px;background:var(--yellow);color:var(--navy);font-weight:700;font-size:var(--fs-base);border-radius:var(--radius-sm);text-decoration:none;transform:translateY(-200%)}
.skip-link:focus{transform:none;outline:2px solid #fff;outline-offset:2px}

/* Mobile nav */
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:var(--fs-xl);padding:6px}
@media(max-width:768px){
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;background:var(--bg-card);border-bottom:1px solid var(--border);padding:12px 20px;gap:4px}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
}

/* ── Buttons ─────────────────────────────────────────────────────────────
   One base + five semantic variants + orthogonal modifiers that combine
   freely (.btn-sm/.btn-lg/.btn-pill/.btn-block/.btn-icon/.btn-on-dark).
   Replaced seven ad-hoc variants that each re-declared padding, radius and
   font-size from scratch and had drifted apart — .btn-cta-band had grown a
   translateY+shadow hover contradicting the spec below, and the Contact
   form was borrowing the generator's .btn-generate. Platform-brand buttons
   (.btn-youtube/.btn-x/.btn-google) stay separate on purpose: their colors
   are mandated by the platforms, not chosen by us.
   Spec: no shadows, no translateY. Color-only hover. Navy + yellow duo.
*/
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 20px;border-radius:var(--radius-sm);font-size:var(--fs-base);font-weight:600;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;line-height:1.2;white-space:nowrap;font-family:inherit;cursor:pointer;text-decoration:none}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Variants */
.btn-primary{background:var(--navy);color:var(--yellow);font-weight:700}
.btn-primary:hover{background:var(--accent-hover);color:var(--yellow)}
.btn-accent{background:var(--yellow);color:var(--navy);font-weight:700}
.btn-accent:hover{background:#ffd000;color:var(--navy)}
.btn-secondary{background:var(--bg-hover);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--text-dim);background:var(--bg-input)}
.btn-ghost{background:transparent;color:var(--text-dim);padding:6px 12px;border-color:transparent}
.btn-ghost:hover{color:var(--text);background:var(--bg-hover)}
.btn-danger{background:rgba(230,57,70,.08);color:var(--red);border-color:rgba(230,57,70,.25)}
.btn-danger:hover{background:var(--red);color:#fff}
/* Inline icon from the custom PNG set, sized to sit with button text.
   vertical-align covers non-flex hosts (e.g. .cp-link-btn, which is
   display:block); flex hosts centre it via align-items and ignore it. */
.btn-ico{width:16px;height:16px;object-fit:contain;display:inline-block;vertical-align:-3px;flex-shrink:0}
/* Modifiers — combine with any variant */
.btn-sm{padding:5px 12px;font-size:var(--fs-sm)}
.btn-lg{padding:12px 28px;font-size:var(--fs-md)}
.btn-pill{border-radius:var(--radius-pill)}
.btn-block{width:100%}
.btn-icon{width:36px;height:36px;padding:0;border-radius:50%}
/* Light-on-dark surfaces (creator hero, navy sections) */
.btn-on-dark{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
.btn-on-dark:hover{background:rgba(255,255,255,.18);color:#fff}
/* Public badge next to the name — shown to every visitor when the profile
   has been claimed by its creator. Distinct from the "Manage Channel"
   button the owner alone sees (a .btn-accent, not a text link — a green
   link on this navy background barely contrasted on hover) and from the
   admin-granted "Verified" badge, which is a separate signal. */
.cp-claimed-icon{width:22px;height:22px;object-fit:contain;flex-shrink:0}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{padding:60px 0 44px;text-align:center;background:url('/img/hero-bg.jpg') center/cover no-repeat var(--navy);color:#fff;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(6,26,93,.75) 0%,rgba(6,26,93,.55) 50%,rgba(6,26,93,.7) 100%);pointer-events:none;z-index:1}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero > *:not(.hero-video){position:relative;z-index:2}
.hero .container{position:relative;z-index:2}
.hero-logo{display:block;margin:0 auto 20px;height:110px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}
@media(max-width:600px){.hero-logo{height:72px;margin-bottom:16px}}
.hero h1{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px;color:#fff}
.hero h1 .accent{color:var(--yellow)}
.hero .subtitle{color:rgba(255,255,255,.65);font-size:var(--fs-md);margin-bottom:28px}

/* ── Shared page hero (inner pages) ────────────────────────────────────── */
.page-hero{background:url('/img/hero-bg.jpg') center/cover no-repeat var(--navy);color:#fff;padding:36px 0 32px;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(6,26,93,.75) 0%,rgba(6,26,93,.55) 50%,rgba(6,26,93,.7) 100%);pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.page-hero-back{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.5);font-size:var(--fs-sm);margin-bottom:14px;transition:color .15s;text-decoration:none}
.page-hero-back:hover{color:rgba(255,255,255,.8)}
.page-hero-inner{display:flex;align-items:center;gap:20px}
.page-hero-crest{width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));flex-shrink:0}
.page-hero-text{flex:1;min-width:0}
.page-hero-eyebrow{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--yellow);margin-bottom:6px}
.page-hero-title{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:5px;color:#fff}
.page-hero-subtitle{color:rgba(255,255,255,.6);font-size:var(--fs-base);line-height:1.5}
.page-hero-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.page-hero-tag{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-pill);padding:3px 12px;font-size:var(--fs-xs);font-weight:600}
.page-hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ── Platform stat bar (home + inner pages) ─────────────────────────────── */
.platform-stat-bar{background:var(--bg-card);border-bottom:1px solid var(--border);padding:0}
.platform-stats{display:flex;gap:0}
.platform-stat{flex:1;padding:28px 24px;display:flex;flex-direction:column;align-items:center;gap:6px;border-right:1px solid var(--border);text-align:center;color:inherit;text-decoration:none}
.platform-stat:last-child{border-right:none}
.platform-stat--live{cursor:pointer;transition:background .15s}
.platform-stat--live:hover{background:rgba(230,57,70,.06)}
.platform-stat-icon{width:34px;height:34px;object-fit:contain;margin-bottom:2px}
.platform-stat-num{font-size:var(--fs-3xl);font-weight:800;color:var(--navy);letter-spacing:-.04em;line-height:1}
.platform-stat-num--live{color:var(--red)}
.platform-stat-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
@media(max-width:700px){.platform-stat{padding:20px 12px}.platform-stat-num{font-size:var(--fs-2xl)}.platform-stat-icon{width:26px;height:26px}}
@media(max-width:480px){.platform-stats{flex-wrap:wrap}.platform-stat{flex:1 1 50%;border-bottom:1px solid var(--border)}.platform-stat:nth-child(2n){border-right:none}}

/* ── Section card (shared across all pages) ─────────────────────────────── */
.sc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:24px}
.sc-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--border)}
.sc-head-title{font-size:var(--fs-md);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);display:flex;align-items:center;gap:8px}
.section-title-icon{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.sc-head-right{display:flex;align-items:center;gap:12px}
.sc-head-link{color:var(--accent);font-size:var(--fs-sm);font-weight:500;text-decoration:none;transition:color .15s}
.sc-head-link:hover{color:var(--accent-hover)}
.sc-body{padding:18px}
.sc-body--tight{padding:0}
.page-body{padding:28px 0 60px}

/* Search */
.search-wrap{position:relative;max-width:560px;margin:0 auto 20px}
.search-input{width:100%;padding:14px 22px 14px 48px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:var(--fs-md);transition:border-color .15s,box-shadow .15s}
.search-input:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 4px rgba(246,190,6,.2)}
.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:var(--fs-lg);pointer-events:none}
.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);max-height:340px;overflow-y:auto;display:none;z-index:50;box-shadow:var(--shadow-lg)}
.search-results.open{display:block}
.search-result{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:background .1s}
.search-result:hover{background:var(--bg-hover)}
.search-result img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--bg-hover)}
.search-result .sr-name{font-weight:600;font-size:var(--fs-base)}
.search-result .sr-team{color:var(--text-dim);font-size:var(--fs-sm)}

/* Chips row */
.chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
/* Chips inside navy hero get a glass-white look */
.hero .chip{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.25);color:#fff;font-weight:600}
.hero .chip:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.35)}
.hero .chip .chip-league-logo{filter:brightness(1.1) drop-shadow(0 0 1px rgba(255,255,255,.3))}
.hero .chip:hover{background:rgba(255,255,255,.18);color:#fff}

/* ── Section headers ─────────────────────────────────────────────────────
   A dead `.section{padding:36px 0}` lived here with no markup using it. It
   sat after the rhythm utilities above and silently won on source order,
   so it is deleted rather than left to shadow .section again. */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}
.section-title{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;color:var(--text)}
.section-link{color:var(--accent);font-size:var(--fs-base);font-weight:500;transition:color .15s}
.section-link:hover{color:var(--accent-hover)}

/* ── Cards / Creator cards ─────────────────────────────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.creator-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:transform .15s,box-shadow .15s,border-color .15s;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:12px}
.creator-card:hover{border-color:var(--text-muted);transform:translateY(-2px);box-shadow:var(--shadow)}
.cc-top{display:flex;align-items:center;gap:12px}
.cc-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--bg-hover);flex-shrink:0}
.avatar-fallback{display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--yellow);font-weight:700;font-size:.75em;letter-spacing:.02em;border-radius:50%;flex-shrink:0}
.cc-info{flex:1;min-width:0}
.cc-name{font-weight:700;font-size:var(--fs-md);display:flex;align-items:center;gap:6px;min-width:0}
.cc-name-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cc-name .verified{color:var(--blue);font-size:var(--fs-base)}
.cc-team{color:var(--text-dim);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.cc-loc{color:var(--text-muted)}
.cc-meta{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm)}
.cc-rating{display:flex;align-items:center;gap:3px;color:var(--star);font-weight:700}
.cc-rating-count{color:var(--text-muted);font-weight:400}
.cc-subs{color:var(--text);font-weight:800;font-size:var(--fs-base);display:flex;align-items:center;gap:4px}
.cc-subs::before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--border)}
.cc-tags{display:flex;flex-wrap:wrap;gap:4px}
.cc-tag{padding:2px 8px;border-radius:100px;background:var(--bg-hover);color:var(--text-dim);font-size:var(--fs-xs);font-weight:500}
.cc-live{position:absolute;top:12px;right:12px}

/* Top creators tab toggle */
.top-creators-tabs{display:flex;gap:4px;margin-bottom:16px}
.top-creators-tab{padding:7px 18px;border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:600;border:1px solid var(--border);background:var(--bg-hover);color:var(--text-dim);cursor:pointer;transition:all .15s}
.top-creators-tab:hover{border-color:var(--text-muted);color:var(--text)}
.top-creators-tab.active{background:var(--navy);color:var(--yellow);border-color:var(--navy)}

/* ── Creator profile — Hero ────────────────────────────────────────────── */
.cp-hero{background:linear-gradient(135deg,var(--navy) 0%,#0d2d8a 100%);padding:40px 0 36px;position:relative;overflow:hidden}
.cp-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 50%,rgba(246,190,6,.10) 0%,transparent 55%),repeating-linear-gradient(90deg,transparent 0 80px,rgba(255,255,255,.015) 80px 81px);pointer-events:none}
.cp-hero-inner{display:flex;align-items:flex-start;gap:28px;position:relative;z-index:1}
.cp-avatar-wrap{position:relative;flex-shrink:0}
.cp-avatar{width:104px;height:104px;border-radius:50%;object-fit:cover;border:3px solid rgba(246,190,6,.5);background:var(--navy-deep)}
.cp-live-ring{position:absolute;inset:-4px;border-radius:50%;border:2.5px solid var(--red);animation:cpRingPulse 1.8s infinite}
@keyframes cpRingPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.04)}}
.cp-flag-badge{position:absolute;bottom:2px;right:2px;font-size:var(--fs-lg);line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.cp-hero-info{flex:1;min-width:0}
.cp-hero-eyebrow{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.55);margin-bottom:8px}
.cp-hero-eyebrow img{opacity:.8}
.cp-hero-name{font-size:var(--fs-2xl);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.15;margin:0 0 10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cp-hero-desc{color:rgba(255,255,255,.6);font-size:var(--fs-base);line-height:1.55;max-width:560px;margin:0 0 18px}
.cp-social-links{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.cp-hero-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cp-report-link{background:none;border:none;color:rgba(255,255,255,.35);font-size:var(--fs-sm);cursor:pointer;font-family:inherit;padding:0 4px;transition:color .15s;text-decoration:underline}
.cp-report-link:hover{color:rgba(255,255,255,.65)}

/* ── Stat cards bar ────────────────────────────────────────────────────── */
.cp-stats-bar{background:var(--bg-card);border-bottom:1px solid var(--border);padding:0}
.cp-stat-cards{display:flex;overflow-x:auto;scrollbar-width:none}
.cp-stat-cards::-webkit-scrollbar{display:none}
.cp-stat-card{flex:1;min-width:110px;padding:18px 20px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.cp-stat-card:last-child{border-right:none}
.cp-stat-card--primary{background:linear-gradient(135deg,var(--navy) 0%,#0d2d8a 100%)}
.cp-stat-card--primary .cp-stat-label{color:rgba(255,255,255,.55)}
.cp-stat-card--primary .cp-stat-num{color:#fff}
.cp-stat-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted)}
.cp-stat-num{font-size:var(--fs-xl);font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1;display:flex;align-items:baseline;gap:6px}
.cp-stat-num--sm{font-size:var(--fs-lg)}
.cp-stat-growth{font-size:var(--fs-xs);font-weight:700}
.cp-stat-growth.up{color:#2ECC71}
.cp-stat-growth.down{color:var(--red)}

/* ── Body layout ───────────────────────────────────────────────────────── */
.cp-body{display:grid;grid-template-columns:1fr 300px;gap:28px;padding-top:28px;padding-bottom:48px;align-items:start}
.cp-main{display:flex;flex-direction:column;gap:20px;min-width:0}

/* Live alert */
.cp-live-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(230,57,70,.07);border:1px solid rgba(230,57,70,.22);border-radius:var(--radius);font-size:var(--fs-base);color:var(--text)}

/* Section cards */
.cp-section-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.cp-section-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.cp-section-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.cp-section-meta{font-size:var(--fs-sm);color:var(--text-muted)}
.cp-section-link{font-size:var(--fs-sm);color:var(--accent);font-weight:600;text-decoration:none}
.cp-section-link:hover{text-decoration:underline}

/* Video card inside section */
.cp-video-card{display:flex;gap:16px;padding:14px 18px;text-decoration:none;color:var(--text);transition:background .12s}
.cp-video-card:hover{background:var(--bg-hover)}
.cp-video-thumb-wrap{position:relative;flex-shrink:0;width:200px;border-radius:6px;overflow:hidden;background:var(--bg-hover);aspect-ratio:16/9}
.cp-video-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.cp-video-card:hover .cp-video-thumb{transform:scale(1.03)}
.cp-video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xl);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7);opacity:0;transition:opacity .15s}
.cp-video-card:hover .cp-video-play{opacity:1}
.cp-video-info{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.cp-video-title{font-weight:700;font-size:var(--fs-md);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cp-video-meta{font-size:var(--fs-sm);color:var(--text-muted)}

/* Similar creators inside section card */
.cp-section-card .card-grid{padding:14px 18px}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.cp-sidebar{display:flex;flex-direction:column;gap:16px}
.cp-sidebar-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}
.cp-sidebar-title{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:12px}
.cp-sparkline-wrap{display:flex;flex-direction:column;gap:6px}
.cp-sparkline-wrap:empty::after{content:'Loading…';font-size:var(--fs-sm);color:var(--text-muted)}
.sub-sparkline-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.cp-info-list{display:flex;flex-direction:column;gap:10px}
.cp-info-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-size:var(--fs-sm)}
.cp-info-key{color:var(--text-muted);white-space:nowrap}
.cp-info-val{color:var(--text);font-weight:600;text-align:right}
.cp-tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.cp-links{display:flex;flex-direction:column;gap:8px}
.cp-link-btn{display:block;padding:9px 14px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:600;text-decoration:none;text-align:center;transition:background .12s}
.cp-link-yt{background:rgba(255,0,0,.08);color:#c00;border:1px solid rgba(255,0,0,.15)}
.cp-link-yt:hover{background:rgba(255,0,0,.14)}
.cp-link-live{background:var(--bg-hover);color:var(--text);border:1px solid var(--border)}
.cp-link-live:hover{border-color:var(--text-muted)}

.country-flag{height:1.4em;width:auto;border-radius:3px;vertical-align:middle;box-shadow:0 0 0 1px rgba(255,255,255,.1)}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media(max-width:820px){
  .cp-body{grid-template-columns:1fr}
  .cp-sidebar{display:contents}
  .cp-sidebar > *{order:0}
  .cp-hero-inner{gap:18px}
  .cp-avatar{width:80px;height:80px}
  .cp-hero-name{font-size:var(--fs-xl)}
  .cp-video-thumb-wrap{width:140px}
}
@media(max-width:520px){
  .cp-hero-inner{flex-direction:column;align-items:center;text-align:center}
  .cp-hero-actions{justify-content:center}
  .cp-hero-eyebrow{justify-content:center}
  .cp-stat-cards{flex-wrap:wrap}
  .cp-stat-card{min-width:calc(50% - 1px);border-right:none;border-bottom:1px solid var(--border)}
  .cp-video-card{flex-direction:column}
  .cp-video-thumb-wrap{width:100%}
}
.rating-dist{display:flex;flex-direction:column;gap:4px;margin:16px 0}
.rd-row{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
.rd-label{width:16px;color:var(--text-dim);text-align:right}
.rd-bar{flex:1;height:6px;background:var(--bg-hover);border-radius:3px;overflow:hidden}
.rd-fill{height:100%;background:var(--star);border-radius:3px;transition:width .3s}
.rd-count{width:28px;color:var(--text-muted);font-size:var(--fs-xs)}

/* ── Reviews ───────────────────────────────────────────────────────────── */
.review{border-bottom:1px solid var(--border);padding:16px 0}
.review:last-child{border-bottom:none}
.review-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.review-avatar{width:28px;height:28px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:700;color:#fff;object-fit:cover;flex-shrink:0}
img.review-avatar{background:var(--bg-hover)}
.review-user{font-weight:600;font-size:var(--fs-base)}
.review-date{color:var(--text-muted);font-size:var(--fs-xs)}
.review-stars{margin-left:auto;color:var(--star);font-size:var(--fs-sm)}
.review-text{color:var(--text-dim);font-size:var(--fs-base);line-height:1.55}
.review-actions{margin-top:8px;display:flex;gap:12px}
.review-action{color:var(--text-muted);font-size:var(--fs-xs);cursor:pointer;transition:color .15s;background:none;border:none}
.review-action:hover{color:var(--text)}

/* ── Live now strip ────────────────────────────────────────────────────── */
/* ── Live Now strip ───────────────────────────────────────────────────────
   Horizontal scrolling row of stream cards. Each card: YouTube thumbnail
   on top with a pulsing red LIVE badge, creator avatar + name + team
   below. Red accent ring on hover to reinforce the "live" signal.
*/
.live-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:14px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
@media(min-width:900px){.live-strip{grid-auto-columns:minmax(0,1fr);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-auto-flow:row}}
.live-card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--text);transition:all .15s;scroll-snap-align:start}
.live-card:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(230,57,70,.18),var(--shadow)}
.live-thumb-wrap{position:relative;aspect-ratio:16/9;background:var(--bg-hover);overflow:hidden}
.live-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.live-card:hover .live-thumb{transform:scale(1.03)}
.live-badge{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:5px;background:var(--red);color:#fff;font-size:var(--fs-xs);font-weight:800;padding:4px 9px;border-radius:var(--radius-sm);letter-spacing:.06em;animation:pulse-live 1.8s infinite;box-shadow:0 1px 4px rgba(230,57,70,.35)}
.live-badge-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#fff}
.live-body{display:flex;align-items:center;gap:10px;padding:10px 12px 12px}
.live-av{flex-shrink:0}
.lc-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--bg-hover);display:block}
.live-info{min-width:0;flex:1}
.lc-name{font-weight:700;font-size:var(--fs-base);margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.lc-team{color:var(--text-dim);font-size:var(--fs-xs);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--red);color:#fff;font-size:var(--fs-xs);font-weight:800;margin-left:6px;vertical-align:middle}

/* ── Club grid ─────────────────────────────────────────────────────────── */
.club-filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.club-filter{font-size:var(--fs-sm);padding:6px 14px}
.club-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}
.club-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .15s;text-align:center}
.club-tile:hover{border-color:var(--text-muted);transform:translateY(-2px);box-shadow:var(--shadow)}
.club-tile .club-name{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.club-tile .club-meta{display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--text-muted)}
.club-league-badge{width:14px;height:14px;object-fit:contain;display:inline-block}

/* ── Editorial cards ───────────────────────────────────────────────────── */
.editorial-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.editorial-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .15s;cursor:pointer}
.editorial-card:hover{border-color:var(--text-muted);transform:translateY(-2px);box-shadow:var(--shadow)}
.ec-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg-hover)}
.ec-body{padding:16px}
.ec-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:6px}
.ec-title{font-size:var(--fs-md);font-weight:700;line-height:1.3;margin-bottom:6px}
.ec-desc{color:var(--text-dim);font-size:var(--fs-sm);line-height:1.45}

/* ── Trending table ────────────────────────────────────────────────────── */
.trending-list{display:flex;flex-direction:column;gap:2px}
.trending-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:var(--radius-sm);transition:background .1s;cursor:pointer}
.trending-row:hover{background:var(--bg-hover)}
.trending-rank{font-size:var(--fs-lg);font-weight:800;color:var(--text-muted);width:28px;text-align:right}
.trending-row:nth-child(1) .trending-rank{color:var(--star)}
.trending-row:nth-child(2) .trending-rank{color:#c0c0c0}
.trending-row:nth-child(3) .trending-rank{color:#cd7f32}
.trending-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--bg-hover)}
.trending-info{flex:1;min-width:0}
.trending-name{font-weight:600;font-size:var(--fs-base)}
.trending-team{color:var(--text-dim);font-size:var(--fs-xs)}
.trending-score{font-weight:700;color:var(--star);font-size:var(--fs-base)}

/* ── Auth modal ────────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:32px;width:90%;max-width:400px;box-shadow:var(--shadow-lg);position:relative}
.modal h2{font-size:var(--fs-lg);font-weight:700;margin-bottom:4px}
.modal .modal-sub{color:var(--text-dim);font-size:var(--fs-base);margin-bottom:20px}
.modal label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-dim);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.modal input[type="email"],.modal input[type="password"],.modal input[type="text"]{width:100%;padding:11px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text);margin-bottom:14px;transition:border-color .2s,box-shadow .2s;font-size:var(--fs-base)}
.modal input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring);background:var(--bg-card)}
.modal .btn{width:100%}
.modal .switch-link{text-align:center;margin-top:14px;font-size:var(--fs-sm);color:var(--text-dim)}
.modal .switch-link a{color:var(--accent);font-weight:600}
.modal .auth-msg{font-size:var(--fs-sm);color:var(--red);margin-top:8px;min-height:1.2em}
.modal-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text-dim);font-size:var(--fs-lg);cursor:pointer}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;color:#3c4043;font-size:var(--fs-base);font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,box-shadow .15s}
.btn-google:hover{background:#f7f8f8;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.auth-divider{display:flex;align-items:center;text-align:center;color:var(--text-muted);font-size:var(--fs-sm);margin:16px 0}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-divider span{padding:0 12px}

/* ── Filters sidebar ───────────────────────────────────────────────────── */
.discover-layout{display:grid;grid-template-columns:250px 1fr;gap:24px}
@media(max-width:768px){
  .discover-layout{grid-template-columns:1fr}
  .filter-sidebar{position:static;max-height:none;overflow:visible;margin-bottom:16px}
}
.filter-sidebar{position:sticky;top:80px;align-self:start;max-height:calc(100vh - 100px);overflow-y:auto;padding-right:4px}
.filter-group{margin-bottom:16px}
.filter-group-title{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:8px}
.filter-option{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:var(--fs-base);color:var(--text-dim);cursor:pointer;transition:color .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filter-option .crest-sm{flex-shrink:0}
.filter-option:hover,.filter-option.active{color:var(--text);font-weight:600}
.filter-option .count{margin-left:auto;font-size:var(--fs-xs);color:var(--text-muted);flex-shrink:0}

/* Accordion league/club nav */
.league-accordion{border:1px solid var(--border-soft);border-radius:var(--radius);background:var(--bg-card);overflow:hidden;box-shadow:var(--shadow-sm)}
.league-acc-item{border-bottom:1px solid var(--border)}
.league-acc-item:last-child{border-bottom:none}
.league-acc-header{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;font-size:var(--fs-base);font-weight:600;color:var(--text);transition:background .15s;user-select:none}
.league-acc-header:hover{background:var(--bg-hover)}
.league-acc-header.active{background:var(--accent-soft);color:var(--accent)}
.league-acc-header .acc-flag{font-size:var(--fs-md);flex-shrink:0}
.league-acc-header .acc-count{margin-left:auto;font-size:var(--fs-xs);font-weight:400;color:var(--text-muted);flex-shrink:0}
.league-acc-header .acc-arrow{margin-left:4px;font-size:var(--fs-xs);color:var(--text-muted);transition:transform .2s;flex-shrink:0}
.league-acc-header.open .acc-arrow{transform:rotate(90deg)}
.league-acc-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
.league-acc-body.open{max-height:800px}
.league-acc-body .acc-club{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 32px;font-size:var(--fs-sm);color:var(--text-dim);cursor:pointer;transition:all .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.league-acc-body .acc-club:hover{background:var(--bg-hover);color:var(--text)}
.league-acc-body .acc-club.active{color:var(--accent);font-weight:600;background:var(--accent-soft)}
.league-acc-header:focus-visible,.acc-club:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.league-acc-body .acc-club .count{margin-left:auto;font-size:var(--fs-xs);color:var(--text-muted);flex-shrink:0}

/* Top filter bar */
.discover-top-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;padding:14px 18px;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.discover-top-bar .filter-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:500;border:1px solid var(--border);background:var(--bg-card);color:var(--text-dim);cursor:pointer;transition:all .18s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.discover-top-bar .filter-chip:hover{border-color:var(--border);color:var(--text);background:var(--bg-hover)}
.discover-top-bar .filter-chip.active{background:var(--navy);color:var(--yellow);border-color:var(--navy);font-weight:600;box-shadow:var(--shadow-sm)}
.discover-top-bar .filter-chip .chip-x{font-size:var(--fs-xs);margin-left:2px;opacity:.7}
.discover-top-bar .bar-sep{flex-basis:100%;height:0;border:none;margin:0}
.discover-top-bar .bar-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);flex-shrink:0}
.discover-result-count{font-size:var(--fs-base);color:var(--text-dim);margin-bottom:16px}

/* ── FRFC Banner ────────────────────────────────────────────────────────
   Upgraded per design spec: gradient + subtle pitch-line texture, logo
   in yellow-bordered frame, eyebrow with trailing line, stats row.
*/
.frfc-banner{position:relative;background:linear-gradient(135deg,#061A5D 0%,#0A2478 100%);border-radius:var(--radius-lg);padding:28px 32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;color:#E8ECF4;overflow:hidden;box-shadow:0 2px 20px rgba(6,26,93,.15)}
.frfc-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 50%,rgba(246,190,6,.12) 0%,transparent 45%),repeating-linear-gradient(90deg,transparent 0 60px,rgba(255,255,255,.02) 60px 61px);pointer-events:none}
.frfc-banner > *{position:relative;z-index:1}
.frfc-banner-logo-wrap{width:92px;height:92px;background:rgba(255,255,255,.06);border:1px solid rgba(246,190,6,.3);border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.frfc-banner-logo{width:76px;height:76px;object-fit:contain}
.frfc-banner-eyebrow{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--yellow);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.frfc-banner-eyebrow::after{content:'';display:inline-block;width:24px;height:1px;background:rgba(246,190,6,.4)}
.frfc-banner-title{font-size:var(--fs-xl);font-weight:800;margin-bottom:6px;color:#fff;letter-spacing:-.01em}
.frfc-banner-desc{color:#b0b8d0;font-size:var(--fs-base);line-height:1.5;max-width:500px}
.frfc-banner-main{flex:1;min-width:240px}
.frfc-banner-stats{display:flex;gap:24px;margin-top:14px;flex-wrap:wrap}
.frfc-stat{font-size:var(--fs-sm);color:#b0b8d0;white-space:nowrap}
.frfc-stat b{display:block;color:#fff;font-size:var(--fs-md);font-weight:800;margin-bottom:1px}
.frfc-banner-cta{display:flex;flex-direction:column;gap:8px;flex-shrink:0;align-items:stretch}
.btn-youtube,.btn-x{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;padding:9px 22px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-family:inherit;cursor:pointer;text-decoration:none;transition:background .15s,color .15s;border:1px solid transparent}
.btn-youtube{background:var(--red);color:#fff}
.btn-x{background:#000;color:#fff}
.btn-youtube:hover,.btn-x:hover{background:var(--yellow);color:var(--navy)}
@media(max-width:600px){
  .frfc-banner{padding:20px;gap:16px}
  .frfc-banner-logo-wrap{width:72px;height:72px}
  .frfc-banner-logo{width:56px;height:56px}
  .frfc-banner-stats{gap:16px}
  .frfc-banner-cta{flex-direction:row;flex-wrap:wrap}
}

/* ── League logos ─────────────────────────────────────────────────────── */
.league-logo{width:22px;height:22px;object-fit:contain;display:inline-block;vertical-align:middle}
.acc-league-logo{width:20px;height:20px;object-fit:contain;flex-shrink:0}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--border);padding:40px 0;margin-top:60px;color:var(--text-dim);font-size:var(--fs-sm)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:20px}}
.footer-brand{font-size:var(--fs-md);font-weight:700;color:var(--text);margin-bottom:8px}
.footer-logo{height:44px;width:auto;object-fit:contain}
.footer-desc{font-size:var(--fs-sm);color:var(--text-dim);line-height:1.5;max-width:300px}
.footer-col h4{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:10px}
.footer-col a{display:block;padding:3px 0;color:var(--text-dim);font-size:var(--fs-sm);transition:color .15s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:32px;padding-top:20px;border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-muted)}
.footer-legal{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:var(--fs-xs)}
.footer-legal a{color:var(--text-muted);text-decoration:none}
.footer-legal a:hover{color:var(--text-dim);text-decoration:underline}
.footer-clubs{margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}

/* ── Newsletter signup box — same yellow/navy treatment as .cta-band ───── */
.newsletter-box{background:var(--yellow);border:none;border-radius:var(--radius);padding:26px 30px;margin-bottom:28px}
.site-footer .newsletter-box{margin-bottom:32px}
.newsletter-box-text h4{font-size:var(--fs-lg);font-weight:800;color:var(--navy);margin-bottom:4px;letter-spacing:-.01em}
.newsletter-box-text p{font-size:var(--fs-base);color:rgba(6,26,93,.65);margin-bottom:14px}
.newsletter-form{display:flex;gap:10px;flex-wrap:wrap}
.newsletter-input{flex:1;min-width:200px;padding:10px 16px;border-radius:var(--radius-pill);border:1px solid rgba(6,26,93,.15);background:#fff;color:var(--navy);font-size:var(--fs-sm)}
.newsletter-input:focus{outline:none;border-color:var(--navy);box-shadow:var(--focus-ring)}
.newsletter-consent{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:var(--fs-xs);color:rgba(6,26,93,.75);cursor:pointer}
.newsletter-consent input{margin-top:2px;flex-shrink:0}
.newsletter-consent a{color:var(--navy);text-decoration:underline}
.newsletter-msg{font-size:var(--fs-xs);margin-top:8px;min-height:1em}
.footer-clubs h4{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:10px}
.footer-club-links{display:flex;flex-wrap:wrap;gap:6px 14px}
.footer-club-links a{color:var(--text-dim);font-size:var(--fs-sm)}
.footer-club-links a:hover{color:var(--text)}
/* Paid club-hub slot. Sits in its own box above the organic list.
   Labels stay visible (not hover-only) and the card is not a rank row. */
.sponsored-slot{background:#fffdf5;border:2px solid var(--yellow);border-radius:var(--radius);padding:16px 18px;margin:0 0 20px}
.sponsored-slot-labels{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.sponsored-badge{display:inline-flex;align-items:center;background:var(--navy);color:var(--yellow);font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:4px}
.sponsored-badge-featured{background:var(--yellow);color:var(--navy)}
.sponsored-slot-heading{font-size:var(--fs-md);font-weight:800;color:var(--navy);margin:0 0 12px;line-height:1.3}
.sponsored-slot-body{display:flex;gap:14px;align-items:flex-start}
.sponsored-slot-copy{min-width:0}
.sponsored-slot-avatar,.sponsored-slot-fallback{width:64px;height:64px;border-radius:50%;flex-shrink:0}
.sponsored-slot-avatar{object-fit:cover;background:var(--bg-hover)}
.sponsored-slot-fallback{display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--yellow);font-weight:800}
.sponsored-slot-name{font-weight:800;color:var(--navy);text-decoration:none;font-size:var(--fs-lg)}
.sponsored-slot-name:hover{text-decoration:underline}
.sponsored-slot-subs,.sponsored-slot-blurb{margin:4px 0 0;color:var(--text-dim);font-size:var(--fs-sm);line-height:1.45}
.sponsored-slot-yt{display:inline-block;margin-top:8px;font-size:var(--fs-sm);font-weight:700;color:var(--navy)}
@media(max-width:600px){
  .sponsored-slot{padding:14px}
  .sponsored-slot-avatar,.sponsored-slot-fallback{width:48px;height:48px}
}
.seo-table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:var(--fs-sm)}
.seo-table th,.seo-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)}
.seo-table th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.seo-table a{color:var(--text);font-weight:600}
.seo-list{margin:0 0 20px;padding-left:20px;line-height:1.7}
.seo-more-links,.seo-filter-links{margin:12px 0 20px;line-height:1.7}
.seo-filter-links a{margin-right:4px}
.hero .home-dir-links{margin:18px 0 0;color:rgba(255,255,255,.7)}
.hero .home-dir-links a{color:#fff;font-weight:600}
.hero .home-dir-links a:hover{color:var(--yellow)}

/* ── Misc ──────────────────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-dim)}
.empty-state .es-icon{font-size:var(--fs-3xl);margin-bottom:12px}
.empty-state .es-title{font-size:var(--fs-lg);font-weight:700;color:var(--text);margin-bottom:6px}
.divider{border:none;border-top:1px solid var(--border);margin:24px 0}
.skeleton{background:linear-gradient(90deg,var(--bg-hover) 25%,var(--bg-card) 50%,var(--bg-hover) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Club crests ───────────────────────────────────────────────────────── */
.crest{width:32px;height:32px;object-fit:contain;flex-shrink:0}
.crest-sm{width:20px;height:20px}
.crest-lg{width:48px;height:48px}
.crest-xl{width:64px;height:64px}
.club-tile .crest{width:40px;height:40px}
.cc-crest{width:18px;height:18px;object-fit:contain;margin-right:2px;vertical-align:middle}
.trending-crest{width:24px;height:24px;object-fit:contain;flex-shrink:0}

/* ── Header live-count chip ───────────────────────────────────────────── */
.nav-live-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-pill);background:rgba(230,57,70,.1);color:var(--red);font-size:var(--fs-xs);font-weight:700;border:1px solid rgba(230,57,70,.25);white-space:nowrap}
.nav-live-chip:empty{display:none}
.nav-live-chip .nav-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse-live 1.8s infinite}

/* ── Avatar country flag bubble ───────────────────────────────────────── */
.av-wrap{position:relative;flex-shrink:0;display:inline-block}
.av-flag{position:absolute;bottom:-2px;right:-4px;width:20px;height:20px;border-radius:50%;border:2px solid var(--bg-card);background-size:cover;background-position:center;box-shadow:0 1px 3px rgba(0,0,0,.15)}

/* ── Live indicators ──────────────────────────────────────────────────── */
.live-dot-sm{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:6px;animation:pulse-live 1.8s infinite;vertical-align:middle}
/* Inline live dot used next to creator names site-wide. Slightly smaller
   and with a soft red halo so it reads as "active" without shouting. */
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:middle;box-shadow:0 0 0 2px rgba(230,57,70,.18);animation:pulse-live 1.8s infinite;flex-shrink:0;position:relative;top:-1px}
.creator-card.is-live{border-color:var(--red);box-shadow:0 0 0 1px rgba(230,57,70,.2)}

/* ── Creator card: frequency + video thumb ────────────────────────────── */
.cc-freq{color:var(--text-muted);font-size:var(--fs-xs);font-weight:500}
.cc-freq::before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--border);margin-right:6px;vertical-align:middle}
.cc-video{border-top:1px solid var(--border);margin-top:8px;padding-top:8px;display:flex;align-items:center;gap:10px;overflow:hidden}
.cc-video img{width:100px;height:56px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0;background:var(--bg-hover)}
.cc-video-title{font-size:var(--fs-xs);color:var(--text-dim);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Profile: live banner ─────────────────────────────────────────────── */
.live-banner{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(230,57,70,.08);border:1px solid rgba(230,57,70,.2);border-radius:var(--radius);margin-bottom:20px;font-size:var(--fs-base);color:var(--text)}

/* ── Profile: latest video card ───────────────────────────────────────── */
.latest-video-section{margin-bottom:28px}
.latest-video-card{display:flex;align-items:center;gap:16px;padding:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:all .15s;text-decoration:none;color:var(--text)}
.latest-video-card:hover{border-color:var(--text-muted);transform:translateY(-1px);box-shadow:var(--shadow)}
.lv-thumb{width:200px;height:112px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0;background:var(--bg-hover)}
.lv-info{flex:1;min-width:0}
.lv-title{font-size:var(--fs-md);font-weight:600;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lv-meta{font-size:var(--fs-sm);color:var(--text-dim)}
@media(max-width:600px){
  .latest-video-card{flex-direction:column;align-items:stretch}
  .lv-thumb{width:100%;height:auto;aspect-ratio:16/9}
}

/* ── Profile: subscriber growth ───────────────────────────────────────── */
.ps-growth{font-size:var(--fs-xs);font-weight:700;margin-left:4px}
.ps-growth.up{color:var(--green)}
.ps-growth.down{color:var(--red)}
.sub-sparkline-wrap{margin-top:16px;display:flex;align-items:center;gap:12px}
.sub-sparkline-wrap:empty{display:none}
.sub-sparkline-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);white-space:nowrap}
.sub-sparkline{display:block;max-width:100%}
.report-link{color:var(--text-muted);font-weight:500;padding:5px 10px}
.report-link:hover{color:var(--red);background:rgba(230,57,70,.06)}

/* ── Suggest creator CTA ──────────────────────────────────────────────── */
.suggest-cta{display:flex;align-items:center;justify-content:center;gap:10px;padding:20px 24px;margin-top:24px;background:linear-gradient(135deg,rgba(6,26,93,.04) 0%,rgba(246,190,6,.06) 100%);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--text-dim);font-size:var(--fs-base);font-weight:600;transition:all .18s cubic-bezier(.4,0,.2,1);cursor:pointer;text-decoration:none}
.suggest-cta:hover{border-color:var(--navy);color:var(--navy);background:linear-gradient(135deg,rgba(6,26,93,.06) 0%,rgba(246,190,6,.1) 100%)}
.suggest-cta .suggest-icon{width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--yellow);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-md);font-weight:700;flex-shrink:0}

/* ── Suggest / Submit CTA band ──────────────────────────────────────────── */
.cta-band{background:var(--yellow);padding:28px 0}
.cta-band-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta-band-title{font-size:var(--fs-lg);font-weight:800;color:var(--navy);margin-bottom:4px;letter-spacing:-.01em}
.cta-band-sub{color:rgba(6,26,93,.65);font-size:var(--fs-base)}
/* The band's CTA is just .btn .btn-primary .btn-pill .btn-lg (or .btn-accent
   inside navy hero sections) — it only needs to not shrink in the flex row. */
.cta-band-inner .btn{flex-shrink:0}
@media(max-width:600px){.cta-band-inner{flex-direction:column;text-align:center}.cta-band-inner .btn{width:100%}}

/* ── Homepage community promo row ─────────────────────────────────────── */
.home-promo-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.home-promo-card{display:flex;align-items:center;gap:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;text-decoration:none;color:var(--text);transition:border-color .15s,box-shadow .15s,transform .15s}
.home-promo-card:hover{border-color:var(--yellow);box-shadow:0 2px 12px rgba(0,0,0,.08);transform:translateY(-1px)}
.home-promo-icon{font-size:var(--fs-xl);flex-shrink:0}
.home-promo-icon img{width:34px;height:34px;object-fit:contain;display:block}
.home-promo-title{font-size:var(--fs-md);font-weight:700;color:var(--text);margin-bottom:2px}
.home-promo-sub{font-size:var(--fs-sm);color:var(--text-dim);line-height:1.4}
.home-promo-arrow{margin-left:auto;color:var(--text-muted);font-size:var(--fs-lg);flex-shrink:0}
@media(max-width:700px){.home-promo-row{grid-template-columns:1fr}}

/* ── Header user button / avatar ──────────────────────────────────────── */
.auth-btn{background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.auth-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--bg-hover);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);transition:border-color .15s}
.auth-btn:hover .auth-avatar{border-color:var(--text-muted)}
.auth-avatar--initials{background:var(--navy);color:var(--yellow);font-weight:700;font-size:var(--fs-sm);letter-spacing:.02em}

/* ── Account settings ─────────────────────────────────────────────────── */
.acct-avatar-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.acct-avatar{width:84px;height:84px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--bg-hover);border:3px solid var(--bg-card);box-shadow:0 0 0 1px var(--border)}
.acct-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.acct-avatar .avatar-fallback{width:100%;height:100%;font-size:var(--fs-xl)}
.acct-check{display:flex;align-items:center;gap:10px;font-size:var(--fs-base);color:var(--text);padding:6px 0;cursor:pointer}
.acct-check input[type="checkbox"]{accent-color:var(--navy);width:16px;height:16px;cursor:pointer}

/* ── Manage Channel: featured video picker ───────────────────────────────
   Same click-to-select-a-tile pattern as the Streamwall picker grid
   (.sw-pick-card), scaled down: a plain thumbnail grid, active state via
   the navy ring — no separate library needed, this is thumbnails only. */
.mc-video-pick{position:relative;aspect-ratio:16/9;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--bg-hover);transition:border-color .15s}
.mc-video-pick img{width:100%;height:100%;object-fit:cover;display:block}
.mc-video-pick:hover{border-color:var(--border)}
.mc-video-pick.active{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}

/* ── Search empty state ───────────────────────────────────────────────── */
.search-empty{padding:12px 16px;color:var(--text-dim);font-size:var(--fs-base);text-align:center}

/* ── Search: grouped results + clear button ───────────────────────────── */
.search-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:var(--bg-hover);color:var(--text-dim);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--fs-md);border:none;font-family:inherit;padding:0;line-height:1;z-index:2}
.search-clear:hover{background:var(--border);color:var(--text)}
.search-group-head{padding:8px 14px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);background:var(--bg-input);border-bottom:1px solid var(--border)}
.search-group-head:not(:first-child){border-top:1px solid var(--border)}
.sr-info{min-width:0;flex:1}
.sr-meta{margin-left:auto;font-size:var(--fs-xs);color:var(--text-muted);font-weight:500;flex-shrink:0}
.search-crest-wrap{background:var(--bg-hover);display:flex;align-items:center;justify-content:center}
.search-crest{width:24px;height:24px;object-fit:contain}

/* ── Home: Upcoming streams ───────────────────────────────────────────── */
.upcoming-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.upcoming-card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--text);transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm)}
.upcoming-card:hover{border-color:var(--border);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.up-thumb-wrap{position:relative;aspect-ratio:16/9;background:var(--bg-hover)}
.up-thumb{width:100%;height:100%;object-fit:cover;display:block}
.up-when-badge{position:absolute;top:8px;left:8px;padding:4px 10px;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;background:var(--navy);color:var(--yellow);box-shadow:var(--shadow-sm)}
.up-body{padding:12px 14px 14px}
.up-title{font-size:var(--fs-base);font-weight:600;line-height:1.35;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.up-creator{display:flex;align-items:center;gap:10px}
.up-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--bg-hover);flex-shrink:0}
.up-creator-info{min-width:0}
.up-creator-name{font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-team{font-size:var(--fs-xs);color:var(--text-muted);display:flex;align-items:center;gap:4px;margin-top:1px}

/* ── Team Latest Videos page ──────────────────────────────────────────── */
.team-video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.team-video-card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--text);transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm)}
.team-video-card:hover{border-color:var(--border);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.tv-thumb-wrap{position:relative;aspect-ratio:16/9;background:var(--bg-hover)}
.tv-thumb{width:100%;height:100%;object-fit:cover;display:block}
.tv-live-badge{position:absolute;top:8px;left:8px;font-size:var(--fs-xs);padding:3px 8px}
.tv-body{padding:12px 14px 14px}
.tv-title{font-size:var(--fs-md);font-weight:600;line-height:1.35;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tv-creator{display:flex;align-items:center;gap:10px}
.tv-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--bg-hover);flex-shrink:0}
.tv-creator-info{min-width:0}
.tv-creator-name{font-size:var(--fs-sm);font-weight:600;display:flex;align-items:center;gap:6px;min-width:0}
.tv-meta{font-size:var(--fs-xs);color:var(--text-muted);margin-top:1px}

/* ── Rankings page ────────────────────────────────────────────────────── */
.rankings-summary{display:flex;gap:20px;flex-wrap:wrap;padding:12px 20px;margin-bottom:16px;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm);font-size:var(--fs-base);color:var(--text-dim)}
.rankings-summary strong{color:var(--text);font-weight:700}

.rankings-card{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.rk-table-outer{position:relative}
.rk-table-wrap{overflow-x:auto}
.rk-scroll-fade{position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none;background:linear-gradient(to right,transparent,var(--bg-card));opacity:0;transition:opacity .15s}
.rk-scroll-fade.visible{opacity:1}
.rk-row{display:grid;grid-template-columns:56px 48px minmax(160px,1fr) repeat(6,92px) 16px;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border-soft);text-decoration:none;color:var(--text);transition:background .15s;min-width:1000px}
.rk-row:last-child{border-bottom:none}
.rk-row:hover{background:var(--bg-hover)}
.rk-rank{display:flex;align-items:center;justify-content:center;gap:4px;height:36px;border-radius:var(--radius-sm);font-size:var(--fs-md);font-weight:800;color:var(--text-muted);background:var(--bg-hover);letter-spacing:-.02em;padding:0 6px;font-variant-numeric:tabular-nums}
.rk-move{font-size:var(--fs-xs);font-weight:700;padding:1px 4px;border-radius:3px;letter-spacing:.02em}
.rk-move--up{background:rgba(46,204,113,.15);color:#16a34a}
.rk-move--down{background:rgba(230,57,70,.12);color:var(--red)}
.rk-move--new{background:rgba(246,190,6,.2);color:#8a6a00}
.rk-row--top1 .rk-rank{background:linear-gradient(135deg,#FFD700,#F6BE06);color:#7A5A00;box-shadow:inset 0 0 0 1px rgba(246,190,6,.4)}
.rk-row--top2 .rk-rank{background:linear-gradient(135deg,#E8EBF2,#C8CDD9);color:#4B5563;box-shadow:inset 0 0 0 1px rgba(148,163,184,.4)}
.rk-row--top3 .rk-rank{background:linear-gradient(135deg,#E8A87C,#CD7F32);color:#5C3317;box-shadow:inset 0 0 0 1px rgba(205,127,50,.4)}
.rk-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--bg-hover)}
/* Live-status dot on the avatar's bottom-right corner — only on rankings. */
.rk-row--live .av-wrap::after{content:'';position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:var(--red);border:2px solid var(--bg-card);animation:pulse-live 1.8s infinite}
.rk-info{min-width:0}
.rk-name{font-weight:700;font-size:var(--fs-md);display:flex;align-items:center;gap:6px;min-width:0}
.rk-verified{color:var(--blue);font-size:var(--fs-base);flex-shrink:0}
.rk-live{font-size:var(--fs-xs);padding:2px 6px;flex-shrink:0}
.rk-team{color:var(--text-dim);font-size:var(--fs-sm);margin-top:2px;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-score{text-align:right;min-width:110px}
.rk-score-num{font-size:var(--fs-lg);font-weight:800;color:var(--text);line-height:1.1;letter-spacing:-.02em}
.rk-score-star{color:var(--star);font-size:var(--fs-md)}
.rk-score-label{font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;font-weight:600}
.rk-arrow{color:var(--text-muted);font-size:var(--fs-lg);transition:transform .15s,color .15s}
.rk-row:hover .rk-arrow{color:var(--accent);transform:translateX(2px)}
/* Sortable stat columns */
.rk-col{text-align:right;font-size:var(--fs-base);font-weight:700;color:var(--text-dim);font-variant-numeric:tabular-nums}
.rk-col--subs{font-size:var(--fs-md);font-weight:800;color:var(--navy)}
.rk-header-row{cursor:default;padding-top:10px;padding-bottom:10px;position:sticky;top:0;background:var(--bg-card);z-index:1;border-bottom:2px solid var(--border)}
.rk-header-row:hover{background:var(--bg-card)}
.rk-header-cols{grid-column:span 6;display:grid;grid-template-columns:repeat(6,92px);gap:14px}
.rk-sort-btn{background:none;border:none;padding:0;margin:0;font:inherit;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:right;cursor:pointer;transition:color .15s;white-space:normal;line-height:1.2}
.rk-sort-btn:hover{color:var(--text)}
.rk-sort-btn--active{color:var(--navy)}
.rk-sort-arrow{font-size:var(--fs-xs)}
@media(max-width:700px){
  .rk-rank{height:32px;font-size:var(--fs-md)}
  .rk-avatar{width:40px;height:40px}
  .rk-score-num{font-size:var(--fs-md)}
}

/* ── Rankings team sub-filter strip ────────────────────────────────────── */
.rk-team-strip{background:var(--yellow);padding:10px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.rk-team-strip-inner{display:flex;align-items:center;gap:6px;padding:0 20px;min-width:min-content}
.rk-team-btn{width:36px;height:36px;border-radius:50%;border:2px solid transparent;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;flex-shrink:0;padding:0}
.rk-team-btn:hover{transform:scale(1.12);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.rk-team-btn--active{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.rk-team-btn img{width:24px;height:24px;object-fit:contain}
.rk-team-btn--all{width:auto;border-radius:18px;padding:0 14px;font-size:var(--fs-xs);font-weight:700;color:var(--navy);gap:4px;letter-spacing:.02em}
@media(max-width:600px){
  .rk-team-btn{width:32px;height:32px}
  .rk-team-btn img{width:20px;height:20px}
  .rk-team-strip-inner{gap:5px;padding:0 14px}
}

/* ── FRFC banner video cards ────────────────────────────────────────────── */
.frfc-banner-videos{display:flex;gap:10px;flex-shrink:0;align-items:flex-start}
.frfc-video-card{display:flex;flex-direction:column;gap:6px;width:160px;text-decoration:none;flex-shrink:0}
.frfc-video-card:hover .frfc-video-thumb{filter:brightness(1.1)}
.frfc-video-thumb-wrap{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:rgba(255,255,255,.05)}
.frfc-video-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:filter .15s}
.frfc-video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xl);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);opacity:0;transition:opacity .15s}
.frfc-video-card:hover .frfc-video-play{opacity:1}
.frfc-video-title{font-size:var(--fs-xs);color:#c8d0e4;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.frfc-video-placeholder{font-size:var(--fs-sm);color:rgba(255,255,255,.3);padding:8px 0}
@media(max-width:860px){.frfc-banner-videos{display:none}}

/* ── Creator claim modal ────────────────────────────────────────────────── */
.claim-steps{display:flex;flex-direction:column;gap:10px}
.claim-step{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-base);color:var(--text-dim);line-height:1.45}
.claim-step-num{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.claim-code{font-family:ui-monospace,monospace;background:var(--bg-hover);border:1px dashed var(--border);border-radius:6px;padding:10px 14px;font-size:var(--fs-base);font-weight:600;color:var(--text);letter-spacing:.04em;text-align:center;margin:4px 0}

/* ── Page hero responsive ───────────────────────────────────────────────── */
@media(max-width:600px){
  .page-hero{padding:24px 0 20px}
  .page-hero-title{font-size:var(--fs-xl)}
  .page-hero-inner{flex-wrap:wrap;gap:12px}
  .page-hero-crest{width:48px;height:48px}
  .page-hero-actions{display:none}
}
@media(max-width:480px){
  .platform-stats{flex-wrap:wrap}
  .platform-stat{flex:1 1 40%;border-bottom:1px solid var(--border)}
  .platform-stat:nth-child(2n){border-right:none}
  .sc-head{flex-wrap:wrap;gap:8px}
}

/* ── Creator Battle ──────────────────────────────────────────────────── */
.battle-section{padding-top:28px}
.battle-wrap{background:var(--bg-card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.battle-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border)}
.battle-title{font-size:var(--fs-md);font-weight:800;color:var(--navy);letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.battle-filters{display:flex;gap:8px;align-items:center}
.battle-select{padding:5px 12px;border-radius:16px;border:1px solid var(--border);background:var(--bg-input);font-size:var(--fs-xs);color:var(--text);cursor:pointer;font-family:inherit;transition:border-color .2s,background .2s}
.battle-select:hover{border-color:var(--yellow);background:var(--bg-hover)}
.battle-select option{background:var(--bg-card);color:var(--text)}
.battle-social-item{display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--text-muted);font-weight:500}
/* Arena — edge-to-edge cards */
.battle-arena{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;padding:0}
/* Card — fully team-colored */
.battle-card{position:relative;border:none;border-radius:0;padding:28px 20px 32px;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;transition:all .25s ease;gap:6px;overflow:hidden;background:var(--tc,#1a1a2e)}
.battle-card::before{content:'';position:absolute;inset:0;opacity:.55;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 50%,rgba(0,0,0,.25) 100%)}
.battle-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 30% 80%,rgba(0,0,0,.3) 0%,transparent 60%)}
.battle-card:hover{transform:scale(1.02);z-index:1;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.battle-card:active{transform:scale(1.01);transition-duration:.08s}
.battle-card--voted{pointer-events:none}
.battle-card--winner{box-shadow:0 0 30px rgba(246,190,6,.4)!important}
.battle-card--loser{opacity:.5;filter:grayscale(.3)}
/* Watermark crest */
.battle-crest-bg{position:absolute;width:65%;height:auto;max-height:90%;object-fit:contain;opacity:.1;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%);filter:brightness(2)}
/* Team row */
.battle-team-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;z-index:1}
.battle-crest{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.battle-team-name{font-size:var(--fs-md);font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 1px 4px rgba(0,0,0,.4)}
/* Avatar */
.battle-avatar-wrap{position:relative;z-index:1}
.battle-avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.15);border:3px solid rgba(255,255,255,.7);transition:border-color .25s,box-shadow .25s;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.battle-card:hover .battle-avatar{border-color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.battle-card--winner .battle-avatar{border-color:var(--yellow);box-shadow:0 0 20px rgba(246,190,6,.4)}
.battle-streak{position:absolute;top:-3px;right:-3px;background:linear-gradient(135deg,#ff6b35,#ff4444);color:#fff;font-size:var(--fs-xs);font-weight:800;padding:2px 6px;border-radius:8px;letter-spacing:.03em;box-shadow:0 2px 6px rgba(255,75,43,.4);z-index:2}
/* Text — all white on colored bg */
.battle-name{font-size:var(--fs-md);font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.01em;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.battle-subs{font-size:var(--fs-sm);color:rgba(255,255,255,.8);font-weight:600;z-index:1}
/* Vote button — white pill */
.battle-vote-btn{margin-top:8px;padding:8px 28px;border-radius:20px;border:none;background:#fff;color:var(--tc,#1a1a2e);font-size:var(--fs-sm);font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.02em;text-transform:uppercase;z-index:1;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.battle-vote-btn:hover{transform:scale(1.06);box-shadow:0 4px 18px rgba(0,0,0,.3)}
.battle-card--voted .battle-vote-btn{display:none}
/* Results */
.battle-result{opacity:0;transition:opacity .35s;display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px;z-index:1}
.battle-card--voted .battle-result{opacity:1}
.battle-pct{font-size:var(--fs-xl);font-weight:900;color:#fff;letter-spacing:-.02em;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.battle-card--winner .battle-pct{color:var(--yellow)}
.battle-pct-bar{position:absolute;bottom:0;left:0;right:0;height:4px;overflow:hidden;background:rgba(0,0,0,.3);z-index:1}
.battle-pct-fill{height:100%;background:var(--yellow);width:0;transition:width .7s cubic-bezier(.22,.68,0,1)}
.battle-card--loser .battle-pct-fill{background:rgba(255,255,255,.3)}
.battle-toast{font-size:var(--fs-xs);font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.03em;opacity:0;transform:translateY(4px);animation:battle-toast-in .4s .15s forwards}
@keyframes battle-toast-in{to{opacity:1;transform:translateY(0)}}
/* VS badge — golden with glow */
.battle-vs{display:flex;align-items:center;justify-content:center;padding:0;z-index:2;margin:0 -22px}
.battle-vs-text{width:58px;height:58px;object-fit:contain;z-index:2;animation:battle-vs-pulse 2.5s ease-in-out infinite}
@keyframes battle-vs-pulse{0%,100%{filter:drop-shadow(0 0 10px rgba(246,190,6,.5))}50%{filter:drop-shadow(0 0 18px rgba(246,190,6,.8))}}
.battle-loading{display:flex;align-items:center;justify-content:center;grid-column:1/-1;padding:32px;color:var(--text-muted);font-size:var(--fs-base)}
.battle-skip-btn{display:block;margin:10px auto 0;padding:6px 16px;background:none;border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--text-dim);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:all .15s}
.battle-skip-btn:hover{border-color:var(--yellow);color:var(--text)}
/* Hot creators strip */
.battle-hot{padding:0 20px 14px;border-top:1px solid var(--border);margin:0 0;padding-top:14px}
.battle-hot-title{font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.battle-hot-strip{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.battle-hot-item{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;background:var(--bg-hover);border:1px solid var(--border);border-radius:20px;flex-shrink:0;cursor:pointer;transition:border-color .2s,background .2s;text-decoration:none}
.battle-hot-item:hover{border-color:var(--yellow);background:var(--bg-input)}
.battle-hot-av{width:24px;height:24px;border-radius:50%;object-fit:cover}
.battle-hot-name{font-size:var(--fs-xs);font-weight:700;color:var(--text-dim);white-space:nowrap}
.battle-hot-wins{font-size:var(--fs-xs);font-weight:800;color:var(--navy)}
@media(max-width:600px){
  .battle-arena{grid-template-columns:1fr 1fr;gap:0}
  .battle-vs{grid-row:1;grid-column:1/-1;padding:0 0 0;margin:0}
  .battle-vs-text{width:42px;height:42px}
  .battle-card{padding:20px 12px 26px}
  .battle-avatar{width:66px;height:66px}
  .battle-crest{width:22px;height:22px}
  .battle-team-name{font-size:var(--fs-xs)}
  .battle-name{font-size:var(--fs-base)}
  .battle-pct{font-size:var(--fs-lg)}
  .battle-top{flex-direction:column;align-items:flex-start;padding:12px 14px}
  .battle-vote-btn{padding:6px 20px;font-size:var(--fs-xs)}
  .battle-hot{padding:0 12px 12px}
}

/* Battle signup prompt */
.battle-signup-prompt{padding:0 16px;margin-bottom:0}
.bsp-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 18px;background:linear-gradient(135deg,rgba(246,190,6,.1),rgba(246,190,6,.05));border:1px solid rgba(246,190,6,.3);border-radius:10px;margin:12px 16px 0}
.bsp-text{font-size:var(--fs-sm);color:var(--text);flex:1;min-width:200px}
.bsp-text strong{color:var(--navy)}
.bsp-actions{display:flex;gap:8px;flex-shrink:0}

/* Rankings tabs */
.rk-tabs-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px}
.rk-tabs-row .page-hero-meta{margin-top:0}
.rk-tabs{display:flex;gap:4px}
.rk-tab{padding:6px 18px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-size:var(--fs-sm);font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;letter-spacing:.02em}
.rk-tab:hover{border-color:var(--yellow);color:var(--text)}
.rk-tab--active{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.rk-tab--active:hover{background:#ffd000}

/* Voter top creators on account page */
.voter-top-creators{display:flex;flex-direction:column;gap:6px}
.voter-top-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg-hover);border:1px solid var(--border);border-radius:10px;text-decoration:none;transition:border-color .2s}
.voter-top-item:hover{border-color:var(--yellow)}
.voter-top-av{width:32px;height:32px;border-radius:50%;object-fit:cover}
.voter-top-name{font-size:var(--fs-base);font-weight:700;color:var(--text);flex:1}
.voter-top-count{font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);flex-shrink:0}

/* ── Favourite button ───────────────────────────────────────────────────
   Selected state, layered on top of whatever variant the button uses.
   Doubling .btn beats a single-class variant (e.g. .btn-on-dark) on
   specificity, so this no longer needs the !important it used to carry. */
.btn.btn-favourited{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.btn.btn-favourited:hover{background:#ffd000;color:var(--navy)}

/* ── Forgot password link ─────────────────────────────────────────────── */
.forgot-link{display:block;text-align:right;font-size:var(--fs-sm);color:var(--accent);margin:-4px 0 14px;cursor:pointer}
.forgot-link:hover{text-decoration:underline}

/* ── Duplicate channel warning ────────────────────────────────────────── */
.dupe-warn{color:#b8860b;background:rgba(246,190,6,.12);border:1px solid rgba(246,190,6,.25);padding:8px 12px;border-radius:var(--radius-sm);font-size:var(--fs-sm);margin-top:6px;display:none}
.dupe-warn a{color:var(--navy);font-weight:600;text-decoration:underline}

/* ── Become a Creator section ─────────────────────────────────────────── */
.become-section{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.become-video{position:relative;aspect-ratio:16/9;width:100%;border-radius:var(--radius);overflow:hidden;background:#000}
.become-video iframe{width:100%;height:100%;border:0}
.become-text h3{font-size:var(--fs-lg);font-weight:800;margin-bottom:8px;color:var(--text)}
.become-text p{color:var(--text-dim);font-size:var(--fs-base);line-height:1.6;margin-bottom:16px}
@media(max-width:700px){.become-section{grid-template-columns:1fr}}

/* ── YouTube click-to-load facade ──────────────────────────────────────── */
/* No request to youtube-nocookie.com fires until this is clicked — see
   ytFacadeHTML()/ytFacadePlay() in js/app.js. */
.yt-facade{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;background:#000}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.yt-facade-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xl);padding-left:4px;transition:background .15s,transform .15s}
.yt-facade:hover .yt-facade-play{background:var(--red);transform:translate(-50%,-50%) scale(1.08)}

/* ── Legal pages (Privacy / Cookies / Terms) ───────────────────────────── */
.legal-content{max-width:760px;margin:0 auto;color:var(--text);font-size:var(--fs-md);line-height:1.7}
.legal-content h2{font-size:var(--fs-lg);font-weight:700;margin:32px 0 12px}
.legal-content h2:first-of-type{margin-top:8px}
.legal-content p{margin-bottom:12px;color:var(--text-dim)}
.legal-content ul{margin:0 0 12px 20px;color:var(--text-dim)}
.legal-content li{margin-bottom:6px}
.legal-content a{color:var(--navy);text-decoration:underline}
.legal-table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:var(--fs-base)}
.legal-table th,.legal-table td{text-align:left;padding:8px 10px;border:1px solid var(--border);vertical-align:top}
.legal-table th{background:var(--bg-hover);font-weight:700}
.legal-disclaimer{font-size:var(--fs-sm);color:var(--text-dim);font-style:italic;margin-top:24px;padding-top:16px;border-top:1px solid var(--border)}

/* ── News ─────────────────────────────────────────────────────────────── */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.news-card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--text);transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm)}
.news-card:hover{border-color:var(--border);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.news-card-thumb-wrap{aspect-ratio:16/9;background:var(--bg-hover)}
.news-card-thumb{width:100%;height:100%;object-fit:cover;display:block}
.news-card-body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.news-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.news-card-tag{font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;color:var(--navy);background:var(--accent-soft);padding:2px 8px;border-radius:100px}
.news-card-title{font-size:var(--fs-lg);font-weight:700;line-height:1.3}
.news-card-summary{font-size:var(--fs-sm);color:var(--text-dim);line-height:1.5;flex:1}
.news-card-summary-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-card-meta{font-size:var(--fs-xs);color:var(--text-muted);margin-top:4px}

.news-article-meta{color:var(--text-muted);font-size:var(--fs-sm)}
.news-article-cover{width:100%;border-radius:var(--radius);margin-bottom:24px;aspect-ratio:16/9;object-fit:cover;background:var(--bg-hover)}
.news-article-body{font-size:var(--fs-md);line-height:1.75;color:var(--text)}
.news-article-body p{margin-bottom:1.2em}
.news-article-body p:last-child{margin-bottom:0}
.news-video-embed{position:relative;width:100%;aspect-ratio:16/9;margin:1.2em 0;border-radius:var(--radius-sm);overflow:hidden;background:#000}
.news-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.news-article-related{display:flex;align-items:center;gap:8px;margin-top:32px;padding-top:20px;border-top:1px solid var(--border);font-size:var(--fs-sm);color:var(--text-dim)}
.news-article-related a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--navy)}

/* ── Cookie consent banner ─────────────────────────────────────────────── */
.consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--navy);color:#fff;box-shadow:0 -4px 20px rgba(0,0,0,.2)}
.consent-banner-inner{max-width:1100px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.consent-banner-text{flex:1;min-width:240px;font-size:var(--fs-base);line-height:1.5;color:rgba(255,255,255,.85);margin:0}
.consent-banner-text a{color:var(--yellow);text-decoration:underline}
.consent-banner-actions{display:flex;gap:10px;flex-shrink:0}
/* Equal visual weight for both choices — a compliant cookie banner must not
   design "Accept" to look more prominent than "Reject" (EU/Brazil requirement). */
.consent-btn{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);font-weight:700}
.consent-btn:hover{background:rgba(255,255,255,.12);border-color:#fff}
@media(max-width:600px){.consent-banner-actions{width:100%}.consent-banner-actions .btn{flex:1}}

/* ── Streamwall: picker ──────────────────────────────────────────────── */
.sw-empty{text-align:center;padding:48px 20px}
.sw-empty-icon{font-size:var(--fs-3xl);margin-bottom:12px}
.sw-empty-title{font-size:var(--fs-lg);font-weight:700;margin-bottom:6px}
.sw-empty-desc{color:var(--text-dim);max-width:400px;margin:0 auto 20px;font-size:var(--fs-base)}
.sw-pick-filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sw-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.sw-pick-card{display:block;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s;position:relative;background:var(--bg-card)}
.sw-pick-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.08)}
.sw-pick-card input{position:absolute;opacity:0;pointer-events:none}
.sw-pick-video{position:relative;aspect-ratio:16/9;width:100%;background:#000}
.sw-pick-video iframe,.sw-pick-video img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.sw-pick-live-badge{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:var(--fs-xs);font-weight:800;letter-spacing:.03em;padding:2px 7px;border-radius:4px;pointer-events:none;z-index:2}
.sw-pick-bar{display:flex;align-items:center;gap:10px;padding:10px 12px}
.sw-pick-check{width:18px;height:18px;border-radius:5px;border:2px solid var(--border);flex-shrink:0;position:relative;transition:all .15s}
.sw-pick-card input:checked ~ .sw-pick-bar .sw-pick-check{background:var(--navy);border-color:var(--navy)}
.sw-pick-card input:checked ~ .sw-pick-bar .sw-pick-check::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sw-pick-card:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.sw-pick-card:has(input:checked) .sw-pick-bar{background:var(--accent-soft)}
.sw-pick-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
.sw-pick-info{min-width:0;flex:1}
.sw-pick-name{display:flex;align-items:center;gap:6px;font-weight:700;font-size:var(--fs-base);min-width:0}
.sw-pick-name-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sw-pick-meta{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-launch-bar{display:flex;justify-content:center;margin-top:20px}
.sw-launch-bar .btn{padding:12px 32px;font-size:var(--fs-md)}

/* ── Streamwall: full-screen wall ───────────────────────────────────────
   Deliberately dark/neutral (video-wall convention) rather than the site's
   navy/yellow theme, which would be loud behind live video — but accents
   (primary = yellow, live/danger = red) still tie back to the brand.
   All selectors are `sww-` prefixed and scoped under body.sww-active to
   avoid any collision with the rest of the site's class names (.tile,
   .btn, etc. are already used extensively elsewhere). ─────────────────── */
body.sww-active{overflow:hidden}
body.sww-active #app{position:fixed;inset:0;background:#0b0e17;display:flex;flex-direction:column;z-index:50;color:#fff}

#sww-topbar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:rgba(255,255,255,.05);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
#sww-topbar h1{font-size:var(--fs-md);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);flex-shrink:0}
.sww-back{color:rgba(255,255,255,.5);font-size:var(--fs-xl);text-decoration:none;flex-shrink:0;padding:0 2px;transition:color .15s}
.sww-back:hover{color:#fff}
.sww-clone-badge{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;color:#fff;background:rgba(230,57,70,.7);border:1px solid rgba(230,57,70,.5);border-radius:20px;padding:4px 12px;flex-shrink:0}
.sww-live-dot{width:7px;height:7px;border-radius:50%;background:#fff;display:inline-block;animation:sww-pulse 1s infinite}
@keyframes sww-pulse{0%,100%{opacity:1}50%{opacity:.3}}

#sww-url-input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#fff;font-size:var(--fs-base);padding:7px 14px;outline:none;transition:border-color .2s,background .2s;font-family:inherit}
#sww-url-input:focus{border-color:rgba(246,190,6,.5);background:rgba(255,255,255,.09)}
#sww-url-input::placeholder{color:rgba(255,255,255,.25)}
#sww-url-input.error{border-color:rgba(230,57,70,.6) !important}

.sww-btn{padding:7px 14px;border-radius:12px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);white-space:nowrap;flex-shrink:0;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit}
.sww-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
.sww-btn:active{transform:scale(.96)}
.sww-btn svg{width:13px;height:13px;fill:currentColor;flex-shrink:0}
.sww-btn.playing,#sww-live-all-btn.active,.sww-btn.muted{background:rgba(230,57,70,.5);color:#fff;border-color:rgba(230,57,70,.6)}
.sww-btn.playing:hover,#sww-live-all-btn.active:hover,.sww-btn.muted:hover{background:rgba(230,57,70,.65)}
#sww-live-all-btn.active .sww-live-dot{background:#fff}
.sww-btn-goal{background:linear-gradient(135deg,rgba(246,190,6,.75),rgba(230,140,6,.75));color:#1a1a2e;border-color:rgba(246,190,6,.5);font-weight:800}
.sww-btn-goal:hover{background:linear-gradient(135deg,rgba(246,190,6,.9),rgba(230,140,6,.9))}
.sww-btn-clear{background:rgba(255,255,255,.04);color:rgba(255,255,255,.35)}
.sww-btn-clear:hover{color:rgba(230,57,70,.9);border-color:rgba(230,57,70,.3);background:rgba(230,57,70,.08)}

.sww-counter{font-size:var(--fs-xs);color:rgba(255,255,255,.4);font-weight:600;flex-shrink:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:4px 10px;border-radius:10px}

#sww-scroll-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px}
#sww-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@media(max-width:1100px){#sww-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){#sww-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){#sww-grid{grid-template-columns:1fr}}

.sww-tile{position:relative;background:rgba(255,255,255,.03);border-radius:12px;overflow:hidden;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.08);cursor:grab}
.sww-tile.dragging{opacity:.4;cursor:grabbing}
.sww-tile.drag-over{box-shadow:0 0 0 2px rgba(246,190,6,.6);transform:scale(1.02);transition:transform .15s,box-shadow .15s}
.sww-tile-toolbar{display:flex;align-items:center;gap:3px;padding:4px 8px;background:rgba(10,14,25,.7);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);height:32px;opacity:0;transition:opacity .2s;position:absolute;top:0;left:0;right:0;z-index:10;border-bottom:1px solid rgba(255,255,255,.06)}
.sww-tile:hover .sww-tile-toolbar{opacity:1}
.sww-tile-num{font-size:var(--fs-xs);color:rgba(255,255,255,.6);font-weight:700;margin-right:4px;min-width:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);padding:2px 5px;border-radius:6px;text-align:center}
.sww-drag-handle{cursor:grab;padding:3px 4px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);margin-right:2px}
.sww-drag-handle:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.1)}
.sww-drag-handle svg{width:12px;height:12px;fill:currentColor}
.sww-t-btn{background:transparent;border:none;color:rgba(255,255,255,.5);cursor:pointer;padding:3px 6px;border-radius:6px;line-height:1;transition:all .15s;display:flex;align-items:center;justify-content:center}
.sww-t-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.sww-t-btn.danger:hover{background:rgba(230,57,70,.3);color:#ff8a80}
.sww-t-btn svg{width:14px;height:14px;fill:currentColor;flex-shrink:0}
.sww-tile iframe{position:absolute;inset:0;width:100%;height:100%;border:none;display:block}
.sww-iframe-overlay{display:none;position:absolute;inset:0;z-index:5;cursor:grabbing}
body.sww-dragging .sww-iframe-overlay{display:block}

#sww-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:60vh}
.sww-empty-main{font-size:var(--fs-lg);color:rgba(255,255,255,.35);font-weight:600}
.sww-empty-sub{font-size:var(--fs-base);color:rgba(255,255,255,.18)}

.sww-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);background:rgba(20,24,40,.9);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);color:rgba(255,255,255,.9);font-size:var(--fs-base);font-weight:600;padding:10px 22px;border-radius:14px;border:1px solid rgba(255,255,255,.1);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:1000}
.sww-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:760px){
  #sww-topbar{flex-wrap:wrap}
  #sww-url-input{order:10;flex-basis:100%}
}

/* ── Favourite count ──────────────────────────────────────────────────── */
.cc-fav-count{color:#d4a017;font-size:var(--fs-xs);font-weight:600;display:inline-flex;align-items:center;gap:2px}
.fav-count-badge{background:rgba(246,190,6,.12);color:#b8960f;font-size:var(--fs-xs);font-weight:700;padding:1px 6px;border-radius:var(--radius-pill);margin-left:4px}

/* ── Tutorial page ────────────────────────────────────────────────────── */
.tutorial-body{max-width:740px;margin:0 auto;line-height:1.75;color:var(--text);font-size:var(--fs-md)}
.tutorial-body h2{font-size:var(--fs-lg);font-weight:800;margin:36px 0 12px;padding-top:20px;border-top:1px solid var(--border);color:var(--text)}
.tutorial-body h2:first-child{border-top:none;margin-top:0;padding-top:0}
.tutorial-body h3{font-size:var(--fs-md);font-weight:700;margin:24px 0 8px;color:var(--text)}
.tutorial-body p{margin-bottom:14px;color:var(--text-dim)}
.tutorial-body ul,.tutorial-body ol{margin:0 0 14px 20px;color:var(--text-dim)}
.tutorial-body li{margin-bottom:6px}
.tutorial-body a{color:var(--accent);font-weight:600}
.tutorial-body a:hover{text-decoration:underline}
.tutorial-toc{background:var(--bg-hover);border-radius:var(--radius);padding:20px 24px;margin-bottom:28px}
.tutorial-toc-title{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:10px}
.tutorial-toc ol{margin:0 0 0 18px;color:var(--accent)}
.tutorial-toc li{margin-bottom:4px;font-size:var(--fs-base);font-weight:500}
.tutorial-tool{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px;display:flex;gap:16px;align-items:flex-start;transition:transform .15s,box-shadow .15s}
.tutorial-tool:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.06)}
.tutorial-tool-logo{width:56px;height:56px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--bg-hover);display:flex;align-items:center;justify-content:center}
.tutorial-tool-logo img{width:100%;height:100%;object-fit:contain}
.tutorial-tool-icon{font-size:var(--fs-2xl);flex-shrink:0}
.tutorial-tool-name{font-weight:700;font-size:var(--fs-md);margin-bottom:4px}
.tutorial-tool-desc{color:var(--text-dim);font-size:var(--fs-base);line-height:1.5}
.tutorial-tool-link{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);font-weight:600;color:var(--accent);margin-top:8px;text-decoration:none}
.tutorial-tool-link:hover{text-decoration:underline}
.tutorial-cta{background:var(--navy);border-radius:var(--radius);margin-top:32px;padding:32px;text-align:center}
.tutorial-cta-title{font-size:var(--fs-lg);font-weight:800;color:var(--yellow);margin-bottom:6px}
.tutorial-cta-sub{color:rgba(255,255,255,.65);font-size:var(--fs-base);margin-bottom:18px}
/* The CTA here is .btn .btn-accent .btn-pill .btn-lg — sizing comes from
   .btn-lg, so the old per-context padding/shadow overrides are gone. */
.tutorial-faq summary{font-weight:700;font-size:var(--fs-md);cursor:pointer;padding:14px 0;border-bottom:1px solid var(--border);list-style:none;display:flex;justify-content:space-between;align-items:center}
.tutorial-faq summary::after{content:'+';font-size:var(--fs-lg);color:var(--text-muted);transition:transform .2s}
.tutorial-faq details[open] summary::after{transform:rotate(45deg)}
.tutorial-faq details p{padding:8px 0 16px;margin:0}

/* ── Feature Requests ─────────────────────────────────────────────────── */
.fr-hero{background:linear-gradient(135deg,var(--navy) 0%,#1a2744 100%);color:#fff;padding:48px 0 36px;text-align:center}
.fr-hero h1{font-size:var(--fs-2xl);font-weight:800;margin-bottom:8px}
.fr-hero-sub{color:rgba(255,255,255,.7);font-size:var(--fs-md);margin-bottom:20px}
.fr-suggest-btn{font-size:var(--fs-md);padding:10px 28px}
.fr-container{padding-top:24px;padding-bottom:48px}
.fr-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;align-items:center}
.fr-search-wrap{flex:1;min-width:200px}
.fr-search{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);font-size:var(--fs-base);font-family:inherit}
.fr-filters{display:flex;gap:8px;flex-wrap:wrap}
.fr-select{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);font-size:var(--fs-base);font-family:inherit;cursor:pointer}
.fr-list{display:flex;flex-direction:column;gap:8px}
.fr-loading,.fr-empty{text-align:center;padding:40px 20px;color:var(--text-dim);font-size:var(--fs-base)}
.fr-card{display:flex;gap:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:border-color .15s,box-shadow .15s}
.fr-card:hover{border-color:var(--yellow);box-shadow:0 2px 12px rgba(0,0,0,.08)}
.fr-card--pinned{border-left:3px solid var(--yellow)}
.fr-vote-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:48px}
.fr-vote-btn{display:flex;align-items:center;justify-content:center;width:40px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-hover);color:var(--text-dim);cursor:pointer;transition:all .15s}
.fr-vote-btn:hover{border-color:var(--yellow);color:var(--yellow)}
.fr-vote-btn--active{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.fr-vote-count{font-weight:700;font-size:var(--fs-md);color:var(--text)}
.fr-card-body{flex:1;cursor:pointer;min-width:0;display:block;text-decoration:none;color:inherit}
.fr-card-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.fr-card-title{font-size:var(--fs-md);font-weight:700;margin:0;color:var(--text)}
.fr-pin{display:inline-flex;color:var(--yellow)}
.fr-card-desc{font-size:var(--fs-base);color:var(--text-dim);margin-bottom:8px;line-height:1.5}
.fr-card-meta{display:flex;gap:12px;font-size:var(--fs-sm);color:var(--text-muted);flex-wrap:wrap}
.fr-meta-icon{display:inline-flex;align-items:center;gap:4px}
.fr-meta-icon svg{flex-shrink:0}
.fr-card-cat{background:var(--bg-hover);padding:2px 8px;border-radius:10px;font-size:var(--fs-xs)}
.fr-status{display:inline-block;padding:2px 10px;border-radius:10px;font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.3px;background:rgba(var(--fr-status-rgb),.15);color:var(--fr-status-color);border:1px solid rgba(var(--fr-status-rgb),.3)}
.fr-detail-container{padding-top:24px;padding-bottom:48px;max-width:800px}
.fr-back-link{display:inline-block;color:var(--text-dim);font-size:var(--fs-base);margin-bottom:16px;text-decoration:none}
.fr-back-link:hover{color:var(--yellow)}
.fr-detail{display:flex;gap:24px}
.fr-detail-sidebar{display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:4px}
.fr-detail-vote-btn{width:52px;height:40px}
.fr-detail-vote-count{font-size:var(--fs-xl);font-weight:800;color:var(--text)}
.fr-detail-vote-label{font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.fr-follow-btn{display:inline-flex;align-items:center;gap:5px;margin-top:14px;padding:6px 12px;background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--text-dim);font-size:var(--fs-xs);font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.fr-follow-btn:hover{border-color:var(--yellow);color:var(--text)}
.fr-follow-btn--active{background:var(--navy);border-color:var(--navy);color:var(--yellow)}
.fr-follow-btn svg{flex-shrink:0}
.fr-follow-count{font-size:var(--fs-xs);color:var(--text-muted);margin-top:4px;text-align:center}
.fr-detail-main{flex:1;min-width:0}
.fr-detail-header{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.fr-detail-title{font-size:var(--fs-xl);font-weight:800;margin:0;line-height:1.3}
.fr-detail-meta{display:flex;gap:12px;font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:16px;flex-wrap:wrap}
.fr-detail-desc{font-size:var(--fs-md);line-height:1.7;color:var(--text-dim);margin-bottom:24px;white-space:pre-wrap}
.fr-official-response{background:rgba(46,204,113,.08);border:1px solid rgba(46,204,113,.25);border-radius:var(--radius);padding:16px;margin-bottom:24px}
.fr-official-label{font-weight:700;font-size:var(--fs-sm);color:var(--green);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.fr-official-response p{margin:0;font-size:var(--fs-base);line-height:1.6;color:var(--text)}
.fr-official-time{margin-top:8px;font-size:var(--fs-xs);color:var(--text-muted)}
.fr-status-timeline{margin-bottom:24px}
.fr-status-timeline h3{font-size:var(--fs-md);font-weight:700;margin-bottom:12px}
.fr-status-event{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:var(--fs-base)}
.fr-status-note{color:var(--text-dim)}
.fr-status-time{color:var(--text-muted);font-size:var(--fs-sm);margin-left:auto}
.fr-admin-panel{background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:24px}
.fr-admin-panel h3{font-size:var(--fs-md);font-weight:700;margin-bottom:14px}
.fr-admin-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.fr-admin-row label{font-size:var(--fs-sm);font-weight:600;min-width:120px}
.fr-admin-note-input{flex:1;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);font-size:var(--fs-base);font-family:inherit}
.fr-admin-toggles{gap:8px}
.fr-comments-section{margin-top:24px}
.fr-comments-section h3{font-size:var(--fs-md);font-weight:700;margin-bottom:14px}
.fr-locked-notice{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:var(--fs-base);font-style:italic}
.fr-locked-notice svg{flex-shrink:0}
.fr-comment{border-left:2px solid var(--border);padding:12px 0 12px 14px;margin-bottom:8px}
.fr-comment--reply{margin-left:20px;border-left-color:var(--bg-hover)}
.fr-comment--official{border-left-color:var(--green);background:rgba(46,204,113,.05);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding-right:12px}
.fr-comment-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.fr-official-badge{background:var(--green);color:#fff;font-size:var(--fs-xs);font-weight:700;padding:1px 6px;border-radius:4px;text-transform:uppercase}
.fr-comment-time{font-size:var(--fs-xs);color:var(--text-muted)}
.fr-comment-body{font-size:var(--fs-base);line-height:1.6;color:var(--text);margin-bottom:6px}
.fr-comment-actions{display:flex;gap:12px;align-items:center}
.fr-like-btn,.fr-reply-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;font-size:var(--fs-sm);color:var(--text-muted);cursor:pointer;padding:2px 4px}
.fr-like-btn svg{flex-shrink:0}
.fr-like-btn:hover,.fr-reply-btn:hover{color:var(--text)}
.fr-like-btn--active{color:var(--red)}
.fr-reply-form{padding:8px 0 8px 14px}
.fr-comment-form{margin-top:16px}
@media(max-width:600px){
  .fr-detail{flex-direction:column}
  .fr-detail-sidebar{flex-direction:row;gap:12px;align-items:center}
  .fr-toolbar{flex-direction:column}
  .fr-filters{width:100%}
  .fr-admin-row{flex-direction:column;align-items:stretch}
  .fr-admin-row label{min-width:auto}
}

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
/* ── Verified tier ───────────────────────────────────────────────────────
   .sponsored-slot (featured placement) and .club-verified-slot (Verified
   pin) are siblings inside .club-feature-slots, above the organic ranking. */
.club-feature-slots:not(:has(.club-verified-slot, .sponsored-slot)){display:none}
.club-feature-slots{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.club-feature-slots .sponsored-slot{margin:0}
.club-verified-slot{border:1px solid rgba(246,190,6,.55);background:linear-gradient(180deg,rgba(246,190,6,.16),rgba(246,190,6,.05));border-radius:var(--radius);padding:16px 18px 18px}
.club-verified-kicker{font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8a6a00;margin-bottom:4px}
.club-verified-slot h2{font-size:var(--fs-lg);font-weight:800;margin:0 0 6px;letter-spacing:-.01em}
.club-verified-note{color:var(--text-dim);font-size:var(--fs-sm);margin:0 0 14px;max-width:62ch}
.cp-verified-card .cp-verified-note{margin:0 0 12px}
.cp-verified-card .btn{margin-top:2px}
.stats-card{max-width:720px;background:var(--navy);color:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.stats-card-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.stats-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.08);flex-shrink:0}
.stats-kicker{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow);margin-bottom:4px}
.stats-name{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;margin:0;color:#fff}
.stats-club{color:var(--yellow);font-weight:600}
.stats-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.stats-metric{background:rgba(255,255,255,.08);border-radius:12px;padding:14px 16px}
.stats-metric-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.stats-metric-num{font-size:var(--fs-3xl);font-weight:800;color:var(--yellow);letter-spacing:-.03em;line-height:1.1;margin-top:4px}
.stats-uploads-title{font-size:var(--fs-md);font-weight:700;margin:0 0 10px;color:#fff}
.stats-uploads{display:flex;flex-direction:column;gap:10px}
.stats-upload{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.06);border-radius:12px;overflow:hidden;color:#fff;text-decoration:none}
.stats-upload:hover{color:#fff;background:rgba(255,255,255,.12)}
.stats-upload img{width:160px;height:90px;object-fit:cover;flex-shrink:0;background:#000}
.stats-upload-body{display:flex;flex-direction:column;gap:4px;min-width:0;padding-right:12px}
.stats-upload-title{font-weight:700;line-height:1.3}
.stats-upload-meta{font-size:var(--fs-sm);color:rgba(255,255,255,.7)}
.stats-footnote,.stats-empty{font-size:var(--fs-sm);color:rgba(255,255,255,.65);margin:14px 0 0}
.stats-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.stats-locked{max-width:560px}
.stats-locked .cp-verified-note{color:var(--text-dim);font-size:var(--fs-sm);margin:12px 0}
@media(max-width:600px){
  .stats-metrics{grid-template-columns:1fr}
  .stats-upload img{width:120px;height:68px}
  .stats-card{padding:18px}
}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}