:root{--bg:#fafaf7;--fg:#1d1d1b;--mut:#5d5d58;--card:#fff;--line:#d8d8d0;--acc:#1e6b4f;--accfg:#fff;--bad:#c4281c;--ok:#1e6b4f}
@media (prefers-color-scheme:dark){:root{--bg:#141413;--fg:#f0efe9;--mut:#a9a9a1;--card:#201f1d;--line:#3a3935;--acc:#4cc38f;--accfg:#06241a;--bad:#ff6b5e;--ok:#4cc38f}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:720px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left))}
h1{font-size:1.5rem;margin:.2em 0 .3em}h2{font-size:1.2rem;margin:1.4em 0 .4em}
.lugn,.liten{color:var(--mut)}.liten{font-size:.9rem;margin-top:2em}
button,.stor{font:inherit;min-height:52px;padding:10px 18px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;touch-action:manipulation}
button.stor,a.stor{background:var(--acc);color:var(--accfg);border-color:var(--acc);font-weight:600}
a.stor{display:inline-block;text-decoration:none;margin-top:6px;line-height:32px;border-radius:12px;padding:10px 18px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
button[hidden]{display:none}
.rad{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.rad .stor{flex:1 1 220px}
.ruta{border-radius:12px;padding:12px 16px;margin:12px 0;border:2px solid var(--line);background:var(--card)}
.ruta.fel{border-color:var(--bad)}
.scen{position:relative;background:#000;border-radius:12px;overflow:hidden;margin:12px 0;touch-action:none;line-height:0}
.scen video{width:100%;max-height:70vh;display:block;object-fit:contain;background:#000}
.scen canvas{position:absolute;left:0;top:0;width:100%;height:100%;touch-action:none}
.larmflash{position:absolute;inset:0;background:rgba(220,30,20,.55);color:#fff;font-weight:800;font-size:2.4rem;display:flex;align-items:center;justify-content:center;line-height:1;animation:blink .5s steps(2) infinite;pointer-events:none}
.larmflash[hidden]{display:none}
@keyframes blink{50%{background:rgba(220,30,20,.15)}}
@media (prefers-reduced-motion:reduce){.larmflash{animation:none}}
.status{font-weight:600;min-height:1.5em}
.status.larm{color:var(--bad)}
.matare{position:relative;height:28px;background:var(--card);border:2px solid var(--line);border-radius:14px;overflow:hidden}
#matarefyll{height:100%;width:0;background:var(--ok);transition:width .08s}
#matarefyll.over{background:var(--bad)}
#matarestreck{position:absolute;top:0;bottom:0;width:3px;background:var(--fg);left:50%}
.mataretext{display:flex;justify-content:space-between;gap:8px;font-size:.95rem;color:var(--mut);margin-top:4px;flex-wrap:wrap}
.reglage label{display:block;margin:16px 0;font-weight:600}
.reglage input[type=range]{display:block;width:100%;height:44px;accent-color:var(--acc)}
.v{font-weight:400;color:var(--mut);font-size:.95rem}
.logg{list-style:none;padding:0;margin:0}
.logg li{padding:8px 0;border-bottom:1px solid var(--line)}.logg .tom{color:var(--mut)}
@media (orientation:landscape) and (max-height:500px){.scen video{max-height:60vh}}
.pausknapp{display:block;width:100%;min-height:72px;font-size:1.4rem;font-weight:700;margin:0 0 12px;background:var(--card);border:3px solid var(--fg);color:var(--fg)}
.pausknapp.pausad{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.pausknapp[hidden]{display:none}