:root {
  color-scheme: light;
  --ink: #202923;
  --muted: #687269;
  --paper: #f5f5f0;
  --white: #fff;
  --line: #e3e6df;
  --green: #2f694d;
  --green-dark: #255a3f;
  --lime: #d9ef89;
  --soft: #eaf0e8;
  --ok-bg: #edf6eb;
  --ok-line: #9fc8a5;
  --bad-bg: #fcf0eb;
  --bad-line: #e2a48e;
  --wrong-line: #d23f31;
  --wrong-bg: #fdeae7;
  --wrong-ink: #b02a1e;
  --shadow: 0 18px 50px rgba(35, 48, 37, .08);
  --sans: 'DM Sans', 'Noto Sans Armenian', Arial, sans-serif;
  --display: Manrope, 'Noto Sans Armenian', Arial, sans-serif;
  --serif: Georgia, 'Noto Serif Armenian', 'Times New Roman', serif;
}


* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--sans); }
a { color: inherit; }
.app-shell { max-width: 1280px; margin: auto; padding: 0 32px; }

/* ---------- header / footer */
.topbar { min-height: 76px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 39px; height: 39px; border-radius: 13px; background: var(--theme-action, var(--green)); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 25px var(--display); letter-spacing: -2px; }
.brand-mark span { color: var(--lime); }
.brand b { display: block; font: 800 16px var(--display); letter-spacing: -.3px; }
.brand small { display: block; color: var(--muted); font-size: 10px; letter-spacing: 1.4px; font-weight: 700; }
.main-nav { display: flex; gap: 4px; }
.main-nav a { white-space: nowrap; }
.main-nav a, .language-switch button { text-decoration: none; border: 0; background: none; cursor: pointer; border-radius: 9px; padding: 8px 12px; font: 600 14px var(--sans); color: var(--muted); }
.main-nav a:hover, .language-switch button:hover { color: var(--ink); background: var(--theme-surface-raised, #ecefe8); }
.main-nav a.active { color: var(--green); background: var(--soft); }
.language-switch { display: flex; border: 1px solid var(--line); border-radius: 11px; padding: 3px; background: var(--theme-surface, #fff); margin: 0; }
.language-switch button { padding: 5px 9px; font-size: 12px; letter-spacing: .5px; }
.language-switch button.active { background: var(--theme-action, var(--green)); color: #fff; }
.footer { border-top: 1px solid var(--line); padding: 18px 0 26px; display: flex; justify-content: space-between; gap: 16px; color: var(--theme-muted-text, #8a9289); font-size: 13px; }

/* ---------- common */
.view { padding: 30px 0 64px; }
.eyebrow { text-transform: uppercase; color: var(--green); font-size: 12px; letter-spacing: 1.6px; font-weight: 700; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--theme-muted-text, #9aa198); font-size: 13px; margin: 4px 0 20px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--green); }
.page-title { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; }
.page-title h1 { font: 800 34px/1.15 var(--display); letter-spacing: -1.2px; margin: 7px 0 6px; }
.page-title p { color: var(--muted); font-size: 15px; margin: 0; max-width: 720px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }
.section-heading h2 { font: 800 23px var(--display); margin: 0; letter-spacing: -.6px; }
.section-heading span { font-size: 13px; color: var(--muted); }
.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--theme-surface, #fff); color: var(--ink); border-radius: 10px; padding: 10px 14px; font: 600 14px var(--sans); cursor: pointer; text-decoration: none; }
.button:hover { border-color: var(--theme-success-line, #a9c3aa); background: var(--theme-surface-subtle, #f7faf6); }
.button.primary { background: var(--theme-action, var(--green)); border-color: var(--green); color: #fff; }
.button.primary:hover { background: var(--theme-action-hover, var(--green-dark)); }
.button.soft { background: var(--theme-surface-raised, #edf1ea); border-color: var(--theme-line, #edf1ea); color: var(--theme-green-text, #345f43); }
.button.large { padding: 13px 20px; font-size: 15px; border-radius: 12px; }
.button.disabled, .button:disabled { opacity: .42; cursor: default; pointer-events: none; }
.empty { text-align: center; background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 18px; padding: 48px 20px; color: var(--muted); }
.empty b { display: block; font: 800 40px var(--display); color: var(--ink); margin: 10px; }
.progress-track { height: 5px; background: var(--theme-surface-raised, #edf0eb); border-radius: 10px; margin-top: 7px; width: 170px; overflow: hidden; }
.progress-track i { display: block; height: 100%; background: #6a9a6e; width: var(--pct, 0%); transition: width .3s; }

/* ---------- home */
.hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px; align-items: center; padding: 48px 0 46px; }
.hero h1 { font: 800 clamp(38px, 5.3vw, 64px)/1.05 var(--display); margin: 16px 0; letter-spacing: -2.5px; max-width: 700px; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero p { color: var(--muted); max-width: 560px; line-height: 1.7; font-size: 16px; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-art { min-height: 245px; border-radius: 24px; background: var(--theme-surface-raised, #dfe9dc); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero-art:before, .hero-art:after { content: ''; position: absolute; border-radius: 50%; border: 1px solid var(--theme-success-line, rgba(48, 91, 62, .14)); }
.hero-art:before { width: 300px; height: 300px; }
.hero-art:after { width: 220px; height: 220px; }
.book-stack { position: relative; z-index: 2; display: flex; gap: 10px; align-items: center; transform: rotate(-7deg); }
.book-spine { width: 73px; height: 146px; border-radius: 7px 11px 11px 7px; box-shadow: 9px 12px 20px #64766440; display: flex; align-items: center; justify-content: center; color: #fff; font: 800 13px var(--display); writing-mode: vertical-rl; letter-spacing: 2px; }
.book-spine:nth-child(1) { background: #c57c5a; height: 126px; }
.book-spine:nth-child(2) { background: #345e49; height: 155px; }
.book-spine:nth-child(3) { background: #435a79; height: 137px; }
.stat-pill { position: absolute; z-index: 3; right: 25px; bottom: 22px; background: var(--theme-surface, #fff); border-radius: 13px; padding: 12px 15px; box-shadow: var(--shadow); font-size: 12px; color: var(--muted); }
.stat-pill b { color: var(--ink); font-size: 17px; display: block; }
.book-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.book-card { display: block; text-decoration: none; border: 1px solid var(--line); background: var(--theme-surface, #fff); border-radius: 19px; padding: 22px 23px; min-height: 220px; position: relative; transition: .2s; overflow: hidden; }
.book-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--theme-line, #c5d4c5); }
.book-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.book-number { font-size: 12px; letter-spacing: 1.4px; color: var(--muted); font-weight: 700; }
.book-chip { border-radius: 999px; background: var(--theme-surface-raised, #f0f2ec); color: var(--muted); font-size: 12px; padding: 6px 10px; }
.book-card h3 { font: 800 26px var(--display); letter-spacing: -.8px; margin: 24px 0 5px; }
.book-card p { font-size: 14px; color: var(--muted); margin: 0; }
.book-card-bottom { position: absolute; left: 23px; right: 23px; bottom: 19px; display: flex; align-items: center; justify-content: space-between; }
.progress-copy { color: var(--muted); font-size: 12px; }
.arrow { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; color: var(--green); font-size: 18px; }

/* ---------- book / section */
.book-progress { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 13px; padding: 11px 14px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.book-progress b { font: 700 15px var(--display); color: var(--ink); }
.section-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.section-card { display: block; text-decoration: none; background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 16px; padding: 17px 18px; min-height: 150px; transition: .18s; }
.section-card:hover { transform: translateY(-2px); border-color: var(--theme-success-line, #b5c9b8); box-shadow: 0 10px 24px #2235220d; }
.section-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.section-num { font-size: 12px; font-weight: 700; color: var(--green); letter-spacing: 1px; }
.section-count { font-size: 12px; color: var(--muted); background: var(--theme-surface-raised, #f4f5f1); border-radius: 10px; padding: 4px 8px; }
.section-card h3 { font: 700 17px var(--display); margin: 13px 0 5px; }
.section-card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.45; }
.kind-badge { margin-top: 12px; color: var(--theme-green-text, #56775d); font-size: 12px; font-weight: 700; }
.task-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; }
.task-list-panel, .reader-panel { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 17px; overflow: hidden; }
.task-list-panel { position: sticky; top: 16px; }
.panel-heading { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel-heading b { display: block; font: 700 15px var(--display); }
.task-search { width: 100%; margin-top: 11px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--theme-surface-subtle, #fafbf8); font: 500 14px var(--sans); outline: none; }
.task-search:focus { border-color: var(--theme-success-line, #85aa8a); box-shadow: 0 0 0 3px #e9f0e8; }
.task-list { max-height: 70vh; overflow: auto; padding: 8px; }
.task-item { display: flex; justify-content: space-between; align-items: center; border-radius: 10px; padding: 9px 11px; text-decoration: none; font: 500 14px var(--sans); }
.task-item:hover { background: var(--theme-surface-raised, #f6f7f3); }
.task-item.active { background: var(--soft); color: var(--theme-green-text, #285e43); font-weight: 700; }
.task-item small { font-size: 12px; color: var(--theme-warning-text, #b0773f); }
.task-item.done small:empty:after { content: '✓'; color: var(--theme-green-text, #56775d); }
.task-item[hidden] { display: none; }
.reader-top { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 12px; }
.reader-label b { font: 700 15px var(--display); display: block; }
.reader-label span { font-size: 13px; color: var(--muted); }
.study-note { display: flex; gap: 12px; padding: 15px 18px; border-top: 1px solid var(--line); align-items: flex-start; }
.note-icon { width: 28px; height: 28px; border-radius: 9px; background: var(--theme-surface-raised, #f5e8dd); color: var(--theme-warning-text, #a7643d); display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; }
.study-note b { font-size: 13px; display: block; margin: 1px 0 4px; }
.study-note p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; }
.exercise-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 16px 18px; }
.exercise-navigation > span { font-size: 13px; color: var(--muted); }
.exercise-navigation .button { min-width: 140px; }

/* ---------- items */
.item { margin: 0 0 18px; }
.reader-panel .item { margin: 0; padding: 4px 0 8px; }
.test-block .item { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 17px; padding-bottom: 6px; }
.test-block .question-card { border: 0; border-radius: 0; padding: 4px 0; margin: 12px 18px; }
.test-block .question-card + .question-card { border-top: 1px solid var(--line); padding-top: 16px; }
.item-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 0; }
.reader-panel .item-head { display: none; }
.item-head b { font: 700 15px var(--display); display: block; }
.item-head span { font-size: 13px; color: var(--muted); }
.item-number { width: 32px; height: 32px; border-radius: 10px; background: var(--soft); color: var(--green); display: grid; place-items: center; font: 800 14px var(--display); flex: 0 0 auto; }
.item-score { margin-left: auto; border-radius: 8px; padding: 4px 9px; font: 700 13px var(--display); }
.item-score.ok { background: var(--ok-bg); color: var(--theme-green-text, #2d7047); }
.item-score.no { background: var(--bad-bg); color: var(--theme-error-text, #9b593d); }
.passage-card, .question-card, .missing-content { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 15px; padding: 20px; margin: 16px 17px; }
.passage-card { background: var(--theme-surface-subtle, #fbfcf9); }
.passage-label, .question-tag { font-size: 11px; letter-spacing: 1.2px; color: var(--green); font-weight: 800; text-transform: uppercase; }
.passage-text { font: 400 16px/1.8 var(--serif); color: var(--theme-body-text, #303a32); margin-top: 12px; }
.passage-lines { margin: 0; padding-left: 2.6em; }
.passage-lines li { padding-left: .4em; }
.passage-lines li::marker { font: 500 11px var(--sans); color: var(--theme-muted-text, #a3aaa1); }
.gap-mark { display: inline-block; min-width: 2.6em; border-bottom: 2px solid var(--theme-success-line, #9fb9a2); text-align: center; font: 700 12px var(--sans); color: var(--green); background: var(--soft); border-radius: 4px 4px 0 0; padding: 0 6px; margin: 0 2px; }
.question-card h3 { font: 700 16px/1.5 var(--display); margin: 8px 0 14px; }
.question-top { display: flex; align-items: center; justify-content: space-between; }
.choice-list, .multi-options { display: grid; gap: 8px; margin-top: 10px; }
.choice-option, .multi-option { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 1px solid var(--line); border-radius: 11px; background: var(--theme-surface, #fff); padding: 11px 12px; color: var(--ink); font: 500 15px/1.5 var(--sans); text-align: left; cursor: pointer; }
.choice-option:hover, .multi-option:hover { border-color: var(--theme-success-line, #aac3aa); background: var(--theme-surface-subtle, #fbfcf9); }
.choice-option:has(input:checked), .multi-option:has(input:checked) { border-color: var(--theme-success-line, #8eae92); background: var(--theme-surface-raised, #f4f8f2); }
.choice-option input, .multi-option input { margin: 4px 0 0; accent-color: var(--green); flex: 0 0 auto; }
.choice-option > span:last-child, .multi-option > span:last-child { flex: 1; }
.choice-id, .multi-id { color: var(--green); font-weight: 800; flex: 0 0 22px; }
.choice-option.is-correct, .multi-option.is-correct { border-color: var(--ok-line); background: var(--ok-bg); }
.choice-option.is-wrong, .multi-option.is-wrong { border-color: var(--wrong-line); background: var(--wrong-bg); }
.choice-option.is-wrong .choice-id, .multi-option.is-wrong .multi-id { color: var(--wrong-ink); }
.choice-option:has(input:disabled), .multi-option:has(input:disabled) { cursor: default; }
.explanation-card { margin-top: 13px; border-radius: 12px; padding: 14px 15px; }
.explanation-card.success { background: var(--theme-surface-raised, #edf5e8); border: 1px solid var(--theme-line, #d7e7cd); }
.explanation-card.retry { background: var(--wrong-bg); border: 1px solid var(--theme-error-line, #f3c3bb); }
.explanation-card.retry > b:first-child, .explanation-card.retry > .explain-verdict { color: var(--wrong-ink); }
.explanation-card > b { font: 700 15px var(--display); }
.explanation-card > p, .item-reasons p, .option-explanation p { font-size: 14px; line-height: 1.65; color: var(--theme-body-text, #4f5c52); margin: 8px 0 0; }
.explanation-card .given { color: var(--wrong-ink); font-weight: 500; }
.option-explanation { border-top: 1px solid var(--theme-line, #dce4dc); margin-top: 9px; padding-top: 8px; }
.option-explanation summary { font-size: 14px; font-weight: 700; cursor: pointer; color: var(--theme-body-text, #526451); }
.bank-options { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 17px; }
.bank-chip { background: var(--theme-surface-raised, #f2f4ee); border: 1px solid var(--theme-line, #e3e8df); border-radius: 8px; padding: 6px 9px; font-size: 14px; color: var(--theme-body-text, #3d4a40); }
.bank-chip b { color: var(--green); margin-right: 3px; }
.bank-gaps, .match-inputs { display: grid; gap: 10px; }
.bank-gap { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.match-inputs label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .8fr); gap: 10px; align-items: center; font-size: 14px; line-height: 1.4; color: var(--theme-body-text, #4f5c52); }
.bank-gap select, .match-inputs select { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px; background: var(--theme-surface, #fff); font: 500 14px var(--sans); color: var(--ink); }
select.is-correct { border-color: var(--theme-success-line, #8dbd92); background: var(--theme-surface-raised, #f2f8ef); }
select.is-wrong { border-color: var(--wrong-line); background: var(--wrong-bg); color: var(--wrong-ink); }
.item-reasons { margin-top: 10px; }
.match-bank { display: grid; grid-template-columns: 1fr 1.2fr; gap: 13px; background: var(--theme-surface-subtle, #f8f9f5); border: 1px solid var(--line); border-radius: 12px; padding: 13px; margin: 13px 0; }
.match-bank > div > b { font-size: 11px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.match-bank p { font-size: 14px; line-height: 1.5; color: var(--theme-body-text, #4f5c52); margin: 8px 0 0; }
.match-bank strong { color: var(--green); margin-right: 5px; }
.missing-content { background: var(--theme-surface-raised, #fff6ec); border-color: var(--theme-line, #f0dfca); }
.missing-content b { font: 700 14px var(--display); }
.missing-content p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 7px 0 0; }
.item-actions { display: flex; justify-content: flex-end; padding: 0 17px 12px; }
.scoring-note { font-size: 12px; color: var(--muted); margin: -6px 17px 12px; }

/* ---------- generator */
.generator { display: grid; gap: 16px; max-width: 820px; }
.generator fieldset { border: 1px solid var(--line); border-radius: 17px; background: var(--theme-surface, #fff); padding: 8px 20px 16px; margin: 0; }
.generator legend { font: 700 13px var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; padding: 0 6px; }
.form-error { background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--theme-error-text, #8a503b); border-radius: 12px; padding: 12px 14px; font-weight: 600; }
.generator-books { display: flex; flex-wrap: wrap; gap: 10px; }
.book-toggle { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; margin-top: 8px; }
.book-toggle:has(input:checked) { border-color: var(--theme-success-line, #8eae92); background: var(--theme-surface-raised, #f4f8f2); }
.book-toggle input { accent-color: var(--green); width: 17px; height: 17px; }
.book-toggle b { display: block; font: 700 15px var(--display); }
.book-toggle small { color: var(--muted); font-size: 12px; }
.count-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.count-label b { display: block; font: 700 16px var(--display); }
.count-label small { color: var(--muted); font-size: 13px; }
.stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; flex: 0 0 auto; }
.stepper input { width: 64px; border: 0; text-align: center; font: 700 17px var(--display); padding: 9px 0; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .step { width: 40px; height: 42px; border: 0; background: var(--theme-surface-raised, #f4f6f1); color: var(--green); font: 700 19px var(--sans); cursor: pointer; }
.stepper .step:hover { background: var(--soft); }
.count-tools { display: flex; gap: 8px; padding-top: 14px; }
.reveal-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 17px; padding: 16px 20px; cursor: pointer; }
.reveal-toggle b { display: block; font: 700 16px var(--display); }
.reveal-toggle small { color: var(--muted); font-size: 13px; }
.reveal-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 46px; height: 26px; border-radius: 99px; background: var(--theme-surface-raised, #d5dbd2); position: relative; flex: 0 0 auto; transition: .2s; }
.switch:after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--theme-surface, #fff); top: 3px; left: 3px; transition: .2s; box-shadow: 0 1px 3px #0003; }
.reveal-toggle input:checked + .switch { background: var(--theme-action, var(--green)); }
.reveal-toggle input:checked + .switch:after { left: 23px; }
.reveal-toggle input:focus-visible + .switch { outline: 2px solid var(--green); outline-offset: 2px; }
.generator-submit { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.generator-submit span { font: 700 16px var(--display); }

/* ---------- test & results */
.test-block { margin-bottom: 30px; }
.test-footer { position: sticky; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 17px; padding: 12px 14px 12px 20px; box-shadow: var(--shadow); }
.test-footer span { color: var(--muted); font-size: 14px; }
.result-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 30px; }
.result-total, .result-categories { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 17px; padding: 20px; }
.result-total { display: flex; align-items: center; gap: 20px; }
.result-total h2 { font: 800 22px var(--display); margin: 0 0 6px; }
.result-total p { color: var(--muted); margin: 0; font-size: 14px; }
.result-ring { --pct: 0; width: 110px; height: 110px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--theme-action, var(--green)) calc(var(--pct) * 1%), var(--theme-surface-raised, #e6ebe3) 0); }
.result-ring b { width: 84px; height: 84px; border-radius: 50%; background: var(--theme-surface, #fff); display: grid; place-items: center; font: 800 24px var(--display); }
.result-categories > b { font: 700 13px var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.result-category { display: grid; grid-template-columns: 1fr 120px 52px; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; }
.result-category .progress-track { width: 100%; margin: 0; }
.result-category small { text-align: right; color: var(--muted); font-weight: 600; }

/* ---------- responsive */
/* the Armenian nav needs ~1140px on one row; below that it gets its own row under the brand */
@media (max-width: 1220px) {
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 12px 0; }
  .main-nav { order: 3; width: 100%; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .app-shell { padding: 0 20px; }
  .hero { grid-template-columns: 1fr .65fr; }
  .section-grid, .book-grid { grid-template-columns: repeat(2, 1fr); }
  .task-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .result-summary { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .app-shell { padding: 0 16px; }
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 12px 0; }
  .main-nav { order: 3; width: 100%; }
  .main-nav a { flex: 1; text-align: center; background: var(--theme-surface-raised, #ecefe8); }
  .hero { display: block; padding: 28px 0; }
  .hero h1 { font-size: 40px; letter-spacing: -1.5px; }
  .hero-art { min-height: 170px; margin-top: 25px; }
  .book-spine { height: 112px; width: 58px; }
  .book-grid { grid-template-columns: 1fr; }
  .section-grid { grid-template-columns: 1fr; }
  .page-title { align-items: flex-start; flex-direction: column; }
  .page-title h1 { font-size: 28px; }
  .task-layout { grid-template-columns: 1fr; }
  .task-list-panel { position: static; }
  .task-list { display: flex; overflow-x: auto; max-height: none; gap: 5px; }
  .task-item { min-width: max-content; }
  .passage-card, .question-card, .missing-content { margin: 12px 10px; padding: 15px; }
  .passage-text { font-size: 15px; }
  .passage-lines { padding-left: 2.1em; }
  .bank-gap, .match-inputs label, .match-bank { grid-template-columns: 1fr; }
  .exercise-navigation { padding: 14px 10px; }
  .exercise-navigation .button { min-width: 0; flex: 1; }
  .count-row { flex-wrap: wrap; }
  .generator fieldset { padding: 6px 14px 14px; }
  .generator-submit, .test-footer { flex-direction: column; align-items: stretch; text-align: center; }
  .result-total { flex-direction: column; text-align: center; }
  .result-category { grid-template-columns: 1fr 70px 44px; }
  .footer { flex-direction: column; }
}

@media print {
  .topbar, .footer, .page-actions, .test-footer, .item-actions, .crumbs { display: none; }
  body { background: var(--theme-surface, #fff); }
  .item { break-inside: avoid; }
}

/* ---------- exam parts */
.part-roman { display: inline-grid; place-items: center; min-width: 34px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--theme-action, var(--green)); color: #fff; font: 800 13px var(--display); letter-spacing: .5px; flex: 0 0 auto; }
.section-heading h2 .part-roman { margin-right: 6px; vertical-align: 3px; color: #fff; font-size: 13px; }
.count-row .part-roman { margin-right: -4px; }
.count-row .count-label { flex: 1; }
.part-tag { font: 600 11px var(--sans); color: var(--muted); background: var(--theme-surface-raised, #f0f2ec); border-radius: 6px; padding: 2px 7px; margin-left: 6px; vertical-align: 2px; }
.template-note { font-size: 13px; color: var(--muted); margin: 6px 0 4px; }
.item-number { width: auto; min-width: 32px; padding: 0 7px; }
.result-category { grid-template-columns: 1fr 100px 52px; }

/* ---------- formatted text */
.passage-text p { margin: 0 0 .8em; }
.passage-text p:last-child { margin-bottom: 0; }
.passage-text strong { font-weight: 700; color: var(--theme-green-text, #1d2a21); }
.choice-option em, .multi-option em { color: var(--theme-body-text, #3f4c42); }
.page-actions form { margin: 0; display: flex; }

/* ---------- data check */
.review-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.review-filters button { border: 1px solid var(--line); background: var(--theme-surface, #fff); border-radius: 999px; padding: 7px 12px; font: 600 13px var(--sans); color: var(--muted); cursor: pointer; }
.review-filters button.active { background: var(--theme-action, var(--green)); border-color: var(--green); color: #fff; }
.review-filters small { opacity: .75; margin-left: 3px; }
.review-list { display: grid; gap: 10px; }
.review-row { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 15px; padding: 14px 16px; }
.review-row[hidden] { display: none; }
.review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.review-head b { font: 700 15px var(--display); display: block; }
.review-head small { color: var(--muted); font-size: 12px; }
.review-row ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.review-row li { font-size: 14px; line-height: 1.5; padding: 7px 10px; border-radius: 9px; }
.review-row li span { font-weight: 700; margin-right: 4px; }
.issue-error { background: var(--bad-bg); color: var(--theme-error-text, #7d4632); }
.issue-warning { background: var(--theme-surface-raised, #fbf6e6); color: var(--theme-warning-text, #6d5a23); }
.footer a { color: inherit; }
.footer { flex-wrap: wrap; }
.footer-credits { flex-basis: 100%; }
.auth-credits { margin: 28px 0 0; color: var(--theme-muted-text, #8a9289); font-size: 13px; }
.auth-credits a { color: inherit; }

/* ---------- About us */
.about-page { max-width: 780px; }
.about-page h1 { margin: 6px 0 18px; }
.about-text h2 { font-size: 20px; margin: 24px 0 8px; }
.about-text p, .about-text li { line-height: 1.65; }
.about-authors { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.about-form { display: grid; gap: 18px; }
.about-lang { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 12px; min-width: 0; }
.about-lang legend { font-weight: 700; padding: 0 6px; }
.about-lang label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.about-lang input, .about-lang textarea { width: 100%; box-sizing: border-box; font: 15px/1.5 var(--sans); padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; }
.about-lang textarea { resize: vertical; }

/* ---------- accounts */
.sign-in-button { padding: 8px 14px; }
.user-menu { position: relative; }
.user-menu summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid var(--line); background: var(--theme-surface, #fff); border-radius: 11px; padding: 4px 10px 4px 4px; font: 600 14px var(--sans); }
.user-menu summary::-webkit-details-marker { display: none; }
.avatar { width: 28px; height: 28px; border-radius: 8px; background: var(--theme-action, var(--green)); color: #fff; display: grid; place-items: center; font: 800 13px var(--display); }
.user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 210px; background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); padding: 8px; display: grid; }
.user-menu-panel small { color: var(--muted); padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.user-menu-panel a, .user-menu-panel button { text-align: left; border: 0; background: none; border-radius: 8px; padding: 9px 10px; font: 500 14px var(--sans); color: var(--ink); text-decoration: none; cursor: pointer; width: 100%; }
.user-menu-panel a:hover, .user-menu-panel button:hover { background: var(--soft); }
.user-menu-panel form { margin: 0; }
.flash { margin: 16px 0 0; border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: 14px; }
.flash-success { background: var(--ok-bg); border: 1px solid var(--theme-line, #cfe3cb); color: var(--theme-green-text, #2d6440); }
.flash-info { background: var(--theme-surface-raised, #eef3f8); border: 1px solid var(--theme-line, #d9e4ee); color: var(--theme-info-text, #3a5670); }
.flash-error { background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--theme-error-text, #8a503b); }
.auth-view { display: flex; justify-content: center; padding-top: 48px; }
.auth-card { width: 100%; max-width: 420px; background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.auth-card h1 { font: 800 28px var(--display); letter-spacing: -.8px; margin: 0; }
.auth-lead { color: var(--muted); margin: -6px 0 4px; font-size: 14px; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--muted); }
.auth-links a { color: var(--green); font-weight: 600; text-decoration: none; }
.field { display: grid; gap: 6px; font-size: 14px; }
.field > span { font-weight: 600; }
.field small { color: var(--muted); font-size: 12px; }
.field input, .field select, .table-tools input, .table-tools select { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font: 500 15px var(--sans); color: var(--ink); background: var(--theme-surface, #fff); width: 100%; outline: none; }
.field input:focus, .field select:focus, .table-tools input:focus { border-color: var(--theme-success-line, #85aa8a); box-shadow: 0 0 0 3px #e9f0e8; }
.field input:disabled { background: var(--theme-surface-raised, #f6f7f3); color: var(--muted); }
.form-success { background: var(--ok-bg); border: 1px solid var(--theme-line, #cfe3cb); color: var(--theme-green-text, #2d6440); border-radius: 12px; padding: 12px 14px; font-weight: 600; }
.form-info { background: var(--theme-surface-raised, #eef3f8); border: 1px solid var(--theme-line, #d9e4ee); color: var(--theme-info-text, #3a5670); border-radius: 12px; padding: 12px 14px; }
.muted { color: var(--muted); font-size: 14px; }
.button.small { padding: 6px 10px; font-size: 13px; }
.button.danger { background: var(--theme-surface, #fff); border-color: var(--theme-error-line, #e7b3a1); color: var(--theme-error-text, #a2462b); }
.button.danger:hover { background: var(--bad-bg); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-card { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 2px; text-decoration: none; }
a.stat-card:hover { border-color: var(--theme-success-line, #b5c9b8); }
.stat-card b { font: 800 26px var(--display); letter-spacing: -.6px; }
.stat-card span { color: var(--muted); font-size: 13px; font-weight: 600; }
.stat-card small { color: var(--theme-green-text, #56775d); font-size: 12px; }
.stat-card.warn b { color: var(--theme-error-text, #a2462b); }
.panel { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 17px; padding: 18px 20px; margin-bottom: 16px; display: grid; gap: 12px; align-content: start; }
.panel h2 { font: 800 18px var(--display); margin: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.panel-grid .panel { margin-bottom: 0; }
.panel-grid + .panel, .panel-grid { margin-bottom: 16px; }
.danger-zone { border-color: var(--theme-line, #f0d6cb); }
.inline-form { display: grid; gap: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.form-grid .wide { grid-column: 1 / -1; }
.add-user summary { font: 800 16px var(--display); cursor: pointer; color: var(--green); }
.table-tools { display: flex; gap: 8px; }
.table-tools input { width: 240px; padding: 8px 10px; font-size: 14px; }
.table-tools select { width: auto; padding: 8px 10px; font-size: 14px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font: 700 12px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .6px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { padding: 10px; border-bottom: 1px solid var(--theme-line, #eef0eb); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr[hidden] { display: none; }
.data-table a { color: inherit; text-decoration: none; }
.data-table td a b { display: block; }
.data-table td a small { color: var(--muted); }
.data-table td a:hover b { color: var(--green); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions form { margin: 0; }
.badge { display: inline-block; border-radius: 999px; padding: 3px 9px; font: 700 12px var(--sans); background: var(--theme-surface-raised, #f0f2ec); color: var(--muted); }
.badge-admin { background: var(--theme-action, var(--green)); color: #fff; }
.badge-ok { background: var(--ok-bg); color: var(--theme-green-text, #2d7047); }
.badge-warn { background: var(--theme-surface-raised, #fbf2dc); color: var(--theme-warning-text, #876318); }
.badge-bad { background: var(--bad-bg); color: var(--theme-error-text, #a2462b); }
.score-pill { display: inline-block; border-radius: 8px; padding: 4px 9px; font: 700 13px var(--display); background: linear-gradient(90deg, var(--ok-bg) calc(var(--pct) * 1%), var(--theme-surface-raised, #f4f5f1) 0); white-space: nowrap; }
.admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.admin-tabs a { text-decoration: none; padding: 10px 14px; font: 600 14px var(--sans); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tabs a.active { color: var(--green); border-bottom-color: var(--green); }
.bar-chart { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; height: 170px; align-items: end; }
.bar { display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-align: center; gap: 3px; }
.bar i { align-self: end; display: block; background: #8fb894; border-radius: 6px 6px 2px 2px; min-height: 2px; }
.bar b { font: 700 12px var(--display); }
.bar span { font-size: 11px; color: var(--muted); }
.settings-form .reveal-toggle { border-radius: 13px; }
@media (max-width: 650px) {
  .user-name { display: none; }
  .table-tools { width: 100%; }
  .table-tools input { width: 100%; }
  .bar span { font-size: 9px; }
  .auth-view { padding-top: 16px; }
}

/* ---------- question editor */
.edit-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.edit-section { display: grid; gap: 4px; text-decoration: none; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.edit-section:hover { border-color: var(--theme-success-line, #b5c9b8); background: var(--theme-surface-subtle, #fafbf8); }
.edit-section b { font: 700 14px var(--display); }
.edit-section span { color: var(--muted); font-size: 13px; }
.edit-section em, .badges .badge { font-style: normal; margin: 1px 2px 1px 0; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.editor { display: grid; gap: 0; }
.editor-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.editor textarea, .editor select, .editor input[type=number] { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font: 400 14px/1.5 var(--sans); color: var(--ink); background: var(--theme-surface, #fff); width: 100%; outline: none; resize: vertical; }
.editor textarea:focus, .editor select:focus, .editor input:focus { border-color: var(--theme-success-line, #85aa8a); box-shadow: 0 0 0 3px #e9f0e8; }
.editor .passage-input { font-family: var(--serif); font-size: 15px; line-height: 1.6; }
.edit-list { display: grid; gap: 6px; }
.edit-row { display: flex; align-items: flex-start; gap: 8px; }
.edit-row textarea { flex: 1; min-width: 0; }
.row-id { flex: 0 0 26px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--theme-surface-raised, #f0f2ec); font: 700 13px var(--display); color: var(--muted); }
.row-answer { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.row-answer:has(input:checked) { background: var(--ok-bg); border-color: var(--ok-line); color: var(--theme-green-text, #2d6440); font-weight: 700; }
.row-match { flex: 0 0 82px; width: 82px !important; }
.row-remove { flex: 0 0 auto; width: 32px; height: 36px; border: 0; background: none; color: var(--theme-muted-text, #a9b0a8); border-radius: 8px; cursor: pointer; font-size: 14px; }
.row-remove:hover { background: var(--bad-bg); color: var(--theme-error-text, #a2462b); }
.add-row { justify-self: start; }
.edit-question { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 8px; background: var(--theme-surface-subtle, #fbfbf9); }
.edit-question-head { display: flex; justify-content: space-between; align-items: center; }
.edit-question-head label { display: flex; align-items: center; gap: 8px; font: 700 13px var(--sans); }
.edit-question-head input { width: 76px !important; }
.gap-list { counter-reset: gap; }
.gap-row .row-id::before { counter-increment: gap; content: counter(gap); }
.gap-row select { flex: 1; }
.matching-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.edit-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.edit-issues li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 9px; font-size: 14px; }
.edit-issues li span { font-weight: 700; display: block; }
.edit-issues li small { display: block; font-size: 13px; }
.edit-issues li.is-ignored { opacity: .55; }
.ignore-toggle { white-space: nowrap; font-size: 13px; display: flex; gap: 5px; align-items: flex-start; cursor: pointer; }
.hide-toggle { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.hide-toggle input { margin-top: 4px; }
.hide-toggle small { display: block; color: var(--muted); font-size: 13px; }
.edit-explanations { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; }
.edit-explanations summary { cursor: pointer; font-weight: 700; }
.edit-explanations summary small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.edit-explanations[open] { display: grid; gap: 10px; }
.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--theme-translucent, rgba(245, 245, 240, .94)); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 14px; }
.edit-preview .item { margin: 0; }
.edit-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.edit-history li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--theme-line, #eef0eb); padding-bottom: 6px; }
.edit-history li b { display: block; font-size: 14px; }
.edit-history li small { color: var(--muted); font-size: 12px; }
.edit-history form { margin: 0; }
.form-error ul { margin: 6px 0 0; padding-left: 20px; font-weight: 500; }
.review-actions { display: flex; gap: 6px; }
@media (max-width: 980px) {
  .editor-layout { grid-template-columns: 1fr; }
  .editor-side { position: static; max-height: none; }
}
@media (max-width: 650px) {
  .matching-editor { grid-template-columns: 1fr; }
  .edit-row { flex-wrap: wrap; }
  .edit-row textarea { flex-basis: calc(100% - 80px); }
}
.reader-top .reader-label { margin-right: auto; }
.editor .field { align-content: start; }
.field[hidden] { display: none; }
.form-error p { margin: 4px 0 0; font-weight: 500; }
.button[hidden] { display: none; }

/* ---------- shared additions: progress, continue card, done state */
[hidden] { display: none !important; }
del { color: var(--theme-error-text, #9b593d); }
.auth-buttons { display: flex; gap: 6px; }
.button.done-on { background: var(--ok-bg); border-color: var(--ok-line); color: var(--theme-green-text, #2d6440); }
.book-progress .progress-track { width: 100%; }
.section-card .progress-track { width: 100%; margin-top: 8px; }
.stat-card.ok b { color: var(--theme-green-text, #2d7047); }
.resume-card { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 24px; padding: 22px 24px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.resume-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.resume-card small { color: var(--muted); font-size: 13px; }
.resume-card h3 { font: 800 24px/1.2 var(--display); letter-spacing: -.6px; margin: 0; }
.resume-card .progress-track { width: 100%; }
.resume-card .button { justify-self: start; margin-top: 8px; }
.view > .resume-card { max-width: 460px; margin-bottom: 24px; }
.progress-list { display: grid; }
.progress-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--theme-line, #eef0eb); border-radius: 10px; text-decoration: none; }
.progress-row:last-child { border-bottom: 0; }
.progress-row:hover { background: var(--theme-surface-subtle, #f7faf6); }
.progress-row .progress-track { width: 100%; }
.progress-row > b { font: 700 15px var(--display); color: var(--green); }
.language-switch.large { justify-self: start; }
.language-switch.large button { padding: 7px 12px; font-size: 13px; letter-spacing: 0; }

/* ---------- task guide ("how to solve") */
.guide { border: 1px solid var(--line); border-radius: 15px; background: var(--theme-surface-subtle, #fbfcf9); margin: 16px 17px; }
.test-block .guide { margin: 0 0 14px; background: var(--theme-surface, #fff); }
.guide > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 15px; }
.guide > summary::-webkit-details-marker { display: none; }
.guide-sum { flex: 1; min-width: 0; }
.guide-sum b { display: block; font: 700 14px var(--display); }
.guide-sum span { font-size: 13px; color: var(--muted); }
.guide-toggle { width: 28px; height: 28px; border-radius: 9px; background: var(--soft); color: var(--green); display: grid; place-items: center; font: 700 17px var(--sans); flex: 0 0 auto; transition: transform .2s; }
.guide[open] .guide-toggle { transform: rotate(45deg); }
.guide-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 0 15px 15px; }
.guide-body > div { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.guide-body h4 { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green); margin: 0 0 8px; }
.guide-body p, .guide-body ol, .guide-body ul { font-size: 14px; line-height: 1.55; color: var(--theme-body-text, #4f5c52); margin: 0 0 6px; }
.guide-body ol, .guide-body ul { padding-left: 18px; display: grid; gap: 4px; }
.guide-body .muted { font-size: 13px; }
.guide-example { background: var(--ok-bg) !important; border-color: var(--theme-line, #d7e7cd) !important; }
.guide-example .ex-q { font-weight: 600; color: var(--ink); }
.guide-example .ex-a { border-left: 3px solid var(--ok-line); padding-left: 10px; margin-top: 8px; }

/* ---------- explanations shown after checking */
.explain-verdict { font: 700 15px var(--display); }
.explain-sentence { margin: 10px 0 0; background: var(--theme-surface, #fff); border: 1px solid var(--theme-success-line, rgba(48, 91, 62, .12)); border-radius: 10px; padding: 10px 12px; font: 400 15px/1.6 var(--serif); color: var(--theme-body-text, #303a32); }
.explain-sentence small { display: block; font: 700 11px var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.explain-sentence mark, .explain-why mark, .demo-explain mark { background: var(--theme-highlight, var(--lime)); color: var(--ink); font-weight: 700; border-radius: 4px; padding: 0 4px; }
.explain-why { font-size: 14px; line-height: 1.65; color: var(--theme-body-text, #4f5c52); margin-top: 8px; }
.explain-why b { color: var(--ink); }
.explain-why .signal { background: var(--theme-surface-raised, #fbf1c7); border-radius: 3px; padding: 0 3px; font-weight: 600; }
.rule-card { margin-top: 10px; background: var(--theme-translucent, rgba(255, 255, 255, .75)); border: 1px solid var(--theme-success-line, rgba(48, 91, 62, .14)); border-radius: 10px; }
.rule-card > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; font-size: 14px; }
.rule-card > summary::-webkit-details-marker { display: none; }
.rule-card > summary span { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green); }
.rule-card > summary b { flex: 1; font-family: var(--display); }
.rule-card > summary::after { content: '+'; color: var(--green); font-weight: 700; transition: transform .2s; }
.rule-card[open] > summary::after { transform: rotate(45deg); }
.rule-body { padding: 0 12px 12px; font-size: 14px; line-height: 1.6; color: var(--theme-body-text, #4f5c52); }
.rule-body p { margin: 0 0 8px; }
.rule-pattern { display: inline-block; background: var(--soft); color: var(--green-dark); border-radius: 8px; padding: 4px 10px; font-weight: 700; margin: 2px 0 8px; }
.rule-body ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.rule-body .rule-signals { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.option-notes { border-top: 1px solid var(--theme-line, #dce4dc); margin-top: 9px; padding-top: 8px; }
.option-notes > summary { font-size: 14px; font-weight: 700; cursor: pointer; color: var(--theme-body-text, #526451); }
.option-notes p { font-size: 14px; line-height: 1.65; color: var(--theme-body-text, #4f5c52); margin: 8px 0 0; }

/* ---------- generator summary */
.generator-summary { display: grid; gap: 2px; }
.generator-summary small { color: var(--muted); font-size: 13px; }

/* ---------- exam mode */
.exam-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.exam-layout.is-finished { display: block; }
.exam-side { position: sticky; top: 16px; }
.exam-side .panel h2 { font-size: 16px; }
.exam-side .panel .muted { font-size: 13px; margin: 0; }
.exam-step, .math-step { scroll-margin-top: 24px; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; }
.qgrid button { height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--theme-surface, #fff); color: var(--muted); font: 700 12px var(--sans); cursor: pointer; padding: 0; }
.qgrid button:hover { border-color: var(--theme-success-line, #a9c3aa); color: var(--ink); }
.qgrid button.answered { background: var(--soft); border-color: var(--ok-line); color: var(--green); }
.qgrid button.current { background: var(--theme-action, var(--green)); border-color: var(--green); color: #fff; }
.qgrid-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }
.qgrid-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--line); background: var(--theme-surface, #fff); }
.qgrid-legend i.a { background: var(--soft); border-color: var(--ok-line); }
.qgrid-legend i.c { background: var(--theme-action, var(--green)); border-color: var(--green); }
.test-footer { z-index: 10; margin-top: 8px; flex-wrap: wrap; }
.exam-stat small { display: block; font-size: 12px; color: var(--muted); }
.exam-stat b { font: 700 16px var(--display); }
.exam-answered .progress-track { width: 140px; margin-top: 5px; }
.exam-timer b { font-size: 20px; color: var(--green); font-variant-numeric: tabular-nums; }
.exam-timer.low b { color: var(--theme-error-text, #a2462b); }
.review-heading { margin-top: 8px; }

/* ---------- landing */
.demo-card { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 24px; padding: 22px; box-shadow: var(--shadow); }
.demo-card h3 { font: 700 17px/1.5 var(--display); margin: 10px 0 4px; }
.demo-card .choice-list { margin-top: 8px; }
.demo-opt.right { border-color: var(--ok-line); background: var(--ok-bg); }
.demo-opt.wrong { border-color: var(--bad-line); background: var(--bad-bg); }
.answered .demo-opt { cursor: default; }
.demo-explain { background: var(--ok-bg); border: 1px solid var(--theme-line, #d7e7cd); }
.landing-block { margin-top: 34px; }
.step-card, .feature { min-height: 0; }
.step-card:hover, .feature:hover { transform: none; box-shadow: none; border-color: var(--line); }
.step-card h3, .feature h3 { font-size: 18px; }
.feature-icon { width: 36px; height: 36px; border-radius: 11px; background: var(--soft); color: var(--green); display: grid; place-items: center; }
.parts-panel { gap: 0; padding-top: 6px; padding-bottom: 6px; }
.part-line { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--theme-line, #eef0eb); }
.part-line:last-child { border-bottom: 0; }
.part-line b { font: 700 15px var(--display); }
.part-line p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.part-line .section-count { white-space: nowrap; }
.cta-band { margin-top: 34px; background: var(--theme-action, var(--green)); color: #fff; border-radius: 24px; padding: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.cta-band h2 { font: 800 30px/1.15 var(--display); letter-spacing: -1px; margin: 0; }
.cta-band .hero-actions { margin: 0; }
.cta-band .cta-primary { background: var(--theme-highlight, var(--lime)); border-color: var(--lime); color: var(--ink); }
.cta-band .cta-primary:hover { background: var(--theme-surface-accent, #cfe67c); }
.cta-band .cta-secondary { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.cta-band .cta-secondary:hover { background: var(--theme-translucent, rgba(255, 255, 255, .1)); }

@media (max-width: 900px) {
  .exam-layout { grid-template-columns: 1fr; }
  .exam-side { position: static; order: -1; margin-bottom: 18px; }
}
@media (max-width: 650px) {
  .auth-buttons .button.primary { display: none; }
  .guide { margin: 12px 10px; }
  .test-footer { flex-direction: row; align-items: center; text-align: left; padding: 10px 12px; gap: 10px 16px; }
  .test-footer .button { width: 100%; }
  .exam-answered .progress-track { width: 90px; }
  .part-line { grid-template-columns: 34px 1fr; }
  .part-line .section-count { grid-column: 2; justify-self: start; }
  .cta-band { padding: 24px; }
  .cta-band h2 { font-size: 24px; }
  .resume-card, .demo-card { margin-top: 25px; }
}
@media print {
  .exam-side, .guide { display: none; }
}

/* graded options win over the "checked" highlight */
.choice-option.is-correct:has(input:checked), .multi-option.is-correct:has(input:checked) { border-color: var(--ok-line); background: var(--ok-bg); }
.choice-option.is-wrong:has(input:checked), .multi-option.is-wrong:has(input:checked) { border-color: var(--wrong-line); background: var(--wrong-bg); }

/* ---------- ExamLab main page: large type, as on the earlier landing page */
.landing .hero { padding: 64px 0 56px; }
.landing .eyebrow { font-size: 13px; }
.landing .hero h1.hub-title { font: 800 clamp(60px, 9.5vw, 128px)/.92 var(--display); letter-spacing: -.045em; margin: 18px 0 14px; }
.hub-title em { font-style: normal; color: var(--green); }
.landing .hero .hub-line { font: 700 clamp(22px, 2.4vw, 30px)/1.25 var(--display); letter-spacing: -.6px; color: var(--ink); max-width: 640px; margin: 0 0 16px; }
.landing .hero p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; max-width: 600px; }
.landing .hero-actions { margin-top: 30px; }
.landing .button.large { padding: 15px 22px; font-size: 16px; border-radius: 13px; }
.landing .landing-block { margin-top: 64px; }
.landing .section-heading { margin-bottom: 22px; }
.landing .section-heading h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -1.4px; line-height: 1.1; }
.landing .section-heading span { font-size: 15px; }
.landing .demo-card { padding: 26px; }
.landing .demo-card h3 { font-size: 20px; }
.landing .demo-card .choice-option { font-size: 16px; padding: 13px 14px; }
.landing .section-card { padding: 24px; border-radius: 19px; }
.landing .section-card h3 { font-size: 22px; letter-spacing: -.4px; margin: 14px 0 8px; }
.landing .section-card p { font-size: 15px; line-height: 1.6; }
.step-n { display: block; font: 800 64px/.9 var(--display); letter-spacing: -3px; color: var(--green); }
.landing .feature-icon { width: 46px; height: 46px; border-radius: 13px; }
.landing .part-line { padding: 16px 0; }
.landing .part-line b { font-size: 18px; }
.landing .part-line p { font-size: 14px; }
.landing .cta-band { margin-top: 64px; padding: 48px; }
.landing .cta-band h2 { font-size: clamp(32px, 4.6vw, 56px); letter-spacing: -2px; line-height: 1.05; max-width: 720px; }
.subject-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.subject-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 24px; padding: 28px; transition: .2s; }
a.subject-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--theme-line, #c5d4c5); }
.subject-card h3 { font: 800 clamp(34px, 4.2vw, 52px)/1 var(--display); letter-spacing: -1.6px; margin: 18px 0 4px; }
.subject-card p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 520px; }
.subject-card .button { align-self: flex-start; margin-top: auto; }
.subject-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.subject-stats b { display: block; font: 800 34px/1 var(--display); letter-spacing: -1px; }
.subject-stats span { display: block; overflow-wrap: anywhere; font-size: 13px; color: var(--muted); font-weight: 600; }
.subject-card.is-soon { background: transparent; border-style: dashed; border-color: var(--theme-line, #c9cfc6); }
.subject-card.is-soon h3 { color: var(--theme-muted-text, #8a9289); }
@media (max-width: 900px) {
  .subject-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .landing .hero { padding: 32px 0; }
  .landing .hero h1.hub-title { font-size: 60px; }
  .landing .landing-block { margin-top: 44px; }
  .landing .section-heading { flex-direction: column; align-items: flex-start; gap: 4px; }
  .landing .cta-band { padding: 28px; }
  .subject-card { padding: 22px; }
  .subject-stats { grid-template-columns: repeat(2, 1fr); }
  .step-n { font-size: 52px; }
}

/* ---------- sign-in pages: split screen (green poster, form on the right) */
.auth-split { display: flex; flex-wrap: wrap; min-height: 100vh; }
.auth-poster { flex: 1 1 420px; background: var(--theme-action, var(--green)); color: #fff; padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 48px; min-height: 360px; position: relative; overflow: hidden; }
.auth-poster > * { position: relative; z-index: 1; }
.auth-poster .brand { color: #fff; margin: 0; }
.auth-poster .brand-mark { background: var(--theme-surface, #fff); color: var(--green); }
.auth-poster .brand-mark span { color: var(--green); }
.auth-poster .brand-text b { display: block; font: 800 16px var(--display); }
.auth-poster .brand-text small { color: rgba(255, 255, 255, .7); }
.auth-poster h1 { margin: auto 0 0; font: 800 clamp(40px, 6.4vw, 88px)/.95 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.poster-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid rgba(255, 255, 255, .85); padding-top: 14px; font-size: 14px; font-weight: 600; }
.auth-poster::after { content: ''; position: absolute; z-index: 0; right: -120px; top: -120px; width: 360px; height: 360px; border: 2px solid rgba(255, 255, 255, .22); border-radius: 50%; animation: poster-float 12s ease-in-out infinite; }
@keyframes poster-float { 50% { transform: translate(-30px, 40px) scale(1.08); } }
.auth-side { flex: 1 1 420px; padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.auth-box { width: 100%; max-width: 420px; }
.auth-box-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.auth-box-top > a { font-size: 13px; color: var(--muted); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--ink); margin-bottom: 28px; }
.auth-tabs a { padding: 10px 0; border-bottom: 4px solid transparent; margin-bottom: -2px; font: 800 20px var(--display); color: var(--theme-muted-text, #9aa198); text-decoration: none; transition: color .2s, border-color .2s; }
.auth-tabs a:hover { color: var(--ink); }
.auth-tabs a.active { color: var(--ink); border-color: var(--green); }
.auth-box h1 { font: 800 32px var(--display); letter-spacing: -.8px; margin: 0 0 8px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-split .auth-lead { margin: 0; }
.auth-split .field input { border-radius: 0; min-height: 46px; }
.auth-split .button, .auth-split .language-switch, .auth-split .language-switch button { border-radius: 0; }
.auth-split .flash, .auth-split .form-error, .auth-split .form-success, .auth-split .form-info { border-radius: 0; border-width: 0 0 0 4px; }
.auth-submit { width: 100%; justify-content: space-between; gap: 10px; }
.auth-submit svg { flex: none; transition: transform .25s; }
.auth-submit:hover svg { transform: translateX(4px); }
@media (max-width: 760px) {
  .auth-poster { min-height: 0; gap: 24px; }
  .auth-poster h1 { font-size: 40px; }
  .auth-box-top { margin-bottom: 24px; }
  .auth-side { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-poster::after { animation: none; }
}

/* ---------- ExamLab main page: test generator and individual curriculum */
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.offer-card { background: var(--theme-surface, #fff); border: 1px solid var(--line); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 20px; }
.offer-card h3 { font: 800 clamp(28px, 3.2vw, 40px)/1.08 var(--display); letter-spacing: -1.2px; margin: 0; }
.offer-card p { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }
.offer-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.offer-points li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.5; font-weight: 600; }
.offer-points li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 7px; background: var(--soft); color: var(--green); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.offer-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.offer-stats b { display: block; font: 800 40px/1 var(--display); letter-spacing: -1.5px; color: var(--green); }
.offer-stats span { font-size: 13px; color: var(--muted); font-weight: 600; }
.offer-card.is-green { background: var(--theme-action, var(--green)); border-color: var(--green); color: #fff; }
.offer-card.is-green .eyebrow { color: var(--lime); }
.offer-card.is-green p { color: rgba(255, 255, 255, .8); }
.offer-card.is-green .offer-points li::before { background: var(--theme-highlight, var(--lime)); color: var(--ink); }
@media (max-width: 900px) {
  .offer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .offer-card { padding: 22px; }
  .offer-stats b { font-size: 32px; }
}

/* ---------- main page without a side card; subject main pages (/english) */
.hub-hero { grid-template-columns: minmax(0, 1fr); }
.landing .hero h1.subject-title { font: 800 clamp(48px, 7vw, 96px)/1 var(--display); letter-spacing: -.04em; margin: 18px 0 20px; }
.subject-page .hero { padding-top: 32px; }
.subject-page > .resume-card { margin: 0 0 24px; }
.subject-page .stat-card b { font-size: 34px; letter-spacing: -1px; }
.offer-grid.single { grid-template-columns: minmax(0, 1fr); }
.offer-grid.single .offer-card p { max-width: 760px; }
.offer-button { align-self: flex-start; margin-top: 6px; }

/* Mathematics: reuse the existing book, practice, generator and exam design. */
.math-book-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.math-poster { align-self:start; }
.math-poster-formula { color:var(--green);font:italic 48px/1.8 Georgia,serif;text-align:center; }
.math-format-pills { display:flex;flex-wrap:wrap;gap:8px; }
.math-answers { display:grid;gap:14px; }
.math-answer { min-width:0;margin:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--theme-surface, white); }
.math-answer legend { padding:0 7px;font-weight:700; }
.math-controls { display:flex;flex-wrap:wrap;align-items:center;gap:10px; }
.math-option { min-width:62px;flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:var(--theme-surface, #fff);color:var(--ink); }
.math-option.is-selected { border-color:var(--green);background:var(--soft); }
.math-option:has(input:checked) { border-color:var(--green);background:var(--soft); }
.math-option.is-correct { border-color:var(--ok-line);background:var(--ok-bg); }
.math-number { min-width:100px;max-width:300px;flex:1;padding:12px;border:1px solid var(--line);border-radius:8px;font:inherit; }
.math-answer .explanation-card { margin:14px 0 0; }
.math-answer ol { padding-left:24px; }
.math-answer li { margin:7px 0; }
.math-key { margin-top:18px;padding:12px;background:var(--soft);border-radius:8px; }
.math-key summary { cursor:pointer;font-weight:700; }
.math-test-grid { display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px;align-items:start;margin-bottom:120px; }
.math-step { margin-bottom:24px;padding:22px;background:var(--theme-surface, white);border:1px solid var(--line);border-radius:14px; }
.math-item .reader-top { flex-wrap:wrap; }
.page-mathematics .resume-card { display:block;text-decoration:none;color:inherit; }
.page-mathematics .resume-card[hidden] { display:none; }
.page-mathematics .main-nav { flex-wrap:wrap; }
@media(max-width:900px){.math-test-grid{grid-template-columns:1fr}.math-test-grid .exam-side{order:-1}.math-poster-formula{font-size:36px}}
@media(max-width:650px){.math-book-grid{grid-template-columns:1fr}.math-step{padding:12px}.math-answer{padding:10px}.math-option{min-width:45px;padding:10px}.math-controls .button{width:100%}}
@media print {.math-controls button,.math-item .reader-top a{display:none}.math-test-grid{display:block}}

.math-option.is-wrong,.math-option.is-wrong:has(input:checked) { border-color:var(--wrong-line);background:var(--wrong-bg); }
.math-option.is-correct:has(input:checked) { border-color:var(--ok-line);background:var(--ok-bg); }
.math-number.is-correct { border-color:var(--ok-line);background:var(--ok-bg); }
.math-number.is-wrong { border-color:var(--wrong-line);background:var(--wrong-bg);color:var(--wrong-ink); }
/* Mathematics: flowing text, individual answer cards and selectable formula glyphs. */
.landing .hero h1.math-subject-title { overflow-wrap:anywhere; }
.math-copy { font-family:var(--sans);font-size:16px;line-height:1.9;overflow-wrap:break-word; }
.math-copy p { margin:0 0 .65em; }
.math-copy p:last-child { margin-bottom:0; }
.math-copy math { font-size:1.12em;margin-inline:.1em; }
.math-context { margin:20px 0 26px;padding:18px 20px;border-left:3px solid var(--green);border-radius:0 10px 10px 0;background:var(--soft); }
.math-context:empty { display:none; }
.math-prompt { margin:1px 0 18px; }
.math-controls { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.math-option { min-width:0;justify-content:flex-start;align-items:center;text-align:left;padding:14px;gap:12px;transition:border-color .15s,background .15s; }
.math-option input { position:absolute;opacity:0;pointer-events:none; }
.math-option:focus-within { outline:2px solid var(--green);outline-offset:3px; }
.math-option:has(input:checked) .choice-id { background:var(--theme-action, var(--green));color:white; }
.math-option.is-selected .choice-id { background:var(--theme-action, var(--green));color:#fff; }
.math-option.is-wrong:has(input:checked) .choice-id,.math-option.is-wrong.is-selected .choice-id { background:var(--theme-error-action, var(--wrong-line));color:#fff; }
.math-choice-copy { min-width:0;flex:1; }
.math-choice-copy p { margin:0; }
.math-controls > button { justify-self:start;margin-top:6px;grid-column:1/-1; }
.math-number { width:100%;grid-column:1/-1; }
.math-inline { display:inline-block;position:relative;vertical-align:middle;margin:.12em .08em .18em;white-space:nowrap;font-family:'Times New Roman',serif;font-size:1.05em;line-height:1;color:inherit;overflow:visible; }
.math-glyph { position:absolute;display:block;line-height:1;white-space:pre;font-family:'Times New Roman',serif;font-weight:400; }
.math-italic { font-style:italic; }
.math-symbol { font-family:'Times New Roman','Cambria Math','STIX Two Math',serif; }
.math-strokes { position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none; }
.math-diagram { display:block;max-width:min(100%,480px);max-height:380px;width:auto;height:auto;margin:18px auto; }
.math-solid { display:block;width:100%;max-width:170px;height:auto;margin:0 auto; }
.math-demo-prompt { margin:18px 0;font-weight:600; }
.math-exam-qgrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.math-exam-qgrid button { font-size:12px; }
.math-answer-example kbd { padding:6px;background:var(--theme-surface, white);border:1px solid var(--line); }
@media(max-width:650px){.math-controls{grid-template-columns:1fr}.math-context{padding:12px 14px}.math-copy{font-size:15px}.math-answer{padding:16px 12px}}

.page-mathematics h1,.page-mathematics .section-card h3 { overflow-wrap:anywhere; }

/* Individual mathematics proofs and answer-specific feedback. */
.math-feedback-answer { margin:10px 0; }
.math-feedback-choice { display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:6px 0; }
.math-feedback-choice > b { white-space:nowrap; }
.math-feedback-choice > .math-copy { min-width:0;max-width:100%; }
.math-feedback-choice p { margin:0; }
.math-solution-hint { padding:10px 12px;background:var(--theme-surface, #fff);border-left:3px solid var(--green);border-radius:0 8px 8px 0; }
.math-full-solution { margin-top:12px; }
.math-full-solution > summary { cursor:pointer;font-weight:700; }

/* Long derivations wrap inside narrow task cards. */
.math-answer .explanation-card { overflow-wrap:anywhere; }

/* Account statistics: subject > book > section. Settings retain their existing styles. */
.account-title h1, .account-title p { overflow-wrap: anywhere; }
.account-overview { margin-bottom: 30px; }
.account-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 10px; }
.stat-card .account-stat-value { color: inherit; font: inherit; }
.account-note { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 8px 0 0; }
.account-subjects { scroll-margin-top: 20px; }
.account-subjects > .section-heading { flex-wrap: wrap; }
.account-subject-heading, .account-subject-name { display: flex; gap: 14px; align-items: center; }
.account-subject-heading { justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; }
.account-subject-name { min-width: 0; }
.account-subject-name h3 { margin: 0; font: 800 21px/1.3 var(--display); letter-spacing: -.4px; }
.account-subject-name p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.account-subject-mark { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 14px; background: var(--soft); color: var(--green); font: 800 20px var(--display); }
.account-subject-progress { padding-bottom: 22px; }
.account-subject .progress-track { width: 100%; }
.account-progress-copy { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 7px; color: var(--muted); }
.account-progress-copy > b { color: var(--green); }
.account-books { display: grid; gap: 10px; }
.account-book { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.account-book > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 20px; align-items: center; padding: 18px; cursor: pointer; list-style: none; }
.account-book > summary::-webkit-details-marker, .account-history-summary::-webkit-details-marker { display: none; }
.account-book > summary:hover { background: var(--theme-surface-subtle, #f7faf6); }
.account-book > summary:focus-visible, .account-history-summary:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; border-radius: 12px; }
.account-book-copy { display: grid; gap: 5px; }
.account-book-copy > strong { font: 700 16px/1.4 var(--display); }
.account-book-count { color: var(--muted); font-size: 12px; }
.account-book-copy .progress-track { margin: 3px 0 0; }
.account-book-percent { color: var(--green); font: 800 20px var(--display); }
.account-expand { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--green); background: var(--soft); font-size: 20px; }
.account-expand::after { content: '+'; }
details[open] > summary > .account-expand::after { content: '−'; }
.account-book-body { border-top: 1px solid var(--line); padding: 16px 18px; }
.account-book-actions { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.account-chapter { margin: 20px 0 7px; font: 700 13px/1.6 var(--display); color: var(--green); }
.account-section { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 20px; align-items: center; border-radius: 8px; border-bottom: 1px solid var(--theme-line, #eef0eb); padding: 12px 6px; text-decoration: none; }
.account-section:last-child { border-bottom: 0; }
.account-section:hover { background: var(--theme-surface-subtle, #f7faf6); }
.account-section-name { display: flex; align-items: baseline; gap: 12px; font-size: 13px; overflow-wrap: anywhere; }
.account-section-number { color: var(--muted); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.account-section-progress { display: grid; gap: 5px; text-align: right; color: var(--muted); font-size: 12px; }
.account-section-progress .progress-track { width: 100%; margin: 0; }
.account-history-summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; }
.account-history-summary strong { font: 800 20px/1.4 var(--display); }
.account-history-summary .account-note { display: block; }
.account-history-summary > .account-expand { flex-shrink: 0; }
.account-history-body { padding-top: 18px; }
@media (max-width: 760px) {
  .account-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-book > summary { gap: 12px; padding: 14px; }
  .account-book-body { padding: 12px; }
  .account-subject-name h3 { font-size: 18px; }
  .account-section { grid-template-columns: minmax(0, 1fr) 70px; gap: 12px; }
}


/* ---------- theme controls: shared by the main layout and the sign-in frame */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); color: var(--ink); cursor: pointer; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--soft); border-color: var(--green); }
.theme-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.theme-toggle svg { width: 20px; height: 20px; flex: none; }
.theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
.auth-box-controls { display: flex; align-items: center; gap: 10px; }
input, select, textarea { color: var(--ink); }
.stepper input, .math-number { background-color: var(--white); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--green); }
::selection { background: var(--soft); color: var(--ink); }

/* Every colour fallback above preserves the existing light palette. Dark
   tokens apply to all components, including AJAX-inserted tasks and feedback.
   Screen-only tokens keep printed exams in their original light palette. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #edf2ee;
    --muted: #a8b6ad;
    --paper: #0f1411;
    --white: #191f1b;
    --line: #35433a;
    --green: #91d6ab;
    --green-dark: #b1e6c3;
    --soft: #20372a;
    --ok-bg: #1b3325;
    --ok-line: #56876a;
    --bad-bg: #352521;
    --bad-line: #a37666;
    --wrong-line: #cd766a;
    --wrong-bg: #3a2422;
    --wrong-ink: #ffb6aa;
    --shadow: 0 18px 50px rgba(0, 0, 0, .3);
    --theme-surface: #191f1b;
    --theme-surface-subtle: #161c18;
    --theme-surface-raised: #242e27;
    --theme-surface-accent: #233c2c;
    --theme-translucent: rgba(25, 31, 27, .94);
    --theme-body-text: #d6e0d9;
    --theme-muted-text: #afbeb3;
    --theme-green-text: #a1dfb7;
    --theme-info-text: #b4d7f7;
    --theme-warning-text: #f1ce97;
    --theme-error-text: #ffb6aa;
    --theme-line: #35433a;
    --theme-success-line: #56876a;
    --theme-info-line: #5c7b96;
    --theme-warning-line: #8f7954;
    --theme-error-line: #a37666;
    --theme-info-bg: #1e3040;
    --theme-warning-bg: #352e20;
    --theme-error-bg: #3a2422;
    --theme-highlight: #34431f;
    --theme-action: #286447;
    --theme-action-hover: #347b58;
    --theme-error-action: #8d3c33;
  }
  /* Clickable cards (books, subjects, sections) stand out from the page and from panels. */
  :root[data-theme="dark"] .book-card,
  :root[data-theme="dark"] a.subject-card,
  :root[data-theme="dark"] .section-card { background: #1d2620; border-color: #48594d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 26px rgba(0, 0, 0, .28); }
  :root[data-theme="dark"] .book-card:hover,
  :root[data-theme="dark"] a.subject-card:hover,
  :root[data-theme="dark"] .section-card:hover { background: #232e27; border-color: var(--green); }
  :root[data-theme="dark"] .book-card .arrow { background: var(--theme-action); color: #fff; }
  :root[data-theme="dark"] .book-card:hover .arrow { background: var(--theme-action-hover); }
  /* Small control knobs retain contrast, rather than becoming card-coloured. */
  :root[data-theme="dark"] .switch::after { background: #e5eee8; }
  :root[data-theme="dark"] .auth-poster,
  :root[data-theme="dark"] .offer-card.is-green,
  :root[data-theme="dark"] .cta-band { background: #173b29; border-color: var(--line); }
  :root[data-theme="dark"] .auth-poster .brand-mark { background: var(--soft); }
  :root[data-theme="dark"] .offer-card.is-green .eyebrow { color: var(--lime); }
  :root[data-theme="dark"] .result-ring { background: conic-gradient(var(--green) calc(var(--pct) * 1%), var(--line) 0); }
  /* The existing inline formula/diagram SVGs use currentColor. Never invert
     those SVGs: their lines already inherit the light foreground. */
  :root[data-theme="dark"] input:-webkit-autofill {
    -webkit-text-fill-color: var(--ink);
    box-shadow: 0 0 0 1000px var(--white) inset;
    caret-color: var(--ink);
  }
}
@media print {
  :root { color-scheme: light !important; }
  .theme-toggle { display: none !important; }
}
/* ---------- account subject cards: choose a subject, its statistics show below (2026-10-27) */
.account-subject-cards { margin-bottom: 18px; }
.account-subject-card { cursor: pointer; gap: 14px; }
.account-subject-card h3 { font-size: clamp(28px, 3.4vw, 40px); margin: 6px 0 0; }
.account-subject-card .account-subject-progress { padding-bottom: 0; }
.account-subject-card .subject-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.account-subject-card .subject-stats b { font-size: 28px; }
.account-subject-card .subject-stats b span { display: inline; font: inherit; color: inherit; }
.account-subject-card .progress-track { width: 100%; }
.account-subject-card[aria-selected="true"] { border-color: var(--green); box-shadow: 0 0 0 2px var(--green), var(--shadow); }
.account-subject-card:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.account-subject .page-actions { gap: 8px; }
.account-subject-history { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.account-subject[hidden] { display: none; }
@media (max-width: 760px) {
  .account-subject-card .subject-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-subject-card .subject-stats b { font-size: 22px; }
}

/* ---------- terms of use, cookie policy, cookie notice, sign-up consent */
.legal-updated { color: var(--muted); font-size: 13px; margin: -8px 0 18px; }
.auth-agree { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); margin: 4px 0 16px; cursor: pointer; }
.auth-agree input { margin-top: 3px; flex: none; width: 17px; height: 17px; }
.auth-agree a { color: var(--green); font-weight: 600; }
.cookie-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 20px; background: var(--theme-surface, #fff); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.cookie-notice a { color: var(--green); font-weight: 600; white-space: nowrap; }
.cookie-notice .button { flex: none; }
@media (max-width: 600px) {
  .cookie-notice { flex-direction: column; align-items: stretch; text-align: left; }
}
@media print { .cookie-notice { display: none !important; } }

/* Keep saving failures visible even in a long generated exam. */
#account-save-status { position: fixed; top: 88px; right: 16px; z-index: 60; max-width: min(360px, calc(100vw - 32px)); margin: 0; box-shadow: var(--shadow); }
#account-save-status[hidden] { display: none; }
#account-save-status[data-state="error"] { background: var(--bad-bg); border-color: var(--bad-line); color: var(--ink); }
#account-save-status .button { margin-top: 8px; }
@media print { #account-save-status { display: none; } }