:root{color-scheme:dark;--bg: #12151c;--bg-elev: #1b2030;--bg-elev-2: #242a3d;--border: #343b52;--text: #e8ecf5;--muted: #9aa3b8;--accent: #6ee7b7;--warn: #fbbf24;--danger: #f87171;--ok: #34d399;--unknown: #6b7280;--font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;overflow-x:clip}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--border);background:var(--bg-elev-2);color:var(--text);border-radius:6px;padding:.4rem .75rem}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}button.danger{border-color:var(--danger);color:var(--danger)}button.toggle.active{border-color:var(--warn);background:#3b2a12;color:var(--warn);box-shadow:inset 0 0 0 1px #fbbf2440}input{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.45rem .6rem}.shell{max-width:1100px;margin:0 auto;padding:calc(1.25rem + env(safe-area-inset-top)) calc(1.5rem + env(safe-area-inset-right)) calc(3rem + env(safe-area-inset-bottom)) calc(1.5rem + env(safe-area-inset-left));min-width:0}.topbar{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-width:0}.topbar-row-page{align-items:flex-end}.topbar-toolbar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:.75rem;min-width:0}.topbar-heading{min-width:0}.topbar-heading h1{margin:0}.nav-links{display:flex;gap:.75rem;align-items:center}.nav-links a{color:var(--muted);font-size:.92rem}.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--accent)}.page-lead{margin:-.75rem 0 1.25rem}.section-title{margin:0 0 .85rem;font-size:1rem}.users-layout{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}.stack-form{display:grid;gap:.85rem}.field{display:grid;gap:.35rem}.field-label{color:var(--muted);font-size:.85rem}select{font:inherit;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.45rem .6rem}.banner.success{background:#143528;border-color:var(--accent);color:var(--accent)}.user-menu{position:relative}.user-menu-trigger{display:inline-flex;align-items:center;gap:.35rem}.user-menu-trigger:after{content:"▾";font-size:.75rem;color:var(--muted)}.user-menu-panel{position:absolute;top:calc(100% + .35rem);right:0;min-width:9rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:.35rem;box-shadow:0 10px 24px #00000059;z-index:20}.user-menu-item{width:100%;text-align:left;border:none;background:transparent;padding:.5rem .65rem}.user-menu-item:hover{background:var(--bg-elev-2);border-color:transparent}.brand{display:inline-flex;align-items:center;gap:.45rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;font-size:.85rem;color:var(--muted)}.brand-logo{width:1rem;height:1rem;object-fit:contain;flex-shrink:0}.login .brand{font-size:1.35rem;color:var(--text);margin:0 0 .35rem}.login .brand-logo{width:1.35rem;height:1.35rem}.muted{color:var(--muted)}.error{color:var(--danger)}.banner{background:#3b2a12;border:1px solid var(--warn);color:var(--warn);padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem}.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:1rem 1.15rem}.table-card{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(min-width:721px){.table-card{overflow-x:visible}}.grid{display:grid;gap:1rem}.lights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.light{display:flex;align-items:center;gap:.65rem}.dot{width:12px;height:12px;border-radius:50%;background:var(--unknown);box-shadow:0 0 8px currentColor}.dot.ok{background:var(--ok);color:var(--ok)}.dot.warn{background:var(--warn);color:var(--warn)}.dot.bad{background:var(--danger);color:var(--danger)}.device-table{width:100%;min-width:34rem;border-collapse:collapse}.device-table th,.device-table td{text-align:left;padding:.65rem .5rem;border-bottom:1px solid var(--border)}.device-table tbody tr{cursor:pointer}.device-table tbody tr:hover{background:var(--bg-elev-2)}.io-row{display:grid;grid-template-columns:1.2fr 1fr 2fr;gap:.75rem;align-items:center;padding:.65rem 0;border-bottom:1px solid var(--border)}.io-row:last-child{border-bottom:none}.io-actions{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.login{max-width:360px;margin:max(12vh,calc(1.5rem + env(safe-area-inset-top))) max(1rem,env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}.login form{display:grid;gap:.75rem}.phase-wrap{overflow-x:auto;padding:.5rem 0}.phase-group{fill:none;stroke:#3d4d62;stroke-width:1.5;stroke-dasharray:4 3;pointer-events:none}.phase-duration{fill:var(--muted);font-size:12px;text-anchor:middle}.phase-node{fill:var(--bg-elev-2);stroke:var(--border);stroke-width:1.5}.phase-node.active{fill:#143528;stroke:var(--accent)}.phase-label{fill:var(--muted);font-size:12px;text-anchor:middle}.phase-node.active+.phase-label,.phase-label.active{fill:var(--accent);font-weight:650}.phase-edge{stroke:var(--border);fill:none;stroke-width:1.5;marker-end:url(#arrow)}.phase-edge-active{stroke:#3d4d62}.phase-edge-progress{stroke:var(--accent);fill:none;stroke-width:2.5;stroke-linecap:round;pointer-events:none}.phase-cursor{fill:var(--accent);stroke:#0f1f18;stroke-width:1.25;pointer-events:none}.actions-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.install-prompt{position:relative}.install-button{color:var(--accent)}.install-help{position:absolute;top:calc(100% + .4rem);right:0;z-index:30;width:min(19rem,calc(100vw - 2rem));padding:.75rem;border:1px solid var(--border);border-radius:8px;background:var(--bg-elev);color:var(--text);box-shadow:0 10px 24px #00000059;font-size:.9rem;line-height:1.4}.login .install-prompt{margin-top:1rem}.login .install-button{width:100%}.login .install-help{position:static;width:auto;margin-top:.5rem}.pwa-update{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));left:max(1rem,env(safe-area-inset-left));z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:42rem;margin:0 auto;padding:.75rem 1rem;border:1px solid var(--accent);border-radius:10px;background:var(--bg-elev);box-shadow:0 10px 32px #00000080}.pwa-update-actions{display:flex;flex-shrink:0;gap:.5rem}.mode-switch{margin-bottom:.75rem}.mode-switch-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);width:min(100%,17.5rem);height:2.75rem;padding:.25rem;background:#0c0e13;border:1px solid #2a3144;border-radius:999px;box-shadow:inset 0 2px 5px #0000008c,inset 0 -1px #ffffff0a}.mode-switch-track:before,.mode-switch-track:after{content:"";position:absolute;top:.45rem;bottom:.45rem;width:1px;background:#ffffff12;pointer-events:none;z-index:1}.mode-switch-track:before{left:33.333%}.mode-switch-track:after{left:66.666%}.mode-switch-thumb{position:absolute;top:.25rem;left:.25rem;width:calc((100% - .5rem) / 3);height:calc(100% - .5rem);border-radius:999px;background:linear-gradient(180deg,#5c6778,#3d4656 48%,#323a47);box-shadow:0 2px 5px #00000073,0 1px #ffffff24 inset,0 -1px #00000040 inset;transition:transform .18s ease-out;pointer-events:none;z-index:0}.mode-switch-track--off .mode-switch-thumb{transform:translate(0)}.mode-switch-track--on .mode-switch-thumb{transform:translate(100%)}.mode-switch-track--auto .mode-switch-thumb{transform:translate(200%)}.mode-switch-option{position:relative;z-index:2;border:none;border-radius:999px;padding:0;min-width:0;background:transparent;color:var(--muted);font-size:.82rem;font-weight:550;letter-spacing:.03em;text-transform:uppercase;transition:color .15s ease}.mode-switch-option[aria-checked=true]{color:#f3f6fb;text-shadow:0 1px 1px rgba(0,0,0,.35)}.mode-switch-option:hover:not(:disabled):not([aria-checked=true]){color:var(--text);border-color:transparent}.mode-switch-track:has(.mode-switch-option:disabled){opacity:.55}@media(max-width:720px){.shell{padding:calc(.85rem + env(safe-area-inset-top)) calc(.85rem + env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) calc(.85rem + env(safe-area-inset-left))}.topbar{gap:.35rem;margin-bottom:1rem}.topbar-heading h1{font-size:1.65rem}.topbar-toolbar,.nav-links{gap:.5rem}.nav-links a{font-size:.88rem}.install-button{font-size:.88rem;padding:.35rem .55rem;white-space:nowrap}.table-card{overflow-x:visible;padding:.75rem}.device-table{min-width:0}.device-table thead{display:none}.device-table tbody tr{display:block;padding:.75rem 0;border-bottom:1px solid var(--border)}.device-table tbody tr:last-child{border-bottom:none}.device-table td{display:grid;grid-template-columns:minmax(5rem,6.5rem) minmax(0,1fr);gap:.65rem;align-items:start;padding:.35rem 0;border-bottom:none}.device-table td:before{content:attr(data-label);color:var(--muted);font-size:.82rem;font-weight:550;letter-spacing:.03em;text-transform:uppercase}.device-table td[data-label=Name]:before{content:none}.device-table td[data-label=Name],.device-table td[data-label=Username]{display:block;padding-top:0;padding-bottom:.5rem}.device-table td[data-label=Username]:before{content:none}.lights,.io-row,.users-layout{grid-template-columns:1fr}.io-row{gap:.45rem}.io-actions input{min-width:0;width:7rem}.pwa-update{align-items:stretch;flex-direction:column}.pwa-update-actions button{flex:1}}@media(pointer:coarse){button,input,select{min-height:44px}}