:root {
            color-scheme: dark;
            --bg: #04111d;
            --panel: rgba(7, 26, 43, .92);
            --panel-2: rgba(9, 35, 58, .86);
            --line: rgba(42, 159, 225, .34);
            --line-strong: rgba(76, 189, 255, .62);
            --text: #f5f9ff;
            --muted: #9fb6cc;
            --cyan: #23b8ff;
            --green: #64df75;
            --yellow: #f5c842;
            --amber: #ffb52f;
            --orange: #ff8c2a;
            --red: #ff554a;
            --violet: #9b8cff;
            --radius: 8px;
            --shadow: 0 18px 48px rgba(0, 0, 0, .38);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background:
                radial-gradient(circle at 20% 0%, rgba(35, 184, 255, .11), transparent 28rem),
                radial-gradient(circle at 90% 12%, rgba(100, 223, 117, .1), transparent 22rem),
                linear-gradient(145deg, #020811 0%, var(--bg) 54%, #061928 100%);
            color: var(--text);
            letter-spacing: 0;
        }

        button {
            font: inherit;
        }

        .dashboard-shell {
            width: min(1920px, 100%);
            min-height: 100vh;
            margin: 0 auto;
            padding: 8px;
            scroll-padding-top: 80px;
        }

        .dashboard-shell.tv-fit {
            width: calc(100% / var(--tv-scale, 1));
            min-height: auto;
            transform: scale(var(--tv-scale, 1));
            transform-origin: top left;
        }

        body.tv-fit-body {
            overflow: hidden;
        }

        /* TV-mode toggle button (shown on large screens) */
        .tv-toggle {
            position: fixed;
            bottom: 52px;
            right: 14px;
            z-index: 200;
            padding: 5px 12px;
            border: 1px solid rgba(42,159,225,.4);
            border-radius: 5px;
            background: rgba(4,17,29,.85);
            color: var(--muted);
            font: 11px/1 inherit;
            font-weight: 600;
            cursor: pointer;
            letter-spacing: .05em;
            text-transform: uppercase;
            transition: border-color .2s, color .2s;
        }
        .tv-toggle:hover { border-color: var(--cyan); color: var(--cyan); }
        .tv-toggle.active { border-color: var(--green); color: var(--green); }

        .topbar,
        .panel,
        .statusbar {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: linear-gradient(180deg, rgba(9, 35, 58, .96), rgba(3, 14, 25, .92));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--shadow);
        }

        .topbar {
            display: grid;
            grid-template-columns: 225px 185px 1fr 142px 192px;
            gap: 0;
            align-items: stretch;
            padding: 0;
            overflow: visible;
            position: sticky;
            top: 8px;
            z-index: 50;
        }

        /* ─── Header section dividers ─── */
        .header-brand, .header-alert, .header-kpis, .header-readiness, .header-clock {
            border-right: 1px solid rgba(42, 159, 225, .18);
        }
        .header-clock { border-right: none; }

        /* ─── Brand section ─── */
        .header-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
        }

        .crest-ring {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 2px solid rgba(246, 204, 87, .65);
            background: radial-gradient(circle, rgba(255,255,255,.93) 0 20%, rgba(18,95,151,.9) 21% 44%, rgba(4,19,32,.98) 45% 100%);
            box-shadow: 0 0 0 4px rgba(246,204,87,.1), 0 0 22px rgba(35,184,255,.28);
            display: grid;
            place-items: center;
            font-size: 11px;
            font-weight: 900;
            color: #fff;
        }

        .brand-info { min-width: 0; }
        .brand-country { font-size: 18px; font-weight: 900; letter-spacing: .08em; color: var(--text); text-transform: uppercase; line-height: 1.3; }
        .brand-ministry { font-size: 10px; font-weight: 700; color: var(--cyan); letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }
        .brand-subtitle { font-size: 9px; color: var(--muted); line-height: 1.35; margin-top: 3px; }
        .brand-ar { font-size: 13px; font-weight: 900; letter-spacing: .1em; color: rgba(246,204,87,.82); margin-top: 2px; }

        /* ─── Alert section ─── */
        .header-alert {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 3px;
            padding: 10px 13px;
            background: rgba(255,85,74,.03);
            border-left: 3px solid var(--red);
        }

        .ha-label { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

        .ha-level { display: flex; align-items: center; gap: 8px; margin: 3px 0 2px; }
        .ha-icon { width: 24px; height: 24px; flex-shrink: 0; }
        .ha-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

        .ha-level-text { font-size: clamp(17px, 1.3vw, 22px); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
        /* Spec-aligned: Green=Stable, Yellow=Elevated, Orange=High Risk, Red=Emergency/Critical */
        .level-stable,   .level-normal, .level-low  { color: var(--green); }
        .level-elevated, .level-medium, .level-watch { color: var(--yellow); }
        .level-high,     .level-warning, .level-high-risk { color: var(--orange); }
        .level-emergency,.level-critical             { color: var(--red); }

        .ha-update  { font-size: 9px; color: var(--muted); }
        .ha-summary { font-size: 9px; color: var(--muted); line-height: 1.3; margin-top: 1px; }

        /* ─── KPI strip ─── */
        .header-kpis {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .hk-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-right: 1px solid rgba(42,159,225,.13); }
        .hk-item:last-child { border-right: none; }

        .hk-icon {
            flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
            background: rgba(35,184,255,.1); border: 1px solid rgba(35,184,255,.28);
            display: grid; place-items: center; color: var(--cyan);
        }
        .hk-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .hk-icon.amber { background: rgba(255,181,47,.1);  border-color: rgba(255,181,47,.32); color: var(--amber); }
        .hk-icon.red   { background: rgba(255,85,74,.1);   border-color: rgba(255,85,74,.32);  color: var(--red); }
        .hk-icon.green { background: rgba(100,223,117,.1); border-color: rgba(100,223,117,.32);color: var(--green); }

        .hk-data { min-width: 0; }
        .hk-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
        .hk-val   { font-size: clamp(20px, 1.5vw, 26px); font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); }
        .hk-change { font-size: 10px; color: var(--muted); white-space: nowrap; }
        .hk-change .up       { color: var(--amber); }
        .hk-change .down     { color: var(--green); }
        .hk-change .alert-up { color: var(--red); }

        /* ─── Readiness section ─── */
        .header-readiness {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 2px; padding: 7px 8px; text-align: center;
        }
        .hr-label   { font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
        .hr-quality { font-size: 11px; font-weight: 700; color: var(--green); }

        /* ─── Clock + Weather section ─── */
        .header-clock {
            display: flex; flex-direction: column; align-items: flex-end;
            justify-content: center; gap: 1px; padding: 8px 12px;
        }
        .hc-time { font-size: clamp(21px, 1.6vw, 27px); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1; color: var(--text); }
        .hc-date { font-size: 10px; color: var(--muted); text-align: right; }
        .hc-weather { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
        .sun-orb { width: 30px; height: 30px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 6px rgba(255,181,47,.1), 0 0 18px rgba(255,181,47,.38); flex-shrink: 0; }
        .hc-temp { font-size: 18px; font-weight: 800; color: var(--amber); line-height: 1; text-align: right; }
        .hc-cond { font-size: 9px; color: var(--muted); text-align: right; }

        /* ─── Legacy panel-subtitle muted ─── */
        .panel-subtitle { color: var(--muted); }

        .readiness-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        .readiness {
            display: grid;
            place-items: center;
            width: 86px;
            height: 86px;
            margin: 0 auto;
            border-radius: 50%;
            background: conic-gradient(var(--green) 0deg, var(--green) var(--gauge), rgba(255, 255, 255, .09) var(--gauge), rgba(255, 255, 255, .09) 360deg);
            box-shadow: 0 0 30px rgba(100, 223, 117, .22);
        }

        .readiness span {
            display: grid;
            place-items: center;
            width: 62px;
            height: 62px;
            border-radius: 50%;
            background: #071827;
            font-weight: 900;
            font-size: 20px;
        }

        .system-label {
            text-align: center;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .clock-card, .weather-card { display: none; }

        .dashboard-grid {
            display: grid;
            grid-template-columns: 1.05fr 1.75fr 1.1fr;
            gap: 8px;
            margin-top: 8px;
        }

        .lower-grid {
            display: grid;
            grid-template-columns: 1.12fr 1.05fr .72fr 1.05fr 1.45fr;
            gap: 8px;
            margin-top: 8px;
        }

        .bottom-grid {
            display: grid;
            grid-template-columns: 1fr 1.2fr .75fr .75fr;
            gap: 8px;
            margin-top: 8px;
        }

        .panel {
            min-height: 180px;
            padding: 12px;
        }

        .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin: 0 0 8px;
            padding-bottom: 7px;
            border-bottom: 1px solid rgba(42, 159, 225, .18);
            min-width: 0;
        }

        .panel-title {
            margin: 0;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--cyan);
            text-align: left;
            flex: 1;
        }

        .panel-subtitle {
            font-size: 12px;
            white-space: nowrap;
        }

        .metric-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .metric-grid.compact {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .metric-grid.three {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .metric-grid.one {
            grid-template-columns: 1fr;
        }

        .metric-card,
        .state-card,
        .alert-row,
        .insight-row {
            border: 1px solid rgba(42, 159, 225, .25);
            border-radius: var(--radius);
            background: rgba(3, 18, 31, .72);
        }

        .metric-card {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            padding: 9px 10px;
            border: 1px solid rgba(42, 159, 225, .22);
            border-radius: var(--radius);
            background: rgba(3, 18, 31, .72);
            min-height: 66px;
        }

        .state-card,
        .alert-row,
        .insight-row {
            border: 1px solid rgba(42, 159, 225, .25);
            border-radius: var(--radius);
            background: rgba(3, 18, 31, .72);
        }

        .metric-card.wide { grid-column: span 2; }
        .metric-card.slim { min-height: 54px; padding: 7px 9px; }

        /* Colored left border accent */
        .metric-card.color-green { border-left: 3px solid rgba(100,223,117,.55); }
        .metric-card.color-amber { border-left: 3px solid rgba(255,181,47,.55); }
        .metric-card.color-red   { border-left: 3px solid rgba(255,85,74,.55); }
        .metric-card.color-blue  { border-left: 3px solid rgba(35,184,255,.4); }

        /* Icon circle */
        .metric-icon {
            flex-shrink: 0;
            width: 34px; height: 34px;
            border-radius: 8px;
            display: grid; place-items: center;
            background: rgba(35,184,255,.1);
            border: 1px solid rgba(35,184,255,.28);
            color: var(--cyan);
        }
        .metric-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

        .metric-card.color-green .metric-icon { background: rgba(100,223,117,.1); border-color: rgba(100,223,117,.38); color: var(--green); }
        .metric-card.color-amber .metric-icon { background: rgba(255,181,47,.1);  border-color: rgba(255,181,47,.38);  color: var(--amber); }
        .metric-card.color-red   .metric-icon { background: rgba(255,85,74,.1);   border-color: rgba(255,85,74,.38);   color: var(--red); }

        /* State dot compat */
        .state-normal .state-dot { background: rgba(100,223,117,.14); border-color: rgba(100,223,117,.44); color: var(--green); }
        .state-watch .state-dot, .state-warning .state-dot { background: rgba(255,181,47,.15); border-color: rgba(255,181,47,.48); color: var(--amber); }
        .state-critical .state-dot { background: rgba(255,85,74,.15); border-color: rgba(255,85,74,.48); color: var(--red); }

        .metric-body { flex: 1; min-width: 0; }

        .metric-label {
            font-size: 10px; font-weight: 600; text-transform: uppercase;
            letter-spacing: .04em; color: var(--muted); line-height: 1.2; margin-bottom: 2px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .metric-val {
            font-size: clamp(16px, 1.1vw, 20px); font-weight: 800; line-height: 1.1;
            font-variant-numeric: tabular-nums; color: var(--text); margin-bottom: 2px;
            overflow-wrap: break-word; word-break: break-word;
        }

        /* Trend row under a metric value */
        .metric-trend {
            display: flex; align-items: baseline; justify-content: space-between;
            gap: 4px; margin-top: 4px; font-size: 10px; color: var(--muted); line-height: 1.3;
        }
        .metric-trend span {
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            min-width: 0; flex: 1;
        }
        .metric-trend strong { flex-shrink: 0; font-size: 11px; }
        .metric-card.slim .metric-val { font-size: 17px; }

        .metric-unit { color: var(--muted); font-size: 11px; font-weight: 600; }
        /* legacy alias */ .metric-name { color: #d8e7f8; font-size: 11px; line-height: 1.25; }
        .metric-value { margin-top: 3px; color: var(--text); font-size: clamp(15px, 1vw, 19px); font-weight: 800; line-height: 1.08; overflow-wrap: break-word; }
        .metric-card.slim .metric-value { font-size: 17px; }

        .metric-footer,
        .trend {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin-top: 8px;
            color: var(--muted);
            font-size: 12px;
            flex-wrap: wrap;
        }

        .trend-up {
            color: var(--green);
        }

        .trend-down {
            color: var(--red);
        }

        .trend-stable {
            color: var(--amber);
        }

        /* ═══ REAL-TIME OPERATIONAL MAP (redesigned) ═══ */
        .map-panel { min-height: 530px; display: flex; flex-direction: column; }

        .map-stats-bar {
            display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
        }
        .map-stat {
            display: inline-flex; align-items: center; gap: 7px;
            padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
        }
        .map-stat .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .map-stat strong { font-size: 15px; font-weight: 700; }
        .map-stat-total   { background: rgba(35,184,255,.1);  border: 1px solid rgba(35,184,255,.25); color: #8dd8ff; }
        .map-stat-total   .dot { background: #23b8ff; }
        .map-stat-critical{ background: rgba(255,85,74,.1);   border: 1px solid rgba(255,85,74,.28);  color: #ffb0ab; }
        .map-stat-critical .dot { background: #ff554a; box-shadow: 0 0 6px #ff554a; }
        .map-stat-high    { background: rgba(255,181,47,.1);  border: 1px solid rgba(255,181,47,.28); color: #ffd88a; }
        .map-stat-high    .dot { background: #ffb52f; }
        .map-stat-monitor { background: rgba(91,216,117,.08); border: 1px solid rgba(91,216,117,.22); color: #a8f0b8; }
        .map-stat-monitor .dot { background: #5bd875; }

        .map-layout {
            display: grid;
            grid-template-columns: 1fr 252px;
            gap: 12px;
            flex: 1;
            min-height: 0;
        }

        .map-stage {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(42,159,225,.28);
            border-radius: var(--radius);
            background: #030f1c;
            min-height: 360px;
        }

        #leafletMap {
            width: 100%; height: 100%;
            min-height: 360px;
            border-radius: var(--radius);
            background: #030f1c;
        }

        /* Leaflet dark theme overrides */
        .leaflet-container { background: #04111d; font-family: inherit; }
        .leaflet-tile-pane { opacity: .9; }
        .leaflet-control-zoom a {
            background: rgba(4,14,28,.92); color: #8dd8ff;
            border-color: rgba(42,159,225,.35);
        }
        .leaflet-control-zoom a:hover { background: rgba(35,184,255,.18); }
        .leaflet-control-attribution {
            background: rgba(3,10,20,.7); color: rgba(120,160,200,.5);
            font-size: 9px;
        }
        .leaflet-control-attribution a { color: rgba(120,160,200,.7); }
        .leaflet-popup-content-wrapper {
            background: rgba(3,11,22,.97);
            border: 1px solid rgba(42,159,225,.45);
            border-radius: 8px;
            box-shadow: 0 12px 36px rgba(0,0,0,.6);
            color: #e8f4ff; padding: 0;
        }
        .leaflet-popup-content { margin: 0; min-width: 190px; }
        .leaflet-popup-tip-container { display: none; }
        .leaflet-popup-close-button { color: #8dd8ff !important; right: 6px; top: 6px; }

        /* Custom Leaflet state marker */
        .lf-state {
            display: flex; flex-direction: column; align-items: center; gap: 3px;
            cursor: pointer;
        }
        .lf-state-ring {
            width: 34px; height: 34px; border-radius: 50%;
            border: 2.5px solid currentColor;
            display: flex; align-items: center; justify-content: center;
            background: rgba(3,14,26,.82);
            font-size: 10px; font-weight: 900; color: #9dd8ff;
            position: relative;
            box-shadow: 0 0 10px rgba(0,0,0,.5);
            transition: transform .18s;
        }
        .lf-state:hover .lf-state-ring { transform: scale(1.2); }
        .lf-state.s-normal   .lf-state-ring { border-color: rgba(91,216,117,.85); box-shadow: 0 0 10px rgba(91,216,117,.2); }
        .lf-state.s-watch    .lf-state-ring { border-color: rgba(255,181,47,.85);  box-shadow: 0 0 10px rgba(255,181,47,.2); }
        .lf-state.s-warning  .lf-state-ring { border-color: rgba(255,120,40,.85);  box-shadow: 0 0 12px rgba(255,120,40,.25); }
        .lf-state.s-critical .lf-state-ring { border-color: rgba(255,75,60,.9);    box-shadow: 0 0 16px rgba(255,75,60,.4); }
        .lf-arc {
            position: absolute; inset: -3px; border-radius: 50%;
            background: conic-gradient(rgba(35,184,255,.42) var(--pct,0deg), transparent var(--pct,0deg));
        }
        .lf-badge {
            position: absolute; top: -5px; right: -5px;
            min-width: 16px; height: 16px; padding: 0 3px;
            border-radius: 8px; background: var(--red); color: #fff;
            font-size: 9px; font-weight: 900;
            display: flex; align-items: center; justify-content: center;
            border: 1.5px solid rgba(0,0,0,.5);
        }
        .lf-label {
            font-size: 10px; font-weight: 700; color: #d8eeff;
            text-shadow: 0 1px 4px rgba(0,0,0,.95);
            background: rgba(3,12,24,.75); padding: 1px 5px; border-radius: 3px;
            white-space: nowrap; pointer-events: none;
        }

        /* Custom Leaflet incident marker */
        .lf-incident {
            width: 20px; height: 20px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 8px; font-weight: 900;
            border: 1.5px solid rgba(255,255,255,.55);
            cursor: pointer; transition: transform .18s;
        }
        .lf-incident:hover { transform: scale(1.3); }
        .lf-incident.sev-critical { background: rgba(255,50,38,.95); box-shadow: 0 0 14px rgba(255,50,38,.65); }
        .lf-incident.sev-high     { background: rgba(255,160,28,.95); box-shadow: 0 0 10px rgba(255,160,28,.5); }
        .lf-incident.sev-medium   { background: rgba(35,184,255,.95); box-shadow: 0 0 8px rgba(35,184,255,.45); }
        .lf-incident.sev-low, .lf-incident.sev-resolved { background: rgba(91,216,117,.95); }
        .lf-incident.sev-critical::after {
            content: ''; position: absolute; inset: -5px;
            border-radius: 50%; border: 2px solid rgba(255,50,38,.4);
            animation: mapPulse 1.7s ease-out infinite;
        }

        /* Popup card */
        .lf-popup { padding: 10px 13px; }
        .lf-popup-title { font-size: 13px; font-weight: 700; color: #e8f4ff; margin-bottom: 6px; }
        .lf-popup-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; color: #7aa0bc; font-size: 11px; }
        .lf-popup-row strong { color: #cce4ff; }
        .lf-popup-hr { border: none; border-top: 1px solid rgba(42,159,225,.18); margin: 5px 0; }

        /* State nodes */
        .state-node {
            position: absolute;
            transform: translate(-50%, -50%);
            z-index: 4;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
        }
        .state-node-ring {
            width: 34px; height: 34px;
            border-radius: 50%;
            border: 2.5px solid currentColor;
            display: flex; align-items: center; justify-content: center;
            background: rgba(3,14,26,.8);
            font-size: 10px; font-weight: 900; color: #9dd8ff;
            position: relative;
            transition: transform .18s, box-shadow .18s;
            box-shadow: 0 0 10px rgba(0,0,0,.5);
        }
        .state-node:hover .state-node-ring { transform: scale(1.18); }
        .status-normal   .state-node-ring { border-color: rgba(91,216,117,.85);  box-shadow: 0 0 10px rgba(91,216,117,.22); }
        .status-watch    .state-node-ring { border-color: rgba(255,181,47,.85);  box-shadow: 0 0 10px rgba(255,181,47,.22); }
        .status-warning  .state-node-ring { border-color: rgba(255,120,40,.85);  box-shadow: 0 0 12px rgba(255,120,40,.28); }
        .status-critical .state-node-ring { border-color: rgba(255,75,60,.9);    box-shadow: 0 0 16px rgba(255,75,60,.4);  }
        .state-readiness-arc {
            position: absolute; inset: -3px; border-radius: 50%;
            background: conic-gradient(rgba(35,184,255,.45) var(--pct,0deg), transparent var(--pct,0deg));
        }
        .state-badge {
            position: absolute; top: -5px; right: -5px;
            min-width: 16px; height: 16px; padding: 0 3px;
            border-radius: 8px; background: var(--red); color: #fff;
            font-size: 9px; font-weight: 900;
            display: flex; align-items: center; justify-content: center;
            border: 1.5px solid rgba(0,0,0,.5);
        }
        .state-node-label {
            font-size: 10px; font-weight: 700; color: #d8eeff;
            text-shadow: 0 1px 4px rgba(0,0,0,.95);
            background: rgba(3,12,24,.72);
            padding: 1px 5px; border-radius: 3px; white-space: nowrap;
        }

        /* Incident markers */
        .marker {
            position: absolute;
            transform: translate(-50%, -50%);
            z-index: 5;
            display: flex; align-items: center; justify-content: center;
            width: 20px; height: 20px;
            border-radius: 50%;
            color: white; font-size: 8px; font-weight: 900;
            border: 1.5px solid rgba(255,255,255,.55);
            cursor: pointer;
            transition: transform .18s;
        }
        .marker:hover { transform: translate(-50%,-50%) scale(1.3); z-index: 9; }
        .marker-critical { background: rgba(255,50,38,.95); box-shadow: 0 0 14px rgba(255,50,38,.65); }
        .marker-high     { background: rgba(255,160,28,.95); box-shadow: 0 0 10px rgba(255,160,28,.5); }
        .marker-medium   { background: rgba(35,184,255,.95); box-shadow: 0 0 8px rgba(35,184,255,.45); }
        .marker-low, .marker-resolved { background: rgba(91,216,117,.95); box-shadow: 0 0 7px rgba(91,216,117,.35); }
        .marker-critical::after {
            content: ''; position: absolute; inset: -5px;
            border-radius: 50%; border: 2px solid rgba(255,50,38,.45);
            animation: mapPulse 1.7s ease-out infinite;
        }
        @keyframes mapPulse {
            0%   { transform: scale(1); opacity: .75; }
            100% { transform: scale(2.2); opacity: 0; }
        }

        /* Tooltip */
        .map-tooltip {
            position: fixed; z-index: 30; pointer-events: none;
            min-width: 190px; max-width: 260px;
            padding: 10px 13px;
            background: rgba(3,11,22,.97);
            border: 1px solid rgba(42,159,225,.45);
            border-radius: 8px;
            box-shadow: 0 12px 36px rgba(0,0,0,.6);
            font-size: 12px; display: none;
        }
        .map-tooltip.show { display: block; }
        .map-tt-title { font-size: 13px; font-weight: 700; color: #e8f4ff; margin-bottom: 6px; }
        .map-tt-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; color: #7aa0bc; font-size: 11px; }
        .map-tt-row strong { color: #cce4ff; }
        .map-tt-divider { border: none; border-top: 1px solid rgba(42,159,225,.18); margin: 5px 0; }

        /* Incidents sidebar */
        .map-sidebar {
            display: flex; flex-direction: column;
            background: rgba(4,14,26,.92);
            border: 1px solid rgba(42,159,225,.22);
            border-radius: var(--radius);
            overflow: hidden; min-height: 0;
        }
        .map-sidebar-header {
            padding: 9px 12px;
            border-bottom: 1px solid rgba(42,159,225,.18);
            font-size: 10px; font-weight: 700; letter-spacing: .08em;
            text-transform: uppercase; color: var(--muted);
            display: flex; justify-content: space-between; align-items: center;
            flex-shrink: 0;
        }
        .map-sidebar-body {
            flex: 1; overflow-y: auto;
            scrollbar-width: thin; scrollbar-color: rgba(35,184,255,.2) transparent;
        }
        .map-incident-row {
            display: flex; align-items: flex-start; gap: 9px;
            padding: 8px 11px;
            border-bottom: 1px solid rgba(42,159,225,.09);
            cursor: pointer; transition: background .15s;
        }
        .map-incident-row:hover { background: rgba(35,184,255,.06); }
        .map-incident-row:last-child { border-bottom: 0; }
        .map-inc-dot {
            flex-shrink: 0; width: 8px; height: 8px;
            border-radius: 50%; margin-top: 4px;
        }
        .map-inc-dot.sev-critical { background: var(--red); box-shadow: 0 0 5px var(--red); }
        .map-inc-dot.sev-high     { background: var(--amber); }
        .map-inc-dot.sev-medium   { background: var(--cyan); }
        .map-inc-dot.sev-low      { background: var(--green); }
        .map-inc-title { font-size: 12px; font-weight: 600; color: #c8e0f5; line-height: 1.3; }
        .map-inc-meta  { font-size: 10px; color: var(--muted); margin-top: 2px; }

        /* Legend strip */
        .map-legend-strip {
            display: flex; align-items: center; gap: 14px;
            padding-top: 10px; flex-wrap: wrap;
        }
        .legend-item { display: flex; align-items: center; gap: 6px; color: #9ab8cc; font-size: 11px; }
        .legend-dot { width: 9px; height: 9px; border-radius: 50%; }
        .legend-dot.critical { background: var(--red); box-shadow: 0 0 5px var(--red); }
        .legend-dot.high     { background: var(--amber); }
        .legend-dot.medium   { background: var(--cyan); }
        .legend-dot.low      { background: var(--green); }
        .legend-dot.state    { background: transparent; border: 2px solid rgba(35,184,255,.7); border-radius: 50%; }
        .map-legend-spacer   { flex: 1; }

        /* ─── Sidebar incident rows: click-to-zoom ─── */
        .map-inc-clickable {
            cursor: pointer;
            border-radius: 6px;
            border: 1px solid transparent;
            transition: background .15s, border-color .15s;
            padding: 6px 8px;
            margin: 1px 0;
        }
        .map-inc-clickable:hover {
            background: rgba(35, 184, 255, .07);
            border-color: rgba(35, 184, 255, .18);
        }
        .map-inc-active {
            background: rgba(35, 184, 255, .13) !important;
            border-color: rgba(35, 184, 255, .45) !important;
            border-left: 2px solid var(--cyan) !important;
        }

        /* ─── Reset View Leaflet control ─── */
        .lf-reset-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 80px;
            height: 26px;
            background: rgba(5, 20, 38, .92);
            border: 1px solid rgba(42, 159, 225, .35);
            color: #8dd8ff;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .04em;
            cursor: pointer;
            border-radius: 4px;
            margin-top: 4px;
            padding: 0 8px;
            transition: background .15s, color .15s;
        }
        .lf-reset-btn:hover { background: rgba(35, 184, 255, .2); color: #fff; }

        .fullscreen-btn {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 4px 10px;
            border: 1px solid rgba(42,159,225,.3); border-radius: 5px;
            background: rgba(35,184,255,.08); color: #8dd8ff;
            cursor: pointer; font-size: 11px; font-weight: 600;
            transition: background .2s;
        }
        .fullscreen-btn:hover { background: rgba(35,184,255,.18); }

        /* ─── Fullscreen: show map + sidebar together ─── */
        #mapLayout:fullscreen,
        #mapLayout:-webkit-full-screen {
            background: #030c18;
            grid-template-columns: 1fr 300px;
            gap: 0;
            width: 100vw;
            height: 100vh;
        }
        #mapLayout:fullscreen #mapStage,
        #mapLayout:-webkit-full-screen #mapStage {
            min-height: 0;
            height: 100%;
            border-radius: 0;
            border: none;
            border-right: 1px solid rgba(42,159,225,.22);
        }
        #mapLayout:fullscreen #leafletMap,
        #mapLayout:-webkit-full-screen #leafletMap {
            min-height: 0;
            height: 100%;
            border-radius: 0;
        }
        #mapLayout:fullscreen .map-sidebar,
        #mapLayout:-webkit-full-screen .map-sidebar {
            height: 100%;
            max-height: 100%;
            border-radius: 0;
            border: none;
        }
        #mapLayout:fullscreen .map-sidebar-body,
        #mapLayout:-webkit-full-screen .map-sidebar-body {
            max-height: calc(100vh - 48px);
        }

        .states-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }

        .state-card {
            padding: 11px;
            min-height: 112px;
        }

        .state-card header {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            align-items: flex-start;
        }

        .state-card h4 {
            margin: 0;
            font-size: 13px;
            line-height: 1.25;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            min-width: 0;
        }

        .state-dot {
            flex: 0 0 auto;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 1px solid currentColor;
        }

        .state-meta {
            display: flex;
            gap: 8px;
            margin: 8px 0;
            color: var(--muted);
            font-size: 12px;
            flex-wrap: wrap;
        }

        .bar {
            height: 7px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255, 255, 255, .08);
        }

        .bar span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--cyan), var(--green));
        }

        .split-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            align-items: center;
        }

        .donut {
            display: grid;
            place-items: center;
            width: 104px;
            height: 104px;
            margin: 0 auto;
            border-radius: 50%;
            background: conic-gradient(var(--green) 0deg, var(--green) var(--donut), var(--amber) var(--donut), var(--amber) 320deg, rgba(255, 255, 255, .1) 320deg 360deg);
        }

        .donut span {
            display: grid;
            place-items: center;
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: #051422;
            font-weight: 900;
        }

        .alert-list,
        .insight-list {
            display: grid;
            gap: 7px;
        }

        .alert-row {
            display: grid;
            grid-template-columns: 76px 54px 1fr;
            gap: 10px;
            align-items: center;
            padding: 7px 9px;
            min-height: 38px;
        }

        .priority {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 24px;
            border-radius: 4px;
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            text-transform: capitalize;
        }

        .priority-critical {
            background: #c71919;
        }

        .priority-high {
            background: #c06f00;
        }

        .priority-medium {
            background: #1d8c4e;
        }

        .priority-low {
            background: #126432;
        }

        .alert-time {
            color: var(--muted);
            font-size: 12px;
        }

        .alert-title {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 13px;
        }

        .insight-row {
            display: grid;
            grid-template-columns: 10px 1fr;
            gap: 10px;
            padding: 9px;
        }

        .insight-dot {
            width: 8px;
            height: 8px;
            margin-top: 5px;
            border-radius: 50%;
            background: var(--cyan);
            box-shadow: 0 0 12px currentColor;
        }

        .insight-row strong {
            display: block;
            margin-bottom: 3px;
            font-size: 13px;
        }

        .insight-row span {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
        }

        .statusbar {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 16px;
            align-items: center;
            min-height: 48px;
            margin-top: 8px;
            padding: 10px 16px;
            color: var(--muted);
            font-size: 13px;
        }

        .statusbar strong {
            color: var(--green);
        }

        .status-right {
            text-align: right;
        }

        .loader {
            position: absolute;
            inset: 0;
            z-index: 15;
            display: none;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: rgba(2, 8, 17, .62);
            backdrop-filter: blur(3px);
            color: var(--text);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .loader::before {
            content: "";
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, .18);
            border-top-color: var(--cyan);
            animation: spin .8s linear infinite;
        }

        [data-section].is-loading .loader {
            display: flex;
        }

        .error-banner {
            display: none;
            margin-top: 8px;
            padding: 10px 12px;
            border: 1px solid rgba(255, 85, 74, .48);
            border-radius: var(--radius);
            background: rgba(255, 85, 74, .13);
            color: #ffd6d3;
        }

        .empty {
            padding: 18px;
            color: var(--muted);
            text-align: center;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        @media (max-width: 1600px) {
            .topbar {
                grid-template-columns: 200px 170px 1fr 130px 180px;
            }

            .readiness {
                width: 72px;
                height: 72px;
            }

            .readiness span {
                width: 52px;
                height: 52px;
                font-size: 17px;
            }
        }

        @media (max-width: 1280px) {
            .topbar {
                grid-template-columns: 180px 155px 1fr 120px 165px;
                gap: 0;
            }
            .hk-label, .ha-label, .hr-label { font-size: 8px; }
            .hk-val { font-size: 17px; }
            .hk-icon { width: 32px; height: 32px; }
            .brand-country { font-size: 14px; }
            .crest-ring { width: 48px; height: 48px; }
            .readiness { width: 64px; height: 64px; }
            .readiness span { width: 46px; height: 46px; font-size: 14px; }

            .dashboard-grid,
            .lower-grid,
            .bottom-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .map-panel {
                grid-column: 1 / -1;
                order: -1;
            }
        }

        /* ─── Full-HD PC (1920px) – scrollable, no scaling ─── */
        @media (min-width: 1920px) {
            .dashboard-shell { padding: 10px; }
            .topbar { grid-template-columns: 250px 200px 1fr 152px 210px; }
            .loader { font-size: 15px; gap: 12px; }
            .loader::before { width: 32px; height: 32px; border-width: 4px; }
            .hk-val { font-size: 28px; }
            .hc-time { font-size: 30px; }
            .readiness { width: 86px; height: 86px; }
            .readiness span { width: 62px; height: 62px; font-size: 20px; }
            .metric-val { font-size: 21px; }
            .metric-icon { width: 38px; height: 38px; }
            .metric-icon svg { width: 19px; height: 19px; }
            .panel { padding: 12px; }
            .map-panel { min-height: 440px; }
            .map-stage { min-height: 380px; }
            .states-grid { gap: 7px; }
            .alert-row { padding: 6px 10px; }
        }

        /* ─── Large TV / 4K (2560px+) – content scales via JS applyTvScale() ─── */
        @media (min-width: 2560px) {
            .dashboard-shell {
                max-width: none;
                padding: 10px;
            }
            .loader { font-size: 18px; gap: 14px; }
            .loader::before { width: 40px; height: 40px; border-width: 5px; }
            .topbar, .panel, .statusbar { border-width: 2px; }
            .panel-title  { font-size: 13px; }
            .metric-val   { font-size: 22px; }
            .metric-label { font-size: 11px; }
            .metric-icon  { width: 40px; height: 40px; }
            .metric-icon svg { width: 20px; height: 20px; }
            .map-stage    { min-height: 560px; }
            .hk-val       { font-size: 32px; }
            .hc-time      { font-size: 36px; }
        }

        @media (max-width: 900px) {
            .dashboard-shell { padding: 6px; }

            /* Stack topbar: brand+alert on row1, kpis spans row2, readiness+clock on row3 */
            .topbar {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto auto auto;
            }
            .header-brand    { grid-column: 1; grid-row: 1; }
            .header-alert    { grid-column: 2; grid-row: 1; border-left: none; }
            .header-kpis     { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, 1fr); }
            .header-readiness{ grid-column: 1; grid-row: 3; }
            .header-clock    { grid-column: 2; grid-row: 3; }

            .dashboard-grid,
            .lower-grid,
            .bottom-grid,
            .split-panel {
                grid-template-columns: 1fr;
            }

            .metric-grid,
            .metric-grid.compact,
            .metric-grid.three,
            .states-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .map-stage { min-height: 280px; }
            .map-layout { grid-template-columns: 1fr; }
            .map-sidebar { max-height: 180px; }

            .statusbar,
            .alert-row { grid-template-columns: 1fr; }

            .status-right { text-align: left; }
        }

        @media (max-width: 560px) {
            .kpi-row,
            .metric-grid,
            .metric-grid.compact,
            .metric-grid.three,
            .states-grid {
                grid-template-columns: 1fr;
            }

            .metric-card.wide {
                grid-column: span 1;
            }

            .title {
                text-align: left;
            }

            .title p {
                max-width: 29ch;
            }

            .map-layout { grid-template-columns: 1fr; }
            .map-sidebar { max-height: 200px; }
            .fullscreen-btn { display: none; }
        }
        /* ═══════════════════════════════════════════════════
           VISUAL POLISH — Enhanced Dashboard Styling
           ═══════════════════════════════════════════════════ */

        /* Panel top glow accent line */
        .panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 12%;
            right: 12%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(35, 184, 255, .52), transparent);
        }

        /* Panel header bottom separator */
        .panel-header {
            border-bottom: 1px solid rgba(42, 159, 225, .16);
            padding-bottom: 8px;
        }

        /* Metric card colored left accent borders */
        .metric-card.color-green { border-left: 3px solid rgba(100, 223, 117, .62); }
        .metric-card.color-amber { border-left: 3px solid rgba(255, 181, 47, .62); }
        .metric-card.color-red   { border-left: 3px solid rgba(255, 85, 74, .62); }
        .metric-card.color-blue  { border-left: 3px solid rgba(35, 184, 255, .62); }

        /* State card status left borders */
        .state-card.state-critical { border-left: 3px solid rgba(255, 85, 74, .8);   background: rgba(255, 85, 74, .04); }
        .state-card.state-warning  { border-left: 3px solid rgba(255, 181, 47, .8);  background: rgba(255, 181, 47, .04); }
        .state-card.state-watch    { border-left: 3px solid rgba(35, 184, 255, .58); }
        .state-card.state-normal   { border-left: 3px solid rgba(100, 223, 117, .62); }

        /* Alert row priority left borders */
        .alert-row:has(.priority-critical) { border-left: 3px solid rgba(255, 85, 74, .85);  background: rgba(255, 85, 74, .05); }
        .alert-row:has(.priority-high)     { border-left: 3px solid rgba(255, 181, 47, .75); background: rgba(255, 181, 47, .04); }
        .alert-row:has(.priority-medium)   { border-left: 3px solid rgba(35, 184, 255, .62); }
        .alert-row:has(.priority-low)      { border-left: 3px solid rgba(100, 223, 117, .55); }

        /* Insight row impact-level left borders & colored dots */
        .insight-row.impact-critical { border-left: 3px solid rgba(255, 85, 74, .75);  background: rgba(255, 85, 74, .04); }
        .insight-row.impact-high     { border-left: 3px solid rgba(255, 181, 47, .7);  background: rgba(255, 181, 47, .04); }
        .insight-row.impact-medium   { border-left: 3px solid rgba(35, 184, 255, .6); }
        .insight-row.impact-low      { border-left: 3px solid rgba(100, 223, 117, .55); }
        .insight-row.impact-critical .insight-dot { background: var(--red);   box-shadow: 0 0 10px var(--red); }
        .insight-row.impact-high     .insight-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
        .insight-row.impact-medium   .insight-dot { background: var(--cyan);  box-shadow: 0 0 10px var(--cyan); }
        .insight-row.impact-low      .insight-dot { background: var(--green); box-shadow: 0 0 10px var(--green); }

        /* KPI summary number glows */
        .kpi:nth-child(2) strong { text-shadow: 0 0 18px rgba(255, 181, 47, .5); }
        .kpi:nth-child(3) strong { text-shadow: 0 0 18px rgba(100, 223, 117, .5); }
        .kpi:nth-child(4) strong { text-shadow: 0 0 18px rgba(255, 85, 74, .5); }

        /* Threat card critical pulse */
        @keyframes pulse-threat {
            0%, 100% { border-color: rgba(255, 85, 74, .55); }
            50%       { border-color: rgba(255, 85, 74, .9); box-shadow: inset 0 0 22px rgba(255, 85, 74, .1); }
        }
        .threat-card { animation: pulse-threat 2.8s ease-in-out infinite; }

        /* Critical state dot blink */
        @keyframes blink-dot {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0.28; }
        }
        .state-critical .state-dot { animation: blink-dot 1.4s ease-in-out infinite; }

        /* Metric name — uppercase data labels */
        .metric-name {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        /* Metric value subtle glow by color */
        .color-green .metric-value { text-shadow: 0 0 14px rgba(100, 223, 117, .3); }
        .color-red   .metric-value { text-shadow: 0 0 14px rgba(255, 85, 74, .3); }
        .color-amber .metric-value { text-shadow: 0 0 14px rgba(255, 181, 47, .24); }

        /* Tabular numbers for consistent alignment */
        .metric-value, .kpi strong { font-variant-numeric: tabular-nums; }

        /* Readiness gauge enhanced glow */
        .readiness {
            box-shadow: 0 0 42px rgba(100, 223, 117, .34), 0 0 0 3px rgba(100, 223, 117, .1);
        }

        /* Seal enhanced glow */
        .seal {
            box-shadow: 0 0 0 5px rgba(246, 204, 87, .12), 0 0 32px rgba(35, 184, 255, .44), 0 0 0 14px rgba(246, 204, 87, .05);
        }

        /* Map legend frosted glass */
        .map-legend { backdrop-filter: blur(8px); }

        /* State map labels — subtle border */
        .state-label { border: 1px solid rgba(35, 184, 255, .3); }

        /* Priority badge refined */
        .priority { padding: 0 8px; font-size: 10px; letter-spacing: 0.06em; }

        /* Status bar message */
        .statusbar strong { letter-spacing: 0.06em; font-size: 14px; }

        /* ─── Platform Arabic title ─── */
        .platform-ar {
            font-size: clamp(13px, 1vw, 17px);
            font-weight: 900;
            letter-spacing: 0.12em;
            color: rgba(246, 204, 87, .82);
            text-shadow: 0 0 20px rgba(246, 204, 87, .3);
        }

        /* ─── Mode switcher ─── */
        .mode-switcher {
            display: flex;
            justify-content: flex-end;
            gap: 3px;
            margin-top: 5px;
            flex-wrap: wrap;
        }

        .mode-btn {
            min-height: 22px;
            padding: 0 10px;
            border: 1px solid rgba(42, 159, 225, .26);
            border-radius: 4px;
            background: rgba(4, 17, 29, .5);
            color: var(--muted);
            font: inherit;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s;
        }

        .mode-btn:hover { color: var(--text); border-color: rgba(35, 184, 255, .5); }
        .mode-btn.active { background: rgba(35, 184, 255, .16); border-color: rgba(35, 184, 255, .55); color: var(--cyan); }
        .mode-btn.mode-crisis { border-color: rgba(255, 85, 74, .28); }
        .mode-btn.mode-crisis.active { background: rgba(255, 85, 74, .14); border-color: rgba(255, 85, 74, .6); color: var(--red); }

        /* ─── National readiness sub-label ─── */
        .national-score { font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; letter-spacing: 0.04em; text-transform: uppercase; }
        .national-score strong { color: var(--cyan); font-size: 12px; }

        /* ─── Classification banner ─── */
        .classification-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            height: 22px;
            margin-top: 6px;
            padding: 0 14px;
            border: 1px solid rgba(255, 181, 47, .28);
            border-radius: 4px;
            background: rgba(255, 181, 47, .04);
            color: rgba(255, 181, 47, .65);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        /* ─── Secondary grid (new modules row) ─── */
        .secondary-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            margin-top: 8px;
        }

        /* ─── AI full row + Agency full row ─── */
        .ai-full-row, .agency-full-row {
            margin-top: 8px;
        }

        /* AI Slider */
        .ai-slider-wrapper {
            position: relative;
            display: flex;
            align-items: stretch;
            gap: 6px;
            flex: 1;
            min-height: 0;
        }

        .ai-nav-btn {
            flex-shrink: 0;
            width: 30px;
            background: rgba(35,184,255,.06);
            border: 1px solid rgba(42,159,225,.2);
            border-radius: 6px;
            color: var(--cyan);
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            transition: background .2s, border-color .2s;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        .ai-nav-btn:hover:not(:disabled) {
            background: rgba(35,184,255,.15);
            border-color: rgba(42,159,225,.5);
        }
        .ai-nav-btn:disabled { opacity: 0.25; cursor: default; }

        .ai-slider-container {
            flex: 1;
            overflow: hidden;
            min-width: 0;
        }

        .ai-slider-track {
            display: flex;
            gap: 10px;
            align-items: stretch;
            transition: transform 0.42s cubic-bezier(0.4,0,0.2,1);
        }

        .ai-slide {
            flex: 0 0 calc(33.333% - 7px);
            min-width: 0;
        }

        .ai-slider-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 8px;
        }

        .ai-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(42,159,225,.22);
            cursor: pointer;
            transition: background .2s, transform .2s;
            border: none;
            padding: 0;
            flex-shrink: 0;
        }
        .ai-dot.active {
            background: var(--cyan);
            transform: scale(1.4);
        }

        .ai-page-counter {
            font-size: 10px;
            font-weight: 700;
            color: var(--muted);
            letter-spacing: 0.04em;
            margin: 0 4px;
            font-variant-numeric: tabular-nums;
        }

        /* ─── Humanitarian items ─── */
        .humanitarian-sub-title {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--muted);
            margin: 0 0 5px;
            padding-bottom: 4px;
            border-bottom: 1px solid rgba(42, 159, 225, .14);
        }

        .humanitarian-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 6px;
            padding: 5px 8px;
            margin-bottom: 4px;
            border: 1px solid rgba(42, 159, 225, .18);
            border-radius: 5px;
            background: rgba(3, 18, 31, .72);
        }

        .humanitarian-item.color-green { border-left: 3px solid rgba(100, 223, 117, .62); }
        .humanitarian-item.color-amber { border-left: 3px solid rgba(255, 181, 47, .62); }
        .humanitarian-item.color-red   { border-left: 3px solid rgba(255, 85, 74, .62); }
        .humanitarian-item.color-blue  { border-left: 3px solid rgba(35, 184, 255, .62); }

        .humanitarian-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); flex: 1; min-width: 0; }
        .humanitarian-value { font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
        .humanitarian-unit  { font-size: 10px; font-weight: 600; color: var(--muted); }
        .humanitarian-change { font-size: 11px; color: var(--muted); white-space: nowrap; }
        .humanitarian-change.dir-up   { color: var(--red); }
        .humanitarian-change.dir-down { color: var(--green); }

        /* ─── AI Prediction cards ─── */
        .ai-list { display: grid; gap: 6px; }

        .ai-card {
            border: 1px solid rgba(42, 159, 225, .2);
            border-radius: var(--radius);
            background: rgba(3, 18, 31, .72);
            padding: 8px 10px;
        }

        .ai-card.risk-critical { border-left: 3px solid rgba(255, 85, 74, .82); background: rgba(255, 85, 74, .04); }
        .ai-card.risk-high     { border-left: 3px solid rgba(255, 181, 47, .75); background: rgba(255, 181, 47, .04); }
        .ai-card.risk-medium   { border-left: 3px solid rgba(35, 184, 255, .6); }
        .ai-card.risk-low      { border-left: 3px solid rgba(100, 223, 117, .55); }

        .ai-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 4px; }
        .ai-sector { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--violet); }
        .ai-confidence { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; }
        .ai-conf-bar { width: 36px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
        .ai-conf-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
        .ai-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
        .ai-body  { font-size: 11px; color: var(--muted); line-height: 1.4; }
        .ai-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
        .ai-horizon { font-size: 10px; font-weight: 700; color: var(--violet); }
        .ai-category-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 5px; border-radius: 3px; background: rgba(155, 140, 255, .14); color: var(--violet); }

        /* ─── Agency Status grid ─── */
        .agency-summary-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
            margin-bottom: 8px;
            padding: 7px 10px;
            border: 1px solid rgba(42, 159, 225, .18);
            border-radius: var(--radius);
            background: rgba(4, 17, 29, .5);
        }

        .agency-sum-item { text-align: center; }
        .agency-sum-item strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
        .agency-sum-item span { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

        .agency-cards-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 5px;
        }

        .agency-card {
            border: 1px solid rgba(42, 159, 225, .2);
            border-radius: 5px;
            background: rgba(3, 18, 31, .72);
            padding: 6px 7px;
        }

        .agency-card.status-active       { border-left: 3px solid rgba(100, 223, 117, .72); }
        .agency-card.status-standby      { border-left: 3px solid rgba(255, 181, 47, .72); }
        .agency-card.status-coordinating { border-left: 3px solid rgba(35, 184, 255, .72); }
        .agency-card.status-offline      { border-left: 3px solid rgba(255, 85, 74, .72); background: rgba(255, 85, 74, .04); }

        .agency-short { font-size: 11px; font-weight: 900; color: var(--cyan); letter-spacing: 0.04em; }
        .agency-name-text { font-size: 9px; color: var(--muted); line-height: 1.3; margin-top: 1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
        .agency-row { display: flex; justify-content: space-between; align-items: center; gap: 3px; margin-top: 4px; }
        .agency-badge { font-size: 8px; font-weight: 700; text-transform: uppercase; padding: 1px 4px; border-radius: 2px; letter-spacing: 0.04em; }
        .badge-active       { background: rgba(100, 223, 117, .14); color: var(--green); }
        .badge-standby      { background: rgba(255, 181, 47, .14); color: var(--amber); }
        .badge-coordinating { background: rgba(35, 184, 255, .14); color: var(--cyan); }
        .badge-offline      { background: rgba(255, 85, 74, .14); color: var(--red); }
        .agency-readiness { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
        .agency-sync { font-size: 9px; font-weight: 700; margin-top: 2px; }
        .sync-synced  { color: var(--green); }
        .sync-delayed { color: var(--amber); }
        .sync-offline { color: var(--red); }

        /* ─── Dashboard modes ─── */
        body.mode-executive .secondary-grid,
        body.mode-executive .ai-full-row,
        body.mode-executive .agency-full-row { display: none; }

        body.mode-crisis { background: radial-gradient(circle at 50% 0%, rgba(255,85,74,.08), transparent 40rem), radial-gradient(circle at 20% 0%, rgba(35,184,255,.11), transparent 28rem), linear-gradient(145deg, #040508 0%, #0d0406 54%, #0a0308 100%); }
        body.mode-crisis .topbar, body.mode-crisis .panel, body.mode-crisis .statusbar { border-color: rgba(255, 85, 74, .3); }
        body.mode-crisis .threat-card { border-color: rgba(255, 85, 74, .85); background: linear-gradient(135deg, rgba(255,85,74,.25), rgba(58,12,19,.8)); }

        /* Analytics mode — violet-tinted, highlights AI & intel sections */
        body.mode-analytics {
            background: radial-gradient(circle at 50% 0%, rgba(155,140,255,.09), transparent 38rem),
                        radial-gradient(circle at 20% 0%, rgba(35,184,255,.08), transparent 28rem),
                        linear-gradient(145deg, #040508 0%, #04111d 54%, #06051a 100%);
        }
        body.mode-analytics .topbar,
        body.mode-analytics .panel,
        body.mode-analytics .statusbar { border-color: rgba(155, 140, 255, .28); }
        body.mode-analytics .ai-full-row .panel { border-color: rgba(155,140,255,.55); box-shadow: 0 0 20px rgba(155,140,255,.1); }
        body.mode-analytics .agency-full-row .panel { border-color: rgba(155,140,255,.4); }
        body.mode-analytics .panel-title { color: #c8beff; }
        /* In analytics mode hide operational clutter, keep intel/ai/agencies */
        body.mode-analytics .dashboard-grid,
        body.mode-analytics .lower-grid,
        body.mode-analytics .secondary-grid { opacity: 0.55; }
        body.mode-analytics .ai-full-row,
        body.mode-analytics .agency-full-row { opacity: 1; }

        /* ─── Media query additions ─── */
        @media (max-width: 1280px) {
            .secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .ai-slide { flex: 0 0 calc(50% - 5px); }
            .agency-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        }

        @media (max-width: 900px) {
            .secondary-grid { grid-template-columns: 1fr; }
            .ai-slide { flex: 0 0 100%; }
            .agency-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }