:root{
    --bg:#f4f5f7; --panel:#ffffff; --panel2:#f0f1f4; --text:#14181c; --muted:#5b6570;
    --border:#dfe3e8; --accent:#00b3e5; --group:#ff8000; --personal:#00c030; --combined:#00b3e5;
    --shadow:0 1px 3px rgba(0,0,0,.08),0 6px 16px rgba(0,0,0,.06);
  }
  @media (prefers-color-scheme:dark){
    :root{ --bg:#14181c; --panel:#1c2228; --panel2:#232a31; --text:#e6e9ec; --muted:#9aa7b2;
           --border:#2a333c; --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); }
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--text);
    font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
  header{padding:16px 22px 8px}
  h1{margin:0;font-size:22px;letter-spacing:.2px}
  h1 span{color:var(--accent)}
  /* Top-bar tabs as two-tone wordmarks, matching the original blendboxd logo:
     "blend" in the theme text colour (black / white), the other half ("boxd" and
     "cine") in the cyan accent — the same two colours per name. The active tab is
     undimmed with an accent underline; inactive tabs are dimmed. */
  .tabs{display:flex;gap:26px;align-items:flex-end;border-bottom:1px solid var(--border)}
  .tab{background:none;border:0;border-bottom:2.5px solid transparent;margin-bottom:-1px;
    color:var(--text);font-size:19px;font-weight:750;letter-spacing:.2px;
    padding:6px 1px 8px;cursor:pointer;font-family:inherit;opacity:.5}
  .tab .hl{color:var(--accent)}     /* the "boxd" and "cine" halves */
  .tab:hover{opacity:.8}
  .tab.on{opacity:1;border-bottom-color:var(--accent)}
  .sub{color:var(--muted);font-size:13px;margin-top:6px}
  .status{font-size:12.5px;margin-top:6px;display:flex;align-items:center;gap:7px;color:var(--muted)}
  .status .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}
  .status.searching .dot{animation:pulse 1.1s ease-in-out infinite}
  .status.done .dot{background:var(--personal)}
  @keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
  .card.fresh{animation:flash 1.2s ease-out}
  @keyframes flash{0%{box-shadow:0 0 0 2px var(--accent)}100%{box-shadow:var(--shadow)}}
  .toolbar{position:sticky;top:0;z-index:5;background:var(--bg);
    padding:12px 22px;border-bottom:1px solid var(--border);
    display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .toolbar input,.toolbar select{background:var(--panel);color:var(--text);
    border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13px}
  .toolbar input[type=number]{width:78px}
  .toolbar label{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
  button.linkish{background:var(--panel);color:var(--text);border:1px solid var(--border);
    border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer}
  button.linkish:hover{border-color:var(--accent)}
  .count{margin-left:auto;color:var(--muted);font-size:13px;white-space:nowrap}
  .memberbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 22px 0}
  .memberbar .mb-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
  .memberbar .chips{margin:0}
  .chip.member{display:inline-flex;align-items:center;gap:6px}
  .chip.member .swatch{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
  .chip.member.off{opacity:.55;text-decoration:line-through}
  .chip.member:not(.off){border-color:var(--accent);color:var(--text)}
  /* Cineblend cinema filter: a chip per venue (logo + name), yes/no per cinema. */
  .cinemabar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 22px 0}
  .cinemabar .mb-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
  .cinemabar .chips{margin:0}
  .chip.cinema{display:inline-flex;align-items:center;gap:6px}
  .chip.cinema img.clogo{width:16px;height:16px;border-radius:4px;object-fit:cover;display:block}
  .chip.cinema.off{opacity:.5}
  .chip.cinema.on{background:var(--panel);border-color:var(--accent);color:var(--text)}
  .chip.cinema.on img.clogo{outline:1px solid var(--accent);outline-offset:0}
  /* Cineblend load-failure notice: a cinema that couldn't be reached is surfaced
     here (never silently dropped). A cinema with nothing showing is NOT listed. */
  .cinenotice{margin:10px 22px 0;padding:8px 12px;border-radius:8px;font-size:12.5px;
    background:rgba(229,72,77,.10);border:1px solid rgba(229,72,77,.35);
    display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
  /* Author `display:flex` on the toolbar rows (.memberbar / .cinemabar / .cinenotice)
     and the status pill would otherwise DEFEAT the [hidden] attribute: an author
     `display` beats the UA rule `[hidden]{display:none}`, so a JS `el.hidden = true`
     wouldn't actually hide them — leaving an empty pink notice bar, or the CINEMAS row
     lingering on the blendboxd tab. Make [hidden] authoritative everywhere. */
  [hidden]{display:none!important}
  .cinenotice .warn{font-weight:700;color:#e5484d}
  .cinenotice .item{color:var(--muted)}
  /* Per-card cinema marks (shown only when >1 cinema is selected). */
  .cinelogos{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
  .cinelogos img{width:17px;height:17px;border-radius:4px;object-fit:cover;display:block}
  .cinelogos .cn{font-size:11px;color:var(--muted)}
  details.filters{padding:0 22px;margin-top:10px}
  details.filters summary{cursor:pointer;color:var(--muted);font-size:13px;user-select:none}
  .chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
  .chip{border:1px solid var(--border);background:var(--panel);color:var(--muted);
    border-radius:999px;padding:4px 11px;font-size:12px;cursor:pointer;white-space:nowrap}
  .chip.on{background:var(--accent);border-color:var(--accent);color:#00252e;font-weight:600}
  .chip-group-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;
    color:var(--muted);margin:8px 0 2px;display:flex;align-items:center;gap:8px}
  .gmode{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
  .gmode .gm{background:var(--panel);color:var(--muted);border:0;cursor:pointer;
    font-size:10px;font-weight:700;letter-spacing:.5px;padding:2px 9px;text-transform:uppercase}
  .gmode .gm.on{background:var(--accent);color:#00252e}
  .seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
  .seg .sg{background:var(--panel);color:var(--muted);border:0;cursor:pointer;
    font-size:12px;padding:6px 10px}
  .seg .sg.on{background:var(--accent);color:#00252e;font-weight:600}
  details.vibe{padding:0 22px;margin-top:10px}
  details.vibe summary{cursor:pointer;color:var(--muted);font-size:13px;user-select:none}
  .vibe-state{color:var(--accent);font-weight:600;margin-left:6px}
  .presets{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px}
  .preset{border:1px solid var(--border);background:var(--panel);color:var(--text);
    border-radius:999px;padding:6px 13px;font-size:13px;cursor:pointer}
  .preset:hover{border-color:var(--accent)}
  .preset.on{background:var(--accent);border-color:var(--accent);color:#00252e;font-weight:600}
  .sliders{display:grid;gap:14px 24px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    margin:8px 0 12px;max-width:980px}
  .vslider label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text);
    margin-bottom:3px;font-weight:600}
  .vslider label output{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:500}
  .vslider input[type=range]{width:100%;accent-color:var(--accent);margin:0}
  .vslider.beta input[type=range]{accent-color:var(--group)}
  .vhint{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:1px}
  main{padding:16px 22px 40px}
  .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:12px;
    overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
  .card.seen{opacity:.45}
  .card.seen .poster img{filter:grayscale(1)}
  .card.seen:hover{opacity:.85;transition:opacity .15s}
  .seenby{font-size:11.5px;font-weight:600;color:var(--group)}
  .poster{aspect-ratio:2/3;width:100%;background:var(--panel2);position:relative;overflow:hidden}
  .poster img{width:100%;height:100%;object-fit:cover;display:block}
  .poster .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    font-size:44px;font-weight:700;color:var(--muted);
    background:linear-gradient(135deg,var(--panel2),var(--panel))}
  .rankbadge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.62);color:#fff;
    font-size:12px;font-weight:600;border-radius:6px;padding:2px 7px}
  .rate{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.62);color:#fff;
    font-size:12px;font-weight:600;border-radius:6px;padding:2px 7px}
  .body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:7px;flex:1}
  .title{font-weight:650;font-size:14.5px;line-height:1.25}
  .title a{color:inherit;text-decoration:none}
  .title a:hover{color:var(--accent)}
  .yr{color:var(--muted);font-weight:500}
  .dir{color:var(--muted);font-size:12.5px}
  .meta{color:var(--muted);font-size:12px}
  .gchips{display:flex;flex-wrap:wrap;gap:4px}
  .gchips span{font-size:10.5px;color:var(--muted);border:1px solid var(--border);
    border-radius:5px;padding:1px 6px}
  .gchips span.sel{color:var(--accent);border-color:var(--accent);font-weight:600}
  .rankbadge .arrow{opacity:.7;margin:0 2px;font-weight:400}
  .drivers{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:11px}
  .drivers .dl{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:9.5px}
  .drivers .dtag{border-radius:5px;padding:1px 6px;font-weight:600;
    border:1px solid var(--border);color:var(--muted)}
  .drivers .dtag.genre{color:var(--combined);border-color:var(--combined)}
  .drivers .dtag.director{color:var(--personal);border-color:var(--personal)}
  .drivers .dtag.keyword{color:var(--group);border-color:var(--group)}
  .moodx{border-top:1px dashed var(--border);margin-top:4px;padding-top:6px;
    display:flex;flex-direction:column;gap:3px;font-size:11px}
  .moodx .mrow{display:flex;align-items:baseline;gap:6px;color:var(--muted)}
  .moodx .mrow .arrow{opacity:.6}
  .moodx b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:650}
  .moodx .delta{font-weight:650;font-variant-numeric:tabular-nums}
  .moodx .delta.up{color:var(--personal)} .moodx .delta.down{color:#e5484d}
  .moodx .axpush{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted)}
  .moodx .axpush span b{margin-left:2px}
  /* Bottom-anchored card footer so the cinema logos + score bars line up across a
     row (cards in a row are equal height), regardless of how much film info sits
     above them. */
  .cardfoot{margin-top:auto;display:flex;flex-direction:column;gap:7px}
  .scores{display:flex;flex-direction:column;gap:4px;padding-top:6px}
  .bar{display:grid;grid-template-columns:54px 1fr 40px;align-items:center;gap:7px;font-size:11px}
  .bar .lbl{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bar .track{height:6px;background:var(--panel2);border-radius:4px;overflow:hidden}
  .bar .fill{height:100%;border-radius:4px}
  .bar .val{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
  .empty{color:var(--muted);text-align:center;padding:60px 0}
  /* TMDB attribution (required by TMDB's API terms): logo kept smaller than our own
     wordmark, plus the exact notice wording. */
  footer.attrib{padding:18px 22px 28px;border-top:1px solid var(--border);color:var(--muted);
    font-size:11.5px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  footer.attrib .tmdblogo{height:11px;width:auto;display:block}
  /* On a phone the toolbar wraps to ~6 rows; pinned, it would cover most of the
     screen, so it only sticks where there's room. */
  @media (max-width:700px){ .toolbar{position:static} header,.toolbar,main{padding-left:16px;padding-right:16px} }