/* A quiet practice desk: one question surface, controls within reach. */
:root {
  --cream: #f6f1e8;
  --navy: #1a2332;
  --navy-soft: #38473e;
  --muted: #596358;
  --line: #e2e4d9;
  --soft: #eef1e9;
  --green: #1e6b4a;
  --green-bg: #edf6ef;
  --red: #ae3e31;
}
body {background: radial-gradient(ellipse at 6% 18%, #eceede 0, transparent 45%), var(--cream)}
.site-header {background: transparent; border-bottom-color: #dfdfd4}
.main-nav a {display: inline-flex; align-items: center; gap: 7px; white-space: nowrap}
.main-nav .nav-icon {width: 18px; height: 18px; flex-shrink: 0}
.main-nav a[aria-current=page] {color: var(--green); border-color: var(--green)}
.language-picker {border: 1px solid #d4d9cc; border-radius: 28px; padding-inline: 12px 4px; background: #fffcf6}
.site-footer {background: transparent}
.practice-section {max-width: 1180px; padding-block: 32px 24px}
.practice-heading {display: flex; justify-content: space-between; gap: 32px; margin-bottom: 24px}
.practice-welcome .eyebrow {display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .8px; margin-bottom: 7px}
.practice-welcome .flag-mark {width: 21px; height: 15px}
.practice-heading h1 {font: 400 36px/1.2 Georgia, "Times New Roman", serif; letter-spacing: -.8px}
.progress-glance {display: flex; align-items: center; gap: 16px; width: 250px; flex-shrink: 0}
.progress-glance > .icon {width: 48px; height: 48px; padding: 10px; background: #e3e9d8; color: var(--green); border-radius: 50%}
.progress-reading {flex: 1; min-width: 0}
.progress-fraction {display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; justify-content: flex-start}
.progress-fraction strong {font-size: 25px; line-height: 1.2; font-weight: 650}
.progress-fraction strong:first-child {color: var(--green)}
.progress-fraction strong:nth-of-type(2) {font-size: 17px; font-weight: 500}
.progress-fraction > span {color: var(--muted)}
.progress-reading p {font-size: 12px; line-height: 1.5; margin-top: 3px; color: var(--muted)}
.progress-reading #learning-progress {height: 4px; margin-top: 8px; background: #dce2d2}
.progress-reading #learning-progress::-webkit-progress-bar {background: #dce2d2}
.dashboard-metrics {display: flex; align-items: center; gap: 28px}
.readiness-widget {display: grid; justify-items: center; gap: 3px; width: 112px; margin: 0; flex-shrink: 0; color: var(--green)}
.readiness-gauge {position: relative; width: 90px; height: 90px; --completion: 0}
.readiness-gauge > svg {width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg)}
.readiness-track, .readiness-fill {fill: none; stroke-width: 7}
.readiness-track {stroke: #dfe5d5}
.readiness-fill {stroke: var(--green); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--completion)); transition: stroke-dashoffset .65s ease}
.readiness-number {position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; line-height: 1}
.readiness-number strong {font-size: 24px; font-weight: 650}
.readiness-number > span {font-size: 12px; color: var(--muted)}
.readiness-widget figcaption {font-size: 12px; font-weight: 600; line-height: 1.4}
.readiness-trend {width: 104px; height: 28px; overflow: visible}
#readiness-trend-line {fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round}
#readiness-trend-fill {fill: #1e6b4a12}
#readiness-trend-dot {fill: var(--green); stroke: var(--cream); stroke-width: 1}
@media (max-width: 680px) {
  .dashboard-section .practice-heading {display: grid; grid-template-columns: minmax(0,1fr) 104px; column-gap: 18px; row-gap: 12px; align-items: center}
  .dashboard-section .practice-welcome {grid-column: 1; grid-row: 1}
  .dashboard-metrics {display: contents}
  .dashboard-metrics .progress-glance {grid-column: 1; grid-row: 2; width: auto}
  .dashboard-metrics .readiness-widget {grid-column: 2; grid-row: 1 / span 2; width: 104px}
  .readiness-gauge {width: 82px; height: 82px}
  .readiness-number strong {font-size: 22px}
  .readiness-trend {width: 96px; height: 25px}
}
@media (prefers-reduced-motion: reduce) {.readiness-fill {transition: none}}
.practice-tools.study-sidebar {display: block; margin-bottom: 22px}
.practice-toolbar {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #dadfd1}
.study-navigation {display: flex; align-items: start; gap: 20px; padding: 0; border: 0; background: transparent; margin: 0; width: fit-content}
.study-tab {display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 88px; min-height: 96px; gap: 9px; padding: 5px; border: 0; border-radius: 18px; background: transparent; color: var(--muted); font-size: 12px; line-height: 1.5; font-weight: 500; white-space: nowrap; box-shadow: none}
.study-symbol {position: relative; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid #d5dfce; border-radius: 50%; background: #e5ecd9; color: #416248; transition: background .15s, border-color .15s, box-shadow .15s}
#review-mistakes .study-symbol {background: #f4e6dc; border-color: #e9d6c7; color: #9d4c32}
#saved-practice .study-symbol {background: #eee5dd; border-color: #e2d3c7; color: #855244}
.study-tab .icon {width: 25px; height: 25px; stroke-width: 1.8}
#quick-practice .icon {fill: currentColor; stroke-width: 1; transform: translateX(-1px)}
.study-tab.active {background: transparent; color: var(--green); box-shadow: none; font-weight: 650}
.study-tab.active .study-symbol {background: var(--green); border-color: var(--green); color: #fffdf9; box-shadow: 0 0 0 4px #f6f1e8, 0 0 0 5px #b7c9ad}
#review-mistakes.active .study-symbol {background: #9d4c32; border-color: #9d4c32; color: #fffdf9; box-shadow: 0 0 0 4px #f6f1e8, 0 0 0 5px #d5b9a5}
#saved-practice.active .study-symbol {background: #855244; border-color: #855244; color: #fffdf9; box-shadow: 0 0 0 4px #f6f1e8, 0 0 0 5px #d2bbae}
#review-mistakes.active {color: #9d4c32}
#saved-practice.active {color: #855244}
#saved-practice.active .icon {fill: currentColor}
.study-tab:hover:not(.active) {background: transparent; color: var(--navy)}
.study-tab:hover:not(.active) .study-symbol {box-shadow: 0 0 0 4px #fffdf980}
.mistake-count, .study-tab.active .mistake-count {position: absolute; inset-block-start: -4px; inset-inline-end: -5px; display: grid; place-items: center; margin: 0; background: #fffdf9; color: var(--navy); min-width: 23px; height: 23px; line-height: 1; padding: 0 5px; border: 1px solid #d8dbcf; border-radius: 12px; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums}
.focus-picker {display: flex; align-items: center; gap: 18px; padding-top: 16px}
.focus-label {color: var(--muted); font-size: 12px; white-space: nowrap}
.focus-select {width: 340px; max-width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid #cdd6c4; border-radius: 16px; background: #fffdf9; color: var(--navy); font: inherit; font-size: 14px; cursor: pointer}
.focus-select:hover {border-color: #a9b99c}
.question-panel {overflow: visible; background: #fffdf9; border: 1px solid #e2e2d6; border-radius: 28px; box-shadow: 0 12px 30px #43563305}
.question-content {padding: 24px 32px 32px}
.question-topline {align-items: center; margin-bottom: 12px; gap: 16px}
.question-context {display: flex; align-items: center; gap: 20px; flex-wrap: wrap; min-width: 0}
.topic-tag {color: var(--green); font-size: 13px; font-weight: 600; background: transparent; padding: 0; white-space: nowrap}
.topic-tag .icon {width: 18px; height: 18px}
.question-count {font-size: 13px; font-weight: 400; color: var(--muted)}
.bookmark-control {border: 0; background: transparent; color: var(--muted); display: flex; align-items: center; gap: 8px; padding: 10px 0 10px 12px; min-height: 48px; font-size: 13px; line-height: 1.4; border-radius: 24px; white-space: nowrap}
.bookmark-control .icon {width: 20px; height: 20px}
.bookmark-control:hover, .bookmark-control.saved {color: var(--green)}
.bookmark-control.saved .icon {fill: #dce8d4}
.round-progress {gap: 7px; margin-bottom: 26px; max-width: 120px}
.progress-segment {height: 3px; background: #e2e8da}
.progress-segment.current {background: #7c8e6f}
.progress-segment.done {background: var(--green)}
.question-workspace {display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); align-items: center; gap: 40px}
.image-stage {position: relative; width: 100%; padding: 28px 22px 18px; border: 0; border-radius: 160px 160px 28px 28px; background: #eff1e6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 340px}
.image-stage:hover {background: #e8edde}
.question-workspace .question-image, .question-workspace .question-image.meeting {width: 100%; height: 270px; object-fit: contain; border: 0; border-radius: 12px; background: transparent; margin: 0}
.question-workspace .meeting .question-image {height: 330px}
.image-stage.meeting {padding-top: 22px; border-radius: 68px 68px 28px 28px}
.image-caption {display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: #53624a; line-height: 1.5}
.image-caption .icon {width: 16px; height: 16px}
.answer-area {min-width: 0}
.question-title, html[lang=ar] .question-title {font-size: 27px; font-weight: 600; line-height: 1.4; letter-spacing: -.6px; margin-bottom: 20px}
.answer-prompt {font-size: 12px; color: var(--muted); margin-bottom: 10px; padding: 0}
.options {gap: 10px}
.option {min-height: 66px; padding: 14px 18px; gap: 12px; background: #fffdf9; border-color: #dce1d6; border-radius: 22px; box-shadow: none}
.option:hover {background: #f5f7ef; border-color: #b3c1a9}
.option-text {font-size: 16px; line-height: 1.65}
.option-letter {border-radius: 50%; width: 30px; height: 30px; font-size: 13px; background: #f2f4ed; border-color: #d7ddcf; color: #5b6856}
.option.selected {border-color: var(--navy); background: #f0f2f5; box-shadow: 0 0 0 1px var(--navy)}
.option.selected .option-letter {background: var(--navy); color: white; border-color: var(--navy)}
.option.correct {background: #e5f5e9; border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green)}
.option.correct .option-letter {background: var(--green); color: white; border-color: var(--green)}
.option.incorrect {background: #fff0e9; border-color: #d29b8b; box-shadow: none}
.option.incorrect .option-letter {background: var(--red); color: white; border-color: var(--red)}
.option-marker {display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0}
.option.correct .option-marker {display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 2px 6px #1e6b4a26}
.option.correct .option-marker .icon {width: 22px; height: 22px; stroke-width: 2.6}
.option.answer-celebrate {animation: answer-bounce-glow 720ms cubic-bezier(.2,.8,.3,1)}
.option.answer-celebrate .option-marker {animation: answer-check-pop 480ms cubic-bezier(.2,.8,.3,1)}
@keyframes answer-bounce-glow {
  0% {transform: translateY(0) scale(1); background: #e5f5e9; box-shadow: inset 0 0 0 1px var(--green), 0 0 0 0 #35a86b00}
  30% {transform: translateY(-4px) scale(1.015); background: #cdf1d9; box-shadow: inset 0 0 0 1px var(--green), 0 0 0 7px #35a86b26, 0 8px 22px #1e6b4a20}
  55% {transform: translateY(1px) scale(.997); background: #e5f5e9; box-shadow: inset 0 0 0 1px var(--green), 0 0 0 11px #35a86b00}
  75% {transform: translateY(-1px) scale(1.003); background: #ddf5e5; box-shadow: inset 0 0 0 1px var(--green), 0 0 0 3px #35a86b14}
  100% {transform: translateY(0) scale(1); background: #e5f5e9; box-shadow: inset 0 0 0 1px var(--green), 0 0 0 0 #35a86b00}
}
@keyframes answer-check-pop {
  0% {transform: scale(.65); opacity: .35}
  60% {transform: scale(1.16); opacity: 1}
  100% {transform: scale(1); opacity: 1}
}
@media (prefers-reduced-motion: reduce) {
  .option.answer-celebrate, .option.answer-celebrate .option-marker {animation: none}
  .option {transition: none}
}
.question-actions {display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap}
.question-actions .button, .practice-section .button {border-radius: 28px; background: var(--green); border-color: var(--green); min-height: 52px; width: auto; font-size: 15px; padding: 14px 24px}
.question-actions .button {margin-inline-start: auto}
.practice-section .button:hover {background: #14563a; border-color: #14563a; transform: none}
.question-actions .button:disabled {background: #e8ece0; border-color: #e8ece0; color: #60695b}
.practice-section .button-secondary {background: transparent; border-color: #cdd6c4; color: var(--green)}
.practice-section .button-secondary:hover {background: #e7edde; border-color: #aeba9e}
.round-control {display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid #d6decf; background: transparent; color: var(--green); border-radius: 50%; padding: 0; flex-shrink: 0}
.round-control:hover {background: #e7edde}
.round-control:disabled {color: #8a9485; border-color: #e2e6dc; background: transparent}
.skip-control {min-height: 48px; padding: 10px 0; border: 0; background: transparent; color: #59664f; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; line-height: 1.5}
.skip-control:hover {color: var(--green)}
.back-arrow {transform: rotate(180deg)}
html[dir=rtl] .back-arrow.directional {transform: none}
.feedback {margin-top: 24px; background: #eff5eb; border-color: #d7e3ce; border-radius: 22px; padding: 0}
.feedback-title {font-size: 15px; min-height: 60px; padding: 16px 22px; font-weight: 600}
.feedback.wrong {background: #fcf3e4; border-color: #e9dcc4}
.feedback.wrong .feedback-title {color: #765221}
.feedback-content {padding: 0 22px 22px}
.feedback p {line-height: 1.8; color: #3e5140}
.feedback.wrong p {color: #62543f}
.empty-state, .results {padding: 48px 32px}
.empty-state h2, .results h2 {font: 400 34px/1.3 Georgia, "Times New Roman", serif; letter-spacing: -.7px}
.results-actions {max-width: 740px; margin-inline: auto}
.results .result-score strong {font-size: 42px; color: var(--green)}
.result-list {border-top-color: #dce1d5}
.image-dialog {padding: 22px; border: 0; border-radius: 24px; background: #fffdf9; color: var(--navy); width: min(960px,94vw); max-height: 94vh; box-shadow: 0 20px 100px #15201a40; overflow: auto}
.image-dialog::backdrop {background: #16261bd9}
.image-dialog-heading {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px}
.image-dialog-heading h2 {font-size: 16px; font-weight: 600; line-height: 1.6}
.image-dialog-heading form {margin: 0}
.image-dialog img {width: 100%; max-height: calc(90vh - 116px); object-fit: contain}
html[lang=ar] .practice-heading h1 {font-family: Tahoma,"Segoe UI",sans-serif; font-size: 28px; font-weight: 500; line-height: 1.65; letter-spacing: 0}
html[lang=ar] .question-title {letter-spacing: 0; line-height: 1.65}
html[lang=ar] .progress-fraction {justify-content: flex-end}
html[lang=ar] .empty-state h2, html[lang=ar] .results h2 {font-family: Tahoma,"Segoe UI",sans-serif; font-size: 28px; letter-spacing: 0; line-height: 1.65}
@media (max-width: 980px) {
  .question-workspace {grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 24px}
  .question-content {padding: 20px 24px 24px}
  .focus-picker {display: block}
  .focus-label {display: block; margin-bottom: 6px}
  .image-stage {padding-inline: 16px; min-height: 300px}
  .question-workspace .question-image {height: 240px}
  .question-title, html[lang=ar] .question-title {font-size: 24px}
  .question-actions {gap: 10px}
  .question-actions .button {padding-inline: 18px}
}
@media (max-width: 680px) {
  .practice-section {padding-block: 24px}
  .practice-heading {gap: 18px; align-items: center; margin-bottom: 20px}
  .practice-welcome {flex: 1; min-width: 0}
  .practice-heading h1 {font-size: 29px; line-height: 1.18; letter-spacing: -.6px}
  .practice-welcome .eyebrow {font-size: 10px; letter-spacing: .4px}
  .practice-welcome .flag-mark {display: none}
  .progress-glance {width: 155px; gap: 0}
  .progress-glance > .icon {display: none}
  .progress-fraction strong {font-size: 23px}
  .progress-reading p {font-size: 11px}
  .practice-tools.study-sidebar {margin-bottom: 16px}
  .practice-toolbar {padding-bottom: 12px}
  .study-navigation {width: 100%; justify-content: space-around; gap: 8px}
  .study-tab {width: 82px; min-width: 0; min-height: 92px; font-size: 12px}
  .study-symbol {width: 56px; height: 56px}
  .study-tab .icon {width: 24px; height: 24px}
  .focus-picker {padding-top: 10px}
  .focus-select {width: 100%}
  .question-panel {border-radius: 24px}
  .question-content {padding: 16px 20px 24px}
  .question-context {gap: 4px; display: grid}
  .topic-tag {font-size: 12px}
  .question-count {font-size: 12px}
  .bookmark-control {padding: 12px; margin-inline-end: -8px}
  .bookmark-control span {display: none}
  .round-progress {margin-bottom: 16px; max-width: 90px}
  .question-workspace {display: flex; flex-direction: column; gap: 20px; align-items: stretch}
  .answer-area {display: contents}
  .question-title, html[lang=ar] .question-title {order: -2; margin-bottom: 0; font-size: 24px; letter-spacing: -.4px}
  .image-stage {order: -1; padding: 14px 18px; border-radius: 100px 100px 24px 24px; min-height: 0; gap: 8px}
  .question-workspace .question-image {height: 210px}
  .question-workspace .meeting .question-image {height: 280px}
  .image-stage.meeting {border-radius: 32px}
  .image-caption {font-size: 11px}
  .option {border-radius: 20px; min-height: 66px; padding: 14px; gap: 10px}
  .option-text {font-size: 16px}
  .answer-prompt {margin-bottom: 10px}
  .question-actions {margin-top: 0; flex-wrap: nowrap; gap: 12px}
  .question-actions .button {font-size: 14px; gap: 10px; padding-inline: 18px}
  .skip-control {font-size: 12px}
  .feedback {margin-top: 20px}
  .feedback-title {min-height: 60px; padding: 14px 18px}
  .feedback-content {padding: 0 18px 18px}
  .empty-state, .results {padding: 40px 20px}
  .results-actions {flex-direction: column}
  .results-actions .button {width: 100%}
  .image-dialog {padding: 16px}
  html[lang=ar] .practice-heading h1 {font-size: 22px; line-height: 1.6}
  html[lang=ar] .study-tab {font-size: 12px}
}
@media (max-width: 380px) {
  .practice-heading h1 {font-size: 25px}
  .progress-glance {width: 126px}
  .question-content {padding-inline: 16px}
  .question-title, html[lang=ar] .question-title {font-size: 22px}
  .question-actions {flex-wrap: wrap; gap: 8px}
  .question-actions .button {flex: 1; padding-inline: 13px; gap: 6px}
  .skip-control {padding-inline: 3px}
}

/* Practice is a focused question view. Study controls belong to the dashboard. */
[hidden] {display: none !important}
body.is-practicing {background: #f7f5ef}
.is-practicing .site-header {border: 0}
.is-practicing .header-inner {height: 80px; min-height: 80px; flex-wrap: nowrap; padding-block: 8px}
.is-practicing .main-nav {width: auto; order: 0; margin-inline-start: auto; gap: 16px}
.is-practicing .main-nav a {font-size: 14px; color: var(--muted); border: 0; padding-inline: 8px}
.is-practicing .brand-wordmark small {display: none}
.practice-section {max-width: 1100px; padding-block: 24px 48px; min-height: calc(100vh - 80px)}
.practice-section .question-panel {border: 0; background: transparent; box-shadow: none}
.practice-section .question-content {padding: 32px 0}
.practice-section .question-workspace {gap: 56px; align-items: center}
.practice-section .image-stage, .practice-section .image-stage.meeting {background: transparent; border-radius: 16px; min-height: 0; padding: 0; gap: 0}
.practice-section .image-stage:hover {background: #eeeee5}
.practice-section .question-image, .practice-section .meeting .question-image {height: 360px; border-radius: 12px}
.practice-section .question-title {font-size: 28px; margin-bottom: 28px}
.practice-section .options {gap: 12px}
.practice-section .option {background: #fffdf9; min-height: 72px; border-radius: 18px; padding: 16px 18px}
.practice-section .option.selected {background: #f0f2f5}
.practice-section .option.correct {background: #e5f5e9}
.practice-section .option.incorrect {background: #fff0e9}
.practice-section .question-actions {justify-content: flex-end; margin-top: 24px}
.practice-section .question-actions .button {min-width: 170px}
.dashboard-section {max-width: 1100px; padding-block: 32px 48px; min-height: calc(100vh - 184px)}
.dashboard-section .practice-welcome h1 {font: 400 36px/1.2 Georgia,serif; letter-spacing: -.8px}
.dashboard-section .practice-tools {margin-bottom: 16px}
.dashboard-section .button {background: var(--green); border-color: var(--green); border-radius: 28px}
.dashboard-section .button:hover {background: #14563a; border-color: #14563a}
.dashboard-section .button-secondary {background: transparent; color: var(--green); border-color: #cdd6c4}
.dashboard-section .results {padding-block: 32px}
.dashboard-section .result-list {margin-top: 16px}
.dashboard-section .compact-results {padding: 24px; text-align: start}
.compact-results .results-overview {display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 16px; align-items: center}
.compact-results .results-icon {width: 44px; height: 44px; margin: 0; flex-shrink: 0}
.compact-results .results-icon .icon {width: 22px; height: 22px}
.compact-results h2 {font-family: inherit; font-size: 22px; font-weight: 650; line-height: 1.4; letter-spacing: -.3px; margin: 0}
.compact-results .result-score {display: grid; gap: 2px; margin: 0; text-align: end; line-height: 1.3}
.compact-results .result-score strong {font-size: 32px}
.compact-results .result-score span {font-size: 14px; color: var(--muted)}
.compact-results .result-score .result-label {font-size: 12px}
.compact-results .result-coverage {font-size: 13px; margin: 12px 0 0; color: var(--muted)}
.compact-results .results-details {border-block: 1px solid #e3e6dc; margin-top: 20px}
.compact-results .results-details summary {display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; color: var(--muted); cursor: pointer; list-style: none}
.compact-results .results-details summary::-webkit-details-marker {display: none}
.compact-results .results-details summary .icon {width: 16px; height: 16px}
.compact-results .results-details[open] summary .icon {transform: rotate(180deg)}
.dashboard-section .compact-results .result-list {margin: 0 0 8px; border: 0; max-width: none}
.compact-results .result-list li {font-size: 14px; padding-block: 10px}
.compact-results .results-actions {display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; max-width: none}
.compact-results .results-actions .button {flex: 1 1 160px; width: auto; min-height: 44px; font-size: 14px; padding: 10px 18px; gap: 10px}
html[lang=ar] .compact-results h2 {font-size: 21px; line-height: 1.6}
@media (max-width: 480px) {
  .dashboard-section .compact-results {padding: 20px 16px}
  .compact-results .results-overview {grid-template-columns: minmax(0,1fr) auto; gap: 12px}
  .compact-results .results-icon {display: none}
  .compact-results h2, html[lang=ar] .compact-results h2 {font-size: 19px}
  .compact-results .result-score strong {font-size: 28px}
  .compact-results .results-actions {gap: 8px}
  .compact-results .results-actions .button {flex-basis: 120px; font-size: 13px; padding-inline: 12px}
}
.mode-heading {font: 400 30px/1.3 Georgia,serif; letter-spacing: -.5px; margin: 8px 0 0}
.mistakes-section.practice-section .question-content {padding-top: 24px}
.mistakes-section.practice-section .question-title {font-size: 28px; line-height: 1.4}
.mistakes-section .review-complete {padding-block: 32px; text-align: center}
.mistakes-section .review-complete h3 {font-size: 24px; line-height: 1.5; margin-bottom: 12px}
.mistakes-section .review-complete p {font-size: 16px; color: var(--muted); line-height: 1.7; margin-bottom: 24px}
.mistakes-section .feedback-content h3 {font-size: 18px; line-height: 1.6; margin-bottom: 12px}
.mistakes-section .bookmark-control span {display: inline}
.mistakes-section h2 {font-size: 22px; line-height: 1.5; font-weight: 600; letter-spacing: -.3px}
html[lang=ar] .dashboard-section .practice-welcome h1 {font-family: Tahoma,"Segoe UI",sans-serif; font-size: 28px; letter-spacing: 0; line-height: 1.65}
@media (max-width: 980px) {
  .practice-section .question-workspace {gap: 32px}
  .practice-section .question-title {font-size: 25px}
  .practice-section .question-image, .practice-section .meeting .question-image {height: 300px}
}
@media (max-width: 680px) {
  .is-practicing .header-inner {gap: 12px; min-height: 72px; height: 72px}
  .is-practicing .brand-icon {width: 44px}
  .is-practicing .brand-wordmark {font-size: 17px}
  .is-practicing .main-nav {gap: 8px}
  .is-practicing .main-nav a {padding: 0; font-size: 13px; gap: 6px}
  .main-nav .nav-icon {width: 16px; height: 16px}
  .practice-section {padding-block: 8px 32px; min-height: calc(100vh - 72px)}
  .practice-section .question-content {padding: 16px 0}
  .practice-section .question-workspace {gap: 24px; align-items: stretch}
  .practice-section .question-title, html[lang=ar] .practice-section .question-title {font-size: 24px; margin: 0; line-height: 1.5}
  html[lang=ar] .practice-section .question-title {line-height: 1.7; letter-spacing: 0}
  .practice-section .question-image {height: 210px}
  .practice-section .meeting .question-image {height: 280px}
  .practice-section .option {min-height: 68px; padding: 14px; border-radius: 16px}
  .practice-section .question-actions {margin-top: 0}
  .practice-section .question-actions .button {width: 100%; margin: 0; min-height: 52px}
  .dashboard-section {padding-block: 24px 32px}
  .dashboard-section .practice-welcome h1 {font-size: 29px}
  .mistakes-section.practice-section .question-title {font-size: 24px; line-height: 1.5}
  html[lang=ar] .mistakes-section.practice-section .question-title {line-height: 1.7}
}
@media (max-width: 380px) {
  .is-practicing .brand-icon {width: 36px}
  .is-practicing .brand-wordmark {font-size: 17px}
  .is-practicing .main-nav a {font-size: 12px}
  .practice-section .question-title, html[lang=ar] .practice-section .question-title {font-size: 22px}
}

@media (max-width: 380px) {
  .is-practicing .brand-wordmark {display: none}
  .is-practicing .brand-icon {width: 48px}
}

html[lang=ar] .mode-heading {font-family: Tahoma,"Segoe UI",sans-serif; font-size: 28px; letter-spacing: 0; line-height: 1.7}
@media (max-width: 680px) {.mode-heading {font-size: 26px; margin-top: 16px} html[lang=ar] .mode-heading {font-size: 24px}}

/* Image-free questions use the full reading column, with no empty image area. */
.practice-section .question-workspace.text-only {display: block; max-width: 760px; margin-inline: auto}
.text-only .answer-area {display: block}
@media (max-width: 680px) {
  .practice-section .text-only .question-title {margin-bottom: 24px}
  .practice-section .text-only .question-actions {margin-top: 24px}
}