:root{color-scheme:dark;--bg:#0c1219;--panel:#141d27;--line:#283340;--text:#ecf1f6;--muted:#8f9fad;--green:#87de57;--amber:#f8c04d;--cyan:#40d7eb}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 0%,#152631 0,transparent 45%),var(--bg);color:var(--text);font:14px/1.5 "Segoe UI",Arial,sans-serif}main{max-width:1600px;margin:auto;padding:28px 40px}header,.brand,.heading,.controls,.panel-heading,.video-footer,.legend,.stat-row,.demo-row,footer{display:flex;align-items:center;justify-content:space-between}header{padding-bottom:24px;border-bottom:1px solid var(--line)}.brand{gap:12px}.brand-icon{display:grid;place-items:center;background:var(--cyan);color:#09202b;width:40px;height:40px;font-weight:800;font-size:25px;border-radius:11px}.brand strong{display:block;font-size:18px;letter-spacing:-.4px}.brand-sub{display:block;color:var(--muted);font-size:10px;letter-spacing:1.7px}.badge,.small-badge{border:1px solid var(--line);border-radius:30px;padding:6px 11px;font-size:12px;color:var(--muted)}.badge{display:flex;gap:8px;align-items:center}.dot,.live-dot{width:7px;height:7px;background:var(--muted);border-radius:50%;display:inline-block}.badge.connected{color:var(--green);border-color:#365032}.badge.connected .dot{background:var(--green);box-shadow:0 0 9px #87de5766}.badge.demo{color:var(--amber)}.badge.demo .dot{background:var(--amber)}.heading{padding:28px 0 26px;gap:20px}.eyebrow{color:var(--muted);font-size:10px;letter-spacing:1.6px;font-weight:600;margin:0 0 10px}h1{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:-1px;margin:0 0 10px}.intro{margin:0;color:var(--muted);font-size:14px}.controls{gap:8px}button,select{font:inherit;color:var(--text);background:#1c2936;border:1px solid #354353;border-radius:7px;padding:9px 14px;cursor:pointer;white-space:nowrap}button:hover{background:#2a3d4e}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button.primary{background:var(--cyan);color:#09212b;border-color:var(--cyan);font-weight:600}button.primary:hover{background:#81e9f5}button:disabled{opacity:.5;cursor:wait}.dashboard{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px}.visuals,aside{display:flex;flex-direction:column;gap:18px;min-width:0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}.panel-heading{padding:14px 18px;gap:14px}.panel-heading strong{font-size:13px;font-weight:600}.panel-heading>div{display:flex;align-items:center;gap:9px}.live-dot{background:var(--cyan)}.muted{color:var(--muted);font-size:11px}.video-wrap{aspect-ratio:16/9;background:#0b1118;position:relative;overflow:hidden}.video-wrap img{display:block;width:100%;height:100%;object-fit:contain}.video-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);background:radial-gradient(ellipse at center,#1e303d,transparent 70%)}.video-empty strong{color:var(--text);font-weight:500}.crosshair{font-size:56px;color:#496270;line-height:1;margin-bottom:12px}.video-footer{padding:10px 18px;font-size:10px;color:var(--muted)}.stale-banner{position:absolute;top:14px;left:14px;background:#101820ed;border:1px solid #6c6746;border-radius:5px;padding:7px 12px;color:var(--amber);font-size:12px}.camera-panel.stale img{opacity:.45}.crop-wrap{min-height:110px;background:#101923;display:grid;place-items:center}.crop-wrap img{width:100%;height:auto;display:block}.crop-wrap p{margin:20px;color:var(--muted);text-align:center;font-size:12px}.legend{justify-content:flex-start;gap:20px;font-size:10px;color:var(--muted);padding:12px 18px}.legend-dot{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px;vertical-align:middle}.parked{background:var(--green)}.pending{background:var(--amber)}.area{background:var(--cyan)}.count-panel,.explanation,.source-panel{padding:22px}.count-panel{background:linear-gradient(155deg,#1c302d,#141d27 70%);border-color:#354c46}.count-line{display:flex;align-items:baseline;gap:12px}#parked-count{font-size:94px;line-height:1.1;letter-spacing:-6px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}.count-unit{color:var(--muted);font-size:18px}.count-scope{font-size:12px;color:var(--muted);margin:9px 0 0}.divider{height:1px;background:var(--line);margin:20px 0}.stat-row{margin:12px 0;color:#b4c1cc;font-size:12px}.stat-row strong{font-size:20px;color:var(--text);font-weight:500}.status-message{margin-top:20px;background:#0d171ea8;border:1px solid #304348;border-radius:7px;padding:12px;color:#bbcbd0;font-size:12px;line-height:1.6}.last-known{margin-top:18px;font-size:10px;color:var(--muted)}.last-known strong{display:block;margin-top:4px;font-size:12px;font-weight:500;color:#b3c4ce}.explanation p,.source-panel p{font-size:12px;color:#a9b9c6}.rule{display:flex;align-items:center;gap:16px}.rule-number{font-size:40px;letter-spacing:-2px;color:var(--text)}.rule-number span{font-size:18px;color:var(--muted);margin-left:2px}.rule p{line-height:1.6}.explanation .subtle,.source-panel .subtle{color:#8193a3;font-size:11px}.source-panel>strong{font-size:14px}.text-link{color:var(--cyan);text-decoration:none;font-size:11px}.text-link:hover{text-decoration:underline}.demo-row{gap:9px}.demo-row label{font-size:12px;flex:1}.demo-row select{padding:5px;font-size:12px}.demo-row button{padding:5px 10px;font-size:12px}.chart-caption{font-size:10px}.history-panel .panel-heading>div{align-items:flex-start;flex-direction:column;gap:2px}.chart-wrap{height:132px;margin:0 18px;position:relative}canvas{width:100%;height:100%}#chart-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--muted);text-align:center}.chart-axis{display:flex;justify-content:space-between;padding:4px 18px 14px 46px;color:var(--muted);font-size:10px}footer{font-size:10px;color:#6f8496;padding:24px 0 0;gap:20px}[hidden]{display:none!important}.small-badge.full{color:var(--green);border-color:#365032}.small-badge.partial{color:var(--amber);border-color:#665837}
.count-observation{margin:12px 0 0;font-size:12px;line-height:1.7;color:#b3c4ce}.count-panel.historical{border-color:#665837;background:linear-gradient(155deg,#302b1e,#141d27 70%)}.count-panel.historical #parked-count{color:var(--amber)}.count-panel.historical #count-title{color:var(--amber)}
.recording-panel{padding:20px}.recording-panel>strong{color:var(--cyan);font-size:14px}.recording-panel .subtle{color:var(--muted);font-size:11px;margin:10px 0 16px}.recording-panel button{font-size:11px;padding:6px 10px}.crop-caption{padding:0 18px;margin:12px 0 0;color:var(--amber);font-size:11px}.video-footer{flex-wrap:wrap;gap:6px}.review-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:18px;margin-bottom:18px}.review-controls label{font-size:12px}.review-controls select{max-width:100%}#frame-slider{flex:1;min-width:200px}.downloads{display:flex;flex-direction:column;gap:12px}#review-error{color:var(--amber)}
.best-view-panel .crop-caption{margin-bottom:14px}#review-count{font-size:80px;line-height:1.1;letter-spacing:-4px;color:var(--green)}
.reference-image{display:block;width:100%;height:auto}
@media(min-width:1450px){.dashboard{grid-template-columns:minmax(0,1fr) 340px}.count-panel{padding:26px}}
@media(max-width:1050px){main{padding:22px}.dashboard{grid-template-columns:minmax(0,1fr) 285px}.count-panel,.explanation,.source-panel{padding:18px}h1{font-size:27px}.legend{gap:10px;font-size:9px}.video-footer{font-size:9px}.panel-heading{padding:12px}.muted{font-size:10px}}
@media(max-width:760px){main{padding:18px 14px}.heading{align-items:flex-start;flex-direction:column;padding:22px 0}.dashboard{grid-template-columns:1fr}.visuals{gap:14px}aside{display:grid;grid-template-columns:1fr 1fr;gap:14px}.count-panel{grid-column:1/-1}.count-line{float:left;margin-right:26px}.count-panel .divider{clear:both}.explanation,.source-panel{padding:16px}h1{font-size:26px}.badge{font-size:10px}.brand-sub{font-size:9px}.video-footer{padding:9px 12px}.crop-wrap{min-height:75px}footer{align-items:flex-start;flex-direction:column;gap:6px}}
@media(max-width:450px){aside{display:flex}.panel-heading{gap:6px}.muted{font-size:9px}.legend{justify-content:space-between;padding:10px}.chart-caption{font-size:9px}.badge{max-width:145px}}
