*{box-sizing:border-box} :root{color-scheme:dark;--bg:#07111f;--panel:#0d1b2d;--line:#203650;--text:#eef5ff;--muted:#9eb0c7;--blue:#5ab4ff;--green:#23d39a;--yellow:#ffc857}body{margin:0;background:radial-gradient(ellipse at 80% -20%,#163457 0,transparent 45%),var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif}header{padding:30px max(22px,calc((100% - 1240px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}h1{font-size:clamp(25px,3vw,36px);letter-spacing:-1px;margin:4px 0}h2{font-size:16px;font-weight:650;margin:0}p{margin:3px 0;color:var(--muted)}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--blue);font-weight:800}.header-right{text-align:right;color:var(--muted)}.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #275044;border-radius:99px;padding:7px 11px;color:#8ce9c8;font-size:12px;margin-bottom:9px}.pill i{width:7px;height:7px;background:var(--green);border-radius:50%}main{max-width:1240px;margin:auto;padding:22px}.notice{display:flex;gap:12px;align-items:flex-start;background:#12243a;border:1px solid #294563;padding:14px 16px;border-radius:13px;margin-bottom:18px;color:var(--blue)}.notice p{font-size:13px}.notice strong{color:var(--text)}.notice button{margin-left:auto;background:none;border:0;color:var(--muted);font-size:23px;cursor:pointer}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card{background:linear-gradient(145deg,#10223a,#0a1728);border:1px solid var(--line);border-radius:18px;padding:22px;min-width:0;box-shadow:0 12px 35px #0002}.card-head{display:flex;align-items:center;gap:13px;margin-bottom:24px}.card-head>div:nth-child(2){flex:1}.card-head p{font-size:13px}.brand{font-weight:850;letter-spacing:-1.5px;font-size:23px;min-width:100px}.frank{font-size:28px}.solarbrand{font-size:20px}.solarbrand span{background:#f32f48;padding:1px 3px}.plugbrand{color:#70baff;font-size:19px}.easeebrand{font-size:27px;font-weight:400;letter-spacing:-2px}.tag{font-size:9px;letter-spacing:1px;border-radius:5px;padding:5px 7px;font-weight:800}.demo{color:#ffd27d;background:#48391e;border:1px solid #6d5529}.metric{display:flex;align-items:baseline;gap:8px;font-size:clamp(37px,5vw,54px);font-weight:750;letter-spacing:-2px}.metric small{font-size:17px;letter-spacing:0;color:var(--muted);font-weight:500}.muted{color:var(--muted);font-size:13px}.chart{height:74px;margin-top:22px;position:relative;overflow:hidden;border-bottom:1px solid #2a415c;background:repeating-linear-gradient(to bottom,transparent 0,transparent 23px,#1c3047 24px)}.chart svg{width:100%;height:100%}.foot{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:8px}.mini-stats{display:flex;gap:25px;margin-top:23px;padding-top:15px;border-top:1px solid var(--line)}.mini-stats div{display:flex;flex-direction:column;gap:5px;flex:1}.mini-stats span{font-size:12px;color:var(--muted)}.mini-stats strong{font-size:17px}.bars{height:44px;display:flex;align-items:end;gap:5px;margin-top:18px}.bars i{flex:1;background:linear-gradient(#ffc857,#d98a35);border-radius:3px 3px 0 0;opacity:.9}.linechart{height:55px}.charge-summary{display:flex;gap:20px;margin:8px 0 22px}.charge-summary>div{flex:1;display:flex;flex-direction:column;gap:5px}.charge-summary strong{font-size:22px}.mode-panel{display:flex;align-items:center;justify-content:space-between;background:#0b3a36;border:1px solid #146b58;border-radius:13px;padding:16px;gap:10px}.mode-panel>div{display:flex;align-items:center;gap:12px}.mode-panel p{font-size:12px;color:#a8e9d6}.sun{font-size:30px;color:var(--yellow)}.switch{position:relative;width:48px;height:27px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;border-radius:30px;background:#44546a;cursor:pointer;transition:.2s}.switch span:before{content:"";position:absolute;width:19px;height:19px;left:4px;top:4px;background:white;border-radius:50%;transition:.2s}.switch input:checked+span{background:var(--green)}.switch input:checked+span:before{transform:translateX(21px)}.safety-note{font-size:11px;margin:10px 0 14px}.secondary,.primary{border-radius:9px;padding:10px 14px;font-weight:650;cursor:pointer}.secondary{background:#152b43;color:var(--text);border:1px solid #2a4563}.primary{background:#168b70;color:white;border:1px solid #28b991}.lower{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.lower>div{padding:22px;background:#0c192a;border:1px solid var(--line);border-radius:15px}.flow{display:grid;gap:13px;margin-top:18px}.flow>div{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}.flow strong{margin-left:auto;color:var(--text)}.dot{width:9px;height:9px;border-radius:50%}.sun-dot{background:var(--yellow)}.home-dot{background:var(--blue)}.grid-dot{background:var(--green)}.lower button{margin-top:14px}footer{display:flex;justify-content:space-between;color:#73869e;font-size:11px;padding:24px 3px 8px}dialog{background:#0e2035;color:var(--text);border:1px solid #34506d;border-radius:16px;max-width:620px;width:calc(100% - 32px);padding:26px}dialog::backdrop{background:#020812cc}dialog form{position:relative}dialog li{margin:10px 0;color:#b9c9dc}dialog p{margin:12px 0}.close{position:absolute;right:0;top:0;background:none;color:var(--muted);border:0;font-size:25px;cursor:pointer}@media(max-width:720px){header{padding:22px;align-items:flex-start;gap:10px}.header-right .pill{font-size:0}.grid,.lower{grid-template-columns:1fr}main{padding:15px}.card{padding:18px}.brand{min-width:80px}.tag{font-size:8px}.metric{font-size:43px}footer{gap:8px;flex-direction:column}.mini-stats{gap:12px}}
/* H.W.E.D. additions */
.year-note{display:block;color:var(--muted);font-size:10px;line-height:1.35;margin-top:3px}.heatbrand{font-size:17px;min-width:100px;color:#ffd27d;letter-spacing:-.5px}.heating-status{display:flex;align-items:center;gap:13px;padding:14px;background:#302a19;border:1px solid #66522b;border-radius:12px}.heating-status strong{display:block}.heating-status p{font-size:12px;margin-top:3px}.heat-icon{font-size:30px;color:var(--yellow)}.heating-rule{margin:16px 0;padding:12px 14px;border-left:3px solid var(--yellow);background:#101e2d;border-radius:0 9px 9px 0}.heating-rule p{font-size:12px;margin-top:5px}.heating .secondary{margin-top:4px}@media(max-width:720px){.heatbrand{min-width:80px;font-size:15px}}

/* Monthly comparison module */
.history-section{margin-top:18px;padding:22px;background:#0c192a;border:1px solid var(--line);border-radius:16px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.history-intro{font-size:13px;margin:12px 0 16px}.history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.history-card{min-width:0;padding:17px;background:linear-gradient(145deg,#10223a,#0a1728);border:1px solid var(--line);border-radius:13px}.history-card h3{font-size:14px;margin:0 0 15px}.history-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.history-values>div{display:flex;flex-direction:column;gap:7px;min-width:0}.history-values span{font-size:11px;color:var(--muted);text-transform:capitalize}.history-values strong{font-size:13px;line-height:1.35;overflow-wrap:anywhere}.history-card .muted{margin-top:14px;font-size:11px}@media(max-width:720px){.history-section{padding:16px}.section-heading{align-items:flex-start;flex-direction:column}.history-grid{grid-template-columns:1fr}.history-values{gap:8px}.history-values strong{font-size:12px}}


/* Frank-prijsgrafiek: tijd-as met actuele NU-markering */
#priceChart.frank-chart{height:124px;margin-top:22px;overflow:hidden;background:none;border-bottom:1px solid #2a415c}
#priceChart.frank-chart svg{display:block;width:100%;height:100%;overflow:visible}
#priceChart .frank-grid{stroke:#294058;stroke-width:1;opacity:.65}
#priceChart .frank-axis-label{fill:#91a6bf;font-size:11px}
#priceChart .frank-price-line{fill:none;stroke:#5ab4ff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#priceChart .frank-now-line{stroke:#ffc857;stroke-width:1.8;stroke-dasharray:4 3}
#priceChart .frank-now-dot{fill:#ffc857;stroke:#07111f;stroke-width:2}
#priceChart .frank-now-label-bg{fill:#59451f;stroke:#a78335;stroke-width:.7}
#priceChart .frank-now-label{fill:#ffe2a0;font-size:10px;font-weight:800;letter-spacing:.5px}


/* Frank rolling price window and extrema */
#priceChart.frank-chart{height:150px;margin-top:18px;overflow:hidden;background:none;border-bottom:1px solid #2a415c}
#priceChart.frank-chart svg{display:block;width:100%;height:100%;overflow:visible}
#priceChart .frank-grid{stroke:#294058;stroke-width:1;opacity:.65}
#priceChart .frank-axis-label{fill:#91a6bf;font-size:10px}
#priceChart .frank-price-line{fill:none;stroke:#5ab4ff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#priceChart .frank-now-line{stroke:#ffc857;stroke-width:1.8;stroke-dasharray:4 3}
#priceChart .frank-now-dot{fill:#ffc857;stroke:#07111f;stroke-width:2}
#priceChart .frank-now-label-bg{fill:#59451f;stroke:#a78335;stroke-width:.7}
#priceChart .frank-now-label{fill:#ffe2a0;font-size:10px;font-weight:800;letter-spacing:.5px}
#priceChart .frank-min-dot{fill:#23d39a;stroke:#07111f;stroke-width:2}
#priceChart .frank-min-label-bg{fill:#123e35;stroke:#23d39a;stroke-width:.7}
#priceChart .frank-min-label{fill:#a5f5dc;font-size:8px;font-weight:800}
#priceChart .frank-max-dot{fill:#ff8f70;stroke:#07111f;stroke-width:2}
#priceChart .frank-max-label-bg{fill:#4a2825;stroke:#ff8f70;stroke-width:.7}
#priceChart .frank-max-label{fill:#ffd0c5;font-size:8px;font-weight:800}
.expected-purchase{margin-top:12px}
.expected-purchase small{font-size:10px;line-height:1.35;color:var(--muted)}
.chart-window-note{font-size:10px;color:var(--muted);margin-top:7px}


/* Interactieve Frank-grafiek: euro-as en vinger-/muis-tooltip */
#priceChart.frank-chart{position:relative;height:172px;padding-top:0;overflow:hidden;background:none;border-bottom:1px solid #2a415c;touch-action:pan-y}
#priceChart.frank-chart svg{display:block;width:100%;height:100%;overflow:visible}
#priceChart .frank-y-grid{stroke:#294058;stroke-width:1;opacity:.6}
#priceChart .frank-y-label{fill:#9eb0c7;font-size:10px}
#priceChart .frank-hit-point{fill:transparent;stroke:transparent;pointer-events:all;cursor:crosshair}
#priceChart .frank-chart-tooltip{position:absolute;z-index:5;display:none;pointer-events:none;min-width:145px;padding:7px 9px;border:1px solid #4d6683;border-radius:8px;background:#061321f2;box-shadow:0 5px 18px #0008;font-size:12px;line-height:1.35;color:#eef5ff}
#priceChart .frank-chart-tooltip.visible{display:flex;flex-direction:column;gap:2px}
#priceChart .frank-chart-tooltip strong{color:#ffc857;font-size:13px}
#priceChart .frank-chart-tooltip span{color:#b9c9dc;font-size:11px}