:root{
  --orange:#ef6c00;--orange-2:#ff8a24;--ink:#171b22;--muted:#75808e;--bg:#f3f5f7;
  --card:#fff;--line:#e6e9ed;--green:#18a968;--red:#d65252;--blue:#2d78d2;--graphite:#252a31;
  --shadow:0 12px 34px rgba(19,27,38,.07)
}
*{box-sizing:border-box}body{margin:0;font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg)}button,input,select{font:inherit}.shell{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#191d23;color:#fff;padding:24px 18px;display:flex;flex-direction:column;z-index:5}.logo{width:156px;height:62px;object-fit:contain;object-position:left center;background:#fff;border-radius:10px;padding:7px}.product-title{font-size:20px;font-weight:800;margin-top:16px}.product-subtitle{font-size:12px;color:#aeb6c1;margin:2px 0 24px}.sidebar nav{display:grid;gap:7px}.nav{border:0;background:transparent;color:#c9d0d8;text-align:left;border-radius:12px;padding:12px 13px;display:flex;align-items:center;gap:11px;cursor:pointer}.nav span{width:22px;text-align:center;font-size:17px}.nav:hover{background:#242a32;color:#fff}.nav.active{background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#fff;font-weight:700}.sidebar-foot{margin-top:auto;display:grid;gap:8px;color:#969faa}.security-chip{font-size:11px;color:#9fe0bb}.security-chip::first-letter{color:var(--green)}main{min-width:0;padding:28px 32px 52px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--orange);margin:0 0 5px}.topbar h1{font-size:30px;margin:0;letter-spacing:-.03em}.header-sub{color:var(--muted);margin:5px 0 0}.top-actions{display:flex;gap:10px;align-items:center}select,input{border:1px solid var(--line);background:white;border-radius:11px;padding:10px 12px;color:var(--ink)}#siteSelect{min-width:210px}.user-pill{background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 13px;font-size:12px;color:var(--muted)}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.login{max-width:420px;margin:80px auto;display:grid;gap:12px}.login-mark{width:48px;height:48px;border-radius:14px;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:900}.login h2{margin:4px 0 0}.login p{margin:0;color:var(--muted)}button{border:0;border-radius:11px;padding:10px 14px;background:var(--orange);color:#fff;cursor:pointer}.secondary{background:#eef0f3;color:var(--ink)}.soft-button{background:#fff;color:var(--orange);border:1px solid #ffd1ae}.text-button{background:none;color:var(--muted);padding:0}.error{color:var(--red)!important}.view{display:none}.view.active{display:block}.status-strip{display:flex;align-items:center;gap:22px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px 15px;margin-bottom:14px;box-shadow:0 5px 18px rgba(19,27,38,.04)}.live-badge{display:flex;align-items:center;gap:8px;font-weight:700}.pulse{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(24,169,104,.11)}.status-item{display:flex;gap:7px;font-size:12px}.status-item span{color:var(--muted)}.status-strip .soft-button{margin-left:auto;padding:7px 11px}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.kpi{min-height:132px;position:relative;overflow:hidden}.kpi>span{color:var(--muted);font-size:12px}.kpi>b{display:block;font-size:28px;margin:8px 0 4px;letter-spacing:-.04em}.kpi small{color:var(--muted)}.accent-orange:after{content:"";position:absolute;width:95px;height:95px;border-radius:50%;right:-25px;top:-32px;background:rgba(239,108,0,.08)}.soc-track{height:6px;border-radius:10px;background:#edf0f3;margin:10px 0 8px;overflow:hidden}.soc-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),#ffb067);border-radius:inherit}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);gap:14px;margin-bottom:14px}.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.card-head h2{margin:0;font-size:18px}.card-head p:not(.eyebrow){margin:4px 0 0;color:var(--muted);font-size:12px}.updated{color:var(--muted);font-size:11px}.energy-card{min-height:470px}.flow{position:relative;height:390px;margin-top:4px}.flow-node{position:absolute;width:142px;border:1px solid var(--line);border-radius:15px;padding:12px;background:#fafbfc;z-index:2}.flow-node .icon{display:block;font-size:18px;margin-bottom:4px;color:var(--orange)}.flow-node strong{display:block;font-size:20px}.flow-node small{color:var(--muted)}.flow-node.pv{left:2%;top:7%}.flow-node.home{right:2%;top:7%}.flow-node.battery{left:2%;bottom:6%}.flow-node.grid{right:2%;bottom:6%}.flow-node.ev{left:50%;transform:translateX(-50%);bottom:0}.flow-core{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;background:#1d2229;color:#fff;display:grid;place-items:center;align-content:center;z-index:3;box-shadow:0 14px 30px rgba(23,27,34,.18);border:6px solid #fff;outline:2px solid #f3d2b5}.flow-core b{font-size:23px;line-height:1}.flow-core span{font-size:11px;color:#f5a15d;margin-top:3px}.flow-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}.flow-lines path{fill:none;stroke:#dfe4e9;stroke-width:3;stroke-dasharray:8 9;animation:dash 3s linear infinite}@keyframes dash{to{stroke-dashoffset:-34}}.explain-card{display:flex;flex-direction:column}.ai-chip{font-size:11px;font-weight:800;background:#fff2e8;color:var(--orange);padding:5px 8px;border-radius:999px}.explain-box{margin-top:20px;border-radius:16px;background:linear-gradient(145deg,#20252c,#2b3038);color:#fff;padding:18px;display:flex;gap:13px;min-height:135px}.explain-box p{margin:0;font-size:15px;line-height:1.6}.explain-icon{font-size:24px;color:#ff9c4d}.signals{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.signals div{background:#f7f8fa;border-radius:12px;padding:11px}.signals span{display:block;color:var(--muted);font-size:10px}.signals b{font-size:15px}.explain-foot{margin-top:auto;padding-top:14px;color:var(--muted);font-size:11px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.green{background:var(--green)}.plan-card{margin-bottom:14px}.plan-head{align-items:center}.legend{display:flex;gap:12px;font-size:10px;color:var(--muted);flex-wrap:wrap}.legend span{display:flex;align-items:center;gap:4px}.legend i{width:15px;height:3px;border-radius:2px;display:inline-block}.lg-price{background:var(--orange)}.lg-soc{background:#253b5c}.lg-charge{background:#8fbde9}.lg-sell{background:#f3a36b}.plan-chart{height:260px;margin-top:16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(#fff,#fbfcfd);overflow:hidden}.plan-chart svg{width:100%;height:100%;display:block}.quarter-cards{display:grid;grid-template-columns:repeat(8,minmax(105px,1fr));gap:8px;margin-top:10px;overflow:auto;padding-bottom:2px}.quarter{border:1px solid var(--line);border-radius:12px;padding:10px;min-width:105px}.quarter .time{font-weight:800}.quarter .qprice{font-size:11px;color:var(--muted);margin-top:2px}.quarter .qaction{display:inline-block;margin-top:8px;font-size:10px;font-weight:800;border-radius:999px;padding:4px 6px}.qaction.charge{background:#e9f3fd;color:#2368a2}.qaction.sell{background:#fff0e5;color:#c95b0a}.qaction.hold{background:#eef1f4;color:#5e6875}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.phase-card .phase{display:grid;grid-template-columns:28px 1fr 60px;gap:10px;align-items:center;margin-top:15px}.phase>div{height:9px;background:#edf0f3;border-radius:99px;overflow:hidden}.phase i{display:block;height:100%;background:linear-gradient(90deg,#7fb5a0,var(--green));width:0;border-radius:inherit}.phase b{text-align:right;font-size:12px}.strategy-row{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.strategy-row:last-child{border-bottom:0}.strategy-row b{display:block}.strategy-row small{display:block;color:var(--muted);margin-top:2px}.strategy-row strong{white-space:nowrap}.strategy-row .on{color:var(--green)}.strategy-row .locked{color:#6f7782}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}.cards.compact .card>span{color:var(--muted)}.cards.compact .card>b{font-size:28px;display:block;margin-top:6px}.toolbar{display:flex;gap:10px;margin-bottom:14px}.row{display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr .8fr;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.row small{color:var(--muted)}.ok{color:var(--green)}.bad{color:var(--red)}#releaseForm{display:grid;grid-template-columns:180px 120px 1fr 1fr auto;gap:10px;margin:15px 0}dialog{border:0;border-radius:18px;min-width:min(500px,92vw);box-shadow:0 25px 70px rgba(0,0,0,.25)}#dlgFields{display:grid;gap:10px}#dlgFields label{display:grid;gap:5px}menu{display:flex;justify-content:flex-end;gap:8px;padding:10px 0 0}.chart-label{font-size:10px;fill:#8a929c}.chart-grid{stroke:#edf0f3;stroke-width:1}.chart-price{fill:none;stroke:var(--orange);stroke-width:2}.chart-soc{fill:none;stroke:#253b5c;stroke-width:2.4}.chart-zero{stroke:#cfd5dc;stroke-dasharray:4 4}.chart-bar-charge{fill:#8fbde9;opacity:.7}.chart-bar-sell{fill:#f3a36b;opacity:.75}
@media(max-width:1120px){.dashboard-grid{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}.quarter-cards{grid-template-columns:repeat(8,130px)}}
@media(max-width:820px){.shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;align-items:center}.logo{width:100px;height:45px}.product-title,.product-subtitle,.sidebar-foot{display:none}.sidebar nav{grid-column:1/-1;display:flex;overflow:auto;margin-top:9px}.nav{white-space:nowrap;padding:9px 11px}main{padding:18px 14px 38px}.topbar{display:grid}.top-actions{display:grid;grid-template-columns:1fr}.top-actions select{width:100%}.status-strip{overflow:auto}.status-item{display:none}.kpis,.bottom-grid{grid-template-columns:1fr}.flow-node{width:120px}.flow-node.ev{bottom:-5px}.plan-chart{height:220px}#releaseForm{grid-template-columns:1fr}.row{grid-template-columns:1fr 1fr}.row>*:first-child{grid-column:1/-1}}

.indication{font-size:12px;color:#9ca9b8;margin:10px 4px 20px}

/* VVU dashboard baseline: original supplied logo, dark charcoal and VVU orange. */
:root{--orange:#ff6d00;--orange-2:#ff8c28;--ink:#f6f8fb;--muted:#a7b6c8;--bg:#0e1822;--card:#172330;--line:#2b3a48;--green:#1ccc74;--red:#ff626e;--blue:#23a0ec;--shadow:0 12px 34px rgba(0,0,0,.19)}
body{background:var(--bg);color:var(--ink)}
.sidebar{background:#0c1520;border-right:1px solid #253547}
.logo{background:transparent;border:0;border-radius:0;width:175px;height:87px;object-fit:contain;padding:0}
main{padding:20px 24px 40px}
.topbar{padding:13px 18px;margin-bottom:13px;background:#162331;border:1px solid #283848;border-radius:16px}
.card,.status-strip,.user-pill{background:linear-gradient(160deg,#1b2a38,#15202d);border-color:#2d3a48;box-shadow:0 8px 30px rgba(0,0,0,.11)}
.kpis{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.kpi{min-height:108px;padding:15px}
.kpi>b{font-size:27px;color:#f8fafc}
select,input,.signals div,.flow-node,.quarter{background:#111c28;color:#ecf2f8;border-color:#2b3a4a}
.flow-core{background:#ff6d00;border-color:#162431;outline-color:#a84314}
.flow-lines path{stroke:#51677d}
.soc-track,.phase>div{background:#324455}
.explain-box{background:#101b28;border:1px solid #314253}
.explain-foot,.header-sub,.status-item span,.kpi>span,.kpi small{color:#acbacc}
.plan-chart{background:#101c28;border-color:#304353}
.chart-grid{stroke:#273a4b}.chart-zero{stroke:#698198}
.chart-label{fill:#c0d0e0}.chart-soc{stroke:#38b0ff}.chart-bar-charge{fill:#22c55e}.chart-bar-sell{fill:#ef4657}
.qaction.charge{background:#103d2e;color:#5ff3a3}.qaction.sell{background:#472534;color:#ff798c}
.ai-chip{background:#563014;color:#ffbc85}
.nav.active{background:#ff6d00;color:#10151b}
.soft-button,.secondary{background:#26394b;color:#edf5fc;border-color:#3f5367}
.status-strip .soft-button{background:#26394b;color:#fff}
.login{background:#162432}.indication{color:#a1b1c2}
@media(max-width:1440px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.kpis{grid-template-columns:1fr}}

/* Verberg uitgeschakelde schermen altijd */
[hidden] { display: none !important; }