/* Presentation only. The existing bank and mock-exam controllers own all state,
   permissions, submissions, timers, drafts and results. */
.bank-section,
.mocks-section {
  --practice-bg: #f8f2e8;
  --practice-paper: #fffdf9;
  --practice-ink: #191714;
  --practice-muted: #746c62;
  --practice-line: #dfd2c3;
  --practice-lilac: #dfc2e1;
  --practice-lilac-soft: #f1e5f2;
  --practice-lime: #dcff70;
  --practice-brown: #7a4726;
  background: var(--practice-bg);
  color: var(--practice-ink);
  padding: 56px 48px 72px;
  border: 0;
  border-top: 1px solid var(--practice-line);
  scroll-margin-top: 95px;
}
.bank-section > .section-title,
.mocks-section > .section-title { max-width: 850px; margin-bottom: 30px; }
.bank-section > .section-title h2,
.mocks-section > .section-title h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -.045em;
  margin: 11px 0 14px;
}
.bank-section > .section-title > p,
.mocks-section > .section-title > p { font-size: 10px; letter-spacing: .075em; }
.bank-section > .section-title > span,
.mocks-section > .section-title > span { font-size: 13px; line-height: 1.7; }
.bank-section .bank-guest,
.mocks-section .bank-guest {
  background: var(--practice-paper);
  border: 1px solid var(--practice-line);
  border-radius: 20px;
  padding: 30px;
}
.bank-section .bank-guest b,
.mocks-section .bank-guest b { font-size: 23px; letter-spacing: -.025em; }
.bank-section .bank-guest p,
.mocks-section .bank-guest p { font-size: 13px; line-height: 1.6; }
.bank-section :is(.dark-button, .outline-button),
.mocks-section :is(.dark-button, .outline-button) {
  min-height: 42px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.35;
  padding: 11px 18px;
}
.bank-section :is(button, input, select, textarea):focus-visible,
.mocks-section :is(button, input, select, textarea):focus-visible {
  outline: 3px solid #9271a4;
  outline-offset: 3px;
}
.bank-section button:disabled,
.mocks-section button:disabled { opacity: .5; cursor: not-allowed; }

/* Keep the real sequential queue: one task, its answer and its Next control. */
.bank-section .bank-workspace {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  border: 0;
  background: transparent;
  min-height: 0;
}
.bank-section .bank-sidebar {
  padding: 21px 18px;
  gap: 24px;
  border: 1px solid var(--practice-line);
  border-radius: 18px;
  background: var(--practice-paper);
  min-width: 0;
}
.bank-section .bank-sidebar label,
.bank-section .bank-sidebar > div > small {
  color: var(--practice-brown);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 750;
  letter-spacing: .055em;
}
.bank-section .bank-sidebar select {
  width: 100%;
  min-width: 0;
  background: var(--practice-paper);
  color: var(--practice-ink);
  border: 1px solid var(--practice-line);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  min-height: 42px;
  padding: 10px;
}
.bank-section .bank-usage {
  border-radius: 14px;
  padding: 19px;
  background: var(--practice-ink);
  color: var(--practice-paper);
}
.bank-section .bank-usage small { font-size: 9px; color: var(--practice-lime); letter-spacing: .065em; }
.bank-section .bank-usage strong { font-size: 40px; letter-spacing: -.045em; margin: 10px 0 6px; }
.bank-section .bank-usage span { font-size: 11px; line-height: 1.5; color: #ded4c8; }
.bank-section .bank-numbers { gap: 6px; margin-top: 12px; }
.bank-section .bank-number-group { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.bank-section .bank-number-group + .bank-number-group {
  border-top: 1px solid var(--practice-line);
  padding-top: 12px;
  margin-top: 6px;
}
.bank-section .bank-number-group-title {
  flex-basis: 100%;
  margin: 4px 0;
  color: var(--practice-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.bank-section .bank-numbers button {
  min-width: 35px;
  min-height: 35px;
  padding: 7px 9px;
  border: 1px solid #d7c5b3;
  border-radius: 8px;
  color: var(--practice-ink);
  background: var(--practice-paper);
  font-size: 12px;
  line-height: 1.35;
}
.bank-section .bank-numbers button.active {
  background: var(--practice-ink);
  border-color: var(--practice-ink);
  color: var(--practice-paper);
}
.bank-section .bank-numbers button:hover:not(.active) { background: var(--practice-lilac-soft); }
.bank-section #bank-training { width: 100%; font-size: 11px; }
.bank-section .bank-main { min-width: 0; gap: 18px; align-content: start; }
.bank-section .bank-task-list {
  padding: 20px 23px;
  border: 1px solid var(--practice-line);
  border-radius: 17px;
  background: var(--practice-paper);
}
.bank-section .bank-task-list > p { font-size: 13px; color: var(--practice-muted); margin: 0; }
.bank-section .bank-queue-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; }
.bank-section .bank-queue-summary > span {
  grid-column: 1;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--practice-brown);
}
.bank-section .bank-queue-summary > div { grid-column: 1; min-width: 0; }
/* The detailed card below already states the task number. Topic titles are
   intentionally absent in the compact queue header, as approved in preview. */
.bank-section .bank-queue-summary b { display: none; }
.bank-section .bank-queue-summary small { margin: 0; font-size: 12px; line-height: 1.5; }
.bank-section .bank-queue-summary > strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 10px;
  border: 1px solid var(--practice-line);
  border-radius: 20px;
  padding: 7px 10px;
  font-weight: 650;
  color: #51483e;
}
.bank-section .bank-queue-summary > strong.done {
  color: var(--practice-ink);
  background: var(--practice-lime);
  border-color: transparent;
}
.bank-section .bank-task-view {
  padding: 29px;
  border: 1px solid var(--practice-ink);
  border-radius: 21px;
  background: var(--practice-paper);
  box-shadow: 6px 7px 0 var(--practice-brown);
  margin-right: 6px;
  margin-bottom: 7px;
  overflow: visible;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bank-section .bank-task-view header { gap: 15px; padding-bottom: 20px; border-bottom-color: var(--practice-line); }
.bank-section .bank-task-view header small { font-size: 10px; line-height: 1.5; }
.bank-section .bank-task-view h3 { font-size: 29px; line-height: 1.2; letter-spacing: -.035em; margin: 5px 0 0; }
.bank-section .bank-favorite {
  flex-shrink: 0;
  border: 1px solid var(--practice-line);
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.4;
  padding: 10px 12px;
  min-height: 40px;
}
.bank-section .bank-favorite:hover { background: var(--practice-lilac-soft); }
.bank-section .bank-task-view .bank-prompt { padding: 22px 0; font-size: 15px; line-height: 1.8; }
.native-task-text, .teacher-bank-detail .teacher-bank-prompt { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }

/* Native task 38: selectable source text, a real table, and the original chart. */
.essay-condition { padding: 26px 0 32px; font-size: 16px; line-height: 1.75; overflow-wrap: break-word; }
.essay-condition p { margin: 0 0 16px; }
.essay-intro p:last-child { font-weight: 600; }
.essay-table-wrap { margin: 26px 0 30px; }
.essay-data-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.essay-data-table caption,
.essay-data-chart figcaption { padding: 0 12px 18px; text-align: center; line-height: 1.5; }
.essay-data-table caption > *,
.essay-data-chart figcaption > * { display: block; }
.essay-data-table caption strong,
.essay-data-chart figcaption strong { font-size: 19px; margin: 4px 0; }
.essay-data-table caption em,
.essay-data-chart figcaption em { font-size: 14px; }
.essay-data-table th, .essay-data-table td { padding: 13px 18px; border: 1px solid #d9cbbb; vertical-align: middle; }
.essay-data-table thead th { background: #eee4d7; text-align: left; line-height: 1.45; font-weight: 600; }
.essay-data-table thead th:last-child { width: 30%; text-align: center; }
.essay-data-table tbody th { font-weight: 400; text-align: left; }
.essay-data-table tbody tr:nth-child(even) { background: #faf6ef; }
.essay-data-table td { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.essay-data-chart { margin: 26px 0 30px; }
.essay-data-chart .task-image-open { max-width: 720px; margin: 0 auto; }
.essay-data-chart img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.essay-plan { padding-top: 23px; border-top: 1px solid #dfd2c3; }
.essay-plan .essay-word-limit { display: inline-block; padding: 6px 12px; border-radius: 8px; background: #f1e5f2; font-weight: 700; margin-bottom: 14px; }
.essay-plan p { margin-bottom: 8px; }
.essay-condition .essay-plan ul { margin: 0; padding-left: 24px; font-size: inherit; line-height: inherit; }
.essay-plan li { padding-left: 4px; margin: 7px 0; }
/* Oral task 4: exact selectable instructions and two original photographs. */
.oral-condition { padding: 26px 0 30px; font-size: 16px; line-height: 1.75; overflow-wrap: break-word; }
.oral-condition p { margin: 0 0 18px; }
.oral-condition .oral-plan { margin: 0 0 20px; padding-left: 24px; font-size: inherit; line-height: inherit; }
.oral-plan li { padding-left: 4px; margin: 8px 0; }
.oral-condition .oral-closing { font-weight: 600; }
.oral-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.oral-photos figure { min-width: 0; margin: 0; }
.oral-photos img { display: block; width: 100%; height: auto; border-radius: 8px; }
.oral-photos .task-image-open { border-radius: 8px; }
.oral-photos .task-image-open:focus-visible { outline: 3px solid #79471f; outline-offset: 4px; }
@media (max-width: 600px) {
  .essay-condition { font-size: 14px; line-height: 1.7; padding-top: 22px; }
  .oral-condition { font-size: 15px; line-height: 1.7; padding-top: 22px; }
  .oral-photos { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 22px; }
  .essay-data-table { font-size: 13px; }
  .essay-data-table th, .essay-data-table td { padding: 10px 9px; }
  .essay-data-table thead th:last-child { width: 44%; }
  .essay-data-table thead th { font-size: 12px; overflow-wrap: normal; }
  .essay-data-table caption strong, .essay-data-chart figcaption strong { font-size: 17px; }
}
.bank-section :is(.bank-writing-form, .bank-block-form, .bank-answer-form) { border-top-color: var(--practice-line); padding-top: 23px; }
.bank-section :is(.bank-writing-form textarea, .bank-answer-form input, .bank-block-fields input) {
  color: var(--practice-ink);
  border: 1px solid #bbaa98;
  border-radius: 10px;
  background: var(--practice-bg);
  padding: 14px;
  font-size: 15px;
  line-height: 1.7;
}
.bank-section .bank-writing-form textarea { min-height: 340px; }
.bank-section .bank-writing-form > label { font-size: 10px; letter-spacing: .045em; }
.bank-section .bank-writing-form > div { margin-top: 5px; }
.bank-section .bank-writing-form span { font-size: 11px; line-height: 1.5; }
.bank-section .bank-block-fields { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; }
.bank-section .bank-block-fields label span { font-size: 11px; color: var(--practice-brown); overflow-wrap: anywhere; }
.bank-section :is(.bank-answer-result, .bank-oral-note, .bank-oral-history-note, .bank-review, .bank-teacher-key) {
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.65;
  padding: 18px;
}
.bank-section .bank-answer-result { border-color: var(--practice-line); background: var(--practice-lilac-soft); }
.bank-section .bank-answer-result.correct { background: #edf7df; border-color: #a8c48d; }
.bank-section .bank-answer-result.wrong { background: #fff0ec; border-color: #dcafa4; }
.bank-section .bank-answer-result .check-progress-time { font-size: 10px; }
.bank-section .bank-ai-score { gap: 18px; }
.bank-section .bank-ai-score > strong { font-size: 38px; line-height: 1.15; letter-spacing: -.045em; }
.bank-section .bank-ai-score > div { font-size: 12px; }
.bank-section .bank-ai-score small { font-size: 10px; line-height: 1.5; }
.bank-section .bank-ai-score span { border-color: #d9cbd7; }
.bank-section .bank-block-results > span { border-radius: 9px; font-size: 12px; padding: 12px; }
.bank-section .bank-oral-note { border-color: #d6c3a3; background: #faf0db; }
.bank-section .bank-oral-note b { font-size: 13px; }
.bank-section .bank-oral-note small { font-size: 11px; line-height: 1.5; }
.bank-section .bank-flow-controls { padding-top: 21px; margin-top: 27px; border-top-color: var(--practice-line); }
.bank-section .bank-solved-state { font-size: 12px; line-height: 1.5; font-weight: 650; }
.bank-section .bank-solved-state input { width: 16px; height: 16px; accent-color: var(--practice-ink); }
.bank-section .bank-review { background: var(--practice-bg); border-color: var(--practice-line); }
.bank-section .bank-review-title { border-color: var(--practice-line); }
.bank-section .bank-review-title > span { font-size: 10px; }
.bank-section .bank-review-title > strong { font-size: 18px; }
.bank-section .bank-review dd { font-size: 16px; overflow-wrap: anywhere; }
.bank-section .bank-review pre { background: var(--practice-paper); border-radius: 9px; font-size: 13px; }
.bank-section .bank-block-review article { font-size: 12px; grid-template-columns: 45px minmax(0, 1fr) minmax(0, 1fr); }
.bank-section .task-visuals,
.mocks-section .task-visuals { gap: 18px; margin: 20px 0 25px; }
.bank-section .task-visuals img,
.mocks-section .task-visuals img { max-width: 100%; height: auto; background: var(--practice-bg); border-radius: 8px; }
.bank-section .task-image-open,
.mocks-section .task-image-open { border-radius: 8px; overflow: hidden; }
.bank-section .task-audios,
.mocks-section .task-audios { border-radius: 13px; background: var(--practice-lilac-soft); border-color: #d8c8d9; padding: 19px; }
.bank-section .task-audios b,
.mocks-section .task-audios b { font-size: 13px; }
.bank-section .task-audios p,
.mocks-section .task-audios p { font-size: 12px; line-height: 1.6; }
.bank-section .task-audios audio,
.mocks-section .task-audios audio { width: 100%; min-width: 0; }

/* Real exam UI, with the existing state machine and autosave unchanged. */
.mocks-section .mocks-workspace { border: 0; background: transparent; }
.mocks-section .mock-catalog { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.mocks-section .mock-card {
  border: 1px solid var(--practice-line);
  border-radius: 20px;
  background: var(--practice-paper);
  padding: 29px;
  min-height: 0;
}
.mocks-section .mock-card header { font-size: 11px; line-height: 1.5; gap: 20px; }
.mocks-section .mock-card h3 { font-size: 30px; line-height: 1.15; letter-spacing: -.035em; margin: 23px 0 12px; }
.mocks-section .mock-card p,
.mocks-section .mock-card li { font-size: 13px; line-height: 1.65; }
.mocks-section .mock-card ul { margin: 22px 0 26px; }
.mocks-section .mock-card footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: auto 0 0;
  color: var(--practice-ink);
  background: transparent;
  border: 0;
}
.mocks-section .mock-card footer button { flex: 1 1 140px; min-width: 0; }
.mocks-section .mock-card .mock-demo-note,
.mocks-section .mock-card .mock-random-note { font-size: 12px; border-color: var(--practice-brown); color: var(--practice-brown); }
.mocks-section .mock-card.development-card { background: #f1ebe2; }
.mocks-section .development-panel { background: var(--practice-lilac-soft); border-color: #d4c2d5; border-radius: 11px; padding: 15px; }
.mocks-section .development-panel b { font-size: 10px; letter-spacing: .06em; }
.mocks-section .development-panel span { font-size: 12px; line-height: 1.6; }
.mocks-section .mock-runner { border: 1px solid var(--practice-line); border-radius: 20px; background: var(--practice-paper); overflow: hidden; }
.mocks-section .mock-runner-head { padding: 23px 25px; gap: 22px; border-bottom-color: var(--practice-line); }
.mocks-section .mock-runner-head h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.025em; margin-top: 7px; }
.mocks-section .mock-runner-head small { font-size: 9px; letter-spacing: .055em; }
.mocks-section .mock-save-state { font-size: 11px; line-height: 1.5; }
.mocks-section .mock-timer { font-size: 21px; letter-spacing: .02em; border-radius: 25px; padding: 12px 18px; color: var(--practice-paper); background: var(--practice-ink); }
.mocks-section .mock-tabs { margin: 18px 25px 0; padding: 4px; gap: 4px; border: 0; border-radius: 11px; background: #f0e7db; }
.mocks-section .mock-tabs button { min-width: 115px; padding: 12px; border: 0; border-radius: 8px; font-size: 11px; }
.mocks-section .mock-tabs button.active { background: var(--practice-ink); color: var(--practice-paper); }
.mocks-section .mock-panel { padding: 23px 25px 30px; min-height: 420px; }
.mocks-section .mock-task-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.mocks-section .mock-task-nav {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--practice-line);
  border-radius: 14px;
  background: var(--practice-bg);
  overflow: visible;
}
.mocks-section .mock-task-nav button { border-color: #c5b6a5; border-radius: 7px; min-width: 34px; min-height: 34px; padding: 7px; font-size: 11px; }
.mocks-section .mock-task-nav button.active { background: var(--practice-lime); color: var(--practice-ink); border-color: var(--practice-ink); box-shadow: 0 2px 0 var(--practice-ink); }
.mocks-section .mock-task-content {
  padding: 22px;
  border: 1px solid var(--practice-line);
  border-radius: 17px;
  background: var(--practice-paper);
  min-width: 0;
  overflow-wrap: anywhere;
}
.mocks-section .mock-task-content h4 { font-size: 26px; letter-spacing: -.035em; margin: 0 0 18px; }
.mocks-section .mock-task-content p { font-size: 14px; line-height: 1.8; }
.mocks-section .mock-task-answer {
  min-width: 0;
  padding: 22px;
  margin-right: 6px;
  margin-bottom: 7px;
  border: 1px solid var(--practice-ink);
  border-radius: 17px;
  box-shadow: 6px 7px 0 var(--practice-brown);
  background: var(--practice-paper);
}
.mocks-section .mock-task-answer label,
.mocks-section .mock-draft label { font-size: 10px; letter-spacing: .04em; line-height: 1.5; margin-bottom: 11px; }
.mocks-section :is(.mock-task-answer input, .mock-task-answer textarea, .mock-draft textarea, .mock-blank2 textarea) { font-size: 14px; color: var(--practice-ink); border-color: #bbaa98; border-radius: 10px; background: var(--practice-bg); }
.mocks-section :is(.mock-task-answer textarea[data-mock-field="blank2_text"], .mock-blank2 textarea) {
  background: linear-gradient(90deg, transparent 25px, #e5b8b3 25px 26px, transparent 26px), repeating-linear-gradient(to bottom, #fff 0 27px, #d7e2f4 27px 28px);
  line-height: 28px;
  padding: 6px 14px 6px 36px;
  min-height: 350px;
}
.mocks-section .mock-task-answer [data-mock-writing] { margin-top: 14px; width: 100%; }
.mocks-section .mock-task-answer small { font-size: 11px; line-height: 1.6; margin-top: 10px; }
.mocks-section .mock-task-answer .replacement { margin-top: 24px; padding-top: 20px; border-color: var(--practice-line); }
.mocks-section .mock-task-answer textarea[data-mock-field="draft"] { min-height: 170px; height: 170px; }
.mocks-section .mock-draft p { font-size: 13px; color: var(--practice-muted); line-height: 1.6; margin: 22px 0; }
.mocks-section .mock-draft textarea { margin-bottom: 22px; }
.mocks-section .mock-blank-table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--practice-line); border-radius: 12px; overflow: hidden; font-size: 12px; }
.mocks-section .mock-blank-table th,
.mocks-section .mock-blank-table td { border: 0; border-bottom: 1px solid var(--practice-line); padding: 13px; }
.mocks-section .mock-blank-table th { background: var(--practice-bg); }
.mocks-section .mock-blank-table td + td { border-left: 1px solid var(--practice-line); }
.mocks-section .mock-blank-table tr:last-child > * { border-bottom: 0; }
.mocks-section .mock-blank-table input { min-height: 32px; min-width: 0; border-radius: 4px; }
.mocks-section .mock-blank2-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.mocks-section .mock-writing-card { border-color: var(--practice-line); border-radius: 16px; padding: 22px; }
.mocks-section .mock-writing-card h4 { font-size: 23px; letter-spacing: -.025em; }
.mocks-section .mock-writing-card p { font-size: 12px; line-height: 1.6; color: var(--practice-muted); }
.mocks-section .mock-runner-actions { padding: 22px 25px; border-color: var(--practice-line); }
.mocks-section .mock-result-head { padding-bottom: 24px; border-color: var(--practice-line); align-items: center; }
.mocks-section .mock-result-head small { font-size: 10px; letter-spacing: .05em; color: var(--practice-brown); }
.mocks-section .mock-result-head h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.035em; margin: 12px 0; }
.mocks-section .mock-result-head p { font-size: 13px; line-height: 1.6; }
.mocks-section .mock-result-head strong { font-size: 50px; letter-spacing: -.05em; }
.mocks-section .mock-result-grid { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.mocks-section .mock-result-item { border-radius: 12px; border-color: var(--practice-line); padding: 18px; font-size: 12px; line-height: 1.5; }
.mocks-section .mock-result-item b { font-size: 25px; margin: 5px 0; }
.mocks-section .mock-result-item span { font-size: 11px; line-height: 1.5; }
.mocks-section :is(.mock-writing-progress, .mock-untransferred, .mock-oral-intro) { border-radius: 14px; border-color: #d6c4d7; font-size: 13px; line-height: 1.6; }
.mocks-section .mock-writing-progress { background: var(--practice-lilac-soft); }
.mocks-section .mock-writing-progress.failed { background: #fff0ec; border-color: #dcafa4; }
.mocks-section .mock-writing-progress h4 { font-size: 15px; }
.mocks-section .mock-result-actions { gap: 12px; flex-wrap: wrap; }
.mocks-section .mock-oral-intro { padding: 30px; background: var(--practice-lilac-soft); }
.mocks-section .mock-oral-intro h3 { font-size: 32px; line-height: 1.15; }

@media (max-width: 1080px) {
  .bank-section, .mocks-section { padding: 45px 30px 60px; }
  .bank-section .bank-workspace { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
  .bank-section .bank-sidebar { padding: 18px 15px; }
  .bank-section .bank-task-view { padding: 23px; }
  .bank-section .bank-queue-summary { gap: 8px 12px; }
  .mocks-section .mock-task-layout { gap: 18px; }
  .mocks-section .mock-task-content, .mocks-section .mock-task-answer { padding: 18px; }
}
@media (max-width: 800px) {
  .bank-section .bank-workspace { grid-template-columns: minmax(0, 1fr); }
  .bank-section .bank-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 22px; }
  .bank-section .bank-sidebar .bank-usage { grid-row: span 2; }
  .bank-section .bank-sidebar > div:has(.bank-numbers) { grid-column: 1 / -1; }
  .bank-section #bank-training { grid-column: 1 / -1; justify-self: start; width: auto; }
  .mocks-section .mock-task-layout { grid-template-columns: minmax(0, 1fr); }
  .mocks-section .mock-task-content, .mocks-section .mock-task-answer { padding: 22px; }
  .mocks-section .mock-runner-head { grid-template-columns: minmax(0, 1fr) auto; }
  .mocks-section .mock-save-state { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 600px) {
  .bank-section, .mocks-section { padding: 35px 20px 48px; scroll-margin-top: 115px; }
  .bank-section > .section-title h2, .mocks-section > .section-title h2 { font-size: 32px; line-height: 1.13; }
  .bank-section > .section-title > span, .mocks-section > .section-title > span { font-size: 12px; }
  .bank-section .bank-guest, .mocks-section .bank-guest { padding: 23px; align-items: stretch; }
  .bank-section .bank-guest b, .mocks-section .bank-guest b { font-size: 22px; }
  .bank-section .bank-sidebar { padding: 18px; gap: 17px; }
  .bank-section .bank-usage { padding: 15px; }
  .bank-section .bank-usage strong { font-size: 36px; }
  .bank-section .bank-sidebar select { font-size: 12px; }
  .bank-section .bank-task-list { padding: 17px 18px; }
  .bank-section .bank-queue-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
  .bank-section .bank-queue-summary > span { font-size: 9px; }
  .bank-section .bank-queue-summary small { font-size: 11px; }
  .bank-section .bank-queue-summary > strong { font-size: 9px; padding: 6px 8px; }
  .bank-section .bank-task-view { padding: 21px 18px; border-radius: 18px; }
  .bank-section .bank-task-view header { flex-wrap: wrap; gap: 15px; }
  .bank-section .bank-task-view h3 { font-size: 27px; }
  .bank-section .bank-favorite { margin-left: auto; font-size: 10px; padding: 8px 11px; min-height: 36px; }
  .bank-section .bank-task-view .bank-prompt { font-size: 14px; line-height: 1.8; }
  .bank-section .bank-writing-form textarea { font-size: 16px; min-height: 310px; padding: 12px; }
  .bank-section .bank-answer-form { grid-template-columns: minmax(0, 1fr); }
  .bank-section .bank-block-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .bank-section .bank-block-fields input { font-size: 16px; padding: 10px; }
  .bank-section .bank-writing-form > div { flex-direction: column; align-items: stretch; gap: 13px; }
  .bank-section .bank-flow-controls { flex-direction: column; align-items: stretch; gap: 18px; }
  .bank-section .bank-block-form > .dark-button { width: 100%; }
  .bank-section .bank-ai-score { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bank-section .bank-review { padding: 15px; }
  .bank-section .bank-block-review article { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bank-section .task-audios, .mocks-section .task-audios { padding: 14px; }
  .mocks-section .mock-card { padding: 23px; }
  .mocks-section .mock-card header { flex-wrap: wrap; gap: 9px; }
  .mocks-section .mock-card h3 { font-size: 28px; }
  .mocks-section .mock-card footer button { flex-basis: 100%; }
  .mocks-section .mock-runner-head { padding: 20px 18px; gap: 15px; }
  .mocks-section .mock-runner-head h3 { font-size: 20px; }
  .mocks-section .mock-timer { font-size: 18px; padding: 10px 13px; min-width: 0; }
  .mocks-section .mock-tabs { margin: 16px 14px 0; }
  .mocks-section .mock-tabs button { font-size: 10px; padding: 10px; min-width: 105px; }
  .mocks-section .mock-panel { padding: 18px 14px 25px; }
  .mocks-section .mock-task-nav { padding: 14px; gap: 6px; }
  .mocks-section .mock-task-nav button { min-width: 32px; min-height: 32px; }
  .mocks-section .mock-task-content, .mocks-section .mock-task-answer { padding: 19px 16px; }
  .mocks-section .mock-task-content h4 { font-size: 25px; }
  .mocks-section :is(.mock-task-answer input, .mock-task-answer textarea, .mock-draft textarea, .mock-blank2 textarea) { font-size: 16px; }
  .mocks-section .mock-blank-table { font-size: 11px; }
  .mocks-section .mock-blank-table th, .mocks-section .mock-blank-table td { padding: 10px 8px; }
  .mocks-section .mock-blank-table input { font-size: 16px; }
  .mocks-section .mock-runner-actions { padding: 20px 18px; gap: 12px; }
  .mocks-section .mock-result-head { grid-template-columns: minmax(0, 1fr); }
  .mocks-section .mock-result-head strong { font-size: 43px; }
  .mocks-section .mock-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .mocks-section .mock-result-item { padding: 14px; }
  .mocks-section .mock-result-actions { flex-direction: column; }
  .mocks-section .mock-writing-progress { align-items: flex-start; padding: 16px; gap: 12px; }
  .mocks-section .mock-oral-intro { padding: 23px; }
}
@media (max-width: 370px) {
  .bank-section, .mocks-section { padding-left: 15px; padding-right: 15px; }
  .bank-section .bank-sidebar { grid-template-columns: minmax(0, 1fr); }
  .bank-section .bank-sidebar .bank-usage { grid-row: auto; }
  .bank-section .bank-queue-summary { grid-template-columns: minmax(0, 1fr); }
  .bank-section .bank-queue-summary > strong { grid-column: 1; grid-row: auto; justify-self: start; }
  .mocks-section .mock-runner-head { grid-template-columns: minmax(0, 1fr); }
  .mocks-section .mock-timer { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .mocks-section .mock-progress-spinner { animation-duration: 2s; }
}