:root{
  --bg-deep:#0b1026;
  --bg-darker:#020617;
  --border:rgba(255,255,255,.1);
  --gold:#ffd700;
  --silver:#c0c0c0;
  --text:#ffffff;
  --muted:#cbd5e1;
  --muted-2:#94a3b8;
  --success:#9ef7c1;
  --red:#f87171;
  --green:#4ade80;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:radial-gradient(circle at top,rgba(139,92,246,.12),transparent 30%),linear-gradient(180deg,var(--bg-deep),#08111f 48%,var(--bg-darker));
  color:var(--text);
  min-height:100vh;
}

/* ── Cinematic Header ─────────────────────────────────────────── */
.cine-header{
  position:sticky;top:0;z-index:100;
  overflow:hidden;min-height:280px;padding:48px 20px 52px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle at center top,rgba(124,92,255,.12),transparent 28%),
    radial-gradient(circle at center,rgba(255,215,0,.05),transparent 42%),
    linear-gradient(180deg,#0d1433 0%,#081022 55%,#050913 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:min-height .4s cubic-bezier(.4,0,.2,1), padding .4s cubic-bezier(.4,0,.2,1);
  will-change:min-height,padding;
}
.cine-header.collapsed{
  min-height:64px;
  padding:10px 20px;
}
.cine-header.mag-hidden{
  display:none !important;
  min-height:0 !important;
  max-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.cine-header.collapsed .generify{ display:none; }
.cine-header.collapsed .tagline-sub{ display:none; }
.cine-header.collapsed .tagline{ display:none; }
.cine-header.collapsed .constellation{ opacity:0; transition:opacity .3s; }
.cine-header.collapsed #cineLogo{
  font-size:1.5rem;
  gap:8px;
}
.cine-header.collapsed .h1{top:7px;left:13px}
.cine-header.collapsed .h2{top:13px;left:7px}
.cine-header.collapsed .h3{top:13px;right:7px}
.cine-header.collapsed .h4{bottom:7px;left:13px}
.cine-header.collapsed .brand{ display:flex;align-items:center;gap:0; }
.header-overlay{
  position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 0%,transparent 38%,rgba(255,215,0,.05) 46%,rgba(255,255,255,.08) 50%,rgba(255,215,0,.05) 54%,transparent 62%),
    linear-gradient(90deg,transparent 0%,rgba(139,0,23,.10) 15%,rgba(139,0,23,.22) 50%,rgba(139,0,23,.10) 85%,transparent 100%);
  animation:redCarpetGlow 8s ease-in-out infinite;pointer-events:none;
}
@keyframes redCarpetGlow{0%,100%{transform:translateX(-7%);opacity:.75}50%{transform:translateX(7%);opacity:1}}
.starfield,.constellation,.comet-sweep{position:absolute;inset:0;pointer-events:none}

/* ── Rich Starfield ──────────────────────────────────────────── */
/* Base star */
.sf-star{position:absolute;border-radius:50%;will-change:opacity,transform;}

/* Tiny stars (1-2px) — cool whites & pale blues — fast twinkle */
.sf-star.ss1{width:1px;height:1px;top:8%;left:5%;background:#e0f0ff;animation:sfTwinkleA 1.8s ease-in-out infinite;animation-delay:.0s}
.sf-star.ss2{width:2px;height:2px;top:12%;left:15%;background:#fff;animation:sfTwinkleB 2.2s ease-in-out infinite;animation-delay:.3s}
.sf-star.ss3{width:1px;height:1px;top:6%;left:28%;background:#c8e6ff;animation:sfTwinkleA 1.6s ease-in-out infinite;animation-delay:.8s}
.sf-star.ss4{width:2px;height:2px;top:18%;left:38%;background:#fff;animation:sfTwinkleB 2.4s ease-in-out infinite;animation-delay:.1s}
.sf-star.ss5{width:1px;height:1px;top:9%;left:49%;background:#ddeeff;animation:sfTwinkleA 1.9s ease-in-out infinite;animation-delay:1.2s}
.sf-star.ss6{width:2px;height:2px;top:14%;left:61%;background:#fff;animation:sfTwinkleB 2.1s ease-in-out infinite;animation-delay:.5s}
.sf-star.ss7{width:1px;height:1px;top:7%;left:72%;background:#c8e6ff;animation:sfTwinkleA 1.7s ease-in-out infinite;animation-delay:.9s}
.sf-star.ss8{width:2px;height:2px;top:20%;left:82%;background:#fff;animation:sfTwinkleB 2.3s ease-in-out infinite;animation-delay:.2s}
.sf-star.ss9{width:1px;height:1px;top:32%;left:8%;background:#e0f0ff;animation:sfTwinkleA 2.0s ease-in-out infinite;animation-delay:1.5s}
.sf-star.ss10{width:2px;height:2px;top:40%;left:20%;background:#fff;animation:sfTwinkleB 1.8s ease-in-out infinite;animation-delay:.6s}
.sf-star.ss11{width:1px;height:1px;top:52%;left:33%;background:#c8e6ff;animation:sfTwinkleA 2.2s ease-in-out infinite;animation-delay:.4s}
.sf-star.ss12{width:2px;height:2px;top:45%;left:55%;background:#fff;animation:sfTwinkleB 1.9s ease-in-out infinite;animation-delay:1.1s}
.sf-star.ss13{width:1px;height:1px;top:58%;left:68%;background:#ddeeff;animation:sfTwinkleA 1.7s ease-in-out infinite;animation-delay:.7s}
.sf-star.ss14{width:2px;height:2px;top:65%;left:78%;background:#fff;animation:sfTwinkleB 2.0s ease-in-out infinite;animation-delay:.0s}
.sf-star.ss15{width:1px;height:1px;top:72%;left:12%;background:#c8e6ff;animation:sfTwinkleA 2.3s ease-in-out infinite;animation-delay:1.3s}
.sf-star.ss16{width:2px;height:2px;top:78%;left:45%;background:#fff;animation:sfTwinkleB 1.6s ease-in-out infinite;animation-delay:.8s}
.sf-star.ss17{width:1px;height:1px;top:82%;left:62%;background:#e0f0ff;animation:sfTwinkleA 2.1s ease-in-out infinite;animation-delay:.2s}
.sf-star.ss18{width:2px;height:2px;top:88%;left:75%;background:#fff;animation:sfTwinkleB 1.8s ease-in-out infinite;animation-delay:1.0s}
.sf-star.ss19{width:1px;height:1px;top:75%;left:90%;background:#c8e6ff;animation:sfTwinkleA 2.4s ease-in-out infinite;animation-delay:.5s}
.sf-star.ss20{width:2px;height:2px;top:90%;left:30%;background:#fff;animation:sfTwinkleB 1.9s ease-in-out infinite;animation-delay:1.4s}

/* Medium stars (3-4px) — gold and warm white — slower pulse */
.sf-star.sm1{width:3px;height:3px;top:10%;left:9%;background:#ffd700;box-shadow:0 0 6px 1px rgba(255,215,0,.5);animation:sfPulseA 3.2s ease-in-out infinite;animation-delay:.0s}
.sf-star.sm2{width:4px;height:4px;top:17%;left:26%;background:#fff8cc;box-shadow:0 0 8px 2px rgba(255,248,204,.4);animation:sfPulseB 3.8s ease-in-out infinite;animation-delay:.7s}
.sf-star.sm3{width:3px;height:3px;top:25%;left:44%;background:#ffd700;box-shadow:0 0 6px 1px rgba(255,215,0,.5);animation:sfPulseA 3.5s ease-in-out infinite;animation-delay:1.2s}
.sf-star.sm4{width:4px;height:4px;top:13%;left:57%;background:#fff8cc;box-shadow:0 0 8px 2px rgba(255,248,204,.4);animation:sfPulseB 2.9s ease-in-out infinite;animation-delay:.4s}
.sf-star.sm5{width:3px;height:3px;top:22%;left:74%;background:#ffd700;box-shadow:0 0 6px 1px rgba(255,215,0,.5);animation:sfPulseA 3.6s ease-in-out infinite;animation-delay:1.8s}
.sf-star.sm6{width:4px;height:4px;top:35%;left:88%;background:#fff8cc;box-shadow:0 0 8px 2px rgba(255,248,204,.4);animation:sfPulseB 3.1s ease-in-out infinite;animation-delay:.2s}
.sf-star.sm7{width:3px;height:3px;top:48%;left:6%;background:#ffd700;box-shadow:0 0 6px 1px rgba(255,215,0,.5);animation:sfPulseA 4.0s ease-in-out infinite;animation-delay:1.0s}
.sf-star.sm8{width:4px;height:4px;top:55%;left:42%;background:#fff8cc;box-shadow:0 0 8px 2px rgba(255,248,204,.4);animation:sfPulseB 3.3s ease-in-out infinite;animation-delay:.6s}
.sf-star.sm9{width:3px;height:3px;top:62%;left:58%;background:#ffd700;box-shadow:0 0 6px 1px rgba(255,215,0,.5);animation:sfPulseA 3.7s ease-in-out infinite;animation-delay:1.5s}
.sf-star.sm10{width:4px;height:4px;top:70%;left:22%;background:#fff8cc;box-shadow:0 0 8px 2px rgba(255,248,204,.4);animation:sfPulseB 2.8s ease-in-out infinite;animation-delay:.9s}
.sf-star.sm11{width:3px;height:3px;top:80%;left:84%;background:#ffd700;box-shadow:0 0 6px 1px rgba(255,215,0,.5);animation:sfPulseA 3.4s ease-in-out infinite;animation-delay:.3s}
.sf-star.sm12{width:4px;height:4px;top:85%;left:50%;background:#fff8cc;box-shadow:0 0 8px 2px rgba(255,248,204,.4);animation:sfPulseB 3.9s ease-in-out infinite;animation-delay:1.6s}

/* Large stars (5-7px) — deep gold and soft purple — very slow breathe */
.sf-star.sl1{width:5px;height:5px;top:11%;left:3%;background:#ffd700;box-shadow:0 0 14px 4px rgba(255,215,0,.45),0 0 28px 6px rgba(255,215,0,.15);animation:sfBreath 5.5s ease-in-out infinite;animation-delay:.0s}
.sf-star.sl2{width:6px;height:6px;top:19%;left:35%;background:#c4b5fd;box-shadow:0 0 14px 4px rgba(196,181,253,.45),0 0 28px 6px rgba(167,139,250,.15);animation:sfBreath 6.2s ease-in-out infinite;animation-delay:1.0s}
.sf-star.sl3{width:7px;height:7px;top:8%;left:63%;background:#ffd700;box-shadow:0 0 18px 5px rgba(255,215,0,.5),0 0 36px 8px rgba(255,215,0,.15);animation:sfBreath 5.8s ease-in-out infinite;animation-delay:2.2s}
.sf-star.sl4{width:5px;height:5px;top:42%;left:52%;background:#a78bfa;box-shadow:0 0 14px 4px rgba(167,139,250,.45),0 0 28px 6px rgba(167,139,250,.15);animation:sfBreath 6.8s ease-in-out infinite;animation-delay:.5s}
.sf-star.sl5{width:6px;height:6px;top:68%;left:77%;background:#ffd700;box-shadow:0 0 14px 4px rgba(255,215,0,.45),0 0 28px 6px rgba(255,215,0,.15);animation:sfBreath 5.2s ease-in-out infinite;animation-delay:1.8s}
.sf-star.sl6{width:7px;height:7px;top:82%;left:16%;background:#c4b5fd;box-shadow:0 0 18px 5px rgba(196,181,253,.5),0 0 36px 8px rgba(167,139,250,.15);animation:sfBreath 7.0s ease-in-out infinite;animation-delay:3.0s}

@keyframes sfTwinkleA{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.9;transform:scale(1.3)}}
@keyframes sfTwinkleB{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.5)}}
@keyframes sfPulseA{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:.95;transform:scale(1.4)}}
@keyframes sfPulseB{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:1;transform:scale(1.6)}}
@keyframes sfBreath{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:.85;transform:scale(1.25)}}
.constellation .node{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 10px rgba(255,255,255,.5),0 0 15px rgba(255,215,0,.3);
}
.constellation .line{
  position:absolute;height:1px;transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,215,0,.45),rgba(255,255,255,.15));
  box-shadow:0 0 8px rgba(255,215,0,.18);
  animation:constellationPulse 4s ease-in-out infinite;
}
@keyframes constellationPulse{0%,100%{opacity:.25}50%{opacity:.8}}
.n1{top:22%;left:62%}.n2{top:14%;left:69%}.n3{top:26%;left:76%}.n4{top:17%;left:83%}.n5{top:31%;left:88%}
.l1{top:23.7%;left:63%;width:8%;transform:rotate(-28deg)}
.l2{top:16.5%;left:70%;width:10%;transform:rotate(29deg)}
.l3{top:28.4%;left:77%;width:8%;transform:rotate(-31deg)}
.l4{top:18.8%;left:84%;width:6%;transform:rotate(38deg)}
.brand{position:relative;z-index:2;max-width:980px}
.generify{font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--silver);margin-bottom:14px;text-shadow:0 0 10px rgba(255,255,255,.15)}
#cineLogo{
  margin:0;display:flex;gap:14px;align-items:center;justify-content:center;
  font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.05;color:#ffffff;
  letter-spacing:.5px;text-shadow:none;
  transition:text-shadow .5s ease,transform .5s ease;
}
.h1{top:16px;left:31px}.h2{top:31px;left:16px}.h3{top:31px;right:16px}.h4{bottom:16px;left:31px}
.tagline{margin:18px 0 6px;font-size:1.15rem;font-style:italic;color:var(--muted);letter-spacing:.3px}
.tagline-sub{margin:0;color:var(--muted-2);max-width:760px;line-height:1.55}
/* ── Comet ───────────────────────────────────────────────────── */
/* Comet travels bottom-left → top-right diagonally, 12s cycle with 4s pause */
.comet-sweep{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
/* comet-wrap anchored bottom-left; only transform+opacity animate = GPU composited */
.comet-wrap{
  position:absolute;
  width:28px;height:28px;
  bottom:15%;left:0px;
  animation:cometFlyDesktop 16s linear infinite;
  will-change:transform,opacity;
  transform:translateZ(0);
}
.comet-core{
  position:absolute;
  top:0;left:0;
  width:28px;height:28px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#ffffff 0%,#fffdf0 20%,#ffd700 50%,#ff8c00 80%,transparent 100%);
  box-shadow:0 0 8px 4px rgba(255,255,255,.9),0 0 20px 8px rgba(255,215,0,.7),0 0 40px 16px rgba(255,140,0,.4),0 0 70px 28px rgba(255,100,0,.15);
  animation:cometPulse 1.2s ease-in-out infinite;
  will-change:transform,box-shadow;
}
.comet-tail-primary{
  position:absolute;
  top:50%;right:calc(100% + 2px);
  width:320px;height:12px;
  transform:translateY(-50%);
  border-radius:999px 0 0 999px;
  background:linear-gradient(90deg,rgba(255,215,0,0) 0%,rgba(255,200,0,.04) 20%,rgba(255,215,0,.12) 40%,rgba(255,230,0,.35) 62%,rgba(255,248,180,.70) 78%,rgba(255,255,220,.92) 92%,rgba(255,255,255,0) 100%);
  filter:blur(2px);
}
.comet-tail-secondary{
  position:absolute;
  top:50%;right:calc(100% + 2px);
  width:160px;height:5px;
  transform:translateY(calc(-50% + 6px)) rotate(-4deg);
  transform-origin:right center;
  border-radius:999px 0 0 999px;
  background:linear-gradient(90deg,rgba(180,220,255,0) 0%,rgba(180,220,255,.03) 30%,rgba(200,230,255,.18) 60%,rgba(220,240,255,.45) 82%,rgba(255,255,255,0) 100%);
  filter:blur(1.5px);
}
.comet-halo{
  position:absolute;
  top:50%;left:50%;
  width:56px;height:56px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,215,0,.25) 0%,rgba(255,140,0,.1) 50%,transparent 100%);
  animation:haloBreath 1.2s ease-in-out infinite;
  will-change:transform,opacity;
}

/* DESKTOP: ~1200px wide header, 280px tall
   Arc: steep rise left, gentle curve right, shrinks to vanishing
   Pure px — no vw — smooth GPU interpolation                     */
@keyframes cometFlyDesktop{
  0%   {transform:translate3d(-200px, 120px,0) scale(1.00); opacity:0}
  4%   {transform:translate3d( -80px,  80px,0) scale(1.00); opacity:1}
  15%  {transform:translate3d( 100px,  30px,0) scale(1.00); opacity:1}
  30%  {transform:translate3d( 350px, -40px,0) scale(1.00); opacity:1}
  50%  {transform:translate3d( 650px, -95px,0) scale(1.00); opacity:1}
  62%  {transform:translate3d( 900px,-135px,0) scale(0.72); opacity:.90}
  72%  {transform:translate3d(1150px,-165px,0) scale(0.48); opacity:.65}
  80%  {transform:translate3d(1380px,-185px,0) scale(0.28); opacity:.30}
  86%  {transform:translate3d(1600px,-195px,0) scale(0.14); opacity:0}
  100% {transform:translate3d(-200px, 120px,0) scale(1.00); opacity:0}
}

@keyframes cometPulse{
  0%,100%{transform:scale(.92);box-shadow:0 0 8px 4px rgba(255,255,255,.9),0 0 20px 8px rgba(255,215,0,.7),0 0 40px 16px rgba(255,140,0,.4)}
  50%{transform:scale(1.08);box-shadow:0 0 12px 6px rgba(255,255,255,1),0 0 28px 12px rgba(255,215,0,.9),0 0 55px 22px rgba(255,140,0,.5)}
}
@keyframes haloBreath{
  0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.6}
  50%{transform:translate(-50%,-50%) scale(1.15);opacity:1}
}
.logo-burst{text-shadow:0 0 10px rgba(255,215,0,.55),0 0 22px rgba(255,215,0,.9),0 0 48px rgba(255,255,255,.45);transform:scale(1.02)}

/* ── Logo letter comet-pass effect ───────────────────────────────── */
.logo-char{
  display:inline-block;
  color:#ffffff;
  transition:color .4s ease, text-shadow .4s ease;
}
/* Locked gold — applied as comet passes, stays until reset */
.logo-char.comet-lit{
  color:#ffd700;
  text-shadow:0 0 8px rgba(255,215,0,.7), 0 0 20px rgba(255,180,0,.4);
  transition:color .08s ease, text-shadow .08s ease;
}

/* ── Studio 'o' film reel ────────────────────────────────────────── */
/* ── Star dots over the i's ──────────────────────────────────────── */
.logo-i-wrap{
  position:relative;
  display:inline-block;
}
/* Hide the actual i tittle with a custom dot replacement */
.logo-i-wrap > span:first-child {
  display:inline-block;
}
.i-star-dot{
  position:absolute;
  top:0.08em;
  left:50%;
  transform:translateX(-50%) scale(1);
  font-size:0.35em;
  line-height:1;
  color:rgba(255,215,0,.35);
  pointer-events:none;
  display:block;
}

@keyframes iDot1Anim{
  0%,34.9%   { color:rgba(255,215,0,.3); font-size:0.35em; filter:none; }
  37%        { color:#fff; font-size:0.44em; filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px var(--gold)); }
  44%        { color:var(--gold); font-size:0.37em; filter:drop-shadow(0 0 4px rgba(255,215,0,.6)); }
  94%        { color:rgba(255,215,0,.3); font-size:0.35em; filter:none; }
  100%       { color:rgba(255,215,0,.3); font-size:0.35em; filter:none; }
}

@keyframes iDot2Anim{
  0%,49.2%   { color:rgba(255,215,0,.3); font-size:0.35em; filter:none; }
  51.5%      { color:#fff; font-size:0.44em; filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px var(--gold)); }
  58.5%      { color:var(--gold); font-size:0.37em; filter:drop-shadow(0 0 4px rgba(255,215,0,.6)); }
  94%        { color:rgba(255,215,0,.3); font-size:0.35em; filter:none; }
  100%       { color:rgba(255,215,0,.3); font-size:0.35em; filter:none; }
}

@keyframes iDot3Anim{
  0%,62.9%   { color:rgba(255,215,0,.3); font-size:0.35em; filter:none; }
  65%        { color:#fff; font-size:0.44em; filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px var(--gold)); }
  72%        { color:var(--gold); font-size:0.37em; filter:drop-shadow(0 0 4px rgba(255,215,0,.6)); }
  94%        { color:rgba(255,215,0,.3); font-size:0.35em; filter:none; }
  100%       { color:rgba(255,215,0,.3); font-size:0.35em; filter:none; }
}

#iDot1{ animation:iDot1Anim 6s linear infinite; }
#iDot2{ animation:iDot2Anim 6s linear infinite; }
#iDot3{ animation:iDot3Anim 6s linear infinite; }

/* ── Status Strip ─────────────────────────────────────────────── */
.status-strip{
  background:#070e22;padding:8px 24px;font-size:11px;color:var(--muted-2);
  font-family:'Courier New',monospace;display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.status-item{display:flex;gap:6px;align-items:center}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 2s ease-in-out infinite}
.status-dot.loading{background:var(--gold);animation:blink 0.6s ease-in-out infinite}.status-dot.error{background:var(--red);animation:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── App Shell ────────────────────────────────────────────────── */
.app-shell{max-width:1320px;margin:0 auto;padding:20px 20px 58px}

/* ── Legal Banner ─────────────────────────────────────────────── */
.legal-banner{
  background:rgba(255,215,0,.05);border:1px solid rgba(255,215,0,.2);
  border-left:4px solid var(--gold);border-radius:10px;
  padding:10px 16px;margin-bottom:16px;font-size:11.5px;color:var(--muted);line-height:1.6;
}
.legal-banner strong.label{color:var(--gold);display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}

/* ── Card base ────────────────────────────────────────────────── */
.cm-card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
  border:1px solid var(--border);border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.22);backdrop-filter:blur(5px);
}

/* ── Main Dashboard Grid ──────────────────────────────────────── */
.main-grid{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:16px;
  align-items:stretch;
  height:640px;
}

/* ── Left Column: Rankings Card ───────────────────────────────── */
.rankings-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}

/* Card header row — title left, search right */
.rankings-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px 0;flex-wrap:wrap;
  flex-shrink:0;
}
.rankings-title{
  display:flex;align-items:baseline;gap:10px;
}
.rankings-title h2{margin:0;color:#fff3b0;font-size:1.25rem;font-weight:700}
.rankings-summary{font-size:11px;color:var(--muted-2);font-family:'Courier New',monospace}
.search-inline{
  display:flex;align-items:center;gap:8px;
  background:#0e1731;border:1px solid var(--border);
  border-radius:20px;padding:6px 14px;
  transition:border-color .15s;
  flex-shrink:0;
}
.search-inline:focus-within{border-color:rgba(255,215,0,.65);box-shadow:0 0 0 3px rgba(255,215,0,.1)}
.search-inline input{
  background:none;border:none;outline:none;
  color:#fff;font-size:13px;width:160px;
}
.search-inline span{color:var(--muted-2);font-size:13px}

/* ── Compact Filter Bar ───────────────────────────────────────── */
.filter-bar{
  padding:12px 20px;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:8px;
  flex-shrink:0;
}
/* ── Media mode switch ────────────────────────────────────────── */
.media-switch{
  display:inline-flex;border:1px solid rgba(255,255,255,.12);
  border-radius:8px;overflow:hidden;flex-shrink:0;
}
.media-btn{
  padding:4px 12px;font-size:11px;cursor:pointer;
  background:#0e1731;color:var(--muted-2);border:none;
  transition:all .15s;white-space:nowrap;
}
.media-btn:not(:last-child){border-right:1px solid rgba(255,255,255,.1)}
.media-btn.active{background:rgba(255,215,0,.12);color:#fff3b0}
.media-btn.active-tv{background:rgba(99,102,241,.15);color:#a5b4fc}
.media-btn.active-both{background:rgba(52,211,153,.1);color:#6ee7b7}

/* ── TV category chips ────────────────────────────────────────── */
.tv-chips{display:none}
.tv-chips.visible{display:flex;flex-wrap:wrap;gap:8px;width:100%}

.filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Media row: just the Film/Both/TV switch */
.filter-row-media{flex-wrap:nowrap}
/* Selects row: Sort + Status + Gender + Date + Buttons — single line on desktop */
.filter-row-selects{flex-wrap:nowrap;align-items:center}

/* Compact selects */
.fs{
  appearance:none;border:1px solid rgba(255,255,255,.12);
  background:#0e1731;color:#e8edf8;
  border-radius:8px;padding:5px 24px 5px 10px;
  font-size:12px;outline:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
  transition:border-color .15s;
  height:30px;
}
.fs:focus{border-color:rgba(255,215,0,.65)}
.fs-label{font-size:10px;color:var(--muted-2);white-space:nowrap}
/* mob-select-wrap: transparent on desktop, activates mobile-only */
.mob-select-wrap{display:contents}
.mob-select-label{display:none}
.mob-status-gender-row{display:contents}
.mob-sort-wrap,.mob-status-wrap,.mob-gender-wrap{display:contents}
.mob-btn-row{display:contents}
/* year-range-wrap: inline on desktop, full-width row on tablet, 2-col on mobile */
.year-range-wrap{display:flex;flex-direction:row;align-items:center;gap:6px}
.year-range-wrap .fs-label{font-size:10px;color:var(--muted-2);white-space:nowrap}
.year-range-title{display:none}

/* Compact toggles */
.toggle-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:20px;
  border:1px solid rgba(255,255,255,.15);background:#374151;
  cursor:pointer;font-size:11px;color:#9ca3af;
  transition:all .15s;user-select:none;
}
.toggle-pill input{display:none}
.toggle-pill.active{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.15);color:#4ade80}
.toggle-pill .pip{width:6px;height:6px;border-radius:50%;background:#6b7280;flex-shrink:0}
.toggle-pill.active .pip{background:#22c55e}

/* Category chips */
.cat-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:20px;
  border:1px solid rgba(255,255,255,.15);background:#374151;
  cursor:pointer;font-size:11px;color:#9ca3af;
  transition:all .15s;user-select:none;
}
.cat-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:#6b7280;flex-shrink:0}
.cat-chip.active{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.15);color:#4ade80}
.cat-chip.active::before{background:#22c55e}
/* Dimmed chips — relevant in wrong media mode */
.cat-chip.dimmed{opacity:.35;pointer-events:none}

/* Icon action buttons */
.icon-btn{
  height:28px;border-radius:8px;
  border:1px solid rgba(255,255,255,.1);background:#0e1731;
  color:var(--muted-2);cursor:pointer;font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;
  gap:5px;padding:0 10px;
  transition:all .15s;flex-shrink:0;
}
.icon-btn:hover{border-color:rgba(255,215,0,.4);color:var(--gold)}
.icon-btn-label{display:inline;font-size:.72rem;white-space:nowrap}

.filter-divider{height:1px;background:rgba(255,255,255,.06);margin:2px 0}

/* ── Table Container ──────────────────────────────────────────── */
.table-container{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;}
.table-scroll{
  flex:1;
  overflow-y:auto;overflow-x:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,215,0,.2) transparent;
}
.table-scroll::-webkit-scrollbar{width:4px}
.table-scroll::-webkit-scrollbar-thumb{background:rgba(255,215,0,.2);border-radius:2px}

.rank-table{width:100%;border-collapse:collapse;font-size:12.5px}
.rank-table thead th{
  position:sticky;top:0;z-index:2;
  background:#0a1128;color:#fff3b0;
  text-align:left;padding:9px 12px;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}
.rank-table tbody tr{
  border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer;transition:background .12s;
}
.rank-table tbody tr:hover{background:rgba(255,215,0,.05)}
.rank-table tbody tr.active{background:rgba(255,215,0,.09);border-left:2px solid var(--gold)}
.rank-table td{padding:8px 12px;vertical-align:middle}
.rank-num{font-family:'Courier New',monospace;font-size:11px;color:var(--muted-2);width:28px}
.actor-cell-sm{display:flex;align-items:center;gap:9px}
.avatar-sm{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,rgba(255,215,0,.22),rgba(139,92,246,.35));
  border:1px solid rgba(255,255,255,.1);color:#fff7cf;
  font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.actor-name-sm{font-weight:600;font-size:12.5px;color:#fff}
.actor-meta-sm{font-size:10px;color:var(--muted-2)}
.score-pill-sm{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 8px;border-radius:999px;
  background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.18);
  color:#fff1a8;font-weight:700;font-size:12px;
  font-family:'Courier New',monospace;white-space:nowrap;
}
.score-sm{font-family:'Courier New',monospace;font-size:11px;color:var(--muted)}
.btn-open{
  padding:3px 10px;border-radius:6px;
  border:1px solid rgba(255,255,255,.1);background:transparent;
  color:var(--muted-2);font-size:10px;cursor:pointer;white-space:nowrap;
  transition:all .15s;
}
.btn-open:hover{border-color:rgba(255,215,0,.4);color:var(--gold)}

/* More indicator */
.more-indicator{
  position:absolute;bottom:0;left:0;right:0;
  padding:10px;text-align:center;
  background:linear-gradient(transparent,rgba(5,9,19,.95));
  font-size:11px;color:var(--muted-2);
  font-family:'Courier New',monospace;
  pointer-events:none;
  transition:opacity .3s;
  border-radius:0 0 16px 16px;
}
.more-indicator.hidden{opacity:0}

/* ── Spotlight Card (Right Column) ────────────────────────────── */
.spotlight-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}
.spotlight-header{
  padding:14px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.spotlight-header h2{margin:0;color:#fff3b0;font-size:1.1rem;font-weight:700}
.spotlight-body{
  flex:1;
  overflow-y:auto;padding:16px 18px;
  scrollbar-width:thin;scrollbar-color:rgba(255,215,0,.2) transparent;
  position:relative;
}
.spotlight-body::-webkit-scrollbar{width:4px}
.spotlight-body::-webkit-scrollbar-thumb{background:rgba(255,215,0,.2);border-radius:2px}
.spotlight-empty{
  height:100%;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--muted-2);font-size:12px;
  font-family:'Courier New',monospace;line-height:1.8;padding:20px;
}
/* Spotlight more indicator — same treatment as table */
.spotlight-more{
  position:sticky;
  bottom:0;left:0;right:0;
  padding:10px;text-align:center;
  background:linear-gradient(transparent,rgba(5,9,19,.95));
  font-size:11px;color:var(--muted-2);
  font-family:'Courier New',monospace;
  pointer-events:none;
  transition:opacity .3s;
  margin:-16px -18px 0;
}
.spotlight-more.hidden{opacity:0;pointer-events:none}

/* Spotlight content */
.sp-name{color:#fff3b0;font-size:1.2rem;font-weight:700;margin:0 0 2px}
.sp-sub{color:var(--muted-2);font-size:11px;margin:0 0 10px}
.sp-badges{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.sp-badge{
  padding:2px 8px;border-radius:10px;font-size:10px;
  background:#111c39;border:1px solid rgba(255,255,255,.08);color:#eef2ff;
}
.sp-overall{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 14px;border-radius:999px;
  background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.2);
  color:#fff1a8;font-weight:700;font-size:14px;
  font-family:'Courier New',monospace;margin-bottom:14px;
}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.sp-box{
  padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
}
.sp-box h4{margin:0 0 6px;color:#fff1a8;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-family:'Courier New',monospace}
.sp-box p{margin:0 0 4px;color:#dbe4f0;font-size:11px;line-height:1.5}
.sp-box p:last-child{margin:0}
.sp-box p strong{color:#fff;font-weight:600}
.sp-full{grid-column:1/-1}

/* Compact credit list */
.credit-list-sm{list-style:none;padding:0;margin:0}
.credit-list-sm li{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.04);font-size:11px;
}
.credit-list-sm li:last-child{border:none}
.credit-title-sm{color:#fff;font-weight:600;font-size:11px}
.credit-meta-sm{color:var(--muted-2);font-size:10px;white-space:nowrap;font-family:'Courier New',monospace}

/* Sparkline compact */
.sparkline-wrap{margin:4px 0 6px}
.sparkline{width:100%;height:60px}
.sparkline-axis{stroke:rgba(255,255,255,.08);stroke-width:1}
.sparkline-path{fill:none;stroke:#ffd700;stroke-width:2}
.sparkline-dot{fill:#ffffff;stroke:#ffd700;stroke-width:1.5}

/* Source badges */
.source-badge{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:8px;
  font-size:9px;font-family:'Courier New',monospace;
  background:rgba(255,255,255,.04);color:var(--muted-2);
  border:1px solid rgba(255,255,255,.07);margin-right:4px;margin-top:4px;
}

/* ── AI Projection Panel (full width, below grid) ─────────────── */
.projection-panel{
  margin-top:16px;
  max-height:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
  opacity:0;
}
.projection-panel.visible{
  max-height:800px;opacity:1;
}
.projection-inner{
  border:1px solid rgba(255,215,0,.25);border-radius:16px;overflow:hidden;
}
.projection-header{
  background:rgba(255,215,0,.07);padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-bottom:1px solid rgba(255,215,0,.12);flex-wrap:wrap;
}
.projection-header-left{display:flex;align-items:center;gap:10px}
.projection-header-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff1a8;font-family:'Courier New',monospace}
.projection-actor-name{font-size:13px;color:#ffd700;font-weight:700}
.projection-label{font-size:10px;padding:2px 10px;border:1px solid rgba(255,215,0,.3);border-radius:999px;color:#ffd700;font-family:'Courier New',monospace}
.projection-body{padding:16px 20px}
.projection-disclaimer{
  background:rgba(255,215,0,.05);border:1px solid rgba(255,215,0,.15);border-radius:8px;
  padding:8px 12px;font-size:10px;color:#e8c97a;line-height:1.5;margin-bottom:14px;
  font-family:'Courier New',monospace;
}
.projection-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:14px}
.projection-section h5{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:0 0 5px;font-family:'Courier New',monospace}
.projection-section p{font-size:12px;color:#dbe4f0;line-height:1.6;margin:0}
.projection-outlook{margin-bottom:12px}
.projection-outlook h5{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:0 0 5px;font-family:'Courier New',monospace}
.projection-outlook p{font-size:12px;color:#dbe4f0;line-height:1.6;margin:0}
.confidence-bar{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted-2);font-family:'Courier New',monospace}
.conf-dot{width:7px;height:7px;border-radius:50%}
.conf-low .conf-dot{background:#f87171}
.conf-medium .conf-dot{background:var(--gold)}
.conf-high .conf-dot{background:var(--green)}
.projection-loading{text-align:center;padding:20px;font-size:11px;color:var(--muted-2);font-family:'Courier New',monospace}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.1);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Compare Card ─────────────────────────────────────────────── */
.compare-card{margin-top:16px}
.compare-card-header{
  padding:14px 20px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.compare-card-header h2{margin:0;color:#fff3b0;font-size:1.1rem;font-weight:700;flex-shrink:0}
.compare-selects{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.compare-selects .cs-wrap{flex:1;min-width:140px}
.compare-selects .cs-trigger{width:100%;height:32px}
.compare-selects select{
  flex:1;min-width:140px;
  appearance:none;border:1px solid rgba(255,255,255,.12);
  background:#0e1731;color:#e8edf8;
  border-radius:8px;padding:6px 28px 6px 10px;
  font-size:12px;outline:none;cursor:pointer;height:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}
.compare-body{padding:16px 20px}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compare-empty{grid-column:1/-1;padding:16px;border-radius:10px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.1);color:#cbd5e1;font-size:12px;text-align:center}
.compare-box{padding:14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.compare-box h3{margin:0 0 10px;color:#fff3b0;font-size:.95rem;display:flex;align-items:center;gap:8px}
.compare-stat{margin:6px 0;color:#dbe4f0;font-size:12px}
.compare-stat strong{font-family:'Courier New',monospace;color:#fff}
.compare-winner{grid-column:1/-1;padding:10px 14px;border-radius:10px;background:rgba(255,215,0,.07);border:1px solid rgba(255,215,0,.15);color:#fff2b8;font-size:12px;text-align:center}
.compare-clear-btn{
  flex-shrink:0;
  padding:5px 12px;border-radius:999px;
  border:1px solid rgba(255,100,100,.3);
  background:rgba(255,100,100,.08);
  color:rgba(255,150,150,.9);
  font-size:11px;cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.compare-clear-btn:hover{background:rgba(255,100,100,.18);border-color:rgba(255,100,100,.5);color:#fca5a5}

/* ── Compare table ── */
.cmp-table-wrap{width:100%;overflow-x:auto}
.cmp-table{width:100%;border-collapse:collapse;font-size:12px}
.cmp-table thead tr{border-bottom:1px solid rgba(255,255,255,.1)}
.cmp-actor-head{padding:8px 10px;color:#fff3b0;font-weight:700;text-align:center}
.cmp-actor-head div{margin:0 auto 4px}
.cmp-actor-head span{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.cmp-metric{padding:7px 10px;color:var(--muted-2);font-size:11px;white-space:nowrap}
.cmp-val{padding:7px 10px;text-align:center;font-family:'Courier New',monospace;color:#dbe4f0;font-size:12px}
.cmp-table tbody tr{border-bottom:1px solid rgba(255,255,255,.05)}
.cmp-table tbody tr:last-child{border-bottom:none}
.cmp-val.cmp-win{color:#4ade80;font-weight:700}

/* ── Legal Card ───────────────────────────────────────────────── */
.legal-card{
  margin-top:16px;padding:16px 20px;border-radius:12px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
}
.legal-card h3{margin:0 0 8px;color:var(--muted-2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-family:'Courier New',monospace}
.legal-card p{color:#64748b;font-size:11px;line-height:1.7;margin:0}

/* ── AI Projection inline (inside spotlight) ───────────────────── */
.projection-card{margin-top:12px;border:1px solid rgba(255,215,0,.2);border-radius:12px;overflow:hidden}

/* ── Modal ────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:1000}.modal.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.74);backdrop-filter:blur(4px)}
.modal-dialog{
  position:relative;width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 40px);
  overflow:auto;margin:20px auto;
  background:linear-gradient(180deg,#121b38,#0a122a);
  border:1px solid rgba(255,255,255,.12);border-radius:20px;
  box-shadow:0 25px 65px rgba(0,0,0,.45);padding:24px;
}
.modal-close{position:absolute;top:14px;right:14px;width:auto;min-width:36px;height:36px;border-radius:20px;border:1px solid rgba(255,255,255,.14);background:#121b38;color:#fff2b8;font-size:.8rem;cursor:pointer;padding:0 12px;white-space:nowrap}
.modal-close:hover{background:#1a274f}

/* ── FAQ button ── */
.faq-btn-fixed{
  position:fixed;bottom:20px;right:16px;z-index:900;
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 14px;border-radius:999px;
  border:1px solid rgba(255,215,0,.3);
  background:rgba(10,18,42,.88);
  backdrop-filter:blur(6px);
  color:#fff3b0;font-size:11px;cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.4);
  transition:all .15s;
}
.faq-btn-fixed:hover{background:rgba(255,215,0,.15);border-color:rgba(255,215,0,.5)}

/* ── FAQ modal ── */
.faq-dialog{width:min(720px,calc(100vw - 32px))}
.faq-content{padding:8px 4px 4px}
.faq-title{font-size:1.2rem;color:var(--gold);margin:0 0 20px;padding-right:40px}
.faq-content h3{font-size:.85rem;color:#e2e8f0;margin:18px 0 6px;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:4px}
.faq-content p{font-size:.82rem;color:var(--muted-2);line-height:1.65;margin:0}

/* ── Compare AI narrative ── */
.compare-narrative{
  grid-column:1/-1;
  margin-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:12px;
}
.compare-explain-btn{
  background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.25);
  color:#fff3b0;border-radius:8px;padding:7px 14px;
  font-size:12px;cursor:pointer;transition:all .15s;
}
.compare-explain-btn:hover{background:rgba(255,215,0,.2)}
.compare-explain-btn:disabled{opacity:.5;cursor:wait}
.compare-narrative-text{
  margin-top:10px;font-size:.82rem;color:var(--muted-2);
  line-height:1.7;display:none;
  background:rgba(255,255,255,.03);border-radius:8px;padding:12px;
  border:1px solid rgba(255,255,255,.07);
}

/* Modal detail reuses sp- classes */
.breakdown-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.metric-box{padding:12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.metric-box h4{margin:0 0 7px;color:#fff1a8;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-family:'Courier New',monospace}
.metric-box p{margin:0 0 5px;color:#dbe4f0;font-size:11px;line-height:1.5}
.metric-box p strong{color:#fff}
.credit-list{list-style:none;padding:0;margin:0}
.credit-list li{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#dbe4f0;font-size:11px}
.credit-list li:last-child{border:none}
.credit-title{font-weight:700;color:#fff}
.credit-meta{display:block;color:#94a3b8;margin-top:3px;font-size:10px}
.badge-row{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#111c39;border:1px solid rgba(255,255,255,.08);color:#eef2ff;font-size:11px}
.detail-name{margin:0;color:#fff3b0;font-size:1.5rem;font-weight:700}
.detail-sub{margin:4px 0 0;color:#cbd5e1;font-size:11px}
.score-pill{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:5px 10px;border-radius:999px;background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.18);color:#fff1a8;font-weight:700;font-size:13px}

/* ── Footer ───────────────────────────────────────────────────── */
/* ── Special Credit ───────────────────────────────────────── */
.special-credit{
  text-align:center;
  padding:20px 20px 4px;
  background:linear-gradient(180deg,rgba(2,6,23,0),rgba(2,6,23,.6));
}
.special-credit-inner{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:rgba(8,20,44,.7);
  border:1px solid rgba(255,215,0,.2);
  border-left:3px solid var(--gold);
  border-radius:10px;
  padding:12px 20px;
  max-width:680px;
  width:100%;
}
.special-credit-star{
  color:var(--gold);
  font-size:1.1rem;
  flex-shrink:0;
  opacity:.85;
}
.special-credit-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  text-align:left;
}
.special-credit-label{
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:700;
  opacity:.8;
}
.special-credit-text{
  margin:0;
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}
.special-credit-name{
  color:var(--gold);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(255,215,0,.35);
  transition:border-color .15s,color .15s;
}
.special-credit-name:hover{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.6);
}
.special-credit-role{
  color:var(--muted-2);
  font-size:11px;
}

footer{text-align:center;padding:32px 20px 40px;background:linear-gradient(180deg,rgba(2,6,23,0),rgba(2,6,23,.85) 24%,rgba(2,6,23,1));border-top:1px solid rgba(255,255,255,.06)}
.generify-platform{margin-bottom:8px;color:var(--gold);font-weight:700;letter-spacing:.5px;font-size:.95rem}
.footer-sources{margin:6px 0;font-size:10px;color:var(--muted-2);font-family:'Courier New',monospace}
.legal{color:#98a2b3;font-size:.85rem;max-width:760px;line-height:1.55;margin:0 auto}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:960px){
  /* Tablet: ~768px wide, 64px+ header — medium comet path */
  .comet-wrap{ animation:cometFlyTablet 16s linear infinite; bottom:15%;left:0px; }
  .comet-core{ width:22px; height:22px; }
  .comet-tail-primary{ width:220px; height:9px; }
  .comet-tail-secondary{ width:110px; height:4px; }
  .comet-halo{ width:44px; height:44px; }
  @keyframes cometFlyTablet{
    0%   {transform:translate3d(-150px, 90px,0) scale(1.00); opacity:0}
    5%   {transform:translate3d( -60px, 55px,0) scale(1.00); opacity:1}
    18%  {transform:translate3d(  60px, 15px,0) scale(1.00); opacity:1}
    35%  {transform:translate3d( 240px,-30px,0) scale(1.00); opacity:1}
    50%  {transform:translate3d( 420px,-60px,0) scale(1.00); opacity:.95}
    63%  {transform:translate3d( 600px,-88px,0) scale(0.68); opacity:.75}
    75%  {transform:translate3d( 770px,-110px,0) scale(0.42); opacity:.40}
    83%  {transform:translate3d( 900px,-124px,0) scale(0.22); opacity:.15}
    88%  {transform:translate3d( 990px,-130px,0) scale(0.14); opacity:0}
    100% {transform:translate3d(-150px, 90px,0) scale(1.00); opacity:0}
  }
  .main-grid{grid-template-columns:1fr;height:auto}
  .spotlight-card{order:-1}
  .spotlight-body{height:340px;flex:none}
  .table-scroll{height:400px;flex:none}
  .table-container{flex:none}
  .rankings-card{height:auto}
  .projection-cols{grid-template-columns:1fr 1fr}
  /* Tablet only: From/To container breaks to new line */
  .filter-row-selects { flex-wrap:wrap; align-items:center; }
  .year-range-wrap {
    flex-basis:100%;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:6px;
  }
  .year-range-title {
    display:inline;
    font-size:10px;
    color:var(--muted-2);
    white-space:nowrap;
    margin-right:2px;
    font-weight:600;
  }
  .year-range-wrap .fs-label { display:inline; }
  .year-range-wrap .fs { width:auto; flex:0 0 auto; }
}

  
/* ── Mobile-only screen layout rescue (does not affect desktop) ───────────── */



/* ── Mobile-only scoring list refinement ─────────────────────────────────── */



/* ── Mobile-only compact controls / actor row refinement ─────────────────── */



/* --- Final mobile-only layout patch --- */
.mob-action-btns{display:none}
.overall-inline,.score-details-row,.score-details-btn,.rank-summary-row,.spotlight-inline{display:none}
.actor-main-block{display:block}



  .cmx-logo img,
  .brand-logo img,
  .site-logo img,
  #siteLogo,
  #brandLogo{
    filter: drop-shadow(0 0 6px rgba(56,189,248,.55)) drop-shadow(0 0 16px rgba(34,211,238,.22));
  }


.wolf-logo-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px;
  margin-right:12px;
  flex:0 0 auto;
}
.wolf-logo-static,
.wolf-logo-pulse{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(56,189,248,.55)) drop-shadow(0 0 22px rgba(34,211,238,.20));
}
.wolf-logo-static{ opacity:.85; }
.wolf-logo-pulse{ opacity:1; }
#cineLogo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.cine-header.collapsed .wolf-logo-wrap{
  width:56px;
  height:56px;
  margin-right:8px;
  margin-left:-20px;
}



/* ── CineMetrix TSB Theme Palette (v8.0.21) ───────────────────────────── */

:root{
  --cm-bg:#08142c;
  --cm-panel:#0b1833;
  --cm-panel-border:#243b63;
  --cm-text:#eaf2ff;
  --cm-text-muted:#9fb3d1;
  --cm-accent:#38bdf8;
  --cm-accent-glow:#22d3ee;
  --cm-input:#1d2a44;
}

body{
  background:linear-gradient(180deg,#08142c 0%,#050913 100%);
  color:var(--cm-text);
}

.cine-header{
  background:
    radial-gradient(circle at top,rgba(56,189,248,.12),transparent 30%),
    linear-gradient(180deg,#08142c 0%,#050913 100%);
}

.logo-text{
  color:#eaf2ff;
  text-shadow:0 0 14px rgba(56,189,248,.35);
}

.cm-card{
  background:var(--cm-panel);
  border:1px solid var(--cm-panel-border);
}

.legal-banner{
  background:rgba(11,24,51,.85);
  border:1px solid var(--cm-panel-border);
}

.rankings-card,
.spotlight-card{
  background:var(--cm-panel);
}

button,
.media-btn{
  background:#1d2a44;
  border:1px solid #2b4c7a;
  color:#eaf2ff;
}

button:hover,
.media-btn:hover{
  background:#243b63;
}

button.active,
.media-btn.active{
  background:linear-gradient(180deg,#38bdf8,#22d3ee);
  color:#08142c;
}

select,
input{
  background:var(--cm-input);
  border:1px solid #2b4c7a;
  color:#eaf2ff;
}

.filter-bar{
  border-top:1px solid #243b63;
}

.rank-table thead{
  background:#08142c;
}

.rank-table tbody tr{
  background:#0b1833;
}

.rank-table tbody tr:hover{
  background:#132345;
}

.overall-pill{
  background:linear-gradient(180deg,#38bdf8,#22d3ee);
  color:#08142c;
  box-shadow:0 0 12px rgba(56,189,248,.5);
}

/* remove strong gold styling */
.logo-text span,
.rankings-title h2{
  color:#eaf2ff;
}


/* ── CineMetrix Header Cool Palette Refactor (v8.0.22) ─────────────────── */
.cine-header{
  background:
    radial-gradient(circle at 28% 34%, rgba(34,211,238,.26) 0%, rgba(34,211,238,.10) 12%, transparent 28%),
    radial-gradient(circle at 52% 18%, rgba(56,189,248,.10) 0%, transparent 22%),
    linear-gradient(180deg,#09162f 0%, #071127 52%, #050b18 100%);
}

.header-overlay{
  background:
    linear-gradient(115deg,transparent 0%, transparent 42%, rgba(56,189,248,.05) 48%, rgba(255,255,255,.05) 50%, rgba(56,189,248,.05) 52%, transparent 60%),
    linear-gradient(90deg,transparent 0%, rgba(11,24,51,.06) 15%, rgba(56,189,248,.08) 48%, rgba(11,24,51,.06) 85%, transparent 100%);
  animation:tsbHeaderGlow 8s ease-in-out infinite;
}

@keyframes tsbHeaderGlow{
  0%,100%{transform:translateX(-4%);opacity:.74}
  50%{transform:translateX(4%);opacity:1}
}

.generify{
  color:#8fdcff;
  letter-spacing:.2em;
}

.logo-text,
#cineLogo .logo-text{
  color:#eef6ff;
  text-shadow:0 0 18px rgba(56,189,248,.22), 0 0 34px rgba(34,211,238,.08);
}

.tagline{
  color:#e6eefc;
}

.tagline-sub,
.status-item,
.rankings-summary{
  color:#a8bdd9;
}

.i-star-dot{
  color:#dff7ff;
  text-shadow:0 0 12px rgba(56,189,248,.45);
}

.twinkle{
  background:#dff7ff;
  box-shadow:0 0 10px 2px rgba(144,220,255,.38);
}
.twinkle::after{
  background:
    linear-gradient(90deg,transparent 46%,rgba(189,239,255,.58) 50%,transparent 54%),
    linear-gradient(0deg,transparent 46%,rgba(189,239,255,.58) 50%,transparent 54%);
}

.constellation .node{
  background:#7dd3fc;
  box-shadow:0 0 10px rgba(56,189,248,.65), 0 0 18px rgba(34,211,238,.22);
}
.constellation .line{
  background:linear-gradient(90deg, rgba(56,189,248,.08), rgba(125,211,252,.58), rgba(56,189,248,.08));
  opacity:.7;
}

.legal-banner{
  background:rgba(8,20,44,.88);
  border:1px solid rgba(56,189,248,.26);
  box-shadow:0 0 0 1px rgba(10,24,51,.28) inset;
}
.legal-banner .label,
.rankings-title h2,
.spotlight-card h2,
.spotlight-card .card-title,
.spotlight .card-title,
.spotlight-title{
  color:#eaf6ff;
}

.legal-banner strong,
.spotlight-card strong{
  color:#eaf6ff;
}

.cm-card,
.rankings-card,
.spotlight-card{
  background:linear-gradient(180deg, rgba(11,24,51,.98) 0%, rgba(9,20,44,.98) 100%);
  border:1px solid rgba(56,189,248,.16);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.filter-bar,
.status-strip{
  background:#071127;
  border-color:rgba(56,189,248,.12);
}

button,
.media-btn,
.fs,
select,
input{
  background:#1a2742;
  border-color:#355278;
}

button.active,
.media-btn.active{
  background:linear-gradient(180deg,#6fd3ff 0%, #38bdf8 55%, #22d3ee 100%);
  color:#08142c;
  box-shadow:0 0 16px rgba(56,189,248,.28);
}

.cat-chip,
.toggle-pill{
  background:rgba(21,39,67,.92);
  border:1px solid rgba(56,189,248,.24);
  color:#9fe2b8;
}
.cat-chip.active,
.toggle-pill.active{
  background:rgba(14,64,75,.54);
  border-color:rgba(34,197,94,.38);
  color:#86efac;
}

.rank-table thead th{
  color:#dcefff;
  background:#071127;
  border-bottom:1px solid rgba(56,189,248,.12);
}

.rank-table tbody tr{
  background:#0b1833;
}
.rank-table tbody tr:hover{
  background:#122243;
}

.overall-pill,
[class*="overall-pill"]{
  background:linear-gradient(180deg,#6fd3ff 0%, #38bdf8 55%, #22d3ee 100%);
  color:#08142c;
  box-shadow:0 0 14px rgba(56,189,248,.32);
}


/* ── Head-to-Head Differential Chart (v8.0.24) ─────────────────────────── */
.compare-diff-wrap{
  grid-column:1/-1;
  padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02));
  border:1px solid rgba(56,189,248,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.compare-diff-head{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.compare-side-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:#e6f4ff;
  font-weight:700;
  font-size:12px;
  min-width:0;
}
.compare-side-label.right{
  justify-content:flex-end;
  text-align:right;
}
.compare-vs{
  color:#8fb7d8;
  font-family:'Courier New',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.compare-diff-chart{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.compare-diff-row{
  display:grid;
  grid-template-columns:84px minmax(0,1fr) 66px;
  align-items:center;
  gap:10px;
}
.compare-diff-metric{
  color:#dbeafe;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
}
.compare-diff-track{
  position:relative;
  height:18px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.05),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.compare-diff-axis{
  position:absolute;
  top:-1px;
  bottom:-1px;
  left:50%;
  width:1px;
  background:rgba(191,219,254,.42);
  box-shadow:0 0 8px rgba(56,189,248,.22);
}
.compare-diff-bar{
  position:absolute;
  top:2px;
  bottom:2px;
  border-radius:999px;
  transition:width .42s ease;
}
.compare-diff-bar.left{
  right:50%;
  background:linear-gradient(90deg,rgba(111,211,255,.18),rgba(56,189,248,.88));
  box-shadow:0 0 10px rgba(56,189,248,.25);
}
.compare-diff-bar.right{
  left:50%;
  background:linear-gradient(90deg,rgba(34,211,238,.9),rgba(111,211,255,.24));
  box-shadow:0 0 10px rgba(34,211,238,.24);
}
.compare-diff-label{
  color:#c8ddf3;
  font-family:'Courier New',monospace;
  font-size:11px;
  text-align:right;
  white-space:nowrap;
}
.compare-diff-label.tie{ color:#8fb7d8; }




/* ═══════════════════════════════════════════════════════════════════════════
   CustomSelect — replaces native Android/iOS spinners
   Native <select> stays hidden in DOM for full JS compatibility.
   Desktop: display:contents wrappers — completely invisible, zero impact.
   Mobile:  styled dropdown panels with keyboard search for actor lists.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide native selects that have been enhanced — off-screen, NOT display:none
   display:none breaks .value reads and Android still intercepts touch.
   position:absolute + clip keeps it fully inert and invisible. */
select.cs-enhanced{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  -webkit-appearance:none;
  appearance:none;
}

/* Wrappers transparent on desktop */
.cs-wrap{position:relative;display:inline-flex;flex-direction:column}

/* Trigger button */
.cs-trigger{
  display:flex;align-items:center;justify-content:space-between;
  gap:6px;cursor:pointer;user-select:none;
  background:#0e1731;border:1px solid rgba(255,255,255,.12);
  border-radius:8px;color:#e8edf8;padding:0 10px;height:32px;
  font-size:12px;transition:border-color .15s,background .15s;
  white-space:nowrap;overflow:hidden;width:100%;
}
.cs-trigger:hover{border-color:rgba(255,215,0,.3)}
.cs-trigger.cs-open{border-color:rgba(255,215,0,.5);background:#131f42}
.cs-trigger-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-arrow{
  flex-shrink:0;width:10px;height:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;transition:transform .15s;
}
.cs-trigger.cs-open .cs-arrow{transform:rotate(180deg)}

/* Dropdown panel — fixed position escapes overflow:hidden parent cards */
.cs-panel{
  position:fixed;z-index:10000;
  background:#0d1630;border:1px solid rgba(255,215,0,.2);
  border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.5);
  overflow:hidden;display:none;flex-direction:column;min-width:160px;
}
.cs-panel.cs-panel-open{display:flex}

/* Search input — Tier 2 only */
.cs-search-wrap{padding:8px 10px 6px;border-bottom:1px solid rgba(255,255,255,.12);background:#0d1630;position:sticky;top:0;z-index:1}
.cs-search{
  width:100%;box-sizing:border-box;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:6px;
  color:#e8edf8;font-size:12px;padding:6px 10px;outline:none;
}
.cs-search:focus{border-color:rgba(255,215,0,.4)}
.cs-search::placeholder{color:rgba(148,163,184,.5)}

/* Options list */
.cs-list{overflow-y:auto;max-height:260px;min-height:40px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cs-option{
  padding:9px 12px;font-size:12px;color:#cbd5e1;cursor:pointer;
  transition:background .1s,color .1s;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.cs-option:hover{background:rgba(255,215,0,.08);color:#fff3b0}
.cs-option.cs-selected{background:rgba(255,215,0,.12);color:#fff3b0;font-weight:600}
.cs-option.cs-hidden{display:none}
.cs-no-results{padding:10px 12px;font-size:11px;color:rgba(148,163,184,.5);text-align:center;font-style:italic}

/* Mobile bottom sheet for searchable selects */

@keyframes cs-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* Size helpers */
.cs-wrap.cs-fs{width:100%}
.cs-wrap.cs-compare{min-width:140px;flex:1}
.cs-wrap.cs-compare .cs-panel{min-width:220px}
.cs-wrap.cs-pool .cs-trigger{height:28px;font-size:11px}

/* Compare search inputs — sit above the dropdown trigger */

.compare-search-input{
  width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  color:#e8edf8;font-size:12px;
  padding:6px 10px;outline:none;height:32px;
}
.compare-search-input:focus{border-color:rgba(255,215,0,.4)}
.compare-search-input::placeholder{color:rgba(148,163,184,.5)}
.compare-selects .cs-wrap{min-width:0;width:100%;flex:unset}

/* ── Mobile (≤700px) ──────────────────────────────────────────────────────── */
@media(max-width:700px){
  /* Mobile comet: 390px wide, 80px header — scaled path stays within bounds */
  .comet-wrap{
    animation:cometFlyMobile 16s linear infinite;
    bottom:10%;left:0px;
  }
  .comet-core{ width:18px; height:18px; }
  .comet-tail-primary{ width:160px; height:7px; }
  .comet-tail-secondary{ width:80px; height:3px; }
  .comet-halo{ width:36px; height:36px; }
  @keyframes cometFlyMobile{
    0%   {transform:translate3d(-80px, 60px,0) scale(1.00); opacity:0}
    6%   {transform:translate3d(-30px, 40px,0) scale(1.00); opacity:1}
    20%  {transform:translate3d( 60px, 10px,0) scale(1.00); opacity:1}
    35%  {transform:translate3d(160px,-15px,0) scale(1.00); opacity:1}
    50%  {transform:translate3d(260px,-32px,0) scale(1.00); opacity:.95}
    63%  {transform:translate3d(350px,-46px,0) scale(0.65); opacity:.75}
    74%  {transform:translate3d(430px,-57px,0) scale(0.38); opacity:.40}
    82%  {transform:translate3d(490px,-65px,0) scale(0.22); opacity:.15}
    87%  {transform:translate3d(530px,-70px,0) scale(0.14); opacity:0}
    100% {transform:translate3d(-80px, 60px,0) scale(1.00); opacity:0}
  }
  /* Mobile starfield: hide alternate tiny stars + all large stars for GPU perf */
  .sf-star.ss2,.sf-star.ss4,.sf-star.ss6,.sf-star.ss8,
  .sf-star.ss10,.sf-star.ss12,.sf-star.ss14,.sf-star.ss16,.sf-star.ss18,.sf-star.ss20,
  .sf-star.sl1,.sf-star.sl2,.sf-star.sl3,.sf-star.sl4,.sf-star.sl5,.sf-star.sl6{ display:none; }
  /* Double the mobile fixed header height */
  .cine-header.collapsed{
    min-height:120px;
    max-height:120px;
    padding:10px 20px;
  }
  /* Wolf logo: 56px → 112px (100% larger), recentre */
  .cine-header.collapsed .wolf-logo-wrap{
    width:112px;
    height:112px;
    margin-left:-20px;
    margin-right:8px;
  }
  /* Star tail: 120px → 200px */
  .cine-header.collapsed .star-tail{ width:200px; }
  /* Logo text size up */
  .cine-header.collapsed #cineLogo{ font-size:2rem; gap:10px; }
html,body{overflow-x:hidden}
  body{padding-top:calc(120px + env(safe-area-inset-top, 0px))}

  /* ── Legal: hide banner at top + footer, show legal-card with banner styling ── */
  .legal-banner{display:none}
  footer{display:none}
  .special-credit{display:none}
  .legal-card{
    display:block;
    background:rgba(255,215,0,.05);
    border:1px solid rgba(255,215,0,.2);
    border-left:4px solid var(--gold);
    border-radius:10px;
    padding:10px 16px;
    margin-top:14px;
  }
  .legal-card h3{
    color:var(--gold);
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:4px;
    font-family:inherit;
    display:block;
  }
  .legal-card p{
    color:var(--muted);
    font-size:10px;
    line-height:1.6;
  }

  /* ── Media switch: full width, equal buttons, fixed height ── */
  .filter-row:has(.fs) .media-switch{
    flex:0 0 100%;
    width:100%;
    display:flex;
    margin-bottom:6px;
  }
  .media-switch .media-btn{
    flex:1;
    height:32px;
    min-height:32px;
    max-height:32px;
    padding:0;
    line-height:32px;
    font-size:12px;
    text-align:center;
    white-space:nowrap;
  }

  /* Mobile header: permanently compact, fixed, wolf left + title inline */
  .cine-header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    height:calc(120px + env(safe-area-inset-top, 0px));
    min-height:calc(120px + env(safe-area-inset-top, 0px));
    max-height:calc(120px + env(safe-area-inset-top, 0px));
    padding:calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
    box-sizing:border-box;
    border-bottom:1px solid rgba(255,255,255,.08);
    overflow:hidden;
  }
  /* Collapse class has no effect on mobile — header stays compact */
  .cine-header.collapsed{
    height:calc(120px + env(safe-area-inset-top, 0px));
    min-height:calc(120px + env(safe-area-inset-top, 0px));
    max-height:calc(120px + env(safe-area-inset-top, 0px));
    padding:calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  }
  /* Hide taglines and decorative elements */
  .cine-header .generify,
  .cine-header .tagline,
  .cine-header .tagline-sub,
  .cine-header .constellation{
    display:none;
  }
  .cine-header .star-sweep{opacity:.6}
  .cine-header .header-overlay{opacity:.65}
  /* Brand: row, left-aligned, vertically centred */
  .cine-header .brand{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    height:100%;
    gap:0;
    padding-left:0;
  }
  /* Logo: wolf left, title inline beside it */
  #cineLogo{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    font-size:1.1rem;
    line-height:1;
    transform:none;
    white-space:nowrap;
    text-align:left;
  }
  .wolf-logo-wrap{
    flex-shrink:0;
    width:34px;
    height:34px;
  }
  .wolf-logo-wrap img{
    width:34px;
    height:34px;
    object-fit:contain;
  }

  .h1{top:8px;left:15px}
  .h2{top:15px;left:8px}
  .h3{top:15px;right:8px}
  .h4{bottom:8px;left:15px}

  .main-grid{
    grid-template-columns:1fr;
    height:auto;
    gap:12px;
  }

  .rankings-card{
    order:1;
    overflow:visible;
    min-height:auto;
  }
  .spotlight-card{
    display:none;
  }

  .table-container,
  .table-scroll{
    overflow:visible;
    min-height:auto;
    max-height:none;
    height:auto;
  }
  .more-indicator,
  .spotlight-more{
    display:none;
  }

  /* ── Mobile pagination bar ── */
  .mob-pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:7px 10px;
    background:rgba(255,255,255,.03);
    border-top:1px solid rgba(255,255,255,.08);
    border-radius:0 0 10px 10px;
    gap:8px;
  }
  .mob-pool-select{
    appearance:none;
    background:#0e1731;
    border:1px solid rgba(255,255,255,.2);
    color:#fff3b0;
    border-radius:6px;
    padding:5px 10px;
    font-size:12px;
    cursor:pointer;
    flex-shrink:0;
    height:30px;
  }
  .mob-pag-controls{
    display:flex;
    align-items:center;
    gap:4px;
    flex:1;
    justify-content:flex-end;
  }
  .mob-pag-btn{
    background:#0e1731;
    border:1px solid rgba(255,255,255,.15);
    color:#fff3b0;
    border-radius:6px;
    padding:0 8px;
    font-size:14px;
    cursor:pointer;
    height:30px;
    min-width:30px;
    text-align:center;
    line-height:30px;
    transition:background .15s;
    flex-shrink:0;
  }
  .mob-pag-btn:disabled{
    color:rgba(255,255,255,.2);
    border-color:rgba(255,255,255,.06);
    cursor:default;
    background:#0a1128;
  }
  .mob-pag-info{
    color:var(--muted-2);
    font-size:10px;
    font-family:'Courier New',monospace;
    text-align:center;
    padding:0 4px;
    white-space:nowrap;
  }
  .mob-pag-info strong{
    color:#fff3b0;
  }

  .rank-table{
    width:100%;
    display:block;
  }
  .rank-table thead{
    display:none;
  }
  .rank-table tbody{
    display:block;
  }
  .rank-table tr{
    display:block;
    margin:0 0 2px 0;
    padding:6px 10px;
    border-radius:8px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
  }
  .rank-table td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    padding:3px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .rank-table td:last-child{border-bottom:0}
  .rank-table td::before{
    content:attr(data-label);
    flex:0 0 42%;
    color:#fff3b0;font-size:11px;
    font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;
  }

  .rank-table td[data-label="Actor"]{
    display:block;
  }
  .rank-table td[data-label="Actor"]::before{
    display:none;
  }

  .actor-cell-sm{
    width:100%;
  }

  .filter-row,
  .compare-grid,
  .projection-header,
  .rankings-header{
    flex-direction:column;
    align-items:stretch;
  }
  .search-inline input{width:100%}
  /* Keep compare selects side by side on mobile */
  .compare-selects{flex-direction:row; flex-wrap:nowrap;}
  .compare-selects select{min-width:0; width:50%; flex:1;}
  .compare-selects .cs-wrap{min-width:0; flex:1;}
  .compare-selects .cs-trigger{width:100%; font-size:11px;}

  .projection-panel{
    display:none;
  }

  .modal-dialog{
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
    margin:8px auto;
    padding:18px;
  }

.modal-close{
    width:auto;
    height:auto;
    min-width:84px;
    padding:10px 18px;
    border-radius:999px;
    background:#b91c1c;
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    font-size:.95rem;
    font-weight:700;
    line-height:1;
    top:12px;
    right:12px;
  }

  .rank-table td[data-label="Overall"],
  .rank-table td[data-label="Breakout"],
  .rank-table td[data-label="Awards"],
  .rank-table td[data-label="Rating"],
  .rank-table td[data-label="Box Office"],
  .rank-table td[data-label="Score"],
  .rank-table td[data-label="Matching Credits"],
  .rank-table td[data-label="Total Credits"],
  .rank-table td[data-label="Career Span"],
  .rank-table td[data-label="Velocity"]{
    display:none;
  }

  .actor-row-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    width:100%;
  }

  .actor-main-block{
    min-width:0;
    flex:1 1 auto;
    width:100%;
  }

  .overall-inline{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,215,0,.12);
    border:1px solid rgba(255,215,0,.18);
    color:#fff1a8;
    font-weight:700;
    white-space:nowrap;
    margin-left:8px;
  }

  .score-details-row{
    display:flex;
    justify-content:flex-end;
    margin-top:8px;
  }

  .score-details-btn{
    border-radius:999px;
    padding:8px 12px;
    border:1px solid rgba(255,215,0,.18);
    background:#0f1833;
    color:#fff6c8;
    font-weight:700;
    cursor:pointer;
  }

.modal-close{
    width:auto;
    height:auto;
    min-width:84px;
    padding:10px 18px;
    border-radius:999px;
    background:#b91c1c;
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    font-size:.95rem;
    font-weight:700;
    line-height:1;
    top:12px;
    right:12px;
  }

  .filters-grid.mobile-pill-row,
  .mobile-pill-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .mobile-pill-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:38px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    padding:8px 10px;
    font-size:.82rem;
    font-weight:700;
    text-align:center;
    cursor:pointer;
    background:#374151;
    color:#d1d5db;
    user-select:none;
  }
  .mobile-pill-toggle.is-on{
    background:#15803d;
    color:#fff;
    border-color:rgba(255,255,255,.18);
  }

  .switch,
  .slider{
    display:none;
  }

  .category-checks{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
  }
  .category-checks label{
    width:100%;
    justify-content:center;
    text-align:center;
    min-height:40px;
    border-radius:999px;
    padding:8px 10px;
    background:#374151;
    color:#d1d5db;
  }
  .category-checks label.checked{
    background:#15803d;
    color:#fff;
  }
  .category-checks input{
    display:none;
  }

  .rank-table td[data-label="Open"],
  .rank-table td[data-label="Details"],
  .rank-table td[data-label="Overall"],
  .rank-table td[data-label="Breakout"],
  .rank-table td[data-label="Awards"],
  .rank-table td[data-label="Rating"],
  .rank-table td[data-label="Box Office"],
  .rank-table td[data-label="Score"],
  .rank-table td[data-label="Matching Credits"],
  .rank-table td[data-label="Total Credits"],
  .rank-table td[data-label="Career Span"],
  .rank-table td[data-label="Velocity"]{
    display:none;
  }

  .score-details-row{
    display:none;
  }

  .actor-main-block{
    min-width:0;
    flex:1 1 auto;
    width:100%;
  }

  .actor-row-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
  }

  .overall-inline{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,215,0,.12);
    border:1px solid rgba(255,215,0,.18);
    color:#fff1a8;
    font-weight:700;
    white-space:nowrap;
    margin-left:8px;
  }

  .spotlight-inline{
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    margin-left:auto;
    color:#cbd5e1;
    font-size:.78rem;
    font-weight:700;
    white-space:nowrap;
  }

  .score-details-btn{
    border-radius:999px;
    padding:8px 12px;
    border:1px solid rgba(255,215,0,.18);
    background:#0f1833;
    color:#fff6c8;
    font-weight:700;
    cursor:pointer;
  }

.modal-close{
    width:auto;
    height:auto;
    min-width:84px;
    padding:10px 18px;
    border-radius:999px;
    background:#b91c1c;
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    font-size:.95rem;
    font-weight:700;
    line-height:1;
    top:12px;
    right:12px;
  }

  /* compact pills in one/two rows */
  .filter-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:flex-start;
  }
  .filter-row > .toggle-pill,
  .filter-row > .cat-chip{
    flex:0 0 calc(33.333% - 6px);
    width:calc(33.333% - 6px);
    max-width:calc(33.333% - 6px);
    height:28px;
    min-height:unset;
    padding:0 8px;
    border-radius:999px;
    aspect-ratio:unset;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    font-size:.72rem;
    line-height:28px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    align-self:auto;
  }
  /* chip rows must be row direction, not column */
  .filter-row:has(.cat-chip),
  .filter-row:has(.toggle-pill){
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
  }
  /* selects filter row — compact two-column grid */
  .filter-row:has(.fs){
    flex-direction:row;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:6px;
  }
  .filter-row:has(.fs) .fs-label{
    display:none;
  }
  /* Mobile: mob-select-wrap default — 50% pairs */
  .mob-select-wrap{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:0 0 calc(50% - 4px);
    width:calc(50% - 4px);
  }
  .mob-select-label{
    display:block;
    font-size:9px;
    color:var(--muted-2);
    letter-spacing:.05em;
    text-transform:uppercase;
    padding-left:2px;
  }
  .mob-select-wrap .fs{
    flex:unset;
    width:100%;
    height:30px;
    font-size:.72rem;
    padding:0 24px 0 8px;
  }
  /* cs-wrap inside mob wrappers must fill their parent */
  .mob-select-wrap .cs-wrap{
    width:100%;
  }
  .mob-select-wrap .cs-trigger{
    width:100%;
    height:30px;
    font-size:.72rem;
  }
  /* Sort Ranking — full width, centred label */
  .mob-sort-wrap{
    flex:0 0 100%;
    width:100%;
  }
  .mob-sort-wrap .mob-select-label{
    text-align:center;
    padding-left:0;
    font-size:10px;
    font-weight:700;
    color:#e2e8f0;
    letter-spacing:.08em;
  }
  /* Status + Gender side by side row */
  .mob-status-gender-row{
    display:flex;
    flex-direction:row;
    gap:6px;
    flex:0 0 100%;
    width:100%;
  }
  .mob-status-wrap,
  .mob-gender-wrap{
    flex:1;
    width:50%;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  /* Mobile: year-range-wrap = Date Range header + two labelled columns */
  .year-range-wrap {
    flex-basis:100%;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    gap:2px 6px;
    align-items:center;
  }
  .year-range-title {
    display:block;
    grid-column:1 / -1;
    grid-row:1;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--muted-2);
    padding-left:2px;
    margin-bottom:1px;
  }
  .year-from-label {
    grid-column:1; grid-row:2;
    display:block;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#e2e8f0;
    padding-left:2px;
  }
  .year-to-label {
    grid-column:2; grid-row:2;
    display:block;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#e2e8f0;
    padding-left:2px;
  }
  .year-range-wrap #yearStartFilter {
    grid-column:1; grid-row:3;
    width:100%; height:30px;
    font-size:.72rem; padding:0 24px 0 8px;
  }
  .year-range-wrap #yearEndFilter {
    grid-column:2; grid-row:3;
    width:100%; height:30px;
    font-size:.72rem; padding:0 24px 0 8px;
  }
  .filter-row:has(.fs) .icon-btn{
    flex:1;
    width:auto;
    min-width:0;
    height:34px;
    border-radius:8px;
    padding:0 10px;
    gap:5px;
    font-size:.72rem;
  }
  .icon-btn-label{
    display:inline;
    font-size:.7rem;
    white-space:nowrap;
  }
  .icon-btn-icon{ font-size:13px; }
  .mob-btn-row{
    display:flex;
    flex-direction:row;
    gap:6px;
    flex:0 0 100%;
    width:100%;
  }
  .filter-row:has(.fs) .media-switch{
    flex:0 0 100%;
    width:100%;
    margin-bottom:2px;
  }
  /* Media row (filter-row-media) — full width equal buttons on mobile */
  .filter-row-media{
    width:100%;
  }
  .filter-row-media .media-switch{
    display:flex;
    width:100%;
    flex:1;
  }
  .filter-row-media .media-btn{
    flex:1;
    height:36px;
    font-size:12px;
    text-align:center;
    padding:0;
    white-space:nowrap;
  }
  .filter-row:has(.fs) .mobile-filter-divider{
    display:none;
  }
  .filter-row > .toggle-pill{
    background:#374151;
    color:#9ca3af;
    border-color:rgba(255,255,255,.12);
  }
  .filter-row > .toggle-pill.active{
    background:rgba(34,197,94,.15);
    color:#4ade80;
    border-color:rgba(34,197,94,.4);
  }
  .filter-row > .toggle-pill .pip{
    display:none;
  }

  .mobile-filter-divider{
    display:none;
  }

  .filter-row > .cat-chip{
    background:#374151;
    color:#9ca3af;
    border-color:rgba(255,255,255,.12);
  }
  .filter-row > .cat-chip.active{
    background:rgba(34,197,94,.15);
    color:#4ade80;
    border-color:rgba(34,197,94,.4);
  }

  /* compact actor cards */
  .rank-table td[data-label="Overall"],
  .rank-table td[data-label="Velocity"],
  .rank-table td[data-label="Breakout"],
  .rank-table td[data-label="Awards"],
  .rank-table td[data-label="Box Office"],
  .rank-table td[data-label="Details"],
  .rank-table td[data-label="Rank"]{
    display:none;
  }

  .actor-main-block{
    display:block;
    min-width:0;
    flex:1 1 auto;
    width:100%;
  }

  .rank-summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    margin-bottom:8px;
    color:#fff3b0;
    font-size:.74rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  .actor-row-top{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
  }
  .actor-row-top > div:first-child{
    min-width:0;
    flex:1 1 auto;
  }

  .spotlight-inline{
    display:none;
  }
  .mob-action-btns{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-left:auto;
    flex-shrink:0;
  }
  .mob-act-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:14px;
    cursor:pointer;
    font-size:10px;
    font-weight:500;
    letter-spacing:0.04em;
    color:#cbd5e1;
    width:auto;
    height:auto;
    padding:5px 12px;
    line-height:1.4;
    flex-shrink:0;
    white-space:nowrap;
  }
  .mob-act-btn:active{
    background:rgba(255,215,0,.15);
    border-color:rgba(255,215,0,.3);
  }
  .mob-proj-btn{
    background:rgba(201,168,76,0.14);
    border-color:rgba(201,168,76,0.45);
    color:#c9a84c;
  }
  .mob-spotlight-btn{
    background:rgba(201,168,76,0.06);
    border-color:rgba(201,168,76,0.22);
    color:rgba(201,168,76,0.65);
  }

  /* ── Active media button green indicator ── */
  .media-switch{overflow:visible}
  .media-btn.active,
  .media-btn.active-both,
  .media-btn.active-tv{
    background:rgba(255,255,255,.08);
    color:#e8edf8;
    box-shadow:inset 0 -3px 0 #22c55e;
  }
  .media-btn:not(.active):not(.active-both):not(.active-tv){
    background:#0e1731;
    color:var(--muted-2);
    box-shadow:none;
  }

  /* no extra score pill or extra button line on mobile */
  .overall-inline,
  .score-details-row,
  .score-details-btn{
    display:none;
  }

.compare-diff-row{
    grid-template-columns:70px minmax(0,1fr) 54px;
    gap:8px;
  }
  .compare-side-label{
    font-size:11px;
  }
  .compare-diff-metric,
  .compare-diff-label{
    font-size:10px;
  }

.cs-option{padding:14px 16px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.04)}
  .cs-option:last-child{border-bottom:none}
  .cs-search{font-size:15px;padding:10px 14px;height:44px;border-radius:10px}
  .cs-search-wrap{padding:12px 12px 8px}
  .cs-searchable .cs-panel{
    position:fixed;top:auto;bottom:0;
    left:0;right:0;border-radius:20px 20px 0 0;
    border-bottom:none;max-height:50vh;animation:cs-slide-up .2s ease-out;
    transition:max-height .15s ease;
  }
  .cs-searchable .cs-panel::before{
    content:'';display:block;width:40px;height:4px;border-radius:2px;
    background:rgba(255,255,255,.2);margin:10px auto 4px;
  }
  .cs-searchable .cs-list{max-height:calc(50vh - 90px);min-height:80px}
  .cs-panel-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,.6);z-index:9999;
  }
  .cs-panel-overlay.cs-overlay-open{display:block}

}

/* ── CineMetrix Report buttons ───────────────────────────────────────────────── */

/* Bold front-page button on table row */
.btn-report {
  background: linear-gradient(135deg, rgba(232,23,58,0.15), rgba(232,23,58,0.08));
  border: 1px solid rgba(232,23,58,0.45);
  color: #e8173a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
}
.btn-report:hover {
  background: rgba(232,23,58,0.22);
  border-color: rgba(232,23,58,0.7);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(232,23,58,0.2);
}

/* Full-width spotlight button */
.cinemetrix-report-btn {
  width: 100%;
  padding: 11px 16px;
  background: linear-gradient(135deg, rgba(232,23,58,0.18), rgba(232,23,58,0.08));
  border: 1.5px solid rgba(232,23,58,0.5);
  color: #ff4d6d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  display: block;
}
.cinemetrix-report-btn:hover {
  background: linear-gradient(135deg, rgba(232,23,58,0.28), rgba(232,23,58,0.14));
  border-color: rgba(232,23,58,0.8);
  box-shadow: 0 4px 16px rgba(232,23,58,0.25);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   CINEMETRIX REPORT — Magazine Modal (v9.1.7)
   Dark two-column editorial layout matching reference design
═══════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.mag-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.82);z-index:900;
  backdrop-filter:blur(6px);
  pointer-events:none;
}
.mag-overlay.visible{display:block;}

/* ── Modal shell — full screen scroll ── */
.mag-modal{
  display:none;position:fixed;inset:0;z-index:901;
  overflow-y:auto;background:#0b0f1a;
}
/* When mag modal is open, ensure full viewport */
body.mag-open .cine-header{ display:none !important; min-height:0 !important; }
body.mag-open{ padding-top:0 !important; }
.mag-modal.visible{display:block;}

/* ── Close button — fixed, always on top ── */
.mag-close{
  position:fixed;top:20px;right:20px;z-index:9999;
  display:none;
  background:#e8173a;
  border:none;
  color:#fff;
  border-radius:24px;
  font-size:12px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:10px 22px;
  cursor:pointer;
  align-items:center;gap:6px;
  transition:all 0.2s;
  box-shadow:0 4px 20px rgba(232,23,58,0.5);
  font-family:'DM Sans',system-ui,sans-serif;
  white-space:nowrap;
}
.mag-close:hover{
  background:#c01230;
  transform:translateY(-1px);
  box-shadow:0 6px 28px rgba(232,23,58,0.65);
}

/* ── Report page wrapper ── */
.rpt-page{
  max-width:1080px;margin:0 auto;
  padding:24px 24px 60px;
  font-family:'DM Sans',system-ui,sans-serif;
  color:#f0ece3;
}

/* ── Masthead ── */
.rpt-masthead{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:14px;margin-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.rpt-masthead-logo{
  font-size:10px;font-weight:600;letter-spacing:0.2em;
  text-transform:uppercase;color:#c9a84c;
  font-family:'DM Mono',monospace;
}
.rpt-masthead-tag{
  font-size:9px;letter-spacing:0.12em;text-transform:uppercase;
  color:#4a5568;font-family:'DM Mono',monospace;
}

/* ── Two-column grid ── */
.rpt-grid{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:18px;align-items:start;
}

/* ── Left panels ── */
.rpt-left{display:flex;flex-direction:column;gap:16px;}

.rpt-hero-panel{
  position:relative;min-height:500px;
  background:#111827;border:1px solid rgba(255,255,255,0.07);
  border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.rpt-hero-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center center;
  opacity:0.85;display:block;
  z-index:1;
  background:#0b0f1a;
}
.rpt-hero-avatar{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#1e3a5f,#0a1a2e);
  display:flex;align-items:center;justify-content:center;
  font-size:72px;font-weight:800;color:rgba(201,168,76,0.3);
  font-family:'Georgia',serif;
  z-index:0;
}
.rpt-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(11,15,26,0) 20%,rgba(11,15,26,0.45) 55%,rgba(11,15,26,0.92) 100%);
  z-index:2;
}
.rpt-hero-content{position:relative;z-index:3;padding:16px 22px 20px;}
.rpt-profile-label{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(11,15,26,0.65);border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;padding:5px 14px;
  font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:0.16em;text-transform:uppercase;color:#8a9ab5;
  margin-bottom:18px;backdrop-filter:blur(8px);
}
.rpt-profile-label::before{
  content:'';width:14px;height:1px;background:#c9a84c;flex-shrink:0;
}
.rpt-headline{
  font-family:'Georgia',serif;
  font-size:clamp(22px,3vw,38px);
  font-weight:700;line-height:1.08;
  color:#f0ece3;letter-spacing:-0.02em;margin-bottom:10px;
}
.rpt-standfirst{
  font-size:12px;font-weight:300;line-height:1.65;
  color:#8a9ab5;max-width:460px;
}

/* Shared panel style */
.rpt-panel{
  background:#111827;border:1px solid rgba(255,255,255,0.07);
  border-radius:14px;padding:26px 24px;
}
.rpt-panel-label{
  font-family:'DM Mono',monospace;font-size:8.5px;
  font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:#c9a84c;margin-bottom:14px;
}
.rpt-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.rpt-panel-head .rpt-panel-label{margin-bottom:0;}
.rpt-inline-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(201,168,76,0.35);background:rgba(201,168,76,0.08);
  color:#f0ece3;border-radius:999px;padding:7px 12px;cursor:pointer;
  font:600 10px/1 'DM Sans',system-ui,sans-serif;letter-spacing:0.12em;text-transform:uppercase;
  white-space:nowrap;transition:all .2s ease;
}
.rpt-inline-btn:hover{background:rgba(201,168,76,0.16);border-color:rgba(201,168,76,0.55);}
.rpt-inline-btn-close{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);}
.rpt-cover{}
.rpt-cover-head{
  font-family:'Georgia',serif;
  font-size:clamp(20px,2.5vw,26px);
  font-weight:700;line-height:1.25;color:#f0ece3;margin-bottom:20px;
}
.rpt-cover-body{font-size:13.5px;font-weight:300;line-height:1.85;color:#8a9ab5;}
.rpt-cover-p{margin-bottom:0;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.rpt-cover-p:last-child{border-bottom:none;padding-bottom:0;}
.rpt-cover-p--lead{
  font-size:14.5px;line-height:1.9;color:#a0aec0;padding-top:0;
}
/* Drop cap on opening word of lead paragraph */
.rpt-cover-p--lead::first-letter{
  font-family:'Georgia',serif;
  font-size:3.4em;font-weight:700;
  color:#c9a84c;
  float:left;line-height:0.75;
  margin-right:6px;margin-top:6px;
}
.rpt-cover-insight{
  font-size:12.5px;color:#6b7a99;
  font-style:italic;
  border-top:1px solid rgba(201,168,76,0.15) !important;
  border-bottom:none !important;
  padding-top:14px !important;
  padding-bottom:0 !important;
  margin-top:4px;
}

/* Credits list */
.rpt-credit-list{list-style:none;}
.rpt-credit-item{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.05);
}
.rpt-credit-item:last-child{border-bottom:none;}
.rpt-credit-title{font-size:13px;color:#f0ece3;font-weight:400;flex:1;}
.rpt-credit-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.rpt-credit-cat{
  font-family:'DM Mono',monospace;font-size:8px;
  letter-spacing:0.08em;text-transform:uppercase;
  color:#4a5568;background:rgba(255,255,255,0.05);
  padding:2px 7px;border-radius:8px;
}
.rpt-credit-year{
  font-family:'DM Mono',monospace;font-size:11px;
  color:#c9a84c;min-width:34px;text-align:right;
}
.rpt-credits-overlay{position:fixed;inset:0;z-index:950;display:none;}
.rpt-credits-overlay.visible{display:block;}
.rpt-credits-overlay-backdrop{position:absolute;inset:0;background:rgba(3,8,18,0.78);backdrop-filter:blur(5px);}
.rpt-credits-overlay-card{
  position:relative;z-index:1;max-width:940px;max-height:min(86vh,900px);overflow:hidden;
  margin:72px auto 36px;background:#0f1623;border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,0.4);display:flex;flex-direction:column;
}
.rpt-credits-overlay-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 18px;border-bottom:1px solid rgba(255,255,255,0.07);}
.rpt-credits-overlay-eyebrow{font:500 10px/1.3 'DM Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#c9a84c;margin-bottom:10px;}
.rpt-credits-overlay-title{font-family:'Georgia',serif;font-size:clamp(22px,3vw,32px);line-height:1.14;color:#f0ece3;}
.rpt-credits-overlay-body{padding:18px 24px 24px;overflow:auto;}

/* ── Right column cards ── */
.rpt-right{display:flex;flex-direction:column;gap:12px;}

.rpt-card{
  background:#0f1623;border:1px solid rgba(255,255,255,0.07);
  border-radius:14px;padding:20px;
  transition:border-color 0.2s;
}
.rpt-card:hover{border-color:rgba(255,255,255,0.12);}
.rpt-card-outlook{
  background:rgba(201,168,76,0.04);
  border-color:rgba(201,168,76,0.15);
}
.rpt-card-label{
  font-family:'DM Mono',monospace;font-size:8.5px;
  font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:#c9a84c;margin-bottom:12px;
}
.rpt-card-subhead{
  font-family:'Georgia',serif;font-size:16px;
  font-weight:700;color:#f0ece3;margin-bottom:12px;
}

/* Pull quote */
.rpt-pullquote{
  font-family:'Georgia',serif;font-size:17px;
  font-style:italic;font-weight:700;
  line-height:1.45;color:#f0ece3;margin-bottom:10px;
}
.rpt-pullquote::before{content:'\201C';}
.rpt-pullquote::after{content:'\201D';}
.rpt-pullquote-attr{
  font-size:10px;color:#4a5568;letter-spacing:0.06em;
  font-style:normal;display:block;
}

/* Quick facts */
.rpt-facts-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;
}
.rpt-fact{display:flex;flex-direction:column;gap:4px;}
.rpt-fact-val{
  font-size:22px;font-weight:700;color:#f0ece3;
  font-family:'Georgia',serif;line-height:1;
}
.rpt-fact-key{
  font-family:'DM Mono',monospace;font-size:9px;
  font-weight:500;letter-spacing:0.1em;
  text-transform:uppercase;color:#6b7a99;
}

/* Fancy separator */
.rpt-facts-sep{
  display:flex;align-items:center;gap:8px;margin:20px 0;
}
.rpt-facts-sep-sym{
  color:rgba(201,168,76,0.45);font-size:11px;line-height:1;flex-shrink:0;
}
.rpt-facts-sep-line{
  flex:1;height:1px;
  background:linear-gradient(to right,rgba(201,168,76,0.06),rgba(201,168,76,0.28),rgba(201,168,76,0.06));
}
.rpt-facts-sep-center{
  color:rgba(201,168,76,0.6);font-size:9px;line-height:1;flex-shrink:0;
}

/* Score bars */
.rpt-score-bars{display:flex;flex-direction:column;gap:18px;}
.rpt-score-item{display:flex;flex-direction:column;gap:7px;}
.rpt-score-header{display:flex;justify-content:space-between;align-items:baseline;}
.rpt-score-label{
  font-family:'DM Mono',monospace;font-size:10px;
  letter-spacing:0.1em;text-transform:uppercase;color:#c8d3e8;
}
.rpt-score-pct{
  font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:0.06em;font-weight:600;
}
.rpt-score-pct.gold{color:#c9a84c;}
.rpt-score-pct.blue{color:#63b3ed;}
.rpt-score-pct.green{color:#6b9e78;}
.rpt-score-desc{
  font-size:11.5px;color:#8a9ab5;
  font-style:italic;font-family:'Georgia',serif;line-height:1.45;
}
.rpt-score-track{
  position:relative;height:7px;
  background:rgba(255,255,255,0.05);
  border-radius:4px;overflow:visible;
}
.rpt-score-fill{height:100%;border-radius:4px;position:relative;}
.rpt-score-fill.overall{
  background:linear-gradient(to right,rgba(201,168,76,0.2) 0%,rgba(201,168,76,0.55) 50%,rgba(201,168,76,0.95) 100%);
}
.rpt-score-fill.rating{
  background:linear-gradient(to right,rgba(99,179,237,0.15) 0%,rgba(99,179,237,0.5) 50%,rgba(99,179,237,0.95) 100%);
}
.rpt-score-fill.breakout{
  background:linear-gradient(to right,rgba(107,158,120,0.15) 0%,rgba(107,158,120,0.5) 50%,rgba(107,158,120,0.95) 100%);
}
.rpt-score-fill::after{
  content:'';position:absolute;
  right:-5px;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;
}
.rpt-score-fill.overall::after{background:#c9a84c;box-shadow:0 0 8px rgba(201,168,76,0.9);}
.rpt-score-fill.rating::after{background:#63b3ed;box-shadow:0 0 8px rgba(99,179,237,0.9);}
.rpt-score-fill.breakout::after{background:#6b9e78;box-shadow:0 0 8px rgba(107,158,120,0.9);}
.rpt-score-marker{
  position:absolute;top:-4px;width:1px;height:15px;
  background:rgba(255,255,255,0.14);z-index:2;
}
.rpt-score-marker-lbl{
  position:absolute;top:14px;
  font-family:'DM Mono',monospace;font-size:8px;
  color:rgba(255,255,255,0.25);
  transform:translateX(-50%);letter-spacing:0.04em;white-space:nowrap;
}

/* Score footer */
.rpt-score-footer{
  display:flex;align-items:center;gap:8px;margin-top:18px;
}
.rpt-score-footer-line{
  flex:1;height:1px;
  background:linear-gradient(to right,rgba(201,168,76,0.04),rgba(201,168,76,0.18),rgba(201,168,76,0.04));
}
.rpt-score-footer-text{
  font-family:'DM Mono',monospace;font-size:9px;
  color:#6b7a99;letter-spacing:0.1em;
  text-transform:uppercase;white-space:nowrap;flex-shrink:0;
}


/* Projects */
.rpt-project-item{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05);
}
.rpt-project-item:last-child{border-bottom:none;}
.rpt-project-title{font-size:12.5px;color:#f0ece3;flex:1;}
.rpt-project-role{font-size:10px;color:#4a5568;margin-left:5px;}
.rpt-project-meta{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.rpt-project-format{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:0.08em;
  color:#8a9ab5;background:rgba(255,255,255,0.05);
  padding:2px 6px;border-radius:8px;white-space:nowrap;
}
.rpt-project-status{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:0.08em;
  color:#6b9e78;background:rgba(107,158,120,0.1);
  padding:2px 6px;border-radius:8px;white-space:nowrap;
}
.rpt-project-chip{
  font-family:'DM Mono',monospace;font-size:8.5px;
  letter-spacing:0.1em;color:#c9a84c;
  background:rgba(201,168,76,0.12);
  padding:2px 8px;border-radius:10px;white-space:nowrap;
}
.rpt-project-desc{
  font-size:11px;color:#4a5568;line-height:1.5;
  margin:2px 0 6px;padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}

/* Roles */
.rpt-role-item{
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.05);
}
.rpt-role-item:last-child{border-bottom:none;}
.rpt-role-title{font-size:13px;color:#f0ece3;font-weight:400;margin-bottom:3px;}
.rpt-role-meta{display:flex;gap:8px;align-items:center;font-size:11px;color:#4a5568;}
.rpt-role-cat{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:0.08em;
  background:rgba(255,255,255,0.05);padding:1px 6px;border-radius:8px;
}

/* Awards */
.rpt-award-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,0.05);
}
.rpt-award-row:last-of-type{border-bottom:none;}
.rpt-award-name{font-size:12.5px;color:#f0ece3;}
.rpt-award-count{
  font-family:'DM Mono',monospace;font-size:13px;color:#c9a84c;font-weight:500;
}
.rpt-award-count.zero{color:#4a5568;}
.rpt-award-note{
  font-size:11.5px;color:#4a5568;margin-top:10px;
  font-style:italic;line-height:1.55;
}

/* Outlook */
.rpt-outlook-text{
  font-size:13px;font-weight:300;line-height:1.78;
  color:#8a9ab5;font-style:italic;
}
.rpt-outlook-text strong{color:#f0ece3;font-style:normal;font-weight:500;}

/* ── Footer ── */
.rpt-footer{
  margin-top:28px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.07);
  display:flex;flex-direction:column;gap:6px;
}
.rpt-footer-disclaimer{
  font-size:9.5px;color:#4a5568;letter-spacing:0.03em;line-height:1.5;
}
.rpt-footer-attr{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
.rpt-attr-item{
  font-family:'DM Mono',monospace;font-size:8.5px;
  color:#4a5568;letter-spacing:0.06em;
}
.rpt-attr-item a{color:#c9a84c;text-decoration:none;}
.rpt-attr-item a:hover{text-decoration:underline;}

/* ── Mobile ── */
@media(max-width:700px){
  .rpt-grid{grid-template-columns:1fr;}
  .rpt-hero-panel{min-height:360px;}
  .rpt-headline{font-size:22px;}
  .rpt-page{padding:16px 14px 48px;}
  .rpt-masthead{flex-direction:column;gap:4px;text-align:center;}
  .mag-close{top:12px;right:12px;}
  /* Hide desktop Report column on mobile — pills handle it */
  td[data-label="Report"], th:last-child{ display:none; }
  /* Ensure topbar close button visible on mobile */

}

/* ── 9.2.0 Updates ─────────────────────────────────────────────────────────── */

/* mob-act-btn styles in mobile media query above */

/* ── Full-screen loading state ── */
.mag-loading-screen{
  min-height:100vh;
  background:#0b0f1a;
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;
}
.mag-loading-inner{
  display:flex;flex-direction:column;
  align-items:center;gap:16px;
  max-width:360px;width:100%;text-align:center;
}
.mag-loading-logo{
  font-family:'DM Mono',monospace;
  font-size:10px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:#c9a84c;margin-bottom:4px;
}
.mag-loading-actor{
  font-family:'Georgia',serif;
  font-size:clamp(24px,5vw,36px);
  font-weight:700;color:#f0ece3;
  line-height:1.1;
}
.mag-loading-title{
  font-family:'DM Mono',monospace;
  font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:#4a5568;
}
.mag-loading-bar{
  width:100%;height:3px;
  background:rgba(255,255,255,0.08);
  border-radius:2px;overflow:visible;
  margin:4px 0;position:relative;
}
.mag-loading-fill{
  height:100%;background:#c9a84c;
  border-radius:2px;width:0%;
  animation:loadFill 14s ease-out forwards;
  position:relative;
}
.mag-loading-fill::after{
  content:'';
  position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;
  background:#c9a84c;
  animation:loadPulse 1s ease-in-out infinite;
  opacity:0;
  animation-delay:1s;
}
@keyframes loadFill{
  0%  {width:0%;}
  10% {width:25%;}
  30% {width:55%;}
  55% {width:75%;}
  75% {width:88%;}
  90% {width:92%;}
  100%{width:92%;}
}
@keyframes loadPulse{
  0%,100%{opacity:1;transform:translateY(-50%) scale(1);}
  50%{opacity:0.3;transform:translateY(-50%) scale(0.6);}
}
.mag-loading-sub{
  font-size:13px;font-weight:300;line-height:1.65;
  color:#4a5568;font-style:italic;
  min-height:20px;
}
/* loading steps removed */

/* ── Report top bar (replaces floating close button) ── */
.rpt-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;
  background:#0b0f1a;
  border-bottom:1px solid rgba(255,255,255,0.07);
  box-sizing:border-box;
}
.rpt-topbar-left{
  display:flex;align-items:center;gap:12px;
}
.rpt-topbar-logo{
  font-family:'DM Mono',monospace;
  font-size:10px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:#c9a84c;
}
.rpt-topbar-tag{
  font-family:'DM Mono',monospace;
  font-size:9px;letter-spacing:0.1em;
  text-transform:uppercase;color:#4a5568;
}
.rpt-close-btn{
  position:fixed;bottom:28px;right:20px;z-index:9999;
  background:#e8173a;border:none;
  color:#fff;border-radius:24px;
  font-size:12px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:10px 22px;cursor:pointer;
  transition:all 0.2s;white-space:nowrap;
  font-family:'DM Sans',system-ui,sans-serif;
  box-shadow:0 4px 20px rgba(232,23,58,0.45);
  display:none;
}
.rpt-close-btn:hover{
  background:#c01230;
  transform:translateY(1px);
  box-shadow:0 2px 12px rgba(232,23,58,0.6);
}
@media(max-width:700px){
  .rpt-close-btn{bottom:24px;right:16px;padding:12px 24px;font-size:13px;}
}

/* Profile label — top of hero, not bottom */
.rpt-profile-label-top{
  position:absolute;top:18px;left:18px;
  z-index:4;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(11,15,26,0.72);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;padding:5px 14px;
  font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:0.16em;text-transform:uppercase;
  color:#8a9ab5;backdrop-filter:blur(8px);
}
.rpt-profile-label-top::before{
  content:'';width:14px;height:1px;
  background:#c9a84c;flex-shrink:0;
}

/* mag-close retired — close button now in rpt-topbar */

@media(max-width:700px){
  .rpt-topbar{padding:12px 16px;}
  .rpt-topbar-tag{display:none;}
  .rpt-close-btn{padding:7px 14px;font-size:10px;}
}

/* ── The Next Act card ── */
.rpt-card-nextact{
  background:rgba(201,168,76,0.04);
  border-color:rgba(201,168,76,0.15);
}
.rpt-nextact-note{
  font-size:12.5px;font-weight:300;line-height:1.72;
  color:#8a9ab5;font-style:italic;margin-top:12px;
}
.rpt-nextact-empty{
  font-size:12px;color:#4a5568;font-style:italic;line-height:1.6;
}

/* ── Genre chips (filter row) ────────────────────────────────────────────── */
.genre-filter-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding:6px 0 2px;
}
.genre-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);background:#2a3042;
  cursor:pointer;font-size:11px;color:#8899aa;
  transition:all .15s;user-select:none;
}
.genre-chip::before{content:'';width:5px;height:5px;border-radius:50%;background:#4a5568;flex-shrink:0}
.genre-chip.active{border-color:rgba(201,168,76,.5);background:rgba(201,168,76,.12);color:#c9a84c}
.genre-chip.active::before{background:#c9a84c}

/* ── Genre stacked bar — Quick Facts ────────────────────────────────────── */
.rpt-genre-bar-wrap{
  margin:12px 0 4px;
}
.rpt-genre-bar-label{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#6b7c93;margin-bottom:6px;
}
.rpt-genre-stack{
  display:flex;height:22px;border-radius:4px;overflow:hidden;
  width:100%;gap:1px;
}
.genre-stack-seg{
  display:flex;align-items:center;justify-content:center;
  min-width:1px;transition:opacity .15s;overflow:hidden;
  cursor:default;
}
.genre-stack-seg:hover{opacity:.85;}
.genre-stack-label{
  font-size:9px;font-weight:600;color:rgba(255,255,255,.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:0 4px;letter-spacing:.03em;text-transform:uppercase;
}
.rpt-genre-legend{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;
}
.genre-legend-item{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;color:#8899aa;
}
.genre-legend-dot{
  width:8px;height:8px;border-radius:2px;flex-shrink:0;
}
.genre-legend-pct{
  color:#c9a84c;font-size:9px;
}

/* ── Genre sub-grouped credits ───────────────────────────────────────────── */
.rpt-genre-group{
  margin-bottom:10px;
}
.rpt-genre-group-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 0 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:4px;
}
.rpt-genre-group-name{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#c9a84c;font-weight:600;
}
.rpt-genre-group-count{
  font-size:10px;color:#4a5568;
  background:rgba(255,255,255,.05);
  padding:1px 6px;border-radius:10px;
}
.rpt-credit-total{
  font-size:10px;color:#4a5568;text-align:right;
  margin-top:8px;padding-top:6px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* ── Credit chips — genre + category coloured pills ─────────────────────── */
.rpt-credit-genre-chip,
.rpt-credit-cat-chip {
  display:inline-flex;align-items:center;
  padding:1px 6px;border-radius:10px;border:1px solid;
  font-size:9px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;flex-shrink:0;
}
.rpt-role-meta {
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:2px;
}
.rpt-role-meta > span:first-child {
  font-size:11px;color:#6b7c93;flex-shrink:0;
}

/* ── TMDB credit links ───────────────────────────────────────────────────── */
.rpt-credit-link {
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-color:rgba(255,255,255,.25);
  display:inline-flex;align-items:center;gap:3px;
}
.rpt-credit-link:hover {
  text-decoration-color:rgba(201,168,76,.7);
  color:#e8d49a;
}
.rpt-credit-ext {
  font-size:9px;color:#c9a84c;opacity:0.4;
  transition:opacity .15s;flex-shrink:0;
}
.rpt-credit-link:hover .rpt-credit-ext {
  opacity:1;
}
.rpt-credit-title-wrap {
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

@media(max-width:700px){
  .rpt-panel-head{align-items:stretch;flex-direction:column;}
  .rpt-inline-btn{width:100%;padding:10px 14px;font-size:10px;}
  .rpt-credits-overlay-card{margin:18px 12px 20px;max-height:calc(100vh - 38px);}
  .rpt-credits-overlay-head{padding:18px 16px 14px;flex-direction:column;align-items:stretch;}
  .rpt-credits-overlay-body{padding:14px 16px 18px;}
  .rpt-credits-overlay-title{font-size:24px;}
}


/* ── Mobile genre selector: force 4 / 4 / 2 grid ───────────────────────── */
@media(max-width:700px){
  .genre-filter-row{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px;
    align-items:stretch;
    padding:6px 0 2px;
  }
  .genre-filter-row .filter-label{
    display:none !important;
  }
  .genre-filter-row .genre-chip{
    display:flex;
    width:100%;
    min-width:0;
    max-width:none;
    height:30px;
    min-height:30px;
    padding:0 8px;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    font-size:11px;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .genre-filter-row .genre-chip::before{
    display:none;
  }
  .genre-filter-row .genre-chip:nth-of-type(9){
    grid-column:2;
  }
  .genre-filter-row .genre-chip:nth-of-type(10){
    grid-column:3;
  }
}


/* ── Magazine report mobile containment + stacking fix (10.0.27) ── */
.rpt-page,
.rpt-grid,
.rpt-left,
.rpt-right,
.rpt-panel,
.rpt-card,
.rpt-hero-panel,
.rpt-hero-content,
.rpt-cover,
.rpt-credit-item,
.rpt-credit-title,
.rpt-credit-title-wrap,
.rpt-role-meta,
.rpt-role-meta > span,
.rpt-facts-grid,
.rpt-score-bars,
.rpt-genre-bar-wrap,
.rpt-genre-legend,
.rpt-nextact-note,
.rpt-card-subhead,
.rpt-standfirst,
.rpt-headline {
  min-width:0;
  box-sizing:border-box;
}

@media(max-width:900px){
  .rpt-page{
    width:100%;
    max-width:100%;
    padding:18px 16px 56px;
    overflow-x:hidden;
  }
  .rpt-grid{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }
  .rpt-right,
  .rpt-left{
    width:100%;
    max-width:100%;
  }
  .rpt-hero-panel{
    min-height:440px;
  }
}

@media(max-width:700px){
  .mag-modal,
  .mag-modal.visible{
    width:100vw;
    max-width:100vw;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .rpt-topbar{
    width:100%;
    max-width:100%;
    padding:10px 12px;
    overflow:hidden;
  }
  .rpt-topbar-left,
  .rpt-topbar-logo,
  .rpt-topbar-tag{
    min-width:0;
  }
  .rpt-page{
    padding:14px 12px 88px;
  }
  .rpt-grid{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
  .rpt-panel,
  .rpt-card{
    padding:18px 14px;
    border-radius:12px;
  }
  .rpt-hero-panel{
    min-height:360px;
    border-radius:14px;
  }
  .rpt-hero-photo{
    object-fit:cover;
    object-position:center top;
  }
  .rpt-hero-content{
    padding:16px 14px 16px;
  }
  .rpt-profile-label-top{
    top:14px;
    left:14px;
    right:14px;
    width:auto;
    max-width:calc(100% - 28px);
  }
  .rpt-headline{
    font-size:clamp(18px,9vw,30px);
    line-height:1.04;
    margin-bottom:8px;
  }
  .rpt-standfirst,
  .rpt-cover-body,
  .rpt-nextact-note{
    font-size:12px;
    line-height:1.7;
    max-width:100%;
  }
  .rpt-cover-head{
    font-size:clamp(18px,7vw,24px);
    line-height:1.18;
  }
  .rpt-facts-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px;
  }
  .rpt-fact-val{
    font-size:18px;
  }
  .rpt-score-bars{
    gap:14px;
  }
  .rpt-credit-item{
    align-items:flex-start;
    gap:8px;
  }
  .rpt-credit-right{
    gap:6px;
    max-width:42%;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .rpt-credit-title,
  .rpt-credit-title-wrap{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .rpt-role-meta{
    gap:4px;
  }
  .rpt-genre-legend{
    gap:6px 10px;
  }
}


/* ============================================
   CineMetrix 10.0.29
   Mobile Hero Layout Fix (actual Inside Story selectors)
   ============================================ */
@media (max-width: 700px) {
  .rpt-hero-panel{
    min-height: 300px;
    max-height: 300px;
  }

  .rpt-hero-photo{
    object-fit: cover;
    object-position: center 12%;
    opacity: 0.92;
  }

  .rpt-hero-scrim{
    background: linear-gradient(
      to bottom,
      rgba(11,15,26,0.02) 0%,
      rgba(11,15,26,0.08) 48%,
      rgba(11,15,26,0.52) 76%,
      rgba(11,15,26,0.90) 100%
    );
  }

  .rpt-profile-label-top{
    top: 10px;
    left: 10px;
    right: auto;
    max-width: calc(100% - 20px);
    padding: 4px 10px;
    font-size: 8px;
    letter-spacing: 0.12em;
  }

  .rpt-hero-content{
    padding: 10px 12px 12px;
    max-width: 74%;
  }

  .rpt-headline{
    font-size: clamp(16px, 6.4vw, 22px);
    line-height: 1.02;
    margin-bottom: 6px;
    max-width: 100%;
    text-wrap: balance;
  }

  .rpt-standfirst{
    font-size: 10.5px;
    line-height: 1.35;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── Career Arc Timeline ─────────────────────────────────────────────────── */
.rpt-arc-wrap {
  margin: 24px 0 0;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 20px 24px 16px;
}
.rpt-arc-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.rpt-arc-label {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c9a84c;
  font-family: 'DM Mono', monospace;
  font-weight: 600;
}
.rpt-arc-meta {
  font-size: 10px;
  color: #4a5568;
  font-family: 'DM Mono', monospace;
}

/* Scrollable track */
.rpt-arc-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  cursor: grab;
}
.rpt-arc-scroll:active { cursor: grabbing; }

.rpt-arc-track {
  position: relative;
  height: 110px;
  min-width: 600px;
  margin: 14px 16px 32px;
}

/* The baseline */
.arc-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,.12);
}

/* Decade ticks */
.arc-decade {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.arc-decade-tick {
  position: absolute;
  top: calc(50% - 8px);
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.2);
}
.arc-decade-label {
  position: absolute;
  bottom: 0;
  font-size: 9px;
  color: #4a5568;
  font-family: 'DM Mono', monospace;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Dot wrapper */
.arc-dot-wrap {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.arc-dot {
  border-radius: 50%;
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.arc-dot-wrap:hover .arc-dot {
  transform: scale(1.5);
  box-shadow: 0 0 8px rgba(255,255,255,.3);
  z-index: 10;
}

/* Award markers above the line */
.arc-award-win,
.arc-award-nom {
  position: absolute;
  top: -28px;
  font-size: 11px;
  line-height: 1;
  transform: translateX(-50%);
  pointer-events: none;
}
.arc-award-nom {
  color: #c9a84c;
  font-size: 10px;
  top: -24px;
}

/* Credit label below dot — only for major credits */
.arc-dot-label {
  position: absolute;
  top: 20px;
  font-size: 8px;
  color: #6b7c93;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Year labels at ends */
.arc-year-label {
  position: absolute;
  bottom: -20px;
  font-size: 9px;
  color: #8899aa;
  font-family: 'DM Mono', monospace;
}
.arc-year-start { left: 0; }
.arc-year-end   { right: 0; }

/* Legend */
.rpt-arc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.05);
  align-items: flex-start;
}
.rpt-arc-legend-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
  border-right: 1px solid rgba(255,255,255,.06);
}
.rpt-arc-legend-section:last-child {
  border-right: none;
}
.rpt-arc-legend-heading {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4a5568;
  font-family: 'DM Mono', monospace;
  margin-right: 4px;
  flex-shrink: 0;
}
.rpt-arc-genre-index {
  flex: 1;
}
.arc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #8899aa;
}
.arc-legend-win { font-size: 12px; }
.arc-legend-nom { color: #c9a84c; font-size: 12px; }
.arc-legend-dot {
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* Mobile — compress min-width */
@media(max-width:700px){
  .rpt-arc-track { min-width: 480px; }
  .rpt-arc-wrap { padding: 14px 14px 12px; }
}

/* ── Career Phase Badge ──────────────────────────────────────────────────── */
.rpt-career-phase {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: 'DM Mono', monospace;
}
.phase-rising   { background: rgba(76,175,125,.2); color: #4caf7d; border: 1px solid rgba(76,175,125,.4); }
.phase-peak     { background: rgba(201,168,76,.2);  color: #c9a84c; border: 1px solid rgba(201,168,76,.4); }
.phase-established { background: rgba(107,156,212,.2); color: #6b9fd4; border: 1px solid rgba(107,156,212,.4); }
.phase-legacy   { background: rgba(139,99,139,.2);  color: #b07ab0; border: 1px solid rgba(139,99,139,.4); }

/* ── Signal Strip ────────────────────────────────────────────────────────── */
.rpt-signal-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.signal-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  font-size: 10px;
  color: #c8d4e0;
  font-family: 'DM Mono', monospace;
  white-space: nowrap;
}

/* ── Film Stills Filmstrip ───────────────────────────────────────────────── */
.rpt-stills-panel {
  padding-bottom: 8px;
}
.rpt-stills-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.rpt-stills-strip::-webkit-scrollbar { height: 4px; }
.rpt-stills-strip::-webkit-scrollbar-track { background: transparent; }
.rpt-stills-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.rpt-still-item {
  flex-shrink: 0;
  width: 220px;
  border-radius: 8px;
  overflow: hidden;
  background: #0b0f1a;
  border: 1px solid rgba(255,255,255,.07);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.rpt-still-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.rpt-still-img {
  width: 100%;
  height: 124px;
  object-fit: cover;
  display: block;
}
.rpt-still-label {
  padding: 6px 10px 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.rpt-still-title {
  font-size: 11px;
  color: #c8d4e0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.rpt-still-year {
  font-size: 10px;
  color: #4a5568;
  font-family: 'DM Mono', monospace;
  flex-shrink: 0;
}
.rpt-stills-attr {
  font-size: 9px;
  color: #3a4050;
  margin-top: 8px;
  font-style: italic;
}

/* Mobile stills */
@media(max-width:700px){
  .rpt-still-item { width: 180px; }
  .rpt-still-img  { height: 101px; }
  .rpt-signal-strip { gap: 4px; }
  .signal-chip { font-size: 9px; padding: 2px 8px; }
}

/* ── Legends Tab ─────────────────────────────────────────────────────────────── */

/* Tab switcher */
.tab-switcher {
  display: flex;
  gap: 4px;
  align-items: center;
}
.tab-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted-2);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.tab-btn.active {
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.25);
  color: #c9a84c;
}
.tab-btn:hover:not(.active) {
  color: #e0c87a;
  border-color: rgba(201,168,76,0.12);
}
.legends-tab-btn {
  color: #8a7a5a;
}
.legends-tab-btn.active {
  background: rgba(160,130,80,0.12);
  border-color: rgba(201,168,76,0.35);
  color: #d4a843;
}

/* Rankings card in legends mode */
.filter-bar.legends-mode .filter-row-media,
.filter-bar.legends-mode .mob-status-gender-row,
.filter-bar.legends-mode .toggle-pill-row,
.filter-bar.legends-mode .genre-row {
  opacity: 0.3;
  pointer-events: none;
}

/* Legends header banner */
.legends-header-banner {
  background: linear-gradient(135deg, #1a1208 0%, #0f0d08 100%);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 8px;
  color: #a08840;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  padding: 8px 14px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.legends-header-banner .lhb-icon {
  font-size: 16px;
  color: #c9a84c;
}

/* Legends table rows */
tr.legends-row {
  background: linear-gradient(90deg, rgba(160,130,60,0.04) 0%, transparent 100%);
}
tr.legends-row:hover {
  background: linear-gradient(90deg, rgba(201,168,76,0.08) 0%, rgba(201,168,76,0.02) 100%) !important;
}
tr.legends-row.active {
  background: linear-gradient(90deg, rgba(201,168,76,0.13) 0%, rgba(201,168,76,0.04) 100%) !important;
  border-left: 2px solid #c9a84c;
}

/* Legend avatar — sepia gold tone */
.legend-avatar {
  background: linear-gradient(135deg, #3d2e0e 0%, #2a1f08 100%) !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  color: #c9a84c !important;
}

/* Legacy score pill */
.score-pill-sm.legend-score {
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(160,130,60,0.08));
  border: 1px solid rgba(201,168,76,0.3);
  color: #c9a84c;
}

/* Frozen velocity indicator */
.legend-frozen {
  color: #8a7a5a;
  font-size: 11px;
  opacity: 0.7;
}

/* Legend story button */
.btn-report.legend-story-btn {
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(160,130,60,0.08));
  border-color: rgba(201,168,76,0.3);
  color: #c9a84c;
}
.btn-report.legend-story-btn:hover {
  background: linear-gradient(135deg, rgba(201,168,76,0.25), rgba(160,130,60,0.15));
  border-color: rgba(201,168,76,0.5);
}

/* Legends Inside Story — sepia header tint */
.mag-modal.legends-modal .rpt-hero-section {
  background: linear-gradient(180deg, #1a1208 0%, #0b0f1a 100%);
}
.mag-modal.legends-modal .rpt-career-phase {
  background: rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.3);
  color: #c9a84c;
}

/* Mobile legends */
@media(max-width:700px){
  .tab-btn { font-size: 12px; padding: 4px 9px; }
}

/* ── Final Act (Legends Inside Story) ───────────────────────────────────────── */
.rpt-card-finalact {
  background: linear-gradient(135deg, rgba(30,22,8,0.6) 0%, rgba(15,13,8,0.4) 100%);
  border-color: rgba(201,168,76,0.2);
}
.rpt-finalact-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.rpt-finalact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(201,168,76,0.08);
  padding-bottom: 8px;
}
.rpt-finalact-key {
  color: #8a7a5a;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rpt-finalact-val {
  color: #c9a84c;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Playfair Display', Georgia, serif;
}
.rpt-legacy-note {
  border-top: 1px solid rgba(201,168,76,0.12);
  color: #9a8a6a;
  font-style: italic;
  margin-top: 16px;
  padding-top: 14px;
}

/* ── Compare (reserved for future side-by-side layout) ──────────────────────── */