/* ===========================================================
   Grand Ta'lim — Arab tili saviya imtihoni
   Brand-aligned styles matching grandtalim.uz main site.
   Tokens mirror /mnt/grandtalim-site/css/tokens.css.
   =========================================================== */

/* Archivo for the "GRAND" wordmark (main site brand lockup) */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&display=swap");

:root {
  /* --- Brand (green) --- */
  --brand-50:  #f2f8f4;
  --brand-100: #def0e2;
  --brand-200: #b9dfc1;
  --brand-300: #8dc89a;
  --brand-400: #5cad71;
  --brand-500: #2f8e50;
  --brand-600: #1f6e3d;   /* primary */
  --brand-700: #175733;
  --brand-800: #0f4229;
  --brand-900: #0a2e1d;

  /* --- Gold accent --- */
  --gold-50:  #fbf7ee;
  --gold-100: #f4e9ce;
  --gold-200: #e8cf95;
  --gold-300: #d9b460;
  --gold-400: #c89f5c;
  --gold-500: #ae8140;
  --gold-600: #8a6530;

  /* --- Neutrals --- */
  --ink-0:   #ffffff;
  --ink-50:  #fafaf7;
  --ink-100: #f2f1ec;
  --ink-200: #e5e3dc;
  --ink-300: #cdcbc1;
  --ink-400: #9a988e;
  --ink-500: #6d6b62;
  --ink-600: #4a4842;
  --ink-700: #2f2e2a;
  --ink-800: #1c1b18;
  --ink-900: #0e0d0b;

  /* --- Semantic --- */
  --danger-500: #c73642;
  --warn-500:   #e09f2d;
  --ok-500:     #2f8e50;

  /* --- Type --- */
  --font-sans:    "Inter", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Fraunces", "Inter", Georgia, serif;
  --font-ar:      "Amiri", "Traditional Arabic", "Arabic Typesetting", serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-4xl:  clamp(2.25rem, 5vw, 3.25rem);

  /* --- Spacing (8pt grid) --- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px;

  /* --- Radii --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(14,13,11,.04);
  --shadow-sm: 0 2px 6px rgba(14,13,11,.06), 0 1px 2px rgba(14,13,11,.04);
  --shadow-md: 0 8px 24px rgba(14,13,11,.08), 0 2px 6px rgba(14,13,11,.04);
  --shadow-lg: 0 24px 60px rgba(14,13,11,.12), 0 4px 12px rgba(14,13,11,.06);

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur:      220ms;

  /* --- Layout --- */
  --container: 1080px;
  --nav-h: 72px;

  /* Legacy aliases (JS-rendered strings reference these names indirectly
     through class names; keep values mapped to the brand palette). */
  --color-primary:       var(--brand-600);
  --color-primary-dark:  var(--brand-700);
  --color-primary-light: var(--brand-500);
  --color-accent:        var(--gold-400);
  --color-accent-dark:   var(--gold-600);
  --color-bg:            var(--ink-50);
  --color-card:          #ffffff;
  --color-text:          var(--ink-800);
  --color-muted:         var(--ink-500);
  --color-border:        var(--ink-200);
  --color-success:       var(--ok-500);
  --color-danger:        var(--danger-500);
  --color-warning:       var(--warn-500);
}

/* ===== Reset + base ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink-800);
  background: var(--ink-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

/* App shell */
.app {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
  padding: 0 0 var(--s-9);
}

/* ===== Header / nav (brand lockup) ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: var(--nav-h);
  margin-bottom: var(--s-7);
  padding: 0 var(--s-4);
  background: rgba(250, 250, 247, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  margin-inline: calc(var(--s-4) * -1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-900);
  line-height: 1;
}

/* 8-spoke starburst mark — matches main site layout.js LOGO_MARK */
.brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--brand-600);
  transform: translateY(-0.14em);
  transition: transform .35s var(--ease), color .2s;
  background: none;
  box-shadow: none;
  border-radius: 0;
  display: block;
  font-size: 0;
  padding: 0;
}
.brand:hover .brand-mark {
  transform: translateY(-0.14em) rotate(22deg);
  color: var(--gold-600);
}

.brand-text {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.brand-text .brand-title,
.brand-text h1 {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--brand-600);
  line-height: 0.92;
  margin: 0;
}
.brand-text p {
  font-family: var(--font-sans);
  font-size: 0.46rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink-600);
  line-height: 1;
  text-transform: uppercase;
  padding-left: 1px;
  margin: 0;
}

.exam-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-link {
  color: var(--ink-700);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-200);
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-link:hover { border-color: var(--ink-900); color: var(--ink-900); }

.nav-link--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--brand-600);
}
.nav-link--ghost:hover {
  color: var(--brand-700);
  border-color: color-mix(in oklab, var(--brand-600) 30%, transparent);
  background: color-mix(in oklab, var(--brand-600) 6%, transparent);
}

@media (max-width: 520px) {
  .site-header { flex-wrap: wrap; padding: 10px var(--s-4); height: auto; min-height: var(--nav-h); }
  .exam-nav .nav-link { padding: 6px 10px; font-size: 12.5px; }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: var(--s-8) var(--s-5);
  margin-bottom: var(--s-7);
  overflow: hidden;
  text-align: center;
  border-radius: var(--r-xl);
  background:
    radial-gradient(900px 400px at 85% -15%, rgba(200,159,92,.22), transparent 60%),
    radial-gradient(700px 380px at -10% 20%, rgba(31,110,61,.14), transparent 60%),
    linear-gradient(180deg, #fdfcf8 0%, var(--ink-50) 100%);
  border: 1px solid var(--ink-100);
}
.hero h2 {
  font-size: var(--fs-4xl);
  color: var(--ink-900);
  max-width: 20ch;
  margin: 0 auto var(--s-4);
  line-height: 1.05;
}
.hero p {
  margin: 0 auto;
  max-width: 62ch;
  color: var(--ink-600);
  font-size: var(--fs-md);
}
.arabic-tagline {
  font-family: var(--font-ar);
  font-size: 28px;
  color: var(--gold-600);
  direction: rtl;
  margin-top: var(--s-5);
  font-weight: 700;
}

/* ===== Section title (eyebrow style) ===== */
.section-title {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-600);
  margin: 0 0 var(--s-4);
}

/* ===== Choice cards (home) ===== */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
}

.card {
  background: linear-gradient(180deg, #fff 0%, var(--ink-50) 100%);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-300);
}
.card-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  display: grid;
  place-items: center;
  font-family: var(--font-ar);
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-700);
  margin-bottom: var(--s-4);
}
.card h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xl);
  color: var(--ink-900);
}
.card p {
  margin: 0 0 var(--s-2);
  color: var(--ink-600);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.muted { color: var(--ink-500); }

/* ===== Form blocks ===== */
.form-block {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-xs);
}
.form-block label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  margin-bottom: var(--s-2);
  font-weight: 600;
}
.form-block input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease);
}
.form-block input[type="text"]:focus {
  outline: none;
  border-color: var(--brand-500);
}

/* ===== Level grid ===== */
.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-4);
}
.level-card {
  background: linear-gradient(180deg, #fff 0%, var(--ink-50) 100%);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.level-card:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.level-card .lvl-num {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 700;
  letter-spacing: .12em;
}
.level-card .lvl-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--ink-900);
  margin: var(--s-2) 0 var(--s-1);
  font-weight: 600;
  line-height: 1.25;
}
.level-card .lvl-arabic {
  font-family: var(--font-ar);
  font-size: 18px;
  color: var(--brand-700);
  direction: rtl;
  margin-top: var(--s-1);
}
.level-card .lvl-lessons {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  margin-top: var(--s-2);
}

/* ===== Exam shell ===== */
.exam-shell {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) {
  .exam-shell { padding: var(--s-5); }
}

.progress {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--ink-600);
}
.progress-bar {
  flex: 1;
  height: 6px;
  background: var(--ink-100);
  border-radius: var(--r-pill);
  overflow: hidden;
}
#progressFill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-600), var(--gold-400));
  width: 0%;
  transition: width .3s var(--ease);
}

.q-meta {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.q-text {
  font-size: var(--fs-lg);
  color: var(--ink-800);
  line-height: 1.7;
  margin-bottom: var(--s-5);
  font-weight: 500;
  unicode-bidi: plaintext;
}
.q-text.rtl {
  direction: rtl;
  font-family: var(--font-ar);
  font-size: 26px;
}

/* Arabic runs embedded in Uzbek text — consistent styling across question/options/explanation */
.q-text bdi,
.option-label bdi,
.explanation bdi {
  font-family: var(--font-ar);
  font-size: 1.25em;
  font-weight: 600;
  color: var(--brand-700);
  padding: 0 2px;
  unicode-bidi: isolate;
}
.option-label.rtl bdi {
  font-size: 1em;
  padding: 0;
}
.q-text bdi.blank,
.option-label bdi.blank,
.explanation bdi.blank {
  display: inline-block;
  min-width: 80px;
  border-bottom: 2px solid var(--gold-400);
  height: 1.3em;
  vertical-align: baseline;
  font-size: 1em;
  color: transparent;
  padding: 0;
}

/* ===== Options ===== */
.options {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.option {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  cursor: pointer;
  background: #fff;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  min-height: 54px;
}
.option:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
}
.option.selected {
  border-color: var(--brand-600);
  background: var(--brand-50);
  box-shadow: 0 0 0 3px rgba(31, 110, 61, .08);
}
.option.correct {
  border-color: var(--ok-500);
  background: rgba(47, 142, 80, .09);
}
.option.wrong {
  border-color: var(--danger-500);
  background: rgba(199, 54, 66, .08);
}
.option.disabled { pointer-events: none; opacity: .92; }

.option-letter {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--ink-200);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--brand-600);
}
.option.selected .option-letter {
  background: var(--brand-600);
  color: #fff;
  border-color: var(--brand-600);
}
.option.correct .option-letter {
  background: var(--ok-500);
  color: #fff;
  border-color: var(--ok-500);
}
.option.wrong .option-letter {
  background: var(--danger-500);
  color: #fff;
  border-color: var(--danger-500);
}

.option-label { flex: 1; font-size: var(--fs-base); min-width: 0; }
.option-label.rtl {
  flex: 0 1 auto;
  direction: rtl;
  font-family: var(--font-ar);
  font-size: 26px;
  text-align: right;
  line-height: 1.5;
  font-weight: 600;
  color: var(--brand-700);
  unicode-bidi: isolate;
  padding: 2px 6px;
}

/* ===== Explanation ===== */
.explanation {
  padding: var(--s-4) var(--s-5);
  background: var(--gold-50);
  border: 1px solid var(--gold-200);
  border-left: 3px solid var(--gold-400);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--ink-800);
  margin-bottom: var(--s-5);
  line-height: 1.6;
}
.explanation strong { color: var(--gold-600); }

/* ===== Exam footer ===== */
.exam-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.hint { font-size: var(--fs-sm); color: var(--ink-500); }

/* ===== Buttons (pill-shaped, brand lockup) ===== */
.btn {
  --bg: var(--brand-600);
  --fg: #fff;
  --bd: var(--brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1;
  border: 1.5px solid var(--bd);
  background: var(--bg);
  color: var(--fg);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  --bg: var(--brand-600);
  --fg: #fff;
  --bd: var(--brand-600);
}
.btn-primary:hover:not(:disabled) { --bg: var(--brand-700); --bd: var(--brand-700); }

.btn-ghost {
  --bg: transparent;
  --fg: var(--ink-800);
  --bd: var(--ink-300);
}
.btn-ghost:hover { --bd: var(--ink-900); --fg: var(--ink-900); }

.btn-accent {
  --bg: var(--gold-400);
  --fg: #1a1200;
  --bd: var(--gold-400);
}
.btn-accent:hover { --bg: var(--gold-500); --bd: var(--gold-500); --fg: #fff; }

/* ===== Results ===== */
.result-shell {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) {
  .result-shell { padding: var(--s-5); }
}

.result-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--ink-900);
  margin: 0 0 var(--s-2);
  font-weight: 700;
}
.result-subtitle {
  color: var(--ink-500);
  margin: 0 0 var(--s-6);
}

.score-big {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--ink-100);
}
.score-big .pct {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  color: var(--brand-700);
  line-height: 1;
  letter-spacing: -0.02em;
}
.score-big .count {
  font-size: var(--fs-md);
  color: var(--ink-500);
}

.recommendation {
  background:
    radial-gradient(400px 200px at 80% 0%, rgba(200,159,92,.18), transparent 60%),
    linear-gradient(135deg, var(--brand-50) 0%, var(--gold-50) 100%);
  border: 1px solid var(--gold-200);
  border-left: 4px solid var(--gold-400);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-6);
}
.recommendation h3 {
  margin: 0 0 var(--s-2);
  color: var(--ink-900);
  font-size: var(--fs-xl);
  font-family: var(--font-display);
}
.recommendation .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-600);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-top: var(--s-3);
  letter-spacing: 0;
}

/* ===== Lesson breakdown ===== */
.lesson-breakdown {
  margin-bottom: var(--s-6);
}
.lesson-breakdown h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--brand-600);
  margin: 0 0 var(--s-3);
  font-weight: 600;
}
.lesson-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
  gap: var(--s-3);
}
.lesson-row .status {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  border: 1px solid transparent;
}
.lesson-row .status.pass {
  background: var(--brand-50);
  color: var(--brand-700);
  border-color: var(--brand-200);
}
.lesson-row .status.partial {
  background: var(--gold-50);
  color: var(--gold-600);
  border-color: var(--gold-200);
}
.lesson-row .status.fail {
  background: #fde8ea;
  color: var(--danger-500);
  border-color: #f5c2c7;
}
.lesson-row .status.untested {
  background: var(--ink-100);
  color: var(--ink-500);
  border-color: var(--ink-200);
}

/* ===== Book grid (general results) ===== */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.book-cell {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--ink-100);
  text-align: center;
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease);
}
.book-cell.mastered {
  background: var(--brand-50);
  border-color: var(--brand-300);
}
.book-cell.failed {
  background: #fde8ea;
  border-color: #f5c2c7;
}
.book-cell .b-num {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.book-cell .b-pct {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--ink-900);
  margin-top: 2px;
  letter-spacing: -0.02em;
}
.book-cell.mastered .b-pct { color: var(--brand-700); }
.book-cell.failed .b-pct { color: var(--danger-500); }
.book-cell .b-title {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  margin-top: var(--s-1);
}

/* ===== Missed topics ===== */
.missed-topics {
  background: var(--gold-50);
  border: 1px solid var(--gold-200);
  border-left: 3px solid var(--gold-400);
  padding: var(--s-5) var(--s-5);
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
}
.missed-topics h4 {
  margin: 0 0 var(--s-3);
  color: var(--gold-600);
  font-size: var(--fs-md);
  font-family: var(--font-display);
  font-weight: 600;
}
.missed-topics ul { margin: 0; padding-left: 20px; }
.missed-topics li {
  margin-bottom: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.5;
}

/* ===== Result actions ===== */
.result-actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-5);
  flex-wrap: wrap;
}

/* ===== Micro animations ===== */
.hero, .form-block, .card, .exam-shell, .result-shell, .level-card {
  animation: fadeIn .35s var(--ease);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Utilities ===== */
.hidden { display: none !important; }
.spacer { height: var(--s-6); }

/* ===== Footer (brand dark band) ===== */
.footer {
  position: relative;
  text-align: center;
  margin-top: var(--s-9);
  padding: var(--s-6) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--ink-300);
  border-radius: var(--r-xl);
  background:
    radial-gradient(800px 280px at 20% 0%, rgba(202, 163, 98, .08), transparent 60%),
    linear-gradient(180deg, #13130f 0%, #0a0a08 100%);
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(202, 163, 98, .5), transparent);
}
.footer .footer-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  line-height: 1.6;
}
.footer .footer-link {
  color: var(--gold-300);
  transition: color var(--dur-fast) var(--ease);
}
.footer .footer-link:hover { color: var(--gold-100); text-decoration: underline; }
.footer .footer-sep { color: rgba(255,255,255,.25); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Print ===== */
@media print {
  body { background: #fff; }
  .site-header, .footer, .result-actions, .nav-link { display: none; }
  .app { max-width: none; padding: 0; }
  .result-shell, .exam-shell {
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .book-cell, .lesson-row { break-inside: avoid; }
  .recommendation { background: none; border-left: 3px solid var(--gold-400); }
}