:root {
  /* Elevation is a scale, not one shadow. Cards that can be acted on sit higher than
     cards that only inform, and that difference is what reads as "designed". */
  --sh-1: 0 1px 2px rgba(23, 33, 66, .05), 0 2px 6px rgba(23, 33, 66, .05);
  --sh-2: 0 2px 4px rgba(23, 33, 66, .05), 0 8px 22px rgba(23, 33, 66, .08);
  --sh-3: 0 8px 18px rgba(23, 33, 66, .09), 0 22px 48px rgba(23, 33, 66, .12);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --coach: #6d4bd6;
  --coach-light: #F1ECFE;
  --blue: #2E5395;
  --blue-dark: #1a3a6b;
  --blue-light: #EAF0FA;
  --green: #2f9e44;
  --green-light: #EAF7EC;
  --red: #d64545;
  --red-light: #FBEAEA;
  --amber: #b8860b;
  --amber-light: #FFF7E0;
  --bg: #f4f6fb;
  --card: #ffffff;
  --text: #1a1a2e;
  --muted: #6b7280;
  --border: #e2e6ee;
  --radius: 14px;
  --shadow: 0 2px 4px rgba(23, 33, 66, .05), 0 8px 22px rgba(23, 33, 66, .08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  direction: rtl;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

/* A type scale, so headings relate to each other instead of each picking a size.
   Hebrew needs slightly more line-height than Latin at the same size. */
h1 { letter-spacing: -.02em; line-height: 1.25; }
h2, h3 { letter-spacing: -.01em; line-height: 1.3; }
p { line-height: 1.7; }

.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

a { color: var(--blue); text-decoration: none; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.topbar .brand {
  font-weight: 800;
  font-size: 18px;
  color: var(--blue-dark);
}
.topbar nav a {
  margin-inline-start: 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.topbar nav a:hover { color: var(--blue); }

.hero {
  position: relative;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: white;
  border-radius: var(--radius);
  padding: 28px 24px;
  margin-bottom: 22px;
  box-shadow: 0 12px 32px rgba(26,58,107,.28);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 85% 15%, rgba(255,255,255,.14) 0, transparent 45%),
                     radial-gradient(circle at 10% 90%, rgba(255,255,255,.10) 0, transparent 40%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { margin: 0 0 6px; font-size: 26px; }
.hero p { margin: 0; opacity: .92; font-size: 14.5px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: block;
  animation: cardIn .45s ease backwards;
}
.grid .card:nth-child(1) { animation-delay: .02s; }
.grid .card:nth-child(2) { animation-delay: .06s; }
.grid .card:nth-child(3) { animation-delay: .10s; }
.grid .card:nth-child(4) { animation-delay: .14s; }
.grid .card:nth-child(5) { animation-delay: .18s; }
.grid .card:nth-child(6) { animation-delay: .22s; }
.grid .card:nth-child(7) { animation-delay: .26s; }
.grid .card:nth-child(8) { animation-delay: .30s; }
.grid .card:nth-child(9) { animation-delay: .34s; }
.grid .card:nth-child(10) { animation-delay: .38s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(30,41,80,.16); border-color: #cfdcf2; }
.card .icon {
  font-size: 22px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-light), #dbe6f7);
}
.card h3 { margin: 0 0 4px; font-size: 16.5px; color: var(--blue-dark); }
.card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.card .progress-pill {
  display: inline-block;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue-dark);
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.progressbar-outer {
  height: 8px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.progressbar-inner {
  height: 100%;
  background: var(--blue);
  border-radius: 999px;
  transition: width .25s ease;
}
.progress-label {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.timer {
  font-weight: 800;
  font-size: 15px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue-dark);
}
.timer.warn { background: var(--red-light); color: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.passage-box {
  background: #F7F9FD;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
  direction: ltr;
  text-align: left;
  font-size: 15.5px;
  line-height: 1.65;
  max-height: 46vh;
  overflow-y: auto;
}
.passage-box p { margin: 0 0 10px; }
.passage-box p:last-child { margin-bottom: 0; }
.passage-title {
  direction: rtl;
  text-align: right;
  font-weight: 800;
  color: var(--blue-dark);
  margin-bottom: 10px;
  font-size: 15px;
}

.q-prompt {
  direction: ltr;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  line-height: 1.5;
}
.q-original {
  direction: ltr;
  text-align: left;
  font-style: italic;
  font-size: 15.5px;
  background: #F7F9FD;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.options { display: flex; flex-direction: column; gap: 9px; }
.option-btn {
  direction: ltr;
  text-align: left;
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: white;
  font-size: 15px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  font-family: inherit;
  color: var(--text);
}
.option-btn:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-light); }
.option-btn.correct { border-color: var(--green); background: var(--green-light); font-weight: 700; }
.option-btn.incorrect { border-color: var(--red); background: var(--red-light); }
.option-btn:disabled { cursor: default; opacity: .85; }

.feedback {
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.6;
}
.feedback.correct { background: var(--green-light); color: #1c6b2e; border: 1px solid #b7dfc0; }
.feedback.incorrect { background: var(--red-light); color: #9c2b2b; border: 1px solid #f0c2c2; }
.feedback .explain { margin-top: 6px; color: var(--text); direction: rtl; text-align: right; }

.btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  background: var(--blue);
  color: white;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--blue-dark); }
.btn.secondary { background: var(--blue-light); color: var(--blue-dark); }
.btn.secondary:hover { background: #dbe6f7; }
.btn.ghost { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.btn:disabled { opacity: .5; cursor: default; }

.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.result-score {
  text-align: center;
  padding: 20px 0 10px;
}
.result-score .num { font-size: 46px; font-weight: 800; color: var(--blue-dark); }
.result-score .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }

.review-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 14px;
}
.review-item.wrong { border-color: #f0c2c2; background: #fff8f8; }
.review-item .tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-inline-end: 6px; }
.review-item .tag.wrong { background: var(--red-light); color: var(--red); }
.review-item .tag.ok { background: var(--green-light); color: var(--green); }

/* vocab flashcards */
.flip-card {
  perspective: 1000px;
  height: 220px;
  cursor: pointer;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .4s;
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
}
.flip-front { background: white; border: 1.5px solid var(--border); }
.flip-front .word { font-size: 30px; font-weight: 800; color: var(--blue-dark); direction: ltr; }
.flip-front .pos { color: var(--muted); font-size: 13px; margin-top: 4px; direction: ltr; }
.flip-back { background: var(--blue-light); transform: rotateY(180deg); }
.flip-back .heb { font-size: 22px; font-weight: 800; color: var(--blue-dark); margin-bottom: 8px; }
.flip-back .assoc { font-size: 13.5px; color: var(--text); margin-bottom: 8px; }
.flip-back .ex { font-size: 13px; font-style: italic; direction: ltr; color: var(--muted); }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: white;
  cursor: pointer;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--muted);
  font-family: inherit;
}
.tab-btn.active { background: var(--blue); color: white; border-color: var(--blue); }

.mark-row { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.mark-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}
.mark-btn.difficult.active { background: var(--red-light); border-color: var(--red); color: var(--red); }
.mark-btn.learned.active { background: var(--green-light); border-color: var(--green); color: var(--green); }

select, .week-select {
  font-family: inherit;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  font-size: 14px;
  background: white;
  color: var(--text);
}

.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.stat-chip {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-dark);
}

.callout {
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.callout.amber { background: var(--amber-light); border: 1px solid #ecd08a; color: #7a5a00; }
.callout.green { background: var(--green-light); border: 1px solid #b7dfc0; color: #1c6b2e; }
.callout.blue { background: var(--blue-light); border: 1px solid #cddbf3; color: var(--blue-dark); }
.callout.eitan {
  background: linear-gradient(135deg, #fff7e6, #fff1d6);
  border: 1px solid #f0d599;
  color: #6b4a00;
  font-weight: 700;
  text-align: center;
  font-size: 15px;
}

.toast-host {
  position: fixed;
  top: 18px;
  inset-inline-end: 18px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}
.toast {
  background: white;
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--amber);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transform: translateX(var(--toast-offset, 30px));
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] .toast { --toast-offset: -30px; }
.toast.show { transform: translateX(0); opacity: 1; }

.strategy-content h2 { color: var(--blue-dark); margin-top: 28px; }
.strategy-content h3 { color: var(--blue-dark); margin-top: 18px; }
.strategy-content p, .strategy-content li { line-height: 1.7; font-size: 15px; }
.strategy-content .en { direction: ltr; text-align: left; background: #F7F9FD; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 8px 0; font-style: italic; }

@media (max-width: 560px) {
  .hero h1 { font-size: 21px; }
  .flip-card { height: 190px; }
}

/* =========================================================
   v2 — additions: simulation, plan, mistake bank, spaced repetition
   ========================================================= */

.topbar .brand a { color: inherit; }
.sec-h { color: var(--blue-dark); margin: 30px 0 4px; font-size: 19px; }
.sec-note { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.6; }
.mini-note { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 10px; }

.hero-gold { background: linear-gradient(135deg, #e0a200, #b57800); box-shadow: 0 12px 32px rgba(160,110,0,.28); }
.hero-red  { background: linear-gradient(135deg, #c0483f, #8e2f28); box-shadow: 0 12px 32px rgba(140,45,40,.26); }

.meter-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.ring-wrap { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 10; }
.ring-fg { fill: none; stroke: #FFD34D; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1); }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-label .pct { font-size: 30px; font-weight: 800; color: white; }
.ring-label .txt { font-size: 10.5px; color: rgba(255,255,255,.85); }
.meter-side { flex: 1; min-width: 220px; }
.meter-side .title { font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.meter-side .sub { font-size: 13px; opacity: .9; }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.streak-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.18); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 12.5px; }

/* next best action */
.next-action {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(135deg, #FFD34D, #f2b705);
  color: #3a2a00; border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px;
  box-shadow: 0 10px 26px rgba(178,130,0,.22); transition: transform .18s, box-shadow .18s;
}
.next-action:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(178,130,0,.3); }
.na-kicker { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .72; }
.na-text { font-size: 16px; font-weight: 800; line-height: 1.45; margin-top: 3px; }
.na-cta { background: #3a2a00; color: #FFD34D; border-radius: 999px; padding: 9px 20px; font-weight: 800; font-size: 13.5px; white-space: nowrap; }

.card-star { border-color: #cfdcf2; background: linear-gradient(180deg, #fff, #fbfcff); }
.card-sm { padding: 15px 16px; }
.card-sm h3 { font-size: 15px; }
.card-sm p { font-size: 12.5px; }
.progress-pill.empty { background: #f1f3f8; color: var(--muted); font-weight: 600; }

.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.badge { background: white; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 8px; text-align: center; }
.badge.locked { opacity: .36; filter: grayscale(1); }
.badge:not(.locked) { border-color: #ecd08a; background: linear-gradient(180deg, #fff, #fffaf0); position: relative; overflow: hidden; }
.badge .bicon { font-size: 26px; display: block; margin-bottom: 4px; }
.badge .btitle { font-size: 11.5px; font-weight: 700; color: var(--blue-dark); line-height: 1.3; }
.badge:not(.locked)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.55) 35%, transparent 50%);
  background-size: 220% 100%; background-position: 100% 0; animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

/* quiz chrome */
.quiz-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.kbd-hint { margin-top: 16px; font-size: 11.5px; color: var(--muted); text-align: center; border-top: 1px dashed var(--border); padding-top: 10px; }
.kbd-hint b { background: #eef1f7; border-radius: 4px; padding: 1px 6px; font-family: monospace; }
.opt-key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; background: #eef1f7; color: var(--muted);
  font-size: 11.5px; font-weight: 800; margin-inline-end: 10px; flex-shrink: 0;
}
.option-btn { display: flex; align-items: center; }
.option-btn.chosen { border-color: var(--blue); background: var(--blue-light); font-weight: 700; }
.option-btn.chosen .opt-key { background: var(--blue); color: white; }
.exam-note { margin-top: 12px; font-size: 12.5px; color: var(--muted); background: #f7f9fd; border-radius: 8px; padding: 9px 12px; }
.flagbtn.on { background: var(--amber-light); border-color: #ecd08a; color: #7a5a00; }

.chapter-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #f7f9fd; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
}
.chapter-name { font-weight: 800; font-size: 13.5px; color: var(--blue-dark); }
.chapter-dots { display: flex; gap: 6px; }
.qdot {
  width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--border);
  background: white; cursor: pointer; font-weight: 800; font-size: 12.5px; color: var(--muted); font-family: inherit;
}
.qdot.done { background: var(--blue-light); color: var(--blue-dark); border-color: #cddbf3; }
.qdot.cur { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,83,149,.14); color: var(--blue-dark); }
.qdot.flag { border-color: var(--amber); background: var(--amber-light); }

.rev-line { margin-top: 6px; direction: ltr; text-align: left; font-weight: 700; font-size: 13.5px; }
.rev-wrong { color: #9c2b2b; }
.rev-right { color: #2f9e44; }
.rev-explain { margin-top: 6px; direction: rtl; text-align: right; color: #555; font-size: 13.5px; line-height: 1.6; }
.review-item .tag.slow { background: var(--amber-light); color: #7a5a00; }
.review-item .tag.time { background: #eef1f7; color: var(--muted); }
.review-item .tag.flagt { background: #f3ecff; color: #6b3fb5; }
.review-item .tag.topic { background: var(--blue-light); color: var(--blue-dark); }

.btn-big { font-size: 16px; padding: 13px 34px; }

/* score scale */
.score-scale { text-align: center; padding: 6px 0 4px; }
.scale-num { font-size: 54px; font-weight: 800; line-height: 1; }
.scale-num.ok { color: #2f9e44; } .scale-num.mid { color: var(--amber); } .scale-num.low { color: var(--red); }
.scale-sub { font-size: 13px; color: var(--muted); margin: 4px 0 14px; }
/* no overflow:hidden here — the 85 / 134 labels sit below the bar and must not be clipped.
   The fill clips itself with clip-path instead. */
.scale-bar { position: relative; height: 12px; background: var(--border); border-radius: 999px; margin: 26px 0 40px; }
/* The gradient must span the whole 50-150 scale, not the filled part, so a low
   score shows red and a high score shows green. The inner element is sized to the
   full bar and revealed by clipping its parent from the inline start. */
.scale-fill { position: absolute; inset: 0; border-radius: 999px; transition: clip-path .9s ease; }
.scale-fill::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(to left, #d64545, #f2b705 55%, #2f9e44);
}
html[dir="ltr"] .scale-fill::before { background: linear-gradient(to right, #d64545, #f2b705 55%, #2f9e44); }
.scale-mark { position: absolute; top: -6px; width: 2px; height: 24px; background: var(--blue-dark); }
.scale-mark span { position: absolute; top: 24px; inset-inline-start: 50%; transform: translateX(50%); font-size: 11px; font-weight: 800; color: var(--blue-dark); white-space: nowrap; }
.scale-mark.exempt { background: #2f9e44; }
.scale-mark.exempt span { color: #2f9e44; }
.scale-verdict { font-size: 15px; line-height: 1.6; margin-top: 10px; }
.scale-disclaimer { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.55; }

/* simulation start screen */
.chapters-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.chapter-card { background: #f7f9fd; border: 1px solid var(--border); border-radius: 10px; padding: 12px 10px; text-align: center; }
.chapter-card.chapter-total { background: var(--blue-light); border-color: #cddbf3; }
.ch-num { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.ch-type { font-size: 13.5px; font-weight: 800; color: var(--blue-dark); margin: 3px 0; }
.ch-meta { font-size: 11.5px; color: var(--muted); }

.hist-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hist-table th { background: var(--blue-light); color: var(--blue-dark); padding: 8px 10px; text-align: right; font-size: 12.5px; }
.hist-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.pill-ok, .pill-mid, .pill-low { border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 800; }
.pill-ok { background: var(--green-light); color: #1c6b2e; }
.pill-mid { background: var(--amber-light); color: #7a5a00; }
.pill-low { background: var(--red-light); color: var(--red); }

/* exam-format page */
.fmt-table-wrap { overflow-x: auto; }
.fmt-table { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); font-size: 13.5px; min-width: 560px; }
.fmt-table th { background: var(--blue); color: white; padding: 10px 12px; text-align: right; font-size: 13px; }
.fmt-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.fmt-table tr.hl td { background: #fffaf0; font-weight: 700; }
.fmt-table tr.tot td { background: var(--blue-light); font-weight: 800; color: var(--blue-dark); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fact-card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; box-shadow: var(--shadow); }
.fact-card.gold { border-color: #ecd08a; background: linear-gradient(180deg, #fff, #fffaf0); }
.fact-num { font-size: 30px; font-weight: 800; color: var(--blue-dark); }
.fact-card.gold .fact-num { color: #b57800; }
.fact-label { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.big-list li { line-height: 1.75; font-size: 14.5px; margin-bottom: 10px; }
.time-math { display: flex; flex-direction: column; gap: 8px; }
.tm-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #f7f9fd; border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.tm-k { font-weight: 800; color: var(--blue-dark); }
.formula-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.formula-card { background: #f7f9fd; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.formula-card h4 { margin: 0 0 8px; color: var(--blue-dark); font-size: 14.5px; }
.formula-card ol { margin: 0; padding-inline-start: 18px; font-size: 13.5px; line-height: 1.7; }

/* plan page */
.countdown-panel { text-align: center; }
.cd-big { font-size: 62px; font-weight: 800; color: var(--blue-dark); line-height: 1; }
.cd-label { font-size: 14px; color: var(--muted); margin-top: 4px; }
.cd-phase { display: inline-block; margin-top: 10px; background: var(--blue-light); color: var(--blue-dark); border-radius: 999px; padding: 5px 16px; font-size: 13px; font-weight: 800; }
.cd-progress-label { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.day-card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow); }
.day-card.today { border-color: var(--blue); box-shadow: 0 8px 26px rgba(46,83,149,.16); }
.day-card.alldone { opacity: .62; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.day-title { font-weight: 800; color: var(--blue-dark); font-size: 15px; }
.day-phase { font-size: 11.5px; color: var(--muted); margin-inline-start: 8px; }
.day-left { font-size: 11.5px; color: var(--muted); }
.day-tasks { display: flex; flex-direction: column; gap: 6px; }
.task { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; background: #f9fafd; cursor: pointer; font-size: 14px; }
.task:hover { background: var(--blue-light); }
.task.on { opacity: .5; text-decoration: line-through; }
.task input { width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; accent-color: var(--blue); }
.task-icon { flex-shrink: 0; }
.task-text { flex: 1; line-height: 1.45; }
.task-link { font-size: 12px; font-weight: 700; white-space: nowrap; }

/* mistake bank */
.mistake-head { display: flex; align-items: center; gap: 16px; }
.mistake-count { font-size: 46px; font-weight: 800; color: var(--red); line-height: 1; }
.mistake-title { font-weight: 800; font-size: 16px; color: var(--blue-dark); }
.mistake-sub { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* spaced repetition */
.sr-panel { padding: 16px 20px; }
.sr-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sr-stat { text-align: center; }
.sr-num { font-size: 26px; font-weight: 800; color: var(--blue-dark); line-height: 1; }
.sr-lbl { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.sr-note { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.sr-card {
  background: white; border: 1.5px solid var(--border); border-radius: 16px;
  padding: 30px 20px; text-align: center; box-shadow: var(--shadow); min-height: 190px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sr-word { font-size: 34px; font-weight: 800; color: var(--blue-dark); direction: ltr; }
.sr-pos { font-size: 13px; color: var(--muted); direction: ltr; margin-top: 3px; }
.sr-prompt { margin-top: 18px; font-size: 13px; color: var(--muted); }
.sr-answer { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 16px; width: 100%; }
.sr-heb { font-size: 21px; font-weight: 800; color: var(--blue-dark); }
.sr-assoc { font-size: 13.5px; margin-top: 8px; line-height: 1.6; }
.sr-ex { font-size: 13px; font-style: italic; color: var(--muted); direction: ltr; margin-top: 8px; }
.grade-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin-top: 14px; }
.grade { border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 6px; background: white; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 3px; }
.grade b { font-size: 13.5px; }
.grade span { font-size: 10.5px; color: var(--muted); }
.grade.g0 { border-color: #f0c2c2; color: var(--red); } .grade.g0:hover { background: var(--red-light); }
.grade.g1 { border-color: #ecd08a; color: #7a5a00; } .grade.g1:hover { background: var(--amber-light); }
.grade.g2 { border-color: #cddbf3; color: var(--blue-dark); } .grade.g2:hover { background: var(--blue-light); }
.grade.g3 { border-color: #b7dfc0; color: #1c6b2e; } .grade.g3:hover { background: var(--green-light); }

.filter-panel { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 18px; }
.flabel { font-size: 13px; font-weight: 700; color: var(--muted); }
.ftoggle { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ftoggle input { accent-color: var(--blue); }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; }
.mode-card { position: relative; background: white; border: 1.5px solid var(--border); border-radius: 12px; padding: 16px 12px; cursor: pointer; font-family: inherit; text-align: center; transition: border-color .15s, transform .15s; }
.mode-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.mode-card span { font-size: 22px; display: block; }
.mode-card b { display: block; font-size: 14px; color: var(--blue-dark); margin: 5px 0 3px; }
.mode-card small { font-size: 11.5px; color: var(--muted); }

/* pilot page */
.listen-status { background: #f7f9fd; border: 1px solid var(--border); border-radius: 10px; padding: 14px; text-align: center; font-size: 14px; font-weight: 600; color: var(--blue-dark); }
.wf-heb { font-size: 25px; font-weight: 800; color: var(--blue-dark); text-align: center; margin: 18px 0 8px; }
.wf-hint { font-size: 26px; font-family: monospace; letter-spacing: 3px; direction: ltr; text-align: center; color: var(--muted); }
.wf-len { font-size: 12px; font-family: inherit; letter-spacing: 0; }
.wf-input { display: block; width: 100%; margin: 16px 0 0; padding: 13px 16px; font-size: 18px; direction: ltr; text-align: left; border: 1.5px solid var(--border); border-radius: 10px; font-family: inherit; }
.wf-input:focus { outline: none; border-color: var(--blue); }
.reveal { margin-top: 14px; }
.reveal summary { cursor: pointer; font-weight: 700; color: var(--blue); font-size: 14px; padding: 8px 0; }

.danger-zone { margin-top: 26px; }
.danger-zone summary { cursor: pointer; font-size: 13.5px; color: var(--muted); font-weight: 700; }

@media (max-width: 560px) {
  .cd-big { font-size: 48px; }
  .scale-num { font-size: 44px; }
  .na-text { font-size: 14.5px; }
  .next-action { flex-direction: column; align-items: stretch; text-align: center; }
  .sr-word { font-size: 28px; }
  .qdot { width: 27px; height: 27px; }
  .kbd-hint { display: none; }
}

/* =========================================================
   v3 — adaptive simulation + vocabulary games
   ========================================================= */

.hero-purple { background: linear-gradient(135deg, #6b46c1, #4c2889); box-shadow: 0 12px 32px rgba(76,40,137,.28); }

/* simulation mode chooser */
.sim-modes { margin-bottom: 14px; }
.mode-card.sim-mode { position: relative; padding: 18px 14px; text-align: right; }
.mode-card.sim-mode small { display: block; margin-top: 6px; line-height: 1.55; }
.mode-card.recommended { border-color: #ecd08a; background: linear-gradient(180deg, #fff, #fffaf0); }
.rec-tag {
  position: absolute; top: -9px; inset-inline-end: 12px;
  background: #f2b705; color: #3a2a00; font-size: 10.5px; font-weight: 800;
  border-radius: 999px; padding: 3px 10px; display: inline-block !important;
}
.best-badge { background: var(--blue-light); color: var(--blue-dark); border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.best-badge.ok { background: var(--green-light); color: #1c6b2e; border: 1px solid #b7dfc0; }

/* adaptive result story */
.adaptive-story { margin-top: 8px; }
.adaptive-story h3 { color: var(--blue-dark); margin-bottom: 8px; }
.adaptive-story p { font-size: 14.5px; line-height: 1.7; margin: 0 0 10px; }
.lvl-pill { border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.lvl1 { background: var(--blue-light); color: var(--blue-dark); }
.lvl2 { background: var(--amber-light); color: #7a5a00; }
.lvl3 { background: var(--green-light); color: #1c6b2e; }

/* games — shared chrome */
.game-stats-panel { padding: 14px 18px; }
.game-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.game-hint { font-size: 13.5px; color: var(--muted); flex: 1; min-width: 200px; line-height: 1.5; }
.game-counters { font-size: 13.5px; font-weight: 800; color: var(--blue-dark); white-space: nowrap; }
.miss-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.miss-row { background: rgba(255,255,255,.65); border-radius: 8px; padding: 8px 12px; font-size: 13.5px; }
.miss-row b { direction: ltr; display: inline-block; }
.miss-row span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

.game-promo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, #6b46c1, #4c2889); color: white;
  border-radius: var(--radius); padding: 15px 20px; margin-bottom: 16px;
  box-shadow: 0 10px 26px rgba(76,40,137,.22); transition: transform .18s;
}
.game-promo:hover { transform: translateY(-2px); }
.gp-icon { font-size: 28px; }
.gp-text { flex: 1; min-width: 200px; font-size: 13.5px; line-height: 1.55; color: white; }
.gp-cta { background: rgba(255,255,255,.2); border-radius: 999px; padding: 8px 18px; font-weight: 800; font-size: 13px; white-space: nowrap; }

/* memory game */
.mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.mem-card {
  position: relative; aspect-ratio: 1 / .78; border-radius: 12px; border: 1.5px solid var(--border);
  background: white; cursor: pointer; font-family: inherit; padding: 6px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: transform .18s, border-color .18s, background .18s;
}
.mem-card:hover:not(.matched) { border-color: var(--blue); }
.mem-back { font-size: 24px; color: #c3cbdb; font-weight: 800; }
.mem-face { display: none; font-size: 14px; font-weight: 700; line-height: 1.25; text-align: center; word-break: break-word; }
.mem-face.en { direction: ltr; color: var(--blue-dark); }
.mem-face.he { color: #6b46c1; font-size: 12.5px; }
.mem-card.flipped { background: var(--blue-light); border-color: var(--blue); }
.mem-card.flipped .mem-back { display: none; }
.mem-card.flipped .mem-face { display: block; }
.mem-card.matched { background: var(--green-light); border-color: #b7dfc0; cursor: default; opacity: .75; }
.mem-card.matched .mem-back { display: none; }
.mem-card.matched .mem-face { display: block; }

/* speed round */
.speed-word { font-size: 40px; font-weight: 800; color: var(--blue-dark); direction: ltr; text-align: center; margin: 10px 0 2px; }
.speed-pos { font-size: 13px; color: var(--muted); direction: ltr; text-align: center; margin-bottom: 16px; }
.speed-opts .option-btn { direction: rtl; text-align: right; }
.speed-timer { display: inline-block; min-width: 34px; background: var(--blue-light); color: var(--blue-dark); border-radius: 999px; padding: 3px 12px; }
.speed-timer.warn { background: var(--red-light); color: var(--red); animation: pulse 1s infinite; }

/* match game */
.match-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match-col { display: flex; flex-direction: column; gap: 8px; }
.match-btn {
  padding: 13px 12px; border-radius: 10px; border: 1.5px solid var(--border); background: white;
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; transition: all .15s;
}
.match-btn.en { direction: ltr; text-align: left; color: var(--blue-dark); font-weight: 700; }
.match-btn.he { text-align: right; }
.match-btn:hover:not(.done) { border-color: var(--blue); background: var(--blue-light); }
.match-btn.sel { border-color: var(--blue); background: var(--blue-light); box-shadow: 0 0 0 3px rgba(46,83,149,.14); }
.match-btn.done { background: var(--green-light); border-color: #b7dfc0; color: #1c6b2e; cursor: default; opacity: .7; }
.match-btn.shake { animation: shake .35s; border-color: var(--red); background: var(--red-light); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@media (max-width: 560px) {
  /* 4 stats across is too tight at phone width and the last one wraps alone — 2x2 reads better */
  .sr-row { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .mem-grid { grid-template-columns: repeat(3, 1fr); }
  .mem-face { font-size: 12.5px; }
  .mem-face.he { font-size: 11px; }
  .speed-word { font-size: 30px; }
  .match-btn { font-size: 12.5px; padding: 11px 8px; }
}

/* ---------------------------------------------------------------------------
   Keyboard focus.
   The quiz is explicitly keyboard-driven (1-4 to answer, arrows to navigate), and
   most controls here paint their own background, which hides the browser's default
   focus ring against it. Without a visible ring a keyboard user cannot tell which
   option is selected. :focus-visible keeps it off for plain mouse clicks.
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--blue, #2E5395);
  outline-offset: 2px;
  border-radius: 4px;
}
.option-btn:focus-visible,
.btn:focus-visible,
.mode-card:focus-visible,
.tab-btn:focus-visible,
.grade:focus-visible,
.mem-card:focus-visible,
.match-btn:focus-visible,
.qdot:focus-visible,
.mark-btn:focus-visible {
  outline: 3px solid #f2b705;
  outline-offset: 3px;
}
.wf-input:focus-visible { outline: 3px solid var(--blue, #2E5395); outline-offset: 2px; }
/* Skipping to the question area shouldn't be a hidden target. */
a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue, #2E5395); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Reduced motion. Card entry animations, the flip transform, the pulsing timer and
   the readiness ring sweep are decorative; a student who has asked the OS for less
   motion should not have to sit through them (and some find them nauseating).
   Progress-bar width is kept, since it carries meaning.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .grid .card { animation: none; }
  .timer.warn { animation: none; }
}

/* ===========================================================================
   PREMIUM POLISH
   Restraint is the point. Every rule below either sharpens hierarchy, gives an
   action physical feedback, or makes a state (success, empty, progress) legible
   at a glance. Nothing here is decoration for its own sake, and nothing moves
   during reading — motion is reserved for moments the student caused.
   =========================================================================== */

/* ---- cards: lift on hover, press on click. Real surfaces respond. ---- */
.card, .panel, .mode-card, .walk-card, .chapter-card, .fact-card, .day-card {
  border-radius: var(--r-lg);
}
.card {
  box-shadow: var(--sh-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.card:active { transform: translateY(-1px); box-shadow: var(--sh-2); }
.panel { box-shadow: var(--sh-2); }

/* The single most important card on a screen should look it. */
.card-star { position: relative; overflow: hidden; }
.card-star::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), #6d4bd6, #f2b705);
  opacity: 0; transition: opacity .25s var(--ease);
}
.card-star:hover::before { opacity: 1; }

/* ---- buttons: a press you can feel ---- */
.btn {
  border-radius: 11px;
  transition: transform .14s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), filter .18s var(--ease);
  box-shadow: var(--sh-1);
}
.btn:hover:not(:disabled) { transform: translateY(-1.5px); box-shadow: var(--sh-2); filter: saturate(1.08); }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.btn:disabled { opacity: .5; box-shadow: none; }

/* ---- options: the primary interaction of the whole app ---- */
.option-btn {
  border-radius: 12px;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .12s var(--ease);
}
.option-btn:hover:not([disabled]) { transform: translateX(-2px); }
.option-btn.correct { animation: optRight .4s var(--ease); }
.option-btn.incorrect { animation: optWrong .38s var(--ease); }
@keyframes optRight { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } }
@keyframes optWrong { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }

/* ---- progress: a bar that reads as motion toward something ---- */
.progressbar-outer { border-radius: 99px; overflow: hidden; }
.progressbar-inner {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), #4a7fd4);
  transition: width .45s var(--ease);
}

/* ---- section headings: anchored, not floating ---- */
.sec-h { position: relative; padding-inline-start: 14px; }
.sec-h::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: .18em .18em;
  width: 4px; border-radius: 99px; background: linear-gradient(180deg, var(--blue), #6d4bd6);
}

/* ---- the four modes, made explicit on the home screen ---- */
.modes-strip {
  display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 16px; box-shadow: var(--sh-1); margin: 22px 0 6px;
}
.ms-item { flex: 1 1 130px; min-width: 120px; padding: 6px 4px; }
.ms-item b { display: block; font-size: 14.5px; color: var(--blue-dark); }
.ms-item span { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.ms-item.coach b { color: var(--coach); }
.ms-item.exam b { color: var(--amber); }
.ms-arrow { align-self: center; color: var(--border); font-size: 18px; font-weight: 700; }
@media (max-width: 620px) { .ms-arrow { display: none; } .ms-item { flex-basis: 45%; } }

/* ---- empty and success states: the two moments most apps leave blank ---- */
.progress-pill.empty { opacity: .75; font-style: normal; }
.success-panel { text-align: center; padding: 34px 22px; }
.success-panel .sp-icon {
  font-size: 46px; line-height: 1; display: block; margin-bottom: 10px;
  animation: popIn .5s var(--ease) backwards;
}
.success-panel h3 { margin: 0 0 8px; color: var(--blue-dark); font-size: 21px; }
.success-panel p { color: var(--muted); font-size: 14.5px; max-width: 52ch; margin: 0 auto 18px; }
@keyframes popIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===========================================================================
   COACH MODE
   Purple throughout, and used nowhere else in the app — so "I am being taught,
   not measured" is legible before a single word is read. This colour separation
   is the visual half of keeping Coach and Exam from blurring together.
   =========================================================================== */
.hero-coach { background: linear-gradient(135deg, #4b2fa8 0%, #6d4bd6 55%, #8b6ef0 100%); }

.mode-note .mn-grid { display: grid; gap: 8px; }
@media (min-width: 700px) { .mode-note .mn-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
.mn-tag {
  display: inline-block; font-size: 11.5px; font-weight: 800; padding: 2px 9px;
  border-radius: 99px; margin-inline-end: 6px; vertical-align: 1px;
}
.mn-tag.coach { background: var(--coach-light); color: var(--coach); }
.mn-tag.exam { background: var(--amber-light); color: var(--amber); }
.mn-foot { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

.coach-panel { padding: 22px 20px 24px; }
.panel-h { margin: 0 0 6px; color: var(--blue-dark); font-size: 18px; }
.panel-sub { margin: 0 0 16px; font-size: 14px; color: var(--muted); line-height: 1.7; }

/* progress rail */
.coach-progress {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); font-weight: 700; margin-bottom: 10px;
}
.cp-dots { display: flex; gap: 5px; flex: 1; }
.cp-dots i {
  width: 100%; max-width: 26px; height: 4px; border-radius: 99px; background: var(--border);
  transition: background .3s var(--ease);
}
.cp-dots i.done { background: var(--coach); }
.cp-dots i.cur { background: #b39cf5; }
.cp-type { background: var(--coach-light); color: var(--coach); padding: 3px 10px; border-radius: 99px; }

.coach-ask { font-size: 13.5px; font-weight: 700; color: var(--blue-dark); margin: 10px 0 4px; }

/* the guided prompt — the moment the student is asked to think */
.coach-prompt-box {
  background: linear-gradient(180deg, var(--coach-light), #fff);
  border: 1.5px solid #d9cdfb; border-radius: var(--r-md);
  padding: 18px 18px 16px; margin-top: 16px;
  animation: riseIn .35s var(--ease) backwards;
}
.cpb-q { font-size: 15.5px; font-weight: 700; color: #3a2478; line-height: 1.6; }
.cpb-sub { font-size: 13px; color: var(--muted); margin: 7px 0 13px; line-height: 1.65; }
.coach-input {
  width: 100%; font-family: inherit; font-size: 15px; padding: 11px 14px;
  border: 1.5px solid #d9cdfb; border-radius: 10px; margin-bottom: 12px; background: #fff;
}
.coach-input:focus { outline: none; border-color: var(--coach); box-shadow: 0 0 0 3px rgba(109,75,214,.14); }
.coach-yours {
  font-size: 13.5px; background: var(--coach-light); color: #3a2478;
  padding: 9px 14px; border-radius: 10px; margin-bottom: 12px;
}

/* a revealed reasoning step */
.coach-step {
  border-inline-start: 3px solid var(--coach); background: #FAF8FF;
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 14px 16px; margin: 12px 0;
  animation: riseIn .38s var(--ease) backwards;
}
.coach-step .cs-h { font-size: 13px; font-weight: 800; color: var(--coach); margin-bottom: 6px; letter-spacing: .01em; }
.coach-step .cs-b { font-size: 14.5px; line-height: 1.75; }
.coach-step .cs-b p { margin: 0 0 9px; }
.coach-step .cs-b p:last-child { margin-bottom: 0; }
@keyframes riseIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* the detected connector, shown as evidence */
.coach-signal {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1.5px solid var(--coach); border-radius: 99px;
  padding: 6px 8px 6px 16px; margin: 4px 0 8px;
}
.cs-word { font-family: Georgia, serif; font-size: 17px; font-weight: 700; color: var(--coach); direction: ltr; }
.cs-dir { background: var(--coach); color: #fff; font-size: 12.5px; font-weight: 800; padding: 3px 11px; border-radius: 99px; }
.coach-sub { font-size: 13px; color: var(--muted); }

.coach-tells { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.coach-tells li {
  display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.6;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px;
}
.ct-icon { font-size: 15px; color: var(--coach); flex: 0 0 auto; }

.coach-ol { margin: 8px 0 0; padding-inline-start: 20px; }
.coach-ol li { margin-bottom: 8px; line-height: 1.7; }

.coach-flag {
  background: var(--blue-light); border-inline-start: 3px solid var(--blue);
  padding: 9px 13px; border-radius: 0 9px 9px 0; font-size: 13.5px; line-height: 1.65; margin-top: 9px;
}
.coach-trap {
  background: var(--red-light); border-inline-start: 3px solid var(--red);
  padding: 10px 13px; border-radius: 0 9px 9px 0; font-size: 13.5px; line-height: 1.65; margin-top: 10px;
}
.coach-law {
  background: linear-gradient(135deg, #FFF7E0, #fffdf6);
  border: 1.5px solid #f0d894; border-radius: var(--r-md);
  padding: 13px 16px; font-size: 14px; line-height: 1.7; margin-top: 14px;
}

/* option grouping — elimination made mechanical */
.coach-groups { display: grid; gap: 8px; margin: 10px 0; }
.cg { border-radius: 11px; padding: 10px 13px; border: 1.5px solid; }
.cg-keep { background: var(--green-light); border-color: #a9dcb4; }
.cg-cut { background: #F7F8FA; border-color: var(--border); opacity: .92; }
.cg-h { font-size: 12.5px; font-weight: 800; margin-bottom: 4px; }
.cg-keep .cg-h { color: var(--green); }
.cg-cut .cg-h { color: var(--muted); }
.cg-w { direction: ltr; text-align: left; font-size: 14.5px; font-weight: 600; }
.cg-cut .cg-w { text-decoration: line-through; text-decoration-thickness: 1.5px; color: #9aa1ad; }

/* grammatical split of the options */
.coach-split { display: grid; gap: 8px; margin: 12px 0; align-items: center; }
@media (min-width: 640px) { .coach-split { grid-template-columns: 1fr auto 1fr; } }
.csp { background: #fff; border: 1.5px solid var(--border); border-radius: 11px; padding: 10px 13px; }
.csp-h { font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
.csp-w { direction: ltr; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--blue-dark); }
.csp-vs { text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); }

/* restatement widgets */
.coach-core {
  background: #fff; border: 1.5px dashed var(--coach); border-radius: 11px;
  padding: 12px; text-align: center; font-size: 15px; font-weight: 700; color: #3a2478; margin: 10px 0;
}
.coach-op { background: #fff; border: 1.5px solid var(--coach); border-radius: 11px; padding: 11px 14px; margin: 8px 0; }
.co-name { direction: ltr; text-align: left; font-family: Georgia, serif; font-size: 15.5px; font-weight: 700; color: var(--coach); }
.co-shape { font-size: 13.5px; color: var(--text); margin-top: 3px; }
.coach-quants { display: grid; gap: 7px; margin: 9px 0; }
.cq { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.cq b { direction: ltr; display: inline-block; font-family: Georgia, serif; font-size: 15px; color: var(--coach); }
.cq span { display: block; font-size: 13.5px; margin-top: 2px; }
.cq i { display: block; font-size: 12.5px; color: var(--red); margin-top: 3px; font-style: normal; }
.coach-filters { display: grid; gap: 8px; margin: 10px 0; }
.cf { display: flex; gap: 11px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.6; }
.cf-n {
  flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; background: var(--coach); color: #fff;
  font-size: 12.5px; font-weight: 800; display: grid; place-items: center;
}

/* reading widgets */
.coach-rtype { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.cr-icon { font-size: 26px; }
.coach-rtype b { display: block; font-size: 16px; color: var(--blue-dark); }
.cr-time { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.coach-two { display: grid; gap: 8px; }
@media (min-width: 640px) { .coach-two { grid-template-columns: 1fr 1fr; } }
.c2 { border-radius: 11px; padding: 11px 13px; border: 1.5px solid; }
.c2 b { font-size: 12.5px; font-weight: 800; display: block; margin-bottom: 4px; }
.c2 p { margin: 0; font-size: 13.5px; line-height: 1.65; }
.c2-yes { background: var(--green-light); border-color: #a9dcb4; }
.c2-yes b { color: var(--green); }
.c2-no { background: #F7F8FA; border-color: var(--border); }
.c2-no b { color: var(--muted); }

/* elimination interaction */
.coach-elim-note { font-size: 13px; color: var(--muted); margin: 14px 0 9px; line-height: 1.65; }
.coach-elim-note span { display: block; color: var(--coach); font-weight: 700; margin-top: 2px; }
.coach-options .coach-opt { display: flex; align-items: center; gap: 10px; position: relative; }
.coach-opt .opt-t { flex: 1; }
.coach-opt .opt-cut {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  background: #F1F3F7; color: var(--muted); font-size: 13px; font-weight: 800;
  transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.coach-opt .opt-cut:hover { background: var(--red-light); color: var(--red); transform: scale(1.12); }
.coach-opt.struck { opacity: .55; }
.coach-opt.struck .opt-t { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--red); }
.coach-opt.struck .opt-cut { background: var(--red-light); color: var(--red); }
.coach-elim-count { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 8px; }

.coach-verdict { border-radius: var(--r-md); padding: 14px 16px; margin: 14px 0 10px; animation: riseIn .3s var(--ease); }
.coach-verdict.ok { background: var(--green-light); border: 1.5px solid #a9dcb4; }
.coach-verdict.no { background: var(--red-light); border: 1.5px solid #efb9b9; }
.cv-top { font-size: 16px; font-weight: 800; margin-bottom: 5px; }
.coach-verdict.ok .cv-top { color: var(--green); }
.coach-verdict.no .cv-top { color: var(--red); }
.cv-line { font-size: 14.5px; direction: ltr; text-align: left; }
.cv-line.dim { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.coach-elimres { border-radius: 11px; padding: 10px 14px; font-size: 13.5px; line-height: 1.65; margin-bottom: 10px; }
.coach-elimres.good { background: var(--green-light); color: #1f6b2e; }
.coach-elimres.bad { background: #FFF7E0; color: #8a6508; }
.coach-why { background: var(--blue-light); border-radius: var(--r-md); padding: 13px 16px; font-size: 14px; line-height: 1.75; margin-top: 10px; }
.cw-h { font-size: 12.5px; font-weight: 800; color: var(--blue); margin-bottom: 4px; }
.coach-actions { justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.coach-passage { margin-bottom: 14px; }
.coach-passage summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--blue-dark); padding: 9px 12px; background: var(--blue-light); border-radius: 10px; }
.coach-passage p { direction: ltr; text-align: left; font-size: 14.5px; line-height: 1.8; margin: 10px 0; }

/* inline coaching inside normal practice */
.coach-inline { margin-top: 12px; border: 1.5px solid #d9cdfb; border-radius: var(--r-md); background: #FAF8FF; overflow: hidden; }
.coach-inline > summary {
  cursor: pointer; list-style: none; padding: 11px 14px; font-size: 13.5px; font-weight: 700;
  color: var(--coach); display: flex; align-items: center; gap: 8px;
}
.coach-inline > summary::-webkit-details-marker { display: none; }
.coach-inline > summary::after { content: "▾"; margin-inline-start: auto; transition: transform .2s var(--ease); }
.coach-inline[open] > summary::after { transform: rotate(180deg); }
.ci-badge { font-size: 15px; }
.ci-body { padding: 0 14px 14px; }
.ci-step { margin-bottom: 10px; }
.ci-h { font-size: 12.5px; font-weight: 800; color: var(--coach); margin-bottom: 4px; }
.ci-b { font-size: 13.5px; line-height: 1.7; }
.ci-b p { margin: 0 0 7px; }
.coach-hint {
  border: 1.5px solid #d9cdfb; background: #FAF8FF; border-radius: var(--r-md);
  padding: 13px 15px; margin: 12px 0; animation: riseIn .3s var(--ease);
}
.ch-title { font-size: 12.5px; font-weight: 800; color: var(--coach); margin-bottom: 9px; }
.hintbtn.on { background: var(--coach-light); color: var(--coach); border-color: #d9cdfb; }

/* expert walkthroughs */
.walk-grid { display: grid; gap: 12px; margin-bottom: 8px; }
@media (min-width: 700px) { .walk-grid { grid-template-columns: 1fr 1fr; } }
.walk-card {
  text-align: start; font-family: inherit; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 18px; box-shadow: var(--sh-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.walk-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--coach); }
.wc-title { font-size: 15.5px; font-weight: 800; color: var(--blue-dark); line-height: 1.45; }
.wc-q { direction: ltr; text-align: left; font-size: 12.5px; color: var(--muted); margin: 8px 0 10px; line-height: 1.55; }
.wc-cta { font-size: 12.5px; font-weight: 800; color: var(--coach); }

.walk-overlay {
  position: fixed; inset: 0; background: rgba(20, 24, 45, .58); backdrop-filter: blur(3px);
  z-index: 200; display: grid; place-items: center; padding: 18px;
  animation: fadeIn .2s var(--ease);
}
.walk-sheet {
  background: var(--card); border-radius: var(--r-lg); max-width: 640px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 26px 24px 24px; position: relative;
  box-shadow: var(--sh-3); animation: sheetIn .32s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.walk-close {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px; width: 32px; height: 32px;
  border: none; border-radius: 50%; background: #F1F3F7; color: var(--muted);
  font-size: 14px; cursor: pointer; font-family: inherit;
}
.walk-close:hover { background: var(--red-light); color: var(--red); }
.wh-kicker { font-size: 11.5px; font-weight: 800; color: var(--coach); letter-spacing: .06em; }
.walk-head h3 { margin: 5px 0 8px; font-size: 20px; color: var(--blue-dark); line-height: 1.35; padding-inline-end: 34px; }
.wh-q { direction: ltr; text-align: left; font-size: 13px; color: var(--muted); background: #F7F8FA; padding: 10px 12px; border-radius: 10px; line-height: 1.6; }
.walk-beats { margin: 16px 0; display: grid; gap: 10px; }
.wbeat {
  border-inline-start: 3px solid var(--coach); background: #FAF8FF;
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 12px 15px;
  animation: riseIn .34s var(--ease) backwards; animation-delay: calc(var(--i) * 20ms);
}
.wb-k { font-size: 12px; font-weight: 800; color: var(--coach); margin-bottom: 4px; }
.wb-t { font-size: 14.5px; line-height: 1.75; }
.walk-more { width: 100%; justify-content: center; }
.wm-c { opacity: .6; font-size: 12px; margin-inline-start: 8px; }

/* reading routine */
.routine-list { display: grid; gap: 9px; margin: 14px 0; }
.rstep { display: flex; gap: 13px; align-items: flex-start; background: #FAFBFD; border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; }
.rs-n {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%;
  background: var(--blue-light); color: var(--blue); display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
}
.rs-k { font-size: 13.5px; font-weight: 800; color: var(--blue-dark); margin-bottom: 3px; }
.rs-t { font-size: 14px; line-height: 1.72; }
.rtype-grid { display: grid; gap: 9px; }
.rtype { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
.rtype summary { cursor: pointer; list-style: none; padding: 13px 16px; display: flex; align-items: center; gap: 11px; font-size: 14.5px; }
.rtype summary::-webkit-details-marker { display: none; }
.rt-icon { font-size: 19px; }
.rt-time { margin-inline-start: auto; font-size: 12px; color: var(--muted); font-weight: 700; }
.rtype[open] summary { border-block-end: 1px solid var(--border); background: #FAFBFD; }
.rt-body { padding: 13px 16px; display: grid; gap: 9px; }
.rt-row { display: flex; gap: 11px; align-items: flex-start; }
.rt-l {
  flex: 0 0 62px; font-size: 11.5px; font-weight: 800; color: var(--muted);
  background: #F1F3F7; border-radius: 99px; padding: 3px 0; text-align: center;
}
.rt-row p { margin: 0; font-size: 13.5px; line-height: 1.7; }
.rt-row.trap .rt-l { background: var(--red-light); color: var(--red); }
.rt-row.move .rt-l { background: var(--green-light); color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .btn:hover:not(:disabled), .option-btn:hover:not([disabled]),
  .walk-card:hover { transform: none; }
}
/* The third bucket spans the full width under the two it contrasts. */
.csp-glue { grid-column: 1 / -1; background: #FAFBFD; }

/* backup nudge on the home screen */
.backup-nudge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.backup-nudge .btn { padding: 7px 16px; font-size: 13px; }

/* re-testing: tells her this is a different question on the same idea */
.retest-note {
  background: #f3ecff; border: 1px solid #ddd0f5; color: #5b3a9e;
  border-radius: 9px; padding: 8px 13px; font-size: 13px; font-weight: 700;
  margin-bottom: 12px;
}
.retest-note.subtle { background: #f7f9fd; border-color: var(--border); color: var(--muted); font-weight: 600; }
.typed-prompt { direction: rtl; text-align: right; white-space: pre-line; }

/* resume prompt */
.resume-chip {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--amber-light); border: 1px solid #ecd08a; color: #7a5a00;
  border-radius: 999px; padding: 6px 8px 6px 16px; font-size: 13px; font-weight: 700;
}
.resume-chip .btn { padding: 6px 14px; font-size: 12.5px; }