@media (min-width: 768px) {
    .app-content {
        max-width: 600px;
        margin: 0 auto;
        padding: var(--space-xl);
    }

    .app-header {
        justify-content: center;
    }

    .app-navbar {
        max-width: 600px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .modal-overlay {
        align-items: center;
    }

    .modal-content {
        border-radius: var(--radius-lg);
        max-height: 85vh;
    }

    .btn-fab {
        right: calc(50% - 270px);
    }
}

@media (min-width: 1024px) {
    .app-content {
        max-width: 700px;
    }

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

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}