:root {
    --onboarding-bg: #070b14;
    --onboarding-surface: #101827;
    --onboarding-surface-raised: #141e2f;
    --onboarding-border: rgba(255, 255, 255, 0.1);
    --onboarding-gold: #f59e0b;
    --onboarding-gold-soft: rgba(245, 158, 11, 0.12);
    --onboarding-text-muted: #9aa6ba;
}

body {
    background: radial-gradient(circle at 88% -12%, #192544 0, transparent 34rem), var(--onboarding-bg) !important;
    color: #f8fafc;
}

#map { background: #0a101d !important; }
.map-vignette { background: radial-gradient(circle at 50% 45%, transparent 24%, rgba(7, 11, 20, 0.84) 100%) !important; }

.sidebar {
    background: linear-gradient(160deg, rgba(16, 24, 39, 0.98), rgba(8, 13, 24, 0.99)) !important;
    border-left-color: var(--onboarding-border) !important;
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.28) !important;
}

.sidebar > div:first-child {
    background: rgba(7, 11, 20, 0.82) !important;
    border-bottom-color: var(--onboarding-border) !important;
    backdrop-filter: blur(14px);
}

.sidebar .text-gray-400,
.sidebar .text-gray-500,
.sidebar .text-white\/50 { color: var(--onboarding-text-muted) !important; }

.sidebar .bg-white\/10 { background-color: rgba(255, 255, 255, 0.08) !important; }
.sidebar .border-white\/5,
.sidebar .border-white\/10 { border-color: var(--onboarding-border) !important; }
.sidebar .bg-dark-surface { background-color: rgba(255, 255, 255, 0.045) !important; }

.data-overlay {
    background: rgba(12, 19, 33, 0.9) !important;
    backdrop-filter: blur(16px) !important;
    border-color: var(--onboarding-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
}

.option-btn {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: var(--onboarding-border) !important;
    box-shadow: none !important;
}

.option-btn:hover,
.option-btn.selected {
    border-color: rgba(245, 158, 11, 0.6) !important;
    background: var(--onboarding-gold-soft) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

.option-btn:hover { transform: translateY(-1px) !important; }
.option-btn.selected { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.22), 0 10px 24px rgba(0, 0, 0, 0.2) !important; }
.option-btn.selected i,
.option-btn:hover i,
.text-dark-accent { color: var(--onboarding-gold) !important; }

.property-option.selected::after {
    background: var(--onboarding-gold) !important;
    color: #17100a !important;
    box-shadow: none !important;
}

.sidebar .bg-dark-accent {
    background-color: var(--onboarding-gold) !important;
    box-shadow: 0 10px 22px rgba(245, 158, 11, 0.18) !important;
}

.sidebar .bg-dark-accent:hover { background-color: #fbbd37 !important; }
.sidebar button:focus-visible,
.sidebar input:focus-visible,
.sidebar select:focus-visible { outline: 3px solid rgba(245, 158, 11, 0.55); outline-offset: 3px; }

.step-container { padding: 2rem 2.25rem !important; }
.step-container h2 { letter-spacing: -0.025em; }
.step-container p { line-height: 1.85; }

.sidebar ::-webkit-scrollbar { width: 7px; }
.sidebar ::-webkit-scrollbar-track { background: transparent; }
.sidebar ::-webkit-scrollbar-thumb { background: rgba(154, 166, 186, 0.35); border-radius: 99px; }
.sidebar ::-webkit-scrollbar-thumb:hover { background: rgba(245, 158, 11, 0.6); }

.leaflet-bar a {
    background-color: rgba(16, 24, 39, 0.94) !important;
    border-color: var(--onboarding-border) !important;
    color: var(--onboarding-gold) !important;
}

@media (max-width: 767px) {
    body { min-height: 100dvh; height: auto !important; flex-direction: column !important; overflow: auto !important; }
    body > div:first-child { flex: none !important; height: 34dvh; min-height: 250px; }
    .sidebar { width: 100% !important; height: 66dvh !important; min-height: 480px; border-left: 0 !important; border-top: 1px solid var(--onboarding-border); }
    .data-overlay { top: 16px !important; left: 16px !important; width: min(300px, calc(100vw - 32px)) !important; padding: 1rem !important; }
    .step-container { padding: 1.5rem !important; }
}