:root{--yellow:#fc0;--yellow-deep:#f5b800;--ink:#15161a;--ink-soft:#5b6270;--ink-faint:#9aa1ad;--surface:#fff;--surface-2:#f6f7f9;--surface-3:#eef0f3;--line:#e4e7ec;--line-strong:#d3d8df;--red:#d81c1c;--red-deep:#a40f0f;--amber:#f59e0b;--green:#1b9e4b;--green-deep:#157f3c;--shadow-sm:0 1px 2px #1018280f, 0 1px 3px #1018281a;--shadow-md:0 4px 10px #10182814, 0 10px 24px #1018281a;--shadow-lg:0 8px 18px #1018281a, 0 24px 48px #10182829;--radius:14px;--radius-sm:9px;--font:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}html,body,#root{background:var(--surface-2);width:100%;height:100%;color:var(--ink);font:400 14px/1.45 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;padding:0}.map-root{width:100vw;height:100vh}.maplibregl-ctrl-attrib a{color:inherit}.panel-surface{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md)}.header-bar{z-index:12;background:var(--surface);border-bottom:4px solid var(--yellow);height:56px;box-shadow:var(--shadow-sm);box-sizing:border-box;justify-content:space-between;align-items:center;gap:12px;padding:0 18px;display:flex;position:fixed;top:0;left:0;right:0}.header-brand{color:var(--ink);white-space:nowrap;align-items:center;gap:11px;display:inline-flex}.header-logo{border-radius:50%;flex:none;width:28px;height:28px;display:block;box-shadow:0 1px 3px #0e518d59}.header-wordmark{flex-direction:column;line-height:1.05;display:flex}.header-name{letter-spacing:-.01em;font-size:16px;font-weight:800}.header-slogan{color:var(--ink-soft);letter-spacing:.005em;font-size:11px;font-weight:500}@media (width<=560px){.header-slogan{display:none}}.header-status{color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap;align-items:center;gap:8px;font-size:13px;display:flex;overflow:hidden}.header-stat{align-items:center;gap:6px;display:inline-flex}.header-stat-btn{font:600 13px/1 var(--font);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);cursor:pointer;border-radius:999px;padding:7px 13px;transition:background .12s,border-color .12s,box-shadow .12s}.header-stat-btn:hover{background:var(--surface-3)}.header-stat-btn.has-jams{background:var(--yellow);border-color:var(--yellow-deep);color:var(--ink)}.header-stat-btn.has-jams:hover{background:var(--yellow-deep)}.header-stat-btn.active{background:var(--yellow-deep);border-color:var(--amber);color:var(--ink);box-shadow:inset 0 0 0 1px var(--amber)}.header-stat-btn.has-closures{color:var(--red);background:#d81c1c1a;border-color:#d81c1c59}.header-stat-btn.has-closures:hover{background:#d81c1c29}.header-stat-closure.active{background:var(--red);border-color:var(--red-deep);color:#fff;box-shadow:inset 0 0 0 1px var(--red-deep)}.header-stat-closure.active:hover{background:var(--red-deep)}.layer-toggle{z-index:9;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);font:400 13px/1.4 var(--font);box-shadow:var(--shadow-md);min-width:170px;padding:12px 14px;position:fixed;top:72px;left:16px}.layer-toggle-title{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;font-size:11px;font-weight:700}.layer-toggle ul{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.layer-toggle label{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:7px;align-items:center;gap:9px;padding:5px 4px;transition:background .1s;display:flex}.layer-toggle label:hover{background:var(--surface-2)}.layer-toggle input[type=checkbox]{accent-color:var(--yellow-deep);width:15px;height:15px;margin:0}.layer-toggle .swatch{border:1px solid #0000001f;border-radius:3px;flex-shrink:0;width:12px;height:12px}.layer-toggle .swatch-closure{background:repeating-linear-gradient(-45deg, var(--red) 0, var(--red) 3px, #fff 3px, #fff 6px)}.layer-group{border-top:1px solid var(--line);margin-top:2px;padding-top:2px}.layer-group-head{width:100%;font:600 12px/1 var(--font);color:var(--ink-soft);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:7px;align-items:center;gap:7px;padding:7px 4px;display:flex}.layer-group-head:hover{background:var(--surface-2)}.layer-group-caret{color:var(--ink-faint);font-size:14px;line-height:1;transition:transform .12s;display:inline-block}.layer-group.open .layer-group-caret{transform:rotate(90deg)}.layer-group-title{flex:1}.layer-group-count{color:var(--ink-faint);font-variant-numeric:tabular-nums;font-weight:500}.layer-group ul{margin-top:2px;padding-left:4px}.detail-panel{z-index:11;background:var(--surface);width:min(360px,100vw - 32px);max-height:calc(100vh - 156px);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);font:400 13px/1.5 var(--font);box-shadow:var(--shadow-lg);padding:0;position:fixed;top:72px;right:16px;overflow:auto}.detail-panel header{border-bottom:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius) var(--radius) 0 0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.detail-panel .kind-tag{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-size:11px;font-weight:700}.close-btn{color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:8px;place-items:center;width:28px;height:28px;font-size:20px;line-height:1;transition:background .1s,color .1s;display:grid}.close-btn:hover{background:var(--surface-3);color:var(--ink)}:root{--weather-banner-h:44px}.weather-banner-wrap{z-index:11;flex-direction:column;align-items:center;display:flex;position:fixed;top:56px;left:0;right:0}.weather-banner{width:100%;height:var(--weather-banner-h);cursor:pointer;font:600 13.5px/1.4 var(--font);box-shadow:var(--shadow-sm);border:none;justify-content:center;align-items:center;gap:9px;padding:0 16px;display:flex}.weather-banner-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.weather-banner-text strong{font-weight:800}.weather-chevron{flex:none;transition:transform .14s}.weather-chevron.open{transform:rotate(180deg)}.weather-geel{background:var(--yellow);color:var(--ink)}.weather-oranje{color:#fff;background:#f08a00}.weather-rood{background:var(--red);color:#fff}.has-weather-banner .layer-toggle,.has-weather-banner .jam-list,.has-weather-banner .detail-panel{top:calc(72px + var(--weather-banner-h))}.has-weather-banner .detail-panel{max-height:calc(100vh - 156px - var(--weather-banner-h))}.has-weather-banner .jam-list{max-height:calc(100vh - 104px - var(--weather-banner-h))}.weather-popup{background:var(--surface);width:min(460px,100vw - 32px);max-height:calc(100vh - 120px);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);margin-top:6px;overflow:auto}.weather-popup header{border-bottom:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius) var(--radius) 0 0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.weather-popup .kind-tag{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-size:11px;font-weight:700}.weather-list{margin:0;padding:0;list-style:none}.weather-section{font:700 11px/1 var(--font);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);background:var(--surface-2);border-bottom:1px solid var(--line);padding:9px 16px 6px}.weather-item{border-bottom:1px solid var(--line);padding:13px 16px}.weather-item:last-child{border-bottom:none}.weather-item-head{align-items:center;gap:8px;display:flex}.weather-chip{font:700 11px/1 var(--font);text-transform:uppercase;letter-spacing:.04em;border-radius:6px;padding:3px 7px}.weather-phenomenon{color:var(--ink);font-size:14px;font-weight:700}.weather-regions{color:var(--ink);margin-top:5px;font-size:13px}.weather-validity{color:var(--ink-soft);flex-wrap:wrap;align-items:center;gap:7px;margin-top:5px;font-size:12.5px;display:flex}.weather-now{font:700 11px/1 var(--font);text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--red);border-radius:999px;padding:3px 8px}.weather-desc{color:var(--ink-soft);margin:7px 0 0;font-size:13px;line-height:1.45}.detail-body{flex-direction:column;gap:11px;padding:16px;display:flex}.detail-body h2{color:var(--ink);letter-spacing:-.01em;margin:0 0 6px;font-size:16px;font-weight:700;line-height:1.3}.detail-body .field{border-bottom:1px solid var(--line);grid-template-columns:108px 1fr;gap:8px;padding-bottom:9px;font-size:13px;display:grid}.detail-body .field:last-of-type{border-bottom:none;padding-bottom:0}.detail-body .field-label{color:var(--ink-soft);font-weight:500}.detail-body .field-value{color:var(--ink);word-break:break-word}.detail-body .field-value.mono{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px}.detail-body .text-lines{border-radius:var(--radius-sm);letter-spacing:.03em;color:#fbbf24;text-shadow:0 0 6px #fbbf2473;white-space:pre;text-align:center;background:#050608;border:1px solid #050608;padding:14px 16px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:16px;font-weight:600;line-height:1.45;overflow-x:auto}.detail-body .text-lines>div:empty:before{content:" "}.detail-body .text-lines.empty{color:#fbbf2459;text-shadow:none;font-style:italic;font-weight:400}.detail-body .vms-image{border-radius:var(--radius-sm);border:1px solid var(--line);box-sizing:border-box;width:100%;image-rendering:pixelated;background:#0f172a;padding:6px}.detail-body .muted{color:var(--ink-soft)}.detail-body .error{color:var(--red)}.detail-body .gantry-lanes{border-radius:var(--radius-sm);background:#050608;border:1px solid #050608;justify-content:safe center;align-items:flex-start;gap:6px;padding:12px 10px;display:flex;overflow-x:auto}.detail-body .lane{flex-direction:column;flex:0 0 52px;align-items:center;gap:4px;min-width:0;display:flex}.detail-body .matrix-sign{background:#0a0c0e;border:1px solid #ffffff1a;border-radius:4px;width:52px;height:52px;display:block}.matrix-sign .flasher-pair circle{fill:#fef3c7;filter:drop-shadow(0 0 2px #fbbf24)}.matrix-sign .flasher-upper{animation:2s step-end infinite msi-flash-upper}.matrix-sign .flasher-lower{animation:2s step-end infinite msi-flash-lower}@keyframes msi-flash-upper{0%,30%{opacity:1}30.01%,to{opacity:0}}@keyframes msi-flash-lower{0%,30%{opacity:0}30.01%,60%{opacity:1}60.01%,to{opacity:0}}.detail-body .lane-num{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:11px}.detail-body .hecto-sign{--hecto-fg:#f4f1e9;color:var(--hecto-fg);aspect-ratio:5/3;background:#1c7a48;border-radius:8px;padding:7px;font-family:Overpass,system-ui,sans-serif;font-weight:700;display:flex;box-shadow:0 4px 14px #00000040;container-type:inline-size}.detail-body .hecto-inner{border:2px solid var(--hecto-fg);border-radius:4px;flex-direction:column;flex:1;justify-content:space-between;padding:4% 6%;display:flex}.detail-body .hecto-row{align-items:center;gap:4cqw;display:flex}.detail-body .hecto-row.top{justify-content:flex-start;gap:8cqw}.detail-body .hecto-row.bottom{align-items:flex-end;gap:3.5cqw}.detail-body .road-badge{letter-spacing:.01em;border-radius:1.6cqw;justify-content:center;align-items:center;padding:2.6cqw 3.5cqw;font-size:12.5cqw;font-weight:800;line-height:1;display:inline-flex}.detail-body .road-badge-txt{display:block;transform:translateY(.11em)}.detail-body .road-badge.road-A{color:var(--hecto-fg);box-shadow:inset 0 0 0 .6cqw var(--hecto-fg);background:#cc1417}.detail-body .road-badge.road-N{color:#111;box-shadow:inset 0 0 0 .6cqw var(--hecto-fg);background:#f2c200}.detail-body .road-badge.road-other{background:var(--hecto-fg);color:#111}.detail-body .side-text{color:var(--hecto-fg);padding-top:2.5cqw;font-size:16cqw;font-weight:700;line-height:1}.detail-body .km-text{letter-spacing:.01em;font-size:22cqw;font-weight:800;line-height:.9}.detail-body .letter-badge{color:#111;background:#f2c200;border-radius:1cqw;padding:0 2.5cqw;font-size:14cqw;font-weight:800;line-height:1.3}.time-slider{background:var(--surface);color:var(--ink);border:1px solid var(--line);font:500 13px/1 var(--font);z-index:10;box-sizing:border-box;width:min(720px,100vw - 32px);box-shadow:var(--shadow-md);border-radius:999px;align-items:center;gap:14px;padding:11px 16px;display:flex;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}.time-slider input[type=range]{accent-color:var(--yellow-deep);cursor:pointer;flex:1}.time-slider .now-btn{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);font:600 13px/1 var(--font);cursor:pointer;border-radius:999px;padding:7px 13px;transition:background .12s,border-color .12s}.time-slider .now-btn:hover{background:var(--surface-3)}.time-slider .now-btn.active{background:var(--green);border-color:var(--green-deep);color:#fff}.time-slider .time-display{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;min-width:12ch;color:var(--ink-soft)}.locate-btn{z-index:10;background:var(--surface);width:44px;height:44px;color:var(--ink);border:1px solid var(--line);cursor:pointer;box-shadow:var(--shadow-md);border-radius:50%;justify-content:center;align-items:center;padding:0;transition:background .12s,color .12s,transform .12s;display:flex;position:fixed;bottom:84px;right:16px}.locate-btn svg{width:20px;height:20px}.locate-btn:hover{background:var(--yellow);border-color:var(--yellow-deep)}.locate-btn:active{transform:scale(.94)}.locate-btn.loading{opacity:.5;cursor:default}.locate-btn.error{color:var(--red);border-color:#d81c1c66}.map-loading{background:var(--surface-2);z-index:5;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.map-loading .spinner{border:4px solid var(--surface-3);border-top-color:var(--yellow-deep);border-radius:50%;width:38px;height:38px;animation:.8s linear infinite map-spin}@keyframes map-spin{to{transform:rotate(360deg)}}.jam-list{z-index:10;background:var(--surface);width:min(390px,100vw - 32px);max-height:calc(100vh - 104px);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);font:400 13px/1.45 var(--font);box-shadow:var(--shadow-lg);flex-direction:column;animation:.2s cubic-bezier(.16,1,.3,1) jam-list-in;display:flex;position:fixed;top:72px;left:16px;overflow:hidden}@keyframes jam-list-in{0%{opacity:0;transform:translateY(-6px)scale(.985)}to{opacity:1;transform:none}}.jam-list header{background:var(--yellow);border-bottom:1px solid var(--yellow-deep);justify-content:space-between;align-items:center;padding:13px 16px;display:flex}.jam-list .close-btn{color:#15161ab3}.jam-list .close-btn:hover{color:var(--ink);background:#00000014}.jam-list-title{color:var(--ink);letter-spacing:-.01em;font-size:15px;font-weight:800}.jam-list-body{padding:4px 0 8px;overflow:auto}.jam-list-body .muted{color:var(--ink-soft);padding:14px 16px}.jam-list-body .error{color:var(--red);padding:14px 16px}.jam-group{padding-top:4px}.jam-group-head{background:linear-gradient(var(--surface) 70%, #fff0);padding:12px 16px 6px;position:sticky;top:0}.jam-row{text-align:left;width:100%;color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;border-left:3px solid #0000;align-items:center;gap:12px;padding:11px 16px;transition:background .1s,border-color .1s;display:flex}.jam-row+.jam-row{border-top:1px solid var(--line)}.jam-row:hover{background:var(--surface-2);border-left-color:var(--yellow)}.jam-icon{background:var(--surface-3);width:34px;height:34px;color:var(--ink-soft);border-radius:50%;flex:none;place-items:center;font-size:16px;display:grid}.jam-icon.blocked{color:var(--red);background:#d81c1c1a}.jam-row-main{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.jam-row-where{color:var(--ink);white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.jam-row-sub{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:12px;font-weight:500}.jam-row-sub.blocked,.delay-warn{color:var(--red);font-weight:700}.delay-severe{color:var(--red-deep);font-weight:700}.jam-chevron{color:var(--ink-faint);flex:none;font-size:20px}.closure-icon{flex:none;width:30px;height:30px}.closure-list .jam-row:hover{border-left-color:var(--red)}.closure-full{color:var(--red);font-weight:700}.road-shield{letter-spacing:.03em;box-shadow:var(--shadow-sm);border-radius:5px;padding:3px 10px;font-size:13px;font-weight:800;display:inline-block}.road-shield.a-road{background:var(--red);color:#fff;box-shadow:inset 0 0 0 2px #fff,0 1px 2px #0003}.road-shield.n-road{background:var(--yellow);color:#1a1a1a;box-shadow:inset 0 0 0 1px var(--yellow-deep)}