:root{--accent:#3ddc97;--accent2:#5eb1ff;--bg:#1a1a1a;--bg1:#2c2c2c;--bg2:#3a3a3a;--fg:#e0e0e0;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--line:#444;--muted:#bdbdbd;--primary:#e82127;--warn:#ffd166}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font:16px var(--font);height:100%;overflow:hidden}
label.small{color:#ccc;font-size:.9rem}
#app{display:flex;height:100vh}
#grid{background:#000;display:grid;flex:1;gap:2px;height:100%}
#map{height:100%;position:relative;user-select:none;width:100%;-webkit-user-select:none}
#mapToggle{background:rgba(0,0,0,.55);border:1px solid #666;border-radius:4px;bottom:8px;color:#fff;cursor:pointer;height:24px;position:absolute;right:8px;width:24px;z-index:5}
#mapWrap{background:var(--bg1);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.5);display:none;height:255px;overflow:hidden;position:absolute;right:16px;top:16px;user-select:none;width:340px;z-index:20;-webkit-user-select:none}
#mapWrap.expanded{height:60%;width:60%}
#mapWrap.visible{display:flex}
#menuBtn{background:rgba(0,0,0,.55);border:1px solid #666;border-radius:6px;color:#fff;cursor:pointer;display:none;left:12px;padding:8px 10px;position:absolute;top:12px;z-index:25}
#osmMarks{height:100%;left:0;pointer-events:auto;position:absolute;top:0;user-select:none;width:100%;z-index:3;-webkit-user-select:none}
#osmTiles{left:0;pointer-events:none;position:absolute;top:0;user-select:none;z-index:1;-webkit-user-select:none}
#thumbRow{background:#0b0b0b;border-top:1px solid var(--line);display:none;gap:6px;overflow-x:auto;padding:6px}
#thumbRow .vwrap{aspect-ratio:4/3;cursor:pointer;flex:0 0 44%;max-width:44%}
.action{align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:6px;color:var(--fg);cursor:pointer;display:flex;flex:1;gap:8px;justify-content:center;padding:10px}
.action.toggle.active{background:#2e3b2e;border-color:#5aa75a;box-shadow:inset 0 0 0 1px #6fd06f}
.action:hover{background:#454545}
.badge{background:#303030;border:1px solid var(--line);border-radius:6px;font-family:ui-monospace, Menlo, Consolas, monospace;padding:2px 8px}
.btn{background:none;border:1px solid var(--line);border-radius:6px;color:var(--fg);cursor:pointer;padding:6px 10px}
.chk{align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:6px;display:flex;gap:6px;padding:6px 8px}
.controls{background:#242424;border-top:1px solid var(--line);display:none;gap:8px;margin-top:auto;padding:12px}
.controls.visible{display:grid}
.ctrlrow{align-items:center;display:flex;flex-wrap:wrap;gap:10px}
.datebig{font-size:1.2rem;font-weight:800}
.fb-left{display:flex;flex-wrap:wrap;gap:8px}
.fcol{display:grid;gap:6px;grid-template-columns:1fr}
.filterBar{align-items:center;background:#2a2a2a;border-bottom:1px solid var(--line);border-top:1px solid var(--line);display:none;gap:10px;padding:8px}
.filterBar.visible{display:flex}
.focus{grid-column:1;grid-row:1/-1}
.grid-quad{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.grid-single{grid-template-columns:3fr 1fr;grid-template-rows:repeat(3,1fr)}
.headline{align-items:baseline;display:flex;flex-wrap:wrap;gap:10px}
.info{flex:1;min-width:0}
.item{align-items:center;border-bottom:1px solid var(--line);cursor:pointer;display:flex;gap:10px;padding:10px 12px}
.item img{background:#000;border-radius:6px;height:72px;object-fit:cover;width:96px}
.item.active{background:#2a1a1a;outline:2px solid var(--primary)}
.item:hover{background:var(--bg2)}
.list{display:none;flex:1;overflow:auto}
.list.visible{display:block}
.locbig{color:#ddd;font-size:1rem;font-weight:700}
.main{background:#000;display:flex;flex:1;flex-direction:column;min-height:0;position:relative}
.marker{border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 6px rgba(0,0,0,.25);cursor:pointer;height:20px;position:absolute;width:20px}
.marker.active{background:var(--primary);box-shadow:0 0 0 8px rgba(232,33,39,.25);z-index:10}
.marker.recent{background:var(--accent2)}
.marker.saved{background:var(--warn)}
.marker.sentry{background:var(--accent)}
.marker:focus{outline:2px solid #fff}
.no-data{color:#888;padding:24px;text-align:center}
.range{width:100%}
.row{display:grid;gap:8px;grid-template-columns:1fr}
.row3{display:grid;gap:12px;grid-template-columns:1fr 1fr 1fr}
.rowLoc{align-items:end;display:grid;gap:8px;grid-template-columns:1fr auto}
.scrubMark{background:#777;border-radius:1px;height:12px;opacity:.9;position:absolute;top:-2px;width:2px}
.scrubMarks{display:block;height:8px;left:0;pointer-events:none;position:absolute;right:0}
.scrubWrap{align-items:center;display:flex;flex:1;height:20px;position:relative}
.scrubber{appearance:none;background:var(--bg2);border-radius:4px;flex:1;height:8px;outline:none;-webkit-appearance:none}
.scrubber::-webkit-slider-thumb{background:var(--primary);border-radius:50%;height:16px;width:16px;-webkit-appearance:none}
.select,select{background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--fg);padding:10px;width:100%}
.settings{background:#242424;border-top:1px solid var(--line);display:none;gap:14px;padding:12px}
.settings.visible{display:grid}
.side{grid-column:2}
.sidebar{background:var(--bg1);border-right:1px solid var(--line);display:flex;flex-direction:column;position:relative;width:360px;z-index:30}
.sidebar header{border-bottom:1px solid var(--line);display:flex;gap:8px;justify-content:space-between;padding:12px}
.sortToggle{align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--fg);cursor:pointer;display:inline-flex;height:36px;justify-content:center;margin-left:auto;width:40px}
.sub{color:#cfcfcf;font-size:.9rem;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.time{align-items:center;display:flex;gap:8px}
.timebig{background:#303030;border-radius:6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;padding:2px 8px}
.tlabel{color:#d0d0d0;font-variant-numeric:tabular-nums;min-width:84px}
.topline{display:flex;font-size:.95rem;font-weight:600;gap:12px;justify-content:space-between}
.vlab{background:rgba(0,0,0,.55);border-radius:6px;color:#fff;font-size:.9rem;left:8px;padding:4px 8px;position:absolute;top:8px}
.vwrap{align-items:center;background:#111;display:flex;height:100%;justify-content:center;position:relative;width:100%}
.vwrap video{height:100%;object-fit:contain;width:100%}
@media (max-width: 900px){
body,html{overflow:auto}
#grid.grid-quad{grid-template-columns:1fr;grid-template-rows:auto}
#grid.grid-single{grid-template-columns:1fr;grid-template-rows:auto}
#menuBtn{display:block}
#thumbRow{display:flex;height:28vh}
.focus{grid-column:auto;grid-row:auto}
.main{overflow:auto}
.side{grid-column:auto}
.sidebar{height:100%;left:-100%;max-width:420px;position:absolute;top:0;transition:left .25s ease;width:86%}
.sidebar.open{left:0}
.vwrap.focus{aspect-ratio:auto;height:60vh}}