/* Workspace preferences and custom device editor. Device colors remain physical in both themes. */
.theme-toggle{font-size:10px;padding:7px 9px;gap:6px}.theme-toggle>span:first-child{font-size:17px}.create-device{margin:0 16px 15px;width:calc(100% - 32px);background:#e5f5f0;color:#087d70;border-color:#c7e7dd;font-size:10px}.create-device .icon{width:14px}.device-form{display:flex;flex-direction:column;gap:13px;max-width:510px}.device-form label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--ink);font-weight:500}.device-form input,.device-form textarea{width:100%;border:1px solid var(--border);border-radius:5px;padding:9px;background:#f8fafb;color:inherit;font:inherit}.device-form input[type=color]{padding:3px;height:35px}.device-form textarea{resize:vertical}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.form-intro{margin:0;font-size:12px;color:#708691;line-height:1.8}.device-form small{font-size:10px;color:#708691}.form-error{color:#cf514e;font-size:11px;min-height:14px;margin:0;line-height:1.8}.form-actions{display:flex;justify-content:flex-end}.plc-note{font-size:9px;line-height:1.9;color:#849aa5}.plc-status{font-size:7px;color:#8c9fa8}.plc-status.on{color:#00a57f}.plc-output{display:grid;grid-template-columns:35px 1fr 36px;align-items:center;gap:6px;margin:9px 0}.plc-output label{font-size:10px}.plc-output select{max-width:100%;font-size:9px;border:1px solid var(--border);border-radius:3px;padding:5px;background:#f7faf9;color:inherit}.io-state{border:1px solid #d7e2e5;background:#f2f6f7;color:#7c919b;font-size:8px;padding:5px;border-radius:3px;text-align:center}.io-state.on{border-color:#9edcc5;background:#daf6e9;color:#048461}.plc-section>.btn{font-size:9px;margin-top:12px;width:100%}.viewport-fullscreen .topbar,.viewport-fullscreen .workspace-heading,.viewport-fullscreen .nav-rail,.viewport-fullscreen .library,.viewport-fullscreen .inspector{display:none}.viewport-fullscreen .app-shell{display:block;height:100dvh;min-height:0}.viewport-fullscreen .main{height:100dvh;padding-top:10px}.viewport-fullscreen .canvas-wrap{min-height:150px}
:root[data-theme=dark]{color-scheme:dark;color:#d5e2e9;background:#111d27;--ink:#d7e7ee;--border:#2e4250;--muted:#91a5b3;--teal:#48d3b7}
[data-theme=dark] .topbar,[data-theme=dark] .library,[data-theme=dark] .inspector,[data-theme=dark] .editor-toolbar,[data-theme=dark] .simulation-panel,[data-theme=dark] dialog{background:#192a36;border-color:var(--border);color:#d5e2e9}
[data-theme=dark] .brand-wordmark strong{color:#d9e9ec}[data-theme=dark] .brand-wordmark small{color:#84b9ae}[data-theme=dark] .brand-logo{border-radius:6px}[data-theme=dark] .main{background:#111d27}[data-theme=dark] .nav-rail{background:#0c1721}
[data-theme=dark] .btn,[data-theme=dark] .component-card,[data-theme=dark] .filters button,[data-theme=dark] .three-tools button,[data-theme=dark] .zoom-control,[data-theme=dark] .field-row input,[data-theme=dark] .field-row select,[data-theme=dark] .modal-input,[data-theme=dark] .device-form input,[data-theme=dark] .device-form textarea,[data-theme=dark] .plc-output select{background:#223644;border-color:#354c5c;color:#ccdde5}
[data-theme=dark] .library-search input,[data-theme=dark] .room-settings input,[data-theme=dark] .room-console-head select{background:#12232e;border-color:#354c5c;color:#c4dbe4}[data-theme=dark] .component-card:hover{background:#28473f;border-color:#4a9f89}
[data-theme=dark] .filters button.active,[data-theme=dark] .tool.active,[data-theme=dark] .template-btn,[data-theme=dark] .create-device,[data-theme=dark] .apply-settings{background:#1d493f;border-color:#2b6857;color:#75e0c3}
[data-theme=dark] .run-btn{background:#039780;color:white;border-color:#039780}[data-theme=dark] .run-btn.running{background:#385562;border-color:#385562}[data-theme=dark] .mode-switch,[data-theme=dark] .view-switch{background:#11222d;border-color:#2e4250}[data-theme=dark] .mode-switch button.active,[data-theme=dark] .view-switch button.active{background:#304b5b;color:#d4e8ed}
[data-theme=dark] .component-thumb,[data-theme=dark] .inspect-preview{background:#31454f}[data-theme=dark] .tip,[data-theme=dark] .modal-note,[data-theme=dark] .board-spec{background:#152f36;border-color:#2d5555;color:#9bb9ba}[data-theme=dark] .tip strong{color:#b5dace}
[data-theme=dark] .canvas-wrap{background:#12212b;border-color:#354956}[data-theme=dark] #cabinet>rect[fill="#eaf0f2"]{fill:#12212b}[data-theme=dark] .canvas-hint,[data-theme=dark] .three-tools{background:#1b303de8;border-color:#3a5262;color:#afc2cb}[data-theme=dark] .canvas-tag{background:#243d48;border-color:#3b5a64;color:#a4c5ca}[data-theme=dark] .canvas-caption,[data-theme=dark] .canvas-state{color:#98b3c0}
[data-theme=dark] .status-chip,[data-theme=dark] .count,[data-theme=dark] .project-badge,[data-theme=dark] .room-outputs span,[data-theme=dark] .io-state{background:#304551;border-color:#435e6c;color:#aec3cd}[data-theme=dark] .status-chip.live,[data-theme=dark] .room-outputs span.on,[data-theme=dark] .io-state.on{background:#1f5244;border-color:#368e6d;color:#7eebba}[data-theme=dark] .status-chip.fault{background:#552f34;color:#ffaaaa}
[data-theme=dark] .temperature,[data-theme=dark] .number,[data-theme=dark] .inspect-name h3,[data-theme=dark] .field-row span,[data-theme=dark] .breadcrumb strong{color:#c5e4eb}[data-theme=dark] .control{background:#273e4d;border-color:#435763;color:#c1d4df}[data-theme=dark] .control.start{background:#1f4a40;color:#83d4b9}[data-theme=dark] .control.stop{background:#4d3037;color:#edabae}[data-theme=dark] .control.trip{background:#4c4130;color:#e4c488}
[data-theme=dark] .library-bottom,[data-theme=dark] .inspector-header,[data-theme=dark] .inspector-section,[data-theme=dark] .pin-row,[data-theme=dark] .field-row,[data-theme=dark] .sim-heading,[data-theme=dark] .room-console-head,[data-theme=dark] .room-settings,[data-theme=dark] .room-reading,[data-theme=dark] .sim-metric,[data-theme=dark] .wire-row{border-color:#2d4351}[data-theme=dark] .wire-row{background:#192a36;color:#bfdae5}[data-theme=dark] .meter{background:#314957}[data-theme=dark] .empty-inspector h3,[data-theme=dark] .inspector-section h3,[data-theme=dark] .help-step strong{color:#b8cdd8}
@media(max-width:1100px){.theme-label{display:none}.theme-toggle{min-width:30px;padding:4px}.topbar{gap:9px}}@media(max-width:760px){.topbar .brand-wordmark{display:none}.topbar .project-nav{min-width:0}.form-grid{grid-template-columns:repeat(2,1fr)}.theme-toggle{margin-left:auto}dialog{max-width:94vw}.device-form{max-width:100%}}@media(max-height:750px){dialog{max-height:90dvh;overflow:auto}.device-form{gap:9px}}