.app-shell {
    position: relative;
    display: grid;
    gap: var(--space-5);
    width: min(100% - 2rem, var(--content-max));
    margin: 0 auto;
    padding: var(--space-5) 0 var(--space-8);
}

.app-main {
    min-width: 0;
}

.adaptive-nav {
    position: fixed;
    top: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    z-index: 30;
    display: grid;
    width: min(20rem, calc(100vw - 2rem));
    min-width: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--space-5);
    transform: translateX(calc(-100% - var(--space-5)));
    transition: transform var(--transition-base), width var(--transition-base);
}

body[data-nav-open="true"] .adaptive-nav {
    transform: translateX(0);
}

.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 25;
    visibility: hidden;
    border: 0;
    background: rgba(2, 18, 48, 0.68);
    opacity: 0;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

body[data-nav-open="true"] .nav-overlay {
    visibility: visible;
    opacity: 1;
}

.site-header {
    position: sticky;
    top: var(--space-4);
    z-index: 10;
    display: grid;
    grid-template-columns: auto minmax(12rem, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    background:
        radial-gradient(circle at 16% 0%, rgba(47, 247, 255, 0.2), transparent 30%),
        radial-gradient(circle at 84% 20%, rgba(18, 109, 255, 0.14), transparent 34%),
        linear-gradient(135deg, rgba(36, 162, 255, 0.14), transparent 38%),
        rgba(4, 28, 66, 0.9);
    box-shadow:
        var(--shadow-soft),
        var(--shadow-cyan),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.dashboard {
    display: grid;
    gap: var(--space-5);
}

.hero-weather {
    --hero-scene-position: 64% 50%;
    --hero-scene-brightness: 0.94;
    --hero-scene-saturation: 1.04;
    --hero-overlay-left: 0.9;
    --hero-overlay-center: 0.52;
    --hero-overlay-right: 0.32;
    position: relative;
    isolation: isolate;
    min-height: 31rem;
    overflow: hidden;
    border: 1px solid rgba(47, 247, 255, 0.52);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 24% 18%, rgba(47, 247, 255, 0.24), transparent 23rem),
        radial-gradient(circle at 86% 0%, rgba(18, 109, 255, 0.16), transparent 28rem),
        linear-gradient(150deg, rgba(36, 162, 255, 0.15), transparent 36%),
        var(--color-surface-strong);
    box-shadow:
        var(--shadow-soft),
        0 0 0 1px rgba(255, 255, 255, 0.045) inset,
        0 0 118px rgba(47, 247, 255, 0.34),
        0 0 190px rgba(36, 162, 255, 0.16);
    transition:
        border-color var(--transition-base),
        background-color var(--transition-base),
        opacity var(--transition-base);
}

.hero-weather::before,
.hero-weather::after {
    z-index: 1;
    position: absolute;
    content: "";
    pointer-events: none;
}

.hero-weather::before {
    display: none;
}

.hero-weather::after {
    display: none;
}

.hero-media {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 24%, rgba(47, 247, 255, 0.2), transparent 28rem),
        radial-gradient(circle at 18% 72%, rgba(18, 109, 255, 0.2), transparent 24rem),
        linear-gradient(135deg, rgba(5, 46, 105, 0.82), rgba(1, 8, 28, 0.96) 58%, rgba(2, 20, 56, 0.9));
}

.hero-media::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgb(1 8 24 / 0.8) 0%,
            rgb(1 10 29 / 0.6) 24%,
            rgb(1 10 29 / 0.24) 43%,
            rgb(1 10 29 / 0.06) 61%,
            transparent 76%),
        linear-gradient(180deg, rgb(2 18 48 / 0.02), rgb(1 8 24 / 0.1));
    content: "";
    pointer-events: none;
}

.hero-scene-image {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-scene-position);
    opacity: 0;
    filter:
        saturate(var(--hero-scene-saturation))
        brightness(var(--hero-scene-brightness));
    pointer-events: none;
    user-select: none;
    transition: opacity 140ms ease-out;
}

.hero-weather[data-weather-scene-loaded] .hero-scene-image {
    opacity: 1;
}

.hero-weather[data-weather-scene="clear-day"],
.hero-weather[data-weather-scene="snow"],
.hero-weather[data-weather-scene="fog"] {
    --hero-scene-brightness: 0.9;
    --hero-overlay-left: 0.94;
    --hero-overlay-center: 0.58;
    --hero-overlay-right: 0.36;
}

.hero-weather[data-weather-scene="clear-night"],
.hero-weather[data-weather-scene="storm"] {
    --hero-scene-brightness: 1.02;
    --hero-scene-saturation: 1.08;
    --hero-overlay-left: 0.82;
    --hero-overlay-center: 0.4;
    --hero-overlay-right: 0.22;
}

.hero-weather[data-weather-scene="cloudy"],
.hero-weather[data-weather-scene="rain"] {
    --hero-scene-brightness: 0.96;
    --hero-overlay-left: 0.88;
    --hero-overlay-center: 0.48;
    --hero-overlay-right: 0.28;
}

.hero-weather[data-weather-tone="clear"] {
    background:
        radial-gradient(circle at 24% 18%, rgba(47, 247, 255, 0.28), transparent 23rem),
        radial-gradient(circle at 86% 0%, rgba(255, 225, 109, 0.13), transparent 28rem),
        var(--color-surface-strong);
}

.hero-weather[data-weather-tone="unknown"] .hero-media {
    opacity: 0.82;
}

.hero-weather[data-weather-state="loading"] {
    border-color: rgba(139, 220, 255, 0.28);
}

.hero-weather[data-weather-state="error"] {
    border-color: rgba(255, 225, 109, 0.42);
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 31rem;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-8);
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.72fr);
    gap: var(--space-5);
    align-items: start;
}

.forecast-panel,
.astronomy-panel,
.alerts-panel {
    min-width: 0;
}

.weekly {
    grid-column: 1;
}

.astronomy-panel {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 2;
    gap: var(--space-5);
}

.alerts-panel {
    grid-column: 1 / -1;
}

.site-footer {
    margin-top: var(--space-6);
    color: var(--color-subtle);
    text-align: center;
}

.site-footer p {
    margin: 0;
    font-size: 0.875rem;
}