/* ===== Plex Lumin - shared styles ===== */
* { box-sizing: border-box; margin: 0; padding: 0; scrollbar-width: thin; scrollbar-color: var(--gold-dim) #0c0c10; }
:root {
  --bg: #08080a;
  --panel: #121216;
  --panel2: #191921;
  --border: #26262e;
  --text: #e8e6e0;
  --muted: #8b8a93;
  --gold: #e4d27a;
  --gold-dim: #cbb45e;
  --gold-rgb: 228, 210, 122;
  --gold-fill: linear-gradient(90deg, #cbb45e, #e4d27a);
  --pl-sat: 0px;
  --pl-sar: 0px;
  --pl-sab: 0px;
  --pl-sal: 0px;
  --good: #4caf7d;
  --bad: #d05555;
  --warn: #d09b3c;
}
@font-face {
  font-family: "Julius Sans One";
  src: url("/static/fonts/JuliusSansOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* thin gold scrollbar (Chromium; Firefox uses scrollbar-* on *) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0c0c10;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
  border-radius: 8px;
  border: 2px solid #0c0c10;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}
::-webkit-scrollbar-corner {
  background: #0c0c10;
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 600; }

/* ---------- landing spotlight ---------- */
.stage {
  position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, #0c0c10 0%, #050506 60%);
  display: flex; align-items: center; justify-content: center;
}
.beam {
  position: absolute; top: -12vh; left: 50%;
  width: 52vmin; height: 72vh;
  transform: translateX(-50%) scaleY(0.06);
  transform-origin: top center;
  background: linear-gradient(to bottom,
    rgba(255, 244, 214, 0.55) 0%,
    rgba(255, 244, 214, 0.18) 55%,
    rgba(255, 244, 214, 0.00) 100%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(12px);
  opacity: 0;
  pointer-events: none;
}
.beam-source {
  position: absolute; top: -6vh; left: 50%;
  width: 18vmin; height: 10vmin; transform: translateX(-50%) scale(0.4);
  background: radial-gradient(ellipse at center, rgba(255,248,224,0.9), transparent 70%);
  filter: blur(10px); pointer-events: none;
  opacity: 0;
}
.pool {
  position: absolute; top: 60vh; left: 50%;
  width: 72vmin; height: 22vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255,244,214,0.16), transparent 68%);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
}
.stage.is-playing .beam {
  animation:
    land-beam 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards,
    flicker 8s ease-in-out 1.85s infinite;
}
.stage.is-playing .beam-source {
  animation: land-source 0.7s ease 0.04s forwards;
}
.stage.is-playing .pool {
  animation:
    land-pool 1s ease 0.85s forwards,
    flicker 8s ease-in-out 1.85s infinite;
}
@keyframes land-beam {
  0% { opacity: 0; transform: translateX(-50%) scaleY(0.06); }
  18% { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) scaleY(1); }
}
@keyframes land-source {
  0% { opacity: 0; transform: translateX(-50%) scale(0.35); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes land-pool {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  42% { opacity: 0.92; }
  44% { opacity: 0.98; }
  70% { opacity: 0.88; }
  72% { opacity: 1; }
}
/* WebGL light-rays spotlight (lightrays.js); the CSS beam above stays as fallback */
.light-rays {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.stage.has-rays .beam,
.stage.has-rays .beam-source,
.stage.has-rays .pool { display: none; }
.hero { position: relative; z-index: 2; text-align: center; }
.stage.is-boot:not(.is-lit) .hero h1,
.stage.is-boot:not(.is-lit) .hero .tag,
.stage.is-boot:not(.is-lit) .hero .actions {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
}
.stage.is-lit .hero h1,
.stage.is-lit .hero .tag,
.stage.is-lit .hero .actions {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.85s ease, transform 0.85s ease, filter 0.85s ease;
}
.stage.is-lit .hero .tag { transition-delay: 0.12s; }
.stage.is-lit .hero .actions { transition-delay: 0.24s; }
.hero h1 {
  font-family: "Julius Sans One", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.1rem, 8vmin, 4.4rem);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  font-weight: 400; /* Julius Sans One ships a single 400 weight */
  color: #f7f0dd;
  text-shadow: 0 0 24px rgba(255,244,214,0.55), 0 0 80px rgba(255,244,214,0.25);
}
.hero .tag {
  margin-top: 1rem;
  color: rgba(240, 233, 214, 0.66);
  letter-spacing: 0.14em;
  font-size: 0.9rem;
  text-transform: uppercase;
}
.hero .actions { margin-top: 2.6rem; display: flex; gap: 1rem; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .beam, .beam-source, .pool,
  .hero h1, .hero .tag, .hero .actions {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  .beam { transform: translateX(-50%) !important; }
}

/* ---------- buttons / forms ---------- */
.btn[hidden] { display: none !important; }
.btn {
  display: inline-block;
  padding: 0.55rem 1.4rem;
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  background: transparent;
  color: var(--gold);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn:hover { background: rgba(var(--gold-rgb), 0.12); box-shadow: 0 0 14px rgba(var(--gold-rgb),0.25); text-decoration: none; }
.btn.solid {
  background: var(--gold-fill);
  color: #17130a;
  font-weight: 600;
  border-color: transparent;
}
.btn.solid:hover {
  background: linear-gradient(90deg, #d8c45e, #f0e294);
}
.btn.danger { border-color: #7d3434; color: var(--bad); }
.btn.danger:hover { background: rgba(208, 85, 85, 0.12); box-shadow: 0 0 12px rgba(208,85,85,0.2); }
.btn.small { padding: 0.22rem 0.7rem; font-size: 0.78rem; }
.btn.dark {
  background: var(--panel2);
  color: var(--text);
  border-color: var(--border);
  font-weight: 500;
}
.btn.dark:hover {
  background: #22222c;
  color: var(--text);
  border-color: var(--gold-dim);
  box-shadow: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.icon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.34rem; line-height: 0;
  border: none;
}
.btn.icon:hover { box-shadow: none; }
.btn.icon svg { display: block; }

input, select, textarea {
  background: #0d0d11;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.9rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--border); box-shadow: none; }
input[type="checkbox"] { width: auto; accent-color: var(--gold); }
textarea { resize: vertical; min-height: 70px; }
label { font-size: 0.82rem; color: var(--muted); display: block; margin-bottom: 0.2rem; }
.field { margin-bottom: 0.9rem; }
.field input, .field select, .field textarea { width: 100%; }

/* ---------- toggle switch (boolean rows in the account popups) ---------- */
label.switch {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 0.45rem;
  padding: 0.5rem 0.75rem;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
}
label.switch:hover { border-color: var(--gold-dim); background: rgba(var(--gold-rgb),0.05); }
label.switch:last-child { margin-bottom: 0; }
/* the real checkbox stays in the DOM for forms and a11y, just not visible */
.switch input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0; padding: 0;
}
.switch .track {
  position: relative; flex: 0 0 auto;
  width: 38px; height: 21px; border-radius: 999px;
  background: #24242c; border: 1px solid var(--border);
  transition: background 0.18s, border-color 0.18s;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s, background 0.18s;
}
.switch input:checked + .track { background: rgba(var(--gold-rgb),0.22); border-color: var(--gold-dim); }
.switch input:checked + .track::after { transform: translateX(17px); background: var(--gold); box-shadow: 0 0 8px rgba(var(--gold-rgb),0.5); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 2px rgba(var(--gold-rgb),0.4); }
.switch input:disabled + .track { opacity: 0.4; }
.switch .sw-text { display: flex; flex-direction: column; line-height: 1.25; }
.switch .sw-text .hint { color: var(--muted); font-size: 0.75rem; }

/* ---------- auth card ---------- */
.center-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
body.tv-app .center-wrap {
  min-height: 100dvh;
  padding: max(1rem, var(--pl-sat, 0px)) max(1rem, var(--pl-sar, 0px)) max(1rem, var(--pl-sab, 0px)) max(1rem, var(--pl-sal, 0px));
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.card h1 {
  font-family: "Julius Sans One", "Segoe UI", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: #f7f0dd;
  text-shadow: 0 0 16px rgba(255,244,214,0.5), 0 0 44px rgba(255,244,214,0.22);
  text-align: center;
  margin-bottom: 1.4rem;
}
.card .sub { text-align: center; color: var(--muted); font-size: 0.72rem; margin-top: 1.1rem; }
.card .sub a { color: var(--muted); }
.card .ver {
  text-align: center;
  color: #55545c;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  margin: 0.35rem 0 0;
}
.card .btn.solid {
  background: var(--gold-fill);
  color: #17130a;
  border-color: transparent;
}
.card .btn.solid:hover {
  background: linear-gradient(90deg, #d8c45e, #f0e294);
  border-color: transparent;
  box-shadow: 0 0 18px rgba(var(--gold-rgb),0.45), 0 0 40px rgba(var(--gold-rgb),0.22);
}
body.tv-app .card {
  max-width: 440px;
  padding: 1.8rem;
}
body.tv-app .card input {
  font-size: 1.05rem;
  min-height: 2.5rem;
}
body.tv-app .card .btn.solid {
  min-height: 2.55rem;
  font-size: 0.98rem;
}
body.tv-app .card .sub { display: none; }

/* ---------- app layout ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem 1.2rem;
  background: transparent;
  border: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}
.topbar.is-away {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.55rem);
}
/* same treatment as the landing hero, scaled down to header size:
   text-indent cancels the trailing letter-space so it centres true */
.topbar .brand {
  font-family: "Julius Sans One", "Segoe UI", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: #f7f0dd;
  text-shadow: 0 0 12px rgba(255,244,214,0.5), 0 0 34px rgba(255,244,214,0.22);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  /* dead center of the header, independent of what sits left/right */
  position: absolute; left: 50%; transform: translateX(-50%);
}
.topbar a.brand:hover { color: #f7f0dd; text-decoration: none; }
.topbar .spacer { flex: 1; }
.topbar .btn { color: #fff; }
.topbar .btn:hover { color: #fff; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 1.4rem 1.2rem 4rem; }

/* ---------- left admin navigation ---------- */
body.has-side-menu { --admin-nav: 7.5rem; --admin-top: 3.2rem; }
body.has-side-menu .topbar {
  margin-left: 0;
  width: 100%;
  min-height: var(--admin-top);
  z-index: 80;
  background: #08080a;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
body.has-side-menu .topbar.is-away {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
body.has-side-menu .topbar .brand {
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-shadow: 0 0 14px rgba(255,244,214,0.65), 0 0 40px rgba(255,244,214,0.28);
}
body.has-side-menu .foot {
  margin-left: var(--admin-nav);
}
.side-menu {
  position: fixed;
  top: var(--admin-top);
  left: 0;
  bottom: 0;
  width: var(--admin-nav);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
  padding: 0.55rem 0.32rem 1rem;
  background: rgba(10, 10, 14, 0.96);
  border-right: 1px solid var(--border);
  overflow-x: hidden;
  overflow-y: auto;
  transform: none;
}
.side-menu .sm-label {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dim);
  padding: 0.7rem 0.42rem 0.12rem;
}
.side-menu .sm-label:first-child { padding-top: 0.15rem; }
.side-menu .btn {
  width: 100%;
  text-align: left;
  padding: 0.32rem 0.42rem;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  line-height: 1.2;
  background: transparent;
  color: #d8d3c6;
  border-color: transparent;
  border-radius: 5px;
  white-space: nowrap;
}
.side-menu .btn:hover {
  background: rgba(var(--gold-rgb),0.1);
  color: #f7f0dd;
  box-shadow: none;
}
.side-menu .btn.is-on {
  background: rgba(var(--gold-rgb),0.14);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),0.35);
}
body.has-side-menu .wrap {
  padding-left: calc(var(--admin-nav) + 1.15rem);
  padding-right: 1.15rem;
  max-width: none;
}

.section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.4rem;
}
.section > h2,
details.section > summary {
  font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.9rem; font-weight: 500;
  display: flex; align-items: center; gap: 0.6rem;
}
.section > h2 .count,
details.section > summary .count { color: var(--muted); font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
.admin-pane { margin-bottom: 0; }
.admin-pane[hidden] { display: none !important; }
.admin-ai-term { height: min(68vh, 640px); }

.req-quota {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  margin: -0.35rem 0 0.95rem;
  padding: 0.55rem 0.75rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold-dim);
  border-radius: 4px;
}
.req-quota[hidden] { display: none; }
.req-quota-label {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.req-quota-value {
  font-size: 0.88rem; color: var(--text); font-variant-numeric: tabular-nums;
  text-align: right;
}
.req-quota.is-empty {
  border-left-color: var(--bad);
  background: rgba(208,85,85,0.06);
}
.req-quota.is-empty .req-quota-value { color: #e8a0a0; }
.req-quota.is-ok { border-left-color: var(--good); }

/* collapsible sections: the header stays put, the body folds away */
details.section > summary {
  cursor: pointer; list-style: none; user-select: none;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before {
  content: "›";
  display: inline-block;
  font-size: 1.1rem; line-height: 1;
  transition: transform 0.15s ease;
}
details.section[open] > summary::before { transform: rotate(90deg); }
details.section > summary:hover { color: #e8d88a; }
/* no gap under the header while collapsed */
details.section:not([open]) > summary { margin-bottom: 0; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

/* ---------- tables ---------- */
/* tables size themselves to the section; long free text truncates instead of
   stretching the row, so sections do not grow a horizontal scrollbar */
.tbl-wrap { max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 0.87rem; table-layout: auto; }
th, td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--muted); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
td { overflow-wrap: anywhere; }
td.trunc {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
tr:hover td { background: rgba(255,255,255,0.02); }
tbody tr.rowlink { cursor: pointer; }
td .btn { margin-right: 0.3rem; }

.badge {
  display: inline-block; padding: 0.08rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; letter-spacing: 0.04em; border: 1px solid;
}
.badge.on { color: var(--good); border-color: var(--good); }
.badge.off { color: var(--muted); border-color: var(--border); }
.badge.gold { color: var(--gold); border-color: var(--gold-dim); }
.badge.red { color: var(--bad); border-color: #7d3434; }
.badge.amber { color: var(--warn); border-color: #7d612c; }

/* ---------- progress bars (torrents) ---------- */
.prog { background: #0c0c10; border: 1px solid var(--border); border-radius: 4px; height: 14px; min-width: 120px; overflow: hidden; }
.col-prog { min-width: 140px; }
.prog > div { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width 0.6s ease; }
.prog.seeding > div { background: linear-gradient(90deg, #2e7d55, var(--good)); }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.82rem; }
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; gap: 0.45rem; max-height: 380px; overflow-x: hidden; overflow-y: auto; padding: 0.4rem 0.2rem; }
.msg { max-width: 78%; min-width: 0; padding: 0.45rem 0.8rem; border-radius: 10px; font-size: 0.88rem; overflow-wrap: anywhere; word-break: break-word; }
.msg.me   { align-self: flex-end; background: rgba(var(--gold-rgb),0.16); border: 1px solid var(--gold-dim); }
.msg.them { align-self: flex-start; background: var(--panel2); border: 1px solid var(--border); }
.msg .t { display: block; font-size: 0.68rem; color: var(--muted); margin-top: 0.15rem; }
.chat-send { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.chat-send textarea { flex: 1; min-height: 44px; }

.thread-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 380px; overflow-x: hidden; overflow-y: auto; }
.thread-item {
  text-align: left; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.5rem 0.8rem; cursor: pointer; color: var(--text); font: inherit;
}
.thread-item:hover, .thread-item.active { border-color: var(--gold-dim); }
.thread-item.broadcast { border-color: var(--gold-dim); background: rgba(var(--gold-rgb),0.06); }
.thread-item .preview { color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 1rem;
}
.modal-back.open { display: flex; }
.modal-back.must-pw { z-index: 200; }
.modal-back.stack { z-index: 160; }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 1.6rem; width: 100%; max-width: 420px;
  max-height: 92vh; overflow-y: auto;
}
.modal.wide { max-width: 560px; }
.le-list {
  max-height: min(48vh, 26rem);
  overflow: auto;
  margin: 0.35rem 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel2);
}
.le-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.48rem 0.7rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.le-item:last-child { border-bottom: 0; }
.le-item[hidden] { display: none; }
.le-item:hover { background: rgba(var(--gold-rgb),0.05); }
.le-item input { flex: 0 0 auto; margin: 0; }
.le-name { flex: 1 1 auto; min-width: 0; }
.le-cc { color: var(--muted); font-size: 0.78rem; flex: 0 0 auto; }
.modal.xwide { max-width: 940px; }
.modal.lib-modal {
  max-width: min(1180px, calc(100vw - 2rem));
  width: 100%;
  height: min(86vh, 920px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 1.1rem;
}
.lib-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.lib-head h3 { margin-bottom: 0; flex: 0 0 auto; }
.lib-head input[type="search"] { flex: 1; min-width: 180px; margin: 0; }
.lib-head #libCount { white-space: nowrap; }
.lib-foot {
  margin-top: 0.85rem;
  flex-shrink: 0;
  justify-content: flex-end;
}
.lib-foot .spacer { flex: 1; }
.lib-pager {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
}
.lib-pager .btn { min-width: 5.5rem; }
.lib-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  display: grid;
  grid-template-columns: repeat(var(--lib-cols, 7), minmax(0, 1fr));
  gap: 0.85rem;
  align-content: start;
  padding: 0.15rem 0.25rem 0.4rem 0;
}
.lib-grid > .muted { grid-column: 1 / -1; }
.lib-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: default;
  text-align: left;
  color: var(--text);
  font: inherit;
  padding: 0;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.lib-card-open {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.lib-card:hover { border-color: var(--gold-dim); background: rgba(var(--gold-rgb),0.06); transform: translateY(-2px); }
.lib-card .poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
.poster-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: var(--panel2);
}
.lib-card .poster-wrap { width: 100%; }
.title-card .poster-wrap { flex: 0 0 96px; width: 96px; align-self: flex-start; border-radius: 4px; }
.poster-wrap > .poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: block;
}
.poster-watched {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.poster-wrap.is-watched .poster-watched { display: flex; }
.lib-card .poster-watched { font-size: 0.9rem; }
.lib-card-meta {
  padding: 0.55rem 0.65rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.lib-card-meta strong {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
  font-size: 0.88rem;
  font-weight: 600;
}
.watch-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.55rem 0 0.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  width: fit-content;
  transition: border-color 0.15s, background 0.15s;
}
.watch-check:hover {
  border-color: var(--gold-dim);
  background: rgba(var(--gold-rgb),0.05);
}
.watch-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
.watch-check .box {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #24242c;
  transition: background 0.15s, border-color 0.15s;
}
.watch-check .box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--gold);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: transform 0.12s, opacity 0.12s;
}
.watch-check input:checked + .box {
  background: rgba(var(--gold-rgb),0.22);
  border-color: var(--gold-dim);
}
.watch-check input:checked + .box::after {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}
.watch-check input:focus-visible + .box {
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb),0.4);
}
.modal h3 { color: var(--gold); font-weight: 500; letter-spacing: 0.08em; margin-bottom: 1rem; }
.modal h4 { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pf-apps {
  margin: 0.15rem 0 1.05rem;
  padding: 0.8rem 0.85rem 0.9rem;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pf-apps h4 { margin: 0 0 0.3rem; color: var(--gold); }
.pf-apps p { margin: 0; }
.pf-apps .row { margin-top: 0.65rem; }

/* ---------- misc ---------- */
.row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.row > input { flex: 1; min-width: 160px; }
.notice { padding: 0.6rem 0.9rem; border-radius: 6px; font-size: 0.85rem; margin: 0.6rem 0; display: none; }
.notice.ok { display: block; background: rgba(76,175,125,0.1); border: 1px solid #2e5c45; color: var(--good); }
.notice.err { display: block; background: rgba(208,85,85,0.1); border: 1px solid #6c3030; color: var(--bad); }
/* blocks stacked inside a section */
.pay-box {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.pay-box.due { border-color: var(--warn); }
.pay-box p { margin: 0; font-size: 0.88rem; }
.pay-box .mono {
  margin: 0.5rem 0;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.sub-block {
  margin-top: 1.15rem;
  padding: 0.95rem 1rem 1.05rem;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.sub-block:first-child { margin-top: 0; }
.sub-block h3, .danger-zone h3 {
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.7rem;
}
.sub-block h3 { color: var(--gold); }
.sub-block > p.small:last-child { margin-bottom: 0; }
.danger-zone h3 { color: var(--bad); margin-bottom: 0.5rem; }

/* ---------- built-in browser ---------- */
.poster { border-radius: 4px; display: block; background: var(--panel2); object-fit: cover; }
.poster.ph { aspect-ratio: 2 / 3; border: 1px solid var(--border); }
.hit {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.5rem 0.7rem; margin-bottom: 0.45rem; cursor: pointer;
  color: var(--text); font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.hit:hover { border-color: var(--gold-dim); background: rgba(var(--gold-rgb),0.06); }
.hit-body { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.hit-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-card { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.title-prog { max-width: 280px; width: 100%; min-width: 0; margin: 0.15rem 0 0.55rem; }
.title-body { flex: 1; min-width: 260px; }

.section.home-title {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.4rem 1.4rem;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(var(--gold-rgb),0.08), transparent 42%),
    var(--panel);
}
.section.home-title.has-land {
  background: var(--panel);
}
.section.home-title.has-land::before {
  content: "";
  position: absolute;
  inset: -8%;
  background-image: var(--title-land);
  background-size: cover;
  background-position: center 22%;
  filter: blur(18px) saturate(0.85);
  opacity: 0.42;
  pointer-events: none;
}
.section.home-title.has-land::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18,18,22,0.94) 0%, rgba(18,18,22,0.78) 48%, rgba(18,18,22,0.62) 100%),
    linear-gradient(180deg, rgba(18,18,22,0.2) 0%, rgba(18,18,22,0.88) 100%);
  pointer-events: none;
}
.home-title .title-card {
  position: relative;
  z-index: 1;
  flex-wrap: nowrap;
  gap: 1.5rem;
  align-items: stretch;
}
.home-title .title-card .poster-wrap {
  flex: 0 0 168px;
  width: 168px;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.home-title .title-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.home-title-head h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.12;
  color: #f7f0dd;
}
.home-title-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.home-title-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
}
.home-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.12rem 0.58rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(247,240,221,0.16);
  color: #ece6d6;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.home-chip-kind {
  color: var(--gold);
  background: rgba(var(--gold-rgb),0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),0.4);
}
.home-chip-rate { color: var(--gold); }
.home-chip-cert {
  border-radius: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.home-title-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 0.55rem;
  border-radius: 50%;
  background: #6f6a5e;
  vertical-align: middle;
}
.home-title-rate { color: var(--gold); font-weight: 600; }
.home-title-cert {
  display: inline-block;
  border: 1px solid #6f6a5e;
  border-radius: 3px;
  padding: 0.02rem 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #f7f0dd;
}
.home-title-plot {
  margin: 0 0 0.7rem;
  max-width: 42rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #eeeae0;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-title-cast {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  color: var(--text);
}
.home-title-cast span {
  display: block;
  margin-bottom: 0.18rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.home-title-play {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
}
.home-title-play .btn.solid {
  min-height: 2.55rem;
  padding: 0.5rem 1.25rem;
  font-weight: 650;
}
.home-title-actions {
  margin: 0 0 0.85rem;
}
.home-title-actions .home-title-play {
  margin: 0;
  align-items: flex-start;
}
.home-title-menu {
  flex: 1 1 16rem;
  min-width: 12rem;
  max-width: 24rem;
}
.home-title-menu > summary {
  list-style: none;
  user-select: none;
}
.home-title-menu > summary::-webkit-details-marker { display: none; }
.home-title-menu > summary::after {
  content: " ▾";
  font-size: 0.72em;
}
.home-title-menu[open] > summary {
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold);
}
.home-title-menu-panel {
  margin-top: 0.45rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem;
  background: #121216;
  border: 1px solid rgba(247,240,221,0.16);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
.home-title-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
}
.home-title-menu-item:hover,
.home-title-menu-item:focus {
  outline: none;
  background: rgba(var(--gold-rgb),0.1);
  color: #fff;
}
.home-title-menu-panel .home-title-watched {
  padding: 0.35rem 0.35rem 0.45rem;
}
.home-title-menu-panel .watch-check { margin: 0; }
.home-title-watched { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.home-title-watched .small { margin: 0; }
.home-title-quiet-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  justify-content: center;
}
.home-title-quiet {
  background: none;
  border: none;
  padding: 0.15rem 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}
.home-title-quiet:hover { color: var(--gold); }
.home-title-notes {
  margin: 0 0 0.75rem;
  max-width: 420px;
}
.home-req {
  margin: 0.15rem 0 1rem;
  padding: 0.95rem 1rem 1rem;
  border-radius: 12px;
  background: rgba(8,8,10,0.35);
  box-shadow: inset 0 0 0 1px rgba(247,240,221,0.1);
}
.home-req h4 {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.home-req-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}
.home-req-modes button {
  flex: 1 1 7.5rem;
  min-height: 2.45rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(247,240,221,0.16);
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  color: #d8d3c6;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.home-req-modes button:hover { border-color: var(--gold-dim); color: #f7f0dd; }
.home-req-modes button.is-on {
  background: rgba(var(--gold-rgb),0.16);
  border-color: var(--gold);
  color: var(--gold);
}
.home-pick-block { margin: 0 0 0.85rem; }
.home-pick-block h4 {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.home-seasons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.home-season {
  min-height: 2.2rem;
  padding: 0.28rem 0.8rem;
  border: 1px solid rgba(247,240,221,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: #d8d3c6;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.home-season:hover { border-color: var(--gold-dim); color: #f7f0dd; }
.home-season.is-on {
  background: rgba(var(--gold-rgb),0.16);
  border-color: var(--gold);
  color: var(--gold);
}
.home-season.is-have:not(.is-on)::after {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
}
.home-eps {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 18rem;
  overflow: auto;
  padding-right: 0.15rem;
}
.home-ep {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(247,240,221,0.1);
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.home-ep:hover { border-color: var(--gold-dim); }
.home-ep.is-on {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb),0.1);
}
.home-ep-no {
  flex: 0 0 auto;
  min-width: 2.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.home-ep-body { min-width: 0; flex: 1; }
.home-ep-body strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
}
.home-ep-have {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.home-req-modes button:disabled {
  opacity: 0.4;
  cursor: default;
}
.home-req #tvReqHint { margin: 0 0 0.7rem; }
.home-req .field { margin-bottom: 0.65rem; max-width: 22rem; }
.home-req .home-title-play { margin-bottom: 0.35rem; }
.home-req-extra {
  margin: 0.55rem 0 0.35rem;
  max-width: 22rem;
}
.home-req-extra > summary,
.home-ops > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  list-style: none;
  user-select: none;
}
.home-req-extra > summary::-webkit-details-marker,
.home-ops > summary::-webkit-details-marker { display: none; }
.home-req-extra > summary::after,
.home-ops > summary::after {
  content: " ▾";
  font-size: 0.72em;
}
.home-req-extra[open] > summary,
.home-ops[open] > summary {
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.home-ops {
  margin-top: auto;
  padding-top: 0.9rem;
}
.home-ops > summary {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.home-ops .btn { margin-top: 0; }
.home-ops-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.req-more {
  margin: 0 0 0.85rem;
  max-width: 420px;
}
.req-more > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  list-style: none;
  user-select: none;
}
.req-more > summary::-webkit-details-marker { display: none; }
.req-more > summary::after {
  content: " ▾";
  font-size: 0.72em;
}
.req-more[open] > summary {
  color: var(--gold);
  margin-bottom: 0.45rem;
}
.req-more .field { margin-bottom: 0; }
.req-more select { max-width: 12rem; }
.title-ep-pick {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
  max-width: 420px;
}
.title-ep-pick .field { margin-bottom: 0; }
.title-ep-pick .row { margin-top: 0.1rem; }
#tvPickStatus { min-height: 1.1em; margin: 0; }

/* ---------- member home ---------- */
body:has(.wrap.home) { display: flex; flex-direction: column; }
.wrap.home {
  flex: 1;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wrap.home.has-results { justify-content: flex-start; max-width: 920px; }
body:has(.wrap.home:not(.has-results)) .topbar .brand {
  visibility: hidden;
  pointer-events: none;
}
.home-logo {
  font-family: "Julius Sans One", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.55rem, 4.6vw, 2.7rem);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  font-weight: 400;
  color: #f7f0dd;
  text-shadow: 0 0 18px rgba(255,244,214,0.5), 0 0 56px rgba(255,244,214,0.22);
  margin: 0 0 1.25rem;
  text-align: center;
}
.wrap.home.has-results .home-logo { display: none; }
.home-hero {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-search {
  position: relative;
  width: 100%;
}
.home-search input {
  width: 100%;
  font-size: 1.05rem;
  padding: 0.75rem 2.8rem 0.75rem 1rem;
  outline: none;
}
.home-search input:focus {
  outline: none;
  border-color: var(--border);
  box-shadow: none;
}
.home-search-btn {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  outline: none;
  border-radius: 4px;
}
.home-search-btn:hover { color: var(--gold); }
.home-search-btn:focus,
.home-search-btn:focus-visible { outline: none; box-shadow: none; }
.home-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 0.85rem;
  justify-content: center;
}
.home-actions .btn {
  background: #0d0d11;
  border-color: var(--border);
  color: var(--text);
}
.home-actions .btn:hover {
  background: #14141a;
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}
#homeQuota { margin: 0.8rem 0 0; text-align: center; }
#homeResults, #homeDetail { width: 100%; }
.simple-list { display: flex; flex-direction: column; gap: 0.4rem; }
.dl-log { max-height: 220px; overflow-y: auto; }
.admin-pane .dl-log { max-height: min(42vh, 380px); }
.import-titles { max-height: 240px; overflow-x: hidden; overflow-y: auto; }
.simple-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
  padding: 0.55rem 0.75rem;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
}
.simple-main { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.simple-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simple-side { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.admin-pane .import-titles { max-height: min(36vh, 320px); }
#watchModal {
  background: rgba(4, 5, 8, 0.48);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}
#watchModal .watch-modal {
  background: linear-gradient(180deg, rgba(28, 30, 38, 0.58), rgba(12, 13, 18, 0.72));
  backdrop-filter: blur(42px) saturate(1.65);
  -webkit-backdrop-filter: blur(42px) saturate(1.65);
  border: 0;
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 28px 80px rgba(0,0,0,0.55);
  padding: 1.15rem 1.25rem 1.05rem;
}
#watchModal .watch-modal.has-land {
  background-image:
    linear-gradient(180deg, rgba(12, 13, 18, 0.78), rgba(8, 9, 12, 0.88)),
    var(--watch-land);
  background-size: cover;
  background-position: center 28%;
}
#watchModal .watch-modal h3 {
  color: #f5f2ea;
  letter-spacing: 0.01em;
  font-weight: 600;
  margin-bottom: 0.7rem;
}
#watchModal .simple-item {
  background: rgba(255,255,255,0.06);
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.watch-frame {
  width: 100%;
  max-width: min(100%, calc(56vh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
}
.watch-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #000;
  display: block;
}
video[controlslist*="nodownload"]::-webkit-media-controls-download-button {
  display: none !important;
}
.watch-meta {
  margin: 0 0 0.75rem;
  padding: 0.7rem 0.85rem;
  background: rgba(255,255,255,0.05);
  border: 0;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  max-height: min(36vh, 20rem);
  overflow-y: auto;
}
.watch-meta .plot {
  margin: 0 0 0.7rem;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.watch-meta .plot:last-child { margin-bottom: 0; }
.watch-meta dl {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.3rem 0.85rem;
  margin: 0;
  font-size: 0.85rem;
}
.watch-meta dt { color: var(--muted); }
.watch-meta dd { margin: 0; color: var(--text); }
.watch-fix-meta {
  margin: 0.85rem 0 0.35rem;
}
.watch-fix-fields {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 0.75rem;
}
.watch-fix-fields .field {
  flex: 1 1 16rem;
  margin: 0;
}
.watch-fix-fields .btn { margin-bottom: 0.1rem; }
.watch-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.7rem;
  padding: 0.28rem 0.32rem;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}
.watch-actions-spacer { flex: 1 1 auto; min-width: 0.75rem; }
.watch-actions .watch-check {
  margin: 0;
  padding: 0.38rem 0.8rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
}
.watch-actions .watch-check:hover {
  background: rgba(255,255,255,0.1);
  border: 0;
}
.watch-actions .watch-check input:checked + .box {
  background: rgba(var(--gold-rgb),0.28);
}
.watch-actions .btn {
  flex: 0 0 auto;
  padding: 0.4rem 0.95rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  background: transparent;
  border: 0;
  color: var(--text);
  box-shadow: none;
  white-space: nowrap;
  border-radius: 999px;
}
.watch-actions .btn:hover {
  background: rgba(255,255,255,0.12);
  border: 0;
  color: #fff;
  box-shadow: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #watchModal { background: rgba(4, 5, 8, 0.82); }
  #watchModal .watch-modal { background: #16161c; }
  .watch-actions { background: rgba(28, 28, 36, 0.96); }
  .tv-hud-btn { background: rgba(0, 0, 0, 0.45); }
}

.ai-text {
  margin-top: 0.9rem; padding: 0.8rem;
  background: #0d0d11; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.78rem;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

footer.foot { text-align: center; color: #55545c; font-size: 0.75rem; padding: 1rem 0 2rem; }

/* ---------- kebab (three-dot) action menu ---------- */
.kb-menu {
  position: fixed; z-index: 120;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  min-width: 180px; padding: 0.3rem;
  display: flex; flex-direction: column;
}
.kb-menu button {
  background: none; border: none; text-align: left; color: var(--text);
  font: inherit; font-size: 0.85rem; padding: 0.4rem 0.7rem;
  border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.kb-menu button:hover { background: rgba(var(--gold-rgb),0.1); color: var(--gold); }
.kb-menu button.danger { color: var(--bad); }
.kb-menu button.danger:hover { background: rgba(208,85,85,0.1); color: var(--bad); }
.kb-menu .kb-sep { height: 1px; background: var(--border); margin: 0.25rem 0.4rem; }

/* ---------- floating live chat ---------- */
.chat-fab {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--gold-fill); color: #17130a; border: none; cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.chat-fab:hover { background: #f0e294; transform: translateY(-2px); }
.chat-fab .fab-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--bad); color: #fff; font-size: 0.72rem; font-weight: 600;
  display: none; align-items: center; justify-content: center;
}
.chat-fab .fab-badge.show { display: flex; }
.chat-panel {
  position: fixed; right: 1.4rem; bottom: 5.6rem; z-index: 90;
  width: min(360px, calc(100vw - 2rem));
  height: min(480px, calc(100vh - 8rem));
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.65);
  display: none; flex-direction: column; overflow: hidden; max-width: 100%;
}
.chat-panel.open { display: flex; }
.cp-head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border); background: var(--panel2);
}
.cp-head .cp-title {
  flex: 1; color: var(--gold); letter-spacing: 0.04em; font-size: 0.9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-head .cp-title[hidden] { display: none; }
.cp-head #chatClose { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 1.05rem; line-height: 1; padding: 0.1rem 0.3rem; }
.cp-head #chatClose:hover { color: var(--text); }
.cp-tabs { display: flex; align-items: center; gap: 0.25rem; flex: 1; min-width: 0; }
.cp-tabs[hidden] { display: none; }
.cp-head .cp-tab {
  background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.78rem; letter-spacing: 0.04em; line-height: 1.2;
  padding: 0.28rem 0.6rem; border-radius: 4px;
}
.cp-head .cp-tab:hover { color: var(--text); }
.cp-head .cp-tab.on {
  color: var(--gold); border-color: var(--gold-dim);
  background: rgba(var(--gold-rgb), 0.12);
}
.cp-body { flex: 1; min-width: 0; overflow-x: hidden; overflow-y: auto; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; }
.cp-body .thread-list { max-height: none; }
.cp-send { display: flex; gap: 0.5rem; padding: 0.6rem; border-top: 1px solid var(--border); min-width: 0; align-items: flex-end; }
.cp-send textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 100px; }
.cp-go {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cp-go svg { display: block; }

/* ---------- AI log terminal ---------- */
.ai-term {
  background: #0a0a0c;
  border: 1px solid var(--border);
  border-radius: 6px;
  height: min(52vh, 420px);
  overflow-y: auto;
  padding: 0.7rem 0.85rem;
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #c8c6c0;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-term .l-time { color: #6a6972; margin-right: 0.45rem; }
.ai-term .l-req { color: #8b8a93; margin-right: 0.45rem; }
.ai-term .l-info { color: #c8c6c0; }
.ai-term .l-ok { color: #4caf7d; }
.ai-term .l-warn { color: #d09b3c; }
.ai-term .l-error { color: #d05555; }
.ai-term .empty { color: #6a6972; }

/* ---------- expandable media requests ---------- */
.req-list { display: flex; flex-direction: column; gap: 0.35rem; }
.req-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel2);
  overflow: hidden;
}
.req-item.open { border-color: #3a3a45; }
.req-row {
  width: 100%;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: transparent; border: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.req-row:hover { background: rgba(255,255,255,0.03); }
.req-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.req-title {
  font-size: 0.95rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.req-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; flex-shrink: 0; }
.req-chevron {
  color: var(--muted); font-size: 1.1rem; line-height: 1;
  transition: transform 0.15s ease; flex-shrink: 0;
}
.req-item.open .req-chevron { transform: rotate(90deg); }
.req-panel {
  padding: 0 0.85rem 0.9rem;
  border-top: 1px solid var(--border);
}
.req-panel[hidden] { display: none; }
.req-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem 1rem;
  padding-top: 0.85rem;
  font-size: 0.88rem;
}
.req-note, .req-magnet { min-height: 4.4rem; }
.req-magnet {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  word-break: break-all;
}
.req-note-state { margin-left: 0.35rem; font-weight: 400; }
.req-actions { margin-top: 0.15rem; }

/* ========== tablet + mobile ========== */

/* tablet */
@media (max-width: 1100px) {
  body.has-side-menu .wrap {
    padding-left: calc(var(--admin-nav) + 0.9rem);
    padding-right: 1rem;
  }

  .wrap { padding: 1.1rem 1rem 3.5rem; }
  .section { padding: 1rem 1.05rem; }
  .modal.xwide { max-width: min(940px, calc(100vw - 1.5rem)); }
  .modal.lib-modal { max-width: min(1180px, calc(100vw - 1.5rem)); height: min(88vh, 920px); }
  .prog { min-width: 80px; }
}

@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; }
  .req-grid { grid-template-columns: 1fr 1fr; }
  .req-badges { max-width: 42%; }
  .title-body { min-width: 0; }
  .hero .actions { flex-wrap: wrap; }
  .chat-panel {
    right: 0.75rem; left: 0.75rem; bottom: 5.2rem;
    width: auto; height: min(70vh, 520px);
  }
  .chat-fab { right: 0.9rem; bottom: 0.9rem; }
}

/* phone */
@media (max-width: 640px) {
  body { font-size: 14px; }

  .topbar {
    padding: 0.65rem 0.75rem;
    gap: 0.5rem;
  }
  .topbar .brand {
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
  }
  .home-logo {
    font-size: clamp(1.45rem, 8vw, 2.1rem);
    margin-bottom: 1rem;
  }
  .topbar .badge { display: none; }
  body.has-side-menu { --admin-top: 2.9rem; }

  .wrap { padding: 0.85rem 0.75rem 5.5rem; max-width: 100%; }
  .home-actions .btn { flex: 1 1 calc(50% - 0.5rem); text-align: center; }
  body.has-side-menu .topbar { margin-left: 0; }
  body.has-side-menu .wrap {
    padding-left: calc(var(--admin-nav) + 0.7rem);
    padding-right: 0.7rem;
  }

  html, body { overflow-x: hidden; max-width: 100%; }

  .section { padding: 0.85rem 0.8rem; margin-bottom: 1rem; border-radius: 6px; }
  .section > h2,
  details.section > summary {
    font-size: 0.82rem; letter-spacing: 0.08em; flex-wrap: wrap;
  }

  .card { padding: 1.35rem 1.1rem; max-width: 100%; }
  .card h1 {
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }
  .center-wrap { padding: 0.75rem; }

  .hero h1 {
    font-size: clamp(1.45rem, 9.5vw, 2.2rem);
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }
  .hero .tag { font-size: 0.75rem; letter-spacing: 0.1em; padding: 0 0.8rem; }
  .hero .actions {
    margin-top: 1.8rem;
    flex-direction: column;
    align-items: stretch;
    padding: 0 1.4rem;
  }
  .hero .actions .btn { text-align: center; }

  .btn { padding: 0.5rem 1rem; font-size: 0.85rem; }
  .watch-actions { flex-wrap: wrap; }
  .watch-actions-spacer { flex-basis: 100%; height: 0; min-width: 0; }
  .watch-actions .btn { flex: 1 1 auto; white-space: nowrap; }
  .row { gap: 0.45rem; }
  .row > input { min-width: 0; width: 100%; flex: 1 1 100%; }
  .row > .btn, .row > label.btn { flex: 1 1 auto; }

  /* drop less-important columns; never scroll sideways */
  .m-hide { display: none !important; }
  .tbl-wrap {
    overflow: hidden;
    max-width: 100%;
  }
  table {
    font-size: 0.8rem;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  th, td {
    padding: 0.45rem 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  td.trunc { max-width: none; }
  td .btn { white-space: nowrap; }

  .req-row {
    flex-wrap: wrap;
    gap: 0.45rem 0.6rem;
    padding: 0.65rem 0.7rem;
  }
  .req-main { flex: 1 1 100%; }
  .req-badges { max-width: none; justify-content: flex-start; }
  .req-chevron { margin-left: auto; }
  .req-grid { grid-template-columns: 1fr; gap: 0.55rem; }
  .req-panel { padding: 0 0.7rem 0.8rem; }

  input, select, textarea { font-size: 16px; } /* stop iOS zoom on focus */

  .modal-back {
    padding: 0;
    align-items: flex-end;
    background: rgba(0,0,0,0.78);
  }
  .modal, .modal.wide, .modal.xwide, .modal.lib-modal {
    max-width: 100%;
    width: 100%;
    max-height: min(92dvh, 92vh, 100%);
    padding: 0.45rem 1.05rem calc(1.05rem + max(env(safe-area-inset-bottom, 0px), var(--pl-sab, 0px)));
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  .modal::before,
  .modal.wide::before,
  .modal.xwide::before,
  .modal.lib-modal::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: #3d3d48;
    margin: 0.2rem auto 0.85rem;
    flex-shrink: 0;
  }
  .modal h3 { font-size: 1.02rem; margin-bottom: 0.85rem; }
  .modal .row { gap: 0.5rem; }
  .modal .row > .btn {
    min-height: 44px;
    flex: 1 1 0;
    text-align: center;
  }
  .modal.lib-modal { height: min(90dvh, 90vh, 100%); }
  .lib-head { flex-direction: column; align-items: stretch; gap: 0.55rem; }
  .lib-head input[type="search"] { min-width: 0; width: 100%; }
  .lib-grid { gap: 0.65rem; }
  .lib-foot { flex-wrap: wrap; }
  .lib-pager { width: 100%; margin-right: 0; justify-content: space-between; }
  .lib-pager .btn { min-height: 44px; flex: 1; }
  .watch-frame {
    max-width: min(100%, calc(38dvh * 16 / 9));
  }
  .watch-actions { margin-top: 0.65rem; border-radius: 1.15rem; }
  .watch-actions .watch-check,
  .watch-actions .btn { min-height: 44px; }
  #watchModal .watch-modal {
    border: 0;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, rgba(28, 30, 38, 0.72), rgba(12, 13, 18, 0.86));
  }
  .watch-meta dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .watch-meta dt { margin-top: 0.4rem; }
  .ai-term { height: min(48vh, 340px); font-size: 0.72rem; }

  body:has(.chat-panel.open)::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.62);
    z-index: 85;
  }
  body:has(.chat-panel.open) .chat-fab { visibility: hidden; pointer-events: none; }

  .chat-fab {
    right: max(1rem, env(safe-area-inset-right, 0px), var(--pl-sar, 0px));
    bottom: calc(1.1rem + max(env(safe-area-inset-bottom, 0px), var(--pl-sab, 0px)));
    width: 58px; height: 58px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(228,210,122,0.18);
  }
  .chat-panel {
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: min(92dvh, 100%);
    max-height: 100dvh;
    border-radius: 22px 22px 0 0;
    border: 0;
    background: #0c0c10;
    box-shadow: 0 -18px 50px rgba(0,0,0,0.55);
    max-width: none;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--pl-sab, 0px));
  }
  .chat-panel::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #3a3a44;
    margin: 0.5rem auto 0.15rem;
    flex-shrink: 0;
  }
  .cp-head {
    padding: 0.35rem 0.45rem 0.85rem 1rem;
    min-height: 52px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .cp-head .cp-title {
    font-size: 1.02rem;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .cp-head #chatClose,
  .cp-head #chatBack {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.2rem;
    color: #ece6d6;
    border-radius: 999px;
  }
  .cp-head #chatBack {
    background: none;
    border: none;
    color: #ece6d6;
    cursor: pointer;
    font: inherit;
  }
  .cp-head .cp-tab {
    min-height: 40px;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
  }
  .cp-body {
    padding: 1rem 0.95rem 0.7rem;
    gap: 0.6rem;
    background: radial-gradient(ellipse at 50% -10%, rgba(228,210,122,0.06), transparent 52%);
  }
  .thread-item {
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    min-height: 56px;
    background: #14141a;
    border-color: #26262e;
  }
  .msg {
    max-width: 84%;
    font-size: 0.96rem;
    line-height: 1.4;
    padding: 0.62rem 0.9rem 0.5rem;
    border: 0;
  }
  .msg.me {
    background: linear-gradient(180deg, #e4d27a, #cbb45e);
    color: #17130a;
    border-radius: 16px 16px 5px 16px;
  }
  .msg.me .t { color: rgba(23, 19, 10, 0.55); }
  .msg.them {
    background: #1a1a22;
    color: #eeeae0;
    border-radius: 16px 16px 16px 5px;
  }
  .cp-send {
    padding: 0.7rem 0.8rem 0.8rem;
    gap: 0.5rem;
    align-items: flex-end;
    background: #101016;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .cp-send textarea {
    min-height: 46px;
    border-radius: 23px;
    padding: 0.7rem 1.05rem;
    background: #191921;
    border: 1px solid #2a2a34;
    resize: none;
  }
  .cp-go {
    width: 46px;
    height: 46px;
    min-height: 46px;
  }

  .title-card { flex-direction: column; gap: 0.8rem; }
  .home-title .title-card {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.95rem;
  }
  .home-title .title-card .poster-wrap {
    flex: 0 0 112px;
    width: 112px;
  }
  .home-title-head h3 { font-size: 1.25rem; }
  .hit { padding: 0.55rem; }
  .prog { min-width: 0; width: 100%; height: 12px; }
  .col-prog { min-width: 0; width: 22%; }
  .row { flex-wrap: wrap; max-width: 100%; }
  .row > * { max-width: 100%; }
  .ai-term { overflow-x: hidden; word-break: break-word; white-space: pre-wrap; }

  footer.foot { padding: 0.6rem 0 1.2rem; }
}

/* very small phones */
@media (max-width: 380px) {
  .topbar .brand {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
  }
}

/* ---------- TV mode (10-foot / controller / future APK) ---------- */
body.tv-app {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: #08080a;
  display: flex;
  --tv-nav: 3.85rem;
  --tv-nav-open: 12.6rem;
  --tv-zoom: 0.8;
  --tv-card: clamp(calc(8.35rem * var(--tv-zoom)), calc(10.6vw * var(--tv-zoom)), calc(13.8rem * var(--tv-zoom)));
  --tv-radius: 12px;
  --tv-action-h: calc(2.75rem * var(--tv-zoom));
  --tv-focus: #f7f0dd;
  --tv-chip-bg: rgba(255,255,255,0.07);
  --tv-chip-line: rgba(247,240,221,0.18);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.tv-app,
body.tv-app * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.tv-app::-webkit-scrollbar,
body.tv-app *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
body.tv-app.tv-no-backdrop .tv-backdrop {
  display: none;
}
.tv-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #08080a;
}
.tv-backdrop-art {
  position: absolute;
  inset: -8%;
  background-color: #08080a;
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.08);
  filter: saturate(0.9) blur(12px);
  transition: opacity 0.55s ease;
}
.tv-backdrop-art.is-show { opacity: 1; }
.tv-backdrop-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8,8,10,0.38) 0%,
      rgba(8,8,10,0.52) 28%,
      rgba(8,8,10,0.78) 62%,
      rgba(8,8,10,0.94) 86%,
      #08080a 100%),
    linear-gradient(90deg,
      rgba(8,8,10,0.55) 0%,
      rgba(8,8,10,0.18) 42%,
      rgba(8,8,10,0.48) 100%),
    rgba(8,8,10,0.28);
}
body.tv-app.tv-pad { cursor: none; }
.tv-nav {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--tv-nav);
  z-index: 24;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: calc(1.2rem + max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px))) 0.45rem 1rem;
  background: #08080a;
  box-shadow: none;
  transition:
    width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.36s ease;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  scrollbar-width: none;
}
.tv-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.tv-app.tv-nav-open .tv-nav,
body.tv-app.tv-fine .tv-nav:hover,
body.tv-app.tv-fine .tv-nav:focus-within {
  width: var(--tv-nav-open);
  box-shadow: 18px 0 48px rgba(0,0,0,0.55);
}
.tv-nav .tv-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  max-height: 0;
  margin: 0;
  padding: 0 0.55rem;
  opacity: 0;
  overflow: hidden;
  font-family: "Julius Sans One", "Segoe UI", system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-indent: 0;
  text-align: left;
  color: #f7f0dd;
  white-space: nowrap;
  pointer-events: none;
  transition:
    max-height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    min-height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
}
body.tv-app.tv-nav-open .tv-nav .tv-brand,
body.tv-app.tv-fine .tv-nav:hover .tv-brand,
body.tv-app.tv-fine .tv-nav:focus-within .tv-brand {
  min-height: 2.1rem;
  max-height: 2.6rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.55rem;
  opacity: 1;
}
.tv-brand-full {
  display: inline-block;
  vertical-align: bottom;
}
.tv-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 2.55rem;
  background: transparent;
  border: 3px solid transparent;
  border-radius: 10px;
  color: #b7b2a6;
  padding: 0.48rem 0;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
body.tv-app:not(.tv-portrait).tv-nav-open .tv-nav-btn,
body.tv-app.tv-fine:not(.tv-portrait) .tv-nav:hover .tv-nav-btn,
body.tv-app.tv-fine:not(.tv-portrait) .tv-nav:focus-within .tv-nav-btn {
  justify-content: flex-start;
  gap: 0.85rem;
  padding: 0.48rem 0.55rem;
}
.tv-nav-exit { margin-top: auto; }
a.tv-nav-btn:hover { text-decoration: none; }
.tv-nav-btn svg { flex: 0 0 18px; width: 18px; height: 18px; }
.tv-nav-label {
  flex: 0 0 auto;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-8px);
  font-size: 0.9rem;
  font-weight: 600;
  transition:
    max-width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease,
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
body.tv-app.tv-nav-open .tv-nav-label,
body.tv-app.tv-fine .tv-nav:hover .tv-nav-label,
body.tv-app.tv-fine .tv-nav:focus-within .tv-nav-label {
  max-width: 8.6rem;
  opacity: 1;
  transform: none;
}
.tv-nav-btn.is-on { color: #f7f0dd; }
.tv-nav-btn:focus, .tv-nav-btn.tv-focus {
  outline: none;
  border-color: transparent;
  color: #fff;
  background: rgba(var(--gold-rgb),0.14);
  box-shadow:
    0 0 18px rgba(var(--gold-rgb),0.5),
    0 0 36px rgba(var(--gold-rgb),0.24);
}
.tv-main {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: calc(100% - var(--tv-nav));
  min-width: 0;
  height: 100%;
  margin-left: var(--tv-nav);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
body.tv-app.tv-portrait {
  --tv-nav-bar: calc(4.95rem + max(env(safe-area-inset-bottom, 0px), var(--pl-sab, 0px)));
}
body.tv-app.tv-portrait .tv-nav {
  top: auto;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--tv-nav-bar);
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  gap: 0;
  padding: 0.4rem 0.25rem calc(0.4rem + max(env(safe-area-inset-bottom, 0px), var(--pl-sab, 0px)));
  overflow: hidden;
  box-shadow: none;
  transition: none;
}
body.tv-app.tv-portrait.tv-nav-open .tv-nav,
body.tv-app.tv-portrait.tv-fine .tv-nav:hover,
body.tv-app.tv-portrait.tv-fine .tv-nav:focus-within {
  width: 100%;
  box-shadow: none;
}
body.tv-app.tv-portrait .tv-nav .tv-brand,
body.tv-app.tv-portrait.tv-nav-open .tv-nav .tv-brand,
body.tv-app.tv-portrait.tv-fine .tv-nav:hover .tv-brand,
body.tv-app.tv-portrait.tv-fine .tv-nav:focus-within .tv-brand {
  display: none;
}
body.tv-app.tv-portrait .tv-nav-label,
body.tv-app.tv-portrait.tv-nav-open .tv-nav-label,
body.tv-app.tv-portrait.tv-fine .tv-nav:hover .tv-nav-label,
body.tv-app.tv-portrait.tv-fine .tv-nav:focus-within .tv-nav-label {
  display: block;
  max-width: none;
  opacity: 0.88;
  overflow: visible;
  transform: none;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}
body.tv-app:not(.tv-watch-nav) .tv-nav-btn[data-nav="list"] {
  display: none;
}
body.tv-app.tv-native-app .tv-nav-exit {
  display: none;
}
body.tv-app.tv-portrait .tv-nav-btn[data-nav="library"],
body.tv-app.tv-portrait .tv-nav-btn[data-nav="watched"],
body.tv-app.tv-portrait .tv-nav-btn[data-nav="categories"] {
  display: none;
}
body.tv-app.tv-portrait .tv-nav-btn {
  flex: 1 1 0;
  flex-direction: column;
  width: auto;
  max-width: 4.1rem;
  min-height: 3.7rem;
  justify-content: center;
  gap: 0.22rem;
  padding: 0.28rem 0.12rem 0.18rem;
}
body.tv-app.tv-portrait .tv-nav-btn svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}
body.tv-app.tv-portrait .tv-nav-exit { margin-top: 0; }
body.tv-app.tv-portrait .tv-main {
  width: 100%;
  margin-left: 0;
  height: calc(100% - var(--tv-nav-bar));
}
body.tv-app.tv-portrait .tv-shell:has(.tv-hero-land) {
  padding-top: calc(1.4vh + max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px)));
}
body.tv-app.tv-portrait .tv-hero.tv-hero-land {
  display: flex;
  min-height: 0;
  margin: 0 0 1.4rem;
  overflow: visible;
}
body.tv-app.tv-portrait .tv-hero-art,
body.tv-app.tv-portrait .tv-hero .tv-poster-frame {
  display: none;
}
body.tv-app.tv-portrait .tv-hero-land .tv-hero-copy {
  min-height: 0;
  max-width: none;
  padding: 0;
}
body.tv-app.tv-portrait .tv-title-page {
  padding: calc(0.55rem + max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px))) 1.15rem 1.1rem;
}
body.tv-app.tv-portrait .tv-title-land {
  display: none;
}
body.tv-app.tv-portrait .tv-title-back {
  position: absolute;
  top: calc(0.35rem + max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px)));
  left: 0.35rem;
  z-index: 4;
  margin: 0;
  min-height: 2.35rem;
  padding: 0.28rem 0.75rem 0.28rem 0.4rem;
  background: rgba(8, 8, 10, 0.62);
  color: #f7f0dd;
  border-radius: 999px;
}
body.tv-app.tv-portrait .tv-title-top {
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  margin: 2.35rem 0 1.15rem;
}
body.tv-app.tv-portrait .tv-title-poster {
  flex: none;
  width: min(62vw, 15.5rem);
}
body.tv-app.tv-portrait .tv-title-poster .tv-poster-frame {
  width: 100%;
  height: calc(min(62vw, 15.5rem) * 3 / 2);
  min-height: calc(min(62vw, 15.5rem) * 3 / 2);
  border: 0;
  border-radius: 1.75rem;
  box-shadow: none;
}
body.tv-app.tv-portrait .tv-title-copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0;
  gap: 0.7rem;
}
body.tv-app.tv-portrait .tv-title-copy h1 {
  order: 1;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.tv-app.tv-portrait .tv-title-by,
body.tv-app.tv-portrait .tv-title-facts {
  display: none;
}
body.tv-app.tv-portrait .tv-title-plot {
  order: 2;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #c8c3b6;
  font-size: 0.78rem;
  line-height: 1.4;
}
body.tv-app.tv-portrait .tv-title-actions {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  width: 100%;
}
body.tv-app.tv-portrait .tv-title-page .tv-play,
body.tv-app.tv-portrait .tv-title-page .tv-action,
body.tv-app.tv-portrait .tv-title-page .tv-icon-btn,
body.tv-app.tv-portrait .tv-title-page .tv-text-btn,
body.tv-app.tv-portrait .tv-title-page .tv-title-back,
body.tv-app.tv-portrait .tv-title-copy .req-more > summary {
  border: 0;
  box-shadow: none;
}
body.tv-app.tv-portrait .tv-title-actions .tv-play {
  flex: 1 1 100%;
  width: min(13.2rem, 100%);
  max-width: 13.2rem;
  min-height: 3rem;
  min-width: 0;
  padding: 0.55rem 1.5rem;
  border-radius: 999px;
  font-size: 1rem;
}
body.tv-app.tv-portrait .tv-title-page .tv-play:focus,
body.tv-app.tv-portrait .tv-title-page .tv-play.tv-focus,
body.tv-app.tv-portrait .tv-title-page .tv-action:focus,
body.tv-app.tv-portrait .tv-title-page .tv-action.tv-focus,
body.tv-app.tv-portrait .tv-title-page .tv-icon-btn:focus,
body.tv-app.tv-portrait .tv-title-page .tv-icon-btn.tv-focus,
body.tv-app.tv-portrait .tv-title-page .tv-text-btn:focus,
body.tv-app.tv-portrait .tv-title-page .tv-text-btn.tv-focus,
body.tv-app.tv-portrait .tv-title-page .tv-title-back:focus,
body.tv-app.tv-portrait .tv-title-page .tv-title-back.tv-focus {
  border: 0;
  box-shadow: none;
}
body.tv-app.tv-portrait .tv-title-status,
body.tv-app.tv-portrait .tv-title-tech {
  order: 4;
  margin: 0;
}
.tv-shell {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  padding: calc(1.4vh + max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px))) 3.2vw calc(6vh + max(env(safe-area-inset-bottom, 0px), var(--pl-sab, 0px))) 1.6vw;
  scroll-behavior: auto;
}
.tv-title-page {
  position: absolute;
  inset: 0;
  z-index: 22;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  background: #08080a;
  padding: calc(1.5rem + max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px))) 3vw calc(4rem + max(env(safe-area-inset-bottom, 0px), var(--pl-sab, 0px))) 2vw;
}
.tv-title-page[hidden] { display: none; }
.tv-title-land {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 22%;
  pointer-events: none;
  z-index: 0;
}
.tv-title-land::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,10,0.94) 0%, rgba(8,8,10,0.62) 46%, rgba(8,8,10,0.82) 100%),
    linear-gradient(180deg, rgba(8,8,10,0.2) 0%, rgba(8,8,10,0.12) 38%, #08080a 100%);
}
.tv-title-page > *:not(.tv-title-land) {
  position: relative;
  z-index: 1;
}
.tv-title-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0.35rem 0.75rem 0.35rem 0.4rem;
  background: transparent;
  color: var(--muted);
  border: 3px solid transparent;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}
.tv-title-back svg { flex: 0 0 16px; width: 16px; height: 16px; }
.tv-title-back:focus, .tv-title-back.tv-focus {
  outline: none;
  border-color: #f7f0dd;
  color: #f7f0dd;
}
.tv-title-top {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-bottom: 1.6rem;
}
.tv-title-poster {
  flex: 0 0 min(calc(20vw * var(--tv-zoom)), calc(248px * var(--tv-zoom)));
  width: min(calc(20vw * var(--tv-zoom)), calc(248px * var(--tv-zoom)));
}
.tv-title-poster .tv-poster-frame {
  width: 100%;
  height: calc(min(calc(20vw * var(--tv-zoom)), calc(248px * var(--tv-zoom))) * 3 / 2);
  min-height: calc(min(calc(20vw * var(--tv-zoom)), calc(248px * var(--tv-zoom))) * 3 / 2);
  max-height: none;
  flex: none;
  border-radius: 8px;
  contain: none;
}
.tv-title-copy { min-width: 0; flex: 1; padding-top: 0.2rem; }
.tv-title-copy .req-more {
  margin: 0;
  max-width: none;
  flex: 0 0 auto;
}
.tv-title-actions .req-more[open] {
  flex: 1 1 100%;
}
.tv-title-copy .req-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tv-action-h);
  padding: 0.32rem 0.95rem;
  color: #f7f0dd;
  font-size: 0.9rem;
  font-weight: 600;
  border: 3px solid transparent;
  border-radius: var(--tv-radius);
  background: var(--tv-chip-bg);
  box-shadow: inset 0 0 0 1px var(--tv-chip-line);
}
.tv-title-copy .req-more > summary:focus,
.tv-title-copy .req-more > summary.tv-focus {
  outline: none;
  border-color: var(--tv-focus);
  color: #f7f0dd;
}
.tv-title-copy .req-more[open] > summary {
  color: var(--gold);
  margin-bottom: 0.45rem;
}
.tv-title-copy .req-more select {
  min-height: 2.4rem;
  font-size: 0.95rem;
}
.tv-title-copy .req-more select:focus,
.tv-title-copy .req-more select.tv-focus {
  outline: none;
  border-color: var(--gold);
}
.tv-title-copy h1 {
  font-size: clamp(1.45rem, 3.2vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 0.35rem;
}
.tv-title-by { color: var(--muted); font-size: 1rem; margin: 0 0 0.75rem; }
.tv-title-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
}
.tv-tag,
.tv-cert {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.12rem 0.58rem;
  border-radius: 999px;
  background: var(--tv-chip-bg);
  box-shadow: inset 0 0 0 1px var(--tv-chip-line);
  color: #ece6d6;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tv-title-rate { color: var(--gold); font-weight: 600; }
.tv-title-actions,
.tv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.95rem;
}
.tv-hero-actions { margin: 0; }
.tv-play,
.tv-action,
.tv-icon-btn,
.tv-text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--tv-action-h);
  border: 3px solid transparent;
  border-radius: var(--tv-radius);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.tv-play {
  min-width: calc(8.2rem * var(--tv-zoom));
  padding: 0.35rem 1.15rem;
  background: var(--gold-fill);
  color: #14110a;
}
.tv-play svg,
.tv-action svg,
.tv-icon-btn svg,
.tv-text-btn svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
.tv-play:focus, .tv-play.tv-focus {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(20,17,10,0.55);
  transform: scale(1.04);
}
.tv-play:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}
.tv-action,
.tv-icon-btn,
.tv-text-btn {
  padding: 0.32rem 0.95rem 0.32rem 0.78rem;
  background: var(--tv-chip-bg);
  box-shadow: inset 0 0 0 1px var(--tv-chip-line);
  color: #f7f0dd;
  font-weight: 600;
}
.tv-action:focus, .tv-action.tv-focus,
.tv-icon-btn:focus, .tv-icon-btn.tv-focus,
.tv-text-btn:focus, .tv-text-btn.tv-focus {
  outline: none;
  border-color: var(--tv-focus);
  box-shadow: none;
  transform: scale(1.04);
}
.tv-action.is-on,
.tv-icon-btn.is-on,
.tv-text-btn.is-on {
  background: rgba(var(--gold-rgb),0.16);
  box-shadow: inset 0 0 0 1px var(--gold);
  color: var(--gold);
}
.tv-action.is-danger { color: #f0b4b4; }
.tv-action.is-danger.is-on {
  background: rgba(208,85,85,0.16);
  box-shadow: inset 0 0 0 1px #d05555;
  color: #ffb4b4;
}
.tv-action[hidden] { display: none !important; }
.tv-action:disabled,
.tv-text-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.tv-cast-pop {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(1.2rem + max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px))) 1.2rem calc(1.2rem + max(env(safe-area-inset-bottom, 0px), var(--pl-sab, 0px)));
  background: rgba(6, 6, 8, 0.72);
}
.tv-cast-pop[hidden] { display: none; }
.tv-cast-card {
  width: min(28rem, 100%);
  padding: 1.15rem 1.15rem 1rem;
  border-radius: calc(1.1rem * var(--tv-zoom, 1));
  background: #14141a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 18px 50px rgba(0,0,0,0.45);
}
.tv-cast-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 750;
}
.tv-cast-status {
  margin: 0 0 0.75rem;
  color: #c8c2b4;
  font-size: 0.92rem;
}
.tv-cast-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  max-height: min(22rem, 52vh);
  overflow: auto;
}
.tv-cast-dev {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tv-action-h);
  padding: 0.45rem 0.9rem;
  border: 3px solid transparent;
  border-radius: var(--tv-radius);
  background: var(--tv-chip-bg);
  box-shadow: inset 0 0 0 1px var(--tv-chip-line);
  color: #f7f0dd;
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.tv-cast-dev:focus, .tv-cast-dev.tv-focus {
  outline: none;
  border-color: var(--tv-focus);
  transform: scale(1.02);
}
.tv-cast-dev:disabled { opacity: 0.5; cursor: default; transform: none; }
body.tv-app.tv-portrait .tv-cast-pop {
  align-items: flex-end;
  padding-bottom: calc(1.2rem + var(--tv-nav-bar, 4.95rem));
}
.tv-title-plot {
  max-width: 44rem;
  margin: 0 0 1rem;
  line-height: 1.5;
  color: #eeeae0;
  font-size: 1.02rem;
  white-space: pre-wrap;
}
.tv-title-people, .tv-title-tech {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.tv-title-people strong, .tv-title-tech strong { color: #d8d3c6; font-weight: 600; }
.tv-title-block { margin-top: 1.35rem; }
.tv-title-block h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.55rem;
}
.tv-title-ep,
.tv-season-chip {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--tv-action-h);
  text-align: left;
  background: var(--tv-chip-bg);
  box-shadow: inset 0 0 0 1px var(--tv-chip-line);
  color: #f7f0dd;
  border: 3px solid transparent;
  border-radius: var(--tv-radius);
  font: inherit;
  cursor: pointer;
}
.tv-title-ep {
  min-width: 7.6rem;
  max-width: 13rem;
  min-height: calc(3.55rem * var(--tv-zoom));
  padding: 0.45rem 0.75rem;
}
.tv-title-ep strong { display: block; font-size: 0.85rem; }
.tv-title-ep span { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-season-chip {
  padding: 0.38rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.tv-title-ep:focus, .tv-title-ep.tv-focus,
.tv-season-chip:focus, .tv-season-chip.tv-focus {
  outline: none;
  border-color: var(--tv-focus);
  transform: scale(1.04);
}
.tv-season-chip.is-on, .tv-title-ep.is-on {
  background: rgba(var(--gold-rgb),0.16);
  box-shadow: inset 0 0 0 1px var(--gold);
  color: var(--gold);
}
.tv-season-chip.is-request {
  color: var(--gold);
  background: rgba(var(--gold-rgb),0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),0.45);
}
.tv-title-ep.is-have:not(.is-on) {
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),0.4);
}
.tv-title-page .tv-rail-wrap { margin: 0; }
.tv-title-page .tv-rail {
  padding: 0.35rem 0 0.55rem;
  gap: 0.55rem;
}
.tv-shell {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  padding: calc(1.4vh + max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px))) 3.2vw calc(6vh + max(env(safe-area-inset-bottom, 0px), var(--pl-sab, 0px))) 1.6vw;
  scroll-behavior: auto;
}
.tv-page-title {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 600;
  margin: 0.2rem 0 1rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
.tv-settings {
  max-width: 44rem;
  padding-top: 0.35rem;
}
.tv-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(247,240,221,0.12);
}
.tv-set-copy { min-width: 0; }
.tv-set-name {
  margin: 0 0 0.22rem;
  font-size: 1.18rem;
  font-weight: 600;
}
.tv-set-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.tv-set-toggle {
  flex: 0 0 4.5rem;
  width: 4.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.2rem;
  border-radius: 999px;
  border: 3px solid #6f6a5e;
  background: #2a2824;
  cursor: pointer;
}
.tv-set-toggle[aria-pressed="true"] {
  justify-content: flex-end;
  background: var(--gold);
  border-color: var(--gold);
}
.tv-set-knob {
  display: block;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: #f7f0dd;
}
.tv-set-toggle[aria-pressed="true"] .tv-set-knob { background: #14110a; }
.tv-set-toggle:focus, .tv-set-toggle.tv-focus {
  outline: none;
  box-shadow: 0 0 0 3px #fff;
}
.tv-set-zoom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tv-set-zoom-btn {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 8px;
  border: 2px solid #6f6a5e;
  background: transparent;
  color: #f7f0dd;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.tv-set-zoom-btn:focus, .tv-set-zoom-btn.tv-focus {
  outline: none;
  border-color: #f7f0dd;
  box-shadow: 0 0 0 3px #fff;
}
.tv-set-zoom-btn:disabled { opacity: 0.35; cursor: default; }
.tv-set-zoom-val {
  min-width: 3.8rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
}
.tv-set-go {
  flex: 0 0 auto;
  min-width: 7.2rem;
  min-height: 2.7rem;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  border: 2px solid #6f6a5e;
  background: transparent;
  color: #f7f0dd;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.tv-set-go:focus, .tv-set-go.tv-focus {
  outline: none;
  border-color: #f7f0dd;
  box-shadow: 0 0 0 3px #fff;
}
.tv-set-go:disabled { opacity: 0.5; cursor: default; }
a.tv-set-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
.tv-shell:has(.tv-epg) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: calc(0.6rem + max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px))) 1.2vw calc(0.4rem + max(env(safe-area-inset-bottom, 0px), var(--pl-sab, 0px))) 0.8vw;
}
.tv-epg {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
.tv-epg-top {
  display: flex;
  gap: 1.2rem;
  padding: 0.85rem 1rem 0.75rem;
  min-height: 28%;
  background: linear-gradient(180deg, #121216, var(--bg));
}
.tv-epg-info { flex: 1; min-width: 0; }
.tv-epg-ch {
  color: var(--gold);
  font-size: 0.92rem;
  margin: 0 0 0.35rem;
  letter-spacing: 0.04em;
}
.tv-epg-info h1 {
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  font-weight: 700;
  margin: 0 0 0.45rem;
  color: #f7f0dd;
}
.tv-epg-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin: 0 0 0.55rem;
  color: #d8d3c6;
  font-size: 0.92rem;
}
.tv-epg-plot {
  max-width: 40rem;
  line-height: 1.45;
  color: var(--muted);
  font-size: 0.95rem;
}
.tv-epg-screen {
  flex: 0 0 min(32vw, 340px);
  width: min(32vw, 340px);
  display: flex;
  flex-direction: column;
}
.tv-epg-preview {
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 8px 0 0;
  position: relative;
  cursor: pointer;
}
.tv-epg-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 1;
  opacity: 0;
}
.tv-epg-preview.is-on video { opacity: 1; }
.tv-epg-preview.is-on .tv-epg-ph { opacity: 0; pointer-events: none; }
.tv-epg-preview:focus, .tv-epg-preview.tv-focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold);
}
.tv-epg-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.tv-epg-ph {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold-dim);
  letter-spacing: 0.08em;
}
.tv-epg-preview-bar {
  display: flex;
  justify-content: space-between;
  padding: 0.28rem 0.45rem;
  background: var(--panel);
  color: #d8d3c6;
  font-size: 0.78rem;
  border-radius: 0 0 8px 8px;
}
.tv-epg-preview-bar span:first-child { color: var(--gold); font-weight: 700; letter-spacing: 0.12em; }
.tv-epg-times {
  display: grid;
  grid-template-columns: 10.5rem repeat(4, 1fr);
  gap: 2px;
  padding: 0 0.35rem;
  background: var(--bg);
  color: #f7f0dd;
  font-size: 0.82rem;
  font-weight: 600;
}
.tv-epg-times span {
  padding: 0.4rem 0.45rem;
}
.tv-epg-date { color: var(--gold); }
.tv-epg-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0.35rem 0.35rem;
}
.tv-epg-row {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 2px;
  margin-bottom: 2px;
}
.tv-epg-chan,
.tv-epg-cell {
  min-height: 2.55rem;
  border: 2px solid transparent;
  background: var(--panel2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.tv-epg-chan {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.5rem;
  background: var(--panel);
}
.tv-epg-num {
  flex: 0 0 2.1rem;
  color: var(--gold-dim);
  font-weight: 700;
  font-size: 0.85rem;
}
.tv-epg-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 0.88rem;
}
.tv-epg-cells {
  display: flex;
  gap: 2px;
  min-width: 0;
}
.tv-epg-cell {
  min-width: 0;
  padding: 0.3rem 0.55rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.88rem;
}
.tv-epg-cell.is-now { box-shadow: inset 3px 0 0 var(--gold); }
.tv-epg-chan:focus, .tv-epg-chan.tv-focus,
.tv-epg-cell:focus, .tv-epg-cell.tv-focus {
  outline: none;
  background: rgba(var(--gold-rgb),0.22);
  border-color: var(--gold);
  color: #f7f0dd;
  z-index: 2;
}
.tv-epg-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.45rem 0.7rem;
  background: var(--panel);
}
.tv-epg-brand { font-weight: 700; letter-spacing: 0.08em; color: var(--gold); }
.tv-epg-guide { color: var(--muted); font-size: 0.88rem; }
.tv-epg-intl {
  margin-left: auto;
  background: none;
  color: var(--muted);
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 0.12rem 0.2rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.tv-epg-intl:focus, .tv-epg-intl.tv-focus {
  outline: none;
  color: var(--gold);
  border-color: var(--gold);
}
.tv-cat-group {
  margin: 0 0 1.45rem;
}
.tv-cat-group .tv-row-title {
  margin-bottom: 0.55rem;
}
.tv-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(8.8rem * var(--tv-zoom)), 1fr));
  gap: 0.6rem 0.55rem;
  padding-bottom: 0.2rem;
}
.tv-cat {
  min-height: 3.55rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  background: var(--panel2);
  border: 3px solid transparent;
  border-radius: 10px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.09s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.09s ease;
}
.tv-cat-name { font-size: 0.95rem; font-weight: 600; }
.tv-cat-count { font-size: 0.82rem; color: var(--muted); }
.tv-cat:focus, .tv-cat.tv-focus {
  outline: none;
  border-color: #f7f0dd;
  box-shadow: none;
  transform: scale(1.04);
}
.tv-search-page { min-width: 0; }
.tv-search {
  position: sticky;
  top: calc(-1.4vh - max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px)));
  z-index: 4;
  width: auto;
  max-width: none;
  margin: calc(-1.4vh - max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px))) -3.2vw 0 -1.6vw;
  padding: calc(1.4vh + max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px))) 3.2vw 1.2rem 1.6vw;
  background: #08080a;
  box-shadow: 0 16px 20px 10px #08080a;
}
.tv-search-body {
  position: relative;
  z-index: 1;
  padding-top: 0.2rem;
}
.tv-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tv-search input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 36rem;
  font-size: 1rem;
  padding: 0.72rem 1.15rem;
  border: 1px solid rgba(247,240,221,0.22);
  border-radius: 999px;
  background: rgba(247,240,221,0.08);
  color: var(--text);
  box-shadow: none;
}
.tv-search input:focus, .tv-search input.tv-focus {
  outline: none;
  border-color: #f7f0dd;
  background: rgba(247,240,221,0.12);
  box-shadow: none;
}
.tv-search input::-webkit-search-decoration,
.tv-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
body.tv-app.tv-portrait .tv-search {
  max-width: none;
  padding-bottom: 1.25rem;
}
body.tv-app.tv-portrait .tv-search input {
  max-width: none;
  font-size: 0.95rem;
  padding: 0.68rem 1.05rem;
}
.tv-search-page .tv-cat-group {
  margin-top: 0.35rem;
}
.tv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tv-card), 1fr));
  gap: 1.1rem 0.85rem;
  padding: 0.55rem 0.2rem 1.4rem;
}
.tv-grid .tv-card {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: none;
}
.tv-grid .tv-poster-frame {
  width: 100%;
  height: 0;
  min-height: 0;
  max-height: none;
  flex: none;
  padding-bottom: 150%;
  contain: none;
}
.tv-empty, #tvStatus { font-size: 1.15rem; max-width: 36rem; }
.tv-card-sub {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-title-status {
  margin: 0.4rem 0 0.7rem;
  color: var(--gold);
  font-size: 0.95rem;
}
.tv-title-status.is-err { color: #e8a0a0; }
.tv-hero {
  display: flex; align-items: flex-end; gap: 1.6rem;
  min-height: 34vh; margin: 0 0 2.2rem;
}
.tv-hero .tv-poster-frame {
  width: min(calc(16vw * var(--tv-zoom)), calc(180px * var(--tv-zoom)));
  height: calc(min(calc(16vw * var(--tv-zoom)), calc(180px * var(--tv-zoom))) * 3 / 2);
  min-width: min(calc(16vw * var(--tv-zoom)), calc(180px * var(--tv-zoom)));
  max-width: min(calc(16vw * var(--tv-zoom)), calc(180px * var(--tv-zoom)));
  flex: 0 0 min(calc(16vw * var(--tv-zoom)), calc(180px * var(--tv-zoom)));
  border-radius: 6px;
}
.tv-shell:has(.tv-hero-land) {
  padding-top: 0;
}
.tv-hero.tv-hero-land {
  display: block;
  position: relative;
  min-height: min(48vh, 32rem);
  margin: 0 -3.2vw 0.15rem -1.6vw;
  overflow: hidden;
}
.tv-hero-art {
  position: absolute;
  inset: 0;
  background-color: #08080a;
  background-size: cover;
  background-position: center 28%;
  pointer-events: none;
}
.tv-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(8,8,10,0.94) 0%,
      rgba(8,8,10,0.78) 22%,
      rgba(8,8,10,0.42) 48%,
      rgba(8,8,10,0.12) 68%,
      transparent 86%),
    linear-gradient(180deg,
      rgba(8,8,10,0.22) 0%,
      transparent 24%,
      rgba(8,8,10,0.08) 58%,
      #08080a 100%);
}
.tv-hero-land .tv-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(68vh, 46rem);
  max-width: min(44rem, 52vw);
  padding: calc(7vh + max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px))) 3.2vw 3.4rem 3.4vw;
}
.tv-hero-copy { min-width: 0; padding-bottom: 0.4rem; }
.tv-kicker { color: var(--gold); letter-spacing: 0.14em; font-size: 0.78rem; margin-bottom: 0.35rem; }
.tv-hero-land .tv-kicker {
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,0.7);
}
.tv-hero-copy h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 600; margin-bottom: 0.35rem; }
.tv-hero-land .tv-hero-copy h1 {
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: #f7f0dd;
  margin: 0 0 0.7rem;
  text-shadow: 0 2px 24px rgba(0,0,0,0.72);
}
.tv-hero-land .tv-title-facts {
  margin: 0 0 0.85rem;
  color: #f0ead8;
}
.tv-hero-meta { color: var(--muted); margin-bottom: 0.6rem; }
.tv-hero-land .tv-plot {
  max-width: 34rem;
  margin-bottom: 1.25rem;
  color: #ece6d6;
  font-size: 1.05rem;
  -webkit-line-clamp: 3;
}
.tv-plot {
  max-width: 40rem; margin-bottom: 1rem;
  color: var(--text); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.tv-row { margin: 0 0 1.45rem; overflow: visible; }
.tv-hero-skel {
  min-height: 26vh;
  margin: 0 0 1.2rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
}
.tv-row-skel .tv-row-title {
  width: 7.5rem;
  height: 0.95rem;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  color: transparent;
  text-shadow: none;
}
.tv-card-skel {
  flex: 0 0 var(--tv-card);
  width: var(--tv-card);
  height: calc(var(--tv-card) * 3 / 2);
  border-radius: var(--tv-radius);
  background: rgba(255,255,255,0.06);
}
body.tv-app.tv-anim .tv-card-skel,
body.tv-app.tv-anim .tv-hero-skel,
body.tv-app.tv-anim .tv-row-skel .tv-row-title {
  background-image: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: tv-skel 1.15s ease-in-out infinite;
}
@keyframes tv-skel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.tv-row-title {
  font-size: clamp(0.98rem, 1.35vw, 1.22rem);
  font-weight: 600;
  margin: 0 0 0.5rem 0.05rem;
  color: #ece6d6;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}
.tv-rail-wrap { position: relative; overflow: visible; }
.tv-rail, .tv-ep-rail {
  display: flex; gap: 0.62rem;
  align-items: flex-start;
  overflow-x: auto; overflow-y: hidden;
  overflow-anchor: none;
  padding: 0.95rem 0.45rem 1.35rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.tv-ep-rail { gap: 0.5rem; padding: 0.7rem 1.2rem 1.1rem; }
.tv-rail::-webkit-scrollbar,
.tv-ep-rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.tv-rail-arrow {
  position: absolute;
  top: 0.4rem;
  height: calc(var(--tv-card) * 3 / 2);
  width: 3.4rem;
  z-index: 3;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(247, 240, 221, 0.42);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, color 0.16s ease;
}
.tv-rail-arrow.is-on {
  opacity: 1;
  pointer-events: auto;
}
.tv-rail-arrow-l {
  left: 0;
  background: linear-gradient(90deg, rgba(8,8,10,0.55), transparent);
}
.tv-rail-arrow-r {
  right: 0;
  background: linear-gradient(270deg, rgba(8,8,10,0.55), transparent);
}
.tv-rail-arrow:hover, .tv-rail-arrow:focus {
  outline: none;
  color: rgba(247, 240, 221, 0.92);
}
.tv-rail-arrow svg {
  width: 1.7rem;
  height: 1.7rem;
  filter: drop-shadow(0 1px 8px rgba(0,0,0,0.85));
}
.tv-ep-wrap .tv-rail-arrow {
  top: 0;
  height: 100%;
}
.tv-ep-wrap[hidden] { display: none; }
.tv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--tv-card);
  width: var(--tv-card);
  min-width: var(--tv-card);
  max-width: var(--tv-card);
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  z-index: 1;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.tv-poster-frame {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--tv-card) * 3 / 2);
  min-height: calc(var(--tv-card) * 3 / 2);
  max-height: calc(var(--tv-card) * 3 / 2);
  overflow: hidden;
  border-radius: 6px;
  background: var(--panel2);
  flex: 0 0 calc(var(--tv-card) * 3 / 2);
  contain: strict;
  transition: box-shadow 0.16s ease;
}
.tv-poster-frame > .tv-poster,
.tv-poster-frame > .tv-poster.ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 0;
  background: var(--panel2);
}
.tv-poster-frame > .tv-poster[src*="live-tv-poster"] {
  object-fit: contain;
  background: #000;
}
.tv-card-name {
  display: block; margin-top: 0.32rem; font-size: 0.8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #b7b2a6;
  transition: color 0.16s ease;
}
.tv-card:focus, .tv-card.tv-focus {
  outline: none;
  z-index: 8;
  transform: scale(1.08);
}
.tv-card:focus .tv-poster-frame,
.tv-card.tv-focus .tv-poster-frame {
  box-shadow: 0 0 0 2px #f7f0dd, 0 10px 24px rgba(0,0,0,0.55);
}
body.tv-app.tv-anim .tv-card.tv-focus .tv-poster-frame::after,
body.tv-app.tv-anim .tv-card:focus .tv-poster-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    transparent 0%,
    transparent 34%,
    rgba(255, 255, 255, 0.03) 44%,
    rgba(255, 248, 220, 0.18) 50%,
    rgba(255, 255, 255, 0.04) 56%,
    transparent 66%,
    transparent 100%
  );
  background-size: 280% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  animation: tv-card-glint 12s ease-in-out infinite;
}
@keyframes tv-card-glint {
  0% { background-position: 140% 0; opacity: 0; }
  10% { opacity: 0.55; }
  58% { background-position: -40% 0; opacity: 0.12; }
  68% { opacity: 0; }
  100% { background-position: -40% 0; opacity: 0; }
}
.tv-saver {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: #050506;
  display: none;
  align-items: center;
  justify-content: center;
}
.tv-saver.is-on {
  display: flex;
}
.tv-saver[hidden] { display: none !important; }
.tv-saver.has-rays .beam,
.tv-saver.has-rays .beam-source,
.tv-saver.has-rays .pool { display: none; }
.tv-saver.is-playing .beam {
  animation:
    land-beam 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards,
    flicker 8s ease-in-out 1.85s infinite;
}
.tv-saver.is-playing .beam-source {
  animation: land-source 0.7s ease 0.04s forwards;
}
.tv-saver.is-playing .pool {
  animation:
    land-pool 1s ease 0.85s forwards,
    flicker 8s ease-in-out 1.85s infinite;
}
.tv-saver .hero h1 {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
}
.tv-saver.is-lit .hero h1 {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.85s ease, transform 0.85s ease, filter 0.85s ease;
}
.tv-intro {
  position: fixed;
  inset: 0;
  z-index: 38;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #050506;
  pointer-events: auto;
}
.tv-intro[hidden] { display: none; }
.tv-intro-beam,
.tv-intro-source { display: none; }
.tv-intro-pool {
  position: absolute;
  top: 58vh;
  left: 50%;
  width: 70vmin;
  height: 22vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 244, 214, 0.18), transparent 68%);
  filter: blur(10px);
  opacity: 0;
  pointer-events: none;
}
.tv-intro-logo {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "Julius Sans One", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.2rem, 9vmin, 5rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #f7f0dd;
  text-shadow: 0 0 24px rgba(255, 244, 214, 0.55), 0 0 80px rgba(255, 244, 214, 0.22);
}
.tv-intro-logo span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.18em);
}
.tv-intro-logo .tv-intro-space {
  width: 0.42em;
}
.tv-intro.is-play .tv-intro-pool {
  animation: tv-intro-fade 1s ease 0.7s forwards;
}
.tv-intro.is-play .tv-intro-logo span:nth-child(1) { animation: tv-intro-letter 0.7s ease 0.85s forwards; }
.tv-intro.is-play .tv-intro-logo span:nth-child(2) { animation: tv-intro-letter 0.7s ease 0.98s forwards; }
.tv-intro.is-play .tv-intro-logo span:nth-child(3) { animation: tv-intro-letter 0.7s ease 1.11s forwards; }
.tv-intro.is-play .tv-intro-logo span:nth-child(4) { animation: tv-intro-letter 0.7s ease 1.24s forwards; }
.tv-intro.is-play .tv-intro-logo span:nth-child(5) { animation: tv-intro-letter 0.7s ease 1.37s forwards; }
.tv-intro.is-play .tv-intro-logo span:nth-child(7) { animation: tv-intro-letter 0.7s ease 1.58s forwards; }
.tv-intro.is-play .tv-intro-logo span:nth-child(8) { animation: tv-intro-letter 0.7s ease 1.71s forwards; }
.tv-intro.is-out {
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
@keyframes tv-intro-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes tv-intro-letter {
  from { opacity: 0; transform: translateY(0.18em); }
  to { opacity: 1; transform: none; }
}
.tv-card:focus .tv-card-name,
.tv-card.tv-focus .tv-card-name {
  color: #fff;
}
.tv-hero .btn:focus, .tv-hero .btn.tv-focus {
  outline: none;
  border-color: #f7f0dd;
  box-shadow: 0 0 0 2px #f7f0dd;
}
.tv-ep {
  flex: 0 0 auto;
  background: var(--panel2); color: var(--text);
  border: 3px solid transparent; border-radius: 6px;
  padding: 0.55rem 0.8rem; font: inherit; cursor: pointer;
  transform: scale(1);
  transition: transform 0.09s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.09s ease;
}
.tv-ep:focus, .tv-ep.tv-focus {
  outline: none;
  border-color: #f7f0dd;
  transform: scale(1.08);
}
.tv-ep.is-on { border-color: var(--gold); color: var(--gold); }
.tv-player {
  position: fixed; inset: 0; z-index: 40;
  background: #000;
  padding: 0;
  overflow: hidden;
}
.tv-player[hidden] { display: none; }
.tv-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.tv-player-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  pointer-events: none;
}
.tv-player-fade[hidden] { display: none; }
#tvVideo::cue {
  font-size: var(--tv-sub-size, 100%);
}
.tv-player.is-idle { cursor: none; }
.tv-player video:focus,
.tv-player video.tv-focus {
  outline: none;
}
.tv-hud {
  position: absolute; inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  user-select: none;
  color: #fff;
}
.tv-hud.is-on { opacity: 1; }
.tv-hud.is-on .tv-hud-back,
.tv-hud.is-on .tv-hud-dock { pointer-events: auto; }
.tv-hud-dim,
.tv-hud-shade {
  position: absolute; inset: 0;
  pointer-events: none;
}
.tv-hud-dim {
  background: rgba(0, 0, 0, 0.58);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.tv-player.is-paused .tv-hud-dim { opacity: 1; }
.tv-hud-shade {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.28) 38%, transparent 62%);
}
.tv-hud-back {
  position: absolute;
  top: calc(1.2rem + max(env(safe-area-inset-top, 0px), var(--pl-sat, 0px)));
  left: 2.2vw;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tv-hud-back:focus, .tv-hud-back.tv-focus {
  outline: none;
  box-shadow: 0 0 0 3px #fff;
  border-radius: 6px;
}
.tv-hud-dock {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  padding: 0 4vw calc(1.8rem + max(env(safe-area-inset-bottom, 0px), var(--pl-sab, 0px)));
}
.tv-hud-copy { max-width: 46rem; }
.tv-hud-kicker {
  margin: 0 0 0.28rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.tv-hud-title {
  margin: 0;
  font-family: "Julius Sans One", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2rem, 5.4vw, 3.7rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.tv-hud-ep {
  margin: 0.45rem 0 0;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.88);
}
.tv-hud-detail {
  display: none;
  margin-top: 0.85rem;
}
.tv-player.is-paused .tv-hud-detail { display: block; }
.tv-hud-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0;
  margin: 0 0 0.7rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
}
.tv-hud-facts span + span::before {
  content: "·";
  margin: 0 0.55rem;
  color: rgba(255, 255, 255, 0.45);
}
.tv-hud-plot:not([hidden]) {
  margin: 0 0 0.7rem;
  max-width: 40rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.98rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tv-hud-more {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}
.tv-hud-btns {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.tv-hud-btn {
  position: relative;
  flex: 0 0 auto;
  width: 3.15rem;
  height: 3.15rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tv-hud-play {
  width: 3.45rem;
  height: 3.45rem;
  border: 2px solid #fff;
}
.tv-hud-skip span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding-top: 0.28rem;
  pointer-events: none;
}
.tv-hud-btn:focus, .tv-hud-btn.tv-focus {
  outline: none;
  box-shadow: 0 0 0 3px #fff;
}
.tv-hud-cc {
  width: 3.15rem;
  height: 3.15rem;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}
.tv-hud-cc.is-on {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.tv-hud-cc.is-busy {
  opacity: 0.55;
}
.tv-hud-live {
  margin-left: 0.35rem;
  padding: 0.22rem 0.62rem;
  border-radius: 3px;
  background: #e50914;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tv-hud-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.tv-hud-now, .tv-hud-end {
  flex: 0 0 auto;
  min-width: 3.6rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.tv-hud-end { text-align: right; }
.tv-hud-seek {
  flex: 1 1 auto;
  min-width: 8rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.tv-hud-track {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.32);
  overflow: visible;
}
.tv-hud-seek:focus .tv-hud-track,
.tv-hud-seek.tv-focus .tv-hud-track { height: 6px; }
.tv-hud-buf,
.tv-hud-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: inherit;
  width: 0%;
  pointer-events: none;
}
.tv-hud-buf { background: rgba(255, 255, 255, 0.28); }
.tv-hud-fill { background: #fff; }
.tv-hud-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.tv-hud-seek:focus .tv-hud-knob,
.tv-hud-seek.tv-focus .tv-hud-knob {
  width: 18px;
  height: 18px;
}
.tv-player.is-live .tv-hud-skip,
.tv-player.is-live .tv-hud-bar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tv-nav, .tv-nav-label, .tv-nav .tv-brand {
    transition: none;
  }
  .tv-card, .tv-cat, .tv-ep, .tv-poster-frame, .tv-card-name {
    transition: none;
  }
  .tv-card:focus, .tv-card.tv-focus,
  .tv-cat:focus, .tv-cat.tv-focus,
  .tv-ep:focus, .tv-ep.tv-focus,
  .tv-play:focus, .tv-play.tv-focus,
  .tv-action:focus, .tv-action.tv-focus,
  .tv-title-ep:focus, .tv-title-ep.tv-focus,
  .tv-season-chip:focus, .tv-season-chip.tv-focus {
    transform: none;
  }
  .tv-hud, .tv-hud-dim { transition: none; }
  .tv-player-fade { display: none !important; }
  body.tv-app.tv-anim .tv-card.tv-focus .tv-poster-frame::after,
  body.tv-app.tv-anim .tv-card:focus .tv-poster-frame::after {
    animation: none;
    opacity: 0;
  }
  .tv-intro-beam, .tv-intro-source, .tv-intro-pool, .tv-intro-logo span {
    animation: none !important;
  }
  .tv-intro.is-play .tv-intro-beam,
  .tv-intro.is-play .tv-intro-source,
  .tv-intro.is-play .tv-intro-pool,
  .tv-intro.is-play .tv-intro-logo span { opacity: 1; transform: none; }
  .topbar { transition: none; }
  .side-menu { transition: none; }
}