:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--bg:#020504;--panel:#0b1110;--panel2:#101715;--line:#26302d;--text:#f7faf8;--muted:#a2aaa6;--green:#78ef2d;--green2:#39a917;--danger:#ff5268;--blue:#43a8ff;--amber:#ffc42b;--violet:#9a67ff;--cyan:#32dfc5}*{box-sizing:border-box}html{background:#000}body{margin:0;min-height:100vh;background:#000;color:var(--text)}button,input,select{font:inherit}.hidden{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{width:min(100%,560px);margin:auto;min-height:100vh;padding:16px 16px calc(102px + env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 0,#0a110f 0,#020504 42%,#000 100%)}
.topbar{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;padding:4px 2px 16px}.brand-title{text-align:center;font-size:21px;font-weight:900;letter-spacing:-.7px}.brand-title span{color:var(--green)}.menu-btn,.icon-btn,.back-btn{border:0;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}.icon-btn{font-size:20px}
.gps-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:linear-gradient(180deg,#101715,#0b1110);border-radius:15px;padding:12px 14px;margin-bottom:14px;font-size:12px}.gps-left{display:flex;align-items:center;gap:8px}.gps-right{max-width:50%;text-align:right;color:var(--muted)}.dot{width:11px;height:11px;border-radius:50%;background:#6e7773;box-shadow:0 0 0 4px rgba(255,255,255,.03)}.dot.on{background:var(--green);box-shadow:0 0 14px rgba(120,239,45,.7)}.dot.weak{background:var(--amber)}
.view{display:none}.active-view{display:block}.mode-switch{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:17px;overflow:hidden;background:#111615;margin-bottom:8px}.mode-btn{border:0;background:transparent;color:#c5cbc8;padding:16px 10px;font-size:16px;font-weight:900;cursor:pointer}.mode-btn.active{color:#fff;background:linear-gradient(180deg,#5fcb2a,#2e8d13);box-shadow:inset 0 0 0 1px #80ec3d}.mode-banner{text-align:center;color:#7f8984;font-size:11px;letter-spacing:.8px;margin:8px 0 12px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:8px}.hero-card{min-height:235px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(155deg,#0e1513,#070b0a);padding:16px;position:relative;overflow:hidden}.hero-label{font-size:14px;color:#c4cbc7;font-weight:800;letter-spacing:.5px}.metric-symbol.green{color:var(--green);font-size:18px}.speed-arc{height:74px;margin:18px auto -22px;border-radius:140px 140px 0 0;border:10px solid #28312e;border-bottom:0;position:relative;overflow:hidden}.speed-arc span{position:absolute;inset:-10px 42% 0 -10px;border-radius:140px 0 0 0;border:10px solid var(--green);border-right:0;border-bottom:0}.hero-value{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;height:138px}.hero-value>span{font-size:72px;line-height:.9;font-weight:900;letter-spacing:-4px}.cadence-card .hero-value>span{font-size:68px}.hero-value small{font-size:18px;color:#dce1de;margin-top:10px;font-weight:700}.cadence-mini{position:absolute;left:14px;right:14px;bottom:16px;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;color:#aab2ae;font-size:10px}.cadence-mini b{color:var(--green);font-size:15px;margin-left:4px}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.metric-card{min-height:102px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(155deg,#0e1513,#080c0b);padding:15px;display:flex;gap:12px;align-items:flex-start}.metric-icon{font-size:24px;line-height:1}.metric-icon.blue{color:var(--blue)}.metric-icon.amber{color:var(--amber)}.metric-icon.violet{color:var(--violet)}.metric-icon.cyan{color:var(--cyan)}.metric-card small{display:block;color:#aeb6b2;font-size:11px;font-weight:800;margin-bottom:7px}.metric-card strong{display:block;font-size:31px;line-height:1;font-weight:900}.metric-card em{font-style:normal;font-size:14px;color:#adb5b1;font-weight:600}
.sensor-summary{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;margin-top:8px;padding:13px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(155deg,#0f1614,#080c0b)}.sensor-symbol{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;color:var(--green);background:rgba(120,239,45,.09);font-size:25px}.sensor-copy small,.source-card small{display:block;color:#aab2ae;font-size:10px}.sensor-copy strong,.source-card strong{display:block;color:#fff;font-size:13px;margin-top:2px}.sensor-copy span,.source-card span{display:block;color:#98a19c;font-size:11px}.connect-btn{border:1px solid #3a4541;border-radius:12px;background:#151c1a;color:#fff;padding:12px 10px;font-weight:900;font-size:11px;cursor:pointer}.sensor-source-row{grid-column:1/-1;display:flex;gap:18px;padding-top:8px;border-top:1px solid #202825;color:#aab2ae;font-size:11px}.sensor-source-row input{accent-color:var(--green)}
.start-btn,.save-btn,.stop-alarm{width:100%;border:0;border-radius:15px;padding:18px 14px;margin-top:10px;background:linear-gradient(180deg,#6fe332,#3ca717);color:#fff;font-size:18px;font-weight:950;letter-spacing:.2px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}.start-btn.running{background:linear-gradient(180deg,#ff5a6e,#cc263d)}.quick-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.quick-row button{border:1px solid var(--line);border-radius:14px;background:#0d1312;color:#e7ece9;padding:13px 8px;display:flex;justify-content:center;align-items:center;gap:8px;font-size:11px;font-weight:800}.quick-icon{font-size:20px}.quick-icon.danger{color:var(--danger)}
.section-head{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;margin-bottom:16px}.section-head h2{text-align:center;font-size:16px;margin:0}.source-card,.settings-card,.about-list{border:1px solid var(--line);border-radius:16px;background:linear-gradient(155deg,#101715,#080c0b)}.source-card{padding:14px;display:flex;align-items:center;gap:12px}.cadence-focus{padding:22px 0 8px}.cadence-ring{width:230px;height:230px;margin:auto;border-radius:50%;background:conic-gradient(var(--green) 0 72%,#313b37 72% 88%,transparent 88%);display:grid;place-items:center;position:relative}.cadence-ring:before{content:"";position:absolute;inset:16px;border-radius:50%;background:#050807}.cadence-ring>div{position:relative;z-index:1;text-align:center}.cadence-ring strong{display:block;font-size:70px;line-height:.9}.cadence-ring span{font-size:18px}.range-label{text-align:center;color:#9da6a1;font-size:11px;margin-top:16px}.range-label b{display:block;color:var(--green);font-size:17px;margin-top:4px}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stats-row article{border:1px solid var(--line);border-radius:14px;background:#0d1312;text-align:center;padding:14px 5px}.stats-row small,.stats-row span{display:block;color:#9ba49f;font-size:10px}.stats-row strong{display:block;font-size:30px;margin:6px 0}.settings-link{width:100%;margin-top:10px;padding:15px;border:1px solid var(--line);border-radius:14px;background:#0d1312;color:#fff;display:flex;justify-content:space-between;font-weight:800}.note{text-align:center;color:#8f9994;font-size:11px;line-height:1.5}.settings-card{padding:15px;margin-bottom:10px}.settings-card h3{font-size:13px;margin:0 0 12px;color:#dbe2de}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid #202825}.setting-row label{font-size:12px;color:#c5cbc8}.input-wrap{display:flex;align-items:center;gap:7px}.input-wrap input{width:72px;background:#0b100f;color:#fff;border:1px solid #35403c;border-radius:9px;padding:10px;text-align:center;font-weight:800}.input-wrap span{font-size:11px;color:#a1aaa5}.compact-settings{padding:0;overflow:hidden}.compact-settings button{width:100%;border:0;border-bottom:1px solid #222b28;background:transparent;color:#fff;padding:15px;display:flex;justify-content:space-between}.compact-settings b{color:var(--green);font-size:11px}.alarm-state{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:#0d1312;padding:12px;text-align:center;color:#aeb6b2;font-size:11px}.alarm-state.alert{border-color:var(--danger);color:#fff;background:#47111a}.stop-alarm{background:linear-gradient(180deg,#ff5a6e,#cc263d)}.about-logo{text-align:center;padding:25px}.about-logo img{width:96px;height:96px;border-radius:22px}.about-logo h2{font-size:18px}.about-logo p{color:#9aa39e}.about-list{overflow:hidden}.about-list div{padding:15px;border-bottom:1px solid #202825;display:flex;justify-content:space-between}.about-list b{color:var(--green)}
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,560px);display:grid;grid-template-columns:repeat(4,1fr);padding:9px 8px calc(9px + env(safe-area-inset-bottom));background:rgba(4,8,7,.96);border-top:1px solid #25302c;backdrop-filter:blur(12px);z-index:20}.nav-btn{border:0;background:transparent;color:#8f9994;font-size:9px;font-weight:800;padding:3px 2px;display:flex;flex-direction:column;align-items:center;gap:4px}.nav-btn span{font-size:21px}.nav-btn.active{color:var(--green)}
body:not(.dark){--bg:#eef3ef;--panel:#fff;--panel2:#f7faf8;--line:#cfd8d3;--text:#172019;--muted:#657069;background:#eaf0ec}.app-shell{color:var(--text)}body:not(.dark) .app-shell{background:#edf3ef}body:not(.dark) .hero-card,body:not(.dark) .metric-card,body:not(.dark) .sensor-summary,body:not(.dark) .gps-strip,body:not(.dark) .source-card,body:not(.dark) .settings-card,body:not(.dark) .about-list,body:not(.dark) .quick-row button,body:not(.dark) .stats-row article,body:not(.dark) .settings-link,body:not(.dark) .alarm-state{background:#fff;color:#172019}body:not(.dark) .bottom-nav{background:rgba(255,255,255,.96)}
@media(max-width:390px){.app-shell{padding-left:10px;padding-right:10px}.brand-title{font-size:18px}.hero-card{min-height:215px;padding:13px}.hero-value>span{font-size:62px}.cadence-card .hero-value>span{font-size:58px}.metric-card{min-height:94px;padding:12px}.metric-card strong{font-size:27px}.sensor-summary{grid-template-columns:42px 1fr}.connect-btn{grid-column:1/-1}.sensor-source-row{font-size:10px}}