.practice-page { max-width: 74rem; }
.practice-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.practice-heading .lead { margin-bottom: 0; }
.bank-total { flex: 0 0 auto; padding-left: 2rem; border-left: 1px solid var(--line); text-align: right; }
.bank-total strong { display: block; color: var(--red-900); font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 0.9; }
.bank-total span { display: block; margin-top: 0.65rem; color: var(--muted); font-weight: 800; }

.setup-panel { margin-top: 3.5rem; padding: clamp(1.4rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; box-shadow: var(--shadow); }
.setup-copy { display: grid; grid-template-columns: minmax(13rem, 0.65fr) minmax(0, 1fr); gap: 0 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.setup-copy .eyebrow { grid-column: 1; }
.setup-copy h2 { grid-column: 1; margin: 0; font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.05; }
.setup-copy p:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; color: var(--muted); line-height: 1.7; }
.setup-control { margin-top: 2rem; }
.control-label { display: block; margin-bottom: 0.75rem; color: var(--red-800); font-size: 0.8rem; font-weight: 900; }
.module-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
.module-option { min-width: 0; min-height: 5.6rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: 0.45rem; color: var(--ink); background: var(--soft); text-align: left; }
.module-option strong, .module-option span { display: block; }
.module-option strong { font-size: 1rem; }
.module-option span { margin-top: 0.4rem; color: var(--muted); font-size: 0.78rem; }
.module-option.selected { border-color: var(--red-700); color: var(--red-900); background: var(--red-050); box-shadow: inset 0 0 0 1px var(--red-700); }
.setup-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.segmented { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 0.45rem; }
.segmented button { min-height: 2.8rem; border: 0; border-right: 1px solid var(--line); color: var(--muted); background: #fff; font-weight: 800; }
.segmented button:last-child { border-right: 0; }
.segmented button.selected { color: #fff; background: var(--red-700); }
.stage-segmented { width: min(100%, 30rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.start-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.start-row p { margin: 0; color: var(--muted); }
.start-button { min-width: 9rem; border: 0; }
.start-button:disabled { cursor: wait; opacity: 0.5; }

.practice-run { margin-top: 3.5rem; }
.run-status { display: grid; grid-template-columns: auto minmax(10rem, 1fr) auto; align-items: center; gap: 1.25rem; margin-bottom: 1rem; }
.run-progress { display: grid; grid-template-columns: auto minmax(5rem, 1fr); align-items: center; gap: 0.8rem; color: var(--muted); font-size: 0.85rem; font-weight: 800; }
.progress-track { height: 0.4rem; overflow: hidden; border-radius: 999px; background: var(--red-100); }
.progress-track span { display: block; width: 0; height: 100%; background: var(--red-700); transition: width 240ms ease; }
.run-status > strong { color: var(--red-800); font-size: 0.85rem; }
.quiet-button { padding: 0; border: 0; color: var(--muted); background: transparent; font-weight: 800; }
.quiet-button:hover { color: var(--red-800); }

.question-card { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 2.5rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; box-shadow: var(--shadow); }
.question-main { min-width: 0; }
.question-meta { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.question-meta span { padding: 0.3rem 0.55rem; border-radius: 999px; color: var(--red-900); background: var(--red-100); font-size: 0.76rem; font-weight: 900; }
.question-prompt { margin: 0; font-size: clamp(1.35rem, 3vw, 2.1rem); line-height: 1.45; overflow-wrap: anywhere; }
.passage { margin-bottom: 1.5rem; padding: 1.2rem; border-left: 4px solid var(--red-700); background: var(--red-050); }
.passage h2 { margin: 0 0 0.8rem; color: var(--red-900); font-size: 1rem; }
.passage p { margin: 0; line-height: 1.9; }
.passage:not(:has(.passage-blank)) p { white-space: pre-line; }
.passage-blank { display: inline-flex; min-width: 2rem; justify-content: center; margin: 0 0.1rem; padding: 0 0.25rem; border-bottom: 1px solid var(--red-700); color: var(--red-800); font-weight: 900; }
.passage-blank.current { color: #fff; background: var(--red-700); }
.choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-top: 1.5rem; }
.choice { display: flex; align-items: center; gap: 0.8rem; min-height: 3.5rem; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 0.45rem; color: var(--ink); background: var(--soft); text-align: left; }
.choice b { display: grid; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--red-800); font-size: 0.75rem; }
.choice.selected { border-color: var(--red-700); background: var(--red-050); }
.choice.correct { color: #fff; border-color: var(--success); background: var(--success); }
.choice.wrong { color: #fff; border-color: var(--red-700); background: var(--red-700); }
.choice.correct b, .choice.wrong b { color: inherit; border-color: currentColor; }
.response-field { width: 100%; min-height: 3.25rem; margin-top: 1.5rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 0.45rem; color: var(--ink); background: var(--soft); font: inherit; resize: vertical; }
.response-field:focus { outline: 2px solid var(--red-100); border-color: var(--red-700); }
.question-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.25rem; }
.question-side { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.question-side span { display: block; color: var(--muted); font-size: 0.8rem; }
.question-side strong { display: block; margin-top: 0.3rem; color: var(--red-900); font-size: 1.1rem; }
.side-block + .side-block { margin-top: 1.4rem; }
.feedback-panel { margin-top: 1.5rem; padding: 1.1rem; border-left: 4px solid var(--red-700); background: var(--red-050); }
.feedback-panel.correct { border-color: var(--success); background: #f2fbf7; }
.feedback-panel h3 { margin: 0; font-size: 1rem; }
.feedback-panel p { margin: 0.55rem 0 0; line-height: 1.65; }
.model-answer { color: var(--red-900); font-weight: 900; }
.self-check { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1rem; }
.session-result { padding: clamp(2rem, 6vw, 5rem); border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; box-shadow: var(--shadow); text-align: center; }
.session-result strong { display: block; color: var(--red-900); font-size: clamp(4rem, 10vw, 7rem); line-height: 1; }
.session-result h2 { margin: 1rem 0 0; font-size: clamp(1.6rem, 4vw, 2.6rem); }
.session-result p { color: var(--muted); }
.session-result .actions { justify-content: center; }
.quality-note { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem; margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.quality-note strong { color: var(--red-800); }
.quality-note p { margin: 0; color: var(--muted); line-height: 1.7; }

@media (max-width: 820px) {
  .module-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-card { grid-template-columns: 1fr; }
  .question-side { display: grid; grid-template-columns: repeat(2, 1fr); padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .side-block + .side-block { margin-top: 0; }
}

@media (max-width: 620px) {
  .practice-heading { align-items: start; flex-direction: column; }
  .bank-total { padding: 0; border: 0; text-align: left; }
  .setup-copy, .setup-row { grid-template-columns: 1fr; }
  .setup-copy p:last-child { grid-column: 1; grid-row: auto; margin-top: 1rem; }
  .setup-row { gap: 0; }
  .start-row { align-items: stretch; flex-direction: column; }
  .module-options, .choice-list { grid-template-columns: 1fr; }
  .run-status { grid-template-columns: 1fr auto; }
  .run-progress { grid-column: 1 / -1; grid-row: 2; }
  .quality-note { grid-template-columns: 1fr; gap: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-track span { transition: none; }
}