/* ============================================================================================================
   AutomateMotion redesign (branch `redesign`, Oct 2026) — tokens, shell, shared components, screen layouts.
   Loaded AFTER style.css. Everything the old stylesheet draws inherits the new tokens through the legacy variable
   names; the screens are re-laid-out here. Source of truth: design-reference/*.dc.html (docs/redesign/design-spec.md).
   Decisions (docs/redesign/design-spec.md §4): one hairline per job (--border-hair #1C1C22, --border #1F1F25,
   --border-strong #26262D), one card (#101014) + one raised (#15151A) + one inset (#0B0B0E), badges: Ready green,
   Working violet, Uploaded neutral, Needs you ORANGE, Error RED, Paused neutral; toggle ON = violet (#6B5BF0) except
   the Agents running switch (green). Transitions are additive and short (120–160 ms).
   ============================================================================================================ */

/* ---------- 1. tokens ---------- */
:root {
  --rd-font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rd-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The logo intro plays on every page load, so its whole job is to be over before anyone notices waiting.
     One number drives the entire choreography (section 24) and the app's arrival underneath it. */
  --rd-intro-dur: 1.15s;

  /* Aliases. Several screens were written against these names, which never existed — every rule that used
     one silently lost its background, its hover or its border. They are the same surfaces, by the other name. */
  --rd-bg: #09090B;          --rd-surface: #101014;      --rd-surface-2: #15151A;   --rd-surface-3: #17171C;

  --rd-page: #09090B;        --rd-sidebar: #0C0C0F;      --rd-card: #101014;        --rd-card-alt: #0F0F13;
  --rd-raised: #15151A;      --rd-raised-2: #17171C;     --rd-inset: #0B0B0E;       --rd-chip: #121216;
  --rd-sheet: #0D0D10;       --rd-track: #1A1A20;        --rd-thumb: #1A1A21;       --rd-avatar: #26262E;
  --rd-hair: #16161B;        --rd-hair-2: #1C1C22;       --rd-border: #1F1F25;      --rd-border-2: #222228;
  --rd-border-3: #26262D;    --rd-dash: #33333B;

  --rd-text: #EDEDF0;        --rd-text-2: #C9C9D0;       --rd-muted: #A1A1AA;       --rd-subtle: #8B8B95;
  --rd-faint: #6E6E78;       --rd-ghost: #55555F;        --rd-on-light: #0B0B10;

  --rd-accent: #8B7CFF;      --rd-primary: #6B5BF0;      --rd-primary-hover: #5F50E0; --rd-link: #B4AAFF;
  /* the two lavenders the accent word is painted with (design-reference accent.html: --lav1 / --lav2) */
  --rd-accent-1: #D6D0FF;    --rd-accent-2: #9B8CFF;
  --rd-link-hover: #D6D0FF;  --rd-soft: #C5BDFF;
  --rd-accent-bg: #1E1A3A;   --rd-accent-bg-2: #15132A;  --rd-accent-bg-3: #17142B; --rd-accent-bg-4: #241F48;
  --rd-accent-border: #3A3460; --rd-accent-border-2: #4A4380;

  --rd-ok: #3DDC97;          --rd-ok-text: #5BE3A8;      --rd-ok-bg: #0F2A1F;       --rd-ok-bg-2: #0F2219;
  --rd-ok-border: #1B3328;   --rd-ok-soft: #8FD9B6;      --rd-ok-toggle: #2FB37A;
  --rd-warn: #FF8A4C;        --rd-warn-text: #FFAE80;    --rd-warn-bg: #33190F;     --rd-warn-bg-2: #1E130E;
  --rd-err: #FF6B6B;         --rd-err-text: #FF8A8A;     --rd-err-bg: #2A1214;      --rd-err-border: #5A2E25;
  --rd-err-border-2: #3A2420; --rd-danger-text: #FF9B80;

  /* the spreadsheet's status colours and its grid; one colour per state, so the colour IS the information */
  --rd-violet: #8B7CFF;      --rd-violet-bg: #1C1830;    --rd-violet-border: #332C58;
  --rd-amber: #E8B341;       --rd-amber-bg: #2A2110;     --rd-amber-border: #4A3B1A;
  --rd-grid: #191920;        --rd-grid-2: #2C2C36;

  --rd-r-ctl: 10px; --rd-r-ctl-lg: 12px; --rd-r-card: 16px; --rd-r-card-lg: 20px; --rd-r-pill: 999px;
  --rd-ease: cubic-bezier(.2, .7, .3, 1);
  --rd-content: 1120px;

  /* legacy names -> new tokens (everything built on them inherits the look) */
  --bg-app: var(--rd-page); --bg-sidebar: var(--rd-sidebar); --surface: var(--rd-card); --surface-raise: var(--rd-raised);
  --surface-flat: var(--rd-raised-2); --input-bg: var(--rd-raised);
  --border-hair: var(--rd-border); --border: var(--rd-border-3);
  --text-primary: var(--rd-text); --text-secondary: var(--rd-muted); --text-muted: var(--rd-subtle); --text-label: var(--rd-faint);
  --accent: var(--rd-primary); --accent-hover: var(--rd-primary-hover); --accent-press: #4A3DC7;
  --accent-subtle: var(--rd-accent-bg); --accent-text: var(--rd-soft);
  --status-live: var(--rd-ok);
  --font-head: var(--rd-font); --font-body: var(--rd-font); --font-mono: var(--rd-mono);
  --shadow-card: none; --shadow-drop: 0 24px 60px rgba(0, 0, 0, .5); --ring: 0 0 0 2px var(--rd-accent);
  --r-input: var(--rd-r-ctl-lg); --r-card: var(--rd-r-card); --r-chip: 8px;
  --bg: var(--rd-page); --bg-2: var(--rd-card); --fg: var(--rd-text); --mut: var(--rd-muted); --dim: var(--rd-subtle);
  --purple: var(--rd-primary); --purple-2: var(--rd-primary-hover); --lav: var(--rd-soft); --cyan: var(--rd-primary);
  --glass: var(--rd-card); --glass-2: var(--rd-card); --line: var(--rd-border); --line-2: var(--rd-border-3);
  --ok: var(--rd-ok); --err: var(--rd-err); --r: var(--rd-r-card); --r-sm: var(--rd-r-ctl);
  --grid: var(--rd-hair); --grid-strong: var(--rd-border); --sheet-bg: var(--rd-sheet); --sheet-head: var(--rd-raised); --sheet-rn: var(--rd-raised);
}

html, body { background: var(--rd-page); }
body { color: var(--rd-text); font: 400 14px/1.5 var(--rd-font); letter-spacing: 0; }
body::after, #space, .glow { display: none !important; }
.pages { background-image: none !important; }
a { color: var(--rd-link); }
a:hover { color: var(--rd-link-hover); }
button, input, select, textarea { font-family: var(--rd-font); }
::placeholder { color: var(--rd-faint); }
:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; }
.mono, .rd-mono { font-family: var(--rd-mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* headings: the old gradient-text h1s become plain */
h1, h2, h3, .page-head h1, .hero, .big-card b, .modal-card h2, .empty-state b { font-family: var(--rd-font); background: none !important; -webkit-background-clip: initial; background-clip: initial; color: var(--rd-text); }
.page-head { margin-bottom: 24px; gap: 16px; }
.page-head h1 { font-size: 36px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.page-head .soon, .page-head > div > .soon { color: var(--rd-subtle); font-size: 14px; }

/* ---------- 2. shell: sidebar + main ---------- */
.app { grid-template-columns: 232px minmax(0, 1fr); }
.app.collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.sidebar { background: var(--rd-sidebar); border-right: 1px solid #1C1C21; padding: 24px 14px; gap: 4px; box-shadow: none; }
.sb-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 20px; }
.sb-brand, .brand.logo-wordmark { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.sb-toggle { width: 26px; height: 26px; border: 1px solid var(--rd-border-3); border-radius: 8px; background: transparent; color: var(--rd-subtle); }
.sb-nav { gap: 4px; }
.sb-nav a { display: flex; align-items: center; gap: 12px; height: auto; padding: 10px 12px; border-radius: 10px; color: var(--rd-muted); font: 400 14px/1 var(--rd-font); background: none; box-shadow: none; transition: background .14s var(--rd-ease), color .14s var(--rd-ease); }
.sb-nav a .ic { width: 18px; height: 18px; color: currentColor; opacity: 1; }
.sb-nav a .ic svg { width: 18px; height: 18px; stroke-width: 1.7; }
/* the whole row is the target, not the words in it */
.sb-nav a { width: 100%; box-sizing: border-box; }
.sb-nav a:hover { background: rgba(255, 255, 255, .03); color: var(--rd-text); }
.sb-nav a.active { background: var(--rd-raised-2); color: #FFFFFF; font-weight: 500; box-shadow: none; }
.sb-nav a.active .ic { color: #FFFFFF; }
.sb-nav a.locked { opacity: .35; }
.sb-nav a .sb-count { margin-left: auto; font: 500 11px/1 var(--rd-mono); color: var(--rd-ok); }
.sb-nav a .sb-count:empty { display: none; }
.sb-nav a .sb-tag { margin-left: auto; padding: 2px 7px; border-radius: 6px; background: var(--rd-accent-bg); font: 600 10px/1.2 var(--rd-font); letter-spacing: .05em; color: var(--rd-soft); }
.sb-spacer { flex: 1 1 auto; }
.sb-admin { margin-bottom: 8px; }
/* queue indicator */
.sb-queue { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid #1C1C21; background: var(--rd-card); color: var(--rd-muted); text-decoration: none; }
.sb-queue .sbq-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rd-accent); flex: 0 0 auto; box-shadow: none; animation: none; }
.sb-queue .sbq-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-queue .lbl { font: 500 12px/1.3 var(--rd-font); color: var(--rd-text); }
.sb-queue #sbq-sub { font: 400 11px/1.3 var(--rd-mono); color: var(--rd-subtle); }
/* user card -> Settings */
.sb-bottom { margin-top: 0; }
.profile { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #1C1C21; border-radius: 12px; background: transparent; box-shadow: none; cursor: pointer; transition: border-color .14s, background .14s; }
.profile:hover { border-color: var(--rd-border-3); }
.profile.active { border-color: var(--rd-accent-border-2); background: var(--rd-accent-bg-2); }
.profile .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--rd-avatar); }
.profile .who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.profile .handle-line b, .profile .handle { font: 600 13px/1.2 var(--rd-font); color: var(--rd-link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile .handle--founder { background: none; -webkit-text-fill-color: initial; color: var(--rd-link); animation: none; }
.profile .crown { display: inline-block; color: #EAC85E; font-size: 13px; line-height: 1; } .profile .crown.hidden { display: none; }
.profile .role { font: 400 12px/1.2 var(--rd-font) !important; color: var(--rd-subtle) !important; }
.profile .gear { margin-left: auto; color: var(--rd-subtle); width: 16px; height: 16px; }
.profile .gear svg { width: 16px; height: 16px; }
.app.collapsed .sb-count, .app.collapsed .sb-tag, .app.collapsed .sbq-body { display: none; }

main.pages { max-width: none; margin: 0; padding: 32px 40px 56px; width: 100%; }
.rd-content { max-width: var(--rd-content); margin: 0 auto; }
@media (max-width: 900px) { main.pages { padding: 24px 16px 64px; } }

/* ---------- 3. components ---------- */
/* buttons (new ones use .rb-*; the old .btn classes are re-skinned below) */
.rb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .14s var(--rd-ease), border-color .14s var(--rd-ease), color .14s var(--rd-ease), transform .12s var(--rd-ease); }
.rb:active:not(:disabled) { transform: translateY(1px); }
.rb:disabled { opacity: .45; cursor: default; }
.rb-primary { padding: 11px 18px; border-radius: 12px; background: var(--rd-primary); color: #FFFFFF; font: 600 14px/1 var(--rd-font); }
.rb-primary:hover:not(:disabled) { background: var(--rd-primary-hover); }
.rb-primary.md { padding: 9px 16px; border-radius: 10px; font-size: 13px; }
.rb-primary.sm { padding: 8px 12px; border-radius: 9px; font-size: 12px; }
.rb-secondary { padding: 9px 14px; border-radius: 10px; background: var(--rd-raised-2); border-color: var(--rd-border-3); color: var(--rd-text); font: 500 13px/1 var(--rd-font); }
.rb-secondary:hover:not(:disabled) { border-color: #33333B; }
.rb-secondary.sm { padding: 7px 12px; border-radius: 9px; font-size: 12px; }
.rb-secondary.lg { padding: 10px 16px; border-radius: 12px; font-size: 14px; }
.rb-ghost { padding: 9px 14px; border-radius: 10px; background: transparent; border-color: var(--rd-border-3); color: var(--rd-muted); font: 500 13px/1 var(--rd-font); }
.rb-ghost:hover:not(:disabled) { color: var(--rd-text); border-color: #33333B; }
.rb-ghost.pill { padding: 7px 12px; border-radius: var(--rd-r-pill); font-size: 12px; }
.rb-dashed { padding: 11px; border-radius: 10px; background: transparent; border: 1px dashed var(--rd-dash); color: var(--rd-link); font: 500 13px/1 var(--rd-font); width: 100%; }
.rb-dashed:hover { color: var(--rd-link-hover); border-color: #44444E; }
.rb-light { padding: 9px 14px; border-radius: 10px; background: var(--rd-text); color: var(--rd-on-light); font: 600 13px/1 var(--rd-font); }
.rb-light.sm { padding: 7px 11px; border-radius: 9px; font-size: 12px; }
.rb-light:hover:not(:disabled) { background: #FFFFFF; }
.rb-danger { padding: 9px 14px; border-radius: 10px; background: transparent; border-color: var(--rd-err-border); color: var(--rd-danger-text); font: 500 13px/1 var(--rd-font); }
.rb-danger.soft { border-color: var(--rd-err-border-2); }
.rb-link { padding: 0; background: none; border: 0; color: var(--rd-muted); font: 400 13px/1 var(--rd-font); cursor: pointer; }
.rb-link:hover { color: var(--rd-text); }
.rb-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--rd-raised-2); border: 1px solid var(--rd-border-3); color: var(--rd-muted); font-size: 13px; padding: 0; }
.rb-icon.round { border-radius: 50%; background: var(--rd-thumb); border: 0; color: var(--rd-text-2); width: 28px; height: 28px; }
.rb-icon.ghost { background: transparent; border: 0; color: var(--rd-subtle); font-size: 16px; }
.rb-icon.lg { width: 36px; height: 36px; border-radius: 10px; }
.rb-icon.accent { background: var(--rd-primary); border: 0; color: #FFFFFF; }
.rb-icon svg { width: 14px; height: 14px; }

/* the OLD button classes keep their names but take the new look */
.btn { font-family: var(--rd-font); font-weight: 600; letter-spacing: 0; box-shadow: none !important; transition: background .14s, border-color .14s, color .14s, transform .12s; }
.btn.cyan { background: var(--rd-primary) !important; color: #FFFFFF !important; border: 0; border-radius: 12px; padding: 11px 18px; font-size: 14px; filter: none; }
.btn.cyan:hover:not(:disabled) { background: var(--rd-primary-hover) !important; transform: none; }
.btn.cyan.big { height: 42px; padding: 0 20px; font-size: 14px; }
.btn.cyan.sm, .btn.purple.sm, .btn.ghost.sm, .btn.danger.sm { padding: 8px 12px; font-size: 12px; border-radius: 9px; height: auto; }
.btn.purple { background: var(--rd-raised-2) !important; color: var(--rd-text) !important; border: 1px solid var(--rd-border-3); border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 500; }
.btn.purple.big { padding: 0 16px; height: 42px; font-size: 14px; }
.btn.ghost { background: transparent !important; color: var(--rd-muted) !important; border: 1px solid var(--rd-border-3); border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 500; }
.btn.ghost:hover:not(:disabled) { color: var(--rd-text) !important; border-color: #33333B; }
.btn.danger { background: transparent !important; color: var(--rd-danger-text) !important; border: 1px solid var(--rd-err-border); border-radius: 10px; font-weight: 500; }
.btn:disabled { opacity: .45; }
.copy { background: transparent; color: var(--rd-muted); border: 1px solid var(--rd-border-3); border-radius: 8px; font: 500 12px/1 var(--rd-font); }

/* inputs */
.field { gap: 8px; }
.field > span { font: 400 13px/1.3 var(--rd-font); color: var(--rd-muted); letter-spacing: 0; text-transform: none; }
input[type="text"], input[type="url"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input.input, select, textarea, .input, .key-input, .channel-select, .niche-select, .project-select, .status-select {
  background: var(--rd-raised) !important; border: 1px solid var(--rd-border-3) !important; border-radius: 12px !important; color: var(--rd-text) !important;
  font: 400 14px/1.5 var(--rd-font) !important; padding: 11px 14px !important; box-shadow: none !important; }
textarea { line-height: 1.6 !important; }
input:focus, select:focus, textarea:focus { border-color: var(--rd-accent-border) !important; outline: 0; box-shadow: none !important; }
input.sm, select.sm, .input.sm { padding: 8px 12px !important; border-radius: 10px !important; font-size: 13px !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--rd-accent); }

/* badges */
.rd-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; font: 600 11px/1.3 var(--rd-font); white-space: nowrap; }
.rd-badge.pill { padding: 5px 10px; border-radius: var(--rd-r-pill); font-size: 12px; }
.rd-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rd-badge.ready, .rd-badge.active, .rd-badge.done, .rd-badge.success { background: var(--rd-ok-bg); color: var(--rd-ok-text); }
.rd-badge.working, .rd-badge.progress, .rd-badge.in-progress, .rd-badge.running { background: var(--rd-accent-bg); color: var(--rd-soft); }
.rd-badge.uploaded, .rd-badge.neutral, .rd-badge.draft { background: #1C1C24; color: var(--rd-text-2); }
.rd-badge.paused { background: #1C1C24; color: var(--rd-muted); }
.rd-badge.needs, .rd-badge.awaiting, .rd-badge.warn { background: var(--rd-warn-bg); color: var(--rd-warn-text); }
.rd-badge.error, .rd-badge.failed { background: var(--rd-err-bg); color: var(--rd-err-text); }
.rd-badge.founder, .rd-badge.accent { background: var(--rd-accent-bg); color: var(--rd-soft); }
.rd-badge.founder-only { background: var(--rd-accent-bg-4); color: var(--rd-soft); letter-spacing: .05em; border-radius: var(--rd-r-pill); padding: 3px 9px; }
.rd-badge.hot { background: var(--rd-warn-bg); color: var(--rd-warn-text); }
.rd-badge.evergreen { background: var(--rd-accent-bg); color: var(--rd-soft); }
.rd-badge.mult { background: var(--rd-ok-bg); color: var(--rd-ok-text); font-size: 12px; padding: 2px 7px; }
.rd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rd-ghost); display: inline-block; flex: 0 0 auto; }
.rd-dot.on { background: var(--rd-ok); }
.rd-dot.warn { background: var(--rd-warn); }
.rd-dot.err { background: var(--rd-err); }

/* tabs (underline) */
.rd-tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: 1px solid var(--rd-hair-2); }
.rd-tabs button, .rd-tabs a { padding: 0 0 12px; margin-bottom: -1px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--rd-subtle); font: 400 14px/1.3 var(--rd-font); cursor: pointer; text-decoration: none; transition: color .12s, border-color .12s; }
.rd-tabs button:hover, .rd-tabs a:hover { color: var(--rd-text); }
.rd-tabs .on, .rd-tabs [aria-selected="true"] { color: var(--rd-text); font-weight: 600; border-bottom-color: var(--rd-accent); }
.rd-tabs .rd-tab-pill { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; align-self: center; margin-bottom: 8px; padding: 5px 11px; border: 1px solid var(--rd-accent-border); border-radius: var(--rd-r-pill); background: transparent; color: var(--rd-soft); font: 600 12px/1 var(--rd-font); }
.rd-tabs .rd-tab-pill.on { background: var(--rd-accent-bg); border-color: var(--rd-primary); }

/* segmented */
.rd-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #111115; border: 1px solid var(--rd-border-2); gap: 0; width: max-content; max-width: 100%; }
.rd-seg.pill { border-radius: var(--rd-r-pill); background: var(--rd-track); border-color: var(--rd-border-3); }
.rd-seg button { padding: 7px 14px; border-radius: 8px; border: 0; background: transparent; color: var(--rd-muted); font: 400 13px/1.3 var(--rd-font); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, color .12s; }
.rd-seg.pill button { border-radius: var(--rd-r-pill); }
.rd-seg button.on { background: var(--rd-text); color: var(--rd-on-light); font-weight: 600; }
.rd-seg button .n { font: 400 11px/1 var(--rd-mono); opacity: .6; }
.rd-seg.sm button { padding: 6px 11px; font-size: 12px; }
/* the old .seg takes the same look */
.seg { padding: 3px; border-radius: 10px; background: #111115; border: 1px solid var(--rd-border-2); }
.seg button { border-radius: 8px; color: var(--rd-muted); font: 400 13px/32px var(--rd-font); }
.seg button.on { background: var(--rd-text); color: var(--rd-on-light); font-weight: 600; }

/* toggle */
.rd-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 8px 4px; background: transparent; border: 0; color: var(--rd-muted); font: 400 13px/1.3 var(--rd-font); cursor: pointer; }
.rd-toggle .tr { width: 34px; height: 20px; border-radius: var(--rd-r-pill); padding: 2px; box-sizing: border-box; display: inline-flex; justify-content: flex-start; background: #2A2A33; transition: background .14s, justify-content 0s; flex: 0 0 auto; }
.rd-toggle .tr i { width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform .14s var(--rd-ease); }
.rd-toggle.on .tr { background: var(--rd-primary); }
.rd-toggle.on .tr i { transform: translateX(14px); }
.rd-toggle.on.live .tr { background: var(--rd-ok-toggle); }
.rd-toggle[aria-pressed="true"] .tr { background: var(--rd-primary); }
.rd-toggle[aria-pressed="true"] .tr i { transform: translateX(14px); }
.rd-toggle.live[aria-pressed="true"] .tr { background: var(--rd-ok-toggle); }
/* old checkbox switches (.sw-toggle) -> same visual */
.sw-toggle { font: 400 13px/1.3 var(--rd-font); color: var(--rd-muted); }
.sw-toggle input { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 999px; background: #2A2A33; position: relative; cursor: pointer; border: 0; margin: 0; flex: 0 0 auto; transition: background .14s; }
.sw-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform .14s var(--rd-ease); }
.sw-toggle input:checked { background: var(--rd-primary); }
.sw-toggle input:checked::after { transform: translateX(14px); }

/* cards */
.rd-card { padding: 18px; border-radius: 18px; background: var(--rd-card); border: 1px solid var(--rd-border); box-shadow: none; }
.rd-card.lg { padding: 20px; border-radius: 20px; }
.rd-card.alt { background: var(--rd-card-alt); }
.rd-card.raised { background: #111115; border-color: var(--rd-border-3); }
.rd-card.selected { background: var(--rd-accent-bg-2); border-color: var(--rd-accent-border-2); }
.rd-card.inset { background: var(--rd-inset); }
.rd-list { border-radius: 20px; background: var(--rd-card); border: 1px solid var(--rd-border); overflow: hidden; }
.rd-list > * + * { border-top: 1px solid var(--rd-hair); }
.rd-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.rd-row .grow { flex: 1 1 auto; min-width: 0; }
.rd-row .t { font: 500 15px/1.3 var(--rd-font); color: var(--rd-text); }
.rd-row .s { font: 400 13px/1.4 var(--rd-font); color: var(--rd-subtle); }
.rd-eyebrow { font: 600 12px/1.3 var(--rd-font); letter-spacing: .06em; text-transform: uppercase; color: var(--rd-subtle); }
.rd-h2 { margin: 0; font: 600 18px/1.3 var(--rd-font); letter-spacing: -.01em; color: var(--rd-text); }
.rd-h3 { margin: 0; font: 600 16px/1.3 var(--rd-font); color: var(--rd-text); }
.rd-meta { font: 400 13px/1.4 var(--rd-font); color: var(--rd-subtle); }
.rd-meta.sm { font-size: 12px; }
.rd-stat { padding: 14px; border-radius: 14px; background: var(--rd-raised-2); display: flex; flex-direction: column; gap: 6px; }
.rd-stat .l { font: 400 12px/1.3 var(--rd-font); color: var(--rd-subtle); }
.rd-stat .v { font: 500 22px/1.2 var(--rd-mono); color: var(--rd-text); letter-spacing: -.01em; }
.rd-stat.money { background: var(--rd-ok-bg-2); }
.rd-stat.money .l { color: #7FBFA0; }
.rd-stat.money .v { color: var(--rd-ok); }
.rd-stat.sm { padding: 12px; border-radius: 12px; background: var(--rd-raised); gap: 4px; }
.rd-stat.sm .l { font-size: 11px; } .rd-stat.sm .v { font-size: 15px; }
.rd-meter { height: 6px; border-radius: 3px; background: var(--rd-thumb); overflow: hidden; }
.rd-meter i { display: block; height: 100%; border-radius: 3px; background: var(--rd-accent); min-width: 1%; }
.rd-meter i.ok { background: var(--rd-ok); } .rd-meter i.warn { background: var(--rd-warn); } .rd-meter i.other { background: #3A3A44; }
.rd-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.rd-steps i { display: block; height: 4px; border-radius: 2px; background: #24242B; }
.rd-steps i.cur { background: var(--rd-accent-border-2); } .rd-steps i.done { background: var(--rd-accent); } .rd-steps i.err { background: var(--rd-err); }
.rd-empty { padding: 110px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.rd-empty .t { font: 400 16px/1.3 var(--rd-font); color: var(--rd-text); }
.rd-empty .s { font: 400 13px/1.5 var(--rd-font); color: var(--rd-subtle); max-width: 46ch; }
.empty-state { background: var(--rd-card); border: 1px solid var(--rd-border); box-shadow: none; border-radius: 20px; color: var(--rd-subtle); }
.empty-state b { color: var(--rd-text); font-size: 16px; font-weight: 500; }
/* toast */
.rd-toast { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--rd-r-pill); background: var(--rd-ok-bg-2); border: 1px solid var(--rd-ok-border); color: var(--rd-ok-soft); font: 400 12px/1.3 var(--rd-font); }
.rd-toast.err { background: var(--rd-err-bg); border-color: var(--rd-err-border-2); color: var(--rd-err-text); }
.rd-toast.info { background: var(--rd-raised-2); border-color: var(--rd-border-3); color: var(--rd-text-2); }
#ag-toast { background: var(--rd-raised-2); border: 1px solid var(--rd-border-3); color: var(--rd-text); border-radius: 12px; box-shadow: var(--shadow-drop); font: 400 13px/1.4 var(--rd-font); }
/* error line + Details */
.rd-err { display: flex; flex-direction: column; gap: 6px; }
.rd-err .line { display: flex; align-items: center; gap: 8px; color: var(--rd-err-text); font: 400 13px/1.4 var(--rd-font); }
.rd-err .line::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rd-err); flex: 0 0 auto; }
.rd-err details summary { cursor: pointer; color: var(--rd-subtle); font-size: 12px; list-style: none; }
.rd-err details summary::after { content: " ›"; }
.rd-err details[open] summary::after { content: " ⌄"; }
.rd-err pre { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--rd-inset); border: 1px solid var(--rd-border); color: var(--rd-muted); font: 400 11.5px/1.5 var(--rd-mono); white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
/* chips */
.rd-chip { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--rd-r-pill); border: 1px solid var(--rd-border-2); background: transparent; color: var(--rd-muted); font: 400 13px/1.2 var(--rd-font); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.rd-chip:hover { color: var(--rd-text); }
.rd-chip.on { border-color: var(--rd-accent-border-2); background: var(--rd-accent-bg-3); color: var(--rd-text); }
.rd-chip .n { font: 400 11px/1 var(--rd-mono); opacity: .7; }
.rd-chip.av { padding: 5px 14px 5px 5px; background: var(--rd-card); }
.rd-chip.solid { background: var(--rd-track); border-color: var(--rd-border-3); color: var(--rd-text); }
.rd-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--rd-avatar); color: #FFFFFF; font-weight: 600; flex: 0 0 auto; overflow: hidden; }
.rd-av img { width: 100%; height: 100%; object-fit: cover; }
.rd-av.s18 { width: 18px; height: 18px; font-size: 7px; } .rd-av.s24 { width: 24px; height: 24px; font-size: 9px; }
.rd-av.s32 { width: 32px; height: 32px; font-size: 12px; } .rd-av.s40 { width: 40px; height: 40px; font-size: 14px; }
.rd-av.s44 { width: 44px; height: 44px; font-size: 16px; } .rd-av.s56 { width: 56px; height: 56px; font-size: 20px; }
/* overlay panel */
.rd-overlay { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 560px; max-width: 100%; box-sizing: border-box; padding: 18px; border-radius: 20px; background: #111115; border: 1px solid var(--rd-border-3); box-shadow: var(--shadow-drop); display: flex; flex-direction: column; gap: 14px; }
/* tables */
.rd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rd-table th { padding: 14px 16px; text-align: left; font: 500 12px/1.3 var(--rd-font); color: var(--rd-subtle); }
.rd-table td { padding: 12px 16px; border-top: 1px solid var(--rd-track); }
.rd-table .mono { font-family: var(--rd-mono); color: var(--rd-text-2); }
.rd-grid-head { font: 600 11px/1.3 var(--rd-font); letter-spacing: .05em; text-transform: uppercase; color: var(--rd-ghost); }
/* modal re-skin */
.modal-card { background: var(--rd-card); border: 1px solid var(--rd-border-3); border-radius: 20px; box-shadow: var(--shadow-drop); }
.modal { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }
.panel, .pj-block, .out, .term, .tcard, .big-card, .channel-card, .project-row, .stages li, .vo-box, .tm-row, .drop, .cs-sec, .admin-card, .ag-card { background: var(--rd-card); border: 1px solid var(--rd-border); box-shadow: none; backdrop-filter: none; }
.cs-sec > summary, .panel-head, .section-head h2 { color: var(--rd-text); }
.hint-line, .soon, .ctx-note { color: var(--rd-subtle); }
.pill, .stpill, .cbtn, .chips i { font-family: var(--rd-font); }
.stpill { border-radius: 6px; font: 600 11px/1.3 var(--rd-font); letter-spacing: 0; text-transform: none; padding: 3px 8px; }
.stpill.st-draft { background: #1C1C24; color: var(--rd-text-2); }
.stpill.st-in-progress { background: var(--rd-accent-bg); color: var(--rd-soft); }
.stpill.st-done { background: var(--rd-ok-bg); color: var(--rd-ok-text); }
.stpill.st-uploaded { background: #1C1C24; color: var(--rd-text-2); }
.stpill.st-error { background: var(--rd-err-bg); color: var(--rd-err-text); }
.cbtn { background: var(--rd-raised-2); border: 1px solid var(--rd-border-3); color: var(--rd-text); border-radius: 8px; font-weight: 500; }

/* ---------- 4. preview mode banner ---------- */
#rd-preview-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 100; display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px 7px 10px; border-radius: var(--rd-r-pill); background: var(--rd-raised-2); border: 1px solid var(--rd-border-3); color: var(--rd-muted); font: 500 12px/1 var(--rd-font); box-shadow: var(--shadow-drop); }
#rd-preview-bar b { color: var(--rd-soft); font-weight: 600; }
#rd-preview-bar select { padding: 4px 8px !important; border-radius: 8px !important; font-size: 12px !important; background: var(--rd-inset) !important; }
#rd-preview-bar .rd-dot { background: var(--rd-accent); }

#rd-home-stats-slot .hs-panel .hs-head { order: 0; } #rd-home-stats-slot .hs-panel #hs-totals { order: 1; } #rd-home-stats-slot .hs-panel .hs-cols { order: 2; } #rd-home-stats-slot .hs-panel #hs-list { order: 3; } #rd-home-stats-slot .hs-panel .hs-foot { order: 4; }
/* ---------- 5. HOME ---------- */
body[data-screen="home"] .page[data-page="home"] > .home-hero,
body[data-screen="home"] .page[data-page="home"] > .home-grid,
body[data-screen="home"] .page[data-page="home"] > .tools,
body[data-screen="home"] .page[data-page="home"] > #home-queue,
body[data-screen="home"] .page[data-page="home"] > #home-recent { display: none !important; }
body.member-only #rd-home { display: none; }
.rd-home { display: flex; flex-direction: column; gap: 48px; }
.rd-home-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; min-height: 40px; }
#rd-home-stats-slot .hs-pill { height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--rd-chip); border: 1px solid var(--rd-border-2); box-shadow: none; font: 500 13px/1 var(--rd-mono); gap: 18px; }
#rd-home-stats-slot .hs-item { padding: 0; gap: 7px; height: auto; box-shadow: none; }
#rd-home-stats-slot .hs-item svg { color: var(--rd-subtle); }
#rd-home-stats-slot .hs-item[data-k="revenue"] { color: var(--rd-ok); }
#rd-home-stats-slot .hs-item[data-k="revenue"] svg { color: var(--rd-ok); }
#rd-home-stats-slot .hs-when { box-shadow: none; margin: 0; padding: 3px 9px; border-radius: 999px; background: #1E1E25; color: var(--rd-muted); font: 400 12px/1 var(--rd-font); }
#rd-home-stats-slot .hs-caret { margin-left: 0; }
#rd-home-stats-slot .hs-panel { width: 560px; border-radius: 20px; background: #111115; border-color: var(--rd-border-3); padding: 18px; gap: 14px; display: flex; flex-direction: column; }
#rd-home-stats-slot .hs-panel.hidden { display: none; }
#rd-home-stats-slot .hs-seg { padding: 3px; border-radius: 999px; background: var(--rd-track); border: 1px solid var(--rd-border-3); }
#rd-home-stats-slot .hs-seg button { border-radius: 999px; padding: 0 14px; height: 28px; font: 400 13px/28px var(--rd-font); color: var(--rd-muted); }
#rd-home-stats-slot .hs-seg button.on { background: var(--rd-text); color: var(--rd-on-light); font-weight: 600; }
#rd-home-stats-slot .hs-range { color: var(--rd-subtle); font-size: 12px; }
#rd-home-stats-slot .hs-cols { font: 600 11px/1 var(--rd-font); letter-spacing: .04em; color: var(--rd-faint); padding: 0 8px; }
#rd-home-stats-slot .hs-total { background: var(--rd-raised-2); border-radius: 12px; }
#rd-home-stats-slot .hs-total .hs-name { color: var(--rd-text); }
#rd-home-stats-slot .hs-row { border-radius: 10px; font-size: 13px; }
#rd-home-stats-slot .hs-row > span:not(:first-child), #rd-home-stats-slot .hs-total > span:not(:first-child) { font-family: var(--rd-mono); color: var(--rd-text-2); }
#rd-home-stats-slot .hs-add { border: 1px dashed var(--rd-dash); color: var(--rd-link); background: transparent; font: 500 13px/1 var(--rd-font); border-radius: 10px; height: auto; padding: 11px; }
#rd-home-stats-slot .hs-foot { border-top: 0; padding-top: 0; margin-top: 0; }
.rd-composer-wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; padding-top: 8px; }
/* Half the size it was: the composer underneath is the thing you came to use, and a headline twice this
   big was the loudest object on the page. The name is the SAME size and weight as the words around it —
   only its colour differs. */
.rd-hero { margin: 0; text-align: center; font: 600 28px/1.25 var(--rd-font); letter-spacing: -.02em; color: var(--rd-text); }
.rd-hero-name { font: inherit; letter-spacing: inherit; }
.rd-composer { width: 100%; max-width: 820px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.rd-composer textarea { width: 100%; box-sizing: border-box; resize: none; min-height: 0 !important; height: 84px !important; background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--rd-text) !important; font: 400 18px/1.5 var(--rd-font) !important; }
/* ONE ALIGNED ROW. The channel picker, the mode switch, "+ Add link" and the main button used to be four
   different heights (34, 36, 30 and 38 px) and three different radii, which is what made the card look
   assembled rather than designed. They are all 40px and all pills now, on an 8px gap, with the main button
   pushed to the right. The helper line lives UNDER the switch it describes, small and muted, instead of
   sitting in the row and pushing everything along. */
.rd-compose-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.rd-compose-row .grow, .grow { flex: 1 1 auto; }
.rd-compose-row > .rd-chanpick > .rd-chip,
.rd-compose-row > .rb,
.rd-compose-row .rd-seg.pill { height: 40px; border-radius: var(--rd-r-pill); box-sizing: border-box; }
.rd-compose-row > .rd-chanpick > .rd-chip { padding: 0 16px; }
.rd-compose-row > .rb { padding: 0 18px; }
.rd-compose-row .rd-seg.pill { padding: 3px; align-items: center; }
.rd-compose-row .rd-seg.pill button { height: 32px; padding: 0 14px; }
.rd-modewrap { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rd-modewrap #rd-mode-hint { padding-left: 4px; color: var(--rd-subtle); font-size: 12px; line-height: 1.3; }
/* the three suggestions: present, not competing with the card above them */
.rd-chip.sm { padding: 6px 12px; font-size: 12px; }
.rd-chip.quiet { border-color: var(--rd-border-2); color: var(--rd-subtle); }
.rd-chip.quiet:hover { color: var(--rd-text); border-color: var(--rd-border-3); }
.rd-chanpick { position: relative; }
.rd-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 240px; padding: 6px; border-radius: 14px; background: #111115; border: 1px solid var(--rd-border-3); box-shadow: var(--shadow-drop); display: flex; flex-direction: column; gap: 2px; }
.rd-menu.hidden { display: none; }
.rd-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 9px; background: transparent; border: 0; color: var(--rd-text); font: 400 13px/1.3 var(--rd-font); cursor: pointer; text-decoration: none; }
.rd-menu-item:hover { background: var(--rd-raised-2); color: var(--rd-text); }
.rd-menu-item.on { background: var(--rd-accent-bg-3); }
.rd-menu-item:disabled { opacity: .45; cursor: default; }
.rd-menu-item .rd-meta { margin-left: auto; }
.rd-menu-note { padding: 10px; font: 400 12.5px/1.45 var(--rd-font); color: var(--rd-subtle); }
.rd-more { position: relative; }
.rd-more .rd-menu { left: auto; right: 0; min-width: 220px; }
.rd-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rd-section { display: flex; flex-direction: column; gap: 16px; }
.rd-section.hidden { display: none; }
.rd-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rd-section-head .rd-link { font-size: 13px; }
.rd-prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rd-prod-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 16px; }
.rd-prod-card.is-err { border-color: var(--rd-err-border-2); }
.rd-prod-meta { display: flex; align-items: center; gap: 8px; font: 400 12px/1.3 var(--rd-font); color: var(--rd-subtle); }
.rd-prod-meta .who { margin-left: auto; color: var(--rd-link); }
.rd-prod-title { font: 500 15px/1.35 var(--rd-font); color: var(--rd-text); }
.rd-prod-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 28px; }
.rd-ready-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; }
.rd-ready-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rd-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--rd-thumb); border: 1px solid var(--rd-border-2); overflow: hidden; }
.rd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-thumb .rd-dur { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: #0B0B0F; color: var(--rd-text); font: 400 11px/1.3 var(--rd-mono); }
.rd-thumb .rd-badge { position: absolute; left: 8px; top: 8px; }
.rd-ready-title { font: 500 14px/1.35 var(--rd-font); color: var(--rd-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rd-ready-title:hover { color: var(--rd-text); }
.rd-ready-row { display: flex; align-items: center; gap: 8px; }
@media (max-width: 1100px) { .rd-ready-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rd-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rd-hero { font-size: 22px; } .rd-ready-grid, .rd-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-home { gap: 32px; } #rd-home-stats-slot { width: 100%; } #rd-home-stats-slot .hs-pill { width: 100%; justify-content: space-between; } }
@media (max-width: 480px) { .rd-ready-grid, .rd-prod-grid { grid-template-columns: 1fr; } }

.page[data-page="home"]::before { display: none !important; }
#sb-name { display: none !important; }
.hs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hs-tiles .rd-stat .l small { display: block; font-size: 11px; color: var(--rd-faint); margin-top: 2px; }
.hs-tiles .rd-stat.money .l small { color: #7FBFA0; }
@media (max-width: 760px) { #rd-preview-bar span:not(.rd-dot) { display: none; } #rd-preview-bar { left: auto; right: 10px; transform: none; bottom: 10px; } }

/* ---------- 6. VIDEOS ---------- */
.rd-title { margin: 0; font: 600 32px/1.1 var(--rd-font); letter-spacing: -.02em; color: var(--rd-text); }
.rd-count { font: 400 13px/1 var(--rd-mono); color: var(--rd-subtle); }
.rd-videos-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.rd-videos-bar.hidden { display: none; }
.rd-videos-bar .lib-search { margin: 0; width: 240px; padding: 0 12px; height: 40px; border-radius: 10px; background: #111115; border: 1px solid var(--rd-border-2); display: flex; align-items: center; gap: 8px; }
.rd-videos-bar .lib-search svg { width: 15px; height: 15px; color: var(--rd-subtle); }
.rd-videos-bar .lib-search input { background: transparent !important; border: 0 !important; padding: 0 !important; height: 38px; font-size: 14px !important; flex: 1; min-width: 0; }
.rd-seg a { padding: 7px 14px; border-radius: 8px; color: var(--rd-muted); font: 400 13px/1.3 var(--rd-font); text-decoration: none; }
.rd-seg a.on { background: var(--rd-text); color: var(--rd-on-light); font-weight: 600; }
.rd-search { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--rd-raised); border: 1px solid var(--rd-border-2); color: var(--rd-subtle); }
.rd-search input { background: transparent !important; border: 0 !important; padding: 0 !important; height: 34px; width: 140px; font-size: 13px !important; color: var(--rd-text) !important; }
/* grid view = the library page */
body[data-screen="videos"] .page[data-page="library"] .lib-head { display: none; }
.lib-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.lib-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rd-border-2); background: transparent; color: var(--rd-muted); font: 400 13px/1.2 var(--rd-font); cursor: pointer; box-shadow: none; }
.lib-chip.on { border-color: var(--rd-accent-border-2); background: var(--rd-accent-bg-3); color: var(--rd-text); }
.lib-chip .n { font: 400 11px/1 var(--rd-mono); opacity: .7; margin-left: 2px; background: none; padding: 0; color: inherit; }
.lib-chip .av { width: 18px; height: 18px; border-radius: 50%; font: 600 8px/18px var(--rd-font); text-align: center; background: var(--rd-avatar); color: #fff; }
.lib-chip.noav .av { display: none; }
.lib-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; }
.lib-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #111115; border: 1px solid var(--rd-border-2); }
.lib-seg button { padding: 7px 14px !important; border-radius: 8px; border: 0; background: transparent; color: var(--rd-muted); font: 400 13px/1.3 var(--rd-font) !important; }
.lib-seg button.on { background: var(--rd-text); color: var(--rd-on-light); font-weight: 600; }
.lib-sort .soon { display: none; }
.lib-sort select { padding: 7px 12px !important; border-radius: 10px !important; font-size: 13px !important; background: #111115 !important; }
#lib-channel-head .lib-chan { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--rd-card); border: 1px solid var(--rd-border); margin-bottom: 16px; }
.lib-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lib-card { display: flex; flex-direction: column; gap: 10px; background: none; border: 0; padding: 0; box-shadow: none; text-decoration: none; color: var(--rd-text); }
.lib-card:hover { transform: none; background: none; border: 0; }
.lib-media { aspect-ratio: 16 / 9; border-radius: 12px; background: #17171D; border: 1px solid var(--rd-border-2); overflow: hidden; position: relative; }
.lib-media img, .lib-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 22px/1 var(--rd-font); color: var(--rd-ghost); background: #17171D; }
.lib-status { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 6px; font: 600 11px/1.3 var(--rd-font); text-transform: none; letter-spacing: 0; box-shadow: none; backdrop-filter: none; }
.lib-status.ready { background: var(--rd-ok-bg); color: var(--rd-ok-text); } .lib-status.uploaded { background: #1C1C24; color: var(--rd-text-2); }
.lib-status.progress { background: var(--rd-accent-bg); color: var(--rd-soft); } .lib-status.error { background: var(--rd-err-bg); color: var(--rd-err-text); } .lib-status.draft { background: #1C1C24; color: var(--rd-muted); }
.lib-play { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; }
.lib-play i { width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.lib-body { padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lib-title { font: 500 14px/1.35 var(--rd-font); color: var(--rd-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-meta, .lib-card .meta { display: flex; gap: 8px; font: 400 12px/1.3 var(--rd-font); color: var(--rd-subtle); }
.lib-meta .when, .lib-card .meta .when { margin-left: auto; }
.lib-empty .empty-state { padding: 90px 24px; }
@media (max-width: 1100px) { .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-videos-bar .lib-search { width: 100%; } }
/* spreadsheet view = the sheet page, re-templated to the design's columns */
body[data-screen="videos"] .page[data-page="sheet"] .page-head, body[data-screen="videos"] .page[data-page="sheet"] .sheet-swipe { display: none !important; }
.rd-sheet-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--rd-border); border-bottom: 1px solid var(--rd-track); border-radius: 18px 18px 0 0; background: var(--rd-sheet); flex: 0 0 auto; }
.rd-sheet-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-sheet-id b { font: 600 15px/1.2 var(--rd-font); color: var(--rd-text); }
[data-page="sheet"] .sheet-wrap { border-radius: 0 !important; border-top: 0 !important; background: var(--rd-sheet) !important; }
[data-page="sheet"] .sheet-wrap.hidden ~ .sheet-tabs { margin-top: 0; }
[data-page="sheet"] .sheet-tabs { border-radius: 0 0 18px 18px; background: var(--rd-card); border: 1px solid var(--rd-border); border-top: 1px solid var(--rd-border); padding: 8px 10px; gap: 4px; box-shadow: none; }
#sheet-emptystate:not(.hidden) { border: 1px solid var(--rd-border); border-top: 0; background: var(--rd-sheet); }
/* 9 working columns, then the imported analytics. The analytics tracks are narrower and fixed, so the numbers
   line up down the column and the title keeps the slack. The last track only exists when the API gives us CTR. */
.sheet-row { grid-template-columns: 56px minmax(340px, 1fr) 124px repeat(6, minmax(66px, 92px)) 96px repeat(4, 78px) !important; }
.sheet-wrap.with-ctr .sheet-row { grid-template-columns: 56px minmax(340px, 1fr) 124px repeat(6, minmax(66px, 92px)) 96px repeat(5, 78px) !important; }
/* The title shares its cell with a thumbnail and two row buttons. Without this it is the only flex item that
   can shrink, so once the analytics columns took the row's slack it collapsed to a single letter. */
.sheet-row .sc.title input { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
.col-ctr { display: none !important; }
.sheet-wrap.with-ctr .col-ctr { display: flex !important; }
.sheet-cols { display: none !important; }
.sheet-head { background: var(--rd-sheet) !important; border-bottom: 1px solid var(--rd-hair) !important; }
.sheet-head span { height: 40px !important; padding: 0 10px !important; font: 600 11px/1.3 var(--rd-font) !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: var(--rd-faint) !important; justify-content: center; }
.sheet-head span:nth-child(2) { justify-content: flex-start !important; padding-left: 18px !important; }
/* The analytics headers sit a shade quieter than the working columns: they are read, never clicked. */
.sheet-head .col-stat { color: var(--rd-dim, var(--rd-faint)) !important; }
.sheet-row > * { border-right: 0 !important; }
#sheet-body .sheet-row { border-bottom: 1px solid var(--rd-hair) !important; min-height: 60px; }
#sheet-body .sheet-row.rd-hidden { display: none !important; }
#sheet-body .sheet-row:hover { background: rgba(255, 255, 255, .02) !important; }
.sheet-row .rn { background: transparent !important; border-right: 0 !important; display: flex; align-items: center; gap: 8px; padding-left: 16px !important; justify-content: flex-start !important; color: var(--rd-faint) !important; font: 400 11px/1 var(--rd-mono) !important; }
.rd-rowcheck { width: 14px; height: 14px; margin: 0; accent-color: var(--rd-accent); }
.sc { height: 60px !important; font-family: var(--rd-font); }
.sc.title { gap: 14px; padding-left: 10px !important; }
.rd-rowthumb { position: relative; width: 80px; height: 45px; flex: 0 0 auto; border-radius: 8px; background: var(--rd-thumb); overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-end; padding: 4px; box-sizing: border-box; opacity: .9; }
.rd-rowthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-rowthumb i { position: relative; font: 400 10px/1.2 var(--rd-mono); font-style: normal; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .75); color: #fff; }
.sc.title input { background: transparent !important; border: 1px solid transparent !important; padding: 6px 8px !important; font: 500 14px/1.3 var(--rd-font) !important; border-radius: 8px !important; }
.sc.title input:hover, .sc.title input:focus { background: var(--rd-raised) !important; border-color: var(--rd-border-3) !important; box-shadow: none !important; }
/* status pill: dot + chevron, clickable */
.stpill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; font: 600 12px/1.2 var(--rd-font); }
.stpill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sc.act .stpill::after { content: ""; width: 10px; height: 10px; opacity: .6; background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEDF0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.stpill.st-in-progress, .stpill.st-draft { background: var(--rd-accent-bg); color: var(--rd-soft); }
.stpill.st-draft { background: #1C1C24; color: var(--rd-muted); }
.sc.act:hover { background-color: transparent !important; box-shadow: none !important; }
/* the six file cells become one grouped strip of icon buttons (same cells, same handlers) */
#sheet-body .sheet-row > span:nth-child(n+4):nth-child(-n+9) { padding: 0 !important; justify-content: center !important; background-color: var(--rd-chip); border-left: 1px solid var(--rd-border-2) !important; height: 34px !important; align-self: center; }
#sheet-body .sheet-row > span:nth-child(4) { border-left: 1px solid var(--rd-border-2) !important; border-radius: 10px 0 0 10px; }
#sheet-body .sheet-row > span:nth-child(9) { border-right: 1px solid var(--rd-border-2) !important; border-radius: 0 10px 10px 0; }
#sheet-body .sheet-row > span:nth-child(n+4):nth-child(-n+9) .cbtn, .sheet-row > span:nth-child(n+4):nth-child(-n+9) .cdot, .sheet-row > span:nth-child(n+4):nth-child(-n+9) .sthumb { font-size: 0 !important; color: transparent !important; width: 40px; height: 34px; border: 0 !important; background-color: transparent !important; border-radius: 0; padding: 0 !important; margin: 0; display: block; }
#sheet-body .sheet-row > span:nth-child(n+4):nth-child(-n+9) { background-repeat: no-repeat; background-position: center; background-size: 16px 16px; }
#sheet-body .sheet-row > span:nth-child(4) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4D4DA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v12H4zM10 9l5 3-5 3z'/%3E%3C/svg%3E"); }
#sheet-body .sheet-row > span:nth-child(5) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4D4DA' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 12h2M8 8v8M12 5v14M16 8v8M20 12h0'/%3E%3C/svg%3E"); }
#sheet-body .sheet-row > span:nth-child(6) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4D4DA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6zM9 10h6M9 14h6M9 18h4'/%3E%3C/svg%3E"); }
#sheet-body .sheet-row > span:nth-child(7) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4D4DA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4zM4 15l5-4 4 3 3-2 4 3'/%3E%3C/svg%3E"); }
#sheet-body .sheet-row > span:nth-child(8) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4D4DA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h8l8 8-8 8-8-8zM8 8h0'/%3E%3C/svg%3E"); }
#sheet-body .sheet-row > span:nth-child(9) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4D4DA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h10M4 17h7'/%3E%3C/svg%3E"); }
#sheet-body .sheet-row > span:nth-child(n+4):nth-child(-n+9):has(.cdot):not(.act), .sheet-row > span:nth-child(n+4):nth-child(-n+9).dim:not(.act), .sheet-row > span:nth-child(n+4):nth-child(-n+9).cell-locked { opacity: .22; }
#sheet-body .sheet-row > span:nth-child(n+4):nth-child(-n+9).act:hover { background-color: var(--rd-raised-2); }
#sheet-body .sheet-row > span:nth-child(7) .sthumb { opacity: 0; }
#sheet-body .sheet-row > span:nth-child(7):has(img.sthumb) { background-image: none; }
#sheet-body .sheet-row > span:nth-child(7):has(img.sthumb) .sthumb { opacity: 1; width: 40px; height: 34px; object-fit: cover; }
#sheet-body .sheet-row > span:nth-child(n+4):nth-child(-n+9).dim:not(.act) [title]::after { display: none; }
.sc.yt { justify-content: flex-start !important; padding-left: 12px !important; }
.rd-watch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: #1A1215; color: var(--rd-err-text); font: 500 12px/1.2 var(--rd-font); text-decoration: none; }
.rd-watch:hover { color: #fff; }
.rd-notyet { font: 400 12px/1 var(--rd-font); color: #4A4A54; }
/* bottom channel tabs (dot · name · count) */
.rd-tab-add { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; background: transparent; border: 0; color: var(--rd-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rd-tab-add:hover { background: var(--rd-raised-2); color: var(--rd-text); }
.st-tab { height: auto !important; padding: 8px 14px !important; border-radius: 10px !important; border: 1px solid transparent !important; gap: 8px; color: var(--rd-subtle) !important; font: 400 13px/1.2 var(--rd-font) !important; background: transparent !important; box-shadow: none !important; transform: none !important; cursor: grab; display: inline-flex; align-items: center; }
.st-tab .n { font: 400 11px/1 var(--rd-mono); opacity: .55; }
.st-tab .n:empty { display: none; }
.st-tab.active { background: #1A1730 !important; border-color: var(--rd-accent-border) !important; color: var(--rd-text) !important; font-weight: 600 !important; }
.st-tab.active::after { display: none !important; }
.st-track.sorting .st-tab.dragging { background: var(--rd-raised) !important; border-color: var(--rd-border-3) !important; box-shadow: var(--shadow-drop) !important; }
.st-arrow { display: none !important; }
.sheet-tabs.overflow .st-arrow { display: inline-flex !important; }
.rd-tab-hint { margin-left: auto; flex: 0 0 auto; padding-left: 12px; font: 400 12px/1 var(--rd-font); color: var(--rd-ghost); white-space: nowrap; }
@media (max-width: 900px) { .rd-tab-hint { display: none; }
  .sheet-row { grid-template-columns: 56px minmax(260px, 1fr) 130px repeat(6, 80px) 100px repeat(4, 78px) !important; }
  .sheet-wrap.with-ctr .sheet-row { grid-template-columns: 56px minmax(260px, 1fr) 130px repeat(6, 80px) 100px repeat(5, 78px) !important; } }

[data-page="sheet"] .sheet-head { top: 0 !important; }
[data-page="sheet"] .sheet-wrap { overflow-x: auto; }

/* ---------- 7. CHANNELS + CHANNEL SETTINGS ---------- */
body[data-screen="channels"] .page[data-page="channels"] > .page-head, body[data-screen="channels"] .page[data-page="channels"] > .hint-line { display: none !important; }
.rd-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.rd-page-head > div { display: flex; flex-direction: column; gap: 6px; }
.rd-title.lg { font-size: 36px; letter-spacing: -.03em; }
.rd-channels-body { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
#rd-ch-grid-slot { flex: 999 1 520px; min-width: 0; }
.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.channel-card { display: flex; flex-direction: column; gap: 18px; padding: 18px; border-radius: 16px; background: var(--rd-card) !important; border: 1px solid var(--rd-border) !important; box-shadow: none !important; transform: none !important; text-decoration: none; color: var(--rd-text); cursor: pointer; }
.channel-card.on { background: var(--rd-accent-bg-2) !important; border-color: var(--rd-accent-border-2) !important; }
.channel-card .ic, .channel-card img.ic { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 14px/1 var(--rd-font); background: var(--rd-avatar); color: #fff; object-fit: cover; margin: 0; }
.channel-card .ch-name { font: 600 15px/1.3 var(--rd-font); color: var(--rd-text); }
.channel-card .niche { font: 400 12px/1.3 var(--rd-font); color: var(--rd-subtle); }
.channel-card .key { display: none; }
.channel-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic name" "ic niche" "foot foot" "an an"; column-gap: 12px; row-gap: 2px; }
.channel-card .ic { grid-area: ic; } .channel-card .ch-name { grid-area: name; align-self: end; } .channel-card .niche { grid-area: niche; }
.rd-ch-foot { grid-area: foot; display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 400 12px/1.3 var(--rd-font); color: var(--rd-muted); }
.rd-ch-foot .n { margin-left: auto; color: var(--rd-subtle); font-family: var(--rd-mono); }
.rd-ch-detail { flex: 1 1 340px; max-width: 400px; box-sizing: border-box; padding: 24px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 24px; }
.rd-ch-id { display: flex; align-items: center; gap: 14px; }
.rd-ch-id .nm { font: 600 22px/1.2 var(--rd-font); letter-spacing: -.02em; }
.rd-ch-id .hd { font: 400 12px/1.3 var(--rd-mono); color: var(--rd-subtle); margin-top: 2px; }
.rd-ch-id > div { flex: 1 1 auto; min-width: 0; }
.rd-ch-actions { display: flex; gap: 8px; }
.rd-ch-actions .rb { flex: 1 1 0; padding: 11px; border-radius: 12px; font-size: 14px; }
.rd-ch-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rd-stat .v.ok { color: var(--rd-ok); }
.rd-ch-rows { display: flex; flex-direction: column; }
.rd-ch-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--rd-hair-2); font-size: 14px; }
.rd-ch-row:last-child { border-bottom: 1px solid var(--rd-hair-2); }
.rd-ch-row .k { color: var(--rd-subtle); width: 96px; flex: 0 0 auto; }
.rd-ch-row .v { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.rd-ch-row .a { font-size: 13px; color: var(--rd-link); text-decoration: none; }
.rd-ch-row .a:hover { color: var(--rd-link-hover); }
@media (max-width: 1100px) { .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-ch-detail { max-width: none; position: static; } }
@media (max-width: 600px) { .channels { grid-template-columns: 1fr; } }
/* channel settings */
body[data-screen="channel"] .page[data-page="channel"] > .page-head { display: none !important; }
.rd-ch-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.rd-crumb { display: flex; align-items: center; gap: 8px; font: 400 13px/1.3 var(--rd-font); color: var(--rd-subtle); }
.rd-crumb a { color: var(--rd-subtle); text-decoration: none; } .rd-crumb a:hover { color: var(--rd-text); } .rd-crumb .cur { color: var(--rd-text-2); }
.rd-ch-idrow { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.rd-ch-idrow .rd-av.s56 { width: 64px; height: 64px; font-size: 22px; font-weight: 700; }
#rd-ch-shortcuts { display: flex; gap: 8px; }
.rd-pane-hidden { display: none !important; }
details.cs-sec > summary { display: none !important; }
details.cs-sec { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; border-radius: 0; }
details.cs-sec .cs-body, details.cs-sec > div { padding: 0; }
.rd-pane, #sec-captions, #sec-meta, #sec-team, #sec-niche { display: flex; flex-direction: column; gap: 18px; max-width: 860px; }
.rd-pane h3.sec, details.cs-sec h3.sec { margin: 8px 0 0; font: 600 15px/1.3 var(--rd-font); letter-spacing: 0; text-transform: none; color: var(--rd-text); }
.rd-pane h3.sec em, details.cs-sec h3.sec em { display: block; font: 400 12px/1.4 var(--rd-font); color: var(--rd-subtle); font-style: normal; margin-top: 2px; }
.rd-pane .field, details.cs-sec .field { gap: 8px; }
.rd-pane textarea, details.cs-sec textarea { background: var(--rd-inset) !important; border-color: var(--rd-accent-border) !important; color: #E4E4E8 !important; font-size: 13.5px !important; line-height: 1.6 !important; padding: 14px !important; }
.rd-danger { display: flex; align-items: center; gap: 16px; padding: 20px 26px; border-radius: 20px; border: 1px solid var(--rd-err-border-2); background: #120C0B; margin-top: 8px; }
.rd-danger .t { font: 500 15px/1.3 var(--rd-font); color: var(--rd-text); } .rd-danger .s { font: 400 13px/1.45 var(--rd-font); color: #A88A80; margin-top: 2px; }
.rd-danger > div { flex: 1 1 auto; }
#ch-music-list li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--rd-hair); font-size: 14px; }
#ch-music-list li .n { font: 400 11px/1 var(--rd-mono); color: var(--rd-faint); width: 18px; }
#ch-music-list li .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ch-music-list li .d { font: 400 12px/1 var(--rd-mono); color: var(--rd-subtle); }
#cap-groups .cap-group h4 { font: 600 12px/1.3 var(--rd-font); letter-spacing: .05em; text-transform: uppercase; color: var(--rd-faint); margin: 10px 0 8px; }
.cap-cards, .cap-group .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cap-card { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 14px; border-radius: 16px; background: var(--rd-card-alt); border: 1px solid var(--rd-border); cursor: pointer; }
.cap-card.on { background: var(--rd-accent-bg-2); border-color: var(--rd-primary); }
.cap-card video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #1B1D24; object-fit: cover; }
.cap-card .cap-name { font: 600 13px/1.3 var(--rd-font); color: var(--rd-text); }
.cap-card .cap-for { font: 400 12px/1.4 var(--rd-font); color: var(--rd-subtle); margin: 0; }
.cap-card .cap-anim { font: 400 11px/1.3 var(--rd-font); color: var(--rd-faint); margin: 0; }
.cap-tag { font-size: 10px; color: var(--rd-soft); margin-left: 6px; }
@media (max-width: 900px) { .cap-cards, .cap-group .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 8. AGENTS ---------- */
body[data-screen="agents"] .page[data-page="agents"] > .page-head, body[data-screen="agents"] .page[data-page="agents"] > .ag-bar { display: none !important; }
.rd-agents-head { margin-bottom: 24px; align-items: center; }
#rd-ag-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#rd-ag-controls .sw-toggle { padding: 9px 14px; border-radius: 12px; border: 1px solid var(--rd-border-3); background: transparent; color: var(--rd-text); font-size: 13px; }
#rd-ag-controls .ag-tz { font-size: 12px; color: var(--rd-subtle); display: inline-flex; align-items: center; gap: 6px; }
.rd-agents-body { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.rd-agents-left { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ag-list { display: flex; flex-direction: column; gap: 12px; }
.ag-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; background: var(--rd-card) !important; border: 1px solid var(--rd-border) !important; box-shadow: none !important; }
.ag-card.selected { background: #121020 !important; border-color: var(--rd-accent-border-2) !important; }
.ag-top { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.ag-who { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; }
.ag-who b { font: 600 16px/1.3 var(--rd-font); color: var(--rd-text); display: block; }
.ag-who .soon { font: 400 13px/1.3 var(--rd-font); color: var(--rd-subtle); }
.ag-av { width: 44px; height: 44px; border-radius: 50%; background: var(--rd-avatar); color: #fff; font: 600 17px/44px var(--rd-font); text-align: center; display: inline-block; overflow: hidden; }
.ag-av.img img { width: 100%; height: 100%; object-fit: cover; }
.ag-pill { padding: 4px 10px; border-radius: 999px; font: 600 12px/1.3 var(--rd-font); letter-spacing: 0; text-transform: none; background: #1C1C24; color: var(--rd-muted); }
.ag-pill.on, .ag-pill.active { background: var(--rd-ok-bg); color: var(--rd-ok-text); } .ag-pill.go, .ag-pill.running, .ag-pill.working { background: var(--rd-accent-bg); color: var(--rd-soft); } .ag-pill.off, .ag-pill.paused { background: #1C1C24; color: var(--rd-muted); } .ag-pill.fail, .ag-pill.needs { background: var(--rd-warn-bg); color: var(--rd-warn-text); }
.ag-next { font: 400 13px/1.5 var(--rd-font); color: var(--rd-subtle); }
.ag-next em { font-style: normal; color: var(--rd-faint); }
.ag-upline { font: 400 12px/1.4 var(--rd-font); color: var(--rd-subtle); display: flex; align-items: center; gap: 8px; }
.ag-upline i { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-ghost); } .ag-upline.live i { background: var(--rd-ok); }
.ag-last { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font: 400 13px/1.45 var(--rd-font); background: #121218; color: var(--rd-text-2); }
.ag-last .ag-ok::before, .ag-last .ag-skip::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rd-ok); margin-right: 10px; vertical-align: 1px; }
.ag-last .ag-skip::before { background: var(--rd-ghost); }
.ag-last .ag-ok a { color: var(--rd-link); }
.ag-last:has(.ag-fail) { background: var(--rd-err-bg); color: var(--rd-err-text); }
.ag-last .rd-err .line { color: var(--rd-err-text); }
.ag-last .rd-err details summary { color: var(--rd-subtle); }
.ag-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 400 13px/1.3 var(--rd-font); color: var(--rd-subtle); }
.ag-chip { background: transparent; border: 0; padding: 0; color: var(--rd-subtle); font: 400 13px/1.3 var(--rd-font); border-radius: 0; }
.ag-chip-btn { color: var(--rd-link); cursor: pointer; }
.ag-actions { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--rd-hair-2); }
.ag-actions .sw-toggle { color: var(--rd-muted); font-size: 13px; }
.ag-actions .sw-toggle input:checked { background: var(--rd-ok-toggle); }
.ag-actions .ag-spacer { flex: 1 1 auto; }
.ag-actions [data-ag-hist], .ag-actions [data-ag-dry], .ag-actions [data-ag-edit] { display: none; }
.ag-actions [data-ag-run] { background: var(--rd-raised-2) !important; border: 1px solid var(--rd-border-3) !important; color: var(--rd-text) !important; padding: 8px 12px; border-radius: 10px; font: 500 13px/1 var(--rd-font); }
.ag-actions .rb-secondary { padding: 8px 12px; border-radius: 10px; }
.ag-actions { position: relative; }
.rd-ag-menu { left: auto; right: 0; top: calc(100% + 4px); min-width: 180px; }
/* the docked chat */
.rd-agents-dock { flex: 1 1 360px; max-width: 460px; position: sticky; top: 24px; }
.rd-ag-placeholder { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; background: #0E0E12; border-color: var(--rd-border-2); }
.rd-ag-placeholder.hidden { display: none; }
.rd-ag-ph-av { width: 44px; height: 44px; border-radius: 50%; background: var(--rd-accent-bg); color: var(--rd-soft); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 6px; }
.rd-ag-placeholder .t { font: 600 15px/1.3 var(--rd-font); } .rd-ag-placeholder .s { font: 400 13px/1.5 var(--rd-font); color: var(--rd-subtle); max-width: 32ch; }
body[data-screen="agents"] #ag-chat { position: static !important; inset: auto !important; z-index: auto !important; display: block !important; place-items: unset !important; background: transparent !important; padding: 0 !important; backdrop-filter: none !important; }
body[data-screen="agents"] #ag-chat.hidden { display: none !important; }
body[data-screen="agents"] .ag-chat-sheet { position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: none !important; height: 860px !important; max-height: calc(100vh - 48px) !important; border-radius: 20px !important; background: #0E0E12 !important; border: 1px solid var(--rd-border-2) !important; box-shadow: none !important; overflow: hidden; }
body[data-screen="agents"] .ag-rail { position: absolute; top: 0; bottom: 0; width: 240px; z-index: 5; background: #101014; border-right: 1px solid var(--rd-border-2); display: none; }
body[data-screen="agents"] .ag-rail.show { display: block; }
body[data-screen="agents"] .ag-rail-hist { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--rd-border-2); }
body[data-screen="agents"] .ag-rail-btn { display: inline-flex !important; }
.ag-chat-main { display: flex; flex-direction: column; min-height: 0; }
.ag-chat-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--rd-hair-2); }
.ag-chat-head .ag-av { width: 40px; height: 40px; line-height: 40px; font-size: 15px; }
.ag-chat-who b { font: 600 15px/1.3 var(--rd-font); display: block; }
.ag-chat-who .soon { font-size: 12px; color: var(--rd-subtle); }
.ag-chat-state { font-size: 12px; color: var(--rd-subtle); display: inline-flex; align-items: center; gap: 6px; }
.ag-chat-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-ok); display: inline-block; }
.ag-x { margin-left: auto; background: transparent; border: 0; color: var(--rd-subtle); font-size: 20px; cursor: pointer; }
.ag-chat-body { flex: 1 1 auto; min-height: 0; padding: 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.ag-msg, .ag-bub { max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--rd-raised-2); color: #E4E4E8; font: 400 14px/1.5 var(--rd-font); }
.ag-msg.me, .ag-bub.me { align-self: flex-end; max-width: 80%; border-radius: 16px 16px 4px 16px; background: var(--rd-primary); color: #fff; }
.ag-msg.them, .ag-bub.them { align-self: flex-start; }
.ag-chat-foot { padding: 16px; border-top: 1px solid var(--rd-hair-2); display: flex; flex-direction: column; gap: 12px; }
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-chips button, .ag-chips .ag-chip { padding: 7px 12px; border-radius: 999px; background: transparent; border: 1px solid var(--rd-border-3); color: var(--rd-muted); font: 400 12px/1.2 var(--rd-font); cursor: pointer; }
.ag-chat-input { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--rd-raised); border: 1px solid var(--rd-border-3); }
.ag-chat-input textarea { flex: 1 1 auto; background: transparent !important; border: 0 !important; padding: 6px 0 !important; min-height: 0 !important; font-size: 14px !important; resize: none; }
.ag-chat-input .btn { width: 36px; height: 36px; padding: 0; border-radius: 10px !important; font-size: 0; background: var(--rd-primary) !important; }
.ag-chat-input .btn::after { content: ""; display: block; width: 16px; height: 16px; margin: 0 auto; background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ag-chat-lock { padding: 20px; }
.ag-lock-card { background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1000px) { .rd-agents-dock { max-width: none; position: static; } body[data-screen="agents"] .ag-chat-sheet { height: 70vh !important; } }

/* ---------- 9. RESEARCH ---------- */
body[data-screen="research"] main.pages { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 24px; align-content: start; }
body[data-screen="research"] #rd-research { grid-column: 1 / -1; order: 0; }
body[data-screen="research"] .page[data-page="competitors"] { order: 1; } body[data-screen="research"] .page[data-page="ideas"] { order: 2; }
body[data-screen="research"] .page[data-page="competitors"].active { grid-column: 1; display: block; }
body[data-screen="research"] .page[data-page="ideas"].active { grid-column: 2; display: block; }
body[data-screen="research"] .page[data-page="competitors"] > .page-head, body[data-screen="research"] .page[data-page="ideas"] > .page-head, body[data-screen="research"] .page[data-page="ideas"] .ctx-bar { display: none !important; }
body[data-screen="research"] #rd-tools, body[data-screen="research"] #rd-videos { display: none !important; }
.rd-research-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.rd-research-head .rd-page-head { margin-bottom: 0; align-items: center; }
.rd-chansel { padding: 0 0 0 12px; gap: 0; }
.rd-chansel select { background: transparent !important; border: 0 !important; padding: 8px 32px 8px 8px !important; font-size: 13px !important; color: var(--rd-text) !important; width: auto; max-width: 220px; }
.rd-comp-strip { display: flex; align-items: center; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.rd-comp-strip::-webkit-scrollbar { display: none; }
.rd-chip-add { border-style: dashed; color: var(--rd-link); flex: 0 0 auto; }
.rd-comp-manage { margin-bottom: 14px; }
.rd-comp-manage > summary { display: none; }
.rd-comp-manage:not([open]) { display: none; }
.rd-comp-manage .cmp-card { padding: 14px 16px; border-radius: 16px; background: var(--rd-card); border: 1px solid var(--rd-border); margin-bottom: 10px; }
.cmp-stack .cmp-card { background: transparent; border: 0; padding: 0; box-shadow: none; }
.cmp-sec { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 600 15px/1.3 var(--rd-font); text-transform: none; letter-spacing: 0; color: var(--rd-text); }
.cmp-sec em { font: 400 13px/1.3 var(--rd-font); color: var(--rd-subtle); font-style: normal; }
.rd-check { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--rd-font); color: var(--rd-muted); }
.cmp-top { display: flex; flex-direction: column; gap: 12px; }
.cmp-vid { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 16px; background: var(--rd-card) !important; border: 1px solid var(--rd-hair-2) !important; counter-increment: none; }
.cmp-vid.rd-hidden { display: none; }
.cmp-vid .cmp-rank { width: 22px; text-align: center; font: 400 13px/1 var(--rd-mono); color: var(--rd-faint); flex: 0 0 auto; }
.cmp-vid > a { flex: 0 0 148px; }
.cmp-vid .cmp-thumb { width: 148px; aspect-ratio: 16 / 9; height: auto; border-radius: 10px; background: var(--rd-thumb); object-fit: cover; display: block; }
.cmp-vid > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cmp-vid b, .cmp-vid .cmp-title { font: 500 15px/1.35 var(--rd-font); color: var(--rd-text); }
.cmp-vid .soon { font: 400 12px/1.3 var(--rd-font); color: var(--rd-subtle); }
.cmp-vid .soon b { font: 500 12px/1 var(--rd-mono); color: var(--rd-text); }
.cmp-vid .cmp-import { flex: 0 0 auto; padding: 9px 14px; border-radius: 10px; background: var(--rd-text) !important; color: var(--rd-on-light) !important; font: 600 13px/1 var(--rd-font); border: 0; }
.rd-ideas-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rd-ideas-head em { font-style: normal; font-weight: inherit; color: var(--rd-accent-2); }
body[data-screen="research"] .id-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
body[data-screen="research"] #id-find { padding: 0 14px; height: 36px; font-size: 13px; border-radius: 10px; }
#id-list .idea { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--rd-card); border: 1px solid var(--rd-hair-2); margin-bottom: 10px; }
#id-list .idea .rank { display: none; }
#id-list .idea .idea-title { font: 500 15px/1.4 var(--rd-font); color: var(--rd-text); }
#id-list .idea .tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px; font: 600 11px/1.3 var(--rd-font); letter-spacing: 0; vertical-align: 2px; }
#id-list .idea .tag.hot { background: var(--rd-warn-bg); color: var(--rd-warn-text); } #id-list .idea .tag.evergreen { background: var(--rd-accent-bg); color: var(--rd-soft); }
#id-list .idea .why, #id-list .idea .notes, #id-list .idea .source { font: 400 12.5px/1.5 var(--rd-font); color: var(--rd-subtle); }
#id-list .idea .why b, #id-list .idea .notes b { display: block; font: 600 11px/1.3 var(--rd-font); letter-spacing: .05em; text-transform: uppercase; color: var(--rd-faint); margin-bottom: 2px; }
#id-list .idea .act { display: flex; gap: 8px; }
#id-list .idea .act .btn { padding: 8px 12px; border-radius: 9px; font-size: 12px; height: auto; }
#id-progress { margin-bottom: 12px; }
#id-manage { margin-top: 20px; }
@media (max-width: 1100px) { body[data-screen="research"] main.pages { grid-template-columns: 1fr; } body[data-screen="research"] .page[data-page="ideas"].active { grid-column: 1; } }
/* ---------- 10. TOOLS ---------- */
.rd-tools.hidden { display: none; }
.rd-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.rd-tool { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 18px; background: var(--rd-card); border: 1px solid var(--rd-border); text-decoration: none; color: var(--rd-text); transition: border-color .12s, background .12s; }
.rd-tool:hover { border-color: var(--rd-border-3); color: var(--rd-text); }
.rd-tool.on { background: var(--rd-accent-bg-2); border-color: var(--rd-accent-border-2); }
.rd-tp { display: flex; height: 92px; box-sizing: border-box; padding: 18px; border-radius: 12px; background: var(--rd-inset); }
.rd-tp i { display: block; border-radius: 3px; }
.rd-tp.wave { align-items: center; justify-content: center; gap: 4px; } .rd-tp.wave i { width: 5px; }
.rd-tp.lines, .rd-tp.tracks { flex-direction: column; justify-content: center; gap: 8px; } .rd-tp.lines i { height: 6px; } .rd-tp.tracks i { height: 10px; border-radius: 4px; }
.rd-tp.clips { align-items: center; gap: 6px; } .rd-tp.clips i { height: 34px; flex: 1 1 0; border-radius: 6px; }
.rd-tp.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 6px; } .rd-tp.grid i { height: 30px; border-radius: 6px; }
.rd-tool-name { display: flex; align-items: center; gap: 10px; font: 600 16px/1.3 var(--rd-font); }
.rd-tool-name i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.rd-tool-desc { font: 400 13px/1.5 var(--rd-font); color: var(--rd-subtle); }
.rd-tool-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.rd-tool-panel-head.hidden { display: none; }
body[data-screen="tools"] .page[data-page="broll"].active, body[data-screen="tools"] .page[data-page="interviews"].active, body[data-screen="tools"] .page[data-page="thumbs"].active { padding: 28px; border-radius: 20px; background: var(--rd-card); border: 1px solid var(--rd-border-3); }
body[data-screen="tools"] .page[data-page="broll"] > .page-head, body[data-screen="tools"] .page[data-page="interviews"] > .page-head, body[data-screen="tools"] .page[data-page="thumbs"] > .page-head { display: none !important; }
@media (max-width: 900px) { .rd-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rd-tool-grid { grid-template-columns: 1fr; } }
/* ---------- 11. SETTINGS ---------- */
body[data-screen="settings"] .page[data-page="settings"] > .page-head { margin-bottom: 20px; }
body[data-screen="settings"] .page[data-page="settings"] .settings { max-width: 1080px; }
.rd-settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.rd-settings-nav { position: sticky; top: 24px; }
.rd-tabs.vertical { flex-direction: column; gap: 2px; border-bottom: 0; }
.rd-tabs.vertical button { text-align: left; padding: 10px 12px; margin: 0; border-radius: 10px; border-bottom: 0; }
.rd-tabs.vertical button.on { background: var(--rd-raised-2); color: #fff; font-weight: 500; }
.rd-settings-main { min-width: 0; max-width: 820px; display: flex; flex-direction: column; gap: 20px; }
.rd-st-pane { display: flex; flex-direction: column; gap: 16px; }
.rd-st-pane > h3.sec { margin: 0; font: 600 20px/1.3 var(--rd-font); letter-spacing: 0; text-transform: none; color: var(--rd-text); }
.rd-st-pane > h3.sec em { display: block; font: 400 13px/1.4 var(--rd-font); color: var(--rd-subtle); font-style: normal; margin-top: 4px; }
.rd-key { padding: 16px 20px; border-radius: 16px; background: var(--rd-card); border: 1px solid var(--rd-border); display: flex; flex-direction: column; gap: 14px; }
.rd-key > h3.sec, .rd-key > .key-status { display: none; }
.rd-key > .key-row { display: none; padding-left: 50px; gap: 8px; }
.rd-key.open > .key-row { display: flex; }
.rd-key.open > .key-status { display: block; padding-left: 50px; }
.rd-key-head { display: flex; align-items: center; gap: 14px; }
.rd-key-logo { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; color: #fff; font: 600 14px/36px var(--rd-font); text-align: center; }
.rd-key-head .t { font: 500 15px/1.3 var(--rd-font); } .rd-key-head .s { font: 400 12px/1.3 var(--rd-font); color: var(--rd-subtle); }
.rd-key-state { display: inline-flex; align-items: center; gap: 7px; font: 400 12px/1 var(--rd-font); color: var(--rd-muted); }
.rd-key-remove { background: transparent !important; border: 1px solid var(--rd-err-border-2) !important; color: var(--rd-danger-text) !important; }
.rd-yt-conn { display: flex; flex-direction: column; gap: 18px; }
.rd-yt-top { display: flex; align-items: center; gap: 14px; }
.rd-yt-tile { width: 40px; height: 40px; border-radius: 10px; background: #C0392B; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rd-yt-top .t { font: 600 16px/1.3 var(--rd-font); } .rd-yt-top .s { font: 400 13px/1.45 var(--rd-font); color: var(--rd-subtle); }
.rd-yt-list { display: flex; flex-direction: column; }
.rd-yt-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rd-hair-2); }
.rd-yt-row .t { font: 500 14px/1.3 var(--rd-font); } .rd-yt-row .s { font: 400 12px/1.3 var(--rd-font); color: var(--rd-subtle); }
.rd-adv > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--rd-font); color: var(--rd-muted); }
.rd-adv > summary::-webkit-details-marker { display: none; }
.rd-adv[open] > summary { margin-bottom: 12px; }
.rd-adv #st-yt-block { padding: 16px; border-radius: 14px; background: var(--rd-inset); border: 1px solid var(--rd-border); }
.rd-pw { border-radius: 20px; background: var(--rd-card); border: 1px solid var(--rd-border); overflow: hidden; }
.rd-pw > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 20px; }
.rd-pw > summary::-webkit-details-marker { display: none; }
.rd-pw > summary .t { font: 400 15px/1.3 var(--rd-font); } .rd-pw > summary .s { font: 400 12px/1.3 var(--rd-font); color: var(--rd-subtle); flex: 1 1 auto; }
.rd-pw > :not(summary) { padding: 0 20px 12px; }
.rd-pw > .row { padding-bottom: 20px; }
.rd-st-pane .set-toggle { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px; background: var(--rd-card); border: 1px solid var(--rd-border); }
.rd-st-pane .set-toggle .soon { flex: 1 1 auto; }
@media (max-width: 760px) { .rd-settings { grid-template-columns: 1fr; gap: 16px; } .rd-settings-nav { position: static; } .rd-tabs.vertical { flex-direction: row; flex-wrap: wrap; } }

/* ---------- 12. CREATE (focus mode) ---------- */
body.rd-focus .app { grid-template-columns: minmax(0, 1fr); }
body.rd-focus .sidebar, body.rd-focus .m-topbar { display: none !important; }
body.rd-focus main.pages { display: flex; flex-wrap: wrap; gap: 24px; padding: 32px; max-width: 1440px; margin: 0 auto; align-items: flex-start; }
body.rd-focus main.pages > .page.active { flex: 999 1 560px; min-width: 0; }
body.rd-focus main.pages > .page.active > .page-head { display: none !important; }
body.rd-focus .ctx-bar { display: flex; flex-direction: column; gap: 10px; padding: 0; background: transparent; border: 0; }
body.rd-focus .ctx-bar .field.inline { flex-direction: column; align-items: stretch; gap: 6px; }
body.rd-focus .ctx-bar .ctx-note { font-size: 12px; color: var(--rd-subtle); }
.rd-create-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 32px; border-bottom: 1px solid #1C1C21; }
.rd-create-top.hidden, .rd-create-bottom.hidden, .rd-create-aside.hidden { display: none !important; }
.rd-create-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-create-id .t { font: 500 15px/1.3 var(--rd-font); color: var(--rd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.rd-stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rd-stepper a { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 999px; border: 1px solid transparent; color: #7A7A84; font: 400 13px/1 var(--rd-font); text-decoration: none; }
.rd-stepper a i { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 11px/1 var(--rd-font); font-style: normal; background: var(--rd-track); color: var(--rd-text-2); }
.rd-stepper a.done { color: var(--rd-text); } .rd-stepper a.done i { background: #2A2A33; }
.rd-stepper a.done i::before { content: "✓"; } .rd-stepper a.done i { font-size: 0; } .rd-stepper a.done i::before { font-size: 11px; }
.rd-stepper a.on { border-color: var(--rd-accent-border); background: var(--rd-accent-bg-3); color: var(--rd-text); }
.rd-stepper a.on i { background: var(--rd-accent); color: var(--rd-on-light); }
.rd-create-aside { flex: 1 1 320px; max-width: 380px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
.rd-create-aside .rd-card { display: flex; flex-direction: column; gap: 16px; }
.rd-cr-rows { display: flex; flex-direction: column; gap: 10px; }
.rd-cr-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.rd-cr-row .k { color: var(--rd-muted); } .rd-cr-row .v { color: var(--rd-text); text-align: right; }
.rd-cr-next { margin: 0; font: 400 14px/1.5 var(--rd-font); color: var(--rd-text-2); }
.rd-create-bottom { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 16px 32px; border-top: 1px solid #1C1C21; background: var(--rd-sidebar); }
.rd-create-bottom .rb-primary { padding: 12px 22px; }
.rd-create-bottom .rb-ghost { padding: 12px 18px; border-radius: 12px; color: var(--rd-text); }
body.rd-focus .page[data-page="script"] h2, body.rd-focus .page[data-page="edit"] h2, body.rd-focus .page[data-page="ideas"] h2 { font: 600 18px/1.3 var(--rd-font); letter-spacing: -.01em; }
body.rd-focus #sw-output, body.rd-focus #sw-tts { font-size: 16px !important; line-height: 1.7 !important; padding: 28px 32px !important; border-radius: 20px !important; color: #D9D9DE !important; background: var(--rd-card) !important; border-color: var(--rd-border) !important; }
body.rd-focus .page[data-page="ideas"] .id-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
@media (max-width: 760px) { .rd-create-top { padding: 12px 16px; } .rd-create-bottom { padding: 12px 16px; } body.rd-focus main.pages { padding: 16px; } .rd-create-aside { max-width: none; position: static; } }

/* Create: the step's own context pickers inside the Settings panel */
body.rd-focus #rd-cr-ctx .ctx-bar { display: flex !important; flex-direction: column; align-items: stretch; gap: 12px; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.rd-focus #rd-cr-ctx .ctx-bar .field, body.rd-focus #rd-cr-ctx .ctx-bar .field.inline { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; width: 100%; }
body.rd-focus #rd-cr-ctx .ctx-bar label { font: 500 11px/1 var(--rd-font); letter-spacing: .08em; text-transform: uppercase; color: var(--rd-subtle); text-align: left; }
body.rd-focus #rd-cr-ctx .ctx-bar select { width: 100%; max-width: none; min-width: 0; }
body.rd-focus #rd-cr-ctx .ctx-note { margin: 0; text-align: left; font-size: 12px; color: var(--rd-subtle); }
body.rd-focus #rd-cr-ctx:empty { display: none; }
body.rd-focus #rd-cr-ctx + .rd-cr-rows { border-top: 1px solid var(--rd-hair-2); padding-top: 16px; }
body.rd-focus #rd-cr-ctx:empty + .rd-cr-rows { border-top: 0; padding-top: 0; }
/* ---------- 13. ADMIN ---------- */
body[data-screen="admin"] .page[data-page="admin"] > .page-head { display: none !important; }
.rd-admin-head { margin-bottom: 20px; align-items: center; }
.rd-admin-head .pill-founder { margin-right: 8px; }
#rd-adm-tabs { margin-bottom: 24px; }
.admin-stack .admin-card { background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: 20px; padding: 24px; }
.admin-stack .admin-sec { margin: 0 0 14px; font: 600 16px/1.3 var(--rd-font); letter-spacing: 0; text-transform: none; color: var(--rd-text); display: flex; align-items: center; gap: 10px; }
.admin-stack .admin-sec em { font: 400 13px/1.3 var(--rd-font); color: var(--rd-subtle); font-style: normal; }
.rd-adm-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.rd-adm-strip .rd-stat .v .of { font: 400 13px/1 var(--rd-font); color: var(--rd-subtle); letter-spacing: 0; }
.rd-adm-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
.rd-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rd-adm-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 72px; align-items: center; gap: 14px; padding: 9px 0; font-size: 14px; }
.rd-adm-row .k { color: var(--rd-text); } .rd-adm-row .v { text-align: right; color: var(--rd-text-2); }
.rd-adm-row .bar { display: block; height: 6px; border-radius: 99px; background: var(--rd-track); overflow: hidden; } .rd-adm-row .bar i { display: block; height: 100%; border-radius: 99px; }
.rd-adm-models { margin: 0 0 8px 120px; padding: 6px 0 6px 14px; border-left: 1px solid var(--rd-hair-2); display: flex; flex-direction: column; gap: 6px; }
.rd-adm-model { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 12px; font-size: 12px; color: var(--rd-muted); } .rd-adm-model .mono:last-child { text-align: right; color: var(--rd-text-2); }
.rd-adm-meter { padding: 10px 0; } .rd-adm-meter .h { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 8px; } .rd-adm-meter .k { color: var(--rd-text); } .rd-adm-meter .v { color: var(--rd-text-2); } .rd-adm-meter .of { color: var(--rd-subtle); }
.rd-meter { display: block; height: 6px; border-radius: 99px; background: var(--rd-track); overflow: hidden; } .rd-meter i { display: block; height: 100%; border-radius: 99px; background: var(--rd-accent); } .rd-meter.warn i { background: var(--rd-warn); } .rd-meter.err i { background: var(--rd-err); }
.rd-adm-all > summary { margin-bottom: 0; } .rd-adm-all[open] > summary { margin-bottom: 14px; }
.admin-stack .mon-card { background: var(--rd-inset); border-color: var(--rd-border); border-radius: 14px; }
.admin-invites, .admin-users { display: flex; flex-direction: column; }
@media (max-width: 1000px) { .rd-adm-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-adm-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rd-adm-strip { grid-template-columns: 1fr; } .rd-adm-row { grid-template-columns: 90px minmax(0, 1fr) 64px; } .rd-adm-models { margin-left: 0; } }

/* ---------- 14. responsive fixes ---------- */
.rd-home-ro { margin: -8px 0 0; text-align: center; font: 400 14px/1.5 var(--rd-font); color: var(--rd-muted); }
.rd-home-ro.hidden { display: none; }
@media (max-width: 1100px) { body[data-screen="research"] .page[data-page="competitors"].active, body[data-screen="research"] .page[data-page="ideas"].active { grid-column: 1; } }
@media (max-width: 760px) {
  body[data-screen="research"] main.pages { grid-template-columns: minmax(0, 1fr); }
  .rd-research-head .rd-page-head { flex-wrap: wrap; } .rd-research-head .rd-page-head > div { min-width: 0; } .rd-research-head .rd-meta { display: block; white-space: normal; }
  .cmp-vid { gap: 10px; padding: 10px; } .cmp-vid > a { flex-basis: 96px; } .cmp-vid .cmp-thumb { width: 96px; } .cmp-vid > div { min-width: 0; } .cmp-vid b, .cmp-vid .cmp-title, .cmp-vid .cmp-vtitle { font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .cmp-vid .cmp-import { padding: 8px 10px; font-size: 12px; }
  .rd-ideas-head em { font-size: 20px; }
  body.rd-focus .app, body.rd-focus main.pages, body.rd-focus .pages { padding-top: 0 !important; }
  body.rd-focus .rd-create-top { padding-top: 12px; }
  .rd-stepper a { padding: 6px 10px 6px 6px; font-size: 12px; } .rd-stepper a i { width: 20px; height: 20px; font-size: 10px; }
  #rd-preview-bar { bottom: auto; top: 8px; right: 8px; left: auto; padding: 5px 8px; gap: 6px; }
  .lib-card .rd-vbadge, .rd-vcard .rd-vbadge { z-index: 2; }
}

.lib-media { position: relative; }

/* Research chrome lives beside the pages: only on #/research */
body:not([data-screen="research"]) #rd-research, body:not([data-screen="research"]) .rd-ideas-head, body:not([data-screen="research"]) #rd-breakouts-empty { display: none !important; }
.rd-rs-age { color: var(--rd-text-2); } .rd-rs-dur { color: var(--rd-subtle); font-size: 12px; }
#rd-rs-win button, #rd-rs-sort button { height: 30px; padding: 0 12px; }
.rd-research-head .rd-page-head > .rd-seg { align-self: center; }

/* ---------- 15. sidebar: full height, bottom stack (queue · Admin · user card), collapsed rail ---------- */
.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden auto; box-sizing: border-box; }
.sb-spacer { flex: 1 1 auto; min-height: 12px; }
.sb-nav-bottom { margin: 0 0 8px; }
.sb-nav-bottom .sb-admin { margin: 0; }
.sb-bottom { margin-top: 0; flex: 0 0 auto; }
.profile .avatar { object-fit: cover; }
.profile .gear { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--rd-subtle); flex: 0 0 auto; }
.profile .gear:hover { background: var(--rd-raised-2); color: var(--rd-text); }
.profile .gear svg { width: 16px; height: 16px; }
.sbq-ring { display: none; position: relative; width: 36px; height: 36px; flex: 0 0 auto; }
.sbq-ring svg { width: 36px; height: 36px; transform: rotate(-90deg); }
.sbq-ring circle { fill: none; stroke-width: 3; }
.sbq-ring .t { stroke: var(--rd-track); } .sbq-ring .p { stroke: var(--rd-accent); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: calc(97.4 - 97.4 * var(--p, 0)); transition: stroke-dashoffset .4s var(--rd-ease); }
.sbq-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 11px/1 var(--rd-mono); color: var(--rd-text); }
/* collapsed = a 72px rail */
.app.collapsed .sidebar { padding: 20px 16px; align-items: center; }
.app.collapsed .sb-top { flex-direction: column; align-items: center; gap: 10px; padding: 0 0 16px; width: 40px; }
.app.collapsed .sb-brand { font-size: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--rd-accent-bg); }
.app.collapsed .sb-brand::before { content: "AM"; font: 700 13px/1 var(--rd-font); letter-spacing: -.02em; color: var(--rd-soft); }
.app.collapsed .sb-brand span { display: none; }
.app.collapsed .sb-toggle { width: 40px; height: 28px; }
.app.collapsed .sb-nav { width: 40px; }
.app.collapsed .sb-nav a { position: relative; width: 40px; height: 40px; padding: 0; justify-content: center; gap: 0; border-radius: 10px; }
.app.collapsed .sb-nav a .lbl, .app.collapsed .sb-nav a .sb-count, .app.collapsed .sb-nav a .sb-tag { display: none !important; }
.app.collapsed .sb-nav a .ic { width: 20px; height: 20px; } .app.collapsed .sb-nav a .ic svg { width: 20px; height: 20px; }
.app.collapsed .sb-nav a.active { background: var(--rd-raised-2); }
.app.collapsed .sb-nav a.active::before { content: ""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rd-accent); }
.app.collapsed .sb-nav a[aria-label]::after { content: attr(aria-label); position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(-4px); padding: 6px 10px; border-radius: 8px; background: #1E1E25; border: 1px solid var(--rd-border-3); color: var(--rd-text); font: 500 12px/1 var(--rd-font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 50; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.app.collapsed .sb-nav a:hover::after, .app.collapsed .sb-nav a:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.app.collapsed .sb-queue { width: 40px; height: 40px; padding: 0; margin: 6px 0 10px; justify-content: center; border: 0; background: transparent; }
.app.collapsed .sb-queue .sbq-dot, .app.collapsed .sb-queue .sbq-body { display: none; }
.app.collapsed .sb-queue .sbq-ring { display: block; }
.app.collapsed .sb-bottom { width: 40px; }
.app.collapsed .profile { width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; background: transparent; position: relative; }
.app.collapsed .profile .avatar { width: 32px; height: 32px; }
.app.collapsed .profile .who, .app.collapsed .profile .gear { display: none !important; }
.app.collapsed .profile .crown { display: none !important; }
.app.collapsed .profile.is-founder::after { content: "♛"; position: absolute; right: -2px; top: -4px; font-size: 11px; line-height: 1; color: #EAC85E; }
.app.collapsed .profile.active { background: var(--rd-raised-2); border-radius: 10px; }
/* ---------- 16. API key logos ---------- */
.rd-key-logo { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.rd-key-logo img { width: 20px; height: 20px; object-fit: contain; display: block; }
.rd-key-logo.png img { width: 36px; height: 36px; border-radius: 10px; }
/* ---------- 17. phone (≤ 760px): top bar + drawer + bottom tab bar, 44px targets, no sideways scroll ---------- */
.m-tabbar { display: none; }
@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .app { display: block; }
  main.pages { padding: 16px 16px calc(84px + env(safe-area-inset-bottom)); max-width: 100vw; overflow-x: hidden; box-sizing: border-box; }
  .m-topbar { height: 56px; min-height: 56px; background: rgba(9, 9, 11, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid #1C1C21; }
  .m-brand { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
  .m-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(12, 12, 15, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid #1C1C21; }
  .m-tabbar a, .m-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; border: 0; background: transparent; color: var(--rd-muted); font: 500 11px/1 var(--rd-font); text-decoration: none; }
  .m-tabbar svg { width: 22px; height: 22px; }
  .m-tabbar .active { color: var(--rd-text); } .m-tabbar .active svg { color: var(--rd-accent); }
  .m-tabbar .locked { opacity: .35; pointer-events: none; }
  body.rd-focus .m-tabbar { display: none; }
  .sidebar { position: fixed; height: 100dvh; width: min(320px, 86vw); transform: translateX(-105%); z-index: 60; padding: 20px 14px; }
  body.nav-open .sidebar { transform: none; }
  .sb-nav a { min-height: 44px; }
  .profile { min-height: 56px; }
  /* 44px targets */
  .rb, .btn, .rd-seg button, .rd-chip, .st-tab, .rd-tabs button, .rd-tabs a, .cbtn, .rd-mode button { min-height: 44px; }
  .rb-icon, .rb.sm, .rb-icon.sm { min-width: 44px; }
  .rd-seg.sm button { min-height: 40px; }
  /* tabs scroll sideways instead of wrapping */
  .rd-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px 20px; padding-bottom: 0; -webkit-overflow-scrolling: touch; }
  .rd-tabs::-webkit-scrollbar { display: none; }
  .rd-tabs button, .rd-tabs a { white-space: nowrap; flex: 0 0 auto; }
  .rd-tabs.vertical { flex-direction: row; }
  .rd-settings-nav { overflow-x: auto; }
  #rd-ch-tabbar { overflow-x: auto; }
  /* home: full-width composer + stats pill, stats panel as a bottom sheet */
  .rd-composer-wrap { padding-top: 0; }
  #rd-home-stats-slot, #rd-home-stats-slot .hs, #rd-home-stats-slot .hs-pill { width: 100%; box-sizing: border-box; }
  #rd-home-stats-slot .hs-pill { justify-content: space-between; }
  #rd-home-stats-slot .hs-panel { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; max-height: 82vh; overflow: auto; border-radius: 20px 20px 0 0 !important; z-index: 70; padding-bottom: calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); }
  #rd-home-stats-slot .hs-panel::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--rd-border-3); margin: -6px auto 10px; }
  .rd-ready-grid, .rd-prod-grid { grid-template-columns: 1fr; }
  /* spreadsheet: stacked cards; channel tabs stay at the bottom and scroll sideways */
  [data-page="sheet"] .sheet-wrap { overflow-x: hidden; border: 0 !important; background: transparent !important; }
  /* …except the table that replaced those cards. It carries both class names, and the `hidden` above left it
     cut off at the right edge with no way to reach the rest of it. Twelve columns will never fit a phone, so
     it scrolls SIDEWAYS IN ITS OWN BOX — the number, thumbnail and title stay pinned while the rest moves. */
  [data-page="sheet"] .sv-grid.sheet-wrap { overflow: auto !important; -webkit-overflow-scrolling: touch;
    background: var(--rd-row, #0E0E12) !important; }
  .sheet-head, .sheet-cols, .sheet-swipe { display: none !important; }
  #sheet-body .sheet-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 12px 10px; margin-bottom: 10px; border: 1px solid var(--rd-border) !important; border-radius: 14px; background: var(--rd-card); min-height: 0; }
  #sheet-body .sheet-row > * { height: auto !important; min-height: 0; }
  #sheet-body .sheet-row .rn { order: 0; padding-left: 0 !important; width: auto; }
  #sheet-body .sheet-row .sc.title { order: 1; flex: 1 1 100%; padding-left: 0 !important; min-width: 0; }
  #sheet-body .sheet-row .sc.title input { width: 100%; }
  #sheet-body .sheet-row > span:nth-child(3) { order: 2; }
  #sheet-body .sheet-row .sc.yt { order: 3; margin-left: auto; padding-left: 0 !important; }
  #sheet-body .sheet-row > span:nth-child(n+4):nth-child(-n+9) { order: 4; width: 44px; height: 44px !important; border-radius: 10px !important; border: 1px solid var(--rd-border-2) !important; }
  #sheet-body .sheet-row > span:nth-child(4) { margin-left: 0; }
  #rd-sheet-bar { flex-wrap: wrap; } #rd-sheet-bar .rd-seg { overflow-x: auto; max-width: 100%; }
  .sheet-tabs { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); }
  .st-track { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  /* agents chat: full screen */
  body[data-screen="agents"] #ag-chat:not(.hidden) { position: fixed !important; inset: 0 !important; z-index: 80 !important; background: var(--rd-page) !important; overflow: auto; }
  body[data-screen="agents"] #ag-chat:not(.hidden) .ag-chat-sheet { height: 100dvh !important; border-radius: 0 !important; border: 0 !important; }
  .rd-agents-body { grid-template-columns: 1fr; }
  /* page heads: title then controls */
  .rd-page-head { align-items: flex-start; }
  .rd-page-head .grow { display: none; }
  .rd-title.lg { font-size: 30px; }
  .rd-create-top .rd-stepper { width: 100%; order: 3; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .cmp-vid { flex-wrap: wrap; } .cmp-vid .cmp-import { flex: 1 1 100%; justify-content: center; }
  #rd-tools .rd-tool-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) { .rd-hero { font-size: 20px; } }

/* ---------- 18. standalone Script Writer + Scripts lists ---------- */
.rd-sw { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.rd-sw.hidden, .rd-scripts.hidden, .lib-card.rd-hidden { display: none !important; }
.rd-sw-form, .rd-sw-out { display: flex; flex-direction: column; gap: 16px; }
.rd-sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rd-sw-grid .wide { grid-column: 1 / -1; }
.rd-field { display: flex; flex-direction: column; gap: 6px; }
.rd-field .k { font: 500 13px/1.3 var(--rd-font); color: var(--rd-text); } .rd-field .k em { font-style: normal; color: var(--rd-subtle); font-weight: 400; margin-left: 6px; }
.rd-field input, .rd-field select, .rd-field textarea { width: 100%; box-sizing: border-box; }
.rd-sw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rd-sw-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rd-sw-stages li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--rd-raised); border: 1px solid var(--rd-border); font: 400 13px/1 var(--rd-font); color: var(--rd-muted); }
.rd-sw-stages li i { width: 8px; height: 8px; border-radius: 50%; background: var(--rd-border-3); }
.rd-sw-stages li.running { color: var(--rd-text); border-color: var(--rd-accent-border); } .rd-sw-stages li.running i { background: var(--rd-accent); animation: rdPulse 1s infinite alternate; }
.rd-sw-stages li.done { color: var(--rd-text); } .rd-sw-stages li.done i { background: var(--rd-ok); }
@keyframes rdPulse { from { opacity: .4; } to { opacity: 1; } }
#rd-sw-out { width: 100%; box-sizing: border-box; font: 400 15px/1.7 var(--rd-font); color: #D9D9DE; background: var(--rd-inset); border: 1px solid var(--rd-border); border-radius: 14px; padding: 20px 22px; resize: vertical; }
.rd-scripts { margin: 8px 0 32px; }
.rd-scripts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.rd-script-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--rd-card); border: 1px solid var(--rd-border); }
.rd-script-top { display: flex; align-items: center; gap: 8px; font: 400 12px/1.3 var(--rd-font); color: var(--rd-muted); }
.rd-script-card h3 { margin: 0; font: 500 15px/1.35 var(--rd-font); color: var(--rd-text); }
.rd-script-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
@media (max-width: 760px) { .rd-sw-grid { grid-template-columns: 1fr; } .rd-scripts-grid { grid-template-columns: 1fr; } }

/* fixes after the preview feedback round 2 */
.rd-page-head > div.rd-seg { flex-direction: row; gap: 0; }
@media (max-width: 760px) {
  .rd-hero-name { text-shadow: none; }
  #rd-preview-bar { top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); left: 8px; right: 8px; transform: none; justify-content: center; }
  .rd-key-head { flex-wrap: wrap; gap: 10px 12px; }
  .rd-key-head .grow { flex: 1 1 calc(100% - 50px); }
  .rd-key-head .rd-key-state { margin-left: 50px; }
  .rd-key-head .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rd-research-head .rd-page-head > .rd-chansel { max-width: 100%; }
}
@media (max-width: 760px) { .cmp-sec { flex-wrap: wrap; } #rd-rs-sub { flex-basis: 100%; order: 5; } }
@media (max-width: 760px) { #sheet-body .sheet-row .sc.title { flex-wrap: wrap; gap: 8px 10px; } #sheet-body .sheet-row .sc.title input { flex: 1 1 140px; width: auto; min-width: 0; } }
@media (max-width: 760px) { #sheet-body .sheet-row { height: auto !important; max-height: none !important; overflow: visible !important; } }
@media (max-width: 760px) { #sheet-body .sheet-row { min-width: 0 !important; width: auto !important; max-width: 100%; box-sizing: border-box; } [data-page="sheet"] .sheet-wrap { min-width: 0 !important; width: auto !important; } }

/* ---------- 19. Tools: card animations, copied from Tools.dc.html (one run per hover, first = last = static) ---------- */
.rd-tp { height: 92px; box-sizing: border-box; border-radius: 12px; background: #0B0B0E; }
.tp-sw { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; }
.tp-vo { display: flex; align-items: center; justify-content: center; gap: 4px; }
.tp-ve { position: relative; overflow: hidden; padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.tp-br { position: relative; padding: 0 20px; display: flex; align-items: center; }
.tp-iq { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; }
.tp-th { padding: 0 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 6px; }
.tool { transition: border-color .2s ease, background .2s ease; }
.tool:hover { border-color: #3A3460 !important; }

/* Script Writer: lines type themselves out */
.sw { display: block; height: 6px; border-radius: 3px; }
.tool:hover .sw1 { animation: sw1 2.2s ease-out both; }
.tool:hover .sw2 { animation: sw2 2.2s ease-out both; }
.tool:hover .sw3 { animation: sw3 2.2s ease-out both; }
.tool:hover .sw4 { animation: sw4 2.2s ease-out both; }
@keyframes sw1{0%{width:var(--w)}8%,12%{width:0}30%,100%{width:var(--w)}}
@keyframes sw2{0%{width:var(--w)}8%,30%{width:0}48%,100%{width:var(--w)}}
@keyframes sw3{0%{width:var(--w)}8%,48%{width:0}66%,100%{width:var(--w)}}
@keyframes sw4{0%{width:var(--w)}8%,66%{width:0}86%,100%{width:var(--w)}}

/* Voiceover: a voice wave rolls through the bars */
.vb { display: block; width: 5px; border-radius: 3px; transform-origin: center; }
.tool:hover .vb { animation: vo .85s ease-in-out var(--d) both; }
@keyframes vo{0%,100%{transform:scaleY(1)}35%{transform:scaleY(.25)}70%{transform:scaleY(1.5)}}

/* Video Editor: tracks slide in, playhead sweeps */
.ve { display: block; height: 10px; border-radius: 4px; }
.tool:hover .ve1 { animation: ve1 2.4s cubic-bezier(.2,.8,.2,1) both; }
.tool:hover .ve2 { animation: ve2 2.4s cubic-bezier(.2,.8,.2,1) both; }
.tool:hover .ve3 { animation: ve3 2.4s cubic-bezier(.2,.8,.2,1) both; }
.tool:hover .ph { animation: ph 2.4s linear both; }
@keyframes ve1{0%{transform:none;opacity:1}10%,14%{transform:translateX(-110%);opacity:0}32%,100%{transform:none;opacity:1}}
@keyframes ve2{0%{transform:none;opacity:1}10%,30%{transform:translateX(-110%);opacity:0}48%,100%{transform:none;opacity:1}}
@keyframes ve3{0%{transform:none;opacity:1}10%,46%{transform:translateX(-110%);opacity:0}64%,100%{transform:none;opacity:1}}
@keyframes ph{0%,66%{left:2%;opacity:0}70%{left:2%;opacity:1}94%{left:97%;opacity:1}100%{left:97%;opacity:0}}

/* B-Roll Cutter: raw footage rolls in, a blade slices it on the timeline, the best shots get picked */
.br { position: relative; display: flex; align-items: center; column-gap: 6px; height: 34px; }
.bk { display: block; flex: 1 1 0; height: 34px; border-radius: 6px; background: var(--c); }
.src { position: absolute; inset: 0; border-radius: 6px; opacity: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 9px), linear-gradient(90deg, #16304A, #2C5E8A 40%, #1E4468 70%, #16304A);
  background-size: 9px 100%, 200% 100%; box-shadow: inset 0 0 0 1px rgba(94,178,240,.35); }
.blade { position: absolute; top: -8px; bottom: -8px; left: 0; width: 2px; border-radius: 1px; background: #FFFFFF; opacity: 0; box-shadow: 0 0 12px #FFFFFF, 0 0 24px #5EB2F0; }
.cut { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: #FFFFFF; opacity: 0; box-shadow: 0 0 10px #9AD4FF; }
.tc, .kept { position: absolute; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .06em; opacity: 0; }
.tool:hover .bk { animation: bk 2.8s cubic-bezier(.4,0,.2,1) both; }
.tool:hover .src { animation: src 2.8s cubic-bezier(.4,0,.2,1) both; }
.tool:hover .blade { animation: blade 2.8s cubic-bezier(.45,0,.55,1) both; }
.tool:hover .cut { animation: cut .8s ease-out var(--d) both; }
.tool:hover .tc { animation: tc 2.8s ease both; }
.tool:hover .kept { animation: kept 2.8s ease both; }
@keyframes src{0%{opacity:0;transform:scaleX(.94);background-position:0 0,0 0}10%{opacity:1;transform:none}52%{opacity:1;background-position:-72px 0,-60% 0}60%,100%{opacity:0;background-position:-80px 0,-70% 0}}
@keyframes blade{0%,13%{left:0%;opacity:0}16%{left:0%;opacity:1}52%{left:100%;opacity:1}56%,100%{left:100%;opacity:0}}
@keyframes cut{0%{opacity:0;transform:scaleY(.3)}10%{opacity:1;transform:scaleY(1.25)}100%{opacity:0;transform:scaleY(1)}}
@keyframes bk{
0%{background:var(--c);transform:none;box-shadow:none;opacity:1}
10%,56%{background:#22425F;transform:none;box-shadow:none;opacity:1}
63%{background:#5EB2F0;transform:none;box-shadow:none;opacity:1}
74%,80%{background:var(--sel);transform:scaleY(var(--sy));box-shadow:var(--glow);opacity:var(--op)}
92%{background:var(--c);transform:none;box-shadow:var(--glow2);opacity:1}
100%{background:var(--c);transform:none;box-shadow:none;opacity:1}}
@keyframes tc{0%,8%{opacity:0}14%,52%{opacity:1}60%,100%{opacity:0}}
@keyframes kept{0%,64%{opacity:0;transform:translateY(4px)}72%,86%{opacity:1;transform:none}96%,100%{opacity:0}}

/* Interview Cutter: scanner finds the quotes */
.iq { display: block; width: 5px; border-radius: 3px; background: #F06E9B; }
.scan { position: absolute; top: 14px; bottom: 14px; left: 2%; width: 2px; border-radius: 1px; background: #FFFFFF; opacity: 0; box-shadow: 0 0 10px #F06E9B; }
.tool:hover .iqa { animation: iqa 2.4s ease both; }
.tool:hover .iqb { animation: iqb 2.4s ease both; }
.tool:hover .iqc { animation: iqc 2.4s ease both; }
.tool:hover .scan { animation: scan 2.4s linear both; }
@keyframes iqa{0%{background:#F06E9B}8%,28%{background:#3A2A32}34%{background:#FFC2D8}42%,100%{background:#F06E9B}}
@keyframes iqb{0%{background:#F06E9B}8%,48%{background:#3A2A32}54%{background:#FFC2D8}62%,100%{background:#F06E9B}}
@keyframes iqc{0%{background:#F06E9B}8%,68%{background:#3A2A32}74%{background:#FFC2D8}82%,100%{background:#F06E9B}}
@keyframes scan{0%,10%{left:2%;opacity:0}14%{left:2%;opacity:1}78%{left:97%;opacity:1}84%,100%{left:97%;opacity:0}}

/* Thumbnails: 4 options generate, the winner gets picked */
.th { display: block; height: 30px; border-radius: 6px; background: #24242C; }
.tool:hover .th1 { animation: th1 2.4s ease both; }
.tool:hover .th2 { animation: th2 2.4s ease both; }
.tool:hover .th3 { animation: th3 2.4s ease both; }
.tool:hover .th4 { animation: th4 2.4s ease both; }
@keyframes th1{0%{background:#E8D25E;transform:none}8%,14%{background:#24242C;transform:none}24%,68%{background:#8A7C3A;transform:none}80%{background:#E8D25E;transform:scale(1.07)}90%,100%{background:#E8D25E;transform:none}}
@keyframes th2{0%,8%,26%{background:#24242C}36%,68%{background:#2F5578}80%,100%{background:#24242C}}
@keyframes th3{0%,8%,36%{background:#24242C}46%,68%{background:#6B3A35}80%,100%{background:#24242C}}
@keyframes th4{0%,8%,46%{background:#24242C}56%,68%{background:#3A3460}80%,100%{background:#24242C}}

@media (prefers-reduced-motion: reduce) { .tool:hover * { animation: none !important; } }
@media (hover: none), (pointer: coarse) { .tool:hover * { animation: none !important; } }

/* ---------- 20. EDIT AGENT (AgentEdit.dc.html) ---------- */
#ag-modal .modal-card.rd-agx { width: min(1080px, calc(100vw - 48px)); max-width: none; padding: 0; border-radius: 24px; background: #0E0E12; border: 1px solid #26262D; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; }
.rd-agx > #ag-form-title, .rd-agx > .ag-sub, .rd-agx > .ag-foot, .rd-agx > .ag-two, .rd-agx > .ag-f, .rd-agx > details { display: none !important; }
.rd-agx-head { display: flex; align-items: center; gap: 16px; padding: 22px 28px; border-bottom: 1px solid #1C1C22; }
.rd-agx-av { width: 48px; height: 48px; border-radius: 50%; background: var(--rd-accent); display: inline-flex; align-items: center; justify-content: center; font: 700 18px/1 var(--rd-font); color: #fff; flex: 0 0 auto; }
.rd-agx-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rd-agx-id .t { font: 600 20px/1.2 var(--rd-font); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-agx-id .s { font: 400 13px/1.3 var(--rd-font); color: var(--rd-subtle); } .rd-agx-id .s b { font-weight: 400; color: #C9C9D0; }
.rd-agx-status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: #15151A; border: 1px solid #26262D; color: var(--rd-text); font: 400 13px/1 var(--rd-font); cursor: pointer; }
.rd-agx-status.hidden { display: none; }
.rd-sw { width: 38px; height: 22px; flex: 0 0 auto; border-radius: 999px; padding: 2px; box-sizing: border-box; display: inline-flex; justify-content: flex-start; background: #2A2A33; transition: background .15s; }
.rd-sw i { width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.rd-agx-status.on .rd-sw { background: var(--rd-primary); } .rd-agx-status.on .rd-sw i { transform: translateX(16px); }
.rd-agx-head #ag-close { position: static; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #26262D; background: transparent; color: var(--rd-muted); font-size: 20px; line-height: 1; }
.rd-agx-body { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.rd-agx-nav { flex: 0 0 280px; box-sizing: border-box; padding: 20px 16px; border-right: 1px solid #1C1C22; background: #0B0B0E; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.rd-agx-nav [data-sec] { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; border: 0; cursor: pointer; background: transparent; color: #C9C9D0; text-align: left; font-family: var(--rd-font); }
.rd-agx-nav [data-sec].on { background: #1A1730; color: #fff; }
.rd-agx-nav .ic { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #16161B; color: var(--rd-subtle); }
.rd-agx-nav [data-sec].on .ic { background: #2A2550; color: var(--rd-soft); }
.rd-agx-nav .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rd-agx-nav .l { font: 500 14px/1.2 var(--rd-font); } .rd-agx-nav .s { font: 400 12px/1.3 var(--rd-font); color: var(--rd-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-agx-sum { margin-top: 16px; padding: 16px; border-radius: 16px; background: #13102A; border: 1px solid #2E2A55; display: flex; flex-direction: column; gap: 8px; }
.rd-agx-sum .k { font: 600 11px/1 var(--rd-font); letter-spacing: .06em; color: #8E86C8; } .rd-agx-sum .v { font: 400 14px/1.55 var(--rd-font); color: #DCD8FF; }
.rd-agx-main { flex: 1 1 auto; min-width: 0; padding: 28px 32px; overflow: auto; }
.rd-agx-pane { display: none; flex-direction: column; gap: 26px; } .rd-agx-pane.on { display: flex; }
.rd-agx-h { font: 600 15px/1.3 var(--rd-font); color: var(--rd-text); }
.rd-agx-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rd-agx-pane .ag-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rd-agx-pane .ag-f { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.rd-agx-pane .ag-lbl { font: 400 13px/1.3 var(--rd-font); color: var(--rd-muted); }
.rd-agx-pane .ag-help { margin: 0; font: 400 12px/1.5 var(--rd-font); color: var(--rd-subtle); }
.rd-agx-pane .ag-name-row { display: flex; align-items: center; gap: 10px; } .rd-agx-pane .ag-name-row #ag-avatar { display: none; }
.rd-agx-pane input[type="text"], .rd-agx-pane input[type="time"], .rd-agx-pane select, .rd-agx-pane textarea, .rd-agx-pane .ag-ch-btn { width: 100%; box-sizing: border-box; padding: 12px 14px !important; border-radius: 12px !important; background: #15151A !important; border: 1px solid #26262D !important; color: var(--rd-text) !important; font: 400 14px/1.3 var(--rd-font) !important; }
.rd-agx-pane .ag-ch-btn { display: flex; align-items: center; gap: 10px; text-align: left; }
.rd-agx-pane .ag-pick { position: relative; }
/* idea source + when-it-goes-live: option cards */
#ag-source.ag-seg, #ag-up-mode.ag-seg { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; background: transparent; border: 0; width: auto; }
#ag-up-mode.ag-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#ag-source button, #ag-up-mode button { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px !important; border-radius: 16px !important; background: #121216 !important; border: 1px solid #26262D !important; color: var(--rd-text) !important; font: 600 15px/1.3 var(--rd-font) !important; text-align: left; cursor: pointer; }
#ag-up-mode button { padding: 16px !important; border-radius: 14px !important; font-size: 14px !important; }
#ag-source button.on, #ag-up-mode button.on { background: #15132A !important; border-color: var(--rd-primary) !important; }
#ag-source button::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #3A3A44; box-sizing: border-box; background: radial-gradient(circle, transparent 0 3px, transparent 3px); }
#ag-source button.on::before { border-color: var(--rd-accent); background: radial-gradient(circle, var(--rd-accent) 0 4px, transparent 4.5px); }
#ag-source button::after, #ag-up-mode button::after { content: attr(data-desc); font: 400 13px/1.5 var(--rd-font); color: var(--rd-subtle); }
#ag-up-mode button::after { font-size: 12px; }
/* schedule: 7-day week */
#ag-days.ag-days { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
#ag-days button { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 12px !important; border-radius: 14px !important; background: #121216 !important; border: 1px solid #1F1F25 !important; color: #6E6E78 !important; font: 600 13px/1 var(--rd-font) !important; cursor: pointer; }
#ag-days button.on { background: #15132A !important; border-color: #4A4380 !important; color: var(--rd-text) !important; }
#ag-days button::after { content: attr(data-t); padding: 4px 8px; border-radius: 7px; font: 400 11px/1 var(--rd-mono); color: #55555F; border: 1px dashed #2A2A33; }
#ag-days button.on::after { background: #2A2550; color: var(--rd-soft); border-color: transparent; }
.rd-agx .ag-quick { display: flex; align-items: center; gap: 8px; } .rd-agx .ag-quick span { display: none; }
.rd-agx .ag-quick button { padding: 6px 12px; border-radius: 999px; background: transparent; border: 1px solid #26262D; color: var(--rd-muted); font: 400 12px/1 var(--rd-font); cursor: pointer; }
.rd-agx-presets { display: flex; gap: 10px; } .rd-agx-presets button { flex: 1 1 0; padding: 11px 0; border-radius: 10px; cursor: pointer; font: 400 14px/1 var(--rd-mono); background: #15151A; color: var(--rd-muted); border: 1px solid #26262D; }
.rd-agx-presets button.on { background: var(--rd-text); color: var(--rd-on-light); border-color: var(--rd-text); }
.rd-agx .ag-time-row { display: flex; align-items: center; gap: 10px; } .rd-agx .ag-time-row select { flex: 1 1 auto; } .rd-agx .ag-zone { font: 400 12px/1 var(--rd-font); color: var(--rd-subtle); white-space: nowrap; }
#ag-count.ag-seg { display: flex; padding: 4px; border-radius: 12px; background: #15151A; border: 1px solid #26262D; width: auto; }
#ag-count button { flex: 1 1 0; padding: 10px 0; border-radius: 9px; border: 0; cursor: pointer; font: 400 14px/1 var(--rd-font); background: transparent; color: var(--rd-muted); }
#ag-count button.on { background: var(--rd-text); color: var(--rd-on-light); font-weight: 600; }
/* publishing */
.rd-agx #ag-up > summary, .rd-agx .ag-up-defaults > summary, .rd-agx #ag-adv > summary { display: none; }
.rd-agx #ag-up, .rd-agx .ag-up-defaults, .rd-agx #ag-adv { display: block; }
.rd-agx #ag-up > .ag-adv-body, .rd-agx .ag-up-defaults > .ag-adv-body, .rd-agx #ag-adv > .ag-adv-body { display: flex; flex-direction: column; gap: 20px; padding: 0; border: 0; background: transparent; }
.rd-agx .ag-up-head { display: flex; flex-direction: row !important; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: #15151A; border: 1px solid #26262D; }
.rd-agx .ag-up-head > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.rd-agx .ag-up-head .ag-lbl { font: 600 15px/1.3 var(--rd-font); color: var(--rd-text); }
.rd-agx #ag-up > .ag-adv-body > .ag-up-head { padding: 18px 20px; }
.rd-agx #ag-up > .ag-adv-body > .ag-up-head::before { content: ""; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; background: #C0392B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M8 5l12 7-12 7z'/%3E%3C/svg%3E") center / 16px no-repeat; }
.rd-agx .sw-toggle .sw-lbl { display: none; }
.rd-agx #ag-up-body { display: flex; flex-direction: column; gap: 20px; } .rd-agx #ag-up-body.hidden { display: none; }
.rd-agx .ag-up-status { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-agx .ag-up-row { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font: 400 12px/1.3 var(--rd-font); background: #1C1C24; border: 1px solid #26262D; color: var(--rd-muted); }
.rd-agx .ag-up-row i { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-subtle); }
.rd-agx .ag-up-row.ok { background: #0F1A15; border-color: #1B3328; color: #8FD9B6; } .rd-agx .ag-up-row.ok i { background: var(--rd-ok); }
.rd-agx .ag-up-row.warn { background: #1E150E; border-color: #3A2818; color: #FFC79E; } .rd-agx .ag-up-row.warn i { background: var(--rd-warn); }
.rd-agx .ag-up-row.bad { background: #2A1214; border-color: #4A1F24; color: #FF8A8A; } .rd-agx .ag-up-row.bad i { background: var(--rd-err); }
.rd-agx .ag-up-times { display: flex; flex-wrap: wrap; gap: 12px; } .rd-agx .ag-up-time { display: flex; align-items: center; gap: 10px; font: 400 13px/1 var(--rd-font); color: var(--rd-muted); } .rd-agx .ag-up-time input { width: auto; }
.rd-agx #ag-up-vis.ag-seg { display: flex; padding: 4px; border-radius: 12px; background: #15151A; border: 1px solid #26262D; width: auto; }
.rd-agx #ag-up-vis button { flex: 1 1 0; padding: 10px 8px; border-radius: 9px; border: 0; cursor: pointer; font: 400 13px/1.2 var(--rd-font); background: transparent; color: var(--rd-muted); }
.rd-agx #ag-up-vis button.on { background: var(--rd-text); color: var(--rd-on-light); font-weight: 600; }
.rd-agx .ag-stepper { display: inline-flex; align-items: center; gap: 12px; } .rd-agx .ag-stepper button { width: 40px; height: 40px; border-radius: 10px; background: #1C1C22; border: 1px solid #2A2A33; color: var(--rd-text); font-size: 18px; cursor: pointer; }
.rd-agx .ag-stepper input { width: 120px !important; text-align: center; font: 400 18px/1 var(--rd-mono) !important; }
.rd-agx .ag-stepper-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.rd-agx-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #13102A; border: 1px solid #2E2A55; font: 400 13px/1.4 var(--rd-font); color: var(--rd-soft); }
.rd-agx #ag-adv > .ag-adv-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rd-agx #ag-adv > .ag-adv-body > .ag-f { padding: 20px; border-radius: 16px; background: #15151A; border: 1px solid #26262D; }
.rd-agx #ag-adv .ag-lbl { font: 600 15px/1.3 var(--rd-font); color: var(--rd-text); }
.rd-agx .ag-up-defaults .ag-adv-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rd-agx .ag-up-defaults .ag-adv-body > .ag-help, .rd-agx .ag-up-defaults .ag-adv-body > .ag-up-head, .rd-agx .ag-up-defaults .ag-adv-body > button, .rd-agx .ag-up-defaults .ag-adv-body > #ag-up-def-msg { grid-column: 1 / -1; }
.rd-agx .ag-up-defaults .ag-adv-body > .ag-help { display: none; }
.rd-agx #ag-up-def-save { align-self: flex-start; }
.rd-agx-foot { display: flex; align-items: center; gap: 10px; padding: 16px 28px; border-top: 1px solid #1C1C22; background: #0B0B0E; }
.rd-agx-foot #ag-delete { background: transparent !important; border: 0 !important; color: var(--rd-danger-text) !important; padding: 10px 14px; font: 400 13px/1 var(--rd-font); }
.rd-agx-foot #ag-delete.hidden { display: none; }
.rd-agx-next { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.rd-agx-next .ag-summary { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; font: 400 12px/1.3 var(--rd-font); color: var(--rd-faint); margin: 0; }
.rd-agx-next .ag-summary-ic { display: none; } .rd-agx-next #ag-summary-text b { font-weight: 400; color: var(--rd-subtle); } .rd-agx-next #ag-summary-text span { display: none; }
.rd-agx-next .ag-summary.warn #ag-summary-text b { color: var(--rd-warn-text); }
.rd-agx-foot #ag-cancel { padding: 11px 16px; border-radius: 12px; border: 1px solid #26262D; background: transparent; color: var(--rd-text); font: 400 14px/1 var(--rd-font); }
.rd-agx-foot #ag-save { padding: 11px 20px; border-radius: 12px; background: var(--rd-primary); border: 0; color: #fff; font: 600 14px/1 var(--rd-font); }
@media (max-width: 760px) {
  #ag-modal .modal-card.rd-agx { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  .rd-agx-head { padding: 14px 16px; } .rd-agx-body { flex-direction: column; }
  .rd-agx-nav { flex: 0 0 auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #1C1C22; padding: 10px 12px; gap: 6px; scrollbar-width: none; }
  .rd-agx-nav [data-sec] { flex: 0 0 auto; padding: 8px 12px; } .rd-agx-nav .ic { display: none; } .rd-agx-nav .s { display: none; } .rd-agx-nav .grow { display: none; }
  .rd-agx-sum { display: none; }
  .rd-agx-main { padding: 16px; }
  .rd-agx-pane .ag-two, #ag-source.ag-seg, #ag-up-mode.ag-seg, .rd-agx #ag-adv > .ag-adv-body, .rd-agx .ag-up-defaults .ag-adv-body { grid-template-columns: 1fr; }
  #ag-days.ag-days { gap: 4px; } #ag-days button { padding: 10px 0 8px !important; font-size: 11px !important; } #ag-days button::after { font-size: 9px; padding: 3px 4px; }
  .rd-agx-foot { padding: 12px 16px; flex-wrap: wrap; } .rd-agx-next { display: none; }
}
/* ---------- 21. VIDEO PAGE (Project.dc.html) ---------- */
.rd-pj-oldhead, .page[data-page="project"] .pj-grid { display: none !important; }
.rd-pj { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.rd-pj-crumb { display: flex; align-items: center; gap: 8px; font: 400 13px/1 var(--rd-font); color: var(--rd-subtle); } .rd-pj-crumb a { color: var(--rd-subtle); } .rd-pj-crumb .ch { display: inline-flex; align-items: center; gap: 6px; color: #C9C9D0; }
.rd-pj-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.rd-pj-title { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rd-pj-title h1 { margin: 0; font: 600 34px/1.15 var(--rd-font); letter-spacing: -.03em; }
.rd-pj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 400 13px/1.3 var(--rd-font); color: var(--rd-subtle); }
.rd-pj-meta .warn { color: var(--rd-warn-text); } .rd-pj-meta .dot { color: var(--rd-faint); }
.rd-pj-meta #pj-status { appearance: none; -webkit-appearance: none; padding: 6px 26px 6px 12px !important; border-radius: 999px !important; border: 0 !important; font: 600 12px/1 var(--rd-font) !important; cursor: pointer; background: #1C1C24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 10px no-repeat !important; color: var(--rd-muted) !important; width: auto; }
.rd-pj-meta #pj-status[data-v="done"] { background-color: #0F2A1F !important; color: #5BE3A8 !important; }
.rd-pj-meta #pj-status[data-v="uploaded"] { background-color: #0F2A1F !important; color: #5BE3A8 !important; }
.rd-pj-meta #pj-status[data-v="in-progress"] { background-color: #1E1A3A !important; color: var(--rd-soft) !important; }
.rd-pj-meta #pj-status[data-v="error"] { background-color: var(--rd-err-bg) !important; color: var(--rd-err-text) !important; }
.rd-pj-meta #pj-status-msg { margin: 0; }
.rd-pj-acts { display: flex; align-items: center; gap: 8px; }
.rd-menu-wrap { position: relative; } #rd-pj-menu { left: auto; right: 0; min-width: 260px; } #rd-pj-menu hr { border: 0; height: 1px; background: var(--rd-hair-2); margin: 4px 6px; } #rd-pj-menu .danger { color: var(--rd-danger-text); }
.rd-pj-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 16px; border: 1px solid var(--rd-border); background: #0F0F13; overflow: hidden; }
.rd-pj-strip button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: transparent; border: 0; border-left: 1px solid #1C1C22; cursor: pointer; font-family: var(--rd-font); text-align: left; color: var(--rd-text); }
.rd-pj-strip button:first-child { border-left: 0; } .rd-pj-strip button:hover { background: rgba(255, 255, 255, .02); }
.rd-pj-strip .dot { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--rd-font); background: #0F2A1F; color: #5BE3A8; }
.rd-pj-strip .todo .dot { background: #33190F; color: var(--rd-warn-text); }
.rd-pj-strip .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rd-pj-strip .l { font: 600 13px/1.2 var(--rd-font); } .rd-pj-strip .s { font: 400 12px/1.3 var(--rd-font); color: var(--rd-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-pj-strip .todo .s { color: var(--rd-warn-text); }
.rd-pj-main { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.rd-pj-left { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rd-pj-player { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0F0F13; border: 1px solid #26262D; }
.rd-pj-player video { width: 100%; height: 100%; display: block; background: #000; }
.rd-pj-novideo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; }
.rd-pj-novideo .t { font: 500 16px/1.3 var(--rd-font); } .rd-pj-novideo .s { font: 400 13px/1.5 var(--rd-font); color: var(--rd-subtle); max-width: 360px; }
.rd-pj-vo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #0F0F13; border: 1px solid var(--rd-border); }
.rd-pj-vo .ic { width: 34px; height: 34px; border-radius: 9px; background: #12241C; color: var(--rd-ok); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .rd-pj-vo .ic.dim { background: var(--rd-raised); color: var(--rd-subtle); }
.rd-pj-vo .tx { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; } .rd-pj-vo .t { font: 500 14px/1.3 var(--rd-font); } .rd-pj-vo .s { font: 400 12px/1.3 var(--rd-font); color: var(--rd-subtle); }
.rd-pj-kit { flex: 1 1 340px; max-width: 420px; border-radius: 18px; background: #0F0F13; border: 1px solid var(--rd-border); overflow: hidden; }
.rd-pj-kit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid #1C1C22; font: 600 15px/1.3 var(--rd-font); }
.rd-pj-kit-row { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #16161B; }
.rd-pj-kit-row .h { display: flex; align-items: center; gap: 8px; } .rd-pj-kit-row .k { font: 600 12px/1 var(--rd-font); letter-spacing: .05em; color: var(--rd-faint); } .rd-pj-kit-row .c { font-size: 11px; color: #55555F; } .rd-pj-kit-row .h .rb { margin-left: auto; }
.rd-pj-kit-row .st { margin-left: auto; font: 400 12px/1 var(--rd-font); } .rd-pj-kit-row .st.warn { color: var(--rd-warn-text); } .rd-pj-kit-row .st.ok { color: var(--rd-ok); }
.rd-pj-kit-row .v { font: 400 13px/1.55 var(--rd-font); color: var(--rd-muted); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rd-pj-kit-row .v.title { font-size: 15px; color: var(--rd-text); -webkit-line-clamp: 2; } .rd-pj-kit-row .v i { color: var(--rd-faint); font-style: normal; }
.rd-pj-thumbrow { display: flex; gap: 10px; } .rd-pj-thumbrow img { flex: 1 1 0; min-width: 0; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.rd-pj-drop { flex: 1 1 0; aspect-ratio: 16 / 9; border-radius: 10px; border: 1.5px dashed #33333B; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--rd-subtle); font: 400 12px/1 var(--rd-font); cursor: pointer; }
.rd-pj-thumbrow .acts { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.rd-pj-thumbblock { display: none !important; }
#rd-pj-tabs .rd-tabs { gap: 4px 24px; }
.rd-pj-pane { margin-top: -4px; }
.rd-pj-script { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.rd-pj-article { flex: 999 1 560px; min-width: 0; padding: 32px 40px; border-radius: 18px; background: #0F0F13; border: 1px solid var(--rd-border); display: flex; flex-direction: column; gap: 16px; font: 400 16px/1.75 var(--rd-font); color: #D9D9DE; }
.rd-pj-article p { margin: 0; }
.rd-pj-clip { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #17142B; color: #CFC8FF; font-size: 15px; } .rd-pj-clip .q { flex: 1 1 auto; } .rd-pj-clip .m { font-size: 12px; color: #8E86C8; }
.rd-pj-clip.streamer { background: #12241C; color: #8FD9B6; }
.rd-pj-side { flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; gap: 10px; } .rd-pj-side .rb { justify-content: center; padding: 11px; border-radius: 12px; font-size: 14px; }
#rd-pj-edit { display: flex; flex-direction: column; gap: 16px; } #rd-pj-edit.rd-pane-hidden { display: none; }
#rd-pj-edit .pj-block { padding: 22px; border-radius: 18px; background: #0F0F13; border: 1px solid var(--rd-border); box-shadow: none; }
#rd-pj-edit .pj-block h3 { font: 600 15px/1.3 var(--rd-font); }
.rd-pj-edit-note { display: flex; flex-direction: column; gap: 10px; max-width: 520px; } .rd-pj-edit-note .rb { align-self: flex-start; } .rd-pj-edit-note.hidden { display: none; }
.rd-pj-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rd-pj-file { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #0F0F13; border: 1px solid var(--rd-border); }
.rd-pj-file .ext { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font: 600 10px/1 var(--rd-mono); }
.rd-pj-file .tx { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .rd-pj-file .t { font: 400 14px/1.3 var(--rd-font); } .rd-pj-file .s { font: 400 12px/1.3 var(--rd-font); color: var(--rd-faint); }
#rd-pj-cost .pj-block { max-width: 640px; padding: 0; border-radius: 18px; background: #0F0F13; border: 1px solid var(--rd-border); overflow: hidden; box-shadow: none; }
#rd-pj-cost .pj-block > h3 { display: none; }
#rd-pj-cost .costs { display: flex; flex-direction: column; } #rd-pj-cost .cost-total { padding: 20px 22px; border-bottom: 1px solid #1C1C22; font: 400 30px/1 var(--rd-mono); } #rd-pj-cost .cost-total i { font: 400 13px/1 var(--rd-font); color: var(--rd-subtle); margin-left: 10px; }
#rd-pj-cost .cost-row { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid #16161B; font-size: 14px; } #rd-pj-cost .cost-row span { flex: 1 1 auto; color: #C9C9D0; } #rd-pj-cost .cost-row em { font-style: normal; font-size: 12px; color: var(--rd-faint); } #rd-pj-cost .cost-row b { width: 64px; text-align: right; font: 400 14px/1 var(--rd-mono); }
#rd-pj-cost .cost-row.total { background: var(--rd-raised); }
#rd-pj-cost [data-pj="costs"].rd-empty { padding: 28px 22px; }
@media (max-width: 760px) {
  .rd-pj-title h1 { font-size: 24px; } .rd-pj-acts { width: 100%; } .rd-pj-acts .rb-light { flex: 1 1 auto; justify-content: center; }
  .rd-pj-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-pj-strip button { border-left: 0; border-top: 1px solid #1C1C22; } .rd-pj-strip button:nth-child(-n+2) { border-top: 0; }
  .rd-pj-kit { max-width: none; } .rd-pj-article { padding: 20px; font-size: 15px; } .rd-pj-side { max-width: none; } .rd-pj-files { grid-template-columns: 1fr; }
}

/* edit agent: the legacy segmented wrappers clipped the option cards */
.rd-hide { display: none !important; }
.rd-agx .ag-seg { height: auto !important; min-height: 0 !important; overflow: visible !important; }
.rd-agx #ag-up-vis.ag-seg { display: flex !important; }
.rd-agx #ag-days button { height: auto !important; }
.rd-agx .ag-up-head .ag-lbl { text-transform: none !important; letter-spacing: 0 !important; }
.rd-agx #ag-up-whendone { display: none !important; }
.rd-agx .ag-adv { border-top: 0 !important; padding-top: 0 !important; margin: 0 !important; }
.rd-agx .ag-adv-body { padding-top: 0 !important; animation: none !important; }
.rd-agx .ag-f > .ag-lbl + .rd-agx-presets { margin-top: 2px; }

.rd-agx #ag-adv .ag-lbl, .rd-agx .ag-up-defaults .ag-lbl { text-transform: none !important; letter-spacing: 0 !important; }
.rd-agx #ag-adv .sw-toggle .sw-lbl { display: inline; font: 400 13px/1 var(--rd-font); color: var(--rd-muted); margin-left: 8px; }
.rd-agx .ag-up-status { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0 !important; border: 0 !important; background: transparent !important; margin: 0 !important; }
.rd-agx .ag-up-row { display: inline-flex !important; width: auto !important; margin: 0 !important; }
.rd-agx .ag-up-row span { font: inherit; }

/* ---------- 22. brand mark: favicon-matching mark in the sidebar rail and on the login page ---------- */
.am-mark { width: 26px; height: 26px; vertical-align: middle; display: inline-block; }
.logo-wordmark .am-mark { margin-right: 10px; vertical-align: -7px; }
.sb-brand .sb-mark { display: none; }
.app.collapsed .sb-brand::before { content: none; }
.app.collapsed .sb-brand { background: transparent; }
.app.collapsed .sb-brand .sb-mark { display: block; width: 32px; height: 32px; margin: 0; }
.rd-intro-replay { margin-left: auto; font: 400 12px/1 var(--rd-font); color: var(--rd-link); text-decoration: none; } .rd-intro-replay.hidden { display: none; }

/* ---------- 23. sign-in page (Signin.dc.html) ---------- */
#gate-wrap.rd-signin { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; min-height: 100dvh; background: #09090B; color: #EDEDF0; font-family: var(--rd-font); }
#gate-wrap.rd-signin.hidden { display: none; }
.rd-signin .blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.rd-signin .b1 { width: 620px; height: 620px; left: -160px; top: -200px; background: rgba(107,91,240,.32); animation: siDrift1 18s ease-in-out infinite alternate; }
.rd-signin .b2 { width: 520px; height: 520px; left: 420px; bottom: -260px; background: rgba(139,124,255,.18); animation: siDrift2 22s ease-in-out infinite alternate; }
@keyframes siDrift1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(120px,80px) scale(1.15); } }
@keyframes siDrift2 { 0% { transform: translate(0,0) scale(1.1); } 100% { transform: translate(-140px,-60px) scale(.95); } }
.si-left { position: relative; flex: 999 1 560px; min-width: 0; box-sizing: border-box; padding: 48px 64px; display: flex; flex-direction: column; gap: 40px; }
.si-brand { display: flex; align-items: center; gap: 12px; } .si-brand .logo-wordmark { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.si-mark .sl { animation: siSlin 1.1s cubic-bezier(.2,.8,.2,1) both; } .si-mark .s1 { --fx: -90px; animation-delay: .1s; } .si-mark .s2 { --fx: 110px; animation-delay: .22s; } .si-mark .s3 { --fx: -90px; animation-delay: .34s; }
@keyframes siSlin { 0% { transform: translateX(var(--fx)); opacity: 0; filter: blur(6px); } 100% { transform: none; opacity: 1; filter: none; } }
.si-story { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: 600px; }
.si-story h1 { margin: 0; font: 600 60px/1.02 var(--rd-font); letter-spacing: -.04em; } .si-story h1 em { font: 500 60px/1.02 var(--rd-font); letter-spacing: -.04em; }
.si-story p { margin: 0; font: 400 17px/1.6 var(--rd-font); color: #A1A1AA; }
.rise { animation: siRise .9s cubic-bezier(.2,.8,.2,1) both; } @keyframes siRise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
.si-demo { padding: 18px; border-radius: 20px; background: rgba(16,16,20,.75); border: 1px solid #222228; display: flex; flex-direction: column; gap: 14px; }
.si-demo-head { display: flex; align-items: center; gap: 10px; } .si-demo-head .av { width: 26px; height: 26px; border-radius: 50%; background: #B8902F; flex: 0 0 auto; } .si-demo-head .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .si-demo-head .tx b { font: 600 13px/1.3 var(--rd-font); } .si-demo-head .tx span { font: 400 12px/1.3 var(--rd-font); color: #8B8B95; }
.si-demo-head .live { margin-left: auto; display: flex; align-items: center; gap: 6px; font: 400 11px/1 var(--rd-font); color: #8FD9B6; } .si-demo-head .live i { width: 6px; height: 6px; border-radius: 50%; background: #3DDC97; }
.si-bar { height: 4px; border-radius: 2px; background: #1C1C22; overflow: hidden; } .si-bar .fill { height: 4px; border-radius: 2px; background: linear-gradient(90deg,#6B5BF0,#B4AAFF); animation: siFill 7s ease infinite; }
@keyframes siFill { 0% { width: 0%; opacity: 1; } 66%,86% { width: 100%; opacity: 1; } 93%,100% { width: 100%; opacity: 0; } }
.si-stages { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; } .si-stages span { padding: 9px 0; text-align: center; border-radius: 10px; border: 1px solid #222228; font: 500 12px/1 var(--rd-font); background: #17171C; color: #6E6E78; }
.si-stages .st0 { animation: siSt0 7s ease infinite; } .si-stages .st1 { animation: siSt1 7s ease infinite; } .si-stages .st2 { animation: siSt2 7s ease infinite; } .si-stages .st3 { animation: siSt3 7s ease infinite; } .si-stages .st4 { animation: siSt4 7s ease infinite; }
@keyframes siSt0 { 0%,1% { background: #17171C; color: #6E6E78; border-color: #222228; } 4%,86% { background: #1A1730; color: #EDEDF0; border-color: #4A4380; } 93%,100% { background: #17171C; color: #6E6E78; border-color: #222228; } }
@keyframes siSt1 { 0%,15% { background: #17171C; color: #6E6E78; border-color: #222228; } 18%,86% { background: #1A1730; color: #EDEDF0; border-color: #4A4380; } 93%,100% { background: #17171C; color: #6E6E78; border-color: #222228; } }
@keyframes siSt2 { 0%,30% { background: #17171C; color: #6E6E78; border-color: #222228; } 33%,86% { background: #1A1730; color: #EDEDF0; border-color: #4A4380; } 93%,100% { background: #17171C; color: #6E6E78; border-color: #222228; } }
@keyframes siSt3 { 0%,45% { background: #17171C; color: #6E6E78; border-color: #222228; } 48%,86% { background: #1A1730; color: #EDEDF0; border-color: #4A4380; } 93%,100% { background: #17171C; color: #6E6E78; border-color: #222228; } }
@keyframes siSt4 { 0%,60% { background: #17171C; color: #6E6E78; border-color: #222228; } 63%,86% { background: #0F2A1F; color: #5BE3A8; border-color: #1F5A40; } 93%,100% { background: #17171C; color: #6E6E78; border-color: #222228; } }
.si-reel { position: relative; overflow: hidden; margin: 0 -64px; } .si-reel .fade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg,#09090B,transparent 12%,transparent 88%,#09090B); }
.si-reel .marq { display: flex; gap: 14px; width: max-content; padding: 0 64px; animation: siMarq 46s linear infinite; } @keyframes siMarq { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* The reel is real thumbnails and nothing else: no title over them, no channel name under them. The images
   come from signin-thumbnails/ via scripts/signin_thumbs.py and the page reads the folder at run time. */
.si-reel-card { width: 220px; flex-shrink: 0; }
.si-reel-card img { display: block; width: 220px; height: 124px; object-fit: cover; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06); background: #141419; }
.si-foot { font: 400 11px/1 var(--rd-font); letter-spacing: .14em; color: #4A4A54; }
.si-right { position: relative; flex: 1 1 440px; max-width: 560px; box-sizing: border-box; padding: 48px; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255,255,255,.04); background: rgba(9,9,11,.55); }
.si-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 22px; }
.si-beta { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #13102A; border: 1px solid #2E2A55; font: 600 12px/1 var(--rd-font); letter-spacing: .04em; color: #C5BDFF; } .si-beta i { width: 6px; height: 6px; border-radius: 50%; background: #8B7CFF; }
.si-title { display: flex; flex-direction: column; gap: 8px; } .si-title h2 { margin: 0; font: 600 32px/1.15 var(--rd-font); letter-spacing: -.03em; color: #EDEDF0; } .si-title span { font: 400 14px/1.6 var(--rd-font); color: #8B8B95; }
.si-form { display: flex; flex-direction: column; gap: 8px; } .si-form label { font: 400 13px/1.3 var(--rd-font); color: #A1A1AA; }
.si-field { position: relative; } .si-field .lock { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #55555F; }
.si-field input { width: 100%; box-sizing: border-box; padding: 15px 44px 15px 16px !important; border-radius: 12px !important; background: #121216 !important; border: 1px solid #26262D !important; color: #EDEDF0 !important; font: 400 17px/1.2 var(--rd-mono) !important; letter-spacing: .12em; transition: border-color .2s ease, box-shadow .2s ease; }
.si-field input::placeholder { color: #5E5E68; letter-spacing: .12em; }
.si-field input:focus { outline: none; border-color: #6B5BF0 !important; box-shadow: 0 0 0 4px rgba(107,91,240,.18); }
.si-field.bad input { border-color: #7A3428 !important; } .si-field.good input { border-color: #2FB37A !important; }
.si-field.shake { animation: siShake .45s cubic-bezier(.36,.07,.19,.97) both; } .si-field.shake2 { animation: siShake2 .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes siShake { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-7px); } 40%,60% { transform: translateX(7px); } }
@keyframes siShake2 { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-7px); } 40%,60% { transform: translateX(7px); } }
.si-err { font: 400 13px/1.4 var(--rd-font); color: #FF9B80; } .si-err.hidden { display: none; }
.si-form .cta { position: relative; overflow: hidden; margin-top: 14px; padding: 14px; border-radius: 12px; background: #6B5BF0; border: 0; color: #fff; font: 600 15px/1 var(--rd-font); cursor: pointer; box-shadow: 0 10px 30px rgba(107,91,240,.35); }
.si-form .cta.hidden { display: none; } .si-form .cta:disabled { opacity: .7; cursor: progress; }
.si-form .cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transform: skewX(-20deg); animation: siShine 4.5s ease-in-out 1.5s infinite; } @keyframes siShine { 0% { left: -40%; } 22%,100% { left: 130%; } }
.si-ok { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 12px; background: #2FB37A; color: #04140C; font: 600 15px/1 var(--rd-font); } .si-ok.hidden { display: none; }
.si-hr { height: 1px; background: #1A1A20; }
.si-none { display: flex; flex-direction: column; gap: 6px; } .si-none b { font: 500 14px/1.3 var(--rd-font); } .si-none span { font: 400 13px/1.6 var(--rd-font); color: #8B8B95; } .si-none a { align-self: flex-start; margin-top: 4px; font: 400 13px/1 var(--rd-font); color: #B4AAFF; } .si-none a:hover { color: #D6D0FF; }
.si-none .rd-intro-replay { margin-left: 0; }
#legacy-auth { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px dashed #26262D; } #legacy-auth.hidden { display: none; }
#legacy-auth::before { content: "Legacy password sign in (rollback flag)"; font: 600 11px/1 var(--rd-font); letter-spacing: .08em; text-transform: uppercase; color: #6E6E78; }
#gate-wrap.formout { animation: siFormout .45s cubic-bezier(.4,0,.2,1) both; pointer-events: none; } @keyframes siFormout { to { opacity: 0; transform: scale(.96); filter: blur(6px); } }
@media (max-width: 900px) { .si-left { padding: 28px 24px; gap: 24px; flex-basis: 100%; } .si-story { gap: 18px; } .si-story h1 { font-size: 40px; } .si-story h1 em { font-size: 48px; } .si-reel { margin: 0 -24px; } .si-reel .marq { padding: 0 24px; } .si-right { max-width: none; flex-basis: 100%; border-left: 0; border-top: 1px solid rgba(255,255,255,.04); padding: 28px 20px 40px; } .si-form .cta, .si-field input { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { .rd-signin *, .rd-signin *::after { animation: none !important; } .rise, .si-mark .sl { opacity: 1; transform: none; } }

/* ---------- 24. the logo intro (Intro.dc.html): --rd-intro-dur, transforms + opacity + filter only ----------
   Same animation it always was — the three mark slices fly in, the blade snaps them together, the halo pulses and
   the wordmark rises — just run against the token so one number sets the length everywhere. */
.rd-intro { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: radial-gradient(circle at 50% 46%, #17142B, #09090B 60%); cursor: pointer; overflow: hidden; }
.rd-intro.ov { animation: rdOv var(--rd-intro-dur) cubic-bezier(.4,0,.2,1) both; animation-delay: var(--at, 0s); will-change: transform, opacity; }
@keyframes rdOv { 0% { opacity: 0; } 12% { opacity: 1; } 74% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.1); } }
.rd-intro.out { animation: none; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.rd-intro.frozen, .rd-intro.frozen * { animation-play-state: paused !important; }
.rd-intro-stage { position: relative; width: 240px; height: 240px; }
.rd-intro .halo { position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(139,124,255,.55), transparent); animation: rdHalo var(--rd-intro-dur) ease both; animation-delay: var(--at, 0s); }
@keyframes rdHalo { 0%,40% { opacity: 0; transform: scale(.6); } 58% { opacity: 1; transform: scale(1.15); } 74% { opacity: .6; transform: scale(1); } 100% { opacity: 0; } }
.rd-intro-mark { position: relative; display: block; width: 240px; height: 240px; overflow: visible; }
.rd-intro-mark .i1, .rd-intro-mark .i2, .rd-intro-mark .i3 { animation-duration: var(--rd-intro-dur); animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-fill-mode: both; animation-delay: var(--at, 0s); will-change: transform, opacity, filter; }
.rd-intro-mark .i1 { animation-name: rdI1; } .rd-intro-mark .i2 { animation-name: rdI2; } .rd-intro-mark .i3 { animation-name: rdI3; }
@keyframes rdI1 { 0%,6% { transform: translateX(-900px); opacity: 0; filter: blur(10px); } 28% { transform: translateX(-60px); opacity: 1; filter: blur(0); } 40% { transform: translateX(-60px); } 44% { transform: translateX(8px); } 48%,100% { transform: none; } }
@keyframes rdI2 { 0%,10% { transform: translateX(1000px); opacity: 0; filter: blur(10px); } 32% { transform: translateX(90px); opacity: 1; filter: blur(0); } 44% { transform: translateX(90px); } 48% { transform: translateX(-10px); } 52%,100% { transform: none; } }
@keyframes rdI3 { 0%,14% { transform: translateX(-900px); opacity: 0; filter: blur(10px); } 36% { transform: translateX(-40px); opacity: 1; filter: blur(0); } 48% { transform: translateX(-40px); } 52% { transform: translateX(6px); } 56%,100% { transform: none; } }
.rd-intro .blade { position: absolute; top: -30px; bottom: -30px; left: -6%; width: 3px; border-radius: 2px; background: #fff; opacity: 0; box-shadow: 0 0 16px #fff, 0 0 40px #8B7CFF; animation: rdBlade var(--rd-intro-dur) cubic-bezier(.45,0,.55,1) both; animation-delay: var(--at, 0s); }
@keyframes rdBlade { 0%,36% { left: -6%; opacity: 0; } 39% { opacity: 1; } 58% { left: 104%; opacity: 1; } 61%,100% { left: 104%; opacity: 0; } }
.rd-intro .wm { font: 600 30px/1 var(--rd-font); color: #EDEDF0; opacity: 0; animation: rdWm var(--rd-intro-dur) cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--at, 0s); } .rd-intro .wm span { color: #B4AAFF; }
@keyframes rdWm { 0%,56% { opacity: 0; transform: translateY(16px); letter-spacing: .2em; } 70%,100% { opacity: 1; transform: none; letter-spacing: -.01em; } }
.rd-intro-skip { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font: 400 12px/1 var(--rd-font); color: #55555F; opacity: 0; animation: rdSkip var(--rd-intro-dur) linear both; animation-delay: var(--at, 0s); }
@keyframes rdSkip { 0%,20% { opacity: 0; } 30%,70% { opacity: 1; } 80%,100% { opacity: 0; } }
.rd-intro.reduced, .rd-intro.reduced * { animation: none !important; } .rd-intro.reduced { animation: rdIntroFade .5s ease-in .05s both !important; } .rd-intro.reduced .wm { opacity: 1; }
@keyframes rdIntroFade { 0%,40% { opacity: 1; } 100% { opacity: 0; } }
#app.rd-appin { animation: rdAppin .7s cubic-bezier(.2,.8,.2,1) calc(var(--rd-intro-dur) * .71) both; }
@keyframes rdAppin { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
#app.rd-appin .sb-nav a { animation: rdUp .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--rd-intro-dur) * .71 + var(--i, 0) * .05s); }
#app.rd-appin #rd-home > * { animation: rdUp .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--rd-intro-dur) * .76 + var(--i, 0) * .06s); }
@keyframes rdUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .rd-intro-stage, .rd-intro-mark { width: 160px; height: 160px; } .rd-intro .wm { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { #app.rd-appin, #app.rd-appin .sb-nav a, #app.rd-appin #rd-home > * { animation: none !important; } }

/* ---------- 25. Admin: access codes ---------- */
.rd-acx-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 140px auto; gap: 12px; align-items: end; }
.rd-acx-form .rb-primary { height: 42px; }
.rd-acx-new { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: #13102A; border: 1px solid #2E2A55; display: flex; flex-direction: column; gap: 10px; } .rd-acx-new.hidden { display: none; }
.rd-acx-new .k { font: 400 13px/1.4 var(--rd-font); color: var(--rd-soft); } .rd-acx-new .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rd-acx-new code { font: 500 20px/1 var(--rd-mono); letter-spacing: .1em; color: #fff; padding: 10px 14px; border-radius: 10px; background: rgba(0,0,0,.35); }
.rd-acx-rows { display: flex; flex-direction: column; }
.rd-acx-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 110px repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rd-hair-2); font-size: 13px; }
.rd-acx-row:first-child { border-top: 0; } .rd-acx-row.off { opacity: .55; }
.rd-acx-row .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rd-acx-row .who b { font: 500 14px/1.3 var(--rd-font); } .rd-acx-row .who span { color: var(--rd-subtle); font-size: 12px; }
.rd-acx-row .meta { color: var(--rd-muted); } .rd-acx-row .danger { color: var(--rd-danger-text); }
@media (max-width: 900px) { .rd-acx-form { grid-template-columns: 1fr; } .rd-acx-row { grid-template-columns: 1fr 1fr; } }

/* ---------- 26. round 6: Notifications tab, Home background, agent card spacing, Script Writer layout ---------- */
.rd-hidden, .rd-writer.hidden { display: none !important; }
/* Settings > Notifications */
.rd-tg { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.rd-tg-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rd-tg-tile { width: 40px; height: 40px; border-radius: 10px; background: #2A8BD0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rd-tg-top .grow { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-tg-top .t { font: 600 16px/1.3 var(--rd-font); color: var(--rd-text); }
.rd-tg-top .s { font: 400 13px/1.4 var(--rd-font); color: var(--rd-subtle); }
.rd-tg-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rd-tg-acts .rb-secondary, .rd-tg-acts .rb-ghost { padding: 8px 12px; border-radius: 10px; font-size: 13px; }
.rd-tg-adv.forced > summary { display: none; }
.rd-tg-adv[open] > summary { margin-bottom: 12px; }
.rd-tg-setup { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--rd-inset); border: 1px solid var(--rd-border); }
.rd-tg-setup #st-tg-instr { display: block; font: 400 13px/1.5 var(--rd-font); color: var(--rd-subtle); }
.rd-tg-setup .rd-tg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 !important; }
.rd-tg-setup .rd-tg-row .key-input { flex: 1 1 220px; min-width: 0; }
.rd-tg-msgs { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.rd-tg-msgs:empty { display: none; }
.rd-tg-msgs .soon, .rd-tg-msgs .key-status { font: 400 13px/1.5 var(--rd-font); color: var(--rd-subtle); margin: 0; }
.rd-tg-msgs > :empty { display: none; }
.rd-nlist { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.rd-nrow { display: flex; align-items: center; gap: 16px; padding: 16px 24px; min-height: 72px; box-sizing: border-box; border-top: 1px solid var(--rd-hair-2); }
.rd-nrow:first-child { border-top: 0; }
.rd-nrow .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-nrow .t { font: 400 14px/1.3 var(--rd-font); color: var(--rd-text); }
.rd-nrow .s { font: 400 12px/1.4 var(--rd-font); color: var(--rd-subtle); }
.rd-nrow .sw-toggle { flex: 0 0 auto; gap: 0; }
.rd-nrow .sw-toggle .sw-lbl { display: none; }
.rd-nrow.off .t, .rd-nrow.off .s { opacity: .5; }
@media (max-width: 760px) { .rd-tg { padding: 16px; } .rd-tg-acts { width: 100%; } .rd-nrow { padding: 12px 16px; min-height: 64px; } }

/* Home: three soft violet blobs drifting behind the content + a faint grain. Transforms only, nothing clickable. */
body[data-screen="home"] .page[data-page="home"] { position: relative; }
.rd-home-bg { position: absolute; inset: -32px -40px -56px; overflow: hidden; pointer-events: none; z-index: 0; }
.rd-home-bg .b { position: absolute; border-radius: 50%; width: 720px; height: 720px; will-change: transform; }
/* Near-black, with a hint of lavender in ONE corner. There were three glows at .22, .16 and .14 spread
   across the page; this is a fifth of that strength, in the top left only, so the composer sits on a quiet
   background instead of inside a purple cloud. */
.rd-home-bg .b1 { top: -220px; left: -160px; background: radial-gradient(closest-side, rgba(107, 91, 240, .045), rgba(107, 91, 240, 0) 72%); animation: rdDriftA 28s ease-in-out infinite alternate; }
.rd-home-bg .b2, .rd-home-bg .b3 { display: none; }
.rd-home-bg .grain { position: absolute; inset: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; }
@keyframes rdDriftA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(140px, 90px, 0) scale(1.12); } }
@keyframes rdDriftB { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-160px, -70px, 0) scale(.95); } }
@keyframes rdDriftC { from { transform: translate3d(0, 0, 0) scale(.95); } to { transform: translate3d(-110px, -120px, 0) scale(1.1); } }
body[data-screen="home"] #rd-home { position: relative; }   /* no z-index: the stats panel + its backdrop must share the root stacking context */
@media (prefers-reduced-motion: reduce) { .rd-home-bg .b { animation: none !important; } }
@media (max-width: 760px) { .rd-home-bg { inset: -24px -16px -64px; } .rd-home-bg .b { width: 460px; height: 460px; } .rd-home-bg .b2 { width: 520px; height: 520px; } }
/* Founder: the logo mark instead of the crown, other roles keep their badge */
.profile .crown:not(.hidden) { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 0; line-height: 0; color: transparent; vertical-align: -2px; background: none; flex: 0 0 auto; margin-top: 0; overflow: visible; }

/* Agents: one spacing scale (8/12/16/24), toggle beside the name, stats + buttons on one footer row, equal card heights */
.ag-list { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 12px; }
.ag-card { gap: 12px; padding: 24px; }
.ag-top { gap: 12px; }
.ag-top .ag-who { gap: 12px; }
.ag-top .sw-toggle { flex: 0 0 auto; margin-left: 4px; color: var(--rd-muted); font-size: 13px; align-self: flex-start; margin-top: 0; }
.ag-top .ag-pill { align-self: flex-start; margin-top: -1px; }
.ag-top .sw-toggle input:checked { background: var(--rd-ok-toggle); }
.ag-card .ag-actions { margin-top: auto; padding-top: 16px; gap: 8px; flex-wrap: wrap; }
.ag-actions .ag-meta { flex: 1 1 auto; min-width: 0; gap: 8px 16px; align-items: center; }
.ag-actions .ag-spacer { flex: 0 0 0; }
.ag-actions > .rb, .ag-actions > .btn { flex: 0 0 auto; }
@media (max-width: 760px) { .ag-card { padding: 16px; } .ag-actions .ag-meta { flex-basis: 100%; } .ag-top .sw-toggle .sw-lbl { display: none; } }

/* Tools > Script Writer: page header, form 60% / Scripts 40%, stacked under 1100px */
.rd-writer { display: flex; flex-direction: column; gap: 0; margin-bottom: 32px; }
.rd-tools.rd-writer-on > .rd-page-head, .rd-tools.rd-writer-on > .rd-tool-grid, .rd-tools.rd-writer-on > #rd-tool-head { display: none; }
.rd-writer-head { margin-bottom: 24px; }
/* Inputs on the left, the finished script on the right. They were stacked in one column before, which put
   the script below the fold on every screen. */
.rd-writer-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rd-writer-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: sticky; top: 18px; }
.rd-writer-side .rd-sw-out textarea { min-height: 420px; }
.rd-writer-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rd-writer-side { min-width: 0; }
.rd-writer-side .rd-scripts { margin: 0; padding: 24px; border-radius: 20px; background: var(--rd-card); border: 1px solid var(--rd-border); display: flex; flex-direction: column; gap: 16px; min-height: 320px; box-sizing: border-box; }
.rd-writer-side .rd-scripts .rd-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rd-writer-side .rd-scripts-grid { grid-template-columns: minmax(0, 1fr); }
.rd-writer-side .rd-script-card { background: var(--rd-inset); }
.rd-writer-side .rd-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 24px 16px; }
.rd-sw-form .rd-sw-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rd-sw-form .rd-field .k { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.rd-sw-form .rd-sw-row { gap: 12px; }
.rd-sw-form .rd-sw-row .rd-check { flex: 1 1 220px; }
.rd-sw-form #rd-sw-go { margin-left: auto; }
@media (max-width: 1100px) {
  .rd-writer-cols { grid-template-columns: minmax(0, 1fr); }
  .rd-writer-side { position: static; }                /* one column on a phone: nothing sticks, nothing overlaps */
  .rd-writer-side .rd-scripts { min-height: 0; }
  .rd-writer-side .rd-sw-out textarea { min-height: 300px; }
}
@media (max-width: 760px) { .rd-writer-side .rd-scripts { padding: 16px; } }

/* ---------- 27. Home: Ready to upload empty state + the 48 h / not-uploaded display rule lives in screens.js ---------- */

/* ---------- 28. round 10 ---------- */
/* 1. founder mark: 14 px, glyph zoomed to the box, the middle slice idles every 9 s (0.8 s ease-in-out + a soft violet pulse) */
.rd-crown-mark { width: 14px; height: 14px; display: block; overflow: visible; transform: scale(1.9); transform-origin: 50% 50%; }
.rd-crown-mark .s2 { animation: rdCrownSlide 9s ease-in-out infinite; }
.rd-crown-mark .s2 path { animation: rdCrownGlow 9s ease-in-out infinite; }
@keyframes rdCrownSlide { 0%, 90%, 100% { transform: translateX(0); } 94.5% { transform: translateX(120px); } }
@keyframes rdCrownGlow { 0%, 89%, 100% { filter: drop-shadow(0 0 0 rgba(139, 124, 255, 0)); } 94.5% { filter: drop-shadow(0 0 90px rgba(139, 124, 255, .95)); } }
@media (prefers-reduced-motion: reduce) { .rd-crown-mark .s2, .rd-crown-mark .s2 path { animation: none !important; } }
/* 2. Home stats panel: violet backdrop from the right + blur, 200 ms fade/slide, click or Esc closes (screens.js) */
.rd-hs-backdrop { position: fixed; inset: 0; z-index: 40; background: linear-gradient(270deg, rgba(107, 91, 240, .34) 0%, rgba(107, 91, 240, .14) 36%, rgba(107, 91, 240, 0) 72%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: rdFadeIn .2s ease both; }
.rd-hs-backdrop.hidden { display: none; }
#rd-home-stats-slot .hs { position: relative; z-index: 41; }
#rd-home-stats-slot .hs-pill { position: relative; z-index: 43; }
#rd-home-stats-slot .hs-panel { animation: rdPanelIn .2s cubic-bezier(.2, .8, .2, 1) both; }   /* keeps its own position: absolute; z-index: 60 — above the 40 backdrop */
@keyframes rdPanelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes rdFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rd-hs-backdrop, #rd-home-stats-slot .hs-panel { animation: none !important; } }
/* 7. Video page (Project.dc.html): 1200 px column, player card capped, every media element constrained */
.rd-pj { max-width: 1200px; margin: 0 auto; }
.rd-pj-player { max-width: 960px; }
.rd-pj img, .rd-pj video, .page[data-page="project"] img, .page[data-page="project"] video { max-width: 100%; height: auto; }
.rd-pj-player img, .rd-pj-player video { width: 100%; height: 100%; object-fit: cover; }
#rd-pj-ch .rd-av { width: 22px; height: 22px; font-size: 10px; line-height: 22px; }
/* 3. Videos: In production + Ready to upload above the spreadsheet (the only list view) */
.rd-videos-top { display: flex; flex-direction: column; gap: 32px; margin-bottom: 28px; }
.rd-videos-top.hidden { display: none; }
.rd-videos-top > .rd-section.hidden { display: none; }
.rd-videos-top:not(:has(> .rd-section:not(.hidden))) { display: none; }
body[data-screen="videos"] .page[data-page="library"] { display: none !important; }
/* 4. Spreadsheet: row ··· menu + the multi-select delete bar */
#sheet-body .sheet-row .sc.title { position: relative; }
.rd-rowmore { flex: 0 0 auto; width: 28px; height: 26px; margin-left: 4px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--rd-subtle); font: 600 13px/1 var(--rd-font); letter-spacing: .08em; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
#sheet-body .sheet-row:hover .rd-rowmore, .rd-rowmore:focus-visible, .rd-rowmore:has(+ .rd-row-menu) { opacity: 1; }
.rd-rowmore:hover { background: var(--rd-raised-2); color: var(--rd-text); border-color: var(--rd-border-3); }
.rd-row-menu { position: absolute; right: 8px; top: calc(100% - 4px); z-index: 30; min-width: 170px; }
.rd-menu-item.danger { color: var(--rd-err-text); }
.rd-sheet-bulk { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 999px; background: #17171C; border: 1px solid var(--rd-border-3); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); font: 500 13px/1 var(--rd-font); color: var(--rd-text); animation: rdPanelIn .18s ease both; }
.rd-sheet-bulk.hidden { display: none; }
.rb-danger { padding: 8px 12px; border-radius: 9px; background: #3A1512; border: 1px solid #5A2420; color: #FFB4A8; font: 600 12px/1 var(--rd-font); }
.rb-danger:hover { background: #4A1A16; }
@media (max-width: 760px) { .rd-rowmore { opacity: 1; } .rd-sheet-bulk { bottom: calc(72px + env(safe-area-inset-bottom) + 12px); } }
/* 8. Script Writer, Celebrity: link rows with fetched, editable transcripts */
.rd-sw-celeb { gap: 10px; }
.rd-sw-links { display: flex; flex-direction: column; gap: 10px; }
.rd-sw-link { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--rd-inset); border: 1px solid var(--rd-border); }
.rd-sw-link .lk-head { display: flex; align-items: center; gap: 8px; }
.rd-sw-link .lk-n { flex: 0 0 auto; font: 500 12px/1 var(--rd-font); color: var(--rd-subtle); min-width: 44px; }
.rd-sw-link .lk-url { flex: 1 1 200px; min-width: 0; }
.rd-sw-link .lk-text { width: 100%; box-sizing: border-box; font: 400 13px/1.55 var(--rd-font); min-height: 96px; }
.rd-sw-link[data-state="busy"] .lk-state { color: var(--rd-soft); }
.rd-sw-link[data-state="done"] .lk-state { color: var(--rd-ok-text); }
.rd-sw-link .lk-state:empty { display: none; }
@media (max-width: 760px) { .rd-sw-link .lk-head { flex-wrap: wrap; } .rd-sw-link .lk-url { flex-basis: 100%; order: 3; } }
/* 9. Home composer link chips */
.rd-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px 4px; }
.rd-links.hidden { display: none; }
.rd-linkchip { display: inline-flex; align-items: center; gap: 8px; max-width: 320px; padding: 4px 6px 4px 4px; border-radius: 10px; background: var(--rd-raised-2); border: 1px solid var(--rd-border-3); font: 400 12px/1.3 var(--rd-font); color: var(--rd-text); }
.rd-linkchip img { width: 44px; height: 26px; border-radius: 6px; object-fit: cover; background: #1C1C24; flex: 0 0 auto; }
.rd-linkchip .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-linkchip.loading .t { color: var(--rd-subtle); }
.rd-linkchip .x { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; border: 0; background: transparent; color: var(--rd-subtle); font: 500 15px/1 var(--rd-font); cursor: pointer; }
.rd-linkchip .x:hover { background: var(--rd-raised); color: var(--rd-text); }
#rd-addlink { padding: 7px 10px; }
/* 5. sign in: two modes, card shake, unlocked account fields */
.si-switch { display: flex; padding: 4px; border-radius: 12px; background: #0F0F13; border: 1px solid #26262D; align-self: stretch; }
.si-switch button { flex: 1 1 0; padding: 9px 0; border: 0; border-radius: 9px; background: transparent; color: #A1A1AA; font: 500 13px/1 var(--rd-font); cursor: pointer; transition: background .14s, color .14s; }
.si-switch button.on { background: #1C1C24; color: #EDEDF0; }
.si-form.hidden { display: none; }
.si-form label em { font-style: normal; color: #6E6E78; margin-left: 6px; }
.si-form .si-field input::placeholder { letter-spacing: 0; }
#reg-code::placeholder, #code::placeholder { letter-spacing: .12em; }
.si-alt { margin-top: 12px; align-self: center; font: 400 13px/1.3 var(--rd-font); color: #8B8B95; text-decoration: none; }
.si-alt:hover { color: #D6D0FF; }
.si-more { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.si-more.hidden { display: none; }
.si-more > .si-ok { margin-bottom: 6px; }
.si-err.ok { color: #3DDC97; }
.si-card.shake { animation: siShake .45s cubic-bezier(.36,.07,.19,.97) both; }
/* 3. the sheet keeps a real height when In production / Ready to upload sit above it */
#rd-videos-top:has(> .rd-section:not(.hidden)) ~ .page[data-page="sheet"] { min-height: 600px !important; }
body:has(#rd-preview-bar) .rd-sheet-bulk { bottom: 96px; }   /* the preview bar sits in the same spot */

.sheet-head span:nth-child(n+4):nth-child(-n+9) { justify-content: center !important; padding: 0 4px !important; white-space: normal; text-align: center; line-height: 1.15; font-size: 10.5px !important; letter-spacing: .06em; overflow: hidden; display: flex !important; align-items: center; }

/* ---------- 29. round 12 ---------- */
/* 1. Home fills the viewport: background behind everything, greeting + composer + chips centred in the free space */
body[data-screen="home"] .page[data-page="home"].active { min-height: calc(100vh - 88px); display: flex; flex-direction: column; }
body[data-screen="home"] #rd-home { flex: 1 1 auto; display: flex; flex-direction: column; min-height: calc(100vh - 88px); gap: 24px; width: 100%; }
body[data-screen="home"] #rd-home > .rd-home-top { flex: 0 0 auto; }
body[data-screen="home"] #rd-home > .rd-composer-wrap { margin: auto 0; width: 100%; }
body[data-screen="home"] #rd-home > .rd-home-ro { margin: 0 auto auto; }
@media (max-width: 760px) { body[data-screen="home"] .page[data-page="home"], body[data-screen="home"] #rd-home { min-height: calc(100dvh - 88px - 56px - 72px); } }
/* 2. founder mark: 12 px tall, on the text baseline, 6 px before the handle */
.profile .crown:not(.hidden) { width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.rd-crown-mark { width: 12px; height: 12px; }
.profile .handle-line { gap: 0; }
/* 3. sign in: normal UI font in the inputs, dark autofill, code fields stay mono */
.si-field input { font: 400 15px/1.3 var(--rd-font) !important; letter-spacing: 0 !important; }
.si-field input::placeholder { letter-spacing: 0; font-family: var(--rd-font); }
#code, #reg-code { font-family: var(--rd-mono) !important; letter-spacing: .12em !important; text-transform: uppercase; }
#code::placeholder, #reg-code::placeholder { letter-spacing: .12em; font-family: var(--rd-mono); }
.si-field input:-webkit-autofill, .si-field input:-webkit-autofill:hover, .si-field input:-webkit-autofill:focus, .si-field input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #121216 inset !important; box-shadow: 0 0 0 1000px #121216 inset !important; -webkit-text-fill-color: #EDEDF0 !important; caret-color: #EDEDF0; border: 1px solid #26262D !important; transition: background-color 9999s ease-out 0s; }
.si-field input:-webkit-autofill:focus { border-color: #6B5BF0 !important; }
.si-field input:autofill { box-shadow: 0 0 0 1000px #121216 inset; -webkit-text-fill-color: #EDEDF0; }
/* 4 + 5a. the Videos chrome exists only on Videos; the cards only in the Grid view */
body:not([data-screen="videos"]) #rd-videos, body:not([data-screen="videos"]) #rd-videos-top { display: none !important; }
#rd-videos-top { display: none; }
body.rd-grid-view[data-screen="videos"] #rd-videos-top:not(.hidden) { display: flex; }
body.rd-grid-view[data-screen="videos"] .page[data-page="sheet"] { display: none !important; }
.rd-videos-top:not(:has(> .rd-section:not(.hidden))) { display: flex; }
.rd-grid-empty { padding: 56px 24px; border: 1px dashed var(--rd-border-2); border-radius: 16px; }
.rd-grid-empty.hidden { display: none; }
#rd-videos-view button { padding: 7px 12px; }
/* 5c. row download */
.rd-rowdl { flex: 0 0 auto; width: 28px; height: 26px; margin-left: 4px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--rd-subtle); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; display: inline-flex; align-items: center; justify-content: center; }
#sheet-body .sheet-row:hover .rd-rowdl, .rd-rowdl:focus-visible { opacity: 1; }
.rd-rowdl:hover { background: var(--rd-raised-2); color: var(--rd-text); border-color: var(--rd-border-3); }
.rd-rowdl:disabled { opacity: 1; font: 500 10px/1 var(--rd-font); }
@media (max-width: 760px) { .rd-rowdl { opacity: 1; } }


/* ==== imported YouTube analytics in the spreadsheet =======================================================
   A number, and whether it beats this channel's own median. Colour is the ONLY signal here, so it is used
   strictly: green above the median, red below, plain text inside the neutral band, and nothing at all until
   the channel has enough day-7 snapshots for a median to mean anything. A video too new to have a day-7
   snapshot shows a grey dash, never a zero. */
.sv { font: 500 12.5px/1 var(--rd-mono, var(--rd-font)); letter-spacing: -.01em; color: var(--rd-text); }
.sv-good { color: var(--rd-ok); }
.sv-bad { color: var(--rd-err); }
.sv-flat { color: var(--rd-muted); }
.sv-dash { color: var(--rd-dash); font: 400 13px/1 var(--rd-font); }
.sc.stat { justify-content: center; cursor: default; }
.sc.stat:hover { background: transparent !important; box-shadow: none !important; }

/* ==== Performance card: imported YouTube analytics for one video ==========================================
   Stat tiles for the numbers, one accent line for the retention curve. The curve is a single series, so it
   needs no legend — the heading names it — and the exact value at any second comes from the crosshair rather
   than a label on every point. Grid and axes stay recessive; the only saturated ink in the figure is the line. */
/* `.pj-block > div:not(.empty)` sets white-space: pre-wrap for the old plain-text blocks. This card is markup,
   so the newlines between its tags must not become blank lines. */
.pf, .pf * { white-space: normal; }
.pf { display: flex; flex-direction: column; gap: 18px; }
.pf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pf-head .soon { display: flex; align-items: center; gap: 14px; font: 400 12px/1 var(--rd-font); color: var(--rd-faint); }
.pf-link { color: var(--rd-muted); text-decoration: none; }
.pf-link:hover { color: var(--rd-text); }

/* age switcher — the one selected state carries the accent, nothing else in the card does */
.pf-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--rd-border); border-radius: 10px; background: var(--rd-card-alt); }
.pf-seg button { padding: 5px 12px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font: 500 12px/1 var(--rd-font); color: var(--rd-muted); transition: background .16s var(--ease), color .16s var(--ease); }
.pf-seg button:hover { color: var(--rd-text); }
.pf-seg button.on { background: var(--rd-raised); color: var(--rd-text); box-shadow: inset 0 0 0 1px var(--rd-border-2); }

.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1px;
  grid-auto-rows: 1fr; border: 1px solid var(--rd-border); border-radius: 12px; overflow: hidden;
  background: transparent; }
.pf-tile { box-shadow: 0 0 0 1px var(--rd-border); }
.pf-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--rd-card-alt); }
.pf-tile span { font: 600 10.5px/1 var(--rd-font); letter-spacing: .06em; text-transform: uppercase; color: var(--rd-faint); }
.pf-tile b { font: 600 20px/1 var(--rd-font); letter-spacing: -.02em; color: var(--rd-text); }
.pf-tile em { font: 400 11px/1 var(--rd-mono, var(--rd-font)); font-style: normal; color: var(--rd-faint); }
.pf-v.pf-good { color: var(--rd-ok); }
.pf-v.pf-bad { color: var(--rd-err); }

/* the retention curve */
.rc { position: relative; margin: 0; }
.rc svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 260; overflow: visible; touch-action: none; }
.rc-cursor.off { display: none; }
.rc-grid { stroke: var(--rd-hair-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rc-ylab, .rc-xlab { font: 400 10px var(--rd-mono, var(--rd-font)); fill: var(--rd-faint); }
.rc-ylab { text-anchor: end; }
.rc-area { fill: var(--accent); opacity: .10; stroke: none; }
.rc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; }
.rc-cross { stroke: var(--rd-border-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rc-dot { fill: var(--accent); stroke: var(--rd-card); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rc-tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; white-space: nowrap;
  padding: 7px 10px; border: 1px solid var(--rd-border-2); border-radius: 9px; background: var(--rd-raised);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font: 400 11.5px/1.35 var(--rd-font); color: var(--rd-muted); }
.rc-tip b { display: block; font: 600 13px/1.2 var(--rd-font); color: var(--rd-text); }
.rc-tip em { font-style: normal; color: var(--rd-faint); }
.rc figcaption { margin-top: 6px; font: 400 11.5px/1 var(--rd-font); color: var(--rd-faint); }

@media (max-width: 760px) {
  .rc svg { aspect-ratio: 1000 / 360; }
  .pf-tile b { font-size: 18px; }
}

/* ==== the analytics strip on a channel card ===============================================================
   Sits in the card's own `foot` row. Three states, three different sentences — "not connected", "permission
   missing" and "on/off" are different problems and must not be collapsed into one vague warning. Only the
   reconnect-to-enable-analytics button is accented, because it is the one thing that needs doing. */
.ch-an { grid-area: an; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rd-hair-2); min-height: 0; }
.ch-an:empty { display: none; }
.ch-an-off, .ch-an-note { font: 400 11.5px/1.3 var(--rd-font); color: var(--rd-faint); }
.ch-an-btn { padding: 5px 11px; border: 1px solid var(--rd-border-2); border-radius: 8px; background: transparent;
  cursor: pointer; font: 500 11.5px/1 var(--rd-font); color: var(--rd-muted);
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease); }
.ch-an-btn:hover { border-color: var(--rd-border-3); color: var(--rd-text); background: var(--rd-raised); }
.ch-an-btn.primary { border-color: var(--rd-accent-border-2, var(--accent)); color: var(--rd-accent-text, var(--accent-text));
  background: var(--rd-accent-bg-2, var(--accent-subtle)); }
.ch-an-btn.primary:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.ch-an-sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 500 11.5px/1 var(--rd-font); color: var(--rd-muted); }
.ch-an-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.ch-an-sw .sw-track { width: 30px; height: 17px; border-radius: 99px; background: var(--rd-border-2);
  position: relative; transition: background .16s var(--ease); flex: 0 0 auto; }
.ch-an-sw .sw-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--rd-text); transition: transform .16s var(--ease); }
.ch-an-sw input:checked + .sw-track { background: var(--rd-ok-toggle, var(--accent)); }
.ch-an-sw input:checked + .sw-track::after { transform: translateX(13px); }
.ch-an-sw input:focus-visible + .sw-track { box-shadow: var(--ring); }

/* ==== Growth Analyst ======================================================================================
   A proposal is a claim with evidence attached and a decision pending, so every card reads in that order:
   what the change is, what it rests on, then the two buttons. Approve is the only accented control on the
   page — it is the one action that changes anything, and the UI should never make Reject look equally eager. */
.growth { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--rd-hair-2); }
.growth-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.growth-head h2 { font: 600 19px/1.2 var(--rd-font); letter-spacing: -.02em; color: var(--rd-text); margin: 0 0 4px; }
.growth-head .soon { display: block; max-width: 560px; font: 400 13px/1.5 var(--rd-font); color: var(--rd-muted); }
.gx-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--rd-border); border-radius: 10px; background: var(--rd-card-alt); }
.gx-seg button { padding: 6px 14px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font: 500 12.5px/1 var(--rd-font); color: var(--rd-muted); transition: background .16s var(--ease), color .16s var(--ease); }
.gx-seg button.on { background: var(--rd-raised); color: var(--rd-text); box-shadow: inset 0 0 0 1px var(--rd-border-2); }

/* --- the per-channel cards --- */
.growth-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.gx-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--rd-border);
  border-radius: 16px; background: var(--rd-card); }
.gx-card.on { border-color: var(--rd-border-3); }
.gx-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gx-card header b { font: 600 15px/1.3 var(--rd-font); color: var(--rd-text); }
.gx-niche { display: block; font: 400 12px/1.4 var(--rd-font); color: var(--rd-subtle); }
.gx-ok, .gx-warn { font: 500 11.5px/1.3 var(--rd-font); text-align: right; flex: 0 0 auto; max-width: 48%; }
.gx-ok { color: var(--rd-ok); } .gx-warn { color: var(--rd-amber, #E0A33E); }
.gx-note { margin: 0; font: 400 12px/1.5 var(--rd-font); color: var(--rd-faint); }
.gx-row { display: flex; gap: 12px; flex-wrap: wrap; }
.gx-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 150px; }
.gx-field.narrow { flex: 0 0 140px; }
.gx-field > span { font: 600 10.5px/1 var(--rd-font); letter-spacing: .06em; text-transform: uppercase; color: var(--rd-faint); }
.gx-field select, .gx-field input { padding: 8px 10px; border: 1px solid var(--rd-border-2); border-radius: 9px;
  background: var(--rd-input, var(--rd-card-alt)); color: var(--rd-text); font: 400 13px/1 var(--rd-font); }
.gx-toggles { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.gx-chk { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: 400 12.5px/1 var(--rd-font); color: var(--rd-muted); }
.gx-card footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--rd-hair-2); }
.gx-card footer .soon { font: 400 11.5px/1.4 var(--rd-font); color: var(--rd-faint); }
.gx-acts { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* --- the reports --- */
.growth-reports { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.gx-rbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.gx-runs { display: flex; flex-direction: column; gap: 8px; }
.gx-run { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--rd-border); border-radius: 12px; background: var(--rd-card); color: var(--rd-text);
  transition: border-color .16s var(--ease), background .16s var(--ease); }
.gx-run:hover { border-color: var(--rd-border-3); }
.gx-run.on { border-color: var(--accent); background: var(--rd-accent-bg-2, var(--accent-subtle)); }
.gx-run-h { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font: 600 13px/1.3 var(--rd-font); }
.gx-run-s { font: 400 12px/1.5 var(--rd-font); color: var(--rd-muted); }
.gx-kind { font: 400 10.5px/1 var(--rd-mono, var(--rd-font)); font-style: normal; color: var(--rd-faint);
  text-transform: uppercase; letter-spacing: .06em; }
.gx-pill { font-style: normal; font: 600 10px/1 var(--rd-font); letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 99px; border: 1px solid; white-space: nowrap; }
.gx-pill.open { color: var(--accent-text); border-color: var(--rd-accent-border-2, var(--accent)); background: var(--accent-subtle); }
.gx-pill.ok { color: var(--rd-ok); border-color: var(--rd-ok-border, var(--rd-ok)); background: var(--rd-ok-bg-2, transparent); }
.gx-pill.no { color: var(--rd-err); border-color: var(--rd-err-border, var(--rd-err)); background: transparent; }
.gx-pill.warn { color: var(--rd-amber, #E0A33E); border-color: var(--rd-border-3); background: transparent; }

.gx-report { padding: 20px; border: 1px solid var(--rd-border); border-radius: 16px; background: var(--rd-card); }
.gx-rep-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--rd-hair-2); }
.gx-rep-h .soon { display: block; margin-top: 4px; font: 400 12px/1.4 var(--rd-font); color: var(--rd-faint); }
.gx-report h4 { margin: 22px 0 10px; font: 600 11px/1 var(--rd-font); letter-spacing: .08em; text-transform: uppercase; color: var(--rd-faint); }
.gx-report h4 i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--rd-faint); }
.gx-sum { margin: 0; font: 400 13.5px/1.6 var(--rd-font); color: var(--rd-muted); }
.gx-demo { margin: 0 0 4px; padding: 10px 12px; border: 1px solid var(--rd-border-3); border-radius: 10px;
  font: 500 12.5px/1.5 var(--rd-font); color: var(--rd-amber, #E0A33E); background: var(--rd-card-alt); }
.gx-empty-data { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px dashed var(--rd-border-3);
  border-radius: 12px; background: var(--rd-card-alt); }
.gx-empty-data b { font: 600 14px/1.3 var(--rd-font); color: var(--rd-text); }
.gx-empty-data span { font: 400 13px/1.6 var(--rd-font); color: var(--rd-muted); }
.gx-findings { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.gx-findings > li > b { display: block; font: 600 13.5px/1.4 var(--rd-font); color: var(--rd-text); }
.gx-findings > li > span { display: block; margin-top: 2px; font: 400 12.5px/1.6 var(--rd-font); color: var(--rd-muted); }
.gx-ev { margin: 6px 0 0; padding: 0 0 0 14px; list-style: none; display: flex; flex-direction: column; gap: 3px;
  border-left: 2px solid var(--rd-hair-2); }
.gx-ev li { font: 400 11.5px/1.5 var(--rd-mono, var(--rd-font)); color: var(--rd-faint); }

.gx-props { display: flex; flex-direction: column; gap: 10px; }
.gx-prop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--rd-border); border-radius: 12px; background: var(--rd-card-alt); }
.gx-prop.applied { border-color: var(--rd-ok-border, var(--rd-border-3)); }
.gx-prop.rejected, .gx-prop.undone { opacity: .62; }
.gx-prop-m { flex: 1 1 320px; min-width: 0; }
.gx-prop-m b { display: block; margin: 4px 0 2px; font: 600 13.5px/1.45 var(--rd-font); color: var(--rd-text); }
.gx-prop-m > span { display: block; font: 400 12.5px/1.6 var(--rd-font); color: var(--rd-muted); }
.gx-area { font: 600 9.5px/1 var(--rd-font); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-faint); }
.gx-prop-a { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gx-more { margin-top: 18px; }
.gx-more summary { cursor: pointer; font: 500 12.5px/1 var(--rd-font); color: var(--rd-muted); }
.gx-sets { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gx-set { display: flex; align-items: baseline; gap: 10px; font: 400 12.5px/1.5 var(--rd-font); color: var(--rd-muted); }
.gx-set b { color: var(--rd-text); font-family: var(--rd-mono, var(--rd-font)); }
.gx-set i { font-style: normal; margin-left: auto; color: var(--rd-faint); font-size: 11.5px; }
.gx-doc { margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--rd-border); border-radius: 10px;
  background: var(--rd-card); font: 400 12px/1.7 var(--rd-mono, var(--rd-font)); color: var(--rd-muted);
  white-space: pre-wrap; }

@media (max-width: 980px) { .growth-reports { grid-template-columns: minmax(0, 1fr); } }

/* ==== standing instructions on an agent card ==============================================================
   A rule the owner gave in chat is enforced in code, so the card states it plainly: the rule, the time left,
   and one way out. Amber, not the accent — this is a constraint in force, not an action to take. */
.ag-dirs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ag-dir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px;
  border: 1px solid var(--rd-border-2); border-left: 2px solid var(--rd-amber, #E0A33E); border-radius: 10px;
  background: var(--rd-card-alt); }
.ag-dir b { font: 500 12.5px/1.4 var(--rd-font); color: var(--rd-text); flex: 1 1 200px; min-width: 0; }
.ag-dir-k { font: 600 9.5px/1 var(--rd-font); font-style: normal; letter-spacing: .07em; text-transform: uppercase;
  color: var(--rd-amber, #E0A33E); flex: 0 0 auto; }
.ag-dir-left { font: 400 11.5px/1 var(--rd-mono, var(--rd-font)); color: var(--rd-faint); flex: 0 0 auto; }
.ag-dir-x { padding: 4px 10px; border: 1px solid var(--rd-border-2); border-radius: 7px; background: transparent;
  cursor: pointer; font: 500 11.5px/1 var(--rd-font); color: var(--rd-muted); flex: 0 0 auto;
  transition: border-color .16s var(--ease), color .16s var(--ease); }
.ag-dir-x:hover { border-color: var(--rd-err); color: var(--rd-err); }

/* =====================================================================================================
   VIDEOS SPREADSHEET v2 — one plain table filling the window.
   No card, no outer margin, no empty area: the page is a flex column of [top bar][scrolling table][tabs],
   and the table's own background paints the full scroll width so sideways scrolling never shows the page
   behind it. Words instead of icons; a cell says what it does or says "Not yet".
   ===================================================================================================== */
/* The sheet fills the content column beside the sidebar. `main.pages` normally carries page padding; for this
   one view it gives all of it back, so the table reaches the sidebar on the left and the window edge on the
   right with no margin and no card. */
main.pages:has(> .page[data-page="sheet"].active) {
  padding: 0 !important; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
}
main.pages:has(> .page[data-page="sheet"].active) > .page[data-page="sheet"].active {
  flex: 1 1 auto; min-height: 0;
}
/* `display` belongs to the ROUTE, never to a page's own styling — see the invariant at the end of this file.
   This rule setting `display: flex` unscoped is what put the spreadsheet on the Home page: it out-specified
   `.page { display: none }` and the table then rendered under every route. */
.page[data-page="sheet"] {
  flex-direction: column; animation: none !important;
  padding: 0 !important; margin: 0 !important; max-width: none !important;
  background: var(--rd-page); overflow: hidden;
}
.page[data-page="sheet"].active { display: flex; }
/* sheetFitHeight() measures the real distance to the tab bar and sets this; the fallback matters only for the
   first frame before it runs */
.page[data-page="sheet"]:not([style*="height"]) { height: 100%; }
.page[data-page="sheet"] > .page-head, .page[data-page="sheet"] .sheet-foot,
.page[data-page="sheet"] .sheet-swipe, #rd-sheet-bar { display: none !important; }
/* the generic Videos bar (title · Spreadsheet/Grid · New video) is what .sv-top now is, so it steps aside */
body:has(.page[data-page="sheet"].active) #rd-videos { display: none !important; }

/* ---- top bar ---- */
.sv-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px; flex: 0 0 auto;
  border-bottom: 1px solid var(--rd-border); background: var(--rd-page); }
.sv-top h1 { margin: 0; font: 600 22px/1.2 var(--rd-font); letter-spacing: -.01em; color: var(--rd-text); }
.sv-sp { flex: 1 1 auto; }
.sv-f { display: flex; gap: 4px; }
.sv-f button { appearance: none; border: 0; background: transparent; color: var(--rd-muted); padding: 7px 12px;
  border-radius: 8px; cursor: pointer; font: 400 13.5px/1 var(--rd-font); white-space: nowrap; }
.sv-f button i { font-style: normal; color: var(--rd-faint); font-family: var(--rd-mono, var(--rd-font)); }
.sv-f button[aria-pressed="true"] { background: var(--rd-raised); color: var(--rd-text); }
.sv-f button[aria-pressed="true"] i { color: var(--rd-muted); }
.sv-btn { appearance: none; border: 1px solid var(--rd-border-3); background: var(--rd-card); color: var(--rd-text);
  padding: 8px 13px; border-radius: 9px; cursor: pointer; font: 500 13px/1 var(--rd-font); white-space: nowrap; }
.sv-btn:hover { border-color: var(--rd-border-2); background: var(--rd-raised); }
.sv-btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.sv-btn.pri:hover { background: var(--accent-hover, var(--accent)); }
.sv-search { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; height: 34px;
  border: 1px solid var(--rd-border-3); border-radius: 9px; background: var(--rd-card); color: var(--rd-faint); }
.sv-search svg { width: 14px; height: 14px; flex: 0 0 auto; }
.sv-search input { width: 120px; border: 0; background: transparent; color: var(--rd-text); outline: none;
  font: 400 13px/1 var(--rd-font); }
.sv-search input::placeholder { color: var(--rd-faint); }

/* ---- the table ----
   Twelve columns have to fit 1440 without a sideways scroll, so every column but the Title is a fixed,
   compact width and the Title takes whatever is left. `table-layout: fixed` is what makes that promise hold:
   with auto layout a long word in any cell widens its column and pushes the rest off the screen.
   `border-collapse: separate` is required for the sticky first columns below the breakpoint. */
/* `scrollbar-gutter: stable` reserves the vertical scrollbar's width up front. Without it the table is laid
   out at the full width, the scrollbar then appears and takes 15px off, and the table overflows by exactly
   that much — a horizontal scrollbar caused entirely by the vertical one. */
.sv-grid { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable;
  background: var(--rd-row, #0E0E12);
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.sv-table { width: 100%; min-width: 1096px; table-layout: fixed;
  border-collapse: separate; border-spacing: 0; background: var(--rd-row, #0E0E12); }

/* header: darker, small uppercase, a little tracking */
.sv-table th { position: sticky; top: 0; z-index: 3; background: var(--rd-sheet, #0B0B0E); text-align: left;
  font: 600 10px/1 var(--rd-font); letter-spacing: .045em; text-transform: uppercase; color: var(--rd-faint);
  padding: 0 10px; height: 40px; white-space: nowrap; border-bottom: 1px solid var(--rd-border-2);
  overflow: hidden; text-overflow: ellipsis; }
.sv-table td { padding: 0 10px; height: 78px; background: var(--rd-row, #0E0E12);
  white-space: nowrap; vertical-align: middle; border-bottom: 1px solid var(--rd-hair); }
.sv-table tr:hover td { background: var(--rd-hover, #14141A); }
.sv-table tr.rd-hidden { display: none; }
/* Only horizontal lines. The old grid put a 1px left border on every cell; with twelve columns that is also
   twelve pixels of width the table does not have, which is what pushed it into a sideways scroll at 1440. */
.sv-table th, .sv-table td { border-left: 0 !important; border-right: 0 !important; }

/* alignment: a header and its cells always agree */
/* alignment is one rule now, further down: everything centred, the Title left */

/* the fixed widths. Everything but the Title; the Title gets the remainder. */
.sv-table col.c-n { width: 40px; }
.sv-table col.c-thumb { width: 66px; }
.sv-table col.c-title { width: auto; }
.sv-table col.c-status { width: 132px; }      /* the pill plus "Download all" beneath it */
.sv-table col.c-file { width: 88px; }
.sv-table col.c-file-wide { width: 94px; }
.sv-table col.c-file-sm { width: 74px; }
.sv-table col.c-file-xs { width: 72px; }
.sv-table col.c-res { width: 72px; }
.sv-table col.c-res-wide { width: 84px; }
.sv-table th:first-child, .sv-table td:first-child { padding-left: 12px; padding-right: 0; }
.sv-table th:nth-child(2), .sv-table td:nth-child(2) { padding-left: 8px; padding-right: 8px; }
.sv-table th:last-child, .sv-table td:last-child { padding-right: 12px; }
.sv-table td:last-child { position: relative; }      /* the ··· menu button anchors to the CELL, never the header */
.sv-table td.sv-none { text-align: center; }

/* ---- the grid ----
   Every cell gets a line on all four sides, header included, so it reads as a spreadsheet rather than as a
   list. The lines are box-shadows, not borders, because `table-layout: fixed` would otherwise spend a
   column's width on them and the columns would stop lining up with the header.

   Two weights: a faint one between cells, and a stronger one at the four group boundaries
   (Title | Status | Files | Results), which is what `.sv-div` marks. */
.sv-table th, .sv-table td { box-shadow: inset -1px -1px 0 var(--rd-grid, #191920); }
.sv-table th.sv-div, .sv-table td.sv-div {
  box-shadow: inset 1px 0 0 var(--rd-grid-2, #2C2C36), inset -1px -1px 0 var(--rd-grid, #191920); }
.sv-table tr.sv-ready td:first-child {
  box-shadow: inset 3px 0 0 var(--rd-amber, #E8B341), inset -1px -1px 0 var(--rd-grid, #191920); }
.sv-table tr.sv-groups th { box-shadow: inset -1px 0 0 var(--rd-grid, #191920); }
.sv-table tr.sv-groups th.sv-div { box-shadow: inset 1px 0 0 var(--rd-grid-2, #2C2C36); }

/* every header and every cell, centred both ways — the Title is the one exception, because a two-line title
   centred against a one-line title reads as a mistake rather than as alignment */
.sv-table th, .sv-table td { text-align: center; vertical-align: middle; }
.sv-table th.sv-title, .sv-table td.sv-title { text-align: left; }
.sv-table tr.sv-groups th { text-align: center; }

/* ---- the group labels ---- */
.sv-table tr.sv-groups th { height: 24px; padding: 0 10px; background: var(--rd-sheet, #0B0B0E);
  font: 600 9.5px/1 var(--rd-font); letter-spacing: .13em; text-transform: uppercase;
  color: var(--rd-faint); border-bottom: 0; position: sticky; top: 0; z-index: 4; text-align: left; }
.sv-table tr.sv-cols th { top: 24px; font-size: 9.5px; letter-spacing: .02em; padding: 0 8px; }

.sv-table .sv-n { color: var(--rd-faint); font: 500 12px/1 var(--rd-mono, var(--rd-font)); }
.sv-table td.sv-n { position: relative; }            /* same again: the row checkbox sits in the cell */
.sv-n .rd-rowcheck { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); margin: 0;
  opacity: 0; transition: opacity .12s; accent-color: var(--accent); cursor: pointer; }
.sv-table tr:hover .rd-rowcheck, .rd-rowcheck:checked, body.sv-selecting .rd-rowcheck { opacity: 1; }
.sv-table tr:hover .sv-i, .rd-rowcheck:checked ~ .sv-i, body.sv-selecting .sv-i { opacity: 0; }
.sv-i { transition: opacity .12s; }

/* thumbnails: the same 16:9 box in every row, whether there is an image or not */
.sv-th { width: 60px; height: 34px; border-radius: 6px; display: block; object-fit: cover;
  background: var(--g, var(--rd-raised)); flex: 0 0 auto; }

/* the title: up to two lines, then an ellipsis; the full text is the cell's tooltip */
.sv-table .sv-title { white-space: normal; }
.sv-t { font: 500 13.5px/1.35 var(--rd-font); color: var(--rd-text); padding: 4px 6px; margin-left: -6px;
  border: 1px solid transparent; border-radius: 7px; outline: none; white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: calc(2.7em + 8px); }
.sv-t[contenteditable]:hover { background: var(--rd-raised); }
.sv-t[contenteditable]:focus { background: var(--rd-raised); border-color: var(--rd-border-3);
  -webkit-line-clamp: unset; display: block; max-height: none; }

/* status: a dot and one word */
.sv-st { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--rd-font);
  padding: 5px 10px; border-radius: var(--rd-r-pill); border: 1px solid transparent;
  color: var(--rd-text); cursor: default; max-width: 100%; }
.sv-st[data-act]:not([data-act=""]) { cursor: pointer; }
.sv-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.sv-st small { color: inherit; opacity: .72; font-weight: 400; font-size: 11.5px; display: inline-block;
  max-width: 70px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }

/* one colour per state */
.sv-st-making   { color: var(--rd-violet); background: var(--rd-violet-bg); border-color: var(--rd-violet-border); }
.sv-st-ready    { color: var(--rd-amber);  background: var(--rd-amber-bg);  border-color: var(--rd-amber-border); }
.sv-st-uploaded { color: var(--rd-ok);     background: var(--rd-ok-bg);     border-color: var(--rd-ok-border); }
.sv-st-error    { color: var(--rd-err);    background: var(--rd-err-bg);    border-color: var(--rd-err-border); }
/* Uploaded opens the video on YouTube, so it says so on hover */
.sv-st-uploaded::after { content: "↗"; font-size: 10px; opacity: 0; transition: opacity .12s var(--rd-ease); }
.sv-st-uploaded:hover::after { opacity: .8; }
.sv-st-uploaded:hover, .sv-st-error:hover, .sv-st-ready:hover { filter: brightness(1.14); }

/* the status cell stacks: the pill, and under it the one thing a Ready row is for */
.sv-table td.sv-st-cell { padding: 6px 8px; }
.sv-table td.sv-st-cell .sv-dl { display: block; margin: 7px auto 0; }

/* action cells: soft buttons, not underlined text */
.sv-a { appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--rd-accent-text, var(--accent)); cursor: pointer; font: 500 12.5px/1 var(--rd-font);
  padding: 6px 8px; border-radius: 8px; white-space: nowrap;
  transition: background .14s var(--ease), color .14s var(--ease); }
.sv-a:hover { background: var(--rd-raised); border-color: var(--rd-border-3); text-decoration: none; }
.sv-a.off { color: var(--rd-dash); cursor: default; background: transparent; border-color: transparent;
  font-weight: 400; }
.sv-a.done { color: var(--rd-ok); background: var(--rd-ok-bg-2, transparent); border-color: var(--rd-ok-border); }
.sv-v { font: 500 13px/1 var(--rd-mono, var(--rd-font)); font-variant-numeric: tabular-nums; color: var(--rd-text); }
.sv-v.sv-good { color: var(--rd-ok); }
.sv-v.sv-bad { color: var(--rd-err); }
/* "Not uploaded" and "After 7 days" are states, not numbers: smaller and quieter */
.sv-soon { color: var(--rd-faint); font: 400 11.5px/1 var(--rd-font); }

.sv-dl { appearance: none; border: 1px solid var(--rd-border-3); background: var(--rd-card); color: var(--rd-text);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; font: 500 12px/1 var(--rd-font);
  max-width: 100%; white-space: nowrap; }
.sv-dl:hover { border-color: var(--rd-border-2); background: var(--rd-raised); }
/* Out of the flow: in the flow it added its width to the last column and pushed the table into a sideways
   scroll at 1440, which is the one thing this column was sized to avoid. */
.sv-more { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  appearance: none; border: 0; background: transparent; color: var(--rd-faint); cursor: pointer;
  padding: 4px 5px; border-radius: 7px; opacity: 0; transition: opacity .12s; line-height: 1; }
.sv-table tr:hover .sv-more { opacity: 1; }
.sv-more:hover { background: var(--rd-raised); color: var(--rd-text); }

.sv-menu { position: fixed; z-index: 90; min-width: 206px; padding: 5px; border: 1px solid var(--rd-border-3);
  border-radius: 12px; background: var(--rd-raised); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }
.sv-menu button { display: block; width: 100%; text-align: left; appearance: none; border: 0; background: transparent;
  color: var(--rd-text); padding: 8px 10px; border-radius: 8px; cursor: pointer; font: 400 13px/1.3 var(--rd-font); }
.sv-menu button:hover { background: var(--rd-card); }
.sv-menu button.danger { color: var(--rd-err); }

/* ---- the script side panel ---- */
.sv-panel-wrap { position: fixed; inset: 0; z-index: 95; display: flex; justify-content: flex-end; }
.sv-panel-bd { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.sv-panel { position: relative; width: min(620px, 100%); height: 100%; display: flex; flex-direction: column;
  background: var(--rd-card); border-left: 1px solid var(--rd-border-2); box-shadow: -24px 0 60px rgba(0,0,0,.5);
  outline: none; animation: svSlide .18s var(--ease); }
@keyframes svSlide { from { transform: translateX(24px); opacity: .6 } to { transform: none; opacity: 1 } }
.sv-panel header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; flex: 0 0 auto;
  border-bottom: 1px solid var(--rd-border); }
.sv-panel-h { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sv-panel-h b { font: 600 15px/1.2 var(--rd-font); color: var(--rd-text); }
.sv-panel-h span { font: 400 12px/1.3 var(--rd-font); color: var(--rd-faint); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sv-panel-copy { appearance: none; border: 1px solid var(--rd-border-3); background: var(--rd-raised);
  color: var(--rd-text); padding: 8px 13px; border-radius: 9px; cursor: pointer; font: 500 13px/1 var(--rd-font);
  flex: 0 0 auto; }
.sv-panel-copy:hover { border-color: var(--rd-border-2); }
.sv-panel-copy.done { color: var(--rd-ok); border-color: var(--rd-ok-border); }
.sv-panel-x { appearance: none; border: 0; background: transparent; color: var(--rd-faint); cursor: pointer;
  font-size: 15px; padding: 8px; border-radius: 8px; line-height: 1; flex: 0 0 auto; }
.sv-panel-x:hover { background: var(--rd-raised); color: var(--rd-text); }
.sv-panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px 28px 48px; }
.sv-panel-body article { max-width: 62ch; white-space: pre-wrap; font: 400 14.5px/1.75 var(--rd-font);
  color: var(--rd-muted); }

/* ---- channel tabs, pinned to the bottom ---- */
/* The old layout made the strip sticky above the mobile tab bar; the page now ends exactly at that bar, so a
   sticky offset just pushes the strip 64px up and leaves a black band under it. */
[data-page="sheet"] .sheet-tabs { position: static !important; bottom: auto !important;
  flex: 0 0 auto; margin: 0 !important; border-radius: 0 !important;
  border: 0 !important; border-top: 1px solid var(--rd-border-2) !important; background: var(--rd-raised) !important;
  padding: 6px 10px !important; gap: 2px; }
[data-page="sheet"] .sheet-tabs .st-tab { border-radius: 8px; padding: 8px 14px; font: 400 13.5px/1 var(--rd-font); }

#sheet-emptystate:not(.hidden) { border: 0; background: transparent; padding: 56px 20px; }

/* ---- narrow ----
   Below the breakpoint the twelve columns no longer fit, so the table scrolls sideways and the three columns
   that identify a row — the number, the thumbnail and the title — stay pinned to the left. */
@media (max-width: 1270px) {
  /* the group-label row is excluded: its first cell spans all three pinned columns, so there is nothing to
     pin it to — it gets one sticky cell of its own instead */
  .sv-table tr.sv-cols th:nth-child(1), .sv-table td:nth-child(1),
  .sv-table tr.sv-cols th:nth-child(2), .sv-table td:nth-child(2),
  .sv-table tr.sv-cols th:nth-child(3), .sv-table td:nth-child(3) { position: sticky; z-index: 2; }
  .sv-table tr.sv-cols th:nth-child(1), .sv-table td:nth-child(1) { left: 0; }
  .sv-table tr.sv-cols th:nth-child(2), .sv-table td:nth-child(2) { left: 26px; }
  .sv-table tr.sv-cols th:nth-child(3), .sv-table td:nth-child(3) { left: 92px;
    box-shadow: 1px 0 0 var(--rd-hair-2); }
  .sv-table tr.sv-groups th:first-child { position: sticky; left: 0; z-index: 4;
    box-shadow: 1px 0 0 var(--rd-hair-2); }
  .sv-table tr.sv-cols th:nth-child(1), .sv-table tr.sv-cols th:nth-child(2),
  .sv-table tr.sv-cols th:nth-child(3) { z-index: 4; }
  /* a sticky cell needs its own opaque background or the scrolling columns show through it */
  .sv-table tr:hover td:nth-child(1), .sv-table tr:hover td:nth-child(2),
  .sv-table tr:hover td:nth-child(3) { background: var(--rd-hover, #14141A); }
  .sv-table tr.sv-ready td:first-child { box-shadow: inset 3px 0 0 var(--rd-ok); }
  .sv-search input { width: 90px; }
}
@media (max-width: 900px) {
  .sv-top { flex-wrap: wrap; gap: 10px 8px; padding: 12px 14px; }
  .sv-top h1 { font-size: 19px; }
  .sv-sp { display: none; }
  .sv-f { order: 3; width: 100%; }
  .sv-search { order: 2; flex: 1 1 auto; }
  .sv-search input { width: 100%; }
  .sv-more { opacity: 1; }
  /* touch has no hover, so the checkbox is always there — and the number stays beside it */
  /* the widths live in the colgroup now, so the phone sizes go there too */
  .sv-table col.c-n { width: 52px; }
  .sv-table col.c-thumb { width: 62px; }
  .sv-table col.c-title { width: 158px; }
  .sv-table th:first-child, .sv-table td:first-child { padding-left: 10px; }
  .sv-table th:nth-child(2), .sv-table td:nth-child(2) { padding: 0 6px; }
  .sv-table tr.sv-cols th:nth-child(2), .sv-table td:nth-child(2) { left: 52px; }
  .sv-table tr.sv-cols th:nth-child(3), .sv-table td:nth-child(3) { left: 114px; }
  .sv-table { min-width: 1150px; }          /* the title stops flexing here, so it is given a readable width */
  .sv-th { width: 50px; height: 28px; }
  .sv-n .rd-rowcheck { opacity: 1; position: static; transform: none; margin-right: 6px; vertical-align: middle; }
  .sv-table tr:hover .sv-i, .rd-rowcheck:checked ~ .sv-i, body.sv-selecting .sv-i { opacity: 1; }
  .sv-panel { width: 100%; }
}

/* ---- the old grid, neutralised ----
   The spreadsheet used to be a CSS grid of spans with an icon painted into each cell's background. Those rules
   are keyed on class names the rows still carry (.sheet-row for delete and export, .stpill so the filter can
   read a status), so they are switched off here rather than renamed across three files. */
.sv-table .sheet-row, #sheet-body .sheet-row {
  display: table-row !important; grid-template-columns: none !important; min-height: 0 !important;
  border: 0 !important; background: transparent !important; margin: 0 !important; padding: 0 !important;
  border-radius: 0 !important; min-width: 0 !important;
}
.sv-table .sheet-row > td { display: table-cell !important; background-image: none !important; }
.sv-table .stpill { border: 0 !important; background: transparent !important; padding: 0 !important;
  border-radius: 0 !important; text-transform: none !important; letter-spacing: 0 !important;
  font-weight: 500 !important; box-shadow: none !important; }
.sv-table td::before, .sv-table td::after { content: none !important; }
.sv-table .cbtn, .sv-table .cdot, .sv-table .sthumb, .sv-table .rd-rowthumb, .sv-table .rd-rowdl,
.sv-table .rd-rowmore, .sv-table .rd-watch, .sv-table .rd-notyet { display: none !important; }
.sv-table .sv-t { background: transparent; box-shadow: none !important; }
.sv-table .sv-t[contenteditable]:hover, .sv-table .sv-t[contenteditable]:focus {
  background: var(--rd-raised) !important; }
/* the search field keeps the browser's own box without this */
.sv-search input { appearance: none; -webkit-appearance: none; border: 0 !important; background: transparent !important;
  box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; height: auto !important; }
.sv-search input::-webkit-search-decoration, .sv-search input::-webkit-search-cancel-button { appearance: none; }


/* ================= THE ONE RULE ABOUT PAGES =================================================================
   A page is shown by the ROUTER and by nothing else. `shell.js:route()` puts `.active` on exactly the pages
   that belong to the current route; everything else is hidden, and this is the rule that hides it.

   It carries `!important` and a specificity no page-level rule can reach on purpose. A page's own styling is
   free to say how it looks — flex, grid, padding, background — but it may never say THAT it is displayed. The
   Videos spreadsheet appeared under every route because one rule set `display: flex` on `[data-page="sheet"]`
   without `.active`, which quietly out-specified `.page { display: none }`. With this rule in place that
   mistake cannot show a page again, whoever makes it and wherever it is written.

   `scripts/route_guard.py` opens every route and fails if one page's sections turn up inside another's. Run it
   before every deploy.
   ========================================================================================================== */
main.pages > .page:not(.active),
.page:not(.active) { display: none !important; }


/* ================= home stats: subscribers and the trend arrows =============================================
   The arrow answers "better or worse than the period before"; its hover answers "by how much", for every
   metric at once. Within ten per cent either way is a grey dot, because a 3% week is not news. */
.hs-tr { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font: 600 11px/1 var(--rd-font); cursor: help; vertical-align: middle; }
.hs-tr.up { color: var(--rd-ok, #3DDC97); }
.hs-tr.down { color: var(--rd-err, #FF6B6B); }
.hs-tr.flat { color: var(--rd-faint, #6E6E78); }

/* Every tile the same shape: label, number, trend — each on its own line, at the same height in all four, so
   the row reads as one object. The trend sits UNDER the number and left aligned with it, which is what stops
   it being clipped at the right edge however narrow the tile gets. */
.hs-tiles .rd-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-width: 0; overflow: hidden; padding: 12px 14px; }
.hs-tiles .rd-stat > .l { height: 15px; display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-note { font-style: normal; font-size: 9px; line-height: 12px; width: 12px; height: 12px; flex: 0 0 auto;
  border-radius: 50%; text-align: center; background: var(--rd-raised-2, #22222A); color: var(--rd-faint);
  cursor: help; }
.hs-tiles .rd-stat > .v { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hs-tiles .rd-stat > .t { display: block; min-height: 13px; max-width: 100%; overflow: hidden; }
.hs-tiles .rd-stat > .t .hs-tr { font-size: 12px; }

/* Subscribers is a neutral number like watch hours and views — only a NEGATIVE net turns red. Revenue keeps
   the green it has always had, and its tile keeps the green background. */
.hs-tiles .rd-stat.subs .v { color: inherit; }
.hs-tiles .rd-stat.subs.neg .v { color: var(--rd-err, #FF6B6B); }
#rd-home-stats-slot .hs-row > span.hs-subs, .hs-row .hs-subs { color: inherit; }
#rd-home-stats-slot .hs-row > span.hs-subs.neg, .hs-row .hs-subs.neg { color: var(--rd-err, #FF6B6B); }
.hs-pill .hs-item[data-k="subs"] .hs-v { color: inherit; }
.hs-pill .hs-item[data-k="subs"] .hs-v.neg { color: var(--rd-err, #FF6B6B); }

/* the pill carries numbers only — no dates, no arrows */
.hs-pill .hs-tr { display: none; }
#hs-seg button { cursor: help; }

/* the arrow after a channel name: centred on the name, one consistent gap, one size */
.hs-row .hs-nm .hs-tr { margin-left: 7px; font-size: 10px; position: relative; top: -1px; }
.hs-row .hs-reconnect { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; vertical-align: bottom; }

/* ================= the Celebrity B-roll check, on the Video page ===========================================
   Two named copyright limits first, because those are the ones with consequences, then what was replaced and
   why, then how the pacing came out. A tick is a fact, not a decoration. */
.au-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; font-size: 14px; }
.au-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 24px; }
.au-cols h4 { margin: 0 0 8px; font: 600 11px/1 var(--rd-font); letter-spacing: .08em;
  text-transform: uppercase; color: var(--rd-faint); }
.au-list, .au-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.au-list li { font-size: 13px; color: var(--rd-text-2); display: flex; gap: 8px; align-items: baseline; }
.au-why li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
  color: var(--rd-muted); }
.au-why em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--rd-text-2); }
.au-ok { color: var(--rd-ok, #3DDC97); }
.au-bad { color: var(--rd-err, #FF6B6B); }
.au p.soon { margin: 8px 0 0; font-size: 12px; }
.au-warn { margin: 0 0 14px; padding: 9px 12px; border-radius: 10px; font-size: 13px;
  background: var(--rd-warn-bg, #33190F); color: var(--rd-warn-text, #FFAE80);
  border: 1px solid var(--rd-err-border-2, #3A2420); }


/* Every revenue number in the stats panel is the revenue green — the per-channel ones as well as the total,
   which already was. Views and subscribers keep their own colours; the trend arrows are untouched. */
/* The panel colours every cell after the first with
   `#rd-home-stats-slot .hs-row > span:not(:first-child)`. This matches that selector's weight exactly and
   comes later in the file, which is what it takes to win — a plain `.hs-row .hs-rev` loses to it silently. */
#rd-home-stats-slot .hs-row > span.hs-rev,
#hs-panel .hs-row > span.hs-rev { color: var(--rd-ok); }
#rd-home-stats-slot .hs-row.err > span.hs-rev,
#hs-panel .hs-row.err > span.hs-rev { color: var(--rd-text-2); }   /* a channel that failed stays quiet */


/* ---- Home: the Advanced drawer under the composer. Closed by default; it holds what the Create page held. */
.rd-adv { margin: 18px auto 0; max-width: 820px; width: 100%; border: 1px solid var(--rd-hair); border-radius: 14px;
  background: var(--rd-surface); overflow: hidden; }
.rd-adv > summary { display: flex; align-items: center; gap: 10px; padding: 13px 18px; cursor: pointer;
  font: 600 13.5px/1 var(--rd-font-ui); color: var(--rd-text); list-style: none; }
.rd-adv > summary::-webkit-details-marker { display: none; }
.rd-adv > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid var(--rd-subtle);
  border-bottom: 1.6px solid var(--rd-subtle); transform: rotate(45deg) translateY(-2px); transition: transform .18s; }
.rd-adv[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.rd-adv > summary:hover { background: var(--rd-surface-2); }
.rd-adv-body { padding: 4px 18px 18px; border-top: 1px solid var(--rd-hair); }
.rd-adv-body > .rd-meta { display: block; margin: 12px 0 14px; }
.rd-adv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rd-adv-item { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px; border-radius: 11px;
  border: 1px solid var(--rd-hair); background: var(--rd-surface-2); text-decoration: none; transition: border-color .15s, background .15s; }
.rd-adv-item:hover { border-color: var(--rd-hair-2); background: var(--rd-surface-3, var(--rd-surface-2)); }
.rd-adv-item b { font: 600 13.5px/1.3 var(--rd-font-ui); color: var(--rd-text); }
.rd-adv-item span { font: 400 12.5px/1.45 var(--rd-font-ui); color: var(--rd-subtle); }
@media (max-width: 720px) { .rd-adv-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- One video, in production. Nothing on the page but the steps and the time left. ---- */
body.rd-prod-on .sidebar, body.rd-prod-on .m-tabbar, body.rd-prod-on header,
body.rd-prod-on main.pages { display: none !important; }
.rd-prodview { position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: var(--rd-bg);
  display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.rd-prodview.hidden { display: none; }
.rd-prod-back { position: fixed; top: 22px; left: 24px; font: 500 13px/1 var(--rd-font-ui);
  color: var(--rd-subtle); text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.rd-prod-back:hover { color: var(--rd-text); background: var(--rd-surface); }
.rd-prodview-in { width: 100%; max-width: 440px; }
.rd-prod-ch { display: flex; align-items: center; gap: 9px; font: 500 13px/1 var(--rd-font-ui); color: var(--rd-subtle); }
.rd-prod-h1 { margin: 14px 0 32px; font: 600 26px/1.25 var(--rd-font-ui); color: var(--rd-text); letter-spacing: -0.01em; }
.rd-prod-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.rd-prod-steps li { display: flex; align-items: center; gap: 14px; padding: 13px 0;
  font: 400 14.5px/1.3 var(--rd-font-ui); color: var(--rd-faint, var(--rd-subtle)); opacity: .5; }
.rd-prod-steps li i { width: 9px; height: 9px; border-radius: 50%; background: var(--rd-hair-2); flex: 0 0 auto; }
.rd-prod-steps li.done { opacity: .75; color: var(--rd-subtle); }
.rd-prod-steps li.done i { background: var(--rd-ok); }
.rd-prod-steps li.cur { opacity: 1; color: var(--rd-text); font-weight: 600; }
.rd-prod-steps li.cur i { background: var(--rd-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rd-accent) 22%, transparent); }
.rd-prod-steps li.err { opacity: 1; color: var(--rd-err); }
.rd-prod-steps li.err i { background: var(--rd-err); }
.rd-prod-left { margin-top: 30px; font: 500 13.5px/1 var(--rd-font-ui); color: var(--rd-subtle); }
@media (max-width: 560px) { .rd-prodview { padding: 72px 20px 32px; align-items: flex-start; }
  .rd-prod-h1 { font-size: 22px; } }


/* ---- The one special word: brand lavender in the app's own font, with a soft light passing over it.
   Replaces the serif italic on Sign in ("autopilot") and on Home (your name) — and nothing else. The
   gradient is painted into the glyphs and slid across; one pass of about 1.2s every 10 seconds, plus the
   pass the page load gives you for free. Taken from design-reference accent.html, card "D + light sweep". */
.rd-hero-name, .si-story h1 em {
  font-style: normal;
  background: linear-gradient(100deg,
    var(--rd-accent-2, #9B8CFF) 0%, var(--rd-accent-2, #9B8CFF) 42%,
    #FFFFFF 50%, var(--rd-accent-1, #D6D0FF) 54%,
    var(--rd-accent-2, #9B8CFF) 62%, var(--rd-accent-2, #9B8CFF) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: rd-sweep 10s ease-in-out infinite;
}
@keyframes rd-sweep { 0% { background-position: 100% 0; } 12%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .rd-hero-name, .si-story h1 em { animation: none; background-position: 50% 0; }
}

/* ================= AGENTS — a 1:1 port of "design-reference 6/agents.html" =============================
   The reference's own token names are redeclared on .rd-ag2 and mapped to this app's theme, so every rule
   below can be the reference's rule unchanged and NOTHING outside this root can reach in and change it.
   (They were previously written against --rd-bg / --rd-surface / --rd-surface-2, which did not exist: every
   background, every hover and the status dot's border fell through to nothing.) */
.ag2-gone { display: none !important; }
.rd-ag2 {
  --bg: var(--rd-page); --side: var(--rd-sidebar); --rail: var(--rd-inset);
  --card: var(--rd-card); --card2: var(--rd-raised);
  --line: var(--rd-border); --line2: var(--rd-border-3);
  --fg: var(--rd-text); --muted: var(--rd-muted); --dim: var(--rd-faint);
  --accent: var(--rd-accent); --primary: var(--rd-primary);
  --ok: var(--rd-ok); --okbg: var(--rd-ok-bg);
  --amber: var(--rd-amber); --amberbg: #2A2410; --offgray: var(--rd-ghost);
  --f: var(--rd-font); --m: var(--rd-mono);
  position: fixed; inset: 0 0 0 var(--rd-sidebar-w, 248px); display: flex;
  background: var(--bg); color: var(--fg); font-family: var(--f); font-size: 14px;
}
body.nav-collapsed .rd-ag2 { left: var(--rd-sidebar-cw, 72px); }
/* Below 1100 the sidebar becomes a top bar and a bottom tab bar, and a frame pinned to inset:0 sits UNDER
   both of them — which is why the agent header came out as an empty strip on a phone. */
@media (max-width: 1100px) { .rd-ag2 { left: 0; top: 56px;
  bottom: calc(64px + env(safe-area-inset-bottom)); } }

/* ---- the rail ---- */
.rd-ag2 .ag2-rail { width: 264px; flex-shrink: 0; background: var(--rail); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; }
.rd-ag2 .ag2-rail h2 { margin: 0; padding: 22px 18px 12px; font: 600 20px/1 var(--f); letter-spacing: -.01em;
  color: var(--fg); }
.rd-ag2 .ag2-it { appearance: none; border: 0; background: transparent; width: 100%; text-align: left;
  color: var(--fg); display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; font-family: var(--f);
  transition: background .15s, color .15s; }
.rd-ag2 .ag2-it:hover { background: #121217; }
.rd-ag2 .ag2-it.on { background: #18181F; }
.rd-ag2 .ag2-inbox { margin: 4px 8px 10px; width: auto; }   /* width:100% + margins overflowed the rail */
.rd-ag2 .ag2-list { overflow: auto; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.rd-ag2 .ag2-empty { padding: 14px 18px; color: var(--dim); font: 400 13px/1.5 var(--f); }
/* light placeholders while the list is in the air — the frame is never blank and never frozen */
.rd-ag2 .ag2-skrow { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: center;
  padding: 9px 10px; }
.rd-ag2 .ag2-skrow .s-av { width: 34px; height: 34px; border-radius: 10px; }
.rd-ag2 .ag2-skrow .s-l { height: 10px; border-radius: 5px; width: 70%; }
.rd-ag2 .ag2-skrow span, .rd-ag2 .ag2-skcard { background: linear-gradient(90deg, #141419, #1C1C24, #141419);
  background-size: 200% 100%; animation: ag2sk 1.4s ease-in-out infinite; }
.rd-ag2 .ag2-skcard { height: 170px; border-radius: 14px; }
@keyframes ag2sk { 0% { background-position: 140% 0 } 100% { background-position: -40% 0 } }
@media (prefers-reduced-motion: reduce) { .rd-ag2 .ag2-skrow span, .rd-ag2 .ag2-skcard { animation: none; } }
/* a part that could not load says so where it would have been, and offers to try again */
.rd-ag2 .ag2-fail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px;
  padding: 12px 14px; border-radius: 12px; background: #1A1012; border: 1px solid #3A2420;
  color: var(--rd-err-text, #FF8A8A); font: 400 13px/1.45 var(--f); }
.rd-ag2 .ag2-fail span { flex: 1 1 140px; min-width: 0; }

/* The tile. 34px square, the agent's colour, white initials, status dot on the bottom-right with a dark
   border so it reads as sitting ON the tile rather than next to the name. */
.rd-ag2 .av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font: 600 12.5px/1 var(--f); color: #fff; position: relative; flex-shrink: 0; }
.rd-ag2 .av::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--s, #45454E); border: 2px solid var(--rail); }
.rd-ag2 .ag2-inbox .av { background: #1C1838; color: var(--accent); }
.rd-ag2 .ag2-inbox .av::after { display: none; }
.rd-ag2 .av img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.rd-ag2 .av.logo { background: #1C1C22; border: 1px solid #2C2C34; }
.rd-ag2 .av.logo svg { width: 22px; height: 22px; }
.rd-ag2 .av.paused { opacity: .75; } .rd-ag2 .av.off { opacity: .45; }
.rd-ag2 .ag2-it .nm { font: 500 14px/1.35 var(--f); display: block; color: var(--fg); }
.rd-ag2 .ag2-it .sub { color: var(--dim); font: 400 12.5px/1.4 var(--f); display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-ag2 .ag2-it .sub.paused { color: var(--amber); } .rd-ag2 .ag2-it .sub.off { color: #55555E; }
.rd-ag2 .ag2-it > span { min-width: 0; }
.rd-ag2 .pill { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary);
  color: #fff; font: 600 11.5px/20px var(--f); display: inline-grid; place-items: center; }
.rd-ag2 .pill.hidden { display: none; }
.ag2-sbadge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rd-primary);
  color: #fff; font: 600 11.5px/20px var(--rd-font); display: inline-grid; place-items: center; margin-left: auto; }
.rd-ag2 .ag2-team { padding: 10px 18px 6px; font: 400 12px/1 var(--f); color: var(--dim); display: flex;
  gap: 10px; flex-wrap: wrap; }
.rd-ag2 .ag2-team i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.rd-ag2 .ag2-team i::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--s); }

/* ---- the reading column ---- */
.rd-ag2 .ag2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.rd-ag2 .ag2-head { display: flex; align-items: center; gap: 12px; padding: 14px 22px;
  border-bottom: 1px solid var(--line); min-height: 64px; }
.rd-ag2 .ag2-head .av { width: 32px; height: 32px; }
.rd-ag2 .ag2-head .t { display: flex; flex-direction: column; min-width: 0; }
.rd-ag2 .ag2-head .t b, .rd-ag2 .ag2-head .t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-ag2 .ag2-head .t b { font: 600 15px/1.35 var(--f); color: var(--fg); }
.rd-ag2 .ag2-head .t small { color: var(--dim); font: 400 12.5px/1.35 var(--f); }
.rd-ag2 .ag2-head .grow { flex: 1; }
/* what the owner asked for next, in the header until the run that uses it */
.rd-ag2 .ag2-next { display: inline-flex; align-items: center; gap: 8px; max-width: 320px; padding: 6px 8px 6px 12px;
  border-radius: 999px; border: 1px solid var(--accent-border, #3A3460); background: #17142B;
  color: var(--soft, #C5BDFF); font: 500 12.5px/1.3 var(--f); flex: 0 1 auto; min-width: 0; }
.rd-ag2 .ag2-next .lbl { white-space: nowrap; flex: 0 0 auto; }
.rd-ag2 .ag2-next b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rd-ag2 .ag2-next .n { flex: 0 0 auto; color: var(--dim); font-weight: 400; }
.rd-ag2 .ag2-next button { appearance: none; border: 0; background: transparent; color: inherit; opacity: .7;
  cursor: pointer; font: 500 14px/1 var(--f); padding: 2px 4px; flex: 0 0 auto; }
.rd-ag2 .ag2-next button:hover { opacity: 1; }
/* on a phone the row is tight: the marker replaces the words, and the agent's name keeps its room */
@media (max-width: 760px) {
  .rd-ag2 .ag2-next { max-width: 128px; padding-left: 10px; }
  .rd-ag2 .ag2-next .lbl { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    overflow: hidden; text-indent: -99px; }
}
/* display only: the status is CHANGED in the drawer, never by clicking the pill */
.rd-ag2 .ag2-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line2); background: #121217; color: var(--fg); font: 500 13px/1 var(--f);
  cursor: default; flex: 0 0 auto; }
.rd-ag2 .ag2-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s); }
/* The proposals column and the chat were both flex:1, so they split the pane in half and the chat only ever
   got the bottom — which read as a dark block covering the top of the conversation. With a chat underneath,
   the column takes only what it needs (never more than a third), and when there is nothing in it, nothing. */
.rd-ag2 .ag2-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.rd-ag2.has-chat .ag2-scroll { flex: 0 1 auto; max-height: 34%; }
.rd-ag2.has-chat .ag2-scroll.empty { display: none; }
.rd-ag2 .ag2-col { max-width: 740px; margin: 0 auto; width: 100%; padding: 28px 24px 24px; display: flex;
  flex-direction: column; gap: 22px; box-sizing: border-box; }
.rd-ag2 .ag2-col.fade { animation: ag2fade .22s ease-out both; }
@keyframes ag2fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ag2rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes ag2slide { from { transform: translateX(24px); opacity: 0 } to { transform: none; opacity: 1 } }
.rd-ag2 .ag2-ph { text-align: center; padding: 60px 20px; color: var(--dim); }
.rd-ag2 .ag2-ph .t { font: 600 16px/1.4 var(--f); color: var(--fg); margin-bottom: 6px; }
.rd-ag2 .ag2-ph .s { font: 400 14px/1.6 var(--f); }
.rd-ag2 .ag2-banner { display: flex; align-items: center; gap: 12px; background: #1A1608; border: 1px solid #3A3214;
  color: var(--amber); padding: 12px 14px; border-radius: 12px; font: 400 14px/1.5 var(--f); }
.rd-ag2 .ag2-banner.off { background: #141418; border-color: var(--line2); color: var(--muted); }
.rd-ag2 .ag2-banner span { flex: 1; }
.rd-ag2 .ag2-banner .rb { flex: 0 0 auto; }

/* ---- a proposal ---- */
.rd-ag2 .ag2-prop { border: 1px solid #2E2A52; background: linear-gradient(180deg,#14121F,#111116);
  border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
  animation: ag2rise .32s cubic-bezier(.2,.7,.2,1) both; }
.rd-ag2 .ag2-prop.done { opacity: .6; }
.rd-ag2 .ag2-prop .top { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--f);
  color: var(--accent); }
.rd-ag2 .ag2-prop .top small { color: var(--dim); font-weight: 400; margin-left: auto; }
.rd-ag2 .ag2-prop h3 { margin: 0; font: 600 18px/1.35 var(--f); letter-spacing: -.01em; text-wrap: balance;
  color: var(--fg); }
.rd-ag2 .ag2-prop .why { margin: 0; color: var(--muted); font: 400 15px/1.6 var(--f); }
.rd-ag2 .ag2-prop .ev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rd-ag2 .ag2-prop .ev .c { background: #0D0D12; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; }
.rd-ag2 .ag2-prop .ev .c b { display: block; font: 600 16px/1.3 var(--m); font-variant-numeric: tabular-nums; }
.rd-ag2 .ag2-prop .ev .c span { display: block; color: var(--dim); font: 400 12px/1.35 var(--f); margin-bottom: 3px; }
@media (max-width: 560px) { .rd-ag2 .ag2-prop .ev { grid-template-columns: 1fr; } }
.rd-ag2 .ag2-prop .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  animation: ag2fade .25s ease-out both; }
.rd-ag2 .ag2-prop .acts .grow { flex: 1; }
.rd-ag2 .ag2-prop .acts .st { font: 400 12.5px/1 var(--f); color: var(--dim); }
.rd-ag2 .ag2-why { font: 400 14px/1.6 var(--f); color: var(--muted); white-space: pre-wrap;
  background: #0D0D12; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }

/* ---- the drawer ---- */
.rd-ag2 .ag2-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 340px; max-width: 100%; z-index: 5;
  background: #0D0D11; border-left: 1px solid var(--line2); display: flex; flex-direction: column;
  box-shadow: -20px 0 40px rgba(0,0,0,.4); animation: ag2slide .26s cubic-bezier(.2,.7,.2,1) both; }
.rd-ag2 .ag2-drawer[hidden] { display: none; }
.rd-ag2 .ag2-drawer .dh { display: flex; align-items: center; padding: 18px 20px;
  border-bottom: 1px solid var(--line); }
.rd-ag2 .ag2-drawer .dh b { font: 600 15px/1 var(--f); }
.rd-ag2 .ag2-drawer .dh .grow { flex: 1; }
.rd-ag2 .ag2-drawer .dbody { overflow: auto; padding: 4px 20px 24px; }
.rd-ag2 .ag2-drawer section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.rd-ag2 .ag2-drawer section:last-child { border-bottom: 0; }
.rd-ag2 .ag2-drawer h4 { margin: 0 0 12px; font: 600 11.5px/1 var(--f); letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); }
.rd-ag2 .ag2-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #121217;
  border: 1px solid var(--line); padding: 3px; border-radius: 10px; }
.rd-ag2 .ag2-seg button { border: 0; background: transparent; color: var(--muted); font: 500 12.5px/1 var(--f);
  padding: 8px 0; border-radius: 7px; cursor: pointer; font-family: var(--f); transition: background .15s, color .15s; }
.rd-ag2 .ag2-seg button.on[data-mode="on"] { background: var(--okbg); color: var(--ok); }
.rd-ag2 .ag2-seg button.on[data-mode="paused"] { background: var(--amberbg); color: var(--amber); }
.rd-ag2 .ag2-seg button.on[data-mode="off"] { background: #22222B; color: var(--muted); }
.rd-ag2 .ag2-hint { margin: 10px 0 0; color: var(--dim); font: 400 12.5px/1.45 var(--f); }
.rd-ag2 .ag2-pause { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rd-ag2 .ag2-pause .k { font: 400 12.5px/1 var(--f); color: var(--dim); margin-right: 2px; }
.rd-ag2 .ag2-pause.hidden { display: none; }
.rd-ag2 .ag2-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rd-ag2 .ag2-grid3 div { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 11px; }
.rd-ag2 .ag2-grid3 b { display: block; font: 600 15px/1.2 var(--m); font-variant-numeric: tabular-nums; }
.rd-ag2 .ag2-grid3 span { display: block; color: var(--dim); font: 400 11.5px/1.3 var(--f); margin-bottom: 3px; }
.rd-ag2 .ag2-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.rd-ag2 .ag2-rows > div { display: flex; justify-content: space-between; gap: 12px; font: 400 13.5px/1.6 var(--f);
  padding: 2px 0; }
.rd-ag2 .ag2-rows span { color: var(--dim); } .rd-ag2 .ag2-rows b { font-weight: 500; text-align: right; }
.rd-ag2 .ag2-does { margin: 0; font: 400 13.5px/1.6 var(--f); color: var(--muted); }
.rd-ag2 .ag2-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; font: 400 13.5px/1.45 var(--f); }
.rd-ag2 .ag2-row > div { flex: 1; min-width: 0; }
.rd-ag2 .ag2-row > div b { display: block; font: 500 14px/1.4 var(--f); }
.rd-ag2 .ag2-row > div span { display: block; color: var(--dim); font: 400 12.5px/1.45 var(--f); }
.rd-ag2 .ag2-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-ag2 .ag2-chips span { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line2);
  font: 400 12.5px/1 var(--f); color: var(--muted); }
.rd-ag2 .ag2-dir { display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 400 13.5px/1.4 var(--f);
  margin-bottom: 6px; }
.rd-ag2 .ag2-dir span { flex: 1; } .rd-ag2 .ag2-dir small { color: var(--dim); }

/* ---- phone: the list IS the first screen, and an agent opens full width with a way back ---- */
.rd-ag2 .ag2-back { display: none; }
@media (max-width: 760px) {
  .rd-ag2 .ag2-rail { width: 100%; border-right: 0; }
  .rd-ag2 .ag2-main { display: none; }
  .rd-ag2.on-agent .ag2-rail { display: none; }
  .rd-ag2.on-agent .ag2-main { display: flex; }
  .rd-ag2 .ag2-back { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
    border: 1px solid var(--line2); border-radius: 10px; background: #15151A; color: var(--fg); cursor: pointer; }
  .rd-ag2 .ag2-back svg { width: 18px; height: 18px; }
  .rd-ag2 .ag2-head .t { flex: 1 1 auto; min-width: 0; }
  .rd-ag2 .ag2-head .grow { display: none; }
  .rd-ag2 .ag2-head .ag2-status { display: none; }   /* the drawer is where it is set, and the room is tight */
  .rd-ag2 .ag2-head .av { display: none; }           /* the back arrow owns the left edge */
  .rd-ag2 .ag2-drawer { width: 100%; }
  .rd-ag2 .ag2-col { padding: 20px 16px; }
  .rd-ag2 .ag2-head { padding: 12px 16px; }
  .rd-ag2.has-chat .ag2-scroll { max-height: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-ag2 *, .rd-ag2 *::before, .rd-ag2 *::after { animation: none !important; transition: none !important; }
}


/* The shell's chat lives inside the agents main column now: it fills what is left under the header and the
   proposals, instead of the fixed-height sheet it was when it floated in a dock. */
.rd-ag2 .ag2-slot { flex: 1 1 auto; min-height: 0; display: flex; }
.rd-ag2 .ag2-slot > .ag-chat { flex: 1; min-height: 0; }
/* On a phone the old chat went full screen (position:fixed, inset:0, 100dvh) because it used to be a sheet.
   Inside the agents frame it is a panel in a column, so it stays in its slot — otherwise it covers the header
   it belongs under, and the back arrow cannot be tapped. */
body[data-screen="agents"] .rd-ag2 #ag-chat:not(.hidden) { position: static !important; inset: auto !important;
  z-index: auto !important; background: transparent !important; overflow: hidden !important;
  min-height: 0 !important; }
/* and the same specificity as the phone rule that set it to 100dvh, or the composer lands off the screen */
body[data-screen="agents"] .rd-ag2 #ag-chat:not(.hidden) .ag-chat-sheet { height: 100% !important;
  max-height: none !important; border-radius: 0 !important; }
body[data-screen="agents"] .rd-ag2 .ag-chat-sheet { height: 100% !important; max-height: none !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.rd-ag2 .ag-chat-head { display: none; }            /* the agents header above it already says who this is */
.rd-ag2 .ag-chat-body { max-width: 740px; margin: 0 auto; width: 100%; font-size: 16px; line-height: 1.65; }
/* a short conversation sits at the BOTTOM, against the composer, the way a chat does — and a long one still
   scrolls from the top, because this is a margin and not a justify-content */
.rd-ag2 .ag-chat-body > *:first-child { margin-top: auto; }
.ag-older { align-self: center; color: var(--rd-subtle); font: 400 12.5px/1 var(--rd-font); padding: 8px 0; }
.rd-ag2 .ag-chat-foot, .rd-ag2 .ag-chat-composer { max-width: 740px; margin: 0 auto; width: 100%; }
.rd-ag2 .ag-msg { animation: ag2rise .24s ease-out both; }
@media (prefers-reduced-motion: reduce) { .rd-ag2 .ag-msg { animation: none; } }

/* My messages carry my picture; the agent's do not need one, its name is in the header. */
.ag-msg.me { display: flex; gap: 10px; align-items: flex-start; justify-content: flex-end; }
.ag-msg.me .ag-me-av { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; order: 2;
  display: grid; place-items: center; overflow: hidden; background: var(--rd-accent-bg, #1E1A3A);
  color: var(--rd-accent); font: 600 11px/1 var(--rd-font); }
.ag-msg.me .ag-me-av img { width: 100%; height: 100%; object-fit: cover; }
.ag-msg.me .ag-msg-in { min-width: 0; }

/* ---------- the chat bubbles: compact, lavender, never wider than seven tenths of the pane ---------- */
/* A reply that filled 85% of a 740px column read as a wall; mine was a solid block of primary purple, which
   put the one accent on every line I had ever typed. Mine is now the accent's own soft surface, the agent's
   is the raised surface it always was, and neither crosses 70%. */
.rd-ag2 .ag-msg, .rd-ag2 .ag-bub { max-width: 70%; padding: 9px 13px; font-size: 15px; line-height: 1.55;
  border-radius: 14px 14px 14px 6px; }
.rd-ag2 .ag-bub.me { max-width: 70%; border-radius: 14px 14px 6px 14px;
  background: var(--rd-accent-bg); color: var(--rd-text); border: 1px solid var(--rd-accent-border); }
.rd-ag2 .ag-msg.me b, .rd-ag2 .ag-msg.me strong { color: var(--rd-text); }
/* my row keeps the avatar OUTSIDE the bubble, so the bubble itself is what the seven tenths measures: the
   row is 78% of the pane, the avatar and its gap take 38px of that, and the bubble gets the rest */
.rd-ag2 .ag-msg.me { background: transparent; border: 0; padding: 0; max-width: 78%; }
.rd-ag2 .ag-msg.me .ag-msg-in { padding: 9px 13px; border-radius: 14px 14px 6px 14px;
  background: var(--rd-accent-bg); border: 1px solid var(--rd-accent-border); color: var(--rd-text); }
.rd-ag2 .ag-msg.them, .rd-ag2 .ag-bub.them { background: var(--rd-raised-2);
  border: 1px solid var(--rd-hair-2); }
/* a table or a block card inside an answer needs the room, so only the prose is held to seven tenths */
.rd-ag2 .ag-msg.them:has(table), .rd-ag2 .ag-msg.them:has(.agb) { max-width: 100%; }
@media (max-width: 760px) {
  .rd-ag2 .ag-msg, .rd-ag2 .ag-bub, .rd-ag2 .ag-msg.me { max-width: 88%; }
}

/* ---------- "Running now": the card above the chat while a run is in flight ---------- */
.ag2-run-card { padding: 13px 15px 14px; border-radius: var(--rd-r-card, 14px); background: var(--rd-surface);
  border: 1px solid var(--rd-accent-border); display: flex; flex-direction: column; gap: 9px; }
.ag2-run-card .rc-top { display: flex; align-items: center; gap: 9px; }
.ag2-run-card .rc-top b { font: 600 14px/1.3 var(--rd-font); color: var(--rd-text); }
.ag2-run-card .grow { flex: 1 1 auto; }
.ag2-run-card .rc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rd-accent);
  flex: 0 0 auto; animation: rcpulse 1.8s ease-in-out infinite; }
@keyframes rcpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ag2-run-card .rc-step, .ag2-run-card .rc-age { font: 400 12.5px/1.3 var(--rd-font); color: var(--rd-subtle); }
.ag2-run-card .rc-top b, .ag2-run-card .rc-age { white-space: nowrap; }
/* On a phone the step is its own line, so neither it nor the title breaks mid-word across the header row. */
@media (max-width: 560px) {
  .ag2-run-card .rc-top { flex-wrap: wrap; }
  .ag2-run-card .rc-step { order: 4; flex: 1 0 100%; }
  .ag2-run-card .rc-title { white-space: normal; }
}
.ag2-run-card .rc-title { font: 500 13.5px/1.45 var(--rd-font); color: var(--rd-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag2-run-card .rc-bar { height: 4px; border-radius: var(--rd-r-pill, 999px); background: var(--rd-track);
  overflow: hidden; }
.ag2-run-card .rc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--rd-accent);
  transition: width .3s var(--rd-ease, cubic-bezier(.2, .8, .2, 1)); }
.ag2-run-card .rc-foot { display: flex; align-items: baseline; gap: 12px;
  font: 400 12.5px/1.45 var(--rd-font); }
.ag2-run-card .rc-say { flex: 1 1 auto; min-width: 0; color: var(--rd-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag2-run-card .rc-say.quiet { color: var(--rd-warn-text); }
.ag2-run-card .rc-open { flex: 0 0 auto; color: var(--rd-link); text-decoration: none; }
.ag2-run-card .rc-open:hover { color: var(--rd-link-hover); }
@media (prefers-reduced-motion: reduce) {
  .ag2-run-card .rc-dot { animation: none; }
  .ag2-run-card .rc-bar i { transition: none; }
}

/* Money is money: the mark sits beside the field, because a number input is formatted by the browser's
   locale and showed "1,00" on a comma-decimal machine. */
.gx-money { display: inline-flex; align-items: center; gap: 2px; }
.gx-money i { font-style: normal; color: var(--rd-subtle); font: 500 13px/1 var(--rd-font); }
.gx-money input { width: 72px; }

/* The Growth Analyst's channel controls, inside its Settings drawer. */
#ag2-growth-slot .growth-head, #ag2-growth-slot .gx-seg { display: none; }   /* the drawer already has a title */
#ag2-growth-slot .growth-cards { display: flex; flex-direction: column; gap: 10px; }
#ag2-growth-slot .gx-card { padding: 12px 13px; border-radius: 11px; }
#ag2-growth-slot .gx-row { flex-wrap: wrap; gap: 8px; }
#ag2-growth-slot .gx-toggles { gap: 6px 10px; }
#ag2-growth-slot .growth-reports { margin-top: 10px; }

/* No fal.ai key, no thumbnails: the page is still there, behind one sentence and one button. */
.page[data-page="thumbs"].th-blurred > *:not(#th-falgate) { filter: blur(7px); pointer-events: none; user-select: none; }
.th-falgate { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
  background: color-mix(in srgb, var(--rd-bg) 62%, transparent); }
.th-falgate-card { max-width: 420px; text-align: center; padding: 28px 30px; border-radius: 16px;
  background: var(--rd-surface); border: 1px solid var(--rd-hair-2); box-shadow: var(--rd-shadow-card, 0 20px 50px rgba(0,0,0,.45));
  display: flex; flex-direction: column; gap: 16px; align-items: center; }
.th-falgate-card .t { font: 500 16px/1.5 var(--rd-font); color: var(--rd-text); }
.page[data-page="thumbs"] { position: relative; }
.key-status.ok { color: var(--rd-ok); } .key-status.err { color: var(--rd-err); }

/* ---------- why a video failed, and the thumbnail big enough to judge ---------- */
/* A status that only says "Error" is not a report. This is the explanation, beside the word that claims it. */
.sv-why { position: fixed; z-index: 90; width: 400px; max-width: calc(100vw - 24px); max-height: 70vh;
  overflow: auto; padding: 16px 18px 18px; border-radius: 14px; background: var(--rd-sheet);
  border: 1px solid var(--rd-border-3); box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  font: 400 13.5px/1.55 var(--rd-font); color: var(--rd-text); }
.sv-why .w-load { color: var(--rd-subtle); }
.sv-why .w-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.sv-why .w-head b { flex: 1; font: 600 15px/1.4 var(--rd-font); }
.sv-why .w-x { appearance: none; border: 0; background: transparent; color: var(--rd-subtle); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 2px; }
.sv-why .w-x:hover { color: var(--rd-text); }
.sv-why .w-what { margin: 0 0 8px; color: var(--rd-text-2); }
.sv-why .w-adv { margin: 0 0 10px; color: var(--rd-subtle); }
.sv-why .w-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; color: var(--rd-subtle);
  font-size: 12.5px; }
.sv-why .w-meta b { color: var(--rd-text-2); font-weight: 500; }
.sv-why .w-tech summary { cursor: pointer; color: var(--rd-link); font-size: 13px; padding: 4px 0; }
.sv-why pre { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--rd-inset);
  border: 1px solid var(--rd-hair-2); color: var(--rd-text-2); font: 400 11.5px/1.5 var(--rd-mono);
  white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
.sv-why .w-log { color: var(--rd-subtle); }
.sv-why .w-acts { margin-top: 14px; }

.sv-lb { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  background: rgba(5, 5, 8, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: svLbIn .16s ease-out both; }
@keyframes svLbIn { from { opacity: 0 } to { opacity: 1 } }
.sv-lb-box { width: 70vw; max-width: 1100px; max-height: 86vh; display: flex; flex-direction: column; gap: 12px; }
.sv-lb-box img { width: 100%; height: auto; max-height: 76vh; object-fit: contain; border-radius: 14px;
  background: var(--rd-inset); border: 1px solid var(--rd-border-2); }
.sv-lb-bar { display: flex; align-items: center; gap: 12px; }
.sv-lb-t { flex: 1; min-width: 0; color: var(--rd-text-2); font: 400 13.5px/1.4 var(--rd-font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-lb-x { appearance: none; border: 1px solid var(--rd-border-3); background: var(--rd-raised);
  color: var(--rd-text); width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-size: 18px;
  line-height: 1; flex: 0 0 auto; }
.sv-lb-x:hover { background: var(--rd-raised-2); }
@media (max-width: 760px) { .sv-lb-box { width: 92vw; } .sv-why { width: calc(100vw - 24px); } }
@media (prefers-reduced-motion: reduce) { .sv-lb { animation: none; } }

/* ---------- the agent drawer: every control, saving as you touch it ---------- */
.rd-ag2 .ag2-sub { margin: 14px 0 8px; font: 500 12px/1 var(--f); color: var(--dim); letter-spacing: .03em; }
.rd-ag2 .ag2-sel { width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line2);
  background: #121217; color: var(--fg); font: 400 13.5px/1.3 var(--f); }
.rd-ag2 .ag2-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 12px; }
.rd-ag2 .ag2-days button { appearance: none; border: 1px solid var(--line); background: #121217;
  color: var(--muted); border-radius: 8px; padding: 8px 0; cursor: pointer; font: 500 12.5px/1 var(--f);
  transition: background .15s, color .15s; }
/* Five solid purple pills in a row was the loudest thing on the panel, for a setting that is not the main
   action. Selected is the accent's own soft surface with its border — the same way every other chosen chip
   in the app reads — so the one accent stays on the one action. */
.rd-ag2 .ag2-days button.on { background: var(--rd-accent-bg-3); border-color: var(--rd-accent-border-2);
  color: var(--rd-text); }
.rd-ag2 .ag2-row input[type="time"], .rd-ag2 .ag2-row input[type="number"],
.rd-ag2 .ag2-row input[type="text"] { width: 128px; flex: 0 0 auto; padding: 7px 9px; border-radius: 9px;
  border: 1px solid var(--line2); background: #121217; color: var(--fg); font: 400 13px/1.2 var(--f); }
.rd-ag2 .ag2-row input[type="text"] { width: 150px; }
.rd-ag2 .ag2-row.hidden { display: none; }
.rd-ag2 .ag2-row.col { display: block; padding-top: 2px; }
.rd-ag2 .ag2-row.col textarea { width: 100%; height: 66px; min-height: 66px; box-sizing: border-box;
  margin-top: 8px; padding: 9px 10px; border-radius: 10px; background: var(--bg);
  border: 1px solid var(--line2); color: var(--fg); font: 400 13px/1.5 var(--f); resize: vertical; }
.rd-ag2 .ag2-said { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rd-ag2 .ag2-said li { padding: 9px 11px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line);
  color: var(--mut); font: 400 13px/1.5 var(--f); }
.rd-ag2 .saving { opacity: .55; }
.rd-ag2 .saved { box-shadow: 0 0 0 2px var(--ok) inset; }
.rd-ag2 .ag2-taglist { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.rd-ag2 .ag2-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px;
  border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); font: 400 12.5px/1 var(--f); }
.rd-ag2 .ag2-tag button { appearance: none; border: 0; background: transparent; color: inherit; opacity: .6;
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.rd-ag2 .ag2-tag button:hover { opacity: 1; }
.rd-ag2 .ag2-taginput { flex: 1 1 90px; min-width: 70px; padding: 6px 8px; border-radius: 999px;
  border: 1px dashed var(--line2); background: transparent; color: var(--fg); font: 400 12.5px/1 var(--f); }
.rd-ag2 .ag2-queue { display: flex; flex-direction: column; gap: 4px; }
.rd-ag2 .ag2-qrow { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--line); font: 400 13px/1.3 var(--f); }
.rd-ag2 .ag2-qrow .n { color: var(--dim); font: 500 11.5px/1 var(--m); width: 14px; flex: 0 0 auto; }
.rd-ag2 .ag2-qrow .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-ag2 .ag2-qrow button { appearance: none; border: 0; background: transparent; color: var(--dim);
  cursor: pointer; font-size: 14px; padding: 0 3px; }
.rd-ag2 .ag2-qrow button:hover:not(:disabled) { color: var(--fg); }
.rd-ag2 .ag2-qrow button:disabled { opacity: .3; cursor: default; }
/* Run now, and the same button once it is running */
.rd-ag2 .ag2-run { flex: 0 0 auto; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* While it runs, the card below says so in full. The button only has to stop looking like the main action,
   so it steps back to a quiet secondary rather than becoming a second amber headline. */
.rd-ag2 .ag2-run.is-running { background: var(--rd-raised); color: var(--rd-muted); font-weight: 400;
  border: 1px solid var(--rd-hair-2); }
.rd-ag2 .ag2-run.is-running::before { content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: currentColor; margin-right: 7px; animation: ag2pulse 1.4s ease-in-out infinite; }
@keyframes ag2pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .rd-ag2 .ag2-run.is-running::before { animation: none; } }
@media (max-width: 760px) { .rd-ag2 .ag2-run { max-width: 120px; } }
.ag-link { color: var(--rd-link); text-decoration: underline; }


/* ================================================================= the phone pass (390px)
   Everything below exists for one reason: a finger is not a mouse pointer. Apple's floor is 44px and it is
   not a style preference — a 13px link is a control you miss, press twice, or press the wrong one beside.
   The rules here give the small controls a 44px TAP AREA without making them look bigger: padding and
   min-height grow the box, the text and icons stay the size they were drawn at.

   Measured by `scripts/phone_pass.py`, which shoots every page at 390px and reports anything that scrolls
   sideways, hangs off the right edge, or is under 44px to press. */
@media (max-width: 760px) {
  /* the top bar: the wordmark and the gear are the two things pressed most, and were 23px and 32px */
  .sb-top .brand, .brand.logo-wordmark, .sb-brand { min-height: 44px; display: inline-flex; align-items: center; }
  .profile .gear, a.gear { width: 44px; height: 44px; border-radius: 10px; }

  /* the spreadsheet's controls */
  .sv-btn, .sv-top .rb { min-height: 44px; }
  .sv-f button, .rd-seg button { min-height: 44px; }
  .sv-more, .sv-a, .rd-tab-add, .st-arrow { min-height: 44px; min-width: 44px; }
  .sv-more, .st-arrow, .rd-tab-add { display: inline-flex; align-items: center; justify-content: center; }
  /* A 14px checkbox is a 14px target, and a pseudo-element cannot enlarge a native one — the browser hit-tests
     the control, not the decoration. So the input itself becomes 44x44 and draws its own 20px box: the same
     checkbox to look at, a whole thumb to press. The negative margins keep the cell the width it was, which
     means the row number beside it is inside the hit area too — pressing either one ticks the row. */
  .sv-n .rd-rowcheck { appearance: none; -webkit-appearance: none; width: 44px; height: 44px;
    margin: 0 -10px 0 -12px; background: none; border: 0; flex: 0 0 auto; vertical-align: middle;
    /* the desktop rule parks it absolutely at left:14px; relative positioning would apply that as an offset */
    position: relative; left: auto; top: auto; transform: none; }
  .sv-n .rd-rowcheck::before { content: ""; position: absolute; left: 50%; top: 50%; width: 19px; height: 19px;
    transform: translate(-50%, -50%); box-sizing: border-box; border-radius: 5px;
    border: 1.5px solid var(--rd-border-3, #3A3A44); background: var(--rd-page, #0B0B0E); }
  .sv-n .rd-rowcheck:checked::before { background: var(--rd-accent); border-color: var(--rd-accent); }
  .sv-n .rd-rowcheck:checked::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px;
    height: 10px; margin: -7px 0 0 -3px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg); }
  /* centred, the two targets drifted into each other; left-aligned they sit side by side with a gap */
  .sv-table td.sv-n { padding-left: 12px; padding-right: 4px; text-align: left; }
  /* The ··· menu is how a row is opened, downloaded, re-thumbnailed and deleted, so it is not something to
     shrink away on the device it is hardest to hit. Two 44px targets and the row number need room, so the
     first column is given it — the table scrolls sideways anyway, and this column stays pinned. */
  .sv-table col.c-n { width: 104px; }
  .sv-table col.c-thumb { width: 54px; }
  .sv-table col.c-title { width: 150px; }
  .sv-table tr.sv-cols th:nth-child(2), .sv-table td:nth-child(2) { left: 104px; }
  .sv-table tr.sv-cols th:nth-child(3), .sv-table td:nth-child(3) { left: 158px; }
  .sv-more { right: 2px; padding: 0; }

  /* inline text actions on a card — Connect, Edit, Open — were 13-20px tall */
  .rb-link, .rd-ch-detail a.a, .rd-ch-detail button.a, .rd-ch-actions a, .rd-ch-actions button {
    display: inline-flex; align-items: center; min-height: 44px; }

  /* the home stats pill is a button, and the one on this page people actually hunt for */
  #rd-home-stats-slot .hs-pill { min-height: 44px; }
}

/* ===================================================================== GROWTH ANALYST PANEL
   The analyst's own pane. It was a line of text saying it was not scheduled and a button to a drawer, which
   is how it came to be off on every channel: there was nowhere to turn it on, nowhere to pick what it reads,
   and no reason given for a channel it could not read. */
.ga-panel { display: flex; flex-direction: column; gap: 20px; padding: 4px 2px 24px; }
.ga-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ga-master { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.ga-master input, .ga-ch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ga-sw { width: 42px; height: 24px; border-radius: 999px; background: var(--rd-track); border: 1px solid var(--rd-border-3);
  position: relative; flex: 0 0 auto; transition: background .16s var(--rd-ease), border-color .16s var(--rd-ease); }
.ga-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--rd-muted); transition: transform .16s var(--rd-ease), background .16s var(--rd-ease); }
.ga-master input:checked + .ga-sw, .ga-ch input:checked + .ga-sw { background: var(--rd-accent-bg-3); border-color: var(--rd-accent-border-2); }
.ga-master input:checked + .ga-sw::after, .ga-ch input:checked + .ga-sw::after { transform: translateX(18px); background: var(--rd-primary); }
.ga-master input:focus-visible + .ga-sw, .ga-ch input:focus-visible + .ga-sw { outline: 2px solid var(--rd-primary); outline-offset: 2px; }
.ga-sw.sm { width: 34px; height: 20px; }
.ga-sw.sm::after { width: 14px; height: 14px; }
.ga-ch input:checked + .ga-sw.sm::after { transform: translateX(14px); }
.ga-master-t { display: flex; flex-direction: column; gap: 2px; }
.ga-master-t b { font: 600 15px/1.2 var(--rd-font); color: var(--rd-text); }
.ga-master-t small { font: 400 12px/1.2 var(--rd-font); color: var(--rd-subtle); }
.ga-when { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.ga-when small { font: 400 11px/1.2 var(--rd-font); color: var(--rd-subtle); text-transform: uppercase; letter-spacing: .04em; }
.ga-when b { font: 500 12.5px/1.2 var(--rd-font); color: var(--rd-text); white-space: nowrap; }
.ga-rowline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ga-lbl { font: 400 12px/1.2 var(--rd-font); color: var(--rd-subtle); text-transform: uppercase; letter-spacing: .04em; }
.ga-money { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 10px; border-radius: 999px;
  background: var(--rd-track); border: 1px solid var(--rd-border-3); }
.ga-money i { font-style: normal; color: var(--rd-subtle); font-size: 12px; }
.ga-money input { width: 48px; background: transparent; border: 0; outline: none; color: var(--rd-text);
  font: 500 13px/1 var(--rd-mono); }
.ga-chks { display: flex; gap: 8px; flex-wrap: wrap; }
.ga-chk { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--rd-border-2); color: var(--rd-muted); font: 400 12.5px/1 var(--rd-font); cursor: pointer; }
.ga-chk input { accent-color: var(--rd-primary); }
.ga-chk:hover { color: var(--rd-text); }
.ga-chans { display: flex; flex-direction: column; gap: 6px; }
.ga-chans-h { margin-bottom: 2px; }
.ga-ch { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--rd-raised); border: 1px solid var(--rd-border-2); cursor: pointer;
  transition: border-color .14s var(--rd-ease), background .14s var(--rd-ease); min-height: 56px; }
.ga-ch:hover { border-color: var(--rd-border-3); }
.ga-ch.on { background: var(--rd-raised-2); }
.ga-logo { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; background: var(--rd-track); }
.ga-logo.ph { border: 1px solid var(--rd-border-2); }
.ga-ch-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ga-ch-t b { font: 500 13.5px/1.25 var(--rd-font); color: var(--rd-text); }
.ga-ch-t small { font: 400 11.5px/1.2 var(--rd-font); color: var(--rd-subtle); }
.ga-state { font: 400 12px/1 var(--rd-font); white-space: nowrap; }
.ga-state.ready { color: var(--rd-ok, #3DDC97); }
.ga-state.thin { color: #E8C45E; }
.ga-state.blocked { color: var(--rd-subtle); }
.ga-ch-note { padding: 0 14px 2px 72px; font: 400 11.5px/1.4 var(--rd-font); color: var(--rd-subtle); margin-top: -2px; }
.ga-report { padding: 14px 16px; border-radius: 12px; background: var(--rd-raised); border: 1px solid var(--rd-border-2);
  display: flex; flex-direction: column; gap: 6px; }
.ga-report p { margin: 0; font: 400 13px/1.55 var(--rd-font); color: var(--rd-text); }
.ga-report small { font: 400 11.5px/1.2 var(--rd-font); color: var(--rd-subtle); }
.ga-vs { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--rd-border-2); display: flex;
  flex-direction: column; gap: 8px; }
.ga-vs b { font: 600 13px/1.3 var(--rd-font); color: var(--rd-text); }
.ga-vs p { margin: 0; font: 400 12.5px/1.6 var(--rd-font); color: var(--rd-muted); }
@media (max-width: 760px) {
  .ga-top { gap: 10px; }
  .ga-when { text-align: left; }
  .ga-ch { flex-wrap: wrap; }
  .ga-ch-note { padding-left: 14px; }
}
/* The analyst's schedule switch has its own class on purpose. Inside .rd-ag2 the class `.pill` already means
   a NOTIFICATION BADGE — 20px tall, round, filled with the accent — so `rd-seg pill` there came out as three
   stacked badges sitting on top of the row beneath. This is the kind of collision that has broken this page
   before, and the fix is a name of its own rather than a more specific override. */
.ga-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--rd-track); border: 1px solid var(--rd-border-3); width: max-content; flex: 0 0 auto; }
.ga-seg button { height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
  color: var(--rd-muted); font: 400 12.5px/1 var(--rd-font); cursor: pointer; white-space: nowrap;
  transition: background .12s var(--rd-ease), color .12s var(--rd-ease); }
.ga-seg button:hover { color: var(--rd-text); }
.ga-seg button.on { background: var(--rd-text); color: var(--rd-on-light); font-weight: 600; }
.ga-seg button:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: 2px; }
/* The agent row says who it is, which channel it works on, and what it is about to do. It used to show the
   agent's name and a bare time like "Tue 07:00", which is a time with no verb and no channel. */
.rd-ag2 .ag2-it .ch { display: block; font: 400 11.5px/1.3 var(--rd-font); color: var(--rd-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================================================
   ONE SHARED SYSTEM
   The app already had colours, radii and an easing. What it did not have was a spacing scale, a type
   scale, named durations, or buttons that agreed with each other about how tall they are. Those are here,
   and the rules below use them rather than one-off numbers.
   ===================================================================================================== */
:root {
  /* spacing — a 4/8 grid and nothing between the steps */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;

  /* radius — four values. `--rd-r-ctl` was 10px, which is the sort of number that gets copied once and then
     never matches anything again; controls are 12 and small things are 8. */
  --rd-r-sm: 8px;
  --rd-r-ctl: 12px;

  /* type — a fixed scale. Three sizes to a screen is the rule; having eight to choose from is how a screen
     ends up with six. */
  --t-12: 12px; --t-13: 13px; --t-15: 15px; --t-17: 17px; --t-20: 20px; --t-24: 24px; --t-32: 32px; --t-44: 44px;

  /* motion — three durations and two curves, named for what they are for */
  --dur-hover: 150ms; --dur-panel: 220ms; --dur-page: 300ms;
  --ease-std: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);

  /* controls — three heights, used everywhere. 44 on a phone, because a thumb is not a cursor. */
  --h-sm: 32px; --h-md: 40px; --h-lg: 48px;
}

/* ---- BUTTONS: three types, three heights, every state ------------------------------------------------
   Primary is lavender and there is one per screen. Secondary is a quiet outline. Ghost is text. Each one
   has a hover, a press, a keyboard focus ring, a disabled state that does not pretend to be pressable, and
   a loading state that keeps its width so the row does not jump. */
.rb { height: var(--h-md); padding: 0 var(--s4); border-radius: var(--rd-r-ctl);
  transition: background var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std),
              color var(--dur-hover) var(--ease-std), transform 90ms var(--ease-std), opacity var(--dur-hover) var(--ease-std); }
.rb.sm { height: var(--h-sm); padding: 0 var(--s3); font-size: var(--t-12); border-radius: var(--rd-r-sm); }
.rb.lg { height: var(--h-lg); padding: 0 var(--s6); font-size: var(--t-15); }
.rb:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.97); }
.rb:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: 2px; }
.rb:disabled, .rb[aria-disabled="true"] { opacity: .4; cursor: default; transform: none; }
.rb:disabled:hover, .rb[aria-disabled="true"]:hover { background: inherit; border-color: inherit; color: inherit; }
.rb.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.rb.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px;
  border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: .9;
  animation: rb-spin .75s linear infinite; color: var(--rd-text); }
.rb-primary.is-loading::after { color: #FFFFFF; }
@keyframes rb-spin { to { transform: rotate(360deg); } }

/* Inputs, selects and segmented controls share the button heights, so a row of them sits on one baseline. */
.rd-input, .rd-select, input[type="text"].rd-field, .rd-seg { min-height: var(--h-md); }

/* A thumb is bigger than a cursor. */
@media (pointer: coarse) {
  .rb, .rd-chip, .ga-chk { min-height: 44px; }
  .rb.sm { min-height: 44px; }
}

/* ---- PAGE ARRIVAL ------------------------------------------------------------------------------------
   A route change fades and lifts rather than snapping. 8px, 300ms, transform and opacity only — nothing
   here animates a layout property, so it cannot cost a frame. */
@keyframes rd-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rd-enter-fade { from { opacity: 0; } to { opacity: 1; } }
/* FILL `backwards`, NEVER `both`. A filling transform animation stays in effect after it finishes, and an
   element with a transform in effect is the containing block for its `position: fixed` descendants — so
   `both` turned every page into the viewport for anything fixed inside it. The Agents frame is
   `position: fixed; inset: 0`, so it resolved against a page box of zero height and the whole screen
   collapsed: the rail clipped to twelve pixels, the chat to nothing. `backwards` ends the effect when the
   animation ends, which leaves the page exactly as it was written. */
.page.active { animation: rd-enter var(--dur-page) var(--ease-std) backwards; }
/* And the page whose layout IS a fixed frame only fades, so it does not collapse for the 300ms either. */
.page[data-page="agents"].active { animation-name: rd-enter-fade; }

/* ---- WHEN SOMEBODY ASKS FOR LESS MOTION, THEY GET NONE -----------------------------------------------
   Not "less". The setting exists for people who are made ill by movement, so this turns off animation,
   transitions and smooth scrolling across the whole app rather than softening them. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  .page.active { animation: none; }
}

/* ---- AGENT SETTINGS: what it makes ------------------------------------------------------------------
   Length is a row of named choices, the voice is a name with a sample to play, and the thumbnail style is
   a picture. All three used to be a box you typed into: minutes where 0 secretly meant "the channel's",
   an ElevenLabs id, and a style name you had to already know. */
.ga-seg.wrap { flex-wrap: wrap; width: auto; }
.rd-ag2 .ag2-row.col { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); }
.rd-ag2 .ag2-row.col > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.rd-ag2 .ag2-vplay { flex: 0 0 auto; margin-left: var(--s2); }
.rd-ag2 .ag2-vadv { margin: var(--s1) 0 var(--s2); }
.rd-ag2 .ag2-vadv summary { font: 400 11.5px/1.3 var(--rd-font); color: var(--rd-faint); cursor: pointer; list-style: none; }
.rd-ag2 .ag2-vadv summary::-webkit-details-marker { display: none; }
.rd-ag2 .ag2-vadv summary:hover { color: var(--rd-muted); }
.rd-ag2 .ag2-vadv input { width: 100%; margin-top: var(--s2); }
.rd-ag2 .ag2-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s2); }
.rd-ag2 .ag2-thumb { display: flex; flex-direction: column; gap: var(--s1); padding: 0; border-radius: var(--rd-r-sm);
  background: transparent; border: 1px solid var(--rd-border-2); cursor: pointer; overflow: hidden;
  transition: border-color var(--dur-hover) var(--ease-std); }
.rd-ag2 .ag2-thumb:hover { border-color: var(--rd-border-3); }
.rd-ag2 .ag2-thumb.on { border-color: var(--rd-accent-border-2); }
.rd-ag2 .ag2-thumb img, .rd-ag2 .ag2-thumb .ph { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background: var(--rd-track); }
.rd-ag2 .ag2-thumb .nm { padding: 0 var(--s1) var(--s1); font: 400 10.5px/1.3 var(--rd-font); color: var(--rd-subtle);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-ag2 .ag2-thumb.on .nm { color: var(--rd-text); }

/* ---- AGENT SETTINGS: a wide panel with a sentence at the top ----------------------------------------
   It was a 340px slide-over of switches. A page of switches does not tell anybody what the agent actually
   does, so there is one sentence at the top that stays true as the switches change, and the panel is wide
   enough to read the sections rather than scroll a column. */
.rd-ag2 .ag2-drawer { width: min(560px, 100%); display: flex; flex-direction: column;
  transition: transform var(--dur-panel) var(--ease-sheet); }
.rd-ag2 .ag2-sum { margin: 0; padding: 0 20px 16px; font: 400 13.5px/1.6 var(--rd-font); color: var(--rd-text-2);
  border-bottom: 1px solid var(--rd-border-2); }
.rd-ag2 .ag2-sum:empty { display: none; }
.rd-ag2 .ag2-drawer .dbody { flex: 1; min-height: 0; }
.rd-ag2 .ag2-dfoot { display: flex; align-items: center; gap: var(--s2); padding: 12px 20px;
  border-top: 1px solid var(--rd-border-2); background: var(--rd-sheet); min-height: 52px; }
.rd-ag2 .ag2-saved { font: 400 12.5px/1 var(--rd-font); color: var(--rd-ok); opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-std); }
.rd-ag2 .ag2-saved.on { opacity: 1; }
@media (max-width: 620px) { .rd-ag2 .ag2-drawer { width: 100%; } }


/* ---------- a learning proposal that can be read and checked ---------- */
/* The old card was a headline plus three numbers, which is how "33% against 67%" and "names 4.14 people"
   reached the owner looking authoritative. This one shows the claim, the titles it is drawn from with their
   views so it can be checked by eye, how confident it is and why, and what approval actually changes. */
.ag2-prop.rich .proof { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 12px 0 10px; }
.ag2-prop.rich .proof .half h4 { margin: 0 0 6px; font: 600 11px/1 var(--rd-font); letter-spacing: .06em;
  text-transform: uppercase; color: var(--rd-subtle); }
.ag2-prop.rich .proof ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ag2-prop.rich .proof li { display: flex; align-items: baseline; gap: 8px;
  font: 400 12.5px/1.45 var(--rd-font); color: var(--rd-text-2); }
.ag2-prop.rich .proof li .t { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ag2-prop.rich .proof li .v { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--rd-text); }
.ag2-prop.rich .proof li.up .v { color: var(--rd-ok-text); }
.ag2-prop.rich .proof li.down .v { color: var(--rd-subtle); }
.ag2-prop.rich .conf { margin: 0 0 8px; font: 400 12.5px/1.5 var(--rd-font); color: var(--rd-subtle); }
.ag2-prop.rich .ifok { margin: 0 0 12px; padding: 9px 11px; border-radius: 10px;
  background: var(--rd-inset); border: 1px solid var(--rd-hair-2);
  font: 400 13px/1.5 var(--rd-font); color: var(--rd-text-2); }
.ag2-prop.rich .ifok b { color: var(--rd-text); font-weight: 600; }
@media (max-width: 620px) { .ag2-prop.rich .proof { grid-template-columns: 1fr; } }