/* ═══════════════════════════════════════════════════════════════════════
   SILK — cinematic design overlay for Backlot / GinBox AI.
   Loaded AFTER app.css. Cinema-grade tokens + component chrome only.
   Core untouched: all DOM ids, JS hooks, behaviour stay identical.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* GinBox midnight — black graphite, steel gray and restrained deep blue. */
  --bg:          #07090d;
  --bg-2:        #0a0e14;
  --panel:       rgba(10, 14, 20, 0.94);
  --panel-2:     rgba(17, 23, 34, 0.98);
  --line:        rgba(122, 145, 176, 0.13);
  --line-2:      rgba(79, 119, 181, 0.32);
  --text:        #e8eef7;
  --text-2:      #aab7c9;
  --text-3:      #6d7d92;
  --accent:      #527fc9;
  --accent-2:    #315b9d;
  --accent-ink:  #f7fbff;
  --glow:        rgba(70, 116, 190, 0.28);
  --live:        #5b88d1;
  --ice:         #789cd6;
  --champagne:   #c6d2e3;
  --sage:        #70b79a;
  --amber:       #d7a657;
  --rose:        #d98585;
  --lilac:       #8799bd;
  --copper:      #a8795a;
  --good:        #70b79a;
  --warn:        #d7a657;
  --bad:         #da7d7d;
  --r:           12px;
  --r-lg:        16px;
  --left-w:      268px;
  --right-w:     338px;
  --split:       80%;
  --grad:        linear-gradient(180deg, #638bd1 0%, #365f9f 100%);
  --sans:        "Space Grotesk", system-ui, sans-serif;
  --mono:        "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --display:     "Instrument Serif", "Times New Roman", serif;
  --shadow-1:    0 1px 2px rgba(0,0,0,.52), 0 10px 28px rgba(0,0,0,.38);
  --shadow-2:    0 22px 56px rgba(0,0,0,.58), 0 4px 14px rgba(0,0,0,.42);
  --ease:        cubic-bezier(.2,.7,.2,1);
}

html, body {
  background:
    radial-gradient(88% 70% at 50% -12%, rgba(53, 83, 132, .10), transparent 54%),
    radial-gradient(52% 48% at 50% 46%, rgba(35, 57, 91, .055), transparent 58%),
    radial-gradient(46% 40% at 100% 8%, rgba(74, 91, 118, .035), transparent 50%),
    var(--bg);
  font: 13.5px/1.5 var(--sans);
  color: var(--text);
}

/* Film grain — tiny, decorative, never intercepts clicks. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .028;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ── scrollbars — thin, cyan-tinted ────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(82, 127, 201,.30);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 136, 209,.48);
  background-clip: padding-box;
}

/* Transitions on buttons / chips / shots only. No !important — reduce-motion
   in app.css already damps duration to .001ms. */
button, .tb, .vpb, .chip, .mini, .shot, .shot-add, .gen-run, .btn {
  transition:
    background .16s var(--ease),
    border-color .16s var(--ease),
    color .16s var(--ease),
    opacity .16s var(--ease),
    transform .16s var(--ease),
    box-shadow .16s var(--ease),
    filter .16s var(--ease);
}

/* ══ TOP BAR — floating glass, inner highlight ─────────────────────────── */
#topbar {
  position: relative;
  z-index: 220;
  padding: 0 14px;
  background: rgba(8, 11, 16, .92);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(1.45);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
}
.brand span {
  font-family: "Unbounded", var(--sans);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .10em;
  color: var(--champagne);
}
.brand .mark {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 0 12px rgba(76, 120, 194,.38));
}

.tb {
  border-radius: 8px;
  padding: 6px 11px;
  font-weight: 500;
  color: var(--text-2);
}
.tb:hover:not(:disabled) {
  background: rgba(255,255,255,.07);
  color: var(--text);
}
.tb-icon {
  min-width: 30px;
  background: rgba(70, 111, 178, .14);
  border: 1px solid rgba(82, 127, 201, .34);
  color: var(--text);
}
.tb-icon:hover:not(:disabled) {
  background: rgba(70, 111, 178, .24);
  border-color: rgba(91, 136, 209, .58);
  color: var(--text);
}
.tb-sep { background: var(--line); }

.tb-accent,
.tb-accent:hover:not(:disabled) {
  background: var(--grad);
  color: var(--accent-ink);
  border: 0;
  box-shadow:
    0 8px 22px -10px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.55);
  filter: none;
}
.tb-accent:hover:not(:disabled) { filter: brightness(1.08); }

.project-name {
  background: rgba(20, 12, 8, .38);
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 500;
}
.project-name:hover { border-color: var(--line-2); background: rgba(20, 12, 8, .50); }
.project-name:focus {
  border-color: var(--live);
  box-shadow: 0 0 0 3px rgba(94, 196, 176, .22);
}

/* Account chip — glass pill (wins over injected account.css via #account). */
#account .gb-chip {
  background: rgba(26, 18, 12, .58);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
}
#account .gb-chip:hover { border-color: rgba(94, 196, 176, .40); }

/* ══ PANELS — glass, hairline, inner highlight, blur ───────────────────── */
#left, #right, #timeline, #output-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,236,210,.08);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}
#center {
  background: rgba(22, 14, 10, .42);
  border: 1px solid rgba(94, 196, 176, .16);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1), inset 0 0 80px rgba(94, 196, 176, .05);
  backdrop-filter: none;
}

.panel-head { border-bottom-color: var(--line); }
.panel-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(242, 240, 234, .42);
}
.count {
  font-family: var(--mono);
  background: rgba(94, 196, 176,.08);
  border: 1px solid rgba(94, 196, 176,.14);
  color: var(--text-3);
}

/* ── chips / mini / tree rows — pills, selected = cyan wash + hairline ─── */
.mini, .chip {
  border-radius: 999px;
  color: var(--text-2);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
.mini:hover, .chip:hover {
  background: rgba(255,255,255,.09);
  color: var(--text);
  border-color: var(--line-2);
}
.chip.active {
  background: rgba(94, 196, 176, .16);
  border-color: rgba(94, 196, 176, .42);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(94, 196, 176, .18);
}
.mini.danger { color: #ff9d9d; }
.mini.danger:hover { background: rgba(255,107,125,.14); color: #ffb3b3; }

.tree-section {
  font-family: var(--mono);
  letter-spacing: .16em;
  color: rgba(242, 240, 234, .45);
}
.tree .row { border-radius: 6px; }
.tree .row:hover { background: var(--panel-2); }
.tree .row.selected,
.tree .row.sel {
  background: rgba(94, 196, 176, .14);
  border-color: rgba(94, 196, 176, .32);
  color: var(--text);
}
.tree .row.selected::before,
.tree .row.sel::before {
  content: none;
  box-shadow: none;
  background: none;
}
.world-folder {
  background: rgba(26, 18, 12, .55);
  border-color: var(--line);
}
.world-folder:hover,
.world-folder.open { background: var(--panel-2); border-color: var(--line-2); }

/* ══ RAIL — workflow steps as glass cards ──────────────────────────────── */
.rail .step {
  background: rgba(26, 18, 12, .55);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.rail .step.open {
  border-color: rgba(94, 196, 176, .28);
  background: rgba(94, 196, 176, .05);
  box-shadow: inset 3px 0 0 var(--live), inset 0 1px 0 rgba(255,236,210,.08);
}
.rail .step.gen-static {
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.step-head { padding: 9px 12px; }
.step-title { font-weight: 600; letter-spacing: .01em; }

.step-num {
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--display);
  font-weight: 600;
}
.step.open .step-num {
  background: var(--grad);
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ══ NUMERIC / SEARCH / FIELDS — dark inset, cyan focus ────────────────── */
.search-row input,
.num,
.num-row .num,
.num-inline,
.field input[type="number"],
.field input[type="text"],
.field textarea,
.field select,
.save-name-input {
  background: rgba(16, 10, 6, .48);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(16, 8, 4, .45);
}
.search-row input:focus,
.num:focus-within,
.num-inline:focus,
.field input:focus,
.field textarea:focus,
.field select:focus,
.save-name-input:focus {
  border-color: var(--live);
  box-shadow: 0 0 0 3px rgba(94, 196, 176, .20), inset 0 1px 2px rgba(16, 8, 4, .35);
  outline: none;
}
.search-row input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none' stroke='%239a8668' stroke-width='1.8' stroke-linecap='round'><circle cx='7' cy='7' r='4.6'/><path d='m10.6 10.6 3 3'/></svg>");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 13px;
  padding-left: 28px;
}
.search-row input:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none' stroke='%235ec4b0' stroke-width='1.8' stroke-linecap='round'><circle cx='7' cy='7' r='4.6'/><path d='m10.6 10.6 3 3'/></svg>");
}
.num span { color: var(--text-3); font-family: var(--mono); letter-spacing: .05em; }
input[type="range"] { accent-color: var(--accent); }

/* ══ VIEWPORT TOOL STRIP — floating pill, active = live ───────────────── */
.vp-toolbar {
  border-radius: 14px;
  background: rgba(26, 18, 12, .74);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  padding: 4px;
}
.vpb { border-radius: 9px; color: var(--text-2); }
.vpb:hover { background: rgba(255,255,255,.08); color: var(--text); }
.vpb.active {
  background: rgba(94, 196, 176, .22);
  color: var(--text);
  box-shadow:
    inset 0 0 0 1px rgba(94, 196, 176, .50),
    0 0 16px rgba(94, 196, 176, .22);
}
.vpb[data-tool="teleport"].active {
  background: var(--grad);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px -4px rgba(94, 196, 176, .45);
}
.vp-sep { background: var(--line); }

/* ══ TIMELINE — lifted shot cards ──────────────────────────────────────── */
.strip .shot,
.shot {
  border-radius: 12px;
  border-color: var(--line);
  background: rgba(8, 12, 18, .88);
  box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.strip .shot:hover,
.shot:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}
.strip .shot.active,
.shot.active {
  border-color: var(--live);
  box-shadow:
    0 0 0 1px rgba(91, 136, 209, .52),
    0 0 22px -4px rgba(82, 127, 201, .34),
    inset 0 1px 0 rgba(220,232,248,.06);
}
.shot-thumb {
  background:
    linear-gradient(180deg, transparent 62%, rgba(3, 5, 8, .54)),
    radial-gradient(90% 90% at 50% 28%, #111a28 0%, #070a0f 100%);
  color: #6d7d92;
}
.shot-name { font-weight: 600; color: var(--text-2); }
.strip .shot.active .shot-name,
.shot.active .shot-name { color: var(--text); }
.shot-dot.generated { background: var(--accent); box-shadow: 0 0 8px var(--glow); }
.shot-add {
  border-radius: 12px;
  border-style: dashed;
  border-color: var(--line-2);
}
.shot-add:hover {
  background: rgba(94, 196, 176, .10);
  border-color: var(--live);
  color: var(--live);
}

/* ══ HERO ACTIONS — cyan → violet, inner highlight, glow ───────────────── */
.gen-run,
.btn.gen-purple,
.btn.primary {
  position: relative;
  overflow: hidden;
  background: var(--grad);
  border: 0;
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow:
    0 12px 28px -12px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.gen-run:hover:not(:disabled),
.btn.gen-purple:hover:not(:disabled),
.btn.primary:hover:not(:disabled) {
  filter: brightness(1.08);
  background: var(--grad);
  box-shadow:
    0 12px 32px -8px rgba(94, 196, 176, .45),
    0 0 28px -4px rgba(240, 214, 164, .40),
    inset 0 1px 0 rgba(255,255,255,.36);
}

/* No looping sheen — a $2M studio does not shimmer at the user. */

.gen-price {
  font-weight: 700;
  border-radius: 999px;
  background: rgba(6, 10, 18, .38);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--accent-ink);
}

/* ══ TOASTS + ⌘K — glass + blur ────────────────────────────────────────── */
#toasts .toast,
.toast {
  border-radius: 12px;
  background: rgba(26, 18, 12), .88);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.toast.ok   { border-color: rgba(62,224,160,.35); }
.toast.warn { border-color: rgba(255,196,107,.35); }
.toast.bad  { border-color: rgba(255,107,125,.4); }

.cmdk-scrim {
  background: rgba(16, 10, 6), .62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cmdk {
  background: rgba(26, 18, 12), .92);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
}
.cmdk-input {
  background: transparent;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
}
.cmdk-item { border-radius: 9px; }
.cmdk-item.on {
  background: rgba(94, 196, 176,.14);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(94, 196, 176,.22);
}

/* ══ EMPTY HINT — hidden-friendly, never force visible ─────────────────── */
#vp-hint.vp-hint {
  background: rgba(7, 10, 15, .90);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: 0 5px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-2);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.25;
  letter-spacing: .005em;
  white-space: nowrap;
}
#vp-hint.hidden { display: none !important; }

#output-body .empty {
  color: var(--text-3);
  font-size: 12.5px;
  letter-spacing: .01em;
}
#output-body .empty kbd { color: var(--text-2); }

/* ══ DIRECTOR DOCK / NEXT BEAT / PIP — match the system, never unhide ──── */
/* Layout lives here: silk used to paint only chrome, so kicker / input / Direct
   stacked in one box and the badge sat on the Hebrew. Flex row + status as a
   second line. Visual tokens unchanged. .hidden in app.css still wins on Stop. */
#director-dock {
  position: absolute;
  top: 7px;
  left: 50%;
  right: auto;
  width: min(48%, 680px);
  transform: translateX(-50%);
  z-index: 8;   /* above stage/tools (5–7), below veil (60) / profile / toasts */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 3px 4px 3px 8px;
  box-sizing: border-box;
  pointer-events: auto;
  direction: ltr; /* keep Director | input | Direct readable; don't flip for Hebrew */
  background: rgba(8, 12, 18, .84);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
}
#director-dock.is-run {
  border-color: rgba(82,127,201,.46);
  box-shadow: 0 0 24px -8px rgba(82,127,201,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
.dh-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  min-width: 0;
  width: 100%;
  direction: ltr;
}
.dh-kicker {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  line-height: 1;
}
.dh-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 24px;
  max-height: 24px;
  padding: 4px 7px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 11px/16px var(--sans);
  outline: none;
  direction: rtl;          /* Hebrew brief; bar itself stays LTR */
  unicode-bidi: plaintext;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
}
.dh-input::placeholder { color: var(--text-3); }
.dh-go,
.dh-stop {
  flex: 0 0 auto;
  position: static;        /* never overlay the input */
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  font: 600 10px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.dh-go {
  background: var(--grad);
  color: var(--accent-ink);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.55);
}
.dh-stop {
  background: rgba(255,107,125,.16);
  color: #ffb3b3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
/* Status is a second line under the row — [hidden] / .hidden remove it from flow. */
.dh-status {
  min-width: 0;
  padding: 2px 4px 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-2);
  pointer-events: none;
}
.dh-prog {
  height: 2px;
  margin: 0 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.dh-prog.hidden { display: none; }
.dh-prog > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .35s ease;
}
.hint .linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#next-beat,
.next-beat {
  position: absolute;
  inset: 0;
  z-index: 22;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 20px 28px;
  background: linear-gradient(180deg, transparent 40%, rgba(2,2,8,.82));
  pointer-events: auto;
}
#next-beat.hidden,
.next-beat.hidden { display: none !important; }
.nb-card {
  width: min(400px, 92vw);
  padding: 20px 22px 18px;
  background: rgba(26, 18, 12), .88);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .32s var(--ease), opacity .32s var(--ease);
}
.next-beat.is-on .nb-card {
  transform: translateY(0);
  opacity: 1;
}
.nb-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.nb-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--text);
}
.nb-sub {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
  margin: 0 0 16px;
}
.nb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.nb-cta,
.nb-skip {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 11px;
  cursor: pointer;
  border: 0;
}
.nb-cta {
  background: var(--grad);
  color: var(--accent-ink);
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5);
}
.nb-cta:hover { filter: brightness(1.05); }
.nb-skip {
  background: rgba(26, 18, 12, .42);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--text-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nb-skip:hover {
  background: rgba(255,255,255,.10);
  color: #f6edd8;
  border-color: rgba(94, 196, 176,.28);
}

#pip, .pip {
  background: #16110c;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-1), 0 0 0 1px rgba(94, 196, 176,.12);
  overflow: hidden;
}
.pip-label {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(94, 196, 176,.75);
}

/* ══ WORLD VEIL — the two doors. Layout lives here so a stray app.css
   rewrite cannot swallow the first-open screen again. */
#viewport-wrap { position: relative; }
.world-veil {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 48px;
  background:
    radial-gradient(58% 52% at 50% 42%, rgba(49, 91, 157, .13), transparent 62%),
    radial-gradient(38% 34% at 75% 18%, rgba(82, 127, 201, .06), transparent 62%),
    linear-gradient(180deg, rgba(7, 10, 15, .48) 0%, rgba(7, 10, 15, .72) 100%);
  pointer-events: auto;
}
.world-veil.hidden,
.world-veil.is-lived:not(.is-drag):not(.is-unfold) { display: none; }
.wv-plate {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: saturate(.55) brightness(.30);
  transition: opacity .4s ease;
}
.wv-plate.has-photo { opacity: .22; }
.wv-copy {
  position: relative;
  z-index: 1;
  width: min(500px, calc(100% - 24px));
  max-width: 500px;
  padding: 22px 26px 24px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(82, 127, 201, .08), transparent 44%),
    rgba(8, 12, 18, .74);
  border: 1px solid rgba(92, 127, 181, .24);
  border-radius: 20px;
  box-shadow:
    0 28px 70px -38px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(220,232,248,.05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.wv-copy::before {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,136,209,.75), transparent);
}
.wv-kicker {
  font-size: 9px;
  letter-spacing: .20em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.wv-title {
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  margin: 0 0 8px;
}
.wv-sub {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-2);
  margin: 0 0 18px;
}
.wv-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.wv-cta, .wv-ghost {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  padding: 9px 16px;
  border-radius: 9px;
  cursor: pointer;
}
.wv-stage {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  width: min(420px, 80%);
  text-align: center;
}
.wv-bar {
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin-bottom: 10px;
}
.wv-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width .35s ease;
}
.wv-stage-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ══ WORLD VEIL — enhance type + hero CTA, leave copy/layout alone ─────── */
.wv-title {
  font-family: var(--sans);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.025em;
  color: var(--text);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  filter: none;
}
.wv-kicker { font-family: var(--mono); color: var(--accent); }
.wv-sub { font-family: var(--sans); }
.wv-cta {
  background: var(--grad);
  color: var(--accent-ink);
  border: 0;
  box-shadow: 0 14px 32px -16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.55);
}
.wv-cta:hover { filter: brightness(1.06); }
.wv-ghost {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(122,145,176,.18);
  color: var(--text-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.wv-ghost:hover {
  background: rgba(82,127,201,.10);
  color: var(--text);
  border-color: rgba(82,127,201,.38);
}
.wv-bar i {
  background: linear-gradient(90deg, var(--live), var(--champagne));
}

/* Empty-world arrival — the engineering floor carries the user to its origin. */
.world-entry-path {
  position: absolute;
  inset: 0;
  z-index: 59;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(38% 52% at 50% 94%, rgba(82,127,201,.13), transparent 72%);
  transition: opacity .25s ease;
}
.world-entry-path.run { opacity: 1; }
.world-entry-path.done { opacity: 0; }
.world-entry-path .we-beam {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 3px;
  height: 78%;
  border-radius: 99px;
  background: linear-gradient(0deg, rgba(91,136,209,.10), #76a0e2 52%, rgba(91,136,209,0));
  box-shadow: 0 0 8px rgba(91,136,209,.75), 0 0 24px rgba(82,127,201,.42);
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
}
.world-entry-path.run .we-beam {
  animation: world-beam 1.45s cubic-bezier(.2,.75,.2,1) forwards;
}
.world-entry-path .we-pulse {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a9c7f3;
  box-shadow: 0 0 10px #76a0e2, 0 0 28px rgba(82,127,201,.85);
  opacity: 0;
  transform: translate(-50%, 0);
}
.world-entry-path.run .we-pulse {
  animation: world-pulse 1.4s .08s cubic-bezier(.2,.75,.2,1) forwards;
}
body.world-arriving .vp-toolbar,
body.world-arriving .pip { opacity: .34; }
@keyframes world-beam {
  0% { transform: translateX(-50%) scaleY(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateX(-50%) scaleY(1); opacity: .9; }
}
@keyframes world-pulse {
  0% { transform: translate(-50%, 0); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translate(-50%, -420px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .world-entry-path { display: none; }
}

/* ══ LIGHT CHROME — gutters, gutters, focus ────────────────────────────── */
.gutter:hover, .gutter.dragging,
.split-handle:hover, .split-handle.dragging { background: var(--accent); }

:focus-visible {
  outline-color: var(--accent);
}

/* ══ STACKING — profile / settings / lightboxes above the stage ══════════
   body is display:grid + overflow:hidden. A fixed overlay appended to body
   is still a grid item and used to auto-place behind #main. backdrop-filter
   on #topbar also trapped .gb-pop inside the bar. Pin overlays to the full
   grid and lift them above the stage. Behaviour unchanged. */
#main { position: relative; z-index: 1; }
#timeline { position: relative; z-index: 2; }
#account { position: relative; z-index: 1; }
.gb-pop {
  z-index: 400;
}
.gb-ov,
.ref-lightbox,
.lightbox,
.cmdk-scrim,
#iconic-panel {
  position: fixed;
  inset: 0;
  z-index: 5000;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
.cmdk { z-index: 5001; }
#toasts { z-index: 5100; }

/* ══ REMAINING CHROME — navy leftovers from app.css, same silk tokens ──── */
#viewport-wrap {
  background:
    radial-gradient(78% 68% at 50% 42%, rgba(94, 196, 176, .08), transparent 58%),
    #16110c;
}
#viewport-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 90px rgba(94, 196, 176, .06), inset 0 0 0 1px rgba(94, 196, 176, .10);
}

.btn {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--text);
}
.btn:hover:not(:disabled) {
  background: rgba(255,255,255,.09);
  border-color: var(--line-2);
}
.btn.danger { background: rgba(255,107,125,.08); border-color: rgba(255,107,125,.32); }

.fmt-opt, .obj-btn, .char-card, .out-btn, .name-swatch {
  background: rgba(0,0,0,.32);
  border-color: var(--line);
}
.fmt-opt:hover, .obj-btn:hover { border-color: var(--line-2); background: rgba(94, 196, 176,.06); }
.fmt-opt.on, .obj-btn.active {
  border-color: rgba(94, 196, 176,.45);
  background: rgba(94, 196, 176,.12);
  box-shadow: inset 0 0 0 1px rgba(94, 196, 176,.16);
}
.fmt-opt.on .fmt-txt b, .fmt-opt.on .fmt-box { color: #f6edd8; border-color: var(--accent); }
.guide-row .chip.on {
  background: rgba(94, 196, 176,.14);
  border-color: rgba(94, 196, 176,.45);
  color: #f6edd8;
}

.rail-gen {
  background: linear-gradient(180deg, rgba(94, 196, 176,.05), transparent);
  border-top-color: var(--line);
}
.gen-static-head {
  font-family: var(--mono);
  color: rgba(242, 240, 234, .45);
}
.inspector { background: var(--panel-2); border-bottom-color: var(--line-2); }

.edit-obj {
  border-color: rgba(200,196,186,.28);
  background: linear-gradient(180deg, rgba(94, 196, 176,.08), rgba(200,196,186,.05));
}
.edit-obj-head { color: #f6edd8; }
.edit-obj-go {
  background: var(--grad);
  border-color: transparent;
  color: var(--accent-ink);
}

.gh-wrap, .gh-row { border-color: var(--line); }
.gh-head { background: rgba(0,0,0,.28); color: var(--text-3); font-family: var(--mono); }
.gh-row.clickable:hover { background: var(--panel-2); }
.gh-badge.run { color: var(--accent); background: rgba(94, 196, 176,.12); }

.dropzone.drag { border-color: var(--accent); background: rgba(94, 196, 176,.08); }
.ref-badge { background: rgba(94, 196, 176,.75); }
.mention-item.sel, .mention-item:hover { background: rgba(94, 196, 176,.12); }

.pill { background: var(--panel-2); border-color: var(--line); }
.progress > i { background: var(--grad); }

.camera-hud, .drag-readout {
  background: rgba(94, 196, 176,.10);
  border-color: rgba(94, 196, 176,.45);
  color: #f6edd8;
}
.paint-palette, .cut-prompt, .ctx-menu, .modal, .ksheet, .cmdk {
  background: rgba(26, 18, 12), .92);
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

#usage-meter { border-top-color: var(--line); }
.uc-credits, .cp-card, .cp-custom { background: rgba(0,0,0,.32); border-color: var(--line); }
.uc-fill.ok { background: var(--grad); }
.uc-big, .cp-cr { font-family: var(--display); }

.vp-label {
  background: rgba(26, 18, 12, .78);
  border-color: var(--line);
}
.vp-title { font-family: var(--display); }
.nav-help {
  background: rgba(26, 18, 12, .82);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

/* ══ BREATH + JEWEL ACCENTS — same chrome, more air, color where it earns it */
body {
  gap: 12px;
  padding: 12px;
  grid-template-rows: 56px 1fr 172px;
}
#topbar { padding: 0 18px; gap: 12px; }
.tb { padding: 7px 12px; border-radius: 9px; }
.tb-icon { padding: 7px 12px; }
.panel-head { padding: 13px 16px; gap: 10px; }
.panel-head.slim { padding: 10px 14px; }
.panel-foot { padding: 11px 12px; gap: 8px; }
.search-row { padding: 10px 12px 6px; }
.search-row input { padding: 8px 12px 8px 30px; border-radius: 10px; }
.filter-row { padding: 6px 12px 12px; gap: 6px; }
.chip, .mini {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 999px;
}
.tree { padding: 8px 8px 18px; }
.tree .row { height: 32px; padding: 0 8px 0 10px; border-radius: 8px; }
.step { margin: 0 12px 9px; }
.step-head { padding: 12px 14px; }
.step-body { padding: 4px 14px 16px; }
.step-title { font-size: 13.5px; }
.rail-gen {
  padding: 14px 14px 16px;
  background: linear-gradient(180deg, rgba(94,196,176,.08), transparent);
}
.gen-run, .btn.gen-purple, .btn.primary {
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 13px;
  font-size: 14px;
}
.fmt-opt, .obj-btn, .char-card { border-radius: 12px; padding: 10px; }
.strip .shot, .shot { border-radius: 14px; }
.shot-foot { padding: 8px 10px; }

/* Live teal = presence. Champagne = commit. Copper = cost. Sage = done. */
.chip.active,
.guide-row .chip.on,
.fmt-opt.on,
.obj-btn.active,
.tree .row.selected,
.tree .row.sel {
  background: rgba(94, 196, 176, .16);
  border-color: rgba(94, 196, 176, .42);
  color: var(--text);
}
.fmt-opt.on .fmt-txt b, .fmt-opt.on .fmt-box { color: var(--live); border-color: var(--live); }
.strip .shot.active,
.shot.active {
  border-color: var(--live);
  box-shadow: 0 0 0 1px rgba(91,136,209,.48), 0 10px 24px -12px rgba(0,0,0,.55);
}
.vpb.active {
  background: rgba(94, 196, 176, .20);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(94,196,176,.4);
}
.dh-kicker, .pip-label, .nb-kicker, .wv-kicker { color: var(--live); }
#director-dock.is-run { border-color: rgba(82,127,201,.46); }
#pip, .pip { box-shadow: var(--shadow-1), 0 0 0 1px rgba(94,196,176,.16); }
.camera-hud, .drag-readout {
  background: rgba(94, 196, 176, .12);
  border-color: rgba(94, 196, 176, .4);
  color: var(--text);
}
.shot-dot.generated, .pill.ok, .gh-badge.run { color: var(--sage); background: rgba(125,202,164,.12); }
.pill.warn { color: var(--amber); border-color: rgba(230,184,106,.35); }
.gen-price {
  background: rgba(26, 18, 12, .30);
  border-color: rgba(26, 18, 12, .20);
  color: var(--accent-ink);
}
.mini.danger { color: var(--rose); }
.toast.ok { border-color: rgba(125,202,164,.4); }
.toast.warn { border-color: rgba(230,184,106,.4); }
.toast.bad { border-color: rgba(212,139,139,.45); }
.progress > i, .dh-prog > i, .wv-bar i {
  background: linear-gradient(90deg, var(--ice), var(--lilac));
}
.gutter:hover, .gutter.dragging,
.split-handle:hover, .split-handle.dragging { background: var(--ice); }
.count { padding: 2px 8px; }

/* ══ HARNESS — professional access, comfort, efficiency ══════════════════
   Same tools. Larger hit areas, readable type, a focus path you can see. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 8000;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--grad);
  color: var(--accent-ink);
  font: 600 13px var(--sans);
  text-decoration: none;
  transform: translateY(-140%);
  transition: transform .18s var(--ease);
}
.skip:focus,
.skip:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--ice);
  outline-offset: 3px;
}
:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
  border-radius: 8px;
}
.vpb, .tb, .tb-icon, .mini, .chip, .out-btn, .wasd-btn {
  min-width: 36px;
  min-height: 36px;
}
.vpb {
  width: 36px;
  height: 36px;
  font-size: 14px;
}
/* Shrink the whole tool rail to 80% of its size — a gentle trim (60% read too
   small). A uniform scale takes the buttons, the emoji + fixed-size SVG icons,
   the padding and the gaps down together, which resizing width/height alone
   can't (the icons and the 36px min-tap-target floor would stay put). Anchored
   top-left so the rail stays pinned to its corner and simply gets smaller in
   place. */
.vp-toolbar {
  gap: 5px; padding: 6px;
  transform: scale(.8);
  transform-origin: top left;
}
.gutter, .split-handle {
  position: relative;
}
.gutter::after, .split-handle::after {
  content: "";
  position: absolute;
  inset: -4px;
}
#layer-search, .search-row input,
.num, .field input, .field textarea, .field select {
  min-height: 38px;
  font-size: 13.5px;
}
.panel-title {
  color: rgba(240, 214, 164, .72);
  letter-spacing: .16em;
}
::selection { background: rgba(94, 196, 176, .32); color: var(--text); }
button:disabled, .tb:disabled, .gen-run:disabled { cursor: not-allowed; }
@media (prefers-contrast: more) {
  :root {
    --text: #fff;
    --text-2: #e8e6e0;
    --line: rgba(255,255,255,.28);
    --line-2: rgba(255,255,255,.42);
  }
  :focus-visible { outline-width: 3px; }
}
@media (pointer: coarse) {
  .vpb, .tb, .mini, .chip, .out-btn { min-width: 40px; min-height: 40px; }
  .vpb { width: 40px; height: 40px; }
}

/* ══ SAFETY — visual overlay only. Never blank the workflow. ══════════════
   Silk must never hide product chrome: no display:none on the rail, tools,
   generate, or storyboard. .hidden in app.css still wins for JS hides. */
#rail,
.rail,
.rail-scroll-wrap,
.rail-scroll,
.rail-gen,
#right > .panel-head,
#vp-tools,
#timeline,
#output-wrap,
#director-dock {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}
#vp-tools { display: flex; }

/* Leftover navy/cyan from app.css — same widgets, spatial-lab paint. */
.cut-hint {
  background: rgba(230, 184, 106, .12);
  border: 1px solid rgba(230, 184, 106, .38);
  color: var(--amber);
}
.cut-hint b { color: var(--text); }
.cut-hud { background: rgba(230, 184, 106, .16); color: var(--text); }
.vh-handle.on-surface {
  background: var(--sage);
  border-color: #eaf6ee;
  box-shadow: 0 0 0 4px rgba(125, 202, 164, .22), 0 2px 8px rgba(0,0,0,.4);
}
.wx-tile.on { background: rgba(94, 196, 176), .14); border-color: var(--ice); }
.fmt-opt.on .fmt-box { background: rgba(94, 196, 176), .18); }
.gen-cost span:last-child { color: var(--ice); }
.edit-obj-input:focus, .asset-name-input:focus {
  border-color: var(--ice);
  box-shadow: 0 0 0 3px rgba(94, 196, 176), .18);
}
.cat-folder:hover, .cat-item:hover, .cat-back:hover {
  background: rgba(94, 196, 176), .08);
  border-color: rgba(94, 196, 176), .28);
  box-shadow: none;
}
#assistant-fab, #assistant-panel {
  --as-grad: var(--grad);
  --as-blue: var(--ice);
  --as-blue-soft: rgba(94, 196, 176), .14);
}
#assistant-fab { color: var(--accent-ink); box-shadow: 0 12px 28px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5); }
#iconic-fab {
  background: var(--panel-2);
  border-color: var(--line-2);
  box-shadow: var(--shadow-1);
}
#iconic-fab:hover { border-color: var(--ice); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.ip-cat.on, .ip-item.on, .seg-btn.on, .ip-cc.on {
  background: rgba(94, 196, 176), .16);
  border-color: rgba(94, 196, 176), .4);
  color: var(--text);
}
.wasd-btn:active, .wasd-btn.on {
  background: rgba(94, 196, 176), .88);
  color: var(--accent-ink);
  border-color: var(--ice);
}
.wasd-btn { color: var(--text); background: var(--panel-2); border-color: var(--line-2); }
.cut-hud .ch-tag { color: var(--amber); border-color: rgba(230, 184, 106, .35); }
.pill.busy { border-color: var(--line-2); background: var(--panel-2); }
.ground-sw.on { box-shadow: 0 0 0 2px rgba(94, 196, 176), .4); }
.group-builder { background: rgba(94, 196, 176), .04); }
.mention-face { background: rgba(94, 196, 176), .12); }
.res-row .res-chip.locked:hover { color: var(--text); }
.rail-sb-thumb { background: rgba(255,255,255,.16); }
.rail-sb-thumb:hover { background: rgba(255,255,255,.28); }
.rail-sb-thumb.drag { background: rgba(255,255,255,.38); }
.comp-overlay .g-horizon { border-color: rgba(94, 196, 176), .55); }
#layer-tree.ms { background: rgba(94, 196, 176), .05); }
#m-nav .m-gen .m-ico { box-shadow: 0 6px 16px rgba(0,0,0,.35); }

#assistant-panel {
  background: var(--panel);
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
}
.as-hero {
  background:
    radial-gradient(85% 70% at 88% 4%, rgba(94, 196, 176), .16), transparent 56%),
    linear-gradient(158deg, var(--panel-2) 0%, var(--panel) 100%);
  color: var(--text);
}
.as-hero::after { opacity: .25; }
.as-logo, .as-greet-2 { color: var(--text); }
.as-logo b { color: var(--ice); }
.as-greet { color: var(--text-2); }
.as-av { background: var(--bg-2); border-color: var(--panel); }
.as-faq, .as-launch, .as-msg.bot {
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--text);
}
.as-faq-h, .as-ctxt span, .as-chead .as-x { color: var(--text-3); }
.as-faq-q { color: var(--text); border-top-color: var(--line); }
.as-faq-q:hover, .as-chead .as-x:hover { background: var(--panel-2); color: var(--text); }
.as-faq-arrow, .as-launch-txt span, .as-email::placeholder, .as-input::placeholder { color: var(--text-3); }
.as-chead { border-bottom-color: var(--line); }
.as-back { color: var(--text-2); }
.as-ctxt b { color: var(--text); }
.as-msg.user, .as-send { color: var(--accent-ink); }
.as-chip { border-color: var(--line-2); }
.as-chip:hover { background: rgba(94, 196, 176), .22); }
.as-foot { border-top-color: var(--line); }
.as-email, .as-input { color: var(--text); }
.as-email { border-bottom-color: var(--line); }

#iconic-welcome .iw-card {
  background: var(--panel);
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
}
#iconic-welcome .iw-card::before { background: var(--panel); }
.iw-go, .ip-greet-go, .ip-nav .ip-next { color: var(--accent-ink); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.ip-head { background: var(--panel-2); }
.ip-cat.on, .ip-item.on, .seg-btn.on, .ip-cc.on { color: var(--text); }
.ip-item.on .ip-item-num { color: var(--ice); }
.ip-intro {
  background: radial-gradient(120% 90% at 50% 22%, var(--panel-2) 0%, var(--panel) 68%);
}
.ip-video, .ip-vid { background: var(--bg); }
.ip-video-soon {
  background: radial-gradient(120% 100% at 50% 0%, var(--panel-2) 0%, var(--bg) 70%);
}
.ip-bubble { background: var(--panel-2); }
.ip-bubble::before { background: var(--panel-2); }
.ib-shadow { background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent); }
#iconic-fab.has-new .iconic-fab-pulse { box-shadow: 0 0 0 0 rgba(94, 196, 176), .4); }
@keyframes ib-ring { 0%{ box-shadow:0 0 0 0 rgba(94,196,176,.4) } 70%,100%{ box-shadow:0 0 0 10px rgba(94,196,176,0) } }

/* ══ GINBOX MIDNIGHT — compact professional studio chrome ═══════════════ */
#left, #right, #timeline, #output-wrap {
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(214,228,248,.045);
}
#center {
  background: rgba(8, 11, 16, .92);
  border-color: var(--line);
}
#viewport-wrap { background: #0b1018; }
.rail .step {
  background: rgba(9, 13, 19, .90);
  box-shadow: inset 0 1px 0 rgba(220,232,248,.035);
}
.rail .step.open {
  background: rgba(34, 57, 94, .12);
  border-color: rgba(80, 127, 201, .38);
  box-shadow: inset 3px 0 0 var(--live), inset 0 1px 0 rgba(220,232,248,.05);
}
.world-folder,
.vp-toolbar,
#account .gb-chip {
  background: rgba(8, 11, 16, .92);
}
.tree .row.selected,
.tree .row.sel,
.chip.active,
.guide-row .chip.on,
.fmt-opt.on {
  background: rgba(64, 105, 171, .22);
  border-color: rgba(91, 136, 209, .58);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(91, 136, 209, .12);
}
.vpb.active {
  background: rgba(74, 119, 190, .28);
  border-color: rgba(91, 136, 209, .62);
  color: #dbe8fb;
}
.rail-gen {
  padding: 4px 8px 5px;
  background: linear-gradient(180deg, rgba(39, 68, 112, .10), rgba(3, 5, 8, .40));
  border-top-color: var(--line);
}
.gen-static-head {
  padding: 5px 8px 1px;
  color: var(--text-3);
}
.rail-gen .step-body { padding: 0 8px 4px; }
.gen-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  align-items: end;
}
.gen-field { min-width: 0; margin: 0; }
.gen-field > label {
  display: block;
  margin: 0 0 2px;
  color: var(--text-3);
  font: 500 9px/1.1 var(--mono);
  letter-spacing: .10em;
  text-transform: uppercase;
}
.quality-row,
.res-row {
  display: grid;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
}
.quality-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quality-row .chip,
.res-row .chip {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 4px;
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1;
  white-space: nowrap;
}
.res-row .res-chip .rlock { font-size: 8px; }
.gen-run-row { margin-top: 5px; }
.gen-run {
  width: 100%;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 12px;
  letter-spacing: .01em;
}
.gen-price {
  color: rgba(235,243,255,.78);
  background: rgba(2, 7, 14, .20);
}

@media (min-width: 821px) {
  body { grid-template-rows: 50px 1fr 120px; }
  #output-wrap > .panel-head {
    min-height: 25px;
    height: 25px;
    padding: 0 9px;
  }
  #output-wrap .panel-title { font-size: 9px; }
  #output-wrap .out-btn { width: 22px; height: 20px; }
  #output-body { padding: 4px 7px; }
  #output-wrap .gh-row {
    grid-template-columns: 62px 1fr 104px 54px;
    gap: 8px;
    padding: 4px 10px;
    min-height: 34px;
  }
  #output-wrap .gh-head {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 8.5px;
  }
  #output-wrap .gh-prev,
  #output-wrap .gh-prev img,
  #output-wrap .gh-prev-none {
    width: 54px !important;
    height: 30px !important;
  }
  #output-wrap .gh-when { font-size: 10.5px; }
  #output-wrap .gh-badge { padding: 2px 7px; font-size: 9px; }
  #timeline .tl-head { padding: 4px 10px; }
  #timeline .strip { padding: 0 10px 5px; }
  #timeline .shot.landscape { width: 105px; }
  #timeline .shot.portrait { width: 62px; }
  #timeline .shot.portrait .shot-thumb {
    width: 42%;
    align-self: center;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  #timeline .shot-foot { padding: 2px 6px; }
}

@media (max-width: 820px) {
  .rail-gen .gen-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  .rail-gen .quality-row,
  .rail-gen .res-row {
    display: grid;
    padding: 0;
    gap: 4px;
  }
  .rail-gen .res-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .rail-gen .res-row .res-chip {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 3px 2px;
    font-size: 10px;
  }
}

/* History empty state — a quiet destination, not a generic placeholder. */
.gh-empty {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(610px, calc(100% - 18px));
  min-height: 76px;
  padding: 10px 16px;
  overflow: hidden;
  color: var(--text-2);
  background:
    linear-gradient(135deg, rgba(70, 111, 178, .12), transparent 42%),
    rgba(4, 7, 11, .88);
  border: 1px solid rgba(103, 139, 194, .22);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(220, 232, 248, .045),
    0 12px 30px -22px rgba(0, 0, 0, .9);
}
.gh-empty::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, #527fc9 30%, #315b9d 70%, transparent);
  opacity: .9;
}
.gh-empty::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 90px;
  left: -44px;
  top: -34px;
  border-radius: 50%;
  background: rgba(63, 104, 171, .13);
  filter: blur(26px);
}
.gh-empty-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(104, 145, 210, .28);
  border-radius: 12px;
  color: #7299d7;
  background: linear-gradient(145deg, rgba(70, 111, 178, .18), rgba(13, 20, 32, .68));
  box-shadow: inset 0 1px 0 rgba(226, 236, 250, .055);
}
.gh-empty-mark svg {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gh-empty-mark .gh-empty-focus {
  stroke: #9db6dc;
  stroke-width: 1.2;
  opacity: .72;
}
.gh-empty-copy { min-width: 0; }
.gh-empty-kicker {
  margin-bottom: 3px;
  color: #7195ce;
  font: 500 8.5px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.gh-empty-title {
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gh-empty-note {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 10.5px;
  line-height: 1.2;
}
.gh-empty-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font: 500 8px/1 var(--mono);
  letter-spacing: .10em;
  text-transform: uppercase;
}
.gh-empty-flow i {
  position: relative;
  display: block;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(82, 127, 201, .22), rgba(82, 127, 201, .72));
}
.gh-empty-flow i::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5b88d1;
  box-shadow: 0 0 8px rgba(91, 136, 209, .55);
}
.gh-empty.gh-empty-icon-only {
  display: grid;
  grid-template-columns: 1fr;
  width: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.gh-empty.gh-empty-icon-only::before,
.gh-empty.gh-empty-icon-only::after { display: none; }
.gh-empty-icon-only .gh-empty-mark { margin: auto; }

@media (max-width: 820px) {
  #director-dock {
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
  }
  #timeline .shot.landscape .shot-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  #timeline .shot.portrait .shot-thumb {
    width: min(44%, 180px);
    align-self: center;
    aspect-ratio: 9 / 16;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  .gh-empty {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    width: calc(100% - 12px);
    min-height: 68px;
    padding: 9px 10px;
    border-radius: 12px;
  }
  .gh-empty-mark { width: 38px; height: 38px; border-radius: 10px; }
  .gh-empty-mark svg { width: 29px; height: 29px; }
  .gh-empty-title { font-size: 11.5px; white-space: normal; }
  .gh-empty-note { font-size: 9.5px; }
  .gh-empty-flow { display: none; }
}