/* =========================================================================
   JAXA EARTH OBSERVATORY — DESIGN SYSTEM & STYLESHEET (v4.0)
   Cyber-Aero Glassmorphism, Uncluttered Ergonomics & High-Density Telemetry
   ========================================================================= */

:root {
    /* Color Palette */
    --bg-void: #030712;
    --bg-surface-1: rgba(8, 14, 26, 0.88);
    --bg-surface-2: rgba(15, 23, 42, 0.75);
    --bg-surface-3: rgba(30, 41, 59, 0.6);
    --bg-card: rgba(15, 23, 42, 0.55);
    --bg-input: rgba(3, 7, 18, 0.75);

    --accent-cyan: #00f2fe;
    --accent-azure: #38bdf8;
    --accent-blue: #2563eb;
    --accent-jaxa-blue: #003399;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-rose: #f43f5e;
    --accent-purple: #a855f7;

    --glow-cyan: 0 0 20px rgba(0, 242, 254, 0.35);
    --glow-azure: 0 0 25px rgba(56, 189, 248, 0.35);
    --glow-emerald: 0 0 15px rgba(16, 185, 129, 0.4);

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-cyan: #38bdf8;

    --border-glow: rgba(0, 242, 254, 0.25);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(0, 242, 254, 0.5);

    --glass-blur: blur(16px) saturate(180%);
    --header-h: 68px;
    --footer-h: 42px;
    --sidebar-w: 370px;
    --analytics-w: 410px;

    --font-display: 'Orbitron', 'Outfit', sans-serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;
    --font-ar: 'Cairo', 'Outfit', sans-serif;
}

/* RTL Support */
body[data-lang="ar"] {
    font-family: var(--font-ar);
    direction: rtl;
}

body[data-lang="ar"] .font-display {
    font-family: var(--font-ar);
    font-weight: 800;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: rgba(3, 7, 18, 0.6);
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 242, 254, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
    box-shadow: var(--glow-cyan);
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-void);
    color: var(--text-primary);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    letter-spacing: -0.01em;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(0, 51, 153, 0.15), transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(0, 242, 254, 0.08), transparent 40%);
}

/* =========================================
   TOP APP HEADER
   ========================================= */
header {
    height: var(--header-h);
    background: rgba(3, 7, 18, 0.88);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1000;
    backdrop-filter: var(--glass-blur);
    position: relative;
}

header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.6), rgba(56, 189, 248, 0.2), transparent);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.jein-logo-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.jein-logo-wrap:hover .jein-logo-img {
    transform: scale(1.06) rotate(3deg);
    filter: drop-shadow(0 0 14px rgba(0, 212, 255, 0.8)) drop-shadow(0 0 28px rgba(0, 90, 180, 0.5));
}

.jein-logo-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 50%;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 10px rgba(0, 180, 255, 0.55));
    animation: jein-logo-pulse 4s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes jein-logo-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.95;
    }

    50% {
        transform: scale(1.03);
        opacity: 1;
    }
}

.title-meta h1 {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.title-meta h1 span.badge-v {
    font-size: 0.62rem;
    padding: 2px 6px;
    background: rgba(0, 242, 254, 0.12);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-weight: 700;
}

.title-meta p {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* Category Filter Bar (Anti-Clutter) */
.category-filter-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.6);
    padding: 3px 6px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
}

.cat-pill {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.cat-pill:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.cat-pill.active {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.2), rgba(37, 99, 235, 0.3));
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 242, 254, 0.4);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}

/* Global / Egypt Region Switch */
.region-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(15, 23, 42, 0.6);
    padding: 3px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    margin-left: 8px;
    flex-shrink: 0;
}

.region-switch-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
    font-family: inherit;
}

.region-switch-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.region-switch-btn.active {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.22), rgba(37, 99, 235, 0.32));
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 242, 254, 0.4);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
}

#btn-region-egypt.active {
    background: linear-gradient(135deg, rgba(206, 17, 38, 0.28), rgba(0, 0, 0, 0.4));
    color: #fff;
    border: 1px solid rgba(206, 17, 38, 0.55);
    box-shadow: 0 0 10px rgba(206, 17, 38, 0.3);
}

@media (max-width: 900px) {
    .region-switch {
        margin-left: 4px;
    }

    .region-switch-btn {
        padding: 5px 8px;
        font-size: 0.62rem;
    }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 900px) {
    .header-research-btn {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .nav-pills-divider {
        display: none;
    }
}

.status-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--border-subtle);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
}

.status-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-emerald);
    box-shadow: var(--glow-emerald);
    animation: pulse-dot 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes pulse-dot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.5;
    }
}

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.icon-btn:hover {
    color: var(--accent-cyan);
    border-color: var(--border-hover);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
    transform: translateY(-1px);
}

.icon-btn.active {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.2), rgba(37, 99, 235, 0.3));
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    box-shadow: var(--glow-cyan);
}

/* ============================================================
   PREMIUM NAV ICON PILLS — Icon-only with smart tooltip
   ============================================================ */
.header-research-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(0, 242, 254, 0.25);
    color: rgba(0, 242, 254, 0.85);
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
    flex-shrink: 0;
}

/* Hide the label span, keep only SVG visible */
.header-research-btn>span[data-i18n] {
    display: none !important;
}

/* Also hide research-pulse-dot — we re-implement it inside the icon */
.header-research-btn>.research-pulse-dot {
    display: none !important;
}

/* SVG icon sizing */
.header-research-btn .svg-icon,
.header-research-btn .svg-icon-sm {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Tooltip ---- */
.header-research-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: rgba(8, 14, 30, 0.96);
    border: 1px solid rgba(0, 242, 254, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-sans, 'Outfit', sans-serif);
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 242, 254, 0.12);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 9999;
}

/* Tooltip arrow */
.header-research-btn::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    border: 5px solid transparent;
    border-top-color: rgba(0, 242, 254, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 9999;
}

.header-research-btn:hover::after,
.header-research-btn:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.header-research-btn:hover::before,
.header-research-btn:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Hover state */
.header-research-btn:hover {
    transform: translateY(-2px) scale(1.08);
    border-color: rgba(0, 242, 254, 0.6);
    box-shadow: 0 0 22px rgba(0, 242, 254, 0.45), 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #00f2fe;
    background: rgba(0, 242, 254, 0.1);
}

.header-research-btn:hover .svg-icon,
.header-research-btn:hover .svg-icon-sm {
    transform: scale(1.15);
}

/* ---- Per-button color theming ---- */
/* Data Studio & Download Button — Cyan Pill */
#btn-research-hub {
    width: auto !important;
    min-height: 38px;
    padding: 0 13px 0 11px;
    gap: 8px;
    border-radius: 12px;
    background: rgba(0, 242, 254, 0.08);
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: #00f2fe;
    display: inline-flex !important;
    align-items: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#btn-research-hub:hover {
    border-color: #00f2fe;
    box-shadow: 0 0 24px rgba(0, 242, 254, 0.55), 0 4px 16px rgba(0, 0, 0, 0.5);
    background: rgba(0, 242, 254, 0.16);
    color: #00f2fe;
    transform: translateY(-2px);
}

#btn-research-hub .btn-label-text {
    display: inline-block !important;
    font-family: var(--font-sans, 'Outfit', 'Cairo', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #f1f5f9;
    white-space: nowrap;
    line-height: 1;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

#btn-research-hub:hover .btn-label-text {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.6);
}

#btn-research-hub .btn-download-arrow {
    width: 13px;
    height: 13px;
    stroke: rgba(0, 242, 254, 0.85);
    flex-shrink: 0;
    transition: transform 0.25s ease, stroke 0.25s ease;
}

#btn-research-hub:hover .btn-download-arrow {
    stroke: #00f2fe;
    transform: translateY(2px);
}

/* RTL adjustment for Arabic */
[dir="rtl"] #btn-research-hub {
    padding: 0 11px 0 13px;
}

[dir="rtl"] #btn-research-hub .btn-label-text {
    font-family: 'Cairo', var(--font-sans, sans-serif);
    font-size: 0.82rem;
}

@media (max-width: 640px) {
    #btn-research-hub {
        width: 36px !important;
        height: 36px;
        padding: 0 !important;
        justify-content: center;
    }

    #btn-research-hub .btn-label-text,
    #btn-research-hub .btn-download-arrow {
        display: none !important;
    }
}

#btn-research-hub::after {
    border-color: rgba(0, 242, 254, 0.35);
}

#btn-research-hub::before {
    border-top-color: rgba(0, 242, 254, 0.35);
}

/* Research Hub — Purple */
#btn-fellowship-hub {
    border-color: rgba(168, 85, 247, 0.3);
    color: rgba(168, 85, 247, 0.9);
}

#btn-fellowship-hub:hover {
    border-color: #a855f7;
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.55), 0 4px 16px rgba(0, 0, 0, 0.5);
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

#btn-fellowship-hub::after {
    border-color: rgba(168, 85, 247, 0.35);
}

#btn-fellowship-hub::before {
    border-top-color: rgba(168, 85, 247, 0.35);
}

/* AI Forecast — Blue-Indigo */
#btn-ai-forecast-hub {
    border-color: rgba(99, 102, 241, 0.3);
    color: rgba(99, 102, 241, 0.9);
}

#btn-ai-forecast-hub:hover {
    border-color: #6366f1;
    box-shadow: 0 0 24px rgba(99, 102, 241, 0.55), 0 4px 16px rgba(0, 0, 0, 0.5);
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
}

#btn-ai-forecast-hub::after {
    border-color: rgba(99, 102, 241, 0.35);
}

#btn-ai-forecast-hub::before {
    border-top-color: rgba(99, 102, 241, 0.35);
}

/* National Impact — Egypt Gold/Red */
#btn-national-impact {
    border-color: rgba(251, 191, 36, 0.35) !important;
    color: rgba(251, 191, 36, 0.9) !important;
    background: rgba(15, 23, 42, 0.7) !important;
}

#btn-national-impact:hover {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 24px rgba(251, 191, 36, 0.5), 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    background: rgba(251, 191, 36, 0.1) !important;
    color: #fbbf24 !important;
}

#btn-national-impact::after {
    border-color: rgba(251, 191, 36, 0.4);
}

#btn-national-impact::before {
    border-top-color: rgba(251, 191, 36, 0.4);
}

/* Active page indicator dot */
.header-research-btn.nav-active::after {
    /* active state changes tooltip but also we add pseudo dot via JS */
    border-color: rgba(0, 242, 254, 0.6);
}

/* Live pulse dot for Data Studio — repositioned */
.nav-live-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
    animation: pulse-dot 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    pointer-events: none;
}

/* Divider between nav pills and other actions */
.nav-pills-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    margin: 0 2px;
}


.research-studio-card-link.fellowship-card-link {
    background: linear-gradient(135deg, rgba(8, 14, 26, 0.95), rgba(15, 23, 42, 0.9)), radial-gradient(circle at 100% 0%, rgba(168, 85, 247, 0.2), transparent 60%);
    border-color: rgba(168, 85, 247, 0.35);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.15);
}

.research-studio-card-link.fellowship-card-link:hover {
    border-color: var(--accent-purple);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
}

.research-studio-card-link.ai-forecast-card-link {
    background: linear-gradient(135deg, rgba(8, 14, 26, 0.95), rgba(15, 23, 42, 0.9)), radial-gradient(circle at 100% 0%, rgba(0, 242, 254, 0.25), transparent 60%);
    border-color: rgba(0, 242, 254, 0.35);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.15);
}

.research-studio-card-link.ai-forecast-card-link:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.4);
}

.research-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan);
    animation: pulse-dot 1.5s infinite;
}

/* Drawer Quick Access Banner */
.research-studio-card-link {
    display: block;
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(8, 14, 26, 0.95), rgba(15, 23, 42, 0.9)), radial-gradient(circle at 100% 0%, rgba(0, 242, 254, 0.2), transparent 60%);
    border: 1px solid rgba(0, 242, 254, 0.35);
    text-decoration: none;
    transition: all 0.25s;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.15);
}

.research-studio-card-link:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.4);
    transform: translateY(-2px);
}

.research-card-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 242, 254, 0.2);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 242, 254, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.research-card-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.research-card-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* =========================================
   MAIN WORKSPACE LAYOUT
   ========================================= */
.workspace {
    display: flex;
    height: calc(100vh - var(--header-h));
    position: relative;
    overflow: hidden;
}

/* =========================================
   SIDEBAR DRAWERS
   ========================================= */
.drawer-left {
    width: var(--sidebar-w);
    background: var(--bg-surface-1);
    border-right: 1px solid var(--border-subtle);
    backdrop-filter: var(--glass-blur);
    display: flex;
    flex-direction: column;
    z-index: 200;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin 0.35s ease;
    overflow-y: auto;
    flex-shrink: 0;
}

.drawer-left.collapsed {
    transform: translateX(-100%);
    margin-right: calc(-1 * var(--sidebar-w));
}

body[data-lang="ar"] .drawer-left {
    border-right: none;
    border-left: 1px solid var(--border-subtle);
}

body[data-lang="ar"] .drawer-left.collapsed {
    transform: translateX(100%);
    margin-left: calc(-1 * var(--sidebar-w));
    margin-right: 0;
}

.drawer-header {
    padding: 14px 18px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-subtle);
}

.drawer-title {
    font-size: 0.72rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawer-content {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Ergonomic Cards */
.control-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 12px;
    transition: border-color 0.2s;
}

.control-card:hover {
    border-color: rgba(0, 242, 254, 0.25);
}

.card-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-export-actions {
    display: flex;
    gap: 4px;
}

.chart-export-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 0.78rem;
    cursor: pointer;
    line-height: 1.4;
    transition: all 0.2s;
}

.chart-export-btn:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.1);
}

/* EESI Component Breakdown */
.eesi-breakdown-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-subtle);
}

.eesi-component-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eesi-component-label {
    flex: 0 0 auto;
    font-size: 0.62rem;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 108px;
}

.eesi-component-bar-track {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.eesi-component-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #a3e635, #facc15, #f97316, #dc2626, #991b1b);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.eesi-component-pct {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    min-width: 30px;
    text-align: right;
}

/* Custom Select & Inputs */
.custom-select {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    color: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
}

.custom-select:hover,
.custom-select:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.15);
}

/* Satellite Analysis Meta Card Redesign */
.satellite-analysis-card {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-top: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(11, 23, 42, 0.9) 0%, rgba(6, 13, 26, 0.95) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 242, 254, 0.22);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.satellite-analysis-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--accent-cyan, #00f2fe) 50%, transparent 100%);
    opacity: 0.85;
}

.satellite-analysis-card:hover {
    border-color: rgba(0, 242, 254, 0.45);
    box-shadow: 0 10px 28px rgba(0, 242, 254, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.sat-card-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 95px;
    min-width: 95px;
    gap: 6px;
    flex-shrink: 0;
}

.sat-image-wrapper {
    width: 100%;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 242, 254, 0.3);
    background: #040914;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.sat-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.satellite-analysis-card:hover .sat-thumb-img {
    transform: scale(1.08);
}

.sat-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(4, 9, 20, 0.75) 100%);
    pointer-events: none;
}

.sat-meta-under {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 3px;
}

.sat-sensor-badge {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: rgba(0, 242, 254, 0.12);
    color: var(--accent-cyan, #00f2fe);
    border: 1px solid rgba(0, 242, 254, 0.28);
    border-radius: 4px;
    padding: 2px 3px;
    font-size: 0.62rem;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: 0.2px;
}

.sat-res-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 0.6rem;
    font-weight: 600;
    width: 100%;
}

.svg-icon-nano {
    width: 11px;
    height: 11px;
    color: var(--accent-cyan, #00f2fe);
    flex-shrink: 0;
}

.sat-card-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.sat-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 3px;
}

.sat-full-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sat-code-badge {
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    color: #050b14;
    font-family: var(--font-mono, monospace);
    font-weight: 800;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.35);
    white-space: nowrap;
    flex-shrink: 0;
}

.sat-desc-body {
    margin: 0 0 6px 0;
    font-size: 0.7rem;
    color: rgba(203, 213, 225, 0.88);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sat-tags-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.sat-tag-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sat-tag-chip.highlight {
    background: rgba(0, 242, 254, 0.12);
    border-color: rgba(0, 242, 254, 0.25);
    color: var(--accent-cyan, #00f2fe);
}

/* Satellite Card Clickable Pointer & Inspect Hint */
.satellite-analysis-card {
    cursor: pointer;
}

.sat-card-inspect-hint {
    position: absolute;
    top: 6px;
    left: 8px;
    background: rgba(0, 242, 254, 0.15);
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: var(--accent-cyan, #00f2fe);
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 0.55rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    opacity: 0.85;
    transition: all 0.25s ease;
    z-index: 2;
}

.satellite-analysis-card:hover .sat-card-inspect-hint {
    opacity: 1;
    background: rgba(0, 242, 254, 0.25);
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.4);
}

[dir="rtl"] .sat-card-inspect-hint {
    left: auto;
    right: 8px;
}

/* Scientific Satellite Modal Overlay */
.sat-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 8, 20, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 16px;
}

.sat-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.sat-modal-card {
    background: linear-gradient(145deg, rgba(13, 27, 46, 0.95) 0%, rgba(7, 14, 28, 0.98) 100%);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 242, 254, 0.15);
    width: 660px;
    max-width: 94%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transform: scale(0.92);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sat-modal-overlay.active .sat-modal-card {
    transform: scale(1);
}

.sat-modal-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

[dir="rtl"] .sat-modal-close {
    left: auto;
    right: 12px;
}

.sat-modal-close:hover {
    background: rgba(239, 68, 68, 0.8);
    border-color: #ef4444;
    transform: rotate(90deg);
}

/* Modal Hero Header */
.sat-modal-header {
    position: relative;
}

.sat-modal-hero {
    position: relative;
    height: 140px;
    width: 100%;
    background: #040914;
    overflow: hidden;
}

.sat-modal-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sat-modal-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(7, 14, 28, 0.95) 100%);
}

.sat-modal-agency-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0, 242, 254, 0.2);
    border: 1px solid rgba(0, 242, 254, 0.4);
    color: var(--accent-cyan, #00f2fe);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
}

[dir="rtl"] .sat-modal-agency-badge {
    right: auto;
    left: 14px;
}

.sat-modal-title-group {
    padding: 0 20px 10px 20px;
    margin-top: -30px;
    position: relative;
    z-index: 2;
}

.sat-modal-subtitle {
    display: block;
    font-size: 0.75rem;
    color: rgba(0, 242, 254, 0.9);
    font-family: var(--font-mono, monospace);
    margin-bottom: 2px;
}

.sat-modal-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
}

/* Modal Nav Tabs */
.sat-modal-nav {
    display: flex;
    gap: 6px;
    padding: 0 20px 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sat-modal-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sat-modal-tab:hover {
    background: rgba(0, 242, 254, 0.08);
    color: #fff;
}

.sat-modal-tab.active {
    background: rgba(0, 242, 254, 0.18);
    border-color: rgba(0, 242, 254, 0.4);
    color: var(--accent-cyan, #00f2fe);
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.2);
}

/* Modal Body Panes */
.sat-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.sat-tab-pane {
    display: none;
}

.sat-tab-pane.active {
    display: block;
    animation: fadeInSat 0.3s ease;
}

@keyframes fadeInSat {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sat-modal-desc-lead {
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.92);
    margin: 0 0 14px 0;
}

.sat-modal-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.spec-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.spec-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
}

.spec-value {
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-mono, monospace);
}

/* Formula Tab */
.sat-formula-card {
    background: rgba(5, 12, 24, 0.7);
    border: 1px solid rgba(0, 242, 254, 0.25);
    border-radius: 10px;
    padding: 14px;
}

.sat-formula-title {
    margin: 0 0 10px 0;
    font-size: 0.88rem;
    color: var(--accent-cyan, #00f2fe);
    font-weight: 700;
}

.sat-math-display {
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed rgba(0, 242, 254, 0.3);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    margin-bottom: 12px;
    font-size: 1.05rem;
    color: #ffffff;
    overflow-x: auto;
}

.math-fallback {
    font-family: 'JetBrains Mono', monospace;
    color: #00f2fe;
}

.sat-formula-explain {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.85);
    line-height: 1.5;
}

/* Applications Tab */
.sat-apps-heading {
    margin: 0 0 10px 0;
    font-size: 0.88rem;
    color: #ffffff;
    font-weight: 700;
}

.sat-apps-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sat-apps-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.9);
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.sat-researcher-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.1) 0%, rgba(79, 172, 254, 0.1) 100%);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
}

.sat-researcher-note .note-icon {
    font-size: 1.4rem;
}

.sat-researcher-note h5 {
    margin: 0 0 4px 0;
    font-size: 0.8rem;
    color: var(--accent-cyan, #00f2fe);
    font-weight: 700;
}

.sat-researcher-note p {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
}

/* Modal Footer */
.sat-modal-footer {
    padding: 10px 20px;
    background: rgba(4, 9, 20, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sat-footer-hint {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
}

.sat-modal-btn-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sat-modal-btn-close:hover {
    background: rgba(239, 68, 68, 0.8);
    border-color: #ef4444;
}

/* Time Machine Bar */
.time-machine-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-btn {
    width: 32px;
    height: 32px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid var(--border-subtle);
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.nav-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.1);
}

.date-display-box {
    flex: 1;
    height: 32px;
    background: var(--bg-input);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}

.date-display-box:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}

.play-btn {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-azure));
    border: none;
    color: #030712;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.35);
    transition: all 0.2s;
}

.play-btn:hover {
    transform: scale(1.05);
}

/* =========================================
   SATELLITE IMAGERY & HISTORICAL ARCHIVE CATALOG
   ========================================= */

/* Live Pulse Sync Badge */
.live-pulse-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 3px 7px;
    border-radius: 12px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--accent-emerald);
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
}

.pulse-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-emerald);
    box-shadow: 0 0 8px var(--accent-emerald);
    animation: live-pulse-anim 1.8s infinite;
}

@keyframes live-pulse-anim {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.5;
    }
}

/* Auto-Latest verification in progress state */
.live-pulse-badge.syncing {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
    color: var(--accent-amber, #f59e0b);
}

.live-pulse-badge.syncing .pulse-indicator {
    background: var(--accent-amber, #f59e0b);
    box-shadow: 0 0 8px var(--accent-amber, #f59e0b);
    animation-duration: 0.7s;
}

/* Imagery Mode Switcher (Latest / Historical / Calendar) */
.imagery-mode-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: rgba(15, 23, 42, 0.6);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    margin-bottom: 10px;
}

.imagery-mode-bar-2col {
    grid-template-columns: repeat(2, 1fr);
}

/* Telemetry Highlight Card */
.telemetry-card-highlight {
    position: relative;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 15, 30, 0.95) 100%);
    border: 1px solid rgba(0, 242, 254, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(0, 242, 254, 0.2);
}

.mode-pill {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

.mode-pill:hover {
    color: #fff;
    background: rgba(0, 242, 254, 0.08);
    border-color: rgba(0, 242, 254, 0.3);
    transform: translateY(-1px);
}

.mode-pill.active {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.25), rgba(37, 99, 235, 0.35));
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 242, 254, 0.6);
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.3), inset 0 0 8px rgba(0, 242, 254, 0.15);
    font-weight: 700;
}

/* Active Imagery Banner */
.active-imagery-banner {
    background: linear-gradient(180deg, rgba(13, 20, 36, 0.9) 0%, rgba(8, 12, 24, 0.95) 100%);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: inset 0 0 15px rgba(0, 242, 254, 0.05);
    position: relative;
    overflow: hidden;
}

.active-imagery-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: 0.6;
}

.imagery-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.64rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.meta-label-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-label {
    letter-spacing: 0.8px;
    font-weight: 700;
    color: #94a3b8;
}

.active-dot-live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
    animation: livePulse 2s infinite ease-in-out;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.75);
    }
}

.meta-res-tag {
    background: rgba(0, 242, 254, 0.15);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 242, 254, 0.3);
    padding: 1px 7px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0.5px;
}

/* Time Machine Stepper Deck */
.time-machine-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.smart-step-btn {
    flex-shrink: 0;
    width: 32px;
    height: 34px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(0, 242, 254, 0.25);
    color: #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.smart-step-btn:hover:not(:disabled) {
    border-color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.15);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
    transform: scale(1.05);
}

.smart-step-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.smart-step-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
}

.date-display-box {
    flex: 1;
    min-width: 0;
    height: 34px;
    background: rgba(2, 6, 23, 0.85);
    border: 1px solid rgba(0, 242, 254, 0.4);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    padding: 0 8px;
    transition: all 0.25s;
    box-shadow: inset 0 0 8px rgba(0, 242, 254, 0.1);
}

.date-display-box:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.08);
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.25), inset 0 0 8px rgba(0, 242, 254, 0.2);
}

.date-display-val {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--accent-cyan);
    letter-spacing: 0.5px;
}

.date-day-tag {
    font-size: 0.6rem;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
}

/* Quick Temporal Smart Jumps Row */
.quick-jumps-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.quick-jump-chip {
    flex: 1;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    padding: 4px 2px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.quick-jump-chip:hover {
    color: var(--accent-cyan);
    border-color: rgba(0, 242, 254, 0.4);
    background: rgba(0, 242, 254, 0.1);
    transform: translateY(-1px);
}

.quick-jump-chip:active {
    transform: translateY(0);
}

.quick-jump-chip .qj-icon {
    font-size: 0.7rem;
    color: #fbbf24;
}

/* Historical Multi-Year Jump Deck */
.historical-era-deck {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(0, 242, 254, 0.2);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    animation: fadeInSlide 0.25s ease-out;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.era-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.era-chip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.era-chip {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 5px 2px;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-mono);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.era-chip:hover {
    border-color: var(--accent-cyan);
    color: #fff;
    background: rgba(0, 242, 254, 0.1);
}

.era-chip.active {
    background: rgba(0, 242, 254, 0.2);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.25);
}

/* Seasonal Jump Row */
.seasonal-jump-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.season-pill {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 5px 2px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.season-pill:hover {
    border-color: var(--accent-azure);
    color: #fff;
    background: rgba(56, 189, 248, 0.1);
}

.season-pill.active {
    border-color: var(--accent-azure);
    background: rgba(56, 189, 248, 0.2);
    color: var(--accent-azure);
    font-weight: 700;
}

/* Available Satellite Passes & Scenes Matrix */
.scene-count-badge {
    font-size: 0.62rem;
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    background: rgba(0, 242, 254, 0.12);
    border: 1px solid rgba(0, 242, 254, 0.25);
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.scene-list-scroll {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 2px;
}

.scene-list-scroll::-webkit-scrollbar {
    width: 4px;
}

.scene-list-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 242, 254, 0.25);
    border-radius: 2px;
}

.scene-item-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
}

.scene-item-card:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.06);
    transform: translateX(2px);
}

.scene-item-card.active {
    border-color: var(--accent-cyan);
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.14), rgba(15, 23, 42, 0.9));
    box-shadow: 0 0 14px rgba(0, 242, 254, 0.18), inset 0 0 8px rgba(0, 242, 254, 0.08);
}

.scene-item-card.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--accent-cyan);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px var(--accent-cyan);
}

.scene-card-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.12), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(0, 242, 254, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.scene-card-thumb img,
.scene-card-thumb canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scene-card-thumb.thumb-fallback::after {
    content: '🛰️';
    font-size: 1.05rem;
    opacity: 0.7;
}

.scene-item-card.active .scene-card-thumb {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.3);
}

.scene-list-loading {
    padding: 24px 10px;
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Skeleton Loading Shimmer */
.scene-skeleton-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px 10px;
    position: relative;
    overflow: hidden;
}

.scene-skeleton-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
}

.scene-skeleton-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scene-skeleton-line-1 {
    width: 65%;
    height: 12px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
}

.scene-skeleton-line-2 {
    width: 45%;
    height: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
}

.scene-skeleton-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.08), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    100% {
        left: 100%;
    }
}

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

.scene-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.scene-date-text {
    font-size: 0.74rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: #f1f5f9;
}

.scene-item-card.active .scene-date-text {
    color: var(--accent-cyan);
}

.scene-badge-active {
    background: linear-gradient(135deg, var(--accent-cyan), #0284c7);
    color: #030712;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 6px rgba(0, 242, 254, 0.4);
}

.btn-load-scene {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: var(--accent-cyan);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-load-scene:hover {
    background: var(--accent-cyan);
    color: #030712;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.35);
}

.scene-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.62rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.scene-quality-pill {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Palette & Display Floating Popover */
.palette-popover {
    position: absolute;
    right: 56px;
    bottom: 20px;
    width: 250px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    padding: 12px;
    z-index: 500;
    backdrop-filter: blur(16px);
    display: none;
    flex-direction: column;
    gap: 10px;
    animation: popover-fade 0.2s ease-out;
}

@keyframes popover-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Palette Grid & Pills */
.palette-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.palette-pill {
    padding: 5px 3px;
    border-radius: 5px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-input);
    font-size: 0.62rem;
    text-align: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.palette-pill:hover {
    border-color: var(--accent-cyan);
    color: #fff;
}

.palette-pill.active {
    border-color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.12);
    color: var(--accent-cyan);
    font-weight: 700;
}

.palette-preview {
    width: 100%;
    height: 3px;
    border-radius: 2px;
}

/* Action Buttons */
.btn-action {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
}

.btn-primary-glow {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-azure));
    color: #030712;
    box-shadow: 0 3px 12px rgba(0, 242, 254, 0.3);
}

.btn-primary-glow:hover {
    box-shadow: 0 5px 20px rgba(0, 242, 254, 0.5);
    transform: translateY(-1px);
}

.btn-secondary-glow {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: #fff;
}

.btn-secondary-glow:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.08);
    color: var(--accent-cyan);
}

/* =========================================
   CENTER MAP VIEWPORT
   ========================================= */
.map-viewport {
    flex: 1;
    position: relative;
    background: #02040a;
    overflow: hidden;
}

#map {
    width: 100%;
    height: 100%;
}

/* HUD Laser & Brackets */
.hud-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.hud-corner-bracket {
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: rgba(0, 242, 254, 0.4);
    border-style: solid;
}

.hud-corner-bracket.tl {
    top: 12px;
    left: 12px;
    border-width: 2px 0 0 2px;
}

.hud-corner-bracket.tr {
    top: 12px;
    right: 12px;
    border-width: 2px 2px 0 0;
}

.hud-corner-bracket.bl {
    bottom: 12px;
    left: 12px;
    border-width: 0 0 2px 2px;
}

.hud-corner-bracket.br {
    bottom: 12px;
    right: 12px;
    border-width: 0 2px 2px 0;
}

.laser-scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.7), rgba(56, 189, 248, 0.9), transparent);
    box-shadow: 0 0 15px var(--accent-cyan);
    animation: laser-scan 9s ease-in-out infinite;
    display: none;
}

@keyframes laser-scan {
    0% {
        top: 0%;
        opacity: 0.1;
    }

    50% {
        top: 100%;
        opacity: 0.9;
    }

    100% {
        top: 0%;
        opacity: 0.1;
    }
}

/* Split Compare Slider Handle */
#swipe-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-cyan);
    left: 50%;
    cursor: ew-resize;
    z-index: 150;
    display: none;
    box-shadow: 0 0 20px var(--accent-cyan);
}

#swipe-handle::after {
    content: "â—€ COMPARE â–¶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #030712;
    color: var(--accent-cyan);
    border: 1px solid var(--accent-cyan);
    border-radius: 20px;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 800;
    font-family: var(--font-mono);
    letter-spacing: 1.5px;
    white-space: nowrap;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.5);
}

/* =========================================
   DYNAMIC SCIENTIFIC MAP LEGEND
   ========================================= */
.legend-card {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--bg-surface-1);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 240px;
    max-width: 300px;
    z-index: 120;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
    transition: all 0.3s;
}

.legend-card:hover {
    border-color: rgba(0, 242, 254, 0.35);
}

.legend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.legend-bar {
    height: 9px;
    width: 100%;
    border-radius: 4px;
    margin-bottom: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.legend-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-secondary);
}

.legend-ticks-row {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
    margin-top: 1px;
}

.legend-tick-mark {
    width: 1px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
}

.legend-guide-tag {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.3;
}

/* Map Right Rail Tools */
.map-tools-rail {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 120;
}

.tool-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.2s;
    font-size: 1rem;
}

.tool-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    transform: scale(1.06);
}

.tool-btn.active {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.2), rgba(37, 99, 235, 0.3));
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: var(--glow-cyan);
}

/* Draw Sub-panel */
.draw-panel {
    position: absolute;
    top: 20px;
    right: 66px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px;
    backdrop-filter: var(--glass-blur);
    display: none;
    flex-direction: column;
    gap: 5px;
    min-width: 160px;
    z-index: 120;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
}

.draw-option-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 7px 10px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

body[data-lang="ar"] .draw-option-btn {
    text-align: right;
}

.draw-option-btn:hover {
    border-color: var(--accent-cyan);
    color: #fff;
    background: rgba(0, 242, 254, 0.1);
}

/* Real-time Cursor Badge */
#inspector-badge {
    position: absolute;
    pointer-events: none;
    background: rgba(3, 7, 18, 0.92);
    border: 1px solid var(--accent-cyan);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 242, 254, 0.4);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    z-index: 500;
    display: none;
    transform: translate(12px, 12px);
    backdrop-filter: blur(8px);
}

/* =========================================
   RIGHT ANALYTICS DRAWER
   ========================================= */
.drawer-right {
    width: var(--analytics-w);
    background: var(--bg-surface-1);
    border-left: 1px solid var(--border-subtle);
    backdrop-filter: var(--glass-blur);
    display: flex;
    flex-direction: column;
    z-index: 200;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin 0.35s ease;
    overflow-y: auto;
    flex-shrink: 0;
}

.drawer-right.collapsed {
    transform: translateX(100%);
    margin-left: calc(-1 * var(--analytics-w));
}

body[data-lang="ar"] .drawer-right {
    border-left: none;
    border-right: 1px solid var(--border-subtle);
}

body[data-lang="ar"] .drawer-right.collapsed {
    transform: translateX(-100%);
    margin-right: calc(-1 * var(--analytics-w));
    margin-left: 0;
}

/* Chart Switcher Tabs */
.chart-tabs-bar {
    display: flex;
    background: var(--bg-input);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    gap: 3px;
}

.chart-tab-btn {
    flex: 1;
    padding: 6px 3px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.chart-tab-btn:hover {
    color: #fff;
}

.chart-tab-btn.active {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.2), rgba(37, 99, 235, 0.3));
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 242, 254, 0.3);
}

.chart-canvas-container {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px;
    height: 210px;
    position: relative;
    margin-top: 8px;
}

/* Stats Cards Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.stat-card {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: all 0.2s;
}

.stat-card:hover {
    border-color: rgba(0, 242, 254, 0.3);
}

.stat-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-val {
    font-size: 1.05rem;
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-primary);
}

.stat-val.highlight {
    color: var(--accent-cyan);
}

.stat-trend {
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
}

.stat-trend.up {
    color: var(--accent-emerald);
}

.stat-trend.down {
    color: var(--accent-rose);
}

.stat-trend.neutral {
    color: var(--text-muted);
}

/* ROI Filter Chips */
.roi-selector-bar {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.roi-chip {
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.roi-chip:hover {
    border-color: var(--accent-cyan);
    color: #fff;
}

.roi-chip.active {
    border-color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.15);
    color: var(--accent-cyan);
    font-weight: 700;
}

.roi-chip-disabled {
    opacity: 0.32;
    filter: grayscale(0.7);
    pointer-events: none;
}

#roi-lock-note {
    display: none;
    margin-top: 6px;
    font-size: 0.62rem;
    color: var(--accent-emerald);
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
}

/* Export Grid */
.export-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.export-btn {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 6px 4px;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.export-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.1);
}

/* =========================================
   BOTTOM FOOTER — SLIM COPYRIGHT BAR
   ========================================= */
footer.footer-slim {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    flex-shrink: 0;
    background: rgba(2, 4, 10, 0.96);
    border-top: 1px solid rgba(0, 242, 254, 0.15);
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
    backdrop-filter: blur(14px);
    gap: 16px;
    position: sticky;
    bottom: 0;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.footer-sep {
    color: rgba(255, 255, 255, 0.15);
    margin: 0 2px;
}

.footer-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    transition: all 0.18s ease;
    border: 1px solid transparent;
}

.footer-nav-link:hover {
    color: #00f2fe;
    background: rgba(0, 242, 254, 0.08);
    border-color: rgba(0, 242, 254, 0.25);
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.15);
}

.footer-nav-link svg {
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.footer-nav-link:hover svg {
    transform: scale(1.1);
}

.footer-copy {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-copy strong {
    color: #f8fafc;
    font-weight: 700;
}

.footer-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Footer Windows Button ────────────────────────── */
.footer-windows-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 20px;
    background: rgba(0, 120, 215, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(0, 120, 215, 0.15);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-windows-btn:hover {
    background: rgba(0, 120, 215, 0.3);
    border-color: #38bdf8;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
}

.windows-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    fill: currentColor;
}

/* ── Footer Support Button ────────────────────────── */
.footer-support-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 20px;
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(251, 113, 133, 0.35);
    color: #fb7185;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.15);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-support-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    fill: currentColor;
    animation: heart-beat 1.6s ease-in-out infinite;
}

.footer-support-btn:hover {
    background: rgba(244, 63, 94, 0.28);
    border-color: #fb7185;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(251, 113, 133, 0.45);
}

/* ── Footer LinkedIn Link ────────────────────────── */
.footer-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 20px;
    background: rgba(10, 102, 194, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.35);
    color: #60a5fa;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(10, 102, 194, 0.15);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-linkedin svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    fill: currentColor;
}

.footer-linkedin:hover {
    background: rgba(10, 102, 194, 0.3);
    border-color: #60a5fa;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(96, 165, 250, 0.45);
}

/* Telemetry readout labels in new footer */
.telemetry-label {
    color: var(--text-muted);
    font-weight: 600;
}

.telemetry-val {
    color: var(--accent-cyan);
    font-weight: 700;
}

.telemetry-val.highlight {
    color: #fff;
}

@keyframes heart-beat {

    0%,
    100% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.25);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.18);
    }

    56% {
        transform: scale(1);
    }
}

/* ── Support Modal Overlay ────────────────────────── */
.support-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(2, 4, 14, 0.82);
    backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.support-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.support-modal-card {
    position: relative;
    width: 360px;
    max-width: 94vw;
    background: linear-gradient(145deg, rgba(8, 14, 28, 0.98) 0%, rgba(14, 20, 38, 0.98) 100%);
    border: 1px solid rgba(251, 113, 133, 0.3);
    border-radius: 20px;
    padding: 36px 32px 28px;
    box-shadow:
        0 0 0 1px rgba(251, 113, 133, 0.08),
        0 30px 80px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(251, 113, 133, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transform: scale(0.92) translateY(12px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.support-modal-overlay.active .support-modal-card {
    transform: scale(1) translateY(0);
}

.support-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.support-modal-close:hover {
    background: rgba(251, 113, 133, 0.15);
    color: #fb7185;
}

.support-modal-close svg {
    width: 14px;
    height: 14px;
}

.support-heart-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.2), rgba(244, 63, 94, 0.1));
    border: 1px solid rgba(251, 113, 133, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(251, 113, 133, 0.2);
}

.support-heart-icon svg {
    width: 24px;
    height: 24px;
    fill: #fb7185;
    animation: heart-beat 1.6s ease-in-out infinite;
}

.support-modal-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0;
}

.support-modal-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    line-height: 1.6;
    max-width: 280px;
    margin: 0;
}

.support-modal-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.support-qr-img {
    width: 190px;
    height: 190px;
    border-radius: 12px;
    border: 2px solid rgba(251, 113, 133, 0.25);
    object-fit: contain;
    background: #fff;
    padding: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.support-qr-label {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin: 0;
}

.support-qr-label strong {
    color: rgba(251, 113, 133, 0.85);
}

.support-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #fb7185, #f43f5e);
    color: #fff;
    font-size: 0.8rem;
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 24px;
    box-shadow: 0 4px 18px rgba(244, 63, 94, 0.35);
    transition: box-shadow 0.2s, transform 0.15s;
}

.support-modal-btn svg {
    width: 15px;
    height: 15px;
}

.support-modal-btn:hover {
    box-shadow: 0 6px 28px rgba(244, 63, 94, 0.55);
    transform: translateY(-1px);
}

.support-modal-thanks {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    margin: 0;
}

/* Loader Ring */
.loader-ring {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 242, 254, 0.15);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Modern Vector Icons (SVGs) */
.svg-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: transform 0.2s ease, stroke 0.2s ease;
}

.svg-icon.fill-curr {
    fill: currentColor;
    stroke: none;
}

.svg-icon-sm {
    width: 13px;
    height: 13px;
}

.svg-icon-lg {
    width: 18px;
    height: 18px;
}

.icon-btn svg,
.tool-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-btn:hover svg,
.tool-btn:hover svg {
    stroke: var(--accent-cyan);
}

.region-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.region-switch-btn svg {
    width: 14px;
    height: 14px;
}

.mode-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.mode-pill svg {
    width: 13px;
    height: 13px;
}

.chart-tab-btn svg {
    width: 15px;
    height: 15px;
    margin-bottom: 2px;
}

.draw-option-btn svg,
.export-btn svg,
.chart-export-btn svg {
    width: 14px;
    height: 14px;
}

.btn-action svg {
    width: 16px;
    height: 16px;
}

/* Toast */
#toast {
    position: fixed;
    top: 76px;
    right: 20px;
    background: rgba(8, 14, 26, 0.95);
    border: 1px solid var(--accent-cyan);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8), var(--glow-cyan);
    z-index: 10000;
    backdrop-filter: blur(12px);
    transform: translateY(-20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

#toast.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

#toast svg {
    width: 16px;
    height: 16px;
    color: var(--accent-cyan);
}

/* Inspector Value Status */
.insp-val-active {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    gap: 5px;
}

.insp-val-nodata {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Responsive */
@media (max-width: 1024px) {
    .drawer-right {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8);
    }

    .drawer-left {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.8);
    }

    .category-filter-bar {
        display: none;
    }
}

/* ============================================================
   SPACE CURSOR — Native System Cursor (Zero Input Lag & Stutter Free)
   ============================================================ */


@media (hover: none) or (pointer: coarse) {

    .space-cursor-dot,
    .space-cursor-ring,
    #space-cursor-dot,
    #space-cursor-ring {
        display: none !important;
        pointer-events: none !important;
    }
}

.space-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00f2fe;
    box-shadow:
        0 0 6px 2px rgba(0, 242, 254, 0.95),
        0 0 14px 4px rgba(0, 242, 254, 0.55),
        0 0 30px 6px rgba(0, 242, 254, 0.25);
    pointer-events: none;
    z-index: 9999999;
    transform: translate(-50%, -50%);
    transition: width 0.12s ease, height 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
    will-change: transform;
}

.space-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 242, 254, 0.65);
    box-shadow:
        0 0 8px 1px rgba(0, 242, 254, 0.35),
        inset 0 0 8px 1px rgba(0, 242, 254, 0.08);
    pointer-events: none;
    z-index: 9999998;
    transform: translate(-50%, -50%);
    transition: width 0.22s cubic-bezier(0.25, 1, 0.5, 1),
        height 0.22s cubic-bezier(0.25, 1, 0.5, 1),
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
    will-change: transform;
}

/* Tick marks — rotate around the ring to simulate a radar sweep */
.space-cursor-ring::before,
.space-cursor-ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid transparent;
    inset: -4px;
    border-top-color: rgba(0, 242, 254, 0.55);
    animation: cursor-ring-spin 2.8s linear infinite;
}

.space-cursor-ring::after {
    inset: -8px;
    border-top-color: rgba(4, 217, 255, 0.3);
    animation-duration: 4.2s;
    animation-direction: reverse;
}

@keyframes cursor-ring-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Click burst */
.space-cursor-dot.clicking {
    width: 5px;
    height: 5px;
    background: #fff;
    box-shadow:
        0 0 10px 4px rgba(0, 242, 254, 1),
        0 0 26px 8px rgba(0, 242, 254, 0.6);
}

.space-cursor-ring.clicking {
    width: 52px;
    height: 52px;
    border-color: rgba(0, 242, 254, 0.95);
    box-shadow: 0 0 20px 4px rgba(0, 242, 254, 0.55);
    opacity: 0.7;
}

/* Hover active state — over clickable elements */
.space-cursor-dot.hovering {
    width: 10px;
    height: 10px;
    background: var(--accent-azure);
    box-shadow:
        0 0 10px 3px rgba(79, 172, 254, 0.9),
        0 0 24px 6px rgba(79, 172, 254, 0.4);
}

.space-cursor-ring.hovering {
    width: 46px;
    height: 46px;
    border-color: rgba(79, 172, 254, 0.75);
}

/* =========================================================================
   EXECUTIVE EARTH INTELLIGENCE REPORT MODAL & PRINT STYLES
   ========================================================================= */

.report-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(3, 7, 18, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.25s ease-out;
}

.report-modal-overlay.active {
    display: flex;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.report-modal-dialog {
    background: #0b1329;
    border: 1px solid rgba(0, 242, 254, 0.35);
    border-radius: 12px;
    width: 100%;
    max-width: 960px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 242, 254, 0.15);
    overflow: hidden;
}

.report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
    gap: 12px;
}

.report-toolbar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    font-family: var(--font-orbitron);
}

.report-badge-official {
    background: rgba(0, 242, 254, 0.15);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 242, 254, 0.35);
    font-size: 0.58rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    font-family: var(--font-mono);
}

.report-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-viewport {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #070c1a;
}

.report-viewport::-webkit-scrollbar {
    width: 6px;
}

.report-viewport::-webkit-scrollbar-thumb {
    background: rgba(0, 242, 254, 0.3);
    border-radius: 3px;
}

/* Document Sheet */
.report-document {
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 28px 32px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
    font-family: var(--font-main);
    line-height: 1.5;
}

/* Header */
.rep-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid rgba(0, 242, 254, 0.4);
    padding-bottom: 16px;
    margin-bottom: 20px;
    gap: 16px;
}

.rep-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rep-logo-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: rgba(0, 242, 254, 0.1);
    padding: 4px;
}

.rep-title-box h2 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--font-orbitron);
    margin: 0;
    letter-spacing: 0.5px;
}

.rep-title-box p {
    font-size: 0.72rem;
    color: var(--accent-cyan);
    margin: 2px 0 0 0;
    font-weight: 600;
}

.rep-meta-box {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: #94a3b8;
    line-height: 1.4;
}

[dir="rtl"] .rep-meta-box {
    text-align: left;
}

/* Advisory Alert Box */
.rep-advisory-box {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.1), rgba(30, 41, 59, 0.6));
    border-left: 4px solid var(--accent-cyan);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

[dir="rtl"] .rep-advisory-box {
    border-left: none;
    border-right: 4px solid var(--accent-cyan);
}

.rep-advisory-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--accent-cyan);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rep-advisory-text {
    font-size: 0.76rem;
    color: #cbd5e1;
    margin: 0;
}

/* Sections */
.rep-section {
    margin-bottom: 22px;
}

.rep-section-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--font-orbitron);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

/* Embedded Map Snapshot */
.rep-map-frame {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 242, 254, 0.3);
    background: #020617;
    position: relative;
    margin-bottom: 8px;
}

.rep-map-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.rep-map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.95);
    padding: 6px 12px;
    font-size: 0.65rem;
    color: #94a3b8;
    font-family: var(--font-mono);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Statistics Table Matrix */
.rep-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    margin-top: 6px;
}

.rep-table th {
    background: rgba(15, 23, 42, 0.9);
    color: var(--accent-cyan);
    font-weight: 700;
    padding: 7px 10px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font-mono);
}

[dir="rtl"] .rep-table th {
    text-align: right;
}

.rep-table td {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #e2e8f0;
}

.rep-table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.rep-val-highlight {
    font-weight: 700;
    color: var(--accent-cyan);
    font-family: var(--font-mono);
}

/* Chart Frame */
.rep-chart-frame {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
}

.rep-chart-img {
    max-width: 100%;
    height: 180px;
    object-fit: contain;
}

/* Sector Risk Table */
.rep-risk-pill {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.58rem;
    font-weight: 800;
}

.rep-risk-low {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.rep-risk-med {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.rep-risk-high {
    background: rgba(244, 63, 94, 0.2);
    color: #fb7185;
}

/* Sign-off & Verification Footer */
.rep-sign-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 2px solid rgba(0, 242, 254, 0.3);
    gap: 16px;
}

.rep-signature-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rep-sign-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--font-orbitron);
}

.rep-sign-role {
    font-size: 0.68rem;
    color: var(--accent-cyan);
}

.rep-sign-date {
    font-size: 0.62rem;
    color: #94a3b8;
    font-family: var(--font-mono);
}

.rep-seal-badge {
    border: 2px solid var(--accent-cyan);
    border-radius: 6px;
    padding: 6px 12px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.08);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* =========================================================================
   PRINT SPECIFIC ENGINE (A4 Document Format)
   ========================================================================= */

@media print {

    /* Hide all main app interface */
    body {
        background: #fff !important;
        color: #0f172a !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    header,
    aside,
    .map-viewport,
    footer,
    #toast,
    #space-cursor-dot,
    #space-cursor-ring,
    .report-toolbar {
        display: none !important;
    }

    .report-modal-overlay {
        position: static !important;
        display: block !important;
        background: none !important;
        backdrop-filter: none !important;
        padding: 0 !important;
    }

    .report-modal-dialog {
        background: #fff !important;
        border: none !important;
        box-shadow: none !important;
        max-width: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    .report-viewport {
        background: #fff !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .report-document {
        background: #fff !important;
        color: #0f172a !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .rep-header {
        border-bottom: 2px solid #0284c7 !important;
    }

    .rep-title-box h2 {
        color: #0f172a !important;
    }

    .rep-title-box p {
        color: #0284c7 !important;
    }

    .rep-meta-box {
        color: #475569 !important;
    }

    .rep-advisory-box {
        background: #f0f9ff !important;
        border-left-color: #0284c7 !important;
        border-right-color: #0284c7 !important;
    }

    .rep-advisory-title {
        color: #0369a1 !important;
    }

    .rep-advisory-text {
        color: #334155 !important;
    }

    .rep-section-title {
        color: #0f172a !important;
        border-bottom-color: #cbd5e1 !important;
    }

    .rep-map-frame {
        border-color: #94a3b8 !important;
        background: #f8fafc !important;
    }

    .rep-map-footer {
        background: #f1f5f9 !important;
        color: #475569 !important;
    }

    .rep-table th {
        background: #f1f5f9 !important;
        color: #0f172a !important;
        border-color: #cbd5e1 !important;
    }

    .rep-table td {
        border-color: #e2e8f0 !important;
        color: #1e293b !important;
    }

    .rep-val-highlight {
        color: #0369a1 !important;
    }

    .rep-chart-frame {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    .rep-sign-footer {
        border-top: 2px solid #0284c7 !important;
    }

    .rep-sign-name {
        color: #0f172a !important;
    }

    .rep-sign-role {
        color: #0369a1 !important;
    }

    .rep-seal-badge {
        border-color: #0284c7 !important;
        color: #0369a1 !important;
        background: #f0f9ff !important;
    }

    .rep-section {
        page-break-inside: avoid;
    }
}

/* =========================================================================
   INTERACTIVE STAT CARDS & TELEMETRY DEEP DIVE INSPECTOR
   ========================================================================= */

.stat-card-interactive {
    cursor: pointer;
    position: relative;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    will-change: transform;
}

.stat-card-interactive:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 242, 254, 0.55);
    box-shadow: 0 4px 18px rgba(0, 242, 254, 0.18), inset 0 0 12px rgba(0, 242, 254, 0.08);
}

.stat-card-interactive:active {
    transform: scale(0.98);
}

.stat-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.stat-inspect-icon {
    font-size: 0.7rem;
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.stat-card-interactive:hover .stat-inspect-icon {
    opacity: 1;
    transform: scale(1.15);
}

/* Inspector Dialog */
.telemetry-inspector-dialog {
    max-width: 780px;
    border-color: rgba(0, 242, 254, 0.5);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 242, 254, 0.2);
}

.insp-hero-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.7));
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.insp-hero-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.insp-metric-title {
    font-size: 0.72rem;
    color: #94a3b8;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.insp-hero-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent-cyan);
    font-family: var(--font-orbitron);
    line-height: 1.1;
    text-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
}

.insp-hero-badge {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    font-family: var(--font-mono);
    margin-top: 4px;
}

/* Range Gauge Bar */
.insp-gauge-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.insp-gauge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.68rem;
    font-family: var(--font-mono);
    color: #94a3b8;
    margin-bottom: 8px;
}

.insp-gauge-track {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: visible;
}

.insp-gauge-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #00f2fe, #4facfe);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
    transition: width 0.4s ease;
}

.insp-gauge-marker {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 16px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 8px #fff;
    transform: translateX(-50%);
}

.insp-gauge-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.6rem;
    color: #64748b;
    font-family: var(--font-mono);
}

/* Detail Section Cards */
.insp-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 650px) {
    .insp-info-grid {
        grid-template-columns: 1fr;
    }
}

.insp-info-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 14px;
}

.insp-card-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--font-orbitron);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.insp-card-desc {
    font-size: 0.75rem;
    color: #cbd5e1;
    line-height: 1.5;
    margin: 0;
}

/* Quick Telemetry Specs Matrix */
.insp-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
    margin-top: 4px;
}

.insp-specs-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.insp-specs-table td:first-child {
    color: #94a3b8;
    font-family: var(--font-mono);
    width: 40%;
}

.insp-specs-table td:last-child {
    color: #fff;
    font-weight: 600;
}

/* =========================================================================
   3D DIGITAL EARTH GLOBE ENGINE (OPTIONAL VIEWPORT)
   ========================================================================= */

.globe-3d-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    background: radial-gradient(circle at 50% 50%, #061126 0%, #020612 100%);
    overflow: hidden;
}

.globe-3d-canvas-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: grab;
}

.globe-3d-canvas-wrap:active {
    cursor: grabbing;
}

.globe-3d-hud {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(11, 19, 41, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 242, 254, 0.35);
    border-radius: 30px;
    padding: 8px 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 242, 254, 0.15);
}

.globe-3d-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    padding-right: 14px;
}

[dir="rtl"] .globe-3d-meta {
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-right: 0;
    padding-left: 14px;
}

.globe-badge-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--accent-cyan);
    font-family: var(--font-orbitron);
    letter-spacing: 0.5px;
}

.globe-ds-tag {
    font-size: 0.62rem;
    color: #94a3b8;
    font-family: var(--font-mono);
}

.globe-3d-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.globe-ctrl-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    font-size: 0.68rem;
    font-weight: 600;
    font-family: var(--font-main);
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.globe-ctrl-btn:hover {
    background: rgba(0, 242, 254, 0.15);
    border-color: rgba(0, 242, 254, 0.4);
    color: #fff;
    transform: translateY(-1px);
}

.globe-ctrl-btn.active {
    background: rgba(0, 242, 254, 0.2);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
}

.globe-ctrl-btn.btn-return-2d {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.25), rgba(79, 172, 254, 0.25));
    border-color: var(--accent-cyan);
    color: #fff;
    font-weight: 700;
}

/* 3D Floating Pixel Inspector Tooltip */
.globe-3d-inspector-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 2500;
    background: rgba(7, 14, 30, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 242, 254, 0.5);
    border-radius: 12px;
    padding: 10px 14px;
    color: #f8fafc;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 242, 254, 0.25);
    min-width: 190px;
    transform: translate(20px, -20px);
    transition: opacity 0.15s ease, transform 0.08s ease;
}

.globe-insp-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    font-family: var(--font-orbitron, monospace);
    font-weight: 700;
    color: var(--accent-cyan, #00f2fe);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.globe-insp-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00f2fe;
    box-shadow: 0 0 8px #00f2fe;
    animation: pulse 1.5s infinite;
}

.globe-insp-res {
    margin-left: auto;
    font-size: 0.58rem;
    color: #38bdf8;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

[dir="rtl"] .globe-insp-res {
    margin-left: 0;
    margin-right: auto;
}

.globe-insp-coords {
    font-size: 0.72rem;
    font-family: var(--font-mono, monospace);
    color: #cbd5e1;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

.globe-insp-data-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 10px;
}

.globe-insp-swatch {
    width: 14px;
    height: 28px;
    border-radius: 4px;
    background: #00f2fe;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.4);
    flex-shrink: 0;
}

.globe-insp-val-wrap {
    display: flex;
    flex-direction: column;
}

.globe-insp-val {
    font-size: 0.96rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--font-mono, monospace);
    line-height: 1.1;
}

.globe-insp-label {
    font-size: 0.58rem;
    color: #94a3b8;
}

/* 3D Toolbar Button Badge */
.btn-3d-globe-tool {
    position: relative;
}

.tool-3d-badge {
    font-family: var(--font-orbitron);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent-cyan);
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.6);
}

/* 3D Fullscreen Clean Mode: Hide overlapping 2D drawers, 2D legends & badges */
body.globe-3d-active-mode .globe-3d-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2000 !important;
}

body.globe-3d-active-mode .drawer-left,
body.globe-3d-active-mode .drawer-right {
    transform: translateX(-120%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

body[data-lang="ar"].globe-3d-active-mode .drawer-left {
    transform: translateX(120%) !important;
}

body.globe-3d-active-mode .drawer-right {
    transform: translateX(120%) !important;
}

body[data-lang="ar"].globe-3d-active-mode .drawer-right {
    transform: translateX(-120%) !important;
}

body.globe-3d-active-mode .legend-card,
body.globe-3d-active-mode #inspector-badge,
body.globe-3d-active-mode .hud-overlay,
body.globe-3d-active-mode #map-aoi-hud-chip {
    display: none !important;
}

/* Bulk Acquisition Map Toolbar Button */
.btn-bulk-download-tool {
    position: relative;
    border-color: rgba(0, 242, 254, 0.35) !important;
}

.btn-bulk-download-tool:hover {
    background: rgba(0, 242, 254, 0.22) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.5) !important;
}

.btn-bulk-download-tool .tool-bulk-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 6px var(--accent-cyan);
    animation: dotPulse 1.5s infinite alternate;
}

.btn-3d-globe-tool.active {
    background: rgba(0, 242, 254, 0.25) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.5) !important;
}

/* =========================================
   WINDOWS DESKTOP APP MODAL
   ========================================= */

.windows-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    fill: currentColor;
}

/* Windows Modal Styles */
.windows-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(3, 7, 18, 0.85);
    backdrop-filter: blur(14px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.windows-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.windows-modal-card {
    background: linear-gradient(180deg, rgba(13, 22, 45, 0.96) 0%, rgba(8, 14, 28, 0.98) 100%);
    border: 1px solid rgba(0, 242, 254, 0.35);
    border-radius: 20px;
    width: 100%;
    max-width: 580px;
    padding: 32px;
    position: relative;
    box-shadow: 0 0 50px rgba(0, 242, 254, 0.2), 0 20px 40px rgba(0, 0, 0, 0.8);
    animation: modalPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn {
    from {
        transform: scale(0.92) translateY(20px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.windows-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.windows-modal-close:hover {
    background: rgba(244, 63, 94, 0.2);
    border-color: rgba(244, 63, 94, 0.5);
    color: #fff;
}

.windows-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(0, 242, 254, 0.12);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.windows-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.windows-modal-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(0, 242, 254, 0.15);
    border: 1px solid rgba(0, 242, 254, 0.4);
    padding: 8px;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.3);
}

.windows-modal-title {
    font-family: var(--font-orbitron);
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
}

.windows-modal-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 3px;
}

.windows-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 18px 0 22px;
}

.windows-feat-item {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.windows-feat-icon {
    font-size: 1.1rem;
}

.windows-feat-text {
    font-size: 0.74rem;
    color: #cbd5e1;
    font-weight: 600;
}

.windows-actions-deck {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-win-primary {
    width: 100%;
    padding: 13px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0078d4, #00f2fe);
    border: none;
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.4);
    transition: all 0.2s;
}

.btn-win-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(0, 242, 254, 0.65);
}

.btn-win-secondary {
    width: 100%;
    padding: 11px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-win-secondary:hover {
    background: rgba(0, 242, 254, 0.12);
    border-color: rgba(0, 242, 254, 0.4);
    color: var(--accent-cyan);
}

/* ============================================================
   JAXA CARTOGRAPHIC MAP EXPORTER (Publication Studio Modal)
   ============================================================ */
.btn-map-export-tool {
    position: relative;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.25), rgba(0, 242, 254, 0.15)) !important;
    border: 1px solid rgba(0, 242, 254, 0.4) !important;
    color: var(--accent-cyan) !important;
}

.btn-map-export-tool:hover {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.45), rgba(0, 242, 254, 0.35)) !important;
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.5) !important;
    transform: scale(1.05);
}

.tool-export-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    background: #0284c7;
    color: #ffffff;
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid #00f2fe;
    line-height: 1;
    pointer-events: none;
}

/* Modal Overlay (Fixed, Hidden by default, centered) */
#map-export-modal.modal-overlay,
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 8, 18, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

#map-export-modal.modal-overlay.active,
.modal-overlay.active {
    display: flex !important;
}

.modal-close-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.6);
    color: #ef4444;
    transform: scale(1.08);
}

/* Modal Window */
.map-export-modal-window {
    width: 95vw;
    max-width: 1100px;
    height: 90vh;
    max-height: 860px;
    background: radial-gradient(circle at top left, #0d172e 0%, #060a14 100%);
    border: 1px solid rgba(0, 242, 254, 0.35);
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 242, 254, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e2e8f0;
    animation: mapExportModalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mapExportModalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.map-export-header {
    padding: 1.1rem 1.6rem;
    background: rgba(15, 23, 42, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.map-export-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(0, 242, 254, 0.12);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: var(--accent-cyan);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.map-export-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #f8fafc;
    margin: 0 0 0.3rem 0;
}

.map-export-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.4;
}

.map-export-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem 1.5rem;
    gap: 0.8rem;
}

/* Toolbar */
.map-export-toolbar {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.6rem 1rem;
}

.export-tool-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.export-tool-right {
    margin-left: auto;
}

.export-tool-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #cbd5e1;
}

.export-theme-toggles {
    display: flex;
    gap: 0.35rem;
}

.export-theme-btn {
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s;
}

.export-theme-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.export-theme-btn.active {
    background: rgba(0, 242, 254, 0.18);
    border-color: rgba(0, 242, 254, 0.5);
    color: var(--accent-cyan);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
}

.export-select {
    padding: 6px 10px;
    border-radius: 7px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-refresh-export {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 12px;
    border-radius: 7px;
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: var(--accent-cyan);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-refresh-export:hover {
    background: rgba(0, 242, 254, 0.2);
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.3);
}

/* Preview Stage */
.map-export-preview-stage {
    flex: 1;
    position: relative;
    background: #020617;
    background-image:
        linear-gradient(45deg, #090e1f 25%, transparent 25%),
        linear-gradient(-45deg, #090e1f 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #090e1f 75%),
        linear-gradient(-45deg, transparent 75%, #090e1f 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.export-canvas-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.export-loading-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(6, 10, 20, 0.85);
    backdrop-filter: blur(6px);
    z-index: 10;
    color: var(--accent-cyan);
    font-size: 0.88rem;
    font-weight: 700;
}

.spinner-ring {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(0, 242, 254, 0.2);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spinnerRotate 0.8s linear infinite;
}

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

/* Footer */
.map-export-footer {
    padding: 0.9rem 1.6rem;
    background: rgba(15, 23, 42, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.export-meta-info {
    font-size: 0.75rem;
    color: #94a3b8;
    font-family: monospace;
}

.export-action-btns {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.btn-export-copy {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 9px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-export-copy:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-export-download.jpeg {
    padding: 9px 14px;
    border-radius: 8px;
    background: rgba(2, 132, 199, 0.2);
    border: 1px solid rgba(2, 132, 199, 0.4);
    color: #38bdf8;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-export-download.jpeg:hover {
    background: rgba(2, 132, 199, 0.35);
}

.btn-export-download.png {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 9px 20px;
    border-radius: 8px;
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    border: none;
    color: #060a14;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
    transition: all 0.2s;
}

.btn-export-download.png:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 242, 254, 0.65);
}

/* =========================================================================
   JAXA CLIMATE PULSE (نبض المناخ) — FLOATING SATELLITE PLAYER STYLES
   ========================================================================= */

/* Toolbar Rail Trigger Button - Hidden per user request */
#tool-climate-pulse,
.btn-climate-pulse-tool,
#btn-climate-pulse-trigger,
.btn-climate-pulse-drawer,
#climate-pulse-panel,
.cp-live-dot {
    display: none !important;
}

.btn-climate-pulse-tool {
    position: relative;
    border-color: rgba(244, 63, 94, 0.4) !important;
}

.btn-climate-pulse-tool:hover,
.btn-climate-pulse-tool.active {
    background: rgba(244, 63, 94, 0.22) !important;
    border-color: var(--accent-rose, #f43f5e) !important;
    box-shadow: 0 0 16px rgba(244, 63, 94, 0.5) !important;
}

.btn-climate-pulse-tool .tool-pulse-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-rose, #f43f5e);
    box-shadow: 0 0 8px var(--accent-rose, #f43f5e);
    animation: cpHeartbeat 1.2s infinite ease-in-out;
}

@keyframes cpHeartbeat {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
        box-shadow: 0 0 12px var(--accent-rose, #f43f5e);
    }
}

/* Drawer Trigger Button */
.btn-climate-pulse-drawer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    margin-top: 8px;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(0, 242, 254, 0.15));
    border: 1px solid rgba(244, 63, 94, 0.4);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-climate-pulse-drawer:hover,
.btn-climate-pulse-drawer.active {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.3), rgba(0, 242, 254, 0.25));
    border-color: var(--accent-rose, #f43f5e);
    box-shadow: 0 0 18px rgba(244, 63, 94, 0.35);
    transform: translateY(-1px);
}

/* Floating Climate Pulse Panel Overlay */
.climate-pulse-panel {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    width: 480px;
    max-width: calc(100vw - 40px);
    background: rgba(8, 14, 26, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 242, 254, 0.35);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 242, 254, 0.25);
    z-index: 1000;
    padding: 16px 20px 14px 20px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.climate-pulse-panel.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Panel Header */
.cp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cp-badge-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-rose, #f43f5e);
    box-shadow: 0 0 10px var(--accent-rose, #f43f5e);
    animation: cpHeartbeat 1.2s infinite ease-in-out;
}

.cp-title {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #ffffff;
    text-transform: uppercase;
}

.cp-tag {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 242, 254, 0.15);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: var(--accent-cyan);
    font-family: var(--font-mono);
}

.cp-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.cp-close-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* Dataset Selector Bar */
.cp-dataset-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cp-select {
    flex: 1;
    background: rgba(3, 7, 18, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.78rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.cp-select:focus {
    border-color: var(--accent-cyan);
}

/* Main Display Box (Large Year + Telemetry Stats) */
.cp-display-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(3, 7, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.cp-year-main {
    display: flex;
    flex-direction: column;
}

.cp-year-num {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-cyan);
    text-shadow: 0 0 20px rgba(0, 242, 254, 0.5);
    letter-spacing: 0.02em;
}

.cp-date-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 4px;
}

.cp-stats-side {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-anomaly-display {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-rose, #f43f5e);
}

.cp-mean-display {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.cp-anomaly-tag {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Canvas Mini Trend Chart */
.cp-chart-container {
    position: relative;
    width: 100%;
    height: 70px;
    background: rgba(3, 7, 18, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.cp-trend-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Timeline Slider */
.cp-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.cp-slider-bound {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.cp-range-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    cursor: pointer;
}

.cp-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan);
    cursor: pointer;
    transition: transform 0.15s;
}

.cp-range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

/* Playback Control Deck */
.cp-controls-deck {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cp-playback-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-ctrl-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.cp-ctrl-btn:hover {
    background: rgba(0, 242, 254, 0.2);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}

.cp-ctrl-btn.play-master {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--accent-rose, #f43f5e), var(--accent-cyan));
    border: none;
    box-shadow: 0 0 15px rgba(244, 63, 94, 0.4);
}

.cp-ctrl-btn.play-master:hover {
    transform: scale(1.06);
    box-shadow: 0 0 22px rgba(244, 63, 94, 0.6);
}

.cp-ctrl-btn.play-master.playing {
    background: var(--accent-rose, #f43f5e);
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.65);
}

/* Speed Pills */
.cp-speed-group {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(3, 7, 18, 0.6);
    padding: 3px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cp-speed-pill {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-family: var(--font-mono);
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.cp-speed-pill:hover {
    color: #ffffff;
}

.cp-speed-pill.active {
    background: rgba(0, 242, 254, 0.25);
    color: var(--accent-cyan);
    font-weight: 700;
}

/* Loading Progress Track */
.cp-progress-container {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cp-progress-bar-bg {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.cp-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-rose, #f43f5e));
    border-radius: 2px;
    transition: width 0.2s ease-out;
}

.cp-progress-text {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ============================================================
   SMART MOBILE & TABLET ADAPTATION & ORIENTATION SYSTEM
   ============================================================ */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

body {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
}

/* Mobile Rotation Advisory Overlay */
.mobile-rotate-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(3, 7, 18, 0.94);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    z-index: 9999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s;
}

.mobile-rotate-overlay.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.rotate-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(8, 14, 26, 0.98));
    border: 1px solid rgba(0, 242, 254, 0.4);
    border-radius: 20px;
    padding: 28px 22px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 242, 254, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: rotateCardEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes rotateCardEntrance {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 3D Rotating Smartphone Animation */
.rotate-phone-anim {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-frame {
    width: 34px;
    height: 58px;
    border: 2px solid var(--accent-cyan);
    border-radius: 8px;
    background: rgba(0, 242, 254, 0.08);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: phoneRotateLoop 2.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    transform-origin: center center;
}

.phone-screen {
    width: 82%;
    height: 84%;
    background: rgba(0, 242, 254, 0.15);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.phone-satellite-icon {
    font-size: 1.1rem;
    animation: satFloat 2.8s ease-in-out infinite;
}

.rotate-orbit-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76px;
    height: 76px;
    margin-top: -38px;
    margin-left: -38px;
    color: var(--accent-azure, #38bdf8);
    opacity: 0.75;
    pointer-events: none;
    animation: orbitArrowSpin 3.5s linear infinite;
}

@keyframes phoneRotateLoop {

    0%,
    15% {
        transform: rotate(0deg);
    }

    50%,
    65% {
        transform: rotate(-90deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes orbitArrowSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes satFloat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15) rotate(15deg);
    }
}

.rotate-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.3);
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 12px;
    letter-spacing: 0.08em;
}

.rotate-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
    animation: pulseGlow 1.5s infinite;
}

.rotate-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.35;
}

.rotate-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.5;
    margin-bottom: 20px;
}

.rotate-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.rotate-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.25), rgba(37, 99, 235, 0.35));
    border: 1px solid var(--accent-cyan);
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.3);
    transition: all 0.25s ease;
}

.rotate-btn-primary:active {
    transform: scale(0.97);
}

.rotate-btn-secondary {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.76rem;
    cursor: pointer;
    padding: 6px;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.2s;
}

.rotate-btn-secondary:hover {
    color: #ffffff;
}

/* ============================================================
   RESPONSIVE: MOBILE & TABLET LANDSCAPE (Widescreen Cockpit)
   ============================================================ */
@media (orientation: landscape) and (max-height: 540px) {
    :root {
        --header-h: 42px;
        --timebar-h: 38px;
    }

    header {
        height: 42px !important;
        padding: 0 calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left)) !important;
    }

    .jein-logo-img {
        width: 32px !important;
        height: 32px !important;
    }

    .title-meta h1 {
        font-size: 0.78rem !important;
    }

    .title-meta .badge-v {
        display: none !important;
    }

    .header-brand {
        gap: 8px !important;
    }

    .region-switch {
        padding: 2px !important;
    }

    .region-switch-btn {
        padding: 3px 6px !important;
        font-size: 0.62rem !important;
    }

    .status-pill {
        display: none !important;
    }

    .drawer-left,
    .drawer-right {
        top: 42px !important;
        bottom: 38px !important;
        max-width: min(340px, 46vw) !important;
        box-shadow: 0 0 35px rgba(0, 0, 0, 0.85) !important;
    }

    .map-tools-rail {
        top: 8px !important;
        right: calc(8px + var(--safe-right)) !important;
        gap: 4px !important;
    }

    .tool-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
        border-radius: 6px !important;
    }

    .time-control-bar {
        height: 38px !important;
        padding: 0 calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left)) !important;
    }

    .time-left-ctrls,
    .time-right-ctrls {
        gap: 4px !important;
    }

    .time-btn {
        padding: 3px 6px !important;
        font-size: 0.68rem !important;
    }

    .map-dynamic-legend {
        bottom: 46px !important;
        left: calc(10px + var(--safe-left)) !important;
        padding: 6px 10px !important;
        max-width: 220px !important;
    }

    .legend-scale {
        font-size: 0.58rem !important;
    }

    .legend-guide-tag {
        display: none !important;
    }
}

/* ============================================================
   RESPONSIVE: MOBILE PHONES IN PORTRAIT (Width < 768px)
   ============================================================ */
@media (max-width: 768px) and (orientation: portrait) {
    header {
        padding: 0 10px !important;
        gap: 6px !important;
    }

    .jein-logo-img {
        width: 36px !important;
        height: 36px !important;
    }

    .title-meta h1 {
        font-size: 0.78rem !important;
    }

    .header-research-btn span:not(.svg-icon) {
        display: none !important;
    }

    .drawer-left,
    .drawer-right {
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 1200 !important;
    }

    .map-tools-rail {
        top: 12px !important;
        right: 10px !important;
        gap: 6px !important;
    }

    .tool-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .time-control-bar {
        padding: 0 8px !important;
        gap: 6px !important;
    }

    .timeline-slider-container {
        flex: 1 !important;
    }

    .map-dynamic-legend {
        bottom: 64px !important;
        left: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }
}

/* ==========================================================================
   JAXA AI EARTH AGENT & AUTONOMOUS SKILLS SUITE (v2.0.1) — CYBERPUNK STYLES
   ========================================================================== */

/* Map Toolbar Button */
.btn-jaxa-agent-tool {
    position: relative !important;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.15), rgba(168, 85, 247, 0.2)) !important;
    border: 1px solid rgba(0, 242, 254, 0.4) !important;
    color: #00f2fe !important;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-jaxa-agent-tool:hover {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.3), rgba(168, 85, 247, 0.35)) !important;
    border-color: #00f2fe !important;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.5), 0 0 35px rgba(168, 85, 247, 0.3) !important;
    transform: translateY(-2px) scale(1.05) !important;
}

.btn-jaxa-agent-tool.active {
    background: linear-gradient(135deg, #00f2fe, #a855f7) !important;
    color: #030712 !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.6) !important;
}

.tool-agent-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    background: #030712;
    border: 1px solid #00f2fe;
    color: #00f2fe;
    font-size: 8px;
    font-weight: 800;
    font-family: 'Space Grotesk', var(--font-mono, monospace);
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1;
    pointer-events: none;
    letter-spacing: 0.5px;
}

.tool-agent-pulse-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00f2fe;
    box-shadow: 0 0 8px #00f2fe;
    animation: ppi-pulse-glow 1.8s infinite;
    pointer-events: none;
}

/* ==========================================================================
   JAXA PLANETARY TELEMETRY & SATELLITE INTELLIGENCE (v2.0.1)
   Harmonious Aerospace Workspace Layout
   ========================================================================== */

.jaxa-agent-drawer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 960px;
    max-width: 95vw;
    height: 580px;
    max-height: 86vh;
    z-index: 1250;
    display: flex;
    flex-direction: column;
    background: linear-gradient(155deg, rgba(8, 14, 28, 0.96) 0%, rgba(4, 8, 20, 0.98) 100%);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(0, 242, 254, 0.28);
    border-radius: 16px;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 242, 254, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.09);
    color: #f8fafc;
    overflow: hidden;
    animation: jadModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes jadModalIn {
    from {
        opacity: 0;
        transform: translate(-50%, -47%) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Glowing Top Accent Line */
.jad-glow-accent {
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00f2fe 50%, transparent);
    opacity: 0.9;
    pointer-events: none;
}

/* Drawer Header */
.jad-header {
    padding: 13px 20px 11px;
    background: linear-gradient(180deg, rgba(0, 242, 254, 0.05), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.jad-header-left {
    display: flex;
    flex-direction: column;
}

.jad-badge-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

.jad-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    font-family: var(--font-mono, monospace);
    text-transform: uppercase;
}

.jad-badge.primary {
    background: rgba(0, 242, 254, 0.12);
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: #00f2fe;
}

.jad-badge.status-live {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 5px;
}

.jad-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
    animation: ppi-pulse-glow 1.6s infinite;
}

.jad-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
    font-family: 'Space Grotesk', var(--font-sans, sans-serif);
}

.jad-subtitle {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 2px;
}

.jad-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.jad-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ffffff;
    transform: scale(1.05);
}

/* Tabs Navigation */
.jad-tabs-nav {
    display: flex;
    padding: 6px 16px;
    background: rgba(3, 7, 18, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 8px;
    flex-shrink: 0;
}

.jad-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.jad-tab-svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}

.jad-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}

.jad-tab-btn:hover .jad-tab-svg {
    opacity: 1;
}

.jad-tab-btn.active {
    background: rgba(0, 242, 254, 0.12);
    border-color: rgba(0, 242, 254, 0.38);
    color: #00f2fe;
    box-shadow: 0 0 14px rgba(0, 242, 254, 0.15);
}

.jad-tab-btn.active .jad-tab-svg {
    opacity: 1;
    stroke: #00f2fe;
}

/* Drawer Body & Panels */
.jad-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.jad-tab-panel {
    display: none;
    height: 100%;
}

.jad-tab-panel.active {
    display: block;
    height: 100%;
}

/* Two-Column Harmonious Layout */
.jad-horizontal-layout {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 18px;
    align-items: stretch;
    height: 100%;
    min-height: 380px;
}

.jad-col-left {
    display: flex;
    flex-direction: column;
}

.jad-col-right {
    display: flex;
    flex-direction: column;
    min-height: 380px;
}

/* Control Card Container */
.jad-control-card {
    background: rgba(11, 19, 38, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    justify-content: space-between;
}

.jad-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jad-form-group.flex-1 {
    flex: 1;
}

.jad-form-row {
    display: flex;
    gap: 8px;
}

.jad-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #7dd3fc;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: var(--font-mono, monospace);
}

.jad-select,
.jad-input {
    width: 100%;
    background: rgba(5, 9, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 7px 10px;
    color: #ffffff;
    font-size: 0.78rem;
    outline: none;
    transition: all 0.2s ease;
}

.jad-select:focus,
.jad-input:focus {
    border-color: #00f2fe;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
}

/* Buttons */
.jad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    font-family: 'Space Grotesk', var(--font-sans, sans-serif);
}

.jad-btn.primary {
    background: linear-gradient(135deg, #00f2fe 0%, #0284c7 100%);
    color: #030712;
    box-shadow: 0 4px 14px rgba(0, 242, 254, 0.35);
}

.jad-btn.primary:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 242, 254, 0.5);
}

.jad-btn.primary.active {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

.jad-btn.primary.full {
    width: 100%;
    margin-top: 4px;
}

.jad-btn.secondary {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
}

.jad-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.jad-btn.sm {
    padding: 6px 12px;
    font-size: 0.74rem;
}

.jad-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Stage Standby & HUD */
.jad-stage-standby {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(11, 19, 38, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 28px 24px;
    min-height: 380px;
    position: relative;
    overflow: hidden;
}

/* Static Target HUD for calm standby */
.jad-static-target-hud {
    margin-bottom: 18px;
}

.jad-target-reticle {
    position: relative;
    width: 84px;
    height: 84px;
    border: 1px solid rgba(0, 242, 254, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.07) 0%, transparent 70%);
}

.jad-reticle-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: #00f2fe;
    border-style: solid;
}

.jad-reticle-corner.tl {
    top: -2px;
    left: -2px;
    border-width: 2px 0 0 2px;
}

.jad-reticle-corner.tr {
    top: -2px;
    right: -2px;
    border-width: 2px 2px 0 0;
}

.jad-reticle-corner.bl {
    bottom: -2px;
    left: -2px;
    border-width: 0 0 2px 2px;
}

.jad-reticle-corner.br {
    bottom: -2px;
    right: -2px;
    border-width: 0 2px 2px 0;
}

.jad-target-cross-h {
    position: absolute;
    width: 36px;
    height: 1px;
    background: rgba(0, 242, 254, 0.45);
}

.jad-target-cross-v {
    position: absolute;
    height: 36px;
    width: 1px;
    background: rgba(0, 242, 254, 0.45);
}

.jad-target-center-dot {
    width: 7px;
    height: 7px;
    background: #00f2fe;
    border-radius: 50%;
    box-shadow: 0 0 10px #00f2fe;
}

/* Radar Scanner - ONLY animated when active! */
.jad-radar-scanner {
    position: relative;
    width: 76px;
    height: 76px;
    margin-bottom: 16px;
    border-radius: 50%;
}

.jad-radar-circle.outer {
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(0, 242, 254, 0.35);
    border-radius: 50%;
}

.jad-radar-scanner.active .jad-radar-circle.outer {
    animation: jadRadarRotate 12s linear infinite;
}

.jad-radar-circle.inner {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(0, 242, 254, 0.2);
    border-radius: 50%;
}

.jad-radar-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: transparent;
}

.jad-radar-scanner.active .jad-radar-sweep,
.jad-radar-sweep.active-sweep {
    background: conic-gradient(from 0deg, transparent 65%, rgba(0, 242, 254, 0.45) 100%);
    animation: jadRadarRotate 2s linear infinite;
}

.jad-radar-ping {
    position: absolute;
    top: 24px;
    right: 20px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00f2fe;
    box-shadow: 0 0 8px #00f2fe;
    animation: ppi-pulse-glow 1.5s infinite;
}

@keyframes jadRadarRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.jad-standby-title,
.jad-scan-status-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: #00f2fe;
    letter-spacing: 0.8px;
    font-family: var(--font-mono, monospace);
    margin-bottom: 6px;
}

.jad-standby-text {
    font-size: 0.76rem;
    color: #94a3b8;
    line-height: 1.6;
    max-width: 360px;
}

.jad-scan-live-log {
    font-size: 0.74rem;
    color: #cbd5e1;
    font-family: var(--font-mono, monospace);
    margin-bottom: 12px;
    min-height: 20px;
}

.jad-scan-progress-bar-wrap {
    width: 260px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.jad-scan-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00f2fe, #38bdf8);
    transition: width 0.3s ease;
}

/* Console Stream Box */
.jad-console-box {
    background: rgba(3, 7, 18, 0.85);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.jad-console-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    font-weight: 700;
    color: #00f2fe;
    font-family: var(--font-mono, monospace);
    margin-bottom: 6px;
}

.jad-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.jad-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00f2fe, #38bdf8);
    transition: width 0.3s ease;
}

.jad-console-log {
    font-size: 0.72rem;
    color: #94a3b8;
    font-family: var(--font-mono, monospace);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Result Cards */
.jad-result-card {
    flex: 1;
    background: rgba(11, 19, 38, 0.7);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: space-between;
    animation: jadSlideIn 0.28s ease;
}

@keyframes jadSlideIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jad-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.jad-res-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.66rem;
    font-weight: 800;
    background: rgba(0, 242, 254, 0.12);
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: #00f2fe;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    font-family: var(--font-mono, monospace);
}

.jad-tag-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00f2fe;
    box-shadow: 0 0 6px #00f2fe;
}

.jad-result-sensor {
    font-size: 0.7rem;
    color: #94a3b8;
    font-family: var(--font-mono, monospace);
}

.jad-date-badge-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jad-date-label {
    font-size: 0.65rem;
    color: #64748b;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.jad-big-date {
    font-size: 1.45rem;
    font-weight: 800;
    font-family: 'Space Grotesk', var(--font-mono, monospace);
    color: #ffffff;
    letter-spacing: -0.3px;
}

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

.jad-kpi-box {
    background: rgba(3, 7, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jad-kpi-box.highlight {
    border-color: rgba(0, 242, 254, 0.35);
    background: rgba(0, 242, 254, 0.06);
}

.jad-kpi-label {
    font-size: 0.65rem;
    color: #94a3b8;
}

.jad-kpi-val {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    font-family: 'Space Grotesk', var(--font-mono, monospace);
}

.jad-kpi-box.highlight .jad-kpi-val {
    color: #00f2fe;
}

.jad-result-summary {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: #cbd5e1;
    background: rgba(3, 7, 18, 0.35);
    padding: 8px 10px;
    border-radius: 6px;
    border-left: 2px solid #00f2fe;
}

.jad-result-actions {
    display: flex;
    gap: 8px;
}

/* Found Value Banner & Severity */
.jad-found-value-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(3, 7, 18, 0.75);
    border: 1px solid rgba(0, 242, 254, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
}

.jad-fvb-label {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 2px;
}

.jad-found-big-num {
    font-size: 1.55rem;
    font-weight: 900;
    color: #ffffff;
    font-family: 'Space Grotesk', var(--font-mono, monospace);
    letter-spacing: -0.5px;
    text-shadow: 0 0 16px rgba(0, 242, 254, 0.4);
}

.jad-severity-badge {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(0, 242, 254, 0.12);
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: #00f2fe;
}

.jad-severity-badge.extreme {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.jad-severity-badge.high {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.jad-severity-badge.moderate {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

/* Location Badge Box */
.jad-location-badge-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 242, 254, 0.08);
    border: 1px solid rgba(0, 242, 254, 0.25);
    border-radius: 8px;
    padding: 10px 14px;
}

.jad-loc-text-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.jad-loc-title {
    font-size: 0.66rem;
    color: #94a3b8;
}

.jad-loc-name {
    font-size: 0.92rem;
    color: #00f2fe;
    font-weight: 700;
}

/* Coordinates display */
.jad-coord-display {
    background: rgba(3, 7, 18, 0.75);
    border: 1px solid rgba(0, 242, 254, 0.28);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jad-coord-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.jad-coord-label {
    font-size: 0.75rem;
    color: #94a3b8;
}

.jad-coord-num {
    font-size: 0.95rem;
    font-weight: 700;
    color: #00f2fe;
    font-family: var(--font-mono, monospace);
}

/* Hint Box */
.jad-hint-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: #00f2fe;
    padding: 7px 10px;
    background: rgba(0, 242, 254, 0.08);
    border: 1px dashed rgba(0, 242, 254, 0.35);
    border-radius: 6px;
}

.jad-pulse-ring {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00f2fe;
    box-shadow: 0 0 8px #00f2fe;
    animation: ppi-pulse-glow 1.4s infinite;
    flex-shrink: 0;
}

.jad-sensor-tags-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.jad-s-chip {
    font-size: 0.62rem;
    font-family: var(--font-mono, monospace);
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Multi-Sensor Grid */
.jad-coord-pill {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.35);
    color: #c084fc;
    font-size: 0.72rem;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    text-align: center;
}

.jad-sensor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.jad-sensor-cell {
    background: rgba(3, 7, 18, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.jad-sensor-cell.full {
    grid-column: span 2;
}

.jad-sc-meta {
    display: flex;
    flex-direction: column;
}

.jad-sc-label {
    font-size: 0.68rem;
    color: #94a3b8;
}

.jad-sc-sat {
    font-size: 0.6rem;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

.jad-sc-val {
    font-size: 0.9rem;
    font-weight: 700;
    color: #00f2fe;
    font-family: var(--font-mono, monospace);
}

/* Copilot / Query Console */
.jad-qp-header {
    font-size: 0.68rem;
    color: #7dd3fc;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: var(--font-mono, monospace);
}

.jad-quick-prompts-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jad-qp-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.74rem;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

[dir="rtl"] .jad-qp-chip {
    text-align: right;
}

.jad-qp-chip:hover {
    background: rgba(0, 242, 254, 0.12);
    border-color: #00f2fe;
    color: #00f2fe;
    transform: translateX(2px);
}

[dir="rtl"] .jad-qp-chip:hover {
    transform: translateX(-2px);
}

.jad-chat-container {
    flex: 1;
    background: rgba(3, 7, 18, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 270px;
    max-height: 310px;
}

.jad-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.jad-msg.user {
    flex-direction: row-reverse;
}

.jad-msg-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(0, 242, 254, 0.15);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: #00f2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    flex-shrink: 0;
    font-family: var(--font-mono, monospace);
}

.jad-msg.user .jad-msg-avatar {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.4);
    color: #c084fc;
}

.jad-msg-bubble {
    max-width: 82%;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1.45;
}

.jad-msg.bot .jad-msg-bubble {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #e2e8f0;
}

.jad-msg.user .jad-msg-bubble {
    background: linear-gradient(135deg, #00f2fe, #0284c7);
    color: #030712;
    font-weight: 600;
}

.jad-chat-input-bar {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.jad-chat-input {
    flex: 1;
    background: rgba(5, 9, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: #ffffff;
    outline: none;
    transition: border-color 0.2s;
}

.jad-chat-input:focus {
    border-color: #00f2fe;
}

.jad-copilot-report {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jad-cr-title {
    font-weight: 700;
    color: #00f2fe;
    font-size: 0.78rem;
}

.jad-cr-meta {
    font-size: 0.68rem;
    color: #94a3b8;
}

.jad-cr-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    background: rgba(3, 7, 18, 0.6);
    padding: 6px 8px;
    border-radius: 6px;
}

.jad-cr-note {
    font-size: 0.68rem;
    color: #94a3b8;
    font-style: italic;
}

/* Footer */
.jad-footer {
    padding: 8px 20px;
    background: rgba(3, 7, 18, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.jad-footer-info {
    display: flex;
    gap: 16px;
    font-size: 0.64rem;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

.jad-footer-info strong {
    color: #94a3b8;
}

/* Toast Notifications */
.jad-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(7, 12, 28, 0.95);
    border: 1px solid #00f2fe;
    color: #ffffff;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 242, 254, 0.35);
    z-index: 99999;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    font-family: 'Space Grotesk', sans-serif;
}

.jad-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Responsive Overrides */
@media (max-width: 860px) {
    .jaxa-agent-drawer {
        width: 95vw;
        height: auto;
        max-height: 90vh;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .jad-horizontal-layout {
        grid-template-columns: 1fr;
        gap: 14px;
        min-height: auto;
    }

    .jad-col-right {
        min-height: auto;
    }

    .jad-stage-standby {
        min-height: 180px;
    }
}

/* ==========================================================================
   JAXA ENSO (EL NIÑO / LA NIÑA) PLANETARY RADAR STYLING
   ========================================================================== */

/* Map Toolbar Button */
.btn-enso-radar-tool {
    position: relative !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(245, 158, 11, 0.18)) !important;
    border: 1px solid rgba(14, 165, 233, 0.4) !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-enso-radar-tool:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(245, 158, 11, 0.35)) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.5), 0 0 30px rgba(245, 158, 11, 0.3) !important;
    transform: translateY(-2px) scale(1.05) !important;
}

.btn-enso-radar-tool.active {
    background: linear-gradient(135deg, #0ea5e9, #f59e0b) !important;
    color: #030712 !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.6) !important;
}

.tool-enso-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    background: #030712;
    border: 1px solid #38bdf8;
    color: #38bdf8;
    font-size: 7px;
    font-weight: 800;
    font-family: 'Space Grotesk', var(--font-mono, monospace);
    padding: 1px 3px;
    border-radius: 4px;
    line-height: 1;
    pointer-events: none;
    letter-spacing: 0.5px;
}

.tool-enso-pulse-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
    animation: ppi-pulse-glow 1.8s infinite;
    pointer-events: none;
}

/* Modal Glow Accent */
.jad-glow-accent.enso-accent {
    background: linear-gradient(90deg, transparent, #38bdf8 30%, #f59e0b 70%, transparent);
}

/* Live Badge for ENSO */
.jad-badge.enso-live-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.jad-badge.enso-live-badge.warm {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.jad-badge.enso-live-badge.cool {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.4);
    color: #38bdf8;
}

.jad-badge.enso-live-badge.neutral {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.jad-live-dot.warm {
    background: #ef4444;
    box-shadow: 0 0 6px #ef4444;
}

.jad-live-dot.cool {
    background: #0ea5e9;
    box-shadow: 0 0 6px #0ea5e9;
}

/* Status Box */
.enso-status-box {
    background: rgba(3, 7, 18, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.enso-phase-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    font-family: var(--font-mono, monospace);
    color: #94a3b8;
}

.enso-phase-title.warm {
    color: #f87171;
}

.enso-phase-title.cool {
    color: #38bdf8;
}

.enso-phase-title.neutral {
    color: #34d399;
}

.enso-anomaly-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.enso-anomaly-val {
    font-size: 1.8rem;
    font-weight: 900;
    color: #ffffff;
    font-family: 'Space Grotesk', var(--font-mono, monospace);
    letter-spacing: -0.5px;
}

.enso-anomaly-unit {
    font-size: 0.85rem;
    color: #94a3b8;
    font-family: var(--font-mono, monospace);
}

.enso-baseline-readout {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: #94a3b8;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.enso-baseline-readout strong {
    color: #f1f5f9;
}

/* Slider Bar */
.enso-phase-bar-wrap {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.enso-phase-bar-track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #0ea5e9 0%, #10b981 50%, #ef4444 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.enso-phase-marker {
    position: absolute;
    top: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #030712;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    transform: translateX(-50%);
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.enso-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

/* Egypt Teleconnection Card */
.enso-egypt-card {
    background: rgba(14, 165, 233, 0.07);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.enso-ec-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.66rem;
    font-weight: 800;
    color: #38bdf8;
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.5px;
}

.enso-ec-text {
    margin: 0;
    font-size: 0.73rem;
    line-height: 1.45;
    color: #cbd5e1;
}

.enso-ec-text strong {
    color: #f1f5f9;
}

/* Right Column Sections */
.enso-visual-section,
.enso-chart-section {
    background: rgba(11, 19, 38, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.enso-visual-section {
    flex: 0 0 auto;
}

.enso-chart-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.enso-sec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.enso-sec-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #7dd3fc;
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.5px;
}

.enso-sec-date {
    font-size: 0.65rem;
    color: #94a3b8;
    font-family: var(--font-mono, monospace);
}

.enso-threshold-legend {
    display: flex;
    gap: 8px;
    font-size: 0.62rem;
    font-family: var(--font-mono, monospace);
}

.th-el-nino {
    color: #f87171;
}

.th-la-nina {
    color: #38bdf8;
}

/* Raster Canvas & Legend */
.enso-canvas-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.enso-raster-canvas {
    width: 100%;
    max-height: 60px;
    border-radius: 6px;
    background: #050914;
    border: 1px solid rgba(255, 255, 255, 0.08);
    image-rendering: pixelated;
}

.enso-canvas-legend {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.6rem;
    color: #94a3b8;
    font-family: var(--font-mono, monospace);
}

.leg-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0ea5e9, #f1f5f9, #ef4444);
}

/* Chart Canvas Wrap */
.enso-chart-wrap {
    flex: 1;
    position: relative;
    min-height: 150px;
    width: 100%;
}

/* ==========================================================================
   ENSO STANDALONE OVERLAY MODAL (icon + modal independent of jaxa-agent-drawer)
   ========================================================================== */

/* Full-screen backdrop */
.enso-radar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1260;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 16, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 16px;
    animation: ensoFadeIn 0.22s ease forwards;
}

@keyframes ensoFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal card */
.enso-radar-card {
    position: relative;
    width: 980px;
    max-width: 96vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(155deg, rgba(8, 14, 30, 0.97) 0%, rgba(4, 9, 22, 0.99) 100%);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 18px;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.9),
        0 0 40px rgba(14, 165, 233, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    color: #f8fafc;
    overflow: hidden;
    animation: ensoCardIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ensoCardIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Top glow bar */
.enso-radar-glow-bar {
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #38bdf8 35%, #f59e0b 65%, transparent);
    opacity: 0.9;
    pointer-events: none;
}

/* ---- Header ---- */
.enso-card-header {
    padding: 15px 22px 12px;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.06), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.enso-card-header-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.enso-card-badge-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

.enso-badge-pill {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    font-family: var(--font-mono, monospace);
    display: flex;
    align-items: center;
    gap: 5px;
}

.enso-badge-pill.primary-pill {
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.35);
    color: #7dd3fc;
}

.enso-badge-pill.status-pill {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
}

.enso-badge-pill.status-pill.warm {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.38);
    color: #f87171;
}

.enso-badge-pill.status-pill.cool {
    background: rgba(14, 165, 233, 0.14);
    border-color: rgba(14, 165, 233, 0.38);
    color: #38bdf8;
}

.enso-badge-pill.status-pill.neutral {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.38);
    color: #34d399;
}

.enso-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 6px #34d399;
    animation: ppi-pulse-glow 1.8s infinite;
    flex-shrink: 0;
}

.enso-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0;
    letter-spacing: -0.2px;
    font-family: 'Space Grotesk', var(--font-sans, sans-serif);
}

.enso-card-subtitle {
    font-size: 0.72rem;
    color: #64748b;
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.3px;
}

.enso-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.enso-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

/* ---- Body: two-column grid ---- */
.enso-card-body {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 14px;
    padding: 14px 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(14, 165, 233, 0.3) transparent;
}

.enso-card-body::-webkit-scrollbar {
    width: 4px;
}

.enso-card-body::-webkit-scrollbar-thumb {
    background: rgba(14, 165, 233, 0.3);
    border-radius: 2px;
}

/* ---- Left Column ---- */
.enso-left-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.enso-field-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.enso-field-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
    font-family: var(--font-mono, monospace);
    text-transform: uppercase;
}

.enso-select {
    width: 100%;
    padding: 8px 10px;
    background: rgba(3, 7, 18, 0.8);
    border: 1px solid rgba(14, 165, 233, 0.28);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.75rem;
    font-family: var(--font-mono, monospace);
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.enso-select:focus {
    border-color: #38bdf8;
}

/* Anomaly Card */
.enso-anomaly-card {
    background: rgba(3, 7, 18, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.enso-phase-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    font-family: var(--font-mono, monospace);
    color: #94a3b8;
}

.enso-phase-label.warm {
    color: #f87171;
}

.enso-phase-label.cool {
    color: #38bdf8;
}

.enso-phase-label.neutral {
    color: #34d399;
}

.enso-big-number-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.enso-big-number {
    font-size: 2rem;
    font-weight: 900;
    color: #ffffff;
    font-family: 'Space Grotesk', var(--font-mono, monospace);
    letter-spacing: -1px;
}

.enso-big-unit {
    font-size: 0.9rem;
    color: #94a3b8;
    font-family: var(--font-mono, monospace);
}

.enso-reading-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: #94a3b8;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.enso-reading-row strong {
    color: #f1f5f9;
}

/* Slider */
.enso-slider-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 2px;
}

.enso-slider-track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #0ea5e9 0%, #10b981 50%, #ef4444 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.enso-slider-thumb {
    position: absolute;
    top: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: 2.5px solid #030712;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
    transform: translateX(-50%);
    transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.enso-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.58rem;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

/* Teleconnect Card */
.enso-teleconnect-card {
    background: rgba(14, 165, 233, 0.06);
    border: 1px solid rgba(14, 165, 233, 0.22);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.enso-tc-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.63rem;
    font-weight: 800;
    color: #38bdf8;
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.5px;
}

.enso-tc-text {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.48;
    color: #cbd5e1;
}

.enso-tc-text strong {
    color: #f1f5f9;
}

/* Action Row */
.enso-action-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.enso-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Space Grotesk', var(--font-sans, sans-serif);
    cursor: pointer;
    transition: all 0.22s ease;
    border: none;
    white-space: nowrap;
}

.enso-btn-primary {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    flex: 1;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

.enso-btn-primary:hover {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
    transform: translateY(-1px);
}

.enso-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.enso-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #94a3b8;
}

.enso-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #e2e8f0;
}

/* ---- Right Column ---- */
.enso-right-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Panels */
.enso-panel {
    background: rgba(10, 18, 36, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.enso-chart-panel {
    flex: 1;
    min-height: 0;
}

.enso-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.enso-panel-title {
    font-size: 0.66rem;
    font-weight: 700;
    color: #7dd3fc;
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.5px;
}

.enso-panel-date {
    font-size: 0.63rem;
    color: #94a3b8;
    font-family: var(--font-mono, monospace);
}

.enso-threshold-row {
    display: flex;
    gap: 10px;
    font-size: 0.62rem;
    font-family: var(--font-mono, monospace);
}

.enso-th-warm {
    color: #f87171;
}

.enso-th-cool {
    color: #38bdf8;
}

/* Canvas */
.enso-canvas-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.enso-raster-canvas {
    width: 100%;
    max-height: 70px;
    border-radius: 6px;
    background: #050914;
    border: 1px solid rgba(255, 255, 255, 0.08);
    image-rendering: pixelated;
    object-fit: fill;
}

.enso-legend-bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6rem;
    color: #94a3b8;
    font-family: var(--font-mono, monospace);
}

.enso-leg-neg {
    color: #38bdf8;
}

.enso-leg-pos {
    color: #f87171;
}

.enso-leg-gradient {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0ea5e9, #f1f5f9, #ef4444);
}

/* Chart container */
.enso-chart-container {
    flex: 1;
    position: relative;
    min-height: 160px;
    width: 100%;
}

.enso-chart-container canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* ---- Footer ---- */
.enso-card-footer {
    padding: 10px 20px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.enso-footer-info {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.67rem;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

.enso-footer-info strong {
    color: #94a3b8;
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
    .enso-card-body {
        grid-template-columns: 1fr;
    }

    .enso-radar-card {
        max-height: 94vh;
    }
}

/* ==========================================================================
   ENSO COMPACT RASTER & FULLSCREEN OVERLAY
   ========================================================================== */

/* Compact Raster in Modal */
.enso-raster-compact {
    max-height: 38px !important;
    height: 38px !important;
    width: 100%;
    object-fit: fill;
    image-rendering: pixelated;
    border-radius: 6px;
}

.enso-raster-panel {
    flex: 0 0 auto;
}

.enso-panel-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.enso-expand-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(0, 242, 254, 0.25);
    background: rgba(0, 242, 254, 0.06);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
}

.enso-expand-btn:hover {
    background: rgba(0, 242, 254, 0.2);
    border-color: #00f2fe;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
    transform: scale(1.08);
}

/* Fullscreen Raster Overlay */
.enso-fs-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(2, 6, 18, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: ensoFsFadeIn 0.25s ease forwards;
}

@keyframes ensoFsFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.enso-fs-card {
    background: linear-gradient(150deg, rgba(8, 16, 36, 0.98), rgba(4, 9, 22, 0.99));
    border: 1px solid rgba(0, 242, 254, 0.4);
    border-radius: 18px;
    width: 92vw;
    max-width: 1000px;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(0, 242, 254, 0.18);
    animation: ensoFsCardPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ensoFsCardPop {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.enso-fs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.enso-fs-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.enso-fs-badge {
    font-size: 0.65rem;
    font-weight: 800;
    color: #00f2fe;
    letter-spacing: 1px;
    font-family: var(--font-mono, monospace);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.enso-fs-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: 0.4px;
    font-family: 'Space Grotesk', var(--font-main, sans-serif);
}

.enso-fs-subtitle {
    font-size: 0.74rem;
    color: #94a3b8;
    font-family: var(--font-mono, monospace);
}

.enso-fs-date {
    font-size: 0.68rem;
    color: #38bdf8;
    font-family: var(--font-mono, monospace);
    font-weight: 600;
}

.enso-fs-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    padding: 0;
}

.enso-fs-close-btn:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
    transform: scale(1.08);
}

.enso-fs-canvas-wrap {
    width: 100%;
    background: #040814;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 6px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

.enso-fs-canvas {
    width: 100%;
    height: 180px;
    max-height: 240px;
    border-radius: 6px;
    display: block;
    image-rendering: pixelated;
    background: #02050e;
}

.enso-fs-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.enso-fs-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.72rem;
    font-family: var(--font-mono, monospace);
}

.enso-fs-gradient-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #0ea5e9, #f1f5f9, #ef4444);
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.3);
}

.enso-fs-phase-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 4px;
}

.enso-fs-phase-label {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    font-family: var(--font-mono, monospace);
    padding: 4px 14px;
    border-radius: 6px;
}

.enso-fs-phase-label.warm {
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.enso-fs-phase-label.cool {
    color: #38bdf8;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.enso-fs-phase-label.neutral {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

@media (max-width: 600px) {
    .enso-fs-card {
        padding: 16px;
        width: 96vw;
    }

    .enso-fs-canvas {
        height: 120px;
    }

    .enso-fs-legend {
        font-size: 0.62rem;
    }
}