@media (max-width: 1080px) {
    .auth-page {
        padding: 16px;
    }

    .auth-shell {
        min-height: calc(100vh - 32px);
        grid-template-columns: minmax(340px, 0.76fr) minmax(480px, 1.24fr);
    }

    .auth-showcase {
        padding-right: 30px;
        padding-left: 30px;
    }

    .task-illustration {
        transform: scale(0.86);
        margin-top: 4px;
        margin-bottom: -24px;
    }

    .benefit-list small {
        display: none;
    }
}

@media (max-width: 820px) {
    .auth-page {
        padding: 0;
        background: var(--color-surface);
    }

    .auth-shell {
        display: block;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-showcase {
        display: none;
    }

    .auth-panel {
        min-height: 100vh;
        padding: 100px clamp(24px, 8vw, 72px) 48px;
    }

    .auth-panel::before {
        content: "Flow";
        position: absolute;
        left: clamp(24px, 8vw, 72px);
        top: 31px;
        color: var(--color-text);
        font-size: 1.5rem;
        font-weight: 850;
        letter-spacing: -0.04em;
    }

    .theme-switch {
        top: 25px;
        right: clamp(20px, 6vw, 56px);
    }

    .auth-card-header {
        margin-bottom: 36px;
    }
}

@media (max-width: 560px) {
    .auth-panel {
        align-items: start;
        padding-right: 20px;
        padding-left: 20px;
    }

    .auth-card-header {
        text-align: left;
    }

    .auth-card-header h1 {
        font-size: 1.8rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .form-options {
        align-items: flex-start;
    }

    .input-wrap input {
        height: 56px;
    }

    .demo-note {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .toast-region {
        right: 16px;
        bottom: 16px;
    }

    .protected-page {
        padding: 16px;
    }

    .protected-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

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

@media (max-width: 1280px) {
    .app-shell {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .app-sidebar {
        padding-right: 12px;
        padding-left: 12px;
    }

    .dashboard-header,
    .project-tabs,
    .dashboard-content {
        padding-right: 28px;
        padding-left: 28px;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 118px);
        gap: 9px;
    }

    .quick-add {
        grid-template-columns: minmax(0, 1fr) 240px;
    }

    .task-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .toolbar-controls {
        width: 100%;
        grid-template-columns: minmax(200px, 1fr) 150px 150px 150px;
    }

    .compact-filter {
        height: 40px;
    }

    .settings-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        padding-right: 24px;
        padding-left: 20px;
    }
}

@media (max-width: 1000px) {
    .app-page {
        overflow: auto;
    }

    .app-shell {
        display: block;
    }

    .app-sidebar {
        position: fixed;
        z-index: 50;
        left: 0;
        top: 0;
        width: min(290px, 86vw);
        padding: 18px 16px;
        box-shadow: 20px 0 60px rgba(18, 22, 42, 0.18);
        transform: translateX(-105%);
        transition: transform 220ms ease;
    }

    .sidebar-mobile-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .icon-button {
        width: 38px;
        height: 38px;
        border-radius: 9px;
        font-size: 1.6rem;
    }

    body.sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-backdrop {
        display: block;
    }

    .app-main {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .mobile-menu-button {
        display: grid;
        place-items: center;
    }

    .dashboard-header {
        min-height: 150px;
    }

    .settings-header {
        padding-left: 25px;
    }

    .settings-layout {
        padding-left: 24px;
    }

    .settings-navigation {
        position: sticky;
        top: 0;
        align-self: start;
    }
}

@media (max-width: 820px) {
    .dashboard-header {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        padding: 23px 20px 18px;
    }

    .dashboard-header-right {
        width: 100%;
        justify-items: stretch;
    }

    .header-account-controls {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .stats-grid {
        width: 100%;
        grid-template-columns: repeat(3, minmax(118px, 1fr));
        overflow-x: auto;
    }

    .project-tabs {
        padding: 0 20px;
    }

    .dashboard-content {
        padding: 20px;
    }

    .quick-add {
        grid-template-columns: minmax(0, 1fr) 190px;
        gap: 10px;
    }

    .toolbar-controls {
        grid-template-columns: 1fr 1fr;
    }

    .project-progress {
        grid-template-columns: auto minmax(100px, 1fr) 40px;
    }

    .project-progress b {
        grid-column: 1 / -1;
        text-align: left;
    }

    .task-card {
        display: block;
        padding: 11px;
    }

    .task-badges {
        justify-content: flex-start;
    }

    .task-card .task-favorite {
        grid-column: auto;
        grid-row: auto;
    }

    .task-card .task-menu-button {
        grid-column: auto;
        grid-row: auto;
    }

    .task-list.is-list-view .task-card {
        grid-template-columns: 20px 32px minmax(140px, 1fr) 34px 28px;
        padding-right: 9px;
        padding-left: 9px;
    }

    .task-list.is-list-view .task-badges {
        grid-column: 3 / 4;
        justify-content: flex-start;
        margin-top: -5px;
    }

    .task-list.is-list-view .task-favorite {
        grid-column: 4;
        grid-row: 1 / 3;
    }

    .task-list.is-list-view .task-menu-button {
        grid-column: 5;
        grid-row: 1 / 3;
    }

    .settings-header {
        min-height: 100px;
        padding: 23px 20px;
    }

    .settings-layout {
        display: block;
        padding: 0 20px 24px;
    }

    .settings-navigation {
        position: static;
        display: flex;
        margin-bottom: 18px;
        padding: 0 0 8px;
        border: 0;
        overflow-x: auto;
        flex-direction: row;
    }

    .settings-nav-item {
        min-width: 140px;
        grid-template-columns: 28px 1fr;
        padding: 9px;
    }

    .settings-nav-item small {
        display: none;
    }

    .settings-footer {
        padding: 0 20px;
    }

    .modal {
        padding: 12px;
    }

    .modal-dialog {
        max-height: calc(100vh - 24px);
        border-radius: 17px;
    }

    .modal-header {
        grid-template-columns: 58px minmax(0, 1fr) 38px;
        gap: 13px;
        padding: 24px 22px 15px;
    }

    .modal-heading-icon {
        width: 54px;
        height: 54px;
        font-size: 1.5rem;
    }

    .modal-header p {
        font-size: 0.78rem;
    }

    .modal-body {
        padding: 12px 22px 20px;
    }

    .modal-footer {
        margin: 0 22px;
    }
}

@media (max-width: 620px) {
    .header-title-row h1 {
        font-size: 1.55rem;
    }

    .header-title-row p {
        font-size: 0.8rem;
    }

    .header-account-controls .avatar {
        width: 37px;
        height: 37px;
    }

    .minimal-theme-toggle > span {
        display: none;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 125px);
    }

    .quick-add {
        grid-template-columns: 1fr;
    }

    .filter-chips {
        flex-wrap: nowrap;
        margin-right: -20px;
        padding-right: 20px;
        overflow-x: auto;
    }

    .filter-chip {
        flex: 0 0 auto;
    }

    .toolbar-controls {
        grid-template-columns: 1fr;
    }

    .project-progress {
        gap: 10px;
    }

    .task-card {
        min-height: 92px;
        grid-template-columns: 18px 30px minmax(100px, 1fr) 31px 25px;
    }

    .task-title {
        font-size: 0.8rem;
    }

    .task-description {
        display: none;
    }

    .task-badge {
        min-height: 22px;
        padding: 0 7px;
        font-size: 0.59rem;
    }

    .drag-hint {
        display: none;
    }

    .modal-form-grid,
    .project-setting-options {
        grid-template-columns: 1fr;
    }

    .modal-header {
        grid-template-columns: 46px minmax(0, 1fr) 34px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .modal-heading-icon {
        width: 44px;
        height: 44px;
        border-radius: 11px;
        font-size: 1.2rem;
    }

    .modal-header h2 {
        font-size: 1.25rem;
    }

    .modal-header p {
        display: none;
    }

    .modal-body {
        padding-right: 16px;
        padding-left: 16px;
        gap: 17px;
    }

    .modal-field input,
    .modal-field select {
        height: 50px;
    }

    .modal-footer {
        margin: 0 16px;
        padding-bottom: 20px;
    }

    .modal-footer .button {
        min-width: 0;
        flex: 1;
        padding: 0 12px;
    }

    .color-choices,
    .icon-choices {
        gap: 9px;
    }

    .color-choice,
    .icon-choices label {
        width: 44px;
        height: 44px;
    }

    .settings-card {
        padding: 20px 15px;
    }

    .profile-summary {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .profile-summary .button {
        grid-column: 1 / -1;
    }

    .settings-row {
        align-items: stretch;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 13px 0;
    }

    .account-action-grid,
    .integration-grid {
        grid-template-columns: 1fr;
    }

    .settings-footer {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
    }
}