:root {
    color-scheme: dark;
    --bg: #07100e;
    --surface: #0d1816;
    --surface-2: #13211e;
    --surface-3: #192a26;
    --line: #243b35;
    --line-soft: rgba(183, 220, 207, .12);
    --text: #eef7f3;
    --muted: #91aaa1;
    --green: #41d698;
    --green-dark: #0d5f43;
    --yellow: #f3c754;
    --red: #ff4d5f;
    --red-dark: #7b1825;
    --blue: #75bdf8;
    --shadow: 0 20px 60px rgba(0, 0, 0, .32);
    --radius: 18px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.muted { color: var(--muted); }
.danger { color: var(--red); }
.success { color: var(--green); }
.warning { color: var(--yellow); }

.app-loading { min-height: 100dvh; display: grid; place-items: center; }
.splash { display: grid; justify-items: center; gap: 8px; letter-spacing: .18em; }
.splash strong { font-size: 1.4rem; }
.splash span { color: var(--muted); font-size: .75rem; letter-spacing: .04em; }
.splash img { animation: breathe 1.8s ease-in-out infinite; }

.login-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(320px, 470px) 1fr;
    background:
        radial-gradient(circle at 70% 40%, rgba(44, 90, 79, .22), transparent 35%),
        linear-gradient(135deg, #07100e, #0b1513);
}
.login-panel { display: flex; flex-direction: column; padding: clamp(28px, 5vw, 70px); background: rgba(7, 16, 14, .82); z-index: 1; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .13em; }
.brand img { width: 42px; height: 42px; }
.login-card { margin: auto 0; }
.eyebrow { color: var(--green); text-transform: uppercase; font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.login-card h1 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.045em; line-height: .98; margin: 14px 0 18px; }
.login-card > p { color: var(--muted); line-height: 1.6; max-width: 37ch; }
.login-art { position: relative; display: grid; place-items: center; overflow: hidden; }
.radar-visual { width: min(62vw, 720px); aspect-ratio: 1; border-radius: 50%; position: relative; border: 1px solid var(--line); background: repeating-radial-gradient(circle, transparent 0 68px, rgba(95, 177, 150, .10) 69px 70px), linear-gradient(rgba(65,214,152,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(65,214,152,.08) 1px, transparent 1px); background-size: auto, 42px 42px, 42px 42px; }
.radar-visual::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 76%, rgba(65,214,152,.34) 93%, transparent); animation: sweep 5s linear infinite; }
.radar-visual::before { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%; top: 30%; left: 62%; background: var(--red); box-shadow: 0 0 0 10px rgba(255,77,95,.12), 0 0 35px var(--red); z-index: 1; }
.visual-caption { position: absolute; bottom: 8%; left: 8%; padding: 18px 22px; background: rgba(13, 24, 22, .86); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(12px); }
.visual-caption strong { display: block; margin-bottom: 5px; }
.visual-caption span { color: var(--muted); font-size: .85rem; }

.form { display: grid; gap: 16px; margin-top: 30px; }
.field { display: grid; gap: 7px; }
.field > span, .field > label { color: #bfd0ca; font-size: .78rem; font-weight: 750; letter-spacing: .035em; }
.input, .select, .textarea {
    width: 100%; border: 1px solid var(--line); color: var(--text); background: var(--surface);
    border-radius: 12px; padding: 13px 14px; outline: none; transition: border-color .18s, box-shadow .18s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(65,214,152,.12); }
.textarea { min-height: 90px; resize: vertical; }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.button {
    border: 1px solid transparent; border-radius: 12px; padding: 12px 16px; color: var(--text);
    background: var(--surface-3); font-weight: 760; transition: transform .15s, filter .15s, background .15s;
}
.button:hover { filter: brightness(1.12); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button:focus-visible, .nav-button:focus-visible, .close-button:focus-visible, .map-style-button:focus-visible, .responder-card:focus-visible {
    outline: 3px solid rgba(65,214,152,.45);
    outline-offset: 2px;
}
.button.primary { color: #06100d; background: var(--green); }
.button.danger-button { background: var(--red-dark); border-color: rgba(255,77,95,.4); }
.button.ghost { background: transparent; border-color: var(--line); }
.button.small { padding: 8px 11px; font-size: .78rem; border-radius: 9px; }
.button.full { width: 100%; }
.form-error { color: #ff9da7; background: rgba(123,24,37,.28); border: 1px solid rgba(255,77,95,.25); padding: 10px 12px; border-radius: 10px; font-size: .84rem; }
.security-note { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .74rem; margin-top: 22px; }
.field-disabled { opacity: .48; }
.transport-mode-check { padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ui-icon { display: block; width: 1em; height: 1em; flex: none; overflow: visible; color: inherit; fill: none; stroke: currentColor; }

.shell { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: 100dvh; }
.sidebar { border-right: 1px solid var(--line); background: #091311; padding: 22px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; z-index: 900; }
.sidebar .brand { padding: 0 9px 22px; }
.nav { display: grid; gap: 5px; }
.nav-button { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; text-align: left; font-weight: 690; }
.nav-button:hover, .nav-button.active { color: var(--text); background: var(--surface-2); }
.nav-button.active { box-shadow: inset 3px 0 var(--green); }
.nav-icon { width: 22px; display: grid; place-items: center; flex: none; }
.nav-icon .ui-icon { width: 20px; height: 20px; }
.nav-button { position: relative; }
.nav-emergencies .nav-icon { color: #ff6476; }
.nav-callouts .nav-icon { color: #74c9ff; }
.nav-emergency-count { margin-left: auto; min-width: 22px; padding: 3px 6px; border-radius: 999px; color: #fff; background: #e11d3f; text-align: center; font-size: .64rem; line-height: 1.2; }
.nav-button.emergency-attention { color: #fff; background: rgba(190,18,60,.22); box-shadow: inset 3px 0 #ff334f,0 0 18px rgba(239,51,79,.12); animation: nav-emergency-pulse 1.05s infinite; }
.sidebar-user { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.sidebar>.emergency-callout-button { margin-top: clamp(42px,14vh,130px); }
.sidebar>.emergency-callout-button strong { font-size: .78rem; letter-spacing: .07em; }
.sidebar-user .user-copy { min-width: 0; flex: 1; }
.sidebar-user strong, .sidebar-user span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user span { color: var(--muted); font-size: .72rem; margin-top: 2px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-3); display: grid; place-items: center; color: var(--green); font-weight: 800; flex: none; border: 2px solid var(--line); }
.main { min-width: 0; }
.topbar { min-height: 72px; display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 14px clamp(18px, 3vw, 34px); border-bottom: 1px solid var(--line); background: rgba(7,16,14,.9); position: sticky; top: 0; z-index: 850; backdrop-filter: blur(14px); }
.topbar h1 { font-size: 1.08rem; margin: 0; letter-spacing: -.02em; }
.topbar-meta { display: flex; align-items: center; gap: 9px; }
.monitor-controls-button { display: none; }
.live-pill, .mode-pill, .status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; font-weight: 760; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(65,214,152,.12); }
.mode-pill.drill { color: var(--yellow); border-color: rgba(243,199,84,.35); background: rgba(243,199,84,.07); }
.content { padding: clamp(18px, 3vw, 34px); }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); margin: 0 0 6px; letter-spacing: -.04em; }
.page-heading p { color: var(--muted); margin: 0; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px; }
.metric span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.metric strong { display: block; font-size: 1.65rem; margin-top: 8px; letter-spacing: -.04em; }
.metric.alert strong { color: var(--red); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 17px; border-bottom: 1px solid var(--line); }
.panel-header h3 { margin: 0; font-size: .95rem; }
.panel-body { padding: 17px; }

.monitor-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: calc(100dvh - 72px); }
.monitor-list { border-right: 1px solid var(--line); background: #0a1412; display: flex; flex-direction: column; min-height: 0; }
.monitor-toolbar { padding: 14px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.address-search-block { display: grid; gap: 8px; padding-bottom: 11px; border-bottom: 1px solid var(--line-soft); }
.address-search-form { display: grid; grid-template-columns: 1fr; gap: 7px; }
.address-search-form .button { white-space: nowrap; }
.google-place-search-host { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: #17211e; color-scheme: light; }
.google-place-search-host .address-search-notice { color: #725400; background: #fff7d7; border-color: #e7d995; }
.google-place-search-host gmp-place-search { display: block; width: 100%; max-height: 310px; overflow: auto; }
.address-search-status { color: var(--muted); font-size: .64rem; line-height: 1.4; }
.address-fallback-button { justify-self: start; padding: 6px 9px !important; font-size: .68rem !important; }
.address-search-results { max-height: 245px; overflow: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow); }
.address-search-notice { padding: 9px 10px; color: var(--yellow); background: rgba(243,199,84,.07); border-bottom: 1px solid rgba(243,199,84,.2); font-size: .67rem; line-height: 1.4; }
.address-search-result { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; padding: 10px; border: 0; border-bottom: 1px solid var(--line-soft); color: inherit; background: transparent; text-align: left; }
.address-search-result:hover, .address-search-result:focus-visible { background: var(--surface-2); }
.address-search-result strong, .address-search-result small { display: block; }
.address-search-result strong { font-size: .78rem; line-height: 1.3; }
.address-search-result small { margin-top: 3px; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.address-result-pin { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(74,168,255,.4); border-radius: 9px; color: #8cc8ff; background: rgba(74,168,255,.1); font-weight: 900; }
.address-search-credit, .address-search-empty { padding: 9px 10px; color: var(--muted); font-size: .63rem; line-height: 1.4; }
.monitor-filter-label { color: var(--muted); font-size: .64rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.monitor-toolbar .input, .monitor-toolbar .select { padding: 11px 9px; font-size: .74rem; }
#monitor-delegation { grid-column: 1 / -1; }
.responders { overflow: auto; padding: 8px; }
.responder-card { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 11px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit; text-align: left; }
.responder-card:hover, .responder-card.active { background: var(--surface-2); border-color: var(--line); }
.responder-card.sos { background: rgba(123,24,37,.20); border-color: rgba(255,77,95,.35); }
.responder-card strong { display: block; font-size: .86rem; }
.responder-card small { color: var(--muted); display: block; margin-top: 3px; }
.signal { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.03); }
.signal.online { background: var(--green); }
.signal.delayed { background: var(--yellow); }
.signal.offline { background: #73807c; }
.signal.sos { background: var(--red); animation: pulse 1s infinite; }
.map-wrap { position: relative; min-height: calc(100dvh - 72px); }
.google-basemap { position: absolute; inset: 0; z-index: 0; display: none; background: #0b1513; pointer-events: none; }
.google-basemap.active { display: block; }
#map { position: absolute; inset: 0; z-index: 1; background: #0b1513; }
.google-basemap-mode #map, .google-basemap-mode #responder-map, .google-leaflet-overlay { background: transparent !important; }
.google-basemap-mode .leaflet-control-attribution { display: none; }
.google-basemap-mode .map-legend { bottom: 32px; }
.map-legend { position: absolute; z-index: 700; left: 14px; bottom: 18px; display: flex; gap: 6px; flex-wrap: wrap; padding: 8px; background: rgba(9,19,17,.9); border: 1px solid var(--line); border-radius: 11px; backdrop-filter: blur(10px); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; color: #c2d0cb; padding: 3px 5px; }
.map-style-switch { position: absolute; z-index: 700; top: 14px; right: 14px; display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: rgba(9,19,17,.93); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.map-style-button { padding: 7px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 800 .69rem/1 inherit; cursor: pointer; }
.map-style-button.active { color: #04120d; background: var(--green); }
.draw-area-button { position: absolute; z-index: 700; top: 14px; left: 58px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.monitor-locate-button { position: absolute; z-index: 700; top: 14px; left: 205px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.map-labels-toggle-button { position: absolute; z-index: 700; top: 14px; left: 320px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
[data-map-labels-toggle][aria-pressed="false"] { border-color: rgba(243,199,84,.5); color: var(--yellow); background: rgba(9,19,17,.94); }
.map-context-hint { position: absolute; z-index: 700; top: 68px; right: 14px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(9,19,17,.9); color: #c2d0cb; font-size: .68rem; pointer-events: none; backdrop-filter: blur(10px); }
.area-drawing-active { cursor: crosshair !important; }
.area-drawing-toolbar {
    position: absolute; z-index: 900; left: 50%; bottom: 76px; width: min(560px, calc(100% - 28px)); display: flex;
    align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; transform: translateX(-50%);
    border: 1px solid rgba(139,92,246,.65); border-radius: 13px; background: rgba(8,14,13,.96); box-shadow: 0 12px 36px rgba(0,0,0,.46); backdrop-filter: blur(14px);
}
.area-drawing-toolbar strong, .area-drawing-toolbar span { display: block; }
.area-drawing-toolbar strong { color: #e9ddff; font-size: .82rem; }
.area-drawing-toolbar span { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.area-drawing-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.area-vertex-div-icon { background: transparent; border: 0; }
.area-vertex-handle { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #8b5cf6; box-shadow: 0 3px 11px rgba(0,0,0,.58),0 0 0 4px rgba(139,92,246,.2); font: 900 9px/1 system-ui,sans-serif; cursor: grab; touch-action: none; }
.area-vertex-handle.first { width: 26px; height: 26px; color: #241047; background: #c4b5fd; box-shadow: 0 3px 12px rgba(0,0,0,.62),0 0 0 5px rgba(139,92,246,.28); }
.leaflet-marker-dragging .area-vertex-handle { cursor: grabbing; transform: scale(1.14); }
.leaflet-container { font-family: inherit; }
.leaflet-control-zoom a { background: var(--surface) !important; color: var(--text) !important; border-color: var(--line) !important; }
.leaflet-control-attribution { background: rgba(7,16,14,.8) !important; color: var(--muted) !important; }
.leaflet-control-attribution a { color: var(--green) !important; }
.radar-marker { background: transparent; border: 0; }
.marker-avatar { position: relative; width: var(--radar-map-icon-size, 48px); height: var(--radar-map-icon-size, 48px); border-radius: 50%; background: #eef7f3; border: 4px solid #73807c; display: grid; place-items: center; overflow: hidden; color: #0d5f43; font-weight: 900; box-shadow: 0 5px 18px rgba(0,0,0,.5); }
.marker-avatar-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: #eef7f3; font-size: .78rem; letter-spacing: .02em; }
.marker-avatar img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 3px; object-fit: contain; background: radial-gradient(circle, #fff 0%, #dcebe6 100%); }
.marker-avatar.online { border-color: var(--green); }
.marker-avatar.delayed { border-color: var(--yellow); }
.marker-avatar.offline { border-color: #73807c; }
.marker-avatar.sos { border-color: var(--red); animation: marker-pulse 1s infinite; }
.operational-div-icon { overflow: visible !important; background: transparent; border: 0; }
.operational-marker { position: relative; width: var(--radar-map-icon-size, 48px); height: var(--radar-map-icon-size, 48px); display: grid; place-items: center; border: 3px solid #8da19a; border-radius: 13px 13px 13px 3px; background: #101c19; box-shadow: 0 6px 20px rgba(0,0,0,.52); transform: rotate(-45deg); }
.operational-marker.priority-low { border-color: #86a39a; }
.operational-marker.priority-normal { border-color: var(--green); }
.operational-marker.priority-high { border-color: var(--yellow); }
.operational-marker.priority-critical { border-color: var(--red); animation: marker-pulse 1.15s infinite; }
.operational-marker.drill { border-style: dashed; background: #2a2108; }
.operational-symbol { display: grid; place-items: center; width: calc(var(--radar-map-icon-size, 48px) * .81); height: calc(var(--radar-map-icon-size, 48px) * .81); color: #e8f3ef; transform: rotate(45deg); }
.operational-symbol .ui-icon { width: 62%; height: 62%; color: inherit; stroke: currentColor; stroke-width: 2.25; filter: drop-shadow(0 1px 1px rgba(0,0,0,.9)); }
.operational-marker.type-urgent .operational-symbol { color: #ff6b7d; }
.operational-marker.type-fire .operational-symbol,.operational-marker.type-roadblock .operational-symbol { color: #ffad52; }
.operational-marker.type-medical .operational-symbol,.operational-marker.type-hospital .operational-symbol { color: #82d8ff; }
.operational-marker.type-danger .operational-symbol { color: #ffd457; }
.operational-marker.type-flood .operational-symbol { color: #6ec8ff; }
.operational-marker.type-meeting .operational-symbol { color: #75e6b5; }
.operational-marker.type-resource .operational-symbol { color: #d9e6e2; }
.operational-marker.type-command .operational-symbol { color: #c9a7ff; }
.operational-popup-icon .ui-icon,.responder-marker-focus .ui-icon,.all-map-marker-icon .ui-icon { width: 1.15em; height: 1.15em; }
.map-area-popup-icon .ui-icon { color: var(--area-color); }
.monitor-location-icon { background: transparent; border: 0; }
.monitor-location-marker { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 3px solid #fff; border-radius: 50%; color: #04120d; background: #41d698; box-shadow: 0 5px 18px rgba(0,0,0,.55),0 0 0 7px rgba(65,214,152,.22); }
.monitor-location-marker:before,.monitor-location-marker:after { content: ''; position: absolute; inset: -8px; border: 2px solid rgba(65,214,152,.55); border-radius: 50%; animation: monitor-location-pulse 2s infinite; }
.monitor-location-marker:after { animation-delay: 1s; }
.monitor-location-marker i { position: absolute; top: 7px; width: 5px; height: 13px; border-radius: 4px; background: #04120d; }
.monitor-location-marker b { margin-top: 13px; font: 900 13px/1 system-ui,sans-serif; }
.map-action-menu { display: grid; min-width: 180px; gap: 7px; padding: 2px; }
.map-action-menu>strong { padding: 3px 5px 6px; color: #a9bbb5; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.map-action-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--surface-2); font-weight: 800; text-align: left; cursor: pointer; }
.map-action-menu button:hover { border-color: var(--green); background: rgba(65,214,152,.09); }
.map-action-menu button span { width: 22px; display: grid; place-items: center; }
.map-action-menu button span .ui-icon { width: 19px; height: 19px; }
.map-icon-size-control { position: absolute; z-index: 700; display: grid; gap: 5px; width: 168px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(9,19,17,.93); box-shadow: var(--shadow); color: var(--muted); backdrop-filter: blur(10px); }
.map-icon-size-control span { display: flex; justify-content: space-between; gap: 8px; font-size: .66rem; font-weight: 800; }
.map-icon-size-control output { color: var(--green); }
.map-icon-size-control input { width: 100%; accent-color: var(--green); cursor: pointer; }
.monitor-icon-size-control { right: 14px; bottom: 42px; }
#map.area-drawing-active ~ .monitor-icon-size-control,
#responder-map.area-drawing-active ~ .responder-icon-size-control { display: none; }
.responder-icon-size-control { right: 12px; bottom: 68px; }
.leaflet-tooltip.operational-label-tooltip { max-width: 190px; overflow: hidden; padding: 5px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; background: rgba(8,16,14,.94); color: #fff; font: 800 .7rem/1.15 inherit; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 3px 12px rgba(0,0,0,.4); }
.leaflet-tooltip-left.operational-label-tooltip::before { border-left-color: rgba(8,16,14,.94); }
.leaflet-tooltip-right.operational-label-tooltip::before { border-right-color: rgba(8,16,14,.94); }
.leaflet-tooltip.operational-area-label { max-width: 190px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(21,15,35,.9); color: #fff; font: 850 .7rem/1.15 inherit; box-shadow: 0 4px 14px rgba(0,0,0,.36); }
.leaflet-tooltip.operational-area-label::before { display: none; }
.operational-area.priority-critical { filter: drop-shadow(0 0 4px rgba(239,68,68,.8)); }
.address-search-div-icon { overflow: visible !important; background: transparent; border: 0; }
.address-search-map-pin { width: 44px; height: 44px; display: grid; place-items: center; border: 4px solid #d8ecff; border-radius: 50% 50% 50% 5px; color: #fff; background: #237fd3; box-shadow: 0 7px 24px rgba(0,0,0,.55), 0 0 0 5px rgba(74,168,255,.2); transform: rotate(-45deg); font-size: 1.15rem; font-weight: 900; }
.address-search-map-pin > span { transform: rotate(45deg); }
.operational-popup-title { align-items: flex-start; }
.operational-popup-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); font-size: 1.35rem; }
.map-area-popup-icon { color: var(--area-color); border-color: var(--area-color); background: color-mix(in srgb, var(--area-color) 18%, var(--surface-2)); }
.operational-description { margin: 0 0 12px; color: #d1dfda; line-height: 1.45; white-space: pre-wrap; }
.coordinate-preview { padding: 9px 11px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); background: #070d0c; font: .72rem/1.4 ui-monospace, monospace; }
.marker-audience-fieldset { margin: 0; padding: 0; border: 0; }
.marker-audience-help { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.marker-audience-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.marker-audience-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 54px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; }
.marker-audience-option:has(input:checked) { border-color: var(--green); background: rgba(65,214,152,.08); box-shadow: 0 0 0 2px rgba(65,214,152,.08); }
.marker-audience-option input { position: absolute; inset: 6px auto auto 6px; accent-color: var(--green); }
.marker-audience-option strong { min-width: 0; font-size: .69rem; line-height: 1.25; }
.marker-audience-logo, .marker-audience-icon { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface-2); }
.marker-audience-logo img { width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.marker-audience-icon { color: var(--green); font-size: 1.15rem; font-weight: 900; }
.audience-all { color: var(--green); font-size: .72rem; font-weight: 800; }
.audience-badges { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.audience-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 3px; border: 1px solid var(--line); border-radius: 999px; color: #cfddd8; background: var(--surface-2); font-size: .64rem; font-weight: 700; }
.audience-badge img { width: 20px; height: 20px; padding: 1px; border-radius: 50%; object-fit: contain; background: var(--surface); }
.marker-card-audience { margin-top: 7px; }
.map-area-card-swatch { color: var(--area-color); border-color: var(--area-color); background: color-mix(in srgb, var(--area-color) 17%, var(--surface-3)); }
.map-area-color-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.map-area-color-picker label { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.map-area-color-picker label:has(input:checked) { border-color: var(--area-color, var(--green)); background: rgba(255,255,255,.04); }
.map-area-color-picker input { position: absolute; opacity: 0; pointer-events: none; }
.map-area-color-picker span { width: 22px; height: 22px; flex: 0 0 auto; border: 3px solid rgba(255,255,255,.8); border-radius: 50%; background: var(--area-color); box-shadow: 0 0 0 2px var(--area-color); }
.map-area-color-picker b { font-size: .7rem; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(65,214,152,.2); }
.marker-cluster div { background: var(--green-dark); color: white; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.leaflet-popup-content { margin: 14px; min-width: 230px; }
.popup-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.popup-grid { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; font-size: .78rem; }
.popup-grid span:nth-child(odd) { color: var(--muted); }
.popup-actions { display: flex; gap: 8px; margin-top: 13px; }
.address-popup-title { align-items: flex-start; }
.address-popup-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(74,168,255,.4); border-radius: 11px; color: #8cc8ff; background: rgba(74,168,255,.1); font-weight: 900; }
.address-confirm-warning { margin: 10px 0 0; color: var(--yellow); font-size: .7rem; line-height: 1.4; }
.address-popup-actions { flex-wrap: wrap; }
.map-tile-warning { position: absolute; z-index: 700; top: 14px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 110px)); padding: 10px 14px; border: 1px solid rgba(247,184,67,.42); border-radius: 10px; background: rgba(28,21,6,.94); color: var(--yellow); text-align: center; font-size: .76rem; box-shadow: var(--shadow); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.table th { color: var(--muted); text-align: left; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.table td { padding: 13px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table-user { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.profile-logo { padding: 3px; object-fit: contain; background: var(--surface-2); }
.profile-logo-fieldset { margin: 0; padding: 0; border: 0; }
.profile-logo-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; }
.profile-logo-option { position: relative; display: grid; justify-items: center; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.profile-logo-option:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 3px rgba(65,214,152,.1); }
.profile-logo-option input { position: absolute; inset: 8px auto auto 8px; accent-color: var(--green); }
.profile-logo-preview { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface-2); }
.profile-logo-preview img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.profile-logo-option strong { font-size: .72rem; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: var(--surface-3); color: #c7d8d2; font-size: .67rem; }
.status-active { color: var(--green); }
.status-inactive { color: var(--muted); }
.action-row { display: flex; gap: 7px; flex-wrap: wrap; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.entity-card { padding: 17px; }
.entity-card h3 { margin: 0 0 6px; }
.entity-card p { color: var(--muted); font-size: .8rem; margin: 0 0 16px; }
.entity-meta { display: flex; justify-content: space-between; gap: 10px; padding-top: 13px; margin-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: .74rem; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }

.responder-shell { min-height: 100dvh; background: radial-gradient(circle at 50% 15%, rgba(28,72,60,.27), transparent 34%), var(--bg); }
.responder-top { max-width: 720px; margin: 0 auto; padding: 18px 20px 10px; display: flex; justify-content: space-between; align-items: center; }
.responder-main { max-width: 720px; margin: 0 auto; padding: 12px 20px calc(108px + env(safe-area-inset-bottom)); }
.responder-view { display: none; }
.responder-view.active { display: block; animation: responder-view-in .16s ease-out; }
.responder-drill-pill { justify-content: center; margin-bottom: 12px; }
.responder-header-status { color: var(--green); background: rgba(65,214,152,.07); }
.responder-bottom-nav {
    position: fixed; z-index: 1100; left: 50%; bottom: 0; width: min(720px, 100%); min-height: calc(72px + env(safe-area-inset-bottom));
    padding: 7px 10px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
    transform: translateX(-50%); border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0;
    background: rgba(7,16,14,.97); box-shadow: 0 -12px 32px rgba(0,0,0,.34); backdrop-filter: blur(16px);
}
.responder-nav-button {
    position: relative; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 7px 3px;
    border: 0; border-radius: 11px; color: var(--muted); background: transparent; font-size: .63rem; font-weight: 800;
}
.responder-nav-button.active { color: var(--green); background: rgba(65,214,152,.09); box-shadow: inset 0 -3px var(--green); }
.responder-nav-icon { display: grid; place-items: center; line-height: 1; }
.responder-nav-icon .ui-icon { width: 22px; height: 22px; }
.responder-nav-badge {
    position: absolute; top: 4px; left: calc(50% + 9px); min-width: 18px; height: 18px; display: grid; place-items: center;
    padding: 0 5px; border: 2px solid var(--bg); border-radius: 999px; color: #fff; background: var(--red); font-size: .56rem;
}
.responder-sos-shortcut {
    position: fixed; z-index: 1150; right: max(16px, calc((100vw - 720px) / 2 + 16px)); bottom: calc(86px + env(safe-area-inset-bottom));
    width: 62px; height: 62px; border: 5px solid rgba(255,255,255,.14); border-radius: 50%; color: #fff; background: var(--red-dark);
    box-shadow: 0 10px 28px rgba(181,31,50,.44); font-weight: 950; letter-spacing: .06em;
}
.guard-hero { text-align: center; padding: 28px 18px; }
.guard-avatar { width: 88px; height: 88px; margin: 0 auto 16px; border: 3px solid var(--line); }
.guard-avatar.live { border-color: var(--green); box-shadow: 0 0 0 8px rgba(65,214,152,.08); }
.guard-hero h1 { font-size: 1.55rem; margin: 0 0 6px; }
.guard-hero p { color: var(--muted); margin: 0; }
.guard-card { padding: 20px; margin-top: 14px; }
.guard-state { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.guard-state strong { display: block; font-size: 1.1rem; }
.guard-state span { color: var(--muted); font-size: .77rem; }
.gps-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: var(--surface-2); border-radius: 12px; padding: 13px; margin: 14px 0; }
.gps-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(65,214,152,.12); color: var(--green); }
.gps-card strong, .gps-card span { display: block; }
.gps-card span { color: var(--muted); font-size: .72rem; margin-top: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: .78rem; line-height: 1.45; margin: 14px 0; }
.sos-button { width: min(260px, 75vw); aspect-ratio: 1; border-radius: 50%; border: 8px solid rgba(255,77,95,.12); color: white; background: radial-gradient(circle at 40% 30%, #ff7180, #b51f32 60%, #781523); box-shadow: 0 18px 60px rgba(181,31,50,.34), inset 0 0 0 1px rgba(255,255,255,.25); display: grid; place-items: center; margin: 24px auto; position: relative; user-select: none; touch-action: none; }
.sos-button strong { display: block; font-size: 2rem; letter-spacing: .08em; }
.sos-button span { font-size: .7rem; opacity: .8; }
.sos-button::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 8px solid var(--red); clip-path: inset(100% 0 0); transition: clip-path 2s linear; }
.sos-button.holding::after { clip-path: inset(0 0 0); }
.sos-button.active { animation: marker-pulse 1.1s infinite; }
.guard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.battery-note { color: var(--muted); font-size: .72rem; line-height: 1.45; margin-top: 12px; }
.responder-map-panel { margin-top: 16px; overflow: hidden; }
.responder-map-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px; border-bottom: 1px solid var(--line); }
.responder-map-heading .action-row { justify-content: flex-end; }
.responder-map-actions { flex: 0 0 auto; }
.responder-map-heading strong, .responder-map-heading span { display: block; }
.responder-map-heading span { margin-top: 4px; color: var(--muted); font-size: .75rem; }
.responder-map-wrap { position: relative; height: clamp(330px, 52dvh, 460px); background: #0b1513; }
#responder-map { position: absolute; inset: 0; z-index: 1; }
.responder-map-style { position: absolute; z-index: 700; top: 12px; right: 12px; display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(9,19,17,.93); box-shadow: var(--shadow); }
.responder-map-style button { padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: .7rem; font-weight: 800; }
.responder-map-style button.active { color: #04120d; background: var(--green); }
.responder-locate-button {
    position: absolute; z-index: 700; left: 50%; bottom: 16px; min-width: 190px; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; transform: translateX(-50%); box-shadow: 0 10px 28px rgba(0,0,0,.38);
}
.responder-locate-button span { font-size: 1.12rem; }
.route-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(65,214,152,.32); background: rgba(65,214,152,.08); }
.route-summary strong, .route-summary span { display: block; }
.route-summary strong { font-size: .84rem; }
.route-summary span { margin-top: 3px; color: var(--green); font-size: .75rem; }
.route-summary-actions, .responder-marker-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.routing-privacy { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .68rem; line-height: 1.5; }
.responder-marker-list { display: grid; gap: 8px; padding: 12px; }
.responder-marker-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-2); }
.responder-marker-card.drill { border-style: dashed; border-color: rgba(243,199,84,.45); }
.responder-marker-card strong, .responder-marker-card span { display: block; }
.responder-marker-card strong { font-size: .84rem; }
.responder-marker-card span { margin-top: 3px; color: var(--muted); font-size: .69rem; }
.responder-marker-card p { margin: 7px 0 0; color: #c6d6d0; font-size: .74rem; line-height: 1.4; }
.responder-marker-focus { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-3); font-size: 1.18rem; }
.responder-news-panel, .responder-frequencies-panel, .responder-account-panel { overflow: hidden; }
.responder-frequencies-panel { margin-top: 14px; }
.responder-section-heading { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.responder-section-heading strong, .responder-section-heading span { display: block; }
.responder-section-heading span { margin-top: 4px; color: var(--muted); font-size: .72rem; }
.responder-frequency-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 14px; }
.responder-frequency { min-width: 0; display: grid; gap: 4px; padding: 14px; border: 1px solid rgba(65,214,152,.2); border-radius: 13px; background: rgba(65,214,152,.06); }
.responder-frequency span { color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.responder-frequency strong { font-size: .88rem; }
.responder-frequency b { color: var(--green); font: 850 .92rem/1.3 ui-monospace, monospace; overflow-wrap: anywhere; }
.responder-alert-preferences { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.responder-alert-preferences strong, .responder-alert-preferences span { display: block; }
.responder-alert-preferences > div > span { margin-top: 3px; color: var(--muted); font-size: .66rem; }
.responder-preference { display: inline-flex; align-items: center; gap: 6px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; color: #c8d7d2; font-size: .69rem; font-weight: 750; }
.responder-preference input { accent-color: var(--green); }
.responder-account-panel { padding: 20px; }
.responder-account-identity { text-align: center; padding: 16px 10px 22px; border-bottom: 1px solid var(--line); }
.responder-account-identity h2 { margin: 10px 0 4px; }
.responder-account-identity p { margin: 0; color: var(--muted); }
.responder-account-details { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 12px 18px; padding: 20px 0; }
.responder-account-details span { color: var(--muted); }
.responder-account-details strong { overflow-wrap: anywhere; }
.responder-account-settings { margin: 2px -6px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.responder-account-settings .responder-section-heading { min-height: 62px; padding: 13px 15px; }
.responder-account-settings .responder-alert-preferences { border-bottom: 0; background: transparent; }
.responder-account-actions { margin-top: 4px; }
.empty.compact { padding: 22px 12px; }
.offline-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 1200; padding: 10px 14px; color: #181103; background: var(--yellow); border-radius: 999px; font-weight: 800; font-size: .75rem; box-shadow: var(--shadow); }
.responder-shell .offline-banner { bottom: calc(82px + env(safe-area-inset-bottom)); }

.audit-filter-panel { margin-bottom: 14px; padding: 16px; }
.audit-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.audit-filter-actions { display: flex; gap: 8px; align-items: center; }
.audit-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.audit-detail-header { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.audit-detail-header h3 { margin: 8px 0 4px; font-size: 1.35rem; }
.audit-detail-header p { margin: 0; color: var(--muted); }
.audit-detail-grid { display: grid; grid-template-columns: minmax(130px, .35fr) minmax(0, 1fr); gap: 0; margin-top: 12px; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.audit-detail-grid > span, .audit-detail-grid > strong { min-width: 0; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); line-height: 1.45; }
.audit-detail-grid > span { color: var(--muted); background: var(--surface-2); font-size: .72rem; font-weight: 760; text-transform: capitalize; }
.audit-detail-grid > strong { font-size: .8rem; overflow-wrap: anywhere; }
.audit-detail-grid > :nth-last-child(-n+2) { border-bottom: 0; }
.audit-nested { display: grid; grid-template-columns: minmax(110px, .4fr) minmax(0, 1fr); gap: 6px 10px; font-weight: 500; }
.audit-nested > span { color: var(--muted); font-size: .7rem; text-transform: capitalize; }
.audit-nested > strong { min-width: 0; font-size: .78rem; overflow-wrap: anywhere; }
.audit-nested > .button { grid-column: 1 / -1; justify-self: start; margin-top: 5px; }

.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 18px; backdrop-filter: blur(6px); }
.modal { width: min(580px, 100%); max-height: calc(100dvh - 36px); overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.modal.wide { width: min(980px, 100%); }
.modal-header { display: flex; justify-content: space-between; align-items: center; flex: none; padding: 17px 19px; border-bottom: 1px solid var(--line); background: var(--surface); z-index: 2; }
.modal-header h2 { margin: 0; font-size: 1.05rem; }
.modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 19px; }
.modal-footer { display: flex; justify-content: flex-end; flex: none; flex-wrap: wrap; gap: 9px; padding: 15px 19px; border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -14px 24px rgba(0,0,0,.14); }
.modal-error { flex: 1 0 100%; }
.map-markers-browser { display: grid; gap: 14px; }
.map-markers-browser-filters { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, .55fr) minmax(150px, .45fr); gap: 10px; }
.map-markers-browser-summary { color: var(--muted); font-size: .72rem; font-weight: 750; }
.all-map-markers-list { display: grid; gap: 9px; }
.all-map-marker-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line-soft); border-radius: 13px; background: var(--surface-2); }
.all-map-marker-card.drill { border-style: dashed; border-color: rgba(243,199,84,.45); }
.all-map-marker-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid var(--green); border-radius: 12px; background: var(--surface); font-size: 1.3rem; }
.all-map-marker-icon.priority-low { border-color: #86a39a; }
.all-map-marker-icon.priority-high { border-color: var(--yellow); }
.all-map-marker-icon.priority-critical { border-color: var(--red); }
.all-map-marker-copy { min-width: 0; }
.all-map-marker-copy > strong { display: block; font-size: .86rem; }
.all-map-marker-copy > span { display: block; margin-top: 3px; color: var(--muted); font-size: .68rem; }
.all-map-marker-copy p { margin: 7px 0 0; color: #cad8d3; font-size: .74rem; line-height: 1.4; }
.all-map-marker-meta, .all-map-marker-audience { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; color: var(--muted); font-size: .66rem; }
.all-map-marker-meta span + span::before { content: "·"; margin-right: 8px; }
.all-map-marker-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; max-width: 220px; }
.close-button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); background: transparent; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: #c8d7d2; font-size: .8rem; }
.setup-secret { padding: 14px; background: #050a09; border: 1px dashed var(--line); border-radius: 11px; font-family: ui-monospace, monospace; letter-spacing: .12em; text-align: center; word-break: break-all; }
.credential-card { display: grid; gap: 6px; margin-top: 16px; padding: 16px; background: #050a09; border: 1px solid var(--line); border-radius: 12px; }
.credential-card strong { font-size: 1rem; }
.temporary-password { color: var(--green); font: 800 1.8rem/1 ui-monospace, monospace; letter-spacing: .22em; }

.toast-region { position: fixed; z-index: 3000; right: 18px; bottom: 18px; display: grid; gap: 9px; width: min(360px, calc(100vw - 36px)); }
.toast { padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); box-shadow: var(--shadow); animation: toast-in .22s ease-out; font-size: .82rem; }
.toast.error { border-color: rgba(255,77,95,.45); }
.toast.success { border-color: rgba(65,214,152,.4); }

.emergency-callout-button { position: relative; z-index: 1250; flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 116px; height: 116px; padding: 10px; border: 4px solid rgba(255,255,255,.86); border-radius: 50%; color: #fff; background: linear-gradient(145deg,#f1374e,#a80821); box-shadow: 0 12px 34px rgba(239,55,78,.42),0 0 0 8px rgba(239,55,78,.15); cursor: pointer; font-weight: 900; letter-spacing: .04em; transition: transform .15s,filter .15s; }
.emergency-callout-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.emergency-callout-button span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.22); font-size: 1.75rem; }.emergency-callout-button strong{font-size:.76rem;line-height:1.05}
.callout-warning { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid rgba(255,77,95,.48); border-radius: 12px; background: rgba(255,77,95,.1); }
.callout-warning strong { color: #ff8794; }.callout-warning span { color: #d6c3c7; font-size: .78rem; line-height: 1.45; }
.callout-history-list,.responder-callout-list { display: grid; gap: 12px; }.callout-history-card { position: relative; overflow: hidden; border-left: 5px solid var(--callout-color); }
.callout-history-card.active { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--callout-color) 48%,transparent); }
.callout-card-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }.callout-card-heading h3 { margin: 5px 0; }.callout-card-heading p { margin: 0; color: var(--muted); line-height: 1.45; }
.callout-level { display: block; color: var(--callout-color); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.callout-result-row { display: flex; flex-wrap: wrap; gap: 9px 22px; margin: 16px 0; padding: 11px 0; border-block: 1px solid var(--line-soft); color: var(--muted); font-size: .76rem; }.callout-result-row strong { color: var(--text); font-size: .95rem; }
.callout-response-group { margin-top: 17px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }.callout-response-group h3 { margin: 0 0 8px; font-size: .82rem; }.callout-person-row { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: .77rem; }.callout-person-row strong { color: var(--muted); font-weight: 600; }.callout-live-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.callout-live-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.callout-group-accepted { border-color: rgba(65,214,152,.35); }.callout-group-rejected { border-color: rgba(255,77,95,.35); }.callout-group-waiting { border-color: rgba(245,158,11,.35); }.callout-group-not-received { border-color: rgba(148,163,184,.28); }.callout-receipt-note { font-size: .72rem; }
.stats-page-heading .eyebrow { color: var(--green); font-size: .66rem; font-weight: 900; letter-spacing: .14em; }.callout-metrics { grid-template-columns: repeat(5,minmax(130px,1fr)); }.stats-metric { position: relative; overflow: hidden; }.stats-metric::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: #63736f; }.stats-metric.active::before { background: #ef4444; }.stats-metric.accepted::before { background: #41d698; }.stats-metric small { display: block; margin-top: 5px; color: var(--muted); font-size: .66rem; }.stats-status-guide { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: .7rem; font-weight: 700; }.stats-status-guide .accepted,.stats-result-row .accepted strong { color: #41d698; }.stats-status-guide .rejected,.stats-result-row .rejected strong { color: #ff6476; }.stats-status-guide .waiting,.stats-result-row .waiting strong { color: #fbbf24; }.stats-status-guide .not-received,.stats-result-row .not-received strong { color: #94a3b8; }.stats-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }.stats-filter-heading strong,.stats-filter-heading span { display: block; }.stats-filter-heading span { margin-top: 3px; color: var(--muted); font-size: .7rem; }.stats-result-row { display: grid; grid-template-columns: repeat(4,minmax(90px,1fr)); gap: 8px; }.stats-result-row span { padding: 10px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(255,255,255,.018); }.stats-result-row strong,.stats-result-row small { display: block; }.stats-result-row strong { font-size: 1.2rem; }.stats-result-row small { margin-top: 2px; font-size: .65rem; }.callout-card-heading small { display: block; margin-top: 9px; color: var(--muted); font-size: .68rem; }
.callout-location-preview { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(65,214,152,.35); border-radius: 11px; background: rgba(65,214,152,.07); }.callout-location-preview span { color: var(--green); font-size: .7rem; font-weight: 800; }.callout-location-preview strong { grid-row: 2; font-size: .78rem; }.callout-location-preview a { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--green); font-size: .7rem; }.callout-detail-summary > .button { margin: 8px 0; }
.callout-targeting { display: grid; gap: 11px; margin: 2px 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }.callout-targeting legend,.response-members-fieldset legend { padding: 0 6px; color: var(--text); font-size: .76rem; font-weight: 850; }.callout-target-scope { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.callout-target-choice { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; min-height: 74px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; }.callout-target-choice:has(input:checked) { border-color: var(--green); background: rgba(65,214,152,.08); box-shadow: 0 0 0 2px rgba(65,214,152,.08); }.callout-target-choice.disabled { opacity: .5; cursor: not-allowed; }.callout-target-choice > input { position: absolute; top: 8px; right: 8px; accent-color: var(--green); }.callout-target-choice-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--green); background: rgba(65,214,152,.1); }.callout-target-choice-icon .ui-icon { width: 21px; height: 21px; }.callout-target-choice strong,.callout-target-choice small { display: block; }.callout-target-choice small { margin-top: 3px; padding-right: 12px; color: var(--muted); font-size: .67rem; line-height: 1.35; }.callout-group-picker { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 8px; padding-top: 3px; }.callout-group-choice { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 9px; padding: 10px 34px 10px 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(255,255,255,.018); cursor: pointer; }.callout-group-choice:has(input:checked) { border-color: #74c9ff; background: rgba(116,201,255,.08); }.callout-group-choice > input { position: absolute; top: 11px; right: 10px; accent-color: var(--green); }.callout-group-choice > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #74c9ff; background: rgba(116,201,255,.09); }.callout-group-choice > span .ui-icon { width: 18px; height: 18px; }.callout-group-choice strong { font-size: .76rem; }.callout-group-choice small { color: var(--muted); font-size: .65rem; }.callout-target-help { margin: 0; color: var(--muted); font-size: .69rem; }.callout-target-summary { display: grid; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: 7px; margin-top: 13px; padding: 10px 12px; border: 1px solid rgba(116,201,255,.24); border-radius: 10px; background: rgba(116,201,255,.055); }.callout-target-summary .ui-icon { width: 17px; height: 17px; color: #74c9ff; }.callout-target-summary span { color: var(--muted); font-size: .67rem; }.callout-target-summary strong { min-width: 0; font-size: .73rem; }.callout-target-summary.compact { width: fit-content; max-width: 100%; padding: 7px 10px; }
.emergency-live-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #ff6476 !important; }.emergency-live-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #ef334f; box-shadow: 0 0 0 5px rgba(239,51,79,.14); animation: emergency-live-dot 1.2s infinite; }.emergency-metrics { grid-template-columns: repeat(4,minmax(150px,1fr)); }.emergency-filter-panel { border-color: rgba(239,51,79,.25); }.emergency-live-list .callout-history-card.active { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--callout-color) 48%,transparent),0 12px 30px rgba(0,0,0,.16); }.emergency-live-list > .empty { display: grid; gap: 5px; }.emergency-live-list > .empty span { color: var(--muted); font-size: .75rem; }
.alert-level-list { display: grid; gap: 8px; }.alert-level-row { display: grid; grid-template-columns: 15px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; }.alert-level-row i { width: 15px; height: 38px; border-radius: 7px; }.alert-level-row strong,.alert-level-row span { display: block; }.alert-level-row span { margin-top: 3px; color: var(--muted); font-size: .68rem; }.alert-level-form { grid-template-columns: minmax(0,1fr) 100px auto; align-items:end; border-top:1px solid var(--line); padding-top:16px; }.color-input { padding: 4px; min-height: 44px; }
.responder-callout-overlay { position: fixed; z-index: 1450; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); width: min(620px,calc(100vw - 24px)); transform: translateX(-50%); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 16px; border: 2px solid var(--callout-color); border-radius: 17px; background: rgba(25,7,9,.98); box-shadow: 0 16px 44px rgba(0,0,0,.65),0 0 32px color-mix(in srgb,var(--callout-color) 38%,transparent); animation: callout-pulse 1.25s infinite; }.callout-overlay-copy span { color: var(--callout-color); font-size: .67rem; font-weight:900; letter-spacing:.08em; }.callout-overlay-copy strong { display:block; margin-top:3px; font-size:1.12rem; }.callout-overlay-copy p { margin:5px 0 0; color:#eadcdf; font-size:.8rem; line-height:1.4; }.callout-overlay-actions { display:grid; grid-template-columns:1fr; gap:8px; align-content:center; }.callout-accept { color:#06130e; background:#41d698; border-color:#41d698; font-weight:900; }
.responder-callout-overlay.multiple { grid-template-columns: 1fr; max-height: min(72vh,680px); overflow-y: auto; }.callout-overlay-count { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.12); }.callout-overlay-count strong { color: #ff7182; font-size: .75rem; }.callout-overlay-count span { color: var(--muted); font-size: .7rem; }.responder-callout-overlay-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 13px; border: 1px solid color-mix(in srgb,var(--callout-color) 50%,transparent); border-left: 4px solid var(--callout-color); border-radius: 12px; background: rgba(255,255,255,.035); }
.responder-callout-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:13px; border:1px solid var(--line); border-left:4px solid var(--callout-color); border-radius:12px; background:var(--surface-2); }.responder-callout-card strong { display:block;margin-top:3px;}.responder-callout-card p { margin:5px 0 0;color:var(--muted);font-size:.75rem; }
.department-settings-content{display:grid;gap:15px}.settings-section{overflow:hidden}.settings-section .panel-header p{margin:4px 0 0;color:var(--muted);font-size:.74rem}.settings-operation-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;gap:14px;align-items:end}.settings-delegation-picker{min-width:240px}.settings-level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.settings-level-card{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.settings-level-card>i{width:12px;height:42px;border-radius:7px}.settings-level-card strong,.settings-level-card span{display:block}.settings-level-card span{margin-top:3px;color:var(--muted);font-size:.68rem}.settings-level-card.inactive{opacity:.62}.future-settings{border-style:dashed}
.response-group-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(310px,1fr)); gap: 10px; }.response-group-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }.response-group-card-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 11px; color: #74c9ff; background: rgba(116,201,255,.09); }.response-group-card-icon .ui-icon { width: 23px; height: 23px; }.response-group-card-copy { min-width: 0; }.response-group-card-copy > strong,.response-group-card-copy > span { display: block; }.response-group-card-copy > span { margin-top: 3px; color: var(--muted); font-size: .68rem; }.response-group-members { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }.response-group-members .chip { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.response-group-card-actions { align-self: start; }.response-group-form { gap: 15px; }.response-members-fieldset { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; }.response-member-tools { display: flex; align-items: end; justify-content: space-between; gap: 12px; }.response-member-tools .field { flex: 1; }.response-member-summary { margin: 10px 0; color: var(--muted); font-size: .72rem; }.response-member-summary strong { color: var(--green); }.response-member-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 390px; overflow-y: auto; padding: 2px; }.response-member-choice { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 9px; min-height: 58px; padding: 9px 34px 9px 9px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-2); cursor: pointer; }.response-member-choice:has(input:checked) { border-color: var(--green); background: rgba(65,214,152,.075); }.response-member-choice > input { position: absolute; top: 10px; right: 10px; accent-color: var(--green); }.response-member-choice.inactive { opacity: .55; }.response-member-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--green); background: rgba(65,214,152,.09); }.response-member-icon .ui-icon { width: 19px; height: 19px; }.response-member-choice strong,.response-member-choice small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.response-member-choice strong { font-size: .75rem; }.response-member-choice small { margin-top: 2px; color: var(--muted); font-size: .65rem; }
@keyframes callout-pulse { 50% { box-shadow:0 16px 44px rgba(0,0,0,.65),0 0 42px color-mix(in srgb,var(--callout-color) 58%,transparent); } }
@keyframes emergency-live-dot { 50% { opacity: .45; transform: scale(.78); } }

@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(65,214,152,.4)); } }
@keyframes pulse { 50% { opacity: .38; } }
@keyframes marker-pulse { 50% { box-shadow: 0 0 0 13px rgba(255,77,95,0), 0 5px 18px rgba(0,0,0,.5); transform: scale(1.05); } }
@keyframes monitor-location-pulse { from { opacity:.85; transform:scale(.78); } to { opacity:0; transform:scale(1.28); } }
@keyframes nav-emergency-pulse { 50% { background:rgba(225,29,63,.38); box-shadow:inset 3px 0 #ff334f,0 0 24px rgba(239,51,79,.26); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes responder-view-in { from { opacity: 0; transform: translateY(5px); } }

/* Emergencias y estadísticas: estructura de lectura y espaciado consistente. */
.content.callouts-content { width: min(100%, 1420px); margin-inline: auto; }
.content.callouts-content .stats-page-heading { align-items: center; margin-bottom: 22px; }
.content.callouts-content .stats-page-heading > div { max-width: 820px; }
.content.callouts-content .stats-page-heading h2 { margin-top: 7px; }
.content.callouts-content .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.content.callouts-content .metric { min-height: 118px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; }
.content.callouts-content .metric strong { font-size: 1.75rem; }
.content.callouts-content .stats-status-guide { margin: 4px 0 18px; padding: 13px 17px; }
.content.callouts-content .emergency-filter-panel,
.content.callouts-content .callout-filter-panel { margin: 18px 0 22px; padding: 18px; }
.content.callouts-content .emergency-filter-panel .audit-filter-grid { grid-template-columns: minmax(260px, 1fr) auto; align-items: end; }
.content.callouts-content .callout-filter-panel .audit-filter-grid { grid-template-columns: minmax(190px, 1fr) minmax(170px, .8fr) minmax(170px, .8fr) auto; align-items: end; }
.content.callouts-content .audit-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.content.callouts-content .callout-history-list { display: grid; gap: 18px; }
.content.callouts-content .callout-history-card { padding: 0; border-radius: 16px; }
.content.callouts-content .callout-card-heading { padding: 19px 20px 17px; }
.content.callouts-content .callout-card-heading h3 { margin: 6px 0; font-size: 1.12rem; }
.content.callouts-content .callout-card-heading p { line-height: 1.5; }
.content.callouts-content .callout-card-heading .status-pill { flex: none; }
.content.callouts-content .callout-result-row { margin: 0; padding: 14px 20px; border-block: 1px solid var(--line-soft); }
.content.callouts-content .stats-result-row { gap: 10px; }
.content.callouts-content .stats-result-row span { min-height: 66px; padding: 11px 13px; display: flex; flex-direction: column; justify-content: center; }
.content.callouts-content .callout-history-card > .action-row { margin: 0; padding: 14px 20px 17px; justify-content: flex-start; }
.content.callouts-content .audit-pagination { margin-top: 4px; }

@media (max-width: 980px) {
    .content.callouts-content .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content.callouts-content .callout-filter-panel .audit-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content.callouts-content .audit-filter-actions { justify-content: flex-start; }
}

@media (max-width: 620px) {
    .content.callouts-content { padding-inline: 12px; }
    .content.callouts-content .stats-page-heading { align-items: stretch; flex-direction: column; }
    .content.callouts-content .stats-page-heading .button { width: 100%; }
    .content.callouts-content .metric-grid { grid-template-columns: 1fr; }
    .content.callouts-content .emergency-filter-panel .audit-filter-grid,
    .content.callouts-content .callout-filter-panel .audit-filter-grid { grid-template-columns: 1fr; }
    .content.callouts-content .audit-filter-actions { display: grid; grid-template-columns: 1fr; }
    .content.callouts-content .callout-card-heading { align-items: flex-start; flex-direction: column; padding: 16px; }
    .content.callouts-content .callout-result-row { padding: 12px 16px; }
    .content.callouts-content .stats-result-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content.callouts-content .callout-history-card > .action-row { padding: 13px 16px 16px; }
}

@media (max-width: 1000px) {
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .card-grid { grid-template-columns: 1fr 1fr; }
    .monitor-layout { grid-template-columns: 290px minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .login-shell { display: block; }
    .login-panel { min-height: 100dvh; padding: 26px 22px; }
    .login-art { display: none; }
    .shell { display: block; }
    .sidebar { position: fixed; left: 0; right: 0; top: auto; bottom: 0; height: calc(68px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); padding: 7px 8px env(safe-area-inset-bottom); flex-direction: row; z-index: 1000; }
    .sidebar .brand, .sidebar-user { display: none; }
    .emergency-callout-button { position:fixed;right:14px;bottom:calc(82px + env(safe-area-inset-bottom));width:72px;height:72px;padding:6px; }.emergency-callout-button span { width:31px;height:31px;font-size:1.3rem }.emergency-callout-button strong { font-size:.56rem; }
    .nav { display: flex; overflow-x: auto; overflow-y: hidden; width: 100%; gap: 2px; scrollbar-width: none; }
    .nav::-webkit-scrollbar { display: none; }
    .nav-button { min-width: 76px; flex: 0 0 76px; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 4px; font-size: .58rem; white-space: nowrap; }
    .nav-button.active { box-shadow: inset 0 -3px var(--green); }
    .nav-icon { font-size: 1rem; }
    .nav-emergency-count { position:absolute;top:2px;right:7px;min-width:18px;padding:2px 4px;font-size:.56rem; }
    .nav-button.emergency-attention { box-shadow:inset 0 -3px #ff334f; }
    .sidebar>.emergency-callout-button { margin-top: 0; }
    .topbar { top: 0; min-height: 60px; padding: 10px 14px; }
    .topbar h1 { font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-meta .live-pill { display: none; }
    .monitor-controls-button { display: inline-flex; }
    .content { padding: 18px 14px calc(90px + env(safe-area-inset-bottom)); }
    .responder-top { padding: 14px 14px 8px; }
    .responder-main { padding: 8px 14px calc(102px + env(safe-area-inset-bottom)); }
    .guard-hero { padding: 20px 14px; }
    .monitor-layout { display: block; min-height: calc(100dvh - 60px); padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .monitor-list {
        position: absolute; z-index: 1100; left: 10px; top: 70px; width: min(350px, calc(100vw - 20px));
        max-height: calc(100dvh - 150px); overflow-y: auto; border: 1px solid var(--line); border-radius: 15px;
        box-shadow: var(--shadow); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }
    .monitor-list.mobile-expanded { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
    .responders { overflow: visible; }
    .map-wrap { min-height: calc(100dvh - 60px - 68px); }
    .map-legend { bottom: 12px; }
    .map-context-hint { display: none; }
    .map-style-switch { top: 12px; right: 12px; }
    .draw-area-button { top: 78px; left: 12px; padding: 8px 10px; }
    .monitor-locate-button { top: 120px; left: 12px; padding: 8px 10px; }
    .map-labels-toggle-button { top: 162px; left: 12px; padding: 8px 10px; }
    .area-drawing-toolbar { bottom: 78px; align-items: stretch; flex-direction: column; }
    .area-drawing-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; }
    .leaflet-tooltip.operational-label-tooltip { max-width: min(120px, 30vw); font-size: .58rem; }
    .card-grid { grid-template-columns: 1fr; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .page-heading .button { width: 100%; }
    .panel-header { align-items: stretch; flex-direction: column; }
    .panel-header .input { max-width: none !important; }
    .input-row, .check-grid { grid-template-columns: 1fr; }
    .audit-filter-grid { grid-template-columns: 1fr 1fr; }
    .audit-filter-actions { grid-column: 1 / -1; }
    .table-wrap { overflow: visible; }
    .table.responsive-table, .table.responsive-table tbody { display: block; width: 100%; }
    .table.responsive-table thead { display: none; }
    .table.responsive-table tr { display: grid; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
    .table.responsive-table tr:last-child { border-bottom: 0; }
    .table.responsive-table td {
        display: grid; grid-template-columns: minmax(84px, .34fr) minmax(0, 1fr); gap: 10px;
        align-items: start; min-width: 0; padding: 5px 0; border: 0;
    }
    .table.responsive-table td::before {
        content: attr(data-label); color: var(--muted); font-size: .62rem; font-weight: 800;
        letter-spacing: .06em; text-transform: uppercase;
    }
    .table.responsive-table td[data-label=""] { display: block; padding-top: 10px; }
    .table.responsive-table td[data-label=""]::before { display: none; }
    .table.responsive-table td[colspan] { display: block; padding: 24px 10px; }
    .table.responsive-table td[colspan]::before { display: none; }
    .table.responsive-table .table-user { min-width: 0; }
    .table.responsive-table .action-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); }
    .modal-backdrop { padding: 8px; }
    .modal { max-height: calc(100dvh - 16px); border-radius: 14px; }
    .modal-header { padding: 14px 15px; }
    .modal-body { padding: 15px; }
    .modal-footer { padding: 12px 15px; }
    .modal-footer .button { flex: 1 1 120px; }
    .audit-detail-grid { grid-template-columns: minmax(96px, .34fr) minmax(0, 1fr); }
    .map-markers-browser-filters { grid-template-columns: 1fr; }
    .all-map-marker-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .all-map-marker-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); max-width: none; width: 100%; }
    .modal.map-markers-modal .modal-body { padding: 13px; }
    .callout-card-heading { flex-direction:column; }.alert-level-form { grid-template-columns:1fr 80px; }.alert-level-form .button { grid-column:1/-1; }.responder-callout-overlay,.responder-callout-overlay-item { grid-template-columns:1fr; }.callout-overlay-actions { grid-template-columns:1fr 1fr; }.emergency-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.callout-overlay-count { flex-direction:column;gap:3px; }
    .settings-operation-grid{grid-template-columns:1fr}.settings-delegation-picker{width:100%;min-width:0}.settings-level-grid{grid-template-columns:1fr}
    .callout-target-scope,.response-member-list { grid-template-columns:1fr; }.callout-group-picker { grid-template-columns:1fr; }.callout-target-summary { grid-template-columns:auto minmax(0,1fr); }.callout-target-summary strong { grid-column:1/-1; }.response-group-grid { grid-template-columns:1fr; }.response-group-card { grid-template-columns:auto minmax(0,1fr); }.response-group-card-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; width:100%; }.response-member-tools { align-items:stretch; flex-direction:column; }.response-member-tools .action-row { display:grid;grid-template-columns:1fr 1fr; }.response-member-list { max-height:46dvh; }
}

@media (max-width: 440px) {
    .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .metric { padding: 12px; }
    .metric strong { font-size: 1.35rem; }
    .guard-actions { grid-template-columns: 1fr; }
    .responder-header-status { padding: 6px 8px; font-size: .62rem; }
    .responder-alert-preferences { grid-template-columns: 1fr 1fr; }
    .responder-alert-preferences > div { grid-column: 1 / -1; }
    .responder-alert-preferences #responder-test-alert { grid-column: 1 / -1; width: 100%; }
    .responder-preference { justify-content: center; }
    .responder-account-details { grid-template-columns: 84px minmax(0, 1fr); font-size: .82rem; }
    .audit-filter-grid { grid-template-columns: 1fr; }
    .audit-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .audit-pagination { gap: 8px; justify-content: space-between; }
    .audit-pagination span { text-align: center; }
    .audit-detail-grid, .audit-nested { grid-template-columns: 1fr; }
    .audit-detail-grid > span { padding-bottom: 4px; border-bottom: 0; }
    .audit-detail-grid > strong { padding-top: 3px; }
    .responder-map-heading { align-items: flex-start; flex-direction: column; }
    .responder-map-heading .action-row { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .responder-marker-card { grid-template-columns: auto minmax(0, 1fr); }
    .responder-marker-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; width: 100%; }
    .route-summary { align-items: flex-start; flex-direction: column; }
    .route-summary-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .marker-audience-picker { grid-template-columns: 1fr 1fr; }
    .map-area-color-picker { grid-template-columns: 1fr 1fr; }
}