:root{
  --bg:#0b1020; --bg2:#0f1630; --card:#151d38; --card2:#1b2547;
  --line:#26315a; --txt:#e8ecfb; --muted:#94a0c8; --brand:#6366f1; --brand2:#8b5cf6;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%,#20285010,transparent),
             radial-gradient(1000px 500px at -10% 10%,#4f46e520,transparent),var(--bg);
  color:var(--txt);min-height:100dvh;-webkit-font-smoothing:antialiased;
}
a{color:var(--brand)}
.wrap{max-width:480px;margin:0 auto;padding:18px 16px 90px}
.wrap.wide{max-width:1080px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
.brand .logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:grid;place-items:center;font-weight:900;color:#fff;box-shadow:0 6px 20px #6366f155}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;margin-top:16px;box-shadow:0 10px 30px #0006}
.card h3{margin:0 0 4px}
.muted{color:var(--muted)}
.sub{color:var(--muted);font-size:13px;margin:2px 0 0}
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 6px}
input,select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);
  background:#0d1430;color:var(--txt);font-size:15px;outline:none}
input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px #6366f133}
.btn{width:100%;padding:14px;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;margin-top:16px;
  box-shadow:0 8px 24px #6366f150;transition:transform .05s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:#0d1430;border:1px solid var(--line);box-shadow:none;color:var(--txt)}
.btn.sm{width:auto;padding:9px 14px;font-size:14px;margin-top:0}
.btn.danger{background:linear-gradient(135deg,#ef4444,#f97316)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.stat{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:14px}
.stat b{font-size:26px;display:block}
.stat span{color:var(--muted);font-size:12px}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pill.ok{background:#22c55e22;color:#4ade80}
.pill.warn{background:#f59e0b22;color:#fbbf24}
.pill.bad{background:#ef444422;color:#f87171}
.pill.info{background:#6366f122;color:#a5b4fc}
video,canvas{width:100%;border-radius:16px;background:#000}
.camera{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:16px;border:2px solid var(--line)}
.camera video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camera .ring{position:absolute;inset:12%;border:3px dashed #ffffff55;border-radius:50%;pointer-events:none}
.status-line{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:8px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)} .dot.warn{background:var(--warn)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111a35;border:1px solid var(--line);
  padding:12px 18px;border-radius:12px;max-width:90%;z-index:99;box-shadow:0 10px 30px #0008;font-size:14px;display:none}
.toast.show{display:block}
.toast.ok{border-color:#22c55e66}.toast.bad{border-color:#ef444466}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;position:sticky;top:0;background:var(--bg2)}
.tabs{display:flex;gap:6px;background:#0d1430;padding:5px;border-radius:14px;margin-top:14px;overflow:auto}
.tabs button{flex:1;white-space:nowrap;padding:10px;border:none;border-radius:10px;background:transparent;color:var(--muted);font-weight:700;cursor:pointer}
.tabs button.active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tag{font-size:11px;color:var(--muted);border:1px solid var(--line);padding:3px 8px;border-radius:8px}
.hide{display:none!important}
.list-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);gap:10px}
.list-item:last-child{border-bottom:none}
.scroll{max-height:60vh;overflow:auto}
.mono{font-variant-numeric:tabular-nums}
.center{text-align:center}
.mt{margin-top:14px}
.spinner{width:20px;height:20px;border:3px solid #ffffff40;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.bignum{font-size:44px;font-weight:800;letter-spacing:1px;text-align:center}