@media (max-width: 599px) {
    :root {
        --font-size-title: 22px;
        --font-size-timer: 40px;
    }

    .page {
        width: 100%;
        padding: var(--space-4);
    }

    .card {
        padding: var(--space-4);
    }

    .btn {
        width: 100%;
    }

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

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .calendar {
        width: 100%;
    }

    .calendar-day {
        min-height: 44px;
    }

    .chart-scroll {
        overflow-x: auto;
        overflow-y: hidden;
    }
}

@media (min-width: 600px) and (max-width: 899px) {
    .page {
        width: min(100%, 760px);
        margin: 0 auto;
        padding: var(--space-6);
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

@media (min-width: 900px) {
    .page {
        width: min(100%, 960px);
        margin: 0 auto;
        padding: var(--space-7);
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
}