/* Kalynda Weather Pro v10.6 - Bulletproof CSS */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* Performance: reduce layout shifts & repaints */
*, *::before, *::after { text-rendering: optimizeSpeed; }

:root {
    --vfr:#22c55e; --mvfr:#3b82f6; --ifr:#f97316; --lifr:#ef4444;
    --pri:#0ea5e9;
}

/* Body scroll lock when panel/modal is open on mobile */
html.panel-open,
html.meteogram-modal-open,
html.profile-modal-open,
body.panel-open,
body.meteogram-modal-open,
body.profile-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
}

@media (max-width: 768px) {
    body.panel-open,
    body.meteogram-modal-open,
    body.profile-modal-open {
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }
}

/* ==================== RESET FOR PLUGIN ==================== */
.kwp-root,
.kwp-root *,
.kwp-root *::before,
.kwp-root *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==================== MAIN CONTAINER - FITS BROWSER WINDOW ==================== */
.kwp-root {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 400px;
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Prevent any scrollbars on the root and its wrapper */
.kwp-root,
.kwp-root > * {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.kwp-root::-webkit-scrollbar,
.kwp-root > *::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
    width: 0;
    height: 0;
}

/* If inside a container with fixed height, use that instead */
.kwp-root.kwp-fixed-height {
    height: 100%;
}

.mono { font-family: 'JetBrains Mono', monospace; }

/* ==================== HEADER ==================== */
.kwp-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--header-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 1000;
    transform: translateZ(0);
    contain: layout style;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.logo-text { display: flex; flex-direction: column; gap: 1px; }
.logo-title { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 17px; font-weight: 700; color: var(--txt); letter-spacing: 0.3px; line-height: 1.1; }
.logo-amp { color: var(--logo-amp); font-weight: 300; }
.logo-sub { font-size: 9px; color: var(--logo-sub); letter-spacing: 2px; text-transform: uppercase; font-weight: 500; line-height: 1; }
.header-stats { display: flex; gap: 16px; align-items: center; }
.stat { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.stat.airports-count { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--header-stat-text); font-size: 11px; padding-right: 12px; border-right: 1px solid var(--bdr); }
.stat.airports-count span { font-weight: 700; color: var(--header-stat-accent); }
.stat .stat-label { font-size: 10px; font-weight: 600; color: var(--header-stat-text); text-transform: uppercase; letter-spacing: 0.3px; }
.stat span#cnt-vfr, .stat span#cnt-mvfr, .stat span#cnt-ifr, .stat span#cnt-lifr { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--header-stat-value); font-size: 13px; }
.stat-updated { font-size: 11px; color: var(--header-stat-text); font-family: 'JetBrains Mono', monospace; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--bdr); }
.stat-updated span { font-weight: 600; color: var(--header-stat-accent); }
.dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.dot.vfr { background: var(--vfr); }
.dot.mvfr { background: var(--mvfr); }
.dot.ifr { background: var(--ifr); }
.dot.lifr { background: var(--lifr); }

/* ==================== MAP CONTAINER - CRITICAL ==================== */
.map-wrap {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden !important;
}

/* Hide scrollbars on map */
.map-wrap,
#kwp-map {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.map-wrap::-webkit-scrollbar,
#kwp-map::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#kwp-map {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--map-bg) !important;
    z-index: 1 !important;
}

/* Leaflet container override */
#kwp-map.leaflet-container {
    width: 100% !important;
    height: 100% !important;
    background: var(--map-bg) !important;
}

/* ==================== MAP CONTROLS ==================== */
.map-ctrls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1000;
}
.cbtn {
    width: 38px;
    height: 38px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.cbtn:hover { transform: scale(1.05); }
.cbtn.active { background: var(--pri); color: #fff; }

.legend {
    position: absolute;
    bottom: 20px;
    left: 10px;
    background: var(--card);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--bdr);
    display: flex;
    gap: 10px;
    z-index: 1000;
    font-size: 10px;
    font-weight: 600;
}
.legend span { display: flex; align-items: center; gap: 4px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Ensure Leaflet controls don't overlap */
.leaflet-bottom.leaflet-left {
    bottom: 10px !important;
    left: 10px !important;
}

.leaflet-control-attribution {
    font-size: 9px !important;
    background: var(--map-attribution-bg) !important;
    color: var(--map-attribution-text) !important;
    padding: 2px 5px !important;
}

.icao-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--txt) !important;
    text-shadow: none !important;
    padding: 0 !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
}

/* Leaflet tooltip override for ICAO labels */
.leaflet-tooltip.icao-label {
    padding: 2px 4px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.leaflet-tooltip.icao-label::before {
    display: none !important;
}

/* ==================== LOADING ==================== */
.loader {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--loader-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 2000;
}
.loader.hidden { display: none; }
.spin {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bdr);
    border-top-color: var(--pri);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader span { color: var(--muted); font-size: 12px; }

/* ==================== PANEL ==================== */
.panel {
    position: absolute;
    top: 56px;
    right: 0;
    width: 100%;
    max-width: 560px;
    height: calc(100% - 56px);
    background: var(--panel-bg);
    border-left: 1px solid var(--bdr);
    z-index: 1001;
    animation: slideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    /* GPU accelerated + flex container */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    will-change: transform;
    transform: translateZ(0);
    contain: layout style;
}
.panel.hidden { display: none; }
@keyframes slideIn {
    from { transform: translate3d(100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

/* Panel Content Wrapper */
.panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    contain: content;
}

/* Loading Skeleton */
.skeleton-block {
    background: linear-gradient(90deg, var(--card) 25%, var(--hover, rgba(255,255,255,0.06)) 50%, var(--card) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.2s ease infinite;
}
.skeleton-text {
    color: var(--muted) !important;
    opacity: 0.5;
}
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Panel Header */
.p-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--card);
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
    z-index: 10;
    flex-wrap: wrap;
    gap: 8px;
}
.p-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-brand-icon { width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0; }
.p-icao { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--txt); }
.p-name { color: var(--muted); font-size: 12px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-cat { padding: 4px 10px; border-radius: 12px; font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.p-close { 
    width: 44px; 
    height: 44px; 
    border: none; 
    background: linear-gradient(135deg, #ef4444, #dc2626); 
    color: #fff; 
    border-radius: 50%; 
    cursor: pointer; 
    font-size: 22px; 
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(239,68,68,0.4);
    position: relative;
    z-index: 10;
}
.p-close:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: scale(1.15) rotate(90deg);
    box-shadow: 0 6px 25px rgba(239,68,68,0.5);
}
.p-close:active {
    transform: scale(0.95);
}

/* Raw Box */
.raw {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    background: var(--card);
    color: var(--txt);
    padding: 8px 12px;
    margin: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--bdr);
    line-height: 1.5;
    word-break: break-all;
}
.raw.taf { background: var(--raw-taf-bg); }

/* ==================== PROFILE SECTION ==================== */
.profile-section {
    margin: 0 4px 4px;
    background: var(--card);
    border-radius: 12px;
    border: 1px solid var(--bdr);
    overflow: visible;
    touch-action: pan-x pan-y pinch-zoom;
}

.cloud-chart {
    position: relative;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    touch-action: pan-x pan-y pinch-zoom;
    background: var(--profile-chart-bg);
    width: 100%;
    height: auto;
    margin-bottom: 0;
    padding-bottom: 0;
    contain: content;
    transform: translateZ(0);
}
.chart-svg {
    width: 100%;
    height: auto;
    display: block;
    will-change: contents;
}

/* ==================== WX SELECTOR (METAR/TAF Buttons) ==================== */
.wx-selector {
    padding: 8px;
    background: var(--wx-selector-bg);
    border-top: 1px solid var(--section-border);
    border-radius: 0;
}
.wx-selector-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--wx-selector-title);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    font-family: 'JetBrains Mono', monospace;
}
.wx-btn-grid {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding-bottom: 2px;
}
.wx-btn-grid::-webkit-scrollbar { display: none; }

.wx-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: var(--wxbtn-bg);
    border: 1px solid var(--wxbtn-border);
    border-left: 4px solid var(--muted);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    color: var(--txt);
}
.wx-btn:hover {
    background: var(--wxbtn-hover);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.wx-btn.active {
    background: var(--wxbtn-active-bg);
    border-color: var(--mvfr);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.2), 0 2px 8px rgba(0,0,0,0.08);
}
.wx-btn.active.metar {
    border-color: var(--vfr);
    background: var(--wxbtn-active-bg);
    box-shadow: 0 0 0 2px rgba(34,197,94,0.2), 0 2px 8px rgba(0,0,0,0.06);
}
.wx-btn.active .wx-btn-type {
    background: var(--mvfr);
    color: #fff;
}
.wx-btn.active.metar .wx-btn-type {
    background: var(--vfr);
    color: #fff;
}
.wx-btn.metar {
    border-left-color: var(--vfr);
}
.wx-btn-type {
    font-size: 9px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--wxbtn-type-bg);
    color: var(--wxbtn-type-text);
}
.wx-btn-time {
    font-size: 9px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--wxbtn-time);
}
.wx-btn-icons {
    display: flex;
    gap: 2px;
    font-size: 11px;
}

/* ==================== RAW DATA SECTION ==================== */
.raw-section {
    margin: 0 12px 12px;
}
.raw-section.always-visible .raw-box {
    cursor: default;
}
.raw-section.always-visible .raw-content {
    max-height: 300px !important;
    padding: 12px !important;
    border-top-color: var(--raw-content-border) !important;
}
.raw-box {
    background: var(--raw-box-bg);
    border-radius: 8px;
    border: 2px solid var(--raw-box-border);
    margin-bottom: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px var(--raw-box-shadow);
}
.raw-box:hover {
    border-color: #60a5fa;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}
.raw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--raw-header-text);
    background: var(--raw-header-bg);
}
.raw-time {
    font-size: 10px;
    color: var(--raw-time);
    font-weight: 500;
}
.raw-arrow {
    font-size: 10px;
    color: var(--raw-arrow);
    transition: transform 0.3s ease;
}
.raw-box.expanded .raw-arrow {
    transform: rotate(180deg);
}
.raw-content {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.7;
    color: var(--raw-text);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    word-break: break-all;
    border-top: 1px solid transparent;
    background: var(--raw-content-bg);
}
.raw-content.visible {
    max-height: 300px;
    padding: 12px;
    border-top-color: var(--raw-content-border);
}
.raw-box.expanded .raw-content {
    max-height: 300px;
    padding: 12px;
    border-top-color: var(--raw-content-border);
}
.raw-content.taf {
    color: var(--raw-taf-text);
}

/* ==================== FLIGHT RULES SECTION ==================== */
.rules-section {
    margin: 0 12px 12px;
    padding: 14px;
    background: var(--card);
    border-radius: 10px;
    border: 1px solid var(--bdr);
}
.rules-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 10px;
}
.rules-current {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.rules-cat {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
}
.rules-name {
    font-size: 11px;
    color: var(--txt);
    font-weight: 500;
}
.rules-reason {
    margin-bottom: 12px;
}
.reason-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.reason-item {
    font-size: 10px;
    color: var(--txt);
    padding: 4px 8px;
    background: var(--reason-bg);
    border-radius: 4px;
    border-left: 3px solid var(--reason-border);
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Reason indicator icons (professional, no emoji) */
.ri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}
.ri-ok {
    background: rgba(34,197,94,0.15);
    color: var(--vfr);
}
.ri-ok::after { content: '\2713'; }
.ri-caut {
    background: rgba(59,130,246,0.15);
    color: var(--mvfr);
}
.ri-caut::after { content: '\2014'; }
.ri-warn {
    background: rgba(249,115,22,0.15);
    color: var(--ifr);
}
.ri-warn::after { content: '!'; }
.rules-details {
    font-size: 10px;
    line-height: 1.5;
}
.rule-detail {
    padding: 10px;
    border-radius: 6px;
    background: var(--reason-bg);
}
.rule-detail.vfr { border-left: 4px solid var(--vfr); }
.rule-detail.mvfr { border-left: 4px solid var(--mvfr); }
.rule-detail.ifr { border-left: 4px solid var(--ifr); }
.rule-detail.lifr { border-left: 4px solid var(--lifr); background: var(--lifr-detail-bg); }
.rule-detail strong {
    color: var(--txt);
    font-size: 11px;
}

/* ==================== ENHANCED ANIMATIONS ==================== */
/* Cloud animations */
.cloud-drift {
    animation: cloudDrift 12s ease-in-out infinite;
}
.cloud-wind-mod {
    animation: cloudWindMod 6s ease-in-out infinite;
}
.cloud-wind-strong {
    animation: cloudWindStrong 3s ease-in-out infinite;
}
.cloud-gust {
    animation: cloudGust 1.5s ease-in-out infinite;
}

@keyframes cloudDrift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}
@keyframes cloudWindMod {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(12px); }
}
@keyframes cloudWindStrong {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(18px); }
    70% { transform: translateX(-5px); }
}
@keyframes cloudGust {
    0%, 100% { transform: translateX(0) scale(1); }
    25% { transform: translateX(25px) scale(1.02); }
    50% { transform: translateX(5px) scale(0.98); }
    75% { transform: translateX(20px) scale(1.01); }
}

/* ==================== REALISTIC RAIN ANIMATIONS - GPU OPTIMIZED ==================== */

/* Rain streak - falling with wind angle - FASTER */
.rain-streak {
    animation: rainStreakFall var(--rain-duration, 0.25s) linear infinite;
    animation-delay: var(--rain-delay, 0s);
    transform-origin: top center;
    will-change: transform, opacity;
}
@keyframes rainStreakFall {
    0% { 
        opacity: 0; 
        transform: translate3d(0, -60px, 0) scaleY(0.3); 
    }
    15% { 
        opacity: 1; 
        transform: translate3d(0, -30px, 0) scaleY(1); 
    }
    85% { 
        opacity: 0.8; 
        transform: translate3d(0, 90px, 0) scaleY(1.1); 
    }
    100% { 
        opacity: 0; 
        transform: translate3d(0, 120px, 0) scaleY(0.8); 
    }
}

/* Rain splash - expanding ring */
.rain-splash {
    animation: rainSplashExpand 0.6s ease-out infinite;
    animation-delay: var(--splash-delay, 0s);
    transform-origin: center;
}
@keyframes rainSplashExpand {
    0% { 
        transform: scale(0.2); 
        opacity: 0.8; 
        stroke-width: 2;
    }
    50% { 
        opacity: 0.5; 
        stroke-width: 1.5;
    }
    100% { 
        transform: scale(2.5); 
        opacity: 0; 
        stroke-width: 0.5;
    }
}

/* Rain droplet - bouncing up from splash */
.rain-droplet {
    animation: rainDropletBounce 0.5s ease-out infinite;
    animation-delay: var(--drop-delay, 0s);
}
@keyframes rainDropletBounce {
    0% { 
        transform: translate(0, 0); 
        opacity: 0.7; 
    }
    50% { 
        transform: translate(var(--dx, 3px), var(--dy, -8px)); 
        opacity: 0.5; 
    }
    100% { 
        transform: translate(calc(var(--dx, 3px) * 0.7), 5px); 
        opacity: 0; 
    }
}

/* Puddle ripple - gentle wave */
.puddle-ripple {
    animation: puddleRippleWave 2s ease-in-out infinite;
    animation-delay: var(--puddle-delay, 0s);
}
@keyframes puddleRippleWave {
    0%, 100% { 
        transform: scaleX(1) scaleY(1); 
        opacity: 0.25; 
    }
    25% { 
        transform: scaleX(1.05) scaleY(0.9); 
        opacity: 0.3; 
    }
    50% { 
        transform: scaleX(0.97) scaleY(1.1); 
        opacity: 0.2; 
    }
    75% { 
        transform: scaleX(1.03) scaleY(0.95); 
        opacity: 0.28; 
    }
}

/* Rain mist - subtle ground fog */
.rain-mist {
    animation: rainMistPulse 4s ease-in-out infinite;
}
@keyframes rainMistPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* ==================== REALISTIC SNOW ANIMATIONS - GPU OPTIMIZED ==================== */

/* Snowflake circle - gentle floating fall - FASTER */
.snowflake-circle {
    animation: snowflakeFloat var(--snow-duration, 2.5s) ease-in-out infinite;
    animation-delay: var(--snow-delay, 0s);
    will-change: transform, opacity;
}
@keyframes snowflakeFloat {
    0% { 
        opacity: 0; 
        transform: translate3d(0, -20px, 0) rotate(0deg); 
    }
    10% { 
        opacity: 1; 
    }
    25% { 
        transform: translate3d(calc(var(--snow-wobble, 20px) * 0.5), 40px, 0) rotate(45deg); 
    }
    50% { 
        transform: translate3d(calc(var(--snow-wobble, 20px) * -0.3), 100px, 0) rotate(90deg); 
    }
    75% { 
        transform: translate3d(calc(var(--snow-wobble, 20px) * 0.7), 160px, 0) rotate(135deg); 
    }
    90% { 
        opacity: 0.8; 
    }
    100% { 
        opacity: 0; 
        transform: translate3d(calc(var(--snow-wobble, 20px) * -0.2), 220px, 0) rotate(180deg); 
    }
}

/* Snowflake star - spinning fall - FASTER */
.snowflake-star {
    animation: snowflakeStarFall var(--snow-duration, 3s) ease-in-out infinite;
    animation-delay: var(--snow-delay, 0s);
    will-change: transform, opacity;
}
@keyframes snowflakeStarFall {
    0% { 
        opacity: 0; 
        transform: translateY(-20px) translateX(0) rotate(0deg) scale(0.8); 
    }
    15% { 
        opacity: 1; 
        transform: scale(1);
    }
    30% { 
        transform: translateY(50px) translateX(calc(var(--snow-wobble, 25px) * 0.6)) rotate(60deg); 
    }
    50% { 
        transform: translateY(110px) translateX(calc(var(--snow-wobble, 25px) * -0.4)) rotate(120deg); 
    }
    70% { 
        transform: translateY(170px) translateX(calc(var(--snow-wobble, 25px) * 0.8)) rotate(200deg); 
    }
    85% { 
        opacity: 0.7; 
    }
    100% { 
        opacity: 0; 
        transform: translateY(240px) translateX(0) rotate(300deg); 
    }
}

/* GPU-Accelerated Weather Animations */
.rain-anim {
    animation: rainFall 0.8s linear infinite;
    will-change: transform, opacity;
}
@keyframes rainFall {
    0% { opacity: 0; transform: translate3d(0, -20px, 0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(-5px, 40px, 0); }
}

.snow-anim {
    animation: snowFall 3s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes snowFall {
    0% { opacity: 0.5; transform: translate3d(0, 0, 0); }
    50% { opacity: 1; transform: translate3d(8px, 35px, 0); }
    100% { opacity: 0; transform: translate3d(-5px, 70px, 0); }
}

/* Optimized cloud layer */
.cloud-layer {
    will-change: transform;
}

/* ==================== DRAMATIC LIGHTNING ANIMATIONS ==================== */
.lightning-glow {
    animation: lightningFlash 4s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}
.lightning-core {
    animation: lightningFlash 4s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}
.lightning-bright {
    animation: lightningFlash 4s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}
.lightning-branch {
    animation: lightningFlash 4s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}
.lightning-flash {
    animation: lightningFlashBg 4s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}

@keyframes lightningFlash {
    0%, 100% { opacity: 0; }
    /* First strike */
    10% { opacity: 0; }
    11% { opacity: 1; }
    12% { opacity: 0.2; }
    13% { opacity: 0.9; }
    14% { opacity: 0; }
    /* Second strike (aftershock) */
    18% { opacity: 0; }
    19% { opacity: 0.7; }
    20% { opacity: 0.1; }
    21% { opacity: 0.5; }
    22% { opacity: 0; }
}

@keyframes lightningFlashBg {
    0%, 100% { opacity: 0; transform: scale(1); }
    11% { opacity: 0.6; transform: scale(1.3); }
    12% { opacity: 0.1; transform: scale(1.1); }
    13% { opacity: 0.4; transform: scale(1.2); }
    14% { opacity: 0; transform: scale(1); }
    19% { opacity: 0.3; transform: scale(1.15); }
    21% { opacity: 0.2; transform: scale(1.1); }
    22% { opacity: 0; transform: scale(1); }
}

/* Legacy lightning */
.lightning-anim {
    animation: lightning 4s ease-in-out infinite;
}
@keyframes lightning {
    0%, 88%, 100% { opacity: 0; }
    89%, 91% { opacity: 1; }
    90% { opacity: 0.3; }
    92%, 94% { opacity: 0.9; }
    93% { opacity: 0.2; }
}

/* Fog animation */
/* ==================== AESTHETIC FOG ANIMATIONS ==================== */
.fog-anim {
    animation: fogPulse 8s ease-in-out infinite;
}
@keyframes fogPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.85; }
}

.fog-wave-anim {
    animation: fogWaveDrift 12s ease-in-out infinite;
    animation-delay: var(--fog-delay, 0s);
}
@keyframes fogWaveDrift {
    0%, 100% { 
        transform: translateX(0); 
        opacity: 1;
    }
    50% { 
        transform: translateX(15px); 
        opacity: 0.85;
    }
}

.fog-particle {
    animation: fogParticleFloat 10s ease-in-out infinite;
    animation-delay: var(--fp-delay, 0s);
}
@keyframes fogParticleFloat {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.4;
    }
    25% { 
        transform: translate(20px, -10px) scale(1.1); 
        opacity: 0.6;
    }
    50% { 
        transform: translate(-10px, 5px) scale(0.95); 
        opacity: 0.5;
    }
    75% { 
        transform: translate(15px, -5px) scale(1.05); 
        opacity: 0.55;
    }
}

/* ==================== SPECTACULAR LIGHTNING ANIMATIONS ==================== */
.lightning-outer-glow {
    animation: lightningFlashLong 6s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}

.lightning-glow {
    animation: lightningFlashLong 6s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}

.lightning-core {
    animation: lightningFlashLong 6s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}

.lightning-bright {
    animation: lightningFlashLong 6s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}

.lightning-branch {
    animation: lightningFlashLong 6s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}

.lightning-flash {
    animation: lightningFlashBgLong 6s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}

.lightning-spark {
    animation: lightningSpark 6s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}

.sky-flash {
    animation: skyFlashEffect 6s ease-in-out infinite;
    animation-delay: var(--bolt-delay, 0s);
}

@keyframes lightningFlashLong {
    0%, 100% { opacity: 0; }
    /* First powerful strike */
    8% { opacity: 0; }
    8.5% { opacity: 1; }
    9% { opacity: 0.3; }
    9.5% { opacity: 1; }
    10% { opacity: 0.5; }
    10.5% { opacity: 0.9; }
    11% { opacity: 0.2; }
    12% { opacity: 0; }
    /* Second aftershock */
    16% { opacity: 0; }
    16.5% { opacity: 0.7; }
    17% { opacity: 0.2; }
    17.5% { opacity: 0.5; }
    18% { opacity: 0; }
    /* Third distant rumble */
    25% { opacity: 0; }
    25.3% { opacity: 0.4; }
    25.6% { opacity: 0.1; }
    26% { opacity: 0.3; }
    26.5% { opacity: 0; }
}

@keyframes lightningFlashBgLong {
    0%, 100% { opacity: 0; transform: scale(1); }
    8.5% { opacity: 0.7; transform: scale(1.4); }
    9% { opacity: 0.2; transform: scale(1.2); }
    9.5% { opacity: 0.6; transform: scale(1.35); }
    10.5% { opacity: 0.4; transform: scale(1.25); }
    12% { opacity: 0; transform: scale(1); }
    16.5% { opacity: 0.4; transform: scale(1.2); }
    18% { opacity: 0; transform: scale(1); }
}

@keyframes lightningSpark {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    8.5% { opacity: 1; transform: scale(2); }
    9.5% { opacity: 0.8; transform: scale(1.5); }
    10.5% { opacity: 0.6; transform: scale(1.8); }
    12% { opacity: 0; transform: scale(0.5); }
}

@keyframes skyFlashEffect {
    0%, 100% { opacity: 0; }
    8.5% { opacity: 0.15; }
    9.5% { opacity: 0.1; }
    10.5% { opacity: 0.12; }
    12% { opacity: 0; }
}

/* Legacy lightning */
.lightning-anim {
    animation: lightning 4s ease-in-out infinite;
}
@keyframes lightning {
    0%, 88%, 100% { opacity: 0; }
    89%, 91% { opacity: 1; }
    90% { opacity: 0.3; }
    92%, 94% { opacity: 0.9; }
    93% { opacity: 0.2; }
}

/* Puddle animation */
.puddle-anim {
    animation: puddleRipple 3s ease-in-out infinite;
}
@keyframes puddleRipple {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.05); opacity: 0.4; }
}

/* ==================== LEAF WIND ANIMATIONS ==================== */
/* Light wind - gentle rustling */
.leaf-light {
    animation: leafRustleLight 2s ease-in-out infinite;
    animation-delay: var(--leaf-delay, 0s);
}
@keyframes leafRustleLight {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(2px, -1px) rotate(5deg); }
    50% { transform: translate(-1px, 1px) rotate(-3deg); }
    75% { transform: translate(1px, -1px) rotate(3deg); }
}

/* Moderate wind - noticeable movement */
.leaf-moderate {
    animation: leafRustleModerate 1.5s ease-in-out infinite;
    animation-delay: var(--leaf-delay, 0s);
}
@keyframes leafRustleModerate {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(4px, -2px) rotate(10deg); }
    40% { transform: translate(-2px, 2px) rotate(-8deg); }
    60% { transform: translate(5px, -1px) rotate(12deg); }
    80% { transform: translate(-3px, 1px) rotate(-5deg); }
}

/* Strong wind - vigorous shaking */
.leaf-strong {
    animation: leafRustleStrong 1s ease-in-out infinite;
    animation-delay: var(--leaf-delay, 0s);
}
@keyframes leafRustleStrong {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    15% { transform: translate(8px, -4px) rotate(20deg); }
    30% { transform: translate(-4px, 3px) rotate(-15deg); }
    45% { transform: translate(10px, -2px) rotate(25deg); }
    60% { transform: translate(-6px, 4px) rotate(-20deg); }
    75% { transform: translate(7px, -3px) rotate(15deg); }
    90% { transform: translate(-3px, 2px) rotate(-10deg); }
}

/* Storm - violent thrashing */
.leaf-storm {
    animation: leafRustleStorm 0.6s ease-in-out infinite;
    animation-delay: var(--leaf-delay, 0s);
}
@keyframes leafRustleStorm {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    12% { transform: translate(15px, -8px) rotate(35deg); }
    25% { transform: translate(-8px, 6px) rotate(-25deg); }
    37% { transform: translate(18px, -5px) rotate(40deg); }
    50% { transform: translate(-12px, 8px) rotate(-35deg); opacity: 0.8; }
    62% { transform: translate(14px, -6px) rotate(30deg); }
    75% { transform: translate(-10px, 5px) rotate(-28deg); }
    87% { transform: translate(8px, -4px) rotate(20deg); }
}

/* Flying leaves in strong wind */
.flying-leaf {
    animation: leafFly 3s linear infinite;
    animation-delay: var(--fly-delay, 0s);
}
@keyframes leafFly {
    0% { 
        transform: translate(0, 0) rotate(0deg); 
        opacity: 0;
    }
    10% { 
        opacity: 1; 
    }
    100% { 
        transform: translate(150px, -80px) rotate(720deg); 
        opacity: 0;
    }
}

/* Tree animations removed - trees stay static now */
.tree-wind, .tree-gust, .tree-gust-strong {
    /* No animation - trees don't move, only leaves */
    animation: none;
}

/* Wind arrow gust */
.wind-arrow-gust {
    animation: windArrowGust 0.5s ease-in-out infinite;
}
@keyframes windArrowGust {
    0%, 100% { stroke-width: 3; }
    50% { stroke-width: 5; }
}

/* Cloud 3D Effect - GPU accelerated */
.cloud-layer {
    will-change: transform;
    transform: translateZ(0);
}
.cloud-group { 
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
}
@keyframes cloudFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(2px, -2px, 0); }
}

/* Individual cloud puff animation - FASTER for all devices */
.cloud-group ellipse {
    animation: puffFloat 1.5s ease-in-out infinite;
    will-change: transform;
}
.cloud-group ellipse:nth-child(odd) {
    animation-delay: -0.75s;
}
@keyframes puffFloat {
    0%, 100% { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.02, 1.02, 1); }
}

.cloud-puff { 
    filter: drop-shadow(3px 5px 4px rgba(0,0,0,0.15)); 
}
.cloud-highlight { 
    fill: rgba(255,255,255,0.8); 
}
.cloud-shadow { 
    fill: rgba(148,163,184,0.4); 
}

/* Cloud Labels - Modern Pill Badge Style */
.cloud-label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    fill: var(--txt);
    paint-order: stroke;
    stroke: var(--card);
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Cloud label badge styling */
.cloud-label-badge {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.cloud-label-badge rect {
    transition: all 0.2s ease;
}
.cloud-label-badge text {
    pointer-events: none;
}

/* Ceiling indicator styles */
.ceiling-line { 
    stroke: #dc2626; 
    stroke-width: 2; 
    stroke-dasharray: 8 4;
}
.ceiling-anim {
    animation: ceilingPulse 2s ease-in-out infinite;
}
@keyframes ceilingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.ceiling-label { 
    fill: #dc2626; 
    font-family: 'JetBrains Mono', monospace; 
    font-size: 10px; 
    font-weight: 700; 
}

/* Wind animations for clouds - FASTER */
.cloud-float {
    animation: cloudFloat 3s ease-in-out infinite;
    will-change: transform;
}
.cloud-wind-mod {
    animation: cloudWindMod 1.5s ease-in-out infinite;
    will-change: transform;
}
.cloud-wind-strong {
    animation: cloudWindStrong 0.8s ease-in-out infinite;
    will-change: transform;
}
@keyframes cloudFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(3px, 0, 0); }
}
@keyframes cloudWindMod {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(8px, 0, 0); }
}
@keyframes cloudWindStrong {
    0%, 100% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(12px, 0, 0); }
    75% { transform: translate3d(-5px, 0, 0); }
}

/* Active runway glow */
.active-rwy-line {
    filter: drop-shadow(0 0 6px rgba(34,197,94,0.6));
}

/* Wind gust animation */
.wind-gust-anim {
    animation: windGust 0.5s ease-in-out infinite;
}
@keyframes windGust {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* Rain drop animation - FASTER */
.rain-drop {
    animation: rainFall 0.5s linear infinite;
    will-change: transform, opacity;
}
@keyframes rainFall {
    0% { opacity: 0; transform: translate3d(0, -20px, 0); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(0, 30px, 0); }
}

/* Snow flake animation - FASTER */
.snow-flake {
    animation: snowFall 1.5s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes snowFall {
    0% { opacity: 0.3; transform: translate3d(0, 0, 0); }
    50% { opacity: 0.9; transform: translate3d(5px, 15px, 0); }
    100% { opacity: 0.3; transform: translate3d(-5px, 30px, 0); }
}

/* Lightning bolt animation */
.lightning-bolt {
    animation: lightning 3s ease-in-out infinite;
}
@keyframes lightning {
    0%, 90%, 100% { opacity: 0; }
    92%, 94% { opacity: 1; }
    93%, 95% { opacity: 0.3; }
}

/* ==================== METAR BOX ==================== */
.metar-box {
    margin: 10px 12px;
    background: var(--card);
    border-radius: 10px;
    border: 1px solid var(--section-border);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}
.metar-box:hover {
    border-color: var(--pri);
}
.metar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
}
.metar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt);
}
.metar-sublabel {
    font-weight: 400;
    color: var(--muted);
    font-size: 11px;
}
.metar-expand {
    color: var(--muted);
    font-size: 10px;
    transition: transform 0.3s ease;
}
.metar-box.expanded .metar-expand {
    transform: rotate(180deg);
}
.metar-raw {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: var(--raw-text);
    padding: 0 14px 12px;
    word-break: break-all;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.metar-box.expanded .metar-raw {
    max-height: 200px;
    padding: 12px 14px;
    border-top: 1px solid var(--section-border);
}

/* ==================== TAF BOX ==================== */
.taf-box {
    margin: 0 12px 10px;
    background: var(--card);
    border-radius: 10px;
    border: 1px solid var(--section-border);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}
.taf-box:hover {
    border-color: #8b5cf6;
}
.taf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
}
.taf-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt);
}
.taf-sublabel {
    font-weight: 400;
    color: var(--muted);
    font-size: 11px;
}
.taf-expand {
    color: var(--muted);
    font-size: 10px;
    transition: transform 0.3s ease;
}
.taf-box.expanded .taf-expand {
    transform: rotate(180deg);
}
.taf-raw {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.6;
    color: var(--raw-taf-text);
    padding: 0 14px 12px;
    word-break: break-all;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.taf-box.expanded .taf-raw {
    max-height: 300px;
    padding: 12px 14px;
    border-top: 1px solid var(--section-border);
}

/* ==================== CHART SECTION ==================== */
.chart-section {
    margin: 0 12px;
}
.chart-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chart-period {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
}

/* ==================== TAF PERIODS GRID ==================== */
.taf-periods-section {
    margin: 12px;
    padding: 12px;
    background: var(--card);
    border-radius: 10px;
    border: 1px solid var(--bdr);
}
.taf-periods-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 10px;
}
.taf-periods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.taf-period-card {
    background: var(--card);
    border: 2px solid var(--bdr);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.taf-period-card:hover {
    border-color: var(--pri);
    transform: translateY(-2px);
}
.taf-period-card.selected {
    background: var(--hover);
    border-color: var(--pri);
    box-shadow: 0 2px 8px rgba(59,130,246,0.2);
}
.tpc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.tpc-type {
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
}
.tpc-cat {
    font-size: 10px;
    font-weight: 700;
}
.tpc-time {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--muted);
    margin-bottom: 6px;
}
.tpc-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 9px;
    color: var(--muted);
}
.tpc-details span {
    display: block;
}
.tpc-clouds {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}
.tpc-cloud {
    font-size: 8px;
    font-family: 'JetBrains Mono', monospace;
    background: var(--hover);
    color: var(--pri);
    padding: 2px 4px;
    border-radius: 3px;
}

/* Weather Effects Container */
.wx-effects { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }

/* Rain */
.rain-drop {
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(59,130,246,0.5) 20%, rgba(37,99,235,0.8));
    border-radius: 0 0 2px 2px;
    animation: rain linear infinite;
}
@keyframes rain {
    0% { transform: translateY(-20px); opacity: 0; }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% { transform: translateY(350px); opacity: 0; }
}
.rain-heavy .rain-drop {
    width: 3px;
    background: linear-gradient(to bottom, transparent, rgba(30,64,175,0.6) 20%, #1e40af);
}

/* Snow */
.snow {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255,255,255,0.9);
    animation: snow linear infinite;
}
@keyframes snow {
    0% { transform: translateY(-10px) translateX(0) rotate(0); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateY(175px) translateX(25px) rotate(180deg); }
    90% { opacity: 1; }
    100% { transform: translateY(350px) translateX(50px) rotate(360deg); opacity: 0; }
}

/* Fog */
.fog {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(226,232,240,0.9) 0%, rgba(226,232,240,0.5) 50%, transparent);
    pointer-events: none;
    animation: fogDrift 10s ease-in-out infinite;
}
@keyframes fogDrift {
    0%, 100% { transform: translateX(-2%); }
    50% { transform: translateX(2%); }
}

/* Mist/Haze */
.haze {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(148,163,184,0.35));
    pointer-events: none;
}

/* Lightning */
.lightning {
    position: absolute;
    inset: 0;
    background: rgba(253,224,71,0.5);
    animation: flash 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes flash {
    0%, 82%, 85%, 87%, 89%, 91%, 94%, 100% { opacity: 0; }
    83%, 86%, 88%, 90%, 93% { opacity: 1; }
}

/* Wind Streaks */
.wind-streak {
    position: absolute;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);
    animation: wind linear infinite;
    pointer-events: none;
}
@keyframes wind {
    0% { transform: translateX(-100%); opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { transform: translateX(200%); opacity: 0; }
}

/* Gust Badge */
.gust-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(239,68,68,0.9);
    color: #fff;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    animation: pulse 1s ease-in-out infinite;
    z-index: 10;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Ceiling Line */
.ceiling-line { stroke: #dc2626; stroke-width: 2; stroke-dasharray: 8 4; }
.ceiling-label { fill: #dc2626; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; }

/* Ground */
.ground { fill: url(#groundGrad); }
.elev-label { fill: #166534; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; }

/* ==================== RUNWAY SECTION ==================== */
.rwy-section {
    margin: 0 12px 12px;
    padding: 14px;
    background: var(--card);
    border-radius: 12px;
    border: 1px solid var(--section-border);
}
.rwy-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 12px;
}
.rwy-container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.rwy-compass-wrap {
    flex: 0 0 200px;
}
.rwy-compass-wrap .compass-svg {
    width: 200px;
    height: 200px;
}
.rwy-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rwy-wind-box, .rwy-active-box {
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 10px;
}
.rwy-wind-title, .rwy-active-title {
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 4px;
}
.rwy-wind-value, .rwy-active-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    font-family: 'JetBrains Mono', monospace;
}
.rwy-wind-gust {
    font-size: 11px;
    color: #f59e0b;
    margin-top: 4px;
}
.rwy-active-box {
    background: rgba(34,197,94,0.15);
    border: 1px solid rgba(34,197,94,0.3);
}
.rwy-active-value {
    color: #22c55e;
}
.active-rwy-glow {
    filter: drop-shadow(0 0 6px rgba(34,197,94,0.6));
}

/* Crosswind Table */
.rwy-xwind-table {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
}
.rwy-xwind-header {
    display: grid;
    grid-template-columns: 50px 1fr 1fr;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.05);
    font-size: 9px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
}
.rwy-xwind-row {
    display: grid;
    grid-template-columns: 50px 1fr 1fr;
    gap: 8px;
    padding: 6px 10px;
    font-size: 11px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.rwy-xwind-row.active {
    background: rgba(34,197,94,0.1);
}
.rwy-xwind-id {
    font-weight: 700;
    color: var(--txt);
    font-family: 'JetBrains Mono', monospace;
}
.rwy-xwind-row.active .rwy-xwind-id {
    color: #22c55e;
}
.rwy-xwind-head {
    font-family: 'JetBrains Mono', monospace;
}
.rwy-xwind-head.positive {
    color: #22c55e;
}
.rwy-xwind-head.negative {
    color: #ef4444;
}
.rwy-xwind-cross {
    color: #f59e0b;
    font-family: 'JetBrains Mono', monospace;
}

/* ==================== SUN TIMES ==================== */
.sun-times {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--bdr);
}
.sun-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: var(--card);
    border-radius: 8px;
}
.sun-icon {
    font-size: 18px;
    margin-bottom: 4px;
}
.sun-label {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
}
.sun-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--txt);
    font-family: 'JetBrains Mono', monospace;
}
.sun-item.sunrise {
    background: rgba(245,158,11,0.12);
}
.sun-item.sunset {
    background: rgba(249,115,22,0.12);
}
.sun-item.daylight {
    background: rgba(56,189,248,0.12);
}

/* Old wind panel styles - kept for compatibility */
.wind-info-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.wind-box, .xwind-box, .active-box {
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.wind-box {
    border-left: 3px solid var(--pri);
}
.xwind-box {
    border-left: 3px solid #f59e0b;
}
.xwind-box.calm {
    grid-column: span 2;
    border-left-color: #22c55e;
}
.active-box {
    border-left: 3px solid #22c55e;
}
.wind-title, .xwind-title, .active-title {
    font-size: 9px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.wind-value, .xwind-value, .active-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
}
.wind-gust {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: #ef4444;
    margin-top: 4px;
    padding: 3px 8px;
    background: rgba(239,68,68,0.15);
    border-radius: 4px;
    display: inline-block;
    animation: gustPulse 1s ease-in-out infinite;
}
@keyframes gustPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.xwind-detail {
    font-size: 10px;
    color: var(--muted);
    margin-top: 4px;
}
.active-value {
    color: #22c55e;
    font-size: 18px;
}

/* Old runway styles - keep for compatibility */
.rwy-compass { position: relative; width: 180px; height: 180px; margin: 0 auto; border-radius: 50%; background: var(--card); box-shadow: inset 0 2px 8px rgba(0,0,0,0.1); display: none; }
.compass-ring { position: absolute; inset: 4px; border: 2px solid var(--bdr); border-radius: 50%; }
.compass-dir { position: absolute; font-size: 10px; font-weight: 700; color: var(--muted); }
.compass-dir.n { top: 8px; left: 50%; transform: translateX(-50%); }
.compass-dir.s { bottom: 8px; left: 50%; transform: translateX(-50%); }
.compass-dir.e { right: 8px; top: 50%; transform: translateY(-50%); }
.compass-dir.w { left: 8px; top: 50%; transform: translateY(-50%); }
.rwy-line { position: absolute; top: 50%; left: 50%; width: 4px; height: 60px; margin-left: -2px; margin-top: -30px; background: var(--muted); border-radius: 2px; transform-origin: center center; }
.rwy-line.active { background: var(--vfr); box-shadow: 0 0 8px rgba(34,197,94,0.5); }
.rwy-lbl { position: absolute; font-size: 8px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--txt); white-space: nowrap; }
.wind-arrow { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform-origin: center 50px; }
.xwind-info { text-align: center; margin-top: 14px; padding: 10px; background: var(--card); border-radius: 6px; display: none; }
.xwind-val { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; color: var(--txt); }
.xwind-lbl { font-size: 10px; color: var(--muted); margin-top: 2px; }
.active-rwy { display: inline-block; padding: 3px 8px; background: var(--vfr); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; margin-top: 6px; }

/* ==================== ZOOM CONTROLS ==================== */
.zoom-ctrls { 
    display: flex; 
    justify-content: center; 
    align-items: center;
    gap: 3px; 
    padding: 4px 8px; 
    flex-wrap: nowrap;
    background: var(--card);
    border-top: none;
    margin-top: -1px;
}
.zoom-btn { 
    padding: 4px 8px; 
    background: var(--card); 
    border: 1px solid var(--bdr); 
    border-radius: 5px; 
    color: var(--muted); 
    font-size: 9px; 
    font-family: 'JetBrains Mono', monospace; 
    font-weight: 600;
    cursor: pointer; 
    transition: all 0.15s; 
}
.zoom-btn:hover {
    border-color: var(--pri);
    color: var(--txt);
    background: var(--hover);
}
.zoom-btn.active { 
    background: var(--pri); 
    border-color: var(--pri); 
    color: #fff; 
}

/* Zoom +/- buttons */
.zoom-ctrl-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--bdr);
    background: var(--card);
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    color: var(--pri);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zoom-ctrl-btn:hover {
    background: var(--pri);
    color: #fff;
    border-color: var(--pri);
}
.zoom-ctrl-btn:active {
    transform: scale(0.95);
}

/* Zoom slider */
.zoom-slider-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--card);
    border-top: 1px solid var(--bdr);
}
.zoom-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}
.zoom-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, var(--pri), var(--mvfr));
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 3px solid var(--pri);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.zoom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.zoom-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 3px solid var(--pri);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.zoom-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--pri);
    min-width: 55px;
    text-align: right;
}

/* Zoom hint */
.zoom-hint {
    display: none;
}

/* Cloud chart touch behavior - allow browser zoom */
.cloud-chart {
    touch-action: manipulation;
}
.cloud-chart:active {
    cursor: default;
}

/* ==================== METRICS ==================== */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 12px 10px; }
.metric { text-align: center; padding: 10px 6px; background: var(--card); border-radius: 8px; border: 1px solid var(--bdr); }
.metric-icon { font-size: 18px; margin-bottom: 3px; }
.metric-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--txt); }
.metric-gust { display: inline-block; margin-left: 2px; padding: 1px 4px; background: rgba(239,68,68,0.15); color: #dc2626; border-radius: 3px; font-size: 9px; font-weight: 600; }
.metric-lbl { font-size: 8px; color: var(--muted); text-transform: uppercase; margin-top: 2px; }

/* ==================== WEATHER BADGES ==================== */
.wx-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 0 12px 10px; }
.wx-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; background: var(--card); border: 1px solid var(--bdr); border-radius: 6px; font-size: 11px; color: var(--txt); }
.wx-badge.severe { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #dc2626; }
.wx-badge.moderate { background: rgba(249,115,22,0.1); border-color: rgba(249,115,22,0.3); color: #ea580c; }

/* ==================== AIRPORT INFO ==================== */
.ap-info { margin: 0 12px 10px; padding: 10px; background: var(--card); border-radius: 8px; border: 1px solid var(--bdr); }
.ap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; font-size: 10px; }
.ap-item label { color: var(--muted); font-size: 8px; text-transform: uppercase; display: block; }
.ap-item span { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--txt); }

/* ==================== FREQUENCIES ==================== */
.freq-section { margin: 0 12px 10px; padding: 10px; background: var(--card); border-radius: 8px; border: 1px solid var(--bdr); }
.freq-title { font-size: 11px; font-weight: 600; color: var(--txt); margin-bottom: 6px; }
.freq-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.freq { padding: 3px 6px; border-radius: 4px; font-size: 9px; font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.freq.twr { background: rgba(239,68,68,0.15); color: #dc2626; }
.freq.gnd { background: rgba(34,197,94,0.15); color: #16a34a; }
.freq.app { background: rgba(59,130,246,0.15); color: #2563eb; }
.freq.atis { background: rgba(245,158,11,0.15); color: #d97706; }
.freq.other { background: rgba(100,116,139,0.15); color: var(--muted); }

/* ==================== TAF ==================== */
.taf-section { padding: 10px 12px; border-top: 1px solid var(--bdr); }
.taf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 4px; }
.taf-title { font-weight: 600; color: var(--txt); font-size: 12px; }
.taf-valid { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--muted); }
.taf-periods { display: flex; flex-direction: column; gap: 6px; }
.taf-period { background: var(--card); border: 1px solid var(--bdr); border-left: 3px solid var(--pri); border-radius: 6px; padding: 8px 10px; cursor: pointer; transition: 0.2s; }
.taf-period:hover { border-color: var(--pri); }
.taf-period.active { background: var(--hover); border-color: var(--mvfr); }
.period-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.period-type { padding: 2px 5px; border-radius: 3px; font-size: 8px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.period-time { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--muted); }
.period-cat { font-size: 9px; font-weight: 700; margin-left: auto; }
.period-details { font-size: 10px; color: var(--muted); line-height: 1.4; }
.period-wx { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.period-wx span { font-size: 9px; padding: 2px 5px; background: rgba(245,158,11,0.15); border-radius: 3px; color: var(--ifr); }

/* Footer */
.p-footer { padding: 10px 12px; text-align: center; font-size: 8px; color: var(--muted); border-top: 1px solid var(--bdr); background: var(--card); }

/* Error */
.error-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 40px 25px; text-align: center; height: 100%; position: relative; background: var(--card); }
.error-panel .error-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    border: none;
    background: #ef4444;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(239,68,68,0.4);
    transition: all 0.2s ease;
}
.error-panel .error-close-btn:hover {
    background: #dc2626;
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(239,68,68,0.5);
}
.error-panel .error-icon { font-size: 56px; margin-bottom: 5px; }
.error-panel .error-title { font-size: 18px; font-weight: 700; color: var(--lifr); }
.error-panel .error-msg { color: var(--muted); font-size: 13px; max-width: 280px; line-height: 1.5; }
.error-panel .error-hint { color: var(--muted); font-size: 11px; font-style: italic; }
.error-panel .error-retry-btn {
    padding: 12px 32px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(239,68,68,0.3);
    transition: all 0.2s ease;
}
.error-panel .error-retry-btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239,68,68,0.4);
}

/* ==================== MOBILE ==================== */
@media (max-width: 768px) {
    .panel { 
        max-width: 100%; 
        top: 0; 
        bottom: 0; 
        left: 0;
        right: 0;
        height: 100%; 
        height: 100dvh;
        border-radius: 0; 
        border-left: none; 
        border-top: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* Prevent pull-to-refresh */
        overscroll-behavior: contain;
    }
    .p-head {
        position: relative;
        top: auto;
        flex-shrink: 0;
        background: var(--card);
        border-bottom: 1px solid var(--bdr);
        z-index: 10;
    }
    .panel-content {
        flex: 1;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        overscroll-behavior-y: contain;
        padding-bottom: 100px;
    }
    /* Allow scroll over SVG/canvas elements */
    .panel-content .cloud-chart,
    .panel-content .profile-section,
    .panel-content svg {
        pointer-events: auto;
    }
    .header-stats { gap: 8px; }
    .logo-icon { width: 32px; height: 32px; border-radius: 7px; }
    .logo-title { font-size: 15px; }
    .logo-sub { display: none; }
    .kwp-header { height: 48px; }
    .map-wrap, .loader { top: 48px !important; }
    .panel { top: 0 !important; height: 100% !important; }
    .stat { gap: 3px; }
    .stat .stat-label { font-size: 8px; }
    .stat span#cnt-vfr, .stat span#cnt-mvfr, .stat span#cnt-ifr, .stat span#cnt-lifr { font-size: 11px; }
    .stat-updated { display: none; }
    .dot { width: 8px; height: 8px; }
    .map-info { display: none; }
    .cloud-chart { margin: 0; }
    .metrics { grid-template-columns: repeat(3, 1fr); padding: 0 10px 8px; gap: 5px; }
    .metric { padding: 8px 4px; }
    .metric-val { font-size: 11px; }
    .metric-lbl { font-size: 7px; }
    .p-icao { font-size: 18px; }
    .zoom-ctrls { padding: 4px 6px; }
    .zoom-btn { padding: 3px 6px; font-size: 8px; }
    
    /* Runway diagram mobile */
    .compass-svg { width: 180px; height: 180px; }
    .wind-info-panel { grid-template-columns: 1fr 1fr; }
    .active-box { grid-column: span 2; }
    .wind-value, .xwind-value { font-size: 14px; }
    .active-value { font-size: 16px; }
    
    /* METAR box mobile */
    .metar-raw { font-size: 11px; }
    
    /* FASTER animations on mobile for better performance */
    .cloud-group ellipse {
        animation-duration: 1s !important;
    }
    .rain-streak {
        animation-duration: 0.2s !important;
    }
    .snowflake-circle, .snowflake-star {
        animation-duration: 2s !important;
    }
    .fog-wave-anim {
        animation-duration: 3s !important;
    }
}

@media (max-width: 400px) {
    .metrics { grid-template-columns: repeat(2, 1fr); }
    .ap-grid { grid-template-columns: 1fr; }
    .wind-info-panel { grid-template-columns: 1fr; }
    .xwind-box.calm, .active-box { grid-column: span 1; }
}

/* ==================== LEAFLET OVERRIDES ==================== */
.leaflet-popup-content-wrapper { border-radius: 8px !important; }
.leaflet-popup-tip { display: none; }
.leaflet-control-zoom { border: none !important; box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important; }
.leaflet-control-zoom a { width: 30px !important; height: 30px !important; line-height: 30px !important; }

/* ==================== AIRPORT SEARCH BOX ==================== */
.kwp-search-control {
    margin: 10px !important;
}
.kwp-search-box {
    position: relative;
    width: 280px;
}
.kwp-search-box input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--search-border);
    border-radius: 10px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--search-bg);
    box-shadow: 0 4px 12px var(--search-shadow);
    outline: none;
    transition: all 0.2s ease;
}
.kwp-search-box input:focus {
    border-color: #2563eb;
    box-shadow: 0 4px 20px rgba(59,130,246,0.3);
}
.kwp-search-box input::placeholder {
    color: var(--search-placeholder);
}
.kwp-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--search-result-bg);
    border: 1px solid var(--search-result-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px var(--search-shadow);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}
.kwp-search-results.hidden {
    display: none;
}
.kwp-search-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--search-result-border);
    transition: background 0.15s ease;
}
.kwp-search-item:hover {
    background: var(--search-result-hover);
}
.kwp-search-item:last-child {
    border-bottom: none;
}
.kwp-search-icao {
    font-weight: 700;
    color: var(--search-icao);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
}
.kwp-search-name {
    font-size: 12px;
    color: var(--search-name);
    margin-top: 2px;
}
.kwp-search-country {
    display: inline-block;
    font-size: 10px;
    color: var(--search-country);
    margin-left: 8px;
}

/* ==================== TREE SWAY ANIMATIONS ==================== */
.tree-group {
    transition: transform 0.3s ease;
}
.tree-sway-light {
    animation: treeSway 4s ease-in-out infinite;
    animation-delay: var(--tree-delay, 0s);
}
.tree-sway-moderate {
    animation: treeSwayModerate 2.5s ease-in-out infinite;
    animation-delay: var(--tree-delay, 0s);
}
.tree-sway-strong {
    animation: treeSwayStrong 1.5s ease-in-out infinite;
    animation-delay: var(--tree-delay, 0s);
}
.tree-sway-extreme {
    animation: treeSwayExtreme 0.8s ease-in-out infinite;
    animation-delay: var(--tree-delay, 0s);
}

@keyframes treeSway {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
}
@keyframes treeSwayModerate {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(5deg); }
    50% { transform: rotate(-3deg); }
    80% { transform: rotate(4deg); }
}
@keyframes treeSwayStrong {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(8deg); }
    35% { transform: rotate(-6deg); }
    55% { transform: rotate(10deg); }
    75% { transform: rotate(-5deg); }
}
@keyframes treeSwayExtreme {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(12deg); }
    25% { transform: rotate(-10deg); }
    40% { transform: rotate(15deg); }
    55% { transform: rotate(-12deg); }
    70% { transform: rotate(10deg); }
    85% { transform: rotate(-8deg); }
}

/* ==================== TOWER ANIMATIONS ==================== */
.tower-beacon {
    animation: towerBeacon 1.5s ease-in-out infinite;
}
@keyframes towerBeacon {
    0%, 100% { opacity: 1; fill: #ef4444; }
    50% { opacity: 0.3; fill: #fca5a5; }
}

.tower-window-glow {
    animation: towerWindowPulse 3s ease-in-out infinite;
}
@keyframes towerWindowPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ==================== WIND ANIMATION IN PROFILE ==================== */
.wind-arrow-gust {
    animation: windArrowGust 0.5s ease-in-out infinite;
}
@keyframes windArrowGust {
    0%, 100% { stroke-width: 3; }
    50% { stroke-width: 5; opacity: 0.8; }
}

/* ==================== AIRPORT SEARCH BOX ==================== */
.kwp-search-control { margin: 10px; }
.kwp-search-box { position: relative; width: 280px; }
.kwp-search-box input {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 10px;
    background: var(--search-bg);
    box-shadow: 0 4px 15px var(--search-shadow);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.3s ease;
}
.kwp-search-box input:focus {
    box-shadow: 0 4px 20px rgba(59,130,246,0.3);
    transform: scale(1.02);
}
.kwp-search-box input::placeholder { color: var(--search-placeholder); }
.kwp-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--search-result-bg);
    border-radius: 10px;
    box-shadow: 0 8px 25px var(--search-shadow);
    margin-top: 5px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}
.kwp-search-results.hidden { display: none; }
.kwp-search-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--search-result-border);
    transition: background 0.2s;
}
.kwp-search-item:hover { background: var(--search-result-hover); }
.kwp-search-item:last-child { border-bottom: none; }
.search-icao {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--search-icao);
    margin-right: 12px;
    font-size: 14px;
}
.search-name {
    flex: 1;
    color: var(--search-name);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-country {
    color: var(--search-country);
    font-size: 11px;
    margin-left: 8px;
}
.kwp-search-empty {
    padding: 20px;
    text-align: center;
    color: var(--search-country);
    font-size: 13px;
}

/* ==================== TOWER LIGHT ANIMATION ==================== */
.tower-light {
    animation: towerBlink 2s ease-in-out infinite;
}
@keyframes towerBlink {
    0%, 40%, 100% { opacity: 1; fill: #ef4444; }
    50%, 90% { opacity: 0.3; fill: #991b1b; }
}

/* ==================== WIND SOCK ANIMATIONS ==================== */
.windsock-light {
    animation: windsockLight 3s ease-in-out infinite;
}
.windsock-moderate {
    animation: windsockModerate 2s ease-in-out infinite;
}
.windsock-strong {
    animation: windsockStrong 0.8s ease-in-out infinite;
}
@keyframes windsockLight {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}
@keyframes windsockModerate {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
}
@keyframes windsockStrong {
    0%, 100% { transform: rotate(-10deg); }
    25% { transform: rotate(8deg); }
    50% { transform: rotate(-8deg); }
    75% { transform: rotate(10deg); }
}

/* ==================== RAW DATA ALWAYS VISIBLE ==================== */
.raw-section.always-visible { margin: 10px; }
.raw-box.expanded .raw-content.visible {
    display: block !important;
    max-height: none !important;
    padding: 12px !important;
}
.raw-box .raw-header { cursor: default; }
.raw-time {
    font-size: 10px;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
}

/* ==================== ACTIVE RUNWAY ENHANCED ==================== */
.rwy-active-box {
    background: linear-gradient(135deg, #166534, #15803d);
    padding: 12px;
    border-radius: 10px;
    margin-top: 10px;
}
.rwy-active-title {
    font-size: 10px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 5px;
}
.rwy-active-value {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
}
.rwy-active-reason {
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    margin-top: 5px;
}
.rwy-active-components {
    display: flex;
    gap: 15px;
    margin-top: 8px;
}
.hw-component, .xw-component {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: #a7f3d0;
}
.wind-deg {
    color: #fbbf24;
    font-family: 'JetBrains Mono', monospace;
}

/* ==================== METEOGRAM BUTTON & MODAL ==================== */
/* Button to open meteogram */
.meteogram-btn-section {
    margin: 12px;
}
.meteogram-open-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #ea580c, #f97316, #fb923c);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(249,115,22,0.4), 0 0 0 3px rgba(249,115,22,0.1);
    animation: meteogramPulse 2s ease-in-out infinite;
}
@keyframes meteogramPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(249,115,22,0.4), 0 0 0 3px rgba(249,115,22,0.1); }
    50% { box-shadow: 0 4px 20px rgba(249,115,22,0.6), 0 0 0 6px rgba(249,115,22,0.15); }
}
.meteogram-open-btn:hover {
    background: linear-gradient(135deg, #c2410c, #ea580c, #f97316);
    box-shadow: 0 6px 25px rgba(249,115,22,0.5), 0 0 0 4px rgba(249,115,22,0.2);
    transform: translateY(-3px);
    animation: none;
}
.meteogram-open-btn:active {
    transform: translateY(0);
}
.meteogram-btn-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.meteogram-btn-text {
    flex: 1;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.meteogram-btn-arrow {
    color: rgba(255,255,255,0.9);
    font-size: 20px;
    font-weight: bold;
    transition: transform 0.2s;
}
.meteogram-open-btn:hover .meteogram-btn-arrow {
    transform: translateX(6px);
}

/* ==================== CLOUD PROFILE FULLSCREEN MODAL ==================== */
/* Fullscreen button in profile */
.profile-section {
    position: relative;
}
.profile-fullscreen-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}
.profile-fullscreen-btn:hover {
    background: rgba(0,0,0,0.7);
    transform: scale(1.1);
}
.cloud-chart {
    cursor: pointer;
}

/* Profile Modal */
body.profile-modal-open {
    overflow: hidden;
}
.profile-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}
.profile-modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.profile-modal-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--profile-bg);
    border-radius: 0;
    box-shadow: none;
    animation: pmIn 0.2s ease;
}
@keyframes pmIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
/* Header */
.profile-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--profile-header-bg);
    flex-shrink: 0;
}
.profile-modal-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #fff;
    min-width: 0;
}
.pm-logo { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pm-logo-icon { width: 22px; height: 22px; border-radius: 5px; }
.pm-logo-text { font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.5px; white-space: nowrap; }
.pm-logo-text span { color: #22d3ee; font-weight: 300; }
.pm-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.15); flex-shrink: 0; }
.pm-icao { font-weight: 800; white-space: nowrap; }
.pm-name { color: rgba(255,255,255,0.5); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pm-header-btns { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.profile-modal-close {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1);
    border: none; border-radius: 6px;
    color: #fff; font-size: 16px; cursor: pointer;
    transition: all 0.15s;
}
.profile-modal-close:hover { background: rgba(255,255,255,0.2); }

/* Chart */
.profile-modal-chart {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--profile-chart-bg);
}
.profile-modal-chart .chart-svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* Bottom bar */
.profile-modal-bottom {
    flex-shrink: 0;
    background: var(--profile-bottom-bg);
    border-top: 1px solid var(--profile-bottom-border);
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Zoom */
.pm-zoom {
    display: flex;
    gap: 4px;
    justify-content: center;
}
.pm-zoom .zoom-btn {
    padding: 5px 14px;
    font-size: 11px;
    background: var(--profile-zoom-bg);
    border: 1px solid var(--profile-zoom-border);
    color: var(--profile-zoom-text);
    border-radius: 6px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    transition: all 0.15s;
}
.pm-zoom .zoom-btn:hover { background: rgba(255,255,255,0.2); }
.pm-zoom .zoom-btn.active {
    background: var(--profile-zoom-active-bg);
    color: var(--profile-zoom-active-text);
    font-weight: 700;
    border-color: var(--profile-zoom-active-bg);
}

/* Period selector */
.pm-periods {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2px 0;
}
.pm-periods::-webkit-scrollbar { display: none; }
.pm-period {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--profile-period-bg);
    border: 1px solid var(--profile-period-border);
    border-left: 3px solid var(--pc, #3b82f6);
    border-radius: 5px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.15s;
    white-space: nowrap;
}
.pm-period:hover { background: var(--profile-period-hover); }
.pm-period.active {
    background: var(--profile-period-active);
    border-color: var(--profile-period-active);
}
.pm-p-type { font-size: 10px; font-weight: 700; }
.pm-p-type.metar { color: #22c55e; }
.pm-p-time { font-size: 9px; color: rgba(255,255,255,0.6); }
.pm-p-wx { font-size: 11px; }

/* Raw METAR/TAF in modal */
.pm-raw {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 90px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.pm-raw-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
}
.pm-raw-tag {
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.pm-raw-tag.metar { background: rgba(34,197,94,0.2); color: #22c55e; }
.pm-raw-tag.taf { background: rgba(59,130,246,0.2); color: #3b82f6; }
.pm-raw-txt {
    color: rgba(255,255,255,0.7);
    word-break: break-all;
}

@media (max-width: 768px) {
    .profile-modal-container { border-radius: 0; }
    .pm-logo-text { display: none; }
}

/* Modal Overlay */
body.meteogram-modal-open {
    overflow: hidden;
}
.meteogram-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.meteogram-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.meteogram-modal-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    max-height: 95vh;
    background: var(--meteor-bg);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: meteogramModalIn 0.3s ease;
}
@keyframes meteogramModalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.meteogram-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--meteor-header);
    flex-shrink: 0;
}
.meteogram-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.meteogram-modal-icon {
    font-size: 28px;
}
.meteogram-modal-airport {
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.5px;
}
.meteogram-modal-subtitle {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    font-weight: 500;
}
.meteogram-modal-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.meteogram-modal-close:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.1);
}
.meteogram-modal-body {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--meteor-body);
    position: relative;
    touch-action: pan-x pan-y pinch-zoom;
}
.meteogram-modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--muted);
    font-size: 15px;
}

/* Meteogram Tab Navigation */
.meteogram-tabs {
    display: flex;
    background: var(--meteor-tab-bar);
    padding: 8px 12px;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.meteogram-tabs::-webkit-scrollbar {
    height: 0;
}
.meteogram-tab {
    flex: 1;
    min-width: 100px;
    padding: 12px 20px;
    border: none;
    background: var(--meteor-tab-bg);
    color: var(--meteor-tab-text);
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}
.meteogram-tab:hover {
    background: var(--meteor-tab-hover);
    color: var(--txt);
}
.meteogram-tab.active {
    background: var(--meteor-tab-active-bg);
    color: var(--meteor-tab-active-text);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Meteogram Chart Container */
.meteogram-chart-wrap {
    padding: 16px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.meteogram-chart {
    min-width: 1100px;
    height: auto;
    min-height: 920px;
    background: var(--meteor-chart-bg);
    border-radius: 12px;
    border: 1px solid var(--meteor-chart-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.meteogram-chart svg {
    width: 100%;
    height: 100%;
    display: block;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* Atmosphere Profile View */
.atmosphere-wrap {
    padding: 16px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.atmosphere-chart {
    min-width: 900px;
    background: linear-gradient(180deg, #0c4a6e 0%, #0284c7 30%, #38bdf8 60%, #7dd3fc 100%);
    border-radius: 12px;
    border: 1px solid #0284c7;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    overflow: hidden;
}
.atmosphere-chart svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Meteogram Data Table */
.meteogram-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 16px;
    max-height: calc(100vh - 200px);
}
.meteogram-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 12px;
}
.meteogram-table th {
    background: var(--card);
    color: var(--txt);
    padding: 10px 8px;
    text-align: center;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 5;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.meteogram-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--bdr);
    background: var(--card);
}
.meteogram-table tr:hover td {
    background: var(--hover);
}
/* Current hour highlight */
.meteogram-table tr.current-hour td {
    background: var(--hover);
    font-weight: 600;
}
/* Midnight row separator */
.meteogram-table tr.midnight-row td {
    border-top: 3px solid var(--pri);
}
/* Day column */
.meteogram-table .day-cell {
    font-weight: 700;
    color: var(--pri);
    font-size: 11px;
    background: var(--hover);
    min-width: 60px;
}
.meteogram-table .day-cell.empty {
    background: var(--card);
}
/* Hour column */
.meteogram-table .hour-cell {
    font-weight: 600;
    color: var(--txt);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}
.meteogram-table .time-cell {
    font-weight: 600;
    color: var(--pri);
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}
.meteogram-table .date-cell {
    font-size: 9px;
    color: var(--muted);
}
.meteogram-table .temp-cell {
    font-weight: 700;
    color: #ef4444;
    font-size: 13px;
}
.meteogram-table .temp-cell.cold {
    color: #3b82f6;
}
.meteogram-table .wind-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.meteogram-table .wind-dir {
    font-size: 16px;
}
.meteogram-table .wind-spd {
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}
.meteogram-table .precip-cell {
    color: var(--pri);
    font-weight: 600;
}
.meteogram-table .cloud-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.meteogram-table .humidity-cell {
    color: #06b6d4;
}
.meteogram-table .pressure-cell {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

/* Weather Icon in Table */
.wx-icon-cell {
    font-size: 20px;
}

/* Meteogram Loading */
.meteogram-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
}
.meteogram-loading .spin {
    width: 30px;
    height: 30px;
}
.meteogram-loading span {
    color: var(--muted);
    font-size: 12px;
}

/* Meteogram Error */
.meteogram-error {
    padding: 30px 20px;
    text-align: center;
    color: var(--muted);
}
.meteogram-error-icon {
    font-size: 36px;
    margin-bottom: 10px;
}
.meteogram-error-text {
    font-size: 13px;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    /* Meteogram Modal Mobile */
    .meteogram-modal {
        padding: 0;
    }
    .meteogram-modal-container {
        max-height: 100vh;
        border-radius: 0;
        height: 100%;
    }
    .meteogram-modal-header {
        padding: 12px 16px;
    }
    .meteogram-modal-airport {
        font-size: 15px;
    }
    .meteogram-modal-subtitle {
        font-size: 12px;
        display: block;
        width: 100%;
        margin-top: 4px;
    }
    .meteogram-modal-close {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .meteogram-open-btn {
        padding: 14px 16px;
    }
    .meteogram-btn-text {
        font-size: 14px;
    }
    .meteogram-btn-icon {
        font-size: 24px;
    }
    .meteogram-tabs {
        padding: 4px;
        gap: 4px;
    }
    .meteogram-tab {
        padding: 10px 12px;
        font-size: 11px;
        min-width: 80px;
    }
    .meteogram-chart-wrap {
        padding: 8px;
    }
    .meteogram-chart {
        min-width: 1000px;
        min-height: 880px;
    }
    .meteogram-table {
        font-size: 10px;
    }
    .meteogram-table th,
    .meteogram-table td {
        padding: 6px 4px;
    }
    .meteogram-table-wrap {
        padding: 0 8px 12px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .meteogram-modal-title {
        gap: 8px;
    }
    .meteogram-modal-icon {
        font-size: 22px;
    }
    .meteogram-modal-airport {
        font-size: 14px;
    }
    .meteogram-open-btn {
        padding: 12px 14px;
        gap: 10px;
    }
    .meteogram-btn-text {
        font-size: 13px;
    }
}

/* ==================== PRO METEOGRAM STYLES ==================== */

/* Unit Toggle */
.mtg-unit-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    background: var(--card);
    border-bottom: 1px solid var(--bdr);
}
.mtg-unit-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}
.mtg-unit-btn {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--muted);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}
.mtg-unit-btn:hover {
    background: var(--hover);
    color: var(--txt);
}
.mtg-unit-btn.active {
    background: var(--pri);
    border-color: var(--pri);
    color: #fff;
}

/* ==================== VERTICAL WIND PROFILE (NEW) ==================== */
.mtg-wp-container {
    padding: 0;
    background: var(--card);
}

/* Header */
.wp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--meteor-header);
}
.wp-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wp-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.wp-time {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
}

/* Time Bar */
.wp-time-bar {
    display: flex;
    overflow-x: auto;
    background: var(--card-alt);
    border-bottom: 1px solid var(--bdr);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.wp-time-bar::-webkit-scrollbar { display: none; }
.wp-time-btn {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 10px;
    min-width: 36px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.wp-time-btn:hover {
    background: var(--hover);
}
.wp-time-btn.active {
    background: var(--hover);
    border-bottom-color: var(--pri);
}
.wp-time-btn.new-day {
    border-left: 2px solid var(--pri);
}
.wp-day {
    font-size: 8px;
    font-weight: 700;
    color: var(--pri);
    text-transform: uppercase;
}
.wp-hr {
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--txt);
}
.wp-time-btn.active .wp-hr {
    color: var(--pri);
}

/* Full Data Table */
.wp-full-table {
    overflow-x: auto;
    padding: 12px;
}

.wp-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border: 1px solid var(--bdr);
    border-radius: 8px;
    overflow: hidden;
}

.wp-data-table th {
    background: var(--card);
    color: var(--txt);
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wp-data-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--bdr);
    vertical-align: middle;
}

.wp-data-table .col-alt { width: 140px; }
.wp-data-table .col-press { width: 100px; }
.wp-data-table .col-wind { width: 180px; }
.wp-data-table .col-dir { width: 120px; }
.wp-data-table .col-temp { width: 80px; }

/* Row styles */
.wp-row {
    transition: background 0.15s;
}
.wp-row:hover {
    background: var(--hover);
}
.wp-row.light { }
.wp-row.moderate {
    background: rgba(245,158,11,0.08);
}
.wp-row.strong {
    background: rgba(239,68,68,0.08);
}
.wp-row.jet-stream {
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
}
.wp-row.jet-stream:hover {
    background: linear-gradient(90deg, #fde68a 0%, #fcd34d 100%);
}

/* Altitude cell */
.alt-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.alt-fl {
    font-size: 14px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--txt);
}
.alt-value {
    font-size: 10px;
    color: var(--muted);
}

/* Pressure cell */
.col-press {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
}

/* Wind bar cell */
.wind-bar-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wind-bar-bg {
    flex: 1;
    height: 20px;
    background: var(--bdr);
    border-radius: 10px;
    overflow: hidden;
}
.wind-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}
.wind-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    color: var(--txt);
    min-width: 60px;
}
.wp-row.strong .wind-value { color: #dc2626; }
.wp-row.moderate .wind-value { color: #d97706; }

/* Direction cell */
.dir-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dir-arrow {
    font-size: 16px;
    color: var(--pri);
    display: inline-block;
}
.dir-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
}

/* Temperature cell */
.temp-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--muted);
}

/* Legend */
.wp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 16px;
    background: var(--card);
    border-top: 1px solid var(--bdr);
}
.wp-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
}
.wp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.wp-dot.jet {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: 2px solid #f59e0b;
}

/* Responsive */
@media (max-width: 768px) {
    .wp-data-table {
        font-size: 11px;
    }
    .wp-data-table th,
    .wp-data-table td {
        padding: 8px 10px;
    }
    .alt-fl { font-size: 12px; }
    .wind-value { font-size: 11px; min-width: 50px; }
    .wind-bar-bg { height: 16px; }
}

.mtg-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card);
    padding: 20px 24px;
    border-radius: 12px;
    margin: 16px;
    gap: 20px;
}
.mtg-current-main {
    display: flex;
    align-items: center;
    gap: 16px;
}
.mtg-current-icon {
    font-size: 48px;
}
.mtg-current-temp {
    font-size: 48px;
    font-weight: 700;
    color: var(--txt);
}
.mtg-current-desc {
    font-size: 16px;
    color: var(--muted);
    margin-left: 8px;
}
.mtg-current-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 24px;
}
.mtg-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mtg-detail-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
}
.mtg-detail-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
}

/* Tabs */
.mtg-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.mtg-tabs::-webkit-scrollbar { display: none; }
.mtg-tab {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    background: var(--card-alt);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.mtg-tab:hover {
    background: var(--hover);
    color: var(--txt);
}
.mtg-tab.active {
    background: var(--pri);
    color: #fff;
}

/* Views */
.mtg-view {
    padding: 0 16px 16px;
}

/* Table Container */
.mtg-table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--bdr);
    background: var(--card);
}
.mtg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}
.mtg-table th {
    position: sticky;
    top: 0;
    background: var(--card);
    color: var(--txt);
    font-weight: 600;
    padding: 10px 8px;
    text-align: center;
    border-bottom: 2px solid var(--pri);
    z-index: 2;
}
.mtg-table td {
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--bdr);
    vertical-align: middle;
}
.mtg-table .sticky-col {
    position: sticky;
    left: 0;
    background: var(--card);
    z-index: 1;
    border-right: 2px solid var(--bdr);
}
.mtg-table th.sticky-col {
    z-index: 3;
    background: var(--card);
    border-right: 2px solid var(--pri);
}

/* Row styles */
.mtg-row-now {
    background: rgba(14, 165, 233, 0.15) !important;
}
.mtg-row-now td {
    border-top: 2px solid var(--pri);
    border-bottom: 2px solid var(--pri);
}
.mtg-row-midnight {
    border-top: 2px solid #3b82f6;
}
.mtg-row-night {
    background: rgba(30, 41, 59, 0.04);
}

/* Time cell */
.mtg-time-cell {
    min-width: 70px;
}
.mtg-day-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--pri);
    text-transform: uppercase;
}
.mtg-hour-label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--txt);
}

/* Cell colors */
.mtg-cold { color: #3b82f6 !important; font-weight: 600; }
.mtg-hot { color: #ef4444 !important; font-weight: 600; }
.mtg-wind-strong { color: #ef4444 !important; font-weight: 700; background: rgba(239,68,68,0.1); }
.mtg-wind-mod { color: #f59e0b !important; font-weight: 600; }
.mtg-gust-strong { color: #dc2626 !important; font-weight: 700; }
.mtg-precip { color: #2563eb !important; font-weight: 600; background: rgba(59,130,246,0.1); }
.mtg-prob-high { color: #7c3aed !important; font-weight: 600; }
.mtg-vis-low { color: #dc2626 !important; font-weight: 600; background: rgba(220,38,38,0.1); }
.mtg-uv-high { color: #f59e0b !important; font-weight: 600; }
.mtg-uv-extreme { color: #dc2626 !important; font-weight: 700; background: rgba(220,38,38,0.1); }
.mtg-cape-high { color: #7c3aed !important; font-weight: 600; background: rgba(124,58,237,0.1); }
.mtg-muted { color: var(--muted); }
.mono { font-family: 'JetBrains Mono', monospace; }

/* WX cell */
.mtg-wx-cell {
    font-size: 18px;
}

/* Legend */
.mtg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 16px;
    background: var(--card);
    border-radius: 8px;
    margin-top: 12px;
}
.mtg-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
}
.mtg-legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}
.mtg-legend-color.mtg-cold { background: rgba(59,130,246,0.3); }
.mtg-legend-color.mtg-hot { background: rgba(239,68,68,0.3); }
.mtg-legend-color.mtg-wind-strong { background: rgba(239,68,68,0.3); }
.mtg-legend-color.mtg-precip { background: rgba(59,130,246,0.3); }

/* ==================== DAILY CARDS ==================== */
.mtg-daily-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.mtg-daily-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    padding: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.mtg-daily-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.mtg-daily-card.mtg-today {
    background: linear-gradient(135deg, var(--pri) 0%, var(--mvfr) 100%);
    border: none;
    color: #fff;
}
.mtg-daily-card.mtg-today .mtg-daily-date,
.mtg-daily-card.mtg-today .mtg-daily-desc,
.mtg-daily-card.mtg-today .mtg-daily-label,
.mtg-daily-card.mtg-today .mtg-daily-val,
.mtg-daily-card.mtg-today .mtg-daily-sun,
.mtg-daily-card.mtg-today .mtg-daily-daylight {
    color: rgba(255,255,255,0.9);
}
.mtg-daily-card.mtg-today .mtg-daily-low {
    color: rgba(255,255,255,0.7);
}
.mtg-daily-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.mtg-daily-day {
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
}
.mtg-today .mtg-daily-day { color: #fff; }
.mtg-daily-date {
    font-size: 12px;
    color: var(--muted);
}
.mtg-daily-icon {
    font-size: 36px;
    text-align: center;
    margin: 8px 0;
}
.mtg-daily-desc {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    margin-bottom: 12px;
}
.mtg-daily-temps {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
}
.mtg-daily-high {
    font-size: 28px;
    font-weight: 700;
    color: #ef4444;
}
.mtg-today .mtg-daily-high { color: #fff; }
.mtg-daily-sep {
    font-size: 20px;
    color: var(--muted);
}
.mtg-daily-low {
    font-size: 20px;
    font-weight: 600;
    color: #3b82f6;
}
.mtg-daily-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid rgba(148,163,184,0.2);
    padding-top: 12px;
}
.mtg-daily-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
.mtg-daily-label {
    color: var(--muted);
}
.mtg-daily-val {
    font-weight: 600;
    color: var(--txt);
}
.mtg-daily-sun {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #f59e0b;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(148,163,184,0.2);
}
.mtg-daily-daylight {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    margin-top: 6px;
}

/* ==================== CHARTS ==================== */
.mtg-charts-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
}

.mtg-chart-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.mtg-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--card);
    border-bottom: 1px solid var(--bdr);
}

.mtg-chart-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
}

.mtg-chart-legend {
    display: flex;
    gap: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
}

.legend-color {
    width: 12px;
    height: 4px;
    border-radius: 2px;
}

.mtg-chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mtg-single-chart-svg {
    display: block;
    min-width: 800px;
}

/* Legacy charts container */
.mtg-charts-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--bdr);
}
.mtg-chart-svg {
    display: block;
    min-width: 1000px;
    background: var(--card);
}

/* ==================== WIND ==================== */
.mtg-wind-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}
.mtg-wind-rose-section {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    padding: 16px;
}
.mtg-wind-rose-section h3,
.mtg-wind-profile h3,
.mtg-wind-stats h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 12px;
}
.mtg-wind-rose-svg {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
.mtg-wind-profile {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    padding: 16px;
    grid-column: 1 / -1;
}
.mtg-wind-profile-svg {
    display: block;
    width: 100%;
    border-radius: 8px;
}
.mtg-wind-stats {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    padding: 16px;
}
.mtg-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.mtg-stat-item {
    text-align: center;
    padding: 12px;
    background: var(--card-alt);
    border-radius: 8px;
}
.mtg-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--pri);
}
.mtg-stat-label {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

/* ==================== CLOUDS ==================== */

/* Cloud Layers Page */
.mtg-clouds-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
}

/* Cloud Layers Card */
.cloud-layers-card {
    background: var(--card);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.cloud-layers-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cloud-layers-icon {
    font-size: 24px;
}
.cloud-layers-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: 1px;
}

/* Cloud Summary */
.cloud-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.1);
    padding: 1px;
}
.cloud-summary-item {
    background: var(--bg);
    padding: 16px;
    text-align: center;
}
.cloud-summary-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.cloud-summary-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--txt);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.cloud-condition-icon {
    font-size: 20px;
}
.cloud-category {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

/* Cloud Layer Bars */
.cloud-layers-bars {
    padding: 20px;
}
.cloud-layer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.cloud-layer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}
.cloud-layer-icon {
    font-size: 18px;
}
.cloud-layer-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
}
.cloud-layer-alt {
    font-size: 11px;
    color: var(--muted);
}
.cloud-layer-bar-wrap {
    flex: 1;
    height: 24px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
}
.cloud-layer-bar {
    height: 100%;
    border-radius: 12px;
    transition: width 0.5s ease;
}
.cloud-layer-bar.high {
    background: linear-gradient(90deg, #818cf8, #a78bfa);
}
.cloud-layer-bar.mid {
    background: linear-gradient(90deg, #38bdf8, #60a5fa);
}
.cloud-layer-bar.low {
    background: linear-gradient(90deg, #94a3b8, #64748b);
}
.cloud-layer-pct {
    min-width: 50px;
    text-align: right;
    font-size: 16px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: #22d3ee;
}
.cloud-layer-types {
    font-size: 11px;
    color: var(--muted);
    margin-left: 50px;
    margin-bottom: 16px;
    font-style: italic;
}

/* Cloud Layers Note */
.cloud-layers-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 20px;
    background: rgba(34,197,94,0.1);
    border-top: 1px solid rgba(34,197,94,0.2);
}
.cloud-layers-note .note-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.cloud-layers-note .note-text {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

/* Cloud Forecast Section */
.cloud-forecast-section {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    padding: 16px;
}
.cloud-forecast-section h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 12px;
}
.cloud-forecast-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--bdr);
}
.cloud-forecast-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.cloud-forecast-table th {
    background: var(--card-alt);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}
.cloud-forecast-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--bdr);
    color: var(--txt);
}
.cloud-forecast-table tr:hover {
    background: var(--card-alt);
}
.cloud-forecast-table .time-cell {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--txt);
}
.cloud-forecast-table .total-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mini-bar-wrap {
    width: 60px;
    height: 8px;
    background: var(--bdr);
    border-radius: 4px;
    overflow: hidden;
}
.mini-bar.total {
    height: 100%;
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    border-radius: 4px;
}
.cond-badge {
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .cloud-summary {
        grid-template-columns: 1fr;
    }
    .cloud-layer-row {
        flex-wrap: wrap;
    }
    .cloud-layer-info {
        min-width: 100%;
        margin-bottom: 4px;
    }
    .cloud-layer-bar-wrap {
        flex: 1;
        min-width: 150px;
    }
    .cloud-layer-types {
        margin-left: 0;
    }
}

.mtg-clouds-container {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    padding: 16px;
}
.mtg-clouds-container h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 12px;
}
.mtg-clouds-svg {
    display: block;
    width: 100%;
    border-radius: 8px;
}

/* ==================== PRECIPITATION ==================== */
.mtg-precip-container {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    padding: 16px;
}
.mtg-precip-container h3,
.mtg-precip-container h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 12px;
}
.mtg-precip-svg {
    display: block;
    width: 100%;
    border-radius: 8px;
    margin-bottom: 20px;
}
.mtg-precip-daily {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--bdr);
}
.mtg-precip-daily-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.mtg-precip-daily-item {
    text-align: center;
    padding: 12px 8px;
    background: var(--card-alt);
    border-radius: 8px;
}
.mtg-precip-day {
    font-size: 12px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 4px;
}
.mtg-precip-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--pri);
}
.mtg-precip-prob {
    font-size: 10px;
    color: var(--muted);
}

/* ==================== NEW PRECIPITATION STYLES ==================== */
.mtg-precip-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
}

/* Precipitation Summary Card */
.precip-summary-card {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(30,64,175,0.3);
}

.precip-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.1);
}

.precip-summary-icon {
    font-size: 24px;
}

.precip-summary-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.precip-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.1);
}

.precip-stat {
    background: rgba(30,58,138,0.8);
    padding: 20px 16px;
    text-align: center;
}

.precip-stat-value {
    font-size: 24px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: #fff;
}

.precip-stat-label {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    margin-top: 4px;
}

/* Hourly Precipitation Table */
.precip-hourly-section {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    overflow: hidden;
}

.precip-hourly-section h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    padding: 16px;
    margin: 0;
    background: var(--card-alt);
    border-bottom: 1px solid var(--bdr);
}

.precip-table-wrap {
    overflow-x: auto;
    max-height: 500px;
    overflow-y: auto;
}

.precip-hourly-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.precip-hourly-table th {
    position: sticky;
    top: 0;
    background: var(--card);
    color: var(--txt);
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1;
}

.precip-hourly-table td {
    padding: 10px;
    border-bottom: 1px solid var(--bdr);
    vertical-align: middle;
}

.precip-hourly-table tr:hover {
    background: var(--card-alt);
}

.precip-hourly-table tr.new-day {
    border-top: 2px solid #3b82f6;
}

.precip-hourly-table tr.has-precip {
    background: var(--hover);
}

.precip-hourly-table tr.has-precip:hover {
    background: var(--hover);
}

.time-cell {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--txt);
}

.time-cell.new-day-cell {
    background: var(--hover);
}

.day-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--pri);
    text-transform: uppercase;
}

.hour-label {
    font-size: 12px;
    color: var(--txt);
}

.precip-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--txt);
}

.amount-cell {
    font-family: 'JetBrains Mono', monospace;
}

.amount-value {
    font-weight: 700;
    font-size: 13px;
    color: var(--pri);
}

.amount-unit {
    font-size: 10px;
    color: var(--muted);
}

.rain-cell {
    color: #2563eb;
}

.snow-cell {
    color: #6366f1;
}

.no-precip {
    color: #cbd5e1;
    text-align: center;
}

.prob-badge {
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.intensity-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.intensity-badge.light {
    background: rgba(34,197,94,0.15);
    color: var(--vfr);
}

.intensity-badge.moderate {
    background: rgba(249,115,22,0.15);
    color: var(--ifr);
}

.intensity-badge.heavy {
    background: rgba(239,68,68,0.15);
    color: var(--lifr);
}

/* Daily Summary Section */
.precip-daily-section {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    padding: 16px;
}

.precip-daily-section h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 16px;
}

.precip-daily-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.precip-daily-card {
    background: var(--card-alt);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    transition: all 0.2s;
}

.precip-daily-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}

.precip-daily-card.today {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #3b82f6;
}

.precip-daily-header {
    margin-bottom: 8px;
}

.precip-daily-day {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
}

.precip-daily-date {
    font-size: 10px;
    color: var(--muted);
}

.precip-daily-amount {
    font-size: 22px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--pri);
    margin-bottom: 8px;
}

.precip-daily-amount span {
    font-size: 12px;
    font-weight: 500;
}

.precip-daily-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.precip-daily-detail {
    font-size: 10px;
    color: var(--muted);
}

/* Responsive */
@media (max-width: 768px) {
    .precip-summary-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .precip-daily-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .precip-summary-stats {
        grid-template-columns: 1fr 1fr;
    }
    .precip-daily-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .mtg-current {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .mtg-current-details {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }
    .mtg-daily-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mtg-wind-container {
        grid-template-columns: 1fr;
    }
    .mtg-stat-grid {
        grid-template-columns: 1fr;
    }
    .mtg-precip-daily-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 480px) {
    .mtg-current {
        padding: 16px;
    }
    .mtg-current-temp {
        font-size: 36px;
    }
    .mtg-daily-grid {
        grid-template-columns: 1fr;
    }
    .mtg-precip-daily-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .mtg-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* ==================== v16 - CIRCLEMARKER TOOLTIP STYLING ==================== */
/* CircleMarker uses Leaflet's native tooltip - style it here */
.leaflet-tooltip.icao-tooltip {
    background: rgba(15, 23, 42, 0.95) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 5px 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    white-space: nowrap !important;
}

.leaflet-tooltip.icao-tooltip::before {
    border-top-color: rgba(15, 23, 42, 0.95) !important;
}

/* N/A marker indicator - visual only, applied via JS */

/* ==================== v14 - FLIGHT CATEGORY CARD ==================== */
.flight-cat-card {
    background: var(--card);
    margin: 12px;
    border-radius: 16px;
    border: 1px solid var(--bdr);
    border-left: 6px solid var(--vfr);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

.fcc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--card);
    border-bottom: 1px solid var(--bdr);
}

.fcc-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}

.fcc-icon {
    font-size: 22px;
}

.fcc-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    letter-spacing: 2px;
}

.fcc-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fcc-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
}

.fcc-subtitle {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==================== APPROACH CATEGORY SECTION ==================== */
.fcc-approach {
    padding: 16px 20px;
    background: var(--card-alt);
    color: var(--txt);
    border-top: 1px solid var(--bdr);
    border-bottom: 1px solid var(--bdr);
}

.fcc-approach-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.fcc-approach-icon {
    font-size: 24px;
}

.fcc-approach-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pri);
}

.fcc-approach-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
}

.fcc-approach-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.fcc-approach-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card-alt);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--bdr);
}

.fcc-adl {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fcc-adv {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--pri);
}

.fcc-approach-desc {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
    padding: 12px;
    background: var(--card-alt);
    border-radius: 8px;
    border: 1px solid var(--bdr);
}

/* ==================== METEOROLOGICAL ASSESSMENT ==================== */
.fcc-meteo {
    padding: 16px 20px;
    background: var(--card);
}

.fcc-meteo-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bdr);
}

.fcc-item {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--card-alt);
    border: 1px solid var(--bdr);
    transition: transform 0.2s, box-shadow 0.2s;
}

.fcc-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.fcc-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.fcc-item-icon::after {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 14px;
}

.fcc-item-icon.good {
    background: rgba(34,197,94,0.12);
}
.fcc-item-icon.good::after { content: '\2713'; color: var(--vfr); }

.fcc-item-icon.caution {
    background: rgba(59,130,246,0.12);
}
.fcc-item-icon.caution::after { content: '\2014'; color: var(--mvfr); }

.fcc-item-icon.warning {
    background: rgba(249,115,22,0.12);
}
.fcc-item-icon.warning::after { content: '!'; color: var(--ifr); font-size: 16px; }

.fcc-item-icon.danger {
    background: rgba(239,68,68,0.12);
}
.fcc-item-icon.danger::after { content: '!!'; color: var(--lifr); font-size: 13px; }

.fcc-item-content {
    flex: 1;
    min-width: 0;
}

.fcc-item-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.fcc-item-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 6px;
}

.fcc-item-detail {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
}

.fcc-item-detail strong {
    color: var(--txt);
}

/* ==================== WEATHER PHENOMENA ==================== */
.fcc-weather-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--bdr);
}

.fcc-weather-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 12px;
}

.fcc-weather-item {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
}

.fcc-weather-item.danger {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.3);
}

.fcc-weather-item.warning {
    background: rgba(249,115,22,0.1);
    border-color: rgba(249,115,22,0.25);
}

.fcc-weather-item.caution {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.25);
}

.fcc-weather-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.fcc-weather-content {
    flex: 1;
}

.fcc-weather-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 2px;
}

.fcc-weather-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}

.fcc-weather-explain {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
}

/* ==================== REQUIREMENTS GRID ==================== */
.fcc-requirements {
    padding: 16px 20px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
}

.fcc-req-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 14px;
}

.fcc-req-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.fcc-req-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    background: var(--card);
    border: 1px solid var(--bdr);
}

.fcc-req-item .req-icon {
    font-size: 16px;
}

.fcc-req-item.good {
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.3);
    color: var(--vfr);
}

.fcc-req-item.caution {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.3);
    color: var(--mvfr);
}

.fcc-req-item.warning {
    background: rgba(249,115,22,0.1);
    border-color: rgba(249,115,22,0.3);
    color: var(--ifr);
}

.fcc-req-item.danger {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
    color: var(--lifr);
}

/* ==================== RESPONSIVE v14 ==================== */
@media (max-width: 768px) {
    .fcc-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    
    .fcc-badge {
        width: 100%;
        justify-content: center;
    }
    
    .fcc-code {
        font-size: 28px;
    }
    
    .fcc-approach-details {
        grid-template-columns: 1fr;
    }
    
    .fcc-item-value {
        font-size: 18px;
    }
    
    .fcc-req-grid {
        grid-template-columns: 1fr;
    }
    
    .kwp-marker-icao {
        font-size: 8px;
    }
    
    .kwp-marker-cat {
        font-size: 7px;
    }
}

/* ==================== OPTIMIZED TOOLTIP STYLES ==================== */
.icao-tooltip {
    background: var(--popup-bg) !important;
    border: 1px solid var(--popup-border) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--popup-text) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    white-space: nowrap !important;
}

.icao-tooltip::before {
    border-top-color: var(--popup-bg) !important;
}

/* ==================== SELECTED PERIOD INDICATOR ==================== */
.selected-period-indicator {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 12px 0 12px;
    padding: 14px 18px;
    background: rgba(245,158,11,0.12);
    border: 2px solid rgba(245,158,11,0.4);
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(245, 158, 11, 0.15);
}

/* METAR Indicator - Green Theme */
.selected-period-indicator.metar-indicator {
    background: rgba(34,197,94,0.12);
    border: 2px solid rgba(34,197,94,0.4);
    box-shadow: 0 3px 12px rgba(34, 197, 94, 0.15);
}

/* TAF Indicator - Yellow Theme */
.selected-period-indicator.taf-indicator {
    background: rgba(245,158,11,0.12);
    border: 2px solid rgba(245,158,11,0.4);
    box-shadow: 0 3px 12px rgba(245, 158, 11, 0.15);
}

.spi-icon {
    font-size: 28px;
    line-height: 1;
}

.spi-content {
    flex: 1;
    min-width: 0;
}

.spi-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.spi-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--vfr);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.taf-indicator .spi-title {
    color: var(--ifr);
}

.spi-source {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: #3b82f6;
    color: #fff;
}

.spi-source.checkwx {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
}

.spi-type {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    background: #3b82f6;
}

.spi-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--txt);
}

.spi-raw {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--raw-text);
    background: rgba(0,0,0,0.15);
    padding: 8px 10px;
    border-radius: 6px;
    word-break: break-word;
    line-height: 1.5;
}

.taf-indicator .spi-raw {
    color: var(--raw-taf-text);
}

.spi-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(128,128,128,0.2);
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.spi-close:hover {
    background: rgba(0,0,0,0.2);
    transform: scale(1.1);
}

/* TAF Button Active State Enhancement */
.wx-btn.taf.active {
    background: rgba(245,158,11,0.15) !important;
    border: 2px solid rgba(245,158,11,0.5) !important;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.wx-btn.metar.active {
    background: rgba(34,197,94,0.12) !important;
    border: 2px solid rgba(34,197,94,0.4) !important;
}

/* METAR button highlight when active */
.wx-btn.metar.active .wx-btn-type {
    background: var(--vfr);
    color: #fff;
}

/* ==================== MAP LEGEND ==================== */
.map-legend {
    position: absolute;
    bottom: 20px;
    right: 10px;
    background: var(--card);
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    font-size: 11px;
    backdrop-filter: blur(8px);
    border: 1px solid var(--bdr);
}

.legend-title {
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--muted);
    font-weight: 600;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.legend-dot.vfr { background: var(--vfr); }
.legend-dot.mvfr { background: var(--mvfr); }
.legend-dot.ifr { background: var(--ifr); }
.legend-dot.lifr { background: var(--lifr); }
.legend-dot.nodata { 
    background: #94a3b8; 
    border: 2px dashed #64748b;
    opacity: 0.7;
}

.legend-updated {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--bdr);
    font-size: 9px;
    color: var(--muted);
}

.legend-updated span {
    font-weight: 600;
    color: var(--pri);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .map-legend {
        bottom: 60px;
        right: 5px;
        padding: 8px 10px;
    }
    
    .legend-items {
        gap: 6px;
    }
    
    .legend-item {
        font-size: 9px;
    }
    
    .legend-dot {
        width: 10px;
        height: 10px;
    }
}

/* ==================== LOADING OVERLAY FOR MAP ==================== */
.map-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(2px);
}

.map-loading-overlay.hidden {
    display: none;
}

.map-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bdr);
    border-top-color: var(--pri);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.map-loading-text {
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}

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

/* ==================== IMPROVED TOOLTIP STYLING ==================== */
.icao-tooltip {
    background: rgba(30, 41, 59, 0.95) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3) !important;
    white-space: nowrap !important;
}

.icao-tooltip::before {
    display: none !important;
}

/* Flight category color in tooltip */
.icao-tooltip .cat-vfr { color: #4ade80; }
.icao-tooltip .cat-mvfr { color: #60a5fa; }
.icao-tooltip .cat-ifr { color: #fb923c; }
.icao-tooltip .cat-lifr { color: #f87171; }

/* Leaflet default tooltip override */
.leaflet-tooltip {
    background: rgba(30, 41, 59, 0.95) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3) !important;
}

.leaflet-tooltip-top::before,
.leaflet-tooltip-bottom::before,
.leaflet-tooltip-left::before,
.leaflet-tooltip-right::before {
    border-top-color: rgba(30, 41, 59, 0.95) !important;
}

/* ==================== SVG CIRCLEMARKER HOVER ==================== */
/* SVG path hover effect for CircleMarker */
.leaflet-interactive {
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Individual marker hover - SVG stroke and transform */
.leaflet-interactive:hover {
    stroke-width: 3px !important;
    transform-origin: center;
}

/* Prevent canvas/svg container from affecting all markers */
.leaflet-overlay-pane svg {
    pointer-events: none;
}

.leaflet-overlay-pane svg path {
    pointer-events: auto;
}

/* ==================== CHART STYLES v19.0 ==================== */
.mtg-chart-section {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(30,41,59,0.8) 0%, rgba(15,23,42,0.9) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
}

.mtg-chart-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mtg-svg-chart {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    overflow: hidden;
}

.mtg-chart-legend {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}

.mtg-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--txt);
}

.mtg-chart-legend-color {
    width: 20px;
    height: 6px;
    border-radius: 3px;
}

/* Responsive charts */
@media (max-width: 768px) {
    .mtg-chart-section {
        padding: 12px;
        margin-top: 16px;
    }
    
    .mtg-chart-title {
        font-size: 14px;
    }
    
    .mtg-chart-legend {
        gap: 12px;
    }
    
    .mtg-chart-legend-item {
        font-size: 11px;
    }
}

/* ==================== COMPREHENSIVE HOURLY CHARTS ==================== */
.mtg-charts-comprehensive {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(30,41,59,0.9) 0%, rgba(15,23,42,0.95) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}

.mtg-mini-chart {
    background: rgba(15,23,42,0.8);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}

.mtg-mini-chart-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 8px;
    padding-left: 4px;
}

.mtg-mini-legend {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.mtg-mini-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--muted);
}

.mtg-mini-legend-item span:first-child {
    width: 16px;
    height: 4px;
    border-radius: 2px;
}

/* Cloud chart comprehensive */
.mtg-cloud-charts-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

/* Precip chart comprehensive */
.mtg-precip-charts-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .mtg-charts-comprehensive {
        padding: 10px;
        gap: 12px;
    }
    
    .mtg-mini-chart {
        padding: 8px;
    }
    
    .mtg-mini-chart-title {
        font-size: 11px;
    }
    
    .mtg-mini-legend {
        gap: 8px;
        padding: 6px 8px;
    }
    
    .mtg-mini-legend-item {
        font-size: 9px;
    }
}

/* ==================== COMPREHENSIVE CHARTS TAB STYLES ==================== */
.mtg-charts-page {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.charts-intro {
    text-align: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(139,92,246,0.2) 100%);
    border-radius: 12px;
    margin-bottom: 10px;
}

.charts-intro h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px 0;
}

.charts-intro p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

.chart-box {
    background: linear-gradient(135deg, rgba(30,41,59,0.9) 0%, rgba(15,23,42,0.95) 100%);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.1);
}

.chart-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    padding-left: 4px;
}

.chart-svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.chart-legend {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--txt);
}

.chart-legend-color {
    width: 20px;
    height: 6px;
    border-radius: 3px;
}

@media (max-width: 768px) {
    .mtg-charts-page {
        padding: 12px;
        gap: 14px;
    }
    
    .chart-box {
        padding: 12px;
    }
    
    .chart-title {
        font-size: 13px;
    }
    
    .chart-legend {
        gap: 12px;
        padding: 8px 12px;
    }
    
    .chart-legend-item {
        font-size: 10px;
    }
    
    .charts-intro h3 {
        font-size: 15px;
    }
    
    .charts-intro p {
        font-size: 11px;
    }
}

/* ==================== METEOGRAM STATS PANEL ==================== */
.meteogram-stats-panel {
    background: linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,41,59,0.9) 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.1);
}

.stats-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.stats-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.stat-card {
    background: rgba(30,41,59,0.8);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.stat-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bdr);
}

.stat-icon {
    font-size: 16px;
}

.stat-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.stat-row span:first-child {
    color: var(--muted);
}

.stat-row strong {
    color: var(--txt);
    font-weight: 600;
}

.stat-row strong.hot { color: #ef4444; }
.stat-row strong.cold { color: #60a5fa; }
.stat-row strong.precip { color: #3b82f6; }
.stat-row strong.gust { color: #f59e0b; }
.stat-row strong.comfort { color: #22c55e; }
.stat-row strong.trend { color: #8b5cf6; }
.stat-row strong.uv-high { color: #f97316; }
.stat-row strong.small { font-size: 10px; }

/* Card Colors */
.temp-card { border-left: 3px solid #ef4444; }
.precip-card { border-left: 3px solid #3b82f6; }
.wind-card { border-left: 3px solid #22c55e; }
.humidity-card { border-left: 3px solid #06b6d4; }
.pressure-card { border-left: 3px solid #8b5cf6; }
.cloud-card { border-left: 3px solid #64748b; }
.uv-card { border-left: 3px solid #f59e0b; }
.vis-card { border-left: 3px solid var(--pri); }
.cape-card { border-left: 3px solid #ef4444; }
.alerts-card { 
    border-left: 3px solid #f59e0b; 
    grid-column: span 2;
}

.alerts-body {
    font-size: 13px;
    line-height: 1.8;
    color: var(--txt);
}

/* AI ANALYSIS SECTION */
.ai-analysis-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AI FLIGHT ANALYSIS - PROFESSIONAL LIGHT MODE DESIGN
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Container */
.ai-analysis-page {
    padding: 0;
    min-height: 100%;
    background: var(--bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.ai-header {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 50%, #0ea5e9 100%);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.ai-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L35 15H25L30 5z' fill='%23fff' fill-opacity='0.05'/%3E%3C/svg%3E") repeat;
    opacity: 0.5;
}

.ai-header-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.ai-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-header-icon {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.ai-header-icon svg {
    width: 26px;
    height: 26px;
    color: #fff;
    stroke: #fff;
}

.ai-header-text h2 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 2px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.ai-header-text p {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    margin: 0;
}

.ai-header-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Language Selector */
.ai-lang-selector {
    background: var(--card);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--bdr);
}

.ai-lang-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    background: var(--card-alt);
    border: 1px solid var(--bdr);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-lang-btn:hover {
    background: var(--bdr);
    color: var(--txt);
}

.ai-lang-btn.active {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* Disclaimer Banner */
.ai-disclaimer {
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #92400e;
    border-bottom: 1px solid #fcd34d;
}

.ai-disclaimer-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.ai-disclaimer strong {
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════════════════════════════════════════════ */

.ai-content {
    padding: 20px;
}

/* Loading State */
.ai-loading-state {
    background: var(--card);
    border-radius: 16px;
    padding: 60px 20px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.ai-loading-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    position: relative;
}

.ai-loading-spinner::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #0ea5e9;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: aiPlane 2s ease-in-out infinite;
}

.ai-loading-spinner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid var(--bdr);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: aiSpin 1s linear infinite;
}

@keyframes aiPlane {
    0%, 100% { transform: translate(-50%, -50%) rotate(-10deg); }
    50% { transform: translate(-50%, -60%) rotate(10deg); }
}

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

.ai-loading-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--txt);
    margin: 0 0 4px 0;
}

.ai-loading-sub {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

/* Error State */
.ai-error-state {
    background: var(--card);
    border: 2px solid #fecaca;
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}

.ai-error-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.ai-error-state h4 {
    font-size: 18px;
    font-weight: 700;
    color: #dc2626;
    margin: 0 0 8px 0;
}

.ai-error-state p {
    font-size: 13px;
    color: #991b1b;
    margin: 0 0 16px 0;
}

.ai-retry-btn {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-retry-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESULT SECTIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.ai-result {
    animation: aiFadeIn 0.4s ease;
}

@keyframes aiFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Section Card */
.ai-section {
    background: var(--card);
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid var(--bdr);
}

.ai-section-header {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 100%);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ai-section-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ai-section-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.3px;
}

.ai-section-body {
    padding: 20px 24px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--txt);
}

.ai-section-body p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--txt);
    margin: 0 0 16px 0;
}

.ai-section-body strong {
    color: var(--txt);
    font-weight: 700;
}

.ai-section-body h3,
.ai-section-body h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--txt);
    margin: 24px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bdr);
}

.ai-section-body ul {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.ai-section-body li {
    position: relative;
    padding: 12px 0 12px 32px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--txt);
    border-bottom: 1px solid var(--bdr);
}

.ai-section-body li:last-child {
    border-bottom: none;
}

.ai-section-body li::before {
    content: '▸';
    position: absolute;
    left: 8px;
    color: #2563eb;
    font-size: 16px;
    font-weight: bold;
}

/* Flight Category Badges */
.fc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fc-badge.vfr {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

.fc-badge.mvfr {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

.fc-badge.ifr {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.fc-badge.lifr {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

/* Status Icons */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
}

.status-icon.go {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

.status-icon.caution {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.status-icon.nogo {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

/* Time Block Grid */
.ai-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.ai-time-card {
    background: var(--card-alt);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.ai-time-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

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

.ai-time-period {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--txt);
}

.ai-time-period-icon {
    font-size: 16px;
}

.ai-time-body {
    padding: 12px 14px;
}

.ai-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--bdr);
}

.ai-time-row:last-child {
    border-bottom: none;
}

.ai-time-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
}

.ai-time-value {
    font-weight: 600;
    color: var(--txt);
}

.ai-time-footer {
    padding: 10px 14px;
    background: var(--card-alt);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-time-reason {
    font-size: 11px;
    color: var(--muted);
    flex: 1;
}

/* Data Table */
.ai-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    margin: 20px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ai-data-table thead {
    position: sticky;
    top: 0;
}

.ai-data-table th {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 100%);
    color: var(--txt);
    font-weight: 600;
    padding: 14px 12px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-data-table th:first-child {
    border-radius: 12px 0 0 0;
    text-align: left;
    padding-left: 16px;
}

.ai-data-table th:last-child {
    border-radius: 0 12px 0 0;
}

.ai-data-table td {
    padding: 14px 12px;
    text-align: center;
    border-bottom: 1px solid var(--bdr);
    color: var(--txt);
    font-size: 14px;
}

.ai-data-table td:first-child {
    text-align: left;
    padding-left: 16px;
    font-weight: 600;
    color: var(--txt);
    background: var(--card-alt);
}

.ai-data-table tbody tr:hover {
    background: #eff6ff;
}

.ai-data-table tbody tr:hover td:first-child {
    background: #dbeafe;
}

.ai-data-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 12px;
}

.ai-data-table tbody tr:last-child td:last-child {
    border-radius: 0 0 12px 0;
}

/* Info Cards */
.ai-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.ai-info-card {
    background: var(--card-alt);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.ai-info-card-icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.ai-info-card-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.ai-info-card-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
}

.ai-info-card-sub {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
}

/* Alternate Airports */
.ai-alternate-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-alternate-card {
    background: var(--card-alt);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-alternate-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.ai-alternate-info {
    flex: 1;
    min-width: 0;
}

.ai-alternate-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--txt);
    margin: 0 0 2px 0;
}

.ai-alternate-detail {
    font-size: 11px;
    color: var(--muted);
    margin: 0;
}

.ai-alternate-status {
    flex-shrink: 0;
}

/* Recommendation Box */
.ai-recommendation {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
}

.ai-recommendation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ai-recommendation-icon {
    font-size: 24px;
}

.ai-recommendation-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e40af;
    margin: 0;
}

.ai-recommendation-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ai-recommendation-list li {
    position: relative;
    padding: 8px 0 8px 24px;
    font-size: 13px;
    color: #1e40af;
    border-bottom: 1px solid rgba(37, 99, 235, 0.1);
}

.ai-recommendation-list li:last-child {
    border-bottom: none;
}

.ai-recommendation-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #2563eb;
    font-weight: bold;
}

/* Paragraph Content */
.ai-section-body p {
    font-size: 13px;
    color: var(--txt);
    line-height: 1.7;
    margin: 0 0 12px 0;
}

.ai-section-body p:last-child {
    margin-bottom: 0;
}

.ai-section-body strong {
    color: var(--txt);
    font-weight: 600;
}

.ai-section-body ul {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

.ai-section-body li {
    position: relative;
    padding: 8px 0 8px 28px;
    font-size: 13px;
    color: var(--txt);
    border-bottom: 1px solid var(--bdr);
}

.ai-section-body li:last-child {
    border-bottom: none;
}

.ai-section-body li::before {
    content: '▸';
    position: absolute;
    left: 8px;
    color: #2563eb;
}

/* Result Header */
.ai-result-header {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 50%, #0ea5e9 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    text-align: center;
    color: #fff;
}

.ai-result-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.ai-result-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.ai-result-time {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    margin: 0;
}

/* Refresh Button */
.ai-refresh-section {
    text-align: center;
    padding: 24px;
    background: var(--card);
    border-radius: 16px;
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.ai-refresh-btn {
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ai-refresh-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ai-header {
        padding: 16px;
    }
    
    .ai-header-content {
        flex-direction: column;
        text-align: center;
    }
    
    .ai-header-left {
        flex-direction: column;
    }
    
    .ai-header-text h2 {
        font-size: 16px;
    }
    
    .ai-content {
        padding: 12px;
    }
    
    .ai-time-grid {
        grid-template-columns: 1fr;
    }
    
    .ai-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ai-data-table {
        font-size: 10px;
    }
    
    .ai-data-table th,
    .ai-data-table td {
        padding: 8px 4px;
    }
    
    .ai-alternate-card {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .ai-lang-btn {
        padding: 5px 10px;
        font-size: 10px;
    }
    
    .ai-section-header {
        padding: 12px;
    }
    
    .ai-section-title {
        font-size: 13px;
    }
    
    .ai-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .ai-info-card {
        padding: 10px;
    }
    
    .ai-info-card-value {
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEW CHARTS PAGE STYLES (2 Tables + 12 Charts)
   ═══════════════════════════════════════════════════════════════════════════ */

.charts-new-page {
    padding: 16px;
    background: var(--card-alt);
}

.charts-section-header {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 100%);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}

.charts-section-header h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Aviation Tables */
.chart-table-container {
    background: var(--card);
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid var(--bdr);
}

.table-title {
    background: linear-gradient(135deg, var(--bg) 0%, var(--card-alt) 100%);
    color: var(--txt);
    font-size: 16px;
    font-weight: 700;
    padding: 16px 20px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-scroll {
    overflow-x: auto;
    max-height: 500px;
    overflow-y: auto;
}

.aviation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 900px;
}

.aviation-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.aviation-table th {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 100%);
    color: var(--txt);
    font-weight: 600;
    padding: 14px 12px;
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
    border-bottom: 2px solid var(--bg);
}

.aviation-table th.sticky-col {
    position: sticky;
    left: 0;
    z-index: 15;
    text-align: left;
    min-width: 100px;
}

.aviation-table td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid var(--bdr);
    font-size: 14px;
    color: var(--txt);
    white-space: nowrap;
}

.aviation-table td.sticky-col {
    position: sticky;
    left: 0;
    background: var(--card-alt);
    font-weight: 600;
    color: var(--txt);
    text-align: left;
    border-right: 2px solid var(--bdr);
    z-index: 5;
}

.aviation-table tbody tr:nth-child(even) {
    background: var(--card-alt);
}

.aviation-table tbody tr:nth-child(even) td.sticky-col {
    background: var(--card-alt);
}

.aviation-table tbody tr:hover {
    background: #eff6ff;
}

.aviation-table tbody tr:hover td.sticky-col {
    background: #dbeafe;
}

/* Category Badges */
.cat-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cat-badge.vfr {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.cat-badge.mvfr {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

.cat-badge.ifr {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.cat-badge.lifr {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

/* Risk Badges */
.risk-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.risk-badge.risk-low {
    background: #dcfce7;
    color: #166534;
}

.risk-badge.risk-mod {
    background: #fef3c7;
    color: #92400e;
}

.risk-badge.risk-high {
    background: #fee2e2;
    color: #991b1b;
}

.risk-badge.risk-severe {
    background: #f3e8ff;
    color: #6b21a8;
}

/* Spread Warning */
.spread-warn {
    background: #fef3c7 !important;
    color: #92400e;
    font-weight: 600;
}

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.new-chart-container {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid var(--bdr);
}

.new-chart-title {
    background: linear-gradient(135deg, var(--bg) 0%, var(--card-alt) 100%);
    color: var(--txt);
    font-size: 14px;
    font-weight: 700;
    padding: 14px 18px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.new-chart-body {
    padding: 16px;
    height: 280px;
    position: relative;
}

.new-chart-body canvas {
    width: 100% !important;
    height: 100% !important;
}

.new-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 1200px) {
    .charts-grid {
        grid-template-columns: 1fr;
    }
    .svg-charts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .charts-new-page {
        padding: 12px;
    }
    
    .charts-section-header {
        padding: 16px;
    }
    
    .charts-section-header h2 {
        font-size: 16px;
    }
    
    .table-title {
        font-size: 14px;
        padding: 12px 16px;
    }
    
    .aviation-table {
        font-size: 12px;
    }
    
    .aviation-table th,
    .aviation-table td {
        padding: 10px 8px;
    }
    
    .new-chart-body {
        height: 220px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEW CHARTS PAGE - MINIMALIST LIGHT MODE
   ═══════════════════════════════════════════════════════════════════════════ */

.charts-page {
    padding: 12px;
    background: var(--card-alt);
    min-height: 100%;
}

.chart-section {
    background: var(--card);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}

.section-header {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 100%);
    color: var(--txt);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header span {
    font-size: 16px;
}

/* Master Chart */
.master-chart-box {
    padding: 12px;
    height: 280px;
}

.master-chart-box canvas {
    width: 100% !important;
    height: 100% !important;
}

.master-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
}

.master-legend .leg {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--muted);
}

.master-legend .leg i {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}

/* Data Tables */
.table-scroll {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

.chart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 480px;
}

.chart-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.chart-table th {
    background: var(--card-alt);
    color: var(--muted);
    font-weight: 600;
    padding: 10px 8px;
    text-align: center;
    font-size: 11px;
    border-bottom: 1px solid var(--bdr);
    white-space: nowrap;
}

.chart-table th:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--card-alt);
    z-index: 10;
}

.chart-table td {
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--bdr);
    font-size: 12px;
    color: var(--txt);
    white-space: nowrap;
}

.chart-table .td-time {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--card);
    z-index: 3;
    font-size: 10px;
    line-height: 1.3;
    min-width: 70px;
}

.chart-table tr:nth-child(even) .td-time {
    background: #fafbfc;
}

.chart-table tr:nth-child(even) td {
    background: #fafbfc;
}

.chart-table tr:hover td {
    background: var(--card-alt);
}

/* Flight Category Pills */
.chart-table .cat {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.chart-table .cat.vfr { background: #dcfce7; color: #166534; }
.chart-table .cat.mvfr { background: #dbeafe; color: #1e40af; }
.chart-table .cat.ifr { background: #fef3c7; color: #92400e; }
.chart-table .cat.lifr { background: #fee2e2; color: #991b1b; }

/* Risk Pills */
.chart-table .risk {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 600;
}

.chart-table .risk.sev { background: #fce7f3; color: #9d174d; }
.chart-table .risk.mod { background: #fef3c7; color: #92400e; }
.chart-table .risk.lgt { background: #ecfdf5; color: #065f46; }

/* Warnings */
.chart-table .cold { color: #3b82f6; font-weight: 600; }
.chart-table .warn { background: #fef3c7; }

/* Mini Charts Grid */
.mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 12px;
}

.mini-box {
    background: var(--card);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--bdr);
}

.mini-title {
    background: var(--card-alt);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bdr);
}

.mini-canvas {
    height: 80px;
    padding: 6px;
}

.mini-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .charts-page {
        padding: 8px;
    }
    
    .section-header {
        font-size: 12px;
        padding: 10px 12px;
    }
    
    .master-chart-box {
        height: 200px;
        padding: 8px;
    }
    
    .master-legend {
        gap: 8px;
        padding: 8px 12px;
    }
    
    .master-legend .leg {
        font-size: 10px;
    }
    
    .chart-table {
        font-size: 11px;
    }
    
    .chart-table th,
    .chart-table td {
        padding: 6px 4px;
    }
    
    .chart-table th {
        font-size: 10px;
    }
    
    .mini-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px;
    }
    
    .mini-title {
        font-size: 10px;
        padding: 6px 8px;
    }
    
    .mini-canvas {
        height: 60px;
        padding: 4px;
    }
}

@media (max-width: 400px) {
    .mini-grid {
        grid-template-columns: 1fr;
    }
    
    .mini-canvas {
        height: 80px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHARTS PAGE V2 - MINIMALIST MOBILE-FRIENDLY LIGHT MODE
   ═══════════════════════════════════════════════════════════════════════════ */

.cp {
    padding: 10px;
    background: var(--card-alt);
}

.cp-sec {
    background: var(--card);
    border-radius: 10px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
}

.cp-hdr {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 100%);
    color: var(--txt);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
}

.cp-body {
    padding: 8px;
}

/* Master SVG Chart */
.ms-svg {
    width: 100%;
    height: auto;
    display: block;
}

.ms-leg {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 8px;
    flex-wrap: wrap;
}

.ms-leg span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--muted);
}

.ms-leg i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* Tables */
.cp-tbl-wrap {
    overflow-x: auto;
    max-height: 320px;
    overflow-y: auto;
}

.cp-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    min-width: 420px;
}

.cp-tbl thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.cp-tbl th {
    background: var(--card-alt);
    color: var(--muted);
    font-weight: 600;
    padding: 7px 5px;
    text-align: center;
    font-size: 10px;
    border-bottom: 1px solid var(--bdr);
    white-space: nowrap;
}

.cp-tbl th:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--card-alt);
    z-index: 10;
}

.cp-tbl td {
    padding: 5px 4px;
    text-align: center;
    border-bottom: 1px solid var(--bdr);
    font-size: 11px;
    color: var(--txt);
    white-space: nowrap;
}

.cp-tbl td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--card);
    z-index: 3;
    font-size: 10px;
}

.cp-tbl tr.nd td {
    border-top: 2px solid var(--bdr);
}

.cp-tbl tr.nd td:first-child {
    background: var(--card-alt);
}

.cp-tbl tr:hover td {
    background: var(--card-alt);
}

.cp-tbl tr:hover td:first-child {
    background: var(--card-alt);
}

/* Category badges */
.cp-tbl .cat {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
}

.cp-tbl .cat.vfr { background: #dcfce7; color: #166534; }
.cp-tbl .cat.mvfr { background: #dbeafe; color: #1e40af; }
.cp-tbl .cat.ifr { background: #fef3c7; color: #92400e; }
.cp-tbl .cat.lifr { background: #fee2e2; color: #991b1b; }

/* Risk badges */
.cp-tbl .rsk {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 8px;
    font-weight: 600;
}

.cp-tbl .rsk.sev { background: #fce7f3; color: #9d174d; }
.cp-tbl .rsk.mod { background: #fef3c7; color: #92400e; }
.cp-tbl .rsk.lgt { background: #ecfdf5; color: #065f46; }

/* Cell styles */
.cp-tbl .cold { color: #3b82f6; }
.cp-tbl .warn { background: #fef3c7; }

/* Mini Charts Grid */
.cp-charts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    padding: 8px;
}

.mc {
    background: var(--card);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--bdr);
}

.mc-t {
    background: var(--card-alt);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    padding: 5px 8px;
    border-bottom: 1px solid var(--bdr);
}

.mc svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .cp {
        padding: 6px;
    }
    
    .cp-hdr {
        font-size: 12px;
        padding: 8px 10px;
    }
    
    .cp-tbl {
        font-size: 10px;
    }
    
    .cp-tbl th,
    .cp-tbl td {
        padding: 4px 3px;
    }
    
    .cp-charts {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 6px;
    }
    
    .mc-t {
        font-size: 9px;
        padding: 4px 6px;
    }
    
    .ms-leg {
        gap: 8px;
    }
    
    .ms-leg span {
        font-size: 9px;
    }
}

@media (max-width: 360px) {
    .cp-charts {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BIG CHARTS - LARGE READABLE DAY BY DAY HOUR BY HOUR
   ═══════════════════════════════════════════════════════════════════════════ */

.big-charts {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.big-chart {
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--bdr);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.big-chart-title {
    background: var(--card-alt);
    color: var(--txt);
    font-size: 15px;
    font-weight: 700;
    padding: 14px 18px;
    border-bottom: 1px solid var(--bdr);
}

.big-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

.big-chart-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 12px 16px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
}

.big-chart-legend .leg-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}

.big-chart-legend .leg-line {
    width: 24px;
    height: 4px;
    border-radius: 2px;
    display: inline-block;
}

/* Mobile Responsive for Big Charts */
@media (max-width: 768px) {
    .big-charts {
        padding: 8px;
        gap: 12px;
    }
    
    .big-chart-title {
        font-size: 13px;
        padding: 10px 12px;
    }
    
    .big-chart-legend {
        gap: 12px;
        padding: 10px 12px;
    }
    
    .big-chart-legend .leg-item {
        font-size: 11px;
        gap: 6px;
    }
    
    .big-chart-legend .leg-line {
        width: 18px;
        height: 3px;
    }
}

@media (max-width: 480px) {
    .big-chart-title {
        font-size: 12px;
        padding: 8px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEGA CHARTS - AVIATION WEATHER & CALCULATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.mega-chart {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--bdr);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.mega-chart-title {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 100%);
    color: var(--txt);
    font-size: 16px;
    font-weight: 700;
    padding: 16px 20px;
}

.mega-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

.mega-chart-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 20px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
}

.mega-chart-legend .leg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

.mega-chart-legend .leg i {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    display: inline-block;
}

.mega-chart-legend .cat-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.mega-chart-legend .cat-dot.vfr { background: #22c55e; }
.mega-chart-legend .cat-dot.mvfr { background: #3b82f6; }
.mega-chart-legend .cat-dot.ifr { background: #f59e0b; }
.mega-chart-legend .cat-dot.lifr { background: #ef4444; }

.mega-chart-legend .risk-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.mega-chart-legend .risk-dot.sev { background: #ef4444; }
.mega-chart-legend .risk-dot.mod { background: #f59e0b; }
.mega-chart-legend .risk-dot.lgt { background: #22c55e; }

/* Mobile Responsive for Mega Charts */
@media (max-width: 768px) {
    .mega-chart-title {
        font-size: 14px;
        padding: 12px 14px;
    }
    
    .mega-chart-legend {
        gap: 10px;
        padding: 10px 12px;
    }
    
    .mega-chart-legend .leg {
        font-size: 10px;
        gap: 4px;
    }
    
    .mega-chart-legend .leg i {
        width: 12px;
        height: 3px;
    }
    
    .mega-chart-legend .cat-dot,
    .mega-chart-legend .risk-dot {
        width: 10px;
        height: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEGA CHARTS V2 - REDESIGNED AVIATION CHARTS
   ═══════════════════════════════════════════════════════════════════════════ */

.mega-chart.aviation,
.mega-chart.risk {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--bdr);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.mega-title {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 100%);
    color: var(--txt);
    font-size: 18px;
    font-weight: 700;
    padding: 16px 24px 8px;
}

.mega-subtitle {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 100%);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    padding: 0 24px 16px;
}

.mega-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Legend */
.mega-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px 24px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
}

.mega-legend .leg-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mega-legend .leg-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mega-legend .leg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

.mega-legend .leg .dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
}

.mega-legend .leg .dot.vfr { background: #22c55e; }
.mega-legend .leg .dot.mvfr { background: #3b82f6; }
.mega-legend .leg .dot.ifr { background: #f59e0b; }
.mega-legend .leg .dot.lifr { background: #ef4444; }
.mega-legend .leg .dot.sev { background: #dc2626; }
.mega-legend .leg .dot.mod { background: #f59e0b; }
.mega-legend .leg .dot.lgt { background: #84cc16; }
.mega-legend .leg .dot.none { background: #e2e8f0; }

.mega-legend .leg .line {
    width: 20px;
    height: 4px;
    border-radius: 2px;
    display: inline-block;
}

.mega-legend .leg .line.temp { background: linear-gradient(90deg, #ef4444, #f97316); }
.mega-legend .leg .line.dew { background: #3b82f6; border-style: dashed; height: 2px; }
.mega-legend .leg .line.wind { background: #22c55e; }
.mega-legend .leg .line.gust { background: #f97316; border-style: dashed; height: 2px; }
.mega-legend .leg .line.vis { background: #06b6d4; }
.mega-legend .leg .line.da { background: linear-gradient(90deg, #8b5cf6, #a855f7); }
.mega-legend .leg .line.spread { background: #f59e0b; }
.mega-legend .leg .line.frz { background: #06b6d4; border-style: dashed; height: 2px; }
.mega-legend .leg .line.shear { background: #ec4899; border-style: dashed; height: 2px; }

.mega-legend .leg .area {
    width: 20px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.mega-legend .leg .area.cloud { background: rgba(148,163,184,0.3); }

.mega-legend .leg .bar {
    width: 8px;
    height: 16px;
    border-radius: 2px;
    display: inline-block;
}

.mega-legend .leg .bar.rain { background: #3b82f6; }
.mega-legend .leg .bar.snow { background: #06b6d4; }
.mega-legend .leg .bar.shower { background: #8b5cf6; }
.mega-legend .leg .bar.cape { background: linear-gradient(180deg, #7c3aed 0%, #22c55e 100%); }

/* Mobile Responsive */
@media (max-width: 768px) {
    .mega-chart.aviation,
    .mega-chart.risk {
        margin-bottom: 16px;
        border-radius: 12px;
    }
    
    .mega-title {
        font-size: 15px;
        padding: 12px 16px 6px;
    }
    
    .mega-subtitle {
        font-size: 10px;
        padding: 0 16px 12px;
    }
    
    .mega-legend {
        gap: 12px;
        padding: 12px 16px;
    }
    
    .mega-legend .leg-group {
        gap: 8px;
    }
    
    .mega-legend .leg-title {
        font-size: 10px;
    }
    
    .mega-legend .leg {
        font-size: 10px;
        gap: 4px;
    }
    
    .mega-legend .leg .dot {
        width: 10px;
        height: 10px;
    }
    
    .mega-legend .leg .line {
        width: 14px;
        height: 3px;
    }
    
    .mega-legend .leg .bar {
        width: 6px;
        height: 12px;
    }
}

@media (max-width: 480px) {
    .mega-title {
        font-size: 14px;
        padding: 10px 12px 4px;
    }
    
    .mega-subtitle {
        font-size: 9px;
        padding: 0 12px 10px;
    }
    
    .mega-legend {
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
    }
    
    .mega-legend .leg-group {
        justify-content: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVIATION CHARTS V3 - INTERACTIVE, TOGGLEABLE, DAY SELECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.av-charts {
    background: var(--card-alt);
    padding: 16px;
    min-height: 100%;
}

/* Section Container */
.av-section {
    background: var(--card);
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    overflow: hidden;
}

.av-header {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 100%);
    color: var(--txt);
    font-size: 16px;
    font-weight: 700;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.av-icon {
    font-size: 20px;
}

.av-content {
    padding: 16px;
}

/* Flight Category Timeline */
.cat-timeline {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.cat-block {
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    transition: all 0.2s;
}

.cat-block:hover {
    filter: brightness(1.1);
}

.cat-block.vfr { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.cat-block.mvfr { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.cat-block.ifr { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.cat-block.lifr { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

.cat-label {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.cat-time {
    font-size: 9px;
    color: rgba(255,255,255,0.8);
    margin-top: 4px;
    text-align: center;
}

/* Day Cards */
.day-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}

.day-card {
    background: var(--card-alt);
    border: 2px solid var(--bdr);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.day-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border-color: #3b82f6;
}

.day-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
}

.day-date {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 8px;
}

.day-cat {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.day-cat.vfr { background: #22c55e; }
.day-cat.mvfr { background: #3b82f6; }
.day-cat.ifr { background: #f59e0b; }
.day-cat.lifr { background: #ef4444; }

.day-temp {
    font-size: 14px;
    font-weight: 700;
    color: #ef4444;
    margin-bottom: 4px;
}

.day-wind {
    font-size: 11px;
    color: #22c55e;
    font-weight: 600;
}

.day-precip {
    font-size: 10px;
    color: #3b82f6;
    margin-top: 4px;
}

/* Risk Bars */
.risk-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.risk-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.risk-name {
    width: 120px;
    font-size: 12px;
    font-weight: 600;
    color: var(--txt);
    flex-shrink: 0;
}

.risk-bar {
    flex: 1;
    display: flex;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.risk-cell {
    flex: 1;
    min-width: 2px;
}

.risk-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.risk-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
}

.risk-legend i {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.risk-legend i.sev { background: #dc2626; }
.risk-legend i.mod { background: #f59e0b; }
.risk-legend i.lgt { background: #84cc16; }
.risk-legend i.none { background: #e5e7eb; }

/* Chart Toggles */
.chart-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.toggle-btn {
    padding: 8px 14px;
    border: 2px solid var(--bdr);
    border-radius: 10px;
    background: var(--card);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn:hover {
    border-color: var(--clr);
    color: var(--clr);
}

.toggle-btn.active {
    background: var(--clr);
    border-color: var(--clr);
    color: #fff;
}

/* Chart Container */
.chart-container {
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.av-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Day Detail Modal */
.day-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.day-detail-modal.open {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--card);
    border-radius: 20px;
    width: 95%;
    max-width: 700px;
    max-height: 85vh;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s;
}

.day-detail-modal.open .modal-content {
    transform: scale(1);
}

.modal-header {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 100%);
    color: var(--txt);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
}

.modal-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.modal-close:hover {
    background: rgba(255,255,255,0.3);
}

.modal-body {
    padding: 16px;
    max-height: calc(85vh - 70px);
    overflow-y: auto;
}

/* Hourly Table in Modal */
.hourly-table {
    overflow-x: auto;
}

.hourly-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.hourly-table th {
    background: var(--card-alt);
    padding: 10px 8px;
    text-align: center;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 2px solid var(--bdr);
    white-space: nowrap;
}

.hourly-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--bdr);
    color: var(--txt);
}

.hourly-table tr:hover td {
    background: var(--card-alt);
}

.hourly-table .cat {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.hourly-table .cat.vfr { background: #22c55e; }
.hourly-table .cat.mvfr { background: #3b82f6; }
.hourly-table .cat.ifr { background: #f59e0b; }
.hourly-table .cat.lifr { background: #ef4444; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .av-charts {
        padding: 10px;
    }
    
    .av-section {
        margin-bottom: 14px;
        border-radius: 12px;
    }
    
    .av-header {
        font-size: 14px;
        padding: 12px 14px;
    }
    
    .av-content {
        padding: 12px;
    }
    
    .cat-timeline {
        flex-wrap: wrap;
    }
    
    .cat-block {
        padding: 10px 6px;
        min-width: 50px;
    }
    
    .cat-label {
        font-size: 12px;
    }
    
    .cat-time {
        font-size: 8px;
    }
    
    .day-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .day-card {
        padding: 10px 6px;
        border-radius: 10px;
    }
    
    .day-name {
        font-size: 11px;
    }
    
    .day-date {
        font-size: 9px;
    }
    
    .day-cat {
        padding: 3px 6px;
        font-size: 9px;
    }
    
    .day-temp {
        font-size: 12px;
    }
    
    .day-wind {
        font-size: 9px;
    }
    
    .risk-name {
        width: 90px;
        font-size: 10px;
    }
    
    .risk-bar {
        height: 18px;
    }
    
    .risk-legend {
        gap: 12px;
    }
    
    .risk-legend span {
        font-size: 10px;
    }
    
    .chart-toggles {
        gap: 6px;
    }
    
    .toggle-btn {
        padding: 6px 10px;
        font-size: 10px;
        border-radius: 8px;
    }
    
    .modal-content {
        width: 98%;
        border-radius: 14px;
    }
    
    .hourly-table th,
    .hourly-table td {
        padding: 8px 6px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .day-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .risk-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    
    .risk-name {
        width: 100%;
    }
    
    .toggle-btn {
        padding: 5px 8px;
        font-size: 9px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHARTS NEW PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.charts-new-page {
    padding: 12px;
    background: var(--card-alt);
}

.big-charts-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.big-svg-chart {
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--bdr);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.big-svg-title {
    background: var(--card-alt);
    color: var(--txt);
    font-size: 14px;
    font-weight: 700;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bdr);
}

.big-svg-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

.big-svg-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 16px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
}

.big-svg-legend .leg-i {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

.big-svg-legend .leg-l {
    width: 18px;
    height: 4px;
    border-radius: 2px;
    display: inline-block;
}

/* Mega chart precip styles */
.mega-chart.precip {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--bdr);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.mega-legend .leg .line.prob {
    background: #06b6d4;
}

.mega-legend .leg .area.prob {
    background: rgba(6,182,212,0.3);
    width: 20px;
    height: 12px;
    border-radius: 3px;
}

/* Mobile */
@media (max-width: 768px) {
    .charts-new-page {
        padding: 8px;
    }
    
    .big-charts-grid {
        gap: 12px;
    }
    
    .big-svg-title {
        font-size: 13px;
        padding: 10px 12px;
    }
    
    .big-svg-legend {
        gap: 10px;
        padding: 8px 12px;
    }
    
    .big-svg-legend .leg-i {
        font-size: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVIATION WEATHER TABLE
   ═══════════════════════════════════════════════════════════════════════════ */

.av-weather-table-wrap {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--bdr);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.av-table-header {
    background: linear-gradient(135deg, var(--bg) 0%, var(--pri) 100%);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.av-table-header h3 {
    color: var(--txt);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.av-table-units {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.av-table-scroll {
    overflow-x: auto;
    max-height: 500px;
    overflow-y: auto;
}

.av-weather-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.av-weather-table th {
    background: var(--card-alt);
    color: var(--muted);
    font-weight: 700;
    padding: 10px 8px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 2px solid var(--bdr);
    white-space: nowrap;
}

.av-weather-table th.sticky-col {
    left: 0;
    z-index: 20;
    background: var(--bdr);
}

.av-weather-table td {
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--bdr);
    white-space: nowrap;
}

.av-weather-table td.sticky-col {
    position: sticky;
    left: 0;
    background: var(--card);
    z-index: 5;
    font-weight: 600;
    border-right: 2px solid var(--bdr);
}

.av-weather-table tr:hover td {
    background: var(--card-alt);
}

.av-weather-table tr:hover td.sticky-col {
    background: var(--card-alt);
}

.av-weather-table .day-sep td {
    background: var(--card) !important;
    color: var(--txt);
    font-weight: 700;
    padding: 8px 12px;
    text-align: left;
}

.av-weather-table .cat-col {
    font-weight: 700;
    border-radius: 4px;
    padding: 4px 8px;
}

.av-weather-table .cat-col.vfr { background: #dcfce7; color: #166534; }
.av-weather-table .cat-col.mvfr { background: #dbeafe; color: #1e40af; }
.av-weather-table .cat-col.ifr { background: #fef3c7; color: #92400e; }
.av-weather-table .cat-col.lifr { background: #fee2e2; color: #991b1b; }

.av-weather-table .fog-warn { background: #fef3c7; color: #92400e; font-weight: 600; }
.av-weather-table .fog-caution { background: #fefce8; color: #a16207; }
.av-weather-table .gust-high { background: #fee2e2; color: #991b1b; font-weight: 600; }
.av-weather-table .gust-mod { background: #fef3c7; color: #92400e; }
.av-weather-table .prob-high { background: #dbeafe; color: #1e40af; font-weight: 600; }
.av-weather-table .prob-mod { background: #e0f2fe; color: #0369a1; }

.av-weather-table .dir-col {
    font-family: monospace;
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTIVE WEATHER CHART
   ═══════════════════════════════════════════════════════════════════════════ */

.mega-chart.interactive {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--bdr);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.interactive-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
}

.interactive-legend .leg-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.interactive-legend .leg-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    margin-right: 4px;
}

.interactive-legend .leg-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid var(--bdr);
    border-radius: 20px;
    background: var(--card);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.interactive-legend .leg-btn:hover {
    border-color: var(--muted);
    background: var(--hover);
}

.interactive-legend .leg-btn.active {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1e40af;
}

.interactive-legend .leg-btn:not(.active) {
    opacity: 0.5;
}

.interactive-legend .leg-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
}

.interactive-legend .leg-color.line {
    height: 4px;
    border-radius: 2px;
}

.interactive-legend .leg-color.dashed {
    background: repeating-linear-gradient(90deg, currentColor 0, currentColor 4px, transparent 4px, transparent 8px) !important;
}

/* Data layer visibility */
.data-layer {
    transition: opacity 0.3s ease;
}

/* Mobile */
@media (max-width: 768px) {
    .av-table-header {
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
    }
    
    .av-table-header h3 {
        font-size: 16px;
    }
    
    .av-weather-table {
        font-size: 11px;
    }
    
    .av-weather-table th,
    .av-weather-table td {
        padding: 6px 4px;
    }
    
    .interactive-legend {
        padding: 12px 16px;
        gap: 10px;
    }
    
    .interactive-legend .leg-section {
        gap: 6px;
    }
    
    .interactive-legend .leg-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .interactive-legend .leg-color {
        width: 12px;
        height: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORM CHART STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.mega-chart.storm {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--bdr);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.mega-legend.interactive {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
}

.mega-legend.interactive .leg.toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid var(--bdr);
    border-radius: 20px;
    background: var(--card);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mega-legend.interactive .leg.toggle:hover {
    border-color: var(--muted);
    background: var(--hover);
}

.mega-legend.interactive .leg.toggle.active {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1e40af;
}

.mega-legend.interactive .leg.toggle:not(.active) {
    opacity: 0.5;
}

.mega-legend .area.cloudL { background: rgba(100,116,139,0.5); }
.mega-legend .area.cloudM { background: rgba(71,85,105,0.4); }
.mega-legend .area.cloudH { background: rgba(148,163,184,0.3); }
.mega-legend .line.ceil { background: #f59e0b; }
.mega-legend .line.frz { background: #ef4444; }
.mega-legend .bar.cape { background: linear-gradient(90deg,#22c55e,#eab308,#ef4444,#7c3aed); }

/* Chart layer visibility */
.chart-layer {
    transition: opacity 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENHANCED AVIATION TABLE
   ═══════════════════════════════════════════════════════════════════════════ */

.av-weather-table-wrap {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--bdr);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.av-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 600px;
}

.av-weather-table {
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

.av-weather-table th,
.av-weather-table td {
    padding: 8px 10px;
    text-align: center;
    border: 1px solid var(--bdr);
}

.av-weather-table .sticky-col {
    position: sticky;
    left: 0;
    background: var(--card);
    z-index: 10;
    font-weight: 700;
    border-right: 2px solid var(--bdr);
}

.av-weather-table .sticky-col.label {
    background: var(--card-alt);
    text-align: left;
    min-width: 120px;
}

.av-weather-table thead th {
    background: var(--card);
    color: var(--txt);
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 20;
}

.av-weather-table thead th.sticky-col {
    z-index: 30;
    background: var(--bg);
}

.av-weather-table .day-row th {
    background: var(--card-alt);
}

.av-weather-table .day-header {
    background: var(--pri) !important;
}

.av-weather-table .hour-row th {
    background: var(--card-alt);
    font-size: 11px;
}

.av-weather-table .cat-row td {
    font-size: 11px;
    padding: 4px 6px;
}

.av-weather-table tbody tr:hover td {
    background-color: var(--card-alt) !important;
}

.av-weather-table tbody tr:hover td.sticky-col {
    background-color: var(--card-alt) !important;
}

@media (max-width: 768px) {
    .av-weather-table {
        font-size: 10px;
    }
    
    .av-weather-table th,
    .av-weather-table td {
        padding: 5px 6px;
    }
    
    .av-weather-table .sticky-col.label {
        min-width: 80px;
    }
    
    .mega-legend.interactive {
        gap: 8px;
        padding: 12px 16px;
    }
    
    .mega-legend.interactive .leg.toggle {
        padding: 4px 8px;
        font-size: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTIVE TOGGLE CHARTS - ENHANCED
   ═══════════════════════════════════════════════════════════════════════════ */

.big-svg-chart.interactive-chart {
    position: relative;
}

.big-svg-title .toggle-hint {
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
    margin-left: 8px;
}

.big-svg-legend.interactive {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
}

.big-svg-legend.interactive .leg-i.toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid var(--bdr);
    border-radius: 20px;
    background: var(--card);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.big-svg-legend.interactive .leg-i.toggle:hover {
    border-color: var(--muted);
    background: var(--hover);
}

.big-svg-legend.interactive .leg-i.toggle.active {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1e40af;
}

.big-svg-legend.interactive .leg-i.toggle:not(.active) {
    opacity: 0.4;
    border-style: dashed;
}

.big-svg-legend.interactive .leg-l {
    width: 20px;
    height: 4px;
    border-radius: 2px;
}

/* Mobile adjustments for interactive legends */
@media (max-width: 768px) {
    .big-svg-title .toggle-hint {
        display: none;
    }
    
    .big-svg-legend.interactive {
        gap: 6px;
        padding: 8px 12px;
    }
    
    .big-svg-legend.interactive .leg-i.toggle {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .big-svg-legend.interactive .leg-l {
        width: 14px;
        height: 3px;
    }
    
    .mega-legend.interactive .leg.toggle {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MULTI-MODEL COMPARISON CHARTS
   ═══════════════════════════════════════════════════════════════════════════ */

.mega-chart.multi-model {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid var(--pri);
    box-shadow: 0 4px 25px rgba(59,130,246,0.15);
    margin-bottom: 24px;
}

.mega-chart.multi-model .mega-title {
    background: linear-gradient(135deg, var(--pri) 0%, var(--pri) 100%);
    padding: 16px 24px;
    font-size: 18px;
}

.mega-chart.multi-model .mega-subtitle {
    background: var(--bg);
    color: var(--muted);
    padding: 10px 24px;
    font-size: 13px;
}

.multi-model-legend {
    background: var(--card-alt);
    padding: 16px 24px !important;
    gap: 12px !important;
    justify-content: center;
}

.multi-model-legend .leg.toggle {
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-width: 2px !important;
}

.multi-model-legend .leg.toggle .bar,
.multi-model-legend .leg.toggle .line {
    width: 24px;
    height: 6px;
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOURLY PRECIPITATION DETAIL CHART
   ═══════════════════════════════════════════════════════════════════════════ */

.mega-chart.precip-detail {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #2563eb;
    box-shadow: 0 4px 25px rgba(37,99,235,0.15);
    margin-bottom: 24px;
}

.mega-chart.precip-detail .mega-title {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    padding: 16px 24px;
    font-size: 18px;
}

.mega-chart.precip-detail .mega-subtitle {
    background: #1e40af;
    color: #93c5fd;
    padding: 10px 24px;
    font-size: 13px;
}

/* Model info badges */
.model-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

.model-info-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .mega-chart.multi-model .mega-title,
    .mega-chart.precip-detail .mega-title {
        font-size: 15px;
        padding: 12px 16px;
    }
    
    .mega-chart.multi-model .mega-subtitle,
    .mega-chart.precip-detail .mega-subtitle {
        font-size: 11px;
        padding: 8px 16px;
    }
    
    .multi-model-legend {
        padding: 12px 16px !important;
    }
    
    .multi-model-legend .leg.toggle {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    
    .multi-model-legend .leg.toggle .bar,
    .multi-model-legend .leg.toggle .line {
        width: 16px;
        height: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORM & CONVECTION CHART
   ═══════════════════════════════════════════════════════════════════════════ */

.mega-chart.storm-conv {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #f59e0b;
    box-shadow: 0 4px 25px rgba(245,158,11,0.15);
    margin-bottom: 24px;
}

.mega-chart.storm-conv .mega-title {
    background: linear-gradient(135deg, #92400e 0%, #f59e0b 100%);
    padding: 16px 24px;
    font-size: 18px;
}

.mega-chart.storm-conv .mega-subtitle {
    background: #78350f;
    color: #fef3c7;
    padding: 10px 24px;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOLAR RADIATION CHART
   ═══════════════════════════════════════════════════════════════════════════ */

.mega-chart.solar {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #f59e0b;
    box-shadow: 0 4px 25px rgba(245,158,11,0.15);
    margin-bottom: 24px;
}

.mega-chart.solar .mega-title {
    background: linear-gradient(135deg, #b45309 0%, #fbbf24 100%);
    padding: 16px 24px;
    font-size: 18px;
}

.mega-chart.solar .mega-subtitle {
    background: #92400e;
    color: #fef3c7;
    padding: 10px 24px;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENVIRONMENTAL DATA CHART
   ═══════════════════════════════════════════════════════════════════════════ */

.mega-chart.env {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #10b981;
    box-shadow: 0 4px 25px rgba(16,185,129,0.15);
    margin-bottom: 24px;
}

.mega-chart.env .mega-title {
    background: linear-gradient(135deg, #065f46 0%, #10b981 100%);
    padding: 16px 24px;
    font-size: 18px;
}

.mega-chart.env .mega-subtitle {
    background: #047857;
    color: #d1fae5;
    padding: 10px 24px;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORM INFO BOX
   ═══════════════════════════════════════════════════════════════════════════ */

.storm-info-box {
    background: var(--card-alt);
    padding: 14px 20px;
    border-top: 1px solid var(--bdr);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.storm-info-box .info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.storm-info-box .info-item .label {
    font-weight: 700;
    color: var(--txt);
    background: var(--bdr);
    padding: 3px 8px;
    border-radius: 4px;
}

.storm-info-box .info-item .desc {
    color: var(--muted);
}

/* Mobile */
@media (max-width: 768px) {
    .mega-chart.storm-conv .mega-title,
    .mega-chart.solar .mega-title,
    .mega-chart.env .mega-title {
        font-size: 15px;
        padding: 12px 16px;
    }
    
    .mega-chart.storm-conv .mega-subtitle,
    .mega-chart.solar .mega-subtitle,
    .mega-chart.env .mega-subtitle {
        font-size: 11px;
        padding: 8px 16px;
    }
    
    .storm-info-box {
        padding: 10px 14px;
        gap: 10px;
        flex-direction: column;
    }
    
    .storm-info-box .info-item {
        font-size: 10px;
        flex-wrap: wrap;
    }
    
    .storm-info-box .info-item .label {
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIVERSAL MULTI-MODEL CHART SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* Day Zoom Selector */
.day-zoom-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--card) 0%, var(--card-alt) 100%);
    border-radius: 12px;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.day-zoom-label {
    color: var(--txt);
    font-weight: 700;
    font-size: 14px;
    margin-right: 8px;
}

.day-zoom-btn {
    padding: 8px 16px;
    border: 2px solid var(--bdr);
    border-radius: 20px;
    background: var(--card);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.day-zoom-btn:hover {
    border-color: var(--pri);
    color: var(--txt);
    background: var(--card-alt);
}

.day-zoom-btn.active {
    border-color: var(--pri);
    background: var(--pri);
    color: #fff;
}

/* Universal Chart */
.universal-chart {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    border: 1px solid var(--bdr);
}

.universal-chart-header {
    background: linear-gradient(135deg, var(--card) 0%, var(--card-alt) 100%);
    padding: 16px 24px;
}

.universal-chart-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--txt);
}

.universal-chart-subtitle {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.universal-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.universal-svg {
    min-width: 1200px;
    display: block;
}

/* Universal Legend */
.universal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
    justify-content: center;
}

.universal-legend .leg.toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 2px solid var(--bdr);
    border-radius: 25px;
    background: var(--card);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.universal-legend .leg.toggle:hover {
    border-color: var(--muted);
    background: var(--card-alt);
}

.universal-legend .leg.toggle.active {
    border-color: var(--pri);
    background: var(--card-alt);
    color: var(--pri);
}

.universal-legend .leg.toggle:not(.active) {
    opacity: 0.4;
    border-style: dashed;
}

.universal-legend .leg.toggle .bar,
.universal-legend .leg.toggle .line {
    width: 24px;
    height: 6px;
    border-radius: 3px;
}

/* Day Label Hover */
.day-label-rect:hover {
    fill: var(--pri) !important;
}

/* Day Zoom Modal */
.day-zoom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.day-zoom-modal-content {
    background: var(--card);
    border-radius: 16px;
    width: 95%;
    max-width: 1400px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.day-zoom-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--card) 0%, var(--card-alt) 100%);
}

.day-zoom-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--txt);
}

.day-zoom-close {
    background: none;
    border: none;
    color: var(--txt);
    font-size: 28px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}

.day-zoom-close:hover {
    color: #ef4444;
}

.day-zoom-modal-body {
    padding: 20px;
    max-height: calc(90vh - 70px);
    overflow-y: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .day-zoom-selector {
        padding: 12px 14px;
        gap: 6px;
    }
    
    .day-zoom-label {
        font-size: 12px;
        width: 100%;
        margin-bottom: 4px;
    }
    
    .day-zoom-btn {
        padding: 6px 10px;
        font-size: 10px;
    }
    
    .universal-chart-header {
        padding: 12px 16px;
    }
    
    .universal-chart-title {
        font-size: 15px;
    }
    
    .universal-chart-subtitle {
        font-size: 10px;
    }
    
    .universal-legend {
        gap: 6px;
        padding: 10px 14px;
    }
    
    .universal-legend .leg.toggle {
        padding: 5px 10px;
        font-size: 10px;
        gap: 5px;
    }
    
    .universal-legend .leg.toggle .bar,
    .universal-legend .leg.toggle .line {
        width: 16px;
        height: 4px;
    }
    
    .universal-svg {
        min-width: 900px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDIVIDUAL ZOOM CHART SYSTEM (IZC)
   ═══════════════════════════════════════════════════════════════════════════ */

.izc-chart {
    background: var(--card);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06);
    margin-bottom: 20px;
    border: 1px solid var(--bdr);
}

.izc-header {
    background: linear-gradient(135deg, var(--card) 0%, var(--card-alt) 100%);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.izc-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
}

.izc-info {
    font-size: 11px;
    color: var(--muted);
}

/* Day selector bar */
.izc-daybar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    background: var(--card-alt);
    border-bottom: 1px solid var(--bdr);
}

.izc-daybtn {
    padding: 7px 14px;
    border: 2px solid var(--bdr);
    border-radius: 18px;
    background: var(--card);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.izc-daybtn:hover {
    border-color: #3b82f6;
    color: #1e40af;
    background: #eff6ff;
}

.izc-daybtn.active {
    border-color: #3b82f6;
    background: #3b82f6;
    color: #fff;
}

/* SVG scroll wrapper */
.izc-svgwrap {
    padding: 0;
}

.izc-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.izc-scroll svg {
    display: block;
}

/* Legend */
.izc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
    justify-content: center;
}

.izc-leg {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid var(--bdr);
    border-radius: 20px;
    background: var(--card);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.izc-leg:hover {
    border-color: var(--muted);
}

.izc-leg.active {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1e40af;
}

.izc-leg:not(.active) {
    opacity: 0.35;
    border-style: dashed;
}

.izc-bar, .izc-line {
    width: 20px;
    height: 5px;
    border-radius: 3px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .izc-header {
        padding: 10px 14px;
    }
    
    .izc-title {
        font-size: 14px;
    }
    
    .izc-info {
        font-size: 10px;
    }
    
    .izc-daybar {
        padding: 10px 12px;
        gap: 5px;
    }
    
    .izc-daybtn {
        padding: 5px 10px;
        font-size: 10px;
        border-radius: 14px;
    }
    
    .izc-legend {
        gap: 5px;
        padding: 10px 12px;
    }
    
    .izc-leg {
        padding: 4px 8px;
        font-size: 10px;
        gap: 4px;
    }
    
    .izc-bar, .izc-line {
        width: 14px;
        height: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE PRECIPITATION CHART
   ═══════════════════════════════════════════════════════════════════════════ */

.comp-precip-chart {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 25px rgba(37,99,235,0.12);
    margin-bottom: 24px;
    border: 2px solid var(--pri);
}

.comp-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    padding: 18px 24px;
}

.comp-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.comp-info {
    font-size: 12px;
    color: #93c5fd;
    margin-top: 4px;
}

.comp-daybar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-bottom: 1px solid #bfdbfe;
}

.comp-daybtn {
    padding: 8px 16px;
    border: 2px solid #93c5fd;
    border-radius: 20px;
    background: #fff;
    color: #1e40af;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.comp-daybtn:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.comp-daybtn.active {
    border-color: #1e40af;
    background: #1e40af;
    color: #fff;
}

.comp-svgwrap {
    background: #f0f9ff;
}

.comp-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.comp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
}

.comp-leg-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.comp-leg-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    margin-right: 4px;
}

.comp-leg {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 2px solid var(--bdr);
    border-radius: 16px;
    background: var(--card);
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.comp-leg:hover {
    border-color: var(--muted);
}

.comp-leg.active {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1e40af;
}

.comp-leg:not(.active) {
    opacity: 0.35;
    border-style: dashed;
}

.comp-bar {
    width: 16px;
    height: 10px;
    border-radius: 2px;
}

.comp-line {
    width: 18px;
    height: 3px;
    border-radius: 2px;
}

.comp-line.dashed {
    background: repeating-linear-gradient(90deg, currentColor 0, currentColor 4px, transparent 4px, transparent 7px) !important;
}

.comp-area {
    width: 16px;
    height: 10px;
    border-radius: 3px;
    opacity: 0.5;
}

.comp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .comp-header {
        padding: 14px 16px;
    }
    
    .comp-title {
        font-size: 15px;
    }
    
    .comp-info {
        font-size: 10px;
    }
    
    .comp-daybar {
        padding: 10px 14px;
        gap: 6px;
    }
    
    .comp-daybtn {
        padding: 6px 10px;
        font-size: 10px;
    }
    
    .comp-legend {
        padding: 12px 14px;
        gap: 8px;
    }
    
    .comp-leg-title {
        font-size: 10px;
    }
    
    .comp-leg {
        padding: 4px 7px;
        font-size: 9px;
        gap: 3px;
    }
    
    .comp-bar, .comp-area {
        width: 12px;
        height: 8px;
    }
    
    .comp-line {
        width: 14px;
    }
    
    .comp-dot {
        width: 8px;
        height: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVIATION WEATHER TABLE (FLIGHT RULES)
   ═══════════════════════════════════════════════════════════════════════════ */

.av-table-new {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 25px rgba(34,197,94,0.12);
    margin-bottom: 24px;
    border: 2px solid #22c55e;
}

.av-table-header {
    background: linear-gradient(135deg, #14532d 0%, #22c55e 100%);
    padding: 18px 24px;
}

.av-table-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.av-table-info {
    font-size: 12px;
    color: #bbf7d0;
    margin-top: 4px;
}

.av-table-daybar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-bottom: 1px solid #bbf7d0;
}

.av-table-daybtn {
    padding: 8px 16px;
    border: 2px solid #86efac;
    border-radius: 20px;
    background: #fff;
    color: #166534;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.av-table-daybtn:hover {
    border-color: #22c55e;
    background: #f0fdf4;
}

.av-table-daybtn.active {
    border-color: #166534;
    background: #166534;
    color: #fff;
}

.av-table-wrap {
    padding: 0;
}

.av-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.av-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.av-table th {
    background: var(--card-alt);
    padding: 10px 8px;
    text-align: center;
    font-weight: 700;
    color: var(--txt);
    border-bottom: 2px solid var(--bdr);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.av-table th.sticky-col {
    position: sticky;
    left: 0;
    z-index: 20;
    background: var(--bdr);
}

.av-table td {
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--bdr);
    white-space: nowrap;
}

.av-table td.sticky-col {
    position: sticky;
    left: 0;
    background: var(--card);
    font-weight: 600;
    z-index: 5;
    border-right: 2px solid var(--bdr);
}

.av-table tr.day-separator td {
    background: var(--card);
    color: var(--txt);
    font-weight: 700;
    text-align: left;
    padding: 8px 16px;
}

/* Category row colors */
.av-table tr.cat-vfr td { background: rgba(34,197,94,0.08); }
.av-table tr.cat-mvfr td { background: rgba(59,130,246,0.08); }
.av-table tr.cat-ifr td { background: rgba(249,115,22,0.08); }
.av-table tr.cat-lifr td { background: rgba(239,68,68,0.12); }

.av-table tr.cat-vfr td.sticky-col { background: rgba(34,197,94,0.15); }
.av-table tr.cat-mvfr td.sticky-col { background: rgba(59,130,246,0.15); }
.av-table tr.cat-ifr td.sticky-col { background: rgba(249,115,22,0.15); }
.av-table tr.cat-lifr td.sticky-col { background: rgba(239,68,68,0.2); }

/* Category badges */
.av-cat-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.av-cat-badge.vfr { background: #22c55e; }
.av-cat-badge.mvfr { background: #3b82f6; }
.av-cat-badge.ifr { background: #f97316; }
.av-cat-badge.lifr { background: #ef4444; }

/* Warning cells */
.av-table td.fog-warn {
    background: rgba(234,179,8,0.2) !important;
    color: #92400e;
    font-weight: 700;
}

.av-table td.gust-warn {
    background: rgba(239,68,68,0.15) !important;
    color: #b91c1c;
    font-weight: 700;
}

/* Legend */
.av-table-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 20px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
    font-size: 11px;
    color: var(--muted);
}

.av-table-legend .av-cat-badge {
    margin-right: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVIATION WEATHER CHART (FLIGHT RULES)
   ═══════════════════════════════════════════════════════════════════════════ */

.av-chart-new {
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 25px rgba(139,92,246,0.12);
    margin-bottom: 24px;
    border: 2px solid #8b5cf6;
}

.av-chart-header {
    background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 100%);
    padding: 18px 24px;
}

.av-chart-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.av-chart-info {
    font-size: 12px;
    color: #ddd6fe;
    margin-top: 4px;
}

.av-chart-daybar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-bottom: 1px solid #e9d5ff;
}

.av-chart-daybtn {
    padding: 8px 16px;
    border: 2px solid #c4b5fd;
    border-radius: 20px;
    background: #fff;
    color: #5b21b6;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.av-chart-daybtn:hover {
    border-color: #8b5cf6;
    background: #faf5ff;
}

.av-chart-daybtn.active {
    border-color: #5b21b6;
    background: #5b21b6;
    color: #fff;
}

.av-chart-wrap {
    background: #fafbfc;
}

.av-chart-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.av-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 20px;
    background: var(--card-alt);
    border-top: 1px solid var(--bdr);
}

.av-leg-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.av-leg-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

.av-leg {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 2px solid var(--bdr);
    border-radius: 16px;
    background: var(--card);
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.av-leg:hover {
    border-color: var(--muted);
}

.av-leg.active {
    border-color: #8b5cf6;
    background: #faf5ff;
    color: #5b21b6;
}

.av-leg:not(.active) {
    opacity: 0.35;
    border-style: dashed;
}

.av-cat-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.av-cat-dot.vfr { background: #22c55e; }
.av-cat-dot.mvfr { background: #3b82f6; }
.av-cat-dot.ifr { background: #f97316; }
.av-cat-dot.lifr { background: #ef4444; }

.av-line {
    width: 18px;
    height: 3px;
    border-radius: 2px;
}

.av-line.dashed {
    background: repeating-linear-gradient(90deg, currentColor 0, currentColor 4px, transparent 4px, transparent 7px) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .av-table-header,
    .av-chart-header {
        padding: 14px 16px;
    }
    
    .av-table-title,
    .av-chart-title {
        font-size: 15px;
    }
    
    .av-table-info,
    .av-chart-info {
        font-size: 10px;
    }
    
    .av-table-daybar,
    .av-chart-daybar {
        padding: 10px 14px;
        gap: 6px;
    }
    
    .av-table-daybtn,
    .av-chart-daybtn {
        padding: 6px 10px;
        font-size: 10px;
    }
    
    .av-table {
        font-size: 10px;
    }
    
    .av-table th,
    .av-table td {
        padding: 6px 4px;
    }
    
    .av-cat-badge {
        padding: 3px 6px;
        font-size: 9px;
    }
    
    .av-table-legend,
    .av-chart-legend {
        padding: 10px 14px;
        gap: 10px;
        font-size: 10px;
    }
    
    .av-leg {
        padding: 4px 7px;
        font-size: 9px;
    }
}

/* ==================== V20: PROFESSIONAL SVG MAP ICONS ==================== */
.map-ctrls .cbtn svg {
    display: block;
    stroke: var(--txt);
    transition: stroke 0.2s;
}
.map-ctrls .cbtn:hover svg {
    stroke: var(--pri);
}
.map-ctrls .cbtn.active svg {
    stroke: var(--pri);
}

/* ==================== V20: NAVAID STYLES IN CLOUD PROFILE ==================== */
.cloud-chart .navaid-vor {
    fill: rgba(34,211,238,0.2);
    stroke: #22d3ee;
}
.cloud-chart .navaid-ndb {
    fill: rgba(251,191,36,0.15);
    stroke: #fbbf24;
}

/* ==================== V20: PERIOD SELECTOR IN PROFILE ==================== */
.profile-section .wx-selector {
    margin: 0;
}

/* ==================== RAW METAR/TAF ==================== */
.profile-section > .raw-section {
    padding: 8px;
    background: var(--card-alt);
    border-radius: 0 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 !important;
}
.profile-section > .raw-section .raw-box {
    padding: 8px 10px;
    background: var(--card) !important;
    border: 1px solid var(--bdr) !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--muted) !important;
    margin: 0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    cursor: default !important;
    overflow: visible !important;
    backdrop-filter: blur(8px);
}
.profile-section > .raw-section .metar-raw-box { border-left-color: #22c55e !important; }
.profile-section > .raw-section .taf-raw-box { border-left-color: #3b82f6 !important; }
.raw-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--muted);
    letter-spacing: 1px;
    margin-bottom: 3px;
}
.raw-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--muted);
}
.raw-dot.metar { background: #22c55e; }
.raw-dot.taf { background: #3b82f6; }
.raw-text {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--txt);
    line-height: 1.6;
    word-break: break-all;
    white-space: pre-wrap;
}

/* ==================== THEME VARIABLES (Dark = Default) ==================== */
.kwp-root {
    /* Core UI — Midnight Cockpit */
    --bg: #080d1a;
    --card: #111827;
    --card-alt: #0f1629;
    --bdr: rgba(56,189,248,0.12);
    --txt: #e8edf5;
    --muted: #8899b0;
    --hover: rgba(56,189,248,0.06);

    /* Header */
    --header-bg: rgba(8,13,26,0.96);
    --header-border: rgba(56,189,248,0.1);
    --header-stat-text: #8899b0;
    --header-stat-value: #e8edf5;
    --header-stat-accent: #38bdf8;
    --logo-amp: #38bdf8;
    --logo-sub: #5b7a94;

    /* Search */
    --search-bg: rgba(17,24,39,0.95);
    --search-border: rgba(56,189,248,0.35);
    --search-text: #e8edf5;
    --search-placeholder: #5b7a94;
    --search-result-bg: rgba(8,13,26,0.98);
    --search-result-hover: rgba(56,189,248,0.1);
    --search-result-border: rgba(56,189,248,0.08);
    --search-icao: #38bdf8;
    --search-name: #8899b0;
    --search-country: #5b7a94;
    --search-shadow: rgba(0,0,0,0.5);

    /* Panel (right detail) */
    --panel-bg: #080d1a;
    --section-bg: #111827;
    --section-border: rgba(56,189,248,0.08);

    /* Raw data */
    --raw-box-bg: linear-gradient(135deg, #111827 0%, #080d1a 100%);
    --raw-box-border: #2563eb;
    --raw-box-shadow: rgba(37,99,235,0.25);
    --raw-header-bg: linear-gradient(90deg, #1e40af 0%, #2563eb 100%);
    --raw-header-text: #fff;
    --raw-time: #93c5fd;
    --raw-arrow: #5b7a94;
    --raw-text: #22d3ee;
    --raw-content-bg: rgba(8,13,26,0.85);
    --raw-content-border: #1e293b;
    --raw-taf-text: #c4b5fd;
    --raw-taf-bg: #111827;

    /* Weather buttons */
    --wxbtn-bg: rgba(56,189,248,0.04);
    --wxbtn-border: rgba(56,189,248,0.1);
    --wxbtn-hover: rgba(56,189,248,0.1);
    --wxbtn-active-bg: rgba(56,189,248,0.15);
    --wxbtn-type-bg: rgba(56,189,248,0.08);
    --wxbtn-type-text: #8899b0;
    --wxbtn-time: #5b7a94;
    --wx-selector-bg: rgba(8,13,26,0.7);
    --wx-selector-title: #8899b0;

    /* Flight rules */
    --reason-bg: rgba(56,189,248,0.04);
    --reason-border: rgba(56,189,248,0.1);
    --lifr-detail-bg: rgba(239,68,68,0.1);

    /* Code content */
    --code-bg: rgba(8,13,26,0.7);
    --code-text: #8899b0;
    --code-info: #5b7a94;

    /* Loading */
    --loader-bg: rgba(8,13,26,0.96);

    /* Map */
    --map-bg: #080d1a;
    --map-attribution-bg: rgba(8,13,26,0.85);
    --map-attribution-text: #8899b0;

    /* Meteogram modal */
    --meteor-bg: #080d1a;
    --meteor-header: linear-gradient(135deg, #0c4a6e, #0369a1);
    --meteor-body: #111827;
    --meteor-chart-bg: #0f1629;
    --meteor-chart-border: rgba(56,189,248,0.08);
    --meteor-tab-bg: rgba(255,255,255,0.1);
    --meteor-tab-text: rgba(255,255,255,0.8);
    --meteor-tab-hover: rgba(255,255,255,0.2);
    --meteor-tab-active-bg: #fff;
    --meteor-tab-active-text: #0c4a6e;
    --meteor-tab-bar: linear-gradient(to bottom, #0c4a6e, #0369a1);

    /* Profile modal */
    --profile-bg: linear-gradient(180deg, #0c4a6e 0%, #075985 50%, #0369a1 100%);
    --profile-header-bg: rgba(0,0,0,0.3);
    --profile-chart-bg: #060a14;
    --profile-bottom-bg: rgba(0,0,0,0.4);
    --profile-bottom-border: rgba(255,255,255,0.1);
    --profile-zoom-bg: rgba(255,255,255,0.1);
    --profile-zoom-border: rgba(255,255,255,0.15);
    --profile-zoom-text: rgba(255,255,255,0.8);
    --profile-zoom-active-bg: #fff;
    --profile-zoom-active-text: #0c4a6e;
    --profile-period-bg: rgba(255,255,255,0.06);
    --profile-period-border: rgba(255,255,255,0.1);
    --profile-period-hover: rgba(255,255,255,0.12);
    --profile-period-active: rgba(255,255,255,0.18);

    /* Popup/tooltip */
    --popup-bg: #111827;
    --popup-border: rgba(56,189,248,0.15);
    --popup-text: #e8edf5;

    /* Scrollbar */
    --scrollbar-thumb: rgba(56,189,248,0.15);

    /* Overlay */
    --overlay-bg: rgba(0,0,0,0.75);

    /* Worst Weather panel */
    --ww-bg: rgba(12,12,14,0.97);
    --ww-bg-solid: #0c0c0e;
    --ww-text: #b0b0b0;
    --ww-text-muted: rgba(255,255,255,0.28);
    --ww-text-dim: rgba(255,255,255,0.42);
    --ww-border: rgba(255,255,255,0.06);
    --ww-border-light: rgba(255,255,255,0.03);
    --ww-hover: rgba(255,255,255,0.03);
    --ww-active: rgba(255,255,255,0.05);
    --ww-tag-bg: rgba(255,255,255,0.04);
    --ww-tag-border: rgba(255,255,255,0.06);
    --ww-tag-text: rgba(255,255,255,0.35);
    --ww-scrollbar: rgba(255,255,255,0.06);
    --ww-card-bg: rgba(255,255,255,0.015);
    --ww-score-bg: transparent;
    --ww-score-text: rgba(255,255,255,0.32);
    --ww-rank-bg: transparent;
    --ww-rank-border: transparent;
    --ww-shadow: rgba(0,0,0,0.5);

    /* Ticker */
    --ticker-bg: rgba(8,13,26,0.96);
    --ticker-bg2: rgba(15,22,41,0.96);
    --ticker-border: rgba(56,189,248,0.3);
    --ticker-item-border: rgba(56,189,248,0.08);
    --ticker-text: rgba(255,255,255,0.6);
    --ticker-fade: rgba(8,13,26,0.96);
    --footer-bg: rgba(8,13,26,0.9);
}

/* ==================== LIGHT THEME (Sky Aviation) ==================== */
.kwp-root.kwp-light {
    /* Core — Cloud White & Sky Blue */
    --bg: #f0f4f8;
    --card: #ffffff;
    --card-alt: #f0f4f8;
    --bdr: #d0dbe8;
    --txt: #1a2744;
    --muted: #5a7089;
    --hover: rgba(3,105,161,0.05);

    /* Header — Frosted glass */
    --header-bg: rgba(255,255,255,0.88);
    --header-border: #d0dbe8;
    --header-stat-text: #5a7089;
    --header-stat-value: #1a2744;
    --header-stat-accent: #0369a1;
    --logo-amp: #0369a1;
    --logo-sub: #5a7089;

    /* Search */
    --search-bg: #ffffff;
    --search-border: #0284c7;
    --search-text: #1a2744;
    --search-placeholder: #8ca0b3;
    --search-result-bg: #ffffff;
    --search-result-hover: #edf4fb;
    --search-result-border: #d0dbe8;
    --search-icao: #075985;
    --search-name: #5a7089;
    --search-country: #8ca0b3;
    --search-shadow: rgba(3,105,161,0.1);

    /* Panel */
    --panel-bg: #f0f4f8;
    --section-bg: #ffffff;
    --section-border: #d0dbe8;

    /* Raw data — keeps dark for readability */
    --raw-box-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --raw-box-border: #2563eb;
    --raw-box-shadow: rgba(37,99,235,0.12);
    --raw-header-bg: linear-gradient(90deg, #1e40af 0%, #2563eb 100%);
    --raw-header-text: #fff;
    --raw-time: #93c5fd;
    --raw-arrow: #5b7a94;
    --raw-text: #22d3ee;
    --raw-content-bg: rgba(15,23,42,0.85);
    --raw-content-border: #1e293b;
    --raw-taf-text: #c4b5fd;
    --raw-taf-bg: #f0f4f8;

    /* Weather buttons */
    --wxbtn-bg: #ffffff;
    --wxbtn-border: #d0dbe8;
    --wxbtn-hover: #ffffff;
    --wxbtn-active-bg: #ffffff;
    --wxbtn-type-bg: #edf4fb;
    --wxbtn-type-text: #1a2744;
    --wxbtn-time: #5a7089;
    --wx-selector-bg: linear-gradient(135deg, #f0f4f8, #edf4fb);
    --wx-selector-title: #1a2744;

    /* Flight rules */
    --reason-bg: #edf4fb;
    --reason-border: #d0dbe8;
    --lifr-detail-bg: #fef2f2;

    /* Code */
    --code-bg: #edf4fb;
    --code-text: #1a2744;
    --code-info: #5a7089;

    /* Loading */
    --loader-bg: rgba(240,244,248,0.96);

    /* Map */
    --map-bg: #d0dbe8;
    --map-attribution-bg: rgba(255,255,255,0.9);
    --map-attribution-text: #5a7089;

    /* Meteogram */
    --meteor-bg: #ffffff;
    --meteor-header: linear-gradient(135deg, #075985, #0284c7);
    --meteor-body: #f0f4f8;
    --meteor-chart-bg: #ffffff;
    --meteor-chart-border: #d0dbe8;
    --meteor-tab-bg: rgba(255,255,255,0.6);
    --meteor-tab-text: rgba(255,255,255,0.9);
    --meteor-tab-hover: rgba(255,255,255,0.8);
    --meteor-tab-active-bg: #fff;
    --meteor-tab-active-text: #075985;
    --meteor-tab-bar: linear-gradient(to bottom, #075985, #0284c7);

    /* Profile */
    --profile-bg: linear-gradient(180deg, #075985 0%, #0284c7 50%, #0ea5e9 100%);
    --profile-header-bg: rgba(0,0,0,0.25);
    --profile-chart-bg: #0a1628;
    --profile-bottom-bg: rgba(0,0,0,0.35);
    --profile-bottom-border: rgba(255,255,255,0.1);
    --profile-zoom-bg: rgba(255,255,255,0.12);
    --profile-zoom-border: rgba(255,255,255,0.18);
    --profile-zoom-text: rgba(255,255,255,0.85);
    --profile-zoom-active-bg: #fff;
    --profile-zoom-active-text: #075985;
    --profile-period-bg: rgba(255,255,255,0.08);
    --profile-period-border: rgba(255,255,255,0.12);
    --profile-period-hover: rgba(255,255,255,0.15);
    --profile-period-active: rgba(255,255,255,0.22);

    /* Popup */
    --popup-bg: #ffffff;
    --popup-border: #d0dbe8;
    --popup-text: #1a2744;

    /* Scrollbar */
    --scrollbar-thumb: rgba(3,105,161,0.15);

    /* Overlay */
    --overlay-bg: rgba(26,39,68,0.45);

    /* Worst Weather */
    --ww-bg: rgba(252,252,252,0.97);
    --ww-bg-solid: #fcfcfc;
    --ww-text: #2a2a2a;
    --ww-text-muted: #8a8a8a;
    --ww-text-dim: #5a5a5a;
    --ww-border: rgba(0,0,0,0.07);
    --ww-border-light: rgba(0,0,0,0.04);
    --ww-hover: rgba(0,0,0,0.025);
    --ww-active: rgba(0,0,0,0.05);
    --ww-tag-bg: rgba(0,0,0,0.04);
    --ww-tag-border: rgba(0,0,0,0.06);
    --ww-tag-text: #6a6a6a;
    --ww-scrollbar: rgba(0,0,0,0.08);
    --ww-card-bg: rgba(0,0,0,0.015);
    --ww-score-bg: transparent;
    --ww-score-text: #8a8a8a;
    --ww-shadow: rgba(0,0,0,0.08);
    --ww-rank-bg: transparent;
    --ww-rank-border: transparent;

    /* Ticker */
    --ticker-bg: rgba(255,255,255,0.96);
    --ticker-bg2: rgba(240,244,248,0.96);
    --ticker-border: rgba(3,105,161,0.25);
    --ticker-item-border: rgba(3,105,161,0.1);
    --ticker-text: #2d4562;
    --ticker-fade: rgba(255,255,255,0.96);
    --footer-bg: rgba(255,255,255,0.92);
}

/* ==================== WORST WEATHER PANEL ==================== */
.ww-panel-container {
    position: absolute;
    top: 56px;
    left: 0;
    width: 340px;
    max-width: 88vw;
    height: calc(100% - 56px);
    background: var(--ww-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--ww-border);
    z-index: 1001;
    animation: slideInLeft 0.15s cubic-bezier(0.2, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 4px 0 24px var(--ww-shadow), 1px 0 1px var(--ww-border);
    will-change: transform;
    transform: translateZ(0);
    contain: layout style;
}
.ww-panel-container.hidden { display: none; }

@keyframes slideInLeft {
    from { transform: translate3d(-100%, 0, 0); opacity: 0.5; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* Header — minimal, clean */
.ww-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--ww-card-bg);
    flex-shrink: 0;
    border-bottom: 1px solid var(--ww-border);
}

.ww-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ww-text);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.7;
}
.ww-title svg {
    stroke: var(--ww-text-muted);
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

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

.ww-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ww-text-muted);
    background: var(--ww-tag-bg);
    padding: 2px 6px;
    border-radius: 4px;
}

.ww-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--ww-text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    line-height: 1;
}
.ww-close:hover { background: var(--ww-hover); color: var(--ww-text); }

/* ==================== MAIN TABS (Worst Weather / Statistics) ==================== */
.ww-main-tabs {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid var(--ww-border);
    background: transparent;
}
.ww-main-tab {
    flex: 1;
    padding: 9px 8px;
    background: none;
    border: none;
    color: var(--ww-text-muted);
    font-size: 11px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border-bottom: 1.5px solid transparent;
    transition: color 0.2s;
    text-align: center;
    letter-spacing: 0.02em;
}
.ww-main-tab:hover { color: var(--ww-text); }
.ww-main-tab.active {
    color: var(--ww-text);
    border-bottom-color: var(--ww-text);
    font-weight: 600;
}

/* Tab content containers */
.ww-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ==================== STATS SUB-TABS (Today / Week / Month) ==================== */
.ww-stats-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ww-stats-subtabs {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid var(--ww-border);
    background: var(--ww-card-bg);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ww-stats-subtabs::-webkit-scrollbar { display: none; }
.ww-stats-subtab {
    flex: 0 0 auto;
    padding: 7px 10px;
    background: none;
    border: none;
    color: var(--ww-text-muted);
    font-size: 10.5px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 1.5px solid transparent;
    transition: color 0.2s;
    text-align: center;
    white-space: nowrap;
}
.ww-stats-subtab:hover { color: var(--ww-text); }
.ww-stats-subtab.active {
    color: var(--ww-text);
    border-bottom-color: var(--ww-text);
    font-weight: 600;
}

.ww-stats-period {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.ww-stats-period::-webkit-scrollbar { width: 4px; }
.ww-stats-period::-webkit-scrollbar-track { background: transparent; }
.ww-stats-period::-webkit-scrollbar-thumb { background: var(--ww-scrollbar); border-radius: 2px; }

/* Empty State */
.ww-empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--ww-text-muted);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ww-empty-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 4px;
    opacity: 0.7;
}
.ww-empty-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ww-text);
    letter-spacing: 0.01em;
}
.ww-empty-desc {
    font-size: 11px;
    color: var(--ww-text-muted);
    max-width: 200px;
    line-height: 1.4;
    opacity: 0.7;
}
.ww-stats-meta {
    font-size: 10px;
    color: var(--ww-text-muted);
    text-align: center;
    padding: 4px 8px;
    opacity: 0.6;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.02em;
}

/* Scrollable List */
.ww-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    contain: content;
}
.ww-list::-webkit-scrollbar { width: 4px; }
.ww-list::-webkit-scrollbar-track { background: transparent; }
.ww-list::-webkit-scrollbar-thumb { background: var(--ww-scrollbar); border-radius: 2px; }

/* List Items — clean, breathable */
.ww-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--ww-border-light);
    cursor: pointer;
    transition: background 0.12s ease;
    border-left: 2px solid transparent;
}
.ww-item:hover {
    background: var(--ww-hover);
}
.ww-item:active {
    background: var(--ww-active);
}

/* Category left border — monochrome grayscale by severity */
.ww-item.ww-lifr { border-left-color: rgba(255,255,255,0.25); }
.ww-item.ww-ifr { border-left-color: rgba(255,255,255,0.18); }
.ww-item.ww-mvfr { border-left-color: rgba(255,255,255,0.10); }
.ww-item.ww-vfr { border-left-color: rgba(255,255,255,0.05); }

/* Rank — simple numeral */
.ww-rank-col {
    flex-shrink: 0;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ww-rank {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--ww-text-muted);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 50%;
}

/* Top 3 — gold/silver/bronze circles */
.ww-item:nth-child(1) .ww-rank {
    font-weight: 800;
    color: #fff;
    font-size: 12px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 6px rgba(245,158,11,0.4);
}
.ww-item:nth-child(2) .ww-rank {
    font-weight: 700;
    color: #fff;
    font-size: 11px;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #94a3b8, #64748b);
    box-shadow: 0 2px 4px rgba(100,116,139,0.35);
}
.ww-item:nth-child(3) .ww-rank {
    font-weight: 700;
    color: #fff;
    font-size: 11px;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #b45309, #92400e);
    box-shadow: 0 2px 4px rgba(180,83,9,0.35);
}

/* Info */
.ww-info { flex: 1; min-width: 0; }

.ww-info-top {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}

.ww-icao {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--ww-text);
    letter-spacing: 0.3px;
}

.ww-cat {
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 8px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
    color: var(--ww-text-muted);
    background: var(--ww-tag-bg);
    border: 1px solid var(--ww-border);
}

/* Weather phenomena — muted inline display */
.ww-wx {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 500;
    color: var(--ww-text-muted);
    letter-spacing: 0.2px;
}

.ww-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ww-text-dim);
    margin-left: auto;
    flex-shrink: 0;
    letter-spacing: -0.3px;
}

/* Top 3 score — subtle emphasis only */
.ww-item:nth-child(1) .ww-score { font-size: 14px; font-weight: 700; color: var(--ww-text); }
.ww-item:nth-child(2) .ww-score { font-size: 14px; color: var(--ww-text); }
.ww-item:nth-child(3) .ww-score { font-size: 13px; color: var(--ww-text); }

/* Details — whisper-quiet tags */
.ww-details {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.ww-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.2px;
    color: var(--ww-text-muted);
    background: var(--ww-tag-bg);
}

/* Tag variants — color-coded micro-badges */
.ww-tag-vis {
    color: #a5b4fc;
    background: rgba(99,102,241,0.15);
}
.ww-tag-ceil {
    color: #fbbf24;
    background: rgba(245,158,11,0.15);
}
.ww-tag-ice {
    color: #67e8f9;
    background: rgba(6,182,212,0.15);
}
.ww-tag-fog {
    color: #94a3b8;
    background: rgba(100,116,139,0.15);
}

/* ==================== SCORE BREAKDOWN BAR — visible accent ==================== */
.ww-breakdown {
    display: flex;
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 5px;
    gap: 1px;
    background: var(--ww-border-light);
}
.ww-bd {
    height: 100%;
    border-radius: 2px;
    min-width: 2px;
    opacity: 0.6;
}
.ww-bd-vis { background: var(--ww-text-muted); }
.ww-bd-ceil { background: var(--ww-text-muted); }
.ww-bd-precip { background: var(--ww-text-muted); }
.ww-bd-wind { background: var(--ww-text-muted); }
.ww-bd-ice { background: var(--ww-text-muted); }
.ww-bd-fog { background: var(--ww-text-muted); }
.ww-bd-cloud { background: var(--ww-text-muted); }
.ww-bd-ws { background: var(--ww-text-muted); }

/* ==================== TWEET COPY BUTTON ==================== */
.ww-tweet-copy {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--ww-text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ww-tweet-copy:hover {
    background: var(--ww-hover);
    color: var(--ww-text);
}

/* Overlay */
/* ==================== TWEET MODAL — Premium Design ==================== */
.twm-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: #080d1a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: twmFadeIn 0.25s ease;
}
@keyframes twmFadeIn { from { opacity: 0; } to { opacity: 1; } }

.twm-card {
    background: #0e0e10;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0,0,0,0.6), 0 0 60px rgba(56,189,248,0.05);
    overflow: hidden;
    animation: twmSlideUp 0.35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes twmSlideUp {
    from { transform: translateY(30px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Header */
.twm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 40%, #dc2626 100%);
    border-bottom: 1px solid rgba(239,68,68,0.3);
}
.twm-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.twm-header-icon {
    font-size: 32px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.twm-title {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.twm-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    margin-top: 2px;
}
.twm-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}
.twm-close:hover { background: rgba(255,255,255,0.25); transform: scale(1.1); border-color: rgba(255,255,255,0.4); }

/* Date bar */
.twm-datebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #111827;
    border-bottom: 1px solid rgba(56,189,248,0.1);
}
.twm-date {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #c0c0c0;
}
.twm-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #8a8a8a;
}

/* Airport list */
.twm-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    background: #0f1629;
}
.twm-list::-webkit-scrollbar { width: 4px; }
.twm-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.twm-airport {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 24px;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.twm-airport:last-child { border-bottom: none; }
.twm-airport:hover { background: rgba(255,255,255,0.03); }
.twm-airport.twm-top3 { padding: 12px 24px; background: rgba(255,255,255,0.02); }

/* Rank */
.twm-rank {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    color: #64748b;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.twm-rank-1 {
    background: #fff;
    color: #0c0c0e;
    border-color: transparent;
    font-size: 14px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(255,255,255,0.15);
}
.twm-rank-2 {
    background: rgba(255,255,255,0.7);
    color: #1a1a1a;
    border-color: transparent;
    font-size: 13px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    box-shadow: 0 3px 10px rgba(255,255,255,0.1);
}
.twm-rank-3 {
    background: rgba(255,255,255,0.45);
    color: #2a2a2a;
    border-color: transparent;
    font-size: 13px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    box-shadow: 0 3px 10px rgba(255,255,255,0.08);
}

/* ICAO */
.twm-icao {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 800;
    color: #c0c0c0;
    letter-spacing: 0.5px;
    min-width: 56px;
}
.twm-top3 .twm-icao {
    font-size: 18px;
    color: #e0e0e0;
}

/* Category badge — monochrome */
.twm-cat {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    color: #8a8a8a;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* Details */
.twm-details {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}
.twm-det {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: #7a7a7a;
    padding: 2px 7px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    white-space: nowrap;
}
.twm-wx {
    color: #8a8a8a;
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

/* Score */
.twm-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 800;
    color: #b0b0b0;
    min-width: 34px;
    text-align: right;
    flex-shrink: 0;
}
.twm-top3 .twm-score {
    font-size: 18px;
    color: #d0d0d0;
    text-shadow: 0 0 12px rgba(255,255,255,0.1);
}

/* Footer */
.twm-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid rgba(56,189,248,0.1);
    background: #111827;
}
.twm-chars {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
}
.twm-ok { color: #8a8a8a; }
.twm-over { color: #b0b0b0; }

.twm-actions {
    display: flex;
    gap: 10px;
}

.twm-btn-copy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 24px;
    background: #fff;
    color: #0c0c0e;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(255,255,255,0.1);
}
.twm-btn-copy:hover {
    filter: brightness(0.95);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,255,255,0.15);
}
.twm-btn-copy.twm-copied {
    background: #d0d0d0;
    box-shadow: 0 4px 14px rgba(255,255,255,0.08);
}

.twm-btn-x {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 24px;
    background: #000;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.twm-btn-x:hover {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* Light Theme Override for Tweet Modal */
.kwp-root.kwp-light .twm-overlay {
    background: #f0f4f8;
}
.kwp-root.kwp-light .twm-card {
    background: #fafafa;
    border-color: #d8d8d8;
    box-shadow: 0 25px 80px rgba(0,0,0,0.12);
}
.kwp-root.kwp-light .twm-datebar {
    background: #f0f0f0;
    border-color: #d8d8d8;
}
.kwp-root.kwp-light .twm-date { color: #2a2a2a; }
.kwp-root.kwp-light .twm-time { color: #5a5a5a; }
.kwp-root.kwp-light .twm-list { background: #fafafa; }
.kwp-root.kwp-light .twm-airport { border-color: rgba(0,0,0,0.04); }
.kwp-root.kwp-light .twm-airport:hover { background: rgba(0,0,0,0.025); }
.kwp-root.kwp-light .twm-airport.twm-top3 { background: rgba(0,0,0,0.015); }
.kwp-root.kwp-light .twm-rank { color: #6a6a6a; background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
.kwp-root.kwp-light .twm-icao { color: #2a2a2a; }
.kwp-root.kwp-light .twm-top3 .twm-icao { color: #1a1a1a; }
.kwp-root.kwp-light .twm-det { color: #6a6a6a; background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
.kwp-root.kwp-light .twm-wx { color: #5a5a5a; border-color: rgba(0,0,0,0.1); background: rgba(0,0,0,0.03); }
.kwp-root.kwp-light .twm-score { color: #4a4a4a; }
.kwp-root.kwp-light .twm-top3 .twm-score { color: #2a2a2a; text-shadow: none; }
.kwp-root.kwp-light .twm-footer { background: #f0f0f0; border-color: #d8d8d8; }
.kwp-root.kwp-light .twm-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }

@media (max-width: 480px) {
    .twm-card { max-width: 100%; border-radius: 16px; }
    .twm-airport { padding: 7px 16px; gap: 8px; }
    .twm-icao { font-size: 14px; min-width: 46px; }
    .twm-top3 .twm-icao { font-size: 15px; }
    .twm-details { display: none; }
    .twm-header { padding: 14px 18px; }
    .twm-title { font-size: 16px; }
    .twm-datebar { padding: 10px 18px; }
    .twm-footer { padding: 12px 18px; }
    .twm-btn-copy, .twm-btn-x { padding: 9px 16px; font-size: 12px; }
}

/* ==================== THEME TOGGLE SWITCH ==================== */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 56px;
    height: 28px;
    background: linear-gradient(135deg, #1e293b, #334155);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    cursor: pointer;
    padding: 0 4px;
    box-sizing: border-box;
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.theme-toggle:hover {
    border-color: rgba(255,255,255,0.2);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 8px rgba(99,102,241,0.2);
}
.theme-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    border-radius: 50%;
    transition: transform 0.35s cubic-bezier(0.68, -0.15, 0.27, 1.15), background 0.35s ease;
    box-shadow: 0 2px 6px rgba(99,102,241,0.5);
    z-index: 2;
}
.theme-toggle-icon {
    position: relative;
    z-index: 1;
    font-size: 13px;
    line-height: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.theme-icon-dark {
    margin-right: auto;
    opacity: 1;
    transform: scale(1);
}
.theme-icon-light {
    margin-left: auto;
    opacity: 0.4;
    transform: scale(0.85);
}
/* Light mode state */
.theme-toggle.is-light {
    background: linear-gradient(135deg, #bae6fd, #7dd3fc);
    border-color: rgba(14,165,233,0.3);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.theme-toggle.is-light:hover {
    border-color: rgba(14,165,233,0.5);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 8px rgba(245,158,11,0.25);
}
.theme-toggle.is-light .theme-toggle-knob {
    transform: translateX(26px);
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 2px 6px rgba(245,158,11,0.5);
}
.theme-toggle.is-light .theme-icon-dark {
    opacity: 0.4;
    transform: scale(0.85);
}
.theme-toggle.is-light .theme-icon-light {
    opacity: 1;
    transform: scale(1);
}

/* Worst Weather Toggle Button */
.cbtn-worst {
    position: relative;
}
.cbtn-worst.active {
    background: var(--ww-text) !important;
    color: var(--ww-bg-solid, #0f141e) !important;
    border-color: var(--ww-text) !important;
    opacity: 0.8;
}

/* Pulsing Map Markers */
.ww-pulse-marker {
    animation: wwPulse 2s ease-in-out infinite;
}

@keyframes wwPulse {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.5; }
}

/* Rank badge on map */
.ww-rank-icon {
    background: none !important;
    border: none !important;
}
.ww-rank-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    letter-spacing: -0.5px;
    cursor: pointer;
    transition: transform 0.15s;
}
.ww-rank-badge:hover {
    transform: scale(1.2);
}
/* Rank tooltip on map */
.ww-rank-tooltip {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--popup-bg, #111827);
    color: var(--popup-text, #e8edf5);
    border: 1px solid var(--popup-border, rgba(56,189,248,0.15));
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    white-space: nowrap;
}

/* AdSense Slots */
.ww-ad-slot {
    min-height: 50px;
    padding: 6px 8px;
    flex-shrink: 0;
    text-align: center;
    background: var(--ww-card-bg);
    border-radius: 6px;
    margin: 8px 10px;
    border: 1px solid var(--ww-border-light);
}
.ww-ad-slot:empty { display: none; min-height: 0; padding: 0; margin: 0; }
.ww-ad-slot ins { display: block !important; }
.kwp-footer-ad {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 800;
    text-align: center;
    background: var(--footer-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 8px;
    border-top: 1px solid var(--ww-border);
}
.kwp-footer-ad:empty { display: none; padding: 0; }
.kwp-footer-ad ins { display: block !important; }
.kwp-panel-ad {
    min-height: 250px;
    margin: 12px 0;
    text-align: center;
    background: var(--ww-card-bg);
    border-radius: 6px;
    border: 1px solid var(--ww-border-light);
    padding: 6px;
}
.kwp-panel-ad:empty { display: none; min-height: 0; padding: 0; margin: 0; }
.kwp-panel-ad ins { display: block !important; }

/* Responsive */
@media (max-width: 768px) {
    .ww-panel-container {
        width: 100%;
        max-width: 100%;
        top: 0;
        height: 100%;
        height: 100dvh;
        z-index: 1002;
        border-right: none;
    }
}

@media (max-width: 480px) {
    .ww-header {
        padding: 10px 12px;
    }
    .ww-item {
        padding: 7px 10px;
        gap: 8px;
    }
    .ww-icao { font-size: 11px; }
    .ww-rank { width: 22px; height: 22px; font-size: 10px; }
    .ww-score { font-size: 12px; }
    .ww-breakdown { height: 1.5px; }
}

/* ==================== STATS WIDGETS ==================== */
.kwp-stats-widget {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.kwp-stats-title {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: var(--txt);
    border-bottom: 2px solid var(--pri);
    padding-bottom: 8px;
}
.kwp-stats-empty {
    padding: 20px;
    text-align: center;
    color: var(--muted);
    font-style: italic;
}
.kwp-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.kwp-stats-table th {
    background: var(--card-alt);
    color: var(--txt);
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
}
.kwp-stats-table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--bdr);
}
.kwp-stats-table tr:hover {
    background: var(--hover);
}
.kwp-stats-table .kwp-icao {
    font-weight: 700;
    font-family: monospace;
    color: var(--pri);
}
/* Score colors */
.kwp-score-extreme { color: #dc3545; font-weight: 700; }
.kwp-score-severe { color: #fd7e14; font-weight: 700; }
.kwp-score-moderate { color: #ffc107; font-weight: 600; }
.kwp-score-light { color: #28a745; }
.kwp-score-none { color: #6c757d; }

/* Live ticker - horizontal */
.kwp-ticker-horiz {
    overflow: hidden;
    white-space: nowrap;
    padding: 10px 0;
}
.kwp-ticker-scroll {
    overflow: hidden;
}
.kwp-ticker-track {
    display: inline-block;
    animation: kwpTickerScroll 30s linear infinite;
}
.kwp-ticker-item {
    display: inline-block;
    padding: 6px 16px;
    margin: 0 4px;
    background: var(--card);
    color: var(--txt);
    border-radius: 20px;
    font-size: 13px;
}
.kwp-ticker-item strong {
    color: var(--pri);
}
@keyframes kwpTickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Live ticker - vertical */
.kwp-ticker-vert .kwp-ticker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--bdr);
}
.kwp-ticker-vert .kwp-ticker-rank {
    width: 24px;
    height: 24px;
    background: var(--card);
    color: var(--txt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.kwp-ticker-icao {
    font-weight: 700;
    font-family: monospace;
    color: var(--pri);
    min-width: 50px;
}
.kwp-ticker-score {
    font-weight: 700;
    min-width: 30px;
}
.kwp-ticker-cat {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--card-alt);
}
.kwp-ticker-wx {
    color: var(--muted);
    font-size: 12px;
}

/* AI Insight widget */
.kwp-ai-insight {
    background: var(--card);
    color: var(--txt);
    border: 1px solid var(--bdr);
}
.kwp-ai-insight .kwp-stats-title {
    color: var(--pri);
    border-bottom-color: var(--pri);
}
.kwp-ai-content {
    line-height: 1.6;
    font-size: 14px;
}
.kwp-ai-footer {
    margin-top: 12px;
    font-size: 11px;
    color: var(--muted);
    text-align: right;
}

/* Chart containers */
.kwp-airport-history canvas,
.kwp-country-comparison canvas,
.kwp-geo-breakdown canvas {
    max-height: 400px;
}

@media (max-width: 768px) {
    .kwp-stats-widget { padding: 12px; }
    .kwp-stats-table { font-size: 11px; }
    .kwp-stats-table th, .kwp-stats-table td { padding: 4px 6px; }
    .kwp-ticker-item { padding: 4px 10px; font-size: 11px; }
}

/* Score color classes (used in ticker and stats) */
.kwp-sc-extreme { color: #ff3333; }
.kwp-sc-severe { color: #ff8800; }
.kwp-sc-moderate { color: #ffcc00; }
.kwp-sc-light { color: #44cc55; }
.kwp-sc-none { color: #888; }

/* Stats map markers */
.kwp-stats-pulse {
    animation: kwpStatsPulse 2s ease-in-out infinite;
}
@keyframes kwpStatsPulse {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}
.kwp-stats-tooltip {
    background: var(--card) !important;
    color: var(--pri) !important;
    border: 1px solid var(--bdr) !important;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 8px !important;
}
.kwp-stats-tooltip::before { border-top-color: var(--bdr) !important; }

/* Stats ad (inside panel) */
.kwp-so-ad {
    padding: 8px 10px;
    min-height: 50px;
}

/* ==================== BOTTOM TICKER (Worst 20 Scrolling) ==================== */
.kwp-bottom-ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: linear-gradient(135deg, var(--ticker-bg) 0%, var(--ticker-bg2) 100%);
    border-top: 2px solid var(--ticker-border);
    backdrop-filter: blur(12px);
    display: none;
    height: 48px;
    overflow: hidden;
}
.kwp-bottom-ticker.active { display: flex; align-items: center; }

.kwp-ticker-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.kwp-ticker-ad {
    flex-shrink: 0;
    padding: 0 8px;
    border-right: 1px solid var(--ww-border);
}

.kwp-ticker-track {
    display: flex;
    align-items: center;
    gap: 0;
    animation: kwp-ticker-scroll 60s linear infinite;
    white-space: nowrap;
}

.kwp-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes kwp-ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.kwp-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    cursor: pointer;
    border-right: 1px solid var(--ticker-item-border);
    transition: background 0.2s;
    flex-shrink: 0;
}
.kwp-ticker-item:hover {
    background: var(--ww-hover);
}

.kwp-ticker-rank {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ww-text-muted);
    font-weight: 600;
}

.kwp-ticker-icao {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--pri);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.kwp-ticker-cat {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    line-height: 1.4;
}

.kwp-ticker-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}
.kwp-ticker-score.kwp-sc-extreme { color: #ff4d6a; }
.kwp-ticker-score.kwp-sc-severe { color: #fd7e14; }
.kwp-ticker-score.kwp-sc-moderate { color: #ffc107; }
.kwp-ticker-score.kwp-sc-light { color: #28a745; }
.kwp-ticker-score.kwp-sc-none { color: #6c757d; }

.kwp-ticker-wx {
    font-size: 11px;
    color: var(--ticker-text);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ticker label pulse */
.kwp-bottom-ticker::before {
    content: 'WORST WEATHER';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: linear-gradient(90deg, rgba(220,53,69,0.9) 0%, rgba(220,53,69,0) 100%);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    z-index: 2;
    pointer-events: none;
    animation: kwp-ticker-label-pulse 2s ease-in-out infinite;
}

@keyframes kwp-ticker-label-pulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* Fade edges */
.kwp-ticker-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(90deg, transparent, var(--ticker-fade));
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 768px) {
    .kwp-bottom-ticker { height: 40px; }
    .kwp-ticker-item { padding: 4px 10px; gap: 4px; }
    .kwp-ticker-icao { font-size: 11px; }
    .kwp-ticker-wx { display: none; }
    .kwp-bottom-ticker::before { font-size: 8px; padding: 0 8px; }
    .kwp-ticker-ad { display: none; }
}

/* ==================== TOP 3 — MONOCHROME SHADOW DEPTH ==================== */

/* Top 1 — strongest shadow, lightest border */
.ww-item:nth-child(1) {
    background: rgba(255,255,255,0.02);
    box-shadow: inset 3px 0 0 rgba(255,255,255,0.3);
    border-left-color: transparent !important;
}
.ww-item:nth-child(1) .ww-rank {
    font-size: 13px;
    font-weight: 800;
    color: var(--ww-text);
}
.ww-item:nth-child(1) .ww-icao {
    color: var(--ww-text);
    font-weight: 700;
}

/* Top 2 — medium shadow depth */
.ww-item:nth-child(2) {
    background: rgba(255,255,255,0.012);
    box-shadow: inset 3px 0 0 rgba(255,255,255,0.2);
    border-left-color: transparent !important;
}
.ww-item:nth-child(2) .ww-rank {
    font-size: 12px;
    font-weight: 700;
    color: var(--ww-text-dim);
}

/* Top 3 — subtle shadow */
.ww-item:nth-child(3) {
    background: rgba(255,255,255,0.008);
    box-shadow: inset 3px 0 0 rgba(255,255,255,0.13);
    border-left-color: transparent !important;
}
.ww-item:nth-child(3) .ww-rank {
    font-size: 12px;
    font-weight: 600;
    color: var(--ww-text-dim);
}

/* ==================== LIGHT THEME OVERRIDES ==================== */

/* --- Layout & Glass Effects --- */
.kwp-root.kwp-light .kwp-header {
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.kwp-root.kwp-light .ww-panel-container {
    box-shadow: 4px 0 30px rgba(3,105,161,0.08);
}
.kwp-root.kwp-light .panel {
    box-shadow: -4px 0 30px rgba(3,105,161,0.08);
}
.kwp-root.kwp-light .kwp-bottom-ticker {
    box-shadow: 0 -2px 12px rgba(0,0,0,0.05);
}
.kwp-root.kwp-light .cbtn {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.kwp-root.kwp-light .cbtn:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* === WW Panel Light — Modern Dashboard === */

/* Items: card-like with subtle elevation */
.kwp-root.kwp-light .ww-item {
    border-bottom: none !important;
    border-left-width: 3px !important;
    margin: 2px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    transition: all 0.15s ease;
    padding: 10px 12px;
}
.kwp-root.kwp-light .ww-item:hover {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    transform: translateY(-1px);
}

/* Category left border — vivid accent stripe */
.kwp-root.kwp-light .ww-item.ww-lifr { border-left-color: #dc2626 !important; }
.kwp-root.kwp-light .ww-item.ww-ifr  { border-left-color: #ea580c !important; }
.kwp-root.kwp-light .ww-item.ww-mvfr { border-left-color: #2563eb !important; }
.kwp-root.kwp-light .ww-item.ww-vfr  { border-left-color: #16a34a !important; }

/* === Top 3 — Gold / Silver / Bronze premium look === */
.kwp-root.kwp-light .ww-item:nth-child(1) {
    background: linear-gradient(135deg, rgba(251,191,36,0.08) 0%, rgba(255,255,255,0.9) 60%) !important;
    box-shadow: 0 2px 8px rgba(245,158,11,0.12), 0 1px 3px rgba(0,0,0,0.04) !important;
    border-left-color: #f59e0b !important;
    border-left-width: 4px !important;
    padding: 12px 12px;
}
.kwp-root.kwp-light .ww-item:nth-child(2) {
    background: linear-gradient(135deg, rgba(148,163,184,0.1) 0%, rgba(255,255,255,0.9) 60%) !important;
    box-shadow: 0 2px 6px rgba(100,116,139,0.1), 0 1px 3px rgba(0,0,0,0.04) !important;
    border-left-color: #94a3b8 !important;
    border-left-width: 4px !important;
    padding: 11px 12px;
}
.kwp-root.kwp-light .ww-item:nth-child(3) {
    background: linear-gradient(135deg, rgba(180,83,9,0.06) 0%, rgba(255,255,255,0.9) 60%) !important;
    box-shadow: 0 2px 6px rgba(180,83,9,0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
    border-left-color: #b45309 !important;
    border-left-width: 4px !important;
    padding: 11px 12px;
}

/* === Rank — Circle badges === */
.kwp-root.kwp-light .ww-rank {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* #1 Gold circle */
.kwp-root.kwp-light .ww-item:nth-child(1) .ww-rank {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
    font-size: 12px !important;
    width: 30px !important;
    height: 30px !important;
    box-shadow: 0 2px 6px rgba(245,158,11,0.35);
}
/* #2 Silver circle */
.kwp-root.kwp-light .ww-item:nth-child(2) .ww-rank {
    background: linear-gradient(135deg, #94a3b8, #64748b) !important;
    color: #fff !important;
    font-size: 11px !important;
    width: 28px !important;
    height: 28px !important;
    box-shadow: 0 2px 4px rgba(100,116,139,0.3);
}
/* #3 Bronze circle */
.kwp-root.kwp-light .ww-item:nth-child(3) .ww-rank {
    background: linear-gradient(135deg, #b45309, #92400e) !important;
    color: #fff !important;
    font-size: 11px !important;
    width: 28px !important;
    height: 28px !important;
    box-shadow: 0 2px 4px rgba(180,83,9,0.3);
}

/* === ICAO — bold dark text === */
.kwp-root.kwp-light .ww-icao { color: #0f172a !important; font-weight: 700 !important; }
.kwp-root.kwp-light .ww-item:nth-child(1) .ww-icao { font-size: 13px; }

/* === Cat badge — gradient pill with glow === */
.kwp-root.kwp-light .ww-item.ww-lifr .ww-cat {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff !important; border-color: transparent !important;
    border-radius: 10px !important; padding: 2px 7px !important;
    font-weight: 700 !important; box-shadow: 0 1px 4px rgba(239,68,68,0.3);
}
.kwp-root.kwp-light .ww-item.ww-ifr .ww-cat {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: #fff !important; border-color: transparent !important;
    border-radius: 10px !important; padding: 2px 7px !important;
    font-weight: 700 !important; box-shadow: 0 1px 4px rgba(249,115,22,0.3);
}
.kwp-root.kwp-light .ww-item.ww-mvfr .ww-cat {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #fff !important; border-color: transparent !important;
    border-radius: 10px !important; padding: 2px 7px !important;
    font-weight: 700 !important; box-shadow: 0 1px 4px rgba(59,130,246,0.3);
}
.kwp-root.kwp-light .ww-item.ww-vfr .ww-cat {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #fff !important; border-color: transparent !important;
    border-radius: 10px !important; padding: 2px 7px !important;
    font-weight: 700 !important; box-shadow: 0 1px 4px rgba(34,197,94,0.3);
}

/* === Score — large, category-colored pill === */
.kwp-root.kwp-light .ww-score {
    font-size: 15px !important; font-weight: 800 !important;
    padding: 3px 10px !important; border-radius: 8px !important;
}
.kwp-root.kwp-light .ww-item.ww-lifr .ww-score { background: rgba(239,68,68,0.08) !important; color: #dc2626 !important; }
.kwp-root.kwp-light .ww-item.ww-ifr  .ww-score { background: rgba(249,115,22,0.08) !important; color: #ea580c !important; }
.kwp-root.kwp-light .ww-item.ww-mvfr .ww-score { background: rgba(59,130,246,0.08) !important; color: #2563eb !important; }
.kwp-root.kwp-light .ww-item.ww-vfr  .ww-score { background: rgba(34,197,94,0.08) !important; color: #16a34a !important; }
.kwp-root.kwp-light .ww-item:nth-child(1) .ww-score { font-size: 18px !important; }
.kwp-root.kwp-light .ww-item:nth-child(2) .ww-score { font-size: 16px !important; }

/* === WX phenomena — slightly colored === */
.kwp-root.kwp-light .ww-wx { color: #334155 !important; font-weight: 600 !important; }

/* === Tags — colorful micro-badges === */
.kwp-root.kwp-light .ww-tag {
    border-radius: 4px !important;
    font-weight: 600 !important;
    padding: 1px 5px !important;
    border: none !important;
}
.kwp-root.kwp-light .ww-tag-vis  { background: rgba(99,102,241,0.1) !important; color: #4338ca !important; }
.kwp-root.kwp-light .ww-tag-ceil { background: rgba(245,158,11,0.1) !important; color: #b45309 !important; }
.kwp-root.kwp-light .ww-tag-ice  { background: rgba(6,182,212,0.1) !important; color: #0e7490 !important; }
.kwp-root.kwp-light .ww-tag-fog  { background: rgba(100,116,139,0.1) !important; color: #475569 !important; }

/* === Tabs — bottom accent line === */
.kwp-root.kwp-light .ww-main-tab.active {
    color: #0c4a6e;
    border-bottom: 2px solid #0369a1;
    background: rgba(3,105,161,0.06);
}
.kwp-root.kwp-light .ww-stats-subtab.active {
    color: #0c4a6e;
    border-bottom: 2px solid #0369a1;
    background: rgba(3,105,161,0.06);
}

/* --- Ticker Light --- */
.kwp-root.kwp-light .kwp-ticker-icao {
    color: #0369a1;
    font-weight: 800;
}
.kwp-root.kwp-light .kwp-ticker-item {
    border-right-color: rgba(12,74,110,0.1);
}
.kwp-root.kwp-light .kwp-ticker-item:hover {
    background: rgba(14,165,233,0.08);
}
.kwp-root.kwp-light .kwp-ticker-rank {
    color: #3d6580;
}
.kwp-root.kwp-light .kwp-ticker-wx {
    color: #4a6a84;
}

/* Stats tooltip light */
.kwp-root.kwp-light .kwp-stats-tooltip {
    background: rgba(255,255,255,0.95) !important;
    color: #0369a1 !important;
    border: 1px solid rgba(14,165,233,0.3) !important;
}

/* Theme toggle light overrides handled by .theme-toggle.is-light */

/* Breakdown bar in light — thicker, vivid, rounded */
.kwp-root.kwp-light .ww-breakdown {
    background: rgba(0,0,0,0.04);
    height: 3px;
    border-radius: 2px;
    margin-top: 5px;
}
.kwp-root.kwp-light .ww-bd { opacity: 0.8; border-radius: 2px; }
.kwp-root.kwp-light .ww-item.ww-lifr .ww-bd { background: #ef4444; }
.kwp-root.kwp-light .ww-item.ww-ifr  .ww-bd { background: #f97316; }
.kwp-root.kwp-light .ww-item.ww-mvfr .ww-bd { background: #3b82f6; }
.kwp-root.kwp-light .ww-item.ww-vfr  .ww-bd { background: #22c55e; }

/* ============================================================
   SCROLL-DOWN ARROW — Navigate to Educational Content
   ============================================================ */

.kwp-scroll-arrow {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 800;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: rgba(255,255,255,0.85);
    padding: 10px 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(15,23,42,0.75), rgba(30,41,59,0.8));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    transition: all 0.3s ease;
    animation: kwpArrowBounce 3s ease-in-out infinite;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05) inset;
}

.kwp-scroll-arrow:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(15,23,42,0.9), rgba(30,41,59,0.95));
    border-color: rgba(255,255,255,0.25);
    transform: translateX(-50%) translateY(-3px);
    animation: none;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1) inset;
}

.kwp-scroll-arrow svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.kwp-arrow-labels {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.kwp-arrow-labels > span:first-child {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Animated Statistics Badge */
.kwp-arrow-stats-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6, #3b82f6, #f59e0b);
    background-size: 300% 300%;
    color: #fff;
    animation: kwpStatsBadgeGlow 3s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(245,158,11,0.4), 0 0 2px rgba(239,68,68,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.kwp-arrow-stats-badge::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-25deg);
    animation: kwpStatsShine 3s ease-in-out infinite;
}

@keyframes kwpStatsBadgeGlow {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: 0 0 8px rgba(245,158,11,0.4), 0 0 2px rgba(239,68,68,0.3);
    }
    33% {
        background-position: 50% 50%;
        box-shadow: 0 0 12px rgba(239,68,68,0.5), 0 0 4px rgba(139,92,246,0.3);
    }
    66% {
        background-position: 100% 50%;
        box-shadow: 0 0 12px rgba(59,130,246,0.5), 0 0 4px rgba(245,158,11,0.3);
    }
}

@keyframes kwpStatsShine {
    0%, 70%, 100% { left: -75%; }
    85% { left: 125%; }
}

@keyframes kwpArrowBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(4px); }
}

/* Light theme arrow */
.kwp-root.kwp-light .kwp-scroll-arrow {
    color: rgba(12,35,64,0.8);
    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(241,245,249,0.85));
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03) inset;
}
.kwp-root.kwp-light .kwp-scroll-arrow:hover {
    color: #0c2340;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(241,245,249,0.98));
    border-color: rgba(0,0,0,0.15);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.05) inset;
}

/* Hide arrow on small screens where map isn't full-height */
@media (max-height: 500px) {
    .kwp-scroll-arrow { display: none; }
}

/* ============================================================
   AIRPORT SEO CONTENT — Per-Airport Server-Rendered Content
   ============================================================ */

.kwp-airport-seo {
    --apt-bg: #080d1a;
    --apt-card: #111827;
    --apt-border: rgba(56,189,248,0.12);
    --apt-text: #c8d6e5;
    --apt-heading: #f1f5f9;
    --apt-muted: #8899b0;
    --apt-accent: #38bdf8;
    --apt-link: #38bdf8;

    background: var(--apt-bg);
    color: var(--apt-text);
    font-family: 'Inter', -apple-system, sans-serif;
    line-height: 1.7;
    padding: 0;
}

/* Light theme */
.kwp-airport-seo.kwp-light {
    --apt-bg: #f0f4f8;
    --apt-card: #ffffff;
    --apt-border: #d0dbe8;
    --apt-text: #374151;
    --apt-heading: #1a2744;
    --apt-muted: #5a7089;
    --apt-accent: #0369a1;
    --apt-link: #0369a1;
}

.kwp-airport-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 48px 24px 60px;
}

/* Hero */
.apt-hero {
    text-align: center;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--apt-border);
}
.apt-hero h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--apt-heading);
    margin: 0 0 16px;
    line-height: 1.3;
}
.apt-lead {
    font-size: 15px;
    color: var(--apt-text);
    max-width: 700px;
    margin: 0 auto 20px;
    line-height: 1.75;
}
.apt-breadcrumb {
    font-size: 12px;
    color: var(--apt-muted);
}
.apt-breadcrumb a {
    color: var(--apt-link);
    text-decoration: none;
}
.apt-breadcrumb a:hover {
    text-decoration: underline;
}

/* Sections */
.apt-section {
    margin-bottom: 40px;
}
.apt-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--apt-heading);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--apt-border);
}
.apt-section p {
    font-size: 15px;
    color: var(--apt-text);
    margin: 0 0 14px;
    line-height: 1.75;
}

/* Facts Grid */
.apt-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.apt-fact {
    background: var(--apt-card);
    border: 1px solid var(--apt-border);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.apt-fact-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--apt-muted);
}
.apt-fact-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--apt-heading);
    font-family: 'JetBrains Mono', monospace;
}

/* Badges */
.apt-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    margin-right: 6px;
    margin-top: 8px;
}
.apt-badge-hub {
    background: rgba(56,189,248,0.12);
    color: var(--apt-accent);
    border: 1px solid rgba(56,189,248,0.25);
}
.apt-badge-mtn {
    background: rgba(249,115,22,0.1);
    color: #f97316;
    border: 1px solid rgba(249,115,22,0.25);
}
.apt-badge-coast {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.25);
}

/* FAQ */
.apt-faq-item {
    background: var(--apt-card);
    border: 1px solid var(--apt-border);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
}
.apt-faq-item h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--apt-heading);
    margin: 0 0 8px;
}
.apt-faq-item p {
    font-size: 14px;
    color: var(--apt-text);
    margin: 0;
    line-height: 1.7;
}

/* Nearby Airports */
.apt-nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.apt-nearby-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: var(--apt-card);
    border: 1px solid var(--apt-border);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s;
}
.apt-nearby-link:hover {
    border-color: var(--apt-accent);
    background: rgba(56,189,248,0.04);
}
.apt-nb-icao {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--apt-accent);
}
.apt-nb-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--apt-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.apt-nb-city {
    font-size: 11px;
    color: var(--apt-muted);
}

/* Responsive */
@media (max-width: 768px) {
    .kwp-airport-inner { padding: 32px 16px 40px; }
    .apt-hero h1 { font-size: 20px; }
    .apt-facts-grid { grid-template-columns: repeat(2, 1fr); }
    .apt-nearby-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .apt-facts-grid { grid-template-columns: 1fr; }
    .apt-nearby-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EDUCATIONAL CONTENT SECTION — SEO + AdSense Content
   ============================================================ */

/* --- Base / Dark Theme (default) --- */
.kwp-edu-wrap {
    --edu-bg: #080d1a;
    --edu-section-bg: #111827;
    --edu-card-bg: #1a2236;
    --edu-border: rgba(56,189,248,0.12);
    --edu-text: #e2e8f0;
    --edu-text-muted: #94a3b8;
    --edu-heading: #f1f5f9;
    --edu-accent: #38bdf8;
    --edu-accent2: #818cf8;
    --edu-code-bg: rgba(56,189,248,0.08);
    --edu-code-text: #22d3ee;
    --edu-hero-gradient: linear-gradient(135deg, #0c1929 0%, #111827 50%, #0f1a2e 100%);
    --edu-note-bg: rgba(56,189,248,0.06);
    --edu-note-border: rgba(56,189,248,0.25);
    --edu-table-head: #1a2236;
    --edu-table-stripe: rgba(255,255,255,0.02);
    --edu-table-hover: rgba(56,189,248,0.06);
    --edu-faq-bg: #111827;
    --edu-faq-border: rgba(56,189,248,0.1);
    --edu-footer-bg: #060a14;
    --edu-footer-text: #64748b;
    --edu-footer-link: #38bdf8;
    --edu-shadow: 0 4px 24px rgba(0,0,0,0.3);
    --edu-glow: 0 0 30px rgba(56,189,248,0.06);

    position: relative;
    z-index: 1;
    background: var(--edu-bg);
    color: var(--edu-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
    overflow-x: hidden;
}

/* --- Light Theme Override --- */
.kwp-edu-wrap.kwp-light {
    --edu-bg: #f0f4f8;
    --edu-section-bg: #ffffff;
    --edu-card-bg: #f8fafc;
    --edu-border: #d0dbe8;
    --edu-text: #1e293b;
    --edu-text-muted: #64748b;
    --edu-heading: #0c2340;
    --edu-accent: #0369a1;
    --edu-accent2: #6366f1;
    --edu-code-bg: rgba(3,105,161,0.06);
    --edu-code-text: #0c4a6e;
    --edu-hero-gradient: linear-gradient(135deg, #e0edf8 0%, #f0f4f8 50%, #e8f0f8 100%);
    --edu-note-bg: rgba(3,105,161,0.04);
    --edu-note-border: rgba(3,105,161,0.25);
    --edu-table-head: #f0f4f8;
    --edu-table-stripe: rgba(0,0,0,0.02);
    --edu-table-hover: rgba(3,105,161,0.04);
    --edu-faq-bg: #ffffff;
    --edu-faq-border: #d0dbe8;
    --edu-footer-bg: #e0edf8;
    --edu-footer-text: #5b7a94;
    --edu-footer-link: #0369a1;
    --edu-shadow: 0 4px 24px rgba(0,0,0,0.06);
    --edu-glow: none;
}

/* Inner container */
.kwp-edu-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Hero --- */
.edu-hero {
    text-align: center;
    padding: 80px 20px 60px;
    background: var(--edu-hero-gradient);
    border-bottom: 1px solid var(--edu-border);
}

.edu-hero h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    color: var(--edu-heading);
    margin: 0 0 20px;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.edu-hero-sub {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--edu-text-muted);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.8;
}

.edu-hero-sub strong {
    color: var(--edu-accent);
}

/* --- Sections --- */
.edu-section {
    padding: 56px 0;
    border-bottom: 1px solid var(--edu-border);
}

.edu-section h2 {
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--edu-heading);
    margin: 0 0 20px;
    letter-spacing: -0.3px;
}

.edu-section p {
    font-size: 1rem;
    color: var(--edu-text);
    margin: 0 0 18px;
    max-width: 800px;
}

.edu-section p strong {
    color: var(--edu-accent);
}

.edu-section code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88em;
    background: var(--edu-code-bg);
    color: var(--edu-code-text);
    padding: 2px 7px;
    border-radius: 4px;
}

/* --- Code Example Box --- */
.edu-code-box {
    background: var(--edu-card-bg);
    border: 1px solid var(--edu-border);
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
    box-shadow: var(--edu-shadow);
}

.edu-code-header {
    background: linear-gradient(90deg, var(--edu-accent), var(--edu-accent2));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 20px;
    letter-spacing: 0.5px;
}

.edu-code-content {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.8rem, 2vw, 1rem);
    color: var(--edu-code-text);
    padding: 20px;
    background: var(--edu-code-bg);
    word-break: break-all;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

/* --- Decode Grid --- */
.edu-decode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.edu-decode-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--edu-card-bg);
    border: 1px solid var(--edu-border);
    border-radius: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.edu-decode-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--edu-glow);
}

.edu-decode-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--edu-accent);
    background: var(--edu-code-bg);
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    min-width: 80px;
    text-align: center;
}

.edu-decode-desc {
    font-size: 0.9rem;
    color: var(--edu-text-muted);
}

/* --- Flight Category Cards --- */
.edu-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.edu-cat-card {
    padding: 24px;
    border-radius: 14px;
    border: 1px solid var(--edu-border);
    background: var(--edu-card-bg);
    box-shadow: var(--edu-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.edu-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--edu-shadow), var(--edu-glow);
}

.edu-cat-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    padding: 5px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.edu-cat-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--edu-heading);
    margin-bottom: 6px;
}

.edu-cat-criteria {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--edu-accent);
    margin-bottom: 10px;
    padding: 4px 0;
}

.edu-cat-card p {
    font-size: 0.9rem;
    color: var(--edu-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* Category-specific borders */
.edu-cat-vfr { border-left: 4px solid #22c55e; }
.edu-cat-mvfr { border-left: 4px solid #3b82f6; }
.edu-cat-ifr { border-left: 4px solid #f97316; }
.edu-cat-lifr { border-left: 4px solid #ef4444; }

/* --- Weather Table --- */
.edu-table-wrap {
    overflow-x: auto;
    margin: 24px 0;
    border-radius: 12px;
    border: 1px solid var(--edu-border);
    box-shadow: var(--edu-shadow);
}

.edu-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.edu-table thead {
    background: var(--edu-table-head);
}

.edu-table th {
    text-align: left;
    padding: 14px 18px;
    font-weight: 600;
    color: var(--edu-accent);
    border-bottom: 2px solid var(--edu-border);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.edu-table td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--edu-border);
    color: var(--edu-text);
}

.edu-table tbody tr:nth-child(even) {
    background: var(--edu-table-stripe);
}

.edu-table tbody tr:hover {
    background: var(--edu-table-hover);
}

.edu-table code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88em;
    font-weight: 700;
    color: var(--edu-accent);
    background: var(--edu-code-bg);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Severity indicators */
.edu-sev-low { color: #22c55e; font-weight: 600; }
.edu-sev-mod { color: #f59e0b; font-weight: 600; }
.edu-sev-high { color: #f97316; font-weight: 600; }
.edu-sev-crit { color: #ef4444; font-weight: 700; }

/* --- Cloud Grid --- */
.edu-cloud-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 24px 0;
}

.edu-cloud-item {
    text-align: center;
    padding: 20px 12px;
    background: var(--edu-card-bg);
    border: 1px solid var(--edu-border);
    border-radius: 12px;
    transition: transform 0.2s;
}

.edu-cloud-item:hover {
    transform: translateY(-2px);
}

.edu-cloud-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--edu-accent);
    margin-bottom: 6px;
}

.edu-cloud-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--edu-heading);
    margin-bottom: 4px;
}

.edu-cloud-oktas {
    font-size: 0.82rem;
    color: var(--edu-text-muted);
}

/* --- Note Box --- */
.edu-note {
    padding: 16px 20px;
    background: var(--edu-note-bg);
    border-left: 4px solid var(--edu-note-border);
    border-radius: 0 10px 10px 0;
    font-size: 0.92rem;
    color: var(--edu-text);
    margin: 16px 0;
    line-height: 1.7;
}

.edu-note strong {
    color: var(--edu-accent);
}

.edu-note code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.86em;
    background: var(--edu-code-bg);
    color: var(--edu-code-text);
    padding: 1px 6px;
    border-radius: 3px;
}

/* --- Score Grid --- */
.edu-score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.edu-score-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--edu-card-bg);
    border: 1px solid var(--edu-border);
    border-radius: 10px;
    transition: transform 0.15s;
}

.edu-score-item:hover {
    transform: translateX(4px);
}

.edu-score-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--edu-accent);
    background: var(--edu-code-bg);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.edu-score-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.edu-score-detail strong {
    font-size: 0.95rem;
    color: var(--edu-heading);
}

.edu-score-detail span {
    font-size: 0.82rem;
    color: var(--edu-text-muted);
}

/* --- FAQ --- */
.edu-faq-item {
    padding: 24px;
    margin-bottom: 14px;
    background: var(--edu-faq-bg);
    border: 1px solid var(--edu-faq-border);
    border-radius: 12px;
    transition: border-color 0.2s;
}

.edu-faq-item:hover {
    border-color: var(--edu-accent);
}

.edu-faq-item h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--edu-heading);
    margin: 0 0 12px;
}

.edu-faq-item p {
    font-size: 0.95rem;
    color: var(--edu-text);
    margin: 0;
    line-height: 1.8;
    max-width: none;
}

/* --- Footer --- */
.edu-footer {
    padding: 40px 0;
    background: var(--edu-footer-bg);
    text-align: center;
    border-top: 1px solid var(--edu-border);
}

.edu-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.edu-footer p {
    font-size: 0.95rem;
    color: var(--edu-footer-text);
    margin: 0 0 8px;
}

.edu-footer a {
    color: var(--edu-footer-link);
    text-decoration: none;
    font-weight: 600;
}

.edu-footer a:hover {
    text-decoration: underline;
}

.edu-footer-note {
    font-size: 0.82rem !important;
    color: var(--edu-footer-text) !important;
    opacity: 0.8;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .kwp-edu-inner { padding: 0 16px; }
    .edu-hero { padding: 50px 16px 40px; }
    .edu-section { padding: 36px 0; }
    .edu-decode-grid { grid-template-columns: 1fr; }
    .edu-cats-grid { grid-template-columns: 1fr; }
    .edu-score-grid { grid-template-columns: 1fr; }
    .edu-cloud-grid { grid-template-columns: repeat(2, 1fr); }
    .edu-table { font-size: 0.82rem; }
    .edu-table th, .edu-table td { padding: 10px 12px; }
    .edu-faq-item { padding: 18px; }
}

/* ============================================================
   PERFORMANCE: Layout Containment
   ============================================================ */
.ww-panel-container { contain: layout style; }
.ww-list { contain: layout style; }
.panel { contain: layout style; }
.kwp-bottom-ticker { contain: layout style; }

/* ============================================================
   ACCESSIBILITY: Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .ww-item { transition: none !important; }
    .ww-item:hover { transform: none !important; }
}

/* ============================================================
   PER-AIRPORT STATS DRILL-DOWN (WW Panel)
   ============================================================ */
.ww-airport-stats-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ww-border);
    background: var(--ww-card-bg);
    flex-shrink: 0;
}
.ww-airport-stats-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}
.ww-stats-back {
    background: none;
    border: 1px solid var(--ww-border);
    color: var(--ww-text);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 0.2s;
    line-height: 1;
}
.ww-stats-back:hover { background: rgba(255,255,255,0.08); }
.ww-stats-icao {
    font-weight: 700;
    font-size: 14px;
    color: var(--ww-text);
    letter-spacing: 0.5px;
}
.ww-stats-aptname {
    font-size: 11px;
    color: var(--ww-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Summary Cards */
.ww-stats-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px 10px;
}
.ww-stats-card {
    background: var(--ww-item-bg);
    border: 1px solid var(--ww-border);
    border-radius: 6px;
    padding: 8px 10px;
    text-align: center;
}
.ww-stats-card.ww-sc-full { grid-column: 1 / -1; }
.ww-sc-label {
    display: block;
    font-size: 9px;
    color: var(--ww-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.ww-sc-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--ww-text);
    line-height: 1.2;
}
.ww-sc-worst { color: #ef4444; }

/* Flight Category Distribution Bar */
.ww-cat-dist {
    padding: 6px 10px 10px;
}
.ww-cat-dist-label {
    font-size: 10px;
    color: var(--ww-text-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ww-cat-bar {
    display: flex;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    font-size: 9px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    color: #fff;
}
.ww-cb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; }
.ww-cb-lifr { background: #dc2626; }
.ww-cb-ifr { background: #ea580c; }
.ww-cb-mvfr { background: #2563eb; }
.ww-cb-vfr { background: #16a34a; }
.ww-cat-legend {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.ww-cl {
    font-size: 9px;
    font-weight: 500;
}
.ww-cl-lifr { color: #dc2626; }
.ww-cl-ifr { color: #ea580c; }
.ww-cl-mvfr { color: #2563eb; }
.ww-cl-vfr { color: #16a34a; }

/* Period Comparison Table */
.ww-period-table {
    padding: 6px 10px;
}
.ww-pt-title {
    font-size: 10px;
    color: var(--ww-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 5px;
}
.ww-pt {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}
.ww-pt th {
    background: var(--ww-card-bg);
    color: var(--ww-text-muted);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 5px;
    text-align: center;
    border-bottom: 1px solid var(--ww-border);
}
.ww-pt td {
    padding: 5px 5px;
    text-align: center;
    color: var(--ww-text);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 10px;
}
.ww-pt-period {
    text-align: left !important;
    font-family: inherit !important;
    font-weight: 600;
    font-size: 10px !important;
}

/* Worst Conditions Card */
.ww-worst-card {
    margin: 6px 10px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    padding: 10px;
    background: rgba(239, 68, 68, 0.05);
}
.ww-wc-title {
    font-size: 11px;
    font-weight: 600;
    color: #ef4444;
    margin-bottom: 8px;
}
.ww-wc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}
.ww-wc-item {
    text-align: center;
}
.ww-wc-l {
    display: block;
    font-size: 8px;
    color: var(--ww-text-muted);
    text-transform: uppercase;
}
.ww-wc-v {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ww-text);
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.ww-wc-wx {
    margin-top: 6px;
    font-size: 10px;
    color: #f59e0b;
    font-weight: 500;
}
.ww-wc-raw {
    margin-top: 4px;
    font-size: 9px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--ww-text-muted);
    background: rgba(0,0,0,0.2);
    padding: 6px 8px;
    border-radius: 4px;
    word-break: break-all;
    line-height: 1.4;
}

/* Recent Observations */
.ww-recent-obs {
    padding: 6px 10px 10px;
}
.ww-ro-title {
    font-size: 10px;
    color: var(--ww-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 5px;
}
.ww-ro-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
    font-size: 10px;
    border-left: 3px solid transparent;
}
.ww-ro-item.ww-lifr { border-left-color: #dc2626; background: rgba(220,38,38,0.06); }
.ww-ro-item.ww-ifr { border-left-color: #ea580c; background: rgba(234,88,12,0.06); }
.ww-ro-item.ww-mvfr { border-left-color: #2563eb; background: rgba(37,99,235,0.06); }
.ww-ro-item.ww-vfr { border-left-color: #16a34a; background: rgba(22,163,74,0.06); }
.ww-ro-time {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 9px;
    color: var(--ww-text-muted);
    min-width: 85px;
}
.ww-ro-score {
    font-weight: 700;
    color: var(--ww-text);
    min-width: 22px;
    text-align: center;
}
.ww-ro-cat {
    font-size: 9px;
    font-weight: 600;
    min-width: 32px;
}
.ww-ro-det {
    font-size: 9px;
    color: var(--ww-text-muted);
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.ww-ro-wx {
    font-size: 9px;
    color: #f59e0b;
    font-weight: 500;
    margin-left: auto;
}

/* ============================================================
   EXPLORER GUIDE: Weather Statistics Section
   ============================================================ */
.apt-stats-section { margin-top: 1rem; }
.apt-stats-intro {
    font-size: 0.95rem;
    color: #94a3b8;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.apt-stats-empty {
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}
.apt-stats-empty p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

/* Stats Performance Table */
.apt-stats-table-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}
.apt-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.apt-stats-table thead tr {
    background: rgba(255,255,255,0.05);
}
.apt-stats-table th {
    padding: 10px 12px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.apt-stats-table td {
    padding: 10px 12px;
    text-align: center;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.85rem;
}
.apt-stats-table td:first-child {
    text-align: left;
    font-family: inherit;
}
.apt-stats-table tbody tr:hover {
    background: rgba(255,255,255,0.03);
}
.apt-cat-lifr { color: #ef4444; font-weight: 700; }
.apt-cat-ifr { color: #f97316; font-weight: 700; }
.apt-cat-mvfr { color: #3b82f6; font-weight: 700; }

/* Flight Category Distribution Bar (Explorer Guide) */
.apt-cat-distribution {
    margin-bottom: 1.5rem;
}
.apt-cat-distribution h3 {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: #e2e8f0;
}
.apt-cat-bar {
    display: flex;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
    color: #fff;
}
.apt-cb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.apt-cb-lifr { background: #dc2626; }
.apt-cb-ifr { background: #ea580c; }
.apt-cb-mvfr { background: #2563eb; }
.apt-cb-vfr { background: #16a34a; }

/* Worst Conditions Card (Explorer Guide) */
.apt-stats-worst-card {
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    background: rgba(239, 68, 68, 0.04);
}
.apt-stats-worst-card h3 {
    font-size: 0.95rem;
    color: #ef4444;
    margin-bottom: 12px;
}
.apt-wc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
.apt-wc-item { text-align: center; }
.apt-wc-l {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.apt-wc-v {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2e8f0;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.apt-stats-raw {
    font-size: 0.8rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #94a3b8;
    background: rgba(0,0,0,0.25);
    padding: 10px 12px;
    border-radius: 6px;
    word-break: break-all;
    line-height: 1.5;
    margin-top: 8px;
}

/* ============================================================
   LIGHT THEME: Per-Airport Stats & Explorer Guide Stats
   ============================================================ */
.kwp-root.kwp-light .ww-stats-back { border-color: #e2e8f0; color: #334155; }
.kwp-root.kwp-light .ww-stats-back:hover { background: rgba(0,0,0,0.04); }
.kwp-root.kwp-light .ww-stats-icao { color: #1e293b; }
.kwp-root.kwp-light .ww-stats-aptname { color: #64748b; }
.kwp-root.kwp-light .ww-stats-card { background: #f8fafc; border-color: #e2e8f0; }
.kwp-root.kwp-light .ww-sc-value { color: #1e293b; }
.kwp-root.kwp-light .ww-pt th { background: #f1f5f9; color: #64748b; }
.kwp-root.kwp-light .ww-pt td { color: #334155; border-bottom-color: rgba(0,0,0,0.05); }
.kwp-root.kwp-light .ww-worst-card { background: rgba(239,68,68,0.04); border-color: rgba(239,68,68,0.2); }
.kwp-root.kwp-light .ww-wc-v { color: #1e293b; }
.kwp-root.kwp-light .ww-wc-raw { background: rgba(0,0,0,0.04); color: #64748b; }
.kwp-root.kwp-light .ww-ro-item.ww-lifr { background: rgba(220,38,38,0.05); }
.kwp-root.kwp-light .ww-ro-item.ww-ifr { background: rgba(234,88,12,0.05); }
.kwp-root.kwp-light .ww-ro-item.ww-mvfr { background: rgba(37,99,235,0.05); }
.kwp-root.kwp-light .ww-ro-item.ww-vfr { background: rgba(22,163,74,0.05); }
.kwp-root.kwp-light .ww-ro-score { color: #1e293b; }

/* Explorer Guide Light Theme */
.kwp-root.kwp-light .apt-stats-intro { color: #64748b; }
.kwp-root.kwp-light .apt-stats-empty { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); }
.kwp-root.kwp-light .apt-stats-empty p { color: #94a3b8; }
.kwp-root.kwp-light .apt-stats-table-wrap { border-color: #e2e8f0; }
.kwp-root.kwp-light .apt-stats-table thead tr { background: #f1f5f9; }
.kwp-root.kwp-light .apt-stats-table th { color: #64748b; border-bottom-color: #e2e8f0; }
.kwp-root.kwp-light .apt-stats-table td { color: #334155; border-bottom-color: #f1f5f9; }
.kwp-root.kwp-light .apt-stats-table tbody tr:hover { background: #f8fafc; }
.kwp-root.kwp-light .apt-stats-worst-card { background: rgba(239,68,68,0.03); border-color: rgba(239,68,68,0.15); }
.kwp-root.kwp-light .apt-wc-v { color: #1e293b; }
.kwp-root.kwp-light .apt-stats-raw { background: #f1f5f9; color: #64748b; }
.kwp-root.kwp-light .apt-cat-distribution h3 { color: #1e293b; }

/* ============================================================
   EXPLORER GUIDE: Geographic Influences Section
   ============================================================ */
.apt-geo-section {
    margin-bottom: 1.5rem;
}
.apt-geo-section h3 {
    font-size: 1rem;
    color: #e2e8f0;
    margin-bottom: 10px;
}
.apt-geo-grid {
    display: grid;
    gap: 10px;
}
.apt-geo-card {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    transition: border-color 0.2s;
}
.apt-geo-card:hover { border-color: rgba(255,255,255,0.15); }
.apt-geo-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1.4;
}
.apt-geo-body { flex: 1; min-width: 0; }
.apt-geo-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #e2e8f0;
    margin-bottom: 4px;
}
.apt-geo-desc {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.5;
}

/* Explorer Guide: Analysis Block Shared Styles */
.apt-analysis-block {
    margin-bottom: 1.5rem;
}
.apt-analysis-block h3 {
    font-size: 1rem;
    color: #e2e8f0;
    margin-bottom: 10px;
}
.apt-analysis-block h3 small {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 400;
}

/* Mini Card Grid (Explorer Guide) */
.apt-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}
.apt-mini-grid-3 { grid-template-columns: repeat(3, 1fr); }
.apt-mini-card {
    text-align: center;
    padding: 10px 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
}
.apt-mc-val {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2e8f0;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.apt-mc-lbl {
    display: block;
    font-size: 0.68rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 3px;
}
.apt-compact-table th, .apt-compact-table td { padding: 8px 10px; }

/* Category Summary Text */
.apt-cat-summary {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 8px;
    line-height: 1.5;
}

/* Weather Phenomena Bar */
.apt-phen-bar {
    width: 100%;
    height: 12px;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    overflow: hidden;
}
.apt-phen-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 6px;
    transition: width 0.4s ease;
}

/* Worst Conditions Danger Score */
.apt-wc-danger { color: #ef4444 !important; font-size: 1.3rem !important; }

/* WX String line */
.apt-wc-wxstring {
    font-size: 0.82rem;
    color: #f97316;
    margin-top: 6px;
    font-weight: 500;
}

/* Hourly Chart (Explorer Guide) */
.apt-hourly-chart {
    display: flex;
    align-items: flex-end;
    height: 120px;
    gap: 2px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
    padding: 8px 4px 0;
    border: 1px solid rgba(255,255,255,0.06);
}
.apt-hb-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    cursor: default;
}
.apt-hb-bar {
    width: 100%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    transition: height 0.3s;
}
.apt-hb-good { background: #22c55e; }
.apt-hb-caution { background: #eab308; }
.apt-hb-moderate { background: #f97316; }
.apt-hb-severe { background: #ef4444; }
.apt-hb-lbl {
    font-size: 0.55rem;
    color: #64748b;
    margin-top: 2px;
    font-family: 'SF Mono', monospace;
}
.apt-hourly-legend {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.apt-hl {
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 4px;
}
.apt-hl::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.apt-hl-good::before { background: #22c55e; }
.apt-hl-caution::before { background: #eab308; }
.apt-hl-moderate::before { background: #f97316; }
.apt-hl-severe::before { background: #ef4444; }

/* ============================================================
   WW PANEL: Airport Info Card
   ============================================================ */
.ww-info-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}
.ww-ic-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 6px;
}
.ww-ic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
}
.ww-ic-item {
    display: flex;
    flex-direction: column;
}
.ww-ic-item.ww-ic-full { grid-column: 1 / -1; }
.ww-ic-l {
    font-size: 0.62rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ww-ic-v {
    font-size: 0.76rem;
    color: #e2e8f0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   WW PANEL: Geographic Influences
   ============================================================ */
.ww-geo-section {
    margin-bottom: 10px;
}
.ww-geo-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 6px;
}
.ww-geo-item {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
    margin-bottom: 4px;
    border: 1px solid rgba(255,255,255,0.05);
}
.ww-geo-icon {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1.3;
}
.ww-geo-body { flex: 1; min-width: 0; }
.ww-geo-name {
    font-size: 0.74rem;
    font-weight: 600;
    color: #e2e8f0;
}
.ww-geo-desc {
    font-size: 0.68rem;
    color: #94a3b8;
    line-height: 1.4;
    margin-top: 2px;
}

/* ============================================================
   WW PANEL: Analysis Block
   ============================================================ */
.ww-analysis-block {
    margin-bottom: 10px;
}
.ww-ab-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 6px;
}

/* Mini Card Grid (WW Panel) */
.ww-mini-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-top: 4px;
}
.ww-mini-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ww-mini-card {
    text-align: center;
    padding: 6px 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 5px;
}
.ww-mc-v {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #e2e8f0;
    font-family: 'SF Mono', monospace;
}
.ww-mc-l {
    display: block;
    font-size: 0.58rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-top: 2px;
}

/* ============================================================
   WW PANEL: Visibility & Ceiling Bars
   ============================================================ */
.ww-vis-bars {
    margin-bottom: 6px;
}
.ww-vb-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.ww-vb-label {
    font-size: 0.66rem;
    color: #94a3b8;
    width: 50px;
    flex-shrink: 0;
    text-align: right;
    font-family: 'SF Mono', monospace;
}
.ww-vb-track {
    flex: 1;
    height: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 5px;
    overflow: hidden;
}
.ww-vb-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
}
.ww-vb-lifr { background: #dc2626; }
.ww-vb-ifr { background: #ea580c; }
.ww-vb-mvfr { background: #3b82f6; }
.ww-vb-ok { background: #eab308; }
.ww-vb-vfr { background: #22c55e; }
.ww-vb-pct {
    font-size: 0.66rem;
    color: #e2e8f0;
    font-weight: 600;
    width: 30px;
    text-align: right;
    font-family: 'SF Mono', monospace;
}

/* ============================================================
   WW PANEL: Weather Phenomena List
   ============================================================ */
.ww-wx-list {
    margin-bottom: 6px;
}
.ww-wx-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}
.ww-wx-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}
.ww-wx-name {
    font-size: 0.7rem;
    color: #e2e8f0;
    width: 68px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ww-wx-bar-wrap {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.ww-wx-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 4px;
    transition: width 0.4s ease;
}
.ww-wx-pct {
    font-size: 0.62rem;
    color: #94a3b8;
    font-weight: 600;
    width: 26px;
    text-align: right;
    font-family: 'SF Mono', monospace;
}

/* ============================================================
   WW PANEL: Hourly Chart
   ============================================================ */
.ww-hourly-chart {
    display: flex;
    align-items: flex-end;
    height: 70px;
    gap: 1px;
    background: rgba(255,255,255,0.02);
    border-radius: 5px;
    padding: 4px 2px 0;
    border: 1px solid rgba(255,255,255,0.06);
}
.ww-hb-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    cursor: default;
}
.ww-hb-bar {
    width: 100%;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    transition: height 0.3s;
}
.ww-hb-good { background: #22c55e; }
.ww-hb-caution { background: #eab308; }
.ww-hb-moderate { background: #f97316; }
.ww-hb-severe { background: #ef4444; }
.ww-hb-lbl {
    font-size: 0.42rem;
    color: #64748b;
    margin-top: 1px;
    font-family: 'SF Mono', monospace;
}

/* WW Panel: No data bar */
.ww-hb-nodata { background: rgba(100,116,139,0.2); }
/* WW Panel: Trend arrows */
.ww-trend-arrow { font-size: 1.1rem; margin-left: 6px; font-weight: 700; }
.ww-trend-worse { color: #ef4444; }
.ww-trend-better { color: #22c55e; }
.ww-trend-stable { color: #94a3b8; }
/* WW Panel: Severity band lines */
.ww-chart-bands { position: relative; height: 0; z-index: 1; pointer-events: none; }
.ww-band-line { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,0.15); }
.ww-band-line span { font-size: 0.5rem; color: #64748b; position: absolute; right: 2px; top: -8px; }
.ww-band-severe { border-color: rgba(239,68,68,0.3); }
.ww-band-moderate { border-color: rgba(249,115,22,0.3); }
/* WW Panel: Flight Category Timeline Strip */
.ww-cat-strip { display: flex; border-radius: 6px; overflow: hidden; height: 28px; gap: 1px; margin-bottom: 6px; }
.ww-cs-cell { flex: 1; display: flex; align-items: center; justify-content: center; transition: all 0.2s; cursor: default; }
.ww-cs-cell span { font-size: 0.4rem; font-family: 'SF Mono', monospace; color: rgba(255,255,255,0.7); }
.ww-cs-lifr { background: #dc2626; }
.ww-cs-ifr { background: #ea580c; }
.ww-cs-mvfr { background: #3b82f6; }
.ww-cs-vfr { background: #22c55e; }
.ww-cs-none { background: rgba(100,116,139,0.15); }
.ww-cs-none span { color: #475569; }
.ww-cs-legend { display: flex; gap: 10px; justify-content: center; }
.ww-cs-lg { font-size: 0.6rem; font-weight: 700; padding: 1px 6px; border-radius: 3px; color: #fff; }
.ww-cs-lg.ww-cs-lifr { background: #dc2626; }
.ww-cs-lg.ww-cs-ifr { background: #ea580c; }
.ww-cs-lg.ww-cs-mvfr { background: #3b82f6; }
.ww-cs-lg.ww-cs-vfr { background: #22c55e; }
/* WW Panel: Daily Trend table */
.ww-dt td, .ww-dt th { padding: 5px 6px !important; font-size: 0.72rem !important; }
.ww-bad-count { color: #ef4444; font-weight: 700; }

/* ============================================================
   LIGHT THEME: New Stats Sections (WW Panel)
   ============================================================ */
.kwp-root.kwp-light .ww-info-card { background: #f8fafc; border-color: #e2e8f0; }
.kwp-root.kwp-light .ww-ic-title { color: #64748b; }
.kwp-root.kwp-light .ww-ic-v { color: #1e293b; }
.kwp-root.kwp-light .ww-geo-section .ww-geo-title { color: #64748b; }
.kwp-root.kwp-light .ww-geo-item { background: rgba(0,0,0,0.02); border-color: #e2e8f0; }
.kwp-root.kwp-light .ww-geo-name { color: #1e293b; }
.kwp-root.kwp-light .ww-geo-desc { color: #64748b; }
.kwp-root.kwp-light .ww-ab-title { color: #64748b; }
.kwp-root.kwp-light .ww-mini-card { background: #f8fafc; border-color: #e2e8f0; }
.kwp-root.kwp-light .ww-mc-v { color: #1e293b; }
.kwp-root.kwp-light .ww-mc-l { color: #94a3b8; }
.kwp-root.kwp-light .ww-vb-track { background: rgba(0,0,0,0.06); }
.kwp-root.kwp-light .ww-vb-label { color: #64748b; }
.kwp-root.kwp-light .ww-vb-pct { color: #334155; }
.kwp-root.kwp-light .ww-wx-name { color: #334155; }
.kwp-root.kwp-light .ww-wx-bar-wrap { background: rgba(0,0,0,0.06); }
.kwp-root.kwp-light .ww-wx-pct { color: #64748b; }
.kwp-root.kwp-light .ww-hourly-chart { background: #f8fafc; border-color: #e2e8f0; }
.kwp-root.kwp-light .ww-hb-lbl { color: #94a3b8; }
.kwp-root.kwp-light .ww-analysis-block { border-color: #e2e8f0; }
.kwp-root.kwp-light .ww-bad-count { color: #dc2626; }
.kwp-root.kwp-light .ww-band-line { border-color: rgba(0,0,0,0.1); }
.kwp-root.kwp-light .ww-band-line span { color: #94a3b8; }
.kwp-root.kwp-light .ww-hb-nodata { background: rgba(100,116,139,0.1); }
.kwp-root.kwp-light .ww-cs-none { background: rgba(100,116,139,0.08); }
.kwp-root.kwp-light .ww-cs-cell span { color: rgba(255,255,255,0.9); }
.kwp-root.kwp-light .ww-cs-none span { color: #94a3b8; }

/* ============================================================
   LIGHT THEME: New Stats Sections (Explorer Guide)
   ============================================================ */
.kwp-root.kwp-light .apt-geo-card { background: rgba(0,0,0,0.02); border-color: #e2e8f0; }
.kwp-root.kwp-light .apt-geo-card:hover { border-color: #cbd5e1; }
.kwp-root.kwp-light .apt-geo-title { color: #1e293b; }
.kwp-root.kwp-light .apt-geo-desc { color: #64748b; }
.kwp-root.kwp-light .apt-geo-section h3 { color: #1e293b; }
.kwp-root.kwp-light .apt-analysis-block h3 { color: #1e293b; }
.kwp-root.kwp-light .apt-mini-card { background: #f8fafc; border-color: #e2e8f0; }
.kwp-root.kwp-light .apt-mc-val { color: #1e293b; }
.kwp-root.kwp-light .apt-mc-lbl { color: #94a3b8; }
.kwp-root.kwp-light .apt-cat-summary { color: #64748b; }
.kwp-root.kwp-light .apt-phen-bar { background: rgba(0,0,0,0.06); }
.kwp-root.kwp-light .apt-hourly-chart { background: #f8fafc; border-color: #e2e8f0; }
.kwp-root.kwp-light .apt-hb-lbl { color: #94a3b8; }
.kwp-root.kwp-light .apt-hl { color: #64748b; }
.kwp-root.kwp-light .apt-wc-wxstring { color: #ea580c; }

/* ============================================================
   MOBILE RESPONSIVE: New Stats Sections
   ============================================================ */
@media (max-width: 600px) {
    .apt-mini-grid, .apt-mini-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .apt-wc-grid { grid-template-columns: repeat(2, 1fr); }
    .apt-hourly-chart { height: 80px; }
    .apt-hb-lbl { font-size: 0.45rem; }
    .apt-stats-table th, .apt-stats-table td { padding: 7px 6px; font-size: 0.75rem; }
    .ww-mini-grid { grid-template-columns: repeat(3, 1fr); }
    .ww-ic-grid { grid-template-columns: 1fr; }
    .ww-wx-name { width: 55px; }
}

/* ============================================================
   EDU SECTION: Live Weather Statistics Dashboard
   ============================================================ */
/* ============================================================
   LIVE WEATHER STATISTICS DASHBOARD — WORLD-CLASS UI
   ============================================================ */
.edu-stats-dashboard {
    border-top: none;
    padding-top: 1.5rem;
    position: relative;
}
.edu-stats-intro {
    font-size: 0.95rem;
    color: #cbd5e1;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-weight: 400;
}
.edu-stats-intro strong { color: #e2e8f0; font-weight: 600; }

/* Loading state */
.edu-stats-loading {
    text-align: center;
    padding: 4rem 1rem;
}
.edu-stats-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(59,130,246,0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: eduSpin 0.8s linear infinite;
}
@keyframes eduSpin { to { transform: rotate(360deg); } }
.edu-stats-loading p { color: #94a3b8; font-size: 0.9rem; }
.edu-stats-empty {
    text-align: center;
    padding: 3rem 2rem;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 12px;
}
.edu-empty-icon { color: #475569; margin-bottom: 12px; }
.edu-stats-empty p { color: #94a3b8; font-size: 0.95rem; margin: 0 0 4px; }
.edu-stats-empty .edu-empty-sub { font-size: 0.82rem; color: #64748b; }

/* ========== SHARE BAR ========== */
.edu-share-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1.5rem;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    flex-wrap: wrap;
}
.edu-share-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}
.edu-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 600;
}
.edu-share-btn:hover { transform: translateY(-1px); }
.edu-share-twitter:hover { background: rgba(29,161,242,0.2); border-color: #1da1f2; color: #1da1f2; }
.edu-share-linkedin:hover { background: rgba(10,102,194,0.2); border-color: #0a66c2; color: #0a66c2; }
.edu-share-whatsapp:hover { background: rgba(37,211,102,0.2); border-color: #25d366; color: #25d366; }
.edu-share-telegram:hover { background: rgba(38,165,224,0.2); border-color: #26a5e4; color: #26a5e4; }
.edu-share-reddit:hover { background: rgba(255,69,0,0.2); border-color: #ff4500; color: #ff4500; }
.edu-share-email:hover { background: rgba(139,92,246,0.2); border-color: #8b5cf6; color: #8b5cf6; }
.edu-share-copy {
    width: auto;
    padding: 0 12px;
    gap: 5px;
    font-family: inherit;
}
.edu-share-copy:hover { background: rgba(34,197,94,0.2); border-color: #22c55e; color: #22c55e; }

/* ========== OVERVIEW CARDS ========== */
.edu-stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 1.75rem;
}
.edu-sc {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.edu-sc::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.07;
    z-index: 0;
    transition: opacity 0.25s ease;
}
.edu-sc:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.25); }
.edu-sc:hover::before { opacity: 0.12; }

/* Card color variants */
.edu-sc-blue { border-color: rgba(59,130,246,0.25); }
.edu-sc-blue::before { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.edu-sc-blue .edu-sc-icon { color: #60a5fa; }
.edu-sc-purple { border-color: rgba(139,92,246,0.25); }
.edu-sc-purple::before { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.edu-sc-purple .edu-sc-icon { color: #a78bfa; }
.edu-sc-amber { border-color: rgba(245,158,11,0.25); }
.edu-sc-amber::before { background: linear-gradient(135deg, #f59e0b, #d97706); }
.edu-sc-amber .edu-sc-icon { color: #fbbf24; }
.edu-sc-red { border-color: rgba(239,68,68,0.25); }
.edu-sc-red::before { background: linear-gradient(135deg, #ef4444, #dc2626); }
.edu-sc-red .edu-sc-icon { color: #f87171; }

.edu-sc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    position: relative;
    z-index: 1;
}
.edu-sc-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.edu-sc-val {
    display: block;
    font-size: 1.65rem;
    font-weight: 800;
    color: #ffffff;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    line-height: 1.15;
    letter-spacing: -0.5px;
}
.edu-sc-lbl {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 4px;
    font-weight: 600;
}
.edu-sc-pulse {
    position: absolute;
    top: 12px; right: 12px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    z-index: 1;
    animation: eduPulse 2s ease-in-out infinite;
}
@keyframes eduPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* ========== STATS BLOCKS ========== */
.edu-stats-block {
    margin-bottom: 1.75rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 20px;
}
.edu-stats-block h3 {
    font-size: 1.05rem;
    color: #f1f5f9;
    font-weight: 700;
    margin: 0;
    border: none;
    padding: 0;
}
.edu-block-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.edu-bh-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(59,130,246,0.12);
    color: #60a5fa;
    flex-shrink: 0;
}
.edu-bh-icon-red { background: rgba(239,68,68,0.12); color: #f87171; }
.edu-bh-icon-cyan { background: rgba(6,182,212,0.12); color: #22d3ee; }
.edu-bh-icon-green { background: rgba(34,197,94,0.12); color: #4ade80; }
.edu-bh-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    color: #22c55e;
    background: rgba(34,197,94,0.12);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-left: 8px;
    vertical-align: middle;
}
.edu-bh-sub {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 400;
    margin-top: 2px;
}

/* ========== FLIGHT CATEGORY BAR ========== */
.edu-cat-bar {
    display: flex;
    height: 42px;
    border-radius: 10px;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 42px;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.edu-cb { min-width: 0; overflow: hidden; white-space: nowrap; padding: 0 8px; position: relative; }
.edu-cb-text { position: relative; z-index: 1; }
.edu-cb-lifr { background: linear-gradient(180deg, #dc2626, #b91c1c); }
.edu-cb-ifr { background: linear-gradient(180deg, #ea580c, #c2410c); }
.edu-cb-mvfr { background: linear-gradient(180deg, #2563eb, #1d4ed8); }
.edu-cb-vfr { background: linear-gradient(180deg, #16a34a, #15803d); }
.edu-cat-legend {
    display: flex;
    gap: 20px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.edu-cl {
    font-size: 0.82rem;
    font-weight: 500;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.edu-cl b { font-weight: 700; color: #f1f5f9; }
.edu-cl-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 3px;
}
.edu-cl-lifr .edu-cl-dot { background: #dc2626; }
.edu-cl-ifr .edu-cl-dot { background: #ea580c; }
.edu-cl-mvfr .edu-cl-dot { background: #2563eb; }
.edu-cl-vfr .edu-cl-dot { background: #16a34a; }

/* ========== STATS TABLE ========== */
.edu-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.edu-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.edu-stats-table thead tr {
    background: rgba(255,255,255,0.05);
}
.edu-stats-table th {
    padding: 11px 14px;
    text-align: center;
    font-size: 0.70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.edu-th-rank { width: 44px; }
.edu-stats-table th:first-child,
.edu-stats-table td:first-child { text-align: center; }
.edu-stats-table td {
    padding: 10px 14px;
    text-align: center;
    color: #e2e8f0;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s ease;
}
.edu-stats-table tbody tr { transition: background 0.15s ease; }
.edu-stats-table tbody tr:hover td { background: rgba(255,255,255,0.04); }

/* Rank Badges */
.edu-rank { text-align: center !important; }
.edu-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 800;
    color: #fff;
}
.edu-rank-1 { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 2px 8px rgba(245,158,11,0.3); }
.edu-rank-2 { background: linear-gradient(135deg, #94a3b8, #64748b); }
.edu-rank-3 { background: linear-gradient(135deg, #cd7f32, #a0522d); }
.edu-rank-num { font-weight: 700; color: #64748b; font-size: 0.82rem; }

.edu-icao { font-weight: 800; }
.edu-apt-link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.15s ease;
}
.edu-apt-link:hover { color: #93c5fd; text-decoration: underline; }
.edu-name {
    text-align: left !important;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #cbd5e1;
    font-weight: 500;
}
.edu-score {
    font-weight: 800;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #fbbf24;
    font-size: 0.90rem;
}
.edu-max-score {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-weight: 600;
    color: #94a3b8;
    font-size: 0.85rem;
}
.edu-obs { color: #64748b; font-size: 0.82rem; }
.edu-score-dim { font-family: 'SF Mono', monospace; color: #94a3b8; font-weight: 600; }
.edu-apt-name-sm { color: #64748b; font-size: 0.80rem; }
.edu-period-label { font-weight: 600; color: #e2e8f0; }

/* Row severity */
.edu-row-extreme td { background: rgba(220,38,38,0.08) !important; }
.edu-row-extreme .edu-score { color: #f87171; font-weight: 900; }
.edu-row-severe td { background: rgba(249,115,22,0.06) !important; }
.edu-row-severe .edu-score { color: #fb923c; font-weight: 900; }
.edu-row-moderate td { background: rgba(234,179,8,0.04) !important; }

/* ========== CONDITIONS GRID ========== */
.edu-conditions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.edu-cond-card {
    padding: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    transition: border-color 0.2s ease;
}
.edu-cond-card:hover { border-color: rgba(255,255,255,0.14); }
.edu-cond-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.edu-cond-icon { display: flex; color: #60a5fa; }
.edu-cond-wind .edu-cond-icon { color: #60a5fa; }
.edu-cond-vis .edu-cond-icon { color: #a78bfa; }
.edu-cond-ceil .edu-cond-icon { color: #22d3ee; }
.edu-cond-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
}
.edu-cond-label { font-size: 0.80rem; color: #94a3b8; font-weight: 500; }
.edu-cond-value {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
}
.edu-cond-value small { font-size: 0.72rem; color: #64748b; font-weight: 500; }
.edu-cond-muted .edu-cond-value { font-size: 0.85rem; color: #64748b; font-weight: 500; }
.edu-cond-muted { border-top: 1px solid rgba(255,255,255,0.04); margin-top: 4px; padding-top: 8px; }

/* ========== PHENOMENA GRID ========== */
.edu-phenomena-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}
.edu-phen-item {
    text-align: center;
    padding: 12px 6px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.2s ease;
}
.edu-phen-item:hover { border-color: var(--phen-color, rgba(255,255,255,0.15)); }
.edu-phen-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.edu-phen-icon { display: flex; color: var(--phen-color, #94a3b8); }
.edu-phen-name { font-size: 0.68rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.2; }
.edu-phen-count {
    font-family: 'SF Mono', monospace;
    font-size: 1.2rem;
    font-weight: 800;
    color: #f1f5f9;
    margin-bottom: 6px;
}
.edu-phen-bar {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}
.edu-phen-fill {
    height: 100%;
    background: var(--phen-color, #3b82f6);
    border-radius: 4px;
    transition: width 0.6s ease;
}
.edu-phen-pct { font-size: 0.68rem; color: #64748b; font-weight: 600; }

/* ========== STATS FOOTER ========== */
.edu-stats-footer {
    margin-top: 1.5rem;
    padding: 14px 18px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
}
.edu-footer-inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.edu-footer-icon { color: #475569; flex-shrink: 0; margin-top: 1px; }
.edu-footer-text {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.6;
    font-weight: 400;
}
.edu-footer-text strong { color: #cbd5e1; }
.edu-footer-text a {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
}
.edu-footer-text a:hover { text-decoration: underline; }

/* ========== TEMPERATURE CARD ========== */
.edu-cond-temp .edu-cond-icon { color: #f59e0b; }

/* ========== HAZARD ALERTS BAR ========== */
.edu-hazard-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.15);
}
.edu-hz-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.80rem;
    font-weight: 500;
    color: #e2e8f0;
    white-space: nowrap;
}
.edu-hz-item b { font-weight: 800; }
.edu-hz-ice { color: #a78bfa; }
.edu-hz-wind { color: #60a5fa; }
.edu-hz-ts { color: #fbbf24; }
.edu-hz-fz { color: #22d3ee; }

/* ========== SEVERITY DISTRIBUTION ========== */
.edu-sev-grid { display: flex; flex-direction: column; gap: 10px; }
.edu-sev-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.edu-sev-label {
    width: 120px;
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #e2e8f0;
}
.edu-sev-label small { color: #64748b; font-weight: 500; }
.edu-sev-track {
    flex: 1;
    height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.edu-sev-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
    min-width: 2px;
}
.edu-sev-count {
    width: 80px;
    flex-shrink: 0;
    text-align: right;
    font-family: 'SF Mono', monospace;
    font-size: 0.88rem;
    font-weight: 700;
    color: #f1f5f9;
}
.edu-sev-count small { color: #64748b; font-weight: 500; font-size: 0.76rem; }
.edu-sev-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.edu-sev-cat {
    font-size: 0.80rem;
    color: #94a3b8;
    font-weight: 500;
}
.edu-sev-cat b { color: #e2e8f0; font-weight: 700; }

/* ========== SPOTLIGHT CARD ========== */
.edu-spotlight-grid {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.edu-spot-main { flex-shrink: 0; }
.edu-spot-icao .edu-apt-link {
    font-size: 1.8rem;
    font-weight: 900;
    font-family: 'SF Mono', monospace;
    letter-spacing: -1px;
}
.edu-spot-name {
    font-size: 0.88rem;
    color: #94a3b8;
    margin-top: 2px;
}
.edu-spot-score {
    font-family: 'SF Mono', monospace;
    font-size: 1.3rem;
    font-weight: 800;
    color: #fbbf24;
    margin-top: 6px;
}
.edu-spot-score small { font-size: 0.7rem; color: #64748b; font-weight: 500; }
.edu-spot-details {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}
.edu-spot-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.edu-spot-cat-lifr { background: rgba(220,38,38,0.15); border-color: rgba(220,38,38,0.3); color: #f87171; }
.edu-spot-cat-ifr { background: rgba(234,88,12,0.15); border-color: rgba(234,88,12,0.3); color: #fb923c; }
.edu-spot-cat-mvfr { background: rgba(37,99,235,0.15); border-color: rgba(37,99,235,0.3); color: #60a5fa; }
.edu-spot-detail {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.80rem;
    font-weight: 500;
    color: #cbd5e1;
    padding: 3px 0;
}
.edu-spot-detail svg { color: #64748b; }

/* ============================================================
   LIGHT THEME — Live Weather Statistics Dashboard
   NOTE: edu content is OUTSIDE .kwp-root, uses #kwp-edu.kwp-light
   So we use .kwp-light (without .kwp-root prefix)
   ============================================================ */
.kwp-light .edu-stats-dashboard { border-top-color: rgba(30,64,175,0.2); }
.kwp-light .edu-stats-intro { color: #334155; }
.kwp-light .edu-stats-intro strong { color: #0f172a; }
.kwp-light .edu-stats-loading p { color: #64748b; }
.kwp-light .edu-stats-empty { background: rgba(0,0,0,0.02); border-color: #e2e8f0; }
.kwp-light .edu-stats-empty p { color: #475569; }
.kwp-light .edu-empty-icon { color: #94a3b8; }
.kwp-light .edu-stats-empty .edu-empty-sub { color: #94a3b8; }

/* Share bar light */
.kwp-light .edu-share-bar { background: rgba(0,0,0,0.02); border-color: #e2e8f0; }
.kwp-light .edu-share-label { color: #64748b; }
.kwp-light .edu-share-btn { background: #fff; border-color: #e2e8f0; color: #475569; }

/* Cards light */
.kwp-light .edu-sc { border-color: #e2e8f0; background: #fff; }
.kwp-light .edu-sc::before { opacity: 0.04; }
.kwp-light .edu-sc:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.kwp-light .edu-sc:hover::before { opacity: 0.07; }
.kwp-light .edu-sc-blue { border-color: rgba(59,130,246,0.2); }
.kwp-light .edu-sc-blue .edu-sc-icon { color: #2563eb; }
.kwp-light .edu-sc-purple { border-color: rgba(139,92,246,0.2); }
.kwp-light .edu-sc-purple .edu-sc-icon { color: #7c3aed; }
.kwp-light .edu-sc-amber { border-color: rgba(245,158,11,0.2); }
.kwp-light .edu-sc-amber .edu-sc-icon { color: #d97706; }
.kwp-light .edu-sc-red { border-color: rgba(239,68,68,0.2); }
.kwp-light .edu-sc-red .edu-sc-icon { color: #dc2626; }
.kwp-light .edu-sc-icon { background: rgba(0,0,0,0.04); }
.kwp-light .edu-sc-val { color: #0f172a; }
.kwp-light .edu-sc-lbl { color: #475569; }
.kwp-light .edu-sc-pulse { background: #16a34a; }

/* Blocks light */
.kwp-light .edu-stats-block { background: #fff; border-color: #e2e8f0; }
.kwp-light .edu-stats-block h3 { color: #0f172a; }
.kwp-light .edu-block-header { border-bottom-color: #f1f5f9; }
.kwp-light .edu-bh-icon { background: rgba(59,130,246,0.08); color: #2563eb; }
.kwp-light .edu-bh-icon-red { background: rgba(239,68,68,0.08); color: #dc2626; }
.kwp-light .edu-bh-icon-cyan { background: rgba(6,182,212,0.08); color: #0891b2; }
.kwp-light .edu-bh-icon-green { background: rgba(34,197,94,0.08); color: #16a34a; }
.kwp-light .edu-bh-tag { color: #16a34a; background: rgba(34,197,94,0.08); }
.kwp-light .edu-bh-sub { color: #64748b; }

/* Category bar light */
.kwp-light .edu-cb-lifr { background: linear-gradient(180deg, #dc2626, #b91c1c); }
.kwp-light .edu-cb-ifr { background: linear-gradient(180deg, #ea580c, #c2410c); }
.kwp-light .edu-cb-mvfr { background: linear-gradient(180deg, #2563eb, #1d4ed8); }
.kwp-light .edu-cb-vfr { background: linear-gradient(180deg, #16a34a, #15803d); }
.kwp-light .edu-cl { color: #475569; }
.kwp-light .edu-cl b { color: #0f172a; }
.kwp-light .edu-cl-lifr .edu-cl-dot { background: #dc2626; }
.kwp-light .edu-cl-ifr .edu-cl-dot { background: #ea580c; }
.kwp-light .edu-cl-mvfr .edu-cl-dot { background: #2563eb; }
.kwp-light .edu-cl-vfr .edu-cl-dot { background: #16a34a; }

/* Table light */
.kwp-light .edu-table-wrap { border-color: #e2e8f0; }
.kwp-light .edu-stats-table thead tr { background: #f8fafc; }
.kwp-light .edu-stats-table th { color: #475569; border-bottom-color: #e2e8f0; }
.kwp-light .edu-stats-table td { color: #1e293b; border-bottom-color: #f1f5f9; }
.kwp-light .edu-stats-table tbody tr:hover td { background: #f8fafc; }
.kwp-light .edu-rank-num { color: #94a3b8; }
.kwp-light .edu-apt-link { color: #2563eb; }
.kwp-light .edu-apt-link:hover { color: #1d4ed8; }
.kwp-light .edu-name { color: #334155; }
.kwp-light .edu-score { color: #b45309; }
.kwp-light .edu-max-score { color: #64748b; }
.kwp-light .edu-obs { color: #64748b; }
.kwp-light .edu-score-dim { color: #64748b; }
.kwp-light .edu-apt-name-sm { color: #64748b; }
.kwp-light .edu-period-label { color: #0f172a; }
.kwp-light .edu-row-extreme td { background: rgba(220,38,38,0.06) !important; }
.kwp-light .edu-row-extreme .edu-score { color: #dc2626; }
.kwp-light .edu-row-extreme .edu-name { color: #1e293b; }
.kwp-light .edu-row-extreme .edu-max-score,
.kwp-light .edu-row-extreme .edu-obs { color: #475569; }
.kwp-light .edu-row-severe td { background: rgba(249,115,22,0.05) !important; }
.kwp-light .edu-row-severe .edu-score { color: #ea580c; }
.kwp-light .edu-row-severe .edu-name { color: #1e293b; }
.kwp-light .edu-row-severe .edu-max-score,
.kwp-light .edu-row-severe .edu-obs { color: #475569; }
.kwp-light .edu-row-moderate td { background: rgba(234,179,8,0.04) !important; }

/* Conditions grid light */
.kwp-light .edu-cond-card { background: #fff; border-color: #e2e8f0; }
.kwp-light .edu-cond-card:hover { border-color: #cbd5e1; }
.kwp-light .edu-cond-header { color: #334155; border-bottom-color: #f1f5f9; }
.kwp-light .edu-cond-wind .edu-cond-icon { color: #2563eb; }
.kwp-light .edu-cond-vis .edu-cond-icon { color: #7c3aed; }
.kwp-light .edu-cond-ceil .edu-cond-icon { color: #0891b2; }
.kwp-light .edu-cond-label { color: #64748b; }
.kwp-light .edu-cond-value { color: #0f172a; }
.kwp-light .edu-cond-value small { color: #94a3b8; }
.kwp-light .edu-cond-muted .edu-cond-value { color: #94a3b8; }
.kwp-light .edu-cond-muted { border-top-color: #f1f5f9; }

/* Phenomena light */
.kwp-light .edu-phen-item { background: #fff; border-color: #e2e8f0; }
.kwp-light .edu-phen-name { color: #64748b; }
.kwp-light .edu-phen-count { color: #0f172a; }
.kwp-light .edu-phen-bar { background: #f1f5f9; }
.kwp-light .edu-phen-pct { color: #64748b; }

/* Footer light */
.kwp-light .edu-stats-footer { background: #f8fafc; border-color: #e2e8f0; }
.kwp-light .edu-footer-icon { color: #94a3b8; }
.kwp-light .edu-footer-text { color: #475569; }
.kwp-light .edu-footer-text strong { color: #0f172a; }
.kwp-light .edu-footer-text a { color: #2563eb; }

/* New sections light */
.kwp-light .edu-cond-temp .edu-cond-icon { color: #d97706; }
.kwp-light .edu-hazard-bar { background: rgba(239,68,68,0.04); border-color: rgba(239,68,68,0.12); }
.kwp-light .edu-hz-item { color: #334155; }
.kwp-light .edu-hz-ice { color: #7c3aed; }
.kwp-light .edu-hz-wind { color: #2563eb; }
.kwp-light .edu-hz-ts { color: #d97706; }
.kwp-light .edu-hz-fz { color: #0891b2; }
.kwp-light .edu-sev-label { color: #0f172a; }
.kwp-light .edu-sev-label small { color: #64748b; }
.kwp-light .edu-sev-track { background: #f1f5f9; }
.kwp-light .edu-sev-count { color: #0f172a; }
.kwp-light .edu-sev-count small { color: #64748b; }
.kwp-light .edu-sev-cats { border-top-color: #f1f5f9; }
.kwp-light .edu-sev-cat { color: #64748b; }
.kwp-light .edu-sev-cat b { color: #0f172a; }
.kwp-light .edu-spot-icao .edu-apt-link { color: #2563eb; }
.kwp-light .edu-spot-name { color: #64748b; }
.kwp-light .edu-spot-score { color: #b45309; }
.kwp-light .edu-spot-score small { color: #94a3b8; }
.kwp-light .edu-spot-tag { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }
.kwp-light .edu-spot-cat-lifr { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.2); color: #dc2626; }
.kwp-light .edu-spot-cat-ifr { background: rgba(234,88,12,0.08); border-color: rgba(234,88,12,0.2); color: #ea580c; }
.kwp-light .edu-spot-cat-mvfr { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.2); color: #2563eb; }
.kwp-light .edu-spot-detail { color: #475569; }
.kwp-light .edu-spot-detail svg { color: #94a3b8; }

/* ============================================================
   EXPANDABLE AIRPORT DETAIL — Dark Theme
   ============================================================ */
/* Expand Button */
.edu-expand-cell { text-align: right; padding: 4px 8px !important; }
.edu-th-detail { width: 200px; }
.edu-expand-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #000;
    border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer;
    font-size: 0.82rem; font-weight: 700; transition: all 0.2s;
    white-space: nowrap;
}
.edu-expand-btn:hover { background: linear-gradient(135deg, #fbbf24, #f59e0b); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
.edu-expand-btn.edu-expand-active { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.edu-expand-btn.edu-expand-active:hover { background: linear-gradient(135deg, #818cf8, #6366f1); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.edu-expand-btn svg { flex-shrink: 0; }
.edu-expand-text { font-size: 0.78rem; letter-spacing: 0.02em; }

/* Detail Row */
.edu-detail-row { background: transparent !important; }
.edu-detail-row > td { padding: 0 !important; border: none !important; }
.edu-detail-container {
    background: rgba(15,23,42,0.6); border: 1px solid rgba(148,163,184,0.12);
    border-radius: 12px; margin: 8px 4px 16px; padding: 20px;
    backdrop-filter: blur(8px);
}
.edu-detail-loading {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    color: #94a3b8; font-size: 0.9rem; padding: 40px 0;
    animation: edu-pulse 1.5s ease-in-out infinite;
}
@keyframes edu-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.edu-dt-error { color: #ef4444; text-align: center; padding: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Detail Sections */
.edu-dt-section { margin-bottom: 16px; }
.edu-dt-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.95rem; font-weight: 700; color: #f1f5f9;
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(148,163,184,0.15);
}
.edu-dt-title svg { color: #f59e0b; flex-shrink: 0; }
.edu-dt-subtitle {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 600; color: #cbd5e1;
    margin-bottom: 10px;
}
.edu-dt-subtitle svg { color: #818cf8; flex-shrink: 0; }

/* Info Grid */
.edu-dt-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.edu-dt-ig-item { display: flex; flex-direction: column; gap: 2px; }
.edu-dt-ig-full { grid-column: 1 / -1; }
.edu-dt-ig-l { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; }
.edu-dt-ig-v { font-size: 0.85rem; color: #e2e8f0; font-weight: 500; }
.edu-dt-ig-flags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.edu-dt-ig-flags svg { color: #f59e0b; }
.edu-dt-sep { color: #475569; }

/* Geographic Influences */
.edu-dt-geo-list { display: flex; flex-direction: column; gap: 8px; }
.edu-dt-geo-item { display: flex; gap: 10px; background: rgba(30,41,59,0.5); border-radius: 8px; padding: 10px 12px; border: 1px solid rgba(148,163,184,0.08); }
.edu-dt-geo-icon { font-size: 1.3rem; flex-shrink: 0; }
.edu-dt-geo-body strong { font-size: 0.82rem; color: #e2e8f0; display: block; margin-bottom: 3px; }
.edu-dt-geo-body p { font-size: 0.78rem; color: #94a3b8; margin: 0; line-height: 1.5; }

/* Live Conditions */
.edu-dt-live { border: 1px solid rgba(148,163,184,0.12); border-radius: 10px; padding: 14px; background: rgba(30,41,59,0.4); }
.edu-dt-live-badge {
    display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700;
    margin-left: auto;
}
.edu-dt-cat-lifr { background: rgba(220,38,38,0.2); color: #fca5a5; border: 1px solid rgba(220,38,38,0.4); }
.edu-dt-cat-ifr { background: rgba(234,88,12,0.2); color: #fdba74; border: 1px solid rgba(234,88,12,0.4); }
.edu-dt-cat-mvfr { background: rgba(37,99,235,0.2); color: #93c5fd; border: 1px solid rgba(37,99,235,0.4); }
.edu-dt-cat-vfr { background: rgba(34,197,94,0.2); color: #86efac; border: 1px solid rgba(34,197,94,0.4); }
.edu-dt-live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.edu-dt-live-item { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; }
.edu-dt-live-item svg { color: #818cf8; flex-shrink: 0; }
.edu-dt-live-full { grid-column: 1 / -1; }
.edu-dt-lv-l { color: #64748b; font-size: 0.72rem; }
.edu-dt-lv-v { color: #e2e8f0; font-weight: 600; }
.edu-dt-lv-wx { color: #fbbf24; font-family: 'Courier New', monospace; }
.edu-dt-raw {
    background: rgba(15,23,42,0.7); border: 1px solid rgba(148,163,184,0.1);
    border-radius: 6px; padding: 8px 12px; margin-top: 8px;
    font-family: 'Courier New', monospace; font-size: 0.75rem; color: #94a3b8;
    word-break: break-all; line-height: 1.5;
}

/* Period Tabs */
.edu-dt-period-tabs {
    display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px;
    background: rgba(15,23,42,0.4); border-radius: 8px; padding: 4px;
}
.edu-dt-period-tab {
    flex: 1; padding: 8px 12px; border: none; border-radius: 6px;
    background: transparent; color: #94a3b8; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s; text-align: center;
}
.edu-dt-period-tab:hover { background: rgba(148,163,184,0.1); color: #e2e8f0; }
.edu-dt-period-tab.active { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.edu-dt-period-tab.disabled { opacity: 0.3; cursor: not-allowed; }

/* Summary Cards */
.edu-dt-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.edu-dt-sc {
    text-align: center; padding: 12px 8px; border-radius: 10px;
    border: 1px solid rgba(148,163,184,0.1);
}
.edu-dt-sc-val { display: block; font-size: 1.4rem; font-weight: 800; }
.edu-dt-sc-lbl { display: block; font-size: 0.7rem; color: #94a3b8; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.edu-dt-sc-blue { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.2); }
.edu-dt-sc-blue .edu-dt-sc-val { color: #60a5fa; }
.edu-dt-sc-red { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.2); }
.edu-dt-sc-red .edu-dt-sc-val { color: #f87171; }
.edu-dt-sc-purple { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.2); }
.edu-dt-sc-purple .edu-dt-sc-val { color: #a78bfa; }
.edu-dt-sc-amber { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); }
.edu-dt-sc-amber .edu-dt-sc-val { color: #fbbf24; }

/* Flight Category Bar */
.edu-dt-catbar { margin-bottom: 14px; }
.edu-dt-cat-track { display: flex; height: 32px; border-radius: 8px; overflow: hidden; margin: 8px 0; }
.edu-dt-cb { display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: #fff; min-width: 28px; }
.edu-dt-cb-lifr { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.edu-dt-cb-ifr { background: linear-gradient(135deg, #ea580c, #c2410c); }
.edu-dt-cb-mvfr { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.edu-dt-cb-vfr { background: linear-gradient(135deg, #16a34a, #15803d); }
.edu-dt-cat-legend { display: flex; gap: 12px; flex-wrap: wrap; }
.edu-dt-cl { font-size: 0.75rem; font-weight: 600; }
.edu-dt-cl-lifr { color: #fca5a5; }
.edu-dt-cl-ifr { color: #fdba74; }
.edu-dt-cl-mvfr { color: #93c5fd; }
.edu-dt-cl-vfr { color: #86efac; }

/* Tables */
.edu-dt-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.edu-dt-table th { background: rgba(30,41,59,0.6); color: #94a3b8; font-weight: 600; text-align: left; padding: 8px 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.edu-dt-table td { padding: 7px 10px; border-bottom: 1px solid rgba(148,163,184,0.08); color: #cbd5e1; }
.edu-dt-table tbody tr:hover { background: rgba(148,163,184,0.05); }
.edu-dt-td-period { font-weight: 600; color: #e2e8f0; }
.edu-dt-tr-active td { background: rgba(99,102,241,0.08); }
.edu-dt-bad { background: rgba(239,68,68,0.2); color: #f87171; padding: 2px 8px; border-radius: 4px; font-weight: 700; }

/* Mini Grid (metric cards) */
.edu-dt-mini-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.edu-dt-mini-3 { grid-template-columns: repeat(3, 1fr); }
.edu-dt-mc { text-align: center; background: rgba(30,41,59,0.4); border-radius: 8px; padding: 10px 6px; border: 1px solid rgba(148,163,184,0.06); }
.edu-dt-mc-v { display: block; font-size: 1rem; font-weight: 700; color: #e2e8f0; }
.edu-dt-mc-l { display: block; font-size: 0.68rem; color: #64748b; margin-top: 3px; }

/* Bar Charts (visibility/ceiling) */
.edu-dt-bars { margin-bottom: 10px; }
.edu-dt-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.edu-dt-bar-lbl { width: 60px; font-size: 0.75rem; color: #94a3b8; text-align: right; flex-shrink: 0; }
.edu-dt-bar-track { flex: 1; height: 18px; background: rgba(30,41,59,0.5); border-radius: 4px; overflow: hidden; }
.edu-dt-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s; min-width: 2px; }
.edu-dt-bf-lifr { background: linear-gradient(90deg, #dc2626, #ef4444); }
.edu-dt-bf-ifr { background: linear-gradient(90deg, #ea580c, #f97316); }
.edu-dt-bf-mvfr { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.edu-dt-bf-ok { background: linear-gradient(90deg, #0d9488, #14b8a6); }
.edu-dt-bf-vfr { background: linear-gradient(90deg, #16a34a, #22c55e); }
.edu-dt-bar-pct { width: 36px; font-size: 0.75rem; color: #94a3b8; text-align: right; flex-shrink: 0; }

/* Weather Phenomena List */
.edu-dt-wx-list { display: flex; flex-direction: column; gap: 5px; }
.edu-dt-wx-row { display: flex; align-items: center; gap: 8px; }
.edu-dt-wx-icon { width: 22px; text-align: center; flex-shrink: 0; color: #94a3b8; }
.edu-dt-wx-name { width: 90px; font-size: 0.78rem; color: #cbd5e1; flex-shrink: 0; }
.edu-dt-wx-barwrap { flex: 1; height: 14px; background: rgba(30,41,59,0.5); border-radius: 3px; overflow: hidden; }
.edu-dt-wx-barfill { height: 100%; background: linear-gradient(90deg, #6366f1, #818cf8); border-radius: 3px; transition: width 0.4s; }
.edu-dt-wx-pct { width: 34px; text-align: right; font-size: 0.75rem; color: #94a3b8; font-weight: 600; flex-shrink: 0; }

/* Hourly Chart */
.edu-dt-hourly-chart {
    display: flex; align-items: flex-end; gap: 2px; height: 90px;
    background: rgba(15,23,42,0.4); border-radius: 8px; padding: 8px 4px 0;
}
.edu-dt-hb-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.edu-dt-hb-bar { width: 100%; border-radius: 3px 3px 0 0; transition: height 0.4s; min-height: 2px; }
.edu-dt-hb-good { background: #22c55e; }
.edu-dt-hb-caution { background: #eab308; }
.edu-dt-hb-moderate { background: #f97316; }
.edu-dt-hb-severe { background: #ef4444; }
.edu-dt-hb-lbl { font-size: 0.55rem; color: #475569; margin-top: 2px; }

/* Worst Card */
.edu-dt-worst { background: rgba(127,29,29,0.15); border: 1px solid rgba(239,68,68,0.2); border-radius: 10px; padding: 14px; }
.edu-dt-worst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.edu-dt-wc { display: flex; flex-direction: column; gap: 2px; }
.edu-dt-wc-l { font-size: 0.7rem; color: #64748b; text-transform: uppercase; }
.edu-dt-wc-v { font-size: 0.88rem; color: #fca5a5; font-weight: 600; }
.edu-dt-wc-score { font-size: 1.2rem; color: #f87171; font-weight: 800; }
.edu-dt-worst-wx { margin-top: 8px; color: #fca5a5; font-size: 0.82rem; font-weight: 600; }

/* Recent Observations */
.edu-dt-recent-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.edu-dt-ro {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    border-radius: 6px; font-size: 0.78rem; border-left: 3px solid transparent;
}
.edu-dt-ro-lifr { background: rgba(220,38,38,0.08); border-left-color: #dc2626; }
.edu-dt-ro-ifr { background: rgba(234,88,12,0.08); border-left-color: #ea580c; }
.edu-dt-ro-mvfr { background: rgba(37,99,235,0.08); border-left-color: #2563eb; }
.edu-dt-ro-vfr { background: rgba(34,197,94,0.05); border-left-color: #16a34a; }
.edu-dt-ro-time { color: #94a3b8; font-family: 'Courier New', monospace; flex-shrink: 0; width: 90px; }
.edu-dt-ro-score { font-weight: 700; color: #e2e8f0; width: 28px; text-align: center; }
.edu-dt-ro-cat { font-weight: 600; width: 40px; font-size: 0.72rem; }
.edu-dt-ro-det { color: #94a3b8; font-size: 0.72rem; }
.edu-dt-ro-wx { color: #fbbf24; font-family: 'Courier New', monospace; font-size: 0.72rem; margin-left: auto; }

/* Language Selector */
.edu-lang-select { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.edu-lang-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 14px; border-radius: 10px; border: 2px solid rgba(148,163,184,0.15);
    background: rgba(30,41,59,0.4); color: #94a3b8;
    cursor: pointer; transition: all 0.25s ease; min-width: 64px;
}
.edu-lang-flag { font-size: 1.6rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); transition: transform 0.25s ease; }
.edu-lang-name { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
.edu-lang-btn:hover { border-color: #6366f1; background: rgba(99,102,241,0.12); transform: translateY(-1px); }
.edu-lang-btn:hover .edu-lang-flag { transform: scale(1.15); }
.edu-lang-btn:hover .edu-lang-name { color: #e2e8f0; opacity: 1; }
.edu-lang-btn.active { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; border-color: #6366f1; box-shadow: 0 3px 12px rgba(99,102,241,0.35); }
.edu-lang-btn.active .edu-lang-name { color: #fff; opacity: 1; }

/* Historical Date Browser */
.edu-history-picker { padding: 4px 0; }
.edu-hist-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.edu-hist-tab { display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; border-radius: 8px; border: 1px solid rgba(148,163,184,0.2); background: transparent; color: #94a3b8; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.edu-hist-tab:hover { border-color: #3b82f6; color: #e2e8f0; }
.edu-hist-tab.active { background: rgba(59,130,246,0.15); color: #3b82f6; border-color: #3b82f6; }
.edu-hist-tab svg { width: 14px; height: 14px; }
.edu-hist-icao-input { padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(148,163,184,0.2); background: rgba(15,23,42,0.6); color: #e2e8f0; font-size: 0.88rem; font-weight: 700; font-family: 'Inter', system-ui, sans-serif; width: 160px; letter-spacing: 2px; text-transform: uppercase; }
.edu-hist-icao-input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; color: #64748b; font-size: 0.78rem; }
.edu-hist-icao-btn { padding: 7px 20px; border-radius: 8px; border: 1px solid #3b82f6; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.edu-hist-icao-btn:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.edu-hist-airport-header { margin-bottom: 12px; padding: 12px 14px; background: rgba(30,41,59,0.5); border-radius: 10px; border: 1px solid rgba(148,163,184,0.1); }
.edu-hist-apt-title { font-size: 0.95rem; font-weight: 700; color: #e2e8f0; margin-bottom: 4px; }
.edu-icao-badge { display: inline-block; padding: 2px 8px; background: rgba(99,102,241,0.2); color: #818cf8; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 0.85rem; font-weight: 800; }
.edu-apt-name-lg { color: #e2e8f0; }
.edu-apt-city { color: #64748b; font-weight: 400; font-size: 0.82rem; }
.edu-hist-apt-info { font-size: 0.75rem; color: #64748b; }
.edu-date-cell { font-family: 'Courier New', monospace; font-size: 0.78rem; color: #94a3b8; font-weight: 600; }
/* Light theme overrides */
.kwp-light .edu-hist-tab { color: #64748b; border-color: #e2e8f0; }
.kwp-light .edu-hist-tab.active { background: rgba(59,130,246,0.08); color: #2563eb; border-color: #3b82f6; }
.kwp-light .edu-hist-icao-input { background: #fff; color: #1e293b; border-color: #e2e8f0; }
.kwp-light .edu-hist-airport-header { background: rgba(241,245,249,0.8); border-color: #e2e8f0; }
.kwp-light .edu-hist-apt-title { color: #1e293b; }
.kwp-light .edu-icao-badge { background: rgba(99,102,241,0.1); color: #6366f1; }
.kwp-light .edu-apt-name-lg { color: #1e293b; }
.kwp-light .edu-date-cell { color: #475569; }
.edu-history-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.edu-hist-nav { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(148,163,184,0.2); background: rgba(30,41,59,0.5); color: #94a3b8; cursor: pointer; transition: all 0.2s; }
.edu-hist-nav svg { display: block; width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; }
.edu-hist-nav:hover { border-color: #6366f1; color: #e2e8f0; background: rgba(99,102,241,0.15); }
.edu-hist-date { padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(148,163,184,0.2); background: rgba(15,23,42,0.6); color: #e2e8f0; font-size: 0.88rem; font-weight: 600; font-family: 'Inter', system-ui, sans-serif; cursor: pointer; }
.edu-hist-date::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.edu-hist-quick { padding: 7px 16px; border-radius: 8px; border: 1px solid rgba(148,163,184,0.2); background: transparent; color: #94a3b8; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.edu-hist-quick:hover { border-color: #3b82f6; color: #e2e8f0; background: rgba(59,130,246,0.1); }
.edu-hist-quick.active { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border-color: #3b82f6; }
.edu-history-result { min-height: 40px; }
.edu-history-empty { text-align: center; padding: 30px; color: #64748b; }
.edu-history-empty svg { color: #475569; margin-bottom: 8px; }
.edu-history-empty p { margin: 0; font-size: 0.85rem; }
.edu-hist-meta { font-size: 0.75rem; color: #64748b; margin-bottom: 10px; padding: 8px 12px; background: rgba(30,41,59,0.4); border-radius: 8px; border: 1px solid rgba(148,163,184,0.1); }
.edu-hist-meta b { color: #94a3b8; }
.edu-wx-cell { font-family: 'Courier New', monospace; font-size: 0.72rem; color: #fbbf24; }

/* ============================================================
   LIGHT THEME — Expandable Airport Detail
   ============================================================ */
.kwp-light .edu-expand-btn { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.kwp-light .edu-expand-btn:hover { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.kwp-light .edu-expand-btn.edu-expand-active { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.kwp-light .edu-detail-container { background: #fff; border-color: #e5e7eb; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.kwp-light .edu-detail-loading { color: #64748b; }
.kwp-light .edu-dt-error { color: #dc2626; }
.kwp-light .edu-dt-title { color: #1e293b; border-bottom-color: #e5e7eb; }
.kwp-light .edu-dt-title svg { color: #d97706; }
.kwp-light .edu-dt-subtitle { color: #374151; }
.kwp-light .edu-dt-subtitle svg { color: #6366f1; }
.kwp-light .edu-dt-ig-l { color: #6b7280; }
.kwp-light .edu-dt-ig-v { color: #1e293b; }
.kwp-light .edu-dt-ig-flags svg { color: #d97706; }
.kwp-light .edu-dt-sep { color: #d1d5db; }
.kwp-light .edu-dt-geo-item { background: #f9fafb; border-color: #e5e7eb; }
.kwp-light .edu-dt-geo-body strong { color: #1e293b; }
.kwp-light .edu-dt-geo-body p { color: #6b7280; }
.kwp-light .edu-dt-live { background: #f9fafb; border-color: #e5e7eb; }
.kwp-light .edu-dt-cat-lifr { background: rgba(220,38,38,0.08); color: #dc2626; border-color: rgba(220,38,38,0.2); }
.kwp-light .edu-dt-cat-ifr { background: rgba(234,88,12,0.08); color: #ea580c; border-color: rgba(234,88,12,0.2); }
.kwp-light .edu-dt-cat-mvfr { background: rgba(37,99,235,0.08); color: #2563eb; border-color: rgba(37,99,235,0.2); }
.kwp-light .edu-dt-cat-vfr { background: rgba(34,197,94,0.08); color: #16a34a; border-color: rgba(34,197,94,0.2); }
.kwp-light .edu-dt-live-item svg { color: #6366f1; }
.kwp-light .edu-dt-lv-l { color: #6b7280; }
.kwp-light .edu-dt-lv-v { color: #1e293b; }
.kwp-light .edu-dt-lv-wx { color: #b45309; }
.kwp-light .edu-dt-raw { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
.kwp-light .edu-dt-period-tabs { background: #f1f5f9; }
.kwp-light .edu-dt-period-tab { color: #64748b; }
.kwp-light .edu-dt-period-tab:hover { background: #e2e8f0; color: #1e293b; }
.kwp-light .edu-dt-period-tab.active { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.kwp-light .edu-dt-sc { border-color: #e5e7eb; }
.kwp-light .edu-dt-sc-blue { background: rgba(59,130,246,0.06); }
.kwp-light .edu-dt-sc-blue .edu-dt-sc-val { color: #2563eb; }
.kwp-light .edu-dt-sc-red { background: rgba(239,68,68,0.06); }
.kwp-light .edu-dt-sc-red .edu-dt-sc-val { color: #dc2626; }
.kwp-light .edu-dt-sc-purple { background: rgba(139,92,246,0.06); }
.kwp-light .edu-dt-sc-purple .edu-dt-sc-val { color: #7c3aed; }
.kwp-light .edu-dt-sc-amber { background: rgba(245,158,11,0.06); }
.kwp-light .edu-dt-sc-amber .edu-dt-sc-val { color: #d97706; }
.kwp-light .edu-dt-sc-lbl { color: #6b7280; }
.kwp-light .edu-dt-cl-lifr { color: #dc2626; }
.kwp-light .edu-dt-cl-ifr { color: #ea580c; }
.kwp-light .edu-dt-cl-mvfr { color: #2563eb; }
.kwp-light .edu-dt-cl-vfr { color: #16a34a; }
.kwp-light .edu-dt-table th { background: #f8fafc; color: #6b7280; }
.kwp-light .edu-dt-table td { color: #374151; border-bottom-color: #f1f5f9; }
.kwp-light .edu-dt-table tbody tr:hover { background: #f9fafb; }
.kwp-light .edu-dt-td-period { color: #1e293b; }
.kwp-light .edu-dt-tr-active td { background: rgba(99,102,241,0.05); }
.kwp-light .edu-dt-bad { background: rgba(239,68,68,0.1); color: #dc2626; }
.kwp-light .edu-dt-mc { background: #f9fafb; border-color: #e5e7eb; }
.kwp-light .edu-dt-mc-v { color: #1e293b; }
.kwp-light .edu-dt-mc-l { color: #6b7280; }
.kwp-light .edu-dt-bar-lbl { color: #6b7280; }
.kwp-light .edu-dt-bar-track { background: #f1f5f9; }
.kwp-light .edu-dt-bar-pct { color: #6b7280; }
.kwp-light .edu-dt-wx-icon { color: #6b7280; }
.kwp-light .edu-dt-wx-name { color: #374151; }
.kwp-light .edu-dt-wx-barwrap { background: #f1f5f9; }
.kwp-light .edu-dt-wx-pct { color: #6b7280; }
.kwp-light .edu-dt-hourly-chart { background: #f9fafb; }
.kwp-light .edu-dt-hb-lbl { color: #94a3b8; }
.kwp-light .edu-dt-worst { background: rgba(254,226,226,0.4); border-color: rgba(239,68,68,0.15); }
.kwp-light .edu-dt-wc-l { color: #6b7280; }
.kwp-light .edu-dt-wc-v { color: #dc2626; }
.kwp-light .edu-dt-wc-score { color: #b91c1c; }
.kwp-light .edu-dt-worst-wx { color: #b91c1c; }
.kwp-light .edu-dt-ro-lifr { background: rgba(220,38,38,0.04); }
.kwp-light .edu-dt-ro-ifr { background: rgba(234,88,12,0.04); }
.kwp-light .edu-dt-ro-mvfr { background: rgba(37,99,235,0.04); }
.kwp-light .edu-dt-ro-vfr { background: rgba(34,197,94,0.03); }
.kwp-light .edu-dt-ro-time { color: #6b7280; }
.kwp-light .edu-dt-ro-score { color: #1e293b; }
.kwp-light .edu-dt-ro-det { color: #6b7280; }
.kwp-light .edu-dt-ro-wx { color: #b45309; }
/* Light theme language selector */
.kwp-light .edu-lang-btn { color: #64748b; border-color: #e2e8f0; background: rgba(249,250,251,0.8); }
.kwp-light .edu-lang-name { color: #64748b; }
.kwp-light .edu-lang-btn:hover { border-color: #6366f1; background: rgba(99,102,241,0.06); }
.kwp-light .edu-lang-btn:hover .edu-lang-name { color: #4f46e5; }
.kwp-light .edu-lang-btn.active { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; border-color: #6366f1; }
.kwp-light .edu-lang-btn.active .edu-lang-name { color: #fff; }
/* Light theme history browser */
.kwp-light .edu-hist-nav { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.kwp-light .edu-hist-nav:hover { border-color: #3b82f6; color: #2563eb; background: rgba(59,130,246,0.06); }
.kwp-light .edu-hist-date { background: #fff; border-color: #e2e8f0; color: #1e293b; }
.kwp-light .edu-hist-date::-webkit-calendar-picker-indicator { filter: none; }
.kwp-light .edu-hist-quick { color: #64748b; border-color: #e2e8f0; }
.kwp-light .edu-hist-quick:hover { border-color: #3b82f6; color: #2563eb; background: rgba(59,130,246,0.04); }
.kwp-light .edu-hist-quick.active { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
.kwp-light .edu-history-empty { color: #94a3b8; }
.kwp-light .edu-hist-meta { background: #f9fafb; border-color: #e5e7eb; color: #6b7280; }
.kwp-light .edu-hist-meta b { color: #374151; }
.kwp-light .edu-wx-cell { color: #b45309; }

/* ============================================================
   RESPONSIVE — Live Weather Statistics Dashboard
   ============================================================ */
@media (max-width: 768px) {
    .edu-stats-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .edu-sc-val { font-size: 1.3rem; }
    .edu-sc { padding: 14px 12px; gap: 10px; }
    .edu-sc-icon { width: 40px; height: 40px; }
    .edu-conditions-grid { grid-template-columns: 1fr; }
    .edu-phenomena-grid { grid-template-columns: repeat(4, 1fr); }
    .edu-stats-block { padding: 16px; }
    .edu-share-bar { gap: 4px; }
    .edu-spotlight-grid { flex-direction: column; gap: 14px; }
    .edu-sev-label { width: 100px; }
    .edu-sev-count { width: 70px; }
    /* Detail panel responsive */
    .edu-th-detail { width: auto; }
    .edu-expand-text { display: none; }
    .edu-expand-btn { padding: 6px 10px; }
    .edu-detail-container { padding: 14px; margin: 6px 2px 12px; }
    .edu-dt-info-grid { grid-template-columns: 1fr; }
    .edu-dt-live-grid { grid-template-columns: repeat(2, 1fr); }
    .edu-dt-summary { grid-template-columns: repeat(2, 1fr); }
    .edu-dt-mini-grid { grid-template-columns: repeat(3, 1fr); }
    .edu-dt-worst-grid { grid-template-columns: repeat(2, 1fr); }
    .edu-dt-ro { flex-wrap: wrap; gap: 4px; }
    .edu-dt-ro-time { width: auto; }
    .edu-dt-period-tabs { flex-wrap: wrap; }
    .edu-dt-period-tab { padding: 6px 8px; font-size: 0.75rem; }
    .edu-lang-btn { min-width: 56px; padding: 6px 10px; }
    .edu-lang-flag { font-size: 1.4rem; }
    .edu-lang-name { font-size: 0.62rem; }
}
@media (max-width: 480px) {
    .edu-stats-cards { grid-template-columns: 1fr; }
    .edu-sc { padding: 12px 10px; }
    .edu-sc-val { font-size: 1.2rem; }
    .edu-stats-table th, .edu-stats-table td { padding: 8px 8px; font-size: 0.78rem; }
    .edu-cat-bar { height: 34px; font-size: 0.7rem; line-height: 34px; }
    .edu-phenomena-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .edu-phen-item { padding: 8px 4px; }
    .edu-phen-count { font-size: 1rem; }
    .edu-conditions-grid { gap: 10px; }
    .edu-stats-block { padding: 14px 12px; }
    .edu-share-btn { width: 30px; height: 30px; }
    .edu-share-copy { padding: 0 8px; font-size: 0.68rem; }
    .edu-hazard-bar { flex-direction: column; gap: 6px; }
    .edu-spot-icao .edu-apt-link { font-size: 1.3rem; }
    .edu-spot-score { font-size: 1rem; }
    /* Detail panel 480px */
    .edu-detail-container { padding: 10px; margin: 4px 0 10px; }
    .edu-dt-summary { grid-template-columns: 1fr 1fr; gap: 6px; }
    .edu-dt-sc-val { font-size: 1.1rem; }
    .edu-dt-mini-grid { grid-template-columns: repeat(2, 1fr); }
    .edu-dt-mini-3 { grid-template-columns: repeat(2, 1fr); }
    .edu-dt-worst-grid { grid-template-columns: 1fr; }
    .edu-dt-live-grid { grid-template-columns: 1fr; }
    .edu-dt-hourly-chart { height: 70px; }
    .edu-dt-bar-lbl { width: 50px; font-size: 0.68rem; }
    .edu-dt-table { font-size: 0.72rem; }
    .edu-dt-table th, .edu-dt-table td { padding: 5px 6px; }
}