/* Theme tokens override legacy fixed colors across every workspace page. */
:root{--bg:#CBD5E3;--surface:#E4EBF3;--surface-alt:#DCE3EC;--ink:#111E30;--muted:#4F5C6E;--line:#B4BDC9;--blue:#285FC4}
body{background:var(--bg);color:var(--ink)}
.main-shell main{color:var(--page-ink)}
.page-heading h1{font-weight:700}
.page-heading p,.eyebrow,.timeline-help,.footer{color:var(--page-muted)}
.sidebar{background:var(--sidebar);border-color:var(--sidebar-line);color:var(--sidebar-ink)}
.sidebar .brand{color:var(--sidebar-ink)}
.sidebar .brandmark span{background:var(--sidebar-accent)}
.sidebar .brand-sub,.sidebar .workspace small,.sidebar .workspace .icon,.sidebar .nav-label,
.sidebar .local-note small,.sidebar .local-version,.sidebar .profile small,.sidebar .profile .icon{color:var(--sidebar-muted)}
.sidebar .workspace,.sidebar .local-note{background:var(--sidebar-alt);border-color:var(--sidebar-line);color:var(--sidebar-ink)}
.sidebar .workspace-icon{background:var(--sidebar-alt);border-color:var(--sidebar-line);color:var(--sidebar-accent)}
.sidebar .nav-item{color:var(--sidebar-muted);font-weight:550}
.sidebar .nav-item:hover{background:var(--sidebar-alt);color:var(--sidebar-ink)}
.sidebar .nav-item.active{background:var(--sidebar-alt);color:var(--sidebar-ink);box-shadow:inset 0 0 0 1px var(--sidebar-line)}
.sidebar .nav-item.active .icon{color:var(--sidebar-accent)}
.sidebar .nav-item.active:before{background:var(--sidebar-accent)}
.sidebar .nav-count,.sidebar .beta{background:var(--sidebar-alt);border-color:var(--sidebar-line);color:var(--sidebar-muted)}
.sidebar .nav-divider,.sidebar .top-divider{background:var(--sidebar-line)}
.sidebar .new-dot{background:var(--sidebar-accent)}
.sidebar .profile{color:var(--sidebar-ink);border-color:var(--sidebar-line)}
.sidebar .avatar{background:var(--sidebar-alt);border-color:var(--sidebar-line);color:var(--sidebar-accent)}
.topbar{background:var(--surface);border-color:var(--line)}
.breadcrumb,.local-time,.breadcrumb span,.footer-divider{color:var(--muted)}
.breadcrumb strong{color:var(--ink)}
.top-divider,.divider{background:var(--line)}
.environment{background:var(--surface-alt);border-color:var(--line);color:var(--sub)}
.icon-button,.modal-close{color:var(--muted)}
.avatar{background:var(--accent-soft);border-color:var(--accent-line);color:var(--blue)}
.panel,.stat-card,.motor-card,.rule-card,dialog{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:0 3px 10px var(--shadow)}
.panel-head,.motor-bottom,.panel-foot,.device-controls,.motor-meta,.timeline-toolbar,.list-row,.compact-table td,.footer,.motor-table td,.timeline-ruler{border-color:var(--line)}
.panel-head{background:var(--surface)}
.panel-foot{background:var(--surface-alt)}
.stat-label,.stat-value small,.stat-foot,.panel-subtitle,.device-id small,.motor-bottom,
.expression-tile small,.workflow-row small,.panel-foot,.motor-name small,.motor-current small,
.range-scale,.motor-meta,.field small,.notes,.label-row span,.list-row small,.timeline-ruler,
.rule-bottom,.sample-count,.pipeline-step small,.chart-labels,.metric-pair small,.empty-state,
.serial-status small,.storage-note,.tiny-note,.mini-metric,.simulation-ribbon,.small-note,
.empty-figure,.step-label,.counter-badge,.help-list{color:var(--muted)}
.field label,.inline-field,.list-row strong,.rule-flow,.compact-table td,.expression-tile strong,
.workflow-row strong,.motor-table td,.motor-table td:first-child,.motor-table td.number{color:var(--ink)}
.main-shell :is(.motor-table,.device-id,.panel-foot) [style*="color:"]{color:var(--muted)!important}
.stat-icon,.workflow-symbol,.sample-icon{background:var(--accent-soft);border-color:var(--accent-line);color:var(--blue)}
.panel-title .icon,.serial-status .icon,.rule-flow .icon{color:var(--blue)}
.btn{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:none}
.btn:hover{background:var(--surface-alt);border-color:var(--muted);box-shadow:0 3px 9px var(--shadow)}
.btn.primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent);filter:brightness(.94)}
.btn.dark{background:var(--sidebar);border-color:var(--sidebar-line);color:var(--sidebar-ink)}
.btn.subtle{background:var(--surface-alt);border-color:var(--line);color:var(--ink)}
.btn.danger{background:var(--red-soft);border-color:var(--line);color:var(--red)}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red)}
.btn.link,.btn.link:hover{color:var(--blue);background:transparent;border:0;box-shadow:none}
.tag,.counter-badge{background:var(--surface-alt);color:var(--muted);border-color:var(--line)}
.tag.blue{background:var(--accent-soft);color:var(--blue);border-color:var(--accent-line)}
.tag.green{background:var(--green-soft);color:var(--green);border-color:var(--line)}
.tag.amber{background:var(--amber-soft);color:var(--amber);border-color:var(--line)}
.tag.red{background:var(--red-soft);color:var(--red);border-color:var(--line)}
.green,.live-pill{color:var(--green)}.blue{color:var(--blue)}
.blue-dot{background:var(--blue)}
.device-canvas{background:radial-gradient(ellipse at 50% 70%,var(--accent-soft) 0%,var(--surface-alt) 45%,var(--surface) 82%)}
.device-grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);opacity:.6}
.diagram-label,.canvas-mode,.head-expression-status{color:var(--muted)}
.diagram-label:before{background:var(--blue);box-shadow:0 0 0 3px var(--accent-soft)}
.diagram-label:after{background:var(--line)}
.canvas-corner span{background:var(--surface);border-color:var(--line);color:var(--muted)}
.quick-action{background:var(--surface-alt);border-color:var(--line);color:var(--sub)}
.quick-action .icon{color:var(--blue)}
.quick-action:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.quick-action.stop,.quick-action.stop:hover{background:var(--red-soft);border-color:var(--line);color:var(--red)}
.quick-action.stop .icon{color:var(--red)}
.motor-table th,.compact-table th{background:var(--surface-alt);color:var(--muted)}
.expression-tile{background:var(--surface-alt);border-color:var(--line)}
.expression-tile .mini-face,.list-row .mini-face{color:var(--muted)}
.expression-tile:hover,.expression-tile.selected{background:var(--accent-soft);border-color:var(--blue);box-shadow:0 0 0 1px var(--accent-line)}
.expression-tile.selected .mini-face{color:var(--blue)}
.info-strip{background:var(--accent-soft);border-color:var(--accent-line);color:var(--sub)}
.input,select.input,textarea.input,.motor-number-input{background:var(--surface);border-color:var(--line);color:var(--ink);color-scheme:inherit}
.input::placeholder{color:var(--muted)}
.input:focus{border-color:var(--blue);outline:2px solid var(--accent-line)}
.input:disabled{opacity:.65}
.range,.inline-field input{accent-color:var(--accent)}
.clip{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink)}
.clip.active{background:var(--accent-soft);border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.clip small,.clip .remove,.drag-grip{color:var(--muted)}
.timeline-help{color:var(--muted)}
.timeline-track{background:var(--surface-alt);border-color:var(--line)}
.timeline-track.drag-over{background:var(--accent-soft);border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.clip-order button{background:var(--surface);border-color:var(--line);color:var(--ink)}
.clip-order button:hover:not(:disabled){background:var(--accent-soft);color:var(--blue)}
.clip.drop-before:before,.clip.drop-after:after{background:var(--blue);box-shadow:0 0 0 2px var(--accent-soft)}
.clip:focus-visible{outline-color:var(--blue)}
.progress-track{background:var(--line)}
.progress-fill{background:var(--accent)}
.rule-flow .node{background:var(--surface-alt);border-color:var(--line)}
.rule-flow .node small{color:var(--muted)}
.switch{background:var(--line)}
.switch.on{background:var(--accent)}
.switch.on:before{background:var(--accent-text)}
.mic-visual{background:var(--surface-alt);border-color:var(--line)}
.mic-visual span{background:var(--accent-line)}
.mic-visual.recording span{background:var(--blue)}
.pipeline-step{background:var(--surface-alt);border-color:var(--line)}
.pipeline-step:not(:last-child):after,.pipeline-step .icon{color:var(--blue)}
.pipeline-step strong{color:var(--ink)}
.pipeline-step.active{background:var(--accent-soft);border-color:var(--accent-line)}
.training-chart{background:var(--surface)}
.plot-grid{stroke:var(--line)}
.training-chart #lossPath{stroke:var(--blue)}
.log{background:var(--surface-alt);color:var(--sub);border-color:var(--line)}
.workspace,.serial-status{background:var(--surface-alt);border-color:var(--line)}
.empty-timeline{background:var(--surface-alt);color:var(--muted);border-color:var(--line)}
.danger-strip{background:var(--red-soft);color:var(--red);border-color:var(--line)}
.filter-tab{background:var(--surface);color:var(--sub);border-color:var(--line)}
.filter-tab.active{background:var(--accent-soft);color:var(--blue);border-color:var(--accent-line)}
.dotted-line{background:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 6px)}
button:focus-visible,a:focus-visible{outline-color:var(--blue)}
dialog::backdrop{background:#07142383;backdrop-filter:blur(5px)}
/* The camera remains a neutral black viewing area; theme changes never tint captured media. */
.camera-preview{background:#13243A}
.camera-placeholder{color:#A5B8CE}
.camera-placeholder strong{color:#DDE8F4}
.camera-badge{color:#D8E4F3;background:#0C1D32CF}
/* Appearance studio. */
.theme-dialog{width:700px;max-height:calc(100dvh - 40px);overflow-y:auto}
.theme-dialog .modal-header{padding:23px 26px 20px;position:sticky;top:0;background:var(--surface);z-index:2}
.theme-kicker{font-size:10px;letter-spacing:1.7px;color:var(--blue);font-weight:750;margin-bottom:7px}
.theme-dialog .modal-header h2{font-size:20px;font-weight:700}
.theme-dialog .modal-close{width:30px;height:30px;display:grid;place-items:center;border-radius:6px}
.theme-dialog .modal-close:hover{background:var(--surface-alt)}
.theme-body{padding:22px 26px 24px}
.theme-intro{color:var(--muted);font-size:12px;line-height:1.9;margin:0 0 23px}
.theme-section-label{font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.theme-section-label>span{color:var(--muted);font-size:11px;font-weight:400}
.theme-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.theme-preset{padding:7px 7px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-alt);text-align:left;color:var(--ink);min-width:0}
.theme-preset:hover{border-color:var(--blue)}
.theme-preset.selected{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.theme-thumbnail{height:77px;display:block;position:relative;overflow:hidden;background:var(--p-bg);border-radius:5px;margin-bottom:10px}
.theme-thumbnail i{position:absolute;display:block;border-radius:3px}
.theme-mini-nav{width:23%;left:0;top:0;height:100%;background:#172B43;border-radius:0!important}
.theme-mini-nav:before,.theme-mini-nav:after{content:'';position:absolute;height:3px;background:#ADBED6;left:25%;right:25%;top:14px;box-shadow:0 10px 0 #6C829F,0 20px 0 #6C829F,0 30px 0 #6C829F}
.theme-mini-nav:after{top:56px;box-shadow:none;background:var(--p-accent)}
.theme-mini-card{left:31%;top:10px;right:8%;height:23px;background:var(--p-surface)}
.theme-mini-card.second{top:39px;height:28px;right:38%}
.theme-mini-action{width:22%;right:8%;top:39px;height:9px;background:var(--p-accent)}
.theme-preset-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:650;padding:0 2px}
.theme-check{color:var(--blue);visibility:hidden}
.theme-preset.selected .theme-check{visibility:visible}
.theme-preset small{display:block;color:var(--muted);font-size:10px;line-height:1.7;margin-top:5px;padding:0 2px}
.theme-custom-label{margin-top:26px}
.theme-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.theme-color-field>span:first-child{display:block;color:var(--sub);font-size:11px;margin-bottom:8px}
.theme-color-control{display:flex;align-items:center;gap:7px}
.theme-color-control input[type=color]{appearance:none;width:39px;height:36px;border:1px solid var(--line);background:var(--surface);padding:3px;border-radius:7px;cursor:pointer;flex-shrink:0}
.theme-color-control input[type=color]::-webkit-color-swatch-wrapper{padding:1px}
.theme-color-control input[type=color]::-webkit-color-swatch{border:0;border-radius:3px}
.theme-hex{font-family:ui-monospace,Consolas,monospace;font-size:12px;letter-spacing:.2px;height:36px;min-width:0;padding:8px}
.theme-hex[aria-invalid=true]{border-color:var(--red);outline-color:var(--red-soft)}
.theme-preview-note{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--muted);margin-top:22px;flex-wrap:wrap}
.theme-preview-dot{height:6px;width:6px;border-radius:50%;background:var(--accent)}
.theme-error{font-size:12px;line-height:1.7;color:var(--red);margin:9px 0 0;min-height:20px}
.theme-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:18px;margin-top:15px}
.theme-modal-footer>div{display:flex;gap:8px}
.theme-trigger{display:flex;align-items:center;gap:7px}
.theme-trigger-dot,[data-theme-swatch]{width:11px;height:11px;border-radius:50%;background:var(--accent);border:1px solid var(--line);flex-shrink:0}
@media(max-width:760px){.theme-dialog{max-width:calc(100vw - 24px)}.theme-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-thumbnail{height:81px}.theme-dialog .modal-header{padding:19px 20px 16px}.theme-body{padding:18px 20px 20px}.theme-colors{gap:9px}.theme-color-control{gap:5px}.theme-color-control input[type=color]{width:32px}.theme-hex{font-size:11px;padding:8px 5px}.theme-section-label>span{font-size:10px}}
@media(max-width:440px){.theme-colors{grid-template-columns:1fr}.theme-color-field{display:flex;align-items:center;justify-content:space-between;gap:12px}.theme-color-field>span:first-child{margin:0;flex-shrink:0}.theme-color-control{width:190px}.theme-color-control input[type=color]{width:39px}.theme-hex{font-size:12px}.theme-modal-footer .btn{padding:8px 10px}.theme-dialog .modal-header h2{font-size:18px}.theme-intro{margin-bottom:18px}.theme-custom-label{margin-top:20px}}

@media(max-width:760px){.topbar .theme-open{padding:7px;min-height:30px}.topbar .theme-open>span{display:none}.topbar .theme-open .icon{width:17px;height:17px}.topbar .top-actions{gap:7px}}
@media(max-width:430px){.topbar .environment .icon{display:none}.topbar .environment{padding:7px;font-size:10px}.topbar .breadcrumb{gap:7px}.topbar .top-actions{gap:6px}.topbar .theme-open{padding:6px}}
/* Read-only fields and epoch labels are rendered with inline legacy colors. */
.main-shell .input[style*="background:"]{background:var(--surface-alt)!important;color:var(--sub)!important}
.metric-pair [style*="color:"]{color:var(--muted)!important}

/* Workflow annotations also follow the selected palette. */
#flowStudio{--flow-grid:var(--line)}
#flowStudio .flow-tabs button.active{background:var(--accent);color:var(--accent-text);box-shadow:0 3px 10px var(--shadow)}
#flowStudio .flow-save-note{color:var(--green)}
#flowStudio .flow-edge-layer path:not(.flow-edge-hit){stroke:var(--page-muted)}
#flowStudio .flow-edge-layer .is-traversed path:not(.flow-edge-hit){stroke:var(--green)}
#flowStudio #flowArrow path{fill:var(--page-muted);stroke:none}
#flowStudio #flowArrowActive path{fill:var(--green);stroke:none}
#flowStudio .flow-edge-label{background:var(--surface);border-color:var(--line);color:var(--sub);box-shadow:0 2px 8px var(--shadow)}
#flowStudio .flow-edge-label:hover,#flowStudio .flow-edge-label.is-traversed{border-color:var(--green);color:var(--green)}
#flowStudio .flow-node{border-color:var(--accent-line);box-shadow:0 5px 16px var(--shadow)}
#flowStudio .flow-node-kicker{color:var(--blue)}
#flowStudio .flow-node-kicker>span:last-child{color:var(--muted)}
#flowStudio .flow-node-icon{background:var(--accent-soft);color:var(--blue)}
#flowStudio .flow-terminal-node{border-color:var(--blue);box-shadow:0 5px 16px var(--shadow)}
#flowStudio .flow-terminal-node.is-end{border-color:var(--muted)}
#flowStudio .flow-terminal-mark{color:var(--blue)}
#flowStudio .flow-terminal-node.is-end .flow-terminal-mark{color:var(--muted)}
#flowStudio .flow-node.is-current{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft),0 5px 16px var(--shadow)}
#flowStudio .flow-node.is-visited{border-color:var(--green)}
#flowStudio .flow-current-dot{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
#flowStudio .flow-run-state{color:var(--muted)}
#flowStudio .flow-run-state.active{color:var(--green)}
#flowStudio .flow-event-btn{border-color:var(--line)}
#flowStudio .flow-event-btn:hover{border-color:var(--green)}
#flowStudio .flow-event-btn .icon{color:var(--blue)}
#flowStudio .flow-events-empty{border-color:var(--line)}
#flowStudio .flow-trace{background:var(--surface-alt);color:var(--sub)}
#flowStudio .flow-trace time,#flowStudio .flow-trace-empty{color:var(--muted)}
#flowStudio .flow-trace-muted{color:var(--red)}
#flowStudio .flow-legend-circle,#flowStudio .flow-legend-rect{border-color:var(--blue)}
#flowStudio .flow-validation{background:var(--amber-soft);border-color:var(--line);color:var(--amber)}
#flowStudio .flow-simulation-note{background:var(--accent-soft);border-color:var(--accent-line);color:var(--sub)}