:root{--bg:#06132b;--kaart:#0d1f3f;--rand:#1b3363;--tekst:#e6eefc;--zacht:#7d93b8;--accent:#38bdf8;--ok:#22c55e;--let:#f59e0b;--alarm:#ef4444}*{box-sizing:border-box}html{background:var(--bg)}html,body{margin:0;overflow-x:hidden}body{background:radial-gradient(circle at 20% 0%,#0f2a5c 0,var(--bg) 60%);background-attachment:fixed;color:var(--tekst);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}.kop{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--rand);background:#06132bd9;position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}.merk{display:flex;gap:10px;align-items:center}.logo{font-size:28px;color:var(--accent)}h1{font-size:20px;margin:0}.sub{margin:0;color:var(--zacht);font-size:13px}.kop-rechts{display:flex;gap:10px;align-items:center}.badge{background:#f59e0b26;color:#fbbf24;border:1px solid rgba(245,158,11,.4);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}.klok{color:var(--zacht);font-variant-numeric:tabular-nums;font-size:13px}main{padding:12px;display:grid;gap:12px;max-width:1400px;margin:0 auto}.kaart{background:var(--kaart);border:1px solid var(--rand);border-radius:14px;padding:14px;min-width:0}h2{font-size:15px;margin:0 0 10px;color:var(--zacht);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.meters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.meter{border-top:3px solid var(--rand)}.meter[data-status=ok]{border-top-color:var(--ok)}.meter[data-status=let]{border-top-color:var(--let)}.meter[data-status=alarm]{border-top-color:var(--alarm);box-shadow:0 0 0 1px #ef444466,0 0 18px #ef444440}.meter-kop{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--zacht);gap:6px}.stip{width:10px;height:10px;border-radius:50%;background:var(--zacht);flex:none}[data-status=ok] .stip{background:var(--ok)}[data-status=let] .stip{background:var(--let)}[data-status=alarm] .stip{background:var(--alarm);animation:knipper 1s infinite}@keyframes knipper{50%{opacity:.3}}.waarde{margin:8px 0}.getal{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}.waarde small{color:var(--zacht)}.balk{position:relative;height:6px;background:#132a52;border-radius:3px}.streef{position:absolute;top:0;bottom:0;background:#22c55e59;border-radius:3px}.wijzer{position:absolute;top:-4px;width:4px;height:14px;margin-left:-2px;background:var(--tekst);border-radius:2px;transition:left .6s}.meter-voet{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px;font-size:11px;color:var(--zacht);margin-top:8px}[data-status=ok] .status-tekst{color:var(--ok)}[data-status=let] .status-tekst{color:var(--let)}[data-status=alarm] .status-tekst{color:var(--alarm);font-weight:700}.rij{display:grid;gap:12px}.pomp{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:#0a1934;margin-bottom:8px}.pomp-tekst{display:flex;flex-direction:column;min-width:0;line-height:1.25}.pomp-tekst small{color:var(--zacht);font-size:12px}.pomp b{margin-left:auto;color:var(--zacht);white-space:nowrap}.pomp.aan b{color:var(--ok)}.pomp-icoon{font-size:20px;color:var(--zacht)}.pomp.aan .pomp-icoon{color:var(--accent);animation:draai 1.5s linear infinite;display:inline-block}@keyframes draai{to{transform:rotate(360deg)}}.tank{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:10px;background:#0a1934;margin-bottom:8px;font-size:14px}.tank b.ok{color:var(--ok)}.tank b.leeg{color:var(--alarm)}.trend-kop{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.trend-kop h2{margin:0}.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.tabs button{flex:none;background:#0a1934;color:var(--zacht);border:1px solid var(--rand);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}.tabs button.actief{background:var(--accent);color:#04122a;border-color:var(--accent);font-weight:600}.grafiek-wrap{position:relative;height:240px}.alarmen{list-style:none;margin:0;padding:0;max-height:280px;overflow-y:auto}.alarmen li{display:flex;gap:10px;border-bottom:1px solid var(--rand);font-size:13px;border-left:3px solid var(--alarm);padding:8px 0 8px 8px}.alarmen li.ok{border-left-color:var(--ok)}.alarmen li.leeg{border-left:none;color:var(--zacht)}.alarmen time{color:var(--zacht);font-variant-numeric:tabular-nums;flex:none}footer{text-align:center;color:var(--zacht);font-size:12px;padding:20px}@media (min-width:700px){.meters{grid-template-columns:repeat(3,minmax(0,1fr))}.rij{grid-template-columns:1fr 1fr}.trend-kop{flex-direction:row;justify-content:space-between;align-items:center}.grafiek-wrap{height:300px}}@media (min-width:1200px){main{grid-template-columns:2fr 1fr;padding:20px}.meters{grid-column:1 / -1;grid-template-columns:repeat(6,minmax(0,1fr))}.trend{grid-column:1;grid-row:2 / span 2;display:flex;flex-direction:column}.trend .grafiek-wrap{flex:1;min-height:430px;height:auto}.rij{grid-column:2;grid-template-columns:1fr}.grafiek-wrap{height:430px}}.kop-rechts{flex-wrap:wrap;gap:6px 12px;font-size:12px}.badge{font-size:10px;padding:2px 8px}.meta{color:var(--zacht);font-size:12px;white-space:nowrap}.meta b{color:var(--tekst);font-weight:600;font-variant-numeric:tabular-nums}.online{color:var(--ok);font-weight:600;display:inline-flex;align-items:center;gap:5px}.online i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:puls 1.6s infinite}@keyframes puls{0%{box-shadow:0 0 #22c55eb3}70%{box-shadow:0 0 0 8px #22c55e00}to{box-shadow:0 0 #22c55e00}}.installatie{display:grid;grid-template-columns:1fr 1fr;gap:12px}.inst{display:flex;align-items:center;gap:12px;border-left:4px solid var(--rand)}.inst.ok{border-left-color:var(--ok)}.inst.fout{border-left-color:var(--alarm);background:#2a1020}.inst div{display:flex;flex-direction:column;min-width:0}.inst small{color:var(--zacht);font-size:12px}.inst b{font-size:20px}.inst.ok b{color:var(--ok)}.inst.fout b{color:var(--alarm)}.inst-icoon{font-size:26px;color:var(--accent);flex:none;display:inline-block}.inst.fout .inst-icoon{color:var(--alarm)}.inst-icoon.draait{animation:draai 2.5s linear infinite}.banner{padding:12px 14px;border-radius:12px;font-weight:700;font-size:15px}.banner.blok{background:#ef444426;border:1px solid var(--alarm);color:#fca5a5}.banner.wacht{background:#f59e0b1f;border:1px solid var(--let);color:#fcd34d;font-variant-numeric:tabular-nums}.banner[hidden]{display:none}.banner{white-space:pre-line}.pomp.geblokkeerd{opacity:.45;filter:grayscale(1)}.pomp.geblokkeerd b{color:var(--zacht);font-size:12px}.nieuw{animation:nieuw .9s ease-out}@keyframes nieuw{0%{box-shadow:0 0 0 1px #38bdf8cc,0 0 16px #38bdf859}to{box-shadow:none}}@media (min-width:1200px){.installatie,.banner{grid-column:1 / -1}main{grid-auto-flow:row dense}.trend{grid-row:span 2}}.meter,.meter[data-status]{border:1px solid #22324f;border-top:1px solid #22324f;box-shadow:none;background:#0b1730;border-radius:6px}.meter .stip{display:none}.meter .meter-kop{text-transform:uppercase;letter-spacing:.05em;font-size:11px}.meter .getal{color:var(--tekst);font-weight:600}.meter[data-status=ok] .getal,.meter[data-status=ok] .status-tekst{color:var(--ok)}.meter[data-status=let] .getal,.meter[data-status=let] .status-tekst{color:var(--let)}.meter[data-status=alarm] .getal,.meter[data-status=alarm] .status-tekst{color:var(--alarm);font-weight:600}.meter .streef{background:#2a3b5c}.meter .wijzer{background:#c9d4e8;width:2px;margin-left:-1px}.meter.nieuw{animation:none}.meter.nieuw .getal{animation:cijfer .8s ease-out}@keyframes cijfer{0%{opacity:.4}to{opacity:1}}.logo{height:26px;width:auto;display:block;flex:none}.merk{align-items:center;gap:12px}.merk h1{font-size:17px;font-weight:600}@media (min-width:700px){.logo{height:32px}}.inst,.inst.ok,.inst.fout{border:1px solid #22324f;border-left:1px solid #22324f;background:#0b1730;border-radius:6px;box-shadow:none}.inst .inst-icoon,.inst.fout .inst-icoon{color:var(--zacht)}.inst.nieuw{animation:none}.inst.nieuw b{animation:cijfer .8s ease-out}.banner{box-shadow:none;border-radius:6px}