@media (max-width: 860px) {
    :root {
        --section-gap: 18px;
        --card-padding: 22px;
        --dashboard-card-height: 142px;
        --dashboard-panel-min-height: 196px;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .nav {
        width: 100%;
        gap: 8px;
    }

    .dashboard-head,
    .split,
    .detail-grid,
    .dashboard-insight-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .landing-hero {
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: auto;
        padding: 18px 0 4px;
    }

    .landing-hero-copy {
        max-width: 680px;
    }

    .landing-hero-visual {
        min-height: 520px;
    }

    .landing-quiz-preview {
        left: 4%;
        width: min(420px, 70%);
    }

    .hero-mascot {
        left: min(284px, 48%);
        width: min(504px, 78%);
    }

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

    .exam-card {
        grid-template-columns: 1fr;
    }

    .how-grid,
    .landing-bottom-cta {
        grid-template-columns: 1fr;
    }

    .how-card:not(:last-child)::after {
        display: none;
    }

    .how-card img {
        height: 130px;
    }

    .landing-bottom-cta {
        padding: 24px;
    }

    .dashboard-hero {
        align-items: start;
    }

    .hero-action-area {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .subscription-hero {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 28px;
    }

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

    .help-hero-mascot {
        right: -48px;
        top: -28px;
        width: 190px;
    }

    .help-contact-mascot {
        width: 120px;
    }

    .subscription-hero-mascot {
        right: -70px;
        top: -30px;
        width: 230px;
    }

    .limit-card-mascot {
        right: -52px;
        top: -28px;
        width: 170px;
    }

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

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

@media (max-width: 620px) {
    :root {
        --section-gap: 16px;
        --card-padding: 20px;
        --dashboard-card-height: 132px;
        --dashboard-panel-min-height: auto;
    }

    .page {
        width: min(100% - 24px, 1120px);
        padding-top: 28px;
    }

    .page-mascot {
        display: none;
    }

    .metrics,
    .level-grid,
    .answer-grid {
        grid-template-columns: 1fr;
    }

    .answer-hotkey {
        display: none;
    }

    .landing-page {
        gap: 34px;
    }

    .landing-hero h1 {
        font-size: clamp(38px, 12vw, 52px);
    }

    .landing-hero .hero-copy {
        font-size: 17px;
    }

    .landing-actions .button {
        width: 100%;
    }

    .landing-feature-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 26px;
    }

    .landing-hero-visual {
        min-height: auto;
        padding-top: 12px;
    }

    .landing-quiz-preview {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        padding: 20px;
    }

    .landing-toast {
        position: static;
        margin-top: 16px;
    }

    .hero-mascot {
        position: relative;
        right: auto;
        top: auto;
        width: min(260px, 70%);
        margin: -8px auto 0;
    }

    .why-grid,
    .how-grid,
    .demo-grid {
        grid-template-columns: 1fr;
    }

    .exam-card {
        padding: 22px;
    }

    .why-card {
        min-height: auto;
    }

    .demo-quiz {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .demo-quiz > .preview-chip,
    .demo-quiz > .preview-prompt,
    .demo-quiz > h3,
    .demo-quiz > .landing-answer-list,
    .demo-result {
        grid-column: 1;
    }

    .demo-result {
        grid-row: auto;
    }

    .progress-preview-stats {
        grid-template-columns: 1fr;
    }

    .bottom-mascot-wrap {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .bottom-mascot {
        width: 150px;
        margin-bottom: 0;
    }

    .speech-bubble {
        max-width: none;
    }

    .settings-grid.two-columns {
        grid-template-columns: 1fr;
    }

    .help-hero,
    .help-contact-section {
        grid-template-columns: 1fr;
    }

    .help-hero-mark {
        justify-self: start;
    }

    .help-hero-mark {
        width: 72px;
        height: 72px;
        border-radius: 24px;
        font-size: 38px;
    }

    .help-feature-grid,
    .help-topic-grid {
        grid-template-columns: 1fr;
    }

    .help-contact-section,
    .help-contact-form {
        padding: 20px;
    }

    .help-contact-form .button {
        width: 100%;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-card p {
        white-space: normal;
    }

    .site-footer {
        grid-template-columns: 1fr;
        justify-content: flex-start;
        white-space: normal;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        flex-wrap: wrap;
        width: 100%;
    }

    .footer-center {
        justify-content: center;
    }

    .footer-right {
        justify-content: flex-start;
    }

    .settings-card,
    .danger-settings-section {
        padding: 20px;
    }

    .premium-settings-card .button,
    .settings-form .button,
    .settings-form .small-button,
    .critical-action,
    .danger-settings-card .small-button {
        width: 100%;
    }

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

    .subscription-plans-grid {
        grid-template-columns: 1fr;
    }

    .subscription-hero {
        padding: 24px;
    }

    .subscription-hero h1 {
        font-size: clamp(32px, 11vw, 42px);
    }

    .subscription-hero-copy p:last-child {
        font-size: 15px;
    }

    .subscription-benefits {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .subscription-benefit {
        grid-template-columns: 48px 1fr;
        justify-items: start;
        align-items: center;
        text-align: left;
    }

    .subscription-benefit-icon {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .subscription-benefit strong {
        max-width: none;
    }

    .subscription-benefit small {
        grid-column: 2;
        max-width: none;
        margin-top: -8px;
    }

    .pricing-card {
        min-height: auto;
        padding: 24px;
    }

    .comparison-table {
        min-width: 620px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 12px 14px;
    }

    .auth-panel,
    .panel,
    .quiz,
    .result {
        padding: 22px;
        margin: 26px auto;
    }

    .panel.dashboard-panel,
    .dashboard-stats-panel {
        padding: var(--card-padding);
        margin: var(--section-gap) 0 0;
    }

    .dashboard-stat-card {
        min-height: var(--dashboard-card-height);
    }

    .dashboard-danger-zone {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-danger-zone .small-button {
        width: 100%;
    }

    .hero-level-selector {
        width: 100%;
        justify-content: stretch;
        overflow-x: auto;
    }

    .hero-level-form,
    .hero-level-option {
        flex: 1 0 auto;
    }

    .hero-action-area {
        grid-template-columns: 1fr;
    }

    .hero-action-card {
        padding: 18px;
    }

    .dashboard-progress-card .panel-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .progress-legend {
        grid-template-columns: 1fr;
    }

    .quiz h1 {
        font-size: clamp(40px, 15vw, 64px);
    }

    .quiz-question.translation-question {
        font-size: clamp(25px, 8vw, 36px);
    }

    .word-facts div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .quiz-status-bar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .quiz-status-main {
        justify-content: space-between;
        min-width: 0;
    }

    .quiz-limit-status {
        grid-template-columns: 1fr auto;
        min-width: 0;
    }

    .limit-card {
        padding: 24px;
    }

    .limit-summary,
    .limit-countdown,
    .limit-premium-note {
        padding: 14px;
    }

    .limit-actions .button {
        width: 100%;
    }

    .button,
    .small-button {
        width: 100%;
    }

    .admin-table .admin-actions .small-button {
        width: auto;
    }

    .actions.centered .button {
        width: auto;
        min-width: 210px;
    }

    .status-row {
        gap: 6px;
    }

    .badge {
        max-width: 100%;
    }

    .stats-level-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-wide-panel {
        width: auto;
        margin-left: 0;
        transform: none;
    }

    .segmented-control {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

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

    .card:hover,
    .level-button:hover,
    .answer-button:hover,
    .button:hover,
    .small-button:hover,
    .nav a:hover,
    .link-button:hover {
        transform: none;
    }
}