/* Layout and motion pass (loads last). Uses the tokens defined in design.css. Display only. */
:root{--glass:#0f1a25d9;--glass-border:#b5d3ef24;--spring:cubic-bezier(.34,1.32,.5,1);--out:cubic-bezier(.16,1,.3,1);--shadow-float:0 12px 36px #0007,0 2px 8px #0004}

/* Header holds brand, workspace tabs and dataset actions in one row. */
header{height:60px;padding:10px 18px;gap:12px}
header strong{flex:none}
header button,#simple-toolbar button,#simple-toolbar label,.ui-dropdown>summary{white-space:nowrap}
header #start-task,header #import-source{flex:none}
header>nav.workspace-tabs{display:flex;flex:none;margin-left:14px;padding:3px;gap:2px;border:1px solid var(--line);border-bottom:1px solid var(--line);background:#0b141e;border-radius:12px;position:relative;height:auto}
header>nav.workspace-tabs button{position:relative;z-index:1;padding:7px 15px;border-radius:9px;font-size:13px;box-shadow:none!important;background:transparent!important;border:0!important;transition:color .25s var(--out)}
header>nav.workspace-tabs button:hover:not(.active){color:#e4edf6}
header #dataset{margin-left:auto}

/* Sliding highlight shared by segmented controls (positioned by movePill). */
.segmented{position:relative;isolation:isolate}
.segmented>.segment-pill{position:absolute;left:0;top:0;z-index:0;border-radius:9px;pointer-events:none;opacity:0;transition:transform .42s var(--spring),width .42s var(--spring),height .3s var(--out),opacity .2s,background .3s;background:#26344a;box-shadow:inset 0 0 0 1px #b8c7ff2e,0 2px 10px #0005}
.segmented>button{position:relative;z-index:1}
.segmented>button.active{background:transparent!important;border-color:transparent!important}
body[data-workspace=explore] nav.workspace-tabs .segment-pill{background:#1c3550;box-shadow:inset 0 0 0 1px #87c7ff55}
body[data-workspace=process] nav.workspace-tabs .segment-pill{background:#2b2550;box-shadow:inset 0 0 0 1px #b9a6ff55}
body[data-workspace=review] nav.workspace-tabs .segment-pill{background:#3a3020;box-shadow:inset 0 0 0 1px #f2cd8855}
body[data-workspace=annotate] nav.workspace-tabs .segment-pill{background:#173a33;box-shadow:inset 0 0 0 1px #96e6cd55}
#simple-toolbar .mode-buttons{padding:3px}
#simple-toolbar .mode-buttons button{transition:color .25s var(--out)}

/* Toolbar: compact, one row; the A/B launcher appears only when two runs can be compared. */
#simple-toolbar{padding:8px 18px;gap:10px;min-height:50px;box-sizing:border-box}
#simple-toolbar .comparison-launch{margin-left:auto}
#simple-toolbar .comparison-launch:disabled{display:none}

/* Image area: full height between toolbar and footer, with floating tools. */
#workspace{gap:0}
#desk{margin:10px;border:1px solid var(--line);border-radius:16px;position:relative}
#result-sidebar{transition:width .38s var(--out),opacity .25s,padding .38s var(--out),border-color .3s;overflow-x:hidden}
.sidebar-heading{display:flex;align-items:center;gap:6px;white-space:nowrap}
.sidebar-toggle{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;min-height:0!important;padding:0!important;border-radius:8px;background:transparent;border-color:transparent;color:var(--muted)}
.sidebar-toggle:hover{background:#ffffff10;color:#fff}
.sidebar-toggle .ui-icon,.sidebar-reopen .ui-icon{width:16px;height:16px}
body.sidebar-collapsed #result-sidebar{width:0!important;padding-left:0;padding-right:0;opacity:0;border-color:transparent;pointer-events:none}
.sidebar-reopen{position:absolute;left:12px;top:12px;z-index:6;display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:10px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(12px);box-shadow:var(--shadow-float);font-size:12px;color:#dce8f3;opacity:0;transform:translateX(-12px);pointer-events:none;transition:opacity .3s,transform .4s var(--spring)}
.sidebar-reopen b{font-weight:600;color:var(--source);font-size:11px}
.sidebar-reopen b:empty,.sidebar-reopen b:is(:empty){display:none}
body.sidebar-collapsed .sidebar-reopen{opacity:1;transform:none;pointer-events:auto}
body.sidebar-collapsed .viewport .caption{left:auto;margin-left:120px}
body:not([data-workspace=explore]) .sidebar-reopen{display:none}

.tool-rail{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:7;display:flex!important;flex-direction:column;gap:3px;padding:6px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(14px);box-shadow:var(--shadow-float);animation:railIn .5s var(--spring) both}
.tool-rail[hidden]{display:none!important}
.tool-rail .explore-tool-button{position:relative;width:36px;height:36px;min-height:0!important;padding:0!important;justify-content:center;border-radius:10px!important;margin:0!important;transition:background .2s,color .2s,transform .18s var(--spring)}
.tool-rail .explore-tool-button::after{display:none}
.tool-rail .tool-group-start{margin-top:6px!important}
.tool-rail .tool-group-start::before{content:'';position:absolute;left:8px;right:8px;top:-5px;height:1px;background:var(--glass-border)}
.tool-rail .explore-tool-label{position:absolute!important;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%);padding:5px 9px;border-radius:7px;background:#0b141d;border:1px solid var(--glass-border);color:#e8f0f7;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .16s,transform .25s var(--out);display:block!important}
.tool-rail .explore-tool-button:hover .explore-tool-label,.tool-rail .explore-tool-button:focus-visible .explore-tool-label{opacity:1;transform:translate(0,-50%)}
.tool-rail .ui-icon{width:18px;height:18px}
.tool-rail .save-view{background:#78e4c51a!important;color:#9ff0d8!important;border-color:#78e4c544!important}
.ruler-chip{position:absolute;left:50%;top:12px;z-index:7;display:flex;align-items:center;gap:6px;padding:5px 6px 5px 12px;border-radius:999px;background:var(--glass);border:1px solid #e8bc6966;backdrop-filter:blur(12px);box-shadow:var(--shadow-float);transform:translate(-50%,-10px);opacity:0;pointer-events:none;transition:opacity .25s,transform .4s var(--spring)}
.ruler-chip.visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ruler-chip .ruler-readout{width:auto;max-width:420px}

/* Depth rail: vertical Z navigation on the image's left edge, only for single-plane views. */
.depth-rail{position:absolute;left:12px;top:50%;z-index:7;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(14px);box-shadow:var(--shadow-float);opacity:0;transform:translate(-14px,-50%);pointer-events:none;transition:opacity .25s,transform .45s var(--spring)}
.depth-rail.visible{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.depth-rail .depth-title{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--source)}
.depth-rail button{display:grid;place-items:center;width:32px;height:28px;min-height:0!important;padding:0!important;border-radius:9px;font-size:11px}
.depth-rail .ui-icon{width:16px;height:16px}
.depth-rail #play-z{width:auto;min-width:32px;padding:0 6px!important;font-size:10px}
.depth-rail #z{writing-mode:vertical-lr;direction:ltr;width:22px!important;height:min(260px,38vh);margin:2px 0;accent-color:var(--source);cursor:ns-resize}
.depth-rail .depth-slider{display:flex}
.depth-rail [hidden]{display:none!important}
.depth-rail #zlabel{font-size:11px;font-variant-numeric:tabular-nums;color:#e6eef6;white-space:nowrap}
body.sidebar-collapsed .depth-rail{top:calc(50% + 24px)}

/* Footer: a slim status line — image size, analysis context, latest status. */
footer{min-height:30px;padding:4px 18px;gap:14px}
footer #meta{flex:none;color:#8ea2b5;font-size:11px}
footer .footer-context{flex:1 1 auto;min-width:0;padding:0;border:0;background:none;font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
footer #status{flex:none;max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-flash{animation:statusIn .45s var(--out)}

/* Viewport overlays share one glass style. */
.viewport .view-navigation{background:var(--glass)!important;border:1px solid var(--glass-border)!important;backdrop-filter:blur(14px);box-shadow:var(--shadow-float);border-radius:13px!important}
.viewport .caption{background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(10px);border-radius:9px}
.turntable-button.active{background:#78e4c522!important;color:#a6f3dc!important;border-color:#78e4c566!important}

/* 3D render dock: ZEN-style rendering modes and transfer-function controls. */
.render-dock{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;display:grid;grid-template-columns:auto auto;align-items:center;gap:6px;max-width:calc(100% - 24px);animation:dockIn .55s var(--spring) both}
.render-modes{display:flex;padding:3px;gap:2px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(14px);box-shadow:var(--shadow-float)}
.render-modes button,.render-dock .segmented.small button{border:0!important;background:transparent!important;padding:6px 12px;min-height:0;font-size:12px;border-radius:9px;color:#b8c8d8;white-space:nowrap;transition:color .25s}
.render-modes button.active,.render-dock .segmented.small button.active{color:#fff}
.render-modes .segment-pill,.render-dock .segmented.small .segment-pill{background:#1d3a4e;box-shadow:inset 0 0 0 1px #87c7ff4d}
.render-adjust-toggle{display:inline-flex;align-items:center;gap:6px;height:100%;padding:6px 12px;border-radius:12px;background:var(--glass)!important;border:1px solid var(--glass-border)!important;backdrop-filter:blur(14px);box-shadow:var(--shadow-float);font-size:12px;color:#d6e3ee}
.render-adjust-toggle .ui-icon{width:16px;height:16px;transition:transform .45s var(--spring)}
.render-dock.open .render-adjust-toggle{color:#fff;border-color:#87c7ff66!important}
.render-dock.open .render-adjust-toggle .ui-icon{transform:rotate(180deg)}
.render-panel{grid-column:1/-1;justify-self:center;width:min(380px,100%);box-sizing:border-box;display:grid;gap:10px;padding:14px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(16px);box-shadow:var(--shadow-float);font-size:12px;transform-origin:top center;opacity:0;transform:translateY(-8px) scale(.97);visibility:hidden;max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:opacity .22s,transform .4s var(--spring),visibility 0s .4s,max-height .4s var(--out),padding .4s var(--out)}
.render-dock.open .render-panel{opacity:1;transform:none;visibility:visible;max-height:420px;padding-top:14px;padding-bottom:14px;transition:opacity .25s,transform .45s var(--spring),visibility 0s,max-height .45s var(--out),padding .45s var(--out)}
.render-slider{display:grid;grid-template-columns:86px 1fr 40px;align-items:center;gap:10px;color:#cfdbe6;transition:opacity .25s}
.render-slider.dimmed{opacity:.4}
.render-slider input{width:100%;accent-color:var(--source)}
.render-slider output{text-align:right;font-variant-numeric:tabular-nums;color:#e9f2f9}
.render-row{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#cfdbe6}
.render-dock .segmented.small{display:flex;padding:2px;border-radius:10px;background:#0b141e;border:1px solid var(--line)}
.render-check{display:flex;align-items:center;gap:8px;color:#cfdbe6}
.render-note{margin:0;padding:8px 10px;border-radius:9px;background:#ffffff08;color:var(--text-secondary);line-height:1.45;font-size:11.5px}
.render-fine{font-size:11px;color:#8ea2b5}
.render-reset{padding:4px 10px;min-height:0;font-size:11px;border-radius:8px}

/* Buttons respond to touch with a small press. */
button{transition:background-color .2s,border-color .2s,color .2s,transform .18s var(--spring),box-shadow .2s}
button:active:not(:disabled){transform:scale(.96)}

/* Menus and dialogs open with motion. */
.ui-dropdown[open]>.dropdown-body{animation:menuIn .32s var(--spring) both;transform-origin:top left}
dialog[open]{animation:dialogIn .42s var(--spring) both}
dialog[open]::backdrop{animation:fadeIn .3s ease both;backdrop-filter:blur(3px)}
#main-host.view-enter .viewport,#main-host.view-enter>*{animation:viewIn .5s var(--out) both}
#main-host.view-enter>*:nth-child(2){animation-delay:.06s}
#task-panel:not([hidden]){animation:panelIn .45s var(--out) both}

@keyframes viewIn{from{opacity:0;transform:scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dialogIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes statusIn{from{opacity:.2;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes railIn{from{opacity:0;transform:translate(14px,-50%)}to{opacity:1;transform:translateY(-50%)}}
@keyframes dockIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes panelIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* Narrow screens: tabs take their own header row; the rail and dock tighten. */
@media(max-width:1100px){header{height:auto;flex-wrap:wrap}
 header>nav.workspace-tabs{order:10;flex:1 1 100%;margin-left:0;justify-content:space-between}
 header>nav.workspace-tabs button{flex:1}
 .render-modes button{padding:6px 8px}
}
@media(max-width:800px){#desk{margin:6px}
 .tool-rail{top:auto;bottom:70px;transform:none;animation:none}
 .tool-rail .explore-tool-label{display:none!important}
 .render-dock{grid-template-columns:1fr;top:8px}
 .render-modes{overflow-x:auto;scrollbar-width:none}
 footer .footer-context{display:none}
 .sidebar-reopen{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* Left stack in 3D: cell navigator and region sliders. */
.left-stack{position:absolute;left:12px;top:56px;bottom:72px;z-index:6;display:flex;flex-direction:column;gap:10px;width:272px;pointer-events:none;overflow:visible}
.left-stack>*{pointer-events:auto}
.compare-grid .viewport:not(:last-child) .left-stack{display:none}
.float-card{box-sizing:border-box;padding:12px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(16px);box-shadow:var(--shadow-float);font-size:12px;color:#d6e1ea;display:grid;gap:9px;animation:cardIn .5s var(--spring) both}
.float-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.float-card h3{margin:0;font-size:14px;font-weight:650;color:#fff;letter-spacing:.01em}
.float-card-meta{font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.float-card-label{margin:2px 0 -3px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8ea2b5}
.float-card button{min-height:0;padding:6px 10px;font-size:12px;border-radius:9px}
.float-card-close{padding:0 6px!important;font-size:17px!important;line-height:1;background:transparent!important;border-color:transparent!important;color:var(--muted)}
.cell-steps{display:grid;grid-template-columns:auto auto 1fr;gap:6px}
.cell-go{display:flex;gap:4px}
.cell-go input{width:100%;min-width:0;box-sizing:border-box;padding:5px 8px;font-size:12px;border-radius:9px}
.neighbor-chips{display:flex;flex-wrap:wrap;gap:5px;color:var(--text-secondary)}
.neighbor-chip{display:inline-flex;align-items:baseline;gap:5px;padding:4px 8px!important;border-radius:999px!important;background:#ffffff0a;border:1px solid var(--line)}
.neighbor-chip b{color:#fff;font-weight:600}
.neighbor-chip span{font-size:10.5px;color:var(--text-secondary)}
.neighbor-chip:hover{border-color:var(--accent);background:#78e4c514}
.cell-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.cell-actions .primary-action{background:var(--accent)!important;color:#08221b!important;border-color:transparent!important;font-weight:600}
.cell-navigator .segmented.small{display:flex;padding:2px;border-radius:10px;background:#0b141e;border:1px solid var(--line)}
.cell-navigator .segmented.small button{flex:1;border:0!important;background:transparent!important;padding:5px 8px;color:#b8c8d8}
.cell-navigator .segmented.small button.active{color:#fff}
.cell-navigator .segment-pill{background:#1d3a4e;box-shadow:inset 0 0 0 1px #87c7ff4d}
.cell-navigator .render-slider{grid-template-columns:58px 1fr 44px}
.crop-panel{display:none}
.crop-panel.open{display:grid}
.range-row{display:grid;grid-template-columns:16px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center}
.range-name{grid-row:1/3;font-weight:700;color:#fff}
.range-out{grid-column:2;font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.dual-range{position:relative;height:22px}
.dual-range::before{content:'';position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:#ffffff1a}
.dual-fill{position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:linear-gradient(90deg,#f2cd88,#ffdfa6);box-shadow:0 0 10px #f2cd8855}
.dual-range input{position:absolute;inset:0;width:100%;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.dual-range input::-webkit-slider-runnable-track{background:none;height:22px}
.dual-range input::-moz-range-track{background:none}
.dual-range input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;margin-top:3px;border-radius:50%;background:#fff;border:2px solid #f2cd88;box-shadow:0 2px 6px #0008;cursor:ew-resize;transition:transform .2s var(--spring)}
.dual-range input::-moz-range-thumb{pointer-events:auto;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #f2cd88;cursor:ew-resize}
.dual-range input:active::-webkit-slider-thumb,.dual-range input:focus-visible::-webkit-slider-thumb{transform:scale(1.2)}
.tool-rail .explore-tool-button.active{background:#f2cd8826!important;color:#ffe4a2!important;border-color:#f2cd8866!important}
@keyframes cardIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@media(max-width:800px){.left-stack{top:auto;bottom:64px;width:min(272px,calc(100% - 24px))}}

/* Review: Planes and Candidates are separate views, so each gets the full height. */
#main-host.volume-review-host{display:flex;flex-direction:column;gap:10px;padding:12px;box-sizing:border-box;height:100%;overflow:hidden}
.review-topbar{display:flex;align-items:center;gap:10px;flex:none}
.review-topbar-spacer{flex:1}
.review-switch{display:flex;padding:3px;gap:2px;border-radius:12px;background:#0b141e;border:1px solid var(--line)}
.review-switch button{display:inline-flex;align-items:center;gap:8px;border:0!important;background:transparent!important;padding:6px 14px;min-height:0;font-size:13px;border-radius:9px;color:#b8c8d8}
.review-switch button.active{color:#fff}
.review-switch .segment-pill{background:#3a3020;box-shadow:inset 0 0 0 1px #f2cd8866}
.review-count{white-space:nowrap;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:#f2cd8822;color:#ffe2a8}
.review-count:empty{display:none}
.review-view-menu .dropdown-body{right:0;left:auto;width:300px;display:grid;gap:10px}
.review-view-menu .dropdown-body label{display:grid;gap:5px;font-size:12px}
.review-help{font-size:11.5px;line-height:1.5;margin:0}
#main-host.volume-review-host .review-plane-grid{flex:1;min-height:0;grid-template-rows:minmax(0,1.7fr) minmax(0,1fr);animation:viewIn .4s var(--out)}
#main-host[data-review-view=candidates] .review-plane-grid{display:none}
#main-host[data-review-view=planes] .measurement-panel{display:none}
#main-host[data-review-view=candidates] .measurement-panel{flex:1;min-height:0;overflow:auto;margin:0;animation:viewIn .4s var(--out)}
.review-plane{border-color:var(--line)!important;border-radius:12px!important;background:#05080b!important}
.review-plane-title{font-size:11.5px;padding:7px 10px;color:#cfdbe6}

/* Inspector: compact crosshair row and grouped actions. */
#task-panel .compact-xyz{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#task-panel .compact-xyz label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--text-secondary);margin:0}
#task-panel .compact-xyz input{width:100%;min-width:0;box-sizing:border-box;padding:5px 6px;font-size:12px}
#review-status{font-size:11px;color:#8ea2b5;margin:6px 0 10px}
.object-inspector{border-radius:14px!important}
.inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0 10px}
.inspector-actions button{min-height:0;padding:7px 10px;font-size:12px;border-radius:9px;margin:0!important;width:100%}
.inspector-actions .primary-action{grid-column:1/-1;background:var(--accent)!important;color:#08221b!important;border-color:transparent!important;font-weight:600}
.inspector-more,.inspector-notes{margin-top:8px;font-size:12px}
.inspector-more summary,.inspector-notes summary{cursor:pointer;color:var(--text-secondary);font-size:11.5px;padding:4px 0}
.inspector-more[open] summary,.inspector-notes[open] summary{color:#fff}
.inspector-more>*:not(summary),.inspector-notes>*:not(summary){animation:menuIn .3s var(--out) both}
.inspector-notes p{font-size:11px;line-height:1.5}

/* ---- Palette: neutral graphite surfaces so fluorescence colours carry the image; one azure accent
   marks active and primary controls. Workspace role colours remain only as faint tab tints. ---- */
:root{--bg:#0c0e11;--surface-1:#13161a;--surface-2:#1a1e24;--surface-3:#232830;--surface-4:#2c323b;
 --text:#e7eaee;--muted:#9aa3ae;--text-secondary:#a3acb7;--line:#ffffff10;--control-border:#ffffff17;
 --accent:#7aa7ff;--accent-strong:#5d8dfa;--accent-ink:#071430;--accent-soft:#7aa7ff1f;--focus-ring:#9dbdff;
 --glass:#14171cd6;--glass-border:#ffffff14;--surface:#1a1e24;--surface-raised:#232830;--panel:#13161a;--context-bg:#13161a}
body{background:var(--bg)!important;color:var(--text)}
header,nav,#simple-toolbar,footer{background:var(--surface-1)!important;border-color:var(--line)!important}
header{box-shadow:0 1px 0 var(--line)}
#result-sidebar,#task-panel{background:var(--surface-1)!important;border-color:var(--line)!important}
#desk,.viewport,#desk .viewport{background:#050608!important}
#desk{border-color:var(--line)!important;box-shadow:0 0 0 1px #00000040,0 10px 40px #0006}
button,select,input:not([type=range]):not([type=checkbox]){background:var(--surface-2);color:var(--text);border-color:var(--control-border)}
button:hover:not(:disabled){background:var(--surface-3);border-color:#ffffff26}
button.active{background:var(--accent-soft)!important;color:#dfe9ff!important;border-color:#7aa7ff55!important}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--focus-ring)!important;outline-offset:2px}
input[type=checkbox],input[type=range]{accent-color:var(--accent)}
#channel,.intensity-control select,.mask-control select{border-left:1px solid var(--control-border)!important}
.ui-dropdown>summary{background:var(--surface-2)!important;border-color:var(--control-border)!important;color:var(--text)!important}
.ui-dropdown[open]>summary{border-color:#7aa7ff66!important}
.dropdown-body,dialog{background:#171a1f!important;border-color:#ffffff1c!important;box-shadow:0 18px 50px #000a!important}
header #import-source,.cell-actions .primary-action,.inspector-actions .primary-action{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:transparent!important;font-weight:600}
header #import-source:hover,.cell-actions .primary-action:hover,.inspector-actions .primary-action:hover{background:#94b9ff!important}
.result-button{background:transparent!important}
.result-button:hover{background:var(--surface-2)!important}
.result-button.active{background:var(--accent-soft)!important;border-color:#7aa7ff40!important;box-shadow:inset 3px 0 var(--accent)!important;color:#fff}
#import-labels-open{background:var(--surface-2)!important;border-color:var(--control-border)!important;color:var(--text)!important}
.selected-actions{background:var(--surface-2)!important;border-color:var(--line)!important}
.selected-actions a,.object-inspector a{color:#a9c4ff}
.segmented>.segment-pill{background:var(--surface-4);box-shadow:inset 0 0 0 1px #ffffff1c,0 2px 10px #0006}
#simple-toolbar .mode-buttons,.render-modes,.render-dock .segmented.small,.cell-navigator .segmented.small,.review-switch,header>nav.workspace-tabs{background:#0e1114!important;border-color:var(--line)!important}
.render-modes .segment-pill,.render-dock .segmented.small .segment-pill,.cell-navigator .segment-pill{background:#25324a;box-shadow:inset 0 0 0 1px #7aa7ff59}
body[data-workspace=explore] nav.workspace-tabs .segment-pill{background:#1f2b40;box-shadow:inset 0 0 0 1px #7aa7ff59}
body[data-workspace=process] nav.workspace-tabs .segment-pill{background:#2a2540;box-shadow:inset 0 0 0 1px #b9a6ff55}
body[data-workspace=review] nav.workspace-tabs .segment-pill{background:#342c1e;box-shadow:inset 0 0 0 1px #f2cd8855}
body[data-workspace=annotate] nav.workspace-tabs .segment-pill{background:#1a3330;box-shadow:inset 0 0 0 1px #96e6cd55}
.tool-rail .save-view{background:var(--accent-soft)!important;color:#c9dbff!important;border-color:#7aa7ff40!important}
.tool-rail .explore-tool-button{color:#c9d0d8}
.render-slider input{accent-color:var(--accent)}
.neighbor-chip:hover{border-color:var(--accent);background:var(--accent-soft)}
.depth-rail .depth-title{color:var(--accent)}
.depth-rail #z{accent-color:var(--accent)}
.sidebar-reopen b{color:var(--accent)}
.object-inspector{background:var(--surface-2)!important;border-color:var(--line)!important}
.review-plane-title{background:#0f1215}
.measurement-panel,.count-card{border-color:var(--line)!important}
footer #meta,footer .footer-context{color:#8b939d}

/* Process: algorithm cards, step-by-step pipeline and running jobs. */
body[data-workspace=process] .depth-rail{left:auto;right:12px}
.algo-overview{display:grid;gap:8px;margin:4px 0 14px;animation:panelIn .4s var(--out) both}
.algo-label{margin:6px 0 0;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8b939d}
.algo-cards{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.algo-card{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;row-gap:1px;align-items:center;text-align:left;padding:9px 10px!important;min-height:0!important;border-radius:11px!important;background:var(--surface-2)!important;border:1px solid var(--line)!important;transition:border-color .25s,background .25s,transform .18s var(--spring),box-shadow .25s}
.algo-card .algo-glyph{grid-row:1/3;font-size:17px;width:22px;text-align:center;color:var(--muted);transition:color .25s,transform .4s var(--spring)}
.algo-card strong{font-size:12px;color:#e7eaee;font-weight:600}
.algo-card .algo-name{font-size:10.5px;color:#8b939d}
.algo-card:hover{border-color:#ffffff2a!important}
.algo-card.active{background:var(--accent-soft)!important;border-color:#7aa7ff80!important;box-shadow:0 0 0 1px #7aa7ff40,0 6px 18px #0005}
.algo-card.active .algo-glyph{transform:scale(1.15)}
.algo-card.blue.active .algo-glyph{color:#87c7ff}.algo-card.violet.active .algo-glyph{color:#b9a6ff}.algo-card.amber.active .algo-glyph{color:#f2cd88}.algo-card.mint.active .algo-glyph{color:#96e6cd}
.algo-card.blue.active{border-color:#87c7ff88!important;background:#87c7ff14!important}
.algo-card.violet.active{border-color:#b9a6ff88!important;background:#b9a6ff14!important}
.algo-card.amber.active{border-color:#f2cd8888!important;background:#f2cd8814!important}
.algo-card.mint.active{border-color:#96e6cd88!important;background:#96e6cd14!important}
.algo-help{margin:0;font-size:11.5px;line-height:1.45;color:var(--text-secondary)}
.algo-pipeline-head{display:flex;align-items:end;justify-content:space-between}
.algo-edit{min-height:0!important;padding:4px 10px!important;font-size:11px!important;border-radius:8px!important}
.algo-pipeline{list-style:none;margin:0;padding:0;display:grid;position:relative}
.algo-pipeline::before{content:'';position:absolute;left:10px;top:12px;bottom:12px;width:1px;background:linear-gradient(#7aa7ff66,#7aa7ff14)}
.algo-pipeline li{position:relative;display:grid;grid-template-columns:22px 88px 1fr;align-items:baseline;gap:8px;padding:5px 6px 5px 0;border-radius:8px;cursor:pointer;font-size:12px;animation:stepIn .4s var(--out) both;transition:background .2s}
.algo-pipeline li:hover{background:#ffffff08}
.step-dot{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#1d2532;border:1px solid #7aa7ff66;font-size:10px;font-weight:700;color:#cfe0ff;position:relative;z-index:1;align-self:center}
.step-name{color:#e7eaee;font-weight:600}
.step-value{color:var(--text-secondary);font-size:11.5px;font-variant-numeric:tabular-nums}
.algo-pipeline li.off .step-dot{background:var(--surface-1);border-color:#ffffff1a;color:#6d7580}
.algo-pipeline li.off .step-name,.algo-pipeline li.off .step-value{color:#6d7580}
.algo-pipeline li:last-child .step-dot{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.algo-running{display:grid;gap:6px}
.running-job{position:relative;overflow:hidden;display:grid;grid-template-columns:12px 1fr;column-gap:8px;row-gap:2px;padding:10px 12px 12px;border-radius:11px;background:#7aa7ff12;border:1px solid #7aa7ff4d;animation:cardIn .4s var(--spring) both}
.running-job strong{font-size:12.5px;color:#fff}
.running-meta,.running-message{grid-column:2;font-size:11px;color:var(--text-secondary)}
.running-pulse{grid-row:1;align-self:center;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 #7aa7ff99;animation:pulse 1.4s ease-out infinite}
.running-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:sweep 1.3s linear infinite}
@keyframes pulse{to{box-shadow:0 0 0 9px #7aa7ff00}}
@keyframes sweep{from{background-position:-40% 0}to{background-position:140% 0}}
@keyframes stepIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.algo-pipeline-box.settled .algo-pipeline li{animation:none}
.algo-pipeline-box{display:grid;gap:8px;margin:14px 0 6px;padding-top:12px;border-top:1px solid var(--line)}
#task-panel #recipe-summary{display:none}
.algo-overview{margin-bottom:10px}
.result-button.has-glyph{display:grid!important;grid-template-columns:20px 1fr;column-gap:6px;align-items:center}
.result-button.has-glyph>div,.result-button.has-glyph>span:not(.result-glyph){grid-column:2}
.result-glyph{grid-row:1/3;font-size:14px;text-align:center}
.result-glyph.blue{color:#87c7ff}.result-glyph.violet{color:#b9a6ff}.result-glyph.amber{color:#f2cd88}.result-glyph.mint{color:#96e6cd}
.example-card{margin:14px 4px 6px;padding:12px;border-radius:12px;background:linear-gradient(160deg,#7aa7ff14,#96e6cd0d);border:1px solid #7aa7ff33;display:grid;gap:7px;font-size:11.5px;animation:cardIn .5s var(--spring) both}
.example-card h4{margin:0;font-size:13px;color:#fff}
.example-card p{margin:0;line-height:1.45;color:var(--text-secondary)}
.example-kicker{font-size:10px!important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)!important}
.example-card .primary-action{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:transparent!important;font-weight:600;min-height:0;padding:7px 10px}
.example-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.example-actions button{min-height:0;padding:6px 8px;font-size:11.5px}
.example-fine{font-size:10.5px!important;color:#8b939d!important}
.example-progress:empty{display:none}
.example-card a{font-size:11px;color:#a9c4ff}
#task-panel .algo-overview,#task-panel .algo-pipeline-box{margin-left:22px;margin-right:22px;box-sizing:border-box;min-width:0}
#task-panel .algo-cards{min-width:0}
#task-panel .algo-card{min-width:0}
#task-panel .algo-card strong,#task-panel .algo-card .algo-name{overflow:hidden;text-overflow:ellipsis}
#task-panel .algo-overview,#task-panel .algo-pipeline-box{flex:none}

/* Manual reference counts */
.reference-card{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:linear-gradient(160deg,#96e6cd12,#7aa7ff0d);border:1px solid #96e6cd40;display:grid;gap:9px;animation:cardIn .45s var(--spring) both}
.reference-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.reference-kicker{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#96e6cd}
.reference-source{font-size:11px;color:#8b939d}
.reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.reference-cell{display:grid;gap:2px;padding:8px 10px;border-radius:10px;background:#ffffff06;border:1px solid var(--line);transition:border-color .3s,background .3s}
.reference-cell.active{border-color:#96e6cd80;background:#96e6cd14}
.reference-label{font-size:11px;color:var(--text-secondary)}
.reference-cell strong{font-size:22px;font-weight:650;color:#fff;font-variant-numeric:tabular-nums}
.reference-detail{font-size:10.5px;color:#8b939d}
.reference-verdict{margin:0;padding:8px 10px;border-radius:9px;font-size:12px;line-height:1.45}
.reference-verdict.match{background:#96e6cd1a;color:#c6f5e6}.reference-verdict.close{background:#f2cd881a;color:#ffe3ad}.reference-verdict.off{background:#ff8a8a1a;color:#ffc4c4}
.reference-fine{margin:0;font-size:10.5px;color:#8b939d}
.example-reference{font-size:11px!important;line-height:1.5!important;padding:6px 8px;border-radius:8px;background:#ffffff08}
.example-reference b{color:#fff}

/* Keyboard help */
.shortcut-dialog{max-width:min(720px,94vw)!important;width:min(720px,94vw)}
.shortcut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:6px}
.shortcut-grid h3{margin:0 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8b939d}
.shortcut-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:4px 0;font-size:12.5px}
.shortcut-row kbd{font:600 11px ui-monospace,SFMono-Regular,monospace;padding:3px 7px;border-radius:6px;background:#ffffff10;border:1px solid #ffffff22;border-bottom-width:2px;color:#e7eaee;white-space:nowrap}

/* Guided tour */
.tour-layer{position:fixed;inset:0;z-index:2000}
.tour-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px #05070acc,0 0 0 2px var(--accent),0 0 30px #7aa7ff66;transition:all .45s var(--spring);pointer-events:none}
.tour-card{position:fixed;width:320px;box-sizing:border-box;padding:16px 18px;border-radius:14px;background:#171a1f;border:1px solid #ffffff1f;box-shadow:0 18px 50px #000b;animation:dialogIn .4s var(--spring) both}
.tour-card h3{margin:4px 0 6px;font-size:15px;color:#fff}
.tour-card p{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--text-secondary)}
.tour-step{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.tour-actions{display:flex;justify-content:flex-end;gap:6px}
.tour-actions button{min-height:0;padding:6px 12px;font-size:12px}
.tour-actions .primary-action{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:transparent!important;font-weight:600}
.workspace-menu .dropdown-body button{width:100%;text-align:left}

/* Process auto-preview */
.auto-preview{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:11.5px;color:var(--text-secondary);cursor:pointer}
.export-dialog{max-width:min(520px,94vw)!important}
.export-row{display:flex;align-items:center;gap:12px;margin:8px 0 12px}
.export-label{font-size:12px;color:var(--text-secondary);min-width:72px}
.export-scale{display:flex;padding:2px;border-radius:10px;background:#0b0e12;border:1px solid var(--line)}
.export-scale button{border:0!important;background:transparent!important;padding:5px 14px;min-height:0;font-size:12px}
.export-scale .segment-pill{background:#25324a;box-shadow:inset 0 0 0 1px #7aa7ff59}
.export-size{font-size:11.5px;color:#8b939d;font-variant-numeric:tabular-nums}
.export-check{display:flex!important;align-items:center;gap:8px;font-size:12.5px;margin:4px 0 10px!important}
.export-note{font-size:11.5px!important;line-height:1.5}
.export-msg{font-size:12px!important;color:#ffe3ad!important;min-height:1em}

/* Results panel toggle: toolbar button + edge tab, in every workspace. */
.sidebar-reopen{display:none!important}
.results-toggle{display:inline-flex!important;align-items:center;gap:7px;padding:6px 11px!important;min-height:0!important;border-radius:10px!important}
.results-toggle .ui-icon{width:16px;height:16px;transition:transform .35s var(--spring)}
.results-toggle[aria-pressed=true]{background:var(--accent-soft)!important;border-color:#7aa7ff55!important;color:#dfe9ff!important}
.results-toggle[aria-pressed=false] .ui-icon{transform:scaleX(-1)}
.results-count{font-size:10.5px;font-weight:700;color:var(--accent)}
.results-count:empty{display:none}
#workspace{position:relative}
.results-edge{position:absolute;left:0;top:50%;z-index:8;transform:translate(-100%,-50%);display:flex!important;flex-direction:column;align-items:center;gap:6px;padding:12px 5px!important;min-height:0!important;border-radius:0 10px 10px 0!important;border-left:0!important;background:var(--surface-2)!important;box-shadow:4px 0 16px #0006;transition:transform .4s var(--spring),background .2s}
.results-edge span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.08em;color:#dce4ec}
body.sidebar-collapsed .results-edge{transform:translate(0,-50%)}
.results-edge:hover{background:var(--surface-3)!important}
#result-sidebar{transition:width .38s var(--out),opacity .25s,padding .38s var(--out),border-color .3s,flex-basis .38s var(--out)!important}
body.sidebar-collapsed #result-sidebar{flex-basis:0!important;min-width:0!important}
@media(max-width:800px){.results-edge{display:none!important}}
.guide-button{min-height:0!important;padding:6px 12px!important;border-radius:10px!important;background:var(--accent-soft)!important;color:#dfe9ff!important;border-color:#7aa7ff40!important}
#simple-toolbar .comparison-launch{margin-left:0}
#simple-toolbar .guide-button{margin-left:auto}

/* Toolbar fits one row at laptop widths: short visible names, full names stay in aria-labels. */
@media(max-width:1680px){
 #simple-toolbar .intensity-control,#simple-toolbar .mask-control,#simple-toolbar .mask-opacity,#simple-toolbar .explore-projection{font-size:0;gap:6px}
 #simple-toolbar .intensity-control select,#simple-toolbar .mask-control select,#simple-toolbar .explore-projection select{font-size:12px}
 #simple-toolbar .intensity-control::before{content:'Layer';font-size:12px}
 #simple-toolbar .mask-control::before{content:'Overlay';font-size:12px}
 #simple-toolbar .mask-opacity::before{content:'Opacity';font-size:12px}
 #simple-toolbar .explore-projection::before{content:'Z';font-size:12px}
 #simple-toolbar .mask-opacity input{width:72px}
 #simple-toolbar #channel{max-width:150px}
 #simple-toolbar .intensity-control select{max-width:140px}
 #simple-toolbar .comparison-launch{padding-left:10px;padding-right:10px}
}
@media(max-width:1380px){#simple-toolbar .results-toggle span{display:none}#simple-toolbar .comparison-launch{font-size:0}#simple-toolbar .comparison-launch::before{content:'A/B';font-size:12px}}
/* Process stage controls scroll together; execution actions stay anchored. */
body[data-workspace=process] #task-panel .algo-overview{margin:0 18px;display:block}
body[data-workspace=process] #task-panel .algo-overview:has(.algo-running[hidden]){display:none}
body[data-workspace=process] #task-panel .algo-pipeline-box{display:block;margin:8px 18px;padding-top:0;flex:none}
body[data-workspace=process] #task-panel .algo-pipeline-box>summary{padding:11px 0}
body[data-workspace=process] #task-panel .algo-pipeline{padding:3px 0 10px}
body[data-workspace=process] #task-panel .algo-pipeline li{cursor:default;animation:none;grid-template-columns:22px 75px 1fr}
body[data-workspace=process] #task-panel .algo-pipeline li:hover{background:transparent}
body[data-workspace=process] #task-panel .exp-form-heading{background:var(--surface-2)!important;padding:17px 18px 13px}
body[data-workspace=process] #task-panel .exp-form-heading h2{font-size:20px}
body[data-workspace=process] #task-panel .exp-section{border-color:var(--line)}
body[data-workspace=process] #task-panel .experiment-settings{flex:1;overflow:auto;min-height:0}
body[data-workspace=process] #task-panel .experiment-actions{flex:none}
body[data-workspace=process] .experiment-source{min-height:280px}
body[data-workspace=process] .experiment-host{min-height:0}
@media(max-width:800px){body[data-workspace=process] #task-panel .experiment-settings{overflow:visible}.comparison-controls{grid-template-columns:1fr 1fr}}