/* ═══ GovXRay v3 Custom Styles ═══ */

/* Screen reader only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
/* Visible focus rings for accessibility — high contrast on both dark and light */
input:focus-visible, button:focus-visible, select:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid #60A5FA !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(96,165,250,0.25) !important;
}
body.light-theme input:focus-visible, body.light-theme button:focus-visible,
body.light-theme select:focus-visible, body.light-theme [tabindex]:focus-visible,
body.light-theme [role="button"]:focus-visible {
    outline-color: #2563EB !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.2) !important;
}

/* Gradient hero cards */
.gx-hero-card {
    background: linear-gradient(135deg, #1E1E1E 0%, #2A2A2A 50%, #1E1E1E 100%);
    border: 1px solid #2C2C2C;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gx-hero-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(79, 195, 247, 0.08);
}
.gx-hero-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1D4ED8 0%, #0277bd 50%, #00838f 100%);
}

/* Accent variants */
.gx-hero-card.accent-green::before {
    background: linear-gradient(90deg, #16A34A 0%, #2e7d32 100%);
}
.gx-hero-card.accent-red::before {
    background: linear-gradient(90deg, #b71c1c 0%, #c62828 100%);
}
.gx-hero-card.accent-amber::before {
    background: linear-gradient(90deg, #e65100 0%, #bf360c 100%);
}
.gx-hero-card.accent-teal::before {
    background: linear-gradient(90deg, #006064 0%, #00838f 100%);
}

/* City Hero - Blurred Flag Background */
.gx-city-banner {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 24px;
    min-height: 160px;
}
.gx-city-banner .flag-bg {
    position: absolute;
    top: -20%;
    left: -10%;
    width: 120%;
    height: 140%;
    background-size: cover;
    background-position: center;
    filter: blur(25px) brightness(0.35) saturate(1.2);
    z-index: 0;
    opacity: 0.35;
}
.gx-city-banner .flag-bg-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.88) 100%);
    z-index: 1;
}
.gx-city-banner .banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px;
    gap: 24px;
}
.gx-city-banner .city-info {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}
.gx-city-banner .city-flag-crisp {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.gx-city-banner .city-name {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.gx-city-banner .city-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin-top: 4px;
}
.gx-city-banner .city-minimap {
    width: 200px;
    height: 130px;
    flex-shrink: 0;
}

/* KPI number with glow */
.gx-kpi-num {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 0 20px rgba(79, 195, 247, 0.3);
}
.gx-kpi-num.positive { color: #22C55E; text-shadow: 0 0 20px rgba(0, 200, 83, 0.3); }
.gx-kpi-num.negative { color: #EF4444; text-shadow: 0 0 20px rgba(255, 23, 68, 0.3); }
.gx-kpi-num.warning { color: #ff9100; text-shadow: 0 0 20px rgba(255, 145, 0, 0.3); }
.gx-kpi-num.neutral { color: #039be5; text-shadow: 0 0 20px rgba(3, 155, 229, 0.3); }

/* Clickable metric — interactive numbers */
.gx-clickable {
    cursor: pointer;
    position: relative;
    display: inline-block;
    border-bottom: 1px dashed rgba(3, 155, 229, 0.4);
    transition: all 0.15s ease;
}
.gx-clickable:hover {
    border-bottom-color: #039be5;
    text-shadow: 0 0 12px rgba(3, 155, 229, 0.5);
}

/* Info popup (popover) */
.gx-info-popup {
    background: #2A2A2A;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    max-width: 320px;
    font-size: 12px;
    color: #E6EDF3;
    z-index: 1000;
}
.gx-info-popup .source-link {
    color: #039be5;
    text-decoration: none;
    font-size: 11px;
}
.gx-info-popup .source-link:hover {
    text-decoration: underline;
}

/* Section card with depth */
.gx-section {
    background: linear-gradient(180deg, #141A24 0%, #0E1319 100%);
    border: 1px solid #2C2C2C;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.3);
}

/* Module selector cards */
.gx-module-card {
    background: linear-gradient(135deg, #1E1E1E 0%, #2A2A2A 100%);
    border: 1px solid #2C2C2C;
    border-radius: 12px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.gx-module-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(3, 155, 229, 0.12);
    border-color: #039be5;
}
.gx-module-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #039be5 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.gx-module-card:hover::after {
    opacity: 1;
}

/* City grid cards */
.gx-city-card {
    background: linear-gradient(180deg, #141A24 0%, #0E1319 100%);
    border: 1px solid #2C2C2C;
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
}
.gx-city-card:hover {
    background: linear-gradient(180deg, #2A2A2A 0%, #1E1E1E 100%);
    border-color: #3B82F6;
    box-shadow: 0 8px 32px rgba(2, 136, 209, 0.1), inset 0 1px 0 0 rgba(255,255,255,0.06);
    transform: translateY(-3px);
}
/* Selected city card — blue glow ring synced with map blue dot */
.gx-city-card--selected {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.3), 0 8px 32px rgba(59,130,246,0.15), inset 0 1px 0 0 rgba(96,165,250,0.12) !important;
    background: linear-gradient(180deg, #141C2E 0%, #0E1420 100%) !important;
    transform: translateY(-2px);
}
.gx-city-card--selected::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #3B82F6, transparent);
    border-radius: 12px 12px 0 0;
    z-index: 10;
}
/* Staggered card entrance animation */
.gx-city-card:nth-child(1) { animation-delay: 0.02s; }
.gx-city-card:nth-child(2) { animation-delay: 0.04s; }
.gx-city-card:nth-child(3) { animation-delay: 0.06s; }
.gx-city-card:nth-child(4) { animation-delay: 0.08s; }
.gx-city-card:nth-child(5) { animation-delay: 0.10s; }
.gx-city-card:nth-child(6) { animation-delay: 0.12s; }
.gx-city-card:nth-child(7) { animation-delay: 0.14s; }
.gx-city-card:nth-child(8) { animation-delay: 0.16s; }
.gx-city-card:nth-child(9) { animation-delay: 0.18s; }
/* ── Stat card panel: slide-in from right ── */
@keyframes gx-slide-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
#explore-stat-card, #home-stat-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#explore-stat-card > *, #home-stat-card > * {
    animation: gx-slide-right 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Score ring / gauge */
.gx-score-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: conic-gradient(#22C55E var(--score-pct), #2C2C2C var(--score-pct));
    position: relative;
}
.gx-score-ring::after {
    content: '';
    width: 96px; height: 96px;
    border-radius: 50%;
    background: #1E1E1E;
    position: absolute;
}
.gx-score-ring .score-value {
    position: relative;
    z-index: 1;
    font-size: 32px;
    font-weight: 800;
    color: #E6EDF3;
}

/* Top bar gradient */
.gx-topbar {
    background: linear-gradient(180deg, #121212 0%, #1E1E1E 100%);
    border-bottom: 1px solid #2C2C2C;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* Source badge */
.gx-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(3, 155, 229, 0.08);
    border: 1px solid rgba(3, 155, 229, 0.15);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    color: #039be5;
    cursor: pointer;
    transition: all 0.15s ease;
}
.gx-source:hover {
    background: rgba(3, 155, 229, 0.15);
    border-color: rgba(3, 155, 229, 0.3);
}

/* Comparison highlight bar */
.gx-highlight-bar {
    background: linear-gradient(90deg, rgba(3, 155, 229, 0.08) 0%, transparent 100%);
    border-left: 3px solid #039be5;
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
}

/* Background — dark navy */
body {
    background: #121212 !important;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

/* Fade-in animation for sections */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.gx-section, .gx-city-card, .gx-module-card {
    animation: fadeInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Highlight card — for deficit/surplus dramatic moments */
.gx-highlight-deficit {
    background: linear-gradient(135deg, rgba(255,23,68,0.08) 0%, rgba(255,23,68,0.02) 100%);
    border: 1px solid rgba(255,23,68,0.2);
    border-radius: 12px;
    padding: 20px 24px;
}
.gx-highlight-surplus {
    background: linear-gradient(135deg, rgba(0,200,83,0.08) 0%, rgba(0,200,83,0.02) 100%);
    border: 1px solid rgba(0,200,83,0.2);
    border-radius: 12px;
    padding: 20px 24px;
}

/* Smooth scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #121212; }
::-webkit-scrollbar-thumb { background: #2A3545; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3A4555; }
.light-theme ::-webkit-scrollbar-track { background: #F3F4F6; }
.light-theme ::-webkit-scrollbar-thumb { background: #CBD5E1; }
.light-theme ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Loading shimmer */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
.gx-shimmer {
    background: linear-gradient(90deg, #1E1E1E 25%, #2A2A2A 50%, #1E1E1E 75%);
    background-size: 400px 100%;
    animation: shimmer 1.5s infinite;
    will-change: background-position;
}

/* ── Ticker / News Crawl ── */
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.gx-ticker-wrap {
    overflow: hidden;
    width: 100%;
    background: linear-gradient(180deg, #0F0F0F 0%, #121212 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
}
.gx-ticker-wrap::before, .gx-ticker-wrap::after {
    content: '';
    position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
    pointer-events: none;
}
.gx-ticker-wrap::before { left: 0; background: linear-gradient(to right, #070A0F, transparent); }
.gx-ticker-wrap::after  { right: 0; background: linear-gradient(to left, #070A0F, transparent); }
.gx-ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: ticker-scroll var(--ticker-duration, 120s) linear infinite;
    will-change: transform;
}
.gx-ticker-wrap:hover .gx-ticker-track {
    animation-play-state: paused;
}
.gx-ticker-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.04);
    gap: 6px;
    font-size: 11px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    letter-spacing: 0.02em;
}
.gx-ticker-item .tk-flag { font-size: 13px; margin-right: 2px; }
.gx-ticker-item .tk-city {
    font-weight: 700;
    color: #E6EDF3;
    font-size: 12px;
    font-family: Inter, system-ui, sans-serif;
}
.gx-ticker-item .tk-pop {
    color: #9CA3AF;
    font-size: 10px;
}
.gx-ticker-item .tk-sep {
    color: rgba(255,255,255,0.1);
    font-size: 10px;
    margin: 0 2px;
}
.gx-ticker-item .tk-kpi {
    display: inline-flex;
    gap: 3px;
    align-items: baseline;
}
.gx-ticker-item .tk-lbl {
    color: #9CA3AF;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.gx-ticker-item .tk-v {
    font-weight: 600;
    font-size: 11px;
    color: #9DA7B3;
}
.gx-ticker-item .tk-up { color: #22C55E; }
.gx-ticker-item .tk-dn { color: #EF4444; }
.gx-ticker-item .tk-n { color: #9DA7B3; }

/* ═══ Sticky Section Index / Table of Contents ═══ */
.gx-section-toc {
    position: sticky;
    top: 88px;  /* topbar (52) + breadcrumb bar (~36) */
    z-index: 50;
    padding: 10px 16px;
    background: rgba(18,18,18,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    transition: box-shadow 0.2s ease;
}
body.light-theme .gx-section-toc {
    background: rgba(255,255,255,0.92);
    border-color: #E5E7EB;
}
.gx-section-toc .toc-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}
body.light-theme .gx-section-toc .toc-label { color: rgba(0,0,0,0.35); }
.gx-section-toc .toc-link {
    font-size: 12px;
    color: #3B82F6;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background 0.15s ease;
    white-space: nowrap;
}
.gx-section-toc .toc-link:hover {
    background: rgba(59,130,246,0.12);
    text-decoration: underline;
}
@media (max-width: 768px) {
    .gx-section-toc { top: 52px; padding: 8px 12px; gap: 4px; }
    .gx-section-toc .toc-link { font-size: 11px; padding: 2px 6px; }
}

/* ═══ V5 Responsive Chart Heights ═══ */
@media (max-width: 768px) {
    .js-plotly-plot .plot-container { max-height: 350px; }
}
@media (max-width: 480px) {
    .js-plotly-plot .plot-container { max-height: 280px; }
}

/* ═══ V5 Visual Polish — Better shadows and depth ═══ */
.gx-hero-card, .gx-module-card, .gx-city-card, .gx-section {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout style;
}

/* Performance: contain layout for large grids */
.gx-kpi-grid-responsive { contain: layout; }
.gx-main-area { contain: layout style; }
.gx-ticker-track { contain: layout style; }

/* ═══ Smooth page-swap transitions ═══ */
@keyframes gx-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.gx-main-area > * {
    animation: gx-fade-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Stagger child sections for a cascading feel */
.gx-main-area > *:nth-child(2) { animation-delay: 0.04s; }
.gx-main-area > *:nth-child(3) { animation-delay: 0.08s; }
.gx-main-area > *:nth-child(4) { animation-delay: 0.12s; }
.gx-main-area > *:nth-child(5) { animation-delay: 0.16s; }
/* Keep map container stable during transitions */
.js-plotly-plot { transition: none !important; }

/* ═══ Universal interaction smoothness ═══ */
/* All clickable things get smooth hover */
button, a, .gx-sidebar-item, .gx-city-card, .gx-module-card {
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* Cards lift on hover */
.gx-city-card:hover, .gx-module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
/* Cards press on click */
.gx-city-card:active, .gx-module-card:active {
    transform: translateY(0px) scale(0.97);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition-duration: 0.08s;
}
/* Ripple effect container */
.gx-city-card, .gx-module-card { position: relative; overflow: hidden; }
.gx-ripple {
    position: absolute; border-radius: 50%;
    background: rgba(74, 222, 128, 0.25);
    transform: scale(0); animation: gx-ripple-anim 0.5s ease-out forwards;
    pointer-events: none; z-index: 5;
}
@keyframes gx-ripple-anim {
    to { transform: scale(4); opacity: 0; }
}
/* Small action buttons (compare presets, + Compare, etc.) */
button:not(.gx-btab):not(.gx-sidebar-toggle):hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}
button:not(.gx-btab):not(.gx-sidebar-toggle):active {
    transform: scale(0.97);
}
/* Details/accordion smooth open */
details { transition: all 0.2s ease; }
details[open] summary ~ * {
    animation: gx-fade-in 0.25s ease-out both;
}
/* Smooth opacity on button hover */
button:hover { opacity: 0.88; }
/* Sidebar item hover glow */
.gx-sidebar-item:hover {
    background: rgba(255,255,255,0.04) !important;
}
/* Explore/Compare buttons in stat card — bigger tap target, visual breathing room */
.gx-stat-card-panel button {
    min-height: 44px;
    margin-top: 4px;
}
/* Plotly charts fade in, not pop */
.dash-graph {
    animation: gx-fade-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Smooth scroll everywhere */
html { scroll-behavior: smooth; }
/* KPI rows inside stat card — stagger */
.gx-stat-card-panel [style*="borderBottom"] {
    animation: gx-fade-in 0.3s ease-out both;
}
/* Hero card shimmer on load */
.gx-hero-card {
    animation: fadeInUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Map container: stable height to prevent layout shift */
#explore-map, [id*="landing-map"] {
    min-height: min(440px, 60vh);
}
/* Map gesture handling — hint overlay (Google Maps pattern) */
#explore-map,
#explore-map .js-plotly-plot,
#explore-map .plotly,
#explore-map .plot-container,
#explore-map .svg-container,
#explore-map .main-svg,
#explore-map .geo { touch-action: pan-y !important; /* allow vertical page scroll, block pinch-zoom */ }
.gx-map-gesture-hint {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55); color: #fff; font-size: 15px;
    font-weight: 600; font-family: inherit; text-align: center;
    border-radius: 10px; z-index: 10; pointer-events: none;
    opacity: 0; transition: opacity 0.25s ease;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5); padding: 24px;
}
.gx-map-gesture-hint.visible { opacity: 1; }
body.light-theme .gx-map-gesture-hint {
    background: rgba(255,255,255,0.65); color: #1A1A2E;
    text-shadow: none;
}
/* Pointer cursor on map dots to indicate clickability */
[id*="landing-map"] .scattergeo path.point,
#explore-map .scattergeo path.point {
    cursor: pointer !important;
}
/* Dash loading overlay: subtle but visible */
.dash-loading .dash-spinner-container {
    background: transparent !important;
    backdrop-filter: none !important;
}
/* During loading: dim content + show progress bar */
._dash-loading {
    opacity: 0.6;
    transition: opacity 0.12s ease;
    pointer-events: none;
}
/* Top loading bar — animated green line */
@keyframes gx-loading-bar {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}
._dash-loading::before {
    content: '';
    position: fixed;
    top: 52px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4ade80, transparent);
    animation: gx-loading-bar 1.2s ease-in-out infinite;
    z-index: 9999;
    will-change: transform;
}
/* Smooth page content entrance animation */
@keyframes gx-page-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
#main-content > div {
    animation: gx-page-enter 0.18s ease-out both;
    will-change: opacity, transform;
}
/* Tighter top padding when inside city snapshot or module — hero card is the first thing */
#main-content { padding-top: 12px !important; }
/* Dropdown menus: smooth open */
.Select-menu-outer {
    animation: gx-fade-in 0.15s ease-out both !important;
}
/* Tooltip smooth appear */
.dash-tooltip {
    animation: gx-fade-in 0.18s ease-out both;
}

/* Font display: handled by Google Fonts ?display=swap in <link> tag */

/* Smooth Dash dropdown styling */
.Select-control { background: #1E1E1E !important; border-color: #2C2C2C !important; }
.Select-menu-outer { background: #1E1E1E !important; border-color: #2C2C2C !important; }
.Select-option { background: #1E1E1E !important; color: #E6EDF3 !important; }
.Select-option:hover, .Select-option.is-focused { background: #2A2A2A !important; }
.Select-value-label { color: #E6EDF3 !important; }
.Select-placeholder { color: #6B7B8D !important; }
.Select-input > input { color: #E6EDF3 !important; }
.Select--multi .Select-value { background: rgba(59,130,246,0.15) !important; border-color: rgba(59,130,246,0.3) !important; color: #E6EDF3 !important; border-radius: 4px !important; }
.Select--multi .Select-value-icon:hover { background: rgba(239,68,68,0.2) !important; color: #EF4444 !important; }

/* ═══ V4 UX Polish ═══ */

/* Smooth page transitions */
#main-content, #module-content, #compare-content {
    animation: gx-fadein 0.25s ease-out;
}
#compare-content { background-color: var(--gx-bg, #121212); color: var(--gx-text, #E8E8E8); }
body.light-theme #compare-content { background-color: #F8F9FA; color: #1A1A1A; }
@keyframes gx-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Back button hover */
#back-btn:hover {
    background: rgba(59,130,246,0.12) !important;
}
/* Home CTA card hover */
.gx-home-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border-color: rgba(99,102,241,0.4) !important;
}
/* Persistent breadcrumb bar styling */
#back-bar {
    transition: background 0.2s ease;
}
/* Active page in breadcrumb — last span in the chain is always the current page */
#breadcrumb span > span:last-child {
    color: #4ade80 !important;
    font-weight: 700 !important;
    font-size: 13px;
    text-shadow: 0 0 8px rgba(74,222,128,0.25);
}
body.light-theme #breadcrumb span > span:last-child {
    color: #15803D !important;
    text-shadow: none;
}

/* Details/summary (collapsible sections) */
details summary {
    list-style: none;
    user-select: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
    content: '▸ ';
    color: #6B7683;
    font-size: 12px;
    margin-right: 6px;
    transition: transform 0.2s;
    display: inline-block;
}
details[open] summary::before {
    content: '▾ ';
}

/* KPI strip scrollbar */
::-webkit-scrollbar { height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2C2C2C; border-radius: 2px; }

/* ═══ Mobile Responsive — Comprehensive Overhaul ═══ */

/* ── Global: prevent horizontal overflow everywhere ── */
html, body { overflow-x: hidden; }
#_dash-app-content { overflow-x: hidden; max-width: 100vw; }
.gx-app-shell { overflow-x: hidden; }

/* ── Tablet: max-width 768px ── */
@media (max-width: 768px) {
    /* Layout */
    #main-content, #module-content, #compare-content { padding: 12px !important; max-width: 100vw !important; overflow-x: hidden !important; }
    .gx-hero-card, .gx-module-card, .gx-section { padding: 14px !important; }
    .gx-city-card { padding: 12px !important; }

    /* KPI numbers */
    .gx-kpi-num { font-size: 20px !important; }
    .gx-kpi-grid-responsive { grid-template-columns: repeat(2, 1fr) !important; }

    /* Tables scroll horizontally */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

    /* Topbar */
    .gx-topbar-v2 { padding: 8px 12px !important; }
    .gx-topbar-v2 .gx-tb-center { display: none; }
    .gx-tb-btn .gx-btn-label { display: none; }

    /* City banner */
    .gx-city-banner .banner-content { padding: 16px 14px !important; gap: 12px !important; flex-wrap: wrap !important; }
    .gx-city-banner .city-flag-crisp { width: 48px !important; height: 32px !important; }
    .gx-city-banner .city-name { font-size: 22px !important; }
    .gx-city-banner .city-minimap { width: 140px !important; height: 90px !important; }

    /* Score ring */
    .gx-score-ring { width: 90px !important; height: 90px !important; }
    .gx-score-ring::after { width: 72px !important; height: 72px !important; }
    .gx-score-ring .score-value { font-size: 24px !important; }

    /* Search/sort controls */
    #landing-controls > div { flex-wrap: wrap !important; }
    #landing-controls input[type="text"] { width: 100% !important; min-width: 0 !important; }
    #landing-controls .Select { width: 100% !important; min-width: 0 !important; }

    /* Compare tray */
    .gx-compare-tray { padding: 6px 12px !important; gap: 8px !important; flex-wrap: wrap !important; }
    .gx-tray-chip { font-size: 11px !important; padding: 3px 8px !important; }

    /* Home CTA cards: 2-col on tablet */
    .gx-home-cta { min-width: calc(50% - 12px) !important; }

    /* Breadcrumb bar: slightly tighter on tablet */
    #back-bar { padding: 6px 16px !important; }

    /* Plotly charts: responsive container */
    .js-plotly-plot { min-height: 200px; width: 100% !important; }
    .js-plotly-plot .plotly { width: 100% !important; }
    .js-plotly-plot .main-svg { width: 100% !important; }
    .dash-graph { overflow: hidden !important; }

    /* Module grids: 2-column on tablet */
    [style*="gridTemplateColumns"][style*="minmax(280px"] { grid-template-columns: repeat(2, 1fr) !important; }
    [style*="gridTemplateColumns"][style*="minmax(220px"] { grid-template-columns: repeat(2, 1fr) !important; }
    [style*="gridTemplateColumns"][style*="minmax(300px"] { grid-template-columns: 1fr 1fr !important; }

    /* All flex containers: allow wrapping */
    [style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; }

    /* Force any min-width on children to not overflow */
    [style*="minWidth: 90px"] { min-width: 70px !important; }
    [style*="minWidth: 120px"] { min-width: 0 !important; flex: 1 !important; }
    [style*="minWidth: 140px"] { min-width: 0 !important; flex: 1 !important; }
    [style*="minWidth: 200px"] { min-width: 0 !important; width: 100% !important; }
    [style*="minWidth: 250px"] { min-width: 0 !important; width: 100% !important; }
    [style*="minWidth: 300px"] { min-width: 0 !important; width: 100% !important; }

    /* maxWidth containers: full-width */
    [style*="maxWidth: 1100px"] { max-width: 100% !important; padding: 0 8px !important; }
    [style*="maxWidth: 800px"] { max-width: 100% !important; }
    [style*="maxWidth: 600px"] { max-width: 100% !important; }
}

/* ── Phone: max-width 480px — radical minimalism ── */
@media (max-width: 480px) {
    /* Content: edge-to-edge, minimal padding */
    #main-content, #module-content, #compare-content { padding: 6px 8px !important; }

    /* KPIs: 2-col on phone (still scannable, not wasteful 1-col) */
    .gx-kpi-grid-responsive { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
    .gx-kpi-num { font-size: 17px !important; }

    /* City banner: compact horizontal, no minimap */
    .gx-city-banner .banner-content {
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }
    .gx-city-banner .city-minimap { display: none !important; }
    .gx-city-banner .city-name { font-size: 17px !important; }
    .gx-city-banner .city-flag-crisp { width: 36px !important; height: 24px !important; }

    /* Score ring: compact */
    .gx-score-ring { width: 64px !important; height: 64px !important; }
    .gx-score-ring::after { width: 50px !important; height: 50px !important; }
    .gx-score-ring .score-value { font-size: 18px !important; }

    /* Topbar: hidden center, tight spacing */
    .gx-topbar-v2 .gx-tb-left { gap: 4px !important; }
    .gx-topbar-v2 .gx-tb-right { gap: 3px !important; }
    .gx-tb-btn { padding: 4px 6px !important; font-size: 11px !important; }

    /* Ticker: subtle, small */
    .gx-ticker-wrap { height: 24px !important; }
    .gx-ticker-item { padding: 0 8px !important; font-size: 9px !important; }

    /* Compare tray: horizontal scroll, not stack */
    .gx-compare-tray {
        padding: 6px 8px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Grids: single column */
    [style*="gridTemplateColumns"] { grid-template-columns: 1fr !important; }

    /* Cards: tight */
    .gx-module-card { padding: 10px !important; border-radius: 8px !important; }
    .gx-section { margin-bottom: 10px !important; }
    .gx-hero-card { margin-bottom: 8px !important; padding: 12px !important; }
    .gx-city-card { padding: 10px !important; }

    /* Flex stacks for big gaps */
    [style*="display: flex"][style*="gap: 24px"] { flex-direction: column !important; gap: 8px !important; }
    [style*="display: flex"][style*="gap: 20px"] { flex-direction: column !important; gap: 8px !important; }

    /* KPI strips: horizontal scroll, not wrap */
    [style*="display: flex"][style*="justifyContent: space-around"],
    [style*="display: flex"][style*="justifyContent: space-between"] {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 6px !important;
    }

    /* Charts: full width */
    .js-plotly-plot { min-height: 200px !important; }
    .dash-graph > div { width: 100% !important; overflow: hidden !important; }

    /* Details: minimal */
    details summary { padding: 10px 12px !important; font-size: 13px !important; }
    details > div { padding: 0 12px 10px !important; }
    .gx-section .dash-graph { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

    /* Prevent overflow */
    img { max-width: 100% !important; height: auto !important; }
    [style*="width: 280px"], [style*="width: 300px"], [style*="width: 350px"],
    [style*="width: 400px"], [style*="width: 500px"] {
        width: 100% !important; max-width: 100% !important;
    }

    /* Home: edge-to-edge feel */
    .gx-home-content { padding: 12px 8px !important; }

    /* Home CTA cards: vertical stack on phone */
    .gx-home-cta { min-width: 100% !important; padding: 16px !important; }

    /* Breadcrumb bar: compact, truncate long paths */
    #back-bar { padding: 6px 12px !important; min-height: 32px !important; top: 0px !important; }
    #back-bar #breadcrumb { font-size: 11px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100vw - 80px); }
    #back-btn { padding: 4px 8px !important; }

    /* Stat card panel: hidden on phone */
    .gx-stat-card-panel { display: none !important; }

    /* Map: FULL viewport height minus topbar — the map IS the app on mobile */
    #home-map, [id*="landing-map"], #explore-map,
    .js-plotly-plot, .plotly, .plot-container, .svg-container {
        height: calc(100vh - 140px) !important;
        max-height: 500px !important;
        min-height: 280px !important;
    }
    /* Hide Plotly modebar on mobile — fingers can pinch/drag natively */
    .modebar-container { display: none !important; }
    /* Map dots: bigger for finger taps */
    .scattergeo .point { transform: scale(1.5); }
    /* Plotly hover label: compact on mobile */
    .hoverlayer .hovertext {
        font-size: 10px !important;
    }
    .hoverlayer .hovertext rect {
        rx: 8 !important;
        ry: 8 !important;
    }
    /* Prevent map from swallowing page scroll — allow vertical scroll through map */
    .dash-graph { touch-action: pan-y !important; overflow: visible !important; }
    /* Map container: no border radius on mobile (maximize usable area) */
    .dash-graph .js-plotly-plot { border-radius: 0 !important; }
    /* Search pill on map: full width on mobile */
    .gx-home-search-pill {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
    }
    /* Map wrapper: edge to edge */
    [style*="flex: 2"][style*="minWidth: 0"] {
        margin: 0 -8px !important;
    }

    /* City cards: full width */
    .gx-city-card { width: 100% !important; }

    /* Home stats bar: horizontal scroll */
    .gx-home-content [style*="justifyContent: space-around"] {
        justify-content: center !important;
        overflow-x: auto !important;
        gap: 8px !important;
    }

    /* Typography: tighter line heights */
    .gx-main-area { font-size: 13px !important; line-height: 1.4 !important; }
    h1, h2, h3, .gx-section-title { letter-spacing: -0.3px !important; }

    /* Borders: softer on mobile */
    details, .gx-hero-card, .gx-module-card, .gx-city-card {
        border-color: rgba(28,36,48,0.6) !important;
    }
    body.light-theme details, body.light-theme .gx-hero-card,
    body.light-theme .gx-module-card, body.light-theme .gx-city-card {
        border-color: #E5E7EB !important;
    }
}

/* ═══ WCAG AA Accessibility ═══ */
/* Focus rings for keyboard nav */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, details summary:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
    border-radius: 4px;
}
/* Skip-nav link */
.gx-skip-nav {
    position: absolute;
    top: -40px;
    left: 0;
    background: #1D4ED8;
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
}
.gx-skip-nav:focus {
    top: 0;
}
/* Ensure minimum tap targets on touch */
@media (pointer: coarse) {
    .gx-city-card, .gx-module-card { min-height: 48px; }
    a, button, [role="button"] { min-height: 44px; min-width: 44px; }
}

/* Loading shimmer for placeholder */
@keyframes gx-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
.gx-loading-bar {
    height: 14px;
    background: linear-gradient(90deg, #2C2C2C 25%, #2A3040 50%, #2C2C2C 75%);
    background-size: 400px 100%;
    animation: gx-shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* ── Page Loading Spinner ── */
@keyframes gx-spin {
    to { transform: rotate(360deg); }
}
.gx-page-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    gap: 16px;
    animation: fadeInUp 0.3s ease-out;
}
.gx-spinner {
    width: 48px; height: 48px;
    background: #4ade80;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
}
.gx-spinner::after {
    content: "X";
    font-size: 26px; font-weight: 900; color: #fff;
    display: inline-block;
    animation: gx-spin-x 2s linear infinite;
    will-change: transform;
}
.gx-page-loading .gx-loading-text {
    font-size: 13px;
    color: #6B7B8D;
    font-weight: 500;
}

/* ── UX Polish — Transitions, Artifacts, Hover ── */

/* Smooth content transitions on navigation */
#main-content, #module-content, #compare-content {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
#main-content.gx-nav-exit, #module-content.gx-nav-exit, #compare-content.gx-nav-exit {
    opacity: 0;
    transform: translateY(6px);
}

/* Hide default Dash loading spinners (we use our own overlay) */
._dash-loading-callback { display: none !important; }
.dash-spinner { display: none !important; }

/* Hide Dash debug/error UI in production */
._dash-error-menu { display: none !important; }
#_dash-renderer-error { display: none !important; }
._dash-debug-menu { display: none !important; }

/* Better hover states for clickable cards and rows */
.gx-city-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.gx-city-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.12);
}
.gx-city-card:active {
    transform: translateY(0);
    transition-duration: 0.05s;
}
.gx-module-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gx-module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.12);
}
.gx-module-card:active {
    transform: translateY(0);
    transition-duration: 0.05s;
}

/* Rankings row click affordance */
.gx-rank-row { user-select: none; }
.gx-rank-row:active {
    background: rgba(74, 222, 128, 0.12) !important;
    transition-duration: 0.05s;
}

/* Sidebar items */
[id*="sidebar-item"]:hover {
    background: rgba(74, 222, 128, 0.08);
    transition: background 0.15s ease;
}

/* Skeleton Screens — Progressive Disclosure ── */
@keyframes gx-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.gx-sk {
    background: linear-gradient(90deg, #2C2C2C 25%, #2A3040 50%, #2C2C2C 75%);
    background-size: 800px 100%;
    animation: gx-shimmer 1.8s ease-in-out infinite;
    border-radius: 4px;
}
.gx-skeleton-card {
    background: linear-gradient(180deg, #141A24 0%, #0E1319 100%);
    border: 1px solid #2C2C2C;
    border-radius: 12px;
    padding: 18px;
    min-height: 140px;
}
.gx-skeleton-card .gx-sk-line {
    height: 12px;
    background: linear-gradient(90deg, #2C2C2C 25%, #2A3040 50%, #2C2C2C 75%);
    background-size: 400px 100%;
    animation: gx-shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}
.gx-skeleton-card .gx-sk-line:nth-child(1) { width: 60%; height: 16px; }
.gx-skeleton-card .gx-sk-line:nth-child(2) { width: 80%; }
.gx-skeleton-card .gx-sk-line:nth-child(3) { width: 45%; }

/* KPI skeleton — mimics the 4-KPI row */
.gx-sk-kpi-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.gx-sk-kpi {
    flex: 1; min-width: 140px; height: 72px;
    background: #141A24; border: 1px solid #2C2C2C; border-radius: 10px;
    padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.gx-sk-kpi .sk-label { width: 60%; height: 10px; }
.gx-sk-kpi .sk-value { width: 45%; height: 22px; }

/* Chart skeleton — mimics plotly chart area */
.gx-sk-chart {
    background: #141A24; border: 1px solid #2C2C2C; border-radius: 10px;
    padding: 16px; margin-bottom: 20px; min-height: 240px;
    display: flex; flex-direction: column; gap: 12px;
}
.gx-sk-chart .sk-title { width: 40%; height: 14px; }
.gx-sk-chart .sk-bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; padding-top: 16px; }
.gx-sk-chart .sk-bar {
    flex: 1; border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, #2C2C2C 25%, #252D3A 50%, #2C2C2C 75%);
    background-size: 800px 100%;
    animation: gx-shimmer 1.8s ease-in-out infinite;
}
.gx-sk-chart .sk-bar:nth-child(1) { height: 65%; }
.gx-sk-chart .sk-bar:nth-child(2) { height: 85%; animation-delay: 0.1s; }
.gx-sk-chart .sk-bar:nth-child(3) { height: 45%; animation-delay: 0.2s; }
.gx-sk-chart .sk-bar:nth-child(4) { height: 70%; animation-delay: 0.3s; }
.gx-sk-chart .sk-bar:nth-child(5) { height: 55%; animation-delay: 0.15s; }
.gx-sk-chart .sk-bar:nth-child(6) { height: 90%; animation-delay: 0.25s; }

/* Table skeleton — mimics AG Grid / html.Table */
.gx-sk-table {
    background: #141A24; border: 1px solid #2C2C2C; border-radius: 10px;
    padding: 16px; margin-bottom: 20px;
}
.gx-sk-table .sk-thead { display: flex; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid #2C2C2C; }
.gx-sk-table .sk-th { height: 10px; flex: 1; }
.gx-sk-table .sk-row { display: flex; gap: 12px; margin-bottom: 8px; }
.gx-sk-table .sk-cell { height: 12px; flex: 1; }
.gx-sk-table .sk-row:nth-child(odd) .sk-cell { animation-delay: 0.1s; }

/* Section skeleton — full module section */
.gx-sk-section {
    background: #141A24; border: 1px solid #2C2C2C; border-radius: 12px;
    padding: 20px; margin-bottom: 16px;
}
.gx-sk-section .sk-section-title { width: 35%; height: 16px; margin-bottom: 16px; }

/* Fade-in when real content replaces skeleton */
.gx-content-loaded { animation: gx-content-reveal 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes gx-content-reveal {
    from { opacity: 0; transform: translateY(12px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gx-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ── Staggered card entrance ── */
.gx-content-loaded > div { animation: gx-stagger-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.gx-content-loaded > div:nth-child(1) { animation-delay: 0s; }
.gx-content-loaded > div:nth-child(2) { animation-delay: 0.04s; }
.gx-content-loaded > div:nth-child(3) { animation-delay: 0.08s; }
.gx-content-loaded > div:nth-child(4) { animation-delay: 0.12s; }
.gx-content-loaded > div:nth-child(5) { animation-delay: 0.16s; }
.gx-content-loaded > div:nth-child(6) { animation-delay: 0.2s; }
.gx-content-loaded > div:nth-child(7) { animation-delay: 0.24s; }
.gx-content-loaded > div:nth-child(8) { animation-delay: 0.28s; }
.gx-content-loaded > div:nth-child(n+9) { animation-delay: 0.3s; }
@keyframes gx-stagger-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Full-screen loading overlay ── */
#gx-loading-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(11, 15, 20, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;  /* always flex — use opacity+visibility to hide */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
#gx-loading-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
#gx-loading-overlay.fade-out { opacity: 0; pointer-events: none; transform: scale(1.02); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; }

/* Spinner — branded X in green square */
.gx-loader-ring {
    width: 56px; height: 56px;
    position: relative;
}
.gx-loader-square {
    width: 100%; height: 100%;
    background: #4ade80;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(74, 222, 128, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.gx-loader-x {
    font-size: 32px;
    font-weight: 900;
    color: #0B0F14;
    font-family: 'Inter', -apple-system, sans-serif;
    line-height: 1;
    letter-spacing: -1px;
    animation: gx-spin-x 2s linear infinite;
    display: inline-block;
    will-change: transform;
}
@keyframes gx-spin-x {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Brand text below spinner */
.gx-loader-brand {
    font-size: 18px; font-weight: 800; letter-spacing: -0.5px;
    background: linear-gradient(135deg, #4ade80, #22d3ee);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gx-pulse-brand 2s ease-in-out infinite;
}
@keyframes gx-pulse-brand {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.03); }
}

/* Loading text */
.gx-loader-text {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px; font-weight: 500;
    color: #9CA3AF;
    letter-spacing: 0.5px;
}
.gx-loader-subtext {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: #6B7280;
    margin-top: -12px;
}

/* Animated dots */
.gx-loader-dots::after {
    content: '';
    animation: gx-dots 1.5s steps(4, end) infinite;
}
@keyframes gx-dots {
    0%  { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* Progress bar */
.gx-loader-progress {
    width: 220px; height: 3px;
    background: rgba(74, 222, 128, 0.08);
    border-radius: 2px; overflow: hidden;
    margin-top: -4px;
}
.gx-loader-progress-bar {
    height: 100%; width: 100%;
    background: linear-gradient(90deg, #4ade80, #22d3ee, #4ade80);
    background-size: 200% 100%;
    border-radius: 2px;
    transform-origin: left center;
    will-change: transform, background-position;
    animation: gx-progress 6s cubic-bezier(0.4, 0, 0.2, 1) forwards,
               gx-progress-shimmer 1.5s ease-in-out infinite;
}
@keyframes gx-progress {
    0%   { transform: scaleX(0); }
    15%  { transform: scaleX(0.3); }
    40%  { transform: scaleX(0.55); }
    60%  { transform: scaleX(0.7); }
    80%  { transform: scaleX(0.85); }
    100% { transform: scaleX(0.95); }
}
@keyframes gx-progress-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Data shard counter */
.gx-loader-counter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: rgba(74, 222, 128, 0.5);
    letter-spacing: 1px;
    margin-top: -8px;
}

/* Light theme override */
.gx-light #gx-loading-overlay {
    background: rgba(255, 255, 255, 0.92);
}
.gx-light .gx-loader-square {
    box-shadow: 0 0 24px rgba(74, 222, 128, 0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}
.gx-light .gx-loader-text { color: #6B7280; }
.gx-light .gx-loader-subtext { color: #9CA3AF; }
.gx-light .gx-loader-progress { background: rgba(59, 130, 246, 0.1); }
.gx-light .gx-loader-progress-bar { background: linear-gradient(90deg, #3B82F6, #06B6D4); }

/* ── Smooth Page Transitions ── */
.gx-page-enter {
    animation: gx-fadein 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes gx-page-slide-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.gx-slide-in { animation: gx-page-slide-in 0.28s cubic-bezier(0.22, 1, 0.36, 1); }

/* ═══ SIDEBAR NAVIGATION ═══ */
.gx-app-shell {
    display: flex;
    min-height: calc(100vh - 52px);
}
.gx-sidebar {
    width: 220px;
    min-width: 220px;
    background: #121212;
    border-right: 1px solid #2C2C2C;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease, min-width 0.2s ease;
    overflow: hidden;
    z-index: 100;
}
.gx-sidebar.collapsed {
    width: 52px;
    min-width: 52px;
}
.gx-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
    color: #666;
    border-bottom: 1px solid #2C2C2C;
    transition: background 0.15s;
}
.gx-sidebar-toggle:hover { background: rgba(74,222,128,0.08); }

.gx-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.gx-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    color: #999;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
    border-left: 3px solid transparent;
}
.gx-sidebar-item:hover {
    background: rgba(74,222,128,0.06);
    color: #e0e0e0;
    transform: translateX(2px);
}
.gx-sidebar-item.active {
    background: rgba(74,222,128,0.22);
    color: #4ade80;
    border-left: 4px solid #4ade80;
    font-weight: 700;
    box-shadow: inset 0 0 18px rgba(74,222,128,0.10);
    position: relative;
}
.gx-sidebar-item.active i {
    color: #4ade80;
    opacity: 1 !important;
    filter: drop-shadow(0 0 6px rgba(74,222,128,0.6));
}
.gx-sidebar-item.active::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 70%;
    background: #4ade80;
    border-radius: 4px 0 0 4px;
    opacity: 0.9;
}
.gx-sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(74,222,128,0.12) 0%, transparent 70%);
    pointer-events: none;
    border-radius: inherit;
}
.gx-sidebar-item i {
    width: 20px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.2s ease, color 0.2s ease, filter 0.2s ease;
}
.gx-sidebar-item:hover i {
    opacity: 0.85;
}
.gx-sidebar-item.active i {
    opacity: 1;
}
.gx-sidebar-item .gx-sidebar-label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.gx-sidebar-item .gx-sidebar-desc {
    display: none;
}
.gx-sidebar:not(.collapsed) .gx-sidebar-item .gx-sidebar-desc {
    display: block;
}
.gx-sidebar.collapsed .gx-sidebar-label {
    display: none;
}
.gx-sidebar.collapsed .gx-sidebar-desc {
    display: none;
}
.gx-sidebar.collapsed .gx-sidebar-item {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}

/* Back-to-top button */
.gx-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(22,163,74,0.92);
    color: white;
    border: 2px solid rgba(74,222,128,0.3);
    font-size: 18px;
    cursor: pointer;
    z-index: 9998;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 12px rgba(74,222,128,0.15);
    transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
}
.gx-back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.gx-back-to-top:hover {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 20px rgba(74,222,128,0.25);
}
.gx-back-to-top:active {
    transform: scale(0.95);
}
@media (max-width: 480px) {
    .gx-back-to-top { bottom: 76px; right: 16px; width: 40px; height: 40px; }
}

/* Main content area with sidebar */
.gx-main-area {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    max-height: calc(100vh - 52px);
}
/* Fully collapse loading wrapper when compare page is active */
#main-loading-wrap.gx-compare-active {
    min-height: 0 !important; max-height: 0 !important;
    overflow: hidden !important; padding: 0 !important;
    margin: 0 !important; display: block !important;
}
#main-loading-wrap.gx-compare-active > * {
    padding: 0 !important; min-height: 0 !important;
    max-height: 0 !important; overflow: hidden !important;
}

/* ═══ TOPBAR V2 ═══ */
.gx-topbar-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    height: 52px;
    border-bottom: 1px solid #2C2C2C;
    background: #121212;
    position: sticky;
    top: 0;
    z-index: 200;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.gx-topbar-v2.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    border-bottom-color: transparent;
}
.gx-topbar-v2 .gx-tb-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.gx-topbar-v2 .gx-tb-center {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: center;
    max-width: 600px;
    margin: 0 24px;
}
.gx-topbar-v2 .gx-tb-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gx-tb-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid #2C2C2C;
    background: transparent;
    color: #9DA7B3;
    white-space: nowrap;
}
.gx-tb-btn:hover { background: rgba(59,130,246,0.08); color: #E6EDF3; }
.gx-tb-btn.primary { background: #1D4ED8; border-color: #1D4ED8; color: #fff; }
.gx-tb-btn.primary:hover { background: #2563EB; }
.gx-tb-btn i { font-size: 13px; }

/* ═══ MAP ZOOM BUTTONS ═══ */
.gx-map-zoom {
    position: absolute;
    right: 16px;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}
.gx-map-zoom button {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #2C2C2C;
    background: #1E1E1E;
    color: #E6EDF3;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.gx-map-zoom button:hover {
    background: #2A2A2A;
}

/* ═══ HOME SEARCH PILL ═══ */
.gx-home-search-pill:focus-within {
    width: 300px !important;
    box-shadow: 0 0 0 2px rgba(74,222,128,0.25);
    border-color: rgba(74,222,128,0.4) !important;
}
.gx-home-search-pill input::placeholder { color: #555; }

/* ═══ MOBILE BOTTOM SHEET ═══ */
.gx-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1E1E1E;
    border-top: 1px solid #2C2C2C;
    border-radius: 16px 16px 0 0;
    padding: 8px 16px 16px;
    z-index: 400;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
    display: none;
}
.gx-bottom-sheet.gx-bs-open {
    transform: translateY(0);
}
.gx-bs-handle {
    width: 32px;
    height: 4px;
    background: #2A3545;
    border-radius: 2px;
    margin: 0 auto 10px;
}
/* Only show bottom sheet on mobile */
@media (min-width: 481px) {
    .gx-bottom-sheet { display: none !important; }
}
@media (max-width: 480px) {
    .gx-bottom-sheet { display: block; }
    .gx-bottom-sheet.gx-bs-open { display: block; }
}

/* ═══ MODULE TAB STRIP ═══ */
.gx-module-tab-strip::-webkit-scrollbar { display: none; }
.gx-module-tab:hover {
    background: rgba(74,222,128,0.08) !important;
    border-color: rgba(74,222,128,0.3) !important;
    color: #4ade80 !important;
}
.gx-module-tab:active {
    transform: scale(0.96);
}

/* ═══ WELCOME OVERLAY ═══ */
.gx-welcome-overlay {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: rgba(11,15,20,0.88);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(74,222,128,0.2);
    border-radius: 16px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
@keyframes gx-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ═══ STICKY KPI BAR ═══ */
.gx-sticky-kpi-bar {
    letter-spacing: 0.02em;
}
@media (max-width: 480px) {
    .gx-sticky-kpi-bar { font-size: 9px !important; padding: 3px 10px !important; gap: 6px !important; }
    .gx-home-search-pill { width: clamp(120px, 40vw, 180px) !important; }
    .gx-home-search-pill:focus-within { width: calc(100% - 28px) !important; }
}

/* ═══ COMPARE PRESETS (sticky bar) ═══ */
.gx-compare-presets {
    position: sticky; top: 0; z-index: 50;
    padding: 8px 0; margin-bottom: 12px;
    background: rgba(18,18,18,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.light-theme .gx-compare-presets { background: rgba(255,255,255,0.95); }

/* ═══ COMPARE GO BUTTON ═══ */
#compare-go-btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(74,222,128,0.4) !important; }
#compare-go-btn:active { transform: translateY(0); }

/* ═══ COMPARE CITY TILES ═══ */
.gx-compare-tile { opacity: 0.7; }
.gx-compare-tile:hover { opacity: 1; background: rgba(59,130,246,0.08) !important; border-color: rgba(59,130,246,0.3) !important; }
.gx-compare-tile.selected {
    opacity: 1;
    background: rgba(59,130,246,0.15) !important;
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 1px rgba(59,130,246,0.3);
}
.light-theme .gx-compare-tile:hover { background: rgba(59,130,246,0.06) !important; }
.light-theme .gx-compare-tile.selected { background: rgba(59,130,246,0.12) !important; }

/* ═══ COMPARE TRAY (persistent bottom bar) ═══ */
.gx-compare-tray {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1E1E1E;
    border-top: 1px solid #2C2C2C;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 300;
    transition: transform 0.25s ease;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}
.gx-compare-tray.hidden { transform: translateY(100%); }
.gx-compare-tray .gx-tray-cities {
    display: flex;
    gap: 8px;
    flex: 1;
    overflow-x: auto;
    align-items: center;
}
.gx-tray-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: #E6EDF3;
    white-space: nowrap;
}
.gx-tray-chip .gx-tray-x {
    cursor: pointer;
    color: #6B7683;
    font-size: 14px;
    margin-left: 4px;
    transition: color 0.15s;
}
.gx-tray-chip .gx-tray-x:hover { color: #EF4444; }
.gx-tray-chip:hover {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.5);
}
.gx-tray-chip:hover .gx-tray-x, .gx-tray-chip:hover span[id*="tray-remove"] {
    color: rgba(255,255,255,0.7);
}

/* Sidebar responsive — tablet: collapsed icon-only */
@media (max-width: 768px) {
    .gx-sidebar { width: 48px; min-width: 48px; }
    .gx-sidebar .gx-sidebar-label { display: none; }
    .gx-sidebar .gx-sidebar-item { justify-content: center; padding: 10px 0; gap: 0; }
    .gx-sidebar .gx-sidebar-item i { font-size: 16px; }
}
/* Sidebar responsive — phone: HIDE entirely, use floating mini-nav */
@media (max-width: 480px) {
    .gx-app-shell {
        flex-direction: column !important;
        min-height: 100vh !important;
    }
    /* Kill the sidebar completely on phone */
    .gx-sidebar {
        display: none !important;
    }
    /* Main content: full height, no bottom padding waste */
    .gx-main-area {
        width: 100% !important;
        min-height: calc(100vh - 48px) !important;
        padding-bottom: 16px !important;
    }
    /* Topbar: ultra-minimal */
    .gx-topbar-v2 {
        height: 44px !important;
        padding: 0 10px !important;
        backdrop-filter: blur(12px);
        background: rgba(11,15,20,0.85) !important;
    }
    body.light-theme .gx-topbar-v2 {
        background: rgba(255,255,255,0.92) !important;
    }
    /* Back bar: tighter */
    #back-bar {
        padding: 6px 10px !important;
        gap: 6px !important;
        position: sticky !important;
        top: 0px !important;
        z-index: 200 !important;
        background: rgba(11,15,20,0.92) !important;
        backdrop-filter: blur(10px) !important;
    }
    body.light-theme #back-bar {
        background: rgba(248,249,250,0.95) !important;
    }
    #back-bar button { font-size: 12px !important; padding: 5px 10px !important; }
    /* Landing controls: tight */
    #landing-controls { padding: 8px 12px !important; }
    /* Hide mobile backdrop */
    .gx-mobile-backdrop { display: none !important; }
    /* Module divider: gone */
    #sidebar-module-divider { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE UX SYSTEM — 6-Point Mobile/Tablet Enhancement
   1. Progressive Disclosure (collapsible sections)
   2. Thumb Zone (mobile bottom tab bar)
   3. Card-based tables (no horizontal scroll)
   4. Bottom Sheets (drill-down panels)
   5. iPad Sidebar Navigation
   6. View Transitions API
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. PROGRESSIVE DISCLOSURE: collapsible module deep-dive sections ── */
.gx-collapsible-section {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.gx-collapsible-section:hover {
    border-color: rgba(99,102,241,0.2);
}
.gx-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    background: rgba(255,255,255,0.02);
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.15s ease;
}
.gx-collapsible-header:hover {
    background: rgba(99,102,241,0.06);
}
.gx-collapsible-header .gx-ch-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gx-collapsible-header .gx-ch-left i {
    font-size: 14px;
    color: #6366F1;
    width: 20px;
    text-align: center;
}
.gx-collapsible-header .gx-ch-title {
    font-size: 14px;
    font-weight: 700;
    color: #E5E7EB;
}
.gx-collapsible-header .gx-ch-badge {
    font-size: 10px;
    color: #888;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}
.gx-collapsible-header .gx-ch-chevron {
    font-size: 12px;
    color: #666;
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.gx-collapsible-section.open .gx-ch-chevron {
    transform: rotate(180deg);
}
.gx-collapsible-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22,1,0.36,1),
                padding 0.25s ease;
    padding: 0 18px;
}
.gx-collapsible-section.open .gx-collapsible-body {
    max-height: 5000px;
    padding: 0 18px 18px 18px;
}
/* On mobile, start all sections collapsed by default */
@media (max-width: 480px) {
    .gx-collapsible-body { max-height: 0 !important; padding: 0 12px !important; }
    .gx-collapsible-section.open .gx-collapsible-body {
        max-height: 5000px !important; padding: 0 12px 14px 12px !important;
    }
    .gx-collapsible-header { padding: 12px 14px; }
}

/* ── 2. THUMB ZONE: mobile bottom tab bar ── */
.gx-bottom-tabs {
    display: none;  /* hidden on desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: rgba(11,15,20,0.96);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    display: none;
}
.gx-bottom-tabs-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 480px;
    margin: 0 auto;
}
.gx-btab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 8px;
    border: none;
    background: none;
    color: #666;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-width: 56px;
    transition: color 0.15s ease;
}
.gx-btab i {
    font-size: 18px;
    line-height: 1;
}
.gx-btab span {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.gx-btab.active {
    color: #4ade80;
    position: relative;
}
.gx-btab.active i {
    filter: drop-shadow(0 0 6px rgba(74,222,128,0.6));
}
.gx-btab.active::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: #4ade80;
    border-radius: 0 0 3px 3px;
}
.gx-btab:active {
    transform: scale(0.92);
}
@media (max-width: 480px) {
    .gx-bottom-tabs { display: block !important; }
    /* Add padding at bottom of main area so content isn't hidden behind tabs */
    .gx-main-area { padding-bottom: 72px !important; }
    /* Hide the old mobile home FAB — bottom tabs replace it */
    .gx-mobile-home-fab { display: none !important; }
}

/* ── 3. CARD-BASED TABLE REFACTOR for mobile ── */
.gx-data-table-responsive {
    width: 100%;
}
@media (max-width: 480px) {
    /* Convert horizontal tables into stacked cards */
    .gx-data-table-responsive table {
        display: block !important;
    }
    .gx-data-table-responsive thead { display: none !important; }
    .gx-data-table-responsive tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .gx-data-table-responsive tr {
        display: flex !important;
        flex-direction: column !important;
        background: rgba(255,255,255,0.03) !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
        border-radius: 10px !important;
        padding: 12px 14px !important;
        gap: 6px !important;
    }
    .gx-data-table-responsive td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 4px 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.04) !important;
        font-size: 13px !important;
    }
    .gx-data-table-responsive td:last-child {
        border-bottom: none !important;
    }
    .gx-data-table-responsive td::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        flex-shrink: 0;
        margin-right: 12px;
    }
    /* AG Grid: force stacked layout on phone */
    .ag-theme-alpine-dark .ag-root-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ── 4. BOTTOM SHEETS for drill-downs ── */
.gx-drill-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    background: #161B22;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.gx-drill-sheet.open {
    transform: translateY(0);
}
.gx-drill-sheet-handle {
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin: 10px auto 6px;
    flex-shrink: 0;
}
.gx-drill-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.gx-drill-sheet-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #E5E7EB;
}
.gx-drill-sheet-close {
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}
.gx-drill-sheet-close:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.light-theme .gx-drill-sheet-close:hover {
    background: rgba(0,0,0,0.06);
    color: #1A1A1A;
}
.gx-drill-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.gx-drill-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 599;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.gx-drill-sheet-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}
/* On desktop, render as a right-side drawer instead of bottom sheet */
@media (min-width: 769px) {
    .gx-drill-sheet {
        left: auto;
        right: 0;
        top: 0;
        bottom: 0;
        width: 440px;
        max-height: 100vh;
        border-radius: 0;
        border-left: 1px solid rgba(255,255,255,0.08);
        transform: translateX(100%);
    }
    .gx-drill-sheet.open {
        transform: translateX(0);
    }
}

/* ── 5. iPAD SIDEBAR NAVIGATION ── */
@media (min-width: 481px) and (max-width: 1024px) {
    /* iPad: show collapsible sidebar instead of bottom tabs */
    .gx-bottom-tabs { display: none !important; }
    .gx-sidebar {
        width: 220px !important;
        min-width: 220px !important;
        display: flex !important;
        transition: width 0.25s cubic-bezier(0.22,1,0.36,1),
                    min-width 0.25s cubic-bezier(0.22,1,0.36,1);
    }
    .gx-sidebar.collapsed {
        width: 52px !important;
        min-width: 52px !important;
    }
    .gx-sidebar.collapsed .gx-sidebar-label {
        display: none;
    }
    .gx-sidebar.collapsed .gx-sidebar-item {
        justify-content: center;
        padding: 10px 0;
        gap: 0;
    }
    .gx-sidebar .gx-sidebar-item {
        padding: 10px 16px;
        min-height: 44px;  /* touch-friendly hit target */
    }
    .gx-sidebar .gx-sidebar-toggle {
        min-height: 44px;
    }
    /* Main area adjusts */
    .gx-main-area {
        padding-bottom: 16px !important;
    }
}

/* ── 6. VIEW TRANSITIONS API ── */
/* These classes are applied via JS during transition (see clientside callback) */
@supports (view-transition-name: auto) {
    ::view-transition-old(root) {
        animation: gx-vt-fade-out 0.2s ease-out both;
    }
    ::view-transition-new(root) {
        animation: gx-vt-fade-in 0.25s ease-in both;
    }
    @keyframes gx-vt-fade-out {
        from { opacity: 1; transform: scale(1); }
        to   { opacity: 0; transform: scale(0.98); }
    }
    @keyframes gx-vt-fade-in {
        from { opacity: 0; transform: scale(1.01); }
        to   { opacity: 1; transform: scale(1); }
    }
    /* Named transition for the main content area */
    #main-content { view-transition-name: main-content; }
    ::view-transition-old(main-content) {
        animation: gx-vt-slide-out 0.22s cubic-bezier(0.22,1,0.36,1) both;
    }
    ::view-transition-new(main-content) {
        animation: gx-vt-slide-in 0.22s cubic-bezier(0.22,1,0.36,1) both;
    }
    @keyframes gx-vt-slide-out {
        from { opacity: 1; transform: translateX(0); }
        to   { opacity: 0; transform: translateX(-20px); }
    }
    @keyframes gx-vt-slide-in {
        from { opacity: 0; transform: translateX(20px); }
        to   { opacity: 1; transform: translateX(0); }
    }
}
/* Fallback for browsers without View Transitions API */
@supports not (view-transition-name: auto) {
    #main-content {
        transition: opacity 0.2s ease;
    }
}

/* ═══ RECENT CITIES BAR ═══ */
.gx-recent-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
}
.gx-recent-bar::-webkit-scrollbar { display: none; }
.gx-recent-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid #2C2C2C;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: #aaa;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.gx-tier-chip-clickable:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.gx-recent-chip:hover {
    background: rgba(74,222,128,0.08);
    border-color: rgba(74,222,128,0.3);
    color: #4ade80;
}
.gx-recent-chip img {
    width: 14px;
    height: 10px;
    border-radius: 1px;
    object-fit: cover;
}

/* ═══ NEXT/PREV MODULE NAV ═══ */
.gx-module-nav-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    gap: 12px;
}
.gx-module-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid #2C2C2C;
    border-radius: 8px;
    color: #aaa;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.gx-module-nav-btn:hover {
    background: rgba(74,222,128,0.08);
    border-color: rgba(74,222,128,0.3);
    color: #4ade80;
    transform: translateX(2px);
}
.gx-module-nav-btn.prev:hover { transform: translateX(-2px); }
.gx-module-nav-btn i { font-size: 11px; }

/* ═══ MOBILE FLOATING HOME BUTTON ═══ */
.gx-mobile-home-fab {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(11,15,20,0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(74,222,128,0.25);
    color: #4ade80;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 350;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    transition: all 0.2s ease;
}
.gx-mobile-home-fab:hover {
    background: rgba(74,222,128,0.15);
    transform: scale(1.08);
}
@media (max-width: 480px) {
    .gx-mobile-home-fab { display: flex; }
}
@media (min-width: 481px) {
    .gx-mobile-home-fab { display: none !important; }
}

/* ═══ DIRECTION-AWARE TRANSITIONS ═══ */
@keyframes gx-slide-forward {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes gx-slide-back {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
.gx-slide-forward { animation: gx-slide-forward 0.25s cubic-bezier(0.22, 1, 0.36, 1) both; }
.gx-slide-back { animation: gx-slide-back 0.25s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ═══ RANKINGS / STANDINGS TABLE ═══ */
@keyframes gx-row-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.gx-rank-row {
    animation: gx-row-in 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
.gx-rank-row:hover {
    background: rgba(74,222,128,0.06) !important;
}
.gx-rank-row:hover td {
    color: #E6EDF3 !important;
}
.light-theme .gx-rank-row:hover td {
    color: #1A1A1A !important;
}
.gx-rank-tab:hover {
    background: rgba(74,222,128,0.08) !important;
    color: #4ade80 !important;
}
/* Apply button pulse when params are dirty */
@keyframes gx-apply-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
    50% { box-shadow: 0 0 12px 4px rgba(74,222,128,0.35); }
}
.gx-rank-apply-btn.dirty {
    animation: gx-apply-pulse 1.6s ease-in-out infinite;
}
.gx-rank-apply-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
#rankings-content table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #121212;
}
.light-theme #rankings-content table thead {
    background: #FFFFFF;
}
#rankings-content table thead th:hover {
    color: #60a5fa !important;
}
#rankings-content table {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}
#rankings-content table td:first-child,
#rankings-content table th:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    background: inherit;
}
@media (max-width: 480px) {
    #rankings-content { font-size: 10px !important; }
    #rankings-content table td, #rankings-content table th { padding: 4px 3px !important; font-size: 10px !important; }
}

/* ── Cmd+K Omnibar ── */
.gx-omnibar-backdrop {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(6px);
    display: flex; justify-content: center; padding-top: min(20vh, 160px);
    animation: gx-omni-fadein 0.12s ease-out;
}
@keyframes gx-omni-fadein { from { opacity: 0; } to { opacity: 1; } }
.gx-omnibar {
    width: min(640px, 92vw); max-height: 70vh;
    background: #161B22; border: 1px solid rgba(99,102,241,0.35);
    border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    display: flex; flex-direction: column; overflow: hidden;
    animation: gx-omni-slide 0.15s ease-out;
}
@keyframes gx-omni-slide { from { opacity: 0; transform: translateY(-16px) scale(0.97); } to { opacity: 1; transform: none; } }
.gx-omnibar-input-row {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.gx-omnibar-input-row i { color: #6366F1; font-size: 16px; flex-shrink: 0; }
.gx-omnibar-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: #E5E7EB; font-size: 16px; font-family: inherit;
    caret-color: #6366F1;
}
.gx-omnibar-input::placeholder { color: #555; }
.gx-omnibar-hint {
    padding: 0 18px; font-size: 10px; color: #555; margin-top: -2px; padding-bottom: 6px;
    font-family: 'JetBrains Mono', monospace;
}
.gx-omnibar-results {
    flex: 1; overflow-y: auto; padding: 6px 8px;
    scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.gx-omnibar-results::-webkit-scrollbar { width: 4px; }
.gx-omnibar-results::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.gx-omni-result {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    transition: background 0.1s;
}
.gx-omni-result:hover, .gx-omni-result.active { background: rgba(99,102,241,0.12); }
.gx-omni-result .omni-icon {
    width: 32px; height: 32px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.gx-omni-result .omni-icon.city { background: rgba(59,130,246,0.15); color: #3B82F6; }
.gx-omni-result .omni-icon.module { background: rgba(139,92,246,0.15); color: #8B5CF6; }
.gx-omni-result .omni-icon.compare { background: rgba(245,158,11,0.15); color: #F59E0B; }
.gx-omni-result .omni-icon.page { background: rgba(34,211,238,0.15); color: #22D3EE; }
.gx-omni-result .omni-label { font-size: 14px; color: #E5E7EB; font-weight: 500; }
.gx-omni-result .omni-sub { font-size: 11px; color: #6B7280; margin-top: 1px; }
.gx-omni-section { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 1px;
    padding: 8px 12px 4px; font-weight: 600; }
.gx-omnibar-footer {
    display: flex; gap: 16px; padding: 8px 18px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 10px; color: #555; font-family: 'JetBrains Mono', monospace;
}
.gx-omnibar-footer kbd {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px; padding: 1px 5px; font-size: 10px; color: #888;
}

/* ── Dual-Pane Compare ── */
.gx-dual-container { display: flex; gap: 0; height: calc(100vh - 200px); overflow: hidden; }
.gx-dual-pane {
    flex: 1; overflow-y: auto; padding: 16px 12px;
    scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.gx-dual-pane::-webkit-scrollbar { width: 5px; }
.gx-dual-pane::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.gx-dual-divider {
    width: 1px; background: linear-gradient(180deg, transparent, rgba(99,102,241,0.3) 20%, rgba(99,102,241,0.3) 80%, transparent);
    flex-shrink: 0; position: relative; display: flex; align-items: flex-start; justify-content: center;
}
.gx-compare-swap {
    position: sticky; top: 16px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3);
    color: #A5B4FC; cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-left: -17px;
}
.gx-compare-swap:hover {
    background: rgba(99,102,241,0.3); transform: scale(1.12);
    box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}
.gx-compare-swap:active { transform: scale(0.92) rotate(180deg); }
.gx-dual-pane-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; margin-bottom: 12px;
    border-radius: 10px; position: sticky; top: 0; z-index: 10;
}
.gx-dual-section {
    border: 1px solid rgba(255,255,255,0.05); border-radius: 10px;
    margin-bottom: 8px; overflow: hidden; transition: border-color 0.2s;
}
.gx-dual-section:hover { border-color: rgba(99,102,241,0.2); }
.gx-dual-section-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; cursor: pointer; user-select: none;
    background: rgba(255,255,255,0.02); transition: background 0.15s;
    border-radius: 8px;
}
.gx-dual-section-header:hover { background: rgba(255,255,255,0.04); }
.gx-dual-section-header .gx-collapse-icon {
    font-size: 11px; color: #64748B; margin-left: auto; transition: transform 0.2s;
}
.gx-dual-section-header .gx-collapse-icon.open { transform: none; }
.gx-dual-section-header .gx-collapse-text {
    font-size: 10px; color: #64748B; margin-left: 6px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.gx-dual-section-body {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
    padding: 0 14px;
}
.gx-dual-section-body.open { max-height: 4000px; padding: 12px 14px; transition: max-height 0.5s ease-in; }
.gx-dual-kpi { display: flex; justify-content: space-between; align-items: center; padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03); }
.gx-dual-kpi:last-child { border-bottom: none; }
.gx-dual-kpi .kpi-label { font-size: 12px; color: #94A3B8; }
.gx-dual-kpi .kpi-value { font-size: 14px; font-weight: 600; color: #E5E7EB;
    font-family: 'JetBrains Mono', monospace; }
@media (max-width: 768px) {
    .gx-dual-container { flex-direction: column; height: auto; }
    .gx-dual-pane { max-height: 60vh; }
    .gx-dual-divider { width: 100%; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(99,102,241,0.3) 20%, rgba(99,102,241,0.3) 80%, transparent); }
}

/* ── GovXRay Data Dictionary — dotted-underline glossary tooltips ──────── */
.gx-term { position: relative; display: inline; cursor: help; }
.gx-term-text { border-bottom: 1px dotted rgba(255,255,255,0.35); transition: border-color 0.15s; }
.gx-term:hover .gx-term-text { border-bottom-color: rgba(99,102,241,0.7); }
.gx-term-tip {
    visibility: hidden; opacity: 0; position: absolute;
    bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: #141A24; border: 1px solid rgba(99,102,241,0.3);
    border-radius: 8px; padding: 10px 14px;
    font-size: 12px; line-height: 1.5; color: #CBD5E1;
    font-weight: 400; text-transform: none; letter-spacing: 0;
    width: 300px; max-width: 90vw;
    z-index: 10000; pointer-events: none;
    transition: opacity 0.15s, visibility 0.15s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.gx-term-tip::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: rgba(99,102,241,0.3);
}
.gx-term:hover .gx-term-tip { visibility: visible; opacity: 1; }
.gx-term-tip strong { color: #E2E8F0; font-weight: 600; }
.gx-term-tip .gx-tip-label { color: #6366F1; font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 4px; font-weight: 600; }
.gx-term-tip .gx-tip-vars { margin-top: 6px; padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06); font-size: 11px; color: #94A3B8; }
/* AG Grid header tooltip override — keep dotted underline in headers */
.ag-header-cell .gx-term-text { border-bottom: 1px dotted rgba(255,255,255,0.25); }

/* ── Audit Drawer — data lineage side panel ───────────────────────────── */
.gx-audit-val {
    cursor: pointer; transition: color 0.15s, text-shadow 0.15s;
    border-bottom: 1px dashed rgba(99,102,241,0.0);
}
.gx-audit-val:hover {
    color: #818CF8 !important;
    border-bottom-color: rgba(99,102,241,0.5);
    text-shadow: 0 0 8px rgba(99,102,241,0.25);
}
/* Backdrop */
.gx-audit-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 9998; opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}
.gx-audit-backdrop.open { opacity: 1; pointer-events: auto; }
/* Drawer panel */
.gx-audit-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 90vw;
    background: #0D1117; border-left: 1px solid rgba(99,102,241,0.2);
    z-index: 9999; transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: -8px 0 30px rgba(0,0,0,0.6);
}
.gx-audit-drawer.open { transform: translateX(0); }
/* Header */
.gx-audit-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(99,102,241,0.04);
}
.gx-audit-header h3 { margin: 0; font-size: 14px; font-weight: 700;
    color: #818CF8; letter-spacing: 0.5px; text-transform: uppercase; }
.gx-audit-close {
    background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
    color: #94A3B8; cursor: pointer; padding: 4px 10px; font-size: 12px;
    transition: all 0.15s;
}
.gx-audit-close:hover { background: rgba(255,255,255,0.06); color: #E2E8F0; }
/* Body */
.gx-audit-body { flex: 1; overflow-y: auto; padding: 20px; }
/* Sections */
.gx-audit-section { margin-bottom: 20px; }
.gx-audit-section-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #6366F1; margin-bottom: 8px;
}
.gx-audit-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: 13px;
}
.gx-audit-row:last-child { border-bottom: none; }
.gx-audit-label { color: #94A3B8; min-width: 110px; flex-shrink: 0; }
.gx-audit-value { color: #E2E8F0; text-align: right; font-family: 'JetBrains Mono', monospace;
    font-weight: 500; word-break: break-word; }
/* Source doc cards */
.gx-audit-doc {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
    transition: border-color 0.15s;
}
.gx-audit-doc:hover { border-color: rgba(99,102,241,0.3); }
.gx-audit-doc a { color: #818CF8; text-decoration: none; font-size: 13px; font-weight: 600; }
.gx-audit-doc a:hover { text-decoration: underline; }
.gx-audit-doc-meta { font-size: 11px; color: #6B7B8D; margin-top: 4px; }
/* Indicator path */
.gx-audit-path {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6B7B8D;
    background: rgba(255,255,255,0.03); border-radius: 4px; padding: 6px 10px;
    word-break: break-all;
}
/* Empty state */
.gx-audit-empty { color: #4B5563; font-style: italic; font-size: 12px; padding: 8px 0; }

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT THEME — Apple-clean white (comprehensive)
   JS rewrites inline styles; CSS handles class-based overrides
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Global base ── */
body.light-theme {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
}
/* Root app container — override inline gradient */
body.light-theme #react-entry-point > div {
    background: #FFFFFF !important;
}
/* Loading overlay */
body.light-theme .dash-loading .dash-spinner-container {
    background: transparent !important;
}
body.light-theme ._dash-loading::before {
    background: linear-gradient(90deg, transparent, #16A34A, transparent) !important;
}
/* Map container background — keep transparent so geo colors show through */
body.light-theme .js-plotly-plot .plotly .main-svg { background: transparent !important; }
body.light-theme ::-webkit-scrollbar-track { background: #F8F9FA; }
body.light-theme ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
body.light-theme ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── 2. Nuclear override: EVERY div/span inside body.light-theme ── */
body.light-theme #_pages_content div,
body.light-theme #_pages_content span,
body.light-theme #_pages_content p,
body.light-theme #_pages_content label,
body.light-theme #_pages_content li,
body.light-theme #_pages_content h1,
body.light-theme #_pages_content h2,
body.light-theme #_pages_content h3,
body.light-theme #_pages_content h4,
body.light-theme #_pages_content details,
body.light-theme #_pages_content summary {
    /* Inherit color from body unless explicitly set by accent classes */
    color: inherit;
}

/* ── 3. Card & section components ── */
body.light-theme .gx-hero-card {
    background: linear-gradient(135deg, #F8F9FA 0%, #F0F1F3 50%, #F8F9FA 100%) !important;
    border-color: #E5E7EB !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
body.light-theme .gx-hero-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; }
body.light-theme .gx-home-cta { border-color: #E5E7EB !important; }
body.light-theme .gx-home-cta:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; border-color: rgba(99,102,241,0.3) !important; }
body.light-theme .gx-section {
    background: #F8F9FA !important;
    border-color: #E5E7EB !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
body.light-theme .gx-module-card {
    background: #F8F9FA !important;
    border-color: #E5E7EB !important;
}
body.light-theme .gx-module-card:hover {
    background: #F0F1F3 !important;
    border-color: #D1D5DB !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
body.light-theme .gx-city-card {
    background: #F8F9FA !important;
    border-color: #E5E7EB !important;
}
body.light-theme .gx-city-card:hover {
    border-color: #D1D5DB !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

/* ── 4. Topbar ── */
body.light-theme .gx-topbar, body.light-theme .gx-topbar-v2 {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
body.light-theme .gx-topbar-v2.scrolled {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    border-bottom-color: transparent !important;
}
body.light-theme #back-bar {
    background: #F8F9FA !important;
    border-bottom-color: #E5E7EB !important;
}
body.light-theme .gx-tb-btn {
    background: #F0F1F3 !important;
    color: #1A1A1A !important;
    border-color: #E5E7EB !important;
}
body.light-theme .gx-tb-btn:hover { background: #E5E7EB !important; }
body.light-theme .gx-tb-btn.primary { background: #16A34A !important; color: white !important; }

/* ── 5. Ticker ── */
body.light-theme .gx-ticker-wrap {
    background: #F8F9FA !important;
    border-color: #E5E7EB !important;
}
body.light-theme .gx-ticker-wrap::before { background: linear-gradient(to right, #F8F9FA, transparent) !important; }
body.light-theme .gx-ticker-wrap::after  { background: linear-gradient(to left, #F8F9FA, transparent) !important; }

/* ── 6. Sidebar ── */
body.light-theme .gx-sidebar, body.light-theme [id="sidebar"] {
    background: #F8F9FA !important;
    border-right-color: #E5E7EB !important;
}

/* ── 7. Shimmer / loading ── */
body.light-theme .gx-shimmer {
    background: linear-gradient(90deg, #F0F1F3 25%, #E5E7EB 50%, #F0F1F3 75%) !important;
    background-size: 400px 100%;
}
body.light-theme .gx-sk {
    background: linear-gradient(90deg, #E5E7EB 25%, #D1D5DB 50%, #E5E7EB 75%) !important;
    background-size: 800px 100%;
}
body.light-theme .gx-skeleton-card,
body.light-theme .gx-sk-kpi,
body.light-theme .gx-sk-chart,
body.light-theme .gx-sk-table,
body.light-theme .gx-sk-section {
    background: #FFFFFF !important;
    border-color: #E5E7EB !important;
}
body.light-theme .gx-skeleton-card .gx-sk-line,
body.light-theme .gx-sk-chart .sk-bar {
    background: linear-gradient(90deg, #E5E7EB 25%, #D1D5DB 50%, #E5E7EB 75%) !important;
    background-size: 800px 100%;
}
body.light-theme .gx-sk-table .sk-thead { border-bottom-color: #E5E7EB !important; }

/* ── 8. Deficit/surplus highlights ── */
body.light-theme .gx-highlight-deficit {
    background: linear-gradient(135deg, rgba(220,38,38,0.06) 0%, rgba(220,38,38,0.02) 100%) !important;
    border-color: rgba(220,38,38,0.15) !important;
}
body.light-theme .gx-highlight-surplus {
    background: linear-gradient(135deg, rgba(22,163,74,0.06) 0%, rgba(22,163,74,0.02) 100%) !important;
    border-color: rgba(22,163,74,0.15) !important;
}

/* ── 9. Source badges ── */
body.light-theme .gx-source {
    background: rgba(0,0,0,0.03) !important;
    border-color: #E5E7EB !important;
    color: #4B5563 !important;
}

/* ── 10. Collapsible sections ── */
body.light-theme .gx-collapsible-section {
    background: #F8F9FA !important;
    border-color: #E5E7EB !important;
}
body.light-theme .gx-collapsible-section:hover {
    border-color: rgba(99,102,241,0.25) !important;
}
body.light-theme .gx-collapsible-header {
    background: rgba(0,0,0,0.02) !important;
}
body.light-theme .gx-collapsible-header:hover {
    background: rgba(99,102,241,0.06) !important;
}
body.light-theme .gx-collapsible-header .gx-ch-title {
    color: #1A1A1A !important;
}
body.light-theme .gx-collapsible-header .gx-ch-badge {
    color: #4B5563 !important;
    background: rgba(0,0,0,0.05) !important;
}
body.light-theme .gx-collapsible-header .gx-ch-chevron {
    color: #6B7280 !important;
}

/* ── 11. Dash dropdowns & inputs ── */
body.light-theme .Select-control,
body.light-theme .dash-dropdown .Select-control {
    background-color: #FFFFFF !important;
    border-color: #E5E7EB !important;
    color: #1A1A1A !important;
}
body.light-theme .Select-menu-outer {
    background-color: #FFFFFF !important;
    border-color: #E5E7EB !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
body.light-theme .Select-option { background-color: #FFFFFF !important; color: #1A1A1A !important; }
body.light-theme .Select-option.is-focused { background-color: #F0F1F3 !important; }
body.light-theme .Select-value-label,
body.light-theme .Select-placeholder { color: #1A1A1A !important; }
body.light-theme .Select-arrow-zone .Select-arrow { border-top-color: #6B7280 !important; }
body.light-theme input[type="text"],
body.light-theme input[type="number"],
body.light-theme textarea {
    background-color: #FFFFFF !important;
    border-color: #E5E7EB !important;
    color: #1A1A1A !important;
}

/* ── 12. Modals ── */
body.light-theme .gx-modal-content, body.light-theme .gx-omnibar-content {
    background: #FFFFFF !important;
    border-color: #E5E7EB !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}

/* ── 13. Tables ── */
body.light-theme table { color: #1A1A1A !important; }
body.light-theme th { background: #F0F1F3 !important; color: #1A1A1A !important; border-color: #E5E7EB !important; }
body.light-theme td { border-color: #E5E7EB !important; }

/* ── 14. AG Grid ── */
body.light-theme .ag-theme-alpine-dark {
    --ag-background-color: #FFFFFF !important;
    --ag-header-background-color: #F0F1F3 !important;
    --ag-odd-row-background-color: rgba(0,0,0,0.04) !important;
    --ag-border-color: #E5E7EB !important;
    --ag-header-foreground-color: #1A1A1A !important;
    --ag-foreground-color: #1A1A1A !important;
    --ag-row-hover-color: #F0F1F3 !important;
}

/* ── 15. Misc ── */
body.light-theme hr { border-color: #E5E7EB !important; }
body.light-theme .gx-mobile-backdrop { background: rgba(0,0,0,0.25) !important; }
body.light-theme .gx-audit-path { background: rgba(0,0,0,0.03) !important; color: #4B5563 !important; }
/* Bottom tabs (mobile) */
body.light-theme .gx-bottom-tabs {
    background: rgba(255,255,255,0.96) !important;
    border-top: 1px solid #E5E7EB !important;
}
body.light-theme .gx-btab { color: #9CA3AF !important; }
body.light-theme .gx-btab.active { color: #16A34A !important; }
/* Drill sheet (mobile bottom panel) */
body.light-theme .gx-drill-sheet {
    background: #FFFFFF !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.12) !important;
}
body.light-theme .gx-drill-sheet-handle { background: rgba(0,0,0,0.15) !important; }
body.light-theme .gx-drill-sheet-header { border-bottom-color: #E5E7EB !important; }
body.light-theme .gx-drill-sheet-close { color: #6B7280 !important; }
body.light-theme .dash-checklist label,
body.light-theme .dash-radioitems label { color: #4B5563 !important; }

/* ── 15b. Score ring ── */
body.light-theme .gx-score-ring {
    background: conic-gradient(#22C55E var(--score-pct), #E5E7EB var(--score-pct)) !important;
}
body.light-theme .gx-score-ring::after {
    background: #FFFFFF !important;
}
body.light-theme .gx-score-ring .score-value {
    color: #1A1A1A !important;
}

/* ── 15c. Selected city card ── */
body.light-theme .gx-city-card--selected {
    background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%) !important;
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.2), 0 4px 12px rgba(59,130,246,0.08) !important;
}

/* ── 15d. Spinner ── */
body.light-theme .gx-spinner {
    background: #4ade80;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.25);
}
body.light-theme .gx-page-loading .gx-loading-text {
    color: #6B7280 !important;
}

/* ── 15e. Sidebar (dark bg leaks on mobile) ── */
body.light-theme .gx-sidebar {
    background: #F8F9FA !important;
    border-right-color: #E5E7EB !important;
}
body.light-theme .gx-sidebar-toggle {
    color: #6B7280 !important;
    border-bottom-color: #E5E7EB !important;
}
body.light-theme .gx-sidebar-item {
    color: #4B5563 !important;
}
body.light-theme .gx-sidebar-item:hover {
    background: rgba(0,0,0,0.04) !important;
    color: #1A1A1A !important;
}
body.light-theme .gx-sidebar-item.active {
    color: #15803D !important;
    border-left: 3px solid #16A34A !important;
    background: rgba(22,163,74,0.10) !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 12px rgba(22,163,74,0.06) !important;
    position: relative;
}
body.light-theme .gx-sidebar-item.active i {
    color: #16A34A !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 3px rgba(22,163,74,0.4)) !important;
}
body.light-theme .gx-sidebar-item.active::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: #16A34A;
    border-radius: 4px 0 0 4px;
    opacity: 0.6;
}
body.light-theme .gx-sidebar-item i {
    opacity: 0.5 !important;
}
body.light-theme .gx-sidebar-item:hover i {
    opacity: 0.8 !important;
}
body.light-theme .gx-sidebar-desc {
    color: #6B7280 !important;
}

/* ── 15e2. Back-to-top button ── */
body.light-theme .gx-back-to-top {
    background: rgba(59,130,246,0.85) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* ── 15f. Highlight bar ── */
body.light-theme .gx-highlight-bar {
    background: linear-gradient(90deg, rgba(99,102,241,0.06) 0%, transparent 100%) !important;
    border-left-color: #6366F1 !important;
}

/* ── 15g. Cards hover (dark box-shadow bleeding) ── */
body.light-theme .gx-city-card:hover,
body.light-theme .gx-module-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
body.light-theme .gx-ripple { background: rgba(22, 163, 74, 0.18); }

/* ── 15h. Skeleton dark backgrounds ── */
body.light-theme .gx-sk {
    background: linear-gradient(90deg, #E5E7EB 25%, #D1D5DB 50%, #E5E7EB 75%) !important;
    background-size: 800px 100%;
}

/* ── 15i. Inline style nuclear overrides for common dark backgrounds ── */
body.light-theme [style*="background: #121212"],
body.light-theme [style*="background:#121212"],
body.light-theme [style*="background-color: #121212"],
body.light-theme [style*="backgroundColor: #121212"] {
    background: #FFFFFF !important;
}
body.light-theme [style*="background: #1E1E1E"],
body.light-theme [style*="background:#1E1E1E"],
body.light-theme [style*="background-color: #1E1E1E"],
body.light-theme [style*="backgroundColor: #1E1E1E"] {
    background: #F8F9FA !important;
}
/* ── Force light backgrounds in deep-dive modules (cards with border-radius) ── */
body.light-theme .gx-content-loaded [style*="border-radius"][style*="background"],
body.light-theme .gx-content-loaded [style*="border-radius"][style*="Background"] {
    background: #FFFFFF !important;
    border-color: #E5E7EB !important;
}
body.light-theme .gx-content-loaded [style*="linear-gradient(180deg"],
body.light-theme .gx-content-loaded [style*="linear-gradient(135deg"] {
    background: linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 100%) !important;
    border-color: #E5E7EB !important;
}
body.light-theme [style*="border-color: #2C2C2C"],
body.light-theme [style*="borderColor: #2C2C2C"],
body.light-theme [style*="border: 1px solid #2C2C2C"],
body.light-theme [style*="border-color: #333333"],
body.light-theme [style*="borderColor: #333333"],
body.light-theme [style*="border: 1px solid #333333"] {
    border-color: #E5E7EB !important;
}
body.light-theme [style*="color: #E6EDF3"],
body.light-theme [style*="color:#E6EDF3"] {
    color: #1A1A1A !important;
}
body.light-theme [style*="color: #9DA7B3"],
body.light-theme [style*="color:#9DA7B3"] {
    color: #4B5563 !important;
}
body.light-theme [style*="color: #6B7B8D"],
body.light-theme [style*="color:#6B7B8D"],
body.light-theme [style*="color: #8B95A1"],
body.light-theme [style*="color:#8B95A1"] {
    color: #6B7280 !important;
}

/* Theme toggle button */
.gx-theme-toggle {
    background: none; border: none; cursor: pointer;
    font-size: 16px; padding: 6px 10px; border-radius: 8px;
    transition: background 0.2s;
    display: flex; align-items: center; justify-content: center;
    color: #9DA7B3;
}
.gx-theme-toggle:hover { background: rgba(128,128,128,0.15); }
body.light-theme .gx-theme-toggle { color: #4B5563; }

/* ── 16. Omnibar Light Theme ── */
body.light-theme .gx-omnibar { background: #FFFFFF; border-color: #E5E7EB; box-shadow: 0 24px 80px rgba(0,0,0,0.12); }
body.light-theme .gx-omnibar-input { color: #1A1A1A; }
body.light-theme .gx-omnibar-input::placeholder { color: #9CA3AF; }
body.light-theme .gx-omnibar-input-row { border-bottom-color: #E5E7EB; }
body.light-theme .gx-omnibar-hint { color: #9CA3AF; }
body.light-theme .gx-omnibar-backdrop { background: rgba(0,0,0,0.25); }
body.light-theme .gx-omnibar-results { scrollbar-color: #CBD5E1 transparent; }
body.light-theme .gx-omni-result:hover { background: rgba(99,102,241,0.08); }
body.light-theme .gx-omni-result .omni-label { color: #1A1A1A; }
body.light-theme .gx-omni-result .omni-sub { color: #4B5563; }
body.light-theme .gx-omni-section { color: #9CA3AF; }
body.light-theme .gx-home-search-pill { background: rgba(255,255,255,0.9) !important; }

/* Light theme - Flag backgrounds — soft watermark tint, readable text */
.light-theme .flag-bg {
    filter: blur(20px) brightness(1.15) saturate(1.3) !important;
    opacity: 0.40 !important;
}
.light-theme .flag-bg-overlay {
    background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(248,249,250,0.60) 50%, rgba(255,255,255,0.57) 100%) !important;
}
.light-theme .gx-city-banner {
    background-color: #F8F9FA;
}
/* Light theme - City banner text & flag */
.light-theme .gx-city-banner .city-name {
    color: #1A1A2E !important;
    text-shadow: none !important;
}
.light-theme .gx-city-banner .city-subtitle {
    color: #4B5563 !important;
}
.light-theme .gx-city-banner .city-flag-crisp {
    border-color: rgba(0,0,0,0.12) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}
/* Light theme - Module & profile flag banners (inline-style divs) */
.light-theme .gx-flag-blur {
    filter: blur(20px) brightness(1.15) saturate(1.3) !important;
    opacity: 0.40 !important;
}
.light-theme .gx-flag-blur img,
.light-theme .gx-flag-blur-img {
    filter: blur(14px) brightness(1.15) saturate(1.3) !important;
    opacity: 0.40 !important;
}
.light-theme .gx-flag-overlay {
    background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(248,249,250,0.58) 100%) !important;
}
/* Light theme - Ticker bar */
.light-theme .gx-ticker-wrap {
    background: linear-gradient(90deg, #F8F9FA 0%, #FFFFFF 50%, #F8F9FA 100%) !important;
    border-top: 1px solid #E5E7EB !important;
    border-bottom: 1px solid #E5E7EB !important;
}
.light-theme .gx-ticker-item .tk-city { color: #1A1A1A !important; }
.light-theme .gx-ticker-item .tk-pop { color: #4B5563 !important; }
.light-theme .gx-ticker-item .tk-lbl { color: #6B7280 !important; }
.light-theme .gx-ticker-item .tk-v { color: #1A1A1A !important; }
.light-theme .gx-ticker-item .tk-n { color: #1A1A1A !important; }
.light-theme .gx-ticker-item .tk-sep { color: rgba(0,0,0,0.15) !important; border-color: rgba(0,0,0,0.08) !important; }
.light-theme .gx-ticker-item { border-color: rgba(0,0,0,0.06) !important; }
/* Light theme - Comparison accordion sections */
.light-theme .gx-compare-section { color: #1A1A1A !important; }
.light-theme .gx-compare-section .section-label { color: #374151 !important; }
/* Light theme - Compare tray (sticky bottom bar) */
.light-theme .gx-compare-tray {
    background: #FFFFFF !important;
    border-top: 1px solid #E5E7EB !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
}
.light-theme .gx-tray-chip {
    background: rgba(59,130,246,0.08) !important;
    border: 1px solid rgba(59,130,246,0.25) !important;
    color: #1A1A1A !important;
}
.light-theme .gx-tray-chip .gx-tray-x { color: #6B7280 !important; }
.light-theme .gx-compare-tray .gx-tb-btn { color: #1A1A1A !important; }
.light-theme .gx-compare-tray .gx-compare-label { color: #374151 !important; }

/* Light theme - Stat/rank tables */
body.light-theme .gx-rank-row:hover { background: rgba(99,102,241,0.05) !important; }
body.light-theme .gx-rank-tab { background: rgba(0,0,0,0.03) !important; border-color: #E5E7EB !important; color: #6B7280 !important; }
body.light-theme .gx-rank-tab.active { background: rgba(74,222,128,0.1) !important; border-color: rgba(74,222,128,0.3) !important; color: #16A34A !important; }

/* Light theme - Module tabs */
body.light-theme .gx-module-tab { background: rgba(0,0,0,0.03) !important; border-color: #E5E7EB !important; color: #6B7280 !important; }
body.light-theme .gx-module-tab:hover { background: rgba(0,0,0,0.06) !important; }
body.light-theme .gx-module-tab.active { background: rgba(99,102,241,0.08) !important; border-color: rgba(99,102,241,0.3) !important; color: #4F46E5 !important; }

/* Light theme - Dual sections & term text */
body.light-theme .gx-dual-section-header { background: rgba(0,0,0,0.02) !important; }
body.light-theme .gx-dual-section-header:hover { background: rgba(0,0,0,0.04) !important; }
body.light-theme .gx-term-text { border-bottom-color: rgba(0,0,0,0.2) !important; }

/* Light theme - Audit modal */
body.light-theme .gx-audit-modal { background: #FFFFFF !important; border-color: #E5E7EB !important; }
body.light-theme .gx-audit-close { border-color: #E5E7EB !important; color: #6B7280 !important; }
body.light-theme .gx-audit-close:hover { background: rgba(0,0,0,0.04) !important; color: #1A1A1A !important; }
body.light-theme .gx-audit-item { border-bottom-color: #E5E7EB !important; }
body.light-theme .gx-audit-row { background: rgba(0,0,0,0.02) !important; border-color: #E5E7EB !important; }
body.light-theme .gx-audit-val { background: rgba(0,0,0,0.03) !important; }

/* Light theme - Tooltip */
body.light-theme .gx-tooltip { background: #FFFFFF !important; border-color: #E5E7EB !important; box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important; }
body.light-theme .gx-tooltip.active { background: rgba(0,0,0,0.04) !important; border-color: #D1D5DB !important; }

/* Light theme - Compare section */
body.light-theme .gx-compare-item { background: rgba(0,0,0,0.02) !important; }

/* Light theme - Modal overlay & content */
body.light-theme .gx-modal-overlay { border-color: rgba(0,0,0,0.15) !important; }
body.light-theme .gx-modal-content { box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important; }
body.light-theme .gx-modal-footer { border-top-color: #E5E7EB !important; color: #6B7280 !important; }

/* Light theme - Info popup (tooltip/glossary) */
body.light-theme .gx-info-popup {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    color: #1A1A1A !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}
body.light-theme .gx-info-popup .source-link { color: #2563EB !important; }

/* Light theme - Compare tray chips */
body.light-theme .gx-tray-chip {
    color: #1A1A1A !important;
    background: rgba(59,130,246,0.06) !important;
    border: 1px solid rgba(59,130,246,0.15) !important;
}

/* Light theme - Map zoom controls */
body.light-theme .gx-map-zoom button {
    background: #F0F1F3 !important;
    color: #1A1A1A !important;
    border-color: #E5E7EB !important;
}
body.light-theme .gx-map-zoom button:hover {
    background: #E5E7EB !important;
}

/* Light theme - Recent city chips (home page) */
body.light-theme .gx-recent-chip {
    color: #4B5563 !important;
    background: rgba(0,0,0,0.03) !important;
    border: 1px solid #E5E7EB !important;
}
body.light-theme .gx-recent-chip:hover {
    background: rgba(22,163,74,0.06) !important;
    border-color: rgba(22,163,74,0.25) !important;
    color: #16A34A !important;
}

/* Light theme - Module nav buttons (prev/next) */
body.light-theme .gx-module-nav-btn {
    background: rgba(0,0,0,0.03) !important;
    border: 1px solid #E5E7EB !important;
    color: #4B5563 !important;
}
body.light-theme .gx-module-nav-btn:hover {
    background: rgba(0,0,0,0.06) !important;
    color: #1A1A1A !important;
}

/* Light theme - Ticker value text */
body.light-theme .gx-ticker-item .tk-v { color: #4B5563 !important; }

/* Light theme - Topbar (legacy, if used) */
body.light-theme .gx-topbar {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FA 100%) !important;
    border-bottom: 1px solid #E5E7EB !important;
}

/* Light theme - Drill sheet header */
body.light-theme .gx-drill-sheet-header h4 { color: #1A1A1A !important; }

/* Light theme - Dual-pane collapse controls */
body.light-theme .gx-dual-section-header .gx-collapse-icon { color: #6B7280 !important; }
body.light-theme .gx-dual-section-header .gx-collapse-text { color: #6B7280 !important; }
body.light-theme .gx-dual-section { border-color: rgba(0,0,0,0.08) !important; }
body.light-theme .gx-dual-section:hover { border-color: rgba(99,102,241,0.2) !important; }
body.light-theme .gx-dual-pane-header { background: rgba(0,0,0,0.02) !important; }
body.light-theme .gx-dual-kpi .kpi-label { color: #6B7280 !important; }
body.light-theme .gx-dual-kpi .kpi-value { color: #1A1A1A !important; }
body.light-theme .gx-dual-kpi { border-bottom-color: rgba(0,0,0,0.06) !important; }
body.light-theme .gx-dual-container { border-color: #E5E7EB !important; }
body.light-theme .gx-dual-divider { background: linear-gradient(180deg, transparent, rgba(99,102,241,0.15) 20%, rgba(99,102,241,0.15) 80%, transparent) !important; }
body.light-theme .gx-dual-pane::-webkit-scrollbar-thumb { background: #CBD5E1 !important; }

/* ═══ WEIGHT SLIDERS ═══ */
.gx-weight-slider .rc-slider { height: 8px !important; }
.gx-weight-slider .rc-slider-rail { background: rgba(255,255,255,0.06) !important; height: 4px !important; border-radius: 2px !important; }
.gx-weight-slider .rc-slider-track { background: #6366F1 !important; height: 4px !important; border-radius: 2px !important; }
.gx-weight-slider .rc-slider-handle { width: 16px !important; height: 16px !important; border: 2px solid #6366F1 !important; background: #1E1E1E !important; margin-top: -6px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important; }
.gx-weight-slider .rc-slider-handle:hover { border-color: #818CF8 !important; }
.gx-weight-slider .rc-slider-handle:active { box-shadow: 0 0 0 5px rgba(99,102,241,0.2) !important; }
body.light-theme .gx-weight-slider .rc-slider-rail { background: rgba(0,0,0,0.08) !important; }
body.light-theme .gx-weight-slider .rc-slider-handle { background: #FFFFFF !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE REFINEMENTS — Phase 2: remaining component gaps
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (768px) ── */
@media (max-width: 768px) {
    /* Compare presets: horizontal scroll */
    .gx-compare-presets { padding: 8px 12px !important; gap: 6px !important; }
    .gx-compare-presets button { font-size: 11px !important; padding: 5px 10px !important; }

    /* Module nav strip: tighter */
    .gx-module-nav-strip { padding: 8px 12px !important; }
    .gx-module-nav-btn { padding: 6px 12px !important; font-size: 11px !important; }

    /* Info popup: narrower */
    .gx-info-popup { max-width: 90vw !important; }

    /* Omnibar footer: hide keyboard hints on touch */
    .gx-omnibar-footer kbd { display: none; }

    /* Section TOC in comparator: wrap if needed */
    .gx-section-toc { flex-wrap: wrap !important; }
}

/* ── Phone (480px) ── */
@media (max-width: 480px) {
    /* Compare presets: edge-to-edge scroll strip */
    .gx-compare-presets {
        padding: 6px 8px !important;
        gap: 4px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        top: 44px !important;  /* below shorter mobile topbar */
    }
    .gx-compare-presets button {
        font-size: 10px !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Module nav strip: full-width stacked on narrow screens */
    .gx-module-nav-strip {
        padding: 6px 8px !important;
        gap: 6px !important;
    }
    .gx-module-nav-btn {
        padding: 6px 10px !important;
        font-size: 10px !important;
        gap: 4px !important;
        flex: 1 !important;
        justify-content: center !important;
    }

    /* Dual-pane compare: tighter on phone */
    .gx-dual-container { height: auto !important; max-height: none !important; }
    .gx-dual-pane { max-height: 50vh !important; padding: 10px 8px !important; }
    .gx-dual-pane-header { padding: 8px 10px !important; }
    .gx-dual-pane-header .city-name { font-size: 14px !important; }
    .gx-dual-section-header { padding: 10px 12px !important; font-size: 13px !important; }
    .gx-dual-kpi { padding: 6px 10px !important; }
    .gx-dual-kpi .kpi-label { font-size: 10px !important; }
    .gx-dual-kpi .kpi-value { font-size: 12px !important; }

    /* Info popup: full-width bottom sheet on phone */
    .gx-info-popup {
        position: fixed !important;
        bottom: 56px !important;  /* above bottom tabs */
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-width: 100vw !important;
        border-radius: 14px 14px 0 0 !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }

    /* Omnibar: full width, closer to top */
    .gx-omnibar-backdrop { padding-top: 10vh !important; }
    .gx-omnibar { width: 96vw !important; max-height: 80vh !important; border-radius: 12px !important; }
    .gx-omnibar-input-row { padding: 12px 14px !important; }
    .gx-omnibar-input { font-size: 16px !important; }  /* prevent iOS zoom */
    .gx-omnibar-footer { display: none !important; }  /* hide kbd shortcuts on phone */
    .gx-omni-result { padding: 10px !important; gap: 10px !important; }

    /* Section TOC: compact horizontal scroll */
    .gx-section-toc {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding: 6px 8px !important;
        gap: 3px !important;
        top: 80px !important;  /* below topbar + presets */
    }
    .gx-section-toc .toc-link {
        font-size: 10px !important;
        padding: 2px 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Rankings: more compact */
    #rankings-content .ag-header-cell-label { font-size: 9px !important; }
    #rankings-content .ag-cell { font-size: 10px !important; padding: 3px 4px !important; }

    /* Topbar: hide currency dd label, keep $ */
    .gx-topbar-v2 #currency-dd { max-width: 60px !important; font-size: 11px !important; }

    /* Sticky KPI bar: tighter */
    .gx-sticky-kpi-bar { top: 44px !important; }
}

/* ── Light theme: mobile-specific components ── */
body.light-theme .gx-bottom-tabs {
    background: rgba(255,255,255,0.96) !important;
    border-top-color: #E5E7EB !important;
}
body.light-theme .gx-btab { color: #9CA3AF; }
body.light-theme .gx-btab.active { color: #059669; }

body.light-theme .gx-collapsible-section { border-color: rgba(0,0,0,0.08) !important; }
body.light-theme .gx-collapsible-header:hover { background: rgba(99,102,241,0.04) !important; }
body.light-theme .gx-collapsible-header .gx-ch-title { color: #1A1A1A !important; }
body.light-theme .gx-collapsible-header .gx-ch-badge { background: rgba(0,0,0,0.05) !important; color: #6B7280 !important; }
body.light-theme .gx-collapsible-header .gx-ch-chevron { color: #9CA3AF !important; }

body.light-theme .gx-mobile-home-fab {
    background: rgba(255,255,255,0.95) !important;
    border-color: rgba(5,150,105,0.3) !important;
    color: #059669 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}

body.light-theme .gx-data-table-responsive tr {
    background: rgba(0,0,0,0.02) !important;
    border-color: #E5E7EB !important;
}
body.light-theme .gx-data-table-responsive td {
    border-bottom-color: rgba(0,0,0,0.05) !important;
}
body.light-theme .gx-data-table-responsive td::before { color: #6B7280 !important; }

body.light-theme .gx-drill-sheet {
    background: #FFFFFF !important;
    border-color: #E5E7EB !important;
}
body.light-theme .gx-drill-sheet-handle { background: #CBD5E1 !important; }

/* ── Safe area insets for notched devices ── */
@supports (padding: env(safe-area-inset-bottom)) {
    .gx-bottom-tabs { padding-bottom: max(6px, env(safe-area-inset-bottom)) !important; }
    @media (max-width: 480px) {
        .gx-main-area { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
        .gx-info-popup { bottom: calc(56px + env(safe-area-inset-bottom)) !important; }
    }
}


.gxs-agt-wrap{overflow-x:auto;margin:8px 0;border:1px solid #2c2c2c;border-radius:8px}
.gxs-agt{width:100%;border-collapse:collapse;font-size:12px;color:#ddd}
.gxs-agt th{background:#1a1f2b;color:#aab;font-weight:700;text-align:left;
  padding:8px 10px;cursor:pointer;user-select:none;white-space:nowrap;
  border-bottom:1px solid #333}
.gxs-agt th:hover{color:#fff}
.gxs-agt td{padding:6px 10px;border-bottom:1px solid #222;white-space:nowrap}
.gxs-agt tbody tr:hover{background:#1c2230}


body.light-theme #gxs-panel{background:#FFFFFF;border-color:#D1D5DB}
body.light-theme #gxs-panel input{background:#F8F9FA;color:#1A1A1A}
body.light-theme .gxs-it{color:#374151}
body.light-theme .gxs-it:hover,body.light-theme .gxs-sel{background:#EEF2F7}
body.light-theme .gxs-c{color:#6B7280}
body.light-theme .gxs-agt{color:#1F2937}
body.light-theme .gxs-agt th{background:#F3F4F6;color:#4B5563;border-bottom-color:#E5E7EB}
body.light-theme .gxs-agt th:hover{color:#111}
body.light-theme .gxs-agt td{border-bottom-color:#F0F1F3}
body.light-theme .gxs-agt tbody tr:hover{background:#F3F4F6}
body.light-theme .gxs-agt-wrap{border-color:#E5E7EB}
body.light-theme .cmp-chip{background:#F8F9FA}
body.light-theme #cmp-input{background:#FFFFFF;border-color:#D1D5DB;color:#1A1A1A}
body.light-theme #cmp-sug{background:#FFFFFF;border-color:#D1D5DB}
body.light-theme #cmp-sug div:hover,body.light-theme #cmp-sug div.sel{background:#EEF2F7}
body.light-theme .cmp-sec-h{border-bottom-color:#E5E7EB}
body.light-theme #cmp-rank th{background:#F8F9FA;color:#6B7280;border-bottom-color:#E5E7EB}
body.light-theme #cmp-rank td{border-bottom-color:#F0F1F3}


#gx-currency{background:#161b26;color:#e6edf3;border:1px solid #2c3444;
  border-radius:6px;font-size:12px;padding:4px 6px;outline:none;cursor:pointer}
body.light-theme #gx-currency{background:#FFFFFF;color:#1A1A1A;border-color:#D1D5DB}