:root { color-scheme: dark; --bg:#07110f; --panel:#0d1a17; --line:#20332e; --muted:#829a93; --text:#e9f2ef; --accent:#70f0b0; --amber:#ffba62; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body { background:var(--bg); color:var(--text); font:14px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; overflow:hidden; }
header { height:76px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(7,17,15,.96); }
h1 { margin:2px 0 0; font-size:22px; letter-spacing:-.02em; }
.eyebrow { margin:0; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.16em; }
.source-state { display:flex; gap:10px; align-items:center; color:#b8cac5; font-size:12px; }
.pulse { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(112,240,176,.12); }
.source-state.error .pulse { background:#ff6b6b; box-shadow:0 0 0 5px rgba(255,107,107,.12); }
main { height:calc(100% - 76px); display:grid; grid-template-columns:240px minmax(360px,1fr) 320px; }
.filters,.details { background:var(--panel); padding:22px; overflow:auto; }
.filters { border-right:1px solid var(--line); }
.details { border-left:1px solid var(--line); }
section { margin-bottom:24px; }
label { display:block; margin-bottom:9px; color:#b8cac5; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.segmented { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
button,select { color:var(--text); background:#12231f; border:0; font:inherit; }
.segmented button { padding:9px 4px; cursor:pointer; border-right:1px solid var(--line); }
.segmented button:last-child { border:0; }
.segmented button.active { color:#06110e; background:var(--accent); font-weight:800; }
select { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; }
.toggle-row label { margin:0; }
small { display:block; color:var(--muted); }
input[type=checkbox] { width:36px; height:20px; accent-color:var(--accent); }
.summary { padding:16px; border:1px solid var(--line); border-radius:10px; background:#0a1512; }
.summary strong { display:block; color:var(--accent); font-size:30px; }
.summary span { display:block; margin-bottom:9px; }
.notice { color:var(--muted); font-size:11px; }
.map-shell { position:relative; margin:0; }
#map { position:absolute; inset:0; background:#0a1512; }
.maplibregl-canvas { filter:saturate(.35) brightness(.62) hue-rotate(105deg); }
.maplibregl-ctrl-attrib { background:rgba(7,17,15,.8)!important; color:var(--muted)!important; }
.maplibregl-ctrl-attrib a { color:#b8cac5!important; }
.maplibregl-ctrl-group { overflow:hidden; border:1px solid var(--line); background:#12231f!important; }
.maplibregl-ctrl-group button { background-color:#12231f; }
.maplibregl-ctrl-group button+button { border-top-color:var(--line); }
.maplibregl-ctrl-group .maplibregl-ctrl-icon { filter:invert(1) opacity(.8); }
.maplibregl-marker { z-index:2; }
.spider-overlay { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; overflow:visible; }
.spider-leg { stroke:rgba(184,202,197,.68); stroke-width:1.4; }
.spider-leg.selected { stroke:#72d9ff; stroke-width:2; }
.spider-overlay marker path { fill:#b8cac5; }
.spider-overlay marker#spider-arrow-selected path { fill:#72d9ff; }
.spider-anchor { fill:#70f0b0; stroke:#07110f; stroke-width:1.5; }
.incident-marker { width:58px; height:58px; background:transparent; border:0; cursor:pointer; }
.marker-visual { position:absolute; inset:0; transform:scale(var(--marker-scale,.82)); transform-origin:50% 100%; transition:transform .055s linear; filter:drop-shadow(0 5px 5px rgba(0,0,0,.72)); }
.incident-marker .incident-art { position:absolute; left:1.5px; bottom:0; width:55px; height:55px; object-fit:contain; }
.incident-marker .incident-age { position:absolute; z-index:2; right:-2px; bottom:-2px; width:22px; height:22px; display:grid; place-items:center; border:2px solid #72d9ff; border-radius:50%; color:#72d9ff; background:#10263a; font-size:8px; font-weight:900; line-height:1; letter-spacing:-.03em; white-space:nowrap; box-shadow:0 2px 5px rgba(0,0,0,.6); }
.incident-marker.stale .incident-art { opacity:.58; filter:saturate(.7); }
.incident-marker.stale .incident-age { opacity:.9; }
.incident-cluster { width:64px; height:64px; background:transparent; border:0; cursor:pointer; }
.cluster-card { position:relative; width:64px; height:58px; color:#f5fff9; filter:drop-shadow(0 5px 6px rgba(0,0,0,.72)); }
.cluster-art { position:absolute; width:43px; height:43px; object-fit:contain; }
.cluster-card.arts-1 .cluster-art{left:10px;top:6px}.cluster-card.arts-2 .cluster-art:nth-child(1){left:0;top:11px;transform:rotate(-8deg);opacity:.82}.cluster-card.arts-2 .cluster-art:nth-child(2){left:20px;top:6px;transform:rotate(8deg)}.cluster-card.arts-3 .cluster-art:nth-child(1){left:-2px;top:12px;transform:rotate(-10deg);opacity:.72}.cluster-card.arts-3 .cluster-art:nth-child(2){left:10px;top:5px;transform:rotate(3deg);opacity:.86}.cluster-card.arts-3 .cluster-art:nth-child(3){left:22px;top:11px;transform:rotate(11deg)}
.cluster-count { position:absolute; right:3px; top:3px; min-width:25px; height:25px; padding:0 6px; display:grid; place-items:center; border:2px solid #ffd38a; border-radius:13px; color:#fff4dc; background:#6b410d; font-size:11px; font-weight:900; }
.refresh,.map-mode { position:absolute; z-index:500; top:14px; height:40px; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.refresh { right:14px; width:40px; font-size:22px; }
.map-mode { right:62px; min-width:46px; padding:0 11px; color:#c8d8d3; font-size:11px; font-weight:900; letter-spacing:.08em; }
.map-mode.active { color:#06110e; border-color:var(--accent); background:var(--accent); }
.legend { position:absolute; z-index:500; left:14px; bottom:20px; display:flex; gap:14px; padding:8px 11px; border:1px solid var(--line); border-radius:7px; background:rgba(7,17,15,.9); font-size:11px; }
.legend i { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:var(--accent); }
.legend i.older { opacity:.45; }
.empty-state { margin-top:25vh; text-align:center; color:var(--muted); }
.empty-state h2 { color:var(--text); font-size:17px; }
.target { color:var(--accent); font-size:32px; }
.details h2 { margin:6px 0; font-size:22px; }
.badge { display:inline-block; padding:4px 8px; margin:0 4px 8px 0; border:1px solid var(--line); border-radius:99px; color:#bfd0cb; font-size:11px; text-transform:capitalize; }
.detail-time { color:var(--accent); font-weight:700; }
.detail-grid { display:grid; gap:12px; margin-top:22px; }
.detail-grid div { padding-bottom:12px; border-bottom:1px solid var(--line); }
.detail-grid span { display:block; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.technical { margin-top:20px; padding:12px; border-radius:8px; background:#07110f; color:#a8bbb5; font:11px/1.6 ui-monospace, monospace; overflow-wrap:anywhere; }
@media (max-width:900px) { main { grid-template-columns:210px 1fr; } .details { position:absolute; right:0; top:76px; bottom:0; width:300px; z-index:600; box-shadow:-12px 0 30px rgba(0,0,0,.35); } }
@media (max-width:680px) { header { height:64px; padding:0 14px; } main { height:calc(100% - 64px); grid-template-columns:1fr; } .filters { position:absolute; z-index:700; left:10px; top:74px; width:180px; max-height:calc(100% - 95px); border:1px solid var(--line); border-radius:10px; } .details { display:none; } }