:root{
  --bg:#0b1118;--card:#121d29;--stroke:#243546;--text:#edf5ff;--muted:#9fb0c3;--muted2:#7d91a6;
  --blue:#6aa4e8;--blue2:#8ebaf1;--green:#8fe5cb;--red:#e28d95;--shadow:0 14px 34px rgba(0,0,0,.28)
}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:radial-gradient(circle at top,#132131 0,#0b1118 34%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif}
button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app{max-width:520px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 24px)}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:14px}.brand-wrap{grid-column:2;display:flex;align-items:center;justify-content:center;gap:12px}.brand-text{text-align:left}.brand-icon-wrap{width:54px;height:54px;border-radius:18px;overflow:hidden;box-shadow:0 10px 22px rgba(84,145,212,.26)}.brand-icon-img{width:100%;height:100%;display:block}.brand-name{font-size:20px;font-weight:780;letter-spacing:-.5px}.brand-sub{font-size:11px;letter-spacing:3px;color:#9db2ca;margin-top:4px}.icon-btn{grid-column:3;justify-self:end;width:48px;height:48px;border-radius:16px;border:1px solid var(--stroke);background:rgba(23,34,49,.88);color:#adc3db;display:grid;place-items:center;box-shadow:var(--shadow)}.icon-btn svg{width:22px;height:22px}.icon-btn.rotating svg{animation:spin .7s linear}
.tabs{display:flex;gap:8px;background:rgba(19,29,41,.85);padding:6px;border:1px solid var(--stroke);border-radius:18px;box-shadow:var(--shadow);margin-bottom:14px}.tab-btn{flex:1;border:0;background:transparent;color:#94a9c1;padding:10px 12px;border-radius:13px;font-weight:700}.tab-btn.active{background:linear-gradient(180deg,#6da7ea,#4f81c2);color:#08111c}
.feature-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid #355377;background:linear-gradient(180deg,rgba(28,46,68,.92),rgba(18,30,42,.92));border-radius:20px;box-shadow:var(--shadow)}.strip-title{font-size:13px;font-weight:760}.strip-note{font-size:11px;color:#abc0d8;line-height:1.45;margin-top:4px}.strip-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.state-dot{width:10px;height:10px;border-radius:50%;background:#5b6c7a;box-shadow:0 0 0 5px rgba(255,255,255,.05)}.state-dot.on{background:#8fe5cb}.state-dot.off{background:#7b8a99}.inline-message{margin:8px 4px 0;color:#87a1bc;font-size:11px;line-height:1.4}
.pill-btn{border-radius:999px;padding:9px 13px;font-size:12px;font-weight:760;border:1px solid transparent}.pill-btn.primary{background:#8ebaf1;color:#0b1723}.pill-btn.ghost{background:transparent;border-color:#44658b;color:#b8d0ee}
.hero{margin-top:16px;padding:24px 22px 20px;border-radius:30px;border:1px solid #3d5871;background:radial-gradient(circle at 80% 20%,rgba(120,162,215,.33),transparent 35%),linear-gradient(160deg,#1b3552,#132537 62%,#12202c);box-shadow:var(--shadow);text-align:center}.hero.off{border-color:#76505a;background:radial-gradient(circle at 80% 20%,rgba(219,119,126,.22),transparent 35%),linear-gradient(160deg,#3a2730,#28202a 65%,#221d26)}.hero.unknown{border-color:#465869;background:radial-gradient(circle at 80% 20%,rgba(150,170,191,.18),transparent 35%),linear-gradient(160deg,#263445,#1b2734 65%,#16202c)}.hero-topline{display:flex;justify-content:center;align-items:center;gap:8px;color:#b9d8fb;font-size:11px;letter-spacing:2px;font-weight:800}.off .hero-topline{color:#f3c1c7}.unknown .hero-topline{color:#b7c5d1}.signal-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(255,255,255,.07)}.hero-bolt{font-size:66px;line-height:1;margin-top:16px;color:#dceeff}.hero h1{font-size:44px;line-height:1.05;letter-spacing:-1.8px;font-weight:800;margin:6px 0 10px}.hero p{font-size:16px;line-height:1.45;color:#d0e1f5;margin:0}.off p{color:#ead3d7}.unknown p{color:#c7d1d8}.hero-bottom{display:flex;justify-content:center;align-items:center;gap:8px;color:#bad0e6;margin-top:20px;font-size:12px}.live-symbol{width:6px;height:6px;border-radius:50%;background:currentColor}
.section-label{font-weight:800;font-size:11px;color:#8fa4bb;letter-spacing:2.2px;margin:24px 0 12px}.section-label.centered{text-align:center}.section-row{display:flex;justify-content:space-between;align-items:end;gap:10px}.section-row.tight{margin-top:2px}.hint{color:#7188a1;font-size:11px}.metrics.two-up{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metric-card,.history-card,.feature-card,.events-card{background:linear-gradient(180deg,rgba(20,31,44,.96),rgba(17,28,39,.96));border:1px solid var(--stroke);border-radius:24px;box-shadow:var(--shadow)}.metric-card{padding:18px 16px;text-align:center}.metric-top{display:flex;justify-content:space-between;align-items:center;color:#a3b6c7;font-size:12px;text-align:left}.metric-top svg{width:18px;height:18px;color:#7891a8;flex-shrink:0}.metric-value{font-size:42px;font-weight:800;letter-spacing:-1.5px;margin-top:18px}.unit{font-size:18px;color:#a8bbcf;font-weight:600}.battery-bar{height:7px;background:#293949;border-radius:999px;overflow:hidden;margin-top:16px}.battery-fill{height:100%;background:linear-gradient(90deg,#81bdf5,#9be7d2);border-radius:999px;width:0;transition:width .5s}.metric-foot{font-size:11px;color:#8298ad;margin-top:10px;line-height:1.35}.history-card{padding:18px;margin-top:14px}.chart-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.chart-title{font-size:19px;font-weight:760;letter-spacing:-.4px}.chart-subtitle{color:#89a0b7;font-size:12px;margin-top:4px}.chart-badge{font-size:12px;font-weight:760;color:#e9f3ff;background:#325a84;padding:9px 12px;border-radius:999px;white-space:nowrap}.timeline{height:80px;background:#30404f;border-radius:14px;margin-top:20px;display:flex;overflow:hidden}.timeline-segment{height:100%}.timeline-segment.on{background:#90dfd0}.timeline-segment.off{background:#d9868f}.timeline-segment.unknown{background:repeating-linear-gradient(125deg,#465766 0,#465766 6px,#5b7083 6px,#5b7083 12px)}.timeline-hours{display:flex;justify-content:space-between;color:#8fa5b9;font-size:11px;margin-top:10px}.legend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:#a9bac9;font-size:11px;margin-top:18px}.legend>span{display:flex;align-items:center;gap:6px}.legend-dot{display:inline-block;border-radius:99px;width:9px;height:9px}.legend-dot.green{background:#90dfd0}.legend-dot.red{background:#d9868f}.legend-dot.gray{background:#6d7c8c}.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid rgba(255,255,255,.08);margin-top:20px;padding-top:18px}.stats-row>div+div{border-left:1px solid rgba(255,255,255,.08);padding-left:18px}.stats-number{font-size:30px;font-weight:800;letter-spacing:-1px}.stats-name{color:#90a3b5;font-size:11px;margin-top:6px}
.feature-card{padding:18px 17px}.feature-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.feature-title{font-size:16px;font-weight:760}.feature-help{color:#9db2c6;font-size:12px;line-height:1.5;margin-top:6px}.feature-number{font-size:33px;font-weight:800;letter-spacing:-.8px}.feature-symbol{font-size:22px;opacity:.85}.feature-note{font-size:11px;line-height:1.5;color:#7d95ab;margin-top:14px}.risk-list{display:grid;gap:10px;margin-top:18px}.risk-row{display:grid;grid-template-columns:52px minmax(0,1fr) 90px;gap:10px;align-items:center;font-size:11px}.risk-time{color:#c0d4e9;font-variant-numeric:tabular-nums}.risk-track{border-radius:999px;background:#2d3d4d;height:10px;overflow:hidden}.risk-fill{height:100%;border-radius:999px;background:#8cbaf0}.risk-fill.medium{background:#cec88b}.risk-fill.high{background:#e59aa2}.risk-percent{text-align:right;color:#b9cada;font-variant-numeric:tabular-nums}.risk-percent.unavailable{color:#73879a}.mini-value{font-size:28px;font-weight:800;letter-spacing:-.7px;margin-top:14px}
.events-card{overflow:hidden}.event-item{display:flex;align-items:center;gap:12px;padding:16px 18px}.event-item+.event-item{border-top:1px solid rgba(255,255,255,.06)}.event-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;font-size:19px;font-weight:800;flex-shrink:0}.event-icon.on{background:#244357;color:#dcefff}.event-icon.off{background:#55333a;color:#ffd0d4}.event-icon.test,.event-icon.baseline{background:#2d3d4d;color:#c9d8e7}.event-copy{flex:1;min-width:0}.event-title{font-size:14px;font-weight:730}.event-desc{font-size:11px;color:#8da0b4;margin-top:5px;line-height:1.35}.event-time{text-align:right;font-size:11px;color:#b2c3d1;font-variant-numeric:tabular-nums}.empty-msg{padding:26px 18px;text-align:center;color:#92a7b9;font-size:13px}.footer{display:flex;justify-content:space-between;align-items:center;padding:28px 2px 0;color:#73879d;font-size:11px}.footer button{background:transparent;border:none;color:#9eb6ce;padding:8px 6px}
.auth-page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:430px;margin:0 auto;padding:32px 24px}.auth-logo{width:76px;height:76px;border-radius:23px;display:grid;place-items:center;background:linear-gradient(180deg,#71a9ec,#4c7fc0);font-size:40px;box-shadow:0 16px 34px rgba(83,143,209,.32);margin-bottom:29px}.eyebrow{font-size:10px;letter-spacing:2px;color:#9fc2e9;font-weight:800}.auth-page h1{font-size:36px;letter-spacing:-1.4px;margin:13px 0 0}.subtitle{font-size:14px;line-height:1.6;color:#97aab8;max-width:280px;margin:15px auto 34px}.auth-page form{width:100%;text-align:left}.auth-page label{display:block;font-size:12px;color:#b0c0cf;margin-bottom:10px}.auth-page input{color:white;outline:none;padding:17px 15px;font-size:16px;width:100%;border-radius:14px;border:1px solid #38516a;background:#15202c}.auth-page input:focus{border-color:#8ebaf1}.primary-btn{width:100%;display:flex;justify-content:space-between;background:#8ebaf1;border:0;color:#10233a;font-weight:750;font-size:15px;padding:17px;border-radius:14px;margin-top:17px}.error-msg{color:#ffb2b7;min-height:24px;font-size:12px;margin-top:12px}.auth-bottom{color:#657988;font-size:11px;margin-top:55px}
@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* v3.2: readable 24-hour day chart */
.day-hours{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-top:20px}
.hour-tile{height:45px;display:grid;place-items:center;border-radius:10px;border:1px solid #7891a9;color:#152232;font-size:13px;font-weight:850;font-variant-numeric:tabular-nums;padding:0;text-shadow:0 1px 0 #ffffff77;transition:transform .1s,border-color .1s}
.hour-tile.selected{outline:2px solid #a4ccff;outline-offset:2px;transform:scale(1.03)}
.hour-detail{min-height:22px;text-align:center;font-size:11px;color:#adc1d7;margin-top:15px;line-height:1.5}
.legend-dot.white{background:#eff6ff}

/* v3.3 current period instead of lightning icon */
.hero-period{margin:24px auto 12px;text-align:center}
.hero-elapsed{font-size:clamp(40px,10vw,59px);font-weight:810;font-variant-numeric:tabular-nums;letter-spacing:-1.5px;line-height:1.1;color:#e3f3ff;white-space:nowrap}
.hero-period-label{font-size:12px;color:#b8cce2;letter-spacing:.2px;margin-top:9px;font-weight:630}
.hero.off .hero-elapsed{color:#ffcad0}
.hero.off .hero-period-label{color:#e0b5bd}
.hero.unknown .hero-elapsed{color:#b5c1cb}
.hour-tile{background:#526375}
.hour-tile.on{background:#eff6ff;color:#172334}
.hour-tile.off{background:#e47c87;color:#231c28;text-shadow:none}
.hour-tile.unknown{background:#526375;color:#c5d2df;text-shadow:none;border-color:#627788}

/* v3.4: seamless six-band hourly tiles and two-line risk duration */
.hour-tile{position:relative;isolation:isolate;overflow:hidden;background:#526375}
.hour-tile-bands{position:absolute;inset:0;z-index:0;display:flex;overflow:hidden;border-radius:inherit}
.ten-minute-band{flex:1 1 0;min-width:0;height:100%}
.ten-minute-band.on{background:#eff6ff}
.ten-minute-band.off{background:#e47c87}
.ten-minute-band.unknown{background:#526375}
.hour-tile-label{position:relative;z-index:1;color:#182635;text-shadow:0 1px 2px #ffffff9c}
.hour-tile.unknown .hour-tile-label{color:#d7e1ed;text-shadow:0 1px 1px #263448}
.risk-row{grid-template-columns:48px minmax(0,1fr) 98px;gap:9px;min-height:38px}
.risk-percent{display:flex;flex-direction:column;align-items:flex-end;gap:3px;line-height:1.15}
.risk-incidence{font-size:11px;color:#c5d7e9;white-space:nowrap}
.risk-duration{font-size:10px;color:#8db6da;white-space:nowrap}