/* ============================================================
   MiniSharp Studio — "Geist" light theme
   Modern, command-palette-first shell. The classic VS chrome
   (menu bar, toolbar strip, tab strip, status bar) is gone.
   ============================================================ */

:root {
  color-scheme: light;

  --bg:#fbfbfa;            /* warm paper */
  --bg2:#f3f3f1;
  --surface:#ffffff;
  --line:#ececea;
  --line2:#e2e2df;
  --ink:#16161a;
  --ink2:#5b5b63;
  --ink3:#8a8a92;
  --ink4:#aeaeb4;

  --accent:#3257ff;        /* one confident accent */
  --accent-soft:#eef1ff;
  --accent-line:#d9e0ff;
  --green:#15893f;
  --green-soft:#e8f4ec;
  --warn:#b8770a;
  --error:#d23b3b;
  --error-soft:#fcecec;

  --shadow-sm:0 1px 2px rgba(20,20,28,.05), 0 1px 1px rgba(20,20,28,.03);
  --shadow:0 6px 22px -8px rgba(20,20,28,.12), 0 2px 8px -3px rgba(20,20,28,.07);

  /* syntax — calm light, de-neon (mirrors Monaco theme in studio.js) */
  --syn-kw:#4b3fc4;
  --syn-type:#0a7d9c;
  --syn-str:#117a51;
  --syn-num:#a8530b;
  --syn-comment:#9aa0aa;
  --syn-method:#0a66c2;

  /* UI = Geist Sans (vendored, Vercel's premium typeface); Inter kept as fallback.
     Mono = a real monospace (the vendored "Geist" is Sans, not Mono) — SF Mono on macOS. */
  --font-ui:"Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"SFMono-Regular", "SF Mono", "Geist Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --topbar-h:54px;
  --side-w:250px;
  --right-w:300px;

  font-family:var(--font-ui);
}

* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; background:var(--bg); color:var(--ink); }
body { overflow:hidden; font-size:13px; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; }

button, select, textarea, input { font:inherit; }
button { border:0; background:none; color:inherit; cursor:pointer; }

/* icons ALWAYS use the symbol font, even under an ancestor font-family */
.material-symbols-outlined {
  font-family:"Material Symbols Outlined" !important;
  font-weight:normal; font-style:normal; font-size:18px; line-height:1;
  letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap;
  direction:ltr; -webkit-font-smoothing:antialiased;
  font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#d8d8d4; border:3px solid var(--surface); border-radius:7px; }
::-webkit-scrollbar-thumb:hover { background:#c4c4bf; }

.app { height:100vh; display:grid; grid-template-rows:var(--topbar-h) minmax(0,1fr); background:var(--bg); }

/* ── Top bar ────────────────────────────────────────────────── */
.topbar {
  display:flex; align-items:center; gap:16px; padding:0 16px;
  background:rgba(251,251,250,.85); border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(10px); user-select:none;
}
.window-brand { display:flex; align-items:center; gap:10px; min-width:210px; }
.brand-mark {
  width:25px; height:25px; border-radius:7px; background:#16161a; flex:none;
  display:grid; place-items:center; color:#fff; font-family:var(--font-mono); font-weight:600; font-size:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.18);
}
.brand-name { font-weight:600; font-size:13.5px; letter-spacing:-.012em; white-space:nowrap; }
.brand-name .brand-sub { color:var(--ink4); font-weight:500; }

.palette { flex:1; display:flex; justify-content:center; }
.command-box {
  width:540px; max-width:100%; height:38px; display:flex; align-items:center; gap:10px;
  padding:0 8px 0 13px; background:var(--surface); border:1px solid var(--line2); border-radius:10px;
  box-shadow:var(--shadow-sm), inset 0 1px 1px rgba(20,20,28,.02); color:var(--ink3); cursor:text;
}
.command-box .material-symbols-outlined { font-size:18px; color:var(--ink4); }
.command-box-label { flex:1; font-size:13px; color:var(--ink3); }
.command-box:hover { border-color:#d3d3cf; }
.kbd { display:flex; gap:3px; }
.kbd b { font-family:var(--font-mono); font-weight:500; font-size:11px; background:var(--bg2);
  border:1px solid var(--line2); border-radius:5px; padding:1px 6px; color:var(--ink2); min-width:18px; text-align:center; }

.top-actions { display:flex; align-items:center; gap:8px; min-width:210px; justify-content:flex-end; }
.run-button {
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px 0 12px;
  background:#16161a; color:#fff; border-radius:10px; font-weight:550; font-size:12.5px; letter-spacing:-.01em;
  box-shadow:0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.10);
}
.run-button:hover { background:#000; }
.run-button .material-symbols-outlined { font-size:18px; font-variation-settings:"FILL" 1; }
.run-button .rk { font-family:var(--font-mono); font-size:10.5px; color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.14); border-radius:4px; padding:1px 5px; margin-left:6px; }
.ghost-button {
  height:38px; padding:0 14px; border:1px solid var(--line2); border-radius:10px;
  background:var(--surface); color:var(--ink); font-size:12.5px; font-weight:500; box-shadow:var(--shadow-sm);
}
.ghost-button:hover { background:var(--bg2); }
.ghost-button:disabled { opacity:.5; cursor:default; }
.icon-button {
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line2); border-radius:9px; background:var(--surface); color:var(--ink3); box-shadow:var(--shadow-sm);
}
.icon-button:hover { background:var(--bg2); color:var(--ink); }
.avatar { width:29px; height:29px; border-radius:50%; background:#16161a; flex:none;
  display:grid; place-items:center; color:#fff; font-family:var(--font-mono); font-weight:600; font-size:11.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }

/* right-inspector toggle (CSS-drawn glyph, no icon-font dependency) */
.panel-toggle { cursor:pointer; }
.pt-ico { position:relative; width:16px; height:13px; border:1.5px solid currentColor; border-radius:3px; }
.pt-ico::after { content:""; position:absolute; top:1px; bottom:1px; right:1px; width:4px;
  background:currentColor; border-radius:0 1px 1px 0; }
#rightToggle:checked ~ .topbar .panel-toggle { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
#rightToggle:checked ~ .body .right { display:none; }
#rightToggle:checked ~ .body { grid-template-columns:var(--side-w) minmax(0,1fr); }
html:not([data-wpf-studio="on"]) [data-feature="wpf-studio"] { display:none !important; }
/* WPF/canvas mode: give the designer the full width automatically */
.body:has(#canvasPanel.active) .right { display:none; }
.body:has(#canvasPanel.active) { grid-template-columns:var(--side-w) minmax(0,1fr); }

/* ── Body ───────────────────────────────────────────────────── */
.body { min-height:0; display:grid; grid-template-columns:var(--side-w) minmax(0,1fr) var(--right-w); background:var(--bg); }

/* ── Sidebar ────────────────────────────────────────────────── */
.side { min-width:0; border-right:1px solid var(--line); display:flex; flex-direction:column;
  padding:14px 12px 12px; overflow:hidden; }
.side-head { display:flex; align-items:center; justify-content:space-between; padding:0 4px 0 8px; margin-bottom:11px; }
.side-title { font-size:11px; font-weight:600; letter-spacing:.05em; color:var(--ink3); text-transform:uppercase; font-family:var(--font-mono); }
.side-tools { display:flex; gap:1px; }
.mini-icon { width:25px; height:24px; display:grid; place-items:center; border-radius:6px; color:var(--ink4); }
.mini-icon .material-symbols-outlined { font-size:17px; }
.mini-icon:hover { background:var(--bg2); color:var(--ink2); }
.mini-icon:disabled { opacity:.4; cursor:default; }
.mini-icon:disabled:hover { background:none; color:var(--ink4); }

.sol-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px;
  box-shadow:var(--shadow-sm); min-height:0; overflow:auto; flex:1; }
.solution { min-width:0; }

/* Solution tree (JS-generated .tree-row structure) */
.tree-row { display:flex; align-items:center; gap:7px; height:30px; padding:0 8px; border-radius:8px;
  color:var(--ink2); font-size:12.5px; white-space:nowrap; user-select:none; cursor:default; }
.tree-row:hover { background:var(--bg2); }
.tree-row.active { background:var(--accent-soft); color:var(--ink); font-weight:550;
  box-shadow:inset 2px 0 0 var(--accent), inset 0 0 0 1px var(--accent-line); }
.tree-row.muted { opacity:.55; }
.tree-row.readonly { opacity:.7; }
.tree-row strong { color:var(--ink); font-weight:600; }
.tree-row.root strong, .tree-row.project strong { font-weight:600; }

.chev, .leaf { width:11px; flex:0 0 11px; color:var(--ink4); font-family:var(--font-mono); font-size:9px; text-align:center; }
.indent { width:12px; flex:0 0 12px; }
.indent.two { width:24px; flex-basis:24px; }

.node-icon { width:18px; height:18px; display:grid; place-items:center; flex:0 0 18px; }
.node-icon::before { font-family:"Material Symbols Outlined"; font-size:17px; color:var(--ink4); }
.node-icon.sln::before    { content:"deployed_code"; color:var(--ink); }
.node-icon.csproj::before { content:"deployed_code"; color:var(--ink2); }
.node-icon.folder::before { content:"folder"; color:var(--ink4); }
.node-icon.cs::before     { content:"code"; }
.node-icon.xaml::before   { content:"web_asset"; }
.node-icon.wasm::before   { content:"memory"; }
.node-icon.c::before      { content:"code"; }
.node-icon.json::before   { content:"data_object"; }
.tree-row.active .node-icon::before { color:var(--accent); }

.entry-badge { margin-left:auto; padding:0 6px; border-radius:5px; background:#fff; border:1px solid var(--accent-line);
  color:var(--accent); font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; line-height:15px; }

/* New-project section */
.side-section { padding:14px 4px 2px; }
.side-subhead { font-size:10.5px; font-weight:600; letter-spacing:.05em; color:var(--ink3);
  text-transform:uppercase; font-family:var(--font-mono); margin-bottom:8px; padding-left:4px; }
.chip-row { display:flex; gap:6px; margin-bottom:7px; }
.chip-btn { flex:1; height:28px; border:1px solid var(--line2); border-radius:8px; background:var(--surface);
  color:var(--ink2); font-size:12px; font-weight:500; box-shadow:var(--shadow-sm); }
.chip-btn:hover { background:var(--bg2); color:var(--ink); }
.chip-btn.solid { flex:0 0 auto; padding:0 14px; background:#16161a; color:#fff; border-color:#16161a; }
.chip-btn.solid:hover { background:#000; }
.chip-btn:disabled { opacity:.5; cursor:default; }
.demo-row { display:flex; gap:6px; }
.select { flex:1; min-width:0; height:28px; padding:0 8px; border:1px solid var(--line2); border-radius:8px;
  background:var(--surface); color:var(--ink2); font-size:12px; box-shadow:var(--shadow-sm); }
.select:focus { border-color:var(--accent); outline:none; }

.side-spacer { flex:0 0 12px; }

.io-row { display:flex; align-items:center; gap:4px; padding:10px 2px; margin-top:auto; border-top:1px solid var(--line); }
.io-btn { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 8px; border-radius:7px;
  color:var(--ink2); font-size:11.5px; font-weight:500; }
.io-btn .material-symbols-outlined { font-size:16px; }
.io-btn:hover { background:var(--bg2); color:var(--ink); }
.io-btn:disabled { opacity:.4; cursor:default; }
.io-btn:disabled:hover { background:none; color:var(--ink3); }
.io-btn.wide { font-family:var(--font-mono); }
.io-div { width:1px; height:16px; background:var(--line2); margin:0 3px; }

.designer-card { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line2); box-shadow:var(--shadow-sm); text-align:left; }
.designer-card:hover { border-color:var(--accent-line); background:#fcfcff; }
.dc-ic { width:30px; height:30px; border-radius:8px; flex:none; background:var(--accent-soft);
  display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--accent-line); }
.dc-ic .material-symbols-outlined { font-size:18px; color:var(--accent); }
.dc-txt { display:flex; flex-direction:column; min-width:0; }
.dc-t { font-size:12.5px; font-weight:600; letter-spacing:-.01em; }
.dc-s { font-size:11px; color:var(--ink3); margin-top:1px; }
.dc-go { margin-left:auto; color:var(--ink4); }
.dc-go .material-symbols-outlined { font-size:18px; }

/* New Project — sidebar primary action */
.new-project-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%;
  height:36px; margin-bottom:12px; border-radius:9px; background:var(--accent); color:#fff;
  font-size:12.5px; font-weight:550; letter-spacing:-.01em;
  box-shadow:0 1px 2px rgba(50,87,255,.25), inset 0 1px 0 rgba(255,255,255,.18); cursor:pointer; }
.new-project-btn .material-symbols-outlined { font-size:18px; }
.new-project-btn:hover { background:#2347e6; }
.new-project-btn:active { transform:translateY(.5px) scale(.99); box-shadow:none; }

/* Create-a-new-project modal */
.modal-overlay { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(20,20,28,.42); backdrop-filter:blur(3px); animation:modal-fade .14s ease; }
.modal-overlay[hidden] { display:none; }
@keyframes modal-fade { from { opacity:0; } to { opacity:1; } }
.modal { width:min(720px,100%); max-height:86vh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 30px 80px -20px rgba(20,20,28,.42); animation:modal-pop .16s cubic-bezier(.2,0,0,1); }
@keyframes modal-pop { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
.modal-head { display:flex; align-items:flex-start; gap:16px; padding:22px 24px 18px; border-bottom:1px solid var(--line); }
.modal-title h2 { margin:0; font-size:18px; font-weight:600; letter-spacing:-.012em; }
.modal-title p { margin:5px 0 0; font-size:13px; color:var(--ink3); line-height:1.5; max-width:52ch; }
.modal-close { flex:none; width:32px; height:32px; margin-left:auto; display:grid; place-items:center;
  border-radius:8px; color:var(--ink3); cursor:pointer; }
.modal-close:hover { background:var(--bg2); color:var(--ink); }
.modal-close:active { transform:scale(.94); }
.modal-body { padding:18px 24px 24px; overflow:auto; }
.modal-sm { width:min(460px,100%); }
.modal-title.with-ico { display:flex; align-items:flex-start; gap:12px; }
.modal-title.with-ico > .material-symbols-outlined { font-size:20px; color:var(--accent); margin-top:1px; flex:none; }

/* ── Settings ── */
.set-group + .set-group { margin-top:18px; }
.set-group-title { font:600 11px/1 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); margin:0 0 6px; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:42px; padding:6px 0;
  border-bottom:1px solid var(--line); }
.set-row:last-child { border-bottom:0; }
label.set-row { cursor:pointer; }
.set-label { font-size:13.5px; color:var(--ink); font-weight:500; display:flex; flex-direction:column; gap:1px; }
.set-hint { font-size:11.5px; color:var(--ink3); font-weight:450; }
.set-stepper { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line2); border-radius:8px;
  background:var(--surface); padding:2px; }
.set-stepper button { width:26px; height:24px; display:grid; place-items:center; border-radius:6px; border:0;
  background:transparent; color:var(--ink2); font-size:16px; line-height:1; cursor:pointer; }
.set-stepper button:hover { background:var(--bg2); color:var(--ink); }
.set-stepper output { min-width:34px; text-align:center; font-family:var(--font-mono); font-size:12.5px; color:var(--ink); }
.set-seg { display:inline-flex; gap:2px; border:1px solid var(--line2); border-radius:8px; background:var(--bg2); padding:2px; }
.set-seg button { min-width:30px; height:24px; border-radius:6px; border:0; background:transparent; color:var(--ink3);
  font-family:var(--font-mono); font-size:12px; cursor:pointer; }
.set-seg button:hover { color:var(--ink2); }
.set-seg button.active { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); font-weight:600; }
.set-switch { appearance:none; -webkit-appearance:none; width:38px; height:22px; border-radius:999px; flex:none;
  background:var(--line2); position:relative; cursor:pointer; transition:background .15s ease; }
.set-switch::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(20,20,28,.3); transition:transform .15s ease; }
.set-switch:checked { background:var(--accent); }
.set-switch:checked::after { transform:translateX(16px); }
.set-switch:focus-visible { outline:none; box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent-line); }

/* ── Keyboard shortcuts ── */
.sc-group + .sc-group { margin-top:16px; }
.sc-group-title { font:600 11px/1 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); margin:0 0 4px; }
.sc-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid var(--line); }
.sc-row:last-child { border-bottom:0; }
.sc-desc { font-size:13px; color:var(--ink2); }
.sc-keys { display:inline-flex; gap:4px; flex:none; }
.sc-keys kbd { font-family:var(--font-ui); font-size:11px; color:var(--ink2); background:var(--bg2); border:1px solid var(--line2);
  border-bottom-width:2px; border-radius:6px; padding:2px 7px; min-width:20px; text-align:center; }
.tpl-section { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3);
  font-family:var(--font-mono); margin:0 0 10px; }
.tpl-section:not(:first-child) { margin-top:22px; }
.tpl-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tpl-card { display:flex; align-items:flex-start; gap:12px; padding:13px; text-align:left;
  border:1px solid var(--line2); border-radius:12px; background:var(--surface); cursor:pointer;
  transition:border-color .12s ease, box-shadow .12s ease, transform .08s ease, background-color .12s ease; }
.tpl-card:hover { border-color:var(--accent-line); background:#fcfcff;
  box-shadow:0 8px 20px -10px rgba(20,20,28,.18); transform:translateY(-1px); }
.tpl-card:active { transform:translateY(0); }
.tpl-ic { flex:none; width:36px; height:36px; border-radius:9px; display:grid; place-items:center; }
.tpl-ic .material-symbols-outlined { font-size:20px; }
.tpl-ic.blue { background:var(--accent-soft); color:var(--accent); }
.tpl-ic.violet { background:#f1ecff; color:#6d4bd8; }
.tpl-ic.green { background:var(--green-soft); color:var(--green); }
.tpl-ic.amber { background:#fdf0dd; color:#b8770a; }
.tpl-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tpl-t { font-size:13px; font-weight:600; color:var(--ink); }
.tpl-d { font-size:11.5px; color:var(--ink3); line-height:1.45; }

/* ── Center column ──────────────────────────────────────────── */
.center { min-width:0; min-height:0; display:flex; flex-direction:column; background:var(--bg); }

.editor-wrap { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden;
  margin:14px 14px 0 14px; background:var(--surface); border:1px solid var(--line); border-bottom:none;
  border-radius:14px 14px 0 0; box-shadow:var(--shadow); }
.editor-wrap.hidden { display:none; }

.ed-head { display:flex; align-items:center; gap:12px; padding:0 16px; height:48px;
  border-bottom:1px solid var(--line); flex-shrink:0; }
.crumbline { display:flex; align-items:center; gap:8px; font-size:13px; min-width:0; }
.crumb-ic { font-size:17px; color:var(--accent); }
.cpath { color:var(--ink); font-weight:600; letter-spacing:-.01em; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.cpath .dim { color:var(--ink3); font-weight:500; }
.cpath .sl { color:var(--ink4); margin:0 2px; }
.crumb-kind { color:var(--ink4); font-size:11.5px; font-weight:450; }
.moddot { width:7px; height:7px; border-radius:50%; background:var(--ink4); flex:none; }
.ed-meta { margin-left:auto; display:flex; align-items:center; gap:10px; }
.build-badge { display:inline-flex; align-items:center; gap:6px; max-width:260px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  color:var(--ink2); padding:4px 10px; border-radius:8px; border:1px solid var(--line2); background:var(--surface); }

/* ── Segment Rail: inline segmented file switcher in the 48px editor header.
   Reuses the .seg/.tab selected-segment language so it reads as a Linear/Raycast
   control, never a VS tab strip. data-rail on .ed-head drives single vs multi. ── */
.crumbline { flex:none; }   /* keep the project label tight; the rail takes the slack */

/* MULTI: breadcrumb shows project only (+ a faint divider); rail carries filenames */
.ed-head[data-rail="multi"] .crumb-fileonly { display:none; }
.ed-head[data-rail="multi"] .cpath::after {
  content:""; display:inline-block; width:1px; height:13px; margin-left:10px;
  vertical-align:middle; background:var(--line2); }

/* SINGLE: no rail; the classic quiet 'Project / File · kind' breadcrumb returns */
.ed-head[data-rail="single"] .seg-rail { display:none; }
.ed-head[data-rail="single"] .crumb-fileonly { display:inline; }
.ed-head[data-rail="single"] .cpath::after { content:none; }

.seg-rail { display:flex; align-items:center; gap:4px; min-width:0; flex:1 1 auto;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; padding:0; margin:0 0 0 2px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent); }
.seg-rail::-webkit-scrollbar { display:none; }
.seg-rail:empty { display:none; }

.seg-pill { display:inline-flex; align-items:center; gap:7px; flex:none;
  height:30px; padding:0 10px 0 8px; border-radius:8px; border:1px solid transparent; background:transparent;
  color:var(--ink3); font-family:var(--font-ui); font-size:12.5px; font-weight:500; letter-spacing:-.01em;
  white-space:nowrap; cursor:pointer; user-select:none;
  transition:background .13s ease, color .13s ease, box-shadow .13s ease, border-color .13s ease; }
.seg-pill:hover { background:var(--bg2); color:var(--ink2); }
.seg-pill:focus-visible { outline:none; box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent-line); }
.seg-pill.active { background:var(--surface); color:var(--ink); font-weight:600;
  border-color:var(--line2); box-shadow:var(--shadow-sm); }
.seg-pill.active:hover { background:var(--surface); color:var(--ink); }

.seg-chip { flex:none; display:grid; place-items:center; width:17px; height:17px; border-radius:5px;
  font-family:var(--font-mono); font-size:8.5px; font-weight:600; line-height:1; letter-spacing:0;
  color:var(--ink3); background:var(--bg2); border:1px solid var(--line2);
  transition:color .13s ease, background .13s ease, border-color .13s ease; }
.seg-pill.active .seg-chip { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); }
.seg-name { min-width:0; }

/* optional 'edited since last build' marker — NEVER a close control; inert until a
   per-file dirty flag exists (JS adds .is-dirty). */
.seg-mod { width:5px; height:5px; border-radius:50%; flex:none; background:var(--warn); margin-left:1px;
  opacity:0; transform:scale(.6); transition:opacity .13s ease, transform .13s ease; }
.seg-pill.is-dirty .seg-mod { opacity:1; transform:scale(1); }

.seg-pill[data-readonly="true"] { color:var(--ink4); cursor:default; pointer-events:none; opacity:.7; }
.seg-pill[data-readonly="true"] .seg-chip { color:var(--ink4); background:var(--bg2); }
.ed-meta { flex:none; }

@media (prefers-reduced-motion:reduce){ .seg-pill, .seg-chip, .seg-mod { transition:none; } }
@media (max-width:1100px){ .seg-pill { padding:0 9px 0 7px; } }

.editor-panel { position:relative; flex:1; min-height:0; display:flex; flex-direction:column;
  overflow:hidden; background:var(--surface); }
#editor, #source { flex:1; width:100%; min-height:0; }
#editor { overflow:hidden; }
#source { resize:none; border:0; outline:0; padding:14px 18px; background:var(--surface); color:#1f1f26;
  font-family:var(--font-mono); font-size:13px; line-height:1.62; tab-size:4; }
.fallback-editor { display:none; }
.no-monaco #editor { display:none; }
.no-monaco .fallback-editor { display:block; }

/* Drawer (tool windows) */
.drawer { flex-shrink:0; height:236px; display:flex; flex-direction:column; overflow:hidden;
  border-top:1px solid var(--line); background:var(--surface); }
.drawer-head { display:flex; align-items:center; gap:10px; height:42px; padding:0 14px; border-bottom:1px solid var(--line); }
.seg { display:flex; gap:2px; background:var(--bg2); border:1px solid var(--line2); border-radius:9px; padding:3px; }
.seg .tab { display:inline-flex; align-items:center; gap:6px; padding:0 12px; height:28px;
  border-radius:6px; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:-.01em;
  color:var(--ink3); transition:background .12s ease, color .12s ease; cursor:pointer; }
.seg .tab .material-symbols-outlined { font-size:15px; color:var(--ink4); }
.seg .tab:hover { color:var(--ink2); background:rgba(20,20,28,.04); }
.seg .tab.active { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow-sm); }
.seg .tab.active:hover { background:var(--surface); }
.seg .tab.active .material-symbols-outlined { color:var(--accent); }
/* IR / UIIR tabs: hidden until Developer Tools is enabled (html[data-devtools="on"]) */
.seg .tab.devtool-only { display:none; }
html[data-devtools="on"] .seg .tab.devtool-only { display:inline-flex; }
.drawer-meta { margin-left:auto; display:flex; align-items:center; gap:12px; color:var(--ink3); }
.dm-item { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; }
.dm-item .material-symbols-outlined { font-size:15px; color:var(--ink4); }
.drawer-collapse { width:26px; height:26px; display:grid; place-items:center; border-radius:6px; color:var(--ink4); cursor:pointer; }
.drawer-collapse .chevron { width:8px; height:8px; margin-top:-3px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .16s ease; }
.editor-wrap.drawer-collapsed .drawer-collapse .chevron { margin-top:3px; transform:rotate(-135deg); }
.drawer-collapse:hover { background:var(--bg2); color:var(--ink2); }
.drawer-collapse:active { transform:scale(.94); }
.drawer-body { flex:1; min-height:0; position:relative; }

/* collapsed drawer: keep only the tab strip; the editor reclaims the space */
.editor-wrap.drawer-collapsed .drawer { height:43px; }
.editor-wrap.drawer-collapsed .drawer-body { display:none; }
.editor-wrap.drawer-collapsed .stdin-dock { display:none; }

/* stdin dock: pre-supplied standard input, shown only for ReadLine programs */
.stdin-dock { flex-shrink:0; display:flex; align-items:stretch; gap:0; border-top:1px solid var(--line); background:var(--bg2); }
.stdin-dock.hidden { display:none; }
.stdin-tag { display:flex; align-items:center; padding:0 12px; font:600 11px/1 var(--font-ui); letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink3); border-right:1px solid var(--line); user-select:none; }
.stdin-input { flex:1; height:48px; resize:none; border:0; outline:0; background:transparent; padding:8px 12px;
  font:13px/1.5 var(--font-mono); color:var(--ink1); }
.stdin-input::placeholder { color:var(--ink4); }
.stdin-input:focus { background:var(--surface); }

/* generic panels (drawer + canvas) */
.panel { display:none; }
.panel.active { display:block; }
.drawer-body .panel.active { position:absolute; inset:0; overflow:auto; }
.canvas-panel.active { display:grid; }

/* mono output panels */
.terminal, .diagnostics, .generated-artifact {
  padding:13px 16px; background:var(--surface); color:#3a3a42;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.62; white-space:pre-wrap;
}
.terminal .cmd { color:var(--ink); font-weight:550; }
.terminal .out { color:var(--ink2); }
.terminal .win { color:var(--syn-method); }
.terminal .err, .diagnostics .err { color:var(--error); }
.terminal .ok, .diagnostics .ok { color:var(--green); font-weight:550; }
.diagnostics .warn { color:var(--warn); }

/* tasteful empty states so panels never read as a blank void */
.drawer-body .panel.active:empty { display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:9px; text-align:center; }
.drawer-body .panel.active:empty::before { font-family:"Material Symbols Outlined" !important;
  font-size:30px; color:var(--ink4); opacity:.7; }
.drawer-body .panel.active:empty::after { font-family:var(--font-ui); font-size:12.5px; color:var(--ink3); }
.terminal:empty::before { content:"terminal"; }
.terminal:empty::after { content:"Press Run  (⌘↵)  to execute the program"; }
.diagnostics:empty::before { content:"check_circle"; color:var(--green); opacity:.8; }
.diagnostics:empty::after { content:"No problems detected"; }

/* editor footer (quiet status) */
.ed-foot { display:flex; align-items:center; gap:16px; height:30px; padding:0 16px; flex-shrink:0;
  border-top:1px solid var(--line); background:var(--surface); color:var(--ink3); font-size:11px;
  font-family:var(--font-mono); font-weight:500; }
.ed-foot .seg-item { display:inline-flex; align-items:center; gap:6px; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.ed-foot .seg-item .material-symbols-outlined { font-size:14px; color:var(--ink4); }
.ed-foot .sp { margin-left:auto; }
#statusLeft::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--ink4); margin-right:7px; vertical-align:middle; }
#statusLeft[data-state="ok"]::before { background:var(--green); }
#statusLeft[data-state="err"]::before { background:var(--error); }

/* ── Right inspector ────────────────────────────────────────── */
.right { min-width:0; border-left:1px solid var(--line); padding:14px; overflow:auto;
  display:flex; flex-direction:column; gap:14px; }
.ins-card { background:var(--surface); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow-sm); overflow:hidden; flex:none; }
.ins-card.outline-card { display:flex; flex-direction:column; min-height:0; flex:1; }
.ins-head { display:flex; align-items:center; gap:8px; padding:12px 13px 11px; }
.ins-head .material-symbols-outlined { font-size:16px; color:var(--ink3); }
.ins-title { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); font-family:var(--font-mono); }
.ins-more { margin-left:auto; color:var(--ink4); cursor:pointer; transition:color .12s ease; }
.ins-more:hover { color:var(--accent); }
.ins-more .material-symbols-outlined { font-size:16px; }

.bt-body { border-top:1px solid var(--line); padding:12px 13px; }
.bt-status { display:flex; align-items:center; gap:11px; }
.bt-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-soft); flex:none; }
.bt-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:1; }
.bt-cell { display:flex; flex-direction:column; }
.bt-cell b { font-family:var(--font-mono); font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.bt-cell b.bt-arch { color:var(--ink); }
.bt-cell u { font-size:10px; color:var(--ink3); margin:0 0 3px; font-weight:500; text-transform:uppercase;
  letter-spacing:.04em; font-family:var(--font-mono); text-decoration:none; }

.pipe { padding:12px 14px; border-top:1px solid var(--line); display:flex; flex-direction:column; }
.pstep { display:flex; align-items:center; gap:11px; position:relative; padding:5px 0; }
.pstep .node { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none; z-index:1;
  background:var(--green-soft); color:var(--green); }
.pstep .node .material-symbols-outlined { font-size:14px; color:var(--green); }
.pstep:not(:last-child)::before { content:""; position:absolute; left:10.5px; top:22px; bottom:-5px; width:1.5px; background:var(--line2); }
.pstep .lbl { font-size:12px; font-weight:550; color:var(--ink); }

/* Project metrics card */
.project-card .metrics { border-top:1px solid var(--line); padding:8px 13px 11px; }
.metric { display:grid; grid-template-columns:54px minmax(0,1fr); gap:8px; min-height:28px; padding:3px 0; align-items:center; }
.metric span { color:var(--ink3); font-size:11.5px; font-weight:450; }
.metric strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);
  font-size:12px; font-weight:550; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* Outline (JS-generated .outline-row structure) */
.outline-panel { flex:1; min-height:0; overflow:auto; padding:4px 6px 8px; border-top:1px solid var(--line); }
.outline-section { padding:9px 8px 4px; color:var(--ink3); font-size:11.5px; font-weight:500; }
.outline-row { width:100%; min-width:0; height:28px; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:9px; padding:0 8px 0 22px; border-radius:7px; background:transparent; color:var(--ink2);
  text-align:left; position:relative; }
.outline-row::before { content:""; position:absolute; left:11px; top:0; bottom:0; width:1px; background:var(--line); }
.outline-row:hover { background:var(--bg2); color:var(--ink); }
.outline-kind { color:var(--ink4); font-family:var(--font-mono); font-size:10px; }
.outline-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px;
  color:var(--ink); font-weight:500; }
.outline-line { color:var(--ink4); font-family:var(--font-mono); font-size:10px; font-variant-numeric:tabular-nums; }
.outline-empty { padding:12px 10px; color:var(--ink3); font-size:12px; line-height:1.5; font-style:italic; }

/* ── WPF designer (light) ───────────────────────────────────── */
.canvas-panel { grid-template-columns:200px minmax(0,1fr) 280px; grid-template-rows:minmax(0,1fr);
  background:var(--bg); margin:14px 14px 0 14px; border:1px solid var(--line); border-bottom:none;
  border-radius:14px 14px 0 0; overflow:hidden; box-shadow:var(--shadow); }
.wpf-designer-left, .wpf-designer-right, .wpf-designer-stage { min-width:0; min-height:0; }
.wpf-designer-left { display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--line); background:var(--surface); }
.wpf-designer-right { overflow:auto; border-left:1px solid var(--line); background:var(--surface); }
.designer-head { flex-shrink:0; padding:9px 12px; border-bottom:1px solid var(--line); background:var(--surface);
  color:var(--ink3); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-family:var(--font-mono); }
.wpf-designer-left .designer-head + .wpf-toolbox { flex:1; }
.wpf-designer-left .wpf-tree { height:170px; }
.wpf-toolbox, .wpf-tree, .wpf-props { overflow:auto; padding:6px; }

/* grouped + searchable toolbox */
.toolbox-search { width:100%; height:30px; margin-bottom:4px; padding:0 10px; border:1px solid var(--line2);
  border-radius:8px; background:var(--bg2); color:var(--ink); font-size:12px; }
.toolbox-search:focus { border-color:var(--accent); background:var(--surface); outline:none; }
.toolbox-search::placeholder { color:var(--ink4); }
.toolbox-groups { display:flex; flex-direction:column; }
.toolbox-group-head { padding:9px 8px 3px; color:var(--ink3); font-size:10px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; font-family:var(--font-mono); }
.toolbox-group-head:first-child { padding-top:2px; }

.toolbox-item, .tree-item { width:100%; min-width:0; display:flex; align-items:center; gap:8px; height:30px;
  padding:0 9px; border-radius:8px; background:transparent; color:var(--ink2); text-align:left; font-size:12.5px; }
.tree-item { touch-action:none; user-select:none; }
.toolbox-item:hover, .tree-item:hover { background:var(--bg2); color:var(--ink); }
.tree-item.selected { background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-line); color:var(--ink); }
.tree-item.dragging { opacity:.5; }
.tree-item.drop-before, .tree-item.drop-after { position:relative; }
.tree-item.drop-before::before, .tree-item.drop-after::after { content:""; position:absolute; left:8px; right:8px;
  height:2px; border-radius:2px; background:var(--accent); }
.tree-item.drop-before::before { top:0; }
.tree-item.drop-after::after { bottom:0; }
.tree-item .kind { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-item .id { margin-left:auto; color:var(--ink4); font-family:var(--font-mono); font-size:10px; }
.wpf-tree-empty, .wpf-props-empty { padding:12px 8px; color:var(--ink3); font-size:12px; line-height:1.5; font-style:italic; }

.wpf-designer-stage { display:grid; grid-template-rows:46px minmax(0,1fr); background:var(--bg2); }
.designer-stagebar { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 12px; border-bottom:1px solid var(--line); background:var(--surface); }
#wpfSelectionLabel { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink2); font-size:12px; }
.stage-tools { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.designer-stagebar button { display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 9px;
  border:1px solid var(--line2); border-radius:8px; background:var(--surface); color:var(--ink2); font-size:12px; box-shadow:var(--shadow-sm); }
.designer-stagebar button .material-symbols-outlined { font-size:15px; }
.designer-stagebar button:hover { background:var(--bg2); color:var(--ink); }
.designer-stagebar button:disabled { opacity:.4; cursor:default; }
.designer-stagebar button[aria-pressed="true"] { border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent); }
.designer-stagebar button.accent { border-color:#16161a; background:#16161a; color:#fff; }
.designer-stagebar button.accent:hover { background:#000; }
.designer-zoom { display:inline-flex; align-items:center; gap:2px; height:28px; padding:0 2px; border:1px solid var(--line2);
  border-radius:8px; background:var(--surface); }
.designer-zoom button { height:22px; padding:0 3px; border:0; background:none; color:var(--ink2); box-shadow:none; }
.designer-zoom button .material-symbols-outlined { font-size:14px; }
.designer-zoom strong { padding:0 4px; font-size:12px; font-weight:550; color:var(--ink); }
.designer-mode { display:inline-flex; align-items:center; gap:1px; height:28px; padding:2px; border:1px solid var(--line2);
  border-radius:8px; background:var(--bg2); }
.designer-mode span, .designer-mode button { padding:0 9px; font-size:12px; line-height:22px; color:var(--ink3);
  border-radius:6px; border:0; background:transparent; font-family:var(--font-ui); cursor:pointer; }
.designer-mode .active { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow-sm); }
.designer-mode button:hover:not(.active) { color:var(--ink2); }
.designer-mode #modeRun.active { color:var(--accent); }
/* live canvas affordance during Run Preview */
#winCanvas.live { box-shadow:0 0 0 2px var(--accent); border-radius:2px; }

.designer-canvas-wrap { min-width:0; min-height:0; display:grid; place-items:center; padding:18px; overflow:auto;
  background:var(--bg2); border:1px solid transparent; }
.designer-canvas-wrap.drop-ready { border-color:var(--accent-line); background:var(--accent-soft); }
.grid-pattern { background-image:
    linear-gradient(to right, rgba(20,20,28,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,20,28,.045) 1px, transparent 1px);
  background-size:20px 20px; }
#winCanvas { display:block; flex:0 0 auto; border:1px solid var(--line2); border-radius:8px; background:#fff;
  box-shadow:0 8px 28px rgba(20,20,28,.10), 0 1px 3px rgba(20,20,28,.06); }
#winCanvas.wpf-canvas { border:0; background:transparent; box-shadow:none; }

/* Designer property grid */
.prop-block { padding:0 0 8px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.prop-block h4 { margin:4px 0 8px; padding:5px 9px; background:var(--bg2); border-bottom:1px solid var(--line);
  color:var(--ink2); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.prop-row { display:grid; grid-template-columns:42% 58%; align-items:center; gap:8px; padding:2px 9px; margin-bottom:4px; }
.prop-row label { overflow:hidden; color:var(--ink3); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.prop-row input, .prop-row select { min-width:0; height:28px; padding:0 8px; border:1px solid var(--line2); border-radius:7px;
  background:#fcfcfc; color:var(--ink); font-size:12px; transition:border-color .12s ease, box-shadow .12s ease; }
.prop-row input:hover, .prop-row select:hover { border-color:#d6d6d2; }
.prop-row input:focus, .prop-row select:focus { border-color:var(--accent); background:var(--surface);
  outline:none; box-shadow:0 0 0 3px rgba(50,87,255,.12); }
.prop-row input::placeholder { color:var(--ink4); }
.prop-row input[type="checkbox"] { width:16px; height:16px; padding:0; accent-color:var(--accent); }
.grid-track-control { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 26px; gap:6px; }
.grid-track-remove { width:26px; height:26px; border:1px solid var(--line2); border-radius:7px; background:var(--surface);
  color:var(--ink2); font-size:14px; }
.grid-track-remove:hover { background:var(--bg2); color:var(--ink); }
.grid-track-remove:disabled { opacity:.4; cursor:default; }

/* ── Motion, focus & affordance (premium polish) ────────────── */
@media (prefers-reduced-motion: no-preference) {
  .run-button, .ghost-button, .chip-btn, .icon-button, .mini-icon, .io-btn, .ins-more,
  .command-box, .tree-row, .designer-stagebar button, .toolbox-item, .build-badge,
  .seg .tab, .prop-row input, .prop-row select, .designer-card, .outline-row {
    transition:background-color .12s ease, color .12s ease, border-color .12s ease,
      box-shadow .12s ease, transform .08s ease;
  }
}
/* keyboard-only focus ring */
button:focus-visible, select:focus-visible, input:focus-visible, label:focus-visible,
a:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
:focus:not(:focus-visible) { outline:none; }
.run-button:focus-visible, .chip-btn.solid:focus-visible {
  outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent); }

/* pressed compression */
.chip-btn:active, .ghost-button:active, .io-btn:active, .mini-icon:active,
.icon-button:active, .designer-stagebar button:active { transform:scale(.96); }
.run-button:active { transform:translateY(.5px) scale(.99); box-shadow:none; }
.run-button:hover { background:#222; }

/* icon-only buttons read as clickable; trash signals danger */
.mini-icon, .ins-more, .panel-toggle { cursor:pointer; }
#deleteFileBtn:hover { color:var(--error); background:var(--error-soft); }

/* command palette feels actionable */
.command-box:hover { border-color:#d3d3cf; background:#fff; }
.command-box:hover .material-symbols-outlined { color:var(--accent); }

/* toolbox items read as draggable */
.toolbox-item { cursor:grab; }
.toolbox-item:active { cursor:grabbing; }
.toolbox-item:hover { transform:translateX(2px); }

/* busy: pulse the status indicators to convey ongoing work */
@keyframes ms-pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
body.busy #statusLeft::before { animation:ms-pulse 1.3s ease-in-out infinite; background:var(--accent); }
body.busy .build-badge { animation:ms-pulse 1.3s ease-in-out infinite; }

/* IR / UIIR get the same centered empty state as Output */
#irPanel:empty::before, #uiirPanel:empty::before { content:"memory"; }
#uiirPanel:empty::before { content:"apps"; }
#irPanel:empty::after { content:"Build  (⌘B)  to inspect generated IR"; }
#uiirPanel:empty::after { content:"Build a WPF project to inspect UIIR"; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:1240px) {
  :root { --right-w:0px; }
  .right { display:none; }
  .body { grid-template-columns:var(--side-w) minmax(0,1fr); }
  .canvas-panel { grid-template-columns:180px minmax(0,1fr); }
  .wpf-designer-right { display:none; }
}
@media (max-width:980px) {
  .palette { display:none; }
  .body { grid-template-columns:var(--side-w) minmax(0,1fr); }
}
@media (max-width:760px) {
  body { overflow:auto; }
  .app { min-height:100vh; height:auto; grid-template-rows:auto minmax(0,1fr); }
  .body { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .side { border-right:0; border-bottom:1px solid var(--line); max-height:none; }
  .sol-card { flex:none; max-height:none; }    /* show the whole tree — no clipped half-rows */
  .center { min-height:74vh; }
  .editor-wrap, .canvas-panel { margin:10px; border-radius:14px; border-bottom:1px solid var(--line); }
}

/* ── Theme toggle glyph (CSS-drawn, works in both themes) ───── */
.theme-glyph { width:15px; height:15px; border-radius:50%; border:1.6px solid currentColor;
  background:linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); }
.icon-button:hover .theme-glyph { color:var(--ink); }

/* ============================================================
   DARK THEME — re-define the tokens + a few hardcoded overrides
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg:#0a0a0b;
  --bg2:#161618;
  --surface:#161719;
  --line:#26262b;
  --line2:#303036;
  --ink:#ededf0;
  --ink2:#a1a1aa;
  --ink3:#73737c;
  --ink4:#52525b;

  --accent:#6e8bff;
  --accent-soft:rgba(110,139,255,.15);
  --accent-line:rgba(110,139,255,.32);
  --green:#3fcf6a;
  --green-soft:rgba(63,207,106,.15);
  --warn:#e0a33a;
  --error:#ff6b6b;
  --error-soft:rgba(255,107,107,.13);

  --shadow-sm:0 1px 2px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.35);
  --shadow:0 10px 26px -10px rgba(0,0,0,.65), 0 3px 10px -3px rgba(0,0,0,.55);

  --syn-kw:#c4b5ff; --syn-type:#5fd4e6; --syn-str:#86e0a8; --syn-num:#e0b07a;
  --syn-comment:#6b6f78; --syn-method:#7aa2ff;
}

/* hardcoded spots that don't read from tokens */
html[data-theme="dark"] body { background:var(--bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#34343a; border-color:var(--surface); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background:#45454c; }
html[data-theme="dark"] .topbar { background:rgba(10,10,11,.82); }
html[data-theme="dark"] .command-box { background:#0f0f11; }
html[data-theme="dark"] .command-box:hover { background:#0f0f11; border-color:#3a3a41; }
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .avatar { background:#2a2a30; }
/* primary Run button inverts to a near-white pill on dark */
html[data-theme="dark"] .run-button { background:#ededf0; color:#0a0a0b; border-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4); }
html[data-theme="dark"] .run-button:hover { background:#fff; }
html[data-theme="dark"] .run-button .rk { background:rgba(0,0,0,.10); color:rgba(0,0,0,.55); }
html[data-theme="dark"] .chip-btn.solid { background:#ededf0; color:#0a0a0b; border-color:#ededf0; }
html[data-theme="dark"] .designer-stagebar button.accent { background:var(--accent); color:#0a0a0b; border-color:var(--accent); }
html[data-theme="dark"] .designer-stagebar button.accent:hover { background:#88a0ff; }
/* modal template icon chips */
html[data-theme="dark"] .tpl-ic.violet { background:rgba(150,120,255,.16); color:#b9a6ff; }
html[data-theme="dark"] .tpl-ic.amber { background:rgba(224,163,58,.16); color:#e0b07a; }
html[data-theme="dark"] .tpl-card:hover { background:#1b1b1f; }
html[data-theme="dark"] .prop-row input, html[data-theme="dark"] .prop-row select,
html[data-theme="dark"] .toolbox-search { background:#0f0f11; }
/* WPF design surface grid lines flip to light-alpha on dark */
html[data-theme="dark"] .grid-pattern { background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); }

/* ── ⌘K command palette ─────────────────────────────────────── */
.cmdk-overlay { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-start; justify-content:center;
  padding:92px 24px 24px; background:rgba(20,20,28,.42); backdrop-filter:blur(3px); animation:modal-fade .14s ease; }
.cmdk-overlay[hidden] { display:none; }
.cmdk { width:min(620px,100%); max-height:62vh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 30px 80px -20px rgba(20,20,28,.42); animation:modal-pop .16s cubic-bezier(.2,0,0,1); }
.cmdk-head { display:flex; align-items:center; gap:10px; padding:0 14px; height:52px; flex:none;
  border-bottom:1px solid var(--line); }
.cmdk-head .material-symbols-outlined { font-size:20px; color:var(--ink4); }
.cmdk-input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink);
  font-size:15px; font-family:var(--font-ui); letter-spacing:-.01em; }
.cmdk-input::placeholder { color:var(--ink4); }
.cmdk-head .kbd b { text-transform:none; }
.cmdk-list { overflow:auto; padding:6px; }
.cmdk-section { padding:9px 11px 4px; font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); }
.cmdk-row { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; cursor:pointer; }
.cmdk-row .ci { width:30px; height:30px; flex:none; border-radius:8px; background:var(--bg2);
  display:grid; place-items:center; color:var(--ink3); }
.cmdk-row .ci .material-symbols-outlined { font-size:17px; }
.cmdk-row .cl { flex:1; min-width:0; }
.cmdk-row .ct { font-size:13.5px; color:var(--ink); font-weight:500; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.cmdk-row .cs { font-size:11.5px; color:var(--ink3); margin-top:1px; }
.cmdk-row .ck { font-family:var(--font-mono); font-size:11px; color:var(--ink3); border:1px solid var(--line2);
  border-radius:6px; padding:2px 6px; background:var(--bg2); flex:none; }
.cmdk-row.sel, .cmdk-row:hover { background:var(--accent-soft); }
.cmdk-row.sel .ci, .cmdk-row:hover .ci { color:var(--accent); background:var(--surface); }
.cmdk-empty { padding:26px; text-align:center; color:var(--ink3); font-size:13px; }

/* live-diagnostics polish: green build-time stat, Errors count badge, clickable diagnostics */
.bt-cell b.bt-grn { color:var(--green); }
.tab-badge { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; margin-left:1px;
  border-radius:999px; background:var(--error); color:#fff; font-family:var(--font-mono); font-size:10px;
  font-weight:600; line-height:1; }
.tab-badge[hidden] { display:none; }
.diagnostics .diag-link { cursor:pointer; border-radius:5px; margin:0 -6px; padding:1px 6px; }
.diagnostics .diag-link:hover { background:var(--bg2); }