:root{
  --bg:#f4f5f7;--surface:#fff;--surface2:#f0f2f5;--text:#14181f;--muted:#5d6675;--line:#e1e5ea;
  --accent:#f26a0f;--accent-ink:#fff;--accent-soft:#fff0e6;--ok:#12805c;--warn:#b26a00;--err:#c62828;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.06);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--r:14px;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  color-scheme:light;
}
:root[data-theme=dark]{--bg:#0f1216;--surface:#181c22;--surface2:#20252d;--text:#eaeef3;--muted:#98a2b3;--line:#2a3039;--accent:#ff7d2e;--accent-soft:#2c1c10;--ok:#43c59e;--warn:#f0b04a;--err:#ff6b6b;--shadow:0 1px 2px rgba(0,0,0,.4);color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f1216;--surface:#181c22;--surface2:#20252d;--text:#eaeef3;--muted:#98a2b3;--line:#2a3039;--accent:#ff7d2e;--accent-soft:#2c1c10;--ok:#43c59e;--warn:#f0b04a;--err:#ff6b6b;--shadow:0 1px 2px rgba(0,0,0,.4);color-scheme:dark}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none}
#app{display:grid;grid-template-rows:auto 1fr auto;height:100dvh;max-width:1100px;margin:0 auto}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}h2{font-size:16px}h1{font-size:22px}
p{margin:.4em 0}
code,.mono{font-family:var(--mono)}
button,input,select,textarea{font:inherit;color:inherit}
.ico{display:inline-flex;vertical-align:middle}.ico svg{display:block}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + var(--safe-t)) 16px 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;min-width:0}
.logo{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800}
.bt{font-weight:700;line-height:1.1}.bs{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface2);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}.chip.on .dot{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}

/* main */
main{overflow-y:auto;padding:14px 16px 24px;outline:none;-webkit-overflow-scrolling:touch}
.tabbar{display:flex;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + var(--safe-b))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;padding:6px 2px;color:var(--muted);font-size:11px;font-weight:600;border-radius:10px;cursor:pointer}
.tab.on{color:var(--accent)}.tab:active{background:var(--surface2)}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:0 0 12px;box-shadow:var(--shadow)}
.ch{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.row{display:flex;gap:8px;align-items:center}.wrap{flex-wrap:wrap}
.muted,.hint,.pmeta,.sub{color:var(--muted);font-size:13px}.ok{color:var(--ok)}.warn{color:var(--warn)}.err{color:var(--err)}
.kv{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:6px 12px;margin:0}
.kv dt{color:var(--muted);font-size:13px}.kv dd{margin:0;font-weight:550;overflow-wrap:anywhere}
.hero .hero-top{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.devimg{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.big{font-size:20px;font-weight:700}
.batt{margin-left:auto;text-align:right;min-width:90px}.bar{height:8px;background:var(--surface2);border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ok)}.bar i.low{background:var(--err)}.bv{font-size:12px;color:var(--muted);margin-top:3px}

/* buttons */
button{cursor:pointer}
button.primary,button.danger,button.ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:11px;padding:10px 14px;font-weight:600;border:1px solid transparent;min-height:42px}
button.primary{background:var(--accent);color:var(--accent-ink)}
button.ghost{background:var(--surface);border-color:var(--line)}
button.danger{background:transparent;border-color:var(--err);color:var(--err)}
button.sm{padding:6px 10px;min-height:34px;font-size:13px}
button:disabled{opacity:.45;cursor:not-allowed}
button.busy{opacity:.7;pointer-events:none}
button.link{border:0;background:none;color:var(--accent);padding:8px 4px;font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);font-weight:600;font-size:13px;text-align:left;min-height:74px}
.tile .ico{color:var(--accent)}.tile.danger .ico{color:var(--err)}.tile:active{background:var(--accent-soft)}
.foot{display:flex;justify-content:center;padding:6px}

/* connect */
.hero-connect{padding:8px 2px 14px}.hero-connect p{color:var(--muted)}
.conncard{margin-bottom:10px}
.conn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.conn .ico:first-child{color:var(--accent)}.conn .ct{flex:1}.ctitle{font-weight:650}.cdesc{font-size:13px;color:var(--muted)}
.conn:not(:disabled):active{border-color:var(--accent)}
.unsupported .conn{opacity:.6}
.note{background:var(--accent-soft);border-radius:12px;padding:12px;font-size:13px;margin-top:12px}

/* lists */
.glist{display:grid;gap:8px}
.gitem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.gitem>.ico:first-child{color:var(--accent)}.gt{flex:1;min-width:0}.gname{font-weight:600}.gsub{font-size:12px;color:var(--muted)}
.toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.edhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}.edhead h2{font-size:18px}
.edstatus{font-size:13px;color:var(--muted);margin-bottom:8px}.edstatus.dirty{color:var(--accent)}
.actionbar{position:sticky;bottom:-24px;display:flex;gap:8px;padding:10px 0 4px;background:linear-gradient(transparent,var(--bg) 30%)}
.actionbar .primary{flex:1}

/* params */
.search{width:100%;padding:10px 12px;border-radius:11px;border:1px solid var(--line);background:var(--surface);margin-bottom:10px}
.plist{display:grid;gap:8px}
.prow{display:grid;grid-template-columns:1fr;gap:8px;background:var(--surface);border:1px solid var(--line);border-left:3px solid transparent;border-radius:12px;padding:10px 12px}
.prow.dirty{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 40%,var(--surface))}
.prow.bad{border-left-color:var(--err)}
.pname{font-weight:600;font-size:14px}
.pctl input[type=text],.pctl input[type=number],.pctl select,.pctl textarea,.field input,.field select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface2)}
.pctl .twin{display:flex;gap:8px}.twin label{flex:1;font-size:12px;color:var(--muted);display:grid;gap:3px}
.perr{color:var(--err);font-size:12px;min-height:0}
.prow>.ghost{justify-self:end}
.bits{display:flex;flex-wrap:wrap;gap:6px}.bit{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:13px}
.rawval{font-family:var(--mono);font-size:12px;color:var(--muted);align-self:center;width:100%}
.field{display:grid;gap:6px;font-size:13px;color:var(--muted);margin-bottom:10px}.field.sm{max-width:120px}
.empty{color:var(--muted);text-align:center;padding:24px 8px}.empty.big{display:grid;justify-items:center;gap:8px;padding:60px 20px}
@media(min-width:640px){.prow{grid-template-columns:minmax(180px,1fr) minmax(220px,1.3fr) auto;align-items:start}}

/* errors */
.errs{list-style:none;margin:0;padding:0;display:grid;gap:8px}.errs li{background:var(--surface2);border-radius:10px;padding:10px;font-size:14px}
.eh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:3px}
.tag{background:var(--accent-soft);color:var(--accent);border-radius:7px;padding:1px 8px;font-size:12px;font-weight:700}
.errs code{font-size:12px;color:var(--muted)}

/* console */
.ctools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.ctools .search{flex:1;min-width:130px;margin:0}
.mini{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.quick{display:flex;gap:6px;margin-bottom:8px;overflow-x:auto}
.cwrap{position:relative}
.console{height:calc(100dvh - 330px);min-height:220px;overflow:auto;background:#0b0e12;color:#d7dde6;border-radius:12px;padding:8px;font:12px/1.5 var(--mono);border:1px solid var(--line)}
.console.tall{height:300px;margin-top:10px}
.cl{display:flex;gap:8px;white-space:pre-wrap;overflow-wrap:anywhere}.ts{color:#667080;flex:none}.l-tx .tx{color:#ffb070}.l-err .tx{color:#ff7b7b}.l-ok .tx{color:#5fd8ad}.l-dim .tx{color:#8a94a3}.l-frame .tx{color:#7aa7ff}.l-modem .tx{color:#e6d27a}
.jump{position:absolute;right:10px;bottom:10px;background:var(--accent);color:#fff;border:0;border-radius:999px;padding:7px 12px;font-weight:600;box-shadow:var(--shadow)}
.cmd{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}.cmd input{flex:1 1 150px;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}.cmd .m{font-family:var(--mono);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.pill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font:12px var(--mono)}
.chart{width:100%;height:auto;background:var(--surface2);border-radius:10px}
.progress{height:10px;background:var(--surface2);border-radius:6px;overflow:hidden;margin:12px 0 6px}.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.verdict{display:inline-block;padding:8px 18px;border-radius:10px;font-weight:800;margin:10px 0}.verdict.pass{background:var(--ok);color:#fff}.verdict.fail{background:var(--err);color:#fff}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.setrow input[type=checkbox]{width:44px;height:26px;accent-color:var(--accent)}
.setrow select{padding:8px;border-radius:9px;border:1px solid var(--line);background:var(--surface2)}
textarea{font-family:var(--mono);font-size:13px;margin-bottom:10px}

/* toasts / dialogs */
.toasts{position:fixed;left:0;right:0;bottom:calc(76px + var(--safe-b));display:grid;gap:8px;justify-items:center;pointer-events:none;z-index:50;padding:0 16px}
.toast{background:#1d232b;color:#fff;border-radius:12px;padding:11px 16px;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.3);max-width:480px;transition:.25s;animation:in .2s}
.toast.ok{background:#12805c}.toast.err{background:#c62828}.toast.warn{background:#b26a00}.toast.out{opacity:0;transform:translateY(8px)}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.dlg{border:0;border-radius:18px;padding:20px;max-width:min(92vw,420px);width:100%;background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.dlg::backdrop{background:rgba(8,10,14,.55)}.dlg h3{margin-bottom:8px}.dlgbody{color:var(--muted);margin-bottom:16px}.dlgact{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

@media(min-width:900px){
  #app{grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .top{grid-column:1/3}
  .tabbar{grid-row:2;grid-column:1;flex-direction:column;justify-content:flex-start;border-top:0;border-right:1px solid var(--line);padding:12px 8px;gap:4px}
  .tab{flex:none;flex-direction:row;gap:10px;font-size:14px;padding:11px 12px;justify-content:flex-start}
  main{grid-row:2;grid-column:2}
  .console{height:calc(100dvh - 300px)}
  .toasts{bottom:24px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* scan screen */
.scancard{padding:12px}
.qrframe{position:relative;aspect-ratio:4/3;max-height:32vh;margin:0 auto 10px;border-radius:16px;overflow:hidden;background:#0b0e12;display:grid;place-items:center;width:100%}
.qrvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.qrframe.live .qrvideo{display:block}
.qridle{display:grid;justify-items:center;gap:10px;color:#9aa4b2;text-align:center;padding:20px;font-size:14px}.qridle .ico{color:var(--accent)}
.qrcorners{position:absolute;inset:14%;border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.35);border:3px solid var(--accent)}
.qrhint{text-align:center;font-size:13px;color:var(--muted);min-height:20px;margin-bottom:8px}.qrhint.ok{color:var(--ok)}.qrhint.bad{color:var(--err)}
.center{justify-content:center}
button.big{padding:12px 20px;min-height:48px;font-size:15px}
.nstatus{font-size:12px;color:var(--muted);margin-bottom:8px}
.nlist{display:grid;gap:6px}
.nrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.nrow.away{opacity:.6}.nrow.hl{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.nt{flex:1;min-width:0}.nname{font-weight:650}.nsub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sig{display:inline-flex;align-items:flex-end;gap:2px;width:22px;height:20px}.sig i{display:block;width:4px;background:var(--line);border-radius:1px}.sig i.on{background:var(--ok)}
.tile small{font-weight:500;font-size:11px;color:var(--muted);margin-top:-4px}
.tile:disabled .ico{color:var(--muted)}
.tile.running{border-color:var(--accent);background:var(--accent-soft)}.tile.running .ico{animation:spin 1s linear infinite}
.tile.done{border-color:var(--ok)}.tile.done small{color:var(--ok)}.tile.bad{border-color:var(--warn)}.tile.bad small{color:var(--warn)}
.tile:disabled.running{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}