/* DEUTSCHORA learner web. Logical properties only (margin-inline, padding-block…) so Arabic RTL mirrors without a second stylesheet. */
:root { --ink:#14213D; --bg:#F4F6FA; --surface:#FFFFFF; --accent:#8A6508; --accent-ink:#FFFFFF; --danger:#B00020; --success:#1B7F4B; --muted:#4A5568; --line:#D9D5CB; --focus:#0B5FFF; --soft:#EEF1F8; --track:#E6E2D8; --notice-bg:#FFF6DB; --notice-line:#E5C76B; --wrong-bg:#FDECEF; --wrong-line:#E8A3B0; --wrong-ink:#7A0016; --ok-bg:#E3F4EA; --ok-ink:#0F5132; --on-ink:#FFFFFF; --brand:#1D5F8A; --on-brand:#FFFFFF; --brand-soft:#E4F0F7; --hero-bg:#17325C; --hero-bg2:#1D5F8A; --shadow:0 1px 2px rgba(20,33,61,.06), 0 8px 24px rgba(20,33,61,.06); --on-danger:#FFFFFF; --warn-ink:#8A4B00; color-scheme: light; --r:10px; --gap:16px; }
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif; }
.app { min-block-size: 100dvh; display: flex; flex-direction: column; }
.main { flex: 1; inline-size: min(100%, 46rem); margin-inline: auto; padding: var(--gap); outline: none; }
.page { display: flex; flex-direction: column; gap: var(--gap); }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; } h2 { font-size: 1.15rem; margin: .75rem 0 .35rem; } h3 { font-size: 1rem; margin: .5rem 0 .25rem; }
p { margin: .25rem 0; }
.muted { color: var(--muted); } .small { font-size: .875rem; } .big { font-size: 2rem; font-weight: 700; margin: 0; } .lead { font-size: 1.15rem; } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.success { color: var(--success); font-weight: 600; } .error-text { color: var(--danger); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--gap); display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; } .row.wrap { flex-wrap: wrap; } .row.spread { justify-content: space-between; }
.notice { background: var(--notice-bg); border: 1px solid var(--notice-line); border-radius: var(--r); padding: 10px 12px; }
.error { background: var(--wrong-bg); border: 1px solid var(--wrong-line); border-radius: var(--r); padding: 10px 12px; }
.dev-banner { background: #14213D; color: #fff; text-align: center; padding: 6px 12px; font-size: .8rem; }
.btn { font: inherit; min-block-size: 44px; padding: 0 18px; border-radius: var(--r); border: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-primary { background: var(--ink); color: var(--on-ink); } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--ink); } .btn-danger { background: var(--danger); color: var(--on-danger); } .btn-link { background: none; color: var(--ink); text-decoration: underline; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link { color: var(--ink); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; inset-inline-start: -999px; } .skip:focus { inset-inline-start: 8px; inset-block-start: 8px; background: var(--surface); padding: 8px; z-index: 10; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav { display: flex; gap: 4px; background: var(--surface); border-block-end: 1px solid var(--line); padding: 6px var(--gap); overflow-x: auto; }
.nav a { padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); white-space: nowrap; min-block-size: 44px; display: inline-flex; align-items: center; }
.nav a.active { background: var(--ink); color: var(--on-ink); }
.field { display: flex; flex-direction: column; gap: 4px; } label { font-weight: 600; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=search], textarea, select { font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); min-block-size: 44px; inline-size: 100%; }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } legend { font-weight: 600; padding: 0; margin-block-end: 4px; }
.choice { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 2px solid var(--line); border-radius: 8px; font-weight: 400; cursor: pointer; min-block-size: 44px; background: var(--surface); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--soft); }
.choice input { inline-size: 20px; block-size: 20px; flex: none; }
.prompt { margin-block-end: 8px; } .prompt-ui { font-weight: 600; } .prompt-de { font-size: 1.15rem; }
.de { unicode-bidi: isolate; } .strong { font-weight: 700; }
.keys { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 8px; } .key { min-inline-size: 44px; min-block-size: 44px; font: inherit; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.tokens { display: flex; flex-wrap: wrap; gap: 8px; min-block-size: 52px; padding: 8px; border-radius: 8px; } .tokens.placed { border: 2px dashed var(--line); background: var(--surface); } .token { font: inherit; min-block-size: 44px; padding: 0 14px; border-radius: 8px; border: 2px solid var(--ink); background: var(--surface); cursor: pointer; }
.match-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; margin-block-end: 8px; }
.bar { block-size: 10px; background: var(--track); border-radius: 999px; overflow: hidden; } .bar-fill { block-size: 100%; background: var(--accent); inline-size: 0; }
.bar-fill[data-pct="0"] { inline-size: 0; } 
.feedback { padding: 10px 12px; border-radius: 8px; font-weight: 700; } .feedback-correct { background: var(--ok-bg); color: var(--ok-ink); } .feedback-wrong { background: var(--wrong-bg); color: var(--wrong-ink); } .feedback-pending { background: var(--soft); }
.flash { font-size: 2rem; text-align: center; padding: 24px 0; margin: 0; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; } .tab { font: inherit; min-block-size: 44px; padding: 0 14px; border-radius: 8px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; } .tab.active { border-color: var(--ink); background: var(--soft); font-weight: 700; }
.chat { display: flex; flex-direction: column; gap: 8px; } .bubble { padding: 10px 12px; border-radius: var(--r); max-inline-size: 90%; } .bubble-you { background: var(--soft); align-self: flex-end; } .bubble-tutor { background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.clock { font-size: 1.25rem; font-weight: 700; margin: 0; } .clock[data-state="warning"] { color: var(--warn-ink); } .clock[data-state="expired"] { color: var(--danger); }
.exam-bar { position: sticky; inset-block-start: 0; background: var(--bg); padding-block: 8px; z-index: 2; }
.levels, .list, .skills, .vocab { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .level { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; } .level-locked { opacity: .6; }
.certificate { background: var(--surface); border: 3px double var(--accent); border-radius: var(--r); padding: 28px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.loading { padding: 32px; text-align: center; color: var(--muted); }
@media (min-width: 720px) { .main { padding: 24px; } .nav { justify-content: center; } }
@media (prefers-reduced-motion: no-preference) { .bar-fill { transition: inline-size .3s; } }
@media print { .nav, .no-print, .dev-banner, .skip { display: none !important; } body { background: #fff !important; color: #14213D !important; } .certificate { border-color: #000; background: #fff !important; color: #14213D !important; } }

.bar-fill[data-pct="0"] { inline-size: 0%; }
.bar-fill[data-pct="1"] { inline-size: 1%; }
.bar-fill[data-pct="2"] { inline-size: 2%; }
.bar-fill[data-pct="3"] { inline-size: 3%; }
.bar-fill[data-pct="4"] { inline-size: 4%; }
.bar-fill[data-pct="5"] { inline-size: 5%; }
.bar-fill[data-pct="6"] { inline-size: 6%; }
.bar-fill[data-pct="7"] { inline-size: 7%; }
.bar-fill[data-pct="8"] { inline-size: 8%; }
.bar-fill[data-pct="9"] { inline-size: 9%; }
.bar-fill[data-pct="10"] { inline-size: 10%; }
.bar-fill[data-pct="11"] { inline-size: 11%; }
.bar-fill[data-pct="12"] { inline-size: 12%; }
.bar-fill[data-pct="13"] { inline-size: 13%; }
.bar-fill[data-pct="14"] { inline-size: 14%; }
.bar-fill[data-pct="15"] { inline-size: 15%; }
.bar-fill[data-pct="16"] { inline-size: 16%; }
.bar-fill[data-pct="17"] { inline-size: 17%; }
.bar-fill[data-pct="18"] { inline-size: 18%; }
.bar-fill[data-pct="19"] { inline-size: 19%; }
.bar-fill[data-pct="20"] { inline-size: 20%; }
.bar-fill[data-pct="21"] { inline-size: 21%; }
.bar-fill[data-pct="22"] { inline-size: 22%; }
.bar-fill[data-pct="23"] { inline-size: 23%; }
.bar-fill[data-pct="24"] { inline-size: 24%; }
.bar-fill[data-pct="25"] { inline-size: 25%; }
.bar-fill[data-pct="26"] { inline-size: 26%; }
.bar-fill[data-pct="27"] { inline-size: 27%; }
.bar-fill[data-pct="28"] { inline-size: 28%; }
.bar-fill[data-pct="29"] { inline-size: 29%; }
.bar-fill[data-pct="30"] { inline-size: 30%; }
.bar-fill[data-pct="31"] { inline-size: 31%; }
.bar-fill[data-pct="32"] { inline-size: 32%; }
.bar-fill[data-pct="33"] { inline-size: 33%; }
.bar-fill[data-pct="34"] { inline-size: 34%; }
.bar-fill[data-pct="35"] { inline-size: 35%; }
.bar-fill[data-pct="36"] { inline-size: 36%; }
.bar-fill[data-pct="37"] { inline-size: 37%; }
.bar-fill[data-pct="38"] { inline-size: 38%; }
.bar-fill[data-pct="39"] { inline-size: 39%; }
.bar-fill[data-pct="40"] { inline-size: 40%; }
.bar-fill[data-pct="41"] { inline-size: 41%; }
.bar-fill[data-pct="42"] { inline-size: 42%; }
.bar-fill[data-pct="43"] { inline-size: 43%; }
.bar-fill[data-pct="44"] { inline-size: 44%; }
.bar-fill[data-pct="45"] { inline-size: 45%; }
.bar-fill[data-pct="46"] { inline-size: 46%; }
.bar-fill[data-pct="47"] { inline-size: 47%; }
.bar-fill[data-pct="48"] { inline-size: 48%; }
.bar-fill[data-pct="49"] { inline-size: 49%; }
.bar-fill[data-pct="50"] { inline-size: 50%; }
.bar-fill[data-pct="51"] { inline-size: 51%; }
.bar-fill[data-pct="52"] { inline-size: 52%; }
.bar-fill[data-pct="53"] { inline-size: 53%; }
.bar-fill[data-pct="54"] { inline-size: 54%; }
.bar-fill[data-pct="55"] { inline-size: 55%; }
.bar-fill[data-pct="56"] { inline-size: 56%; }
.bar-fill[data-pct="57"] { inline-size: 57%; }
.bar-fill[data-pct="58"] { inline-size: 58%; }
.bar-fill[data-pct="59"] { inline-size: 59%; }
.bar-fill[data-pct="60"] { inline-size: 60%; }
.bar-fill[data-pct="61"] { inline-size: 61%; }
.bar-fill[data-pct="62"] { inline-size: 62%; }
.bar-fill[data-pct="63"] { inline-size: 63%; }
.bar-fill[data-pct="64"] { inline-size: 64%; }
.bar-fill[data-pct="65"] { inline-size: 65%; }
.bar-fill[data-pct="66"] { inline-size: 66%; }
.bar-fill[data-pct="67"] { inline-size: 67%; }
.bar-fill[data-pct="68"] { inline-size: 68%; }
.bar-fill[data-pct="69"] { inline-size: 69%; }
.bar-fill[data-pct="70"] { inline-size: 70%; }
.bar-fill[data-pct="71"] { inline-size: 71%; }
.bar-fill[data-pct="72"] { inline-size: 72%; }
.bar-fill[data-pct="73"] { inline-size: 73%; }
.bar-fill[data-pct="74"] { inline-size: 74%; }
.bar-fill[data-pct="75"] { inline-size: 75%; }
.bar-fill[data-pct="76"] { inline-size: 76%; }
.bar-fill[data-pct="77"] { inline-size: 77%; }
.bar-fill[data-pct="78"] { inline-size: 78%; }
.bar-fill[data-pct="79"] { inline-size: 79%; }
.bar-fill[data-pct="80"] { inline-size: 80%; }
.bar-fill[data-pct="81"] { inline-size: 81%; }
.bar-fill[data-pct="82"] { inline-size: 82%; }
.bar-fill[data-pct="83"] { inline-size: 83%; }
.bar-fill[data-pct="84"] { inline-size: 84%; }
.bar-fill[data-pct="85"] { inline-size: 85%; }
.bar-fill[data-pct="86"] { inline-size: 86%; }
.bar-fill[data-pct="87"] { inline-size: 87%; }
.bar-fill[data-pct="88"] { inline-size: 88%; }
.bar-fill[data-pct="89"] { inline-size: 89%; }
.bar-fill[data-pct="90"] { inline-size: 90%; }
.bar-fill[data-pct="91"] { inline-size: 91%; }
.bar-fill[data-pct="92"] { inline-size: 92%; }
.bar-fill[data-pct="93"] { inline-size: 93%; }
.bar-fill[data-pct="94"] { inline-size: 94%; }
.bar-fill[data-pct="95"] { inline-size: 95%; }
.bar-fill[data-pct="96"] { inline-size: 96%; }
.bar-fill[data-pct="97"] { inline-size: 97%; }
.bar-fill[data-pct="98"] { inline-size: 98%; }
.bar-fill[data-pct="99"] { inline-size: 99%; }
.bar-fill[data-pct="100"] { inline-size: 100%; }

/* Lesson vocabulary, audio, speaking (Learn → See → Hear → Understand). Logical properties only; no inline styles (CSP). */
.vocab-card { list-style: none; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.vocab-head { display: flex; gap: 12px; align-items: center; }
.vocab-img { font-size: 2.4rem; line-height: 1; inline-size: 3.2rem; block-size: 3.2rem; display: inline-flex; align-items: center; justify-content: center; background: var(--soft); border-radius: var(--r); flex: none; }
.vocab-words { min-inline-size: 0; flex: 1; }
.vocab-de { font-size: 1.35rem; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vocab-meaning { margin: 0; color: var(--muted); }
.vocab-label { color: var(--muted); font-size: .875rem; }
.vocab-more > summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; color: var(--muted); }
.vocab-example, .vocab-plural { margin-block: 6px; }
.vocab-gloss { color: var(--muted); margin: 0; }
.de-unit { unicode-bidi: isolate; direction: ltr; display: inline-block; }
.de-unit .art { font-weight: 400; color: var(--muted); margin-inline-end: .3em; }
.audio { display: inline-flex; align-items: center; gap: 6px; }
.audio-btn { font: inherit; min-inline-size: 44px; min-block-size: 44px; border-radius: 999px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.audio-btn:disabled { opacity: .6; cursor: progress; }
.audio-note { font-size: .8rem; color: var(--muted); }
.speak-line { font-size: 1.6rem; margin: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.speak-target { unicode-bidi: isolate; direction: ltr; }
.feedback-title { margin: 0; font-size: 1.05rem; }
.tip { font-weight: 400; margin-block-start: 6px; }
.token, .key, .answer-de, [lang="de"] { unicode-bidi: isolate; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Dark mode: follows the device setting. Contrast kept ≥ 4.5:1 for text on every surface. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --ink:#E8ECF6; --bg:#0F1522; --surface:#18202F; --accent:#E3B341; --accent-ink:#0F1522; --danger:#FF8A9B; --success:#6FD39B; --muted:#AAB4C6; --line:#33405A; --focus:#7FB0FF; --soft:#232E45; --track:#2B364D; --notice-bg:#3A3118; --notice-line:#7A6523; --wrong-bg:#3B1E27; --wrong-line:#7A3345; --wrong-ink:#FFC2CC; --ok-bg:#16352A; --ok-ink:#B7F0CF; --on-ink:#0F1522; --brand:#7CC0EC; --on-brand:#08121F; --brand-soft:#1B2C45; --hero-bg:#14233F; --hero-bg2:#1C4A6E; --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28); --on-danger:#1A0B10; --warn-ink:#F0B35A; }
  .certificate { background: #fff; color: #14213D; }
}

/* ===== Premium learner layer: calm blue-teal brand, soft cards, clear hierarchy (calm, adult, not decorative) ===== */
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif; letter-spacing: .005em; }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); font-weight: 750; letter-spacing: -.01em; line-height: 1.2; }
h2 { font-weight: 700; letter-spacing: -.005em; }
.card { border-radius: 16px; box-shadow: var(--shadow); border-color: transparent; padding: 18px; animation: rise .28s ease-out both; }
.btn { border-radius: 12px; font-weight: 650; transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 1px 2px rgba(20,33,61,.18); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(29,95,138,.28); }
.btn-secondary { border-color: var(--brand); color: var(--brand); background: transparent; }
.nav { box-shadow: 0 1px 0 var(--line); }
.nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.bar { block-size: 12px; }
.bar-fill { background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 999px; }
.choice { border-radius: 12px; transition: border-color .12s ease, background-color .12s ease; }
.choice:hover { border-color: var(--brand); }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.token { border-radius: 12px; }
.feedback { border-radius: 12px; border-inline-start: 5px solid transparent; font-weight: 500; animation: rise .22s ease-out both; }
.feedback-correct { border-inline-start-color: var(--success); }
.feedback-wrong { border-inline-start-color: var(--danger); }
.feedback-title { font-weight: 750; }
.vocab-card { border-radius: 14px; box-shadow: var(--shadow); border-color: transparent; }
.vocab-de { font-weight: 700; }
.audio-btn { border-color: var(--brand); color: var(--brand); }
.audio-btn:hover:not(:disabled) { background: var(--brand-soft); }

/* dashboard */
.hero { background: linear-gradient(135deg, var(--hero-bg), var(--hero-bg2)); color: #fff; border-radius: 20px; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); animation: rise .3s ease-out both; }
.hero h1 { color: #fff; margin: 0; }
.hero .pill { background: rgba(255,255,255,.16); color: #fff; padding: 4px 12px; border-radius: 999px; font-weight: 650; font-size: .875rem; margin: 0; }
.hero-pct, .hero-sub { color: rgba(255,255,255,.9); margin: 0; font-size: .95rem; }
.hero .bar { background: rgba(255,255,255,.22); }
.hero .bar-fill { background: #fff; }
.btn-hero { background: #fff; color: var(--hero-bg); align-self: flex-start; min-block-size: 48px; padding-inline: 26px; font-size: 1.05rem; box-shadow: 0 4px 14px rgba(0,0,0,.2); text-decoration: none; }
.btn-hero:hover { box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr)); gap: 12px; }
.stat { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); animation: rise .34s ease-out both; }
.stat-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: .85rem; }
.stat-link { outline-offset: 2px; border: 2px solid var(--brand); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card, .hero, .stat, .feedback { animation: none !important; } }
@media (max-width: 480px) { .main { padding: 12px; } .hero { padding: 18px 16px; } }
.listen-text { font-size: 1.3rem; margin: 6px 0; }
@media (prefers-color-scheme: dark) { .hero { color: #fff; } .btn-hero { color: #14233F; } }

/* audio + speaking states (ADR-047): visible labels, a distinct recording state, calm error state */
.audio-btn { gap: 6px; padding-inline: 14px; font-weight: 600; }
.audio-label { font-size: .9rem; }
.audio-btn[data-state="playing"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.audio-btn[data-state="error"] { border-color: var(--danger); color: var(--danger); }
.audio-btn[data-state="loading"] .audio-icon { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.speak-state { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: 600; }
.speak-state .dot { inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--muted); }
.speak-state[data-state="recording"] { color: var(--danger); }
.speak-state[data-state="recording"] .dot { background: var(--danger); animation: pulse 1s ease-in-out infinite; }
.speak-state[data-state="analyzing"] .dot { background: var(--brand); animation: pulse 1s ease-in-out infinite; }
.speak-state[data-state="ready"] .dot { background: var(--success); }
.btn-record[data-recording="true"] { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }
.word-chip { display: inline-block; padding: 2px 10px; margin: 2px; border-radius: 999px; font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.word-chip[data-issue="none"] { background: var(--ok-bg); color: var(--ok-ink); }
.word-chip[data-issue="mispronunciation"] { background: var(--notice-bg); color: var(--warn-ink); }
.word-chip[data-issue="omission"] { background: var(--wrong-bg); color: var(--wrong-ink); text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) { .audio-btn[data-state="loading"] .audio-icon, .speak-state .dot { animation: none !important; } }
.ring[data-pct="0"] { --p: 0; }
.ring[data-pct="1"] { --p: 1; }
.ring[data-pct="2"] { --p: 2; }
.ring[data-pct="3"] { --p: 3; }
.ring[data-pct="4"] { --p: 4; }
.ring[data-pct="5"] { --p: 5; }
.ring[data-pct="6"] { --p: 6; }
.ring[data-pct="7"] { --p: 7; }
.ring[data-pct="8"] { --p: 8; }
.ring[data-pct="9"] { --p: 9; }
.ring[data-pct="10"] { --p: 10; }
.ring[data-pct="11"] { --p: 11; }
.ring[data-pct="12"] { --p: 12; }
.ring[data-pct="13"] { --p: 13; }
.ring[data-pct="14"] { --p: 14; }
.ring[data-pct="15"] { --p: 15; }
.ring[data-pct="16"] { --p: 16; }
.ring[data-pct="17"] { --p: 17; }
.ring[data-pct="18"] { --p: 18; }
.ring[data-pct="19"] { --p: 19; }
.ring[data-pct="20"] { --p: 20; }
.ring[data-pct="21"] { --p: 21; }
.ring[data-pct="22"] { --p: 22; }
.ring[data-pct="23"] { --p: 23; }
.ring[data-pct="24"] { --p: 24; }
.ring[data-pct="25"] { --p: 25; }
.ring[data-pct="26"] { --p: 26; }
.ring[data-pct="27"] { --p: 27; }
.ring[data-pct="28"] { --p: 28; }
.ring[data-pct="29"] { --p: 29; }
.ring[data-pct="30"] { --p: 30; }
.ring[data-pct="31"] { --p: 31; }
.ring[data-pct="32"] { --p: 32; }
.ring[data-pct="33"] { --p: 33; }
.ring[data-pct="34"] { --p: 34; }
.ring[data-pct="35"] { --p: 35; }
.ring[data-pct="36"] { --p: 36; }
.ring[data-pct="37"] { --p: 37; }
.ring[data-pct="38"] { --p: 38; }
.ring[data-pct="39"] { --p: 39; }
.ring[data-pct="40"] { --p: 40; }
.ring[data-pct="41"] { --p: 41; }
.ring[data-pct="42"] { --p: 42; }
.ring[data-pct="43"] { --p: 43; }
.ring[data-pct="44"] { --p: 44; }
.ring[data-pct="45"] { --p: 45; }
.ring[data-pct="46"] { --p: 46; }
.ring[data-pct="47"] { --p: 47; }
.ring[data-pct="48"] { --p: 48; }
.ring[data-pct="49"] { --p: 49; }
.ring[data-pct="50"] { --p: 50; }
.ring[data-pct="51"] { --p: 51; }
.ring[data-pct="52"] { --p: 52; }
.ring[data-pct="53"] { --p: 53; }
.ring[data-pct="54"] { --p: 54; }
.ring[data-pct="55"] { --p: 55; }
.ring[data-pct="56"] { --p: 56; }
.ring[data-pct="57"] { --p: 57; }
.ring[data-pct="58"] { --p: 58; }
.ring[data-pct="59"] { --p: 59; }
.ring[data-pct="60"] { --p: 60; }
.ring[data-pct="61"] { --p: 61; }
.ring[data-pct="62"] { --p: 62; }
.ring[data-pct="63"] { --p: 63; }
.ring[data-pct="64"] { --p: 64; }
.ring[data-pct="65"] { --p: 65; }
.ring[data-pct="66"] { --p: 66; }
.ring[data-pct="67"] { --p: 67; }
.ring[data-pct="68"] { --p: 68; }
.ring[data-pct="69"] { --p: 69; }
.ring[data-pct="70"] { --p: 70; }
.ring[data-pct="71"] { --p: 71; }
.ring[data-pct="72"] { --p: 72; }
.ring[data-pct="73"] { --p: 73; }
.ring[data-pct="74"] { --p: 74; }
.ring[data-pct="75"] { --p: 75; }
.ring[data-pct="76"] { --p: 76; }
.ring[data-pct="77"] { --p: 77; }
.ring[data-pct="78"] { --p: 78; }
.ring[data-pct="79"] { --p: 79; }
.ring[data-pct="80"] { --p: 80; }
.ring[data-pct="81"] { --p: 81; }
.ring[data-pct="82"] { --p: 82; }
.ring[data-pct="83"] { --p: 83; }
.ring[data-pct="84"] { --p: 84; }
.ring[data-pct="85"] { --p: 85; }
.ring[data-pct="86"] { --p: 86; }
.ring[data-pct="87"] { --p: 87; }
.ring[data-pct="88"] { --p: 88; }
.ring[data-pct="89"] { --p: 89; }
.ring[data-pct="90"] { --p: 90; }
.ring[data-pct="91"] { --p: 91; }
.ring[data-pct="92"] { --p: 92; }
.ring[data-pct="93"] { --p: 93; }
.ring[data-pct="94"] { --p: 94; }
.ring[data-pct="95"] { --p: 95; }
.ring[data-pct="96"] { --p: 96; }
.ring[data-pct="97"] { --p: 97; }
.ring[data-pct="98"] { --p: 98; }
.ring[data-pct="99"] { --p: 99; }
.ring[data-pct="100"] { --p: 100; }

/* ===================================================================================================================================================
   UX layer (ADR-048): tokens, mobile tab bar, dashboard, vocabulary cards, exercise feedback, speaking studio.
   Logical properties only (RTL mirrors for free); no inline styles (CSP): fills use data-pct rules; every colour pair is ≥ 4.5:1 in both themes.
   =================================================================================================================================================== */
:root { --paper:#F5F6F8; --gold:#B7791F; --gold-soft:#FBF1D9; --gold-ink:#7A4E07; --red:#C0392B; --red-soft:#FCE9E6; --green:#1E8A57; --green-soft:#E1F3E9; --der:#1D5F8A; --der-soft:#E1EEF7; --die:#B4234E; --die-soft:#FBE6EC; --das:#1E7A4A; --das-soft:#E2F3E9; --ring-c:var(--gold); --stripe:linear-gradient(90deg,#1b1b1b 0 33.3%,#C0392B 33.3% 66.6%,#E0A526 66.6%); --tabh:64px; --r-lg:20px; }
body { background: var(--paper); }
.main { inline-size: min(100%, 48rem); }
.pill { display: inline-block; }
.pill-soft { background: var(--brand-soft); color: var(--brand); padding: 3px 12px; border-radius: 999px; font-weight: 650; font-size: .8rem; margin: 0; align-self: flex-start; }
.small { font-size: .875rem; }

/* ---- navigation: bottom tab bar on phones, slim top bar on larger screens ---- */
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px var(--gap); background: var(--surface); border-block-end: 1px solid var(--line); position: relative; }
.topbar::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 3px; background: var(--stripe); }
.topbar-mark { inline-size: 30px; block-size: 30px; border-radius: 9px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-weight: 800; font-size: .8rem; letter-spacing: .02em; }
.topbar-name { font-weight: 800; letter-spacing: .08em; font-size: .9rem; }
.nav a.brand { display: none; }
.nav-icon { font-size: 1.25rem; line-height: 1; }
.nav-label { font-size: .72rem; font-weight: 600; }
@media (max-width: 719.98px) {
  .nav { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 0; padding-block-end: env(safe-area-inset-bottom); border-block-end: 0; border-block-start: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(20,33,61,.08); overflow: visible; }
  .nav a { flex-direction: column; justify-content: center; gap: 2px; padding: 8px 2px; min-block-size: var(--tabh); border-radius: 0; color: var(--muted); position: relative; }
  .nav a.active { background: transparent; color: var(--brand); }
  .nav a.active::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 22%; block-size: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
  .app { padding-block-end: calc(var(--tabh) + env(safe-area-inset-bottom)); }
}
@media (min-width: 720px) {
  .topbar { display: none; }
  .nav { justify-content: flex-start; align-items: center; gap: 6px; padding: 8px max(var(--gap), calc((100% - 48rem) / 2)); position: sticky; inset-block-start: 0; z-index: 20; }
  .nav::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 3px; background: var(--stripe); }
  .nav a.brand { display: inline-flex; font-weight: 800; letter-spacing: .1em; font-size: .9rem; margin-inline-end: auto; padding-inline: 4px !important; }
  .nav a { flex-direction: row; gap: 8px; }
  .nav-label { font-size: .9rem; }
  .nav-icon { font-size: 1.05rem; }
}

/* ---- dashboard ---- */
.hero { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 24px 22px 22px; background: radial-gradient(120% 140% at 100% 0%, var(--hero-bg2) 0%, var(--hero-bg) 62%); gap: 8px; }
.hero::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 4px; background: var(--stripe); }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-kicker { margin: 6px 0 0; color: rgba(255,255,255,.82); font-size: .875rem; font-weight: 600; }
.hero h1 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.1rem); }
.hero .bar { margin-block-start: 6px; block-size: 8px; }
.btn-hero { margin-block-start: 8px; border-radius: 14px; font-weight: 750; }
.encourage { border-inline-start: 4px solid var(--gold); padding: 6px 14px; background: transparent; }
.encourage-good { border-inline-start-color: var(--green); } .encourage-try { border-inline-start-color: var(--brand); }
.encourage-de { margin: 0; font-weight: 750; font-size: 1.1rem; }
.encourage-ui { margin: 0; color: var(--muted); }
.goal-card { display: flex; align-items: center; gap: 18px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 18px; }
.goal-card h2 { margin: 0 0 2px; }
.goal-line { margin: 0; font-weight: 750; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.stats .stat { position: relative; padding-block-start: 16px; }
.stat-icon { font-size: 1.3rem; line-height: 1; }
.stat.tone-gold .stat-value { color: var(--gold-ink); } .stat.tone-green .stat-value { color: var(--das); } .stat.tone-red .stat-value { color: var(--red); }
.stat-link:hover { background: var(--red-soft); }
.streak-line { margin: 0; }
.action-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 16px; }
.action-review { border-inline-start: 5px solid var(--red); }
.action-icon { font-size: 1.6rem; }
.action-body { flex: 1; min-inline-size: 0; } .action-body h2 { margin: 0; font-size: 1.05rem; } .action-body p { margin: 0; }
.action-card > a { font-weight: 700; color: var(--brand); text-underline-offset: 3px; min-block-size: 44px; display: inline-flex; align-items: center; }
.path-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.path-card h2 { margin: 0; }
.path { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; }
.path-step { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--muted); font-weight: 700; }
.path-step + .path-step::before { content: ""; flex: 1; block-size: 2px; background: var(--line); margin-inline-end: 8px; }
.path-step.done + .path-step::before, .path-step.current::before { background: var(--brand); }
.path-dot { inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--surface); flex: none; font-size: .85rem; }
.path-step.done .path-dot { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.path-step.current .path-dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.path-step.current { color: var(--ink); }
.quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quick-card { display: flex; align-items: center; gap: 10px; padding: 14px 16px; min-block-size: 56px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); font-weight: 650; transition: transform .12s ease, box-shadow .15s ease; }
.quick-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,33,61,.12); }
.quick-card > span:first-child { font-size: 1.4rem; }
@media (min-width: 720px) { .quick { grid-template-columns: repeat(4, 1fr); } }
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 10px; }
.badge-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 8px; border-radius: 14px; background: var(--soft); color: var(--muted); font-size: .85rem; font-weight: 600; }
.badge-item .badge-icon { font-size: 1.6rem; filter: grayscale(1); opacity: .55; }
.badge-item.earned { background: var(--gold-soft); color: var(--gold-ink); }
.badge-item.earned .badge-icon { filter: none; opacity: 1; animation: pop .5s ease-out both; }
.badge { display: inline-block; background: var(--green-soft); color: var(--ok-ink); padding: 3px 12px; border-radius: 999px; font-weight: 650; font-size: .8rem; }

/* ---- progress ring + meter ---- */
.ring { --p: 0; --ring-c: var(--gold); --d: 84px; --w: 9px; inline-size: var(--d); block-size: var(--d); border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--ring-c) calc(var(--p) * 1%), var(--track) 0); }
.ring-sm { --d: 56px; --w: 6px; } .ring-lg { --d: 96px; --w: 10px; }
.ring-green { --ring-c: var(--green); } .ring-red { --ring-c: var(--red); } .ring-ink { --ring-c: var(--brand); } .ring-gold { --ring-c: var(--gold); }
.ring-center { inline-size: calc(var(--d) - var(--w) * 2); block-size: calc(var(--d) - var(--w) * 2); border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.ring-num { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.25rem; line-height: 1; }
.ring-sm .ring-num { font-size: 1rem; } .ring-lg .ring-num { font-size: 1.45rem; }
.ring-check { font-size: 2.2rem; color: var(--green); font-weight: 800; animation: pop .5s ease-out both; }
.meter { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: 10px 14px; }
.meter-title { margin: 0; color: var(--muted); font-size: .85rem; font-weight: 600; } .meter-value { margin: 0; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.meter-text { min-inline-size: 0; } .meter-full { border-inline-start: 5px solid var(--red); }

/* ---- loading + empty ---- */
.loading { padding: 0; text-align: start; display: flex; flex-direction: column; gap: 14px; }
.skel { border-radius: 14px; background: linear-gradient(90deg, var(--track) 25%, var(--soft) 50%, var(--track) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel-hero { block-size: 168px; border-radius: var(--r-lg); } .skel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .skel-tile { block-size: 84px; } .skel-line { block-size: 16px; } .skel-line.short { inline-size: 55%; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 20px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.empty-icon { font-size: 2.6rem; } .empty h2 { margin: 6px 0 0; }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

/* ---- lessons list ---- */
.list-head { display: flex; flex-direction: column; gap: 2px; }
.lesson-cards { gap: 10px; }
.lesson-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-block-size: 64px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .12s ease, box-shadow .15s ease; }
.lesson-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,33,61,.12); }
.lesson-num { inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 800; flex: none; }
.lesson-card.is-done .lesson-num { background: var(--green-soft); color: var(--ok-ink); }
.lesson-info { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.lesson-go { color: var(--brand); font-weight: 700; }

/* ---- lesson intro ---- */
.lesson-head { display: flex; flex-direction: column; gap: 6px; } .lesson-head h1 { margin: 0; } .lesson-meta { margin: 0; }
.jump { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 6px; }
.jump-chip { font: inherit; font-weight: 650; min-block-size: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.jump-chip:hover { border-color: var(--brand); color: var(--brand); }
.goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.goals li { display: flex; gap: 10px; align-items: flex-start; }
.goal-tick { inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--green-soft); color: var(--ok-ink); display: grid; place-items: center; font-size: .75rem; font-weight: 800; flex: none; margin-block-start: 2px; }
.lesson-section { scroll-margin-block-start: 76px; display: flex; flex-direction: column; gap: 10px; }
.lesson-section > h2 { margin: .5rem 0 0; }
.card.lesson-section > h2 { margin-block-start: 0; }

/* ---- vocabulary card: picture · article-coloured word · speaker ---- */
.vocab { gap: 14px; }
.vocab-card { padding: 16px; gap: 10px; border-radius: 18px; border-inline-start: 6px solid var(--line); }
.vocab-card[data-art="der"] { border-inline-start-color: var(--der); } .vocab-card[data-art="die"] { border-inline-start-color: var(--die); } .vocab-card[data-art="das"] { border-inline-start-color: var(--das); }
.vocab-head { gap: 16px; }
.vocab-de { font-size: 1.75rem; line-height: 1.15; gap: 10px; letter-spacing: -.01em; }
.vocab-meaning { font-size: 1.05rem; margin-block-start: 4px; }
.art-tile { inline-size: 5.4rem; block-size: 5.4rem; flex: none; border-radius: 18px; display: grid; place-items: center; font-size: 3rem; line-height: 1; background: var(--soft); color: var(--brand); overflow: hidden; padding: 10px; }
.art-tile svg { inline-size: 100%; block-size: 100%; }
.art-tile[data-art="der"] { background: var(--der-soft); color: var(--der); } .art-tile[data-art="die"] { background: var(--die-soft); color: var(--die); } .art-tile[data-art="das"] { background: var(--das-soft); color: var(--das); }
.de-unit .art { font-weight: 800; padding: 0 .35em; border-radius: 8px; margin-inline-end: 0; background: var(--soft); color: var(--ink); }
.de-unit .art[data-art="der"] { background: var(--der-soft); color: var(--der); } .de-unit .art[data-art="die"] { background: var(--die-soft); color: var(--die); } .de-unit .art[data-art="das"] { background: var(--das-soft); color: var(--das); }
.vocab-more { border-block-start: 1px dashed var(--line); padding-block-start: 2px; }
.vocab-more > summary { font-weight: 600; }
.vocab-tutor { border-block-start: 1px dashed var(--line); } .vocab-tutor > summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; color: var(--brand); font-weight: 650; }
.tutor-answer { background: var(--brand-soft); border-radius: 14px; padding: 12px 14px; margin-block-start: 8px; animation: rise .25s ease-out both; }
.tutor-answer .examples { margin: 6px 0 0; padding-inline-start: 1.1rem; }

/* ---- audio button ---- */
.audio-btn { border-radius: 999px; transition: background-color .15s ease, transform .08s ease, box-shadow .15s ease; }
.audio-btn:active:not(:disabled) { transform: scale(.96); }
.audio-lg { min-inline-size: 52px; min-block-size: 52px; padding-inline: 18px; background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-size: 1rem; box-shadow: 0 4px 12px rgba(29,95,138,.25); }
.audio-lg:hover:not(:disabled) { background: var(--brand); filter: brightness(1.08); }
.audio-lg .audio-icon { font-size: 1.25rem; }
.audio-btn[data-state="playing"] { box-shadow: 0 0 0 6px var(--brand-soft); }
.audio-btn[data-state="playing"] .audio-icon { animation: pulse 1s ease-in-out infinite; }
.audio-btn[data-state="error"] { background: var(--wrong-bg); }
.audio-compact { padding-inline: 0; min-inline-size: 44px; border-color: var(--line); }
.audio-compact .audio-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.audio-note:empty { display: none; }

/* ---- dialogue ---- */
.dialogue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.turn { display: flex; gap: 10px; align-items: flex-end; max-inline-size: 92%; }
.turn-b { align-self: flex-end; flex-direction: row-reverse; }
.turn-avatar { inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 800; flex: none; }
.turn-b .turn-avatar { background: var(--gold-soft); color: var(--gold-ink); }
.turn-bubble { background: var(--soft); border-radius: 16px; padding: 10px 14px; border-end-start-radius: 4px; }
.turn-b .turn-bubble { background: var(--brand-soft); border-end-start-radius: 16px; border-end-end-radius: 4px; }
.turn-bubble p { margin: 2px 0; } .turn-name { font-size: .78rem; color: var(--muted); } .turn-de { font-size: 1.1rem; font-weight: 600; }

/* ---- sticky call to action ---- */
.cta-bar { position: sticky; inset-block-end: calc(var(--tabh) + env(safe-area-inset-bottom) + 8px); z-index: 5; margin-block-start: 8px; }
.cta-inner { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); box-shadow: 0 6px 24px rgba(20,33,61,.16); }
.cta-inner .btn { flex: 1 1 10rem; min-block-size: 50px; }
@media (min-width: 720px) { .cta-bar { inset-block-end: 12px; } }

/* ---- exercise ---- */
.ex-head { display: flex; align-items: center; gap: 12px; }
.ex-close { inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); text-decoration: none; font-size: 1.6rem; flex: none; }
.ex-close:hover { background: var(--soft); color: var(--ink); }
.ex-progress { flex: 1; } .ex-count { margin: 0; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.choice { padding: 14px 16px; min-block-size: 54px; font-size: 1.02rem; }
.choice:has(input:checked) { box-shadow: 0 0 0 3px var(--brand-soft); font-weight: 600; }
.exercise .btn, [data-testid="lesson-actions"] .btn { min-block-size: 52px; }
[data-testid="lesson-actions"] { margin-block-start: 6px; }
[data-testid="lesson-actions"] .btn { flex: 1 1 9rem; }

/* ---- feedback after every exercise ---- */
.feedback { padding: 14px 16px; border-radius: 16px; border-inline-start-width: 6px; font-weight: 500; }
.feedback:empty { display: none; }
.fb-head { display: flex; align-items: center; gap: 12px; }
.fb-icon { inline-size: 38px; block-size: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none; background: var(--surface); animation: pop .35s ease-out both; }
.feedback-correct .fb-icon { color: var(--green); } .feedback-wrong .fb-icon { color: var(--red); }
.fb-msg { flex: 1; min-inline-size: 0; } .fb-de { margin: 0; font-size: 1.15rem; font-weight: 800; } .fb-ui { margin: 0; font-weight: 500; }
.feedback-wrong { animation: nudge .35s ease-out both; }
.xp-chip { background: var(--gold-soft); color: var(--gold-ink); font-weight: 800; padding: 4px 12px; border-radius: 999px; font-size: .85rem; white-space: nowrap; animation: floatup .6s ease-out both; }
.solution { margin: 10px 0 0; } .tip { margin: 8px 0 0; font-weight: 400; }
@keyframes nudge { 0%,100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes floatup { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- lesson complete ---- */
.celebrate { align-items: center; text-align: center; gap: 12px; padding-block: 28px; }
.celebrate h1 { margin: 0; } .celebrate .encourage { text-align: start; }
.celebrate-badge { display: flex; justify-content: center; }
.result-stats { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; inline-size: 100%; }
.result-stats li { background: var(--soft); border-radius: 14px; padding: 12px 6px; display: flex; flex-direction: column; gap: 2px; }
.rs-num { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; } .rs-label { font-size: .8rem; color: var(--muted); }

/* ---- speaking studio ---- */
.speak-top { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 720px) { .speak-top { flex-direction: row; align-items: center; justify-content: space-between; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.step { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--soft); color: var(--muted); font-size: .85rem; font-weight: 600; }
.step-n { inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: .75rem; flex: none; }
.step.current { background: var(--brand-soft); color: var(--brand); } .step.current .step-n { background: var(--brand); color: var(--on-brand); }
.step.done { color: var(--ok-ink); background: var(--green-soft); } .step.done .step-n { background: var(--green); color: #fff; }
.target-card { background: var(--soft); border-radius: var(--r-lg); padding: 20px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.target-label { margin: 0; font-size: .85rem; color: var(--muted); font-weight: 600; }
.speak-line { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem); font-weight: 750; justify-content: center; margin: 4px 0; line-height: 1.25; }
.target-listen { margin-block-start: 6px; }
.mic-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 8px; }
.mic-stage[data-locked="true"] .rec-btn { opacity: .5; }
.rec-btn { inline-size: 112px; block-size: 112px; border-radius: 50%; border: 0; cursor: pointer; background: var(--red); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; font-weight: 700; box-shadow: 0 8px 24px rgba(192,57,43,.35); transition: transform .12s ease, box-shadow .2s ease; position: relative; }
.rec-btn:hover:not(:disabled) { transform: scale(1.04); }
.rec-btn:disabled { background: var(--muted); box-shadow: none; cursor: not-allowed; opacity: .55; }
.rec-icon { font-size: 2.2rem; line-height: 1; } .rec-label { font-size: .85rem; }
.rec-btn[data-recording="true"] { background: var(--ink); color: var(--on-ink); animation: ripple 1.4s ease-out infinite; }
@keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(192,57,43,.55); } 100% { box-shadow: 0 0 0 28px rgba(192,57,43,0); } }
.wave { display: flex; align-items: center; justify-content: center; gap: 4px; block-size: 36px; opacity: 0; transition: opacity .2s; }
.is-recording .wave { opacity: 1; }
.wave-bar { inline-size: 5px; block-size: 8px; border-radius: 3px; background: var(--red); animation: wave 0.9s ease-in-out infinite; }
.wb1 { animation-delay: .1s; } .wb2 { animation-delay: .2s; } .wb3 { animation-delay: .3s; } .wb4 { animation-delay: .4s; } .wb5 { animation-delay: .5s; } .wb6 { animation-delay: .6s; }
@keyframes wave { 0%,100% { block-size: 8px; } 50% { block-size: 32px; } }
.is-analyzing .rec-btn { animation: pulse 1s ease-in-out infinite; }
.mic-hint { margin: 0; text-align: center; } .mic-hint[hidden], [hidden] { display: none !important; }
.speak-state { justify-content: center; }
.result-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-inline-start-width: 6px; }
.result-card:empty { display: none; }
.result-top { display: flex; align-items: center; gap: 16px; }
.result-msg { flex: 1; min-inline-size: 0; } .result-msg p { margin: 2px 0; }
.result-label { font-size: .85rem; color: var(--muted); font-weight: 650; }
.speak-detail { display: flex; flex-direction: column; gap: 6px; } .word-chips { margin: 0; }
.speak-actions { margin-block-start: 6px; } .speak-actions .btn { flex: 1 1 9rem; min-block-size: 52px; }
.speak-actions .btn-link { flex: 0 0 auto; min-block-size: 44px; }
.score-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.score-bar { block-size: 10px; background: var(--track); border-radius: 999px; overflow: hidden; } .score-fill { block-size: 100%; background: var(--brand); display: block; }
.score-fill[data-pct="0"] { inline-size: 0%; }
.score-fill[data-pct="1"] { inline-size: 1%; }
.score-fill[data-pct="2"] { inline-size: 2%; }
.score-fill[data-pct="3"] { inline-size: 3%; }
.score-fill[data-pct="4"] { inline-size: 4%; }
.score-fill[data-pct="5"] { inline-size: 5%; }
.score-fill[data-pct="6"] { inline-size: 6%; }
.score-fill[data-pct="7"] { inline-size: 7%; }
.score-fill[data-pct="8"] { inline-size: 8%; }
.score-fill[data-pct="9"] { inline-size: 9%; }
.score-fill[data-pct="10"] { inline-size: 10%; }
.score-fill[data-pct="11"] { inline-size: 11%; }
.score-fill[data-pct="12"] { inline-size: 12%; }
.score-fill[data-pct="13"] { inline-size: 13%; }
.score-fill[data-pct="14"] { inline-size: 14%; }
.score-fill[data-pct="15"] { inline-size: 15%; }
.score-fill[data-pct="16"] { inline-size: 16%; }
.score-fill[data-pct="17"] { inline-size: 17%; }
.score-fill[data-pct="18"] { inline-size: 18%; }
.score-fill[data-pct="19"] { inline-size: 19%; }
.score-fill[data-pct="20"] { inline-size: 20%; }
.score-fill[data-pct="21"] { inline-size: 21%; }
.score-fill[data-pct="22"] { inline-size: 22%; }
.score-fill[data-pct="23"] { inline-size: 23%; }
.score-fill[data-pct="24"] { inline-size: 24%; }
.score-fill[data-pct="25"] { inline-size: 25%; }
.score-fill[data-pct="26"] { inline-size: 26%; }
.score-fill[data-pct="27"] { inline-size: 27%; }
.score-fill[data-pct="28"] { inline-size: 28%; }
.score-fill[data-pct="29"] { inline-size: 29%; }
.score-fill[data-pct="30"] { inline-size: 30%; }
.score-fill[data-pct="31"] { inline-size: 31%; }
.score-fill[data-pct="32"] { inline-size: 32%; }
.score-fill[data-pct="33"] { inline-size: 33%; }
.score-fill[data-pct="34"] { inline-size: 34%; }
.score-fill[data-pct="35"] { inline-size: 35%; }
.score-fill[data-pct="36"] { inline-size: 36%; }
.score-fill[data-pct="37"] { inline-size: 37%; }
.score-fill[data-pct="38"] { inline-size: 38%; }
.score-fill[data-pct="39"] { inline-size: 39%; }
.score-fill[data-pct="40"] { inline-size: 40%; }
.score-fill[data-pct="41"] { inline-size: 41%; }
.score-fill[data-pct="42"] { inline-size: 42%; }
.score-fill[data-pct="43"] { inline-size: 43%; }
.score-fill[data-pct="44"] { inline-size: 44%; }
.score-fill[data-pct="45"] { inline-size: 45%; }
.score-fill[data-pct="46"] { inline-size: 46%; }
.score-fill[data-pct="47"] { inline-size: 47%; }
.score-fill[data-pct="48"] { inline-size: 48%; }
.score-fill[data-pct="49"] { inline-size: 49%; }
.score-fill[data-pct="50"] { inline-size: 50%; }
.score-fill[data-pct="51"] { inline-size: 51%; }
.score-fill[data-pct="52"] { inline-size: 52%; }
.score-fill[data-pct="53"] { inline-size: 53%; }
.score-fill[data-pct="54"] { inline-size: 54%; }
.score-fill[data-pct="55"] { inline-size: 55%; }
.score-fill[data-pct="56"] { inline-size: 56%; }
.score-fill[data-pct="57"] { inline-size: 57%; }
.score-fill[data-pct="58"] { inline-size: 58%; }
.score-fill[data-pct="59"] { inline-size: 59%; }
.score-fill[data-pct="60"] { inline-size: 60%; }
.score-fill[data-pct="61"] { inline-size: 61%; }
.score-fill[data-pct="62"] { inline-size: 62%; }
.score-fill[data-pct="63"] { inline-size: 63%; }
.score-fill[data-pct="64"] { inline-size: 64%; }
.score-fill[data-pct="65"] { inline-size: 65%; }
.score-fill[data-pct="66"] { inline-size: 66%; }
.score-fill[data-pct="67"] { inline-size: 67%; }
.score-fill[data-pct="68"] { inline-size: 68%; }
.score-fill[data-pct="69"] { inline-size: 69%; }
.score-fill[data-pct="70"] { inline-size: 70%; }
.score-fill[data-pct="71"] { inline-size: 71%; }
.score-fill[data-pct="72"] { inline-size: 72%; }
.score-fill[data-pct="73"] { inline-size: 73%; }
.score-fill[data-pct="74"] { inline-size: 74%; }
.score-fill[data-pct="75"] { inline-size: 75%; }
.score-fill[data-pct="76"] { inline-size: 76%; }
.score-fill[data-pct="77"] { inline-size: 77%; }
.score-fill[data-pct="78"] { inline-size: 78%; }
.score-fill[data-pct="79"] { inline-size: 79%; }
.score-fill[data-pct="80"] { inline-size: 80%; }
.score-fill[data-pct="81"] { inline-size: 81%; }
.score-fill[data-pct="82"] { inline-size: 82%; }
.score-fill[data-pct="83"] { inline-size: 83%; }
.score-fill[data-pct="84"] { inline-size: 84%; }
.score-fill[data-pct="85"] { inline-size: 85%; }
.score-fill[data-pct="86"] { inline-size: 86%; }
.score-fill[data-pct="87"] { inline-size: 87%; }
.score-fill[data-pct="88"] { inline-size: 88%; }
.score-fill[data-pct="89"] { inline-size: 89%; }
.score-fill[data-pct="90"] { inline-size: 90%; }
.score-fill[data-pct="91"] { inline-size: 91%; }
.score-fill[data-pct="92"] { inline-size: 92%; }
.score-fill[data-pct="93"] { inline-size: 93%; }
.score-fill[data-pct="94"] { inline-size: 94%; }
.score-fill[data-pct="95"] { inline-size: 95%; }
.score-fill[data-pct="96"] { inline-size: 96%; }
.score-fill[data-pct="97"] { inline-size: 97%; }
.score-fill[data-pct="98"] { inline-size: 98%; }
.score-fill[data-pct="99"] { inline-size: 99%; }
.score-fill[data-pct="100"] { inline-size: 100%; }
.change-sentence { margin-block-start: 6px; }
.flashcard { font-size: 2.2rem; font-weight: 800; background: var(--soft); border-radius: var(--r-lg); padding: 28px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.bubble-hello { background: var(--brand-soft); border: 0; }
.bubble { border-radius: 18px; padding: 12px 14px; } .bubble p { margin: 4px 0; }
.bubble-you { background: var(--brand); color: var(--on-brand); border-end-end-radius: 4px; } .bubble-tutor { border-end-start-radius: 4px; }
.tab { border-radius: 999px; } .tab.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.btn-record[data-recording="true"] { background: var(--ink); }
@media (max-width: 480px) { .vocab-de { font-size: 1.5rem; } .art-tile { inline-size: 4.4rem; block-size: 4.4rem; font-size: 2.4rem; } .result-top { flex-direction: column; text-align: center; } .steps { grid-template-columns: 1fr; } .step { padding: 6px 10px; } }

/* ---- dark theme for the new tokens (all text pairs ≥ 4.5:1) ---- */
@media (prefers-color-scheme: dark) {
  :root { --paper:#0B101B; --gold:#E3B341; --gold-soft:#3A3118; --gold-ink:#F3D27A; --red:#FF8A7A; --red-soft:#3B1E27; --green:#6FD39B; --green-soft:#16352A; --der:#8CC6EE; --der-soft:#16304A; --die:#FF9DB8; --die-soft:#432034; --das:#7FDDA6; --das-soft:#163829; }
  .rec-btn { color: #1A0B10; } .rec-btn[data-recording="true"] { color: var(--on-ink); }
  .step.done .step-n { color: #08121F; } .audio-lg { box-shadow: none; } .cta-inner { box-shadow: 0 6px 24px rgba(0,0,0,.5); }
  .nav { box-shadow: 0 -4px 18px rgba(0,0,0,.4); } .quick-card:hover, .lesson-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.45); }
}
@media (prefers-reduced-motion: reduce) { .skel, .wave-bar, .rec-btn, .fb-icon, .xp-chip, .badge-icon, .ring-check, .tutor-answer, .audio-icon, .quick-card, .lesson-card { animation: none !important; transition: none !important; } }
@media print { .topbar, .cta-bar { display: none !important; } }
.vocab-de .audio-lg { min-inline-size: 52px; padding-inline: 0; }
.vocab-de .audio-lg .audio-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vocab-de { flex-wrap: nowrap; }

/* ---- visual learning layer (ADR-049): lesson hero, word photo, SEE→HEAR→SAY→USE strip, learning journey ---- */
.lesson-hero { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; max-block-size: 230px; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; box-shadow: var(--shadow); background: var(--soft); }
.lesson-hero img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.lesson-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.25)); pointer-events: none; }
.lesson-hero::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 4px; background: var(--stripe); z-index: 1; }
.hero-glyph { font-size: clamp(3.5rem, 18vw, 6rem); line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.22)); }
.hero-gold { background: radial-gradient(90% 120% at 15% 10%, #F6E3B0, #E7B84F 70%, #C98F1F); }
.hero-ink { background: radial-gradient(90% 120% at 15% 10%, #4A6FA5, #1F3A66 70%, #14213D); }
.hero-rose { background: radial-gradient(90% 120% at 15% 10%, #F3B8C8, #D2557C 70%, #A32A55); }
.hero-green { background: radial-gradient(90% 120% at 15% 10%, #A8DFC0, #3FA877 70%, #1E7A4A); }
.hero-teal { background: radial-gradient(90% 120% at 15% 10%, #A6D8E8, #3F95B5 70%, #1D5F8A); }
.art-photo { padding: 0; } .art-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; display: block; }
.vflow { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.vflow li { display: flex; align-items: center; justify-content: center; min-block-size: 36px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .8rem; font-weight: 700; }
.vflow li[data-done="true"] { background: var(--green-soft); color: var(--ok-ink); }
.vflow li[data-done="true"]::before { content: "✓"; margin-inline-end: 4px; font-size: .75rem; }
.vflow a { color: var(--brand); text-decoration: none; min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; margin-block: -4px; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; }
.journey li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: .72rem; font-weight: 650; color: var(--muted); }
.journey li::before { content: ""; position: absolute; inset-block-start: 21px; inset-inline-start: -50%; inline-size: 100%; block-size: 2px; background: var(--line); z-index: 0; }
.journey li:first-child::before { display: none; }
.journey li[data-state="done"]::before, .journey li[data-state="current"]::before { background: var(--brand); }
.journey a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; text-decoration: none; min-block-size: 44px; position: relative; z-index: 1; }
.journey-dot { inline-size: 42px; block-size: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); font-size: 1.15rem; }
.journey li[data-state="done"] .journey-dot { background: var(--brand-soft); border-color: var(--brand); }
.journey li[data-state="current"] .journey-dot { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); background: var(--surface); }
.journey li[data-state="current"] { color: var(--ink); }
.journey-badge { position: absolute; inset-block-start: -4px; inset-inline-end: calc(50% - 26px); min-inline-size: 20px; block-size: 20px; padding-inline: 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: .7rem; display: grid; place-items: center; z-index: 2; }
@media (max-width: 380px) { .journey li { font-size: .66rem; } .journey-dot { inline-size: 36px; block-size: 36px; } .journey li::before { inset-block-start: 18px; } }
@media (prefers-color-scheme: dark) { .journey-badge { color: #1A0B10; } }
.welcome { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px 18px; border-inline-start: 5px solid var(--gold); display: flex; flex-direction: column; gap: 6px; animation: rise .3s ease-out both; }
.welcome h2 { margin: 0; font-size: 1.3rem; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-weight: 600; min-block-size: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.typing { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; min-block-size: 40px; }
.typing[hidden] { display: none !important; }
.typing .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--muted); animation: pulse 1s ease-in-out infinite; }
.typing .dot:nth-child(2) { animation-delay: .15s; } .typing .dot:nth-child(3) { animation-delay: .3s; }
summary { min-block-size: 44px; display: flex; align-items: center; cursor: pointer; }
.lesson-hero + .lesson-head { margin-block-start: 6px; }
@media (max-width: 420px) { .journey li { font-size: .64rem; } .journey a > span:last-child { overflow-wrap: anywhere; line-height: 1.15; } }

/* ── Structured grammar card (ADR-053): rule → table → why → examples ── */
.grammar-card { gap: 12px; }
.g-kicker { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink, var(--accent)); }
.g-title { margin: 0; font-size: 1.2rem; }
.g-label { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--muted); margin-block-end: 4px; letter-spacing: .02em; }
.g-rule { background: var(--soft); border-inline-start: 4px solid var(--gold, var(--accent)); border-radius: 10px; padding: 10px 14px; }
.g-rule p { margin: 0; font-weight: 600; line-height: 1.7; }
.g-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.g-table { inline-size: 100%; border-collapse: collapse; font-size: 1rem; }
.g-table th, .g-table td { padding: 9px 12px; text-align: start; border-block-end: 1px solid var(--line); vertical-align: middle; }
.g-table thead th { background: var(--ink); color: var(--on-ink, #fff); font-size: .85rem; font-weight: 700; }
.g-table tbody tr:last-child > * { border-block-end: 0; }
.g-table tbody tr:nth-child(even) { background: var(--soft); }
.g-table tbody th { font-weight: 700; }
.g-formula { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--violet-deep, var(--ink)); font-weight: 700; font-size: 1.05rem; line-height: 1.7; border: 1px dashed var(--brand); }
.g-mistake { border: 1px solid var(--wrong-line); background: var(--wrong-bg); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.g-mistake p { margin: 0; display: flex; gap: 8px; align-items: baseline; line-height: 1.6; }
.g-wrong { color: var(--wrong-ink); } .g-wrong .de { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.g-right { color: var(--ok-ink); }
.g-mark { font-weight: 800; min-inline-size: 1em; text-decoration: none !important; }
.g-why ul { margin: 0; padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: 6px; }
.g-why li { line-height: 1.7; }
.g-why li::marker { color: var(--gold, var(--accent)); }
.g-examples .examples { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.g-examples .examples li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.ex-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lesson-tools { justify-content: space-between; align-items: center; }
.speed-btn { font: inherit; font-size: .85rem; min-block-size: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; }
.speed-btn:hover { border-color: var(--ink); }
.ex-head .speed-btn { margin-inline-start: auto; }

/* ── Deutschora identity (ADR-053): violet + umlaut gold, rounded calm surfaces. Overrides the earlier tokens; component rules stay as they are. ── */
:root {
  --violet:#5B3FD6; --violet-2:#7B5CFA; --violet-deep:#2E1F7A; --umlaut:#F2B53A; --umlaut-ink:#6B4A00;
  --ink:#24185E; --bg:#F5F3FB; --paper:#F5F3FB; --surface:#FFFFFF; --soft:#EFEBFD; --line:#E3DDF6; --track:#E6E0F8; --muted:#5D5679;
  --brand:#5B3FD6; --on-brand:#FFFFFF; --brand-soft:#EEE9FF; --hero-bg:#4B2FC9; --hero-bg2:#7B5CFA; --on-ink:#FFFFFF;
  --gold:#E3A21A; --gold-soft:#FDF2D8; --gold-ink:#6B4A00; --ring-c:var(--violet); --focus:#2F6BFF;
  --stripe:linear-gradient(90deg, #7B5CFA, #4B2FC9 70%, #F2B53A);
  --shadow:0 1px 2px rgba(46,31,122,.06), 0 10px 28px rgba(46,31,122,.08);
  --r:14px; --r-lg:22px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#ECE8FF; --bg:#130F26; --paper:#130F26; --surface:#1E1838; --soft:#2A2350; --line:#352C5E; --track:#2E2655; --muted:#B3ABD6;
    --brand:#A891FF; --on-brand:#160F33; --brand-soft:#2B2357; --hero-bg:#3B23A8; --hero-bg2:#6A4BF0; --on-ink:#130F26;
    --gold:#F2B53A; --gold-soft:#3A2F14; --gold-ink:#F7D488; --focus:#9DB8FF; --umlaut-ink:#F7D488;
    --violet-deep:#DCD3FF;   /* text on violet-soft surfaces (grammar formula, group titles): light in the dark theme (owner feedback 2026-10-13) */
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.35);
  }
}
body { background: var(--bg); }

/* brand: mark + name */
.topbar-logo { inline-size: 30px; block-size: 30px; display: block; }
.topbar-name, .brand-name { font-weight: 800; letter-spacing: -.01em; font-size: 1.05rem; color: var(--ink); }
.nav a.brand { gap: 8px; letter-spacing: 0; }
.brand-mark { display: block; }
@media (max-width: 719.98px) { .nav { grid-template-columns: repeat(6, 1fr); } .nav-label { font-size: .68rem; } }

/* sign-in: the brand gets the stage once */
.auth-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-block: 28px 8px; }
.auth-name { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--ink); }
.auth-tagline { color: var(--muted); margin: 0; max-inline-size: 30ch; }

/* home hero: a violet panel with one soft wave, like a page turning */
.hero { background: linear-gradient(150deg, var(--hero-bg2) 0%, var(--hero-bg) 70%); border-radius: 26px; padding: 26px 22px 24px; }
.hero::before { inset-block-start: auto; inset-block-end: -38%; inset-inline: -20% 30%; block-size: 70%; border-radius: 50%; background: rgba(255,255,255,.08); }
.hero::after { content: ""; position: absolute; inset-block-end: 34px; inset-inline-end: 44px; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--umlaut); box-shadow: 18px 0 0 var(--umlaut); opacity: .9; pointer-events: none; }   /* the umlaut dots of the logo, quietly echoed */
.hero > * { position: relative; z-index: 1; }
.btn-hero { color: var(--violet-deep); border-radius: 999px; }
@media (prefers-color-scheme: dark) { .btn-hero { color: #2E1F7A; } }

/* level tracker: the lessons of the level as a numbered path */
.tracker-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.tracker-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tracker-head h2 { margin: 0; font-size: 1.05rem; }
.tracker-all { color: var(--brand); font-weight: 650; font-size: .9rem; text-decoration: none; }
.tracker-all:hover { text-decoration: underline; }
.tracker { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tracker li { display: flex; align-items: center; }
.tracker a { inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 750; text-decoration: none; font-variant-numeric: tabular-nums;
  background: var(--soft); color: var(--muted); border: 2px solid transparent; }
.tracker [data-state="done"] a { background: var(--umlaut); color: #3A2600; }
.tracker [data-state="current"] a { background: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.tracker a:hover { border-color: var(--brand); }

/* cards and chips: one radius per level of hierarchy */
.quick-card, .lesson-card { border-radius: 18px; }
.jump-chip { border-radius: 999px; }
.vocab-card { border-radius: 18px; }
.g-table thead th { background: var(--violet); color: #fff; }
@media (prefers-color-scheme: dark) { .g-table thead th { background: #3B23A8; } }
.de-run { unicode-bidi: isolate; } .de-run.nw { white-space: nowrap; }
.g-table td, .g-table th { overflow-wrap: break-word; } /* never split a German word mid-letter: a wide table scrolls inside .g-table-wrap instead */
.g-table .de { hyphens: manual; }
@media (max-width: 480px) { .g-table { font-size: .9rem; } .g-table th, .g-table td { padding: 8px 9px; } }
.g-table tbody th { white-space: nowrap; overflow-wrap: normal; }

/* vocabulary sub-groups (ADR-056) */
.vocab-group + .vocab-group { margin-block-start: 18px; }
.vocab-group-title { margin: 6px 0 10px; font-size: 1rem; color: var(--violet-deep, var(--ink)); display: flex; align-items: center; gap: 8px; }
.vocab-group-title::before { content: ''; inline-size: 6px; block-size: 18px; border-radius: 3px; background: var(--umlaut, var(--gold)); }

/* ── Blended colour layer (ADR-061): violet → magenta gradients, soft colour fields behind the pages, wave-shaped header.
   Text never sits on the lightest stops: white text only on stops with ≥ 4.5:1 contrast (#5B3FD6, #6A3BD9, #9A33B8). ── */
:root {
  --magenta:#B23AC8; --magenta-deep:#8E2BA6; --sky:#5B8CFF;
  --grad-main: linear-gradient(135deg, #6A3BD9 0%, #5B3FD6 40%, #9A33B8 100%);
  --grad-soft: linear-gradient(135deg, #EEE9FF 0%, #F6E8FB 100%);
  --grad-gold: linear-gradient(135deg, #F7C75A 0%, #F2A93A 100%);
  --grad-line: linear-gradient(90deg, #7B5CFA, #B23AC8 60%, #F2B53A);
}
@media (prefers-color-scheme: dark) {
  :root { --grad-main: linear-gradient(135deg, #4B2FC9 0%, #3B23A8 45%, #7A2390 100%); --grad-soft: linear-gradient(135deg, #2A2350 0%, #33204A 100%); }
}

/* page background: two quiet colour fields, never behind text at full strength */
body {
  background:
    radial-gradient(70% 45% at 100% 0%, rgba(178,58,200,.14), transparent 70%),
    radial-gradient(60% 40% at 0% 30%, rgba(123,92,250,.14), transparent 70%),
    radial-gradient(60% 40% at 100% 100%, rgba(242,181,58,.10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  body { background: radial-gradient(70% 45% at 100% 0%, rgba(178,58,200,.20), transparent 70%), radial-gradient(60% 40% at 0% 30%, rgba(123,92,250,.18), transparent 70%), var(--bg); background-attachment: fixed; }
}

/* top bar: a violet → magenta band with a wave at the bottom */
.topbar { background: var(--grad-main); border-block-end: 0; padding-block: 12px 26px; }
.topbar::after { inset-block-end: -1px; block-size: 18px; background: var(--bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.topbar .topbar-name { color: #fff; }
.topbar-logo { background: #fff; border-radius: 10px; padding: 3px; inline-size: 34px; block-size: 34px; }
@media (min-width: 720px) {
  .nav { background: var(--grad-main); border: 0; box-shadow: 0 6px 20px rgba(91,63,214,.25); }
  .nav a, .nav a.brand, .nav .brand-name { color: #fff; }
  .nav a.active { background: rgba(255,255,255,.18); color: #fff; }
  .nav a:hover { background: rgba(255,255,255,.12); }
}

/* bottom tab bar (phones): the active tab gets a gradient pill */
@media (max-width: 719.98px) {
  .nav a.active { color: var(--brand); }
  .nav a.active::before { inset-inline: 30%; block-size: 4px; background: var(--grad-main); }
  .nav a.active .nav-icon { background: var(--grad-soft); border-radius: 12px; padding: 4px 12px; }
}

/* hero: deeper blend with two soft waves and the umlaut dots */
.hero { background: var(--grad-main); box-shadow: 0 14px 34px rgba(91,63,214,.30); }
.hero::before { inset-block-end: -45%; inset-inline: -25% 25%; block-size: 80%; background: rgba(255,255,255,.10); }
.hero { background-image: radial-gradient(60% 70% at 105% -10%, rgba(255,255,255,.18), transparent 60%), radial-gradient(50% 60% at -10% 110%, rgba(242,181,58,.22), transparent 60%), var(--grad-main); }

/* buttons */
.btn-primary { background: var(--grad-main); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(91,63,214,.28); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
.btn-primary:disabled { background: var(--grad-main); opacity: .45; box-shadow: none; }
.btn-secondary { border-color: var(--brand); color: var(--brand); background: var(--surface); }
.btn-hero { background: #fff; color: #5B3FD6; }

/* progress: always a blend */
.bar { background: var(--track); } .bar-fill { background: var(--grad-line); }
.progress, .ex-progress { background: var(--track); }

/* level tracker: done = gold blend, current = violet blend (like a course tracker) */
.tracker-card { background: var(--surface); border: 0; position: relative; overflow: hidden; }
.tracker-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 4px; background: var(--grad-line); }
.tracker [data-state="done"] a { background: var(--grad-gold); color: #3A2600; }
.tracker [data-state="current"] a { background: var(--grad-main); color: #fff; }
.tracker a { background: var(--grad-soft); color: #4A3F7A; }

/* cards: white surfaces with a thin blended edge on the leading side */
.lesson-card, .quick-card, .action-card { border: 0; position: relative; overflow: hidden; }
.lesson-card::before, .quick-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px; background: var(--grad-main); }
.lesson-num { background: var(--grad-main); color: #fff; }
.lesson-go { color: var(--magenta-deep); }

/* chips and pills: outlined violet pills, the active one filled with the blend */
.jump-chip { border-color: #CFC3F7; color: var(--brand); background: var(--surface); }
.jump-chip:hover, .jump-chip:focus-visible { background: var(--grad-main); color: #fff; border-color: transparent; }
.pill-soft { background: var(--grad-soft); color: var(--brand); }

/* lesson page */
.lesson-hero, .lesson-hero img { border-radius: 22px; }
.lesson-hero { box-shadow: 0 10px 28px rgba(91,63,214,.22); }
.lesson-head h1, .lesson-head .heading { background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (forced-colors: active) { .lesson-head h1, .lesson-head .heading { color: CanvasText; background: none; } }
.vocab-card { border: 0; box-shadow: var(--shadow); }
.audio-lg, .audio-btn[data-state="playing"] { background: var(--grad-main); border-color: transparent; color: #fff; }
.vflow li[data-done="true"] { background: var(--grad-soft); }
.grammar-card { position: relative; overflow: hidden; }
.grammar-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 5px; background: var(--grad-line); }
.g-formula { background: var(--grad-soft); border-color: #CFC3F7; }
.g-table thead th { background: var(--grad-main); }
.turn-b .turn-bubble { background: var(--grad-soft); }
.turn-avatar { background: var(--grad-main); color: #fff; }
.cta-inner { background: rgba(255,255,255,.85); backdrop-filter: blur(8px); }
@media (prefers-color-scheme: dark) { .cta-inner { background: rgba(30,24,56,.85); } }

/* exercises */
.choice:has(input:checked) { border-color: transparent; background: var(--grad-soft); box-shadow: 0 0 0 2px var(--brand); }
.token { border-color: #CFC3F7; } .token:hover { background: var(--grad-soft); }
.feedback-correct { background: linear-gradient(135deg, #E3F4EA, #EAF7EF); }
@media (prefers-color-scheme: dark) { .feedback-correct { background: linear-gradient(135deg, #16352A, #1B3F31); } }   /* the light gradient made the light-green dark-theme text unreadable (owner feedback 2026-10-08) */
.xp-chip { background: var(--grad-gold); color: #3A2600; }

/* rings and stats */
.ring-ink { --ring-c: var(--magenta); }
.stat { border: 0; position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; inset-inline-end: -20px; inset-block-start: -20px; inline-size: 70px; block-size: 70px; border-radius: 50%; background: var(--grad-soft); z-index: 0; }
.stat > * { position: relative; z-index: 1; }

/* sign-in: the brand on a blended stage */
.auth-brand { background: var(--grad-main); color: #fff; border-radius: 0 0 36px 36px; margin-inline: calc(var(--gap) * -1); margin-block-start: calc(var(--gap) * -1); padding-block: 36px 30px; }
.auth-brand .auth-name, .auth-brand .auth-tagline { color: #fff; }
.auth-brand img { background: #fff; border-radius: 18px; padding: 6px; }
@media (prefers-color-scheme: dark) {
  .tracker a { color: #CFC6F5; }
  .lesson-head h1, .lesson-head .heading { background: linear-gradient(135deg, #C9B8FF, #F0A8FF); -webkit-background-clip: text; background-clip: text; }
  .jump-chip { border-color: #4A3F86; background: transparent; }
}

/* ── guided writing (ADR-063) ── */
.gw-task { border: 1px solid var(--line, #e3dcef); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: color-mix(in srgb, var(--accent, #7c3aed) 6%, transparent); }
.gw-points { margin: 6px 0 8px; padding-inline-start: 1.2em; }
.gw textarea { width: 100%; min-height: 9em; font: inherit; line-height: 1.5; }
.gw-checks, .gw-hints { list-style: none; padding: 0; margin: 6px 0; }
.gw-checks li { padding: 3px 0; }
.gw-ok { color: var(--ok, #15803d); }
.gw-miss { color: var(--bad, #b91c1c); }
.gw-model { border-inline-start: 3px solid var(--accent, #7c3aed); padding-inline-start: 10px; margin-top: 8px; }
.gw-model-text { white-space: pre-wrap; }

/* level switcher in the lesson list (staff preview and placed-out learners) */
.level-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 4px 12px; }
.level-tab { padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; }
.level-tab.is-current { background: var(--grad-main, var(--brand)); color: #fff; border-color: transparent; }
/* translated row labels in grammar tables (ADR-066): keep the German examples wide enough to read */
.g-table th[scope="row"] { inline-size: 38%; }
.g-table th[scope="row"] [data-testid="row-label"] { font-weight: 650; }

/* ADR-068 sign-in */
.auth-or { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .5rem; color: var(--muted, #6b6b80); font-size: .9rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid currentColor; opacity: .35; }

/* ADR-080: lessons that come with the subscription */
.lesson-card.is-locked { background: var(--soft); box-shadow: none; }
.lesson-card.is-locked .lesson-num { background: var(--track); color: var(--muted); }
.lesson-card.is-locked .lesson-info strong { color: var(--muted); }
.badge-locked { background: var(--notice-bg); color: var(--warn-ink); }

/* ADR-081: model letters, messages and talks (one speaker) read as one text, not as a chat */
.model-text { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--soft); border-radius: 12px; border-inline-start: 3px solid var(--brand); }
.model-text .mt-line .turn-de { margin: 0; }
.model-text .mt-line .turn-ui { margin: 2px 0 0; }

/* ADR-083: privacy policy and terms */
.legal { max-inline-size: 72ch; margin-inline: auto; display: flex; flex-direction: column; gap: 6px; line-height: 1.7; }
.legal h2 { margin-block: 14px 2px; font-size: 1.05rem; }
.legal p { margin: 0 0 6px; }