@media (max-width: 1120px) {
      .feedback-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .feedback-stat,
      .feedback-stat.is-primary {
        grid-column: span 2;
      }

      .feedback-stat:nth-child(2n) {
        border-right: 0;
      }

      .feedback-stat:nth-last-child(-n + 4) {
        border-bottom: 1px solid var(--paper-line);
      }

      .feedback-stat:nth-last-child(-n + 2) {
        border-bottom: 0;
      }

    }

    @media (max-width: 860px) {
      .app-shell,
      .practice-shell,
      .report-shell,
      .reading-shell {
        width: min(100% - 24px, 680px);
      }

      .topbar {
        top: 10px;
        padding: 0 18px;
      }

      .home-grid,
      .detail-layout {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .article-card {
        grid-template-columns: 94px minmax(0, 1fr) auto;
        gap: 16px;
      }

      .article-cover {
        width: 94px;
      }

      .detail-side {
        position: static;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }

      .practice-grid {
        gap: 28px;
      }

      .side-stack {
        gap: 22px;
      }

      .article-input {
        min-height: 280px;
        font-size: 19px;
      }

      .source-text {
        font-size: 26px;
      }

      .history-item {
        grid-template-columns: 1fr;
        gap: 12px;
      }

          .vocabulary-list {
            grid-template-columns: 1fr;
          }

          .feedback-stats,
          .feedback-grid {
            grid-template-columns: 1fr;
          }

          .vocab-card,
          .vocab-card:nth-child(2n),
          .feedback-chart,
          .feedback-chart:nth-child(2n),
          .feedback-stat {
            border-right: 0;
          }

      .score-box {
        width: auto;
        text-align: left;
      }

      .report-hero,
      .reading-hero {
        grid-template-columns: 1fr;
      }

      .report-main-stat,
      .reading-stat {
        text-align: left;
      }
    }

    @media (max-width: 560px) {
      .app-shell,
      .practice-shell,
      .report-shell,
      .reading-shell {
        width: 100%;
        padding: 0 0 26px;
      }

      .topbar,
      .practice-head {
        position: static;
        border-left: 0;
        border-right: 0;
      }

      .topbar {
        min-height: 0;
        padding: 10px 18px 8px;
        flex-wrap: wrap;
        align-content: center;
        gap: 8px 14px;
      }

      .practice-shell {
        padding-bottom: calc(var(--answer-dock-space, 210px) + env(safe-area-inset-bottom, 0px));
      }

      .brand-name {
        font-size: 19px;
      }

      .home-tabs {
        width: 100%;
        gap: 14px;
        font-size: 14px;
        overflow-x: auto;
        padding-bottom: 2px;
      }

      .settings-btn {
        min-width: 36px;
        height: 36px;
        max-width: 158px;
      }

      .home-grid,
      .library-hero,
      .detail-header,
      .detail-layout,
      .import-header,
      .import-panel,
      .history-header,
      .practice-grid,
      .report-card {
        padding-left: 20px;
        padding-right: 20px;
      }

      .home-grid {
        padding-top: 30px;
      }

      .library-hero,
      .detail-header,
      .import-header {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 30px;
        gap: 14px;
      }

      .detail-header {
        padding-top: 24px;
        gap: 12px;
      }

      .article-card {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "cover cover"
          "body arrow";
        gap: 14px 14px;
        padding: 18px 20px 20px;
      }

      .article-cover {
        grid-area: cover;
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 7px;
      }

      .article-card-title {
        font-size: 20px;
      }

      .article-card-body {
        grid-area: body;
      }

      .article-card-arrow {
        grid-area: arrow;
        align-self: center;
      }

      .detail-layout {
        padding-top: 18px;
      }

      .detail-cover {
        aspect-ratio: 16 / 9;
      }

      .detail-content {
        font-size: 18px;
        line-height: 1.68;
      }

      .detail-side {
        grid-template-columns: 1fr;
      }

      .detail-action-bar {
        grid-template-columns: 1fr;
        padding: 0;
      }

      .detail-action-bar .primary-btn {
        min-height: 42px;
        font-size: 14px;
      }

      .import-action-bar {
        grid-template-columns: 1fr;
      }

      .import-panel .composer {
        min-height: 330px;
      }

      .article-input {
        min-height: 240px;
        padding: 22px 18px 14px;
        font-size: 18px;
        line-height: 37px;
      }

      .composer-foot {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 18px;
        gap: 6px;
      }

      .practice-head {
        padding: 16px 20px;
      }

      .seg-progress {
        margin: 18px 20px 0;
      }

      .practice-grid {
        padding-top: 30px;
      }

      .source-panel {
        padding-left: 0;
      }

      .source-text,
      .source-panel.zh-source .source-text {
        font-size: 22px;
      }

      .answer-panel {
        bottom: 10px;
        bottom: calc(10px + var(--keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px));
        width: calc(100% - 24px);
        padding: 12px;
        gap: 12px;
      }

      .trans-input {
        height: 39px;
        min-height: 39px;
        max-height: 168px;
        padding-right: 54px;
        font-size: 18px;
        line-height: 36px;
      }

      .speech-btn {
        right: -8px;
        width: 54px;
        height: 54px;
      }

      .action-row {
        grid-template-columns: 112px minmax(0, 1fr);
      }

      .answer-panel.is-omni-voice .action-row {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 8px;
      }

      .answer-panel.is-omni-voice .action-row.is-omni-complete {
        grid-template-columns: 96px minmax(0, 1fr);
      }

      .answer-panel.is-omni-voice .action-row .secondary-btn,
      .answer-panel.is-omni-voice .action-row .primary-btn {
        padding-inline: 8px;
        font-size: 14px;
        letter-spacing: 0;
      }

      .omni-voice-btn {
        gap: 8px;
        padding-inline: 8px;
      }

      .omni-voice-wave {
        width: 24px;
        flex-basis: 24px;
        gap: 3px;
      }

      .omni-voice-wave span {
        width: 3px;
      }

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

      .stat-card:nth-child(2n) {
        border-right: 0;
      }

      .stat-card:nth-child(-n+2) {
        border-bottom: 1px solid var(--paper-line);
      }

      .report-card {
        margin-top: 0;
        border-left: 0;
        border-right: 0;
      }

      .reading-card {
        margin-top: 0;
        border-left: 0;
        border-right: 0;
      }

      .report-hero,
      .report-content-wrap,
      .reading-hero,
      .reading-questions,
      .reading-actions {
        padding-left: 22px;
        padding-right: 22px;
      }

      .reading-question {
        padding: 18px 16px;
      }

      .reading-question-title {
        font-size: 20px;
      }

      .reading-actions {
        grid-template-columns: 1fr;
      }

      .report-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .secondary-btn,
      .report-actions .primary-btn {
        width: 100%;
      }

      .settings-dialog {
        padding: 24px 20px;
      }

      .voice-option {
        grid-template-columns: 1fr 74px;
      }

      .voice-use-btn {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 560px) {
      #screen-practice.active {
        position: fixed;
        inset: 0;
        height: var(--practice-viewport-height, 100dvh);
        overflow: hidden;
        background: var(--paper);
      }

      #screen-practice.active .practice-shell {
        height: var(--practice-viewport-height, 100dvh);
        min-height: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      #screen-practice.active .practice-head {
        flex: none;
        position: relative;
        z-index: 100;
        background: rgba(247, 243, 233, .92);
        backdrop-filter: blur(14px);
      }

      #screen-practice.active .seg-progress {
        flex: none;
      }

	      #screen-practice.active .practice-grid {
	        flex: 1;
	        min-height: 0;
	        overflow-y: auto;
	        overscroll-behavior: contain;
	        padding-bottom: var(--answer-dock-space, 210px);
	        -webkit-overflow-scrolling: touch;
	      }

	      .practice-skip-btn {
	        bottom: calc(var(--answer-dock-space, 210px) + var(--keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px) - 4px);
	      }
	    }