*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#08080a;color:#f5f5f7;font:17px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(70,80,110,.14) 0%,rgba(8,8,10,0) 42%);pointer-events:none;z-index:0}

.tabview,.page{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:0 18px calc(118px + env(safe-area-inset-bottom))}
.tabview{padding-top:calc(16px + env(safe-area-inset-top))}
.page{position:fixed;inset:0;z-index:40;background:#08080a;overflow-y:auto;padding-top:calc(8px + env(safe-area-inset-top));animation:push .3s cubic-bezier(.2,.8,.25,1)}
@keyframes push{from{transform:translateX(26px);opacity:0}to{transform:translateX(0);opacity:1}}

.fx1,.fx2,.fx3,.fx4,.fx5{animation:rise .55s cubic-bezier(.2,.8,.25,1) both}
.fx2{animation-delay:.05s}.fx3{animation-delay:.1s}.fx4{animation-delay:.15s}.fx5{animation-delay:.2s}
@keyframes rise{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}

/* header */
.lt{padding:12px 2px 18px}
.lt-brand{display:flex;align-items:center;gap:11px}
.lt-logo{width:30px;height:30px;opacity:.92}
.lt-title{font-size:32px;font-weight:700;letter-spacing:-.01em}
.lt-sub{font-size:13px;color:#86868c;margin-top:3px}

/* cards */
.gcard{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.015) 100%);border:.5px solid rgba(255,255,255,.1);border-radius:26px;padding:22px 20px;margin-bottom:14px;text-align:center}
.gcard.tap{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s ease,border-color .16s ease}
.gcard.tap:active{transform:scale(.975);border-color:rgba(255,255,255,.2)}
.cardlab{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#86868c;margin-bottom:6px}

/* solar widget */
.sunwrap{position:relative;padding-top:8px}
.sunarc{display:block;width:min(230px,68%);margin:0 auto}
.sunsym{position:absolute;left:50%;top:0;transform:translateX(-50%);opacity:.95}
.sub1{font-size:14px;color:#d5d5da;margin-top:8px}
.cap{font-size:11px;color:#6e6e74;margin-top:10px;letter-spacing:.01em}

.bignum{font-size:54px;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.bignum.amber{color:#f0be5a}

/* money meter */
.mbar{height:3px;border-radius:2px;background:rgba(255,255,255,.1);margin-top:14px;overflow:hidden}
.mfill{height:100%;background:#34c77b;border-radius:2px;transition:width .6s ease}

/* app icons - matte, thin-line */
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 8px;padding:12px 0 4px}
.app{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;font:inherit}
.appicon{position:relative;width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.055);border:.5px solid rgba(255,255,255,.11);transition:transform .16s ease,background .16s ease}
.app:active .appicon{transform:scale(.92);background:rgba(255,255,255,.1)}
.appicon svg{opacity:.94}
.applab{font-size:11.5px;color:#b9b9be;line-height:1.2;text-align:center;letter-spacing:.01em}

/* grouped lists */
.grouplab{font-size:11px;font-weight:600;color:#86868c;text-transform:uppercase;letter-spacing:.12em;margin:20px 16px 7px}
.igroup{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:.5px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;margin-bottom:6px}
.irow{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:0;color:#f5f5f7;font:inherit;font-size:16px;text-align:left;cursor:pointer;text-decoration:none;position:relative;-webkit-tap-highlight-color:transparent}
.irow:not(:last-child)::after{content:"";position:absolute;left:16px;right:0;bottom:0;height:.5px;background:rgba(255,255,255,.08)}
.irow.static{cursor:default}
button.irow:active{background:rgba(255,255,255,.05)}
.itxt{flex:1}
.ichev{flex:none;width:7px;height:12px;border-right:1.5px solid #5a5a60;border-top:1.5px solid #5a5a60;transform:rotate(45deg);margin-right:3px}
.tag{font-style:normal;font-size:12px;color:#86868c}
.gnote{font-size:13px;color:#86868c;margin:10px 16px 0;line-height:1.5}
.gnote.pad{margin-top:14px}
.gnote b{color:#d5d5da;font-weight:600}

/* form rows */
.irow.form{gap:10px}
.irow.form input{flex:none;width:126px;text-align:right;font:inherit;font-size:16px;padding:8px 10px;background:rgba(255,255,255,.07);border:.5px solid rgba(255,255,255,.1);color:#f5f5f7;border-radius:12px;color-scheme:dark}
.iosbtn{display:block;width:100%;margin-top:20px;padding:15px;background:#f5f5f7;color:#0a0a0c;border:0;border-radius:18px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:transform .15s ease}
.iosbtn:active{transform:scale(.98)}

/* EV status */
.evbolt{opacity:.95}
.evstatus.big{font-size:21px;font-weight:700;color:#f5f5f7;min-height:26px;line-height:1.35;margin-top:10px;letter-spacing:-.01em}

/* detail nav bar */
.navbar{display:flex;align-items:center;height:48px;position:sticky;top:0;background:rgba(8,8,10,.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);margin:0 -18px;padding:0 8px;z-index:5;border-bottom:.5px solid rgba(255,255,255,.08)}
.back{background:none;border:0;color:#f5f5f7;font:inherit;font-size:17px;padding:8px;cursor:pointer;flex:none;min-width:70px;text-align:left}
.navtitle{flex:1;text-align:center;font-size:16px;font-weight:600;margin-right:70px}

/* floating dock */
.tabbar{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;display:flex;background:rgba(22,22,25,.72);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:.5px solid rgba(255,255,255,.12);border-radius:28px;padding:7px 8px;box-shadow:0 12px 36px rgba(0,0,0,.5)}
.tabbtn{flex:1;background:none;border:0;color:#7c7c82;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 5px;font:10px -apple-system,sans-serif;cursor:pointer;border-radius:20px;-webkit-tap-highlight-color:transparent;transition:color .15s ease,background .15s ease}
.tabbtn.on{color:#f5f5f7;background:rgba(255,255,255,.1)}

.ft{text-align:center;font-size:11px;color:#5a5a60;margin:26px 0 8px}
#ver{position:fixed;bottom:calc(88px + env(safe-area-inset-bottom));right:10px;font:9px -apple-system,sans-serif;color:#6e6e74;opacity:.55;pointer-events:none;z-index:31}

@media (min-width:760px){
  .tabview,.page{max-width:560px}
  .tabbar{left:50%;right:auto;transform:translateX(-50%);width:480px}
}