:root {
  --bg: #0b0f17;
  --bg-2: #131826;
  --panel: #161c2b;
  --panel-2: #1c2333;
  --border: #26304a;
  --text: #e7ecf5;
  --muted: #93a0b8;
  --accent: #ffd166;
  --accent-2: #6ea8fe;
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,15,23,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { flex: 0 0 auto; }
.brand img { max-height: 40px; }
.brand-text { font-weight: 800; font-size: 1.4rem; color: var(--accent); letter-spacing: .5px; }

.search { position: relative; flex: 1 1 auto; max-width: 560px; }
.search input {
  width: 100%; padding: 10px 16px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  outline: none; font-size: .95rem;
}
.search input:focus { border-color: var(--accent-2); }
.search-results {
  position: absolute; top: 110%; left: 0; right: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: none; max-height: 70vh; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.search-results.show { display: block; }
.sr-item { display: flex; gap: 10px; padding: 8px 12px; align-items: center; border-bottom: 1px solid var(--border); }
.sr-item:last-child { border-bottom: none; }
.sr-item:hover { background: var(--panel-2); }
.sr-thumb { width: 40px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--panel-2); flex: 0 0 auto; }
.sr-info { min-width: 0; }
.sr-title { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sub { font-size: .78rem; color: var(--muted); }

.main-nav { display: flex; gap: 6px; flex: 0 0 auto; }
.main-nav a { padding: 8px 14px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: .92rem; }
.main-nav a:hover, .main-nav a.on { color: var(--text); background: var(--panel-2); }
.nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.4rem; cursor: pointer; }

/* ---------- blocks ---------- */
main.wrap { padding-top: 26px; padding-bottom: 60px; }
.block { margin-bottom: 42px; }
/* Title, then the tabs right beside it; anything trailing (See more) is pushed
   to the far edge by margin-left:auto. */
.block-head { display: flex; align-items: center; margin-bottom: 16px; gap: 14px; flex-wrap: wrap; }
.block-head h2 {
  font-size: 1.25rem; margin: 0; display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto; letter-spacing: .2px;
}
/* the "|" accent mark — theme accent colour, title text keeps its own colour */
.block-head h2::before {
  content: ""; display: block; width: 4px; height: 1.15em; border-radius: 3px;
  background: var(--accent); box-shadow: 0 0 10px rgba(255, 209, 102, .45);
  flex: 0 0 auto;
}
.block-head > .muted, .block-head > .view-more { margin-left: auto; }
.view-more { color: var(--accent-2); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.view-more:hover { color: var(--accent); }

.top-tabs { display: flex; gap: 6px; align-items: center; flex: 1 1 auto; flex-wrap: wrap; }
.top-tabs .view-more { margin-left: auto; }
.top-tab { padding: 5px 13px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: .82rem; font-weight: 600; line-height: 1.4; transition: background .15s, color .15s, border-color .15s; }
.top-tab:hover { color: var(--text); border-color: var(--accent-2); }
.top-tab.on { background: var(--accent); border-color: var(--accent); color: #26210a; font-weight: 700; }

/* ---------- card grid ---------- */
/* minmax(0,1fr) — NOT 1fr. `1fr` resolves to minmax(auto,1fr), so a grid item
   can never shrink below its min-content width. .card-title is white-space:nowrap,
   whose min-content width is the whole untruncated title, so long titles used to
   blow their column wider than the others. minmax(0,...) plus min-width:0 down
   the chain lets the ellipsis do its job and keeps every column identical. */
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card { display: block; min-width: 0; max-width: 100%; }
.card > * { min-width: 0; max-width: 100%; }
.card-poster { position: relative; width: 100%; padding-top: 150%; border-radius: var(--radius); overflow: hidden; background: var(--panel-2); }
.card-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .3s ease; }
.card:hover .card-poster img { transform: scale(1.06); }
.noposter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; color: var(--muted); font-size: .8rem; text-align: center; }
.badge-format { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: .68rem; padding: 3px 7px; border-radius: 6px; font-weight: 700; letter-spacing: .3px; }
.card-meta { padding: 8px 2px 0; min-width: 0; overflow: hidden; }
.card-title { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
.card-sub { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- pager ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.pager-cur { color: var(--muted); }
.btn { display: inline-block; padding: 9px 16px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-weight: 600; }
.btn:hover { border-color: var(--accent-2); }
.btn-sm { padding: 6px 12px; font-size: .85rem; }

/* ---------- info page ---------- */
.info-grid { display: grid; grid-template-columns: 340px 1fr; gap: 34px; }
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }
.poster-lg { border-radius: var(--radius); overflow: hidden; background: var(--panel-2); aspect-ratio: 2/3; max-width: 300px; }
.poster-lg img { width: 100%; height: 100%; object-fit: cover; }
.info-title { font-size: 1.6rem; margin: 16px 0 2px; }
.info-orig { color: var(--accent); font-size: .95rem; margin-bottom: 12px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.badge { background: var(--panel-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 6px; font-size: .78rem; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chip { background: var(--panel); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; font-size: .8rem; color: var(--muted); }
.chip:hover { color: var(--text); border-color: var(--accent-2); }
.info-facts p { margin: 8px 0; font-size: .92rem; }
.info-facts strong { color: var(--muted); font-weight: 600; }
.side-h { font-size: 1rem; margin: 20px 0 10px; }
.cast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cast-item { text-align: center; font-size: .78rem; color: var(--muted); }
.cast-avatar { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 6px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; color: var(--muted); }

.action-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.btn-watch { background: var(--accent); color: #26210a; border: none; padding: 12px 26px; border-radius: 999px; font-weight: 800; font-size: 1rem; box-shadow: 0 0 24px rgba(255,209,102,.25); }
.btn-watch:hover { filter: brightness(1.05); }
.act {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: .9rem; font-weight: 600;
}
/* Sized here rather than under .watch-toggles: an inline <svg> with only a
   viewBox has no intrinsic size, so the same button that looked right beside
   the player rendered enormous in the film page's action bar. */
.act svg { width: 15px; height: 15px; flex: 0 0 auto; }
.act:hover { color: var(--text); }
.rating { margin-left: auto; color: var(--accent); font-weight: 700; }

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab { background: none; border: none; color: var(--muted); padding: 10px 4px; margin-right: 18px; cursor: pointer; font-weight: 700; border-bottom: 2px solid transparent; }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); }

.versions h2, .comments h2, #related h2 { font-size: 1.15rem; }
.version-card { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; padding: 12px; max-width: 460px; }
.version-card:hover { border-color: var(--accent-2); }
.vc-thumb { width: 120px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: var(--panel-2); }
.vc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vc-tag { font-size: .72rem; color: var(--accent-2); font-weight: 700; }
.vc-title { font-weight: 700; margin: 4px 0 10px; }
.comments { margin-top: 34px; }

/* ---------- watch page ---------- */
.watch-head { margin-bottom: 14px; }
.back { color: var(--muted); font-weight: 600; }
.back:hover { color: var(--text); }
.player-wrap { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; }
#player { width: 100%; height: 100%; background: #000; }
.player-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); pointer-events: none; }
.player-msg.hide { display: none; }
.watch-panel { margin-top: 20px; display: flex; flex-direction: column; gap: 18px; }
.wserver-name { font-weight: 700; margin-bottom: 8px; color: var(--accent); }
.eplist { display: flex; flex-wrap: wrap; gap: 8px; }
.epbtn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.epbtn:hover { border-color: var(--accent-2); }
.epbtn.on { background: var(--accent); color: #26210a; border-color: var(--accent); }
.notice { margin-top: 16px; background: rgba(255,209,102,.1); border: 1px solid var(--accent); color: var(--accent); padding: 10px 14px; border-radius: 8px; font-size: .9rem; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border); color: var(--muted); padding: 24px 0; margin-top: 40px; font-size: .88rem; }

/* mobile nav — tablet band only.
   Below 760px the header wraps and the nav becomes an ordinary flex row on its
   own line (see the responsive section further down). This rule sets
   position:absolute and top:66px, and nothing down there resets it, so it used
   to apply at phone widths too: the dropdown stayed pinned 66px from the top of
   the header while the header itself had grown taller than that, dropping the
   nav straight on top of the search box. Hence "open the menu and the search
   sits over Home".
   The min-width bound is the fix — each rule now owns a range instead of one
   bleeding into the other. */
@media (max-width: 820px) and (min-width: 761px) {
  .main-nav { display: none; position: absolute; top: 66px; left: 0; right: 0; background: var(--panel); flex-direction: column; padding: 10px; border-bottom: 1px solid var(--border); }
  body.nav-open .main-nav { display: flex; }
  .nav-toggle { display: block; }
}

/* ==================== Hover preview modal ==================== */
.hover-card {
  position: absolute; z-index: 200; width: 300px;
  transform: translate(-50%, -100%);
  background: var(--panel, #16181d); border: 1px solid var(--border, #2a2d34);
  border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.hover-card.show { opacity: 1; pointer-events: auto; }
.hover-card .hc-poster { width: 100%; aspect-ratio: 16/9; background: var(--panel-2, #0f1116); }
.hover-card .hc-poster img { width: 100%; height: 100%; object-fit: cover; }
.hover-card .hc-body { padding: 12px 14px 14px; }
.hover-card .hc-title { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.hover-card .hc-orig { color: var(--muted, #9aa0aa); font-size: .8rem; margin-top: 2px; }
.hover-card .hc-actions { display: flex; gap: 8px; margin: 10px 0; align-items: center; }
.hover-card .hc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--border, #2a2d34); background: var(--panel-2, #0f1116);
  color: var(--text, #e8eaed); font-size: .85rem; cursor: pointer; text-decoration: none;
}
.hover-card .hc-watch { background: var(--accent, #ffd34e); color: #1a1600; border-color: transparent; font-weight: 700; flex: 1; }
.hover-card .hc-fav.on { color: #ff5d73; border-color: #ff5d73; }
.hover-card .hc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.hover-card .hc-badges span { font-size: .72rem; padding: 2px 7px; border-radius: 5px; background: var(--panel-2, #0f1116); border: 1px solid var(--border, #2a2d34); color: var(--muted,#9aa0aa); }
.hover-card .hc-genres { font-size: .78rem; color: var(--muted, #9aa0aa); margin-top: 4px; }
.hover-card .hc-overview { font-size: .8rem; color: var(--muted, #9aa0aa); margin-top: 8px; line-height: 1.4; }

/* ==================== Favorites ==================== */
.card-poster { position: relative; }
.fav-x {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 16px; line-height: 1;
  opacity: 0; transition: opacity .15s;
}
.card:hover .fav-x { opacity: 1; }
.act.on { color: #ff5d73; }

/* ==================== Watch bar / toggles / lang tabs ==================== */
.watch-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.watch-toggles { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tgl { display: inline-flex; align-items: center; gap: 6px; color: var(--muted,#9aa0aa); font-size: .85rem; cursor: pointer; }
.wserver-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.lang-tabs { display: flex; gap: 6px; }
.lang-tab { padding: 4px 12px; border-radius: 16px; border: 1px solid var(--border,#2a2d34); background: transparent; color: var(--muted,#9aa0aa); font-size: .78rem; cursor: pointer; }
.lang-tab.on { background: var(--accent,#ffd34e); color: #1a1600; border-color: transparent; font-weight: 700; }
.eplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.epbtn { padding: 10px 8px; border-radius: 8px; border: 1px solid var(--border,#2a2d34); background: var(--panel-2,#0f1116); color: var(--text,#e8eaed); cursor: pointer; font-size: .85rem; text-align: center; }
.epbtn:hover { border-color: var(--accent,#ffd34e); }
.epbtn.on { background: var(--accent,#ffd34e); color: #1a1600; border-color: transparent; font-weight: 700; }
.player-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; }
.player-wrap #player, .player-wrap video { width: 100%; height: 100%; }
.player-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #cfd3da; background: rgba(0,0,0,.4); }
.player-msg.hide { display: none; }

/* ==================== Ranked "Top views" (portrait + number) ==================== */
/* ==================== Rank badge ====================
   White text with a drop shadow vanished against pale posters — and a lot of
   posters have a bright bottom-left corner. A solid chip does not care what is
   behind it, and a scrim under the whole bottom edge stops the number ever
   sitting directly on artwork. The top three are gold, silver and bronze so the
   ranking reads at a glance instead of needing to be counted. */
.poster-box::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to top, rgba(6, 8, 12, .85), rgba(6, 8, 12, 0));
  pointer-events: none; z-index: 1; opacity: 0;
  transition: opacity .2s;
}
.rank-grid .poster-box::after { opacity: 1; }

.rank-num {
  position: absolute; left: 7px; bottom: 7px; z-index: 3;
  min-width: 30px; height: 30px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  font-weight: 900; font-size: 1.05rem; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
  background: rgba(12, 16, 24, .92); color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
}

/* Extra digits need a touch more room without growing the badge. Three-digit
   ranks only appear from page 4 of /top onwards, but they do appear. */
.rank-num[data-rank="10"] { font-size: .95rem; letter-spacing: -1px; }
.rank-num.rn-wide { font-size: .82rem; letter-spacing: -1px; }

.rank-num[data-rank="1"] {
  background: linear-gradient(145deg, #ffd76e, #f0a500);
  color: #2a1d00; border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 3px 14px rgba(240, 165, 0, .5);
}
.rank-num[data-rank="2"] {
  background: linear-gradient(145deg, #eef2f7, #b6c0cd);
  color: #1d232c; border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 3px 12px rgba(190, 200, 215, .4);
}
.rank-num[data-rank="3"] {
  background: linear-gradient(145deg, #e8a273, #c0713a);
  color: #2c1605; border-color: rgba(255, 255, 255, .45);
  box-shadow: 0 3px 12px rgba(192, 113, 58, .42);
}

.card:hover .rank-num { transform: translateY(-2px); }
.rank-num { transition: transform .15s; }
@media (prefers-reduced-motion: reduce) { .rank-num { transition: none; } }

/* ==================== Hover modal: below-variant ==================== */
.hover-card.below { transform: translate(-50%, 0); }

/* ==================== Episode SUB/DUB tag ==================== */
.epbtn { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.epbtn .epname { flex: 1; text-align: left; }
.eptag { font-size: .6rem; font-weight: 800; padding: 1px 5px; border-radius: 4px; letter-spacing: .3px; }
.tag-sub { background: #1e3a5f; color: #7cc4ff; }
.tag-dub { background: #3a2a5f; color: #c9a4ff; }

/* watch: back link above player */
.watch-top { margin-bottom: 10px; }
.watch-top .back { color: var(--muted,#9aa0aa); text-decoration: none; font-size: .9rem; }
.watch-top .back:hover { color: var(--text,#e8eaed); }

/* ==================== Sort select + country chip ==================== */
.sort-select { margin-left: auto; }
.chip-country { border-color: #3a4a6a; }

/* ==================== Info: overview + people ==================== */
.overview-box { background: var(--panel,#16181d); border: 1px solid var(--border,#2a2d34); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.overview-box h2 { margin: 0 0 8px; font-size: 1.1rem; }
.overview-box p { color: var(--muted,#c3c7cf); line-height: 1.6; margin: 0; }
.info-people { margin: 8px 0; font-size: .9rem; }
.info-people .ip-label { color: var(--muted,#9aa0aa); font-weight: 600; margin-right: 4px; }
.info-people a { color: var(--text,#e8eaed); text-decoration: none; }
.info-people a:hover { color: var(--accent,#ffd34e); }

/* ==================== Report modal ==================== */
.modal-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay[hidden] { display: none; }
.modal { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--panel,#16181d); border: 1px solid var(--border,#2a2d34); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border,#2a2d34); }
.modal-head h3 { margin: 0; font-size: 1.1rem; }
.modal-x { background: none; border: none; color: var(--muted,#9aa0aa); font-size: 22px; cursor: pointer; line-height: 1; }
.modal-body { padding: 8px 18px; }
.report-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px; border-bottom: 1px solid var(--border,#22252c); cursor: pointer; }
.report-opt:last-of-type { border-bottom: none; }
.report-opt input { margin-top: 3px; }
.report-opt strong { display: block; color: var(--text,#e8eaed); font-weight: 600; }
.report-opt span { display: block; color: var(--muted,#9aa0aa); font-size: .82rem; margin-top: 2px; }
.report-note { width: 100%; margin: 10px 0; padding: 10px; border-radius: 8px; border: 1px solid var(--border,#2a2d34); background: var(--panel-2,#0f1116); color: var(--text,#e8eaed); resize: vertical; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border,#2a2d34); }

/* ==================== Responsive (mobile → tablet → desktop) ==================== */
.nav-toggle { display: none; background: none; border: none; color: var(--text,#e8eaed); font-size: 24px; cursor: pointer; }

@media (max-width: 900px) {
  .info-grid { grid-template-columns: 1fr !important; }
  .info-left { max-width: 340px; margin: 0 auto; }
}

@media (max-width: 760px) {
  /* height:66px is a fixed height on a container that is now allowed to wrap,
     so the second row (search) and third row (nav) overflowed the header box
     instead of making it taller. min-height keeps the one-row case identical
     and lets the wrapped case grow. */
  .header-inner { flex-wrap: wrap; gap: 10px; row-gap: 10px; height: auto; min-height: 66px; padding-bottom: 10px; }
  .brand { flex: 0 0 auto; }
  .nav-toggle { display: block; order: 3; margin-left: auto; }
  .search { order: 4; flex: 1 1 100%; }
  .main-nav {
    order: 5; flex: 1 1 100%; flex-direction: column; gap: 2px;
    display: none;
  }
  body.nav-open .main-nav { display: flex; }
  .main-nav a { padding: 10px 6px; border-bottom: 1px solid var(--border,#22252c); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px; }
  .block-head { flex-wrap: wrap; gap: 8px; }
  .top-tabs { flex-wrap: wrap; }
  .filter-bar { flex-wrap: wrap; }
  .filter-bar select { flex: 1 1 44%; min-width: 0; }
  .sort-select { margin-left: 0; }
  .action-bar { flex-wrap: wrap; gap: 8px; }
  .rank-num { min-width: 26px; height: 26px; font-size: .92rem; border-radius: 8px; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card-title { font-size: .82rem; }
  .modal { border-radius: 12px; }
  .player-wrap { border-radius: 8px; }
  .eplist { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* hover previews already gated to (hover:hover) and min-width 760px in JS */

/* ==================== Player skip + resume ==================== */
/* ==================== Poster box responsive heights ====================
   Inline height:280px is the can't-fail uniform baseline; these !important
   rules refine the height per breakpoint when the stylesheet loads. */
.poster-box { position: relative; width: 100% !important; max-width: 100%; min-width: 0; }
@media (min-width: 1101px) { .poster-box { height: 300px !important; } }
@media (max-width: 1100px) and (min-width: 761px) { .poster-box { height: 300px !important; } }
@media (max-width: 760px) { .poster-box { height: 250px !important; } }
@media (max-width: 480px) { .poster-box { height: 240px !important; } }
.poster-box img { transition: transform .3s ease; }
.card:hover .poster-box img { transform: scale(1.05); }

/* ==================== Filter bar ====================
   Native <select> can't be styled cross-browser, so the arrow is drawn as a
   background SVG and appearance:none removes the platform chrome. */
.filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.filter-bar .fb-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); margin-right: 2px; flex: 0 0 auto;
}
.filter-bar select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 9px 34px 9px 13px;
  background-color: var(--panel-2);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2393a0b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
  border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); font-size: .875rem; font-weight: 600; font-family: inherit;
  cursor: pointer; outline: none; max-width: 200px;
  transition: border-color .15s, background-color .15s;
}
.filter-bar select:hover { border-color: #3a4a6a; background-color: #1f2739; }
.filter-bar select:focus-visible { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(110,168,254,.18); }
/* a dropdown holding a non-default value lights up so active filters are obvious */
.filter-bar select.has-value { border-color: var(--accent); color: var(--accent); }
.filter-bar select option { background: var(--panel-2); color: var(--text); }

/* format is fixed by the route on /movies and /tv-series — shown as a locked chip */
.fb-locked {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 9px;
  background: rgba(255, 209, 102, .12); border: 1px solid var(--accent);
  color: var(--accent); font-size: .875rem; font-weight: 700; white-space: nowrap;
}
.fb-locked svg { width: 13px; height: 13px; flex: 0 0 auto; }

.filter-bar .sort-select { margin-left: auto; }
.fb-reset {
  padding: 9px 14px; border-radius: 9px; background: transparent;
  border: 1px solid var(--border); color: var(--muted);
  font-size: .84rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.fb-reset:hover { color: var(--text); border-color: #3a4a6a; }

@media (max-width: 760px) {
  .filter-bar { gap: 8px; padding: 10px; }
  .filter-bar .fb-label { flex: 1 1 100%; margin-bottom: 2px; }
  .filter-bar select { flex: 1 1 44%; max-width: none; }
  .filter-bar .sort-select { margin-left: 0; }
  .fb-locked, .fb-reset { flex: 1 1 44%; justify-content: center; }
}

/* ==================== Watch: comments placeholder ==================== */
.comments-box {
  margin-top: 26px; padding: 30px 20px; text-align: center;
  background: var(--panel); border: 1px dashed var(--border); border-radius: var(--radius);
}
.comments-box h3 { margin: 0 0 6px; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.comments-box p { margin: 0; color: var(--muted); font-size: .88rem; }
.comments-box .cb-soon {
  display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px;
  background: rgba(255,209,102,.12); border: 1px solid var(--accent);
  color: var(--accent); font-size: .74rem; font-weight: 800; letter-spacing: .5px;
}

/* ==================== Watch: season tabs ==================== */
.season-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.season-tab {
  padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--muted); font-size: .8rem; font-weight: 600; cursor: pointer;
}
.season-tab:hover { color: var(--text); border-color: var(--accent-2); }
.season-tab.on { background: var(--accent); color: #26210a; border-color: transparent; font-weight: 700; }
.season-pane[hidden] { display: none; }

/* ==================== Ratings (user / IMDb / TMDB) ==================== */
.rating-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.rate-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
}
/* ==================== Person page (actor / director) ==================== */
.person-grid { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; }
@media (max-width: 900px) { .person-grid { grid-template-columns: 1fr; } }

.person-side {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; position: sticky; top: 84px;
}
@media (max-width: 900px) { .person-side { position: static; } }

.person-photo {
  width: 100%; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden;
  background: var(--panel-2); margin-bottom: 14px;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.person-initial {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 3.4rem; font-weight: 800; color: var(--muted);
}
.person-name { font-size: 1.4rem; margin: 0 0 2px; line-height: 1.25; }
.person-role { color: var(--accent); font-size: .84rem; font-weight: 700; margin-bottom: 14px; }

.pop-meter { margin-bottom: 16px; }
.pop-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .76rem; color: var(--muted); margin-bottom: 5px; }
.pop-head b { color: var(--accent); font-size: .9rem; }
.pop-bar { height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.pop-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

.person-facts { margin: 0 0 16px; font-size: .86rem; }
.person-facts > div { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.person-facts > div:last-child { border-bottom: none; }
.person-facts dt { flex: 0 0 96px; color: var(--muted); font-weight: 600; margin: 0; }
.person-facts dd { margin: 0; flex: 1 1 auto; min-width: 0; }

.person-bio h3 { font-size: .95rem; margin: 0 0 8px; }
.bio-text { font-size: .86rem; line-height: 1.65; color: var(--muted); white-space: pre-line; }
.bio-text.clamped { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.bio-toggle { margin-top: 8px; background: none; border: none; padding: 0; color: var(--accent-2); font-weight: 700; font-size: .82rem; cursor: pointer; }
.bio-toggle:hover { color: var(--accent); }

.person-links { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.person-links a {
  padding: 6px 12px; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--muted); font-size: .8rem; font-weight: 700;
}
.person-links a:hover { color: var(--accent); border-color: var(--accent); }

/* the filmography column is narrower than a full-width page, so fewer columns */
.person-main .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .person-main .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .person-main .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 480px)  { .person-main .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ==================== Recommended: one row, horizontally scrollable ====================
   It lives in the narrow right-hand column of the info page, so a 6-up grid
   squeezed every poster. A single scrolling row keeps them full size. */
.row-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: 168px;
  gap: 14px; overflow-x: auto; overflow-y: hidden;
  padding-bottom: 10px; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.row-scroll::-webkit-scrollbar { height: 7px; }
.row-scroll::-webkit-scrollbar-track { background: transparent; }
.row-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.row-scroll::-webkit-scrollbar-thumb:hover { background: #3a4a6a; }
.row-scroll .card { scroll-snap-align: start; width: 168px; }
.row-scroll .poster-box { height: 250px !important; }
@media (max-width: 480px) {
  .row-scroll { grid-auto-columns: 132px; }
  .row-scroll .card { width: 132px; }
  .row-scroll .poster-box { height: 198px !important; }
}

/* ==================== Watch: view-count badge ==================== */
.view-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.view-badge b { color: var(--accent); font-weight: 800; }
.view-badge svg { width: 14px; height: 14px; flex: 0 0 auto; }
.watch-bar .view-badge { margin-left: auto; }
@media (max-width: 760px) { .watch-bar .view-badge { margin-left: 0; } }

/* ==================== Info: Overview / Backdrops tabs ==================== */
.ob-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: -4px -4px 14px; padding: 0 4px; flex-wrap: wrap; }
.ob-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-weight: 700; font-size: .92rem;
  padding: 8px 4px; margin-right: 18px; cursor: pointer;
}
.ob-tab:hover { color: var(--text); }
.ob-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.ob-count {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted); font-size: .68rem; font-weight: 800;
}
.ob-pane[hidden] { display: none; }
.ob-tagline { color: var(--accent); font-style: italic; margin: 0 0 10px; font-size: .95rem; }

.backdrop-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .backdrop-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.backdrop-gallery .bd-item { display: block; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: var(--panel-2); }
.backdrop-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.backdrop-gallery .bd-item:hover img { transform: scale(1.05); }

/* ==================== Fixed-column grid variants ====================
   grid-4 is used where the container is a narrow page column (Recommended).
   home-block is 5-up, per the home page layout. */
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 760px) { .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

.home-block .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .home-block .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .home-block .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 480px)  { .home-block .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* The info page's right-hand column is a grid track: without minmax(0,...) its
   min-content width is the whole card row, which pushed the layout off screen. */
.info-grid { grid-template-columns: 340px minmax(0, 1fr); }
.info-right, .info-left { min-width: 0; }
.na { color: #6a7180; font-style: italic; }
.person-bio code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: .8em; }

/* Shown on a Top-views tab whose window has no recorded traffic yet. */
.top-note {
  margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); font-size: .82rem;
}

/* ==================== Nav: icons + Favorites pill ==================== */
.main-nav a { display: inline-flex; align-items: center; gap: 7px; }
.nav-ico { width: 16px; height: 16px; flex: 0 0 auto; opacity: .75; }
.main-nav a:hover .nav-ico, .main-nav a.on .nav-ico { opacity: 1; }

/* Favorites reads as an action, not another destination, so it gets a pill
   treatment that separates it from Home/Movies/TV. */
.main-nav a.nav-fav {
  position: relative; padding: 6px 14px; margin-left: 6px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  font-weight: 600; transition: background .16s, border-color .16s, color .16s;
}
.main-nav a.nav-fav .nav-ico { color: #ff5f6d; opacity: 1; }
.main-nav a.nav-fav:hover { border-color: #ff5f6d; background: rgba(255,95,109,.1); }
.main-nav a.nav-fav.on { background: rgba(255,95,109,.16); border-color: #ff5f6d; color: #ff8b95; }
.main-nav a.nav-fav::after { display: none; }

.fav-badge {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: #ff5f6d; color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 19px; text-align: center;
}
.fav-badge[hidden] { display: none; }

/* ==================== Section separation ====================
   Blocks used to butt straight up against each other. A little air plus a hair
   line makes each one read as its own shelf. */
.block { margin-bottom: 44px; padding-bottom: 36px; border-bottom: 1px solid var(--border); }
.block:last-of-type { margin-bottom: 24px; padding-bottom: 0; border-bottom: none; }
.block-head { padding-bottom: 2px; }
.block-head h2 { position: relative; }
@media (max-width: 760px) { .block { margin-bottom: 30px; padding-bottom: 24px; } }

/* ==================== Admin bar (front-end, admins only) ==================== */
#admin-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  height: 34px; padding: 0 12px;
  background: #14171f; border-bottom: 1px solid #2a3142;
  font-size: .8rem; color: #c8cfdd;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
body.has-admin-bar { padding-top: 34px; }
body.has-admin-bar .site-header { top: 34px; }
#admin-bar a { color: inherit; text-decoration: none; }
.ab-brand { font-weight: 800; color: #ffd166 !important; padding: 0 12px 0 0; margin-right: 4px; border-right: 1px solid #2a3142; }
.ab-item { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; line-height: 1; }
a.ab-item:hover { background: #212736; color: #fff; }
.ab-edit { color: #6ea8fe !important; font-weight: 700; }
.ab-draft { color: #26210a; background: #ffd166; font-weight: 800; }
.ab-spacer { flex: 1 1 auto; }
.ab-who { color: #6a7180; }
.ab-who em { font-style: normal; color: #ffd166; font-weight: 700; }
.ab-hide { background: none; border: none; color: #6a7180; cursor: pointer; font-size: 1rem; }
.ab-hide:hover { color: #fff; }
@media (max-width: 640px) { .ab-who { display: none; } }

/* ---- Filter bar: explicit submit ---- */
.fb-apply {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 9px;
  background: var(--accent); border: 1px solid var(--accent); color: #26210a;
  font-size: .85rem; font-weight: 800; font-family: inherit;
  cursor: pointer; white-space: nowrap; transition: filter .15s, box-shadow .15s;
}
.fb-apply:hover { filter: brightness(1.08); }
.fb-apply svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* Pulses once a dropdown changes, so it's obvious the choice isn't applied yet. */
.fb-apply.dirty { box-shadow: 0 0 0 3px rgba(255, 209, 102, .28); }
.filter-bar .sort-select { margin-left: auto; }
@media (max-width: 760px) { .fb-apply { flex: 1 1 100%; justify-content: center; } }

/* ==================== JWPlayer control bar ====================
   JWPlayer renders its own 10-second rewind button. We add our own pair
   (rewind + forward) so the two sit together in a sensible order, which means
   the built-in one has to go or the bar shows two identical back arrows. */
.jwplayer .jw-icon-rewind,
.jwplayer .jw-display-icon-rewind { display: none !important; }

/* ---- like / dislike ---- */
.rate-pill.js-vote {
  cursor: pointer; font-family: inherit; gap: 6px;
  transition: border-color .15s, color .15s, background .15s;
}
.rate-pill.js-vote svg { width: 15px; height: 15px; flex: 0 0 auto; }
.rp-like:hover { border-color: #4ade80; color: #4ade80; }
.rp-like.on { border-color: #4ade80; background: rgba(74,222,128,.14); color: #4ade80; }
.rp-like.on .rp-score { color: #4ade80; }
.rp-dislike:hover { border-color: #f87171; color: #f87171; }
.rp-dislike.on { border-color: #f87171; background: rgba(248,113,113,.14); color: #f87171; }
.rp-dislike.on .rp-score { color: #f87171; }
.rate-pill.js-vote:disabled { opacity: .6; cursor: default; }
.rate-pill.js-vote .rp-score { color: var(--text); font-size: .86rem; }

/* ==================== Ratings row (rebuilt) ====================
   The vote buttons previously inherited the panel background and read as flat
   black. They now carry their own tint so they are visibly interactive, and
   the two external scores use brand marks instead of the words IMDb / TMDB. */
.rating-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin: 14px 0; }

.rate-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  text-decoration: none; line-height: 1;
}
.rate-pill .rp-score { font-size: 1rem; font-weight: 800; color: var(--text); letter-spacing: .2px; }
/* deliberately small: the count is context, the score is the number */
.rate-pill .rp-votes { font-size: .68rem; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* ---- like / dislike ---- */
.rate-pill.js-vote {
  cursor: pointer; font-family: inherit;
  background: #1c2333; border-color: #33405c; color: #c8cfdd;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.rate-pill.js-vote:hover { transform: translateY(-1px); }
.rate-pill.js-vote svg { width: 16px; height: 16px; flex: 0 0 auto; }
.rate-pill.js-vote .rp-score { font-size: .92rem; }

.rp-like { color: #7fe0a4; border-color: #2d6b45; background: rgba(74,222,128,.10); }
.rp-like:hover { border-color: #4ade80; background: rgba(74,222,128,.18); }
.rp-like.on { background: #4ade80; border-color: #4ade80; color: #06331a; }
.rp-like.on .rp-score { color: #06331a; }

.rp-dislike { color: #f5a3a3; border-color: #6b3232; background: rgba(248,113,113,.10); }
.rp-dislike:hover { border-color: #f87171; background: rgba(248,113,113,.18); }
.rp-dislike.on { background: #f87171; border-color: #f87171; color: #3a0d0d; }
.rp-dislike.on .rp-score { color: #3a0d0d; }
.rate-pill.js-vote:disabled { opacity: .55; cursor: default; transform: none; }

/* ---- IMDb: official yellow badge, black wordmark ---- */
.brand-imdb {
  display: inline-flex; align-items: center; justify-content: center;
  background: #f5c518; color: #000;
  font-family: Arial, Helvetica, sans-serif; font-weight: 800; font-size: .72rem;
  letter-spacing: -.3px; padding: 3px 6px; border-radius: 4px; flex: 0 0 auto;
}
.rp-imdb { border-color: #6b5a12; background: rgba(245,197,24,.08); }
.rp-imdb:hover { border-color: #f5c518; background: rgba(245,197,24,.16); }
.rp-imdb .rp-score { color: #f5c518; }

/* ---- TMDB: the teal→blue gradient from their attribution page ----
   Built with the same box model as .brand-imdb (same font-size, padding and
   radius) rather than a wide SVG wordmark: the SVG carried TMDB's own 273×36
   aspect ratio, so at 15px tall it rendered ~114px wide and dwarfed the IMDb
   badge sitting next to it. Text in a span means the two badges are the same
   size by construction, not by a hand-tuned height that drifts the moment the
   font changes. */
.brand-tmdb {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, #90cea1 0%, #3cbec9 56%, #00b3e5 100%);
  color: #0d253f;
  font-family: Arial, Helvetica, sans-serif; font-weight: 800; font-size: .72rem;
  letter-spacing: -.3px; padding: 3px 6px; border-radius: 4px; flex: 0 0 auto;
}
.rp-tmdb { border-color: #1c5a6b; background: rgba(1,180,228,.08); }
.rp-tmdb:hover { border-color: #01b4e4; background: rgba(1,180,228,.16); }
.rp-tmdb .rp-score { color: #3cbec9; }

@media (max-width: 480px) {
  .rating-row { gap: 7px; }
  .rate-pill { padding: 6px 10px; gap: 6px; }
  .rate-pill .rp-votes { display: none; }
}

/* ==================== Resume prompt ====================
   An overlay on the player rather than a bar beside it: it is a choice about
   this video, shown once, and it should read that way. */
/* Centred with flexbox on a full-size overlay rather than a transform: the
   player sets transforms on its own descendants, and anything positioned by
   transform inside it gets dragged around when those change. */
.resume-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 8, 12, .55);
  pointer-events: auto;
}
.resume-overlay[hidden] { display: none; }
.resume-bar {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 26px; border-radius: 14px;
  background: rgba(10, 13, 20, .93); backdrop-filter: blur(6px);
  border: 1px solid var(--border); box-shadow: 0 18px 50px rgba(0,0,0,.55);
  text-align: center; max-width: min(92%, 420px);
}
.resume-text { font-size: .95rem; color: var(--text); }
.resume-text b { color: var(--accent); }
.resume-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ==================== Now-playing badge on the episode button ==================== */
.epbtn { position: relative; }
/* .on already paints the active episode solid accent with dark text. .playing
   must not repaint the background or the dark text lands on a near-transparent
   panel and disappears; it only adds the badge and a glow. */
.epbtn.playing {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(255, 209, 102, .28);
}
/* The active button is already solid accent, so an accent badge on it was
   invisible. The badge is dark with a light icon — the inverse of its host. */
.ep-playing {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 6px; border-radius: 50%;
  background: #1a1600; color: #ffd166; flex: 0 0 auto;
  animation: epPulse 1.6s ease-in-out infinite;
}
.ep-playing svg { width: 9px; height: 9px; margin-left: 1px; }
/* On a button that is NOT solid accent (hidden panel, hover states) invert
   back so the badge still stands out. */
.epbtn:not(.on) .ep-playing { background: var(--accent); color: #1a1600; }
@keyframes epPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 22, 0, .5); }
  50%      { box-shadow: 0 0 0 6px rgba(26, 22, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .ep-playing { animation: none; } }

/* ==================== Lights off ====================
   Everything except the player and the toggle drops behind a dark backdrop.
   Raising two elements above it is far more robust than trying to dim each
   section individually. */
#lightsBackdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .92); cursor: pointer;
}
body.lights-off .player-wrap { position: relative; z-index: 50; }
body.lights-off .watch-extras { position: relative; z-index: 50; }
body.lights-off .watch-extras .share-row { visibility: hidden; }
body.lights-off .js-lights { background: var(--accent); color: #26210a; border-color: var(--accent); }

/* ==================== Watch extras row ==================== */
.watch-extras {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 0 18px;
}
.js-lights { display: inline-flex; align-items: center; gap: 7px; }
.js-lights svg { width: 15px; height: 15px; }

.share-row { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.share-label { font-size: .78rem; color: var(--muted); font-weight: 700; margin-right: 2px; }
.share-btn {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
  font-weight: 800; font-size: .82rem; line-height: 1; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.share-btn:hover { color: #fff; }
.sb-fb:hover { background: #1877f2; border-color: #1877f2; }
.sb-x:hover { background: #000; border-color: #444; }
.sb-tg:hover { background: #229ed9; border-color: #229ed9; }
.sb-re:hover { background: #ff4500; border-color: #ff4500; }
.sb-copy:hover, .sb-native:hover { background: var(--accent); border-color: var(--accent); color: #26210a; }
@media (max-width: 640px) { .share-row { margin-left: 0; } }

/* The panel is hidden, not removed: the player reads its source from the
   episode buttons inside it. */
.watch-panel.is-hidden { display: none; }

/* ==================== Share modal ==================== */
.share-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 10, .72); backdrop-filter: blur(3px); padding: 20px;
}
.share-modal[hidden] { display: none; }
.share-card {
  width: min(100%, 420px); background: var(--panel);
  border: 1px solid var(--border); border-radius: 14px; padding: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.share-x { background: none; border: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.share-x:hover { color: var(--text); }

.share-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sg-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); font-size: .72rem; font-weight: 600;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.sg-btn span {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #2a3142; color: #fff; font-weight: 800; font-size: .9rem;
}
.sg-btn:hover { color: var(--text); transform: translateY(-2px); }
.sb-fb:hover span { background: #1877f2; }
.sb-x:hover span { background: #000; }
.sb-tg:hover span { background: #229ed9; }
.sb-wa:hover span { background: #25d366; }
.sb-re:hover span { background: #ff4500; }
.sb-pn:hover span { background: #e60023; }

.share-copy { display: flex; gap: 8px; margin-top: 14px; }
.share-copy input {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); font-size: .8rem; font-family: inherit;
}

/* lights toggle sits in the toolbar with Report */
.watch-toggles .js-lights.on { background: var(--accent); color: #26210a; border-color: var(--accent); }
.watch-toggles .js-lights svg { width: 15px; height: 15px; }
body.lights-off .watch-bar { position: relative; z-index: 50; }
body.lights-off .watch-bar .act:not(.js-lights) { opacity: .25; pointer-events: none; }

/* ==================== Top: two-level ranking tabs ====================
   Row one picks the ranking (Views / IMDb / TMDB), row two the window, which
   only Views has. Same markup on the home block (buttons, switched by JS) and
   on /top (links, one page each), so one rule set covers both. */
.top-tabs { align-items: flex-start; row-gap: 8px; }
.tt-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tt-row.tt-sub {
  padding-left: 10px; margin-left: 4px;
  border-left: 1px solid var(--border);
}
.tt-row.tt-sub[hidden] { display: none; }

.top-tab { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.top-tab > svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* A brand badge already carries its own colour, so the active pill goes quiet
   and marks itself with an outline instead of painting accent yellow behind
   the IMDb mark. */
.top-tab.tt-brand { padding: 4px 10px; }
.top-tab.tt-brand.on {
  background: var(--panel-2); color: var(--text);
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset;
}

.top-subtab {
  padding: 4px 11px; border-radius: 999px;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); cursor: pointer; text-decoration: none;
  font-size: .78rem; font-weight: 600; line-height: 1.4;
  transition: background .15s, color .15s, border-color .15s;
}
.top-subtab:hover { color: var(--text); border-color: var(--border); }
.top-subtab.on { background: var(--panel-2); border-color: var(--accent-2); color: var(--text); }

/* On /top the tabs are a bar of their own under the heading, not a strip
   inside it. */
.page-top-tabs { margin: -4px 0 18px; flex: 0 0 auto; }

@media (max-width: 760px) {
  .top-tabs .view-more { margin-left: 0; }
  .tt-row.tt-sub { padding-left: 0; margin-left: 0; border-left: none; }
}

/* ==================== Ranked card: corner badge ====================
   Views, IMDb and TMDB all use the same pill in the same corner; only the tint
   changes. These sit on top of a poster, so the contrast comes from the pill
   itself: a near-opaque plate and a hairline, not a translucent wash that
   disappears over a bright still. */
.rank-views, .rank-score {
  /* z-index matters: .poster-box::after lays a dark scrim over the bottom of
     every ranked poster at z-index 1, and these badges were below it — which
     is why the number read as if something were drawn in front of it. */
  position: absolute; right: 6px; bottom: 6px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(6, 8, 12, .94);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
  font-size: .76rem; font-weight: 800; line-height: 1;
}
.rank-views { color: #fff; }
.rank-views svg, .rank-score svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: 1; }
.rank-score.rs-imdb { color: #ffd233; border-color: rgba(245, 197, 24, .45); }
.rank-score.rs-tmdb { color: #4fd8e8; border-color: rgba(1, 180, 228, .45); }