*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:radial-gradient(circle at 86% 0,rgba(36,129,255,.22),transparent 32%),radial-gradient(circle at 12% 100%,rgba(36,129,255,.10),transparent 30%),#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.app{position:relative;width:min(520px,100%);min-height:100vh;margin:0 auto;padding:104px 14px 32px}
.hero{min-height:150px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:20px 4px}
.label{color:#9ca3af;font-size:12px;text-transform:uppercase;letter-spacing:.18em;margin-bottom:12px}
h1{margin:0;font-size:52px;line-height:.9;font-weight:950;font-style:italic;letter-spacing:-2.4px}
h1 span{color:#2481ff;display:block}
.hero p{max-width:310px;color:#9ca3af;font-size:15px;line-height:1.4;margin-top:18px}
.pill{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);color:#9ca3af;font-size:13px;font-weight:900;white-space:nowrap}
.pill.ok{color:#45d483;background:rgba(69,212,131,.13)}
.card,.status-card{border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));border-radius:24px;padding:16px;margin-bottom:12px;box-shadow:0 18px 48px rgba(0,0,0,.28);backdrop-filter:blur(14px)}
.status-card{display:flex;align-items:center;justify-content:space-between;gap:14px}
.status-card h2{margin:4px 0 6px;font-size:24px;letter-spacing:-.5px}
.status-card p{margin:0;color:#9ca3af;font-size:14px;line-height:1.4}
.status-orb{min-width:56px;height:56px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,#2481ff,#005bff);font-size:25px;box-shadow:0 14px 28px rgba(36,129,255,.26)}
.warning{border:1px solid rgba(255,188,66,.22);background:rgba(255,188,66,.10);border-radius:22px;padding:14px;margin-bottom:12px}
.warning b{display:block;font-size:16px;margin-bottom:4px;color:#ffd27a}
.warning span{display:block;color:#d8c7a4;font-size:13px;line-height:1.35;margin-bottom:12px}
.warning button{height:42px;width:100%;border-radius:14px;background:rgba(255,188,66,.18);border:1px solid rgba(255,188,66,.25);color:#fff;font-weight:900}
.user{display:flex;align-items:center;justify-content:space-between}
.user b{font-size:18px}
.muted{color:#9ca3af;font-size:13px;line-height:1.45}
.center{text-align:center;padding:28px 18px}
.icon{font-size:36px;margin-bottom:8px}
.center h2{margin:0 0 8px;font-size:24px}
.center p{margin:0 auto 18px;color:#9ca3af;line-height:1.45;max-width:360px}
h3{margin:18px 2px 10px;font-size:20px}
h3.inside{margin:0 0 12px;font-size:18px}
.key{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.055);border-radius:24px;padding:16px;margin-bottom:12px}
.keytop{display:flex;justify-content:space-between;gap:12px}
.keytitle{font-size:18px;font-weight:950}
.badge{height:28px;padding:0 10px;border-radius:999px;background:rgba(69,212,131,.13);color:#45d483;display:grid;place-items:center;font-size:12px;font-weight:900}
.badge.off{background:rgba(255,92,92,.13);color:#ff5c5c}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.info{border-radius:16px;background:rgba(255,255,255,.055);padding:11px}
.info b{display:block;margin-top:4px;font-size:14px}
.wide-info{grid-column:1/-1}
.keydata{margin-top:12px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.28);border-radius:16px;padding:12px;color:#d1d5db;font-size:12px;line-height:1.35;max-height:88px;overflow:hidden;word-break:break-all}
.keydata.open{max-height:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.locations{display:flex;flex-wrap:wrap;gap:8px}
.loc{padding:10px 12px;border-radius:999px;background:rgba(36,129,255,.12);border:1px solid rgba(36,129,255,.30);font-size:13px;font-weight:900;color:#fff}
button{border:0;color:#fff;font-weight:900;cursor:pointer}
.primary,.secondary{height:50px;width:100%;border-radius:17px;font-size:15px}
.primary{background:linear-gradient(135deg,#2481ff,#005bff);box-shadow:0 12px 26px rgba(36,129,255,.23)}
.secondary,.mini{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09)}
.mini{height:38px;padding:0 14px;border-radius:999px;font-size:13px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wide{margin-top:14px}
.devices,.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.device,.help-btn{height:44px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);color:#fff;font-size:13px;font-weight:900}
.device:active,.help-btn:active,.primary:active,.secondary:active,.mini:active{transform:scale(.985)}
.device-title{margin-top:14px;margin-bottom:9px;color:#fff;font-size:15px;font-weight:950}
.instruction{margin-top:12px;padding:14px;border-radius:18px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.09);color:#d1d5db;font-size:14px;line-height:1.5}
.instruction b{color:#fff}
.instruction ol{margin:8px 0 0;padding-left:20px}
.instruction li{margin:7px 0}
.ref-link{margin-top:12px;padding:12px;border-radius:16px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.09);font-size:12px;color:#d1d5db;word-break:break-all}
.hidden{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:11px 15px;border-radius:999px;background:#fff;color:#000;font-size:14px;font-weight:900}