/* ============================================================
   BASIS web app
   ------------------------------------------------------------
   Built on the iOS app's own design tokens, generated into
   theme.css by `npm run generate:web-theme` in the app repo.
   Everything here uses --ba-* so the marketing pages' tokens in
   /styles.css (and the shared nav) stay untouched.
   ============================================================ */

body { background: var(--ba-bg); color: var(--ba-ink); }
.ba-main { padding-top: var(--ba-sp-xl); padding-bottom: var(--ba-sp-xxxl); }
.ba-shell { max-width: 560px; margin-inline: auto; padding-inline: var(--ba-sp-lg); }
.ba-loading { text-align: center; color: var(--ba-muted); padding-block: 96px; }

/* Immersive screens (onboarding, lesson player) take the whole viewport and
   hide the marketing chrome, so the experience reads as an app rather than a
   page with an app in it. */
body.ba-immersive .nav { display: none; }
body.ba-immersive .ba-main { padding: 0; }
body.ba-immersive .ba-shell { max-width: none; padding: 0; }

.ba-mascot { display: block; }

@keyframes ba-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ba-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
.ba-enter > * { animation: ba-in 0.32s cubic-bezier(.2,.7,.3,1) both; }

/* Staggered entrance, mirroring the app's FadeInDown(delay: REVEAL + STEP*n). */
.ba-stagger > * { animation: ba-in 0.34s cubic-bezier(.2,.7,.3,1) both; }
.ba-stagger > *:nth-child(1) { animation-delay: 0ms; }
.ba-stagger > *:nth-child(2) { animation-delay: 70ms; }
.ba-stagger > *:nth-child(3) { animation-delay: 140ms; }
.ba-stagger > *:nth-child(4) { animation-delay: 210ms; }
.ba-stagger > *:nth-child(5) { animation-delay: 280ms; }
.ba-stagger > *:nth-child(n+6) { animation-delay: 340ms; }

/* ── Cards & type ───────────────────────────────────────── */
.ba-card {
  background: var(--ba-surface);
  border: 1px solid var(--ba-card-border);
  border-radius: var(--ba-r-xl);
  padding: var(--ba-sp-lg);
  margin-bottom: var(--ba-sp-md);
}

.ba-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tc, var(--ba-primary));
  margin-bottom: var(--ba-sp-sm);
}

.ba-h1 {
  font-family: var(--ba-font-display);
  font-size: var(--ba-type-h1-size); line-height: var(--ba-type-h1-lh);
  letter-spacing: var(--ba-type-h1-ls);
  font-weight: 700; color: var(--ba-ink);
  margin-bottom: var(--ba-sp-md);
}
.ba-h1.sm { font-size: var(--ba-type-h3-size); line-height: var(--ba-type-h3-lh); margin-bottom: 2px; }
.ba-h2 {
  font-family: var(--ba-font-display);
  font-size: var(--ba-type-h3-size); line-height: var(--ba-type-h3-lh);
  font-weight: 700; color: var(--ba-ink);
  margin-bottom: var(--ba-sp-md);
}
.ba-sub { font-size: 14px; line-height: 1.6; color: var(--ba-muted); margin-bottom: var(--ba-sp-md); }
.ba-sub:last-child { margin-bottom: 0; }

.ba-formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; color: var(--ba-ink);
  background: var(--ba-bg);
  border: 1px solid var(--ba-divider);
  border-radius: var(--ba-r-md);
  padding: var(--ba-sp-lg);
  margin-bottom: var(--ba-sp-lg);
  overflow-x: auto;
}

.ba-bullets { list-style: none; margin: 0 0 var(--ba-sp-lg); padding: 0; }
.ba-bullets li {
  position: relative; padding-left: 20px;
  font-size: 15px; line-height: 1.6; color: var(--ba-muted2);
  margin-bottom: var(--ba-sp-md);
  animation: ba-in 0.3s ease both;
}
.ba-bullets li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tc, var(--ba-primary));
}
.ba-bullets strong, .ba-tc-body strong, .ba-tc-lead strong, .ba-ex-body strong { color: var(--ba-ink); font-weight: 700; }

/* ============================================================
   HOME — a port of app/(tabs)/index.tsx
   ============================================================ */

/* Header: goal ring around the mascot disc, greeting/level, streak pill */
.ba-hd { display: flex; align-items: center; gap: var(--ba-sp-md); margin-bottom: var(--ba-sp-xl); }
.ba-hd-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.ba-hd-ring svg { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); }
.ba-ring-track { fill: none; stroke: var(--ba-ring-track); }
.ba-ring-fill {
  fill: none; stroke: var(--ba-primary); stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(.2,.7,.3,1);
}
.ba-ring-fill.met { stroke: var(--ba-gold); }
.ba-hd-disc {
  position: absolute; inset: 6px;
  border-radius: 50%; background: var(--ba-deep);
  display: grid; place-items: center; overflow: hidden;
}
.ba-hd-disc img { width: 34px; height: 34px; object-fit: contain; animation: ba-float 3.4s ease-in-out infinite; }
@keyframes ba-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.ba-hd-text { flex: 1; min-width: 0; }
.ba-hd-greeting { font-size: 12px; font-weight: 600; color: var(--ba-muted); }
.ba-hd-level {
  font-family: var(--ba-font-display);
  font-size: 19px; font-weight: 700; color: var(--ba-ink); line-height: 1.25;
}
.ba-hd-xp { font-size: 12px; color: var(--ba-muted); font-variant-numeric: tabular-nums; }
.ba-hd-streak {
  display: flex; align-items: center; gap: 5px;
  background: var(--ba-streak-done-bg);
  border-radius: 999px; padding: 7px 13px;
  font-family: var(--ba-font-display); font-weight: 700; font-size: 15px;
  color: var(--ba-flame); font-variant-numeric: tabular-nums;
}

/* Hero — the one unmissable action */
.ba-hero {
  display: flex; align-items: center; gap: var(--ba-sp-lg);
  background: var(--tc, var(--ba-primary));
  border-radius: var(--ba-r-xl);
  padding: var(--ba-sp-lg);
  margin-bottom: var(--ba-sp-md);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(36, 21, 68, 0.28);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ba-hero:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(36, 21, 68, 0.36); }
.ba-hero-body { display: block; flex: 1; min-width: 0; }
.ba-hero-kicker {
  display: block;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.78); margin-bottom: 5px;
}
.ba-hero-title {
  display: block;
  font-family: var(--ba-font-display);
  font-size: 21px; font-weight: 700; line-height: 1.25;
  color: #fff; letter-spacing: -0.3px;
}
.ba-hero-meta {
  display: block;
  font-size: 12.5px; color: rgba(255,255,255,0.72); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ba-hero-go {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  color: var(--tc, var(--ba-primary)); font-size: 18px; font-weight: 700;
}

/* Today card */
.ba-today-head { display: flex; align-items: center; gap: var(--ba-sp-md); margin-bottom: var(--ba-sp-lg); }
.ba-today-ring { position: relative; width: 44px; height: 44px; flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 0; }
.ba-today-ring svg { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.ba-today-ring-text {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--ba-font-display); font-size: 13px; font-weight: 700;
  color: var(--ba-ink); font-variant-numeric: tabular-nums;
}
.ba-today-ring-text.met { color: var(--ba-gold); }
.ba-today-title { font-family: var(--ba-font-display); font-size: 16px; font-weight: 700; color: var(--ba-ink); }
.ba-today-sub { font-size: 12.5px; color: var(--ba-muted); margin-top: 2px; }
.ba-today-chips { display: flex; gap: var(--ba-sp-sm); }
.ba-chip {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--ba-bg);
  border: 1px solid var(--ba-divider);
  border-radius: var(--ba-r-lg);
  padding: var(--ba-sp-md) var(--ba-sp-sm);
  text-decoration: none; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s, transform 0.1s;
}
.ba-chip:hover { border-color: var(--ba-primary); }
.ba-chip:active { transform: scale(0.98); }
.ba-chip-icon {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
  background: color-mix(in srgb, var(--cc) 18%, transparent); color: var(--cc);
}
.ba-chip-label { font-size: 11.5px; font-weight: 600; color: var(--ba-muted2); }
.ba-chip.done .ba-chip-icon { background: var(--ba-success-bg); color: var(--ba-success); }

/* Streak week */
.ba-streak-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ba-sp-sm); margin-bottom: var(--ba-sp-lg); }
.ba-streak-title { font-family: var(--ba-font-display); font-size: 16px; font-weight: 700; color: var(--ba-ink); }
.ba-streak-hint { font-size: 12px; color: var(--ba-muted); }
.ba-week { display: flex; justify-content: space-between; gap: 4px; }
.ba-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ba-day-label { font-size: 11px; font-weight: 600; color: var(--ba-day-label); }
.ba-day.today .ba-day-label { color: var(--ba-flame); font-weight: 700; }
.ba-day-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: var(--ba-day-empty-bg);
}
.ba-day.done .ba-day-dot { background: var(--ba-streak-done-bg); }
.ba-day.future .ba-day-dot { background: transparent; border: 1.5px dashed var(--ba-dashed); }

/* ── Track path: nodes on a rail ─────────────────────────── */
.ba-unit { margin-bottom: var(--ba-sp-xl); }
.ba-unit-head {
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 0 2px var(--ba-sp-md); font-family: inherit; text-align: left;
}
.ba-unit-row { display: flex; align-items: center; gap: var(--ba-sp-sm); margin-bottom: var(--ba-sp-sm); }
.ba-unit-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tc); flex-shrink: 0; }
.ba-unit-title { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--ba-ink); }
.ba-unit-count { font-size: 12px; color: var(--ba-muted); font-variant-numeric: tabular-nums; }
.ba-unit-chev { font-size: 10px; color: var(--ba-muted); transition: transform 0.2s; display: inline-block; }
.ba-unit.open .ba-unit-chev { transform: rotate(180deg); }
.ba-unit-bar { height: 4px; border-radius: 999px; background: var(--ba-ring-track); overflow: hidden; }
.ba-unit-fill { height: 100%; border-radius: 999px; background: var(--tc); transition: width 0.5s cubic-bezier(.2,.7,.3,1); }
.ba-unit-fill.all { background: var(--ba-success); }

.ba-path { background: var(--ba-surface); border: 1px solid var(--ba-card-border); border-radius: var(--ba-r-xl); padding: var(--ba-sp-sm) var(--ba-sp-lg); }

.ba-node-row {
  display: flex; align-items: center; gap: var(--ba-sp-md);
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
  padding: 7px 0; text-decoration: none;
}
.ba-node-row:disabled { cursor: default; }
.ba-node-row:hover:not(:disabled) .ba-node-title { color: var(--ba-primary); }

/* The rail column — a continuous road behind the nodes. */
.ba-rail-col { position: relative; width: 26px; flex-shrink: 0; align-self: stretch; display: grid; place-items: center; min-height: 40px; }
.ba-rail { position: absolute; left: 50%; width: 2px; margin-left: -1px; background: var(--ba-dashed); }
/* Rows are padded, and the rail column only stretches to the content box, so
   the segments reach past it to meet the next row's — otherwise the road has
   a gap at every join. */
.ba-rail.top { top: -7px; height: calc(50% + 7px); }
.ba-rail.bottom { bottom: -7px; height: calc(50% + 7px); }
.ba-rail.solid { background: var(--rail); }

.ba-node { position: relative; z-index: 1; display: grid; place-items: center; }
.ba-node.done {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--tc); color: #fff; font-size: 12px; font-weight: 700;
}
.ba-node.current {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--tc); color: #fff; font-size: 11px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tc) 22%, transparent);
}
.ba-node.locked { width: 11px; height: 11px; border-radius: 50%; background: var(--ba-dashed); }
.ba-node.paywall {
  width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--ba-gold) 18%, transparent);
  color: var(--ba-gold); font-size: 11px;
}

.ba-node-body { display: block; flex: 1; min-width: 0; }
.ba-node-title { display: block; font-size: 14.5px; font-weight: 600; color: var(--ba-muted2); line-height: 1.35; transition: color 0.15s; }
.ba-node-row.current .ba-node-title { color: var(--ba-ink); font-weight: 700; }
.ba-node-row.locked .ba-node-title, .ba-node-row.paywall .ba-node-title { color: var(--ba-muted); }
.ba-node-sub { display: block; font-size: 12px; color: var(--ba-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ba-node-score { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--ba-muted); font-variant-numeric: tabular-nums; }
.ba-pill {
  flex-shrink: 0; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 5px 11px;
  background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--tc);
}
.ba-pill.pro { background: color-mix(in srgb, var(--ba-gold) 16%, transparent); color: var(--ba-gold); }

.ba-milestone { display: flex; align-items: center; gap: var(--ba-sp-md); padding: var(--ba-sp-sm) 0 2px; }
.ba-milestone .ba-rail-col { min-height: 26px; }
.ba-milestone-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--tc); background: var(--ba-surface); position: relative; z-index: 1; }
.ba-milestone-text {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tc);
}

.ba-more {
  display: flex; align-items: center; gap: var(--ba-sp-md);
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left; padding: 7px 0;
}
.ba-more-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ba-dashed); position: relative; z-index: 1; }
.ba-more-text { font-size: 13px; font-weight: 600; color: var(--ba-primary); }

.ba-alldone { display: flex; align-items: center; gap: var(--ba-sp-md); }
.ba-alldone-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ba-success-bg); color: var(--ba-success);
  display: grid; place-items: center; font-size: 14px;
}
.ba-alldone-text { flex: 1; font-size: 14px; font-weight: 600; color: var(--ba-muted2); }

.ba-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ba-muted);
  margin: var(--ba-sp-xl) 0 var(--ba-sp-md);
}

/* ── Track detail ───────────────────────────────────────── */
.ba-back { display: inline-block; font-size: 13px; color: var(--ba-muted); text-decoration: none; margin-bottom: var(--ba-sp-lg); }
.ba-back:hover { color: var(--ba-ink); }
.ba-module { margin-bottom: var(--ba-sp-xl); }
.ba-module-head { display: flex; align-items: center; gap: var(--ba-sp-md); margin-bottom: var(--ba-sp-md); }
.ba-module-title { font-family: var(--ba-font-display); font-size: 15px; font-weight: 700; color: var(--ba-ink); }
.ba-pro-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ba-gold); background: color-mix(in srgb, var(--ba-gold) 16%, transparent);
  padding: 3px 8px; border-radius: 999px;
}

/* ============================================================
   LESSON PLAYER
   ============================================================ */
.ba-lp {
  min-height: 100svh; display: flex; flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) var(--ba-sp-lg) max(16px, env(safe-area-inset-bottom));
  max-width: 620px; margin-inline: auto;
}
.ba-lp-top { display: flex; align-items: center; gap: var(--ba-sp-lg); padding-block: var(--ba-sp-md) var(--ba-sp-xl); }
.ba-lp-close {
  background: none; border: none; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--ba-muted);
  padding: 4px 6px; border-radius: 8px;
}
.ba-lp-close:hover { color: var(--ba-ink); background: var(--ba-divider); }
.ba-lp-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--ba-ring-track); overflow: hidden; }
.ba-lp-fill { height: 100%; border-radius: 999px; background: var(--tc, var(--ba-primary)); transition: width 0.45s cubic-bezier(.2,.7,.3,1); }
.ba-lp-count { font-size: 12px; color: var(--ba-muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.ba-lp-foot { padding-top: var(--ba-sp-xl); margin-top: auto; }
.ba-lp-foot.inline { margin-top: var(--ba-sp-xl); width: 100%; }

/* Teaching cards */
.ba-tc-stage { flex: 1; overflow: hidden; display: flex; }
.ba-tc-track { display: flex; width: 100%; flex: 1; transition: transform 0.38s cubic-bezier(.2,.7,.3,1); will-change: transform; }
.ba-tc { flex: 0 0 100%; min-width: 100%; display: flex; padding: var(--ba-sp-xl) 2px var(--ba-sp-lg); overflow-y: auto; }
/* Auto margins centre a short card without clipping a tall one the way
   justify-content: center would. */
.ba-tc-inner { width: 100%; margin-block: auto; }
.ba-tc-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tc, var(--ba-primary)); margin-bottom: var(--ba-sp-md);
}
.ba-tc-title {
  font-family: var(--ba-font-display);
  font-size: var(--ba-type-display-size); line-height: var(--ba-type-display-lh);
  letter-spacing: var(--ba-type-display-ls);
  font-weight: 700; color: var(--ba-ink); margin-bottom: var(--ba-sp-xl);
}
.ba-tc-lead p { font-size: 17px; line-height: 1.65; color: var(--ba-muted2); margin-bottom: var(--ba-sp-lg); }
.ba-tc-heading {
  font-family: var(--ba-font-display);
  font-size: var(--ba-type-h2-size); line-height: var(--ba-type-h2-lh);
  letter-spacing: var(--ba-type-h2-ls);
  font-weight: 700; color: var(--ba-ink); margin-bottom: var(--ba-sp-lg);
}
.ba-tc-body p { font-size: 16px; line-height: 26px; color: var(--ba-muted2); margin-bottom: var(--ba-sp-lg); }

.ba-tc-foot { padding-top: var(--ba-sp-lg); }
.ba-tc-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: var(--ba-sp-lg); }
.ba-tc-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ba-dashed); cursor: pointer; transition: width 0.25s, background 0.25s; }
.ba-tc-dot.on { width: 22px; background: var(--tc, var(--ba-primary)); }
.ba-tc-nav { display: flex; align-items: center; gap: var(--ba-sp-md); }
.ba-tc-prev {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--ba-r-lg);
  background: transparent; border: 1px solid var(--ba-card-border);
  color: var(--ba-muted2); font-size: 17px; cursor: pointer;
  transition: border-color 0.15s, opacity 0.15s;
}
.ba-tc-prev:hover:not(:disabled) { border-color: var(--ba-primary); color: var(--ba-ink); }
.ba-tc-prev:disabled { opacity: 0.3; cursor: default; }
.ba-tc-nav .ba-btn { margin-top: 0; }

/* Quiz */
.ba-q { flex: 1; padding-top: var(--ba-sp-lg); }
.ba-q-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ba-sp-lg); }
.ba-q-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ba-muted); }
.ba-timer {
  --p: 1; position: relative; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--tc, var(--ba-primary)) calc(var(--p) * 360deg), var(--ba-ring-track) 0);
  transition: background 0.9s linear;
}
.ba-timer::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ba-bg); }
.ba-timer-num {
  position: relative; z-index: 1;
  font-family: var(--ba-font-display); font-size: 13px; font-weight: 700;
  color: var(--ba-muted2); font-variant-numeric: tabular-nums;
}
.ba-timer.low { background: conic-gradient(#F43F5E calc(var(--p) * 360deg), var(--ba-ring-track) 0); }
.ba-timer.low .ba-timer-num { color: #F43F5E; }

.ba-q-prompt {
  font-family: var(--ba-font-display);
  font-size: var(--ba-type-h2-size); line-height: var(--ba-type-h2-lh);
  letter-spacing: var(--ba-type-h2-ls);
  font-weight: 700; color: var(--ba-ink); margin-bottom: var(--ba-sp-xl);
}

.ba-options { display: flex; flex-direction: column; gap: var(--ba-sp-md); }
.ba-opt {
  display: flex; gap: var(--ba-sp-md); align-items: flex-start; width: 100%; text-align: left;
  background: var(--ba-surface);
  border: 1.5px solid var(--ba-card-border);
  border-radius: var(--ba-r-lg);
  padding: var(--ba-sp-lg);
  color: var(--ba-muted2);
  font-family: inherit; font-size: 15px; line-height: 1.5;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.ba-opt:hover:not(:disabled) { border-color: var(--ba-muted); }
.ba-opt:active:not(:disabled) { transform: scale(0.99); }
.ba-opt-key { flex-shrink: 0; font-weight: 700; font-size: 12px; color: var(--ba-muted); width: 14px; }
.ba-opt.sel { border-color: var(--ba-primary); background: var(--ba-primary-tint); color: var(--ba-ink); }
.ba-opt.sel .ba-opt-key { color: var(--ba-primary); }

/* Explanation */
.ba-ex { flex: 1; display: flex; flex-direction: column; padding-top: var(--ba-sp-xl); }
.ba-ex-head { text-align: center; margin-bottom: var(--ba-sp-xl); animation: ba-pop 0.34s cubic-bezier(.2,1.3,.4,1) both; }
.ba-ex-head .ba-mascot { margin: 0 auto var(--ba-sp-md); }
.ba-ex-title { font-family: var(--ba-font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }
.ba-ex.right .ba-ex-title { color: var(--ba-success); }
.ba-ex.wrong .ba-ex-title { color: #F43F5E; }
.ba-ex-answer {
  background: var(--ba-success-bg);
  border: 1px solid color-mix(in srgb, var(--ba-success) 32%, transparent);
  border-radius: var(--ba-r-lg); padding: var(--ba-sp-lg); margin-bottom: var(--ba-sp-lg);
}
.ba-ex-answer-label {
  display: block; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ba-success); margin-bottom: 6px;
}
.ba-ex-answer p { font-size: 15px; line-height: 1.5; color: var(--ba-ink); }
.ba-ex-body p { font-size: 15px; line-height: 1.7; color: var(--ba-muted2); margin-bottom: var(--ba-sp-md); }

/* Onboarding reuses this simpler explanation block */
.ba-explain {
  border-radius: var(--ba-r-lg); padding: var(--ba-sp-lg); margin-top: var(--ba-sp-xl);
  font-size: 14px; line-height: 1.6; color: var(--ba-muted2);
  border: 1px solid var(--ba-divider); text-align: left;
}
.ba-explain.right { border-color: color-mix(in srgb, var(--ba-success) 32%, transparent); background: var(--ba-success-bg); }
.ba-explain.wrong { border-color: rgba(244,63,94,0.3); background: var(--ba-danger-bg); }
.ba-explain-head {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: var(--ba-sp-sm); color: var(--ba-muted);
}
.ba-ob-answer { font-size: 15px; color: var(--ba-ink); margin-bottom: var(--ba-sp-md); font-weight: 700; }

/* Completion */
.ba-lp.done { justify-content: center; }
.ba-done { position: relative; text-align: center; padding-block: var(--ba-sp-xxl); overflow: hidden; }
.ba-done .ba-mascot { margin: 0 auto var(--ba-sp-lg); animation: ba-pop 0.45s cubic-bezier(.2,1.3,.4,1) both; }
.ba-done-title {
  font-family: var(--ba-font-display);
  font-size: var(--ba-type-h1-size); line-height: var(--ba-type-h1-lh);
  letter-spacing: var(--ba-type-h1-ls);
  font-weight: 700; color: var(--ba-ink); margin-bottom: 6px;
}
.ba-done-sub { font-size: 14px; color: var(--ba-muted); margin-bottom: var(--ba-sp-xl); }
.ba-done-streak {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--ba-flame);
  background: var(--ba-streak-done-bg); border-radius: 999px;
  padding: 7px 15px; margin-bottom: var(--ba-sp-xl);
}
.ba-done-stats { display: flex; gap: var(--ba-sp-sm); margin-bottom: var(--ba-sp-xl); }
.ba-stat {
  flex: 1; text-align: center;
  background: var(--ba-surface); border: 1px solid var(--ba-card-border);
  border-radius: var(--ba-r-lg); padding: var(--ba-sp-lg) var(--ba-sp-sm);
}
.ba-stat-v {
  display: block; font-family: var(--ba-font-display);
  font-size: 22px; font-weight: 700; color: var(--ba-ink); font-variant-numeric: tabular-nums;
}
.ba-stat-v.good { color: var(--ba-success); }
.ba-stat-v.accent { color: var(--ba-primary); }
.ba-stat-l { font-size: 11px; color: var(--ba-muted); }

.ba-promo {
  border: 1px solid color-mix(in srgb, var(--ba-gold) 40%, transparent);
  background: color-mix(in srgb, var(--ba-gold) 14%, transparent);
  border-radius: var(--ba-r-lg); padding: var(--ba-sp-lg); margin-bottom: var(--ba-sp-xl);
}
.ba-promo-k { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ba-gold); margin-bottom: 4px; }
.ba-promo strong { font-family: var(--ba-font-display); font-size: 19px; color: var(--ba-ink); }

.ba-done-level { margin-bottom: var(--ba-sp-sm); }
.ba-bar { height: 6px; border-radius: 999px; background: var(--ba-ring-track); overflow: hidden; }
.ba-bar.sm { height: 4px; }
.ba-bar-fill { height: 100%; background: var(--tc, var(--ba-primary)); border-radius: 999px; transition: width 0.5s ease; }
.ba-done-levelt { font-size: 12px; color: var(--ba-muted); margin-top: var(--ba-sp-sm); }

.ba-confetti { position: absolute; top: -12px; width: 7px; height: 12px; border-radius: 2px; animation: ba-fall 2.6s linear forwards; pointer-events: none; }
@keyframes ba-fall { to { transform: translateY(520px) rotate(540deg); opacity: 0; } }

/* ============================================================
   ONBOARDING
   ============================================================ */
.ba-ob {
  min-height: 100svh; display: flex; flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) var(--ba-sp-lg) max(20px, env(safe-area-inset-bottom));
  max-width: 520px; margin-inline: auto;
}
/* The dark steps paint their own canvas behind the whole viewport. */
.ba-ob.dark::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 50% 0%, var(--ba-welcome-from) 0%, var(--ba-welcome-to) 70%);
}
.ba-ob.dark.grid::before {
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 28px 28px,
    #060814;
}
.ba-ob.dark .ba-ob-h1, .ba-ob.dark .ba-ob-h2 { color: #fff; }
.ba-ob.dark .ba-ob-sub { color: rgba(255,255,255,0.56); }

.ba-ob-top { display: flex; align-items: center; gap: var(--ba-sp-lg); padding-block: var(--ba-sp-sm) var(--ba-sp-xl); }
.ba-ob-back, .ba-ob-back-sp { width: 32px; flex-shrink: 0; }
.ba-ob-back { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--ba-muted); padding: 4px; border-radius: 8px; }
.ba-ob-back:hover { color: var(--ba-ink); }
.ba-ob-progress { flex: 1; display: flex; gap: 5px; }
.ba-ob-seg { flex: 1; height: 5px; border-radius: 999px; background: var(--ba-dashed); transition: background 0.3s; }
.ba-ob.dark .ba-ob-seg { background: rgba(255,255,255,0.15); }
.ba-ob-seg.on { background: var(--ba-primary); }
.ba-ob-seg.past { opacity: 0.38; }

.ba-ob-body { flex: 1; }
.ba-ob-body.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ba-ob-body.center .ba-mascot { margin-bottom: var(--ba-sp-xl); }
.ba-ob-foot { padding-top: var(--ba-sp-xl); }

.ba-ob-h1 {
  font-family: var(--ba-font-display);
  font-size: clamp(28px, 7vw, 36px); line-height: 1.16;
  letter-spacing: -0.8px; font-weight: 700; color: var(--ba-ink);
  margin-bottom: var(--ba-sp-lg);
}
.ba-ob-h2 {
  font-family: var(--ba-font-display);
  font-size: var(--ba-type-h1-size); line-height: var(--ba-type-h1-lh);
  letter-spacing: var(--ba-type-h1-ls);
  font-weight: 700; color: var(--ba-ink); margin-bottom: var(--ba-sp-md);
}
.ba-ob-h2.q { font-size: var(--ba-type-h2-size); line-height: var(--ba-type-h2-lh); margin-bottom: var(--ba-sp-xl); }
.ba-ob-sub { font-size: 15px; line-height: 1.6; color: var(--ba-muted); margin-bottom: var(--ba-sp-xl); }
.ba-ob-kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ba-muted); margin-bottom: var(--ba-sp-md); }
.ba-ob-label { font-size: 12px; font-weight: 700; color: var(--ba-muted); margin: var(--ba-sp-xl) 0 var(--ba-sp-md); }

/* Bax speech bubble */
.ba-bax { display: flex; align-items: flex-start; gap: var(--ba-sp-md); margin-bottom: var(--ba-sp-xl); }
.ba-bax .ba-mascot { flex-shrink: 0; }
.ba-bubble {
  position: relative; background: var(--ba-surface);
  border: 1px solid var(--ba-card-border); border-radius: 14px;
  padding: var(--ba-sp-md) var(--ba-sp-lg);
  font-size: 13.5px; line-height: 1.55; color: var(--ba-muted2);
}
.ba-bubble::before {
  content: ''; position: absolute; left: -6px; top: 16px;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--ba-surface);
  border-left: 1px solid var(--ba-card-border); border-bottom: 1px solid var(--ba-card-border);
}
.ba-ob.dark .ba-bubble { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.72); }
.ba-ob.dark .ba-bubble::before { background: #231A3B; border-color: rgba(255,255,255,0.10); }

/* Stat cards (step 1) */
.ba-ob-stats { display: flex; flex-direction: column; gap: var(--ba-sp-md); margin-top: var(--ba-sp-xl); }
.ba-ob-stat {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--ba-r-xl); padding: var(--ba-sp-lg);
  animation: ba-in 0.4s ease both;
}
.ba-ob-stat-num {
  display: block; font-family: var(--ba-font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -0.6px;
  color: var(--ba-primary); margin-bottom: 6px;
}
.ba-ob-stat-label { display: block; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.8); }
.ba-ob-stat-src { display: block; font-size: 11px; color: rgba(255,255,255,0.38); margin-top: 6px; }

/* Radio-style option rows */
.ba-ob-options { display: flex; flex-direction: column; gap: var(--ba-sp-md); }
.ba-ob-option {
  display: flex; align-items: center; gap: var(--ba-sp-lg); width: 100%; text-align: left;
  background: var(--ba-surface); border: 1.5px solid var(--ba-card-border);
  border-radius: var(--ba-r-lg); padding: var(--ba-sp-lg);
  cursor: pointer; font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.ba-ob-option:hover { border-color: var(--ba-muted); }
.ba-ob-option.on { border-color: var(--ba-primary); background: var(--ba-primary-tint); }
.ba-ob-radio { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ba-dashed); position: relative; transition: border-color 0.15s; }
.ba-ob-option.on .ba-ob-radio { border-color: var(--ba-primary); }
.ba-ob-option.on .ba-ob-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ba-primary); }
.ba-ob-option-text { display: flex; flex-direction: column; gap: 2px; }
.ba-ob-option-text strong { font-size: 15.5px; font-weight: 700; color: var(--ba-ink); }
.ba-ob-option-text em { font-style: normal; font-size: 12.5px; color: var(--ba-muted); }

/* Topic chips */
.ba-ob-chips { display: flex; flex-wrap: wrap; gap: var(--ba-sp-sm); }
.ba-ob-chip {
  background: var(--ba-surface); border: 1.5px solid var(--ba-card-border);
  border-radius: 999px; padding: 10px 16px;
  color: var(--ba-muted2); font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ba-ob-chip:hover { border-color: var(--ba-muted); }
.ba-ob-chip.on { border-color: var(--ba-primary); background: var(--ba-primary-tint); color: var(--ba-ink); }

/* Quiz verdict */
.ba-ob-verdict { font-family: var(--ba-font-display); font-size: 26px; font-weight: 700; margin: var(--ba-sp-md) 0 6px; letter-spacing: -0.4px; }
.ba-ob-verdict.right { color: var(--ba-success); }
.ba-ob-verdict.wrong { color: #F43F5E; }
.ba-ob-bax-line { font-size: 15px; color: var(--ba-muted2); margin-bottom: var(--ba-sp-md); }
.ba-ob-dots { display: flex; gap: var(--ba-sp-md); justify-content: center; margin-top: var(--ba-sp-xl); }
.ba-ob-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.ba-ob-dot.right { background: var(--ba-success-bg); color: var(--ba-success); }
.ba-ob-dot.wrong { background: var(--ba-danger-bg); color: #F43F5E; }

/* Identity */
.ba-ob-input {
  width: 100%; background: var(--ba-surface);
  border: 1.5px solid var(--ba-card-border); border-radius: var(--ba-r-lg);
  padding: var(--ba-sp-lg); color: var(--ba-ink);
  font-family: var(--ba-font-display); font-size: 18px; font-weight: 700;
}
.ba-ob-input:focus { outline: none; border-color: var(--ba-primary); }
.ba-ob-input.err { border-color: #F43F5E; }
.ba-ob-err { font-size: 12.5px; color: #F43F5E; min-height: 18px; margin-top: 6px; }

.ba-ob-avatars { display: flex; flex-wrap: wrap; gap: var(--ba-sp-md); }
.ba-ob-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ac); border: 2.5px solid transparent;
  cursor: pointer; padding: 0; overflow: hidden; display: grid; place-items: center;
  transition: border-color 0.15s, transform 0.12s;
}
.ba-ob-avatar img { width: 44px; height: 44px; object-fit: contain; }
.ba-ob-avatar:hover { transform: scale(1.05); }
.ba-ob-avatar.on { border-color: var(--ba-ink); }

/* Account step */
.ba-ob-authbox { margin-top: var(--ba-sp-xl); }
.ba-ob-why { list-style: none; padding: 0; margin: var(--ba-sp-xl) 0 0; }
.ba-ob-why li { position: relative; padding-left: 24px; margin-bottom: var(--ba-sp-md); font-size: 13.5px; line-height: 1.5; color: var(--ba-muted2); }
.ba-ob-why li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--ba-success); font-weight: 700; font-size: 13px; }
.ba-oauth-mark { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   PROFILE
   ============================================================ */
.ba-identity { display: flex; align-items: center; gap: var(--ba-sp-lg); }
.ba-identity-disc {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ac, var(--ba-deep)); flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
}
.ba-identity-disc img { width: 50px; height: 50px; object-fit: contain; }
.ba-ladder { display: flex; justify-content: space-between; padding-block: var(--ba-sp-md); border-bottom: 1px solid var(--ba-divider); font-size: 14px; color: var(--ba-muted); }
.ba-ladder:last-of-type { border-bottom: none; }
.ba-ladder.got { color: var(--ba-muted2); }
.ba-ladder.on { color: var(--ba-ink); font-weight: 700; }
.ba-ladder-xp { font-variant-numeric: tabular-nums; }

.ba-goalpick, .ba-themepick { display: flex; gap: var(--ba-sp-md); }
.ba-goalopt, .ba-themeopt {
  flex: 1; background: var(--ba-bg); border: 1.5px solid var(--ba-card-border);
  border-radius: var(--ba-r-md); padding: var(--ba-sp-lg) var(--ba-sp-sm);
  color: var(--ba-muted2); font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ba-goalopt:hover, .ba-themeopt:hover { border-color: var(--ba-muted); }
.ba-goalopt.on, .ba-themeopt.on { border-color: var(--ba-primary); background: var(--ba-primary-tint); color: var(--ba-ink); }

/* ── Account prompt ─────────────────────────────────────── */
.ba-savebox {
  border: 1px solid color-mix(in srgb, var(--ba-primary) 40%, transparent);
  background: var(--ba-primary-tint);
  border-radius: var(--ba-r-xl); padding: var(--ba-sp-lg);
  margin-top: var(--ba-sp-xl); text-align: left;
}
.ba-savebox-title { font-family: var(--ba-font-display); font-size: 16px; font-weight: 700; color: var(--ba-ink); margin-bottom: var(--ba-sp-sm); }

/* ── Buttons ────────────────────────────────────────────── */
.ba-btn {
  display: block; width: 100%; text-align: center;
  border: none; border-radius: var(--ba-r-lg);
  padding: var(--ba-sp-lg);
  font-family: var(--ba-font-sans); font-size: 15px; font-weight: 700;
  cursor: pointer; text-decoration: none; margin-top: var(--ba-sp-sm);
  transition: opacity 0.15s, background 0.15s, transform 0.1s;
}
.ba-btn:active:not(:disabled) { transform: scale(0.99); }
.ba-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ba-btn-primary { background: var(--ba-primary); color: #fff; box-shadow: 0 10px 18px -10px var(--ba-primary); }
.ba-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.ba-btn-go { background: var(--ba-success); color: #04120A; }
.ba-btn-oauth { background: var(--ba-ink); color: var(--ba-bg); display: flex; align-items: center; justify-content: center; gap: 10px; }
.ba-btn-oauth:hover:not(:disabled) { filter: brightness(0.94); }
.ba-btn-ghost { background: transparent; border: 1px solid var(--ba-card-border); color: var(--ba-muted2); }
.ba-btn-ghost:hover { border-color: var(--ba-muted); color: var(--ba-ink); }
.ba-btn-gold { background: var(--ba-gold); color: #1A1403; box-shadow: 0 10px 18px -10px var(--ba-gold); }
.ba-btn-gold:hover:not(:disabled) { filter: brightness(1.07); }

/* ── App CTA ────────────────────────────────────────────── */
.ba-appcta { text-align: center; border-top: 1px solid var(--ba-divider); padding-top: var(--ba-sp-xl); margin-top: var(--ba-sp-xl); }
.ba-appcta p { font-size: 14px; line-height: 1.6; color: var(--ba-muted); margin-bottom: var(--ba-sp-lg); }

/* ── Lesson diagrams ────────────────────────────────────── */
.ba-visual {
  background: var(--ba-bg); border: 1px solid var(--ba-divider);
  border-radius: var(--ba-r-lg); padding: var(--ba-sp-lg); margin-bottom: var(--ba-sp-xl);
}
.ba-visual svg { display: block; width: 100%; height: auto; max-height: 190px; }

/* ── Paywall ────────────────────────────────────────────── */
.ba-paywall { border-color: color-mix(in srgb, var(--ba-gold) 30%, transparent); }
.ba-eyebrow.gold { color: var(--ba-gold); }
.ba-perk-head { font-family: var(--ba-font-display); font-size: 13px; font-weight: 700; color: var(--ba-ink); margin-top: var(--ba-sp-xl); }
.ba-perks { list-style: none; margin: var(--ba-sp-md) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ba-sp-md); }
.ba-perks li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; color: var(--ba-muted2); }
.ba-perks li::before { content: '✓'; position: absolute; left: 0; top: 0; font-size: 13px; font-weight: 700; color: var(--ba-gold); }
.ba-pro-count { margin: var(--ba-sp-xl) 0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ba-muted); }

.ba-prices { display: flex; gap: var(--ba-sp-md); margin-bottom: var(--ba-sp-xl); }
.ba-price {
  flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: var(--ba-bg); border: 1.5px solid var(--ba-card-border);
  border-radius: var(--ba-r-lg); padding: var(--ba-sp-lg); font-family: inherit;
}
.ba-prices.pick .ba-price { cursor: pointer; }
.ba-prices.pick .ba-price:hover { border-color: var(--ba-muted); }
.ba-price span { font-size: 12px; font-weight: 700; color: var(--ba-muted); }
.ba-price strong { font-family: var(--ba-font-display); font-size: 22px; font-weight: 700; color: var(--ba-ink); font-variant-numeric: tabular-nums; }
.ba-price em { font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--ba-muted); }
.ba-price.best { border-color: color-mix(in srgb, var(--ba-gold) 55%, transparent); background: color-mix(in srgb, var(--ba-gold) 12%, transparent); }
.ba-price.best span, .ba-price.best em { color: var(--ba-gold); }

.ba-fineprint { font-size: 12px; line-height: 1.6; color: var(--ba-muted); margin-top: var(--ba-sp-lg); }
.ba-fineprint a { color: var(--ba-muted2); }
.ba-paywall-err {
  font-size: 13px; line-height: 1.5; color: #F43F5E;
  border: 1px solid rgba(244,63,94,0.3); background: var(--ba-danger-bg);
  border-radius: var(--ba-r-md); padding: var(--ba-sp-md) var(--ba-sp-lg); margin-bottom: var(--ba-sp-lg);
}
.ba-paywall-err[hidden] { display: none; }

@media (max-width: 430px) {
  .ba-prices { flex-direction: column; }
  .ba-done-stats { gap: 6px; }
  .ba-stat-v { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .ba-enter > *, .ba-stagger > *, .ba-ob-stat, .ba-bullets li,
  .ba-done .ba-mascot, .ba-ex-head, .ba-hd-disc img { animation: none; }
  .ba-tc-track { transition: none; }
}

/* ── Shared site nav, themed ────────────────────────────── */
/* The nav is marketing chrome built on /styles.css's own tokens, which are
   dark-only. In light mode it would sit as a black bar above a lavender app,
   so it follows the app palette on this page. */
.nav { background: color-mix(in srgb, var(--ba-bg) 86%, transparent); border-bottom-color: var(--ba-divider); }
.nav-logo { color: var(--ba-ink); }
.nav-links a { color: var(--ba-muted); }
.nav-links a:hover { color: var(--ba-ink); }
.nav-toggle span { background: var(--ba-ink); }

/* ============================================================
   REWARDS, SCENARIO, REVIEW, TROPHY CASE
   ============================================================ */

.ba-ion { display: block; }

/* ── Badge / stock celebration ──────────────────────────── */
.ba-celebrate {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--ba-sp-lg);
  padding: var(--ba-sp-xxl) var(--ba-sp-lg);
  max-width: 440px; margin-inline: auto;
}
.ba-celebrate-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ba-muted);
}
.ba-celebrate-disc {
  width: 112px; height: 112px; border-radius: 50%;
  background: color-mix(in srgb, var(--bc) 18%, transparent);
  display: grid; place-items: center;
  animation: ba-pop 0.5s cubic-bezier(.2,1.5,.4,1) both;
}
.ba-celebrate-title {
  font-family: var(--ba-font-display);
  font-size: var(--ba-type-h1-size); line-height: var(--ba-type-h1-lh);
  letter-spacing: var(--ba-type-h1-ls);
  font-weight: 700; color: var(--ba-ink);
}
.ba-celebrate-desc { font-size: 15px; line-height: 1.6; color: var(--ba-muted2); max-width: 32ch; }
.ba-celebrate-xp {
  font-family: var(--ba-font-display); font-size: 14px; font-weight: 700;
  color: var(--bc); background: color-mix(in srgb, var(--bc) 14%, transparent);
  border-radius: 999px; padding: 7px 16px;
}
.ba-celebrate-btn { background: var(--bc); color: #fff; max-width: 280px; margin-top: var(--ba-sp-lg); }

/* ── Promotion ──────────────────────────────────────────── */
.ba-promo-screen {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--ba-sp-md);
  padding: var(--ba-sp-xxl) var(--ba-sp-lg);
  max-width: 440px; margin-inline: auto;
}
/* Full-bleed canvas behind a width-constrained column, so the gradient reaches
   the edges instead of ending with the content. */
.ba-promo-screen::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(120% 80% at 50% 0%, #2A1A52 0%, var(--ba-bg) 70%);
}
.ba-promo-mascot { animation: ba-pop 0.5s cubic-bezier(.2,1.4,.4,1) both; }
.ba-promo-label { font-size: 13px; color: var(--ba-muted); }
.ba-promo-title {
  font-family: var(--ba-font-display);
  font-size: var(--ba-type-display-size); line-height: var(--ba-type-display-lh);
  letter-spacing: var(--ba-type-display-ls);
  font-weight: 700; color: var(--ba-gold);
}
.ba-promo-from { font-size: 13px; color: var(--ba-muted); }
.ba-promo-from strong { color: var(--ba-ink); }
.ba-promo-blurb { font-size: 14px; line-height: 1.6; color: var(--ba-muted2); max-width: 34ch; }
.ba-promo-screen .ba-done-stats { width: 100%; margin-block: var(--ba-sp-lg); }
.ba-promo-screen .ba-btn { width: 100%; max-width: 320px; }

/* ── Scenario ───────────────────────────────────────────── */
.ba-cat {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ba-primary); background: var(--ba-primary-tint);
  border-radius: 999px; padding: 4px 10px;
}
.ba-ex-prompt {
  font-size: 15px; line-height: 1.55; color: var(--ba-ink);
  background: var(--ba-surface); border: 1px solid var(--ba-card-border);
  border-radius: var(--ba-r-lg); padding: var(--ba-sp-lg); margin-bottom: var(--ba-sp-lg);
}

/* ── Review queue ───────────────────────────────────────── */
.ba-lesson-track { display: block; font-style: normal; font-size: 12px; color: var(--ba-muted); margin-top: 2px; }
.ba-lesson .ba-lesson-mark { display: grid; place-items: center; color: var(--ba-gold); }

/* ── Trophy case ────────────────────────────────────────── */
.ba-badges {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--ba-sp-md); margin-bottom: var(--ba-sp-xl);
}
.ba-badge {
  background: var(--ba-surface); border: 1px solid var(--ba-card-border);
  border-radius: var(--ba-r-lg); padding: var(--ba-sp-lg);
  text-align: center; opacity: 0.45;
}
.ba-badge.got { opacity: 1; border-color: color-mix(in srgb, var(--bc) 40%, transparent); }
.ba-badge-disc {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--ba-sp-md);
  display: grid; place-items: center;
  background: var(--ba-day-empty-bg); color: var(--ba-muted);
}
.ba-badge.got .ba-badge-disc { background: color-mix(in srgb, var(--bc) 16%, transparent); }
.ba-badge-title {
  display: block; font-family: var(--ba-font-display);
  font-size: 14px; font-weight: 700; color: var(--ba-ink); margin-bottom: 4px;
}
.ba-badge-desc { display: block; font-size: 11.5px; line-height: 1.45; color: var(--ba-muted); }

/* ── Stock chip on a track header ───────────────────────── */
.ba-stockchip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ba-muted); background: var(--ba-day-empty-bg);
  border-radius: 999px; padding: 3px 8px;
}
.ba-stockchip.got { color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }

/* ── Row link (Profile -> trophy case) ──────────────────── */
.ba-rowlink { display: flex; align-items: center; gap: var(--ba-sp-lg); text-decoration: none; }
.ba-rowlink-icon {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ba-gold) 14%, transparent);
}
.ba-rowlink-text { flex: 1; min-width: 0; }
.ba-rowlink-text strong { display: block; font-family: var(--ba-font-display); font-size: 15px; font-weight: 700; color: var(--ba-ink); }
.ba-rowlink-text em { display: block; font-style: normal; font-size: 12.5px; color: var(--ba-muted); margin-top: 2px; }
.ba-rowlink-chev { color: var(--ba-muted); font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .ba-celebrate-disc, .ba-promo-mascot { animation: none; }
}

/* ── Lesson illustrations (rendered from the app's own components) ──────── */
/* The artwork's palette (src/components/illustrations/palette.ts) puts its
   labels in near-black ink "on canvas", i.e. it is drawn for a LIGHT
   background. So the tile stays light in both themes rather than following
   --ba-surface — on the dark canvas those labels would vanish. */
.ba-art {
  background: #F1EFFE;
  border-radius: var(--ba-r-lg);
  padding: var(--ba-sp-lg);
  margin-bottom: var(--ba-sp-xl);
  display: grid; place-items: center;
}
.ba-art svg { display: block; width: 100%; max-width: 260px; height: auto; }
/* The hero keeps the light tile for the same reason — its labels sit on the
   canvas too, so a transparent hero would lose them on the dark theme. */
.ba-art.hero { padding: var(--ba-sp-xl); }
.ba-art.hero svg { max-width: 240px; }