/* ==========================================================================
   DUOCAST
   Deep-space control surface. Layers, in order:
     ambient (aurora → grid → grain → vignette) → content → chrome
   Everything is CSS; no image assets, no webfonts, no build step.
   ========================================================================== */

:root {
  --ink: #eaf2ff;
  --dim: #7f8db3;
  --dimmer: #55618a;
  --bg: #05060c;
  --panel: rgba(255, 255, 255, 0.038);
  --panel-2: rgba(255, 255, 255, 0.062);
  --line: rgba(255, 255, 255, 0.085);
  --line-2: rgba(255, 255, 255, 0.16);

  --cyan: #4cc9f0;
  --violet: #a06bff;
  --magenta: #ff5ea8;
  --amber: #ffc861;
  --emerald: #4ade80;
  --rose: #fb7185;

  --a: var(--cyan);
  --b: var(--magenta);

  --grad: linear-gradient(100deg, var(--cyan), var(--violet) 48%, var(--magenta));
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --r: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
body { display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }

/* ------------------------------------------------------------------ ambient */

.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  mix-blend-mode: screen;
}
.a1 {
  width: 62vw; height: 62vw; left: -14vw; top: -22vw;
  background: radial-gradient(circle, rgba(76, 201, 240, 0.75), transparent 62%);
  animation: drift1 34s ease-in-out infinite alternate;
}
.a2 {
  width: 54vw; height: 54vw; right: -12vw; top: -8vw;
  background: radial-gradient(circle, rgba(160, 107, 255, 0.7), transparent 62%);
  animation: drift2 41s ease-in-out infinite alternate;
}
.a3 {
  width: 70vw; height: 46vw; left: 22vw; bottom: -30vw;
  background: radial-gradient(circle, rgba(255, 94, 168, 0.42), transparent 62%);
  animation: drift3 52s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(9vw, 7vw, 0) scale(1.16); } }
@keyframes drift2 { to { transform: translate3d(-8vw, 9vw, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(6vw, -6vw, 0) scale(1.2); } }

/* perspective floor grid, drifting toward the viewer */
.gridplane {
  position: absolute; left: -30%; right: -30%; bottom: -12%; height: 62%;
  background-image:
    repeating-linear-gradient(90deg, rgba(120, 170, 255, 0.16) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, rgba(120, 170, 255, 0.13) 0 1px, transparent 1px 76px);
  transform: perspective(440px) rotateX(72deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  animation: flow 7s linear infinite;
  opacity: 0.75;
}
@keyframes flow { to { background-position: 0 76px, 0 76px; } }

.grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.42'/></svg>");
  opacity: 0.05;
  animation: jitter 0.7s steps(3) infinite;
}
@keyframes jitter {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2%, 1%); }
  66% { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(3, 4, 9, 0.82) 100%);
}

/* ------------------------------------------------------------------- chrome */

.topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 18px 30px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 10, 20, 0.86), rgba(8, 10, 20, 0.5));
  backdrop-filter: blur(16px);
}

.wordmark { display: flex; align-items: baseline; gap: 10px; font-weight: 700; }
.sigil {
  font-size: 20px; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(76, 201, 240, 0.6));
}
.mark { letter-spacing: 0.34em; font-size: 16px; }
.mark-thin { letter-spacing: 0.3em; font-size: 11px; color: var(--dim); font-weight: 500; }

/* phase rail */
.rail { position: relative; display: flex; align-items: center; gap: 34px; flex: 1; min-width: 340px; }
.rail-line {
  position: absolute; left: 12px; right: 12px; top: 15px; height: 1px;
  background: var(--line); overflow: hidden;
}
.rail-line i {
  display: block; height: 100%; width: 0%;
  background: var(--grad);
  box-shadow: 0 0 14px rgba(120, 170, 255, 0.8);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.node {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 11px;
  background: none; border: 0; padding: 0; cursor: default; color: inherit; text-align: left;
}
.node-dot {
  width: 31px; height: 31px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-2);
  background: #0a0d18;
  font-family: var(--mono); font-size: 10px; color: var(--dim);
  transition: all 0.35s ease;
}
.node-text { display: flex; flex-direction: column; gap: 2px; }
.node-text strong { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--dim); transition: color 0.3s; }
.node-text em { font-style: normal; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dimmer); }

.node.is-active .node-dot {
  border-color: transparent; color: #04060d;
  background: var(--grad);
  box-shadow: 0 0 0 4px rgba(76, 201, 240, 0.12), 0 0 26px rgba(120, 170, 255, 0.55);
}
.node.is-active .node-text strong { color: var(--ink); }
.node.is-done .node-dot { border-color: rgba(74, 222, 128, 0.5); color: var(--emerald); }
.node.is-done .node-text strong { color: rgba(234, 242, 255, 0.8); }
.node.is-live .node-dot { animation: ping 1.5s ease-in-out infinite; }
@keyframes ping {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 94, 168, 0.14), 0 0 22px rgba(255, 94, 168, 0.5); }
  50% { box-shadow: 0 0 0 9px rgba(255, 94, 168, 0.04), 0 0 34px rgba(255, 94, 168, 0.75); }
}

/* meter */
.meter { min-width: 210px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.meter-num { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.meter-bar { margin: 7px 0 5px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.meter-bar i {
  display: block; height: 100%; width: 0%;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(120, 170, 255, 0.7);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.meter-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dimmer); }

.microlabel {
  font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--dim); font-weight: 600;
}
.dim { color: var(--dimmer); }
.micro { font-size: 10px; letter-spacing: 0.1em; }

/* --------------------------------------------------------------- structure */

main {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; gap: 18px;
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 24px 30px 40px;
}

.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014));
  backdrop-filter: blur(20px) saturate(1.15);
  padding: 20px 22px;
  overflow: hidden;
}
/* lit top edge */
.panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160, 200, 255, 0.55), transparent);
  opacity: 0.7;
}
/* corner accent */
.panel::after {
  content: ""; position: absolute; right: -1px; top: -1px; width: 74px; height: 74px;
  background: radial-gradient(circle at 100% 0%, rgba(160, 107, 255, 0.22), transparent 68%);
  pointer-events: none;
}

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.panel-hint { font-size: 11px; color: var(--dimmer); }
.panel-hint.warn { color: var(--amber); }

.split { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 1080px) { .split { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- brief */

.brief-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field.grow { flex: 1 1 380px; }

/* Style every input by default and exclude the ones that are not text fields.
   The previous version enumerated the types it styled (text, number), so the
   moment the app used type="email" or type="password" -- which is the whole
   sign-in card -- those rendered as bare browser inputs and looked broken. The
   default has to be "styled", with exceptions named, or the next new type
   silently regresses. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
  width: 100%;
  background: rgba(6, 9, 18, 0.72);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  padding: 11px 13px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}
/* A select with appearance:none loses its arrow, so draw one back in. */
select {
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
                    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Password managers inject an icon root inside the label. That element carries
   inline `position/height/width !important`, which an author rule cannot
   reliably beat, so the layout must not *depend* on the children being ours.
   Spacing therefore comes from a margin on the label rather than from `gap` on
   the column: an injected zero-height node then adds nothing.

   There used to be a `pointer-events: none` on every non-input child here, to
   stop that injected node swallowing clicks. It also matched `.voice-row`, and
   pointer-events inherits -- so the play button and the voice dropdown inside it
   were both dead to real clicks while still responding to `.click()` in a
   console. The margin approach makes it unnecessary; do not reintroduce it. */
.field { position: relative; }
.field > .microlabel { margin-bottom: 7px; }
input::placeholder { color: var(--dimmer); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(76, 201, 240, 0.55);
  box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.12), 0 0 22px rgba(76, 201, 240, 0.18);
  background: rgba(6, 9, 18, 0.9);
}
#minutes, #language { width: 130px; }

.brief-actions { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.brief-note { margin: 0; max-width: 60ch; font-size: 11.5px; line-height: 1.65; color: var(--dimmer); }

/* --------------------------------------------------------------------- cta */

.cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px;
  border: 0; border-radius: 12px;
  background: var(--grad);
  color: #05070f;
  font-weight: 700; font-size: 13.5px; letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 34px -12px rgba(120, 170, 255, 0.9);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s, filter 0.2s;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 16px 44px -12px rgba(160, 107, 255, 0.95); }
.cta:active { transform: translateY(0) scale(0.995); }
.cta:disabled { filter: grayscale(0.75) brightness(0.6); cursor: not-allowed; transform: none; box-shadow: none; }
.cta-tag {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(5, 7, 15, 0.26); letter-spacing: 0.14em; text-transform: uppercase;
}
.cta-glow {
  position: absolute; top: 0; bottom: 0; width: 44%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-160%) skewX(-18deg);
}
.cta:hover .cta-glow { animation: sweep 0.85s ease-out; }
@keyframes sweep { to { transform: translateX(320%) skewX(-18deg); } }

.ghost {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  color: var(--dim);
  padding: 11px 16px; border-radius: 11px;
  font-size: 12.5px; cursor: pointer;
  transition: all 0.2s;
}
.ghost:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255, 255, 255, 0.07); }
.ghost:disabled { opacity: 0.45; cursor: not-allowed; }
.tag-free {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--emerald); margin-left: 5px;
}

/* ------------------------------------------------------------------- story */

.story-meta { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--ink);
}
.chip.dim { color: var(--dim); }
.chip.accent { border-color: rgba(76, 201, 240, 0.45); color: var(--cyan); }

.story .field { margin-bottom: 13px; }
#title { font-size: 16px; font-weight: 600; }

.lines-head { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 9px; }
.lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.line {
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 62px;
  gap: 12px; align-items: start;
  padding: 10px 12px 10px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.018);
  transition: background 0.2s, border-color 0.2s;
}
.line:hover { background: rgba(255, 255, 255, 0.045); }
.line:focus-within { border-color: var(--line-2); background: rgba(255, 255, 255, 0.055); }
.line::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px;
  border-radius: 2px; background: currentColor; opacity: 0.75;
}
.line[data-host="A"] { color: var(--a); }
.line[data-host="B"] { color: var(--b); }

.host-pill {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  border: 0; cursor: pointer; color: #05070f;
  transition: transform 0.15s, box-shadow 0.2s;
}
.line[data-host="A"] .host-pill { background: linear-gradient(140deg, #7ee0ff, var(--a)); box-shadow: 0 0 18px -4px var(--a); }
.line[data-host="B"] .host-pill { background: linear-gradient(140deg, #ffa6cf, var(--b)); box-shadow: 0 0 18px -4px var(--b); }
.host-pill:hover { transform: scale(1.07); }

.line textarea {
  border: 0; background: transparent; padding: 4px 2px; color: var(--ink);
  font-size: 13.5px; line-height: 1.6; resize: none; overflow: hidden;
  box-shadow: none;
}
.line textarea:focus { outline: none; box-shadow: none; background: transparent; border: 0; }

.line-time {
  font-family: var(--mono); font-size: 10.5px; color: var(--dimmer);
  text-align: right; padding-top: 7px; font-variant-numeric: tabular-nums;
}

.publish { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.publish summary { cursor: pointer; user-select: none; }
.publish-body { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.publish-body .field { margin: 0; }

/* --------------------------------------------------------------- references */

.refs-note { margin: 0 0 14px; font-size: 11.5px; line-height: 1.6; color: var(--dimmer); }
.ref-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow-y: auto; padding-right: 4px; }

.ref {
  position: relative;
  border: 1px solid var(--line);
  border-left: 2px solid var(--k, var(--cyan));
  border-radius: 11px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, 0.022);
  transition: background 0.2s, transform 0.18s;
}
.ref:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(2px); }
.ref-claim { font-size: 12.5px; line-height: 1.55; color: var(--ink); margin: 0 0 8px; }
.ref-src { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--dim); }
.ref-kind {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px;
  color: var(--k, var(--cyan));
  border: 1px solid color-mix(in srgb, var(--k, var(--cyan)) 45%, transparent);
  background: color-mix(in srgb, var(--k, var(--cyan)) 12%, transparent);
}
.ref-work { color: rgba(234, 242, 255, 0.82); }
.ref-detail { color: var(--dimmer); }

/* ------------------------------------------------------------------ commit */

.commit { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.commit-left { display: flex; gap: 10px; flex-wrap: wrap; }
.commit-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.priceblock { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.price {
  font-family: var(--mono); font-size: 24px; font-variant-numeric: tabular-nums; font-weight: 600;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* -------------------------------------------------------------- production */

.production.is-live { border-color: rgba(255, 94, 168, 0.35); }
.console {
  margin: 0;
  max-height: 260px; overflow: auto;
  background: rgba(2, 4, 10, 0.86);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 15px;
  font-family: var(--mono); font-size: 11px; line-height: 1.75;
  color: #9fb4d8; white-space: pre-wrap; word-break: break-word;
}
.console::after { content: "▌"; color: var(--cyan); animation: caret 1.05s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.deliverables { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.deliverable { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; background: rgba(255, 255, 255, 0.022); }
.deliverable-head { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; flex-wrap: wrap; }
.deliverable-head .name { font-size: 13px; font-weight: 600; }
.deliverable video { width: 100%; max-width: 760px; border-radius: 10px; background: #000; display: block; }

.stagelist { display: flex; gap: 6px; }
.stage {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line); color: var(--dimmer);
}
.stage.on { color: var(--emerald); border-color: rgba(74, 222, 128, 0.42); background: rgba(74, 222, 128, 0.09); }

/* --------------------------------------------------------------- statusbar */

.statusbar {
  /* Pinned to the bottom of the viewport, starting to the right of the fixed nav
     rail so its left side is not hidden behind it. */
  position: fixed; left: 250px; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 30px;
  border-top: 1px solid var(--line);
  background: rgba(6, 8, 16, 0.9);
  backdrop-filter: blur(14px);
  font-size: 11.5px; color: var(--dim);
}
@media (min-width: 901px) {
  body.nav-collapsed .statusbar { left: 76px; }
}
.statusbar .dim { margin-left: auto; font-family: var(--mono); font-size: 10.5px; }

/* Footer legal links. Kept visible at every width — a policy nobody can reach is
   the same as no policy — so only the credit line drops on small screens. */
.statusbar .legallinks {
  display: flex; align-items: center; gap: 8px;
  margin-left: 16px; padding-left: 16px;
  border-left: 1px solid var(--line);
  font-size: 10.5px; letter-spacing: 0.06em; white-space: nowrap;
}
.statusbar .legallinks a { color: var(--dim); text-decoration: none; }
.statusbar .legallinks a:hover { color: var(--ink); }
.statusbar .legallinks .dot { color: var(--dimmer); }
.statusbar .legallinks .madeby { color: var(--dimmer); }
.statusbar .legallinks .madeby b { color: var(--dim); font-weight: 600; }
@media (max-width: 1040px) {
  .statusbar .legallinks .madeby { display: none; }
  .statusbar .legallinks .dot:last-of-type { display: none; }
}
@media (max-width: 760px) {
  .statusbar .legallinks { border-left: 0; margin-left: auto; padding-left: 0; }
  .statusbar #status-right { display: none; }
}
.pulse {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--dimmer); transition: background 0.3s, box-shadow 0.3s;
}
.pulse.live { background: var(--magenta); box-shadow: 0 0 0 0 rgba(255, 94, 168, 0.6); animation: live 1.6s infinite; }
.pulse.ok { background: var(--emerald); box-shadow: 0 0 12px rgba(74, 222, 128, 0.7); }
.pulse.bad { background: var(--rose); box-shadow: 0 0 12px rgba(251, 113, 133, 0.7); }
@keyframes live {
  70% { box-shadow: 0 0 0 9px rgba(255, 94, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 94, 168, 0); }
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

@media (prefers-reduced-motion: reduce) {
  .aurora, .gridplane, .grain, .cta-glow, .console::after, .pulse { animation: none !important; }
}

/* ==========================================================================
   2. LIGHT THEME
   Same layout, same components, inverted surface scale. Set on <html> so the
   ambient layers can react before the body paints. The aurora is kept but
   dropped in opacity and blended differently — a dark glow on white reads as
   dirt, so in light mode it becomes a soft tint instead.
   ========================================================================== */

[data-theme="light"] {
  --ink: #0d1425;
  --dim: #5b6784;
  --dimmer: #8b96ae;
  --bg: #f4f6fb;
  --panel: rgba(255, 255, 255, 0.86);
  --panel-2: rgba(255, 255, 255, 0.98);
  --line: rgba(15, 25, 50, 0.11);
  --line-2: rgba(15, 25, 50, 0.22);
  --cyan: #0a94c4;
  --violet: #7a3fe0;
  --magenta: #d6357f;
  --amber: #b5761a;
  --emerald: #17915b;
  --rose: #d63a52;
  --grad: linear-gradient(100deg, #0a94c4, #7a3fe0 48%, #d6357f);
}
[data-theme="light"] .ambient { opacity: 0.5; }
[data-theme="light"] .aurora { filter: blur(110px); opacity: 0.24; mix-blend-mode: normal; }
[data-theme="light"] .gridplane { opacity: 0.5; filter: invert(0.75); }
[data-theme="light"] .grain { opacity: 0.028; }
[data-theme="light"] .vignette {
  background: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(20, 30, 60, 0.07) 100%);
}
[data-theme="light"] .topbar,
[data-theme="light"] .statusbar { background: rgba(255, 255, 255, 0.86); }
[data-theme="light"] .panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.82));
  box-shadow: 0 1px 2px rgba(15, 25, 50, 0.04), 0 10px 30px -18px rgba(15, 25, 50, 0.28);
}
/* The base input rule carries eight :not() clauses (specificity 0,0,1,8), so the
   light override has to match that chain exactly or the dark background wins. */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
[data-theme="light"] select,
[data-theme="light"] textarea { background-color: #fff; }
[data-theme="light"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  background-color: #fff; border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
[data-theme="light"] .capcard { background: #fff; }
[data-theme="light"] .brand-grid input[type="color"] { background: #fff; }
[data-theme="light"] .pv-select,
[data-theme="light"] .tpl-bar select { background: #fff; }
[data-theme="light"] .promptbox { background: rgba(15, 25, 50, 0.05); }
[data-theme="light"] .console { background: #0d1425; color: #cfe0ff; }
[data-theme="light"] .line { background: rgba(15, 25, 50, 0.022); }
[data-theme="light"] .line:hover { background: rgba(15, 25, 50, 0.05); }
[data-theme="light"] .cta { color: #fff; }
[data-theme="light"] .cta-tag { background: rgba(255, 255, 255, 0.24); color: #fff; }
[data-theme="light"] .node-dot { background: #fff; }
[data-theme="light"] .chip { background: rgba(15, 25, 50, 0.035); }
[data-theme="light"] .ref { background: rgba(15, 25, 50, 0.018); }
[data-theme="light"] .ref:hover { background: rgba(15, 25, 50, 0.045); }
[data-theme="light"] .meter-bar { background: rgba(15, 25, 50, 0.1); }
[data-theme="light"] .stage,
[data-theme="light"] .console { border-color: rgba(15, 25, 50, 0.14); }

.theme-toggle {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--dim);
  font-size: 15px; transition: all 0.2s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line-2); }
[data-theme="light"] .theme-toggle { background: #fff; }

/* ==========================================================================
   3. SHELL — nav, views, cards, tables, badges
   ========================================================================== */

.navtabs { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.navtabs button {
  display: inline-flex; align-items: center;
  background: none; border: 0; cursor: pointer; color: var(--dim);
  padding: 8px 13px; border-radius: 9px; font-size: 12.5px; letter-spacing: 0.03em;
  transition: all 0.18s;
}
.navtabs button:hover { color: var(--ink); background: rgba(127, 141, 179, 0.1); }
.navtabs button.active {
  color: var(--ink); background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.navtabs .badge {
  font-family: var(--mono); font-size: 9.5px; margin-left: 6px;
  padding: 1px 6px; border-radius: 999px; background: var(--grad); color: #fff;
}

.view { display: none; }
.view.active { display: block; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid-3 { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  background: var(--panel);
  transition: transform 0.18s, border-color 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.card h3 { margin: 0 0 4px; font-size: 14px; }
.card p { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.55; }
.card .price-tag {
  font-family: var(--mono); font-size: 20px; font-weight: 600; margin: 10px 0 2px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card.pick { cursor: pointer; }
.card.pick:hover { border-color: var(--cyan); }
.card.is-chosen { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.14); }
.card .thumb {
  width: 100%; aspect-ratio: 16/9; border-radius: 10px; object-fit: cover;
  background: rgba(127, 141, 179, 0.12); display: block; margin-bottom: 11px;
}
.card .feat { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.card .feat li { font-size: 11.5px; color: var(--dim); }
.card .feat li::before { content: "▸ "; color: var(--cyan); }

.badge-pill {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim);
}
.badge-pill.ok { color: var(--emerald); border-color: rgba(74, 222, 128, 0.4); }
.badge-pill.warn { color: var(--amber); border-color: rgba(255, 200, 97, 0.4); }
.badge-pill.bad { color: var(--rose); border-color: rgba(251, 113, 133, 0.4); }
.badge-pill.grad { background: var(--grad); color: #fff; border-color: transparent; }

table.list { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.list th {
  text-align: left; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dim); font-weight: 600; padding: 0 12px 9px;
}
table.list td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
table.list tr:hover td { background: rgba(127, 141, 179, 0.05); }
table.list .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
table.list .spend { color: var(--rose); }
table.list .gain { color: var(--emerald); }

.rowbtns { display: flex; gap: 7px; flex-wrap: wrap; }
.btn-sm {
  font-size: 11.5px; padding: 7px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--dim);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.btn-sm:hover { color: var(--ink); border-color: var(--line-2); }
.btn-sm.primary { background: var(--grad); color: #fff; border-color: transparent; font-weight: 600; }

.empty-state {
  padding: 42px 20px; text-align: center; color: var(--dim); font-size: 13px;
  border: 1px dashed var(--line); border-radius: 14px;
}

/* A one-line callout under a panel head: the reconnect prompt on Analytics, etc. */
.notice {
  font-size: 12.5px; line-height: 1.6; border-radius: 10px; padding: 11px 14px;
  border: 1px solid var(--line); background: rgba(127, 141, 179, 0.06); color: var(--dim);
}
.notice.warn { border-color: rgba(255, 200, 97, 0.4); color: var(--amber); }

#an-videos img { background: var(--line); }
#an-videos th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
#an-videos th.sortable:hover { color: var(--ink); }

/* Analytics episode links: bright and bold on the dark panel, plain black on light. */
#an-videos table a { text-decoration: none; color: #fff; font-weight: 900; }
[data-theme="light"] #an-videos table a { color: #000; }

/* The relayer line on Admin → On-chain funds: bold and high-contrast so the
   address you must fund is impossible to miss. The amber "send BNB" note keeps
   its own colour (it is inline-styled). */
#admin-chain-hint { color: #fff; font-weight: 900; }
[data-theme="light"] #admin-chain-hint { color: #000; }

.meter-mini { display: flex; flex-direction: column; gap: 2px; min-width: 170px; }
.meter-mini .who { font-size: 11px; color: var(--dim); }
.meter-mini .bal { font-family: var(--mono); font-size: 15px; }

.pay-box {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 12px;
  background: rgba(127, 141, 179, 0.05);
}
.pay-addr {
  font-family: var(--mono); font-size: 11px; word-break: break-all; line-height: 1.6;
  padding: 9px 11px; border-radius: 8px; background: rgba(127, 141, 179, 0.1);
  border: 1px solid var(--line); cursor: copy;
}
.pay-qr { width: 132px; height: 132px; border-radius: 10px; background: #fff; padding: 6px; }

/* Payment dialog: the QR is the thing people point a phone at, so it gets the
   room to be read from across a desk, and the coin/network sit right above it. */
.pay-dialog { display: grid; gap: 12px; justify-items: center; text-align: center; }
.pay-qr-lg {
  width: 320px; height: 320px; max-width: 78vw; max-height: 78vw;
  background: #fff; border-radius: 16px; padding: 10px;
}
.pay-qr-lg img { width: 100%; height: 100%; display: block; border-radius: 8px; }
.pay-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pay-tag {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim);
}
.pay-amount { margin: 0; font-size: 15px; }
.pay-timer { font-family: var(--mono); font-size: 16px; }
.pay-timer.expired { color: var(--amber); font-size: 12px; max-width: 420px; }
.pay-timer.done { color: var(--emerald); }
.pay-dialog .pay-addr { width: 100%; text-align: center; }

/* Support chat (in-app, relayed to admins on the support bot). */
.sup { display: flex; flex-direction: column; gap: 10px; }
.sup-log { min-height: 220px; max-height: 48vh; overflow-y: auto; display: flex;
  flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(127, 141, 179, 0.05); }
.sup-msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px;
  line-height: 1.5; white-space: pre-wrap; word-break: break-word; position: relative; }
.sup-msg.user { align-self: flex-end; background: var(--grad); color: #fff; }
.sup-msg.admin { align-self: flex-start; background: rgba(127, 141, 179, 0.14);
  border: 1px solid var(--line); color: var(--ink); }
.sup-at { display: block; font-size: 10px; opacity: 0.6; margin-top: 3px; text-align: right; }
.sup-row { display: flex; gap: 8px; }
.sup-row input { flex: 1; min-width: 0; }
.sup-ended { align-self: stretch; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line);
  text-align: center; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dimmer); }

/* Admin console: dense tables that keep their columns readable in the shared
   modal, and a divider between the facts about a user and the actions on them. */
.admin-hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.admin-user .brief-row { flex-wrap: wrap; }
.admin-user .card { padding: 8px 10px; }

.toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  display: flex; flex-direction: column; gap: 9px; max-width: 380px;
}
.toast .t {
  border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  background: var(--panel-2); backdrop-filter: blur(16px);
  border-radius: 11px; padding: 12px 15px; font-size: 12.5px; color: var(--ink);
  box-shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.6);
  animation: slidein 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast .t.bad { border-left-color: var(--rose); }
.toast .t.ok { border-left-color: var(--emerald); }
@keyframes slidein { from { opacity: 0; transform: translateX(22px); } }

.modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(4, 6, 12, 0.72); backdrop-filter: blur(6px); padding: 20px;
}
.modal.hidden { display: none; }
.modal-card {
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  background: var(--panel-2); box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.8);
}
[data-theme="light"] .modal-card { background: #fff; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h2 { margin: 0; font-size: 15px; }

/* Settings: a left rail of tabs and one pane at a time, in a wider card. */
.modal-card.modal-wide { width: min(880px, 100%); }
.settings { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 22px; align-items: start; }
.setnav { display: flex; flex-direction: column; gap: 4px; }
.setnav-btn {
  text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--dim); font-size: 12.5px; cursor: pointer; font-weight: 500;
}
.setnav-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); }
.setnav-btn.on {
  background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--ink); font-weight: 600;
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
}
.setpanes { min-width: 0; }
.setpane { display: none; }
.setpane.on { display: block; }
.settitle { margin: 0 0 12px; font-size: 15px; letter-spacing: -0.01em; }
.setnote { margin: 0 0 12px; font-size: 12.5px; color: var(--dim); line-height: 1.6; }
.setstat {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--panel);
}
.setstat > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setstat b { font-size: 13px; color: var(--ink); word-break: break-word; }
.setpane .brand-grid { max-width: 560px; }
@media (max-width: 640px) {
  .settings { grid-template-columns: 1fr; gap: 14px; }
  .setnav { flex-direction: row; overflow-x: auto; }
  .setnav-btn { white-space: nowrap; }
}

.auth-wrap { display: grid; place-items: center; min-height: 68vh; }
.auth-card {
  width: min(430px, 100%); border: 1px solid var(--line); border-radius: 18px;
  padding: 30px; background: var(--panel); backdrop-filter: blur(20px);
}
.auth-card h1 { margin: 0 0 4px; font-size: 20px; letter-spacing: 0.02em; }
.auth-card .sub { margin: 0 0 22px; font-size: 12.5px; color: var(--dim); line-height: 1.6; }
.auth-card .field { margin-bottom: 13px; }
.switcher { text-align: center; margin-top: 16px; font-size: 12px; color: var(--dim); }
.auth-legal { text-align: center; margin: 12px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--dim); }

/* Help dialog: the collapsible topic-tags section and its lists. */
.helpsection { margin: 0 0 14px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 12px; padding: 10px 12px; }
.helpsection summary { cursor: pointer; font-weight: 600; }
.helpsection[open] summary { margin-bottom: 8px; }
.taglist { margin: 6px 0; padding-left: 18px; }
.taglist li { margin: 7px 0; font-size: 12.5px; line-height: 1.55; color: var(--ink); }
.taglist code { background: rgba(255, 255, 255, 0.07); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
.auth-legal a { color: var(--dim); text-decoration: underline; }
.auth-legal a:hover { color: var(--ink); }
.switcher button { background: none; border: 0; color: var(--cyan); cursor: pointer; font-size: 12px; text-decoration: underline; }
.err { color: var(--rose); font-size: 12px; min-height: 17px; margin-top: 8px; }

/* ==========================================================================
   4. CAST GENERATION UI
   ========================================================================== */

.card.is-generating { border-color: rgba(76, 201, 240, 0.5); }
.card .thumb { display: grid; place-items: center; gap: 8px; }
.thumb-note { font-size: 11px; color: var(--dim); letter-spacing: 0.08em; }
.spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(127, 141, 179, 0.25);
  border-top-color: var(--cyan);
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ref-drop {
  border: 1px dashed var(--line-2); border-radius: 12px;
  padding: 18px; cursor: pointer; text-align: center;
  font-size: 12.5px; color: var(--dim);
  transition: border-color 0.2s, background 0.2s;
}
.ref-drop:hover, .ref-drop.over { border-color: var(--cyan); background: rgba(76, 201, 240, 0.06); }
.ref-drop.has-ref {
  display: flex; align-items: center; gap: 14px; text-align: left; padding: 12px;
  border-style: solid; border-color: var(--line);
}
.ref-thumb {
  width: 76px; height: 76px; border-radius: 9px; object-fit: contain;
  background: rgba(127, 141, 179, 0.14); flex: none; padding: 3px;
}
.ref-drop b { color: var(--ink); }

/* ==========================================================================
   5. RUNNING JOB PANEL
   ========================================================================== */

.running.hidden { display: none; }
.running { border-color: rgba(76, 201, 240, 0.4); }
.running-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.running-head .spin { width: 16px; height: 16px; border-width: 2px; }
.running-head .spacer { flex: 1; }

/* ----------------------------------------------------------------- resume */

/* A draft the server is still holding. Amber, not blue: it is an offer to
   recover something, not work that is currently happening. */
.resume.hidden { display: none; }
.resume { border-color: rgba(255, 200, 97, 0.42); }
.resume-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.resume-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.resume-text b { font-size: 15px; font-weight: 600; }
.resume-kicker {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber);
}
.resume .rowbtns { flex: none; }

/* ---------------------------------------------------------- advanced studio */

.adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .adv-grid { grid-template-columns: 1fr; } }
/* Per-platform account pickers — up to three across, only for the platforms
   that are actually selected, so no empty "choose an account" control shows. */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px; margin-top: 12px; }
.acct-grid:empty { display: none; }
#adv-player { display: block; width: 100%; max-width: 860px; border-radius: 14px; background: #000; }

/* bulk stories */
#bulk-topics { width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg); cursor: pointer; }
.chk input { width: 16px; height: 16px; }
.bulk-preview { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.bulk-preview:empty { display: none; }
.bulk-preview table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bulk-preview th { text-align: left; font-size: 11px; color: var(--dim); font-weight: 600;
  padding: 8px 10px; background: color-mix(in srgb, var(--fg) 4%, transparent); }
.bulk-preview td { padding: 7px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.bulk-preview td.bp-topic { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-preview .bp-time { font-variant-numeric: tabular-nums; color: var(--dim); }
/* connections: several named accounts per platform */
.conn-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.conn-row .conn-label { flex: 1; min-width: 0; }

/* upload history: row selection + bulk actions */
.hist-check { width: 30px; text-align: center; }
.priv-tag { font-size: 11px; color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.hist-check input { width: 15px; height: 15px; }
.acct-tag { font-weight: 600; }
.bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.bulk-bar:empty { display: none; }
.bulk-bar select { width: auto; min-width: 110px; }

.bulk-run { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--line); }
.bulk-run:first-child { border-top: 0; }
.bulk-run .bulk-run-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bulk-prog { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.bulk-prog .bp-state { font-size: 11px; color: var(--dim); }

/* autopilot: the per-format -> per-platform matrix in the setup dialog */
.ap-matrix { width: 100%; border-collapse: collapse; }
.ap-matrix th { font-size: 11px; color: var(--dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px; padding: 4px 8px; }
.ap-matrix td { border-top: 1px solid var(--line); padding: 5px 8px; }
/* A platform with no connected account: dim its column and grey its checkboxes. */
.ap-matrix th.is-off { opacity: .35; }
.ap-matrix input[type="checkbox"]:disabled { opacity: .28; cursor: not-allowed; }
#ap-list .bulk-run:first-child { border-top: 0; }

/* autopilot: the posting schedule + results table */
.ap-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ap-table th { text-align: left; font-size: 11px; color: var(--dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px; padding: 8px 10px; white-space: nowrap; }
.ap-table td { border-top: 1px solid var(--line); padding: 7px 10px; vertical-align: top; }
.ap-table td.bp-topic { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-table td.bp-time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   6. NEW CAST PANEL
   ========================================================================== */

.newcast { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .newcast { grid-template-columns: 1fr; } }
.newcast-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .newcast-fields { grid-template-columns: 1fr; } }
.newcast .ref-drop { min-height: 168px; display: grid; place-items: center; }
.newcast .ref-drop.has-ref { display: flex; min-height: 0; }
.newcast .ref-drop:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ==========================================================================
   7. VOICE PICKERS
   ========================================================================== */

.voice-row { display: flex; gap: 7px; align-items: stretch; }
.voice-row select { flex: 1; min-width: 0; }
.voice-row .btn-sm { flex: none; width: 42px; justify-content: center; font-size: 13px; }
.voice-row .btn-sm.playing { background: var(--grad); color: #fff; border-color: transparent; }
.voice-note { font-size: 10.5px; color: var(--dimmer); margin-top: 4px; }
.voice-note.bad { color: var(--amber); }

/* The reference note is part of the reference, so it spans the column below it. */
/* The reference column: the image, and directly beneath it what the image is
   for. Kept as one grid child so the fields grid keeps the wide column. */
.ref-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#ref-note-hint { margin-top: 6px; line-height: 1.5; }
/* The voice selects hold "♀ af_heart · A-", so give them room rather than
   relying on the grid to be wide enough. */
.newcast-fields .voice-row select { min-width: 0; width: 100%; }

/* ---- library: player, series, pager -------------------------------------- */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.pager .btn-sm:disabled { opacity: .35; cursor: default; }
.series-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px; font-size: 11px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--ink); cursor: pointer; white-space: nowrap;
}
.series-pill.empty { background: none; border-style: dashed; color: var(--dim); }
.series-pill:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.list tr.is-playing { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.player-wrap { margin: -6px 0 14px; }
.player-wrap video {
  width: 100%; max-height: 62vh; border-radius: 12px; background: #000; display: block;
}
.player-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* `hidden` is a UA default with lower specificity than any class rule, so
   .pager{display:flex} was winning and the pager showed on a single page. */
/* `hidden` must actually hide.
 *
 * Two elements on this page have class rules setting `display: flex`, and a class
 * rule beats the browser's built-in `[hidden] { display: none }`. The element then
 * stays on screen — showing only its default option, which reads as a broken
 * control rather than a hidden one. This is the one rule that makes the attribute
 * mean what it says everywhere, instead of per-element overrides that are easy to
 * forget. The two existing specific rules are now redundant but harmless. */
[hidden] { display: none !important; }

.pager[hidden] { display: none; }

/* Library: heading on its own line, then a clean, evenly-sized filter toolbar. */
.lib-head { flex-wrap: wrap; align-items: flex-start; }
.lib-head h2 { flex: 1 1 100%; margin-bottom: 2px; }
.lib-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  justify-content: flex-start; flex: 1 1 100%;
}
.lib-toolbar select,
.lib-toolbar input[type="search"],
.lib-toolbar .btn-sm {
  width: auto; min-width: 0; height: 36px; box-sizing: border-box;
  padding: 0 12px; font-size: 13px; border-radius: 9px; line-height: 34px;
}
.lib-toolbar select { max-width: 220px; }
.lib-toolbar input[type="search"] { flex: 1 1 220px; min-width: 180px; max-width: 340px; }
.lib-toolbar #lib-newproject,
.lib-toolbar #lib-refresh { white-space: nowrap; }
@media (max-width: 720px) {
  .lib-toolbar { justify-content: stretch; }
  .lib-toolbar input[type="search"] { flex: 1 1 100%; max-width: none; }
}

/* The series cell must not stretch the row when it is empty. */
.list .series-pill { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

/* ---- camera help --------------------------------------------------------- */
.navtabs .nav-help {
  margin-left: 6px; min-width: 26px; height: 26px; padding: 0;
  border-radius: 50%; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.cam-hero {
  border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; margin-bottom: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 130%);
}
.cam-lead { margin: 0 0 8px; font-size: 13px; line-height: 1.65; }
.cam-sub { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.6; }
.cam-hero code, .cam-sub code {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; font-size: 11.5px;
}
.cam-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
}
.cam-bar-left { display: flex; align-items: center; gap: 10px; }
.cam-bar select { width: auto; min-width: 200px; }
.cam-count {
  font-size: 11.5px; color: var(--dim); padding: 3px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); white-space: nowrap;
}
.cam-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-top: 16px;
}
@media (max-width: 900px) { .cam-grid { grid-template-columns: 1fr; } }
.cam-card {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--panel-2); transition: border-color .16s ease, transform .16s ease;
}
.cam-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.cam-card.is-inuse {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) inset;
}
.cam-media { position: relative; }
.cam-card video, .cam-pending {
  width: 100%; display: block; aspect-ratio: 16 / 9; background: #05060a; object-fit: cover;
}
.cam-badge {
  position: absolute; left: 9px; bottom: 9px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; color: #e7ecf7;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .16);
}
.cam-inuse {
  position: absolute; top: 9px; right: 9px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  color: #06121a; background: var(--accent);
}
.cam-card .cam-body { padding: 12px 15px 15px; }
.cam-card h4 { margin: 0 0 6px; font-size: 13.5px; }
.cam-card p { margin: 0 0 12px; font-size: 11.5px; color: var(--dim); line-height: 1.55; }
.cam-pending {
  display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center;
  color: var(--dimmer); font-size: 11.5px;
}
.cam-progress {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--dim); max-height: 130px; overflow: auto;
  white-space: pre-wrap; line-height: 1.5;
}

/* ---- per-character reference rows ---------------------------------------- */
.charref { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.charref-thumb {
  width: 34px; height: 34px; border-radius: 7px; object-fit: cover;
  border: 1px solid var(--line-2);
}
.charref-thumb[hidden] { display: none; }
#cast-set-blurb { margin-top: 5px; display: block; line-height: 1.45; }

/* ---- the five-step brief -------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.step { border-top: 1px solid var(--line); padding-top: 14px; }
.step:first-child { border-top: 0; padding-top: 0; }
.step-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.step-n {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.step-head b { font-size: 12.5px; }
.helpbtn {
  width: 19px; height: 19px; padding: 0; border-radius: 50%; font-size: 11px; font-weight: 700;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--dim);
  cursor: pointer; line-height: 1;
}
.helpbtn:hover { color: var(--ink); border-color: var(--accent); }
.step input[type="text"], .step input[type="number"], .step select { width: 100%; }
.durrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.durrow input[type="number"] { width: 96px; }
.durrow select { width: auto; min-width: 116px; }

/* cast cards: a picture is faster to choose from than a list of names */
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.pickcard {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--panel-2); cursor: pointer; text-align: left; padding: 0;
  color: inherit; font: inherit;
}
.pickcard:hover { border-color: var(--line-2); }
.pickcard.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pickcard img, .pickcard .pickcard-noimg {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #05060a;
}
.pickcard .pickcard-noimg { display: flex; align-items: center; justify-content: center; color: var(--dimmer); font-size: 10.5px; }
.pickcard .pickcard-body { padding: 7px 8px 8px; }
.pickcard b { display: block; font-size: 11px; line-height: 1.3; }
.pickcard .dim { display: block; font-size: 10px; margin-top: 2px; }

/* caption format previews, drawn in HTML so choosing one costs nothing */
.capgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
.capcard {
  border: 1px solid var(--line); border-radius: 10px; background: #05060a;
  cursor: pointer; padding: 0; color: inherit; font: inherit; overflow: hidden;
}
.capcard.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.capcard .capdemo {
  height: 62px; display: flex; align-items: center; justify-content: center;
  padding: 0 8px; font-size: 11.5px; font-weight: 600; line-height: 1.3; text-align: center;
}
.capcard .capdemo span.box {
  padding: 5px 9px; border-radius: 7px; background: rgba(2,6,23,.85);
  border: 1.5px solid #f0b429; color: #f8fafc;
}
.capcard .capdemo .w { display: inline-block; }
.capcard .capdemo .w.on { color: #f0b429; }
.capcard .capdemo .w.fade { opacity: 0; animation: capin 3.2s infinite; }
.capcard .capdemo .w.fade:nth-child(2) { animation-delay: .45s; }
.capcard .capdemo .w.fade:nth-child(3) { animation-delay: .9s; }
.capcard .capdemo .w.fade:nth-child(4) { animation-delay: 1.35s; }
@keyframes capin { 0%,6% { opacity: 0 } 14%,100% { opacity: 1 } }
.capcard .capbody { padding: 7px 9px 9px; border-top: 1px solid var(--line); }
.capcard b { font-size: 11px; }
.capcard .dim { display: block; font-size: 10px; margin-top: 3px; line-height: 1.4; }
.capcard.is-off .capdemo { color: var(--dimmer); }

/* ---- step 3: the camera cards -------------------------------------------- */
.camgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.camgrid .pickcard video {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #05060a;
}
.camgrid .pickcard .pickcard-body b { font-size: 11px; }

/* ---- library as a grid of videos ----------------------------------------- */
.libgrid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.libcard {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--panel-2); display: flex; flex-direction: column;
}
.libcard.is-playing { border-color: var(--accent); }
.libthumb { position: relative; background: #05060a; }
.libpick { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex;
  background: rgba(8,10,16,0.72); border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px; }
.libpick input { width: 16px; height: 16px; margin: 0; }
.libthumb video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.libplay {
  position: absolute; inset: 0; margin: auto; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  background: rgba(5,6,10,.62); color: #fff; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding-left: 3px;
}
.libplay:hover { background: rgba(5,6,10,.85); border-color: #fff; }
.libkind {
  position: absolute; right: 8px; bottom: 8px; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  background: rgba(5,6,10,.72); color: var(--dim); border: 1px solid var(--line-2);
}
.libbody { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.libbody b {
  font-size: 12.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.librow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.libbody .rowbtns { margin-top: auto; padding-top: 4px; }

/* ---- publish picker: the Library's cards, plus Shorts affordances ---- */
/* Mixed aspects share this grid, so cards size to their own content instead of
   stretching to the row: a 16:9 card next to a 9:16 one used to grow a band of
   dead space under its buttons. */
/* Publish is two rows of five per page, so the grid is pinned to five columns
   and pages are a fixed ten videos. Narrower screens step down to 4/3/2. */
.pubgrid { align-items: start; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1300px) { .pubgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1020px) { .pubgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .pubgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.libcard.is-picked { border-color: var(--accent); }
/* A vertical video shows as a vertical card, so which videos are 9:16 is
   visible before you pick one rather than after an upload is refused. */
.pubthumb.is-tall video { aspect-ratio: 9 / 16; }
.pubshort {
  position: absolute; left: 8px; top: 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; padding: 2px 7px; border-radius: 999px;
  background: var(--grad); color: #05060c;
}
.shorts-row {
  display: flex; flex-direction: column; gap: 5px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px; background: var(--panel-2);
}
/* Still shown when it cannot be used, so the reason can be read instead of the
   control simply vanishing and leaving the user to guess why. */
.shorts-row.is-off { opacity: .75; }
.shorts-label b { color: var(--accent); letter-spacing: .04em; }
.checkline { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.checkline input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.checkline input:disabled { cursor: not-allowed; }

/* ---- publish: platform picker (checkboxes, multi-select) ---- */
.platpicker { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.platpicker .pubplat {
  border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; background: var(--panel-2);
  font-size: 12.5px;
}
.platpicker .pubplat span:last-child { margin-left: auto; }
/* A platform that cannot be used is still listed, so the reason is visible
   rather than the option simply missing. */
.platpicker .pubplat.is-off { opacity: .55; }
.platpicker .pubplat.is-off input { cursor: not-allowed; }

/* ==========================================================================
   STUDIO SHELL v2 — left rail + refreshed accent + step cards
   --------------------------------------------------------------------------
   An override layer. It is appended last so equal-specificity rules win by
   cascade, leaving everything above untouched. Delete this block to fall back
   to the original top-bar layout. No HTML structure changed: the top bar simply
   becomes a fixed sidebar and #nav becomes a vertical list, so app.js (which
   walks #nav.children by data-view) keeps working unchanged.
   ========================================================================== */

:root {
  --accent: #8b5cf6;
  --accent-soft: rgba(139, 92, 246, 0.16);
  --grad: linear-gradient(100deg, #8b5cf6, #a855f7 52%, #22d3ee);
}

body { display: block; }

.topbar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 30;
  width: 250px;
  flex-direction: column; align-items: stretch; gap: 4px;
  padding: 18px 14px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(7, 9, 18, 0.97), rgba(7, 9, 18, 0.88));
}

.wordmark { align-items: center; gap: 11px; padding: 2px 6px 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line); }
.wordmark .sigil { font-size: 22px; }
.sigil-img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: none; display: block; }
.home-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; display: block; }
.wm-text { display: flex; flex-direction: column; gap: 3px; }
.mark { letter-spacing: 0.20em; font-size: 15px; }
.mark-thin { letter-spacing: 0.16em; font-size: 9px; }

.navtabs { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; flex-wrap: nowrap; }
.navtabs button {
  display: flex; align-items: center; width: 100%; text-align: left; line-height: 1;
  justify-content: flex-start; gap: 11px;
  padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 500;
}
.navtabs button:hover { background: rgba(127, 141, 179, 0.12); }
.navtabs button.active {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.navtabs button::before {
  font-size: 13px; width: 17px; text-align: center; opacity: 0.85;
  color: var(--dim); font-family: var(--mono);
}
.navtabs button.active::before { color: var(--accent); opacity: 1; }
.navtabs button[data-view="studio"]::before { content: "✦"; }
.navtabs button[data-view="library"]::before { content: "▦"; }
.navtabs button[data-view="casts"]::before { content: "❖"; }
.navtabs button[data-view="advanced"]::before { content: "⚙"; }
.navtabs button[data-view="publish"]::before { content: "↗"; }
.navtabs button[data-view="analytics"]::before { content: "◔"; }
.navtabs button[data-view="billing"]::before { content: "◆"; }
.navtabs button[data-view="admin"]::before { content: "⌘"; }
.navtabs .nav-help { width: auto; align-self: flex-start; }

.spacer { flex: 1 1 auto; min-height: 14px; }
.topbar .meter { min-width: 0; padding: 12px 4px 6px; margin-top: 6px; border-top: 1px solid var(--line); }
.topbar #cookie-btn, .topbar #account, .topbar .theme-toggle { align-self: stretch; }
.topbar .theme-toggle { width: auto; margin-top: 6px; }

main { margin-left: 250px; width: auto; max-width: none; padding: 28px 32px 92px; }

@media (max-width: 900px) {
  /* A phone gets a proper slide-in drawer, not the desktop row. */
  .topbar { position: sticky; top: 0; z-index: 50; width: auto; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    column-gap: 10px; row-gap: 0;
    padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg); }
  .wordmark { flex: 1 1 auto; border: 0; padding: 0; margin: 0; }
  .wm-text .mark-thin { display: none; }
  .nav-toggle { display: grid; margin-left: auto; }
  /* The menu drops below the header in normal flow — no stacking games. */
  .navtabs {
    order: 99; flex-basis: 100%; width: 100%;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px;
    margin: 0; padding: 0; background: var(--bg);
    max-height: 0; overflow: hidden; transition: max-height .2s ease;
  }
  body.nav-open .navtabs {
    max-height: 72vh; overflow-y: auto; padding: 8px 0 10px;
    border-top: 1px solid var(--line);
  }
  .navtabs button { width: 100%; justify-content: flex-start; padding: 12px 6px; font-size: 15px; }
  .navtabs .lbl { display: inline; }
  .navtabs .nav-help { align-self: flex-start; }
  .spacer, .topbar .meter { display: none; }
  .statusbar { left: 0; right: 0; padding: 10px 16px; }
  main { margin-left: 0; padding: 18px 16px 92px; }
  /* the collapsed rail is desktop-only */
  body.nav-collapsed .topbar { width: auto; height: auto; padding: 10px 14px; }
  body.nav-collapsed .wm-text { display: flex; }
  body.nav-collapsed .nav-toggle { display: grid; }
  body.nav-collapsed main { margin-left: 0; }
}

/* ---- brief: step cards ---- */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.step {
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  padding: 16px 16px 18px;
}
.step-head { display: flex; align-items: center; gap: 10px; margin: 15px 0 12px; flex-wrap: wrap; }
.step-head b { font-size: 14px; letter-spacing: 0.01em; }
.step-n {
  width: 24px; height: 24px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: #fff;
  background: var(--accent);
  box-shadow: 0 6px 16px -6px var(--accent);
}

/* Buttons/links pick up the accent. */
select:focus, input:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 22px color-mix(in srgb, var(--accent) 24%, transparent);
}
.chip.accent { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }

/* ---- nav icons (SVG) + collapse toggle ---- */
.ni { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.navtabs .ni { opacity: 0.9; }
.navtabs button.active .ni { opacity: 1; color: var(--accent); }
.navtabs .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the earlier unicode glyphs are replaced by SVG */
.navtabs button::before { content: none !important; }

.nav-toggle { margin-left: auto; background: transparent; border: 1px solid var(--line);
  border-radius: 9px; color: var(--dim); cursor: pointer; width: 32px; height: 32px;
  display: grid; place-items: center; padding: 0; transition: color .18s, border-color .18s, background .18s; }
.nav-toggle:hover { color: var(--ink); border-color: var(--line-2); background: rgba(127, 141, 179, 0.12); }
.nav-toggle .ni { width: 18px; height: 18px; }

body.nav-collapsed .topbar { width: 76px; padding: 16px 10px; }
body.nav-collapsed .wm-text { display: none; }
body.nav-collapsed .wordmark { justify-content: center; position: relative; }
body.nav-collapsed .nav-toggle { margin: 0; position: absolute; top: 0; right: -2px; width: 26px; height: 26px; }
body.nav-collapsed .navtabs button { justify-content: center; padding: 11px 0; }
body.nav-collapsed .navtabs .lbl { display: none; }
body.nav-collapsed .navtabs .nav-help { display: none; }
body.nav-collapsed .topbar .meter { display: none; }
body.nav-collapsed .nav-toggle { display: none; }
body.nav-collapsed .wordmark { cursor: pointer; }
body.nav-collapsed main { margin-left: 76px; }

/* ---- studio: two columns (wizard + sticky preview) ---- */
.studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) 456px; gap: 20px; align-items: start; }
@media (max-width: 1180px) { .studio-grid { grid-template-columns: 1fr; } }
.studio-main, .studio-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Keep each panel at its natural height so the column overflows and scrolls
   instead of the flex children shrinking to fit. */
.studio-main > *, .studio-side > * { flex: 0 0 auto; }
.studio-main, .studio-side {
  max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px;
  /* Keep the scroll, hide the bar. */
  scrollbar-width: none;
}
.studio-main::-webkit-scrollbar, .studio-side::-webkit-scrollbar { width: 0; height: 0; display: none; }
.studio-side { position: sticky; top: 16px; }
@media (max-width: 1180px) {
  .studio-side { position: static; }
  .studio-main, .studio-side { max-height: none; overflow: visible; padding-right: 0; }
}
.studio-side .split { grid-template-columns: 1fr; }

.pv-tabs { gap: 4px; }
.pv-tab { background: transparent; border: 1px solid var(--line); color: var(--dim);
  border-radius: 8px; padding: 5px 11px; font-size: 11.5px; cursor: pointer; }
.pv-tab.active { background: var(--accent-soft); color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pv-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px;
  overflow: hidden; background: #05070f; border: 1px solid var(--line); }
.pv-stage video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.pv-script { position: absolute; inset: 0; margin: 0; padding: 14px; overflow: auto;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.pv-empty { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; text-align: center; padding: 18px; }
.pv-play { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 15px; box-shadow: 0 10px 30px -8px var(--accent); }
.pv-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 14px; }
.pv-details > div { display: flex; flex-direction: column; gap: 3px; }
.pv-details b { font-size: 12.5px; font-weight: 600; color: var(--ink); }

/* class-based hide, so it beats display rules on the same element */
.hidden { display: none !important; }

/* ---- brief: format cards ---- */
.fmtgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.fmtcard { text-align: left; cursor: pointer; border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  padding: 14px; color: var(--ink); transition: border-color .18s, transform .18s, background .18s; }
.fmtcard:hover { border-color: var(--line-2); transform: translateY(-1px); }
.fmtcard.is-on { border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: var(--accent-soft); box-shadow: 0 10px 30px -14px var(--accent); }
.fmtbody { display: flex; flex-direction: column; gap: 5px; }
.fmtbody b { font-size: 13.5px; }
.fmtbody .dim { font-size: 11.5px; line-height: 1.5; }
.probadge { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; padding: 2px 6px;
  border-radius: 999px; background: var(--accent); color: #fff; vertical-align: 1px; }

/* ---- Brand Kit: colors/font flow into the caption sample and cards ---- */
.pv-capbox .box { border-color: var(--cap-accent, #f0b429);
  background: var(--cap-panel, rgba(2, 6, 23, 0.9)); color: var(--cap-text, #f8fafc);
  border-radius: calc(var(--cap-radius, 20) * 1px); }
.pv-capbox .w.on { color: var(--cap-accent, #f0b429); }
.pv-capbox .capdemo { font-family: var(--cap-font, inherit); }
.capcard .capdemo span.box { border-color: var(--cap-accent, #f0b429);
  background: var(--cap-panel, rgba(2, 6, 23, 0.85)); color: var(--cap-text, #f8fafc);
  border-radius: calc(var(--cap-radius, 20) * 1px); }
.capcard .capdemo .w.on { color: var(--cap-accent, #f0b429); }
.capcard .capdemo { font-family: var(--cap-font, inherit); }

.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.brand-grid input[type="color"] { width: 100%; height: 38px; padding: 3px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(6, 9, 18, 0.72); cursor: pointer; }

/* ---- rail: background music ---- */
.pv-audio { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px;
  display: flex; flex-direction: column; gap: 10px; }
.pv-audio-head { display: flex; align-items: center; justify-content: space-between; }
.pv-audio-row { display: flex; align-items: center; gap: 10px; }
.pv-audio-row input[type="range"] { flex: 1; }
.pv-audio .chk { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }

/* Language + host audio, straight in the rail so a cast's defaults can be
   overridden per episode without a trip to Characters. */
.pv-voices { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px;
  display: flex; flex-direction: column; gap: 10px; }
.pv-voices .pv-audio-row { display: flex; align-items: center; gap: 8px; }
.pv-voices .pv-select { flex: 1; min-width: 0; }

/* ---- rail: visuals ---- */
.pv-visuals { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px;
  display: flex; flex-direction: column; gap: 10px; }
.segbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.segbtns button { flex: 1 1 auto; border: 1px solid var(--line); background: transparent;
  color: var(--dim); border-radius: 8px; padding: 7px 10px; font-size: 12px; cursor: pointer; }
.segbtns button:hover { color: var(--ink); border-color: var(--line-2); }
.segbtns button.on { background: var(--accent-soft); color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* stock media browser */
.media-browser { display: flex; flex-direction: column; gap: 16px; max-height: 66vh; overflow-y: auto; padding-right: 4px; }
.media-seg { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel); }
.media-seg-text { font-size: 12.5px; color: var(--ink); margin-bottom: 10px; line-height: 1.5; }
.media-beats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.media-thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px;
  background: #05060a; border: 1px solid var(--line); display: block; }
.media-empty { display: grid; place-items: center; color: var(--dimmer); font-size: 11px; }
.pv-select { flex: 1; background: #0b0d13; border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 6px 8px; font-size: 12px; }

/* studio template bar */
.tpl-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.tpl-bar select { flex: 1; min-width: 0; background: #0b0d13; border: 1px solid var(--line);
  color: var(--ink); border-radius: 8px; padding: 6px 8px; font-size: 12px; }

/* live caption sample over the preview (reflects the chosen caption format) */
.pv-capbox { position: absolute; left: 0; right: 0; bottom: 6%; display: flex;
  justify-content: center; pointer-events: none; padding: 0 7%; }
.pv-capbox .capdemo { font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; }
.pv-capbox .box { display: inline-block; padding: 6px 12px; border-radius: 8px;
  background: rgba(2, 6, 23, 0.9); border: 2px solid #f0b429; color: #f8fafc; }
.pv-capbox .w { display: inline-block; }
.pv-capbox .w.on { color: #f0b429; }
.pv-capbox .w.fade { opacity: 0; animation: capin 3.2s infinite; }
.pv-capbox .w.fade:nth-child(2) { animation-delay: .45s; }
.pv-capbox .w.fade:nth-child(3) { animation-delay: .9s; }
.pv-capbox .w.fade:nth-child(4) { animation-delay: 1.35s; }
.pv-capbox .none { font-size: 10.5px; color: var(--dimmer); }

/* ---- live, non-rendered preview scene ---------------------------------- */
/* The scene is the 16:9 landscape composition. The output frame crops it the
   same way the real render does: 9:16 keeps a 5:4 band (make_portrait --band
   1.25) and fills the rest with a blurred, darkened copy; 1:1 keeps a square
   band; 16:9 is the scene itself. */
.pv-live { position: absolute; inset: 0; display: grid; place-items: center; background: #05070f; }
.pv-frame { position: relative; height: 100%; max-width: 100%; aspect-ratio: var(--pv-ar, 16 / 9);
  overflow: hidden; background: #05070f; }
.pv-surround { position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(16px) brightness(0.62) saturate(0.9); transform: scale(1.25); opacity: 0; }
.pv-frame.has-surround .pv-surround { opacity: 1; }
.pv-band { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: var(--pv-band-h, 100%); overflow: hidden; }
.pv-scene { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.pv-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-vignette { position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, transparent 38%, rgba(0, 0, 0, 0.5) 100%),
              linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.6)); }
/* The picture panel sits on the left, matching panel_box (40,120,820,620) of a
   1920x1080 frame: x 2.1%, y 11.1%, w 40.6%, h 46.3%. */
.pv-panel { position: absolute; left: 2.1%; top: 11.1%; width: 40.6%; height: 46.3%;
  border-radius: 8px; overflow: hidden; padding: 7px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid color-mix(in srgb, var(--cap-accent, #f0b429) 55%, transparent);
  background: linear-gradient(135deg, rgba(240, 180, 41, 0.10), rgba(63, 167, 255, 0.10));
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.9); }
.pv-panel[data-mode="video"] { background: linear-gradient(135deg, rgba(63, 167, 255, 0.14), rgba(139, 92, 246, 0.14)); }
.pv-panel[data-mode="mixed"] { background: linear-gradient(135deg, rgba(240, 180, 41, 0.12), rgba(139, 92, 246, 0.14)); }
.pv-panel-head { font-size: 8px; font-weight: 700; color: #eef2ff; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-panel-mosaic { flex: 1; display: grid; gap: 5px; min-height: 0; }
.pv-panel-mosaic[data-tiles="1"] { grid-template-columns: 1fr; }
.pv-panel-mosaic[data-tiles="2"] { grid-template-columns: 1fr 1fr; }
.pv-panel-mosaic[data-tiles="3"] { grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; }
.pv-panel-mosaic[data-tiles="3"] i:first-child { grid-row: 1 / 3; }
.pv-panel-mosaic i { border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)); }
.pv-panel-tag { position: absolute; right: 6px; bottom: 6px; font-family: var(--mono); font-size: 7px;
  letter-spacing: 0.12em; color: #fff; background: rgba(0, 0, 0, 0.5); padding: 2px 6px; border-radius: 999px; }

/* Visual format: media fills the frame — no cast art, no presenter panel. The
   preview shows the fetched-media look (top bar, headline, captions) instead of
   the last-selected cast's scene. */
.pv-frame.pv-visual .pv-scene { background: linear-gradient(150deg, #1b2942 0%, #0a1120 46%, #06080f 100%); }
.pv-frame.pv-visual .pv-bg { display: none; }
.pv-frame.pv-visual .pv-panel { display: none; }
.pv-frame.pv-visual .pv-badge { display: none; }
/* The media box: the area the fetched images/clips fill, cycling so the preview
   reads as a moving picture instead of an empty frame. */
.pv-vmedia { position: absolute; inset: 0; overflow: hidden; }
.pv-vslide { position: absolute; inset: -6%; opacity: 0; background-size: cover; background-position: center;
  animation: pvSlide 12s linear infinite, pvKB 18s ease-in-out infinite alternate; will-change: opacity, transform; }
.pv-vslide::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.5)); }
.pv-vslide.s1 { background-image: radial-gradient(90% 70% at 72% 26%, #ffe6a6 0%, rgba(255, 230, 166, 0) 40%), linear-gradient(180deg, #2a1b45 0%, #7a3363 42%, #e07a4e 74%, #f6c56a 100%); }
.pv-vslide.s2 { background-image: radial-gradient(90% 70% at 22% 18%, #d7ecff 0%, rgba(215, 236, 255, 0) 46%), linear-gradient(180deg, #123049 0%, #1d6a78 46%, #2f9d72 76%, #a6d97e 100%); }
.pv-vslide.s3 { background-image: radial-gradient(90% 80% at 60% 28%, #dceeff 0%, rgba(220, 238, 255, 0) 50%), linear-gradient(180deg, #0d1a38 0%, #1b3e78 52%, #2f6fb0 100%); }
.pv-vslide.s4 { background-image: radial-gradient(120% 90% at 40% 40%, rgba(123, 92, 255, 0.35) 0%, rgba(123, 92, 255, 0) 60%), linear-gradient(135deg, #0f1320 0%, #1b2340 55%, #0a0d17 100%); }
.pv-vslide.s2 { animation-delay: 3s, -3s; }
.pv-vslide.s3 { animation-delay: 6s, -6s; }
.pv-vslide.s4 { animation-delay: 9s, -9s; }
@keyframes pvSlide { 0% { opacity: 1; } 24% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pvKB { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -1.5%); } }
.pv-vplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 15px; background: rgba(8, 10, 16, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.28); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
@media (prefers-reduced-motion: reduce) {
  .pv-vslide { animation: pvSlide 12s linear infinite; }
}
.pv-vbar { position: absolute; left: 2.6%; right: 2.6%; top: 3.4%; z-index: 2; display: flex;
  align-items: center; gap: 7px; }
.pv-vdot { width: 9px; height: 9px; border-radius: 3px; background: var(--cap-accent, #f0b429); flex: 0 0 auto; }
.pv-vbar b { color: #f5f7fb; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.pv-vsep { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.25); }
.pv-vtitle { color: #aab3c2; font-size: 8px; font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.pv-vspacer { flex: 1; }
.pv-vtag { font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.12em; color: #cdd6e6;
  border: 1px solid rgba(255, 255, 255, 0.18); padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.pv-vhead { position: absolute; left: 2.6%; right: 2.6%; bottom: 25%; z-index: 2; color: #f5f7fb;
  font-size: 15px; font-weight: 900; line-height: 1.05; letter-spacing: -0.3px; text-transform: uppercase;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.7); }
.pv-frame.pv-visual .pv-caps { bottom: 6%; }
/* The renderer's own faces (Liberation Bold), so the preview type matches. */
@font-face { font-family: "CapSans"; src: url("/fonts/LiberationSans-Bold.ttf") format("truetype");
  font-weight: 700; font-display: swap; }
@font-face { font-family: "CapSerif"; src: url("/fonts/LiberationSerif-Bold.ttf") format("truetype");
  font-weight: 700; font-display: swap; }
@font-face { font-family: "CapMono"; src: url("/fonts/LiberationMono-Bold.ttf") format("truetype");
  font-weight: 700; font-display: swap; }

/* Captions, drawn to the renderer's own numbers. Everything scales off the
   frame width, exactly like render_flipbook.py's CaptionPainter (font 52/1920,
   pad 34x20/1920, radius 20/1920, panel rgba(2,6,23,.78), bottom 4.5%). */
.pv-live .pv-scene { container-type: inline-size; }
.pv-caps { position: absolute; left: 0; right: 0; bottom: 4.5%; display: flex; justify-content: center;
  padding: 0 5%; pointer-events: none; }
.pv-caps .capdemo {
  font-family: var(--cap-font, "CapSans", sans-serif);
  font-weight: 700;
  font-size: 2.7083cqw;
  line-height: 1.30;
  text-align: center;
  color: var(--cap-text, #f8fafc);
}
.pv-caps .box {
  display: inline-block;
  padding: 1.0417cqw 1.7708cqw;
  border-radius: calc(var(--cap-radius, 20) * 0.0520833cqw);
  background: var(--cap-panel, rgba(2, 6, 23, 0.78));
  color: var(--cap-text, #f8fafc);
  border: max(1px, 0.1042cqw) solid var(--cap-accent, #f0b429);
}
.pv-caps .w { display: inline-block; }
/* Highlight: the spoken word in the accent, with the renderer's four-way halo
   (accent @ 110*glow/255, offset by pad = 12/1920 of the frame) cycled across
   the card, so the preview moves like the real karaoke. */
@keyframes karaokeOn {
  0%, 24% {
    color: var(--cap-accent, #f0b429);
    text-shadow:
      -0.625cqw 0 0 color-mix(in srgb, var(--cap-accent, #f0b429) 45%, transparent),
       0.625cqw 0 0 color-mix(in srgb, var(--cap-accent, #f0b429) 45%, transparent),
       0 -0.625cqw 0 color-mix(in srgb, var(--cap-accent, #f0b429) 45%, transparent),
       0  0.625cqw 0 color-mix(in srgb, var(--cap-accent, #f0b429) 45%, transparent);
  }
  25%, 100% { color: var(--cap-text, #f8fafc); text-shadow: none; }
}
.pv-caps .capdemo[data-fmt="karaoke"] .w { animation: karaokeOn 4s infinite; color: var(--cap-text, #f8fafc); }
.pv-caps .capdemo[data-fmt="karaoke"] .w:nth-child(1) { animation-delay: 0s; }
.pv-caps .capdemo[data-fmt="karaoke"] .w:nth-child(2) { animation-delay: 1s; }
.pv-caps .capdemo[data-fmt="karaoke"] .w:nth-child(3) { animation-delay: 2s; }
.pv-caps .capdemo[data-fmt="karaoke"] .w:nth-child(4) { animation-delay: 3s; }
.pv-caps .w.on { color: var(--cap-accent, #f0b429); }
.pv-caps .w.fade { opacity: 0; animation: capin 3.2s infinite; }
.pv-caps .w.fade:nth-child(2) { animation-delay: .45s; }
.pv-caps .w.fade:nth-child(3) { animation-delay: .9s; }
.pv-caps .w.fade:nth-child(4) { animation-delay: 1.35s; }
.pv-wm { position: absolute; top: 4%; left: 2%; font-size: 7.5px; letter-spacing: 0.16em;
  font-weight: 700; color: rgba(255, 255, 255, 0.86); background: rgba(0, 0, 0, 0.42);
  padding: 3px 8px; border-radius: 999px; }
.pv-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-family: var(--mono);
  font-size: 8px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); }
.pv-frame[data-style="cinematic"] .pv-band { filter: contrast(1.1) saturate(1.05) brightness(0.98); }
.pv-frame[data-style="news"] .pv-band { filter: contrast(1.06) saturate(1.05); }
.pv-frame[data-style="documentary"] .pv-band { filter: contrast(1.04) saturate(0.9); }
.pv-frame[data-style="vivid"] .pv-band { filter: contrast(1.12) saturate(1.35); }
.pv-frame[data-style="warm"] .pv-band { filter: sepia(0.16) saturate(1.12) brightness(1.02); }
.pv-frame[data-style="cool"] .pv-band { filter: hue-rotate(-8deg) saturate(1.05) brightness(1.02); }

/* native 9:16 explainer: picture panel on top, the presenter in the bottom band
   — the same shape the portrait render composes (render_explainer.py: panel_box
   on top, host band from y=748 of 1920). The backdrop behind the panel is the
   blurred surround, so the host does not fill the top. */
.pv-frame.pv-native .pv-band { height: 100%; top: 0; transform: none; }
.pv-frame.pv-native .pv-scene { left: 0; transform: none; width: 100%; height: 100%; aspect-ratio: auto; }
.pv-frame.pv-native .pv-bg { top: auto; bottom: 0; height: 61%; object-position: 50% 22%; }
.pv-frame.pv-native .pv-panel { left: 3%; top: 2.5%; width: 94%; height: 34%; }
.pv-frame.pv-native .pv-wm { top: auto; bottom: 2%; left: 3%; }
.pv-frame.pv-native .pv-caps { bottom: 4%; }

/* ---- visual-style picker: each preset is the art with the grade baked on --- */.pv-style { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.style-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.style-card { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line);
  border-radius: 8px; background: transparent; cursor: pointer; overflow: hidden; }
.style-card:hover { border-color: var(--line-2); }
.style-card.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 6px 18px -10px var(--accent); }
.style-thumb { display: block; width: 100%; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #33405a, #0b0f1a); background-size: cover; background-position: center; }
.style-thumb[data-style="cinematic"] { filter: contrast(1.1) saturate(1.05) brightness(0.98); }
.style-thumb[data-style="news"] { filter: contrast(1.06) saturate(1.05); }
.style-thumb[data-style="documentary"] { filter: contrast(1.04) saturate(0.9); }
.style-thumb[data-style="vivid"] { filter: contrast(1.12) saturate(1.35); }
.style-thumb[data-style="warm"] { filter: sepia(0.16) saturate(1.12) brightness(1.02); }
.style-thumb[data-style="cool"] { filter: hue-rotate(-8deg) saturate(1.05) brightness(1.02); }
.style-name { font-size: 9.5px; color: var(--dim); padding: 3px 2px 4px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.style-card.on .style-name { color: var(--ink); }

/* a format this cast cannot render */
.fmtcard.is-disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }
.fmtcard.is-disabled:hover { transform: none; border-color: var(--line); }
/* newsroom: which host presents */
.nr-host { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.nr-host .segbtns { flex: 0 0 auto; }
.nr-host .segbtns button { flex: 0 0 auto; min-width: 84px; }

/* A button that is synthesising: spinner in place of its label, locked. */
.btn-sm.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-sm.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--dim); border-top-color: transparent;
  animation: btnspin .7s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }

/* Caption style controls, right under the caption cards. */
.cap-style { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cap-style > .microlabel { width: 100%; }
.cap-color, .cap-font { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--dim); }
.cap-color input[type="color"] { width: 46px; height: 28px; padding: 0; border: 1px solid var(--line);
  border-radius: 7px; background: none; cursor: pointer; }
.cap-font select { min-width: 92px; }
.cap-style #cs-save { margin-left: auto; }

/* Which speaker is which, under the preview (dot = that host's caption colour). */
.pv-hosts { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; align-items: center; position: relative; }
.pv-host { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
/* Host B sits under their character (the right host). */
#pv-host-b { position: absolute; right: 0; margin-right: 27px; }
.pv-host i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#pv-host-a i { background: var(--cap-accent, #f0b429); }
#pv-host-b i { background: var(--cap-secondary, #3fa7ff); }
.pv-host b { color: var(--ink); font-weight: 600; font-size: 12px; }
.pv-host .dim { font-size: 11.5px; }

/* The camera move, played on the preview backdrop so a choice is visible. Each
   moving camera focuses Host A, holds, then Host B, like the render following
   whoever is speaking. */
.pv-cam { position: absolute; top: 8px; right: 8px; z-index: 2; font-family: var(--mono);
  font-size: 8px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.45); padding: 2px 7px; border-radius: 999px; }
.pv-frame[data-cam="follow"] .pv-bg { animation: camFollow 10s ease-in-out infinite; }
.pv-frame[data-cam="glide"] .pv-bg { animation: camGlide 10s ease-in-out infinite; }
.pv-frame[data-cam="mixed"] .pv-bg { animation: camMixed 10s steps(1, end) infinite; }
@keyframes camFollow {
  0%, 46%  { transform: scale(1.32) translateX(11%); }    /* tight on Host A */
  54%, 96% { transform: scale(1.32) translateX(-11%); }   /* tight on Host B */
  100%     { transform: scale(1.32) translateX(11%); }
}
@keyframes camGlide {
  0%, 46%  { transform: scale(1.16) translateX(11%); }    /* Host A */
  54%, 92% { transform: scale(1.16) translateX(-11%); }   /* Host B */
  100%     { transform: scale(1.16) translateX(11%); }
}
@keyframes camMixed {
  0%, 46%  { transform: scale(1.28) translateX(11%); }    /* cut to Host A */
  54%, 96% { transform: scale(1.28) translateX(-11%); }   /* cut to Host B */
  100%     { transform: scale(1.28) translateX(11%); }
}
/* The legend dot lights up for the host the camera is on. */
@keyframes speakA {
  0%, 46%  { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cap-accent, #f0b429) 45%, transparent); }
  50%,96%  { opacity: 0.35; box-shadow: none; }
  100%     { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cap-accent, #f0b429) 45%, transparent); }
}
@keyframes speakB {
  0%, 46%  { opacity: 0.35; box-shadow: none; }
  54%,92%  { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cap-secondary, #3fa7ff) 45%, transparent); }
  100%     { opacity: 0.35; box-shadow: none; }
}
.pv-hosts[data-cam="follow"] #pv-host-a i,
.pv-hosts[data-cam="glide"] #pv-host-a i,
.pv-hosts[data-cam="mixed"] #pv-host-a i { animation: speakA 10s infinite; }
.pv-hosts[data-cam="follow"] #pv-host-b i,
.pv-hosts[data-cam="glide"] #pv-host-b i,
.pv-hosts[data-cam="mixed"] #pv-host-b i { animation: speakB 10s infinite; }

/* Style / Set pickers: example imagery, not dropdowns. */
.exgrid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin-bottom: 4px; }
.examplecard { padding: 0; overflow: hidden; }
.examplecard .pickcard-body { padding: 8px 10px; }
.examplecard .pickcard-body b { font-size: 12.5px; }
.examplecard .pickcard-body .dim { font-size: 10.5px; }

/* ==========================================================================
   Characters → Create Character & Set (two-column placements layout)
   ========================================================================== */

.castgrid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
@media (max-width: 1180px) { .castgrid { grid-template-columns: 1fr; } }
.cast-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cast-col > * { flex: 0 0 auto; }
.cast-main, .cast-side {
  max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px;
  scrollbar-width: none;
}
.cast-main::-webkit-scrollbar, .cast-side::-webkit-scrollbar { width: 0; height: 0; display: none; }
.cast-side { position: sticky; top: 16px; }
@media (max-width: 1180px) {
  .cast-side { position: static; }
  .cast-main, .cast-side { max-height: none; overflow: visible; padding-right: 0; }
}

.casthead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.casttitle { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.castsub { margin: 4px 0 0; font-size: 12.5px; color: var(--dim); }
.casthead-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cta-sm { padding: 9px 16px; font-size: 12.5px; }

.castsec { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
/* Automation view: the studio's numbered-card look, single column. */
.advstack { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }
.advstack .castsec { padding: 20px; }
/* The Advanced view fills the page: cards on the left, a sticky preview rail on
   the right, in the space the stack used to leave empty. */
.advlayout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px;
  align-items: start; max-width: 1480px; }
.advlayout .advstack { max-width: none; }
.adv-side { position: sticky; top: 16px; margin-top: 60px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  backdrop-filter: blur(20px) saturate(1.15); }
/* Each column scrolls on its own, like the cast view, so the rail stays put while
   the cards (and the rail's own controls) scroll inside their column. */
.advlayout .advstack, .adv-side {
  max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
.advlayout .advstack::-webkit-scrollbar, .adv-side::-webkit-scrollbar {
  width: 0; height: 0; display: none;
}
@media (max-width: 1180px) {
  .advlayout { grid-template-columns: 1fr; max-width: 1100px; }
  .adv-side { position: static; }
  .advlayout .advstack, .adv-side { max-height: none; overflow: visible; }
}
.auto-live-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--line); background: #05070f; }
.castsec-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; }
.secnum {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: #fff; background: var(--accent);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.castsec-heading h2 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.castsec-heading p { margin: 3px 0 0; font-size: 11.5px; color: var(--dim); line-height: 1.5; }
.castsec-tag {
  font-style: normal; font-size: 10px; font-weight: 600; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.soon {
  font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-radius: 999px; padding: 1px 6px; margin-left: 4px;
}

.basic-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.basic-fields .basic-desc { grid-column: 1 / -1; }
@media (max-width: 640px) { .basic-fields { grid-template-columns: 1fr; } }
.host-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
@media (max-width: 640px) { .host-grid { grid-template-columns: 1fr; } }

.reftiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.reftile {
  position: relative; min-height: 132px; border-radius: 12px; border: 1px dashed var(--line-2);
  background: var(--panel-2); display: flex; flex-direction: column;
}
.reftile-up { padding: 0; }
.reftile-up .ref-drop {
  width: 100%; height: 100%; min-height: 132px; border: 0; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 12px;
}
.reftile-up .ref-drop.has-ref { flex-direction: row; text-align: left; gap: 12px; }
#cast-ref-inner { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.reftile-up .ref-drop.has-ref #cast-ref-inner { flex-direction: row; align-items: center; text-align: left; }
.ref-up-ico { width: 30px; height: 30px; display: grid; place-items: center; color: var(--accent); }
.ref-up-ico svg { width: 26px; height: 26px; }
.reftile.is-auto {
  align-items: center; justify-content: center; gap: 4px; text-align: center; border-style: solid;
  border-color: var(--line);
  background: repeating-linear-gradient(135deg, rgba(127, 141, 179, .06) 0 8px, transparent 8px 16px), var(--panel);
}
.reftile.is-auto::before { content: "✦"; color: var(--dimmer); font-size: 18px; }
.reftile-label { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.reftile-sub { font-size: 10px; color: var(--dim); }
.reftile.is-add {
  align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; color: var(--dim);
  cursor: not-allowed; opacity: .7;
}
#ref-note-field { margin-top: 12px; }

.settabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.settab {
  background: transparent; border: 1px solid var(--line); color: var(--dim); border-radius: 999px;
  padding: 5px 13px; font-size: 11.5px; cursor: pointer;
}
.settab.on { background: var(--accent-soft); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.settab:disabled { opacity: .5; cursor: not-allowed; }

.style-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.style-strip .examplecard { flex: 0 0 144px; }
.style-strip::-webkit-scrollbar { height: 7px; }
.style-strip::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }

.details-grid { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 900px) {
  .details-grid { grid-template-columns: 1fr 1fr; }
  .details-prompt { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .details-grid { grid-template-columns: 1fr; } }
.details-prompt textarea { min-height: 86px; }
#cast-note-count { margin-top: 3px; }
#cast-elements { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 999px; padding: 5px 11px; font-size: 11px; cursor: pointer;
}
.chip.on { background: var(--accent-soft); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.castsec-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.voicegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .voicegrid { grid-template-columns: 1fr; } }
.voice-preview-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.voice-preview-row .pv-select { max-width: 160px; }

.cast-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 4px 2px; }

/* Admin "Generate Prompts": the raw generator prompts, one per image. */
.promptbox {
  margin: 0; padding: 10px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line);
  border-radius: 8px; font-family: var(--mono); font-size: 11px; line-height: 1.55;
  color: var(--ink); white-space: pre-wrap; word-break: break-word;
  max-height: 240px; overflow: auto;
}

/* Admin "Import images": one tile per state to upload. */
.impgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin-top: 12px; }
.imptile {
  border: 1px dashed var(--line-2); border-radius: 12px; background: var(--panel-2);
  padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-height: 122px;
}
.imptile:hover { border-color: var(--cyan); background: rgba(76, 201, 240, .06); }
.imptile.is-on { border-style: solid; border-color: var(--accent); }
.imptile-label { font-size: 11px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.imptile-thumb { flex: 1; border-radius: 8px; min-height: 56px;
  background: rgba(127, 141, 179, .12) center / cover no-repeat; }
.imptile-status { margin-top: auto; }

/* YouTube-cookies connection state. */
.cookie-status {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  font-size: 12px; line-height: 1.5; margin: 0 0 12px; color: var(--ink);
}
.cookie-status.warn { border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent); }
.cookie-status.ok { border-color: color-mix(in srgb, var(--emerald) 45%, transparent);
  background: color-mix(in srgb, var(--emerald) 10%, transparent); }
.cookie-status.bad { border-color: color-mix(in srgb, var(--rose) 45%, transparent);
  background: color-mix(in srgb, var(--rose) 10%, transparent); }
.cookie-status .dim { color: var(--dim); }

/* A persistent "uploads did not go out" banner, with a Retry action. */
.up-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--rose) 45%, transparent);
  background: color-mix(in srgb, var(--rose) 10%, transparent);
  color: var(--ink); font-size: 12.5px; line-height: 1.5;
}
.up-banner b { color: var(--rose); }
.up-banner .btn-sm { margin-left: auto; }

/* live preview rail */
.castpv {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.castpv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.castpv-head h2 { margin: 0; font-size: 15px; }
.castpv-head .pv-select { max-width: 150px; }
.castpv-tabs { display: flex; gap: 4px; }
.castpv-stage {
  position: relative; width: 100%; aspect-ratio: var(--cpv-ar, 16 / 9); border-radius: 12px;
  overflow: hidden; background: #05070f; border: 1px solid var(--line);
}
.cpv-surround {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(16px) brightness(.62) saturate(.9); transform: scale(1.25); opacity: 0;
}
.castpv-stage.has-surround .cpv-surround { opacity: 1; }
.cpv-band {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: var(--cpv-band-h, 100%); overflow: hidden;
}
.cpv-scene {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; aspect-ratio: 16 / 9; overflow: hidden;
}
.cpv-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* native 9:16 explainer: a blurred copy fills the frame, the picture area sits on
   top (panel_box 30,48,1020,700) and the presenter is in the lower band, exactly
   as render_explainer.py's portrait panel layout composes it — the presenter is a
   cover-crop of the top 86% of the frame, horizontally centred on 66% of the
   source width (host band starts at y=748 of 1920). */
.castpv-stage.pv-native .cpv-band {
  top: 38.96%; height: 61.04%; left: 0; right: 0; transform: none; overflow: hidden;
}
.castpv-stage.pv-native .cpv-scene {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  left: 0; transform: none; overflow: hidden;
}
.castpv-stage.pv-native .cpv-scene img {
  top: 0; bottom: auto; left: 50%; right: auto;
  width: auto; height: calc(100% / 0.86); max-width: none;
  transform: translateX(-66%);
}
#cpv-stage[data-light] .cpv-scene img { filter: var(--cpv-light, none); }
.castpv-empty {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 20px; color: var(--dim); font-size: 12px; background: #05070f;
}
.castpv-badge {
  position: absolute; top: 8px; left: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: rgba(2, 6, 23, .6);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 3px 9px;
}
.castpv-name {
  position: absolute; bottom: 40px; left: 10px; right: 10px; font-size: 12px; font-weight: 600;
  color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}
.castpv-controls {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: center;
  gap: 10px; padding: 0 12px; background: linear-gradient(180deg, transparent, rgba(2, 6, 23, .8));
  color: #dfe7ff; font-size: 11px;
}
.cpv-play { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 9px; }
.cpv-time { font-variant-numeric: tabular-nums; opacity: .9; }
.cpv-spacer { flex: 1; }
.cpv-icon { opacity: .8; }

.castpv-card {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.castpv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12.5px; font-weight: 600; }
.castpv-comp { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: start; }
.castpv-comp img {
  width: 74px; height: 56px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel);
}
.castpv-comp-fields { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.castpv-comp-fields b { font-size: 12px; }
.castpv-comp-fields .dim { line-height: 1.5; }
.swatches { display: flex; align-items: center; gap: 8px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); }
.swatch-add {
  width: 26px; height: 26px; border-radius: 50%; border: 1px dashed var(--line-2); color: var(--dim);
  display: grid; place-items: center; font-size: 13px; cursor: not-allowed;
}
.thumbrow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.thumbrow::-webkit-scrollbar { display: none; }
.thumbrow .thumb {
  flex: 0 0 76px; height: 52px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); overflow: hidden;
}
.thumbrow .thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumbrow .thumb.is-soon { display: grid; place-items: center; font-size: 9px; color: var(--dimmer); border-style: dashed; }
.lightgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.lightcard {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 4px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  color: var(--dim); font-size: 9.5px; font: inherit; font-size: 9.5px;
}
.lightcard i { width: 100%; height: 22px; border-radius: 5px; display: block; }
.lightcard.is-on { border-color: var(--accent); color: var(--ink); }
.lightcard[data-light="studio"] i { background: linear-gradient(180deg, #f4f6fb, #b9c2d6); }
.lightcard[data-light="cinematic-blue-red"] i { background: linear-gradient(100deg, #3b82f6, #ef4444); }
.lightcard[data-light="warm"] i { background: linear-gradient(180deg, #ffd9a0, #c9772b); }
.lightcard[data-light="cool"] i { background: linear-gradient(180deg, #bcd8ff, #3f6fd6); }
.lightcard[data-light="dark"] i { background: linear-gradient(180deg, #2b3244, #0b0f1a); }
.lightcard[data-light="neon"] i { background: linear-gradient(100deg, #a855f7, #22d3ee); }
.lightcard[data-light=""] i { background: conic-gradient(from 0deg, #f472b6, #facc15, #4ade80, #60a5fa, #f472b6); }