/* ==========================================================================
   Swoopish TV
   A living-room interface that happens to run in a browser: heavy type,
   generous spacing, one green accent doing all the work.
   ========================================================================== */

:root {
  --bg:        #0a0d11;
  --bg-2:      #0e1218;
  --surface:   #141a22;
  --surface-2: #1b2330;
  --line:      #232d3a;
  --line-2:    #2f3b4b;

  --text:      #eef2f7;
  --muted:     #9aa5b4;
  --dim:       #64707f;

  --accent:    #4ec982;
  --accent-dk: #2f9a5f;
  --accent-gl: rgba(78, 201, 130, 0.18);
  --danger:    #e0685a;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --bar-h: 64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.hidden { display: none !important; }

/* ---------------------------------------------------------------- brand */

.brand {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  user-select: none;
}
.brand .a { color: var(--text); }
.brand .b { color: var(--accent); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--accent);
  color: #06120b;
  border: 0;
  border-radius: var(--r-sm);
  font-weight: 650;
  transition: background 0.15s, transform 0.1s;
}
.btn:hover { background: #5fd992; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; }

.btn.ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--line-2);
  font-weight: 500;
}
.btn.ghost:hover { background: rgba(255, 255, 255, 0.11); border-color: var(--dim); }

.btn.sm { padding: 8px 14px; font-size: 14px; }
.btn.ghost.sel { background: var(--accent); color: #06120b; border-color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- sign in */

.signin {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(78, 201, 130, 0.10), transparent 70%),
    var(--bg);
}

.signin-card { width: 100%; max-width: 380px; }
.signin-card .brand {
  font-size: 46px;
  justify-content: center;
  margin-bottom: 44px;
}
.signin-card h1 { font-size: 27px; font-weight: 650; margin: 0 0 6px; letter-spacing: -0.02em; text-align: center; }
.signin-card .sub { margin: 0 0 28px; color: var(--muted); font-size: 15px; text-align: center; }
.signin-card .btn { width: 100%; margin-top: 10px; padding: 14px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.msg {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--danger);
  background: var(--surface);
  font-size: 14px;
}

/* ---------------------------------------------------------------- shell */

#app { height: 100%; display: grid; grid-template-rows: var(--bar-h) 1fr; }

.topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  background: rgba(10, 13, 17, 0.92);
  border-bottom: 1px solid var(--line);
  z-index: 60;
}

.tabs { display: flex; gap: 4px; }

.tab {
  position: relative;
  padding: 9px 16px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s;
}
.tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.tab.sel { color: var(--accent); }
.tab.sel::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.searchwrap { position: relative; flex: 1 1 auto; max-width: 460px; margin-left: auto; }

.searchwrap input {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  transition: border-color 0.15s, background 0.15s;
}
.searchwrap input:focus { border-color: var(--accent); background: var(--surface-2); outline: none; }

.streams {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.streams b { color: var(--accent); font-weight: 650; }

.viewport { overflow: hidden; position: relative; min-height: 0; }

.page { height: 100%; overflow-y: auto; }
.page-pad { padding: 28px 34px 80px; }

.page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.page-head h1 { font-size: 26px; font-weight: 650; margin: 0; letter-spacing: -0.02em; }

.spinner-wrap { display: grid; place-items: center; padding: 80px 20px; }
.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.notice { padding: 60px 20px; text-align: center; color: var(--muted); }

/* ------------------------------------------------------- category chips */

.chips {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 3px 0 12px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 9px 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.15s;
}
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #06120b;
  font-weight: 600;
}
.chip .c { opacity: 0.65; font-size: 12px; margin-left: 5px; }

/* ------------------------------------------------------------ hero */

.hero {
  position: relative;
  min-height: 340px;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 30px;
  background: var(--surface);
  display: flex;
  align-items: flex-end;
}
.hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,13,17,0.96) 0%, rgba(10,13,17,0.75) 45%, rgba(10,13,17,0.25) 100%);
}
.hero-body { position: relative; padding: 34px; max-width: 620px; }
.hero-body h2 { font-size: 34px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.03em; line-height: 1.15; }
.hero-meta { display: flex; gap: 14px; color: var(--muted); font-size: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.hero-plot {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------ rows */

.shelf { margin-bottom: 34px; }

.shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 13px;
}
.shelf-head h3 { font-size: 19px; font-weight: 620; margin: 0; letter-spacing: -0.01em; }
.shelf-head .more { background: none; border: 0; color: var(--muted); font-size: 14px; }
.shelf-head .more:hover { color: var(--accent); }

/* Rows scroll without a scrollbar. The fade at each edge is what signals
   there's more, and arrows appear for anyone using a mouse. */
.rail-wrap { position: relative; }

.rail-wrap::before,
.rail-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 10px;
  width: 56px;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.2s;
}
.rail-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 10%, transparent);
}
.rail-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 10%, transparent);
}
.rail-wrap.at-start::before,
.rail-wrap.at-end::after,
.rail-wrap.no-scroll::before,
.rail-wrap.no-scroll::after { opacity: 0; }

.rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.rail::-webkit-scrollbar { display: none; }

/* Touch devices swipe, so the arrows would only be in the way. */
@media (hover: none) {
}

.card {
  flex: 0 0 168px;
  scroll-snap-align: start;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  transition: transform 0.18s;
}
.card:hover { transform: translateY(-4px); }

.poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card:hover .poster { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-gl); }

.poster .fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  font-size: 13px;
  color: var(--dim);
  text-align: center;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  background: rgba(10, 13, 17, 0.85);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  color: var(--accent);
}

.card-title {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 20px 14px;
}
.grid .card { flex: none; }

/* ------------------------------------------------------ channel list */

.chan-list { display: flex; flex-direction: column; }

.chan {
  display: grid;
  grid-template-columns: 74px 46px 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 0 12px;
  height: 62px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  color: var(--text);
  transition: background 0.12s;
}
.chan:hover { background: var(--surface); }

.chan .num {
  font-size: 25px;
  font-weight: 300;
  color: var(--dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.chan:hover .num { color: var(--accent); }

.chan .logo { width: 46px; height: 36px; object-fit: contain; }
.chan .info { min-width: 0; }
.chan .nm { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan .now { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.star {
  background: none;
  border: 0;
  color: var(--dim);
  font-size: 19px;
  padding: 6px 9px;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
}
.star:hover { color: var(--accent); transform: scale(1.15); }
.star.on { color: var(--accent); }

/* ------------------------------------------------------------ guide */

.guide-wrap {
  --chan-w: 300px;
  --slot-w: 300px;
  --slot-min: 210px;
  --row-h: 86px;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 0;
}

.guide-info {
  display: flex;
  gap: 18px;
  padding: 18px 24px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border-bottom: 1px solid var(--line);
  min-height: 118px;
}
.guide-info .thumb {
  width: 78px;
  height: 60px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.guide-info .txt { min-width: 0; flex: 1 1 auto; }
.guide-info h2 { font-size: 21px; font-weight: 650; margin: 0 0 3px; letter-spacing: -0.01em; }
.guide-info .sub { font-size: 13.5px; color: var(--accent); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.guide-info p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.guide-info .acts { display: flex; align-items: flex-start; gap: 8px; }

.guide-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  flex-wrap: wrap;
}
.guide-bar select {
  padding: 8px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  max-width: 230px;
}
.guide-bar .when {
  margin-left: auto;
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.guide-scroll {
  overflow: auto;
  min-height: 0;
  position: relative;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.guide-inner { position: relative; }

.ruler {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  height: 44px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.ruler .corner {
  position: sticky;
  left: 0;
  z-index: 31;
  flex: 0 0 var(--chan-w);
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 550;
}
.ruler .slot {
  flex: 0 0 var(--slot-w);
  border-left: 1px solid var(--line);
  padding: 13px 0 0 12px;
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.grow { display: flex; height: var(--row-h); border-bottom: 1px solid var(--line); }
.grow:hover .gchan { background: var(--surface-2); }

.gchan {
  position: sticky;
  left: 0;
  z-index: 20;
  flex: 0 0 var(--chan-w);
  display: grid;
  grid-template-columns: 52px 46px 1fr 30px;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow: hidden;
  transition: background 0.12s;
}
.gchan .n {
  font-size: 26px;
  font-weight: 300;
  color: var(--dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gchan.on .n { color: var(--accent); }
.gchan img { width: 46px; height: 34px; object-fit: contain; }
.gchan .nm {
  font-size: 14px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gchan .star { font-size: 15px; padding: 4px; }

.gslots { position: relative; flex: 1 1 auto; }

.gprog {
  position: absolute;
  top: 5px;
  bottom: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 11px;
  overflow: hidden;
  text-align: left;
  color: var(--text);
  transition: background 0.12s, border-color 0.12s;
}
.gprog:hover { background: var(--surface-2); border-color: var(--line-2); }
.gprog.live { border-color: var(--accent-dk); background: rgba(78, 201, 130, 0.08); }
.gprog.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-gl); }

.gprog .pt {
  font-size: 14.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gprog .pw { font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; margin-top: 2px; }

.gempty {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  display: flex;
  align-items: center;
  padding-left: 11px;
  font-size: 12.5px;
  color: var(--dim);
}

.nowline {
  position: absolute;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  z-index: 25;
  pointer-events: none;
}
.nowline::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* ------------------------------------------------------------ detail */

.detail-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  padding: 34px;
  margin: -28px -34px 26px;
}
.detail-hero .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
.detail-hero .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--bg) 4%, rgba(10,13,17,0.7) 50%, rgba(10,13,17,0.35) 100%);
}
.detail-body { position: relative; display: flex; gap: 28px; width: 100%; }

.detail-poster {
  flex: 0 0 190px;
  aspect-ratio: 2 / 3;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
}
.detail-poster img { width: 100%; height: 100%; object-fit: cover; }

.detail-txt { flex: 1 1 auto; min-width: 0; }
.detail-txt h1 { font-size: 33px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.03em; line-height: 1.12; }

.meta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.meta-row .pill {
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12.5px;
}
.meta-row .score { color: var(--accent); font-weight: 650; }

.detail-plot { font-size: 15px; color: var(--muted); max-width: 720px; margin: 0 0 20px; }

.credits { font-size: 13.5px; color: var(--dim); margin-bottom: 20px; }
.credits b { color: var(--muted); font-weight: 550; }

.season-picker { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 18px; padding-bottom: 4px; }

.episode {
  display: flex;
  gap: 15px;
  padding: 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 10px;
  text-align: left;
  width: 100%;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.episode:hover { border-color: var(--accent); background: var(--surface-2); }
.episode .still {
  flex: 0 0 132px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--surface-2);
}
.episode .etitle { font-size: 15px; font-weight: 550; margin-bottom: 4px; }
.episode .eplot {
  font-size: 13.5px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.episode .enum { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ player */

.player-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  flex-direction: column;
}

.player-layer video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.player-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0.85), transparent);
  z-index: 5;
  transition: opacity 0.3s;
}
.player-layer.idle .player-top { opacity: 0; pointer-events: none; }

.player-top .pnum {
  font-size: 27px;
  font-weight: 300;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.player-top .ptitle { font-size: 17px; font-weight: 600; }
.player-top .psub { font-size: 13px; color: var(--muted); }
.player-top .spacer { flex: 1 1 auto; }

.player-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 4;
}
.player-status .box {
  background: rgba(10, 13, 17, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 26px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  pointer-events: auto;
}
.player-status .box.err { border-color: var(--danger); color: var(--text); }

/* ------------------------------------------------------- number jump */

.jump {
  position: fixed;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  padding: 20px 40px;
  background: rgba(10, 13, 17, 0.95);
  border: 2px solid var(--accent);
  border-radius: var(--r);
  font-size: 54px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  z-index: 300;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  padding: 13px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-size: 14px;
  z-index: 400;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------ dialog */

dialog {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  padding: 26px;
  max-width: 440px;
  width: calc(100% - 32px);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
dialog h2 { margin: 0 0 5px; font-size: 20px; font-weight: 650; }
dialog .dsub { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.dialog-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 14px; }

/* ------------------------------------------------------- search page */

.search-section { margin-bottom: 32px; }
.search-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 14px;
}

/* ------------------------------------------------------------ mobile */

@media (max-width: 900px) {
  :root { --bar-h: 56px; }
  .signin-card .brand { font-size: 34px; margin-bottom: 32px; }

  .topbar { gap: 12px; padding: 0 14px; }
  .brand { font-size: 16px; }
  .tab { padding: 8px 11px; font-size: 14px; }
  .streams { display: none; }
  .searchwrap { max-width: none; }

  .page-pad { padding: 18px 16px 70px; }
  .page-head h1 { font-size: 21px; }

  .guide-wrap { --chan-w: 140px; --slot-w: 180px; --slot-min: 150px; --row-h: 68px; }
  .guide-info { padding: 14px 16px; min-height: 0; }
  .guide-info .thumb { display: none; }
  .guide-info h2 { font-size: 17px; }
  .guide-bar { padding: 10px 14px; }
  .guide-bar .when { display: none; }
  .gchan { grid-template-columns: 34px 1fr; gap: 7px; padding: 0 9px; }
  .gchan img, .gchan .star { display: none; }

  .card { flex: 0 0 124px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 16px 10px; }

  .hero { min-height: 260px; }
  .hero-body { padding: 20px; }
  .hero-body h2 { font-size: 24px; }

  .detail-hero { min-height: 300px; padding: 20px; margin: -18px -16px 20px; }
  .detail-body { flex-direction: column; gap: 16px; }
  .detail-poster { flex: 0 0 auto; width: 128px; }
  .detail-txt h1 { font-size: 24px; }

  .episode .still { flex: 0 0 100px; }
  .chan { grid-template-columns: 56px 38px 1fr auto; gap: 11px; }
  .chan .num { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------- account menu */

.account { position: relative; }

.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 216px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 6px;
  z-index: 90;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.menu-item {
  display: block;
  width: 100%;
  padding: 10px 13px;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  text-align: left;
  font-size: 14.5px;
  color: var(--text);
  transition: background 0.12s;
}
.menu-item:hover { background: var(--surface-2); color: var(--accent); }

.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* --------------------------------------------------- progress on cards */

.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.55);
}
.progress span { display: block; height: 100%; background: var(--accent); }

.watched-tick {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #06120b;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.episode.done { opacity: 0.62; }
.episode.done .etitle::after {
  content: " \2713";
  color: var(--accent);
  font-weight: 700;
}

.ep-actions { display: flex; gap: 8px; margin-top: 8px; }
.ep-bar { height: 3px; background: var(--line); border-radius: 2px; margin-top: 8px; }
.ep-bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

/* ------------------------------------------------------------- help */

.help-body { max-width: 720px; }
.help-body h2 { font-size: 20px; font-weight: 620; margin: 28px 0 10px; }
.help-body p { color: var(--muted); margin: 0 0 12px; }
.help-body ol, .help-body ul { color: var(--muted); padding-left: 20px; margin: 0 0 14px; }
.help-body li { margin-bottom: 7px; }
.help-body code {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 13.5px;
}

@media (max-width: 900px) {
  .menu { right: -8px; min-width: 200px; }
}

.expired-bar {
  padding: 12px 22px;
  background: rgba(224, 104, 90, 0.12);
  border-bottom: 1px solid var(--danger);
  color: var(--text);
  font-size: 14px;
}

/* ---------------------------------------------------------- profiles */

.picker {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(78, 201, 130, 0.10), transparent 70%),
    var(--bg);
}
.picker.hidden { display: none; }

.picker-inner { text-align: center; max-width: 760px; width: 100%; }
.picker-inner .brand { justify-content: center; font-size: 30px; margin-bottom: 40px; }
.picker-inner h1 { font-size: 27px; font-weight: 650; margin: 0 0 30px; letter-spacing: -0.02em; }

.picker-grid {
  display: flex;
  gap: 26px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.picker-sub {
  color: var(--muted);
  font-size: 15px;
  margin: -20px 0 32px;
}

.who { width: 128px; position: relative; }

.who-btn {
  background: none;
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
  transition: transform 0.15s;
}
.who-btn:hover { transform: translateY(-4px); }

.who .face {
  width: 118px;
  height: 118px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 42px;
  font-weight: 700;
  color: #06120b;
  border: 3px solid transparent;
  transition: border-color 0.15s;
}
.who-btn:hover .face { border-color: var(--text); }
.who.current .face { border-color: var(--accent); }

.who .who-name {
  margin-top: 11px;
  font-size: 15px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who-btn:hover + .who-name, .who.current .who-name { color: var(--text); }

.who-badge {
  display: block;
  font-size: 12px;
  color: var(--accent);
  margin-top: 2px;
}

.who-edit {
  display: none;
  margin: 8px auto 0;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
}
.picker.editing .who-edit { display: block; }
.picker.editing .who.add { opacity: 0.4; pointer-events: none; }

.who.add .face {
  background: none;
  border: 2px dashed var(--line-2);
  color: var(--dim);
  font-size: 40px;
  font-weight: 300;
}
.who.add:hover .face { border-color: var(--accent); color: var(--accent); }

.who .kid-tag {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--accent);
}

.colour-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.swatch {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 3px solid transparent;
  cursor: pointer;
}
.swatch.sel { border-color: var(--text); }

.profile-chip {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #06120b;
  margin-right: 8px;
}

@media (max-width: 900px) {
  .who { width: 96px; }
  .who .face { width: 88px; height: 88px; font-size: 32px; }
  .picker-grid { gap: 18px; }
}

.picker-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------- cast */

.cast-card {
  flex: 0 0 116px;
  width: 116px;
  text-align: center;
  overflow: hidden;
}

.cast-face {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 600;
  color: var(--dim);
}
.cast-face img { width: 100%; height: 100%; object-fit: cover; }

.cast-name {
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.3;
  max-width: 116px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cast-role {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.3;
  max-width: 116px;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .cast-card { flex: 0 0 88px; width: 88px; }
  .cast-face { width: 88px; height: 88px; font-size: 26px; }
  .cast-name, .cast-role { max-width: 88px; font-size: 12.5px; }
  .cast-role { font-size: 11.5px; }
}

/* ------------------------------------------------------------ splash */

.splash {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background:
    radial-gradient(65% 50% at 50% 50%, rgba(78, 201, 130, 0.10), transparent 70%),
    var(--bg);
}
.splash.hidden { display: none; }

.splash-mark {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: clamp(38px, 9vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.splash-word {
  opacity: 0;
  transform: translateX(-46vw) scale(0.86);
  filter: blur(6px);
}

.splash-dot {
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translateY(-90px);
}

/* Runs once on entry: the word slides in, then the dot drops beside it. */
.splash.run .splash-word {
  animation: word-in 660ms cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
}
.splash.run .splash-dot {
  animation: dot-drop 380ms cubic-bezier(0.6, 0, 0.4, 1.5) 560ms forwards;
}
.splash.leaving { animation: splash-out 260ms ease forwards; }

@keyframes word-in {
  0%   { opacity: 0; transform: translateX(-46vw) scale(0.86); filter: blur(6px); }
  55%  { opacity: 1; filter: blur(0); }
  78%  { transform: translateX(14px) scale(1.03); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@keyframes dot-drop {
  0%   { opacity: 0; transform: translateY(-90px); }
  70%  { opacity: 1; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes splash-out {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .splash.run .splash-word,
  .splash.run .splash-dot { animation: none; opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- install */

.install-steps { counter-reset: step; }
.install-steps li { margin-bottom: 10px; }

/* ==========================================================================
   Small screens
   Phones and tablets get their own sizing rather than a squeezed desktop
   layout. Nothing should overflow sideways or shift as images load.
   ========================================================================== */

img { max-width: 100%; }

/* Reserve the space an image will occupy so nothing jumps when it loads. */
.poster, .cast-face, .detail-poster { background: var(--surface-2); }

@media (max-width: 700px) {
  .topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand search account" "tabs tabs tabs";
    gap: 8px 10px;
    padding: 8px 12px 0;
    height: auto;
  }
  #app { grid-template-rows: auto 1fr; }

  .topbar .brand { grid-area: brand; }
  .searchwrap { grid-area: search; margin: 0; }
  .account { grid-area: account; }
  .tabs {
    grid-area: tabs;
    justify-content: space-around;
    border-top: 1px solid var(--line);
    margin: 4px -12px 0;
    padding: 0 6px;
  }
  .tab { flex: 1; text-align: center; padding: 11px 6px; }
  .tab.sel::after { left: 20%; right: 20%; }

  #account-name { display: none; }
  .account .btn { padding: 8px 10px; }

  .searchwrap input { padding: 9px 12px; font-size: 15px; }

  .page-pad { padding: 14px 12px 64px; }
  .page-head { gap: 8px; }
  .page-head h1 { font-size: 20px; width: 100%; }
  .page-head select, .page-head .btn { font-size: 13px; padding: 7px 10px; }

  .hero { min-height: 210px; border-radius: 12px; }
  .hero-body { padding: 16px; }
  .hero-body h2 { font-size: 20px; }
  .hero-plot { -webkit-line-clamp: 2; font-size: 14px; }

  .shelf { margin-bottom: 26px; }
  .shelf-head h3 { font-size: 16px; }
  .rail { gap: 10px; }
  .card { flex: 0 0 108px; }
  .card-title { font-size: 12.5px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 14px 8px; }

  .detail-hero { min-height: 0; padding: 16px 12px; margin: -14px -12px 18px; }
  .detail-body { gap: 14px; }
  .detail-poster { width: 108px; }
  .detail-txt h1 { font-size: 21px; }
  .detail-plot { font-size: 14px; }
  .meta-row { gap: 8px; font-size: 13px; }

  .episode { padding: 10px; gap: 10px; }
  .episode .still { flex: 0 0 84px; }
  .episode .etitle { font-size: 14px; }

  dialog { padding: 18px; border-radius: 12px; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions .btn { flex: 1; }

  .jump { font-size: 40px; padding: 14px 28px; }
  .toast { left: 12px; right: 12px; transform: none; text-align: center; }

  .guide-info .acts { flex-direction: column; }
  .guide-info .acts .btn { padding: 8px 12px; font-size: 13px; }
}

@media (max-width: 420px) {
  .card { flex: 0 0 96px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .who { width: 92px; }
  .who .face { width: 84px; height: 84px; font-size: 30px; }
  .brand { font-size: 15px; }
}

/* Tablets: roomier than a phone, tighter than a desktop. */
@media (min-width: 701px) and (max-width: 1100px) {
  .card { flex: 0 0 140px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .detail-poster { flex: 0 0 150px; }
  .page-pad { padding: 20px 20px 70px; }
}

/* Landscape phones: the player should keep the whole screen. */
@media (max-height: 480px) and (orientation: landscape) {
  .player-top { padding: 10px 14px; }
  .player-top .pnum { font-size: 20px; }
}

/* Installed as an app: allow for the notch and home indicator. */
@media (display-mode: standalone) {
  .topbar { padding-top: max(8px, env(safe-area-inset-top)); }
  .page-pad { padding-bottom: max(64px, env(safe-area-inset-bottom)); }
}

/* -------------------------------------------------------------- help */

.help-body { max-width: 760px; }

.help-section {
  padding: 22px 0 6px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.help-section:first-child { border-top: 0; padding-top: 6px; }

.help-body h2 {
  font-size: 19px;
  font-weight: 620;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.help-body p { color: var(--muted); margin: 0 0 12px; line-height: 1.65; }
.help-body ul, .help-body ol { color: var(--muted); padding-left: 20px; margin: 0 0 14px; }
.help-body li { margin-bottom: 7px; line-height: 1.6; }
.help-body b { color: var(--text); font-weight: 550; }
.help-body code {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 13.5px;
  word-break: break-all;
}

@media (max-width: 700px) {
  .help-section { padding: 18px 0 4px; scroll-margin-top: 120px; }
  .help-body h2 { font-size: 17px; }
  .help-body p, .help-body li { font-size: 14.5px; }
}

/* ----------------------------------------------------------- trailer */

.trailer-layer {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.86);
}

.trailer-frame {
  width: min(1100px, 100%);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
}

.trailer-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.trailer-title {
  font-size: 15px;
  font-weight: 550;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trailer-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

@media (max-width: 700px) {
  .trailer-layer { padding: 12px; }
  .trailer-frame { border-radius: 10px; }
}

/* -------------------------------------------------------- view switch */

.viewswitch {
  display: inline-flex;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.viewswitch-btn {
  padding: 8px 18px;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.viewswitch-btn:hover { color: var(--text); }
.viewswitch-btn.sel {
  background: var(--accent);
  color: #06120b;
  font-weight: 620;
}

@media (max-width: 700px) {
  .viewswitch { width: 100%; }
  .viewswitch-btn { flex: 1; padding: 9px 10px; font-size: 13.5px; }
}

/* ==========================================================================
   Form controls
   Native selects and inputs look like the operating system, not like this
   site. These are restyled to match, including the dropdown arrow.
   ========================================================================== */

select {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 34px 9px 14px;
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
select:hover { border-color: var(--line-2); background-color: var(--surface-2); }
select:focus {
  outline: none;
  border-color: var(--accent);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
}

/* The open list is drawn by the operating system, so at least make its
   colours match rather than flashing white. */
select option {
  background: var(--surface);
  color: var(--text);
  padding: 8px;
}

input[type="text"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
/* Sliders and checkboxes draw their own backgrounds, so the text-field
   focus styling must not reach them: it was flattening the volume gradient
   the moment the slider was clicked. */
input:not([type="range"]):not([type="checkbox"]):hover,
textarea:hover { border-color: var(--line-2); }

input:not([type="range"]):not([type="checkbox"]):focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}
input::placeholder, textarea::placeholder { color: var(--dim); }

/* Number spinners and the date picker icon are grey blobs by default. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(3) hue-rotate(90deg);
  cursor: pointer;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  background: var(--dim);
  mask: linear-gradient(45deg, transparent 44%, #000 44% 56%, transparent 56%),
        linear-gradient(-45deg, transparent 44%, #000 44% 56%, transparent 56%);
  cursor: pointer;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--surface);
  vertical-align: -4px;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  background-image: linear-gradient(45deg, transparent 52%, #06120b 52%);
}

.field input, .field textarea, .field select { width: 100%; }
.field select { border-radius: var(--r-sm); }

/* ==========================================================================
   Loading
   The wordmark in miniature: an s, then the dot dropping beside it.
   ========================================================================== */

.spinner-wrap { display: grid; place-items: center; padding: 70px 20px; }

.loader {
  position: relative;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
}

/* The ring keeps turning for as long as loading takes, so it still reads as
   busy after the mark has settled. */
.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(78, 201, 130, 0.12) 140deg,
    rgba(78, 201, 130, 0.55) 250deg,
    var(--accent) 320deg,
    transparent 360deg
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  filter: drop-shadow(0 0 7px rgba(78, 201, 130, 0.45));
  animation: ring-spin 1.15s linear infinite;
}

.loader-mark {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* The s arrives once and stays put. */
.loader-s {
  opacity: 0;
  transform: translateX(-26px);
  animation: s-arrive 520ms cubic-bezier(0.18, 0.9, 0.3, 1) forwards;
}

/* The dot drops in and bounces itself to a stop, each bounce lower. */
.loader-dot {
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(78, 201, 130, 0.65);
  opacity: 0;
  animation: dot-settle 1.55s cubic-bezier(0.34, 0, 0.5, 1) 380ms forwards;
}

@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes s-arrive {
  0%   { opacity: 0; transform: translateX(-26px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes dot-settle {
  0%   { opacity: 0; transform: translateY(-42px); }
  12%  { opacity: 1; transform: translateY(0); }
  30%  { transform: translateY(-22px); }
  46%  { transform: translateY(0); }
  60%  { transform: translateY(-11px); }
  72%  { transform: translateY(0); }
  82%  { transform: translateY(-5px); }
  90%  { transform: translateY(0); }
  95%  { transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .loader-ring { animation-duration: 2.4s; }
  .loader-s, .loader-dot { animation: none; opacity: 1; transform: none; }
}

/* ------------------------------------------------- guide favourites band */

.gband {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  height: 34px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.gband-label {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-2);
  white-space: nowrap;
  z-index: 21;
}
.gband-label span {
  color: var(--dim);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ------------------------------------------------------- guide mark */

.guide-info .thumb.mark {
  width: auto;
  height: auto;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 3px;
  padding: 0 6px 0 0;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  background: none;
  border: 0;
}
.guide-info .thumb.mark .mark-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

/* --------------------------------------------------- favorites page */

.fav-card { position: relative; }
.fav-card .poster { position: relative; }

.fav-open {
  position: absolute;
  inset: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.fav-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(10, 13, 17, 0.85);
  border: 1px solid var(--line-2);
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
  z-index: 2;
  transition: background 0.15s, transform 0.15s;
}
.fav-remove:hover { background: var(--danger); color: #fff; transform: scale(1.08); }

/* ==========================================================================
   Row headings
   A green bar that fades out along the title gives each row a clear start
   and stops the page reading as one long wall of posters.
   ========================================================================== */

.shelf-head {
  position: relative;
  align-items: center;
  gap: 14px;
  padding: 0 0 0 15px;
  margin-bottom: 15px;
}

.shelf-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), rgba(78, 201, 130, 0.15));
}

.shelf-head h3 {
  position: relative;
  font-size: 20px;
  font-weight: 640;
  padding-bottom: 7px;
  flex: 0 0 auto;
}

/* The line runs under the title and fades away to the right. */
.shelf-head h3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(78, 201, 130, 0.35) 45%, transparent);
}

.shelf-head .more { margin-left: auto; flex: 0 0 auto; }

.search-section h3,
.help-body h2 {
  position: relative;
  padding-left: 15px;
}
.search-section h3::before,
.help-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), rgba(78, 201, 130, 0.15));
}

/* ==========================================================================
   Poster sizing
   Bigger than before so artwork is readable and easy to hit on a touch
   screen, without so few per row that browsing becomes scrolling.
   ========================================================================== */

.card { flex: 0 0 190px; }
.grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 26px 18px; }
.rail { gap: 18px; }
.card-title { font-size: 14.5px; margin-top: 11px; }
.poster { border-radius: 12px; }
.card:hover { transform: translateY(-6px); }

/* Very wide screens get slightly larger art rather than more of it. */
@media (min-width: 1700px) {
  .card { flex: 0 0 214px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (min-width: 1101px) and (max-width: 1400px) {
  .card { flex: 0 0 172px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(162px, 1fr)); }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .card { flex: 0 0 158px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 22px 14px; }
  .rail { gap: 14px; }
}

@media (max-width: 700px) {
  .shelf-head { padding-left: 12px; margin-bottom: 12px; }
  .shelf-head h3 { font-size: 17px; }

  .card { flex: 0 0 136px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 18px 12px; }
  .rail { gap: 12px; }
  .card-title { font-size: 13px; margin-top: 8px; }
  .poster { border-radius: 10px; }
}

@media (max-width: 420px) {
  .card { flex: 0 0 122px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 16px 10px; }
}

/* ==========================================================================
   Favoriting, in motion
   Starring something moves it up to the favorites row and closes the gap it
   left behind, without reloading or losing your place.
   ========================================================================== */

.card-star {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(10, 13, 17, 0.72);
  border: 1px solid var(--line-2);
  color: var(--dim);
  font-size: 15px;
  line-height: 1;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s, transform 0.15s;
}
.card:hover .card-star,
.card-star.on { opacity: 1; }
.card-star:hover { background: rgba(10, 13, 17, 0.92); transform: scale(1.1); }
.card-star.on { color: var(--accent); border-color: var(--accent-dk); }

/* Touch screens have no hover, so the star is always there. */
@media (hover: none) {
  .card-star { opacity: 1; }
}

.card-leaving {
  animation: card-leave 280ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
  pointer-events: none;
}
@keyframes card-leave {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  35%  { opacity: 0.7; transform: translateY(-16px) scale(0.96); }
  100% { opacity: 0; transform: translateY(-26px) scale(0.9); width: 0; margin-right: -18px; }
}

.card-arriving { opacity: 0; transform: translateY(18px) scale(0.92); }
.card { transition: transform 0.18s, opacity 0.24s; }

/* Guide and channel rows use the same idea. */
.row-promote {
  animation: row-promote 260ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
  pointer-events: none;
}
.row-demote {
  animation: row-demote 240ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
  pointer-events: none;
}
@keyframes row-promote {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-22px); }
}
@keyframes row-demote {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(22px); }
}

/* A brief highlight so the eye can find where it went. */
.row-landed { animation: row-landed 900ms ease forwards; }
@keyframes row-landed {
  0%   { background: rgba(78, 201, 130, 0.22); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .card-leaving, .row-promote, .row-demote, .row-landed { animation-duration: 1ms; }
}

/* ==========================================================================
   Spotlight
   ========================================================================== */

.spot {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 34px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(78, 201, 130, 0.16), 0 0 46px rgba(78, 201, 130, 0.09);
}

.spot-loading { height: 380px; background: var(--surface); }

@keyframes spot-in {
  from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 34px)); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes spot-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.spot-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.spot-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 13, 17, 0.97) 0%, rgba(10, 13, 17, 0.82) 42%, rgba(10, 13, 17, 0.15) 78%),
    linear-gradient(0deg, rgba(10, 13, 17, 0.9) 0%, transparent 45%);
}

.spot-flag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 5px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(78, 201, 130, 0.14);
  border: 1px solid var(--accent-dk);
  color: var(--accent);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spot-tagline {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 15px;
  font-style: italic;
}

.spot-meta {
  display: flex;
  gap: 11px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--muted);
}
.spot-meta .score { color: var(--accent); font-weight: 650; }
.spot-meta .pill {
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12.5px;
}

.spot-plot {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.spot-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.spot-dots {
  position: absolute;
  bottom: 16px;
  right: 22px;
  display: flex;
  gap: 7px;
  z-index: 4;
}
.spot-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.2s, width 0.2s;
}
.spot-dot.on { background: var(--accent); width: 22px; border-radius: 999px; }

@media (hover: none) { }

@media (max-width: 900px) {
  .spot-shade {
    background:
      linear-gradient(0deg, rgba(10, 13, 17, 0.97) 20%, rgba(10, 13, 17, 0.55) 60%, rgba(10, 13, 17, 0.2) 100%);
  }
  .spot-plot { -webkit-line-clamp: 2; font-size: 14px; }
}

/* ==========================================================================
   Recently watched strip
   ========================================================================== */

.watched-strip { margin-bottom: 30px; }

.watched-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.watched-rail::-webkit-scrollbar { display: none; }

.watched-tile {
  position: relative;
  flex: 0 0 74px;
  width: 74px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 0;
  transition: transform 0.15s, border-color 0.15s;
}
.watched-tile:hover { transform: translateY(-3px); border-color: var(--accent); }
.watched-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.watched-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6px;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--dim);
  text-align: center;
}

.watched-check {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  color: #06120b;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

@media (max-width: 700px) {
  .watched-tile { flex: 0 0 62px; width: 62px; }
}

/* ==========================================================================
   Card tools and My stuff
   ========================================================================== */

.card-tools {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.15s;
}
.card:hover .card-tools { opacity: 1; }
@media (hover: none) { .card-tools { opacity: 1; } }

.card-tool {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(10, 13, 17, 0.82);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.card-tool:hover { background: var(--accent); color: #06120b; transform: scale(1.1); }
.card-tool:last-child:hover { background: var(--danger); color: #fff; }

.my-section { margin-bottom: 42px; }

.my-head { margin-bottom: 16px; }
.my-head h3 {
  position: relative;
  font-size: 19px;
  font-weight: 640;
  margin: 0 0 4px;
  padding-left: 15px;
}
.my-head h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), rgba(78, 201, 130, 0.15));
}
.my-head p { margin: 0 0 0 15px; color: var(--dim); font-size: 13.5px; }

.manage-card { position: relative; }
.manage-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.manage-actions .btn { flex: 1; padding: 6px 8px; font-size: 12px; }
.btn.ghost.danger:hover { border-color: var(--danger); color: var(--danger); }

@media (max-width: 900px) {
}

/* ==========================================================================
   Row outline
   Hovering an arrow draws a thin line around the row it will move, so it's
   obvious what's about to scroll. Using it pulses that outline.
   ========================================================================== */

.rail-wrap {
  border-radius: 14px;
  transition: box-shadow 0.2s;
}

@keyframes rail-pulse {
  0%   { box-shadow: 0 0 0 1px rgba(78, 201, 130, 0.85), 0 0 0 0 rgba(78, 201, 130, 0.4); }
  70%  { box-shadow: 0 0 0 1px rgba(78, 201, 130, 0.5), 0 0 0 10px rgba(78, 201, 130, 0); }
  100% { box-shadow: 0 0 0 1px rgba(78, 201, 130, 0); }
}

@media (max-width: 900px) {
}

@media (max-width: 560px) {
}

/* ==========================================================================
   Player
   Our own controls rather than the browser's, so it looks like part of
   Swoopish. They fade with the rest of the chrome when nothing is happening.
   ========================================================================== */

.player-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 22px 18px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 30%, transparent);
  z-index: 5;
  transition: opacity 0.3s, transform 0.3s;
}
.player-layer.idle .player-bar {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.player-scrub {
  position: relative;
  height: 5px;
  margin-bottom: 14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.player-scrub::before {
  content: "";
  position: absolute;
  inset: -9px 0;
}
.player-scrub.hidden { display: none; }

.player-buffered,
.player-played {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 3px;
}
.player-buffered { background: rgba(255, 255, 255, 0.26); width: 0; }
.player-played { background: var(--accent); width: 0; }

.player-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(78, 201, 130, 0.7);
  transform: scale(0);
  transition: transform 0.15s;
}
.player-scrub:hover .player-knob { transform: scale(1); }

.player-row { display: flex; align-items: center; gap: 12px; }
.player-spacer { flex: 1 1 auto; }

.player-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  transition: background 0.15s, color 0.15s, transform 0.12s;
}
.player-btn:hover { background: rgba(255, 255, 255, 0.16); color: var(--accent); }
.player-btn:active { transform: scale(0.94); }
.player-btn.hidden { display: none; }
.player-btn.subs.on { background: var(--accent); color: #06120b; }

/* Play and pause drawn rather than typed, so they're crisp. */
.player-btn.play::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 13px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 3px;
}
.player-btn.play.playing::before {
  width: 13px;
  height: 15px;
  border: 0;
  margin: 0;
  background: currentColor;
  -webkit-mask: linear-gradient(#000 0 0) left / 4px 100% no-repeat,
                linear-gradient(#000 0 0) right / 4px 100% no-repeat;
  mask: linear-gradient(#000 0 0) left / 4px 100% no-repeat,
        linear-gradient(#000 0 0) right / 4px 100% no-repeat;
}

/* Speaker icon, and a slash across it when muted. */
.player-btn::after { content: none; }
.player-btn[aria-label="Mute"]::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a6.8 6.8 0 0 1 0 13.4v2.1a8.9 8.9 0 0 0 0-17.6z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a6.8 6.8 0 0 1 0 13.4v2.1a8.9 8.9 0 0 0 0-17.6z"/></svg>') center / contain no-repeat;
}
.player-btn.muted::before {
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 9v6h4l5 4V5L8 9H4zM19.7 12l2.1-2.1-1.4-1.4-2.1 2.1-2.1-2.1-1.4 1.4 2.1 2.1-2.1 2.1 1.4 1.4 2.1-2.1 2.1 2.1 1.4-1.4z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 9v6h4l5 4V5L8 9H4zM19.7 12l2.1-2.1-1.4-1.4-2.1 2.1-2.1-2.1-1.4 1.4 2.1 2.1-2.1 2.1 1.4 1.4 2.1-2.1 2.1 2.1 1.4-1.4z"/></svg>') center / contain no-repeat;
  color: var(--danger);
}

.player-time {
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.player-time.live {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-weight: 600;
}
.player-time.live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* The mark, sitting quietly in the corner. */
.player-mark {
  position: absolute;
  top: 20px;
  right: 24px;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.5);
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s;
}
.player-mark-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}
.player-layer.idle .player-mark { opacity: 0.28; }

video::cue {
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 1.05em;
  line-height: 1.35;
}

@media (max-width: 700px) {
  .player-bar { padding: 34px 12px 14px; }
  .player-row { gap: 8px; }
  .player-btn { width: 36px; height: 36px; font-size: 15px; }
  .player-time { font-size: 12.5px; }
  .player-mark { top: 14px; right: 14px; font-size: 18px; }
}

@media (max-width: 460px) {
}

/* ==========================================================================
   Row arrows, corrected
   They were spanning the whole row including the titles underneath, which
   left them sitting high and looking lopsided. Now they centre on the
   artwork itself and stop above the captions.
   ========================================================================== */

.rail-wrap { padding-bottom: 0; }
.rail { padding-bottom: 4px; }

@keyframes rail-edge {
  0%   { border-color: rgba(78, 201, 130, 0.95); box-shadow: 0 0 0 0 rgba(78, 201, 130, 0.35); }
  70%  { border-color: rgba(78, 201, 130, 0.5); box-shadow: 0 0 0 9px rgba(78, 201, 130, 0); }
  100% { border-color: rgba(78, 201, 130, 0); box-shadow: none; }
}

@media (max-width: 700px) {
}

/* ------------------------------------------------------------- TBW */

.tbw-wrap { display: inline-flex; align-items: center; gap: 5px; }

.tbw-hint {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: none;
  color: var(--dim);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  transition: color 0.15s, border-color 0.15s;
}
.tbw-hint:hover { color: var(--accent); border-color: var(--accent); }

/* A star on any poster that's also a favorite. */
.card-fav-mark {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(10, 13, 17, 0.82);
  border: 1px solid var(--accent-dk);
  color: var(--accent);
  font-size: 13px;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

/* ==========================================================================
   Reporting
   One tap. The option itself is the report, so there's nothing to type and
   nothing to read back.
   ========================================================================== */

.report-dialog {
  max-width: 470px;
  padding: 24px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(78, 201, 130, 0.12), 0 24px 70px rgba(0, 0, 0, 0.6);
}

.report-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.report-head h2 { margin: 0 0 3px; font-size: 20px; font-weight: 650; }
.report-head .dsub {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

.report-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}
.report-mark i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.report-options { display: flex; flex-direction: column; gap: 8px; }

.report-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 13px 16px;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.report-option:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateX(3px);
}
.report-option:active { transform: scale(0.99); }

.report-option-label { font-size: 15px; font-weight: 550; }
.report-option-note { font-size: 13px; color: var(--dim); }

.report-option.sending { opacity: 0.6; pointer-events: none; }
.report-option.sent {
  border-color: var(--accent);
  background: rgba(78, 201, 130, 0.14);
}
.report-option.sent .report-option-label::after {
  content: " \2713";
  color: var(--accent);
}

.report-dialog .dialog-actions { margin-top: 18px; }

@media (max-width: 700px) {
  .report-dialog { padding: 18px; }
  .report-head .dsub { max-width: 200px; }
  .report-option { padding: 12px 14px; }
}

.spot-bg { position: absolute; inset: 0; }
.spot-shade { position: absolute; inset: 0; }

.spot-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (min-width: 1500px) {
}

@media (max-width: 1200px) {
}

/* --- tablets --- */
@media (max-width: 900px) {
  .spot-tagline { font-size: 14px; margin-bottom: 8px; }
  .spot-meta { margin-bottom: 10px; font-size: 13px; }
  .spot-plot { -webkit-line-clamp: 2; font-size: 14px; margin-bottom: 14px; }
}

/* --- phones --- */
@media (max-width: 620px) {
  .spot { border-radius: 14px; margin-bottom: 26px; }
  .spot-flag { font-size: 11px; padding: 4px 10px; margin-bottom: 10px; }
  .spot-tagline { display: none; }
  .spot-plot { -webkit-line-clamp: 3; font-size: 13.5px; }
  .spot-meta { gap: 8px; font-size: 12.5px; }
  .spot-meta .pill { padding: 2px 8px; font-size: 11.5px; }

  /* Buttons go full width and stack cleanly rather than wrapping raggedly. */
  .spot-actions { width: 100%; gap: 8px; }
  .spot-actions .btn { flex: 1 1 calc(50% - 4px); padding: 11px 12px; font-size: 14px; }
  .spot-dots { bottom: 12px; right: 12px; }
  .spot-dot { width: 6px; height: 6px; }
  .spot-dot.on { width: 16px; }
}

@media (max-width: 420px) {
  .spot-actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   TBW tooltip
   ========================================================================== */

.tbw-hint { position: relative; }

.tbw-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 250px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
  z-index: 40;
  cursor: auto;
}
.tbw-tip b { color: var(--text); font-weight: 600; }

.tbw-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--line-2);
}

.tbw-hint:hover .tbw-tip,
.tbw-hint:focus-visible .tbw-tip,
.tbw-hint.open .tbw-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 620px) {
  .tbw-tip { width: 210px; left: auto; right: -8px; transform: translateY(6px); }
  .tbw-tip::after { left: auto; right: 14px; }
  .tbw-hint:hover .tbw-tip,
  .tbw-hint.open .tbw-tip { transform: translateY(0); }
}

/* ==========================================================================
   Phones
   Everything below is about fitting comfortably on a small screen: nothing
   overlapping, nothing cut off, and touch targets big enough to hit.
   ========================================================================== */

@media (max-width: 620px) {
  /* Detail pages */
  .detail-hero { padding: 14px 14px 18px; }
  .detail-body { flex-direction: column; gap: 14px; }
  .detail-poster { width: 118px; flex: 0 0 auto; }
  .detail-txt h1 { font-size: 20px; line-height: 1.2; }
  .meta-row { gap: 7px; font-size: 12.5px; margin-bottom: 12px; }
  .meta-row .pill { padding: 2px 8px; font-size: 11.5px; }
  .detail-plot { font-size: 14px; }
  .credits { font-size: 12.5px; }

  /* Action buttons stack into a tidy grid instead of wrapping raggedly. */
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .hero-actions .btn { width: 100%; padding: 11px 10px; font-size: 13.5px; }
  .hero-actions .tbw-wrap { display: flex; }
  .hero-actions .tbw-wrap .btn { flex: 1; }

  /* Toolbars scroll sideways rather than stacking into a tall wall. */
  .page-head {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .page-head::-webkit-scrollbar { display: none; }
  .page-head h1 { flex: 0 0 auto; }
  .page-head select, .page-head .btn, .page-head .viewswitch { flex: 0 0 auto; }
  .viewswitch { width: auto; }

  /* Episodes */
  .episode { flex-direction: row; gap: 10px; padding: 10px; }
  .episode .still { flex: 0 0 92px; }
  .ep-actions { flex-wrap: wrap; }
  .ep-actions .btn { flex: 1 1 auto; }

  /* My stuff */
  .manage-actions { flex-direction: column; }
  .manage-actions .btn { width: 100%; }
  .my-head h3 { font-size: 16px; }

  /* Guide info panel */
  .guide-info { gap: 12px; }
  .guide-info h2 { font-size: 16px; }
  .guide-info p { -webkit-line-clamp: 2; font-size: 13px; }
  .guide-info .acts { flex-direction: row; gap: 6px; }
  .guide-info .acts .btn { padding: 8px 12px; font-size: 13px; }

  /* Profiles */
  .picker-inner h1 { font-size: 22px; }
  .picker-sub { font-size: 14px; margin: -14px 0 24px; }

  /* Trailer */
  .trailer-frame { border-radius: 12px; }
  .trailer-bar { padding: 10px 12px; }
  .trailer-title { font-size: 14px; }

  /* Cast on detail pages */
  .cast-card { flex: 0 0 76px; width: 76px; }
  .cast-face { width: 76px; height: 76px; font-size: 24px; }
  .cast-name, .cast-role { max-width: 76px; font-size: 11.5px; }

  /* Watched strip */
  .watched-tile { flex: 0 0 56px; width: 56px; }
}

/* Touch targets: nothing important smaller than this. */
@media (hover: none) {
  .btn.sm, .btn.ghost.sm { min-height: 38px; }
  .card-star, .card-tool, .fav-remove { width: 34px; height: 34px; }
  .star { padding: 10px; }
  .chip { padding: 10px 16px; }
}

/* Stop anything from forcing the page sideways. */
html, body { overflow-x: hidden; }
.page, .viewport { max-width: 100%; }
.rail, .chips, .watched-rail { max-width: 100%; }

/* ==========================================================================
   Row navigation
   Two buttons in the row's own heading rather than arrows floating over the
   artwork: always in the same place, never covering a poster, and a
   comfortable size to tap.
   ========================================================================== */

.shelf-nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}
.shelf-nav.hidden { display: none; }

.shelf-arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.12s;
}
.shelf-arrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  border-radius: 1px;
}
.shelf-arrow.prev::before { transform: rotate(-135deg) translate(-1.5px, -1.5px); }
.shelf-arrow.next::before { transform: rotate(45deg) translate(-1.5px, 1.5px); }

.shelf-arrow:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #06120b;
  transform: scale(1.06);
}
.shelf-arrow:active:not(:disabled) { transform: scale(0.96); }

.shelf-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  color: var(--dim);
}

/* The row being scrolled gets a soft outline, and a pulse when it moves. */
.rail-wrap {
  position: relative;
  border-radius: 14px;
  transition: box-shadow 0.2s;
}
.rail-wrap.outlined { box-shadow: 0 0 0 1px rgba(78, 201, 130, 0.5); }
.rail-wrap.pulsing { animation: rail-glow 600ms ease-out; }

@keyframes rail-glow {
  0%   { box-shadow: 0 0 0 1px rgba(78, 201, 130, 0.9), 0 0 0 0 rgba(78, 201, 130, 0.3); }
  70%  { box-shadow: 0 0 0 1px rgba(78, 201, 130, 0.4), 0 0 0 12px rgba(78, 201, 130, 0); }
  100% { box-shadow: 0 0 0 1px rgba(78, 201, 130, 0); }
}

/* Edge fades still signal there's more to the side. */
.rail-wrap::before,
.rail-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s;
}
.rail-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg) 5%, transparent); }
.rail-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg) 5%, transparent); }
.rail-wrap.at-start::before,
.rail-wrap.at-end::after,
.rail-wrap.no-scroll::before,
.rail-wrap.no-scroll::after { opacity: 0; }

/* ==========================================================================
   Spotlight controls
   ========================================================================== */

.spot-controls {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 4;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10, 13, 17, 0.6);
  border: 1px solid rgba(78, 201, 130, 0.22);
}

.spot-dots { position: static; }

.spot-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.12s;
}
.spot-arrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  border-radius: 1px;
}
.spot-arrow.prev::before { transform: rotate(-135deg) translate(-1.5px, -1.5px); }
.spot-arrow.next::before { transform: rotate(45deg) translate(-1.5px, 1.5px); }
.spot-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #06120b;
  transform: scale(1.07);
}
.spot-arrow:active { transform: scale(0.95); }

@media (max-width: 900px) {
  .shelf-arrow { width: 34px; height: 34px; }
  .spot-controls { right: 12px; bottom: 12px; gap: 9px; padding: 5px 8px; }
  .spot-arrow { width: 30px; height: 30px; }
}

@media (max-width: 620px) {
  .shelf-head { gap: 10px; }
  .shelf-arrow { width: 32px; height: 32px; }
}

/* ==========================================================================
   Player, refined
   ========================================================================== */

.player-top {
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
}

/* Title sits in a panel so it stays readable over a bright picture. */
.player-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 14px;
  border-radius: 12px;
  background: rgba(10, 13, 17, 0.62);
  border: 1px solid rgba(78, 201, 130, 0.18);
  max-width: min(560px, 60vw);
}
.player-info .pnum {
  font-size: 26px;
  font-weight: 300;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.player-info-text { min-width: 0; }
.player-info .ptitle {
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-info .psub {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-btn.wide {
  width: auto;
  min-width: 46px;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 600;
}
.player-btn.wide.on { color: var(--accent); }

@media (max-width: 700px) {
  .player-info { max-width: 60vw; padding: 8px 12px; }
  .player-info .ptitle { font-size: 14px; }
}

/* ==========================================================================
   Report link, and the install explainer
   ========================================================================== */

.report-link {
  display: inline-block;
  margin-top: 16px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--line-2);
  color: var(--dim);
  font-size: 13px;
  transition: color 0.15s, border-color 0.15s;
}
.report-link:hover { color: var(--danger); border-color: var(--danger); }

.install-what { margin-bottom: 18px; }
.install-what p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.install-what ul { color: var(--muted); font-size: 14px; padding-left: 20px; margin: 0 0 10px; }
.install-what li { margin-bottom: 5px; }
.install-note { color: var(--dim); font-size: 13px; }

.install-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 18px;
  border-radius: 11px;
  background: rgba(78, 201, 130, 0.08);
  border: 1px solid var(--accent-dk);
}
.install-action span { color: var(--muted); font-size: 13px; }

.install-heading {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text);
}

.install-steps { color: var(--muted); font-size: 14px; padding-left: 20px; margin: 12px 0 0; }
.install-steps li { margin-bottom: 8px; line-height: 1.5; }

@media (max-width: 620px) {
  .install-action { flex-direction: column; align-items: stretch; text-align: center; }
  .install-action .btn { width: 100%; }
}

/* ==========================================================================
   Spotlight
   One fixed height for every slide. Backdrops vary wildly in shape, and
   letting them set the height made the whole page jump as it rotated.
   ========================================================================== */

.spot-stage {
  position: relative;
  height: clamp(360px, 30vw, 470px);
  overflow: hidden;
}

.spot-slide {
  position: absolute;
  inset: 0;
  animation: spot-in 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.spot-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fill the frame whatever shape it arrives in */
  object-position: center 25%;
}

.spot-shade { position: absolute; inset: 0; }

.spot-body {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 640px;
  padding: 30px 78px 26px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.spot-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

@media (min-width: 1500px) {
}

@media (max-width: 1100px) {
  .spot-body { max-width: 560px; padding-right: 60px; }
  .spot-plot { -webkit-line-clamp: 2; }
}

@media (max-width: 900px) {
  .spot-stage { height: 400px; }
  .spot-body {
    max-width: none;
    justify-content: flex-end;
    padding: 24px 20px 62px;
  }
  .spot-body h2 { font-size: 24px; }
  .spot-tagline { font-size: 14px; margin-bottom: 8px; }
  .spot-meta { margin-bottom: 10px; font-size: 13px; }
  .spot-plot { -webkit-line-clamp: 2; font-size: 14px; margin-bottom: 12px; }
}

@media (max-width: 620px) {
  .spot-stage { height: 380px; }
  .spot-body { padding: 20px 16px 58px; }
  .spot-body h2 { font-size: 20px; line-height: 1.15; }
  .spot-tagline { display: none; }
  .spot-plot { -webkit-line-clamp: 2; font-size: 13.5px; }
  .spot-actions { width: 100%; gap: 8px; margin-bottom: 12px; }
  .spot-actions .btn { flex: 1 1 calc(50% - 4px); padding: 10px; font-size: 13.5px; }
}

@media (max-width: 420px) {
  .spot-actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Row outline
   Thicker, rounder, and set back from the artwork so it frames the row
   rather than crowding it.
   ========================================================================== */

.rail-wrap {
  border-radius: 18px;
  padding: 10px 12px;
  margin: -10px -12px;
  transition: box-shadow 0.22s;
}

.rail-wrap.outlined { box-shadow: 0 0 0 2px rgba(78, 201, 130, 0.6); }
.rail-wrap.pulsing { animation: rail-glow 640ms ease-out; }

@keyframes rail-glow {
  0%   { box-shadow: 0 0 0 2px rgba(78, 201, 130, 0.95), 0 0 0 0 rgba(78, 201, 130, 0.32); }
  70%  { box-shadow: 0 0 0 2px rgba(78, 201, 130, 0.45), 0 0 0 16px rgba(78, 201, 130, 0); }
  100% { box-shadow: 0 0 0 2px rgba(78, 201, 130, 0); }
}

/* The fades sit inside the new padding. */
.rail-wrap::before { left: 12px; }
.rail-wrap::after { right: 12px; }

/* ==========================================================================
   Even rows
   Cards line up whatever the title length, and posters are all one shape.
   ========================================================================== */

.rail { align-items: flex-start; }

.card { display: flex; flex-direction: column; }

.poster {
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
  overflow: hidden;
}
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Two lines reserved for every title, so the row below never staggers. */
.card-title {
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.grid { align-items: start; }

/* ==========================================================================
   Guide sizing
   Three densities. Standard is what was here before; compact fits more rows
   on screen, large is easier to read from a distance.
   ========================================================================== */

.guide-wrap[data-size="small"] {
  --chan-w: 230px;
  --slot-w: 220px;
  --slot-min: 160px;
  --row-h: 58px;
}
.guide-wrap[data-size="small"] .gchan { grid-template-columns: 38px 34px 1fr 24px; gap: 9px; }
.guide-wrap[data-size="small"] .gchan .n { font-size: 19px; }
.guide-wrap[data-size="small"] .gchan img { width: 34px; height: 25px; }
.guide-wrap[data-size="small"] .gchan .nm { font-size: 12.5px; }
.guide-wrap[data-size="small"] .gprog .pt { font-size: 13px; }
.guide-wrap[data-size="small"] .gprog .pw { font-size: 11.5px; }

.guide-wrap[data-size="large"] {
  --chan-w: 350px;
  --slot-w: 340px;
  --slot-min: 250px;
  --row-h: 104px;
}
.guide-wrap[data-size="large"] .gchan { grid-template-columns: 62px 56px 1fr 34px; gap: 14px; }
.guide-wrap[data-size="large"] .gchan .n { font-size: 31px; }
.guide-wrap[data-size="large"] .gchan img { width: 56px; height: 42px; }
.guide-wrap[data-size="large"] .gchan .nm { font-size: 15.5px; }
.guide-wrap[data-size="large"] .gprog { padding: 11px 14px; }
.guide-wrap[data-size="large"] .gprog .pt { font-size: 16px; }
.guide-wrap[data-size="large"] .gprog .pw { font-size: 13.5px; }
.guide-wrap[data-size="large"] .ruler .slot { font-size: 14.5px; }

/* ==========================================================================
   Guide freshness
   ========================================================================== */

.guide-info { position: relative; align-items: flex-start; }

@media (max-width: 900px) {
}

@media (max-width: 620px) {
}

/* ==========================================================================
   Spotlight, adaptive
   The controls sit bottom right, so every slide reserves room for them.
   Nothing is allowed to run underneath.
   ========================================================================== */

.spot-body {
  padding: 28px 20px 84px 34px;
  gap: 0;
}

@media (min-width: 1101px) {
  .spot-body { padding-right: 190px; }   /* clear of the controls pill */
}

@media (max-width: 1100px) {
  .spot-body { padding: 24px 20px 82px; }
}

@media (max-width: 900px) {
  .spot-body { padding: 22px 18px 78px; }
}

@media (max-width: 620px) {
  .spot-body { padding: 18px 14px 74px; }
}

/* ==========================================================================
   Player: volume and back
   ========================================================================== */

.player-volume { display: flex; align-items: center; gap: 10px; }

/* One element does the whole job: the filled part is a gradient on the
   track itself, so there's nothing to fall out of step. */
.player-vol {
  -webkit-appearance: none;
  appearance: none;
  width: 92px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--accent) 0 var(--filled, 100%),
    rgba(255, 255, 255, 0.22) var(--filled, 100%) 100%
  );
  cursor: pointer;
  outline: none;
}
.player-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.player-vol::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.player-vol::-moz-range-track { background: transparent; }

.player-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 18px 0 15px;
  flex: 0 0 auto;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(10, 13, 17, 0.66);
  color: var(--text);
  font-size: 14px;
  font-weight: 550;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.player-back-arrow {
  width: 9px;
  height: 9px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
  margin-top: 1px;   /* optically centred rather than mathematically */
}
.player-back:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #06120b;
}

@media (max-width: 700px) {
  .player-vol { width: 66px; }
  .player-back { height: 36px; padding: 0 14px 0 12px; font-size: 13px; }
}
@media (max-width: 460px) {
  .player-volume .player-vol { display: none; }
}

/* ==========================================================================
   Guide toolbar
   The size control belongs with the date on the right, not mixed in with
   the time-travel buttons on the left.
   ========================================================================== */

.guide-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.guide-bar .when { margin-left: 0; }

.guide-bar-right select {
  padding: 8px 32px 8px 13px;
  font-size: 13.5px;
  background-color: var(--surface);
}

/* Native focus and selection colors are the browser's, not ours. */
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
select:active { background-color: var(--surface-2); }

select option {
  background: #141a22;
  color: #eef2f7;
}
select option:checked,
select option:hover {
  background: var(--accent);
  color: #06120b;
  font-weight: 600;
}

/* Firefox draws its own highlight unless told otherwise. */
@supports (-moz-appearance: none) {
  select option:checked { box-shadow: 0 0 0 100px var(--accent) inset; color: #06120b; }
}

@media (max-width: 900px) {
  .guide-bar-right { gap: 8px; }
}
@media (max-width: 620px) {
  .guide-bar-right { width: 100%; margin-left: 0; justify-content: space-between; }
}

/* ==========================================================================
   Dropdowns
   Built from ordinary elements so the list matches the site. A native
   select draws its options with the operating system, which is where the
   blue came from and why it never fit.
   ========================================================================== */

.dd { position: relative; flex: 0 0 auto; }

.dd-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  max-width: 230px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.15s, background 0.15s;
}
.dd-button:hover { border-color: var(--line-2); background: var(--surface-2); }
.dd.open .dd-button { border-color: var(--accent); background: var(--surface-2); }
.dd-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dd.wide .dd-button { max-width: 260px; }

.dd-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dd-caret {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin-left: auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  border-radius: 1px;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s, border-color 0.15s;
}
.dd.open .dd-caret {
  border-color: var(--accent);
  transform: rotate(225deg) translate(-3px, -3px);
}

.dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  max-width: 300px;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.6);
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}
.dd-menu.right { left: auto; right: 0; }

.dd.open .dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dd-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.dd-item:hover { background: var(--surface-2); color: var(--accent); }
.dd-item.on { color: var(--accent); }

.dd-tick { width: 12px; height: 12px; }
.dd-item.on .dd-tick {
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  border-radius: 1px;
  height: 7px;
  transform: rotate(-45deg) translate(1px, -2px);
}

.dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-note { color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dd-item:hover .dd-note { color: var(--muted); }

.dd-menu::-webkit-scrollbar { width: 8px; }
.dd-menu::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

@media (max-width: 700px) {
  .dd-button { height: 38px; padding: 0 12px; font-size: 13.5px; max-width: 170px; }
  .dd-menu { max-width: 260px; }
}

/* ==========================================================================
   Dropdown sizing
   The menu was inheriting the button's width, so a narrow button gave a
   narrow menu and the labels wrapped into unreadable columns.
   ========================================================================== */

.dd-menu {
  min-width: max(220px, 100%);
  max-width: 340px;
  width: max-content;
}

.dd-item {
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  white-space: nowrap;
}

.dd-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Long channel-group names need room, so that one menu is allowed to be
   wider than the rest. */
.dd.wide .dd-menu { min-width: max(280px, 100%); max-width: 420px; }

@media (max-width: 700px) {
  .dd-menu { min-width: max(200px, 100%); max-width: min(300px, 88vw); }
  .dd.wide .dd-menu { min-width: max(230px, 100%); max-width: min(320px, 90vw); }
}

/* The now-line moves smoothly rather than jumping every half minute. */
.nowline { transition: left 0.6s linear; }

/* ------------------------------------------------------- guide notice */

.guide-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 14px 18px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  position: sticky;
  left: 18px;
  width: fit-content;
  max-width: 560px;
  z-index: 26;
}
.guide-notice.working { border-color: var(--accent-dk); background: rgba(78, 201, 130, 0.07); }

.guide-notice-title { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.guide-notice-body { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

.guide-notice-spin {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

@media (max-width: 620px) {
  .guide-notice { margin: 12px; left: 12px; padding: 13px 14px; }
  .guide-notice-body { font-size: 13px; }
}

/* ------------------------------------------------- profile assignment */

.profile-picks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  max-height: 190px;
  overflow-y: auto;
}

.profile-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s;
}
.profile-pick:hover { background: var(--surface-2); }
.profile-pick input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.profile-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.field-note { margin: 7px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.field-note.warn { color: var(--danger); }


/* Keyboard focus on the volume slider, without touching its track. */
.player-vol:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ==========================================================================
   Swoopin'
   The message over the picture while a channel starts. The mark sits inside
   a turning ring, and the word breathes underneath it.
   ========================================================================== */

.player-status .box.busy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 30px 40px;
  border-radius: 18px;
  background: rgba(10, 13, 17, 0.82);
  border: 1px solid rgba(78, 201, 130, 0.3);
  box-shadow: 0 0 60px rgba(78, 201, 130, 0.12);
}

.swoopin {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
}

.swoopin-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(78, 201, 130, 0.1) 130deg,
    rgba(78, 201, 130, 0.5) 250deg,
    var(--accent) 330deg,
    transparent 360deg
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 8px rgba(78, 201, 130, 0.5));
  animation: spin 1.05s linear infinite;
}

.swoopin-mark {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.swoopin-s {
  animation: swoopin-s 1.9s cubic-bezier(0.4, 0, 0.3, 1) infinite;
}

.swoopin-dot {
  width: 0.19em;
  height: 0.19em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(78, 201, 130, 0.7);
  animation: swoopin-dot 1.9s cubic-bezier(0.4, 0, 0.3, 1) infinite;
}

.swoopin-word {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  animation: swoopin-word 1.9s ease-in-out infinite;
}

/* The s swoops in from the left, the dot lands just after it, then both
   fade so the loop reads as a repeating arrival rather than a jump cut. */
@keyframes swoopin-s {
  0%   { opacity: 0; transform: translateX(-18px); }
  22%  { opacity: 1; transform: translateX(0); }
  78%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(6px); }
}

@keyframes swoopin-dot {
  0%, 18% { opacity: 0; transform: translateY(-14px); }
  32%     { opacity: 1; transform: translateY(1px); }
  38%     { transform: translateY(0); }
  78%     { opacity: 1; transform: translateY(0); }
  100%    { opacity: 0; transform: translateY(0); }
}

@keyframes swoopin-word {
  0%, 100% { opacity: 0.45; }
  45%      { opacity: 1; }
}

@media (max-width: 620px) {
  .player-status .box.busy { padding: 22px 28px; gap: 12px; }
  .swoopin { width: 72px; height: 72px; }
  .swoopin-mark { font-size: 27px; }
  .swoopin-word { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .swoopin-ring { animation-duration: 2.6s; }
  .swoopin-s, .swoopin-dot, .swoopin-word { animation: none; opacity: 1; transform: none; }
}

/* ------------------------------------------------------ other versions */

.version-sheet {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
}

.version-panel {
  width: min(400px, 100%);
  padding: 22px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.version-title { font-size: 18px; font-weight: 650; }
.version-note {
  font-size: 13px;
  color: var(--dim);
  line-height: 1.5;
  margin-bottom: 6px;
}

.version-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-2);
  color: var(--text);
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.version-option:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateX(3px);
}
.version-option.on { border-color: var(--accent-dk); background: rgba(78, 201, 130, 0.08); }

.version-label { font-size: 15px; font-weight: 600; }
.version-tag {
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--muted);
}
.version-now { margin-left: auto; font-size: 12.5px; color: var(--accent); }

.version-panel .btn { margin-top: 6px; }

@media (max-width: 620px) {
  .version-sheet { padding: 14px; }
  .version-panel { padding: 18px; }
}

/* --------------------------------------------------- player error panel */

.player-status .box.err {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 460px;
  padding: 26px 30px;
  text-align: center;
}

.status-text { font-size: 16px; font-weight: 550; line-height: 1.45; }
.status-hint { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

.status-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}
.status-actions .btn { min-width: 116px; }

@media (max-width: 620px) {
  .player-status .box.err { padding: 20px; max-width: none; }
  .status-actions { flex-direction: column; }
  .status-actions .btn { width: 100%; }
}

/* ---------------------------------------------------- finished programs */

/* Once something has finished it stops competing for attention: dimmed,
   no green, but still readable and still clickable. */
.gprog.past {
  background: var(--surface);
  border-color: var(--line);
  opacity: 0.62;
}
.gprog.past .pt { color: var(--muted); font-weight: 500; }
.gprog.past .pw { color: var(--dim); }
.gprog.past:hover { opacity: 0.85; border-color: var(--line-2); }

/* A finished program is never also live. */
.gprog.past.live { background: var(--surface); border-color: var(--line); }

/* Narrow blocks drop the time line and clip the title rather than
   spilling over the block after them. */
.gprog.narrow { padding-left: 7px; padding-right: 5px; }
.gprog.narrow .pw { display: none; }
.gprog.narrow .pt {
  font-size: 12.5px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gprog .pt,
.gprog .pw {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------ removing people */

.remove-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }

.remove-option {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 17px;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.remove-option:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateX(3px);
}
.remove-option.danger:hover { border-color: var(--danger); }

.remove-title { font-size: 15px; font-weight: 600; }
.remove-option.danger .remove-title { color: var(--danger); }
.remove-note { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ------------------------------------------------- removed accounts */

.removed-head { margin: 30px 0 4px; font-size: 17px; font-weight: 620; }
.removed-note {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--dim);
  line-height: 1.5;
  max-width: 620px;
}
.removed-row { opacity: 0.72; }
.removed-row:hover { opacity: 1; }

/* ------------------------------------------------- stream allowance */

.menu-head {
  display: block;
  padding: 12px 14px 11px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
  cursor: default;
}
.menu-head:empty { display: none; }

.slot-line {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.slot-mark { font-weight: 700; }
.slot-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 5px;
}
.slot-text { font-weight: 550; color: var(--accent); }

/* ------------------------------------------------ connection details */

.conn-box {
  margin: 4px 0 18px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.conn-row {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.conn-row:last-of-type { border-bottom: 0; }

.conn-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
}

.conn-value {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  color: var(--text);
  word-break: break-all;
  user-select: all;
}
/* Masked rather than removed, so the row keeps its shape. */
.conn-value.masked {
  color: transparent;
  text-shadow: 0 0 9px rgba(238, 242, 247, 0.85);
  user-select: none;
}

.conn-actions { display: flex; gap: 7px; }

.conn-note {
  padding: 13px 18px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}

.conn-warning {
  font-size: 13.5px;
  color: var(--dim);
  border-left: 2px solid var(--accent-dk);
  padding-left: 12px;
  margin-bottom: 26px;
}

@media (max-width: 620px) {
  .conn-row { grid-template-columns: 1fr; gap: 7px; padding: 13px 14px; }
  .conn-actions { justify-content: flex-start; }
  .conn-value { font-size: 14px; }
}

.pass-row { display: flex; gap: 8px; }
.pass-row input { flex: 1; min-width: 0; }


.slot-expiry {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--dim);
}
.slot-expiry.soon { color: var(--accent); }
.slot-expiry.over { color: var(--danger); }

/* ==========================================================================
   Settings
   Each setting in its own card, with its explanation attached to it rather
   than floating between controls.
   ========================================================================== */

.set-card {
  max-width: 780px;
  margin-bottom: 20px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.set-head { margin-bottom: 16px; }
.set-head h2 {
  position: relative;
  margin: 0 0 6px;
  padding-left: 15px;
  font-size: 18px;
  font-weight: 640;
}
.set-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), rgba(78, 201, 130, 0.15));
}
.set-head p {
  margin: 0 0 0 15px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.set-choices { display: flex; flex-wrap: wrap; gap: 8px; }

.set-choice {
  padding: 10px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--muted);
  font-size: 14px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.set-choice:hover { color: var(--text); border-color: var(--accent-dk); }
.set-choice.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #06120b;
  font-weight: 620;
}

.set-warning {
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--accent-dk);
  font-size: 13.5px;
  color: var(--dim);
}

/* The playback controls sit inside a card now, so they lose their own frame. */
.set-card .help-body { max-width: none; }
.set-card .help-body h2 { display: none; }
.set-card .help-body p:first-of-type { margin-top: 0; }

@media (max-width: 620px) {
  .set-card { padding: 18px 16px; }
  .set-choices { display: grid; grid-template-columns: 1fr 1fr; }
  .set-choice { text-align: center; }
}

/* ------------------------------------------------------- next episode */

.player-status .box.next-up {
  gap: 12px;
  padding: 30px 42px;
  min-width: 340px;
}

.next-up .swoopin { width: 84px; height: 84px; }

.next-count {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.next-label {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.next-title {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  max-width: 420px;
  line-height: 1.35;
}

.next-actions { display: flex; gap: 10px; margin-top: 6px; }
.next-actions .btn { min-width: 118px; }

@media (max-width: 620px) {
  .player-status .box.next-up { padding: 22px 20px; min-width: 0; }
  .next-actions { flex-direction: column; width: 100%; }
  .next-actions .btn { width: 100%; }
}

/* --------------------------------------------------------- count badge */

.count-badge {
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.count-badge:empty { display: none; }

@media (max-width: 620px) {
  .count-badge { font-size: 11.5px; padding: 2px 8px; margin-left: 7px; }
}

/* ---------------------------------------------------- guide heading */

.guide-info .txt h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.guide-updated {
  margin-left: 6px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--dim);
  white-space: nowrap;
}
.guide-updated:empty { display: none; }

.guide-updated.working { color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }

.gu-working {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}

@media (max-width: 620px) {
  .guide-updated { font-size: 11.5px; margin-left: 0; }
}

/* ==========================================================================
   Topic pages
   Help, Settings and My stuff share this: a grid of tiles that wraps on any
   screen, and one topic open at a time with the full width to itself.
   ========================================================================== */

.topic-sub {
  max-width: 640px;
  margin: -8px 0 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  max-width: 1100px;
}
.topic-grid.hidden { display: none; }

.topic-tile {
  position: relative;
  display: block;
  padding: 22px 20px 20px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.16s, background 0.16s, transform 0.14s;
}
.topic-tile:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.topic-tile:active { transform: translateY(-1px); }

.topic-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(78, 201, 130, 0.1);
  border: 1px solid var(--accent-dk);
  color: var(--accent);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.topic-name {
  display: block;
  font-size: 16.5px;
  font-weight: 620;
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}

.topic-note {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

.topic-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  min-width: 28px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #06120b;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- the open topic --- */

.topic-detail { max-width: 1100px; }
.topic-detail.hidden { display: none; }

.topic-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.topic-bar h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.topic-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 16px 0 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 550;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.topic-back:hover { background: var(--accent); border-color: var(--accent); color: #06120b; }

.topic-back-arrow {
  width: 8px;
  height: 8px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
}

.topic-body { padding-bottom: 40px; }
.topic-body .help-body { max-width: 760px; }

.topic-lead {
  max-width: 700px;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* Sections inside an open topic don't need their own headings competing
   with the topic's own. */
.topic-body .search-section h3 { font-size: 16px; }
.topic-body .my-section { margin-bottom: 30px; }

@media (max-width: 700px) {
  .topic-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .topic-tile { padding: 16px 14px 15px; border-radius: 13px; }
  .topic-icon { width: 36px; height: 36px; margin-bottom: 10px; font-size: 16px; }
  .topic-name { font-size: 14.5px; }
  .topic-note { font-size: 12.5px; }
  .topic-badge { top: 14px; right: 14px; font-size: 11.5px; padding: 2px 7px; }
  .topic-bar h2 { font-size: 19px; }
  .topic-sub { font-size: 14px; margin-bottom: 18px; }
}

@media (max-width: 420px) {
  .topic-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- loading shapes */

/* Grey placeholders in the shape of the rows that are coming. A quiet pulse
   rather than a spinner, so the page reads as filling in rather than stuck. */
.skeleton { pointer-events: none; }

.skel-head {
  width: 190px;
  height: 20px;
  margin: 0 0 15px 15px;
  border-radius: 6px;
  background: var(--surface);
  animation: skel 1.4s ease-in-out infinite;
}

.skel-block {
  background: var(--surface);
  animation: skel 1.4s ease-in-out infinite;
}

.skel-line {
  height: 13px;
  margin-top: 11px;
  border-radius: 5px;
  background: var(--surface);
  animation: skel 1.4s ease-in-out infinite;
}
.skeleton .card:nth-child(even) .skel-line { width: 72%; }

@keyframes skel {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .skel-head, .skel-block, .skel-line { animation: none; }
}

/* The spotlight's loading state: the mark, centred, at the height the
   carousel will occupy so the page doesn't jump when it lands. */
.spot-loading {
  display: grid;
  place-items: center;
  min-height: 380px;
}

@media (max-width: 900px) {
  .spot-loading { min-height: 300px; }
}
@media (max-width: 620px) {
  .spot-loading { min-height: 240px; }
}