/* ─── BRAND TOKENS ─────────────────────────────────────────────────────── */
:root {
  --primary: #14d7f2;
  --primary-bright: #06fbfc;
  --secondary: #6366f1;
  --warn: #ff914d;
  --bg-void: #020408;
  --bg-space: #050810;
  --bg-panel: #060d18;
  --bg-elevated: #0c1a2e;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --font-display: 'Rajdhani','Space Grotesk',system-ui,sans-serif;
  --font-head: 'Space Grotesk',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono','Consolas',monospace;
  --font-body: 'Inter',system-ui,sans-serif;

  --menubar-h: 54px;
  --dock-w: 200px;
  --win-radius: 10px;
}

/* Unreal is a separate operational lane, not a Blender theme variant. */
body[data-engine-lane="unreal"] {
  --primary: #ff8a4d;
  --primary-bright: #ffc15c;
  --secondary: #d946ef;
  --border-lane: rgba(255,138,77,0.28);
}
body[data-engine-lane="unreal"] #menubar,
body[data-engine-lane="unreal"] .os-window:not(.unreal-window) {
  border-color: var(--border-lane);
}
body[data-engine-lane="unreal"] .pulse-dot { background: var(--primary); box-shadow: 0 0 8px var(--primary), 0 0 16px rgba(255,138,77,0.4); }
body[data-engine-lane="unreal"] .app-btn:not([data-engine="unreal"]):not([data-app="projects"]):not([data-app="credits"]):not([data-app="about"]),
body[data-engine-lane="blender"] .app-btn[data-engine="unreal"] { display: none; }
/* PFunk dock/launcher triggers ship with the "hidden" utility class by
   default (server template) and are revealed by studio.js only after a live
   /api/auth/session response reports is_operator:true, or removed from the
   DOM outright for everyone else — see applyOperatorGating(). No CSS rule
   should force this, or editing/removing one class in devtools would defeat
   the gate. */

.render-drafts { margin: 10px 0 12px; padding: 9px; border: 1px solid rgba(20,215,242,.14); border-radius: 6px; background: rgba(4,12,22,.42); }
.render-drafts-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.render-drafts-heading > span { flex: 0 0 auto; padding: 2px 6px; border: 1px solid rgba(20,215,242,.28); border-radius: 999px; color: var(--primary-bright); font: .48rem var(--font-mono); letter-spacing: .08em; }
.render-drafts-note, .draft-empty { margin-top: 5px; font-size: .54rem; line-height: 1.4; color: var(--muted); }
.render-drafts-list { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; max-height: 132px; overflow-y: auto; }
.render-draft-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; align-items: center; padding: 6px 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; }
.render-draft-row.selected { border-color: rgba(20,215,242,.52); background: rgba(20,215,242,.08); }
.render-draft-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: .57rem; color: var(--text); }
.render-draft-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .5rem; color: var(--muted); }
.render-draft-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 5px; }
.render-draft-actions button { position: relative; z-index: 3; min-height: 30px; font-size: .5rem; padding: 4px 7px; touch-action: manipulation; }

/* ─── RESET ─────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html,body { width: 100%; height: 100%; overflow: hidden; }
body {
  background: var(--bg-void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
button:focus-visible { outline: 2px solid var(--primary-bright); outline-offset: 2px; }
input { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─── GLASS PANEL ───────────────────────────────────────────────────────── */
.glass {
  position: relative;
  background: rgba(6,13,24,0.82);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(20,215,242,0.18);
  overflow: hidden;
}
.glass::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,transparent 0%,rgba(20,215,242,0.5) 50%,transparent 100%);
  pointer-events: none; z-index: 2;
}
.glass::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.035; pointer-events: none; mix-blend-mode: screen; z-index: 1;
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(6,13,24,0.97); }
}

/* ─── PULSE DOT ─────────────────────────────────────────────────────────── */
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary), 0 0 16px rgba(20,215,242,0.4);
  display: inline-block; flex: 0 0 auto; position: relative;
}
.pulse-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(20,215,242,0.55);
  animation: pulse-expand 1.8s ease-out infinite;
}
@keyframes pulse-expand {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ─── MENUBAR ────────────────────────────────────────────────────────────── */
#menubar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--menubar-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
  background: rgba(2,4,8,0.94);
  backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid rgba(20,215,242,0.14);
  z-index: 1000;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.14em;
  color: var(--primary);
  text-shadow: 0 0 18px rgba(20,215,242,0.5);
  white-space: nowrap; margin-right: 16px;
}
.wordmark b { color: var(--text); }
.wordmark sup { font-size: 0.38em; vertical-align: super; color: var(--text); opacity: 0.6; }

.app-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 7px 11px; border-radius: 7px;
  font-family: var(--font-mono); font-size: 0.48rem;
  letter-spacing: 0.12em; color: var(--muted);
  min-width: 50px; transition: color 150ms, background 150ms;
}
.app-btn:hover, .app-btn.active {
  color: var(--primary); background: rgba(20,215,242,0.09);
}
.app-btn .icon { font-size: 1rem; line-height: 1; }
.app-btn span { text-transform: uppercase; }

.menubar-sep { width: 1px; height: 26px; background: rgba(20,215,242,0.12); margin: 0 9px; flex: 0 0 auto; }
.menubar-push { flex: 1; }

.status-cluster { display: flex; align-items: center; gap: 14px; }
.live-badge {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(20,215,242,0.18);
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.1em; color: var(--primary); white-space: nowrap;
}
.credit-badge {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(6,251,252,0.28);
  font-family: var(--font-mono); font-size: 0.6rem;
  color: var(--primary-bright);
  text-shadow: 0 0 10px rgba(6,251,252,0.4);
  white-space: nowrap; cursor: pointer;
}
.credit-badge:hover { border-color: rgba(6,251,252,0.5); }
.account-cluster { position: relative; }
.account-btn {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(20,215,242,0.3);
  font-family: var(--font-head); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--primary);
}
.account-btn:hover { background: rgba(20,215,242,0.09); }
.account-menu {
  position: fixed;
  min-width: 200px;
  padding: 10px;
  border-radius: 10px;
  z-index: 1200;
  display: flex; flex-direction: column; gap: 6px;
}
.account-menu-email {
  font-family: var(--font-mono); font-size: 0.56rem; color: var(--muted);
  word-break: break-all; padding: 2px 4px 8px;
  border-bottom: 1px solid rgba(20,215,242,0.14);
}
.account-menu-item {
  padding: 7px 8px; border-radius: 6px; text-align: left;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em;
  color: var(--text); transition: color 140ms, background 140ms;
}
.account-menu-item:hover { background: rgba(20,215,242,0.09); color: var(--primary); }

/* ─── LAYOUT SHELL ──────────────────────────────────────────────────────── */
#shell {
  position: fixed;
  top: var(--menubar-h); left: 0; right: 0; bottom: 0;
  display: flex;
}

/* ─── DOCK / SIDEBAR ────────────────────────────────────────────────────── */
#dock {
  width: var(--dock-w);
  display: flex; flex-direction: column;
  background: rgba(3,6,14,0.88);
  backdrop-filter: blur(16px);
  border-right: 1px solid rgba(20,215,242,0.1);
  overflow-y: auto; flex: 0 0 auto;
}
.dock-section { padding: 12px 8px 4px; }
.dock-label {
  font-family: var(--font-mono); font-size: 0.5rem;
  letter-spacing: 0.22em; color: var(--muted);
  text-transform: uppercase; padding: 0 4px 6px;
}
.dock-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 6px;
  font-size: 0.72rem; color: var(--muted);
  width: 100%; text-align: left;
  transition: color 140ms, background 140ms;
}
.dock-item .di { font-size: 0.9rem; width: 18px; text-align: center; flex: 0 0 auto; }
.dock-item:hover { color: var(--text); background: rgba(20,215,242,0.06); }
.dock-item.active { color: var(--primary); background: rgba(20,215,242,0.1); }
.dock-spacer { flex: 1; }
.dock-trash {
  border-top: 1px solid rgba(20,215,242,0.1);
  margin-top: 4px;
}

/* ─── DESKTOP CANVAS ────────────────────────────────────────────────────── */
#desktop {
  flex: 1; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 60% 30%, rgba(20,215,242,0.04), transparent 55%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(99,102,241,0.03), transparent 50%),
    var(--bg-space);
}
/* subtle grid */
#desktop::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(20,215,242,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,215,242,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ─── DESKTOP FILE ICONS ────────────────────────────────────────────────── */
.desktop-file {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; gap: 5px; padding: 6px;
  border-radius: 8px; cursor: pointer; width: 80px;
  transition: background 150ms;
}
.desktop-file:hover, .desktop-file.selected {
  background: rgba(20,215,242,0.1);
}
.desktop-file.selected { outline: 1px solid rgba(20,215,242,0.4); }
.df-icon {
  width: 52px; height: 52px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.6rem;
  position: relative;
}
.df-icon.folder { background: linear-gradient(145deg, #0e2040, #07152a); border: 1px solid rgba(20,215,242,0.2); }
.df-icon.render-file { background: linear-gradient(145deg, #060d1a, #0a1830); border: 1px solid rgba(20,215,242,0.35); }
.df-icon.preset-file { background: linear-gradient(145deg, #080a1c, #0d1040); border: 1px solid rgba(99,102,241,0.35); }
.df-thumb {
  position: absolute; inset: 4px; border-radius: 6px; overflow: hidden;
}
.df-thumb canvas { width: 100%; height: 100%; display: block; }
.df-label {
  font-family: var(--font-mono); font-size: 0.52rem;
  letter-spacing: 0.04em; text-align: center;
  color: var(--text); text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  line-height: 1.25; max-width: 76px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── WINDOW CHROME ─────────────────────────────────────────────────────── */
.os-window {
  position: absolute;
  min-width: 320px; min-height: 200px;
  border-radius: var(--win-radius);
  background: rgba(5,8,16,0.94);
  backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid rgba(20,215,242,0.2);
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(20,215,242,0.06);
  display: flex; flex-direction: column;
  overflow: hidden; z-index: 100;
  transition: box-shadow 150ms;
}
.os-window.focused {
  box-shadow: 0 32px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(20,215,242,0.18), 0 0 40px rgba(20,215,242,0.05);
}
.os-window::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(20,215,242,0.5) 50%,transparent);
  z-index: 2; pointer-events: none;
}

.win-titlebar {
  height: 36px; flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  background: rgba(2,4,8,0.6);
  border-bottom: 1px solid rgba(20,215,242,0.1);
  cursor: grab; user-select: none;
}
.win-titlebar:active { cursor: grabbing; }
.traffic-lights { display: flex; gap: 6px; flex: 0 0 auto; }
.tl { width: 12px; height: 12px; border-radius: 50%; border: none; cursor: pointer; flex: 0 0 auto; }
.tl-close { background: #ff5f57; }
.tl-min   { background: #febc2e; }
.tl-max   { background: #28c840; }
.tl:hover { filter: brightness(1.2); }
.win-title {
  flex: 1; text-align: center;
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.win-icon { font-size: 0.85rem; flex: 0 0 auto; margin-left: auto; margin-right: 2px; }

.win-body { flex: 1; overflow: auto; position: relative; }
.win-resize {
  position: absolute; bottom: 0; right: 0;
  width: 16px; height: 16px; cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(20,215,242,0.25) 50%);
  border-radius: 0 0 var(--win-radius) 0; z-index: 10;
}

/* ─── QUICK LOOK OVERLAY ────────────────────────────────────────────────── */
#quick-look {
  position: fixed; inset: 0; z-index: 900;
  display: none; place-items: center;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
}
#quick-look.open { display: grid; }
#ql-panel {
  width: min(520px, 90vw);
  border-radius: 14px;
  background: rgba(4,8,18,0.96);
  border: 1px solid rgba(20,215,242,0.25);
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
  overflow: hidden;
}
.ql-preview {
  width: 100%; aspect-ratio: 16/9;
  background: #000; display: grid; place-items: center;
}
.ql-preview canvas { width: 100%; height: 100%; display: block; }
.ql-meta { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.ql-title { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ql-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.ql-chip {
  font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.1em;
  color: var(--primary); border: 1px solid rgba(20,215,242,0.28);
  border-radius: 4px; padding: 2px 7px;
}
.ql-close-hint {
  font-family: var(--font-mono); font-size: 0.54rem;
  letter-spacing: 0.12em; color: var(--muted);
  text-align: center; padding-bottom: 12px;
}

/* ─── LAZY AUTH MODAL ───────────────────────────────────────────────────── */
#auth-modal {
  position: fixed; inset: 0; z-index: 950;
  display: none; place-items: center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(10px);
}
#auth-modal.open { display: grid; }
#auth-panel {
  width: min(360px,90vw); padding: 32px 28px;
  border-radius: 14px;
  background: rgba(3,6,14,0.98);
  border: 1px solid rgba(20,215,242,0.28);
  box-shadow: 0 40px 100px rgba(0,0,0,0.9);
  display: flex; flex-direction: column; gap: 16px;
}
.auth-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.14em; color: var(--primary); text-shadow: 0 0 18px rgba(20,215,242,0.45); }
.auth-wordmark b { color: var(--text); }
.auth-sub { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--muted); }
.auth-reason { font-size: 0.75rem; color: var(--text); line-height: 1.5; }
.auth-input {
  width: 100%; padding: 10px 12px;
  border: 1px solid rgba(20,215,242,0.2); border-radius: 8px;
  background: rgba(2,4,8,0.8); color: var(--text); font-size: 0.82rem;
  outline: none;
}
.auth-input:focus { border-color: rgba(20,215,242,0.5); }
.cta {
  font-family: var(--font-head); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.12em; color: var(--bg-void);
  background: linear-gradient(135deg, var(--primary), var(--primary-bright));
  border: none; border-radius: 8px; padding: 10px 18px;
  box-shadow: 0 0 16px rgba(20,215,242,0.25);
  cursor: pointer; transition: box-shadow 200ms, transform 200ms;
  text-align: center;
}
.cta:hover { box-shadow: 0 0 28px rgba(20,215,242,0.5); transform: translateY(-1px); }
.cta-ghost {
  background: transparent; color: var(--primary);
  border: 1px solid rgba(20,215,242,0.3);
  box-shadow: none; font-family: var(--font-head); font-size: 0.72rem;
  letter-spacing: 0.1em; border-radius: 8px; padding: 9px 18px; cursor: pointer;
}
.cta-ghost:hover { background: rgba(20,215,242,0.07); }
.auth-dismiss { text-align: center; font-size: 0.62rem; color: var(--muted); cursor: pointer; }
.auth-dismiss:hover { color: var(--primary); }

/* ─── WINDOW CONTENT STYLES ─────────────────────────────────────────────── */
.win-pad { padding: 16px; }
.mono-label {
  font-family: var(--font-mono); font-size: 0.52rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.section-title {
  font-family: var(--font-display); font-size: 1rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.divider { height: 1px; background: rgba(20,215,242,0.1); margin: 12px 0; }

/* source window */
.source-tabs { display: flex; gap: 4px; padding: 12px 16px 0; }
.src-tab {
  padding: 6px 12px; border-radius: 6px 6px 0 0;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em;
  color: var(--muted); border: 1px solid transparent; border-bottom: none;
  transition: color 140ms, background 140ms;
}
.src-tab:hover { color: var(--text); background: rgba(20,215,242,0.05); }
.src-tab.active { color: var(--primary); background: rgba(20,215,242,0.08); border-color: rgba(20,215,242,0.18); }
.src-pane { display: none; padding: 0 16px 16px; }
.src-pane.active { display: block; }
.dropzone {
  border: 1.5px dashed rgba(20,215,242,0.3); border-radius: 10px;
  padding: 32px 16px; text-align: center; cursor: pointer;
  transition: border-color 200ms, box-shadow 200ms;
  margin-top: 12px;
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--primary);
  box-shadow: 0 0 30px rgba(20,215,242,0.15);
}
.dropzone.has-file { border-style: solid; border-color: rgba(6,251,252,0.5); }
.dz-icon { font-size: 2rem; color: var(--primary); text-shadow: 0 0 20px rgba(20,215,242,0.6); }
.dz-title { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.12em; margin-top: 8px; }
.dz-sub { font-size: 0.64rem; color: var(--muted); margin-top: 4px; letter-spacing: 0.06em; }
.dz-file-name {
  display: inline-block; margin-top: 12px; padding: 4px 12px;
  border: 1px solid rgba(6,251,252,0.35); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--primary-bright);
}
/* The tracks added to the SOURCE window. color-scheme tells the browser to
   draw the native transports dark, so they sit in the studio rather than
   punching light grey boxes through it. */
.dz-tracks { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dz-track.is-empty {
  border-style: dashed; border-color: rgba(20,215,242,0.14);
  background: transparent; cursor: pointer;
}
.dz-track.is-empty:hover { border-color: rgba(20,215,242,0.4); }
.dz-track.is-empty .dz-track-name { color: var(--muted); letter-spacing: 0.08em; }
.dz-track.is-empty .dz-track-meta { cursor: pointer; }
.dz-track {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px;
  border: 1px solid rgba(20,215,242,0.18);
  background: rgba(3,12,20,0.5);
  color-scheme: dark;
}
.dz-track.is-source { border-color: rgba(6,251,252,0.5); background: rgba(6,251,252,0.06); }
.dz-track-pick {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(20,215,242,0.35); background: transparent;
  color: var(--muted); font-family: var(--font-mono); font-size: 0.58rem;
  cursor: pointer; transition: color 150ms, border-color 150ms;
}
.dz-track-pick:hover { border-color: var(--primary); color: var(--primary-bright); }
.dz-track.is-source .dz-track-pick {
  border-color: var(--primary); color: var(--primary-bright);
  box-shadow: 0 0 12px rgba(20,215,242,0.35);
}
.dz-track-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dz-track-name {
  font-size: 0.66rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dz-track-facts {
  font-family: var(--font-mono); font-size: 0.56rem;
  color: var(--muted); letter-spacing: 0.06em;
}
.dz-track.is-source .dz-track-facts { color: var(--primary-bright); }
.dz-track-audio { flex: 0 1 190px; height: 30px; min-width: 0; }
.dz-track-drop {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid transparent; background: transparent;
  color: var(--muted); font-size: 0.7rem; line-height: 1; cursor: pointer;
}
.dz-track-drop:hover { color: #ff6b6b; border-color: rgba(255,107,107,0.4); }

.check-row { display: flex; gap: 8px; margin-top: 12px; }
.src-check {
  flex: 1; display: flex; align-items: flex-start; gap: 8px;
  padding: 8px; border: 1px solid rgba(20,215,242,0.12);
  border-radius: 7px; background: rgba(2,4,8,0.4); cursor: pointer;
}
.src-check input { accent-color: var(--primary); flex: 0 0 auto; margin-top: 1px; }
.src-check b { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; }
.src-check small { display: block; font-size: 0.58rem; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.mic-area { padding: 24px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mic-ring {
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid rgba(20,215,242,0.35); display: grid; place-items: center;
  font-size: 1.6rem; color: var(--primary);
  box-shadow: 0 0 20px rgba(20,215,242,0.1);
}
.mic-ring.recording { border-color: rgba(255,145,77,0.6); color: var(--warn); animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 0%,100% { box-shadow: 0 0 20px rgba(255,145,77,0.2); } 50% { box-shadow: 0 0 36px rgba(255,145,77,0.4); } }
.visual-only-area { padding: 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.duration-row { display: flex; align-items: center; gap: 10px; }
.dur-input {
  width: 80px; padding: 8px 10px;
  border: 1px solid rgba(20,215,242,0.2); border-radius: 7px;
  background: rgba(2,4,8,0.7); color: var(--text);
  font-family: var(--font-mono); font-size: 0.8rem; outline: none;
  text-align: right;
}

/* analyze window */
.beat-canvas-wrap { padding: 0 16px; }
.beat-canvas {
  width: 100%; height: 140px; display: block;
  border: 1px solid rgba(20,215,242,0.12); border-radius: 8px;
  background: var(--bg-space);
}
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 12px 16px; }
.stat-box {
  border: 1px solid rgba(20,215,242,0.12); border-radius: 8px;
  padding: 8px 10px;
  background: linear-gradient(145deg, rgba(20,215,242,0.05), rgba(99,102,241,0.03));
}
.stat-box .lbl { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.stat-box .val { font-size: 1rem; color: var(--primary); font-weight: 600; margin-top: 3px; }

/* governor chat window */
.governor-chat-body { display:flex; flex-direction:column; min-height:0; padding:0; }
.governor-chat-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 12px; border-bottom:1px solid rgba(20,215,242,.12); }
.governor-chat-endpoint { margin-top:4px; color:var(--muted); font:0.58rem var(--font-mono); letter-spacing:.06em; }
.governor-chat-status { padding:3px 7px; border:1px solid rgba(52,211,153,.35); border-radius:999px; color:#86efac; font:0.52rem var(--font-mono); letter-spacing:.1em; }
.governor-chat-status.busy { color:var(--warn); border-color:rgba(251,191,36,.4); }
.governor-chat-status.error { color:#fca5a5; border-color:rgba(248,113,113,.4); }
.governor-chat-log { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:16px; background:rgba(2,4,8,.28); }
.governor-chat-message { max-width:88%; padding:10px 12px; border:1px solid rgba(20,215,242,.14); border-radius:9px; color:var(--text); font-size:.68rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.governor-chat-user { align-self:flex-end; border-color:rgba(99,102,241,.34); background:rgba(99,102,241,.1); }
.governor-chat-assistant { align-self:flex-start; background:rgba(20,215,242,.045); }
.governor-chat-system { align-self:stretch; max-width:none; color:var(--muted); font-size:.6rem; background:rgba(20,215,242,.035); }
.governor-chat-form { padding:12px 16px 16px; border-top:1px solid rgba(20,215,242,.12); }
.governor-chat-form textarea { display:block; width:100%; resize:vertical; min-height:68px; padding:10px 11px; border:1px solid rgba(20,215,242,.2); border-radius:7px; background:rgba(2,4,8,.75); color:var(--text); font:0.7rem var(--font-mono); outline:none; }
.governor-chat-form textarea:focus { border-color:rgba(20,215,242,.6); box-shadow:0 0 0 2px rgba(20,215,242,.08); }
.governor-chat-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
.governor-chat-model { color:var(--muted); font:0.5rem var(--font-mono); letter-spacing:.08em; }
.multiplex-auto-tile { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin:0 0 12px; padding:11px 13px; letter-spacing:.08em; }
.multiplex-auto-tile small { color:rgba(255,255,255,.62); font-size:.48rem; letter-spacing:.1em; }
.multiplex-defaults { display:grid; grid-template-columns:1fr 150px; gap:9px; margin:0 0 12px; }
.multiplex-default-toggle, .multiplex-default-select { display:flex; align-items:center; gap:8px; min-width:0; padding:8px 9px; border:1px solid rgba(20,215,242,.14); border-radius:7px; background:rgba(2,4,8,.35); cursor:pointer; }
.multiplex-default-toggle input { accent-color:var(--primary); flex:0 0 auto; }
.multiplex-default-toggle b, .multiplex-default-select span { display:block; font:0.52rem var(--font-mono); letter-spacing:.08em; }
.multiplex-default-toggle small { display:block; margin-top:3px; color:var(--muted); font-size:.52rem; }
.multiplex-default-select { display:block; cursor:default; }
.multiplex-default-select span { color:var(--muted); margin-bottom:5px; }
.multiplex-default-select select { width:100%; padding:4px 5px; border:1px solid rgba(20,215,242,.2); border-radius:4px; background:rgba(2,4,8,.7); color:var(--text); font:0.54rem var(--font-mono); }
.dock-layout-section { margin: 8px 8px 0; padding: 10px 8px 9px; border: 1px solid rgba(20,215,242,.24); border-radius: 9px; background: linear-gradient(145deg, rgba(20,215,242,.09), rgba(99,102,241,.08)); box-shadow: 0 0 18px rgba(20,215,242,.07); }
.dock-layout-section .dock-label { color: var(--primary); }
.dock-layout-launcher { width:100%; min-height:48px; gap:10px; border:1px solid rgba(20,215,242,.3); background:rgba(20,215,242,.07); }
.dock-layout-launcher:hover, .dock-layout-launcher:focus-visible { border-color:rgba(20,215,242,.7); background:rgba(20,215,242,.14); }
.dock-layout-launcher b { display:block; color:var(--text); font:0.61rem var(--font-mono); letter-spacing:.1em; }
.dock-layout-launcher small { display:block; margin-top:3px; color:var(--muted); font-size:.55rem; }

/* library window */
.lib-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
.lib-pill {
  padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: 0.1em; border: 1px solid rgba(148,163,184,0.2); color: var(--muted);
  cursor: pointer; transition: color 140ms, border-color 140ms, background 140ms;
}
.lib-pill:hover, .lib-pill.active {
  color: var(--primary); border-color: rgba(20,215,242,0.5); background: rgba(20,215,242,0.08);
}
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 10px; padding: 12px 16px; }
.preset-card {
  border: 1px solid rgba(20,215,242,0.12); border-radius: 8px;
  background: rgba(7,11,22,0.8); cursor: pointer; overflow: hidden;
  transition: border-color 150ms, transform 150ms;
}
.preset-card:hover { border-color: rgba(20,215,242,0.4); transform: translateY(-1px); }
.preset-card.selected { border-color: rgba(20,215,242,0.7); box-shadow: 0 0 16px rgba(20,215,242,0.1); }
.preset-card[aria-disabled="true"] { cursor: default; border-color: rgba(251,191,36,0.22); }
.preset-card[aria-disabled="true"]:hover { border-color: rgba(251,191,36,0.34); transform: none; }
.preset-thumb {
  width: 100%; aspect-ratio: 16/9;
  display: block; background: #020408;
}
.preset-thumb canvas { width: 100%; height: 100%; display: block; }
.preset-info { padding: 6px 8px 8px; }
.preset-name { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.preset-meta { font-size: 0.56rem; color: var(--muted); margin-top: 2px; }
.preset-badge {
  display: inline-block; margin-top: 4px; padding: 1px 6px;
  border-radius: 3px; font-family: var(--font-mono); font-size: 0.48rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.badge-family { background: rgba(20,215,242,0.1); color: var(--primary); border: 1px solid rgba(20,215,242,0.2); }
.badge-superflow { background: rgba(99,102,241,0.12); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.28); }
.badge-mantle { background: rgba(244,114,182,0.12); color: #f9a8d4; border: 1px solid rgba(244,114,182,0.30); }
.badge-hold { display: block; width: fit-content; background: rgba(251,191,36,0.08); color: #fcd34d; border: 1px solid rgba(251,191,36,0.24); }
.badge-material { background: rgba(255,145,77,0.08); color: #ffc99a; border: 1px solid rgba(255,145,77,0.2); }

/* tune window */
.tune-section { padding: 0 16px 10px; }
.tune-section h4 { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; padding-bottom: 4px; border-bottom: 1px solid rgba(20,215,242,0.1); }
.ctl-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.ctl-lbl { display: flex; justify-content: space-between; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--muted); }
.ctl-lbl em { color: var(--primary); font-style: normal; }
.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: rgba(20,215,242,0.15); outline: none;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 8px rgba(20,215,242,0.7); cursor: pointer;
}
.palette-swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pal-swatch {
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; transition: border-color 150ms;
}
.pal-swatch.active { border-color: var(--primary); box-shadow: 0 0 10px rgba(20,215,242,0.4); }
.select-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.os-select {
  font-size: 0.7rem; color: var(--text);
  background: rgba(2,4,8,0.8); border: 1px solid rgba(20,215,242,0.18);
  border-radius: 7px; padding: 7px 10px; outline: none; width: 100%;
}
.os-select:focus { border-color: rgba(20,215,242,0.45); }

/* preview window */
.preview-area {
  width: 100%; aspect-ratio: 16/9; background: #000;
  display: grid; place-items: center; position: relative;
}
.preview-area canvas { width: 100%; height: 100%; display: block; }
@media (min-width: 561px) {
  #win-preview .preview-area { width: min(100%, 426px); margin-inline: auto; }
  #win-preview .win-pad .flex-row { flex-wrap: wrap; }
}
.preview-controls { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.preview-progress-bar {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(20,215,242,0.12); overflow: hidden;
}
.preview-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-bright));
  box-shadow: 0 0 8px rgba(20,215,242,0.6); width: 0%; transition: width 100ms linear;
}
.preview-status { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--muted); }
.preview-activity { display:flex; align-items:center; gap:6px; min-width:150px; font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.08em; color:var(--primary-bright); white-space:nowrap; }
.preview-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 16px 10px;
  padding: 10px;
  border: 1px solid rgba(20, 215, 242, 0.18);
  background: rgba(4, 10, 18, 0.82);
}
.preview-evidence-cell { min-width: 0; }
.preview-evidence-cell span,
.preview-evidence-cell b {
  display: block;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}
.preview-evidence-cell span { color: var(--muted); font-size: 0.5rem; }
.preview-evidence-cell b { margin-top: 3px; color: var(--text); font-size: 0.58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-evidence-cell b[data-state="approved"],
.preview-evidence-cell b[data-state="certified"] { color: #76f5bd; }
.preview-evidence-cell b[data-state="needs_work"],
.preview-evidence-cell b[data-state="missing"] { color: #ff8c72; }
.preview-evidence-cell b[data-state="pending"],
.preview-evidence-cell b[data-state="stale"] { color: #ffc96a; }
.preview-review-note {
  grid-column: 1 / -1;
  min-height: 1em;
  color: var(--muted);
  font: 0.54rem/1.35 var(--font-mono);
}
.render-activity { min-height:18px; display:flex; align-items:center; justify-content:center; gap:6px; margin-top:5px; font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.08em; color:var(--primary-bright); white-space:nowrap; }
.studio-drive { display:inline-flex; filter:drop-shadow(0 0 3px currentColor); }
.studio-drive svg { width:24px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.studio-drive-led { fill:currentColor; stroke:none; animation:studio-drive-blink 1.1s steps(2,end) infinite; }
@keyframes studio-drive-blink { 50% { opacity:.2; } }
.render-phase-title { margin-top:6px; color:var(--primary-bright); font-family:var(--font-mono); font-size:0.62rem; font-weight:700; letter-spacing:0.08em; line-height:1.5; text-align:center; }
.render-phase-meta { color:var(--text); font-family:var(--font-mono); font-size:0.56rem; line-height:1.5; text-align:center; }
.render-joke { margin:7px 12px 3px; padding:6px 9px; border-left:2px solid rgba(255,145,77,.55); background:rgba(255,145,77,.055); color:var(--muted); font-size:0.53rem; line-height:1.45; text-align:left; }
.render-joke span { color:var(--warn); letter-spacing:.06em; }

/* render stop confirmation */
.studio-confirm-layer {
  position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center;
  padding: 20px; opacity: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(20,215,242,.12), transparent 34%),
    rgba(1,3,8,.62);
  backdrop-filter: blur(14px) saturate(135%);
  transition: opacity 140ms ease;
}
/* Author display:grid beats the UA [hidden] { display:none } rule. Keep the
   attribute honest so a closed #hdr-info-layer cannot sit invisible over Studio. */
.studio-confirm-layer[hidden] { display: none; }

.engine-switcher { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid rgba(20,215,242,0.18); border-radius: 5px; background: rgba(6,13,24,0.9); }
.engine-switch { padding: 4px 7px; color: var(--muted); font: 0.52rem var(--font-mono); letter-spacing: 0.08em; }
.engine-switch.active { color: var(--bg-void); background: var(--primary); border-radius: 3px; font-weight: 700; }
body[data-engine-lane="unreal"] .engine-switcher { border-color: var(--border-lane); }

/* Unreal Lab windows use orange/amber signals and explicit cloud-gated states. */
.unreal-window { border-color: rgba(255,138,77,0.36); box-shadow: 0 0 34px rgba(255,138,77,0.08); }
.unreal-window .win-titlebar { border-bottom-color: rgba(255,138,77,0.22); }
.unreal-window .win-title { color: #ffc15c; }
.unreal-window-pad { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.unreal-eyebrow { color: #ff8a4d; font: 0.52rem var(--font-mono); letter-spacing: 0.14em; }
.unreal-heading { color: #f8fafc; font: 1.08rem var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.unreal-copy { max-width: 58ch; color: var(--muted); font-size: 0.66rem; line-height: 1.55; }
.unreal-field-label, .unreal-form-grid label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font: 0.54rem var(--font-mono); letter-spacing: 0.08em; }
.unreal-field { width: 100%; min-height: 32px; padding: 7px 8px; color: var(--text); background: #090d18; border: 1px solid rgba(255,138,77,0.22); border-radius: 4px; font: 0.62rem var(--font-mono); }
.unreal-field:focus { outline: 1px solid #ff8a4d; }
.unreal-contract-grid { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 6px 10px; padding: 10px; border: 1px solid rgba(255,138,77,0.16); background: rgba(255,138,77,0.045); font: 0.56rem var(--font-mono); }
.unreal-contract-grid span { color: #ffb184; letter-spacing: 0.08em; }
.unreal-contract-grid b { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.unreal-blocked { display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: #ffc15c; background: rgba(255,138,77,0.08); border: 1px solid rgba(255,138,77,0.2); font: 0.54rem var(--font-mono); line-height: 1.4; }
.unreal-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #ff8a4d; box-shadow: 0 0 8px rgba(255,138,77,0.7); }
.unreal-cta { border-color: rgba(255,138,77,0.28); background: rgba(255,138,77,0.12); color: #ffc15c; }
.unreal-cta:disabled { opacity: 0.45; cursor: not-allowed; }
.unreal-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.unreal-preview-slate { display: flex; align-items: center; gap: 12px; min-height: 130px; padding: 18px; border: 1px dashed rgba(255,138,77,0.3); background: radial-gradient(circle at 25% 30%, rgba(217,70,239,0.12), transparent 40%), #050810; }
.unreal-slate-mark { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid #ff8a4d; color: #ffc15c; font: 1rem var(--font-display); }
.unreal-preview-slate b, .unreal-preview-slate span { display: block; }
.unreal-preview-slate b { color: #ffc15c; font: 0.62rem var(--font-mono); }
.unreal-preview-slate span { margin-top: 5px; color: var(--muted); font-size: 0.62rem; line-height: 1.4; }
.unreal-render-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; color: var(--muted); font: 0.58rem var(--font-mono); }
@media (max-width: 720px) { .engine-switcher { order: 2; } .unreal-form-grid, .unreal-render-checks { grid-template-columns: 1fr; } .unreal-window { max-width: calc(100vw - 18px); } }
.studio-confirm-layer.open { opacity: 1; pointer-events: auto; }
.studio-confirm-layer.closing { opacity: 0; pointer-events: none; }
.studio-confirm-card {
  position: relative; width: min(440px, calc(100vw - 36px)); overflow: hidden;
  padding: 30px 30px 24px; border: 1px solid rgba(126,239,255,.3);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(14,23,40,.94), rgba(4,8,17,.9)),
    rgba(3,7,15,.86);
  box-shadow:
    0 34px 90px rgba(0,0,0,.66),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 45px rgba(20,215,242,.1);
  transform: translateY(14px) scale(.97);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
}
.studio-confirm-layer.open .studio-confirm-card { transform: translateY(0) scale(1); }
.studio-confirm-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, #14d7f2 28%, #c86bff 62%, #ff914d 84%, transparent);
  box-shadow: 0 0 16px rgba(20,215,242,.7);
}
.studio-confirm-signal {
  display: flex; align-items: end; gap: 4px; height: 22px; margin-bottom: 14px;
}
.studio-confirm-signal i {
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #c86bff, #14d7f2);
  box-shadow: 0 0 8px rgba(20,215,242,.45);
  animation: studio-confirm-signal 900ms ease-in-out infinite alternate;
}
.studio-confirm-signal i:nth-child(1) { height: 7px; animation-delay: -500ms; }
.studio-confirm-signal i:nth-child(2) { height: 17px; animation-delay: -250ms; }
.studio-confirm-signal i:nth-child(3) { height: 11px; animation-delay: -700ms; }
.studio-confirm-signal i:nth-child(4) { height: 21px; animation-delay: -100ms; }
.studio-confirm-signal i:nth-child(5) { height: 9px; animation-delay: -350ms; }
@keyframes studio-confirm-signal { to { transform: scaleY(.45); opacity: .58; } }
.studio-confirm-eyebrow {
  color: var(--warn); font-family: var(--font-mono); font-size: .55rem;
  font-weight: 700; letter-spacing: .18em;
}
.studio-confirm-card h2 {
  margin: 8px 0 10px; color: var(--text); font-size: 1.16rem;
  line-height: 1.18; letter-spacing: -.015em;
}
.studio-confirm-card p {
  margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.65;
}
.studio-confirm-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 24px;
}
.studio-confirm-actions button { min-height: 38px; font-size: .58rem; }
.studio-confirm-primary.danger {
  background: linear-gradient(135deg, #ff5b61, #ff914d);
  box-shadow: 0 8px 24px rgba(255,91,97,.22);
}
.studio-confirm-primary.save {
  background: linear-gradient(135deg, #14d7f2, #8f7cff);
  box-shadow: 0 8px 24px rgba(20,215,242,.2);
}

/* render window */
.render-estimator { padding: 12px 16px; background: rgba(2,4,8,0.5); border-bottom: 1px solid rgba(20,215,242,0.1); }
.est-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.est-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--muted); }
.est-value { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text); }
.est-total { font-size: 1.1rem; color: var(--primary-bright); font-weight: 600; }
.est-delivery-row { align-items: flex-start; gap: 10px; }
.est-delivery-row .est-label { display: inline-flex; align-items: center; gap: 6px; padding-top: 6px; }
.est-help {
  width: 16px; height: 16px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(20,215,242,0.35); background: rgba(20,215,242,0.08);
  color: var(--primary-bright); font: 700 0.58rem/1 var(--font-mono);
  cursor: pointer;
}
.est-help:hover, .est-help:focus-visible { background: rgba(20,215,242,0.18); outline: none; }
.delivery-switcher {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px;
  border: 1px solid rgba(20,215,242,0.18); border-radius: 5px;
  background: rgba(6,13,24,0.9);
}
.delivery-switch {
  padding: 5px 8px; color: var(--muted); font: 0.52rem var(--font-mono);
  letter-spacing: 0.06em; background: transparent; border: 0; cursor: pointer;
}
.delivery-switch.active {
  color: var(--bg-void); background: var(--primary); border-radius: 3px; font-weight: 700;
}
.delivery-switch:disabled, .delivery-switch[aria-disabled="true"] {
  opacity: 0.42; cursor: not-allowed;
}
.est-delivery-hint-row { align-items: flex-start; margin-top: -2px; }
#export-profile-hint { display: block; max-width: 30ch; font-size: 0.53rem; line-height: 1.4; color: var(--muted); text-align: right; }
.studio-info-eyebrow { color: var(--primary-bright); }
.studio-info-close {
  position: absolute; top: 12px; right: 14px; width: 28px; height: 28px;
  border-radius: 6px; color: var(--muted); font-size: 1.1rem; line-height: 1;
}
.studio-info-close:hover { color: var(--text); background: rgba(20,215,242,0.09); }
.studio-info-copy { display: flex; flex-direction: column; gap: 10px; }
.studio-info-copy p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.65; }
.studio-info-copy strong { color: var(--text); font-weight: 600; }
.studio-info-tip {
  padding: 8px 10px; border-left: 2px solid rgba(20,215,242,.55);
  background: rgba(20,215,242,.06); color: var(--text) !important;
}
.studio-info-more { color: var(--muted); font-size: .66rem; line-height: 1.55; }
.studio-info-more summary { cursor: pointer; color: var(--primary-bright); font: 0.55rem var(--font-mono); letter-spacing: 0.08em; }
.studio-info-more p { margin-top: 8px; }
.studio-info-actions { grid-template-columns: 1fr; }
.checklist { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.check-item { display: flex; align-items: center; gap: 10px; }
.check-ico {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid rgba(20,215,242,0.2); display: grid; place-items: center;
  font-size: 0.65rem; color: var(--muted);
}
.check-ico.pass { background: rgba(20,215,242,0.15); border-color: var(--primary); color: var(--primary); }
.check-ico.pending { border-color: rgba(99,102,241,0.4); color: rgba(99,102,241,0.6); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.check-text { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; }
.check-text.pass { color: var(--primary); }
.render-footer { padding: 12px 16px; border-top: 1px solid rgba(20,215,242,0.1); }
.studio-partial-delivery {
  margin-top: 10px; overflow: hidden; border: 1px solid rgba(20,215,242,.24);
  border-radius: 10px; background: rgba(3,8,16,.72);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.studio-partial-delivery video {
  display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #010204;
}
.studio-partial-copy { padding: 10px 11px 11px; }
.studio-partial-title {
  color: var(--primary-bright); font-family: var(--font-mono); font-size: .59rem;
  font-weight: 700; letter-spacing: .11em;
}
.studio-partial-note { margin-top: 4px; color: var(--muted); font-size: .57rem; line-height: 1.45; }
.studio-partial-actions { display: flex; gap: 7px; margin-top: 9px; }
.studio-partial-actions > * { flex: 1; text-align: center; text-decoration: none; font-size: .55rem; padding: 6px 8px; }
.studio-notice {
  position: fixed; top: 34px; left: 50%; transform: translateX(-50%); z-index: 99999;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px;
  border: 1px solid rgba(20,215,242,0.4); background: rgba(2,16,24,0.95);
  color: var(--text); font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.5;
  max-width: min(560px, calc(100vw - 24px));
}
.studio-notice-msg { flex: 1; min-width: 0; }
.studio-notice .cta, .studio-notice .cta-ghost {
  flex: none; font-size: 0.56rem; padding: 4px 10px; text-decoration: none;
}
.studio-notice-dismiss { cursor: pointer; border: 0; background: none; color: inherit; font-size: 0.8rem; }
.render-row { display: grid; grid-template-columns: 112px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(20,215,242,.15); border-radius: 8px; background: rgba(2,6,13,.42); }
.render-row video,
.render-row img.render-row-thumb { display: block; width: 112px; aspect-ratio: 16/9; object-fit: contain; border-radius: 5px; background: #000; }
.render-row-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.render-jobs-note { margin-top: 5px; color: var(--muted); font-size: .54rem; line-height: 1.45; }
.render-jobs-heading { margin: 7px 0 1px; color: var(--muted); font: .5rem var(--font-mono); letter-spacing: .14em; }
.render-job-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 4px 9px; align-items: center; padding: 9px 10px; border: 1px solid rgba(20,215,242,.18); border-radius: 7px; background: rgba(4,12,22,.62); }
.render-job-state { min-width: 92px; color: var(--primary-bright); font: 700 .5rem var(--font-mono); letter-spacing: .07em; }
.render-job-row[data-state="queued_for_capacity"] .render-job-state,
.render-job-row[data-state="submitting"] .render-job-state,
.render-job-row[data-state="staging"] .render-job-state,
.render-job-row[data-state="termination_pending"] .render-job-state { color: #ffc96a; }
.render-job-row[data-state="failed"] .render-job-state,
.render-job-row[data-state="cancelled"] .render-job-state { color: #ff8c72; }
.render-job-row[data-state="done"] .render-job-state { color: #76f5bd; }
.render-job-row .render-job-reason { color: #ff8c72; }
.render-job-row[data-kind="preview"] .render-row-copy b { color: var(--primary-bright); }
.render-job-row .render-row-copy b { color: var(--text); font: 600 .58rem var(--font-mono); }
.render-job-row .render-row-copy small { color: var(--muted); font: .49rem var(--font-mono); }
.render-job-progress { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(20,215,242,.1); }
.render-job-cancel { padding: 4px 7px; color: #ffb09d; font-size: .48rem; }
.render-job-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--primary),var(--primary-bright)); transition: width 180ms ease; }

/* projects window */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: 12px; padding: 12px 16px; }
.proj-file {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 4px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; transition: background 140ms, border-color 140ms;
}
.proj-file:hover { background: rgba(20,215,242,0.07); border-color: rgba(20,215,242,0.2); }
.proj-file.selected { background: rgba(20,215,242,0.1); border-color: rgba(20,215,242,0.38); }
.proj-icon { font-size: 2rem; }
.proj-name { font-family: var(--font-mono); font-size: 0.52rem; text-align: center; color: var(--text); }
.proj-meta { font-size: 0.5rem; color: var(--muted); text-align: center; }

/* about / settings */
.about-body { padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.roadmap-row { display: flex; gap: 8px; align-items: flex-start; }
.roadmap-tag {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.1em;
  background: rgba(20,215,242,0.1); color: var(--primary); border: 1px solid rgba(20,215,242,0.22);
}
.roadmap-tag.v2 { background: rgba(99,102,241,0.1); color: #a5b4fc; border-color: rgba(99,102,241,0.25); }
.roadmap-tag.v3 { background: rgba(148,163,184,0.08); color: var(--muted); border-color: rgba(148,163,184,0.18); }
.roadmap-txt { font-size: 0.68rem; color: var(--text); line-height: 1.5; }
.climate-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(167,243,107,0.25); color: #b9f886; font-size: 0.58rem; letter-spacing: 0.1em; }
.climate-dot { width: 6px; height: 6px; border-radius: 50%; background: #a7f36b; box-shadow: 0 0 8px rgba(167,243,107,0.6); }

@media (max-width: 560px) {
  .studio-confirm-actions { grid-template-columns: 1fr; }
  .studio-confirm-actions [data-studio-confirm="cancel"] { order: 2; }
  .render-row { grid-template-columns: 92px minmax(0,1fr); }
  .render-row video { width: 92px; }
  .render-row > a { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  #menubar { overflow-x: auto; overflow-y: hidden; padding-inline: 7px; scrollbar-width: none; }
  body[data-ui="studio"] #menubar::-webkit-scrollbar { display: none; }
  body[data-ui="studio"] #menubar .wordmark, body[data-ui="studio"] #menubar .pfunk-header-lockup, body[data-ui="studio"] #menubar .menubar-sep, body[data-ui="studio"] #menubar .status-cluster { display: none; }
  #menubar .app-btn { flex: 0 0 auto; padding-inline: 7px; }
  body[data-ui="studio"] #dock { display: none; }
  #desktop { min-width: 0; }
  .os-window:not(.mix-deck-window) { inset: 6px !important; width: auto !important; height: auto !important; min-width: 0; min-height: 0; border-radius: 10px; }
  .os-window:not(.mix-deck-window) .win-titlebar { cursor: default; }
  body[data-ui="studio"] .os-window:not(.mix-deck-window) .win-resize { display: none; }
  .preview-controls { flex-wrap: wrap; }
  .preview-activity { min-width: 0; }
  #win-preview .flex-row, #win-render .flex-row { flex-wrap: wrap; }
  #win-preview .flex-row > button { flex: 1 1 auto; }
  .render-job-row { grid-template-columns: 1fr; }
  .render-job-progress { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-confirm-layer, .studio-confirm-card { transition: none; }
  .studio-confirm-signal i { animation: none; }
}

/* credits window */
.credits-body { padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.balance-display { display: flex; align-items: baseline; gap: 8px; }
.balance-num { font-family: var(--font-display); font-size: 2.4rem; color: var(--primary-bright); text-shadow: 0 0 20px rgba(6,251,252,0.4); line-height: 1; }
.balance-unit { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; color: var(--muted); }
.tier-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border: 1px solid rgba(20,215,242,0.12); border-radius: 7px; }
.tier-name { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; }
.tier-cost { font-family: var(--font-mono); font-size: 0.62rem; color: var(--primary); }

/* ─── MISC UTILS ────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.flex-row { display: flex; align-items: center; gap: 8px; }
.flex-end { justify-content: flex-end; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.studio-superflow-status { padding:8px 16px 0;font:0.56rem var(--font-mono);color:var(--muted); }
.preset-launch-card { display:flex; align-items:center; gap:11px; width:100%; padding:13px 12px; text-align:left; color:var(--text); border:1px solid rgba(20,215,242,0.16); border-radius:8px; background:rgba(7,14,26,0.72); cursor:pointer; font:inherit; transition:background .15s,border-color .15s,transform .15s; }
.preset-launch-card:hover, .preset-launch-card:focus-visible { background:rgba(20,215,242,0.08); border-color:rgba(20,215,242,0.42); transform:translateY(-1px); outline:none; }
.preset-launch-icon { display:grid; place-items:center; width:30px; height:30px; color:var(--primary); font-size:1.05rem; border:1px solid rgba(20,215,242,0.22); border-radius:6px; background:rgba(20,215,242,0.06); }
.preset-launch-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.preset-launch-copy b { font:0.6rem var(--font-mono); letter-spacing:.09em; }
.preset-launch-copy small { color:var(--muted); font-size:.58rem; line-height:1.45; }
.preset-launch-arrow { color:var(--primary); font-size:1rem; }
.multiplex-body { display:flex; flex-direction:column; overflow:hidden; }
.multiplex-tabs { display:flex; gap:2px; padding:10px 12px 0; border-bottom:1px solid rgba(20,215,242,.14); }
.multiplex-tab { padding:8px 11px; color:var(--muted); border:1px solid transparent; border-bottom:0; border-radius:5px 5px 0 0; background:transparent; cursor:pointer; font:.54rem var(--font-mono); letter-spacing:.1em; }
.multiplex-tab:hover, .multiplex-tab.active { color:var(--primary); border-color:rgba(20,215,242,.18); background:rgba(20,215,242,.06); }
.multiplex-panel { flex:1; min-height:0; overflow:auto; padding:16px; }
.multiplex-panel[hidden] { display:none; }
.multiplex-note { margin:6px 0 14px; color:var(--muted); font-size:.62rem; line-height:1.5; }
.multiplex-layout-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.multiplex-layout { display:flex; flex-direction:column; gap:6px; padding:10px; text-align:left; color:var(--text); border:1px solid rgba(20,215,242,.16); border-radius:7px; background:rgba(7,14,26,.72); cursor:pointer; font:inherit; }
.multiplex-layout:hover, .multiplex-layout:focus-visible { border-color:rgba(20,215,242,.45); background:rgba(20,215,242,.08); outline:none; }
.multiplex-layout b { font:.56rem var(--font-mono); letter-spacing:.08em; }
.multiplex-layout small { color:var(--muted); font-size:.56rem; }
.layout-preview { display:grid; gap:3px; height:42px; padding:4px; border:1px solid rgba(20,215,242,.16); border-radius:4px; background:#050910; }
.layout-preview i { display:block; min-width:0; min-height:0; border:1px solid rgba(20,215,242,.55); border-radius:2px; background:rgba(20,215,242,.1); }
.layout-row-3 { grid-template-columns:repeat(3,1fr); }
.layout-grid-3x2 { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); }
.layout-grid-2x2 { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); }
.layout-focus { grid-template-columns:1fr; }
.multiplex-restore { width:100%; margin-top:12px; }
.multiplex-status { min-height:1.2em; margin-top:10px; color:var(--muted); font:.56rem var(--font-mono); line-height:1.45; }
.multiplex-window-list { display:flex; flex-direction:column; gap:6px; }
.multiplex-window-option { display:flex; align-items:center; gap:8px; padding:8px 9px; color:var(--text); border:1px solid rgba(20,215,242,.14); border-radius:5px; background:rgba(7,14,26,.62); cursor:pointer; font:.58rem var(--font-mono); text-align:left; }
.multiplex-window-option:hover { border-color:rgba(20,215,242,.4); }
.multiplex-window-option input { accent-color:var(--primary); }
.multiplex-window-option small { margin-left:auto; color:var(--muted); font-size:.5rem; }
.studio-superflow-card { display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid rgba(20,215,242,0.12);border-radius:9px;background:rgba(7,11,22,0.8); }
.studio-superflow-card-r2 { border-color:rgba(52,211,153,0.42);box-shadow:inset 3px 0 0 rgba(52,211,153,0.78); }
.studio-superflow-thumb { width:160px;height:90px;object-fit:cover;border-radius:6px;border:1px solid rgba(20,215,242,0.18);background:#000; }
.studio-superflow-body { flex:1;min-width:0; }
.studio-superflow-name { font-family:var(--font-display);font-size:0.9rem;letter-spacing:0.1em;text-transform:uppercase; }
.studio-superflow-r2-badge { display:inline-block;margin-left:8px;padding:2px 5px;border:1px solid rgba(52,211,153,0.48);border-radius:3px;color:#6ee7b7;background:rgba(16,185,129,0.10);font:0.46rem var(--font-mono);letter-spacing:0.08em;vertical-align:middle; }
.studio-superflow-summary { font-size:0.62rem;color:var(--muted);margin-top:4px;line-height:1.4; }
.studio-superflow-audit { font:0.48rem var(--font-mono);color:#a5b4fc;margin-top:6px;line-height:1.5; }
.studio-superflow-provenance { margin-top:8px;padding-top:7px;border-top:1px solid rgba(148,163,184,0.14);font:0.48rem var(--font-mono);line-height:1.5; }
.studio-superflow-credit { color:#e2e8f0;letter-spacing:0.06em; }
.studio-superflow-reference-links { display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:3px; }
.studio-superflow-reference-links a { color:#67e8f9;text-decoration:none; }
.studio-superflow-reference-links a:hover { text-decoration:underline; }
.studio-superflow-method { margin-top:3px;color:#94a3b8; }
.studio-superflow-empty { padding:24px 16px;font-size:0.65rem;color:var(--muted); }
.studio-superflow-export-row { padding:8px 16px 0;display:flex;justify-content:flex-end; }
.studio-superflow-motion { display:block;width:100%;max-height:220px;margin-top:8px;background:#000;border-radius:6px; }
.studio-superflow-motion-button { margin-top:8px; }
.studio-superflow-eye-gate { display:grid;grid-template-columns:120px 1fr auto;gap:6px;margin-top:8px;align-items:start; }
.studio-superflow-eye-gate select,.studio-superflow-eye-gate textarea { background:#090d18;color:var(--text);border:1px solid rgba(20,215,242,0.2);border-radius:4px;padding:5px;font:0.55rem var(--font-mono); }
.studio-superflow-eye-gate textarea { min-height:42px;resize:vertical; }
.studio-superflow-review-status { grid-column:1/-1;font:0.48rem var(--font-mono);color:#a5b4fc;overflow-wrap:anywhere; }


/* Superflow sticky pick footer */
.superflow-sticky-footer {
  position: sticky; bottom: 0; z-index: 2;
  padding: 10px 16px; border-top: 1px solid rgba(20,215,242,0.15);
  background: linear-gradient(to top, rgba(5,8,16,0.97), rgba(5,8,16,0.92));
  backdrop-filter: blur(8px);
  display: flex; justify-content: center;
}
.superflow-sticky-footer .cta-studio {
  width: 100%; padding: 10px 16px; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--cyan); color: var(--void); border: none; border-radius: 4px;
  cursor: pointer; transition: opacity 150ms, filter 150ms;
}
.superflow-sticky-footer .cta-studio:disabled {
  opacity: 0.35; cursor: not-allowed; filter: saturate(0.3);
}
.superflow-sticky-footer .cta-studio:not(:disabled):hover {
  filter: brightness(1.15);
}

/* Render live frames display */
.render-live-frames {
  padding: 8px 16px; border-top: 1px solid rgba(20,215,242,0.1);
}
.render-live-frames.hidden { display: none; }
.render-live-strip {
  display: flex; gap: 4px; overflow-x: auto; padding: 4px 0;
  scrollbar-width: thin; scrollbar-color: rgba(20,215,242,0.3) transparent;
}
.render-live-strip img {
  height: 64px; width: auto; border-radius: 3px;
  border: 1px solid rgba(20,215,242,0.2); flex: 0 0 auto;
  object-fit: cover; cursor: pointer; transition: border-color 150ms;
}
.render-live-strip img:hover {
  border-color: var(--cyan);
}

/* Win-body needs flex column for sticky footer to work in superflow */
#win-superflow .win-body {
  display: flex; flex-direction: column; overflow: hidden;
}

/* Unreal Worlds is a browse-only product surface until a worker is qualified. */
.unreal-worlds-body { display:flex;flex-direction:column;min-height:0;overflow:hidden; }
.unreal-worlds-header { display:flex;justify-content:space-between;gap:20px;padding:18px 20px 14px;border-bottom:1px solid rgba(94,234,212,.12);background:linear-gradient(135deg,rgba(8,20,34,.96),rgba(23,12,34,.9)); }
.unreal-worlds-header h3 { margin:4px 0 3px;font:700 1rem var(--font-display);letter-spacing:.09em;color:#f4f7fb; }
.unreal-worlds-header p { margin:0;max-width:520px;font-size:.62rem;line-height:1.5;color:var(--muted); }
.unreal-stage-chip { align-self:flex-start;white-space:nowrap;padding:5px 8px;border:1px solid rgba(250,204,21,.42);border-radius:999px;background:rgba(250,204,21,.08);font:.48rem var(--font-mono);letter-spacing:.08em;color:#fde68a; }
.unreal-worlds-status { padding:8px 20px;border-bottom:1px solid rgba(148,163,184,.1);font:.52rem var(--font-mono);line-height:1.4;color:#fbbf24; }
.unreal-worlds-list { flex:1;min-height:0;overflow:auto;padding:16px 20px 20px; }
.unreal-worlds-empty { padding:24px;border:1px dashed rgba(148,163,184,.2);border-radius:8px;text-align:center;font-size:.65rem;color:var(--muted); }
.unreal-world-card { display:grid;grid-template-columns:minmax(230px,.9fr) minmax(320px,1.25fr);gap:18px;padding:14px;border:1px solid rgba(94,234,212,.18);border-radius:12px;background:linear-gradient(145deg,rgba(5,11,20,.96),rgba(14,10,25,.94));box-shadow:0 18px 46px rgba(0,0,0,.28); }
.unreal-world-identity { min-width:0; }
.unreal-look-stage { position:relative;display:flex;align-items:flex-end;min-height:240px;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:#0a111d;box-shadow:inset 0 0 70px rgba(0,0,0,.55);transition:background .28s ease; }
.unreal-look-stage::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.42),transparent 16%),linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.55));mix-blend-mode:screen;opacity:.55; }
.unreal-look-stage::after { content:"RENDER PREVIEW PACKAGE PENDING";position:absolute;inset:12px 12px auto;padding:5px 7px;border:1px solid rgba(255,255,255,.22);border-radius:4px;background:rgba(4,8,16,.72);font:.44rem var(--font-mono);letter-spacing:.08em;color:rgba(255,255,255,.82); }
.unreal-look-stage-label { position:relative;z-index:1;width:100%;padding:11px 12px;background:rgba(3,7,15,.82);font:.54rem var(--font-mono);line-height:1.35;text-transform:uppercase;color:#f8fafc; }
.unreal-render-receipt { margin-top:7px;font:.46rem var(--font-mono);line-height:1.5;color:#7dd3fc; }
.unreal-world-body { min-width:0; }
.unreal-world-eyebrow { font:.5rem var(--font-mono);letter-spacing:.12em;color:#5eead4; }
.unreal-world-body h4 { margin:4px 0 1px;font:700 1.22rem var(--font-display);letter-spacing:.04em;color:#fff; }
.unreal-world-subtitle { font:.58rem var(--font-mono);letter-spacing:.05em;color:#c4b5fd; }
.unreal-world-body p { margin:9px 0 11px;font-size:.62rem;line-height:1.5;color:#b8c2d4; }
.unreal-look-picker { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.unreal-look-option { display:flex;flex-direction:column;gap:5px;min-width:0;padding:6px;border:1px solid rgba(148,163,184,.18);border-radius:7px;background:rgba(13,20,33,.82);font:.48rem var(--font-mono);line-height:1.2;color:#cbd5e1;cursor:pointer; }
.unreal-look-option:hover,.unreal-look-option.active { border-color:#5eead4;color:#fff;box-shadow:0 0 0 1px rgba(94,234,212,.14); }
.unreal-look-swatch { display:block;height:36px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13); }
.unreal-look-detail { min-height:34px;margin-top:7px;font:.5rem var(--font-mono);line-height:1.45;color:#e2e8f0; }
.unreal-world-gates { margin:10px 0;padding:8px;border:1px solid rgba(251,191,36,.19);border-radius:6px;background:rgba(120,53,15,.08);font:.46rem var(--font-mono);line-height:1.55;color:#aeb9c9; }
.unreal-rights-gate { color:#fbbf24;letter-spacing:.04em; }
.unreal-worker-pending { width:100%;margin-top:1px; }
.unreal-worker-pending:disabled { opacity:.62;cursor:not-allowed;filter:saturate(.55); }
@media (max-width:800px) { .unreal-world-card{grid-template-columns:1fr}.unreal-look-stage{min-height:180px}.unreal-stage-chip{display:none} }

/* -- MATERIAL / PALETTE LOOK GALLERIES -------------------------------- */
.look-browser-body {
  container: look-browser / inline-size;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  min-height: 0;
  overflow: hidden;
  background: #050910;
}
.look-proof-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 13px 14px 11px;
  background: #080d15;
  border-bottom: 1px solid rgba(148,163,184,.16);
}
.look-proof-header h3 {
  margin-top: 4px;
  color: var(--text);
  font: 700 .82rem/1.1 var(--font-display);
  letter-spacing: .09em;
}
.look-proof-header p {
  max-width: 66ch;
  margin-top: 5px;
  color: #8793a4;
  font-size: .54rem;
  line-height: 1.45;
}
.look-proof-chip {
  padding: 5px 7px;
  color: #b9c1ff;
  background: rgba(99,102,241,.09);
  border: 1px solid rgba(129,140,248,.24);
  border-radius: 3px;
  font: 500 .43rem/1.1 var(--font-mono);
  letter-spacing: .07em;
  white-space: nowrap;
}
.look-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(154px,100%),1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 9px;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.28) transparent;
}
.look-card {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  color: var(--text);
  background: #0a111b;
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 4px;
  appearance: none;
  cursor: pointer;
  font: inherit;
  transition: border-color 140ms, background 140ms, box-shadow 140ms;
}
.look-card:hover {
  background: #0c1622;
  border-color: rgba(20,215,242,.45);
}
.look-card:focus-visible {
  outline: 2px solid var(--primary-bright);
  outline-offset: -2px;
}
.look-card.selected,
.look-card[aria-pressed="true"] {
  background: #0d1b26;
  border-color: var(--primary-bright);
  box-shadow: inset 0 0 0 1px rgba(6,251,252,.2);
}
.look-card.selected::after,
.look-card[aria-pressed="true"]::after {
  content: "SELECTED";
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  padding: 3px 4px;
  color: var(--bg-void);
  background: var(--primary-bright);
  border-radius: 2px;
  font: 700 .34rem/1 var(--font-mono);
  letter-spacing: .07em;
}
.look-card:disabled,
.look-card[aria-disabled="true"] {
  opacity: .52;
  cursor: not-allowed;
}
.look-card-media {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1;
  overflow: hidden;
  background: #020408;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
.look-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 140ms;
}
.look-card:hover .look-card-media img { filter: brightness(1.08); }
.look-card-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 14px;
  color: #7d8999;
  background: #080d15;
  border: 1px dashed rgba(148,163,184,.18);
  font: .44rem/1.45 var(--font-mono);
  letter-spacing: .045em;
  text-align: center;
}
.look-card.preview-missing .look-card-media img { visibility: hidden; }
.look-card.preview-missing .look-card-placeholder { display: grid; }
.look-card-copy {
  display: flex;
  min-height: 95px;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.look-card-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.look-card-title-row h4 {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text);
  font: 600 .61rem/1.2 var(--font-head);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.look-card-signature {
  flex: 0 0 auto;
  max-width: 46%;
  overflow: hidden;
  padding: 2px 4px;
  color: #b9c1ff;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(129,140,248,.2);
  border-radius: 2px;
  font: .34rem/1.1 var(--font-mono);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.look-card-description {
  display: -webkit-box;
  overflow: hidden;
  color: #8793a4;
  font-size: .48rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.look-card-swatches {
  display: flex;
  gap: 2px;
  height: 8px;
  margin-top: auto;
  overflow: hidden;
  border-radius: 2px;
}
.look-card-swatches > span {
  min-width: 10px;
  flex: 1;
  border: 1px solid rgba(255,255,255,.12);
}
.look-card-proof {
  overflow: hidden;
  color: #697688;
  font: .39rem/1.25 var(--font-mono);
  letter-spacing: .035em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.look-gallery-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  background: #080d15;
  border-top: 1px solid rgba(148,163,184,.17);
}
.look-gallery-selection {
  min-width: 0;
  overflow: hidden;
  color: #9aa6b5;
  font: .48rem/1.35 var(--font-mono);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.look-gallery-empty {
  grid-column: 1 / -1;
  align-self: start;
  padding: 28px 16px;
  color: #8793a4;
  border: 1px dashed rgba(148,163,184,.18);
  border-radius: 4px;
  font: .56rem/1.5 var(--font-mono);
  text-align: center;
}
.look-gallery-footer .cta {
  min-height: 30px;
  padding: 7px 11px;
  border-radius: 4px;
  font-size: .55rem;
  white-space: nowrap;
}
@container look-browser (max-width: 460px) {
  .look-proof-header { grid-template-columns: minmax(0,1fr); gap: 7px; padding: 10px; }
  .look-proof-header p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .look-proof-chip { justify-self: start; }
  .look-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 8px; }
  .look-card-copy { min-height: 91px; padding: 7px; }
  .look-card-signature { max-width: 42%; }
  .look-gallery-footer { gap: 7px; padding: 7px 8px; }
  .look-gallery-footer .cta { padding-inline: 9px; }
}
@container look-browser (max-width: 330px) {
  .look-gallery { grid-template-columns: minmax(0,1fr); }
}

/* ── MIX DECK ───────────────────────────────────────────────────────────── */
.mix-deck-window {
  min-width: min(860px, calc(100vw - 16px));
  min-height: min(560px, calc(100vh - 72px));
}
.mix-deck-title-sub { color: var(--muted); font-size: .58rem; letter-spacing: .12em; margin-left: 8px; }
#win-mix-deck .win-body { display: flex; flex-direction: column; overflow: hidden; }
.mix-deck-root { display: flex; flex: 1; min-height: 0; flex-direction: column; background: #050910; }
.mix-deck-loading { display: grid; place-items: center; flex: 1; color: var(--primary); letter-spacing: .12em; font-size: .62rem; }
.mix-deck-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid rgba(148,163,184,.16); background: #080d15; flex-wrap: wrap; }
.mix-deck-toolbar button { min-height: 28px; }
.mix-deck-notice { padding: 6px 10px; color: #d9a174; background: #0d1015; border-bottom: 1px solid rgba(255,145,77,.18); font: .48rem/1.45 var(--font-mono); }
.mix-deck-notice .mono { color: var(--primary); margin-right: 8px; letter-spacing: .08em; }
.mix-deck-notice b { color: #ffc084; font-weight: 500; }
.mix-deck-track-title { display: flex; min-width: 180px; flex-direction: column; gap: 3px; margin-right: auto; }
.mix-deck-track-title span { color: var(--text); letter-spacing: .08em; font-size: .66rem; }
.mix-deck-track-title small { color: var(--muted); font-size: .53rem; }
.mix-deck-edit-tools { display: inline-flex; border: 1px solid rgba(148,163,184,.2); border-radius: 3px; overflow: hidden; background: #050910; }
.mix-deck-edit-tools button { padding: 5px 7px; color: var(--muted); border-right: 1px solid rgba(20,215,242,.12); font: 600 .47rem var(--font-mono); letter-spacing: .04em; }
.mix-deck-edit-tools button:last-child { border-right: 0; }
.mix-deck-edit-tools button:hover { color: var(--primary-bright); background: rgba(20,215,242,.08); }
.mix-deck-edit-tools button.active { color: var(--bg-void); background: var(--primary); }
.mix-deck-mode { display: inline-flex; border: 1px solid rgba(148,163,184,.2); border-radius: 3px; overflow: hidden; background: #050910; }
.mix-deck-mode button { padding: 6px 8px; color: var(--muted); font: 600 .52rem var(--font-mono); letter-spacing: .06em; border-right: 1px solid rgba(20,215,242,.12); }
.mix-deck-mode button:last-child { border-right: 0; }
.mix-deck-mode button.active { color: var(--bg-void); background: var(--primary); }
.mix-deck-state { color: #78e7a0; font: .54rem var(--font-mono); letter-spacing: .07em; white-space: nowrap; }
.mix-deck-state.warn { color: var(--warn); }
.mix-deck-cache-status { color: #78e7a0; padding: 4px 6px; border: 1px solid rgba(120,231,160,.22); border-radius: 3px; font-size: .45rem; letter-spacing: .06em; white-space: nowrap; }
.mix-deck-cache-status[data-state="warming"] { color: var(--warn); border-color: rgba(255,192,132,.28); }
button[data-mix-render-full] {
  position: relative;
  min-width: 146px;
  padding-inline: 13px;
  color: var(--bg-void);
  border-color: var(--primary);
  background: var(--primary);
  font-weight: 700;
  letter-spacing: .055em;
}
button[data-mix-render-full]:hover:not(:disabled) {
  color: var(--bg-void);
  border-color: var(--primary-bright);
  background: var(--primary-bright);
  box-shadow: 0 0 0 1px rgba(6,251,252,.16);
}
button[data-mix-render-full]:disabled {
  color: #667386;
  border-color: rgba(148,163,184,.16);
  background: #111925;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .78;
}
button[data-mix-render-full][aria-busy="true"] {
  padding-left: 29px;
  color: #d9fbff;
  border-color: rgba(20,215,242,.5);
  background: #0d3a44;
  cursor: progress;
}
button[data-mix-render-full][aria-busy="true"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border: 1px solid rgba(217,251,255,.35);
  border-top-color: #d9fbff;
  border-radius: 50%;
  animation: mix-deck-spin .8s linear infinite;
}
[data-mix-render-status] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 190px;
  color: #8290a1;
  font: .44rem/1.35 var(--font-mono);
  letter-spacing: .035em;
}
[data-mix-render-status]:empty { display: none; }
[data-mix-render-status]:not(:empty) {
  flex-basis: 100%;
  justify-content: flex-end;
  max-width: none;
}
[data-mix-render-status]:not(:empty)::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8290a1;
}
[data-mix-render-status][data-state="rendering"] { color: var(--primary-bright); }
[data-mix-render-status][data-state="rendering"]::before { background: var(--primary); }
[data-mix-render-status][data-state="done"] { color: #78e7a0; }
[data-mix-render-status][data-state="done"]::before { background: #78e7a0; }
[data-mix-render-status][data-state="failed"] { color: #ff9b9b; }
[data-mix-render-status][data-state="failed"]::before { background: #ff6b6b; }
.mix-deck-render-download {
  padding: 2px 4px;
  color: #9af0b5;
  border: 1px solid rgba(120,231,160,.3);
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
}
.mix-deck-render-download:hover { color: #d7ffe3; border-color: #78e7a0; }
@keyframes mix-deck-spin { to { transform: rotate(360deg); } }
.mix-deck-grid { display: grid; grid-template-columns: 212px minmax(410px,1fr) 210px; flex: 1; min-height: 0; background: #050910; }
.mix-deck-shelf, .mix-deck-inspector { min-width: 0; overflow: hidden; background: #080d15; }
.mix-deck-shelf { border-right: 1px solid rgba(148,163,184,.16); display: flex; flex-direction: column; }
.mix-deck-inspector { border-left: 1px solid rgba(148,163,184,.16); padding: 13px 12px; overflow-y: auto; }
.mix-deck-shelf-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid rgba(148,163,184,.16); background: #0a1019; }
.mix-deck-tab { padding: 10px 3px; color: var(--muted); font: 600 .52rem var(--font-mono); letter-spacing: .06em; border-bottom: 2px solid transparent; }
.mix-deck-tab:hover { color: var(--text); background: rgba(255,255,255,.025); }
.mix-deck-tab.active { color: var(--primary-bright); border-bottom-color: var(--primary); background: rgba(20,215,242,.045); }
.mix-deck-shelf-body { overflow-y: auto; padding: 8px; }
.mix-deck-clip-card { border: 1px solid rgba(148,163,184,.14); background: #0b121d; margin-bottom: 7px; border-radius: 4px; overflow: hidden; cursor: grab; }
.mix-deck-clip-card:hover, .mix-deck-clip-card:focus-within { border-color: rgba(20,215,242,.52); background: #0d1722; }
.mix-deck-clip-card:active { cursor: grabbing; }
.mix-deck-clip-thumb { height: 72px; display: grid; place-items: center; background: #050910; overflow: hidden; color: var(--primary); font-size: 1.6rem; }
.mix-deck-clip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mix-deck-clip-source-window {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 20px;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  margin-top: 2px;
  padding: 3px 5px;
  color: #b8c3d1;
  background: #070d16;
  border: 1px solid rgba(129,140,248,.2);
  border-radius: 2px;
  font: .38rem/1.2 var(--font-mono);
  letter-spacing: .035em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mix-deck-clip-source-window::before {
  content: "SOURCE";
  flex: 0 0 auto;
  padding: 2px 4px;
  color: #aeb2ef;
  background: rgba(79,70,155,.24);
  border: 1px solid rgba(129,140,248,.24);
  border-radius: 2px;
  font: 500 .36rem/1 var(--font-mono);
  letter-spacing: .08em;
}
.mix-deck-clip-source-window[data-mix-audio-window] {
  box-shadow: inset 2px 0 rgba(99,102,241,.7);
}
.mix-deck-clip-audio-label {
  min-width: 0;
  overflow: hidden;
  margin-left: auto;
  padding: 2px 4px;
  color: #d2d3ff;
  background: rgba(79,70,155,.28);
  border: 1px solid rgba(129,140,248,.34);
  border-radius: 2px;
  font: .36rem/1.2 var(--font-mono);
  letter-spacing: .04em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mix-deck-clip-copy { display: flex; flex-direction: column; gap: 3px; padding: 7px 8px 4px; }
.mix-deck-clip-copy b { color: var(--text); font: 600 .63rem var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mix-deck-clip-copy small { color: var(--muted); font: .49rem var(--font-mono); }
.mix-deck-clip-actions { display: flex; gap: 4px; padding: 4px 7px 7px; }
.mix-deck-clip-actions button { flex: 1; border: 1px solid rgba(20,215,242,.2); border-radius: 3px; padding: 4px 2px; color: var(--primary); font: .45rem var(--font-mono); }
.mix-deck-clip-actions button:hover { background: rgba(20,215,242,.12); }
.mix-deck-shelf-heading { color: var(--muted); font-size: .51rem; letter-spacing: .1em; padding: 3px 2px 8px; }
.mix-deck-capability { display: grid; grid-template-columns: 22px 1fr; gap: 1px 5px; width: 100%; text-align: left; padding: 8px 7px; margin-bottom: 5px; border: 1px solid rgba(148,163,184,.14); border-radius: 3px; background: #0b121d; }
.mix-deck-capability:hover:not(:disabled) { border-color: var(--primary); background: rgba(20,215,242,.08); }
.mix-deck-capability > span { grid-row: 1 / span 2; color: var(--primary); }
.mix-deck-capability b { color: var(--text); font: 600 .58rem var(--font-head); }
.mix-deck-capability small { color: var(--muted); font: .45rem var(--font-mono); }
.mix-deck-capability.unavailable { opacity: .4; cursor: not-allowed; }
.mix-deck-shelf-empty, .mix-deck-lane-empty { color: var(--muted); font: .54rem/1.5 var(--font-mono); padding: 15px 4px; }
.mix-deck-center {
  display: grid;
  grid-template-rows: minmax(160px,1.1fr) 34px 25px minmax(170px,.9fr) 18px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 8px 10px 7px;
  background: #050910;
}
.mix-deck-viewport {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.22);
  background: #020408;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55);
}
.mix-deck-composition {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.mix-deck-composition-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.mix-deck-composition-layer.is-active { opacity: 1; }
.mix-deck-viewport-hud {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 28px;
  padding: 6px 9px;
  pointer-events: none;
  color: #8793a4;
  background: rgba(2,4,8,.86);
  border-bottom: 1px solid rgba(148,163,184,.13);
  font-size: .47rem;
}
.mix-deck-viewport-hud > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mix-deck-viewport-hud .live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--primary-bright);
  font-size: .47rem;
  letter-spacing: .08em;
}
.mix-deck-viewport-hud .live-badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.mix-deck-viewport[data-mix-preview-mode="composition"] { border-color: rgba(20,215,242,.42); }
.mix-deck-viewport[data-mix-preview-mode="isolated"] {
  border-color: rgba(255,145,77,.7);
  box-shadow: inset 0 0 0 1px rgba(255,145,77,.14);
}
.mix-deck-viewport[data-mix-preview-mode="isolated"] .live-badge { color: #ffc084; }
.mix-deck-viewport[data-mix-preview-mode="isolated"] .live-badge i { background: var(--warn); }
.mix-deck-video { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.mix-deck-viewport-placeholder { display: grid; place-items: center; gap: 7px; color: var(--muted); font-family: var(--font-mono); text-align: center; }
.mix-deck-viewport-placeholder span { color: var(--primary); font-size: 2.4rem; }
.mix-deck-viewport-placeholder b { color: var(--text); font-size: .64rem; letter-spacing: .13em; }
.mix-deck-viewport-placeholder small { font-size: .52rem; }
.mix-deck-safe-area { position: absolute; inset: 12% 10%; z-index: 31; border: 1px dashed rgba(148,163,184,.17); pointer-events: none; }
.mix-deck-transport {
  display: grid;
  grid-template-columns: auto 1px 30px 36px 30px auto minmax(130px,180px);
  justify-content: center;
  align-items: center;
  gap: 3px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  background: #070c13;
}
.mix-deck-transport .mix-deck-edit-tools { margin-right: 7px; }
.mix-deck-transport-divider { width: 1px; height: 18px; background: rgba(148,163,184,.18); }
.mix-deck-transport-button {
  height: 26px;
  color: #95a0ae;
  border: 1px solid transparent;
  border-radius: 3px;
  font: 600 .5rem var(--font-mono);
}
.mix-deck-transport-button:hover {
  color: var(--text);
  border-color: rgba(148,163,184,.2);
  background: rgba(255,255,255,.04);
}
.mix-deck-transport-play {
  color: var(--bg-void);
  border-color: var(--primary);
  background: var(--primary);
}
.mix-deck-transport-play:hover, .mix-deck-transport-play.is-playing {
  color: var(--bg-void);
  border-color: var(--primary-bright);
  background: var(--primary-bright);
}
.mix-deck-timecode {
  min-width: 92px;
  margin-left: 6px;
  padding-left: 10px;
  color: #c8d1dc;
  border-left: 1px solid rgba(148,163,184,.18);
  font-size: .53rem;
  letter-spacing: .06em;
}
.mix-deck-zoom {
  display: grid;
  grid-template-columns: auto minmax(58px,1fr) 38px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-left: 10px;
  color: #758193;
  font-size: .43rem;
  letter-spacing: .06em;
}
.mix-deck-zoom input {
  width: 100%;
  min-width: 0;
  accent-color: var(--primary);
  cursor: ew-resize;
}
.mix-deck-zoom output {
  color: #aeb8c5;
  text-align: right;
  font-size: .46rem;
}
.mix-deck-score-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 2px 4px;
  color: #758193;
  font-size: .46rem;
}
.mix-deck-score-ribbon { display: flex; gap: 2px; flex: 1; height: 10px; align-items: end; }
.mix-deck-score-ribbon i { flex: 1; min-width: 3px; height: 35%; background: rgba(99,102,241,.7); border-radius: 2px 2px 0 0; }
.mix-deck-score-ribbon i:nth-child(2n) { height: 70%; } .mix-deck-score-ribbon i:nth-child(3n) { height: 100%; background: rgba(20,215,242,.72); }
[data-mix-has-audio="false"] .mix-deck-score-ribbon,
[data-mix-has-audio="false"] .mix-deck-beats { display: none; }
.mix-deck-timeline {
  --mix-label-width: 82px;
  position: relative;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(148,163,184,.18);
  background: #060b12;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.28) transparent;
}
.mix-deck-timeline-canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}
.mix-deck-ruler {
  margin-left: var(--mix-label-width);
  position: sticky;
  top: 0;
  z-index: 7;
  height: 24px;
  cursor: ew-resize;
  color: #778396;
  background-color: #090f18;
  background-image: repeating-linear-gradient(90deg, rgba(148,163,184,.2) 0 1px, transparent 1px 6.25%);
  border-bottom: 1px solid rgba(148,163,184,.17);
  font-size: .43rem;
}
[data-mix-seek-surface] { touch-action: none; }
.mix-deck-ruler:hover { background-color: #0b121c; }
.mix-deck-ruler span { position: absolute; top: 6px; transform: translateX(-50%); }
.mix-deck-lane { display: grid; grid-template-columns: var(--mix-label-width) minmax(0,1fr); min-height: 42px; border-bottom: 1px solid rgba(148,163,184,.1); }
.mix-deck-lane:last-child { border-bottom: 0; }
.mix-deck-lane:not([data-mix-audio-master]) { min-height: 38px; }
.mix-deck-lane-label {
  position: sticky;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: #8c98a8;
  background: #0a1019;
  border-right: 1px solid rgba(148,163,184,.13);
  font-size: .46rem;
  letter-spacing: .05em;
}
[data-mix-audio-master] {
  min-height: 38px;
  background: #080b16;
}
audio[data-mix-project-audio] { display: none; }
[data-mix-audio-master] .mix-deck-lane-label {
  flex-wrap: wrap;
  align-content: center;
  gap: 2px 5px;
  color: #a8a8da;
  background: #0d1020;
  border-right-color: rgba(129,140,248,.2);
  font-size: .39rem;
  line-height: 1.2;
  white-space: normal;
}
[data-mix-audio-master] .mix-deck-lane-label::after {
  content: "LOCK";
  padding: 1px 3px;
  color: #8e95c8;
  border: 1px solid rgba(129,140,248,.25);
  border-radius: 2px;
  font-size: .34rem;
  letter-spacing: .08em;
}
.mix-deck-audio-status {
  position: absolute;
  top: 50%;
  right: 7px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  max-width: 46%;
  overflow: hidden;
  padding: 2px 4px;
  color: #99a0cf;
  background: rgba(9,12,24,.88);
  border: 1px solid rgba(129,140,248,.18);
  border-radius: 2px;
  font: .34rem/1.15 var(--font-mono);
  letter-spacing: .045em;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform: translateY(-50%);
}
.mix-deck-audio-status::before {
  content: "";
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #737aa7;
}
.mix-deck-audio-status[data-state="ready"] { color: #b3b9e8; }
.mix-deck-audio-status[data-state="disabled"] { color: #747c8d; border-color: rgba(148,163,184,.12); }
.mix-deck-audio-track:has(audio[data-mix-audio-state="playing"]) .mix-deck-audio-status { color: var(--primary-bright); border-color: rgba(20,215,242,.32); }
.mix-deck-audio-track:has(audio[data-mix-audio-state="playing"]) .mix-deck-audio-status::before { background: var(--primary); }
.mix-deck-audio-track:has(audio[data-mix-audio-state="inactive"]) .mix-deck-beats { opacity: .42; }
.mix-deck-track {
  position: relative;
  min-height: 42px;
  cursor: crosshair;
  background-color: #070d15;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), rgba(148,163,184,.08) 12.5%);
}
.mix-deck-lane:not([data-mix-audio-master]) .mix-deck-track { min-height: 38px; }
.mix-deck-track:hover { background-color: #09111a; }
.mix-deck-track.drop-ready { outline: 1px solid var(--primary); outline-offset: -1px; background-color: rgba(20,215,242,.08); }
.mix-deck-audio-track {
  min-height: 38px;
  cursor: ew-resize;
  background-color: #090c18;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(6.25% - 1px), rgba(99,102,241,.2) 6.25%);
  box-shadow: inset 0 1px rgba(129,140,248,.08), inset 0 -1px rgba(129,140,248,.08);
}
.mix-deck-beats {
  position: absolute;
  inset: 6px 0;
  overflow: hidden;
  background: linear-gradient(180deg, transparent calc(50% - .5px), rgba(129,140,248,.24) 50%, transparent calc(50% + .5px));
  opacity: .84;
}
.mix-deck-beats::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(116,226,240,.66) 0 2px, transparent 2px 5px);
  clip-path: polygon(0 48%,3% 25%,6% 68%,9% 38%,12% 76%,15% 20%,18% 58%,21% 34%,24% 70%,27% 43%,30% 16%,33% 64%,36% 31%,39% 78%,42% 45%,45% 24%,48% 66%,51% 35%,54% 74%,57% 19%,60% 61%,63% 39%,66% 69%,69% 27%,72% 77%,75% 43%,78% 22%,81% 63%,84% 36%,87% 71%,90% 29%,93% 59%,96% 40%,100% 52%);
}
[data-mix-ghost-track] {
  min-height: 32px;
  opacity: .62;
  border-top: 1px dashed rgba(148,163,184,.2);
  border-bottom: 0;
}
[data-mix-ghost-track] .mix-deck-lane-label {
  color: #667386;
  background: #080d15;
}
[data-mix-ghost-track] .mix-deck-track {
  min-height: 32px;
  background-color: #060b12;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.06);
}
[data-mix-ghost-track] .mix-deck-lane-empty {
  padding: 8px 10px;
  font-size: .44rem;
}
[data-mix-ghost-track] .mix-deck-track.drop-ready {
  background-color: rgba(20,215,242,.08);
  box-shadow: inset 0 0 0 1px rgba(20,215,242,.55);
}
.mix-deck-segment {
  position: absolute;
  top: 4px;
  bottom: 4px;
  overflow: hidden;
  padding: 4px 7px 3px;
  text-align: left;
  border: 1px solid rgba(88,191,207,.48);
  border-radius: 3px;
  background: #12313b;
  color: var(--text);
}
.mix-deck-segment::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: rgba(20,215,242,.7);
}
.mix-deck-segment:hover { border-color: rgba(20,215,242,.78); background: #163b46; }
.mix-deck-segment.selected {
  z-index: 4;
  border-color: var(--primary-bright);
  background: #184a55;
  box-shadow: inset 0 0 0 1px rgba(6,251,252,.32), 0 0 0 1px rgba(6,251,252,.15);
}
[data-mix-tool-active="split"] .mix-deck-segment { cursor: crosshair; }
.mix-deck-trim-handle { display: none; position: absolute; z-index: 6; top: 0; bottom: 0; width: 8px; background: var(--primary-bright); cursor: ew-resize; }
.mix-deck-trim-handle--left { left: 0; border-radius: 2px 0 0 2px; }
.mix-deck-trim-handle--right { right: 0; border-radius: 0 2px 2px 0; }
[data-mix-tool-active="trim"] .mix-deck-segment.selected .mix-deck-trim-handle { display: block; }
.mix-deck-segment b, .mix-deck-segment small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mix-deck-segment b { font: 600 .5rem var(--font-head); } .mix-deck-segment small { margin-top: 2px; color: var(--muted); font: .42rem var(--font-mono); }
.mix-deck-segment-ffx {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  max-width: 52%;
  pointer-events: none;
}
.mix-deck-segment-ffx i {
  overflow: hidden;
  max-width: 54px;
  padding: 1px 3px;
  color: #d5ccff;
  background: rgba(79,70,155,.88);
  border: 1px solid rgba(167,139,250,.45);
  border-radius: 2px;
  font: 400 .34rem/1.2 var(--font-mono);
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
[data-mix-clip-body]::after {
  content: "FX +";
  position: absolute;
  right: 4px;
  bottom: 3px;
  padding: 1px 3px;
  color: var(--primary-bright);
  background: rgba(2,8,13,.88);
  border: 1px dashed rgba(20,215,242,.55);
  border-radius: 2px;
  font: 500 .34rem/1.2 var(--font-mono);
  opacity: 0;
}
[data-mix-clip-body]:hover::after {
  opacity: 1;
}
.mix-deck-transition-boundary {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 6;
  width: 16px;
  margin-left: -8px;
  cursor: copy;
}
.mix-deck-transition-boundary::before {
  content: "";
  position: absolute;
  inset: 4px auto;
  left: 50%;
  width: 2px;
  background: rgba(167,139,250,.75);
  box-shadow: 0 0 0 1px rgba(79,70,229,.2);
  transform: translateX(-50%);
}
.mix-deck-transition-boundary::after {
  content: "T";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 12px;
  height: 12px;
  place-items: center;
  color: #d8d1ff;
  background: #332f69;
  border: 1px solid rgba(167,139,250,.62);
  border-radius: 2px;
  font: 600 .36rem var(--font-mono);
  transform: translate(-50%,-50%);
}
.mix-deck-transition-boundary.drop-ready::before {
  width: 4px;
  background: var(--primary-bright);
  box-shadow: 0 0 8px rgba(6,251,252,.6);
}
.mix-deck-transition-boundary.drop-ready::after {
  color: var(--bg-void);
  background: var(--primary-bright);
  border-color: var(--primary-bright);
}
.mix-deck-segment--low { background: #182943; border-color: rgba(99,102,241,.5); }
.mix-deck-segment--low::before { background: rgba(129,140,248,.78); }
.mix-deck-segment--peak { background: #482337; border-color: rgba(244,63,94,.62); }
.mix-deck-segment--peak::before { background: rgba(251,113,133,.85); }
.mix-deck-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 9;
  width: 1px;
  min-height: 100%;
  pointer-events: none;
  background: var(--primary-bright);
  box-shadow: 0 0 5px rgba(6,251,252,.42);
  transform: translateX(-.5px);
}
.mix-deck-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 7px;
  background: var(--primary-bright);
  clip-path: polygon(0 0,100% 0,50% 100%);
  transform: translateX(-50%);
}
.mix-deck-keyboard { padding: 5px 2px 0; color: rgba(148,163,184,.65); font-size: .42rem; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mix-deck-inspector-kicker { color: var(--primary); font-size: .5rem; letter-spacing: .11em; }
.mix-deck-inspector h3 { margin: 7px 0 4px; color: var(--text); font: 600 .82rem var(--font-head); }
.mix-deck-inspector-meta { color: var(--muted); font-size: .48rem; line-height: 1.5; }
.mix-deck-field { display: flex; flex-direction: column; gap: 5px; margin-top: 15px; color: var(--muted); font: .49rem var(--font-mono); }
.mix-deck-field span { display: flex; justify-content: space-between; }
.mix-deck-field output { color: var(--primary); }
.mix-deck-field select { width: 100%; padding: 6px; border: 1px solid rgba(20,215,242,.2); border-radius: 3px; background: var(--bg-panel); color: var(--text); font: .52rem var(--font-mono); }
.mix-deck-field input { accent-color: var(--primary); }
.mix-deck-stack { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.mix-deck-stack > small { display: block; color: var(--muted); font-size: .5rem; line-height: 1.5; margin-top: 7px; }
.mix-deck-stack-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 5px; margin: 5px 4px 0 0; color: var(--primary-bright); background: rgba(20,215,242,.08); border: 1px solid rgba(20,215,242,.22); border-radius: 3px; font: .44rem var(--font-mono); }
.mix-deck-stack-chip button { color: var(--muted); font-size: .65rem; }
.mix-deck-remove { width: 100%; margin-top: 20px; color: #ff8080; border-color: rgba(255,80,80,.3); }
.mix-deck-inspector-empty, .mix-deck-empty { display: grid; place-items: center; align-content: center; gap: 9px; flex: 1; color: var(--muted); text-align: center; }
.mix-deck-empty-mark, .mix-deck-inspector-empty span { color: var(--primary); font-size: 2.2rem; text-shadow: 0 0 22px rgba(20,215,242,.45); }
.mix-deck-empty b, .mix-deck-inspector-empty b { color: var(--text); font: 600 .7rem var(--font-head); letter-spacing: .11em; }
.mix-deck-empty small, .mix-deck-inspector-empty small { max-width: 270px; font-size: .55rem; line-height: 1.5; }
@media (max-width: 1120px) {
  .mix-deck-grid { grid-template-columns: 190px minmax(390px,1fr) 190px; }
}
@media (max-width: 980px) {
  .mix-deck-grid { grid-template-columns: 180px minmax(360px,1fr); }
  .mix-deck-inspector { display: none; }
}
@media (max-width: 760px) {
  .mix-deck-window { min-width: calc(100vw - 12px); min-height: calc(100vh - 64px); }
  .mix-deck-toolbar { gap: 6px; }
  .mix-deck-track-title { flex-basis: 100%; }
  .mix-deck-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: 142px minmax(0,1fr); }
  .mix-deck-shelf { border-right: 0; border-bottom: 1px solid rgba(148,163,184,.16); }
  .mix-deck-shelf-body { display: grid; grid-auto-flow: column; grid-auto-columns: 160px; gap: 7px; overflow: auto hidden; }
  .mix-deck-clip-card, .mix-deck-capability { margin-bottom: 0; }
  .mix-deck-clip-source-window { min-height: 18px; }
  button[data-mix-render-full] { min-width: 132px; }
  [data-mix-render-status] { max-width: 150px; }
  .mix-deck-center { grid-template-rows: minmax(140px,1fr) 34px 25px minmax(160px,.9fr) 18px; padding: 7px; }
  .mix-deck-transport { grid-template-columns: auto 1px 28px 34px 28px auto minmax(108px,1fr); justify-content: stretch; }
  .mix-deck-timecode { min-width: 80px; margin-left: 3px; padding-left: 6px; }
  .mix-deck-zoom { grid-template-columns: minmax(48px,1fr) 34px; gap: 4px; margin-left: 3px; font-size: 0; }
  .mix-deck-zoom input, .mix-deck-zoom output { font-size: .4rem; }
  .mix-deck-viewport-hud { grid-template-columns: auto 1fr; }
  .mix-deck-viewport-hud > span:last-child { display: none; }
  .mix-deck-timeline { --mix-label-width: 68px; }
  [data-mix-audio-master] .mix-deck-lane-label { font-size: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
  button[data-mix-render-full][aria-busy="true"]::before { animation: none; }
}

/* ── MOBILE STUDIO SHELL ──────────────────────────────────────────────────
   Studio is a windowed desktop surface, but mobile is still a supported
   working surface.  Keep the shell fixed, make each window the viewport,
   and let the window body—not the page—own scrolling.  The inline desktop
   dimensions in studio.html are deliberately overridden here so newly added
   windows inherit the same mobile behavior automatically. */
@media (max-width: 720px) {
  html, body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  #shell,
  #desktop {
    min-width: 0;
    width: 100%;
  }

  #desktop {
    overflow: hidden;
  }

  .os-window,
  .os-window:not(.mix-deck-window),
  .mix-deck-window {
    position: absolute;
    inset: 6px !important;
    width: auto !important;
    max-width: calc(100vw - 12px) !important;
    height: auto !important;
    max-height: calc(100dvh - var(--menubar-h) - 12px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 8px;
  }

  .os-window .win-titlebar {
    min-height: 44px;
    height: 44px;
    padding-inline: 8px;
    cursor: default;
    touch-action: none;
  }

  .os-window .tl {
    width: 16px;
    height: 16px;
  }

  .os-window .win-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .56rem;
  }

  .os-window .win-body {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .os-window .win-pad,
  .os-window .win-body > * {
    max-width: 100%;
  }

  .os-window .flex-row,
  .os-window .render-drafts-heading,
  .os-window .unreal-worlds-header,
  .os-window .look-proof-header {
    flex-wrap: wrap;
  }

  .os-window input,
  .os-window select,
  .os-window textarea,
  .os-window button,
  .os-window .cta,
  .os-window .cta-ghost {
    max-width: 100%;
  }

  .os-window button,
  .os-window .cta,
  .os-window .cta-ghost,
  .os-window input,
  .os-window select {
    min-height: 40px;
  }

  .os-window .win-resize {
    display: none;
  }

  /* Mix Deck has a wide desktop grid and otherwise escapes the generic
     mobile window rule.  Its own 760px layout breakpoint becomes the single
     column mobile layout, with the shelf remaining horizontally scrollable. */
  .mix-deck-window .mix-deck-toolbar {
    flex-wrap: wrap;
    min-height: 44px;
  }

  .mix-deck-window .mix-deck-grid {
    min-width: 0;
    width: 100%;
  }

  .mix-deck-window .mix-deck-center,
  .mix-deck-window .mix-deck-shelf,
  .mix-deck-window .mix-deck-shelf-body {
    min-width: 0;
  }

  .mix-deck-window .mix-deck-shelf-body {
    max-width: 100%;
  }

  .preview-controls,
  .final-actions,
  .delivery-actions,
  .record-actions {
    flex-wrap: wrap;
  }

  .preview-controls > *,
  .final-actions > *,
  .delivery-actions > *,
  .record-actions > * {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  #menubar .app-btn {
    min-width: 50px;
    min-height: 42px;
  }

  .os-window .win-titlebar {
    padding-inline: 6px;
  }

  .os-window .traffic-lights {
    gap: 5px;
  }

  .os-window .win-title {
    letter-spacing: .08em;
  }

  .preview-controls,
  .preview-controls > *,
  .preview-activity {
    width: 100%;
  }

  .preview-controls .preview-status,
  .preview-controls .preview-activity {
    text-align: center;
    justify-content: center;
  }
}

/* ── MAIL SINK (operator-only capture viewer) ──────────────────────────────
   Like the PFunk triggers above, no CSS rule may force-hide the
   .operator-only-app launchers — visibility is decided by applyOperatorGating()
   from the live session, and non-operators have the nodes removed outright. */
.mail-sink-body { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.mail-sink-note { font-size: .55rem; line-height: 1.5; color: var(--muted); }
.mail-sink-status { min-height: 1em; font-size: .55rem; color: var(--muted); }
.mail-sink-list { display: flex; flex-direction: column; gap: 6px; }
.mail-sink-item { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border: 1px solid rgba(20,215,242,.2); border-radius: 4px; }
.mail-sink-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mail-sink-item-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6rem; }
.mail-sink-link { font-family: var(--font-mono); font-size: .55rem; word-break: break-all; color: var(--primary-bright); }

/* ── LAUNCH FUNNEL (operator-only signup aggregates) ───────────────────────
   Same doctrine as the Mail Sink above: no CSS rule may force-hide the
   .operator-only-app launchers — visibility is decided by applyOperatorGating()
   from the live session, and non-operators have the nodes removed outright. */
.launch-funnel-body { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.launch-funnel-note { font-size: .55rem; line-height: 1.5; color: var(--muted); }
.launch-funnel-status { min-height: 1em; font-size: .55rem; color: var(--muted); }
.launch-funnel-content { display: flex; flex-direction: column; gap: 10px; }
.launch-funnel-section { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border: 1px solid rgba(20,215,242,.2); border-radius: 4px; }
.launch-funnel-heading { font-size: .5rem; letter-spacing: .08em; color: var(--muted); }
.launch-funnel-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.launch-funnel-label { font-size: .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.launch-funnel-count { font-family: var(--font-mono); font-size: .6rem; color: var(--primary-bright); flex: none; }
.launch-funnel-integrity { font-size: .55rem; color: var(--muted); }
.launch-funnel-integrity-bad { color: #ff6b6b; }

/* ── SHOWCASE MODE ──────────────────────────────────────────────────────
   Public read-only demo (demo.oscillihue.com). Applied once by
   applyShowcaseMode() in studio.js off liveSession.showcase. */
body.showcase-mode { --showcase-ribbon-h: 28px; }
#showcase-ribbon {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  height: var(--showcase-ribbon-h);
  align-items: center; justify-content: center; gap: 8px;
  background: rgba(2,4,8,0.97);
  border-bottom: 1px solid rgba(20,215,242,0.22);
  font-family: var(--font-mono); font-size: 0.56rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--primary-bright);
  padding: 0 16px; text-align: center;
}
body.showcase-mode #showcase-ribbon { display: flex; }
#showcase-ribbon .pulse-dot { width: 5px; height: 5px; }
body.showcase-mode #menubar { top: var(--showcase-ribbon-h); }
body.showcase-mode #shell { top: calc(var(--menubar-h) + var(--showcase-ribbon-h)); }

.credit-badge-demo,
.credit-badge-demo:hover {
  cursor: default;
  border-color: rgba(148,163,184,0.28);
  color: var(--muted);
  text-shadow: none;
}

.dock-tag-soon {
  margin-left: auto; padding: 1px 6px; border-radius: 999px;
  border: 1px solid rgba(20,215,242,0.28);
  font-family: var(--font-mono); font-size: 0.44rem;
  letter-spacing: 0.1em; color: var(--primary);
  flex: 0 0 auto;
}

/* ─── ASSET FOUNDRY "COMING SOON" MODAL ──────────────────────────────────
   Same visual language as #quick-look / #auth-modal: fixed overlay,
   backdrop blur, centered panel, .open toggles visibility. */
.showcase-modal {
  position: fixed; inset: 0; z-index: 1300;
  display: none; place-items: center;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(10px);
}
.showcase-modal.open { display: grid; }
.showcase-modal-panel {
  position: relative;
  width: min(480px, 90vw); padding: 32px 28px 28px;
  border-radius: 14px;
  background: rgba(3,6,14,0.98);
  border: 1px solid rgba(20,215,242,0.28);
  box-shadow: 0 40px 100px rgba(0,0,0,0.9);
  display: flex; flex-direction: column; gap: 12px;
}
.showcase-modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 26px; height: 26px; border-radius: 6px;
  font-size: 1.1rem; line-height: 1; color: var(--muted);
}
.showcase-modal-close:hover { color: var(--text); background: rgba(20,215,242,0.09); }
.showcase-modal-tag {
  align-self: flex-start; padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(20,215,242,0.3);
  font-family: var(--font-mono); font-size: 0.52rem;
  letter-spacing: 0.14em; color: var(--primary);
}
.showcase-modal-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: 0.1em; color: var(--text);
}
.showcase-modal-copy { font-size: 0.78rem; line-height: 1.6; color: var(--muted); }

/* ─── LIBRARY / TUNE PRESET GATING (demo pre-approves one preset) ────────── */
.preset-card.library-card-demo-locked {
  position: relative;
  opacity: 0.4;
  cursor: not-allowed;
}
.preset-card.library-card-demo-locked:hover { border-color: rgba(20,215,242,0.12); transform: none; }
.library-demo-locked-pill {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  padding: 1px 6px; border-radius: 999px;
  border: 1px solid rgba(20,215,242,0.28);
  background: rgba(3,6,14,0.85);
  font-family: var(--font-mono); font-size: 0.44rem;
  letter-spacing: 0.1em; color: var(--primary);
}

/* ─── ENHANCEMENT WINDOW ─────────────────────────────────────────────── */
.enhancement-target-row { display:flex; flex-direction:column; gap:6px; padding-top:0; }
.enhancement-passes { display:flex; flex-direction:column; gap:6px; padding:6px 16px; }
.enhancement-pass { display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border:1px solid rgba(20,215,242,.14); border-radius:8px; background:rgba(20,215,242,.035); cursor:pointer; transition:border-color 140ms, background 140ms; }
.enhancement-pass:hover { border-color:rgba(20,215,242,.4); }
.enhancement-pass input { accent-color:var(--primary); margin-top:2px; flex:0 0 auto; }
.enhancement-pass b { display:block; font:0.56rem var(--font-mono); letter-spacing:.12em; color:var(--text); }
.enhancement-pass small { display:block; margin-top:3px; color:var(--muted); font-size:.6rem; line-height:1.4; }
.enhancement-actions { display:flex; align-items:center; gap:12px; padding-top:4px; }
.enhancement-queue { display:flex; flex-direction:column; gap:6px; }
.enhancement-queue-item { display:flex; justify-content:space-between; gap:10px; padding:8px 11px; border:1px solid rgba(20,215,242,.14); border-radius:8px; font:0.58rem var(--font-mono); letter-spacing:.06em; color:var(--text); }
.enhancement-queue-item small { color:var(--muted); letter-spacing:.04em; }
.enhancement-queue-item button { color:var(--muted); background:transparent; border:0; cursor:pointer; font:0.56rem var(--font-mono); letter-spacing:.1em; }
.enhancement-queue-item button:hover { color:var(--primary); }

/* ─── MUSIC LAB (cousin app) ─────────────────────────────────────────── */
.mlab-body { display:flex; flex-direction:column; min-height:0; padding:0; }
.mlab-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:16px 18px 12px; border-bottom:1px solid rgba(231,202,143,.14); background:linear-gradient(145deg,rgba(231,202,143,.05),transparent 60%); }
.mlab-project { margin-top:6px; font-size:1.15rem; font-weight:500; color:var(--text); letter-spacing:.01em; }
.mlab-project-sub { margin-top:3px; color:var(--muted); font:0.6rem var(--font-mono); letter-spacing:.06em; }
.mlab-head-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.mlab-status { padding:3px 8px; border:1px solid rgba(52,211,153,.35); border-radius:999px; color:#86efac; font:0.52rem var(--font-mono); letter-spacing:.12em; }
.mlab-status.busy { color:var(--warn); border-color:rgba(251,191,36,.4); }
.mlab-status.error { color:#fca5a5; border-color:rgba(248,113,113,.4); }
.mlab-tabs { display:flex; gap:2px; padding:10px 14px 0; border-bottom:1px solid rgba(20,215,242,.14); flex:0 0 auto; }
.mlab-tab { padding:8px 11px; color:var(--muted); border:1px solid transparent; border-bottom:0; border-radius:5px 5px 0 0; background:transparent; cursor:pointer; font:0.56rem var(--font-mono); letter-spacing:.14em; }
.mlab-tab:hover { color:var(--text); }
.mlab-tab.active { color:var(--primary); border-color:rgba(20,215,242,.2); background:rgba(20,215,242,.05); }
.mlab-panels { flex:1; min-height:0; overflow:auto; }
.mlab-panel { display:none; padding:16px 18px 22px; }
.mlab-panel.active { display:block; }
.mlab-section-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.mlab-h2 { margin:6px 0 4px; font-size:1.4rem; font-weight:500; color:var(--text); }
.mlab-copy { margin:0; color:var(--muted); font-size:.7rem; line-height:1.55; }
.mlab-canvas-frame { margin-top:14px; padding:10px; border:1px solid rgba(157,217,237,.18); border-radius:10px; background:#08121a; }
.mlab-detail { margin-top:12px; padding:11px 13px; border-left:2px solid #8dbbd0; color:var(--muted); font-size:.68rem; line-height:1.5; }
.mlab-two-sides { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.mlab-side { padding:12px; border-radius:10px; }
.mlab-side-lab { border:1px solid rgba(231,202,143,.18); background:rgba(231,202,143,.05); }
.mlab-side-osc { border:1px solid rgba(157,217,237,.18); background:rgba(157,217,237,.05); }
.mlab-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:12px; }
.mlab-card { padding:12px 13px; border:1px solid rgba(20,215,242,.14); border-radius:9px; background:rgba(20,215,242,.035); }
.mlab-card h4 { margin:0 0 8px; font:0.54rem var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:#d6ba7d; }
.mlab-card p { margin:0 0 8px; color:var(--muted); font-size:.66rem; line-height:1.5; }
.mlab-kv { display:grid; grid-template-columns:minmax(120px,38%) 1fr; gap:4px 10px; font:0.6rem var(--font-mono); letter-spacing:.03em; }
.mlab-kv dt { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mlab-kv dd { margin:0; color:var(--text); word-break:break-word; }
.mlab-chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px; }
.mlab-chip { padding:4px 8px; border-radius:999px; border:1px solid rgba(231,202,143,.25); background:rgba(231,202,143,.08); color:#f0dfb4; font:0.54rem var(--font-mono); letter-spacing:.08em; }
.mlab-table { width:100%; border-collapse:collapse; margin-top:12px; font:0.6rem var(--font-mono); letter-spacing:.03em; }
.mlab-table th { text-align:left; padding:6px 8px; color:var(--muted); font-weight:400; letter-spacing:.12em; border-bottom:1px solid rgba(20,215,242,.16); }
.mlab-table td { padding:6px 8px; color:var(--text); border-bottom:1px solid rgba(20,215,242,.07); }
.mlab-table tr.selected td { color:var(--primary); }
.mlab-list { margin:8px 0 0; padding-left:16px; color:var(--muted); font-size:.66rem; line-height:1.55; }
.mlab-list li { margin-bottom:5px; }
.mlab-quote { margin:10px 0 0; padding:10px 12px; border-left:2px solid #d6ba7d; color:var(--text); font-size:.7rem; line-height:1.55; }

/* ---------------------------------------------------------------------------
   Menubar breathing room, 2026-09-20. It was 44px tall with a 2px gap, 10px of
   side padding and buttons at 4/6 — everything touching everything, and one
   more control (AUDIO) made that plain. The height moves through --menubar-h,
   which the canvas offset and the window max-height already read, so the
   layout follows rather than needing its own adjustment.
   --------------------------------------------------------------------------- */