/* Shared design tokens are defined in studio.css. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.we-active .top-stats, .di-active .top-stats, .notebook-active .top-stats, .practice-active .top-stats, .drive-active .top-stats, .mock-active .top-stats { display: none; }
html { background: var(--paper); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, textarea, input, select, audio { font: inherit; }
button { cursor: pointer; }
.skip-main-link { position: fixed; z-index: 999; top: 8px; left: 8px; padding: 10px 14px; border-radius: 10px; color: #fff; background: var(--navy); box-shadow: 0 6px 18px rgba(6,21,36,.28); transform: translateY(-160%); }
.skip-main-link:focus { transform: translateY(0); }

.auth-view { min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.auth-card { width: min(430px, 100%); padding: 34px; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(247,243,236,.96)); box-shadow: 0 28px 75px rgba(3,15,27,.34); }
.auth-brand { display: flex; align-items: center; gap: 11px; color: var(--navy); font-size: 18px; font-weight: 780; }
.auth-copy { margin-top: 29px; }.auth-copy h2 { margin: 0; color: var(--navy); font-size: 32px; line-height: 1.12; letter-spacing: -.045em; }.auth-copy p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.auth-tabs { margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 13px; background: #e7e5df; }.auth-tabs button { min-height: 42px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 760; }.auth-tabs button.active { color: #fff; background: var(--navy); box-shadow: 0 5px 14px rgba(16,35,56,.17); }
.auth-form { margin-top: 18px; display: grid; gap: 13px; }.auth-form label { display: grid; gap: 7px; color: var(--navy); font-size: 11px; font-weight: 760; }.auth-form input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #cfd2ce; border-radius: 13px; outline: none; color: var(--ink); background: #fff; font-size: 16px; }.auth-form input:focus { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(232,106,88,.12); }.auth-message { min-height: 20px; margin: -2px 0 0; color: var(--danger); font-size: 11px; line-height: 1.55; }.auth-message.success { color: #347660; }.auth-submit { width: 100%; min-height: 48px; }.auth-submit:disabled { cursor: wait; opacity: .68; transform: none; }.auth-note { margin: 15px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; text-align: center; }

.sync-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #c6d2dc; background: rgba(255,255,255,.06); font-size: 11px; font-weight: 680; white-space: nowrap; }
.sync-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 4px rgba(215,173,103,.12); }
.sync-status.online::before { background: #7cc3a8; box-shadow: 0 0 0 4px rgba(124,195,168,.12); }
.sync-status.offline::before { background: var(--coral); box-shadow: 0 0 0 4px rgba(232,106,88,.12); }
.sync-status.syncing::before { animation: sync-pulse 1s ease-in-out infinite alternate; }
@keyframes sync-pulse { to { opacity: .35; transform: scale(.8); } }
.account-menu { max-width: 190px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 4px 4px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.06); }.account-menu > span { min-width: 0; flex: 1 1 auto; overflow: hidden; color: #dce6eb; font-size: 11px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }.account-menu button { min-width: 44px; min-height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 0; border-radius: 999px; color: #fff; background: rgba(255,255,255,.1); font-size: 10px; font-weight: 720; white-space: nowrap; }.account-menu button:hover { background: rgba(232,106,88,.35); }
.header-action-icon { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.top-stats { display: flex; align-items: stretch; gap: 28px; margin-left: auto; }
.top-stats > div { min-width: 108px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.18); }
.top-stats span { display: block; margin-bottom: 5px; color: #a9b9c6; font-size: 11px; letter-spacing: .04em; }
.top-stats strong { display: block; color: #fff; font-size: 20px; font-weight: 720; letter-spacing: -.02em; }
.quiet-button { padding: 9px 0; border: 0; color: #c6d2dc; background: transparent; font-size: 13px; }
.quiet-button:hover { color: #fff; }

.section-modules[hidden] { display: none; }

.practice-panel, .progress-panel { background: var(--paper); border: 1px solid rgba(16, 35, 56, .08); box-shadow: var(--shadow); }
.practice-panel { min-height: calc(100vh - 138px); padding: 36px 40px 34px; border-radius: 28px; overflow: hidden; }
.progress-panel { min-height: calc(100vh - 138px); padding: 25px 22px 16px; border-radius: 24px; display: flex; flex-direction: column; }

/* 50 分冲刺：沿用现有学习页骨架，题型、题目与答题内容由 JS 填充。 */
.practice-module { grid-column: 1 / -1; min-width: 0; min-height: calc(100vh - 205px); padding: 36px 38px 40px; overflow: hidden; border: 1px solid rgba(16,35,56,.08); border-radius: 30px; background: linear-gradient(180deg, #fdfaf4 0%, var(--paper) 48%, #f3eee4 100%); box-shadow: var(--shadow); }
.practice-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.practice-hero h2 { margin: 0; color: var(--navy); font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -.055em; }
.practice-hero p { max-width: 680px; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.practice-overview { flex: 0 0 auto; min-width: 126px; max-width: 260px; padding: 14px 17px; border-radius: 16px; color: #fff; background: linear-gradient(155deg, var(--navy), var(--navy-2)); text-align: center; box-shadow: 0 10px 24px rgba(16,35,56,.18); }
.practice-overview strong, .practice-overview span { display: block; }
.practice-overview strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.practice-overview span { margin-top: 3px; color: #b9c5cf; font-size: 10px; }
.practice-module-layout { min-width: 0; display: grid; grid-template-columns: 230px minmax(0, 1fr); grid-template-areas: "questions workspace"; gap: 28px; margin-top: 24px; }
.practice-module-workspace { grid-area: workspace; min-width: 0; }
.practice-question-outline { grid-area: questions; min-width: 0; padding-right: 22px; border-right: 1px solid var(--line); }
.practice-question-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.practice-question-list-heading strong { color: var(--navy); font-size: 13px; }
.practice-question-list-heading span { color: var(--muted); font-size: 9px; }
.practice-question-list { max-height: 520px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.practice-question-list button { min-width: 0; min-height: 44px; padding: 0 4px; border: 1px solid #deddd7; border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.64); font-size: 10px; font-weight: 760; font-variant-numeric: tabular-nums; }
.practice-question-list button:hover { color: var(--navy); border-color: #bfc5c3; background: #fff; }
.practice-question-list button.current, .practice-question-list button.active, .practice-question-list button[aria-current="true"] { color: #fff; border-color: var(--navy); background: var(--navy); }
.practice-question-list button.completed:not(.current):not(.active) { color: #347660; border-color: #bfd9cb; background: #edf7f1; }
.practice-question-heading > div { min-width: 0; }
.practice-question-heading span { color: var(--coral); font-size: 11px; font-weight: 780; letter-spacing: .05em; }
.practice-question-heading h2 { margin: 5px 0 0; color: var(--navy); font-size: clamp(25px, 3vw, 34px); line-height: 1.2; letter-spacing: -.04em; }
.practice-question-heading p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.practice-prompt, .practice-answer-area { min-width: 0; margin-top: 16px; padding: 20px; border: 1px solid #d8d9d3; border-radius: 18px; background: rgba(255,253,248,.92); box-shadow: 0 7px 20px rgba(16,35,56,.05); overflow-wrap: anywhere; }
.practice-prompt { color: var(--navy); font-size: 15px; line-height: 1.8; }
.practice-prompt:empty, .practice-answer-area:empty { display: none; }
.practice-prompt p:first-child, .practice-answer-area p:first-child { margin-top: 0; }
.practice-prompt p:last-child, .practice-answer-area p:last-child { margin-bottom: 0; }
.practice-prompt figure { margin: 0; }
.practice-prompt figcaption { margin-top: 8px; color: var(--muted); font-size: 9px; text-align: center; }
.practice-prompt pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.practice-prompt img, .practice-swt-image { display: block; width: auto; max-width: 100%; height: auto; max-height: 68vh; margin: 14px auto; object-fit: contain; border-radius: 12px; }
.practice-swt-text { display: grid; gap: 15px; }
.practice-swt-method { margin: 0 0 18px; padding: 0 16px; border: 1px solid #c9ded4; border-radius: 14px; background: #f1f8f4; }
.practice-swt-passage > span, .practice-swt-analysis > div > span { display: block; color: var(--coral-dark); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.practice-swt-passage p { margin: 7px 0 0; color: var(--ink); font-size: 15px; line-height: 1.9; }
.practice-swt-analysis { padding: 15px; border: 1px solid #c9ded4; border-radius: 14px; background: #f1f8f4; }
.practice-swt-analysis > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.practice-swt-analysis > div > span { color: #347660; }
.practice-swt-analysis strong { color: var(--navy); font-size: 13px; }
.practice-swt-analysis ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.practice-swt-analysis li { padding: 7px 9px; border-radius: 9px; color: #347660; background: #fff; font-size: 11px; line-height: 1.45; }
.practice-swt-analysis li.signal { color: #89651f; background: #fff1cf; font-weight: 760; }
.practice-swt-analysis li.section { color: #fff; background: var(--navy); font-weight: 760; }
.practice-answer-area { background: rgba(255,255,255,.72); }
.practice-answer-area label { color: var(--navy); font-size: 11px; font-weight: 760; }
.practice-answer-area input:not([type="radio"]):not([type="checkbox"]), .practice-answer-area select, .practice-answer-area textarea { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #cfd3cf; border-radius: 11px; color: var(--ink); background: #fff; font: inherit; font-size: 16px; line-height: 1.55; }
.practice-answer-area textarea { min-height: 128px; resize: vertical; }
.practice-answer-area input:focus, .practice-answer-area select:focus, .practice-answer-area textarea:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.practice-answer-area > .primary-button { min-height: 44px; margin-top: 14px; }
.practice-ro-list { display: grid; gap: 10px; margin: 0; padding-left: 26px; }.practice-ro-list li { padding: 10px 12px; border: 1px solid #deddd7; border-radius: 11px; color: var(--navy); background: #fff; line-height: 1.7; }
.practice-navigation { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.practice-navigation button { min-width: 108px; min-height: 44px; }
.practice-feedback { margin-top: 14px; }

/* 动态题型通用件：填空、词库、录音、回放与自评。 */
.practice-fib-passage { color: var(--navy); font-size: 15px; line-height: 2.2; }
.practice-blank, .practice-fib-blank { display: inline-block; min-width: 112px; max-width: 100%; margin: 2px 4px; vertical-align: middle; }
.practice-fib-passage button.practice-blank { min-height: 44px; padding: 0 12px; border: 1px dashed var(--coral); border-radius: 10px; color: var(--coral-dark); background: #fff5ee; font-size: 12px; font-weight: 760; }
.practice-fib-passage button.practice-blank.active { color: #fff; border-style: solid; background: var(--coral); }
.practice-word-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 13px; background: #efeee9; }
.practice-word-bank button, .practice-word-option { min-height: 44px; padding: 0 13px; border: 1px solid #d5d7d2; border-radius: 10px; color: var(--navy); background: #fff; font-size: 12px; font-weight: 720; }
.practice-word-bank button.selected, .practice-word-option.selected { color: #fff; border-color: var(--coral); background: var(--coral); }
.practice-recording { margin-top: 14px; padding: 16px; border-radius: 15px; color: #fff; background: linear-gradient(155deg, var(--navy), var(--navy-2)); }
.practice-recording > small { display: block; margin: 8px 0 12px; color: #b9c5cf; font-size: 9px; line-height: 1.5; }
.practice-recording-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.practice-recording button, .practice-recording-actions button, .practice-rating-buttons button { min-height: 44px; padding: 0 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; color: #fff; background: rgba(255,255,255,.1); font-size: 11px; font-weight: 760; }
.practice-recording button.primary, .practice-recording-actions button.primary { border-color: var(--coral); background: var(--coral); }
.practice-playback, .practice-recording audio { width: 100%; margin-top: 12px; }
.practice-self-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.16); }
.practice-rating-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.practice-rating-buttons button.active, .practice-rating-buttons button[aria-pressed="true"] { border-color: var(--coral); background: var(--coral); }

.notebook-page { grid-column: 1 / -1; min-height: calc(100vh - 205px); padding: 36px 38px 40px; overflow: hidden; border: 1px solid rgba(16,35,56,.08); border-radius: 30px; background: linear-gradient(180deg, #fdfaf4 0%, var(--paper) 48%, #f3eee4 100%); box-shadow: var(--shadow); }
.notebook-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }.notebook-hero > div:first-child > span { color: var(--coral-dark); font-size: 11px; font-weight: 780; }.notebook-hero h2 { margin: 4px 0 0; color: var(--navy); font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.055em; }.notebook-hero p { max-width: 720px; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.notebook-hero-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }.notebook-overview { min-width: 150px; padding: 12px 15px; border: 1px solid #dfe2dd; border-radius: 14px; background: rgba(255,255,255,.68); }.notebook-overview strong, .notebook-overview span { display: block; }.notebook-overview strong { color: var(--navy); font-size: 13px; }.notebook-overview span { margin-top: 4px; color: var(--muted); font-size: 9px; }.notebook-hero-actions .primary-button { min-height: 44px; white-space: nowrap; }
.notebook-note { margin-top: 16px; padding: 10px 13px; border-left: 3px solid var(--coral); border-radius: 0 10px 10px 0; color: #744036; background: #fff0ea; font-size: 11px; line-height: 1.65; }.notebook-workspace { margin-top: 18px; }

.we-panel { grid-column: 1 / -1; min-height: calc(100vh - 205px); padding: 36px 38px 40px; overflow: hidden; border: 1px solid rgba(16,35,56,.08); border-radius: 30px; background: linear-gradient(180deg, #fdfaf4 0%, var(--paper) 48%, #f3eee4 100%); box-shadow: var(--shadow); }
.we-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.we-hero h2 { margin: 0; color: var(--navy); font-size: clamp(28px, 4vw, 48px); line-height: 1.08; letter-spacing: -.055em; }
.we-hero p { max-width: 680px; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.we-overview { flex: 0 0 auto; min-width: 126px; padding: 14px 17px; border-radius: 16px; color: #fff; background: linear-gradient(155deg, var(--navy), var(--navy-2)); text-align: center; box-shadow: 0 10px 24px rgba(16,35,56,.18); }
.we-overview strong, .we-overview span { display: block; }.we-overview strong { font-size: 25px; font-variant-numeric: tabular-nums; }.we-overview span { margin-top: 3px; color: #b9c5cf; font-size: 10px; }
.we-note { margin: 16px 0 0; padding: 10px 13px; border-left: 3px solid var(--sand); border-radius: 0 10px 10px 0; color: #725522; background: #fff1cf; font-size: 11px; line-height: 1.6; }
.we-view-switch { width: fit-content; margin-top: 18px; display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #d7d9d4; border-radius: 13px; background: rgba(255,255,255,.55); }
.we-view-switch button { min-height: 36px; padding: 0 15px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 760; }
.we-view-switch button.active { color: #fff; background: var(--navy); box-shadow: 0 5px 14px rgba(16,35,56,.16); }
.we-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 28px; margin-top: 25px; }
.we-outline { padding-right: 24px; border-right: 1px solid var(--line); }
.we-outline-title { margin-bottom: 10px; color: var(--navy); font-size: 13px; font-weight: 780; letter-spacing: .06em; }
.we-outline > p { margin: 14px 3px 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.we-section-list { display: grid; gap: 8px; }
.we-section-button { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 2px 8px; min-height: 67px; padding: 9px 10px; border: 1px solid #deddd7; border-radius: 13px; color: var(--muted); background: rgba(255,255,255,.48); text-align: left; }
.we-section-button > span { grid-row: 1 / 3; color: #a8b0b4; font-size: 18px; font-weight: 780; font-variant-numeric: tabular-nums; }
.we-section-button strong { color: var(--navy); font-size: 13px; }.we-section-button small { font-size: 10px; }.we-section-button em { grid-column: 3; grid-row: 1 / 3; color: #9ca6aa; font-size: 9px; font-style: normal; }
.we-section-button:hover { border-color: #bfc5c3; background: #fff; }.we-section-button.current { color: #fff; border-color: var(--navy); background: linear-gradient(155deg, var(--navy), var(--navy-2)); box-shadow: 0 9px 20px rgba(16,35,56,.18); }.we-section-button.current strong { color: #fff; }.we-section-button.current > span, .we-section-button.current small { color: #b9c5cf; }.we-section-button.current em { color: #ffd0c8; }.we-section-button.completed:not(.current) em { color: var(--mint); font-weight: 760; }
.we-workspace { min-width: 0; }
.we-practice-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.we-practice-heading > div > span { color: var(--coral); font-size: 11px; font-weight: 780; letter-spacing: .06em; }.we-practice-heading h2 { margin: 4px 0 0; color: var(--navy); font-size: 31px; letter-spacing: -.04em; }.we-practice-heading p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.we-fixed-words { flex: 0 0 auto; min-width: 82px; padding: 10px 12px; border-radius: 12px; background: rgba(16,35,56,.06); text-align: center; }.we-fixed-words span, .we-fixed-words strong { display: block; }.we-fixed-words span { color: var(--muted); font-size: 9px; }.we-fixed-words strong { margin-top: 2px; color: var(--navy); font-size: 20px; }
.we-reference { margin-top: 16px; padding: 17px 19px; border: 1px solid #d8d9d3; border-radius: 16px; background: var(--paper-2); box-shadow: 0 5px 15px rgba(16,35,56,.05); }.we-reference p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.85; }.we-reference p + p { margin-top: 8px; }.we-slot { display: inline-block; margin: 1px 3px; padding: 2px 7px; border-radius: 7px; color: #89651f; background: #fff1cf; font-size: 10px; font-weight: 700; vertical-align: 1px; }
.we-answer-label { margin-top: 22px; }.we-actions .primary-button { min-width: 128px; }
.we-workspace > .feedback { margin-top: 18px; }.we-workspace .word-extra { color: #a17128; font-weight: 780; text-decoration: underline dotted currentColor; text-underline-offset: 3px; }
.we-smart-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 11px 0 13px; }.we-smart-checks > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 1px 7px; align-items: center; min-width: 0; padding: 9px 10px; border: 1px solid transparent; border-radius: 11px; background: rgba(16,35,56,.055); }.we-smart-checks > div > span { grid-row: 1 / 3; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--muted); font-size: 11px; font-weight: 850; }.we-smart-checks strong { color: var(--navy); font-size: 11px; }.we-smart-checks small { min-width: 0; color: var(--muted); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }.we-smart-checks .passed { border-color: #c7dfd3; background: #edf7f1; }.we-smart-checks .passed > span { background: #347660; }.we-smart-checks .failed { border-color: #efc9c2; background: #fff0ed; }.we-smart-checks .failed > span { background: var(--danger); }
.we-smart-checks ul { grid-column: 2; margin: 5px 0 0; padding-left: 15px; color: #8f382d; font-size: 9px; line-height: 1.5; }.we-smart-checks li + li { margin-top: 2px; }

.di-panel { grid-column: 1 / -1; min-height: calc(100vh - 205px); padding: 36px 38px 40px; overflow: hidden; border: 1px solid rgba(16,35,56,.08); border-radius: 30px; background: linear-gradient(180deg, #fdfaf4 0%, var(--paper) 48%, #f3eee4 100%); box-shadow: var(--shadow); }
.di-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }.di-hero h2 { margin: 0; color: var(--navy); font-size: clamp(28px, 4vw, 48px); line-height: 1.08; letter-spacing: -.055em; }.di-hero p { max-width: 680px; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.di-overview { flex: 0 0 auto; min-width: 145px; padding: 13px 17px; border-radius: 16px; color: #fff; background: linear-gradient(155deg, var(--navy), var(--navy-2)); text-align: center; box-shadow: 0 10px 24px rgba(16,35,56,.18); }.di-overview strong, .di-overview span, .di-overview small { display: block; }.di-overview strong { font-size: 25px; font-variant-numeric: tabular-nums; }.di-overview span { margin-top: 2px; color: #dce6eb; font-size: 10px; }.di-overview small { margin-top: 5px; color: #9fb0bd; font-size: 9px; }
.di-note { margin: 16px 0 0; padding: 10px 13px; border-left: 3px solid var(--mint); border-radius: 0 10px 10px 0; color: #346c59; background: #e8f5ee; font-size: 11px; line-height: 1.6; }
.di-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 28px; margin-top: 25px; }.di-outline { padding-right: 24px; border-right: 1px solid var(--line); }.di-outline-title { margin-bottom: 10px; color: var(--navy); font-size: 13px; font-weight: 780; letter-spacing: .06em; }.di-outline > p { margin: 14px 3px 0; color: var(--muted); font-size: 9px; line-height: 1.55; }.di-question-list { display: block; }.di-category-group + .di-category-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }.di-category-group > h3 { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 0 2px 8px; color: var(--navy); font-size: 12px; }.di-category-group > h3 span { color: var(--coral); font-size: 11px; }.di-category-group > h3 small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; font-weight: 500; }.di-category-buttons { display: grid; gap: 8px; }
.di-question-button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 2px 8px; min-height: 67px; padding: 9px 10px; border: 1px solid #deddd7; border-radius: 13px; color: var(--muted); background: rgba(255,255,255,.48); text-align: left; }.di-question-button > span { grid-row: 1 / 3; color: #a8b0b4; font-size: 18px; font-weight: 780; font-variant-numeric: tabular-nums; }.di-question-button strong { color: var(--navy); font-size: 12px; }.di-question-button small { font-size: 10px; }.di-question-button em { grid-column: 3; grid-row: 1 / 3; color: #9ca6aa; font-size: 9px; font-style: normal; }.di-question-button:hover { border-color: #bfc5c3; background: #fff; }.di-question-button.current { color: #fff; border-color: var(--navy); background: linear-gradient(155deg, var(--navy), var(--navy-2)); box-shadow: 0 9px 20px rgba(16,35,56,.18); }.di-question-button.current strong { color: #fff; }.di-question-button.current > span, .di-question-button.current small { color: #b9c5cf; }.di-question-button.current em { color: #ffd0c8; }.di-question-button.completed:not(.current) em { color: var(--mint); font-weight: 760; }
.di-workspace { min-width: 0; }.di-practice-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }.di-practice-heading > div:first-child > span { color: var(--coral); font-size: 11px; font-weight: 780; letter-spacing: .06em; }.di-practice-heading h2 { margin: 4px 0 0; color: var(--navy); font-size: 27px; letter-spacing: -.04em; }
.di-timer { --di-progress: 0%; flex: 0 0 92px; height: 92px; display: grid; place-content: center; border: 7px solid transparent; border-radius: 50%; color: var(--navy); background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box, conic-gradient(var(--coral) var(--di-progress), #e0e2dd 0) border-box; text-align: center; box-shadow: 0 7px 20px rgba(16,35,56,.08); }.di-timer span, .di-timer strong, .di-timer small { display: block; }.di-timer span { color: var(--muted); font-size: 9px; }.di-timer strong { font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }.di-timer small { color: var(--muted); font-size: 8px; }.di-timer.recording { color: var(--danger); background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box, conic-gradient(var(--danger) var(--di-progress), #f2d8d4 0) border-box; animation: di-record-pulse 1s ease-in-out infinite alternate; }@keyframes di-record-pulse { to { box-shadow: 0 7px 26px rgba(217,79,72,.23); } }
.di-image-stage { margin-top: 13px; min-height: 390px; display: grid; place-items: center; padding: 18px; overflow: hidden; border: 1px solid #d8d9d3; border-radius: 18px; background: #fff; box-shadow: 0 7px 22px rgba(16,35,56,.07); }.di-image-stage canvas { display: block; width: 100%; height: 360px; max-width: 880px; }
.di-notes-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 19px; }.di-notes-row label { color: var(--navy); font-size: 12px; font-weight: 760; }.di-notes-row span { color: var(--muted); font-size: 10px; }.di-notes { min-height: 74px; margin-top: 8px; padding: 13px 15px; border-radius: 13px; font-size: 16px; }.di-actions .primary-button { min-width: 150px; }.di-stop-button:not(:disabled) { color: var(--danger); border-color: #e7b6ae; background: #fff0ed; }
.di-status { margin-top: 13px; padding: 10px 12px; border-radius: 11px; color: var(--muted); background: rgba(16,35,56,.05); font-size: 11px; }.di-status.error { color: #9d3833; background: #ffe5e0; }.di-status.recording { color: #9d3833; background: #fff0ed; }.di-status.ready { color: #346c59; background: #e8f5ee; }
.di-recording-review { margin-top: 16px; padding: 16px; border: 1px solid #d8d9d3; border-radius: 16px; background: var(--paper-2); }.di-recording-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.di-recording-heading strong, .di-recording-heading span { display: block; }.di-recording-heading strong { font-size: 13px; }.di-recording-heading span { margin-top: 2px; color: var(--muted); font-size: 10px; }.di-recording-heading .secondary-button { min-height: 36px; display: inline-flex; align-items: center; text-decoration: none; }.di-recording-review audio { width: 100%; height: 42px; margin-top: 12px; }.di-self-check { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }.di-self-check > strong { font-size: 11px; }.di-rating-buttons { display: flex; gap: 6px; }.di-rating-buttons button { min-height: 34px; padding: 0 11px; border: 1px solid #d3d5d0; border-radius: 10px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 720; }.di-rating-buttons button:hover, .di-rating-buttons button.active { color: #fff; border-color: var(--navy); background: var(--navy); }
.di-reference { margin-top: 16px; padding: 16px 18px; border: 1px solid #d8d9d3; border-radius: 16px; background: var(--paper-2); }.di-reference h3 { margin: 0 0 8px; font-size: 13px; }.di-reference ul { margin: 0 0 13px 19px; padding: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }.di-reference p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.8; }.di-workspace > .feedback { margin-top: 16px; }

.question-heading { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; padding: 0 0 27px; border-bottom: 1px solid var(--line); }
.question-heading::after { content: ""; position: absolute; right: 8%; bottom: -1px; width: 82px; height: 3px; background: var(--coral); }
.eyebrow, .section-label { color: var(--navy); font-size: 13px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 8px; }
.eyebrow-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.eyebrow span:last-child { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: none; }
.question-number { margin-top: 12px; color: var(--coral); font-size: clamp(68px, 8vw, 98px); line-height: .78; font-weight: 780; letter-spacing: -.09em; }
.instruction { max-width: 450px; margin: 0 0 4px; color: var(--navy); font-size: clamp(20px, 2vw, 28px); line-height: 1.23; font-weight: 720; letter-spacing: -.04em; }
.instruction span { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .02em; }

.section-block { padding-top: 24px; }
.audio-block { position: relative; padding: 20px 22px 18px; overflow: hidden; border-radius: 20px; color: #fff; background: var(--navy); }
.audio-heading { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.audio-block .section-label { color: #fff; }
.audio-hint { color: #a9b9c6; font-size: 11px; }
.waveform { position: relative; z-index: 1; height: 32px; margin: 9px 0; display: flex; align-items: center; justify-content: center; gap: 3px; opacity: .9; }
.waveform::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: rgba(255,255,255,.15); }
.waveform i { width: 3px; height: 4%; min-height: 1px; display: block; border-radius: 9px; background: var(--coral); }
.audio-player { position: relative; z-index: 1; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 10px 11px 10px 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(255,255,255,.08); }
.audio-player audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.audio-play { width: 62px; height: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 12px; color: var(--navy); background: var(--coral); font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 7px 15px rgba(232,106,88,.25); transition: transform .18s, background .18s; }
.audio-play:hover { background: #f07c68; transform: translateY(-1px); }
.audio-play-icon { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }
.audio-player.is-playing .audio-play-icon { width: 9px; height: 12px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.audio-player.is-playing .audio-play-label { font-size: 0; }.audio-player.is-playing .audio-play-label::after { content: "暂停"; font-size: 12px; }
.audio-track { min-width: 0; }.audio-time { display: flex; justify-content: space-between; margin-bottom: 4px; color: #b9c5cf; font-size: 10px; font-variant-numeric: tabular-nums; }
.audio-seek { width: 100%; height: 44px; margin: 0; touch-action: pan-y; appearance: none; border-radius: 99px; background: linear-gradient(90deg, var(--coral) 0%, var(--coral) var(--seek,0%), rgba(255,255,255,.2) var(--seek,0%), rgba(255,255,255,.2) 100%); accent-color: var(--coral); cursor: pointer; background-position: center; background-repeat: no-repeat; background-size: 100% 4px; }
.audio-seek::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border: 2px solid var(--navy); border-radius: 50%; background: var(--coral); }.audio-seek::-moz-range-thumb { width: 15px; height: 15px; border: 2px solid var(--navy); border-radius: 50%; background: var(--coral); }
.audio-speed { min-width: 41px; height: 32px; padding: 0 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; color: #dce6eb; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 760; transition: border-color .18s, background .18s; }.audio-speed:hover { border-color: var(--coral); color: #fff; background: rgba(232,106,88,.12); }

.answer-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.word-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
textarea { width: 100%; min-height: 150px; margin-top: 12px; padding: 18px 19px; resize: vertical; border: 1px solid #cecfc9; border-radius: 18px; outline: none; color: var(--ink); background: var(--paper-2); line-height: 1.75; font-size: 17px; transition: border-color .2s, box-shadow .2s; }
textarea::placeholder { color: #9ca6ac; }
textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(232, 106, 88, .12); }
.answer-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.primary-button, .secondary-button { min-height: 45px; padding: 0 18px; border-radius: 13px; font-size: 13px; font-weight: 720; transition: transform .18s, background .18s, border-color .18s, color .18s; }
.primary-button { border: 1px solid var(--coral); color: #fff; background: var(--coral); box-shadow: 0 8px 18px rgba(232, 106, 88, .22); }
.primary-button:hover { background: var(--coral-dark); transform: translateY(-1px); }
.secondary-button { color: var(--navy); border: 1px solid #d3d5d0; background: rgba(255,255,255,.45); }
.secondary-button:hover { border-color: var(--navy); background: #fff; }
.secondary-button:disabled { cursor: not-allowed; color: #aeb5b7; border-color: #e1e1db; background: transparent; }
.relearn-button.active { color: var(--danger); border-color: #e7b6ae; background: #fff0ed; }
.answer-reveal-button[aria-expanded="true"] { color: #fff; border-color: var(--navy); background: var(--navy); }
.answer-reveal { margin-top: 13px; padding: 16px 18px; border: 1px solid #d3d5d0; border-radius: 15px; background: var(--paper-2); }
.answer-reveal > div + div { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.answer-reveal span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 720; }
.answer-reveal strong, .answer-reveal p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.65; }
.answer-reveal strong { display: block; }
.practice-mode-button.active { color: #89651f; border-color: #e5cc9e; background: #fff6e4; }
.mode-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid #d3d5d0; border-radius: 14px; background: #ecebe5; }
.mode-option { min-height: 39px; padding: 0 13px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 720; }
.mode-option:hover { color: var(--navy); background: rgba(255,255,255,.65); }
.mode-option.active { color: #fff; background: var(--navy); box-shadow: 0 5px 12px rgba(16,35,56,.15); }
.mode-option.practice-mode-button.active { color: #fff; background: #89651f; }

.feedback-block { margin-top: 28px; padding-top: 25px; border-top: 1px solid var(--line); }
.feedback { margin-top: 12px; padding: 18px 19px; border: 1px solid #dcded9; border-radius: 17px; color: var(--ink); background: rgba(255,255,255,.48); line-height: 1.7; }
.feedback.empty { color: #6b7684; background: rgba(255,255,255,.25); }
.studio .feedback:empty, .feedback-block:has(> .feedback:empty),
#diStatus:empty, #practiceScopeNote:empty, #practiceQuestionMeta:empty { display: none; }
.feedback.correct { border-color: rgba(101,166,142,.38); background: #eef7f1; }.feedback.partial { border-color: rgba(215,173,103,.5); background: #fff8e9; }.feedback.wrong { border-color: rgba(217,79,72,.3); background: #fff1ee; }.feedback.practice-preview { border-style: dashed; }
.feedback-title { margin-bottom: 7px; font-weight: 780; }.feedback.correct .feedback-title { color: var(--mint); }.feedback.partial .feedback-title { color: #a17128; }.feedback.wrong .feedback-title { color: var(--danger); }
.feedback-score { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 12px; }.feedback-score span { padding: 6px 10px; border-radius: 10px; color: var(--muted); background: rgba(16,35,56,.06); font-size: 12px; }.feedback-score strong { color: var(--ink); font-size: 14px; }
.feedback .word-error, .feedback .word-missing, .daily-report .word-error, .daily-report .word-missing { color: var(--danger); font-weight: 780; text-decoration: underline wavy currentColor; text-underline-offset: 3px; }
.feedback-error { margin: 11px 0; padding: 10px 12px; border-left: 3px solid var(--danger); border-radius: 0 10px 10px 0; color: #9d3833; background: #ffe5e0; }.feedback-error strong { color: #842d29; }.feedback-error.history { border-left-color: var(--sand); color: #806021; background: #fff2d2; }
.feedback-answer { margin-top: 7px; color: var(--ink); }.feedback-translation { margin-top: 8px; padding: 9px 11px; border-radius: 10px; color: #596970; background: rgba(16,35,56,.055); font-size: 13px; }.feedback-translation strong { color: var(--navy); }.feedback-meta { margin-top: 10px; color: var(--muted); font-size: 12px; }
.speech-score { margin-top: 10px; display: grid; gap: 5px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.62); color: var(--ink); font-size: 13px; line-height: 1.55; }.speech-score strong { color: var(--navy); font-size: 18px; }.speech-score details summary { cursor: pointer; color: var(--muted); font-size: 12px; }.speech-score details p { margin: 5px 0 0; color: var(--muted); font-size: 12px; word-break: break-word; }
.attempt-history { margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(16,35,56,.12); }.attempt-history summary { cursor: pointer; font-weight: 720; }.attempt-history ol { margin: 9px 0 0 20px; padding: 0; }.attempt-history li { margin-bottom: 9px; padding-left: 3px; }.attempt-history-head, .attempt-history-answer, .attempt-history small { display: block; }.attempt-history-head { color: var(--muted); font-size: 11px; }.attempt-history-answer { overflow-wrap: anywhere; color: var(--ink); font-size: 13px; }.attempt-history small { color: var(--danger); font-size: 11px; }

.daily-report-block { padding-top: 28px; }.daily-report-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.daily-report-heading .secondary-button { min-height: 36px; padding: 0 13px; font-size: 12px; }.daily-report { margin-top: 12px; padding: 15px 17px; border: 1px solid #dcded9; border-radius: 15px; color: var(--muted); background: rgba(255,255,255,.34); font-size: 12px; line-height: 1.65; }.daily-report.ready { color: var(--ink); background: #fff8f1; border-color: #edd8cc; }.daily-report-meta { margin-bottom: 9px; color: var(--muted); }.daily-report ol { margin: 0 0 0 20px; padding: 0; }.daily-report li { margin-bottom: 10px; padding-left: 3px; }.daily-report li:last-child { margin-bottom: 0; }.daily-report li strong, .daily-report li span { display: block; }.daily-report .word-error, .daily-report .word-missing { display: inline-block; margin-left: 3px; }.daily-report-ok { margin: 0; color: var(--mint); font-weight: 720; }
.daily-report-vocab { margin: 10px 0 13px; padding: 11px 12px; border-radius: 11px; background: #fff0e8; }.daily-report-vocab strong { display: block; margin-bottom: 4px; color: var(--coral-dark); font-size: 11px; }.daily-report-vocab span { display: block; color: var(--danger); line-height: 1.8; }.daily-report-vocab .word-error { margin-right: 7px; }

.list-heading { display: flex; align-items: baseline; justify-content: space-between; }.list-heading h2 { margin: 0; color: var(--navy); font-size: 20px; letter-spacing: -.03em; }
.prediction-scope { margin: 0 0 11px; padding: 8px 10px; border-left: 3px solid var(--mint); border-radius: 0 9px 9px 0; color: #3f6e5d; background: #edf7f1; font-size: 10px; line-height: 1.5; }
.study-plan { position: relative; margin: 22px 0 4px; padding: 19px; overflow: hidden; border: 1px solid #dfddd6; border-radius: 19px; background: #fffdf8; }.study-plan::before { content: ""; position: absolute; right: -28px; top: -34px; width: 105px; height: 105px; border-radius: 50%; background: rgba(232, 106, 88, .10); }.plan-heading { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.plan-heading strong { font-size: 15px; }.plan-heading span { color: var(--muted); font-size: 11px; }.plan-counts { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }.plan-counts > div { padding: 12px 13px; border-radius: 13px; background: #f4f1ea; }.plan-counts span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; }.plan-counts strong { color: var(--coral); font-size: 28px; line-height: 1; }.study-plan p { position: relative; z-index: 1; margin: 15px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.plan-progress { position: relative; z-index: 1; margin-top: 14px; padding: 11px 12px; border: 1px solid #e8dfd0; border-radius: 12px; background: rgba(255,255,255,.58); }.plan-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }.plan-progress span { color: var(--muted); font-size: 10px; }.plan-progress strong { color: var(--navy); font-size: 12px; font-variant-numeric: tabular-nums; }.plan-progress-bar { height: 7px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #e4e0d6; }.plan-progress-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), #8ec6ae); transition: width .22s ease; }
.plan-rules { position: relative; z-index: 1; margin-top: 11px; border-top: 1px solid #e8dfd0; }.plan-rules summary { padding-top: 10px; cursor: pointer; color: var(--muted); font-size: 10px; font-weight: 720; }.study-plan .plan-rules p { margin-top: 8px; }
.plan-heading { flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.plan-heading > span { margin-left: auto; }
.plan-edit-button { min-height: 44px; padding: 0 8px; border: 1px solid #e3c8ba; border-radius: 10px; color: var(--coral-dark); background: #fff; font-size: 11px; font-weight: 750; }
.plan-edit-button:hover { background: #fff0e8; }
.study-plan #planSettingsSummary { margin-top: 8px; color: var(--navy); }
.plan-settings-dialog { width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #e3dfd5; border-radius: 24px; color: var(--ink); background: var(--paper); box-shadow: 0 28px 80px rgba(6,21,36,.35); }
.plan-settings-dialog::backdrop { background: rgba(6,21,36,.56); backdrop-filter: blur(4px); }
.plan-settings-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 24px 16px; border-bottom: 1px solid var(--line); }
.plan-settings-header span { color: var(--coral-dark); font-size: 11px; font-weight: 750; }
.plan-settings-header h2 { margin: 5px 0 0; color: var(--navy); font-size: 26px; }
.plan-settings-header > button { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--navy); background: #ede8df; font-size: 25px; }
.plan-settings-form { display: grid; gap: 18px; padding: 20px 24px 24px; }
.plan-settings-form > p { margin: 0; line-height: 1.65; }
#planSettingsDescription, .plan-settings-help { color: var(--muted); font-size: 12px; }
.plan-settings-field { display: grid; gap: 8px; min-width: 0; }
.plan-settings-field > label:not(.plan-settings-checkbox) { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--navy); font-size: 14px; font-weight: 750; }
.plan-settings-field label > span { color: var(--muted); font-size: 11px; font-weight: 500; }
.plan-settings-field > input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #cbd0cc; border-radius: 12px; color: var(--navy); background: #fff; font-size: 20px; font-variant-numeric: tabular-nums; }
.plan-settings-field > input:focus { outline: 2px solid var(--coral); outline-offset: 2px; }
.plan-settings-field > input:disabled { color: #797e7a; background: #ebece6; }
.plan-settings-field small { color: var(--muted); font-size: 11px; line-height: 1.65; }
.plan-settings-checkbox { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--navy); font-size: 12px; cursor: pointer; }
.plan-settings-checkbox input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--coral-dark); }
.plan-settings-preview { padding: 13px 15px; border: 1px solid #e7d4bf; border-radius: 13px; color: var(--navy); background: #fcf1e2; font-size: 13px; white-space: pre-line; }
.plan-settings-status { color: var(--coral-dark); font-size: 12px; }
.plan-settings-status:empty { display: none; }
.plan-settings-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.plan-settings-actions button { min-height: 44px; }
.plan-settings-reset { margin-right: auto; padding: 0 6px; border: 0; color: var(--muted); background: transparent; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.plan-settings-notice { position: fixed; z-index: 150; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); max-width: min(440px, calc(100vw - 32px)); padding: 14px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; color: #fff; background: var(--navy); box-shadow: 0 8px 28px rgba(6,21,36,.22); font-size: 13px; line-height: 1.6; }
@media (max-width: 560px) {
  .plan-settings-dialog { width: calc(100vw - 16px); max-height: calc(92dvh - env(safe-area-inset-bottom)); margin: auto 8px max(8px, env(safe-area-inset-bottom)); border-radius: 22px; }
  .plan-settings-header { padding: 18px 16px 14px; }
  .plan-settings-header h2 { font-size: 24px; }
  .plan-settings-form { padding: 16px; gap: 16px; }
  .plan-settings-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .plan-settings-reset { grid-column: 1 / -1; justify-self: start; }
}
.plan-next { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid #e7d9cc; border-radius: 13px; background: #fff8f1; }.plan-next > div { min-width: 0; }.plan-next span, .plan-next strong, .plan-next small { display: block; }.plan-next span { color: var(--coral-dark); font-size: 10px; font-weight: 780; letter-spacing: .04em; }.plan-next strong { margin-top: 2px; overflow: hidden; color: var(--navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.plan-next small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }.plan-next .primary-button { flex: 0 0 auto; min-height: 39px; padding: 0 11px; border-radius: 11px; font-size: 11px; white-space: nowrap; }
.mobile-plan-next { display: none; }
.study-history { margin: 0 0 18px; padding: 0 0 17px; border-bottom: 1px solid var(--line); }.study-history summary { cursor: pointer; color: var(--navy); font-size: 14px; font-weight: 780; }.study-history summary small { margin-left: 5px; color: var(--muted); font-size: 10px; font-weight: 560; }.study-history-list { max-height: 245px; margin-top: 10px; overflow-y: auto; color: var(--muted); font-size: 11px; }.study-history-day { padding: 11px; border: 1px solid #e2dfd6; border-radius: 12px; background: rgba(255,255,255,.5); }.study-history-day + .study-history-day { margin-top: 8px; }.study-history-day header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }.study-history-day header strong { color: var(--ink); font-size: 12px; }.study-history-day header span, .study-history-day p { color: var(--muted); font-size: 10px; }.study-history-results { display: flex; gap: 12px; margin-top: 8px; font-weight: 760; }.study-history-results span:first-child { color: var(--mint); }.study-history-results span:nth-child(2) { color: #a17128; }.study-history-results span:last-child { color: var(--danger); }.study-history-day p { margin: 6px 0; }.study-history-numbers { display: flex; flex-wrap: wrap; gap: 4px; }.study-history-numbers span { padding: 3px 5px; border-radius: 6px; color: var(--navy); background: #f0ede5; font-size: 9px; font-weight: 760; font-variant-numeric: tabular-nums; }
.list-heading { align-items: center; gap: 12px; margin: 18px 0 10px; }.list-heading > div { min-width: 0; }.list-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 560; }.list-heading button { padding: 6px 0; border: 0; color: var(--muted); background: transparent; font-size: 12px; }.list-heading button:hover { color: var(--navy); }
.question-list { min-height: 0; overflow: visible; scrollbar-color: #c4cbc7 transparent; }.queue-heading { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 4px 5px; padding: 8px 10px; border: 0; border-radius: 9px; color: var(--muted); background: rgba(241,239,233,.96); font-size: 11px; font-weight: 800; letter-spacing: .02em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }.queue-heading strong { padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.72); font-size: 10px; font-weight: 780; }.queue-heading.continue { color: #a94d43; background: rgba(255,235,231,.96); }.queue-heading.review { color: #8b6728; background: rgba(255,246,225,.96); }.queue-heading.new { color: #347660; background: rgba(235,247,239,.96); }.queue-heading.completed { color: #3e6f5d; background: rgba(229,243,234,.96); }.queue-heading.removed { color: #6d6875; background: rgba(237,235,240,.96); }
.question-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0 4px 8px; }.question-chip { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 54px; padding: 5px 4px 4px; border: 1px solid #deddd7; border-radius: 10px; color: var(--navy); background: #f5f2eb; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; transition: transform .15s, border-color .15s, box-shadow .15s, background .15s, color .15s; }.question-chip small { position: absolute; top: 3px; right: 5px; font-size: 8px; font-weight: 850; line-height: 1; }.question-chip .question-difficulty { position: static; display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 780; line-height: 1; }.question-chip .question-difficulty.easy { color: #347660; }.question-chip .question-difficulty.normal { color: #89651f; }.question-chip .question-difficulty.hard { color: #a94d43; }.question-chip .question-number { display: block; font-size: 13px; line-height: 1.1; }.question-chip .question-status { position: absolute; top: 3px; right: 5px; }.question-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16,35,56,.11); }.question-chip.continue { color: #a94d43; border-color: #efd0c9; background: #fff0ed; }.question-chip.review { color: #89651f; border-color: #ead9b4; background: #fff7e8; }.question-chip.new { color: #347660; border-color: #c5dfd2; background: #eef7f1; }.question-chip.completed, .question-chip.correct { color: #347660; border-color: #b9d7c8; background: #e8f4ed; }.question-chip.removed { color: #6d6875; border-color: #d8d2dc; background: #f1eff3; }.question-chip.partial { color: #916923; border-color: #ead6a7; background: #fff6e3; }.question-chip.wrong { color: var(--danger); border-color: #efc4bd; background: #fff0ed; }.question-chip.review.correct { color: #89651f; border-color: #ead9b4; background: #fff7e8; }.question-chip.review.correct .question-status { color: #347660; }.question-chip.current { color: #fff; border-color: var(--navy); background: linear-gradient(160deg, var(--navy), var(--navy-2)); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--coral), 0 8px 18px rgba(16,35,56,.2); }.question-chip.current .question-difficulty { color: rgba(255,255,255,.82); }.question-list.collapsed { display: none; }
.question-bank-toggle { width: calc(100% - 16px); min-height: 42px; margin: 10px 8px 7px; border: 1px dashed #d3c8b9; border-radius: 11px; color: var(--muted); background: rgba(255,248,241,.8); font-size: 11px; font-weight: 720; }.question-bank-toggle:hover { color: var(--navy); border-color: var(--coral); background: #fff8f1; }

/* 视觉细化：统一焦点、层次与质感（覆盖上方基础规则） */
body { background: radial-gradient(circle at 88% 4%, rgba(232, 106, 88, .20), transparent 30rem), radial-gradient(circle at 8% 12%, rgba(101, 166, 142, .12), transparent 24rem), linear-gradient(180deg, var(--navy) 0 250px, #e9ece8 250px 100%); }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.top-stats { gap: 22px; padding: 10px 18px 10px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.top-stats > div { border-left-color: rgba(255,255,255,.14); }
.quiet-button { padding: 8px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; transition: color .18s, border-color .18s, background .18s; }
.quiet-button:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }

.practice-panel { background: linear-gradient(180deg, #fdfaf4 0%, var(--paper) 38%, #f3eee4 100%); }
.progress-panel { position: sticky; top: 20px; align-self: start; display: block; max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #c4cbc7 transparent; background: linear-gradient(180deg, #fdfaf4 0%, var(--paper) 30%, #f3eee4 100%); }
.question-heading::after { width: 120px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--coral), rgba(232,106,88,0)); }
.question-number { font-variant-numeric: tabular-nums; }
.audio-block { border: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 92% 0%, rgba(232,106,88,.22), transparent 16rem), linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); box-shadow: 0 14px 34px rgba(16,35,56,.28); }
.audio-player { background: rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.audio-play { box-shadow: 0 8px 18px rgba(232,106,88,.34); }
.waveform i { box-shadow: 0 0 8px rgba(232,106,88,.35); }
textarea { box-shadow: inset 0 2px 5px rgba(16,35,56,.05); }
.primary-button, .secondary-button { border-radius: 14px; }
.primary-button { background: linear-gradient(160deg, #ef7a66, var(--coral)); }
.secondary-button { background: rgba(255,255,255,.62); box-shadow: 0 2px 6px rgba(16,35,56,.05); }
.secondary-button:hover { box-shadow: 0 5px 14px rgba(16,35,56,.09); transform: translateY(-1px); }
.mode-switch { background: #e9e6dd; box-shadow: inset 0 1px 3px rgba(16,35,56,.08); }
.answer-reveal { box-shadow: 0 4px 14px rgba(16,35,56,.05); }
.feedback { transition: border-color .2s, background .2s; box-shadow: 0 4px 14px rgba(16,35,56,.04); }
.feedback-title { font-size: 15px; }
.study-plan { border-color: #e3ddce; background: linear-gradient(165deg, #fffdf8 0%, #fbf5e9 100%); box-shadow: 0 8px 22px rgba(16,35,56,.06); }
.plan-counts > div { border: 1px solid #eae3d3; background: linear-gradient(180deg, #f8f4ea, #f1ece0); }
.question-list { border: 1px solid #e6e3da; border-radius: 14px; background: rgba(255,253,248,.5); padding: 4px; }
.di-question-sub { grid-column: 2; color: var(--coral); font-size: 10px; font-weight: 760; }.di-question-button.current .di-question-sub { color: #ffd0c8; }
.di-template-category { margin: 6px 0 10px; padding: 7px 10px; border-radius: 10px; background: #f1f6f3; color: var(--muted); font-size: 11px; }.di-template-category strong { color: var(--navy); }.di-template-category span { color: var(--coral); }
.word-token { display: inline; margin: 0; padding: 0 1px; border: 0; border-radius: 4px; color: inherit; background: transparent; font: inherit; line-height: inherit; text-align: inherit; cursor: pointer; }
.word-token:hover { background: rgba(232,106,88,.12); text-decoration: underline dotted currentColor; text-underline-offset: 3px; }
.di-template-word { color: #c63d2f; font-weight: 650; }
.di-content-word { color: #1e7d46; font-weight: 650; }
.di-answer-color-key { margin: 0 0 10px !important; color: var(--muted) !important; font-size: 11px !important; }
.word-popover { position: absolute; z-index: 60; min-width: 180px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 12px 14px; overflow-y: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; color: #fff; background: linear-gradient(160deg, var(--navy), var(--navy-2)); box-shadow: 0 16px 40px rgba(6,21,36,.35); }
.word-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.word-popover-head strong { font-size: 16px; letter-spacing: .01em; }
.word-popover-actions { display: flex; align-items: center; gap: 6px; }
.word-speak { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; color: #fff; background: rgba(255,255,255,.1); font-size: 13px; }
.word-speak:hover { border-color: var(--coral); background: rgba(232,106,88,.25); }
.word-notebook-add { min-height: 30px; padding: 0 9px; border: 1px solid rgba(232,106,88,.7); border-radius: 9px; color: #fff; background: rgba(232,106,88,.2); font-size: 11px; font-weight: 760; white-space: nowrap; }
.word-notebook-add:hover { background: rgba(232,106,88,.38); }
.word-notebook-add.is-added { border-color: rgba(152,218,172,.7); color: #d9f5df; background: rgba(80,160,105,.25); }
.word-notebook-add:disabled { cursor: not-allowed; opacity: .78; }
.word-phonetic { display: block; margin-top: 2px; color: #b9c5cf; font-size: 12px; }
.word-gloss { margin: 7px 0 0; color: #e8eef2; font-size: 13px; line-height: 1.65; }

.answer-utilities { display: flex; align-items: center; gap: 10px; }
.phrase-notebook-trigger { min-height: 34px; padding: 0 11px; border: 1px solid #e1cfc4; border-radius: 11px; color: var(--coral-dark); background: #fff7f1; font-size: 11px; font-weight: 780; }
.phrase-notebook-trigger span { min-width: 20px; height: 20px; margin-left: 4px; display: inline-grid; place-items: center; border-radius: 99px; color: #fff; background: var(--coral); font-size: 9px; }
.phrase-notebook-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; border: 0; border-radius: 24px; color: var(--ink); background: var(--paper); box-shadow: 0 28px 80px rgba(6,21,36,.35); }
.phrase-notebook-dialog::backdrop { background: rgba(6,21,36,.56); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.phrase-notebook-shell { max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.phrase-notebook-header { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px 17px; color: #fff; background: radial-gradient(circle at 92% 0%, rgba(232,106,88,.38), transparent 14rem), linear-gradient(155deg, var(--navy), var(--navy-2)); }
.phrase-notebook-header span, .phrase-notebook-header small { display: block; color: #b8c6d0; font-size: 10px; }.phrase-notebook-header h2 { margin: 3px 0 2px; font-size: 25px; letter-spacing: -.04em; }.phrase-notebook-header button { flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; color: #fff; background: rgba(255,255,255,.08); font-size: 23px; line-height: 1; }
.phrase-notebook-body { min-height: 0; padding: 18px 20px 21px; overflow-y: auto; overscroll-behavior: contain; }
.phrase-notebook-form { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 11px; padding: 14px; border: 1px solid #e4ddd2; border-radius: 16px; background: #fffaf4; }
.phrase-notebook-form label { min-width: 0; color: var(--navy); font-size: 10px; font-weight: 760; }.phrase-notebook-wide { grid-column: 1 / -1; }.phrase-notebook-form input, .phrase-notebook-form select { width: 100%; min-width: 0; min-height: 42px; margin-top: 6px; padding: 0 11px; border: 1px solid #d4d7d2; border-radius: 11px; color: var(--ink); background: #fff; font: inherit; font-size: 16px; }.phrase-notebook-form input:focus, .phrase-notebook-form select:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.phrase-notebook-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.phrase-notebook-form-actions > span { color: var(--muted); font-size: 9px; line-height: 1.5; }.phrase-notebook-form-actions .primary-button { flex: 0 0 auto; min-height: 40px; padding: 0 13px; font-size: 11px; }
.phrase-notebook-live { min-height: 18px; margin: 7px 3px 0; color: var(--coral-dark); font-size: 10px; }
.phrase-notebook-tabs { display: grid; grid-template-columns: repeat(6, minmax(92px, 1fr)); gap: 5px; margin-top: 9px; padding: 4px; overflow-x: auto; border-radius: 13px; background: #e9e6dd; scrollbar-width: none; }.phrase-notebook-tabs::-webkit-scrollbar { display: none; }.phrase-notebook-tabs button { min-width: 0; min-height: 42px; padding: 0 4px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 760; }.phrase-notebook-tabs button span { display: inline-grid; min-width: 17px; height: 17px; place-items: center; margin-left: 2px; border-radius: 99px; color: var(--navy); background: #cdd4d3; font-size: 8px; }.phrase-notebook-tabs button.active { color: var(--navy); background: #fff; box-shadow: 0 3px 10px rgba(16,35,56,.08); }.phrase-notebook-tabs button.active span { color: #fff; background: var(--coral); }
.phrase-notebook-panel { min-width: 0; margin-top: 14px; overflow-wrap: anywhere; }.phrase-notebook-list { display: grid; gap: 12px; }.phrase-notebook-item { min-width: 0; padding: 18px 20px; border: 1px solid #dedfd9; border-radius: 17px; background: rgba(255,255,255,.74); box-shadow: 0 7px 18px rgba(16,35,56,.045); }.notebook-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.notebook-spelling > span, .notebook-meaning > span, .notebook-source > span { display: block; color: var(--muted); font-size: 9px; font-weight: 780; letter-spacing: .06em; }.notebook-word-button { min-height: 44px; margin-top: 3px; padding: 0; display: flex; align-items: center; gap: 10px; border: 0; color: var(--navy); background: transparent; text-align: left; }.notebook-word-button strong { font-size: 25px; line-height: 1.2; letter-spacing: -.025em; }.notebook-word-button small { padding: 5px 8px; border: 1px solid #dfd8ce; border-radius: 8px; color: var(--coral-dark); background: #fff7f1; font-size: 9px; font-weight: 760; }.notebook-word-button:hover strong { color: var(--coral-dark); }.notebook-word-button:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 4px; }.notebook-card-badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 10px; color: var(--coral-dark); background: #fff0ea; font-size: 10px; white-space: nowrap; }.notebook-meaning { margin-top: 12px; }.notebook-meaning p { margin: 5px 0 0; color: var(--ink); font-size: 13px; line-height: 1.65; }.notebook-plural-suffix { padding: 0 2px; color: #a92f2b; background: #ffe0dc; border-radius: 4px; font-weight: 850; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }.notebook-plural-note { margin: 12px 0 0; padding: 8px 10px; border-left: 3px solid var(--danger); border-radius: 0 9px 9px 0; color: #9f312c; background: #fff0ee; font-size: 10px; line-height: 1.6; }.notebook-plural-note strong { color: #c7302b; }.notebook-source { margin-top: 14px; padding-top: 13px; border-top: 1px solid #e5e5df; }.notebook-source ol { margin: 6px 0 0; padding: 0; display: grid; gap: 7px; list-style: none; }.notebook-source li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start; }.notebook-source li > span { padding-top: 2px; color: var(--coral-dark); font-size: 9px; font-weight: 780; }.notebook-source li p, .notebook-source-empty { margin: 0; color: var(--navy); font-size: 12px; line-height: 1.7; }.notebook-source-empty { margin-top: 6px; color: var(--muted); }.notebook-card-detail { display: block; margin-top: 12px; color: var(--muted); font-size: 9px; line-height: 1.55; }.phrase-notebook-empty { margin: 0; padding: 28px 18px; border: 1px dashed #d8d5cd; border-radius: 14px; color: var(--muted); background: rgba(255,255,255,.45); font-size: 11px; line-height: 1.7; text-align: center; }
.notebook-card-actions { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e5e5df; }.notebook-master-button { min-height: 44px; padding: 0 14px; border: 1px solid #b7d6c0; border-radius: 11px; color: #2e7650; background: #eff9f2; font-size: 10px; font-weight: 780; }.notebook-master-button:hover, .notebook-master-button:focus-visible { border-color: #69a87c; background: #e0f4e6; }.notebook-master-button.restore { color: var(--coral-dark); border-color: #e1cfc4; background: #fff7f1; }
.phrase-notebook-daybar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 11px 12px; border: 1px solid #e0dfd9; border-radius: 13px; background: #fffaf4; }.phrase-notebook-daybar label { min-width: 0; flex: 1; display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 760; }.phrase-notebook-daybar select { width: 100%; min-width: 0; min-height: 44px; padding: 0 11px; border: 1px solid #d4d7d2; border-radius: 10px; color: var(--navy); background: #fff; font: inherit; font-size: 12px; font-weight: 720; }.phrase-notebook-daybar select:focus { outline: 2px solid var(--coral); outline-offset: 1px; }.phrase-notebook-daybar > strong { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; color: var(--coral-dark); font-size: 11px; white-space: nowrap; }
.phrase-notebook-quiz { padding: 17px; border: 1px solid #e3d4c7; border-radius: 16px; background: linear-gradient(160deg, #fffaf4, #fff1e8); }.phrase-notebook-quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.phrase-notebook-quiz-head span { color: var(--coral-dark); font-size: 10px; font-weight: 780; }.phrase-notebook-quiz-head strong { color: var(--navy); font-size: 12px; }.phrase-notebook-quiz p { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }.phrase-notebook-quiz .quiz-hint { min-height: 54px; color: var(--navy); font-size: 13px; }.phrase-notebook-quiz-actions { display: flex; gap: 8px; margin-top: 12px; }.phrase-notebook-quiz-actions input { min-width: 0; flex: 1; height: 44px; padding: 0 12px; border: 1px solid #d2d5d0; border-radius: 12px; color: var(--ink); background: #fff; font-size: 16px; }.phrase-notebook-quiz-actions input:focus { outline: 2px solid var(--coral); outline-offset: 1px; }.phrase-notebook-quiz-actions button { flex: 0 0 auto; min-height: 44px; }.phrase-notebook-quiz .quiz-listen { min-height: 38px; margin-top: 10px; padding: 0 12px; }.phrase-notebook-quiz-result { min-height: 18px; margin-top: 8px !important; color: var(--coral-dark) !important; font-weight: 720; }
.notebook-study-start { max-width: 620px; margin: 26px auto 0; padding: 42px 34px; border: 1px solid #dedfd9; border-radius: 20px; background: rgba(255,255,255,.78); text-align: center; box-shadow: 0 12px 30px rgba(16,35,56,.07); }
.notebook-study-start > span { color: var(--coral-dark); font-size: 11px; font-weight: 800; }.notebook-study-start h2 { margin: 8px 0 0; color: var(--navy); font-size: 30px; letter-spacing: -.04em; }.notebook-study-start p { max-width: 470px; margin: 12px auto 22px; color: var(--muted); font-size: 12px; line-height: 1.75; }.notebook-study-start.complete { border-color: #bdd8c6; background: #f3faf6; }
.notebook-study-layout { display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.notebook-study-rail, .notebook-study-card { border: 1px solid #dedfd9; border-radius: 19px; background: rgba(255,255,255,.82); box-shadow: 0 8px 22px rgba(16,35,56,.055); }
.notebook-study-rail { padding: 19px 16px; }.notebook-study-rail > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--navy); }.notebook-study-rail > div span { font-size: 11px; font-weight: 780; }.notebook-study-rail > div strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.notebook-study-rail progress { width: 100%; height: 7px; margin: 13px 0 17px; overflow: hidden; border: 0; border-radius: 99px; background: #e8e8e3; accent-color: var(--coral); }.notebook-study-rail progress::-webkit-progress-bar { border-radius: 99px; background: #e8e8e3; }.notebook-study-rail progress::-webkit-progress-value { border-radius: 99px; background: var(--coral); }
.notebook-study-rail ol { margin: 0; padding: 0; display: grid; gap: 5px; list-style: none; }.notebook-study-rail li { min-height: 38px; padding: 0 9px; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 7px; align-items: center; border-left: 3px solid transparent; border-radius: 9px; color: #7b858a; }.notebook-study-rail li span { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #c9ccc8; border-radius: 50%; font-size: 9px; }.notebook-study-rail li strong { overflow: hidden; font-size: 10px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }.notebook-study-rail li.complete { color: #347660; }.notebook-study-rail li.complete span { color: #fff; border-color: var(--mint); background: var(--mint); }.notebook-study-rail li.current { border-left-color: var(--coral); color: var(--navy); background: #fff0ea; }.notebook-study-rail li.current span { color: #fff; border-color: var(--coral); background: var(--coral); }
.notebook-study-card { min-width: 0; padding: 26px 28px; }.notebook-study-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.notebook-study-card > header span { color: var(--coral-dark); font-size: 11px; font-weight: 800; }.notebook-study-card > header strong { color: var(--navy); font-size: 15px; font-variant-numeric: tabular-nums; }
.notebook-study-prompt { padding: 18px 0 22px; text-align: center; }.notebook-study-prompt > span, .notebook-study-source > span, .notebook-study-answer > span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; }.notebook-study-prompt h2 { margin: 7px 0 13px; color: var(--navy); font-size: clamp(24px, 3vw, 34px); line-height: 1.25; letter-spacing: -.035em; }.notebook-study-prompt .quiz-listen { min-height: 42px; padding: 0 14px; color: var(--coral-dark); border-color: #e2bdb2; background: #fff8f4; }
.notebook-study-source { padding: 17px 0; border-top: 1px solid #e5e5df; border-bottom: 1px solid #e5e5df; }.notebook-study-cloze { margin-top: 8px; display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 10px; }.notebook-study-cloze span { color: var(--coral-dark); font-size: 9px; font-weight: 780; }.notebook-study-cloze p, .notebook-study-cloze-empty { margin: 0; color: var(--navy); font-size: 15px; line-height: 1.75; }.notebook-study-cloze p strong { color: var(--coral-dark); letter-spacing: .08em; }.notebook-study-cloze-empty { margin-top: 8px; color: var(--muted); font-size: 11px; }
.notebook-study-answer { display: block; margin-top: 18px; }.notebook-study-answer input { width: 100%; height: 54px; margin-top: 8px; padding: 0 15px; border: 1px solid #cfd2cd; border-radius: 13px; color: var(--ink); background: #fff; font-size: 18px; }.notebook-study-answer input:focus { outline: 3px solid rgba(232,106,88,.18); border-color: var(--coral); }.notebook-study-card .phrase-notebook-quiz-result { min-height: 22px; margin: 9px 0 0 !important; color: var(--coral-dark); font-size: 11px; line-height: 1.7; }
.notebook-study-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }.notebook-study-actions > button { min-height: 48px; }.notebook-study-actions .notebook-master-button { width: 100%; font-size: 12px; }
.notebook-practice-phonetic { margin: -6px 0 12px; color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.notebook-practice-meaning { margin: 7px 0 0; color: var(--ink); font-size: 14px; line-height: 1.7; }
.notebook-practice-hint { margin: 4px 0 2px; padding: 14px 10px; border: 1px dashed #d8d5cd; border-radius: 12px; color: var(--navy); background: rgba(255,255,255,.6); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 19px; font-weight: 700; letter-spacing: .3em; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.notebook-practice-answer { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--coral); border-radius: 0 10px 10px 0; color: var(--navy); background: #fff4f0; font-size: 13px; line-height: 1.6; }

@media (max-width: 1040px) {
  body { background: linear-gradient(180deg, var(--navy) 0 216px, #e9ece8 216px 100%); }
.top-stats { gap: 15px; }.top-stats > div { min-width: 92px; padding-left: 14px; }
.practice-panel { padding: 36px 32px; }
}
@media (max-width: 820px) {
}
@media (max-width: 560px) {
}

@media (max-width: 820px) {

  .progress-panel { position: static; max-height: none; overflow: visible; }
  .question-list { max-height: none; }
  .di-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .di-workspace { order: -1; }
  .di-outline { padding: 20px 0 0; border-top: 1px solid var(--line); border-right: 0; }
  .di-question-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 320px; overflow-y: auto; }
  .mobile-plan-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 20px; padding: 12px 13px; border: 1px solid #e2d9cb; border-radius: 15px; background: #fff9f2; box-shadow: 0 5px 15px rgba(16,35,56,.05); }.mobile-plan-next > div { min-width: 0; }.mobile-plan-next span, .mobile-plan-next strong, .mobile-plan-next small { display: block; }.mobile-plan-next span { color: var(--coral-dark); font-size: 10px; font-weight: 780; letter-spacing: .04em; }.mobile-plan-next strong { margin-top: 2px; overflow: hidden; color: var(--navy); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.mobile-plan-next small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }.mobile-plan-next button { flex: 0 0 auto; min-height: 42px; padding: 0 14px; border: 0; border-radius: 11px; color: #fff; background: var(--coral); font-size: 12px; font-weight: 760; }
}

.secondary-button[aria-disabled="true"] { pointer-events: none; cursor: not-allowed; opacity: .5; }

@media (max-width: 560px) {
  .plan-next { align-items: flex-start; }
  .plan-next .primary-button { min-width: 92px; }
}

/* 手机端：把下一步、输入和控制区保持在舒适的拇指触控尺寸。 */
@media (max-width: 560px) {

  .mobile-plan-next { margin: 0 0 18px; }
  .mobile-plan-next button { min-width: 56px; min-height: 44px; }
  .audio-play { height: 44px; }
  .audio-speed { min-width: 44px; height: 44px; padding: 0 7px; }
  .mode-option, .di-rating-buttons button, .question-bank-toggle { min-height: 44px; }
  .word-speak { width: 44px; height: 44px; }.word-notebook-add { min-height: 44px; padding: 0 10px; }
  .answer-label-row { align-items: center; gap: 8px; }.answer-utilities { gap: 6px; }.phrase-notebook-trigger { min-height: 44px; padding: 0 9px; }.phrase-notebook-dialog { width: calc(100vw - 16px); max-width: none; max-height: calc(88dvh - env(safe-area-inset-bottom)); margin: auto 8px max(8px, env(safe-area-inset-bottom)); border-radius: 22px 22px 18px 18px; }.phrase-notebook-shell { max-height: calc(88dvh - env(safe-area-inset-bottom)); }.phrase-notebook-header { padding: 17px 17px 14px; }.phrase-notebook-body { padding: 14px 13px 17px; }.phrase-notebook-form { grid-template-columns: 1fr; padding: 12px; }.phrase-notebook-wide { grid-column: auto; }.phrase-notebook-form-actions { display: grid; }.phrase-notebook-form-actions .primary-button { width: 100%; min-height: 44px; }.phrase-notebook-tabs button { min-height: 44px; font-size: 9px; }.phrase-notebook-tabs button span { display: none; }.phrase-notebook-quiz-actions { display: grid; grid-template-columns: 1fr auto; }.phrase-notebook-quiz-actions input { width: 100%; }
  .daily-report-heading { flex-wrap: wrap; }
  .daily-report-heading .secondary-button { min-height: 44px; }
  .di-question-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 320px 级别的窄屏收口：保留信息和点击面积，避免顶部控制换成三行。 */
@media (max-width: 380px) {

  .sync-status { gap: 5px; padding: 5px 7px; font-size: 9px; }
  .sync-status::before { width: 6px; height: 6px; }
  .quiet-button { padding: 7px 8px; font-size: 11px; }
  .top-stats { gap: 4px; padding: 9px 10px; border-radius: 14px; }
  .top-stats > div { padding-left: 7px; }
  .top-stats span { font-size: 9px; }
  .top-stats strong { font-size: 16px; }

  .practice-panel { padding: 20px 14px 25px; }
  .mobile-plan-next { gap: 8px; padding: 11px 12px; border-radius: 14px; }
  .mobile-plan-next strong { font-size: 13px; }
  .mobile-plan-next small { font-size: 9px; }
  .mobile-plan-next button { padding: 0 11px; }
}

/* WE 高频 33 篇：沿用整站配色，只新增一套紧凑的九步学习区。 */
.we-lesson-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 30px; margin-top: 25px; }
.we-lesson-outline { min-width: 0; padding-right: 24px; border-right: 1px solid var(--line); }
.we-lesson-outline > p { margin: 14px 3px 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.we-lesson-select-wrap { display: none; color: var(--navy); font-size: 11px; font-weight: 760; }
.we-lesson-select-wrap select { width: 100%; min-height: 46px; margin-top: 7px; padding: 0 40px 0 13px; border: 1px solid #d4d7d2; border-radius: 12px; color: var(--navy); background: #fff; font: inherit; }
.we-lesson-list { max-height: 680px; display: grid; gap: 7px; padding-right: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.we-lesson-button { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; min-height: 64px; padding: 8px 10px; border: 1px solid #deddd7; border-radius: 13px; color: var(--muted); background: rgba(255,255,255,.5); text-align: left; }
.we-lesson-button > span { grid-row: 1 / 3; color: #a8b0b4; font-size: 18px; font-weight: 790; font-variant-numeric: tabular-nums; }
.we-lesson-button strong { overflow: hidden; color: var(--navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.we-lesson-button small { font-size: 9px; }
.we-lesson-button em { grid-column: 3; grid-row: 1 / 3; color: #9ca6aa; font-size: 9px; font-style: normal; white-space: nowrap; }
.we-lesson-button:hover { border-color: #bfc5c3; background: #fff; }
.we-lesson-button.current { color: #fff; border-color: var(--navy); background: linear-gradient(155deg, var(--navy), var(--navy-2)); box-shadow: 0 9px 20px rgba(16,35,56,.18); }
.we-lesson-button.current strong { color: #fff; }
.we-lesson-button.current > span, .we-lesson-button.current small { color: #b9c5cf; }
.we-lesson-button.current em { color: #ffd0c8; }
.we-lesson-button.completed:not(.current) em { color: var(--mint); font-weight: 760; }
.we-lesson-workspace { min-width: 0; }
.we-lesson-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.we-lesson-heading > div:first-child { min-width: 0; }
.we-lesson-heading > div:first-child > span { color: var(--coral); font-size: 11px; font-weight: 780; letter-spacing: .05em; }
.we-lesson-heading h2 { margin: 5px 0 0; color: var(--navy); font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -.04em; }
.we-lesson-heading p { max-width: 780px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.we-lesson-progress { flex: 0 0 auto; min-width: 104px; padding: 11px 13px; border-radius: 13px; background: rgba(16,35,56,.06); text-align: center; }
.we-lesson-progress strong, .we-lesson-progress span { display: block; }
.we-lesson-progress strong { color: var(--navy); font-size: 20px; font-variant-numeric: tabular-nums; }
.we-lesson-progress span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.we-lesson-steps { display: flex; gap: 7px; margin-top: 19px; padding-bottom: 5px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.we-lesson-step { flex: 0 0 auto; min-height: 42px; padding: 0 11px; border: 1px solid #d8d9d3; border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.56); font-size: 10px; font-weight: 740; white-space: nowrap; }
.we-lesson-step span { margin-right: 5px; color: #a4adb1; font-variant-numeric: tabular-nums; }
.we-lesson-step:hover { color: var(--navy); border-color: #bfc5c3; background: #fff; }
.we-lesson-step.done { color: #347660; border-color: #bfd9cb; background: #edf7f1; }
.we-lesson-step.active { color: #fff; border-color: var(--navy); background: var(--navy); box-shadow: 0 5px 14px rgba(16,35,56,.15); }
.we-lesson-step.active span { color: #ffd0c8; }
.we-lesson-content { min-height: 390px; margin-top: 12px; padding: 24px; border: 1px solid #d8d9d3; border-radius: 19px; background: rgba(255,253,248,.9); box-shadow: 0 8px 24px rgba(16,35,56,.06); }
.we-lesson-kicker { display: block; color: var(--coral); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.we-lesson-content h3 { margin: 5px 0 0; color: var(--navy); font-size: 22px; letter-spacing: -.025em; }
.we-lesson-content h3:focus { outline: none; }
.we-lesson-help { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.we-lesson-question { margin: 18px 0 0; padding: 17px 19px; border-left: 4px solid var(--coral); border-radius: 0 14px 14px 0; color: var(--navy); background: #fff5ee; font-size: 16px; font-weight: 690; line-height: 1.7; }
.we-lesson-idea-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.we-lesson-idea { min-width: 0; padding: 14px; border: 1px solid #deddd7; border-radius: 14px; background: #fff; }
.we-lesson-idea span { color: var(--coral-dark); font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.we-lesson-idea p { margin: 6px 0 0; color: var(--navy); font-size: 12px; line-height: 1.65; }
.we-lesson-teaching { margin-top: 17px; }
.we-lesson-chinese { margin: 0; padding: 13px 15px; border-radius: 12px; color: #725522; background: #fff1cf; font-size: 13px; font-weight: 680; line-height: 1.65; }
.we-lesson-english { margin: 13px 0 0; color: var(--navy); font-size: 18px; font-weight: 680; line-height: 1.8; }
.we-wording-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.we-wording-card { min-width: 0; padding: 14px 15px; border: 1px solid #deddd7; border-radius: 13px; background: #fff; }
.we-wording-card.easy { border-color: #bedbcd; background: #edf7f1; }
.we-wording-card > span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.we-wording-card.easy > span { color: #347660; }
.we-wording-card p { margin: 6px 0 0; color: var(--navy); font-size: 13px; font-weight: 660; line-height: 1.7; }
.we-lesson-sentence-label { margin-top: 16px; color: #347660; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.we-lesson-sentences { display: grid; gap: 7px; margin-top: 16px; }
.we-lesson-sentence { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: start; padding: 10px 12px; border: 1px solid #e2e1db; border-radius: 11px; background: #fff; }
.we-lesson-sentence > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--navy); font-size: 9px; font-weight: 800; }
.we-lesson-sentence p { margin: 1px 0 0; color: var(--ink); font-size: 12px; line-height: 1.6; }
.we-lesson-input { width: 100%; min-height: 126px; margin-top: 15px; padding: 14px 15px; border: 1px solid #cfd3cf; border-radius: 13px; color: var(--ink); background: #fff; font-size: 15px; line-height: 1.65; resize: vertical; }
.we-lesson-input-label { display: block; margin-top: 14px; color: var(--navy); font-size: 11px; font-weight: 780; }
.we-lesson-input-label + .we-lesson-input { margin-top: 7px; }
.we-lesson-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.we-lesson-inline-actions button { min-height: 40px; padding: 0 13px; border-radius: 11px; }
.we-lesson-feedback { margin-top: 12px; padding: 12px 14px; border-radius: 12px; color: var(--muted); background: #efeee9; font-size: 11px; line-height: 1.65; }
.we-lesson-feedback.correct { color: #346c59; background: #e8f5ee; }
.we-lesson-feedback.partial { color: #725522; background: #fff1cf; }
.we-lesson-feedback.wrong { color: #9d3833; background: #ffe5e0; }
.we-lesson-feedback .we-smart-checks { margin-bottom: 0; }.we-lesson-feedback .we-smart-checks > div { background: rgba(255,255,255,.58); }
.we-lesson-reference { margin-top: 11px; padding: 13px 15px; border: 1px solid #deddd7; border-radius: 12px; color: var(--navy); background: #fff; font-size: 13px; font-weight: 680; line-height: 1.75; }
.we-lesson-cloze { display: grid; gap: 10px; margin-top: 16px; }
.we-lesson-cloze label { display: block; padding: 12px 13px; border: 1px solid #deddd7; border-radius: 12px; background: #fff; }
.we-lesson-cloze label > span { display: block; color: var(--coral-dark); font-size: 10px; font-weight: 790; }
.we-lesson-cloze label > small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.we-lesson-cloze textarea { min-height: 72px; margin-top: 8px; padding: 10px 11px; border-radius: 10px; font-size: 13px; }
.we-lesson-cloze-answers { display: grid; gap: 7px; margin-top: 12px; }
.we-lesson-cloze-answer { padding: 10px 12px; border-left: 3px solid var(--mint); border-radius: 0 10px 10px 0; background: #edf7f1; }
.we-lesson-cloze-answer span { display: block; color: #347660; font-size: 9px; font-weight: 780; }
.we-lesson-cloze-answer p { margin: 3px 0 0; color: var(--navy); font-size: 11px; line-height: 1.6; }
.we-lesson-cloze-answer .we-wording-grid { margin-top: 7px; }
.we-lesson-essay-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.we-lesson-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; align-items: start; }
.we-lesson-model { margin-top: 14px; padding: 18px; border: 1px solid #d8d9d3; border-radius: 15px; background: #fff; }
.we-lesson-model-grid .we-lesson-model { min-width: 0; margin-top: 0; }
.we-lesson-model.easy { border-color: #bedbcd; background: #f3faf6; }
.we-lesson-model > span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.we-lesson-model.easy > span { color: #347660; }
.we-lesson-model p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.85; }
.we-lesson-model p + p { margin-top: 12px; }
.we-lesson-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.we-lesson-actions button { min-width: 112px; }

@media (max-width: 820px) {
  .we-lesson-layout { grid-template-columns: 1fr; gap: 18px; }
  .we-lesson-outline { padding: 0 0 17px; border-right: 0; border-bottom: 1px solid var(--line); }
  .we-lesson-list { display: none; }
  .we-lesson-select-wrap { display: block; }
  .we-lesson-outline > p { margin-top: 9px; text-align: left; }
}

@media (max-width: 560px) {
  .we-view-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .we-smart-checks { grid-template-columns: 1fr; }
  .we-view-switch button { min-height: 44px; font-size: 10px; }
  .we-lesson-heading { display: block; }
  .we-lesson-progress { width: fit-content; min-width: 96px; margin-top: 12px; }
  .we-lesson-steps { margin-right: -17px; padding-right: 17px; }
  .we-lesson-step { min-height: 44px; }
  .we-lesson-content { min-height: 350px; padding: 17px 14px; border-radius: 16px; }
  .we-lesson-content h3 { font-size: 20px; }
  .we-lesson-question { padding: 14px; font-size: 14px; }
  .we-lesson-idea-grid { grid-template-columns: 1fr; }
  .we-lesson-english { font-size: 16px; }
  .we-wording-grid, .we-lesson-model-grid { grid-template-columns: 1fr; }
  .we-lesson-inline-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .we-lesson-inline-actions button { width: 100%; min-height: 44px; }
  .we-lesson-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .we-lesson-actions button { width: 100%; min-width: 0; min-height: 46px; }
}

/* 2026-07 responsive polish: keep the existing layout, but make the working area denser and calmer. */
.study-tab:disabled { cursor: wait; opacity: .72; }
.study-tab.load-error { color: #fff; background: rgba(217,79,72,.82); }
#prevBtn { margin-left: auto; }
.we-lesson-button { min-height: 70px; }
.we-lesson-button strong { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
.phrase-notebook-tabs button { font-size: 11px; }

@media (min-width: 821px) {
  .question-list { max-height: clamp(300px, 36vh, 320px); overflow-y: auto; overscroll-behavior: contain; }
  .di-question-list { max-height: 680px; padding-right: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .we-active .topbar, .di-active .topbar, .notebook-active .topbar { min-height: 78px; padding-bottom: 12px; }
}

@media (max-width: 560px) {
  .auth-view { place-items: start center; padding-top: max(34px, env(safe-area-inset-top)); }.auth-card { padding: 27px 20px 23px; border-radius: 23px; }.auth-copy { margin-top: 24px; }.auth-copy h2 { font-size: 28px; }.auth-form input, .auth-tabs button, .auth-submit { min-height: 48px; }
  body { background: linear-gradient(180deg, var(--navy) 0 184px, #e9ece8 184px 100%); }

  .account-menu { order: 1; max-width: none; min-width: 0; flex: 1 1 150px; margin-left: auto; }.sync-status { order: 1; }.top-stats { order: 2; }
  .account-menu button { width: 44px; padding: 0; }
  .header-action-label { display: none; }
  .header-action-icon { width: 18px; height: 18px; }
  .top-stats { width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 10px; border-radius: 14px; }
  .top-stats > div { min-width: 0; padding-left: 8px; }
  .top-stats span { margin-bottom: 3px; font-size: 9px; }
  .top-stats strong { font-size: 16px; }
  .quiet-button { padding: 7px 9px; }
  .topbar > .quiet-button { order: 1; width: 44px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-left: 0; padding: 0; }

  .practice-panel { padding: 18px 14px 24px; border-radius: 21px; }
  .we-panel, .di-panel, .notebook-page { padding: 24px 17px 28px; border-radius: 23px; }
  .we-hero, .di-hero { align-items: flex-start; gap: 12px; }
  .we-hero > div:first-child, .di-hero > div:first-child { min-width: 0; }
  .we-hero h2, .di-hero h2 { font-size: 27px; letter-spacing: -.04em; }
  .we-overview { min-width: 112px; padding: 12px; }
  .di-overview { min-width: 116px; padding: 11px; }
  .notebook-hero { display: block; }
  .notebook-hero-actions { width: 100%; align-items: stretch; margin-top: 16px; }
  .notebook-overview { min-width: 0; flex: 1 1 auto; }
  .notebook-hero-actions .primary-button { flex: 0 0 auto; padding: 0 14px; }
  .mobile-plan-next { margin-bottom: 14px; padding: 10px 11px; }
  .mobile-plan-next > div { flex: 1; }
  .mobile-plan-list-link { flex: 0 0 auto; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid #e3c8ba; border-radius: 11px; color: var(--coral-dark); background: #fff; font-size: 11px; font-weight: 760; text-decoration: none; }
  #wfdProgressPanel, .di-workspace { scroll-margin-top: 68px; }
  .question-heading { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: end; gap: 8px 12px; padding-bottom: 20px; }
  .question-heading > div { display: contents; }
  .eyebrow { grid-column: 1 / -1; }
  .question-number { grid-column: 1; }
  .instruction { grid-column: 2; }
  .eyebrow { gap: 5px; font-size: 10px; }
  .eyebrow span:last-child { font-size: 9px; }
  .question-number { margin-top: 10px; font-size: 70px; }
  .instruction { margin: 0 0 1px; font-size: 19px; line-height: 1.22; }
  .instruction span { margin-top: 6px; font-size: 10px; }
  .section-block { padding-top: 18px; }
  .audio-block { padding: 15px 13px 13px; }
  .audio-heading { align-items: center; }
  .waveform { height: 24px; margin: 7px 0; }
  .audio-player { grid-template-columns: 50px minmax(0, 1fr) 44px; gap: 7px; padding: 7px; }
  .audio-play { width: 50px; }
  .audio-seek { height: 44px; margin: 0; background-position: center; background-repeat: no-repeat; background-size: 100% 4px; }
  textarea { min-height: 132px; padding: 14px; }
  .answer-actions { gap: 8px 6px; }
  .answer-actions > #submitBtn, .answer-actions > #revealAnswerBtn, .answer-actions > #relearnBtn, .answer-actions > #masteredBtn { min-width: 62px; flex: 1 1 calc(25% - 5px); padding-right: 6px; padding-left: 6px; }
  .answer-actions > .mode-switch { min-width: 128px; flex: 1 1 128px; }
  .answer-actions > #prevBtn, .answer-actions > #nextBtn { min-width: 58px; flex: 1 1 58px; margin-left: 0; padding-right: 8px; padding-left: 8px; }
  .mode-option { min-width: 0; flex: 1 1 0; padding-right: 7px; padding-left: 7px; }
  .quiet-button, #collapseBtn, .plan-next .primary-button, .phrase-notebook-header button, .phrase-notebook-form input, .phrase-notebook-form select { min-height: 44px; }
  #collapseBtn { min-width: 44px; }
  .study-history summary { min-height: 44px; display: flex; align-items: center; }
  .queue-heading { top: 62px; }
  #prevBtn { margin-left: 0; }
}

@media (max-width: 380px) {
  .auth-card { padding: 23px 16px 20px; }.auth-copy h2 { font-size: 25px; }
  .account-menu { max-width: none; padding-left: 8px; }.account-menu > span { font-size: 9px; }.account-menu button { padding: 0; }
  .we-hero, .di-hero { display: block; }
  .we-overview, .di-overview { width: 100%; margin-top: 14px; text-align: left; }
  .question-heading { grid-template-columns: 92px minmax(0, 1fr); gap: 7px 8px; }
  .question-number { font-size: 60px; }
  .instruction { font-size: 17px; }
  .audio-hint { display: none; }
}

@media (max-width: 820px) {
  .practice-module { min-height: auto; padding: 28px 25px 32px; }
  .practice-module-layout { grid-template-columns: 1fr; grid-template-areas: "workspace" "questions"; gap: 22px; }
  .practice-question-outline { padding: 20px 0 0; border-top: 1px solid var(--line); border-right: 0; }
  .practice-question-list { max-height: 264px; grid-template-columns: repeat(8, minmax(44px, 1fr)); }
}

@media (max-width: 560px) {

  .practice-module { padding: 24px 17px 28px; border-radius: 23px; }
  .practice-hero { display: block; }
  .practice-hero h2 { font-size: 31px; }
  .practice-overview { width: fit-content; min-width: 112px; margin-top: 16px; }
  .practice-prompt, .practice-answer-area { padding: 15px 13px; border-radius: 15px; }
  .practice-question-list { grid-template-columns: repeat(5, minmax(44px, 1fr)); max-height: 250px; }
  .practice-navigation { display: grid; grid-template-columns: 1fr 1fr; }
  .practice-navigation button { width: 100%; min-width: 0; }
  .practice-answer-area button, .practice-word-bank button, .practice-word-option { min-height: 44px; }
  .practice-self-check { display: block; }
  .practice-rating-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 9px; }
  .practice-rating-buttons button { padding: 0 5px; }
}

@media (max-width: 820px) {
  .notebook-study-layout { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .notebook-study-rail, .notebook-study-card { min-width: 0; }
  .notebook-study-rail { padding: 14px; }
  .notebook-study-rail ol { width: 100%; max-width: 100%; grid-template-columns: repeat(10, minmax(94px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .notebook-study-card { padding: 22px 20px; }
}

@media (max-width: 560px) {
  .phrase-notebook-tabs { margin-right: -17px; padding-right: 17px; border-radius: 13px 0 0 13px; }
  .phrase-notebook-tabs button { min-height: 44px; font-size: 10px; }
  .notebook-study-start { margin-top: 12px; padding: 30px 20px; }
  .notebook-study-start h2 { font-size: 25px; }
  .notebook-study-rail ol { grid-template-columns: repeat(10, 86px); }
  .notebook-study-card { padding: 19px 14px; }
  .notebook-study-prompt { padding: 16px 0 18px; }
  .notebook-study-prompt h2 { font-size: 25px; }
  .notebook-study-cloze { grid-template-columns: 1fr; gap: 5px; }
  .notebook-study-answer input { height: 52px; font-size: 16px; }
  .notebook-study-actions { grid-template-columns: 1fr; }
}

.di-template-steps { margin: 0 0 12px 20px; padding: 0; color: var(--ink); font-size: 13px; line-height: 1.85; }
.di-template-fill { padding: 0 3px; border-radius: 5px; background: #fde8e3; color: #b5432f; }
.di-template-keywords { margin: 0 0 10px; color: var(--muted); font-size: 11px; }
.di-template-keywords code { margin: 0 3px; padding: 2px 7px; border-radius: 7px; background: rgba(16,35,56,.07); color: var(--navy); font-size: 11px; }
.di-template-tips { margin: 0; padding-left: 17px; color: var(--muted); font-size: 11px; line-height: 1.7; }

/* WFD 随身听：大按钮、低干扰、手机优先。 */
.drive-panel { grid-column: 1 / -1; min-width: 0; padding: 30px; border: 1px solid rgba(16,35,56,.08); border-radius: 28px; background: var(--paper); box-shadow: var(--shadow); }
.drive-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 2px 2px 22px; }
.drive-kicker { color: var(--coral); font-size: 10px; font-weight: 820; letter-spacing: .12em; text-transform: uppercase; }
.drive-hero h2 { margin: 5px 0 0; color: var(--navy); font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -.05em; }
.drive-hero p { max-width: 680px; margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.drive-plan-summary { flex: 0 0 auto; min-width: 155px; padding: 14px 17px; border: 1px solid #dfe1dc; border-radius: 16px; background: rgba(255,255,255,.7); text-align: right; }
.drive-plan-summary strong, .drive-plan-summary span { display: block; }.drive-plan-summary strong { color: var(--navy); font-size: 22px; }.drive-plan-summary span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.drive-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 16px; align-items: start; }
.drive-player-card { min-width: 0; min-height: 570px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px; border-radius: 24px; color: #fff; background: radial-gradient(circle at 50% 25%, rgba(232,106,88,.25), transparent 34%), linear-gradient(150deg, #102338, #20344c 62%, #2d2d41); box-shadow: 0 20px 38px rgba(16,35,56,.23); }
.drive-now-playing { text-align: center; }.drive-now-playing > span { display: inline-flex; min-height: 28px; align-items: center; padding: 0 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #ffd0c8; background: rgba(255,255,255,.07); font-size: 10px; font-weight: 780; }.drive-now-playing > strong { display: block; margin-top: 13px; color: #fff; font-size: clamp(82px, 11vw, 136px); line-height: .9; letter-spacing: -.075em; font-variant-numeric: tabular-nums; }.drive-now-playing > small { display: block; margin-top: 14px; color: #b9c5cf; font-size: 11px; }
.drive-repeat-status { width: min(420px, 100%); display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; color: #d3dce4; font-size: 11px; }.drive-repeat-status span:first-child { color: #ffd0c8; font-weight: 760; }
.drive-progress { width: min(420px, 100%); margin-top: 4px; }
.audio-seek:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.audio-seek:disabled { cursor: default; opacity: .45; }
.drive-controls { width: min(500px, 100%); display: grid; grid-template-columns: 1fr 142px 1fr; align-items: center; gap: 18px; margin-top: 28px; }
.drive-controls button { min-height: 54px; border-radius: 18px; font-weight: 780; }.drive-skip { border: 1px solid rgba(255,255,255,.16); color: #e4eaf0; background: rgba(255,255,255,.07); }.drive-skip:hover { background: rgba(255,255,255,.13); }.drive-play { width: 142px; height: 142px; display: grid; place-content: center; gap: 6px; border: 0; border-radius: 50% !important; color: #fff; background: var(--coral); box-shadow: 0 18px 34px rgba(232,106,88,.3); }.drive-play:hover { background: var(--coral-dark); transform: translateY(-1px); }.drive-play > span { font-size: 30px; line-height: 1; }.drive-play > strong { font-size: 12px; }
.drive-caption { width: min(620px, 100%); margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: #c7d1d9; text-align: center; }.drive-caption summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: #dfe6eb; font-size: 11px; font-weight: 720; }.drive-caption p { margin: 8px 0 0; font-size: 14px; line-height: 1.7; }.drive-caption p:last-child { color: #9fb0bd; font-size: 12px; }
.drive-settings-card { min-width: 0; padding: 21px; border: 1px solid #dedfd9; border-radius: 22px; background: #fffdfa; }
.drive-settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.drive-settings-heading span, .drive-settings-heading strong { display: block; }.drive-settings-heading span { color: var(--coral); font-size: 9px; font-weight: 800; letter-spacing: .08em; }.drive-settings-heading strong { margin-top: 3px; color: var(--navy); font-size: 20px; }.drive-settings-heading small { color: var(--muted); font-size: 9px; }
.drive-setting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 17px; }.drive-setting-grid label { color: var(--navy); font-size: 10px; font-weight: 760; }.drive-setting-grid select { width: 100%; min-height: 48px; margin-top: 6px; padding: 0 12px; border: 1px solid #d4d7d2; border-radius: 12px; color: var(--navy); background: #fff; font: inherit; }
.drive-offline-card { margin-top: 16px; padding: 15px; border: 1px solid #c9dfd3; border-radius: 16px; background: #edf7f1; }.drive-offline-card span, .drive-offline-card strong, .drive-offline-card small { display: block; }.drive-offline-card span { color: #347660; font-size: 9px; font-weight: 800; letter-spacing: .06em; }.drive-offline-card strong { margin-top: 5px; color: var(--navy); font-size: 13px; line-height: 1.45; }.drive-offline-card small { margin-top: 4px; color: #5d766b; font-size: 9px; line-height: 1.55; }.drive-cache-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 13px; }.drive-cache-actions button { min-height: 44px; padding: 0 12px; font-size: 10px; }
.drive-queue { margin-top: 16px; }.drive-queue > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: var(--navy); font-size: 11px; font-weight: 780; }.drive-queue > summary span { color: var(--muted); font-size: 9px; font-weight: 650; }.drive-queue-list { max-height: 330px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; overflow-y: auto; overscroll-behavior: contain; }.drive-queue-list button { min-width: 0; min-height: 66px; display: grid; grid-template-columns: 1fr auto; gap: 2px 5px; padding: 8px 9px; border: 1px solid #dedfd9; border-radius: 12px; color: var(--muted); background: #fff; text-align: left; }.drive-queue-list button > span { grid-row: 1 / 3; color: var(--navy); font-size: 18px; font-weight: 810; font-variant-numeric: tabular-nums; }.drive-queue-list button strong { color: #687781; font-size: 8px; text-align: right; }.drive-queue-list button small { font-size: 8px; text-align: right; }.drive-queue-list button em { grid-column: 1 / -1; color: #9aa4a7; font-size: 8px; font-style: normal; }.drive-queue-list button em.cached { color: #347660; }.drive-queue-list button.current { border-color: var(--coral); background: #fff3ef; box-shadow: 0 5px 12px rgba(232,106,88,.11); }.drive-empty { grid-column: 1 / -1; margin: 0; padding: 18px; border-radius: 12px; color: var(--muted); background: #f0efea; font-size: 11px; text-align: center; }

@media (min-width: 1200px) {
  .drive-player-card { min-height: 440px; display: grid; grid-template-columns: minmax(0, 1fr) 230px; grid-template-rows: auto auto auto auto; gap: 0 28px; align-content: center; justify-items: center; }
  .drive-now-playing { grid-column: 1; grid-row: 1; }.drive-now-playing > strong { font-size: clamp(86px, 9vw, 118px); }
  .drive-repeat-status { grid-column: 1; grid-row: 2; margin-top: 18px; }.drive-progress { grid-column: 1; grid-row: 3; }
  .drive-controls { grid-column: 2; grid-row: 1 / 4; width: 100%; grid-template-columns: 1fr; gap: 9px; margin-top: 0; }.drive-controls button { width: 100%; }.drive-play { width: 118px !important; height: 118px; justify-self: center; }
  .drive-caption { grid-column: 1 / -1; grid-row: 4; margin-top: 22px; }
}

@media (max-width: 900px) {
  .drive-layout { grid-template-columns: 1fr; }
  .drive-player-card { min-height: 530px; }
  .drive-queue-list { grid-template-columns: repeat(5, minmax(0, 1fr)); max-height: 250px; }
}

@media (max-width: 560px) {
  .drive-active .topbar { min-height: 60px; flex-wrap: wrap; padding-bottom: 10px; }.drive-active .brand { flex: 1 1 auto; }.drive-active .brand-name { font-size: 21px; }.drive-active .brand small, .drive-active .sync-status, .drive-active .top-stats { display: none; }.drive-active .account-menu { order: 0; max-width: 154px; margin-left: auto; }
  .drive-panel { padding: 18px 14px max(22px, env(safe-area-inset-bottom)); border-radius: 21px; }
  .drive-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding-bottom: 13px; }.drive-kicker { display: none; }.drive-hero h2 { margin: 0; font-size: 30px; }.drive-hero p { grid-column: 1 / -1; margin-top: 0; font-size: 10px; }.drive-plan-summary { grid-column: 2; grid-row: 1; width: auto; min-width: 102px; margin-top: 0; padding: 8px 10px; text-align: right; }.drive-plan-summary strong { font-size: 17px; }
  .drive-player-card { min-height: 475px; padding: 23px 14px 19px; border-radius: 20px; }.drive-now-playing > strong { font-size: 88px; }.drive-repeat-status { margin-top: 18px; padding: 0 5px; }
  .drive-controls { grid-template-columns: 1fr 112px 1fr; gap: 9px; margin-top: 24px; }.drive-play { width: 112px; height: 112px; }.drive-skip { min-height: 52px; padding: 0 8px; font-size: 11px; }.drive-play > span { font-size: 25px; }
  .drive-caption { margin-top: 24px; }.drive-caption p { font-size: 13px; }
  .drive-settings-card { padding: 17px 13px; border-radius: 18px; }.drive-settings-heading small { max-width: 90px; text-align: right; }.drive-setting-grid select { min-height: 50px; font-size: 16px; }
  .drive-cache-actions { grid-template-columns: 1fr 1fr; }.drive-cache-actions button { width: 100%; min-width: 0; }
  .drive-queue-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 290px; }.drive-queue-list button { min-height: 70px; }
}

@media (max-width: 820px) {
  .di-category-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* PTE 仿真模考：独立考试终端视觉，不复刻任何第三方品牌界面。 */
.mock-panel { grid-column: 1 / -1; min-width: 0; }
.mock-landing { min-height: calc(100vh - 205px); padding: 38px; border: 1px solid rgba(16,35,56,.08); border-radius: 30px; background: linear-gradient(180deg, #fff 0%, #f7f8f8 58%, #eef1f2 100%); box-shadow: var(--shadow); }
.mock-landing-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-bottom: 27px; border-bottom: 1px solid #dce1e4; }
.mock-kicker { color: var(--coral-dark); font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.mock-landing-hero h2 { max-width: 760px; margin: 8px 0 0; color: var(--navy); font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -.06em; }
.mock-landing-hero p { max-width: 720px; margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.mock-coverage { flex: 0 0 218px; padding: 20px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 100% 0%, rgba(232,106,88,.35), transparent 12rem), linear-gradient(155deg, #102338, #1c354f); box-shadow: 0 15px 32px rgba(16,35,56,.2); }
.mock-coverage strong, .mock-coverage span, .mock-coverage small { display: block; }.mock-coverage strong { font-size: 35px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }.mock-coverage span { margin-top: 4px; color: #e5edf1; font-size: 11px; font-weight: 760; }.mock-coverage small { margin-top: 8px; color: #aebfca; font-size: 9px; line-height: 1.55; }
.mock-trust-note { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 18px; padding: 11px 14px; border-left: 3px solid var(--sand); border-radius: 0 11px 11px 0; color: #6e572c; background: #fff5dd; font-size: 11px; line-height: 1.65; }.mock-trust-note strong { color: #8d6419; }
.mock-device-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; margin-top: 22px; padding: 18px 20px; border: 1px solid #dbe2e5; border-radius: 18px; background: rgba(255,255,255,.82); }
.mock-device-check > div span, .mock-device-check > div strong, .mock-device-check > div small { display: block; }.mock-device-check > div span { color: var(--coral-dark); font-size: 9px; font-weight: 850; letter-spacing: .12em; }.mock-device-check > div strong { margin-top: 3px; color: var(--navy); font-size: 17px; }.mock-device-check > div small { max-width: 650px; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.mock-device-check button { min-width: 132px; min-height: 46px; padding: 0 15px; border: 1px solid #c7d2d8; border-radius: 12px; color: var(--navy); background: #fff; font-size: 11px; font-weight: 780; }.mock-device-check button:hover { color: #fff; border-color: var(--navy); background: var(--navy); }
.mock-device-check > p { grid-column: 1 / -1; min-height: 17px; margin: -2px 0 0; color: #347660; font-size: 10px; }.mock-device-check > p.error { color: var(--danger); }
.mock-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 17px; }
.mock-mode-card { position: relative; min-width: 0; padding: 24px; overflow: hidden; border: 1px solid #d9dfe2; border-radius: 21px; background: rgba(255,255,255,.84); box-shadow: 0 9px 24px rgba(16,35,56,.055); }
.mock-mode-card.recommended { border-color: #bfcdd5; box-shadow: inset 0 4px 0 var(--coral), 0 12px 30px rgba(16,35,56,.08); }.mock-mode-card > span { display: inline-flex; min-height: 25px; align-items: center; padding: 0 9px; border-radius: 999px; color: var(--coral-dark); background: #fff0eb; font-size: 9px; font-weight: 820; }.mock-mode-card h3 { margin: 12px 0 0; color: var(--navy); font-size: 24px; letter-spacing: -.035em; }.mock-mode-card > strong { display: block; margin-top: 5px; color: var(--coral-dark); font-size: 13px; }.mock-mode-card p { min-height: 42px; margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }.mock-mode-card ul { margin: 15px 0 19px; padding: 13px 15px 13px 30px; border-radius: 13px; color: #405263; background: #f1f4f5; font-size: 10px; line-height: 1.9; }.mock-mode-card button { width: 100%; min-height: 48px; border: 0; border-radius: 13px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 800; }.mock-mode-card.recommended button { background: linear-gradient(155deg, #ef7a66, var(--coral)); }.mock-mode-card button:hover { filter: brightness(.95); }
.mock-last-result { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 17px; padding: 16px 18px; border: 1px solid #cfddd5; border-radius: 16px; background: #eff7f2; }.mock-last-result > div span, .mock-last-result > div strong { display: block; }.mock-last-result span { color: #5d766b; font-size: 9px; }.mock-last-result strong { margin-top: 3px; color: #245c45; font-size: 13px; }.mock-last-result > div:last-child { text-align: right; }.mock-last-result > div:last-child strong { font-size: 22px; font-variant-numeric: tabular-nums; }

.mock-session-running { overflow: hidden; background: #e8ecef; }
.mock-session-running .topbar, .mock-session-running .study-tabs, .mock-session-running .section-modules { display: none !important; }
.mock-session-running .app-shell { width: 100%; max-width: none; height: 100dvh; margin: 0; padding: 0; display: block; }
.mock-session-running .mock-panel { width: 100%; height: 100dvh; }
.mock-exam-shell { width: 100%; height: 100dvh; min-width: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; color: #1d2c3b; background: #eef1f3; }
.mock-exam-header { min-width: 0; min-height: 76px; display: grid; grid-template-columns: minmax(190px, 1fr) auto auto; align-items: stretch; gap: 22px; padding: 0 25px; color: #fff; background: #102338; box-shadow: 0 2px 12px rgba(5,19,32,.2); }
.mock-exam-brand { min-width: 0; display: flex; align-items: center; gap: 11px; }.mock-exam-brand i { width: 13px; height: 13px; border-radius: 4px 8px 4px 8px; background: var(--coral); transform: rotate(-18deg); box-shadow: 0 0 0 5px rgba(232,106,88,.12); }.mock-exam-brand strong, .mock-exam-brand span { display: block; }.mock-exam-brand strong { font-size: 14px; letter-spacing: .08em; }.mock-exam-brand span { margin-top: 3px; color: #9fb0bd; font-size: 8px; letter-spacing: .05em; }
.mock-exam-meta { display: flex; align-items: stretch; }.mock-exam-meta > div { min-width: 128px; display: flex; flex-direction: column; justify-content: center; padding: 0 20px; border-left: 1px solid rgba(255,255,255,.13); }.mock-exam-meta span { color: #9fb0bd; font-size: 8px; font-weight: 750; letter-spacing: .1em; }.mock-exam-meta strong { margin-top: 4px; color: #fff; font-size: 12px; font-weight: 760; white-space: nowrap; }.mock-exam-meta .timer strong { color: #ffd1c9; font-size: 18px; font-variant-numeric: tabular-nums; }
.mock-exit { align-self: center; min-width: 80px; min-height: 42px; padding: 0 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: #d9e2e8; background: rgba(255,255,255,.06); font-size: 10px; font-weight: 750; }.mock-exit:hover { border-color: #ed8b7a; color: #fff; background: rgba(232,106,88,.22); }
.mock-instruction { min-width: 0; min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 28px; border-bottom: 1px solid #cfd6da; background: #fff; box-shadow: 0 3px 12px rgba(16,35,56,.04); }.mock-instruction > div:first-child { min-width: 0; display: flex; align-items: center; gap: 13px; }.mock-instruction > div:first-child > span { flex: 0 0 auto; min-width: 54px; min-height: 38px; display: inline-grid; place-items: center; border-radius: 10px; color: #fff; background: var(--coral); font-size: 10px; font-weight: 850; letter-spacing: .05em; }.mock-instruction strong, .mock-instruction p { display: block; }.mock-instruction strong { color: var(--navy); font-size: 14px; }.mock-instruction p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.mock-item-timer { flex: 0 0 auto; min-width: 98px; padding: 8px 11px; border: 1px solid #d7dde0; border-radius: 11px; text-align: right; }.mock-item-timer span, .mock-item-timer strong { display: block; }.mock-item-timer span { color: var(--muted); font-size: 8px; letter-spacing: .08em; }.mock-item-timer strong { margin-top: 2px; color: var(--navy); font-size: 18px; font-variant-numeric: tabular-nums; }
.mock-question-body { min-width: 0; width: min(1080px, calc(100% - 46px)); margin: 0 auto; padding: 20px 0 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.mock-question-count { margin-bottom: 11px; color: #697987; font-size: 9px; font-weight: 720; letter-spacing: .03em; }
.mock-passage, .mock-listen-stage, .mock-image-stage, .mock-unavailable { min-width: 0; padding: 23px 25px; border: 1px solid #cfd6da; border-radius: 15px; background: #fff; box-shadow: 0 7px 18px rgba(16,35,56,.055); }.mock-passage { color: #162a3c; font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }.mock-passage.large { font-size: clamp(17px, 2vw, 21px); line-height: 1.75; }.mock-passage.scroll { max-height: 40vh; overflow-y: auto; }
.mock-listen-stage { min-height: 170px; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(232,106,88,.1), transparent 18rem), #fff; }.mock-listen-stage span { color: var(--coral-dark); font-size: 9px; font-weight: 850; letter-spacing: .15em; }.mock-listen-stage strong { margin-top: 7px; color: var(--navy); font-size: 24px; letter-spacing: -.03em; }.mock-listen-stage p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.mock-image-stage { min-height: 390px; display: grid; place-items: center; margin: 0; padding: 17px; }.mock-image-stage img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(52vh, 520px); object-fit: contain; }
.mock-answer-label { display: block; margin-top: 16px; color: var(--navy); font-size: 11px; font-weight: 780; }.mock-answer-label > span { float: right; color: var(--muted); font-size: 9px; font-weight: 650; }.mock-answer-label textarea { width: 100%; min-height: 132px; margin-top: 8px; padding: 16px; resize: vertical; border: 1px solid #c7d0d5; border-radius: 13px; outline: none; color: #172a3c; background: #fff; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.65; }.mock-answer-label textarea:focus { border-color: #526f86; box-shadow: 0 0 0 3px rgba(82,111,134,.13); }
.mock-record-status { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-top: 15px; padding: 14px 17px; border: 1px solid #cbd4d9; border-radius: 14px; color: #fff; background: #193149; }.mock-record-dot { width: 13px; height: 13px; border-radius: 50%; background: #8498a7; box-shadow: 0 0 0 5px rgba(132,152,167,.13); }.mock-record-status.recording .mock-record-dot { background: #f07160; box-shadow: 0 0 0 5px rgba(240,113,96,.18); animation: sync-pulse .7s ease-in-out infinite alternate; }.mock-record-status.complete .mock-record-dot { background: #6fc09a; box-shadow: 0 0 0 5px rgba(111,192,154,.15); }.mock-record-status.error .mock-record-dot { background: #ef635d; }.mock-record-status strong { font-size: 10px; letter-spacing: .08em; }.mock-record-status p { margin: 4px 0 0; color: #b9c7d1; font-size: 10px; }.mock-record-status p strong { color: #fff; font-size: 17px; font-variant-numeric: tabular-nums; }.mock-level-bars { height: 28px; display: flex; align-items: center; gap: 3px; }.mock-level-bars i { width: 3px; height: 20%; border-radius: 3px; background: #71889a; }.mock-record-status.recording .mock-level-bars i { background: #ef7968; animation: mock-level .65s ease-in-out infinite alternate; }.mock-record-status.recording .mock-level-bars i:nth-child(3n) { animation-delay: .2s; height: 70%; }.mock-record-status.recording .mock-level-bars i:nth-child(2n) { animation-delay: .35s; height: 45%; }@keyframes mock-level { to { height: 100%; } }
.mock-audio-status { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 15px; margin-bottom: 14px; padding: 13px 16px; border: 1px solid #cbd5da; border-radius: 13px; color: #fff; background: #1a324b; }.mock-audio-status > div:first-child { display: flex; align-items: center; gap: 12px; }.mock-speaker { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 10px; color: #fff; background: var(--coral); font-size: 11px; }.mock-audio-status strong, .mock-audio-status small { display: block; }.mock-audio-status strong { font-size: 11px; }.mock-audio-status small { margin-top: 3px; color: #aebfca; font-size: 8px; }.mock-audio-track { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.15); }.mock-audio-track span { width: 0; height: 100%; display: block; background: var(--coral); }.mock-audio-status button { min-height: 40px; padding: 0 12px; border: 1px solid #ef8d7c; border-radius: 10px; color: #fff; background: rgba(232,106,88,.2); font-size: 10px; }
.mock-fib { line-height: 2.5; }.mock-gap { display: inline-block; min-width: 120px; margin: 2px 5px; vertical-align: middle; }.mock-gap select { width: 100%; min-height: 44px; padding: 0 34px 0 10px; border: 1px solid #9eafb9; border-radius: 8px; color: var(--navy); background: #fff; font-family: Arial, sans-serif; font-size: 14px; }.mock-gap-button { min-width: 112px; min-height: 44px; margin: 2px 5px; padding: 0 10px; border: 1px dashed #8195a3; border-radius: 8px; color: #31516a; background: #f7fafb; font-size: 12px; font-weight: 720; vertical-align: middle; }.mock-gap-button.active { color: #fff; border-style: solid; border-color: var(--coral); background: var(--coral); }
.mock-word-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 14px; border: 1px solid #d1d9dd; border-radius: 13px; background: #e3e8eb; }.mock-word-bank button { min-height: 44px; padding: 0 13px; border: 1px solid #bcc8ce; border-radius: 9px; color: #18334a; background: #fff; font-size: 12px; font-weight: 720; }.mock-word-bank button:disabled { opacity: .36; cursor: not-allowed; }
.mock-reorder { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }.mock-reorder li { min-width: 0; display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #cfd6da; border-radius: 12px; background: #fff; box-shadow: 0 4px 11px rgba(16,35,56,.035); }.mock-reorder li > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #415d73; font-size: 11px; font-weight: 820; }.mock-reorder p { min-width: 0; margin: 0; color: #1e3040; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.55; }.mock-reorder li > div { display: flex; gap: 5px; }.mock-reorder button { width: 40px; height: 40px; border: 1px solid #c9d2d7; border-radius: 9px; color: var(--navy); background: #f5f7f8; font-size: 16px; }.mock-reorder button:disabled { opacity: .3; cursor: default; }
.mock-exam-footer { min-width: 0; min-height: 68px; display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding: 10px 26px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid #c9d1d5; background: #fff; box-shadow: 0 -4px 15px rgba(16,35,56,.05); }.mock-exam-footer span { margin-right: auto; color: var(--muted); font-size: 9px; }.mock-exam-footer button { min-width: 116px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 10px; color: #fff; background: var(--coral); font-size: 12px; font-weight: 800; }.mock-exam-footer button:disabled { cursor: not-allowed; color: #8896a0; background: #d5dade; }
.mock-section-intro { grid-template-rows: auto minmax(0, 1fr) auto; }.mock-intro-body { width: min(720px, calc(100% - 36px)); align-self: center; justify-self: center; padding: 40px; overflow-y: auto; border: 1px solid #ced7dc; border-radius: 22px; background: #fff; box-shadow: 0 18px 42px rgba(16,35,56,.1); }.mock-intro-body > span { color: var(--coral-dark); font-size: 10px; font-weight: 850; letter-spacing: .12em; }.mock-intro-body h1 { margin: 8px 0 0; color: var(--navy); font-size: clamp(38px, 6vw, 64px); line-height: 1; letter-spacing: -.055em; }.mock-intro-body h2 { margin: 7px 0 0; color: var(--muted); font-size: 18px; font-weight: 650; }.mock-intro-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }.mock-intro-stats > div { padding: 16px; border-radius: 13px; background: #f0f3f4; }.mock-intro-stats strong, .mock-intro-stats span { display: block; }.mock-intro-stats strong { color: var(--navy); font-size: 24px; font-variant-numeric: tabular-nums; }.mock-intro-stats span { margin-top: 3px; color: var(--muted); font-size: 9px; }.mock-intro-body > p { margin: 17px 0 0; color: var(--coral-dark); font-size: 11px; font-weight: 760; }.mock-intro-body ul { margin: 15px 0 0; padding-left: 19px; color: #4e6070; font-size: 11px; line-height: 1.9; }

@media (max-width: 820px) {
  .mock-landing { min-height: auto; padding: 28px 24px 32px; }
  .mock-landing-hero { align-items: flex-start; }.mock-coverage { flex-basis: 180px; }
  .mock-exam-header { grid-template-columns: minmax(150px, 1fr) auto; gap: 10px; padding: 0 14px; }.mock-exam-meta { order: 3; grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); }.mock-exam-header { min-height: 112px; }.mock-exam-meta > div { min-width: 0; flex: 1; padding: 8px 10px; border-left: 0; border-right: 1px solid rgba(255,255,255,.12); }.mock-exam-meta > div:last-child { border-right: 0; }.mock-exit { justify-self: end; }
  .mock-question-body { width: calc(100% - 28px); padding-top: 15px; }
}

@media (max-width: 560px) {

  .mock-landing { padding: 23px 17px 27px; border-radius: 23px; }.mock-landing-hero { display: block; }.mock-landing-hero h2 { font-size: 37px; }.mock-coverage { width: 100%; margin-top: 18px; padding: 16px; }.mock-coverage strong { font-size: 29px; }
  .mock-trust-note { grid-template-columns: 1fr; gap: 3px; }
  .mock-device-check { grid-template-columns: 1fr; padding: 16px; }.mock-device-check button { width: 100%; }.mock-device-check > p { grid-column: 1; }
  .mock-mode-grid { grid-template-columns: 1fr; }.mock-mode-card p { min-height: 0; }
  .mock-last-result { align-items: flex-start; }
  .mock-exam-brand span { display: none; }.mock-exam-brand strong { font-size: 11px; }.mock-exam-header { min-height: 102px; }.mock-exit { min-width: 72px; }
  .mock-exam-meta span { font-size: 7px; }.mock-exam-meta strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; }.mock-exam-meta .timer strong { font-size: 15px; }
  .mock-instruction { min-height: 84px; padding: 11px 14px; }.mock-instruction > div:first-child { gap: 9px; }.mock-instruction > div:first-child > span { min-width: 44px; }.mock-instruction strong { font-size: 12px; }.mock-instruction p { font-size: 8px; }.mock-item-timer { min-width: 76px; padding: 7px 8px; }.mock-item-timer strong { font-size: 15px; }
  .mock-question-body { width: calc(100% - 22px); padding: 12px 0 15px; }.mock-passage, .mock-listen-stage, .mock-image-stage, .mock-unavailable { padding: 17px 14px; border-radius: 13px; }.mock-passage { font-size: 15px; line-height: 1.75; }.mock-passage.large { font-size: 17px; }.mock-passage.scroll { max-height: 33vh; }.mock-listen-stage { min-height: 145px; }.mock-listen-stage strong { font-size: 20px; }.mock-image-stage { min-height: 260px; }.mock-image-stage img { max-height: 36vh; }
  .mock-answer-label textarea { min-height: 122px; padding: 13px; }
  .mock-record-status { grid-template-columns: auto minmax(0, 1fr); padding: 13px; }.mock-level-bars { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .mock-audio-status { padding: 12px; }.mock-audio-status button { grid-column: 1 / -1; width: 100%; }
  .mock-fib { line-height: 2.7; }.mock-gap { min-width: 105px; margin-inline: 2px; }.mock-gap-button { min-width: 100px; margin-inline: 2px; }
  .mock-reorder li { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 11px; }.mock-reorder li > span { width: 30px; height: 30px; }.mock-reorder li > div { grid-column: 1 / -1; justify-content: flex-end; }
  .mock-exam-footer { min-height: 65px; gap: 8px; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); }.mock-exam-footer span { max-width: 190px; font-size: 8px; line-height: 1.35; }.mock-exam-footer button { min-width: 92px; min-height: 46px; padding: 0 15px; }
  .mock-intro-body { width: calc(100% - 24px); padding: 26px 20px; }.mock-intro-body h1 { font-size: 42px; }.mock-intro-stats strong { font-size: 19px; }
}

/* 题目优先：移除与右侧学习清单重复的顶部统计，并压缩手机端静态说明。 */
.top-stats { display: none; }

@media (min-width: 821px) {

  .account-menu { margin-left: auto; }
}

@media (max-width: 560px) {

  .practice-panel { padding-top: 10px; }
  .mobile-plan-next { gap: 6px; margin-bottom: 10px; padding: 6px 7px; }
  .mobile-plan-next small { display: none; }
  .mobile-plan-next span { font-size: 9px; }
  .mobile-plan-next strong { font-size: 12px; }
  .mobile-plan-next button { min-width: 52px; padding: 0 8px; }
  .mobile-plan-list-link { padding: 0 6px; }
  .question-heading { grid-template-columns: 100px minmax(0, 1fr); padding-bottom: 14px; }
  .question-number { font-size: 64px; }
  .instruction { font-size: 18px; }

  .practice-module, .we-panel, .di-panel { padding-top: 17px; }
  .practice-hero, .we-hero, .di-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding-bottom: 14px;
  }
  .practice-hero p, .we-hero p, .di-hero p, .we-note, .di-note { display: none; }
  .practice-overview, .we-overview, .di-overview {
    width: auto;
    min-width: 96px;
    max-width: 110px;
    margin-top: 0;
    padding: 8px 10px;
    text-align: center;
  }
  .practice-overview strong, .we-overview strong, .di-overview strong { font-size: 18px; }
  .practice-overview span, .we-overview span, .di-overview span, .di-overview small { display: none; }
  .practice-module-layout, .we-lesson-layout, .di-layout { margin-top: 14px; }
  .we-view-switch { margin-top: 12px; }
}

.drive-session-info { width: 100%; margin: 18px 0 0; color: #bccbd8; font-size: 11px; line-height: 1.65; text-align: center; }
.drive-repeat-status { align-items: flex-start; }
.drive-repeat-status span:first-child { flex: 0 0 auto; }
.drive-repeat-status span:last-child { text-align: right; overflow-wrap: anywhere; }
.drive-retry { min-height: 44px; margin-top: 12px; padding: 8px 18px; border: 1px solid #f3ac9e; border-radius: 12px; color: #fff; background: #914538; font: inherit; cursor: pointer; }
.drive-retry[hidden] { display: none; }
.drive-native-player { width: 100%; max-width: 620px; margin-top: 12px; color: #d3dce4; font-size: 11px; }
.drive-native-player summary { min-height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.drive-native-player audio { width: 100%; min-width: 0; height: 54px; margin-top: 8px; }
.drive-native-player p { margin: 10px 0 0; color: #bdcbd7; line-height: 1.7; }
.drive-setting-note { display: flex; align-items: center; color: var(--muted); font-size: 11px; line-height: 1.6; }
.drive-download { min-height: 46px; display: flex; align-items: center; justify-content: center; margin-top: 14px; padding: 10px 12px; border: 1px solid #d9ddd6; border-radius: 12px; color: var(--navy); background: #fff; text-decoration: none; font-size: 12px; font-weight: 750; text-align: center; }
.drive-download[aria-disabled="true"] { color: #718078; background: #f0f1ed; cursor: default; }
.drive-help { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.drive-help summary { min-height: 44px; display: flex; align-items: center; color: var(--navy); cursor: pointer; font-weight: 750; }
.drive-help p { margin: 7px 0; }
.drive-controls button:disabled { cursor: wait; opacity: .55; transform: none; }
.drive-controls button:focus-visible, .drive-retry:focus-visible, .drive-native-player summary:focus-visible { outline: 3px solid #ffd7b7; outline-offset: 4px; }
@media (min-width: 1200px) {
  .drive-session-info { grid-column: 1 / -1; grid-row: 4; }
  .drive-retry { grid-column: 1 / -1; grid-row: 5; }
  .drive-caption { grid-row: 6; }
  .drive-native-player { grid-column: 1 / -1; grid-row: 7; }
}
@media (max-width: 560px) {
  .drive-player-card { min-height: 475px; }
  .drive-session-info { font-size: 10px; }
  .drive-caption { margin-top: 12px; padding-top: 8px; }
  .drive-native-player { margin-top: 0; }
}

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

.wfd-mastery-summary { margin: 0 0 12px; font-size: 14px; line-height: 1.6; }
.wfd-mastery-summary strong { color: var(--mint); font-size: 18px; }
.wfd-mastery-summary small { display: block; font-size: 12px; color: #52645b; }

/* Practice controls stay usable on touch screens and with a keyboard. */
.practice-question-outline { align-self: start; }
.practice-question-outline summary, .practice-answer-area summary, .practice-swt-analysis summary { cursor: pointer; padding: 12px 0; font-size: 14px; }
.practice-answer-area > button { margin: 12px 8px 0 0; }
.practice-ro-list { padding-left: 24px; }
.practice-ro-list li p { margin: 0 0 10px; }
.practice-ro-list li button { min-height: 44px; padding: 8px 14px; margin-right: 8px; border: 1px solid #d7d7d7; border-radius: 8px; background: white; }
.practice-swt-analysis li, .practice-question-heading p { font-size: 13px; }
.practice-answer-area details { margin-top: 12px; }
.practice-answer-area :focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.practice-module-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "questions" "workspace"; gap: 18px; }
.practice-question-outline { padding: 0; border: 0; border-bottom: 1px solid var(--line); }
.practice-question-list { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); max-height: 240px; }
.practice-question-list-heading span, .practice-overview span { font-size: 12px; line-height: 1.5; }
.practice-fib-blank input { width: 150px; max-width: 100%; }
#wfdPracticePanel .question-number { font-size: clamp(48px, 6vw, 72px); line-height: 1; }

.guide-entry { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; color: #e1eaf0; font-size: 14px; white-space: nowrap; text-underline-offset: 4px; }
.practice-choices { min-width: 0; border: 0; margin: 0; padding: 0; }
.practice-choices legend { font-size: 18px; font-weight: 700; }
.practice-choices label { font-size: 16px; line-height: 1.6; font-weight: 400; display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin: 8px 0; cursor: pointer; }
.practice-choices input { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 4px 0 0; accent-color: var(--coral); }
.practice-choices label:has(input:checked) { border-color: var(--coral); background: #fff3ed; }
.practice-navigation { flex-wrap: wrap; }

/* WE uses the existing lesson layout; native fields keep drafts accessible. */
.we-writing-guide { margin: 16px 0; padding: 14px; border: 1px solid #dce4df; border-radius: 12px; line-height: 1.7; }
.we-writing-guide summary { cursor: pointer; font-weight: 650; }
.we-writing-checks { margin: 18px 0; padding: 14px; border: 1px solid #dce4df; border-radius: 12px; }
.we-writing-checks label { display: flex; align-items: flex-start; gap: 8px; padding: 10px 0; line-height: 1.5; }
.we-writing-checks input { flex: 0 0 auto; margin-top: 4px; width: 18px; height: 18px; }
#weLessonEssayDraft, #weLessonEssayRevision { min-height: 300px; line-height: 1.8; }

.word-audio-source-link { display: inline-block; margin-top: 8px; font-size: 12px; color: #53695e; }

/* Shared reading and touch rhythm, retaining the study room's navy identity. */
.app-shell > *, .we-workspace, .we-lesson-workspace { min-width: 0; }
.practice-panel, .progress-panel, .we-panel, .di-panel, .practice-module, .notebook-page { background: #fffdf9; box-shadow: var(--shadow); }
.audio-block { box-shadow: 0 6px 16px rgba(16,35,56,.14); }
.primary-button, .secondary-button, .we-view-switch button { min-height: 44px; font-size: 14px; }
.we-lesson-content p, .we-lesson-question, .we-lesson-model p, .practice-prompt { font-size: 16px; line-height: 1.85; }
.we-lesson-input, .we-writing-plan textarea, .we-lesson-select-wrap select { font-size: 16px; }
.we-lesson-help, .we-lesson-input-label, .we-lesson-select-wrap, .we-lesson-step, .we-lesson-progress span, .we-lesson-outline > p { font-size: 12px; line-height: 1.6; }
.word-popover-head { flex-wrap: wrap; }
.word-popover-head strong { min-width: 0; overflow-wrap: anywhere; }
.word-popover-actions { flex-wrap: wrap; }
.word-speak { width: auto; min-width: 44px; height: auto; min-height: 44px; padding: 6px 10px; }
.word-notebook-add { min-height: 44px; font-size: 12px; }
.word-gloss { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }

@media (max-width: 820px) {

  .phrase-notebook-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-right: 0; padding: 5px; overflow: visible; border-radius: 13px; }
  .phrase-notebook-tabs button { min-height: 44px; font-size: 13px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
}
@media (max-width: 560px) {

  .guide-entry { font-size: 12px; }
  .sync-status { padding: 7px 8px; font-size: 12px; }
  .account-menu { flex-basis: 130px; }
  .account-menu > span { font-size: 12px; }

  .practice-panel, .progress-panel, .we-panel, .di-panel, .practice-module, .notebook-page { padding: 18px 16px 24px; border-radius: 20px; }
  .mobile-plan-next { padding: 8px 10px; background: #f5f7f8; border-color: #dce3e7; box-shadow: none; }
  .mobile-plan-next span { font-size: 12px; }
  .mobile-plan-next strong, .mobile-plan-next button, .mobile-plan-list-link { font-size: 14px; }
  .question-heading { grid-template-columns: 82px minmax(0, 1fr); padding-bottom: 12px; }
  .question-number { font-size: 52px; }
  .instruction { font-size: 17px; line-height: 1.45; }
  .eyebrow, .eyebrow span:last-child, .instruction span, .audio-hint, .audio-time { font-size: 12px; }
  .waveform { height: 18px; margin: 5px 0; }
  .audio-block { padding: 13px 12px; border-radius: 16px; }
  .answer-actions > #submitBtn, .answer-actions > #revealAnswerBtn, .answer-actions > #relearnBtn, .answer-actions > #masteredBtn { min-width: 0; flex-basis: calc(50% - 6px); padding: 0 10px; }
  .answer-actions button, .mode-option { min-height: 46px; font-size: 14px; }
  .we-hero h2, .di-hero h2, .practice-hero h2 { font-size: 24px; }
  .we-overview, .di-overview, .practice-overview { min-width: 82px; padding: 8px; box-shadow: none; }
  .we-overview span, .di-overview span, .practice-overview span { display: block; font-size: 12px; }
  .we-lesson-outline { padding-bottom: 14px; }
  .we-lesson-outline > p, .we-lesson-outline .we-outline-title { display: none; }
  .we-view-switch { display: flex; width: 100%; }
  .we-view-switch button { flex: 1; font-size: 14px; }
  .we-lesson-heading { display: block; }
  .we-lesson-heading > div:first-child { min-width: 0; }
  .we-lesson-heading h2 { font-size: 22px; overflow-wrap: anywhere; }
  .we-lesson-heading p { font-size: 14px; line-height: 1.7; text-align: left; }
  .we-lesson-progress { display: flex; align-items: center; gap: 8px; width: fit-content; min-width: 56px; margin-top: 10px; padding: 6px 10px; }
  .we-lesson-progress strong { font-size: 17px; }
  .we-lesson-progress span { max-width: none; margin: 0; }
  .we-lesson-steps { margin: 12px 0 0; padding-bottom: 8px; }
  .we-lesson-content { padding: 16px 14px; }
  .we-lesson-actions { gap: 10px; }
  .we-lesson-actions button { white-space: normal; padding: 10px; }
  .di-image-stage { min-height: 240px; }
  .phrase-notebook-empty, .notebook-hero p { font-size: 14px; }
}

/* DI originals: native image pixels, graph-specific browsing and accessible zoom. */
.di-filter-label { display: block; margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.di-figure-filter { width: 100%; min-height: 44px; margin-bottom: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); font: inherit; font-size: 16px; }
.di-category-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 7px 3px; cursor: pointer; color: var(--navy); font-size: 14px; font-weight: 700; }
.di-category-group > summary::before { content: '›'; transition: transform .15s; }
.di-category-group[open] > summary::before { transform: rotate(90deg); }
.di-category-group > summary span { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.di-category-help { margin: 0 3px 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.di-category-group + .di-category-group { margin-top: 4px; padding-top: 4px; }
.di-image-stage { min-height: 0; padding: clamp(8px, 2vw, 18px); }
.di-source-image { display: block; width: 100%; height: auto; max-width: 100%; max-height: 650px; object-fit: contain; }
.di-source-image[hidden] { display: none; }
.di-image-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 18px; }
.di-image-tools > span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.di-image-tools button { min-height: 44px; flex-shrink: 0; }
.di-image-dialog { width: min(1200px, calc(100vw - 32px)); max-width: calc(100vw - 16px); height: min(900px, calc(100dvh - 32px)); max-height: calc(100dvh - 16px); padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #faf9f5; color: var(--navy); overflow: hidden; }
.di-image-dialog[open] { display: flex; flex-direction: column; }
.di-image-dialog::backdrop { background: rgb(15 32 48 / .65); }
.di-image-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.di-image-dialog-header h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.di-image-dialog button { min-width: 44px; min-height: 44px; }
.di-image-zoom-tools { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.di-image-zoom-tools output { min-width: 70px; text-align: center; font-size: 14px; }
.di-image-dialog-help { margin: 10px 0; color: var(--muted); font-size: 12px; }
.di-image-viewport { flex: 1; min-height: 0; min-width: 0; padding: 16px; overflow: auto; overscroll-behavior: contain; background: white; border: 1px solid var(--line); border-radius: 10px; }
.di-image-viewport img { display: block; height: auto; max-width: none; margin: 0 auto; }
.di-image-dialog :focus-visible, .di-category-group > summary:focus-visible, .di-figure-filter:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
@media (max-width: 600px) {
  .di-image-tools { align-items: flex-start; flex-direction: column; }
  .di-image-dialog { padding: 10px; }
  .di-image-dialog-header h2 { font-size: 16px; }
  .di-source-image { max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .di-category-group > summary::before { transition: none; } }

.di-browse-controls { margin-top: 18px; max-width: 360px; }
.di-browse-controls .di-figure-filter { margin-bottom: 0; }

.di-question-button { grid-template-columns: 36px minmax(0, 1fr); }
.di-question-button > span { grid-column: 1; grid-row: 1 / 6; white-space: nowrap; font-size: 16px; }
.di-question-button > strong, .di-question-button > small, .di-question-button > b { grid-column: 2; min-width: 0; }
.di-question-button > em { grid-column: 2; grid-row: auto; font-size: 11px; }
@media (max-width: 480px) { .di-category-buttons { grid-template-columns: minmax(0, 1fr); } }

/* Source-backed FIB study supplements. */
.fib-study { margin-top: 20px; }
.fib-material-status, .fib-source-note { color: var(--muted); font-size: 14px; line-height: 1.7; }
.fib-study-details { border: 1px solid #c9ded4; border-radius: 14px; background: #f1f8f4; padding: 0 16px 12px; }
.fib-study summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 16px; }
.fib-answer-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.fib-answer-list li { display: grid; gap: 4px; padding: 8px 12px; background: #fff; border-radius: 8px; }
.fib-answer-list span { font-size: 12px; color: var(--muted); }
.fib-answer-list strong { font-size: 16px; overflow-wrap: anywhere; }
.fib-note-list { list-style: none; padding: 0; }
.fib-note-list li { padding: 12px 0; border-top: 1px solid #dce7df; }
.fib-note-list p { margin: 8px 0 0; font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.fib-translation p { font-size: 14px; line-height: 1.8; }
#practiceCompleted { white-space: nowrap; }

/* HIW: selection updates do not interrupt the source recording. */
.practice-hiw-passage, .practice-hiw-preview { font-size: 17px; line-height: 2; overflow-wrap: anywhere; }
.practice-hiw-passage .hiw-word { display: inline-block; min-width: 0; min-height: 44px; padding: 4px 3px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: inherit; font: inherit; line-height: 24px; cursor: pointer; touch-action: manipulation; }
.practice-hiw-passage .hiw-word:hover { background: #f3e9d6; }
.practice-hiw-passage .hiw-word[aria-pressed="true"] { background: #ffe2aa; color: #443112; border-color: #b67d24; }
.practice-hiw-passage .hiw-word:focus-visible { outline: 2px solid #183549; outline-offset: 1px; }
.practice-hiw-passage .hiw-word:disabled { opacity: 1; cursor: default; }
.practice-hiw-passage .hiw-word.hiw-correct { background: #dfedde; border-color: #42634b; color: #274330; }
.practice-hiw-passage .hiw-word.hiw-false { background: #f9ded7; border-color: #a44231; color: #812e20; text-decoration: line-through; }
.practice-hiw-passage .hiw-word.hiw-missed { border: 1px dashed #8b6119; background: #fff2d7; color: #5a3c0d; }
.hiw-selection-count, .hiw-legend { font-size: 14px; color: #536069; }
.speaking-study { display: grid; gap: 14px; min-width: 0; }
.speaking-study p { margin: 0; }
.speaking-material-status { color: #446458; font-size: 14px; }
.speaking-situation { font-size: 18px; line-height: 1.8; }
.speaking-translation { color: #5b666c; font-size: 16px; line-height: 1.75; }
.speaking-reference { border-top: 1px solid #dce3dc; padding-top: 6px; min-width: 0; }
.speaking-reference summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-weight: 650; }
.speaking-reference summary:focus-visible { outline: 2px solid #28536a; outline-offset: 3px; border-radius: 4px; }
.speaking-reference-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.9; padding: 10px 0; }
.speaking-source-caption { color: #606b70; font-size: 13px; line-height: 1.65; }
.speaking-study .practice-source-audio { min-width: 0; }
.speaking-study audio { width: 100%; max-width: 100%; min-width: 0; }

/* Source-linked notes: compact disclosures, readable translations, no learner writes. */
.study-resources { margin: 20px 0; min-width: 0; color: var(--text, #233449); }
.study-resources .study-meta, .study-meta { color: #576875; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.study-disclosure { border-top: 1px solid #dce3dd; padding: 0; }
.study-disclosure > summary, .speaking-coach > summary { min-height: 44px; padding: 12px 4px; cursor: pointer; font-weight: 650; line-height: 1.5; }
.study-disclosure-body { padding: 0 4px 16px; min-width: 0; }
.study-disclosure-body p, .study-disclosure-body li { font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.study-disclosure-body ul, .study-disclosure-body ol { padding-left: 22px; }
.study-disclosure-body li + li { margin-top: 10px; }
.study-disclosure-body .study-translation { font-size: 14px; color: #52616c; line-height: 1.85; margin-top: 6px; }
.study-disclosure-body .study-meta { font-size: 12px; }
.study-frame { background: #f0f4ee; padding: 14px; border-radius: 12px; }
.study-slot { background: #e1ece0; color: #234b3c; padding: 1px 3px; box-decoration-break: clone; }
.study-caution { padding: 12px 14px; background: #fff4dd; border-left: 3px solid #b17623; border-radius: 6px; }
.answer-reveal .study-chunks strong, .answer-reveal .study-chunks .study-pause { display: inline; margin: 0; font-size: inherit; line-height: inherit; }
.study-pause { color: #97634f; padding: 0 3px; font-weight: 700; }
.study-resources blockquote { border-left: 3px solid #829c87; margin: 12px 0; padding: 8px 14px; overflow-wrap: anywhere; }
.study-resources a { text-underline-offset: 3px; }
.study-resources summary:focus-visible, .speaking-coach summary:focus-visible { outline: 3px solid #376957; outline-offset: 2px; border-radius: 4px; }
.rl-preview { white-space: pre-wrap; }
.study-guide-page { margin: 0; background: #faf8f3; color: #233449; }
.study-guide-main { max-width: 1140px; margin: 0 auto; padding: 32px 24px 60px; }
.study-guide-main h1 { font-family: Georgia, 'Songti SC', serif; font-size: clamp(26px, 4vw, 42px); line-height: 1.25; }
.study-guide-main h2 { font-size: 22px; margin: 32px 0 16px; }
.study-guide-main p { line-height: 1.8; overflow-wrap: anywhere; }
.study-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.study-guide-card { border: 1px solid #dfe5dd; border-radius: 18px; padding: 20px; background: #fffefa; min-width: 0; }
.study-guide-card h3 { margin: 0 0 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.study-guide-card h3 span { font-size: 14px; font-weight: 500; }
.study-guide-card .secondary-button, .study-guide-main > .secondary-button { display: inline-flex; align-items: center; min-height: 44px; }
.study-guide-main footer { margin-top: 32px; line-height: 2.5; }
@media(max-width: 900px) { .study-guide-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 600px) {
 .study-guide-grid, .rl-note-grid { grid-template-columns: minmax(0,1fr); }
 .study-guide-main { padding: 20px 16px 40px; }
 .study-guide-card { padding: 16px; }
 .rl-coach-actions { flex-wrap: wrap; }
 .rl-coach-actions button { white-space: normal; min-height: 44px; }
 .study-frame { padding: 12px; }
}