:root{
  --bg:#0a0a10; --panel:#12141d; --panel2:#171a25; --border:#232838; --border2:#2c3242;
  --text:#eceef6; --muted:#8b92a8; --faint:#565d74;
  --accent:#ff3b3b; --accent2:#ff8a3d; --grad:linear-gradient(103deg,#ff3b3b,#ff8a3d);
  --ok:#3ecf8e; --ok-dim:#1c3a2e; --warn:#f0a83c; --warn-dim:#3a2e18; --bad:#ff5a52; --bad-dim:#3a1e1d;
  --info:#6aa8ff; --violet:#9d8cff;
  /* Redesign tokens (the control-room shell). The originals above stay so the
     Cast Studio and Production views, which key off --panel/--border, are
     untouched; the new shell and pages key off these. */
  --ground:#08080d; --surface:#0f1118; --surface2:#141826; --raise:#191d2b;
  --line1:#232a3d; --line2:#2e3650; --glass:linear-gradient(168deg,#171b2a,#0f121b 62%);
  --sb:248px;
  --r:14px; --r2:12px; --r3:9px;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono','Segoe UI Mono',Menlo,Consolas,monospace;
  --sans:'Schibsted Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --shadow:0 1px 0 #ffffff08 inset,0 2px 8px #0007,0 24px 60px #00000066;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--text);font-family:var(--sans);line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
  background-image:radial-gradient(1200px 560px at 82% -8%,#ff3b3b12,transparent 58%),
    radial-gradient(900px 520px at -6% 2%,#ff8a3d0b,transparent 55%),
    radial-gradient(700px 700px at 50% 120%,#6aa8ff08,transparent 60%);}
::selection{background:#ff3b3b40}

/* Custom scrollbars — thin, floating pills that match the Studio chrome. The
   transparent border + padding-box clip makes the thumb read as a pill with
   breathing room on any surface, so no track colour has to be hardcoded. */
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}
::-webkit-scrollbar-corner{background:transparent}

a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:6px}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
.mono{font-family:var(--mono)}
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ── top bar ─────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  padding:12px 22px;background:#0a0a10e6;backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.3px}
.mark{width:26px;height:32px;border-radius:5px;position:relative;flex:none;
  background:linear-gradient(160deg,#1a1d29,#0d0f16);border:1px solid var(--border2);overflow:hidden}
.mark::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;left:9px}
.mark::after{content:"";position:absolute;right:-2px;top:4px;bottom:4px;width:9px;
  background:repeating-linear-gradient(#ff3b3b 0 2px,transparent 2px 4px);opacity:.9}
.brand .sd{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent2);border:1px solid #ff8a3d40;border-radius:999px;padding:3px 8px;margin-left:2px}
.chanpick{margin-left:6px;display:flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid var(--border);
  border-radius:999px;background:var(--panel);font-weight:600;font-size:.9rem}
.chanpick .dot{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px #ff3b3b88}
.chanpick .cv{color:var(--muted);font-weight:500}
.chanpick svg{color:var(--faint)}
.spacer{flex:1}
.tbtn{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel);font-weight:600;font-size:.86rem}
.tbtn:hover{border-color:var(--border2)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(140deg,#2a2f40,#171a25);
  border:1px solid var(--border2);display:grid;place-items:center;font-weight:700;font-size:.8rem;color:var(--muted)}

.wrap{max-width:1160px;margin:0 auto;padding:26px 22px 90px}

/* ── screen switcher ─────────────────────────────────── */
.switch{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:#0d0f16;
  border:1px solid var(--border);box-shadow:0 1px 2px #0006 inset}
.switch button{padding:9px 18px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--muted);
  display:flex;align-items:center;gap:7px;transition:color .15s}
.switch button .ic{width:15px;height:15px;opacity:.8}
.switch button[data-on="1"]{background:var(--panel2);color:var(--text);box-shadow:0 1px 0 #ffffff10 inset,0 2px 6px #0008}
.switch button[data-on="1"] .ic{color:var(--accent);opacity:1}
.scrbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.screen{display:none;animation:fade .3s ease}
.screen[data-on="1"]{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── generic pieces ──────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;padding:4px 9px;border-radius:999px;
  border:1px solid var(--border2);color:var(--muted);white-space:nowrap}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);border-color:#3ecf8e40;background:#3ecf8e12}
.pill.warn{color:var(--warn);border-color:#f0a83c40;background:#f0a83c12}
.pill.bad{color:var(--bad);border-color:#ff5a5240;background:#ff5a5212}
.pill.info{color:var(--info);border-color:#6aa8ff40;background:#6aa8ff12}
.pill.live{color:var(--accent2);border-color:#ff8a3d40;background:#ff8a3d12}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.92rem;
  padding:12px 20px;border-radius:11px;border:1px solid var(--border2);background:var(--panel2);transition:.15s}
.btn:hover{border-color:#3a4358}
.btn.pri{background:var(--grad);border:none;color:#fff;box-shadow:0 6px 20px #ff3b3b33}
.btn.pri:hover{filter:brightness(1.06)}
.btn.sm{padding:8px 13px;font-size:.82rem;border-radius:9px}
.btn.ghost{background:transparent}
.btn.gho{background:transparent}
/* Redesign buttons carry inline SVG icons with no width/height attribute; size
   them here (they would otherwise render at the SVG default size) and keep the
   label on one line. Text-only buttons in the older views are unaffected. */
.btn{white-space:nowrap}
.btn svg{width:16px;height:16px;flex:none}
.btn.sm svg{width:14px;height:14px}
.hint{color:var(--muted);font-size:.9rem}
.sect-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px}
.sect-h h2{font-size:1.15rem;font-weight:800;letter-spacing:-.3px}
.sect-h .sub{color:var(--muted);font-size:.86rem;margin-top:2px}

/* ── channel header ──────────────────────────────────── */
.chead{display:flex;gap:22px;align-items:flex-start;padding:22px;margin-bottom:22px;position:relative;overflow:hidden}
.chead::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 200px at 100% 0,#ff3b3b12,transparent 70%);pointer-events:none}
.chead .badge{width:66px;height:66px;border-radius:16px;flex:none;background:linear-gradient(150deg,#20242f,#12141d);
  border:1px solid var(--border2);display:grid;place-items:center;font-size:1.7rem}
.chead h1{font-size:1.7rem;font-weight:900;letter-spacing:-.7px}
.chead .prem{color:var(--muted);margin-top:5px;max-width:52ch}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.chip{font-size:.75rem;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:4px 10px;background:#0d0f16}
.chip b{color:var(--text);font-weight:700}
.chip.mono{font-family:var(--mono);font-size:.72rem}

/* ── dashboard grid ──────────────────────────────────── */
.dash{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
.next{padding:20px;position:relative;overflow:hidden;border-color:#3a2a2f}
.next::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#ff3b3b0f,transparent 55%);pointer-events:none}
.next .tag{display:flex;align-items:center;gap:8px;color:var(--accent2);font-weight:700;font-size:.8rem;letter-spacing:.04em}
.next h3{font-size:1.5rem;font-weight:900;letter-spacing:-.5px;margin:12px 0 6px}
.next p{color:var(--muted);max-width:56ch}
.next .why{margin-top:12px;font-size:.82rem;color:var(--faint);border-left:2px solid var(--border2);padding-left:11px}
.next .row{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}

.epgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ep{border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;background:var(--panel2);transition:.18s;cursor:pointer}
.ep:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}
.ep .thumb{aspect-ratio:16/10;background:#0d0f16;position:relative;overflow:hidden}
.ep .thumb img{width:100%;height:100%;object-fit:cover;opacity:.92}
.ep .thumb .ov{position:absolute;left:9px;top:9px}
.ep .thumb .dur{position:absolute;right:9px;bottom:9px;font-family:var(--mono);font-size:.7rem;background:#000000a0;padding:2px 6px;border-radius:5px}
.ep .thumb .play{position:absolute;inset:0;margin:auto;width:40px;height:40px;border-radius:50%;background:#0a0a10cc;
  border:1px solid #ffffff30;display:grid;place-items:center;opacity:0;transition:.18s}
.ep:hover .thumb .play{opacity:1}
.ep .thumb .play::before{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.ep .thumb .epdel{position:absolute;right:8px;top:8px;z-index:6;width:26px;height:26px;border-radius:50%;
  background:#0a0a10cc;color:var(--muted);border:1px solid var(--border2);display:grid;place-items:center;
  font-size:.74rem;line-height:1;opacity:0;transition:opacity .15s,color .15s,border-color .15s}
.ep:hover .thumb .epdel,.ep .thumb .epdel:focus-visible{opacity:1}
.ep .thumb .epdel:hover{color:var(--bad);border-color:var(--bad)}
.ep .thumb .eprerun{position:absolute;right:40px;top:8px;z-index:6;width:26px;height:26px;border-radius:50%;
  background:#0a0a10cc;color:var(--muted);border:1px solid var(--border2);display:grid;place-items:center;
  font-size:.92rem;line-height:1;opacity:0;transition:opacity .15s,color .15s,border-color .15s}
.ep:hover .thumb .eprerun,.ep .thumb .eprerun:focus-visible{opacity:1}
.ep .thumb .eprerun:hover{color:var(--accent2);border-color:var(--accent2)}
.ep .meta{padding:11px 13px}
.ep .meta .t{font-weight:700;font-size:.94rem;letter-spacing:-.2px}
.ep .meta .d{color:var(--faint);font-size:.78rem;margin-top:3px}
.ep.gen .thumb{display:grid;place-items:center;background:repeating-linear-gradient(115deg,#12141d,#12141d 12px,#141826 12px,#141826 24px)}
.ep.gen .thumb .prog{width:78%}
.bar{height:5px;border-radius:99px;background:#0d0f16;overflow:hidden;border:1px solid var(--border)}
.bar > i{display:block;height:100%;background:var(--grad);border-radius:99px}
.ep.gen .thumb .lbl{font-size:.74rem;color:var(--accent2);font-weight:600;margin-bottom:8px;text-align:center}

.rail{display:flex;flex-direction:column;gap:16px}
.panel{padding:16px}
.panel h4{font-size:.82rem;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.panel h4 .c{margin-left:auto;color:var(--faint);font-weight:600;font-size:.76rem}
.ws{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:10px}
.ws li{font-size:.85rem;color:#c7ccdb;padding-left:16px;position:relative;line-height:1.45}
.ws li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent2);opacity:.7}
.caststrip{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.castav{width:46px;height:46px;border-radius:12px;overflow:hidden;border:1px solid var(--border2);background:#0d0f16;position:relative}
.castav img{width:100%;height:100%;object-fit:cover}
.castav .k{position:absolute;inset:auto 0 0 0;font-size:.55rem;text-align:center;background:#000000b0;color:#cbd0de;padding:1px}
.statrow{display:flex;gap:10px;margin-top:6px}
.stat{flex:1;text-align:center;padding:12px 6px;border:1px solid var(--border);border-radius:var(--r3);background:#0d0f16}
.stat b{display:block;font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.stat span{font-size:.7rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}

/* ── cast / character studio ─────────────────────────── */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.subtab{padding:8px 15px;border-radius:999px;border:1px solid var(--border);background:var(--panel);
  font-weight:600;font-size:.85rem;color:var(--muted)}
.subtab[data-on="1"]{background:var(--panel2);color:var(--text);border-color:var(--border2)}
.subtab b{color:var(--faint);font-weight:600;margin-left:4px}
.castpane{display:none}.castpane[data-on="1"]{display:block}
.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px}
/* A video's own scene assets, inside the tab they belong to. Collapsed per video
   because one channel holds hundreds; native <details> so it keeps its own state,
   answers the keyboard, and needs no script. */
.epgroups{margin:26px 0 0;border-top:1px solid var(--border);padding-top:18px}
.epgroups>.sub{margin:0 0 14px;max-width:62ch;line-height:1.5}
.epgroup{border:1px solid var(--border);border-radius:var(--r2);background:var(--panel);margin:0 0 10px;overflow:hidden}
.epgroup[open]{background:var(--panel2);border-color:var(--border2)}
.epgroup>summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;
  font-weight:600;font-size:.94rem;color:var(--text);user-select:none}
.epgroup>summary::-webkit-details-marker{display:none}
.epgroup>summary::marker{content:""}
.epgroup>summary:hover{background:var(--panel2)}
.epgroup>summary .ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.epgroup>summary b{color:var(--faint);font-weight:600;font-size:.82rem;flex:none}
.epgroup>summary .chev{margin-left:auto;width:16px;height:16px;color:var(--faint);flex:none;transition:transform .18s}
.epgroup[open]>summary .chev{transform:rotate(180deg)}
.epgroup .scenehead{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
  margin:14px 14px 8px}
.epgroup .assets{padding:0 14px 4px}
.epgroup .assets:last-child{padding-bottom:14px}
.asset{border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;background:var(--panel2);transition:.16s}
.asset:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.asset .im{aspect-ratio:1;background:#0d0f16;position:relative;overflow:hidden}
.asset.tall .im{aspect-ratio:3/4}
.asset .im img{width:100%;height:100%;object-fit:cover}
.asset .im .st{position:absolute;left:8px;top:8px}
.asset .im .ver{position:absolute;right:8px;top:8px;font-family:var(--mono);font-size:.64rem;background:#000000b0;padding:2px 6px;border-radius:5px;color:#cbd0de}
.asset .bd{padding:11px 12px}
.asset .bd .n{font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:6px;min-width:0}
.asset .bd .n .nm-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset .bd .nm-edit{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  color:var(--faint);background:transparent;opacity:0;transition:.14s}
.asset:hover .nm-edit,.asset .nm-edit:focus-visible{opacity:1}
.asset .bd .nm-edit:hover{color:var(--accent2);background:#ffffff0d}
.asset .bd .nm-edit svg{width:13px;height:13px}
.asset .bd .nm-input{flex:1;min-width:0;font:inherit;font-weight:700;font-size:.92rem;
  background:#0a0c13;border:1px solid var(--accent);border-radius:6px;color:var(--text);padding:2px 7px}
.asset .bd .nm-input:focus{outline:none;box-shadow:0 0 0 3px #ff3b3b22}
.asset .bd .sub{color:var(--faint);font-size:.76rem;margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
/* The action row WRAPS: a card can carry up to four actions (New version, Make
   lead, Promote/Make guest, Delete), and a narrow card cannot fit them on one
   line — without wrap the last button overflowed and .asset{overflow:hidden}
   clipped it. flex:1 1 auto packs as many as fit per row and grows them to fill;
   the rest drop to the next row, so every action stays fully visible. */
.asset .acts{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 12px}
.asset .acts .btn{flex:1 1 auto;padding:7px 8px;font-size:.75rem}
.placeholder{background:repeating-linear-gradient(135deg,#12141d,#12141d 10px,#161a27 10px,#161a27 20px)}
.newcard{border:1px dashed var(--border2);border-radius:var(--r2);display:grid;place-items:center;min-height:230px;
  color:var(--muted);gap:10px;text-align:center;background:#0d0f1680;transition:.16s}
.newcard:hover{border-color:var(--accent);color:var(--text)}
.newcard .plus{width:40px;height:40px;border-radius:50%;border:1px solid var(--border2);display:grid;place-items:center;font-size:1.4rem}
.stale-note{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid #ff5a5233;
  background:#ff5a520d;border-radius:var(--r3);color:#f2b0ab;font-size:.85rem}

/* ── generate panel ──────────────────────────────────── */
.gen-panel{padding:18px;margin-bottom:22px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end}
.field label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;background:#0d0f16;border:1px solid var(--border);border-radius:10px;
  color:var(--text);padding:12px 14px;font:inherit;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px #ff3b3b1f}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
/* Production-flow SCRIPT review: one editable beat per row. */
.revbeat{border:1px solid var(--border2);border-radius:10px;padding:10px 12px;background:var(--panel2)}
.revbeat.dropped{opacity:.45}
.revmeta{display:flex;align-items:center;gap:12px;margin-bottom:7px}
.revkeep{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:var(--muted);cursor:pointer}
.revspk{font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent2)}
.revline{width:100%;background:#0d0f16;border:1px solid var(--border);border-radius:9px;color:var(--text);padding:9px 11px;font:inherit;font-size:.9rem;resize:vertical}
.revline:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px #ff3b3b1f}
.revline[readonly]{color:var(--muted);font-style:italic}

/* ── new episode ─────────────────────────────────────── */
.compose{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.stages{list-style:none;display:flex;flex-direction:column;gap:2px}
.stages li{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:10px;font-size:.92rem;color:var(--muted)}
.stages li .n{width:24px;height:24px;border-radius:50%;border:1px solid var(--border2);display:grid;place-items:center;
  font-size:.72rem;font-weight:700;flex:none;background:#0d0f16}
.stages li.done{color:var(--text)}
.stages li.done .n{background:var(--ok-dim);border-color:#3ecf8e55;color:var(--ok)}
.stages li.active{color:var(--text);background:#ff3b3b0d;border:1px solid #ff3b3b26}
.stages li.active .n{background:var(--grad);border:none;color:#fff}
.stages li small{margin-left:auto;color:var(--faint);font-family:var(--mono);font-size:.72rem}
.stages li.active small{color:var(--accent2)}

/* ── episode player (phone) ──────────────────────────── */
.player{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.phone{width:300px;aspect-ratio:9/16;border-radius:30px;border:1px solid var(--border2);overflow:hidden;position:relative;
  background:#000;box-shadow:0 24px 60px #000000aa,0 0 0 8px #0d0f16}
.phone img{width:100%;height:100%;object-fit:cover}
.phone .cap{position:absolute;left:0;right:0;bottom:70px;text-align:center;font-weight:800;font-size:1.15rem;
  color:#fff;text-shadow:0 2px 14px #000;padding:0 24px;letter-spacing:-.2px}
.phone .wm{position:absolute;right:12px;bottom:12px;font-size:.6rem;color:#ffffff8c;font-weight:600}
.phone .pills{position:absolute;left:0;right:0;top:14px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:0 12px}
.phone .pp{font-size:.62rem;font-weight:600;background:#0a0a10b0;border:1px solid #ffffff22;color:#e6e9f2;padding:3px 8px;border-radius:999px}
.ep-meta h2{font-size:1.5rem;font-weight:900;letter-spacing:-.5px}
.ep-meta .log{color:var(--muted);margin-top:6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin-top:20px;font-size:.88rem}
.kv dt{color:var(--faint)}
.kv dd{color:#cbd0de}
.review{margin-top:20px;padding:14px 16px;border:1px solid var(--ok-dim);background:#3ecf8e0a;border-radius:var(--r3)}
.review .h{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ok);font-size:.9rem}
.review p{color:#b9c6be;font-size:.85rem;margin-top:6px}
.exportbar{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap}

/* ── landing hero ────────────────────────────────────── */
.hero{padding:54px 0 34px;text-align:center;position:relative}
.hero .k{color:var(--accent2)}
.hero h1{font-size:clamp(2.3rem,5.5vw,3.7rem);font-weight:900;letter-spacing:-1.4px;line-height:1.05;max-width:15ch;margin:14px auto 0;text-wrap:balance}
.hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:var(--muted);font-size:1.12rem;max-width:52ch;margin:18px auto 0;line-height:1.6}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:44px 0;position:relative}
.flow .step{padding:18px 16px;text-align:left;position:relative}
.flow .step:not(:last-child)::after{content:"";position:absolute;right:-1px;top:22px;bottom:22px;width:1px;background:var(--border)}
.flow .step .no{font-family:var(--mono);color:var(--accent2);font-size:.78rem;font-weight:700}
.flow .step h4{font-size:1rem;font-weight:800;margin:8px 0 5px}
.flow .step p{color:var(--muted);font-size:.85rem;line-height:1.5}
.hnote{text-align:center;color:var(--faint);font-size:.82rem;margin-top:8px}

@media(max-width:900px){
  .dash{grid-template-columns:1fr}
  .compose{grid-template-columns:1fr}
  .player{grid-template-columns:1fr;justify-items:center}
  .flow{grid-template-columns:1fr 1fr}
  .flow .step::after{display:none}
}
@media(max-width:560px){
  .wrap{padding:20px 14px 80px}
  .epgrid{grid-template-columns:1fr}
  .chanpick .cv{display:none}
  .gen-panel{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .chead{flex-direction:column}
}
/* ── channel drawer ─────────────────────────────────── */
.scrim{position:fixed;inset:0;background:#05060acc;z-index:70;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.scrim[data-open="1"]{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;bottom:0;width:322px;max-width:87vw;z-index:80;background:var(--panel);
  border-right:1px solid var(--border);transform:translateX(-103%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;gap:5px;overflow-y:auto;
  padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom))}
.drawer[data-open="1"]{transform:none}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 10px}
.drawer .dh span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700}
.drawer .dh button{width:30px;height:30px;border-radius:8px;color:var(--muted)}
.drawer .dh button:hover{background:#ffffff08;color:var(--text)}
.chn{display:flex;align-items:center;gap:12px;padding:11px;border-radius:12px;border:1px solid transparent;width:100%;text-align:left;transition:.15s}
.chn:hover{background:#ffffff06}
.chn[data-on="1"]{background:#ff3b3b0f;border-color:#ff3b3b26}
.chn .em{width:40px;height:40px;border-radius:11px;background:linear-gradient(150deg,#20242f,#12141d);border:1px solid var(--border2);display:grid;place-items:center;font-size:1.15rem;flex:none}
.chn .nm{font-weight:700;font-size:.94rem;display:block}
.chn .mt{color:var(--faint);font-size:.75rem;margin-top:1px;display:block}
.chn .go{margin-left:auto;color:var(--faint);font-size:1.2rem}
.drawer .newchn{margin-top:8px;border:1px dashed var(--border2);border-radius:12px;padding:13px;text-align:center;color:var(--muted);font-weight:600;font-size:.9rem;transition:.15s}
.drawer .newchn:hover{border-color:var(--accent);color:var(--text)}
.drawer .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);color:var(--faint);font-size:.78rem;display:flex;align-items:center;gap:8px}
.drawer .foot .bar{flex:1}

/* ── modal (asset detail) ───────────────────────────── */
.modalw{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:22px}
.modalw[data-open="1"]{display:grid}
.modalw .mscrim{position:absolute;inset:0;background:#05060ad0}
.modal{position:relative;width:min(720px,100%);max-height:88vh;overflow-y:auto;background:var(--panel);border:1px solid var(--border2);border-radius:18px;box-shadow:0 30px 80px #000c}
.modal .x{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;background:#0d0f16;border:1px solid var(--border2);display:grid;place-items:center;z-index:3;color:var(--muted)}
.modal .x:hover{color:var(--text)}
.mbody{display:grid;grid-template-columns:250px 1fr;gap:22px;padding:22px}
.mbody .shot{border-radius:14px;overflow:hidden;border:1px solid var(--border2);aspect-ratio:1;background:#0d0f16}
.mbody .shot img{width:100%;height:100%;object-fit:cover}
.mbody h2{font-size:1.4rem;font-weight:900;letter-spacing:-.4px}
/* Video quality: two dropdowns (model, resolution) and the resolved credit rate.
   Selects rather than pills because the list is model × resolution and each
   line states a price; a native select keeps six-plus options legible on a phone. */
.vqsel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.vqs{background:#0d0f16;border:1px solid var(--border2);border-radius:9px;color:var(--text);padding:8px 10px;font:inherit;font-size:.84rem;min-width:0;max-width:100%}
.vqs:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px #ff3b3b1f}
.vqs:disabled{opacity:.6}
.vqrate{font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap}
.apopts{display:flex;gap:6px;margin-top:12px}
.apopt{flex:1;padding:8px 6px;border:1px solid var(--border2);border-radius:9px;background:var(--panel2);
  color:var(--muted);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:.15s}
/* :not(.on) matters, and not for taste. `.apopt:hover:not(:disabled)` is
   specificity (0,3,0) and `.apopt.on` is (0,2,0), so hover WINS over selected —
   pointing at the chosen option would repaint its hairline ring with the bright
   accent. Excluding .on is the fix; out-specifying it would be a second rule to
   keep in step. Hover is for the options you have not chosen. */
.apopt:hover:not(:disabled):not(.on){border-color:var(--accent2);color:var(--text)}
/* A coming-soon option (e.g. Brand Stories) is shown but not selectable. */
.apopt:disabled{opacity:.45;cursor:not-allowed}
/* Selected option in the channel settings. A tinted surface with a hairline
   ring rather than the full Record Red gradient: these four panels sit together
   in one dialog, so four solid gradient chips read as four alerts competing for
   the eye. The colour still comes from the brand, at a weight that says "this
   one" without shouting. `color` is restored to --text because the fill is now
   dark, and white type on it would be the only thing left from the old look. */
.apopt.on{
  border-color:#ff3b3b36;
  box-shadow:0 0 0 1px #ff3b3b30 inset;
  background:#f0322f1f;
  color:var(--text);
}
.apopt:disabled{opacity:.5;cursor:default}

/* Getting started: the niche and character pickers. A grid of equals, because
   the pick IS the step and nothing here should read as a form to fill in. */
.obgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;margin-top:16px}
.obcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  padding:13px 14px;border:1px solid var(--border2);border-radius:12px;background:var(--panel2);
  cursor:pointer;transition:border-color .15s,transform .1s;color:var(--text);font:inherit}
.obcard:hover{border-color:var(--accent2);transform:translateY(-1px)}
.obcard.on{border-color:var(--accent2);background:#ff8a3d12}
.obcard .ic{font-size:1.35rem;line-height:1.1}
.obcard b{font-size:.92rem;font-weight:700}
.obcard .d{font-size:.76rem;color:var(--muted);line-height:1.4}
.obcard.soon{opacity:.55;cursor:not-allowed}
.obcard.soon:hover{border-color:var(--border2);transform:none}
.obcard.soon b{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.obsoon{font-size:.62rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--accent2);border:1px solid var(--accent2);border-radius:999px;padding:1px 7px;opacity:.9}
.obstep[hidden]{display:none}

/* Top-up chooser: the credit packs offered when an action needs more credit than
   the account holds. A row per pack, the smallest one that covers the shortfall
   marked as the suggestion — chosen here, so nobody is dropped into a checkout
   they did not pick. */
.tupacks{display:grid;gap:8px;margin-top:14px}
.tupack{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--border2);
  border-radius:12px;text-decoration:none;color:var(--text);transition:border-color .15s,background .15s}
.tupack:hover{border-color:var(--accent2)}
.tupack.rec{border-color:var(--accent2);background:#ff8a3d10}
.tupack .c{font-weight:800}
.tupack .s{color:var(--muted);font-size:.78rem}
.tupack .p{margin-left:auto;font-weight:800;font-family:var(--mono)}
.tupack .tag{font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;background:var(--grad);
  color:#fff;padding:3px 7px;border-radius:99px;font-weight:800}
.tushort{display:flex;align-items:baseline;gap:8px;margin-top:12px;padding:11px 14px;
  border:1px solid var(--warn-dim);border-radius:12px;background:#f0a83c0d}
.tushort b{font-size:1.15rem;font-weight:800;color:var(--warn)}
.tushort span{color:var(--muted);font-size:.8rem}
.vrow{display:flex;gap:8px;margin:14px 0 0}
.vchip{padding:7px 12px;border-radius:9px;border:1px solid var(--border2);font-size:.8rem;font-weight:600;font-family:var(--mono);color:var(--muted)}
.vchip[data-on="1"]{background:var(--panel2);border-color:var(--accent);color:var(--text)}
.mstep{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--border)}
.mstep .n{width:22px;height:22px;border-radius:50%;border:1px solid var(--border2);display:grid;place-items:center;font-size:.7rem;font-weight:700;flex:none;color:var(--muted)}
.mstep.done .n{background:var(--ok-dim);border-color:#3ecf8e55;color:var(--ok)}
.mstep .t{font-weight:700;font-size:.9rem}.mstep .d{color:var(--faint);font-size:.8rem;margin-top:2px}
.wdrow{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.wd{width:66px}.wd .im{aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--border2);position:relative}
.wd .im img{width:100%;height:100%;object-fit:cover}
.wd .l{font-size:.66rem;color:var(--muted);text-align:center;margin-top:5px}
.wd.stale .im{outline:2px solid var(--bad);outline-offset:-2px}
.wd .add{width:100%;height:100%;display:grid;place-items:center;border:1px dashed var(--border2);border-radius:10px;font-size:1.2rem;color:var(--muted)}

/* ── create channel ─────────────────────────────────── */
.create{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start}
.tagin{display:flex;flex-wrap:wrap;gap:8px;padding:9px;background:#0d0f16;border:1px solid var(--border);border-radius:10px;min-height:50px}
.tagin:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px #ff3b3b1f}
.tg{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--border2);border-radius:8px;padding:6px 10px;font-size:.82rem;font-weight:600}
.tg b{color:var(--faint);cursor:pointer;font-weight:700}.tg b:hover{color:var(--bad)}
.tagin input{flex:1;min-width:130px;background:none;border:none;color:var(--text);font:inherit;outline:none;padding:5px}
.tagin input::placeholder{color:var(--faint)}
.mlabel{font-size:.74rem;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;margin-bottom:9px;display:block}
.seg{display:inline-flex;padding:3px;background:#0d0f16;border:1px solid var(--border);border-radius:10px;gap:2px;flex-wrap:wrap}
.seg button{padding:10px 15px;border-radius:8px;font-weight:600;font-size:.85rem;color:var(--muted)}
.seg button[data-on="1"]{background:var(--panel2);color:var(--text);box-shadow:0 1px 0 #ffffff10 inset}
.summary{position:sticky;top:82px}
.summary .em{width:54px;height:54px;border-radius:14px;background:linear-gradient(150deg,#20242f,#12141d);border:1px solid var(--border2);display:grid;place-items:center;font-size:1.5rem;margin-bottom:12px}

/* ── empty states ───────────────────────────────────── */
.empty{text-align:center;padding:40px 22px;border:1px dashed var(--border2);border-radius:var(--r);background:#0d0f1680}
.empty .ic{font-size:2rem;margin-bottom:10px;opacity:.85}
.empty h3{font-size:1.1rem;font-weight:800}
.empty p{color:var(--muted);max-width:42ch;margin:6px auto 0;font-size:.9rem}
.startgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.startcard{padding:20px;text-align:left;border:1px solid var(--border);border-radius:var(--r2);background:var(--panel2);transition:.16s}
.startcard:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}
.startcard .no{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.startcard h4{font-size:1.02rem;font-weight:800;margin:13px 0 5px;display:flex;align-items:center;gap:8px}
.startcard p{color:var(--muted);font-size:.86rem;line-height:1.5}

/* ── loading / generating ───────────────────────────── */
@keyframes shimmer{100%{transform:translateX(100%)}}
.shim{position:relative;overflow:hidden;background:#0f1119}
.shim::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,#ffffff10 42%,#ff8a3d1f 50%,#ffffff10 58%,transparent);animation:shimmer 1.5s infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid #ffffff33;border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block;flex:none;vertical-align:-2px}
.btn.loading{pointer-events:none;opacity:.9}
@keyframes imgfade{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:none}}
.imgfade{animation:imgfade .55s ease both}

/* a generating asset card */
.asset.gen .im{display:grid;place-items:center;min-height:120px}
.asset .im .genlbl{position:absolute;left:0;right:0;bottom:0;padding:9px 10px;background:linear-gradient(#0000,#0a0a10e6);
  font-size:.72rem;font-weight:600;color:var(--accent2);display:flex;align-items:center;gap:7px;justify-content:center;z-index:3}
.asset .im .scan{position:absolute;left:6%;right:6%;height:2px;top:6%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent2),transparent);box-shadow:0 0 14px var(--accent2);animation:scanpass 1.3s ease-in-out infinite}
@keyframes scanpass{0%{top:8%}100%{top:92%}}

/* filming contact sheet */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.sh{aspect-ratio:9/16;border-radius:9px;border:1px solid var(--border);overflow:hidden;position:relative;background:#0d0f16}
.sh .fill{width:100%;height:100%;object-fit:cover}
.sh .num{position:absolute;left:5px;top:4px;font-family:var(--mono);font-size:.6rem;background:#000000a6;padding:1px 5px;border-radius:4px;z-index:2;color:#cbd0de}
.sh.queued{opacity:.55}
.sh.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 20px #ff3b3b40}
.sh .ring{position:absolute;inset:0;margin:auto;width:32px;height:32px;border-radius:50%;
  background:conic-gradient(var(--accent) 0 62%,#ffffff1a 62%);
  -webkit-mask:radial-gradient(transparent 54%,#000 55%);mask:radial-gradient(transparent 54%,#000 55%);animation:spin 1.4s linear infinite}
.sh .flm{position:absolute;left:0;right:0;bottom:0;font-size:.56rem;text-align:center;padding:3px 2px;background:#0a0a10cc;color:var(--accent2);font-weight:700;letter-spacing:.02em;z-index:2}
.sh .chk{position:absolute;right:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--ok);color:#04120b;display:grid;place-items:center;font-size:.62rem;font-weight:800;z-index:2}
.filmsub{display:flex;flex-direction:column;align-items:stretch;gap:6px;color:var(--faint);font-size:.8rem;margin-top:12px}
/* the pinned milestones: what the engine has ACCOMPLISHED, kept above the feed */
.prodmiles{display:flex;flex-direction:column;gap:3px}
.prodmiles .ms{color:var(--text);font-size:.8rem;line-height:1.5;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;animation:msIn .3s ease}
@keyframes msIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
/* the live action feed: a running account of what the engine is doing */
.prodfeed{display:flex;flex-direction:column;gap:2px;font-size:.76rem;line-height:1.5}
.prodfeed .fl{color:var(--muted);opacity:.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:flIn .35s ease}
@keyframes flIn{from{opacity:0;transform:translateY(3px)}to{opacity:.42;transform:none}}
.prodnow{display:flex;align-items:center;gap:7px;color:var(--text)}
#prodSubT{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── mobile app shell (bottom nav, touch, safe areas) ── */
.botnav{display:none}
@media(max-width:760px){
  .topbar{padding:10px 14px;gap:10px;padding-top:calc(10px + env(safe-area-inset-top))}
  .topbar .tbtn{display:none}          /* "New episode" moves to the bottom bar */
  .brand{font-size:.98rem}
  .chanpick{padding:7px 11px;font-size:.85rem;min-height:38px}
  .scrbar{display:none}                /* top switcher + context pills replaced by the bottom bar */
  .wrap{padding:16px 14px calc(94px + env(safe-area-inset-bottom))}

  /* fixed, thumb-reachable bottom tab bar */
  .botnav{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#0b0d14f2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);
    padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .botnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;border-radius:14px;font-size:.66rem;font-weight:700;letter-spacing:.02em;color:var(--muted);transition:color .15s,background .15s}
  .botnav a .bi{font-size:1.15rem;line-height:1;transition:color .15s}
  .botnav a[data-on="1"]{color:var(--text);background:#ffffff0a}
  .botnav a[data-on="1"] .bi{color:var(--accent)}
  .botnav .mid .bi{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;
    display:grid;place-items:center;font-size:1.15rem;box-shadow:0 4px 14px #ff3b3b55}
  .botnav .mid[data-on="1"]{background:#ffffff0a}
  .botnav .mid[data-on="1"] .bi{color:#fff}

  /* generous touch targets */
  .btn{min-height:48px}
  .btn.sm{min-height:44px;padding:11px 15px;font-size:.85rem}
  .subtab{min-height:42px;display:inline-flex;align-items:center}
  .tbtn,.avatar{min-height:40px}

  /* cast sub-tabs: swipe, don't wrap (bleed to the screen edges) */
  .subtabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin:0 -14px 18px;padding:0 14px 5px;scrollbar-width:none}
  .subtabs::-webkit-scrollbar{display:none}
  .subtab{flex:none}

  /* asset gallery: comfortable 2-up */
  .assets{grid-template-columns:repeat(2,1fr);gap:12px}
  .asset .bd{padding:10px 11px}.asset .bd .n{font-size:.88rem}
  .asset .acts{padding:0 11px 11px;gap:6px}
  .newcard{min-height:186px}
  .stale-note{font-size:.8rem;padding:10px 12px}

  /* dashboard breathing room */
  .chead{padding:18px;gap:16px}.chead h1{font-size:1.45rem}.chead .badge{width:56px;height:56px;font-size:1.5rem}
  .next{padding:18px}.next h3{font-size:1.3rem}.next .row .btn{flex:1 1 auto}
  .sect-h h2{font-size:1.05rem}
  .rail{margin-top:6px}

  /* new episode */
  .gen-panel .btn{height:48px}
  .stages li{padding:12px}

  /* episode player */
  .player{gap:22px}
  .phone{width:min(300px,82vw)}
  .ep-meta h2{font-size:1.35rem}
  .exportbar{flex-direction:column;align-items:stretch}
  .exportbar .btn{width:100%}.exportbar .hint{text-align:center;order:3}

  /* landing */
  .hero{padding:36px 0 20px}

  /* new-component mobile: modal full-screen, forms + empty stack */
  .modalw{padding:0;place-items:stretch}
  .mscrim{display:none}
  .modal{max-height:100dvh;height:100dvh;border-radius:0;width:100%;border:none}
  .mbody{grid-template-columns:1fr;padding:18px calc(18px + env(safe-area-inset-left)) calc(18px + env(safe-area-inset-bottom))}
  .mbody .shot{max-width:220px;margin:0 auto;width:100%}
  .create{grid-template-columns:1fr;gap:20px}
  .summary{position:static;order:-1}
  .startgrid{grid-template-columns:1fr}
  .seg{width:100%}.seg button{flex:1}
}
@media(max-width:400px){
  .brand .sd{display:none}
  .chanpick .cv{display:none}
  .assets{gap:10px}
  .botnav a{font-size:.63rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* NB the artwork plate is .obart, NOT .sh: .sh is the Production screen shot-strip
   cell (aspect-ratio 9/16, a full border and a 9px radius) and series.css is one
   shared stylesheet, so the picker was inheriting a border and a radius inside an
   already-rounded card. Rename rather than out-specify: the collision is the bug.
   The character LIBRARY. The picture is the control: it sits above the name and
   carries the selected state, because the decision being made is "which of these
   do I want to look at for every episode", and that is answered by the artwork,
   not by the label under it. */
.obcast{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px}
.obcast .obcard{padding:0;overflow:hidden;gap:0}
.obcast .obart{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;
  background:#fff;border-bottom:1px solid var(--border);display:grid;place-items:center}
.obcast .obart img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.obcast .obcard:hover .obart img{transform:scale(1.04)}
/* No portrait drawn yet: the emoji keeps its own ground rather than sitting on a
   white plate meant for artwork. */
.obcast .nopic .obart{background:var(--panel2)}
.obcast .nopic .ic{font-size:2.4rem;line-height:1}
.obcast b{font-size:.9rem;font-weight:700;padding:9px 11px 0}
.obcast .d{font-size:.74rem;color:var(--muted);line-height:1.35;padding:2px 11px 11px}
/* The tick rides the picture, so the selected state is legible at a glance in a
   grid where every card is mostly image. */
.obcast .tick{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;
  background:var(--grad);box-shadow:0 2px 8px #0006;opacity:0;transform:scale(.6);transition:.18s}
.obcast .obcard.on{border-color:var(--accent2);background:#ff8a3d10}
/* The third door: your own character. Dashed, because it is a slot rather than a
   picture until a file is chosen; the chosen portrait then fills the plate like a preset's. */
.obcast .obup .obart{border:1px dashed var(--border2);background:var(--panel2)}
.obcast .obup .obart img{position:absolute;inset:0}
/* The shared .obart img rule sets display:block, which outranks [hidden]: say it. */
.obcast .obup .obart img[hidden]{display:none}
.obcast .obup.on .obart{border-color:var(--accent2)}
/* The Cast Studio upload dialog: the same two-picture shape the getting-started
   card uses, so a character's portrait and its sheet are asked for together. */
.uprow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px;margin-top:12px}
.uprow .field{margin-top:10px}
.uprow input[type=file],.obupload input[type=file]{font-size:.82rem;max-width:100%}
.req{font-weight:400;color:var(--muted)}
/* WHO THEY ARE: a compact grid, because these are short facts and a column of full-width
   inputs would read as a form to fill rather than a few things to say. */
.upprofile{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.upphead{font-size:.74rem;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase}
.uppgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0 12px}
.uppgrid .field{margin-top:9px}
.uppgrid input{padding:8px 10px;font-size:.86rem}
/* The one-line profile under a character's name on its card. */
.asset .pline{color:var(--muted)}
.asset .pline.none{color:var(--faint);font-style:italic}
.mprof{margin-top:20px}
.mprof .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0 10px}
.mprof .pgrid .field{margin-top:8px}
.mprof .pgrid input{padding:7px 9px;font-size:.84rem}
.mprof .pline{font-size:.85rem;color:var(--text);margin-top:6px}
.mprof .pnone{font-size:.82rem;color:var(--muted);margin-top:6px}
.uppreviews{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.uppv{width:110px}
.uppv img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1px solid var(--border);background:#fff;display:block}
.uppv span{display:block;font-size:.7rem;color:var(--muted);margin-top:4px;text-align:center}
.obupload{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel2)}
.obupload .field{margin-top:8px}
.obupload .req{font-weight:400;color:var(--muted)}
.obuprow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px}
.obupload input[type=file]{font-size:.82rem;max-width:100%}
.obcast .obcard.on .tick{opacity:1;transform:none}
.obcast .obcard.on .obart{border-bottom-color:var(--accent2)}
@media (max-width:420px){.obcast{grid-template-columns:repeat(2,1fr);gap:10px}}

/* The turnaround sheet, revealed once a character is picked. It is a wide
   document on a white ground, so it gets its own plate rather than sitting on
   the dark panel where the white would read as a blown-out image. */
.obboard{margin-top:16px;border:1px solid var(--border2);border-radius:var(--r2);
  background:var(--panel2);padding:12px;animation:fade .25s ease}
.obboard-h{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:9px}
.obboard img{width:100%;height:auto;display:block;border-radius:var(--r3);background:#fff}
.obboard .hint{font-size:.76rem;margin-top:9px}

/* A character described but not yet drawn. It sits in the grid as a real card so
   the choice is visibly recorded, but with no image and no actions: there is
   nothing to approve or version until the first episode makes it. */
.pendingcast .im{display:grid;place-items:center;background:var(--panel2);
  border-bottom:1px dashed var(--border2)}
.pendingcast .im .ic{font-size:1.8rem;opacity:.5}
.pendingcast .bd .sub span{color:var(--faint)}

/* The turnaround inside the asset modal. It sits under the portrait in the same
   column: same subject, four more views of it. White plate because the sheets
   are drawn on white and would otherwise float on the dark panel. */
.mboard{margin-top:16px}
.mboard .eyebrow{display:block;margin-bottom:7px}
.mboard img{width:100%;height:auto;display:block;border-radius:var(--r3);
  border:1px solid var(--border2);background:#fff}
.mboard .hint{font-size:.74rem;margin-top:7px}

/* Delete a channel, from its drawer row. Held back until the row is hovered or
   the button is focused, like .epdel: a destructive control should not be the
   thing your eye lands on in a list you are using to navigate. It stays
   reachable by keyboard, which is why :focus-visible reveals it too. */
.chn{position:relative}
.chn .chndel{position:absolute;right:30px;top:50%;transform:translateY(-50%);z-index:3;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;
  background:#0a0a10cc;border:1px solid var(--border2);color:var(--muted);
  opacity:0;transition:.15s}
.chn:hover .chndel,.chn .chndel:focus-visible{opacity:1}
.chn .chndel:hover{color:var(--bad);border-color:var(--bad)}
.chn .chndel:disabled{opacity:.4;cursor:default}

/* The cast price, beside the generate label. Quiet by default: it is a fact the
   reader wants before clicking, not a warning. */
.genhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.castmeter{font-size:.76rem;color:var(--faint)}

/* Channel settings modal: the four panels stack flush inside the dialog instead
   of floating as separate rail cards. The border and radius belong to the modal
   here, so the panels lose their own and become sections of one sheet. */
.setgrid{display:grid;gap:0;margin-top:18px}
.setgrid .panel{border:0;border-radius:0;background:transparent;padding:18px 0;
  border-top:1px solid var(--border)}
.setgrid .panel:first-child{border-top:0;padding-top:6px}
.setgrid .panel:last-child{padding-bottom:0}

/* ══════════════════════════════════════════════════════════════════════════
   CONTROL-ROOM REDESIGN (2026-09-04) — sidebar IA, overview, continuity.
   Appended so it wins by cascade order over the older dashboard rules above,
   which are dash.php-only and retired. Reuses .card/.pill/.btn/.field/.apopt/
   .panel/.modalw from above; adds only the new shell + page structure.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* shell */
.app{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;
  padding:18px 14px;border-right:1px solid var(--line1);background:linear-gradient(180deg,#0c0e15,#080a10)}
.brand{display:flex;align-items:center;gap:11px;padding:8px 10px 16px;font-weight:800;letter-spacing:-.4px;font-size:1.06rem}
.brand .mark{width:30px;height:36px;border-radius:7px;position:relative;flex:none;overflow:hidden;
  background:linear-gradient(160deg,#1c2030,#0c0e16);border:1px solid var(--line2);box-shadow:0 4px 14px #0008}
.brand .mark::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;left:10px;
  border-left:10px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.brand .mark::after{content:"";position:absolute;right:-1px;top:5px;bottom:5px;width:9px;
  background:repeating-linear-gradient(#ff3b3b 0 2px,transparent 2px 4px)}
.brand .rr{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* channel switcher */
.chanwrap{position:relative;margin-bottom:12px}
.chan{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 11px;border-radius:var(--r2);
  border:1px solid var(--line1);background:var(--glass);cursor:pointer;transition:.15s;box-shadow:var(--shadow)}
.chan:hover{border-color:var(--line2)}
.chan .av{width:34px;height:34px;border-radius:9px;flex:none;background:linear-gradient(140deg,#2a3350,#151a2b);
  display:grid;place-items:center;font-weight:800;color:#cbd2ea;border:1px solid var(--line2);position:relative}
.chan .av .rec{position:absolute;right:-3px;top:-3px;width:11px;height:11px;border-radius:50%;background:var(--accent);
  border:2px solid var(--ground);box-shadow:0 0 8px #ff3b3baa;animation:pulse 2.4s infinite}
.chan .nm{flex:1;min-width:0}
.chan .nm b{display:block;font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chan .nm span{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.chan .cev{width:16px;height:16px;flex:none;color:var(--faint);transition:transform .18s}
.chanwrap.open .chan .cev{transform:rotate(180deg)}
.chanwrap.open .chan{border-color:var(--line2);background:var(--surface2)}
.chandrop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:70;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r2);
  box-shadow:0 20px 50px #000b,0 1px 0 #ffffff0c inset;padding:6px;max-height:min(70vh,460px);overflow-y:auto;
  opacity:0;transform:translateY(-6px) scale(.99);pointer-events:none;transition:.16s cubic-bezier(.2,.8,.3,1)}
.chanwrap.open .chandrop{opacity:1;transform:none;pointer-events:auto}
.cdlabel{font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding:8px 10px 6px}
.cdrow{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border-radius:9px;transition:.12s;text-align:left;position:relative}
.cdrow:hover{background:#ffffff08}
.cdrow .av{width:28px;height:28px;border-radius:8px;flex:none;background:linear-gradient(140deg,#2a3350,#151a2b);
  display:grid;place-items:center;font-weight:800;font-size:.78rem;color:#cbd2ea;border:1px solid var(--line2);position:relative}
.cdrow .av .rec{position:absolute;right:-3px;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.cdrow .nm{flex:1;min-width:0}
.cdrow .nm b{display:block;font-weight:600;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdrow .nm span{font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cdrow .ck{flex:none;color:var(--accent2);opacity:0}
.cdrow.on .ck{opacity:1}
.cdrow.on{background:#ffffff06}
.cddel{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:7px;
  display:grid;place-items:center;color:var(--faint);background:#0d0f16cc;opacity:0;transition:.14s;font-size:.8rem}
.cdrow:hover .cddel,.cddel:focus-visible{opacity:1}
.cddel:hover{color:var(--bad);border-color:var(--bad)}
.cdsep{height:1px;background:var(--line1);margin:6px 4px}
.cdnew{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;color:var(--accent2);font-weight:600;font-size:.86rem;transition:.12s}
.cdnew:hover{background:#ff8a3d12}
.cdnew svg{width:16px;height:16px}

/* nav */
.nav{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--muted);
  font-weight:600;font-size:.92rem;transition:.14s;position:relative;cursor:pointer}
.nav a svg{width:18px;height:18px;flex:none;opacity:.85}
.nav a:hover{background:#ffffff07;color:var(--text)}
.nav a.on{background:linear-gradient(100deg,#1a1f30,#12151f);color:var(--text);box-shadow:var(--shadow)}
.nav a.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:99px;background:var(--grad)}
.nav a.on svg{opacity:1;color:var(--accent2)}
.nav a .ct{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--faint);font-weight:500}

.side .foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.credits{padding:12px 13px;border-radius:var(--r2);border:1px solid var(--line1);background:var(--glass);box-shadow:var(--shadow)}
.credits .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.credits .top b{font-family:var(--mono);font-size:1.02rem;font-weight:600;letter-spacing:-.03em}
.credits .top span{font-size:.68rem;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.credits .bar{height:5px;border-radius:99px;background:#0a0c13;overflow:hidden}
.credits .bar i{display:block;height:100%;background:var(--grad);border-radius:99px}
.credits .add{margin-top:9px;font-size:.76rem;color:var(--accent2);font-weight:600;display:inline-block}
.acct{display:flex;align-items:center;gap:10px;padding:8px 6px}
.acct .pic{width:30px;height:30px;border-radius:50%;background:linear-gradient(140deg,#333c58,#1a1f30);
  display:grid;place-items:center;font-weight:700;font-size:.78rem;color:var(--muted);border:1px solid var(--line2)}
.acct .who{flex:1;min-width:0;font-size:.82rem}
.acct .who b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .who span{font-size:.7rem;color:var(--faint)}
.acct svg{width:16px;height:16px;color:var(--faint)}

/* main + pages */
.main{min-width:0}
.main>.wrap{max-width:1080px;margin:0 auto;padding:30px 34px 80px}
.page{animation:rise .34s cubic-bezier(.2,.7,.3,1)}
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.phead h1{font-size:1.75rem;font-weight:800;letter-spacing:-.6px}
.phead .sub{color:var(--muted);font-size:.94rem;margin-top:3px}
.pill.live .d{background:var(--accent);animation:pulse 1.6s infinite}
.pill.info{color:var(--info);border-color:#6aa8ff33;background:#6aa8ff10}

/* focused-flow header (onboard / create, no sidebar) */
.plainbar{max-width:1080px;margin:0 auto;padding:18px 34px 0;display:flex;align-items:center;justify-content:space-between;gap:14px}
.plainbar .brand{padding:0}
.plainbar .brand .sd{color:var(--faint);font-weight:600;font-size:.9rem;margin-left:2px}
.plainwrap{max-width:1080px}

/* overview (scoped under .main so it never clobbers the onboarding .hero) */
.main .hero{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:20px}
@media(max-width:820px){.main .hero{grid-template-columns:1fr}}
.prod{padding:22px;position:relative;overflow:hidden;background:var(--glass)}
.prod::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,#ff3b3b18,transparent 70%);pointer-events:none}
.prod .lbl{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.prod h2{font-size:1.32rem;font-weight:800;letter-spacing:-.4px;line-height:1.25;text-wrap:balance}
.prod .by{color:var(--muted);font-size:.9rem;margin-top:7px}
.prog{margin-top:18px}
.prog .row{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:7px}
.prog .row .mono{color:var(--muted)}
.prog .track{height:7px;border-radius:99px;background:#0a0c13;overflow:hidden;border:1px solid var(--line1)}
.prog .track i{display:block;height:100%;background:var(--grad);border-radius:99px;box-shadow:0 0 12px #ff3b3b66}
.prod .acts{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.stat{padding:18px 20px;display:flex;flex-direction:column;gap:2px}
.stat .k{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem;font-weight:600}
.stat .k svg{width:15px;height:15px;opacity:.7}
.stat .v{font-family:var(--mono);font-size:1.9rem;font-weight:600;letter-spacing:-.04em;margin-top:6px}
.stat .v small{font-size:.9rem;color:var(--faint)}
.miniStats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:820px){.miniStats{grid-template-columns:1fr 1fr}}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:30px 0 15px}
.sec-h h3{font-size:1.12rem;font-weight:700;letter-spacing:-.2px}
.sec-h a{font-size:.84rem;color:var(--muted);font-weight:600;cursor:pointer}
.sec-h a:hover{color:var(--accent2)}

/* episode cards (new) */
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.egrid .ep{border-radius:var(--r2);overflow:hidden;border:1px solid var(--line1);background:var(--surface);transition:.18s;cursor:pointer;box-shadow:var(--shadow);display:block}
.egrid .ep:hover{transform:translateY(-3px);border-color:var(--line2)}
.egrid .ep .fr{aspect-ratio:9/16;position:relative;overflow:hidden;background:var(--f,linear-gradient(160deg,#1b2135,#0e1220))}
.egrid .ep.wide .fr{aspect-ratio:16/9}
.egrid .ep .fr img{width:100%;height:100%;object-fit:cover}
.egrid .ep .fr::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,transparent 45%,#08080dcc),
  repeating-linear-gradient(90deg,#ffffff05 0 1px,transparent 1px 3px)}
.egrid .ep .fr .st{position:absolute;top:9px;left:9px;z-index:2}
.egrid .ep .fr .du{position:absolute;bottom:9px;right:9px;z-index:2;font-family:var(--mono);font-size:.7rem;
  padding:2px 7px;border-radius:6px;background:#08080dcc;color:#cdd3e6;border:1px solid var(--line2)}
.egrid .ep .fr .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:.2s;z-index:2}
.egrid .ep:hover .fr .play{opacity:1}
.egrid .ep .fr .play span{width:46px;height:46px;border-radius:50%;background:#08080dcc;border:1px solid var(--line2);
  display:grid;place-items:center;backdrop-filter:blur(4px)}
.egrid .ep .fr .gen{position:absolute;inset:0;display:grid;place-items:center;padding:0 16px;
  background:repeating-linear-gradient(115deg,#12141d,#12141d 12px,#141826 12px,#141826 24px)}
.egrid .ep .fr .gen .lbl{font-size:.74rem;color:var(--accent2);font-weight:600;margin-bottom:9px;text-align:center}
.egrid .ep .fr .gen .track{width:78%;height:6px;border-radius:99px;background:#0a0c13;overflow:hidden;border:1px solid var(--line1)}
.egrid .ep .fr .gen .track i{display:block;height:100%;background:var(--grad)}
.egrid .ep .fr .epdel,.egrid .ep .fr .eprerun,.egrid .ep .fr .epkit{position:absolute;top:8px;z-index:6;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;background:#08080dcc;border:1px solid var(--line2);color:var(--muted);opacity:0;transition:.14s}
.egrid .ep .fr .epdel{right:8px}
.egrid .ep .fr .eprerun{right:40px}
.egrid .ep .fr .epkit{right:72px}
.egrid .ep .fr .epkit svg{width:15px;height:15px}
.egrid .ep:hover .fr .epdel,.egrid .ep:hover .fr .eprerun,.egrid .ep:hover .fr .epkit,.egrid .ep .fr .epdel:focus-visible,.egrid .ep .fr .eprerun:focus-visible,.egrid .ep .fr .epkit:focus-visible{opacity:1}
.egrid .ep .fr .epdel:hover{color:var(--bad);border-color:var(--bad)}
.egrid .ep .fr .eprerun:hover,.egrid .ep .fr .epkit:hover{color:var(--accent2);border-color:var(--accent2)}
.egrid .ep .bd{padding:12px 13px}
.egrid .ep .bd .t{font-weight:600;font-size:.9rem;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.3em}
.egrid .ep .bd .m{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.72rem;color:var(--faint);font-family:var(--mono)}
.egrid .ep .bd .m .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}

/* continuity */
.nowcard{padding:22px;margin-bottom:26px;position:relative;overflow:hidden}
.nowcard::after{content:"";position:absolute;right:-60px;bottom:-70px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,#6aa8ff12,transparent 70%);pointer-events:none}
.nowcard .eyebrow{margin-bottom:13px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.nowcard .now{font-size:1.02rem;line-height:1.6;color:var(--muted);max-width:64ch}
.nowcard .now b{color:var(--text);font-weight:600}
.nowcard .threads{margin-top:17px;padding-top:17px;border-top:1px solid var(--line1);display:flex;flex-direction:column;gap:11px}
.nowcard .threads .th{display:flex;gap:11px;font-size:.9rem;line-height:1.5;color:var(--muted)}
.nowcard .threads .th b{color:var(--text);font-weight:600}
.nowcard .threads .th .od{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none;margin-top:6px;box-shadow:0 0 8px #f0a83caa}
.tl{position:relative;margin-top:4px}
.tl::before{content:"";position:absolute;left:15px;top:9px;bottom:16px;width:2px;background:linear-gradient(180deg,var(--accent2),var(--line2) 20%,var(--line1))}
.tnode{position:relative;padding:0 0 24px 46px}
.tnode:last-child{padding-bottom:2px}
.tnode::before{content:"";position:absolute;left:9px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--line2);z-index:1}
.tnode.hot::before{border-color:var(--accent);background:var(--ground);box-shadow:0 0 0 4px #ff3b3b22}
.tnode .th{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.tnode .tep{font-family:var(--mono);font-size:.71rem;color:var(--faint);font-weight:500}
.tnode .tt{font-weight:700;font-size:1rem;letter-spacing:-.2px}
.tnode .td{font-family:var(--mono);font-size:.68rem;color:var(--faint);margin-left:auto}
.tnode .ttags{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.ctag{font-size:.82rem;padding:6px 11px 6px 9px;border-radius:8px;border:1px solid;display:inline-flex;gap:8px;align-items:baseline;line-height:1.4;max-width:100%}
.ctag .k{font-size:.58rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.92;flex:none;transform:translateY(-1px)}
.ctag.canon{color:var(--accent2);border-color:#ff8a3d30;background:#ff8a3d0d}
.ctag.thread{color:var(--warn);border-color:#f0a83c30;background:#f0a83c0d}
.ctag.char{color:var(--violet);border-color:#9d8cff2e;background:#9d8cff0d}
.ctag.world{color:var(--ok);border-color:#3ecf8e2e;background:#3ecf8e0d}
.ctag.pillar{color:var(--info);border-color:#6aa8ff2e;background:#6aa8ff0d}

/* continuity: the channel's pillars and how many videos each has carried */
.pillars{padding:6px 22px}
.pillars .prow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line1)}
.pillars .prow:first-child{border-top:0}
.pillars .prow.stale .pname{color:var(--text)}
.pillars .pname{font-weight:700;font-size:1rem;letter-spacing:-.2px;flex:1 1 180px;min-width:0}
.pillars .pmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.86rem;color:var(--muted)}
.pillars .plast a{color:var(--text);font-weight:600}
.pillars .plast a:hover{color:var(--accent2)}
.pillars .pdate{font-family:var(--mono);font-size:.68rem;color:var(--faint);margin-left:4px}

/* getting-started cards (overview empty state) */
.gs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:640px){.gs{grid-template-columns:1fr}}
.startc{padding:20px;border-radius:var(--r2);border:1px solid var(--line1);background:var(--glass);transition:.16s;cursor:pointer;display:block}
.startc:hover{border-color:var(--line2);transform:translateY(-2px)}
.startc .no{width:30px;height:30px;border-radius:8px;background:var(--surface2);border:1px solid var(--line2);
  display:grid;place-items:center;font-family:var(--mono);font-weight:600;color:var(--accent2);margin-bottom:12px}
.startc h4{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:8px}
.startc p{color:var(--muted);font-size:.85rem;margin-top:6px}

/* mobile bottom bar */
.mbar{display:none}
@media(max-width:720px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:-100%;top:0;transition:.2s;z-index:60;width:270px;max-width:88vw}
  .side.open{left:0}
  .main>.wrap{padding:22px 18px 96px}
  .mobscrim{position:fixed;inset:0;background:#05060acc;z-index:55;opacity:0;visibility:hidden;transition:.2s}
  .mobscrim.open{opacity:1;visibility:visible}
  .mbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;justify-content:space-around;
    padding:10px 8px calc(10px + env(safe-area-inset-bottom));background:#0a0c13f2;border-top:1px solid var(--line1);backdrop-filter:blur(12px)}
  .mbar a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--faint);font-size:.66rem;font-weight:600}
  .mbar a svg{width:21px;height:21px}
  .mbar a.on{color:var(--accent2)}
  .hero{grid-template-columns:1fr}
  .phead h1{font-size:1.4rem}
}

/* ── Settings modal: grouped-cards redesign ──────────────────────────────────
   Sections (Format & length, Voice & sound, Cast & look, Automation, Continuity,
   Danger zone), each a labelled card with a divided control strip; the wired
   .apopt groups keep their handlers and become compact segmented controls. */
#setModal .modal{overflow-x:hidden}
#setModal .setgrid{display:flex;flex-direction:column;gap:16px;margin-top:20px}
#setModal .mgroup .gh{display:flex;align-items:center;gap:10px;margin-bottom:2px}
#setModal .mgroup .gh svg{width:17px;height:17px;color:var(--accent2);flex:none}
#setModal .mgroup .gh h4{font-size:1rem;font-weight:700;letter-spacing:-.2px}
#setModal .mgroup .gsub{color:var(--faint);font-size:.8rem;margin:0 0 12px 27px;line-height:1.4}
#setModal .strip{border:1px solid var(--line1);border-radius:12px;background:linear-gradient(180deg,#0c0e15,#0a0c12);overflow:hidden}
#setModal .ctrl{padding:15px 17px;border-bottom:1px solid var(--line1)}
#setModal .ctrl:last-child{border-bottom:none}
#setModal .ctrl .cl b{display:block;font-weight:600;font-size:.9rem}
#setModal .ctrl .cl span{font-size:.78rem;color:var(--faint);display:block;margin-top:3px;line-height:1.4}
#setModal .ctrl .cl span.warn{color:var(--warn)}
#setModal .ctrl.wide{display:flex;align-items:center;justify-content:space-between;gap:16px}
#setModal .ctrl.wide .cl{min-width:0}
#setModal .qlabel{font-size:.72rem;color:var(--faint);margin:13px 0 6px;font-weight:600}
#setModal .cnote{font-size:.75rem;color:var(--faint);margin-top:8px;line-height:1.4}
/* segmented look for the wired .apopt groups inside a strip */
#setModal .apopts{margin-top:11px;background:#0a0c13;border:1px solid var(--line1);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
#setModal .ctrl.wide .apopts,#setModal .apopts.bare{margin:0;background:none;border:none;padding:0;flex:0 0 auto}
#setModal .apopt{flex:1 1 auto;min-width:64px;border:1px solid transparent;background:transparent;padding:8px 10px;border-radius:8px;font-size:.82rem;color:var(--muted);transition:.14s}
#setModal .apopt:hover:not(:disabled):not(.on){background:#ffffff09;color:var(--text);border-color:transparent}
#setModal .apopt.on{background:var(--surface2);color:var(--text);box-shadow:0 1px 0 #ffffff12 inset,0 2px 6px #0008}
#setModal #narHear{flex:0 0 auto;min-width:0;background:var(--surface2);border:1px solid var(--line2);color:var(--accent2)}
#setModal #narVoice{background:#0a0c13;border:1px solid var(--line2);border-radius:9px;color:var(--text);padding:9px 11px;font-size:.84rem}
#setModal .danger .strip{border-color:#3a2126;background:linear-gradient(180deg,#160f11,#0e0a0c)}
#setModal .danger .gh svg{color:var(--bad)}
#setModal .dbtn{border:1px solid #5a2a2e;color:var(--bad);background:#1a0f11;padding:9px 15px;border-radius:9px;font-weight:600;font-size:.85rem;white-space:nowrap}
#setModal .dbtn:hover{background:#231315;border-color:var(--bad)}

/* mobile top bar (hamburger opens the off-canvas sidebar) */
.mtop{display:none}
@media(max-width:720px){
  .mtop{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:45;
    padding:11px 15px;background:#0a0c13f2;border-bottom:1px solid var(--line1);backdrop-filter:blur(12px)}
  .mtop .burger{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);display:grid;place-items:center;
    color:var(--text);background:var(--surface2);flex:none}
  .mtop .burger svg{width:19px;height:19px}
  .mtop .mtname{font-weight:700;font-size:1rem;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .main>.wrap{padding-top:18px}
}

/* Advanced creative direction — collapsible section with textareas */
#setModal details.adv{border:1px solid var(--line1);border-radius:12px;background:linear-gradient(180deg,#0c0e15,#0a0c12);overflow:hidden}
#setModal details.adv>summary{display:flex;align-items:center;gap:10px;padding:15px 17px;cursor:pointer;list-style:none;margin:0}
#setModal details.adv>summary::-webkit-details-marker{display:none}
#setModal details.adv>summary::marker{content:""}
#setModal details.adv>summary svg:first-child{width:17px;height:17px;color:var(--accent2);flex:none}
#setModal details.adv>summary h4{font-size:1rem;font-weight:700;letter-spacing:-.2px}
#setModal details.adv>summary .chev{margin-left:auto;width:16px;height:16px;color:var(--faint);transition:transform .18s}
#setModal details.adv[open]>summary .chev{transform:rotate(180deg)}
#setModal details.adv .gsub{margin:0 17px 6px;padding-top:2px;line-height:1.45}
#setModal details.adv .strip{margin:6px 14px;background:none;border:none;border-radius:0}
#setModal .ctrl.cd{display:block;padding:11px 3px;border-bottom:1px solid var(--line1)}
#setModal .ctrl.cd:last-child{border-bottom:none}
#setModal .ctrl.cd .cl{margin-bottom:9px}
#setModal .cdfield{width:100%;background:#0a0c13;border:1px solid var(--line2);border-radius:9px;color:var(--text);
  padding:10px 12px;font-family:var(--sans);font-size:.84rem;line-height:1.5;resize:vertical;min-height:50px}
#setModal .cdfield:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #ff3b3b1f}
#setModal .cdfield:disabled{opacity:.6}
#setModal .cdfield::placeholder{color:var(--faint)}
#setModal .cdsaved{margin:2px 17px 14px;color:var(--ok);opacity:0;transition:opacity .2s;font-weight:600}
#setModal .cdsaved.show{opacity:1}