:root{--bg:#0f1115;--card:#171a21;--line:#2a2f3a;--fg:#eef;--mut:#9aa3b2;--accent:#2b8a5a;--err:#e05555}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,sans-serif}
header{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--card)}
header span{margin-left:auto;color:var(--mut)}
main{max-width:1000px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin:12px 0}
.narrow{max-width:360px;margin:8vh auto}
h2{margin:.2rem 0 1rem}h3{margin:.2rem 0 .6rem}
input,select{width:100%;padding:.6rem;margin:.3rem 0;background:#0f1218;border:1px solid var(--line);color:var(--fg);border-radius:8px}
button{padding:.55rem .9rem;margin:.2rem;border:1px solid var(--line);background:#1d2230;color:var(--fg);border-radius:8px;cursor:pointer;font-size:1rem}
button:hover{border-color:#3a4254}
button.primary,#loginBtn{background:var(--accent);border-color:var(--accent);width:100%}
button.ghost{background:transparent}
button.on{background:var(--accent);border-color:var(--accent)}
.err{color:var(--err);min-height:1.2em}
.muted,.log{color:var(--mut)}
nav#tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
nav#tabs button.active{background:var(--accent);border-color:var(--accent)}
table{width:100%;border-collapse:collapse;margin-top:8px}
th,td{text-align:left;padding:.5rem;border-bottom:1px solid var(--line)}
th{color:var(--mut);font-weight:600}
.pill{font-size:.75rem;padding:.1rem .5rem;border-radius:999px;border:1px solid var(--line)}
.on-pill{color:#8f8;border-color:#2b8a5a}.off-pill{color:#f99;border-color:#73323a}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.token{font-family:monospace;background:#0f1218;padding:.3rem .5rem;border-radius:6px;word-break:break-all}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:12px;z-index:9}
.modal-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;max-width:560px;width:100%;text-align:center}
.modal-head{display:flex;align-items:center}.modal-head b{margin-right:auto}
#cam{width:100%;max-width:520px;aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:8px;border:1px solid var(--line)}
.controls,.ptz{margin:.4rem 0}
.ptz button{width:3rem;height:3rem;font-size:1.3rem}
.log{font:12px monospace;text-align:left;max-height:120px;overflow:auto;margin-top:8px;white-space:pre-wrap}
.wifi{margin:.6rem 0;text-align:left;border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem}
.wifi summary{cursor:pointer}
.wifi input{margin:.3rem 0}