:root{--ink:#0f1b33;--gold:#b08d57;--bg:#f6f7f9;--line:#e3e6ec;--mute:#5b6578;--ok:#2e7d5b;--run:#2f6fde;--off:#9aa3b2;--bad:#b3261e;--warn:#9a6b00}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:400 15px/1.45 Manrope,system-ui,sans-serif;color:var(--ink);background:var(--bg)}
[hidden]{display:none!important}
.root{display:flex;flex-direction:column;height:100%}
.MuiAppBar-root{background:var(--ink)!important}
.MuiButton-containedPrimary{background:var(--ink)!important}
.MuiButton-textPrimary,.MuiLink-root{color:var(--gold)!important}
.MuiTypography-root,.MuiInputBase-root,.MuiButton-root,.MuiTab-root{font-family:Manrope,system-ui,sans-serif!important}
#app{display:flex;flex-direction:column;height:100dvh;padding-top:env(safe-area-inset-top)}
header{display:flex;justify-content:center;align-items:center;gap:10px;padding:14px 0 8px;background:#fff}
header img{width:30px;height:30px}
header span{font:600 26px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.04em}
nav{display:flex;justify-content:safe center;gap:4px;overflow-x:auto;padding:0 12px;background:#fff;border-bottom:1px solid var(--line);scrollbar-width:none}
nav button{flex:none;border:0;background:none;padding:12px 14px;font:500 14px Manrope,sans-serif;color:var(--mute);border-bottom:2px solid transparent;cursor:pointer}
nav button.on{color:var(--ink);border-color:var(--gold)}
main{flex:1;position:relative;min-height:0}
#map{position:absolute;inset:0;background:#e9ecf1}
#strip{display:flex;gap:10px;overflow-x:auto;padding:12px 12px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);scroll-snap-type:x proximity}
.card{position:relative;flex:none;width:136px;aspect-ratio:1;display:flex;flex-direction:column;gap:2px;text-align:left;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit;color:inherit;cursor:pointer;scroll-snap-align:start}
.card.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.card b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:14px}
.card small,.card span{color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card em{margin-top:auto;font-style:normal;font-size:12px;font-weight:600}
.dot{position:absolute;top:14px;right:12px;width:9px;height:9px;border-radius:50%}
.online{background:var(--ok)}.rijdend{background:var(--run)}.offline{background:var(--off)}
.pin{display:block;width:18px;height:18px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 6px rgba(15,27,51,.35)}
.empty{color:var(--mute);margin:8px}
#sheet{position:absolute;z-index:500;left:0;right:0;bottom:0;max-height:78%;overflow:auto;padding:20px 20px 24px;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(15,27,51,.14)}
@media(min-width:800px){#sheet{inset:12px 12px 12px auto;width:380px;max-height:none;border-radius:16px;box-shadow:0 10px 40px rgba(15,27,51,.18)}}
.x{position:absolute;top:8px;right:12px;border:0;background:none;font-size:26px;color:var(--mute);cursor:pointer}
h2{font:600 24px "Cormorant Garamond",Georgia,serif;margin:4px 0 14px}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi div{padding:14px;border:1px solid var(--line);border-radius:14px;color:var(--mute);font-size:13px}
.kpi b{display:block;font:600 30px "Cormorant Garamond",Georgia,serif;color:var(--ink)}
.row{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
label{display:grid;gap:4px;font-size:12px;color:var(--mute);text-align:left}
input{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;color:var(--ink)}
.row button,#out,#loginForm button{padding:11px 16px;border:0;border-radius:10px;background:var(--ink);color:#fff;font:600 14px Manrope,sans-serif;cursor:pointer}
.msg{color:var(--mute)}
.line{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.line small{display:block;color:var(--mute)}
.line .warn{color:var(--warn)}.line .bad{color:var(--bad)}
.line button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;font:inherit}
#login{display:grid;place-items:center;height:100dvh}
#loginForm{display:grid;gap:12px;width:min(340px,88vw);padding:28px;background:#fff;border:1px solid var(--line);border-radius:18px;text-align:center}
#loginForm img{width:44px;margin:0 auto}
#loginForm h1{font:600 30px "Cormorant Garamond",Georgia,serif;margin:0}
#err{color:var(--bad);min-height:1.2em;font-size:13px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

header{position:relative}
header #out{position:absolute;right:12px;top:50%;transform:translateY(-50%);padding:8px 12px;background:none;color:var(--mute);border:1px solid var(--line);font-size:13px}