:root{
  color-scheme:dark;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  --bg:#050b14; --card:#0e1a2b; --card2:#132238; --text:#f5f8fc; --muted:#8f9eb6;
  --green:#5bdb7d; --yellow:#ffc62c; --blue:#51a9ff; --purple:#b66cff;
  --orange:#ff9f2f; --red:#ff5b57; --cyan:#5ee5ef;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#081426 0%,#050b14 100%);color:var(--text);min-height:100vh}
.app{max-width:760px;margin:auto;padding:calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 24px)}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;margin:5px 2px 14px}
h1{margin:4px 0 0;font-size:32px;line-height:1}.eyebrow{font-size:11px;letter-spacing:1.7px;color:var(--muted);font-weight:800}
.right{text-align:right}.live{font-size:12px;font-weight:800}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:6px}
.muted{font-size:12px;color:var(--muted)}
.hidden{display:none!important}
.card{background:linear-gradient(180deg,rgba(18,32,53,.98),rgba(12,24,40,.98));border:1px solid rgba(255,255,255,.07);border-radius:22px;padding:16px;margin-bottom:12px;box-shadow:0 15px 40px rgba(0,0,0,.20)}
.mainTabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#0b1626;border:1px solid rgba(255,255,255,.06);padding:5px;border-radius:16px;margin-bottom:12px}
.mainTab,.periodTab{border:0;background:transparent;color:var(--muted);font-weight:850;border-radius:11px;padding:10px 12px}
.mainTab.active,.periodTab.active{background:#edf3ff;color:#0b1524}
.batteryHero{display:flex;gap:18px;align-items:center}.batteryInfo{flex:1}.label{font-size:11px;letter-spacing:.5px;color:var(--muted);font-weight:800}
.socRing{--soc:0%;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) var(--soc),#26364d 0);position:relative}
.socRing:before{content:"";position:absolute;inset:9px;background:#0d192a;border-radius:50%}.socRing>div{position:relative}.socRing span{font-size:35px;font-weight:900}.socRing small{font-size:14px;color:var(--muted)}
.heroValue{font-size:31px;font-weight:900;color:var(--green);margin:4px 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.grid .card{margin:0}.metric{min-height:126px}.icon{font-size:24px;margin-bottom:9px}.value{font-size:26px;font-weight:900;margin-top:5px}.yellowText{color:var(--yellow)}.blueText{color:var(--blue)}
.sectionTitle{font-size:14px;font-weight:900;letter-spacing:.25px}.sectionRow{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.pill{font-size:13px;font-weight:800;background:#172942;border-radius:999px;padding:7px 10px}
.statusPill{font-size:11px;font-weight:800;border-radius:999px;background:#192b42;padding:8px 10px;color:#d9e3f3}
.priceHero{display:flex;justify-content:space-between;align-items:flex-end;margin:17px 0}.priceNow{font-size:34px;font-weight:900;color:var(--green);margin-top:3px}.nextPrice{font-size:20px;font-weight:850;margin-top:3px}
.priceStats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}.priceStats>div{background:rgba(255,255,255,.035);padding:11px;border-radius:14px;display:flex;flex-direction:column;gap:4px}.priceStats span,.priceStats small{font-size:11px;color:var(--muted)}.priceStats b{font-size:18px}
.priceChart{height:155px;display:flex;align-items:flex-end;gap:1px;border-bottom:1px solid rgba(255,255,255,.08);position:relative}.priceBar{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:var(--green);opacity:.78;position:relative}.priceBar.medium{background:var(--yellow)}.priceBar.high{background:var(--orange)}.priceBar.veryHigh{background:var(--red)}.priceBar.current{opacity:1;outline:2px solid #fff;outline-offset:1px;z-index:2}.priceAxis{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding-top:5px}
.flow{display:grid;grid-template-columns:1fr 36px 1fr;align-items:center;text-align:center;margin-top:17px}.flowNode{display:flex;flex-direction:column;align-items:center;gap:5px}.flowNode span{font-size:12px;color:var(--muted)}.flowNode b{font-size:14px}
.bubble{width:58px;height:58px;border-radius:50%;border:2px solid;display:grid;place-items:center;font-size:25px}.bubble.sun{border-color:var(--yellow)}.bubble.home{border-color:var(--blue)}.arrow{font-size:24px;color:var(--muted)}
.flowBottom{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;border-top:1px solid rgba(255,255,255,.08);padding-top:13px}.flowBottom div{background:rgba(255,255,255,.035);padding:11px;border-radius:14px;display:flex;justify-content:space-between;gap:8px}.flowBottom span{font-size:12px;color:var(--muted)}.flowBottom b{font-size:13px}
.phaseGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}.phase{background:rgba(255,255,255,.035);border-radius:14px;padding:12px;text-align:center}.phase span{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}.phase b{font-size:17px}
.evHero{display:flex;justify-content:space-between;align-items:flex-end;margin:18px 0}.evPower{font-size:35px;font-weight:900;color:var(--green)}.evCurrent{font-size:23px;font-weight:850}.evGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.evGrid>div{background:rgba(255,255,255,.035);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:5px}.evGrid span{font-size:11px;color:var(--muted)}.evGrid b{font-size:18px}.compact{margin-top:10px}

.periodTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;background:rgba(255,255,255,.035);padding:4px;border-radius:14px;margin-top:14px}
.summaryGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.summaryCard{margin:0;min-height:102px;display:flex;flex-direction:column;justify-content:center}.summaryCard span{font-size:12px;color:var(--muted)}.summaryCard b{font-size:24px;margin-top:6px}.summaryCard small{font-size:10px;color:var(--muted);margin-top:2px}
.economyHeroCard{border-color:rgba(91,219,125,.25)}.economyHero{font-size:38px;font-weight:950;color:var(--green);margin:4px 0}.economyMini{font-size:19px;font-weight:850}.miniTop{margin-top:10px}
.chartLegend{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 8px;font-size:11px;color:var(--muted)}.chartLegend span{display:flex;align-items:center;gap:5px}.lg{display:inline-block;width:9px;height:9px;border-radius:50%}.lg.house{background:var(--blue)}.lg.solar{background:var(--yellow)}.lg.batt{background:var(--green)}.lg.grid{background:var(--purple)}
.canvasWrap{height:260px;width:100%;position:relative}.canvasWrap.small{height:200px}.canvasWrap canvas{width:100%!important;height:100%!important;display:block}
.historyPriceStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.historyPriceStats>div{background:rgba(255,255,255,.035);border-radius:12px;padding:10px;text-align:center}.historyPriceStats span{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}.historyPriceStats b{font-size:14px}
.noteCard p{font-size:12px;color:var(--muted);line-height:1.45;margin:9px 0 0}
footer{display:flex;justify-content:space-between;align-items:center;padding:4px 2px}footer button{border:0;background:#edf3ff;color:#0b1524;font-weight:900;border-radius:12px;padding:10px 14px}
.error .dot{background:var(--red)}.error #mode{color:#ff9b98}
@media(max-width:380px){
  .socRing{width:98px;height:98px}.heroValue{font-size:26px}.value{font-size:23px}.evPower{font-size:30px}.flowBottom{grid-template-columns:1fr}.priceNow{font-size:29px}.priceChart{height:135px}
  .summaryGrid{grid-template-columns:1fr 1fr}.summaryCard b{font-size:21px}.economyHero{font-size:32px}
}


.trackedEconomyCard{border-color:rgba(94,229,239,.22)}
.trackedHero{display:flex;justify-content:space-between;align-items:flex-end;margin:18px 0}
.trackedProfit{font-size:34px;font-weight:950;color:var(--green);margin-top:4px}
.trackedProfit.negative{color:var(--red)}
.trackedStored{font-size:23px;font-weight:900;margin-top:4px}
.trackedGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.trackedGrid>div{background:rgba(255,255,255,.035);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:5px}
.trackedGrid span{font-size:11px;color:var(--muted)}
.trackedGrid b{font-size:17px}
.trackedNote{margin-top:10px;background:rgba(255,255,255,.025);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;gap:10px}
.trackedNote span{font-size:11px;color:var(--muted)}
.trackedNote b{font-size:13px}


.historyStatusGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:0 0 12px;
}
.historyStatusItem{
  background:linear-gradient(180deg,rgba(18,32,53,.98),rgba(12,24,40,.98));
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:11px 12px;
  min-height:74px;
  display:flex;
  align-items:center;
  gap:10px;
}
.historyStatusItem small{
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-bottom:4px;
}
.historyStatusItem b{
  display:block;
  font-size:13px;
  line-height:1.2;
}
.historyStatusDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 4px rgba(255,198,44,.10);
  flex:0 0 auto;
}
.historyStatusDot.ok{
  background:var(--green);
  box-shadow:0 0 0 4px rgba(91,219,125,.10);
}
.historyStatusDot.warn{
  background:var(--yellow);
  box-shadow:0 0 0 4px rgba(255,198,44,.10);
}
.historyStatusDot.error{
  background:var(--red);
  box-shadow:0 0 0 4px rgba(255,91,87,.10);
}
@media(max-width:620px){
  .historyStatusGrid{grid-template-columns:1fr 1fr}
}