:root{
  --bg:#071121; --panel:#101d31; --panel2:#17263d; --card:#22364f;
  --text:#f4f7ff; --muted:#9ca9bd; --blue:#2f7dff; --cyan:#43d9ff;
  --danger:#ff5b7c; --good:#33d69f; --border:rgba(255,255,255,.11);
  --shadow:0 20px 60px rgba(0,0,0,.38);
}
body.light{
  --bg:#eef4fb; --panel:#fff; --panel2:#f7fbff; --card:#fff;
  --text:#122033; --muted:#718096; --border:rgba(10,50,90,.12);
  --shadow:0 20px 50px rgba(32,76,126,.18);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.app{max-width:520px;margin:0 auto;min-height:100vh;padding-bottom:92px;background:radial-gradient(circle at 20% 0%,#162c52 0,transparent 42%),var(--bg)}
.top{height:58px;display:grid;grid-template-columns:96px 1fr 50px;align-items:center;padding:0 14px;background:rgba(0,0,0,.12);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}
.title{text-align:center;font-weight:900;font-size:18px}.title span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.back,.round{border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);border-radius:14px;padding:9px 10px;font-weight:800}
.round{width:42px;height:42px}.hidden{display:none!important}
#view{padding:16px}
.hero,.section{border-radius:28px;background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--border);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.logoRow{display:flex;align-items:center;gap:14px}
.logo{width:76px;height:76px;border-radius:20px;object-fit:cover;border:1px solid var(--border);box-shadow:0 0 28px rgba(0,180,255,.28)}
h1,h2,h3{margin:0}.muted{color:var(--muted)}
.pill{border:1px solid var(--border);background:rgba(255,255,255,.06);border-radius:999px;padding:8px 10px;color:var(--muted);font-size:13px;font-weight:800}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.stat{background:rgba(0,0,0,.16);border:1px solid var(--border);border-radius:18px;padding:14px;min-height:82px}.stat small{color:var(--muted);font-weight:800}.stat b{display:block;font-size:22px;margin-top:8px}.good{color:var(--good)}
.btn{width:100%;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:18px;padding:15px;font-weight:900;font-size:15px;margin-top:10px}
.btn.primary{border:0;background:linear-gradient(90deg,var(--blue),#0f63ff);color:#fff}.btn.danger{background:#ffd4dd;color:#e0003f}.btn.admin{background:linear-gradient(90deg,#ffcc4d,#ff8a00);color:#1b1300;border:0}
.device,.help{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:14px;margin:10px 0}.deviceTop{display:flex;justify-content:space-between;gap:10px}.device b{font-size:17px}.meta{color:var(--muted);font-size:13px;line-height:1.35;margin-top:6px}.actions{display:flex;gap:8px;margin-top:12px}.actions .btn{margin-top:0;padding:11px}
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:min(488px,calc(100% - 28px));height:74px;border-radius:26px;background:rgba(13,24,43,.9);border:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;backdrop-filter:blur(14px)}
body.light .tabs{background:rgba(255,255,255,.86)}.tabs button{border:0;background:transparent;color:var(--muted);border-radius:18px;font-weight:900}.tabs button span{display:block;font-size:11px;margin-top:4px}.tabs button.active{background:rgba(47,125,255,.18);color:var(--cyan)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:22px;z-index:20}.modalBox{max-width:480px;width:100%;max-height:86vh;overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:26px;padding:18px}.qr{width:100%;border-radius:20px;background:#fff;margin-top:12px}.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}.chips .btn{margin:0}.input{width:100%;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:16px;padding:14px;font-size:16px;margin:10px 0}