:root{
  --bg:#241f2b; --card:#2f2a38; --pill:#3b3550; --text:#f2f5ff;
  --muted:#a7a7bb; --accent:#5aa3ff; --accent2:#6ec3ff; --good:#39d98a;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}

.screen{max-width:420px;min-height:100vh;margin:0 auto;position:relative}
.hidden{display:none}

/* SPLASH */
.splash{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px 20px;gap:48px}
.logo{width:132px;height:132px;border-radius:28px;background:linear-gradient(180deg,#42a7ff,#00c2ff);display:grid;place-items:center;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.logo .ring{width:72px;height:72px;border-radius:50%;border:10px solid #fff;border-right-color:transparent;animation:spin 1.5s linear infinite}
.logo .key-dot{position:absolute;right:36px;width:14px;height:14px;background:#fff;border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}
.title{font-weight:700;font-size:18px;text-align:center;opacity:.95}
.ticker{position:absolute;left:0;right:0;bottom:18px;overflow:hidden;height:24px;color:#fff9}
.ticker span{display:inline-block;white-space:nowrap;animation:marq 12s linear infinite}
@keyframes marq{from{transform:translateX(100%)} to{transform:translateX(-100%)}}

/* HOME */
.topbar{height:24px;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;color:#fff9}
.topbar .icons .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff8;margin-left:6px}
.topbar .icons .diamond{display:inline-block;width:12px;height:12px;margin-left:8px;transform:rotate(45deg);background:linear-gradient(180deg,#93c6ff,#6aa8ff);border-radius:2px}

.content{padding:16px}
.menu-btn{position:absolute;left:18px;top:46px;width:28px;height:22px;display:flex;flex-direction:column;justify-content:space-between}
.menu-btn div{height:3px;background:#ffffff99;border-radius:3px}

.location{margin:56px 0 8px;display:flex;align-items:center;gap:10px}
.location .label{opacity:.75}
.pill{background:var(--pill);color:#fff;border:none;padding:10px 14px;border-radius:999px;box-shadow:inset 0 -2px 0 rgba(255,255,255,.06);cursor:pointer}

.power-wrap{display:flex;flex-direction:column;align-items:center;margin:22px 0 8px}
.power{width:200px;height:200px;border-radius:50%;background:radial-gradient(ellipse at 50% 55%,#38304a,#2f2a38 60%);border:none;position:relative;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.4)}
.power::before{content:"";position:absolute;inset:-10px;border-radius:50%;
  background:conic-gradient(from 0deg, #5aa3ff, #6ec3ff, #5aa3ff);
  filter:blur(18px);opacity:.45;transition:opacity .3s}
.power-icon{position:absolute;inset:0;display:grid;place-items:center}
.power-icon::before{content:"";width:72px;height:72px;border-radius:50%;border:6px solid #cfd8ff;border-top-color:transparent;transition:transform .6s ease}
.power.active .power-icon::before{transform:rotate(180deg)}
.status{text-align:center;margin-top:16px;letter-spacing:.2em;font-weight:700;opacity:.92}

.modes{display:flex;gap:10px;justify-content:center;margin:18px 0}
.mode{background:transparent;border:1px solid #ffffff26;color:#fff;padding:10px 16px;border-radius:12px}
.mode.active{background:#ffffff10;border-color:#ffffff40}

.card{background:var(--card);border:1px solid #ffffff10;border-radius:18px;padding:16px;margin-top:18px}
.ad .ad-line{margin-bottom:6px}
.muted{color:var(--muted)}
.ad-cta{color:#fff}
.stat .report-header{display:flex;justify-content:space-between;align-items:center}
.badge{padding:6px 10px;border-radius:10px;font-size:12px;background:#ffffff12;border:1px solid #ffffff1a;text-transform:lowercase}
.badge.ok{background:#1f4633;border-color:#2a6d52;color:#aaf7d1}
.timer{font-variant-numeric:tabular-nums}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.k{color:var(--muted);font-size:12px}
.v{font-weight:600}
.connecting .power::before{animation:glow 1.4s linear infinite}
@keyframes glow{50%{opacity:.9}}