/* ===================================================================== *
 *  OpenFaceFX Studio — design system
 *  A professional facial-animation tool: dark-first, dense, precise.
 *  Palette: cool charcoal ground · OpenFaceFX amber accent · cyan for data.
 *  Type: a clean UI grotesque + monospace for timecode / values.
 * ===================================================================== */

:root {
  --bg:#0c1015; --bg-2:#080b0f;
  --panel:#141a22; --panel-2:#0f151c; --elev:#1c2531;
  --line:#252d38; --line-2:#333d4a;
  --fg:#e6edf3; --fg-dim:#93a1b0; --fg-mute:#8792a0;   /* >=4.5:1 on panel/elev/body */
  --accent:#f4b942; --accent-ink:#20160333; --on-accent:#1a1205;
  --accent-text:#f4b942;        /* accent used as TEXT — see the light theme */
  --accent-2:#4cc2ff;
  --good:#3fb950; --warn:#d7a629; --crit:#f0603a; --info:#58a6ff;

  --font-ui: ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono: ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  --r:9px; --r-sm:6px;
  --sp:14px;
  --rail-w:302px;
  --topbar-h:52px; --transport-h:52px; --tabs-h:44px;
  --shadow:0 8px 30px rgba(0,0,0,.45);
}
:root[data-theme="light"] {
  --bg:#eef1f5; --bg-2:#e3e8ef;
  --panel:#ffffff; --panel-2:#f3f6fa; --elev:#ffffff;
  --line:#d9dfe8; --line-2:#c3ccd8;
  --fg:#1a222c; --fg-dim:#54606d; --fg-mute:#656f7c;   /* >=4.5:1 on white/panel-2 */
  --accent:#c8860b; --on-accent:#1a1205; --accent-2:#1f7fbf;
  --accent-text:#8a5a00;        /* readable amber for text on light panels */
  --good:#166b2e; --warn:#8a6100; --crit:#b3261e; --info:#0b57d0;
  --shadow:0 8px 30px rgba(30,45,70,.14);
}

* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-ui); font-size:14px; line-height:1.5;
  display:grid; grid-template-rows:var(--topbar-h) 1fr var(--transport-h);
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
/* readable by assistive tech, invisible on screen */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.dim  { color:var(--fg-dim); }
h2,h3 { margin:0; font-weight:600; }
button { font-family:inherit; }

/* ---- Top bar --------------------------------------------------------- */
.topbar {
  display:flex; align-items:center; gap:18px; padding:0 16px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-bottom:1px solid var(--line);
}
/* an <h1> for the document outline — reset the UA heading box so it stays a chip */
.brand { display:flex; align-items:baseline; gap:8px; font-weight:600; letter-spacing:.01em;
  margin:0; font-size:inherit; }
.brand-mark { color:var(--accent-text); font-size:20px; transform:translateY(2px); }
.brand-name { white-space:nowrap; }        /* "OpenFaceFX" is one wordmark — never split */
.brand-name b { color:var(--accent-text); }
.brand-sub { color:var(--fg-dim); font-weight:500; }
.brand.big { font-size:22px; gap:10px; } .brand.big .brand-mark { font-size:26px; }
.topbar-spacer { flex:1; }
.topbar-group { display:flex; align-items:center; gap:12px; }
.field { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--fg-dim); }
.field.small input { width:44px; }
.field input, .field select {
  background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:5px 8px; font-family:inherit; font-size:13px; min-width:0;
}
.field input[type=text] { width:120px; }
.runtime { font-size:12px; color:var(--fg-dim); border:1px solid var(--line);
  border-radius:100px; padding:4px 11px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--warn);
  margin-right:6px; vertical-align:middle; box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent); }
.dot.ready { background:var(--good); box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent); }
.dot.err { background:var(--crit); box-shadow:0 0 0 3px color-mix(in srgb,var(--crit) 22%,transparent); }

/* ---- Shell ----------------------------------------------------------- */
.shell { display:grid; grid-template-columns:var(--rail-w) 1fr var(--rail-w);
  min-height:0; background:var(--bg-2); }
.rail { background:var(--bg); border-inline:1px solid var(--line); overflow-y:auto;
  display:flex; flex-direction:column; gap:1px; }
.rail-right { border-inline:0; border-left:1px solid var(--line); }
.panel { background:var(--panel); padding:14px; border-bottom:1px solid var(--line); }
.panel-title { font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--fg-dim); margin-bottom:11px; display:flex; align-items:center; gap:8px; }
.count { background:var(--panel-2); border:1px solid var(--line); border-radius:100px;
  padding:0 8px; font-size:11px; color:var(--fg-dim); }

/* ---- Forms ----------------------------------------------------------- */
.lbl { display:block; font-size:11px; color:var(--fg-dim); margin:0 0 5px;
  text-transform:uppercase; letter-spacing:.05em; }
textarea, .gen input, .gen select {
  width:100%; background:var(--panel-2); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 10px; font-family:inherit; font-size:13.5px;
}
textarea { resize:vertical; min-height:74px; line-height:1.45; }
.gen-row { margin-top:11px; } .gen-row.two { display:flex; gap:10px; }
.gen-row.two > div { flex:1; }
.filebtn { display:inline-block; padding:8px 13px; border:1px dashed var(--line-2);
  border-radius:var(--r-sm); color:var(--fg-dim); font-size:12.5px; cursor:pointer;
  background:transparent; font-family:inherit; }
.filebtn:hover { border-color:var(--accent); color:var(--fg); }
.filehint { display:block; margin-top:6px; font-size:11.5px; color:var(--fg-mute); }
/* min-height meets WCAG 2.2 Target Size (2.5.8): the checkbox glyph stays 15px
 * but the whole label toggles it, so the label is the real target. */
.opt { display:flex; align-items:flex-start; gap:9px; margin-top:10px; font-size:12.5px;
  color:var(--fg-dim); cursor:pointer; line-height:1.45; min-height:24px; }
.opt.inline { margin:0; align-items:center; }
.opt input[type=checkbox] { accent-color:var(--accent); width:15px; height:15px; flex:none; margin:1px 0 0; }

/* ---- Buttons --------------------------------------------------------- */
.btn { border:1px solid var(--line-2); background:var(--elev); color:var(--fg);
  border-radius:var(--r-sm); padding:8px 15px; font-size:13px; cursor:pointer; transition:.12s; }
.btn:hover { border-color:var(--fg-mute); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
.btn.primary:hover:not(:disabled) { filter:brightness(1.07); }
.btn.ghost { background:transparent; border-color:transparent; color:var(--fg-dim); font-size:16px; padding:6px 9px; }
.btn.ghost:hover { color:var(--fg); background:var(--panel-2); }
.btn.block { width:100%; margin-top:14px; }
.bootbar { height:4px; background:var(--panel-2); border-radius:3px; overflow:hidden; margin-top:10px; }
.bootbar > i { display:block; height:100%; width:0; background:var(--accent); transition:width .25s; }

/* ---- Channel list ---------------------------------------------------- */
.channels { flex:1; }
.channel-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.channel-list .empty, .inspector .empty { color:var(--fg-mute); font-size:12.5px; line-height:1.5; }
.chan { display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:var(--r-sm);
  cursor:pointer; font-size:13px; }
.chan:hover { background:var(--panel-2); }
.chan.sel { background:color-mix(in srgb,var(--accent) 15%,transparent); }
.chan .sw { width:11px; height:11px; border-radius:3px; flex:none; }
.chan .nm { flex:1; font-family:var(--font-mono); font-size:12.5px; }
.chan .kc { color:var(--fg-mute); font-size:11px; font-variant-numeric:tabular-nums; }
.chan .vis { opacity:.5; } .chan.off .nm, .chan.off .kc { opacity:.4; }
.chan .own { color:var(--accent-text); font-size:11px; margin-right:2px; }
#reanalyze { margin-top:8px; font-size:12.5px; }

/* ---- Workspace / tabs ------------------------------------------------ */
.workspace { display:grid; grid-template-rows:var(--tabs-h) 1fr; min-width:0; background:var(--bg); }
.tabs { display:flex; align-items:stretch; gap:2px; padding:0 8px; background:var(--panel-2);
  border-bottom:1px solid var(--line); overflow-x:auto; }
.tab { border:0; background:transparent; color:var(--fg-dim); padding:0 16px; font-size:13px;
  cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.tab:hover { color:var(--fg); }
.tab.active { color:var(--fg); border-bottom-color:var(--accent); }
.views { position:relative; min-height:0; }
.view { position:absolute; inset:0; padding:18px; overflow:auto; display:none; flex-direction:column; gap:12px; }
.view.active { display:flex; }
.lane-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lane-head h3 { font-size:14px; }
.view-note { font-size:12px; margin:2px 0 0; max-width:70ch; }

/* ---- Curve tools + QA panel ----------------------------------------- */
.lane-tools { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.qa-panel { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel);
  padding:10px 12px; font-size:12.5px; display:flex; flex-direction:column; gap:6px;
  flex-shrink:0; }   /* grow to fit its content; the view scrolls if it runs past the bottom */
.qa-panel[hidden] { display:none; }
.qa-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-dim); }
.qa-ok { color:var(--good); margin:0; }
.qa-sub { color:var(--fg-dim); margin-top:2px; }
.qa-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; max-height:40vh; overflow:auto; }
.qa-flag { padding:5px 8px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line);
  font-family:var(--font-mono); font-size:12px; }
.qa-flag[data-t] { cursor:pointer; } .qa-flag[data-t]:hover { border-color:var(--accent); }
.qa-flag.warn { color:var(--warn); }
.qa-flag.short { border-left:3px solid var(--crit); }
.qa-flag.long { border-left:3px solid var(--info); }
/* QA pronunciation editor — fix OOV words into the take's cmudict */
.qa-pron { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; max-height:44vh; overflow:auto; }
.qa-pw { display:flex; align-items:center; gap:6px; }
.qa-pw .pw-word { flex:0 0 108px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); }
.qa-pw .pw-in { flex:1 1 auto; min-width:0; background:var(--panel-2); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:4px 6px; font-size:12px; }
.qa-pw .pw-in:focus { outline:none; border-color:var(--accent); }
.qa-pw .pw-save { flex:0 0 auto; }
.qa-pron-foot { display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
/* voice engine settings (BYO-key neural TTS) */
.voice-panel { margin:8px 0 4px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); display:flex; flex-direction:column; gap:8px; }
.voice-panel[hidden] { display:none; }
.vp-row { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--fg-dim); }
.vp-row > span { flex:0 0 74px; }
.vp-row select, .vp-row input { flex:1 1 auto; min-width:0; background:var(--panel-2); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 7px; font-size:12px; font-family:inherit; }
.vp-row select:focus, .vp-row input:focus { outline:none; border-color:var(--accent); }
/* key status + jump-to-Assistant, since API keys live in the Assistant's vault */
.vp-keystatus { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
  justify-content:space-between; font-size:12px; }
.vp-keystatus > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vp-keystatus .btn { flex:0 0 auto; padding:3px 8px; font-size:11px; }
.voice-note { font-size:11px; margin:2px 0 0; line-height:1.45; }
/* Events tab — derived event layer list (#14) */
.event-list { display:flex; flex-direction:column; gap:3px; max-height:220px; overflow:auto;
  margin-top:8px; font-family:var(--font-mono); font-size:12px; }
.event-list .dim { font-family:var(--font-ui); }
.ev-row { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line); cursor:pointer; }
.ev-row:hover { border-color:var(--accent); }
.ev-dot { width:8px; height:8px; border-radius:50%; background:var(--fg-dim); flex:none; }
.ev-dot.ev-emphasis { background:var(--accent); }
.ev-dot.ev-marker { background:var(--accent-2); }
.ev-t { color:var(--fg-dim); min-width:48px; }
.ev-type { color:var(--fg); text-transform:uppercase; letter-spacing:.04em; font-size:11px; min-width:66px; }
.ev-name { color:var(--fg); }
.ev-pay { margin-left:auto; font-size:11px; }
/* Mapping tab — editable viseme→target weight table (#15) */
.mapping-table { display:flex; flex-direction:column; gap:4px; max-height:60vh; overflow:auto;
  font-family:var(--font-mono); font-size:12px; padding-right:4px; }
.map-row { display:flex; align-items:flex-start; gap:10px; padding:5px 6px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line); }
.map-vis { min-width:42px; color:var(--accent-text); font-weight:600; padding-top:4px; flex:none; }
.map-cells { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.map-cell { display:inline-flex; align-items:center; gap:3px; background:var(--elev);
  border:1px solid var(--line); border-radius:100px; padding:2px 4px 2px 6px; }
/* WCAG 2.2 Target Size (2.5.8): these sit in a dense 40-row grid, so the
 * spacing exception doesn't apply — each needs ~24px of its own. */
.map-w { width:44px; background:transparent; color:var(--accent-2); border:none; font-family:var(--font-mono);
  font-size:11.5px; text-align:right; -moz-appearance:textfield; min-height:24px; }
.map-w::-webkit-outer-spin-button, .map-w::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.map-t { width:120px; background:transparent; color:var(--fg); border:none; border-bottom:1px dashed var(--line);
  font-family:var(--font-mono); font-size:11.5px; min-height:24px; }
.map-w:focus, .map-t:focus { outline:none; color:var(--fg); }
.map-t:focus { border-bottom-color:var(--accent); }
.map-del { background:none; border:none; color:var(--fg-mute); cursor:pointer; font-size:11px; padding:0 2px;
  min-width:24px; min-height:24px; }
.map-del:hover { color:var(--crit); }
.map-add { background:var(--elev); border:1px dashed var(--line); border-radius:100px; color:var(--fg-dim);
  cursor:pointer; font-size:12px; padding:2px 9px; min-width:24px; min-height:24px; }
.map-add:hover { border-color:var(--accent); color:var(--fg); }
/* Face Graph — editable rig-output inspector (#22-24) */
.ins-edit { color:var(--accent-text); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.fg-edges { display:flex; flex-direction:column; gap:3px; margin:4px 0; max-height:200px; overflow:auto; }
.insp-row.edge { display:flex; align-items:center; gap:6px; padding:2px 0; }
.fg-w { width:46px; background:var(--panel-2); color:var(--accent-2); border:1px solid var(--line);
  border-radius:var(--r-sm); font-family:var(--font-mono); font-size:11.5px; text-align:right; padding:2px 4px; -moz-appearance:textfield; }
.fg-w::-webkit-outer-spin-button, .fg-w::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.fg-vis { flex:1; color:var(--fg); }
.fg-x { background:none; border:none; color:var(--fg-mute); cursor:pointer; font-size:11px; padding:0 2px; }
.fg-x:hover { color:var(--crit); }
.fg-name { flex:1; background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r-sm); font-family:var(--font-mono); font-size:12px; padding:2px 6px; }
.fg-name:focus { outline:none; border-color:var(--accent); }
.fg-add { background:var(--panel-2); color:var(--fg); border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:11.5px; padding:2px 4px; }
.insp-actions { display:flex; gap:6px; margin-top:8px; }
.insp-actions .btn { flex:1; }
.fg-val { width:56px; background:var(--panel-2); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  border-radius:var(--r-sm); font-family:var(--font-mono); font-size:12px; text-align:right; padding:2px 6px; -moz-appearance:textfield; }
.fg-val::-webkit-outer-spin-button, .fg-val::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.fg-val:focus { outline:none; border-color:var(--accent); }
.fg-val-clr { background:none; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--fg-mute);
  cursor:pointer; font-size:11px; padding:1px 6px; margin-left:5px; }
.fg-val-clr:hover:not(:disabled) { color:var(--fg); border-color:var(--accent); }
.fg-val-clr:disabled { opacity:.4; cursor:default; }
.insp-row.edge.muted { opacity:.4; }
.fg-link { background:var(--panel-2); color:var(--fg); border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:11.5px; padding:2px 4px; }
.fg-link-prev { border:1px solid var(--line); border-radius:3px; background:var(--panel-2); margin-left:6px; vertical-align:middle; }
.mini, .m011 { background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:5px 8px; font-size:12.5px; }

/* ---- Canvas lanes ---------------------------------------------------- */
.lane { width:100%; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r); display:block; }
.lane.tall { flex:1; min-height:280px; }
.phon { height:88px; }   /* two tiers: phonemes (IPA) over grouped words */

/* ---- Preview --------------------------------------------------------- */
.preview-stage { flex:1; position:relative; overflow:hidden; display:flex;
  align-items:center; justify-content:center;
  background:radial-gradient(120% 100% at 50% 0%,var(--panel) 0%,var(--panel-2) 70%);
  border:1px solid var(--line); border-radius:var(--r); }
/* SVG fallback stays modestly sized + centered; the 3D canvas fills the stage */
#face { width:min(56%,340px); height:auto; filter:drop-shadow(0 12px 34px rgba(0,0,0,.4)); }
#face3d { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
#face3d[hidden] { display:none; }
.preview-readout { position:absolute; left:0; right:0; bottom:12px; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  padding:0 12px; text-shadow:0 1px 6px rgba(0,0,0,.65); }
#tcRead { font-size:20px; color:var(--accent-text); letter-spacing:.03em; }
.stage-tools { position:absolute; top:12px; right:12px; z-index:2; display:flex; flex-direction:column; gap:6px; }
.stage-tools[hidden] { display:none; }
.stage-btn { font-size:16px; line-height:1; width:34px; height:34px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--panel) 82%,transparent); color:var(--fg-dim);
  border:1px solid var(--line-2); border-radius:8px; cursor:pointer; backdrop-filter:blur(4px); }
.stage-btn:hover { color:var(--fg); border-color:var(--accent); }
/* on-face pose controls (head XY pad + expression sliders) */
.pose-panel { position:absolute; top:12px; left:12px; z-index:3; width:186px; max-height:calc(100% - 24px);
  overflow:auto; background:color-mix(in srgb,var(--panel) 90%,transparent); border:1px solid var(--line-2);
  border-radius:var(--r); padding:10px; display:flex; flex-direction:column; gap:8px; backdrop-filter:blur(6px); font-size:12px; }
.pose-panel[hidden] { display:none; }
.pose-head { display:flex; align-items:center; justify-content:space-between; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--fg-dim); }
.pose-head .sm { font-size:11px; padding:2px 8px; }
.pose-pad { position:relative; width:100%; aspect-ratio:1/1; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); cursor:crosshair; touch-action:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:50% 50%; background-position:center; }
.pose-dot { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--accent);
  border:2px solid var(--bg); transform:translate(-50%,-50%); left:50%; top:50%; pointer-events:none; }
.pose-row { display:flex; align-items:center; gap:8px; color:var(--fg-dim); }
.pose-row span { width:58px; flex:none; }
.pose-row input[type=range] { flex:1; accent-color:var(--accent); min-width:0; }
.pose-sub { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-mute); margin-top:4px; }
.pose-note { font-size:10.5px; color:var(--fg-mute); margin:4px 0 0; line-height:1.4; }
.pose-lib { display:flex; align-items:center; gap:5px; margin-top:4px; }
.pose-lib .btn.ghost { font-size:11px; padding:3px 7px; border:1px solid var(--line); }
.pose-select { flex:1; min-width:0; background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:11.5px; padding:3px 4px; }
.pose-name { flex:1; min-width:0; background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:11.5px; padding:3px 6px; }
.pose-name:focus { outline:none; border-color:var(--accent); }

/* ---- Export grid ----------------------------------------------------- */
.export-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.exp-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; display:flex; flex-direction:column; gap:6px; }
.exp-card h4 { margin:0; font-size:13.5px; display:flex; align-items:center; gap:8px; }
.exp-card .ext { font-family:var(--font-mono); font-size:11px; color:var(--fg-dim);
  background:color-mix(in srgb,var(--accent-2) 12%,transparent); padding:1px 7px; border-radius:100px; }
.exp-card p { margin:0; font-size:12px; color:var(--fg-dim); flex:1; }
.exp-card button { margin-top:6px; }

/* ---- Inspector ------------------------------------------------------- */
.inspector { display:flex; flex-direction:column; gap:12px; font-size:13px; }
.insp-row { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.insp-row label { color:var(--fg-dim); font-size:12px; }
.insp-row input, .insp-row select { background:var(--panel-2); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 8px; font:inherit; width:120px; }
.insp-row .mono { font-size:12.5px; }
.insp-swatch { width:14px; height:14px; border-radius:3px; border:1px solid var(--line-2); }

/* ---- Actor / Take IO + menu ----------------------------------------- */
.io.topbar-group { gap:6px; }
.io-sel { min-width:104px; max-width:170px; }
.io-add { font-size:15px; line-height:1; padding:5px 9px; }
.io-menu { position:fixed; z-index:60; background:var(--elev); border:1px solid var(--line-2);
  border-radius:var(--r-sm); box-shadow:var(--shadow); padding:5px; display:flex; flex-direction:column; min-width:172px; }
.io-menu[hidden] { display:none; }
.io-menu button { text-align:left; background:transparent; border:0; color:var(--fg);
  padding:7px 10px; border-radius:var(--r-sm); font-size:12.5px; cursor:pointer; }
.io-menu button:hover { background:var(--panel-2); }
.io-sep { height:1px; background:var(--line); margin:4px 2px; }
.io-rename { position:fixed; z-index:70; background:var(--panel); color:var(--fg);
  border:1px solid var(--accent); border-radius:var(--r-sm); padding:5px 7px; font:inherit; font-size:13px; }

/* ---- Inspector extras ----------------------------------------------- */
.insp-head { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-dim); }
.insp-row.sub { padding-left:8px; opacity:.9; }
.insp-row.sub .mono { font-size:11.5px; }
.insp-tip { font-size:11.5px; margin:4px 0 0; line-height:1.45; }
.chan.solo { outline:1px solid color-mix(in srgb,var(--accent) 60%,transparent); outline-offset:-1px; }
.lane { touch-action:none; }

/* ---- Assistant ------------------------------------------------------- */
.assistant { flex:1; display:flex; flex-direction:column; gap:12px; min-height:0; }
.pill { font-size:11px; color:var(--fg-dim); border:1px solid var(--line); border-radius:100px; padding:2px 9px; }
.pill.ok { color:var(--good); border-color:color-mix(in srgb,var(--good) 40%,var(--line)); }
.assist-msg { border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; background:var(--panel); font-size:13px; line-height:1.5; }
.assist-msg.user { background:var(--panel-2); }
.assist-msg.intro { background:color-mix(in srgb,var(--accent) 6%,var(--panel)); border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); }
.assist-help { display:flex; flex-direction:column; gap:5px; margin:9px 0 2px; }
.assist-help-row { padding:6px 9px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line); font-size:12.5px; }
.assist-help-row b { color:var(--accent-text); }
.assist-actions { display:flex; flex-wrap:wrap; gap:8px; }
.assist-input { display:flex; gap:8px; }
.assist-input textarea { min-height:44px; }
.keyform { display:flex; flex-direction:column; gap:10px; max-width:520px; }
.keyform input, .keyform select { background:var(--panel-2); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 10px; font:inherit; }
.keyrow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.enc-note { font-size:11.5px; color:var(--fg-mute); display:flex; gap:6px; align-items:flex-start; }
.enc-note b { color:var(--good); }

/* ---- Account / projects (SaaS surface) ------------------------------ */
.acct-chip { font-size:12px; border:1px solid var(--line); border-radius:100px; padding:5px 12px;
  color:var(--fg-dim); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-chip:hover { color:var(--fg); border-color:var(--accent); background:var(--panel-2); }
.btn.sm { padding:5px 10px; font-size:12px; }
.btn.danger { color:var(--crit); border-color:color-mix(in srgb,var(--crit) 45%,var(--line)); }
.btn.danger:hover { border-color:var(--crit); }

.modal { position:fixed; inset:0; z-index:80; background:rgba(4,7,11,.6); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:24px; }
.modal[hidden] { display:none; }
.modal-card { width:min(560px,96vw); max-height:88vh; overflow:auto; background:var(--panel);
  border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); }
.modal-head h3 { font-size:15px; }
.modal-body { padding:16px; display:flex; flex-direction:column; gap:14px; }

.acct-tabs { display:flex; gap:4px; background:var(--panel-2); padding:4px; border-radius:var(--r-sm); }
.acct-tab { flex:1; border:0; background:transparent; color:var(--fg-dim); padding:8px; border-radius:var(--r-sm);
  cursor:pointer; font-size:13px; }
.acct-tab.on { background:var(--elev); color:var(--fg); }
.acct-form { display:flex; flex-direction:column; gap:8px; }
.acct-form input { background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:9px 10px; font:inherit; font-size:13.5px; }
.acct-err { color:var(--crit); font-size:12.5px; margin:0; }
.acct-banner { font-size:12.5px; color:var(--fg-dim); background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:10px 12px; line-height:1.5; }
.acct-banner code { color:var(--accent); }
.acct-who { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
.acct-save { display:flex; gap:8px; }
.acct-save input { flex:1; background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:8px 10px; font:inherit; font-size:13.5px; }
.acct-h { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-dim); margin:4px 0 0; }
.acct-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.acct-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--panel-2); }
.acct-item.cur { border-color:var(--accent); }
.acct-name { flex:1; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-when { font-size:11px; }

/* ---- Transport ------------------------------------------------------- */
.transport { display:flex; align-items:center; gap:12px; padding:0 16px;
  background:linear-gradient(0deg,var(--panel),var(--panel-2)); border-top:1px solid var(--line); }
.tp-btn { border:1px solid var(--line); background:var(--elev); color:var(--fg);
  width:34px; height:32px; border-radius:var(--r-sm); cursor:pointer; font-size:13px; }
.tp-btn:hover { border-color:var(--fg-mute); }
.tp-btn.play { background:var(--accent); color:var(--on-accent); border-color:var(--accent); width:40px; }
.scrub { flex:1; display:flex; align-items:center; }
.scrub input { width:100%; accent-color:var(--accent); }
.time { font-size:14px; } .transport .dim { font-size:13px; }
.fpsread { min-width:56px; text-align:right; font-size:12px; color:var(--fg-mute); }
.fpsread.live { color:var(--accent-2); }
.field.small { position:relative; }

/* ---- Boot overlay ---------------------------------------------------- */
.boot-overlay { position:fixed; inset:0; z-index:50; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center; transition:opacity .4s; }
.boot-overlay.gone { opacity:0; pointer-events:none; }
.boot-card { text-align:center; max-width:400px; padding:24px; }
.boot-card p { color:var(--fg-dim); margin:14px 0 0; }
.bootbar.big { height:6px; margin-top:20px; }
.boot-foot { font-size:11.5px; margin-top:16px; }

/* ---- scrollbars & focus --------------------------------------------- */
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:6px; border:3px solid transparent; background-clip:content-box; }
:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;} }

/* ---- Workspace: a resizable dock of relocatable panels ---------------- *
 * 2×2 grid of panes; each pane hosts one movable module (Preview / Face Graph /
 * Curves / Phonemes). Draggable splitters resize the columns/rows. JS sets the
 * grid-template fractions + splitter positions from S.dock. */
.view[data-view="workspace"]{ display:none; }
.view[data-view="workspace"].active{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.view[data-view="workspace"] .view-note{ flex:0 0 auto; }
.ws-dock{ position:relative; flex:1 1 auto; min-height:0; min-width:0; display:grid; gap:6px;
  grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }   /* JS overrides fractions from S.dock */
.ws-pane{ display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden;
  background:var(--panel-2); border:1px solid var(--line); border-radius:9px; }
.ws-pane-head{ flex:0 0 auto; padding:4px 6px; border-bottom:1px solid var(--line); display:flex; align-items:center; }
.ws-pane-pick{ background:transparent; color:var(--fg-mute); border:1px solid transparent; border-radius:4px;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:2px 4px; cursor:pointer; max-width:100%;
  min-height:24px; }
.ws-pane-pick:hover{ border-color:var(--line); color:var(--fg); }
.ws-pane-pick:focus{ outline:none; border-color:var(--accent); color:var(--fg); }
.ws-pane-body{ flex:1 1 auto; min-height:0; min-width:0; display:flex; flex-direction:column; gap:6px; padding:8px 9px; overflow:hidden; }
.ws-mod{ flex:1 1 auto; min-height:0; min-width:0; display:flex; flex-direction:column; gap:6px; }
/* draggable splitters, overlaid on the grid gaps */
.ws-split{ position:absolute; z-index:4; border-radius:3px; }
.ws-split-v{ top:0; bottom:0; width:10px; margin-left:-5px; cursor:col-resize; }
.ws-split-h{ left:0; right:0; height:10px; margin-top:-5px; cursor:row-resize; }
.ws-split:hover, .ws-split.drag{ background:color-mix(in srgb,var(--accent) 35%, transparent); }
/* reused module internals */
.ws-facewrap{ flex:1 1 auto; min-height:0; position:relative; }
.ws-face{ position:absolute; inset:0; width:100%; height:100%; }   /* viewBox scales to fit, centered */
.ws-canvas{ flex:1 1 auto; min-height:0; width:100%; display:block; border-radius:5px; }
.ws-curvewrap{ flex:1 1 auto; min-height:0; min-width:0; display:flex; gap:8px; }
.ws-curvewrap .ws-canvas{ flex:1 1 auto; min-width:0; }
.ws-rail{ flex:0 0 132px; overflow-y:auto; margin:0; padding:0; list-style:none; font-size:11px; }
.ws-rc{ display:flex; align-items:center; gap:5px; padding:2px 4px; border-radius:4px; cursor:pointer; }
.ws-rc:hover{ background:var(--elev); }
.ws-rc.sel{ background:var(--elev); outline:1px solid var(--accent); }
.ws-rc.off{ opacity:.42; }
.ws-rc .sw{ width:9px; height:9px; border-radius:2px; flex:0 0 auto; }
.ws-rc .nm{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-rc .lvbar{ flex:0 0 32px; height:6px; background:var(--panel); border-radius:3px; overflow:hidden; }
.ws-rc .lvbar>i{ display:block; height:100%; width:0; transition:width .05s linear; }
.ws-rc .lvn{ flex:0 0 28px; text-align:right; color:var(--fg-mute); }
#mod-phonemes .ws-wave{ flex:2 1 0; } #mod-phonemes .ws-strip{ flex:1 1 0; }
.ws-props{ flex:0 0 auto; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;
  font-size:12px; padding-top:5px; margin-top:2px; border-top:1px solid var(--line); }
.ws-props .wp{ color:var(--fg-mute); } .ws-props b{ color:var(--fg); }
.ws-props .badge{ background:var(--accent); color:#141414; border-radius:3px; padding:0 5px; font-size:10px; letter-spacing:.03em; }
.ws-facemount{ flex:1 1 auto; min-height:0; min-width:0; position:relative; display:flex; }
.ws-facemount .preview-stage{ flex:1 1 auto; min-height:0; }
.ws-facemount .preview-readout{ display:none; }
/* preview model chooser (2D / 3D / load a .glb avatar) — top-left of the stage */
.preview-chooser{ position:absolute; top:10px; left:10px; z-index:3; display:flex; gap:6px; align-items:center; }
.preview-chooser select{ background:var(--panel-2); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:3px 6px; font-size:12px; cursor:pointer; }
.preview-chooser select:focus{ outline:none; border-color:var(--accent); }
@media (max-width:820px){
  .ws-dock{ grid-template-columns:1fr !important; grid-template-rows:auto auto auto auto !important; overflow-y:auto; }
  .ws-pane{ min-height:200px; }
  .ws-split{ display:none; }
}

/* ---- responsive: collapse rails on narrow ---------------------------- */
@media (max-width:1100px){ :root{ --rail-w:250px; } }
@media (max-width:860px){
  .shell{ grid-template-columns:1fr; } .rail-right{ display:none; }
  .rail-left{ position:absolute; z-index:5; width:290px; height:100%; box-shadow:var(--shadow); }
}