:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0d1117; color: #f1f5f4; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 370px 1fr; }
.sidebar { z-index: 2; padding: 32px 28px 20px; background: #0d1117; border-right: 1px solid #28313b; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; justify-content: center; min-height: 48px; }
.brand img { display: block; width: min(100%, 260px); height: auto; }
.heading { margin: 50px 0 31px; }
.eyebrow { margin: 0 0 8px; color: #8a9a9c; font-size: 10px; letter-spacing: .14em; font-weight: 700; }
h1 { margin: 0; font-size: 29px; line-height: 1.08; letter-spacing: -.045em; }
.heading > p:last-child { max-width: 280px; margin: 12px 0 0; color: #a9b5b5; font-size: 13px; line-height: 1.6; }
form { display: grid; gap: 17px; }
.coordinate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.coordinate-grid label:last-child { grid-column: span 2; }
label { display: grid; gap: 7px; color: #c3cecd; font-size: 11px; letter-spacing: .05em; font-weight: 700; text-transform: uppercase; }
label span { color: #667574; font-weight: 500; }
input, textarea { width: 100%; min-height: 43px; border: 1px solid #2e3a43; border-radius: 7px; padding: 0 12px; outline: none; background: #151c24; color: #f3f7f2; font: 500 14px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }
textarea { min-height: 220px; padding: 12px; resize: vertical; font-size: 11px; }
input::placeholder { color: #687477; font-family: Inter, sans-serif; font-size: 12px; }
input:focus, textarea:focus { border-color: #e13a4b; box-shadow: 0 0 0 3px #e13a4b2b; }
button { cursor: pointer; border: 0; border-radius: 7px; padding: 13px 15px; background: #c92337; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .035em; transition: transform .15s, background .15s; }
button:hover { background: #e1364a; transform: translateY(-1px); }
button span { float: right; font-size: 18px; line-height: 11px; }
.form-error { min-height: 0; margin: -6px 0 -5px; color: #ff9292; font-size: 12px; }
.result-card { margin-top: 29px; padding: 18px; border: 1px solid #293640; border-radius: 8px; background: #121920; }
.result-card strong { display: block; margin-bottom: 8px; font-size: 14px; }
.result-person { display: grid; grid-template-columns: 9px 1fr; gap: 10px; align-items: start; padding: 11px 0; border-top: 1px solid #253139; }
.result-person > span { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; }
.result-person strong { margin-bottom: 4px; }
.victim-result > span { background: #42a5ff; box-shadow: 0 0 9px #42a5ff; }
.killer-result > span { background: #ff515c; box-shadow: 0 0 9px #ff515c; }
.log-metadata { margin-top: 8px; color: #7f908e; }
code { display: block; color: #aab8b6; font-size: 11px; overflow-wrap: anywhere; }
.secondary-button { width: 100%; margin-top: 15px; padding: 10px; border: 1px solid #3a4851; background: transparent; color: #c8d2d0; }
.secondary-button:hover { border-color: #e13a4b; color: #ff9da7; background: #2b1d21; }
.sidebar-footer { margin-top: auto; padding-top: 24px; color: #80908e; font-size: 11px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #e13a4b; box-shadow: 0 0 10px #e13a4b; }
.map-area { position: relative; min-height: 550px; overflow: hidden; background: #202b2b; }
#map { position: absolute; inset: 0; background: #202b2b; }
.map-label, .map-help { position: absolute; z-index: 500; background: #111820e8; border: 1px solid #36434a; color: #d5dfde; border-radius: 5px; font-size: 10px; letter-spacing: .1em; font-weight: 700; }
.map-label { top: 18px; left: 19px; padding: 10px 12px; }
.map-help { bottom: 18px; left: 19px; padding: 9px 11px; color: #aab7b4; font-size: 10px; letter-spacing: 0; font-weight: 500; }
.location-pin { width: 28px; height: 28px; display: grid; place-items: center; border: 3px solid #2b1014; border-radius: 50% 50% 50% 0; background: #e13a4b; color: #fff; font-weight: 900; transform: rotate(-45deg); box-shadow: 0 2px 12px #0008; }
.location-pin span { transform: rotate(45deg); }
.person-marker { position: relative; width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 12px #000b; }
.person-marker::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.person-marker.victim { background: #168fff; }
.person-marker.killer { background: #ff3444; }
.person-label { border: 0; border-radius: 4px; padding: 5px 8px; color: #fff; font: 800 11px/1.2 Inter, sans-serif; box-shadow: 0 2px 10px #0009; white-space: nowrap; }
.person-label::before { display: none; }
.person-label.victim { background: #0879d8; }
.person-label.killer { background: #d92535; }
.fixed-blip-icon { background: transparent; border: 0; }
.fixed-blip-icon svg { width: 24px; height: 29px; filter: drop-shadow(0 2px 4px #000b); }
.fixed-blip-label { border: 0; border-radius: 4px; padding: 5px 8px; background: #f8fafc; color: #101820; font: 800 11px/1.2 Inter, sans-serif; box-shadow: 0 2px 10px #0009; }
.fixed-blip-label::before { display: none; }
.leaflet-popup-content-wrapper { border-radius: 6px; background: #111820; color: #eef5ef; box-shadow: 0 6px 22px #0008; }
.leaflet-popup-tip { background: #111820; }
.leaflet-popup-content { margin: 12px 15px; font-family: Inter, sans-serif; }
.popup-title { margin: 0 0 5px; font-size: 13px; font-weight: 800; }.popup-coords { margin: 0; color: #adbcb8; font: 11px ui-monospace, monospace; }
.leaflet-control-zoom a { background: #111820; color: #eaf5ec; border-color: #37444d; }.leaflet-control-zoom a:hover { background: #202b33; color: #ff6675; }
@media (max-width: 750px) { .app-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(480px, 60vh); }.sidebar { border-right: 0; border-bottom: 1px solid #28313b; padding: 24px 20px; }.heading { margin: 32px 0 24px; }.sidebar-footer { display: none; }.result-card { margin-top: 22px; }.map-area { min-height: 60vh; } }