/* Haven — night-indigo base (#0F0C16), amber accent (#EBA41C), from the Haven logo kit. One typeface, Open Sans:
   titles use its heavy weights with slightly tight spacing, the interface uses 400–600. */
:root {
  --bg: #0F0C16;
  --surface: #1A1528;
  --surface-2: #241D36;
  --line: rgba(234, 230, 242, .10);
  --text: #EAE6F2;
  --muted: #9C94B0;
  --accent: #EBA41C;        /* Haven amber: play, progress, focus */
  --accent-hi: #F7BA45;
  --accent-ink: #1E1405;    /* text on amber */
  --live: #E5484D;
  --ok: #4CC38A;
  --warn: #EBA41C;
  --ui: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: var(--ui);
  --gutter: max(16px, 4vw);
  --nav-h: 68px;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --poster-w: clamp(118px, 12.5vw, 196px);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F6F4FA; --surface: #FFFFFF; --surface-2: #ECE8F4; --line: rgba(20, 14, 36, .12);
  --text: #17121F; --muted: #625A74; --accent-ink: #1E1405;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --bg: #F6F4FA; --surface: #FFFFFF; --surface-2: #ECE8F4; --line: rgba(20, 14, 36, .12);
    --text: #17121F; --muted: #625A74;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); }
[hidden] { display: none !important; }
h1 { font-size: 28px; line-height: 1.15; margin: 0 0 16px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 19px; line-height: 1.3; margin: 28px 0 12px; font-weight: 600; }
.muted { color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- top bar: see-through on every page ----------
   At the top of a page a soft shade of the page colour sits behind the logo and buttons, so they
   read over any picture (white covers too) while artwork and colour washes show through. Over a
   billboard the shade is always dark (the logo is white there). Once the page scrolls, frosted
   glass: the page colour at 72% with a blur. TVs get a solid bar instead (blurs are slow there). */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--nav-h);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 62%, transparent 100%);
  transition: background-color .25s ease, box-shadow .25s ease;
}
body.has-hero .topbar { background: linear-gradient(180deg, rgba(15, 12, 22, .85), rgba(15, 12, 22, 0)); }
/* Scrolled: frosted. The blur sits on a layer behind the bar, never on the bar itself: a blurred
   element pins any position: fixed inside it (the phone's bottom tab bar) to itself. */
body.scrolled .topbar { background: transparent; box-shadow: 0 1px 0 var(--line); }
body.scrolled .topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.tv body.scrolled .topbar::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.brand { font: 800 24px/1 var(--display); letter-spacing: -.03em; color: var(--accent); }
.nav { display: flex; gap: 22px; }
.nav a { color: var(--muted); font-weight: 500; font-size: 14.5px; padding: 6px 0; position: relative; white-space: nowrap; }
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--text); font-weight: 600; }
.nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent); }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; text-align: center; }
.tool { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); }
.tool svg { width: 22px; height: 22px; }
.tool:hover, .tool.active { color: var(--text); }
.now { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--text); max-width: 260px; font-size: 13px; cursor: pointer; }
.now #now-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

main { padding: calc(var(--nav-h) + 20px) var(--gutter) 48px; outline: none; }
body.has-hero main { padding-top: 0; padding-left: 0; padding-right: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 6px; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink); cursor: pointer; font-weight: 600; white-space: nowrap; line-height: 1.2; }
.btn:hover { background: var(--accent-hi); }
.btn.ghost { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface); border-color: var(--muted); }
.btn.subtle { background: rgba(234, 230, 242, .18); color: #fff; backdrop-filter: blur(6px); }
.btn.subtle:hover { background: rgba(234, 230, 242, .28); }
.btn.big { padding: 12px 26px; font-size: 16.5px; font-weight: 700; }
.btn.small { padding: 6px 11px; font-size: 13px; }
.btn.danger { background: transparent; color: var(--live); border-color: rgba(229, 72, 77, .6); }
.btn.on { box-shadow: inset 0 0 0 2px var(--accent); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn svg { width: 18px; height: 18px; }

/* ---------- billboard ---------- */
.billboard { position: relative; height: min(84vh, 800px); min-height: 480px; overflow: hidden; isolation: isolate; }
.bb-art { position: absolute; inset: 0; z-index: -2; background: var(--surface) center 20% / cover no-repeat; }
/* No TMDB backdrop: the poster, blurred to fill, plus the crisp poster on the right */
.bb-art.from-poster { background: none; }
.bb-art.from-poster::before { content: ""; position: absolute; inset: -40px; background: var(--poster) center / cover; filter: blur(48px) saturate(1.3) brightness(.55); }
.bb-art.from-poster .bb-poster { position: absolute; right: calc(var(--gutter) + 2vw); top: 50%; transform: translateY(-46%); height: 64%; aspect-ratio: 2 / 3;
  background: var(--poster) center / cover; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.billboard::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(15, 12, 22, .82) 28%, rgba(15, 12, 22, .2) 62%, rgba(15, 12, 22, 0) 80%),
    linear-gradient(0deg, var(--bg) 0%, rgba(15, 12, 22, 0) 38%); }
.bb-copy { position: absolute; left: var(--gutter); bottom: 22%; width: min(560px, 46vw); }
.bb-title { font: 800 clamp(36px, 4.8vw, 68px)/1.05 var(--display); letter-spacing: -.025em; margin: 0 0 16px; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.bb-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #d8d2e6; font-size: 15px; font-weight: 500; margin-bottom: 12px; }
.bb-meta .rating { color: var(--accent); }
.bb-plot { color: #d8d2e6; font-size: 16px; line-height: 1.5; margin: 0 0 22px; max-width: 52ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bb-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* The one entrance moment: the billboard copy settles in once per page load */
@media (prefers-reduced-motion: no-preference) {
  .bb-copy { animation: settle .7s cubic-bezier(.2, .7, .2, 1) both; }
  .bb-art { animation: fadein 1.1s ease both; }
  @keyframes settle { from { opacity: 0; transform: translateY(18px); } }
  @keyframes fadein { from { opacity: 0; } }
}

/* ---------- rows ---------- */
.rows { position: relative; z-index: 2; padding-bottom: 24px; }
body.has-hero .rows { margin-top: -15vh; }
.row-section { margin: 0 0 30px; }
.row-head { display: flex; align-items: baseline; gap: 14px; padding: 0 var(--gutter); margin-bottom: 10px; }
.row-head h2 { margin: 0; font-size: clamp(17px, 1.5vw, 21px); }
.see-all { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.see-all:hover, .see-all:focus-visible { color: var(--accent); }
.row-track { position: relative; }
.row-scroller { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  padding: 8px var(--gutter) 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
.row-scroller::-webkit-scrollbar { display: none; }
.row-scroller > * { scroll-snap-align: start; flex: none; width: var(--poster-w); }
.row-scroller.channels > * { width: clamp(200px, 18vw, 260px); }
.row-arrow { position: absolute; top: 8px; bottom: 14px; width: var(--gutter); min-width: 40px; z-index: 3; border: 0; cursor: pointer;
  color: #fff; font-size: 34px; line-height: 1; opacity: 0; transition: opacity .2s; }
.row-arrow.prev { left: 0; background: linear-gradient(90deg, rgba(15, 12, 22, .9), rgba(15, 12, 22, 0)); }
.row-arrow.next { right: 0; background: linear-gradient(270deg, rgba(15, 12, 22, .9), rgba(15, 12, 22, 0)); }
.row-track:hover .row-arrow, .row-arrow:focus-visible { opacity: 1; }
.row-arrow[disabled] { visibility: hidden; }
.row-skeleton { display: flex; gap: 10px; padding: 8px var(--gutter) 14px; overflow: hidden; }
.row-skeleton i { flex: none; width: var(--poster-w); aspect-ratio: 2 / 3; border-radius: 6px; background: var(--surface); }

/* ---------- poster cards ---------- */
.card { position: relative; display: flex; flex-direction: column; border: 0; padding: 0; background: none; text-align: left; cursor: pointer; border-radius: 6px; }
.poster { position: relative; aspect-ratio: 2 / 3; width: 100%; border-radius: 6px; background: var(--surface) center / cover no-repeat; overflow: hidden;
  display: grid; place-items: center; color: var(--muted); font: 700 28px/1 var(--display); letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease; }
.card:hover .poster, .card:focus-visible .poster { transform: scale(1.045); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 2px var(--accent); }
.card:focus-visible { box-shadow: none; }
.card .name { margin-top: 8px; font-size: 13.5px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { font-size: 12px; color: var(--muted); margin-top: 1px; }
.card .fav { position: absolute; top: 6px; right: 7px; color: var(--accent); font-size: 15px; text-shadow: 0 1px 4px #000; }
.card .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .55); }
.card .bar i { display: block; height: 100%; background: var(--accent); }
.lib-badge { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700;
  background: rgba(15, 12, 22, .85); color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .poster, .row-arrow { transition: none; } .card:hover .poster, .card:focus-visible .poster { transform: none; } }

/* ---------- grid pages ("See all", search) ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 18px; }
.page-title { font: 800 clamp(28px, 3vw, 40px)/1.1 var(--display); margin: 0 0 4px; letter-spacing: -.02em; }
.back { color: var(--muted); font-size: 14px; font-weight: 500; display: inline-block; margin-bottom: 10px; }
.back:hover { color: var(--text); }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.input, .toolbar select, .toolbar input { padding: 9px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); }
.toolbar .input[type=search] { width: 240px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--poster-w), 1fr)); gap: 22px 12px; }
.grid.channels { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

/* ---------- live TV ---------- */
.browse { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.cats { position: sticky; top: calc(var(--nav-h) + 16px); max-height: calc(100vh - var(--nav-h) - 32px); overflow: auto; padding: 4px; }
.cats .cat { display: flex; width: 100%; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; color: var(--muted); font-weight: 500; }
.cats .cat:hover, .cats .cat:focus-visible { background: var(--surface); color: var(--text); }
.cats .cat.active { background: var(--surface-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.cats .cat .x { margin-left: auto; opacity: 0; font-size: 12px; padding: 0 4px; }
.cats .cat:hover .x { opacity: .7; }
.cats .cat.failed { text-decoration: line-through; opacity: .6; }
.cats-tools { display: flex; gap: 6px; padding: 4px 4px 10px; }
.cats-tools .input { flex: 1; min-width: 0; padding: 7px 10px; }
.cat-select { display: none; }
.chan { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 0; border-radius: 8px; cursor: pointer; text-align: left;
  transition: background-color .15s; }
.chan:hover, .chan:focus-visible { background: var(--surface-2); }
.chan:focus-visible { box-shadow: var(--focus); }
.chan .logo { width: 52px; height: 38px; flex: none; border-radius: 5px; background: var(--surface-2) center / contain no-repeat; display: grid; place-items: center;
  font: 700 13px/1 var(--display); color: var(--muted); }
.chan .num { color: var(--muted); font-size: 12px; min-width: 26px; font-variant-numeric: tabular-nums; }
.chan .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-weight: 500; }

.empty, .error-box { padding: 40px 24px; text-align: center; color: var(--muted); background: var(--surface); border-radius: 10px; }
.error-box { color: var(--text); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .5); }
.spinner { width: 30px; height: 30px; margin: 48px auto; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.notice { padding: 12px 16px; border-radius: 8px; background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); margin: 0 0 16px; font-size: 14px; }
body.has-hero .notice.floating { position: relative; z-index: 3; margin: calc(var(--nav-h) + 12px) var(--gutter) 0; }

/* ---------- detail sheet (movie "More info") ---------- */
.modal { position: fixed; inset: 0; z-index: 40; background: rgba(5, 3, 10, .72); display: grid; place-items: start center; padding: 40px 16px; overflow: auto; }
.modal-card { width: min(900px, 100%); background: var(--surface); border-radius: 12px; overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); }
.modal-card.plain { padding: 24px; }
.sheet-hero { position: relative; aspect-ratio: 16 / 8; min-height: 300px; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden; }
.sheet-hero .bb-art { border-radius: 0; }
.sheet-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--surface) 0%, rgba(26, 21, 40, .35) 55%, rgba(26, 21, 40, 0) 100%),
              linear-gradient(90deg, rgba(26, 21, 40, .75) 0%, rgba(26, 21, 40, 0) 60%); }
.sheet-hero .bb-art.from-poster .bb-poster { height: 78%; right: 28px; }
.sheet-copy { padding: 0 32px 22px; width: min(620px, 100%); }
.sheet-title { font: 800 clamp(28px, 3.6vw, 44px)/1.08 var(--display); letter-spacing: -.02em; margin: 0 0 16px; color: #fff; text-wrap: balance; }
.sheet-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(15, 12, 22, .75); color: #fff; font-size: 18px; cursor: pointer; }
.sheet-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; padding: 6px 32px 30px; }
.sheet-body p { margin: 0; line-height: 1.6; color: #d8d2e6; max-width: 62ch; }
.facts { display: flex; gap: 6px 16px; flex-wrap: wrap; color: var(--muted); font-size: 14px; margin-bottom: 12px; font-weight: 500; }
.facts .rating { color: var(--accent); }
.credits { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.credits b { color: var(--text); font-weight: 600; }
.credits div + div { margin-top: 8px; }

/* ---------- series page ---------- */
.series-page .billboard { height: min(70vh, 640px); }
.series-page .bb-copy { bottom: 14%; }
.series-body { position: relative; z-index: 2; padding: 0 var(--gutter); max-width: 1100px; }
.lib-line { color: var(--muted); font-size: 14px; margin: 4px 0 18px; }
.lib-line a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.ep { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--surface); border-radius: 8px; margin-bottom: 8px; }
.ep .ep-num { font: 700 22px/1 var(--display); color: var(--muted); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.ep .t { flex: 1; min-width: 0; }
.ep .t div:first-child { font-weight: 600; }
.ep .prog { height: 3px; background: var(--surface-2); border-radius: 2px; margin-top: 8px; }
.ep .prog i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

/* ---------- downloads ---------- */
.dl { display: grid; grid-template-columns: 46px 1fr auto; gap: 16px; align-items: center; padding: 12px 14px; background: var(--surface); border-radius: 8px; margin-bottom: 8px; }
.dl .thumb { width: 46px; height: 68px; border-radius: 4px; background: var(--surface-2) center / cover; }
.dl .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl .sub { font-size: 12.5px; color: var(--muted); }
.progress { height: 5px; background: var(--surface-2); border-radius: 3px; margin: 8px 0 5px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); transition: width .5s; }
.status { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--surface-2); color: var(--muted); }
.status.done { color: var(--ok); } .status.error { color: var(--live); } .status.downloading, .status.converting, .status.moving { color: var(--warn); }
.dl .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- settings ---------- */
.settings { max-width: 860px; }
.group { background: var(--surface); border-radius: 10px; padding: 6px 20px; margin-bottom: 16px; }
.group h2 { margin: 16px 0 6px; }
.field { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.field:first-of-type { border-top: 0; }
.field label { font-weight: 600; }
.field .help { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.field select, .field input[type=text], .field input[type=password], .field input[type=number], .field input[type=url] {
  width: 100%; padding: 9px 11px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); }
.switch { position: relative; width: 44px; height: 24px; appearance: none; background: var(--surface-2); border-radius: 12px; cursor: pointer; transition: background .2s; justify-self: start; box-shadow: inset 0 0 0 1px var(--line); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { left: 23px; }
.savebar { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; padding: 14px 0; background: var(--bg); border-top: 1px solid var(--line); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; font-size: 14px; }
.kv span:nth-child(odd) { color: var(--muted); }

/* ---------- player ---------- */
/* The picture fills the screen; the controls float over it (top and bottom gradients) and fade
   out after a few seconds of playback. .ui-on shows them; .paused keeps them up. */
.player { position: fixed; inset: 0; z-index: 50; background: #000; color: #fff; overflow: hidden; cursor: default; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player:not(.ui-on) { cursor: none; }
.pl-ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.player.ui-on .pl-ui { opacity: 1; pointer-events: auto; }
.pl-top, .pl-bottom { position: relative; padding: 16px clamp(16px, 3vw, 40px); }
.pl-top { display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); padding-bottom: 48px; }
.pl-bottom { background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0)); padding-top: 60px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.pl-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-title strong { font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-title span { font-size: 13px; color: #c9c2d8; }

.pl-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.pl-btn svg { width: 28px; height: 28px; }
.pl-btn:hover { background: rgba(255, 255, 255, .14); }
.pl-btn:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.pl-text { border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.pl-text:hover { background: rgba(255, 255, 255, .24); }
.pl-text:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
#pl-play .i-play, .player.paused #pl-play .i-pause { display: none; }
.player.paused #pl-play .i-play { display: block; }
#pl-mute .i-muted, .player.muted #pl-mute .i-vol { display: none; }
.player.muted #pl-mute .i-muted { display: block; }

.pl-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; border: 0;
  background: rgba(15, 12, 22, .6); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); }
.pl-center svg { width: 44px; height: 44px; margin-left: 4px; }
.pl-center:hover { background: var(--accent); color: var(--accent-ink); }

.pl-bar { display: flex; align-items: center; gap: 6px; }
.pl-spacer { flex: 1; }
.pl-vol { display: flex; align-items: center; }
.pl-vol input { width: 0; opacity: 0; transition: width .2s, opacity .2s; }
.pl-vol:hover input, .pl-vol:focus-within input { width: 90px; opacity: 1; margin-right: 8px; }
.pl-live { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-weight: 700; font-size: 13px; }
.pl-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.pl-chan { display: flex; gap: 8px; }

/* Seek bar: amber up to the play position (--pct set from script) */
.pl-seek { margin-bottom: 6px; }
.pl-seek input, .pl-vol input { -webkit-appearance: none; appearance: none; height: 18px; background: transparent; cursor: pointer; }
.pl-seek input { width: 100%; display: block; }
.pl-seek input::-webkit-slider-runnable-track, .pl-vol input::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--pct, 0%), rgba(255, 255, 255, .3) var(--pct, 0%)); }
.pl-seek input::-moz-range-track, .pl-vol input::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.pl-seek input::-moz-range-progress, .pl-vol input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.pl-seek input::-webkit-slider-thumb, .pl-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--accent); border: 0; }
.pl-seek input::-moz-range-thumb, .pl-vol input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 0; }
.pl-seek input:hover::-webkit-slider-runnable-track { height: 6px; }
.pl-seek input:hover::-webkit-slider-thumb { margin-top: -4px; }
.pl-times { display: flex; justify-content: space-between; font-size: 13px; color: #d8d2e6; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pl-epg { font-size: 14px; color: #d8d2e6; margin-bottom: 10px; max-width: 70ch; }
.pl-epg b { color: #fff; }

/* Playback settings menu (modes in plain words) */
.pl-menu-wrap { position: relative; }
.pl-menu { position: absolute; right: 0; bottom: 52px; width: 290px; padding: 8px; border-radius: 10px; background: rgba(26, 21, 40, .97); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.pl-menu h3 { margin: 4px 10px 8px; font-size: 13px; font-weight: 600; color: #a7a0b8; }
.pl-menu button { display: flex; width: 100%; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 0; border-radius: 6px; background: none; color: #fff; text-align: left; cursor: pointer; }
.pl-menu button:hover, .pl-menu button:focus-visible { background: rgba(255, 255, 255, .1); }
.pl-menu button .tick { width: 16px; flex: none; color: var(--accent); font-weight: 700; }
.pl-menu button small { display: block; color: #a7a0b8; font-size: 12px; margin-top: 2px; }

.pl-spin { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pl-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); z-index: 2;
  padding: 22px 24px; border-radius: 12px; background: rgba(26, 21, 40, .96); text-align: center; }
.pl-msg .btn { margin: 12px 4px 0; }

@media (max-width: 700px) {
  .pl-vol, #seek-back, #seek-fwd { display: none; }
  /* Phones: channel / next-episode buttons get their own line so the controls fit */
  .pl-bar { flex-wrap: wrap; row-gap: 10px; }
  .pl-chan, #pl-next { order: -1; flex: 1 0 100%; }
  .pl-chan .pl-text { flex: 1; }
  .pl-text { padding: 9px 10px; font-size: 13px; }
  .pl-center { width: 72px; height: 72px; }
}

/* ---------- pickers, toasts, login ---------- */
.pick-list { overflow: auto; background: var(--surface-2); border-radius: 8px; padding: 4px; }
.pick { display: flex; width: 100%; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.pick:hover, .pick:focus-visible { background: var(--surface); }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 11px 15px; border-radius: 8px; background: var(--surface-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); max-width: 380px; font-size: 14px; }
.toast.err { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 3px 0 0 var(--live); }
.login { max-width: 380px; margin: 14vh auto; background: var(--surface); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.login h1 { font: 800 32px/1.1 var(--display); letter-spacing: -.03em; color: var(--accent); margin: 0 0 6px; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 900px) {
  :root { --nav-h: 56px; --poster-w: 112px; }
  .topbar { gap: 12px; }
  .brand { font-size: 26px; }
  .now { max-width: 150px; }
  main { padding-bottom: 96px; }
  .billboard { height: 76vh; min-height: 440px; }
  .bb-copy { width: auto; right: var(--gutter); bottom: 17%; }
  .bb-art.from-poster .bb-poster { left: 50%; right: auto; top: 12%; height: 50%; transform: translateX(-50%); }
  .billboard::after { background: linear-gradient(0deg, var(--bg) 8%, rgba(15, 12, 22, .7) 45%, rgba(15, 12, 22, .1) 75%); }
  .bb-plot { -webkit-line-clamp: 2; font-size: 14.5px; }
  body.has-hero .rows { margin-top: -6vh; }
  .row-arrow { display: none; }
  .browse { grid-template-columns: 1fr; }
  .cats { display: none; }
  .cat-select { display: block; width: 100%; }
  .grid.channels { grid-template-columns: 1fr; }
  .toolbar .input[type=search] { width: 100%; }
  .sheet-body { grid-template-columns: 1fr; padding: 4px 20px 24px; }
  .sheet-copy { padding: 0 20px 18px; }
  .sheet-hero { aspect-ratio: 4 / 5; }
  .modal { padding: 0; }
  .modal-card { border-radius: 0; min-height: 100%; }
  .field { grid-template-columns: 1fr; gap: 6px; }
  .dl { grid-template-columns: 1fr; }
  .dl .thumb { display: none; }
  .dl .actions { justify-content: flex-start; }
  .kv { grid-template-columns: 1fr; }
}
.card .meta { display: flex; gap: 8px; }

/* Settings → Rows: category checklists */
.row-pick { margin-bottom: 8px; }
.row-pick summary { cursor: pointer; color: var(--text); font-weight: 600; padding: 6px 0; }
.checks { max-height: 320px; margin-top: 6px; }
.check { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.check:hover { background: var(--surface); }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* Now playing (relay) */
.now-list { display: grid; gap: 12px; max-width: 980px; }
.now-card { display: flex; gap: 18px; padding: 14px; background: var(--surface); border-radius: 10px; align-items: center; }
.now-art { width: 84px; aspect-ratio: 2 / 3; flex: none; border-radius: 6px; background: var(--surface-2) center / cover no-repeat;
  display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.now-art.logo { aspect-ratio: 4 / 3; background-size: contain; }
.now-info { flex: 1; min-width: 0; }
.now-info h2 { margin: 0 0 6px; font-size: 18px; }
.now-info .facts { margin-bottom: 8px; }
.now-info .row { margin-top: 10px; }
.live-tag { color: var(--live); font-weight: 700; }

/* Video quality: posters show 4K / CAM when known; the player shows the real resolution */
.q-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.5;
  background: rgba(15, 12, 22, .85); color: #fff; box-shadow: inset 0 0 0 1px rgba(234, 230, 242, .35); }
.q-badge.cam { color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 50%, transparent); }
.poster .q-badge { position: absolute; bottom: 8px; right: 8px; }
@media (max-width: 900px) {
  .now-card { flex-direction: column; align-items: stretch; }
  .now-art { width: 72px; }
}

/* Custom logo */
.brand img { display: block; height: 34px; width: auto; max-width: 180px; object-fit: contain; }
.login-logo { display: block; max-height: 64px; max-width: 240px; margin: 0 0 8px; }
.logo-preview { display: flex; align-items: center; min-height: 56px; padding: 10px 14px; margin-bottom: 10px; border-radius: 8px; background: var(--bg); }
.logo-preview img { max-height: 44px; max-width: 220px; }
@media (max-width: 900px) { .brand img { height: 28px; max-width: 130px; } }

/* ---------- search sheet ---------- */
/* Full screen, sized for a TV across the room as much as a laptop: a big input line that lights
   up amber while you type, scope chips, then result rows. */
.top-spacer { margin-left: auto; }
body.searching { overflow: hidden; }
.search-sheet { position: fixed; inset: 0; z-index: 35; background: rgba(15, 12, 22, .98); overflow-y: auto; padding-bottom: 40px; }
.search-head { display: flex; align-items: center; gap: 18px; margin: 0 var(--gutter); padding: clamp(20px, 4vh, 40px) 0 14px;
  border-bottom: 2px solid var(--line); transition: border-color .2s; }
.search-head:focus-within { border-color: var(--accent); }
.search-glyph { width: clamp(26px, 2.4vw, 36px); height: clamp(26px, 2.4vw, 36px); color: var(--muted); flex: none; }
#search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); caret-color: var(--accent);
  font: 600 clamp(24px, 3vw, 44px)/1.2 var(--ui); letter-spacing: -.015em; }
#search-input::placeholder { color: #5f5775; }
#search-input::-webkit-search-cancel-button { display: none; }
.search-scopes { display: flex; gap: 10px; flex-wrap: wrap; padding: 18px var(--gutter) 6px; }
.scope { padding: 9px 18px; border: 0; border-radius: 999px; background: var(--surface); color: var(--muted); font-weight: 600; font-size: 15px; cursor: pointer; }
.scope:hover { color: var(--text); }
.scope[aria-selected="true"] { background: var(--text); color: var(--bg); }
.search-body { padding-top: 14px; }
.search-body .row-head h2 { font-size: clamp(16px, 1.4vw, 20px); }
.search-note { padding: 30px var(--gutter); }
.search-note p { margin: 0 0 14px; font-size: 17px; }
.search-recent { padding: 10px var(--gutter); }
.search-recent h2 { margin: 0 0 12px; font-size: 16px; color: var(--muted); font-weight: 600; }
.recent-list { display: flex; flex-wrap: wrap; gap: 10px; }
.recent { padding: 10px 16px; border: 0; border-radius: 8px; background: var(--surface); color: var(--text); font-size: 16px; cursor: pointer; }
.recent:hover { background: var(--surface-2); }

/* Continue watching: ⋯ menu on each poster */
.card-wrap { position: relative; }
.card-wrap .card { width: 100%; }
.card-more { position: absolute; top: 6px; right: 6px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(15, 12, 22, .78); color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s; }
.card-more svg { width: 20px; height: 20px; }
.card-wrap:hover .card-more, .card-more:focus-visible, .card-wrap:focus-within .card-more { opacity: 1; }
@media (hover: none) { .card-more { opacity: 1; } }
.card-menu { position: absolute; top: 44px; left: 4px; right: 4px; z-index: 3; padding: 6px; border-radius: 8px; background: var(--surface-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
.card-menu button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: none; color: var(--text); text-align: left; font-size: 14px; cursor: pointer; }
.card-menu button:hover, .card-menu button:focus-visible { background: var(--surface); }
.card-wrap .fav { display: none; }

/* Loading placeholders in rows are poster-sized (the general .poster rule would make them full width) */
.row-scroller > .poster { width: var(--poster-w); flex: none; }
.row-scroller.channels > .poster { aspect-ratio: auto; height: 58px; }

/* With the progress bar inside the poster, keep the quality badge clear of it */
.poster .bar ~ .q-badge, .poster .q-badge:has(~ .bar) { bottom: 12px; }

/* ---------- featured slider ---------- */
.carousel::after { display: none; }                       /* each slide carries its own gradient */
.bb-slide { position: absolute; inset: 0; isolation: isolate; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.bb-slide.active { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; } /* visible at once, so its Play can take focus */
.bb-slide::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(15, 12, 22, .82) 28%, rgba(15, 12, 22, .2) 62%, rgba(15, 12, 22, 0) 80%),
    linear-gradient(0deg, var(--bg) 0%, rgba(15, 12, 22, 0) 38%); }
.carousel .bb-copy { animation: none; }
.bb-slide.active .bb-copy { animation: settle .45s cubic-bezier(.2, .7, .2, 1) both; }
.bb-reason { color: var(--accent); font-weight: 700; }

/* Progress bars: the active one fills over the slide time; its animationend moves the slider on */
.bb-dots { position: absolute; z-index: 2; left: var(--gutter); bottom: calc(15vh + 14px); display: flex; gap: 8px; }
.bb-dot { width: 34px; height: 18px; padding: 7px 0; border: 0; background: none; cursor: pointer; }
.bb-dot i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); position: relative; overflow: hidden; }
.bb-dot i::after { content: ""; position: absolute; inset: 0; width: 0; background: #fff; }
.bb-dot.active i::after { animation: slidefill 5s linear forwards; }
.carousel.held .bb-dot.active i::after, .carousel.hidden-tab .bb-dot.active i::after { animation-play-state: paused; }
.bb-dot:focus-visible { box-shadow: none; }
.bb-dot:focus-visible i { box-shadow: 0 0 0 2px var(--accent); }
@keyframes slidefill { to { width: 100%; } }

.bb-nav { position: absolute; z-index: 2; top: 30%; bottom: 30%; width: 56px; border: 0; background: none; color: #fff; font-size: 44px; cursor: pointer; opacity: 0; transition: opacity .2s; }
.bb-nav.prev { left: 0; } .bb-nav.next { right: 0; }
.carousel:hover .bb-nav, .bb-nav:focus-visible { opacity: .85; }
.bb-nav:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bb-slide { transition: none; }
  .bb-dot.active i::after { animation: none; width: 100%; }   /* no auto-advance */
  .bb-slide.active .bb-copy { animation: none; }
}
@media (max-width: 900px) {
  .bb-dots { left: var(--gutter); right: auto; bottom: calc(6vh + 10px); }
  .bb-nav { display: none; }
}
/* Slider: the text sits a fixed distance above the progress bars */
.carousel .bb-copy { bottom: calc(15vh + 44px); }
@media (max-width: 900px) { .carousel .bb-copy { bottom: calc(6vh + 40px); } }

/* Search button in the top bar: a pill with the word on wide screens, just the glass on phones */
.search-pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border: 0; border-radius: 999px;
  background: rgba(234, 230, 242, .1); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color .15s; }
.search-pill svg { width: 20px; height: 20px; }
.search-pill:hover { background: rgba(234, 230, 242, .18); }
.search-pill:focus-visible { box-shadow: var(--focus); }
@media (max-width: 900px) {
  .search-pill { width: 38px; padding: 0; justify-content: center; }
  .search-pill span { display: none; }
}

/* ---------- movie page ---------- */
.title-hero { height: min(78vh, 760px); }
.title-hero .bb-copy { bottom: 16%; width: min(640px, 52vw); }
.title-hero .bb-plot { -webkit-line-clamp: 5; max-width: 60ch; }
.title-hero .bb-meta .q-badge { align-self: center; }
.tagline { color: #d8d2e6; font-style: italic; margin: 0 0 10px; font-size: 16px; }
.title-hero .lib-line { margin-top: 14px; color: #c9c2d8; }
.title-body { position: relative; z-index: 2; margin-top: -6vh; padding-bottom: 40px; }
.title-body > div:empty { display: none; }

/* Cast: round photos with name and character */
.row-scroller.cast > * { width: clamp(104px, 9vw, 140px); }
.cast-card { text-align: center; }
.cast-photo { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--surface) center / cover no-repeat; display: grid; place-items: center;
  color: var(--muted); font-weight: 700; font-size: 22px; }
.cast-name { margin-top: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.cast-role { font-size: 12.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }

.title-details { padding: 6px var(--gutter) 0; max-width: 900px; }
.title-details h2 { margin: 6px 0 12px; }
.title-details dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 18px; margin: 0; font-size: 14.5px; }
.title-details dt { color: var(--muted); }
.title-details dd { margin: 0; }
.series-page .title-body { margin-top: 24px; }

@media (max-width: 900px) {
  .title-hero { height: 80vh; }
  .title-hero .bb-copy { width: auto; bottom: 8%; }
  .title-hero .bb-plot { -webkit-line-clamp: 4; }
  .title-body { margin-top: 0; }
  .title-details dl { grid-template-columns: 110px 1fr; }
}

/* Captions: CC button lit when on; cues readable from the sofa */
.pl-btn[aria-pressed="true"] { color: var(--accent); }
.player video::cue { background: rgba(0, 0, 0, .62); color: #fff; font-family: 'Open Sans', system-ui, sans-serif; font-size: clamp(18px, 2.6vw, 34px); line-height: 1.35; }
.pl-menu h3 + button, .pl-menu button + h3 { margin-top: 0; }
.pl-menu button + h3 { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); }

/* Like / not for me */
.rate { display: inline-flex; gap: 8px; }
.rate-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); background: rgba(20, 16, 30, .45); color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.rate-btn svg { width: 22px; height: 22px; }
.rate-btn.down svg { transform: rotate(180deg); }
.rate-btn:hover { border-color: #fff; }
.rate-btn:focus-visible { box-shadow: var(--focus); }
.rate-btn[aria-pressed="true"] { background: #fff; color: #120e1c; border-color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- bottom tab bar (phones) ----------
   Like Netflix and Prime: five tabs, outline icon over a short label, grey until chosen; the
   chosen tab turns white and its icon fills in. Our own mark: a short amber line above it.
   "Now playing" only joins the bar while something is playing (its count badge is showing). */
.nav .ni, .nav .short { display: none; }
@media (max-width: 640px) {
  .nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; gap: 0;
    padding: 0 max(4px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-right));
    background: rgba(15, 12, 22, .9); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 -1px 0 rgba(234, 230, 242, .08); }
  .nav a { flex: 1 1 0; min-width: 0; height: 58px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: #8F88A3; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; -webkit-tap-highlight-color: transparent; }
  .nav a:hover { color: #8F88A3; }
  .nav .ni { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .12s; }
  .nav a:active .ni { transform: scale(.88); }
  .nav .nl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav .long { display: none; }
  .nav .short { display: inline; }
  .nav a.active { color: #fff; font-weight: 700; }
  .nav a.active .f { fill: currentColor; }
  .nav a.active .cut { fill: #0F0C16; stroke: #0F0C16; }
  .nav a.active::after { left: 50%; right: auto; top: 0; bottom: auto; width: 28px; height: 3px; margin-left: -14px; border-radius: 0 0 3px 3px; }
  .nav a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); border-radius: 10px; }
  .nav a[data-nav="now"]:has(#now-badge[hidden]):not(.active) { display: none; }
  /* Count badges sit on the icon's corner */
  .nav .badge { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
  :root[data-theme="light"] .nav { background: rgba(246, 244, 250, .9); box-shadow: 0 -1px 0 var(--line); }
  :root[data-theme="light"] .nav a, :root[data-theme="light"] .nav a:hover { color: #6E6682; }
  :root[data-theme="light"] .nav a.active { color: #17121F; }
  :root[data-theme="light"] .nav a.active .cut { fill: #F6F4FA; stroke: #F6F4FA; }
  main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(70px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .nav .ni { transition: none; } }

/* ---------- Live TV guide cards ----------
   Logo on a light tile (logos are drawn for light backgrounds), the channel's name, then what's
   on now with a thin progress line and what's next. No logo: the name itself, set in type. */
.grid.channels { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.chan { display: flex; align-items: center; gap: 14px; padding: 10px; min-height: 84px; background: var(--surface); border: 0; border-radius: 10px;
  cursor: pointer; text-align: left; color: var(--text); transition: background-color .15s; }
.chan-logo { position: relative; flex: none; width: 112px; aspect-ratio: 16 / 9; border-radius: 7px; background: #ECE9F2; overflow: hidden; display: grid; place-items: center; }
.chan-logo img { width: 82%; height: 78%; object-fit: contain; }
.chan-logo .mark { display: none; padding: 0 8px; color: #2A2338; font-weight: 800; font-size: 12.5px; line-height: 1.15; text-align: center; letter-spacing: .01em;
  overflow: hidden; display: none; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.chan-logo.nologo { background: linear-gradient(160deg, #2C2540, #1E1830); }
.chan-logo.nologo img { display: none; }
.chan-logo.nologo .mark { display: -webkit-box; color: #E9E5F2; }
.chan-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chan-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chan-name .nm { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan-name .q-badge { flex: none; font-size: 10px; padding: 0 5px; }
.chan-fav { color: var(--accent); flex: none; }
.chan-now { display: flex; flex-direction: column; gap: 2px; min-height: 34px; font-size: 13px; }
.chan-show { color: #DDD8E8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan-time { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.chan-next::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; vertical-align: middle; margin: 0 6px 2px 4px; }
.chan-bar { height: 3px; border-radius: 2px; background: rgba(234, 230, 242, .14); margin-top: 3px; overflow: hidden; }
.chan-bar i { display: block; height: 100%; background: var(--accent); }
.chan-none { color: var(--muted); font-size: 12px; }
.row-scroller.channels > * { width: clamp(300px, 26vw, 360px); }
:root[data-theme="light"] .chan-show { color: var(--text); }
@media (max-width: 900px) {
  .grid.channels { grid-template-columns: 1fr; }
  .chan-logo { width: 96px; }
}

/* Category list: a find box across the full width, the hidden toggle as a quiet link below */
.cats-tools { flex-direction: column; align-items: stretch; gap: 6px; }
.link-btn { border: 0; background: none; padding: 2px 4px; color: var(--muted); font-size: 12.5px; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--text); }
.link-btn:focus-visible { box-shadow: var(--focus); border-radius: 4px; }

/* ---------- versions on a title page: HD · 4K · Telugu ---------- */
.versions { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
/* Version chooser: an Audio button and a quality switch, in one quiet line over the artwork */
.vpick { align-items: center; gap: 10px; }
.vp-lang, .vp-q, .vp-only { height: 40px; border: 1px solid rgba(234, 230, 242, .22); border-radius: 999px;
  background: rgba(15, 12, 22, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #EDEAF4; }
.vp-lang { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; font: inherit; font-size: 14px; cursor: pointer; max-width: 100%; }
.vp-lang svg { width: 18px; height: 18px; flex: none; }
.vp-lang .vp-cap { color: #B9B2CB; }
.vp-lang b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-lang:hover { border-color: rgba(255, 255, 255, .6); }
.vp-q { display: inline-flex; padding: 3px; gap: 2px; }
.vp-q button { padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #CFC8DE; font: 600 14px/1 var(--ui); cursor: pointer; white-space: nowrap; }
.vp-q button[aria-checked="true"] { background: #fff; color: #120E1C; cursor: default; }
.vp-q button:not([aria-checked="true"]):hover { color: #fff; }
.vp-only { display: inline-flex; align-items: center; padding: 0 14px; font-size: 14px; font-weight: 600; }
.vp-sheet { width: min(460px, 100%); }
.vp-sheet h1 { margin: 0 0 10px; font-size: 22px; }
.vp-list { display: grid; gap: 4px; max-height: 60vh; overflow-y: auto; }
.vp-list button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 12px 14px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.vp-list button span { font-weight: 600; }
.vp-list button small { grid-column: 1; color: var(--muted); font-size: 13px; }
.vp-list button:hover, .vp-list button:focus-visible { background: var(--surface-2); }
.vp-list button[aria-selected="true"] { background: var(--surface-2); }
.vp-tick { grid-column: 2; grid-row: 1 / span 2; width: 10px; height: 18px; border: solid var(--accent); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-3px, -2px); }
@media (max-width: 640px) {
  /* Phones: the list rises from the bottom */
  .modal-card.vp-sheet { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; min-height: 0; border-radius: 16px 16px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
.tv .vp-lang:focus, .tv .vp-q button:focus { background: #fff; color: #120E1C; box-shadow: 0 0 0 3px #fff; }
.tv .vp-list button:focus { background: #fff; color: #120E1C; }
.ver { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(234, 230, 242, .35); background: rgba(15, 12, 22, .45); color: #EDEAF4;
  font-weight: 600; font-size: 13.5px; cursor: pointer; }
.ver:hover { border-color: #fff; }
.ver[aria-pressed="true"] { background: #fff; color: #120E1C; border-color: #fff; cursor: default; }
.ver:focus-visible { box-shadow: var(--focus); }

/* ---------- poster cards: same height in every row ----------
   Title in at most two lines (space kept for two), details in one line that trims the genre. */
.card .name { min-height: calc(1.3em * 2); }
.card .meta { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.card .meta > span { flex: none; }
.card .meta > span:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chan-name .nm { flex: 0 1 auto; }
/* Long show names must never widen the page: the grid tracks may shrink below their content */
.grid.channels { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.grid.channels > .chan { min-width: 0; }
@media (max-width: 900px) { .grid.channels { grid-template-columns: minmax(0, 1fr); } }

/* Already in your library: a small green tick on the poster's corner */
.lib-badge { top: 7px; left: 7px; width: 22px; height: 22px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: #2FB36B; color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.lib-badge svg { width: 14px; height: 14px; }

/* ---------- Downloads: short intro, search, pages, ⋯ menu ---------- */
.dl-intro { margin: 6px 0 18px; max-width: 70ch; }
.dl-search { width: min(360px, 100%); margin-bottom: 8px; }
.dl-count { font-size: 14px; font-weight: 500; margin-left: 6px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 24px; }
.dl-more-wrap { position: relative; }
.dl-more { min-width: 36px; font-size: 18px; line-height: 1; }
.dl-more-wrap .card-menu { top: calc(100% + 6px); left: auto; right: 0; width: 240px; }
.card-menu button small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.card-menu .danger-text { color: #FF6B70; }

/* ---------- Settings: side menu of sections (a chip strip on phones) ---------- */
.settings-wrap { display: grid; grid-template-columns: 210px minmax(0, 860px); gap: 36px; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 2px; padding-top: 58px; }
.settings-nav a { padding: 8px 12px; border-radius: 6px; color: var(--muted); font-weight: 500; font-size: 14px; }
.settings-nav a:hover { color: var(--text); background: var(--surface); }
.settings-nav a.active { color: var(--text); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.settings .group h2 { scroll-margin-top: calc(var(--nav-h) + 20px); }
.settings .group { scroll-margin-top: calc(var(--nav-h) + 12px); }
@media (max-width: 900px) {
  .settings-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .settings-nav { top: var(--nav-h); z-index: 5; flex-direction: row; overflow-x: auto; gap: 6px; padding: 10px 0; margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    background: var(--bg); scrollbar-width: none; }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav a { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--surface); font-size: 13px; white-space: nowrap; }
  .settings-nav a.active { box-shadow: none; background: var(--text); color: var(--bg); }
  .settings .group { scroll-margin-top: calc(var(--nav-h) + 64px); }
}
/* Tablets keep the top menu (the bottom tab bar is for phones); tighter so it fits */
@media (min-width: 641px) and (max-width: 900px) {
  .nav { gap: 16px; }
  .nav a { font-size: 13.5px; }
  .nav a[data-nav="now"]:has(#now-badge[hidden]):not(.active) { display: none; }
  main { padding-bottom: 32px; }
}
.now-empty > p { color: var(--muted); margin: 0 0 18px; max-width: 60ch; }
.now-empty h2 { margin: 8px 0 12px; }

/* =====================================================================================
   TV layout (html.tv): Android TV / Google TV, Fire TV, smart-TV browsers.
   The page is laid out 1280 px wide and scaled to the screen (see tv in app.js).
   White means "selected", as on Netflix and Prime for TV: a focused poster grows inside a white
   frame, a focused button turns solid white. Amber stays for progress and badges.
   Wider margins keep everything inside a TV's overscan; heavy blurs go (TV chips are slow).
   ===================================================================================== */
.tv { --gutter: 56px; --focus: 0 0 0 3px #fff; }
.tv body { cursor: default; }
.tv :focus { outline: none; }

/* Posters and channel cards */
.tv .card:focus .poster, .tv .card:focus-visible .poster {
  transform: scale(1.08); box-shadow: 0 0 0 4px #fff, 0 18px 44px rgba(0, 0, 0, .7); }
.tv .card:focus .name { color: #fff; font-weight: 700; }
.tv .card:hover .poster { transform: none; box-shadow: none; }
.tv .row-scroller { scroll-padding-inline: var(--gutter); padding-block: 14px 10px; }
.tv .row-arrow { display: none; }
.tv .chan:focus { background: var(--surface-2); box-shadow: 0 0 0 3px #fff; }
.tv .chan:focus .chan-show { color: #fff; }

/* Buttons, chips, menu links: solid white when focused */
.tv .btn:focus, .tv .ver:focus, .tv .rate-btn:focus, .tv .scope:focus, .tv .recent:focus, .tv .search-pill:focus,
.tv .tool:focus, .tv .cats .cat:focus, .tv .settings-nav a:focus, .tv .link-btn:focus, .tv .card-more:focus {
  background: #fff; color: #120E1C; box-shadow: 0 0 0 3px #fff; border-color: #fff; }
.tv .btn:focus { transform: scale(1.05); }
.tv .btn, .tv .rate-btn { transition: transform .12s, background-color .12s; }
.tv .nav a:focus { color: #fff; }
.tv .nav a:focus::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 2px; background: #fff; }
.tv .card-menu button:focus { background: #fff; color: #120E1C; }
.tv input:focus, .tv select:focus { box-shadow: 0 0 0 3px #fff; }

/* Player: the controls' focus is white too, and bigger to aim at from the sofa */
.tv .pl-btn { width: 56px; height: 56px; }
.tv .pl-btn svg { width: 32px; height: 32px; }
.tv .pl-btn:focus, .tv .pl-text:focus { background: #fff; color: #120E1C; box-shadow: none; }
.tv .pl-menu button:focus { background: #fff; color: #120E1C; }
.tv .pl-menu button:focus small { color: #4A4258; }
.tv .player:focus { outline: none; }

/* Cheaper effects: no glass blur; the poster backdrop blurs less */
.tv .nav, .tv .btn.subtle, .tv .search-pill, .tv .row-arrow { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.tv .btn.subtle { background: rgba(234, 230, 242, .22); }
.tv .bb-art.from-poster::before { filter: blur(16px) saturate(1.2) brightness(.5); }

/* Layout that only makes sense with a mouse */
.tv .cats .cat .x { display: none; }
.tv .toolbar .input[type=search] { width: 280px; }

/* =====================================================================================
   Music: your own songs from the NAS.
   Square covers for albums and songs, round for artists. Song lists are quiet rows where the
   song playing is picked out in amber. The bar at the bottom stays while you browse; Now
   playing is a full screen led by the cover, with the queue beside it (or over it on a phone).
   Layers: bar 31 (under search and dialogs), Now playing 38 (under dialogs, so "Add to
   playlist" opens over it), video player 50.
   ===================================================================================== */
.music-page { padding-bottom: 40px; }
.music-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 18px; }
.music-head .page-title { margin: 0; }
.mtabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mtabs .scope { text-decoration: none; font-size: 14px; padding: 8px 16px; }
.mtabs .scope.on { background: var(--text); color: var(--bg); }
.music-hero { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.music-hero .btn svg, .mtools .btn svg, .mhead-actions .btn svg { width: 20px; height: 20px; }
.scan-note { margin: -6px 0 14px; }
.music-empty { display: grid; justify-items: center; gap: 14px; }
.music-page .row-section { margin-inline: calc(-1 * var(--gutter)); }
.mtools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
.mfilter { width: min(320px, 100%); }
.mlist-sec { margin-top: 28px; }
.mlist-sec h2 { margin: 0 0 10px; }

/* Cards */
.mgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; }
.row-scroller.music > * { width: clamp(140px, 13vw, 180px); }
.mcard .poster.sq { aspect-ratio: 1; display: grid; place-items: center; color: var(--muted); }
.mcard .poster.round { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--muted); font-weight: 800; font-size: 28px; }
.mcard .poster svg { width: 42%; height: 42%; opacity: .55; }
.mcard.artist { text-align: center; }
.mcard.artist .name, .mcard.artist .meta { justify-content: center; }
.mcard .name { min-height: 0; -webkit-line-clamp: 2; }

/* Album / artist / playlist header */
.mhead { display: flex; align-items: flex-end; gap: 28px; margin-bottom: 26px; }
.mhead-art { flex: none; width: clamp(150px, 22vw, 240px); aspect-ratio: 1; border-radius: 8px; background: var(--surface) center / cover; box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  display: grid; place-items: center; color: var(--muted); }
.mhead-art.round { border-radius: 50%; }
.mhead-art svg { width: 40%; height: 40%; opacity: .5; }
.mhead-text { min-width: 0; }
.mhead-kicker { display: block; color: var(--muted); font-weight: 600; font-size: 14px; }
.mhead-title { font-size: clamp(28px, 4.2vw, 56px); line-height: 1.05; margin: 4px 0 10px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.mhead-sub { color: #CFC8DE; margin: 0 0 16px; }
.mhead-sub a { color: var(--text); font-weight: 600; }
.mhead-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.danger-text { color: #FF6B70; }

/* Song rows */
.tracks { display: flex; flex-direction: column; }
.trk { position: relative; display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.trk:hover { background: var(--surface); }
.trk-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 8px 10px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; border-radius: 8px; }
.trk-n { width: 28px; flex: none; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; }
.trk-art { flex: none; width: 44px; height: 44px; border-radius: 4px; background: var(--surface-2) center / cover; }
.trk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trk-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk-sub { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk-dur { flex: none; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.trk-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.trk-btn svg { width: 20px; height: 20px; }
.trk-btn:hover { color: var(--text); background: var(--surface-2); }
.trk-like[aria-pressed="true"] { color: var(--accent); }
.trk.playing .trk-title { color: var(--accent); }
/* The song playing: three little bars where its number was */
.trk.playing .trk-n { font-size: 0; height: 14px;
  background: linear-gradient(var(--accent), var(--accent)) right bottom / 3px 70% no-repeat,
    linear-gradient(var(--accent), var(--accent)) calc(100% - 5px) bottom / 3px 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) calc(100% - 10px) bottom / 3px 45% no-repeat; }
.trk-more-wrap { position: relative; }
.trk .card-menu { top: calc(100% + 4px); left: auto; right: 0; width: 240px; }
.card-menu .menu-link { display: block; padding: 10px 12px; border-radius: 6px; color: var(--text); font-size: 14px; }
.card-menu .menu-link:hover, .card-menu .menu-link:focus-visible { background: var(--surface); }

/* ---------- the bar at the bottom ---------- */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 16px; padding: 0 var(--gutter) env(safe-area-inset-bottom); background: #17122A; box-shadow: 0 -1px 0 rgba(234, 230, 242, .08), 0 -12px 30px rgba(0, 0, 0, .35); }
.mbar[hidden] { display: none; }
.mbar-prog { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(234, 230, 242, .12); }
.mbar-prog i { display: block; height: 100%; width: 0; background: var(--accent); }
.mbar-song { display: flex; align-items: center; gap: 12px; min-width: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; padding: 6px; border-radius: 8px; }
.mbar-art { flex: none; width: 48px; height: 48px; border-radius: 6px; background: var(--surface-2) center / cover; }
.mbar-text { min-width: 0; display: flex; flex-direction: column; }
.mbar-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar-artist { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar-ctl { display: flex; align-items: center; gap: 6px; }
.mbar-vol { justify-self: end; width: 120px; accent-color: var(--accent); }
.mbtn { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; position: relative; }
.mbtn svg { width: 24px; height: 24px; }
.mbtn:hover { background: rgba(234, 230, 242, .1); }
.mbtn:focus-visible, .mbar-song:focus-visible { box-shadow: var(--focus); }
.mbtn.big { width: 48px; height: 48px; background: var(--text); color: var(--bg); }
.mbtn.big:hover { background: #fff; }
.mbtn[aria-pressed="true"] { color: var(--accent); }
.mbtn.sm { width: 34px; height: 34px; }
.mbtn.sm svg { width: 18px; height: 18px; }
.mbtn:disabled { opacity: .3; cursor: default; }
body.has-mbar main { padding-bottom: 96px; }
body.has-mbar .toasts { bottom: 88px; }

/* ---------- Now playing ---------- */
.mnow { position: fixed; inset: 0; z-index: 38; background: #0F0C16; color: #fff; display: flex; flex-direction: column; overflow: hidden; }
.mnow[hidden] { display: none; }
.mnow-bg { position: absolute; inset: -60px; background: center / cover; filter: blur(60px) saturate(1.3) brightness(.38); transform: scale(1.1); z-index: 0; }
.mnow > :not(.mnow-bg) { position: relative; z-index: 1; }
.mnow-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--gutter); }
.mnow-from { color: #D7D1E4; font-size: 14px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnow-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 0 var(--gutter) 28px; }
.mnow.q-open .mnow-body { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); }
.mnow-main { min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; }
.mnow-art { width: min(46vh, 520px, 80vw); aspect-ratio: 1; border-radius: 10px; background: rgba(255, 255, 255, .06) center / cover; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.mnow-meta { width: min(46vh, 520px, 80vw); display: flex; align-items: center; gap: 6px; }
.mnow-meta > div { flex: 1; min-width: 0; }
.mnow-title { margin: 0; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnow-artist { color: #D7D1E4; font-weight: 600; }
.mnow-artist:hover { color: #fff; }
.mnow-seek { width: min(46vh, 520px, 80vw); accent-color: var(--accent); }
.mnow-times { width: min(46vh, 520px, 80vw); display: flex; justify-content: space-between; color: #CFC8DE; font-size: 13px; font-variant-numeric: tabular-nums; margin-top: -8px; }
.mnow-ctl { display: flex; align-items: center; gap: 18px; }
.mnow-ctl .mbtn svg { width: 28px; height: 28px; }
.mbtn.huge { width: 68px; height: 68px; background: #fff; color: #120E1C; }
.mbtn.huge svg { width: 34px; height: 34px; }
.mbtn.huge:hover { background: #fff; transform: scale(1.04); }
.rep1 { position: absolute; right: 6px; bottom: 6px; font-size: 10px; font-weight: 800; }
.mnow-queue { display: none; min-height: 0; flex-direction: column; background: rgba(15, 12, 22, .55); border-radius: 12px; padding: 14px 10px; }
.mnow.q-open .mnow-queue { display: flex; }
.mnow-queue header { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 8px; }
.mnow-queue h3 { margin: 0; font-size: 16px; }
.mq-list { overflow-y: auto; min-height: 0; }
.mq-row { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.mq-row.playing { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mq-row.playing .trk-title { color: var(--accent); }
.mq-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; border-radius: 8px; }
.mq-main .trk-art { width: 40px; height: 40px; }
.mq-main .trk-sub { color: #BDB5CE; }
.mq-now { color: var(--accent); font-size: 12px; font-weight: 700; padding-right: 10px; }
.mnow .link-btn { color: #D7D1E4; }
body.mnow-on { overflow: hidden; }

/* Phones: the bar sits on the tab bar; Now playing stacks, and the queue covers the cover. */
@media (max-width: 640px) {
  .mbar { bottom: calc(58px + env(safe-area-inset-bottom)); height: 64px; grid-template-columns: minmax(0, 1fr) auto; padding: 0 8px; gap: 4px; }
  .mbar .wide-only { display: none; }
  .mbar-art { width: 44px; height: 44px; }
  .mbtn.big { width: 44px; height: 44px; }
  body.has-mbar main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.has-mbar .toasts { bottom: calc(132px + env(safe-area-inset-bottom)); }
  .mhead { flex-direction: column; align-items: flex-start; gap: 16px; }
  .mhead-art { width: 60vw; align-self: center; }
  .mnow-art { width: min(80vw, 46vh); }
  .mnow-ctl { gap: 8px; }
  .trk-n { display: none; }
  .trk-main { gap: 10px; padding: 8px 4px; }
  .mgrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (min-width: 641px) and (max-width: 900px) { .mbar .mbar-vol { display: none; } .mbar { grid-template-columns: minmax(0, 1fr) auto; } }
@media (prefers-reduced-motion: reduce) { .mbtn.huge:hover { transform: none; } }

/* TV: no heavy blur; focus is white like everywhere else on TV */
.tv .mnow-bg { filter: brightness(.3) saturate(1.2); }
.tv .mbtn:focus, .tv .mbar-song:focus, .tv .trk-main:focus, .tv .trk-btn:focus, .tv .mq-main:focus, .tv .mtabs .scope:focus {
  background: #fff; color: #120E1C; box-shadow: 0 0 0 3px #fff; }
.tv .trk-main:focus .trk-sub, .tv .trk-main:focus .trk-dur, .tv .trk-main:focus .trk-n, .tv .mq-main:focus .trk-sub { color: #4A4258; }

/* Up to 1000px wide the queue takes the place of the cover rather than squeezing in beside it */
@media (max-width: 999px) {
  .mnow-body, .mnow.q-open .mnow-body { grid-template-columns: minmax(0, 1fr); }
  .mnow.q-open .mnow-main { display: none; }
  .mnow-queue { max-width: 640px; width: 100%; justify-self: center; }
}

/* ---------- smart playlists ---------- */
.smart-tag { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(15, 12, 22, .85); color: var(--accent); font-size: 11px; font-weight: 700; }
.mcard .poster.pl { position: relative; }
.smart-rules { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; max-width: 60ch; }
.smart-starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.smart-start { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.smart-start b { font-size: 15px; }
.smart-start span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.smart-start:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.smart-start:focus-visible { box-shadow: var(--focus); }
.tv .smart-start:focus { background: #fff; color: #120E1C; box-shadow: 0 0 0 3px #fff; }
.tv .smart-start:focus span { color: #4A4258; }
.smart-editor { width: min(720px, 100%); }
.smart-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; margin: 8px 0 14px; }
.smart-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 10px; }
.smart-line select { width: auto; }
.smart-rule { display: grid; grid-template-columns: 150px 170px minmax(0, 1fr) 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.smart-val { display: flex; align-items: center; gap: 8px; min-width: 0; }
.smart-val .input { min-width: 0; flex: 1; }
.smart-count { margin: 14px 0 0; font-weight: 700; color: var(--accent); }
@media (max-width: 640px) {
  .smart-rule { grid-template-columns: 1fr 1fr 34px; }
  .smart-rule .smart-val, .smart-rule > span:empty { grid-column: 1 / 3; }
}

/* ---------- colours from the cover (set as --c-* by tintWith in app.js) ----------
   The bar, Now playing and album/artist/playlist pages take the cover's colours: a deep wash
   behind, the bright accent on Play, the seek bar and anything switched on. Without colour
   (no cover, or a grey one) everything falls back to the app's own colours. Colours fade over
   half a second when the song changes. */
.mbar, .mnow, .music-page { --c-accent-x: var(--c-accent, var(--accent)); --c-on-x: var(--c-on, var(--accent-ink, #1E1405)); }
.mbar { transition: background-color .5s ease; }
.mbar.tinted { background: color-mix(in srgb, var(--c-deep) 82%, #0F0C16); }
.mbar-prog i { background: var(--c-accent-x); }
.mbar .mbtn.big { background: var(--c-accent-x); color: var(--c-on-x); }
.mbar .mbtn.big:hover { filter: brightness(1.08); }
.mbar-vol { accent-color: var(--c-accent-x); }
.mbtn[aria-pressed="true"] { color: var(--c-accent-x); }
.mnow { transition: background-color .5s ease; }
.mnow.tinted { background: linear-gradient(180deg, var(--c-wash) 0%, var(--c-deep) 62%, #0F0C16 100%); }
.mnow.tinted .mnow-bg { opacity: .35; }
.mbtn.huge { background: var(--c-accent-x); color: var(--c-on-x); }
.mbtn.huge:hover { background: var(--c-accent-x); filter: brightness(1.08); }
.mnow-seek { accent-color: var(--c-accent-x); }
.mq-row.playing { background: color-mix(in srgb, var(--c-accent-x) 18%, transparent); }
.mq-row.playing .trk-title, .mq-now { color: var(--c-accent-x); }
.trk.playing .trk-title { color: var(--np-accent, var(--accent)); }
.trk.playing .trk-n { background: linear-gradient(var(--np-accent, var(--accent)), var(--np-accent, var(--accent))) right bottom / 3px 70% no-repeat,
  linear-gradient(var(--np-accent, var(--accent)), var(--np-accent, var(--accent))) calc(100% - 5px) bottom / 3px 100% no-repeat,
  linear-gradient(var(--np-accent, var(--accent)), var(--np-accent, var(--accent))) calc(100% - 10px) bottom / 3px 45% no-repeat; }
/* Pages: a wash of the cover's colour behind the header, fading into the page */
.music-page { position: relative; isolation: isolate; }
.music-page.tinted::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: calc(-1 * (var(--nav-h) + 20px)); height: 560px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-wash) 90%, transparent) 0%, color-mix(in srgb, var(--c-deep) 60%, transparent) 55%, transparent 100%); }
.music-page.tinted .mhead-actions .btn:not(.subtle) { background: var(--c-accent); color: var(--c-on); }
.music-page.tinted .mhead-kicker { color: color-mix(in srgb, var(--c-accent) 70%, #fff); }
@media (prefers-reduced-motion: reduce) { .mbar, .mnow { transition: none; } }

/* ---------- song rows: the number turns into play on hover / focus ---------- */
.trk:not(.playing) .trk-main:is(:hover, :focus-visible) .trk-n { color: transparent; position: relative; }
.trk:not(.playing) .trk-main:is(:hover, :focus-visible) .trk-n::after { content: ""; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border-left: 11px solid var(--text); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

/* ---------- Music home: Shuffle all in the header, Quick picks grid ---------- */
.music-shuffle { margin-left: auto; }
.music-shuffle svg { width: 18px; height: 18px; }
.qp-sec { margin: 6px 0 18px; }
.qp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.qp-head h2 { margin: 0; }
.qp-head .btn svg { width: 16px; height: 16px; }
.qpicks .tracks { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: minmax(300px, 1fr); gap: 2px 18px; overflow-x: auto; scrollbar-width: none; }
.qpicks .tracks::-webkit-scrollbar { display: none; }
.qpicks .trk-n, .qpicks .trk-dur, .qpicks .trk-like { display: none; }
.qpicks .trk-art { width: 48px; height: 48px; }
@media (max-width: 640px) {
  .qpicks .tracks { grid-auto-columns: 86%; }
  .music-shuffle { margin-left: 0; }
}

/* ---------- the Music item in the menu: a song is loaded (dot) or playing (moving bars) ---------- */
.nav a[data-nav="music"] { position: relative; }
.nav a.m-loaded { padding-right: 12px; }
.nav a.m-loaded::before { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--np-accent, var(--accent)); }
.nav a.m-playing::before { width: 3px; height: 10px; margin-top: -5px; border-radius: 1px; box-shadow: 4px 2px 0 var(--np-accent, var(--accent)), -4px 3px 0 var(--np-accent, var(--accent));
  animation: m-eq 1s ease-in-out infinite alternate; }
@keyframes m-eq { from { transform: scaleY(.5); } to { transform: scaleY(1.1); } }
@media (prefers-reduced-motion: reduce) { .nav a.m-playing::before { animation: none; } }
@media (max-width: 640px) {
  .nav a.m-loaded::before { right: auto; left: calc(50% + 12px); top: 9px; margin-top: 0; }
}

/* ---------- TV: the player is a chip in the top bar ---------- */
.mbar.mbar-chip { position: static; height: 46px; padding: 0 4px 0 6px; display: flex; align-items: center; gap: 4px; border-radius: 999px; box-shadow: none;
  max-width: 380px; background: rgba(234, 230, 242, .1); overflow: hidden; position: relative; }
.mbar.mbar-chip.tinted { background: color-mix(in srgb, var(--c-deep) 70%, rgba(234, 230, 242, .1)); }
.mbar-chip .mbar-prog { top: auto; bottom: 0; height: 2px; left: 18px; right: 18px; }
.mbar-chip .mbar-song { padding: 3px 8px 3px 3px; border-radius: 999px; min-width: 0; }
.mbar-chip .mbar-art { width: 34px; height: 34px; border-radius: 50%; }
.mbar-chip .mbar-title { font-size: 13px; }
.mbar-chip .mbar-artist { font-size: 11.5px; }
.mbar-chip .wide-only, .mbar-chip .mbar-vol { display: none; }
.mbar-chip .mbtn { width: 38px; height: 38px; }
.mbar-chip .mbtn.big { width: 38px; height: 38px; }
.mbar-chip .mbtn svg { width: 20px; height: 20px; }
.tv .mbar-chip .mbtn:focus, .tv .mbar-chip .mbar-song:focus { background: #fff; color: #120E1C; }
.mbar.mbar-chip[hidden] { display: none; }

/* ---------- Up next: Autoplay heading with its on/off switch ---------- */
.mq-auto-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 8px 6px; padding-top: 12px; border-top: 1px solid rgba(234, 230, 242, .14); }
.mq-auto-head b { display: block; font-size: 15px; }
.mq-auto-head span { display: block; color: #BDB5CE; font-size: 12.5px; margin-top: 2px; }
.mq-row.auto .trk-title { font-weight: 500; }
.switch-btn { flex: none; position: relative; width: 46px; height: 26px; border: 0; border-radius: 999px; background: rgba(234, 230, 242, .25); cursor: pointer; transition: background-color .15s; }
.switch-btn i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch-btn[aria-checked="true"] { background: var(--c-accent-x, var(--accent)); }
.switch-btn[aria-checked="true"] i { transform: translateX(20px); background: var(--c-on-x, #fff); }
.switch-btn:focus-visible { box-shadow: var(--focus); }
.tv .switch-btn:focus { box-shadow: 0 0 0 3px #fff; }
@media (prefers-reduced-motion: reduce) { .switch-btn, .switch-btn i { transition: none; } }

/* ---------- lyrics in Now playing; artist bio; Navidrome notes ---------- */
.mnow-tools { display: flex; gap: 4px; }
.mnow-lyrics { display: none; min-height: 0; overflow-y: auto; padding: 8px 18px 40vh; scrollbar-width: none; }
.mnow-lyrics::-webkit-scrollbar { display: none; }
.mnow.l-open .mnow-lyrics { display: block; }
.mnow.l-open .mnow-body { grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); }
.ly-lines p { margin: 0 0 14px; font-size: clamp(20px, 2vw, 28px); font-weight: 700; line-height: 1.3; color: rgba(255, 255, 255, .38); cursor: pointer; transition: color .25s; }
.ly-lines p.on { color: #fff; }
.ly-lines p:hover { color: rgba(255, 255, 255, .7); }
.ly-plain { white-space: pre-wrap; font-size: 18px; line-height: 1.6; color: #EDEAF4; }
.ly-none { color: #CFC8DE; margin-top: 30vh; text-align: center; }
@media (max-width: 999px) {
  .mnow.l-open .mnow-body { grid-template-columns: minmax(0, 1fr); }
  .mnow.l-open .mnow-main { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ly-lines p { transition: none; } }
.artist-bio { max-width: 72ch; margin: -10px 0 22px; color: #D7D1E4; }
.artist-bio p { margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; }
.artist-bio.open p { -webkit-line-clamp: unset; display: block; }
.ro-note { align-self: center; }

/* ---------- Settings: Artist Auto-downloads ---------- */
.ad { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.ad-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ad-top p { margin: 0; max-width: 60ch; }
.ad-artists { display: flex; flex-direction: column; gap: 8px; }
.ad-artist { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px; background: var(--surface-2); }
.ad-artist.off { opacity: .65; }
.ad-pic { flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--surface) center / cover; display: grid; place-items: center; font-weight: 800; color: var(--muted); }
.ad-pic.sm { width: 28px; height: 28px; font-size: 11px; }
.ad-artist-text, .ad-job-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.ad-artist-text b, .ad-job-text b { font-size: 15px; }
.ad-artist-text span, .ad-job-text span { color: #CFC8DE; }
.ad-err { color: #FF8A8E !important; }
.ad-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ad-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ad-tabs .scope { font-size: 13.5px; padding: 7px 14px; }
.ad-tabs .scope.on { background: var(--text); color: var(--bg); }
.ad-list { display: flex; flex-direction: column; gap: 4px; max-height: 520px; overflow-y: auto; }
.ad-job { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; }
.ad-job:hover { background: var(--surface-2); }
.ad-cover { flex: none; width: 44px; height: 44px; border-radius: 6px; background: var(--surface-2) center / cover; }
.ad-job.review .ad-line { color: var(--accent); }
.ad-job.failed .ad-line { color: #FF8A8E; }
.ad-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-editor { width: min(680px, 100%); }
.ad-field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; font-weight: 600; border: 0; padding: 0; }
.ad-field legend { font-weight: 600; margin-bottom: 6px; }
.ad-field small { font-weight: 400; }
.ad-field .check { font-weight: 500; flex-wrap: wrap; }
.ad-field .check small { display: block; width: 100%; padding-left: 26px; }
.ad-results { display: flex; flex-direction: column; gap: 4px; }
.ad-results .pick { display: flex; align-items: center; gap: 10px; }
.ad-profile { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.ad-releases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; margin: 4px 0 10px; }
.ad-rel { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; background: var(--surface-2); cursor: pointer; font-size: 13.5px; }
.ad-rel small { display: block; color: var(--muted); }
.ad-note { margin: 4px 0 10px; }
@media (max-width: 640px) {
  .ad-artist { flex-wrap: wrap; }
  .ad-artist .ad-acts { width: 100%; justify-content: flex-start; }
}
.tv .ad-rel:focus-within { box-shadow: 0 0 0 3px #fff; }

/* ---------- Haven logo in the top bar and on the login screen ----------
   The lockup (mark + "Haven") for dark backgrounds, and its light version for the light theme. */
.brand { display: flex; align-items: center; }
.brand img { height: 30px; width: auto; }
.brand .brand-light, .login-logo .brand-light { display: none; }
:root[data-theme="light"] .brand .brand-dark, :root[data-theme="light"] .login-logo .brand-dark { display: none; }
:root[data-theme="light"] .brand .brand-light, :root[data-theme="light"] .login-logo .brand-light { display: block; }
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .brand .brand-dark, :root[data-theme="system"] .login-logo .brand-dark { display: none; }
  :root[data-theme="system"] .brand .brand-light, :root[data-theme="system"] .login-logo .brand-light { display: block; }
}
.login-logo.haven { display: flex; justify-content: center; margin-bottom: 10px; }
.login-logo.haven img { height: 64px; width: auto; }
@media (max-width: 900px) { .brand img { height: 26px; } }
/* Over a billboard's artwork the bar is see-through on dark pictures: keep the white-text logo
   there in every theme. */
:root[data-theme] body.has-hero:not(.scrolled) .brand .brand-dark { display: block; }
:root[data-theme] body.has-hero:not(.scrolled) .brand .brand-light { display: none; }

/* On phones the dot sits on the Music icon, so the tab needs no extra room. */
@media (max-width: 640px) { .nav a.m-loaded { padding-right: 0; } }

/* ---------- Splash: shown as Haven opens ----------
   One moment: the outer arch rises from the floor, then the doorway with its play shape, then
   "Haven" fades up below; it ends on the logo kit's splash frame and fades out when the app is
   ready (app.js removes it). With reduced motion it simply appears. */
.splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: #0F0C16; transition: opacity .4s ease, visibility .4s; }
.splash.gone { opacity: 0; visibility: hidden; }
.sp-mark { width: clamp(96px, 10vw, 150px); height: auto; overflow: visible; }
.sp-word { width: clamp(120px, 12.5vw, 188px); height: auto; }
.sp-outer, .sp-inner { transform-box: fill-box; transform-origin: 50% 100%; }
.sp-outer { animation: sp-rise .55s cubic-bezier(.2, .8, .2, 1) both; }
.sp-inner { animation: sp-rise .5s cubic-bezier(.2, .8, .2, 1) .22s both; }
.sp-word { animation: sp-word .45s ease-out .55s both; }
@keyframes sp-rise { from { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } to { transform: scaleY(1); opacity: 1; } }
@keyframes sp-word { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sp-outer, .sp-inner, .sp-word { animation: none; }
  .splash { transition: opacity .2s; }
}

/* ---------- profiles: "Who's watching?", the editor, the top-bar avatar ---------- */
.pf-btn, .pf-menu button, .pf-tile, .pin-key, .pf-swatch, .pf-icon { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
/* A profile picture: the person's colour with a glyph in dark ink (readable on every swatch). */
.pf-av { --s: 32px; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s);
  border-radius: calc(var(--s) * .16); background: var(--pf); color: rgba(20, 12, 28, .82); }
.pf-av svg { width: 62%; height: 62%; }
.pf-av svg .fill { fill: currentColor; stroke: none; }
.pf-av.xs { --s: 22px; } .pf-av.sm { --s: 30px; } .pf-av.lg { --s: 96px; } .pf-av.xl { --s: clamp(96px, 11vw, 140px); }
.pf-av.xs svg { stroke-width: 2.4; }

.pf-anchor { position: relative; display: inline-flex; }
.pf-btn { display: grid; place-items: center; padding: 3px; border-radius: 8px; }
.pf-btn:hover .pf-av { filter: brightness(1.08); }
.pf-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 210px; padding: 6px;
  background: var(--surface); border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0, 0, 0, .4); }
.pf-menu-who { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pf-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 6px; text-align: left; color: var(--text); font-size: 14px; }
.pf-menu button:hover, .pf-menu button:focus-visible { background: var(--surface-2); }

html.pf-open { overflow: hidden; }
.pf-screen { position: fixed; inset: 0; z-index: 90; overflow-y: auto; background: var(--bg);
  display: grid; place-items: center; padding: 48px var(--gutter); }
.pf-wrap { width: min(980px, 100%); display: grid; justify-items: center; gap: 28px; text-align: center; }
.pf-title { margin: 0; font-weight: 600; font-size: clamp(28px, 4.2vw, 46px); letter-spacing: -.01em; }
.pf-title.small { font-size: clamp(22px, 3vw, 30px); }
.pf-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 2.6vw, 32px); }
.pf-tile { position: relative; display: grid; justify-items: center; gap: 12px; padding: 6px; border-radius: 14px; color: var(--muted); }
.pf-tile .pf-av { transition: transform .15s ease, box-shadow .15s ease; }
.pf-tile:hover, .pf-tile:focus-visible { color: var(--text); box-shadow: none; }
.pf-tile:hover .pf-av, .pf-tile:focus-visible .pf-av { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--text); }
.pf-name { font-size: clamp(14px, 1.4vw, 17px); max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-add { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); }
.pf-add svg { width: 40%; height: 40%; }
.pf-lock { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; padding: 3px; border-radius: 50%;
  background: rgba(15, 12, 22, .7); color: #fff; }
.pf-lock svg { width: 100%; height: 100%; }
.pf-tile.editing .pf-av { filter: brightness(.55); }
.pf-pencil { position: absolute; top: 6px; left: 50%; translate: -50% 0; width: clamp(96px, 11vw, 140px); aspect-ratio: 1;
  display: grid; place-items: center; color: #fff; pointer-events: none; }
.pf-pencil svg { width: 30%; height: 30%; }
.pf-foot { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* PIN: four dots and a pad big enough for a thumb or a remote */
.pf-pin { gap: 18px; }
.pin-dots { display: flex; gap: 14px; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--muted); }
.pin-dots i.on { background: var(--text); box-shadow: none; }
.pin-dots.shake { animation: pin-shake .35s ease; }
@keyframes pin-shake { 25% { translate: -8px 0; } 50% { translate: 8px 0; } 75% { translate: -4px 0; } }
.pin-err { min-height: 1.5em; margin: 0; color: var(--live); font-size: 14px; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; }
.pin-key { height: 56px; border-radius: 10px; background: var(--surface); color: var(--text); font-size: 22px; font-weight: 600; }
.pin-key.ghost { background: transparent; font-size: 14px; font-weight: 500; color: var(--muted); }
.pin-key svg { width: 26px; height: 26px; }
.pin-key:hover { background: var(--surface-2); }

/* Editor: the picture on the left, the details on the right (stacked on a phone) */
.pf-edit { justify-items: stretch; text-align: left; max-width: 820px; }
.pf-edit .pf-title { text-align: center; }
.pf-edit-grid { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: start; }
.pf-preview { position: sticky; top: 0; }
.pf-fields { display: grid; gap: 16px; min-width: 0; }
.pf-field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pf-field > span, .pf-field > legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 6px; }
.pf-field .input { width: 100%; }
.pf-field small { font-size: 12.5px; }
.pf-swatches, .pf-icons { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-swatch { width: 34px; height: 34px; border-radius: 50%; background: var(--pf); }
.pf-swatch.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.pf-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--muted); }
.pf-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pf-icon svg .fill { fill: currentColor; stroke: none; }
.pf-icon.on { color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
.pf-sub { margin: 10px 0 0; font-size: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pf-note { margin: -8px 0 0; font-size: 13px; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pf-actions .spacer { flex: 1; }
@media (max-width: 700px) {
  .pf-screen { place-items: start center; padding-top: 32px; }
  .pf-edit-grid { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .pf-preview { position: static; }
  .pf-fields { width: 100%; }
  .pf-av.xl { --s: 92px; }
  .pf-pencil { width: 92px; }
}
/* TV: the remote's focus is a white frame and a slight lift, like the posters */
html.tv .pf-tile:focus .pf-av { transform: scale(1.06); box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px #fff; }
html.tv .pin-key:focus, html.tv .pf-swatch:focus, html.tv .pf-icon:focus { box-shadow: 0 0 0 3px #fff; }

/* Who's watching a stream (Now playing) and connections in use */
.now-who { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; }
.now-who .pf-av + .pf-av { margin-left: -10px; box-shadow: 0 0 0 2px var(--surface); }
.now-who span:last-child { margin-left: 4px; }
.now-slots { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.pips { display: inline-flex; gap: 4px; }
.pips i { width: 18px; height: 8px; border-radius: 4px; background: var(--surface-2); }
.pips i.w { background: var(--accent); }
.pips i.d { background: var(--muted); }

/* Player: every watch slot is busy */
.full-box p { margin: 6px 0 14px; font-size: 14px; }
.full-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; text-align: left; }
.full-row { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.full-what { display: grid; gap: 4px; min-width: 0; }
.full-what b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.full-who { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; }
.full-act { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-msg .full-act .btn { margin: 0; }

/* ---------- favourite channels: the star ---------- */
.star-btn { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.star-btn svg { width: 20px; height: 20px; }
.star-btn:hover { color: var(--text); }
.star-btn.on { color: var(--accent); }
.chan { position: relative; }
.chan > .star-btn { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; }
.chan > .star-btn svg { width: 17px; height: 17px; }
.chan > .star-btn:not(.on) { opacity: 0; }
.chan:hover > .star-btn, .chan:focus-visible > .star-btn, .chan > .star-btn:focus-visible { opacity: 1; }
@media (hover: none) { .chan > .star-btn:not(.on) { opacity: .7; } }
.chan .chan-name { padding-right: 26px; }
.pl-btn.star-btn.on { color: var(--accent); }
.cats .cat svg { width: 14px; height: 14px; color: var(--accent); vertical-align: -2px; margin-right: 6px; }
.cats .cat .n { margin-left: auto; color: var(--muted); font-size: 12px; }

/* ---------- Live TV: Channels / TV Guide ---------- */
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--surface); flex: none; }
.seg a { padding: 7px 16px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; }
.seg a:hover { color: var(--text); }
.seg a[aria-current="page"] { background: var(--text); color: var(--bg); }

/* Programme kinds: one colour each, on the blocks' edge and on the filter chips */
.k-sports { --k: #30A46C; } .k-cricket { --k: #9BC53D; } .k-news { --k: #3E8BF7; } .k-movies { --k: #F76B15; } .k-kids { --k: #D6409F; }
.k-docs { --k: #12A594; } .k-music { --k: #8E4EC6; } .k-paid { --k: #6B6380; } .k-shows { --k: #B4ACC8; }

.guide { padding-top: 4px; }
.g-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.g-head .page-title { margin: 0; }
.g-search { flex: 1 1 260px; max-width: 420px; margin-left: auto; }
.g-filters { display: grid; gap: 10px; margin: 18px 0 8px; }
.g-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.g-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
.g-scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 0; flex: none; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--surface);
  color: var(--muted); font: 600 13.5px/1.2 var(--ui); cursor: pointer; white-space: nowrap; }
.chip:hover { color: var(--text); }
.chip.on { background: var(--text); color: var(--bg); }
.chip .n { margin-left: 5px; font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.chip svg:not(.kdot) { width: 14px; height: 14px; margin-right: 6px; color: var(--accent); }
.kdot { flex: none; width: 9px; height: 9px; margin-right: 7px; color: var(--k); }
.g-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.g-select select { padding: 6px 10px; font-size: 13.5px; border-radius: 999px; }
.g-status { margin: 4px 0 12px; color: var(--muted); font-size: 13px; min-height: 1.4em; }

/* The grid: its own scroll box, so the times stay on top and the channels on the left */
.g-grid { --ch-w: 220px; }
.g-scrollbox { position: relative; overflow: auto; max-height: calc(100dvh - var(--nav-h) - 24px); overscroll-behavior: contain;
  border-top: 1px solid var(--line); }
.g-inner { position: relative; width: max-content; }
.g-ruler { position: sticky; top: 0; z-index: 3; display: flex; height: 36px; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.g-corner { position: sticky; left: 0; z-index: 4; width: var(--ch-w); flex: none; background: var(--bg); }
.g-ticks { position: relative; width: var(--track); flex: none; }
.g-ticks span { position: absolute; top: 0; bottom: 0; padding: 9px 0 0 7px; border-left: 1px solid var(--line); color: var(--text); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.g-ticks span.half { color: var(--muted); font-weight: 400; }
.g-row { display: flex; height: 68px; border-bottom: 1px solid var(--line); }
.g-ch { position: sticky; left: 0; z-index: 2; width: var(--ch-w); flex: none; display: flex; align-items: center; gap: 2px; padding: 0 6px 0 0;
  background: var(--bg); box-shadow: 1px 0 0 var(--line); }
.g-chan { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; cursor: pointer; }
.g-chan:hover { background: var(--surface); }
.g-logo { position: relative; flex: none; width: 66px; aspect-ratio: 16 / 9; border-radius: 6px; background: #ECE9F2; overflow: hidden; display: grid; place-items: center; }
.g-logo img { width: 82%; height: 78%; object-fit: contain; }
.g-logo .mark { display: none; padding: 0 4px; color: #E9E5F2; font-weight: 800; font-size: 10px; line-height: 1.1; text-align: center; overflow: hidden; }
.g-logo.nologo { background: linear-gradient(160deg, #2C2540, #1E1830); }
.g-logo.nologo img { display: none; }
.g-logo.nologo .mark { display: block; }
.g-name { font-weight: 600; font-size: 13.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g-track { position: relative; width: var(--track); flex: none; }
.g-prog { position: absolute; top: 6px; bottom: 6px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 10px 6px 13px;
  border: 0; border-radius: 6px; background: var(--surface); color: var(--text); text-align: left; overflow: hidden; cursor: pointer;
  box-shadow: inset 3px 0 0 var(--k, #B4ACC8); }
.g-prog b { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-prog span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; }
.g-prog.airing { background: var(--surface-2); }
.g-prog.past { opacity: .42; }
.g-prog:hover { background: #2E2546; }
.g-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); }
/* Searching or picking kinds: what matches stays bright, the rest steps back */
.g-grid.filtering .g-prog:not(.hit) { opacity: .32; }
.g-grid.filtering .g-prog.hit { box-shadow: inset 3px 0 0 var(--k), inset 0 0 0 1px color-mix(in srgb, var(--k) 55%, transparent); }
.g-now { position: absolute; top: 0; bottom: 0; z-index: 1; width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.g-now::before { content: ''; position: absolute; top: 30px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.g-none { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.g-more { display: grid; place-items: center; min-height: 20px; padding: 10px; position: sticky; left: 0; width: min(100%, 100vw); }
.g-empty { display: grid; justify-items: start; gap: 14px; padding: 40px 0; color: var(--muted); max-width: 60ch; }

.g-detail { width: min(580px, 100%); }
.g-detail h1 { margin: 10px 0 4px; font-size: 24px; line-height: 1.2; }
.g-detail-head .muted { margin: 0; }
.kind-tag { display: inline-flex; align-items: center; gap: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.g-desc { margin: 16px 0 0; line-height: 1.6; max-width: 65ch; }

@media (max-width: 700px) {
  .g-grid { --ch-w: 78px; }
  .g-name { display: none; }
  .g-chan { padding: 6px 4px; }
  .g-ch { flex-direction: column; justify-content: center; gap: 0; padding: 0; }
  .g-ch .star-btn { width: 26px; height: 22px; }
  .g-ch .star-btn svg { width: 15px; height: 15px; }
  .g-row { height: 76px; }
  .g-search { max-width: none; margin-left: 0; flex-basis: 100%; }

}
/* TV: white focus, like the rest of the app */
.tv .chip:focus, .tv .seg a:focus, .tv .g-chan:focus, .tv .star-btn:focus { background: #fff; color: #120E1C; box-shadow: 0 0 0 3px #fff; }
.tv .g-prog:focus { background: #fff; color: #120E1C; opacity: 1; }
.tv .g-prog:focus span { color: #4A4260; }
.tv .g-row { height: 76px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.g-select { flex: none; }

/* The Haven lockup drawn inline: the mark in the accent (the profile colour), the word in the text colour */
.brand-svg { display: block; height: 30px; width: auto; --brand-word: var(--text); }
.login-logo.haven .brand-svg { height: 64px; }
@media (max-width: 900px) { .brand-svg { height: 26px; } }
:root[data-theme] body.has-hero:not(.scrolled) .brand .brand-svg { --brand-word: #fff; }
.sp-mark path { fill: var(--accent); }
.pf-test { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Inside the TV app the window is already full screen */
.haven-app #pl-fs { display: none; }

/* ---------- on-screen keyboard (TV) ---------- */
.tv-kb { padding: 14px var(--gutter) 4px; }
.kb { display: grid; gap: 8px; width: max-content; max-width: 100%; }
.kb-row { display: grid; grid-template-columns: repeat(13, 52px); gap: 8px; }
.kb-actions { grid-template-columns: repeat(3, 172px); }
.kb-key { height: 52px; border: 0; border-radius: 10px; background: var(--surface); color: var(--text); font: 600 20px/1 var(--ui); cursor: pointer; }
.kb-key.wide { font-size: 16px; }
.kb-key:hover { background: var(--surface-2); }
.tv .kb-key:focus { background: #fff; color: #120E1C; box-shadow: 0 0 0 3px #fff; }
.kb-card { width: auto; max-width: calc(100% - 32px); }
.kb-title { margin: 0 0 10px; font-size: 22px; }
.kb-value { min-height: 52px; margin-bottom: 14px; padding: 12px 16px; border-radius: 10px; background: var(--bg); font-size: 22px; white-space: pre; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 -2px 0 var(--accent); }
.ad-list-tools { align-items: center; gap: 12px; margin: 10px 0; }
.ad-list-tools .spacer { flex: 1; }
.ad-only select { padding: 7px 10px; font-size: 13.5px; }
.kb-actions { grid-template-columns: repeat(4, 172px); }
.kb-key.voice { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.kb-key.voice svg { width: 20px; height: 20px; }

/* Downloads lives in Settings: the gear carries the count of downloads in progress */
.tool { position: relative; }
.tool-badge { position: absolute; top: -2px; right: -4px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
.settings-nav .nav-out { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.settings-nav .nav-out .badge, .btn .badge { margin-left: 6px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 6px; color: var(--muted); font-size: 14px; font-weight: 600; }
.back-link svg { width: 16px; height: 16px; }
.back-link:hover { color: var(--text); }

/* The app update pop-up */
.upd-card { width: min(560px, 100%); }
.upd-card h1 { margin: 0 0 6px; font-size: 24px; }
.upd-card h2 { margin: 18px 0 6px; font-size: 16px; }
.upd-notes { margin: 0; padding-left: 1.2em; line-height: 1.6; }
.upd-notes li { margin: 4px 0; }

/* A ⋯ menu with no room below (the music bar, the tab bar, the screen's end) opens upwards */
.card-menu.up { top: auto !important; bottom: calc(100% + 4px); }

/* Settings and downloads live in the profile menu */
.pf-anchor .tool-badge { position: absolute; top: -4px; right: -6px; pointer-events: none; }
.pf-menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 6px; color: var(--text); font-size: 14px; }
.pf-menu a svg { width: 22px; height: 22px; padding: 1px; color: var(--muted); }
.pf-menu a:hover, .pf-menu a:focus-visible { background: var(--surface-2); }
.pf-menu a .badge { margin-left: auto; }
.pf-sep { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.pf-btn.active .pf-av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.tv .pf-menu a:focus { background: #fff; color: #120E1C; }

/* ---------- the phone app's offline mode ---------- */
.off-ico { width: 14px; height: 14px; }
.offline #search-open { display: none; }
.offline .nav a:not([data-nav="music"]) { opacity: .45; }
.offline .nav a .off-ico { position: absolute; top: 4px; right: 50%; margin-right: -22px; color: var(--muted); }
.offline-bar { position: fixed; z-index: 29; left: 0; right: 0; top: var(--nav-h); display: flex; align-items: center; gap: 8px; padding: 6px var(--gutter);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent); color: var(--muted); font-size: 13px; }
.offline-bar .off-ico { flex: none; }
.offline-bar span { flex: 1; }
.offline main { padding-top: calc(var(--nav-h) + 52px); }
.offline-page { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 12vh 0; max-width: 46ch; margin: 0 auto; }
.offline-page > .off-ico { width: 48px; height: 48px; color: var(--muted); }
.offline-page h1 { margin: 6px 0 0; font-size: 24px; }
.offline-page p { margin: 0 0 10px; }
.upd-alt { margin: 10px 0 0; text-align: right; }

/* ---------- Now playing, laid out like YouTube Music (still in the cover's colours) ----------
   The cover, then the title and artist on their own lines, a row of action chips, the seek bar,
   the controls spread across, and Up next / Lyrics / Related tabs at the bottom. */
.mnow-main { justify-content: flex-start; padding-top: 2vh; }
.mnow-meta { margin-top: 6px; }
.mnow-title { font-size: clamp(22px, 2.6vw, 32px); }
.mnow-artist { font-size: 16px; color: color-mix(in srgb, #fff 72%, transparent); }
.mnow-chips { width: min(46vh, 520px, 86vw); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.mnow-chips::-webkit-scrollbar { display: none; }
.mchip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #fff; font: 600 14px/1 var(--ui); cursor: pointer; }
.mchip svg { width: 20px; height: 20px; }
.mchip:hover { background: rgba(255, 255, 255, .2); }
.mchip[aria-pressed="true"] { color: var(--c-accent-x); }
.mchip[aria-pressed="true"] span { color: #fff; }
.mnow-seek, .mnow-times { width: min(46vh, 520px, 86vw); }
.mnow-ctl { width: min(46vh, 520px, 86vw); justify-content: space-between; gap: 4px; }
.mnow-tabs { display: flex; justify-content: space-around; padding: 6px var(--gutter) calc(10px + env(safe-area-inset-bottom)); }
.mnow-tabs button { padding: 12px 10px; border: 0; background: none; color: color-mix(in srgb, #fff 62%, transparent); font: 700 13.5px/1 var(--ui); letter-spacing: .04em; cursor: pointer; border-bottom: 2px solid transparent; }
.mnow-tabs button[aria-pressed="true"] { color: #fff; border-bottom-color: var(--c-accent-x); }
.mnow-related { display: none; min-height: 0; overflow-y: auto; flex-direction: column; gap: 2px; background: rgba(15, 12, 22, .55); border-radius: 12px; padding: 12px 8px; }
.mnow.r-open .mnow-related { display: flex; }
.mnow.r-open .mnow-body { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); }
.mnow-related h3 { margin: 0 8px 8px; font-size: 16px; }
.mr-row { display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 8px; background: none; color: #fff; text-align: left; cursor: pointer; font: inherit; }
.mr-row:hover, .mr-row:focus-visible { background: rgba(255, 255, 255, .1); }
.mr-art { width: 44px; height: 44px; flex: none; border-radius: 6px; background: rgba(255, 255, 255, .08) center / cover; }
.mr-text { min-width: 0; display: grid; }
.mr-text b, .mr-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-text small { color: color-mix(in srgb, #fff 65%, transparent); }
@media (max-width: 999px) {
  /* Narrow screens: a tab's panel takes the place of the player until it's closed again */
  .mnow.r-open .mnow-body, .mnow.l-open .mnow-body { grid-template-columns: minmax(0, 1fr); }
  .mnow.r-open .mnow-main, .mnow.l-open .mnow-main { display: none; }
}
@media (max-width: 640px) {
  .mnow-top .mnow-tools { display: none; } /* the tabs at the bottom do this on phones */
  .mnow-art { width: min(86vw, 44vh); }
  .mnow-body { padding-bottom: 6px; gap: 12px; }
  .mnow-main { gap: 12px; }
}
.tv .mchip:focus, .tv .mnow-tabs button:focus, .tv .mr-row:focus { background: #fff; color: #120E1C; }
@media (max-width: 640px) { .mnow-ctl .mbtn:not(.huge) svg { width: 30px; height: 30px; } .mnow-ctl .mbtn.huge { width: 72px; height: 72px; } }

/* ---------- title and series heroes: the copy sits in the flow ----------
   It used to hang from the bottom of a fixed-height hero, so a long title and plot grew upwards
   under the see-through header. Now the hero is at least its old height and grows to fit, and
   its copy always starts below the header. */
.series-page .billboard, .title-page .billboard { height: auto; min-height: min(78vh, 760px); display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 28px) var(--gutter) 16vh; }
.series-page .billboard { min-height: min(70vh, 640px); padding-bottom: 12vh; }
.series-page .bb-copy, .title-page .bb-copy { position: relative; left: auto; bottom: auto; right: auto; width: min(640px, 52vw); }
.bb-title.long { font-size: clamp(32px, 3.6vw, 54px); line-height: 1.08; }
.bb-title.longer { font-size: clamp(28px, 2.9vw, 44px); line-height: 1.1; }
.bb-date { margin: 0 0 8px; color: #d8d2e6; font-size: 16px; font-weight: 600; }
@media (max-width: 900px) {
  .series-page .billboard, .title-page .billboard { min-height: 76vh; padding-bottom: 6vh; }
  /* the crisp poster sits at the top; the copy starts below it */
  .series-page .billboard:has(.bb-poster), .title-page .billboard:has(.bb-poster) { padding-top: calc(12vh + 40vh); }
  .series-page .bb-art.from-poster .bb-poster, .title-page .bb-art.from-poster .bb-poster { top: 10vh; height: 38vh; }
  .series-page .bb-copy, .title-page .bb-copy { width: 100%; }
  .bb-title.long { font-size: clamp(28px, 7vw, 40px); }
  .bb-title.longer { font-size: clamp(24px, 6vw, 34px); }
}

/* Now playing rises out of the music bar and sinks back into it */
.mnow.rise { animation: mnow-rise .34s cubic-bezier(.2, .8, .2, 1) both; }
.mnow.sink { animation: mnow-sink .24s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }
@keyframes mnow-rise { from { transform: translateY(100%); } }
@keyframes mnow-sink { to { transform: translateY(100%); } }

/* Back on a hero: light, with a soft shadow, so it reads over a pale picture too */
.billboard .back { color: #ECE7F5; text-shadow: 0 1px 10px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .5); }
.billboard .back:hover { color: #fff; }

/* ---------- Settings: a list of categories, each on its own page ----------
   One row per category: a tinted icon tile, the name, and a line on what's inside. The rows
   are the whole design; sections are plain grey words, the way YouTube Music groups its own. */
.set-home { max-width: 760px; }
.set-list { display: flex; flex-direction: column; }
.set-sec { margin: 26px 0 6px; font: 600 14px/1.2 var(--ui); color: var(--muted); letter-spacing: .01em; }
.set-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; width: calc(100% + 28px);
  margin: 0 -14px; padding: 12px 14px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.set-row:hover { background: var(--surface); }
.set-row:focus-visible { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent); }
.set-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.set-ic svg { width: 22px; height: 22px; }
.set-text b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.set-text small { display: block; margin-top: 3px; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.set-chev { color: var(--muted); font-size: 26px; line-height: 1; }
.set-head { display: flex; align-items: baseline; gap: 14px; }
.set-head #save-out { font-size: 14px; }
/* A category's own page: its title is the page title, so the group's heading steps aside */
.settings .group > h2 { display: none; }
.settings .group > h2 + .field, .settings .group > .field:first-child { border-top: 0; }
.settings .back-link { margin-bottom: 2px; }
/* TV: bigger rows and the same white focus as the rest of Haven on a TV */
.tv .set-home, .tv .settings { max-width: 1000px; }
.tv .set-row { padding: 16px 18px; margin: 0 -18px; width: calc(100% + 36px); grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; }
.tv .set-ic { width: 56px; height: 56px; border-radius: 14px; }
.tv .set-ic svg { width: 28px; height: 28px; }
.tv .set-text b { font-size: 21px; }
.tv .set-text small { font-size: 16px; }
.tv .set-sec { font-size: 17px; margin-top: 32px; }
.tv .set-row:focus { outline: none; background: #fff; color: #120E1C; box-shadow: none; }
.tv .set-row:focus .set-text small, .tv .set-row:focus .set-chev { color: #4A4458; }
.tv .set-row:focus .set-ic { background: var(--accent); color: #fff; }

/* ---------- access: what a User doesn't see (the server refuses it as well) ---------- */
body.no-live [data-nav="live"], body.no-movies [data-nav="movies"], body.no-series [data-nav="series"], body.no-music [data-nav="music"],
body.role-user #dl-badge, body.role-user #t-dl, body.role-user #m-dl, body.role-user #s-dl-season, body.role-user #s-dl-all, body.role-user [data-dl] { display: none !important; }

/* ---------- sign in (outside the home network) ---------- */
body.signing-in .topbar, body.signing-in .nav, body.signing-in #mbar { display: none !important; }
.signin { max-width: 420px; margin: 8vh auto 40px; display: flex; flex-direction: column; gap: 10px; }
.signin h1 { margin: 18px 0 0; font: 800 30px/1.15 var(--display); }
.signin form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.signin label { font-weight: 600; font-size: 14px; margin-top: 6px; }
.signin .btn.big { margin-top: 14px; justify-content: center; }
.si-otp { font: 600 24px/1 var(--ui); letter-spacing: .18em; text-align: center; }
.si-check { margin-top: 10px; --altcha-max-width: 100%; --altcha-color-base: var(--surface); --altcha-color-text: var(--text); --altcha-color-border: var(--line); --altcha-border-radius: 10px; }
.si-err { color: var(--accent); min-height: 1.4em; margin: 4px 0 0; }
.si-tvcode { font: 800 clamp(44px, 8vw, 72px)/1 var(--ui); letter-spacing: .12em; margin: 14px 0 6px; color: #fff; }
.signin .link-btn { align-self: flex-start; }
.muted.small, .small.muted { font-size: 13px; }
.tv .signin { max-width: 760px; }
.tv .signin h1 { font-size: 40px; }

/* ---------- Settings → Sign-in from outside, People ---------- */
.acct-state { margin: 6px 0 14px; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); line-height: 1.5; }
.acct-state.ok { box-shadow: inset 3px 0 0 var(--ok); }
.warn-text { color: var(--warn); }
.acct-h { margin: 22px 0 8px; font-size: 16px; }
.ac-qr { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--line); }
.ac-qr .qr { width: 184px; height: 184px; background: #fff; border-radius: 10px; padding: 6px; flex: none; }
.ac-qr .qr svg { width: 100%; height: 100%; display: block; }
.ac-qr > div:last-child { flex: 1 1 240px; }
.ac-key { font-size: 15px; letter-spacing: .06em; word-break: break-all; }
.ac-codes { padding: 14px 16px; margin: 8px 0; border-radius: 10px; background: var(--surface-2); }
.ac-codes h3 { margin: 0 0 6px; }
.rc-list { columns: 2; margin: 10px 0 14px; padding: 0; list-style: none; }
.rc-list li { margin: 4px 0; }
.rc-list code { font-size: 15px; letter-spacing: .05em; }
.dev-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.dev-row small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text); vertical-align: 1px; }
.person { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.person:first-child { border-top: 0; }
.person-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 17px; }
.person-head select { width: auto; }
.person-secs { border: 0; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.person-secs legend { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.person-sign { margin: 8px 0; font-size: 14px; }
.person-pw { margin-top: 8px; }
.person-devs { margin-top: 10px; }
.person-devs summary { cursor: pointer; color: var(--muted); font-size: 14px; }
#lock-form { margin-top: 10px; align-items: center; }
@media (max-width: 640px) { .rc-list { columns: 1; } .dev-row { flex-wrap: wrap; } }
.person-devs { margin-top: 12px; padding: 4px 14px; border-radius: 10px; background: var(--surface-2); }
.person-devs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--muted); }
.person-devs .dev-row:first-of-type { border-top: 1px solid var(--line); }

/* ---------- internet radio ---------- */
.radio-card .radio-logo { background: #fff; display: grid; place-items: center; padding: 14%; }
.radio-card .radio-logo img { width: 100%; height: 100%; object-fit: contain; }
.radio-note { margin: -4px 0 16px; max-width: 62ch; }
/* A station has no seek bar, likes, shuffle, repeat, lyrics or related songs; it has Live. */
.mlive { display: none; border: 0; border-radius: 999px; padding: 4px 10px; font: 700 12px/1.2 var(--ui); background: var(--accent); color: #fff; letter-spacing: .02em; }
.mlive.late { background: rgba(255, 255, 255, .14); cursor: pointer; }
.mlive:disabled { cursor: default; }
.is-radio .mlive { display: inline-block; }
.mbar.is-radio .mlive { align-self: center; margin-right: 6px; flex: none; }
.mnow.is-radio .mlive { align-self: center; font-size: 14px; padding: 6px 14px; }
.mbar.is-radio #mbar-like, .mnow.is-radio #mnow-like, .mnow.is-radio #mnow-add, .mnow.is-radio #mnow-artist2,
.mnow.is-radio .mnow-seek, .mnow.is-radio .mnow-times, .mnow.is-radio #mnow-shuffle, .mnow.is-radio #mnow-repeat,
.mnow.is-radio #mnow-ltoggle, .mnow.is-radio [data-mtab="l"], .mnow.is-radio [data-mtab="r"] { display: none !important; }
.is-radio .mbar-art, .mnow.is-radio .mnow-art { background-color: #fff; background-size: 80% auto !important; background-repeat: no-repeat; background-position: center; }