/* Light "urban pro" theme is the default; dark is the alternate (body.theme-dark). */
/* Cool neutral palette + azure accent — matches the "Mola Mola" (FireForm) reference. */
:root{
  --bg0:#E7EAEF;          /* app chrome (cool neutral) */
  --bg1:#FFFFFF;          /* panels            */
  --bg2:#FFFFFF;          /* raised / inputs   */
  --bg3:#EDF0F4;          /* hover surfaces    */
  --line:#E1E4EA;
  --line2:#D0D5DD;
  --tx:#171A1F;
  --tx2:#5A616E;
  --tx3:#959BA8;
  --acc:#2F6BFF;          /* azure (reference default) */
  --acc2:#5B87FF;
  --acc-ink:#FFFFFF;      /* text on accent fill */
  --sel:#2F6BFF;          /* viewport selection = accent */
  --warn:#C7841A;
  --err:#E0623A;
  --glass:rgba(255,255,255,.86);   /* translucent overlay surfaces */
  --scrim:rgba(231,234,239,.60);   /* full-screen dim (dropzone)    */
  --glass-rgb:255,255,255;         /* base for floating glass panels (alpha = --panel-alpha) */
  --panel-alpha:.86;               /* user-adjustable panel translucency (Visuals slider) */
  --mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --disp:'Hanken Grotesk', system-ui, sans-serif;
}
body.theme-dark{
  --bg0:#101318; --bg1:#191C22; --bg2:#23272F; --bg3:#2A2E37;
  --line:#262A31; --line2:#363B45;
  --tx:#EEF0F4; --tx2:#A4AAB6; --tx3:#6C727E;
  --acc:#3D78FF; --acc2:#6B97FF; --acc-ink:#FFFFFF;
  --sel:#5FA8E0; --warn:#FFB454; --err:#FF6E61;
  --glass:rgba(25,28,34,.82);
  --scrim:rgba(16,19,24,.58);
  --glass-rgb:25,28,34;
}
/* accent presets — override only the accent vars, so they win in BOTH themes (placed after
   theme-dark in the cascade). 'azure' is the default and needs no rule. */
body[data-accent="earth"]{  --acc:#C2692B; --acc2:#D9853F; --acc-ink:#FFFFFF; }
body[data-accent="teal"]{   --acc:#0D9488; --acc2:#12B3A3; --acc-ink:#FFFFFF; }
body[data-accent="violet"]{ --acc:#6D50E0; --acc2:#8A72EA; --acc-ink:#FFFFFF; }
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--bg0);
  color:var(--tx);
  font-family:var(--sans);
  font-size:12.5px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
/* faint film grain over everything */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:80;
  opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{ background:var(--acc); color:var(--acc-ink); }
:focus-visible{ outline:1.5px solid var(--acc); outline-offset:1px; }
svg{ display:block; }

/* ============================ top bar ============================ */
#topbar{
  flex:none; height:48px; display:flex; align-items:center; gap:14px;
  background:var(--bg1); border-bottom:1px solid var(--line); padding:0 12px 0 0;
  animation:dropin .45s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes dropin{ from{ opacity:0; transform:translateY(-10px);} }
.brand{
  height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 16px;
  background:var(--acc); color:var(--acc-ink);
  font-family:var(--disp); font-weight:700; font-size:15.5px; line-height:.92; letter-spacing:.06em;
  user-select:none; flex:none;
}
.brand span{ display:block; }
.doc{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.doc-title{
  font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.01em;
  color:var(--tx); white-space:nowrap; cursor:text; border-radius:5px; padding:0 3px; margin:0 -3px;
  outline:none;
}
.doc-title:hover{ background:var(--bg3); }
.doc-title.editing{ background:var(--bg2); box-shadow:inset 0 0 0 1px var(--acc); cursor:text; }
.doc-file{ font-family:var(--mono); font-size:10.5px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px; }
.doc-file.loaded{ color:var(--tx2); }
#tb-stats{
  display:flex; align-items:center; gap:7px; flex:none;
  border:1px solid var(--line); border-radius:99px; padding:4px 12px;
  font-family:var(--mono); font-size:10.5px; color:var(--tx2); white-space:nowrap;
}
#tb-stats .dot{
  width:6px; height:6px; border-radius:99px; background:var(--tx3); flex:none;
  transition:background .2s;
}
#tb-stats.live .dot{ background:var(--acc); box-shadow:0 0 6px var(--acc); }
#tb-stats.live.pulse .dot{ animation:pulse .5s; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(47,107,255,.6);} 100%{ box-shadow:0 0 0 9px rgba(47,107,255,0);} }
.tb-spacer{ flex:1; }
.actions{ display:flex; align-items:center; gap:8px; flex:none; }
.btn{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.01em;
  cursor:pointer; user-select:none;
  border:1px solid var(--line2); border-radius:8px; color:var(--tx2);
  background:transparent; padding:7px 12px;
  transition:color .12s, border-color .12s, background .12s;
}
.btn:hover{ color:var(--tx); border-color:var(--tx3); background:var(--bg2); }
.btn.primary{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); }
.btn.primary:hover{ background:var(--acc2); border-color:var(--acc2); }
.btn:disabled{ opacity:.35; pointer-events:none; }
.btn svg{ width:11px; height:11px; }
/* ----- Run split button (Run / Live + Auto-run caret) ----- */
.run-split{ display:inline-flex; align-items:stretch; }
#btn-rerun{ display:inline-flex; align-items:center; gap:6px; border-top-right-radius:0; border-bottom-right-radius:0; }
.run-caret{ border-top-left-radius:0; border-bottom-left-radius:0; padding:0 6px; margin-left:-1px;
  background:var(--bg2); color:var(--tx2); }
.run-caret:hover{ color:var(--acc); border-color:var(--acc); }
.run-caret svg{ width:7px; height:7px; }
/* Auto-run = "Live" (calm green) */
#btn-rerun.live{ background:#2f9e62; border-color:#2f9e62; color:#fff; }
#btn-rerun.live:hover{ background:#36b06f; border-color:#36b06f; }
/* manual + up-to-date = muted; manual + changed = orange and gently pulsing for attention */
#btn-rerun:not(.live):not(.stale){ background:var(--bg2); border-color:var(--line2); color:var(--tx2); }
#btn-rerun.stale{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); animation:runpulse 1.5s ease-in-out infinite; }
@keyframes runpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(230,130,40,0);} 50%{ box-shadow:0 0 0 4px rgba(230,130,40,.28);} }
.run-auto{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.run-auto input{ accent-color:var(--acc); cursor:pointer; margin:0; }
.menu{ position:relative; }
.menu-list{
  position:absolute; top:calc(100% + 6px); right:0; min-width:200px; z-index:70;
  background:var(--bg1); border:1px solid var(--line2); border-radius:8px; padding:4px;
  box-shadow:0 10px 26px rgba(0,0,0,.30);
  opacity:0; pointer-events:none; transform:translateY(-3px);
  transition:opacity .07s ease, transform .07s ease; will-change:opacity;
}
/* keep a tall popout (e.g. the display-settings list) on screen by scrolling, not overflowing */
.menu-list{ max-height:calc(100vh - 96px); overflow-y:auto; }
.menu.open .menu-list{ opacity:1; pointer-events:auto; transform:translateY(0); }
/* flip upward when there isn't room below (toolbar dragged near the bottom edge) */
.menu.up .menu-list{ top:auto; bottom:calc(100% + 6px); transform:translateY(4px); }
.menu.up.open .menu-list{ transform:translateY(0); }
/* flip the horizontal anchor: lists default to right-aligned (extend left); when that would run off
   the left edge (toolbar dragged to the left side) left-align instead so it extends right */
.menu.lalign .menu-list{ left:0; right:auto; }
/* --- tool-rail app buttons (Projects / Account / Settings), pinned to the rail bottom ---
   Their base look inherits from `#toolrail button`. Because the rail sits at the far LEFT and this
   group is at the BOTTOM, their dropdowns open to the RIGHT of the rail, bottom-aligned, growing
   upward (mirrors `.menu.up` + `.menu.lalign`, but anchored beside the button rather than above it). */
#toolrail .rail-menu .menu-list{
  top:auto; bottom:0; left:calc(100% + 8px); right:auto;
  width:max-content; max-width:min(340px, calc(100vw - 60px)); overflow-x:hidden;
  transform:translateX(-4px); transform-origin:left bottom;
}
#toolrail .rail-menu.open .menu-list{ transform:translateX(0); }
#toolrail .rail-menu.open > .rail-app{ background:var(--bg3); color:var(--acc); }
.acct-list{ width:214px; padding:6px; }
.acct-item{ white-space:nowrap; }
.acct-who{ display:flex; align-items:center; gap:9px; padding:6px 6px 8px; }
.acct-avatar{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--acc); color:var(--acc-ink);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.acct-id{ min-width:0; }
.acct-name{ font-weight:600; font-size:13px; color:var(--tx); text-transform:capitalize; }
.acct-email{ font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-sep{ height:1px; background:var(--line); margin:2px 0 4px; }
.acct-item{ display:block; width:100%; text-align:left; padding:7px 9px; border:none; border-radius:6px;
  background:transparent; color:var(--tx); font:inherit; font-size:13px; cursor:pointer; }
.acct-item:hover{ background:var(--bg3); }
.menu-list button, .menu-list label{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px; width:100%;
  background:transparent; border:none; border-radius:6px; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; color:var(--tx); text-align:left;
  padding:8px 11px; transition:background .1s;
}
.menu-list button:hover, .menu-list label:hover{ background:var(--bg3); }
.menu-list button span, .menu-list label span{ color:var(--tx3); font-size:10px; font-family:var(--mono); }
/* the currently-active item in a popout list (e.g. the live Display mode) — accent + a check */
.menu-list button.active{ color:var(--acc); font-weight:600; }
.menu-list button.active::after{ content:'✓'; color:var(--acc); font-size:11px; font-weight:700; }
.menu-sep{ display:block; height:1px; margin:4px 6px; background:var(--line); }
/* Outlines checkbox in the render-style dropdown */
.disp-outline{ display:flex; align-items:center; gap:8px; justify-content:flex-start; padding:6px 11px; cursor:pointer; }
.disp-outline input{ accent-color:var(--acc); cursor:pointer; margin:0; }
.disp-outline span{ color:var(--tx); font-size:12.5px; }
.disp-outline:hover{ background:var(--bg3); border-radius:6px; }
/* Project menu: wider + single-line rows so labels/shortcuts don't wrap */
#project-menu .menu-list{ min-width:288px; }
#project-menu .menu-list button, #project-menu .menu-list label{ white-space:nowrap; }
#project-menu .menu-list button span, #project-menu .menu-list label span{ white-space:nowrap; }

/* ============================ layout ============================ */
main{ flex:1; display:flex; min-height:0; }

/* ============================ tool rail ============================ */
#toolrail{
  flex:none; width:46px; background:var(--bg1); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; padding:8px 0; gap:2px;
  animation:slidein .45s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:.05s;
  z-index:10;
}
@keyframes slidein{ from{ opacity:0; transform:translateX(-10px);} }
.rail-sep{ width:22px; height:1px; background:var(--line); margin:6px 0; flex:none; }
.rail-spacer{ flex:1; }
#toolrail button{
  position:relative; width:34px; height:34px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:7px; color:var(--tx2); cursor:pointer;
  transition:background .12s, color .12s;
}
#toolrail button svg{ width:16px; height:16px; }
#toolrail button:hover{ background:var(--bg3); color:var(--tx); }
#toolrail button.active{ background:var(--acc); color:var(--acc-ink); }
#toolrail button.on{ color:var(--acc); }
#toolrail button.on::after{
  content:""; position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:99px; background:var(--acc);
}
/* "Select object" tool — no frame/glow, but keep the purple accent icon (a touch larger) so it stands out */
#toolrail button.tool-hero{ color:var(--acc); }
#toolrail button.tool-hero svg{ width:19px; height:19px; }
#toolrail button.tool-hero:hover{ background:var(--bg3); color:var(--acc); }
#toolrail button.tool-hero.active{ background:var(--acc); color:var(--acc-ink); }
/* The rail now HOSTS the Settings + Account dropdowns. Their menu/seg/swatch buttons are nested
   <button>s and would otherwise inherit the 34px-square + accent-fill tool-button styling above —
   that's what turned the Settings segments into clipped blue blobs. Reset them to normal menu buttons
   (segs keep their .seg pill; the accent swatches re-assert their own 17px size). */
#toolrail .menu-list button{ width:auto; height:auto; flex:0 0 auto; display:inline-flex; }
#toolrail .menu-list button.active{ background:var(--bg3); color:var(--acc); }
#toolrail .menu-list .acct-item{ width:100%; justify-content:flex-start; }
#toolrail .accent-sw button{ width:17px; height:17px; }
#toolrail .accent-add{ width:17px; height:17px; }
/* tooltips */
[data-tip]{ position:relative; }
[data-tip]::before{
  content:attr(data-tip);
  position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%) translateX(-4px);
  background:var(--bg2); border:1px solid var(--line2); border-radius:5px;
  color:var(--tx); font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:0; text-transform:none; padding:5px 9px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .12s .18s, transform .12s .18s;
  z-index:60;
}
[data-tip]:hover::before{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ============================ viewport ============================ */
#viewport{ flex:1; position:relative; min-width:0; background:var(--bg0); }
#viewport canvas{ display:block; }
/* Graph view — full-bleed canvas over the viewport, under the floating panels.
   Palette + dot-grid match the FireForm reference exactly. */
:root{
  --g-bg:#e9ecf0; --g-surface:#ffffff; --g-surface2:rgba(241,243,246,0.96);
  --g-text:#171a1f; --g-faint:#959ba8; --g-line:rgba(18,22,30,0.08); --g-line-strong:rgba(18,22,30,0.14);
}
body.theme-dark{
  --g-bg:#12151a; --g-surface:#191c22; --g-surface2:rgba(38,42,50,0.96);
  --g-text:#eef0f4; --g-faint:#6c727e; --g-line:rgba(255,255,255,0.08); --g-line-strong:rgba(255,255,255,0.15);
}
#graph-view{ position:absolute; inset:0; z-index:5; background:var(--g-bg);
  background-image:radial-gradient(var(--g-line-strong) 1px, transparent 1px); background-size:26px 26px; }
#graph-view[hidden]{ display:none; }
#graph-canvas{ display:block; width:100%; height:100%; cursor:grab; }
#graph-canvas.dragging{ cursor:grabbing; }
#graph-tools{ top:14px; right:330px; padding:3px; z-index:8; }
#graph-readout{ left:18px; bottom:18px; max-width:340px; padding:9px 12px; z-index:8;
  flex-direction:column; align-items:flex-start; gap:2px; font-family:var(--mono); }
#graph-readout .gr-name{ font-family:var(--disp); font-weight:700; font-size:12px; color:var(--tx); }
#graph-readout .gr-meta{ font-size:10px; color:var(--tx3); }
#graph-hint{ left:50%; transform:translateX(-50%); bottom:18px; z-index:8;
  padding:5px 11px; font-family:var(--disp); font-size:10px; letter-spacing:.03em; color:var(--tx3); }

/* Compare workspace (Phase 3) — two scheme cards + a mirror-bar metrics diff */
#compare-view{ position:absolute; inset:0; z-index:7; background:var(--bg1); overflow-y:auto; }
#compare-view[hidden]{ display:none; }
.cmp-wrap{ max-width:1080px; margin:0 auto; padding:30px 32px 48px; }
.cmp-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; gap:16px; }
.cmp-title{ font-family:var(--disp); font-size:21px; font-weight:700; letter-spacing:-.01em; color:var(--tx); }
.cmp-sub{ font-size:12.5px; color:var(--tx3); margin-top:3px; }
.cmp-actions{ display:flex; gap:8px; flex:none; }
/* N scheme cards, auto-fit */
.cmp-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-bottom:20px; }
.cmp-card{ position:relative; background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.cmp-card-head{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.cmp-dot{ width:11px; height:11px; border-radius:50%; flex:none; }
.cmp-name{ font-family:var(--disp); font-size:14px; font-weight:700; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmp-x{ margin-left:auto; flex:none; width:20px; height:20px; border:none; border-radius:5px; background:transparent; color:var(--tx3); cursor:pointer; }
.cmp-x:hover{ background:var(--bg3); color:var(--tx); }
.cmp-card canvas, .cmp-card img.cmp-thumb{ width:100%; height:200px; display:block; border-radius:10px; background:var(--bg3); object-fit:cover; }
.cmp-empty{ grid-column:1/-1; padding:40px; text-align:center; color:var(--tx3); font-size:13px; border:1px dashed var(--line2); border-radius:16px; }
/* metrics: a table — rows = metric, columns = schemes (value + proportional bar) */
.cmp-metrics{ background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:6px 22px 14px; box-shadow:0 4px 14px rgba(0,0,0,.08); overflow-x:auto; }
.cmp-mtable{ width:100%; border-collapse:collapse; }
.cmp-mtable th, .cmp-mtable td{ padding:11px 14px; text-align:left; border-top:1px solid var(--line); vertical-align:middle; }
.cmp-mtable tr:first-child th, .cmp-mtable tr:first-child td{ border-top:none; }
.cmp-mtable th.cmp-metric{ font-size:12px; color:var(--tx3); font-weight:600; white-space:nowrap; width:120px; }
.cmp-mtable th.cmp-sch{ font-family:var(--disp); font-size:12.5px; font-weight:700; color:var(--tx); }
.cmp-mtable th.cmp-sch .cmp-dot{ display:inline-block; margin-right:6px; vertical-align:middle; }
.cmp-cell .cmp-val{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--tx); }
.cmp-cell .cmp-bar{ margin-top:5px; height:7px; border-radius:4px; background:var(--bg3); overflow:hidden; }
.cmp-cell .cmp-bar i{ display:block; height:100%; border-radius:4px; }
/* topbar Model/Graph/Compare switch */
#view-switch button.soon{ position:relative; opacity:.5; }
#view-switch button.soon::after{ content:'soon'; position:absolute; top:-5px; right:-2px;
  font-size:7px; font-weight:700; letter-spacing:.04em; color:var(--acc); }
.vp-overlay{
  position:absolute; z-index:6; display:flex; align-items:center; gap:8px;
  background:var(--glass); backdrop-filter:blur(10px);
  border:1px solid var(--line2); border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
}
#vp-topright{ top:14px; right:330px; padding:3px; z-index:12; width:max-content; max-width:calc(100vw - 24px); }   /* sits just left of the right panel (ref layout); above panels so the gear popover shows. width:max-content pins it to its content so a stray left/right combo can't stretch it */
/* display-toolbar layout: vertical stack + collapse-to-handle (Settings → Visuals → Toolbar) */
#vp-topright.vert{ flex-direction:column; align-items:stretch; }
#vp-topright.vert .seg{ flex-direction:column; width:100%; }
/* vertical: every item fills the column width (no ragged blank space) + dividers run horizontally */
#vp-topright.vert .fit, #vp-topright.vert .seg button{ width:100%; justify-content:center; border-left:none; border-radius:6px; }
#vp-topright.collapsed > :not(.tb-collapse){ display:none; }
#vp-topright .tb-collapse.on{ color:var(--acc); }
#vp-topright .tb-collapse{ cursor:grab; touch-action:none; }
#vp-topright .tb-collapse:active{ cursor:grabbing; }
#vp-topright .tb-collapse svg{ width:16px; height:16px; }   /* grip filled to button size (was tiny dots) */
#gizmo-mode{ top:14px; left:50%; transform:translateX(-50%); padding:3px; z-index:12; }
#gizmo-mode[hidden]{ display:none; }
/* Select-object tree-level control — floating pill, bottom-center */
#selobj-bar{ bottom:16px; left:50%; transform:translateX(-50%); padding:5px 10px; gap:9px; z-index:12; }
#selobj-bar[hidden]{ display:none; }
#selobj-bar .sob-lbl{ font-size:11px; color:var(--tx2); }
#selobj-bar button{
  width:24px; height:22px; display:flex; align-items:center; justify-content:center;
  background:var(--bg3); border:1px solid var(--line2); border-radius:6px; color:var(--acc);
  font-size:12px; line-height:1; cursor:pointer; transition:background .12s, color .12s;
}
#selobj-bar button:hover{ background:var(--acc); color:var(--acc-ink); }
#selobj-bar button svg{ width:15px; height:15px; }
#selobj-bar .sob-lvl{ font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--tx); min-width:22px; text-align:center; }
#selobj-bar .sob-sep{ width:1px; align-self:stretch; margin:2px 1px; background:var(--line2); }
#selobj-bar .sob-hint{ font-size:10.5px; color:var(--tx3); min-width:64px; }
/* gizmo numeric input — exact transform value, positioned at the gizmo on click */
#gizmo-num{ padding:3px 5px; gap:4px; z-index:13; }
#gizmo-num[hidden]{ display:none; }
#gizmo-num input{ width:56px; font-family:var(--mono); font-size:12px; padding:2px 5px;
  background:var(--bg2); border:1px solid var(--acc); border-radius:5px; color:var(--tx); }
#gizmo-num input::-webkit-inner-spin-button, #gizmo-num input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
#gizmo-num .gn-u{ font-size:10px; color:var(--tx3); font-family:var(--disp); min-width:18px; }
/* viewport toolbar quick toggles (Display / Shadow / Sun / Gizmo) — ON = pressed (subtle inset recess
   + accent icon). Light keeps the original look; dark deepens the inset (a black shadow is invisible
   on the dark toolbar) so "pressed" reads in dark too — no heavy accent ring. */
.vp-overlay .fit.active{ background:var(--bg3); color:var(--acc); box-shadow:inset 0 1px 3px rgba(0,0,0,.13); }
/* dark: match the 3D/Plan segment's clean lighter pill (no inset recess) — .seg button.active look */
body.theme-dark .vp-overlay .fit.active{ box-shadow:none; }
/* united projection toggle: dim the inactive shape so the current projection reads */
#btn-proj[data-proj="persp"] .p-para{ opacity:.32; }
#btn-proj[data-proj="parallel"] .p-persp{ opacity:.32; }
#disp-menu .menu-list{ min-width:118px; }
/* Sun study banner — bottom-centre, opened by the toolbar sun button (FireForm reference layout) */
#sun-banner, #sun-banner-loc{ left:50%; bottom:24px; transform:translateX(-50%); z-index:12; flex-direction:column;
  align-items:stretch; gap:0; width:600px; max-width:calc(100% - 460px); padding:14px 18px 12px; border-radius:16px; }
#sun-banner[hidden], #sun-banner-loc[hidden]{ display:none; }
/* row 1 — title + live az/alt readout (left), date presets (right) */
#sun-banner .sb-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
#sun-banner .sb-title-wrap{ display:flex; align-items:center; gap:9px; }
#sun-banner .sb-title{ font-family:var(--disp); font-weight:600; font-size:13px; color:var(--tx); }
#sun-banner .sb-read{ font-family:var(--mono); font-size:11px; color:var(--tx3); }
#sun-banner .sb-dates{ display:flex; gap:5px; }
#sun-banner .sb-dates button{ font-family:var(--disp); font-weight:600; font-size:11px; padding:4px 10px;
  border:1px solid var(--line2); border-radius:8px; background:var(--bg2); color:var(--tx2); cursor:pointer; transition:.12s; }
#sun-banner .sb-dates button:hover{ color:var(--tx); }
#sun-banner .sb-dates button.active{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); }
/* row 2 — play + time + day scrubber */
#sun-banner .sb-time-row{ display:flex; align-items:center; gap:15px; }
#sun-banner .sb-time{ font-family:var(--mono); font-weight:600; font-size:15px; color:var(--tx); min-width:54px; }
#sun-banner .sb-scrub{ flex:1; accent-color:var(--acc); cursor:ew-resize; height:5px; }
/* row 3 — time ticks (aligned under the scrubber, past play+time) */
#sun-banner .sb-ticks{ display:flex; justify-content:space-between; margin-top:9px; padding-left:69px;
  font-size:10px; color:var(--tx3); font-family:var(--mono); }
/* row 4 — azimuth + latitude sliders under the day slider */
#sun-banner .sb-sliders{ display:flex; gap:22px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
#sun-banner .sb-ctl{ display:flex; align-items:center; gap:7px; flex:1; }
#sun-banner .sb-ctl label{ font-family:var(--disp); font-size:11px; color:var(--tx3); white-space:nowrap; }
#sun-banner .sb-ctl input[type=range]{ flex:1; min-width:60px; accent-color:var(--acc); cursor:ew-resize; }
#sun-banner .sb-num{ width:40px; text-align:right; font-family:var(--mono); font-size:12px; font-weight:700;
  color:var(--acc); background:transparent; border:none; padding:0; -moz-appearance:textfield; }
#sun-banner .sb-num:focus{ outline:none; box-shadow:inset 0 -1.5px 0 var(--acc2); }
#sun-banner .sb-num::-webkit-inner-spin-button, #sun-banner .sb-num::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
#sun-banner .sb-u{ font-size:11px; color:var(--tx3); margin-left:-4px; }
.sb-play{ width:36px; height:36px; flex:none; border-radius:50%; border:none; background:var(--acc); color:var(--acc-ink);
  cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.sb-play.on{ background:var(--acc2); }
/* close button (top-right of either banner); heads get right clearance so dates/city don't sit under it */
.sb-close{ position:absolute; top:9px; right:11px; z-index:2; width:18px; height:18px; padding:0; border:none;
  border-radius:5px; background:transparent; color:var(--tx3); font-size:12px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.sb-close:hover{ background:var(--bg3); color:var(--tx); }
#sun-banner .sb-head, #sun-banner-loc .sb-head{ padding-right:22px; }
/* ---- Sun study by-location banner ---- */
#sun-banner-loc .sb-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
#sun-banner-loc .sb-title-wrap{ display:flex; align-items:center; gap:9px; }
#sun-banner-loc .sb-title{ font-family:var(--disp); font-weight:600; font-size:13px; color:var(--tx); }
#sun-banner-loc .sb-read{ font-family:var(--mono); font-size:11px; color:var(--tx3); }
.sb-city{ font-family:var(--disp); font-size:11px; font-weight:600; color:var(--tx); background:var(--bg2);
  border:1px solid var(--line2); border-radius:8px; padding:4px 9px; cursor:pointer; }
#sun-banner-loc .sb2-row{ display:flex; align-items:center; gap:13px; margin-top:9px; }
#sun-banner-loc .sb2-lbl{ flex:none; width:36px; font-family:var(--disp); font-size:11px; color:var(--tx3); }
#sun-banner-loc .sb2-val{ flex:none; min-width:92px; text-align:right; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--acc); }
#sun-banner-loc .sb2-ticks{ padding-left:49px; padding-right:105px; margin-top:7px; position:relative; }
#sun-banner-loc .sb2-run{ display:none; position:absolute; left:0; right:0; top:0; text-align:center;
  font-family:var(--mono); font-weight:700; font-size:11px; color:var(--acc); }
#sun-banner-loc .sb2-ticks.playing > span:not(.sb2-run){ opacity:0; }
#sun-banner-loc .sb2-ticks.playing .sb2-run{ display:block; }
/* North wind-rose */
#wind-rose{ right:420px; bottom:80px; z-index:12; width:79px; height:79px; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; }   /* gap right of the banner, vertically mid-banner */
#wind-rose[hidden]{ display:none; }
#wind-rose.dragging{ cursor:grabbing; }
#wind-rose svg{ width:79px; height:79px; display:block; }
#wind-rose .wr-ring{ fill:none; stroke:var(--line2); stroke-width:1.2; }
#wind-rose .wr-hub{ fill:var(--tx3); }
#wind-rose .wr-n{ fill:var(--acc); }
#wind-rose .wr-s{ stroke:var(--tx3); stroke-width:1.3; }
#wind-rose .wr-lbl{ fill:var(--tx); font-family:var(--disp); font-size:9px; font-weight:800; text-anchor:middle; }
#wind-rose .wr-deg{ position:absolute; bottom:-3px; left:50%; transform:translateX(-50%); font-family:var(--mono);
  font-size:9px; color:var(--tx3); background:var(--bg1); border:1px solid var(--line); padding:0 4px; border-radius:5px; }
/* dual-range: two overlaid native inputs over a rail + a fill bar */
.dual{ position:relative; flex:1; height:18px; display:flex; align-items:center; min-width:0; }
.dual .dual-rail{ position:absolute; left:0; right:0; height:4px; border-radius:2px; background:var(--bg3); }
.dual .dual-fill{ position:absolute; height:4px; border-radius:2px; background:var(--acc); }
.dual input[type=range]{ position:absolute; left:0; right:0; width:100%; margin:0; height:18px; background:none;
  -webkit-appearance:none; appearance:none; pointer-events:none; }
.dual input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; pointer-events:auto;
  width:14px; height:14px; border-radius:50%; background:var(--acc); border:2px solid var(--bg1); cursor:ew-resize; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.dual input[type=range]::-moz-range-thumb{ pointer-events:auto; width:14px; height:14px; border-radius:50%; background:var(--acc); border:2px solid var(--bg1); cursor:ew-resize; }
.dual input[type=range]::-webkit-slider-runnable-track{ background:none; border:none; }
.dual input[type=range]::-moz-range-track{ background:none; }
/* key-date scale under the year range */
#sun-banner-loc .sb2-scale{ position:relative; height:14px; margin:3px 105px 0 49px; }
#sun-banner-loc .sb2-scale .km{ position:absolute; transform:translateX(-50%); top:4px; font-family:var(--mono);
  font-size:9px; color:var(--tx3); cursor:pointer; white-space:nowrap; padding:0 3px; border-radius:4px; }
#sun-banner-loc .sb2-scale .km::before{ content:''; position:absolute; top:-4px; left:50%; width:1px; height:4px; background:var(--line2); }
#sun-banner-loc .sb2-scale .km:hover{ color:var(--acc); background:var(--bg3); }
.seg{
  display:flex; align-items:center; gap:2px;
}
.seg button{
  font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.02em;
  background:transparent; color:var(--tx2); border:none; border-radius:7px;
  padding:5px 11px; cursor:pointer; transition:color .12s, background .12s;
}
.seg button:hover{ color:var(--tx); }
.seg button.active{ background:var(--bg3); color:var(--acc); }
#vp-topright .fit{
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-left:1px solid var(--line);
  border-radius:0 5px 5px 0; color:var(--tx2); cursor:pointer; transition:color .12s;
}
#vp-topright .fit:hover{ color:var(--tx); }
/* 3D / 2D segment: compact buttons (no stretch); active = accent text, NO filled pill */
#vp-topright .seg{ gap:0; }
#vp-topright .seg button{ height:26px; padding:0 8px; border-radius:5px; display:flex; align-items:center; }
#vp-topright .seg button.active{ background:transparent; color:var(--acc); box-shadow:none; }
#vp-topright .seg button:hover{ background:var(--bg3); }
#vp-topright .fit svg{ width:16px; height:16px; }   /* bigger, bolder toolbar icons */
/* 2D/3D single toggle */
#vp-topright .tb-mode{ width:auto; min-width:30px; padding:0 9px; font-family:var(--disp); font-weight:700; font-size:11.5px; }
#vp-topright .tb-mode.active{ color:var(--acc); }
/* hover-flyout groups (projection→lens, shadow→AO/soft, zoom→fit/sel, gizmo→grid/floor/rose) */
.tb-group{ position:relative; display:flex; align-items:stretch; }
.tb-group > .fit{ border-left:1px solid var(--line); }
.tb-flyout{ position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:7px;   /* bridge so the cursor can reach it */
  z-index:14; opacity:0; pointer-events:none; transition:opacity .1s; }
.tb-group:hover .tb-flyout{ opacity:1; pointer-events:auto; }
.tb-fly-inner{ display:flex; align-items:center; gap:2px; padding:3px;
  background:var(--glass); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border:1px solid var(--line2); border-radius:9px; box-shadow:0 8px 22px rgba(0,0,0,.18); }
.tb-fly-inner .fit{ border-left:none; border-radius:6px; }
.tb-fly-inner .fit.active{ color:var(--acc); background:var(--bg3); }
.tb-fly-wide{ gap:7px; padding:6px 10px; }
.tb-fly-lbl{ font-family:var(--disp); font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--tx3); }
.tb-fly-inner input[type=range]{ width:84px; accent-color:var(--acc); cursor:pointer; }
.tb-fly-inner b{ font-family:var(--disp); font-size:10px; color:var(--tx2); min-width:26px; text-align:right; }
/* vertical toolbar: flyouts open to the right, centred on the button */
#vp-topright.vert .tb-flyout{ top:50%; left:100%; transform:translateY(-50%); padding-top:0; padding-left:7px; }
#vp-topright.vert .tb-group > .fit{ border-left:none; }
#vp-topright #seg-proj{ border-left:1px solid var(--line); padding-left:3px; margin-left:1px; }
#seg-proj button{ padding:5px 8px; display:flex; align-items:center; justify-content:center; }
#seg-proj svg{ width:14px; height:14px; display:block; }
/* view-options popover */
.menu-list.vopts{ min-width:184px; padding:8px; display:flex; flex-direction:column; gap:7px; }
.vopt-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vopt-lbl{ font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.01em;
  color:var(--tx2); }
.vopt-row .seg button{ padding:3px 8px; font-size:9px; letter-spacing:.08em; }
.settings-head{ font-family:var(--disp); font-size:12px; font-weight:700; letter-spacing:.01em;
  color:var(--tx); padding:0 0 4px; border-bottom:1px solid var(--line); margin-bottom:2px; }
.settings-sub{ font-weight:400; font-size:9px; color:var(--tx3); letter-spacing:0; }
/* drawing measurement box (VCB): live segment length; highlights while a value is typed */
#draw-vcb{ position:fixed; bottom:46px; right:18px; z-index:60; padding:5px 11px; border-radius:8px;
  font-family:var(--disp); font-size:12px; font-weight:600; letter-spacing:.02em;
  background:rgba(20,24,30,.86); color:#dfe7ef; border:1px solid var(--line2); box-shadow:0 4px 14px rgba(0,0,0,.3); }
#draw-vcb.typing{ color:#fff; border-color:var(--acc); box-shadow:0 0 0 1px var(--acc), 0 4px 14px rgba(0,0,0,.3); }
/* generated-object inspector values (read-only provenance + metrics) */
.gobj-v{ font-size:11px; color:var(--tx); font-weight:600; text-align:right; }
/* tree-depth selection controls in the generated-object inspector */
.gtree-ctl{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.gtree-ctl .gtree-lbl{ font-size:10.5px; color:var(--tx2); flex:1; }
.gtree-ctl button{
  width:22px; height:20px; display:flex; align-items:center; justify-content:center;
  background:var(--bg3); border:1px solid var(--line2); border-radius:5px; color:var(--acc);
  font-size:11px; cursor:pointer; transition:background .12s;
}
.gtree-ctl button:hover{ background:var(--acc); color:var(--acc-ink); }
.gtree-ctl .gtree-lvl{ font-size:10.5px; color:var(--tx2); font-family:var(--mono); min-width:16px; text-align:center; }
/* snaps flyout (toolrail) — matches the display sub-toolbars: a hover flyout of icon .fit buttons,
   accent when active. Sits to the RIGHT of the rail button (the rail is vertical). */
.snap-group{ position:relative; display:flex; }
.snap-fly{ position:absolute; top:50%; left:100%; transform:translateY(-50%); padding-left:7px; z-index:320;
  opacity:0; pointer-events:none; transition:opacity .12s; }
.snap-group:hover .snap-fly, .snap-group.open .snap-fly{ opacity:1; pointer-events:auto; }
.snap-fly .tb-fly-inner .fit.snap-sep{ margin-left:6px; box-shadow:inset 1px 0 0 var(--line); padding-left:8px; }
/* sub-section inside a settings group (e.g. Geometry ▸ Curves smoothness / Edge softening) */
.settings-subhead{ font-family:var(--disp); font-size:10px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--tx2); padding:6px 0 2px; margin-left:2px; }
.settings-subhead .settings-sub{ text-transform:none; }
.pm-opt{ cursor:pointer; } .pm-opt input{ accent-color:var(--acc); width:14px; height:14px; cursor:pointer; }
/* Play mode — show only viewport + Parameters (MolaUI) + camera gestures; reveal extras per checkbox.
   :not() overrides keep each container's natural display when its module is enabled. */
#play-exit{ display:none; position:fixed; top:10px; right:12px; z-index:320; padding:6px 12px;
  border:1px solid var(--acc); border-radius:8px; background:var(--acc); color:#fff; font:inherit;
  font-size:12px; font-weight:600; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.25); }
body.play-mode #play-exit{ display:inline-flex; }
body.play-mode #topbar, body.play-mode #statusbar{ display:none; }
body.play-mode:not(.pm-tools) #toolrail{ display:none; }
body.play-mode:not(.pm-vptools) #vp-topright{ display:none; }
/* Play mode: each chosen data section shows as its own independent floating card. The panel
   container goes transparent + chrome-less; the sections stack as separate glass cards. Hidden
   entirely when no section is chosen. */
body.play-mode:not(.pm-data-on) #panel-data{ display:none; }
body.play-mode.pm-data-on #panel-data{
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border:none; box-shadow:none; overflow:auto; gap:12px; padding:2px 2px 6px; animation:none;
}
body.play-mode #panel-data > .rail-toggle,
body.play-mode #panel-data > .rail-label,
body.play-mode #panel-data > .data-tools,
body.play-mode #panel-data > .psplit,
body.play-mode #panel-data > .panel-resize{ display:none !important; }
body.play-mode.pm-data-on #panel-data > .panel{
  flex:0 0 auto; height:var(--ph, 300px); min-height:120px; overflow:hidden; position:relative;
  border:1px solid var(--line2); border-radius:14px; border-bottom:1px solid var(--line2);
  background:rgba(var(--glass-rgb), var(--panel-alpha));
  backdrop-filter:saturate(1.3) blur(16px); -webkit-backdrop-filter:saturate(1.3) blur(16px);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
/* bottom drag-grip to resize a card's height manually (same idea as the full-mode splitters) */
.pm-grip{ display:none; }
body.play-mode.pm-data-on #panel-data > .panel > .pm-grip{
  display:block; position:absolute; left:0; right:0; bottom:0; height:9px; cursor:row-resize; z-index:9; }
body.play-mode.pm-data-on #panel-data > .panel > .pm-grip::after{
  content:''; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:34px; height:3px; border-radius:2px; background:var(--line2); transition:background .12s; }
body.play-mode.pm-data-on #panel-data > .panel > .pm-grip:hover::after,
body.play-mode.pm-data-on #panel-data > .panel > .pm-grip.dragging::after{ background:var(--acc); }
/* collapsed card = header only (click the card header to toggle); no resize grip while closed */
body.play-mode.pm-data-on #panel-data > .panel.closed{ height:auto !important; min-height:0; }
body.play-mode.pm-data-on #panel-data > .panel.closed > .pm-grip{ display:none; }
body.play-mode.pm-data-on:not(.pm-sec-layers)  #p-layers,
body.play-mode.pm-data-on:not(.pm-sec-states)  #p-states,
body.play-mode.pm-data-on:not(.pm-sec-cameras) #p-views,
body.play-mode.pm-data-on:not(.pm-sec-insp)    #p-insp,
body.play-mode.pm-data-on:not(.pm-sec-comp)    #p-sched{ display:none !important; }
.vopt-hint{ font-size:10px; color:var(--tx3); line-height:1.3; }
.vopt-head{ font-family:var(--disp); font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tx3); margin:3px 0 1px; }
.bg-pick{ display:flex; gap:6px; align-items:center; }
.bg-pick input[type=color]{ width:28px; height:20px; padding:0; border:1px solid var(--line2);
  border-radius:4px; background:none; cursor:pointer; }
.menu-list.vopts{ min-width:196px; }
.bg-pick.lens input[type=range]{ width:84px; accent-color:var(--acc); cursor:pointer; }
.bg-pick.lens b{ font-family:var(--disp); font-size:9.5px; color:var(--tx2); min-width:26px; text-align:right; }
.bg-pick input.num{ width:62px; background:var(--bg2); border:1px solid var(--line2); border-radius:6px;
  padding:4px 8px; color:var(--tx); font-family:var(--mono); font-size:11px; outline:none; }
.bg-pick input.num:focus{ border-color:var(--acc); }
.vbtn{ font-family:var(--disp); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border:1px solid var(--line2); border-radius:4px; background:var(--bg2);
  color:var(--tx2); cursor:pointer; }
.vbtn:hover:not(:disabled){ color:var(--acc); border-color:var(--acc); }
.vbtn:disabled{ opacity:.4; cursor:default; }
/* ----- saved camera views (thumbnail cards) ----- */
.cam-views{ display:flex; flex-direction:column; gap:6px; }
/* 3 gallery sizes (like States): rows (default) · small · large thumbs */
.cam-views.cam-small, .cam-views.cam-large{ display:grid; gap:8px; }
.cam-views.cam-small{ grid-template-columns:repeat(3, 1fr); }
.cam-views.cam-large{ grid-template-columns:repeat(2, 1fr); }
.cam-views.cam-small .cam-card, .cam-views.cam-large .cam-card{ position:relative; flex-direction:column; align-items:stretch; gap:4px; }
.cam-views.cam-small .cam-thumb, .cam-views.cam-large .cam-thumb{ width:100%; height:auto; aspect-ratio:16/10; }
.cam-views.cam-small .cam-name, .cam-views.cam-large .cam-name{ flex:none; }
.cam-views.cam-small .cam-del, .cam-views.cam-large .cam-del{ position:absolute; top:3px; right:3px; background:rgba(0,0,0,.4); color:#fff; }
.cam-views.cam-small .cam-del:hover, .cam-views.cam-large .cam-del:hover{ background:#e5484d; }
.cam-empty{ font-size:10.5px; color:var(--tx3); padding:4px 2px; line-height:1.4; }
.cam-card{ display:flex; align-items:center; gap:8px; padding:4px; border:1px solid var(--line2);
  border-radius:7px; background:var(--bg2); cursor:pointer; transition:border-color .1s, background .1s; }
.cam-card:hover{ border-color:var(--acc); background:var(--bg3); }
.cam-thumb{ width:54px; height:38px; border-radius:4px; object-fit:cover; flex:none;
  background:var(--bg3); cursor:pointer; }
.cam-thumb.empty{ display:block; }
.cam-name{ flex:1; font-size:11.5px; color:var(--tx); cursor:pointer; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.cam-del{ flex:none; width:20px; height:20px; border:none; border-radius:4px; background:transparent;
  color:var(--tx3); font-size:11px; cursor:pointer; line-height:1; }
.cam-del:hover{ color:#e5484d; background:var(--bg); }
#layer-chip{
  top:14px; left:330px; padding:6px 11px; gap:8px; font-size:10.5px; color:var(--tx2);
  cursor:default; user-select:none; z-index:7;
}
#layer-chip .sw{ width:9px; height:9px; border-radius:2px; flex:none; }
#layer-chip b{ color:var(--tx); font-weight:600; }

/* drop zone */
#dropzone{
  position:absolute; inset:0; z-index:7;
  display:flex; align-items:center; justify-content:center;
  background:var(--scrim); backdrop-filter:blur(3px);
  transition:opacity .25s;
}
#dropzone.hidden{ display:none; }
.dz-card{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  background:var(--bg1); border:1px solid var(--line2); border-radius:14px;
  padding:54px 72px; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  animation:dzup .5s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:.15s;
}
@keyframes dzup{ from{ opacity:0; transform:translateY(16px) scale(.97);} }
#dropzone.drag .dz-card{ border-color:var(--acc); box-shadow:0 0 0 3px rgba(47,107,255,.24), 0 30px 80px rgba(0,0,0,.3); }
.dz-card h2{
  font-family:var(--disp); font-weight:700; font-size:clamp(30px, 4.4vw, 46px);
  letter-spacing:.03em; line-height:1.04; text-transform:uppercase;
}
.dz-card h2 em{ font-style:normal; color:var(--acc); }
.dz-card p{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx3); }
.dz-or{ display:flex; gap:10px; }

input[type=file]{ display:none; }

/* ===================== floating glass panels ===================== */
/* Two glass panels float over the full-bleed viewport: Parameters (left) and the data
   stack — Layers / Inspector / Components / Notices — (right). Each collapses to a rail. */
.float-panel{
  position:absolute; top:14px; bottom:14px; width:302px; z-index:6;
  display:flex; flex-direction:column; min-height:0;
  background:rgba(var(--glass-rgb), var(--panel-alpha));
  backdrop-filter:saturate(1.3) blur(16px); -webkit-backdrop-filter:saturate(1.3) blur(16px);
  border:1px solid var(--line2); border-radius:16px; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.10);
}
.float-panel.left{ left:16px; width:var(--lpw, 302px); animation:slideinL .45s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:.08s; }
.float-panel.right{ right:16px; width:var(--rpw, 302px); animation:slideinR .45s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:.08s; }
/* width-resize grip on each panel's inner edge */
.panel-resize{ position:absolute; top:0; bottom:0; width:7px; z-index:8; cursor:ew-resize; }
.panel-resize.r{ right:0; } .panel-resize.l{ left:0; }
.panel-resize::after{ content:''; position:absolute; top:50%; transform:translateY(-50%); height:34px; width:3px; border-radius:2px; background:transparent; transition:background .12s; }
.panel-resize.r::after{ right:1px; } .panel-resize.l::after{ left:1px; }
.panel-resize:hover::after, .panel-resize.dragging::after{ background:var(--acc); }
.float-panel.railed .panel-resize{ display:none; }
@keyframes slideinR{ from{ opacity:0; transform:translateX(14px);} }
@keyframes slideinL{ from{ opacity:0; transform:translateX(-14px);} }
.float-panel > .panel:last-child{ border-bottom:none; }
/* whole-panel collapse to a vertical rail */
.rail-toggle{
  position:absolute; top:7px; right:7px; z-index:4; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:6px; color:var(--tx3); cursor:pointer;
}
.rail-toggle:hover{ color:var(--tx); background:var(--bg3); }
.rail-toggle svg{ width:13px; height:13px; transition:transform .18s; }
.float-panel.railed{ width:38px; }
.float-panel.railed > .panel, .float-panel.railed > .psplit, .float-panel.railed > .data-tools{ display:none; }
/* section manager (top of the data panel): show/hide sections */
.data-tools{ flex:none; display:flex; align-items:center; padding:8px 34px 2px 12px; }
.sec-mgr{ position:relative; }
.sec-mgr-btn{ display:flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--line2);
  border-radius:7px; padding:3px 9px; color:var(--tx2); font-family:var(--disp); font-size:10.5px;
  letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:color .1s, border-color .1s; }
.sec-mgr-btn:hover{ color:var(--acc); border-color:var(--acc); }
.sec-mgr-btn svg{ width:14px; height:14px; }
.sec-mgr .menu-list{ left:0; right:auto; min-width:178px; }
.sec-mgr-row{ display:flex; align-items:center; gap:6px; padding:5px 8px; cursor:default;
  border-radius:6px; font-size:12.5px; color:var(--tx); }
.sec-mgr-row:hover{ background:var(--bg3); }
.sec-mgr-row.dragging{ opacity:.5; }
.sec-mgr-row input{ accent-color:var(--acc); cursor:pointer; margin:0; }
.sec-mgr-lab{ display:flex; align-items:center; gap:8px; flex:1; cursor:pointer; }
.sec-grip{ cursor:grab; color:var(--tx3); font-size:12px; line-height:1; letter-spacing:-2px; user-select:none; }
.sec-grip:active{ cursor:grabbing; }
/* a section hidden via the manager is removed entirely (header included) */
.panel.hidden-sec{ display:none; }
.float-panel.railed .rail-toggle{ right:auto; left:50%; transform:translateX(-50%); }
.float-panel.railed .rail-toggle svg{ transform:rotate(180deg); }
.rail-label{
  display:none; position:absolute; inset:42px 0 10px; align-items:center; justify-content:center;
  writing-mode:vertical-rl; font-family:var(--disp); font-weight:700; font-size:13px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--tx2); pointer-events:none;
}
.float-panel.railed .rail-label{ display:flex; }
/* accent swatches (Settings → Visuals) */
.accent-sw{ gap:5px; }
.accent-sw button{
  width:17px; height:17px; padding:0; border-radius:5px; background:var(--sw); border:none;
  cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); opacity:.55;
  transition:opacity .12s, box-shadow .12s;
}
.accent-sw button:hover{ opacity:.85; }
.accent-sw button.active{ opacity:1; background:var(--sw); box-shadow:0 0 0 2px var(--bg1), 0 0 0 3.5px var(--tx3); }
.accent-add{ width:17px; height:17px; border-radius:5px; cursor:pointer; position:relative; display:flex;
  align-items:center; justify-content:center; line-height:1; opacity:.55;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); transition:opacity .12s, box-shadow .12s; }
.accent-add span{ font-size:13px; font-weight:700; color:#fff; mix-blend-mode:difference; pointer-events:none; }
.accent-add:hover{ opacity:.85; }
.accent-add.active{ opacity:1; box-shadow:0 0 0 2px var(--bg1), 0 0 0 3.5px var(--tx3); }
.accent-add input[type=color]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none; padding:0; cursor:pointer; }
.panel{
  display:flex; flex-direction:column; min-height:44px; border-bottom:1px solid var(--line);
  flex:var(--g, 2) 1 0;
}
.panel:last-child{ border-bottom:none; }
.panel.closed{ flex:0 0 auto !important; min-height:0; }
.panel.closed .pb, .panel.closed .panel-foot{ display:none; }
/* drag divider between panels */
.psplit{ flex:none; height:6px; margin:-3px 0; cursor:row-resize; position:relative; z-index:5; }
.psplit::after{
  content:''; position:absolute; left:8px; right:8px; top:50%; height:1px;
  background:transparent; transition:background .12s;
}
.psplit:hover::after, .psplit.dragging::after{ background:var(--acc); }
.psplit.hidden{ display:none; }
body.resizing-v{ cursor:row-resize !important; user-select:none; }
body.resizing-v *{ cursor:row-resize !important; }
/* sidebar width grip */
#sidebar-grip{
  position:absolute; left:0; top:0; width:7px; height:100%; cursor:col-resize; z-index:20;
}
#sidebar-grip::after{
  content:''; position:absolute; left:0; top:0; width:1px; height:100%;
  background:transparent; transition:background .12s;
}
#sidebar-grip:hover::after, #sidebar-grip.dragging::after{ background:var(--acc); }
body.resizing-h{ cursor:col-resize !important; user-select:none; }
body.resizing-h *{ cursor:col-resize !important; }
.ph{
  flex:none; height:44px; display:flex; align-items:center; gap:10px;
  padding:0 16px; cursor:pointer; user-select:none;
}
.ph:hover h3{ color:var(--tx); }
.ph .caret{ width:8px; height:8px; color:var(--tx3); transition:transform .15s; flex:none; }
.panel.closed .ph .caret{ transform:rotate(-90deg); }
.ph h3{
  font-family:var(--disp); font-weight:600; font-size:13.5px; letter-spacing:.01em;
  color:var(--tx); transition:color .12s;
}
.ph .count{
  margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--tx3);
  background:var(--bg3); border-radius:7px; padding:1px 8px;
}
.pb{ flex:1 1 0; min-height:0; }
.scroll{ overflow-y:auto; min-height:0; }
.scroll::-webkit-scrollbar{ width:8px; }
.scroll::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:4px; }
.scroll::-webkit-scrollbar-thumb:hover{ background:var(--tx3); }
.scroll::-webkit-scrollbar-track{ background:transparent; }
.empty-note{ padding:4px 12px 12px; font-size:11px; color:var(--tx3); line-height:1.5; }
/* States panel: save button in header, version rows with thumbnails */
.ph-act{ margin-left:8px; font-family:var(--disp); font-size:10px; font-weight:600; color:var(--acc);
  background:var(--bg2); border:1px solid var(--line2); border-radius:6px; padding:2px 8px; cursor:pointer; flex:none; }
.ph-act:hover{ background:var(--bg3); }
.state-row{ display:flex; align-items:center; gap:9px; padding:6px 10px; border-radius:8px; cursor:pointer; }
.state-row:hover{ background:var(--bg2); }
.state-row.active{ background:var(--bg3); }
.state-row .thumb{ width:46px; height:30px; flex:none; border-radius:5px; background:var(--bg3); object-fit:cover; border:1px solid var(--line); }
.state-row .st-main{ flex:1; min-width:0; }
.state-row .st-name{ font-size:12px; color:var(--tx); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.state-row .st-name[contenteditable]{ outline:none; }
.state-row .st-name[contenteditable]:focus{ box-shadow:inset 0 -1.5px 0 var(--acc); }
.state-row .st-meta{ font-size:9px; color:var(--tx3); font-family:var(--mono); }
.state-row .st-acts{ display:flex; gap:4px; opacity:0; transition:opacity .12s; flex:none; }
.state-row:hover .st-acts{ opacity:1; }
.state-row .st-acts button{ font-size:9px; font-weight:700; color:var(--tx2); background:transparent;
  border:1px solid var(--line2); border-radius:5px; padding:2px 5px; cursor:pointer; }
.state-row .st-acts button:hover{ color:var(--acc); border-color:var(--acc); }
.states-foot button{ flex:1; }
/* States view switch: 3 explicit icon buttons (rows / small / large) in the section header */
.states-views{ display:inline-flex; gap:1px; margin-left:auto; }
.states-views button{ width:24px; height:21px; display:grid; place-items:center; padding:0; cursor:pointer;
  border:none; background:transparent; color:var(--tx3); border-radius:5px; }
.states-views button svg{ width:13px; height:13px; }
.states-views button:hover{ color:var(--tx); background:var(--bg3); }
.states-views button.active{ color:var(--acc); background:var(--bg3); }
.states-save-menu{ margin-left:8px; }
.states-save-menu .menu-list{ right:0; left:auto; top:calc(100% + 4px); min-width:212px; z-index:60; }
/* layer popover: rename (name above) · colour · select objects */
.layer-pop{ position:fixed; z-index:200; width:228px; background:var(--bg1); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.30); padding:10px; display:flex; flex-direction:column; gap:8px; }
.layer-pop .lp-row{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--tx2); font-family:var(--disp); }
.layer-pop .lp-row > span{ width:46px; flex:none; }
.layer-pop input[type=text]{ flex:1; min-width:0; background:var(--bg2); border:1px solid var(--line); border-radius:6px;
  color:var(--tx); font-size:12px; padding:5px 7px; font-family:var(--disp); }
.layer-pop input[type=text]:focus{ outline:none; border-color:var(--acc); }
.layer-pop input[type=color]{ flex:1; height:26px; border:1px solid var(--line); border-radius:6px; background:var(--bg2); cursor:pointer; padding:2px; }
.layer-pop .lp-btn{ background:var(--bg2); border:1px solid var(--line); border-radius:6px; color:var(--tx2);
  font-size:11px; font-weight:600; padding:6px; cursor:pointer; font-family:var(--disp); }
.layer-pop .lp-btn:hover{ color:var(--acc); border-color:var(--acc); }
/* modal dialog (export settings, etc.) */
.modal-back{ position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.32); display:flex; align-items:center; justify-content:center; }
.modal{ width:344px; max-width:92vw; background:var(--bg1); border:1px solid var(--line2); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.42); overflow:hidden; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); }
.modal-x{ background:none; border:none; color:var(--tx3); font-size:14px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:5px; }
.modal-x:hover{ color:var(--tx); background:var(--bg2); }
/* demo gallery */
.gallery-btn{ background:var(--acc); color:#fff; border-color:var(--acc); font-weight:600; }
.gallery-btn:hover{ filter:brightness(1.08); }
.gallery-modal{ width:680px; max-width:92vw; }
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; padding:14px 16px; max-height:62vh; overflow:auto; }
.gallery-card{ border:1px solid var(--line); border-radius:9px; padding:12px; cursor:pointer; background:var(--bg2); transition:border-color .12s, background .12s; }
.gallery-card:hover{ border-color:var(--acc); background:var(--bg3); }
.gallery-card .g-name{ font-weight:600; font-size:13px; color:var(--tx); }
.gallery-card .g-desc{ font-size:11.5px; color:var(--tx3); margin-top:3px; line-height:1.35; }
.modal-head h3{ font-size:14px; font-weight:700; color:var(--tx); margin:0; }
.modal-x{ background:none; border:none; color:var(--tx3); cursor:pointer; font-size:13px; }
.modal-x:hover{ color:var(--tx); }
.modal-body{ padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }
.modal-foot button{ font-size:12px; padding:7px 14px; border-radius:8px; cursor:pointer; border:1px solid var(--line2); background:var(--bg2); color:var(--tx2); font-family:var(--disp); }
.modal-foot button:hover{ color:var(--tx); }
.modal-foot .primary{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); }
/* MD Slider 2-D pad (params panel) */
.md-row .md-pad{ position:relative; width:100%; aspect-ratio:1/1; max-width:160px; margin-top:4px;
  border:1px solid var(--line2); border-radius:8px; background:var(--bg2);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:25% 25%; cursor:crosshair; touch-action:none; }
.md-row .md-dot{ position:absolute; width:12px; height:12px; border-radius:50%; background:var(--acc);
  box-shadow:0 0 0 2px var(--bg1); transform:translate(-50%,-50%); pointer-events:none; }
.md-row .md-val{ font-family:var(--mono); font-size:10.5px; color:var(--tx3); margin-top:3px; display:block; }
/* Graph Mapper editor (params panel) */
.graph-row .gm-canvas{ width:100%; height:auto; border:1px solid var(--line2); border-radius:8px;
  margin-top:4px; cursor:crosshair; touch-action:none; display:block; }
/* About / Help modal */
.about-body{ font-size:12.5px; color:var(--tx2); line-height:1.5; }
.about-logo{ font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.16em; color:var(--tx); }
.about-sub{ font-family:var(--disp); font-size:12px; letter-spacing:.05em; color:var(--tx3); margin-bottom:8px; }
.about-meta{ margin-top:10px; color:var(--tx3); font-size:11.5px; }
.help-list{ margin:6px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
/* project library modal */
.lib-modal{ width:680px; max-width:94vw; display:flex; flex-direction:column; max-height:88vh; }
.lib-modal .modal-body{ flex:1; min-height:0; }
.lib-views{ display:flex; gap:2px; margin-left:auto; margin-right:10px; }
.lib-views button{ width:26px; height:24px; display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid transparent; border-radius:6px; color:var(--tx3); cursor:pointer; }
.lib-views button svg{ width:15px; height:15px; }
.lib-views button:hover{ color:var(--tx); background:var(--bg3); }
.lib-views button.active{ color:var(--acc); background:var(--bg3); }
.lib-grid{ display:grid; gap:10px; max-height:62vh; overflow:auto; align-content:start; }
.lib-grid.lib-large{ grid-template-columns:repeat(2, 1fr); }
.lib-grid.lib-small{ grid-template-columns:repeat(3, 1fr); }
.lib-grid.lib-rows{ grid-template-columns:1fr; }
.lib-empty{ grid-column:1 / -1; color:var(--tx3); font-size:12.5px; padding:18px 4px; text-align:center; }
.lib-card{ position:relative; display:flex; flex-direction:column; border:1px solid var(--line2);
  border-radius:9px; overflow:hidden; background:var(--bg2); cursor:pointer; transition:border-color .1s; }
.lib-card:hover{ border-color:var(--acc); }
.lib-card.sel{ border-color:var(--acc); box-shadow:inset 0 0 0 2px var(--acc); }
.lib-card.current .lib-name::after{ content:' ·current'; color:var(--acc); font-size:10px; }
.lib-thumb{ width:100%; height:120px; object-fit:cover; background:var(--bg3); display:block; }
.lib-grid.lib-small .lib-thumb{ height:82px; }
.lib-meta{ display:flex; flex-direction:column; gap:1px; padding:7px 9px; }
.lib-name{ font-size:12.5px; color:var(--tx); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-when{ font-size:10px; color:var(--tx3); font-family:var(--mono); }
/* rows view: thumb left, meta right, single line */
.lib-grid.lib-rows .lib-card{ flex-direction:row; align-items:center; }
.lib-grid.lib-rows .lib-thumb{ width:64px; height:44px; flex:none; }
.lib-grid.lib-rows .lib-meta{ flex:1; }
.lib-del{ position:absolute; top:6px; right:6px; width:22px; height:22px; border:none; border-radius:6px;
  background:rgba(0,0,0,.42); color:#fff; font-size:11px; cursor:pointer; opacity:0; transition:opacity .1s; }
.lib-card:hover .lib-del{ opacity:1; }
.lib-del:hover{ background:#e5484d; }
/* info banner for the selected project */
.lib-banner{ border-top:1px solid var(--line); padding:10px 16px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.lib-empty-banner{ color:var(--tx3); font-size:11.5px; }
.lib-binfo{ display:flex; flex-direction:column; gap:2px; min-width:160px; }
.lib-brow{ display:flex; align-items:baseline; gap:10px; }
.lib-brow b{ font-size:13px; color:var(--tx); }
.lib-bwhen{ font-size:10px; color:var(--tx3); font-family:var(--mono); }
.lib-bdef{ font-size:11px; color:var(--tx3); font-family:var(--mono); }
.lib-bfields{ display:flex; gap:8px; flex:1; min-width:200px; }
.lib-bfields input{ flex:1; background:var(--bg2); border:1px solid var(--line2); border-radius:6px;
  padding:5px 9px; color:var(--tx); font-size:12px; outline:none; }
.lib-bfields input:focus{ border-color:var(--acc); }
.exd-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:var(--tx2); }
.exd-note{ font-size:12px; color:var(--tx3); }
.exd-seg button{ font-size:10px; }
.ph-ico{ padding:2px 6px; }
/* 3 view sizes: rows (default) · small thumbs · large thumbs */
/* pack cards to the top at content height — without this, grid's default align-content:stretch
   balloons each card (and the active-row highlight) to fill the panel, overlapping the next section */
#states-list.states-small, #states-list.states-large{ display:grid; gap:8px; padding:6px 10px;
  align-content:start; align-items:start; grid-auto-rows:min-content; }
#states-list.states-small{ grid-template-columns:repeat(3, 1fr); }
#states-list.states-large{ grid-template-columns:repeat(2, 1fr); }
#states-list.states-small .state-row, #states-list.states-large .state-row{ position:relative; flex-direction:column; align-items:stretch; gap:4px; padding:6px; }
#states-list.states-small .thumb, #states-list.states-large .thumb{ width:100%; }
#states-list.states-small .thumb{ height:52px; }
#states-list.states-large .thumb{ height:104px; }
#states-list.states-small .st-meta, #states-list.states-large .st-meta{ display:none; }
#states-list.states-small .st-name, #states-list.states-large .st-name{ font-size:11px; text-align:center; }
#states-list.states-small .st-acts, #states-list.states-large .st-acts{ position:absolute; top:8px; right:8px; }

/* sliders — comfy reference style: roomy rows, plain accent value, native accent-filled track */
/* Parameter slider: title + editable value (row 1), range (row 2). "Comfy" by default; "Compact"
   collapses to one line. Value is an editable number box. */
.slider-row{ display:grid; grid-template-columns:1fr auto; column-gap:10px; align-items:baseline; padding:11px 16px 7px; }
.slider-row .t{ grid-column:1; grid-row:1; font-weight:500; color:var(--tx2); font-size:13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* value reads as plain accent text (as before the fix) but IS an editable number box; a faint
   accent underline appears only on focus so it never looks like a chunky input */
.slider-row .v{ grid-column:2; grid-row:1; justify-self:end; width:62px; text-align:right;
  color:var(--acc); font-weight:700; font-size:13px; font-family:var(--mono);
  background:transparent; border:none; border-radius:0; padding:0; -moz-appearance:textfield; }
.slider-row .v:focus{ outline:none; box-shadow:inset 0 -1.5px 0 var(--acc2); }
.slider-row .v::-webkit-inner-spin-button, .slider-row .v::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.slider-row input[type=range]{ grid-column:1/3; grid-row:2; width:100%; margin-top:9px; accent-color:var(--acc); height:18px; cursor:ew-resize; }
input[type=range]{ accent-color:var(--acc); cursor:ew-resize; }

/* Compact density — title · slider · value on one line */
.density-compact .slider-row{ display:flex; align-items:center; gap:8px; padding:5px 16px; }
.density-compact .slider-row .t{ flex:1 1 auto; min-width:0; max-width:120px; }   /* title shrinks first */
.density-compact .slider-row input[type=range]{ flex:1 1 0; min-width:0; width:auto; margin:0; }  /* range shrinks; never pushes the value off */
.density-compact .slider-row .v{ flex:0 0 auto; width:auto; min-width:34px; max-width:64px; text-align:right; }

/* Slider style — Bold: a filled bar (fill % set per-slider via --fill); Light: thin minimal */
.slider-bold .slider-row input[type=range]{ -webkit-appearance:none; appearance:none; height:13px; border-radius:7px;
  background:linear-gradient(to right, var(--acc) var(--fill,50%), var(--line2) var(--fill,50%)); }
.slider-bold .slider-row input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:6px; height:13px; border-radius:2px; background:var(--bg1); box-shadow:0 0 0 1.5px var(--acc); cursor:ew-resize; }
.slider-bold .slider-row input[type=range]::-moz-range-thumb{ width:6px; height:13px; border:none; border-radius:2px; background:var(--bg1); box-shadow:0 0 0 1.5px var(--acc); }
/* Light = ultra-minimal: a hairline track + a slim vertical lever thumb */
.slider-light .slider-row input[type=range]{ -webkit-appearance:none; appearance:none; height:2px; border-radius:1px;
  background:var(--line2); accent-color:var(--acc); }
.slider-light .slider-row input[type=range]::-webkit-slider-runnable-track{ height:2px; border-radius:1px; background:var(--line2); }
.slider-light .slider-row input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:3px; height:14px; border-radius:1.5px; background:var(--acc); margin-top:-6px; border:none; cursor:ew-resize; }
.slider-light .slider-row input[type=range]::-moz-range-track{ height:2px; border-radius:1px; background:var(--line2); }
.slider-light .slider-row input[type=range]::-moz-range-thumb{ width:3px; height:14px; border-radius:1.5px; background:var(--acc); border:none; }
.slider-light .slider-row .t{ font-weight:400; }
.slider-light .slider-row .v{ font-weight:500; }

/* non-slider live inputs: toggles, value lists, editable panels */
.ctl-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 16px 5px; font-size:13px; }
.ctl-row b{ font-weight:500; color:var(--tx2); white-space:nowrap; }
.ctl-row input[type=checkbox]{ accent-color:var(--acc); width:14px; height:14px; cursor:pointer; }
.ctl-row select, .ctl-row input[type=text]{
  flex:1; min-width:0; max-width:170px; font-family:var(--mono); font-size:11px; padding:4px 7px;
  background:var(--bg2); border:1px solid var(--line); border-radius:5px; color:var(--tx);
}
.ctl-row select:focus, .ctl-row input[type=text]:focus{ border-color:var(--acc); outline:none; }
.ctl-row.ctl-col{ flex-direction:column; align-items:stretch; gap:4px; }
.ctl-row.ctl-col input[type=text]{ max-width:none; }
/* parameters sub-section header (e.g. Colors) */
.param-group{
  margin:8px 12px 2px; padding-top:8px; border-top:1px solid var(--line);
  font-family:var(--disp); font-weight:600; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tx3);
}
.ctl-row input[type=color]{
  width:40px; height:22px; padding:0; border:1px solid var(--line); border-radius:5px;
  background:var(--bg2); cursor:pointer; flex:none;
}

/* MolaUI tab strip ([CONFIG][TABS]) + "#t" toolbar zone */
.mola-tabs{ display:flex; gap:2px; flex-wrap:wrap; padding:9px 12px 0; border-bottom:1px solid var(--line); }
.mola-tab{ padding:6px 13px; border:none; background:none; cursor:pointer; font:inherit;
  font-family:var(--disp); font-size:12px; font-weight:600; color:var(--tx3);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .12s; }
.mola-tab:hover{ color:var(--tx2); }
.mola-tab.on{ color:var(--tx); border-bottom-color:var(--acc); }
.mola-toolzone{ padding:9px 16px; border-bottom:1px solid var(--line); }
.mola-toolzone-lab{ font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx3); margin-bottom:7px; }
.mola-toolzone .mola-toolbar{ padding:0; }

/* MolaUI "#" cards in the Parameters panel (group-name-driven sections) */
.mola-card{ border-top:1px solid var(--line); }
.mola-card:first-child{ border-top:none; }
.mola-card-head{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:7px;
  cursor:pointer; user-select:none; padding:13px 16px 11px;
  font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.005em; color:var(--tx);
}
/* inset hairline under the title (margin off the panel edges, not edge-to-edge) */
.mola-card-head::after{ content:''; position:absolute; left:16px; right:16px; bottom:0;
  height:1.5px; background:var(--line2); }
.mola-card-head:hover{ background:var(--bg2); }
.mola-card-head .ttl{ flex:1 1 auto; min-width:0; }
.mola-card-head .car{ flex:none; font-size:10px; color:var(--tx3); transition:transform .12s ease; }
.mola-card-head.collapsed .car{ transform:rotate(-90deg); }
.mola-card-body{ padding:4px 0 9px; }

/* text panels: [H1]/[H2]/[H3] headers, [BODY]/plain static text (scribbles also = H1) */
.mola-h1{ padding:12px 16px 4px; font-family:var(--disp); font-weight:700; font-size:18px;
  letter-spacing:.005em; line-height:1.2; color:var(--tx); }
.mola-h2{ padding:10px 16px 3px; font-family:var(--disp); font-weight:600; font-size:15px; color:var(--tx); }
.mola-h3{ padding:9px 16px 3px; font-family:var(--disp); font-weight:600; font-size:13px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--tx2); }
.mola-body{ padding:5px 16px 6px; font-size:12.5px; line-height:1.45; color:var(--tx2); white-space:pre-wrap; }
.mola-input-row textarea{
  width:100%; resize:vertical; min-height:58px; padding:7px 9px; font:inherit; font-size:13px;
  border:1px solid var(--line); border-radius:6px; background:var(--bg2); color:var(--tx);
}
.mola-input-row textarea:focus{ border-color:var(--acc); outline:none; }
.mola-btn-row{ padding:6px 16px; }
.mola-btn{
  width:100%; padding:7px 12px; border:1px solid var(--line); border-radius:6px;
  background:var(--bg2); color:var(--tx); font:inherit; font-size:13px; font-weight:500;
  cursor:pointer;
}
.mola-btn:hover{ border-color:var(--acc); background:var(--bg3); }
.mola-btn:active{ background:var(--acc); color:#fff; border-color:var(--acc); }
.mola-btn.on{ background:var(--acc); color:#fff; border-color:var(--acc); }   /* toolbar toggle pressed */

/* small overwrite/save-a-copy choice modal */
.choice-modal{ max-width:420px; padding:18px 20px 16px; }
.choice-modal .modal-head{ margin-bottom:6px; }
.choice-msg{ font-size:13px; line-height:1.5; color:var(--tx2); margin-bottom:16px; }
.choice-btns{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.choice-btn{ padding:7px 14px; border:1px solid var(--line2); border-radius:7px; background:var(--bg2);
  color:var(--tx); font:inherit; font-size:13px; font-weight:500; cursor:pointer; }
.choice-btn:hover{ background:var(--bg3); border-color:var(--acc); }
.choice-btn.primary{ background:var(--acc); border-color:var(--acc); color:#fff; }
.choice-btn.primary:hover{ filter:brightness(1.06); }

/* "*" sub-group → a card-toolbar row of square buttons/toggles (icons later) */
.mola-toolbar{ display:flex; flex-wrap:wrap; gap:6px; padding:6px 16px; }
.mola-toolbar .mola-tb-item{ flex:0 0 auto; }
.mola-btn-sm{ width:40px; height:40px; padding:0; font-size:12px; display:inline-flex;
  align-items:center; justify-content:center; text-align:center; line-height:1.05; overflow:hidden; }
/* [FLEX]/[WRAP] on the "*" group → items stretch to fill the card width */
.mola-toolbar-flex .mola-tb-item{ flex:1 1 auto; }
.mola-toolbar-flex .mola-btn-sm{ width:100%; }

/* "!" sub-group → a pill switch (replaces the checkbox for that toggle) */
.mola-pill{ position:relative; width:38px; height:21px; flex:none; padding:0; cursor:pointer;
  border:1px solid var(--line); border-radius:11px; background:var(--bg3); transition:background .15s, border-color .15s; }
.mola-pill::after{ content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:var(--tx2); transition:transform .15s ease, background .15s; }
.mola-pill.on{ background:var(--acc); border-color:var(--acc); }
.mola-pill.on::after{ transform:translateX(17px); background:#fff; }

/* layers */
.layer-row{
  display:flex; align-items:center; gap:10px; height:34px; padding:0 16px;
  cursor:pointer; border-left:2px solid transparent; font-size:13px;
}
.layer-row:hover{ background:var(--bg2); }
.layer-row.current{ border-left-color:var(--acc); background:var(--bg2); }
.layer-row.current .name{ color:var(--tx); font-weight:600; }
.layer-row.sel{ background:var(--bg3); box-shadow:inset 2px 0 0 var(--sel); }
.layer-row .vis, .layer-row .lock, .layer-row .sel-objs, .layer-row .imp-layer{
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--tx3); cursor:pointer; border-radius:4px; flex:none;
}
.layer-row .vis:hover, .layer-row .lock:hover, .layer-row .sel-objs:hover, .layer-row .imp-layer:hover{ color:var(--tx); background:var(--bg3); }
.layer-row .imp-layer{ opacity:0; transition:opacity .12s; }
.layer-row:hover .imp-layer{ opacity:1; }
.layer-row .imp-layer:hover{ color:var(--acc); }
.layer-row .imp-layer svg{ width:13px; height:13px; }
.layer-row .vis.on{ color:var(--tx2); }
.layer-row .lock.on{ color:var(--acc); }
.layer-row .sel-objs{ opacity:0; transition:opacity .12s; }   /* reveal on row hover (like States' actions) */
.layer-row:hover .sel-objs{ opacity:1; }
.layer-row .sel-objs:hover{ color:var(--acc); }
.layer-row .vis svg, .layer-row .lock svg, .layer-row .sel-objs svg{ width:13px; height:13px; }
.layer-row .del-layer{ width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--tx3); cursor:pointer; border-radius:4px; flex:none;
  font-size:11px; opacity:0; transition:opacity .12s; }
.layer-row:hover .del-layer{ opacity:1; }
.layer-row .del-layer:hover{ color:#e5484d; background:var(--bg3); }
.layer-row .sw{
  position:relative; width:12px; height:12px; border-radius:3px; flex:none; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.layer-pop select{ flex:1; background:var(--bg2); border:1px solid var(--line); border-radius:6px; color:var(--tx);
  font-size:12px; padding:4px 6px; font-family:var(--disp); cursor:pointer; }
.layer-pop input[type=range]{ flex:1; }
.layer-pop b{ font-family:var(--mono); font-size:10px; color:var(--tx2); width:34px; text-align:right; }
.layer-row .name{ flex:1; min-width:0; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layer-row .lc{ color:var(--tx3); font-size:10px; flex:none; }
/* "fed" badge — this layer is read by the loaded definition's reference components */
.layer-row .pipe-badge{ flex:none; font-family:var(--disp); font-size:8px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--acc-ink); background:var(--acc);
  padding:1px 5px; border-radius:6px; }
.panel-foot{ display:flex; gap:6px; padding:7px 12px 10px; flex:none; }
.panel-foot input{
  flex:1; min-width:0; font-family:var(--mono); font-size:11px; padding:5px 8px;
  background:var(--bg2); border:1px solid var(--line); border-radius:5px; color:var(--tx);
}
.panel-foot input::placeholder{ color:var(--tx3); }
.panel-foot input:focus{ border-color:var(--acc); outline:none; }
.panel-foot button{
  font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--bg2); color:var(--tx2); border:1px solid var(--line); border-radius:5px;
  padding:0 10px; cursor:pointer; transition:color .12s, border-color .12s;
}
.panel-foot button:hover{ color:var(--acc); border-color:var(--acc); }

/* inspector */
.insp-field{ padding:6px 12px 2px; }
.insp-field label{
  display:block; font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx3); margin-bottom:4px; font-family:var(--disp); font-weight:600;
}
.insp-field input, .insp-field select{
  width:100%; font-family:var(--mono); font-size:11.5px; padding:6px 8px;
  background:var(--bg2); border:1px solid var(--line); border-radius:5px; color:var(--tx);
}
.insp-field input:focus, .insp-field select:focus{ border-color:var(--acc); outline:none; }
.insp-field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--tx3) 50%), linear-gradient(135deg, var(--tx3) 50%, transparent 50%); background-position:calc(100% - 14px) 13px, calc(100% - 10px) 13px; background-size:4px 4px; background-repeat:no-repeat; }
.insp-attrs{ padding:8px 12px 2px; }
.insp-attrs .ah{
  font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx3);
  font-family:var(--disp); font-weight:600;
  margin-bottom:5px; display:flex; justify-content:space-between; align-items:center;
}
.insp-attrs .ah button{
  background:none; border:1px solid var(--line); border-radius:4px; color:var(--tx2);
  width:18px; height:18px; font-size:12px; line-height:1; cursor:pointer;
}
.insp-attrs .ah button:hover{ color:var(--acc); border-color:var(--acc); }
.attr-row{ display:grid; grid-template-columns:1fr 1fr 22px; gap:4px; margin-bottom:4px; align-items:center; }
.attr-row input{
  font-family:var(--mono); font-size:11px; padding:4px 7px; min-width:0;
  background:var(--bg2); border:1px solid var(--line); border-radius:4px; color:var(--tx);
}
.attr-row input:focus{ border-color:var(--acc); outline:none; }
.attr-row .del{
  background:none; border:none; color:var(--tx3); font-size:14px; line-height:1;
  cursor:pointer; border-radius:4px; height:22px;
}
.attr-row .del:hover{ color:var(--err); background:var(--bg3); }
.insp-match{ padding:4px 12px 6px; font-size:10.5px; color:var(--tx3); line-height:1.5; }
.insp-match b{ color:var(--acc); }
.insp-actions{ padding:6px 12px 12px; display:flex; gap:6px; }
.insp-actions .danger{
  font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:transparent; color:var(--err); border:1px solid rgba(255,110,97,.4); border-radius:5px;
  padding:6px 12px; cursor:pointer; transition:background .12s, color .12s;
}
.insp-actions .danger:hover{ background:var(--err); color:#1A0805; border-color:var(--err); }

/* component schedule */
.row{
  display:flex; align-items:center; gap:9px; padding:4px 12px; font-size:11px;
}
.row:hover{ background:var(--bg2); }
.row .idx{ color:var(--tx3); font-size:10px; flex:none; width:18px; }
/* schedule section headers: Flow / By type, with category sub-headers (collapsible) */
.sched-group{ display:flex; align-items:baseline; gap:6px; cursor:pointer; user-select:none;
  margin:9px 12px 3px; padding-top:8px; border-top:1px solid var(--line);
  font-family:var(--disp); font-weight:700; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--acc); }
.sched-group:first-child{ border-top:none; padding-top:2px; margin-top:2px; }
.sched-group:hover, .sched-sub:hover{ color:var(--acc2); }
.sched-sub{ display:flex; align-items:baseline; gap:6px; cursor:pointer; user-select:none;
  margin:5px 12px 1px; font-family:var(--disp); font-weight:600; font-size:8.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx3); }
.sched-caret{ font-size:8px; transition:transform .12s; display:inline-block; }
.collapsed .sched-caret{ transform:rotate(-90deg); }
.row .eye-spacer{ pointer-events:none; opacity:0; }   /* keep alignment for non-visual rows */
.row{ align-items:baseline; cursor:default; }
/* shift/ctrl multi-select in the Components list shouldn't drag-select the row text */
#sched-list{ -webkit-user-select:none; user-select:none; }
.row.sel{ background:var(--bg3); box-shadow:inset 2px 0 0 var(--acc); }
.row.sel .eye{ opacity:1; }   /* show the eye on selected rows so it can be clicked for the group */
.row .r-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; overflow:hidden; }
.row .r-line1{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .type{ color:var(--tx); }
.row .nick{ color:var(--tx3); font-size:10.5px; margin-left:6px; }
.row .cat{ font-size:9px; color:var(--tx3); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .cat:empty{ display:none; }
.row .eye{ flex:none; width:16px; height:16px; padding:0; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--tx3); align-self:center;
  opacity:0; transition:opacity .12s, color .12s; }
.row:hover .eye{ opacity:1; }
.row .eye.off{ opacity:1; color:var(--acc); }   /* hidden component: always shown, accent */
.row .eye:hover{ color:var(--tx); }
.row .eye svg{ width:14px; height:14px; }
.row .st{ flex:none; font-size:9px; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:5px; }
.row .st::before{ content:""; width:5px; height:5px; border-radius:99px; }
.st.js{ color:var(--tx2); } .st.js::before{ background:var(--acc); }
.st.src{ color:var(--tx2); } .st.src::before{ background:var(--sel); }
.st.pipe{ color:var(--sel); } .st.pipe::before{ background:var(--sel); box-shadow:0 0 5px var(--sel); }
.st.pass{ color:var(--tx3); } .st.pass::before{ background:var(--tx3); }
.st.plugin{ color:var(--warn); } .st.plugin::before{ background:var(--warn); }

/* notices */
.notice{
  padding:6px 12px; font-size:10.5px; color:var(--warn); display:flex; gap:8px; line-height:1.45;
}
.notice::before{ content:"⚠"; flex:none; }

/* ============================ status bar ============================ */
#statusbar{
  flex:none; height:27px; display:flex; align-items:center; gap:18px; position:relative;
  background:var(--bg1); border-top:1px solid var(--line); padding:0 12px;
  font-size:10.5px; color:var(--tx3);
}
#sb-hint{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.04em; }
.sb-item{ flex:none; display:flex; align-items:center; gap:6px; white-space:nowrap; }
/* selection readout: centered in the bar, emphasised */
#sb-sel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-weight:700; font-size:11px; letter-spacing:.02em; color:var(--tx); pointer-events:none; }
#sb-coords{ min-width:130px; color:var(--tx2); }
#sb-snap{
  cursor:pointer; user-select:none; border:1px solid var(--line); border-radius:4px;
  padding:1px 8px; letter-spacing:.08em; transition:color .12s, border-color .12s;
}
#sb-snap.on{ color:var(--acc); border-color:rgba(47,107,255,.45); }
#sb-mode{ color:var(--tx2); letter-spacing:.1em; font-weight:600; }

/* transient toast notifications (errors + confirmations) */
#toasts{
  position:fixed; right:16px; bottom:40px; z-index:200;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none;
}
.toast{
  pointer-events:auto; max-width:340px; padding:9px 12px; border-radius:7px;
  font:500 12.5px/1.35 var(--mono); color:var(--tx); background:var(--bg2);
  border:1px solid var(--line2); box-shadow:0 6px 22px rgba(0,0,0,.28);
  display:flex; gap:9px; align-items:flex-start;
  transform:translateY(8px); opacity:0; transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s;
}
.toast.show{ transform:translateY(0); opacity:1; }
.toast::before{ content:""; flex:0 0 4px; align-self:stretch; border-radius:2px; background:var(--tx3); }
.toast.error::before{ background:var(--err); }
.toast.warn::before{ background:var(--warn); }
.toast.ok::before{ background:var(--acc); }
.toast .tx{ flex:1; word-break:break-word; }
.toast .x{ cursor:pointer; color:var(--tx3); flex:0 0 auto; padding:0 2px; }
.toast .x:hover{ color:var(--tx); }
.toast .btn-link{
  flex:0 0 auto; cursor:pointer; background:none; border:none; padding:0 2px;
  font:inherit; font-weight:700; color:var(--acc); white-space:nowrap;
}
.toast .btn-link:hover{ color:var(--acc2); text-decoration:underline; }
#sb-saved{ color:var(--tx2); }
#sched-list .row.failed{ background:rgba(255,110,97,.13); box-shadow:inset 2px 0 0 var(--err); }
.btn.icon{ padding:5px 7px; display:inline-flex; align-items:center; }
.btn.icon svg{ width:15px; height:15px; display:block; }
.btn.icon:disabled{ opacity:.35; cursor:default; }
.tb-div{ width:1px; align-self:stretch; margin:4px 4px; background:var(--line); }

/* window (marquee) selection box */
#marquee{ position:fixed; z-index:60; pointer-events:none; border:1px dashed var(--sel);
  background:color-mix(in srgb, var(--sel) 14%, transparent); border-radius:2px; }