* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { background:var(--bg); color:var(--fg); font:var(--fs-ui)/1.5 var(--font-ui); overflow:hidden; }
.muted { color:var(--fg-dim); font-size:12px; }
.icon { padding:4px 9px; font-size:14px; }

/* Native scrollbars are glaring white against every dark theme. */
* { scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--fg-mute); background-clip:content-box; }

/* Owner/dev surfaces are noise for a 15-year-old. Hide unless ?admin=1 or a staff key is saved. */
[data-admin="false"] [data-admin-only] { display:none; }

.app {
  height:100vh; display:grid;
  grid-template-areas:
    "top top top"
    "left center right"
    "split1 split1 split1"
    "term term term"
    "split2 split2 split2"
    "status status status";
  grid-template-columns:var(--rail-w) 1fr var(--rail-w-right);
  grid-template-rows:44px 1fr 6px var(--term-h) 6px var(--status-h);
}

[data-mode="simple"] .app {
  grid-template-areas:"top" "center" "status";
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:44px 1fr var(--status-h);
}
[data-mode="simple"] .sidebar,
[data-mode="simple"] .terminal,
[data-mode="simple"] .split,
[data-mode="simple"] .editor-wrap,
[data-mode="simple"] .promptbar { display:none; }
[data-mode="advanced"] .simple { display:none; }

/* Rails only exist in advanced mode. Without the [data-mode] guard these three
   rules outrank the simple-mode template (same specificity, later in the file)
   and force three columns where simple mode declares one, so every grid area
   collapses into a 34px rail. */
[data-mode="advanced"][data-collapse-left="true"] .app { grid-template-columns:var(--rail-collapsed) 1fr var(--rail-w-right); }
[data-mode="advanced"][data-collapse-right="true"] .app { grid-template-columns:var(--rail-w) 1fr var(--rail-collapsed); }
[data-mode="advanced"][data-collapse-left="true"][data-collapse-right="true"] .app { grid-template-columns:var(--rail-collapsed) 1fr var(--rail-collapsed); }
[data-collapse-left="true"] .sidebar.left .rail-body { display:none; }
[data-collapse-right="true"] .sidebar.right .rail-body { display:none; }
[data-collapse-left="true"] .sidebar.left .rail-name { display:none; }
[data-collapse-right="true"] .sidebar.right .rail-name { display:none; }

.topbar { grid-area:top; display:flex; align-items:center; gap:var(--gap);
  padding:0 var(--pad); background:var(--bg-1); border-bottom:1px solid var(--line); }
.brand { font-weight:600; letter-spacing:.12em; font-size:13px; }
.brand span { color:var(--accent-ink); }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:var(--gap); }
.pill { font:11px var(--font-mono); padding:3px 8px; border:1px solid var(--line);
  border-radius:99px; color:var(--fg-dim); text-transform:uppercase; letter-spacing:.08em; }
.pill[data-tier="owner"] { color:var(--accent-ink); border-color:var(--accent-line); }
.pill[data-tier="byok"] { color:var(--ok); border-color:var(--ok); }
.pill.warn-pill { color:var(--warn); border-color:var(--warn); cursor:help; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--fg-mute); }
.dot[data-state="on"] { background:var(--ok); box-shadow:0 0 8px var(--ok); }
.dot[data-state="err"] { background:var(--err); }

/* A badge reads as decoration. A segmented pill reads as a control. */
.mode-seg { border:1px solid var(--line); border-radius:99px; padding:2px; gap:0; }
.mode-seg button { border:0; background:none; border-radius:99px; padding:3px 11px;
  font:10px var(--font-mono); text-transform:uppercase; letter-spacing:.1em;
  color:var(--fg-mute); cursor:pointer; }
.mode-seg button.is-active { background:var(--bg-3); color:var(--fg); }

.btn { background:var(--bg-2); border:1px solid var(--line); color:var(--fg); font:inherit;
  font-size:12px; padding:5px 11px; border-radius:var(--r); cursor:pointer;
  transition:border-color var(--dur), background var(--dur); }
.btn:hover { border-color:var(--accent-line); }
.btn.accent { background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:600; }
.btn.accent:hover { background:var(--accent-hover); }
.btn.ghost { background:none; }
.btn.tiny { font-size:11px; padding:2px 7px; }
.btn:disabled { opacity:.5; cursor:default; }

.sidebar { background:var(--bg-1); display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.sidebar.left { grid-area:left; border-right:1px solid var(--line); }
.sidebar.right { grid-area:right; border-left:1px solid var(--line); }

.rail-head { display:flex; align-items:center; gap:6px; padding:8px var(--pad);
  border-bottom:1px solid var(--line); flex:0 0 auto; min-height:34px; }
.rail-name { font:10px var(--font-ui); text-transform:uppercase; letter-spacing:.11em;
  color:var(--fg-dim); flex:1; white-space:nowrap; overflow:hidden; }
.rail-toggle { background:none; border:1px solid transparent; color:var(--fg-mute);
  border-radius:var(--r); cursor:pointer; font-size:12px; line-height:1; padding:2px 6px; flex:0 0 auto; }
.rail-toggle:hover { border-color:var(--accent-line); color:var(--fg); }

.rail-body { padding:var(--pad); overflow-y:auto; flex:1; min-height:0; }

.panel-title { font:10px var(--font-ui); text-transform:uppercase; letter-spacing:.11em;
  color:var(--fg-mute); margin:var(--pad) 0 6px; }
.panel-title:first-child { margin-top:0; }
.filelist { list-style:none; margin:0; padding:0; }
.file { font:var(--fs-mono) var(--font-mono); padding:5px 8px; border-radius:var(--r);
  cursor:pointer; color:var(--fg-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file:hover { background:var(--bg-2); }
.file.is-active { background:var(--bg-2); color:var(--accent-ink); }
.sliders label { display:block; font-size:11px; color:var(--fg-dim); margin:9px 0 3px; font-family:var(--font-mono); }
.sliders input[type=range] { width:100%; accent-color:var(--accent); }
.sliders input[type=text] { width:100%; background:var(--bg); border:1px solid var(--line);
  color:var(--fg); font:11px var(--font-mono); padding:3px 6px; border-radius:var(--r); }
.sliders output { float:right; color:var(--fg); }
.sliders.is-live output::after { content:' ·live'; color:var(--accent-ink); font-size:10px; }

.hw-row { display:flex; justify-content:space-between; gap:8px; font-size:12px; padding:5px 0;
  border-bottom:1px solid var(--line); }
.hw-row span { color:var(--fg-dim); }
.hw-row b { font-family:var(--font-mono); font-weight:400; color:var(--fg); font-size:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hw-row b[data-state="on"] { color:var(--ok); }
.hw-row b[data-state="warn"] { color:var(--warn); }

.center { grid-area:center; display:flex; flex-direction:column; min-height:0; min-width:0; }
.editor-wrap { flex:1; display:flex; flex-direction:column; min-height:0; }
.editor-head { display:flex; align-items:center; gap:var(--gap); padding:0 var(--pad);
  height:30px; border-bottom:1px solid var(--line); background:var(--bg-1); flex:0 0 auto; }
.etab { font:11px var(--font-mono); color:var(--fg); padding:3px 9px; border-radius:var(--r);
  background:var(--bg-2); border:1px solid var(--line); }
.etab[data-empty="true"] { color:var(--fg-mute); background:none; border-color:transparent; }
.emeta { font:11px var(--font-mono); color:var(--fg-mute); margin-left:auto; }
.editor { flex:1; margin:0; padding:var(--pad) calc(var(--pad)*1.5); overflow:auto;
  font:var(--fs-mono)/1.65 var(--font-mono); white-space:pre; tab-size:4; }
.promptbar { display:flex; align-items:center; gap:9px; padding:9px var(--pad);
  border-top:1px solid var(--line); background:var(--bg-1); flex:0 0 auto; }
.caret { color:var(--accent-ink); font-family:var(--font-mono); }
.promptbar input, .simple-prompt input { flex:1; background:none; border:0; color:var(--fg);
  font:var(--fs-mono) var(--font-mono); }
.promptbar input:focus, .simple-prompt input:focus { outline:none; }

.split { grid-area:split1; background:var(--line); cursor:row-resize; position:relative; }
#split2 { grid-area:split2; }
.split:hover, .split.dragging { background:var(--accent); }
.split::after { content:''; position:absolute; inset:-3px 0; }

.simple { grid-area:center; overflow-y:auto; padding:calc(var(--pad)*2.5) var(--pad); }
.simple-inner { width:100%; max-width:740px; margin:0 auto; display:flex; flex-direction:column; gap:var(--pad); }

.card { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--pad); }
.card-head { display:flex; align-items:center; gap:var(--gap); margin-bottom:8px; }
.card-head h2 { font-size:14px; font-weight:600; margin:0; flex:1; }
.card-head .tag { font:10px var(--font-mono); text-transform:uppercase; letter-spacing:.12em;
  color:var(--accent-ink); border:1px solid var(--accent-line); padding:2px 7px; border-radius:99px; }
.hid-note { color:var(--warn); }

/* One card left on screen labelled "step 1" with no step 2 just looks broken. */
[data-step-count="1"] [data-step] { display:none; }

.simple-prompt { display:flex; gap:var(--gap); padding:10px 12px; background:var(--bg-1);
  border:1px solid var(--line); border-radius:var(--r-lg); }
.simple-prompt:focus-within { border-color:var(--accent-line); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font:11px var(--font-mono); padding:4px 9px; border-radius:99px; border:1px solid var(--line);
  background:var(--bg-1); color:var(--fg-dim); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.chip:hover { border-color:var(--accent-line); color:var(--fg); }
.chip .x { opacity:0; font-size:12px; line-height:1; color:var(--fg-mute); }
.chip:hover .x { opacity:1; }
.chip .x:hover { color:var(--err); }

.bytegrid { display:grid; grid-template-columns:repeat(16,1fr); gap:3px; margin:var(--pad) 0; }
.byte { height:16px; border-radius:3px; background:var(--bg-3); position:relative; }
.byte::after { content:''; position:absolute; inset:0; border-radius:3px;
  background:var(--accent); opacity:var(--v,0); transition:opacity 90ms linear; }
/* Idle grid so "the bars below" is not a lie before you plug anything in. */
.bytegrid.is-idle .byte { opacity:.45; }
.test-stats { display:flex; gap:var(--pad); flex-wrap:wrap; }
.test-stats div { font-size:11px; color:var(--fg-dim); }
.test-stats b { display:block; font:var(--fs-mono) var(--font-mono); color:var(--fg); }
.verdict { font-size:12px; margin:var(--pad) 0 0; }
.verdict[data-k="ok"] { color:var(--ok); }
.verdict[data-k="warn"] { color:var(--warn); }
.verdict[data-k="err"] { color:var(--err); }

.tip { margin:var(--pad) 0 0; font-size:12px; }
.tip summary { cursor:pointer; color:var(--fg-dim); }
.tip summary:hover { color:var(--fg); }
.tip ul { margin:8px 0 0; padding-left:18px; line-height:1.7; }
.prompt-help { font-size:11px; color:var(--fg-mute); margin:0 0 8px; }

.req-opt { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--pad); }
.req-opt button { flex:1; min-width:150px; text-align:left; background:var(--bg-2);
  border:1px solid var(--line); color:var(--fg-dim); border-radius:var(--r); padding:9px 11px;
  cursor:pointer; font-size:12px; }
.req-opt button.is-active { border-color:var(--accent); color:var(--fg); }
.req-body ul { margin:0; padding-left:18px; font-size:12px; line-height:1.7; }
.req-body li.miss { color:var(--warn); }

.macros { display:flex; flex-direction:column; gap:var(--gap); }
.macro { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--pad); }
.macro-head { display:flex; align-items:center; gap:var(--gap); flex-wrap:wrap; }
.macro-name { font:var(--fs-mono) var(--font-mono); color:var(--accent-ink); }
.macro-sum { font-size:12px; color:var(--fg-dim); flex:1; min-width:120px; }
.macro-actions { display:flex; gap:6px; }
.macro-warn { font-size:11px; color:var(--warn); margin-top:6px; }
.macro pre { font:11px/1.55 var(--font-mono); background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r); padding:8px; overflow:auto; max-height:220px; margin:8px 0 0; }

.terminal { grid-area:term; background:var(--bg-1); border-top:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.term-head { display:flex; align-items:center; gap:10px; padding:0 var(--pad); height:26px;
  font:10px var(--font-mono); letter-spacing:.14em; color:var(--fg-dim);
  border-bottom:1px solid var(--line); flex:0 0 auto; }
.term-head .btn { margin-left:auto; }
.term-head .btn + .btn { margin-left:0; }
.term-body { flex:1; margin:0; padding:8px var(--pad); overflow:auto;
  font:11px/1.55 var(--font-mono); color:var(--fg-dim); }
.term-body .t-in { color:var(--accent-ink); }
.term-body .t-err { color:var(--err); }
.term-body .t-ok { color:var(--ok); }
.term-body .t-warn { color:var(--warn); }

.statusbar { grid-area:status; display:flex; align-items:center; gap:10px; padding:0 var(--pad);
  background:var(--bg-1); border-top:1px solid var(--line); font:11px var(--font-mono);
  color:var(--fg-dim); overflow:hidden; }
.sb-chip { color:var(--accent-ink); }
.sb-msg { color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-spacer { flex:1; }
.sb-hint { color:var(--fg-mute); white-space:nowrap; }

.drawer { position:fixed; top:0; right:0; bottom:0; width:min(var(--drawer-w),92vw);
  background:var(--bg-2); border-left:1px solid var(--line-2); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; z-index:80; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:79; }
.drawer-head { display:flex; align-items:center; padding:12px var(--pad);
  border-bottom:1px solid var(--line); font-weight:600; }
.drawer-head .btn { margin-left:auto; }
.drawer-tabs { display:flex; gap:2px; padding:8px var(--pad) 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.dtab { background:none; border:0; color:var(--fg-dim); font:inherit; font-size:12px;
  padding:6px 11px; border-radius:var(--r) var(--r) 0 0; cursor:pointer; }
.dtab.is-active { background:var(--bg-1); color:var(--fg); }
.drawer-body { padding:var(--pad); overflow-y:auto; flex:1; }

.field-label { display:block; font:10px var(--font-ui); text-transform:uppercase;
  letter-spacing:.11em; color:var(--fg-mute); margin:var(--pad) 0 7px; }
.field-label:first-child { margin-top:0; }
.swatch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:6px; }
.swatch { border:1px solid var(--line); border-radius:var(--r); padding:7px 9px; cursor:pointer;
  background:var(--bg-1); font-size:11px; text-align:left; color:var(--fg-dim); }
.swatch:hover { border-color:var(--accent-line); }
.swatch.is-active { border-color:var(--accent); color:var(--fg); }
.swatch i { display:block; height:5px; border-radius:99px; margin-bottom:6px; }
/* Fixed 6 columns. auto-fill reflowed to 7 in compact and clipped the last swatch. */
.accent-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.accent-dot { height:30px; border-radius:var(--r); border:2px solid transparent; cursor:pointer; }
.accent-dot.is-active { border-color:var(--fg); }
.accent-dot:hover { border-color:var(--accent-line); }
.seg { display:flex; gap:4px; flex-wrap:wrap; }
.seg button { background:var(--bg-1); border:1px solid var(--line); color:var(--fg-dim);
  font:11px var(--font-mono); padding:5px 10px; border-radius:var(--r); cursor:pointer; }
.seg button.is-active { border-color:var(--accent); color:var(--fg); }
.key-input { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--fg);
  font:var(--fs-mono) var(--font-mono); padding:6px 8px; border-radius:var(--r); }
.key-input:focus { outline:1px solid var(--accent-line); border-color:var(--accent-line); }
.row-actions { display:flex; gap:var(--gap); margin-top:var(--pad); flex-wrap:wrap; }
.drawer-foot { border-top:1px solid var(--line); padding:8px var(--pad); display:flex; gap:var(--gap); }
.drawer-foot .muted { margin-left:auto; font-family:var(--font-mono); font-size:10px; }
.report-row { border-bottom:1px solid var(--line); padding:7px 0; font-size:12px; }
.report-row:last-child { border-bottom:0; }

.palette-backdrop { position:fixed; inset:0; z-index:89; }
.palette { position:fixed; top:60px; left:50%; transform:translateX(-50%); width:min(520px,90vw);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-lg); z-index:90; }
.palette-head { display:flex; align-items:center; border-bottom:1px solid var(--line); }
.palette-head input { flex:1; background:none; border:0; color:var(--fg);
  font:var(--fs-ui) var(--font-ui); padding:12px 14px; }
.palette-head input:focus { outline:none; }
.palette ul { list-style:none; margin:0; padding:6px; max-height:300px; overflow:auto; }
.palette li { padding:8px 10px; border-radius:var(--r); cursor:pointer; font-size:13px;
  display:flex; justify-content:space-between; gap:10px; }
.palette li.sel { background:var(--accent); color:var(--bg); }
.palette li small { color:var(--fg-mute); font-family:var(--font-mono); font-size:11px; }
.palette li.sel small { color:var(--bg); opacity:.7; }
.palette-foot { border-top:1px solid var(--line); padding:5px 12px; }
.palette-foot .muted { font-size:10px; }

.banner { position:fixed; bottom:44px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; background:var(--bg-2); border:1px solid var(--accent-line);
  border-radius:99px; padding:7px 8px 7px 15px; font-size:12px; z-index:85; box-shadow:var(--shadow-lg); }
.banner code { font-family:var(--font-mono); color:var(--accent-ink); }
.toast { position:fixed; bottom:52px; left:50%; transform:translateX(-50%); background:var(--bg-2);
  border:1px solid var(--line-2); padding:8px 15px; border-radius:99px; font-size:12px; z-index:95; }
.toast[data-kind="err"] { border-color:var(--err); color:var(--err); }
.toast[data-kind="note"] { border-color:var(--accent-line); color:var(--fg); }

.fatal { position:fixed; inset:0; background:var(--bg); z-index:200; padding:8vh 6vw;
  overflow:auto; display:flex; flex-direction:column; gap:var(--pad); }
.fatal h1 { font-size:18px; margin:0; color:var(--err); }
.fatal pre { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--pad); font:12px/1.6 var(--font-mono); white-space:pre-wrap; overflow:auto; }

.debug { position:fixed; bottom:0; right:0; width:min(420px,90vw); max-height:45vh;
  display:flex; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--err); border-radius:var(--r-lg) 0 0 0;
  font:11px/1.5 var(--font-mono); z-index:150; }
.debug-head { display:flex; align-items:center; gap:6px; padding:5px 8px;
  border-bottom:1px solid var(--line); font:10px var(--font-mono);
  letter-spacing:.14em; color:var(--fg-dim); }
.debug-head .btn { margin-left:0; }
.debug-head .btn:first-of-type { margin-left:auto; }
.debug pre { margin:0; padding:var(--pad); overflow:auto; flex:1; white-space:pre-wrap; }

/* Simple mode has no splitters and no collapsible panels. */
[data-mode="simple"] #layoutSeg { display:none; }

@media (max-width:820px) {
  [data-mode="advanced"] .app { grid-template-columns:1fr; grid-template-areas:"top" "center" "split1" "term" "split2" "status"; }
}

.key-row { display:flex; gap:6px; align-items:center; }
.key-row .key-input { flex:1; }
.eye { background:none; border:1px solid var(--line); color:var(--fg-mute); cursor:pointer;
  border-radius:var(--r); font-size:12px; padding:5px 8px; }
.eye:hover { border-color:var(--accent-line); color:var(--fg); }
.disclaimer { margin:var(--pad) 0; padding:8px 10px; border-left:2px solid var(--accent-line);  background:var(--bg-1); border-radius:0 var(--r) var(--r) 0; line-height:1.6; }
[data-locked="true"] { opacity:.45; }
.tier-block { border:1px solid var(--line); border-radius:var(--r); padding:var(--pad); margin-bottom:var(--gap); }
.tier-block h4 { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-ink); }
.tier-block .caps { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; }
.tier-block label { font-size:11px; display:flex; gap:6px; align-items:center; color:var(--fg-dim); }
.tier-block input[type=number] { width:100%; background:var(--bg); border:1px solid var(--line);  color:var(--fg); font:11px var(--font-mono); padding:3px 6px; border-radius:var(--r); }
.tier-limits { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.license-row { display:flex; justify-content:space-between; gap:8px; padding:5px 0;  border-bottom:1px solid var(--line); font:11px var(--font-mono); }

.prompt-controls { display:flex; gap:var(--gap); align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.prompt-controls select { background:var(--bg-2); border:1px solid var(--line); color:var(--fg);
  font:11px var(--font-mono); padding:5px 8px; border-radius:var(--r); max-width:200px; }
.prompt-controls select:disabled { opacity:.5; }
.prompt-controls .spacer { flex:1; }
.chat-log { display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto; margin-bottom:8px; }
.chat-log:empty { display:none; }
.chat-msg { border-left:2px solid var(--line); padding:6px 10px; }
.chat-msg.you { border-left-color:var(--fg-mute); }
.chat-msg.zen { border-left-color:var(--accent-line); }
.chat-who { font:10px var(--font-mono); text-transform:uppercase; letter-spacing:.12em;
  color:var(--fg-mute); margin-bottom:3px; }
.chat-body { font-size:13px; white-space:pre-wrap; line-height:1.6; }