:root {

    --bg-0: #111111;
    --bg-1: #171717;
    --bg-2: #232323;
    --card-bg: rgba(28, 28, 30, 0.96);
    --card-border: rgba(163, 163, 163, 0.14);
    --text-main: #f3f4f6;
    --text-muted: #a3a3a3;
    --accent: #8b8b8b;
    --accent-2: #c7c7c7;
    --success: #28c76f;
    --warning: #ff9f43;
    --danger: #ea5455;
}

body {
    background: #0b0b0c;
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* ── Animated background layer ── */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 26%),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.03), transparent 22%),
        linear-gradient(180deg, #111111 0%, #171717 40%, #0b0b0c 100%);
}

/* Floating gradient orbs */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(600px circle at var(--orb1-x, 15%) var(--orb1-y, 20%),
            rgba(124, 92, 255, 0.045), transparent 60%),
        radial-gradient(500px circle at var(--orb2-x, 80%) var(--orb2-y, 30%),
            rgba(234, 84, 85, 0.035), transparent 60%),
        radial-gradient(450px circle at var(--orb3-x, 50%) var(--orb3-y, 75%),
            rgba(43, 214, 123, 0.03), transparent 60%);
    animation: orbDrift 25s ease-in-out infinite alternate;
}

@keyframes orbDrift {
    0% {
        --orb1-x: 15%; --orb1-y: 20%;
        --orb2-x: 80%; --orb2-y: 30%;
        --orb3-x: 50%; --orb3-y: 75%;
    }
    33% {
        --orb1-x: 30%; --orb1-y: 35%;
        --orb2-x: 65%; --orb2-y: 55%;
        --orb3-x: 20%; --orb3-y: 60%;
    }
    66% {
        --orb1-x: 55%; --orb1-y: 15%;
        --orb2-x: 85%; --orb2-y: 70%;
        --orb3-x: 40%; --orb3-y: 85%;
    }
    100% {
        --orb1-x: 25%; --orb1-y: 45%;
        --orb2-x: 70%; --orb2-y: 20%;
        --orb3-x: 60%; --orb3-y: 65%;
    }
}

/* Animated floating particles layer */
.app-shell {
    max-width: 1600px;
    position: relative;
}

.app-shell::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 10% 15%, rgba(255,255,255,0.10) 50%, transparent 50%),
        radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.07) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 45% 10%, rgba(255,255,255,0.08) 50%, transparent 50%),
        radial-gradient(1px 1px at 60% 55%, rgba(255,255,255,0.06) 50%, transparent 50%),
        radial-gradient(2px 2px at 75% 25%, rgba(255,255,255,0.09) 50%, transparent 50%),
        radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,0.07) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 35% 80%, rgba(255,255,255,0.06) 50%, transparent 50%),
        radial-gradient(1px 1px at 90% 45%, rgba(255,255,255,0.08) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 20% 65%, rgba(255,255,255,0.05) 50%, transparent 50%),
        radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.07) 50%, transparent 50%),
        radial-gradient(2px 2px at 5% 50%, rgba(255,255,255,0.06) 50%, transparent 50%),
        radial-gradient(1px 1px at 70% 85%, rgba(255,255,255,0.05) 50%, transparent 50%);
    animation: particleFloat 40s linear infinite;
}

@keyframes particleFloat {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-60px); }
}

/* Scan line effect — very subtle horizontal sweep */
.app-shell::after {
    content: "";
    position: fixed;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(124, 92, 255, 0.015) 40%,
        rgba(124, 92, 255, 0.025) 50%,
        rgba(124, 92, 255, 0.015) 60%,
        transparent 100%
    );
    animation: scanSweep 12s ease-in-out infinite;
}

@keyframes scanSweep {
    0%   { left: -50%; }
    100% { left: 150%; }
}

/* Site header with logo */
.site-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 8px 12px 4px;
}

.site-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}

.site-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.site-title {
    color: #fafafa;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-subtitle {
    color: #a3a3a3;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* Share button */
.share-wrapper {
    position: relative;
    flex-shrink: 0;
}

.share-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #e5e7eb;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
    white-space: nowrap;
}

.share-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fafafa;
}

.share-toast {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: rgba(40, 199, 111, 0.92);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 280ms ease, transform 280ms ease;
    pointer-events: none;
    z-index: 100;
}

.hero-panel {
    background: linear-gradient(135deg, rgba(38, 38, 40, 0.98), rgba(20, 20, 22, 0.98));
    border: 1px solid rgba(163, 163, 163, 0.12);
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
}

/* Hero panel shimmer border */
.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(124, 92, 255, 0.0),
        rgba(124, 92, 255, 0.12),
        rgba(43, 214, 123, 0.08),
        rgba(124, 92, 255, 0.0)
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: shimmerBorder 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmerBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.eyebrow-text {
    color: #c5c5c5;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b9ffd7;
    background: rgba(43, 214, 123, 0.14);
    border: 1px solid rgba(43, 214, 123, 0.28);
    animation: pillPulse 3s ease-in-out infinite;
}

@keyframes pillPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(43, 214, 123, 0); }
    50%      { box-shadow: 0 0 12px 2px rgba(43, 214, 123, 0.12); }
}

.status-pill-alt {
    color: #ebebeb;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    animation: none;
}

.hero-title {
    color: #fafafa;
    font-size: clamp(2rem, 3vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.hero-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.hero-metric {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(163, 163, 163, 0.10);
    border-radius: 18px;
    padding: 0.95rem 1rem;
}

.hero-metric-label {
    color: #a3a3a3;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12rem;
}

.hero-metric-value {
    color: #f5f5f5;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0.3rem;
}

.hero-subtitle,
.section-subtitle,
.footer-note,
.text-muted {
    color: var(--text-muted) !important;
}

.glass-card.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    overflow: hidden;
    transition: border-color 300ms ease, box-shadow 300ms ease;
}

.glass-card.card:hover {
    border-color: rgba(163, 163, 163, 0.22);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.glass-card .card-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(163, 163, 163, 0.10);
    padding: 0.95rem 1.1rem;
    position: relative;
    color: #f5f5f5;
}

.glass-card .card-header::after {
    content: "";
    position: absolute;
    inset: auto 1.25rem 0.6rem 1.25rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0.10), rgba(255,255,255,0));
}

#world-map,
#conflict-map {
    overflow: hidden;
    border-radius: 13px;
    background: #101318;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

#world-map .maplibregl-canvas,
#conflict-map .maplibregl-canvas {
    filter: saturate(0.82) contrast(1.06);
}

.card-header-stack {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    color: #f5f5f5;
}

.glass-card .card-body {
    background: transparent;
}

.stat-card {
    position: relative;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    animation: cardFadeIn 0.6s ease both;
    isolation: isolate;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    opacity: 0.88;
    pointer-events: none;
    z-index: 0;
}

.stat-card .card-body {
    position: relative;
    z-index: 1;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36), 0 0 24px rgba(141, 141, 150, 0.10);
    border-color: rgba(201, 201, 209, 0.18);
}

/* Staggered fade-in for KPI cards */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.g-3 > [class*="col-"]:nth-child(1) .stat-card { animation-delay: 0.05s; }
.g-3 > [class*="col-"]:nth-child(2) .stat-card { animation-delay: 0.12s; }
.g-3 > [class*="col-"]:nth-child(3) .stat-card { animation-delay: 0.19s; }
.g-3 > [class*="col-"]:nth-child(4) .stat-card { animation-delay: 0.26s; }

.kpi-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 210px;
}

.stat-card-accent {
    width: 54px;
    height: 4px;
    border-radius: 999px;
    margin-bottom: 0.3rem;
    background: linear-gradient(90deg, rgba(255,255,255,0.88), rgba(255,255,255,0.18));
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
}

.stat-card-title {
    color: rgba(244, 244, 245, 0.82);
}

.stat-card-value {
    color: #fcfcfd;
    letter-spacing: -0.03em;
}

.stat-card--primary::before {
    background:
        radial-gradient(circle at top right, rgba(82, 168, 255, 0.26), transparent 34%),
        linear-gradient(145deg, rgba(21, 54, 86, 0.78), rgba(15, 23, 42, 0.92));
}

.stat-card--info::before {
    background:
        radial-gradient(circle at top right, rgba(86, 201, 255, 0.28), transparent 34%),
        linear-gradient(145deg, rgba(18, 71, 94, 0.78), rgba(13, 29, 43, 0.92));
}

.stat-card--success::before {
    background:
        radial-gradient(circle at top right, rgba(77, 224, 154, 0.26), transparent 34%),
        linear-gradient(145deg, rgba(17, 74, 52, 0.78), rgba(12, 34, 26, 0.92));
}

.stat-card--warning::before {
    background:
        radial-gradient(circle at top right, rgba(255, 200, 87, 0.28), transparent 34%),
        linear-gradient(145deg, rgba(97, 58, 14, 0.82), rgba(40, 25, 10, 0.94));
}

.stat-card--danger::before {
    background:
        radial-gradient(circle at top right, rgba(255, 109, 109, 0.28), transparent 34%),
        linear-gradient(145deg, rgba(92, 22, 34, 0.80), rgba(38, 11, 20, 0.94));
}

.stat-card--secondary::before {
    background:
        radial-gradient(circle at top right, rgba(175, 184, 193, 0.22), transparent 34%),
        linear-gradient(145deg, rgba(52, 60, 75, 0.80), rgba(18, 22, 31, 0.94));
}

.stat-card--primary .stat-card-accent,
.stat-card--info .stat-card-accent {
    background: linear-gradient(90deg, #8bd3ff, rgba(139, 211, 255, 0.18));
    box-shadow: 0 0 18px rgba(139, 211, 255, 0.22);
}

.stat-card--success .stat-card-accent {
    background: linear-gradient(90deg, #72f0b1, rgba(114, 240, 177, 0.16));
    box-shadow: 0 0 18px rgba(114, 240, 177, 0.22);
}

.stat-card--warning .stat-card-accent {
    background: linear-gradient(90deg, #ffd27a, rgba(255, 210, 122, 0.14));
    box-shadow: 0 0 18px rgba(255, 210, 122, 0.20);
}

.stat-card--danger .stat-card-accent {
    background: linear-gradient(90deg, #ff9a9a, rgba(255, 154, 154, 0.14));
    box-shadow: 0 0 18px rgba(255, 154, 154, 0.20);
}

.stat-card--secondary .stat-card-accent {
    background: linear-gradient(90deg, #d2d8e1, rgba(210, 216, 225, 0.14));
    box-shadow: 0 0 18px rgba(210, 216, 225, 0.18);
}

.kpi-card-body h3,
.kpi-card-body p,
.kpi-card-body small {
    overflow-wrap: anywhere;
}

.chart-header-title {
    letter-spacing: 0.01em;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.08);
    line-height: 1.2;
    color: #f5f5f5 !important;
}

.kpi-sparkline {
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.005));
}

.section-title {
    color: #f1f1f1 !important;
    font-weight: 700;
}

.glass-card .card-header h5,
.glass-card .card-header h6,
.glass-card .card-header .section-title,
.glass-card .card-header .chart-header-title {
    color: #f5f5f5 !important;
    opacity: 1 !important;
}

.glass-card .card-header small,
.glass-card .card-header .text-muted {
    color: #cfcfd4 !important;
    opacity: 1 !important;
}

.conflict-feed-alert,
.future-conflict-alert {
    color: #f3f4f6 !important;
}

.conflict-feed-alert {
    background: rgba(22, 24, 30, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

.future-conflict-alert {
    background: rgba(70, 44, 10, 0.28) !important;
    border-color: rgba(255, 159, 67, 0.28) !important;
}

.conflict-feed-title,
.future-conflict-title {
    color: #fafafa !important;
    font-weight: 700;
}

.conflict-feed-meta,
.conflict-feed-metrics,
.future-conflict-meta,
.future-conflict-metrics {
    color: #d1d5db !important;
}

.conflict-feed-summary,
.future-conflict-summary {
    color: #f3f4f6 !important;
    line-height: 1.55;
}

.conflict-feed-link,
.future-conflict-link {
    color: #8ab4ff !important;
    font-weight: 600;
}

.conflict-feed-link:hover,
.future-conflict-link:hover {
    color: #bfd4ff !important;
}

.control-label {
    color: #d4d4d8;
    font-size: 0.76rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.55rem;
}

.disease-note {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    color: #e5e7eb;
    padding: 14px 16px;
    font-size: 0.95rem;
}

.top-level-tabs {
    background: transparent;
}

.top-level-tabs .tab {
    background: rgba(24, 24, 27, 0.84) !important;
    color: #d4d4d8 !important;
    border: 1px solid rgba(163, 163, 163, 0.14) !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 14px 22px !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.top-level-tabs .tab:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #f0f0f0 !important;
}

.top-level-tabs .tab--selected,
.top-level-tab--selected {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
    color: #f5f5f5 !important;
    border-bottom-color: rgba(124, 92, 255, 0.65) !important;
    box-shadow: inset 0 -2px 0 rgba(124, 92, 255, 0.72), 0 0 16px rgba(124, 92, 255, 0.08);
    animation: tabGlow 4s ease-in-out infinite;
}

@keyframes tabGlow {
    0%, 100% { box-shadow: inset 0 -2px 0 rgba(124, 92, 255, 0.72), 0 0 12px rgba(124, 92, 255, 0.06); }
    50%      { box-shadow: inset 0 -2px 0 rgba(124, 92, 255, 0.85), 0 0 22px rgba(124, 92, 255, 0.12); }
}

.premium-dropdown .Select-control,
.premium-dropdown .Select-menu-outer,
.premium-dropdown .VirtualizedSelectFocusedOption,
.premium-dropdown .Select-menu {
    background-color: rgba(24, 24, 27, 0.98) !important;
    color: #f3f4f6 !important;
}

.premium-dropdown .Select-control {
    border: 1px solid rgba(163, 163, 163, 0.14) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    min-height: 64px !important;
    height: 64px !important;
    font-size: 1.08rem !important;
}

.premium-dropdown .Select-value-label,
.premium-dropdown .Select-placeholder,
.premium-dropdown .Select-input > input {
    color: #f3f4f6 !important;
    line-height: 62px !important;
    font-size: 1.08rem !important;
}

.premium-dropdown .Select-placeholder,
.premium-dropdown .Select--single > .Select-control .Select-value {
    padding-left: 18px !important;
    padding-right: 52px !important;
}

.premium-dropdown .Select-input {
    height: 62px !important;
    padding-left: 18px !important;
}

.premium-dropdown .Select-arrow-zone,
.premium-dropdown .Select-clear-zone {
    width: 52px !important;
}

.premium-dropdown .Select-menu-outer {
    border: 1px solid rgba(163, 163, 163, 0.12) !important;
    border-radius: 14px !important;
    margin-top: 6px !important;
    max-height: 380px !important;
    font-size: 1.05rem !important;
}

.premium-dropdown .VirtualizedSelectOption {
    background-color: rgba(24, 24, 27, 0.98) !important;
    color: #f3f4f6 !important;
    padding: 16px 18px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
}

.premium-dropdown .VirtualizedSelectFocusedOption {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.js-plotly-plot .plotly .modebar {
    background: rgba(9, 15, 28, 0.72) !important;
    border-radius: 10px;
}

.js-plotly-plot .plotly .legend {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.js-plotly-plot .plotly .legend rect {
    fill: rgba(9, 15, 28, 0.58) !important;
    stroke: rgba(255, 255, 255, 0.12) !important;
}

@media (max-width: 991.98px) {
    .hero-title {
        font-size: clamp(1.8rem, 7vw, 2.6rem);
    }

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

    .glass-card .card-header {
        padding: 0.85rem 1rem;
    }

    .kpi-card-body {
        min-height: 190px;
    }
}

a {
    text-decoration: none;
}

.alert {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Stock impact cards */
.stock-impact-card {
    background: rgba(22, 24, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    color: #f3f4f6;
}

.stock-impact-card strong {
    color: #fafafa;
}

.stock-impact-card details summary {
    color: #8ab4ff;
}

.stock-conf-high {
    color: #28c76f !important;
}

.stock-conf-med {
    color: #ff9f43 !important;
}

.stock-conf-low {
    color: #a3a3a3 !important;
}

/* Threat Index */
.threat-detail-item {
    background: rgba(22, 24, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #f3f4f6;
}

.scenario-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

.scenario-check-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(22, 24, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: #e5e7eb !important;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease;
}

.scenario-check-label:hover {
    border-color: rgba(234, 84, 85, 0.35);
    background: rgba(234, 84, 85, 0.06);
}

.scenario-check-input {
    accent-color: #ea5455;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.scenario-check-input:checked + .scenario-check-label {
    border-color: rgba(234, 84, 85, 0.50) !important;
    background: rgba(234, 84, 85, 0.10) !important;
    color: #fafafa !important;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dash 4 dropdowns use Radix-based classes (not legacy React Select).
   The popup is portalled outside .route-filter, so popup rules are global. */
.route-filter .dash-dropdown,
.route-filter .dash-dropdown-trigger {
    background: #121820 !important;
    color: #edf6ff !important;
    border-color: rgba(99, 216, 255, .20) !important;
}

.route-filter .dash-dropdown {
    min-height: 38px;
    border-radius: 10px !important;
}

.route-filter .dash-dropdown-value,
.route-filter .dash-dropdown-value-item,
.route-filter .dash-dropdown-trigger-icon {
    color: #edf6ff !important;
    fill: #63d8ff !important;
}

.dash-dropdown-content,
.dash-dropdown-options,
.dash-dropdown-option,
.dash-options-list-option-wrapper {
    background: #121820 !important;
    color: #edf6ff !important;
}

.dash-dropdown-content {
    border: 1px solid rgba(99, 216, 255, .20) !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .58) !important;
}

.dash-dropdown-option:hover,
.dash-dropdown-option[data-highlighted],
.dash-dropdown-option[data-state="checked"],
.dash-dropdown-option:focus-visible {
    background: #243746 !important;
    color: #ffffff !important;
    outline: none;
}

.dash-dropdown-option input,
.dash-dropdown-option label,
.dash-options-list-option-wrapper label {
    color: inherit !important;
}

/* ── Route operations / conflict corridor map ───────────────────── */
.route-ops-card {
    overflow: hidden;
    border-color: rgba(99, 216, 255, 0.14) !important;
}

.route-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.route-eyebrow {
    margin-bottom: .25rem;
    color: #63d8ff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.route-filters {
    display: flex;
    gap: .55rem;
    min-width: 300px;
}

.route-filter-details > summary { display: none; }
.route-filter-details { min-width: 300px; }

.route-filter { flex: 1; min-width: 140px; }
.route-filter .Select-control {
    height: 38px;
    border: 1px solid rgba(99, 216, 255, .14) !important;
    border-radius: 10px !important;
    background: rgba(9, 14, 20, .88) !important;
}
.route-filter .Select-menu-outer { background: #121820; border-color: rgba(99, 216, 255, .14); }
.route-filter .Select-value-label, .route-filter .Select-placeholder { color: #dce7ff !important; line-height: 36px !important; }
.route-filter .Select-arrow { border-top-color: #63d8ff !important; }

.route-summary-strip {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 58px;
    padding: .55rem .65rem;
    border: 1px solid rgba(255, 255, 255, .065);
    border-bottom: 0;
    border-radius: 13px 13px 0 0;
    background: rgba(7, 11, 16, .68);
}

.route-summary-stat {
    display: flex;
    align-items: baseline;
    gap: .38rem;
    padding: .42rem .68rem;
    border-radius: 9px;
    background: rgba(255,255,255,.035);
    color: #aebacd;
    font-size: .72rem;
}
.route-summary-stat strong { color: #fff; font-size: 1rem; }
.route-summary-stat.route-air strong { color: #63d8ff; }
.route-summary-stat.route-sea strong { color: #ffb454; }
.route-summary-stat.route-alert strong { color: #ff6f7f; }
.route-snapshot-time { margin-left: auto; color: #7f8da3; font-size: .68rem; text-align: right; }
.route-snapshot-stale { color: #ffc857; }
.route-snapshot-unavailable { color: #ff8a4c; }

.route-map-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .85rem;
    padding: .42rem .7rem;
    border: 1px solid rgba(255,255,255,.065);
    border-bottom: 0;
    color: #91a0b4;
    background: rgba(7,11,16,.68);
    font-size: .67rem;
}
.route-map-legend > span { display: inline-flex; align-items: center; gap: .32rem; }
.route-legend-line { width: 18px; height: 3px; border-radius: 3px; }
.route-critical { background: #ff4d6d; }
.route-high { background: #ff8a4c; }
.route-elevated { background: #ffc857; }
.route-legend-symbol { color: #63d8ff; font-style: normal; }
.route-air-symbol::before { content: "✈"; }
.route-sea-symbol::before { content: "◆"; color: #ffb454; }
.route-empty-state { font-size: .78rem; }

.route-operations-grid {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .065);
    background: #080c11;
}
.route-map-frame { min-height: 610px; border-right: 1px solid rgba(99, 216, 255, .10); }
.route-map-frame .js-plotly-plot, .route-map-frame .plot-container { border-radius: 0; }
.route-panel-column { min-height: 610px; background: linear-gradient(180deg, rgba(16,22,29,.98), rgba(9,14,20,.98)); }
.route-status-list { max-height: 610px; overflow-y: auto; padding: .72rem; scrollbar-width: thin; scrollbar-color: #334252 #111820; }
.route-status-card {
    position: relative;
    margin-bottom: .62rem;
    padding: .82rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 11px;
    background: rgba(255,255,255,.026);
    transition: border-color 180ms ease, transform 180ms ease;
}
.route-status-card:hover { transform: translateX(-2px); border-color: rgba(99,216,255,.24); }
.route-card-labels { display: flex; justify-content: space-between; align-items: center; margin-bottom: .55rem; }
.route-mode-badge, .route-risk-badge { font-size: .62rem; font-weight: 800; letter-spacing: .11em; }
.route-mode-badge { padding: .2rem .38rem; border-radius: 5px; }
.route-mode-badge.route-air { color: #63d8ff; background: rgba(99,216,255,.10); }
.route-mode-badge.route-sea { color: #ffb454; background: rgba(255,180,84,.10); }
.route-card-title { margin-bottom: .25rem; color: #f4f7fb; font-size: .91rem; }
.route-card-path { color: #c6d2e2; font-size: .76rem; font-weight: 600; }
.route-card-status { margin-top: .5rem; color: #ffcf75; font-size: .73rem; }
.route-card-reason { margin: .28rem 0 .5rem; color: #8f9db0; font-size: .69rem; line-height: 1.45; }
.route-card-source { padding-top: .42rem; border-top: 1px solid rgba(255,255,255,.055); color: #65758b; font-size: .63rem; }
.route-disclaimer { padding: .7rem .75rem .1rem; color: #65758b; font-size: .66rem; line-height: 1.45; }

@media (max-width: 991px) {
    .route-header { align-items: stretch; flex-direction: column; }
    .route-filter-details, .route-filters { min-width: 0; width: 100%; }
    .route-map-frame { border-right: 0; border-bottom: 1px solid rgba(99,216,255,.10); }
    .route-panel-column { min-height: 0; }
    .route-status-list { max-height: 480px; }
}

@media (max-width: 575px) {
    .route-summary-strip { flex-wrap: wrap; }
    .route-snapshot-time { width: 100%; margin-left: 0; text-align: left; }
    .route-filters { flex-direction: column; }
    .route-filter { width: 100%; }
    .route-filter-details { border: 1px solid rgba(99,216,255,.14); border-radius: 10px; }
    .route-filter-details > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .65rem .75rem;
        color: #dce7ff;
        cursor: pointer;
        font-size: .75rem;
        font-weight: 700;
        list-style: none;
    }
    .route-filter-details > summary::-webkit-details-marker { display: none; }
    .route-filter-details .route-filters { padding: 0 .55rem .55rem; }
    .route-filter-details:not([open]) .route-filter-chevron { transform: rotate(-90deg); }
    .route-filter-chevron { transition: transform 160ms ease; }
    .route-map-legend { justify-content: flex-start; gap: .55rem; overflow-x: auto; white-space: nowrap; }
}

/* Branded first-paint loader replaces Dash's plain "Loading..." text. */
._dash-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: transparent !important;
    background: #0b0f14;
}

._dash-loading::before {
    content: "";
    width: 58px;
    height: 58px;
    border: 2px solid rgba(99, 216, 255, .15);
    border-top-color: #63d8ff;
    border-right-color: #8b7cff;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(99, 216, 255, .18), inset 0 0 18px rgba(139, 124, 255, .12);
    animation: geosignalsLoaderSpin .85s linear infinite;
}

._dash-loading::after {
    content: "GEOSIGNALS";
    position: absolute;
    top: calc(50% + 48px);
    color: #a9bad0;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .22em;
    animation: geosignalsLoaderPulse 1.4s ease-in-out infinite;
}

@keyframes geosignalsLoaderSpin { to { transform: rotate(360deg); } }
@keyframes geosignalsLoaderPulse { 50% { opacity: .45; } }

/* Mobile-first hardening across the dashboard shell and route operations. */
.mobile-tab-hint { display: none; }

@media (max-width: 767px) {
    .app-shell { padding-left: .65rem !important; padding-right: .65rem !important; }
    .site-header { flex-wrap: wrap; gap: .65rem; padding: .7rem; }
    .site-logo { width: 36px; height: 36px; }
    .site-title-group { flex: 1 1 calc(100% - 50px); }
    .site-title { white-space: normal; font-size: .98rem; }
    .site-subtitle { font-size: .67rem; }
    .header-actions { width: 100%; align-items: center; flex-direction: row; justify-content: space-between; }
    .refresh-timeline { align-items: flex-start; }
    .refresh-timeline-value { white-space: normal; font-size: .68rem; }
    .share-btn { padding: .55rem .7rem; font-size: .72rem; }

    .top-level-tabs { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    .top-level-tabs .tab-container { min-width: max-content; }
    .top-level-tabs .tab { flex: 0 0 155px !important; min-width: 155px; white-space: normal; line-height: 1.25; }
    .mobile-tab-hint {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .35rem;
        margin: 0 .35rem .3rem;
        color: #718198;
        font-size: .63rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .mobile-tab-hint-arrow { color: #63d8ff; animation: mobileSwipeCue 1.5s ease-in-out infinite; }

    .glass-card.card { border-radius: 13px; }
    .glass-card .card-header { padding: .75rem; }
    .glass-card .card-body { padding-left: .75rem; padding-right: .75rem; }
    .kpi-card-body { min-height: 138px; }
    .section-title { font-size: 1rem; }
    .section-subtitle { font-size: .8rem; }

    .route-ops-card .card-body { padding: .55rem !important; }
    .route-summary-strip { gap: .35rem; padding: .45rem; }
    .route-summary-stat { flex: 1 1 calc(50% - .35rem); justify-content: center; padding: .38rem; }
    .route-map-frame, .route-panel-column { min-height: 0; }
    #route-disruption-map { height: 430px !important; }
    .route-status-list { max-height: none; padding: .5rem; }
    .route-status-card:hover { transform: none; }

    #world-map,
    #conflict-map { height: 430px !important; }
    #bar-chart,
    #pie-chart,
    #continent-chart,
    #prediction-chart,
    #conflict-bar-chart,
    #conflict-outlook-chart,
    #threat-gauge,
    #risk-radar-chart,
    #scenario-comparison-chart,
    #scenario-country-chart,
    #historical-impact-chart,
    #stocks-sector-chart,
    #stocks-bullish-chart,
    #stocks-bearish-chart {
        height: 340px !important;
        min-height: 340px !important;
    }
}

@keyframes mobileSwipeCue {
    50% { transform: translateX(5px); opacity: .55; }
}

@media (max-width: 390px) {
    .header-actions { align-items: stretch; flex-direction: column; }
    .share-btn { width: 100%; }
    #route-disruption-map { height: 370px !important; }
    #world-map,
    #conflict-map { height: 370px !important; }
    #bar-chart,
    #pie-chart,
    #continent-chart,
    #prediction-chart,
    #conflict-bar-chart,
    #conflict-outlook-chart,
    #threat-gauge,
    #risk-radar-chart,
    #scenario-comparison-chart,
    #scenario-country-chart,
    #historical-impact-chart,
    #stocks-sector-chart,
    #stocks-bullish-chart,
    #stocks-bearish-chart {
        height: 310px !important;
        min-height: 310px !important;
    }
    .route-summary-stat { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    ._dash-loading::before,
    ._dash-loading::after,
    .mobile-tab-hint-arrow { animation: none !important; }
}

/* Vulnerability metric grid */
.vuln-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.vuln-metric-item {
    background: rgba(22, 24, 30, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.refresh-timeline {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.refresh-timeline-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
}

.refresh-timeline-value {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .header-actions {
        align-items: flex-end;
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ── Modern depth system ──────────────────────────────────────────── */
:root {
    --surface-1: rgba(18, 20, 25, 0.88);
    --surface-2: rgba(24, 27, 34, 0.78);
    --line-soft: rgba(255, 255, 255, 0.075);
    --brand-violet: #8b7cff;
    --brand-cyan: #64d8ff;
}

body::after {
    background:
        radial-gradient(70rem 45rem at 8% -10%, rgba(139, 124, 255, 0.10), transparent 62%),
        radial-gradient(55rem 38rem at 95% 8%, rgba(100, 216, 255, 0.07), transparent 64%);
    animation: ambientDepth 18s ease-in-out infinite alternate;
    will-change: transform;
}

.app-shell::before {
    opacity: 0.28;
    animation: none;
}

.app-shell::after,
.status-pill,
.top-level-tabs .tab--selected,
.top-level-tab--selected {
    animation: none;
}

@keyframes ambientDepth {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to { transform: scale(1.06) translate3d(-1.5%, 1%, 0); }
}

.site-header {
    background: rgba(13, 15, 19, 0.72);
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    margin-top: 0.35rem;
    padding: 0.7rem 0.85rem;
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.site-logo {
    height: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.top-level-tabs {
    padding: 5px;
    background: rgba(16, 18, 23, 0.72);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.top-level-tabs .tab {
    border: 0 !important;
    border-radius: 11px !important;
    padding: 0.72rem 1rem !important;
    background: transparent !important;
    font-size: 0.84rem;
    font-weight: 600;
}

.top-level-tabs .tab--selected,
.top-level-tab--selected {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(139, 124, 255, 0.22), rgba(100, 216, 255, 0.10)) !important;
    box-shadow: inset 0 0 0 1px rgba(159, 151, 255, 0.20), 0 8px 24px rgba(0, 0, 0, 0.20) !important;
}

.hero-panel {
    min-height: 250px;
    padding: 2rem !important;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(25, 28, 36, 0.94), rgba(14, 16, 21, 0.96));
    perspective: 900px;
    transform-style: preserve-3d;
}

.hero-panel::before {
    border-radius: 22px;
    animation-duration: 14s;
    opacity: 0.65;
}

.hero-panel::after {
    content: "";
    position: absolute;
    right: clamp(-70px, -3vw, -25px);
    top: 50%;
    width: clamp(190px, 22vw, 320px);
    aspect-ratio: 1;
    border: 1px solid rgba(139, 124, 255, 0.22);
    border-radius: 50%;
    background:
        repeating-radial-gradient(ellipse at center, transparent 0 16px, rgba(100, 216, 255, 0.09) 17px 18px),
        repeating-linear-gradient(90deg, transparent 0 24px, rgba(139, 124, 255, 0.08) 25px 26px),
        radial-gradient(circle at 35% 30%, rgba(100, 216, 255, 0.16), transparent 55%);
    box-shadow: inset -28px -18px 50px rgba(0, 0, 0, 0.36), 0 0 70px rgba(139, 124, 255, 0.10);
    opacity: 0.72;
    pointer-events: none;
    transform: translateY(-50%) rotateX(64deg) rotateZ(0deg);
    transform-style: preserve-3d;
    will-change: transform;
    animation: globeOrbit 18s linear infinite;
}

@keyframes globeOrbit {
    from { transform: translateY(-50%) rotateX(64deg) rotateZ(0deg); }
    to { transform: translateY(-50%) rotateX(64deg) rotateZ(360deg); }
}

.hero-panel > * {
    position: relative;
    z-index: 1;
    max-width: min(76%, 980px);
    transform: translateZ(24px);
}

.hero-title {
    font-size: clamp(1.9rem, 3vw, 3rem);
}

.hero-metric-grid {
    gap: 0.65rem;
}

.hero-metric {
    padding: 0.72rem 0.85rem;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.025);
}

.glass-card.card {
    background: var(--surface-1);
    border-color: var(--line-soft);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
    transform: perspective(1100px) translateZ(0);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.glass-card.card:hover {
    transform: perspective(1100px) translateY(-3px) rotateX(0.35deg);
    border-color: rgba(139, 124, 255, 0.18);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(139, 124, 255, 0.035);
}

.glass-card .card-header {
    padding: 0.82rem 1rem;
    background: rgba(255, 255, 255, 0.018);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.glass-card .card-header::after {
    display: none;
}

.kpi-card-body {
    min-height: 168px;
}

.premium-dropdown .Select-control {
    min-height: 52px !important;
    height: 52px !important;
    border-radius: 11px !important;
}

.premium-dropdown .Select-value-label,
.premium-dropdown .Select-placeholder,
.premium-dropdown .Select-input > input {
    line-height: 50px !important;
    font-size: 0.98rem !important;
}

.premium-dropdown .Select-input {
    height: 50px !important;
}

@media (max-width: 767px) {
    .hero-panel {
        min-height: 0;
        padding: 1.35rem !important;
    }

    .hero-panel::after {
        right: -90px;
        opacity: 0.34;
    }

    .hero-panel > * {
        max-width: 100%;
        transform: none;
    }

    .top-level-tabs .tab {
        padding: 0.65rem 0.45rem !important;
        font-size: 0.72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::after,
    .hero-panel::after {
        animation: none !important;
    }

    .glass-card.card,
    .glass-card.card:hover {
        transform: none;
    }
}