/* PTE Study Studio — shared tokens, shell, surfaces, then responsive variants.
   Exercise-specific content styles remain in styles.css. */
:root {
  color-scheme: light;
  --navy: #173449;
  --navy-2: #244358;
  --paper: #f8f6f2;
  --paper-2: #ffffff;
  --ink: #19364b;
  --muted: #64717b;
  --line: #e3e5e4;
  --coral: #c64e3f;
  --coral-dark: #b74133;
  --coral-soft: #fdf0eb;
  --mint: #4d7964;
  --sage-soft: #edf3ed;
  --sand: #a57e3c;
  --danger: #b74133;
  --shadow: 0 5px 24px rgba(23,52,73,.035);
  --studio-radius: 18px;
  --studio-sidebar: 216px;
  --studio-serif: Georgia, 'Songti SC', 'Noto Serif CJK SC', serif;
}
html, body { background: var(--paper); }
body { font-size: 15px; line-height: 1.55; background-image: none; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, summary { min-height: 44px; }
/* Inline word pronunciation is part of the text, not a toolbar control. */
.word-token { min-height: 0; }
.skip-main-link, .daily-report-heading .secondary-button, .question-bank-toggle { min-height: 44px; }
body.studio textarea, body.studio select { font-size: 16px; }
button { font-weight: 600; }
button:disabled { cursor: not-allowed; }
:where(button, a, input, textarea, select, summary):focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px; }
textarea { background: #fff; border-color: #cbd3d8; border-radius: 10px; line-height: 1.8; }
textarea::placeholder, input::placeholder { color: #737f89; }
img { max-width: 100%; }
.studio-art { display: block; width: 100%; height: auto; object-fit: contain; background: var(--paper); border-radius: 12px; }
.primary-button, .secondary-button { min-height: 46px; padding: 10px 18px; border-radius: 9px; font-size: 14px; font-weight: 650; line-height: 1.4; box-shadow: none; }
.primary-button { background: var(--coral); border-color: var(--coral); color: #fff; }
.primary-button:hover { background: var(--coral-dark); border-color: var(--coral-dark); transform: none; }
.secondary-button { background: #fff; border-color: #cbd3d8; color: var(--navy); }
.secondary-button:hover { background: var(--paper); border-color: #8c9ca8; }
.secondary-button:disabled { color: #727d84; }
.section-label { font-weight: 650; font-size: 17px; letter-spacing: 0; }
.studio-page-title, .auth-copy h2, .we-hero h2, .di-hero h2, .practice-hero h2, .drive-hero h2, .notebook-hero h2 { font-family: var(--studio-serif); font-weight: 700; letter-spacing: .015em; }

/* A single navigation DOM serves sidebar, compact rail, and bottom navigation. */
.topbar { display: flex; align-items: center; min-height: 88px; gap: 16px; max-width: 1800px; padding: 16px 28px; margin: 0 0 0 var(--studio-sidebar); color: var(--ink); border-bottom: 1px solid var(--line); }
.brand { display: grid; grid-template-columns: 38px 1fr; gap: 0 9px; align-items: center; white-space: nowrap; }
.topbar .brand { position: fixed; top: 29px; left: 22px; z-index: 32; width: 184px; color: #fff; }
.brand-mark { grid-row: 1 / 3; width: 36px; height: 38px; display: block; color: #f18471; background: none; transform: none; box-shadow: none; border-radius: 0; }
.brand-mark svg { width: 36px; height: 36px; }
.brand-name { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; }
.brand small { display: block; grid-column: 2; margin: 4px 0 0; font-size: 8px; letter-spacing: .13em; color: #b5c4cd; }
.studio-page-title { font-size: 29px; margin: 0 auto 0 0; line-height: 1.3; }
.study-tabs { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; display: flex; flex-direction: column; gap: 10px; width: var(--studio-sidebar); padding: 130px 12px 140px; overflow-y: auto; background: var(--navy); border: 0; border-radius: 0; box-shadow: none; }
.study-tab { display: flex; align-items: center; gap: 20px; flex-shrink: 0; width: 100%; min-height: 56px; padding: 12px 20px; color: #c8d2d9; background: transparent; border: 0; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; font-size: 17px; font-weight: 550; transition: background .15s; }
.study-tab svg { width: 23px; height: 23px; flex: 0 0 23px; }
.study-tab:hover { background: rgba(255,255,255,.07); color: #fff; }
.study-tab.active { background: #355166; color: #fff; border-left-color: #f18471; box-shadow: none; }
.template-nav-link { text-decoration: none; cursor: pointer; }
.topbar .study-quick-links { position: fixed; z-index: 32; left: 32px; bottom: 30px; display: grid; }
.topbar .study-quick-links a { display: inline-flex; align-items: center; min-height: 44px; color: #d6e0e6; font-size: 14px; text-decoration: none; }
.topbar .study-quick-links a:hover { color: #fff; text-decoration: underline; }
.sync-status { border: 0; border-radius: 0; background: transparent; color: #53675e; padding: 8px; font-size: 12px; max-width: 190px; white-space: normal; }
.studio .sync-status { display: inline-flex; }
.account-menu { margin: 0; padding: 0 0 0 12px; max-width: 220px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
.account-menu > span { color: var(--muted); font-size: 12px; }
.account-menu button { color: var(--ink); background: transparent; border-radius: 8px; font-size: 12px; }
.account-menu button:hover { background: #ebece8; }
.header-action-icon { width: 19px; height: 19px; }
.quiet-button { min-height: 44px; color: var(--muted); font-size: 12px; }
.quiet-button:hover { color: var(--coral); }
.top-stats { display: none; }
.app-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; max-width: 1800px; margin: 0 0 0 var(--studio-sidebar); padding: 0 24px 36px; align-items: start; }
.app-shell > * { min-width: 0; }
.section-modules { display: flex; align-items: stretch; flex-wrap: nowrap; gap: 18px; grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.section-modules button { flex: 0 0 auto; min-height: 58px; padding: 12px 8px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--ink); background: transparent; font-size: 15px; font-weight: 550; white-space: nowrap; box-shadow: none; }
.section-modules button:hover { color: var(--coral); background: var(--coral-soft); }
.section-modules button.active { color: var(--coral); border-color: var(--coral); background: transparent; box-shadow: none; }
.studio-mobile-progress, .wfd-mobile-art { display: none; }

/* WFD: a focused answer surface with a compact, genuine audio visualization. */
.practice-panel, .progress-panel, .we-panel, .di-panel, .practice-module, .notebook-page, .drive-panel, .mock-panel { border: 1px solid #ececeb; border-radius: var(--studio-radius); background: #fff; box-shadow: var(--shadow); }
.practice-panel { min-height: 0; padding: 28px 26px; overflow: visible; }
.question-heading > div { display: block; min-width: 0; }
.question-heading::after, .study-plan::before { display: none; }
.question-heading { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 20px; align-items: center; padding: 0 0 24px; border: 0; }
#wfdPracticePanel .question-heading .question-number { margin: 6px 0 0; font-family: var(--studio-serif); color: #e77461; font-size: 58px; letter-spacing: -.035em; line-height: 1; font-weight: 600; }
.eyebrow { display: flex; flex-wrap: wrap; gap: 4px; color: var(--muted); font-size: 12px; letter-spacing: 0; }
.eyebrow-mark { display: none; }
.eyebrow span:last-child { font-size: 12px; color: var(--muted); }
.instruction { margin: 0; padding-left: 20px; border-left: 1px solid #d6dcdf; font-size: 23px; font-weight: 650; line-height: 1.5; letter-spacing: 0; }
.instruction span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; font-weight: 400; }
.section-block { margin-top: 26px; }
.audio-block { margin-top: 0; padding: 18px 20px 14px; border: 0; border-radius: 11px; background: var(--navy); box-shadow: none; }
.audio-heading { display: none; }
.audio-player { display: grid; grid-template-columns: 60px minmax(0, 1fr) 54px; gap: 18px; align-items: center; border: 0; border-radius: 0; padding: 0; background: transparent; }
.audio-play { width: 60px; height: 60px; min-height: 60px; border-radius: 50%; background: #f18471; color: #173449; box-shadow: none; }
.audio-play:hover { background: #f6a08f; transform: none; }
.audio-play-icon { border-top-width: 10px; border-bottom-width: 10px; border-left-width: 15px; margin-left: 3px; }
.audio-play-label, .audio-player.is-playing .audio-play-label { display: none; }
.audio-player.is-playing .audio-play-icon { width: 14px; height: 19px; border-left-width: 5px; border-right-width: 5px; margin-left: 0; }
.audio-track { display: flex; flex-direction: column; }
.waveform { order: 0; display: flex; justify-content: center; align-items: center; gap: 3px; height: 34px; margin: 0 0 -6px; overflow: hidden; }
.waveform::before { background: rgba(255,255,255,.12); }
.waveform i { flex: 1 1 3px; max-width: 4px; background: #f18471; }
.audio-track .audio-seek { order: 1; flex: 0 0 44px; --coral: #f18471; }
.audio-time { order: 2; margin: -5px 0 0; color: #ecf1f4; font-size: 12px; }
.audio-speed { min-width: 54px; height: 44px; padding: 8px; border: 1px solid #708695; border-radius: 8px; background: rgba(255,255,255,.03); color: #fff; font-size: 15px; }
.audio-speed:focus-visible, .audio-play:focus-visible, .audio-seek:focus-visible { outline-color: #ffe0b9; }
.answer-label-row { align-items: center; gap: 12px; }
#answerInput { min-height: 112px; margin-top: 12px; padding: 14px 16px; border-radius: 9px; }
.answer-utilities { gap: 12px; }
.answer-block { padding-top: 0; border: 0; }
.phrase-notebook-trigger { color: var(--muted); background: transparent; border-color: var(--line); min-height: 44px; font-size: 12px; }
.answer-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.answer-actions > button { padding: 10px 8px; }
.answer-actions .mode-switch { grid-column: span 2; display: flex; }
.mode-switch { border: 0; padding: 3px; gap: 3px; border-radius: 10px; background: #f0f1f0; }
.mode-option { flex: 1; min-height: 44px; padding: 8px; border-radius: 8px; font-size: 13px; }
.mode-option.active { background: var(--navy); color: #fff; box-shadow: none; }
.feedback-block { padding: 0; border: 0; }
.feedback { border-radius: 10px; box-shadow: none; line-height: 1.8; }
.feedback.empty { min-height: 130px; display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--muted); font-size: 14px; background: #f8f8f6; border: 0; }
.daily-report-block { padding-top: 22px; border-top: 1px solid var(--line); }
.daily-report-heading { flex-wrap: wrap; gap: 8px; }
.daily-report { font-size: 13px; }

/* The plan is reparented into a native modal drawer on compact displays. */
.progress-panel { display: block; position: static; max-height: none; overflow: visible; min-height: 0; padding: 14px 18px 20px; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.study-plan { overflow: visible; box-shadow: none; margin: 22px 0 0; padding: 20px 0 22px; border: 0; border-radius: 0; background: transparent; }
.plan-heading { flex-wrap: wrap; gap: 5px 8px; margin-bottom: 16px; }
.plan-heading > strong { font-family: var(--studio-serif); font-size: 22px; letter-spacing: .03em; }
.plan-heading > span { color: var(--muted); font-size: 12px; }
.plan-edit-button { margin-left: auto; min-height: 44px; font-size: 12px; background: transparent; color: var(--muted); border-color: var(--line); }
.plan-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; background: transparent; border: 0; }
.plan-counts > div { background: transparent; border-radius: 0; padding: 0 10px; text-align: center; border: 0; }
.plan-counts > div + div { border-left: 1px solid var(--line); }
.plan-counts span { font-size: 13px; color: var(--muted); }
.plan-counts strong { font-size: 29px; color: var(--navy); font-family: var(--studio-serif); }
.plan-progress { margin-top: 20px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.plan-progress > div:first-child { font-size: 13px; }
.plan-progress-bar { height: 9px; background: #e6e9e5; }
.plan-progress-bar span { background: #7d9e87; }
#planHint, #planSettingsSummary { font-size: 12px; line-height: 1.7; color: var(--muted); }
.plan-rules { margin-top: 4px; }
.plan-rules summary { display: flex; align-items: center; font-size: 12px; color: var(--muted); }
.plan-rules p { font-size: 13px; }
.studio-mastery-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 0; margin: 0 0 16px; border-block: 1px solid var(--line); }
.wfd-mastery-summary { margin: 0; color: var(--ink); font-size: 13px; }
.wfd-mastery-summary strong { display: inline; margin-left: 4px; color: var(--mint); font-family: var(--studio-serif); font-size: 29px; line-height: 1.4; }
.wfd-mastery-summary small { font-size: 11px; color: var(--muted); line-height: 1.6; }
.progress-panel > .list-heading { margin-top: 0; }
.list-heading h2 { font-family: var(--studio-serif); font-size: 22px; letter-spacing: .02em; }
.list-heading small { color: var(--muted); font-size: 12px; }
.list-heading button { min-width: 44px; min-height: 44px; font-size: 12px; }
.prediction-scope { margin-block: 10px 16px; font-size: 12px; line-height: 1.7; }
.question-list { max-height: 520px; overflow-y: auto; overscroll-behavior: contain; border: 0; padding: 0; background: transparent; border-radius: 0; }
.question-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.question-chip { position: relative; display: flex; flex-direction: column; gap: 3px; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; width: 100%; aspect-ratio: 1; padding: 5px 2px; border: 1px solid #e3e6e5; border-radius: 50%; background: #f4f5f3; color: var(--ink); box-shadow: none; }
.question-chip .question-number { margin: 0; letter-spacing: 0; font-size: 13px; font-family: inherit; line-height: 1; font-weight: 500; color: inherit; }
.question-chip .question-difficulty { display: block; flex-shrink: 0; margin: 0; font-size: 10px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.question-chip.current .question-difficulty { color: #fff; }
.question-chip .question-status { position: absolute; top: -3px; right: -2px; color: var(--mint); font-size: 11px; background: #fff; border-radius: 4px; padding: 0 2px; }
.question-chip.new:not(.current) { background: #f4f5f3; color: var(--ink); border-color: #e3e6e5; }
.question-chip.current { color: #fff; background: var(--coral); border-color: var(--coral); box-shadow: none; }
.question-chip.current .question-status { display: none; }
.question-chip.correct:not(.current) { color: #35674c; background: var(--sage-soft); border-color: #c6d7c8; }
.question-chip.wrong:not(.current) { color: #a3382d; background: #fff0ed; }
.queue-heading, .queue-heading strong { font-size: 12px; }
.study-history { margin-top: 20px; }
.study-history summary { min-height: 44px; font-size: 14px; }
.studio-plan-drawer { position: fixed; inset: 0 0 0 auto; width: min(460px, 100%); height: 100dvh; max-height: 100dvh; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 20px 0 0 20px; color: var(--ink); background: var(--paper); overscroll-behavior: contain; }
.studio-plan-drawer::backdrop { background: rgba(17,36,49,.4); }
.studio-drawer-heading { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(16px, env(safe-area-inset-top)) 20px 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
.studio-drawer-heading h2 { margin: 0; font-family: var(--studio-serif); font-size: 22px; }
.studio-drawer-heading button { display: grid; place-items: center; width: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: #fff; }
.studio-drawer-heading svg { width: 22px; height: 22px; }
.studio-plan-drawer .progress-panel { padding: 18px 24px max(30px, env(safe-area-inset-bottom)); }
.studio-plan-drawer .question-list { max-height: none; }
.studio-drawer-open { overflow: hidden; }

/* Shared learning modules: flatter reading/writing surfaces and a quiet art accent. */
.we-panel, .di-panel, .practice-module, .notebook-page, .drive-panel, .mock-panel { padding: 26px 28px; min-height: 0; }
.practice-hero, .we-hero, .di-hero, .drive-hero, .notebook-hero { display: flex; align-items: center; gap: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.practice-hero > div:first-of-type, .we-hero > div:first-of-type, .di-hero > div:first-of-type, .drive-hero > div:first-of-type, .notebook-hero > div:first-of-type { flex: 1; min-width: 0; }
.module-art { order: 2; width: 150px; flex: 0 0 150px; height: 100px; object-fit: cover; border-radius: 12px; }
.practice-hero h2, .we-hero h2, .di-hero h2, .drive-hero h2, .notebook-hero h2 { font-size: 30px; line-height: 1.4; }
.practice-hero p, .we-hero p, .di-hero p, .drive-hero p, .notebook-hero p { font-size: 13px; line-height: 1.8; color: var(--muted); }
.practice-overview, .we-overview, .di-overview, .notebook-overview, .drive-plan-summary { padding: 12px 14px; border: 1px solid var(--line); background: #f5f7f4; color: var(--ink); border-radius: 10px; box-shadow: none; }
.practice-overview span, .we-overview span, .di-overview span, .di-overview small, .notebook-overview span, .drive-plan-summary span { color: var(--muted); font-size: 12px; }
.practice-overview strong, .we-overview strong, .di-overview strong, .drive-plan-summary strong { color: var(--ink); font-family: var(--studio-serif); font-size: 26px; }
.we-note, .di-note, .notebook-note { border-radius: 0; background: #f3f7f2; font-size: 13px; }
.we-lesson-content, .we-practice-card, .we-workspace, .practice-prompt, .practice-answer-area, .di-workspace { box-shadow: none; }
.we-lesson-content { background: #fff; border-color: var(--line); border-radius: 10px; padding: 24px; }
.we-lesson-heading h2, .practice-question-heading h2 { font-family: inherit; font-weight: 650; letter-spacing: 0; font-size: 25px; line-height: 1.4; }
.practice-prompt { background: #fafaf8; font-size: 17px; line-height: 1.9; border-radius: 10px; }
.practice-question-heading p, .we-lesson-heading p { font-size: 15px; line-height: 1.8; }
.practice-answer-area { font-size: 16px; }
.practice-module-layout { grid-template-columns: minmax(0, 1fr) 230px; grid-template-areas: 'workspace questions'; gap: 28px; }
.practice-question-outline { border: 0; border-left: 1px solid var(--line); padding: 0 0 0 20px; }
.practice-question-list { grid-template-columns: repeat(4, minmax(44px, 1fr)); max-height: 65vh; gap: 7px; }
.practice-question-chip { min-width: 44px; min-height: 44px; border-radius: 10px; }
.we-lesson-layout { grid-template-columns: minmax(0, 1fr) 230px; }
.we-lesson-workspace { grid-column: 1; grid-row: 1; }
.we-lesson-outline { grid-column: 2; grid-row: 1; padding: 0 0 0 20px; border-right: 0; border-left: 1px solid var(--line); }
.we-lesson-list { max-height: 70vh; overflow-y: auto; }
.we-lesson-list button, .we-lesson-step { min-height: 44px; }
.we-view-switch { border-color: var(--line); border-radius: 10px; background: #edf0ed; box-shadow: none; }
.we-view-switch button { border-radius: 7px; }
.we-view-switch button.active { background: var(--navy); box-shadow: none; }
.di-layout { grid-template-columns: minmax(0, 1fr) 230px; }
.di-outline { grid-column: 2; grid-row: 1; padding: 0 0 0 20px; border: 0; border-left: 1px solid var(--line); }
.di-workspace { grid-column: 1; grid-row: 1; }
.di-question-button { min-height: 44px; }
.drive-player-card { background: var(--navy); box-shadow: none; border-radius: 14px; }
.drive-settings-card, .drive-list-card { background: #fafaf8; box-shadow: none; border: 1px solid var(--line); border-radius: 12px; }
.drive-play { background: #f18471; color: var(--navy); box-shadow: none; }
.drive-session-info, .drive-native-player p { font-size: 13px; }
.drive-seek, .drive-progress .audio-seek { --coral: #f18471; }
.phrase-notebook-tabs { background: #edf0ed; border-radius: 10px; box-shadow: none; }
.phrase-notebook-tabs button { min-height: 44px; font-size: 13px; border-radius: 8px; }
.phrase-notebook-word, .notebook-study-card { box-shadow: none; border-color: var(--line); border-radius: 12px; }
.mock-panel { grid-column: 1 / -1; }
.mock-landing { padding: 0; min-height: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.mock-landing-hero h2 { font-family: var(--studio-serif); font-size: 34px; line-height: 1.4; letter-spacing: 0; }
.mock-coverage { color: var(--navy); background: var(--sage-soft); border: 1px solid #d5dfd5; border-radius: 12px; box-shadow: none; }
.mock-coverage strong { color: var(--navy); font-family: var(--studio-serif); }
.mock-coverage span, .mock-coverage small { color: #4b6353; }
.mock-mode-card, .mock-mode-card.recommended, .mock-device-check { background: #fafaf8; border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.mock-mode-card.recommended button { background: var(--coral); }
.mock-mode-card h3 { font-size: 25px; }
.mock-mode-card p, .mock-mode-card ul, .mock-device-check small { font-size: 13px; }
.mock-mode-card button { border-radius: 9px; font-size: 14px; }
.mock-exam-shell { color: var(--ink); background: var(--paper); }
.mock-intro-body { border-color: var(--line); border-radius: 18px; box-shadow: none; }
.mock-intro-body h1 { font-family: var(--studio-serif); letter-spacing: -.025em; }
.mock-intro-stats > div { background: var(--sage-soft); border-radius: 10px; }
.mock-hero, .mock-setup, .mock-config-card, .mock-instruction { box-shadow: none; }
.mock-hero h1, .mock-hero h2 { font-family: var(--studio-serif); }
.mock-exam-footer { bottom: 0; }
.plan-settings-dialog, .phrase-notebook-dialog { border-color: var(--line); border-radius: 18px; background: var(--paper); }
.plan-settings-card { background: var(--paper); }
#planSettingsForm #resetBtn { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 10px 0; color: var(--coral); }
#planSettingsForm #resetBtn .header-action-label { display: inline; }

/* Login uses the full brand artwork without embedding any interface in it. */
.auth-view { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: 0; max-width: 1400px; min-height: 100dvh; margin: auto; padding: 50px; background: var(--paper); }
.auth-artwork { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-right: 40px; }
.auth-illustration { border-radius: 0; width: 100%; }
.auth-art-caption { padding: 20px 40px; }
.auth-art-caption span { font-family: var(--studio-serif); font-size: 32px; letter-spacing: .06em; }
.auth-art-caption p { color: var(--muted); font-size: 15px; }
.auth-card { width: 100%; max-width: 440px; padding: 38px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.auth-brand { font-size: 20px; }
.auth-copy { margin-top: 30px; }
.auth-copy h2 { font-size: 32px; }
.auth-copy p { font-size: 14px; }
.auth-tabs { background: #eff1ed; border-radius: 9px; }
.auth-tabs button { min-height: 44px; font-size: 14px; border-radius: 7px; }
.auth-tabs button.active { background: var(--navy); box-shadow: none; }
.auth-form label { font-size: 14px; }
.auth-form input { border-radius: 9px; min-height: 50px; }
.auth-message, .auth-note { font-size: 12px; }
.auth-submit { min-height: 50px; }
.studio-document { color: var(--ink); background: var(--paper); }
.studio-document h1, .studio-document h2 { font-family: var(--studio-serif); }
.studio-document a { color: var(--coral-dark); text-underline-offset: 3px; }
.studio-document > a, .studio-document .guide-action { display: inline-flex; align-items: center; min-height: 44px; }
.studio-document .guide-card { border-color: var(--line); border-radius: 12px; box-shadow: none; background: #fff; }

@media (min-width: 1800px) { .app-shell { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --studio-sidebar: 84px; }
  .topbar .brand { top: 26px; left: 24px; width: 38px; display: block; }
  .topbar .brand-name, .topbar .brand small { display: none; }
  .study-tabs { padding: 104px 6px 96px; gap: 14px; }
  .study-tab { flex-direction: column; gap: 6px; min-height: 70px; padding: 10px 3px; font-size: 12px; border-left-width: 2px; }
  .topbar .study-quick-links { left: 10px; bottom: 18px; width: 64px; }
  .topbar .study-quick-links a { font-size: 12px; text-align: center; }
  .account-menu > span { max-width: 60px; }
}
@media (max-width: 1199px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .studio-mobile-progress { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 14px; grid-column: 1 / -1; padding: 16px 20px; border: 1px solid #ececeb; border-radius: 14px; background: #fff; }
  .studio-mobile-progress > div { border-right: 1px solid var(--line); }
  .studio-mobile-progress span { display: block; color: var(--muted); font-size: 12px; }
  .studio-mobile-progress strong { display: block; margin-top: 3px; color: var(--navy); font-family: var(--studio-serif); font-size: 24px; line-height: 1.2; }
  .studio-mobile-progress > div:nth-child(2) strong { color: var(--mint); }
  .studio-mobile-progress button { display: flex; align-items: center; gap: 12px; padding: 8px 0 8px 8px; min-height: 44px; border: 0; background: transparent; color: var(--ink); font-size: 14px; }
  .studio-mobile-progress button span { color: var(--ink); font-size: 20px; }
  .practice-module-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'questions' 'workspace'; }
  .practice-question-outline { padding: 0; border: 0; border-bottom: 1px solid var(--line); }
  .practice-question-list { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-height: 250px; }
  .we-lesson-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .we-lesson-outline { grid-column: 1; grid-row: 1; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--line); }
  .we-lesson-workspace { grid-column: 1; grid-row: 2; }
  .we-lesson-list { display: none; }
  .we-lesson-select-wrap { display: grid; }
  .we-lesson-outline > p, .we-outline-title { display: none; }
  .di-layout { grid-template-columns: minmax(0, 1fr); }
  .di-outline { grid-column: 1; grid-row: 2; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); }
  .di-workspace { grid-column: 1; grid-row: 1; }
}
@media (max-width: 767px) {
  :root { --studio-sidebar: 0px; --studio-radius: 14px; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; gap: 6px 8px; margin: 0; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
  .topbar .brand { position: static; width: auto; display: grid; grid-template-columns: 28px 1fr; gap: 0 8px; color: var(--navy); }
  .brand-mark, .brand-mark svg { width: 28px; height: 30px; }
  .brand-name { font-size: 20px; }
  .topbar .brand small, .studio-page-title { display: none; }
  .sync-status { justify-self: start; grid-column: 1; grid-row: 2; max-width: 100%; margin: 0; padding: 0 0 0 3px; min-height: 22px; font-size: 11px; }
  .account-menu { grid-column: 2; grid-row: 1; max-width: none; padding: 0; gap: 0; border: 0; }
  .account-menu > span, .header-action-label { display: none; }
  .account-menu button { width: 44px; padding: 8px; }
  .topbar .study-quick-links { position: static; grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: flex-end; gap: 8px; width: auto; }
  .topbar .study-quick-links a { min-height: 44px; padding: 0 8px; font-size: 12px; color: var(--muted); }
  #resetBtn { position: static; grid-column: 2; grid-row: 3; justify-self: end; min-height: 44px; margin: -7px 0; font-size: 11px; }
  #resetBtn .header-action-label { display: inline; }
  #resetBtn .header-action-icon { display: none; }
  .app-shell { margin: 0; padding: 0 max(12px, env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); gap: 14px; }
  .study-tabs { top: auto; bottom: 0; left: 0; right: 0; width: 100%; min-height: 70px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; padding: 6px max(4px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: #fff; box-shadow: 0 -3px 18px rgba(23,52,73,.04); overflow: visible; }
  .study-tab { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 58px; padding: 4px 1px; color: var(--muted); border: 0; border-radius: 8px; font-size: 11px; line-height: 1.3; background: transparent; }
  .study-tab svg { width: 23px; height: 23px; flex-basis: 23px; }
  .study-tab.active { border: 0; background: var(--coral-soft); color: var(--coral); box-shadow: none; }
  .study-tab:hover { background: #f4f5f2; color: var(--ink); }
  .template-nav-link span { line-height: 1.15; overflow-wrap: anywhere; }
  .section-modules { gap: 12px; margin: 0; padding: 0; background: transparent; border-radius: 0; scrollbar-width: none; }
  .section-modules button { min-height: 52px; padding: 10px 6px; font-size: 14px; }
  .studio-mobile-progress { padding: 14px 16px; gap: 12px; }
  .studio-mobile-progress strong { font-size: 23px; }
  .studio-mobile-progress button { gap: 5px; font-size: 13px; }
  .studio-mobile-progress button span { font-size: 17px; }
  .practice-panel { padding: 20px 16px 24px; }
  .question-heading { position: relative; grid-template-columns: 66px minmax(0, 1fr); gap: 12px; padding: 26px 0 20px; min-height: 110px; }
  #wfdPracticePanel .question-heading .question-number { font-size: 43px; }
  .eyebrow { position: absolute; top: 0; left: 0; right: 52px; display: flex; flex-wrap: nowrap; }
  .eyebrow, .eyebrow span:last-child { font-size: 10px; line-height: 1.6; }
  .instruction { grid-column: 2; padding-left: 12px; font-size: 18px; line-height: 1.6; padding-right: 0; }
  .instruction span { font-size: 12px; margin-top: 4px; }
  .wfd-mobile-art { display: block; position: absolute; right: 0; top: -4px; width: 44px; height: 30px; object-fit: cover; border-radius: 8px; opacity: .9; }
  .audio-block { padding: 16px 12px 12px; border-radius: 10px; }
  .audio-player { grid-template-columns: 48px minmax(0, 1fr) 44px; gap: 10px; }
  .audio-play { width: 48px; height: 48px; min-height: 48px; }
  .audio-play-icon { border-top-width: 8px; border-bottom-width: 8px; border-left-width: 12px; }
  .audio-speed { min-width: 44px; font-size: 13px; padding: 6px; }
  .waveform { height: 28px; gap: 2px; }
  .waveform i { min-width: 1px; }
  .audio-time { font-size: 11px; }
  .section-block { margin-top: 24px; }
  .audio-block { margin-top: 0; }
  .answer-label-row { align-items: flex-start; }
  .section-label { font-size: 16px; }
  .answer-utilities { gap: 2px; align-items: flex-end; flex-wrap: wrap; }
  .word-count { font-size: 12px; }
  .phrase-notebook-trigger { min-height: 44px; padding: 5px 8px; font-size: 11px; }
  #answerInput { min-height: 104px; margin-top: 10px; font-size: 16px; padding: 12px; }
  .answer-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .answer-actions > #submitBtn { grid-column: 1 / -1; min-height: 50px; font-size: 16px; }
  .answer-actions > button { min-height: 46px; font-size: 14px; }
  .answer-actions > #revealAnswerBtn:not([hidden]) { grid-column: 1 / -1; }
  .answer-actions > .mode-switch { grid-column: 1 / -1; }
  .mode-option { min-height: 44px; font-size: 14px; }
  .feedback.empty { min-height: 112px; padding: 20px 14px; font-size: 13px; }
  .daily-report-heading .secondary-button { width: 100%; }
  .we-panel, .di-panel, .practice-module, .notebook-page, .drive-panel, .mock-panel { padding: 20px 16px 24px; border-radius: 14px; }
  .practice-hero, .we-hero, .di-hero, .drive-hero, .notebook-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-bottom: 16px; }
  .practice-hero > div:first-of-type, .we-hero > div:first-of-type, .di-hero > div:first-of-type, .drive-hero > div:first-of-type { grid-column: 1; grid-row: 1; }
  .module-art { grid-column: 2; grid-row: 1; width: 74px; height: 64px; object-fit: cover; }
  .practice-hero h2, .we-hero h2, .di-hero h2, .drive-hero h2, .notebook-hero h2 { font-size: 24px; line-height: 1.4; }
  .practice-hero p, .we-hero p, .di-hero p { display: none; }
  .drive-hero p { font-size: 13px; }
  .practice-overview, .we-overview, .di-overview, .drive-plan-summary { display: flex; grid-column: 1 / -1; grid-row: 2; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-width: 0; max-width: none; padding: 8px 12px; margin: 0; text-align: left; }
  .practice-overview strong, .we-overview strong, .di-overview strong, .drive-plan-summary strong { font-size: 21px; }
  .practice-overview span, .we-overview span, .di-overview span { display: block; font-size: 12px; margin: 0; }
  .we-note, .di-note { display: none; }
  .practice-question-heading h2, .we-lesson-heading h2 { font-size: 22px; }
  .practice-question-heading p, .we-lesson-heading p { font-size: 14px; }
  .practice-prompt { font-size: 16px; padding: 16px 14px; }
  .we-lesson-content { padding: 18px 14px; }
  .we-lesson-content p { font-size: 16px; }
  .we-lesson-steps { gap: 6px; }
  .we-lesson-step { min-height: 44px; font-size: 13px; }
  .we-lesson-heading { display: block; }
  .we-view-switch { width: 100%; }
  .we-lesson-layout { margin-top: 18px; }
  .we-lesson-actions { position: static; background: transparent; }
  .practice-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .practice-navigation button { width: 100%; padding: 10px 8px; }
  .drive-layout { gap: 18px; }
  .drive-player-card { min-height: 440px; padding: 20px 14px; }
  .drive-controls { gap: 10px; }
  .drive-controls .drive-skip { min-width: 44px; min-height: 54px; font-size: 13px; }
  .drive-play { min-width: 104px; }
  .notebook-hero-actions { grid-column: 1 / -1; }
  .notebook-note { font-size: 13px; }
  .phrase-notebook-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; }
  .phrase-notebook-tabs button { font-size: 12px; padding: 8px 4px; }
  .mock-exam-footer { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .mock-landing { padding: 0; }
  .mock-landing-hero h2 { font-size: 27px; }
  .mock-coverage { width: 100%; }
  .studio-keyboard-open .study-tabs { display: none; }
  .studio-keyboard-open .mock-exam-footer { bottom: 0; }
  textarea, input, button, [tabindex] { scroll-margin-block: 20px 110px; }
  .auth-view { display: flex; flex-direction: column; min-height: 100dvh; padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
  .auth-artwork { align-self: center; max-width: 300px; padding: 0; }
  .auth-illustration { height: 175px; width: 263px; }
  .auth-art-caption { display: none; }
  .auth-card { padding: 26px 24px; max-width: 440px; border-radius: 16px; }
  .auth-copy { margin-top: 20px; }
  .auth-copy h2 { font-size: 29px; }
}
@media (max-width: 359px) {
  .brand-name { font-size: 18px; }
  .app-shell { padding-inline: 8px; }
  .practice-panel, .we-panel, .di-panel, .practice-module, .notebook-page, .drive-panel, .mock-panel { padding-inline: 12px; }
  .studio-mobile-progress { padding: 12px; gap: 8px; }
  .studio-mobile-progress strong { font-size: 20px; }
  .studio-mobile-progress button { font-size: 12px; }
  .studio-mobile-progress button span { display: none; }
  .question-heading { grid-template-columns: 60px 1fr; gap: 10px; }
  .instruction { padding-right: 0; font-size: 17px; }
  .wfd-mobile-art { display: none; }
  .audio-player { gap: 8px; }
  .auth-view { padding-inline: 12px; }
  .auth-card { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Account recovery keeps credentials out of the study surface. */
#forgotPasswordBtn { min-height: 44px; margin-top: 8px; }
.recovery-code-output { display: block; box-sizing: border-box; width: 100%; margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; font: 16px/1.6 ui-monospace, monospace; color: var(--ink); background: var(--paper); overflow-wrap: anywhere; resize: vertical; }
#recoveryCodeResult small { display: block; margin-bottom: 12px; line-height: 1.6; }

/* Optional phone controls; desktop and tablet layouts keep their navigation. */
.studio-mobile-tools { display: none; }
@media (max-width: 767px) {
  .studio-mobile-tools { display: grid; gap: 6px; padding-top: 6px; }
  .studio-mobile-view-controls { display: flex; gap: 8px; }
  .studio-mobile-view-controls button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--navy); font-size: 13px; }
  .studio-compact-progress { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; min-height: 44px; }
  .studio-compact-progress span { min-width: 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
  .studio-compact-progress button { min-height: 44px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--navy); font-size: 13px; }
  .studio-mobile-nav-collapsed #studioTopbar,
  .studio-mobile-nav-collapsed #studioSectionNav,
  .studio-mobile-nav-collapsed #sectionModules { display: none !important; }
  .studio-mobile-nav-collapsed .app-shell { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .studio-mobile-nav-collapsed .mock-exam-footer { bottom: 0; }
  .studio-mobile-progress-collapsed #studioMobileProgress { display: none; }
}

/* Source question difficulty, directly above the active WFD number. */
.current-question-difficulty { margin: 10px 0 4px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.5; }

/* Consistent interaction rhythm throughout listening, speaking, writing and review. */
:root { --control-ring: 0 0 0 3px rgba(226, 113, 90, .16); --control-speed: 120ms; }
:where(button, .primary-button, .secondary-button, summary) { touch-action: manipulation; transition: background-color var(--control-speed), border-color var(--control-speed), box-shadow var(--control-speed), color var(--control-speed), transform var(--control-speed); }
:where(button, summary):active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .58; box-shadow: none; transform: none; }
button[aria-busy="true"] { cursor: progress; }
:where(textarea, input, select):focus { border-color: #b65d4a; box-shadow: var(--control-ring); }
:where(textarea, input, select):focus:not(:focus-visible) { outline: none; }
:where(.practice-choices label, .practice-option, .we-section-card):focus-within { border-color: var(--coral); box-shadow: var(--control-ring); }
:where(.practice-panel, .we-panel, .di-panel, .practice-module, .mock-panel, .notebook-page) { overflow-wrap: anywhere; }
:where(.feedback, .practice-prompt, .we-lesson-content) { line-height: 1.75; }
.feedback-title { letter-spacing: -.01em; }
.audio-cache-status { color: var(--muted); font-size: 12px; line-height: 1.5; }
.audio-heading { gap: 12px; align-items: baseline; flex-wrap: wrap; }
.practice-source-audio audio { width: 100%; min-height: 44px; margin: 8px 0; }
.practice-source-audio small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
:where(dialog) { max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overscroll-behavior: contain; scrollbar-gutter: stable; }
:where(dialog)::backdrop { background: rgba(18, 35, 49, .48); backdrop-filter: blur(3px); }
:where(.question-list, .section-modules, .practice-question-list) { scrollbar-color: #c5cfcc transparent; }
:where(.practice-choices label, .practice-choices button) { min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .primary-button:not(:disabled):hover { box-shadow: 0 4px 12px rgba(172, 78, 58, .16); }
  .secondary-button:not(:disabled):hover { box-shadow: 0 2px 8px rgba(26, 47, 60, .08); }
}
@media (max-width: 767px) {
  :where(.we-panel, .di-panel, .practice-module, .notebook-page, .mock-panel) { border-radius: 14px; }
  :where(dialog) { max-height: calc(100dvh - 16px); margin: auto; }
  .audio-cache-status { flex: 1 1 150px; }
  :where(textarea, input, select, button) { scroll-margin-block: 90px; }
  :where(.practice-source-link a, .feedback a) { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  :where(button, summary):active:not(:disabled) { transform: none; }
}
#wfdPracticePanel .audio-heading { display: flex; margin-bottom: 10px; }
#wfdPracticePanel .audio-heading .section-label { font-size: 13px; }
#questionNumber { white-space: nowrap; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums; }
#wfdPracticePanel .audio-heading { color: #f4f7f9; }
#wfdPracticePanel .audio-cache-status { color: #c4d7d1; }
@media (max-width: 767px) { .question-heading { grid-template-columns: 82px minmax(0, 1fr); } }

.wfd-unlearned-summary { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: #f0f5f2; color: var(--navy); font-size: 13px; line-height: 1.6; }
.wfd-unlearned-summary strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.wfd-unlearned-summary small { display: block; color: var(--muted); font-size: 11px; }
#studioUnlearnedCount { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }

/* SST source-answer memorization: comfortable text and a touch-sized reveal control. */
.practice-sst-reference > summary { min-height: 44px; padding: 12px 0; box-sizing: border-box; cursor: pointer; font-weight: 650; }
.practice-sst-reference > summary:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.practice-sst-reference > p { font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }

/* SST memory cards: fixed template and source-based content remain distinct. */
.sst-study { display: grid; gap: 14px; min-width: 0; }
.sst-memory { margin: 0; border-radius: 20px; overflow: hidden; background: #f7f4ec; }
.sst-memory img { display: block; width: 100%; height: auto; max-height: 350px; object-fit: contain; aspect-ratio: 3 / 2; color: #344d49; }
.sst-memory figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 12px 18px 0; font-size: 14px; font-weight: 650; }
.sst-memory figcaption span { color: #66716c; font-size: 12px; font-weight: 400; }
.sst-keywords { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 16px 18px 20px; list-style: none; }
.sst-keywords li { min-width: 0; display: grid; gap: 4px; overflow-wrap: anywhere; }
.sst-keywords strong { color: #244c43; font-size: 15px; line-height: 1.45; }
.sst-keywords span { color: #606961; font-size: 13px; }
.sst-study .practice-sst-reference { margin: 0; border-top: 1px solid #deded5; }
.sst-study summary { line-height: 1.5; }
.sst-word-count { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 20px; background: #e4ece2; color: #315349; font-size: 13px; font-weight: 500; white-space: nowrap; }
.sst-study .sst-attribution { color: #687169; font-size: 13px; margin: 0 0 12px; }
.sst-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; font-size: 12px; }
.sst-legend span { padding: 3px 9px; border: 1px solid currentColor; border-radius: 6px; }
.sst-template-part { color: #97472f; font-weight: 600; }
.sst-content-part { color: #214e43; }
.sst-sentences { display: grid; gap: 16px; padding-bottom: 12px; }
.sst-sentence-label { display: block; color: #687169; font-size: 12px; letter-spacing: .04em; margin-bottom: 4px; }
.sst-sentence p { margin: 0; font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; }
.sst-sentence .sst-inline-translation { margin-top: 7px; font-size: 14px; line-height: 1.75; color: #606b64; }
.sst-template-source ol { padding-left: 22px; font-size: 16px; line-height: 1.8; }
.sst-template-source li { margin: 8px 0; }
.sst-slot { color: #214e43; }
.sst-study-tip { color: #677169; font-size: 14px; line-height: 1.7; }
@media (max-width: 480px) {
  .sst-memory { border-radius: 14px; }
  .sst-memory figcaption { padding: 10px 12px 0; }
  .sst-keywords { gap: 10px; padding: 12px; }
  .sst-keywords strong { font-size: 14px; }
}
@media (max-width: 350px) {
  .sst-keywords { grid-template-columns: 1fr; gap: 8px; }
  .sst-keywords li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
}

/* Optional WFD imagery stays below the answering controls. */
.wfd-memory { margin-top: 16px; border-top: 1px solid #deded5; }
.wfd-memory > summary { min-height: 48px; padding: 12px 0; box-sizing: border-box; cursor: pointer; color: #234e43; font-size: 15px; font-weight: 650; line-height: 1.6; }
.wfd-memory > summary > span { margin-left: 8px; font-size: 12px; font-weight: 400; color: #606b64; }
.wfd-memory > summary:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.wfd-memory figure { margin: 0; overflow: hidden; border-radius: 16px; background: #f7f4ec; }
.wfd-memory img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; aspect-ratio: 3 / 2; }
.wfd-memory figcaption { padding: 12px 16px 16px; }
.wfd-memory figcaption > span { font-size: 12px; color: #606b64; }
.wfd-memory figcaption p { margin: 6px 0 0; font-size: 14px; line-height: 1.75; color: #4d5c54; overflow-wrap: anywhere; }
.wfd-memory-unavailable { margin: 0; padding: 20px 16px; font-size: 14px; line-height: 1.7; color: #606b64; }

/* Source-derived WE33 template guide. */
.we-guide { max-width: 980px; margin: 24px auto 0; color: var(--ink); }
.we-guide-heading > span { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.we-guide h2 { margin: 10px 0 14px; font-size: clamp(22px, 3vw, 28px); }
.we-guide h3 { margin: 0 0 10px; font-size: 18px; }
.we-guide h4 { margin: 0 0 8px; font-size: 15px; }
.we-guide p, .we-guide li { font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.we-guide p { margin: 8px 0; }
.we-guide .we-guide-caption, .we-guide small { font-size: 13px; line-height: 1.7; color: var(--muted); }
.we-guide .we-guide-chinese { font-size: 14px; line-height: 1.75; color: #606b64; margin-top: 4px; }
.we-guide-steps { padding: 14px 20px; margin: 20px 0; background: var(--sage-light, #eef2ec); border-radius: 14px; }
.we-guide-steps strong { display: block; color: var(--navy); }
.we-guide-disclosure { border-top: 1px solid var(--line); margin: 20px 0; }
.we-guide-disclosure > summary { padding: 14px 0; min-height: 48px; cursor: pointer; font-size: 16px; line-height: 1.6; font-weight: 650; }
.we-guide-disclosure > summary:focus-visible, .we-guide select:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.we-guide-section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.we-guide-section:last-child { border-bottom: 0; }
.we-guide-line { margin: 18px 0; }
.we-guide-fixed { color: #20394a; font-weight: 600; }
.we-guide-fill { background: #fff0cb; color: #6a491a; padding: 1px 3px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.we-guide-extension { color: #586552; text-decoration: underline dashed #96a48b; text-underline-offset: 4px; }
.we-guide-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 10px 0 18px; font-size: 13px; }
.we-guide-example { padding-top: 18px; border-top: 1px solid var(--line); }
.we-guide-example label { display: block; font-size: 14px; margin-bottom: 8px; }
.we-guide-example select { width: 100%; max-width: 100%; min-width: 0; min-height: 48px; padding: 10px; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); }
#weGuideExampleContent { margin-top: 24px; }
.we-guide-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.we-guide-slots section { min-width: 0; border-left: 3px solid #d6b875; padding-left: 14px; }
.we-guide-slots section:first-child { grid-column: 1 / -1; }
.we-guide-correction { background: #fff3e8; border-left: 3px solid #c28058; padding: 14px 18px; border-radius: 4px 12px 12px 4px; margin: 20px 0; }
.we-guide-correction p { font-size: 14px; }
.we-guide-correction p span { font-weight: 650; }
.we-guide-example-paragraph { margin: 24px 0; }
.we-guide-evidence { list-style: none; padding: 0; }
.we-guide-evidence li { border-bottom: 1px solid var(--line); padding: 10px 0; }
.we-view-switch { max-width: 100%; }
.we-view-switch button { white-space: normal; }
@media (max-width: 560px) {
  .we-view-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .we-view-switch button { min-width: 0; padding: 8px 5px; font-size: 13px; }
  .we-guide { margin-top: 20px; }
  .we-guide-slots { grid-template-columns: minmax(0, 1fr); }
  .we-guide-steps, .we-guide-correction { padding: 12px 14px; }
}

/* WE33 editable template and independent fixed-phrase practice. */
.we-common-practice { margin-bottom: 24px; }
.we-common-actions { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.we-common-practice button,.we-common-practice select { min-height:44px; }
.we-common-practice button[aria-pressed="true"] { background:var(--studio-navy,#183c4a); color:#fff; }
.we-common-practice select { width:100%; max-width:100%; font-size:16px; }
.we-common-practice textarea { display:block; box-sizing:border-box; width:100%; min-width:0; padding:12px; font:16px/1.65 system-ui,sans-serif; border:1px solid #b6c7bd; border-radius:10px; background:#fffdf8; color:#213c47; resize:vertical; }
.we-common-practice textarea:focus-visible { outline:3px solid #c8795b; outline-offset:2px; }
.we-common-field { display:block; margin:8px 0; color:#795029; font-size:13px; }
.we-common-section { padding:16px 0; border-bottom:1px solid #dedfd6; }
.we-common-line { margin:16px 0; line-height:1.8; }
.we-common-prompt,#weCommonPreview { line-height:1.85; overflow-wrap:anywhere; }
.we-common-practice .we-workspace,.we-common-practice .we-outline { min-width:0; }
.we-common-practice .we-section-list button { white-space:normal; text-align:left; }
@media(max-width:600px) { .we-common-practice .we-layout { display:block; } .we-common-practice .we-outline { margin-bottom:16px; } .we-common-actions button { flex:1 1 130px; } }
.we-common-practice button { border:1px solid #cbd5ce; border-radius:12px; padding:10px 16px; background:#f5f7f2; color:#23434d; font:600 14px/1.5 system-ui,sans-serif; cursor:pointer; }
.we-common-practice button:hover { border-color:#5d8173; background:#e9efe7; }
.we-common-practice button[aria-pressed="true"]:hover { background:#244b57; }
.we-common-practice button:focus-visible { outline:3px solid #c8795b; outline-offset:2px; }
.we-common-practice select { border:1px solid #cbd5ce; border-radius:12px; padding:10px; background:#fffdf8; color:#23434d; }
/* SWT: sentence provenance and exact reused spans share one colour. */
.swt-copy-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.swt-copy-toolbar button { min-height:44px; }
.swt-copy-help { color:#53646b; font-size:14px; line-height:1.7; }
.swt-copy-legend { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.swt-copy-0 { --copy-bg:#cce8dc; --copy-soft:#edf6f1; --copy-ink:#174a38; }
.swt-copy-1 { --copy-bg:#d4e5fa; --copy-soft:#f0f5fc; --copy-ink:#1a426e; }
.swt-copy-2 { --copy-bg:#f5dfb4; --copy-soft:#fcf6e9; --copy-ink:#66450d; }
.swt-copy-3 { --copy-bg:#e6dbf5; --copy-soft:#f7f2fc; --copy-ink:#513575; }
.swt-copy-4 { --copy-bg:#f6d7d2; --copy-soft:#fdf1ef; --copy-ink:#783c33; }
.swt-copy-5 { --copy-bg:#cce9ec; --copy-soft:#eef8f8; --copy-ink:#15535a; }
.swt-source-sentence { background:var(--copy-soft); border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.swt-copy,.swt-copy-key,.swt-copy-label { background:var(--copy-bg); color:var(--copy-ink); }
.swt-copy { border-bottom:2px solid var(--copy-ink); border-radius:3px; padding:1px 0; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.swt-copy-key { padding:4px 9px; border-radius:7px; font-size:13px; font-weight:600; }
.swt-copy-label { display:inline-block; font:600 11px/1.4 system-ui,sans-serif; padding:1px 5px; border-radius:4px; margin-right:4px; vertical-align:super; }
.swt-copy-answer { line-height:2; overflow-wrap:anywhere; }
.swt-copy-off .swt-copy,.swt-copy-off .swt-source-sentence { color:inherit; background:transparent; border:0; }
.swt-copy-off .swt-copy-label,.swt-copy-off .swt-copy-legend { display:none; }
.swt-copy-6 { --copy-bg:#e5e9bc; --copy-soft:#f6f7e9; --copy-ink:#465012; }
.swt-copy-7 { --copy-bg:#ebdbe5; --copy-soft:#f9f2f6; --copy-ink:#653a55; }

/* Source-linked speaking lessons and per-question RL notes. */
.speaking-coach { margin-block: 20px; padding: 18px; border: 1px solid var(--border, #dde2db); border-radius: 16px; background: #f5f7f2; color: #243746; overflow-wrap: anywhere; }
.speaking-coach summary { min-height: 44px; align-content: center; cursor: pointer; font-weight: 650; }
.speaking-coach p, .speaking-coach li { line-height: 1.65; }
.speaking-coach audio { display: block; width: 100%; margin-block: 12px; }
.speaking-coach small { display: block; line-height: 1.5; color: #56635f; }
.rl-note-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-block: 16px; }
.rl-note-grid label { min-width: 0; font-size: 14px; font-weight: 600; }
.rl-note-grid textarea { display: block; width: 100%; box-sizing: border-box; min-height: 88px; margin-top: 7px; border: 1px solid #b6c2b8; border-radius: 10px; padding: 12px; background: white; font: 400 16px/1.5 system-ui,sans-serif; resize: vertical; }
.rl-coach-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.rl-coach-actions button { min-height: 44px; white-space: normal; }
.rl-preview { padding: 14px; background: white; border-radius: 10px; white-space: pre-wrap; }
.speaking-coach :focus-visible { outline: 3px solid #307667; outline-offset: 3px; }
.speaking-coach [hidden] { display: none !important; }
@media(max-width:600px) { .rl-note-grid { grid-template-columns: 1fr; } .speaking-coach { padding: 14px; } }