/* ============================================================
   TALA LEARNS — Complete Stylesheet
   Mobile-first, bilingual (EN + AR), Islamic-inspired palette
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --primary:        #1a7a40;
  --primary-dark:   #0d5c2e;
  --primary-light:  #4caf78;
  --primary-bg:     #e8f5ee;
  --gold:           #c8a84b;
  --gold-light:     #f5e6a3;
  --gold-dark:      #9a7a2e;

  --english:        #7b1fa2;
  --english-light:  #f3e5f5;
  --english-dark:   #4a0072;
  --math:           #1565c0;
  --math-light:     #e3f2fd;
  --math-dark:      #003c8f;
  --science:        #00695c;
  --science-light:  #e0f2f1;
  --science-dark:   #003d33;

  --bg:             #f4f7f4;
  --card:           #ffffff;
  --border:         #e0e8e0;
  --text:           #1a2e1a;
  --text-muted:     #5a6e5a;
  --text-light:     #9aaa9a;

  --success:        #2e7d32;
  --success-bg:     #e8f5e9;
  --error:          #c62828;
  --error-bg:       #ffebee;
  --warning:        #e65100;
  --warning-bg:     #fff3e0;
  --info:           #01579b;
  --info-bg:        #e1f5fe;

  --radius-sm:      8px;
  --radius-md:      14px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-full:    9999px;

  --shadow-sm:      0 2px 8px rgba(0,0,0,.07);
  --shadow-md:      0 4px 20px rgba(0,0,0,.10);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.14);

  --nav-h:          70px;
  --header-h:       60px;
  --transition:     all .25s ease;
  --font:           'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }
img { max-width: 100%; }
a { color: var(--primary); text-decoration: none; }

/* ── App Shell ──────────────────────────────────────────────── */
#app { position: relative; min-height: 100vh; max-width: 540px; margin: 0 auto; }
#screen-container { min-height: 100vh; padding-bottom: calc(var(--nav-h) + 16px); }

/* ── Bottom Navigation ──────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 540px;
  height: var(--nav-h);
  background: var(--card);
  border-top: 1px solid var(--border);
  display: flex;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  z-index: 100;
}
.bottom-nav.hidden { display: none; }
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; padding: 8px 4px;
  color: var(--text-light); transition: var(--transition);
}
.nav-item.active { color: var(--primary); }
.nav-icon { font-size: 1.5rem; line-height: 1; }
.nav-label { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.nav-label-ar { font-size: .6rem; color: var(--text-light); }
.nav-item.active .nav-label { color: var(--primary); }
.nav-item.active .nav-icon { transform: translateY(-2px); }

/* ── Screen Base ────────────────────────────────────────────── */
.screen { min-height: 100vh; }
.screen-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--card);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  min-height: var(--header-h);
}
.btn-back {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  background: var(--bg); display: flex; align-items: center;
  justify-content: center; font-size: 1.2rem; flex-shrink: 0;
  transition: var(--transition);
}
.btn-back:hover { background: var(--primary-bg); }
.screen-header-title { flex: 1; }
.screen-header-title h2 { font-size: 1.1rem; font-weight: 700; }
.screen-header-title p  { font-size: .8rem; color: var(--text-muted); }

/* ── Utility ─────────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.justify-center { justify-content: center; }
.gap-sm { gap: 8px; }
.gap-md { gap: 14px; }
.gap-lg { gap: 20px; }
.mt-sm  { margin-top: 8px; }
.mt-md  { margin-top: 14px; }
.mt-lg  { margin-top: 20px; }
.p-md   { padding: 14px; }
.p-lg   { padding: 20px; }
.bold   { font-weight: 700; }
.w-full { width: 100%; }
.ar     { color: var(--text-muted); font-size: .88em; display: block; margin-top: 2px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius-full);
  font-size: 1rem; font-weight: 700;
  transition: var(--transition); cursor: pointer; border: none;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(26,122,64,.35); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-gold    { background: var(--gold); color: #fff; box-shadow: 0 4px 14px rgba(200,168,75,.35); }
.btn-gold:hover { background: var(--gold-dark); }
.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-outline:hover { background: var(--primary-bg); }
.btn-ghost   { background: var(--bg); color: var(--text); }
.btn-ghost:hover { background: var(--border); }
.btn-sm { padding: 8px 16px; font-size: .875rem; }
.btn-lg { padding: 16px 32px; font-size: 1.1rem; }
.btn-block { width: 100%; }
.btn-danger { background: var(--error); color: #fff; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.card-body { padding: 16px; }
.card-hover { transition: var(--transition); }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ── Form elements ───────────────────────────────────────────── */
.input {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-md);
  border: 2px solid var(--border); font-size: 1rem;
  background: var(--card); color: var(--text);
  transition: var(--transition); outline: none;
}
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,122,64,.15); }
.label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }

/* ── Progress Bar ────────────────────────────────────────────── */
.progress-bar {
  background: var(--border); border-radius: var(--radius-full);
  overflow: hidden; height: 8px;
}
.progress-bar-fill {
  height: 100%; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  transition: width .6s ease;
}
.progress-bar-gold .progress-bar-fill {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
}

/* ── Stars ───────────────────────────────────────────────────── */
.stars { display: flex; gap: 4px; font-size: 1.4rem; }
.star-empty { opacity: .25; }

/* ── Badge chip ──────────────────────────────────────────────── */
.badge-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-full);
  font-size: .8rem; font-weight: 700;
  background: var(--primary-bg); color: var(--primary);
}

/* ── Toast ───────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: calc(var(--nav-h) + 16px); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #222; color: #fff;
  padding: 12px 20px; border-radius: var(--radius-full);
  font-size: .9rem; z-index: 999; opacity: 0;
  transition: all .3s ease; pointer-events: none;
  max-width: 90%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ════════════════════════════════════════════════════════════════
   WELCOME SCREEN
   ════════════════════════════════════════════════════════════════ */
.welcome-screen {
  min-height: 100vh;
  background: linear-gradient(160deg, #0d5c2e 0%, #1a7a40 40%, #4caf78 100%);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 32px 24px; gap: 32px; text-align: center;
}
.welcome-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.welcome-logo-icon {
  width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255,255,255,.15); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; box-shadow: 0 8px 32px rgba(0,0,0,.2);
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.welcome-title    { font-size: 2.6rem; font-weight: 900; color: #fff; line-height: 1.1; }
.welcome-title-ar { font-size: 1.8rem; font-weight: 700; color: rgba(255,255,255,.85); }
.welcome-subtitle { font-size: 1rem; color: rgba(255,255,255,.75); max-width: 280px; }
.welcome-stars { display: flex; gap: 8px; font-size: 1.8rem; }
.welcome-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; }

/* ════════════════════════════════════════════════════════════════
   PROFILE SETUP
   ════════════════════════════════════════════════════════════════ */
.profile-screen {
  min-height: 100vh; padding: 32px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.profile-avatar-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  width: 100%;
}
.avatar-option {
  aspect-ratio: 1; border-radius: var(--radius-md);
  background: var(--bg); border: 3px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; cursor: pointer; transition: var(--transition);
}
.avatar-option.selected { border-color: var(--primary); background: var(--primary-bg); }
.avatar-option:hover { transform: scale(1.08); }

/* ════════════════════════════════════════════════════════════════
   DASHBOARD
   ════════════════════════════════════════════════════════════════ */
.dashboard-hero {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  padding: 20px 20px 28px;
  color: #fff;
}
.dashboard-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dashboard-avatar { font-size: 2.5rem; }
.dashboard-greeting h2 { font-size: 1.3rem; font-weight: 800; }
.dashboard-greeting p  { font-size: .85rem; opacity: .8; }
.dashboard-points {
  background: rgba(255,255,255,.2); border-radius: var(--radius-full);
  padding: 8px 14px; display: flex; align-items: center; gap: 6px;
  font-weight: 700;
}
.dashboard-streak-row { display: flex; gap: 10px; }
.streak-chip {
  background: rgba(255,255,255,.15); border-radius: var(--radius-full);
  padding: 6px 14px; font-size: .85rem; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.dashboard-content { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.section-title {
  font-size: 1.05rem; font-weight: 700; color: var(--text);
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.section-title .section-title-ar { font-size: .8rem; color: var(--text-muted); font-weight: 500; }

/* Subject cards on dashboard */
.subject-card-dashboard {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow-sm);
  cursor: pointer; transition: var(--transition);
  border-left: 5px solid transparent;
}
.subject-card-dashboard:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.subject-card-dashboard.english { border-left-color: var(--english); }
.subject-card-dashboard.math    { border-left-color: var(--math); }
.subject-card-dashboard.science { border-left-color: var(--science); }
.subject-card-icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; flex-shrink: 0;
}
.english .subject-card-icon { background: var(--english-light); }
.math    .subject-card-icon { background: var(--math-light); }
.science .subject-card-icon { background: var(--science-light); }
.subject-card-info { flex: 1; }
.subject-card-info h3 { font-size: 1rem; font-weight: 700; }
.subject-card-info .subject-name-ar { font-size: .8rem; color: var(--text-muted); }
.subject-card-info .subject-level { font-size: .78rem; color: var(--text-light); margin-top: 4px; }
.subject-card-arrow { color: var(--text-light); font-size: 1.2rem; }

/* Weekly plan strip */
.weekly-plan { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week-day {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border-radius: var(--radius-md);
  background: var(--card); border: 2px solid transparent;
}
.week-day.today { border-color: var(--primary); background: var(--primary-bg); }
.week-day.done  { background: var(--success-bg); }
.week-day-name  { font-size: .65rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.week-day-icon  { font-size: 1.2rem; }
.week-day-dot   { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

/* ════════════════════════════════════════════════════════════════
   SUBJECTS SCREEN
   ════════════════════════════════════════════════════════════════ */
.subjects-screen { padding: 16px; }
.subject-big-card {
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-md); cursor: pointer;
  transition: var(--transition); margin-bottom: 14px;
}
.subject-big-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.subject-big-card-header {
  padding: 24px; display: flex; align-items: center; gap: 16px;
  color: #fff;
}
.subject-big-icon { font-size: 3rem; }
.subject-big-title { font-size: 1.4rem; font-weight: 800; }
.subject-big-title-ar { font-size: 1rem; opacity: .85; }
.subject-big-card-body { background: var(--card); padding: 14px 16px; display: flex; gap: 8px; }
.level-pill {
  flex: 1; text-align: center; padding: 8px; border-radius: var(--radius-md);
  font-size: .75rem; font-weight: 700; cursor: pointer; transition: var(--transition);
}
.level-pill.done    { background: var(--success-bg); color: var(--success); }
.level-pill.active  { background: var(--primary-bg); color: var(--primary); }
.level-pill.locked  { background: var(--bg); color: var(--text-light); }
.level-pill-icon { font-size: 1rem; display: block; margin-bottom: 2px; }

/* ════════════════════════════════════════════════════════════════
   LEVEL / CHAPTERS SCREEN
   ════════════════════════════════════════════════════════════════ */
.level-header {
  padding: 20px 16px 24px;
  color: #fff;
  display: flex; flex-direction: column; gap: 12px;
}
.level-header-top { display: flex; align-items: center; gap: 12px; }
.level-header-icon { font-size: 2.5rem; }
.level-progress-row { display: flex; align-items: center; gap: 10px; }
.level-progress-row .progress-bar { flex: 1; height: 10px; }
.level-progress-pct { font-size: .85rem; font-weight: 700; white-space: nowrap; }
.chapters-list { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chapter-card {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 16px; display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition);
  border: 2px solid transparent;
}
.chapter-card:hover:not(.locked) { border-color: var(--primary); transform: translateX(3px); }
.chapter-card.locked { opacity: .55; cursor: not-allowed; }
.chapter-card.completed { border-color: var(--success); }
.chapter-num {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 800; flex-shrink: 0;
}
.chapter-num.done    { background: var(--success-bg); color: var(--success); }
.chapter-num.active  { background: var(--primary-bg); color: var(--primary); }
.chapter-num.locked  { background: var(--bg); color: var(--text-light); }
.chapter-info { flex: 1; }
.chapter-info h4 { font-size: 1rem; font-weight: 700; }
.chapter-info .chapter-ar   { font-size: .8rem; color: var(--text-muted); }
.chapter-info .chapter-meta { font-size: .75rem; color: var(--text-light); margin-top: 4px; }
.chapter-score { text-align: right; }
.chapter-score .score-pct { font-size: 1rem; font-weight: 800; color: var(--success); }
.chapter-score .score-stars { font-size: .9rem; }
.final-exam-card {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border-radius: var(--radius-lg); padding: 18px; margin: 0 16px 16px;
  display: flex; align-items: center; gap: 14px; color: #fff;
  cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-md);
}
.final-exam-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.final-exam-card.locked { opacity: .5; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════
   LESSON SCREEN
   ════════════════════════════════════════════════════════════════ */
.lesson-screen { background: var(--card); }
.lesson-hero {
  padding: 20px 16px; color: #fff;
  display: flex; flex-direction: column; gap: 8px;
}
.lesson-hero h1 { font-size: 1.4rem; font-weight: 800; }
.lesson-hero .hero-ar { opacity: .85; font-size: 1rem; }
.lesson-objectives {
  background: var(--primary-bg); border-radius: var(--radius-lg);
  padding: 14px 16px; margin: 14px 16px 0;
  border-left: 4px solid var(--primary);
}
.lesson-objectives h4 { font-weight: 700; margin-bottom: 8px; font-size: .9rem; color: var(--primary); }
.lesson-objectives ul { padding-left: 18px; }
.lesson-objectives li { font-size: .9rem; margin-bottom: 4px; color: var(--text); }
.lesson-body { padding: 16px; }
.vocab-section {
  background: var(--gold-light); border-radius: var(--radius-lg);
  padding: 14px; margin-bottom: 16px;
}
.vocab-section h4 { font-weight: 700; color: var(--gold-dark); margin-bottom: 10px; }
.vocab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vocab-item {
  background: #fff; border-radius: var(--radius-md);
  padding: 10px; border-left: 3px solid var(--gold);
}
.vocab-en  { font-weight: 700; font-size: .95rem; }
.vocab-ar  { color: var(--text-muted); font-size: .85rem; }
.vocab-pron{ font-size: .75rem; color: var(--text-light); font-style: italic; }
.lesson-content h3 { font-size: 1.1rem; font-weight: 700; margin: 18px 0 8px; color: var(--primary); }
.lesson-content h4 { font-size: 1rem; font-weight: 700; margin: 14px 0 6px; }
.lesson-content p  { line-height: 1.7; margin-bottom: 10px; font-size: .95rem; }
.lesson-content ul, .lesson-content ol { padding-left: 20px; margin-bottom: 10px; }
.lesson-content li { line-height: 1.7; font-size: .95rem; margin-bottom: 3px; }
.lesson-content strong { color: var(--primary-dark); }
.lesson-content table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .88rem; }
.lesson-content th { background: var(--primary); color: #fff; padding: 8px; text-align: left; }
.lesson-content td { padding: 8px; border-bottom: 1px solid var(--border); }
.lesson-content tr:nth-child(even) td { background: var(--bg); }
.tip-box {
  background: var(--info-bg); border-left: 4px solid var(--info);
  border-radius: var(--radius-md); padding: 12px 14px; margin: 12px 0;
}
.tip-box .tip-label { font-weight: 700; color: var(--info); font-size: .85rem; margin-bottom: 4px; }
.example-box {
  background: var(--success-bg); border-radius: var(--radius-md);
  padding: 12px 14px; margin: 12px 0; border-left: 4px solid var(--success);
}
.example-box .ex-label { font-weight: 700; color: var(--success); font-size: .85rem; margin-bottom: 6px; }
.warning-box {
  background: var(--warning-bg); border-left: 4px solid var(--warning);
  border-radius: var(--radius-md); padding: 12px 14px; margin: 12px 0;
}
.lesson-footer { padding: 16px; }
.lesson-footer .lesson-nav { display: flex; gap: 10px; }

/* ════════════════════════════════════════════════════════════════
   CARD-BASED LESSONS  (with video + citations)
   ════════════════════════════════════════════════════════════════ */
.lesson-cards-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f4f7f4 0%, #eaf1ea 100%);
}
.lc-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--card);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.lc-header .btn-back { width: 36px; height: 36px; font-size: 1.1rem; }
.lc-header-title { flex: 1; min-width: 0; }
.lc-header-title h2 { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-header-title p  { font-size: .75rem; color: var(--text-muted); }
.lc-progress-strip {
  height: 4px; background: var(--border); position: relative;
}
.lc-progress-strip-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  transition: width .35s ease;
  border-radius: 0 4px 4px 0;
}

.lc-card-container {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 14px;
}
.lc-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 22px 20px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: cardSlide .35s ease;
}
@keyframes cardSlide {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lc-card-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--primary);
  background: var(--primary-bg);
  padding: 4px 10px; border-radius: var(--radius-full);
  align-self: flex-start;
}
.lc-card-icon { font-size: 3rem; line-height: 1; }
.lc-card-title { font-size: 1.4rem; font-weight: 800; color: var(--text); line-height: 1.25; }
.lc-card-title-ar { font-size: 1rem; color: var(--text-muted); margin-top: 2px; }
.lc-card-body { font-size: 1rem; line-height: 1.65; color: var(--text); flex: 1; }
.lc-card-body p { margin-bottom: 10px; }
.lc-card-body ul, .lc-card-body ol { padding-left: 22px; margin-bottom: 10px; }
.lc-card-body li { margin-bottom: 5px; line-height: 1.55; }
.lc-card-body strong { color: var(--primary-dark); }
.lc-card-body table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .85rem; }
.lc-card-body th { background: var(--primary); color:#fff; padding: 6px; text-align: left; font-weight: 700; }
.lc-card-body td { padding: 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.lc-card-body tr:nth-child(even) td { background: var(--bg); }

.lc-keypoint {
  background: linear-gradient(135deg, var(--gold-light), #fff);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  border-left: 4px solid var(--gold);
  font-size: .9rem;
  color: var(--gold-dark);
  font-weight: 600;
}
.lc-callout {
  background: var(--info-bg);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: .9rem;
}
.lc-callout-ar { color: var(--text-muted); font-size: .85rem; margin-top: 4px; direction: rtl; text-align: right; }

/* Vocab card */
.lc-vocab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lc-vocab-item {
  background: linear-gradient(135deg, #fff, var(--gold-light));
  border-radius: var(--radius-md);
  padding: 10px;
  border: 1px solid var(--gold);
}
.lc-vocab-en   { font-weight: 800; font-size: .95rem; color: var(--text); }
.lc-vocab-ar   { color: var(--gold-dark); font-size: .85rem; margin-top: 2px; }
.lc-vocab-pron { font-size: .7rem; color: var(--text-light); font-style: italic; margin-top: 2px; }

/* Video card */
.lc-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.lc-video-wrapper iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.lc-video-caption {
  font-size: .85rem; color: var(--text-muted); text-align: center; margin-top: 8px;
}

/* Saudi context card */
.lc-saudi {
  background: linear-gradient(135deg, var(--primary-bg), #fff);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 14px;
}
.lc-saudi-flag { font-size: 1.5rem; margin-bottom: 6px; }

/* Summary card */
.lc-summary-points {
  display: flex; flex-direction: column; gap: 10px;
}
.lc-summary-points li {
  background: var(--bg);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary);
  list-style: none;
}

/* Citation card */
.lc-citations { display: flex; flex-direction: column; gap: 10px; }
.lc-citation {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex; gap: 10px; align-items: flex-start;
  text-decoration: none;
  color: var(--text);
  transition: var(--transition);
}
.lc-citation:hover { border-color: var(--primary); background: var(--primary-bg); }
.lc-citation-icon { font-size: 1.5rem; flex-shrink: 0; }
.lc-citation-info { flex: 1; min-width: 0; }
.lc-citation-title { font-weight: 700; font-size: .9rem; color: var(--primary-dark); }
.lc-citation-note  { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
.lc-citation-pages { font-size: .75rem; color: var(--text-light); margin-top: 2px; }
.lc-citation-open  { color: var(--primary); font-size: .85rem; font-weight: 700; flex-shrink: 0; }

/* Card footer / navigation */
.lc-footer {
  padding: 14px 16px;
  background: var(--card);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 -2px 12px rgba(0,0,0,.05);
}
.lc-dots { display: flex; justify-content: center; gap: 6px; }
.lc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border);
  transition: var(--transition);
}
.lc-dot.active { width: 24px; border-radius: var(--radius-full); background: var(--primary); }
.lc-dot.done   { background: var(--success); }
.lc-nav-buttons {
  display: flex; gap: 10px;
}
.lc-nav-buttons .btn { flex: 1; padding: 12px 14px; font-size: 1rem; }

/* Quiz CTA card */
.lc-quiz-cta {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 18px;
  text-align: center;
}
.lc-quiz-cta-icon { font-size: 3rem; margin-bottom: 8px; }
.lc-quiz-cta h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 4px; }
.lc-quiz-cta p { opacity: .9; font-size: .9rem; }

/* ── Step-by-step worked example card ─────────────────────────── */
.lc-steps-problem {
  background: var(--info-bg);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: .95rem;
  line-height: 1.6;
}
.lc-steps-problem strong { color: var(--info); }
.lc-step {
  display: flex; gap: 12px;
  margin-top: 14px;
  animation: stepIn .35s ease;
}
@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lc-step-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
}
.lc-step.is-answer .lc-step-num { background: var(--success); }
.lc-step-content { flex: 1; min-width: 0; }
.lc-step-label {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--primary); margin-bottom: 3px;
}
.lc-step.is-answer .lc-step-label { color: var(--success); }
.lc-step-text { font-size: .95rem; line-height: 1.55; }
.lc-step-text strong { color: var(--primary-dark); }
.lc-step-visual { margin-top: 8px; }
.lc-steps-btn-wrap { margin-top: 16px; }

/* ── Interactive "Try It" card ────────────────────────────────── */
.lc-tryit-q {
  font-size: 1.15rem; font-weight: 700;
  background: var(--gold-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-align: center;
}
.lc-tryit-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lc-tryit-option {
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 1rem; text-align: left;
  transition: var(--transition);
}
.lc-tryit-option:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-bg); }
.lc-tryit-option.selected { border-color: var(--primary); background: var(--primary-bg); }
.lc-tryit-option.correct  { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.lc-tryit-option.wrong    { border-color: var(--error);   background: var(--error-bg);   color: var(--error); }
.lc-tryit-option:disabled { cursor: default; }
.lc-tryit-option .option-letter {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg); font-weight: 800; font-size: .85rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lc-tryit-option.correct .option-letter { background: var(--success); color: #fff; }
.lc-tryit-option.wrong   .option-letter { background: var(--error);   color: #fff; }
.lc-tryit-option.selected .option-letter { background: var(--primary); color: #fff; }
.lc-tryit-hint {
  background: var(--info-bg);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-md);
  padding: 10px 14px; margin-top: 10px;
  font-size: .9rem;
}
.lc-tryit-feedback {
  border-radius: var(--radius-md);
  padding: 12px 14px; margin-top: 10px;
  font-size: .92rem; line-height: 1.55;
}
.lc-tryit-feedback.correct { background: var(--success-bg); color: var(--success); }
.lc-tryit-feedback.wrong   { background: var(--error-bg);   color: var(--error); }
.lc-tryit-actions { display: flex; gap: 8px; margin-top: 12px; }
.lc-tryit-actions .btn { flex: 1; }

/* ── "Watch Out!" mistake card ────────────────────────────────── */
.lc-mistake-wrong, .lc-mistake-right {
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 10px 0;
}
.lc-mistake-wrong { background: var(--error-bg);   border-left: 4px solid var(--error); }
.lc-mistake-right { background: var(--success-bg); border-left: 4px solid var(--success); }
.lc-mistake-label { font-size: .8rem; font-weight: 800; margin-bottom: 6px; }
.lc-mistake-wrong .lc-mistake-label { color: var(--error); }
.lc-mistake-right .lc-mistake-label { color: var(--success); }
.lc-mistake-work { font-family: 'SF Mono', Monaco, monospace; font-size: 1rem; white-space: pre-wrap; }
.lc-mistake-why {
  background: var(--warning-bg);
  border-radius: var(--radius-md);
  padding: 10px 14px; font-size: .9rem; line-height: 1.55;
}
.lc-mistake-why strong { color: var(--warning); }

/* ── Visual aids: place-value chart, calc blocks, formula chips ── */
.lc-calc {
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 1.05rem; line-height: 1.6;
  white-space: pre; overflow-x: auto;
  margin: 8px 0;
}
.formula-chip {
  display: inline-block;
  background: var(--primary-bg);
  color: var(--primary-dark);
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 1.05em;
  margin: 2px 0;
}
.pv-chart {
  display: flex; gap: 2px; justify-content: center;
  margin: 12px 0; flex-wrap: wrap;
}
.pv-col { display: flex; flex-direction: column; min-width: 50px; }
.pv-head {
  font-size: .58rem; font-weight: 800; text-transform: uppercase;
  background: var(--primary); color: #fff;
  padding: 5px 2px; text-align: center; line-height: 1.1;
}
.pv-digit {
  font-size: 1.5rem; font-weight: 800; text-align: center;
  padding: 8px 2px; background: var(--primary-bg);
  border: 1px solid var(--border);
}
.pv-col.pv-point { min-width: 18px; }
.pv-col.pv-point .pv-head { background: transparent; }
.pv-col.pv-point .pv-digit { background: transparent; border: none; color: var(--primary); }
/* SVG diagram wrapper */
.lc-diagram {
  display: flex; justify-content: center;
  margin: 12px 0;
}
.lc-diagram svg { max-width: 100%; height: auto; }

/* ════════════════════════════════════════════════════════════════
   QUIZ SCREEN
   ════════════════════════════════════════════════════════════════ */
.quiz-screen { min-height: 100vh; display: flex; flex-direction: column; }
.quiz-header { padding: 16px; background: var(--card); border-bottom: 1px solid var(--border); }
.quiz-progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.quiz-progress-row .progress-bar { flex: 1; height: 8px; }
.quiz-q-count { font-size: .85rem; font-weight: 700; white-space: nowrap; }
.quiz-timer { font-size: .85rem; color: var(--text-muted); }
.quiz-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.quiz-q-card {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.quiz-q-number { font-size: .8rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.quiz-q-text { font-size: 1.1rem; font-weight: 600; line-height: 1.5; margin-bottom: 6px; }
.quiz-q-arabic { font-size: .9rem; color: var(--text-muted); direction: rtl; text-align: right; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  padding: 14px 16px; border-radius: var(--radius-md);
  border: 2px solid var(--border); background: var(--card);
  text-align: left; font-size: .95rem; cursor: pointer;
  transition: var(--transition); display: flex; align-items: center; gap: 12px;
}
.quiz-option:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-bg); }
.quiz-option.selected  { border-color: var(--primary); background: var(--primary-bg); }
.quiz-option.correct   { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.quiz-option.wrong     { border-color: var(--error);   background: var(--error-bg);   color: var(--error); }
.quiz-option:disabled  { cursor: default; }
.option-letter {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.quiz-option.correct .option-letter { background: var(--success); color: #fff; }
.quiz-option.wrong   .option-letter { background: var(--error);   color: #fff; }
.quiz-option.selected .option-letter { background: var(--primary); color: #fff; }
.quiz-feedback {
  border-radius: var(--radius-md); padding: 14px;
  display: flex; gap: 10px; align-items: flex-start;
  animation: slideIn .3s ease;
}
.quiz-feedback.correct { background: var(--success-bg); }
.quiz-feedback.wrong   { background: var(--error-bg); }
.quiz-feedback-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.quiz-feedback-text { font-size: .9rem; line-height: 1.5; }
.quiz-feedback-ar { font-size: .85rem; color: var(--text-muted); direction: rtl; text-align: right; margin-top: 4px; }
@keyframes slideIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
.quiz-next-btn { padding: 16px; }

/* ════════════════════════════════════════════════════════════════
   QUIZ RESULTS
   ════════════════════════════════════════════════════════════════ */
.results-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 32px 20px; gap: 20px; }
.results-trophy { font-size: 5rem; animation: bounce .6s ease infinite alternate; }
@keyframes bounce { from { transform: scale(1); } to { transform: scale(1.12); } }
.results-score-circle {
  width: 150px; height: 150px; border-radius: 50%;
  background: conic-gradient(var(--primary) 0deg, var(--primary) var(--score-deg, 0deg), var(--border) var(--score-deg, 0deg));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); position: relative;
}
.results-score-inner {
  width: 118px; height: 118px; border-radius: 50%;
  background: var(--card); display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.results-score-pct { font-size: 2rem; font-weight: 900; color: var(--primary); }
.results-score-label { font-size: .75rem; color: var(--text-muted); }
.results-message { text-align: center; }
.results-message h2 { font-size: 1.5rem; font-weight: 800; }
.results-message p  { color: var(--text-muted); font-size: .95rem; }
.results-stats {
  width: 100%; background: var(--card); border-radius: var(--radius-lg);
  padding: 16px; display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; box-shadow: var(--shadow-sm);
}
.results-stat { text-align: center; }
.results-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--primary); }
.results-stat-label { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.results-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; }

/* ════════════════════════════════════════════════════════════════
   PROGRESS SCREEN
   ════════════════════════════════════════════════════════════════ */
.progress-screen { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.progress-hero {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  border-radius: var(--radius-xl); padding: 20px; color: #fff;
  display: flex; justify-content: space-between; align-items: center;
}
.progress-hero-left h2 { font-size: 1.3rem; font-weight: 800; }
.progress-hero-left p  { opacity: .8; font-size: .85rem; margin-top: 2px; }
.progress-days { font-size: 2.5rem; font-weight: 900; }
.progress-days-label { font-size: .75rem; opacity: .8; text-align: center; }
.chart-card { background: var(--card); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.chart-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.chart-container { position: relative; height: 200px; }
.subject-progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.subject-progress-icon { font-size: 1.5rem; width: 36px; text-align: center; }
.subject-progress-info { flex: 1; }
.subject-progress-info h5 { font-size: .9rem; font-weight: 700; margin-bottom: 4px; }
.subject-progress-pct { font-size: .85rem; font-weight: 700; color: var(--primary); }

/* ════════════════════════════════════════════════════════════════
   ACHIEVEMENTS SCREEN
   ════════════════════════════════════════════════════════════════ */
.achievements-screen { padding: 16px; }
.achievements-header { text-align: center; padding: 16px 0 24px; }
.achievements-header .total-badges { font-size: 2rem; font-weight: 900; color: var(--primary); }
.achievements-header p { color: var(--text-muted); font-size: .9rem; }
.badges-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.badge-card {
  background: var(--card); border-radius: var(--radius-lg); padding: 16px;
  text-align: center; box-shadow: var(--shadow-sm);
  border: 2px solid transparent; transition: var(--transition);
}
.badge-card.earned { border-color: var(--gold); background: linear-gradient(135deg, #fff 70%, var(--gold-light)); }
.badge-card.locked { opacity: .45; }
.badge-icon { font-size: 2.5rem; margin-bottom: 8px; }
.badge-name { font-size: .9rem; font-weight: 700; margin-bottom: 4px; }
.badge-name-ar { font-size: .75rem; color: var(--text-muted); }
.badge-points { font-size: .8rem; color: var(--gold-dark); font-weight: 700; margin-top: 6px; }
.badge-earned-date { font-size: .7rem; color: var(--text-light); margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════
   DIAGNOSTIC SCREEN
   ════════════════════════════════════════════════════════════════ */
.diagnostic-screen { min-height: 100vh; display: flex; flex-direction: column; }
.diagnostic-intro {
  padding: 32px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  flex: 1; justify-content: center;
}
.diagnostic-intro .diag-icon { font-size: 5rem; }
.diagnostic-intro h2 { font-size: 1.6rem; font-weight: 800; }
.diagnostic-intro p { color: var(--text-muted); font-size: .95rem; max-width: 300px; line-height: 1.6; }

/* ════════════════════════════════════════════════════════════════
   REPORT SCREEN
   ════════════════════════════════════════════════════════════════ */
.report-screen { padding: 16px; }
.report-hero {
  background: linear-gradient(135deg, #1a2e1a, var(--primary));
  border-radius: var(--radius-xl); padding: 24px 20px; color: #fff;
  text-align: center; margin-bottom: 16px;
}
.report-hero h1 { font-size: 1.6rem; font-weight: 900; }
.report-section {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.report-section h3 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.strength-item, .weakness-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: var(--radius-md);
  margin-bottom: 8px; font-size: .9rem;
}
.strength-item { background: var(--success-bg); color: var(--success); }
.weakness-item { background: var(--error-bg);   color: var(--error); }
.rec-item {
  padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--info-bg); color: var(--info);
  margin-bottom: 8px; font-size: .9rem;
  border-left: 3px solid var(--info);
}

/* ════════════════════════════════════════════════════════════════
   BADGE POPUP
   ════════════════════════════════════════════════════════════════ */
.badge-popup {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.badge-popup.hidden { display: none; }
.badge-popup-inner {
  background: var(--card); border-radius: var(--radius-xl);
  padding: 32px 24px; text-align: center; max-width: 300px; width: 100%;
  box-shadow: var(--shadow-lg);
  animation: popIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.badge-popup-sparkle { font-size: 2rem; margin-bottom: 8px; animation: spin 2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.badge-popup-icon { font-size: 4rem; margin: 10px 0; }
.badge-popup-title { font-size: 1.4rem; font-weight: 900; color: var(--primary); }
.badge-popup-points {
  background: var(--gold-light); color: var(--gold-dark);
  border-radius: var(--radius-full); padding: 6px 16px;
  font-weight: 700; display: inline-block; margin-top: 10px;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  .vocab-grid { grid-template-columns: 1fr 1fr 1fr; }
  .badges-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 640px) {
  .dashboard-hero { padding: 24px 24px 32px; }
  .dashboard-content { padding: 20px; }
}

/* ════════════════════════════════════════════════════════════════
   ANIMATIONS & STATES
   ════════════════════════════════════════════════════════════════ */
.pulse { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }
.shake { animation: shake .4s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.fade-in { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.locked-overlay { position: relative; }
.locked-overlay::after {
  content: '🔒'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.75); border-radius: inherit;
  font-size: 2rem; backdrop-filter: blur(2px);
}

/* ════════════════════════════════════════════════════════════════
   MAGAZINE LESSON THEME  (Math track — warm, editorial layout)
   ════════════════════════════════════════════════════════════════ */
:root {
  --mag-ink:      #20223A;
  --mag-gray:     #5A5F77;
  --mag-orange:   #F26B36;
  --mag-green:    #16A36B;
  --mag-indigo:   #4F46E5;
  --mag-indigo-bg:#ECEBFB;
  --mag-inset:    #F3F1F8;
  --mag-line:     #ECE9F2;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', 'Segoe UI', system-ui, sans-serif;
}
.mag-screen {
  min-height: 100vh;
  background: linear-gradient(150deg, #FBE3D4 0%, #FBF4EA 34%, #F6F1F1 60%, #E8E6F4 100%);
  font-family: var(--sans);
  padding-bottom: 40px;
}
/* slim top bar with back button */
.mag-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mag-line);
}
.mag-back {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  background: #fff; border: 1px solid var(--mag-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: var(--mag-ink); flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.mag-topbar-title {
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  color: var(--mag-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mag-page { padding: 20px 16px 0; margin: 0 auto; }

/* ── Hero ─────────────────────────────────────────────────────── */
.mag-hero { text-align: center; padding: 14px 4px 8px; }
.mag-eyebrow {
  display: inline-block;
  font-size: .68rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mag-indigo);
  background: var(--mag-indigo-bg);
  padding: 6px 14px; border-radius: var(--radius-full);
  margin-bottom: 14px;
}
.mag-eyebrow-orange { color: var(--mag-orange); background: #FCEAE0; }
.mag-eyebrow-green  { color: var(--mag-green);  background: #E1F5EC; }
.mag-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(2rem, 8vw, 2.9rem);
  line-height: 1.08;
  color: var(--mag-ink);
  letter-spacing: -.01em;
  margin: 0 auto 12px;
  max-width: 16em;
}
.mag-title .amp, .mag-title .dot { color: var(--mag-orange); }
.mag-title-ar {
  font-family: var(--sans); font-weight: 600;
  font-size: 1.05rem; color: var(--mag-gray); margin-bottom: 10px;
  direction: rtl;
}
.mag-subtitle {
  font-size: .98rem; line-height: 1.6; color: var(--mag-gray);
  max-width: 30em; margin: 0 auto 6px;
}

/* ── Card ─────────────────────────────────────────────────────── */
.mag-card {
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 12px 44px rgba(40,30,60,.07);
  padding: 26px 24px;
  margin: 18px auto;
  max-width: 620px;
}
.mag-card-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.mag-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--mag-indigo); color: #fff;
  font-family: var(--sans); font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mag-num.is-orange { background: var(--mag-orange); }
.mag-num.is-green  { background: var(--mag-green); }
.mag-section-title {
  font-family: var(--serif); font-weight: 800;
  font-size: 1.42rem; color: var(--mag-ink); line-height: 1.2;
}
.mag-section-title-ar {
  font-family: var(--sans); font-size: .85rem; color: var(--mag-gray);
  font-weight: 500; direction: rtl; margin-top: 2px;
}
.mag-body { font-size: .98rem; line-height: 1.68; color: var(--mag-gray); }
.mag-body p { margin-bottom: 10px; }
.mag-body strong { color: var(--mag-ink); font-weight: 700; }
.mag-body em { color: var(--mag-indigo); font-style: italic; }
.mag-body ul, .mag-body ol { padding-left: 22px; margin-bottom: 10px; }
.mag-body li { margin-bottom: 6px; }
.mag-body table {
  width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .9rem;
}
.mag-body th {
  background: var(--mag-inset); color: var(--mag-ink);
  padding: 8px 10px; text-align: left; font-weight: 700;
  border-bottom: 2px solid var(--mag-line);
}
.mag-body td { padding: 8px 10px; border-bottom: 1px solid var(--mag-line); vertical-align: top; }

/* ── Worked example inset ─────────────────────────────────────── */
.mag-example {
  background: var(--mag-inset);
  border-radius: 20px;
  padding: 22px 20px;
  margin: 14px 0;
}
.mag-example-problem {
  font-size: .95rem; color: var(--mag-gray); margin-bottom: 14px;
  text-align: center; line-height: 1.5;
}
.mag-example-problem strong { color: var(--mag-ink); }
.mag-eq {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  color: var(--mag-ink); text-align: center;
  margin: 6px 0 14px; line-height: 1.25;
}
.mag-eq .op  { color: var(--mag-orange); }
.mag-eq .ans { color: var(--mag-green); }
.mag-calc {
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  font-size: 1.15rem; line-height: 1.5;
  color: var(--mag-ink);
  background: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  white-space: pre; overflow-x: auto;
  text-align: center;
  margin: 6px 0;
}
.mag-calc .op  { color: var(--mag-orange); }
.mag-calc .ans { color: var(--mag-green); font-weight: 700; }
.mag-steps { counter-reset: magstep; list-style: none; padding: 0; margin: 8px 0 0; }
.mag-steps > li {
  position: relative; padding-left: 30px; margin-bottom: 12px;
  font-size: .94rem; line-height: 1.55; color: var(--mag-gray);
}
.mag-steps > li::before {
  counter-increment: magstep; content: counter(magstep);
  position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--mag-indigo-bg); color: var(--mag-indigo);
  font-size: .72rem; font-weight: 800; font-family: var(--sans);
  display: flex; align-items: center; justify-content: center;
}
.mag-steps > li.is-answer::before { content: '✓'; background: #E1F5EC; color: var(--mag-green); }
.mag-steps > li strong { color: var(--mag-ink); }
.mag-step-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mag-indigo);
  display: block; margin-bottom: 2px;
}
.mag-steps > li.is-answer .mag-step-label { color: var(--mag-green); }
.mag-caption {
  font-size: .85rem; color: var(--mag-gray); line-height: 1.55;
  margin-top: 10px;
}
.mag-caption code, .mag-body code {
  font-family: 'SF Mono', Monaco, monospace;
  background: var(--mag-inset); padding: 1px 6px; border-radius: 5px;
  font-size: .88em; color: var(--mag-ink);
}
.mag-keypoint {
  background: #FFF6E9;
  border-left: 4px solid #F0A93B;
  border-radius: 12px;
  padding: 12px 16px; margin-top: 14px;
  font-size: .9rem; color: #7A5418; line-height: 1.55;
}
.mag-callout-ar { color: var(--mag-gray); font-size: .85rem; direction: rtl; text-align: right; margin-top: 4px; }

/* ── Vocab grid ───────────────────────────────────────────────── */
.mag-vocab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mag-vocab-item {
  background: var(--mag-inset); border-radius: 14px; padding: 12px 14px;
}
.mag-vocab-en { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; color: var(--mag-ink); }
.mag-vocab-ar { font-size: .88rem; color: var(--mag-indigo); margin-top: 2px; direction: rtl; }
.mag-vocab-pron { font-size: .72rem; color: var(--mag-gray); font-style: italic; margin-top: 2px; }

/* ── Watch-out (mistake) ──────────────────────────────────────── */
.mag-watchout-wrong, .mag-watchout-right {
  border-radius: 14px; padding: 12px 16px; margin: 8px 0;
  font-family: 'SF Mono', Monaco, monospace; font-size: .92rem;
  white-space: pre-wrap; line-height: 1.5;
}
.mag-watchout-wrong { background: #FDECEC; border-left: 4px solid #E5544B; color: #8A2C2C; }
.mag-watchout-right { background: #E6F6EE; border-left: 4px solid var(--mag-green); color: #1A6B47; }
.mag-watchout-label { font-family: var(--sans); font-weight: 800; font-size: .76rem; margin-bottom: 6px; }
.mag-watchout-why {
  background: #FFF6E9; border-radius: 12px; padding: 12px 16px;
  font-size: .92rem; color: #7A5418; line-height: 1.6; margin: 8px 0;
}

/* ── Video ────────────────────────────────────────────────────── */
.mag-video-wrap {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #000; border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.mag-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mag-video-search {
  display: block; text-align: center; margin-top: 10px;
  font-size: .85rem; color: var(--mag-indigo); font-weight: 600;
  text-decoration: none;
}

/* ── Practice widget ──────────────────────────────────────────── */
.mag-practice-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.mag-chips { display: flex; gap: 6px; flex-shrink: 0; }
.mag-chip {
  font-size: .74rem; font-weight: 700; padding: 5px 10px;
  border-radius: var(--radius-full); white-space: nowrap;
}
.mag-chip-score  { background: #E4EDFB; color: #2C5BB8; }
.mag-chip-streak { background: #DDF3EE; color: #137A5C; }
.mag-ptabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.mag-ptab {
  font-size: .82rem; font-weight: 700; padding: 7px 16px;
  border-radius: var(--radius-full); border: 0;
  background: var(--mag-indigo-bg); color: var(--mag-indigo);
  font-family: var(--sans);
}
.mag-ptab.active { background: var(--mag-indigo); color: #fff; }
.mag-ptab.done   { background: #DDF3EE; color: #137A5C; }
/* ════════════════════════════════════════════════════════════════
   T16 — Classify 2D Figures · scoped visualisations
   Used only inside the math5-t16 magazine lesson. Class names are
   prefixed `.t16-*` so they don't leak into other lessons.
   ════════════════════════════════════════════════════════════════ */

/* ① Triangle gallery — six SVG cards in a responsive grid */
.t16-tri-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 14px 0 6px;
}
.t16-tri-card {
  background: #FBF4EA;
  border-radius: 14px;
  padding: 14px 12px;
  border: 1px solid rgba(0,0,0,.06);
  text-align: center;
}
.t16-tri-card svg { display: block; margin: 0 auto 8px; max-width: 100%; height: auto; }
.t16-tri-name {
  font-family: 'Inter', sans-serif;
  font-weight: 800; font-size: .94rem; color: #2A2233;
}
.t16-tri-props { font-size: .78rem; color: #6F6878; margin-top: 4px; }

/* ② Quadrilateral family-tree SVG */
.t16-hier-wrap { margin: 14px 0; }
.t16-hier-wrap svg {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
}

/* ③ Quadrilateral property gallery */
.t16-quad-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 14px 0 6px;
}
.t16-quad-card {
  background: #FBF4EA;
  border-radius: 14px;
  padding: 14px 12px;
  border: 1px solid rgba(0,0,0,.06);
}
.t16-quad-card.t16-special {
  border: 2px solid #D97706;
  box-shadow: 0 0 0 2px #FCD34D;
  background: #FFFDF5;
}
.t16-quad-card svg { display: block; margin: 0 auto 10px; max-width: 100%; height: auto; }
.t16-quad-name {
  font-family: 'Inter', sans-serif;
  font-weight: 800; font-size: 1rem; text-align: center; margin-bottom: 8px; color: #2A2233;
}
.t16-prop-list { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.t16-prop-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; color: #2A2233; }
.t16-prop-list .check { color: #16A36B; font-weight: 800; flex-shrink: 0; }
.t16-prop-list .x { color: #C7CAD7; flex-shrink: 0; }

/* ⑤ Always / Sometimes / Never interactive sorter */
.t16-asn-intro {
  font-size: .92rem; color: var(--mag-gray, #6F6878); margin: 8px 0 14px;
  line-height: 1.55;
}
.t16-asn-list {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;
}
.t16-asn-row {
  background: #fff; border-radius: 14px; padding: 12px 14px;
  border: 1.5px solid rgba(0,0,0,.08);
  transition: border-color .2s ease, background .2s ease;
}
.t16-asn-row.t16-correct { border-color: #16A36B; background: #ECFDF5; }
.t16-asn-row.t16-wrong   { border-color: #DC2626; background: #FEF2F2; }
.t16-asn-statement {
  font-weight: 700; font-size: .94rem; color: #2A2233; margin-bottom: 8px;
}
.t16-asn-statement-ar {
  font-size: .82rem; color: #6F6878; direction: rtl; margin-bottom: 8px;
}
.t16-asn-buttons {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.t16-asn-btn {
  padding: 6px 12px; border-radius: 99px;
  border: 1.5px solid rgba(0,0,0,.10); background: #fff;
  font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .15s ease;
  color: #2A2233;
}
.t16-asn-btn:hover { background: rgba(0,0,0,.04); }
.t16-asn-btn.t16-asn-always.t16-selected   { background: #16A36B; color: #fff; border-color: #16A36B; }
.t16-asn-btn.t16-asn-sometimes.t16-selected{ background: #D97706; color: #fff; border-color: #D97706; }
.t16-asn-btn.t16-asn-never.t16-selected    { background: #DC2626; color: #fff; border-color: #DC2626; }
.t16-asn-feedback {
  font-size: .82rem; font-style: italic; color: #4F46E5; margin-top: 6px;
}
.t16-asn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.t16-asn-check {
  background: var(--mag-indigo, #4F46E5); color: #fff;
  border: 0; padding: 10px 18px; border-radius: 12px;
  font-weight: 800; font-size: .92rem; cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.t16-asn-check:hover { opacity: .92; }
.t16-asn-reset {
  background: #fff; color: var(--mag-indigo, #4F46E5);
  border: 1.5px solid var(--mag-indigo, #4F46E5);
  padding: 10px 16px; border-radius: 12px; font-weight: 700; cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.t16-asn-score {
  font-weight: 800; color: #2A2233; padding: 10px 0;
}

/* ⑥ Visual worked-example layout (figure + steps side by side) */
.t16-worked-vis {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  margin: 8px 0;
}
@media (min-width: 640px) {
  .t16-worked-vis { grid-template-columns: 220px 1fr; align-items: start; }
}
.t16-worked-fig {
  background: #FBF4EA; border-radius: 14px; padding: 14px;
  text-align: center;
}
.t16-worked-fig svg { display: block; margin: 0 auto 6px; max-width: 100%; height: auto; }
.t16-worked-caption { font-size: .82rem; color: #6F6878; }

/* ════════════════════════════════════════════════════════════════
   T10 — Represent & Interpret Data · scoped visualisations
   Used only inside math5-t10. Class names prefixed `.t10-*`.
   ════════════════════════════════════════════════════════════════ */

/* Common: line-plot SVG container + X marks */
.t10-plot-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 16px 12px;
  margin: 10px 0;
}
.t10-plot-svg { display: block; width: 100%; max-width: 700px; height: auto; margin: 0 auto; }
.t10-plot-svg .t10-x { fill: #4F46E5; font-weight: 800; font-size: 20px; transition: fill .2s ease; }
.t10-plot-svg .t10-x.green { fill: #16A36B; }
.t10-plot-svg .t10-x.red   { fill: #DC2626; }
.t10-plot-svg .t10-tick { stroke: #2A2233; stroke-width: 2; }
.t10-plot-svg .t10-axis { stroke: #2A2233; stroke-width: 2.5; }
.t10-plot-svg .t10-label{ font-size: 13px; fill: #4A4253; font-weight: 700; }
.t10-plot-svg .t10-title{ font-size: 14px; font-weight: 800; fill: #2A2233; }

/* ① Anatomy annotation arrows */
.t10-plot-svg .t10-anno { stroke: #BE185D; stroke-width: 1.6; fill: none; }
.t10-plot-svg .t10-anno-txt { fill: #BE185D; font-size: 12px; font-weight: 700; }

/* ② Stats dashboard */
.t10-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 14px;
}
.t10-stat-tile {
  background: #fff; border-radius: 14px; padding: 12px 14px;
  border: 2px solid rgba(0,0,0,.06); cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
  font-family: 'Inter', sans-serif;
}
.t10-stat-tile:hover { transform: translateY(-2px); border-color: #4F46E5; }
.t10-stat-tile.active { border-color: #4F46E5; background: #EEF2FF; }
.t10-stat-tile-label { font-size: .82rem; color: #6F6878; font-weight: 700; }
.t10-stat-tile-value { font-size: 1.35rem; font-weight: 800; color: #2A2233; margin-top: 4px; }
.t10-stat-msg {
  margin-top: 12px; font-style: italic; color: #4F46E5; min-height: 24px; font-size: .92rem;
}

/* ③ Click-to-Count widget */
.t10-count-widget {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 20px; color: #fff;
  margin: 12px 0;
}
.t10-count-widget .t10-plot-svg .t10-x { fill: #fff; cursor: pointer; transition: fill .2s ease; }
.t10-count-widget .t10-plot-svg .t10-x.selected.correct { fill: #16A36B; }
.t10-count-widget .t10-plot-svg .t10-x.selected.wrong { fill: #DC2626; opacity: .8; }
.t10-count-widget .t10-plot-svg .t10-axis,
.t10-count-widget .t10-plot-svg .t10-tick { stroke: #fff; }
.t10-count-widget .t10-plot-svg .t10-label { fill: #fff; }
.t10-count-q { font-size: 1.02rem; font-weight: 800; margin-bottom: 6px; }
.t10-count-q-ar { font-size: .82rem; opacity: .85; direction: rtl; margin-bottom: 6px; }
.t10-count-counter {
  font-size: .92rem; margin-top: 12px; padding: 10px 14px;
  background: rgba(255,255,255,.18); border-radius: 12px;
}
.t10-count-fb {
  margin-top: 8px; font-size: .88rem; min-height: 22px;
}
.t10-count-fb.right { color: #BBF7D0; }
.t10-count-fb.wrong { color: #FECACA; }
.t10-count-reset {
  margin-top: 10px; background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t10-count-reset:hover { background: rgba(255,255,255,.32); }

/* ④ Visual Read-the-Plot side panel */
.t10-read-grid {
  display: grid; grid-template-columns: 1fr; gap: 12px; margin: 8px 0;
}
@media (min-width: 640px) {
  .t10-read-grid { grid-template-columns: 2fr 1fr; }
}
.t10-read-panel {
  background: #ECFDF5; border-radius: 14px; padding: 14px;
  border: 1px solid #BBF7D0;
}
.t10-read-panel h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 800; font-size: .95rem; margin-bottom: 6px; color: #065F46;
}
.t10-read-panel ul { padding-left: 18px; font-size: .88rem; line-height: 1.6; color: #065F46; }
.t10-read-panel .t10-read-total {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed #16A36B;
  font-weight: 800; color: #065F46;
}
.t10-read-panel .t10-read-total span { font-size: 1.25rem; }

/* ⑤ Compute-Total calc grid */
.t10-calc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; margin-top: 12px;
}
.t10-calc-row {
  background: #FBF4EA; border-radius: 12px; padding: 10px 14px;
  font-size: .9rem;
  display: flex; justify-content: space-between; align-items: center;
}
.t10-calc-row strong { color: #4F46E5; }
.t10-calc-row.t10-cd { background: #EEF2FF; }
.t10-calc-total {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #4F46E5, #6D5CE7); color: #fff;
  border-radius: 12px; padding: 14px 16px; font-weight: 800; font-size: 1.02rem;
  display: flex; justify-content: space-between; gap: 8px;
}

/* ⑥ Critique-the-Display */
.t10-critique-grid {
  display: grid; grid-template-columns: 1fr; gap: 12px; margin: 10px 0;
}
@media (min-width: 640px) {
  .t10-critique-grid { grid-template-columns: 1fr 1fr; }
}
.t10-critique-card { background: #FBF4EA; border-radius: 14px; padding: 14px; }
.t10-critique-card.bad { border: 2px solid #DC2626; background: #FEF2F2; }
.t10-critique-card.good{ border: 2px solid #16A36B; background: #ECFDF5; }
.t10-critique-label {
  font-weight: 800; font-size: .9rem; padding: 4px 10px; border-radius: 99px;
  display: inline-block; margin-bottom: 8px;
}
.t10-critique-card.bad .t10-critique-label { background: #DC2626; color: #fff; }
.t10-critique-card.good .t10-critique-label { background: #16A36B; color: #fff; }
.t10-critique-flaw {
  background: #fff; border-left: 3px solid #DC2626; padding: 8px 10px; margin-top: 8px;
  font-size: .82rem; border-radius: 0 8px 8px 0;
}
.t10-critique-card.good .t10-critique-flaw { border-left-color: #16A36B; }

/* ════════════════════════════════════════════════════════════════
   T1 — Understand Place Value · scoped visualisations
   Used only inside math5-t1. Class names prefixed `.t1-*`.
   ════════════════════════════════════════════════════════════════ */

/* ① Powers of 10 Ladder */
.t1-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 14px 0 6px;
}
.t1-ladder-step {
  background: #FBF4EA; border-radius: 14px; padding: 14px 10px;
  text-align: center; border: 1px solid rgba(0,0,0,.06);
}
.t1-ladder-blocks {
  min-height: 80px; display: flex; align-items: end; justify-content: center; gap: 2px;
  margin-bottom: 6px;
}
.t1-ladder-block { background: #4F46E5; border-radius: 3px; display: inline-block; }
.t1-ladder-cap { font-size: .7rem; color: #6F6878; }
.t1-ladder-expo {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; font-weight: 800; color: #2A2233; margin-top: 6px;
}
.t1-ladder-expanded { font-size: .78rem; color: #6F6878; margin-top: 2px; }
.t1-ladder-val { font-size: 1.05rem; font-weight: 800; color: #4F46E5; margin-top: 4px; }
.t1-ladder-zeros { font-size: .72rem; color: #16A36B; margin-top: 2px; font-weight: 700; }
.t1-ladder-pattern {
  margin-top: 10px; padding: 10px 14px;
  background: #EEF2FF; border-radius: 12px; font-size: .92rem; text-align: center;
}

/* ② Interactive Place-Value Chart */
.t1-pv-controls {
  display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap;
}
.t1-pv-input {
  font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 800;
  padding: 8px 14px; border: 2px solid #4F46E5; border-radius: 12px;
  width: 200px; text-align: center;
}
.t1-pv-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.t1-pv-preset {
  background: #EEF2FF; color: #4F46E5; border: 1px solid #4F46E5;
  padding: 5px 10px; border-radius: 99px; font-weight: 700;
  cursor: pointer; font-family: 'Inter', sans-serif; font-size: .78rem;
}
.t1-pv-preset:hover { background: #4F46E5; color: #fff; }
.t1-pv-chart {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px;
  background: #FBF4EA; border-radius: 14px; padding: 12px 8px;
}
.t1-pv-col { text-align: center; }
.t1-pv-col-label {
  font-size: .62rem; color: #6F6878; font-weight: 700; padding: 4px 1px;
  border-bottom: 1px dashed rgba(0,0,0,.15); min-height: 32px;
  display: flex; align-items: center; justify-content: center; line-height: 1.2;
}
.t1-pv-col-digit {
  height: 60px; background: #fff; border-radius: 8px; margin: 6px 1px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 800; color: #C7CAD7;
  transition: all .3s ease;
}
.t1-pv-col-digit.active {
  color: #4F46E5; background: #EEF2FF;
  transform: scale(1.05); box-shadow: 0 4px 12px rgba(79,70,229,.2);
}
.t1-pv-col-value {
  font-size: .68rem; color: #16A36B; font-weight: 700; min-height: 16px;
}
.t1-pv-dot {
  height: 60px; margin: 6px 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 800; color: #BE185D;
}

/* ③ Base-10 Blocks for Decimals */
.t1-b10 { background: #FBF4EA; border-radius: 14px; padding: 18px; }
.t1-b10-row {
  display: grid; grid-template-columns: 140px auto 1fr; gap: 12px;
  align-items: center; margin-bottom: 14px;
}
@media (max-width: 600px) {
  .t1-b10-row { grid-template-columns: 1fr; }
}
.t1-b10-label { font-weight: 800; font-size: .95rem; }
.t1-b10-label .t1-d { color: #BE185D; font-size: 1.3rem; }
.t1-b10-label-sub { font-size: .78rem; color: #6F6878; font-weight: 600; }
.t1-b10-whole {
  width: 110px; height: 110px; background: #EEF2FF; border: 2px solid #4F46E5;
  display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
  gap: 1px; padding: 1px;
}
.t1-b10-whole.small { width: 80px; height: 80px; }
.t1-b10-cell { background: #fff; }
.t1-b10-cell.fill { background: #4F46E5; }
.t1-b10-tinybox {
  width: 80px; height: 80px; background: #EEF2FF; border: 2px solid #4F46E5;
  padding: 6px; display: flex; align-items: center; justify-content: center;
}
.t1-b10-strips {
  width: 60px; height: 6px; display: grid;
  grid-template-columns: repeat(10, 1fr); gap: 1px;
}
.t1-b10-strips .t1-s-fill { background: #4F46E5; }
.t1-b10-strips .t1-s-empty { background: #fff; }
.t1-b10-caption { font-size: .85rem; color: #6F6878; }
.t1-b10-eqn {
  margin-top: 14px; padding: 12px 16px; background: #fff; border-radius: 10px;
  font-size: 1.05rem; font-weight: 800; text-align: center;
}
.t1-b10-eqn span { color: #BE185D; font-family: 'Playfair Display', serif; font-size: 1.4rem; }

/* ④ 10× Visualizer */
.t1-tenx { background: #FBF4EA; border-radius: 14px; padding: 22px; text-align: center; }
.t1-tenx-intro { font-size: .92rem; color: #6F6878; margin-bottom: 8px; }
.t1-tenx-row { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0; flex-wrap: wrap; justify-content: center; }
.t1-tenx-digit {
  width: 92px; height: 110px;
  background: #fff; border: 3px solid #4F46E5; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: all .25s ease;
}
.t1-tenx-digit:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(79,70,229,.25); }
.t1-tenx-digit.selected { background: #EEF2FF; border-color: #BE185D; transform: scale(1.05); }
.t1-tenx-digit .t1-tx-d { font-family: 'Playfair Display', serif; font-size: 2.6rem; font-weight: 800; color: #2A2233; line-height: 1; }
.t1-tenx-digit .t1-tx-v { font-size: .78rem; color: #6F6878; font-weight: 700; margin-top: 4px; }
.t1-tenx-digit.selected .t1-tx-v { color: #BE185D; font-weight: 800; }
.t1-tenx-arrow {
  font-size: 1.2rem; color: #16A36B; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.t1-tenx-msg { margin-top: 12px; font-style: italic; color: #4F46E5; min-height: 24px; font-size: .9rem; }
.t1-tenx-warn {
  margin-top: 12px; padding: 10px 14px; background: #FEF3C7; border-radius: 10px;
  font-size: .86rem; color: #7A5418;
}

/* ⑤ Number line for decimal comparison */
.t1-nl { background: #FBF4EA; border-radius: 14px; padding: 22px 12px; }
.t1-nl svg { display: block; width: 100%; max-width: 700px; height: auto; margin: 0 auto; }
.t1-nl-result {
  margin-top: 14px; padding: 12px 16px;
  background: #ECFDF5; border-left: 4px solid #16A36B;
  border-radius: 0 10px 10px 0; font-size: .92rem; color: #065F46;
}

/* ⑥ Build-a-Decimal interactive */
.t1-build {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 22px; color: #fff;
  margin: 12px 0;
}
.t1-build-target { font-size: 1.05rem; margin-bottom: 14px; }
.t1-build-target strong {
  font-family: 'Playfair Display', serif; font-size: 1.4rem; color: #FCD34D;
}
.t1-build-controls {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;
}
.t1-build-control {
  background: rgba(255,255,255,.18); border-radius: 12px; padding: 12px;
  text-align: center;
}
.t1-build-label { font-weight: 700; font-size: .88rem; margin-bottom: 8px; }
.t1-build-count {
  font-size: 1.8rem; font-weight: 800;
  font-family: 'Playfair Display', serif; min-height: 44px;
}
.t1-build-btns { display: flex; gap: 6px; justify-content: center; }
.t1-build-btn {
  background: #fff; color: #4F46E5; border: 0; border-radius: 99px;
  width: 30px; height: 30px; font-weight: 800; font-size: 1rem;
  cursor: pointer; font-family: 'Inter', sans-serif;
}
.t1-build-btn:hover { background: #FCD34D; }
.t1-build-result {
  background: rgba(255,255,255,.12); border-radius: 12px; padding: 14px 16px; text-align: center;
}
.t1-build-now {
  font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 800; color: #FCD34D;
  margin-top: 4px; display: block;
}
.t1-build-fb { margin-top: 8px; font-size: .9rem; min-height: 22px; }
.t1-build-fb.right { color: #BBF7D0; }
.t1-build-fb.high { color: #FECACA; }

/* ════════════════════════════════════════════════════════════════
   T2 — Add & Subtract Decimals · scoped visualisations
   Used only inside math5-t2. Class names prefixed `.t2-*`.
   ════════════════════════════════════════════════════════════════ */

/* ① Compensation flow */
.t2-comp-flow {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px;
  align-items: center; background: #FBF4EA; border-radius: 14px; padding: 18px;
}
@media (max-width: 700px) { .t2-comp-flow { grid-template-columns: 1fr; } }
.t2-comp-box {
  background: #fff; border-radius: 14px; padding: 14px; text-align: center;
  border: 2px solid rgba(0,0,0,.06);
}
.t2-comp-box.adjusted { border-color: #16A36B; background: #ECFDF5; }
.t2-comp-box.final    { border-color: #4F46E5; background: #EEF2FF; }
.t2-comp-label {
  font-size: .74rem; color: #6F6878; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 6px;
}
.t2-comp-num {
  font-family: 'Courier New', monospace; font-size: 1.2rem; font-weight: 800; color: #2A2233;
}
.t2-comp-num strong { color: #BE185D; }
.t2-comp-arrow {
  font-size: 1.4rem; color: #4F46E5; font-weight: 800;
  display: flex; flex-direction: column; align-items: center;
}
.t2-comp-arrow-label { font-size: .7rem; color: #4F46E5; }
.t2-comp-sub-easy { font-size: .8rem; color: #16A36B; margin-top: 4px; }
.t2-comp-sub-final { font-size: .92rem; color: #4F46E5; margin-top: 4px; }
.t2-comp-pair {
  margin-top: 12px; padding: 10px 14px; background: #fff; border-radius: 10px; font-size: .88rem;
}
.t2-comp-pair strong { color: #16A36B; }
.t2-comp-eq {
  margin-top: 10px; padding: 12px 16px; background: #fff; border-radius: 10px;
  font-family: 'Courier New', monospace; font-size: 1.05rem; font-weight: 800;
  text-align: center; border: 2px solid #4F46E5;
}

/* ② Right vs Wrong alignment */
.t2-align-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .t2-align-grid { grid-template-columns: 1fr; } }
.t2-align-card { background: #FBF4EA; border-radius: 14px; padding: 14px; }
.t2-align-card.bad  { border: 2px solid #DC2626; background: #FEF2F2; }
.t2-align-card.good { border: 2px solid #16A36B; background: #ECFDF5; }
.t2-align-label {
  font-weight: 800; font-size: .9rem; padding: 4px 10px; border-radius: 99px;
  display: inline-block; margin-bottom: 8px;
}
.t2-align-card.bad  .t2-align-label { background: #DC2626; color: #fff; }
.t2-align-card.good .t2-align-label { background: #16A36B; color: #fff; }
.t2-align-math {
  font-family: 'Courier New', monospace; font-size: 1.3rem; font-weight: 800;
  background: #fff; padding: 14px 20px; border-radius: 10px;
  white-space: pre; line-height: 1.7; margin: 0;
}
.t2-align-math .t2-red-dec { background: #FEE2E2; padding: 0 3px; border-radius: 3px; color: #BE185D; }
.t2-align-math .t2-gn-dec  { background: #D1FAE5; padding: 0 3px; border-radius: 3px; color: #BE185D; }
.t2-align-note {
  margin-top: 8px; padding: 8px 12px; background: #fff; font-size: .82rem;
  border-radius: 8px; border-left: 3px solid #DC2626;
}
.t2-align-card.good .t2-align-note { border-left-color: #16A36B; }

/* ③ Place-value colored vertical addition */
.t2-pv-add-wrap { background: #FBF4EA; border-radius: 14px; padding: 22px; }
.t2-pv-add-grid {
  display: grid; grid-template-columns: 50px repeat(5, 50px);
  gap: 4px; max-width: 340px; margin: 0 auto;
  font-family: 'Courier New', monospace; font-size: 1.4rem; font-weight: 800;
}
.t2-pv-add-grid .lbl { font-family: 'Inter', sans-serif; font-size: .65rem; color: #6F6878; text-align: center; align-self: end; padding-bottom: 4px; line-height: 1.1; }
.t2-pv-add-grid .op { text-align: right; padding-right: 4px; align-self: center; }
.t2-pv-add-grid .cell { text-align: center; padding: 6px 0; border-radius: 6px; }
.t2-pv-add-grid .cell.ones { background: #FEF3C7; color: #92400E; }
.t2-pv-add-grid .cell.tenths { background: #DBEAFE; color: #1E40AF; }
.t2-pv-add-grid .cell.hundredths { background: #FCE7F3; color: #BE185D; }
.t2-pv-add-grid .cell.tens { background: #D1FAE5; color: #065F46; }
.t2-pv-add-grid .dot { text-align: center; font-size: 1.4rem; color: #BE185D; align-self: center; padding: 6px 0; }
.t2-pv-add-grid .sum-row { border-top: 3px solid #2A2233; padding-top: 8px; margin-top: 6px; font-size: 1.5rem; }
.t2-pv-add-grid .carry { font-size: .7rem; color: #DC2626; text-align: center; padding: 2px 0; font-weight: 800; min-height: 14px; }
.t2-pv-add-legend {
  margin-top: 14px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: .8rem;
}
.t2-pv-add-legend span { display: inline-flex; align-items: center; gap: 4px; }
.t2-pv-add-legend .sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.t2-pv-add-final {
  margin-top: 12px; text-align: center; font-family: 'Courier New', monospace;
  font-size: 1.05rem; font-weight: 800; color: #4F46E5;
}

/* ④ Number-line estimation */
.t2-est-wrap { background: #FBF4EA; border-radius: 14px; padding: 18px 12px; }
.t2-est-wrap svg { display: block; max-width: 700px; height: auto; margin: 0 auto; }
.t2-est-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
@media (max-width: 540px) { .t2-est-cards { grid-template-columns: 1fr; } }
.t2-est-card {
  background: #fff; border-radius: 12px; padding: 14px;
  text-align: center; border: 1px solid rgba(0,0,0,.08);
}
.t2-est-card-label {
  font-size: .78rem; color: #6F6878; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.t2-est-card-val {
  font-family: 'Courier New', monospace; font-size: 1.4rem; font-weight: 800; margin-top: 4px;
}
.t2-est-card.estimate .t2-est-card-val { color: #4F46E5; }
.t2-est-card.actual   .t2-est-card-val { color: #16A36B; }
.t2-est-card-sub { font-size: .8rem; color: #6F6878; margin-top: 4px; }

/* ⑤ Subtraction borrowing stages */
.t2-sub-wrap { background: #FBF4EA; border-radius: 14px; padding: 22px; }
.t2-sub-stages {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
}
.t2-sub-stage {
  background: #fff; border-radius: 12px; padding: 14px 12px;
  border: 2px solid rgba(0,0,0,.06); text-align: center;
}
.t2-sub-stage.final { border-color: #4F46E5; background: #EEF2FF; }
.t2-sub-stage-label {
  font-size: .72rem; color: #4F46E5; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.t2-sub-stage-math {
  font-family: 'Courier New', monospace; font-size: 1.15rem; line-height: 1.5;
  text-align: right; padding: 0 16px; min-height: 100px; margin: 0;
}
.t2-sub-cross { color: #DC2626; text-decoration: line-through; }
.t2-sub-new   { color: #16A36B; font-weight: 800; }
.t2-sub-final { color: #4F46E5; }
.t2-sub-borrow{ color: #DC2626; font-size: .85rem; }
.t2-sub-stage-note { font-size: .78rem; color: #6F6878; margin-top: 8px; font-style: italic; }

/* ⑥ Spot-the-Error mini-game */
.t2-err-wrap {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 22px; color: #fff;
  margin: 12px 0;
}
.t2-err-q { font-size: 1rem; font-weight: 800; margin-bottom: 14px; }
.t2-err-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.t2-err-card {
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.3);
  border-radius: 12px; padding: 14px; cursor: pointer; transition: all .15s ease;
}
.t2-err-card:hover { background: rgba(255,255,255,.25); transform: translateY(-2px); }
.t2-err-card.right { background: #16A36B; border-color: #16A36B; }
.t2-err-card.wrong { background: #DC2626; border-color: #DC2626; opacity: .85; }
.t2-err-card .t2-err-math {
  font-family: 'Courier New', monospace; font-size: 1.05rem; font-weight: 800;
  background: rgba(255,255,255,.18); padding: 10px 14px; border-radius: 8px;
  white-space: pre; line-height: 1.6; margin: 0;
}
.t2-err-card .t2-err-label { font-size: .78rem; opacity: .9; margin-top: 8px; }
.t2-err-feedback { margin-top: 12px; font-size: .92rem; min-height: 22px; }
.t2-err-feedback.right { color: #BBF7D0; font-weight: 800; }
.t2-err-feedback.wrong { color: #FECACA; }
.t2-err-reset {
  margin-top: 10px; background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t2-err-reset:hover { background: rgba(255,255,255,.32); }

/* ════════════════════════════════════════════════════════════
   T3 — Multiply Multi-Digit Whole Numbers (visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── ① Powers-of-10 Digit Slider ──────────────────────────── */
.t3-slider-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t3-slider-row {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 12px;
  align-items: center; margin-bottom: 8px;
}
.t3-slider-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .95rem;
  font-weight: 800; color: #4F46E5; text-align: right;
}
.t3-slider-digits {
  display: flex; gap: 4px; align-items: center; min-height: 44px;
}
.t3-slider-digit {
  width: 34px; height: 44px; border-radius: 7px;
  background: #4F46E5; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800;
  transition: all .3s ease;
}
.t3-slider-digit.zero { background: #FCD34D; color: #7C2D12; }
.t3-slider-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem; font-weight: 800; color: #16A36B;
  white-space: nowrap;
}
.t3-slider-note {
  margin-top: 12px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t3-slider-note strong { color: #4F46E5; }
@media (max-width: 460px) {
  .t3-slider-row { grid-template-columns: 70px 1fr auto; gap: 8px; }
  .t3-slider-eq { font-size: .82rem; }
  .t3-slider-digit { width: 28px; height: 36px; font-size: 1rem; }
  .t3-slider-value { font-size: .95rem; }
}

/* ── ② Estimate Range Number Line ─────────────────────────── */
.t3-est-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 16px 10px; margin-top: 12px;
}
.t3-est-svg { display: block; width: 100%; height: auto; max-width: 700px; margin: 0 auto; }
.t3-est-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px;
}
@media (max-width: 520px) { .t3-est-cards { grid-template-columns: 1fr; } }
.t3-est-card {
  background: #fff; border-radius: 10px; padding: 10px 8px; text-align: center;
  border: 2px solid rgba(0,0,0,.06);
}
.t3-est-card.under  { border-color: #BE185D; }
.t3-est-card.actual { border-color: #16A36B; background: #ECFDF5; }
.t3-est-card.over   { border-color: #3B82F6; }
.t3-est-card-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.t3-est-card.under  .t3-est-card-label { color: #BE185D; }
.t3-est-card.actual .t3-est-card-label { color: #16A36B; }
.t3-est-card.over   .t3-est-card-label { color: #3B82F6; }
.t3-est-card-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .95rem; font-weight: 800; margin-top: 3px; color: #2A2233;
}
.t3-est-card-val  { font-size: 1.25rem; font-weight: 800; margin-top: 2px; }
.t3-est-card.under  .t3-est-card-val { color: #BE185D; }
.t3-est-card.actual .t3-est-card-val { color: #16A36B; }
.t3-est-card.over   .t3-est-card-val { color: #3B82F6; }

/* ── ③ Area Model for Partial Products ────────────────────── */
.t3-area-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t3-area-title {
  text-align: center; margin-bottom: 12px; font-size: .92rem; color: #6F6878;
}
.t3-area-title strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: #2A2233; font-size: 1rem;
}
.t3-area-grid {
  display: grid; grid-template-columns: 50px 1fr; gap: 4px;
  max-width: 420px; margin: 0 auto; align-items: stretch;
}
.t3-area-top-labels {
  display: grid; grid-template-columns: 4fr 1.2fr; gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem; font-weight: 800; text-align: center;
}
.t3-area-top-labels .lbl-blue { color: #1E40AF; }
.t3-area-top-labels .lbl-pink { color: #BE185D; }
.t3-area-side-labels {
  display: grid; grid-template-rows: 4fr 1.2fr; gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem; font-weight: 800;
  align-items: center; text-align: right; padding-right: 6px;
}
.t3-area-side-labels .lbl-green { color: #065F46; }
.t3-area-side-labels .lbl-amber { color: #92400E; }
.t3-area-cells {
  display: grid;
  grid-template-columns: 4fr 1.2fr; grid-template-rows: 4fr 1.2fr;
  gap: 4px;
}
.t3-area-cell {
  border-radius: 8px; padding: 10px 8px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 80px;
}
.t3-area-cell.bg1 { background: #DBEAFE; color: #1E40AF; }
.t3-area-cell.bg2 { background: #FCE7F3; color: #BE185D; }
.t3-area-cell.bg3 { background: #D1FAE5; color: #065F46; }
.t3-area-cell.bg4 { background: #FEF3C7; color: #92400E; }
.t3-area-cell-eq  { font-size: .82rem; opacity: .85; }
.t3-area-cell-val { font-size: 1.4rem; margin-top: 2px; }
.t3-area-sum {
  margin-top: 12px; padding: 12px 16px; background: #fff; border: 2px solid #4F46E5;
  border-radius: 12px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1rem;
}
.t3-area-sum .total { color: #4F46E5; font-size: 1.5rem; margin-left: 4px; }

/* ── ④ Standard Algorithm with Shift Visualization ──────── */
.t3-algo-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
  text-align: center;
}
.t3-algo-grid {
  display: inline-grid;
  grid-template-columns: 28px repeat(4, 34px);
  gap: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800;
}
.t3-algo-grid .op { text-align: right; padding-right: 4px; align-self: center; font-size: 1rem; color: #6F6878; }
.t3-algo-grid .cell { text-align: center; padding: 4px 0; border-radius: 5px; min-height: 32px; }
.t3-algo-grid .cell.bg-blue   { background: #DBEAFE; color: #1E40AF; }
.t3-algo-grid .cell.bg-pink   { background: #FCE7F3; color: #BE185D; }
.t3-algo-grid .cell.bg-amber  { background: #FEF3C7; color: #92400E; }
.t3-algo-grid .cell.bg-yellow { background: #FCD34D; color: #7C2D12; }
.t3-algo-grid .cell.bg-green  { background: #D1FAE5; color: #065F46; }
.t3-algo-grid .line { border-top: 2px solid #2A2233; grid-column: 1 / -1; height: 3px; }
.t3-algo-grid .carry { font-size: .68rem; color: #DC2626; text-align: center; padding: 1px 0; font-weight: 800; min-height: 12px; }
.t3-algo-shift-note {
  background: #FEF3C7; border-radius: 10px; padding: 10px 14px;
  font-size: .88rem; color: #7A5418; margin-top: 12px;
  border-left: 4px solid #F0A93B; text-align: left; line-height: 1.5;
}
.t3-algo-shift-note strong { color: #92400E; }
@media (max-width: 420px) {
  .t3-algo-grid { grid-template-columns: 24px repeat(4, 28px); gap: 2px; font-size: 1.1rem; }
  .t3-algo-grid .op { font-size: .85rem; }
}

/* ── ⑤ Area-Model Builder (Try-It) ────────────────────────── */
.t3-builder-wrap {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 20px; color: #fff; margin-top: 12px;
}
.t3-builder-q {
  font-size: 1rem; font-weight: 800; margin-bottom: 14px; text-align: center;
}
.t3-builder-grid {
  display: grid; grid-template-columns: 40px 1fr; gap: 6px;
  max-width: 420px; margin: 0 auto;
}
.t3-builder-top {
  display: grid; grid-template-columns: 4fr 1.6fr; gap: 6px;
  text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .95rem; padding-bottom: 2px;
}
.t3-builder-side {
  display: grid; grid-template-rows: 4fr 1.6fr; gap: 6px;
  align-items: center; text-align: right; padding-right: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .95rem;
}
.t3-builder-cells {
  display: grid; grid-template-columns: 4fr 1.6fr; grid-template-rows: 4fr 1.6fr; gap: 6px;
}
.t3-builder-cell {
  background: rgba(255,255,255,.18); border: 2px dashed rgba(255,255,255,.5);
  border-radius: 8px; padding: 8px; text-align: center; cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 60px; transition: all .15s ease;
  color: #fff;
}
.t3-builder-cell:hover { background: rgba(255,255,255,.3); }
.t3-builder-cell.revealed {
  background: rgba(252,211,77,.4); border-color: #FCD34D; border-style: solid;
  cursor: default;
}
.t3-builder-cell .b-eq     { font-size: .78rem; opacity: .9; }
.t3-builder-cell .b-val    { font-size: 1.3rem; margin-top: 2px; }
.t3-builder-cell .b-prompt { font-size: .78rem; opacity: .85; font-weight: 600; font-family: 'Inter', sans-serif; }
.t3-builder-total {
  margin-top: 14px; padding: 12px;
  background: rgba(255,255,255,.18); border-radius: 12px; text-align: center;
  font-size: .92rem;
}
.t3-builder-total .t-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; color: #FCD34D; font-weight: 800;
  display: block; margin-top: 4px;
}
.t3-builder-total .t-val.done {
  font-size: 1.5rem; color: #FCD34D;
  text-shadow: 0 0 12px rgba(252,211,77,.6);
}
.t3-builder-reset {
  margin: 10px auto 0; display: block; background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t3-builder-reset:hover { background: rgba(255,255,255,.32); }

/* ── ⑥ Estimate Speed Round (Try-It) ─────────────────────── */
.t3-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t3-speed-q {
  font-size: 1rem; font-weight: 800; text-align: center; margin-bottom: 14px;
}
.t3-speed-q .target {
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: #4F46E5;
  background: #EEF2FF; padding: 3px 10px; border-radius: 8px;
}
.t3-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px;
}
.t3-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.t3-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.t3-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.t3-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.t3-speed-opt-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem; font-weight: 800; color: #2A2233;
}
.t3-speed-opt-val { font-size: 1.2rem; font-weight: 800; margin-top: 4px; color: #4F46E5; }
.t3-speed-opt.right .t3-speed-opt-val { color: #16A36B; }
.t3-speed-opt.wrong .t3-speed-opt-val { color: #DC2626; }
.t3-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.t3-speed-fb.right { color: #16A36B; font-weight: 800; }
.t3-speed-fb.wrong { color: #DC2626; }
.t3-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t3-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   T4 — Multiply Decimals (visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── ① Decimal Slide-Right Visualizer ──────────────────────── */
.t4-slider-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t4-slider-row {
  display: grid; grid-template-columns: 100px 1fr auto; gap: 12px;
  align-items: center; margin-bottom: 8px;
}
.t4-slider-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .92rem;
  font-weight: 800; color: #4F46E5; text-align: right;
}
.t4-slider-num {
  display: flex; gap: 2px; align-items: center; min-height: 44px; justify-content: flex-start;
}
.t4-slider-tile {
  width: 32px; height: 42px; border-radius: 6px;
  background: #4F46E5; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.15rem; font-weight: 800;
  transition: all .3s ease;
}
.t4-slider-tile.faded { background: #C7D2FE; color: #4F46E5; opacity: .8; }
.t4-slider-tile.pad   { background: #FCD34D; color: #7C2D12; box-shadow: 0 0 0 2px #F0A93B; }
.t4-slider-dot {
  width: 14px; height: 42px;
  display: flex; align-items: flex-end; justify-content: center;
  color: #DC2626; font-size: 1.8rem; font-weight: 900; line-height: 1;
  padding-bottom: 4px;
  background: #FCD34D; border-radius: 6px;
  box-shadow: 0 0 6px rgba(220,38,38,.4);
}
.t4-slider-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem; font-weight: 800; color: #16A36B;
  white-space: nowrap;
}
.t4-slider-note {
  margin-top: 12px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t4-slider-note strong { color: #4F46E5; }
.t4-slider-warn {
  margin-top: 8px; padding: 10px 14px; background: #FEF3C7;
  border-radius: 10px; font-size: .85rem; line-height: 1.5; color: #7A5418;
  border-left: 3px solid #F0A93B;
}
.t4-slider-warn strong { color: #92400E; }
@media (max-width: 460px) {
  .t4-slider-row { grid-template-columns: 80px 1fr auto; gap: 8px; }
  .t4-slider-eq { font-size: .78rem; }
  .t4-slider-tile { width: 26px; height: 34px; font-size: .95rem; }
  .t4-slider-dot { width: 10px; height: 34px; font-size: 1.4rem; }
  .t4-slider-val { font-size: .92rem; }
}

/* ── ② Decimal-Place Counter ───────────────────────────────── */
.t4-rule-banner {
  background: #EEF2FF; border-left: 4px solid #4F46E5;
  padding: 12px 16px; border-radius: 0 10px 10px 0;
  font-size: 1rem; line-height: 1.55;
  margin-top: 8px; color: #2A2233;
}
.t4-rule-banner .hi { color: #DC2626; font-weight: 800; }
.t4-place-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px;
  margin-top: 14px; text-align: center;
}
.t4-place-factors {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.t4-place-factor { background: #fff; border-radius: 12px; padding: 10px 14px; min-width: 100px; }
.t4-place-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.7rem; font-weight: 800; display: inline-flex; align-items: center;
}
.t4-place-num .d {
  display: inline-block; padding: 2px 4px;
}
.t4-place-num .d.boxed {
  background: #FEE2E2; color: #DC2626; border: 2px solid #DC2626;
  border-radius: 6px; padding: 0 6px; margin: 0 2px;
}
.t4-place-num .dot { color: #DC2626; padding: 0 2px; }
.t4-place-num .d.hi { color: #16A36B; font-weight: 800; }
.t4-place-num .d.zero { color: #94A3B8; }
.t4-place-label {
  font-size: .78rem; color: #DC2626; font-weight: 800;
  margin-top: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.t4-place-times { font-size: 1.5rem; font-weight: 800; color: #4F46E5; }
.t4-place-arrow { font-size: 1.5rem; color: #4F46E5; margin: 8px 0; line-height: 1; }
.t4-place-sum {
  background: #fff; border: 2px solid #4F46E5; border-radius: 10px;
  display: inline-block; padding: 8px 16px;
  font-size: 1rem; font-weight: 700;
}
.t4-place-sum strong { color: #DC2626; font-size: 1.2rem; }
.t4-place-step {
  background: #fff; border-radius: 10px; padding: 10px 14px;
  display: inline-block; font-size: .95rem; max-width: 100%;
}
.t4-place-step-label { color: #6F6878; margin-right: 6px; }
.t4-place-step .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: #2A2233;
}
.t4-place-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 12px;
  padding: 12px 18px; display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.8rem; font-weight: 800;
}
.t4-place-meta {
  font-family: 'Inter', sans-serif; font-size: .9rem; color: #16A36B;
  font-weight: 700; margin-left: 12px;
}

/* ── ③ + ⑤ 10×10 Hundredths Grid (shared base) ────────────── */
.t4-grid-wrap, .t4-igrid-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px;
  margin-top: 14px;
}
.t4-grid-axis-top, .t4-igrid-axis-top {
  text-align: center; font-size: .8rem; font-weight: 800;
  color: #BE185D; margin-bottom: 6px;
}
.t4-grid-row, .t4-igrid-row {
  display: flex; align-items: stretch; gap: 8px; justify-content: center;
}
.t4-grid-axis-side, .t4-igrid-axis-side {
  display: flex; align-items: center; justify-content: center;
  writing-mode: horizontal-tb;
  font-size: .78rem; font-weight: 800; color: #1E40AF;
  min-width: 60px; text-align: center; line-height: 1.3;
}
.t4-grid, .t4-igrid {
  display: grid; grid-template-columns: repeat(10, 1fr);
  width: 280px; aspect-ratio: 1 / 1;
  gap: 1px; background: #94A3B8; padding: 1px;
  border-radius: 6px;
}
.t4-grid-cell, .t4-igrid-cell {
  background: #fff; border-radius: 1px; min-height: 0;
  transition: background .2s ease;
}
.t4-grid-cell.row-on { background: #DBEAFE; }
.t4-grid-cell.col-on { background: #FCE7F3; }
.t4-grid-cell.overlap { background: #C4B5FD; box-shadow: inset 0 0 0 1px #7C3AED; }

.t4-grid-legend {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 10px; font-size: .8rem; color: #2A2233;
}
.t4-grid-legend span { display: inline-flex; align-items: center; gap: 4px; }
.t4-grid-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.t4-grid-legend .sw.row { background: #DBEAFE; }
.t4-grid-legend .sw.col { background: #FCE7F3; }
.t4-grid-legend .sw.ov  { background: #C4B5FD; box-shadow: inset 0 0 0 1px #7C3AED; }

.t4-grid-result {
  margin-top: 12px; padding: 12px 16px; background: #fff;
  border: 2px solid #7C3AED; border-radius: 12px; text-align: center;
  font-size: 1rem;
}
.t4-grid-result strong { color: #7C3AED; }
.t4-grid-result .big {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem; color: #7C3AED; margin-left: 6px;
}
@media (max-width: 460px) {
  .t4-grid, .t4-igrid { width: 220px; }
  .t4-grid-axis-side, .t4-igrid-axis-side { min-width: 40px; font-size: .7rem; }
}

/* ── ④ Decimal Algorithm Visualization ────────────────────── */
.t4-algo-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t4-algo-stage {
  background: #fff; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.t4-algo-stage-label {
  font-size: .78rem; font-weight: 800; color: #6F6878;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px;
}
.t4-algo-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; margin-bottom: 4px;
}
.t4-algo-num { display: inline-flex; align-items: center; }
.t4-algo-num .d {
  display: inline-block; padding: 4px 6px; border-radius: 4px;
  font-size: 1.2rem; margin: 0 1px;
}
.t4-algo-num .d.pink  { background: #FCE7F3; color: #BE185D; }
.t4-algo-num .d.blue  { background: #DBEAFE; color: #1E40AF; }
.t4-algo-num .d.green { background: #D1FAE5; color: #065F46; }
.t4-algo-num .d.zero  { background: #F1F5F9; color: #94A3B8; }
.t4-algo-num .dot {
  color: #DC2626; padding: 0 2px; font-size: 1.4rem; line-height: 1;
}
.t4-algo-num .dot.yellow {
  background: #FCD34D; color: #7C2D12; padding: 4px 4px; border-radius: 4px;
  box-shadow: 0 0 0 2px #F0A93B; font-size: 1.1rem;
}
.t4-algo-num.big .d { font-size: 1.4rem; }
.t4-algo-op { font-size: 1.1rem; font-weight: 800; color: #6F6878; padding: 0 4px; }
.t4-algo-meta { font-family: 'Inter', sans-serif; font-size: .82rem; color: #6F6878; margin-left: 6px; }
.t4-algo-rule { border-top: 2px solid #2A2233; margin: 6px 0 0; }
.t4-algo-trailing { font-size: .75rem; color: #94A3B8; font-style: italic; margin-top: 4px; }
.t4-algo-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 12px;
  padding: 12px 18px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem; font-weight: 800; margin-top: 8px;
}
.t4-algo-answer strong { color: #16A36B; font-size: 1.5rem; margin-left: 6px; }
.t4-algo-note {
  background: #FEF3C7; border-radius: 10px; padding: 10px 14px;
  font-size: .88rem; color: #7A5418; margin-top: 12px;
  border-left: 4px solid #F0A93B; line-height: 1.5;
}
.t4-algo-note strong { color: #92400E; }

/* ── ⑤ Interactive Grid Builder ────────────────────────────── */
.t4-igrid-wrap { background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%); color: #fff; }
.t4-igrid-wrap .t4-igrid-axis-top { color: #FBCFE8; }
.t4-igrid-wrap .t4-igrid-axis-side { color: #BFDBFE; }
.t4-igrid-q {
  font-size: 1.15rem; font-weight: 800; text-align: center; margin-bottom: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.t4-igrid {
  background: rgba(255,255,255,.3);
}
.t4-igrid-cell { background: rgba(255,255,255,.95); }
.t4-igrid-cell.row-on { background: #93C5FD; }
.t4-igrid-cell.col-on { background: #F9A8D4; }
.t4-igrid-cell.overlap {
  background: #C4B5FD; box-shadow: inset 0 0 0 1px #7C3AED;
}
.t4-igrid-controls {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 14px;
}
.t4-igrid-btn {
  background: rgba(255,255,255,.2); color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 99px; padding: 8px 14px;
  font-weight: 700; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .82rem;
  transition: all .15s ease;
}
.t4-igrid-btn:hover:not(:disabled) { background: rgba(255,255,255,.32); }
.t4-igrid-btn:disabled { opacity: .4; cursor: not-allowed; }
.t4-igrid-btn.done {
  background: #FCD34D; color: #7C2D12;
  border-color: #FCD34D; pointer-events: none;
}
.t4-igrid-fb {
  margin-top: 12px; padding: 10px 14px; text-align: center;
  background: rgba(255,255,255,.18); border-radius: 10px;
  font-size: .92rem; min-height: 22px; line-height: 1.4;
}
.t4-igrid-fb.done {
  background: #FCD34D; color: #7C2D12; font-weight: 800;
}
.t4-igrid-reset {
  margin: 10px auto 0; display: block;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t4-igrid-reset:hover { background: rgba(255,255,255,.32); }

/* ── ⑥ Slide Speed Round ──────────────────────────────────── */
.t4-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t4-speed-q {
  font-size: 1rem; font-weight: 800; text-align: center; margin-bottom: 14px;
}
.t4-speed-q .target {
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: #4F46E5;
  background: #EEF2FF; padding: 3px 10px; border-radius: 8px;
}
.t4-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.t4-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.t4-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.t4-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.t4-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.t4-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.25rem; font-weight: 800; color: #4F46E5;
}
.t4-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t4-speed-opt.right .t4-speed-opt-val { color: #16A36B; }
.t4-speed-opt.wrong .t4-speed-opt-val { color: #DC2626; }
.t4-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.t4-speed-fb.right { color: #16A36B; font-weight: 800; }
.t4-speed-fb.wrong { color: #DC2626; }
.t4-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t4-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   T5 — Divide Whole Numbers (visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── ① Cancel-Matching-Zeros Visualizer ────────────────────── */
.t5-cancel-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t5-cancel-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 8px 12px; background: #fff; border-radius: 10px;
  justify-content: flex-start;
}
.t5-cancel-num {
  display: inline-flex; gap: 1px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #2A2233;
}
.t5-cancel-num .d {
  background: #DBEAFE; color: #1E40AF; padding: 4px 8px; border-radius: 4px;
}
.t5-cancel-num .d.zero { background: #FCD34D; color: #7C2D12; position: relative; }
.t5-cancel-num .d.zero.strike { opacity: .85; }
.t5-cancel-num .d.zero.strike::after {
  content: ''; position: absolute; inset: 50% -1px auto -1px; height: 3px;
  background: #DC2626; transform: translateY(-50%);
}
.t5-cancel-op {
  font-size: 1.3rem; font-weight: 800; color: #6F6878; padding: 0 4px;
}
.t5-cancel-eq { font-size: 1.3rem; font-weight: 800; color: #6F6878; }
.t5-cancel-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.4rem; font-weight: 800; color: #16A36B;
  padding: 4px 10px; background: #D1FAE5; border-radius: 6px;
}
.t5-cancel-tag {
  font-size: .78rem; color: #6F6878; margin-left: auto; font-style: italic;
}
.t5-cancel-note {
  margin-top: 10px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t5-cancel-note strong { color: #4F46E5; }
@media (max-width: 460px) {
  .t5-cancel-row { padding: 6px 8px; gap: 6px; }
  .t5-cancel-num { font-size: 1.05rem; }
  .t5-cancel-num .d { padding: 3px 5px; }
  .t5-cancel-val { font-size: 1.15rem; padding: 3px 7px; }
  .t5-cancel-tag { width: 100%; margin-left: 0; text-align: right; font-size: .72rem; }
}

/* ── ② Compatible-Numbers Estimator ────────────────────────── */
.t5-est-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t5-est-orig {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.3rem; flex-wrap: wrap;
}
.t5-est-num {
  background: #fff; padding: 6px 12px; border-radius: 8px; color: #2A2233;
}
.t5-est-op { color: #4F46E5; }
.t5-est-arrow { color: #6F6878; font-size: 1.1rem; }
.t5-est-label { font-family: 'Inter', sans-serif; font-size: .8rem; color: #6F6878; font-weight: 700; }
.t5-est-snap {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 16px 0;
}
.t5-est-snap-box {
  background: #fff; border-radius: 12px; padding: 12px;
  text-align: center; min-width: 100px;
  border: 2px solid #94A3B8;
}
.t5-est-snap-from {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem; color: #94A3B8; text-decoration: line-through;
}
.t5-est-snap-arrow { color: #16A36B; font-size: 1.2rem; margin: 4px 0; line-height: 1; }
.t5-est-snap-to {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem; font-weight: 800; color: #16A36B;
}
.t5-est-snap-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t5-est-snap-divider { font-size: 1.5rem; font-weight: 800; color: #4F46E5; }

.t5-est-result {
  background: #fff; border: 2px solid #4F46E5; border-radius: 12px;
  padding: 12px 16px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.05rem;
}
.t5-est-result strong { color: #4F46E5; font-size: 1.4rem; }
.t5-est-actual {
  display: block; font-family: 'Inter', sans-serif; font-size: .82rem;
  color: #16A36B; margin-top: 4px; font-weight: 600;
}
.t5-est-placeval {
  margin-top: 14px; text-align: center;
}
.t5-est-placeval-label { font-size: .82rem; color: #6F6878; margin-bottom: 6px; font-weight: 700; }
.t5-est-placeval-bar {
  display: inline-flex; gap: 0; border-radius: 10px; overflow: hidden;
  border: 2px solid #94A3B8;
}
.t5-est-placeval-col {
  background: #F1F5F9; padding: 8px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .85rem; color: #94A3B8;
  text-transform: uppercase; letter-spacing: .04em;
  border-right: 1px solid #CBD5E1;
}
.t5-est-placeval-col:last-child { border-right: 0; }
.t5-est-placeval-col.hi {
  background: #4F46E5; color: #fff;
  box-shadow: inset 0 0 0 2px #FCD34D;
}
.t5-est-placeval-meta { font-size: .78rem; color: #4F46E5; margin-top: 6px; font-weight: 700; }
@media (max-width: 460px) {
  .t5-est-snap { gap: 8px; }
  .t5-est-snap-box { padding: 8px; min-width: 80px; }
}

/* ── ③ Partial-Quotients Subtract-Stack ───────────────────── */
.t5-pq-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t5-pq-title {
  text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.15rem; color: #2A2233; margin-bottom: 12px;
}
.t5-pq-stack {
  background: #fff; border-radius: 10px; padding: 14px 18px;
  max-width: 380px; margin: 0 auto;
}
.t5-pq-row {
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  align-items: center;
}
.t5-pq-row.last { padding-top: 6px; }
.t5-pq-left { text-align: right; }
.t5-pq-line {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.4rem; font-weight: 800; color: #2A2233;
}
.t5-pq-line.green { color: #16A36B; }
.t5-pq-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800;
}
.t5-pq-sub.blue { color: #1E40AF; }
.t5-pq-sub.pink { color: #BE185D; }
.t5-pq-rule { border-top: 2px solid #2A2233; margin: 4px 0; }
.t5-pq-right {
  padding: 6px 10px; border-radius: 8px; text-align: center; min-width: 80px;
}
.t5-pq-right.blue { background: #DBEAFE; color: #1E40AF; }
.t5-pq-right.pink { background: #FCE7F3; color: #BE185D; }
.t5-pq-right.total { background: #4F46E5; color: #fff; }
.t5-pq-chunk-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  opacity: .85; font-weight: 800;
}
.t5-pq-chunk-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82rem; font-weight: 800; margin-top: 2px;
}
.t5-pq-chunk-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem; font-weight: 800; margin-top: 4px;
}
.t5-pq-rem {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.6rem; font-weight: 800; color: #F59E0B;
}
.t5-pq-rem-label { font-size: .72rem; color: #6F6878; }
.t5-pq-total-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  opacity: .9; font-weight: 800;
}
.t5-pq-total-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.6rem; font-weight: 800; margin-top: 2px;
}
.t5-pq-answer {
  margin-top: 12px; padding: 12px 16px; background: #ECFDF5;
  border: 2px solid #16A36B; border-radius: 12px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem;
}
.t5-pq-answer strong { color: #16A36B; font-size: 1.4rem; }

/* ── ④ Long-Division Algorithm ────────────────────────────── */
.t5-algo-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t5-algo-placeval {
  display: grid; grid-template-columns: repeat(3, 36px);
  gap: 4px; justify-content: center; margin-bottom: 4px;
}
.t5-algo-pv-col {
  background: #F1F5F9; padding: 4px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .62rem; color: #94A3B8;
  text-transform: uppercase; text-align: center; border-radius: 3px;
  letter-spacing: .02em;
}
.t5-algo-pv-col.hi { background: #FCD34D; color: #7C2D12; }
.t5-algo-grid {
  display: grid;
  grid-template-columns: 38px 36px 36px 36px 1fr;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.25rem; font-weight: 800;
  align-items: center;
}
.t5-algo-cell { text-align: center; padding: 4px 0; min-height: 28px; }
.t5-algo-cell.q { background: #FFF; border-radius: 5px; box-shadow: 0 0 0 1px #CBD5E1; }
.t5-algo-cell.q.blue  { background: #DBEAFE; color: #1E40AF; box-shadow: 0 0 0 2px #1E40AF; }
.t5-algo-cell.q.pink  { background: #FCE7F3; color: #BE185D; box-shadow: 0 0 0 2px #BE185D; }
.t5-algo-cell.d { color: #2A2233; }
.t5-algo-cell.op { padding: 2px 0; border-radius: 4px; }
.t5-algo-cell.op.blue { background: #DBEAFE; color: #1E40AF; }
.t5-algo-cell.op.green { background: #D1FAE5; color: #065F46; }
.t5-algo-cell.op.pink { background: #FCE7F3; color: #BE185D; }
.t5-algo-cell.rem.amber { background: #FEF3C7; color: #92400E; border-radius: 5px; box-shadow: 0 0 0 2px #F59E0B; }
.t5-algo-divisor {
  text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.15rem; color: #4F46E5;
}
.t5-algo-rule { border-top: 2px solid #2A2233; height: 4px; align-self: center; }
.t5-algo-cell.label {
  font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700;
  color: #6F6878; text-align: left; padding-left: 6px;
}
.t5-algo-cell.label.muted { color: #94A3B8; font-weight: 500; font-style: italic; }
.t5-algo-cell.label.q-label { color: #4F46E5; font-weight: 800; }
.t5-algo-answer {
  margin-top: 12px; padding: 12px 16px; background: #ECFDF5;
  border: 2px solid #16A36B; border-radius: 12px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.05rem;
}
.t5-algo-answer strong { color: #16A36B; font-size: 1.4rem; }
.t5-algo-note {
  background: #FEF3C7; border-radius: 10px; padding: 10px 14px;
  font-size: .85rem; color: #7A5418; margin-top: 12px;
  border-left: 4px solid #F0A93B; line-height: 1.5;
}
.t5-algo-note strong { color: #92400E; }

/* ── ⑤ Cookie-Box Remainder Interpreter ──────────────────── */
.t5-rem-wrap {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 20px; color: #fff; margin-top: 12px;
}
.t5-rem-boxes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px; margin-bottom: 16px;
}
.t5-rem-box {
  background: rgba(255,255,255,.15); border-radius: 10px;
  padding: 8px 6px; text-align: center; border: 2px solid rgba(255,255,255,.3);
}
.t5-rem-box.full { background: rgba(252,211,77,.22); border-color: #FCD34D; }
.t5-rem-box.partial { background: rgba(248,113,113,.25); border-color: #FCA5A5; border-style: dashed; }
.t5-rem-box-label {
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; opacity: .9;
}
.t5-rem-cookies {
  font-size: .8rem; line-height: 1.2; margin-top: 4px;
}
.t5-rem-cookies.hi {
  font-size: 1.1rem; color: #FCD34D;
}
.t5-rem-q {
  font-size: 1rem; font-weight: 800; text-align: center; margin: 8px 0 12px;
}
.t5-rem-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.t5-rem-opt {
  background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.4);
  border-radius: 12px; padding: 12px; cursor: pointer; text-align: center;
  transition: all .15s ease; color: #fff;
}
.t5-rem-opt:hover { background: rgba(255,255,255,.28); }
.t5-rem-opt.right { background: #16A36B; border-color: #16A36B; }
.t5-rem-opt.wrong { background: #DC2626; border-color: #DC2626; opacity: .85; }
.t5-rem-opt .v {
  display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem; font-weight: 800; line-height: 1;
}
.t5-rem-opt .m {
  display: block; font-size: .72rem; opacity: .85; margin-top: 4px; font-weight: 600;
}
.t5-rem-fb { margin-top: 12px; padding: 10px 14px; min-height: 22px;
  background: rgba(255,255,255,.15); border-radius: 10px;
  font-size: .92rem; text-align: center; line-height: 1.4;
}
.t5-rem-fb.right { background: #16A36B; font-weight: 800; }
.t5-rem-fb.wrong { background: #DC2626; }
.t5-rem-reset {
  margin: 10px auto 0; display: block;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t5-rem-reset:hover { background: rgba(255,255,255,.32); }
.t5-rem-meta {
  margin-top: 14px; padding: 12px 14px;
  background: rgba(255,255,255,.18); border-radius: 10px;
  font-size: .85rem; line-height: 1.6;
}
.t5-rem-meta strong { color: #FCD34D; }

/* ── ⑥ Zero-Cancel Speed Round ───────────────────────────── */
.t5-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t5-speed-q {
  font-size: 1.1rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: #4F46E5;
  background: #EEF2FF; padding: 8px 12px; border-radius: 8px; display: block;
}
.t5-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.t5-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.t5-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.t5-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.t5-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.t5-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem; font-weight: 800; color: #4F46E5;
}
.t5-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t5-speed-opt.right .t5-speed-opt-val { color: #16A36B; }
.t5-speed-opt.wrong .t5-speed-opt-val { color: #DC2626; }
.t5-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.t5-speed-fb.right { color: #16A36B; font-weight: 800; }
.t5-speed-fb.wrong { color: #DC2626; }
.t5-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t5-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   T6 — Divide Decimals (visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── ① Decimal Slide-LEFT Visualizer ──────────────────────── */
.t6-slider-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t6-slider-row {
  display: grid; grid-template-columns: 100px 1fr auto; gap: 12px;
  align-items: center; margin-bottom: 8px;
}
.t6-slider-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .92rem;
  font-weight: 800; color: #4F46E5; text-align: right;
}
.t6-slider-num {
  display: flex; gap: 2px; align-items: center; min-height: 44px; justify-content: flex-start;
}
.t6-slider-tile {
  width: 32px; height: 42px; border-radius: 6px;
  background: #4F46E5; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.15rem; font-weight: 800;
  transition: all .3s ease;
}
.t6-slider-tile.pad { background: #FCD34D; color: #7C2D12; box-shadow: 0 0 0 2px #F0A93B; }
.t6-slider-dot {
  width: 14px; height: 42px;
  display: flex; align-items: flex-end; justify-content: center;
  color: #DC2626; font-size: 1.8rem; font-weight: 900; line-height: 1;
  padding-bottom: 4px;
  background: #FCD34D; border-radius: 6px;
  box-shadow: 0 0 6px rgba(220,38,38,.4);
}
.t6-slider-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem; font-weight: 800; color: #16A36B;
  white-space: nowrap;
}
.t6-slider-note {
  margin-top: 12px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t6-slider-note strong { color: #4F46E5; }
.t6-slider-warn {
  margin-top: 8px; padding: 10px 14px; background: #FEF3C7;
  border-radius: 10px; font-size: .85rem; line-height: 1.5; color: #7A5418;
  border-left: 3px solid #F0A93B;
}
.t6-slider-warn strong { color: #92400E; }
@media (max-width: 460px) {
  .t6-slider-row { grid-template-columns: 80px 1fr auto; gap: 8px; }
  .t6-slider-eq { font-size: .78rem; }
  .t6-slider-tile { width: 26px; height: 34px; font-size: .95rem; }
  .t6-slider-dot { width: 10px; height: 34px; font-size: 1.4rem; }
  .t6-slider-val { font-size: .92rem; }
}

/* ── ② Compatible-Numbers Snap Estimator ─────────────────── */
.t6-est-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t6-est-orig {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.3rem; flex-wrap: wrap;
}
.t6-est-num { background: #fff; padding: 6px 12px; border-radius: 8px; color: #2A2233; }
.t6-est-op { color: #4F46E5; }
.t6-est-arrow { color: #6F6878; font-size: 1.1rem; }
.t6-est-label { font-family: 'Inter', sans-serif; font-size: .8rem; color: #6F6878; font-weight: 700; }
.t6-est-snap {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 16px 0;
}
.t6-est-snap-box {
  background: #fff; border-radius: 12px; padding: 12px;
  text-align: center; min-width: 100px;
  border: 2px solid #94A3B8;
}
.t6-est-snap-from {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem; color: #94A3B8; text-decoration: line-through;
}
.t6-est-snap-arrow { color: #16A36B; font-size: 1.2rem; margin: 4px 0; line-height: 1; }
.t6-est-snap-to {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem; font-weight: 800; color: #16A36B;
}
.t6-est-snap-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t6-est-snap-divider { font-size: 1.5rem; font-weight: 800; color: #4F46E5; }

.t6-est-result {
  background: #fff; border: 2px solid #4F46E5; border-radius: 12px;
  padding: 12px 16px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.05rem;
}
.t6-est-result strong { color: #4F46E5; font-size: 1.4rem; }
.t6-est-actual {
  display: block; font-family: 'Inter', sans-serif; font-size: .82rem;
  color: #16A36B; margin-top: 4px; font-weight: 600;
}
.t6-est-pairs {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  justify-content: center;
}
.t6-est-pairs-label { font-size: .82rem; color: #6F6878; font-weight: 700; }
.t6-est-pair {
  background: #EEF2FF; color: #4F46E5;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .88rem; font-weight: 800; padding: 6px 10px; border-radius: 8px;
}
@media (max-width: 460px) {
  .t6-est-snap { gap: 8px; }
  .t6-est-snap-box { padding: 8px; min-width: 80px; }
}

/* ── ③ Scale-Both-Sides Visualizer ────────────────────────── */
.t6-scale-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t6-scale-stage {
  background: #fff; border-radius: 12px; padding: 12px 14px;
  text-align: center; max-width: 360px; margin: 0 auto;
}
.t6-scale-stage.done { border: 2px solid #16A36B; background: #ECFDF5; }
.t6-scale-label {
  font-size: .72rem; font-weight: 800; color: #6F6878;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.t6-scale-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.4rem;
  display: inline-flex; align-items: center; gap: 8px;
}
.t6-scale-num { padding: 4px 8px; border-radius: 6px; }
.t6-scale-num.pink  { background: #FCE7F3; color: #BE185D; }
.t6-scale-num.blue  { background: #DBEAFE; color: #1E40AF; }
.t6-scale-num.green { background: #D1FAE5; color: #065F46; }
.t6-scale-op { color: #4F46E5; font-size: 1.2rem; }
.t6-scale-note {
  font-family: 'Inter', sans-serif; font-size: .8rem;
  color: #6F6878; margin-top: 6px; font-weight: 500;
}
.t6-scale-arrow {
  text-align: center; color: #4F46E5; font-weight: 800;
  font-size: .92rem; padding: 8px 0;
}
.t6-scale-why {
  margin-top: 14px; padding: 12px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.55;
  border-left: 4px solid #4F46E5;
}
.t6-scale-why strong { color: #4F46E5; }

/* ── ④ Long-Division with Decimal Alignment ───────────────── */
.t6-algo-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t6-algo-grid {
  display: grid;
  grid-template-columns: 38px 32px 18px 32px 32px 1fr;
  gap: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800;
  align-items: center;
}
.t6-algo-cell { text-align: center; padding: 4px 0; min-height: 28px; }
.t6-algo-cell.q { background: #fff; border-radius: 5px; box-shadow: 0 0 0 1px #CBD5E1; }
.t6-algo-cell.q.green { background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B; }
.t6-algo-cell.d { color: #2A2233; }
.t6-algo-cell.op { padding: 2px 0; border-radius: 4px; font-size: 1.1rem; }
.t6-algo-cell.op.blue { background: #DBEAFE; color: #1E40AF; }
.t6-algo-cell.op.green { background: #D1FAE5; color: #065F46; }
.t6-algo-cell.op.pink { background: #FCE7F3; color: #BE185D; }
.t6-algo-cell.rem.amber { background: #FEF3C7; color: #92400E; border-radius: 5px; box-shadow: 0 0 0 2px #F59E0B; }
.t6-algo-cell.dot {
  color: #DC2626; font-size: 1.5rem; line-height: 1; padding: 0;
  align-self: center;
}
.t6-algo-cell.dot.yellow {
  background: #FCD34D; color: #7C2D12;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #F0A93B;
  font-size: 1.2rem; padding: 4px 0;
}
.t6-algo-cell.dot.muted { color: #94A3B8; background: transparent; box-shadow: none; }
.t6-algo-divisor {
  text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.15rem; color: #4F46E5;
}
.t6-algo-rule { border-top: 2px solid #2A2233; height: 4px; align-self: center; }
.t6-algo-cell.label {
  font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700;
  color: #6F6878; text-align: left; padding-left: 6px;
}
.t6-algo-cell.label.muted { color: #94A3B8; font-weight: 500; font-style: italic; }
.t6-algo-cell.label.q-label { color: #4F46E5; font-weight: 800; }
.t6-algo-answer {
  margin-top: 12px; padding: 12px 16px; background: #ECFDF5;
  border: 2px solid #16A36B; border-radius: 12px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.05rem;
}
.t6-algo-answer strong { color: #16A36B; font-size: 1.4rem; }
.t6-algo-note {
  background: #FEF3C7; border-radius: 10px; padding: 10px 14px;
  font-size: .85rem; color: #7A5418; margin-top: 12px;
  border-left: 4px solid #F0A93B; line-height: 1.5;
}
.t6-algo-note strong { color: #92400E; }

/* ── ⑤ "How Many Halves Fit?" Interactive ────────────────── */
.t6-fit-wrap {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 20px; color: #fff; margin-top: 12px;
}
.t6-fit-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; text-align: center; margin-bottom: 14px;
}
.t6-fit-strip {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  background: rgba(255,255,255,.1); padding: 12px; border-radius: 12px;
  margin-bottom: 14px;
}
.t6-fit-whole {
  position: relative;
  width: 60px; height: 70px;
  background: rgba(255,255,255,.18);
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,.3);
  display: flex; overflow: hidden;
  opacity: 0; transition: opacity .3s ease;
}
.t6-fit-whole.show { opacity: 1; }
.t6-fit-whole.cut { background: rgba(255,255,255,.05); }
.t6-fit-half {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.05rem; color: rgba(255,255,255,.4);
  transition: all .3s ease;
}
.t6-fit-half .lbl { opacity: 0; }
.t6-fit-whole.cut .t6-fit-half {
  background: rgba(252,211,77,.25);
  color: #FCD34D;
}
.t6-fit-whole.cut .t6-fit-half .lbl { opacity: 1; }
.t6-fit-whole.cut .t6-fit-half.left  { border-right: 1px dashed rgba(252,211,77,.5); }
.t6-fit-whole.counted .t6-fit-half { background: #FCD34D; color: #7C2D12; }
.t6-fit-wholelabel {
  position: absolute; top: 2px; left: 4px;
  font-family: 'Inter', sans-serif; font-size: .65rem;
  color: rgba(255,255,255,.6); font-weight: 700;
}
.t6-fit-counter {
  text-align: center; font-size: 1rem;
  background: rgba(255,255,255,.18); padding: 10px 14px; border-radius: 10px;
  min-height: 22px; font-weight: 700;
}
.t6-fit-counter.done {
  background: #FCD34D; color: #7C2D12; font-weight: 800;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.2rem;
}
.t6-fit-controls {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 14px;
}
.t6-fit-btn {
  background: rgba(255,255,255,.2); color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 99px; padding: 8px 14px;
  font-weight: 700; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .82rem;
  transition: all .15s ease;
}
.t6-fit-btn:hover:not(:disabled) { background: rgba(255,255,255,.32); }
.t6-fit-btn:disabled { opacity: .4; cursor: not-allowed; }
.t6-fit-btn.done {
  background: #FCD34D; color: #7C2D12;
  border-color: #FCD34D; pointer-events: none;
}
.t6-fit-fb {
  margin-top: 12px; padding: 10px 14px; text-align: center;
  background: rgba(255,255,255,.15); border-radius: 10px;
  font-size: .92rem; min-height: 22px; line-height: 1.4;
}
.t6-fit-fb.done { background: #FCD34D; color: #7C2D12; font-weight: 800; }
.t6-fit-reset {
  margin: 10px auto 0; display: block;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t6-fit-reset:hover { background: rgba(255,255,255,.32); }
.t6-fit-meta {
  margin-top: 14px; padding: 12px 14px;
  background: rgba(255,255,255,.18); border-radius: 10px;
  font-size: .85rem; line-height: 1.55;
}
.t6-fit-meta strong { color: #FCD34D; }

/* ── ⑥ Slide-LEFT Speed Round ────────────────────────────── */
.t6-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t6-speed-q {
  font-size: 1rem; font-weight: 800; text-align: center; margin-bottom: 14px;
}
.t6-speed-q .target {
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: #4F46E5;
  background: #EEF2FF; padding: 3px 10px; border-radius: 8px;
}
.t6-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.t6-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.t6-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.t6-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.t6-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.t6-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.25rem; font-weight: 800; color: #4F46E5;
}
.t6-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t6-speed-opt.right .t6-speed-opt-val { color: #16A36B; }
.t6-speed-opt.wrong .t6-speed-opt-val { color: #DC2626; }
.t6-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.t6-speed-fb.right { color: #16A36B; font-weight: 800; }
.t6-speed-fb.wrong { color: #DC2626; }
.t6-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t6-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   T7 — Add & Subtract Fractions (visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── ① Bar-Strip Visualizer (1/2 + 1/4) ───────────────────── */
.t7-bar-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t7-bar-row {
  display: grid; grid-template-columns: 60px 1fr 130px; gap: 10px;
  align-items: center; margin-bottom: 8px;
}
.t7-bar-row.sum { padding-top: 4px; }
.t7-bar-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.05rem; font-weight: 800; color: #4F46E5; text-align: right;
}
.t7-bar-label.plus { color: #6F6878; }
.t7-bar {
  display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 2px;
  height: 36px;
  background: #fff; border: 2px solid #2A2233; border-radius: 6px;
  overflow: hidden;
}
.t7-cell { background: #fff; }
.t7-cell.yellow { background: #FCD34D; }
.t7-cell.blue { background: #93C5FD; }
.t7-bar-meta {
  font-family: 'Inter', sans-serif; font-size: .75rem;
  color: #6F6878; line-height: 1.3;
}
.t7-bar-arrow {
  text-align: center; color: #4F46E5; font-weight: 800;
  font-size: .9rem; padding: 8px 0;
}
.t7-mistake {
  margin-top: 14px; padding: 12px 16px; background: #FEF2F2;
  border-left: 4px solid #DC2626; border-radius: 0 10px 10px 0;
  font-size: .88rem; line-height: 1.5; color: #7F1D1D;
}
.t7-mistake .t7-bad {
  text-decoration: line-through; font-weight: 800;
  background: #FECACA; padding: 2px 6px; border-radius: 4px;
}
@media (max-width: 460px) {
  .t7-bar-row { grid-template-columns: 48px 1fr; gap: 6px; }
  .t7-bar-meta { grid-column: 1 / -1; padding-left: 54px; font-size: .7rem; }
}

/* ── ② LCM Multiples Ladder ───────────────────────────────── */
.t7-lcm-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t7-lcm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 380px; margin: 0 auto;
}
.t7-lcm-col {
  background: #fff; border-radius: 12px; padding: 12px; text-align: center;
}
.t7-lcm-head {
  font-size: .82rem; font-weight: 800; padding: 4px 8px;
  border-radius: 6px; margin-bottom: 8px;
}
.t7-lcm-head.pink { background: #FCE7F3; color: #BE185D; }
.t7-lcm-head.blue { background: #DBEAFE; color: #1E40AF; }
.t7-lcm-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem; font-weight: 800; color: #2A2233;
  background: #F8FAFC; padding: 6px 0; margin: 4px 0; border-radius: 6px;
  border: 1px solid #E2E8F0;
}
.t7-lcm-chip.match {
  background: #FCD34D; color: #7C2D12;
  border: 2px solid #F0A93B;
  box-shadow: 0 0 0 3px rgba(252,211,77,.3);
  position: relative;
}
.t7-lcm-chip.match::before {
  content: '★'; position: absolute; left: 8px; top: 50%;
  transform: translateY(-50%); color: #F0A93B; font-size: 1rem;
}
.t7-lcm-found {
  margin-top: 14px; padding: 12px 16px;
  background: #fff; border: 2px solid #F0A93B; border-radius: 12px;
  text-align: center; font-size: 1rem;
}
.t7-lcm-found strong { color: #92400E; }
.t7-lcm-found .big {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.6rem; color: #92400E; font-weight: 800;
  margin-left: 6px;
}
.t7-lcm-rewrite {
  margin-top: 14px; display: flex; flex-direction: column; gap: 8px;
  align-items: center;
}
.t7-lcm-step {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.t7-lcm-step.sum {
  margin-top: 6px; padding: 8px 14px;
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 10px;
}
.t7-lcm-frac {
  font-size: 1rem; font-weight: 800; padding: 4px 8px; border-radius: 6px;
}
.t7-lcm-frac.pink { background: #FCE7F3; color: #BE185D; }
.t7-lcm-frac.blue { background: #DBEAFE; color: #1E40AF; }
.t7-lcm-frac.muted { color: #94A3B8; font-size: .92rem; }
.t7-lcm-frac.result { background: #FEF3C7; color: #92400E; }
.t7-lcm-frac.result b { font-size: 1.2rem; }
.t7-lcm-eq { color: #6F6878; font-weight: 800; }

/* ── ③ Borrow-1-Whole Block Visualizer ───────────────────── */
.t7-borrow-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t7-borrow-stage {
  background: #fff; border-radius: 12px; padding: 14px 12px;
  margin-bottom: 8px;
}
.t7-borrow-stage.final { background: #ECFDF5; border: 2px solid #16A36B; }
.t7-borrow-label {
  font-size: .85rem; color: #6F6878; font-weight: 700; margin-bottom: 8px;
}
.t7-borrow-label strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: #4F46E5;
  font-size: 1rem; margin-left: 4px;
}
.t7-borrow-shape {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.t7-borrow-whole {
  width: 48px; height: 48px; border-radius: 6px;
  background: #FCE7F3; border: 2px solid #BE185D;
  position: relative;
}
.t7-borrow-whole.faded {
  background: rgba(252,231,243,.3); border-style: dashed;
  display: flex; align-items: center; justify-content: center;
}
.t7-borrow-x {
  font-size: .58rem; color: #BE185D; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
}
.t7-borrow-quarters {
  display: grid; grid-template-columns: repeat(4, 12px); gap: 2px;
  margin-left: 4px;
}
.t7-borrow-quarters.wide {
  grid-template-columns: repeat(5, 12px);
}
.t7-borrow-q {
  width: 12px; height: 48px; border-radius: 3px;
  background: #fff; border: 2px solid #BE185D;
}
.t7-borrow-q.pink { background: #FCE7F3; }
.t7-borrow-q.yellow { background: #FCD34D; border-color: #F0A93B; }
.t7-borrow-meta {
  font-family: 'Inter', sans-serif; font-size: .82rem;
  color: #6F6878; margin-top: 8px; line-height: 1.4;
}
.t7-borrow-arrow {
  text-align: center; color: #4F46E5; font-weight: 800;
  font-size: .9rem; padding: 4px 0;
}

/* ── ④ Estimate Number Lines ──────────────────────────────── */
.t7-est-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t7-est-line {
  background: #fff; border-radius: 12px; padding: 12px;
  margin-bottom: 10px;
}
.t7-est-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem; font-weight: 800; color: #4F46E5;
  margin-bottom: 6px;
}
.t7-est-svg { display: block; width: 100%; height: auto; }
.t7-est-rule {
  font-size: .82rem; color: #6F6878; margin-top: 4px; text-align: center;
}
.t7-est-rule strong { color: #16A36B; }
.t7-est-sum {
  margin-top: 12px; padding: 14px 16px;
  background: #fff; border: 2px solid #4F46E5; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.2rem;
}
.t7-est-pill {
  padding: 4px 12px; border-radius: 8px;
  font-size: 1.3rem;
}
.t7-est-pill.pink { background: #FCE7F3; color: #BE185D; }
.t7-est-pill.blue { background: #DBEAFE; color: #1E40AF; }
.t7-est-pill.green { background: #D1FAE5; color: #065F46; font-size: 1.6rem; }
.t7-est-plus, .t7-est-eq { color: #6F6878; }
.t7-est-meta {
  font-family: 'Inter', sans-serif; font-size: .78rem;
  color: #6F6878; font-weight: 600; margin-left: 6px;
}
.t7-est-note {
  background: #FEF3C7; border-radius: 10px; padding: 10px 14px;
  font-size: .85rem; color: #7A5418; margin-top: 12px;
  border-left: 4px solid #F0A93B; line-height: 1.5;
}
.t7-est-note strong { color: #92400E; }

/* ── ⑤ LCM Hunt Mini-Game ────────────────────────────────── */
.t7-hunt-wrap {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 20px; color: #fff; margin-top: 12px;
}
.t7-hunt-rows { display: flex; flex-direction: column; gap: 14px; }
.t7-hunt-row {
  background: rgba(255,255,255,.12); border-radius: 12px; padding: 12px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.t7-hunt-rowlabel {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82rem; font-weight: 800;
  padding: 4px 10px; border-radius: 6px; margin-right: 4px;
}
.t7-hunt-rowlabel.pink { background: #FCE7F3; color: #BE185D; }
.t7-hunt-rowlabel.blue { background: #DBEAFE; color: #1E40AF; }
.t7-hunt-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem; font-weight: 800; color: #fff;
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 8px; padding: 6px 10px; min-width: 36px; text-align: center;
  cursor: pointer; transition: all .15s ease;
}
.t7-hunt-chip:hover { background: rgba(255,255,255,.32); }
.t7-hunt-chip.lonely {
  background: rgba(248,113,113,.3); border-color: #FCA5A5;
  color: #FECACA; opacity: .7;
}
.t7-hunt-chip.match {
  background: #FCD34D; color: #7C2D12;
  border-color: #FCD34D;
  box-shadow: 0 0 12px rgba(252,211,77,.6);
}
.t7-hunt-chip.lcm {
  background: #16A36B; color: #fff;
  border-color: #16A36B;
  box-shadow: 0 0 18px rgba(22,163,107,.7);
}
.t7-hunt-chip.lcm::after {
  content: ' ★'; color: #FCD34D;
}
.t7-hunt-status {
  margin-top: 14px; padding: 10px 14px;
  background: rgba(255,255,255,.18); border-radius: 10px;
  font-size: .92rem; text-align: center; min-height: 22px; line-height: 1.4;
}
.t7-hunt-status.done {
  background: #FCD34D; color: #7C2D12; font-weight: 800;
}
.t7-hunt-reset {
  margin: 10px auto 0; display: block;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t7-hunt-reset:hover { background: rgba(255,255,255,.32); }

/* ── ⑥ Mixed-Number Add Speed Round ──────────────────────── */
.t7-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t7-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.t7-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.t7-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.t7-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.t7-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.t7-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.t7-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5;
}
.t7-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t7-speed-opt.right .t7-speed-opt-val { color: #16A36B; }
.t7-speed-opt.wrong .t7-speed-opt-val { color: #DC2626; }
.t7-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.t7-speed-fb.right { color: #16A36B; font-weight: 800; }
.t7-speed-fb.wrong { color: #DC2626; }
.t7-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t7-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   T8 — Multiply Fractions (visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── ① Repeated-Addition Bars (5 × 1/4) ───────────────────── */
.t8-bars-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t8-bars-eq {
  text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem; color: #4F46E5; margin-bottom: 12px;
}
.t8-bars-eq strong { color: #2A2233; }
.t8-bars-stack { display: flex; flex-direction: column; gap: 4px; }
.t8-bars-row {
  display: flex; align-items: center; gap: 8px;
}
.t8-bars-tag {
  width: 22px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; color: #6F6878; font-size: .85rem; text-align: right;
}
.t8-bars-strip {
  flex: 1; max-width: 260px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  height: 22px; background: #fff; border: 2px solid #2A2233; border-radius: 4px;
  overflow: hidden;
}
.t8-bars-quarter { background: #fff; }
.t8-bars-quarter.on { background: #FCD34D; }
.t8-bars-combined {
  margin-top: 14px; padding: 12px;
  background: #fff; border: 2px solid #4F46E5; border-radius: 10px;
}
.t8-bars-label {
  text-align: center; font-size: .95rem; margin-bottom: 8px;
}
.t8-bars-label strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: #16A36B;
}
.t8-bars-bigstrip {
  display: flex; gap: 2px;
  height: 28px;
  border: 2px solid #2A2233; border-radius: 6px; overflow: hidden;
  background: #fff;
  max-width: 340px; margin: 0 auto;
}
.t8-bars-bigstrip .t8-bars-quarter {
  width: 56px; flex-shrink: 0;
}
.t8-bars-bigstrip .t8-bars-quarter.on { background: #FCD34D; }
.t8-bars-divider {
  width: 4px; background: #DC2626; flex-shrink: 0;
  box-shadow: 0 0 4px rgba(220,38,38,.5);
}
.t8-bars-axis {
  display: flex; justify-content: space-between;
  max-width: 340px; margin: 4px auto 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .75rem; color: #6F6878;
}
.t8-bars-axis .hi { color: #DC2626; font-weight: 800; }
.t8-bars-shortcut {
  margin-top: 14px; padding: 10px 14px;
  background: #EEF2FF; border-radius: 10px;
  font-size: .88rem; line-height: 1.5;
}
.t8-bars-shortcut strong { color: #4F46E5; }
.t8-bars-shortcut .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #fff; padding: 2px 6px; border-radius: 4px;
}

/* ── ② "Fraction OF" Group Splitter ───────────────────────── */
.t8-of-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 14px;
}
@media (max-width: 460px) { .t8-of-wrap { grid-template-columns: 1fr; } }
.t8-of-card {
  background: #FBF4EA; border-radius: 14px; padding: 14px;
  text-align: center;
}
.t8-of-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.05rem; color: #4F46E5; margin-bottom: 4px;
}
.t8-of-meta {
  font-size: .78rem; color: #6F6878; margin-bottom: 10px;
}
.t8-of-groups {
  display: grid; gap: 6px;
  background: #fff; border: 2px solid #94A3B8; border-radius: 8px;
  padding: 8px; margin-bottom: 10px;
}
.t8-of-groups.two { grid-template-columns: 1fr 1fr; }
.t8-of-groups.three { grid-template-columns: 1fr 1fr 1fr; }
.t8-of-group {
  background: #F1F5F9; border-radius: 6px; padding: 8px 4px;
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  border: 2px dashed #CBD5E1;
}
.t8-of-group.on {
  background: #FCD34D; border-color: #F0A93B; border-style: solid;
}
.t8-of-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #4F46E5;
}
.t8-of-group.on .t8-of-dot { background: #7C2D12; }
.t8-of-answer {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.15rem; color: #16A36B;
}
.t8-of-answer strong { font-size: 1.5rem; }
.t8-of-shortcut {
  margin-top: 14px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t8-of-shortcut strong { color: #4F46E5; }
.t8-of-shortcut .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #fff; padding: 2px 6px; border-radius: 4px;
}

/* ── ③ + ④ Unit Square Area Model ─────────────────────────── */
.t8-grid-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px;
  margin-top: 12px;
}
.t8-grid-eq {
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.05rem; color: #2A2233; margin-bottom: 10px;
}
.t8-grid-eq strong { color: #4F46E5; }
.t8-grid-axis-top {
  text-align: center; font-size: .8rem; font-weight: 800;
  color: #BE185D; margin-bottom: 6px;
}
.t8-grid-row {
  display: flex; align-items: stretch; gap: 8px; justify-content: center;
}
.t8-grid-axis-side {
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; color: #1E40AF;
  min-width: 60px; text-align: center; line-height: 1.3;
}
.t8-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  grid-template-rows: repeat(var(--rows, 3), 1fr);
  width: 220px; aspect-ratio: 1 / 1;
  gap: 1px; background: #94A3B8; padding: 1px;
  border-radius: 6px;
}
.t8-grid-cell {
  background: #fff; border-radius: 1px; min-height: 0;
}
.t8-grid-cell.row-on { background: #DBEAFE; }
.t8-grid-cell.col-on { background: #FCE7F3; }
.t8-grid-cell.overlap { background: #C4B5FD; box-shadow: inset 0 0 0 1px #7C3AED; }
.t8-grid-result {
  margin-top: 12px; padding: 12px 16px; background: #fff;
  border: 2px solid #7C3AED; border-radius: 12px; text-align: center;
  font-size: 1rem;
}
.t8-grid-result strong { color: #7C3AED; }
.t8-grid-result .big {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem; color: #7C3AED; margin-left: 6px;
}
.t8-grid-rule {
  margin-top: 12px; padding: 10px 14px;
  background: #EEF2FF; border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t8-grid-rule strong { color: #4F46E5; }
.t8-grid-rule .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #fff; padding: 2px 6px; border-radius: 4px;
}
.t8-grid-simplify {
  margin-top: 14px; text-align: center;
}
.t8-grid-simplify-arrow {
  font-size: .85rem; color: #16A36B; font-weight: 800;
  margin: 8px 0;
}
.t8-grid-simplify-result {
  display: inline-flex; align-items: center; gap: 8px;
}
.t8-grid-frac {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800;
  background: #fff; padding: 6px 14px; border-radius: 8px;
  border: 2px solid #94A3B8;
}
.t8-grid-frac.final {
  background: #ECFDF5; color: #16A36B; border-color: #16A36B;
  font-size: 1.5rem;
}
.t8-grid-sim-eq { color: #6F6878; font-weight: 800; font-size: 1.2rem; }

/* ── ⑤ "Fraction OF" Picker Mini-Game ─────────────────────── */
.t8-pick-wrap {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 20px; color: #fff; margin-top: 12px;
}
.t8-pick-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; text-align: center; margin-bottom: 14px;
}
.t8-pick-strip {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px;
  background: rgba(255,255,255,.1); padding: 12px; border-radius: 12px;
  margin-bottom: 14px;
}
.t8-pick-strip.grouped {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.t8-pick-strip.grouped > .t8-pick-group-box {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 8px; border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 2px dashed rgba(255,255,255,.4);
}
.t8-pick-strip.grouped > .t8-pick-group-box.taken {
  background: rgba(252,211,77,.3);
  border-color: #FCD34D; border-style: solid;
}
.t8-pick-circle {
  width: 100%; aspect-ratio: 1 / 1;
  background: #fff; border-radius: 50%; opacity: .85;
}
.t8-pick-circle.taken {
  background: #FCD34D;
  box-shadow: 0 0 6px rgba(252,211,77,.5);
}
.t8-pick-counter {
  text-align: center; font-size: 1rem;
  background: rgba(255,255,255,.18); padding: 10px 14px; border-radius: 10px;
  min-height: 22px; font-weight: 700;
}
.t8-pick-counter.done {
  background: #FCD34D; color: #7C2D12; font-weight: 800;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.2rem;
}
.t8-pick-controls {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 14px;
}
.t8-pick-btn {
  background: rgba(255,255,255,.2); color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 99px; padding: 8px 14px;
  font-weight: 700; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .82rem;
  transition: all .15s ease;
}
.t8-pick-btn:hover:not(:disabled) { background: rgba(255,255,255,.32); }
.t8-pick-btn:disabled { opacity: .4; cursor: not-allowed; }
.t8-pick-btn.done {
  background: #FCD34D; color: #7C2D12;
  border-color: #FCD34D; pointer-events: none;
}
.t8-pick-fb {
  margin-top: 12px; padding: 10px 14px; text-align: center;
  background: rgba(255,255,255,.15); border-radius: 10px;
  font-size: .92rem; min-height: 22px; line-height: 1.4;
}
.t8-pick-fb.done {
  background: #FCD34D; color: #7C2D12; font-weight: 800;
}
.t8-pick-reset {
  margin: 10px auto 0; display: block;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t8-pick-reset:hover { background: rgba(255,255,255,.32); }

/* ── ⑥ Fraction × Fraction Speed Round ────────────────────── */
.t8-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t8-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.t8-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.t8-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.t8-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.t8-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.t8-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.t8-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5;
}
.t8-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t8-speed-opt.right .t8-speed-opt-val { color: #16A36B; }
.t8-speed-opt.wrong .t8-speed-opt-val { color: #DC2626; }
.t8-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.t8-speed-fb.right { color: #16A36B; font-weight: 800; }
.t8-speed-fb.wrong { color: #DC2626; }
.t8-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t8-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   T9 — Divide Fractions (visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── ① Sharing Visual (waffles ÷ people) ──────────────────── */
.t9-share-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #EEF2FF; color: #4F46E5;
  padding: 2px 8px; border-radius: 6px; font-weight: 800;
}
.t9-share-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t9-share-eq-big {
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.4rem; font-weight: 800; color: #4F46E5; margin-bottom: 14px;
}
.t9-share-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.t9-share-label {
  font-size: .82rem; color: #6F6878; font-weight: 700; min-width: 80px;
}
.t9-share-waffles { display: flex; gap: 8px; flex-wrap: wrap; }
.t9-share-waffle {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid #92400E; overflow: hidden;
  display: flex; background: #FEF3C7;
}
.t9-share-half { flex: 1; height: 100%; }
.t9-share-half.a { background: #FCA5A5; }
.t9-share-half.b { background: #93C5FD; }
.t9-share-half.c { background: #86EFAC; }
.t9-share-half.d { background: #FDE68A; }
.t9-share-arrow {
  text-align: center; color: #4F46E5; font-weight: 800;
  font-size: .9rem; padding: 14px 0 10px;
}
.t9-share-people {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 12px;
}
.t9-share-person {
  background: #fff; border-radius: 12px; padding: 10px 4px;
  text-align: center;
}
.t9-share-head {
  width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 6px;
}
.t9-share-head.a { background: #FCA5A5; }
.t9-share-head.b { background: #93C5FD; }
.t9-share-head.c { background: #86EFAC; }
.t9-share-head.d { background: #FDE68A; }
.t9-share-plate {
  display: flex; justify-content: center; gap: 2px; margin-bottom: 4px;
}
.t9-share-plate .t9-share-half {
  width: 12px; height: 18px; border-radius: 2px; flex: none;
}
.t9-share-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82rem; font-weight: 800; color: #16A36B;
}
.t9-share-answer {
  margin-top: 8px; padding: 12px 16px;
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 12px;
  text-align: center; font-size: .95rem;
}
.t9-share-answer strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #16A36B; font-size: 1.1rem;
}
@media (max-width: 460px) {
  .t9-share-people { grid-template-columns: repeat(2, 1fr); }
  .t9-share-label { min-width: auto; }
}

/* ── ② "How Many Fit?" Tape Diagram (3 ÷ 1/4) ─────────────── */
.t9-fit-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t9-fit-eq {
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5; margin-bottom: 12px;
}
.t9-fit-stack { display: flex; flex-direction: column; gap: 6px; }
.t9-fit-bar {
  display: grid; grid-template-columns: 64px 1fr; gap: 8px;
  align-items: center;
}
.t9-fit-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .85rem; font-weight: 800; color: #6F6878; text-align: right;
}
.t9-fit-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  height: 36px;
  background: #fff; border: 2px solid #2A2233; border-radius: 4px;
  overflow: hidden;
}
.t9-fit-q {
  background: #FCD34D; color: #7C2D12;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .9rem;
}
.t9-fit-count {
  margin-top: 14px; padding: 10px 14px;
  background: #EEF2FF; border-radius: 10px; text-align: center;
  font-size: .95rem;
}
.t9-fit-count strong { color: #4F46E5; font-size: 1.15rem; }
.t9-fit-answer {
  margin-top: 10px; padding: 12px 16px;
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 12px;
  text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1rem; color: #065F46;
}
.t9-fit-answer strong { color: #16A36B; }
.t9-fit-rule {
  margin-top: 14px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t9-fit-rule strong { color: #4F46E5; }
.t9-fit-rule .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #fff; padding: 2px 6px; border-radius: 4px;
}

/* ── ③ "Split Smaller" Pizza Visual (1/2 ÷ 4) ─────────────── */
.t9-split-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t9-split-eq {
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5; margin-bottom: 12px;
}
.t9-split-stage {
  background: #fff; border-radius: 12px; padding: 12px;
}
.t9-split-label {
  font-size: .82rem; color: #6F6878; font-weight: 700; margin-bottom: 8px;
}
.t9-split-svg { display: block; width: 100%; height: auto; max-width: 320px; margin: 0 auto; }
.t9-split-arrow {
  text-align: center; color: #4F46E5; font-weight: 800;
  font-size: .9rem; padding: 8px 0;
}
.t9-split-answer {
  margin-top: 12px; padding: 12px 16px;
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 12px;
  text-align: center; font-size: .95rem;
}
.t9-split-answer strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #16A36B;
}
.t9-split-rule {
  margin-top: 14px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t9-split-rule strong { color: #4F46E5; }
.t9-split-rule .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #fff; padding: 2px 6px; border-radius: 4px;
}

/* ── ④ Patty Visualization (4 ÷ 1/3 = 12) ─────────────────── */
.t9-patty-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t9-patty-eq {
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5; margin-bottom: 12px;
}
.t9-patty-bars { display: flex; flex-direction: column; gap: 6px; }
.t9-patty-bar {
  display: grid; grid-template-columns: 50px 1fr; gap: 8px;
  align-items: center;
}
.t9-patty-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82rem; font-weight: 800; color: #6F6878; text-align: right;
}
.t9-patty-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  height: 38px;
  background: #fff; border: 2px solid #92400E; border-radius: 4px;
  overflow: hidden;
}
.t9-patty-slice {
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.05rem;
}
.t9-patty-slice.n1 { background: #FECACA; color: #7F1D1D; }
.t9-patty-slice.n2 { background: #FDBA74; color: #7C2D12; }
.t9-patty-slice.n3 { background: #FDE68A; color: #78350F; }
.t9-patty-count {
  margin-top: 14px; padding: 10px 14px;
  background: #EEF2FF; border-radius: 10px; text-align: center;
  font-size: .95rem;
}
.t9-patty-count strong { color: #4F46E5; font-size: 1.15rem; }
.t9-patty-answer {
  margin-top: 10px; padding: 12px 16px;
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 12px;
  text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1rem;
}
.t9-patty-answer strong { color: #16A36B; font-size: 1.2rem; }
.t9-patty-note {
  background: #FEF3C7; border-radius: 10px; padding: 10px 14px;
  font-size: .85rem; color: #7A5418; margin-top: 12px;
  border-left: 4px solid #F0A93B; line-height: 1.5;
}
.t9-patty-note strong { color: #92400E; }

/* ── ⑤ Pour-Out Counter Mini-Game ─────────────────────────── */
.t9-pour-wrap {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 20px; color: #fff; margin-top: 12px;
}
.t9-pour-q {
  font-size: 1rem; font-weight: 800; text-align: center; margin-bottom: 14px;
}
.t9-pour-pitcher {
  position: relative;
  width: 120px; height: 200px;
  margin: 0 auto;
  background: rgba(255,255,255,.12);
  border: 4px solid rgba(255,255,255,.5);
  border-top-left-radius: 8px; border-top-right-radius: 8px;
  border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  transition: transform .1s ease;
}
.t9-pour-pitcher:active { transform: scale(.97); }
.t9-pour-liquid {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 100%;
  background: linear-gradient(180deg, #FCD34D 0%, #F59E0B 100%);
  transition: height .3s ease;
  box-shadow: inset 0 4px 8px rgba(255,255,255,.4);
}
.t9-pour-marks {
  position: absolute; left: -28px; top: 6px; bottom: 6px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .7rem; font-weight: 800; color: rgba(255,255,255,.7);
}
.t9-pour-tap {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  text-align: center; font-size: .82rem; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  pointer-events: none; padding: 0 4px; font-weight: 700;
}
.t9-pour-cups {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  margin-top: 14px; min-height: 28px;
  background: rgba(255,255,255,.1); border-radius: 10px;
  padding: 8px;
}
.t9-pour-cup {
  width: 14px; height: 18px; border-radius: 2px;
  background: #FCD34D; border: 1px solid #F59E0B;
  animation: t9-pour-pop .2s ease;
}
@keyframes t9-pour-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
.t9-pour-counter {
  margin-top: 12px; padding: 10px 14px;
  background: rgba(255,255,255,.18); border-radius: 10px;
  font-size: 1rem; text-align: center;
}
.t9-pour-counter strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.4rem; color: #FCD34D;
}
.t9-pour-fb {
  margin-top: 12px; padding: 10px 14px; text-align: center;
  background: rgba(255,255,255,.15); border-radius: 10px;
  font-size: .92rem; min-height: 22px; line-height: 1.4;
}
.t9-pour-fb.done {
  background: #FCD34D; color: #7C2D12; font-weight: 800;
}
.t9-pour-reset {
  margin: 10px auto 0; display: block;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t9-pour-reset:hover { background: rgba(255,255,255,.32); }

/* ── ⑥ Unit-Fraction Speed Round ──────────────────────────── */
.t9-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t9-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.t9-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.t9-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.t9-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.t9-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.t9-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.t9-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5;
}
.t9-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t9-speed-opt.right .t9-speed-opt-val { color: #16A36B; }
.t9-speed-opt.wrong .t9-speed-opt-val { color: #DC2626; }
.t9-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.t9-speed-fb.right { color: #16A36B; font-weight: 800; }
.t9-speed-fb.wrong { color: #DC2626; }
.t9-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t9-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   T11 — Understand Volume Concepts (visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── Shared 3D-ish cube stack ─────────────────────────────── */
.t11-stack {
  position: relative;
  width: calc(var(--w, 3) * 24px + 30px);
  height: calc(var(--d, 3) * 12px + 80px);
  margin: 0 auto;
}
.t11-layer {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(var(--w, 3), 22px);
  gap: 2px;
  bottom: calc(var(--z, 0) * 20px + 4px);
  left: calc(var(--z, 0) * 6px);
}
.t11-cube {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #FCD34D 0%, #F0A93B 60%, #B45309 100%);
  border: 1px solid #7C2D12;
  border-radius: 3px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.5);
}
.t11-cube.flat {
  background: linear-gradient(135deg, #FCD34D, #F0A93B);
}
.t11-cube.blue {
  background: linear-gradient(135deg, #93C5FD 0%, #3B82F6 60%, #1E40AF 100%);
  border-color: #1E3A8A;
}
.t11-cube.pink {
  background: linear-gradient(135deg, #FBCFE8 0%, #EC4899 60%, #9D174D 100%);
  border-color: #831843;
}

/* ── ① Intro: 1 cube + 24-cube box ────────────────────────── */
.t11-intro-wrap {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px;
  margin-top: 14px;
}
@media (max-width: 460px) { .t11-intro-wrap { grid-template-columns: 1fr; } }
.t11-intro-card {
  background: #FBF4EA; border-radius: 14px; padding: 14px;
  text-align: center;
}
.t11-intro-label {
  font-size: .82rem; color: #6F6878; font-weight: 700; margin-bottom: 8px;
}
.t11-intro-meta {
  margin-top: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .92rem; color: #16A36B;
}
.t11-intro-meta strong { font-size: 1.1rem; }
.t11-intro-rule {
  margin-top: 14px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t11-intro-rule strong { color: #4F46E5; }
.t11-intro-rule .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #fff; padding: 2px 6px; border-radius: 4px;
  font-weight: 800; color: #2A2233;
}

/* ── ② V = l × w × h Layered Multiplication ───────────────── */
.t11-formula-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t11-formula-step {
  background: #fff; border-radius: 12px; padding: 14px;
}
.t11-formula-label {
  font-size: .82rem; color: #6F6878; font-weight: 700; margin-bottom: 8px;
}
.t11-formula-layer {
  position: relative; padding: 8px 0;
}
.t11-flat-grid {
  display: grid;
  grid-template-columns: repeat(var(--w, 4), 28px);
  gap: 2px;
  width: max-content;
  margin: 0 auto;
}
.t11-formula-dim {
  position: absolute; bottom: -2px; left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .8rem; font-weight: 800; color: #4F46E5;
}
.t11-formula-dim.side {
  bottom: auto; top: 50%; left: auto; right: 4px;
  transform: translateY(-50%);
}
.t11-formula-calc {
  margin-top: 12px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .95rem;
}
.t11-formula-calc strong { color: #4F46E5; font-size: 1.05rem; }
.t11-formula-arrow {
  text-align: center; color: #4F46E5; font-weight: 800;
  font-size: .9rem; padding: 10px 0;
}
.t11-formula-stack-wrap {
  display: flex; justify-content: center; padding: 6px 0;
}
.t11-formula-answer {
  margin-top: 12px; padding: 12px 16px;
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 12px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem;
}
.t11-formula-answer strong { color: #16A36B; font-size: 1.3rem; }

/* ── ③ V = B × h with different bases ─────────────────────── */
.t11-bh-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t11-bh-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
@media (max-width: 460px) { .t11-bh-row { grid-template-columns: 1fr; } }
.t11-bh-shape {
  background: #fff; border-radius: 12px; padding: 10px; text-align: center;
}
.t11-bh-shape svg { display: block; width: 100%; max-width: 140px; margin: 0 auto; height: auto; }
.t11-bh-label {
  font-size: .78rem; color: #6F6878; font-weight: 700; margin-top: 6px;
}
.t11-bh-arrow {
  text-align: center; color: #4F46E5; font-weight: 800;
  font-size: .9rem; padding: 14px 0;
}
.t11-bh-volume {
  background: #fff; border: 2px solid #4F46E5; border-radius: 12px;
  padding: 14px; text-align: center;
}
.t11-bh-formula {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem; font-weight: 800; color: #4F46E5;
  margin-bottom: 10px;
}
.t11-bh-example {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center;
}
.t11-bh-pill {
  padding: 6px 12px; border-radius: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1rem;
}
.t11-bh-pill.blue { background: #DBEAFE; color: #1E40AF; }
.t11-bh-pill.amber { background: #FEF3C7; color: #92400E; }
.t11-bh-pill.green { background: #D1FAE5; color: #065F46; font-size: 1.3rem; }
.t11-bh-pill.pink { background: #FCE7F3; color: #BE185D; }
.t11-bh-times, .t11-bh-eq { color: #6F6878; font-weight: 800; }

/* ── ④ Composite Solid (planter) ──────────────────────────── */
.t11-comp-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t11-comp-shape {
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.t11-comp-top, .t11-comp-bottom {
  display: flex; align-items: center; gap: 12px;
}
.t11-comp-top { margin-bottom: 4px; }
.t11-comp-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82rem; font-weight: 800; padding: 4px 10px; border-radius: 6px;
}
.t11-comp-tag.blue { background: #DBEAFE; color: #1E40AF; }
.t11-comp-tag.pink { background: #FCE7F3; color: #BE185D; }
.t11-comp-sum {
  margin-top: 14px; padding: 14px;
  background: #fff; border: 2px solid #4F46E5; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.t11-comp-note {
  background: #FEF3C7; border-radius: 10px; padding: 10px 14px;
  font-size: .85rem; color: #7A5418; margin-top: 12px;
  border-left: 4px solid #F0A93B; line-height: 1.5;
}
.t11-comp-note strong { color: #92400E; }

/* ── ⑤ Build the Box Mini-Game ────────────────────────────── */
.t11-build-wrap {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 20px; color: #fff; margin-top: 12px;
}
.t11-build-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
}
.t11-build-stage {
  display: flex; justify-content: center; align-items: flex-end;
  min-height: 200px; padding: 14px;
  background: rgba(255,255,255,.12); border-radius: 12px;
}
.t11-build-arena .t11-stack {
  /* Inherit dimensions from the layers added by JS */
}
.t11-build-counter {
  margin-top: 14px; padding: 10px 14px;
  background: rgba(255,255,255,.18); border-radius: 10px;
  font-size: 1rem; text-align: center;
}
.t11-build-counter.done {
  background: #FCD34D; color: #7C2D12; font-weight: 800;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.2rem;
}
.t11-build-controls {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 14px;
}
.t11-build-btn {
  background: rgba(255,255,255,.2); color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 99px; padding: 8px 14px;
  font-weight: 700; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .82rem;
  transition: all .15s ease;
}
.t11-build-btn:hover:not(:disabled) { background: rgba(255,255,255,.32); }
.t11-build-btn:disabled { opacity: .4; cursor: not-allowed; }
.t11-build-btn.done {
  background: #FCD34D; color: #7C2D12;
  border-color: #FCD34D; pointer-events: none;
}
.t11-build-fb {
  margin-top: 12px; padding: 10px 14px; text-align: center;
  background: rgba(255,255,255,.15); border-radius: 10px;
  font-size: .92rem; min-height: 22px; line-height: 1.4;
}
.t11-build-fb.done {
  background: #FCD34D; color: #7C2D12; font-weight: 800;
}
.t11-build-reset {
  margin: 10px auto 0; display: block;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t11-build-reset:hover { background: rgba(255,255,255,.32); }

/* ── ⑥ Find-the-Height Speed Round ────────────────────────── */
.t11-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t11-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.t11-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.t11-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.t11-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.t11-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.t11-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.t11-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.4rem; font-weight: 800; color: #4F46E5;
}
.t11-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t11-speed-opt.right .t11-speed-opt-val { color: #16A36B; }
.t11-speed-opt.wrong .t11-speed-opt-val { color: #DC2626; }
.t11-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.t11-speed-fb.right { color: #16A36B; font-weight: 800; }
.t11-speed-fb.wrong { color: #DC2626; }
.t11-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t11-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   T12 — Convert Measurements (visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── ① Metric Power-of-10 Staircase ───────────────────────── */
.t12-stairs-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 14px;
}
.t12-stairs-axis-top, .t12-stairs-axis-bottom {
  text-align: center; font-size: .8rem; font-weight: 700;
  color: #6F6878; margin: 4px 0;
}
.t12-stairs-axis-top { color: #16A36B; }
.t12-stairs-axis-bottom { color: #BE185D; }
.t12-stairs {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.t12-stair {
  display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  width: 80%; max-width: 320px;
  border: 2px solid transparent;
}
.t12-stair.s7 { background: #1E3A8A; color: #fff; margin-left: 0; }
.t12-stair.s6 { background: #1E40AF; color: #fff; margin-left: 4%; }
.t12-stair.s5 { background: #3B82F6; color: #fff; margin-left: 8%; }
.t12-stair.s4 { background: #FCD34D; color: #7C2D12; margin-left: 12%; border-color: #F0A93B; }
.t12-stair.s3 { background: #F472B6; color: #fff; margin-left: 16%; }
.t12-stair.s2 { background: #DB2777; color: #fff; margin-left: 20%; }
.t12-stair.s1 { background: #9F1239; color: #fff; margin-left: 24%; }
.t12-stair.base {
  box-shadow: 0 0 0 2px #FCD34D, 0 0 12px rgba(252,211,77,.5);
}
.t12-stair-unit {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem; font-weight: 800; text-align: center;
}
.t12-stair-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .78rem; opacity: .85;
}
.t12-metric-pairs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 14px;
}
@media (max-width: 460px) { .t12-metric-pairs { grid-template-columns: 1fr; } }
.t12-metric-cat {
  background: #fff; border-radius: 12px; padding: 10px;
  border: 2px solid #E2E8F0;
}
.t12-metric-cat-label {
  font-size: .78rem; font-weight: 800; color: #4F46E5;
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em;
}
.t12-metric-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .85rem; font-weight: 800; color: #2A2233;
  background: #EEF2FF; padding: 4px 8px; border-radius: 6px;
  margin: 4px 0;
}

/* ── ② Customary Memory Cards ─────────────────────────────── */
.t12-cust-wrap {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-top: 14px;
}
@media (max-width: 600px) { .t12-cust-wrap { grid-template-columns: 1fr; } }
.t12-cust-cat {
  background: #fff; border-radius: 14px; padding: 12px;
  border: 2px solid transparent;
}
.t12-cust-cat.length { border-color: #3B82F6; background: linear-gradient(180deg, #EFF6FF 0%, #fff 60%); }
.t12-cust-cat.capacity { border-color: #16A36B; background: linear-gradient(180deg, #ECFDF5 0%, #fff 60%); }
.t12-cust-cat.weight { border-color: #F59E0B; background: linear-gradient(180deg, #FFFBEB 0%, #fff 60%); }
.t12-cust-cat-label {
  font-size: .85rem; font-weight: 800;
  margin-bottom: 8px; text-align: center;
  padding: 4px 8px; border-radius: 6px;
}
.t12-cust-cat.length .t12-cust-cat-label { background: #DBEAFE; color: #1E40AF; }
.t12-cust-cat.capacity .t12-cust-cat-label { background: #D1FAE5; color: #065F46; }
.t12-cust-cat.weight .t12-cust-cat-label { background: #FEF3C7; color: #92400E; }
.t12-cust-card {
  background: #fff; border: 1px solid #E2E8F0; border-radius: 8px;
  padding: 8px 10px; margin: 6px 0;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.t12-cust-card .big { font-size: 1rem; font-weight: 800; color: #2A2233; }
.t12-cust-card .eq { color: #6F6878; font-weight: 800; }
.t12-cust-card .sub {
  font-size: .78rem; color: #6F6878; margin-left: auto;
}
.t12-cust-mnemonic {
  margin-top: 14px; padding: 12px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
  border-left: 4px solid #4F46E5;
}
.t12-cust-mnemonic strong { color: #4F46E5; }
.t12-cust-mnemonic .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #fff; padding: 1px 5px; border-radius: 4px; font-weight: 800;
  color: #2A2233;
}

/* ── ③ Direction Compass (Multiply / Divide) ──────────────── */
.t12-dir-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 14px;
}
@media (max-width: 460px) { .t12-dir-wrap { grid-template-columns: 1fr; } }
.t12-dir-card {
  background: #fff; border-radius: 14px; padding: 14px; text-align: center;
  border: 2px solid #E2E8F0;
}
.t12-dir-card.down { border-color: #DC2626; background: linear-gradient(180deg, #FEF2F2 0%, #fff 50%); }
.t12-dir-card.up { border-color: #16A36B; background: linear-gradient(180deg, #ECFDF5 0%, #fff 50%); }
.t12-dir-from, .t12-dir-to {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.4rem; font-weight: 800; color: #2A2233;
  padding: 6px 10px; background: #fff; border-radius: 8px;
  display: inline-block; box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.t12-dir-icon {
  font-size: 1.4rem; margin: 8px 0; line-height: 1;
}
.t12-dir-card.down .t12-dir-icon { color: #DC2626; }
.t12-dir-card.up .t12-dir-icon { color: #16A36B; }
.t12-dir-rule {
  display: flex; flex-direction: column; gap: 4px; margin: 6px 0;
}
.t12-dir-action {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem; font-weight: 800; padding: 4px 10px;
  border-radius: 8px; display: inline-block; align-self: center;
}
.t12-dir-action.mul { background: #DC2626; color: #fff; }
.t12-dir-action.div { background: #16A36B; color: #fff; }
.t12-dir-note { font-size: .78rem; color: #6F6878; font-weight: 600; }
.t12-dir-meta {
  font-size: .78rem; color: #94A3B8; margin-top: 6px; font-style: italic;
}
.t12-dir-summary {
  margin-top: 14px; background: #FBF4EA; border-radius: 14px; padding: 14px;
}
.t12-dir-summary-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; padding: 8px 0;
}
.t12-dir-summary-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .85rem; padding: 6px 12px; border-radius: 8px;
}
.t12-dir-summary-pill.big { background: #DBEAFE; color: #1E40AF; }
.t12-dir-summary-pill.small { background: #FCE7F3; color: #BE185D; }
.t12-dir-summary-arrow { color: #6F6878; font-weight: 800; }
.t12-dir-summary-action {
  font-size: .92rem; color: #2A2233;
}
.t12-dir-summary-action .mul { color: #DC2626; }
.t12-dir-summary-action .div { color: #16A36B; }

/* ── ④ Conversion Chain (yd → ft → in) ───────────────────── */
.t12-chain-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t12-chain-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.t12-chain-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.2rem; padding: 8px 14px; border-radius: 10px;
}
.t12-chain-pill.green { background: #D1FAE5; color: #065F46; }
.t12-chain-pill.amber { background: #FEF3C7; color: #92400E; }
.t12-chain-pill.pink { background: #FCE7F3; color: #BE185D; }
.t12-chain-arrow {
  display: flex; flex-direction: column; align-items: center;
}
.t12-chain-arrow-svg {
  font-size: 1.4rem; color: #4F46E5; font-weight: 800;
}
.t12-chain-arrow-op {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem; color: #4F46E5; font-weight: 800;
  background: #fff; padding: 2px 6px; border-radius: 4px;
  margin-top: 2px;
  white-space: nowrap;
}
.t12-chain-rule {
  margin-top: 14px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t12-chain-rule strong { color: #4F46E5; }
.t12-chain-rule .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #fff; padding: 1px 5px; border-radius: 4px; font-weight: 800;
  color: #2A2233;
}
.t12-chain-answer {
  margin-top: 12px; padding: 12px 16px;
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 12px;
  text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem;
}
.t12-chain-answer strong { color: #16A36B; font-size: 1.3rem; }

/* ── ⑤ Metric Speed Round (5.3 cm → mm) ───────────────────── */
.t12-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t12-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.t12-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.t12-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.t12-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.t12-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.t12-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.t12-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5;
}
.t12-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t12-speed-opt.right .t12-speed-opt-val { color: #16A36B; }
.t12-speed-opt.wrong .t12-speed-opt-val { color: #DC2626; }
.t12-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.t12-speed-fb.right { color: #16A36B; font-weight: 800; }
.t12-speed-fb.wrong { color: #DC2626; }
.t12-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t12-speed-reset:hover { background: #EEF2FF; }

/* ── ⑥ Nested Containers Mini-Game ────────────────────────── */
.t12-nest-wrap {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 20px; color: #fff; margin-top: 12px;
}
.t12-nest-board {
  background: rgba(255,255,255,.1); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.t12-nest-row.hidden { display: none; }
.t12-nest-tier-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .85rem; font-weight: 800; color: #FCD34D;
  margin-bottom: 4px;
}
.t12-nest-units {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.t12-nest-unit {
  flex: 1; min-width: 16px; padding: 6px 4px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem; font-weight: 800; color: #fff;
  text-align: center;
  border: 1px solid rgba(255,255,255,.4);
  animation: t12-nest-pop .2s ease;
}
@keyframes t12-nest-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
.t12-nest-unit.gal {
  flex-basis: 100%; padding: 16px;
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #7C2D12; font-size: 1rem;
}
.t12-nest-unit.qt { background: rgba(252,211,77,.6); color: #7C2D12; }
.t12-nest-unit.pt { background: rgba(248,180,116,.7); color: #7C2D12; }
.t12-nest-unit.c { background: rgba(253,164,175,.7); color: #7F1D1D; }
.t12-nest-controls {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 14px;
}
.t12-nest-btn {
  background: rgba(255,255,255,.2); color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 99px; padding: 8px 14px;
  font-weight: 700; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .82rem;
  transition: all .15s ease;
}
.t12-nest-btn:hover:not(:disabled) { background: rgba(255,255,255,.32); }
.t12-nest-btn:disabled { opacity: .4; cursor: not-allowed; }
.t12-nest-btn.done {
  background: #FCD34D; color: #7C2D12;
  border-color: #FCD34D; pointer-events: none;
}
.t12-nest-fb {
  margin-top: 12px; padding: 10px 14px; text-align: center;
  background: rgba(255,255,255,.15); border-radius: 10px;
  font-size: .92rem; min-height: 22px; line-height: 1.4;
}
.t12-nest-fb.done { background: #FCD34D; color: #7C2D12; font-weight: 800; }
.t12-nest-reset {
  margin: 10px auto 0; display: block;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t12-nest-reset:hover { background: rgba(255,255,255,.32); }

/* ════════════════════════════════════════════════════════════
   T13 — Numerical Expressions (visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── ① PEMDAS Priority Tower ──────────────────────────────── */
.t13-tower-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 14px;
}
.t13-tower-level {
  display: grid; grid-template-columns: 40px 70px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px;
  margin-bottom: 6px; color: #fff;
}
.t13-tower-level.lv1 { background: linear-gradient(135deg, #7C3AED, #4F46E5); }
.t13-tower-level.lv2 { background: linear-gradient(135deg, #4F46E5, #3B82F6); }
.t13-tower-level.lv3 { background: linear-gradient(135deg, #16A36B, #15803D); }
.t13-tower-level.lv4 { background: linear-gradient(135deg, #F59E0B, #DC2626); }
.t13-tower-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; text-align: center;
  opacity: .9;
}
.t13-tower-letter {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.4rem; font-weight: 800;
  background: rgba(255,255,255,.25); padding: 6px 8px; border-radius: 8px;
  text-align: center;
}
.t13-tower-name {
  font-size: 1rem; font-weight: 800;
}
.t13-tower-ex {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .85rem; opacity: .9; background: rgba(255,255,255,.15);
  padding: 4px 10px; border-radius: 6px;
}
.t13-tower-ex small { opacity: .8; }
.t13-tower-tied {
  margin-top: 14px; padding: 10px 14px; background: #FEF3C7;
  border-radius: 10px; font-size: .88rem; line-height: 1.5; color: #7A5418;
  border-left: 4px solid #F0A93B;
}
.t13-tower-tied strong { color: #92400E; }
.t13-tower-demo {
  margin-top: 14px; padding: 14px;
  background: #fff; border: 2px solid #4F46E5; border-radius: 12px;
}
.t13-tower-demo-label {
  font-size: .82rem; color: #6F6878; margin-bottom: 8px; font-weight: 700;
}
.t13-tower-demo-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.05rem;
}
.t13-tower-demo-line .op { color: #2A2233; font-weight: 800; }
.t13-tower-demo-line .meta {
  font-family: 'Inter', sans-serif; font-size: .78rem;
  color: #16A36B; font-weight: 700;
}
.t13-tower-demo-line .hi-mul {
  background: #D1FAE5; padding: 2px 6px; border-radius: 4px;
  box-shadow: 0 0 0 2px #16A36B;
}

/* ── ② Nested Grouping Onion ──────────────────────────────── */
.t13-onion-bracket {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; padding: 1px 5px; border-radius: 4px;
}
.t13-onion-bracket.round { background: #D1FAE5; color: #16A36B; }
.t13-onion-bracket.square { background: #DBEAFE; color: #1E40AF; }
.t13-onion-bracket.curly { background: #EDE9FE; color: #7C3AED; }
.t13-onion-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 14px;
}
.t13-onion-stage {
  background: #fff; border-radius: 12px; padding: 12px 14px;
  text-align: center;
}
.t13-onion-stage.final {
  background: #ECFDF5; border: 2px solid #16A36B;
}
.t13-onion-label {
  font-size: .78rem; color: #6F6878; margin-bottom: 6px; font-weight: 700;
}
.t13-onion-expr {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #2A2233;
  line-height: 1.6;
}
.t13-onion-expr strong { color: #16A36B; font-size: 1.5rem; }
.t13-onion-round { color: #16A36B; font-weight: 800; }
.t13-onion-square { color: #1E40AF; font-weight: 800; }
.t13-onion-curly { color: #7C3AED; font-weight: 800; }
.t13-onion-peel {
  background: #FCD34D; color: #7C2D12; padding: 2px 6px; border-radius: 4px;
  box-shadow: 0 0 0 2px #F0A93B; font-weight: 800;
}
.t13-onion-arrow {
  text-align: center; color: #4F46E5; font-weight: 800;
  font-size: .88rem; padding: 8px 0;
}
.t13-onion-rule {
  margin-top: 14px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t13-onion-rule strong { color: #4F46E5; }

/* ── ③ Word-to-Symbol Translator ──────────────────────────── */
.t13-trans-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.t13-trans-row {
  display: grid; grid-template-columns: 70px 1fr; gap: 12px;
  align-items: center; padding: 10px 12px;
  background: #fff; border-radius: 12px;
  border: 2px solid transparent;
}
.t13-trans-row.add { border-color: #16A36B; }
.t13-trans-row.sub { border-color: #F59E0B; }
.t13-trans-row.mul { border-color: #DC2626; }
.t13-trans-row.div { border-color: #4F46E5; }
.t13-trans-symbol {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 2rem; font-weight: 800; text-align: center;
  padding: 6px; border-radius: 8px;
}
.t13-trans-row.add .t13-trans-symbol { background: #D1FAE5; color: #16A36B; }
.t13-trans-row.sub .t13-trans-symbol { background: #FEF3C7; color: #92400E; }
.t13-trans-row.mul .t13-trans-symbol { background: #FEE2E2; color: #DC2626; }
.t13-trans-row.div .t13-trans-symbol { background: #EEF2FF; color: #4F46E5; }
.t13-trans-words {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.t13-trans-word {
  font-size: .85rem; padding: 4px 10px; border-radius: 99px;
  background: #F1F5F9; color: #2A2233; font-weight: 600;
}
.t13-trans-example {
  margin-top: 14px; padding: 14px;
  background: #fff; border: 2px solid #4F46E5; border-radius: 12px;
  text-align: center;
}
.t13-trans-example-label {
  font-size: .82rem; color: #6F6878; font-weight: 700; margin-bottom: 8px;
}
.t13-trans-quote {
  font-style: italic; color: #2A2233; line-height: 1.6;
  padding: 8px 12px;
  background: #F8FAFC; border-radius: 8px;
}
.t13-trans-quote .hi-mul {
  background: #FEE2E2; color: #DC2626; padding: 1px 5px; border-radius: 4px;
  font-weight: 800; font-style: normal;
}
.t13-trans-quote .hi-add {
  background: #D1FAE5; color: #16A36B; padding: 1px 5px; border-radius: 4px;
  font-weight: 800; font-style: normal;
}
.t13-trans-arrow {
  color: #4F46E5; font-size: 1.4rem; padding: 8px 0; font-weight: 800;
}
.t13-trans-expr {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; padding: 8px 12px;
  background: #ECFDF5; border-radius: 8px; color: #065F46;
}

/* ── ④ Annika vs Jordan ──────────────────────────────────── */
.t13-vs-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 14px;
}
@media (max-width: 540px) { .t13-vs-wrap { grid-template-columns: 1fr; } }
.t13-vs-card {
  background: #fff; border-radius: 14px; padding: 14px;
  border: 2px solid transparent;
  text-align: center;
}
.t13-vs-card.jordan { border-color: #DC2626; background: linear-gradient(180deg, #FEF2F2 0%, #fff 60%); }
.t13-vs-card.annika { border-color: #16A36B; background: linear-gradient(180deg, #ECFDF5 0%, #fff 60%); }
.t13-vs-name {
  font-size: 1rem; font-weight: 800; margin-bottom: 10px;
  padding: 6px 12px; border-radius: 8px; display: inline-block;
}
.t13-vs-card.jordan .t13-vs-name { background: #FEE2E2; color: #DC2626; }
.t13-vs-card.annika .t13-vs-name { background: #D1FAE5; color: #16A36B; }
.t13-vs-step {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem; padding: 6px 0;
}
.t13-vs-expr { color: #2A2233; font-weight: 800; }
.t13-vs-expr strong {
  font-size: 1.3rem; padding: 2px 6px; border-radius: 4px;
}
.t13-vs-card.jordan .t13-vs-expr strong { background: #FEE2E2; color: #DC2626; }
.t13-vs-card.annika .t13-vs-expr strong { background: #D1FAE5; color: #16A36B; }
.t13-vs-hi {
  background: #FCD34D; color: #7C2D12; padding: 2px 6px; border-radius: 4px;
  box-shadow: 0 0 0 2px #F0A93B;
}
.t13-vs-arrow {
  color: #6F6878; font-size: .8rem; font-weight: 700;
  padding: 4px 0;
}
.t13-vs-error {
  margin-top: 10px; padding: 8px 12px;
  background: #FEE2E2; color: #7F1D1D;
  border-radius: 8px; font-size: .8rem; line-height: 1.4;
}
.t13-vs-correct {
  margin-top: 10px; padding: 8px 12px;
  background: #D1FAE5; color: #065F46;
  border-radius: 8px; font-size: .8rem; line-height: 1.4;
}
.t13-vs-verdict {
  margin-top: 14px; padding: 14px;
  background: #FCD34D; color: #7C2D12;
  border-radius: 12px; text-align: center; font-size: .95rem; line-height: 1.5;
}
.t13-vs-verdict strong { color: #7C2D12; }

/* ── ⑤ PEMDAS Speed Round ─────────────────────────────────── */
.t13-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t13-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.t13-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.t13-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.t13-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.t13-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.t13-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.t13-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.4rem; font-weight: 800; color: #4F46E5;
}
.t13-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t13-speed-opt.right .t13-speed-opt-val { color: #16A36B; }
.t13-speed-opt.wrong .t13-speed-opt-val { color: #DC2626; }
.t13-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.t13-speed-fb.right { color: #16A36B; font-weight: 800; }
.t13-speed-fb.wrong { color: #DC2626; }
.t13-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t13-speed-reset:hover { background: #EEF2FF; }

/* ── ⑥ Peel the Onion Mini-Game ───────────────────────────── */
.t13-peel-wrap {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 20px; color: #fff; margin-top: 12px;
}
.t13-peel-display {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem; font-weight: 800; text-align: center;
  padding: 16px; background: rgba(255,255,255,.15); border-radius: 12px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.t13-peel-display .peel {
  background: #FCD34D; color: #7C2D12;
  padding: 2px 8px; border-radius: 6px;
  box-shadow: 0 0 0 2px #F0A93B;
}
.t13-peel-status {
  padding: 10px 14px; text-align: center;
  background: rgba(255,255,255,.18); border-radius: 10px;
  font-size: .92rem; min-height: 22px;
}
.t13-peel-controls {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 14px;
}
.t13-peel-btn {
  background: rgba(255,255,255,.2); color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 99px; padding: 8px 14px;
  font-weight: 700; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .82rem;
  transition: all .15s ease;
}
.t13-peel-btn:hover:not(:disabled) { background: rgba(255,255,255,.32); }
.t13-peel-btn:disabled { opacity: .4; cursor: not-allowed; }
.t13-peel-btn.done {
  background: #FCD34D; color: #7C2D12;
  border-color: #FCD34D; pointer-events: none;
}
.t13-peel-fb {
  margin-top: 12px; padding: 10px 14px; text-align: center;
  background: rgba(255,255,255,.15); border-radius: 10px;
  font-size: .92rem; min-height: 22px; line-height: 1.4;
}
.t13-peel-fb.done { background: #FCD34D; color: #7C2D12; font-weight: 800; }
.t13-peel-reset {
  margin: 10px auto 0; display: block;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t13-peel-reset:hover { background: rgba(255,255,255,.32); }

/* ════════════════════════════════════════════════════════════
   T14 — Coordinate Plane Quadrant I (visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── ① Plane Anatomy ──────────────────────────────────────── */
.t14-anatomy-wrap, .t14-walk-wrap, .t14-special-wrap, .t14-tanya-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 14px;
}
.t14-anatomy-svg, .t14-walk-svg, .t14-special-svg, .t14-tanya-svg, .t14-walkgame-svg {
  display: block; width: 100%; height: auto;
  max-width: 420px; margin: 0 auto;
  background: #fff; border-radius: 10px; padding: 8px;
}
.t14-anatomy-legend {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 14px; padding: 12px;
  background: #fff; border-radius: 10px;
}
.t14-anatomy-leg-item {
  display: flex; align-items: center; gap: 8px; font-size: .88rem;
}
.t14-anatomy-leg-item strong { color: #2A2233; }
.t14-anatomy-leg-item .sw {
  width: 14px; height: 14px; border-radius: 3px;
}
.t14-anatomy-leg-item .sw.pink { background: #BE185D; }
.t14-anatomy-leg-item .sw.blue { background: #1E40AF; }
.t14-anatomy-leg-item .sw.red { background: #DC2626; border-radius: 50%; }

/* ── ② Walk to (3, 5) ────────────────────────────────────── */
.t14-walk-cap {
  text-align: center; font-size: .92rem; color: #2A2233;
  margin-bottom: 10px; font-weight: 600;
}
.t14-walk-rule {
  margin-top: 14px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t14-walk-rule strong { color: #4F46E5; }
.t14-walk-warn {
  margin-top: 8px; padding: 10px 14px; background: #FEF2F2;
  border-left: 4px solid #DC2626; border-radius: 0 10px 10px 0;
  font-size: .88rem; line-height: 1.5; color: #7F1D1D;
}
.t14-walk-warn strong { color: #DC2626; }

/* ── ③ Special Points ────────────────────────────────────── */
.t14-special-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 14px;
}
@media (max-width: 460px) { .t14-special-cards { grid-template-columns: 1fr; } }
.t14-special-card {
  background: #fff; border-radius: 10px; padding: 10px;
  text-align: center; border: 2px solid #E2E8F0;
}
.t14-special-card.x-axis { border-color: #BE185D; }
.t14-special-card.y-axis { border-color: #1E40AF; }
.t14-special-card.origin { border-color: #7C3AED; }
.t14-special-card-dot {
  width: 16px; height: 16px; border-radius: 50%; margin: 0 auto 6px;
}
.t14-special-card.x-axis .t14-special-card-dot { background: #BE185D; }
.t14-special-card.y-axis .t14-special-card-dot { background: #1E40AF; }
.t14-special-card.origin .t14-special-card-dot { background: #7C3AED; }
.t14-special-card-pair {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem; font-weight: 800; color: #2A2233;
}
.t14-special-card-meta {
  font-size: .75rem; color: #6F6878; margin-top: 4px; font-weight: 600;
}

/* ── ④ Tanya's Plant Pattern ─────────────────────────────── */
.t14-tanya-pattern {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-top: 14px;
}
.t14-tanya-step {
  background: #fff; padding: 8px 12px; border-radius: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .92rem; border: 2px solid #E2E8F0;
}
.t14-tanya-step strong { color: #4F46E5; }
.t14-tanya-arrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82rem; font-weight: 800; color: #16A36B;
  background: #D1FAE5; padding: 4px 10px; border-radius: 99px;
}
.t14-tanya-insight {
  margin-top: 14px; padding: 12px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t14-tanya-insight strong { color: #4F46E5; }

/* ── ⑤ Walk to (5, 6) Mini-Game ───────────────────────────── */
.t14-walkgame-wrap {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  border-radius: 18px; padding: 20px; color: #fff; margin-top: 12px;
}
.t14-walkgame-wrap .t14-walkgame-svg {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
}
.t14-walkgame-path.show { animation: t14-fade-in .35s ease forwards; }
@keyframes t14-fade-in { to { opacity: 1; } }
.t14-walkgame-status {
  margin-top: 14px; padding: 10px 14px; text-align: center;
  background: rgba(255,255,255,.18); border-radius: 10px;
  font-size: .92rem; min-height: 22px;
}
.t14-walkgame-controls {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 14px;
}
.t14-walkgame-btn {
  background: rgba(255,255,255,.2); color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 99px; padding: 8px 14px;
  font-weight: 700; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .82rem;
  transition: all .15s ease;
}
.t14-walkgame-btn:hover:not(:disabled) { background: rgba(255,255,255,.32); }
.t14-walkgame-btn:disabled { opacity: .4; cursor: not-allowed; }
.t14-walkgame-btn.done {
  background: #FCD34D; color: #7C2D12;
  border-color: #FCD34D; pointer-events: none;
}
.t14-walkgame-fb {
  margin-top: 12px; padding: 10px 14px; text-align: center;
  background: rgba(255,255,255,.15); border-radius: 10px;
  font-size: .92rem; min-height: 22px; line-height: 1.4;
}
.t14-walkgame-fb.done { background: #FCD34D; color: #7C2D12; font-weight: 800; }
.t14-walkgame-reset {
  margin: 10px auto 0; display: block;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.3); padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t14-walkgame-reset:hover { background: rgba(255,255,255,.32); }

/* ── ⑥ x-axis Speed Round ────────────────────────────────── */
.t14-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t14-speed-q {
  font-size: 1rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #2A2233; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.t14-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px;
}
.t14-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.t14-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.t14-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.t14-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.t14-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5;
}
.t14-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t14-speed-opt.right .t14-speed-opt-val { color: #16A36B; }
.t14-speed-opt.wrong .t14-speed-opt-val { color: #DC2626; }
.t14-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.t14-speed-fb.right { color: #16A36B; font-weight: 800; }
.t14-speed-fb.wrong { color: #DC2626; }
.t14-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t14-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   T15 — Patterns & Relationships (visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── ① Pattern Conveyor Belt ──────────────────────────────── */
.t15-belt-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 16px; margin-top: 14px;
}
.t15-belt-wrap.multiply {
  background: #FCE7F3;
}
.t15-belt-rule {
  text-align: center; font-size: .95rem; margin-bottom: 10px; color: #2A2233;
}
.t15-belt-rule .op {
  background: #4F46E5; color: #fff;
  padding: 3px 10px; border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.t15-belt-wrap.multiply .t15-belt-rule .op { background: #BE185D; }
.t15-belt {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; flex-wrap: wrap;
}
.t15-belt-tile {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.1rem;
}
.t15-belt-tile.term {
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #7C2D12; box-shadow: 0 2px 4px rgba(124,45,18,.2);
}
.t15-belt-wrap.multiply .t15-belt-tile.term {
  background: linear-gradient(135deg, #FBCFE8, #EC4899);
  color: #831843;
}
.t15-belt-machine {
  background: #4F46E5; color: #fff;
  padding: 4px 8px; border-radius: 99px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .85rem; font-weight: 800;
  display: inline-flex; align-items: center; gap: 4px;
  position: relative;
}
.t15-belt-machine::before, .t15-belt-machine::after {
  content: '→'; color: #4F46E5; font-size: 1rem;
  position: absolute; top: 50%; transform: translateY(-50%);
}
.t15-belt-machine::before { left: -14px; }
.t15-belt-machine::after { right: -14px; }
.t15-belt-machine.mul { background: #BE185D; }
.t15-belt-machine.mul::before, .t15-belt-machine.mul::after { color: #BE185D; }
.t15-belt-axis {
  display: grid; grid-template-columns: repeat(9, 1fr);
  margin-top: 8px; font-size: .65rem; color: #6F6878;
  text-align: center; font-weight: 700;
}
.t15-belt-rule-box {
  margin-top: 14px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t15-belt-rule-box strong { color: #4F46E5; }

.t15-belt-mini {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; flex-wrap: wrap;
  background: #FBF4EA; border-radius: 12px; padding: 12px;
  margin-top: 12px;
}
.t15-belt-mini .t15-belt-tile.highlight {
  outline: 3px solid #DC2626;
  animation: t15-pulse 1.2s ease infinite;
}
@keyframes t15-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.t15-belt-mini-axis {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: .68rem; color: #6F6878; text-align: center; font-weight: 700;
  max-width: 360px; margin: 6px auto 0;
}

/* ── ② Two-Pattern Pairs Table ────────────────────────────── */
.t15-pairs-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 16px; margin-top: 14px;
}
.t15-pairs-rules {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
}
@media (max-width: 460px) { .t15-pairs-rules { grid-template-columns: 1fr; } }
.t15-pairs-rule {
  padding: 10px 12px; border-radius: 10px; font-size: .9rem;
  text-align: center;
}
.t15-pairs-rule.pink { background: #FCE7F3; color: #BE185D; }
.t15-pairs-rule.blue { background: #DBEAFE; color: #1E40AF; }
.t15-pairs-rule strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.t15-pairs-grid {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 1.2fr 1.2fr;
  gap: 2px; background: #94A3B8; padding: 2px; border-radius: 8px;
  font-size: .82rem;
}
.t15-pairs-head {
  background: #FBF4EA; padding: 6px 8px; font-weight: 800;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  color: #6F6878; text-align: center;
}
.t15-pairs-head.pink { color: #BE185D; }
.t15-pairs-head.blue { color: #1E40AF; }
.t15-pairs-head.ratio { color: #16A36B; }
.t15-pairs-cell {
  background: #fff; padding: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; text-align: center; color: #2A2233;
}
.t15-pairs-cell.pink { background: #FCE7F3; color: #BE185D; }
.t15-pairs-cell.blue { background: #DBEAFE; color: #1E40AF; }
.t15-pairs-cell.pair { background: #EEF2FF; color: #4F46E5; }
.t15-pairs-cell.ratio { background: #D1FAE5; color: #065F46; font-size: .75rem; }
.t15-pairs-cell.ratio strong { font-size: 1rem; color: #16A36B; }
.t15-pairs-finding {
  margin-top: 14px; padding: 12px 14px;
  background: #FEF3C7; border-radius: 10px; font-size: .88rem; line-height: 1.5;
  border-left: 4px solid #F0A93B; color: #7A5418;
}
.t15-pairs-finding strong { color: #92400E; }

/* ── ③ Line Graph ────────────────────────────────────────── */
.t15-line-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 16px; margin-top: 14px;
}
.t15-line-svg {
  display: block; width: 100%; height: auto; max-width: 420px;
  margin: 0 auto;
  background: #fff; border-radius: 10px; padding: 8px;
}
.t15-line-finding {
  margin-top: 14px; padding: 10px 14px; background: #EEF2FF;
  border-radius: 10px; font-size: .88rem; line-height: 1.5;
}
.t15-line-finding strong { color: #4F46E5; }

/* ── ④ Emma vs Jorge Bar Chart ───────────────────────────── */
.t15-bars-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 16px; margin-top: 14px;
}
.t15-bars-cap {
  text-align: center; font-size: .85rem; color: #6F6878; margin-bottom: 12px;
}
.t15-bars-chart {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  background: #fff; border-radius: 12px; padding: 12px;
  height: 220px;
  align-items: end;
}
.t15-bars-week {
  display: flex; flex-direction: column; align-items: center;
  height: 100%; justify-content: flex-end;
}
.t15-bars-pair {
  display: flex; gap: 4px; align-items: flex-end; height: calc(100% - 24px);
  width: 100%;
}
.t15-bars-bar {
  flex: 1; min-height: 4px; height: var(--h);
  border-radius: 4px 4px 0 0;
  display: flex; flex-direction: column-reverse; align-items: center;
  padding: 4px 2px;
  position: relative;
}
.t15-bars-bar.emma {
  background: linear-gradient(180deg, #BE185D, #831843);
}
.t15-bars-bar.jorge {
  background: linear-gradient(180deg, #1E40AF, #1E3A8A);
}
.t15-bars-val {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; font-weight: 800; color: #2A2233;
  white-space: nowrap;
}
.t15-bars-wklabel {
  font-size: .75rem; color: #6F6878; font-weight: 700; margin-top: 4px;
}
.t15-bars-legend {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; font-size: .82rem;
}
.t15-bars-legend .sw {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 3px; margin-right: 4px; vertical-align: middle;
}
.t15-bars-legend .sw.emma { background: #BE185D; }
.t15-bars-legend .sw.jorge { background: #1E40AF; }
.t15-bars-pairs {
  margin-top: 14px; padding: 10px 12px; background: #fff; border-radius: 10px;
}
.t15-bars-pair-label {
  font-size: .8rem; color: #6F6878; margin-bottom: 6px; font-weight: 700;
}
.t15-bars-pair-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.t15-bars-pair-pill {
  background: #EEF2FF; color: #4F46E5;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; padding: 4px 10px; border-radius: 6px;
  font-size: .85rem;
}
.t15-bars-finding {
  margin-top: 14px; padding: 12px 14px;
  background: #FEF3C7; border-radius: 10px; font-size: .88rem; line-height: 1.5;
  border-left: 4px solid #F0A93B; color: #7A5418;
}
.t15-bars-finding strong { color: #92400E; }

/* ── ⑤ + ⑥ Speed Round + Relationship Detective ──────────── */
.t15-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.t15-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.05rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.t15-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px;
}
.t15-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.t15-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.t15-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.t15-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.t15-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.15rem; font-weight: 800; color: #4F46E5;
}
.t15-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.t15-speed-opt.right .t15-speed-opt-val { color: #16A36B; }
.t15-speed-opt.wrong .t15-speed-opt-val { color: #DC2626; }
.t15-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.t15-speed-fb.right { color: #16A36B; font-weight: 800; }
.t15-speed-fb.wrong { color: #DC2626; }
.t15-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.t15-speed-reset:hover { background: #EEF2FF; }

.t15-rel-pairs {
  display: flex; flex-direction: column; gap: 4px; margin-top: 12px;
  background: #FBF4EA; padding: 12px; border-radius: 12px;
}
.t15-rel-pair {
  display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px;
  align-items: center; padding: 6px 10px;
  background: #fff; border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .9rem;
}
.t15-rel-pair .a {
  background: #FCE7F3; color: #BE185D; padding: 2px 8px;
  border-radius: 4px; font-weight: 800; text-align: center;
}
.t15-rel-pair .b {
  background: #DBEAFE; color: #1E40AF; padding: 2px 8px;
  border-radius: 4px; font-weight: 800; text-align: center;
}
.t15-rel-pair .ratio {
  color: #16A36B; font-weight: 800; font-size: .82rem;
  text-align: right;
}

/* ════════════════════════════════════════════════════════════
   B1 — math-b-1: Add, Subtract & Multiply Decimals (G6)
   ════════════════════════════════════════════════════════════ */

/* ── ① Place Value Chart (20.78) ──────────────────────────── */
.b1-pv-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 14px;
}
.b1-pv-title {
  text-align: center; font-size: .92rem; color: #2A2233;
  margin-bottom: 12px; font-weight: 700;
}
.b1-pv-chart {
  display: flex; gap: 4px; justify-content: center; flex-wrap: wrap;
}
.b1-pv-col {
  display: flex; flex-direction: column; align-items: center;
  min-width: 64px; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent;
}
.b1-pv-col.tens      { border-color: #1E40AF; }
.b1-pv-col.ones      { border-color: #3B82F6; }
.b1-pv-col.tenths    { border-color: #BE185D; }
.b1-pv-col.hundredths{ border-color: #831843; }
.b1-pv-col.point {
  min-width: 24px; border-color: transparent;
}
.b1-pv-head {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: 4px 6px; text-align: center;
  color: #fff;
}
.b1-pv-col.tens .b1-pv-head      { background: #1E40AF; }
.b1-pv-col.ones .b1-pv-head      { background: #3B82F6; }
.b1-pv-col.tenths .b1-pv-head    { background: #BE185D; }
.b1-pv-col.hundredths .b1-pv-head{ background: #831843; }
.b1-pv-col.point .b1-pv-head     { background: transparent; }
.b1-pv-digit {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.8rem; font-weight: 800; color: #2A2233;
  padding: 12px 8px; background: #fff; min-width: 50px; text-align: center;
}
.b1-pv-col.point .b1-pv-digit {
  color: #DC2626; font-size: 2.2rem; padding: 6px 0 16px;
  background: transparent; min-width: 24px;
}
.b1-pv-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem; padding: 4px 6px; text-align: center; font-weight: 800;
  background: #F8FAFC; color: #6F6878;
}
.b1-pv-col.point .b1-pv-val { background: transparent; font-style: italic; }
.b1-pv-axis {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px;
  margin-top: 14px; font-size: .78rem; color: #6F6878; font-weight: 700;
}
.b1-pv-axis :first-child { text-align: left; color: #1E40AF; }
.b1-pv-axis :last-child  { text-align: right; color: #BE185D; }
.b1-pv-axis-mid { color: #DC2626; }
.b1-pv-sum {
  margin-top: 14px; padding: 12px 14px;
  background: #fff; border: 2px solid #4F46E5; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .95rem;
}
.b1-pv-add { color: #4F46E5; }
.b1-pv-op { color: #6F6878; }
.b1-pv-total { color: #16A36B; font-size: 1.2rem; }

/* ── ② Subtract Algorithm (20.7 − 0.258) ──────────────────── */
.b1-sub-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.b1-sub-stage {
  background: #fff; border-radius: 12px; padding: 12px 14px;
  margin-bottom: 10px;
}
.b1-sub-stage-label {
  font-size: .82rem; font-weight: 800; color: #6F6878;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px;
}
.b1-sub-estimate {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .95rem; color: #2A2233;
}
.b1-sub-estimate .hi {
  background: #FCD34D; color: #7C2D12;
  padding: 2px 6px; border-radius: 4px; font-weight: 800;
}
.b1-sub-algo {
  display: inline-block; padding: 12px;
  background: #FBF4EA; border-radius: 10px;
  margin: 0 auto; display: block;
  width: max-content; max-width: 100%;
}
.b1-sub-row {
  display: flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800;
}
.b1-sub-op {
  font-size: 1.3rem; color: #6F6878; width: 24px; text-align: right;
  padding-right: 4px;
}
.b1-sub-tile {
  width: 34px; height: 38px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: #DBEAFE; color: #1E40AF;
  font-size: 1.15rem;
}
.b1-sub-tile.pad {
  background: #FCD34D; color: #7C2D12;
  box-shadow: 0 0 0 2px #F0A93B;
}
.b1-sub-tile.result {
  background: #D1FAE5; color: #065F46;
  box-shadow: 0 0 0 2px #16A36B;
}
.b1-sub-dot {
  width: 12px; height: 38px;
  display: flex; align-items: flex-end; justify-content: center;
  color: #DC2626; font-size: 1.8rem; font-weight: 800; line-height: 1;
  padding-bottom: 4px;
}
.b1-sub-dot.result {
  background: #D1FAE5; color: #DC2626;
  border-radius: 4px;
}
.b1-sub-rule { border-top: 2px solid #2A2233; margin: 4px 0; }
.b1-sub-meta {
  font-family: 'Inter', sans-serif; font-size: .82rem; color: #6F6878;
  margin-top: 10px; line-height: 1.5;
}
.b1-sub-answer {
  margin-top: 10px; padding: 12px 16px;
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 12px;
  text-align: center; font-size: .95rem; line-height: 1.5;
}
.b1-sub-answer strong { color: #16A36B; }

/* ── ③ Multiply Rule (decimal counter) ───────────────────── */
.b1-mul-rule-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 14px;
}
.b1-mul-rule-steps {
  display: flex; flex-direction: column; gap: 8px;
}
.b1-mul-rule-step {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px;
  align-items: center; background: #fff; border-radius: 10px; padding: 8px 12px;
}
.b1-mul-rule-num {
  background: #4F46E5; color: #fff; font-weight: 800;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.b1-mul-rule-txt { font-size: .92rem; color: #2A2233; }
.b1-mul-rule-eq {
  margin-top: 14px; padding: 10px 14px;
  background: #EEF2FF; border-radius: 10px; text-align: center;
}
.b1-mul-formula {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; color: #4F46E5; font-size: .88rem;
}
.b1-mul-rule-example {
  margin-top: 14px; padding: 14px;
  background: #fff; border: 2px solid #4F46E5; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.b1-mul-rule-example-row {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.b1-mul-rule-example-row.final { padding: 8px 12px; background: #ECFDF5; border-radius: 8px; }
.b1-mul-rule-example-op, .b1-mul-rule-example-arrow {
  font-size: 1.4rem; color: #6F6878; font-weight: 800;
}
.b1-mul-rule-meta {
  font-size: .78rem; color: #6F6878; font-weight: 700;
}
.b1-mul-rule-meta strong { color: #16A36B; }
.b1-mul-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; padding: 4px 10px; border-radius: 8px; font-size: 1.1rem;
}
.b1-mul-pill.pink  { background: #FCE7F3; color: #BE185D; }
.b1-mul-pill.blue  { background: #DBEAFE; color: #1E40AF; }
.b1-mul-pill.green { background: #D1FAE5; color: #065F46; }
.b1-mul-pill.amber { background: #FEF3C7; color: #92400E; }

/* ── ④ Multiply Algorithm (3.25 × 2.5) ────────────────────── */
.b1-mul-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.b1-mul-stage {
  background: #fff; border-radius: 12px; padding: 12px 14px;
  margin-bottom: 10px;
}
.b1-mul-stage-label {
  font-size: .82rem; font-weight: 800; color: #6F6878;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px;
}
.b1-mul-algo {
  display: inline-block; padding: 12px;
  background: #FBF4EA; border-radius: 10px;
  margin: 0 auto; display: block; width: max-content; max-width: 100%;
}
.b1-mul-row {
  display: flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800;
}
.b1-mul-op {
  font-size: 1rem; color: #6F6878; width: 30px; text-align: right;
  padding-right: 4px;
}
.b1-mul-tile {
  width: 32px; height: 36px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #2A2233; font-size: 1.1rem;
}
.b1-mul-tile.pink { background: #FCE7F3; color: #BE185D; }
.b1-mul-tile.blue { background: #DBEAFE; color: #1E40AF; }
.b1-mul-tile.p1   { background: #FEF3C7; color: #92400E; }
.b1-mul-tile.p2   { background: #FCE7F3; color: #831843; }
.b1-mul-tile.sum  { background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B; }
.b1-mul-rule { border-top: 2px solid #2A2233; margin: 4px 0; }
.b1-mul-stage-meta {
  font-family: 'Inter', sans-serif; font-size: .82rem; color: #6F6878;
  margin-top: 10px; text-align: center;
}
.b1-mul-count {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.b1-mul-count-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.b1-mul-count-meta {
  font-size: .78rem; color: #6F6878; font-weight: 700;
}
.b1-mul-count-meta strong { color: #92400E; }
.b1-mul-count-plus, .b1-mul-count-eq {
  font-size: 1.3rem; color: #6F6878; font-weight: 800;
}
.b1-mul-place {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.b1-mul-place-from {
  font-size: 1.4rem; font-weight: 800; color: #94A3B8;
  padding: 6px 12px; background: #F1F5F9; border-radius: 8px;
}
.b1-mul-place-arrow { color: #4F46E5; font-size: 1.4rem; font-weight: 800; }
.b1-mul-place-to {
  font-size: 1.6rem; font-weight: 800; color: #16A36B;
  padding: 6px 12px; background: #ECFDF5; border-radius: 8px;
  box-shadow: 0 0 0 2px #16A36B;
}
.b1-mul-place-dot {
  color: #DC2626; background: #FCD34D; padding: 0 4px;
  border-radius: 4px; box-shadow: 0 0 0 1px #F0A93B;
}
.b1-mul-answer {
  margin-top: 10px; padding: 12px 16px;
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 12px;
  text-align: center; font-size: .95rem; line-height: 1.5;
}
.b1-mul-answer strong { color: #16A36B; }

/* ── ⑤ + ⑥ Speed Rounds ──────────────────────────────────── */
.b1-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.b1-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.b1-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.b1-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.b1-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.b1-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.b1-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.b1-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5;
}
.b1-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.b1-speed-opt.right .b1-speed-opt-val { color: #16A36B; }
.b1-speed-opt.wrong .b1-speed-opt-val { color: #DC2626; }
.b1-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.b1-speed-fb.right { color: #16A36B; font-weight: 800; }
.b1-speed-fb.wrong { color: #DC2626; }
.b1-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.b1-speed-reset:hover { background: #EEF2FF; }

/* Figure (SVG, image, etc.) rendered above the practice question.
   Used by Click-to-Classify on the Classify 2D Figures lesson. */
.mag-pfigure {
  display: flex; justify-content: center; align-items: center;
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  padding: 22px; border-radius: 16px; margin-bottom: 12px;
  min-height: 160px;
}
.mag-pfigure svg { max-width: 100%; height: auto; }
.mag-pfigure svg polygon,
.mag-pfigure svg rect,
.mag-pfigure svg circle { fill: #ffffff; stroke: #ffffff; }
.mag-pfigure svg text,
.mag-pfigure svg line[stroke="#fff"] { fill: #ffffff; stroke: #ffffff; }

.mag-pquestion {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2rem);
  color: var(--mag-ink); text-align: center;
  padding: 16px; background: var(--mag-inset);
  border-radius: 16px; margin-bottom: 6px;
}
.mag-pquestion-ar { font-family: var(--sans); font-size: .85rem; color: var(--mag-gray); text-align: center; direction: rtl; margin-bottom: 14px; }
.mag-poptions { display: flex; flex-direction: column; gap: 8px; }
.mag-poption {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid var(--mag-line);
  border-radius: 14px; padding: 12px 14px;
  font-size: 1rem; font-family: var(--sans); text-align: left;
  color: var(--mag-ink); transition: var(--transition);
}
.mag-poption:hover:not(:disabled) { border-color: var(--mag-indigo); }
.mag-poption.selected { border-color: var(--mag-indigo); background: var(--mag-indigo-bg); }
.mag-poption.correct  { border-color: var(--mag-green); background: #E6F6EE; color: #1A6B47; }
.mag-poption.wrong    { border-color: #E5544B; background: #FDECEC; color: #8A2C2C; }
.mag-poption:disabled { cursor: default; }
.mag-poption-letter {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--mag-inset); font-weight: 800; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
}
.mag-poption.correct .mag-poption-letter { background: var(--mag-green); color: #fff; }
.mag-poption.wrong   .mag-poption-letter { background: #E5544B; color: #fff; }
.mag-poption.selected .mag-poption-letter { background: var(--mag-indigo); color: #fff; }
.mag-phint {
  background: #ECEBFB; border-radius: 12px; padding: 10px 14px;
  font-size: .88rem; color: #3D3792; margin-top: 10px; line-height: 1.5;
}
.mag-pfeedback { border-radius: 12px; padding: 12px 14px; margin-top: 10px; font-size: .92rem; line-height: 1.55; }
.mag-pfeedback.correct { background: #E6F6EE; color: #1A6B47; }
.mag-pfeedback.wrong   { background: #FDECEC; color: #8A2C2C; }
.mag-pactions { display: flex; gap: 8px; margin-top: 12px; }
.mag-btn {
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
  border: 0; border-radius: 14px; padding: 12px 18px;
  cursor: pointer; transition: var(--transition);
}
.mag-btn:active { transform: scale(.98); }
.mag-btn-primary { background: var(--mag-indigo); color: #fff; flex: 1; }
.mag-btn-primary:disabled { opacity: .5; }
.mag-btn-ghost { background: var(--mag-inset); color: var(--mag-gray); }

/* ── Sources / citation ───────────────────────────────────────── */
.mag-source {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--mag-inset); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 8px;
  text-decoration: none; color: var(--mag-ink);
  transition: var(--transition);
}
.mag-source:hover { background: var(--mag-indigo-bg); }
.mag-source-icon { font-size: 1.4rem; flex-shrink: 0; }
.mag-source-title { font-weight: 700; font-size: .9rem; color: var(--mag-indigo); }
.mag-source-meta  { font-size: .78rem; color: var(--mag-gray); margin-top: 2px; }
.mag-source-open  { margin-left: auto; color: var(--mag-indigo); font-weight: 700; font-size: .82rem; flex-shrink: 0; }

/* ── Quiz CTA + footer ────────────────────────────────────────── */
.mag-quiz-card {
  background: linear-gradient(135deg, #4F46E5, #6D5CE7);
  border-radius: 26px; padding: 28px 24px; margin: 18px auto;
  max-width: 620px; text-align: center; color: #fff;
}
.mag-quiz-card h2 { font-family: var(--serif); font-weight: 800; font-size: 1.5rem; margin-bottom: 6px; }
.mag-quiz-card p  { font-size: .92rem; opacity: .9; margin-bottom: 16px; }
.mag-quiz-btn {
  background: #fff; color: var(--mag-indigo);
  font-family: var(--sans); font-weight: 800; font-size: 1.05rem;
  border: 0; border-radius: 16px; padding: 15px 24px; width: 100%;
  cursor: pointer;
}
.mag-footer-tip {
  text-align: center; font-size: .84rem; color: var(--mag-gray);
  max-width: 30em; margin: 18px auto 0; line-height: 1.55;
}

/* ── Magazine: takeaways + embedded element overrides ─────────── */
.mag-takeaway {
  background: var(--mag-inset);
  border-left: 4px solid var(--mag-indigo);
  border-radius: 12px;
  padding: 11px 15px; margin-bottom: 9px;
  font-size: .94rem; color: var(--mag-ink); line-height: 1.5;
}
.mag-body .lc-calc, .mag-example .lc-calc {
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  background: #fff; border: 1px solid var(--mag-line);
  border-radius: 12px; padding: 12px 16px;
  font-size: 1.05rem; line-height: 1.55; color: var(--mag-ink);
  white-space: pre; overflow-x: auto; margin: 8px 0; text-align: center;
}
.mag-body .formula-chip {
  display: inline-block; background: var(--mag-indigo-bg);
  color: var(--mag-indigo); font-weight: 800;
  padding: 4px 14px; border-radius: var(--radius-full); font-size: 1em;
}
.mag-body .pv-chart { display: flex; gap: 2px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.mag-body .pv-col { display: flex; flex-direction: column; min-width: 50px; }
.mag-body .pv-head {
  font-size: .56rem; font-weight: 800; text-transform: uppercase;
  background: var(--mag-indigo); color: #fff; padding: 5px 2px; text-align: center; line-height: 1.1;
}
.mag-body .pv-digit {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 800; text-align: center;
  padding: 8px 2px; background: var(--mag-inset); border: 1px solid var(--mag-line); color: var(--mag-ink);
}
.mag-body .pv-col.pv-point { min-width: 18px; }
.mag-body .pv-col.pv-point .pv-head { background: transparent; }
.mag-body .pv-col.pv-point .pv-digit { background: transparent; border: none; color: var(--mag-orange); }
.mag-calc .ans, .mag-body .lc-calc .ans { color: var(--mag-green); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════
   PREREQUISITES + REVERSE-LEARNING UI
   ════════════════════════════════════════════════════════════════ */

/* Prereq panel — sits near the top of every lesson */
.prereq-panel {
  background: #fff;
  border-radius: 22px;
  border: 1px dashed var(--mag-indigo);
  padding: 18px 20px;
  margin: 16px auto;
  max-width: 620px;
  box-shadow: 0 8px 28px rgba(40,30,60,.05);
}
.prereq-panel.no-prereqs { border-style: solid; border-color: #E1F5EC; background: #F3FBF6; }
.prereq-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.prereq-head h3 {
  font-family: var(--serif); font-weight: 800; font-size: 1.1rem;
  color: var(--mag-ink); margin: 0;
}
.prereq-head-ar { font-size: .82rem; color: var(--mag-gray); margin-left: auto; direction: rtl; }
.prereq-intro { font-size: .92rem; color: var(--mag-gray); margin-bottom: 12px; line-height: 1.55; }
.prereq-list { display: flex; flex-direction: column; gap: 8px; }
.prereq-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--mag-inset); border-radius: 14px;
  padding: 10px 14px;
  text-decoration: none; color: var(--mag-ink);
  transition: var(--transition); cursor: pointer; border: 0;
  width: 100%; text-align: left; font-family: var(--sans);
}
.prereq-chip:hover { background: var(--mag-indigo-bg); transform: translateX(2px); }
.prereq-chip-icon { font-size: 1.3rem; flex-shrink: 0; }
.prereq-chip-info { flex: 1; min-width: 0; }
.prereq-chip-title { font-weight: 700; font-size: .92rem; }
.prereq-chip-meta { font-size: .76rem; color: var(--mag-gray); margin-top: 2px; }
.prereq-chip-status { font-size: .8rem; flex-shrink: 0; padding: 4px 10px; border-radius: var(--radius-full); font-weight: 700; }
.prereq-chip-status.done { background: var(--success-bg); color: var(--success); }
.prereq-chip-status.todo { background: var(--mag-indigo-bg); color: var(--mag-indigo); }
.prereq-empty {
  display: flex; align-items: center; gap: 8px;
  font-size: .92rem; color: #1A6B47; font-style: italic;
}

/* "Need help?" reverse-learning button (in lesson footer) */
.rev-help-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #FFF6E9; color: #7A5418; border: 1px solid #F0A93B;
  border-radius: 16px; padding: 14px 18px; width: 100%;
  font-family: var(--sans); font-weight: 700; font-size: .98rem;
  margin-top: 14px; cursor: pointer; transition: var(--transition);
}
.rev-help-btn:hover { background: #FFE8C4; }

/* Reverse-learning modal */
.rev-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(20, 18, 30, .55); backdrop-filter: blur(4px);
  animation: revFade .25s ease;
}
.rev-modal.hidden { display: none; }
@keyframes revFade { from { opacity: 0; } to { opacity: 1; } }
.rev-modal-inner {
  background: linear-gradient(155deg, #FBE4D6 0%, #FBF4EA 50%, #E8E6F4 100%);
  border-radius: 26px; padding: 26px 22px;
  max-width: 460px; width: 100%;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
  max-height: 88vh; overflow-y: auto;
  animation: revPop .3s ease;
}
@keyframes revPop {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rev-modal-head { text-align: center; margin-bottom: 14px; }
.rev-modal-icon { font-size: 3rem; line-height: 1; }
.rev-modal-head h2 {
  font-family: var(--serif); font-weight: 800; font-size: 1.5rem;
  color: var(--mag-ink); margin: 8px 0 4px;
}
.rev-modal-head p { font-size: .95rem; color: var(--mag-gray); line-height: 1.55; }
.rev-modal-head p.ar { color: var(--mag-gray); font-size: .85rem; margin-top: 4px; direction: rtl; }
.rev-modal-body { margin: 14px 0; }
.rev-modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.rev-modal-actions .btn { flex: 1; }

/* Auto-suggest banner on the results screen (after a low quiz score) */
.rev-suggest-banner {
  background: #FFF6E9; border: 1px solid #F0A93B; border-radius: 16px;
  padding: 14px 16px; margin: 14px 0;
  text-align: left;
}
.rev-suggest-banner h4 { font-family: var(--sans); font-weight: 800; color: #7A5418; font-size: 1rem; margin-bottom: 4px; }
.rev-suggest-banner p { font-size: .88rem; color: #7A5418; line-height: 1.5; margin-bottom: 8px; }

/* ════════════════════════════════════════════════════════════════
   DESKTOP / TABLET LAYOUT  (≥ 768px)
   The app was built mobile-first with a 540px column. On larger
   screens we expand the shell to fill the viewport, give content
   breathing room, and lay grid-friendly screens out in columns.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  body { background: linear-gradient(135deg, #F0FAF4 0%, #FFFDF7 50%, #FBF4EA 100%); }

  #app {
    max-width: 1120px;
    padding: 0 24px;
  }
  #screen-container { padding-bottom: calc(var(--nav-h) + 28px); }

  /* Bottom nav: match the wider shell, with cushion from the edges. */
  .bottom-nav {
    max-width: 1120px;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 28px rgba(0,0,0,.10);
  }

  /* Dashboard: two-column subjects grid on wider screens. */
  .subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
  }

  /* Subjects-browse page and single-subject (3 levels) page. */
  .subjects-screen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    padding: 16px;
  }

  /* Chapter list on level page: two-column. */
  .chapters-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 12px;
  }
  .chapter-card { width: 100%; }
  .final-exam-card { grid-column: 1 / -1; }

  /* Streak chips spread out comfortably. */
  .dashboard-streak-row { gap: 12px; }

  /* Card-based lessons (Science / English) — wider, more readable. */
  .lc-card-container { max-width: 820px; margin: 0 auto; }
  .lc-card { max-width: 760px; }

  /* Magazine layout (Math) — keep editorial column readable but centred. */
  .mag-page { max-width: 820px; }

  /* Quiz body comfortable on desktop. */
  .quiz-body { max-width: 720px; margin: 0 auto; padding: 24px; }

  /* Diagnostic / results / report screens centred and roomier. */
  .results-screen, .diagnostic-screen, .report-screen { max-width: 760px; margin: 0 auto; }
}

/* Larger desktops (≥ 1280px): a touch wider for data-dense screens. */
@media (min-width: 1280px) {
  #app, .bottom-nav { max-width: 1240px; }
  .chapters-list { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════════════
   AI TUTOR  — floating FAB, slide-in drawer, AI toolbar buttons,
   flashcard flip, mind-map container, settings, study aids, etc.
   ════════════════════════════════════════════════════════════════ */

/* ── Floating AI button (FAB) ───────────────────────────────────── */
.tutor-fab {
  position: fixed; right: 22px; bottom: calc(var(--nav-h) + 18px);
  z-index: 90;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px 14px 14px;
  background: linear-gradient(135deg, #F0A93B 0%, #E68B1C 100%);
  color: #fff; font-weight: 800; font-size: .92rem;
  border-radius: 99px;
  box-shadow: 0 10px 28px rgba(230,139,28,.42), 0 2px 6px rgba(0,0,0,.1);
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
  font-family: var(--sans, 'Inter', sans-serif);
}
.tutor-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(230,139,28,.48); }
.tutor-fab.hidden { display: none; }
.tutor-fab-icon { font-size: 1.45rem; line-height: 1; }
.tutor-fab-label { display: inline-block; }
@media (max-width: 480px) {
  .tutor-fab-label { display: none; }
  .tutor-fab { padding: 14px; }
}

/* ── Slide-in drawer ────────────────────────────────────────────── */
.tutor-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: linear-gradient(180deg, #FBF4EA 0%, #FFFDF8 100%);
  border-left: 1px solid rgba(0,0,0,.06);
  box-shadow: -16px 0 40px rgba(0,0,0,.18);
  z-index: 200;
  display: flex; flex-direction: column;
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.tutor-drawer.hidden { transform: translateX(100%); display: flex; }
@media (max-width: 540px) {
  .tutor-drawer { width: 100vw; }
}
.tutor-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.tutor-drawer-head h3 {
  font-family: var(--serif, 'Playfair Display', serif);
  font-weight: 800; font-size: 1.15rem; margin-bottom: 4px;
  color: #2A2233;
}
.tutor-drawer-sub { font-size: .78rem; color: var(--mag-gray, #6F6878); margin: 0; }
.tutor-drawer-close {
  background: rgba(0,0,0,.05); border: 0; border-radius: 50%;
  width: 32px; height: 32px; font-size: 1rem; cursor: pointer; color: #2A2233;
  display: flex; align-items: center; justify-content: center;
}
.tutor-drawer-close:hover { background: rgba(0,0,0,.10); }

.tutor-drawer-body {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.tutor-bubble {
  max-width: 88%; padding: 10px 14px; border-radius: 16px;
  font-size: .92rem; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word;
}
.tutor-bubble.user {
  align-self: flex-end; background: var(--mag-indigo, #4F46E5); color: #fff;
  border-bottom-right-radius: 4px;
}
.tutor-bubble.assistant {
  align-self: flex-start; background: #fff; color: #2A2233;
  border: 1px solid rgba(0,0,0,.06); border-bottom-left-radius: 4px;
}
.tutor-bubble.system {
  align-self: center; background: #FFF6E9; color: #7A5418;
  border: 1px solid #F0A93B; font-size: .82rem; padding: 8px 12px;
  border-radius: 12px;
}
.tutor-bubble.error {
  align-self: center; background: #FEE2E2; color: #991B1B;
  border: 1px solid #DC2626; font-size: .82rem; padding: 8px 12px; border-radius: 12px;
}
.tutor-typing {
  align-self: flex-start; display: inline-flex; gap: 4px;
  padding: 12px 14px; background: #fff; border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px; border-bottom-left-radius: 4px;
}
.tutor-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: #C7CAD7;
  animation: tutorDot 1.1s ease-in-out infinite both;
}
.tutor-typing span:nth-child(2) { animation-delay: .15s; }
.tutor-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes tutorDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.tutor-quickchips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 18px 8px;
}
.tutor-chip {
  background: #fff; border: 1px solid rgba(0,0,0,.10);
  border-radius: 99px; padding: 6px 12px; font-size: .78rem; font-weight: 600;
  color: #2A2233; cursor: pointer; transition: all .15s ease;
  white-space: nowrap;
}
.tutor-chip:hover { background: var(--mag-indigo, #4F46E5); color: #fff; border-color: transparent; }

.tutor-drawer-input {
  display: flex; gap: 8px; padding: 12px 18px;
  border-top: 1px solid rgba(0,0,0,.06); background: rgba(255,255,255,.6);
}
.tutor-drawer-input textarea {
  flex: 1; border: 1px solid rgba(0,0,0,.12); border-radius: 14px;
  padding: 10px 12px; font-size: .92rem; resize: none; font-family: inherit;
  background: #fff;
}
.tutor-drawer-input textarea:focus { outline: 2px solid var(--mag-indigo, #4F46E5); outline-offset: -1px; }
.tutor-send-btn {
  background: var(--mag-indigo, #4F46E5); color: #fff;
  border: 0; border-radius: 14px; padding: 0 16px;
  font-weight: 700; cursor: pointer; transition: opacity .15s ease;
}
.tutor-send-btn:hover { opacity: .9; }
.tutor-send-btn[disabled] { opacity: .4; cursor: not-allowed; }
.tutor-drawer-foot {
  padding: 4px 18px 12px; font-size: .72rem; color: var(--mag-gray, #6F6878); text-align: center;
}

/* ── AI buttons embedded in lessons ─────────────────────────────── */
.ai-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin: 12px 0 18px; padding: 12px;
  background: linear-gradient(135deg, #FFF6E9 0%, #FBF4EA 100%);
  border-radius: 16px; border: 1px dashed #F0A93B;
}
.ai-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 99px;
  background: #fff; border: 1px solid #F0A93B; color: #7A5418;
  font-family: var(--sans, 'Inter', sans-serif); font-weight: 700; font-size: .82rem;
  cursor: pointer; transition: all .15s ease;
}
.ai-btn:hover { background: #F0A93B; color: #fff; }
.ai-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ai-btn.compact { padding: 6px 12px; font-size: .76rem; }
.ai-btn-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px;
  justify-content: flex-end;
}

/* AI-generated content panel injected inline under a card */
.ai-result-panel {
  margin-top: 12px; padding: 14px 16px;
  background: #fff; border-radius: 14px;
  border: 1px solid rgba(240,169,59,.4);
  box-shadow: 0 4px 14px rgba(240,169,59,.08);
  animation: aiFadeIn .35s ease;
}
@keyframes aiFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ai-result-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.ai-result-head h4 { font-family: var(--sans, 'Inter', sans-serif); font-weight: 800; font-size: .92rem; color: #7A5418; }
.ai-result-close {
  background: rgba(0,0,0,.05); border: 0; border-radius: 50%;
  width: 26px; height: 26px; font-size: .85rem; cursor: pointer; color: #2A2233;
}
.ai-problem {
  background: #FBF4EA; border-radius: 10px; padding: 10px 12px;
  margin-bottom: 8px; font-size: .92rem; line-height: 1.55;
}
.ai-problem-q { font-weight: 700; color: #2A2233; }
.ai-problem-q-ar { font-size: .82rem; color: #6F6878; direction: rtl; margin-top: 4px; }
.ai-problem-answer {
  margin-top: 6px; font-size: .82rem; color: #16A36B; font-weight: 600;
  display: none;
}
.ai-problem.revealed .ai-problem-answer { display: block; }
.ai-problem-reveal {
  margin-top: 6px; background: transparent; border: 0;
  font-size: .78rem; color: var(--mag-indigo, #4F46E5); font-weight: 700; cursor: pointer;
}

/* ── Flashcard deck (flip on click) ─────────────────────────────── */
.flashcard-deck {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin-top: 10px;
}
.flashcard {
  perspective: 1000px; cursor: pointer; min-height: 140px;
}
.flashcard-inner {
  position: relative; width: 100%; height: 100%; min-height: 140px;
  transition: transform .55s; transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 16px; border-radius: 14px;
  text-align: center; font-family: var(--sans, 'Inter', sans-serif);
}
.flashcard-front {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%); color: #fff;
}
.flashcard-front .term { font-weight: 800; font-size: 1.05rem; }
.flashcard-front .term-ar { font-size: .88rem; opacity: .9; margin-top: 4px; direction: rtl; }
.flashcard-front .hint { font-size: .68rem; margin-top: 10px; opacity: .75; }
.flashcard-back {
  background: #fff; border: 1px solid rgba(0,0,0,.08); color: #2A2233;
  transform: rotateY(180deg);
}
.flashcard-back .definition { font-size: .9rem; line-height: 1.5; }
.flashcard-back .example { font-size: .8rem; color: var(--mag-gray, #6F6878); margin-top: 8px; font-style: italic; }

/* ── Mind-map container with zoom controls ──────────────────────── */
.mindmap-wrap {
  position: relative; margin-top: 12px;
  background: #FBF4EA; border-radius: 14px;
  border: 1px solid rgba(240,169,59,.4);
  overflow: hidden;
}
.mindmap-toolbar {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: flex; gap: 4px;
  background: rgba(255,255,255,.92); border-radius: 99px;
  padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.mindmap-zoom-btn {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; font-size: 1rem;
  font-weight: 700; color: #2A2233; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.mindmap-zoom-btn:hover { background: rgba(0,0,0,.08); }
.mindmap-zoom-btn:active { background: rgba(0,0,0,.16); }
.mindmap-zoom-label {
  font-size: .72rem; color: var(--mag-gray, #6F6878);
  display: flex; align-items: center; padding: 0 6px;
  min-width: 42px; justify-content: center; font-weight: 700;
}

.mindmap-container {
  width: 100%; min-height: 360px; max-height: 600px;
  overflow: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  cursor: grab;
}
.mindmap-container.dragging { cursor: grabbing; }

.mindmap-inner {
  transform-origin: center center;
  transition: transform .18s ease-out;
  display: inline-block;
  /* Apply scale via inline style from JS */
}
.mindmap-container svg {
  display: block;
  /* Force a comfortable minimum readable size on any screen */
  min-width: 500px;
  max-width: none;
  width: auto;
  height: auto;
}
/* Make Mermaid node text readable */
.mindmap-container svg .mindmap-node text,
.mindmap-container svg .nodeLabel,
.mindmap-container svg text {
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.mindmap-container svg .mindmap-node circle,
.mindmap-container svg .mindmap-node rect,
.mindmap-container svg .mindmap-node polygon {
  stroke-width: 2px !important;
}
.mindmap-hint {
  text-align: center; font-size: .72rem; color: var(--mag-gray, #6F6878);
  padding: 4px 8px 8px; font-style: italic;
}

/* ── Summary box ────────────────────────────────────────────────── */
.ai-summary {
  background: linear-gradient(135deg, #FFF6E9 0%, #FBF4EA 100%);
  border-left: 4px solid #F0A93B; border-radius: 0 14px 14px 0;
  padding: 14px 18px; font-size: .95rem; line-height: 1.7;
  color: #2A2233;
}
.ai-summary ul { margin: 8px 0 0 18px; }
.ai-summary li { margin: 4px 0; }

/* ── Free-response grade box ────────────────────────────────────── */
.ai-grade-card {
  margin-top: 10px; padding: 14px 16px; border-radius: 12px;
  background: #fff; border: 1px solid rgba(0,0,0,.08);
}
.ai-grade-verdict { font-weight: 800; font-size: 1rem; margin-bottom: 6px; }
.ai-grade-verdict.ok    { color: #16A36B; }
.ai-grade-verdict.warn  { color: #D97706; }
.ai-grade-verdict.bad   { color: #DC2626; }
.ai-grade-feedback { font-size: .9rem; line-height: 1.55; color: #2A2233; }
.ai-grade-tip { font-size: .82rem; color: var(--mag-gray, #6F6878); margin-top: 6px; font-style: italic; }

/* ── AI explanation appended to wrong quiz answer ───────────────── */
.ai-wrong-explain {
  margin-top: 10px; padding: 10px 14px; border-radius: 12px;
  background: #FFF6E9; border-left: 4px solid #F0A93B;
  font-size: .88rem; line-height: 1.55; color: #7A5418;
  animation: aiFadeIn .4s ease;
}

/* ── Settings screen ───────────────────────────────────────────── */
.settings-screen { padding: 18px; max-width: 720px; margin: 0 auto; }
.settings-section {
  background: #fff; border-radius: 16px; padding: 18px 20px;
  margin-bottom: 14px; border: 1px solid rgba(0,0,0,.06);
}
.settings-section h3 {
  font-family: var(--serif, 'Playfair Display', serif); font-weight: 800;
  font-size: 1.05rem; margin-bottom: 4px; color: #2A2233;
}
.settings-section p.hint {
  font-size: .82rem; color: var(--mag-gray, #6F6878); margin-bottom: 14px;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 10px 0;
}
.settings-row label { font-weight: 700; font-size: .92rem; color: #2A2233; }
.settings-row input[type="password"],
.settings-row input[type="text"],
.settings-row input[type="number"],
.settings-row select {
  flex: 1; max-width: 320px; padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.12); border-radius: 10px;
  font-size: .92rem; font-family: inherit; background: #fff;
}
.settings-row input:focus, .settings-row select:focus {
  outline: 2px solid var(--mag-indigo, #4F46E5); outline-offset: -1px;
}
.settings-toggle {
  appearance: none; width: 44px; height: 26px; border-radius: 99px;
  background: #C7CAD7; position: relative; cursor: pointer; transition: background .2s ease;
  flex: 0 0 auto;
}
.settings-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.settings-toggle:checked { background: #16A36B; }
.settings-toggle:checked::after { transform: translateX(18px); }

/* Budget meter */
.budget-meter { margin: 8px 0; }
.budget-bar { height: 10px; background: #E5E7EE; border-radius: 99px; overflow: hidden; }
.budget-bar-fill { height: 100%; background: linear-gradient(90deg, #16A36B 0%, #D97706 80%, #DC2626 100%); transition: width .4s ease; }
.budget-text { font-size: .82rem; color: var(--mag-gray, #6F6878); margin-top: 6px; }

/* Interest picker chips */
.interest-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.interest-chip {
  padding: 10px 14px; border-radius: 99px;
  background: #fff; border: 1.5px solid rgba(0,0,0,.10);
  cursor: pointer; transition: all .15s ease;
  font-size: .9rem; font-weight: 600; color: #2A2233;
  user-select: none;
}
.interest-chip:hover { border-color: var(--mag-indigo, #4F46E5); }
.interest-chip.selected {
  background: var(--mag-indigo, #4F46E5); color: #fff; border-color: transparent;
}

/* ── Onboarding (interest picker) modal ─────────────────────────── */
.onboarding-modal {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(20,18,30,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: aiFadeIn .25s ease;
}
.onboarding-card {
  background: linear-gradient(155deg, #FBE4D6 0%, #FBF4EA 50%, #E8E6F4 100%);
  border-radius: 24px; padding: 26px 22px;
  max-width: 480px; width: 100%; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
}
.onboarding-card h2 {
  font-family: var(--serif, 'Playfair Display', serif); font-weight: 800;
  font-size: 1.45rem; margin-bottom: 6px; color: #2A2233;
}
.onboarding-card p { font-size: .92rem; color: var(--mag-gray, #6F6878); line-height: 1.55; }
.onboarding-card .onboarding-actions { display: flex; gap: 8px; margin-top: 16px; }
.onboarding-card .onboarding-actions .btn { flex: 1; }

/* ── Study Aids tab on Progress ─────────────────────────────────── */
.aids-empty { text-align: center; padding: 40px 20px; color: var(--mag-gray, #6F6878); font-style: italic; }
.aid-chapter-block {
  background: #fff; border-radius: 14px; padding: 14px 16px;
  margin-bottom: 12px; border: 1px solid rgba(0,0,0,.06);
}
.aid-chapter-block h4 { font-weight: 800; margin-bottom: 8px; font-size: .98rem; }
.aid-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.aid-chip {
  padding: 6px 12px; border-radius: 99px; background: #FFF6E9;
  border: 1px solid #F0A93B; color: #7A5418; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .15s ease;
}
.aid-chip:hover { background: #F0A93B; color: #fff; }

/* ════════════════════════════════════════════════════════════════
   GRADE BADGE — small "G5" or "G6" pill next to chapter titles
   ════════════════════════════════════════════════════════════════ */
.grade-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 99px;
  vertical-align: 2px;
  margin-left: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.3;
}
.grade-badge-g5 { background: #E0F2FE; color: #0369A1; border: 1px solid #BAE6FD; }
.grade-badge-g6 { background: #EEF2FF; color: #4338CA; border: 1px solid #C7D2FE; }

/* ── Grade SECTIONS on the Math subject page ─────────────────── */
.grade-section { margin: 18px 0 26px; }
.grade-section + .grade-section { padding-top: 18px; border-top: 1px dashed rgba(0,0,0,.08); }
.grade-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 4px 6px; flex-wrap: wrap;
}
.grade-section-title { display: flex; align-items: center; gap: 10px; }
.grade-section-title h3 {
  font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.25rem;
  margin: 0; color: #2A2233;
}
.grade-section-ar { font-family: 'Inter', sans-serif; font-weight: 600; font-size: .82rem; color: var(--text-muted); margin-left: 6px; direction: rtl; }
.grade-pill {
  display: inline-block; padding: 6px 12px; border-radius: 99px;
  font-weight: 800; font-size: .82rem; letter-spacing: .04em;
}
.grade-pill-g5 { background: #0EA5E9; color: #fff; }
.grade-pill-g6 { background: #4F46E5; color: #fff; }
.grade-section-progress { display: flex; align-items: center; gap: 10px; }
.grade-section-meta { font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.grade-section-blurb {
  font-size: .9rem; line-height: 1.55; color: var(--text-muted);
  padding: 0 4px; margin: 6px 0 12px;
}

/* On mobile, stack the head pieces. */
@media (max-width: 600px) {
  .grade-section-head { flex-direction: column; align-items: flex-start; }
}

/* When used inside the magazine eyebrow (uppercase indigo text), make it inline-y */
.mag-eyebrow .grade-badge { vertical-align: 1px; }

/* ════════════════════════════════════════════════════════════════
   LANDING PAGE
   Marketing-style welcome screen that explains the app, its AI
   features, the reverse-learning approach, and how it differs from
   traditional learning apps.
   ════════════════════════════════════════════════════════════════ */
.landing-screen {
  color: #2A2233;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.landing-hero {
  position: relative;
  padding: 64px 24px 80px;
  text-align: center;
  overflow: hidden;
}
.landing-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(240,169,59,.25) 0%, transparent 60%),
    radial-gradient(60% 60% at 80% 30%, rgba(79,70,229,.18) 0%, transparent 60%),
    linear-gradient(155deg, #FBE4D6 0%, #FBF4EA 45%, #E8E6F4 100%);
}
.landing-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.landing-eyebrow {
  display: inline-block; padding: 6px 14px; border-radius: 99px;
  background: rgba(79,70,229,.10); color: #4F46E5;
  font-size: .78rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 18px;
}
.landing-logo {
  font-size: 4.2rem; line-height: 1; margin-bottom: 12px;
  animation: landingFloat 4s ease-in-out infinite;
}
@keyframes landingFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.landing-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 900; line-height: 1.05; margin-bottom: 6px;
}
.landing-title-amp { color: #E68B1C; font-style: italic; }
.landing-title-ar {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700; color: #6F6878; direction: rtl;
  margin-bottom: 20px;
}
.landing-tagline {
  font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.6;
  color: #2A2233; max-width: 580px; margin: 0 auto 28px;
}
.landing-tagline em { color: #4F46E5; font-style: italic; font-weight: 600; }
.landing-cta-primary {
  background: linear-gradient(135deg, #F0A93B 0%, #E68B1C 100%); color: #fff;
  border: 0; border-radius: 99px; padding: 16px 32px;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1rem;
  cursor: pointer; box-shadow: 0 14px 30px rgba(230,139,28,.36);
  transition: transform .18s ease, box-shadow .18s ease;
  letter-spacing: .01em;
}
.landing-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(230,139,28,.46); }
.landing-microcopy {
  font-size: .82rem; color: #6F6878; margin-top: 18px;
}

/* ── Sections ──────────────────────────────────────────────────── */
.landing-section {
  padding: 64px 24px;
  max-width: 1080px; margin: 0 auto;
}
.landing-section-tinted {
  max-width: none;
  background: linear-gradient(180deg, #FFFDF8 0%, #FBF4EA 100%);
}
.landing-section-tinted > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.landing-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 800; text-align: center; margin-bottom: 8px;
}
.landing-sub {
  text-align: center; color: #6F6878; max-width: 580px;
  margin: 0 auto 36px; font-size: 1rem; line-height: 1.55;
}

/* ── Three pillars ─────────────────────────────────────────────── */
.pillar-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pillar-card {
  background: #fff; border-radius: 20px;
  padding: 28px 24px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.08); }
.pillar-icon { font-size: 2.4rem; margin-bottom: 12px; }
.pillar-card h3 {
  font-family: 'Playfair Display', serif; font-weight: 800;
  font-size: 1.25rem; margin-bottom: 10px;
}
.pillar-card p { font-size: .94rem; line-height: 1.6; color: #4A4253; }
.pillar-card strong { color: #4F46E5; }

/* ── Feature tour grid (AI capabilities) ───────────────────────── */
.feature-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feature-card {
  background: #fff; border-radius: 16px;
  padding: 22px 18px;
  border: 1px solid rgba(240,169,59,.25);
  transition: border-color .18s ease;
}
.feature-card:hover { border-color: #F0A93B; }
.feature-emoji { font-size: 1.8rem; margin-bottom: 8px; }
.feature-card h4 {
  font-weight: 800; font-size: 1rem; margin-bottom: 6px; color: #2A2233;
}
.feature-card p { font-size: .88rem; line-height: 1.55; color: #5A5366; }
.feature-card em { color: #4F46E5; font-style: italic; }

/* ── Reverse learning flow ─────────────────────────────────────── */
.reverse-flow {
  max-width: 680px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 4px;
}
.flow-step {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border-radius: 16px; padding: 18px 20px;
  border: 1px solid rgba(0,0,0,.06);
}
.flow-num {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%);
  color: #fff; font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.flow-body h4 { font-weight: 800; font-size: 1rem; margin-bottom: 4px; }
.flow-body p { font-size: .9rem; line-height: 1.55; color: #5A5366; }
.flow-body em { color: #4F46E5; font-style: italic; }
.flow-body strong { color: #E68B1C; }
.flow-arrow {
  text-align: center; font-size: 1.4rem; color: #C7CAD7;
  margin: 4px 0; line-height: 1;
}

/* ── Comparison table ──────────────────────────────────────────── */
.compare-table {
  max-width: 880px; margin: 0 auto;
  background: #fff; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}
.compare-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.compare-row > div { padding: 16px 20px; font-size: .94rem; line-height: 1.55; }
.compare-row > div:first-child {
  background: #FBF4EA; color: #6F6878; border-right: 1px solid rgba(0,0,0,.06);
  text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(150,90,40,.4);
}
.compare-row > div:last-child { color: #2A2233; font-weight: 600; }
.compare-head {
  background: linear-gradient(135deg, #4F46E5 0%, #6D5BFF 100%); color: #fff;
}
.compare-head > div {
  background: transparent !important; color: #fff !important;
  font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1rem;
  text-decoration: none !important; border: 0 !important;
}
.compare-row:not(.compare-head):not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.06); }
@media (max-width: 600px) {
  .compare-row { grid-template-columns: 1fr; }
  .compare-row > div:first-child { border-right: 0; border-bottom: 1px solid rgba(0,0,0,.06); }
}

/* ── For parents ───────────────────────────────────────────────── */
.parent-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.parent-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border-radius: 14px; padding: 18px;
  border: 1px solid rgba(0,0,0,.06);
}
.parent-icon { font-size: 1.7rem; flex-shrink: 0; line-height: 1; }
.parent-card strong { display: block; font-weight: 800; margin-bottom: 4px; }
.parent-card p { font-size: .86rem; line-height: 1.55; color: #5A5366; }

/* ── Final CTA ─────────────────────────────────────────────────── */
.landing-cta-final {
  padding: 70px 24px 90px;
  text-align: center;
  background: linear-gradient(155deg, #4F46E5 0%, #6D5BFF 60%, #8A7CFF 100%);
  color: #fff;
}
.landing-cta-final h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 800; margin-bottom: 10px;
}
.landing-cta-final p { font-size: 1rem; opacity: .92; margin-bottom: 24px; }
.landing-cta-final .landing-cta-primary { background: #fff; color: #4F46E5; box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.landing-cta-final .landing-cta-primary:hover { box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.landing-footnote { font-size: .78rem; opacity: .8; margin-top: 16px; }

/* ── Mobile spacing tweaks ─────────────────────────────────────── */
@media (max-width: 540px) {
  .landing-hero { padding: 48px 18px 60px; }
  .landing-section { padding: 48px 18px; }
  .pillar-card, .feature-card, .flow-step { padding: 18px 16px; }
}

/* The mobile-first app cap collapses the landing on desktop.
   When .app-fullbleed is set (via navigate('welcome')) we let it span. */
#app.app-fullbleed { max-width: 100vw !important; padding: 0 !important; }
#app.app-fullbleed #screen-container { padding-bottom: 0 !important; }

/* ── Subtle dashboard gear icon ─────────────────────────────────── */
.dashboard-gear {
  position: absolute; top: 16px; right: 18px; z-index: 5;
  background: rgba(255,255,255,.22); border: 0; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.1rem;
  transition: background .15s ease;
}
.dashboard-gear:hover { background: rgba(255,255,255,.35); }

/* ════════════════════════════════════════════════════════════
   B2 — math-b-2: Divide Whole Numbers & Decimals (G6, visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── Static viz 1: Anatomy of Division (Dividend ÷ Divisor = Quotient) ── */
.b2-anatomy-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 16px; margin: 12px 0;
}
.b2-anatomy-eq {
  display: flex; align-items: stretch; justify-content: center;
  gap: 6px; flex-wrap: wrap;
}
.b2-anatomy-part {
  flex: 1 1 90px; min-width: 90px; max-width: 130px;
  background: #fff; border-radius: 12px; padding: 10px 6px;
  text-align: center; border: 2px solid transparent;
}
.b2-anatomy-part.dividend  { border-color: #1E40AF; }
.b2-anatomy-part.divisor   { border-color: #BE185D; }
.b2-anatomy-part.quotient  { border-color: #16A36B; background: #ECFDF5; }
.b2-anatomy-label {
  font-size: .65rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 4px;
}
.b2-anatomy-part.dividend .b2-anatomy-label { color: #1E40AF; }
.b2-anatomy-part.divisor  .b2-anatomy-label { color: #BE185D; }
.b2-anatomy-part.quotient .b2-anatomy-label { color: #16A36B; }
.b2-anatomy-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.6rem; font-weight: 800; color: #2A2233;
  line-height: 1.1;
}
.b2-anatomy-part.quotient .b2-anatomy-val { color: #16A36B; }
.b2-anatomy-meta {
  font-size: .68rem; color: #6F6878; margin-top: 4px; line-height: 1.3;
}
.b2-anatomy-op {
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem; font-weight: 800; color: #4F46E5;
  padding: 0 2px;
}
.b2-anatomy-shelf {
  margin-top: 16px; background: #fff; border-radius: 12px; padding: 14px;
  border: 1.5px dashed #4F46E5;
}
.b2-anatomy-shelf-title {
  font-size: .9rem; color: #2A2233; margin-bottom: 10px; text-align: center;
}
.b2-anatomy-shelf-algo {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.b2-anatomy-shelf-row {
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.b2-anatomy-shelf-row.top {
  padding-bottom: 4px; border-bottom: 2px solid #2A2233;
}
.b2-anatomy-bracket {
  font-size: 1.2rem; font-weight: 800; color: #BE185D; padding-right: 4px;
}
.b2-anatomy-cell {
  width: 22px; text-align: center; font-size: 1.1rem; font-weight: 800;
  color: #2A2233;
}
.b2-anatomy-cell.q   { color: #16A36B; }
.b2-anatomy-cell.d   { color: #1E40AF; }
.b2-anatomy-cell.dot { color: #DC2626; font-weight: 900; }
.b2-anatomy-cell.dot.pad { color: #DC2626; opacity: .5; }
.b2-anatomy-cell.pad { color: #92400E; background: #FEF3C7; border-radius: 4px; }
.b2-anatomy-cell.ghost { color: transparent; }
.b2-anatomy-shelf-meta {
  font-size: .75rem; color: #DC2626; text-align: center; margin-top: 6px;
  font-weight: 700;
}

/* ── Stage-by-stage WE1: 180 ÷ 8 long division ── */
.b2-div-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.b2-div-stage {
  background: #fff; border-radius: 10px; padding: 12px;
}
.b2-div-stage-label {
  font-weight: 700; color: #4F46E5; margin-bottom: 8px; font-size: .92rem;
}
.b2-div-estimate {
  background: #EEF2FF; border-radius: 8px; padding: 8px 12px;
  font-size: .95rem; color: #2A2233;
}
.b2-div-estimate .hi {
  background: #FEF3C7; padding: 1px 6px; border-radius: 4px;
  color: #92400E; font-weight: 700;
}
.b2-div-algo {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 8px 0;
}
.b2-div-row {
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.b2-div-row.top {
  padding-bottom: 4px; border-bottom: 2px solid #2A2233;
}
.b2-div-bracket {
  font-size: 1.25rem; font-weight: 800; color: #BE185D; padding-right: 4px;
}
.b2-div-cell {
  width: 24px; text-align: center; font-size: 1.15rem; font-weight: 800;
  color: #2A2233;
}
.b2-div-cell.q     { color: #16A36B; }
.b2-div-cell.q.new { background: #D1FAE5; border-radius: 4px; box-shadow: 0 0 0 2px #16A36B; }
.b2-div-cell.d     { color: #1E40AF; }
.b2-div-cell.dot   { color: #DC2626; font-weight: 900; }
.b2-div-cell.pad   { color: #92400E; background: #FEF3C7; border-radius: 4px; }
.b2-div-cell.rem   { color: #BE185D; font-size: .85rem; padding-left: 4px; }
.b2-div-cell.ghost { color: transparent; }
.b2-div-meta {
  font-size: .85rem; color: #2A2233; line-height: 1.45;
}
.b2-div-yellow {
  background: #FEF3C7; color: #92400E; padding: 1px 6px; border-radius: 4px;
  font-weight: 700;
}
.b2-div-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 10px;
  padding: 12px; text-align: center; color: #065F46; font-size: .95rem;
}
.b2-div-answer strong { color: #16A36B; }

/* ── Static viz 2: Slide BOTH decimal points (with mistake warning) ── */
.b2-slide-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.b2-slide-rule-steps {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px;
}
.b2-slide-rule-step {
  background: #fff; border-radius: 8px; padding: 8px 12px;
  display: flex; align-items: center; gap: 10px;
}
.b2-slide-rule-num {
  background: #4F46E5; color: #fff; border-radius: 50%;
  width: 26px; height: 26px; display: flex; align-items: center;
  justify-content: center; font-weight: 800; flex-shrink: 0; font-size: .88rem;
}
.b2-slide-rule-txt { font-size: .9rem; color: #2A2233; }
.b2-slide-example {
  background: #fff; border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.b2-slide-line {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: flex; align-items: center; gap: 10px;
  font-size: 1.2rem; font-weight: 800;
}
.b2-slide-num {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  color: #2A2233;
}
.b2-slide-num.pink  { background: #FCE7F3; color: #BE185D; }
.b2-slide-num.blue  { background: #DBEAFE; color: #1E40AF; }
.b2-slide-dot { color: #DC2626; font-weight: 900; }
.b2-slide-op  { color: #4F46E5; }
.b2-slide-eq  { color: #16A36B; }
.b2-slide-arrows {
  display: flex; gap: 60px; font-size: .8rem; font-weight: 800;
  align-items: center; justify-content: center; margin: 2px 0;
}
.b2-slide-mult {
  padding: 3px 10px; border-radius: 99px; color: #fff;
}
.b2-slide-mult.pink { background: #BE185D; }
.b2-slide-mult.blue { background: #1E40AF; }
.b2-slide-note {
  font-size: .82rem; color: #6F6878; line-height: 1.45; text-align: center;
  margin-top: 8px; max-width: 380px;
}
.b2-slide-warn {
  background: #FEF2F2; border: 2px solid #DC2626; border-radius: 10px;
  padding: 12px; margin-top: 12px;
}
.b2-slide-warn-head {
  font-weight: 800; color: #DC2626; font-size: .9rem; margin-bottom: 8px;
}
.b2-slide-warn-bad {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem; font-weight: 800; margin-bottom: 6px;
}
.b2-slide-warn-tag {
  font-family: 'Inter', sans-serif; font-size: .75rem;
  color: #DC2626; font-weight: 700;
}
.b2-slide-warn-msg {
  font-size: .82rem; color: #2A2233; line-height: 1.45;
}

/* ── Stage-by-stage WE2: 4.20 ÷ 1.40 = 3 ── */
.b2-dec-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.b2-dec-stage {
  background: #fff; border-radius: 10px; padding: 12px;
}
.b2-dec-stage-label {
  font-weight: 700; color: #4F46E5; margin-bottom: 8px; font-size: .92rem;
}
.b2-dec-estimate {
  background: #EEF2FF; border-radius: 8px; padding: 8px 12px;
  font-size: .92rem; color: #2A2233;
}
.b2-dec-slide {
  display: flex; flex-direction: column; gap: 8px; margin: 8px 0;
}
.b2-dec-pair {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap;
}
.b2-dec-before, .b2-dec-after {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.1rem;
}
.b2-dec-num {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  background: #FEF3C7; color: #92400E;
}
.b2-dec-num.green {
  background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B;
}
.b2-dec-dot { color: #DC2626; font-weight: 900; }
.b2-dec-mult {
  background: #4F46E5; color: #fff; padding: 4px 10px; border-radius: 99px;
  font-size: .82rem; font-weight: 800;
}
.b2-dec-algo {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 8px 0;
}
.b2-dec-row {
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.b2-dec-row.top {
  padding-bottom: 4px; border-bottom: 2px solid #2A2233;
}
.b2-dec-bracket {
  font-size: 1.2rem; font-weight: 800; color: #BE185D; padding-right: 4px;
}
.b2-dec-cell {
  width: 24px; text-align: center; font-size: 1.15rem; font-weight: 800;
  color: #2A2233;
}
.b2-dec-cell.q     { color: #16A36B; }
.b2-dec-cell.d     { color: #1E40AF; }
.b2-dec-cell.ghost { color: transparent; }
.b2-dec-meta {
  font-size: .85rem; color: #2A2233; line-height: 1.45;
}
.b2-dec-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 10px;
  padding: 12px; text-align: center; color: #065F46; font-size: .95rem;
}
.b2-dec-answer strong { color: #16A36B; }

/* ── Mini-game speed rounds (Try It 1 + Try It 2) ── */
.b2-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.b2-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.b2-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.b2-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.b2-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.b2-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.b2-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.b2-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5;
}
.b2-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.b2-speed-opt.right .b2-speed-opt-val { color: #16A36B; }
.b2-speed-opt.wrong .b2-speed-opt-val { color: #DC2626; }
.b2-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.b2-speed-fb.right { color: #16A36B; font-weight: 800; }
.b2-speed-fb.wrong { color: #DC2626; }
.b2-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.b2-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   B3 — math-b-3: Multiply Fractions (G6, visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── Static viz 1: Tops × Tops, Bottoms × Bottoms rule ── */
.b3-rule-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 16px; margin: 12px 0;
}
.b3-rule-formula {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border-radius: 10px; padding: 14px;
  flex-wrap: wrap;
}
.b3-rule-frac {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; padding: 4px 10px; border-radius: 8px;
  min-width: 50px;
}
.b3-rule-frac.pink  { background: #FCE7F3; color: #BE185D; }
.b3-rule-frac.blue  { background: #DBEAFE; color: #1E40AF; }
.b3-rule-frac.green { background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B; }
.b3-rule-top, .b3-rule-bot { font-size: 1.05rem; line-height: 1.2; }
.b3-rule-bar {
  height: 2px; background: currentColor; width: 100%; margin: 2px 0;
}
.b3-rule-op {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.4rem; font-weight: 800; color: #4F46E5;
}
.b3-rule-steps {
  display: flex; flex-direction: column; gap: 6px; margin-top: 12px;
}
.b3-rule-step {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 8px; padding: 8px 12px;
  border-left: 4px solid transparent;
}
.b3-rule-step.pink  { border-left-color: #BE185D; }
.b3-rule-step.blue  { border-left-color: #1E40AF; }
.b3-rule-step.green { border-left-color: #16A36B; }
.b3-rule-step-icon {
  font-size: 1.1rem; font-weight: 800;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff;
}
.b3-rule-step.pink  .b3-rule-step-icon { background: #BE185D; }
.b3-rule-step.blue  .b3-rule-step-icon { background: #1E40AF; }
.b3-rule-step.green .b3-rule-step-icon { background: #16A36B; }
.b3-rule-step-txt { font-size: .92rem; color: #2A2233; }
.b3-rule-tip {
  margin-top: 12px; background: #EEF2FF; border-radius: 8px;
  padding: 10px 12px; font-size: .88rem; color: #2A2233;
  border-left: 4px solid #4F46E5;
}
.b3-rule-tip strong { color: #4F46E5; }
.b3-rule-insight {
  margin-top: 12px; background: #fff; border-radius: 10px; padding: 14px;
}
.b3-rule-insight-head {
  font-size: .9rem; color: #2A2233; margin-bottom: 10px;
  font-weight: 700;
}
.b3-rule-insight-bars {
  display: flex; flex-direction: column; gap: 6px;
}
.b3-rule-insight-row {
  display: grid; grid-template-columns: 70px 1fr 30px; gap: 8px;
  align-items: center;
}
.b3-rule-insight-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82rem; font-weight: 800; color: #4F46E5; text-align: right;
}
.b3-rule-insight-track {
  height: 18px; background: #F5EEDF; border-radius: 99px; overflow: hidden;
}
.b3-rule-insight-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #4F46E5, #6D5BFF);
}
.b3-rule-insight-fill.full    { width: 100%; }
.b3-rule-insight-fill.half    { width: 50%;  background: linear-gradient(90deg, #BE185D, #FB7185); }
.b3-rule-insight-fill.quarter { width: 25%;  background: linear-gradient(90deg, #92400E, #F59E0B); }
.b3-rule-insight-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .9rem; font-weight: 800; color: #16A36B; text-align: left;
}

/* ── Stage-by-stage WE1: 2⁄3 × 3⁄4 area model ── */
.b3-area-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.b3-area-stage {
  background: #fff; border-radius: 10px; padding: 12px;
}
.b3-area-stage-label {
  font-weight: 700; color: #4F46E5; margin-bottom: 8px; font-size: .92rem;
}
.b3-area-pink-text { color: #BE185D; font-weight: 800; }
.b3-area-blue-text { color: #1E40AF; font-weight: 800; }
.b3-area-board {
  display: flex; align-items: stretch; justify-content: center;
  margin: 8px auto;
}
.b3-area-yaxis {
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .72rem; font-weight: 700; color: #6F6878;
  padding-right: 6px;
}
.b3-area-yaxis.pink { color: #BE185D; font-size: .9rem; }
.b3-area-grid {
  display: grid; grid-template-columns: repeat(4, 56px);
  grid-template-rows: repeat(3, 40px); gap: 2px;
  background: #2A2233; padding: 2px; border-radius: 6px;
}
.b3-area-cell {
  background: #fff; border-radius: 2px;
}
.b3-area-cell.pink   { background: #FCE7F3; }
.b3-area-cell.blue   { background: #DBEAFE; }
.b3-area-cell.both   { background: #C4B5FD; }
.b3-area-xaxis {
  text-align: center; font-size: .72rem; color: #6F6878; font-weight: 700;
  margin-top: 2px;
}
.b3-area-xaxis.blue { color: #1E40AF; font-size: .9rem; }
.b3-area-meta {
  font-size: .85rem; color: #2A2233; line-height: 1.45; margin-top: 6px;
}
.b3-area-formula {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; padding: 4px;
}
.b3-area-frac {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  padding: 4px 8px; border-radius: 6px; font-size: 1rem;
}
.b3-area-frac.pink        { background: #FCE7F3; color: #BE185D; }
.b3-area-frac.blue        { background: #DBEAFE; color: #1E40AF; }
.b3-area-frac.purple-frac { background: #C4B5FD; color: #4C1D95; box-shadow: 0 0 0 1.5px #6D5BFF; }
.b3-area-frac.green       { background: #D1FAE5; color: #065F46; }
.b3-area-frac.green.big   { font-size: 1.4rem; padding: 8px 14px; box-shadow: 0 0 0 2px #16A36B; }
.b3-area-top, .b3-area-bot { font-size: 1rem; line-height: 1.2; }
.b3-area-bar { height: 2px; background: currentColor; width: 100%; margin: 2px 0; }
.b3-area-op {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; color: #4F46E5;
}
.b3-area-simplify {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; padding: 4px;
}
.b3-area-arrow {
  font-size: .85rem; color: #4F46E5; font-weight: 700;
}
.b3-area-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 10px;
  padding: 12px; text-align: center; color: #065F46; font-size: .95rem;
}
.b3-area-answer strong { color: #16A36B; }

/* ── Static viz 2: Fraction × Whole (with mistake warning) ── */
.b3-whole-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.b3-whole-rule {
  background: #fff; border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.b3-whole-rule-eq {
  display: flex; align-items: center; gap: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.b3-whole-num.plain {
  font-size: 2rem; font-weight: 800; color: #2A2233;
  padding: 4px 14px; background: #FEF3C7; border-radius: 8px;
}
.b3-whole-arrow {
  font-size: 1.5rem; font-weight: 800; color: #4F46E5;
}
.b3-whole-frac {
  display: inline-flex; flex-direction: column; align-items: center;
  font-weight: 800; padding: 6px 14px;
  background: #D1FAE5; color: #065F46; border-radius: 8px;
  box-shadow: 0 0 0 2px #16A36B;
}
.b3-whole-top, .b3-whole-bot { font-size: 1.3rem; line-height: 1.1; }
.b3-whole-bar { height: 2px; background: currentColor; width: 100%; margin: 2px 0; }
.b3-whole-rule-note {
  font-size: .82rem; color: #6F6878; font-style: italic;
}
.b3-whole-of {
  background: #fff; border-radius: 10px; padding: 14px; margin-top: 12px;
}
.b3-whole-of-head {
  text-align: center; font-size: .95rem; color: #2A2233; margin-bottom: 10px;
}
.b3-whole-of-bars {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  margin: 8px 0;
}
.b3-whole-of-bar, .b3-grp-bar {
  display: flex; flex-direction: column; gap: 1px;
  background: #2A2233; border-radius: 4px; padding: 1px;
  height: 80px;
}
.b3-of-third {
  flex: 1; background: #fff; border-radius: 1px;
}
.b3-of-third.filled { background: #16A36B; }
.b3-whole-of-meta {
  font-size: .85rem; color: #2A2233; line-height: 1.45; text-align: center;
  margin-top: 8px;
}
.b3-whole-warn {
  background: #FEF2F2; border: 2px solid #DC2626; border-radius: 10px;
  padding: 12px; margin-top: 12px;
}
.b3-whole-warn-head {
  font-weight: 800; color: #DC2626; font-size: .9rem; margin-bottom: 8px;
}
.b3-whole-warn-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.b3-whole-warn-bad  { color: #DC2626; font-weight: 800; }
.b3-whole-warn-good { color: #16A36B; font-weight: 800; }
.b3-whole-warn-tag {
  font-family: 'Inter', sans-serif; font-size: .75rem;
  color: #DC2626; font-weight: 700;
}
.b3-whole-warn-msg {
  font-size: .82rem; color: #2A2233; line-height: 1.45;
}

/* ── Stage-by-stage WE2: 6 × 2⁄3 grouping model ── */
.b3-grp-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.b3-grp-stage {
  background: #fff; border-radius: 10px; padding: 12px;
}
.b3-grp-stage-label {
  font-weight: 700; color: #4F46E5; margin-bottom: 8px; font-size: .92rem;
}
.b3-grp-eq {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; padding: 4px;
}
.b3-grp-frac {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  padding: 4px 10px; border-radius: 6px; font-size: 1.05rem;
  background: #F5EEDF; color: #2A2233;
}
.b3-grp-frac.plain {
  font-size: 1.4rem; padding: 6px 14px; background: #FEF3C7; color: #92400E;
}
.b3-grp-frac.pink  { background: #FCE7F3; color: #BE185D; }
.b3-grp-frac.green { background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 1.5px #16A36B; }
.b3-grp-top, .b3-grp-bot, .b3-grp-step { font-size: 1.05rem; line-height: 1.2; }
.b3-grp-fbar { height: 2px; background: currentColor; width: 100%; margin: 2px 0; }
.b3-grp-op {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; color: #4F46E5;
}
.b3-grp-bars {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  margin: 8px 0;
}
.b3-grp-meta {
  font-size: .85rem; color: #2A2233; line-height: 1.45; text-align: center;
  margin-top: 8px;
}
.b3-grp-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 10px;
  padding: 12px; text-align: center; color: #065F46; font-size: .95rem;
}
.b3-grp-answer strong { color: #16A36B; }

/* ── Mini-game speed rounds (Try It 1 + Try It 2) ── */
.b3-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.b3-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.b3-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.b3-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.b3-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.b3-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.b3-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.b3-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5;
}
.b3-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.b3-speed-opt.right .b3-speed-opt-val { color: #16A36B; }
.b3-speed-opt.wrong .b3-speed-opt-val { color: #DC2626; }
.b3-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.b3-speed-fb.right { color: #16A36B; font-weight: 800; }
.b3-speed-fb.wrong { color: #DC2626; }
.b3-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.b3-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   B4 — math-b-4: Understand Division with Fractions (G6, visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── Static viz 1: 8 ÷ 1⁄4 fit-inside bars + bigger-not-smaller warn ── */
.b4-fit-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.b4-fit-q {
  background: #fff; border-radius: 10px; padding: 12px; margin-bottom: 12px;
}
.b4-fit-qhead {
  font-size: .95rem; color: #2A2233; line-height: 1.5; text-align: center;
}
.b4-fit-acc  { background: #FCE7F3; color: #BE185D; padding: 2px 8px; border-radius: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; }
.b4-fit-acc2 { background: #DBEAFE; color: #1E40AF; padding: 2px 8px; border-radius: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; }
.b4-fit-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; text-align: center;
  color: #4F46E5; margin-top: 8px;
}
.b4-fit-bars {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
  background: #fff; border-radius: 10px; padding: 10px;
}
.b4-fit-bar {
  display: flex; flex-direction: column; gap: 1px;
  background: #2A2233; border-radius: 4px; padding: 1px;
  height: 100px;
}
.b4-fit-bar > span {
  flex: 1; background: linear-gradient(135deg, #FCE7F3, #FBCFE8);
  border-radius: 1px;
}
.b4-fit-count {
  font-size: .9rem; color: #2A2233; line-height: 1.45; text-align: center;
  margin-top: 8px;
}
.b4-fit-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 10px;
  padding: 14px; text-align: center; color: #065F46; margin-top: 12px;
}
.b4-fit-answer-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.4rem; font-weight: 800;
}
.b4-fit-answer-eq strong { color: #16A36B; }
.b4-fit-warn {
  background: #FEF3C7; border: 2px solid #F59E0B; border-radius: 10px;
  padding: 12px; margin-top: 12px;
}
.b4-fit-warn-head {
  font-weight: 800; color: #92400E; font-size: .92rem; margin-bottom: 6px;
}
.b4-fit-warn-msg {
  font-size: .85rem; color: #2A2233; line-height: 1.5;
}

/* ── Static viz 2: Reciprocal hero + examples + proof ── */
.b4-recip-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.b4-recip-hero {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; background: #fff; border-radius: 10px; padding: 16px;
  flex-wrap: wrap;
}
.b4-recip-side {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.b4-recip-side-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #6F6878;
}
.b4-recip-frac {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; padding: 10px 18px; border-radius: 10px;
  background: #FCE7F3; color: #BE185D;
}
.b4-recip-frac.green {
  background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B;
}
.b4-recip-top, .b4-recip-bot { font-size: 1.6rem; line-height: 1.1; }
.b4-recip-fbar { height: 2px; background: currentColor; width: 100%; margin: 2px 0; }
.b4-recip-flip {
  display: flex; flex-direction: column; align-items: center;
}
.b4-recip-flip-icon {
  font-size: 2rem; color: #4F46E5; font-weight: 800;
  animation: b4flip 2.5s ease-in-out infinite;
}
.b4-recip-flip-icon.small {
  font-size: 1.1rem; animation: none;
}
@keyframes b4flip {
  0%, 50%, 100% { transform: rotate(0deg); }
  25%, 75% { transform: rotate(180deg); }
}
.b4-recip-flip-label {
  font-size: .7rem; font-weight: 800; color: #4F46E5;
  letter-spacing: .12em;
}
.b4-recip-examples {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px; margin-top: 12px;
}
.b4-recip-ex {
  background: #fff; border-radius: 8px; padding: 10px 8px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1rem;
}
.b4-recip-from { color: #BE185D; }
.b4-recip-to   { color: #065F46; }
.b4-recip-from small { font-family: 'Inter', sans-serif; font-weight: 600; color: #6F6878; }
.b4-recip-proof {
  background: #fff; border-radius: 10px; padding: 14px; margin-top: 12px;
  border-left: 4px solid #16A36B;
}
.b4-recip-proof-head {
  font-weight: 800; color: #16A36B; font-size: .92rem; margin-bottom: 8px;
}
.b4-recip-proof-eq {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.1rem; flex-wrap: wrap;
}
.b4-recip-pchip {
  background: #F5EEDF; color: #2A2233; padding: 4px 10px; border-radius: 6px;
}
.b4-recip-pchip.green { background: #D1FAE5; color: #065F46; }
.b4-recip-pchip.hi    { background: #FEF3C7; color: #92400E; box-shadow: 0 0 0 2px #F59E0B; font-size: 1.4rem; padding: 6px 14px; }
.b4-recip-pop { color: #4F46E5; }
.b4-recip-proof-msg {
  font-size: .82rem; color: #6F6878; text-align: center; margin-top: 8px;
  font-style: italic;
}

/* ── Static viz 3: Keep-Change-Flip recipe ── */
.b4-kcf-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.b4-kcf-steps {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.b4-kcf-step {
  flex: 1 1 140px; background: #fff; border-radius: 10px; padding: 12px;
  display: flex; align-items: center; gap: 10px;
  border-top: 4px solid transparent;
}
.b4-kcf-step.keep   { border-top-color: #1E40AF; }
.b4-kcf-step.change { border-top-color: #F59E0B; }
.b4-kcf-step.flip   { border-top-color: #BE185D; }
.b4-kcf-step-tag {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.b4-kcf-step.keep   .b4-kcf-step-tag { background: #1E40AF; }
.b4-kcf-step.change .b4-kcf-step-tag { background: #F59E0B; }
.b4-kcf-step.flip   .b4-kcf-step-tag { background: #BE185D; }
.b4-kcf-step-name {
  font-weight: 800; font-size: .92rem; letter-spacing: .04em;
}
.b4-kcf-step.keep   .b4-kcf-step-name { color: #1E40AF; }
.b4-kcf-step.change .b4-kcf-step-name { color: #92400E; }
.b4-kcf-step.flip   .b4-kcf-step-name { color: #BE185D; }
.b4-kcf-step-desc { font-size: .82rem; color: #6F6878; margin-top: 2px; }
.b4-kcf-demo {
  background: #fff; border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.b4-kcf-row {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.b4-kcf-cell {
  display: inline-flex; flex-direction: column; align-items: center;
  font-weight: 800; font-size: 1.3rem;
  padding: 6px 14px; border-radius: 8px;
  min-width: 44px;
}
.b4-kcf-cell.yellow { background: #FEF3C7; color: #92400E; }
.b4-kcf-cell.pink   { background: #FCE7F3; color: #BE185D; }
.b4-kcf-cell.green  { background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B; }
.b4-kcf-cell.op.old { background: #FEE2E2; color: #DC2626; }
.b4-kcf-cell.op.new { background: #DBEAFE; color: #1E40AF; }
.b4-kcf-arrows {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  width: 100%; max-width: 280px;
}
.b4-kcf-arrow {
  text-align: center; font-size: .7rem; font-weight: 800;
  padding: 4px; border-radius: 4px;
}
.b4-kcf-arrow.keep   { color: #1E40AF; background: #DBEAFE; }
.b4-kcf-arrow.change { color: #92400E; background: #FEF3C7; }
.b4-kcf-arrow.flip   { color: #BE185D; background: #FCE7F3; }
.b4-kcf-result {
  margin-top: 8px; font-size: 1rem; color: #2A2233;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.b4-kcf-result strong { color: #16A36B; font-size: 1.3rem; }

/* ── Stage-by-stage WE: 4 ÷ 1⁄2 = 8 with cups ── */
.b4-we-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.b4-we-stage {
  background: #fff; border-radius: 10px; padding: 12px;
}
.b4-we-stage-label {
  font-weight: 700; color: #4F46E5; margin-bottom: 8px; font-size: .92rem;
}
.b4-we-cups {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 8px 0;
}
.b4-we-cup {
  display: flex; flex-direction: column; gap: 2px;
  background: #2A2233; border-radius: 6px; padding: 2px;
  height: 110px;
}
.b4-we-cup > div {
  flex: 1; background: linear-gradient(180deg, #FEF3C7, #FCD34D);
  border-radius: 3px;
}
.b4-we-meta {
  font-size: .85rem; color: #2A2233; line-height: 1.45; text-align: center;
  margin-top: 8px;
}
.b4-we-kcf {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 8px 0;
}
.b4-we-kcf-row {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.b4-we-cell {
  display: inline-flex; flex-direction: column; align-items: center;
  font-weight: 800; font-size: 1.2rem;
  padding: 6px 12px; border-radius: 8px;
  min-width: 40px;
}
.b4-we-cell.yellow { background: #FEF3C7; color: #92400E; }
.b4-we-cell.pink   { background: #FCE7F3; color: #BE185D; }
.b4-we-cell.green  { background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B; }
.b4-we-cell.op.old { background: #FEE2E2; color: #DC2626; }
.b4-we-cell.op.new { background: #DBEAFE; color: #1E40AF; }
.b4-we-kcf-tags {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  width: 100%; max-width: 260px;
}
.b4-we-kcf-tag {
  text-align: center; font-size: .68rem; font-weight: 800;
  padding: 3px; border-radius: 4px;
}
.b4-we-kcf-tag.keep   { color: #1E40AF; background: #DBEAFE; }
.b4-we-kcf-tag.change { color: #92400E; background: #FEF3C7; }
.b4-we-kcf-tag.flip   { color: #BE185D; background: #FCE7F3; }
.b4-we-mul {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800;
}
.b4-we-mchip {
  background: #DBEAFE; color: #1E40AF; padding: 6px 14px; border-radius: 8px;
  font-size: 1.2rem;
}
.b4-we-marrow { color: #4F46E5; font-size: 1.3rem; }
.b4-we-mresult {
  background: #D1FAE5; color: #065F46;
  padding: 6px 16px; border-radius: 8px;
  font-size: 1.5rem; box-shadow: 0 0 0 2px #16A36B;
}
.b4-we-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 10px;
  padding: 12px; text-align: center; color: #065F46; font-size: .95rem;
}
.b4-we-answer strong { color: #16A36B; }

/* ── Mini-game speed rounds (Try It 1 + Try It 2) ── */
.b4-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.b4-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.b4-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.b4-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.b4-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.b4-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.b4-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.b4-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5;
}
.b4-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.b4-speed-opt.right .b4-speed-opt-val { color: #16A36B; }
.b4-speed-opt.wrong .b4-speed-opt-val { color: #DC2626; }
.b4-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.b4-speed-fb.right { color: #16A36B; font-weight: 800; }
.b4-speed-fb.wrong { color: #DC2626; }
.b4-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.b4-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   B5 — math-b-5: Divide Fractions by Fractions (G6, visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── Static viz 1: Only the SECOND fraction flips (with right/wrong) ── */
.b5-rule-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.b5-rule-formula {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; background: #fff; border-radius: 10px; padding: 14px;
  flex-wrap: wrap;
}
.b5-rule-frac {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  padding: 8px 14px; border-radius: 10px; position: relative;
}
.b5-rule-frac.dividend { background: #FCE7F3; color: #BE185D; }
.b5-rule-frac.divisor  { background: #DBEAFE; color: #1E40AF; }
.b5-rule-frac.flipped  { background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B; }
.b5-rule-top, .b5-rule-bot { font-size: 1.3rem; line-height: 1.1; }
.b5-rule-fbar { height: 2px; background: currentColor; width: 100%; margin: 2px 0; }
.b5-rule-tag {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-family: 'Inter', sans-serif; font-size: .65rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  background: #2A2233; color: #fff; padding: 2px 6px; border-radius: 4px;
}
.b5-rule-frac.divisor .b5-rule-tag.flips {
  background: #16A36B;
}
.b5-rule-op {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem; font-weight: 800; color: #4F46E5;
}
.b5-rule-op.old { color: #DC2626; }
.b5-rule-op.new { color: #16A36B; }
.b5-rule-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.b5-rule-compare-card {
  background: #fff; border-radius: 10px; padding: 12px;
  border-top: 4px solid transparent;
}
.b5-rule-compare-card.right { border-top-color: #16A36B; }
.b5-rule-compare-card.wrong { border-top-color: #DC2626; }
.b5-rule-compare-head {
  font-weight: 800; font-size: .88rem; margin-bottom: 8px;
}
.b5-rule-compare-card.right .b5-rule-compare-head { color: #16A36B; }
.b5-rule-compare-card.wrong .b5-rule-compare-head { color: #DC2626; }
.b5-rule-compare-eq {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .95rem; color: #2A2233;
}
.b5-rule-compare-eq .arrow { color: #6F6878; }
.b5-rule-compare-eq .hi    { background: #D1FAE5; color: #065F46; padding: 2px 6px; border-radius: 4px; }
.b5-rule-compare-eq .hi-bad { background: #FEE2E2; color: #DC2626; padding: 2px 6px; border-radius: 4px; }
.b5-rule-compare-eq .good  { color: #16A36B; }
.b5-rule-compare-eq .bad   { color: #DC2626; }
.b5-rule-compare-msg {
  font-size: .8rem; color: #2A2233; line-height: 1.45; margin-top: 6px;
}
@media (max-width: 520px) {
  .b5-rule-compare { grid-template-columns: 1fr; }
}

/* ── Stage-by-stage WE shared styles (used by both WE1 and WE2) ── */
.b5-we-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.b5-we-stage {
  background: #fff; border-radius: 10px; padding: 12px;
}
.b5-we-stage-label {
  font-weight: 700; color: #4F46E5; margin-bottom: 8px; font-size: .92rem;
}
.b5-we-fit {
  display: flex; flex-direction: column; gap: 8px; margin: 8px 0;
}
.b5-we-fit-row {
  display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px;
}
.b5-we-fit-label {
  font-size: .82rem; font-weight: 700; color: #2A2233;
}
.b5-we-fit-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: #2A2233; border-radius: 4px; padding: 2px; height: 38px;
}
.b5-we-fit-bar > span {
  background: #fff; border-radius: 2px;
}
.b5-we-fit-bar > span.filled {
  background: linear-gradient(135deg, #FCE7F3, #FBCFE8);
}
.b5-we-fit-bar.measure {
  display: grid; grid-template-columns: 2fr 1fr; gap: 2px;
  background: #1E40AF; padding: 2px;
}
.b5-we-fit-bar.measure .half  { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); border-radius: 2px; }
.b5-we-fit-bar.measure .extra { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); border-radius: 2px; opacity: .5; border: 1px dashed #1E40AF; }
.b5-we-meta {
  font-size: .85rem; color: #2A2233; line-height: 1.45; text-align: center;
  margin-top: 8px;
}
.b5-we-kcf {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 8px 0;
}
.b5-we-kcf-row {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.b5-we-cell {
  display: inline-flex; flex-direction: column; align-items: center;
  font-weight: 800; font-size: 1.2rem;
  padding: 6px 12px; border-radius: 8px;
  min-width: 44px;
}
.b5-we-cell.pink  { background: #FCE7F3; color: #BE185D; }
.b5-we-cell.blue  { background: #DBEAFE; color: #1E40AF; }
.b5-we-cell.green { background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B; }
.b5-we-cell.op.old { background: #FEE2E2; color: #DC2626; }
.b5-we-cell.op.new { background: #DBEAFE; color: #1E40AF; }
.b5-we-kcf-tags {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  width: 100%; max-width: 280px;
}
.b5-we-kcf-tag {
  text-align: center; font-size: .68rem; font-weight: 800;
  padding: 3px; border-radius: 4px;
}
.b5-we-kcf-tag.keep   { color: #1E40AF; background: #DBEAFE; }
.b5-we-kcf-tag.change { color: #92400E; background: #FEF3C7; }
.b5-we-kcf-tag.flip   { color: #BE185D; background: #FCE7F3; }
.b5-we-mul, .b5-we-simplify {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  flex-wrap: wrap;
}
.b5-we-mchip {
  background: #DBEAFE; color: #1E40AF; padding: 6px 12px; border-radius: 8px;
  font-size: 1.05rem;
}
.b5-we-mchip.yellow { background: #FEF3C7; color: #92400E; }
.b5-we-marrow { color: #4F46E5; font-size: 1.3rem; }
.b5-we-arrow { font-size: .85rem; color: #4F46E5; font-weight: 700; }
.b5-we-mresult {
  background: #D1FAE5; color: #065F46;
  padding: 6px 16px; border-radius: 8px;
  font-size: 1.3rem; box-shadow: 0 0 0 2px #16A36B;
}
.b5-we-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 10px;
  padding: 12px; text-align: center; color: #065F46; font-size: .95rem;
}
.b5-we-answer strong { color: #16A36B; }

/* ── Static viz 2: Size-of-answer sanity check ── */
.b5-size-wrap {
  display: flex; flex-direction: column; gap: 8px; margin: 12px 0;
}
.b5-size-row {
  background: #fff; border-radius: 10px; padding: 12px;
  display: grid; grid-template-columns: 160px 1fr 170px; gap: 10px;
  align-items: center; border-left: 4px solid transparent;
}
.b5-size-row.bigger  { border-left-color: #16A36B; background: #ECFDF5; }
.b5-size-row.equal   { border-left-color: #4F46E5; background: #EEF2FF; }
.b5-size-row.smaller { border-left-color: #BE185D; background: #FCE7F3; }
.b5-size-rel {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .82rem; color: #2A2233;
}
.b5-size-eq {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.1rem;
}
.b5-size-eq .op    { color: #DC2626; }
.b5-size-eq .arrow { color: #6F6878; }
.b5-size-eq .ans   { background: #FEF3C7; color: #92400E; padding: 4px 10px; border-radius: 6px; }
.b5-size-tag {
  font-size: .82rem; color: #2A2233; line-height: 1.4;
}
.b5-size-tag strong { font-weight: 800; }
.b5-size-row.bigger  .b5-size-tag strong { color: #16A36B; }
.b5-size-row.equal   .b5-size-tag strong { color: #4F46E5; }
.b5-size-row.smaller .b5-size-tag strong { color: #BE185D; }
.b5-size-tip {
  margin-top: 12px; background: #FEF3C7; border-radius: 8px;
  padding: 10px 12px; font-size: .85rem; color: #2A2233; line-height: 1.5;
  border-left: 4px solid #F59E0B;
}
@media (max-width: 520px) {
  .b5-size-row { grid-template-columns: 1fr; }
  .b5-size-eq  { justify-content: flex-start; }
}

/* ── Mini-game speed rounds ── */
.b5-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.b5-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.b5-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.b5-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.b5-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.b5-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.b5-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.b5-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5;
}
.b5-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.b5-speed-opt.right .b5-speed-opt-val { color: #16A36B; }
.b5-speed-opt.wrong .b5-speed-opt-val { color: #DC2626; }
.b5-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.b5-speed-fb.right { color: #16A36B; font-weight: 800; }
.b5-speed-fb.wrong { color: #DC2626; }
.b5-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.b5-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   B6 — math-b-6: Divide Mixed Numbers (G6, visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── Static viz 1: Mixed Number Anatomy (2 1⁄3 = 7 thirds) ── */
.b6-anat-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.b6-anat-mixed {
  background: #fff; border-radius: 10px; padding: 12px; text-align: center;
  margin-bottom: 12px;
}
.b6-anat-mixed-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #6F6878; margin-bottom: 6px;
}
.b6-anat-mixed-val {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.b6-anat-whole {
  font-size: 2.4rem; font-weight: 800; color: #92400E;
  background: #FEF3C7; padding: 4px 16px; border-radius: 10px;
}
.b6-anat-frac {
  display: inline-flex; flex-direction: column; align-items: center;
  font-weight: 800; padding: 8px 14px; border-radius: 10px;
  background: #FCE7F3; color: #BE185D;
}
.b6-anat-top, .b6-anat-bot { font-size: 1.4rem; line-height: 1.1; }
.b6-anat-fbar { height: 2px; background: currentColor; width: 100%; margin: 2px 0; }
.b6-anat-mixed-msg {
  margin-top: 8px; font-size: .9rem; color: #2A2233;
}
.b6-anat-bars {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin: 8px 0;
}
.b6-anat-bar {
  display: flex; flex-direction: column;
  background: #2A2233; border-radius: 6px; padding: 2px;
  position: relative; padding-bottom: 24px;
}
.b6-anat-bar > span {
  display: block; background: #fff; border-radius: 2px; height: 26px;
}
.b6-anat-bar > span:not(:last-child) { margin-bottom: 2px; }
.b6-anat-bar > span.filled {
  background: linear-gradient(135deg, #FCE7F3, #FBCFE8);
}
.b6-anat-bar.partial > span.filled {
  background: linear-gradient(135deg, #FEF3C7, #FCD34D);
}
.b6-anat-bar-label {
  position: absolute; bottom: 4px; left: 0; right: 0;
  font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 700;
  text-align: center; color: #fff;
}
.b6-anat-count {
  text-align: center; margin: 10px 0;
}
.b6-anat-count-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  background: #EEF2FF; color: #4F46E5; padding: 8px 14px; border-radius: 8px;
  font-size: 1rem;
}
.b6-anat-count-num strong { color: #16A36B; font-size: 1.2rem; }
.b6-anat-equals {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; background: #fff; border-radius: 10px; padding: 12px;
}
.b6-anat-mixed-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  background: #FCE7F3; color: #BE185D; padding: 6px 14px; border-radius: 8px;
  font-size: 1.2rem;
}
.b6-anat-eq { font-size: 1.5rem; font-weight: 800; color: #4F46E5; }
.b6-anat-improper {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  background: #D1FAE5; color: #065F46; padding: 8px 14px; border-radius: 8px;
  box-shadow: 0 0 0 2px #16A36B;
}
.b6-anat-improper-label {
  font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700;
  color: #16A36B; letter-spacing: .05em;
}

/* ── Static viz 2: Conversion formula + walkthrough + examples ── */
.b6-formula-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.b6-formula-rule {
  background: #fff; border-radius: 10px; padding: 16px; text-align: center;
}
.b6-formula-frac {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  padding: 10px 18px;
}
.b6-formula-top, .b6-formula-bot { font-size: 1rem; padding: 0 8px; }
.b6-formula-top { color: #16A36B; }
.b6-formula-bot { color: #1E40AF; font-style: italic; }
.b6-formula-fbar { height: 2px; background: #2A2233; width: 100%; margin: 4px 0; }
.b6-formula-demo {
  background: #fff; border-radius: 10px; padding: 14px; margin-top: 12px;
}
.b6-formula-demo-head {
  font-weight: 700; color: #4F46E5; font-size: .92rem; margin-bottom: 10px;
  text-align: center;
}
.b6-formula-demo-steps {
  display: flex; flex-direction: column; gap: 8px;
}
.b6-formula-step {
  display: grid; grid-template-columns: 30px 1fr 130px; gap: 10px;
  align-items: center;
}
.b6-formula-step-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1.2rem; color: #4F46E5; text-align: center;
}
.b6-formula-step-eq {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
}
.b6-formula-chip {
  background: #F5EEDF; color: #2A2233; padding: 4px 10px; border-radius: 6px;
  font-size: 1.05rem;
}
.b6-formula-chip.yellow { background: #FEF3C7; color: #92400E; }
.b6-formula-chip.blue   { background: #DBEAFE; color: #1E40AF; }
.b6-formula-chip.purple { background: #C4B5FD; color: #4C1D95; }
.b6-formula-chip.pink   { background: #FCE7F3; color: #BE185D; }
.b6-formula-chip.green       { background: #D1FAE5; color: #065F46; }
.b6-formula-chip.green.big   { font-size: 1.4rem; padding: 6px 16px; box-shadow: 0 0 0 2px #16A36B; }
.b6-formula-op { font-size: 1.2rem; color: #4F46E5; }
.b6-formula-result {
  display: inline-flex; flex-direction: column; align-items: center;
  background: #D1FAE5; color: #065F46; padding: 6px 12px; border-radius: 8px;
  box-shadow: 0 0 0 2px #16A36B;
}
.b6-formula-rtop, .b6-formula-rbot { font-size: 1.2rem; font-weight: 800; }
.b6-formula-rfbar { height: 2px; background: currentColor; width: 100%; margin: 2px 0; }
.b6-formula-step-msg {
  font-size: .78rem; color: #6F6878; font-style: italic;
}
.b6-formula-examples {
  display: flex; flex-direction: column; gap: 6px; margin-top: 12px;
}
.b6-formula-ex {
  background: #fff; border-radius: 8px; padding: 8px 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: .92rem;
}
.b6-formula-ex .hi  { background: #EEF2FF; color: #4F46E5; padding: 2px 8px; border-radius: 4px; }
.b6-formula-ex .ans { background: #D1FAE5; color: #065F46; padding: 2px 8px; border-radius: 4px; }

/* ── Static viz 3: Two-step recipe + mistake warning ── */
.b6-recipe-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.b6-recipe-stages {
  display: flex; align-items: stretch; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.b6-recipe-stage {
  flex: 1 1 240px; background: #fff; border-radius: 10px; padding: 14px;
  display: flex; align-items: center; gap: 12px;
  border-top: 4px solid transparent;
}
.b6-recipe-stage.convert { border-top-color: #BE185D; }
.b6-recipe-stage.kcf     { border-top-color: #16A36B; }
.b6-recipe-num {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.2rem;
}
.b6-recipe-stage.convert .b6-recipe-num { background: #BE185D; }
.b6-recipe-stage.kcf     .b6-recipe-num { background: #16A36B; }
.b6-recipe-name {
  font-weight: 800; font-size: .92rem; letter-spacing: .04em;
}
.b6-recipe-stage.convert .b6-recipe-name { color: #BE185D; }
.b6-recipe-stage.kcf     .b6-recipe-name { color: #16A36B; }
.b6-recipe-desc { font-size: .82rem; color: #6F6878; margin-top: 2px; }
.b6-recipe-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #4F46E5; font-weight: 800;
}
.b6-recipe-warn {
  background: #FEF2F2; border: 2px solid #DC2626; border-radius: 10px;
  padding: 12px; margin-top: 12px;
}
.b6-recipe-warn-head {
  font-weight: 800; color: #DC2626; font-size: .9rem; margin-bottom: 8px;
}
.b6-recipe-warn-bad {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  color: #DC2626; font-size: .9rem; margin-bottom: 6px;
}
.b6-recipe-warn-msg {
  font-size: .82rem; color: #2A2233; line-height: 1.45; margin-bottom: 6px;
}
.b6-recipe-warn-good {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  color: #16A36B; font-size: .9rem;
}
.b6-recipe-warn-good strong { color: #16A36B; font-size: 1.1rem; }
@media (max-width: 520px) {
  .b6-recipe-arrow { transform: rotate(90deg); }
}

/* ── Stage-by-stage WE: 2 1⁄2 ÷ 1 1⁄4 = 2 ── */
.b6-we-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.b6-we-stage {
  background: #fff; border-radius: 10px; padding: 12px;
}
.b6-we-stage-label {
  font-weight: 700; color: #4F46E5; margin-bottom: 8px; font-size: .92rem;
}
.b6-we-convert {
  display: flex; flex-direction: column; gap: 8px; margin: 8px 0;
}
.b6-we-convert-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  justify-content: center;
}
.b6-we-mixed {
  background: #FEF3C7; color: #92400E; padding: 6px 12px; border-radius: 8px;
  font-size: 1.1rem;
}
.b6-we-arrow { color: #4F46E5; font-size: 1.2rem; }
.b6-we-calc {
  background: #EEF2FF; color: #4F46E5; padding: 6px 12px; border-radius: 8px;
  font-size: .95rem;
}
.b6-we-improper {
  padding: 6px 12px; border-radius: 8px; font-size: 1.2rem;
}
.b6-we-improper.pink { background: #FCE7F3; color: #BE185D; }
.b6-we-improper.blue { background: #DBEAFE; color: #1E40AF; }
.b6-we-meta {
  font-size: .85rem; color: #2A2233; line-height: 1.45; text-align: center;
  margin-top: 8px;
}
.b6-we-kcf {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 8px 0;
}
.b6-we-kcf-row {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.b6-we-cell {
  display: inline-flex; flex-direction: column; align-items: center;
  font-weight: 800; font-size: 1.2rem;
  padding: 6px 12px; border-radius: 8px;
  min-width: 44px;
}
.b6-we-cell.pink  { background: #FCE7F3; color: #BE185D; }
.b6-we-cell.blue  { background: #DBEAFE; color: #1E40AF; }
.b6-we-cell.green { background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B; }
.b6-we-cell.op.old { background: #FEE2E2; color: #DC2626; }
.b6-we-cell.op.new { background: #DBEAFE; color: #1E40AF; }
.b6-we-kcf-tags {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  width: 100%; max-width: 280px;
}
.b6-we-kcf-tag {
  text-align: center; font-size: .68rem; font-weight: 800;
  padding: 3px; border-radius: 4px;
}
.b6-we-kcf-tag.keep   { color: #1E40AF; background: #DBEAFE; }
.b6-we-kcf-tag.change { color: #92400E; background: #FEF3C7; }
.b6-we-kcf-tag.flip   { color: #BE185D; background: #FCE7F3; }
.b6-we-mul {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  flex-wrap: wrap;
}
.b6-we-mchip {
  background: #DBEAFE; color: #1E40AF; padding: 6px 12px; border-radius: 8px;
  font-size: 1rem;
}
.b6-we-mchip.yellow { background: #FEF3C7; color: #92400E; }
.b6-we-marrow { color: #4F46E5; font-size: 1.3rem; }
.b6-we-mresult {
  background: #D1FAE5; color: #065F46;
  padding: 6px 16px; border-radius: 8px;
  font-size: 1.5rem; box-shadow: 0 0 0 2px #16A36B;
}
.b6-we-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 10px;
  padding: 12px; text-align: center; color: #065F46; font-size: .95rem;
}
.b6-we-answer strong { color: #16A36B; }

/* ── Mini-game speed rounds ── */
.b6-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.b6-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 8px 12px; border-radius: 8px;
}
.b6-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.b6-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.b6-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.b6-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.b6-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.b6-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; color: #4F46E5;
}
.b6-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.b6-speed-opt.right .b6-speed-opt-val { color: #16A36B; }
.b6-speed-opt.wrong .b6-speed-opt-val { color: #DC2626; }
.b6-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.b6-speed-fb.right { color: #16A36B; font-weight: 800; }
.b6-speed-fb.wrong { color: #DC2626; }
.b6-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.b6-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   B7 — math-b-7: Solve Problems with Rational Numbers (G6, visual redesign)
   ════════════════════════════════════════════════════════════ */

/* ── Static viz 1: Read → Plan → Solve → Check 4-step flow ── */
.b7-plan-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.b7-plan-steps {
  display: flex; align-items: stretch; justify-content: center;
  gap: 4px; flex-wrap: wrap;
}
.b7-plan-step {
  flex: 1 1 130px; background: #fff; border-radius: 10px; padding: 12px 10px;
  text-align: center; border-top: 4px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.b7-plan-step.read  { border-top-color: #BE185D; }
.b7-plan-step.plan  { border-top-color: #F59E0B; }
.b7-plan-step.solve { border-top-color: #4F46E5; }
.b7-plan-step.check { border-top-color: #16A36B; }
.b7-plan-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .92rem;
}
.b7-plan-step.read  .b7-plan-num { background: #BE185D; }
.b7-plan-step.plan  .b7-plan-num { background: #F59E0B; }
.b7-plan-step.solve .b7-plan-num { background: #4F46E5; }
.b7-plan-step.check .b7-plan-num { background: #16A36B; }
.b7-plan-icon { font-size: 1.6rem; line-height: 1; }
.b7-plan-name {
  font-weight: 800; font-size: .95rem; letter-spacing: .06em;
}
.b7-plan-step.read  .b7-plan-name { color: #BE185D; }
.b7-plan-step.plan  .b7-plan-name { color: #92400E; }
.b7-plan-step.solve .b7-plan-name { color: #4F46E5; }
.b7-plan-step.check .b7-plan-name { color: #16A36B; }
.b7-plan-desc {
  font-size: .8rem; color: #2A2233; line-height: 1.35;
}
.b7-plan-tip {
  font-size: .68rem; color: #6F6878; font-style: italic;
  margin-top: 4px; line-height: 1.3;
}
.b7-plan-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #4F46E5; font-weight: 800;
}
@media (max-width: 720px) {
  .b7-plan-arrow { transform: rotate(90deg); padding: 4px 0; }
}

/* ── Static viz 2: Keyword → Operation cheat sheet ── */
.b7-keys-wrap {
  margin: 12px 0;
}
.b7-keys-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.b7-keys-card {
  background: #fff; border-radius: 10px; padding: 12px;
  border-left: 4px solid transparent;
}
.b7-keys-card.add { border-left-color: #16A36B; }
.b7-keys-card.sub { border-left-color: #DC2626; }
.b7-keys-card.mul { border-left-color: #4F46E5; }
.b7-keys-card.div { border-left-color: #BE185D; }
.b7-keys-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.b7-keys-op {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.4rem; flex-shrink: 0;
}
.b7-keys-card.add .b7-keys-op { background: #16A36B; }
.b7-keys-card.sub .b7-keys-op { background: #DC2626; }
.b7-keys-card.mul .b7-keys-op { background: #4F46E5; }
.b7-keys-card.div .b7-keys-op { background: #BE185D; }
.b7-keys-name {
  font-weight: 800; font-size: 1rem; letter-spacing: .05em;
}
.b7-keys-card.add .b7-keys-name { color: #16A36B; }
.b7-keys-card.sub .b7-keys-name { color: #DC2626; }
.b7-keys-card.mul .b7-keys-name { color: #4F46E5; }
.b7-keys-card.div .b7-keys-name { color: #BE185D; }
.b7-keys-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.b7-keys-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .78rem; font-weight: 700;
  padding: 3px 8px; border-radius: 99px;
  background: #F5EEDF; color: #2A2233;
}
.b7-keys-card.add .b7-keys-chip { background: #D1FAE5; color: #065F46; }
.b7-keys-card.sub .b7-keys-chip { background: #FEE2E2; color: #991B1B; }
.b7-keys-card.mul .b7-keys-chip { background: #DBEAFE; color: #1E40AF; }
.b7-keys-card.div .b7-keys-chip { background: #FCE7F3; color: #831843; }
.b7-keys-warn {
  margin-top: 12px; background: #FEF3C7; border-radius: 8px;
  padding: 10px 12px; font-size: .85rem; color: #2A2233; line-height: 1.5;
  border-left: 4px solid #F59E0B;
}
.b7-keys-warn strong { color: #92400E; }
@media (max-width: 520px) {
  .b7-keys-grid { grid-template-columns: 1fr; }
}

/* ── Static viz 3: Multi-step anatomy with mistake fold-in ── */
.b7-multi-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.b7-multi-problem {
  background: #fff; border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.b7-multi-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #6F6878;
}
.b7-multi-text {
  font-size: .92rem; line-height: 1.55; color: #2A2233;
}
.b7-multi-hi  { background: #DBEAFE; color: #1E40AF; padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.b7-multi-hi2 { background: #FEE2E2; color: #991B1B; padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.b7-multi-flow {
  display: flex; align-items: stretch; justify-content: center;
  gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.b7-multi-step {
  flex: 1 1 200px; background: #fff; border-radius: 10px; padding: 12px;
  display: grid;
  grid-template-columns: 30px auto 1fr;
  grid-template-rows: auto auto;
  gap: 6px 10px; align-items: center;
}
.b7-multi-num {
  grid-row: 1 / 3; grid-column: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: #4F46E5;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1rem;
}
.b7-multi-clue { grid-row: 1; grid-column: 2 / 4; }
.b7-multi-op   { grid-row: 2; grid-column: 2; }
.b7-multi-calc { grid-row: 2; grid-column: 3; justify-self: start; }
.b7-multi-clue {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82rem; font-weight: 700; color: #4F46E5;
}
.b7-multi-op {
  display: inline-flex; align-items: center; justify-content: center;
  background: #FEF3C7; color: #92400E;
  width: 28px; height: 28px; border-radius: 50%;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1rem;
}
.b7-multi-calc {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .92rem; color: #16A36B;
  background: #ECFDF5; padding: 4px 10px; border-radius: 6px;
}
.b7-multi-then {
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: #4F46E5;
  background: #EEF2FF; padding: 4px 10px; border-radius: 99px;
  letter-spacing: .1em;
}
.b7-multi-warn {
  background: #FEF2F2; border: 2px solid #DC2626; border-radius: 10px;
  padding: 12px; margin-top: 12px;
}
.b7-multi-warn-head {
  font-weight: 800; color: #DC2626; font-size: .9rem; margin-bottom: 8px;
}
.b7-multi-warn-bad {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  color: #DC2626; font-size: .9rem; margin-bottom: 6px;
}
.b7-multi-warn-msg {
  font-size: .82rem; color: #2A2233; line-height: 1.45; margin-bottom: 6px;
}
.b7-multi-warn-good {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  color: #16A36B; font-size: .9rem;
}
.b7-multi-warn-good strong { color: #16A36B; font-size: 1.05rem; }

/* ── Stage-by-stage WE: 16.75 × 6 − 8.81 = 91.69 ── */
.b7-we-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.b7-we-stage {
  background: #fff; border-radius: 10px; padding: 12px;
}
.b7-we-stage-label {
  font-weight: 700; color: #4F46E5; margin-bottom: 8px; font-size: .92rem;
}
.b7-we-extract {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.b7-we-fact {
  display: flex; align-items: center; gap: 8px;
  background: #FBF4EA; padding: 6px 10px; border-radius: 8px;
}
.b7-we-fact-tag {
  font-family: 'Inter', sans-serif; font-size: .65rem; font-weight: 800;
  letter-spacing: .05em; padding: 3px 8px; border-radius: 4px;
  color: #fff;
}
.b7-we-fact-tag.rate  { background: #4F46E5; }
.b7-we-fact-tag.time  { background: #16A36B; }
.b7-we-fact-tag.spent { background: #DC2626; }
.b7-we-fact-tag.goal  { background: #F59E0B; }
.b7-we-fact-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .9rem; color: #2A2233;
}
@media (max-width: 520px) {
  .b7-we-extract { grid-template-columns: 1fr; }
}
.b7-we-plan {
  display: flex; flex-direction: column; gap: 6px;
}
.b7-we-plan-step {
  display: grid; grid-template-columns: 30px 1fr 30px 130px; gap: 8px;
  align-items: center;
  background: #FBF4EA; padding: 8px 10px; border-radius: 8px;
}
.b7-we-plan-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #4F46E5; color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .82rem;
}
.b7-we-plan-clue {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82rem; font-weight: 700; color: #2A2233;
}
.b7-we-plan-arrow { color: #4F46E5; font-size: 1.2rem; text-align: center; }
.b7-we-plan-op {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .85rem; text-align: center;
  padding: 4px 8px; border-radius: 6px;
}
.b7-we-plan-op.mul { background: #DBEAFE; color: #1E40AF; }
.b7-we-plan-op.sub { background: #FEE2E2; color: #991B1B; }
@media (max-width: 520px) {
  .b7-we-plan-step { grid-template-columns: 30px 1fr; }
  .b7-we-plan-arrow, .b7-we-plan-op { display: none; }
}
.b7-we-solve {
  display: flex; flex-direction: column; gap: 8px;
}
.b7-we-solve-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #FBF4EA; padding: 8px 10px; border-radius: 8px;
}
.b7-we-solve-tag {
  font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 700;
  color: #4F46E5; min-width: 80px;
}
.b7-we-solve-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  background: #FEF3C7; color: #92400E; padding: 4px 10px; border-radius: 6px;
  font-size: .95rem;
}
.b7-we-solve-op  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; color: #DC2626; }
.b7-we-solve-eq  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; color: #4F46E5; }
.b7-we-solve-res {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  background: #D1FAE5; color: #065F46; padding: 4px 10px; border-radius: 6px;
  font-size: 1rem; box-shadow: 0 0 0 2px #16A36B;
}
.b7-we-check {
  font-size: .9rem; color: #2A2233; line-height: 1.5;
  background: #EEF2FF; padding: 10px 12px; border-radius: 8px;
}
.b7-we-check strong { color: #16A36B; }
.b7-we-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 10px;
  padding: 12px; text-align: center; color: #065F46; font-size: 1rem;
}
.b7-we-answer strong { color: #16A36B; }

/* ── Mini-game speed rounds ── */
.b7-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.b7-speed-q {
  font-size: .95rem; font-weight: 700; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 10px 14px; border-radius: 8px;
  line-height: 1.4;
}
.b7-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px;
}
.b7-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.b7-speed-opt:hover { border-color: #4F46E5; transform: translateY(-1px); }
.b7-speed-opt.right { background: #ECFDF5; border-color: #16A36B; }
.b7-speed-opt.wrong { background: #FEF2F2; border-color: #DC2626; opacity: .8; }
.b7-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; color: #4F46E5;
}
.b7-speed-opt-meta { font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600; }
.b7-speed-opt.right .b7-speed-opt-val { color: #16A36B; }
.b7-speed-opt.wrong .b7-speed-opt-val { color: #DC2626; }
.b7-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.b7-speed-fb.right { color: #16A36B; font-weight: 800; }
.b7-speed-fb.wrong { color: #DC2626; }
.b7-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.b7-speed-reset:hover { background: #EEF2FF; }

/* ════════════════════════════════════════════════════════════
   M-series shared speed-round styles (.m1-, .m2-, .m3-, .m4-, .m5-, .m6-)
   ════════════════════════════════════════════════════════════ */
.m1-speed-wrap, .m2-speed-wrap, .m3-speed-wrap,
.m4-speed-wrap, .m5-speed-wrap, .m6-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.m1-speed-q, .m2-speed-q, .m3-speed-q,
.m4-speed-q, .m5-speed-q, .m6-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.15rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 10px 12px; border-radius: 8px;
  line-height: 1.4;
}
.m1-speed-options, .m2-speed-options, .m3-speed-options,
.m4-speed-options, .m5-speed-options, .m6-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.m1-speed-opt, .m2-speed-opt, .m3-speed-opt,
.m4-speed-opt, .m5-speed-opt, .m6-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.m1-speed-opt:hover, .m2-speed-opt:hover, .m3-speed-opt:hover,
.m4-speed-opt:hover, .m5-speed-opt:hover, .m6-speed-opt:hover {
  border-color: #4F46E5; transform: translateY(-1px);
}
.m1-speed-opt.right, .m2-speed-opt.right, .m3-speed-opt.right,
.m4-speed-opt.right, .m5-speed-opt.right, .m6-speed-opt.right {
  background: #ECFDF5; border-color: #16A36B;
}
.m1-speed-opt.wrong, .m2-speed-opt.wrong, .m3-speed-opt.wrong,
.m4-speed-opt.wrong, .m5-speed-opt.wrong, .m6-speed-opt.wrong {
  background: #FEF2F2; border-color: #DC2626; opacity: .8;
}
.m1-speed-opt-val, .m2-speed-opt-val, .m3-speed-opt-val,
.m4-speed-opt-val, .m5-speed-opt-val, .m6-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; color: #4F46E5;
}
.m1-speed-opt-meta, .m2-speed-opt-meta, .m3-speed-opt-meta,
.m4-speed-opt-meta, .m5-speed-opt-meta, .m6-speed-opt-meta {
  font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600;
}
.m1-speed-opt.right .m1-speed-opt-val, .m2-speed-opt.right .m2-speed-opt-val,
.m3-speed-opt.right .m3-speed-opt-val, .m4-speed-opt.right .m4-speed-opt-val,
.m5-speed-opt.right .m5-speed-opt-val, .m6-speed-opt.right .m6-speed-opt-val { color: #16A36B; }
.m1-speed-opt.wrong .m1-speed-opt-val, .m2-speed-opt.wrong .m2-speed-opt-val,
.m3-speed-opt.wrong .m3-speed-opt-val, .m4-speed-opt.wrong .m4-speed-opt-val,
.m5-speed-opt.wrong .m5-speed-opt-val, .m6-speed-opt.wrong .m6-speed-opt-val { color: #DC2626; }
.m1-speed-fb, .m2-speed-fb, .m3-speed-fb,
.m4-speed-fb, .m5-speed-fb, .m6-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center;
  line-height: 1.4;
}
.m1-speed-fb.right, .m2-speed-fb.right, .m3-speed-fb.right,
.m4-speed-fb.right, .m5-speed-fb.right, .m6-speed-fb.right { color: #16A36B; font-weight: 800; }
.m1-speed-fb.wrong, .m2-speed-fb.wrong, .m3-speed-fb.wrong,
.m4-speed-fb.wrong, .m5-speed-fb.wrong, .m6-speed-fb.wrong { color: #DC2626; }
.m1-speed-reset, .m2-speed-reset, .m3-speed-reset,
.m4-speed-reset, .m5-speed-reset, .m6-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.m1-speed-reset:hover, .m2-speed-reset:hover, .m3-speed-reset:hover,
.m4-speed-reset:hover, .m5-speed-reset:hover, .m6-speed-reset:hover { background: #EEF2FF; }

/* M-series shared "stage card" base */
.m1-we-wrap, .m2-we-wrap, .m3-we-wrap,
.m4-we-wrap, .m5-we-wrap, .m6-we-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.m1-we-stage, .m2-we-stage, .m3-we-stage,
.m4-we-stage, .m5-we-stage, .m6-we-stage {
  background: #fff; border-radius: 10px; padding: 12px;
}
.m1-we-stage-label, .m2-we-stage-label, .m3-we-stage-label,
.m4-we-stage-label, .m5-we-stage-label, .m6-we-stage-label {
  font-weight: 700; color: #4F46E5; margin-bottom: 8px; font-size: .92rem;
}
.m1-we-answer, .m2-we-answer, .m3-we-answer,
.m4-we-answer, .m5-we-answer, .m6-we-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 10px;
  padding: 12px; text-align: center; color: #065F46; font-size: .95rem;
}
.m1-we-answer strong, .m2-we-answer strong, .m3-we-answer strong,
.m4-we-answer strong, .m5-we-answer strong, .m6-we-answer strong { color: #16A36B; }

/* ════════════════════════════════════════════════════════════
   M1 — Understand Integers
   ════════════════════════════════════════════════════════════ */
.m1-line-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.m1-line-svg svg { width: 100%; height: auto; }
.m1-cmp-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.m1-cmp-line svg { width: 100%; height: auto; }
.m1-cmp-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.m1-cmp-card {
  background: #fff; border-radius: 10px; padding: 12px;
  border-top: 4px solid transparent;
}
.m1-cmp-card.right { border-top-color: #16A36B; }
.m1-cmp-card.wrong { border-top-color: #DC2626; }
.m1-cmp-head {
  font-weight: 800; font-size: .88rem; margin-bottom: 6px;
}
.m1-cmp-card.right .m1-cmp-head { color: #16A36B; }
.m1-cmp-card.wrong .m1-cmp-head { color: #DC2626; }
.m1-cmp-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1rem; padding: 6px 10px; background: #F5EEDF; border-radius: 6px;
  display: inline-block; margin: 4px 0;
}
.m1-cmp-eq.bad { color: #DC2626; background: #FEE2E2; }
.m1-cmp-msg { font-size: .82rem; color: #2A2233; line-height: 1.4; margin-top: 4px; }
@media (max-width: 520px) { .m1-cmp-compare { grid-template-columns: 1fr; } }

.m1-we-line svg, .m1-we-line-anno svg { width: 100%; height: auto; }
.m1-we-line-anno {
  display: flex; flex-direction: column; gap: 6px;
}
.m1-we-anno-row {
  display: flex; align-items: center; gap: 8px;
  background: #FBF4EA; padding: 6px 10px; border-radius: 8px;
}
.m1-we-arrow {
  font-size: 1.4rem; font-weight: 800; color: #4F46E5;
}
.m1-we-arrow.left  { color: #1E40AF; }
.m1-we-arrow.right { color: #DC2626; }
.m1-we-anno-tag {
  font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 800;
  padding: 3px 8px; border-radius: 4px; color: #fff;
}
.m1-we-anno-tag.cold { background: #1E40AF; }
.m1-we-anno-tag.warm { background: #DC2626; }
.m1-we-anno-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .9rem;
}
.m1-we-order {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; flex-wrap: wrap;
}
.m1-we-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  text-align: center; padding: 6px 8px; border-radius: 6px;
  font-size: .95rem; color: #fff;
}
.m1-we-chip small { font-family: 'Inter', sans-serif; font-size: .65rem; opacity: .85; font-weight: 700; }
.m1-we-chip.blue   { background: #1E40AF; }
.m1-we-chip.purple { background: #7C3AED; }
.m1-we-chip.indigo { background: #4F46E5; }
.m1-we-chip.amber  { background: #F59E0B; color: #2A2233; }
.m1-we-chip.red    { background: #DC2626; }
.m1-we-op {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.1rem; color: #4F46E5;
}

.m1-real-wrap {
  display: flex; flex-direction: column; gap: 6px; margin: 12px 0;
}
.m1-real-row {
  display: grid; grid-template-columns: 36px 1fr 110px 110px 110px; gap: 8px;
  align-items: center;
  background: #fff; border-radius: 10px; padding: 10px;
}
.m1-real-icon { font-size: 1.6rem; text-align: center; }
.m1-real-name { font-weight: 800; font-size: .9rem; color: #2A2233; }
.m1-real-zero {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .78rem;
  background: #FEF3C7; color: #92400E; padding: 4px 8px; border-radius: 6px;
  text-align: center; font-weight: 700;
}
.m1-real-pos {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .78rem;
  background: #D1FAE5; color: #065F46; padding: 4px 8px; border-radius: 6px;
  text-align: center; font-weight: 700;
}
.m1-real-neg {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .78rem;
  background: #FEE2E2; color: #991B1B; padding: 4px 8px; border-radius: 6px;
  text-align: center; font-weight: 700;
}
@media (max-width: 720px) {
  .m1-real-row {
    grid-template-columns: 36px 1fr; grid-auto-rows: auto;
  }
  .m1-real-zero, .m1-real-pos, .m1-real-neg { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════
   M2 — Rational Numbers on the Number Line
   ════════════════════════════════════════════════════════════ */
.m2-formula {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #EEF2FF; color: #4F46E5; padding: 2px 8px; border-radius: 4px;
  font-weight: 800;
}
.m2-rat-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.m2-rat-bubble {
  border-radius: 16px; padding: 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.m2-rat-bubble.big {
  background: #FCE7F3; border: 2px dashed #BE185D;
}
.m2-rat-bubble.med {
  background: #DBEAFE; border: 2px dashed #1E40AF; width: 80%; max-width: 360px;
}
.m2-rat-bubble.small {
  background: #D1FAE5; border: 2px dashed #16A36B; width: 70%; max-width: 240px;
}
.m2-rat-label {
  font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 800;
  letter-spacing: .08em;
}
.m2-rat-bubble.big   .m2-rat-label { color: #BE185D; }
.m2-rat-bubble.med   .m2-rat-label { color: #1E40AF; }
.m2-rat-bubble.small .m2-rat-label { color: #065F46; }
.m2-rat-ex {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .85rem; color: #2A2233;
}
.m2-rat-examples {
  background: #fff; border-radius: 10px; padding: 12px; margin-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.m2-rat-ex-row {
  display: grid; grid-template-columns: 70px 30px 90px 1fr; gap: 8px;
  align-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.m2-rat-ex-from {
  font-weight: 800; background: #FEF3C7; color: #92400E;
  padding: 4px 10px; border-radius: 6px; text-align: center;
}
.m2-rat-ex-arrow { text-align: center; color: #4F46E5; font-weight: 800; }
.m2-rat-ex-to {
  font-weight: 800; background: #D1FAE5; color: #065F46;
  padding: 4px 10px; border-radius: 6px; text-align: center;
  box-shadow: 0 0 0 2px #16A36B;
}
.m2-rat-ex-msg {
  font-family: 'Inter', sans-serif; font-size: .78rem; color: #6F6878;
}

.m2-we-svg svg { width: 100%; height: auto; }
.m2-we-meta { font-size: .85rem; color: #2A2233; text-align: center; margin-top: 6px; line-height: 1.45; }

.m2-cmp-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; }
.m2-cmp-line svg { width: 100%; height: auto; background: #fff; border-radius: 10px; padding: 8px; box-sizing: border-box; }
.m2-cmp-decimal {
  background: #fff; border-radius: 10px; padding: 14px; margin-top: 12px;
}
.m2-cmp-decimal-head {
  text-align: center; font-size: .92rem; color: #2A2233; margin-bottom: 10px;
}
.m2-cmp-decimal-eq {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.m2-cmp-decimal-stack {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.m2-cmp-decimal-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.6rem; font-weight: 800; color: #2A2233;
  background: #F5EEDF; padding: 6px 12px; border-radius: 6px;
}
.m2-cmp-decimal-num .hi { color: #BE185D; }
.m2-cmp-decimal-num .pad { color: #92400E; background: #FEF3C7; padding: 0 4px; border-radius: 3px; }
.m2-cmp-decimal-tag {
  font-family: 'Inter', sans-serif; font-size: .78rem; color: #6F6878; font-weight: 700;
}
.m2-cmp-decimal-vs {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.1rem; color: #4F46E5;
}
.m2-cmp-decimal-result {
  text-align: center; margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  color: #16A36B;
}
.m2-cmp-decimal-warn {
  margin-top: 10px; font-size: .82rem; color: #2A2233; line-height: 1.5;
  background: #FEF3C7; padding: 8px 12px; border-radius: 6px;
  border-left: 4px solid #F59E0B;
}

/* ════════════════════════════════════════════════════════════
   M3 — Absolute Value
   ════════════════════════════════════════════════════════════ */
.m3-formula {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: #EEF2FF; color: #4F46E5; padding: 2px 10px; border-radius: 4px;
  font-weight: 800;
}
.m3-anat-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; }
.m3-anat-line svg { width: 100%; height: auto; background: #fff; border-radius: 10px; padding: 8px; box-sizing: border-box; }
.m3-anat-eqs {
  display: flex; flex-direction: column; gap: 6px; margin-top: 12px;
}
.m3-anat-eq {
  display: grid; grid-template-columns: 70px 30px 70px 1fr; gap: 10px;
  align-items: center; background: #fff; border-radius: 8px; padding: 8px 12px;
}
.m3-anat-input {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1.1rem; text-align: center; padding: 4px 8px;
  background: #FCE7F3; color: #BE185D; border-radius: 6px;
}
.m3-anat-arrow { text-align: center; color: #4F46E5; font-weight: 800; }
.m3-anat-output {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1.2rem; text-align: center; padding: 4px 8px;
  background: #D1FAE5; color: #065F46; border-radius: 6px;
  box-shadow: 0 0 0 2px #16A36B;
}
.m3-anat-msg {
  font-family: 'Inter', sans-serif; font-size: .8rem; color: #6F6878;
}

.m3-we-eval {
  display: grid; grid-template-columns: auto 30px 1fr 30px auto; gap: 10px;
  align-items: center; flex-wrap: wrap;
}
.m3-we-input {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1.2rem; padding: 6px 12px;
  background: #FCE7F3; color: #BE185D; border-radius: 6px;
}
.m3-we-arrow { text-align: center; color: #4F46E5; font-weight: 800; font-size: 1.2rem; }
.m3-we-explain {
  font-size: .88rem; color: #2A2233; line-height: 1.4;
}
.m3-we-output {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1.3rem; padding: 6px 12px;
  background: #D1FAE5; color: #065F46; border-radius: 6px;
  box-shadow: 0 0 0 2px #16A36B; text-align: center;
}
@media (max-width: 520px) {
  .m3-we-eval { grid-template-columns: 1fr; gap: 4px; }
  .m3-we-arrow { display: none; }
}

.m3-split-wrap {
  display: flex; flex-direction: column; gap: 8px; margin: 12px 0;
}
.m3-split-row {
  background: #fff; border-radius: 10px; padding: 12px;
  display: grid; grid-template-columns: 120px 30px 1fr; gap: 10px;
  align-items: center;
}
.m3-split-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1.4rem; text-align: center; padding: 8px 14px;
  background: #F5EEDF; color: #2A2233; border-radius: 8px;
}
.m3-split-arrow { text-align: center; color: #4F46E5; font-weight: 800; font-size: 1.3rem; }
.m3-split-parts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px;
}
.m3-split-sign {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: .78rem; padding: 3px 8px; border-radius: 4px; text-align: center;
}
.m3-split-sign.neg { background: #FEE2E2; color: #991B1B; }
.m3-split-sign.pos { background: #D1FAE5; color: #065F46; }
.m3-split-size {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: .82rem; padding: 3px 8px; border-radius: 4px;
  background: #DBEAFE; color: #1E40AF; text-align: center;
}
.m3-split-msg {
  font-family: 'Inter', sans-serif; font-size: .72rem; color: #6F6878;
}
.m3-split-warn {
  margin-top: 12px; background: #FEF3C7; border-radius: 8px;
  padding: 10px 12px; font-size: .85rem; color: #2A2233; line-height: 1.5;
  border-left: 4px solid #F59E0B;
}
@media (max-width: 520px) {
  .m3-split-row { grid-template-columns: 1fr; }
  .m3-split-arrow { display: none; }
}

/* ════════════════════════════════════════════════════════════
   M4 — The Coordinate Plane
   ════════════════════════════════════════════════════════════ */
.m4-plane-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
  display: flex; justify-content: center;
}
.m4-plane-wrap svg { max-width: 400px; width: 100%; height: auto; background: #fff; border-radius: 10px; padding: 8px; box-sizing: border-box; }

.m4-we-svg { width: 100%; height: auto; background: #FBF4EA; border-radius: 8px; padding: 8px; box-sizing: border-box; }
.m4-we-svg svg, .m4-we-svg { display: block; }
.m4-we-hi-x { color: #BE185D; font-weight: 800; }
.m4-we-hi-y { color: #1E40AF; font-weight: 800; }
.m4-we-meta { font-size: .85rem; color: #2A2233; text-align: center; margin-top: 8px; }

.m4-quad-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
}
.m4-quad-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr; gap: 6px;
  max-width: 460px; margin: 0 auto;
}
.m4-quad-cell {
  background: #fff; border-radius: 10px; padding: 14px;
  text-align: center; border: 2px solid transparent;
  display: flex; flex-direction: column; gap: 4px;
}
.m4-quad-cell.q1 { border-color: #16A36B; background: #ECFDF5; }
.m4-quad-cell.q2 { border-color: #1E40AF; background: #EFF6FF; }
.m4-quad-cell.q3 { border-color: #BE185D; background: #FCE7F3; }
.m4-quad-cell.q4 { border-color: #F59E0B; background: #FEF3C7; }
.m4-quad-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.4rem;
}
.m4-quad-cell.q1 .m4-quad-name { color: #16A36B; }
.m4-quad-cell.q2 .m4-quad-name { color: #1E40AF; }
.m4-quad-cell.q3 .m4-quad-name { color: #BE185D; }
.m4-quad-cell.q4 .m4-quad-name { color: #92400E; }
.m4-quad-sign {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: 1.2rem; color: #2A2233;
}
.m4-quad-sign .pos { color: #16A36B; }
.m4-quad-sign .neg { color: #DC2626; }
.m4-quad-msg { font-size: .78rem; color: #6F6878; font-style: italic; }
.m4-quad-ex {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: .85rem; color: #4F46E5;
  background: rgba(79, 70, 229, .08); padding: 3px 8px; border-radius: 4px;
}
.m4-quad-warn {
  background: #FEF2F2; border: 2px solid #DC2626; border-radius: 10px;
  padding: 12px; margin-top: 12px;
}
.m4-quad-warn-head { font-weight: 800; color: #DC2626; font-size: .9rem; margin-bottom: 6px; }
.m4-quad-warn-body { font-size: .85rem; color: #2A2233; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════
   M5 — Distances on Coordinate Plane
   ════════════════════════════════════════════════════════════ */
.m5-rule-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0;
}
.m5-rule-card {
  background: #fff; border-radius: 10px; padding: 12px;
  border-top: 4px solid transparent;
}
.m5-rule-card.horizontal { border-top-color: #16A36B; }
.m5-rule-card.vertical   { border-top-color: #BE185D; }
.m5-rule-head { font-weight: 800; font-size: .92rem; color: #2A2233; margin-bottom: 8px; }
.m5-rule-formula {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1rem; padding: 6px 10px; background: #F5EEDF;
  border-radius: 6px; margin-bottom: 8px; text-align: center;
}
.m5-rule-svg svg { width: 100%; height: auto; }
.m5-rule-svg { background: #FBF4EA; padding: 6px; border-radius: 6px; }
.m5-rule-ex {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: .92rem; text-align: center; margin-top: 8px; color: #2A2233;
}
.m5-rule-ex strong { color: #16A36B; }
.m5-rule-tip {
  background: #FEF3C7; border-radius: 8px; padding: 10px 12px; margin-top: 10px;
  font-size: .85rem; color: #2A2233; line-height: 1.5;
  border-left: 4px solid #F59E0B;
}
@media (max-width: 520px) { .m5-rule-wrap { grid-template-columns: 1fr; } }

.m5-we-check {
  background: #FBF4EA; padding: 10px 14px; border-radius: 8px;
  font-size: .92rem; color: #2A2233; line-height: 1.5;
}
.m5-we-chip {
  background: #DBEAFE; color: #1E40AF; padding: 2px 8px; border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
}
.m5-we-svg { width: 100%; height: auto; background: #fff; border-radius: 6px; padding: 4px; box-sizing: border-box; }
.m5-we-eq {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap; padding: 6px;
}
.m5-we-eq-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1rem; padding: 6px 10px;
  background: #F5EEDF; color: #2A2233; border-radius: 6px;
}
.m5-we-eq-arrow { color: #4F46E5; font-weight: 800; font-size: 1.2rem; }
.m5-we-eq-res {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1.3rem; padding: 6px 14px;
  background: #D1FAE5; color: #065F46; border-radius: 6px;
  box-shadow: 0 0 0 2px #16A36B;
}
.m5-we-note {
  font-size: .82rem; color: #92400E; text-align: center; margin-top: 8px;
  background: #FEF3C7; padding: 6px 10px; border-radius: 6px;
}

.m5-prot-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0;
}
.m5-prot-card {
  background: #fff; border-radius: 10px; padding: 12px;
  border-top: 4px solid transparent;
}
.m5-prot-card.right { border-top-color: #16A36B; }
.m5-prot-card.wrong { border-top-color: #DC2626; }
.m5-prot-head { font-weight: 800; font-size: .88rem; margin-bottom: 8px; }
.m5-prot-card.right .m5-prot-head { color: #16A36B; }
.m5-prot-card.wrong .m5-prot-head { color: #DC2626; }
.m5-prot-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: .92rem; padding: 6px 10px; background: #F5EEDF;
  border-radius: 6px; margin-bottom: 4px;
}
.m5-prot-eq.bad { background: #FEE2E2; color: #DC2626; }
.m5-prot-eq strong { color: #16A36B; }
.m5-prot-msg { font-size: .82rem; color: #2A2233; line-height: 1.45; margin-top: 4px; }
.m5-prot-summary {
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
}
.m5-prot-row {
  display: grid; grid-template-columns: 90px 30px 1fr 90px; gap: 8px;
  align-items: center; background: #FBF4EA; padding: 8px 10px; border-radius: 8px;
}
.m5-prot-tag {
  font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 800;
  background: #4F46E5; color: #fff; padding: 4px 8px; border-radius: 4px;
  text-align: center;
}
.m5-prot-arrow { text-align: center; color: #4F46E5; font-weight: 800; }
.m5-prot-formula {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1rem; background: #fff; padding: 4px 10px; border-radius: 6px;
  text-align: center; color: #16A36B;
}
.m5-prot-note { font-size: .78rem; color: #6F6878; font-style: italic; }
@media (max-width: 520px) {
  .m5-prot-wrap { grid-template-columns: 1fr; }
  .m5-prot-row { grid-template-columns: 1fr; }
  .m5-prot-arrow { display: none; }
}

/* ════════════════════════════════════════════════════════════
   M6 — Polygons on Coordinate Plane
   ════════════════════════════════════════════════════════════ */
.m6-flow-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
  display: flex; align-items: stretch; justify-content: center;
  gap: 4px; flex-wrap: wrap;
}
.m6-flow-step {
  flex: 1 1 110px; background: #fff; border-radius: 10px; padding: 10px;
  text-align: center; border-top: 4px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.m6-flow-step.plot    { border-top-color: #BE185D; }
.m6-flow-step.connect { border-top-color: #F59E0B; }
.m6-flow-step.measure { border-top-color: #4F46E5; }
.m6-flow-step.solve   { border-top-color: #16A36B; }
.m6-flow-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: .92rem;
}
.m6-flow-step.plot    .m6-flow-num { background: #BE185D; }
.m6-flow-step.connect .m6-flow-num { background: #F59E0B; }
.m6-flow-step.measure .m6-flow-num { background: #4F46E5; }
.m6-flow-step.solve   .m6-flow-num { background: #16A36B; }
.m6-flow-name {
  font-weight: 800; font-size: .85rem; letter-spacing: .04em;
}
.m6-flow-step.plot    .m6-flow-name { color: #BE185D; }
.m6-flow-step.connect .m6-flow-name { color: #92400E; }
.m6-flow-step.measure .m6-flow-name { color: #4F46E5; }
.m6-flow-step.solve   .m6-flow-name { color: #16A36B; }
.m6-flow-desc { font-size: .75rem; color: #6F6878; line-height: 1.35; }
.m6-flow-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #4F46E5; font-weight: 800;
}
@media (max-width: 720px) { .m6-flow-arrow { transform: rotate(90deg); padding: 4px 0; } }

.m6-we-svg { width: 100%; height: auto; max-width: 380px; display: block; margin: 0 auto; background: #fff; border-radius: 8px; padding: 6px; box-sizing: border-box; }
.m6-we-sides {
  display: flex; flex-direction: column; gap: 6px;
}
.m6-we-side {
  display: grid; grid-template-columns: 50px 1fr 1fr; gap: 8px;
  align-items: center; background: #FBF4EA; padding: 8px 10px; border-radius: 8px;
}
.m6-we-side.horizontal { border-left: 4px solid #16A36B; }
.m6-we-side.vertical   { border-left: 4px solid #BE185D; }
.m6-we-side-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1.1rem; text-align: center;
}
.m6-we-side.horizontal .m6-we-side-name { color: #16A36B; }
.m6-we-side.vertical   .m6-we-side-name { color: #BE185D; }
.m6-we-side-pts {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .85rem;
  color: #6F6878;
}
.m6-we-side-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: .92rem; color: #2A2233;
}
.m6-we-side-eq strong { color: #16A36B; }
.m6-we-formula {
  display: grid; grid-template-columns: 110px 1fr; gap: 10px;
  align-items: center; background: #FBF4EA; padding: 8px 10px; border-radius: 8px;
}
.m6-we-formula-tag {
  font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 800;
  padding: 4px 8px; border-radius: 4px; text-align: center;
  letter-spacing: .04em; color: #fff;
}
.m6-we-formula-tag.perim { background: #16A36B; }
.m6-we-formula-tag.area  { background: #BE185D; }
.m6-we-formula-eq {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1rem; color: #2A2233;
}
.m6-we-formula-eq strong { color: #16A36B; }

.m6-pa-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0;
}
.m6-pa-card {
  background: #fff; border-radius: 10px; padding: 14px;
  text-align: center; border-top: 4px solid transparent;
}
.m6-pa-card.perim { border-top-color: #16A36B; }
.m6-pa-card.area  { border-top-color: #BE185D; }
.m6-pa-head {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 6px;
}
.m6-pa-icon { font-size: 1.4rem; }
.m6-pa-name {
  font-weight: 800; font-size: 1rem; letter-spacing: .05em;
}
.m6-pa-card.perim .m6-pa-name { color: #16A36B; }
.m6-pa-card.area  .m6-pa-name { color: #BE185D; }
.m6-pa-msg { font-size: .82rem; color: #2A2233; margin-bottom: 8px; }
.m6-pa-svg { display: block; margin: 6px auto; max-width: 160px; width: 100%; height: auto; }
.m6-pa-formula {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: .85rem; color: #2A2233; margin-top: 4px;
}
.m6-pa-unit { font-size: .72rem; color: #6F6878; font-style: italic; margin-top: 4px; }
.m6-pa-warn {
  background: #FEF3C7; border: 2px solid #F59E0B; border-radius: 10px;
  padding: 12px; margin-top: 12px;
}
.m6-pa-warn-head { font-weight: 800; color: #92400E; font-size: .9rem; margin-bottom: 6px; }
.m6-pa-warn-bad {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: .92rem; color: #DC2626; margin-bottom: 6px;
}
.m6-pa-warn-good {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: .92rem; color: #065F46;
}
.m6-pa-warn-good strong { color: #16A36B; }
@media (max-width: 520px) { .m6-pa-wrap { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   A-series shared speed-round + WE styles (.a1- through .a8-)
   ════════════════════════════════════════════════════════════ */
.a1-speed-wrap, .a2-speed-wrap, .a3-speed-wrap, .a4-speed-wrap,
.a5-speed-wrap, .a6-speed-wrap, .a7-speed-wrap, .a8-speed-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 18px; margin-top: 12px;
}
.a1-speed-q, .a2-speed-q, .a3-speed-q, .a4-speed-q,
.a5-speed-q, .a6-speed-q, .a7-speed-q, .a8-speed-q {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.15rem; font-weight: 800; text-align: center; margin-bottom: 14px;
  color: #4F46E5; background: #EEF2FF; padding: 10px 12px; border-radius: 8px;
  line-height: 1.4;
}
.a1-speed-options, .a2-speed-options, .a3-speed-options, .a4-speed-options,
.a5-speed-options, .a6-speed-options, .a7-speed-options, .a8-speed-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.a1-speed-opt, .a2-speed-opt, .a3-speed-opt, .a4-speed-opt,
.a5-speed-opt, .a6-speed-opt, .a7-speed-opt, .a8-speed-opt {
  background: #fff; border: 2px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: center;
  transition: all .15s ease;
}
.a1-speed-opt:hover, .a2-speed-opt:hover, .a3-speed-opt:hover, .a4-speed-opt:hover,
.a5-speed-opt:hover, .a6-speed-opt:hover, .a7-speed-opt:hover, .a8-speed-opt:hover {
  border-color: #4F46E5; transform: translateY(-1px);
}
.a1-speed-opt.right, .a2-speed-opt.right, .a3-speed-opt.right, .a4-speed-opt.right,
.a5-speed-opt.right, .a6-speed-opt.right, .a7-speed-opt.right, .a8-speed-opt.right {
  background: #ECFDF5; border-color: #16A36B;
}
.a1-speed-opt.wrong, .a2-speed-opt.wrong, .a3-speed-opt.wrong, .a4-speed-opt.wrong,
.a5-speed-opt.wrong, .a6-speed-opt.wrong, .a7-speed-opt.wrong, .a8-speed-opt.wrong {
  background: #FEF2F2; border-color: #DC2626; opacity: .8;
}
.a1-speed-opt-val, .a2-speed-opt-val, .a3-speed-opt-val, .a4-speed-opt-val,
.a5-speed-opt-val, .a6-speed-opt-val, .a7-speed-opt-val, .a8-speed-opt-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.2rem; font-weight: 800; color: #4F46E5;
}
.a1-speed-opt-meta, .a2-speed-opt-meta, .a3-speed-opt-meta, .a4-speed-opt-meta,
.a5-speed-opt-meta, .a6-speed-opt-meta, .a7-speed-opt-meta, .a8-speed-opt-meta {
  font-size: .72rem; color: #6F6878; margin-top: 4px; font-weight: 600;
}
.a1-speed-opt.right .a1-speed-opt-val, .a2-speed-opt.right .a2-speed-opt-val,
.a3-speed-opt.right .a3-speed-opt-val, .a4-speed-opt.right .a4-speed-opt-val,
.a5-speed-opt.right .a5-speed-opt-val, .a6-speed-opt.right .a6-speed-opt-val,
.a7-speed-opt.right .a7-speed-opt-val, .a8-speed-opt.right .a8-speed-opt-val { color: #16A36B; }
.a1-speed-opt.wrong .a1-speed-opt-val, .a2-speed-opt.wrong .a2-speed-opt-val,
.a3-speed-opt.wrong .a3-speed-opt-val, .a4-speed-opt.wrong .a4-speed-opt-val,
.a5-speed-opt.wrong .a5-speed-opt-val, .a6-speed-opt.wrong .a6-speed-opt-val,
.a7-speed-opt.wrong .a7-speed-opt-val, .a8-speed-opt.wrong .a8-speed-opt-val { color: #DC2626; }
.a1-speed-fb, .a2-speed-fb, .a3-speed-fb, .a4-speed-fb,
.a5-speed-fb, .a6-speed-fb, .a7-speed-fb, .a8-speed-fb {
  margin-top: 12px; font-size: .92rem; min-height: 22px; text-align: center; line-height: 1.4;
}
.a1-speed-fb.right, .a2-speed-fb.right, .a3-speed-fb.right, .a4-speed-fb.right,
.a5-speed-fb.right, .a6-speed-fb.right, .a7-speed-fb.right, .a8-speed-fb.right { color: #16A36B; font-weight: 800; }
.a1-speed-fb.wrong, .a2-speed-fb.wrong, .a3-speed-fb.wrong, .a4-speed-fb.wrong,
.a5-speed-fb.wrong, .a6-speed-fb.wrong, .a7-speed-fb.wrong, .a8-speed-fb.wrong { color: #DC2626; }
.a1-speed-reset, .a2-speed-reset, .a3-speed-reset, .a4-speed-reset,
.a5-speed-reset, .a6-speed-reset, .a7-speed-reset, .a8-speed-reset {
  margin: 10px auto 0; display: block;
  background: #fff; color: #4F46E5;
  border: 1.5px solid #4F46E5; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem;
}
.a1-speed-reset:hover, .a2-speed-reset:hover, .a3-speed-reset:hover, .a4-speed-reset:hover,
.a5-speed-reset:hover, .a6-speed-reset:hover, .a7-speed-reset:hover, .a8-speed-reset:hover { background: #EEF2FF; }

.a1-we-wrap, .a2-we-wrap, .a3-we-wrap, .a4-we-wrap,
.a5-we-wrap, .a6-we-wrap, .a7-we-wrap, .a8-we-wrap {
  background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.a1-we-stage, .a2-we-stage, .a3-we-stage, .a4-we-stage,
.a5-we-stage, .a6-we-stage, .a7-we-stage, .a8-we-stage {
  background: #fff; border-radius: 10px; padding: 12px;
}
.a1-we-stage-label, .a2-we-stage-label, .a3-we-stage-label, .a4-we-stage-label,
.a5-we-stage-label, .a6-we-stage-label, .a7-we-stage-label, .a8-we-stage-label {
  font-weight: 700; color: #4F46E5; margin-bottom: 8px; font-size: .92rem;
}
.a1-we-answer, .a2-we-answer, .a3-we-answer, .a4-we-answer,
.a5-we-answer, .a6-we-answer, .a7-we-answer, .a8-we-answer {
  background: #ECFDF5; border: 2px solid #16A36B; border-radius: 10px;
  padding: 12px; text-align: center; color: #065F46; font-size: .95rem;
}
.a1-we-answer strong, .a2-we-answer strong, .a3-we-answer strong, .a4-we-answer strong,
.a5-we-answer strong, .a6-we-answer strong, .a7-we-answer strong, .a8-we-answer strong { color: #16A36B; }

/* ── A1: Exponents ── */
.a1-anat-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; }
.a1-anat-hero { background: #fff; border-radius: 10px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.a1-anat-power {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 4rem; color: #BE185D; line-height: 1; position: relative;
}
.a1-anat-base { color: #BE185D; }
.a1-anat-exp {
  font-size: 0.45em; vertical-align: super; color: #1E40AF;
  margin-left: 2px; background: #DBEAFE; padding: 0 6px; border-radius: 4px;
}
.a1-anat-arrows { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.a1-anat-tag {
  font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 800;
  padding: 4px 10px; border-radius: 6px;
}
.a1-anat-tag.base { background: #FCE7F3; color: #BE185D; }
.a1-anat-tag.exp { background: #DBEAFE; color: #1E40AF; }
.a1-anat-expand {
  background: #fff; border-radius: 10px; padding: 14px; margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
}
.a1-anat-step { font-size: 1.2rem; background: #F5EEDF; padding: 6px 12px; border-radius: 6px; }
.a1-anat-eq { font-size: 1.3rem; color: #4F46E5; }
.a1-anat-result { font-size: 1.5rem; background: #D1FAE5; color: #065F46; padding: 6px 14px; border-radius: 8px; box-shadow: 0 0 0 2px #16A36B; }
.a1-anat-read { margin-top: 10px; text-align: center; font-size: .92rem; color: #2A2233; }

.a1-trap-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.a1-trap-card { background: #fff; border-radius: 10px; padding: 12px; border-top: 4px solid transparent; }
.a1-trap-card.right { border-top-color: #16A36B; }
.a1-trap-card.wrong { border-top-color: #DC2626; }
.a1-trap-head { font-weight: 800; font-size: .88rem; margin-bottom: 6px; }
.a1-trap-card.right .a1-trap-head { color: #16A36B; }
.a1-trap-card.wrong .a1-trap-head { color: #DC2626; }
.a1-trap-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1rem; padding: 6px 10px; background: #F5EEDF; border-radius: 6px; margin-bottom: 4px; }
.a1-trap-eq.bad { background: #FEE2E2; color: #DC2626; }
.a1-trap-eq strong { color: #16A36B; }
.a1-trap-msg { font-size: .82rem; color: #2A2233; line-height: 1.45; }
@media (max-width: 520px) { .a1-trap-wrap { grid-template-columns: 1fr; } }

.a1-special-wrap { background: #fff; border-radius: 10px; padding: 14px; margin-top: 12px; border-left: 4px solid #F59E0B; }
.a1-special-head { font-weight: 800; color: #92400E; font-size: .92rem; margin-bottom: 8px; }
.a1-special-row { display: flex; align-items: center; gap: 12px; margin: 4px 0; flex-wrap: wrap; }
.a1-special-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #FEF3C7; color: #92400E; padding: 4px 10px; border-radius: 6px; }
.a1-special-msg { font-size: .82rem; color: #2A2233; }

.a1-we-count { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.a1-we-factor {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1.6rem; background: #FCE7F3; color: #BE185D;
  padding: 6px 14px; border-radius: 8px;
}
.a1-we-times { font-size: 1.4rem; color: #4F46E5; font-weight: 800; }
.a1-we-meta { font-size: .85rem; color: #2A2233; text-align: center; margin-top: 6px; }
.a1-we-write { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px; flex-wrap: wrap; }
.a1-we-from { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.1rem; }
.a1-we-arrow { color: #4F46E5; font-size: 1.3rem; font-weight: 800; }
.a1-we-power { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 2.2rem; }
.a1-we-eval { display: flex; flex-direction: column; gap: 6px; }
.a1-we-eval-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.a1-we-eval-chip { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #DBEAFE; color: #1E40AF; padding: 4px 12px; border-radius: 6px; }
.a1-we-eval-arrow { color: #4F46E5; font-weight: 800; font-size: 1.2rem; }
.a1-we-eval-result { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #FEF3C7; color: #92400E; padding: 4px 12px; border-radius: 6px; }
.a1-we-eval-result.big { background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B; font-size: 1.4rem; padding: 6px 16px; }

.a1-pow10-wrap { background: #fff; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.a1-pow10-row { display: grid; grid-template-columns: 70px 30px 180px 1fr; gap: 10px; align-items: center; padding: 4px 8px; background: #FBF4EA; border-radius: 6px; }
.a1-pow10-pow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.1rem; color: #BE185D; text-align: center; background: #FCE7F3; padding: 4px; border-radius: 4px; }
.a1-pow10-eq { text-align: center; color: #4F46E5; font-weight: 800; }
.a1-pow10-val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; color: #065F46; }
.a1-pow10-msg { font-size: .78rem; color: #6F6878; }
.a1-pow10-real { margin-top: 10px; font-size: .85rem; color: #2A2233; background: #EEF2FF; padding: 8px 12px; border-radius: 6px; line-height: 1.5; }
@media (max-width: 520px) { .a1-pow10-row { grid-template-columns: 60px 24px 1fr; } .a1-pow10-msg { grid-column: 1 / -1; padding-left: 96px; } }

/* ── A2: GCF & LCM ── */
.a2-gcf-wrap, .a2-lcm-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; }
.a2-gcf-row, .a2-lcm-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; margin: 6px 0; background: #fff; padding: 8px 10px; border-radius: 8px; }
.a2-gcf-label, .a2-lcm-label { font-size: .85rem; font-weight: 800; color: #2A2233; }
.a2-gcf-chips, .a2-lcm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.a2-gcf-chip, .a2-lcm-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: .9rem; padding: 4px 10px; border-radius: 6px;
  background: #F5EEDF; color: #2A2233;
}
.a2-gcf-chip.shared, .a2-lcm-chip.shared { background: #DBEAFE; color: #1E40AF; }
.a2-gcf-chip.biggest, .a2-lcm-chip.biggest { background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B; }
.a2-gcf-result, .a2-lcm-result {
  margin-top: 10px; display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; background: #fff; padding: 10px; border-radius: 8px;
}
.a2-gcf-result-label, .a2-lcm-result-label { font-weight: 800; color: #6F6878; font-size: .85rem; }
.a2-gcf-shared-list, .a2-lcm-shared-list { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; color: #2A2233; }
.a2-gcf-shared-list .hi, .a2-lcm-shared-list .hi { color: #16A36B; background: #ECFDF5; padding: 1px 6px; border-radius: 4px; }
.a2-gcf-arrow, .a2-lcm-arrow { color: #4F46E5; font-weight: 800; font-size: 1.2rem; }
.a2-gcf-answer, .a2-lcm-answer {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1.05rem; background: #D1FAE5; color: #065F46;
  padding: 6px 12px; border-radius: 6px; box-shadow: 0 0 0 2px #16A36B;
}

.a2-compare-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.a2-compare-card { background: #fff; border-radius: 10px; padding: 12px; border-top: 4px solid transparent; }
.a2-compare-card.gcf { border-top-color: #1E40AF; }
.a2-compare-card.lcm { border-top-color: #BE185D; }
.a2-compare-head { font-weight: 800; font-size: .92rem; margin-bottom: 6px; }
.a2-compare-card.gcf .a2-compare-head { color: #1E40AF; }
.a2-compare-card.lcm .a2-compare-head { color: #BE185D; }
.a2-compare-rule { font-size: .82rem; color: #6F6878; font-style: italic; margin-bottom: 6px; }
.a2-compare-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; padding: 6px 10px; background: #F5EEDF; border-radius: 6px; margin: 4px 0; }
.a2-compare-eq strong { color: #16A36B; }
.a2-compare-msg { font-size: .82rem; color: #2A2233; }
.a2-compare-warn { background: #FEF2F2; border: 2px solid #DC2626; border-radius: 10px; padding: 12px; margin-top: 12px; }
.a2-compare-warn-head { font-weight: 800; color: #DC2626; font-size: .9rem; margin-bottom: 6px; }
.a2-compare-warn-bad { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; color: #DC2626; font-size: .88rem; margin-bottom: 4px; }
.a2-compare-warn-msg { font-size: .82rem; color: #2A2233; margin-top: 6px; line-height: 1.45; }
@media (max-width: 520px) { .a2-compare-wrap { grid-template-columns: 1fr; } }

.a2-we-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; justify-content: center; }
.a2-we-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800;
  font-size: 1rem; padding: 6px 12px; border-radius: 6px;
  background: #F5EEDF; color: #2A2233;
}
.a2-we-chip.shared { background: #DBEAFE; color: #1E40AF; }
.a2-we-chip.biggest { background: #D1FAE5; color: #065F46; box-shadow: 0 0 0 2px #16A36B; font-size: 1.3rem; }
.a2-we-meta { font-size: .85rem; color: #2A2233; text-align: center; margin-top: 6px; }

/* ── A3: Numerical & Algebraic Expressions ── */
.a3-pemdas-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.a3-pemdas-floor { background: #fff; border-radius: 10px; padding: 10px; display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; border-left: 5px solid transparent; }
.a3-pemdas-floor.p  { border-left-color: #BE185D; }
.a3-pemdas-floor.e  { border-left-color: #F59E0B; }
.a3-pemdas-floor.md { border-left-color: #4F46E5; }
.a3-pemdas-floor.as { border-left-color: #16A36B; }
.a3-pemdas-tag { width: 50px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.2rem; }
.a3-pemdas-floor.p  .a3-pemdas-tag { background: #BE185D; }
.a3-pemdas-floor.e  .a3-pemdas-tag { background: #F59E0B; }
.a3-pemdas-floor.md .a3-pemdas-tag { background: #4F46E5; }
.a3-pemdas-floor.as .a3-pemdas-tag { background: #16A36B; }
.a3-pemdas-name { font-weight: 800; font-size: .95rem; }
.a3-pemdas-floor.p  .a3-pemdas-name { color: #BE185D; }
.a3-pemdas-floor.e  .a3-pemdas-name { color: #92400E; }
.a3-pemdas-floor.md .a3-pemdas-name { color: #4F46E5; }
.a3-pemdas-floor.as .a3-pemdas-name { color: #16A36B; }
.a3-pemdas-ex { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .85rem; color: #6F6878; margin-top: 2px; }
.a3-pemdas-demo { background: #fff; border-radius: 10px; padding: 12px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.a3-pemdas-demo-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #F5EEDF; padding: 4px 10px; border-radius: 6px; }
.a3-pemdas-arrow { color: #4F46E5; font-size: .82rem; font-weight: 800; }
.a3-pemdas-demo-result { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #D1FAE5; color: #065F46; padding: 4px 12px; border-radius: 6px; box-shadow: 0 0 0 2px #16A36B; font-size: 1.2rem; }
.a3-pemdas-warn { margin-top: 10px; background: #FEF3C7; border-radius: 8px; padding: 10px 12px; font-size: .85rem; color: #2A2233; line-height: 1.5; border-left: 4px solid #F59E0B; }

.a3-anat-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; }
.a3-anat-eq { background: #fff; border-radius: 10px; padding: 16px; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 2.2rem; }
.a3-anat-coef { color: #BE185D; }
.a3-anat-var { color: #4F46E5; }
.a3-anat-op { color: #6F6878; margin: 0 8px; }
.a3-anat-const { color: #16A36B; }
.a3-anat-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.a3-anat-tag { background: #fff; border-radius: 8px; padding: 8px 12px; font-size: .85rem; color: #2A2233; }
.a3-anat-tag.coef  { border-left: 4px solid #BE185D; }
.a3-anat-tag.var   { border-left: 4px solid #4F46E5; }
.a3-anat-tag.term  { border-left: 4px solid #F59E0B; }
.a3-anat-tag.const { border-left: 4px solid #16A36B; }
.a3-anat-tag span { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; }
@media (max-width: 520px) { .a3-anat-tags { grid-template-columns: 1fr; } }

.a3-trans-wrap { background: #fff; border-radius: 10px; padding: 12px; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.a3-trans-head { font-weight: 800; color: #4F46E5; font-size: .9rem; text-align: center; margin-bottom: 4px; }
.a3-trans-row { display: grid; grid-template-columns: 1fr 30px 100px 1fr; gap: 8px; align-items: center; background: #FBF4EA; padding: 6px 10px; border-radius: 6px; }
.a3-trans-words { font-style: italic; color: #2A2233; font-size: .88rem; }
.a3-trans-arrow { text-align: center; color: #4F46E5; font-weight: 800; }
.a3-trans-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #D1FAE5; color: #065F46; padding: 4px 10px; border-radius: 6px; text-align: center; }
.a3-trans-note { font-size: .72rem; color: #DC2626; font-weight: 700; }
@media (max-width: 520px) { .a3-trans-row { grid-template-columns: 1fr; } .a3-trans-arrow { display: none; } }

.a3-we-line { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 6px; }
.a3-we-from, .a3-we-to { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #F5EEDF; padding: 6px 12px; border-radius: 6px; font-size: 1.05rem; }
.a3-we-from .hi { background: #FEF3C7; color: #92400E; padding: 1px 6px; border-radius: 4px; }
.a3-we-arrow { color: #4F46E5; font-size: 1.3rem; font-weight: 800; }
.a3-we-final { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #D1FAE5; color: #065F46; padding: 8px 18px; border-radius: 8px; box-shadow: 0 0 0 2px #16A36B; font-size: 1.6rem; }
.a3-we-meta { font-size: .85rem; color: #2A2233; text-align: center; margin-top: 6px; }

/* ── A4: Evaluate & Simplify Expressions ── */
.a4-sub-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.a4-sub-row { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: center; background: #fff; padding: 8px 10px; border-radius: 6px; }
.a4-sub-label { font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 800; color: #6F6878; letter-spacing: .04em; text-transform: uppercase; }
.a4-sub-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.1rem; color: #2A2233; }
.a4-sub-val { background: #FEF3C7; color: #92400E; padding: 2px 8px; border-radius: 4px; }
.a4-sub-result { background: #D1FAE5; color: #065F46; padding: 2px 8px; border-radius: 4px; }
.a4-sub-tip { background: #EEF2FF; padding: 8px 12px; border-radius: 6px; font-size: .85rem; color: #2A2233; margin-top: 8px; line-height: 1.5; border-left: 4px solid #4F46E5; }

.a4-like-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.a4-like-card { background: #fff; border-radius: 10px; padding: 12px; border-top: 4px solid transparent; }
.a4-like-card.right { border-top-color: #16A36B; }
.a4-like-card.wrong { border-top-color: #DC2626; }
.a4-like-head { font-weight: 800; font-size: .88rem; margin-bottom: 6px; }
.a4-like-card.right .a4-like-head { color: #16A36B; }
.a4-like-card.wrong .a4-like-head { color: #DC2626; }
.a4-like-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; padding: 4px 8px; background: #F5EEDF; border-radius: 6px; margin: 4px 0; font-size: .95rem; }
.a4-like-eq strong { color: #16A36B; }
.a4-like-msg { font-size: .82rem; color: #2A2233; line-height: 1.45; margin-top: 6px; }
@media (max-width: 520px) { .a4-like-wrap { grid-template-columns: 1fr; } }

.a4-dist-wrap { background: #FBF4EA; border-radius: 10px; padding: 12px; margin-top: 12px; }
.a4-dist-head { font-weight: 800; color: #4F46E5; font-size: .92rem; margin-bottom: 10px; text-align: center; }
.a4-dist-demo { background: #fff; border-radius: 8px; padding: 12px; }
.a4-dist-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; }
.a4-dist-pill { padding: 6px 10px; border-radius: 6px; }
.a4-dist-pill.outer { background: #FCE7F3; color: #BE185D; font-size: 1.2rem; }
.a4-dist-pill.inner { background: #DBEAFE; color: #1E40AF; }
.a4-dist-paren { font-size: 1.4rem; color: #4F46E5; }
.a4-dist-op { color: #4F46E5; font-size: 1.1rem; }
.a4-dist-arrow { color: #4F46E5; font-size: 1.3rem; }
.a4-dist-result { background: #D1FAE5; color: #065F46; padding: 8px 14px; border-radius: 8px; box-shadow: 0 0 0 2px #16A36B; font-size: 1.2rem; }
.a4-dist-msg { font-size: .82rem; color: #6F6878; text-align: center; margin-top: 8px; font-style: italic; }

.a4-we-sub { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.a4-we-from { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.1rem; }
.a4-we-to { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.2rem; background: #F5EEDF; padding: 6px 12px; border-radius: 6px; }
.a4-we-val { background: #FEF3C7; color: #92400E; padding: 2px 6px; border-radius: 4px; }
.a4-we-arrow { color: #4F46E5; font-size: 1.2rem; font-weight: 800; }
.a4-we-mul-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.a4-we-mul-pair { display: flex; align-items: center; gap: 8px; }
.a4-we-mchip { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #DBEAFE; color: #1E40AF; padding: 4px 10px; border-radius: 6px; font-size: 1rem; }
.a4-we-mres { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #FEF3C7; color: #92400E; padding: 4px 12px; border-radius: 6px; font-size: 1.1rem; }
.a4-we-add { display: flex; align-items: center; justify-content: center; gap: 10px; }
.a4-we-final { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #D1FAE5; color: #065F46; padding: 8px 18px; border-radius: 8px; box-shadow: 0 0 0 2px #16A36B; font-size: 1.6rem; }

/* ── A5: Equations Balance ── */
.a5-bal-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; text-align: center; }
.a5-bal-svg { max-width: 400px; width: 100%; height: auto; }
.a5-bal-tag { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.a5-bal-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.1rem; background: #F5EEDF; padding: 4px 10px; border-radius: 6px; }
.a5-bal-arrow { color: #4F46E5; font-weight: 800; }
.a5-bal-sol { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #D1FAE5; color: #065F46; padding: 4px 12px; border-radius: 6px; box-shadow: 0 0 0 2px #16A36B; }
.a5-bal-check { font-size: .82rem; color: #6F6878; font-style: italic; }

.a5-inv-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.a5-inv-pair { display: grid; grid-template-columns: 60px 30px 60px 1fr; gap: 10px; align-items: center; background: #fff; padding: 8px 10px; border-radius: 8px; }
.a5-inv-op { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.6rem; text-align: center; color: #4F46E5; background: #EEF2FF; padding: 4px; border-radius: 6px; }
.a5-inv-arrow { text-align: center; color: #4F46E5; font-size: 1.2rem; font-weight: 800; }
.a5-inv-msg { font-size: .85rem; color: #2A2233; }

.a5-warn { background: #FEF2F2; border: 2px solid #DC2626; border-radius: 10px; padding: 12px; margin-top: 12px; }
.a5-warn-head { font-weight: 800; color: #DC2626; font-size: .9rem; margin-bottom: 6px; }
.a5-warn-bad { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; color: #DC2626; font-size: .88rem; margin-bottom: 4px; }
.a5-warn-good { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; color: #16A36B; font-size: .88rem; }

.a5-we-id, .a6-we-id { background: #FBF4EA; padding: 10px 14px; border-radius: 8px; font-size: .95rem; color: #2A2233; }
.a5-we-tag, .a6-we-tag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; padding: 3px 8px; border-radius: 4px; font-size: .9rem; }
.a5-we-tag.op-old, .a6-we-tag.op-old { background: #FEE2E2; color: #DC2626; }
.a5-we-tag.op-new, .a6-we-tag.op-new { background: #DBEAFE; color: #1E40AF; }
.a5-we-bal, .a6-we-bal { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.a5-we-bal-row, .a6-we-bal-row { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 10px; align-items: center; padding: 6px; }
.a5-we-bal-row.op, .a6-we-bal-row.op { padding-top: 0; padding-bottom: 0; }
.a5-we-bal-row.result, .a6-we-bal-row.result { border-top: 2px solid #2A2233; padding-top: 8px; margin-top: 4px; }
.a5-we-bal-side, .a6-we-bal-side { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.3rem; text-align: center; color: #2A2233; }
.a5-we-bal-side.res, .a6-we-bal-side.res { background: #D1FAE5; color: #065F46; padding: 4px 12px; border-radius: 6px; box-shadow: 0 0 0 2px #16A36B; }
.a5-we-bal-eq, .a6-we-bal-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.5rem; text-align: center; color: #4F46E5; }
.a5-we-check-eq, .a6-we-check-eq { display: flex; align-items: center; justify-content: center; gap: 8px; }
.a5-we-check-chip, .a6-we-check-chip { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #FEF3C7; color: #92400E; padding: 4px 10px; border-radius: 6px; font-size: 1.1rem; }
.a5-we-check-op, .a6-we-check-op { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; color: #4F46E5; font-size: 1.2rem; }
.a5-we-check-eq-sym, .a6-we-check-eq-sym { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; color: #4F46E5; font-size: 1.2rem; }
.a5-we-check-ok, .a6-we-check-ok { color: #16A36B; font-weight: 800; font-size: 1.4rem; }

/* ── A6: Equations all operations ── */
.a6-pair-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a6-pair-card { background: #fff; border-radius: 10px; padding: 12px; border-top: 4px solid transparent; }
.a6-pair-card.add { border-top-color: #16A36B; }
.a6-pair-card.mul { border-top-color: #4F46E5; }
.a6-pair-head { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.2rem; text-align: center; margin-bottom: 10px; }
.a6-pair-card.add .a6-pair-head { color: #16A36B; }
.a6-pair-card.mul .a6-pair-head { color: #4F46E5; }
.a6-pair-row { display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr; gap: 6px; align-items: center; background: #FBF4EA; padding: 6px 8px; border-radius: 6px; margin: 4px 0; }
.a6-pair-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: .92rem; text-align: center; }
.a6-pair-arrow { text-align: center; color: #4F46E5; font-weight: 800; }
.a6-pair-step { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: .82rem; text-align: center; color: #92400E; background: #FEF3C7; padding: 2px 6px; border-radius: 4px; }
.a6-pair-sol { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: .92rem; text-align: center; color: #065F46; background: #D1FAE5; padding: 4px 8px; border-radius: 4px; }
@media (max-width: 520px) { .a6-pair-wrap { grid-template-columns: 1fr; } .a6-pair-row { grid-template-columns: 1fr; } .a6-pair-arrow { display: none; } }

.a6-trap-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.a6-trap-card { background: #fff; border-radius: 10px; padding: 12px; border-top: 4px solid transparent; }
.a6-trap-card.right { border-top-color: #16A36B; }
.a6-trap-card.wrong { border-top-color: #DC2626; }
.a6-trap-head { font-weight: 800; font-size: .88rem; margin-bottom: 6px; }
.a6-trap-card.right .a6-trap-head { color: #16A36B; }
.a6-trap-card.wrong .a6-trap-head { color: #DC2626; }
.a6-trap-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; padding: 4px 8px; background: #F5EEDF; border-radius: 6px; margin: 4px 0; font-size: .92rem; }
.a6-trap-eq.bad { background: #FEE2E2; color: #DC2626; }
.a6-trap-eq strong { color: #16A36B; }
.a6-trap-msg { font-size: .82rem; color: #2A2233; margin-top: 6px; line-height: 1.45; }
@media (max-width: 520px) { .a6-trap-wrap { grid-template-columns: 1fr; } }

.a6-frac-note { margin-top: 12px; background: #EEF2FF; padding: 10px 12px; border-radius: 8px; font-size: .85rem; color: #2A2233; border-left: 4px solid #4F46E5; }
.a6-frac-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0; }
.a6-frac-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #F5EEDF; padding: 4px 10px; border-radius: 6px; }
.a6-frac-arrow { color: #4F46E5; font-weight: 800; }
.a6-frac-sol { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #D1FAE5; color: #065F46; padding: 4px 10px; border-radius: 6px; box-shadow: 0 0 0 2px #16A36B; }

/* ── A7: Inequalities ── */
.a7-syms-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.a7-sym-card { background: #fff; border-radius: 10px; padding: 12px; text-align: center; border-top: 4px solid #4F46E5; }
.a7-sym-glyph { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 2.6rem; color: #4F46E5; line-height: 1; }
.a7-sym-name { font-weight: 800; font-size: .85rem; color: #2A2233; margin-top: 4px; }
.a7-sym-ex { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: .92rem; background: #EEF2FF; color: #4F46E5; padding: 2px 8px; border-radius: 4px; margin: 4px 0; display: inline-block; }
.a7-sym-msg { font-size: .72rem; color: #6F6878; font-style: italic; }
.a7-syms-note { background: #fff; padding: 10px 12px; border-radius: 8px; margin-top: 12px; font-size: .85rem; color: #2A2233; line-height: 1.5; border-left: 4px solid #F59E0B; }
@media (max-width: 520px) { .a7-syms-wrap { grid-template-columns: 1fr 1fr; } }

.a7-graph-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.a7-graph-card { background: #fff; border-radius: 10px; padding: 12px; border-top: 4px solid transparent; }
.a7-graph-card.open { border-top-color: #16A36B; }
.a7-graph-card.closed { border-top-color: #BE185D; }
.a7-graph-head { font-weight: 800; font-size: .88rem; margin-bottom: 4px; }
.a7-graph-card.open .a7-graph-head { color: #16A36B; }
.a7-graph-card.closed .a7-graph-head { color: #BE185D; }
.a7-graph-msg { font-size: .78rem; color: #6F6878; font-style: italic; margin-bottom: 6px; }
.a7-graph-svg { width: 100%; height: auto; }
.a7-graph-ex { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; text-align: center; background: #F5EEDF; padding: 4px; border-radius: 4px; margin-top: 6px; }
.a7-graph-warn { background: #FEF3C7; padding: 10px 12px; border-radius: 8px; margin-top: 10px; font-size: .82rem; color: #2A2233; line-height: 1.5; border-left: 4px solid #F59E0B; }
@media (max-width: 520px) { .a7-graph-wrap { grid-template-columns: 1fr; } }

.a7-we-bal { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.a7-we-bal-row { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 10px; align-items: center; padding: 6px; }
.a7-we-bal-row.op { padding-top: 0; padding-bottom: 0; }
.a7-we-bal-row.result { border-top: 2px solid #2A2233; padding-top: 8px; margin-top: 4px; }
.a7-we-bal-side { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.3rem; text-align: center; color: #2A2233; }
.a7-we-bal-side.res { background: #D1FAE5; color: #065F46; padding: 4px 12px; border-radius: 6px; box-shadow: 0 0 0 2px #16A36B; }
.a7-we-bal-eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.5rem; text-align: center; color: #4F46E5; }
.a7-we-tag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; padding: 3px 8px; border-radius: 4px; font-size: .9rem; }
.a7-we-tag.op-new { background: #DBEAFE; color: #1E40AF; }
.a7-we-graph { width: 100%; height: auto; max-width: 380px; display: block; margin: 0 auto; background: #FBF4EA; border-radius: 8px; padding: 6px; box-sizing: border-box; }
.a7-we-meta { font-size: .85rem; color: #2A2233; text-align: center; margin-top: 6px; line-height: 1.45; }

/* ── A8: Variables/Patterns/Tables/Graphs ── */
.a8-vars-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; }
.a8-vars-flow { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; background: #fff; border-radius: 10px; padding: 14px; }
.a8-vars-step { flex: 1 1 180px; max-width: 220px; padding: 12px; border-radius: 10px; text-align: center; border-top: 4px solid transparent; }
.a8-vars-step.input  { background: #FCE7F3; border-top-color: #BE185D; }
.a8-vars-step.output { background: #D1FAE5; border-top-color: #16A36B; }
.a8-vars-tag { font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .06em; color: #fff; padding: 3px 8px; border-radius: 4px; display: inline-block; }
.a8-vars-step.input  .a8-vars-tag { background: #BE185D; }
.a8-vars-step.output .a8-vars-tag { background: #16A36B; }
.a8-vars-name { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1rem; margin-top: 6px; color: #2A2233; }
.a8-vars-msg { font-size: .78rem; color: #6F6878; font-style: italic; margin-top: 4px; }
.a8-vars-arrow { font-size: 2rem; color: #4F46E5; font-weight: 800; }
.a8-vars-examples { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.a8-vars-ex { display: grid; grid-template-columns: 1fr 30px 1fr; gap: 8px; align-items: center; background: #fff; padding: 8px 12px; border-radius: 8px; }
.a8-vars-ex-in { background: #FCE7F3; color: #BE185D; padding: 4px 10px; border-radius: 6px; font-weight: 700; text-align: center; }
.a8-vars-ex-arrow { text-align: center; color: #4F46E5; font-weight: 800; }
.a8-vars-ex-out { background: #D1FAE5; color: #065F46; padding: 4px 10px; border-radius: 6px; font-weight: 700; text-align: center; }
@media (max-width: 520px) { .a8-vars-arrow { transform: rotate(90deg); } }

.a8-tab-wrap { background: #FBF4EA; border-radius: 14px; padding: 14px; margin: 12px 0; }
.a8-tab-grid { display: grid; grid-template-columns: 60px repeat(4, 1fr); gap: 4px; background: #2A2233; padding: 4px; border-radius: 8px; }
.a8-tab-head { background: #4F46E5; color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; padding: 8px; text-align: center; border-radius: 4px; }
.a8-tab-cell { background: #fff; padding: 8px; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; border-radius: 4px; }
.a8-tab-cell.hi { background: #FEF3C7; color: #92400E; }
.a8-tab-arrow { text-align: center; color: #4F46E5; font-weight: 800; font-size: .85rem; margin: 10px 0; }
.a8-tab-rule { text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: 1.6rem; background: #D1FAE5; color: #065F46; padding: 10px; border-radius: 8px; box-shadow: 0 0 0 2px #16A36B; }
.a8-tab-check { background: #fff; border-radius: 10px; padding: 12px; margin-top: 12px; }
.a8-tab-check-head { font-weight: 800; color: #16A36B; font-size: .9rem; margin-bottom: 6px; }
.a8-tab-check-row { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: .88rem; padding: 4px 8px; background: #ECFDF5; border-radius: 4px; margin: 3px 0; color: #065F46; }
.a8-tab-warn { background: #FEF3C7; padding: 10px 12px; border-radius: 8px; margin-top: 12px; font-size: .82rem; color: #2A2233; line-height: 1.5; border-left: 4px solid #F59E0B; }

.a8-we-vars { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.a8-we-var { padding: 10px; border-radius: 8px; text-align: center; border-top: 4px solid transparent; flex: 1 1 160px; max-width: 200px; }
.a8-we-var.input { background: #FCE7F3; border-top-color: #BE185D; }
.a8-we-var.output { background: #D1FAE5; border-top-color: #16A36B; }
.a8-we-var-tag { font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 800; color: #fff; padding: 2px 8px; border-radius: 4px; display: inline-block; }
.a8-we-var.input  .a8-we-var-tag { background: #BE185D; }
.a8-we-var.output .a8-we-var-tag { background: #16A36B; }
.a8-we-var-name { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; font-size: .92rem; margin-top: 4px; }
.a8-we-var-msg { font-size: .75rem; color: #6F6878; font-style: italic; }
.a8-we-var-arrow { font-size: 1.6rem; color: #4F46E5; font-weight: 800; }
.a8-we-eq, .a8-we-sub { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 6px; }
.a8-we-eq-chip { font-family: 'Inter', sans-serif; font-weight: 700; font-size: .9rem; background: #DBEAFE; color: #1E40AF; padding: 4px 10px; border-radius: 6px; }
.a8-we-eq-op { font-family: 'JetBrains Mono', ui-monospace, monospace; color: #4F46E5; font-weight: 800; font-size: 1.2rem; }
.a8-we-eq-arrow { color: #4F46E5; font-size: 1.2rem; font-weight: 800; }
.a8-we-eq-final { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #D1FAE5; color: #065F46; padding: 6px 16px; border-radius: 8px; box-shadow: 0 0 0 2px #16A36B; font-size: 1.3rem; }
.a8-we-tab { display: grid; grid-template-columns: 90px repeat(4, 1fr); gap: 4px; background: #2A2233; padding: 4px; border-radius: 8px; margin: 8px 0; }
.a8-we-tab-head { background: #4F46E5; color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; padding: 6px; text-align: center; border-radius: 4px; font-size: .85rem; }
.a8-we-tab-cell { background: #fff; padding: 8px; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; border-radius: 4px; }
.a8-we-tab-cell.hi { background: #FEF3C7; color: #92400E; box-shadow: 0 0 0 2px #F59E0B inset; }
.a8-we-sub-chip { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #F5EEDF; padding: 6px 12px; border-radius: 6px; font-size: 1.05rem; }
.a8-we-sub-arrow { color: #4F46E5; font-weight: 800; font-size: 1.3rem; }
.a8-we-sub-final { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; background: #D1FAE5; color: #065F46; padding: 8px 18px; border-radius: 8px; box-shadow: 0 0 0 2px #16A36B; font-size: 1.6rem; }

/* ════════════════════════════════════════════════════════════════════
   ★ MAGAZINE UI — APP-WIDE THEME (every screen)
   Topbar + sidebar + main + all screen styles, ported from prototype.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --mag-cream: #FBF4EA;
  --mag-cream-2: #F5EEDF;
  --mag-ink: #2A2233;
  --mag-ink-soft: #4A3F58;
  --mag-muted: #6F6878;
  --mag-line: #E5DCC4;
  --mag-indigo: #4F46E5;
  --mag-indigo-soft: #EEF2FF;
  --mag-pink: #BE185D;
  --mag-pink-soft: #FCE7F3;
  --mag-blue: #1E40AF;
  --mag-blue-soft: #DBEAFE;
  --mag-green: #16A36B;
  --mag-green-soft: #D1FAE5;
  --mag-amber: #F59E0B;
  --mag-amber-soft: #FEF3C7;
  --mag-red: #DC2626;
  --mag-red-soft: #FEE2E2;
  --mag-purple: #7C3AED;
  --mag-purple-soft: #EDE9FE;
}

/* Reset the app container so the new shell can take over the full viewport */
body { background: #FBF4EA !important; min-height: 100vh; min-width: 1100px; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
#app { max-width: none !important; padding: 0 !important; min-height: 100vh; }
#app.app-fullbleed { max-width: none !important; padding: 0 !important; }
#screen-container { padding-bottom: 0 !important; }

/* ── App shell ─────────────────────────────────────────────── */
.app-shell { display: grid; grid-template-rows: 64px 1fr; min-height: 100vh; background: var(--mag-cream); }
.app-topbar {
  background: #fff; border-bottom: 1px solid var(--mag-line);
  display: grid; grid-template-columns: 240px 1fr auto; align-items: center;
  padding: 0 22px 0 0;
}
.app-brand {
  padding: 0 22px;
  font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 900; color: var(--mag-ink);
  display: flex; align-items: center; gap: 8px; height: 64px;
  cursor: pointer; text-decoration: none;
}
.app-brand em { color: var(--mag-pink); font-style: italic; }
.app-brand-ar { font-size: .75rem; color: var(--mag-muted); direction: rtl; margin-left: 8px; font-weight: 600; }
.app-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--mag-muted); font-weight: 600;
}
.app-breadcrumb a { color: var(--mag-muted); text-decoration: none; cursor: pointer; }
.app-breadcrumb a:hover { color: var(--mag-ink); }
.app-breadcrumb .crumb-sep { opacity: .4; }
.app-breadcrumb .crumb-current { color: var(--mag-ink); font-weight: 700; }
.app-topbar-actions { display: flex; align-items: center; gap: 10px; }
.app-search {
  background: var(--mag-cream); border: 1px solid var(--mag-line); border-radius: 99px;
  padding: 7px 14px; font-size: .82rem; color: var(--mag-muted); width: 240px;
  display: flex; align-items: center; gap: 8px;
}
.app-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--mag-cream); border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; color: var(--mag-ink-soft); position: relative;
}
.app-icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--mag-red); }
.app-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--mag-pink-soft);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  border: 2px solid var(--mag-pink); cursor: pointer;
}
.app-body { display: grid; grid-template-columns: 240px 1fr; min-height: 0; }
.app-body.with-right { grid-template-columns: 240px 1fr 320px; }

.app-sidebar { background: #fff; border-right: 1px solid var(--mag-line); padding: 18px 14px; display: flex; flex-direction: column; }
.app-side-section { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .62rem; font-weight: 800; letter-spacing: .1em; color: var(--mag-muted); text-transform: uppercase; padding: 14px 12px 8px; }
.app-side-item {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  text-decoration: none; color: var(--mag-ink-soft);
  font-size: .9rem; font-weight: 600; cursor: pointer; margin-bottom: 2px;
}
.app-side-item:hover { background: var(--mag-cream); }
.app-side-item.active { background: var(--mag-indigo); color: #fff; box-shadow: 0 4px 14px -2px rgba(79, 70, 229, .35); }
.app-side-icon { font-size: 1.1rem; text-align: center; }
.app-side-badge { background: var(--mag-amber); color: #fff; padding: 2px 8px; border-radius: 99px; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: .68rem; }
.app-side-item.active .app-side-badge { background: #fff; color: var(--mag-indigo); }
.app-side-bottom { margin-top: auto; }

.app-main { background: var(--mag-cream); overflow-y: auto; min-height: 0; padding: 28px 36px; }
.app-main h1.page-title { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 800; color: var(--mag-ink); line-height: 1.1; letter-spacing: -.02em; }
.app-main p.page-sub { font-size: .92rem; color: var(--mag-muted); margin-top: 4px; }
.app-main p.page-sub-ar { direction: rtl; font-size: .82rem; color: var(--mag-muted); margin-top: 2px; }

/* ── Magazine primitives shared across screens ─────────────── */
.mag-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: var(--mag-indigo); text-transform: uppercase; margin-bottom: 6px; }
.mag-card-tag { font-family: 'JetBrains Mono', monospace; font-size: .65rem; font-weight: 800; letter-spacing: .08em; background: var(--mag-cream-2); color: var(--mag-ink-soft); padding: 4px 10px; border-radius: 4px; text-transform: uppercase; display: inline-block; }
.mag-card-tag.indigo { background: var(--mag-indigo-soft); color: var(--mag-indigo); }
.mag-card-tag.pink   { background: var(--mag-pink-soft);   color: var(--mag-pink); }
.mag-card-tag.blue   { background: var(--mag-blue-soft);   color: var(--mag-blue); }
.mag-card-tag.green  { background: var(--mag-green-soft);  color: var(--mag-green); }
.mag-card-tag.amber  { background: var(--mag-amber-soft);  color: #92400E; }
.mag-card-tag.purple { background: var(--mag-purple-soft); color: var(--mag-purple); }

.mag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 22px; border-radius: 99px; font-family: 'Inter', sans-serif; font-weight: 800; font-size: .88rem; border: 0; cursor: pointer; transition: all .15s; text-decoration: none; }
.mag-btn-primary { background: var(--mag-indigo); color: #fff; box-shadow: 0 4px 14px -2px rgba(79, 70, 229, .35); }
.mag-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -2px rgba(79, 70, 229, .45); }
.mag-btn-ghost { background: #fff; color: var(--mag-ink); border: 1.5px solid var(--mag-line); }
.mag-btn-ghost:hover { border-color: var(--mag-indigo); color: var(--mag-indigo); }
.mag-btn-lg { padding: 14px 30px; font-size: .95rem; }
.mag-btn-block { width: 100%; }

/* ── WELCOME / LANDING ─────────────────────────────────────── */
.land-shell { min-height: 100vh; background: linear-gradient(180deg, #FCE7F3 0%, var(--mag-cream) 40%); }
.land-topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 60px; }
.land-brand { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 900; cursor: pointer; }
.land-brand em { color: var(--mag-pink); font-style: italic; }
.land-topbar-cta { display: flex; gap: 14px; align-items: center; }
.land-topbar-cta a { font-weight: 700; font-size: .88rem; color: var(--mag-ink); text-decoration: none; cursor: pointer; }
.land-hero { padding: 60px 80px 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; max-width: 1400px; margin: 0 auto; }
.land-hero h1 { font-family: 'Playfair Display', serif; font-size: 4.2rem; font-weight: 900; line-height: 1; letter-spacing: -.025em; color: var(--mag-ink); }
.land-hero h1 em { color: var(--mag-pink); font-style: italic; }
.land-hero-ar { font-size: 2rem; color: var(--mag-pink); font-weight: 800; margin-top: 12px; direction: rtl; }
.land-hero-tag { margin-top: 24px; font-size: 1.1rem; line-height: 1.5; color: var(--mag-ink-soft); max-width: 500px; }
.land-hero-ctas { margin-top: 32px; display: flex; gap: 12px; }
.land-hero-visual { background: #fff; border-radius: 24px; padding: 24px; box-shadow: 0 20px 50px -10px rgba(190, 24, 93, .15); position: relative; }
.land-hero-card { background: var(--mag-cream); border-radius: 16px; padding: 18px; }
.land-hero-card + .land-hero-card { margin-top: 10px; }
.land-hero-card-h { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 800; color: var(--mag-indigo); letter-spacing: .08em; }
.land-hero-card-t { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 800; color: var(--mag-ink); margin-top: 4px; }
.land-pillars { padding: 30px 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1400px; margin: 0 auto; }
.land-pillar { background: #fff; border-radius: 18px; padding: 26px; border-top: 5px solid; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.land-pillar.math { border-top-color: var(--mag-indigo); }
.land-pillar-icon { font-size: 2.4rem; }
.land-pillar-name { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 800; color: var(--mag-ink); margin-top: 8px; }
.land-pillar-ar { font-size: .92rem; color: var(--mag-muted); direction: rtl; }
.land-pillar-desc { margin-top: 10px; font-size: .88rem; color: var(--mag-ink-soft); line-height: 1.5; }
.land-features { padding: 30px 80px 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1400px; margin: 0 auto; }
.land-feat { background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.land-feat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 12px; }
.land-feat-icon.a { background: var(--mag-amber-soft); color: #92400E; }
.land-feat-icon.b { background: var(--mag-purple-soft); color: var(--mag-purple); }
.land-feat-icon.c { background: var(--mag-blue-soft); color: var(--mag-blue); }
.land-feat-title { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 800; color: var(--mag-ink); }
.land-feat-desc { font-size: .88rem; color: var(--mag-muted); margin-top: 6px; line-height: 1.5; }

/* ── ONBOARDING / PROFILE ──────────────────────────────────── */
.onb-shell { display: grid; grid-template-rows: 64px 1fr; min-height: 100vh; background: var(--mag-cream); }
.onb-body { display: flex; align-items: center; justify-content: center; padding: 40px; }
.onb-card { background: #fff; border-radius: 24px; padding: 40px 48px; max-width: 720px; width: 100%; box-shadow: 0 8px 32px -8px rgba(0,0,0,.08); }
.onb-steps { display: flex; gap: 6px; margin-bottom: 22px; }
.onb-step { flex: 1; height: 5px; background: var(--mag-cream-2); border-radius: 99px; }
.onb-step.active { background: var(--mag-indigo); }
.onb-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 800; letter-spacing: .1em; color: var(--mag-muted); text-transform: uppercase; }
.onb-title { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 800; color: var(--mag-ink); line-height: 1.1; margin-top: 6px; letter-spacing: -.02em; }
.onb-sub-ar { direction: rtl; font-size: 1.05rem; color: var(--mag-muted); margin-top: 4px; }
.onb-grid { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.onb-section-head { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: var(--mag-ink-soft); text-transform: uppercase; margin-bottom: 10px; }
.onb-avatars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.onb-av { aspect-ratio: 1; background: var(--mag-cream); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; cursor: pointer; border: 2px solid transparent; }
.onb-av.selected { border-color: var(--mag-indigo); background: var(--mag-indigo-soft); }
.onb-field { margin-bottom: 16px; }
.onb-label { font-size: .8rem; font-weight: 700; color: var(--mag-ink-soft); margin-bottom: 6px; }
.onb-input { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--mag-line); background: #fff; font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--mag-ink); }
.onb-input:focus { border-color: var(--mag-indigo); outline: 0; }
.onb-grade { display: flex; gap: 10px; }
.onb-grade-pill { flex: 1; padding: 12px; border-radius: 12px; background: var(--mag-cream); border: 1.5px solid var(--mag-line); text-align: center; cursor: pointer; }
.onb-grade-pill.selected { background: var(--mag-indigo); color: #fff; border-color: var(--mag-indigo); }
.onb-grade-pill .g { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 800; }
.onb-grade-pill .l { font-size: .75rem; opacity: .85; }
.onb-foot { margin-top: 30px; display: flex; justify-content: space-between; align-items: center; }
.onb-back-link { color: var(--mag-muted); font-weight: 600; font-size: .88rem; text-decoration: none; cursor: pointer; }

/* ── DASHBOARD ─────────────────────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; margin-top: 22px; }
.dash-hero { background: linear-gradient(135deg, var(--mag-indigo) 0%, #6D5BFF 100%); border-radius: 18px; padding: 30px; color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; }
.dash-hero-tag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: .65rem; font-weight: 800; letter-spacing: .1em; background: rgba(255,255,255,.18); padding: 4px 10px; border-radius: 4px; }
.dash-hero-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 800; margin-top: 10px; line-height: 1.15; }
.dash-hero-meta { font-size: .92rem; opacity: .85; margin-top: 4px; }
.dash-hero-cta { background: #fff; color: var(--mag-indigo); padding: 12px 22px; border-radius: 99px; border: 0; font-weight: 800; font-size: .92rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; }
.dash-streak { background: linear-gradient(135deg, var(--mag-amber-soft), #FED7AA); border-radius: 18px; padding: 22px; text-align: center; }
.dash-streak-flame { font-size: 2.6rem; line-height: 1; }
.dash-streak-num { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 2.4rem; color: #92400E; line-height: 1; margin-top: 4px; }
.dash-streak-lbl { font-size: .85rem; color: #92400E; font-weight: 700; }
.dash-streak-dots { display: flex; gap: 4px; justify-content: center; margin-top: 12px; }
.dash-streak-dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 800; color: #92400E; }
.dash-streak-dot.done { background: var(--mag-amber); color: #fff; }
.dash-subs { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dash-sub { background: #fff; border-radius: 18px; padding: 22px; border-top: 5px solid var(--mag-indigo); box-shadow: 0 1px 3px rgba(0,0,0,.04); cursor: pointer; transition: transform .15s; }
.dash-sub:hover { transform: translateY(-2px); }
.dash-sub-head { display: flex; justify-content: space-between; align-items: center; }
.dash-sub-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: var(--mag-indigo-soft); }
.dash-sub-pct { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 2.2rem; color: var(--mag-ink); line-height: 1; }
.dash-sub-name { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.3rem; color: var(--mag-ink); margin-top: 14px; }
.dash-sub-ar { font-size: .85rem; color: var(--mag-muted); direction: rtl; font-weight: 600; font-family: 'Inter', sans-serif; }
.dash-sub-meta { font-size: .82rem; color: var(--mag-muted); margin: 10px 0 8px; }
.dash-sub-bar { height: 6px; background: var(--mag-cream-2); border-radius: 99px; overflow: hidden; }
.dash-sub-bar > div { height: 100%; border-radius: 99px; background: var(--mag-indigo); }
.dash-2col { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.dash-section-head { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: var(--mag-muted); text-transform: uppercase; margin-bottom: 12px; }
.dash-section-head strong { color: var(--mag-ink); }
.dash-recent-card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.dash-recent-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--mag-line); }
.dash-recent-item:last-child { border-bottom: 0; }
.dash-recent-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--mag-cream-2); }
.dash-recent-name { font-weight: 700; font-size: .92rem; color: var(--mag-ink); }
.dash-recent-sub { font-size: .74rem; color: var(--mag-muted); margin-top: 2px; }
.dash-recent-score { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: .82rem; padding: 4px 10px; border-radius: 99px; }
.dash-recent-score.high { background: var(--mag-green-soft); color: var(--mag-green); }
.dash-recent-score.mid  { background: var(--mag-amber-soft); color: #92400E; }
.dash-recent-score.low  { background: var(--mag-red-soft); color: var(--mag-red); }
.dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-tile { background: var(--mag-cream-2); border-radius: 12px; padding: 16px; text-align: center; }
.dash-tile-icon { font-size: 1.5rem; }
.dash-tile-num { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.7rem; color: var(--mag-ink); margin-top: 4px; line-height: 1; }
.dash-tile-lbl { font-size: .72rem; color: var(--mag-muted); margin-top: 4px; }

/* ── SUBJECTS browser (Math levels — grouped by foundation) ──────────────── */
.subj-section { margin-top: 32px; }
.subj-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 4px 14px; border-bottom: 1px solid var(--mag-line); margin-bottom: 6px; flex-wrap: wrap; }
.subj-section-title { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.55rem; color: var(--mag-ink); line-height: 1.1; }
.subj-section-title-ar { font-size: .92rem; color: var(--mag-muted); direction: rtl; margin-top: 4px; font-weight: 600; }
.subj-section-meta { font-family: 'JetBrains Mono', monospace; font-size: .74rem; font-weight: 800; color: var(--mag-muted); background: var(--mag-cream-2); padding: 6px 12px; border-radius: 99px; letter-spacing: .04em; text-transform: uppercase; }
.subj-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.subj-grid-1 { grid-template-columns: minmax(280px, 420px); }
.subj-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .subj-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.subj-card { background: #fff; border-radius: 22px; padding: 28px; border-top: 6px solid var(--mag-indigo); box-shadow: 0 2px 10px rgba(0,0,0,.04); position: relative; overflow: hidden; cursor: pointer; transition: transform .15s; }
.subj-card:hover { transform: translateY(-3px); }
.subj-card.beginner { border-top-color: var(--mag-green); }
.subj-card.medium { border-top-color: var(--mag-amber); }
.subj-card.advanced { border-top-color: var(--mag-pink); }
.subj-card.g5 { border-top-color: var(--mag-blue); }
.subj-card::after { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; border-radius: 50%; background: var(--mag-indigo); opacity: .07; }
.subj-card.beginner::after { background: var(--mag-green); }
.subj-card.medium::after { background: var(--mag-amber); }
.subj-card.advanced::after { background: var(--mag-pink); }
.subj-card.g5::after { background: var(--mag-blue); }
.subj-card-head { display: flex; align-items: center; gap: 16px; position: relative; }
.subj-card-icon { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; flex-shrink: 0; background: var(--mag-indigo-soft); }
.subj-card.beginner .subj-card-icon { background: var(--mag-green-soft); }
.subj-card.medium .subj-card-icon { background: var(--mag-amber-soft); }
.subj-card.advanced .subj-card-icon { background: var(--mag-pink-soft); }
.subj-card.g5 .subj-card-icon { background: var(--mag-blue-soft); }
.subj-card-name { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.6rem; color: var(--mag-ink); line-height: 1.1; }
.subj-card-ar { font-size: 1rem; color: var(--mag-muted); direction: rtl; margin-top: 4px; }
.subj-card-meta { font-size: .85rem; color: var(--mag-muted); margin-top: 4px; }
.subj-card-overall { margin-top: 20px; padding: 16px; background: var(--mag-cream); border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.subj-card-overall-lbl { font-size: .78rem; color: var(--mag-muted); font-weight: 700; }
.subj-card-overall-pct { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.8rem; color: var(--mag-ink); line-height: 1; }
.subj-card-overall-bar { width: 100px; height: 8px; background: var(--mag-line); border-radius: 99px; margin-top: 6px; overflow: hidden; }
.subj-card-overall-bar > div { height: 100%; border-radius: 99px; background: var(--mag-indigo); }
.subj-card.beginner .subj-card-overall-bar > div { background: var(--mag-green); }
.subj-card.medium .subj-card-overall-bar > div { background: var(--mag-amber); }
.subj-card.advanced .subj-card-overall-bar > div { background: var(--mag-pink); }
.subj-card.g5 .subj-card-overall-bar > div { background: var(--mag-blue); }

/* ── CHAPTER LIST ──────────────────────────────────────────── */
.chap-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 28px; margin-top: 22px; }
.chap-sidenav { background: #fff; border-radius: 14px; padding: 16px; height: fit-content; }
.chap-sidenav-h { font-family: 'JetBrains Mono', monospace; font-size: .62rem; font-weight: 800; letter-spacing: .1em; color: var(--mag-muted); text-transform: uppercase; padding: 6px 8px 8px; }
.chap-sidenav-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--mag-ink-soft); }
.chap-sidenav-item.active { background: var(--mag-indigo-soft); color: var(--mag-indigo); font-weight: 700; }
.chap-sidenav-item:hover:not(.active) { background: var(--mag-cream); }
.chap-sidenav-item .ct { font-family: 'JetBrains Mono', monospace; font-size: .72rem; opacity: .7; }
.chap-list { display: flex; flex-direction: column; gap: 12px; }
.chap-row { background: #fff; border-radius: 14px; padding: 18px 22px; display: grid; grid-template-columns: 60px 1fr auto auto; gap: 18px; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.04); border-left: 5px solid transparent; cursor: pointer; transition: transform .15s; }
.chap-row:hover { transform: translateX(2px); }
.chap-row.done { border-left-color: var(--mag-green); }
.chap-row.now  { border-left-color: var(--mag-indigo); background: linear-gradient(90deg, var(--mag-indigo-soft) 0%, #fff 35%); }
.chap-row-icon { width: 60px; height: 60px; border-radius: 14px; background: var(--mag-cream-2); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.chap-row.done .chap-row-icon { background: var(--mag-green-soft); }
.chap-row.now  .chap-row-icon { background: var(--mag-indigo); color: #fff; }
.chap-row-num { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 800; color: var(--mag-muted); letter-spacing: .04em; }
.chap-row-name { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.15rem; color: var(--mag-ink); line-height: 1.2; margin-top: 4px; }
.chap-row-ar { font-size: .82rem; color: var(--mag-muted); direction: rtl; margin-top: 2px; }
.chap-row-meta { display: flex; gap: 14px; margin-top: 8px; font-size: .76rem; color: var(--mag-muted); }
.chap-row-status { text-align: center; }
.chap-row-stars { font-size: 1rem; color: var(--mag-amber); letter-spacing: 2px; }
.chap-row-pct { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: .82rem; margin-top: 4px; }
.chap-row.done .chap-row-pct { color: var(--mag-green); }
.chap-row.now  .chap-row-pct { color: var(--mag-indigo); font-size: 1rem; }
.chap-row-arrow { font-size: 1.5rem; color: var(--mag-muted); }
.chap-final-card { background: linear-gradient(135deg, var(--mag-amber) 0%, #F97316 100%); color: #fff; border-radius: 16px; padding: 22px; margin-top: 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.chap-final-card.locked { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
.chap-final-title { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.2rem; }
.chap-final-meta { font-size: .85rem; opacity: .9; margin-top: 4px; }

/* ── QUIZ ──────────────────────────────────────────────────── */
.quiz-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 28px; margin-top: 22px; }
.quiz-aside { background: #fff; border-radius: 14px; padding: 18px; height: fit-content; }
.quiz-aside-h { font-family: 'JetBrains Mono', monospace; font-size: .62rem; font-weight: 800; letter-spacing: .1em; color: var(--mag-muted); text-transform: uppercase; margin-bottom: 12px; }
.quiz-aside-bar { height: 8px; background: var(--mag-cream-2); border-radius: 99px; overflow: hidden; margin: 8px 0 14px; }
.quiz-aside-bar > div { height: 100%; background: linear-gradient(90deg, var(--mag-indigo), #6D5BFF); border-radius: 99px; }
.quiz-aside-prog { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.6rem; color: var(--mag-ink); }
.quiz-aside-prog small { font-weight: 600; color: var(--mag-muted); font-size: 1rem; }
.quiz-aside-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.quiz-aside-dot { aspect-ratio: 1; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: .75rem; background: var(--mag-cream-2); color: var(--mag-muted); }
.quiz-aside-dot.right { background: var(--mag-green-soft); color: var(--mag-green); }
.quiz-aside-dot.wrong { background: var(--mag-red-soft); color: var(--mag-red); }
.quiz-aside-dot.now { background: var(--mag-indigo); color: #fff; }
.quiz-main { display: flex; flex-direction: column; gap: 18px; }
.quiz-q-card { background: #fff; border-radius: 18px; padding: 32px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.quiz-q-tag { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: var(--mag-indigo); text-transform: uppercase; }
.quiz-q { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.7rem; color: var(--mag-ink); line-height: 1.3; margin-top: 6px; }
.quiz-q-ar { font-size: 1rem; color: var(--mag-muted); direction: rtl; margin-top: 6px; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-opt { background: #fff; border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; border: 2px solid var(--mag-line); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: all .15s; }
.quiz-opt:hover { border-color: var(--mag-indigo); transform: translateY(-1px); }
.quiz-opt.selected { border-color: var(--mag-indigo); background: var(--mag-indigo-soft); }
.quiz-opt.right { border-color: var(--mag-green); background: var(--mag-green-soft); }
.quiz-opt.wrong { border-color: var(--mag-red); background: var(--mag-red-soft); }
.quiz-opt-letter { width: 36px; height: 36px; border-radius: 50%; background: var(--mag-cream-2); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 1rem; color: var(--mag-ink-soft); flex-shrink: 0; }
.quiz-opt.selected .quiz-opt-letter { background: var(--mag-indigo); color: #fff; }
.quiz-opt.right .quiz-opt-letter { background: var(--mag-green); color: #fff; }
.quiz-opt.wrong .quiz-opt-letter { background: var(--mag-red); color: #fff; }
.quiz-opt-text { font-weight: 600; color: var(--mag-ink); font-size: 1.05rem; }
.quiz-foot { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.quiz-foot-left { display: flex; gap: 10px; }
.quiz-feedback { background: var(--mag-cream); border-radius: 12px; padding: 14px 18px; font-size: .92rem; color: var(--mag-ink); line-height: 1.5; }
.quiz-feedback.right { background: var(--mag-green-soft); color: #065F46; }
.quiz-feedback.wrong { background: var(--mag-red-soft); color: #991B1B; }

/* ── RESULTS ───────────────────────────────────────────────── */
.res-hero { background: linear-gradient(135deg, var(--mag-green-soft) 0%, var(--mag-cream) 80%); border-radius: 22px; padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; margin-top: 22px; }
.res-hero.mid { background: linear-gradient(135deg, var(--mag-amber-soft) 0%, var(--mag-cream) 80%); }
.res-hero.low { background: linear-gradient(135deg, var(--mag-red-soft) 0%, var(--mag-cream) 80%); }
.res-score-circle { display: flex; align-items: center; gap: 24px; }
.res-score-ring { width: 160px; height: 160px; border-radius: 50%; background: #fff; border: 8px solid var(--mag-green); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 18px -2px rgba(22, 163, 107, .25); flex-shrink: 0; }
.res-hero.mid .res-score-ring { border-color: var(--mag-amber); box-shadow: 0 4px 18px -2px rgba(245, 158, 11, .25); }
.res-hero.low .res-score-ring { border-color: var(--mag-red); box-shadow: 0 4px 18px -2px rgba(220, 38, 38, .25); }
.res-score-num { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 3.5rem; color: var(--mag-green); line-height: 1; }
.res-hero.mid .res-score-num { color: var(--mag-amber); }
.res-hero.low .res-score-num { color: var(--mag-red); }
.res-score-of { font-size: .78rem; font-weight: 800; color: var(--mag-muted); letter-spacing: .08em; }
.res-score-info { flex: 1; }
.res-score-stars { font-size: 1.8rem; color: var(--mag-amber); letter-spacing: 4px; }
.res-title { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.6rem; color: var(--mag-ink); margin-top: 6px; line-height: 1.2; }
.res-sub { font-size: .92rem; color: var(--mag-muted); margin-top: 4px; }
.res-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.res-stat-tile { background: #fff; border-radius: 14px; padding: 18px; text-align: center; }
.res-stat-num { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.8rem; color: var(--mag-ink); line-height: 1; }
.res-stat-lbl { font-size: .72rem; color: var(--mag-muted); margin-top: 6px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.res-2col { margin-top: 22px; display: grid; grid-template-columns: 2fr 1fr; gap: 22px; }
.res-review-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.res-review-row { padding: 12px 0; border-bottom: 1px solid var(--mag-line); display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; }
.res-review-row:last-child { border-bottom: 0; }
.res-review-num { width: 36px; height: 36px; border-radius: 50%; background: var(--mag-red-soft); color: var(--mag-red); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: .82rem; }
.res-review-row.ok .res-review-num { background: var(--mag-green-soft); color: var(--mag-green); }
.res-review-q { font-weight: 700; color: var(--mag-ink); font-size: .92rem; }
.res-review-a { font-size: .78rem; color: var(--mag-muted); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
.res-review-status { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: .72rem; padding: 4px 10px; border-radius: 99px; }
.res-review-status.bad { background: var(--mag-red-soft); color: var(--mag-red); }
.res-review-status.ok  { background: var(--mag-green-soft); color: var(--mag-green); }
.res-actions-card { background: var(--mag-indigo); color: #fff; border-radius: 16px; padding: 24px; }
.res-actions-card h3 { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.3rem; margin-bottom: 8px; }
.res-actions-card p { font-size: .88rem; opacity: .85; line-height: 1.5; margin-bottom: 16px; }
.res-actions-btn { display: block; width: 100%; background: #fff; color: var(--mag-indigo); padding: 12px; border-radius: 12px; border: 0; font-weight: 800; font-size: .9rem; cursor: pointer; margin-bottom: 8px; text-align: center; }
.res-actions-btn:last-child { background: rgba(255,255,255,.15); color: #fff; margin-bottom: 0; }

/* ── PROGRESS ──────────────────────────────────────────────── */
.prog-grid { margin-top: 22px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.prog-chart-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.prog-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.prog-chart-title { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.3rem; color: var(--mag-ink); }
.prog-chart-pill { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 800; color: var(--mag-muted); background: var(--mag-cream); padding: 6px 12px; border-radius: 99px; }
.prog-chart-bars { display: flex; align-items: flex-end; gap: 14px; height: 220px; padding-bottom: 24px; border-bottom: 1px solid var(--mag-line); position: relative; }
.prog-chart-bar { flex: 1; background: var(--mag-indigo); border-radius: 8px 8px 0 0; position: relative; min-height: 6px; }
.prog-chart-bar::after { content: attr(data-d); position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: .72rem; color: var(--mag-muted); font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.prog-chart-bar.weekend { background: var(--mag-cream-2); }
.prog-chart-summary { margin-top: 14px; display: flex; gap: 20px; }
.prog-chart-summary > div { font-size: .82rem; color: var(--mag-muted); }
.prog-chart-summary strong { color: var(--mag-ink); font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 800; display: block; line-height: 1; }
.prog-streak-card { background: linear-gradient(135deg, var(--mag-amber-soft), #FED7AA); border-radius: 16px; padding: 24px; text-align: center; }
.prog-streak-card-flame { font-size: 3rem; line-height: 1; }
.prog-streak-card-num { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 3rem; color: #92400E; line-height: 1; margin-top: 6px; }
.prog-streak-card-lbl { font-size: .88rem; color: #92400E; font-weight: 700; margin-top: 4px; }
.prog-streak-card-best { font-size: .78rem; color: #92400E; opacity: .75; margin-top: 6px; }
.prog-rings { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.prog-ring-card { background: #fff; border-radius: 16px; padding: 22px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.04); border-top: 4px solid var(--mag-indigo); }
.prog-ring-card.g5 { border-top-color: var(--mag-blue); }
.prog-ring-card.beginner { border-top-color: var(--mag-green); }
.prog-ring-card.medium { border-top-color: var(--mag-amber); }
.prog-ring-card.advanced { border-top-color: var(--mag-pink); }
.prog-ring-svg { width: 110px; height: 110px; margin: 0 auto; position: relative; }
.prog-ring-svg svg circle.bg { fill: none; stroke: var(--mag-cream-2); stroke-width: 10; }
.prog-ring-svg svg circle.fg { fill: none; stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; stroke: var(--mag-indigo); }
.prog-ring-card.g5 .fg       { stroke: var(--mag-blue); }
.prog-ring-card.beginner .fg { stroke: var(--mag-green); }
.prog-ring-card.medium .fg   { stroke: var(--mag-amber); }
.prog-ring-card.advanced .fg { stroke: var(--mag-pink); }
.prog-ring-pct-cent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.prog-ring-pct-num { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.4rem; color: var(--mag-ink); line-height: 1; }
.prog-ring-pct-lbl { font-size: .68rem; color: var(--mag-muted); font-weight: 700; }
.prog-ring-card-name { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.1rem; color: var(--mag-ink); margin-top: 10px; }
.prog-ring-card-meta { font-size: .78rem; color: var(--mag-muted); margin-top: 2px; }

/* ── BADGES ────────────────────────────────────────────────── */
.ach-hero { background: linear-gradient(135deg, var(--mag-amber) 0%, #F97316 100%); border-radius: 22px; padding: 30px; color: #fff; margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.ach-hero-stat-num { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 3rem; line-height: 1; }
.ach-hero-stat-lbl { font-size: .88rem; opacity: .85; margin-top: 4px; font-weight: 700; }
.ach-tabs { margin-top: 22px; display: flex; gap: 6px; }
.ach-tab { padding: 10px 22px; background: #fff; border-radius: 99px; border: 0; font-weight: 700; font-size: .88rem; color: var(--mag-ink-soft); cursor: pointer; }
.ach-tab.active { background: var(--mag-ink); color: #fff; }
.ach-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.ach-badge { background: #fff; border-radius: 16px; padding: 22px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: transform .15s; }
.ach-badge.locked { opacity: .35; filter: grayscale(.4); }
.ach-badge-icon { font-size: 3rem; line-height: 1; }
.ach-badge-name { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.05rem; color: var(--mag-ink); margin-top: 10px; line-height: 1.2; }
.ach-badge-desc { font-size: .78rem; color: var(--mag-muted); margin-top: 4px; line-height: 1.4; min-height: 32px; }
.ach-badge-pts { display: inline-flex; align-items: center; gap: 4px; background: var(--mag-amber-soft); color: #92400E; padding: 4px 10px; border-radius: 99px; font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 800; margin-top: 10px; }

/* ── SETTINGS ──────────────────────────────────────────────── */
.set-wrap { margin-top: 22px; display: grid; grid-template-columns: 240px 1fr; gap: 28px; }
.set-side { background: #fff; border-radius: 14px; padding: 12px; height: fit-content; }
.set-side-item { padding: 11px 14px; border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--mag-ink-soft); cursor: pointer; display: flex; align-items: center; gap: 10px; }
.set-side-item.active { background: var(--mag-indigo-soft); color: var(--mag-indigo); font-weight: 700; }
.set-side-item:hover:not(.active) { background: var(--mag-cream); }
.set-side-icon { font-size: 1.05rem; width: 22px; text-align: center; }
.set-main { display: flex; flex-direction: column; gap: 18px; }
.set-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.set-card-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.set-card-title { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.2rem; color: var(--mag-ink); }
.set-card-sub { font-size: .82rem; color: var(--mag-muted); }
.set-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--mag-line); align-items: center; }
.set-row:last-child { border-bottom: 0; }
.set-row-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.set-row-icon.a { background: var(--mag-indigo-soft); color: var(--mag-indigo); }
.set-row-icon.b { background: var(--mag-pink-soft); color: var(--mag-pink); }
.set-row-icon.c { background: var(--mag-green-soft); color: var(--mag-green); }
.set-row-icon.d { background: var(--mag-amber-soft); color: #92400E; }
.set-row-icon.danger { background: var(--mag-red-soft); color: var(--mag-red); }
.set-row-name { font-weight: 700; color: var(--mag-ink); font-size: .92rem; }
.set-row-sub { font-size: .78rem; color: var(--mag-muted); margin-top: 2px; }
.set-row-value { font-weight: 700; color: var(--mag-ink); font-size: .88rem; }
.set-row-arrow { color: var(--mag-muted); font-size: 1.3rem; }

/* ── STUDY AIDS ────────────────────────────────────────────── */
.aids-tabs { margin-top: 22px; background: #fff; border-radius: 99px; padding: 4px; display: inline-flex; gap: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.aids-tab { padding: 10px 20px; border: 0; background: transparent; border-radius: 99px; font-weight: 700; font-size: .88rem; color: var(--mag-muted); cursor: pointer; }
.aids-tab.active { background: var(--mag-indigo); color: #fff; }
.aids-section { margin-top: 26px; }
.aids-section-h { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.3rem; color: var(--mag-ink); margin-bottom: 12px; display: flex; align-items: baseline; gap: 12px; }
.aids-section-h .ct { font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 700; color: var(--mag-muted); }
.aids-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.aids-card { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); cursor: pointer; transition: transform .15s; }
.aids-card:hover { transform: translateY(-2px); }
.aids-card-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--mag-purple-soft); color: var(--mag-purple); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.aids-card-name { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.05rem; color: var(--mag-ink); margin-top: 12px; line-height: 1.3; }
.aids-card-meta { font-size: .78rem; color: var(--mag-muted); margin-top: 4px; }
.aids-card-foot { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; }
.aids-card-count { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: .78rem; color: var(--mag-ink); background: var(--mag-cream-2); padding: 4px 8px; border-radius: 4px; }
.aids-card-date { font-size: .72rem; color: var(--mag-muted); }
.aids-empty { background: #fff; border: 2px dashed var(--mag-line); border-radius: 14px; padding: 40px 20px; text-align: center; color: var(--mag-muted); }

/* ── TUTOR LOGS (legacy prototype — kept for reference) ───────── */
.tlog-wrap { margin-top: 22px; display: grid; grid-template-columns: 320px 1fr; gap: 22px; min-height: 540px; }

/* ════════════════════════════════════════════════════════════
   RENDERER MATCH — actual classes emitted by the JS renderers
   These override the prototype-only CSS above so the live
   screens (progress/settings/tutorLogs/studyAids/achievements/
   report) display correctly.
   ════════════════════════════════════════════════════════════ */

/* ── PROGRESS (actual renderer) ───────────────────────────── */
.prog-grid { margin-top: 22px; display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 980px; }
.prog-hero { background: linear-gradient(135deg, var(--mag-indigo), #6366F1); color: #fff; padding: 32px; border-radius: 22px; }
.prog-hero-title { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 2rem; line-height: 1.1; margin-top: 8px; }
.prog-hero-sub { font-size: .95rem; opacity: .9; margin-top: 8px; }
.prog-hero-bar { margin-top: 18px; height: 12px; background: rgba(255,255,255,.2); border-radius: 99px; overflow: hidden; }
.prog-hero-bar-fill { height: 100%; background: linear-gradient(90deg, #FCD34D, #F59E0B); border-radius: 99px; transition: width .4s; }
.prog-hero-bar-label { margin-top: 8px; font-size: .82rem; opacity: .85; font-weight: 700; }
.prog-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.prog-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.prog-card-head h3 { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.25rem; color: var(--mag-ink); }
.prog-card-sub { font-size: .82rem; color: var(--mag-muted); }
.prog-chart { height: 240px; position: relative; }
.prog-levels { display: flex; flex-direction: column; gap: 16px; }
.prog-level-row { display: grid; grid-template-columns: 1.2fr 2fr auto; gap: 18px; align-items: center; }
.prog-level-info { min-width: 0; }
.prog-level-name { font-weight: 700; color: var(--mag-ink); font-size: .94rem; }
.prog-level-name-ar { font-size: .76rem; color: var(--mag-muted); margin-top: 2px; direction: rtl; }
.prog-level-bar { height: 12px; background: var(--mag-cream-2); border-radius: 99px; overflow: hidden; }
.prog-level-bar-fill { height: 100%; background: var(--mag-indigo); border-radius: 99px; transition: width .4s; }
.prog-level-bar-fill.l-g5 { background: var(--mag-blue); }
.prog-level-bar-fill.l-beginner { background: var(--mag-green); }
.prog-level-bar-fill.l-medium { background: var(--mag-amber); }
.prog-level-bar-fill.l-advanced { background: var(--mag-pink); }
.prog-level-stat { font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 800; color: var(--mag-ink); white-space: nowrap; }
.prog-cta-card, .prog-final-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.prog-cta-info h3 { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.2rem; color: var(--mag-ink); margin-bottom: 6px; }
.prog-cta-info p { font-size: .88rem; color: var(--mag-muted); line-height: 1.4; }
.prog-final-card { background: linear-gradient(135deg, #FEF3C7, #FDE68A); border: 1px solid #F59E0B33; }
.prog-final-card .prog-cta-info h3 { color: #78350F; }
.prog-final-card .prog-cta-info p { color: #92400E; }

/* ── SETTINGS (actual renderer) ───────────────────────────── */
.set-grid { margin-top: 22px; display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.set-hero { padding: 8px 0 12px; }
.set-hero h1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 2rem; color: var(--mag-ink); line-height: 1.1; margin-top: 8px; }
.set-hero-sub { font-size: .94rem; color: var(--mag-muted); margin-top: 8px; }
.set-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.set-card-head { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--mag-line); }
.set-card-head h3 { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.2rem; color: var(--mag-ink); }
.set-card-sub { display: block; font-size: .82rem; color: var(--mag-muted); margin-top: 4px; }
.set-row { display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 12px 0; align-items: center; border-bottom: 0; }
.set-row label { font-weight: 700; color: var(--mag-ink); font-size: .92rem; }
.set-row input[type="text"], .set-row input[type="password"], .set-row input[type="number"], .set-row select {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--mag-line); border-radius: 10px; font-family: 'Inter', sans-serif; font-size: .9rem; background: #fff; color: var(--mag-ink); transition: border-color .15s;
}
.set-row input:focus, .set-row select:focus { outline: none; border-color: var(--mag-indigo); }
.set-row-toggle input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--mag-indigo); justify-self: start; }
.set-budget-meter { margin-top: 14px; }
.set-budget-bar { height: 10px; background: var(--mag-cream-2); border-radius: 99px; overflow: hidden; }
.set-budget-bar-fill { height: 100%; background: linear-gradient(90deg, var(--mag-green), var(--mag-amber)); border-radius: 99px; transition: width .4s; }
.set-budget-text { margin-top: 8px; font-size: .85rem; color: var(--mag-ink); }
.set-budget-text strong { font-family: 'JetBrains Mono', monospace; color: var(--mag-indigo); font-weight: 800; }
.set-budget-sub { display: block; font-size: .76rem; color: var(--mag-muted); margin-top: 4px; }
.set-interest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 6px; }
.set-interest-chip { background: var(--mag-cream); border: 2px solid var(--mag-line); border-radius: 12px; padding: 12px; cursor: pointer; transition: all .15s; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.set-interest-chip:hover { border-color: var(--mag-indigo); }
.set-interest-chip.selected { background: var(--mag-indigo-soft); border-color: var(--mag-indigo); color: var(--mag-indigo); }
.set-interest-emoji { font-size: 1.6rem; line-height: 1; }
.set-interest-label { font-size: .78rem; font-weight: 700; color: var(--mag-ink); }
.set-interest-chip.selected .set-interest-label { color: var(--mag-indigo); }
.set-card-privacy .set-privacy-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.set-card-save { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; background: transparent; box-shadow: none; padding: 4px 0 30px; }
.mag-btn-danger { color: var(--mag-red); border-color: var(--mag-red); }
.mag-btn-danger:hover { background: var(--mag-red-soft); border-color: var(--mag-red); color: var(--mag-red); }
.mag-btn-gold { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; box-shadow: 0 4px 14px -2px rgba(245, 158, 11, .4); }
.mag-btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -2px rgba(245, 158, 11, .5); }

/* Shared-tutor info card (proxy mode) */
.set-card-shared { border: 1.5px solid var(--mag-green); background: linear-gradient(180deg, #ECFDF5 0%, #fff 50%); }
.set-shared-info { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.set-shared-row { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--mag-ink); font-weight: 600; }
.set-shared-icon { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--mag-green-soft); color: var(--mag-green); border-radius: 8px; font-weight: 800; }

/* ── TUTOR LOGS (actual renderer) ─────────────────────────── */
.tlog-grid { margin-top: 22px; display: flex; flex-direction: column; gap: 20px; max-width: 880px; }
.tlog-hero { padding: 8px 0 12px; }
.tlog-hero h1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 2rem; color: var(--mag-ink); line-height: 1.1; margin-top: 8px; }
.tlog-hero-sub { font-size: .94rem; color: var(--mag-muted); margin-top: 8px; }
.tlog-empty-card { background: #fff; border-radius: 16px; padding: 50px 24px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.tlog-empty-icon { font-size: 3.5rem; opacity: .6; line-height: 1; }
.tlog-empty-card h3 { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.4rem; color: var(--mag-ink); margin-top: 16px; }
.tlog-empty-card p { font-size: .9rem; color: var(--mag-muted); margin-top: 8px; max-width: 460px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.tlog-empty-card button { margin-top: 22px; }
.tlog-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tlog-stat { background: #fff; border-radius: 14px; padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.tlog-stat-val { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 2.2rem; color: var(--mag-indigo); line-height: 1; }
.tlog-stat-lbl { font-size: .85rem; color: var(--mag-muted); margin-top: 6px; font-weight: 700; }
.tlog-list { background: transparent; padding: 0; max-height: none; overflow-y: visible; display: flex; flex-direction: column; gap: 10px; }
.tlog-row { display: grid; grid-template-columns: 50px 1fr 24px; gap: 14px; padding: 16px 20px; background: #fff; border-radius: 14px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: transform .15s, box-shadow .15s; align-items: center; }
.tlog-row:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.tlog-row-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--mag-purple-soft); color: var(--mag-purple); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.tlog-row-title { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.05rem; color: var(--mag-ink); }
.tlog-row-meta { font-size: .78rem; color: var(--mag-muted); margin-top: 4px; }
.tlog-row-preview { font-size: .82rem; color: var(--mag-ink-soft); margin-top: 6px; font-style: italic; line-height: 1.4; }
.tlog-row-arrow { font-size: 1.6rem; color: var(--mag-muted); font-weight: 300; }
.tlog-actions { display: flex; gap: 12px; flex-wrap: wrap; padding: 4px 0 30px; }
.tlog-detail-hero { background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,.04); display: flex; gap: 18px; align-items: center; }
.tlog-detail-icon { width: 64px; height: 64px; border-radius: 14px; background: var(--mag-purple-soft); color: var(--mag-purple); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; }
.tlog-detail-hero h1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.6rem; color: var(--mag-ink); line-height: 1.1; margin-top: 6px; }
.tlog-detail-sub { font-size: .85rem; color: var(--mag-muted); margin-top: 4px; }
.tlog-thread { background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,.04); display: flex; flex-direction: column; gap: 10px; }
.tlog-bubble-row { display: flex; flex-direction: column; }
.tlog-bubble-row.user { align-items: flex-end; }
.tlog-bubble-row.assistant { align-items: flex-start; }
.tlog-bubble { max-width: 78%; padding: 12px 16px; border-radius: 16px; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; }
.tlog-bubble.user { background: var(--mag-indigo); color: #fff; border-bottom-right-radius: 4px; }
.tlog-bubble.assistant { background: var(--mag-cream); color: var(--mag-ink); border-bottom-left-radius: 4px; }
.tlog-bubble-time { font-size: .68rem; color: var(--mag-muted); margin-top: 4px; }

/* ── STUDY AIDS (actual renderer) ─────────────────────────── */
.aids-grid { margin-top: 22px; display: flex; flex-direction: column; gap: 20px; max-width: 880px; }
.aids-hero { padding: 8px 0 12px; }
.aids-hero h1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 2rem; color: var(--mag-ink); line-height: 1.1; margin-top: 8px; }
.aids-hero-sub { font-size: .94rem; color: var(--mag-muted); margin-top: 8px; }
.aids-empty-card { background: #fff; border-radius: 16px; padding: 50px 24px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.aids-empty-icon { font-size: 3.5rem; opacity: .6; line-height: 1; }
.aids-empty-card h3 { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.4rem; color: var(--mag-ink); margin-top: 16px; }
.aids-empty-card p { font-size: .9rem; color: var(--mag-muted); margin-top: 8px; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.aids-empty-card button { margin-top: 22px; }
.aids-list { display: flex; flex-direction: column; gap: 12px; }
.aids-row { display: grid; grid-template-columns: 50px 1fr; gap: 14px; padding: 18px 20px; background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04); align-items: start; }
.aids-row-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--mag-purple-soft); color: var(--mag-purple); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.aids-row-title { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.05rem; color: var(--mag-ink); }
.aids-row-title-ar { font-size: .8rem; color: var(--mag-muted); margin-top: 2px; direction: rtl; }
.aids-row-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.aids-chip { background: var(--mag-cream); border: 1.5px solid var(--mag-line); border-radius: 99px; padding: 7px 14px; font-size: .8rem; font-weight: 700; color: var(--mag-ink); cursor: pointer; transition: all .15s; }
.aids-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.aids-chip-flashcards { background: var(--mag-pink-soft); color: var(--mag-pink); border-color: var(--mag-pink); }
.aids-chip-summary { background: var(--mag-indigo-soft); color: var(--mag-indigo); border-color: var(--mag-indigo); }
.aids-chip-mindmap { background: var(--mag-purple-soft); color: var(--mag-purple); border-color: var(--mag-purple); }

/* ── ACHIEVEMENTS (actual renderer) ───────────────────────── */
.ach-grid { margin-top: 22px; display: flex; flex-direction: column; gap: 22px; max-width: 1020px; }
.ach-hero { background: linear-gradient(135deg, #F59E0B, #F97316); color: #fff; border-radius: 22px; padding: 30px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: 0; }
.ach-hero-left h1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 2rem; color: #fff; line-height: 1.1; margin-top: 8px; }
.ach-hero-sub { font-size: .95rem; opacity: .92; margin-top: 8px; font-weight: 700; }
.ach-hero-bar { margin-top: 16px; height: 12px; background: rgba(255,255,255,.25); border-radius: 99px; overflow: hidden; max-width: 460px; }
.ach-hero-bar-fill { height: 100%; background: #fff; border-radius: 99px; transition: width .4s; }
.ach-hero-trophy { font-size: 5rem; line-height: 1; opacity: .9; }
.ach-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.ach-tile { background: #fff; border-radius: 16px; padding: 22px 16px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: transform .15s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ach-tile.earned:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.ach-tile.locked { opacity: .42; filter: grayscale(.5); }
.ach-tile-icon { font-size: 3rem; line-height: 1; }
.ach-tile-name { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.02rem; color: var(--mag-ink); margin-top: 6px; line-height: 1.2; }
.ach-tile-name-ar { font-size: .75rem; color: var(--mag-muted); direction: rtl; }
.ach-tile-desc { font-size: .76rem; color: var(--mag-muted); line-height: 1.4; min-height: 32px; margin-top: 4px; }
.ach-tile-points { display: inline-flex; align-items: center; background: var(--mag-amber-soft); color: #92400E; padding: 4px 12px; border-radius: 99px; font-family: 'JetBrains Mono', monospace; font-size: .74rem; font-weight: 800; margin-top: 6px; }

/* ── REPORT (actual renderer) ─────────────────────────────── */
.rep-grid { margin-top: 22px; display: flex; flex-direction: column; gap: 20px; max-width: 880px; }
.rep-hero { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; border-radius: 22px; padding: 32px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.rep-hero-trophy { font-size: 5rem; line-height: 1; }
.rep-hero-text h1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.9rem; color: #fff; line-height: 1.1; margin-top: 6px; }
.rep-hero-sub { font-size: .9rem; opacity: .9; margin-top: 4px; direction: rtl; }
.rep-hero-score { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 3rem; line-height: 1; margin-top: 14px; }
.rep-hero-score-pct { font-size: 1.4rem; opacity: .8; margin-left: 4px; }
.rep-hero-score-lbl { font-size: .85rem; opacity: .9; font-weight: 700; margin-top: 2px; }
.rep-hero-note { margin-top: 12px; font-size: .92rem; opacity: .92; }
.rep-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.rep-card-head { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--mag-line); }
.rep-card-head h3 { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.25rem; color: var(--mag-ink); }
.rep-subject { margin-bottom: 16px; }
.rep-subject:last-child { margin-bottom: 0; }
.rep-subject-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.rep-subject-name { font-weight: 800; color: var(--mag-ink); font-size: 1rem; }
.rep-subject-pct { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--mag-indigo); font-size: 1rem; }
.rep-subject-bar { height: 10px; background: var(--mag-cream-2); border-radius: 99px; overflow: hidden; }
.rep-subject-bar-fill { height: 100%; background: var(--mag-indigo); border-radius: 99px; }
.rep-subject-levels { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rep-level-chip { font-family: 'JetBrains Mono', monospace; font-size: .76rem; font-weight: 800; padding: 4px 10px; border-radius: 99px; }
.rep-level-chip.taken { background: var(--mag-green-soft); color: var(--mag-green); }
.rep-level-chip.untaken { background: var(--mag-cream-2); color: var(--mag-muted); }
.rep-strength { color: var(--mag-green); font-weight: 700; padding: 8px 12px; background: var(--mag-green-soft); border-radius: 10px; margin-bottom: 8px; font-size: .9rem; }
.rep-weakness { color: var(--mag-amber); font-weight: 700; padding: 8px 12px; background: var(--mag-amber-soft); border-radius: 10px; margin-bottom: 8px; font-size: .9rem; color: #92400E; }
.rep-empty { color: var(--mag-muted); font-size: .9rem; font-style: italic; }
.rep-empty-success { color: var(--mag-green); font-style: normal; font-weight: 700; }
.rep-rec { padding: 10px 14px; background: var(--mag-indigo-soft); color: var(--mag-indigo); border-radius: 10px; margin-bottom: 8px; font-size: .9rem; font-weight: 700; }
.rep-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.rep-stat { text-align: center; padding: 14px; background: var(--mag-cream); border-radius: 12px; }
.rep-stat-val { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.6rem; color: var(--mag-ink); line-height: 1; }
.rep-stat-lbl { font-size: .76rem; color: var(--mag-muted); margin-top: 6px; font-weight: 700; }
.rep-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; padding: 4px 0 30px; }