:root{
  --ink:#0e0e12; --slab:#16161c; --slab-2:#1d1d25; --slab-3:#26262f;
  --rule:#232330; --rule-lit:#35354a;
  --type:#babac4; --type-dim:#8e8e9e; --type-faint:#7a7a8e;
  --accent:#6c63ff; --accent-ink:#8e87ff; --accent-soft:#9a82fb;
  --t-stream:#4cad82; --t-free:#56a6c5; --t-ads:#bb9755;
  --t-rent:#8f88f0; --t-buy:#dd819c;
  --focus:#7d75ff;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* Shared frosted-glass material for elevated surfaces (popovers, panels,
     floating bars). Derived from the theme's own slab/ink/type tokens via
     color-mix, so it re-tints automatically under the light override
     below instead of needing its own light/dark pair. */
  --glass:color-mix(in oklab, var(--slab-2) 62%, transparent);
  --glass-strong:color-mix(in oklab, var(--ink) 76%, transparent);
  --glass-border:color-mix(in oklab, var(--type) 14%, transparent);
  --glass-blur:18px;
}
html[data-theme="light"]{
  --ink:#f4f4f8; --slab:#fbfbfd; --slab-2:#eeeef4; --slab-3:#e4e4ee;
  --rule:#e2e2ec; --rule-lit:#c8c8d8;
  --type:#3b3b4b; --type-dim:#5e5e6e; --type-faint:#6d6d7e;
  --accent:#6c63ff; --accent-ink:#8e87ff; --accent-soft:#9a82fb;
  --t-stream:#0d7855; --t-free:#0f6a8c; --t-ads:#8a5f14;
  --t-rent:#5348d6; --t-buy:#b03a60;
  --focus:#7d75ff;
  --shadow:0 1px 2px rgba(30,30,55,.04),0 10px 30px rgba(30,30,55,.07);
  --shadow-lift:0 2px 6px rgba(30,30,55,.06),0 18px 44px rgba(30,30,55,.11);
  --edge:rgba(255,255,255,.9);
  --veil-a:rgba(244,244,248,.28); --veil-b:rgba(244,244,248,.88);
  --mast:rgba(244,244,248,.86);
}
:root{
  --shadow:0 10px 28px rgba(0,0,0,.38);
  --shadow-lift:0 18px 46px rgba(0,0,0,.5);
  --edge:rgba(255,255,255,.055);
  --veil-a:rgba(14,14,18,.36); --veil-b:rgba(14,14,18,.87);
  --mast:rgba(14,14,18,.86);
  /* one soft curve everywhere — nothing in the UI turns sharply */
  --ease:cubic-bezier(.25,.6,.3,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --dur:.24s; --dur-slow:.42s;
  --r-sm:6px; --r:9px; --r-lg:13px;
}
html{color-scheme:dark;}
html[data-theme="light"]{color-scheme:light;}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--ink);color:var(--type);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}
::selection{background:var(--rule-lit);color:#fff;}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
a{color:inherit;}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:30;background:var(--mast);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--rule);}
.masthead-in{max-width:1120px;margin:0 auto;padding:13px 24px;}
.top{display:flex;align-items:center;gap:22px;}
.wordmark{font-weight:800;font-size:15px;letter-spacing:-.02em;white-space:nowrap;
  flex-shrink:0;line-height:1.1;background:none;border:none;color:inherit;
  cursor:pointer;padding:0;text-align:left;font-family:inherit;}
.wordmark b{color:var(--accent-ink);}
.wordmark span{display:block;font-family:var(--mono);font-weight:400;font-size:9.5px;
  letter-spacing:.14em;color:var(--type-faint);text-transform:uppercase;margin-top:2px;}
.seek{flex:1;display:flex;max-width:580px;margin-left:auto;position:relative;}
.seek input{flex:1;background:var(--slab);border:1px solid var(--rule);border-right:none;
  border-radius:var(--r-sm) 0 0 2px;color:var(--type);font-family:var(--sans);font-size:14px;
  padding:9px 13px;outline:none;min-width:0;}
.seek input::placeholder{color:var(--type-faint);}
.seek input:focus{border-color:var(--rule-lit);}
.seek > button{background:var(--slab-2);border:1px solid var(--rule);border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--type);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding:0 16px;cursor:pointer;white-space:nowrap;}
.seek > button:hover:not(:disabled){background:var(--rule);border-color:var(--rule-lit);}
.seek > button:disabled{opacity:.4;cursor:default;}
.slash{position:absolute;right:88px;top:50%;transform:translateY(-50%);font-family:var(--mono);
  font-size:10px;color:var(--type-faint);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:1px 5px;pointer-events:none;}
.seek input:focus ~ .slash{opacity:0;}
.top-controls{display:flex;align-items:center;gap:9px;margin-left:auto;flex-shrink:0;}
.theme-fab{width:24px;height:24px;border-radius:50%;
  border:1px solid var(--rule-lit);background:var(--slab);color:var(--type-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);}
.theme-fab:hover{color:var(--accent-ink);border-color:var(--accent-ink);transform:scale(1.06);}
.theme-fab svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}

.rail{display:flex;align-items:center;gap:7px;margin-top:11px;flex-wrap:wrap;}
.rail select,.rail input{background:var(--slab);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type);font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:6px 9px;outline:none;}
.rail select:focus,.rail input:focus{border-color:var(--rule-lit);}
.rail input{width:112px;}
.rail .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--type-faint);margin-right:2px;}
.rail .spacer{flex:1;}
.rail .txt{background:none;border:none;padding:0;cursor:pointer;font-family:var(--mono);
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--type-dim);}
.rail .txt:hover{color:var(--accent-ink);}
.rail-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;width:100%;margin-top:8px;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));padding:9px 11px;}
.rail-controls[hidden]{display:none;}

.syntax{max-width:1120px;margin:0 auto;padding:0 24px;display:none;}
.syntax.on{display:block;}
.syntax-in{border:1px solid var(--rule);border-top:none;background:var(--slab);
  padding:16px 18px;font-size:13px;line-height:1.7;}
.syntax-in h4{margin:0 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--type-faint);font-weight:500;}
.ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:7px 22px;}
.op{display:flex;gap:9px;align-items:baseline;}
.op code{font-family:var(--mono);font-size:11.5px;color:var(--accent-ink);background:var(--slab-2);
  padding:1px 6px;border-radius:var(--r-sm);white-space:nowrap;}
.op span{color:var(--type-dim);font-size:12.5px;}
.caveat{margin-top:13px;padding-top:11px;border-top:1px solid var(--rule);
  color:var(--type-faint);font-size:12px;line-height:1.65;}

/* ---------- shell ---------- */
.shell{max-width:1120px;margin:0 auto;padding:0 24px 100px;}
.trail{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--mono);
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--type-faint);
  padding:20px 0 0;min-height:44px;}
.trail button{background:none;border:none;padding:0;cursor:pointer;font:inherit;
  letter-spacing:inherit;color:var(--type-dim);text-transform:inherit;}
.trail button:hover{color:var(--accent-ink);}
.trail .sep{color:var(--rule-lit);}
.trail .here{color:var(--type);}
.note{font-size:13.5px;color:var(--type-dim);padding:10px 0;line-height:1.6;min-height:20px;}
.note.bad{color:var(--t-buy);}

.strip{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule);
  padding-bottom:9px;margin:22px 0 16px;}
.strip h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em;}
.strip .tally{font-family:var(--mono);font-size:11px;color:var(--type-faint);
  letter-spacing:.06em;margin-left:auto;}

/* ---------- opening state ---------- */
.opening{padding:52px 0 0;max-width:640px;}
.opening h3{font-size:27px;font-weight:800;letter-spacing:-.03em;margin:0 0 10px;line-height:1.2;}
.opening p{color:var(--type-dim);font-size:14.5px;line-height:1.7;margin:0 0 24px;}
.seeds{display:flex;flex-wrap:wrap;gap:7px;}
.seed{background:var(--slab);border:1px solid var(--rule);border-radius:var(--r-sm);color:var(--type-dim);
  font-family:var(--mono);font-size:11.5px;padding:6px 11px;cursor:pointer;letter-spacing:.02em;}
.seed:hover{border-color:var(--rule-lit);color:var(--type);background:var(--slab-2);}

/* ---------- rows ---------- */
.rows{display:flex;flex-direction:column;}
.row{display:flex;gap:15px;align-items:center;padding:11px 12px 11px 0;
  border-bottom:1px solid var(--rule);background:none;border-left:none;border-right:none;
  border-top:none;width:100%;text-align:left;cursor:pointer;color:inherit;
  font-family:inherit;font-size:inherit;transition:background var(--dur) var(--ease),padding-left var(--dur) var(--ease);}
.row:hover{background:var(--slab);padding-left:12px;}
.row .art{width:42px;height:63px;flex-shrink:0;border-radius:var(--r-sm);object-fit:cover;background:var(--slab-2);}
.row .face{width:42px;height:42px;border-radius:50%;flex-shrink:0;object-fit:cover;background:var(--slab-2);}
.row .glyph{width:42px;height:42px;border-radius:var(--r-sm);flex-shrink:0;background:var(--slab-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:15px;color:var(--type-faint);}
.row .rank{width:26px;flex-shrink:0;text-align:right;font-family:var(--mono);
  font-size:13px;color:var(--type-faint);}
.row .nm{font-weight:600;font-size:15px;letter-spacing:-.01em;}
.row .sub{font-family:var(--mono);font-size:11px;color:var(--type-faint);margin-top:3px;letter-spacing:.03em;}
.kind{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--type-dim);border:1px solid var(--rule);border-radius:var(--r-sm);padding:2px 7px;
  margin-left:auto;flex-shrink:0;}
/* Bigger row variant (charts) — larger poster, room for a synopsis line,
   so the card reads at a glance instead of just a title/year strip. */
.row.big{align-items:flex-start;padding-top:14px;padding-bottom:14px;gap:16px;}
.row.big .art{width:64px;height:96px;}
.row.big .rank{padding-top:4px;font-size:15px;}
.row.big .kind{margin-top:4px;}
.row.big .nm{font-size:16px;}
.row .overview{font-size:12.5px;line-height:1.55;color:var(--type-dim);margin-top:6px;
  max-width:640px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ---------- title hero ---------- */
.hero{position:relative;margin:14px -24px 0;padding:0 24px;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 18%;
  opacity:.26;filter:saturate(.7);}
html[data-theme="light"] .hero-bg{opacity:.13;filter:saturate(.55);}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--veil-a) 0%,var(--veil-b) 58%,var(--ink) 100%);}
.hero-in{position:relative;display:flex;gap:24px;padding:30px 0 26px;align-items:flex-start;}
.hero-poster{width:132px;border-radius:var(--r);flex-shrink:0;box-shadow:var(--shadow);
  background:var(--slab-2);}
.hero-poster-wrap{position:relative;flex-shrink:0;display:inline-block;line-height:0;}
/* Glassy pill, same idiom as the in-player settings control (.player-fab):
   translucent dark chip + blur regardless of theme, since it sits over
   poster art of unpredictable brightness — a theme-toned background
   wouldn't have reliable contrast either way. Plain text, no icon — the
   text color itself carries the ott/cinema read. Bright, fixed (not
   theme-toned) green/amber so it stays legible on the always-dark glass
   chip in both light and dark mode. Used on the title page cover only —
   cards use the plain .inline variant below instead, sitting next to the
   "Year · Type" line rather than over the poster. */
.media-tag{position:absolute;top:6px;right:6px;z-index:2;display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:999px;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;cursor:default;
  background:rgba(10,10,16,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 1px 5px rgba(0,0,0,.35);}
.media-tag.ott{color:#6fe0a8;}
.media-tag.cinema{color:#f0c178;}
/* Sits inline in the card's "Year · Type" line instead of over the
   poster — no glass chip needed off the art, just extends that line,
   colored with the same tokens the rest of the app's license pills use. */
.media-tag.inline{position:static;margin-left:6px;padding:0;border-radius:0;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:none;box-shadow:none;font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;vertical-align:baseline;}
.media-tag.inline.ott{color:var(--t-stream);}
.media-tag.inline.cinema{color:var(--t-ads);}
.hero-body{min-width:0;flex:1;padding-top:4px;}
.hero-body h1{margin:0;font-size:34px;font-weight:800;letter-spacing:-.033em;line-height:1.08;}
.hero-orig{font-family:var(--mono);font-size:12px;color:var(--type-dim);margin-top:6px;letter-spacing:.02em;}
.facts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--type-dim);}
.facts .bar{color:var(--rule-lit);}
.facts .score{color:var(--t-stream);font-weight:600;}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:2px 8px;color:var(--type-dim);}
.blurb{margin-top:15px;font-size:14.5px;line-height:1.68;color:var(--type-dim);max-width:64ch;}
.helm{margin-top:13px;font-family:var(--mono);font-size:11px;color:var(--type-faint);letter-spacing:.05em;}
.helm b{color:var(--type-dim);font-weight:500;}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--rule);margin:22px 0 20px;}
.tab{background:none;border:none;padding:0 0 11px;cursor:pointer;font-family:var(--mono);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--type-faint);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur) var(--ease);}
.tab:hover{color:var(--type-dim);}
.tab.on{color:var(--type);border-bottom-color:var(--accent-ink);}
.tab em{font-style:normal;color:var(--type-faint);margin-left:5px;}

/* ---------- services ---------- */
.svc{display:flex;align-items:stretch;border-bottom:1px solid var(--rule);}
.svc-main{flex:1;display:flex;align-items:center;gap:14px;padding:13px 12px 13px 0;
  background:none;border:none;text-align:left;cursor:pointer;color:inherit;
  font-family:inherit;font-size:inherit;min-width:0;transition:background var(--dur) var(--ease),padding-left var(--dur) var(--ease);}
.svc-main:hover{background:var(--slab);padding-left:12px;}
.svc .logo{width:38px;height:38px;border-radius:6px;flex-shrink:0;background:var(--slab-2);object-fit:cover;}
.svc .logo.blank{display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;color:var(--type-faint);}
.svc .nm{font-weight:600;font-size:15px;}
.svc .pills{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap;}
.svc .reach{margin-left:auto;text-align:right;flex-shrink:0;display:flex;align-items:center;gap:12px;}
.svc .n{font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1;}
.svc .n em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.12em;
  color:var(--type-faint);text-transform:uppercase;margin-top:4px;font-weight:400;}
.svc .chev{color:var(--rule-lit);font-size:16px;}
.svc-main:hover .chev{color:var(--accent-ink);}
.svc-open{display:flex;align-items:center;flex-shrink:0;padding-left:14px;text-decoration:none;}
.svc-open span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--type-dim);border:1px solid var(--rule);border-radius:var(--r-sm);padding:6px 11px;
  white-space:nowrap;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.svc-open:hover span{color:#fff;background:var(--accent);border-color:var(--accent-ink);}

.pill{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;padding:2px 6px;border-radius:var(--r-sm);border:1px solid currentColor;opacity:.85;}
.pill.stream{color:var(--t-stream);} .pill.free{color:var(--t-free);}
.pill.ads{color:var(--t-ads);} .pill.rent{color:var(--t-rent);} .pill.buy{color:var(--t-buy);}

/* ---------- related poster grid ---------- */
.posters{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:20px 16px;}
.poster{background:none;border:none;padding:0;cursor:pointer;text-align:left;color:inherit;
  font-family:inherit;display:block;}
.poster .sheet{width:100%;aspect-ratio:2/3;border-radius:var(--r);object-fit:cover;
  background:var(--slab-2);display:block;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.poster:hover .sheet{transform:translate3d(0,-5px,0) scale(1.015);box-shadow:var(--shadow-lift);}
.poster .pname{font-size:13px;font-weight:600;margin-top:9px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.poster .pmeta{font-family:var(--mono);font-size:10px;color:var(--type-faint);
  margin-top:3px;letter-spacing:.06em;}

/* ---------- cast ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:14px;}
.person{display:flex;gap:11px;align-items:center;background:var(--slab);border:1px solid var(--rule);
  box-shadow:inset 0 1px 0 var(--edge);
  border-radius:var(--r);padding:9px 11px;cursor:pointer;text-align:left;color:inherit;
  font-family:inherit;font-size:inherit;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.person:hover{border-color:var(--rule-lit);background:var(--slab-2);}
.person img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--slab-2);}
.person .ph{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--slab-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:12px;color:var(--type-faint);}
.person .who{min-width:0;}
.person .who b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.person .who span{display:block;font-size:11px;color:var(--type-faint);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-top:1px;}

/* ---------- territory grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);}
.terr{display:block;background:var(--slab);padding:13px 14px 12px;text-decoration:none;
  color:inherit;transition:background var(--dur) var(--ease);}
.terr:hover{background:var(--slab-2);}
.terr .code{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:.06em;line-height:1;}
.terr .land{font-size:12px;color:var(--type-dim);margin-top:6px;line-height:1.35;}
.terr .pills{display:flex;gap:4px;margin-top:9px;flex-wrap:wrap;}
.terr .go{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--type-faint);margin-top:10px;}
.terr:hover .go{color:var(--accent-ink);}
.terr.nolink{cursor:default;} .terr.nolink:hover{background:var(--slab);}


.void{padding:44px 0;color:var(--type-dim);font-size:14px;line-height:1.7;border-top:1px solid var(--rule);}
.void strong{color:var(--type);font-weight:600;display:block;margin-bottom:6px;}
.colophon{margin-top:30px;padding-top:14px;border-top:1px solid var(--rule);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.05em;color:var(--type-faint);line-height:1.85;}

/* ---------- skeletons ---------- */
.sk{background:linear-gradient(90deg,var(--slab) 25%,var(--slab-3) 50%,var(--slab) 75%);
  background-size:200% 100%;animation:shim 1.3s linear infinite;border-radius:var(--r-sm);}
@keyframes shim{from{background-position:200% 0;}to{background-position:-200% 0;}}
.sk-row{display:flex;gap:15px;align-items:center;padding:11px 0;border-bottom:1px solid var(--rule);}
.sk-art{width:42px;height:63px;flex-shrink:0;}
.sk-lines{flex:1;}
.sk-l1{height:13px;width:42%;margin-bottom:8px;}
.sk-l2{height:10px;width:22%;}

.themeBtn{background:none;border:1px solid var(--rule);border-radius:var(--r-sm);cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--type-dim);padding:5px 9px;display:inline-flex;align-items:center;gap:6px;}
.themeBtn:hover{color:var(--accent-ink);border-color:var(--rule-lit);}
.themeBtn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.recent-head{display:flex;align-items:baseline;gap:12px;margin:34px 0 14px;}
.recent-head h4{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--type-faint);font-weight:500;}
.recent-head button{background:none;border:none;padding:0;cursor:pointer;margin-left:auto;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--type-faint);}
.recent-head button:hover{color:var(--t-buy);}
.strip-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;}
.rc{flex:0 0 92px;background:none;border:none;padding:0;cursor:pointer;text-align:left;color:inherit;font-family:inherit;}
.rc img,.rc .ph{width:92px;aspect-ratio:2/3;border-radius:var(--r);object-fit:cover;
  background:var(--slab-2);display:block;transition:transform var(--dur) var(--ease);}
.rc:hover img{transform:translate3d(0,-4px,0) scale(1.02);}
.rc b{display:block;font-size:11.5px;font-weight:600;margin-top:7px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.copyLink{background:var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);border-radius:var(--r-sm);cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--type-dim);padding:5px 10px;margin-top:14px;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.copyLink:hover{color:var(--accent-ink);border-color:var(--accent-ink);}
.ratePick{position:relative;display:inline-block;}
.ratePick:hover .ratePop, .ratePick.open .ratePop{display:flex;}
.ratePop{display:none;position:absolute;bottom:calc(100% + 6px);left:0;z-index:5;gap:2px;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);
  box-shadow:var(--shadow-lift);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  padding:5px;}
.ratePop[hidden]{display:none !important;}
.rateOpt{background:none;border:none;border-radius:var(--r-sm);cursor:pointer;
  padding:7px 10px;font-size:16px;line-height:1;white-space:nowrap;}
.rateOpt:hover{background:var(--slab-3);}
.rateOpt[aria-pressed="true"]{background:var(--accent);}
.listPick{position:relative;display:inline-block;}
.listPick:hover .listPop, .listPick.open .listPop{display:flex;}
.listPop{display:none;position:absolute;bottom:calc(100% + 6px);left:0;z-index:5;
  flex-direction:column;gap:2px;min-width:180px;max-height:260px;overflow-y:auto;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);
  box-shadow:var(--shadow-lift);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  padding:5px;}
.listPop[hidden]{display:none !important;}
.listOpt{background:none;border:none;border-radius:var(--r-sm);cursor:pointer;text-align:left;
  padding:7px 10px;font-size:13px;white-space:nowrap;color:var(--type);font-family:var(--sans);}
.listOpt:hover{background:var(--slab-3);}
.typeahead-panel[hidden]{display:none;}
.typeahead-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:5;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);
  box-shadow:var(--shadow-lift);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  max-height:70vh;overflow-y:auto;padding:6px;}
.setup{border:1px solid var(--t-ads);border-radius:var(--r);padding:18px 20px;margin-top:26px;
  background:var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  font-size:13.5px;line-height:1.7;color:var(--type-dim);}
.setup b{color:var(--type);display:block;margin-bottom:6px;font-size:14px;}
.setup code{font-family:var(--mono);font-size:12px;background:var(--slab-2);padding:1px 5px;border-radius:var(--r-sm);color:var(--accent-ink);}
/* ---------- primary nav ---------- */
/* data-for marks items only one skin shows; the "Browse" menu button is
   watch mode's folded nav and doesn't exist anywhere else. */
html:not([data-mode="watchable"]) .nav [data-for="watch"],
html[data-mode="watchable"] .nav [data-for="listing"]{display:none;}
.nav-wrap{position:relative;display:flex;align-items:center;}
.nav-menu-btn{display:none;}
.nav{display:flex;gap:2px;margin-left:6px;}
.nav button{background:none;border:none;padding:6px 11px;cursor:pointer;border-radius:var(--r-sm);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--type-faint);transition:color var(--dur) var(--ease),background var(--dur) var(--ease);}
.nav button:hover{color:var(--type-dim);background:var(--slab);}
.nav button.on{color:var(--type);background:var(--slab-2);}

.regionSel{background:var(--slab);border:1px solid var(--rule);border-radius:var(--r-sm);color:var(--type-dim);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;padding:6px 8px;outline:none;max-width:150px;}
.regionSel:focus{border-color:var(--rule-lit);}

/* ---------- billboard ---------- */
.bb{position:relative;margin:0 -24px 8px;padding:0 24px;overflow:hidden;min-height:340px;
  display:flex;align-items:flex-end;}
.bb-in{width:100%;}
.bb-bg{position:absolute;inset:0;background-size:cover;background-position:center 20%;
  opacity:.62;transform:scale(1.04);filter:saturate(1.06);}
html[data-theme="light"] .bb-bg{opacity:.3;}
/* Scrim holds off until lower down so the artwork reads, then ramps hard
   enough to keep the copy legible over any image. */
.bb-veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 0%,var(--veil-a) 34%,var(--veil-b) 72%,var(--ink) 100%);}
.bb-veil::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--veil-b) 0%,transparent 66%);}
.bb-in{position:relative;padding:64px 0 46px;max-width:640px;}
.bb-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.bb-kicker::before{content:"";width:20px;height:1px;background:var(--accent);}
.bb-in h2{margin:0;font-size:42px;font-weight:800;letter-spacing:-.035em;line-height:1.03;}
.bb-in .facts{margin-top:12px;}
.bb-in p{color:var(--type-dim);font-size:14.5px;line-height:1.65;margin:14px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.bb-cta{margin-top:20px;display:flex;gap:9px;flex-wrap:wrap;}
.btn{background:var(--accent);color:#fff;border:none;border-radius:var(--r-sm);padding:9px 17px;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:500;}
.btn:hover{filter:brightness(1.1);}
.btn.ghost{background:var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  color:var(--type-dim);border:1px solid var(--glass-border);}
.btn.ghost:hover{color:var(--type);border-color:var(--rule-lit);filter:none;}

/* ---------- content rails ---------- */
/* Every rail gets a light shared glass baseline so the whole home page
   reads as one panel system; .rail-sec.glass (below) layers a stronger
   blurred-backdrop treatment on top for the two "signature" rails only —
   no backdrop-filter/shadow at the baseline, both are reserved for that
   elevated variant so it still stands out as more than "another panel". */
.rail-sec{margin:30px 0 0;padding:16px 18px;border:1px solid var(--glass-border);
  border-radius:var(--r-lg);}
.rail-sec:not(.glass){background:var(--glass);}
.rail-head{display:flex;align-items:baseline;gap:12px;margin-bottom:13px;}
.rail-head h3{margin:0;font-size:14.5px;font-weight:700;letter-spacing:-.015em;}
.rail-head .sub{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--type-faint);}
.rail-head .more{margin-left:auto;background:none;border:none;cursor:pointer;padding:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--type-faint);}
.rail-head .more:hover{color:var(--accent-ink);}
/* glassy backdrop treatment for the Top Rated rails: a blurred still of
   the #1 title sits behind a frosted panel, same blur technique as the
   masthead/gate overlay elsewhere in the app. */
.rail-sec.glass{position:relative;overflow:hidden;padding:20px;box-shadow:var(--shadow-lift);}
.rail-sec.glass .rail-bg{position:absolute;inset:-24px;background-size:cover;background-position:center 20%;
  filter:blur(30px) saturate(1.15);transform:scale(1.12);opacity:.55;z-index:0;}
.rail-sec.glass::before{content:"";position:absolute;inset:0;background:var(--glass-strong);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.1);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.1);z-index:1;}
.rail-sec.glass .rail-head,.rail-sec.glass .rail-wrap{position:relative;z-index:2;}
.rail-wrap{position:relative;}
.rail-strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;}
/* overflow-x:auto alone computes overflow-y to auto as well, so anything
   poking past the strip vertically — the Top 10 numerals (line-height .72
   on a glyph ~80% of the tile), a hover-scaled tile — made the strip its
   own vertical scroller: the wheel scrolled the row up and down instead of
   the page. Rails only ever scroll sideways. */
.rail-strip{overflow-y:hidden;}
/* No CSS scroll-behavior:smooth here on purpose — the nudge buttons pass
   behavior:"smooth" explicitly on their own scrollBy() call, and the
   infinite-loop rewind in setupRailLoop() needs its scrollLeft writes to
   land instantly. A CSS-level smooth default would animate that rewind
   too, racing with whatever scroll triggered it and leaving the strip
   stuck partway instead of landing cleanly back in the real content. */
.rail-strip::-webkit-scrollbar{display:none;}
/* Always visible: a control you can only find by hovering isn't a control. */
.rail-nudge{position:absolute;top:calc(50% - 34px);width:34px;height:34px;z-index:4;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;
  background:var(--slab-2);color:var(--type);border:1px solid var(--rule-lit);border-radius:50%;
  box-shadow:var(--shadow);opacity:.94;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);}
.rail-nudge:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.08);}
.rail-nudge.l{left:-13px;} .rail-nudge.r{right:-13px;}
.rail-nudge:disabled{opacity:0;pointer-events:none;transform:scale(.8);}
.rail-strip{scroll-snap-type:x proximity;}
.rail-strip > *{scroll-snap-align:start;}
.card{flex:0 0 132px;background:none;border:none;padding:0;cursor:pointer;text-align:left;
  color:inherit;font-family:inherit;}
.card .sheet{width:132px;aspect-ratio:2/3;border-radius:var(--r);object-fit:cover;background:var(--slab-2);
  display:block;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.card:hover .sheet{transform:translate3d(0,-6px,0) scale(1.018);box-shadow:var(--shadow-lift);}
.card b{display:block;font-size:12.5px;font-weight:600;margin-top:8px;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  color:var(--type-faint);margin-top:3px;letter-spacing:.05em;}
/* The corner flag: "Coming soon" / "In cinemas" / "New episode". Sits on
   the art, not under it, so it reads at a glance down a rail — .card-art
   is the positioning context (the card itself also holds the name and the
   facts line, which the flag must not cover). Replaces the old
   `i.unreleased` text line, which said the same thing in a quieter place. */
.card-art{position:relative;display:block;}
/* display:contents so an empty slot (most cards, most of the time) can't
   contribute a line box to the art wrapper and shift the poster. The flag
   inside still positions against .card-art / .nf-art. */
.card-flag-slot{display:contents;}
.card-flag{position:absolute;top:0;left:0;z-index:2;padding:3px 7px;
  border-radius:var(--r-sm) 0 6px 0;font-family:var(--mono);font-size:9px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:var(--accent);box-shadow:0 1px 5px rgba(0,0,0,.35);}
/* Fixed hexes, not the --t-* license tokens: those flip light/dark to stay
   legible as *text*, which would drag the flag's own text colour with them.
   White on a saturated fill reads the same in both themes, as .nf-flag did. */
.card-flag.cinema{background:#a96a1e;}
.card-flag.soon{background:#2c7591;}
.card .rank{position:absolute;}
.sk-card{flex:0 0 132px;}
.sk-card .sheet{width:132px;aspect-ratio:2/3;border-radius:var(--r);}
/* Continue Watching cards only: wraps .card so a dismiss control can sit
   over the poster without nesting a <button> inside a <button>. */
.card-wrap{position:relative;flex:0 0 132px;}
.card-wrap .card{flex:0 0 auto;width:100%;}
.card-wrap .dismiss{position:absolute;top:6px;right:6px;width:24px;height:24px;z-index:2;
  display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:50%;
  opacity:0;transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease);}
.card-wrap:hover .dismiss,.card-wrap .dismiss:focus-visible{opacity:1;}
.card-wrap .dismiss:hover{background:var(--accent);border-color:var(--accent);}
@media (hover:none),(pointer:coarse){ .card-wrap .dismiss{opacity:.85;} }

/* ---------- provider directory ---------- */
.provs{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;}
.prov{position:relative;display:flex;align-items:center;gap:11px;background:var(--glass);border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--edge);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border-radius:var(--r);padding:11px 13px;cursor:pointer;text-align:left;color:inherit;
  font-family:inherit;font-size:inherit;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.prov:hover{border-color:var(--accent-ink);background:var(--glass-strong);transform:translateY(-2px);}
.prov img{width:34px;height:34px;border-radius:7px;object-fit:cover;flex-shrink:0;background:var(--slab-2);}
.prov .ph{width:34px;height:34px;border-radius:7px;flex-shrink:0;background:var(--slab-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--type-faint);}
.prov b{font-size:12.5px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.prov.selected{border-color:var(--accent-ink);background:var(--glass-strong);}
.prov-check{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--rule-lit);background:var(--glass);}
.prov.selected .prov-check{background:var(--accent);border-color:var(--accent);}
.prov.selected .prov-check::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.svc-select-bar{position:sticky;bottom:12px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:16px;padding:10px 14px;background:var(--glass-strong);border:1px solid var(--glass-border);
  border-radius:var(--r);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow-lift);}
.svc-select-bar span{font-family:var(--mono);font-size:11px;color:var(--type-dim);}
.svc-select-bar button:disabled{opacity:.5;cursor:not-allowed;}
/* JustWatch-style on mobile: a compact horizontally-scrolling row of
   logo-only round chips instead of a tall multi-row grid with full name
   labels — the grid ate a lot of vertical space on small screens with no
   mobile treatment at all before this. Name stays available to screen
   readers via .prov's aria-label even though <b> is visually hidden. */
@media (max-width:720px){
  .provs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:2px;
    scrollbar-width:none;-ms-overflow-style:none;}
  .provs::-webkit-scrollbar{display:none;}
  .prov{flex:0 0 auto;flex-direction:column;align-items:center;gap:0;padding:0;width:52px;
    background:none;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    scroll-snap-align:start;}
  .prov:hover{transform:none;background:none;}
  .prov img,.prov .ph{width:52px;height:52px;border-radius:50%;}
  .prov b{display:none;}
}

/* ---------- genre tiles ---------- */
.genres{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:9px;}
.gt{background:var(--slab);border:1px solid var(--rule);border-radius:var(--r);padding:16px 14px;
  box-shadow:inset 0 1px 0 var(--edge);
  cursor:pointer;text-align:left;color:inherit;font-family:inherit;font-size:13.5px;font-weight:600;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease);}
.gt:hover{border-color:var(--accent-ink);color:var(--accent-ink);background:var(--slab-2);}

/* ---------- grid of posters (browse results) ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:20px 14px;}
.pgrid .card{flex:none;}
.pgrid .card .sheet{width:100%;}
/* Bigger, more imagery-forward cards on a service's catalogue — but only
   for accounts that can watch in-app (see applyWatchMode()). Default
   listing mode keeps the plain JustWatch-style grid above. */
html[data-mode="watchable"] .pgrid-svc{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:26px 18px;}

/* ---------- region callout on a title ---------- */
.status-band{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:11px 15px;
  border-radius:var(--r);margin-bottom:14px;font-size:13px;color:var(--type-dim);
  border:1px solid var(--rule);background:var(--slab);box-shadow:inset 0 1px 0 var(--edge);}
.status-band b{color:var(--type);font-weight:600;}
.status-band.cinemas{border-left:2px solid var(--t-ads);}
.status-band.upcoming,.status-band.unreleased{border-left:2px solid var(--t-rent);}
.status-band.airing{border-left:2px solid var(--t-stream);}
.status-band .guess{opacity:.8;font-style:italic;}
.here-now{display:flex;align-items:center;gap:11px;flex-wrap:wrap;background:var(--slab);
  border:1px solid var(--rule);border-left:2px solid var(--accent);border-radius:var(--r);
  padding:11px 14px;margin-bottom:16px;font-size:13px;}
.here-now .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--type-faint);}
.here-now img{width:22px;height:22px;border-radius:5px;object-fit:cover;}
.here-now .none{color:var(--type-dim);}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);margin-top:64px;padding:26px 0 0;
  display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:var(--type-faint);}
.foot b{color:var(--type-dim);font-weight:500;}
.foot a{color:var(--type-faint);text-decoration:none;}
.foot a:hover{color:var(--accent-ink);}
.foot .sp{flex:1;}
.foot-credit{background:none;border:none;padding:0;cursor:pointer;font:inherit;
  letter-spacing:inherit;color:var(--type-faint);}
.foot-credit:hover{color:var(--accent-ink);}
.credit-note{max-width:1120px;margin:10px auto 0;padding:0 24px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.06em;color:var(--type-faint);line-height:1.7;}

.toTop{position:fixed;right:22px;bottom:22px;z-index:25;background:var(--slab-2);
  border:1px solid var(--rule);border-radius:var(--r);color:var(--type-dim);cursor:pointer;
  padding:9px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);}
.toTop.on{opacity:1;pointer-events:auto;}
.toTop:hover{color:var(--accent-ink);border-color:var(--accent-ink);}

/* Only opacity and transform animate — both run on the compositor, so
   nothing here can trigger layout or paint mid-transition. */
.seasonbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.sbtn{background:var(--slab);border:1px solid var(--rule);border-radius:var(--r-sm);cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--type-dim);padding:6px 11px;display:inline-flex;gap:7px;align-items:baseline;
  box-shadow:inset 0 1px 0 var(--edge);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.sbtn:hover{color:var(--type);border-color:var(--rule-lit);}
.sbtn.on{color:#fff;background:var(--accent);border-color:var(--accent);}
.sbtn.on em{color:rgba(255,255,255,.75);}
.sbtn em{font-style:normal;color:var(--type-faint);}
.season-meta{margin-bottom:16px;}
.season-meta .lab{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--type-faint);}
.season-meta p{margin:7px 0 0;font-size:13.5px;line-height:1.65;color:var(--type-dim);max-width:70ch;}
.eplist{display:flex;flex-direction:column;}
.ep{display:flex;gap:15px;padding:14px 0;border-bottom:1px solid var(--rule);
  width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;
  color:inherit;font-family:inherit;font-size:inherit;align-items:flex-start;}
.ep.playable{cursor:pointer;transition:background var(--dur) var(--ease),padding-left var(--dur) var(--ease);}
.ep.playable:hover{background:var(--slab);padding-left:10px;}
.ep.future{opacity:.62;}
.epshot-wrap{position:relative;flex-shrink:0;display:block;line-height:0;}
.epshot{width:132px;aspect-ratio:16/9;border-radius:var(--r-sm);object-fit:cover;
  background:var(--slab-2);display:block;}
.epplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:rgba(14,14,18,.42);opacity:0;
  transition:opacity var(--dur) var(--ease);}
.epplay::after{content:"";width:0;height:0;border-left:13px solid #fff;
  border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));}
.ep.playable:hover .epplay,.ep.playable:focus-visible .epplay{opacity:1;}
.epbody{min-width:0;display:block;}
.epgo{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);opacity:0;transition:opacity var(--dur) var(--ease);margin-left:auto;}
.ep.playable:hover .epgo,.ep.playable:focus-visible .epgo{opacity:1;}
.eptext{margin:8px 0 0;font-size:13px;line-height:1.62;color:var(--type-dim);max-width:78ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.ephead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.epno{font-family:var(--mono);font-size:11px;color:var(--type-faint);letter-spacing:.08em;}
.ephead b{font-size:14.5px;font-weight:600;}
.eprt,.epsc{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--type-faint);
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:1px 6px;}
.epsc{color:var(--t-stream);border-color:currentColor;}
.epdate{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--type-faint);
  margin-top:5px;display:block;}
.ep p{margin:8px 0 0;font-size:13px;line-height:1.62;color:var(--type-dim);max-width:78ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
@media (max-width:720px){ .epshot{width:96px;} }
.facts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;}
.fact{background:var(--slab);padding:12px 15px;}
.fact dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--type-faint);margin:0 0 5px;}
.fact dd{margin:0;font-size:13.5px;line-height:1.45;color:var(--type);}

.jobs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.job{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:4px 9px;color:var(--type-dim);
  background:var(--slab);display:inline-flex;gap:6px;align-items:baseline;}
.job em{font-style:normal;color:var(--type-faint);}
.vitals{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:16px;}
.vital dt{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--type-faint);margin:0 0 3px;}
.vital dd{margin:0;font-size:13px;color:var(--type-dim);}

.bio{margin-top:16px;max-width:70ch;position:relative;max-height:7.2em;overflow:hidden;
  mask-image:linear-gradient(to bottom,#000 60%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);
  transition:max-height var(--dur-slow) var(--ease);}
.bio.open{max-height:none;mask-image:none;-webkit-mask-image:none;}
.bio p{margin:0 0 10px;font-size:14px;line-height:1.72;color:var(--type-dim);}
.bio p:last-child{margin-bottom:0;}

.kwrap{display:flex;flex-wrap:wrap;gap:7px;}
.kw{background:var(--slab);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type-dim);font-size:12.5px;padding:6px 11px;cursor:pointer;text-decoration:none;
  font-family:inherit;box-shadow:inset 0 1px 0 var(--edge);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.kw:hover{color:var(--accent-ink);border-color:var(--accent);background:var(--slab-2);}

.altwrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:7px;}
.alt{display:flex;gap:10px;align-items:baseline;background:var(--slab);border:1px solid var(--rule);
  border-radius:var(--r-sm);padding:8px 12px;font-size:13px;color:var(--type);}
.alt span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--type-faint);flex-shrink:0;}

.reading{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:4px 0 2px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--type-faint);}
.reading b{color:var(--accent-ink);font-weight:500;}
.reading button{background:none;border:none;padding:0;cursor:pointer;font:inherit;
  letter-spacing:inherit;text-transform:inherit;color:var(--type-faint);text-decoration:underline;}
.reading button:hover{color:var(--t-buy);}
.stage-in{animation:rise var(--dur-slow) var(--ease-out) both;}
@keyframes rise{from{opacity:0;transform:translate3d(0,8px,0);}to{opacity:1;transform:none;}}

.rail-strip > *{animation:arrive var(--dur-slow) var(--ease-out) both;}
.rail-strip > *:nth-child(1){animation-delay:.02s}
.rail-strip > *:nth-child(2){animation-delay:.05s}
.rail-strip > *:nth-child(3){animation-delay:.08s}
.rail-strip > *:nth-child(4){animation-delay:.11s}
.rail-strip > *:nth-child(5){animation-delay:.14s}
.rail-strip > *:nth-child(6){animation-delay:.17s}
.rail-strip > *:nth-child(n+7){animation-delay:.2s}
@keyframes arrive{from{opacity:0;transform:translate3d(0,10px,0) scale(.985);}to{opacity:1;transform:none;}}

/* Posters cross-fade in from their placeholder instead of snapping. */
.fadein{opacity:0;transition:opacity var(--dur-slow) var(--ease);}
.fadein.on{opacity:1;}

/* Offscreen rails skip paint entirely. */
/* ---------- billboard carousel ---------- */
.bb.multi{display:block;padding:0;min-height:min(52vw,460px);}
.bb-slide{position:absolute;inset:0;padding:0 24px;display:flex;align-items:flex-end;
  opacity:0;pointer-events:none;transition:opacity .7s var(--ease);}
.bb-slide.on{opacity:1;pointer-events:auto;}
.bb-slide .bb-in{width:100%;}
.bb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:36px;height:36px;
  border-radius:50%;background:var(--slab-2);border:1px solid var(--rule-lit);color:var(--type);
  cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);opacity:.9;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);}
.bb-nav:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-50%) scale(1.08);}
.bb-nav.l{left:10px;} .bb-nav.r{right:10px;}
.bb-dots{position:absolute;bottom:18px;left:24px;z-index:6;display:flex;gap:7px;}
.bb-dot{width:22px;height:3px;border-radius:2px;border:none;padding:0;cursor:pointer;
  background:var(--rule-lit);transition:background var(--dur) var(--ease),width var(--dur) var(--ease);}
.bb-dot.on{background:var(--accent);width:34px;}

/* ---------- player ---------- */
.play-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 4px;}
.play-btn{display:inline-flex;align-items:center;gap:10px;font-size:11px;padding:11px 20px;}
.play-btn .tri{width:0;height:0;border-left:9px solid currentColor;
  border-top:6px solid transparent;border-bottom:6px solid transparent;display:inline-block;}
.play-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--type-faint);}
.play-note a{color:var(--accent-ink);text-decoration:none;}
.play-note a:hover{text-decoration:underline;}

.player-wrap{margin:18px 0 6px;border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;background:var(--slab);box-shadow:inset 0 1px 0 var(--edge);}
.player-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--rule);}
.player-now{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--type-faint);display:flex;gap:9px;align-items:baseline;
  min-width:0;flex-wrap:wrap;}
.player-now b{font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  text-transform:none;color:var(--type);}
.player-skip{display:flex;gap:6px;margin-left:auto;}
.pbtn{background:var(--slab-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type-dim);cursor:pointer;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.pbtn:hover:not(:disabled){color:var(--type);border-color:var(--rule-lit);background:var(--slab-3);}
.pbtn:disabled{opacity:.35;cursor:default;}
.player-tools{display:flex;gap:6px;margin-left:auto;}
.player-skip{margin-left:auto;}
.player-skip + .player-tools{margin-left:0;}
.player-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
/* Fullscreen is requested on this wrapper from our own document, so the
   aspect-ratio box has to give way to the viewport. */
.player-frame:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;}
.player-frame:-webkit-full-screen{aspect-ratio:auto;width:100vw;height:100vh;}

/* Floating controls, drawn over the iframe itself. Keyboard shortcuts stop
   reaching us once the iframe has focus, and the header bar is outside
   the fullscreen element entirely (so it vanishes in fullscreen) — this
   is the one set of controls that's always reachable by mouse, in every
   state. Colors come straight from the live theme tokens. */
/* Parked mid-height at the right edge, invisible until the pointer comes
   near. "Near" has to be a real element: the player is a cross-origin
   iframe, so no mousemove over the video ever reaches this document and
   the distance simply cannot be measured in JS. This zone is that
   proximity area — it captures the hover the gear itself cannot.

   It is deliberately small. Whatever it covers, the iframe below stops
   receiving, and a click landing here does nothing at all rather than
   reaching the player. The middle of the right edge is the cheapest place
   to spend that: provider control bars run along the bottom and their big
   play affordance sits dead centre. Don't grow this box without checking
   what it starts eating. */
.player-fab-zone{position:absolute;top:50%;right:0;transform:translateY(-50%);
  z-index:6;width:84px;height:140px;
  display:flex;align-items:center;justify-content:flex-end;padding-right:14px;}
.player-fab{width:38px;height:38px;flex:none;
  border-radius:50%;background:var(--slab);border:1px solid var(--rule-lit);color:var(--type-dim);
  opacity:0;pointer-events:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lift);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease);}
/* pointer-events rides with opacity so the hidden gear can't swallow a
   click meant for the video underneath it. */
.player-fab-zone:hover .player-fab,.player-fab:focus-visible,.player-fab.on{
  opacity:1;pointer-events:auto;}
.player-fab:hover,.player-fab.on{color:var(--accent-ink);transform:scale(1.06);}
/* A touch device has no hover to give, and this gear is the only control
   reachable in fullscreen — hiding it behind a hover that can never
   arrive would strand the viewer there. Always visible instead. */
@media (hover: none){
  .player-fab{opacity:.72;pointer-events:auto;}
}
.player-fab svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
/* Opens leftward from the gear's new home, and above the zone (z-index 7
   vs 6) so the zone can't intercept clicks meant for the menu. Capped to
   the frame's height because a five-source list on a short player would
   otherwise run off the top and bottom. */
.player-panel{position:absolute;top:50%;right:64px;transform:translateY(-50%);
  z-index:7;min-width:190px;max-height:calc(100% - 24px);overflow:auto;
  background:var(--slab);border:1px solid var(--rule-lit);border-radius:var(--r);
  box-shadow:var(--shadow-lift);padding:7px;display:none;flex-direction:column;gap:4px;}
.player-panel.open{display:flex;}
.player-panel button{background:var(--slab-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type-dim);font-family:var(--sans);font-size:12.5px;text-align:left;padding:7px 10px;
  cursor:pointer;}
.player-panel button:hover:not(:disabled){color:var(--type);border-color:var(--rule-lit);background:var(--slab-3);}
.player-panel button:disabled{opacity:.35;cursor:default;}
.player-panel .psrc-row{display:flex;gap:4px;}
.player-panel .psrc-row button{flex:1;text-align:center;padding:6px 4px;}
.player-panel .psrc-row button.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.player-panel hr{border:0;border-top:1px solid var(--rule);margin:3px 2px;width:100%;}

/* Wide mode breaks the player out of the reading column without going
   fullscreen — useful on a laptop where fullscreen is overkill. */
.player-wrap.theater{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  max-width:100vw;border-radius:0;border-left:0;border-right:0;}
.player-wrap.theater .player-head,.player-wrap.theater .picker,
.player-wrap.theater .src-bar{padding-left:max(24px,calc(50vw - 536px));
  padding-right:max(24px,calc(50vw - 536px));}

.player-keys{padding:9px 14px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--type-faint);}
.player-keys kbd{font-family:var(--mono);font-size:9.5px;border:1px solid var(--rule-lit);
  border-radius:3px;padding:1px 5px;margin:0 3px 0 9px;color:var(--type-dim);}
.player-keys kbd:first-child{margin-left:0;}
@media (max-width:720px){ .player-keys{display:none;} }
.src-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:10px 14px;border-top:1px solid var(--rule);}
.src-bar .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--type-faint);margin-right:2px;}
.srcbtn{background:var(--slab-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type-dim);cursor:pointer;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.srcbtn:hover{color:var(--type);border-color:var(--rule-lit);}
.srcbtn.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.src-warn{color:var(--type-faint);font-size:12px;line-height:1.6;padding:0 14px 11px;}
.src-warn b{color:var(--type-dim);}
.src-warn a{color:var(--accent-ink);text-decoration:none;}
.src-warn a:hover{text-decoration:underline;}
.src-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  color:var(--type-faint);margin-left:auto;}
@media (max-width:720px){ .src-note{display:none;} }
.picker{padding:14px;border-top:1px solid var(--rule);}
.pick-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;}
.pick-row .sbtn{flex:0 0 auto;}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px;
  max-height:290px;overflow-y:auto;padding-right:4px;}
.epchip{display:flex;align-items:baseline;gap:9px;text-align:left;cursor:pointer;
  background:var(--slab-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:9px 11px;color:var(--type-dim);font-family:inherit;font-size:12.5px;min-width:0;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.epchip:hover:not(:disabled){color:var(--type);border-color:var(--rule-lit);}
.epchip.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.epchip.on .n{color:rgba(255,255,255,.8);}
.epchip:disabled{opacity:.4;cursor:default;}
.epchip .n{font-family:var(--mono);font-size:10.5px;color:var(--type-faint);flex-shrink:0;}
.epchip .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.epchip-sk{height:36px;border-radius:var(--r-sm);}

.ep-summary{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--type-faint);margin-bottom:12px;}
.ep-summary b{color:var(--type);font-weight:600;}

@media (max-width:720px){
  .bb-dots{left:16px;} .bb-nav{width:30px;height:30px;font-size:15px;}
  .bb-nav.l{left:6px;} .bb-nav.r{right:6px;}
  .pick-grid{grid-template-columns:1fr 1fr;max-height:236px;}
  .epchip{font-size:11.5px;padding:8px 9px;}
  .player-head{padding:9px 11px;gap:8px;}
  .player-skip{width:100%;margin-left:0;}
  .player-tools{width:100%;margin-left:0;}
  .player-wrap.theater{margin-left:0;margin-right:0;border-radius:var(--r);}
  .player-wrap.theater .player-head,.player-wrap.theater .picker,
  .player-wrap.theater .src-bar{padding-left:11px;padding-right:11px;}
  .epshot{width:104px;}
  .epgo{display:none;}
}

.rail-sec{content-visibility:auto;contain-intrinsic-size:auto 300px;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}

@media (max-width:720px){
  .bb{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;min-height:250px;}
  .bb.multi{min-height:min(96vw,430px);padding:0;}
  .bb-slide{padding:0 16px;}
  .bb-in{padding:40px 0 38px;} .bb-in h2{font-size:27px;}
  .rail-nudge{display:none;}
  .card,.sk-card{flex:0 0 108px;} .card .sheet,.sk-card .sheet{width:108px;}
  .card-wrap{flex:0 0 108px;}
  .nav-wrap{order:3;width:100%;}
  .nav{width:100%;overflow-x:auto;margin-left:0;}
  .toTop{right:12px;bottom:12px;}
  .top{flex-wrap:wrap;gap:12px;} .masthead-in{padding:12px 16px;}
  .seek{max-width:none;margin-left:0;width:100%;order:1;} .slash{display:none;}
  .shell,.syntax{padding-left:16px;padding-right:16px;}
  .hero{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;}
  .hero-in{gap:16px;padding:22px 0 20px;}
  .hero-poster{width:92px;} .hero-body h1{font-size:24px;}
  .blurb{font-size:13.5px;}
  .svc .reach{gap:8px;} .svc .n{font-size:16px;}
  .svc-open span{padding:5px 8px;font-size:9px;}
  .posters{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:16px 11px;}
  .tabs{gap:18px;}
}

/* ---------- auth gate: login / screen picker / PIN ---------- */
body.gated{overflow:hidden;}
.gate[hidden]{display:none;}
.gate{position:fixed;inset:0;z-index:200;background:var(--glass-strong);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;}
.gate-card{width:100%;max-width:360px;background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border-radius:var(--r-lg);padding:32px 28px;box-shadow:var(--shadow-lift);}
.gate-card.gate-wide,.gate-wide{max-width:640px;}
.gate-brand{font-weight:800;font-size:15px;letter-spacing:-.02em;color:var(--type-dim);margin-bottom:18px;}
.gate-brand b{color:var(--accent-ink);}
.gate-card h1{margin:0 0 20px;font-size:22px;font-weight:800;letter-spacing:-.02em;}
.gate-card form{display:flex;flex-direction:column;gap:14px;}
.gate-card label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--type-dim);
  font-family:var(--mono);letter-spacing:.04em;}
.gate-card input{background:var(--slab-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type);font-family:var(--sans);font-size:14px;padding:10px 12px;outline:none;}
.gate-card input:focus{border-color:var(--rule-lit);}
.gate-card button[type="submit"],.gate-card .screen-edit-actions #saveScreenBtn{
  background:var(--accent);color:#fff;border:none;border-radius:var(--r-sm);padding:11px 17px;
  cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;margin-top:4px;}
.gate-card button[type="submit"]:hover,.screen-edit-actions #saveScreenBtn:hover{filter:brightness(1.1);}
.gate-card button:disabled{opacity:.5;cursor:default;}
.gate-err{background:color-mix(in oklab, var(--t-buy) 16%, transparent);color:var(--t-buy);
  border:1px solid color-mix(in oklab, var(--t-buy) 40%, transparent);border-radius:var(--r-sm);
  padding:9px 12px;font-size:12.5px;line-height:1.5;margin-bottom:14px;}
.gate-note{margin-top:18px;color:var(--type-faint);font-size:12px;line-height:1.6;}
.confirm-overlay[hidden]{display:none;}
.confirm-overlay{position:fixed;inset:0;z-index:230;background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;}
.confirm-card{width:100%;max-width:360px;background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-lift);}
.confirm-card h2{margin:0 0 10px;font-size:16px;font-weight:800;letter-spacing:-.02em;}
.confirm-card p{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--type-dim);}
.confirm-input-label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--type-dim);
  font-family:var(--mono);letter-spacing:.04em;margin-bottom:14px;}
.confirm-input-label input{background:var(--slab-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type);font-family:var(--sans);font-size:14px;padding:10px 12px;outline:none;width:100%;}
.confirm-actions{display:flex;gap:9px;}
.confirm-actions button{flex:1;background:var(--slab-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type-dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:10px;cursor:pointer;}
.confirm-actions button:hover{border-color:var(--rule-lit);color:var(--type);}
.confirm-actions button.danger{color:var(--t-buy);border-color:color-mix(in oklab, var(--t-buy) 40%, transparent);}
.confirm-actions button.danger:hover{background:color-mix(in oklab, var(--t-buy) 12%, transparent);}
.gate-link{display:block;width:100%;background:none;border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type-dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px;cursor:pointer;margin-top:12px;}
.gate-link:hover{color:var(--type);border-color:var(--rule-lit);}

/* Netflix-style hover-expand preview — a single reusable fixed-position
   portal (positioned per-hover via getBoundingClientRect), not one per
   card, so it's immune to .rail-strip's overflow clipping. */
.card-preview{position:fixed;z-index:50;width:380px;border-radius:var(--r-lg);
  overflow:hidden;background:var(--glass-strong);border:1px solid var(--glass-border);
  box-shadow:var(--shadow-lift);backdrop-filter:blur(var(--glass-blur)) saturate(1.1);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.1);
  opacity:0;transform:scale(.96);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);}
.card-preview[hidden]{display:none;}
.card-preview.on{opacity:1;transform:scale(1);pointer-events:auto;}
.card-preview .cp-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--slab-2);}
.card-preview .cp-video{width:100%;aspect-ratio:16/9;display:block;border:none;
  background:var(--slab-2);pointer-events:none;}
.card-preview .cp-mute{position:absolute;top:8px;right:8px;z-index:2;
  width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.card-preview .cp-mute:hover{background:rgba(0,0,0,.75);}
.card-preview .cp-body{padding:12px 14px 14px;}
.card-preview .cp-title{font-weight:700;font-size:14px;margin:0 0 4px;}
.card-preview .cp-facts{font-family:var(--mono);font-size:10.5px;color:var(--type-faint);
  display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.card-preview .cp-hd{display:inline-flex;align-items:center;padding:1px 5px;border-radius:3px;
  font-size:9px;font-weight:700;letter-spacing:.06em;
  color:var(--t-stream);border:1px solid currentColor;}
.card-preview .cp-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}
.card-preview .cp-overview{font-size:12px;line-height:1.5;color:var(--type-dim);margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card-preview .ratePick{display:block;}
.card-preview .cp-expand{position:absolute;top:8px;right:44px;z-index:2;
  width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.card-preview .cp-expand:hover{background:rgba(0,0,0,.75);}
@media (max-width:720px), (hover:none), (pointer:coarse){.card-preview{display:none !important;}}

/* ---------- trailer modal: medium, centered, full YouTube controls ---------- */
.trailer-modal[hidden]{display:none;}
.trailer-modal{position:fixed;inset:0;z-index:220;background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;}
.trailer-modal-in{position:relative;width:100%;max-width:720px;border-radius:var(--r-lg);
  overflow:hidden;background:#000;box-shadow:var(--shadow-lift);}
.trailer-modal-in iframe{width:100%;aspect-ratio:16/9;display:block;border:none;}
.trailer-close{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;
  border-radius:50%;border:none;cursor:pointer;background:rgba(0,0,0,.6);color:#fff;
  font-size:15px;display:flex;align-items:center;justify-content:center;}
.trailer-close:hover{background:rgba(0,0,0,.8);}

/* ---------- add-to-list modal: search + live results, stays open across picks ---------- */
.dialog-modal[hidden]{display:none;}
.dialog-modal{position:fixed;inset:0;z-index:220;background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;}
.dialog-modal-in{position:relative;width:100%;max-width:440px;max-height:80vh;overflow-y:auto;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  padding:24px;display:flex;flex-direction:column;gap:12px;}
.dialog-modal-in h2{margin:0;padding-right:30px;font-size:17px;font-weight:800;letter-spacing:-.02em;}
.dialog-modal-in input{background:var(--slab-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type);font-family:var(--sans);font-size:14px;padding:10px 12px;outline:none;width:100%;}
.dialog-modal-in input:focus{border-color:var(--rule-lit);}
.addlist-results[hidden]{display:none;}
.addlist-results{max-height:280px;overflow-y:auto;}

/* ---------- watchlist tiles (Saved page) ---------- */
.list-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px;}
.list-tile{background:var(--slab);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  cursor:pointer;text-align:left;color:inherit;font-family:inherit;padding:0;
  box-shadow:inset 0 1px 0 var(--edge);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.list-tile:hover{border-color:var(--accent-ink);transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.list-tile .collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  aspect-ratio:1/1;gap:1px;background:var(--rule);}
.list-tile .collage.n1{grid-template-columns:1fr;grid-template-rows:1fr;}
.list-tile .collage img,.list-tile .collage .ph{width:100%;height:100%;object-fit:cover;display:block;background:var(--slab-2);}
.list-tile .meta{padding:10px 12px 12px;}
.list-tile .meta .nm{font-size:13.5px;font-weight:700;margin:0 0 3px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.list-tile .meta .cnt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--type-faint);}
.list-tile .meta .cnt b{color:var(--accent-ink);font-weight:700;}

/* ---------- list contents modal: opened from a list tile above ---------- */
.list-modal-in{max-width:860px;}
.list-modal-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;padding-right:30px;}
.list-modal-head h2{padding-right:0;flex:1 1 auto;min-width:120px;}
.list-modal-actions{display:flex;flex-wrap:wrap;gap:8px 14px;margin-left:auto;}
.list-modal-actions button{background:none;border:none;cursor:pointer;padding:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--type-faint);}
.list-modal-actions button:hover{color:var(--accent-ink);}
.list-modal-sec + .list-modal-sec{margin-top:22px;}
.list-modal-sec h4{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:7px;}
.list-modal-sec h4 span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--type-faint);
  font-weight:500;}
.list-item-tile{position:relative;}
/* Hollow/unfilled until explicitly clicked — a status badge would imply
   the app inferred this, and it deliberately doesn't anymore. */
.watched-toggle{position:absolute;top:6px;left:6px;z-index:2;width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);cursor:pointer;background:rgba(0,0,0,.4);color:transparent;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);}
.watched-toggle:hover{border-color:#fff;}
.watched-toggle.on{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.45);}
.list-item-remove{position:absolute;top:6px;right:6px;z-index:2;width:22px;height:22px;border-radius:50%;
  border:none;cursor:pointer;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease);}
.list-item-remove:hover{background:rgba(210,60,60,.9);}

.screen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:18px;margin:6px 0 8px;}
.screen-tile{background:none;border:1px solid transparent;border-radius:var(--r);padding:10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;color:var(--type);}
.screen-tile:hover{border-color:var(--rule-lit);background:var(--slab-2);}
.avatar{width:88px;height:88px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:32px;letter-spacing:0;flex-shrink:0;}
.avatar-add{background:var(--slab-2)!important;border:1px dashed var(--rule-lit);color:var(--type-faint);
  font-size:28px;font-weight:400;}
.avatar-admin{background:var(--slab-3)!important;border:1px solid var(--rule-lit);}
.screen-name{font-size:13px;font-weight:600;text-align:center;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.screen-pin-badge{position:absolute;top:6px;right:16px;font-size:13px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
.screen-edit-badge{position:absolute;inset:0 0 auto 0;top:10px;right:16px;left:auto;font-size:14px;
  color:var(--accent-ink);}

.screen-edit-card{display:flex;flex-direction:column;gap:14px;}
.screen-edit-card label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--type-dim);
  font-family:var(--mono);letter-spacing:.04em;}
.screen-edit-card input[type="text"],.screen-edit-card input[type="password"]{
  background:var(--slab-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type);font-family:var(--sans);font-size:14px;padding:10px 12px;outline:none;}
.avatar-picker{display:flex;flex-wrap:wrap;gap:9px;}
.avatar-swatch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;}
.avatar-swatch.sel{border-color:var(--type);}
.screen-edit-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px;}
.screen-edit-actions button{flex:1;min-width:100px;background:var(--slab-2);border:1px solid var(--rule);
  border-radius:var(--r-sm);color:var(--type-dim);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;padding:10px;cursor:pointer;}
.screen-edit-actions button:hover{color:var(--type);border-color:var(--rule-lit);}
.screen-edit-actions #saveScreenBtn{flex-basis:100%;order:-1;}
.screen-edit-actions button.danger{color:var(--t-buy);border-color:color-mix(in oklab, var(--t-buy) 40%, transparent);}
.screen-edit-actions button.danger:hover{background:color-mix(in oklab, var(--t-buy) 12%, transparent);}

/* ---------- account menu ---------- */
.account-menu{position:relative;flex-shrink:0;}
.account-btn{width:26px;height:26px;padding:0;border:none;background:none;cursor:pointer;
  border-radius:50%;overflow:hidden;display:block;}
.account-btn .avatar{width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:700;}
.account-btn.login-mode{width:auto;height:26px;padding:0 12px;border-radius:var(--r-sm);
  border:1px solid var(--rule-lit);background:var(--slab-2);color:var(--type-dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;}
.account-btn.login-mode:hover{color:var(--type);border-color:var(--accent-ink);}
.account-drop[hidden]{display:none;}
.account-drop{position:absolute;top:34px;right:0;z-index:5;min-width:190px;background:var(--glass);
  border:1px solid var(--glass-border);border-radius:var(--r);box-shadow:var(--shadow-lift);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  padding:6px;display:flex;flex-direction:column;gap:2px;}
.account-drop-label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--type-faint);padding:8px 10px 6px;border-bottom:1px solid var(--rule);margin-bottom:4px;}
.account-drop button{background:none;border:none;text-align:left;padding:8px 10px;border-radius:var(--r-sm);
  color:var(--type);font-family:var(--sans);font-size:13px;cursor:pointer;}
.account-drop button:hover{background:var(--slab-2);}

/* ---------- icons ---------- */
/* Base size for icon-bell wherever it's dropped in without its own
   override below — sits close to body text size so it reads clearly
   even inside the tiny mono pill buttons (.copyLink is 9.5px). */
.icon-bell{width:13px;height:13px;vertical-align:-2px;flex-shrink:0;}

/* ---------- notification centre ---------- */
.notif-menu{position:relative;flex-shrink:0;}
.notif-btn{width:26px;height:26px;padding:0;border:none;background:none;cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;color:var(--type-dim);
  border-radius:50%;transition:color var(--dur) var(--ease),background var(--dur) var(--ease);}
.notif-btn:hover,.notif-btn[aria-expanded="true"]{color:var(--type);background:var(--slab-2);}
.notif-btn .icon-bell{width:15px;height:15px;vertical-align:0;}
.notif-badge[hidden]{display:none;}
.notif-badge{position:absolute;top:-3px;right:-4px;min-width:15px;height:15px;padding:0 4px;
  border-radius:8px;background:var(--accent);color:#fff;font-family:var(--sans);font-size:9.5px;font-weight:700;
  line-height:15px;text-align:center;box-shadow:0 0 0 2px var(--ink);}
.notif-drop[hidden]{display:none;}
.notif-drop{position:absolute;top:36px;right:-6px;z-index:40;width:380px;max-width:calc(100vw - 24px);
  max-height:min(560px,76vh);overflow-y:auto;overscroll-behavior:contain;background:var(--slab);
  border:1px solid var(--rule-lit);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
  font-family:var(--sans);color:var(--type);animation:nc-in .16s var(--ease-out) both;
  scrollbar-width:thin;scrollbar-color:var(--rule-lit) transparent;}
@keyframes nc-in{from{opacity:0;transform:translate3d(0,-6px,0);}to{opacity:1;transform:none;}}
.nc-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:13px 14px 11px;
  background:var(--slab);border-bottom:1px solid var(--rule);}
.nc-head b{font-size:14px;font-weight:700;letter-spacing:-.01em;}
.nc-head .nc-link{margin-left:auto;}
.nc-count{font-size:12px;color:var(--type-faint);}
.nc-back{background:none;border:none;color:var(--type-dim);font-size:20px;line-height:1;cursor:pointer;padding:0 4px 2px 0;}
.nc-back:hover{color:var(--type);}
.nc-link{background:none;border:none;padding:2px 0;cursor:pointer;color:var(--accent-ink);
  font-family:var(--sans);font-size:12.5px;font-weight:600;}
.nc-link:hover{text-decoration:underline;}
.nc-sec{padding:12px 14px 4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--type-faint);}
.nc-list{display:flex;flex-direction:column;padding:0 6px;}
/* .nc-row wraps the main button so the play/dismiss controls can sit beside
   it without nesting a <button> inside a <button> (same as .card-wrap). */
.nc-row{position:relative;display:flex;align-items:center;border-radius:var(--r);
  transition:background var(--dur) var(--ease);}
.nc-row:hover{background:var(--slab-2);}
.nc-main{display:flex;gap:12px;align-items:center;flex:1;min-width:0;padding:9px 8px;cursor:pointer;
  text-align:left;background:none;border:none;color:inherit;font:inherit;border-radius:var(--r);}
.nc-thumb{position:relative;flex-shrink:0;width:44px;height:66px;border-radius:6px;overflow:hidden;background:var(--slab-3);}
.nc-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.nc-thumb-ph{display:block;width:100%;height:100%;}
.nc-row.is-new .nc-thumb::after{content:"";position:absolute;top:5px;left:5px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px rgba(0,0,0,.55);}
.nc-body{display:flex;flex-direction:column;min-width:0;gap:1px;}
.nc-kicker{font-size:11px;font-weight:700;color:var(--accent-ink);}
.nc-row:not(.is-new):not(.is-upcoming) .nc-kicker{color:var(--type-faint);}
.nc-when{color:var(--t-stream);}
.nc-body b{font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nc-row:not(.is-new) .nc-body b{font-weight:500;color:var(--type-dim);}
.nc-sub{font-size:12px;color:var(--type-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nc-time{font-size:11px;color:var(--type-faint);margin-top:2px;}
.nc-actions{display:flex;align-items:center;gap:4px;padding-right:8px;}
.nc-play,.nc-dismiss{width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;flex-shrink:0;
  transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease);}
.nc-play{background:var(--type);color:var(--ink);border:none;}
.nc-play svg{width:14px;height:14px;margin-left:2px;}
.nc-play:hover{background:var(--accent);color:#fff;}
.nc-dismiss{background:none;border:1px solid transparent;color:var(--type-faint);font-size:11px;opacity:0;}
.nc-row:hover .nc-dismiss,.nc-dismiss:focus-visible{opacity:1;}
.nc-dismiss:hover{background:var(--slab-3);color:var(--type);}
@media (hover:none),(pointer:coarse){ .nc-dismiss{opacity:.8;} }
.nc-unfollow{margin-right:10px;flex-shrink:0;background:none;border:1px solid var(--rule-lit);border-radius:999px;
  color:var(--type-dim);font:600 12px var(--sans);padding:5px 11px;cursor:pointer;}
.nc-unfollow:hover{border-color:var(--type);color:var(--type);}
.nc-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:34px 28px 36px;color:var(--type-dim);}
.nc-empty .icon-bell{width:30px;height:30px;color:var(--type-faint);margin-bottom:6px;}
.nc-empty b{font-size:14px;color:var(--type);}
.nc-empty span{font-size:12.5px;line-height:1.5;}
.nc-empty em{font-style:normal;color:var(--type);font-weight:600;}
.nc-foot{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;margin-top:6px;background:var(--slab);border-top:1px solid var(--rule);}
.nc-loading{font-size:12px;color:var(--type-faint);}
@media (max-width:720px){
  /* A sheet under the masthead: a 380px popover anchored to a 26px icon
     runs off a phone screen. */
  .notif-drop{position:fixed;top:auto;left:8px;right:8px;width:auto;max-width:none;margin-top:8px;max-height:72vh;}
  .nc-dismiss{opacity:.8;}
}

/* ---------- admin dashboard ---------- */
.admin-wrap{padding-top:6px;}
.admin-self{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:22px;
  background:var(--glass);border:1px solid var(--glass-border);border-left:3px solid var(--accent);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border-radius:var(--r);}
.admin-self .avatar{width:36px;height:36px;font-size:15px;border-radius:50%;}
.admin-self-name{font-weight:700;font-size:14px;}
.admin-self-tag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--type-faint);margin-top:2px;}
.admin-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.admin-head h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;}
.admin-head-actions{margin-left:auto;display:flex;gap:8px;}
.admin-head-actions button{background:var(--accent);color:#fff;border:none;border-radius:var(--r-sm);
  padding:9px 16px;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;}
.admin-head-actions button:hover{filter:brightness(1.1);}
.admin-head-actions button.ghost{background:none;border:1px solid var(--rule);color:var(--type-dim);}
.admin-head-actions button.ghost:hover{filter:none;color:var(--type);border-color:var(--rule-lit);}
.admin-create{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r);padding:18px;margin-bottom:20px;
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));}
.admin-create label{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--type-dim);
  font-family:var(--mono);letter-spacing:.03em;}
.admin-create input[type="text"],.admin-create input[type="password"],.admin-create input[type="number"]{
  background:var(--slab-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type);font-family:var(--sans);font-size:13.5px;padding:8px 10px;outline:none;}
.admin-check{flex-direction:row!important;align-items:center;gap:8px!important;}
.admin-err{grid-column:1/-1;background:color-mix(in oklab, var(--t-buy) 16%, transparent);color:var(--t-buy);
  border:1px solid color-mix(in oklab, var(--t-buy) 40%, transparent);border-radius:var(--r-sm);
  padding:8px 11px;font-size:12.5px;}
.admin-create button[type="submit"]{grid-column:1/-1;background:var(--accent);color:#fff;border:none;
  border-radius:var(--r-sm);padding:10px;cursor:pointer;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;}
.admin-table{width:100%;border-collapse:collapse;font-size:13px;}
.admin-table th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--type-faint);font-weight:500;padding:8px 10px;
  border-bottom:1px solid var(--rule);}
.admin-table td{padding:9px 10px;border-bottom:1px solid var(--rule);color:var(--type-dim);}
.admin-table td:first-child{color:var(--type);font-weight:600;}
.admin-table em{color:var(--type-faint);font-style:normal;font-size:11px;}
.admin-table tbody tr{transition:background .12s;}
.admin-table tbody tr:hover{background:var(--slab-2);}
.admin-row-actions{display:flex;gap:6px;flex-wrap:wrap;}
.admin-row-actions button{background:none;border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--type-dim);font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 8px;cursor:pointer;}
.admin-row-actions button:hover{color:var(--type);border-color:var(--rule-lit);}
.admin-row-actions button.danger{color:var(--t-buy);border-color:color-mix(in oklab, var(--t-buy) 40%, transparent);}
.admin-activity,.admin-screens,.admin-sessions{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule);}
.admin-activity h3,.admin-screens h3,.admin-sessions h3{font-size:14px;font-weight:700;margin:0 0 12px;}
.admin-screens-table .avatar{width:28px;height:28px;font-size:11px;border-radius:50%;}
.admin-sessions-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.admin-sessions-head h3{margin:0;}
.admin-sessions-head-actions{margin-left:auto;display:flex;gap:8px;}
.admin-sessions-head-actions button{background:none;border:1px solid color-mix(in oklab, var(--t-buy) 40%, transparent);
  color:var(--t-buy);border-radius:var(--r-sm);padding:7px 12px;cursor:pointer;font-family:var(--mono);
  font-size:10px;letter-spacing:.05em;text-transform:uppercase;}
.admin-sessions-head-actions button:hover{background:color-mix(in oklab, var(--t-buy) 12%, transparent);}
.admin-sessions-head-actions button.ghost{border-color:var(--rule);color:var(--type-dim);}
.admin-sessions-head-actions button.ghost:hover{background:none;color:var(--type);border-color:var(--rule-lit);}
.admin-sessions-table td{font-size:12.5px;}
.admin-sessions-global{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--rule);border-top:none;padding-top:0;}
.sess-active{color:var(--accent-ink);font-weight:600;}
.sess-expired{color:var(--type-faint);}

@media (max-width:720px){
  .gate-card{padding:24px 20px;}
  .screen-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px;}
  .avatar{width:72px;height:72px;font-size:26px;}
  .admin-create{grid-template-columns:1fr;}
}


/* ---------- avatars: character icons ---------- */
/* The photo is taken out of flow so its own proportions can never stretch
   a square tile (cast photos are 2:3). */
.avatar-img{position:relative;background:#2a2a2a;overflow:hidden;padding:0;}
.avatar-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;}
.avatar-img.wide img{object-position:center 35%;}
.acct-caret{display:none;}
.account-drop .acct-profile,.account-drop .acct-icon{display:flex;align-items:center;gap:11px;}
.account-drop .acct-profile .avatar{width:32px;height:32px;border-radius:5px;font-size:13px;font-weight:700;}
.acct-lock{margin-left:auto;color:var(--type-faint);display:flex;}
.acct-lock svg{width:13px;height:13px;}
.account-drop .acct-icon svg{width:20px;height:20px;margin:0 6px;flex-shrink:0;color:var(--type-dim);}
.account-drop .acct-signout{border-top:1px solid var(--rule);margin-top:6px;padding-top:12px;text-align:center;}

/* ---------- section pages: header, rounded dropdown, grid ---------- */
.sec-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin:6px 0 22px;}
.sec-head h1{margin:0;font-size:clamp(24px,2.6vw,38px);font-weight:800;letter-spacing:-.02em;color:var(--type);line-height:1.1;}
.sec-crumb{background:none;border:none;padding:0;cursor:pointer;color:var(--type-dim);
  font:700 clamp(16px,1.6vw,24px)/1.1 var(--sans);}
.sec-crumb:hover{color:var(--type);text-decoration:underline;}
.sec-sep{color:var(--type-faint);font-size:clamp(20px,2vw,30px);line-height:1;}
.sec-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;}
.sec-lbl{font-size:13px;color:var(--type-dim);}
.nf-dd{position:relative;display:inline-block;}
.nf-dd-btn{display:inline-flex;align-items:center;gap:12px;padding:6px 14px 6px 17px;border-radius:999px;cursor:pointer;
  border:1px solid var(--rule-lit);background:var(--slab);color:var(--type);font:600 13.5px/1.3 var(--sans);white-space:nowrap;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);}
.nf-dd-btn:hover,.nf-dd-btn[aria-expanded="true"]{border-color:var(--type-dim);}
.nf-caret{width:9px;height:6px;flex-shrink:0;transition:transform var(--dur) var(--ease);}
.nf-dd-btn[aria-expanded="true"] .nf-caret{transform:rotate(180deg);}
.nf-dd-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:40;display:grid;
  grid-template-columns:repeat(var(--cols,1),minmax(150px,auto));gap:0 6px;padding:10px;
  background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:14px;box-shadow:var(--shadow-lift);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  max-height:min(70vh,560px);overflow-y:auto;}
.nf-dd-panel[hidden]{display:none;}
.nf-dd-panel button{background:none;border:none;text-align:left;padding:7px 12px;border-radius:9px;cursor:pointer;
  color:var(--type-dim);font:14px/1.3 var(--sans);white-space:nowrap;}
.nf-dd-panel button:hover{color:var(--type);background:var(--slab-2);}
.nf-dd-panel button.on{color:var(--type);font-weight:700;}
@media (max-width:720px){
  .nf-dd-panel{grid-template-columns:repeat(min(var(--cols,1),2),minmax(0,1fr));max-width:calc(100vw - 32px);}
  .nf-dd-panel button{white-space:normal;}
}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:22px 14px;}
.sec-grid .card{flex:none;width:auto;}
.sec-more{display:flex;justify-content:center;margin:34px 0 10px;}
.nf-pill{border-radius:999px;border:1px solid var(--rule-lit);background:var(--slab-2);color:var(--type);
  padding:9px 24px;font:600 14px/1.2 var(--sans);cursor:pointer;}
.nf-pill:hover{border-color:var(--type-dim);}

/* ---------- profiles: Netflix's full-screen flow ----------
   Always Netflix-black, whichever skin is behind it: who's watching is the
   same page for every account. */
.gate.gate-nf{background:#141414;backdrop-filter:none;-webkit-backdrop-filter:none;
  align-items:flex-start;padding:0;color:#fff;}
.nfp{width:100%;max-width:1100px;margin:auto;padding:clamp(40px,9vh,110px) 24px 60px;text-align:center;
  color:#fff;font-family:var(--sans);}
.nfp h1{font-size:clamp(28px,3.5vw,56px);font-weight:500;letter-spacing:-.01em;margin:0 0 .6em;color:#fff;line-height:1.15;}
.nfp-sub{color:#999;font-size:clamp(14px,1.2vw,18px);margin:-6px 0 22px;}
.nfp-list{list-style:none;margin:0 0 clamp(30px,4.4vw,60px);padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:clamp(16px,2vw,34px);}
.nfp-tile{background:none;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  gap:.75em;position:relative;color:#808080;font-family:inherit;width:clamp(84px,10vw,180px);}
.nfp-av{position:relative;display:block;width:100%;aspect-ratio:1;}
.nfp-tile .avatar{width:100%;height:100%;border-radius:6px;font-size:clamp(34px,4.4vw,80px);
  outline:clamp(2px,.28vw,4px) solid transparent;outline-offset:calc(-1 * clamp(2px,.28vw,4px));transition:outline-color .15s;}
.nfp-tile:hover .avatar,.nfp-tile:focus-visible .avatar{outline-color:#e5e5e5;}
.nfp-tile:focus-visible{outline:none;}
.nfp-name{font-size:clamp(13px,1.3vw,20px);line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nfp-tile:hover .nfp-name,.nfp-tile:focus-visible .nfp-name{color:#e5e5e5;}
.nfp-lock{color:#808080;display:flex;margin-top:-.2em;}
.nfp-lock svg{width:clamp(14px,1.2vw,20px);height:clamp(14px,1.2vw,20px);}
.nfp-av-edit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);border-radius:6px;pointer-events:none;}
.nfp-av-edit svg{width:34%;height:34%;color:#fff;border:2px solid #fff;border-radius:50%;padding:7%;}
.nfp .avatar-add{background:transparent!important;border:none;color:#808080;}
.nfp .avatar-add svg{width:55%;height:55%;}
.nfp-add:hover .avatar-add{background:#e5e5e5!important;color:#141414;}
.nfp-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.nfp-actions.left{justify-content:flex-start;}
.nfp-btn{background:transparent;border:1px solid #808080;color:#808080;cursor:pointer;border-radius:4px;
  font:500 clamp(13px,1.1vw,17px)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:.7em 1.6em;
  transition:color .15s,border-color .15s,background-color .15s;}
.nfp-btn:hover,.nfp-btn:focus-visible{color:#fff;border-color:#fff;}
.nfp-btn.primary{background:#fff;color:#141414;border-color:#fff;font-weight:700;}
.nfp-btn.primary:hover,.nfp-btn.primary:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff;}
.nfp-btn:disabled{opacity:.5;cursor:default;}
.nfp-link{display:inline-block;background:none;border:none;color:#808080;cursor:pointer;margin-top:30px;font:14px/1.4 var(--sans);}
.nfp-link:hover{color:#fff;text-decoration:underline;}
.nfp-link.inline{margin:2px 0 0;padding:0;text-align:left;}
.nfp .gate-err{text-align:left;}
/* Edit Profile */
.nfp-edit{max-width:760px;text-align:left;}
.nfp-edit h1{padding-bottom:.35em;border-bottom:1px solid #333;margin-bottom:0;}
.nfp-edit .nfp-sub{margin:14px 0 0;}
.nfp-edit-body{display:flex;gap:clamp(16px,2.4vw,34px);align-items:flex-start;padding:26px 0;border-bottom:1px solid #333;margin-bottom:32px;}
.nfp-edit-av{position:relative;flex:0 0 clamp(88px,11vw,150px);aspect-ratio:1;background:none;border:none;padding:0;cursor:pointer;}
.nfp-edit-av .avatar{width:100%;height:100%;border-radius:6px;font-size:clamp(36px,5vw,68px);
  outline:3px solid transparent;outline-offset:-3px;transition:outline-color .15s;}
.nfp-edit-av:hover .avatar,.nfp-edit-av:focus-visible .avatar{outline-color:#fff;}
.nfp-edit-pen{position:absolute;left:7px;bottom:7px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.78);
  border:1px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;color:#fff;}
.nfp-edit-pen svg{width:16px;height:16px;}
.nfp-edit-form{flex:1;display:flex;flex-direction:column;gap:20px;min-width:0;}
.nfp-edit-form input{width:100%;background:#666;border:1px solid transparent;border-radius:3px;color:#fff;
  font:16px/1.3 var(--sans);padding:.6em .8em;outline:none;}
.nfp-edit-form input::placeholder{color:#ccc;}
.nfp-edit-form input:focus{border-color:#fff;}
.nfp-field-group h2{font-size:clamp(15px,1.3vw,19px);color:#ccc;font-weight:500;margin:0 0 10px;}
.nfp-field-group label{display:flex;flex-direction:column;gap:7px;color:#999;font-size:13px;margin-bottom:12px;}
.nfp-field-group label small{color:#737373;font-size:12px;}
/* Choose a profile icon */
.nfp-icons{max-width:none;text-align:left;padding:0 0 70px;}
.nfp-icons-head{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);padding:22px 4vw;position:sticky;top:0;z-index:2;
  background:#141414;border-bottom:1px solid #222;}
.nfp-back{background:none;border:none;color:#fff;cursor:pointer;width:40px;height:40px;padding:6px;flex-shrink:0;}
.nfp-back svg{width:100%;height:100%;}
.nfp-icons-title h1{font-size:clamp(22px,2.4vw,38px);margin:0;}
.nfp-icons-title p{margin:4px 0 0;color:#ccc;font-size:clamp(14px,1.3vw,20px);}
.nfp-icons-cur{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:clamp(14px,1.3vw,20px);color:#fff;}
.nfp-icons-cur .avatar{width:clamp(44px,5vw,76px);height:clamp(44px,5vw,76px);border-radius:6px;font-size:clamp(20px,2.2vw,32px);}
.nfp-irow{padding:20px 4vw 0;}
.nfp-irow h2{font-size:clamp(15px,1.4vw,22px);font-weight:600;margin:0 0 6px;color:#e5e5e5;}
.nfp-loading{color:#808080!important;}
.nfp-igroup{margin:30px 4vw 0;padding-top:18px;border-top:1px solid #262626;color:#808080;
  font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;}
.nfp-istrip{display:flex;gap:clamp(8px,1vw,14px);overflow-x:auto;overflow-y:hidden;padding:10px 4px 14px;scrollbar-width:none;}
.nfp-istrip::-webkit-scrollbar{display:none;}
.nfp-iwrap{position:relative;}
.nfp-inudge{position:absolute;top:10px;bottom:14px;width:clamp(34px,3vw,52px);z-index:2;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .2s,background-color .2s;}
.nfp-inudge svg{width:26px;height:26px;}
.nfp-inudge.l{left:0;border-radius:6px 0 0 6px;background:linear-gradient(to right,rgba(20,20,20,.9),rgba(20,20,20,.35));}
.nfp-inudge.r{right:0;border-radius:0 6px 6px 0;background:linear-gradient(to left,rgba(20,20,20,.9),rgba(20,20,20,.35));}
.nfp-iwrap:hover .nfp-inudge,.nfp-inudge:focus-visible{opacity:1;}
.nfp-inudge:hover svg{transform:scale(1.2);}
.nfp-inudge:disabled{opacity:0!important;pointer-events:none;}
@media (hover:none),(pointer:coarse){ .nfp-inudge{display:none;} }
.nfp-icon{flex:0 0 clamp(72px,8.4vw,132px);aspect-ratio:1;background:none;border:none;padding:0;cursor:pointer;
  border-radius:6px;transition:transform var(--dur) var(--ease);}
.nfp-icon .avatar{width:100%;height:100%;border-radius:6px;font-size:clamp(26px,3vw,48px);
  outline:3px solid transparent;outline-offset:-3px;transition:outline-color .15s;}
.nfp-icon:hover,.nfp-icon:focus-visible{transform:scale(1.07);outline:none;}
.nfp-icon:hover .avatar,.nfp-icon:focus-visible .avatar{outline-color:#fff;}
.nfp-icon.sk{display:block;background:#232323;cursor:default;}
.nfp-icon.sk:hover{transform:none;}
/* Change profile icon? */
.nfp-swap{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,64px);margin:30px 0 46px;}
.nfp-swap > div{display:flex;flex-direction:column;align-items:center;gap:12px;color:#ccc;font-size:clamp(14px,1.3vw,19px);}
.nfp-swap .avatar{width:clamp(96px,12vw,190px);height:clamp(96px,12vw,190px);border-radius:6px;font-size:clamp(40px,5vw,80px);}
.nfp-arrow{width:clamp(30px,3vw,48px);height:clamp(30px,3vw,48px);color:#fff;}
/* PIN */
.nfp-pin{max-width:560px;}
.nfp-pin-av .avatar{width:96px;height:96px;margin:0 auto 20px;border-radius:6px;font-size:40px;}
.nfp-pin .nfp-sub{margin:0 0 10px;}
.nfp-pin h1{font-size:clamp(20px,2.3vw,32px);}
.nfp-pin form{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:22px;}
.nfp-pin input{width:230px;text-align:center;font:30px/1 var(--sans);letter-spacing:.5em;background:transparent;
  border:1px solid #fff;border-radius:6px;color:#fff;padding:12px 0 12px .5em;outline:none;}
.nfp-pin input:focus{border-color:var(--accent-ink);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent);}
@media (max-width:600px){
  .nfp-edit-body{flex-direction:column;align-items:center;}
  .nfp-edit-form{width:100%;}
  .nfp-icons-cur span{display:none;}
}