@media (max-width: 1100px) {
    .feed-layout,
    .profile-layout,
    .messages-layout {
        grid-template-columns: 1fr;
    }

    .side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discover-grid,
    .resource-grid,
    .admin-stat-grid,
    .settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auth-shell {
        grid-template-columns: 1fr;
        gap: 34px;
        padding-top: 18px;
    }

    .auth-brand-panel h1 {
        font-size: clamp(3.5rem, 12vw, 6rem);
    }

    .onboarding-shell {
        grid-template-columns: 1fr;
    }

    .onboarding-rail {
        grid-template-rows: auto;
        overflow-x: auto;
    }

    .onboarding-rail ol {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
    }

    .rail-help {
        display: none;
    }
}

@media (max-width: 800px) {
    .app-body {
        padding: 12px;
    }

    .app-topbar {
        grid-template-columns: 1fr auto;
        top: 12px;
    }

    .desktop-nav {
        display: none;
    }

    .theme-toggle span {
        min-width: 38px;
        font-size: 0;
    }

    .app-main {
        margin-bottom: 96px;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 30;
        min-height: 68px;
        padding: 8px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        gap: 6px;
    }

    .mobile-bottom-nav a {
        min-height: 48px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        color: var(--muted);
        font-weight: 800;
        font-size: 0.8rem;
    }

    .mobile-bottom-nav a.is-active,
    .mobile-bottom-nav .nav-add {
        color: #fff;
        background: var(--rainbow);
        box-shadow: 0 12px 26px rgba(121, 55, 255, 0.24);
    }

    .side-column,
    .discover-grid,
    .resource-grid,
    .admin-stat-grid,
    .settings-grid,
    .profile-photos {
        grid-template-columns: 1fr;
    }

    .chat-compose {
        grid-template-columns: 1fr;
    }

    .auth-header {
        width: calc(100% - 28px);
        height: 76px;
    }

    .language-pill {
        display: none;
    }

    .auth-shell {
        width: min(540px, calc(100% - 28px));
        padding: 6px 0 42px;
    }

    .auth-brand-panel {
        display: grid;
        justify-items: center;
    }

    .auth-brand-panel .hero-logo {
        width: 170px;
    }

    .auth-brand-panel h1 {
        font-size: 4.8rem;
    }

    .auth-brand-panel p {
        font-size: 1.25rem;
    }

    .login-card {
        padding: 24px;
    }

    .login-card h2,
    .login-card > p {
        display: none;
    }

    .social-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .social-row button {
        font-size: 0;
        min-height: 54px;
    }

    .auth-footer {
        display: none;
    }

    .onboarding-body {
        padding: 12px;
    }

    .onboarding-header {
        min-height: 64px;
        padding: 10px 12px;
    }

    .onboarding-shell {
        min-height: auto;
        margin-top: 12px;
        gap: 12px;
    }

    .onboarding-stage {
        min-height: calc(100vh - 170px);
        padding: 18px;
    }

    .onboarding-form {
        min-height: calc(100vh - 250px);
    }
}

@media (max-width: 560px) {
    body {
        background:
            linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 255, 0.88), rgba(255, 245, 253, 0.82)),
            linear-gradient(90deg, rgba(255, 92, 140, 0.08), rgba(30, 164, 244, 0.08));
    }

    [data-theme="dark"] body {
        background:
            linear-gradient(150deg, #050711, #0b1020 58%, #070713),
            linear-gradient(90deg, rgba(253, 92, 120, 0.14), rgba(30, 164, 244, 0.12));
    }

    .brand-lockup span {
        font-size: 1.1rem;
    }

    .topbar-actions {
        gap: 6px;
    }

    .logout-link {
        display: none;
    }

    .avatar-pill {
        width: 40px;
        height: 40px;
    }

    .page-heading h1 {
        font-size: 2.35rem;
    }

    .stories-bar {
        grid-auto-columns: 82px;
    }

    .post-card footer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .auth-brand-panel .hero-logo {
        width: 150px;
    }

    .auth-brand-panel h1 {
        font-size: 4.2rem;
    }

    .login-card {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 10px 0 0;
        backdrop-filter: none;
    }

    .auth-form .rainbow-button {
        width: 100%;
    }

    .onboarding-rail {
        padding: 10px;
        border-radius: 18px;
    }

    .onboarding-rail li {
        font-size: 0;
        gap: 0;
        padding: 8px;
    }

    .onboarding-rail li span {
        font-size: 0.78rem;
    }

    .onboarding-stage {
        width: 100%;
        border-radius: 22px;
    }

    .date-wheel {
        grid-template-columns: 0.8fr 1.25fr 1fr;
    }

    .date-wheel select {
        min-height: 150px;
        font-size: 0.92rem;
    }

    .photo-preview {
        grid-template-columns: repeat(3, 1fr);
    }
}