/*
 * Themes are a set of custom properties, nothing more. Every surface below
 * reads from these, so adding a theme is a palette block — never a second
 * stylesheet. `nocturne` is the default and lives on :root.
 */
:root {
  --bg: #0b0a10;
  --panel: #14121c;
  --panel-2: #1b1826;
  --line: #272235;
  --text: #ece9f4;
  --muted: #948da8;
  --accent: #a06bff;
  --accent-2: #ff8a4c;
  --ok: #46d19a;
  --danger: #ff5f6d;
  --radius: 14px;

  /* Surfaces that were previously colour literals, so a light theme can move
     them too instead of leaving dark slabs on a pale page. */
  --top-bg: rgba(11, 10, 16, .82);
  --thumb-bg: linear-gradient(140deg, #241d33, #14111c);
  --fallback-bg: linear-gradient(160deg, #1a1526, #0d0b13);
  --badge-bg: rgba(10, 8, 16, .78);
  --gate-bg: rgba(8, 7, 12, .96);
  --on-accent: #fff;
}

/* --------------------------------------------------------------- themes */

html[data-theme="midnight"] {
  --bg: #06080f;
  --panel: #0d1220;
  --panel-2: #121a2c;
  --line: #1d2740;
  --text: #e6ecf7;
  --muted: #8794ad;
  --accent: #4c8dff;
  --accent-2: #35d6c4;
  --ok: #46d19a;
  --danger: #ff5f6d;
  --top-bg: rgba(6, 8, 15, .84);
  --thumb-bg: linear-gradient(140deg, #16223c, #0a0f1a);
  --fallback-bg: linear-gradient(160deg, #101a2e, #070b13);
  --badge-bg: rgba(6, 8, 15, .8);
  --gate-bg: rgba(4, 6, 11, .96);
}

html[data-theme="ember"] {
  --bg: #120a08;
  --panel: #1c110d;
  --panel-2: #26160f;
  --line: #38211a;
  --text: #f6e9e2;
  --muted: #b0928a;
  --accent: #ff6b3d;
  --accent-2: #ffb347;
  --ok: #4fd19a;
  --danger: #ff4d4d;
  --top-bg: rgba(18, 10, 8, .84);
  --thumb-bg: linear-gradient(140deg, #301c14, #170d09);
  --fallback-bg: linear-gradient(160deg, #2a1811, #120a07);
  --badge-bg: rgba(14, 8, 6, .8);
  --gate-bg: rgba(14, 8, 6, .96);
}

html[data-theme="daylight"] {
  --bg: #f6f5f9;
  --panel: #ffffff;
  --panel-2: #f0eff6;
  --line: #ddd9e6;
  --text: #1a1725;
  --muted: #6b6579;
  --accent: #7a4de0;
  --accent-2: #e5623a;
  --ok: #12996b;
  --danger: #d92b3a;
  --top-bg: rgba(255, 255, 255, .86);
  --thumb-bg: linear-gradient(140deg, #e9e6f2, #f6f5f9);
  --fallback-bg: linear-gradient(160deg, #f0eff6, #ffffff);
  --badge-bg: rgba(255, 255, 255, .86);
  --gate-bg: rgba(246, 245, 249, .96);
  --on-accent: #fff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

/* ---------------------------------------------------------------- header */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--top-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.top-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
}

.brand {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.brand .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.search {
  flex: 1;
  min-width: 0;
  position: relative;
}

.search input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 14px;
  outline: none;
}

.search input:focus { border-color: var(--accent); }

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

.chip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.chip b { color: var(--ok); font-weight: 600; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}

.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }

.btn.primary {
  background: linear-gradient(135deg, var(--accent), #7a4de0);
  border-color: transparent;
  color: #fff;
}

.btn.vpn {
  background: linear-gradient(135deg, var(--accent-2), #e5623a);
  border-color: transparent;
  color: #1a0f08;
  font-weight: 600;
}

.btn.ghost { background: transparent; }
.btn.danger { background: #b91c1c; color: #fff; border-color: #991b1b; }
.btn.danger:hover { background: #dc2626; }

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.bulk-bar .bulk-count {
  font-weight: 600;
  font-size: 13px;
  margin-right: auto;
}

/* The Videos section in the chrome. It is a dropdown rather than a bare link
   because the section has several entry points, and they are all filters the
   page understands — none of them is decoration. */

.menu { position: relative; }

.menu .caret {
  font-size: 9px;
  opacity: .65;
  line-height: 1;
}

.menu-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 214px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 7px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  display: none;
}

.menu-pop.show { display: block; }

.menu-item {
  display: block;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 13.5px;
  white-space: nowrap;
}

.menu-item:hover { background: var(--panel-2); }
.menu-item.on { background: var(--panel-2); color: var(--accent); font-weight: 500; }

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

/* ------------------------------------------------------------------ bell */

/* A glyph rather than a word: a bell needs no label, and the nav is already
   the wordiest row on the page. The count rides on the button itself. */
.bell-btn { padding: 8px 10px; }

.bell-pop {
  left: auto;
  right: 0;
  width: 322px;
  max-width: calc(100vw - 34px);
  padding: 0;
  overflow: hidden;
}

.bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.bell-head strong { font-size: 13px; }

.bell-clear {
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}

.bell-clear:hover { text-decoration: underline; }

.bell-list { max-height: 344px; overflow-y: auto; }

.bell-empty {
  margin: 0;
  padding: 16px 12px;
  color: var(--muted);
  font-size: 13px;
}

.bell-item { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: var(--panel-2); }

/* Read on open, marked on arrival: the shade and the dot stay for the visit
   that cleared the badge, so the count is never cleared without being seen. */
.bell-item.unread { background: var(--panel-2); }

.bell-item.unread strong::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.bell-item strong { display: block; font-size: 13.5px; font-weight: 600; }

.bell-body {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.bell-when {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11.5px;
}

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

.hero {
  padding: 30px 0 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.hero h1 {
  margin: 0 0 8px;
  font-size: 27px;
  letter-spacing: -.02em;
}

.hero p { margin: 0; color: var(--muted); max-width: 620px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 14px;
}

.section-head h2 { font-size: 16px; margin: 0; letter-spacing: .01em; }
.section-head .meta { color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------------ grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 16px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
  position: relative;
}

.card:hover { border-color: var(--accent); transform: translateY(-2px); }

.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--thumb-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.thumb img { width: 100%; height: 100%; object-fit: cover; }

.thumb .glyph,
.side-thumb .glyph {
  font-size: 30px;
  opacity: .28;
  color: var(--accent);
}

.side-thumb .glyph { font-size: 15px; }

.badge {
  position: absolute;
  top: 9px;
  left: 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--badge-bg);
  border: 1px solid var(--line);
  color: var(--muted);
}

.badge.up {
  background: linear-gradient(135deg, var(--accent), #7a4de0);
  border-color: transparent;
  color: #fff;
}

.badge.lock {
  left: auto;
  right: 9px;
  background: rgba(255, 95, 109, .16);
  border-color: rgba(255, 95, 109, .45);
  color: #ffb3b8;
}

.card-body { padding: 11px 12px 13px; }

.card-title {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 7px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}

.card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  color: var(--muted);
}

.tag {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10.5px;
}

/* What a clip pays in full, read off the card before it is opened. Set apart
   from the labels beside it, because a figure is what the eye is after here. */
.tag.pay {
  color: var(--ok);
  border-color: rgba(70, 209, 154, .38);
  background: rgba(70, 209, 154, .1);
  font-weight: 600;
}

/* Category row on the Videos page. Each chip is a tag the server counted in
   the current result set, so one can never lead to an empty grid. */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 16px;
}

.chip-tag {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font: 12.5px inherit;
  font-family: inherit;
  cursor: pointer;
}

.chip-tag:hover { border-color: var(--accent); }
.chip-tag.on { border-color: var(--accent); background: var(--panel-2); color: var(--accent); }
/* The location you are already on: shown as chosen, but not clickable — asking
   the server to move you where you already are is a request with no answer. */
.chip-tag[disabled] { opacity: .7; cursor: default; }
/* A country this term does not cover yet: dimmed further so it reads as a
   different kind of no from the one the member is standing on. */
.chip-tag.locked { opacity: .38; cursor: not-allowed; }

/* What the source-search panel offers before anything is typed: the terms this
   browser reached for recently, then the ones the site reaches for most. Two
   kinds of term in one row, told apart by the border alone — the viewer's own
   are the solid ones, and the ones worth a click either way. */

.sugg {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 0;
}

.sugg-chip {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}

.sugg-chip.mine {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}

.sugg-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Discover desk. The whole card is a <label>, so one click anywhere on it
   ticks the box and the browser still toggles only once. */

.discover-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.discover-card { cursor: pointer; }

.discover-card.known {
  opacity: .55;
  cursor: default;
}

.discover-card.known .card-title { color: var(--muted); }

.discover-pick {
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 9px;
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.discover-card.known .discover-pick { cursor: default; }

/* The add button rides into whichever card is picked, so the action sits with
   the clip it is about instead of a bar's width away from it. Every unpicked
   card keeps an empty slot, and an empty slot takes no room. */

.card-act { margin-top: 10px; }
.card-act:empty { display: none; }
.card-act .btn { width: 100%; }

/* ----------------------------------------------------------------- panels */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.notice {
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 13.5px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  margin-bottom: 16px;
}

.notice.warn {
  border-color: rgba(255, 138, 76, .45);
  background: rgba(255, 138, 76, .08);
}

.notice.err {
  border-color: rgba(255, 95, 109, .45);
  background: rgba(255, 95, 109, .08);
}

.notice.ok {
  border-color: rgba(70, 209, 154, .4);
  background: rgba(70, 209, 154, .07);
}

.field { margin-bottom: 13px; }

.field label {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 6px;
}

.field input, .field textarea, .field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.field input:focus, .field textarea:focus { border-color: var(--accent); }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 180px; }

/* ------------------------------------------------------------------ watch */

.watch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 22px;
  align-items: start;
}

.player {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
}

.player iframe, .player video { width: 100%; height: 100%; border: 0; display: block; }

.player-fallback {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 26px;
  background: var(--fallback-bg);
}

.player-fallback.show { display: flex; }
.player-fallback h3 { margin: 0; font-size: 17px; }
.player-fallback p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 400px; }
.player-fallback .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* The second way out of a region block: a clip we host ourselves. A button,
   because that is what it is — a way out, sitting under the VPN's — with the
   clip it will play named beside it, so the offer is something to look at
   rather than a promise. */
.player-fallback .alt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

/* ------------------------------------------- our own player */

/* The clip is the site's own element now, fed by our own server: the source's
   player, its pause screen and its wall of its own clips are never on the page
   at all. What is left here is the dressing around it — the poster, the bar and
   the slot the clip is mounted into. Nothing here is inside a stacking context
   of its own, so the layers below compete directly with the fallback above
   them. */
.np { position: absolute; inset: 0; }
.np-frame { position: absolute; inset: 0; z-index: 0; }
.np-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; display: none;
}
.np.idle .np-poster { display: block; }
/* Except while the clip is still coming up, when the poster stays over it — the
   alternative is an unexplained black box for as long as the source takes to
   answer. It wins over the rule above by coming last. */
.np.loading .np-poster { display: block; }
/* The clip itself, drawn by us. The source's file is carried by our own server,
   so this element is the whole picture — nothing of ours sits over it, which is
   what leaves its own controls free to be the seek bar. */
.np-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; background: #000; object-fit: contain;
}
/* Our toggle only exists when it can actually stop something: with nothing
   mounted the poster's round button is the control. */
.np.idle .np-toggle { display: none; }
/* The jump controls have nothing to move with no clip up, so they stay off the
   bar until one is. */
.np.idle .np-seek { display: none; }

.np-veil {
  position: absolute; inset: 0; z-index: 5;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(0, 0, 0, 0.42); pointer-events: none;
}
.np.idle .np-veil { display: flex; }
.np-play {
  pointer-events: auto; display: flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.55);
}
.np-play:hover { border-color: #fff; }
.np-tri {
  width: 0; height: 0; margin-left: 4px;
  border-left: 17px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.np-hint { color: #fff; font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.85; }

/* The turn that says the clip is coming rather than sitting still. It sits
   between the picture and the bar — below the veil that carries the play
   button — so it can never be the thing standing on the press that starts a
   clip, and it takes no pointer events for the same reason. */
.np-spin {
  position: absolute; inset: 0; z-index: 3;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}
.np-spin.show { display: flex; }
.np-spin-ring {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: #fff;
  animation: np-turn 0.9s linear infinite;
}
@keyframes np-turn { to { transform: rotate(360deg); } }

/* The element's own controls run along the bottom edge of the clip, so the bar
   keeps out of their way by sitting along the top instead. */
.np-bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.np-btn {
  pointer-events: auto; cursor: pointer; color: #fff; font-size: 12.5px;
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.45);
}
.np-btn:hover { border-color: #fff; }
.np-clock { color: #fff; font-size: 12px; opacity: 0.9; font-variant-numeric: tabular-nums; }
.np-earn-tag {
  color: var(--ok, #4ade80);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
}
.np-fs { margin-left: 0; }

/* The sizes the source holds. Off the bar while nothing is mounted, and off it
   for good when there is only one size to choose from — a picker with a single
   entry is a button that does nothing. */
.np.idle .np-q { display: none; }
.np-q { position: relative; }
.np-q.hide { display: none; }
.np-q-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 6;
  display: none; flex-direction: column; gap: 2px; min-width: 80px;
  padding: 5px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.86);
}
.np-q-menu.show { display: flex; }
.np-q-opt {
  pointer-events: auto; cursor: pointer; color: #fff; font-size: 12.5px;
  text-align: right; padding: 5px 9px; border-radius: 7px;
  border: 1px solid transparent; background: transparent;
}
.np-q-opt:hover { border-color: rgba(255, 255, 255, 0.5); }
.np-q-opt.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.np-next {
  position: absolute; right: 12px; bottom: 56px; z-index: 3;
  display: none; align-items: center; gap: 10px; max-width: 310px;
  padding: 8px; border-radius: 11px; text-decoration: none; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.8);
}
.np-next.show { display: flex; }
.np-next:hover { border-color: var(--accent); }
.np-next-thumb { display: block; width: 92px; height: 52px; object-fit: cover; border-radius: 7px; }
.np-next-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-next-label { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.75; }
.np-next-name { font-size: 13px; font-weight: 600; }
.np-next-sub { font-size: 11.5px; opacity: 0.7; }

.side-list { display: flex; flex-direction: column; gap: 10px; }

.side-item {
  display: flex;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 8px;
}

.side-item:hover { border-color: var(--accent); }

.side-thumb {
  width: 84px;
  height: 54px;
  border-radius: 7px;
  background: var(--thumb-bg);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: .8;
  overflow: hidden;
}

.side-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.side-name {
  font-size: 12.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.side-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* The same full-clip figure the cards carry, on the "Up next" rows, so a clip
   is picked on what it pays as much as on its name. */
.side-pay { font-size: 11px; font-weight: 600; color: var(--ok); margin-top: 2px; }

/* -------------------------------------------------------------- earn card */

.earn-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px 16px 16px;
  margin-top: 16px;
}

.earn-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.earn-label { font-size: 13px; font-weight: 600; }

.earn-rate {
  font-size: 12px;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}

.earn-live {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 10px;
}

.earn-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.earn-timer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.earn-timer .tm {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1;
}

.earn-figure .val {
  font-size: 27px;
  font-weight: 700;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.earn-unit { font-size: 12px; }

.earn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 0;
}

.earn-grid dt { font-size: 11px; color: var(--muted); }

.earn-grid dd {
  margin: 3px 0 0;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .earn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The player bar carries the toggle, both jump controls, the clock, the earn
     tag and fullscreen — more than fits across a phone, so it wraps onto a
     second row rather than running off the edge of the picture. */
  .np-bar { flex-wrap: wrap; gap: 7px; padding: 8px 9px; }
  .np-btn { padding: 3px 8px; font-size: 12px; }
  .np-earn-tag { margin-left: 0; }
}

.progress {
  height: 6px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .2s;
}

/* --------------------------------------------------------------- comments */

.comments {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.comment-form { display: flex; gap: 8px; margin: 12px 0 4px; }

.comment-form input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
}

.comment-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }

.comment {
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}

.comment:last-child { border-bottom: 0; }

.comment-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.comment-author { font-size: 12.5px; font-weight: 600; }

.comment-when { font-size: 11px; color: var(--muted); }

.comment-mine {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 1px 5px;
}

.comment-body { margin: 0; font-size: 13.5px; line-height: 1.5; }

.comment-tools { margin-top: 10px; }

.comment-tools button {
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
}


/* ------------------------------------------------------------------- tabs */

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.tab {
  padding: 8px 15px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}

.tab.on { border-color: var(--accent); color: var(--text); background: var(--panel-2); }

.pane { display: none; }
.pane.on { display: block; }

/* ------------------------------------------------------------------- gate */

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--gate-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gate.hidden { display: none; }

.gate-box {
  max-width: 420px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 26px;
}

.gate-box h2 { margin: 0 0 10px; font-size: 21px; }
.gate-box p { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }
.gate-box .actions { display: flex; gap: 10px; justify-content: center; }

/* ------------------------------------------------------------------ misc */

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 17px;
  font-size: 13.5px;
  z-index: 120;
  transition: transform .22s;
  max-width: 90vw;
}

.toast.show { transform: translateX(-50%) translateY(0); }

.notice.show { display: block !important; }

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

/* The terms a purchase is accepted on. It covers the page rather than sitting
   inline, because it has to be answered before the money moves and it has to be
   readable on a phone. */
.nt-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 110;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 26px 14px 44px;
  overflow-y: auto;
  background: rgba(6, 5, 10, .74);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.nt-modal-sheet {
  width: 100%;
  max-width: 620px;
  margin: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.nt-modal-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.nt-modal-terms {
  margin: 12px 0 4px;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}

.nt-modal-terms li { margin-bottom: 5px; }

.nt-modal-accept {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  cursor: pointer;
}

.nt-modal-accept input { margin: 3px 0 0; flex: none; }

.nt-modal-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nt-modal-acts .btn { text-decoration: none; }

.empty { color: var(--muted); text-align: center; padding: 40px 0; font-size: 14px; }

.muted { color: var(--muted); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }

.foot {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 22px 0 40px;
  color: var(--muted);
  font-size: 12.5px;
}

/* ------------------------------------------------------------------ admin */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 12px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 15px;
}

.stat .k {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat .v {
  font-size: 21px;
  font-weight: 600;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

.stat .v.good { color: var(--ok); }
.stat .v.warnv { color: var(--accent-2); }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.toolbar input, .toolbar select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  padding: 8px 11px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
}

.toolbar input { min-width: 220px; }
.toolbar input:focus, .toolbar select:focus { border-color: var(--accent); }

.range { color: var(--muted); font-size: 12.5px; margin-left: auto; white-space: nowrap; }

.panel.flush { padding: 0; overflow-x: auto; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-wrap .table { min-width: 720px; }

.table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--panel-2); }
.table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.nowrap { white-space: nowrap; }
.table .strong { font-weight: 500; }
.table .sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }

.table select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  padding: 5px 7px;
  font-size: 12px;
  font-family: inherit;
}

.table input[type="text"], .table input[type="number"] {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  padding: 5px 8px;
  font-size: 12.5px;
  font-family: inherit;
  width: 88px;
}

.pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  white-space: nowrap;
}

.pill.live { color: #9ff0c9; border-color: rgba(70, 209, 154, .4); background: rgba(70, 209, 154, .1); }
.pill.hidden { color: #ffd7b0; border-color: rgba(255, 138, 76, .4); background: rgba(255, 138, 76, .1); }
.pill.removed { color: #ffb3b8; border-color: rgba(255, 95, 109, .45); background: rgba(255, 95, 109, .12); }
.pill.admin { color: #d9c2ff; border-color: rgba(160, 107, 255, .45); background: rgba(160, 107, 255, .12); }
/* A priced channel: the fee, or the fact that it has already been paid. */
.pill.fee { color: #ffd7b0; border-color: rgba(255, 138, 76, .45); background: rgba(255, 138, 76, .1); }

/* The channel fee panel, between the transcript and the composer. */
#chat-fee { margin: 0 0 10px; font-size: 13px; }
#chat-fee .meta { font-size: 12px; margin: 5px 0 10px; }

.taglist { display: flex; gap: 5px; flex-wrap: wrap; }

.pager {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

.pager button {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.pager button:hover:not(:disabled) { border-color: var(--accent); }
.pager button:disabled { opacity: .4; cursor: default; }

/* The numbered row: the page in hand is the one button that is not a link. */
.pager button.on {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  cursor: default;
}

.pager .gap { opacity: .6; padding: 0 2px; }

.ledger { max-width: 100%; }
.ledger td.num { white-space: nowrap; }
.ledger .pos { color: var(--ok); }
.ledger .neg { color: var(--danger); }

/* --------------------------------------------------------- theme picker */

.theme-pop {
  position: fixed;
  top: 68px;
  right: 18px;
  z-index: 60;
  width: 256px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  display: none;
}

.theme-pop.show { display: block; }

.theme-pop h4 {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 10px;
  font: 12.5px inherit;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.swatch:hover { border-color: var(--accent); }
.swatch.on { border-color: var(--accent); background: var(--panel); }
.swatch i { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }

.accent-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}

.accent-row input[type="color"] {
  width: 40px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}

.accent-row button { margin-left: auto; }

/* --------------------------------------------------- workspace (chat etc.) */

.work {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.pane-list {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  max-height: 72vh;
  overflow-y: auto;
}

.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 10px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.group-label {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 6px 6px;
}

.room {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 10px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.room:hover { background: var(--panel-2); }
.room.on { background: var(--panel-2); border-color: var(--accent); }

.room .t {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

.room .s {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  flex: 0 0 auto;
}

.stream {
  display: flex;
  flex-direction: column;
  height: 72vh;
  min-height: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.stream-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.stream-head h3 { margin: 0; font-size: 15px; }
.stream-head .meta { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Moderation controls live in the head of a transcript, next to the subject. */
.stream-head select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 6px 9px;
  font: 12.5px inherit;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

.stream-head select:focus { border-color: var(--accent); }

.msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.msg { max-width: 78%; }
.msg .who { font-size: 11px; color: var(--muted); margin-bottom: 3px; }

.msg .bubble {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13.5px;
  white-space: pre-wrap;
  word-break: break-word;
}

.msg.mine { align-self: flex-end; }
.msg.mine .who { text-align: right; }

.msg.mine .bubble {
  background: linear-gradient(135deg, var(--accent), #7a4de0);
  border-color: transparent;
  color: var(--on-accent);
}

.msg.sys { align-self: center; max-width: 100%; }
.msg.sys .bubble { font-size: 12px; color: var(--muted); background: transparent; border: 0; padding: 0; }
.msg.gone .bubble { font-style: italic; opacity: .62; }

.msg .mod {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.msg .mod:hover { color: var(--danger); }

.composer {
  display: flex;
  gap: 9px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.composer textarea {
  flex: 1;
  resize: none;
  height: 44px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 11px 12px;
  font: 14px/1.4 inherit;
  font-family: inherit;
  outline: none;
}

.composer textarea:focus { border-color: var(--accent); }

/* ------------------------------------------------------------ account page */

.stack { display: flex; flex-direction: column; gap: 16px; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
  align-items: start;
}

.kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); }
.kv .v { font-variant-numeric: tabular-nums; }
.kv .v.good { color: var(--ok); }
.kv .v.warnv { color: var(--accent-2); }

.qr {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  word-break: break-all;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  margin-top: 8px;
}

/* ------------------------------------------------------------------ nudges */

.rail { display: flex; flex-direction: column; gap: 7px; padding: 4px 6px 8px; }
.rail .item { font-size: 13px; }
.rail .item .n { color: var(--muted); font-size: 11.5px; }

/* ------------------------------------------------------------- identity */

.kyc-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
}

.kyc-step {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 150px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  font-size: 13px;
  color: var(--muted);
}

.kyc-step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.kyc-step.on { border-color: var(--accent); color: var(--text); }
.kyc-step.on .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kyc-step.done { border-color: var(--ok); color: var(--text); }
.kyc-step.done .n { background: var(--ok); border-color: var(--ok); color: #05130b; }

/* The liveness camera. Its frame is deliberately plain: a person has to be
   able to see their own face to follow the prompts, and anything drawn on top
   of it competes with the one thing the check is looking at. */
.cam {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 3;
  background: #05060a;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.cam video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.cam .face-ring {
  position: absolute;
  inset: 10% 20%;
  border: 2.5px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  pointer-events: none;
  transition: border-color .18s, transform .18s;
}

.cam .face-ring.hit { border-color: var(--ok); transform: scale(1.05); }

.cam .cam-msg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .86));
  color: #fff;
  font-size: 13.5px;
  text-align: center;
}

.cam .cam-idle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: #cfd3e0;
  font-size: 13px;
}

.kyc-thumb {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  max-width: 330px;
  background: var(--bg);
}

.kyc-thumb img { display: block; width: 100%; }

.kyc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

@media (max-width: 880px) {
  .watch-grid { grid-template-columns: 1fr; }
  .work { grid-template-columns: 1fr; }
  .pane-list { max-height: 260px; }
  .stream { height: 62vh; }
  .theme-pop { top: 62px; left: 12px; right: 12px; width: auto; }
  .top-inner { height: auto; padding: 10px 0; flex-wrap: wrap; }
  .search { order: 3; flex-basis: 100%; }
  .hero h1 { font-size: 22px; }
  .range { margin-left: 0; }
  /* The nav wraps on a narrow screen, so a menu hanging to the right of its
     button would run off the edge. */
  .menu-pop { left: auto; right: 0; }
}