:root{
  --navy:#0B2545;--teal:#13A89E;--teal-ink:#0C7C74;--bg:#EDF2F6;--panel:#fff;--ink:#0B2545;--muted:#55687E;--line:#D2DCE6;--soft:#F3F7FA;
  --asphalt:#28303A;--aisle:#333D49;--paint:#E9EDF1;--lane:#E3C24A;--free:#22C55E;--occ:#EF4444;--fault:#F5A524;--unk:#8592A3;--resv:#8B5CF6;
  --display:'Barlow Semi Condensed','Arial Narrow',sans-serif;--body:'Barlow',system-ui,sans-serif;--mono:ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{--bg:#06111F;--panel:#0D1D33;--ink:#E3EBF4;--muted:#8EA2B9;--line:#1E3352;--soft:#0A182B;--teal-ink:#3FD0C4;color-scheme:dark}}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14.5px/1.45 var(--body)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--teal-ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
[hidden]{display:none!important}

/* shell */
.shell{display:grid;grid-template-rows:auto 1fr;min-height:100%}
header.top{background:var(--navy);color:#fff;display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap}
.mark{width:34px;height:34px;border-radius:8px;background:var(--teal);display:grid;place-items:center;font:700 16px var(--display)}
.top h1{margin:0;font:600 17px var(--body)}
.top nav{display:flex;gap:4px;margin-left:12px;flex-wrap:wrap}
.top nav a{color:#C9D8E8;text-decoration:none;padding:7px 12px;border-radius:8px;font-weight:600;font-size:14px}
.top nav a.on{background:#fff;color:var(--navy)}
.top .spacer{flex:1}
.top select{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:6px 8px}
.top select option{color:#111}
.top .who{font-size:13px;color:#A3B9D0}
.top .btn{background:rgba(255,255,255,.1);border-color:transparent;color:#fff}
main{padding:16px 18px;max-width:1500px;width:100%;margin:0 auto}

/* primitives */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.card h2{margin:0 0 10px;font:600 17px var(--body)}
.card h3{margin:14px 0 6px;font:600 14px var(--body)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid var(--line);background:var(--soft);padding:7px 12px;border-radius:9px;font-weight:600;font-size:14px}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.danger{color:#C2362F}
.btn.sm{padding:4px 9px;font-size:13px}
.btn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=file],select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
textarea{font:12.5px/1.45 var(--mono)}
.muted{color:var(--muted)}.small{font-size:13px}.mono{font-family:var(--mono);font-size:12.5px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:13px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--unk)}
.msg{margin-top:10px;font-size:13px;padding:8px 10px;border-radius:8px;background:var(--soft);border-left:3px solid var(--teal)}
.msg.err{border-left-color:var(--occ)}
.toast{position:fixed;right:18px;bottom:18px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:50;max-width:360px;font-size:14px}
.toast.err{background:#9F1D1D}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stat b{display:block;font:600 26px/1 var(--display);font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.stat span i{width:9px;height:9px;border-radius:50%}
.login{max-width:380px;margin:60px auto}
.plt{display:inline-block;background:#FAFAF6;color:#111;border:2px solid #1B1B1B;border-radius:5px;padding:1px 8px;font:700 15px/1.3 var(--display);letter-spacing:.5px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}.kv dt{color:var(--muted)}.kv dd{margin:0;overflow-wrap:anywhere}
code{font-family:var(--mono);font-size:12.5px;background:var(--soft);padding:1px 5px;border-radius:5px}
pre{background:var(--soft);border-radius:8px;padding:8px;font:12px/1.4 var(--mono);overflow:auto;max-height:260px;margin:6px 0 0}

/* map canvas */
.mapwrap{background:var(--asphalt);border-radius:14px;overflow:hidden;position:relative;border:1px solid var(--line)}
.mapwrap svg{display:block;width:100%;height:auto;user-select:none;touch-action:none}
.mapwrap svg.edit{cursor:crosshair}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:8px;align-items:center}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.vtoggle{margin-left:auto;display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px}
.vtoggle button{border:0;background:transparent;padding:4px 10px;border-radius:6px;font-weight:600;font-size:13px;color:var(--muted)}
.vtoggle button[aria-pressed="true"]{background:var(--navy);color:#fff}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}
@media (max-width:1000px){.layout{grid-template-columns:1fr}}
.seg{display:flex;gap:3px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{border:0;background:transparent;padding:6px 10px;border-radius:7px;font-weight:600;font-size:13.5px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.bay .b{fill:transparent;stroke:var(--paint);stroke-width:.08;stroke-opacity:.85}
.bay.s-free .b{fill:rgba(34,197,94,.16)}
.bay.s-fault .b{fill:rgba(245,165,36,.22)}
.bay.s-reserved .b{fill:rgba(139,92,246,.22)}
.bay.s-closed .b{fill:rgba(133,146,163,.3)}
.bay.s-unknown .b{fill:url(#hatch)}
.bay.t-ev .b{stroke:var(--teal)}.bay.t-accessible .b{stroke:#3B82F6}
.bay.sel .b{stroke:var(--teal);stroke-width:.18;stroke-opacity:1}
.bay{cursor:pointer}
.led{stroke:rgba(0,0,0,.35);stroke-width:.04}
.s-free .led{fill:var(--free)}.s-occupied .led{fill:var(--occ)}.s-fault .led{fill:var(--fault)}.s-unknown .led{fill:var(--unk)}.s-reserved .led{fill:var(--resv)}.s-closed .led{fill:var(--unk)}
.num{fill:#fff;font:700 .9px var(--display);text-anchor:middle;dominant-baseline:central;pointer-events:none;paint-order:stroke;stroke:rgba(20,26,34,.55);stroke-width:.14px}
.car{display:none}.bay.s-occupied .car{display:inline}
.carbody{fill:#8E9BAA}.carglass{fill:#3D4957}
.aisle{fill:var(--aisle)}.centre{stroke:var(--lane);stroke-width:.08;stroke-dasharray:.6 .5;opacity:.5;fill:none}
.flow{fill:var(--lane);opacity:.75}
.wall{stroke:#5A6675;stroke-width:.25;stroke-linecap:square;fill:none}
.node{fill:var(--teal);stroke:#fff;stroke-width:.08}.node.k-lift,.node.k-stair,.node.k-ramp{fill:#F59E0B}.node.k-kiosk{fill:#fff;stroke:var(--teal);stroke-width:.14}.node.k-entrance,.node.k-exit{fill:var(--lane)}
.node.sel{stroke:var(--lane);stroke-width:.16}.node.from{stroke:#fff;stroke-width:.2}
.edge{stroke:rgba(19,168,158,.75);stroke-width:.18;stroke-linecap:round}.edge.closed{stroke:var(--occ);stroke-dasharray:.3 .3}
.edgehit{stroke:transparent;stroke-width:1.2}
.lbl{fill:rgba(255,255,255,.8);font:600 1px var(--body);text-anchor:middle}
.route-case{fill:none;stroke:#fff;stroke-width:.55;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.route{fill:none;stroke:var(--teal);stroke-width:.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.8 .5;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-1.3}}
.bay.target .b{stroke:var(--teal);stroke-width:.22;animation:pulse 1.2s infinite}
@keyframes pulse{50%{stroke-opacity:.3}}
.pchipg{display:none;pointer-events:none}.bay.s-occupied.hasplate:hover .pchipg,.bay.s-occupied.hasplate.sel .pchipg{display:inline}
.bay.s-occupied.hasplate:hover .num,.bay.s-occupied.hasplate.sel .num{display:none}
.pchip{fill:#FAFAF6;stroke:#111;stroke-width:.06}.ptext{fill:#111;font:700 .62px var(--display);text-anchor:middle;dominant-baseline:central}
.calib{fill:var(--lane);stroke:#111;stroke-width:.05}
.bg-handle{fill:#fff;stroke:var(--teal);stroke-width:.08;cursor:nwse-resize}
.ruler{stroke:rgba(255,255,255,.6);stroke-width:.08}.ruler-t{fill:rgba(255,255,255,.7);font:500 .7px var(--body)}
/* iso */
.slab25{fill:#2F3844}.slab-x{fill:#1C2229}.slab-y{fill:#161B21}
.wall-t{fill:#505B6A}.wall-x{fill:#3E4855}.wall-y{fill:#2E3641}.wall-t,.wall-x,.wall-y{stroke:rgba(255,255,255,.12);stroke-width:.03}
.cshadow{fill:rgba(0,0,0,.38)}.car-t{fill:#A2AEBC}.car-x{fill:#7D8A99}.car-y{fill:#5F6A78}.car-t,.car-x,.car-y{stroke:rgba(0,0,0,.25);stroke-width:.03}
.bay.s-occupied .floornum{display:none}
.vehs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.veh{display:grid;gap:6px;text-align:left;border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:8px}
.veh:hover{border-color:var(--teal)}
.vimg{background:#151B23;border-radius:8px;aspect-ratio:3/1;display:grid;place-items:center;overflow:hidden;color:#8A97A8;font-size:12px}
.vimg img{width:100%;height:100%;object-fit:contain}
.log{list-style:none;margin:0;padding:0;font-size:13.5px;max-height:260px;overflow:auto}
.log li{display:grid;grid-template-columns:66px 1fr;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line)}
.log time{color:var(--muted);font-variant-numeric:tabular-nums}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tools button{border:1px solid var(--line);background:var(--soft);padding:7px 6px;border-radius:8px;font-weight:600;font-size:13px}
.tools button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.kioskscreen{max-width:720px;margin:0 auto}
.kioskscreen .big{font-size:26px;font-family:var(--display);font-weight:600;letter-spacing:1px;padding:12px 14px}
.match{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:10px;margin-bottom:8px}
.match img{width:96px;height:48px;object-fit:contain;background:#151B23;border-radius:8px}
.steps{list-style:none;padding:0;margin:10px 0 0;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid transparent;cursor:pointer}
.steps li::before{content:counter(s);flex:none;width:24px;height:24px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-weight:700;font-size:13px}
.steps li.on{border-color:var(--teal)}
.steps li.on::before{background:var(--teal);color:#fff}

/* organisation picker in the header */
header.top .orgpick { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; flex: 0 0 auto; }
header.top .orgpick label { margin: 0; font-size: 12px; opacity: .7; color: inherit; white-space: nowrap; }
header.top .orgpick select { width: auto; min-width: 180px; max-width: 280px; padding: 6px 10px; }
.err-msg{color:var(--occ,#c0392b);min-height:1em}
.stepno{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--teal,#14a39a);color:#fff;font-size:13px;margin-right:4px;vertical-align:2px}
.api h3{margin:14px 0 6px;font-size:14px}
.kvlist .kvrow{display:flex;width:100%;flex-wrap:nowrap}.kvlist .kvrow input{min-width:0}