:root { --ink:#162c35; --coral:#ef4b3f; --cream:#fffdf8; --line:#d8dfd9; --mint:#49a878; --yellow:#f2bf35; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--ink); font-family:Manrope,Arial,sans-serif; } button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.map-app { height:100dvh; min-height:520px; position:relative; overflow:hidden; } #incidentMap { position:absolute; inset:0; z-index:0; }
.topbar { position:absolute; z-index:2; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }.brand,.locate-button { pointer-events:auto; box-shadow:0 2px 11px #162c3544; }.brand { display:flex; align-items:center; gap:7px; padding:7px 11px 7px 7px; background:var(--cream); border-radius:5px; color:var(--ink); text-decoration:none; font-size:11px; line-height:11px; }.brand span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--coral); color:white; font-size:17px; font-weight:800; }.locate-button { border:0; border-radius:4px; background:var(--cream); color:var(--ink); padding:10px; font-size:12px; font-weight:800; }.emergency { position:absolute; z-index:2; top:66px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:5px; white-space:nowrap; padding:6px 10px; color:#fffdf8; background:#162c35e8; border-radius:20px; font-size:10px; }.emergency span { width:7px; height:7px; background:var(--coral); border-radius:50%; }
.map-panel { position:absolute; z-index:2; bottom:0; width:100%; padding:11px 16px 96px; background:linear-gradient(transparent 0%,#fffdf8 13%); }.panel-handle { width:34px; height:4px; margin:0 auto 11px; background:#bcc7bf; border-radius:4px; }.panel-title { display:flex; align-items:end; justify-content:space-between; }.panel-title small,.dialog-head small { color:var(--coral); font:500 10px "DM Mono",monospace; letter-spacing:.07em; }.panel-title h1 { margin:4px 0 0; font-size:18px; letter-spacing:-.04em; }.panel-title > strong { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; color:white; background:var(--ink); font:500 11px "DM Mono",monospace; }.filters { display:flex; overflow-x:auto; gap:7px; margin:13px -2px 11px; padding:2px; }.chip { flex:0 0 auto; border:1px solid var(--line); border-radius:18px; color:#53686a; background:#fffdf8; padding:8px 11px; font-size:11px; font-weight:700; }.chip.selected { color:white; border-color:var(--ink); background:var(--ink); }.chip.danger { color:#c94037; }.map-key { display:flex; gap:10px; color:#637473; font-size:9px; white-space:nowrap; }.dot { width:7px; height:7px; display:inline-block; margin-right:3px; border-radius:50%; }.dot.high { background:var(--coral); }.dot.road { background:var(--ink); }.dot.service { background:var(--mint); }.quick-actions { display:flex; gap:7px; margin-top:12px; overflow-x:auto; }.quick-actions button { flex:0 0 auto; border:1px solid #bed8c9; border-radius:3px; padding:8px; color:#276347; background:#e8f4ec; font-size:10px; font-weight:800; }.quick-actions button:last-child { color:#556769; border-color:var(--line); background:#fffdf8; }.quick-actions button:disabled { opacity:.45; }
.report-button { position:absolute; z-index:3; bottom:17px; left:16px; right:16px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:4px; padding:16px; color:white; background:var(--coral); box-shadow:4px 4px 0 var(--ink); font-size:14px; font-weight:800; }.report-button span { font-size:19px; line-height:10px; }
.map-marker { display:grid; place-items:center; width:31px; height:31px; color:white; border:3px solid var(--cream); border-radius:50% 50% 50% 4px; background:var(--ink); box-shadow:0 2px 6px #162c3588; font-weight:800; transform:rotate(-45deg); }.map-marker span { transform:rotate(45deg); }.map-marker.high { background:var(--coral); }.map-marker.medium { background:var(--yellow); color:var(--ink); }.map-marker.support { background:var(--mint); }.leaflet-popup-content { font:12px/1.5 Manrope,sans-serif; }.leaflet-popup-content b { color:var(--coral); font:500 10px "DM Mono",monospace; letter-spacing:.06em; }
.directions { display:flex; gap:5px; margin-top:9px; }.directions a { display:inline-block; padding:6px 8px; border-radius:2px; color:white; background:#2d74da; text-decoration:none; font-size:10px; font-weight:800; }.directions a:last-child { background:#35aa59; }
.leaflet-top.leaflet-right { top:52px; }.leaflet-control-zoom { box-shadow:0 2px 11px #162c3544!important; }.leaflet-control-zoom a { width:34px!important; height:34px!important; line-height:34px!important; color:var(--ink)!important; }
.report-photos { display:flex; gap:5px; margin-top:8px; }.report-photo { width:58px; height:44px; padding:0; overflow:hidden; border:0; border-radius:3px; background:#dbe2da; }.report-photo img { width:100%; height:100%; object-fit:cover; }.photo-dialog { max-width:min(700px,94vw); max-height:88dvh; padding:0; border:0; background:#172c35; }.photo-dialog::backdrop { background:#162c35dd; }.photo-dialog img { display:block; max-width:94vw; max-height:88dvh; object-fit:contain; }.photo-dialog button { position:absolute; top:8px; right:8px; display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:50%; color:white; background:#162c35cc; font-size:22px; }
.report-dialog { width:min(520px,calc(100% - 16px)); max-height:92dvh; position:fixed; inset:auto 0 0; margin:0 auto; border:0; border-radius:17px 17px 0 0; color:var(--ink); background:var(--cream); box-shadow:0 -8px 35px #162c3555; }.report-dialog::backdrop { background:#162c3566; }.report-dialog form { max-height:92dvh; overflow:auto; overscroll-behavior:contain; padding:22px 19px calc(28px + env(safe-area-inset-bottom)); }.dialog-head { display:flex; justify-content:space-between; align-items:start; }.dialog-head h2 { margin:5px 0 0; font-size:27px; letter-spacing:-.06em; }.dialog-head button { display:grid; place-items:center; min-width:42px; min-height:42px; margin:-9px -9px 0 0; border:0; border-radius:50%; background:none; color:#53666a; font-size:30px; line-height:1; }.safety { margin:16px 0; padding:10px; color:#765329; background:#fff0d7; font-size:11px; line-height:1.5; }.report-dialog fieldset { margin:0 0 18px; padding:0; border:0; }.report-dialog label,.report-dialog legend { display:block; margin:0 0 7px; font-size:12px; font-weight:800; }.type-options { display:flex; gap:7px; }.type-options label { flex:1; }.type-options input { position:absolute; opacity:0; }.type-options span { display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; padding:9px 4px; border:1px solid var(--line); color:#617271; font-size:18px; }.type-options b { font-size:10px; }.type-options input:checked + span { border:2px solid var(--coral); color:var(--coral); background:#fff6f3; }.report-dialog select,.report-dialog textarea { width:100%; margin:0 0 13px; padding:11px; border:1px solid #cbd5cc; border-radius:3px; background:white; color:var(--ink); font-size:13px; }.report-dialog label small { color:#7a8884; font-weight:500; }.point-button { border:0; padding:9px; color:#277750; background:#e2f2e8; font-size:11px; font-weight:800; }.point-status { margin:5px 0 13px; color:#74827f; font-size:10px; }.photo { display:flex!important; align-items:center; gap:7px; padding:11px; border:1px dashed #a8b8ae; color:#4e6861; }.photo small { margin-left:auto; }.photo input { display:none; }.submit { display:flex; justify-content:space-between; width:100%; margin-top:17px; border:0; padding:14px; color:white; background:var(--coral); font-size:14px; font-weight:800; }.submit span { font-size:20px; line-height:12px; }.toast { position:fixed; z-index:5; bottom:90px; left:50%; transform:translate(-50%,140px); display:flex; gap:9px; align-items:center; width:min(330px,calc(100% - 32px)); padding:12px; color:#effff5; background:#256147; box-shadow:0 6px 20px #162c3566; transition:transform .3s; }.toast.show { transform:translate(-50%,0); }.toast b { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:#215239; background:#80d7a2; }.toast span { display:flex; flex-direction:column; }.toast strong { font-size:12px; }.toast small { color:#c0e4cd; font-size:10px; }
@media (max-width:700px) { .report-dialog { width:100vw; max-width:none; height:100dvh; max-height:none; inset:0; margin:0; border-radius:0; }.report-dialog form { height:100dvh; max-height:none; padding:20px 20px calc(32px + env(safe-area-inset-bottom)); }.dialog-head { position:sticky; z-index:2; top:-20px; margin:-20px -20px 16px; padding:20px 20px 12px; background:var(--cream); border-bottom:1px solid #e9ede5; }.dialog-head button { min-width:52px; min-height:52px; margin:-8px -10px 0 0; color:var(--ink); background:#edf1e9; font-size:34px; }.submit { position:sticky; bottom:0; margin-bottom:0; box-shadow:0 -10px 18px var(--cream); } }
@media (min-width:700px) { .map-app { max-width:560px; margin:auto; box-shadow:0 0 60px #0008; }.topbar { top:20px; }.map-panel { padding-bottom:100px; }.report-button { max-width:528px; left:16px; } }