:root{--bg:#050b14;--card:#0c1826;--line:#17304a;--tx:#d9ecff;--mut:#7f9bb8;--ac:#22d3ee;--ok:#34d399;--bad:#f87171}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 50% -10%,#0d2a44,var(--bg) 60%) fixed;color:var(--tx);font:15px/1.45 system-ui,Segoe UI,Roboto,sans-serif;min-height:100vh}
h1,h2,h3{margin:0 0 .6em;font-weight:600}
h2{font-size:1.15rem}
a{color:var(--ac)}
input,select,button,textarea{font:inherit;color:inherit}
input,select{width:100%;background:#07111d;border:1px solid var(--line);border-radius:8px;padding:.6em .7em;margin:.25em 0 .7em}
input:focus,select:focus{outline:2px solid var(--ac);outline-offset:-1px}
label{font-size:.85rem;color:var(--mut)}
button{background:var(--ac);color:#02222a;border:0;border-radius:8px;padding:.6em 1em;font-weight:600;cursor:pointer}
button.ghost{background:transparent;color:var(--tx);border:1px solid var(--line)}
button.sm{padding:.3em .6em;font-size:.82rem}
button.danger{background:transparent;color:var(--bad);border:1px solid #5b2330}
.wrap{max-width:980px;margin:0 auto;padding:1em}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1em;margin-bottom:1em}
.row{display:flex;gap:.6em;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.mut{color:var(--mut);font-size:.85rem}
.err{color:var(--bad);min-height:1.3em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8em}
header{display:flex;align-items:center;gap:.8em;padding:.7em 1em;border-bottom:1px solid var(--line);position:sticky;top:0;background:#050b14e6;backdrop-filter:blur(6px);z-index:5}
header b{color:var(--ac);letter-spacing:.15em}
nav{display:flex;gap:.3em;overflow-x:auto;padding:.6em 1em}
nav button{background:transparent;color:var(--mut);border:1px solid transparent;white-space:nowrap}
nav button.on{color:var(--ac);border-color:var(--line);background:var(--card)}
.login{max-width:380px;margin:8vh auto;padding:1em}
.login h1{text-align:center;color:var(--ac);letter-spacing:.3em;font-weight:300;font-size:2rem}
.orbbox{text-align:center;padding:1.2em 0}
#orb{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7dedff,#0891b2 45%,#06334a 75%);box-shadow:0 0 40px #22d3ee55,inset 0 0 30px #012;border:2px solid #22d3ee88;color:#fff;font-size:2.6rem;transition:.2s}
#orb.on{animation:pulse 1.1s infinite;box-shadow:0 0 70px #22d3eecc}
#orb.busy{filter:hue-rotate(60deg)}
@keyframes pulse{50%{transform:scale(1.08)}}
#log{max-height:42vh;overflow:auto;display:flex;flex-direction:column;gap:.5em}
.msg{padding:.5em .8em;border-radius:12px;max-width:85%;white-space:pre-wrap;word-wrap:break-word}
.msg.u{align-self:flex-end;background:#0e3a4d}
.msg.a{align-self:flex-start;background:#111f31;border:1px solid var(--line)}
.dev{display:flex;flex-direction:column;gap:.5em}
.dev .st{font-size:.8rem;color:var(--mut)}
.dev.is-on{border-color:var(--ac);box-shadow:0 0 18px #22d3ee33}
.dev.is-on .st{color:var(--ac)}
.cam img,.cam .noimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:#000;display:block}
.cam .noimg{display:grid;place-items:center;color:var(--mut);font-size:.85rem}
code,pre{background:#07111d;border:1px solid var(--line);border-radius:6px;padding:.15em .4em;font-size:.82rem}
pre{padding:.7em;overflow:auto;white-space:pre-wrap;word-break:break-all}
table{width:100%;border-collapse:collapse}
td,th{padding:.5em;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:.88rem}
.chk{display:inline-flex;align-items:center;gap:.3em;margin-right:.7em;color:var(--tx)}
.chk input{width:auto;margin:0}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--bad);margin-right:.4em}
.dot.ok{background:var(--ok)}
.done{text-decoration:line-through;color:var(--mut)}