* { margin:0; padding:0; box-sizing:border-box; }
/* The browser hides [hidden] via a UA rule of the same specificity as a class, and
   author styles win — so any `display:` we set (flex, inline-flex, inline-block…)
   silently defeats the hidden attribute and the element keeps painting. This kept
   the loading dots, the admin link and the ADMIN pill on screen while JS believed
   they were hidden. Make the attribute mean what it says, everywhere. */
[hidden] { display:none !important; }
:root {
  --bg:#0a0a0d; --panel:#131318; --gold:#d4af5a; --blue:#3d6cf5;
  --text:#eceae4; --dim:#8b8a94; --line:#26262e;
}
body {
  background:var(--bg); color:var(--text);
  font-family:'Inter',sans-serif; min-height:100vh;
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(61,108,245,.14), transparent);
}
/* hero: the corner tools moved up into the shared .sitebar (css/chrome.css), so the
   hero no longer reserves headroom for absolutely-positioned chrome */
header { text-align:center; padding:30px 24px 8px; position:relative; }
.headtools { display:flex; align-items:center; gap:10px; }
.acctbtn {
  display:inline-flex; align-items:center; gap:7px; max-width:230px; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--dim);
  font-family:'Inter',sans-serif; font-size:12px; padding:7px 14px; transition:all .25s;
}
.acctbtn:hover { color:var(--text); border-color:var(--gold); }
.acctbtn .acctico { flex-shrink:0; opacity:.8; }
.acctbtn .who { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acctbtn.isadmin { border-color:rgba(212,175,90,.45); color:var(--text); }
/* only the admin role is announced — a regular account says nothing about its rank */
.rolepill {
  display:inline-block; font-size:9px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#0a0a0d; background:linear-gradient(135deg, var(--gold), #b8923f); border-radius:999px;
  padding:2px 8px; vertical-align:middle; flex-shrink:0;
}
.adminbtn {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  background:transparent; border:1px solid rgba(212,175,90,.35); color:var(--gold);
  transition:all .25s;
}
.adminbtn:hover { border-color:var(--gold); background:rgba(212,175,90,.1); }
@media (max-width:640px){
  .headtools { gap:7px; }
  .acctbtn { max-width:132px; padding:6px 10px; font-size:11.5px; }
}
.gearbtn {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:transparent; border:1px solid var(--line); color:var(--dim); cursor:pointer;
  display:grid; place-items:center; transition:all .3s;
}
.gearbtn:hover { border-color:var(--gold); color:var(--gold); transform:rotate(45deg); }
.brand {
  font-family:'Playfair Display',serif; font-size:46px; font-weight:700; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.brand .brandmark { width:54px; height:54px; display:block; }
@media (max-width:640px){ .brand { font-size:34px; gap:11px; } .brand .brandmark { width:38px; height:38px; } }
.brand em { font-style:normal; color:var(--blue); }
.tag { color:var(--dim); font-size:12px; letter-spacing:.35em; text-transform:uppercase; margin-top:10px; }
/* ---- the search bar -----------------------------------------------------------------
   This is the whole product's front door, and it used to be a bare bottom border — grey
   italic text floating on a dark page, indistinguishable from a tagline. Now it is
   unmistakably a vessel: a lit pill with a magnifying glass, a gold caret and a focus
   glow. Deliberately STILL — no idle animation of any kind; the glow only answers you. */
.searchwrap { max-width:680px; margin:36px auto 0; padding:0 24px; position:relative; }
.qicon {
  position:absolute; left:46px; top:50%; transform:translateY(-50%);
  color:var(--gold); opacity:.75; pointer-events:none;
}
.qclear {
  position:absolute; right:42px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--dim); cursor:pointer;
  font-size:15px; padding:6px 8px; transition:color .2s;
}
.qclear:hover { color:var(--gold); }
/* "press / to search" — shown only when the box is empty, unfocused, and a keyboard is likely */
.qkbd {
  position:absolute; right:46px; top:50%; transform:translateY(-50%);
  border:1px solid var(--line); border-radius:6px; padding:2px 9px;
  font-family:'Inter',sans-serif; font-size:11.5px; color:#55555f; pointer-events:none;
}
.search {
  width:100%; background:var(--panel); border:1px solid #2e2e38; border-radius:999px;
  color:var(--text); font-family:'Playfair Display',serif; font-size:24px; font-style:italic;
  padding:15px 78px; outline:none; text-align:center; caret-color:var(--gold);
  box-shadow:0 12px 36px rgba(0,0,0,.4);
  transition:border-color .3s, box-shadow .3s;
}
.search::placeholder { color:#75747f; opacity:1; }
.search:hover { border-color:#44444f; }
.search:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 5px rgba(212,175,90,.10), 0 12px 36px rgba(0,0,0,.4);
}
.filterband { padding-top:26px; }
.filters { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; padding:14px 24px 0; max-width:1100px; margin:0 auto; }
.filters.fine { padding-top:18px; }
.fgroup { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.chip {
  background:transparent; border:1px solid var(--line); color:var(--dim);
  padding:6px 14px; border-radius:999px; font-size:12px; font-family:'Inter'; cursor:pointer;
  letter-spacing:.04em; transition:all .25s; white-space:nowrap;
}
.chip:hover { border-color:var(--gold); color:var(--text); }
.chip.on { border-color:var(--gold); color:var(--gold); background:rgba(212,175,90,.08); }
.chip.ex { border-color:rgba(190,80,80,.55); color:#c97a7a; background:rgba(190,80,80,.07); text-decoration:line-through; text-decoration-color:rgba(201,122,122,.55); }
.chip.ex:hover { border-color:#c97a7a; color:#dfa0a0; }
.chip.muted { opacity:.45; }
.chip.muted:hover { opacity:1; }
.chip.tag { border-style:dashed; cursor:default; color:var(--gold); opacity:.8; }
.chip .n { color:#55555f; font-size:10.5px; margin-left:4px; }
.chip .sdot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; opacity:.9; }
/* segmented type control */
.seg { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.seg button {
  background:transparent; border:none; border-left:1px solid var(--line); color:var(--dim);
  padding:8px 18px; font-family:'Inter'; font-size:12.5px; letter-spacing:.04em; cursor:pointer; transition:all .25s;
  display:inline-flex; align-items:center; gap:7px;
}
.seg button:first-child { border-left:none; }
.seg button:hover { color:var(--text); }
.seg button.on { color:var(--gold); background:rgba(212,175,90,.10); }
/* genre bar: ONE list — collapsed shows its first row, expanded unfolds in place */
.genrebar { position:relative; align-items:flex-start; flex-wrap:nowrap; }
.genrelist {
  flex:0 1 auto; display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  max-height:34px; overflow:hidden; transition:max-height .3s ease;
}
.genrelist.expanded { max-height:260px; }
/* settings: drag-to-reorder pills */
.dragchip { cursor:grab; touch-action:none; user-select:none; }
.dragchip.dragging {
  cursor:grabbing; border-color:var(--gold); color:var(--gold); background:#1a1a21;
  box-shadow:0 10px 28px rgba(0,0,0,.65), 0 0 14px rgba(212,175,90,.25);
}
.holechip { border:1px dashed rgba(139,138,148,.45); background:transparent; }
.prevchip {
  border:1px dashed var(--gold); background:rgba(212,175,90,.08);
  box-shadow:0 0 16px rgba(212,175,90,.35), inset 0 0 8px rgba(212,175,90,.12);
}
/* fixed width: "All services · all" and "Show less" differ by ~10px, and since the
   list is centred that difference slides every chip sideways on each toggle */
.allg { border-style:dashed; color:var(--text); min-width:132px; }
.allg:hover { border-color:var(--gold); }
.allg.on { border-color:var(--gold); color:var(--gold); background:rgba(212,175,90,.06); border-style:solid; }
.agcount { color:var(--gold); font-size:11px; }
.agchev { color:var(--gold); font-size:10px; margin-left:6px; }
.divider { width:1px; height:22px; background:var(--line); margin:0 6px; }
.ratingctl, .yearctl { display:flex; align-items:center; gap:10px; color:var(--dim); font-size:12.5px; }
.ratingctl b { color:var(--gold); font-size:13px; min-width:56px; font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:.03em; }
.flabel { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#55555f; }
/* custom slider: hairline track with gold fill (--fill set from JS), ring thumb */
input[type=range] { -webkit-appearance:none; appearance:none; width:150px; height:18px; background:transparent; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track {
  height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--gold) var(--fill,0%), var(--line) var(--fill,0%));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; margin-top:-5.5px; width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:2px solid var(--gold); box-shadow:0 0 10px rgba(212,175,90,.35);
  transition:box-shadow .2s; cursor:pointer; /* some engines drop the input's cursor here */
}
input[type=range]:hover::-webkit-slider-thumb { box-shadow:0 0 14px rgba(212,175,90,.6); }
input[type=range]::-moz-range-track { height:3px; border-radius:2px; background:var(--line); }
input[type=range]::-moz-range-progress { height:3px; border-radius:2px; background:var(--gold); }
input[type=range]::-moz-range-thumb {
  width:10px; height:10px; border-radius:50%;
  background:var(--bg); border:2px solid var(--gold); box-shadow:0 0 10px rgba(212,175,90,.35);
  cursor:pointer;
}
.yearctl .ynum {
  width:52px; background:transparent; border:1px solid var(--line); border-radius:999px;
  color:var(--text); font-size:12px; padding:5px 8px; outline:none; text-align:center;
  appearance:textfield; -moz-appearance:textfield; font-variant-numeric:tabular-nums;
}
.yearctl .ynum::-webkit-outer-spin-button, .yearctl .ynum::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.yearctl .ynum:focus { border-color:var(--gold); }
.yearctl .ynum.active { color:var(--gold); border-color:rgba(212,175,90,.5); }
.yearctl .dash { color:#4c4c56; }
/* ---- catalog motion: NEW badge + chip ---- */
.newbadge {
  position:absolute; top:8px; left:8px; z-index:2;
  background:linear-gradient(135deg, var(--gold), #b8923f); color:#0a0a0d;
  font-size:9.5px; font-weight:600; letter-spacing:.14em; padding:3px 7px; border-radius:4px;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.chip.newchip.on { color:var(--gold); border-color:var(--gold); background:rgba(212,175,90,.12); }
/* a saved title that has left every service: still yours, visibly retired */
.card.gone .posterbox img { filter:grayscale(.85) brightness(.55); }
.card.gone .ct h3 { color:var(--dim); }
.gonebadge {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; text-align:center;
  background:rgba(8,8,10,.86); border:1px solid rgba(236,234,228,.28); color:var(--text);
  font-size:8.5px; font-weight:600; letter-spacing:.14em; padding:5px 8px; border-radius:5px; max-width:82%;
}
/* ---- rentals: visibly NOT the same thing as "included in your subscription" ---- */
.chip.rentchip.on { color:#c9a227; border-color:#c9a227; background:rgba(201,162,39,.12); }
.rentbadge {
  position:absolute; top:8px; left:8px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(10,10,13,.85); border:1px solid rgba(201,162,39,.7); color:#d9b64a;
  font-size:9px; font-weight:600; letter-spacing:.14em; padding:2px 6px; border-radius:4px;
}
.rentbadge svg { width:9px; height:9px; flex-shrink:0; }
.svcrow .rentlogo { opacity:.5; filter:grayscale(.6); }
.rentrow { margin-top:8px; }
.svcpill.rent { border-style:dashed; opacity:.9; }
.rentlabel {
  display:inline-flex; align-items:center; gap:4px;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#d9b64a;
  border:1px solid rgba(201,162,39,.5); border-radius:4px; padding:2px 6px; margin-left:2px;
}
.rentlabel svg { width:10px; height:10px; flex-shrink:0; }

/* ---- roulette ---- */
/* out-of-flow like the filter pill it mirrors, so neither ever displaces the count */
.dicebtn {
  position:absolute; left:40px; top:50%; transform:translateY(-50%); z-index:34;
  display:inline-flex; align-items:center; gap:7px; background:transparent; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; color:var(--dim);
  font-family:'Inter',sans-serif; font-size:12px; padding:6px 14px; transition:color .2s, border-color .2s, background .2s; white-space:nowrap;
}
@media (max-width:700px){ .dicebtn { left:12px; padding:6px 10px; font-size:0; gap:0; } }
.dicebtn:hover { color:var(--gold); border-color:rgba(212,175,90,.55); background:rgba(212,175,90,.07); }
.dicebtn.rolling { opacity:.6; pointer-events:none; }
.dicebtn.rolling svg { animation:tumble .5s linear infinite; }
@keyframes tumble { to { transform:rotate(360deg); } }
.spinagain {
  position:absolute; right:16px; bottom:16px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  background:rgba(10,10,13,.82); border:1px solid rgba(212,175,90,.5); border-radius:999px;
  color:var(--gold); font-family:'Inter',sans-serif; font-size:12.5px; padding:8px 16px; cursor:pointer;
  backdrop-filter:blur(6px); transition:all .2s;
}
.spinagain:hover { background:rgba(212,175,90,.16); border-color:var(--gold); }

/* ---- trailer ---- */
.trailerbtn {
  position:absolute; left:16px; bottom:16px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  background:rgba(10,10,13,.82); border:1px solid rgba(236,234,228,.28); border-radius:999px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:12.5px; padding:8px 16px; cursor:pointer;
  backdrop-filter:blur(6px); transition:all .2s;
}
.trailerbtn:hover { border-color:var(--gold); color:var(--gold); }
iframe.trailer { width:100%; height:100%; display:block; border:0; background:#000; }
/* playing: give the video a true 16:9 stage and clear everything off it —
   the banner crop and the overlapping poster/title used to bury YouTube's controls */
.sheet.playing .hero { height:auto; aspect-ratio:16/9; background:#000; }
.sheet.playing .hero::after { display:none; }
.sheet.playing .sheetbody { margin-top:22px; }
.sheet.playing .sheetinfo h2 { margin-top:0; }
.sheet.playing .sheetposter { margin-top:0; }
.trailerclose {
  position:absolute; top:10px; right:10px; z-index:5; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(10,10,13,.75); border:1px solid rgba(236,234,228,.25); color:var(--text);
  font-size:14px; backdrop-filter:blur(6px); transition:all .2s;
}
.trailerclose:hover { border-color:var(--gold); color:var(--gold); background:rgba(10,10,13,.92); }
.departed {
  margin-top:8px; display:flex; flex-wrap:wrap; gap:8px;
  color:#6d6c76; font-size:11.5px; font-style:italic;
}

/* age rungs: small, quiet chips — same multi-select idiom as genres, less weight */
.agectl { display:flex; align-items:center; gap:10px; color:var(--dim); font-size:12.5px; }
.agerow { display:flex; gap:5px; }
.agechip {
  background:transparent; border:1px solid var(--line); color:var(--dim); cursor:pointer;
  font-family:'Inter',sans-serif; font-size:11.5px; padding:4px 10px; border-radius:999px;
  transition:color .2s, border-color .2s, background .2s; white-space:nowrap;
}
.agechip:hover { color:var(--text); border-color:rgba(212,175,90,.5); }
.agechip.on { color:var(--gold); border-color:var(--gold); background:rgba(212,175,90,.1); }
/* the vote count lives in this tooltip rather than the line — it is reassurance,
   not something you read every time */
.scoremark { cursor:help; }

/* age certificate in the title sheet: a boxed number, the way ratings are printed */
.agemark {
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:19px;
  padding:0 5px; margin-right:2px; border:1.5px solid var(--gold); border-radius:4px;
  color:var(--gold); font-size:11px; font-weight:600; letter-spacing:0;
  vertical-align:middle; cursor:help;
}

/* the spelling-correction notice: informative, not alarming */
.corrected { text-align:center; color:var(--dim); font-size:13px; padding:6px 24px 0; }
.corrected em { font-style:italic; font-family:'Playfair Display',serif; color:var(--gold); font-size:15px; }

/* ---- the single answer block, shown where the results would be ---- */
.noresult { grid-column:1/-1; max-width:660px; margin:34px auto 60px; text-align:center; }
.nrlead {
  font-family:'Playfair Display',serif; font-style:italic; font-size:23px; color:var(--text);
  line-height:1.35;
}
.nrsub { color:var(--dim); font-size:13.5px; margin-top:10px; }
.nrhits { display:flex; flex-direction:column; gap:8px; margin:20px 0 6px; text-align:left; }
.nrhit {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; width:100%;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 14px 8px 8px;
  cursor:pointer; font-family:'Inter',sans-serif; transition:border-color .2s;
}
.nrhit:hover { border-color:var(--gold); }
.nrhit img { width:34px; border-radius:5px; display:block; }
.nrhitname { color:var(--text); font-size:13.5px; text-align:left; }
.nrhitname .nryear { color:var(--faint,#55555f); font-size:12px; }
.nrhitwhere { color:var(--dim); font-size:12px; white-space:nowrap; }
.nrhitwhere b { color:var(--gold); font-weight:500; }
.nrclear {
  margin-top:10px; background:transparent; border:1px solid rgba(212,175,90,.45); border-radius:999px;
  color:var(--gold); font-family:'Inter',sans-serif; font-size:12.5px; padding:8px 20px; cursor:pointer;
  transition:background .2s;
}
.nrclear:hover { background:rgba(212,175,90,.12); }
@media (max-width:560px){
  .nrhit { grid-template-columns:auto 1fr; }
  .nrhitwhere { grid-column:2; white-space:normal; }
}
#lookupWrap { max-width:820px; margin:0 auto 28px; padding:0 24px; }
.lookup {
  display:flex; gap:18px; background:var(--panel, #131318); border:1px solid var(--line);
  border-left:2px solid var(--gold); border-radius:12px; padding:16px 18px;
  text-align:left; /* it now lives inside the centred answer block */
}
.lkposter { width:88px; border-radius:6px; align-self:flex-start; }
.lkbody { flex:1; min-width:0; }
.lkbody h3 { font-family:'Playfair Display',serif; font-size:19px; font-weight:500; margin-bottom:3px; }
.lkyear { color:var(--dim); font-size:14px; font-weight:400; }
.lkmsg { color:var(--dim); font-size:12.5px; margin-bottom:10px; }
.lkrow { display:flex; gap:10px; align-items:baseline; margin-top:7px; flex-wrap:wrap; }
.lklabel { color:#55555f; font-size:10px; letter-spacing:.18em; text-transform:uppercase; min-width:64px; }
.lkprov { display:flex; gap:8px; flex-wrap:wrap; }
.lkp {
  display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:999px; padding:3px 10px 3px 4px;
}
.lkp img { width:18px; height:18px; border-radius:4px; }
.lklink { display:inline-block; margin-top:11px; color:var(--gold); font-size:12px; text-decoration:none; }
.lklink:hover { text-decoration:underline; }

/* dual-handle year slider over a histogram of the catalog */
.yearslider {
  position:relative; width:230px; height:38px; display:block; cursor:pointer;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
.yearslider * { -webkit-user-drag:none; user-select:none; }
.yhist { position:absolute; left:0; right:0; top:2px; height:22px; display:flex; align-items:flex-end; gap:1px; pointer-events:none; }
.yhist i { flex:1 1 auto; background:#2a2a33; border-radius:1px 1px 0 0; min-height:1px; transition:background .15s; }
.yhist i.in { background:rgba(212,175,90,.55); }
.ytrack { position:absolute; left:0; right:0; bottom:10px; height:3px; background:var(--line); border-radius:2px; pointer-events:none; }
.yfill { position:absolute; top:0; bottom:0; background:var(--gold); border-radius:2px; }
/* pointer, matching the score slider and the usual slider convention — grab/grabbing
   stays reserved for things you actually pick up and move (the reorder pills) */
.ythumb {
  position:absolute; bottom:4px; width:15px; height:15px; margin-left:-7.5px; border-radius:50%;
  background:var(--bg); border:2px solid var(--gold); box-shadow:0 0 10px rgba(212,175,90,.35);
  cursor:pointer; transition:box-shadow .2s, transform .12s; touch-action:none;
}
/* generous invisible hit area — the visible dot stays small */
.ythumb::before { content:''; position:absolute; inset:-11px; border-radius:50%; }
.ythumb:hover, .ythumb:focus { box-shadow:0 0 14px rgba(212,175,90,.7); outline:none; transform:scale(1.12); }
.ythumb.dragging { box-shadow:0 0 18px rgba(212,175,90,.85); transform:scale(1.15); z-index:3; }
.ybubble {
  position:absolute; bottom:26px; transform:translateX(-50%); pointer-events:none;
  background:rgba(8,8,10,.95); border:1px solid rgba(212,175,90,.5); border-radius:6px;
  color:var(--gold); font-size:11px; padding:2px 7px; white-space:nowrap; opacity:0; transition:opacity .15s;
  font-variant-numeric:tabular-nums;
}
.ybubble.show { opacity:1; }
select {
  background:var(--panel); color:var(--text); border:1px solid var(--line);
  border-radius:999px; padding:7px 32px 7px 16px; font-size:12.5px; outline:none; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d4af5a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
select:hover { border-color:var(--gold); }
.clear {
  background:none; border:none; color:var(--dim); cursor:pointer;
  font-family:'Playfair Display',serif; font-style:italic; font-size:13.5px;
  border-bottom:1px dotted rgba(212,175,90,.6); padding:0 2px; margin-left:6px; transition:color .25s;
}
.clear:hover { color:var(--gold); }
.countbar { position:relative; max-width:1500px; margin:0 auto; }
.count { text-align:center; color:#55555f; font-size:12px; letter-spacing:.25em; text-transform:uppercase; padding:22px 0 6px; min-height:38px; }
/* out-of-flow filter pill: ✕ = instant clear-all, label unfolds the manifest */
.clearwrap {
  position:absolute; right:40px; top:50%; z-index:35;
  opacity:0; pointer-events:none; transform:translateY(-50%) scale(.92);
  transition:opacity .25s, transform .25s;
}
.clearwrap.show { opacity:1; pointer-events:auto; transform:translateY(-50%) scale(1); }
.clearpill {
  display:flex; align-items:stretch; border:1px solid rgba(212,175,90,.35);
  border-radius:999px; overflow:hidden; background:rgba(10,10,13,.6);
}
.cpx, .cpl {
  background:transparent; border:none; color:var(--gold); cursor:pointer;
  font-family:'Inter'; font-size:11.5px; letter-spacing:.06em; white-space:nowrap;
  transition:background .2s;
}
.cpx { padding:5px 11px; border-right:1px solid rgba(212,175,90,.3); }
.cpl { padding:5px 13px; }
.cpx:hover, .cpl:hover { background:rgba(212,175,90,.14); }
.fpanel {
  position:absolute; top:calc(100% + 8px); right:0; z-index:40;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:10px; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;
  min-width:180px; max-width:340px; box-shadow:0 16px 44px rgba(0,0,0,.65);
}
.fpanel[hidden] { display:none; }
.fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--line); border-radius:999px;
  color:var(--text); font-family:'Inter'; font-size:11.5px; padding:4px 10px 4px 11px;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.fchip .fk { color:#55555f; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.fchip .fx { color:var(--dim); font-size:11px; }
.fchip:hover { border-color:#c97a7a; }
.fchip:hover .fx { color:#dfa0a0; }
@media (max-width:700px){ .clearwrap { right:12px; } }
/* Tonight's picks: a framed, softly glowing section with its own scroller */
.recwrap {
  max-width:1420px; margin:12px auto 20px; width:calc(100% - 64px);
  border:1px solid rgba(212,175,90,.22); border-radius:16px;
  background:linear-gradient(180deg, rgba(212,175,90,.05), rgba(212,175,90,.012));
  box-shadow:0 8px 32px rgba(0,0,0,.35), 0 0 28px rgba(212,175,90,.06);
  padding:12px 18px 4px;
}
.rechead { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 10px; }
.rectitle { font-family:'Playfair Display',serif; font-size:19px; color:var(--gold); }
.rechint { font-family:'Inter'; font-size:11.5px; color:#55555f; letter-spacing:.05em; }
.recctrl { display:flex; gap:8px; }
.recbtn {
  background:transparent; border:1px solid rgba(212,175,90,.3); border-radius:999px;
  color:var(--gold); font-family:'Inter'; font-size:11px; letter-spacing:.05em;
  padding:4px 12px; cursor:pointer; white-space:nowrap; transition:all .2s;
}
.recbtn:hover { background:rgba(212,175,90,.12); border-color:var(--gold); }
.recwrap.collapsed { padding-bottom:12px; }
.recwrap.collapsed .recbody { display:none; }
.recbody { position:relative; }
.recstrip {
  display:flex; gap:16px; overflow-x:auto; padding:2px 10px 14px;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
.recstrip::-webkit-scrollbar { display:none; }
.recnav {
  position:absolute; top:38%; transform:translateY(-50%); z-index:5;
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  background:rgba(10,10,13,.92); border:1px solid rgba(212,175,90,.4); color:var(--gold);
  font-size:18px; line-height:1; display:grid; place-items:center; transition:all .25s;
}
.recnav.left { left:-8px; }
.recnav.right { right:-8px; }
.recnav:hover { border-color:var(--gold); box-shadow:0 0 14px rgba(212,175,90,.3); }
.recnav[hidden] { display:none; }
.reccard { flex:0 0 148px; cursor:pointer; }
.reccard .posterbox img { aspect-ratio:2/3; }
.reccard .ct h3 { font-size:13.5px; }
/* A pick carries the same caption as a grid card — type glyph, year, genre. It used to be
   hidden to keep the strip short, but a pick you can't size up is a pick you don't take:
   the type and the year are exactly what decides whether it fits tonight. Dialled down a
   step so the "why" line underneath still reads as the card's own voice. */
.reccard .ct p { font-size:10.5px; letter-spacing:.11em; margin-top:4px; }
.reccard .ct p .tico { margin-right:6px; }
.reccard .why {
  color:var(--dim); font-size:10.5px; line-height:1.45; margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.reccard .why b { color:rgba(212,175,90,.85); font-weight:500; }
/* A watchlist arrival is a fact, not a guess, so it reads a shade brighter than a taste
   pick — and wears the bookmark that already means "your list" everywhere else. The poster
   gets its gold NEW badge free from cardEl, so three cues land without a new row. */
.reccard .why.arrival { color:#b9b7c2; }
.reccard .why.arrival svg { width:11px; height:11px; vertical-align:-1px; margin-right:4px; color:var(--gold); }
.reccard.arrivalcard .posterbox { box-shadow:0 8px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,90,.35); }
/* A fresh person-match sits between an arrival (certainty) and a taste pick (guess): the
   spark marks it as news, but no gold ring — that stays reserved for your own list. */
.reccard .why.fresh { color:#b9b7c2; }
.reccard .why.fresh svg { width:11px; height:11px; vertical-align:-1px; margin-right:4px; color:var(--gold); }

.grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(178px,1fr));
  gap:30px 22px; padding:14px 40px 30px; max-width:1500px; margin:0 auto;
  transition:opacity .15s;
}
.grid.loading { opacity:.6; }
.card { cursor:pointer; transition:transform .35s cubic-bezier(.2,.8,.25,1); }
.card:hover { transform:translateY(-7px); }
.posterbox { position:relative; border-radius:10px; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,.55); background:var(--panel); }
.card:hover .posterbox { box-shadow:0 16px 44px rgba(0,0,0,.7), 0 0 0 1px rgba(212,175,90,.55), 0 0 34px rgba(212,175,90,.18); }
.posterbox > img { width:100%; aspect-ratio:2/3; object-fit:cover; display:block; }
.score {
  position:absolute; top:10px; right:10px; background:rgba(8,8,10,.82); backdrop-filter:blur(4px);
  color:var(--gold); font-weight:600; font-size:13px; padding:4px 9px; border-radius:7px;
  border:1px solid rgba(212,175,90,.35);
}
.score::before { content:'★ '; font-size:11px; }
.svcrow {
  position:absolute; left:0; right:0; bottom:0; display:flex; gap:5px; padding:26px 10px 9px;
  background:linear-gradient(transparent, rgba(5,5,8,.9));
}
/* watchlist/seen marks on posters: hidden until hover, always visible when set */
.marks { position:absolute; top:10px; left:10px; display:flex; gap:6px; }
.mk {
  width:27px; height:27px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid rgba(212,175,90,.45); background:rgba(8,8,10,.82); backdrop-filter:blur(4px);
  color:#b9b7ae; display:grid; place-items:center; opacity:0; transition:all .2s;
}
.card:hover .mk, .mk.on { opacity:1; }
.mk:hover { color:var(--gold); border-color:var(--gold); }
.mk.on { color:var(--bg); background:var(--gold); border-color:var(--gold); }
/* library chips + detail pills */
.libchip svg { vertical-align:-2px; margin-right:2px; }
.libbtns { display:flex; align-items:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
.btn.lib { display:inline-flex; align-items:center; gap:7px; }
.btn.lib.on { background:var(--gold); color:var(--bg); }
.stars { display:inline-flex; gap:0; margin-left:4px; }
.stars button { background:none; border:none; color:#3c3c46; font-size:16px; cursor:pointer; padding:1px 2px; transition:color .15s; }
.stars button.lit, .stars button:hover { color:var(--gold); }
.yourr { color:var(--gold); font-size:12.5px; }
.yourr.dim { color:var(--dim); font-style:italic; }
.dot { width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
       font-size:8.5px; font-weight:600; color:#fff; letter-spacing:.02em; flex-shrink:0; }
.slogo { width:22px; height:22px; border-radius:6px; object-fit:cover; display:block; flex-shrink:0;
         box-shadow:0 1px 6px rgba(0,0,0,.55); }
.slogo.sm { width:17px; height:17px; border-radius:5px; display:inline-block; vertical-align:-4px;
            margin-right:8px; box-shadow:none; }
.ct { margin-top:12px; }
.ct h3 { font-family:'Playfair Display',serif; font-weight:500; font-size:16.5px; line-height:1.3; }
.ct p { color:var(--dim); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; margin-top:5px; }
/* the type glyph leads the caption. Its own margin, not a text space: the line carries
   .14em letter-spacing, which would otherwise pad the gap out to something lopsided */
.ct p .tico { vertical-align:-2px; margin-right:7px; }

/* Hue is REDUNDANT here, never the message: the silhouette and the aria-label already say
   which is which, so this only has to make the difference land faster. Warm vs cool is the
   widest separation available — and red-orange against blue is the one pair every kind of
   colour blindness keeps. Neither is gold: gold means "active" and "score" in this app, and
   a third meaning would undo the service-chip cleanup. */
.tico.t-movie  { color:#e0876a; }
.tico.t-series { color:#6ea8dc; }
/* the type filter's own state outranks category colour — an "on" button is gold, whole */
.seg button.on .tico { color:var(--gold); }
.empty { grid-column:1/-1; text-align:center; color:var(--dim); font-family:'Playfair Display',serif; font-style:italic; font-size:22px; padding:60px; }
.loadwrap { text-align:center; padding:0 0 40px; position:relative; }
/* zero-height trigger: the observer watches this, the user never sees it */
.sentinel { height:1px; width:100%; }
.loadingmore { display:flex; justify-content:center; gap:7px; padding:22px 0 6px; }
.loadingmore span {
  width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.35;
  animation:pulsedot 1.1s ease-in-out infinite;
}
.loadingmore span:nth-child(2) { animation-delay:.16s; }
.loadingmore span:nth-child(3) { animation-delay:.32s; }
@keyframes pulsedot { 0%,100% { opacity:.25; transform:scale(.85); } 50% { opacity:.9; transform:scale(1); } }
.endoflist {
  color:#4c4c56; font-family:'Playfair Display',serif; font-style:italic; font-size:14px; padding:26px 0 4px;
}
.loadmore {
  background:transparent; border:1px solid var(--line); color:var(--dim); cursor:pointer;
  font-family:'Playfair Display',serif; font-style:italic; font-size:16px;
  padding:11px 34px; border-radius:999px; transition:all .25s;
}
.loadmore:hover { border-color:var(--gold); color:var(--gold); }
footer { text-align:center; color:#4c4c56; font-size:11.5px; line-height:1.9; padding:10px 24px 46px; }
footer a { color:#6d6d78; }
/* skeletons */
.skel { border-radius:10px; aspect-ratio:2/3; background:linear-gradient(100deg, #131318 40%, #1a1a21 50%, #131318 60%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
/* modal */
.overlay { position:fixed; inset:0; background:rgba(5,5,8,.8); backdrop-filter:blur(10px);
           display:none; align-items:flex-start; justify-content:center; overflow-y:auto; z-index:50; padding:5vh 20px; }
.overlay.open { display:flex; }
.sheet { background:var(--panel); border:1px solid var(--line); border-radius:16px; max-width:820px; width:100%; overflow:hidden; position:relative; }
/* focused programmatically to keep Esc working while a trailer plays — not a control, so no ring */
.sheet:focus { outline:none; }
.hero { position:relative; height:300px; }
.hero img { width:100%; height:100%; object-fit:cover; display:block; }
/* pointer-events:none so the fade never swallows clicks meant for what's beneath */
.hero::after { content:''; position:absolute; inset:0; pointer-events:none;
               background:linear-gradient(transparent 30%, var(--panel)); }
.sheetbody { padding:0 40px 40px; margin-top:-70px; position:relative; display:flex; gap:28px; }
.sheetposter { width:150px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.6); flex-shrink:0; align-self:flex-start; }
/* min-width:0 lets this flex child shrink below its content width, so wide
   rows (cast strip) scroll inside it instead of blowing the sheet past the viewport */
.sheetinfo { flex:1; min-width:0; }
.sheetinfo h2 { font-family:'Playfair Display',serif; font-size:clamp(22px, 4vw, 30px); font-weight:700; margin:76px 0 6px; overflow-wrap:break-word; }
.meta { color:var(--dim); font-size:12px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; }
.meta b { color:var(--gold); }
.sheetinfo .ov { color:#c9c7bf; font-size:14.5px; line-height:1.75; }
.sheetsvcs { display:flex; gap:8px; margin-top:20px; flex-wrap:wrap; }
.svcpill { display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px;
           padding:6px 14px 6px 7px; font-size:12.5px; color:var(--text); }
.svcpill.link { text-decoration:none; cursor:pointer; transition:all .25s; }
.svcpill.link:hover { border-color:var(--gold); box-shadow:0 0 14px rgba(212,175,90,.18); }
.svcpill .ext { color:var(--dim); font-size:11px; margin-left:2px; transition:color .25s; }
.svcpill.link:hover .ext { color:var(--gold); }
.close { position:absolute; top:14px; right:16px; background:rgba(8,8,10,.7); border:1px solid var(--line);
         color:var(--text); width:34px; height:34px; border-radius:50%; font-size:16px; cursor:pointer; z-index:2; }
/* settings panel */
.sheet.settings { max-width:560px; }

/* ---- account dropdown: the pattern every site trained everyone on ---- */
.acctwrap { position:relative; display:inline-flex; }
.acctbtn .caret { font-size:9px; color:var(--dim); margin-left:2px; }
.acctmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:220px; z-index:60;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.6); overflow:hidden; padding:6px;
}
.amhead {
  color:var(--dim); font-size:11.5px; line-height:1.5; padding:8px 12px 10px;
  border-bottom:1px solid var(--line); margin-bottom:6px;
}
.amhead b { color:var(--text); font-weight:500; font-size:12.5px; }
.amitem {
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--text); font-family:'Inter'; font-size:13px; padding:9px 12px; border-radius:8px;
  text-decoration:none;
}
.amitem:hover { background:rgba(236,234,228,.06); }
.amitem.danger { color:#dd8a86; }
.amitem.danger:hover { background:rgba(190,80,80,.1); }

/* ---- the sign-in dialog: one question at a time, sized for exactly that ---- */
.sheet.authsheet { max-width:380px; margin-top:8vh; }
.authbody { padding:34px 36px 36px; display:flex; flex-direction:column; gap:12px; }
.authbody h2 { font-family:'Playfair Display',serif; font-size:24px; font-weight:700; }
.authbody input {
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:9px;
  color:var(--text); padding:11px 14px; font-family:'Inter'; font-size:14px;
}
.authbody input:focus { outline:none; border-color:var(--gold); }
.authbody .btn.primary {
  background:rgba(212,175,90,.12); border-color:var(--gold); color:var(--gold); padding:11px 14px;
}
.authbody .btn.primary:hover { background:rgba(212,175,90,.2); }
.authbody .hint { margin-bottom:0; }
.authbody .hint.mt { margin-top:2px; }
.authwho { color:var(--dim); font-size:12.5px; }
.authwho .clear { margin-left:6px; }
.autherr { color:#dd7f7c; font-size:13px; min-height:18px; }
.setbody { padding:38px 42px 42px; }
.setbody h2 { font-family:'Playfair Display',serif; font-size:28px; font-weight:700; margin-bottom:4px; }
.hint { color:var(--dim); font-size:13px; line-height:1.6; margin-bottom:14px; }

/* ---- settings as cards: every setting has visible edges ---- */
/* group kicker: a quiet label over a run of related cards */
.setgroup { color:var(--dim); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; margin:24px 2px 8px; }
.setcard {
  background:rgba(236,234,228,.025); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px 14px; margin-bottom:10px;
}
.setcard .sctitle { color:var(--gold); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-bottom:8px; }
.setcard .hint { margin-bottom:12px; }
.setcard .scrow { justify-content:flex-start; padding:0; }
.setcard .svcgrid { margin-bottom:2px; }

/* ---- on/off switch: track + knob, the one control everyone reads as a toggle ---- */
.switchrow {
  display:flex; align-items:center; gap:12px; background:none; border:none; cursor:pointer;
  padding:2px 0; font-family:'Inter'; text-align:left;
}
.switch {
  flex-shrink:0; width:38px; height:21px; border-radius:999px; position:relative;
  background:rgba(236,234,228,.14); border:1px solid var(--line); transition:background .2s, border-color .2s;
}
.switch .knob {
  position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:var(--dim); transition:left .2s, background .2s;
}
.switch.on { background:rgba(212,175,90,.25); border-color:var(--gold); }
.switch.on .knob { left:19px; background:var(--gold); }
.swlabel { color:var(--text); font-size:13.5px; line-height:1.4; }
.swstate { color:var(--dim); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-left:8px; }
.switch.on + .swlabel .swstate { color:var(--gold); }
.gold { color:var(--gold); font-weight:600; }
.svcgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin-bottom:6px; }
.svctile {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  background:transparent; border:1px solid var(--line); color:var(--dim); font-family:'Inter';
  font-size:13px; cursor:pointer; transition:all .25s; text-align:left;
}
.svctile:hover { border-color:var(--gold); color:var(--text); }
.svctile.on { border-color:var(--gold); color:var(--text); background:rgba(212,175,90,.07); }
.svctile .slogo { width:26px; height:26px; border-radius:7px; }
.svctile .tick { margin-left:auto; color:var(--gold); font-size:13px; min-width:14px; }
.fieldrow { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.fieldrow input, .fieldrow select {
  background:var(--bg); border:1px solid var(--line); border-radius:999px; color:var(--text);
  font-family:'Inter'; font-size:13px; padding:9px 16px; outline:none; min-width:0; flex:1;
}
.fieldrow select { flex:0 0 auto; appearance:auto; }
.fieldrow input:focus { border-color:var(--gold); }
.btn {
  background:rgba(212,175,90,.08); border:1px solid var(--gold); border-radius:999px; color:var(--gold);
  font-family:'Inter'; font-size:12.5px; letter-spacing:.05em; padding:9px 22px; cursor:pointer; transition:all .25s;
}
.btn:hover { background:rgba(212,175,90,.18); }
.autherr { color:#e06c6c; font-size:12.5px; min-height:18px; }
/* people */
.pchip {
  display:flex; align-items:center; gap:8px; background:transparent; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:5px 14px 5px 6px;
  color:var(--dim); font-size:12.5px; font-family:'Inter'; transition:all .25s;
}
.pchip:hover { border-color:var(--gold); color:var(--text); }
.pchip.active { border-color:var(--gold); color:var(--gold); background:rgba(212,175,90,.08); }
.pchip .face { width:26px; height:26px; border-radius:50%; object-fit:cover; background:var(--panel);
               display:grid; place-items:center; color:var(--gold); font-size:11px; font-family:'Playfair Display',serif; }
.pchip .x { color:var(--gold); margin-left:2px; }
.plabel { color:#55555f; font-size:11px; letter-spacing:.25em; text-transform:uppercase; margin-right:4px; }
.dirline { color:var(--dim); font-size:13px; margin-bottom:16px; }
.dirline a { color:var(--text); text-decoration:none; border-bottom:1px dotted var(--gold); cursor:pointer; }
.dirline a:hover { color:var(--gold); }
.castrow { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
.castcard { flex:0 0 84px; cursor:pointer; text-align:center; }
.castcard .face {
  width:72px; height:72px; border-radius:50%; object-fit:cover; margin:0 auto; display:grid;
  place-items:center; background:#1c1c23; color:var(--gold); font-size:22px;
  font-family:'Playfair Display',serif; border:1px solid var(--line); transition:all .25s;
}
.castcard:hover .face { border-color:var(--gold); box-shadow:0 0 18px rgba(212,175,90,.25); }
.castcard .nm { font-size:11.5px; color:var(--text); margin-top:7px; line-height:1.25; }
.castcard .ch { font-size:10.5px; color:var(--dim); margin-top:2px; line-height:1.25; }
.morelike { color:var(--dim); font-size:11px; letter-spacing:.3em; text-transform:uppercase; margin:26px 0 12px; }
/* ---- the new-episode watchdog band on Your list -----------------------------------
   Rows, not posters: this answers "what happened" and a wall of artwork would bury the one
   thing that matters — which episode, and when. Poster thumbnails stay small enough to
   identify a show at a glance without competing with the text. */
.epwatch { margin-bottom: 30px; }
.ewlist { display:flex; flex-direction:column; gap:2px; }
.ewrow {
  display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:8px;
  cursor:pointer; transition:background .16s;
  border-bottom:1px solid rgba(38,38,46,.5);
}
.ewrow:hover { background:rgba(212,175,90,.07); }
.ewrow img, .ewrow .ewnoimg { width:34px; height:50px; object-fit:cover; border-radius:4px; flex:none; }
.ewrow .ewnoimg { background:#1b1b22; }
.ewrow .ewname { color:var(--text); font-size:13.5px; white-space:nowrap; }
.ewrow .ewcode {
  color:var(--gold); font-size:11.5px; font-variant-numeric:tabular-nums;
  border:1px solid rgba(212,175,90,.4); border-radius:999px; padding:2px 8px; flex:none;
}
.ewrow .ewep { color:var(--dim); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ewrow .ewwhen { margin-left:auto; color:var(--dim); font-size:12px; white-space:nowrap; }
.ewlist.soon .ewwhen { color:var(--gold); }
.ewrow .ewsvcs { display:flex; gap:4px; flex:none; }
.ewrow .ewsvcs img, .ewrow .ewsvcs svg { width:16px; height:16px; border-radius:3px; }
@media (max-width:640px) {
  .ewrow .ewep { display:none; }
  .ewrow .ewname { white-space:normal; }
}

/* ---- detail sheet loading state ----------------------------------------------------
   Shown the instant a poster is clicked, before the title has arrived. In production an
   uncached title costs seconds; without this, that was seconds of "nothing happened". */
.sheetwait { display:flex; gap:26px; padding:70px 40px 80px; align-items:flex-start; }
.sheetwait .swposter { width:150px; flex:none; }
.sheetwait .swlines { flex:1; padding-top:8px; }
.sheetwait .swlines .skel { aspect-ratio:auto; border-radius:6px; margin-bottom:14px; }
.sheetwait .swl1 { height:34px; width:55%; }
.sheetwait .swl2 { height:14px; width:80%; }
.sheetwait .swl3 { height:14px; width:70%; }
.sheetwait .sherr { color:var(--dim); font-size:14.5px; margin-right:16px; }
@media (max-width:640px){ .sheetwait { padding:50px 20px; gap:16px; } .sheetwait .swposter { width:100px; } }

/* ---- seasons & episodes ------------------------------------------------------------
   The service logos sit ON the season header, because that is the honest granularity: a
   show is not "on Netflix", a season is. A season you can actually watch tonight gets a
   gold left edge, so scanning for "which of these can I play" is one glance. */
.seasonwait { color:#55555f; font-size:12px; padding:4px 0 10px; }
.season { border-bottom:1px solid rgba(38,38,46,.6); }
.season.onmine { box-shadow:inset 2px 0 0 var(--gold); }
.seasonhead {
  width:100%; display:flex; align-items:center; gap:12px; padding:11px 12px;
  background:none; border:0; color:inherit; cursor:pointer; text-align:left;
  font-family:'Inter',sans-serif; font-size:13.5px; transition:background .16s;
}
.seasonhead:hover { background:rgba(212,175,90,.06); }
.season .scaret { color:#55555f; font-size:11px; transition:transform .18s; flex:none; }
.season.open .scaret { transform:rotate(90deg); }
.season .sname { color:var(--text); font-weight:500; white-space:nowrap; }
.season .scount { color:#55555f; font-size:11.5px; white-space:nowrap; }
.season .ssvcs { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.spill {
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line); color:var(--dim); font-size:11px; white-space:nowrap;
}
/* a service you actually pay for reads differently from one you don't */
.spill.has { border-color:rgba(212,175,90,.5); color:var(--gold); }
/* The local name, directly under the title: when you searched "bäst i test" and landed on a
   page headed "Taskmaster Sweden", this is the line that confirms you got what you meant. */
.localtitle {
  font-family:'Playfair Display',serif; font-style:italic; font-size:19px;
  color:var(--gold); margin:-6px 0 10px; line-height:1.2;
}
.spill.rent { border-style:dashed; }
/* a service that dropped this season: struck through, so it reads as history not offer */
.spill.gone { border-style:dashed; color:#7a5a5a; border-color:rgba(122,90,90,.5); text-decoration:line-through; }
.spill.gone img, .spill.gone svg { opacity:.45; }
.spill img, .spill svg { width:14px; height:14px; border-radius:3px; }
.snone { color:#55555f; font-size:11px; font-style:italic; }

.seasonbody { padding:2px 12px 14px 34px; }
.ep { display:flex; gap:12px; padding:9px 0; border-top:1px solid rgba(38,38,46,.45); }
.ep .epn { color:#55555f; font-size:12px; min-width:20px; text-align:right; font-variant-numeric:tabular-nums; }
.ep .epmain { min-width:0; }
.ep .epline { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:13px; }
.ep .epline b { color:var(--text); font-weight:500; }
.ep .epair, .ep .eprt { color:#55555f; font-size:11px; }
.ep .epov { color:var(--dim); font-size:12.5px; line-height:1.65; margin-top:4px; }
@media (max-width:640px) {
  .seasonhead { flex-wrap:wrap; gap:8px; }
  .season .ssvcs { margin-left:0; width:100%; justify-content:flex-start; }
  .seasonbody { padding-left:14px; }
}

/* ---- series run state on the title page ------------------------------------------
   The next episode is the thing you opened the page for, so it gets the gold; the most
   recent one is context and stays quiet. The disclaimer is small but never omitted —
   these are broadcast dates, and promising Swedish availability we haven't verified is
   exactly the kind of lie the rest of the app refuses to tell. */
/* ---- series "at a glance" ---------------------------------------------------------
   Every value carries its own label, because the previous version relied on position and
   produced "Episodes 13 Mar". The headline states the concrete promise where there is one
   ("New episode in 4 days") and falls back to the abstract status only when there isn't. */
.runblock .morelike { margin-bottom:10px; }
.runhead {
  color:var(--gold); letter-spacing:.06em; margin-left:10px; text-transform:none;
  font-size:12px; letter-spacing:.02em;
}
.runhead.live::before { content:'● '; font-size:9px; vertical-align:middle; }
.runhead.ended { color:var(--dim); }

.epline {
  display:flex; align-items:baseline; gap:10px; padding:7px 0;
  border-bottom:1px solid rgba(38,38,46,.55); font-size:13px;
}
.epline .eplabel {
  color:#55555f; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  min-width:52px; flex:none;
}
.epline .epcode {
  color:var(--text); font-weight:500; font-variant-numeric:tabular-nums; flex:none;
}
.epline .epname { color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.epline .epwhen { margin-left:auto; color:var(--dim); white-space:nowrap; font-size:12.5px; }
.epline.next .eplabel, .epline.next .epwhen { color:var(--gold); }

/* the numbers, last: they rarely change a decision, so they get the quietest treatment */
.runstats { display:flex; flex-wrap:wrap; gap:26px; padding:14px 0 2px; }
.rstat { display:flex; flex-direction:column; gap:2px; }
.rstat b {
  font-family:'Playfair Display',serif; font-size:20px; font-weight:500; color:var(--text);
  line-height:1.1;
}
.rstat span { color:#55555f; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }
.epnote { color:#55555f; font-size:11px; line-height:1.6; margin-top:10px; }

/* cast: strip by default, full wrapped billing on demand */
.castmore {
  margin-left:10px; background:none; border:0; cursor:pointer; padding:0;
  color:var(--gold); font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; border-bottom:1px solid rgba(212,175,90,.4);
}
.castmore:hover { color:var(--text); border-bottom-color:var(--text); }
.castrow.wrapped { flex-wrap:wrap; overflow-x:visible; }

.mlrow { display:flex; gap:12px; flex-wrap:wrap; }
.mlrow img { width:72px; border-radius:6px; cursor:pointer; opacity:.85; transition:opacity .2s; }
.mlrow img:hover { opacity:1; }
@media (max-width:640px){
  .overlay{padding:3vh 10px}
  .hero{height:200px}
  .sheetbody{flex-direction:column; padding:0 22px 28px; gap:18px}
  .sheetposter{margin-top:-40px; width:120px}
  .sheetinfo h2{margin-top:0}
  .grid{padding:14px 20px 30px; gap:22px 14px; grid-template-columns:repeat(2,1fr)}
  .ct h3{font-size:14.5px}
  header{padding-top:36px}
  .brand{font-size:36px}
  .search{font-size:19px; padding:13px 46px 13px 52px}
  .qicon{left:38px}
  .qicon svg{width:16px;height:16px}
  .qclear{right:30px}
  .qkbd{display:none} /* no keyboard worth hinting at on a phone */
}

/* ---- My list: watchlist & seen as destinations, not filters ---- */
/* libmode swaps the discover surface for the list page; the sitebar and footer stay */
body.libmode header, body.libmode .filterband, body.libmode .countbar, body.libmode #grid,
body.libmode .loadwrap, body.libmode .recwrap, body.libmode #lookupWrap,
body.libmode #personRow, body.libmode #interpretRow, body.libmode #correctedRow { display:none; }
.navn { color:#55555f; font-size:10.5px; margin-left:3px; }
.libpage { max-width:1180px; margin:0 auto; padding:26px 28px 60px; }
.libtabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.libtab {
  background:none; border:none; cursor:pointer; font-family:'Playfair Display',serif;
  font-size:21px; color:var(--dim); padding:6px 2px 12px; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .2s;
}
.libtab .n { font-family:'Inter'; font-size:11px; color:#55555f; margin-left:5px; vertical-align:6px; }
.libtab.on { color:var(--text); border-bottom-color:var(--gold); }
.libtab.on .n { color:var(--gold); }
.libkick { color:var(--gold); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; margin:28px 2px 0; }
.libkick:first-child { margin-top:0; }
.libgrid { padding:14px 0 4px; }
.libnote { color:var(--dim); font-size:12.5px; line-height:1.6; margin:0 2px 10px; }
.libnote svg { vertical-align:-2px; margin-right:5px; color:var(--gold); }
.libempty { color:var(--dim); font-size:14.5px; line-height:1.8; padding:26px 4px; max-width:540px; }
.libempty svg { vertical-align:-2px; color:var(--gold); }
/* ---- quick rate: the floating ask and its little celebration ---- */
.ratepop {
  /* JS places it beside the click that summoned it (placeRate) — no fixed home */
  position:fixed; z-index:80;
  background:var(--panel); border:1px solid var(--gold); border-radius:14px;
  padding:14px 20px 11px; text-align:center; min-width:260px;
  box-shadow:0 18px 50px rgba(0,0,0,.65);
  opacity:0; pointer-events:none; transition:opacity .15s;
}
.ratepop.show { opacity:1; pointer-events:auto; animation:rpin .18s cubic-bezier(.2,1.2,.4,1); }
@keyframes rpin { from { transform:scale(.9); } to { transform:scale(1); } }
.rpx { position:absolute; top:5px; right:9px; background:none; border:none; color:var(--dim); cursor:pointer; font-size:13px; }
.rpq { color:var(--dim); font-size:13px; margin-bottom:7px; }
.rpq b { color:var(--text); font-weight:500; }
.rpstars { display:flex; gap:1px; justify-content:center; }
.rpstars button {
  background:none; border:none; cursor:pointer; font-size:23px; line-height:1;
  color:#3c3c46; padding:2px 3px; transition:color .1s, transform .1s;
}
.rpstars button.lit { color:var(--gold); }
.rpstars button:hover { transform:scale(1.3); }
.rphint { color:#55555f; font-size:10.5px; margin-top:6px; min-height:13px; }
.rpundo {
  display:block; margin:7px auto 0; background:none; border:1px solid var(--line);
  border-radius:999px; color:var(--dim); font-family:'Inter'; font-size:11px;
  padding:3px 13px; cursor:pointer; transition:all .2s;
}
.rpundo:hover { border-color:var(--gold); color:var(--gold); }
.rpdone { position:relative; padding:2px 14px 4px; }
.rpnum {
  font-family:'Playfair Display',serif; font-size:36px; font-weight:700; color:var(--gold);
  display:inline-block; animation:rpop .45s cubic-bezier(.2,1.6,.4,1);
}
.rpdone p { color:var(--dim); font-size:12px; margin-top:2px; }
.rpspark { position:absolute; color:var(--gold); font-size:12px; opacity:0; left:20%; top:10px; animation:spark .9s ease-out .08s; }
.rpspark.s2 { left:74%; top:4px; font-size:10px; animation-delay:.2s; }
.rpspark.s3 { left:58%; top:30px; font-size:9px; animation-delay:.32s; }
@keyframes rpop { from { transform:scale(.25); } to { transform:scale(1); } }
@keyframes spark {
  0% { opacity:0; transform:translateY(5px) scale(.5); }
  30% { opacity:1; }
  100% { opacity:0; transform:translateY(-16px) scale(1.4); }
}
/* the send-off: a rated card leaves its list with a flash, a lift, and a bow ----
   phase 1 (keyframes): gold flash + small lift, then shrink and fade;
   phase 2 (width transition, set from JS): the row closes behind it */
.card.collected { pointer-events:none; overflow:hidden; transition:width .3s cubic-bezier(.4,0,.2,1) .3s; }
.card.collected > * { animation:collectOut .62s ease forwards; }
@keyframes collectOut {
  0%   { transform:scale(1); opacity:1; }
  28%  { transform:scale(1.05) translateY(-6px); opacity:1;
         filter:drop-shadow(0 0 22px rgba(212,175,90,.55)); }
  100% { transform:scale(.55); opacity:0; }
}

/* rated-progress: the bar that only ever fills */
.lstat.lprog { min-width:210px; }
.pbar { display:block; height:4px; background:rgba(236,234,228,.08); border-radius:99px; margin-top:8px; overflow:hidden; }
.pfill { display:block; height:100%; background:var(--gold); border-radius:99px; transition:width .5s ease; }
.srratings { cursor:pointer; border-radius:8px; padding:4px 8px; margin:-4px -8px; }
.srratings:hover { background:rgba(212,175,90,.08); }

/* For you: its own destination now, so it carries its own title */
.fyhead { margin-bottom:20px; }
.fyhead h2 { font-family:'Playfair Display',serif; font-size:26px; font-weight:700; color:var(--text); }
.fysub { color:var(--dim); font-size:13px; margin-top:4px; }

/* For you: the steering wheel and the shelves */
.fycontrols { display:flex; flex-direction:column; gap:9px; margin-bottom:24px; }
.fyrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fylabel { color:#55555f; font-size:10px; letter-spacing:.22em; text-transform:uppercase; margin-right:4px; min-width:58px; }
.fyanchor { color:var(--dim); font-size:13px; margin:22px 2px 0; }
.fyanchor:first-child { margin-top:0; }
.fyanchor b { color:var(--gold); font-weight:600; }
.fyanchor svg { vertical-align:-2px; margin-right:5px; color:var(--gold); }

/* the seen tab's mini-stats: the diary's cover page */
.libstats { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.lstat { background:rgba(236,234,228,.025); border:1px solid var(--line); border-radius:12px; padding:13px 18px; min-width:150px; }
.lstat b { display:block; font-family:'Playfair Display',serif; font-size:22px; color:var(--gold); font-weight:700; }
.lstat span { color:var(--dim); font-size:11.5px; }
.seenlist { display:flex; flex-direction:column; }
.seenrow {
  display:grid; grid-template-columns:44px minmax(0,1fr) auto 54px; gap:14px; align-items:center;
  background:none; border:none; border-bottom:1px solid rgba(38,38,46,.5);
  padding:9px 2px; cursor:pointer; text-align:left; font-family:'Inter';
}
.seenrow:hover { background:rgba(236,234,228,.03); }
.seenrow img, .seenrow .nop { width:44px; height:64px; object-fit:cover; border-radius:5px; background:var(--panel); display:block; }
.srmain { min-width:0; }
.srmain b { color:var(--text); font-size:14px; font-weight:500; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srsub { color:var(--dim); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
.srsub svg { vertical-align:-2px; margin-right:5px; }
.srratings { text-align:right; white-space:nowrap; }
.srratings .you { color:var(--gold); font-size:13px; display:block; font-weight:600; }
.srratings .rateme { color:#55555f; font-size:11px; display:block; }
.srratings .world { color:var(--dim); font-size:11px; }
.srdate { color:#55555f; font-size:11px; text-align:right; }
@media (max-width:560px){
  .seenrow { grid-template-columns:38px minmax(0,1fr) auto; }
  .srdate { display:none; }
  .libpage { padding:18px 14px 40px; }
}

/* ---- narrow screens: the fine row must not push the page sideways ----
   Placed last deliberately: the year slider's own width rule comes later in this
   file, so an earlier media query of equal specificity would lose to it. */
@media (max-width:560px){
  .yearslider { width:132px; }
  .yearctl { gap:7px; }
  .yearctl .ynum { width:44px; padding:5px 4px; }
  .ratingctl { gap:7px; }
  .ratingctl input[type=range] { width:104px; }
  .filters.fine .divider { display:none; }
  .agectl { gap:7px; }
  .agechip { padding:4px 8px; }
}