:root{color-scheme:dark;--bg:#151718;--tile:#303438;--raised:#393d41;--line:#4a4e51;--text:#eeeff0;--muted:#a5aaad;--accent:#53a4dc;--good:#79c8a6;--bad:#db826f;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{min-width:320px;margin:0;background:#090a0b;color:var(--text)}.page{max-width:1120px;min-height:100vh;margin:auto;padding:11px;background:var(--bg)}.topbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 11px 10px}.brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500}.brand strong{font-weight:800}.brand-mark{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--accent);color:#fff;font-size:19px;font-weight:800}.status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.status-dot{width:8px;height:8px;border-radius:50%;background:#8f9599}.status.live .status-dot{background:var(--good);box-shadow:0 0 0 4px rgba(121,200,166,.12)}.status.offline .status-dot{background:var(--bad);box-shadow:0 0 0 4px rgba(219,130,111,.12)}
main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.intro{grid-column:1/-1;display:flex;align-items:end;justify-content:space-between;gap:16px;padding:7px 8px 10px}.eyebrow,.section-kicker,.card-label,.timestamp,.hero-footer,.range-pill,.phase-count,.phase-name,.phase-metrics>div>span,.chart-bottom,footer{font-size:11px}.eyebrow{color:var(--muted);margin:0 0 4px}.eyebrow-line{display:none}h1{margin:0;font-size:clamp(22px,2.5vw,29px);line-height:1.1;font-weight:700}.heading-dot{color:var(--accent)}.subheading{display:none}.timestamp{color:var(--muted);white-space:nowrap;padding-bottom:2px}.timestamp time{color:var(--text);font-size:15px;font-weight:700;margin-left:5px}
.hero-card,.trend-card,.phase-card{background:var(--tile);border-radius:9px;overflow:hidden}.hero-card{display:flex;flex-direction:column;min-height:252px}.hero-main{flex:1;display:flex;justify-content:space-between;position:relative;padding:18px 22px 10px}.hero-copy{min-width:0;position:relative;z-index:1}.card-label{display:flex;align-items:center;gap:8px;color:var(--muted)}.card-label h2{font:inherit;margin:0}.pulse-mark{width:7px;height:7px;background:var(--good);border-radius:50%}.total-value{display:flex;align-items:baseline;gap:9px;margin-top:18px;font-variant-numeric:tabular-nums;white-space:nowrap}.total-value>span:first-child{font-size:clamp(75px,8.8vw,122px);line-height:.9;letter-spacing:-.065em;font-weight:700}.total-value .unit{font-size:clamp(27px,3vw,43px);font-weight:700}.hero-note{color:var(--muted);margin:18px 0 0;font-size:13px}.hero-symbol{position:absolute;right:27px;top:15px;font-size:73px;line-height:1;color:var(--accent);opacity:.15}.hero-footer{display:flex;align-items:center;gap:8px;min-height:38px;padding:7px 22px;color:var(--muted);background:#282c2f}.hero-footer strong{color:var(--text);font-weight:600}.hero-footer-right{margin-left:auto;white-space:nowrap}
.trend-card{min-width:0;min-height:252px;padding:18px 19px 12px;display:flex;flex-direction:column}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-kicker{color:var(--muted);margin:0 0 3px}.section-heading h2{margin:0;font-size:18px;font-weight:700}.range-pill,.phase-count{padding:5px 8px;border-radius:5px;background:#25292c;color:var(--muted);white-space:nowrap}.chart-wrap{display:flex;gap:10px;flex:1;min-height:145px;margin-top:15px}.chart-scale{display:flex;flex-direction:column;justify-content:space-between;width:64px;flex:0 0 64px;text-align:right;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}#trend-chart{width:100%;height:100%;min-height:135px;overflow:visible}.grid-line{stroke:var(--line);stroke-width:1;stroke-dasharray:4 5}.chart-bottom{display:flex;justify-content:space-between;gap:7px;color:var(--muted);margin-top:6px;font-size:10px}
.phases-section{grid-column:1/-1}.phase-title{padding:8px 8px 9px}.phase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.phase-card{padding:15px 17px 13px;min-width:0;background:var(--raised)}.phase-top{display:flex;align-items:center;gap:9px}.phase-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#202427;color:var(--text);font-size:18px;font-weight:700}.phase-name{color:var(--muted);font-size:12px}.phase-power{display:flex;align-items:baseline;gap:7px;margin-top:19px;font-variant-numeric:tabular-nums;white-space:nowrap}.phase-power .power{font-size:clamp(43px,5.2vw,70px);font-weight:700;letter-spacing:-.055em;line-height:1}.phase-power>span:last-child{color:var(--muted);font-size:20px;font-weight:700}.phase-track{height:5px;border-radius:6px;margin-top:19px;background:#222629;overflow:hidden}.phase-fill{display:block;width:0;height:100%;border-radius:inherit;background:var(--accent);transition:width .3s ease}.phase-metrics{display:flex;gap:8px;margin-top:16px}.phase-metrics>div{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px;padding:9px 10px;border-radius:6px;background:#282c2f}.phase-metrics>div>span{color:var(--muted)}.phase-metrics strong{font-size:19px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}footer{display:flex;justify-content:space-between;gap:10px;padding:11px 8px 0;color:#888f93}.footer-separator{color:var(--accent);margin:0 4px}
@media(max-width:760px){.page{padding:7px}.topbar{height:42px}.hero-card,.trend-card{min-height:225px}.hero-main{padding:17px}.total-value>span:first-child{font-size:clamp(56px,10vw,80px)}.hero-footer{padding:7px 17px}.hero-footer-right{display:none}.trend-card{padding:15px 12px 10px}.phase-card{padding:12px}.phase-power .power{font-size:clamp(34px,6vw,52px)}.phase-metrics{flex-direction:column}.phase-metrics>div{flex-direction:row;justify-content:space-between;align-items:center}.phase-metrics strong{font-size:15px}}
@media(max-width:560px){.brand{font-size:13px}.status{font-size:0}.status-dot{width:10px;height:10px}main{grid-template-columns:1fr}.intro,.phases-section{grid-column:1}.intro{padding-top:4px}.eyebrow{font-size:9px}.timestamp{font-size:0}.timestamp time{font-size:13px}.hero-card{min-height:220px}.total-value>span:first-child{font-size:clamp(76px,18vw,105px)}.trend-card{min-height:235px}.phase-grid{grid-template-columns:1fr}.phase-card{padding:16px}.phase-power .power{font-size:60px}.phase-metrics{flex-direction:row}.phase-metrics>div{flex-direction:column;align-items:flex-start}footer{display:block;line-height:1.7}}
.phase-track{height:16px;margin-top:18px;border-radius:7px;background:#20272c;box-shadow:inset 0 0 0 1px #515962}
.phase-fill{background:linear-gradient(90deg,#549ace,#83bded)}
.phase-track{position:relative;background:linear-gradient(90deg,#20272c 0 87.5%,#643c3d 87.5% 100%)}
.phase-fill-over{position:absolute;left:87.5%;top:0;display:block;width:0;height:100%;background:linear-gradient(90deg,#db6665,#f29a86);border-radius:0 7px 7px 0;transition:width .3s ease}
.phase-current{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:16px;color:var(--muted);font-size:11px}
.phase-current strong{color:var(--text);font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.phase-scale{position:relative;display:block;height:12px;margin-top:10px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.phase-scale span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.phase-scale span:nth-child(1){left:0;transform:none}
.phase-scale span:nth-child(2){left:25%}
.phase-scale span:nth-child(3){left:50%}
.phase-scale span:nth-child(4){left:75%}
.phase-scale span:nth-child(5){left:100%;transform:translateX(-100%)}
.phase-track{margin-top:4px}
.phase-metrics{margin-top:12px}
.file-notice{grid-column:1/-1;display:flex;flex-direction:column;gap:7px;padding:14px 16px;border-radius:8px;background:#244052;border:1px solid #4e8ab1;font-size:14px;line-height:1.4}
.file-notice[hidden]{display:none}
.file-notice code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#c5e4f7}
.total-value{gap:14px}
.total-value>span:first-child{letter-spacing:normal}
.phase-track,.phase-fill,.phase-fill-over{border-radius:0}
.intro{justify-content:flex-end;text-align:right}
.card-label h1{font:inherit;margin:0}
:root{font-family:"Fira Sans",Arial,Helvetica,sans-serif}
.brand{font-weight:400}
.brand strong,.brand-mark,.total-value>span:first-child,.phase-power .power{font-weight:800}
.card-label,.section-kicker,.phase-name,.phase-current,.phase-metrics>div>span,.hero-footer,.timestamp,.range-pill,.phase-count,.chart-bottom,footer{font-weight:300}
.section-heading h2,.phase-icon{font-weight:600}
.total-value .unit,.phase-power>span:last-child,.phase-current strong,.phase-metrics strong,.timestamp time{font-weight:700}
.phase-scale{margin-top:16px}
.phase-metrics{flex-direction:column}
.phase-metrics>div{flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
.phase-current{margin-top:0}
.phase-metrics strong{font-size:17px}
@media(max-width:560px){.phase-metrics{flex-direction:column}.phase-metrics>div{flex-direction:row;align-items:center}}

/* The two top cards use a 55/45 split; temperature cards stay equally wide. */
@media(min-width:561px){
  main{grid-template-columns:repeat(20,minmax(0,1fr))}
  .hero-card{grid-column:span 11}
  .today-card{grid-column:span 9}
  .sensor-card{grid-column:span 10}
}
@media(min-width:561px) and (max-width:760px){
  .hero-card,.today-card,.sensor-card{grid-column:span 10}
}
.hero-card{min-height:290px}
.hero-gauge{padding:0 22px 12px}
.hero-gauge-track{display:grid;grid-template-columns:repeat(100,minmax(0,1fr));gap:1px;height:31px;padding:3px 0 1px;background:#2b2e31}
.hero-gauge-segment{min-width:0;background:#222527}
.hero-gauge-segment.is-active{background:var(--accent)}
.hero-gauge-segment.is-average{background:var(--good)}
.hero-gauge-segment.is-maximum{background:#e8b34e}
.hero-gauge-scale{display:flex;justify-content:space-between;margin-top:5px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .hero-card{min-height:280px}
  .hero-gauge{padding:0 17px 12px}
  .hero-gauge-track{gap:1px}
}
.phase-power .power{letter-spacing:.025em}
.chart-tabs{display:flex;gap:4px;align-self:flex-start;margin-top:12px;padding:3px;background:#25292c;border-radius:6px}
.chart-tab{border:0;border-radius:4px;background:transparent;color:var(--muted);font:600 11px "Fira Sans",Arial,sans-serif;letter-spacing:.02em;padding:6px 10px;cursor:pointer}
.chart-tab[aria-selected="true"]{background:#425767;color:var(--text)}
.chart-tab:hover{color:var(--text)}
.chart-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chart-panel{display:flex;flex-direction:column;flex:1;min-height:0}
.chart-panel[hidden]{display:none}
#energy-chart{width:100%;height:100%;min-height:135px;overflow:visible}
.energy-bar{fill:var(--accent);opacity:.9;cursor:help}
.energy-bar:hover,.energy-bar:focus{fill:#8fcafa;opacity:1;outline:none}
.energy-bar.incomplete{fill:#8d98a0;opacity:.65}
.energy-bar.current{fill:#80c9e6;stroke:#b2e8fc;stroke-width:1.5;opacity:1}
.chart-wrap{min-width:0}
#trend-chart,#energy-chart{width:0;min-width:0;flex:1 1 0}
.energy-hour-scale{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));margin:4px 0 0 74px;color:var(--muted);font-size:9px;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.price-card{grid-column:1/-1;min-width:0;padding:20px 23px 15px;border-radius:9px;background:var(--tile)}
.price-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.price-heading h2{margin:0;font-size:18px;font-weight:600}
.price-heading p{margin:5px 0 0;color:var(--muted);font-size:12px;font-weight:300}
.price-legend{display:flex;flex-wrap:wrap;gap:5px 17px;margin-top:10px;color:var(--muted);font-size:11px;font-weight:400}
.price-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.price-legend [hidden]{display:none}
.price-option{display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:var(--text);font-size:12px;cursor:pointer}
.price-option input{width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:pointer}
.price-option input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.price-key{display:inline-block;width:10px;height:10px;border-radius:2px}
.price-key.spot{background:#3e75d0}.price-key.transfer{background:#69add5}.price-key.tax{background:#8bc3df}.price-key.margin{background:#b7d9e8}
.price-chart-wrap{display:flex;gap:10px;min-width:0;margin-top:20px}
.price-scale{width:72px;flex:0 0 72px;height:210px;display:flex;flex-direction:column;justify-content:space-between;text-align:right;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.price-scroll{min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-color:#637c8d #25292c;scrollbar-width:thin}
.price-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.price-plot{min-width:960px}
#price-chart{display:block;width:100%;height:210px}
.price-bar{opacity:.94;cursor:help}
.price-bar.past{opacity:.7}
.price-bar.current{opacity:1}
.price-bar:hover,.price-bar:focus{opacity:1;outline:none}
.price-bar:hover .price-segment,.price-bar:focus .price-segment{filter:brightness(1.2)}
.price-segment.spot{fill:#3e75d0}.price-segment.transfer{fill:#69add5}.price-segment.tax{fill:#8bc3df}.price-segment.margin{fill:#b7d9e8}
.price-segment.net{fill:#7799ae}
.price-outline{fill:none;stroke:#e3f3fb;stroke-width:.7;pointer-events:none}
.price-bar:focus .price-outline{stroke-width:1.2}
#price-now{stroke:#a5cbdc;stroke-width:1;stroke-dasharray:3 4;pointer-events:none}
.price-hour-scale{position:relative;height:20px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.price-hour-scale span{position:absolute;top:6px;transform:translateX(-50%);white-space:nowrap}
.price-hour-scale span:first-child{transform:none}
.price-hour-scale span:last-child{transform:translateX(-100%)}
.price-footer{display:flex;justify-content:space-between;gap:10px;margin-top:9px;color:var(--muted);font-size:11px;font-weight:300}
.price-footer #price-summary{color:var(--text);font-weight:600;text-align:center}
@media(max-width:760px){.price-card{padding:17px 13px 14px}.price-scale{width:64px;flex-basis:64px;font-size:9px}}
@media(max-width:560px){.price-card{grid-column:1}.price-heading{align-items:center}.price-heading p{font-size:11px}.price-footer{font-size:9px}}
.sensor-card{--sensor-accent:#75bce3;min-width:0;padding:17px 20px 14px;border-radius:9px;background:var(--tile)}
.sensor-card-b{--sensor-accent:#85cbb5}
.sensor-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sensor-heading h2{margin:0;font-size:18px;font-weight:600}
.sensor-heading span{color:var(--muted);font-size:11px;white-space:nowrap}
.sensor-value{display:flex;align-items:baseline;gap:7px;margin:8px 0 3px;font-variant-numeric:tabular-nums}
.sensor-value strong{font-size:clamp(36px,4.3vw,52px);line-height:1;font-weight:700}
.sensor-value>span{color:var(--muted);font-size:19px;font-weight:600}
.sensor-spark-wrap{position:relative;height:70px;margin-top:8px}
.sensor-spark{display:block;width:100%;height:70px;overflow:hidden}
.sensor-spark-grid{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:4 5}
.sensor-spark-line{fill:none;stroke:var(--sensor-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sensor-spark-point{fill:var(--sensor-accent)}
.sensor-spark-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:12px}
.sensor-spark-empty[hidden]{display:none}
.sensor-meta{display:flex;justify-content:space-between;gap:10px;margin-top:7px;color:var(--muted);font-size:10px;font-weight:300}
.sensor-meta time{margin-left:4px;color:var(--text);font-weight:600;white-space:nowrap}
@media(max-width:760px){.sensor-card{padding:15px 14px 12px}.sensor-heading{flex-wrap:wrap;gap:2px 10px}.sensor-meta{font-size:9px;flex-wrap:wrap}}
.today-card{min-width:0;min-height:252px;display:flex;flex-direction:column;border-radius:9px;overflow:hidden;background:var(--tile)}
.today-main{flex:1;padding:21px 22px 10px}
.today-main h2{margin:0;color:var(--muted);font-size:16px;font-weight:600;line-height:1.3}
.today-led-meta{display:flex;align-items:center;gap:4px;margin-left:auto;white-space:nowrap}
.today-led-meta>span:first-child{padding:8px 7px}
.today-led-housing{display:grid;place-items:center;width:36px;height:32px}
.today-led{width:20px;height:20px;border-radius:50%;background:#9b8532}
.today-led.flash{animation:today-flash 70ms ease-out 1}
@keyframes today-flash{0%,45%{background:#ffe94d;box-shadow:0 0 8px 3px rgba(255,233,77,.7)}100%{background:#9b8532;box-shadow:none}}
.today-value{display:flex;align-items:baseline;gap:14px;margin-top:42px;white-space:nowrap;font-variant-numeric:tabular-nums}
.today-value>span:first-child{font-size:clamp(57px,8.4vw,110px);font-weight:800;line-height:1;letter-spacing:.01em}
.today-value .unit{font-size:clamp(25px,3vw,42px);font-weight:700}
.today-note{margin:13px 0 0;color:var(--muted);font-size:13px}
.today-note[hidden]{display:none}
.today-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:47px;padding:7px 16px 7px 22px;background:#282c2f;color:var(--muted);font-size:11px;font-weight:300}
.trend-card{grid-column:1/-1}
@media(max-width:760px){.today-card{min-height:225px}.today-main{padding:17px}.today-footer{flex-wrap:wrap;padding:7px 12px 7px 17px}.today-value{margin-top:32px}.today-value>span:first-child{font-size:clamp(49px,8vw,65px)}}
@media(max-width:560px){.today-card{min-height:220px}.today-value>span:first-child{font-size:clamp(46px,12vw,70px)}.today-footer{font-size:10px}}