:root { color-scheme: light; --navy:#18334a; --muted:#4e6e87; --line:#d4dadd; --pale:#f4f8fa; --yellow:#fecc5c; --orange:#ff7f24; --red:#e31a1c; font-family: Inter, Roboto, Arial, sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--navy); background:var(--pale); } button, input { font:inherit; } button { cursor:pointer; }
.topbar { height:64px; display:flex; align-items:center; gap:28px; padding:0 32px; background:#fff; box-shadow:0 2px 12px #18334a20; position:relative; z-index:3; }
.brand { color:var(--navy); font-size:20px; font-weight:700; text-decoration:none; white-space:nowrap; }.brand-mark { color:var(--red); font-size:26px; vertical-align:-2px; margin-right:8px; }.topbar nav { display:flex; align-items:center; gap:28px; margin-left:auto; }.topbar a, .topbar nav button { color:var(--navy); text-decoration:none; background:none; border:0; padding:0; }.support { padding:10px 16px; border:0; background:var(--navy); color:#fff !important; border-radius:8px; }
.map-page { min-height:calc(100vh - 64px); position:relative; overflow:hidden; background:#e9eff1; }.leaflet-map { position:absolute; inset:0; z-index:0; }.leaflet-container { font:inherit; }.leaflet-popup-content { color:var(--navy); line-height:1.45; }.leaflet-control-attribution { font-size:10px !important; }
.filters, .statistics, .chart { position:absolute; z-index:1; background:#fff; box-shadow:0 4px 18px #18334a2b; border-radius:8px; }.filters { left:20px; top:20px; width:376px; padding:20px; max-height:calc(100vh - 104px); overflow:auto; }.filters section { border-top:1px solid var(--line); margin-top:20px; padding-top:16px; }.filters-heading { display:flex; justify-content:space-between; gap:10px; }.filters h1 { font-size:24px; margin:3px 0 0; }.eyebrow { margin:0 0 10px; color:var(--muted); font-size:14px; font-weight:600; }.icon-button { width:32px; height:32px; border:0; border-radius:50%; color:var(--navy); background:var(--pale); font-size:22px; line-height:1; }
.advanced-filter { position:absolute; z-index:2; top:20px; left:20px; width:min(400px, calc(100% - 40px)); max-height:calc(100vh - 104px); overflow:auto; padding:20px; border-radius:8px; background:#fff; box-shadow:0 4px 18px #18334a2b; }.advanced-filter h2 { margin:3px 0 0; font-size:22px; }.advanced-search { width:100%; margin:20px 0 12px; padding:11px; border:0; border-radius:5px; color:var(--navy); background:var(--pale); }.advanced-options { display:grid; gap:4px; }.advanced-options label { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--pale); }.advanced-options input { accent-color:var(--navy); }.apply-advanced { width:100%; margin-top:16px; padding:11px; border:0; border-radius:20px; color:#fff; background:var(--navy); }.tags button.active { color:#fff; background:var(--navy); }
.date-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0; }.date-fields label { color:var(--muted); font-size:12px; }.date-fields input { display:block; width:100%; margin-top:5px; padding:9px; border:1px solid var(--line); border-radius:5px; color:var(--navy); background:var(--pale); }
.participant-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }.participant-list button { min-height:60px; padding:7px 4px; color:var(--navy); border:0; border-radius:8px; background:var(--pale); font-size:12px; }.participant-list button.active { color:#fff; background:var(--navy); }.severity-list { display:grid; gap:9px; }.severity-list label { display:flex; align-items:center; gap:8px; font-size:15px; }.severity-list input { accent-color:var(--navy); }.dot { width:11px; height:11px; border-radius:50%; display:inline-block; }.light { background:var(--yellow); }.serious { background:var(--orange); }.fatal { background:var(--red); }.tags { display:flex; flex-wrap:wrap; gap:7px; }.tags button { border:0; border-radius:4px; padding:7px 9px; background:var(--pale); color:var(--navy); font-size:13px; }.filter-status { margin:16px 0 0; color:var(--muted); font-size:12px; }
.show-filters { position:absolute; left:20px; top:20px; z-index:2; border:0; border-radius:18px; padding:10px 16px; color:#fff; background:var(--navy); box-shadow:0 4px 12px #18334a55; }.leaflet-control-zoom { border:0 !important; box-shadow:0 3px 10px #18334a30 !important; }.leaflet-control-zoom a { width:40px !important; height:40px !important; border:0 !important; color:var(--navy) !important; line-height:38px !important; }
.mobile-menu-button { display:none; border:0; background:none; color:var(--navy); font-size:23px; }.mobile-menu { border:0; width:min(330px, 88vw); min-height:100svh; margin:0 0 0 auto; padding:28px; color:var(--navy); box-shadow:-8px 0 24px #18334a33; }.mobile-menu::backdrop { background:#18334a66; }.mobile-menu .icon-button { float:right; }.mobile-menu a { display:block; padding:16px 0; border-bottom:1px solid var(--line); color:var(--navy); font-size:20px; font-weight:600; text-decoration:none; }
.statistics { left:420px; top:20px; display:flex; align-items:stretch; min-width:600px; padding:12px 16px; gap:28px; }.statistics > div { display:grid; align-content:center; gap:4px; }.statistics span { color:var(--muted); font-size:13px; }.statistics strong { font-size:22px; }.statistics .place { min-width:150px; }.statistics .place strong { font-size:18px; }.yellow { color:#c58b09; }.red { color:var(--red); }.statistics button { margin-left:auto; border:0; border-radius:18px; padding:8px 12px; color:var(--navy); background:var(--pale); }
.chart { left:50%; top:96px; width:min(720px, calc(100% - 40px)); transform:translateX(-50%); padding:20px; }.chart-heading { display:flex; justify-content:space-between; gap:10px; }.chart h2 { margin:0; font-size:21px; }.chart p { margin:5px 0 0; color:var(--muted); font-size:14px; }.chart-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }.chart-tabs button { border:0; border-radius:16px; padding:7px 12px; color:var(--navy); background:var(--pale); }.chart-tabs button.active { color:#fff; background:var(--navy); }.bars { height:260px; margin-top:16px; padding:20px 12px 0; display:flex; align-items:end; justify-content:space-around; gap:6px; border-radius:8px; background:var(--pale); overflow:hidden; }.bar { display:grid; grid-template-rows:1fr auto; align-items:end; height:100%; min-width:24px; flex:1; max-width:58px; text-align:center; color:var(--muted); font-size:10px; }.bar i { display:block; width:100%; min-height:3px; border-radius:4px 4px 0 0; background:var(--yellow); }.bar label { overflow:hidden; max-width:100%; padding-top:6px; text-overflow:ellipsis; white-space:nowrap; }.chart-note { margin-top:12px !important; }
@media (max-width:800px) { .topbar { padding:0 16px; gap:12px; }.topbar nav { gap:14px; margin-left:auto; }.topbar nav a { display:none; }.support { display:none; }.mobile-menu-button { display:block; }.map-page { min-height:calc(100svh - 64px); }.filters { inset:12px 12px auto; width:auto; max-height:calc(100svh - 88px); }.statistics { left:12px; right:12px; top:auto; bottom:12px; min-width:0; padding:10px 12px; gap:13px; }.statistics .place { display:none; }.statistics strong { font-size:17px; }.statistics span { font-size:11px; }.statistics button { padding:7px; font-size:12px; }.chart { top:12px; width:calc(100% - 24px); }.participant-list { grid-template-columns:repeat(2,1fr); } }