:root{
  --paper:#f2f4f1;
  --ink:#141a1b;
  --sun:#ff7a00;
  --sun-soft:#ffae4f;
  --leaf:#2f6d61;
  --cloud:#b6c3c1;
  --hair:rgba(20,26,27,.12);
}
*{box-sizing:border-box}
html,body{height:100%;}
html{scroll-behavior:smooth;scroll-padding-top:76px;}
body{
  margin:0;
  font-family:"Be Vietnam Pro",Inter,system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(255,122,0,.10), transparent 60%),
    radial-gradient(80% 60% at 90% 10%, rgba(47,109,97,.12), transparent 65%),
    var(--paper);
  line-height:1.55;
}
.topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:28px 44px 18px;
}
.brand-mark{
  font-size:1.9rem;
  font-weight:700;
  letter-spacing:-.05em;
  color:var(--sun);
}
.brand-sub{
  font-size:.82rem;
  color:var(--leaf);
  letter-spacing:.02em;
}
.station-line{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.db-state{
  padding-left:10px;
  border-left:1px solid var(--hair);
  color:#61706d;
  font-size:.72rem;
  white-space:nowrap;
}
#station-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.muted{color:#5b6a67;}
.pill{
  border-radius:999px;
  padding:2px 10px;
  font-size:.72rem;
  background:var(--leaf);
  color:#fff;
}
.pill.off{background:#c0392b;}
.pill.fault{background:#d35400;}
.controls{
  display:flex;
  gap:10px;
  align-items:flex-end;
}
.controls label{
  display:grid;
  gap:4px;
  font-size:.72rem;
  color:#5b6a6c;
}
.controls input{
  border:1px solid var(--hair);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  font-size:.9rem;
}
.sync-button{
  align-self:end;
  border:1px solid rgba(47,109,97,.25);
  background:var(--leaf);
  color:#fff;
  border-radius:10px;
  min-height:38px;
  padding:8px 15px;
  font:600 .78rem/1 "Be Vietnam Pro",sans-serif;
  cursor:pointer;
}
.sync-button:hover{background:#25594f;}
.sync-button:disabled{opacity:.55;cursor:wait;}
.history-toggle,.mobile-quick-nav,.mobile-charge-bar,.charge-advanced-toggle{display:none;}
.sync-button:focus-visible,.tab:focus-visible,.reload-app:focus-visible,.push-toggle:focus-visible,input:focus-visible{
  outline:3px solid rgba(255,122,0,.35);
  outline-offset:2px;
}
main{
  padding:0 44px 48px;
}
.hero{
  border-radius:28px;
  background:#fff;
  box-shadow:0 24px 70px -40px rgba(20,26,27,.45);
  overflow:hidden;
  margin-top:10px;
}
.sun-hero{
  display:grid;
  grid-template-columns:minmax(280px,420px) 1fr minmax(230px,300px);
  gap:28px;
  padding:34px 40px;
}
.sun-num{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-weight:700;
  color:var(--ink);
}
.sun-current{
  font-size:clamp(3rem,7vw,5.5rem);
  line-height:1;
  color:var(--sun);
}
.sun-label{
  font-size:.9rem;
  font-weight:500;
  color:#5b6a6c;
}
.sun-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(110px,1fr));
  gap:14px;
  align-self:end;
}
.sun-facts div{
  border-left:3px solid var(--leaf);
  padding-left:12px;
  display:grid;
  gap:2px;
}
.sun-facts .k{font-size:.72rem;color:#5b6a6c;}
.sun-facts .v{font-weight:700;font-size:1.35rem;}
.sun-ratio{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
}
.ratio-arc{position:relative;width:130px;height:130px;}
.ratio-arc svg{transform:rotate(-90deg);}
.arc-track,.arc-value{
  fill:none;
  stroke-width:8;
  stroke-linecap:round;
}
.arc-track{stroke:var(--hair);}
.arc-value{stroke:var(--sun);stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset .6s ease;}
.arc-center{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  text-align:center;
  font-size:.7rem;
  color:#5b6a6c;
}
.arc-center span:first-child{font-size:1.4rem;font-weight:700;color:var(--ink);}
.ratio-note{font-size:.78rem;margin:0;}
.live-flow{
  margin-top:20px;
  padding:26px 30px 30px;
  border-radius:26px;
  background:#fff;
  box-shadow:0 22px 60px -42px rgba(20,26,27,.55);
}
.live-flow-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px;}
.section-kicker{color:var(--sun);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;}
.live-flow-head h2{margin:2px 0 0;font-size:1.35rem;letter-spacing:-.035em;}
.flow-updated{color:#687874;font-size:.7rem;white-space:nowrap;}
.flow-map{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(42px,.18fr) 104px minmax(42px,.18fr) minmax(220px,1fr);
  grid-template-rows:1fr 1fr;
  align-items:center;
  gap:16px 0;
}
.flow-node{position:relative;display:flex;align-items:center;gap:14px;min-height:116px;padding:18px 20px;border-radius:22px;}
.flow-pv{background:linear-gradient(135deg,#fff4c9,#fffaf0);}
.flow-grid-node{background:linear-gradient(135deg,#dff7fb,#f1fbfd);}
.flow-battery{background:linear-gradient(135deg,#d7f3e8,#f0faf6);}
.flow-home{background:linear-gradient(135deg,#eee8ff,#f7f4ff);}
.flow-icon{display:grid;place-content:center;flex:0 0 68px;width:68px;height:68px;border:3px solid currentColor;border-radius:50%;font-size:1.65rem;font-weight:700;line-height:1;}
.flow-pv .flow-icon{color:#d9a900;}
.flow-grid-node .flow-icon{color:#49b9d0;}
.flow-battery .flow-icon{color:#218966;font-size:1.05rem;}
.flow-battery .flow-icon em{font-size:.58rem;font-style:normal;}
.flow-home .flow-icon{color:#866de0;}
.flow-copy{display:grid;min-width:0;}
.flow-copy>span{color:#4e5d59;font-size:.72rem;}
.flow-copy>strong{font-size:clamp(1.45rem,2.7vw,2.2rem);line-height:1.15;letter-spacing:-.055em;white-space:nowrap;}
.flow-copy>strong>b{font-weight:700;}
.flow-copy>small{margin-top:5px;color:#697773;font-size:.64rem;line-height:1.45;}
.flow-copy>small b{color:#36443f;font-weight:600;}
.flow-hub{grid-column:3;grid-row:1/3;z-index:2;display:grid;place-content:center;justify-items:center;width:104px;height:104px;border:5px solid #f0a000;border-radius:50%;background:#fff;box-shadow:0 12px 35px -24px #332900;}
.flow-hub span{font-size:1.8rem;color:#e89500;}
.flow-hub small{color:#56635f;font-size:.62rem;}
.flow-hub-spacer{display:none;}
.flow-link{position:relative;height:4px;overflow:hidden;background:#dde4e1;}
.flow-link i{position:absolute;top:0;left:-35%;width:35%;height:100%;background:currentColor;animation:flowPulse 1.8s linear infinite;}
.flow-link-pv{color:#e4b700;}
.flow-link-grid{color:#55bfd4;}
.flow-link-battery{color:#2a9b76;}
.flow-link-home{color:#8d75e3;}
.flow-pv{grid-column:1;grid-row:1;}.flow-link-pv{grid-column:2;grid-row:1;}
.flow-grid-node{grid-column:5;grid-row:1;}.flow-link-grid{grid-column:4;grid-row:1;}
.flow-battery{grid-column:1;grid-row:2;}.flow-link-battery{grid-column:2;grid-row:2;}
.flow-home{grid-column:5;grid-row:2;}.flow-link-home{grid-column:4;grid-row:2;}
@keyframes flowPulse{to{left:100%;}}
.today-charge{
  position:relative;
  isolation:isolate;
  margin-top:20px;
  padding:28px 32px 30px;
  overflow:hidden;
  border-radius:26px;
  color:#fff;
  background:
    radial-gradient(circle at 86% 18%,rgba(255,183,84,.24),transparent 28%),
    linear-gradient(120deg,#0d302b 0%,#174e44 55%,#24584f 100%);
  box-shadow:0 28px 65px -40px rgba(7,43,36,.9);
}
.today-charge::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-70px;
  bottom:-155px;
  width:330px;
  height:330px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  box-shadow:0 0 0 44px rgba(255,255,255,.035),0 0 0 88px rgba(255,255,255,.02);
}
.today-charge-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px;}
.today-charge-head h2{margin:4px 0 0;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.045em;}
.today-kicker{display:flex;align-items:center;gap:8px;color:#b8d3cd;font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;}
.today-kicker i{width:8px;height:8px;border-radius:50%;background:#72deaa;box-shadow:0 0 0 5px rgba(114,222,170,.12);}
.today-charge-actions{display:grid;justify-items:end;gap:6px;}
.today-charge-updated{color:#bad0cc;font-size:.7rem;white-space:nowrap;}
.push-toggle{min-height:38px;padding:8px 13px;border:1px solid rgba(255,255,255,.22);border-radius:11px;color:#153a32;background:#ffbd70;font:700 .68rem/1.2 "Be Vietnam Pro",sans-serif;cursor:pointer;}
.push-toggle:hover{background:#ffd09a;}
.push-toggle.enabled{color:#d8f7e8;background:rgba(120,226,173,.13);border-color:rgba(120,226,173,.5);}
.push-toggle:disabled{cursor:not-allowed;opacity:.58;}
.push-status{max-width:260px;color:#a9c5bf;font-size:.58rem;line-height:1.35;text-align:right;}
.today-charge-result{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,.8fr);gap:30px;align-items:end;}
.today-charge-loading{grid-column:1/-1;padding:34px 0;color:#c8dbd7;font-size:.9rem;}
.today-charge-loading.error{color:#ffd0c7;}
.today-decision{display:flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.075em;}
.today-decision span{width:10px;height:10px;border-radius:50%;background:#78e2ad;box-shadow:0 0 0 6px rgba(120,226,173,.1);}
.today-decision.stop{color:#ffd0c7;}
.today-decision.stop span{background:#ff8f7b;box-shadow:0 0 0 6px rgba(255,143,123,.1);}
.today-decision.charging{color:#a9f0cc;}
.today-decision.charging span{background:#78e2ad;animation:chargeBlink 1.35s ease-in-out infinite;}
.today-decision.unplugged{color:#ffd09a;}
.today-decision.unplugged span{background:#ffad4e;box-shadow:0 0 0 6px rgba(255,173,78,.11);}
.today-decision.urgent{color:#ffd0c7;}
.today-decision.urgent span{background:#ff715c;box-shadow:0 0 0 6px rgba(255,113,92,.13);animation:chargeBlink .75s ease-in-out infinite;}
.today-unplug-command{display:flex;align-items:baseline;gap:16px;margin:9px 0 12px;}
.today-unplug-command small{color:#a9f0cc;font-size:.75rem;font-weight:700;letter-spacing:.08em;}
.today-unplug-command strong{font-size:clamp(4rem,9vw,7.4rem);line-height:.9;letter-spacing:-.09em;}
.today-unplug-now{margin:12px 0 10px;color:#ff9e8e;font-size:clamp(3.2rem,8vw,6.7rem);line-height:.92;letter-spacing:-.075em;}
.urgent-facts{border-color:rgba(255,113,92,.35);}
@keyframes chargeBlink{50%{opacity:.38;transform:scale(.78);}}
.today-command{display:flex;align-items:end;gap:18px;margin:8px 0 10px;}
.today-command div{display:flex;align-items:baseline;gap:10px;}
.today-command small{color:#ffbd70;font-size:.72rem;font-weight:700;letter-spacing:.08em;}
.today-command strong{font-size:clamp(3.2rem,7vw,6.5rem);line-height:.95;letter-spacing:-.085em;}
.today-command>i{align-self:center;color:#ffad4e;font-size:clamp(1.5rem,3vw,2.8rem);font-style:normal;}
.today-command-wrap>p{max-width:760px;margin:0;color:#c5d8d4;font-size:.76rem;line-height:1.55;}
.today-command-wrap>h3{margin:12px 0 8px;color:#ffd0c7;font-size:clamp(2.2rem,5vw,4.5rem);line-height:1;letter-spacing:-.065em;}
.today-charge-facts{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(5,31,26,.28);backdrop-filter:blur(8px);}
.today-charge-facts>div{display:grid;gap:3px;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.1);}
.today-charge-facts>div:nth-child(odd){border-right:1px solid rgba(255,255,255,.1);}
.today-charge-facts span{color:#a9c5bf;font-size:.64rem;}
.today-charge-facts strong{font-size:1.03rem;}
.today-charge-facts a{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;color:#1c2c29;background:#ffad4e;border-radius:0 0 15px 15px;text-decoration:none;font-size:.73rem;font-weight:700;}
.today-charge-facts a:hover{background:#ffc078;}
.today-forecast{
  margin-top:20px;
  padding:28px 30px 30px;
  border:1px solid rgba(20,26,27,.08);
  border-radius:26px;
  background:rgba(255,255,255,.76);
  box-shadow:0 22px 60px -44px rgba(20,26,27,.55);
}
.today-forecast-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px;}
.today-forecast-head h2{margin:2px 0 0;font-size:1.4rem;letter-spacing:-.04em;}
.today-forecast-head p{margin:4px 0 0;color:#667571;font-size:.78rem;}
.weather-update-actions{display:grid;justify-items:end;gap:7px;max-width:390px;}
.weather-update-text{color:#64726f;font-size:.68rem;line-height:1.45;text-align:right;}
.reload-app{min-height:38px;padding:8px 13px;border:1px solid rgba(47,109,97,.22);border-radius:10px;color:#fff;background:var(--leaf);font:600 .7rem/1 "Be Vietnam Pro",sans-serif;cursor:pointer;}
.reload-app:hover{background:#25594f;}
.reload-app:disabled{opacity:.6;cursor:wait;}
.today-forecast-overview{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);gap:14px;margin-bottom:14px;}
.today-weather-now{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,#fff1c8,#fffaf0);}
.today-weather-icon{font-size:3rem;line-height:1;}
.today-weather-now div{display:grid;}
.today-weather-now small{color:#7b715c;font-size:.66rem;}
.today-weather-now strong{font-size:1.25rem;}
.today-weather-now div>span{color:#6c736f;font-size:.7rem;}
.today-forecast-stats{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:1px solid var(--hair);border-radius:18px;background:#fff;}
.today-forecast-stats>div{display:grid;align-content:center;gap:3px;padding:14px 16px;border-right:1px solid var(--hair);}
.today-forecast-stats>div:last-child{border-right:0;}
.today-forecast-stats span{color:#687671;font-size:.63rem;}
.today-forecast-stats strong{font-size:1rem;line-height:1.3;}
.today-hour-chart{padding:20px 22px 12px;border-radius:18px;background:#fff;}
.today-hour-chart .panel-head{margin-bottom:8px;}
.today-hour-chart h3{margin:0;font-size:.95rem;}
#today-forecast-chart{height:250px !important;}
.today-hour-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(128px,1fr);gap:9px;margin-top:12px;padding-bottom:5px;overflow-x:auto;scroll-snap-type:x proximity;}
.today-hour-card{display:grid;gap:3px;min-width:0;padding:12px;border:1px solid var(--hair);border-radius:14px;background:#fff;scroll-snap-align:start;}
.today-hour-card.current{border-color:rgba(255,122,0,.55);background:#fff8ef;box-shadow:inset 0 0 0 1px rgba(255,122,0,.16);}
.today-hour-card.past{opacity:.55;}
.today-hour-card time{color:#4e5d59;font-size:.68rem;font-weight:700;}
.hour-weather-icon{font-size:1.35rem;}
.today-hour-card strong{font-size:1.08rem;letter-spacing:-.035em;}
.today-hour-card strong small{font-size:.6rem;font-weight:500;}
.today-hour-card>span:not(.hour-weather-icon){color:#687671;font-size:.61rem;white-space:nowrap;}
.today-hour-card .hour-rain{color:#528daf !important;}
.panels{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:20px;
  margin-top:20px;
}
.forecast-block{
  margin-top:26px;
  padding:28px;
  border:1px solid rgba(20,26,27,.08);
  border-radius:26px;
  background:rgba(255,255,255,.48);
}
.forecast-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:18px;
}
.forecast-heading h2{margin:0;font-size:1.4rem;letter-spacing:-.035em;}
.forecast-heading p{margin:4px 0 0;color:#5b6a67;font-size:.84rem;}
.forecast-updated{font-size:.72rem;color:#64726f;white-space:nowrap;}
.forecast-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.forecast-day{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;
  align-items:center;
  min-height:138px;
  padding:20px 22px;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  box-shadow:0 16px 42px -34px rgba(20,26,27,.65);
}
.forecast-day::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,var(--sun),var(--sun-soft));
}
.forecast-icon{font-size:2rem;line-height:1;filter:saturate(.9);}
.forecast-copy{display:grid;gap:3px;}
.forecast-date{font-size:.78rem;font-weight:700;color:#40504d;}
.forecast-weather{font-size:.72rem;color:#6b7876;}
.forecast-energy{text-align:right;}
.forecast-energy strong{display:block;font-size:2rem;line-height:1.05;letter-spacing:-.06em;color:var(--sun);}
.forecast-energy span{font-size:.72rem;color:#60706d;}
.forecast-meta{
  grid-column:2 / -1;
  display:grid;
  grid-template-columns:repeat(3,auto);
  justify-content:space-between;
  gap:8px;
  padding-top:10px;
  border-top:1px solid var(--hair);
  color:#5f6e6b;
  font-size:.7rem;
}
.forecast-chart-panel{margin-top:14px;}
.legend .dot.forecast{background:var(--leaf);}
.legend .dot.rain{background:#68a9cc;}
.charge-planner{
  margin-top:20px;
  padding:30px;
  border-radius:26px;
  color:#f7fbfa;
  background:
    linear-gradient(115deg,rgba(255,255,255,.04),transparent 38%),
    #24584f;
  box-shadow:0 24px 60px -40px rgba(10,44,38,.9);
}
.charge-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:20px;
}
.charge-heading h2{margin:0;font-size:1.4rem;letter-spacing:-.035em;}
.charge-heading p{margin:5px 0 0;max-width:720px;color:rgba(247,251,250,.72);font-size:.84rem;}
.charge-advanced-content{display:block;}
.battery-live{
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:#fff;
  font-size:.72rem;
  white-space:nowrap;
}
.charge-layout{
  display:grid;
  grid-template-columns:minmax(290px,.9fr) minmax(360px,1.1fr);
  gap:22px;
}
.charge-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
  padding:20px;
  border-radius:18px;
  color:var(--ink);
  background:#f7faf8;
}
.charge-controls label{display:grid;gap:5px;font-size:.72rem;color:#536460;}
.charge-controls select,.charge-controls input{
  width:100%;
  min-height:40px;
  border:1px solid rgba(20,26,27,.14);
  border-radius:9px;
  background:#fff;
  padding:8px 10px;
  color:var(--ink);
  font:500 .84rem/1 "Be Vietnam Pro",sans-serif;
}
.unit-input{position:relative;}
.unit-input input{padding-right:44px;}
.unit-input i{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  color:#72817e;
  font-style:normal;
  font-size:.7rem;
}
.calculate-button{
  grid-column:span 2;
  min-height:44px;
  border:0;
  border-radius:10px;
  color:#2a241d;
  background:#ffac4d;
  font:700 .82rem/1 "Be Vietnam Pro",sans-serif;
  cursor:pointer;
}
.calculate-button:hover{background:#ffbd73;}
.control-note{grid-column:span 2;margin:0;color:#6b7876;font-size:.68rem;line-height:1.5;}
.charge-result{
  display:grid;
  align-content:center;
  min-height:290px;
  padding:26px 30px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(8,41,35,.38);
}
.charge-status{font-size:.75rem;color:#b8d3cd;}
.charge-status.safe{color:#ffd29e;}
.charge-status.stop{color:#ffb6aa;}
.charge-window{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  margin:10px 0 22px;
}
.charge-time span{display:block;color:#b8d3cd;font-size:.7rem;}
.charge-time strong{font-size:clamp(2.1rem,4vw,3.4rem);line-height:1;letter-spacing:-.07em;}
.charge-time:last-child{text-align:right;}
.charge-line{width:64px;height:2px;background:#ffac4d;position:relative;}
.charge-line::after{content:"";position:absolute;right:-1px;top:-3px;width:8px;height:8px;border-radius:50%;background:#ffac4d;}
.charge-stop-title{margin:10px 0 8px;font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.15;letter-spacing:-.045em;color:#ffb6aa;}
.charge-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);
}
.charge-metrics div{display:grid;gap:2px;}
.charge-metrics span{font-size:.65rem;color:#a9c5bf;}
.charge-metrics strong{font-size:1rem;color:#fff;}
.charge-explain{margin:14px 0 0;color:#c6d9d5;font-size:.75rem;line-height:1.55;}
.charge-timeline{
  margin-top:18px;
  padding:20px 22px 16px;
  border-radius:18px;
  color:var(--ink);
  background:#fff;
}
.legend .dot.car{background:#ff9d35;}
.legend .dot.battery{background:#79a7d3;}
.panel{
  background:#fff;
  border-radius:20px;
  padding:22px;
  box-shadow:0 18px 50px -35px rgba(20,26,27,.4);
}
.wide{grid-column:span 1;}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.panel-head h2{
  margin:0;
  font-size:1.05rem;
  font-weight:700;
}
.legend{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.8rem;
  color:#5b6a6c;
}
.legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:4px;}
.legend .dot.actual{background:var(--sun);}
.legend .dot.est{background:var(--leaf);}
canvas{width:100% !important;height:280px !important;}
.chart-footnote{
  margin-top:12px;
  font-size:.75rem;
  color:#6d7a7c;
}
.estimate-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}
.slider-label{
  display:grid;
  grid-template-columns:auto auto;
  justify-content:space-between;
  font-size:.8rem;
  color:#5b6a6c;
  margin-bottom:6px;
}
input[type=range]{
  width:100%;
  accent-color:var(--sun);
}
.estimate-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:22px;
}
.estimate-summary div{
  border-left:3px solid var(--sun);
  padding-left:12px;
  display:grid;
  gap:2px;
}
.estimate-summary .k{font-size:.72rem;color:#5b6a6c;}
.estimate-summary .v{font-weight:700;font-size:1.25rem;}
.params{
  display:grid;
  grid-template-columns:repeat(3,minmax(140px,1fr));
  gap:14px;
}
.params label{display:grid;gap:6px;font-size:.75rem;color:#5b6a6c;}
.params input{
  border:1px solid var(--hair);
  border-radius:10px;
  padding:9px 10px;
  font-size:.9rem;
}
.table-panel{
  margin-top:20px;
}
.table-tabs{display:flex;gap:8px;}
.tab{
  border:0;
  background:transparent;
  padding:6px 12px;
  border-radius:999px;
  font-size:.8rem;
  color:#5b6a6c;
  cursor:pointer;
}
.tab.active{background:var(--leaf);color:#fff;}
.table-wrap{
  max-height:340px;
  overflow:auto;
  border-top:1px solid var(--hair);
}
table{width:100%;border-collapse:collapse;font-size:.85rem;}
th,td{
  padding:12px 14px;
  border-bottom:1px solid var(--hair);
  text-align:left;
}
th{position:sticky;top:0;background:#fff;color:#5b6a6c;font-weight:500;font-size:.75rem;}
footer{
  padding:0 44px 34px;
  display:grid;
  gap:4px;
  color:#5b6a6c;
  font-size:.78rem;
}
@media (max-width: 1100px){
  .topbar{grid-template-columns:1fr;gap:16px;}
  .panels{grid-template-columns:1fr;}
  .estimate-grid{grid-template-columns:1fr;}
  .sun-hero{grid-template-columns:1fr;}
  .forecast-cards{grid-template-columns:1fr;}
  .charge-layout{grid-template-columns:1fr;}
  .today-charge-result{grid-template-columns:1fr;}
  .today-charge-facts{max-width:none;}
  .today-forecast-overview{grid-template-columns:1fr;}
}
@media (max-width: 720px){
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom));}
  .topbar, main, footer{padding-left:14px;padding-right:14px;}
  .topbar{gap:11px;padding-top:16px;padding-bottom:10px;}
  .brand{display:flex;align-items:baseline;gap:9px;}
  .brand-mark{font-size:1.55rem;}
  .brand-sub{font-size:.7rem;}
  .station-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;}
  #station-name{font-size:.91rem;}
  #station-city{grid-column:1/-1;font-size:.69rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .station-line .pill{grid-column:2;grid-row:1;padding:2px 8px;}
  .db-state{display:none;}
  .controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:7px;width:100%;}
  .controls label{min-width:0;}
  .controls label span{font-size:.64rem;}
  .controls input{width:100%;min-width:0;min-height:44px;padding:8px;font-size:.78rem;}
  .controls .date-picker{grid-column:1;}
  .controls .month-picker,.controls .year-picker{display:none;}
  .controls.history-open .month-picker,.controls.history-open .year-picker{display:grid;}
  .controls.history-open .month-picker{grid-column:1/3;grid-row:2;}
  .controls.history-open .year-picker{grid-column:3;grid-row:2;}
  .history-toggle,.sync-button{display:block;min-height:44px;padding:8px 11px;border-radius:11px;font-size:.7rem;}
  .history-toggle{border:1px solid rgba(47,109,97,.22);background:#fff;color:var(--leaf);font:600 .7rem/1 "Be Vietnam Pro",sans-serif;}
  .history-toggle[aria-expanded="true"]{color:#fff;background:#5c716c;}
  .mobile-quick-nav{
    position:sticky;
    z-index:20;
    top:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    margin:0 10px;
    padding:7px;
    border:1px solid rgba(20,26,27,.08);
    border-radius:14px;
    background:rgba(247,249,246,.9);
    box-shadow:0 9px 28px -22px rgba(20,26,27,.8);
    backdrop-filter:blur(14px);
  }
  .mobile-quick-nav a{min-height:38px;display:grid;place-items:center;border-radius:9px;color:#52625e;text-decoration:none;font-size:.7rem;font-weight:700;}
  .mobile-quick-nav a:nth-child(2){color:#fff;background:var(--leaf);}
  main{padding-top:10px;padding-bottom:28px;}
  .hero{margin-top:0;border-radius:20px;}
  .sun-hero{gap:19px;padding:23px 18px;}
  .sun-num{display:grid;gap:2px;}
  .sun-current{font-size:clamp(3rem,16vw,4.4rem);}
  .sun-label{font-size:.76rem;}
  .sun-facts{grid-template-columns:1fr 1fr;}
  .sun-facts{gap:11px;}
  .sun-facts .v{font-size:1rem;}
  .sun-ratio{grid-template-columns:92px 1fr;}
  .ratio-arc{width:92px;height:92px;}
  .params{grid-template-columns:1fr;}
  .estimate-summary{grid-template-columns:1fr;}
  .forecast-block{margin-top:12px;padding:18px 12px;border-radius:20px;}
  .live-flow{margin-top:12px;padding:18px 14px 20px;border-radius:20px;}
  .live-flow-head{align-items:start;flex-direction:column;gap:5px;}
  .live-flow-head h2{font-size:1.18rem;}
  .flow-map{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:10px;}
  .flow-node{grid-column:auto;grid-row:auto;min-height:116px;display:grid;justify-items:start;align-content:start;gap:8px;padding:13px;border-radius:16px;}
  .flow-icon{width:40px;height:40px;flex-basis:40px;border-width:2px;font-size:1rem;}
  .flow-battery .flow-icon{font-size:.88rem;}
  .flow-copy>span{font-size:.65rem;}
  .flow-copy>strong{font-size:clamp(1.2rem,6vw,1.5rem);}
  .flow-copy>small{min-height:2.8em;font-size:.57rem;}
  .flow-hub,.flow-link,.flow-hub-spacer{display:none;}
  .today-charge{margin-top:12px;padding:20px 16px 20px;border-radius:20px;}
  .today-charge-head{align-items:start;flex-direction:column;gap:6px;}
  .today-charge-head h2{font-size:1.35rem;}
  .today-charge-actions{width:100%;grid-template-columns:1fr auto;align-items:center;justify-items:start;margin-top:5px;}
  .today-charge-updated{grid-column:1;grid-row:1;}
  .push-toggle{grid-column:2;grid-row:1/3;min-height:42px;max-width:180px;}
  .push-status{grid-column:1;grid-row:2;text-align:left;}
  .today-charge-result{gap:20px;}
  .today-charge-facts>div{padding:12px;}
  .today-charge-facts strong{font-size:.9rem;}
  .today-forecast{margin-top:12px;padding:18px 12px 20px;border-radius:20px;}
  .today-forecast-head{align-items:start;flex-direction:column;gap:7px;}
  .today-forecast-head h2{font-size:1.2rem;line-height:1.3;}
  .weather-update-actions{width:100%;grid-template-columns:1fr auto;align-items:center;justify-items:start;max-width:none;margin-top:4px;}
  .weather-update-text{text-align:left;font-size:.62rem;}
  .reload-app{min-height:42px;white-space:nowrap;}
  .today-weather-now{padding:15px;border-radius:14px;}
  .today-weather-icon{font-size:2.35rem;}
  .today-forecast-stats{border-radius:14px;}
  .today-forecast-stats{grid-template-columns:1fr 1fr;}
  .today-forecast-stats>div:nth-child(2){border-right:0;}
  .today-forecast-stats>div:nth-child(-n+2){border-bottom:1px solid var(--hair);}
  .today-hour-chart{padding:16px 12px 8px;}
  .today-hour-chart .panel-head{align-items:start;flex-direction:column;}
  #today-forecast-chart{height:205px !important;}
  .today-hour-strip{grid-auto-columns:118px;scroll-padding-left:2px;}
  .today-command{gap:8px;justify-content:space-between;}
  .today-command div{display:grid;gap:1px;}
  .today-command strong{font-size:clamp(2.7rem,18vw,4.5rem);}
  .today-command>i{font-size:1.5rem;}
  .today-unplug-command{display:grid;gap:0;}
  .today-unplug-command strong{font-size:clamp(4rem,22vw,6rem);}
  .forecast-heading{align-items:start;flex-direction:column;gap:8px;}
  .forecast-day{grid-template-columns:auto 1fr auto;min-height:116px;padding:15px 14px;}
  .forecast-energy strong{font-size:1.65rem;}
  .forecast-chart-panel{padding:16px 12px;}
  #forecast-chart{height:220px !important;}
  .charge-planner{margin-top:12px;padding:18px 14px;border-radius:20px;}
  .charge-heading{align-items:start;flex-direction:column;gap:8px;}
  .charge-heading h2{font-size:1.2rem;}
  .battery-live{white-space:normal;}
  .charge-advanced-toggle{display:block;width:100%;min-height:44px;border:1px solid rgba(255,255,255,.25);border-radius:11px;color:#173a33;background:#ffbd70;font:700 .75rem/1 "Be Vietnam Pro",sans-serif;}
  .charge-advanced-content{display:none;margin-top:14px;}
  .charge-planner.advanced-open .charge-advanced-content{display:block;}
  .charge-controls{grid-template-columns:1fr;}
  .calculate-button,.control-note{grid-column:span 1;}
  .charge-result{min-height:250px;padding:22px 18px;}
  .charge-window{gap:10px;}
  .charge-line{width:34px;}
  .charge-metrics{grid-template-columns:1fr 1fr;}
  .panels,.estimate-grid{gap:12px;margin-top:12px;}
  .panel{padding:16px 14px;border-radius:17px;}
  .panel-head{align-items:start;flex-direction:column;gap:8px;}
  .legend{flex-wrap:wrap;font-size:.68rem;}
  canvas{height:235px !important;}
  .table-panel{margin-top:12px;overflow:hidden;}
  .table-tabs{width:100%;overflow-x:auto;padding-bottom:2px;}
  .tab{min-height:38px;white-space:nowrap;}
  .table-wrap{max-height:300px;}
  th,td{padding:10px 11px;white-space:nowrap;}
  footer{padding-top:2px;padding-bottom:22px;font-size:.68rem;}
  .mobile-charge-bar{
    position:fixed;
    z-index:40;
    left:10px;
    right:10px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    min-height:58px;
    padding:9px 13px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:16px;
    color:#fff;
    background:rgba(19,67,58,.96);
    box-shadow:0 16px 34px -14px rgba(5,31,26,.8);
    text-decoration:none;
    backdrop-filter:blur(14px);
  }
  .mobile-charge-bar>span{display:flex;align-items:center;gap:7px;color:#bcd5cf;font-size:.62rem;}
  .mobile-charge-bar>span i{width:8px;height:8px;border-radius:50%;background:#ffad4e;}
  .mobile-charge-bar>strong{font-size:.85rem;text-align:right;}
  .mobile-charge-bar>b{font-size:1rem;color:#ffbd70;}
  .mobile-charge-bar.charging>span i{background:#78e2ad;animation:chargeBlink 1.35s ease-in-out infinite;}
  .mobile-charge-bar.urgent{background:rgba(126,45,34,.97);}
  .mobile-charge-bar.urgent>span i{background:#ff9e8e;animation:chargeBlink .75s ease-in-out infinite;}
  .mobile-charge-bar.off{background:rgba(64,77,74,.96);}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}