:root{color-scheme:dark;--bg:#080f16;--panel:#101b25;--line:#263745;--muted:#859ba9;--text:#e5eff5;--cyan:#7ae0ce;--amber:#e7bc74}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px 'Segoe UI',Arial,sans-serif}button,select{font:inherit;color:inherit;background:#172733;border:1px solid #344653;border-radius:5px;padding:9px 12px;cursor:pointer}button:hover,select:hover{border-color:var(--cyan);background:#213a44}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.35;cursor:default}.primary{background:#79dcc9;border-color:#79dcc9;color:#102b28;font-weight:600}.primary:hover{background:#a4edde;color:#102b28}.muted{color:var(--muted)}.eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:1.9px;color:var(--muted)}header{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px}.brand{font-size:20px;font-weight:800;letter-spacing:3px}.brand span{color:var(--cyan)}.brand small{font-size:9px;letter-spacing:2px;font-weight:400;color:#93a9b6;margin-left:25px}.badge{font:10px Consolas,monospace;color:#a8bdc9;letter-spacing:1px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:8px;box-shadow:0 0 10px #79dfc844}main{padding:20px 24px 14px}.titlebar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}h1{font-size:25px;font-weight:500;letter-spacing:-.6px;margin:3px 0 5px}p{color:var(--muted);line-height:1.6;margin:0}.controls{display:flex;align-items:center;gap:6px}.controls button{font-size:11px}.controls select{font-size:11px}.kpis{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}.kpi{padding:12px 18px;border-right:1px solid var(--line)}.kpi:first-child{padding-left:0}.kpi:last-child{border:0}.value{font-size:24px;font-weight:400;margin-top:6px;font-variant-numeric:tabular-nums}.value small{font-size:11px;color:var(--muted);margin-left:5px}.kpi small.caption{font-size:10px;color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:15px;align-items:start}.mapwrap,aside{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--panel)}.maphead{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid var(--line);background:#111e28}.levels{display:flex;align-items:center;gap:6px}.level{background:none;border:0;padding:8px 9px;font-size:11px;color:#93aab8}.level b{font:10px Consolas,monospace;margin-right:6px;color:#5d7888}.level[aria-current=true]{color:#aff2df;background:#1d363a}.level[aria-current=true] b{color:#79dbca}.chevron{color:#435c6b}.stage{height:clamp(610px,calc(100vh - 285px),1000px);position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#182b35 0%,#0b151f 70%);touch-action:none}.stage:fullscreen{height:100vh}.stage svg{width:100%;height:100%;display:block;user-select:none;cursor:grab}.stage svg.dragging{cursor:grabbing}.hud-top{position:absolute;top:19px;left:20px;pointer-events:none}.hud-top .eyebrow{font-size:9px;color:#7796a6}.hud-top h2{font-weight:500;font-size:19px;margin:6px 0;color:#d8e9f0}.viewnote{font:10px Consolas,monospace;color:#6f91a2;letter-spacing:1px}.zoomtools{position:absolute;right:16px;top:18px;display:flex;flex-direction:column;gap:5px}.zoomtools button{background:#10212ce8;width:33px;height:33px;padding:0;font-size:17px}.zoomtools button.small{font-size:14px}.compass{position:absolute;left:20px;bottom:18px;font:10px Consolas,monospace;color:#648492;letter-spacing:2px;pointer-events:none}.compass span{display:block;border-left:1px solid #698995;height:22px;margin-bottom:7px}.hint{position:absolute;right:15px;bottom:18px;font-size:10px;color:#7a98a8;background:#0b1824cc;padding:8px;border-radius:3px;pointer-events:none}.entry{position:absolute;left:20px;bottom:75px;width:275px;padding:19px;background:#0b1925ef;border:1px solid #3e5a65;border-left:2px solid var(--amber);border-radius:4px;backdrop-filter:blur(8px);transition:opacity .35s,transform .35s}.entry.hidden{opacity:0;transform:translateY(15px);pointer-events:none}.entry h3{font-size:22px;font-weight:450;margin:9px 0}.entry p{font-size:11px;margin-bottom:16px}.entry button{width:100%;text-align:left;display:flex;justify-content:space-between}.entry .eyebrow{color:var(--amber)}.legend{display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding:11px 16px;font-size:10px;color:var(--muted);border-top:1px solid var(--line)}.legend i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px}.legend .right{margin-left:auto;color:#668290}.sidehead{padding:19px 18px 15px;border-bottom:1px solid var(--line)}.sidehead h2{font-weight:500;font-size:20px;margin:8px 0}.status{font:10px Consolas,monospace;padding:4px 6px;border:1px solid #3a5e5b;color:var(--cyan);border-radius:3px}.details{padding:0 18px}.row{padding:11px 0;display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #223541;font-size:11px}.row span{color:var(--muted)}.row b{font-weight:500;text-align:right}.progress{height:3px;background:#293d49;margin:16px 0}.progress div{height:100%;background:var(--cyan);transition:width .1s}.note{font-size:10px;padding:0 18px 16px}.products{border-top:1px solid var(--line);padding:15px 12px}.product{display:flex;justify-content:space-between;align-items:center;width:100%;background:transparent;border:1px solid transparent;border-radius:4px;padding:9px 7px;margin-top:3px;font:11px Consolas,monospace}.product span{font:10px 'Segoe UI',sans-serif;color:var(--muted)}.product.chosen{background:#193536;border-color:#355d58;color:#9aead5}.timeline{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 15px;border:1px solid var(--line);background:#0e1a24;border-radius:5px}.timeline label{font-size:10px;color:var(--muted);white-space:nowrap}.timeline input{width:100%;accent-color:#75d9c7}.timeline output{font:11px Consolas,monospace;white-space:nowrap;color:#a1c2cb;min-width:100px}.bottom{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:10px;line-height:1.5;color:#829ba9}.bottom b{font-weight:500;color:#bdd1db}footer{display:flex;justify-content:space-between;font-size:9px;color:#5c7c8c;margin-top:14px;letter-spacing:.4px}.station{cursor:pointer;outline:none}.cell{stroke:#597280;stroke-width:1.5}.station.active .cell{stroke:#7adfcb;stroke-width:3}.station.selected .cell,.station:focus-visible .cell{stroke:#d1fff2;stroke-width:3}.station .lamp{fill:#607782}.station.active .lamp{fill:#7bead0;filter:drop-shadow(0 0 5px #74ddc9)}.station.waiting .lamp{fill:#f0be72}.route{fill:none;stroke:#60a8a4;stroke-width:2;opacity:.32}.flow{fill:none;stroke:#91e1d4;stroke-width:2.5;stroke-dasharray:4 28;opacity:.6}.route.outside{stroke:#d5b577}.flow.outside{stroke:#e5c18c}.station-name{fill:#c2d3dc;font-size:18px}.machine-label{font-size:31px;font-weight:550;fill:#e5f2f5}.roof{pointer-events:none}.context-label{font-size:27px;fill:#708993;letter-spacing:3px}.zone-hit{cursor:pointer}.zone-hit:focus{outline:none;stroke:#fff}.cab-token{cursor:pointer}svg text{font-family:'Segoe UI',Arial,sans-serif;pointer-events:none}svg .mono{font-family:Consolas,monospace}.reduced *{scroll-behavior:auto!important}@media(max-width:1100px){main{padding:16px}.workspace{grid-template-columns:minmax(0,1fr) 245px}.controls{flex-wrap:wrap}.titlebar p{font-size:11px}.kpi{padding:10px}.eyebrow{letter-spacing:1.2px}.maphead{padding:0 8px}.level{font-size:10px;padding:8px 5px}.legend .right{display:none}}@media(max-width:850px){.workspace{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr}.products{grid-column:2;grid-row:1/4}.titlebar{align-items:flex-start;flex-direction:column;gap:12px}.kpis{grid-template-columns:repeat(3,1fr)}.kpi:nth-child(3){border:0}.stage{height:670px}.brand small{display:none}.bottom{flex-direction:column}.maphead{gap:6px}.badge{font-size:9px}}@media(max-width:480px){header{padding:0 15px}.brand{font-size:17px}main{padding:12px}.kpi .eyebrow{font-size:8px}.value{font-size:21px}.kpi:first-child{padding-left:10px}aside{display:block}.stage{height:580px}.entry{width:245px;bottom:65px;left:14px}.hint{font-size:8px;bottom:10px}.compass{bottom:38px}.level b{display:none}.level{font-size:10px}.maphead .badge{font-size:8px}.hud-top h2{font-size:15px}.controls button{padding:8px}.legend{gap:10px}}

/* --- toegevoegd voor de afgeschermde versie --- */
body.vergrendeld main, body.vergrendeld header .badge{display:none}
.poort{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:20}
.poort form{width:320px;max-width:calc(100vw - 40px);border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:26px}
.poort h2{font-size:17px;font-weight:500;margin:10px 0 6px;color:var(--text)}
.poort p{font-size:12px;margin-bottom:18px}
.poort label{display:block;font-size:11px;color:var(--muted);margin:14px 0 6px}
.poort input{width:100%;background:#0c1922;border:1px solid #344653;border-radius:5px;padding:10px;color:var(--text);font:inherit}
.poort button{width:100%;margin-top:20px}
.melding{margin-top:14px;font-size:11px;color:#e79a74;min-height:15px}
.melding.bezig{color:var(--muted)}
#uitloggen{font-size:11px}