:root{--bg:#0a0d1a;--card:#101528;--muted:#8b93a7;--brand:#00d4ff;--accent:#6ee7b7;--danger:#ff6b6b}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:linear-gradient(180deg,#0b132b,#1b213a);color:#eef2ff;font-family:system-ui,Segoe UI,Roboto,Arial}.wrap{min-height:100%;display:grid;place-items:center;padding:24px}.card{background:var(--card);border-radius:20px;box-shadow:0 10px 30px #0006;padding:24px;width:100%;max-width:520px}.brand{display:grid;place-items:center;margin-bottom:8px}.brand .logo{width:74px;height:74px;border-radius:18px;display:grid;place-items:center;font-size:40px;background:#0f1733;border:1px solid rgba(255,255,255,.07)}.brand .title{font-weight:800;letter-spacing:.4px;margin-top:10px}.brand .subtitle{color:#c6cbe1;font-size:12px;margin-top:2px}.form{display:flex;flex-direction:column;gap:6px;margin-top:12px}.form input{padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0f1733;color:#fff;outline:none}.btn{padding:12px 14px;border:0;border-radius:14px;cursor:pointer}.primary{background:linear-gradient(135deg,#00d4ff,#6366f1);color:#fff;font-weight:700;margin-top:8px}.foot-tip{color:#b8bed6;font-size:12px;margin-top:12px;text-align:center}.panel{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#0f1733;border-bottom:1px solid rgba(255,255,255,.08)}.topbar .user{font-size:14px;color:#dbe4ff}.dot{width:10px;height:10px;border-radius:999px;background:#666}.dot.on{background:#22c55e}.dot.off{background:#ef4444}.center{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px}.crest{font-size:54px;background:#0f1733;border:1px solid rgba(255,255,255,.08);width:96px;height:96px;border-radius:22px;display:grid;place-items:center}.city{font-size:28px;font-weight:800;letter-spacing:.5px;margin-top:6px}.quick-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:4px;width:100%;max-width:680px}.tile{background:#121a36;border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:12px;text-align:center;color:#e9ecff}.tile .ic{font-size:22px}.tile .tx{font-size:12px;margin-top:4px;color:#c9d0ea}.tile .pill{margin-top:6px;font-size:11px;padding:2px 8px;border-radius:999px;display:inline-block;background:#ffffff12}.tile .pill.ok{background:#22c55e26;color:#86efac}.tile .pill.err{background:#ef444426;color:#fecaca}.tile.danger{border-color:#ff6b6b4d;background:#2a1120}.status{margin:8px 0 4px;color:#aab2cf}.ptt{margin-top:8px;width:260px;height:260px;border-radius:999px;border:10px solid rgba(0,212,255,.25);background:radial-gradient(circle at 50% 40%,#0f1733,#0c1229);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#cbd5e1;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease}.ptt .mic{font-size:64px}.ptt.live{border-color:#6ee7b780;box-shadow:0 0 0 10px #6ee7b714,0 0 0 20px #6ee7b70a}.ptt:active{transform:scale(.98)}@media (max-width:640px){.quick-row{grid-template-columns:repeat(2,minmax(0,1fr))}}