:root{--bg:#f3f5f8;--fg:#1c2128;--card:#fff;--side:#16202c;--sidefg:#c9d3de;--ok:#1a7f37;--bad:#b42318;--warn:#9a6700;--line:#d8dde3;--accent:#0969da;--muted:#59636e;--shadow:0 1px 2px rgba(16,24,40,.06)}
:root[data-theme="dark"]{--bg:#0f1318;--fg:#e6eaee;--card:#182029;--side:#0b0f14;--sidefg:#aab6c3;--ok:#4cc37a;--bad:#ff7b72;--warn:#e3b341;--line:#2a333d;--accent:#4c9aff;--muted:#9aa4af;--shadow:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1318;--fg:#e6eaee;--card:#182029;--side:#0b0f14;--sidefg:#aab6c3;--ok:#4cc37a;--bad:#ff7b72;--warn:#e3b341;--line:#2a333d;--accent:#4c9aff;--muted:#9aa4af;--shadow:none}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 "Segoe UI",system-ui,sans-serif}
[hidden]{display:none!important}
h1{font-size:1.3rem;margin:.2em 0}h2{font-size:1.05rem;margin:1.3em 0 .5em}
code{font-family:ui-monospace,Consolas,monospace;font-size:.9em}
button{font:inherit;padding:7px 12px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);cursor:pointer}
button:hover{border-color:var(--accent)}
button.active,button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.danger{border-color:var(--bad);color:var(--bad)}button.danger.armed{background:var(--bad);color:#fff}
button.small{padding:4px 9px;font-size:.85rem}
button.wide{width:100%;margin-top:12px;padding:10px}
input,select,textarea{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
textarea{width:100%;min-height:4.5em;font-family:ui-monospace,Consolas,monospace;font-size:.9rem}
ul{list-style:none;padding:0;margin:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0;box-shadow:var(--shadow)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.on{color:var(--ok)}.off{color:var(--bad)}.crit{color:var(--bad)}.warn{color:var(--warn)}.err{color:var(--bad)}
.muted,.hint{color:var(--muted);font-size:.9rem}
.facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0;font-size:.88rem}
.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.alert{border-left:4px solid var(--warn);padding:7px 10px;margin:6px 0;background:var(--card);border-radius:6px;box-shadow:var(--shadow)}
.alert.crit{border-color:var(--bad)}
label{display:block;margin:8px 0 2px}label.inline{display:inline-flex;gap:6px;align-items:center}
label>input:not([type=checkbox]),label>select{display:block;margin-top:3px;width:100%}
label.inline>input{display:inline;width:auto}
table{border-collapse:collapse;width:100%;font-size:.85rem}td,th{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}
th{position:sticky;top:0;background:var(--card)}
pre{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px;white-space:pre-wrap;word-break:break-all;font-size:.85rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 16px}
.w7{width:7em!important}.w10{width:10em}.w14{width:14em;max-width:50%}
.scroll{overflow-x:auto;max-height:420px;overflow-y:auto}.scroll.tall{max-height:75vh}
textarea.code{min-height:14em}
.varrow input,.varrow select{max-width:100%}
.steps li{margin:6px 0}
.copy{display:flex;gap:6px;align-items:stretch}.copy input{flex:1;font-family:ui-monospace,Consolas,monospace;font-size:.85rem}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.logincard{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 8px 30px rgba(0,0,0,.08)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.1rem}
.brand.big{font-size:1.4rem;margin-bottom:4px}
.logo{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--accent);color:#fff;font-size:.85rem;font-weight:700}

/* shell */
.shell{display:flex;min-height:100vh}
.side{width:230px;flex:none;background:var(--side);color:var(--sidefg);display:flex;flex-direction:column;padding:16px 10px;position:sticky;top:0;height:100vh}
.side .brand{color:#fff;padding:0 8px 16px}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side .tab{background:transparent;border:0;color:var(--sidefg);text-align:left;padding:9px 10px;border-radius:6px}
.side .tab:hover{background:rgba(255,255,255,.06);color:#fff}
.side .tab.active{background:var(--accent);color:#fff}
.sidefoot{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px;border-top:1px solid rgba(255,255,255,.08)}
.sidefoot .muted{color:var(--sidefg)}
.sidefoot button{background:transparent;color:var(--sidefg);border-color:rgba(255,255,255,.2)}
main{flex:1;min-width:0;padding:8px 24px 40px;max-width:1300px}
.devgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:0 12px}
.devgrid>:not([data-host]),.devgrid>.card.wide{grid-column:1/-1}
.devgrid>.card{margin:6px 0}
.devhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.devhead strong{font-size:1.05rem}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--bad)}.dot.on{background:var(--ok)}
.tag{font-size:.75rem;border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--muted)}
.devhead select{margin-left:auto}
@media (max-width:860px){
  .shell{flex-direction:column}
  .side{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;padding:8px}
  .side .brand{padding:4px 8px}
  .side nav{flex-direction:row;overflow-x:auto;flex-basis:100%;order:3}
  .side .tab{white-space:nowrap}
  .sidefoot{border:0;margin-left:auto}
  main{padding:8px 16px 40px}
  .devgrid{grid-template-columns:1fr}
}

/* remote viewer */
.remote{position:fixed;inset:0;z-index:50;background:#0b0e12;display:flex;flex-direction:column;color:#e6eaee}
.rbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 10px;background:#161c24;border-bottom:1px solid #2a333d}
.rbar button,.rbar select{background:#1f2731;color:#e6eaee;border-color:#344050}
.rbar button.danger{color:#ff7b72;border-color:#ff7b72}
.rbar .muted{color:#9aa4af}
.spacer{flex:1}
.rview{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center}
.rview.actual{display:block}
.rview canvas{outline:none;cursor:default;max-width:100%;max-height:100%;touch-action:none}
.rview.actual canvas{max-width:none;max-height:none}
.rtextbox{padding:8px 10px;background:#161c24;border-bottom:1px solid #2a333d}
.rtextbox textarea{background:#0f1318;color:#e6eaee;border-color:#344050}

/* 0.6: dashboard, device page, terminal */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:14px 0 4px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow);border-top:3px solid var(--line)}
.tile.good{border-top-color:var(--ok)}.tile.warn{border-top-color:var(--warn)}.tile.bad{border-top-color:var(--bad)}
.tval{font-size:1.6rem;font-weight:600}.tlabel{color:var(--muted);font-size:.85rem}
.click{cursor:pointer}.alert.click:hover,.devcard:hover{border-color:var(--accent)}
.devcard{cursor:pointer}
.devhead h1{font-size:1.35rem;margin:0}
.subtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:14px 0 10px}
.subtabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:8px 12px}
.subtabs button.active{border-bottom-color:var(--accent);color:var(--accent);font-weight:600}
.devbody{min-height:200px}
pre.term{background:#0c0f14;color:#d6dde6;border-color:#232b35;height:60vh;overflow:auto;white-space:pre-wrap;font-size:.85rem;margin:8px 0}
.terminput{flex:1;font-family:ui-monospace,Consolas,monospace}
.prompt{align-self:center;font-family:ui-monospace,Consolas,monospace;color:var(--muted)}
.copy .grow{flex:1}
label.button{display:inline-flex;align-items:center;margin:0;padding:4px 9px;font-size:.85rem;border:1px solid var(--line);border-radius:6px;background:var(--card);cursor:pointer}
label.button:hover{border-color:var(--accent)}
ul.plain{padding-left:18px;list-style:disc}ul.plain li{margin:2px 0;font-size:.9rem}
details.hist{border-bottom:1px solid var(--line);padding:6px 0}details.hist summary{cursor:pointer}
.spacer{flex:1}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.bulk{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--accent);border-radius:10px;padding:8px 12px;margin:6px 0}
input.pick{width:16px;height:16px;margin:0;cursor:pointer}