:root { color-scheme: dark; --bg:#101318; --panel:#1a1f28; --acc:#4cc2ff; --txt:#e6e9ee; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--txt); display:flex; flex-direction:column; min-height:100vh; }
header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 1.2rem; border-bottom:1px solid #2a3140; }
h1 { margin:0; font-size:1.25rem; } .sub { margin:.25rem 0 0; color:#9aa5b5; font-size:.85rem; }
a { color:var(--acc); }
.btn { background:#243247; color:var(--txt); border:1px solid #39506e; border-radius:8px; padding:.45rem .8rem; cursor:pointer; text-decoration:none; font:inherit; }
.btn:hover { background:#2d405c; }
main { flex:1; display:flex; gap:1rem; padding:1rem; }
#sidebar { width:300px; overflow-y:auto; max-height:78vh; }
#sidebar h2 { font-size:.85rem; color:#8fa2bd; margin:.8rem .2rem .3rem; text-transform:uppercase; letter-spacing:.06em; }
.cam { display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; width:100%; text-align:left; background:var(--panel); color:var(--txt); border:1px solid #2a3140; border-radius:8px; padding:.4rem .5rem; margin:.25rem 0; cursor:pointer; }
.cam:hover,.cam.sel { border-color:var(--acc); }
.cam img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:4px; background:#000; }
.cam small { color:#8fa2bd; }
.cam.off { opacity:.45; }
.cam.off:hover { opacity:.75; }
.off-tag { font-style:normal; font-size:.65rem; color:#ffb4a9; border:1px solid #7a4438; border-radius:4px; padding:0 .25rem; margin-left:.25rem; vertical-align:middle; }
#playerPane { flex:1; min-width:0; }
#playerBox { position:relative; background:#000; border-radius:10px; overflow:hidden; aspect-ratio:16/9; }
video { width:100%; height:100%; }
#noSel { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#5c6a80; font-size:1.2rem; }
#clock { position:absolute; right:.6rem; bottom:2.6rem; font-family:ui-monospace,monospace; font-size:1.05rem; color:#eafff3; background:rgba(4,12,20,.55); border:1px solid rgba(76,194,255,.35); border-radius:6px; padding:.1rem .45rem; pointer-events:none; text-shadow:0 1px 2px #000; }
#clock.hide { display:none; }
#controls { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:.8rem 0; }
#hourBar { display:flex; flex-wrap:wrap; gap:.3rem; }
.hour { width:2.6rem; padding:.35rem 0; text-align:center; background:var(--panel); color:#8fa2bd; border:1px solid #2a3140; border-radius:6px; cursor:pointer; }
.hour.has { color:var(--txt); border-color:#3b6a4f; } .hour.empty { opacity:.35; } .hour.on { background:var(--acc); color:#04121f; font-weight:600; }
#camMeta { color:#b7c2d2; font-size:.95rem; min-height:1.5em; } .miss { color:#e28c8c; }
#exportBar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.4rem 0 .6rem; color:#8fa2bd; font-size:.9rem; }
#exportBar select, #exportBar input { background:var(--panel); color:var(--txt); border:1px solid #39506e; border-radius:6px; padding:.25rem .4rem; font:inherit; }
#exportBar input { width:4rem; }
#exportStatus { font-size:.85rem; color:#7fbf8e; overflow-wrap:anywhere; } #exportStatus.err { color:#e28c8c; }
#exportBtn.busy { border-color:#8a6d3b; background:#3a2f1e; }
#about { max-width:70ch; margin:1.5rem auto; padding:0 1.2rem; color:#9aa5b5; font-size:.92rem; line-height:1.55; }
#about h2 { color:#c8d2e0; font-size:1.05rem; } #about h3 { color:#8fa2bd; font-size:.9rem; margin:.9rem 0 .3rem; text-transform:uppercase; letter-spacing:.05em; }
#about ul { margin:.3rem 0; padding-left:1.2rem; }
footer { padding:.6rem 1.2rem; color:#5c6a80; font-size:.8rem; border-top:1px solid #2a3140; }
.hdrBtns { display:flex; gap:.5rem; flex-shrink:0; }

/* ---- camera map modal ---- */
#mapModal { position:fixed; inset:0; background:rgba(6,9,14,.78); z-index:2000; display:flex; align-items:center; justify-content:center; }
#mapModal[hidden] { display:none; }
#mapBox { width:min(1150px, 96vw); height:min(88vh, 900px); display:flex; flex-direction:column; background:var(--panel); border:1px solid #39506e; border-radius:12px; overflow:hidden; box-shadow:0 12px 48px rgba(0,0,0,.6); }
#mapHead { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.55rem .9rem; border-bottom:1px solid #2a3140; color:#9aa5b5; font-size:.88rem; }
#map { flex:1; background:#0b0e13; }
/* darken the OSM raster tiles only (tile pane); pins/popups stay crisp */
#map .leaflet-layer { filter:invert(1) hue-rotate(185deg) brightness(.82) contrast(1.05) saturate(.75); }
#map .leaflet-control-attribution { background:rgba(16,19,24,.75); color:#6b7686; }
#map .leaflet-control-attribution a { color:#8fa2bd; }
#map .leaflet-bar a { background:#1a1f28; color:#e6e9ee; border-color:#39506e; }

/* camera-name label pills (divIcon child, centred over the marker point);
   border/underline colour encodes the route */
.mk { position:absolute; left:0; top:0; transform:translate(-50%,-135%); display:inline-flex; align-items:center; justify-content:center; height:1.25rem; padding:0 .45rem; font-style:normal; font-size:.68rem; font-weight:600; color:#e8edf4; background:#141a23e6; border:1.5px solid var(--c,#8fa2bd); border-radius:.62rem; box-shadow:0 1px 5px rgba(0,0,0,.6); cursor:pointer; white-space:nowrap; }
.mk::after { content:""; position:absolute; left:50%; bottom:-4px; width:0; height:0; border:4px solid transparent; border-top-color:var(--c,#8fa2bd); transform:translateX(-50%); }
.mk.off { color:#aab3bf; background:#242b36e6; border-style:dashed; border-color:#7a8494; }
.mk.off::after { border-top-color:#7a8494; }
.mk.sel { outline:2px solid var(--acc); outline-offset:1px; transform:scale(1.12); }
.mk:hover { filter:brightness(1.15); }
.mkclus { display:flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; font-style:normal; font-weight:700; font-size:.8rem; color:#04121f; background:var(--acc); border-radius:50%; border:3px solid rgba(76,194,255,.35); box-shadow:0 0 0 6px rgba(76,194,255,.12); }

/* dark-theme Leaflet popups */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:#1a1f28; color:var(--txt); box-shadow:0 4px 18px rgba(0,0,0,.6); }
.leaflet-popup-content { margin:.7rem .8rem; }
.mpop b { display:block; font-size:.95rem; }
.mpop small { display:block; color:#8fa2bd; margin:.15rem 0 .4rem; }
.mpop img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; background:#000; margin-bottom:.45rem; }
.mpop .watch { width:100%; }
.leaflet-container a.leaflet-popup-close-button { color:#8fa2bd; }
.leaflet-container { font:inherit; }

@media (max-width:800px){ main{flex-direction:column} #sidebar{width:100%; max-height:none} header{flex-wrap:wrap} }