*,*:before,*:after{box-sizing:border-box}html,body{margin:0}body{font-family:var(--f);font-size:var(--t-md);line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color var(--std) var(--ease),color var(--std) var(--ease)}::selection{background:var(--zon-zacht);color:var(--ink)}:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}html{scrollbar-color:var(--ink-4) transparent;caret-color:var(--zon)}button{font:inherit;color:inherit}h1,h2,p,ol,dl,dd{margin:0;padding:0}.num{font-variant-numeric:tabular-nums}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.app{max-width:1280px;margin:0 auto;padding:var(--s5) var(--s6) var(--s7)}.kop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s4);margin-bottom:var(--s5)}.kop-merk{display:flex;align-items:baseline;gap:var(--s3);min-width:0}.woordmerk{font-size:var(--t-lg);font-weight:650;letter-spacing:-.02em}.kop-sub{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap}.kop-midden{display:flex;align-items:center;gap:var(--s4)}.kop-rechts{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2)}.segment{position:relative;display:grid;grid-template-columns:repeat(3,72px);padding:4px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-pill)}.segment button{position:relative;z-index:1;height:32px;border:0;background:none;border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:500;color:var(--ink-3);cursor:pointer;transition:color var(--snel) var(--ease)}.segment button[aria-pressed=true],.segment button:hover{color:var(--ink)}.segment-pil{position:absolute;top:4px;left:4px;width:72px;height:32px;border-radius:var(--r-pill);background:var(--raised);box-shadow:0 1px 2px #00000014,0 0 0 1px var(--line);transform:translate(calc(var(--i) * 72px));transition:transform var(--std) var(--ease)}.stapper{display:flex;align-items:center;gap:var(--s1)}.stapper-titel{min-width:128px;text-align:center;font-size:var(--t-sm);font-weight:550;white-space:nowrap}.icoonknop{display:inline-grid;place-items:center;width:36px;height:36px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);cursor:pointer;transition:background-color var(--snel) var(--ease),transform var(--snel) var(--ease),color var(--snel)}.icoonknop:hover:not(:disabled){background:var(--sunk);color:var(--ink)}.icoonknop:active:not(:disabled){transform:scale(.94)}.icoonknop:disabled{color:var(--ink-4);cursor:default}.live{display:inline-flex;align-items:center;gap:var(--s2);height:32px;padding:0 var(--s3);border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:var(--t-sm);color:var(--ink-2);white-space:nowrap}.live-punt{position:relative;width:8px;height:8px;border-radius:50%;background:var(--bat)}.live-punt:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--bat);animation:puls 2.4s var(--ease) infinite}.live.is-fout .live-punt,.live.is-fout .live-punt:after{background:var(--fout);animation:none}.live.is-offline .live-punt,.live.is-offline .live-punt:after{background:var(--ink-3);animation:none}.offline-balk{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--surface);box-shadow:0 0 0 1px var(--line-2);font-size:var(--t-sm);color:var(--ink-2)}@keyframes puls{0%{transform:scale(1);opacity:.6}70%,to{transform:scale(2.6);opacity:0}}.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--schaduw),0 0 0 1px var(--line);overflow:hidden;transition:background-color var(--std) var(--ease)}.kaart{padding:var(--s6);min-width:0}.k-energie{border-right:1px solid var(--line)}.k-prijs,.k-log{border-top:1px solid var(--line)}.k-prijs{border-right:1px solid var(--line)}.k-energie{grid-column:span 7;min-height:520px}.k-stroom,.k-prijs{grid-column:span 5}.k-log{grid-column:span 7}.kaart-kop{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}.kaart-titel{font-size:var(--t-md);font-weight:600;letter-spacing:-.01em}.kaart-meta{font-size:var(--t-xs);color:var(--ink-3);text-align:right}.energie{display:flex;flex-direction:column;height:100%}.legenda{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s1) var(--s4);font-size:var(--t-xs);color:var(--ink-3)}.legenda span{white-space:nowrap}.offline-balk svg{flex:none}.legenda span{display:inline-flex;align-items:center;gap:6px}.legenda i{width:8px;height:8px;border-radius:2px}.legenda i.lijn{width:12px;height:2px;border-radius:1px}.legenda i.verwacht{background:var(--zon-zacht);box-shadow:inset 0 0 0 1px var(--zon)}.readout{margin-top:var(--s5)}.readout-label{font-size:var(--t-sm);color:var(--ink-3)}.readout-waarde{margin-top:var(--s1);font-size:var(--t-2xl);line-height:1.1;font-weight:600;letter-spacing:-.03em;min-height:44px;display:flex;align-items:flex-end}.readout-uur{font-size:var(--t-xl);letter-spacing:-.02em;font-weight:550;padding-bottom:4px}.readout-uur .sep{color:var(--ink-4);margin:0 2px}.totalen{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);margin-top:var(--s3);font-size:var(--t-sm);color:var(--ink-3)}.totalen b{font-weight:600;color:var(--ink)}.plot{position:relative;flex:1;min-height:200px;margin-top:var(--s5);cursor:crosshair;touch-action:pan-y;border-radius:var(--r-sm)}.plot-raster{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.plot-raster span{height:1px;background:var(--line)}.plot-raster span:last-child{background:var(--line-2)}.plot-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.staaf{transform-box:fill-box;transform-origin:50% 100%;transition:transform var(--groot) var(--ease),opacity var(--snel) var(--ease)}.staaf-v{fill:var(--verbruik)}.staaf-z{fill:var(--zon)}.staaf-verwacht{fill:var(--zon-zacht);stroke:var(--zon);stroke-width:.15;stroke-dasharray:.6 .6;vector-effect:none}.plot-svg g.dim .staaf{opacity:.35}.bat-lijn{fill:none;stroke:var(--bat);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;transition:opacity var(--std)}.is-bezig .plot-svg{opacity:.6;transition:opacity var(--std)}.bat-eind{position:absolute;transform:translate(6px,-50%);font-size:11px;font-weight:600;color:var(--bat-tekst);pointer-events:none}.haar{position:absolute;top:-8px;bottom:0;width:1px;background:var(--ink);pointer-events:none;transform:translate(-.5px)}.nu-lijn{position:absolute;top:-8px;bottom:0;border-left:1px dashed var(--ink-4);pointer-events:none}.nu-lijn span{position:absolute;top:-12px;left:4px;font-size:11px;color:var(--ink-3)}.as{display:flex;margin-top:var(--s2);font-size:11px;color:var(--ink-3)}.as span{text-align:center;white-space:nowrap;overflow:visible}.stroom-zin{margin-top:var(--s3);font-size:var(--t-md);color:var(--ink-2);max-width:36ch}.stroom-veld{position:relative;margin-top:var(--s4);aspect-ratio:360 / 256}.stroom-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.spoor{fill:none;stroke-linecap:round;opacity:.16}.vloei{fill:none;stroke-linecap:round;animation:vloei-in linear infinite}.vloei.uit{animation-name:vloei-in}.vloei.in{animation-direction:normal}@keyframes vloei-in{0%{stroke-dashoffset:40}to{stroke-dashoffset:0}}.is-stil .vloei{animation-play-state:paused;opacity:.35}.is-stil .spoor{opacity:.1}.hub{fill:var(--surface);stroke:var(--ink-2);stroke-width:2}.knoop{position:absolute;display:flex;align-items:center;gap:var(--s2);padding:6px 12px 6px 6px;background:var(--raised);border-radius:var(--r-pill);box-shadow:0 0 0 1px var(--line),0 2px 8px -2px #0000001a;transform:translate(-50%,-50%);white-space:nowrap}.knoop-icoon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--sunk);color:var(--ink-2)}.knoop.t-zon .knoop-icoon{background:var(--zon-zacht);color:var(--zon-tekst)}.knoop.t-bat .knoop-icoon{background:var(--bat-zacht);color:var(--bat-tekst)}.knoop-tekst{display:flex;flex-direction:column;line-height:1.25}.knoop-naam{font-size:var(--t-xs);color:var(--ink-3)}.knoop-waarde{font-size:var(--t-md);font-weight:600}.kn-zon{left:17.8%;top:17.2%}.kn-huis{left:82.2%;top:17.2%}.kn-bat{left:17.8%;top:82.8%}.kn-net{left:82.2%;top:82.8%}.stroom-noot{margin-top:var(--s3);font-size:var(--t-xs);color:var(--ink-3);text-align:center}.batterij{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}.batterij-rij{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4)}.batterij-pct{font-size:var(--t-2xl);line-height:1;font-weight:600;letter-spacing:-.03em}.batterij-pct .eenheid{font-size:var(--t-xl);color:var(--ink-3);margin-left:2px}.batterij-info{display:flex;flex-direction:column;align-items:flex-end;font-size:var(--t-sm);font-weight:550;line-height:1.3}.batterij-sub{color:var(--bat-tekst);font-weight:500}.meter{position:relative;height:8px;margin-top:var(--s3);border-radius:var(--r-pill);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}.meter-vul{position:absolute;inset:0;background:var(--bat);border-radius:inherit;transform-origin:0 50%;transition:transform var(--groot) var(--ease)}.meter-reserve{position:absolute;top:0;bottom:0;width:2px;background:var(--surface)}.meter-as{display:flex;justify-content:space-between;margin-top:var(--s2);font-size:11px;color:var(--ink-3)}.prijs-readout{display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s4)}.prijs-groot{font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em}.prijs-label{font-size:var(--t-sm);color:var(--ink-3)}.prijs-balken{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));align-items:end;gap:3px;height:96px;margin-top:var(--s4)}.pb{height:100%;padding:0;border:0;background:none;display:flex;align-items:flex-end;cursor:pointer;border-radius:3px}.pb span{display:block;width:100%;height:var(--h);border-radius:3px;background:var(--prijs);transition:background-color var(--snel) var(--ease),transform var(--snel) var(--ease);transform-origin:50% 100%}.pb.is-goedkoop span{background:var(--bat)}.pb.is-nu span{background:var(--ink)}.pb.is-sel span,.pb:hover span{transform:scaleY(1.04);filter:brightness(.92)}.as-prijs{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px}.as-prijs span{text-align:left}.prijs-noot{margin-top:var(--s4);font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}.stip{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:1px}.stip.t-bat{background:var(--bat)}.log{list-style:none;margin-top:var(--s3)}.log-rij{display:grid;grid-template-columns:48px 32px minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line);animation:rij-in var(--std) var(--ease) both;animation-delay:calc(var(--n) * 40ms)}.log-rij:first-child{border-top:0}@keyframes rij-in{0%{opacity:0;transform:translateY(4px)}}.log-tijd{font-size:var(--t-sm);color:var(--ink-3)}.log-icoon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--sunk);color:var(--ink-2)}.log-icoon.s-laden{background:var(--bat-zacht);color:var(--bat-tekst)}.log-icoon.s-ontladen{background:var(--zon-zacht);color:var(--zon-tekst)}.log-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}.log-titel{font-size:var(--t-md);font-weight:550;line-height:1.3}.log-detail{font-size:var(--t-sm);color:var(--ink-3);line-height:1.4}.log-bedrag{font-size:var(--t-md);font-weight:600;color:var(--ink-2)}.log-bedrag.plus{color:var(--bat-tekst)}.log-bedrag.verwacht{color:var(--ink-3);font-weight:550}.log-leeg{margin-top:var(--s5);font-size:var(--t-sm);color:var(--ink-3);max-width:48ch}.melding{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:100%;min-height:400px;max-width:52ch;margin:0 auto;padding:var(--s6) 0}.melding-icoon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sunk);color:var(--ink-2)}.m-fout .melding-icoon{background:var(--fout-zacht);color:var(--fout)}.m-leeg .melding-icoon{background:var(--zon-zacht);color:var(--zon-tekst)}.melding-titel{margin-top:var(--s4);font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em}.melding-tekst{margin-top:var(--s2);color:var(--ink-2)}.knop{display:inline-flex;align-items:center;gap:var(--s2);height:40px;margin-top:var(--s5);padding:0 var(--s4);border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--bg);font-size:var(--t-sm);font-weight:550;cursor:pointer;transition:transform var(--snel) var(--ease),opacity var(--snel)}.knop:hover:not(:disabled){opacity:.88}.knop:active:not(:disabled){transform:scale(.97)}.knop:disabled{opacity:.6;cursor:progress}.draai{animation:draai .9s linear infinite}@keyframes draai{to{transform:rotate(360deg)}}.skelet{display:flex;flex-direction:column;height:100%}.sk{display:block;border-radius:6px;background:var(--skelet);position:relative;overflow:hidden}.sk:after{content:"";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:glans 1.4s var(--ease) infinite}[data-theme=dark] .sk:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}@keyframes glans{to{transform:translate(100%)}}.sk-rij{display:flex;gap:var(--s6)}.sk-staven{flex:1;display:flex;align-items:flex-end;gap:6px;min-height:200px;margin-top:var(--s5)}.sk-staven .sk{flex:1;border-radius:3px}.voet{margin-top:var(--s5);font-size:var(--t-xs);color:var(--ink-3);text-align:center}@media(max-width:1080px){.k-energie{grid-column:span 12;border-right:0}.k-stroom{grid-column:span 6;border-top:1px solid var(--line);border-right:1px solid var(--line)}.k-prijs{grid-column:span 6;border-right:0}.k-log{grid-column:span 12}}@media(max-width:720px){.app{padding:var(--s4) var(--s4) var(--s6)}.kop{grid-template-columns:1fr auto;row-gap:var(--s4)}.kop-midden{grid-column:1 / -1;grid-row:2;flex-direction:column;align-items:stretch;gap:var(--s2)}.segment{grid-template-columns:repeat(3,1fr)}.segment-pil{width:calc((100% - 8px) / 3);transform:translate(calc(var(--i) * 100%))}.segment button{height:36px}.stapper{justify-content:space-between}.icoonknop{width:44px;height:44px}.kop-sub{display:none}.raster{border-radius:var(--r-md)}.kaart{padding:var(--s5) var(--s4);border-right:0!important;border-top:1px solid var(--line)}.k-stroom{grid-column:span 12;order:-1;border-top:0}.k-energie,.k-prijs,.k-log{grid-column:span 12}.k-energie{min-height:0}.readout-waarde{font-size:34px}.readout-uur{font-size:var(--t-md)}.plot{min-height:180px}.legenda{gap:var(--s1) var(--s3);justify-content:flex-start}.k-energie .kaart-kop{flex-direction:column;gap:var(--s2)}.offline-balk{align-items:flex-start}.offline-balk svg{margin-top:2px}.log-rij{grid-template-columns:40px 32px minmax(0,1fr)}.log-bedrag{grid-column:3;justify-self:start;font-size:var(--t-sm)}.melding{min-height:320px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}.vloei{stroke-dasharray:none}}