/* ═══════════════════════════════════════════════════════════════════════
   Design system v2.

   Direction: monochrome + a single electric signal colour. Every competing
   language platform reaches for multi-colour blue/green/orange; the identity
   here comes from restraint, type contrast, hairline structure and one
   unmistakable accent — closer to a developer tool than a school website.

   Class names are unchanged from v1 on purpose: all exercise engines,
   scorers and dashboards keep working untouched.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* paper + ink */
  --paper: #FBFBF9;
  --paper-2: #F3F3EF;
  --paper-3: #EAEAE4;
  --canvas: #0C0D0C;          /* near-black hero / inverted surfaces */
  --canvas-2: #161815;
  --ink: #0C0D0C;
  --ink-2: #3A3D38;
  --ink-3: #6B6F67;

  /* the signal */
  --signal: #C8FF3D;
  --signal-deep: #7FA800;      /* accessible on paper */
  --signal-ink: #1B2400;
  --signal-wash: #F0FFCC;

  /* semantic */
  --ok: #1F7A4C;
  --ok-bg: #E6F5EC;
  --ok-line: #A8D9BF;
  --bad: #B3261E;
  --bad-bg: #FBEAE8;
  --bad-line: #EFB0AA;
  --warn: #8A5A00;
  --warn-bg: #FDF3DF;
  --warn-line: #E8C98A;

  /* aliases kept so v1 component CSS keeps resolving */
  --bg: var(--paper);
  --bg-alt: var(--paper-2);
  --surface: #FFFFFF;
  --surface-2: var(--paper-2);
  --ink-soft: var(--ink-2);
  --muted: var(--ink-3);
  --line: #E2E2DB;
  --line-soft: #EDEDE7;
  --brand: var(--ink);
  --brand-2: #2C2F2A;
  --brand-ink: var(--ink);
  --brand-soft: var(--paper-2);
  --accent: var(--signal-deep);
  --accent-2: var(--signal);
  --accent-soft: var(--signal-wash);
  --accent-ink: #4E6A00;

  --shadow-sm: 0 1px 2px rgba(12, 13, 12, .04);
  --shadow: 0 1px 3px rgba(12, 13, 12, .06), 0 12px 32px -12px rgba(12, 13, 12, .12);
  --shadow-lift: 0 2px 4px rgba(12, 13, 12, .06), 0 24px 60px -20px rgba(12, 13, 12, .22);

  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1180px;
  --rail: 64px;

  --font-ar: "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --font-de: "Space Grotesk", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-read: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "Space Grotesk", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.2, .8, .25, 1);
}

html[data-theme="dark"] {
  --paper: #0C0D0C;
  --paper-2: #161815;
  --paper-3: #1F221E;
  --canvas: #060706;
  --canvas-2: #101210;
  --ink: #F2F3EF;
  --ink-2: #C2C5BC;
  --ink-3: #8B8F86;

  --signal: #C8FF3D;
  --signal-deep: #C8FF3D;
  --signal-ink: #1B2400;
  --signal-wash: #1D2608;

  --ok: #6FD79B;
  --ok-bg: #10251A;
  --ok-line: #2F6647;
  --bad: #F2A49C;
  --bad-bg: #2A1512;
  --bad-line: #74352E;
  --warn: #EFCB86;
  --warn-bg: #2A2211;
  --warn-line: #6A5426;

  --surface: #141613;
  --surface-2: #1C1F1B;
  --line: #262A24;
  --line-soft: #1F231D;
  --brand: var(--signal);
  --brand-2: #A8DC22;
  --brand-ink: var(--signal);
  --brand-soft: #1D2608;
  --accent: var(--signal);
  --accent-ink: var(--signal);
  --accent-soft: #1D2608;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 16px 40px -16px rgba(0, 0, 0, .8);
  --shadow-lift: 0 24px 60px -20px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ar);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.015em; font-weight: 700; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: 860px; margin-inline: auto; padding-inline: 24px; }

/* German islands inside the Arabic shell */
[lang="de"], .de, .de-inline {
  font-family: var(--font-de);
  direction: ltr;
  text-align: start;
  font-feature-settings: "ss01";
}
.prose[lang="de"], .prose.de { font-family: var(--font-read); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 0 0 12px 0;
}
.skip-link:focus { inset-inline-start: 0; }

:focus-visible { outline: 2px solid var(--signal-deep); outline-offset: 2px; border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════ header */

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 8px;
  height: 60px;
}

.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--signal);
  font-family: var(--font-de); font-size: .8rem; font-weight: 700;
  letter-spacing: -.02em;
}
html[data-theme="dark"] .brand-mark { background: var(--signal); color: var(--canvas); }
.brand-name {
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em;
}
.brand small { display: none; }

/* level pill — the persistent "where am I" anchor */
.level-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
  font-family: var(--font-de); font-size: .82rem; font-weight: 700;
  cursor: pointer; color: var(--ink);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.level-pill:hover { border-color: var(--ink-3); }
.level-pill .lp-caret { font-size: .6rem; opacity: .5; }
.level-pill .lp-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal-deep);
}

.nav {
  display: flex; align-items: center; gap: 2px;
  margin-inline-start: auto;
}
.nav a {
  position: relative;
  padding: 7px 13px; border-radius: 8px;
  font-size: .9rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.nav a.active { color: var(--ink); }
.nav a.active::after {
  content: ''; position: absolute; inset-inline: 13px; bottom: 1px;
  height: 2px; border-radius: 2px; background: var(--signal-deep);
}
html[data-theme="dark"] .nav a.active::after { background: var(--signal); }

.header-actions { display: flex; align-items: center; gap: 6px; flex: none; }

.icon-btn {
  background: transparent; border: 1px solid var(--line); color: var(--ink-2);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; font-size: .9rem; flex: none;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { border-color: var(--ink-3); color: var(--ink); }

.cta-mini {
  border: 0; border-radius: 9px; padding: 8px 15px;
  background: var(--ink); color: var(--paper);
  font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
  transition: transform .12s var(--ease), opacity .15s var(--ease);
}
.cta-mini:hover { transform: translateY(-1px); }
html[data-theme="dark"] .cta-mini { background: var(--signal); color: var(--canvas); }

/* mobile bottom tab bar */
.tabbar { display: none; }

@media (max-width: 860px) {
  .site-header .wrap { height: 54px; gap: 6px; }
  .nav { display: none; }
  .brand-name { font-size: .96rem; }

  .tabbar {
    display: flex;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 95;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--line);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px; border-radius: 10px;
    font-size: .68rem; font-weight: 700; color: var(--ink-3);
  }
  .tabbar a .tb-i { font-size: 1.15rem; line-height: 1; }
  .tabbar a.active { color: var(--ink); }
  .tabbar a.active .tb-i { transform: translateY(-1px); }
  body { padding-bottom: 68px; }
}

/* ═══════════════════════════════════════════════════════════════ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 11px;
  padding: 11px 20px;
  font: inherit; font-size: .93rem; font-weight: 700;
  cursor: pointer;
  background: var(--ink); color: var(--paper);
  transition: transform .12s var(--ease), box-shadow .18s var(--ease), background .15s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
html[data-theme="dark"] .btn:not(.secondary):not(.ghost):not(.accent) {
  background: var(--signal); color: var(--canvas);
}

.btn.secondary {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn.secondary:hover { border-color: var(--ink-3); background: var(--paper-2); }
html[data-theme="dark"] .btn.secondary { background: transparent; color: var(--ink); }

.btn.ghost { background: transparent; color: var(--ink-2); border-color: transparent; padding-inline: 12px; }
.btn.ghost:hover { background: var(--paper-2); box-shadow: none; }

.btn.accent { background: var(--signal); color: var(--signal-ink); }
.btn.accent:hover { background: var(--signal); }

.btn.block { display: flex; width: 100%; }
.btn.lg { padding: 14px 26px; font-size: 1rem; border-radius: 13px; }

.link-btn {
  background: none; border: 0; padding: 0; color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer;
  border-bottom: 2px solid var(--signal); line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════ structure */

section.block { padding-block: 72px; }
section.block.alt { background: var(--paper-2); border-block: 1px solid var(--line); }
section.block.tight { padding-block: 44px; }

/* numbered section rail — the signature structural motif */
.block-head { margin-bottom: 34px; max-width: 62ch; }
.block-head .idx {
  display: inline-block;
  font-family: var(--font-de); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; color: var(--ink-3);
  padding-bottom: 6px; margin-bottom: 12px;
  border-bottom: 2px solid var(--signal);
}
.block-head h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin: 0 0 10px; font-weight: 700;
}
.block-head p { margin: 0; color: var(--ink-2); font-size: 1.02rem; }
.block-head.center { text-align: center; margin-inline: auto; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ═══════════════════════════════════════════════════════════════ cards */

.card {
  display: block; position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
a.card:hover {
  text-decoration: none; transform: translateY(-2px);
  border-color: var(--ink-3); box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 6px; font-size: 1.02rem; }
.card p { margin: 0; color: var(--ink-3); font-size: .89rem; }
.card-row { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  padding: 3px 9px; border-radius: 6px;
  background: var(--paper-2); color: var(--ink-3);
  border: 1px solid var(--line-soft);
}
.badge.brand { background: var(--ink); color: var(--paper); border-color: transparent; }
html[data-theme="dark"] .badge.brand { background: var(--signal); color: var(--canvas); }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
/* accent-ink, not signal-deep: the latter is only 2.65 on signal-wash. */
.badge.audio { background: var(--signal-wash); color: var(--accent-ink); border-color: transparent; }
html[data-theme="dark"] .badge.audio { color: var(--signal); }
.badge.de { font-family: var(--font-de); direction: ltr; }
.badge.lock { background: transparent; color: var(--ink-3); }
.badge.free { background: var(--signal-wash); color: var(--signal-deep); border-color: transparent; font-weight: 700; }

/* ══════════════════════════════════════════════════════════ page heads */

.crumbs { font-size: .82rem; color: var(--ink-3); padding-top: 22px; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin-inline: 6px; opacity: .4; }

.page-head { padding: 16px 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.page-head h1 { margin: 12px 0 8px; font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.page-head h1[lang="de"] { font-family: var(--font-de); }
.page-head .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--ink-3); font-size: .87rem; }

/* ═════════════════════════════════════════════════════════════ filters */

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; }
.field { flex: 1 1 200px; min-width: 160px; }
.field.grow { flex: 2 1 280px; }
.field input, .field select {
  width: 100%; padding: 10px 14px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .91rem;
  transition: border-color .15s var(--ease);
}
.field input:focus, .field select:focus { border-color: var(--ink); outline: none; }
.count-note { color: var(--ink-3); font-size: .85rem; }

/* ══════════════════════════════════════════════════════ exercise layout */

.exercise-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr);
  gap: 20px; align-items: start;
}
@media (max-width: 960px) { .exercise-layout { grid-template-columns: 1fr; } }

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.panel + .panel { margin-top: 14px; }
.panel h2 { margin: 0 0 14px; font-size: 1.02rem; font-weight: 700; }

/* Sticky answer rail: the lesson text scrolls, the controls stay put. */
.sticky-side {
  position: sticky; top: 76px;
  max-height: calc(100vh - 96px);
  display: flex; flex-direction: column;
}
.sticky-side .option-bank,
.sticky-side .gap-list,
.sticky-side .word-bank { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.panel-scroll { max-height: min(76vh, 720px); overflow-y: auto; overscroll-behavior: contain; }

@media (max-width: 960px) {
  .sticky-side { position: static; max-height: none; }
  .panel-scroll { max-height: none; }
}

.prose {
  font-family: var(--font-read); direction: ltr; text-align: left;
  font-size: 1.04rem; line-height: 1.85; color: var(--ink);
}
.prose p { margin: 0 0 1.05em; }
.prose h2, .prose h3, .prose h4, .prose h5 { font-family: var(--font-de); margin: 1.2em 0 .5em; }

.instructions {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--signal);
  border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: .92rem; color: var(--ink-2);
  margin-bottom: 18px;
}
.instructions strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: .78rem; letter-spacing: .04em; }

.notice {
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid var(--warn-line); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: .87rem; margin-bottom: 16px;
}

/* --- matching --- */
.match-item {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 15px; margin-bottom: 12px; background: var(--surface);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.match-item[data-state="correct"] { border-color: var(--ok-line); background: var(--ok-bg); }
.match-item[data-state="incorrect"] { border-color: var(--bad-line); background: var(--bad-bg); }
.match-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.match-num {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-de); font-size: .78rem; font-weight: 700;
  display: grid; place-items: center;
}
html[data-theme="dark"] .match-num { background: var(--signal); color: var(--canvas); }

.slot {
  flex: 1; min-height: 42px;
  border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; color: var(--ink-3); font-size: .89rem;
  cursor: pointer; display: flex; align-items: center;
  background: var(--paper-2);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.slot.filled, .slot.correct, .slot.incorrect { font-family: var(--font-de); direction: ltr; text-align: left; }
.slot:hover, .slot.armed { border-color: var(--signal-deep); background: var(--signal-wash); color: var(--ink); }
.slot.filled { border-style: solid; border-color: var(--line); background: var(--surface); color: var(--ink); font-weight: 600; }
.slot.correct { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.slot.incorrect { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad); }

.solution { margin-top: 9px; font-size: .85rem; color: var(--ok); background: var(--ok-bg); border-radius: 8px; padding: 8px 11px; }
.solution.hidden { display: none; }
.solution .de-inline { font-family: var(--font-de); direction: ltr; display: inline-block; }

.option-bank { display: flex; flex-direction: column; gap: 7px; }
.chip {
  text-align: start; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  border-radius: 10px; padding: 10px 13px;
  font-family: var(--font-de); direction: ltr; font-size: .88rem;
  cursor: pointer;
  transition: border-color .13s var(--ease), background .13s var(--ease), transform .1s var(--ease);
}
.chip:hover { border-color: var(--ink-3); }
.chip:active { transform: scale(.985); }
.chip.selected { border-color: var(--ink); background: var(--signal-wash); font-weight: 700; }
html[data-theme="dark"] .chip.selected { background: var(--signal-wash); border-color: var(--signal); }
.chip.used { opacity: .3; pointer-events: none; }

/* --- multiple choice --- */
.q-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 15px 16px; margin-bottom: 11px; background: var(--surface);
}
.q-card[data-state="correct"] { border-color: var(--ok-line); background: var(--ok-bg); }
.q-card[data-state="incorrect"] { border-color: var(--bad-line); background: var(--bad-bg); }
.q-card h3 { margin: 0 0 10px; font-size: .95rem; font-family: var(--font-de); direction: ltr; text-align: left; }

.opt {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
  font-size: .91rem; border: 1px solid transparent;
  font-family: var(--font-de); direction: ltr; text-align: left;
  transition: background .13s var(--ease);
}
.opt:hover { background: var(--paper-2); }
.opt input { margin-top: 4px; accent-color: var(--ink); flex: none; }
.opt.is-correct { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); font-weight: 700; }
.opt.is-wrong { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }

/* --- cloze --- */
.gap {
  display: inline-block; min-width: 88px; padding: 1px 9px; margin: 0 2px;
  border-bottom: 2px solid var(--signal-deep); border-radius: 5px 5px 0 0;
  background: var(--signal-wash); color: var(--ink);
  font-family: var(--font-de); font-size: .92em; font-weight: 700;
  text-align: center; cursor: pointer;
  transition: background .15s var(--ease);
}
.gap.armed { outline: 2px solid var(--signal-deep); outline-offset: 1px; }
.gap.empty { color: var(--ink-3); font-weight: 600; }
.gap.correct { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.gap.incorrect { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }

.word-bank { display: flex; flex-wrap: wrap; gap: 7px; }
.word-bank .chip { padding: 8px 14px; border-radius: 999px; }

.gap-list { display: flex; flex-direction: column; gap: 10px; }
.gap-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 13px; background: var(--surface); }
.gap-row[data-state="correct"] { border-color: var(--ok-line); background: var(--ok-bg); }
.gap-row[data-state="incorrect"] { border-color: var(--bad-line); background: var(--bad-bg); }
.gap-row.armed { outline: 2px solid var(--signal-deep); outline-offset: 2px; }
.gap-row .gap-num { font-family: var(--font-de); font-weight: 700; font-size: .76rem; color: var(--ink-3); margin-bottom: 7px; letter-spacing: .04em; }
.gap-row .opts { display: flex; flex-wrap: wrap; gap: 5px; }
.gap-row .chip { border-radius: 999px; padding: 6px 14px; }

/* --- listening --- */
.audio-part { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; background: var(--surface); }
.audio-part h3 { margin: 0 0 12px; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.audio-part h3 .de-inline { font-family: var(--font-de); direction: ltr; }
.audio-part audio { width: 100%; margin-bottom: 14px; }

.tf-table-wrap { overflow-x: auto; }
.tf-table { width: 100%; border-collapse: collapse; font-size: .91rem; }
.tf-table th { font-family: var(--font-de); font-size: .68rem; color: var(--ink-3); font-weight: 700; padding: 7px 8px; text-align: center; white-space: nowrap; letter-spacing: .06em; }
.tf-table td { padding: 10px 8px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.tf-table td.pick { text-align: center; width: 64px; }
.tf-table td.pick input { accent-color: var(--ink); width: 17px; height: 17px; }
.tf-table td.stmt { font-family: var(--font-de); direction: ltr; text-align: left; }
.tf-table tr[data-state="correct"] td { background: var(--ok-bg); }
.tf-table tr[data-state="incorrect"] td { background: var(--bad-bg); }
.tf-answer { font-family: var(--font-de); font-size: .74rem; font-weight: 700; color: var(--ok); white-space: nowrap; }

/* --- writing --- */
.writing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: start; }
@media (max-width: 960px) { .writing-grid { grid-template-columns: 1fr; } }
.material { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; background: var(--paper-2); }
.material h3 { margin-top: 0; font-family: var(--font-de); direction: ltr; text-align: left; }
.task-points { margin: 0; padding-inline-start: 20px; }
.task-points li { margin-bottom: 7px; font-family: var(--font-de); direction: ltr; text-align: left; }

textarea.essay {
  width: 100%; min-height: 380px; resize: vertical;
  padding: 16px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: var(--font-read); direction: ltr; text-align: left;
  font-size: 1rem; line-height: 1.8;
}
textarea.essay:focus { border-color: var(--ink); outline: none; }

.writing-meter { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .86rem; color: var(--ink-3); margin-bottom: 10px; }
.writing-meter b { color: var(--ink); font-family: var(--font-de); }
.writing-meter .reached { color: var(--ok); }

.ai-status { font-size: .82rem; border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 12px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-3); }
.ai-status.ready { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.ai-status.pending { background: var(--signal-wash); color: var(--signal-deep); border-color: transparent; }
html[data-theme="dark"] .ai-status.pending { color: var(--signal); }

/* correction report */
.report { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--surface); }
.report-head { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; }
.report-head.good { background: var(--ok-bg); }
.report-head.mid { background: var(--warn-bg); }
.report-head.poor { background: var(--bad-bg); }
.report-score { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-de); }
.report-score b { font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.report-score span { font-size: .88rem; opacity: .65; }
.report-head.good .report-score b { color: var(--ok); }
.report-head.mid .report-score b { color: var(--warn); }
.report-head.poor .report-score b { color: var(--bad); }
.report-verdict { display: flex; flex-direction: column; }
.report-verdict strong { font-size: 1rem; }
.report-verdict span { font-size: .82rem; color: var(--ink-3); }
.report-h { margin: 22px 0 12px; font-family: var(--font-de); font-size: .72rem; font-weight: 700; color: var(--ink-3); letter-spacing: .1em; padding-bottom: 7px; border-bottom: 1px solid var(--line-soft); }
.report-h:first-of-type { margin-top: 0; }

.criteria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.crit { display: flex; gap: 11px; align-items: flex-start; }
.crit-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 8px; background: var(--ink-3); }
.crit.ok .crit-dot { background: var(--ok); }
.crit.warn .crit-dot { background: var(--signal-deep); }
.crit.bad .crit-dot { background: var(--bad); }
.crit b { font-size: .93rem; }
.crit em { font-style: normal; font-family: var(--font-de); font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 5px; margin-inline-start: 7px; background: var(--paper-2); color: var(--ink-3); }
.crit.ok em { background: var(--ok-bg); color: var(--ok); }
.crit.warn em { background: var(--warn-bg); color: var(--warn); }
.crit.bad em { background: var(--bad-bg); color: var(--bad); }
.crit em.zeroed { background: var(--bad-bg); color: var(--bad); }
.crit p { margin: 3px 0 0; font-size: .88rem; color: var(--ink-2); line-height: 1.65; }
.crit p.de-inline { font-family: var(--font-de); direction: ltr; text-align: left; }

.fixes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fix { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; background: var(--paper-2); }
.fix-type { display: inline-block; font-family: var(--font-de); font-size: .68rem; font-weight: 700; color: var(--signal-deep); background: var(--signal-wash); padding: 2px 8px; border-radius: 5px; margin-bottom: 7px; letter-spacing: .04em; }
html[data-theme="dark"] .fix-type { color: var(--signal); }
.fix-pair { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-de); }
.fix-pair del { color: var(--bad); text-decoration-thickness: 2px; font-size: .92rem; }
.fix-pair ins { color: var(--ok); text-decoration: none; font-weight: 700; font-size: .92rem; }

.ai-level { font-size: .92rem; margin: 0 0 10px; }
.ai-level b { font-family: var(--font-de); }
.ai-summary { font-family: var(--font-de); direction: ltr; text-align: left; font-size: .9rem; color: var(--ink-2); background: var(--paper-2); border-radius: var(--radius-sm); padding: 11px 13px; margin: 0 0 14px; }
.ai-note { font-size: .87rem; color: var(--ink-3); margin: 0; }
.ai-note.ok-note { color: var(--ok); }

.redemittel { display: grid; gap: 12px; }
.rm-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; background: var(--paper-2); }
.rm-group h5 { margin: 0 0 8px; font-size: .8rem; font-weight: 700; color: var(--signal-deep); letter-spacing: .02em; }
html[data-theme="dark"] .rm-group h5 { color: var(--signal); }
.rm-group ul { margin: 0; padding-inline-start: 18px; }
.rm-group li { font-family: var(--font-de); direction: ltr; text-align: left; font-size: .89rem; margin-bottom: 5px; color: var(--ink-2); }

/* ══════════════════════════════════════════════════════ actions/results */

.actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 18px; }

.result { margin-top: 16px; border-radius: var(--radius-sm); padding: 14px 17px; font-weight: 700; display: none; }
.result.show { display: block; }
.result.good { background: var(--ok-bg); color: var(--ok); }
.result.mid { background: var(--warn-bg); color: var(--warn); }
.result.poor { background: var(--bad-bg); color: var(--bad); }
.result .score-line { font-size: 1.02rem; }
.result .pct { font-family: var(--font-de); }

.pager { display: flex; justify-content: space-between; gap: 12px; margin: 32px 0 10px; flex-wrap: wrap; }
.pager .btn { font-size: .86rem; }

.empty-state { text-align: center; padding: 52px 20px; color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════ footer */

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 64px; padding: 44px 0 52px;
  color: var(--ink-3); font-size: .86rem;
  background: var(--paper-2);
}
.footer-grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.site-footer p { margin: 0 0 8px; max-width: 60ch; }
.site-footer strong { color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-links a:hover { color: var(--ink); }

@media (max-width: 700px) {
  .wrap, .wrap-narrow { padding-inline: 18px; }
  section.block { padding-block: 48px; }
  .panel { padding: 16px; }
  .page-head { padding: 12px 0 20px; margin-bottom: 20px; }
}

@media print {
  .site-header, .site-footer, .actions, .nav, .pager, .tabbar, .ai-status { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
  .panel { border-color: #ccc; }
}

/* ════════════════════════════════════════════════════ v2 components */

/* ---------------------------------------------------------- dark hero */

.hero-dark {
  background: var(--canvas);
  color: #F2F3EF;
  padding-block: 72px 0;
  position: relative;
  overflow: hidden;
}
.hero-dark::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(200, 255, 61, .16), transparent 62%),
    radial-gradient(600px 400px at 10% 110%, rgba(200, 255, 61, .07), transparent 60%);
  pointer-events: none;
}
.hero-dark .wrap { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700;
  color: rgba(242, 243, 239, .75);
  border: 1px solid rgba(242, 243, 239, .18);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}
.he-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }

.hero-dark h1 {
  margin: 0 0 20px;
  font-size: clamp(2.2rem, 5.4vw, 3.9rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -.03em;
}
.hero-dark h1 .hl { color: var(--signal); }

.hero-lede {
  margin: 0 0 30px; max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  color: rgba(242, 243, 239, .74); line-height: 1.75;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 14px; }
.btn.on-dark { color: #F2F3EF; border-color: rgba(242, 243, 239, .28); }
.btn.on-dark:hover { background: rgba(242, 243, 239, .08); border-color: rgba(242, 243, 239, .5); }
.hero-fine { margin: 0; font-size: .84rem; color: rgba(242, 243, 239, .45); }

.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px; margin-top: 58px;
  background: rgba(242, 243, 239, .12);
  border-top: 1px solid rgba(242, 243, 239, .12);
}
.hs { background: var(--canvas); padding: 22px 8px 26px; text-align: center; }
.hs b {
  display: block; font-family: var(--font-de);
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700;
  color: var(--signal); letter-spacing: -.02em; line-height: 1.2;
}
.hs span { font-size: .78rem; color: rgba(242, 243, 239, .5); }

/* --------------------------------------------------------- try-it demo */

.demo {
  background: rgba(242, 243, 239, .05);
  border: 1px solid rgba(242, 243, 239, .16);
  border-radius: var(--radius-lg);
  padding: 22px;
  backdrop-filter: blur(8px);
}
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.demo-kicker {
  font-size: .74rem; font-weight: 700; color: var(--signal);
  letter-spacing: .04em;
}
.demo .badge { background: rgba(242, 243, 239, .1); color: rgba(242, 243, 239, .7); border-color: transparent; }
.demo-q {
  font-family: var(--font-read); font-size: 1.06rem; line-height: 1.8;
  margin: 0 0 18px; color: #F2F3EF;
}
.demo-opts { display: grid; gap: 8px; }
.demo-opt {
  border: 1px solid rgba(242, 243, 239, .2); background: transparent;
  color: #F2F3EF; border-radius: 10px; padding: 12px 15px;
  font-family: var(--font-de); font-size: .96rem; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease), transform .1s var(--ease);
}
.demo-opt:hover:not(:disabled) { border-color: var(--signal); background: rgba(200, 255, 61, .08); }
.demo-opt:active:not(:disabled) { transform: scale(.99); }
.demo-opt.right { border-color: var(--signal); background: rgba(200, 255, 61, .16); color: var(--signal); font-weight: 700; }
.demo-opt.wrong { border-color: rgba(242, 160, 150, .6); background: rgba(242, 160, 150, .12); color: #F2A49C; }

.demo-fb { margin-top: 16px; padding: 15px; border-radius: 12px; }
.demo-fb.good { background: rgba(200, 255, 61, .12); }
.demo-fb.bad { background: rgba(242, 160, 150, .1); }
.demo-fb b { display: block; margin-bottom: 8px; color: #F2F3EF; }
.demo-fb p { margin: 0 0 14px; font-size: .89rem; color: rgba(242, 243, 239, .7); line-height: 1.7; }
.demo-corr { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; font-family: var(--font-de); }
.demo-corr del { color: #F2A49C; }
.demo-corr ins { color: var(--signal); text-decoration: none; font-weight: 700; }

/* ------------------------------------------------------- level chooser */

.lvl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.lvl-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; background: var(--surface);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.lvl-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.lvl-card.picked { border-color: var(--signal-deep); border-width: 2px; padding: 27px; }
.lvl-card.picked::after {
  content: 'مستواك'; position: absolute; top: 18px; inset-inline-end: 18px;
  font-size: .7rem; font-weight: 700; color: var(--signal-deep);
  background: var(--signal-wash); padding: 3px 10px; border-radius: 6px;
}
.lvl-tag {
  font-family: var(--font-de); font-size: 3.2rem; font-weight: 700;
  line-height: 1; letter-spacing: -.04em; color: var(--ink); margin-bottom: 14px;
}
.lvl-card h3 { margin: 0 0 16px; font-size: 1.05rem; font-weight: 600; color: var(--ink-2); }
.lvl-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lvl-list li {
  font-size: .76rem; padding: 3px 9px; border-radius: 6px;
  background: var(--paper-2); color: var(--ink-3); border: 1px solid var(--line-soft);
}
.lvl-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: .84rem; color: var(--ink-3);
}
.lvl-go { font-weight: 700; color: var(--ink); }

/* level pill menu */
.level-menu {
  position: absolute; z-index: 100; margin-top: 8px;
  min-width: 230px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; box-shadow: var(--shadow-lift);
}
#levelPill { position: relative; }
.level-opt {
  display: flex; flex-direction: column; gap: 1px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink); text-align: start;
  font: inherit; cursor: pointer;
}
.level-opt:hover { background: var(--paper-2); }
.level-opt b { font-family: var(--font-de); font-size: .95rem; }
.level-opt span { font-size: .78rem; color: var(--ink-3); }
.level-opt.on { background: var(--signal-wash); }
.level-opt.plain { border-top: 1px solid var(--line-soft); border-radius: 0 0 9px 9px; margin-top: 4px; padding-top: 11px; font-size: .84rem; color: var(--ink-3); }

.off-level { display: none !important; }

/* -------------------------------------------------------- why section */

.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.why-card { background: var(--paper); padding: 28px; position: relative; transition: background .2s var(--ease); }
.why-card:hover { background: var(--surface); }
.why-idx { position: absolute; top: 22px; inset-inline-end: 22px; font-family: var(--font-de); font-size: .74rem; font-weight: 700; color: var(--ink-3); opacity: .5; }
.why-icon { display: block; font-size: 1.5rem; color: var(--signal-deep); margin-bottom: 14px; }
html[data-theme="dark"] .why-icon { color: var(--signal); }
.why-card h3 { margin: 0 0 8px; font-size: 1.04rem; }
.why-card p { margin: 0; font-size: .93rem; color: var(--ink-2); line-height: 1.72; }

/* --------------------------------------------------------- final CTA */

.cta-final {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  flex-wrap: wrap;
  background: var(--canvas); color: #F2F3EF;
  border-radius: var(--radius-lg); padding: 44px;
}
.cta-final h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cta-final p { margin: 0; color: rgba(242, 243, 239, .65); }

/* ---------------------------------------------------- translate button */

.tr-host { position: relative; }
.tr-btn {
  position: absolute; top: 4px; inset-inline-end: 0;
  width: auto; height: 21px; border-radius: 6px;
  padding: 0 7px; gap: 4px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-3); cursor: pointer;
  font-family: var(--font-ar); font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; line-height: 1;
  opacity: .75;
  transition: opacity .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}

/* Reserve the button's lane so no line of German ever runs underneath it. */
.tr-host { padding-top: 30px; }
.tr-host:hover .tr-btn { opacity: 1; }
.tr-btn:hover { border-color: var(--ink); color: var(--ink); }
.tr-btn.on { background: var(--signal-wash); border-color: var(--signal-deep); color: var(--signal-deep); opacity: 1; }
html[data-theme="dark"] .tr-btn.on { color: var(--signal); }

.tr-box {
  margin-top: 10px; padding: 11px 13px;
  background: var(--signal-wash); border-radius: 9px;
  font-size: .9rem; line-height: 1.75;
  animation: trIn .18s var(--ease) both;
}
html[data-theme="dark"] .tr-box { background: var(--paper-3); }
@keyframes trIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.tr-ar { margin: 0; color: var(--ink); }
.tr-hint { margin: 6px 0 0; font-size: .78rem; color: var(--ink-3); }
.tr-loading { margin: 0; color: var(--ink-3); }
.tr-gloss { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-pair {
  font-size: .8rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; color: var(--ink-2);
}
.gl-pair b { font-family: var(--font-de); direction: ltr; margin-inline-end: 4px; color: var(--ink); }

.gloss-tip {
  position: absolute; z-index: 150;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--canvas); color: #F2F3EF;
  padding: 9px 13px; border-radius: 10px;
  font-size: .85rem; max-width: 260px;
  box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(3px);
  transition: opacity .14s var(--ease), transform .14s var(--ease);
  pointer-events: none;
}
.gloss-tip.in { opacity: 1; transform: none; }
.gloss-tip b { font-family: var(--font-de); color: var(--signal); font-size: .9rem; }

/* --------------------------------------------------------- exam date */

.exam-section { margin-bottom: 26px; }

.exam-set {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  border: 1px dashed var(--ink-3); border-radius: var(--radius-lg);
  padding: 26px 28px; background: var(--surface);
}
.exam-set-copy h3 { margin: 0 0 6px; font-size: 1.22rem; }
.exam-set-copy p { margin: 0; color: var(--ink-3); font-size: .93rem; max-width: 48ch; }
.exam-set-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.exam-set-form.inline { margin-top: 12px; }
.exam-set-form input, .exam-set-form select {
  padding: 10px 13px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem;
}

.exam-count {
  display: grid; grid-template-columns: minmax(200px, .7fr) minmax(0, 1.3fr);
  gap: 28px; align-items: start;
  border-radius: var(--radius-lg); padding: 28px;
  background: var(--canvas); color: #F2F3EF;
  position: relative; overflow: hidden;
}
.exam-count::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(500px 260px at 88% -20%, rgba(200, 255, 61, .16), transparent 65%);
  pointer-events: none;
}
.exam-count.hot::before { background: radial-gradient(500px 260px at 88% -20%, rgba(242, 160, 150, .22), transparent 65%); }
.exam-count > * { position: relative; }
@media (max-width: 820px) { .exam-count { grid-template-columns: 1fr; gap: 20px; } }

.exam-kicker { font-size: .82rem; color: rgba(242, 243, 239, .6); display: block; margin-bottom: 6px; }
.exam-days { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.exam-days b {
  font-family: var(--font-de); font-size: clamp(3rem, 7vw, 4.4rem);
  font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--signal);
}
.exam-count.hot .exam-days b { color: #F2A49C; }
.exam-days span { font-size: .95rem; color: rgba(242, 243, 239, .7); }
.exam-count .count-note { color: rgba(242, 243, 239, .45); display: block; margin-bottom: 10px; }
.exam-count .btn.ghost { color: rgba(242, 243, 239, .7); }
.exam-count .btn.ghost:hover { background: rgba(242, 243, 239, .1); }

.exam-count-plan h3 { margin: 0 0 14px; font-size: 1rem; color: rgba(242, 243, 239, .85); }
.exam-focus { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.exam-focus li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: .93rem; }
.ef-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }
.exam-focus b { font-weight: 600; }
.exam-focus .count-note { color: rgba(242, 243, 239, .5); display: inline; margin: 0; }
.exam-count .btn.secondary { color: #F2F3EF; border-color: rgba(242, 243, 239, .28); }
.exam-locked p { margin: 0 0 12px; font-size: .93rem; color: rgba(242, 243, 239, .75); }
.exam-focus.preview { opacity: .9; }

/* -------------------------------------------------------- misc v2 bits */

.plan-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; font-size: .87rem; }
#levelScopeNote { font-size: .86rem; color: var(--ink-3); margin: 0 0 14px; }

@media (max-width: 700px) {
  .hero-dark { padding-block: 44px 0; }
  .hero-stats { margin-top: 36px; }
  .demo { padding: 18px; }
  .lvl-card { padding: 22px; }
  .lvl-tag { font-size: 2.6rem; }
  .why-card { padding: 22px; }
  .cta-final { padding: 28px 22px; }
  .exam-count, .exam-set { padding: 20px; }
  .tr-btn { opacity: 1; }
}

/* ═════════════════════════════════════════════════ embedded exam mode */

/* An exercise opened inside the simulator is a fragment of another page,
   not a page of its own: it must not bring a second header, footer,
   breadcrumb trail or tab bar with it. */
html[data-embed] .site-header,
html[data-embed] .site-footer,
html[data-embed] .tabbar,
html[data-embed] .crumbs,
html[data-embed] .pager,
html[data-embed] .skip-link { display: none !important; }

html[data-embed] body { padding-bottom: 0; }
html[data-embed] .page-head { padding-top: 0; margin-bottom: 18px; }
html[data-embed] .wrap,
html[data-embed] .wrap-narrow { padding-inline: 16px; max-width: none; }
html[data-embed] .sticky-side { position: static; max-height: none; }

/* On mobile the tab bar already carries the daily challenge, so the header
   button beside it is a duplicate of the same destination. */
@media (max-width: 860px) {
  .cta-mini { display: none; }
}

/* ═══════════════════════════════════════════ inverted surfaces (colour fix)

   Root cause of the "phrases inherit the wrong theme colour" bug: several
   surfaces are permanently dark regardless of theme (the hero, the exam
   countdown, the closing CTA, the homepage demo, tooltips). Any component
   dropped on them still resolved --ink-2 / --muted / --line against the *page*
   theme, so in light mode dark-grey text landed on a near-black card.

   Fixed at the source by re-declaring the token set for those surfaces, so
   every current and future component inherits correct colours automatically
   instead of each phrase being patched by hand.                            */

.hero-dark,
.exam-count,
.cta-final,
.demo,
.gloss-tip,
.gloss-onboard {
  --ink: #F2F3EF;
  --ink-2: rgba(242, 243, 239, .76);
  --ink-3: rgba(242, 243, 239, .56);
  --muted: rgba(242, 243, 239, .56);
  --ink-soft: rgba(242, 243, 239, .76);
  --line: rgba(242, 243, 239, .18);
  --line-soft: rgba(242, 243, 239, .12);
  --surface: rgba(242, 243, 239, .07);
  --surface-2: rgba(242, 243, 239, .1);
  --paper-2: rgba(242, 243, 239, .1);
  /* the paper-safe variant is unreadable here; use the bright signal */
  --signal-deep: var(--signal);
  --accent: var(--signal);
  --accent-ink: var(--signal);
  --brand-ink: var(--signal);
  --accent-soft: rgba(200, 255, 61, .14);
  --brand-soft: rgba(242, 243, 239, .1);
  color: var(--ink);
}

/* Buttons and badges inside an inverted surface. */
.hero-dark .btn.secondary,
.exam-count .btn.secondary,
.cta-final .btn.secondary { color: var(--ink); border-color: var(--line); }
.hero-dark .btn.ghost,
.exam-count .btn.ghost,
.cta-final .btn.ghost { color: var(--ink-2); }
.hero-dark .btn.ghost:hover,
.exam-count .btn.ghost:hover,
.cta-final .btn.ghost:hover { background: rgba(242, 243, 239, .1); color: var(--ink); }
.hero-dark .badge,
.exam-count .badge,
.demo .badge { background: rgba(242, 243, 239, .1); color: var(--ink-2); border-color: transparent; }
.hero-dark .count-note,
.exam-count .count-note { color: var(--ink-3); }


/* ═══════════════════════════════════════════════ teaching explanation */

.pr-why.teach { padding: 0; background: transparent; }
.pr-why.teach .pr-why-t {
  display: block; padding: 11px 14px;
  background: var(--surface); border-radius: 10px 10px 0 0;
  border: 1px solid var(--line); border-bottom: 0;
  font-size: .8rem; font-weight: 700; color: var(--ink);
}
.pr-why.teach .pr-why-t [lang="de"] { color: var(--ink-3); font-weight: 600; }

.tx-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px; align-items: baseline;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line); border-top: 0;
  font-size: .89rem;
}
.tx-row:last-child { border-radius: 0 0 10px 10px; }
.tx-l {
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  padding: 2px 0; color: var(--ink-3);
}
.tx-row p { margin: 0; line-height: 1.75; color: var(--ink-2); }
.tx-row.bad .tx-l { color: var(--bad); }
.tx-row.ok .tx-l { color: var(--ok); }
.tx-row.rule .tx-l, .tx-row.applied .tx-l { color: var(--accent-ink); }
html[data-theme="dark"] .tx-row.rule .tx-l,
html[data-theme="dark"] .tx-row.applied .tx-l { color: var(--signal); }
.tx-row.ex { background: var(--paper-2); }
.tx-row.ex p { font-family: var(--font-de); direction: ltr; text-align: left; }
.tx-row.ex b { color: var(--ink); font-weight: 700; }

@media (max-width: 620px) {
  .tx-row { grid-template-columns: 1fr; gap: 3px; padding: 10px 12px; }
}

/* ═══════════════════════════════════════════════ recording indicator

   This was a full-width sentence styled as prose and placed directly under the
   live transcript, so learners read it as something the microphone had heard.
   It is now unmistakably instrumentation: a chip, a meter driven by real input
   level, and a short verdict on whether we can hear anything at all. */

.rec-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 12px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
}
.rec-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-2); white-space: nowrap;
}
.rec-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bad); flex: none;
  animation: recPulse 1.3s ease-in-out infinite;
}
@keyframes recPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }

/* Twelve bars, lit in proportion to measured input level. */
.rec-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex: none; }
.rec-meter i {
  display: block; width: 3px; height: 5px; border-radius: 1px;
  background: var(--line);
  transition: height .08s linear, background .08s linear;
}
.rec-meter i.on { background: var(--signal-deep); height: 14px; }
.rec-meter i:nth-child(n+9).on { background: var(--bad); }

.rec-hear { font-size: .72rem; font-weight: 600; color: var(--ink-3); }
.rec-hear.ok { color: var(--signal-deep); }
.rec-hear.warn { color: #B4541A; }
html[data-theme="dark"] .rec-hear.ok { color: var(--signal); }
html[data-theme="dark"] .rec-hear.warn { color: #F2A25C; }

.rec-note { font-size: .7rem; color: var(--ink-3); margin-inline-start: auto; }
@media (max-width: 620px) { .rec-note { display: none; } }

/* Captioned, so nothing else in this column can be taken for the transcript. */
.sp-livewrap {
  margin-top: 10px; padding: 10px 12px;
  border: 1px dashed var(--line); border-radius: 10px;
  background: var(--surface);
}
.sp-livecap {
  display: block; font-size: .68rem; font-weight: 700;
  color: var(--ink-3); margin-bottom: 4px;
}
.sp-live {
  margin: 0; font-family: var(--font-de);
  font-size: .95rem; color: var(--ink); line-height: 1.5;
}

.mic-btn.listening { background: var(--bad); color: #fff; }
html[data-theme="dark"] .mic-btn.listening { color: #fff; }

/* ══════════════════════════════════════════ translate control + gloss */

.tr-ico {
  font-family: var(--font-de); font-size: .66rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 1px; line-height: 1;
}
.tr-ico i { font-style: normal; font-size: .6rem; opacity: .65; }
.tr-label { font-size: .64rem; font-weight: 700; }
@media (max-width: 620px) { .tr-label { display: none; } .tr-btn { padding: 0 6px; } }

/* Tappable words must look tappable before anyone explains them. */
.gw {
  cursor: pointer;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--signal-deep) 70%, transparent);
  border-radius: 2px;
  transition: background .12s var(--ease);
}
.gw:hover { background: var(--signal-wash); }
html[data-theme="dark"] .gw:hover { background: rgba(200, 255, 61, .14); }
.gw-demo {
  background: var(--signal-wash);
  box-shadow: 0 0 0 3px var(--signal-wash);
  border-radius: 3px;
  animation: gwBlink 1.6s ease-in-out 3;
}
@keyframes gwBlink { 0%, 100% { background: var(--signal-wash); } 50% { background: color-mix(in srgb, var(--signal) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .gw-demo { animation: none; } }

.gloss-onboard {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--canvas);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
  animation: trIn .22s var(--ease) both;
}
.gloss-onboard b { display: block; font-size: .93rem; margin-bottom: 3px; color: var(--ink); }
.gloss-onboard p { margin: 0; font-size: .85rem; line-height: 1.7; color: var(--ink-2); }
.gloss-onboard > div { flex: 1; min-width: 0; }
.go-arrow { color: var(--signal); font-size: 1.1rem; line-height: 1.4; }
.go-ico {
  font-family: var(--font-de); font-size: .76rem; font-weight: 700;
  background: rgba(242, 243, 239, .14); color: var(--signal);
  padding: 1px 6px; border-radius: 5px; display: inline-block;
}
.go-x {
  flex: none; align-self: center;
  border: 1px solid rgba(242, 243, 239, .3); background: transparent;
  color: var(--ink); border-radius: 8px; padding: 5px 12px;
  font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.go-x:hover { background: rgba(242, 243, 239, .12); }

/* ═════════════════════════════════════ Lesen: text scrolls, answers stay */

/* The reading column gets its own scroll so the answer rail beside it never
   leaves the screen — the drag target is always in view. */
.exercise-layout .panel.reading-scroll {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.exercise-layout .panel.reading-scroll::-webkit-scrollbar { width: 8px; }
.exercise-layout .panel.reading-scroll::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 8px;
}

.sticky-side .option-bank,
.sticky-side .word-bank,
.sticky-side .gap-list { max-height: calc(100vh - 300px); }

.answers-hint {
  font-size: .78rem; color: var(--ink-3);
  margin: -6px 0 12px;
}

@media (max-width: 960px) {
  .exercise-layout .panel.reading-scroll { max-height: none; overflow: visible; }
  /* On small screens a fixed rail would eat the screen, so the answers dock
     to the bottom instead and stay reachable while the text scrolls. */
  .exercise-layout .sticky-side {
    position: sticky; bottom: 0; top: auto;
    z-index: 40;
    max-height: 46vh; overflow-y: auto;
    box-shadow: 0 -8px 24px -12px rgba(12, 13, 12, .3);
  }
  html[data-theme="dark"] .exercise-layout .sticky-side { box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .7); }
  .sticky-side .option-bank, .sticky-side .word-bank, .sticky-side .gap-list { max-height: none; }
  body { padding-bottom: 68px; }
}

/* ═══════════════════════════════════════════ bilingual concept labels */

.cl { display: inline-flex; flex-direction: column; gap: 1px; }
.cl b { font-size: inherit; }
.cl em {
  font-style: normal; font-family: var(--font-de); direction: ltr;
  font-size: .78em; color: var(--ink-3); font-weight: 600;
}
.badge .cl { flex-direction: row; gap: 5px; align-items: baseline; }
.badge .cl em { font-size: .9em; opacity: .8; }

.cl-de { display: block; font-style: normal; font-family: var(--font-de); direction: ltr; font-size: .72rem; color: var(--ink-3); font-weight: 600; }


/* ═══════════════════════════════════════════════════════ exam sizing

   A Prüfung is read closely, not skimmed. On the exercise pages the passage
   column gets roughly the width it would have on paper and the type is sized
   for sustained reading, rather than inheriting the tighter scale the rest of
   the site uses for cards and dashboards. Everything here is scoped to
   .exam-wrap so no other page shifts. */

.exam-wrap { max-width: 1360px; }

.exam-wrap .exercise-layout {
  grid-template-columns: minmax(0, 1.62fr) minmax(340px, .82fr);
  gap: 24px;
}

.exam-wrap .panel { padding: 28px; }

/* The German passage itself. */
.exam-wrap .prose { font-size: 1.12rem; line-height: 1.8; }
.exam-wrap .prose h2 { font-size: 1.2rem; }
.exam-wrap .prose h3, .exam-wrap .prose h4 { font-size: 1.06rem; }

/* Everything the learner has to act on: options, chips, gaps, headings. */
.exam-wrap .chip { font-size: .97rem; padding: 9px 15px; }
.exam-wrap .opt, .exam-wrap .option { font-size: 1rem; line-height: 1.65; }
.exam-wrap .match-item { padding-bottom: 6px; }
.exam-wrap .solution { font-size: .95rem; }
.exam-wrap .instructions { font-size: .97rem; line-height: 1.75; }
.exam-wrap .answers-hint { font-size: .82rem; }
.exam-wrap .panel h2 { font-size: 1.1rem; }

/* Taller reading viewport, since the shell above it is shorter than it was. */
.exam-wrap .exercise-layout .panel.reading-scroll { max-height: calc(100vh - 118px); }

@media (max-width: 960px) {
  .exam-wrap .exercise-layout { grid-template-columns: 1fr; }
  .exam-wrap .panel { padding: 20px; }
  .exam-wrap .prose { font-size: 1.06rem; }
}


/* ═════════════════════════════════════ the exam paper inside the simulator

   Embedded in the exam shell, the page heading repeats what the simulator's
   own bar already says — level, section, title — and cost 146px of height
   between the learner and the paper. Hidden here, both columns then scroll
   independently against the shell, so the passage and the answers stay side
   by side for the whole section. */

html[data-embed] .exam-wrap .page-head { display: none; }
html[data-embed] .exam-wrap .instructions { margin-bottom: 12px; }

html[data-embed] .exam-wrap .exercise-layout .panel.reading-scroll {
  max-height: calc(100vh - 120px);
}
html[data-embed] .exam-wrap .sticky-side {
  position: sticky; top: 0;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 960px) {
  html[data-embed] .exam-wrap .exercise-layout .panel.reading-scroll,
  html[data-embed] .exam-wrap .sticky-side {
    max-height: none; overflow: visible; position: static;
  }
}

/* ═══════════════════════════════════ Sprechen Teil 2 reading text

   Teil 2 starts from a magazine article the candidate reads before
   discussing it. It is marked up like the Lesen passages, so it inherits the
   same tap-a-word gloss and translate affordances rather than inventing a
   second reading experience. */

.sp-stimulus { margin-bottom: 18px; }
.sp-stim-instruction {
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-de); font-size: .88rem; line-height: 1.65;
  color: var(--ink-3);
}
.sp-stim-title {
  margin: 0 0 14px !important;
  font-family: var(--font-read); font-size: 1.35rem; font-weight: 700;
  color: var(--ink); text-align: center;
}
.sp-stim-text { font-size: 1.04rem; line-height: 1.8; }
.sp-stim-text p { margin: 0 0 .9em; }
.sp-stim-text p:last-child { margin-bottom: 0; }

/* Teil 3 restates its task in the rail so it can be re-read while planning. */
.sp-task {
  margin: 0 0 12px; padding: 10px 12px;
  border-inline-start: 3px solid var(--signal-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2, var(--surface));
  font-family: var(--font-de); font-size: .84rem; line-height: 1.6;
  color: var(--ink-2);
}

@media (max-width: 620px) {
  .sp-stim-title { font-size: 1.15rem; }
  .sp-stim-text { font-size: 1rem; }
}


/* The two speakers in a B1 Teil 2 theme read as labelled positions rather
   than as another paragraph of the same argument. */
.sp-speaker {
  margin: 0 0 .3em !important;
  font-size: .84rem; color: var(--ink-3);
}
.sp-speaker b { color: var(--ink-2); font-weight: 700; }
.sp-speaker + p { margin-top: 0; }
.sp-stim-text p + .sp-speaker { margin-top: 1.2em !important; }


/* The seven Teil 1 themes: a list to choose from, not prose. */
.sp-stim-kicker {
  display: block; margin-bottom: 10px;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  /* signal-deep is only 2.80 on the panel surface at this size. */
  color: var(--accent-ink); text-transform: uppercase;
}
.sp-themen {
  margin: 0; padding-inline-start: 20px;
  font-family: var(--font-de); direction: ltr; text-align: left;
}
.sp-themen li { margin: 0 0 .55em; line-height: 1.55; font-size: .98rem; color: var(--ink); }
.sp-themen li:last-child { margin-bottom: 0; }
.sp-themen em { font-style: normal; color: var(--ink-3); font-size: .9em; }
.sp-teil1 { border-inline-start: 3px solid var(--signal-deep); }

@media (max-width: 620px) { .sp-themen li { font-size: .93rem; } }


/* ═══════════════════════════════ Sprechen access states

   A learner should be able to read the list once and know where they stand:
   what they may practise now, what they have finished, and what their plan has
   not opened. A finished theme is dimmed but never hidden — it is still worth
   opening to reread the feedback. */

.sp-state:empty { display: none; }
.sp-state.practice { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.sp-state.review   { background: var(--surface-2); color: var(--muted); border-color: transparent; }
.sp-state.locked   { background: var(--surface-2); color: var(--muted); border-color: transparent; }

.card.sp-locked { opacity: .55; }
.card.sp-locked:hover { transform: none; border-color: var(--line); }
.card.sp-review { opacity: .82; }

.sp-summary { margin: 0 0 18px; }
.sp-sum {
  display: block; padding: 12px 15px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-size: .88rem; line-height: 1.7; color: var(--ink-2);
}
.sp-sum b { color: var(--ink); }
.sp-sum.pro { border-inline-start: 3px solid var(--signal-deep); }

.sp-gate { margin-bottom: 16px; padding: 18px; border-radius: var(--radius); background: var(--surface-2); }
.sp-gate h2 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; }
.sp-gate p { margin: 0 0 12px; font-size: .9rem; line-height: 1.7; color: var(--ink-2); }
.sp-gate.locked { text-align: center; }
.sp-gate .locked-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }

.sp-review-panel { margin-bottom: 16px; }
.sp-review-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.sp-review-kicker { font-size: .74rem; font-weight: 700; color: var(--muted); }
.sp-review-score { display: flex; align-items: baseline; gap: 7px; }
.sp-review-score b { font-family: var(--font-de); font-size: 1.5rem; font-weight: 800; }
.sp-review-score.pass b { color: var(--ok); }
.sp-review-score.fail b { color: var(--bad); }
.sp-review-score span { font-size: .82rem; color: var(--muted); }
.sp-review-dq { padding: 10px 13px; border-radius: var(--radius-sm); background: var(--bad-bg); color: var(--bad); font-size: .86rem; }
.sp-review-crit { display: grid; gap: 9px; margin-bottom: 16px; }
.sp-rc { padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sp-rc-l { font-size: .84rem; font-weight: 700; }
.sp-rc-p { float: inline-end; font-family: var(--font-de); font-size: .84rem; color: var(--muted); }
.sp-rc p { margin: 5px 0 0; font-size: .8rem; line-height: 1.65; color: var(--ink-3); }
.sp-review-h { margin: 0 0 10px; font-size: .95rem; font-weight: 700; }
.sp-review-talk { display: grid; gap: 9px; }
.sp-rt { padding: 10px 13px; border-radius: var(--radius-sm); background: var(--surface-2); }
.sp-rt.me { background: var(--brand-soft); }
.sp-rt-who { font-size: .7rem; font-weight: 700; color: var(--muted); }
.sp-rt p { margin: 3px 0 0; font-family: var(--font-de); font-size: .9rem; line-height: 1.6; }


/* On a phone the columns stack, and the free plan would otherwise push the
   recommended one below the fold. Lead with the recommendation; free is still
   one scroll away. */
@media (max-width: 900px) {
  .plan-grid.three .plan.featured { order: -1; }
}

/* Match yourself to a plan before reading any feature table. */
.plan-pick {
  margin: 0 0 26px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.plan-pick-h { display: block; font-size: .8rem; font-weight: 800; color: var(--muted); margin-bottom: 10px; }
.plan-pick ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plan-pick li { font-size: .88rem; line-height: 1.7; color: var(--ink-2); }
.plan-pick li b { color: var(--ink); }

/* ═══════════════════════════════════════════ pricing, ranked

   The card reads in decision order: who it is for, the price, the call to
   action, then what you get — the two or three things that matter set apart
   from the rest, and every line explained in one sentence. */

.plan-for {
  margin: 0 0 16px; padding: 8px 12px;
  border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: .82rem; line-height: 1.55; color: var(--ink-2); text-align: center;
}

.plan-his { list-style: none; margin: 20px 0 4px; padding: 0; display: grid; gap: 11px; }
.plan-hi {
  padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-inline-start: 3px solid var(--brand);
}
.plan-hi-t { display: block; font-size: .9rem; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.plan-hi-w { display: block; font-size: .8rem; line-height: 1.65; color: var(--ink-2); }
.plan.featured .plan-hi { border-inline-start-color: var(--signal-deep); }

.plan-feats .feat-body { display: block; }
.plan-feats .feat-body b { display: block; font-size: .87rem; font-weight: 700; line-height: 1.5; }
.plan-feats .feat-body em {
  display: block; margin-top: 2px;
  font-style: normal; font-size: .77rem; line-height: 1.6; color: var(--muted);
}
.plan-feats li.no .feat-body b { color: var(--muted); font-weight: 600; }
.plan-feats li.no .feat-body em { color: var(--ink-3); }

@media (max-width: 620px) {
  .plan-hi { padding: 10px 11px; }
  .plan-hi-t { font-size: .86rem; }
}


/* Says the listing is scoped to one level, and offers the way back. Without
   it a learner scoped to B2 sees no B1 and no reason why. */
.scope-note:empty { display: none; }
.scope-note {
  margin: 0 0 10px; padding: 9px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: .82rem; line-height: 1.6; color: var(--ink-2);
}
.scope-note .link-btn {
  border: 0; background: none; padding: 0;
  font: inherit; font-weight: 700; color: var(--brand-ink);
  cursor: pointer; text-decoration: underline;
}


/* ═══════════════════════════════ marking a speaking exam

   Correcting takes a few seconds of real work. The steps shown are the ones
   actually being performed, so the wait reads as progress rather than as a
   page that has stopped responding. */

.sp-analyzing {
  padding: 34px 24px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
.sp-analyzing h3 { margin: 14px 0 6px; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.sp-analyzing-step { margin: 0; font-size: .88rem; color: var(--ink-2); min-height: 1.4em; }

.sp-spinner {
  width: 30px; height: 30px; margin: 0 auto;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spSpin .8s linear infinite;
}
.sp-spinner.sm {
  width: 14px; height: 14px; border-width: 2px; margin: 0;
  display: inline-block; vertical-align: -2px; margin-inline-end: 7px;
}
@keyframes spSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sp-spinner { animation-duration: 2.4s; }
}

.sp-analyzing-list {
  list-style: none; margin: 20px auto 0; padding: 0;
  max-width: 300px; text-align: start;
}
.sp-analyzing-list li {
  position: relative; padding-inline-start: 24px; margin-bottom: 9px;
  font-size: .82rem; color: var(--ink-3);
  transition: color .25s ease;
}
.sp-analyzing-list li::before {
  content: '○'; position: absolute; inset-inline-start: 0; color: var(--ink-3);
}
.sp-analyzing-list li.on { color: var(--ink); }
.sp-analyzing-list li.on::before { content: '●'; color: var(--brand-ink); }

.sp-refining {
  margin: 0 0 14px; padding: 9px 13px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: .82rem; line-height: 1.5;
}

@media (max-width: 620px) {
  .sp-analyzing { padding: 26px 16px; }
}