:root {
    --bg-color: #f8fafc;
    --text-color: #1e293b;
    --panel-bg: #ffffff;
    --border-color: #e2e8f0;
    --muted-text: #64748b;
}

.dark {
    --bg-color: #020617;
    --text-color: #e2e8f0;
    --panel-bg: #0f172a;
    --border-color: #1e293b;
    --muted-text: #94a3b8;
}

body { background-color: var(--bg-color); color: var(--text-color); font-family: 'Inter', system-ui, sans-serif; transition: background-color 0.3s, color 0.3s; }
#map { height: 600px; border-radius: 0.75rem; border: 1px solid var(--border-color); background: var(--bg-color); }
.glass-panel { background: var(--panel-bg); border: 1px solid var(--border-color); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); transition: background-color 0.3s, border-color 0.3s; }
.nav-table th { color: var(--muted-text); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; padding: 0.75rem 0.5rem; }
.nav-table td { border-bottom: 1px solid var(--border-color); padding: 0.75rem 0.5rem; font-size: 0.875rem; }
.airport-badge { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); color: white; padding: 0.2rem 0.6rem; border-radius: 9999px; font-weight: 800; font-size: 0.75rem; box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
.metar-box { background: var(--bg-color); border-left: 3px solid #3b82f6; transition: all 0.2s; }
.metar-box:hover { border-left-width: 6px; background: var(--panel-bg); }
.tab-btn { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--muted-text); border-bottom: 2px solid transparent; transition: all 0.2s; }
.tab-btn.active { color: #3b82f6; border-bottom-color: #3b82f6; background: rgba(59, 130, 246, 0.05); }
.runway-card { 
    background: #1e293b; 
    border: 1px solid #334155; 
    padding: 0.5rem; 
    border-radius: 0.4rem; 
    text-align: center; 
    font-size: 0.75rem; 
    color: #fff; 
    transition: all 0.2s;
    cursor: pointer;
}
.runway-card:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.dark .runway-card { background: #1e293b; border-color: #334155; }
.light .runway-card { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }

.proc-item { 
    background: var(--panel-bg); 
    border: 1px solid var(--border-color); 
    padding: 0.6rem; 
    border-radius: 0.4rem; 
    margin-bottom: 0.5rem; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}
.proc-item:hover { 
    border-color: #3b82f6; 
    transform: translateX(4px);
    background: rgba(59, 130, 246, 0.05);
}

/* Map Label Style */
.map-label { background: transparent; border: none; box-shadow: none; color: #94a3b8; font-weight: bold; font-size: 10px; text-shadow: 1px 1px 2px #000; }
.dark .map-label { color: #94a3b8; text-shadow: 1px 1px 2px #000; }
.light .map-label { color: #475569; text-shadow: 1px 1px 2px #fff; }

#weather-container, #route-details-panel, #route-summary {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#weather-container:not(.hidden), #route-details-panel:not(.hidden), #route-summary:not(.hidden) {
    animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

input {
    caret-color: #3b82f6;
}

.dark input {
    color: #60a5fa; /* blue-400 fallback */
}

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

.animate-fade-in {
    animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spin 1s linear infinite;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }