:root{color-scheme:dark light;--bg: #0b1015;--vlak: #151c24;--rand: #26313d;--tekst: #eef3f7;--tekst-dim: #93a3b3;--rood: #c62b3e;--geel: #d9a400;--groen: #1f9d55;--paars: #7c4dff;--op-rood: #fff;--op-geel: #1a1200;--op-groen: #fff;--op-paars: #fff;--radius: 14px;--gap: 10px}@media(prefers-color-scheme:light){:root{--bg: #f4f7fa;--vlak: #fff;--rand: #d3dde6;--tekst: #0d1620;--tekst-dim: #5a6b7c;--rood: #c0182c;--geel: #e0ab00;--groen: #12854a;--paars: #6b35f5}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tekst);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}.app{display:flex;flex-direction:column;gap:var(--gap);min-height:100dvh;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));max-width:720px;margin:0 auto}.statusbalk{display:flex;justify-content:space-between;gap:var(--gap);font-size:.8rem;color:var(--tekst-dim)}.stip:before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.4em;border-radius:50%;background:var(--rood)}.stip-aan:before{background:var(--groen)}.meter{display:flex;flex-direction:column;gap:var(--gap);flex:1;min-height:0}.snelheid{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:4px;background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius)}.snelheid-waarde{font-size:clamp(3.5rem,24vw,8rem);font-weight:700;line-height:1;letter-spacing:-.02em}.snelheid-eenheid{margin-top:.3em;font-size:.8rem;color:var(--tekst-dim)}.percentage{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:5.5rem;padding:10px;border-radius:var(--radius);text-align:center;transition:background-color .2s linear}.percentage-waarde{font-size:clamp(3rem,20vw,7rem);font-weight:700;line-height:1}.percentage-label{font-size:.85rem;opacity:.85}.percentage-uitleg{font-size:1rem;color:var(--tekst-dim);padding:0 1em}.zone-leeg{background:var(--vlak);border:1px solid var(--rand)}.zone-rood{background:var(--rood);color:var(--op-rood)}.zone-geel{background:var(--geel);color:var(--op-geel)}.zone-groen{background:var(--groen);color:var(--op-groen)}.zone-paars{background:var(--paars);color:var(--op-paars)}.tegels{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}.tegel{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius)}.tegel-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tekst-dim)}.tegel-waarde{font-size:clamp(1.6rem,8vw,2.4rem);font-weight:600;line-height:1.1}.tegel-eenheid{font-size:.5em;font-weight:500;color:var(--tekst-dim)}.tegel-sub{font-size:.75rem;color:var(--tekst-dim)}.alarm,.waarschuwing{margin:0;padding:8px 10px;border-radius:var(--radius);font-size:.85rem}.alarm{background:color-mix(in srgb,var(--rood) 22%,var(--vlak));border:1px solid var(--rood)}.waarschuwing{background:color-mix(in srgb,var(--geel) 22%,var(--vlak));border:1px solid var(--geel)}.dim{color:var(--tekst-dim);font-size:.8rem;margin:0}.instellingen{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius)}.instellingen>summary{padding:12px;cursor:pointer;font-weight:600}.instellingen-inhoud{display:flex;flex-direction:column;gap:18px;padding:0 12px 12px}.veldgroep{display:flex;flex-direction:column;gap:8px}.veldgroep-kop{display:flex;justify-content:space-between;align-items:baseline;gap:var(--gap);flex-wrap:wrap;border-bottom:1px solid var(--rand);padding-bottom:4px}.veld{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;font-size:.85rem}.veld>span:first-child{color:var(--tekst-dim)}.rij{display:flex;gap:8px;align-items:flex-end}.schakelaar{display:flex;align-items:center;gap:8px;font-size:.9rem}input,select,textarea,button{font:inherit;color:var(--tekst);background:var(--bg);border:1px solid var(--rand);border-radius:8px;padding:8px;min-width:0;font-size:16px}input[type=range],input[type=file],input[type=checkbox]{padding:0;border:none;background:none}input[type=checkbox]{width:1.2em;height:1.2em}textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;resize:vertical}button{background:var(--rand);font-weight:600;cursor:pointer}button:disabled{opacity:.5;cursor:default}.tekstknop{background:none;border:none;padding:0;text-decoration:underline;font-size:inherit}