/* LandingPrep — clean editorial light theme. Mobile-first. */

:root {
  /* Surfaces — bright, modern, classy */
  --bg:        #FBFCFE;   /* near-white with cool tint */
  --surface:   #FFFFFF;
  --surface-2: #F4F6FB;   /* tonal panel */
  --tint:      #F6F8FC;

  /* Ink */
  --ink:       #0B1220;
  --ink-2:     #1F2937;
  --ink-3:     #4B5563;
  --ink-4:     #94A3B8;

  /* Lines */
  --line:      rgba(15, 23, 42, 0.08);
  --line-2:    rgba(15, 23, 42, 0.14);
  --line-soft: rgba(15, 23, 42, 0.04);

  /* Brand — vibrant, modern */
  --accent:    #4F46E5;   /* indigo primary */
  --accent-2:  #7C3AED;   /* violet secondary */
  --accent-3:  #06B6D4;   /* cyan tertiary (banners/accents) */
  --accent-ink: #FFFFFF;
  --ember:     #F97316;   /* warm orange */
  --leaf:      #10B981;   /* fresh green */
  --gold:      #F59E0B;
  --sky:       #0EA5E9;
  --rose:      #EC4899;

  /* Status */
  --success:   #10B981;
  --warn:      #F59E0B;
  --error:     #EF4444;

  /* Per-exam accents (for badges, dots — not full backgrounds) */
  --c-ielts:    #B83A2E;
  --c-toefl:    #1F4F8B;
  --c-pte:      #2F6F4E;
  --c-celpip:   #C8501F;
  --c-duolingo: #4F8B2F;
  --c-gre:      #5B3A8B;
  --c-gmat:     #B5852C;

  /* Type */
  --serif: "Source Serif 4", "Source Serif Pro", "Newsreader", Georgia, serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadow */
  --shadow-sm: 0 1px 0 rgba(14,17,22,0.04), 0 1px 2px rgba(14,17,22,0.04);
  --shadow:    0 1px 0 rgba(14,17,22,0.04), 0 6px 24px -8px rgba(14,17,22,0.10);
  --shadow-lg: 0 1px 0 rgba(14,17,22,0.04), 0 24px 60px -20px rgba(14,17,22,0.18);

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; background: transparent; cursor: pointer; }
/* Accessible keyboard focus ring (app-quality) — only on keyboard nav, never on mouse */
a:focus-visible, button:focus-visible, .btn:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible,
.chip:focus-visible, .blg-chip:focus-visible, .seo-card:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px;
}
img { max-width: 100%; display: block; }

/* ───────── Layout ───────── */

.shell    { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.shell-sm { max-width: 760px;  margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) {
  .shell, .shell-sm { padding: 0 32px; }
}

/* ───────── Type ───────── */

.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
  font-size: clamp(40px, 7.6vw, 76px);
  color: var(--ink);
}
.display em {
  font-style: italic;
  color: var(--ember);
  font-feature-settings: "ss01";
}
.h1 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
  font-size: clamp(30px, 4.6vw, 46px);
  color: var(--ink);
  margin: 0;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--ink);
  margin: 0;
}
.h3 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
}
.body  { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.body-lg { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.fine  { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tabular { font-variant-numeric: tabular-nums; }

/* ───────── Surfaces ───────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.card:hover { box-shadow: var(--shadow); border-color: var(--line-2); }
.card-soft {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ───────── Buttons ───────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.btn:hover { border-color: var(--line-2); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--surface);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35); filter: brightness(1.05); }
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover { color: var(--ink); background: var(--line-soft); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.btn-link:hover { color: var(--ember); border-color: var(--ember); }

/* ───────── Chips ───────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-3); }
.chip.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ───────── Top bar ───────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 244, 238, 0.86);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--ink);
  display: grid;
  place-items: center;
  color: var(--surface);
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
}
.nav { display: none; gap: 2px; flex: 1 1 auto; justify-content: center; min-width: 0; flex-wrap: nowrap; }
.nav a {
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.nav a:hover, .nav a.is-on { background: var(--line-soft); color: var(--ink); }
/* Show the full row only when there's room (≈1035px needed); otherwise the
   hamburger is used. Must match the .menu-btn breakpoint below exactly so there
   is never a gap with neither nav nor hamburger visible. */
@media (min-width: 1100px) {
  .nav { display: flex; }
}
/* A touch more breathing room on very wide screens */
@media (min-width: 1280px) {
  .nav { gap: 4px; }
  .nav a { padding: 8px 13px; font-size: 14px; }
}

/* ───────── Mobile menu trigger ───────── */
.menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
}
.menu-btn span {
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  margin: 0 auto;
}
@media (min-width: 1100px) { .menu-btn { display: none; } }

/* Mobile header fit: on narrow phones the brand wordmark + icons + auth button +
   menu overflow the viewport (horizontal scroll, auth button cut off). Hide the
   wordmark (the logo mark stays) so everything fits cleanly. overflow-x:clip is a
   belt-and-suspenders guard that never breaks the sticky header. */
@media (max-width: 480px) {
  body { overflow-x: clip; }
  .topbar-inner { gap: 10px; }
  .brand-name { display: none; }
}

/* ───────── Marquee row ───────── */

.marquee {
  border-bottom: 1px solid var(--line);
  background: var(--tint);
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  gap: 56px;
  padding: 12px 0;
  animation: scroll 40s linear infinite;
  font-size: 13px;
  color: var(--ink-3);
}
.marquee-track span { display: inline-flex; align-items: center; gap: 8px; }
.marquee-track .dot { width: 4px; height: 4px; border-radius: 999px; background: var(--ink-4); }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ───────── Hero ───────── */

.hero {
  padding: 56px 0 40px;
  position: relative;
}
@media (min-width: 720px) { .hero { padding: 96px 0 64px; } }

.hero-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: end;
  }
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.hero-fine {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  color: var(--ink-3);
  font-size: 13px;
}
.hero-fine span { display: inline-flex; align-items: center; gap: 6px; }
.hero-fine .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--leaf); }

/* Mosaic — quiet right-side composition (no floating 3D) */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 60px);
  gap: 12px;
  position: relative;
}
@media (max-width: 999px) { .mosaic { grid-template-rows: repeat(6, 50px); } }
@media (max-width: 480px) {
  .mosaic { grid-template-rows: repeat(6, 44px); gap: 10px; }
}
.tile {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tile.t-band     { grid-column: 1 / span 3; grid-row: 1 / span 3; }
.tile.t-progress { grid-column: 4 / span 3; grid-row: 1 / span 2; background: var(--ink); color: var(--surface); border-color: var(--ink); }
.tile.t-streak   { grid-column: 4 / span 3; grid-row: 3 / span 2; background: var(--tint); }
.tile.t-skill    { grid-column: 1 / span 4; grid-row: 4 / span 3; }
.tile.t-mock     { grid-column: 5 / span 2; grid-row: 5 / span 2; background: var(--surface-2); }

.tile .label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.tile.t-progress .label { color: rgba(255,255,255,0.6); }
.tile .num {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tile .sub { font-size: 12px; color: var(--ink-3); }
.tile.t-progress .sub { color: rgba(255,255,255,0.7); }

/* progress bar inside dark tile */
.bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  background: var(--ember);
  border-radius: 999px;
}

/* skill rows */
.skill-row { display: grid; grid-template-columns: 90px 1fr 38px; align-items: center; gap: 10px; }
.skill-row + .skill-row { margin-top: 10px; }
.skill-row .name { font-size: 13px; color: var(--ink-2); }
.skill-row .num  { font-family: var(--serif); font-size: 16px; color: var(--ink); text-align: right; line-height: 1; letter-spacing: -0.01em; }
.skill-track { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.skill-track i { display: block; height: 100%; border-radius: 999px; background: var(--ink); }

/* ───────── Section ───────── */

.section {
  padding: 64px 0;
}
.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.section-header h2 { max-width: 560px; }

/* exam grid */
.exam-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .exam-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1000px) { .exam-grid { grid-template-columns: repeat(3, 1fr); } }

.exam-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.exam-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.exam-card .top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.exam-card .name {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}
.exam-card .name em { color: var(--ember); font-style: italic; }
.exam-card .full { color: var(--ink-3); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 6px; }
.exam-card .blurb { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.exam-card .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.exam-card .stat .k { font-family: var(--serif); font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
.exam-card .stat .v { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.exam-card .badge {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.exam-card .actions {
  display: flex;
  gap: 8px;
}

/* exam dot color */
.exam-card[data-exam="ielts"]    .dotc { background: var(--c-ielts); }
.exam-card[data-exam="toefl"]    .dotc { background: var(--c-toefl); }
.exam-card[data-exam="pte"]      .dotc { background: var(--c-pte); }
.exam-card[data-exam="celpip"]   .dotc { background: var(--c-celpip); }
.exam-card[data-exam="duolingo"] .dotc { background: var(--c-duolingo); }
.exam-card[data-exam="gre"]      .dotc { background: var(--c-gre); }
.exam-card[data-exam="gmat"]     .dotc { background: var(--c-gmat); }
.dotc { width: 8px; height: 8px; border-radius: 999px; }

/* feature row */
.feature-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }
.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}
.feature .num {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ember);
  font-style: italic;
  margin-bottom: 8px;
}
.feature h3 { margin: 6px 0 10px; }
.feature p { color: var(--ink-3); font-size: 14px; line-height: 1.6; margin: 0; }

/* ───────── Guide page ───────── */

.guide-hero {
  padding: 48px 0 24px;
}
@media (min-width: 720px) { .guide-hero { padding: 72px 0 32px; } }
.guide-crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.guide-crumbs a { color: var(--ink-3); text-decoration: none; }
.guide-crumbs a:hover { color: var(--ink); }
.guide-stats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 28px;
}
@media (min-width: 720px) { .guide-stats { grid-template-columns: repeat(4, 1fr); } }
.guide-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
}
.guide-stat .k {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.guide-stat .v {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
}

.guide-tabs {
  position: sticky;
  top: 64px;
  z-index: 10;
  display: flex;
  gap: 0;
  margin: 24px 0 0;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 244, 238, 0.92);
  backdrop-filter: blur(8px);
  overflow-x: auto;
  scrollbar-width: none;
}
.guide-tabs::-webkit-scrollbar { display: none; }
.guide-tabs button {
  position: relative;
  padding: 14px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}
.guide-tabs button.is-on { color: var(--ink); }
.guide-tabs button.is-on::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.guide-cols {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 28px;
}
@media (min-width: 900px) { .guide-cols { grid-template-columns: 1.4fr 0.6fr; gap: 32px; } }
.guide-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}
@media (min-width: 720px) { .guide-card { padding: 28px; } }
.guide-card h3 { margin: 0 0 8px; }
.guide-card p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.guide-card + .guide-card { margin-top: 16px; }

.row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}
.row:first-of-type { border-top: 0; }
.row dt { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.row dd { color: var(--ink); font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 540px) {
  .row { grid-template-columns: 1fr; gap: 4px; }
}

.aside-card {
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--r-lg);
  padding: 22px;
}
.aside-card h3 { color: var(--surface); margin-bottom: 12px; }
.aside-card p { color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.55; }
.aside-card .btn {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--surface);
  margin-top: 16px;
}

.note {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(181, 133, 44, 0.10);
  border: 1px solid rgba(181, 133, 44, 0.28);
  color: #6b4a14;
  font-size: 13px;
  line-height: 1.55;
}

.faq details {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-3);
  transition: transform 160ms ease;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 12px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }

/* footer */
.footer {
  border-top: 1px solid var(--line);
  background: var(--tint);
  padding: 56px 0 32px;
  margin-top: 64px;
}
.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }
.footer h3 { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; font-weight: 600; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.footer a:hover { color: var(--ink); }
.footer .colophon {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-3);
}

/* ───────── Mobile menu drawer ───────── */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(14,17,22,0.4);
  display: none;
}
.drawer.is-open { display: block; }
.drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 340px);
  background: var(--bg);
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--line);
  overflow-y: auto;                 /* the 14 items now scroll — bottom items were cut off before */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.drawer-panel a {
  display: flex;
  align-items: center;
  min-height: 46px;                 /* comfortable tap target */
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  letter-spacing: -0.01em;
  border-radius: 8px;
}
.drawer-panel a:hover, .drawer-panel a:active, .drawer-panel a.is-on { background: var(--line-soft); }
.drawer-panel a:last-of-type { border-bottom: 0; }
.drawer-close {
  position: sticky;                 /* stays reachable while the list scrolls */
  top: 0;
  z-index: 2;
  flex-shrink: 0;
  align-self: flex-end;
  width: 40px; height: 40px;
  border-radius: 8px;
  font-size: 24px;
  background: var(--bg);
  margin-bottom: 4px;
}

/* utility */
.row-gap-12 { display: flex; flex-wrap: wrap; gap: 12px; }
.stack-12 { display: grid; gap: 12px; }
.stack-16 { display: grid; gap: 16px; }
.stack-24 { display: grid; gap: 24px; }
.full { width: 100%; }
.center { text-align: center; }

/* ─────────────────────────────────────────────
   MOCK TEST ENGINE
───────────────────────────────────────────── */

.test-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* Test selector page */
.test-select-hero {
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--line);
}
.test-type-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 24px;
}
@media (min-width: 640px) { .test-type-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .test-type-grid { grid-template-columns: repeat(3, 1fr); } }

.test-type-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  cursor: pointer;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.test-type-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.test-type-card.is-selected { border-color: var(--ink); box-shadow: var(--shadow); }
.test-type-card .ttc-icon { font-size: 28px; }
.test-type-card .ttc-name { font-family: var(--serif); font-size: 20px; letter-spacing: -0.01em; }
.test-type-card .ttc-desc { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.test-type-card .ttc-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.test-type-card .ttc-meta span { font-size: 12px; color: var(--ink-3); background: var(--tint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }

/* Test intro */
.test-intro {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px;
}
.test-intro h1 { font-family: var(--serif); font-size: clamp(28px,4vw,42px); letter-spacing: -0.01em; }
.test-intro .section-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.test-intro .section-list li {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 18px;
  font-size: 15px; color: var(--ink-2);
}
.test-intro .section-list li .s-icon { font-size: 22px; }
.test-intro .section-list li .s-info { flex: 1; }
.test-intro .section-list li .s-time { font-family: var(--serif); font-size: 14px; color: var(--ink-3); }

/* Test header bar */
.test-topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 56px; gap: 16px;
}
.test-topbar .tb-exam { font-family: var(--serif); font-size: 18px; letter-spacing: -0.01em; }
.test-topbar .tb-section { font-size: 13px; color: var(--ink-3); }
.test-topbar .tb-timer {
  font-family: var(--mono); font-size: 18px; font-weight: 600;
  color: var(--ink); letter-spacing: 0.04em;
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 4px 12px;
}
.test-topbar .tb-timer.urgent { color: var(--error); border-color: rgba(184,58,46,0.3); background: rgba(184,58,46,0.06); }
.test-progress-bar {
  height: 3px; background: var(--line);
  position: sticky; top: 56px; z-index: 19;
}
.test-progress-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 400ms ease; }

/* Section intro card */
.section-intro-card {
  max-width: 680px; margin: 40px auto; padding: 0 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
}
.section-intro-card .sic-head {
  background: var(--ink); color: var(--surface);
  padding: 24px 28px;
}
.section-intro-card .sic-head h2 { font-family: var(--serif); font-size: 28px; color: var(--surface); margin: 0; }
.section-intro-card .sic-body { padding: 24px 28px; }
.section-intro-card .sic-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.section-intro-card .sic-stat { background: var(--tint); border-radius: var(--r-md); padding: 14px; }
.section-intro-card .sic-stat .k { font-family: var(--serif); font-size: 24px; letter-spacing: -0.01em; }
.section-intro-card .sic-stat .v { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-top: 4px; }

/* Question layout */
.question-layout {
  max-width: 900px; margin: 0 auto; padding: 24px 20px 80px;
}
.question-nav-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 15;
  background: rgba(247,244,238,0.95); border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; gap: 12px;
}
.q-counter { font-size: 13px; color: var(--ink-3); }
.q-dots { display: flex; gap: 4px; flex-wrap: wrap; max-width: 400px; }
.q-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--line); border: 1px solid var(--line-2); transition: background 140ms; }
.q-dot.answered { background: var(--accent); border-color: var(--accent); }
.q-dot.current { background: var(--ink); border-color: var(--ink); }

/* Question card */
.q-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px; margin-bottom: 16px;
}
.q-num { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.q-text { font-size: 16px; line-height: 1.6; color: var(--ink); margin-bottom: 18px; }
.q-options { display: grid; gap: 8px; }
.q-option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--surface);
  cursor: pointer; transition: border-color 120ms, background 120ms;
  font-size: 15px; color: var(--ink-2); line-height: 1.5;
}
.q-option:hover { border-color: var(--line-2); background: var(--tint); }
.q-option.is-selected { border-color: var(--accent); background: rgba(26,45,92,0.06); color: var(--accent); }
.q-option.is-correct { border-color: var(--success); background: rgba(47,111,78,0.08); color: var(--success); }
.q-option.is-wrong { border-color: var(--error); background: rgba(184,58,46,0.06); color: var(--error); }
.q-option .opt-letter {
  width: 22px; height: 22px; min-width: 22px; border-radius: 999px;
  border: 1.5px solid currentColor; display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
}
.q-tfng .q-option { flex: 1; justify-content: center; }
.q-tfng { display: flex; gap: 8px; }

/* Passage display */
.passage-block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px; margin-bottom: 20px;
  max-height: 460px; overflow-y: auto;
  font-size: 15px; line-height: 1.75; color: var(--ink-2);
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.passage-block h3 { font-family: var(--serif); color: var(--ink); margin: 0 0 16px; }

/* Audio control for listening */
.audio-panel {
  background: var(--ink); color: var(--surface);
  border-radius: var(--r-lg); padding: 20px 24px;
  margin-bottom: 20px; display: flex; align-items: center; gap: 16px;
}
.audio-panel .ap-context { flex: 1; font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.5; }
.audio-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  border: 0; cursor: pointer; transition: transform 120ms;
}
.audio-btn:hover { transform: scale(1.03); }
.audio-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Essay / writing textarea */
.writing-panel { display: grid; gap: 16px; }
.writing-prompt {
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 24px;
  font-size: 15px; color: var(--ink-2); line-height: 1.65;
}
.writing-prompt strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.writing-area {
  width: 100%; min-height: 260px; padding: 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); font: inherit; font-size: 15px;
  line-height: 1.7; color: var(--ink); resize: vertical;
  transition: border-color 140ms;
}
.writing-area:focus { outline: none; border-color: var(--accent); }
.word-count-bar { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.word-count-bar .wc-num { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.word-count-bar .wc-num.ok { color: var(--success); }
.word-count-bar .wc-num.low { color: var(--warn); }

/* Speaking section */
.speaking-panel { display: grid; gap: 16px; }
.speaking-prompt-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
}
.speaking-prompt-card .spc-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); margin-bottom: 10px; }
.speaking-prompt-card .spc-text { font-size: 16px; line-height: 1.65; color: var(--ink); }
.speaking-mic-area {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px;
}
.mic-ring {
  width: 80px; height: 80px; border-radius: 999px;
  background: var(--ink); display: grid; place-items: center;
  font-size: 32px; cursor: pointer; transition: transform 140ms, background 140ms;
  border: 0; box-shadow: 0 4px 20px rgba(14,17,22,0.18);
}
.mic-ring:hover { transform: scale(1.08); }
.mic-ring.recording { background: var(--error); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(184,58,46,0.4)} 50%{box-shadow:0 0 0 16px rgba(184,58,46,0)} }
.mic-status { font-size: 13px; color: var(--ink-3); }

/* Report page */
.report-shell { max-width: 760px; margin: 0 auto; padding: 40px 20px 80px; }
.report-hero { text-align: center; margin-bottom: 32px; }
.report-hero .rh-score {
  font-family: var(--serif); font-size: clamp(56px,10vw,96px);
  letter-spacing: -0.03em; color: var(--ink); line-height: 1;
}
.report-hero .rh-label { font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.score-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 24px;
}
@media (min-width: 640px) { .score-grid { grid-template-columns: repeat(4, 1fr); } }
.score-cell {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px; text-align: center;
}
.score-cell .sc-band { font-family: var(--serif); font-size: 32px; letter-spacing: -0.02em; }
.score-cell .sc-skill { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 6px; }
.report-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; margin-bottom: 16px; }
.report-section h3 { font-family: var(--serif); font-size: 20px; margin: 0 0 12px; }
.feedback-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; font-size: 14px; color: var(--ink-2); }
.feedback-row .fr-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.answer-review { margin-top: 12px; display: grid; gap: 8px; }
.ar-item { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 10px 12px; border-radius: var(--r-md); }
.ar-item.correct { background: rgba(47,111,78,0.06); color: var(--success); border: 1px solid rgba(47,111,78,0.2); }
.ar-item.wrong { background: rgba(184,58,46,0.06); color: var(--error); border: 1px solid rgba(184,58,46,0.2); }
.ar-item .ai-q { color: var(--ink); font-weight: 500; flex: 1; }

/* ─────────────────────────────────────────────
   LEARNING CLUB
───────────────────────────────────────────── */
.lc-hero { padding: 48px 0 32px; border-bottom: 1px solid var(--line); }
.lc-tabs-outer {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  background: rgba(247,244,238,0.92); backdrop-filter: blur(8px);
  position: sticky; top: 64px; z-index: 10;
}
.lc-tabs-outer::-webkit-scrollbar { display: none; }
.lc-tab { padding: 14px 18px; font-size: 13px; font-weight: 500; color: var(--ink-3); white-space: nowrap; cursor: pointer; position: relative; border: 0; background: transparent; }
.lc-tab.active { color: var(--ink); }
.lc-tab.active::after { content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:2px; background:var(--ink); border-radius:2px; }
.lc-body { padding: 32px 0 64px; }
.topic-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px;
}
.topic-card .tc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; cursor: pointer;
  gap: 12px;
}
.topic-card .tc-head:hover { background: var(--tint); }
.topic-card .tc-title { font-family: var(--serif); font-size: 18px; letter-spacing: -0.01em; flex: 1; }
.topic-card .tc-toggle { font-size: 22px; color: var(--ink-3); transition: transform 160ms; }
.topic-card.is-open .tc-toggle { transform: rotate(45deg); }
.topic-card .tc-body { padding: 0 22px 22px; }
.topic-card .tc-prompt { background: var(--tint); border-radius: var(--r-md); padding: 14px 16px; font-size: 15px; color: var(--ink-2); line-height: 1.6; margin-bottom: 16px; border: 1px solid var(--line); }
.topic-card .tc-approach { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; font-style: italic; }
.sample-answer {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px;
  font-size: 14px; line-height: 1.75; color: var(--ink-2);
  white-space: pre-wrap;
}
.vocab-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vocab-pill { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--ink-2); }
.mistake-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mistake-list li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); background: rgba(184,58,46,0.04); border: 1px solid rgba(184,58,46,0.14); border-radius: var(--r-md); padding: 10px 14px; }
.mistake-list li::before { content:"✗"; color: var(--error); font-weight: 700; flex-shrink: 0; }

/* ─────────────────────────────────────────────
   AI AGENTS
───────────────────────────────────────────── */
.agent-shell { min-height: 100vh; display: flex; flex-direction: column; }
.agent-hero { padding: 40px 0 28px; border-bottom: 1px solid var(--line); }
.agent-main { flex: 1; display: flex; flex-direction: column; }

/* Speaking Agent */
.speaking-agent-layout {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
  padding: 32px 0;
}
@media (min-width: 900px) { .speaking-agent-layout { grid-template-columns: 1fr 1fr; align-items: start; } }
.agent-mode-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.agent-topic-card {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 22px; cursor: pointer;
  transition: border-color 140ms, transform 140ms;
}
.agent-topic-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.agent-topic-card.is-selected { border-color: var(--ink); }
.agent-topic-card .atc-exam { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.agent-topic-card .atc-prompt { font-size: 15px; color: var(--ink); margin-top: 6px; line-height: 1.5; }
.voice-stage {
  background: var(--ink); border-radius: var(--r-xl); padding: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  color: var(--surface); min-height: 360px; justify-content: center;
}
.voice-stage .vs-status { font-size: 13px; color: rgba(255,255,255,0.6); }
.voice-stage .vs-transcript {
  width: 100%; background: rgba(255,255,255,0.07);
  border-radius: var(--r-md); padding: 14px 16px;
  font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85);
  min-height: 80px; max-height: 200px; overflow-y: auto;
}
.voice-stage .vs-ai-reply {
  width: 100%; background: rgba(255,255,255,0.12);
  border-radius: var(--r-md); padding: 14px 16px;
  font-size: 14px; line-height: 1.6; color: #fff;
  min-height: 60px;
}

/* Writing Agent */
.writing-agent-layout { display: grid; gap: 24px; padding: 32px 0; }
@media (min-width: 900px) { .writing-agent-layout { grid-template-columns: 1fr 1fr; } }
.wa-input-col, .wa-output-col { display: flex; flex-direction: column; gap: 16px; }
.wa-task-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-task-btn {
  height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: border-color 120ms, background 120ms;
}
.wa-task-btn:hover { border-color: var(--line-2); }
.wa-task-btn.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.wa-feedback-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
}
.wa-feedback-card h3 { font-family: var(--serif); font-size: 20px; margin: 0 0 14px; }
.score-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 8px 16px; margin-bottom: 14px;
}
.score-badge .sb-val { font-family: var(--serif); font-size: 28px; letter-spacing: -0.02em; }
.score-badge .sb-label { font-size: 12px; color: var(--ink-3); }
.feedback-item { margin-bottom: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.feedback-item strong { color: var(--ink); display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Chatbot */
.chatbot-shell {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); display: flex; flex-direction: column;
  height: 480px; overflow: hidden;
}
.chatbot-header {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--surface);
}
.chatbot-header .ch-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--leaf); }
.chatbot-header h3 { font-family: var(--serif); font-size: 18px; color: var(--surface); margin: 0; }
.chatbot-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.chat-msg { display: flex; gap: 10px; }
.chat-msg.user { flex-direction: row-reverse; }
.chat-bubble {
  max-width: 78%; padding: 10px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.55; color: var(--ink);
  background: var(--tint); border: 1px solid var(--line);
}
.chat-msg.user .chat-bubble { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chatbot-input-row {
  display: flex; gap: 8px; padding: 12px;
  border-top: 1px solid var(--line);
}
.chatbot-input {
  flex: 1; height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font: inherit; font-size: 14px;
}
.chatbot-input:focus { outline: none; border-color: var(--accent); }
.chatbot-send { height: 40px; width: 40px; border-radius: 999px; background: var(--ink); color: var(--surface); border: 0; cursor: pointer; font-size: 16px; display: grid; place-items: center; transition: background 120ms; }
.chatbot-send:hover { background: #000; }

/* ─────────────────────────────────────────────
   PROGRESS PAGE
───────────────────────────────────────────── */
.progress-hero { padding: 48px 0 32px; border-bottom: 1px solid var(--line); }
.stats-row {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  margin: 28px 0;
}
@media (min-width: 640px) { .stats-row { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
}
.stat-card .sc-val { font-family: var(--serif); font-size: 36px; letter-spacing: -0.02em; line-height: 1; }
.stat-card .sc-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 8px; }
.history-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.history-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.history-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.history-table tr:last-child td { border-bottom: 0; }
.history-table .ht-score { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.history-empty { text-align: center; padding: 48px 20px; color: var(--ink-3); }
.history-empty .he-icon { font-size: 48px; margin-bottom: 16px; }

/* ─────────────────────────────────────────────
   GUIDE ENHANCED
───────────────────────────────────────────── */
.exam-selector-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.exam-sel-btn {
  height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: border-color 120ms, background 120ms;
  display: flex; align-items: center; gap: 6px;
}
.exam-sel-btn .esb-dot { width: 8px; height: 8px; border-radius: 999px; }
.exam-sel-btn:hover { border-color: var(--line-2); }
.exam-sel-btn.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.guide-section-cards { display: grid; gap: 10px; margin-top: 16px; }
.guide-section-card {
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px;
}
.guide-section-card .gsc-name { font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.guide-section-card .gsc-types { font-size: 13px; color: var(--ink-3); line-height: 1.6; }

/* Common mistakes list */
.cm-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cm-list li { display: flex; gap: 12px; background: rgba(200,80,31,0.05); border: 1px solid rgba(200,80,31,0.15); border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.cm-list li::before { content:"⚠"; flex-shrink: 0; }
.score-guide-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.score-guide-table tr { border-bottom: 1px solid var(--line-soft); }
.score-guide-table tr:last-child { border-bottom: 0; }
.score-guide-table td { padding: 10px 4px; font-size: 14px; }
.score-guide-table td:first-child { font-family: var(--mono); font-weight: 600; color: var(--ink); width: 160px; }
.score-guide-table td:last-child { color: var(--ink-3); }

/* ─────────────────────────────────────────────
   MISC UTILITIES
───────────────────────────────────────────── */
.empty-state { padding: 64px 20px; text-align: center; color: var(--ink-3); }
.empty-state .es-icon { font-size: 48px; margin-bottom: 16px; }
.badge-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.badge-pill.green { background: rgba(47,111,78,0.10); color: var(--success); }
.badge-pill.amber { background: rgba(181,133,44,0.10); color: var(--gold); }
.badge-pill.red { background: rgba(184,58,46,0.08); color: var(--error); }
.tip-box { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(26,45,92,0.06); border: 1px solid rgba(26,45,92,0.15); font-size: 13px; color: #1a2d5c; line-height: 1.55; }
.tip-box strong { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ─────────────────────────────────────────────
   SHARED BUTTON EXTENSIONS
───────────────────────────────────────────── */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 16px; border-radius: var(--r-md);
  border: 1.5px solid var(--line-2); background: transparent;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: border-color 120ms, background 120ms, color 120ms;
}
.btn-outline:hover { border-color: var(--ink); color: var(--ink); background: var(--tint); }
.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.25rem; }

/* ─────────────────────────────────────────────
   AGENT SHARED LAYOUT
───────────────────────────────────────────── */
.agent-shell {
  max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.agent-header {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid #4f46e5;
  border-radius: var(--r-lg);
}
.agent-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 22px; flex-shrink: 0;
  background: #4f46e5; color: #fff;
}

/* Chat shared */
.chat-area {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  min-height: 340px; max-height: 520px;
  scroll-behavior: smooth;
}
.chat-bubble {
  max-width: 80%; padding: 0.6rem 0.9rem;
  border-radius: 14px; font-size: 14px; line-height: 1.55;
  border: 1px solid var(--line);
}
.chat-user { background: var(--ink); color: #fff; border-color: var(--ink); }
.chat-agent { background: var(--surface); color: var(--ink); }
.bubble-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; margin-bottom: 3px; }
.bubble-text { line-height: 1.55; }

/* Typing indicator */
.typing-indicator { display: flex; gap: 5px; align-items: center; padding: 0.6rem 0.9rem !important; }
.typing-indicator span {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--ink-4); animation: bounce 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-7px)} }

/* Input bar */
.input-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.chat-input {
  flex: 1; height: 40px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--tint); font: inherit; font-size: 14px;
}
.chat-input:focus { outline: none; border-color: var(--accent); }

/* Mic button */
.mic-btn {
  width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
  border: 0; color: #fff; font-size: 20px;
  display: grid; place-items: center; cursor: pointer;
  transition: transform 140ms;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.mic-btn:hover { transform: scale(1.08); }
.mic-btn.recording { animation: pulse 1.5s ease-in-out infinite; }
.mic-pulse { animation: blink 0.8s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Agent speaking bar */
.agent-speaking-bar {
  background: var(--ink); color: var(--surface);
  border-radius: var(--r-md); padding: 0.6rem 1rem;
  font-size: 13px; display: flex; align-items: center; gap: 0.6rem;
}
.wave { font-family: var(--mono); letter-spacing: 0.05em; color: #7dd3fc; }

/* ─────────────────────────────────────────────
   SPEAKING AGENT SETUP
───────────────────────────────────────────── */
.setup-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 1.75rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.setup-card h3 { margin: 0; font-family: var(--serif); font-size: 1.25rem; }
.topic-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .topic-grid { grid-template-columns: repeat(3, 1fr); } }
.topic-btn {
  padding: 0.6rem 0.9rem; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: border-color 120ms, background 120ms; text-align: left;
}
.topic-btn:hover { border-color: var(--line-2); background: var(--tint); }
.topic-btn.active { font-weight: 600; }
.setup-opener-preview {
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 0.9rem 1rem;
  font-size: 14px; color: var(--ink-2); line-height: 1.6;
}
.setup-opener-preview strong { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.setup-tips { font-size: 13px; color: var(--ink-3); }
.setup-tips h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.setup-tips ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 5px; }
.setup-tips li { line-height: 1.5; }

/* Feedback panel */
.feedback-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 1.75rem;
}
.feedback-panel h3 { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.4rem; }
.feedback-panel h4 { margin: 0 0 0.5rem; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.score-val { font-family: var(--serif); font-size: 2rem; letter-spacing: -0.02em; line-height: 1; }
.score-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-top: 4px; }
.score-cell.highlight { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.score-cell.highlight .score-lbl { color: rgba(255,255,255,0.6); }
.tip-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tip-list li {
  background: rgba(26,45,92,0.05); border: 1px solid rgba(26,45,92,0.12);
  border-radius: var(--r-md); padding: 10px 12px;
  font-size: 14px; color: var(--ink-2); line-height: 1.5;
}
.tip-list li::before { content: "→ "; font-weight: 700; color: var(--accent); }

/* ─────────────────────────────────────────────
   WRITING AGENT
───────────────────────────────────────────── */
.writing-agent-shell {
  max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.prompt-selector {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.prompt-tab {
  height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface);
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  cursor: pointer; transition: border-color 120ms, color 120ms;
  white-space: nowrap;
}
.prompt-tab:hover { border-color: var(--line-2); color: var(--ink); }
.prompt-tab.active { font-weight: 600; }
.prompt-card {
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.25rem 1.4rem;
}
.prompt-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ink); color: var(--surface);
  border-radius: 4px; padding: 2px 8px; margin-bottom: 0.6rem;
}
.prompt-text { font-size: 15px; color: var(--ink); line-height: 1.65; margin: 0 0 0.5rem; }
.prompt-meta { font-size: 12px; color: var(--ink-3); }
.wa-tab-bar {
  display: flex; gap: 0; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.wa-tab {
  padding: 0.75rem 1.25rem; font-size: 14px; font-weight: 500;
  color: var(--ink-3); border: 0; background: transparent; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color 120ms;
  white-space: nowrap;
}
.wa-tab:hover { color: var(--ink); }
.wa-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.write-tab { display: flex; flex-direction: column; gap: 0.75rem; }
.chatbot-shell {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); display: flex; flex-direction: column;
  height: 480px; overflow: hidden;
}
.chat-header {
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: var(--surface);
  font-size: 14px;
}
.score-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.score-bar-wrap { display: flex; flex-direction: column; gap: 6px; }
.score-bar-header {
  display: flex; justify-content: space-between;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.score-bar-track {
  height: 8px; border-radius: 999px;
  background: var(--line); overflow: hidden;
}
.score-bar-fill { height: 100%; border-radius: 999px; transition: width 600ms ease; }
.score-details {
  margin: 0; padding: 0 0 0 1.1rem;
  font-size: 13px; color: var(--ink-3); display: grid; gap: 5px;
}
.sample-answer-block {
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem 1.25rem;
}
.sample-answer-block h4 { margin: 0 0 0.75rem; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.wc-track { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.wc-fill { height: 100%; border-radius: 999px; transition: width 400ms ease; }
.wc-label { font-size: 12px; font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.word-count-bar { display: flex; align-items: center; gap: 10px; }

/* ─────────────────────────────────────────────
   PROGRESS PAGE (EXTENDED)
───────────────────────────────────────────── */
.progress-shell {
  max-width: 1000px; margin: 0 auto; padding: 2rem 1.25rem 4rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.progress-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.25rem;
  border-top: 3px solid var(--accent);
  display: flex; flex-direction: column; gap: 0.25rem;
}
.stat-icon { font-size: 1.5rem; margin-bottom: 0.25rem; }
.stat-value { font-family: var(--serif); font-size: 2rem; letter-spacing: -0.02em; line-height: 1; }
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
.stat-sub { font-size: 11px; color: var(--ink-4); }
.confirm-banner {
  background: rgba(184,58,46,0.06); border: 1px solid rgba(184,58,46,0.2);
  border-radius: var(--r-md); padding: 0.75rem 1rem;
  font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.empty-state { text-align: center; padding: 4rem 1.5rem; color: var(--ink-3); }
.progress-section { display: flex; flex-direction: column; gap: 1rem; }
.section-heading { margin: 0; font-family: var(--serif); font-size: 1.3rem; letter-spacing: -0.01em; }
.exam-summary-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .exam-summary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .exam-summary-grid { grid-template-columns: repeat(3, 1fr); } }
.exam-summary-card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg); padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.exam-summary-header {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 14px;
}
.exam-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.exam-count { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.exam-summary-stats { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.ess-stat { display: flex; flex-direction: column; gap: 2px; }
.ess-val { font-family: var(--serif); font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1; }
.ess-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.ess-spark { margin-left: auto; }
.history-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.filter-row { display: flex; align-items: center; gap: 0.5rem; }
.filter-select {
  height: 34px; padding: 0 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.history-table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); }
.history-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.history-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); background: var(--tint); }
.history-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.history-table tbody tr:last-child td { border-bottom: 0; }
.history-table tbody tr:hover td { background: var(--tint); }
.exam-tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.section-tag {
  display: inline-block; margin-right: 4px; margin-bottom: 2px;
  background: var(--tint); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 6px;
  font-size: 11px; color: var(--ink-3);
}

/* ─────────────────────────────────────────────
   HOME (CLEAN VERSION)
───────────────────────────────────────────── */
.hero-inner-clean { max-width: 880px; margin: 0 auto; text-align: center; padding: 16px 0; }
.hero-inner-clean .hero-meta { justify-content: center; }
.hero-inner-clean .hero-cta { justify-content: center; flex-wrap: wrap; }
.hero-inner-clean .hero-fine { justify-content: center; flex-wrap: wrap; }
.btn-lg { height: 50px; padding: 0 28px; font-size: 16px; border-radius: 12px; }
.exam-list-simple {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .exam-list-simple { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.exam-list-simple a {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 14px;
  text-decoration: none; color: var(--ink);
  transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
.exam-list-simple a:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px -8px rgba(79,70,229,0.20);
  transform: translateY(-2px);
}
.exam-list-simple .el-dot { width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0; }
.exam-list-simple .el-name { font-family: var(--serif); font-size: 18px; letter-spacing: -0.01em; flex-shrink: 0; }
.exam-list-simple .el-tag { color: var(--ink-3); font-size: 13px; flex: 1; }
.exam-list-simple .el-arrow { color: var(--accent); font-size: 18px; transition: transform .2s ease; }
.exam-list-simple a:hover .el-arrow { transform: translateX(3px); }
.exam-list-simple .el-new { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, #16a34a, #0ea5e9); color: #fff; flex-shrink: 0; box-shadow: 0 2px 8px -2px rgba(14,165,233,0.5); }

.card-cta {
  background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(124,58,237,0.06), rgba(14,165,233,0.05));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(28px, 5vw, 56px);
}
.card-signup {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 28px 32px;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04), 0 12px 32px -16px rgba(15,23,42,0.10);
}

.user-avatar {
  width: 26px; height: 26px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; font-size: 12px;
  display: inline-grid; place-items: center;
  margin-right: 6px;
}

/* Brighter exam cards (for any remaining usage) */
.exam-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
.exam-card:hover {
  border-color: var(--line-2);
  box-shadow: 0 12px 32px -12px rgba(15,23,42,0.12);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────
   FLOATING CHATBOT WIDGET (global)
───────────────────────────────────────────── */
/* ── AI Tutor FAB ─────────────────────────────────────────────── */
.chat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 60px; height: 60px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 26px;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(79,70,229,0.40);
  cursor: pointer; border: 0;
  transition: transform 160ms, box-shadow 160ms;
}
.chat-fab:hover { transform: scale(1.08); box-shadow: 0 14px 36px rgba(79,70,229,0.50); }
.chat-fab.is-open { transform: scale(1.05); }
.chat-fab--ai {
  background: linear-gradient(135deg, #6d28d9, #4f46e5, #0ea5e9);
  box-shadow: 0 10px 30px rgba(109,40,217,0.45);
}
.cpf-badge {
  position: absolute; top: 6px; right: 6px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 999px; min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; pointer-events: none;
}

/* ── Floating panel ───────────────────────────────────────────── */
.chat-panel-floating {
  position: fixed; right: 20px; bottom: 92px; z-index: 49;
  width: min(400px, calc(100vw - 40px));
  max-height: min(580px, calc(100vh - 120px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -16px rgba(15,23,42,0.35);
  animation: cpf-in 180ms ease-out;
}
@keyframes cpf-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Full-page AI Tutor modal ─────────────────────────────────── */
.cpf-fullpage {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: cpf-in 180ms ease-out;
}
.cpf-fullpage-inner {
  width: 100%; max-width: 780px;
  height: min(88vh, 760px);
  background: var(--surface); border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 80px -20px rgba(15,23,42,0.50);
}
.cpf-head--full { padding: 16px 20px; }
.cpf-starters--full {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 20px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}
.cpf-starters--full .cpf-starter-chip { max-width: none; font-size: 13px; }

/* Error bar */
.cpf-error {
  padding: 8px 14px; font-size: 13px; color: #92400e;
  background: #fef3c7; border-bottom: 1px solid #fde68a;
  flex-shrink: 0;
}

/* Stop button inside input row */
button.send--stop {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Header */
.cpf-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #4f46e5, #6d28d9);
  flex-shrink: 0;
}
.cpf-head-left { display: flex; align-items: center; gap: 8px; }
.cpf-title { color: #fff; font-weight: 700; font-size: 15px; }
.cpf-ai-badge {
  background: rgba(255,255,255,0.2); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 999px;
}
.cpf-head-right { display: flex; align-items: center; gap: 4px; }
.cpf-tab-btn {
  background: rgba(255,255,255,0.15); border: 0; color: #fff;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  font-size: 15px; display: grid; place-items: center;
  transition: background 140ms;
}
.cpf-tab-btn:hover, .cpf-tab-btn.active { background: rgba(255,255,255,0.3); }
.cpf-close {
  background: transparent; border: 0; color: rgba(255,255,255,0.8);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
  transition: color 140ms;
}
.cpf-close:hover { color: #fff; }

/* Body */
.cpf-body {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--tint);
}
.cpf-body::-webkit-scrollbar { width: 4px; }
.cpf-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

/* Starter chips */
.cpf-starters {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 14px 10px; background: var(--tint);
  border-bottom: 1px solid var(--line);
}
.cpf-starter-chip {
  font-size: 12px; padding: 5px 12px; border-radius: 999px;
  border: 1.5px solid var(--accent); color: var(--accent);
  background: rgba(79,70,229,0.06); cursor: pointer; font-weight: 500;
  transition: all 140ms; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.cpf-starter-chip:hover { background: var(--accent); color: #fff; }

/* Input area */
.cpf-input {
  display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--line); background: var(--surface);
  flex-shrink: 0;
}
.cpf-textarea {
  flex: 1; min-height: 38px; max-height: 100px; padding: 9px 14px;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--bg); font-size: 14px; font-family: inherit;
  line-height: 1.4; transition: border-color 140ms;
}
.cpf-textarea:focus { outline: none; border-color: var(--accent); }
.cpf-textarea:disabled { opacity: 0.6; }
button.send {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  color: #fff; border: 0; font-size: 16px; font-weight: 700;
  cursor: pointer; flex-shrink: 0; display: grid; place-items: center;
  transition: opacity 140ms, transform 140ms;
}
button.send:disabled { opacity: 0.35; cursor: default; transform: none; }
button.send:hover:not(:disabled) { transform: scale(1.08); }
.cpf-stop-btn {
  display: block; width: 100%; padding: 6px;
  background: transparent; border: 0; border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 12px; cursor: pointer;
  transition: color 140ms;
}
.cpf-stop-btn:hover { color: var(--error); }

/* Key setup */
.cpf-key-setup {
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  background: var(--tint); flex: 1; overflow-y: auto;
}
.cpf-key-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.cpf-key-desc { font-size: 13px; color: var(--ink-3); line-height: 1.6; margin: 0; }
.cpf-key-input {
  width: 100%; height: 40px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surface); font-size: 14px;
}
.cpf-key-input:focus { outline: none; border-color: var(--accent); }
.cpf-key-save {
  height: 40px; padding: 0 20px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  color: #fff; border: 0; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: opacity 140ms;
}
.cpf-key-save:disabled { opacity: 0.4; cursor: default; }
.cpf-key-clear {
  background: transparent; border: 1px solid var(--line); color: var(--ink-3);
  font-size: 12px; padding: 4px 12px; border-radius: 8px; cursor: pointer;
  align-self: flex-start;
}
.cpf-key-clear:hover { color: var(--error); border-color: var(--error); }

/* Streaming cursor */
.typing-cursor {
  display: inline-block; color: var(--accent);
  animation: blink 0.8s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Typing dots (loading indicator) */
.typing-dots { display: flex; align-items: center; gap: 4px; padding: 4px 0; }
.typing-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3);
  animation: tdot 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tdot {
  0%,80%,100%{transform:scale(0.7);opacity:0.4}
  40%{transform:scale(1);opacity:1}
}

/* ─────────────────────────────────────────────
   LOGIN / AUTH
───────────────────────────────────────────── */
.login-shell {
  min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.login-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 40px;
  box-shadow: 0 24px 60px -20px rgba(15,23,42,0.18);
  width: 100%; max-width: 440px;
}
.login-card h1 { font-family: var(--serif); font-size: 30px; margin: 0 0 8px; letter-spacing: -0.02em; }
.login-card .sub { color: var(--ink-3); margin: 0 0 24px; font-size: 14px; }
.login-card label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.login-card input {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg); font-size: 15px; margin-bottom: 14px;
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card .login-btn {
  width: 100%; height: 48px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border: 0; border-radius: 12px;
  font-weight: 600; font-size: 15px; cursor: pointer;
  margin-top: 8px;
}
.login-card .toggle {
  margin-top: 18px; text-align: center; font-size: 14px; color: var(--ink-3);
}
.login-card .toggle a { color: var(--accent); cursor: pointer; font-weight: 600; }
.login-error { background: rgba(239,68,68,0.08); color: var(--error); border: 1px solid rgba(239,68,68,0.2); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }

/* ─────────────────────────────────────────────
   PROGRESS DASHBOARD STATS (Mosaic-style)
───────────────────────────────────────────── */
.dashboard-mosaic {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  margin-bottom: 28px;
}
@media (min-width: 720px) { .dashboard-mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; } }
.dm-tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 1px 0 rgba(15,23,42,0.03), 0 8px 20px -12px rgba(15,23,42,0.08);
}
.dm-tile.t-band { grid-column: span 1; grid-row: span 2; }
.dm-tile.t-progress { background: linear-gradient(135deg, var(--ink), #1F2937); color: #fff; }
.dm-tile.t-streak { background: linear-gradient(135deg, var(--ember), var(--gold)); color: #fff; }
.dm-tile .label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.dm-tile .num { font-family: var(--serif); font-size: 56px; letter-spacing: -0.03em; line-height: 1; }
.dm-tile .sub { font-size: 13px; opacity: 0.75; }
.dm-tile .bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.2); overflow: hidden; }
.dm-tile .bar i { display: block; height: 100%; background: var(--ember); border-radius: 999px; }
.dm-tile .skill-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.dm-tile .skill-row .name { width: 80px; color: var(--ink-2); }
.dm-tile .skill-row .skill-track { flex: 1; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.dm-tile .skill-row .skill-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; }
.dm-tile .skill-row .num { font-family: var(--serif); font-size: 14px; min-width: 32px; text-align: right; }
.dm-tile.t-band .num { font-size: 64px; }
.dm-tile.t-band .splits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.dm-tile.t-band .splits .sp {
  border-top: 1px solid var(--line); padding-top: 8px;
}
.dm-tile.t-band .splits .sp .v { font-family: var(--serif); font-size: 16px; }
.dm-tile.t-band .splits .sp .k { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }

/* ─────────────────────────────────────────────
   BLOG / SEO PAGES
───────────────────────────────────────────── */
.seo-shell { max-width: 920px; margin: 0 auto; padding: 32px 20px 64px; }
.seo-hero { padding: 32px 0 24px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.seo-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .seo-grid { grid-template-columns: repeat(2, 1fr); } }
/* Blog LIST page: wider container + 3–4 cards per row (article page stays narrow) */
.blg-index { max-width: 1280px; }
.blg-index .seo-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.blg-index .seo-card h3 { font-size: 19px; }
/* Blog search + tag filter */
.blg-filterbar { margin: 4px 0 26px; }
.blg-search { position: relative; max-width: 540px; margin: 0 0 14px; }
.blg-search input { width: 100%; padding: 12px 38px 12px 42px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; background: var(--surface); color: var(--ink-1); }
.blg-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.blg-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; opacity: .55; pointer-events: none; }
.blg-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: var(--surface-2); width: 26px; height: 26px; border-radius: 999px; cursor: pointer; color: var(--ink-3); font-size: 12px; line-height: 1; }
.blg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.blg-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 120ms, color 120ms, background 120ms; display: inline-flex; align-items: center; gap: 6px; }
.blg-chip:hover { border-color: var(--accent); color: var(--ink-1); }
.blg-chip.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }
.blg-chip-n { font-size: 11px; opacity: .7; font-weight: 700; }
.blg-noresults { text-align: center; padding: 44px 20px; color: var(--ink-3); }
.blg-noresults p { margin-bottom: 16px; }
.seo-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px;
  cursor: pointer; transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}
.seo-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(79,70,229,0.18); }
.seo-card .tag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.seo-card h3 { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; margin: 8px 0; }
.seo-card p { font-size: 14px; color: var(--ink-3); line-height: 1.6; margin: 0; }
.seo-article-body { display: flex; flex-direction: column; gap: 14px; line-height: 1.75; }
.seo-article-body h2 { font-family: var(--serif); font-size: 26px; letter-spacing: -0.02em; margin: 24px 0 8px; }
.seo-article-body h3 { font-family: var(--serif); font-size: 19px; letter-spacing: -0.01em; margin: 16px 0 4px; }
.seo-article-body ul { padding-left: 20px; }
.seo-article-body li { margin-bottom: 6px; }
.seo-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.seo-readtime { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.seo-card-cta { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--accent); }

/* ── Rich blog article (neat, step-by-step, FAQ) ── */
/* Content-site width: uses the page instead of wasting wide side margins. Running
   prose stays at a comfortable measure; tables/callouts/steps/TOC fill the full width. */
.blg-shell { max-width: 1000px; }
.blg-body > .blg-section > p,
.blg-body > .blg-section > h2,
.blg-body > .blg-section > h3,
.blg-body > .blg-section > .blg-bullets,
.blg-excerpt { max-width: 800px; }
.blg-head { padding: 8px 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.blg-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 4px 10px; border-radius: 999px; }
.blg-head h1 { font-family: var(--serif); font-size: clamp(28px, 4.6vw, 44px); line-height: 1.12; letter-spacing: -0.02em; margin: 14px 0 10px; }
.blg-excerpt { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.blg-meta { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--ink-3); }
.blg-meta .dot { opacity: 0.5; }
.blg-toc { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-bottom: 28px; }
.blg-toc-t { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.blg-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.blg-toc li { margin-bottom: 6px; font-size: 14px; break-inside: avoid; }
.blg-toc a { color: var(--ink-2); text-decoration: none; }
.blg-toc a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 640px) { .blg-toc ol { columns: 1; } }
.blg-body { font-size: 16.5px; }
.blg-section { display: flex; flex-direction: column; gap: 12px; }
.blg-section h2 { scroll-margin-top: 80px; padding-top: 6px; }
.blg-body p { margin: 0; color: var(--ink-1); }
.blg-body a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.blg-callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 14px; margin: 4px 0; font-size: 15.5px; line-height: 1.6; border: 1px solid var(--line); background: var(--surface-2); }
.blg-callout-ic { font-size: 18px; line-height: 1.5; flex-shrink: 0; }
.blg-callout.info { border-color: color-mix(in srgb, #4F46E5 30%, var(--line)); background: color-mix(in srgb, #4F46E5 7%, var(--surface)); }
.blg-callout.tip { border-color: color-mix(in srgb, #16a34a 32%, var(--line)); background: color-mix(in srgb, #16a34a 8%, var(--surface)); }
.blg-callout.money { border-color: color-mix(in srgb, #d97706 34%, var(--line)); background: color-mix(in srgb, #d97706 9%, var(--surface)); }
.blg-callout.warn { border-color: color-mix(in srgb, #dc2626 32%, var(--line)); background: color-mix(in srgb, #dc2626 7%, var(--surface)); }
.blg-callout.key { border-color: color-mix(in srgb, #7c3aed 32%, var(--line)); background: color-mix(in srgb, #7c3aed 8%, var(--surface)); }
.blg-steps { list-style: none; counter-reset: blgstep; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.blg-steps li { counter-increment: blgstep; position: relative; padding: 14px 16px 14px 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); line-height: 1.6; }
.blg-steps li::before { content: counter(blgstep); position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.blg-bullets { padding-left: 4px; margin: 4px 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.blg-bullets li { position: relative; padding-left: 26px; line-height: 1.6; }
.blg-bullets li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
.blg-tablewrap { overflow-x: auto; margin: 4px 0; }
.blg-table { width: 100%; border-collapse: collapse; font-size: 14.5px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.blg-table th { background: var(--surface-2); text-align: left; padding: 10px 14px; font-weight: 700; border-bottom: 2px solid var(--line); }
.blg-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.blg-table tr:last-child td { border-bottom: none; }
.blg-faq { margin-top: 40px; }
.blg-faq > h2 { font-family: var(--serif); font-size: 26px; letter-spacing: -0.02em; margin: 0 0 14px; }
.blg-faq-item { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--surface); }
.blg-faq-item.open { border-color: var(--accent); }
.blg-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; background: none; border: none; cursor: pointer; text-align: left; font-size: 16px; font-weight: 600; color: var(--ink-1); }
.blg-faq-ic { font-size: 22px; color: var(--accent); flex-shrink: 0; line-height: 1; }
.blg-faq-a { padding: 0 18px 18px; line-height: 1.7; color: var(--ink-2); font-size: 15.5px; }
.blg-cta { margin-top: 44px; padding: 26px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), color-mix(in srgb, var(--accent-2) 8%, var(--surface))); }
.blg-cta h3 { margin: 0; font-size: 20px; font-family: var(--serif); }
.blg-cta p { margin: 8px 0 16px; color: var(--ink-2); line-height: 1.6; }
.blg-related { margin-top: 48px; }
.blg-related > h2 { font-family: var(--serif); font-size: 24px; margin: 0 0 16px; }

/* ─────────────────────────────────────────────
   MOCK TEST — PAGINATION & SIDE-BY-SIDE READING
───────────────────────────────────────────── */
.part-nav {
  display: flex; gap: 8px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px;
  margin: 0 0 20px;
}
.part-pill {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 14px; border-radius: 8px;
  border: 1.5px solid var(--line); background: var(--surface);
  font-size: 12px; cursor: pointer;
  transition: border-color 140ms, background 140ms;
  min-width: 90px;
}
.part-pill:hover { border-color: var(--accent); }
.part-pill.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }
.part-pill.done::after {
  content: "✓"; position: absolute; top: 4px; right: 6px;
  color: var(--success); font-weight: 700;
}
.part-pill { position: relative; }
.pp-label { font-weight: 600; }
.pp-meta { font-size: 11px; opacity: 0.75; }

.part-pager {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 32px; padding: 16px; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px;
}
.pp-counter { font-size: 13px; color: var(--ink-3); font-weight: 600; }

/* Reading: side-by-side — use 95% screen width, passage sticky */
.reading-split {
  display: grid; gap: 28px;
  grid-template-columns: 1fr;
  max-width: 1600px;
  margin: 0 auto;
  padding: 12px 24px 40px;
  width: 100%;
}
@media (min-width: 960px) {
  .reading-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }
}
.reading-passage-col { min-width: 0; }
.reading-questions-col { min-width: 0; }
/* Passage col must stretch to the full height of the questions col so the
   sticky block has room to travel the entire scroll depth. */
@media (min-width: 960px) {
  .reading-split { align-items: stretch; }
  .reading-passage-col { align-self: stretch; }
}
.passage-block.sticky {
  position: sticky;
  top: 110px;  /* sit under test topbar (56px) + section-nav (46px) */
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  /* height must be intrinsic so it doesn't stretch with the column */
  align-self: start;
  border-right: 1px solid var(--line);
  padding-right: 20px;
}
/* Mobile: limit passage height and show "jump to questions" affordance */
@media (max-width: 959px) {
  .passage-block.sticky {
    position: relative; top: 0; max-height: none;
    border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 16px; margin-bottom: 8px;
  }
}
.reading-jump-link {
  display: flex; justify-content: flex-end;
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line-2);
}
.reading-jump-link a {
  font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 600;
}
.reading-jump-link a:hover { text-decoration: underline; }
.passage-block.sticky::-webkit-scrollbar { width: 8px; }
.passage-block.sticky::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.passage-block { font-size: 15px; line-height: 1.75; }
.passage-block h3 {
  font-family: var(--serif); font-size: 22px;
  margin: 0 0 14px; letter-spacing: -0.01em;
  position: sticky; top: 0; background: var(--surface);
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
  z-index: 1;
}
.reading-questions-col .q-card { margin-bottom: 16px; }

/* Override the main test layout to use wider container for reading sections */
.test-shell .question-layout:has(.reading-split) {
  max-width: none;
  padding: 0;
}

/* ─────────────────────────────────────────────
   AI SPEAKING EXAMINER — full conversational UI
───────────────────────────────────────────── */
.speaking-examiner {
  background: linear-gradient(180deg, var(--surface), var(--tint));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
}
.exam-stage {
  display: grid; gap: 22px;
  grid-template-columns: 220px 1fr;
}
@media (max-width: 720px) {
  .exam-stage { grid-template-columns: 1fr; text-align: center; }
}
.exam-avatar {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.avatar-ring {
  width: 140px; height: 140px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  box-shadow: 0 12px 36px -8px rgba(79,70,229,0.4);
  position: relative;
  transition: transform 200ms;
}
.avatar-ring[data-state="speaking_question"]::before {
  content: ""; position: absolute; inset: -8px;
  border-radius: 999px; border: 3px solid var(--accent-2);
  animation: pulse-ring 1.4s ease-in-out infinite;
}
@keyframes pulse-ring { 0% { transform: scale(0.96); opacity: 0.8; } 100% { transform: scale(1.16); opacity: 0; } }
.avatar-ring[data-state="listening"] {
  background: linear-gradient(135deg, var(--ember), var(--gold));
  box-shadow: 0 12px 36px -8px rgba(249,115,22,0.4);
}
.avatar-ring[data-state="listening"]::before {
  content: ""; position: absolute; inset: -8px;
  border-radius: 999px; border: 3px solid var(--ember);
  animation: pulse-ring 1.0s ease-in-out infinite;
}
.avatar-face {
  font-size: 60px; line-height: 1;
}
.avatar-label { font-weight: 600; color: var(--ink); font-size: 14px; margin-top: 6px; }
.avatar-status { font-size: 12px; color: var(--ink-3); min-height: 18px; text-align: center; }
.status-speaking { color: var(--accent); font-weight: 600; }
.status-listening { color: var(--ember); font-weight: 600; }

.exam-conv { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.part-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.examiner-bubble {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px; padding: 14px 18px;
  box-shadow: 0 4px 12px -6px rgba(15,23,42,0.08);
}
.eb-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.eb-text { font-size: 15px; line-height: 1.6; color: var(--ink); }

.candidate-bubble {
  background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(124,58,237,0.04));
  border: 1px solid rgba(79,70,229,0.18);
  border-radius: 14px 14px 4px 14px; padding: 14px 18px;
  align-self: flex-end; max-width: 90%;
}
.cb-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.cb-text { font-size: 14px; line-height: 1.55; color: var(--ink-2); font-style: italic; }

.cue-card {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1.5px solid var(--gold);
  border-radius: 14px; padding: 18px 22px;
  color: #78350f;
}
.cc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #92400e; margin-bottom: 6px; }
.cc-topic { font-family: var(--serif); font-size: 18px; line-height: 1.4; margin-bottom: 12px; color: #78350f; }
.cue-card ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: #78350f; }

.exam-controls {
  grid-column: 1 / -1;
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.done-message {
  padding: 12px 16px; border-radius: 10px;
  background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.25);
  color: var(--success); font-size: 14px; font-weight: 500;
}

.typed-fallback {
  grid-column: 1 / -1; margin-top: 4px;
}
.typed-fallback label {
  display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 6px;
}

.speaking-progress {
  grid-column: 1 / -1;
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding: 8px 0;
}
.sp-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--line);
  transition: all 200ms;
}
.sp-dot.current { background: var(--accent); transform: scale(1.4); }
.sp-dot.done { background: var(--success); }

/* ─────────────────────────────────────────────
   QUESTION TYPES — Multi-select, Form completion, Word-limit
───────────────────────────────────────────── */
.q-instruction {
  background: rgba(249, 115, 22, 0.08);
  border-left: 3px solid var(--ember);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--ink-2);
}
.q-instruction em { font-style: normal; }
.q-instruction strong { color: var(--ember); font-weight: 700; }

/* Grouped question section header — appears ONCE for a series of same-instruction questions */
.q-group { margin-bottom: 32px; }
.q-section-header {
  background: linear-gradient(135deg, rgba(79,70,229,0.04), rgba(124,58,237,0.04));
  border: 1px solid rgba(79,70,229,0.18);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.qsh-range {
  font-size: 18px; font-weight: 700; color: var(--accent);
  font-family: var(--serif); letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.qsh-instruction {
  font-size: 14px; color: var(--ink); line-height: 1.55;
  font-style: italic;
}
.qsh-title {
  margin-top: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ─────────────────────────────────────────────
   VOICE SETTINGS MODAL + TopBar toggle
───────────────────────────────────────────── */
.voice-toggle {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  transition: border-color 140ms, background 140ms;
  cursor: pointer;
}
.voice-toggle:hover { border-color: var(--accent); background: var(--tint); }
.voice-toggle:has(span:contains("Natural")) { border-color: var(--leaf); color: var(--leaf); }

.settings-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 100;
  padding: 16px;
}
.settings-modal {
  background: var(--surface);
  border-radius: 16px;
  width: 100%; max-width: 480px;
  padding: 28px;
  box-shadow: 0 24px 60px -16px rgba(15,23,42,0.35);
  border: 1px solid var(--line);
  max-height: 90vh; overflow-y: auto;
}
.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.settings-header h2 {
  margin: 0;
  font-family: var(--serif); font-size: 24px;
  letter-spacing: -0.01em;
}
.btn-icon {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--tint); border: 0;
  font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--ink-3);
}
.btn-icon:hover { background: var(--surface-2); color: var(--ink); }
.settings-sub {
  font-size: 14px; color: var(--ink-3); line-height: 1.55;
  margin: 0 0 18px;
}
.settings-label {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.settings-input {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg); font-family: var(--mono); font-size: 13px;
  transition: border-color 140ms;
}
.settings-input:focus { outline: none; border-color: var(--accent); }
.settings-note {
  font-size: 12px; color: var(--ink-3);
  margin: 8px 0 16px; line-height: 1.5;
}
.settings-result {
  padding: 10px 14px;
  border-radius: 8px;
  margin: 14px 0;
  font-size: 13px;
  line-height: 1.5;
}
.settings-result.ok {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--success);
}
.settings-result.err {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--error);
}
.settings-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 18px;
  justify-content: flex-end;
}
.settings-status {
  margin-top: 18px;
  padding: 10px 14px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--success);
}

/* ─────────────────────────────────────────────
   EXAM PREP — index, detail, list
───────────────────────────────────────────── */
.ep-breadcrumb {
  font-size: 13px; color: var(--ink-3); margin-bottom: 12px;
  display: flex; gap: 8px; align-items: center;
}
.ep-breadcrumb a { color: var(--accent); text-decoration: none; font-weight: 500; cursor: pointer; }
.ep-breadcrumb a:hover { text-decoration: underline; }
.ep-breadcrumb span { color: var(--ink-4); }

.ep-hero { margin-bottom: 36px; }
.ep-hero h1 {
  font-family: var(--serif); font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -0.02em; margin: 0 0 10px;
}
.ep-hero p { color: var(--ink-3); font-size: 17px; line-height: 1.55; margin: 0; max-width: 700px; }

.ep-exam-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .ep-exam-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ep-exam-grid { grid-template-columns: repeat(3, 1fr); } }

.ep-exam-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 16px;
  padding: 24px;
  text-align: left; cursor: pointer;
  transition: transform 160ms, box-shadow 160ms, border-color 160ms;
  display: flex; flex-direction: column; gap: 10px;
}
.ep-exam-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(15,23,42,0.18);
}
.ep-exam-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 24px; flex-shrink: 0;
}
.ep-exam-name {
  font-family: var(--serif); font-size: 22px;
  letter-spacing: -0.01em; color: var(--ink);
}
.ep-exam-tag {
  font-size: 14px; color: var(--ink-3); line-height: 1.5;
  flex: 1;
}
.ep-exam-stats {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
  padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.ep-exam-stats strong { color: var(--ink); font-family: var(--serif); font-size: 15px; }

/* Exam detail */
.ep-detail h1 {
  font-family: var(--serif); font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.02em; margin: 0 0 6px;
}
.ep-section-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 28px;
}
@media (min-width: 640px) { .ep-section-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .ep-section-grid { grid-template-columns: repeat(3, 1fr); } }

.ep-section-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 140ms, box-shadow 140ms, border-color 140ms;
}
.ep-section-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(15,23,42,0.15);
}
.ep-section-card--full {
  background: linear-gradient(135deg, rgba(79,70,229,0.05), rgba(124,58,237,0.04));
  border-width: 2px;
}
.ep-section-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 22px;
}
.ep-section-name {
  font-family: var(--serif); font-size: 18px;
  letter-spacing: -0.01em; color: var(--ink);
  margin-top: 4px;
}
.ep-section-count { font-size: 13px; color: var(--ink-3); }

/* Section/Full test list */
.ep-list h1 {
  font-family: var(--serif); font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.02em; margin: 0 0 6px;
  display: flex; align-items: center;
}
.ep-list .muted { color: var(--ink-3); margin: 0 0 24px; }

.ep-loading, .ep-empty {
  padding: 60px 20px; text-align: center;
  color: var(--ink-3); font-size: 15px;
}

.ep-test-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}
@media (min-width: 600px) { .ep-test-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .ep-test-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .ep-test-grid { grid-template-columns: repeat(4, 1fr); } }

.ep-test-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 12px;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 140ms, box-shadow 140ms, border-color 140ms;
}
.ep-test-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(15,23,42,0.18);
}
.ep-test-num {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-4); letter-spacing: 0.05em;
}
.ep-test-title {
  font-family: var(--serif); font-size: 16px;
  letter-spacing: -0.01em; margin: 4px 50px 0 0;
  color: var(--ink); line-height: 1.35;
}
.ep-test-meta {
  font-size: 12px; color: var(--ink-3);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.ep-start-btn {
  margin-top: 8px;
  align-self: flex-start;
  font-size: 13px;
  padding: 6px 14px;
  height: auto;
}

/* ─────────────────────────────────────────────
   REVIEW / FEEDBACK SECTION ON REPORT
───────────────────────────────────────────── */
.review-section { padding: 22px; }
.review-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.review-header h3 { margin: 0; }
.review-scripts { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.review-scripts h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.review-script { background: var(--tint); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; font-size: 14px; }
.review-script summary { cursor: pointer; font-weight: 500; color: var(--ink); }
.script-text {
  margin: 10px 0 0; padding: 12px;
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  background: var(--surface); border-radius: 8px;
  white-space: pre-wrap; overflow-x: auto; color: var(--ink-2);
}
.review-list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.review-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-2);
  border-radius: 10px;
  padding: 14px 16px;
}
.review-item.review-correct { border-left-color: var(--success); }
.review-item.review-wrong { border-left-color: var(--error); background: rgba(239,68,68,0.03); }
.review-item.review-subjective { border-left-color: var(--accent); }
.review-q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.review-q-num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.05em; }
.review-badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: 0.08em;
}
.review-correct .review-badge { background: rgba(16,185,129,0.12); color: var(--success); }
.review-wrong .review-badge { background: rgba(239,68,68,0.10); color: var(--error); }
.review-badge--sub { background: rgba(79,70,229,0.10); color: var(--accent); }
.review-q-text { font-size: 14px; color: var(--ink); line-height: 1.55; margin-bottom: 8px; }
.review-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; margin: 4px 0; }
.review-label { color: var(--ink-3); min-width: 100px; font-weight: 500; }
.review-value { color: var(--ink); flex: 1; }
.review-value--correct { color: var(--success); font-weight: 600; }
.review-explanation {
  margin-top: 8px; padding: 10px 12px;
  background: var(--surface-2); border-radius: 8px;
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
}
.review-explanation strong { color: var(--accent); }

/* ─────────────────────────────────────────────
   VOCABULARY HUB — topic rail + items
───────────────────────────────────────────── */
.vocab-layout { align-items: start; }
@media (max-width: 720px) {
  .vocab-layout { grid-template-columns: 1fr !important; }
  .vocab-topic-rail { display: flex; flex-wrap: wrap; gap: 6px; }
}
.vocab-topic-rail {
  display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 80px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
}
.vocab-topic-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: border-color 140ms, background 140ms, color 140ms;
  text-align: left;
  text-transform: capitalize;
}
.vocab-topic-pill:hover { border-color: var(--accent); color: var(--ink); }
.vocab-topic-pill.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border-color: transparent;
}
.vocab-topic-count {
  font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,0.2); color: inherit;
  padding: 2px 8px; border-radius: 999px;
  flex-shrink: 0;
}
.vocab-topic-pill:not(.active) .vocab-topic-count {
  background: var(--tint); color: var(--ink-3);
}
.vocab-items { min-width: 0; }

/* ─────────────────────────────────────────────
   VISUAL RENDERER — charts, tables, placeholders
───────────────────────────────────────────── */
.visual-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 16px;
  box-shadow: 0 1px 0 rgba(15,23,42,0.03);
}
.visual-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.visual-head h4 {
  margin: 0; font-family: var(--serif); font-size: 17px;
  letter-spacing: -0.01em; color: var(--ink);
  flex: 1;
}
.visual-axis-y {
  font-size: 11px; color: var(--ink-3); font-style: italic;
}
.visual-sample-pill {
  display: inline-block; padding: 3px 9px;
  background: linear-gradient(135deg, var(--gold), var(--ember));
  color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; border-radius: 999px;
}
.visual-svg {
  width: 100%; height: auto; max-height: 320px;
  background: #fafbfd; border-radius: 8px;
  padding: 8px;
}
.visual-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px; color: var(--ink-2);
}
.visual-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
}
.visual-legend-item i {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 2px;
}
.visual-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
.visual-table th, .visual-table td {
  padding: 8px 12px;
  border: 1px solid var(--line);
  text-align: left;
}
.visual-table th {
  background: var(--tint); font-weight: 600; color: var(--ink);
}
.visual-table td:first-child {
  font-weight: 500;
}
.visual-note {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.visual-note strong { color: var(--ember); }
.visual-placeholder { background: var(--tint); }
.visual-placeholder-body {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 8px 0;
}
.visual-placeholder-icon { font-size: 36px; line-height: 1; }
.visual-placeholder-body p {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2);
}

/* Audio playing indicator (replaces script-leak preview) */
.audio-wave-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.7);
  animation: audio-wave 1s infinite ease-in-out;
}
.audio-wave-dot:nth-child(2) { animation-delay: 0.2s; }
.audio-wave-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes audio-wave {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

/* Multi-select checkbox option */
.q-option-check { gap: 14px; }
.opt-checkbox {
  width: 22px; height: 22px; min-width: 22px;
  border-radius: 4px; border: 1.5px solid currentColor;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}
.opt-checkbox.is-checked {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* Form / table completion */
.form-title {
  background: var(--ink); color: #fff;
  padding: 10px 14px; margin: 12px 0;
  border-radius: 8px 8px 0 0;
  font-family: var(--serif); font-size: 16px; letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 600;
}
.form-completion, .table-completion {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.form-completion .fc-row, .table-completion .fc-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  border-bottom: 1px solid var(--line);
}
.form-completion .fc-row:last-child,
.table-completion .fc-row:last-child { border-bottom: 0; }
.fc-label {
  padding: 12px 14px;
  background: var(--tint);
  font-weight: 500; color: var(--ink);
  border-right: 1px solid var(--line);
  display: flex; align-items: center;
}
.fc-input-wrap {
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
}
.fc-num {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.fc-input {
  flex: 1; height: 36px; padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: inherit; font-size: 14px;
  transition: border-color 140ms;
}
.fc-input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 600px) {
  .form-completion .fc-row, .table-completion .fc-row {
    grid-template-columns: 1fr;
  }
  .fc-label { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ─────────────────────────────────────────────
   TEST ACTIVE — Home button + Section navigator
───────────────────────────────────────────── */
.test-home-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms;
  border: 0;
}
.test-home-btn:hover { background: var(--tint); }
.test-home-btn .brand-mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.test-home-btn span:not(.brand-mark) { font-family: var(--serif); font-size: 15px; letter-spacing: -0.01em; }
.tb-section-info { flex: 1; min-width: 0; }
.section-nav {
  display: flex; gap: 6px; padding: 8px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--tint);
  overflow-x: auto; scrollbar-width: thin;
}
.sec-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  border: 1.5px solid var(--line); background: var(--surface);
  font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: border-color 140ms, background 140ms;
  flex-shrink: 0;
}
.sec-pill:hover { border-color: var(--line-2); }
.sec-pill.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }
.sec-pill.done { border-color: var(--success); color: var(--success); }
.sec-pill.done.active { color: #fff; }
.sec-pill-icon { font-size: 14px; }
.sec-pill-name { font-weight: 500; }
@media (max-width: 720px) { .sec-pill-name { display: none; } }

/* ─────────────────────────────────────────────
   Question palette + prev/next pager
───────────────────────────────────────────── */
.qpalette {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.qp-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
  flex-shrink: 0;
}
.qp-dots {
  display: flex; gap: 6px; flex-wrap: wrap;
  flex: 1;
}
.qp-dot {
  min-width: 32px; height: 32px; padding: 0 8px;
  border-radius: 8px; border: 1.5px solid var(--line);
  background: var(--surface);
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  cursor: pointer;
  transition: all 140ms;
}
.qp-dot:hover { border-color: var(--accent); }
.qp-dot.answered { background: rgba(16,185,129,0.08); border-color: var(--success); color: var(--success); }
.qp-dot.current {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border-color: transparent;
  transform: scale(1.08);
}
.qp-dot.current.answered { background: linear-gradient(135deg, var(--success), #14b8a6); }

.q-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; margin-top: 16px;
  position: sticky; bottom: 12px;
  box-shadow: 0 8px 20px -8px rgba(15,23,42,0.12);
  z-index: 5;
}
.qp-counter { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.qp-ans-meta { color: var(--ink-4); font-weight: 400; }


/* ── Test-load error modal ──────────────────────────────────────────────── */
.test-error-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: fadeIn .15s ease;
}
.test-error-card {
  background: var(--surface); border-radius: 20px;
  padding: 36px 32px; max-width: 420px; width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px -12px rgba(15,23,42,0.35);
  animation: slideUp .2s ease;
}
.test-error-icon { font-size: 40px; margin-bottom: 12px; }
.test-error-title { font-size: 20px; font-weight: 700; color: var(--ink-1); margin: 0 0 10px; }
.test-error-detail { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin: 0 0 8px; }
.test-error-meta { font-size: 12px; color: var(--ink-4); margin: 0 0 24px; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════
   PTE Academic Reading Renderer
══════════════════════════════════════════════════════════════ */
.pte-shell { display: flex; flex-direction: column; min-height: calc(100vh - 60px); }
.pte-topbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.pte-item-counter { font-size: 13px; color: var(--ink-2); white-space: nowrap; min-width: 90px; }
.pte-item-counter strong { color: var(--ink); }
.pte-progress-track { flex: 1; height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.pte-progress-fill { height: 100%; background: #7c3aed; border-radius: 99px; transition: width 0.3s; }
.pte-answered-count { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

.pte-item-label-bar { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px 8px; background: #f5f3ff; border-bottom: 1px solid #e9d5ff; flex-wrap: wrap; }
.pte-item-type-pill { background: #7c3aed; color: #fff; border-radius: 6px; padding: 3px 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pte-item-type-pill.small { font-size: 10px; padding: 2px 7px; }
.pte-item-instruction { font-size: 13px; color: #5b21b6; line-height: 1.5; }

.pte-item-body { flex: 1; padding: 24px 20px; overflow-y: auto; }

/* RW Fill in Blanks */
.pte-rwfib-passage { font-size: 15px; line-height: 2.1; color: var(--ink); margin-bottom: 24px; max-width: 760px; }
.pte-blank { display: inline-block; min-width: 100px; padding: 2px 10px; margin: 0 4px; border-radius: 6px; border: 2px dashed #a78bfa; background: #faf5ff; cursor: pointer; font-weight: 600; color: #5b21b6; transition: all 0.15s; vertical-align: middle; }
.pte-blank.filled { border-style: solid; background: #ede9fe; }
.pte-blank:hover.filled { background: #fce7f3; border-color: #ec4899; }
.pte-blank-placeholder { color: #a78bfa; font-weight: 400; font-size: 12px; }
.pte-word-bank-label { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.pte-word-bank { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; max-width: 760px; }
.pte-word-chip { padding: 6px 14px; border-radius: 999px; border: 2px solid #a78bfa; background: #faf5ff; color: #5b21b6; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.pte-word-chip:hover:not(:disabled) { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.pte-word-chip.used { opacity: 0.35; cursor: default; text-decoration: line-through; }
.pte-clear-btn { font-size: 12px; color: var(--ink-3); }

/* FIB dropdown */
.pte-fib-passage { font-size: 15px; line-height: 2.3; color: var(--ink); max-width: 760px; }
.pte-fib-select { display: inline-block; padding: 3px 8px; margin: 0 3px; border: 2px solid #a78bfa; border-radius: 6px; background: #faf5ff; color: #5b21b6; font-size: 13px; font-weight: 600; cursor: pointer; vertical-align: middle; }
.pte-fib-select.filled { border-color: #7c3aed; background: #ede9fe; }

/* Reorder */
.pte-reorder-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 960px; }
@media(max-width:700px){ .pte-reorder-cols { grid-template-columns:1fr; } }
.pte-col-header { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; padding: 8px 0; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.pte-col-empty { padding: 20px; text-align: center; color: var(--ink-4); font-size: 13px; border: 2px dashed var(--line); border-radius: 10px; }
.pte-para-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; font-size: 13px; line-height: 1.6; cursor: pointer; transition: all 0.15s; background: var(--surface); }
.pte-para-source:hover { border-color: #7c3aed; background: #faf5ff; }
.pte-para-target { cursor: default; border-color: #a78bfa; background: #f5f3ff; }
.pte-para-id { font-weight: 800; color: #7c3aed; min-width: 20px; }
.pte-para-pos { font-weight: 700; color: var(--ink-3); min-width: 18px; }
.pte-para-text { flex: 1; }
.pte-para-controls { display: flex; flex-direction: column; gap: 2px; }
.pte-reorder-btn { background: none; border: 1px solid var(--line); border-radius: 4px; width: 22px; height: 22px; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.pte-reorder-btn:hover:not(:disabled) { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.pte-reorder-btn:disabled { opacity: 0.3; cursor: default; }
.pte-remove-btn { color: var(--error); }

/* MCQ */
.pte-mcq-passage { font-size: 14px; line-height: 1.7; color: var(--ink); background: #f8fafc; border-left: 3px solid #a78bfa; padding: 14px 16px; border-radius: 0 10px 10px 0; margin-bottom: 18px; max-width: 760px; max-height: 300px; overflow-y: auto; }
.pte-mcq-question { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 10px; max-width: 760px; }
.pte-mcq-instruction { font-size: 12px; color: var(--ink-3); margin-bottom: 16px; }
.pte-options { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.pte-option { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; transition: all 0.15s; background: var(--surface); }
.pte-option:hover { border-color: #a78bfa; background: #faf5ff; }
.pte-option.selected { border-color: #7c3aed; background: #ede9fe; }
.pte-option input { margin: 0; accent-color: #7c3aed; width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.pte-opt-letter { font-weight: 700; color: #7c3aed; min-width: 18px; font-size: 14px; }
.pte-opt-text { font-size: 14px; color: var(--ink); line-height: 1.5; }

/* Navigation */
.pte-nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--surface); border-top: 1px solid var(--line); gap: 12px; }
.pte-nav-btn { min-width: 110px; }
.pte-dot-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 4px 0; }
.pte-dot { min-width: 36px; height: 24px; border-radius: 12px; border: 2px solid var(--line); background: transparent; cursor: pointer; transition: all 0.15s; padding: 0 6px; display: flex; align-items: center; justify-content: center; }
.pte-dot.active { border-color: #7c3aed; background: #7c3aed; }
.pte-dot.done { background: #a78bfa; border-color: #a78bfa; }
.pte-dot-label { font-size: 9px; font-weight: 700; letter-spacing: 0.3px; color: var(--ink-2); }
.pte-dot.active .pte-dot-label, .pte-dot.done .pte-dot-label { color: #fff; }
.pte-nav-type-badge { margin-left: 8px; background: #7c3aed22; color: #7c3aed; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 2px 8px; vertical-align: middle; }
.pte-empty { padding: 60px 20px; text-align: center; color: var(--ink-3); }

/* ══ CELPIP Renderer ══════════════════════════════════════════════════════════ */
.celpip-empty { padding: 60px 20px; text-align: center; color: var(--ink-3); }

/* ── CELPIP Reading ── */
.celpip-reading-shell { display: flex; flex-direction: column; gap: 0; }
.celpip-part-tabs { display: flex; gap: 4px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; }
.celpip-part-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px; border-radius: 10px; border: 2px solid var(--line); background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: all 0.15s; min-width: 80px; }
.celpip-part-tab.active { border-color: #0ea5e9; background: #0ea5e9; color: #fff; }
.celpip-tab-sub { font-size: 9px; font-weight: 500; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.5px; }
.celpip-tab-count { background: #10b981; color: #fff; font-size: 9px; font-weight: 700; border-radius: 8px; padding: 1px 5px; }

.celpip-reading-part { padding: 0; }
.celpip-part-header { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: #f0f9ff; border-bottom: 1px solid #bae6fd; }
.celpip-part-badge { background: #0ea5e9; color: #fff; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 3px 10px; }
.celpip-part-title { font-weight: 600; font-size: 14px; color: var(--ink-1); flex: 1; }
.celpip-part-progress { font-size: 12px; color: var(--ink-3); }

.celpip-reading-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 500px; }
@media (max-width: 800px) { .celpip-reading-layout { grid-template-columns: 1fr; } }
.celpip-reading-left { padding: 20px; border-right: 1px solid var(--line); overflow-y: auto; max-height: 600px; }
.celpip-reading-right { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.celpip-passage-title { font-size: 15px; font-weight: 700; color: var(--ink-1); margin: 0 0 12px; }

/* Email correspondence */
.celpip-email-chain { display: flex; flex-direction: column; gap: 16px; }
.celpip-email { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.celpip-email-header { background: #f8fafc; padding: 10px 14px; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.celpip-email-body { background: #fff; padding: 14px; font-size: 13.5px; line-height: 1.7; margin: 0; white-space: pre-wrap; font-family: inherit; color: var(--ink-1); }

/* Schedule table */
.celpip-schedule-wrap { overflow-x: auto; }
.celpip-schedule-intro { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; line-height: 1.6; }
.celpip-schedule-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.celpip-schedule-table th { background: #0ea5e9; color: #fff; padding: 8px 10px; text-align: left; font-weight: 600; }
.celpip-schedule-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.celpip-schedule-table tr:nth-child(even) td { background: #f8fafc; }

/* Viewpoints */
.celpip-viewpoints { display: flex; flex-direction: column; gap: 12px; }
.celpip-viewpoint-card { border-radius: 10px; padding: 14px 16px; border: 1px solid rgba(0,0,0,0.07); }
.celpip-viewpoint-name { font-weight: 700; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.celpip-viewpoint-text { font-size: 13.5px; line-height: 1.7; color: var(--ink-1); margin: 0; }

/* Article */
.celpip-article-title { font-size: 16px; font-weight: 700; color: var(--ink-1); margin: 0 0 12px; }
.celpip-article-text { font-size: 14px; line-height: 1.8; color: var(--ink-1); margin: 0; }

/* Reading questions */
.celpip-q-dots { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.celpip-q-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; color: var(--ink-2); }
.celpip-q-dot.active { border-color: #0ea5e9; background: #0ea5e9; color: #fff; }
.celpip-q-dot.done { background: #10b981; border-color: #10b981; color: #fff; }
.celpip-q-num { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.celpip-rq-card { display: flex; flex-direction: column; gap: 10px; }
.celpip-rq-prompt { font-size: 14px; color: var(--ink-1); line-height: 1.6; margin: 0; font-weight: 500; }
.celpip-rq-options { display: flex; flex-direction: column; gap: 6px; }
.celpip-rq-opt { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 8px; border: 1.5px solid var(--line); cursor: pointer; font-size: 13.5px; color: var(--ink-1); transition: all 0.15s; line-height: 1.5; }
.celpip-rq-opt input { display: none; }
.celpip-rq-opt.selected { border-color: #0ea5e9; background: #e0f2fe; color: #0369a1; font-weight: 600; }
.celpip-rq-opt:hover { border-color: #7dd3fc; background: #f0f9ff; }
.celpip-rq-fill { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1.5px solid var(--line); font-size: 14px; color: var(--ink-1); background: var(--bg); outline: none; }
.celpip-rq-fill:focus { border-color: #0ea5e9; }
.celpip-rq-feedback { margin-top: 8px; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.6; }
.celpip-rq-feedback.correct { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.celpip-rq-feedback.wrong { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.celpip-rq-explain { margin-top: 4px; opacity: 0.85; font-size: 12px; }
.celpip-q-nav { display: flex; gap: 8px; margin-top: 8px; }

/* ── CELPIP Writing ── */
.celpip-writing-shell { display: flex; flex-direction: column; gap: 0; }
.celpip-task-tabs { display: flex; gap: 4px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.celpip-task-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 20px; border-radius: 10px; border: 2px solid var(--line); background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: all 0.15s; }
.celpip-task-tab.active { border-color: #8b5cf6; background: #8b5cf6; color: #fff; }
.celpip-tab-done { background: #10b981; color: #fff; font-size: 10px; border-radius: 6px; padding: 1px 5px; }
.celpip-writing-task { padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.celpip-task-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.celpip-task-badge { background: #8b5cf6; color: #fff; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 4px 12px; }
.celpip-task-time { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.celpip-task-wc-guide { font-size: 13px; color: var(--ink-2); }
.celpip-task-scenario { background: #faf5ff; border: 1px solid #ddd6fe; border-radius: 10px; padding: 14px 16px; font-size: 14px; line-height: 1.7; color: var(--ink-1); }
.celpip-task-recipient { font-size: 13px; color: var(--ink-2); }
.celpip-task-bullets { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 12px 16px; font-size: 13.5px; }
.celpip-task-bullets ul { margin: 6px 0 0; padding-left: 20px; }
.celpip-task-bullets li { margin-bottom: 4px; line-height: 1.6; color: var(--ink-1); }
.celpip-task-format { font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.celpip-writing-area { display: flex; flex-direction: column; gap: 8px; }
.celpip-subject-row { display: flex; align-items: center; gap: 10px; }
.celpip-subject-row label { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.celpip-subject-input { flex: 1; padding: 8px 12px; border-radius: 8px; border: 1.5px solid var(--line); font-size: 13.5px; color: var(--ink-1); background: var(--bg); outline: none; }
.celpip-subject-input:focus { border-color: #8b5cf6; }
.celpip-writing-textarea { width: 100%; min-height: 220px; padding: 14px; border-radius: 10px; border: 1.5px solid var(--line); font-size: 14px; line-height: 1.8; color: var(--ink-1); background: var(--bg); resize: vertical; outline: none; font-family: inherit; box-sizing: border-box; }
.celpip-writing-textarea:focus { border-color: #8b5cf6; }
.celpip-wc-bar { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.celpip-wc-bar.ok { background: #dcfce7; color: #166534; }
.celpip-wc-bar.under { background: #fef3c7; color: #92400e; }
.celpip-wc-bar.over { background: #fef2f2; color: #991b1b; }
.celpip-survey-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .celpip-survey-options { grid-template-columns: 1fr; } }
.celpip-survey-option { background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.celpip-survey-label { display: inline-block; background: #8b5cf6; color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 8px; margin-bottom: 8px; }
.celpip-survey-option p { font-size: 13.5px; line-height: 1.6; color: var(--ink-1); margin: 0; }
.celpip-model-notes { margin-top: 4px; }
.celpip-model-notes summary { font-size: 13px; color: var(--ink-3); cursor: pointer; font-weight: 500; }
.celpip-model-notes p { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-top: 8px; padding: 10px 14px; background: #f8fafc; border-radius: 8px; }
.celpip-task-footer { display: flex; gap: 10px; padding: 16px 28px; border-top: 1px solid var(--line); background: var(--surface); }

/* ── CELPIP Speaking ── */
.celpip-speaking-shell { display: flex; flex-direction: column; gap: 0; }
.celpip-sp-dot-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.celpip-sp-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-2); transition: all 0.15s; }
.celpip-sp-dot.active { border-color: #f59e0b; background: #f59e0b; color: #fff; }
.celpip-sp-dot.done { background: #10b981; border-color: #10b981; color: #fff; }

.celpip-sp-task { padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.celpip-sp-task-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: #fffbeb; border-radius: 10px; border: 1px solid #fde68a; }
.celpip-sp-task-num { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.5px; }
.celpip-sp-task-type { font-size: 14px; font-weight: 700; color: var(--ink-1); flex: 1; }
.celpip-sp-task-times { display: flex; gap: 10px; font-size: 12px; color: var(--ink-3); font-weight: 500; }

.celpip-sp-prompt-box { background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.celpip-sp-scene { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 12px 14px; }
.celpip-sp-scene-label { font-size: 11px; font-weight: 700; color: #0369a1; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.celpip-sp-scene p { font-size: 13.5px; line-height: 1.7; margin: 0; color: var(--ink-1); font-style: italic; }
.celpip-sp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .celpip-sp-compare { grid-template-columns: 1fr; } }
.celpip-sp-compare-card { border-radius: 8px; padding: 12px 14px; }
.celpip-sp-compare-card.a { background: #eff6ff; border: 1px solid #bfdbfe; }
.celpip-sp-compare-card.b { background: #f0fdf4; border: 1px solid #bbf7d0; }
.celpip-sp-compare-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; color: var(--ink-2); }
.celpip-sp-compare-card p { font-size: 13px; line-height: 1.6; margin: 0; color: var(--ink-1); }
.celpip-sp-prompt { font-size: 14.5px; font-weight: 500; color: var(--ink-1); line-height: 1.7; }

.celpip-sp-tip { background: #fef9c3; border: 1px solid #fde047; border-radius: 8px; padding: 10px 14px; }
.celpip-sp-tip summary { font-size: 13px; font-weight: 600; cursor: pointer; color: #78350f; }
.celpip-sp-tip p { font-size: 13px; line-height: 1.6; margin-top: 8px; color: #78350f; }

.celpip-sp-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; background: var(--surface); border-radius: 12px; border: 1.5px solid var(--line); }
.celpip-sp-btn { padding: 12px 28px; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; transition: all 0.15s; }
.celpip-sp-btn.start { background: #22c55e; color: #fff; }
.celpip-sp-btn.start:hover { background: #16a34a; }
.celpip-sp-btn.stop { background: #ef4444; color: #fff; }
.celpip-sp-btn.stop:hover { background: #dc2626; }
.celpip-sp-btn.retry { background: var(--surface); border: 2px solid var(--line); color: var(--ink-2); }
.celpip-sp-timer-area { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.celpip-sp-timer-area.prep .celpip-sp-phase-label { color: #2563eb; font-weight: 700; font-size: 13px; }
.celpip-sp-timer-area.recording .celpip-sp-phase-label { color: #dc2626; font-weight: 700; font-size: 13px; animation: blink 1s infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.celpip-sp-timer { font-size: 52px; font-weight: 800; color: var(--ink-1); line-height: 1; }
.celpip-sp-timer-bar { width: 100%; max-width: 320px; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.celpip-sp-timer-fill { height: 100%; border-radius: 4px; transition: width 0.95s linear; }
.celpip-sp-hint { font-size: 12.5px; color: var(--ink-3); text-align: center; margin: 0; }
.celpip-sp-done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.celpip-sp-done-icon { font-size: 40px; }
.celpip-sp-done-msg { font-size: 16px; font-weight: 700; color: #166534; }
.celpip-sp-rubric { background: #f0fdf4; border-radius: 8px; padding: 12px 16px; text-align: left; font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.celpip-sp-rubric strong { display: block; margin-bottom: 4px; color: var(--ink-1); font-weight: 700; }
.celpip-sp-rubric-item { font-size: 13px; color: var(--ink-2); }
.celpip-sp-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: var(--surface); border-top: 1px solid var(--line); }
.celpip-sp-nav-info { font-size: 13px; color: var(--ink-2); font-weight: 600; }

/* shared CELPIP nav buttons */
.celpip-nav-btn { padding: 9px 18px; border-radius: 8px; border: 1.5px solid var(--line); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-2); transition: all 0.15s; }
.celpip-nav-btn:hover:not(:disabled) { border-color: #0ea5e9; color: #0ea5e9; }
.celpip-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.celpip-nav-btn.primary { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }
.celpip-nav-btn.primary:hover { background: #0284c7; border-color: #0284c7; }

/* Review */
.pte-review { max-width: 800px; margin: 0 auto; padding: 24px 20px; }
.pte-review-item { border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.pte-review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pte-review-num { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pte-review-body { margin-bottom: 10px; }
.pte-review-blank { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 6px; margin-bottom: 6px; font-size: 13px; }
.pte-review-blank.correct { background: #f0fdf4; }
.pte-review-blank.incorrect { background: #fef2f2; }
.pte-review-gap { color: var(--ink-3); min-width: 50px; }
.pte-review-user { font-weight: 600; }
.pte-review-correct { color: #16a34a; font-weight: 600; }
.pte-review-order, .pte-review-mcq { font-size: 13px; padding: 10px; border-radius: 6px; }
.pte-review-order.correct, .pte-review-mcq.correct { background: #f0fdf4; color: #16a34a; }
.pte-review-order.incorrect, .pte-review-mcq.incorrect { background: #fef2f2; }
.pte-review-explanation { font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 10px; margin-top: 8px; }

/* ── PTE Listening Renderer ───────────────────────────────────────────────── */
.pte-listening-shell { max-width: 820px; margin: 0 auto; padding: 20px 16px; }
.pte-nav-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pte-nav-counter { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pte-nav-btn { padding: 6px 16px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); transition: border-color 0.15s, background 0.15s; }
.pte-nav-btn:hover:not(:disabled) { border-color: #7c3aed; background: #ede9fe; }
.pte-nav-btn:disabled { opacity: 0.35; cursor: default; }
.pte-item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; margin: 12px 0; }
.pte-item-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #7c3aed; margin-bottom: 10px; }
.pte-instruction { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; line-height: 1.5; }
.pte-question { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 12px; line-height: 1.5; }

/* Audio panel */
.pte-audio-panel { background: #f5f3ff; border: 1.5px solid #ddd6fe; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.pte-audio-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pte-play-btn { display: flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 8px; background: #7c3aed; color: #fff; border: none; cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pte-play-btn:hover { background: #6d28d9; }
.pte-audio-note { font-size: 12px; color: #6d28d9; font-style: italic; }
.pte-audio-script { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; background: #fff; border-radius: 8px; padding: 12px 14px; border: 1px solid #ddd6fe; }

/* SST textarea */
.pte-textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1.5px solid var(--line); font-size: 14px; line-height: 1.6; resize: vertical; font-family: inherit; color: var(--ink); background: var(--bg); box-sizing: border-box; }
.pte-word-count { font-size: 12px; margin-top: 6px; font-weight: 600; }
.pte-word-count.ok { color: #16a34a; }
.pte-word-count.warn { color: #d97706; }
.pte-model-answer { margin-top: 12px; font-size: 13px; color: var(--ink-2); border: 1px dashed var(--line); border-radius: 8px; padding: 10px 14px; }
.pte-model-answer summary { cursor: pointer; font-weight: 600; color: #7c3aed; }

/* Options */
.pte-options { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pte-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--line); cursor: pointer; font-size: 14px; color: var(--ink); line-height: 1.5; transition: border-color 0.15s, background 0.15s; }
.pte-option:hover { border-color: #a78bfa; background: #faf5ff; }
.pte-option.selected { border-color: #7c3aed; background: #ede9fe; }
.pte-option input[type="checkbox"], .pte-option input[type="radio"] { margin: 0; accent-color: #7c3aed; width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.pte-summary-option { align-items: flex-start; }
.pte-options-inline { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.pte-option-chip { display: inline-flex; padding: 7px 14px; border-radius: 20px; }

/* FIB transcript */
.pte-fib-transcript { font-size: 15px; line-height: 2; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.pte-fib-input { border: none; border-bottom: 2px solid #7c3aed; background: transparent; font-size: 14px; color: var(--ink); padding: 2px 6px; min-width: 80px; max-width: 140px; font-family: inherit; outline: none; }
.pte-fib-input:focus { background: #ede9fe; border-radius: 4px 4px 0 0; }

/* Highlight incorrect words */
.pte-hiw-transcript { font-size: 15px; line-height: 2; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; user-select: none; }
.pte-hiw-word { cursor: pointer; border-radius: 4px; padding: 1px 2px; transition: background 0.1s, color 0.1s; }
.pte-hiw-word:hover { background: #fef9c3; }
.pte-hiw-word.highlighted { background: #fee2e2; color: #dc2626; text-decoration: underline; font-weight: 600; }

/* WFD */
.pte-wfd-input { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1.5px solid var(--line); font-size: 15px; font-family: inherit; color: var(--ink); background: var(--bg); box-sizing: border-box; }
.pte-wfd-input:focus { outline: none; border-color: #7c3aed; }

/* Explanation */
.pte-explanation { font-size: 13px; color: var(--ink-2); padding: 10px 14px; background: #fafafa; border-left: 3px solid #a78bfa; border-radius: 0 8px 8px 0; margin-top: 12px; }
.pte-empty { padding: 60px 20px; text-align: center; color: var(--ink-3); }


/* ── PTE Audio panel enhancements (v32) ── */
.pte-play-btn.playing { background: var(--error, #e53e3e); color: #fff; }
.pte-audio-voice-badge { font-size: 12px; color: var(--ink-3); background: var(--bg-2); padding: 2px 8px; border-radius: 12px; }
.pte-transcript-toggle { font-size: 12px; color: var(--accent); background: none; border: none; cursor: pointer; text-decoration: underline; }
.pte-audio-note { font-size: 11px; color: var(--ink-4); flex: 1; }

/* Map key group header */
.q-map-key-group { margin-top: 10px; background: #f0f7ff; border: 1px solid #b8d4f0; border-radius: 8px; padding: 10px 14px; }
.q-map-key-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink-1); }
.q-map-key-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.q-map-key-item { font-size: 13px; color: var(--ink-2); }
.q-map-key-item strong { color: #1a56db; min-width: 18px; display: inline-block; }
/* Match categorise group header */
.q-match-cat-group { margin-top: 10px; background: #f5f0ff; border: 1px solid #c4b5f0; border-radius: 8px; padding: 10px 14px; }
.q-match-cat-opt { font-size: 13px; color: var(--ink-1); padding: 2px 0; }

/* ── Map Floor Plan (IELTS Listening Part 2) ─────────────────────────── */
.map-floor-plan {
  margin: 12px 0 16px;
  background: #f0f4fb;
  border: 2px solid #7890b0;
  border-radius: 10px;
  padding: 12px 14px;
}
.map-floor-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a5f;
  text-align: center;
  margin-bottom: 6px;
}
.map-floor-note {
  font-size: 12px;
  color: #4b6080;
  text-align: center;
  margin-bottom: 10px;
}
.map-floor-svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 560px;
  border: 1px solid #b0c0d8;
  border-radius: 6px;
  background: #dce6f0;
}
.map-floor-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.map-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: white;
  border: 1px solid #a0b4cc;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 13px;
}
.map-legend-letter {
  font-weight: 700;
  color: #1d4ed8;
  min-width: 14px;
  text-align: center;
}
.map-legend-blank {
  color: #9ca3af;
  font-style: italic;
}
.map-legend-note {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}

/* Map word bank */
.map-floor-wordbank { margin-top: 10px; padding-top: 10px; border-top: 1px solid #b0c0d8; }
.map-wordbank-label { font-size: 12px; font-weight: 600; color: #4b6080; margin-bottom: 6px; }
.map-wordbank-items { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.map-wordbank-chip { display: inline-flex; align-items: center; gap: 5px; background: white; border: 1px solid #a0b4cc; border-radius: 4px; padding: 3px 10px; font-size: 12px; }
.map-wordbank-letter { font-weight: 700; color: #1d4ed8; min-width: 12px; }
.map-wordbank-name { color: #374151; }
.q-card-map { border-left: 3px solid #1d4ed8; }
.q-map-prompt { font-size: 14px; color: var(--ink-1); margin-top: 6px; line-height: 1.5; }

/* ── Part 4 inline sentence completion ───────────────────────────── */
.q-card-sent { padding: 14px 18px; }
.q-sent-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-1);
}
.q-sent-text { display: inline; }
.q-sent-num-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0097a7;
  color: white;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.q-sent-input {
  display: inline-block;
  width: 180px;
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  font-size: 14px;
  background: var(--surface);
  transition: border-color 140ms;
}
.q-sent-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

/* ── Part 1 Form Table (IELTS Listening) ──────────────────────────── */
.p1-form-wrap { margin: 10px 0 20px; }
.p1-instr { font-size: 13px; color: var(--ink-3); font-style: italic; margin-bottom: 10px; }
.p1-form-title {
  font-size: 15px; font-weight: 700; color: var(--ink-1);
  padding: 10px 14px; background: #f0f4ff;
  border: 1.5px solid #c0cce8; border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.p1-form-table {
  width: 100%; border-collapse: collapse;
  border: 1.5px solid #c0cce8; border-radius: 0 0 8px 8px;
  overflow: hidden; font-size: 14px;
}
.p1-form-table tr:nth-child(even) { background: #fafbff; }
.p1-form-table tr:nth-child(odd) { background: #fff; }
.p1-row-example { background: #f8f0ff !important; }
.p1-td-label {
  padding: 9px 14px; border: 1px solid #dde4f0;
  color: var(--ink-2); width: 42%; vertical-align: middle;
}
.p1-td-answer {
  padding: 9px 14px; border: 1px solid #dde4f0;
  vertical-align: middle;
}
.p1-prefilled { color: var(--ink-2); font-style: normal; }
.p1-example-tag { font-weight: 700; color: var(--ink-1); margin-right: 6px; }
.p1-example-val { color: var(--ink-2); text-decoration: underline; }
.p1-cell-inline {
  display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.p1-num-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #0097a7; color: #fff;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.p1-blank-input {
  display: inline-block; width: 160px; height: 30px;
  padding: 0 8px; border: 1.5px solid #b0bcd8;
  border-radius: 6px; font: inherit; font-size: 13px;
  background: #fff; transition: border-color 140ms;
}
.p1-blank-input:focus {
  outline: none; border-color: #0097a7;
  box-shadow: 0 0 0 3px rgba(0,151,167,0.15);
}
.p1-ctx { color: var(--ink-2); font-size: 13px; }

/* ════════════════════════════════════════════════════════════════
   FAQ accordion (homepage + blog)
   ════════════════════════════════════════════════════════════════ */
.faq-list { max-width: 820px; margin: 28px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.faq-item:hover { border-color: var(--line-2); box-shadow: 0 6px 24px -12px rgba(15,23,42,0.18); }
.faq-item[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 10px 30px -14px rgba(79,70,229,0.28); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 20px;
  font-weight: 600; font-size: 16px; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center; font-size: 18px; line-height: 1;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  transition: transform .25s ease, background .2s ease;
}
.faq-item[open] .faq-toggle { transform: rotate(45deg); background: var(--accent); color: #fff; }
.faq-answer {
  padding: 0 20px 18px; color: var(--ink-3); font-size: 15px; line-height: 1.7;
  animation: faqIn .28s ease;
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ════════════════════════════════════════════════════════════════
   Scroll-reveal + micro-interactions
   ════════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } }

/* Button + card hover polish (applies site-wide, additive) */
.btn { transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(79,70,229,0.55); }
.btn-lg:hover { transform: translateY(-1px); }
.exam-list-simple li a { transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.exam-list-simple li a:hover { transform: translateX(4px); }
.feature { transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -20px rgba(15,23,42,0.25); }
.ep-exam-tile { transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; }
.ep-exam-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -22px rgba(15,23,42,0.3); }

/* Hero subtle animated gradient accent */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 480px; z-index: 0;
  background: radial-gradient(60% 60% at 30% 20%, rgba(79,70,229,0.10), transparent 70%),
              radial-gradient(50% 50% at 80% 10%, rgba(124,58,237,0.10), transparent 70%);
  pointer-events: none;
}
.hero .shell { position: relative; z-index: 1; }

.topbar-back { margin-right: 10px; flex: 0 0 auto; }

/* ════════════════════════════════════════════════════════════════
   Learning Club — improved topic list
   ════════════════════════════════════════════════════════════════ */
.lc-topics-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.lc-search {
  flex: 0 1 280px; min-width: 200px; padding: 10px 14px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease;
}
.lc-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.lc-topic-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
@media (max-width: 720px) { .lc-topic-list { grid-template-columns: 1fr; } }
/* An opened card expands to full width so its model answer has room to breathe. */
.lc-topic-list .topic-card.is-open { grid-column: 1 / -1; }
.lc-topic-list .topic-card { position: relative; }
.lc-topic-list .topic-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), #06b6d4); opacity: 0; transition: opacity .2s ease; }
.lc-topic-list .topic-card:hover::before, .lc-topic-list .topic-card.is-open::before { opacity: .9; }
.topic-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.topic-card:hover { border-color: var(--line-2); box-shadow: 0 8px 26px -14px rgba(15,23,42,0.18); }
.topic-card.is-open { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 12px 32px -16px rgba(79,70,229,0.25); }
.tc-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; }
.tc-index { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.tc-head-main { flex: 1 1 auto; min-width: 0; }
.tc-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-bottom: 6px; }
.tc-title { font-family: var(--serif); font-size: 16px; line-height: 1.4; color: var(--ink); letter-spacing: -0.01em; }
.tc-toggle { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; font-size: 20px; line-height: 1; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); transition: background .2s ease, color .2s ease; }
.topic-card.is-open .tc-toggle { background: var(--accent); color: #fff; }

/* ════════════════════════════════════════════════════════════════
   Blog index cards — richer, interactive
   ════════════════════════════════════════════════════════════════ */
.seo-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; }
.seo-card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px -24px rgba(15,23,42,0.32); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.seo-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.seo-readtime { font-size: 12px; color: var(--ink-4); font-weight: 500; white-space: nowrap; }
.seo-card-cta { margin-top: auto; font-weight: 600; font-size: 14px; color: var(--accent); transition: transform .2s ease; }
.seo-card:hover .seo-card-cta { transform: translateX(4px); }

/* CELPIP speaking — live transcript + saved response */
.celpip-sp-live-transcript {
  margin: 10px auto; max-width: 520px; min-height: 54px; text-align: left;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px;
  padding: 12px 14px; font-size: 14px; line-height: 1.6; color: #7c2d12;
}
.celpip-sp-transcript-box { text-align: left; max-width: 560px; margin: 0 auto 8px; }
.celpip-sp-transcript-box > strong { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════
   TopBar — restructured layout (left group / nav / actions)
   ════════════════════════════════════════════════════════════════ */
.topbar-left { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* In-page back strip: aligned to the content column, never floating at the screen edge */
.page-back { width: 100%; }
.page-back .shell { padding-top: 14px; padding-bottom: 0; }
.back-inline {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px 7px 12px; border-radius: 999px;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.back-inline span { font-size: 17px; line-height: 1; }
.back-inline:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateX(-2px); }
.topbar-icon-btn {
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
  font-size: 17px; line-height: 1; background: var(--surface-2); border: 1px solid var(--line);
  cursor: pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.topbar-icon-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(0,0,0,0.3); }
.topbar-auth {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  font-weight: 700; font-size: 14px; letter-spacing: .01em; cursor: pointer; border: none; color: #fff;
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 8px 20px -10px rgba(16,185,129,0.6);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.topbar-auth:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 26px -10px rgba(16,185,129,0.7); }
.topbar-profile {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-2); cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.topbar-profile:hover { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.topbar-profile .tp-name { display: none; }
@media (min-width: 720px) { .topbar-profile .tp-name { display: inline; } }
@media (max-width: 600px) { .topbar-auth { padding: 8px 14px; font-size: 13px; } }

/* ════════════════════════════════════════════════════════════════
   Dark mode (night study)
   ════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1b2230;
  --tint: #182230;
  --ink: #e6edf3;
  --ink-2: #c9d1d9;
  --ink-3: #9aa6b2;
  --ink-4: #6e7b8a;
  --line: rgba(255,255,255,0.10);
  --line-2: rgba(255,255,255,0.20);
  --line-soft: rgba(255,255,255,0.05);
  --accent: #818cf8;
  --accent-2: #a78bfa;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow: 0 6px 24px -8px rgba(0,0,0,0.6);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7);
  color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .topbar { background: rgba(13,17,23,0.82); }
html[data-theme="dark"] .marquee { background: var(--surface-2); }
/* Generic safety: neutralise common hard-coded light fills inside cards/panels */
html[data-theme="dark"] .q-card,
html[data-theme="dark"] .seo-card,
html[data-theme="dark"] .topic-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .feature,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .agent-shell,
html[data-theme="dark"] .chat-area,
html[data-theme="dark"] .ep-section-card,
html[data-theme="dark"] .ep-exam-tile,
html[data-theme="dark"] .celpip-sp-task,
html[data-theme="dark"] .visual-card { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
html[data-theme="dark"] .writing-area,
html[data-theme="dark"] .chat-input,
html[data-theme="dark"] .celpip-writing-textarea { background: var(--surface-2); color: var(--ink); }

/* Login — notice + forgot-password link */
.login-notice { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; }
html[data-theme="dark"] .login-notice { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.4); color: #6ee7b7; }
.login-forgot { text-align: right; margin: -4px 0 12px; }
.login-forgot a { color: var(--accent); font-size: 13px; cursor: pointer; }
.login-forgot a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   Theme-aware callout tints — used by inline-styled boxes so model
   answers / notes / transcripts stay readable in BOTH light & dark.
   ════════════════════════════════════════════════════════════════ */
:root {
  --tint-violet: #faf5ff; --tint-orange: #fff8f0; --tint-green: #f0fdf4;
  --tint-blue: #eef2ff;   --tint-amber: #fff7ed;  --tint-gray: #f9fafb;
  --tint-red: #fef2f2;    --tint-indigo: #f8f7ff;
}
html[data-theme="dark"] {
  --tint-violet: rgba(139,92,246,0.16); --tint-orange: rgba(249,115,22,0.14); --tint-green: rgba(16,185,129,0.14);
  --tint-blue: rgba(59,130,246,0.14);   --tint-amber: rgba(245,158,11,0.14);  --tint-gray: rgba(255,255,255,0.06);
  --tint-red: rgba(239,68,68,0.16);     --tint-indigo: rgba(99,102,241,0.16);
}

/* ════════════════════════════════════════════════════════════════
   Progress — gamification (XP/levels/badges) + study plan
   ════════════════════════════════════════════════════════════════ */
.gamify-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 16px; }
@media (max-width: 760px) { .gamify-grid { grid-template-columns: 1fr; } }
.level-card { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 14%,var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
.level-badge { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 24px -10px color-mix(in srgb,var(--accent) 60%,transparent); }
.level-name { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink); }
.level-xp { font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.xp-bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; width: 220px; max-width: 100%; }
.xp-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width .5s ease; }
.xp-next { font-size: 12px; color: var(--ink-4); margin-top: 5px; }
.badge-wall { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.badge-wall-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-4); border: 1px solid var(--line); filter: grayscale(1); opacity: .55; }
.badge-chip.earned { filter: none; opacity: 1; color: var(--ink); border-color: color-mix(in srgb,var(--accent) 35%,var(--line)); background: color-mix(in srgb,var(--accent) 8%,var(--surface)); }
.badge-emoji { font-size: 15px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 14px; margin-top: 10px; }
.plan-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-lg); padding: 16px 18px; transition: transform .2s ease, box-shadow .2s ease; }
.plan-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px -20px rgba(15,23,42,0.28); }
.plan-rank { position: absolute; top: 12px; right: 14px; font-size: 12px; font-weight: 800; color: var(--ink-4); }
.plan-skill { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.plan-bar { height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.plan-bar > div { height: 100%; border-radius: 999px; transition: width .5s ease; }
.plan-meta { font-size: 13px; color: var(--ink-3); }

/* Testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 18px; margin-top: 26px; }
.testimonial-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px; transition: transform .2s ease, box-shadow .25s ease; }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px -24px rgba(15,23,42,0.3); }
.t-stars { color: #f5a623; letter-spacing: 2px; font-size: 16px; }
.testimonial-card blockquote { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.testimonial-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.t-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.t-name { display: block; font-weight: 700; color: var(--ink); font-size: 14px; }
.t-meta { display: block; color: var(--ink-3); font-size: 12.5px; }

/* ════════════════════════════════════════════════════════════════
   Print / Save-as-PDF — clean score report
   ════════════════════════════════════════════════════════════════ */
@media print {
  .topbar, .footer, .marquee, .report-actions, .menu-btn,
  .chat-fab, .chat-fab--ai, [class*="chat-fab"], [class*="chatbot"] { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; color: #000; }
  .score-cell, .report-section, .q-card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; }
  @page { margin: 14mm; }
}

/* Word of the Day */
.word-of-day { margin-top: 22px; max-width: 520px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-lg); padding: 16px 20px; box-shadow: 0 8px 24px -16px rgba(15,23,42,0.2); }
.wod-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.wod-word { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ink); }
.wod-pos { font-size: 14px; font-style: italic; color: var(--ink-4); font-family: var(--sans); }
.wod-def { font-size: 15px; color: var(--ink-2); margin-top: 4px; }
.wod-ex { font-size: 14px; color: var(--ink-3); font-style: italic; margin-top: 8px; }

/* Speaking — fluency metrics */
.fluency-metrics { display: flex; gap: 12px; margin: 4px 0 4px; }
.fm-item { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-align: center; }
.fm-val { font-size: 26px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.fm-lbl { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fm-hint { font-size: 11px; color: var(--ink-4); margin-top: 2px; }

/* AI Writing feedback panel */
.ai-feedback-panel { margin-top: 14px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--r-lg); padding: 16px 18px; }
.ai-fb-head { font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--accent); margin-bottom: 8px; }
.ai-fb-body { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; }
.ai-fb-offline { font-size: 14px; color: var(--ink-3); margin: 0; }

/* ════════════════════════════════════════════════════════════════
   Score predictor + eligibility tool
   ════════════════════════════════════════════════════════════════ */
.predictor-card { max-width: 760px; margin: 26px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; box-shadow: 0 16px 40px -28px rgba(15,23,42,0.3); }
.predictor-form { display: grid; grid-template-columns: 1fr; gap: 16px; }
.predictor-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.predictor-exam-row { display: flex; flex-wrap: wrap; gap: 8px; }
.predictor-chip { padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: 14px; cursor: pointer; transition: all .15s ease; }
.predictor-chip.active { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 12%,var(--surface)); color: var(--accent); }
.predictor-input { width: 180px; max-width: 100%; padding: 12px 14px; font-size: 18px; font-weight: 700; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); }
.predictor-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
.predictor-hint { margin: 18px 0 0; color: var(--ink-3); font-size: 14.5px; }
.predictor-result { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line-2); animation: faqIn .3s ease; }
.predictor-cefr { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 14px; }
.predictor-cefr strong { color: var(--accent); }
.pe-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 10px; }
.pe-cell { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-align: center; }
.pe-exam { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.pe-val { display: block; font-size: 17px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.predictor-elig { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); background: color-mix(in srgb,var(--leaf) 8%,var(--surface)); border: 1px solid color-mix(in srgb,var(--leaf) 28%,var(--line)); border-radius: 10px; padding: 12px 14px; }
.predictor-note { font-size: 12px; color: var(--ink-4); margin: 10px 0 0; }

/* ════════════════════════════════════════════════════════════════
   Learning Club widgets — flashcards + daily challenge
   ════════════════════════════════════════════════════════════════ */
.lc-widgets { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; margin-top: 22px; align-items: start; }
@media (max-width: 820px) { .lc-widgets { grid-template-columns: 1fr; } }
.lc-widgets-col { display: flex; flex-direction: column; gap: 14px; }
.lc-widgets-col .word-of-day { margin-top: 0; max-width: none; }
.flash-launch { align-self: flex-start; padding: 12px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); background: color-mix(in srgb,var(--accent) 8%,var(--surface)); color: var(--accent); font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; }
.flash-launch:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px color-mix(in srgb,var(--accent) 50%,transparent); }
.flashcard-shell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.flashcard-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.flash-close { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--ink-4); }
.flashcard { min-height: 150px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 8%,var(--surface)), var(--surface)); padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: border-color .2s ease; }
.flashcard.is-flipped { cursor: default; }
.flash-word { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--ink); }
.flash-pos { font-size: 15px; font-style: italic; color: var(--ink-4); font-family: var(--sans); }
.flash-tap { margin-top: 10px; font-size: 13px; color: var(--ink-4); }
.flash-back { margin-top: 12px; }
.flash-def { font-size: 16px; color: var(--ink-2); }
.flash-ex { font-size: 14px; color: var(--ink-3); font-style: italic; margin-top: 8px; }
.flash-rate { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 12px; }
.fr-btn { padding: 10px 6px; border-radius: 10px; border: 1px solid var(--line); font-weight: 700; font-size: 13px; cursor: pointer; background: var(--surface); transition: transform .12s ease; }
.fr-btn:hover { transform: translateY(-1px); }
.fr-btn.again { color: #ef4444; border-color: #fca5a5; }
.fr-btn.hard { color: #d97706; border-color: #fcd34d; }
.fr-btn.good { color: #2563eb; border-color: #93c5fd; }
.fr-btn.easy { color: #16a34a; border-color: #86efac; }
.flashcard-done { text-align: center; padding: 18px 10px; }
.daily-challenge { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
.dc-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ember); margin-bottom: 8px; }
.dc-q { font-family: var(--serif); font-size: 18px; color: var(--ink); margin-bottom: 14px; line-height: 1.4; }
.dc-opts { display: flex; flex-direction: column; gap: 8px; }
.dc-opt { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 14.5px; cursor: pointer; transition: all .15s ease; }
.dc-opt:hover:not(:disabled) { border-color: var(--accent); }
.dc-opt:disabled { cursor: default; }
.dc-opt.correct { border-color: #16a34a; background: color-mix(in srgb,#16a34a 10%,var(--surface)); color: var(--ink); font-weight: 600; }
.dc-opt.wrong { border-color: #ef4444; background: color-mix(in srgb,#ef4444 8%,var(--surface)); }
.dc-letter { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--ink-3); }
.dc-tick { margin-left: auto; color: #16a34a; font-weight: 800; }
.dc-result { margin-top: 12px; font-size: 14px; line-height: 1.55; padding: 10px 12px; border-radius: 10px; }
.dc-result.ok { background: color-mix(in srgb,#16a34a 10%,var(--surface)); color: var(--ink-2); }
.dc-result.no { background: color-mix(in srgb,var(--ember) 10%,var(--surface)); color: var(--ink-2); }
.dc-back { color: var(--ink-4); }

/* ── Free Tools hub ─────────────────────────────────────────────────────── */
.tools-shell { max-width: 1120px; margin: 0 auto; padding: 28px 24px 60px; }
.tools-shell-wide { max-width: 1320px; }
.tools-shell-deck { max-width: 1320px; }
.tools-hero { text-align: center; margin: 10px 0 22px; }

/* ── Tools launcher grid + entrance/hover animations ─────────────────────── */
.tool-launcher { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 14px; margin: 4px 0 26px; }
.tool-launch-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  text-align: left; padding: 16px 16px 14px; border-radius: 16px; background: var(--surface);
  border: 1.5px solid var(--line); cursor: pointer; opacity: 0; animation: toolCardIn .45s ease forwards;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.tool-launch-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(79,70,229,.16); border-color: var(--accent); }
.tool-launch-card.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: 0 8px 22px rgba(79,70,229,.18); }
.tlc-icon { font-size: 26px; line-height: 1; }
.tlc-name { font-weight: 800; font-size: 15px; color: var(--ink); }
.tlc-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.tool-panel { animation: toolPanelIn .35s ease; }
@keyframes toolCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toolPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* IELTS → CLB */
.clb-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 14px 0; }
.clb-inputs label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: var(--ink); }
.clb-inputs input { padding: 10px; border-radius: 10px; border: 1.5px solid var(--line); font-size: 15px; background: var(--surface); color: var(--ink); }
.clb-skill-out { font-size: 12px; font-weight: 800; color: var(--accent); }
.clb-result { margin-top: 12px; padding: 16px; border-radius: 14px; text-align: center; background: var(--surface); border: 1.5px solid var(--line); }
.clb-result.good { border-color: #16a34a; background: rgba(22,163,74,.08); }
.clb-result.warn { border-color: #f59e0b; background: rgba(245,158,11,.08); }
.clb-big { font-size: 34px; font-weight: 900; color: var(--ink); }

/* Exam countdown */
.countdown-out { margin-top: 14px; padding: 22px; border-radius: 16px; text-align: center; background: var(--surface); border: 1.5px solid var(--line); }
.countdown-out.good { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.countdown-big { font-size: 46px; font-weight: 900; color: var(--ink); line-height: 1.05; }
.countdown-big span { font-size: 20px; font-weight: 700; color: var(--ink-3); }
.countdown-sub { color: var(--ink-3); font-size: 14px; margin-top: 4px; }
.countdown-pace { margin-top: 10px; font-size: 14px; color: var(--ink); }

/* Focus timer (Pomodoro) — enlarged hero timer */
.pomo-card { text-align: center; }
.pomo-task { width: 100%; max-width: 420px; margin: 4px auto 6px; display: block; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 15px; }
.pomo-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 14px 0 4px; }
.pomo-ring { width: 280px; height: 280px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) var(--pct,0%), var(--line) 0); transition: background 1s linear; box-shadow: 0 12px 44px rgba(79,70,229,.14); }
.pomo-ring.rest { background: conic-gradient(#16a34a var(--pct,0%), var(--line) 0); box-shadow: 0 12px 44px rgba(22,163,74,.14); }
.pomo-inner { width: 236px; height: 236px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pomo-time { font-size: 60px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; }
.pomo-mode { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.pomo-task-now { font-size: 13px; color: var(--accent); font-weight: 700; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.pomo-dots { display: flex; gap: 8px; }
.pomo-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); transition: background .3s, transform .3s; }
.pomo-dot.on { background: var(--accent); transform: scale(1.18); }
.pomo-btns { justify-content: center; }
.pomo-settings { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.pomo-set-group { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--ink-3); }
.pomo-chip { padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 12.5px; cursor: pointer; transition: all .15s; }
.pomo-chip:hover { border-color: var(--accent); }
.pomo-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.pomo-stats { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; font-size: 14px; color: var(--ink-3); }
.pomo-stats strong { color: var(--ink); font-size: 18px; }

/* ── Floating Focus widget (timer + study sounds), bottom-left on every page ── */
.focus-fab { position: fixed; left: 20px; bottom: 20px; z-index: 50; width: 60px; height: 60px; border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #f59e0b); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 10px 28px -6px rgba(239,68,68,.5); display: grid; place-items: center; transition: transform .18s ease, box-shadow .18s ease; }
.focus-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 34px -6px rgba(239,68,68,.6); }
.focus-fab-icon { font-size: 27px; line-height: 1; }
.focus-fab-time { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.focus-fab-time small { font-size: 11px; font-weight: 700; opacity: .85; }
.focus-fab.ticking { animation: focusPulse 2.4s ease-in-out infinite; }
@keyframes focusPulse { 0%,100% { box-shadow: 0 10px 28px -6px rgba(239,68,68,.5); } 50% { box-shadow: 0 10px 34px -2px rgba(239,68,68,.75); } }

.focus-panel { position: fixed; left: 20px; bottom: 92px; z-index: 49; width: min(330px, calc(100vw - 40px));
  max-height: min(80vh, 680px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 24px 60px -16px rgba(0,0,0,.35);
  transition: transform .22s ease, opacity .22s ease; transform-origin: bottom left; }
.focus-panel.open { transform: none; opacity: 1; }
.focus-panel.closed { transform: translateX(-130%) scale(.96); opacity: 0; pointer-events: none; }
.focus-yt { display: block; width: 100%; height: 158px; border: 0; border-radius: 12px; margin-bottom: 10px; background: #000; }
.focus-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.focus-panel-head strong { font-size: 15px; color: var(--ink); }
.focus-x { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--ink-3); line-height: 1; padding: 2px 6px; }
.focus-mini { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 16px 6px; }
.focus-mini .pomo-ring.small { width: 150px; height: 150px; box-shadow: none; }
.focus-mini .pomo-inner { width: 124px; height: 124px; }
.focus-mini .pomo-time { font-size: 32px; }
.focus-mini .pomo-mode { font-size: 11px; }
.pomo-settings.small { gap: 14px; }
.pomo-settings.small .pomo-chip { padding: 3px 8px; font-size: 11.5px; }
.pomo-stats.small { font-size: 13px; gap: 6px; }
.pomo-stats.small strong { font-size: 14px; }

.focus-sounds { border-top: 1px solid var(--line); padding: 14px 16px 16px; }
.fs-title { font-weight: 800; font-size: 13px; color: var(--ink); margin-bottom: 10px; }
.fs-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fs-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; transition: all .15s; }
.fs-opt:hover { border-color: var(--accent); }
.fs-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.fs-ic { font-size: 18px; line-height: 1; }
.fs-lbl { font-size: 10px; font-weight: 700; color: var(--ink-3); }
.fs-vol { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.fs-vol input[type=range] { flex: 1; accent-color: var(--accent); }
.fs-note { font-size: 11px; color: var(--ink-4, var(--ink-3)); margin: 8px 0 0; text-align: center; }
.fs-custom { display: flex; gap: 6px; margin-top: 10px; }
.fs-custom input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 12.5px; }
.fs-custom .tool-btn { padding: 8px 12px; }
.fs-now { margin-top: 10px; font-size: 12px; font-weight: 700; color: #16a34a; text-align: center; }
.focus-hide-link { display: block; width: 100%; background: none; border: none; border-top: 1px solid var(--line); padding: 11px 16px; font-size: 11.5px; color: var(--ink-3); cursor: pointer; text-align: center; }
.focus-hide-link:hover { color: var(--accent); }
/* Reading-speed live timer bar */
.reading-timerbar { display: inline-block; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-weight: 800; font-size: 14px; padding: 7px 14px; border-radius: 999px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
/* Word-count live indicator */
.wc-live { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ink-3); }

@media (max-width: 560px) { .focus-fab { left: 14px; bottom: 14px; } .focus-panel { left: 14px; bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { .focus-fab.ticking { animation: none; } .focus-fab:hover { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .tool-launch-card, .tool-panel { animation: none !important; opacity: 1 !important; }
  .tool-launch-card:hover { transform: none; }
  .pomo-ring { transition: none; }
}
@media (max-width: 560px) {
  .tool-launcher { grid-template-columns: repeat(2, 1fr); }
  .pomo-ring { width: 224px; height: 224px; } .pomo-inner { width: 188px; height: 188px; } .pomo-time { font-size: 48px; }
}
.tools-hero h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; color: var(--ink); }
.tools-hero p { color: var(--ink-3); font-size: 17px; margin: 0 auto; max-width: 620px; }
/* Sub-tabs render as a contained "segmented control" so they read clearly as a
   SECOND level below the bold gradient group-tabs (no more same-size confusion). */
.tools-tabs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto 22px; padding: 5px; background: var(--tint); border: 1px solid var(--line); border-radius: 16px; }
.tools-tab { border: 0; background: transparent; color: var(--ink-3); padding: 7px 15px; border-radius: 11px; font-weight: 600; cursor: pointer; font-size: 13px; transition: all .15s; }
.tools-tab:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.tools-tab.active { background: var(--surface); color: var(--accent); box-shadow: 0 2px 8px -2px rgba(15,23,42,0.20); }
.tool-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; box-shadow: 0 4px 18px rgba(15,23,42,.05); }
.tool-card h2 { margin: 0 0 6px; color: var(--ink); font-size: 22px; }
.tool-sub { color: var(--ink-3); margin: 0 0 18px; font-size: 15px; }
.tool-note { color: var(--ink-3); font-size: 13px; font-style: italic; margin-top: 14px; }
.tool-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.tool-row.btns { align-items: center; }
.tool-row label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--ink-2); font-size: 14px; }
.tool-row select, .tool-row input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 15px; min-width: 150px; }
.tool-btn { background: var(--accent); color: #fff; border: none; padding: 11px 20px; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 15px; }
.tool-btn:hover { filter: brightness(1.07); }
.tool-btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.tool-btn:disabled { opacity: .6; cursor: default; }
.convert-out { margin-top: 20px; }
.convert-cefr { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.cefr-badge { background: var(--accent); color: #fff; padding: 4px 12px; border-radius: 8px; font-size: 18px; }
.convert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.convert-cell { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-align: center; }
.convert-cell span { display: block; color: var(--ink-3); font-size: 12px; margin-bottom: 4px; }
.convert-cell strong { color: var(--ink); font-size: 17px; }
.elig-result { margin-top: 18px; padding: 14px 18px; border-radius: 12px; font-weight: 600; font-size: 15px; }
.elig-result.idle { background: var(--bg); color: var(--ink-3); }
.elig-result.good { background: color-mix(in srgb,#16a34a 12%,var(--surface)); color: var(--ink); }
.elig-result.warn { background: color-mix(in srgb,var(--ember) 12%,var(--surface)); color: var(--ink); }
.reading-cta { text-align: center; padding: 16px 0; }
.reading-text { line-height: 1.8; font-size: 17px; color: var(--ink); margin: 16px 0; }
.reading-result { text-align: center; padding: 20px 0; }
.reading-result.good .big-wpm { color: #16a34a; }
.reading-result.warn .big-wpm { color: var(--ember); }
.big-wpm { font-size: 56px; font-weight: 800; line-height: 1; }
.big-wpm span { font-size: 20px; font-weight: 600; color: var(--ink-3); }
.reading-result > div:nth-child(2) { color: var(--ink-2); font-weight: 600; margin: 8px 0 16px; }
.shadow-sentence { font-size: 20px; font-weight: 600; color: var(--ink); background: var(--bg); border-left: 4px solid var(--accent); padding: 16px 18px; border-radius: 10px; margin: 8px 0 18px; }
.shadow-heard { margin-top: 14px; color: var(--ink-2); }
.shadow-score { margin-top: 12px; font-size: 16px; padding: 12px 16px; border-radius: 10px; }
.shadow-score.good { background: color-mix(in srgb,#16a34a 12%,var(--surface)); }
.shadow-score.warn { background: color-mix(in srgb,var(--ember) 12%,var(--surface)); }
.shadow-score.bad { background: color-mix(in srgb,#ef4444 12%,var(--surface)); }
.tools-foot { text-align: center; margin-top: 24px; }

/* ── Explain-with-AI (review screens) ───────────────────────────────────── */
.review-explain-ai { margin-top: 10px; }
.explain-ai-btn { background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; border: none; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; }
.explain-ai-btn:hover { filter: brightness(1.08); }
.explain-ai-btn:disabled { opacity: .7; cursor: default; }
.explain-ai-err { color: var(--ember); font-size: 13px; margin-left: 8px; }
.explain-ai-out { margin-top: 8px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 10px; padding: 12px 14px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.explain-ai-out strong { color: var(--accent); }

/* ── AI Study Planner ───────────────────────────────────────────────────── */
.planner-shell { max-width: 820px; margin: 0 auto; padding: 28px 20px 60px; }
.planner-form .tool-btn { margin-top: 18px; }
.plan-view { display: flex; flex-direction: column; gap: 16px; }
.plan-summary-head, .plan-phase-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 4px; }
.plan-stat { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; color: var(--ink-3); font-size: 13px; }
.plan-stat span { display: block; font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.plan-weak { margin: 12px 0 0; color: var(--ink-2); font-size: 14px; }
.plan-coach { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.plan-coach.loading { color: var(--ink-3); font-style: italic; background: transparent; border: none; padding: 6px 0; }
.plan-coach strong { color: var(--accent); }
.plan-span { background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.plan-phase h3 { margin: 0; color: var(--ink); font-size: 18px; }
.plan-tasks { margin: 14px 0 0; padding-left: 20px; }
.plan-tasks li { margin: 8px 0; color: var(--ink-2); line-height: 1.55; }
.plan-cta h3 { margin: 0 0 12px; color: var(--ink); }
.plan-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px){ .plan-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Performance analytics (Progress) ───────────────────────────────────── */
.analytics-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.analytics-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; }
.analytics-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.analytics-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.analytics-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.analytics-card-title { font-weight: 700; color: var(--ink); margin-bottom: 12px; font-size: 15px; }
.sparkline { display: block; overflow: visible; }
.analytics-meta { margin-top: 10px; color: var(--ink-3); font-size: 14px; }
.analytics-meta .delta { font-weight: 800; }
.analytics-meta .delta.up { color: var(--leaf); }
.analytics-meta .delta.down { color: var(--ember); }
.analytics-predict { font-size: 40px; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 8px; }
.analytics-bars { display: flex; flex-direction: column; gap: 10px; }
.analytics-bar-row { display: grid; grid-template-columns: 130px 1fr 48px; align-items: center; gap: 10px; }
.analytics-bar-label { color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analytics-bar { background: var(--bg); border-radius: 999px; height: 10px; overflow: hidden; }
.analytics-bar > div { height: 100%; border-radius: 999px; transition: width .5s; }
.analytics-bar-val { text-align: right; font-weight: 700; font-size: 13px; }
@media (max-width: 620px){ .analytics-grid { grid-template-columns: 1fr; } .analytics-bar-row { grid-template-columns: 100px 1fr 42px; } }

/* ── Flashcard deck selector ────────────────────────────────────────────── */
.flash-launch-wrap { display: flex; flex-direction: column; gap: 10px; }
.flash-decks { display: flex; flex-wrap: wrap; gap: 8px; }
.flash-deck-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 12px; cursor: pointer; }
.flash-deck-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Reminder bell ──────────────────────────────────────────────────────── */
.reminder-bell-wrap { display: inline-flex; align-items: center; gap: 8px; }
.reminder-msg { font-size: 12px; color: var(--ink-3); }

/* ── College Predictor + directory ──────────────────────────────────────── */
.college-panel { display: flex; flex-direction: column; gap: 16px; }
.college-bucket { display: flex; flex-direction: column; gap: 12px; }
.cb-head { margin-bottom: 2px; }
.cb-head h3 { margin: 0; color: var(--ink); font-size: 20px; }
.cb-head h3 span { color: var(--ink-3); font-weight: 500; font-size: 15px; }
.cb-head p { margin: 2px 0 0; color: var(--ink-3); font-size: 14px; }
.college-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cc-name { font-weight: 700; color: var(--ink); font-size: 16px; }
.cc-loc { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.cc-cat { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.cat-safe { background: color-mix(in srgb,#16a34a 16%,var(--surface)); color: #15803d; }
.cat-target { background: color-mix(in srgb,var(--accent) 16%,var(--surface)); color: var(--accent); }
.cat-reach { background: color-mix(in srgb,var(--ember) 16%,var(--surface)); color: #c2410c; }
.cat-asp { background: color-mix(in srgb,#a855f7 16%,var(--surface)); color: #7e22ce; }
.cc-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0; }
.cc-stats > div { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 6px; text-align: center; }
.cc-stats span { display: block; color: var(--ink-3); font-size: 11px; }
.cc-stats strong { color: var(--ink); font-size: 14px; }
.cc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-tag { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--ink-2); }
.cc-tag.over { background: color-mix(in srgb,var(--ember) 14%,var(--surface)); color: #c2410c; }
.cc-toggle { margin-top: 12px; background: transparent; border: none; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; }
.cc-details { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.cc-block { margin: 8px 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.cc-block strong { color: var(--ink); }
.cc-steps { margin: 6px 0 0; padding-left: 20px; }
.cc-steps li { margin: 4px 0; color: var(--ink-2); font-size: 13.5px; }
@media (max-width: 620px){ .cc-stats { grid-template-columns: repeat(3, 1fr); } }

/* ── SOP tool ───────────────────────────────────────────────────────────── */
.sop-panel { display: flex; flex-direction: column; gap: 14px; }
.sop-modes { display: flex; gap: 8px; }
.sop-mode { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 9px 16px; border-radius: 999px; font-weight: 600; cursor: pointer; font-size: 14px; }
.sop-mode.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.sop-panel label, .sop-full { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--ink-2); font-size: 14px; }
.sop-full { margin-bottom: 12px; }
.sop-panel input, .sop-panel textarea, .sop-result { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 14px; font-family: inherit; width: 100%; }
.sop-result { line-height: 1.6; }
.sop-output { margin-top: 14px; }
.sop-count { color: var(--ink-3); font-size: 13px; }
.sop-checklist { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.sop-score-badge { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.sop-score-badge strong { color: var(--accent); }
.sop-check { font-size: 13.5px; }
.sop-check.ok { color: #15803d; }
.sop-check.no { color: #c2410c; }
.sop-ai-feedback { margin-top: 14px; background: color-mix(in srgb,var(--accent) 6%,var(--surface)); border: 1px solid color-mix(in srgb,var(--accent) 18%,var(--line)); border-radius: 12px; padding: 14px 16px; }
.sop-ai-feedback p { margin: 4px 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
@media (max-width: 560px){ .sop-grid { grid-template-columns: 1fr; } }

/* ── Smart Error Log / Mistake Notebook ─────────────────────────────────── */
.err-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 14px; }
.err-filters select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 14px; }
.err-check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 14px; }
.err-list { display: flex; flex-direction: column; gap: 12px; }
.err-item { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ember); border-radius: 12px; padding: 14px 16px; }
.err-item.mastered { border-left-color: var(--leaf); opacity: .72; }
.err-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.err-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.err-badge { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.err-badge.sec { color: var(--accent); }
.err-badge.type { color: var(--ink-2); }
.err-badge.done { background: color-mix(in srgb,#16a34a 14%,var(--surface)); color: #15803d; }
.err-x { background: transparent; border: none; color: var(--ink-3); cursor: pointer; font-size: 14px; }
.err-q { margin: 10px 0; color: var(--ink); font-weight: 600; line-height: 1.5; }
.err-options { display: flex; flex-direction: column; gap: 8px; }
.err-opt { text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; cursor: pointer; color: var(--ink-2); font-size: 14px; }
.err-opt:hover { border-color: var(--accent); }
.err-answers { display: flex; flex-direction: column; gap: 4px; }
.err-row { font-size: 14px; color: var(--ink-2); }
.err-row span { color: var(--ink-3); }
.err-row.good { color: #15803d; } .err-row.bad { color: #c2410c; }
.bad-text { color: #c2410c; } .good-text { color: #15803d; }
.err-exp { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }
.err-exp strong { color: var(--ink-2); }
.err-actions { margin-top: 10px; }
.err-empty { background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; padding: 22px; text-align: center; color: var(--ink-3); }

/* ── Save button on college cards ───────────────────────────────────────── */
.cc-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.cc-save { background: color-mix(in srgb,var(--accent) 12%,var(--surface)); border: 1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); color: var(--accent); font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.cc-save.saved { background: color-mix(in srgb,#16a34a 14%,var(--surface)); border-color: #16a34a; color: #15803d; }
.cc-toggle { background: transparent; border: none; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; }

/* ── My Applications tracker ─────────────────────────────────────────────── */
.apps-panel { display: flex; flex-direction: column; gap: 16px; }
.apps-summary { display: flex; gap: 10px; margin-top: 12px; }
.apps-stat { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }
.apps-stat span { display: block; font-size: 22px; font-weight: 800; color: var(--accent); }
.apps-bucket h3 { margin: 0 0 10px; color: var(--ink); font-size: 18px; }
.apps-bucket h3 span { color: var(--ink-3); font-weight: 500; font-size: 14px; }
.app-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.app-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.app-name { font-weight: 700; color: var(--ink); }
.app-loc { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.app-controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 10px; }
.app-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.app-controls select, .app-controls input, .app-notes { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font-size: 13px; font-family: inherit; }
.app-notes { width: 100%; resize: vertical; }

/* ── Calculators ────────────────────────────────────────────────────────── */
.calc-panel { display: flex; flex-direction: column; gap: 16px; }

/* ── Activity heatmap ───────────────────────────────────────────────────── */
.heatmap { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 3px; margin-top: 6px; max-width: 100%; overflow-x: auto; }
.hm-cell { width: 13px; height: 13px; border-radius: 3px; background: var(--bg); border: 1px solid var(--line); }
.hm-0 { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.hm-1 { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); border-color: transparent; }
.hm-2 { background: color-mix(in srgb, var(--accent) 60%, var(--surface)); border-color: transparent; }
.hm-3 { background: var(--accent); border-color: transparent; }
.heatmap-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--ink-3); font-size: 12px; }
.heatmap-legend .hm-cell { width: 11px; height: 11px; }

/* ── Scholarship Finder ─────────────────────────────────────────────────── */
.sch-panel { display: flex; flex-direction: column; gap: 16px; }
.sch-results { display: flex; flex-direction: column; gap: 12px; }
.sch-results h3 { margin: 0 0 2px; color: var(--ink); font-size: 18px; }
.sch-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.sch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sch-name { font-weight: 700; color: var(--ink); font-size: 16px; }
.sch-loc { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.sch-type { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.sch-govt { background: color-mix(in srgb,var(--accent) 16%,var(--surface)); color: var(--accent); }
.sch-uni { background: color-mix(in srgb,#a855f7 16%,var(--surface)); color: #7e22ce; }
.sch-merit { background: color-mix(in srgb,var(--gold,#d97706) 18%,var(--surface)); color: #b45309; }
.sch-need { background: color-mix(in srgb,#16a34a 16%,var(--surface)); color: #15803d; }
.sch-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.sch-stats > div { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px; text-align: center; }
.sch-stats span { display: block; color: var(--ink-3); font-size: 11px; }
.sch-stats strong { color: var(--ink); font-size: 13px; }
.sch-hi { color: var(--ink-2); font-size: 14px; margin: 4px 0 8px; line-height: 1.5; }
.sch-elig { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; color: var(--ink-2); font-size: 14px; }

/* ── Weakest-skill drill button ─────────────────────────────────────────── */
.weak-drill-btn { margin-top: 14px; width: 100%; background: linear-gradient(135deg, var(--accent), #7c3aed); color: #fff; border: none; padding: 11px 16px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; }
.weak-drill-btn:hover { filter: brightness(1.07); }

/* ── College tool: rich detail, reasons, compare, filters ───────────────── */
.cc-reason { background: var(--bg); border-radius: 8px; padding: 8px 12px; margin: 10px 0; font-size: 13px; color: var(--ink-2); border: 1px solid var(--line); }
.cc-conf { color: var(--accent); font-weight: 700; }
.cc-tag.good { background: color-mix(in srgb,#16a34a 12%,var(--surface)); color: #15803d; }
.cc-compare { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); font-weight: 600; cursor: pointer; }
.cc-details h4 { margin: 16px 0 6px; color: var(--ink); font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.cc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.cc-grid > div { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px; text-align: center; }
.cc-grid span { display: block; color: var(--ink-3); font-size: 11px; margin-bottom: 2px; }
.cc-grid strong { color: var(--ink); font-size: 13px; word-break: break-word; }
.cc-grid a { color: var(--accent); }
.tool-row .chk { flex-direction: row; align-items: center; gap: 6px; }
.compare-wrap { overflow: hidden; }
.compare-head { display: flex; justify-content: space-between; align-items: center; }
.compare-head h3 { margin: 0; color: var(--ink); }
.compare-scroll { overflow-x: auto; margin-top: 10px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.compare-table th, .compare-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; color: var(--ink-2); }
.compare-table thead th { background: var(--bg); color: var(--ink); font-weight: 700; }
.compare-table .cmp-label { background: var(--bg); color: var(--ink-3); font-weight: 600; white-space: nowrap; }
@media (max-width: 620px){ .cc-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── SOP samples + scholarship calendar ─────────────────────────────────── */
.sop-sample-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sop-sample-tab { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; }
.sop-sample-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sop-sample-meta { font-size: 12px; font-weight: 700; color: var(--accent); margin: 2px 0 8px; }
.sop-sample-text { background: var(--bg); border-left: 3px solid var(--accent); border-radius: 10px; padding: 16px 18px; color: var(--ink); line-height: 1.7; font-size: 15px; }
.sop-sample-text p { margin: 0 0 13px; }
.sop-sample-text p:last-child { margin-bottom: 0; }
.sch-viewtoggle { display: flex; gap: 8px; margin-top: 12px; }
.sch-vbtn { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; }
.sch-vbtn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sch-calendar { display: flex; flex-direction: column; gap: 14px; }
.sch-month h3 { margin: 0 0 8px; color: var(--ink); font-size: 17px; }
.sch-cal-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.sch-cal-item strong { color: var(--ink); }
.sch-cal-meta { color: var(--ink-3); font-size: 13px; }
.sch-cal-deadline { background: color-mix(in srgb,var(--ember) 14%,var(--surface)); color: #c2410c; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.uni-table td { border: 1px solid var(--line); padding: 7px 12px; }

/* ── Destinations (country profiles) ────────────────────────────────────── */
.dest-panel { display: flex; flex-direction: column; gap: 14px; }
.dest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dest-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; }
.dest-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.dest-chip-flag { font-size: 16px; }
.dest-hero { display: flex; align-items: center; gap: 18px; }
.dest-hero-icon { font-size: 56px; line-height: 1; }
.dest-hero-info h2 { margin: 0 0 4px; color: var(--ink); font-size: 22px; }
.dest-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dest-visa { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.dest-visa.good, .dest-visa.inline.good { background: color-mix(in srgb,#16a34a 14%,var(--surface)); color: #15803d; }
.dest-visa.ok, .dest-visa.inline.ok { background: color-mix(in srgb,var(--gold,#d97706) 16%,var(--surface)); color: #b45309; }
.dest-visa.warn, .dest-visa.inline.warn { background: color-mix(in srgb,var(--ember) 14%,var(--surface)); color: #c2410c; }
.dest-visa.inline { font-size: 12px; padding: 2px 8px; margin-left: 6px; }
.dest-badge { font-size: 13px; color: var(--ink-3); }
.dest-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dest-panel h3 { margin: 0 0 10px; color: var(--ink); font-size: 17px; }
.dest-why { margin: 0; padding-left: 20px; } .dest-why li { margin: 6px 0; color: var(--ink-2); }
.dest-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dest-facts > div { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.dest-facts span { display: block; color: var(--ink-3); font-size: 11px; }
.dest-facts strong { color: var(--ink); font-size: 13px; }
.dest-imm p { margin: 8px 0; color: var(--ink-2); line-height: 1.55; }
.dest-imm strong { color: var(--ink); }
.dest-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.dest-city { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--ink-2); }
.dest-changes { margin: 0; padding-left: 18px; } .dest-changes li { margin: 8px 0; color: var(--ink-2); line-height: 1.5; }
.dest-change-d { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-right: 6px; }
.dest-unis { display: flex; flex-direction: column; gap: 8px; }
.dest-uni { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.dest-uni-meta { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.dest-uni-link { color: var(--accent); font-weight: 600; font-size: 13px; white-space: nowrap; }
@media (max-width: 640px){ .dest-grid2 { grid-template-columns: 1fr; } .dest-facts { grid-template-columns: 1fr; } }

/* ── Rankings ───────────────────────────────────────────────────────────── */
.rank-panel { display: flex; flex-direction: column; gap: 14px; }
.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.rank-num { font-size: 18px; font-weight: 800; color: var(--accent); min-width: 52px; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-weight: 700; color: var(--ink); }
.rank-meta { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.rank-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
@media (max-width: 560px){ .rank-stats { display: none; } }

/* ── Education-loan comparison ──────────────────────────────────────────── */
.loan-panel { display: flex; flex-direction: column; gap: 14px; }
.loan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.loan-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.loan-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.loan-head strong { color: var(--ink); }
.loan-type { font-size: 11px; font-weight: 700; color: var(--accent); background: color-mix(in srgb,var(--accent) 12%,var(--surface)); padding: 3px 9px; border-radius: 999px; }
.loan-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.loan-stats > div { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; text-align: center; }
.loan-stats span { display: block; color: var(--ink-3); font-size: 10px; }
.loan-stats strong { color: var(--ink); font-size: 12px; }
.loan-notes { color: var(--ink-3); font-size: 13px; margin: 10px 0 0; line-height: 1.5; }
@media (max-width: 700px){ .loan-cards { grid-template-columns: 1fr; } }

/* ── Homepage study-abroad band ─────────────────────────────────────────── */
.sa-band-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 8%,var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: 20px; padding: 28px 30px; }
.sa-band-flags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sa-flag { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: transform .15s, border-color .15s; }
.sa-flag:hover { transform: translateY(-2px); border-color: var(--accent); }
.sa-flag span { font-size: 26px; }
@media (max-width: 760px){ .sa-band-inner { grid-template-columns: 1fr; } }

/* ── Country-first selector (Colleges page) ─────────────────────────────── */
.country-select { background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 8%,var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
.country-select-label { font-weight: 700; color: var(--ink); margin-bottom: 10px; font-size: 15px; }
.country-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.country-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 6px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); transition: transform .12s, border-color .12s, background .12s; }
.country-pick:hover { transform: translateY(-2px); border-color: var(--accent); }
.country-pick.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.country-pick-flag { font-size: 26px; line-height: 1; }
.dest-process { margin: 6px 0 0; padding-left: 20px; } .dest-process li { margin: 7px 0; color: var(--ink-2); line-height: 1.5; }
.dest-docs { color: var(--ink-2); font-size: 14px; margin: 10px 0 0; line-height: 1.55; }
.dest-docs strong { color: var(--ink); }

/* ── Country landmark illustration (destination hero) ───────────────────── */
.dest-landmark { width: 84px; height: 84px; flex: 0 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.35); }
.dest-landmark svg { display: block; }
@media (max-width: 560px){ .dest-landmark { width: 64px; height: 64px; } }

/* ── AI Counsellor chat ─────────────────────────────────────────────────── */
.couns-panel { display: flex; flex-direction: column; gap: 14px; }
.couns-messages { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding: 4px; }
.couns-msg { max-width: 85%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.couns-msg.bot { background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.couns-msg.user { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.couns-typing { color: var(--ink-3); font-style: italic; }
.couns-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.couns-chip { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); padding: 6px 12px; border-radius: 999px; font-size: 12px; cursor: pointer; text-align: left; }
.couns-chip:hover { border-color: var(--accent); color: var(--accent); }
.couns-input { display: flex; gap: 8px; }
.couns-input input { flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 14px; }

/* ── Course / Program finder ────────────────────────────────────────────── */
.prog-panel { display: flex; flex-direction: column; gap: 14px; }
.prog-results { display: flex; flex-direction: column; gap: 10px; }
.prog-results h3 { margin: 0; color: var(--ink); font-size: 17px; }
.prog-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; }
.prog-name { font-weight: 700; color: var(--ink); }
.prog-meta { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.prog-progs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.prog-tag { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--ink-3); }
.prog-tag.hit { background: color-mix(in srgb,var(--accent) 14%,var(--surface)); color: var(--accent); border-color: transparent; font-weight: 600; }

/* ── Study planner: week-by-week schedule ───────────────────────────────── */
.plan-weeks-wrap { margin-top: 18px; }
.plan-weeks-title { font-size: 20px; color: var(--ink); margin: 0 0 12px; }
.plan-week { padding: 0 !important; overflow: hidden; }
.plan-week-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: color-mix(in srgb,var(--accent) 10%,var(--surface)); border-bottom: 1px solid var(--line); }
.plan-week-no { font-weight: 800; color: var(--accent); font-size: 15px; }
.plan-week-focus { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.plan-week-table { width: 100%; border-collapse: collapse; }
.plan-week-table td { padding: 10px 18px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
.plan-week-table tr:last-child td { border-bottom: none; }
.plan-day-name { width: 54px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.plan-day-task { color: var(--ink-2); line-height: 1.5; }
.plan-day-rest .plan-day-task { color: var(--ink-3); font-style: italic; }
.plan-week-milestone { margin: 0; padding: 12px 18px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; border-top: 1px solid var(--line); }

/* ── Destinations: immigration plan, visa types, roadmap ────────────────── */
.dest-sub { font-size: 15px; color: var(--ink); margin: 18px 0 10px; }
.dest-pr-pill { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb,var(--accent) 12%,var(--surface)); color: var(--accent); font-size: 12px; font-weight: 700; }
.dest-visa-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 10px; }
.dest-visa-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.dest-visa-card strong { color: var(--ink); font-size: 14px; }
.dest-visa-card span { color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.dest-roadmap { list-style: none; counter-reset: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dest-roadmap li { display: flex; align-items: flex-start; gap: 11px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.dest-step-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; margin-top: 1px; }
.dest-immchanges { margin-top: 16px; }
.dest-immplan { margin-top: 4px; }

/* ── Home: key stats band + main pros grid ──────────────────────────────── */
.lp-stats { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.lp-stat { flex: 1 1 140px; max-width: 200px; text-align: center; padding: 16px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.lp-stat-n { display: block; font-size: clamp(26px,4vw,34px); font-weight: 800; color: var(--accent); line-height: 1; font-family: var(--serif, inherit); }
.lp-stat-l { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.lp-pros { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 14px; margin-top: 26px; }
.lp-pro { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; cursor: pointer; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease; }
.lp-pro:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 32px -18px rgba(0,0,0,0.4); }
.lp-pro-ic { font-size: 26px; line-height: 1; }
.lp-pro-t { font-size: 16px; font-weight: 700; color: var(--ink); }
.lp-pro-d { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }

/* ── Live data: notes + changes feed ────────────────────────────────────── */
.live-note { margin: 12px 0; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb,var(--accent) 9%,var(--surface)); border: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.live-stamp { color: var(--ink-3); }
.changes-feed { display: flex; flex-direction: column; gap: 4px; }
.changes-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.changes-head h3 { margin: 0; color: var(--ink); font-size: 18px; }
.changes-updated { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.changes-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.changes-cat { border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; }
.changes-cat.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.changes-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.change-item { display: flex; gap: 11px; padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.change-ic { font-size: 18px; line-height: 1.4; flex: 0 0 auto; }
.change-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 3px; }
.change-date { font-size: 12px; font-weight: 700; color: var(--accent); }
.change-scope { font-size: 11px; font-weight: 700; color: var(--ink); background: var(--bg); border: 1px solid var(--line); padding: 1px 8px; border-radius: 999px; }
.change-cat { font-size: 11px; color: var(--ink-3); }
.change-text { color: var(--ink-2); font-size: 14px; line-height: 1.5; }

/* ── Profile Evaluation ─────────────────────────────────────────────────── */
.peval-panel { display: flex; flex-direction: column; gap: 14px; }
.peval-summary p { margin: 0 0 6px; }
.peval-safe { color: #16a34a; } .peval-target { color: var(--accent); } .peval-reach { color: #d97706; }
.peval-cols { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 12px; }
.peval-col { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.peval-col h3 { margin: 0 0 10px; font-size: 16px; color: var(--ink); }
.peval-col h3 span { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.peval-col.reach { border-top: 3px solid #d97706; } .peval-col.target { border-top: 3px solid var(--accent); } .peval-col.safe { border-top: 3px solid #16a34a; }
.peval-uni { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.peval-uni:last-child { border-bottom: none; }
.peval-uni strong { color: var(--ink); font-size: 14px; }
.peval-uni span { color: var(--ink-3); font-size: 12px; }
.peval-sch { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.peval-next-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ── Applications: deadlines ────────────────────────────────────────────── */
.apps-dl-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.apps-dl-head h3 { margin: 0; color: var(--ink); }
.tool-btn.ghost.on { background: color-mix(in srgb,var(--accent) 14%,var(--surface)); color: var(--accent); border-color: var(--accent); }
.apps-dl-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.apps-dl-item { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 12px; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.apps-dl-item.soon { border-left: 3px solid #d97706; } .apps-dl-item.past { opacity: .55; } .apps-dl-item.ok { border-left: 3px solid #16a34a; }
.apps-dl-name { font-weight: 600; color: var(--ink); font-size: 14px; }
.apps-dl-date { color: var(--ink-3); font-size: 13px; }
.apps-dl-days { font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.apps-dl-cal { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.apps-dl-cal:hover { border-color: var(--accent); color: var(--accent); }

/* ── Study-abroad stage FAQ accordion ───────────────────────────────────── */
.faq-stage { margin-top: 18px; }
.faq-stage-title { font-size: 15px; color: var(--accent); margin: 0 0 8px; }
.faq-acc { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 7px; overflow: hidden; background: var(--surface); }
.faq-acc-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 15px; background: none; border: none; text-align: left; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.faq-acc-ic { color: var(--accent); font-size: 18px; flex: 0 0 auto; }
.faq-acc-a { padding: 0 15px 14px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.faq-acc.open { border-color: var(--accent); }

/* ── Compare (universities + countries) ─────────────────────────────────── */
.cmp-panel { display: flex; flex-direction: column; gap: 14px; }
.cmp-modes { display: flex; gap: 8px; margin-top: 6px; }
.cmp-mode { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; }
.cmp-mode.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cmp-count { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.cmp-search { position: relative; margin-top: 10px; }
.cmp-search input { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 14px; }
.cmp-suggest { position: absolute; z-index: 5; left: 0; right: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 32px -16px rgba(0,0,0,0.4); overflow: hidden; }
.cmp-suggest-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; background: none; border: none; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.cmp-suggest-item:last-child { border-bottom: none; }
.cmp-suggest-item:hover { background: var(--surface-2); }
.cmp-suggest-item strong { color: var(--ink); font-size: 14px; }
.cmp-suggest-item span { color: var(--ink-3); font-size: 12px; }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cmp-chip { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb,var(--accent) 12%,var(--surface)); color: var(--accent); border-radius: 999px; padding: 5px 8px 5px 14px; font-size: 13px; font-weight: 600; }
.cmp-chip button { background: rgba(0,0,0,0.08); border: none; width: 18px; height: 18px; border-radius: 999px; cursor: pointer; color: inherit; font-size: 11px; line-height: 1; }
.cmp-country-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cmp-cpick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 7px 13px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; }
.cmp-cpick.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cmp-table-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.cmp-table th, .cmp-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13.5px; vertical-align: top; color: var(--ink-2); }
.cmp-table thead th { background: color-mix(in srgb,var(--accent) 8%,var(--surface)); color: var(--ink); font-size: 14px; position: sticky; top: 0; }
.cmp-table thead th a { color: var(--accent); }
.cmp-rowhead { font-weight: 700; color: var(--ink); background: var(--surface-2); white-space: nowrap; }
.cmp-table tr:last-child td { border-bottom: none; }

/* ── Home: combined FAQ tabs ────────────────────────────────────────────── */
.faq-tabs { display: flex; gap: 8px; margin: 18px 0 14px; flex-wrap: wrap; }
.faq-tab { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.faq-tab:hover { border-color: var(--accent); color: var(--accent); }
.faq-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Apply to Universities (partner) ────────────────────────────────────── */
.apply-panel { display: flex; flex-direction: column; gap: 14px; }
.apply-head h2 { margin: 0 0 6px; }
.apply-table-card { padding: 0 !important; overflow: hidden; }
.apply-table { width: 100%; }
.apply-row { display: grid; grid-template-columns: 1fr 200px 130px; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.apply-row:last-child { border-bottom: none; }
.apply-thead { background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),color-mix(in srgb,#db2777 8%,var(--surface))); font-weight: 800; color: var(--ink); }
.apply-fee-h, .apply-act-h { text-align: center; }
.apply-uni { display: flex; align-items: center; gap: 12px; }
.apply-logo { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; }
.apply-name { font-weight: 700; color: var(--ink); }
.apply-loc { font-size: 12px; color: var(--ink-3); }
.apply-fee { text-align: center; font-size: 14px; }
.apply-old { text-decoration: line-through; color: var(--ink-3); }
.apply-new { color: #16a34a; font-weight: 700; }
.apply-pct { color: #16a34a; font-weight: 800; }
.apply-cur { font-weight: 700; color: var(--ink); }
.apply-act { text-align: center; }
.apply-btn { display: inline-block; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-weight: 700; font-size: 13px; text-decoration: none; }
.apply-btn:hover { background: var(--accent); color: #fff; }
.apply-more { text-align: center; padding: 14px; }
.apply-steps { margin: 8px 0 14px; padding-left: 20px; color: var(--ink-2); line-height: 1.8; }
.apply-help-btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px){ .apply-row { grid-template-columns: 1fr auto; } .apply-fee, .apply-fee-h { display: none; } }

/* ── Visa interview ─────────────────────────────────────────────────────── */
.visa-panel { display: flex; flex-direction: column; gap: 14px; }
.visa-progress { align-self: end; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.visa-q { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.visa-answer { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 14px; resize: vertical; }
.visa-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.visa-tip { margin-top: 12px; padding: 10px 14px; background: var(--surface-2); border-radius: 9px; color: var(--ink-2); font-size: 13.5px; }
.visa-feedback { margin-top: 12px; padding: 12px 15px; background: color-mix(in srgb,var(--accent) 8%,var(--surface)); border-radius: 10px; }
.visa-feedback p { margin: 4px 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }

/* ── ROI calculator ─────────────────────────────────────────────────────── */
.roi-result { margin-top: 14px; }
.roi-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; }
.roi-cell { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; }
.roi-cell span { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.roi-cell strong { font-size: 19px; color: var(--ink); }
.roi-cell.highlight { background: color-mix(in srgb,var(--accent) 12%,var(--surface)); border-color: var(--accent); }
.roi-cell.highlight strong { color: var(--accent); }
.roi-verdict { margin: 12px 0 0; font-weight: 600; color: var(--ink); }

/* ── Onboarding wizard ──────────────────────────────────────────────────── */
.onb-panel { display: flex; flex-direction: column; gap: 14px; }
.onb-dots { display: flex; gap: 10px; margin-top: 12px; }
.onb-dot { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.onb-dot.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.onb-nav, .onb-next-btns, .onb-doc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.onb-result-head p { margin: 0 0 6px; }
.onb-docs { color: var(--ink-2); line-height: 1.7; font-size: 14px; }
.onb-timeline { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; }
.onb-timeline li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.onb-tl-when { flex: 0 0 130px; font-weight: 700; color: var(--accent); font-size: 13px; }

/* ── Community Q&A ──────────────────────────────────────────────────────── */
.comm-panel { display: flex; flex-direction: column; gap: 14px; }
.comm-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.comm-ask { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.comm-ask input, .comm-ask textarea, .comm-ask select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font-size: 14px; }
.comm-ask-row { display: flex; flex-wrap: wrap; gap: 8px; }
.comm-ask-row select, .comm-ask-row input { flex: 1 1 120px; }
.comm-list { display: flex; flex-direction: column; gap: 8px; }
.comm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.comm-q-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.comm-vote { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface-2); color: var(--accent); border-radius: 8px; padding: 5px 9px; font-size: 11px; font-weight: 700; cursor: pointer; }
.comm-vote span { font-size: 13px; color: var(--ink); }
.comm-vote.sm { padding: 3px 7px; }
.comm-q-main { flex: 1; min-width: 0; }
.comm-q-title { font-weight: 700; color: var(--ink); font-size: 15px; }
.comm-q-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.comm-tag { background: color-mix(in srgb,var(--accent) 14%,var(--surface)); color: var(--accent); font-weight: 700; padding: 1px 9px; border-radius: 999px; }
.comm-scope { background: var(--bg); border: 1px solid var(--line); padding: 1px 8px; border-radius: 999px; font-weight: 600; color: var(--ink-2); }
.comm-caret { color: var(--accent); font-size: 18px; flex: 0 0 auto; }
.comm-q-body { padding: 0 16px 14px; border-top: 1px solid var(--line); }
.comm-q-text { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 12px 0; }
.comm-answer { display: flex; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--line); }
.comm-a-text { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.comm-a-meta { color: var(--ink-3); font-size: 12px; margin-top: 3px; }
.comm-add-answer { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.comm-add-answer textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font-size: 14px; }
.comm-add-answer .tool-btn { align-self: flex-start; }

/* ── Leaderboard ────────────────────────────────────────────────────────── */
.lb-panel { display: flex; flex-direction: column; gap: 14px; }
.lb-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.lb-tab { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 6px 13px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; }
.lb-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.lb-submit-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-submit-row input { flex: 1 1 160px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font-size: 14px; }
.lb-table { width: 100%; border-collapse: collapse; }
.lb-table th, .lb-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.lb-table th { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.lb-rank { font-size: 16px; font-weight: 800; width: 50px; }
.lb-top td { background: color-mix(in srgb,var(--accent) 6%,var(--surface)); }
.lb-table tr:last-child td { border-bottom: none; }

/* ── Loan apply link ────────────────────────────────────────────────────── */
.loan-apply { display: inline-block; margin-top: 10px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-weight: 700; font-size: 13px; text-decoration: none; }
.loan-apply:hover { background: var(--accent); color: #fff; }

/* ── Markdown rendering for AI answers (clean headings, bold, lists) ─────── */
.md-body { line-height: 1.6; }
.md-body > :first-child { margin-top: 0; }
.md-body > :last-child { margin-bottom: 0; }
.md-p { margin: 0 0 10px; }
.md-h { margin: 14px 0 7px; font-weight: 800; line-height: 1.25; color: var(--accent); }
h2.md-h { font-size: 17px; }
h3.md-h { font-size: 15px; }
h4.md-h { font-size: 14px; letter-spacing: .01em; }
.md-body strong { font-weight: 700; color: var(--ink); }
.md-ul, .md-ol { margin: 6px 0 12px; padding-left: 20px; }
.md-ul li, .md-ol li { margin: 5px 0; padding-left: 2px; }
.md-ul { list-style: none; padding-left: 4px; }
.md-ul li { position: relative; padding-left: 18px; }
.md-ul li::before { content: "▹"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.md-body code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: 0.92em; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
/* AI tutor bubble: let markdown headings/lists breathe inside the bubble */
.chat-agent .bubble-text.md-body { white-space: normal; }
.couns-msg.bot.md-body { white-space: normal; }

/* ── Colleges hub: 2-tier grouped tabs (clean, not 18-in-a-row) ─────────── */
.tools-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; justify-content: center; }
.tools-group { border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 9px 20px; border-radius: 12px; font-weight: 800; font-size: 14.5px; cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.tools-group:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.tools-group.active { background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent))); color: #fff; border-color: transparent; box-shadow: 0 10px 24px -12px var(--accent); }

/* ── Change feed titles + blog live updates ─────────────────────────────── */
.change-title { font-weight: 700; color: var(--ink); font-size: 14.5px; margin: 1px 0 4px; }
.blog-live-updates { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin: 0 0 28px; }

/* ── In-tab mode toggle (Find Colleges: predict/program; Universities: rank/compare) ── */
.tab-modes { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 14px; }
.tab-mode { border: none; background: none; color: var(--ink-2); padding: 8px 16px; border-radius: 9px; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.tab-mode.active { background: var(--accent); color: #fff; }

/* ── Brand logo + name + tagline ────────────────────────────────────────── */
.lp-logo { display: block; border-radius: 9px; box-shadow: 0 4px 12px -4px rgba(79,70,229,0.5); flex: 0 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-name { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.brand-tld { color: var(--accent); font-weight: 800; }
.footer-tagline { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .01em; }
.hero-tagline { display: inline-block; margin: 0 auto 14px; padding: 7px 16px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-weight: 700; font-size: 14px; letter-spacing: .01em; }

/* ── Richer hero (subtle premium gradient backdrop + glow) ──────────────── */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(40% 40% at 85% 10%, color-mix(in srgb, #9333EA 12%, transparent), transparent 70%),
    radial-gradient(40% 40% at 12% 20%, color-mix(in srgb, #0ea5e9 10%, transparent), transparent 70%); }
.hero .shell { position: relative; z-index: 1; }

/* ── GRE Data Interpretation table ──────────────────────────────────────── */
.di-table-wrap { overflow-x: auto; margin: 12px 0 16px; }
.di-table-caption { font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--ink); }
.di-table { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.di-table th, .di-table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.di-table thead th { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font-weight: 700; }
.di-table tbody th[scope="row"] { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); font-weight: 600; }
.di-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 2%, transparent); }

/* ── Home SEO content block ─────────────────────────────────────────────── */
.seo-disclosure { max-width: 820px; margin: 0 auto; }
.seo-disclosure > summary { cursor: pointer; list-style: none; font-weight: 700; font-size: clamp(15px,2vw,17px); color: var(--ink); padding: 10px 0; display: flex; align-items: center; gap: 10px; }
.seo-disclosure > summary::-webkit-details-marker { display: none; }
.seo-disclosure > summary::before { content: "+"; font-weight: 700; color: var(--accent); font-size: 20px; line-height: 1; width: 18px; text-align: center; }
.seo-disclosure[open] > summary::before { content: "\2212"; }
.seo-disclosure > summary:hover { color: var(--accent); }
.seo-disclosure[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.seo-content-inner { max-width: 820px; margin: 0 auto; }
.seo-content-inner h2 { font-size: clamp(20px,3vw,26px); margin: 0 0 16px; }
.seo-content-inner p { color: var(--ink-2); font-size: 15px; line-height: 1.75; margin: 0 0 14px; }
.seo-content-inner a { color: var(--accent); font-weight: 600; }
.seo-content-inner a:hover { text-decoration: underline; }

/* ── Blog cards: clean colored accent (top gradient bar + soft pill tag) ── */
.seo-grid .seo-card { position: relative; overflow: hidden; padding-top: 24px; }
.seo-grid .seo-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), #06b6d4 65%, #f59e0b);
  opacity: 0.95;
}
.seo-grid .seo-card .tag {
  display: inline-block; background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); padding: 4px 10px; border-radius: 999px; letter-spacing: 0.08em;
}
.seo-grid .seo-card .seo-readtime { color: var(--ink-3); font-size: 12px; font-weight: 600; }
html[data-theme="dark"] .seo-grid .seo-card .tag { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ── Destination photo banner (real country photos + graceful gradient fallback) ── */
.dest-photo-banner {
  position: relative; height: 240px; border-radius: 18px; overflow: hidden;
  margin-bottom: 16px; background: linear-gradient(120deg, #4F46E5, #06b6d4 55%, #9333EA);
  box-shadow: 0 18px 40px -22px rgba(15,23,42,0.45);
}
.dest-photo-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dest-photo-banner.no-photo img { display: none; }
.dest-photo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 35%, rgba(15,23,42,0.62) 100%); }
.dest-photo-cap {
  position: absolute; left: 22px; bottom: 18px; color: #fff; font-weight: 800;
  font-size: clamp(22px, 3.2vw, 34px); letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45); display: flex; align-items: center; gap: 10px;
}
.dest-photo-flag { font-size: 1.1em; }
@media (max-width: 640px) { .dest-photo-banner { height: 170px; } }

/* ── Home hero photo ── */
.home-hero-photo {
  position: relative; margin: 26px auto 0; max-width: 1180px; height: 440px;
  border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(15,23,42,0.55);
  background: linear-gradient(120deg, #4F46E5, #06b6d4 55%, #9333EA);
}
.home-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero-photo.no-photo img { display: none; }
.home-hero-photo .hhp-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0.10), rgba(15,23,42,0.40)); }
.home-hero-photo .hhp-cap {
  position: absolute; left: 28px; bottom: 22px; right: 28px; color: #fff;
  font-weight: 700; font-size: clamp(16px, 2.2vw, 22px); text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
@media (max-width: 640px) { .home-hero-photo { height: 240px; border-radius: 18px; } }

/* Study-Abroad page header photo (shorter than the home hero) */
.sa-hero-photo { height: 240px; margin: 4px auto 20px; }
@media (max-width: 640px) { .sa-hero-photo { height: 170px; } }

/* Exam-prep index hero photo caption */
.ep-hero-photo { margin: 6px 0 26px; }
.ep-hero-cap { position: absolute; left: 28px; right: 28px; bottom: 22px; }
.ep-hero-cap h1 { margin: 0 0 4px; color: #fff; font-size: clamp(26px, 4vw, 40px); text-shadow: 0 2px 18px rgba(0,0,0,0.5); }
.ep-hero-cap p { margin: 0; color: #eef2ff; font-size: clamp(14px, 1.6vw, 18px); text-shadow: 0 2px 14px rgba(0,0,0,0.5); }

/* Per-exam detail banner (study photo tinted with the exam's brand colour) */
.ep-detail-banner { position: relative; height: 150px; border-radius: 16px; overflow: hidden; margin: 6px 0 22px; box-shadow: 0 14px 34px -20px rgba(15,23,42,0.4); }
.ep-detail-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-detail-banner.no-photo img { display: none; }
.ep-detail-tint { position: absolute; inset: 0; }
.ep-detail-cap { position: absolute; inset: 0; display: flex; align-items: center; gap: 16px; padding: 0 26px; }
.ep-detail-icon { font-size: 38px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
.ep-detail-cap h1 { margin: 0; color: #fff; font-size: clamp(24px, 3.4vw, 34px); text-shadow: 0 2px 14px rgba(0,0,0,0.35); border: 0; padding: 0; }
.ep-detail-cap p { margin: 2px 0 0; color: #f1f5f9; font-size: 14px; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
@media (max-width: 640px) { .ep-detail-banner { height: 120px; } }

/* ── Language Learning Hub ── */
.lang-units { display: flex; flex-direction: column; gap: 12px; }
.lang-vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 10px; }
.lang-vrow { display: grid; grid-template-columns: 36px 1fr; grid-template-areas: "say word" "ex ex"; align-items: center; gap: 5px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
.lang-vrow:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 3px 12px rgba(0,0,0,.05); }
.lang-say { grid-area: say; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 10%, transparent); cursor: pointer; font-size: 15px; transition: transform .1s ease, background .15s ease; }
.lang-say:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); transform: scale(1.08); }
.lang-w { grid-area: word; min-width: 0; }
.lang-w strong { display: block; font-size: 15.5px; color: var(--ink); line-height: 1.25; }
.lang-w span { font-size: 12.5px; color: var(--ink-3); }
.lang-ex { grid-area: ex; font-size: 13px; color: var(--ink-2); font-style: italic; cursor: pointer; padding-left: 48px; line-height: 1.55; }
.lang-ex:hover { color: var(--accent); }
@media (max-width: 560px) { .lang-vocab { grid-template-columns: 1fr; } }
.lang-exams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
@media (max-width: 640px) { .lang-exams { grid-template-columns: 1fr; } }
.lang-exam { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.lang-exam strong { display: block; color: var(--accent); margin-bottom: 3px; }
.lang-exam span { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.lang-q { margin: 14px 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lang-q-prompt { font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.lang-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-opt { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 14px; transition: all .12s; }
.lang-opt:hover:not(:disabled) { border-color: var(--accent); }
.lang-opt.chosen { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--accent); }
.lang-opt.correct { background: #16a34a; border-color: #16a34a; color: #fff; }
.lang-opt.wrong { background: #dc2626; border-color: #dc2626; color: #fff; }
.lang-result { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: var(--tint); border: 1px solid var(--line); font-size: 15px; }

/* ── Prep Lessons (slide decks) ── */
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 8px; }
.deck-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: left; transition: transform .15s, border-color .15s, box-shadow .15s; }
.deck-card:not(.soon):hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 28px -16px rgba(79,70,229,.3); }
.deck-card.soon { opacity: .55; cursor: not-allowed; }
.deck-card-emoji { font-size: 26px; }
.deck-card-name { font-weight: 700; color: var(--ink); }
.deck-card-meta { font-size: 12.5px; color: var(--accent); font-weight: 600; }
.deck-card.soon .deck-card-meta { color: var(--ink-3); }
.deck-stage { max-width: 1180px; margin: 0 auto; }
.deck-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.deck-back { color: var(--accent); cursor: pointer; font-weight: 600; font-size: 14px; }
.deck-title-mini { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.deck-progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.deck-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #06b6d4); transition: width .25s ease; }
.slide-frame { background: linear-gradient(120deg, #14b8a6, #3b82f6 66%, #6366f1); padding: 16px; border-radius: 30px; box-shadow: 0 30px 70px -32px rgba(15,23,42,.5); }
.slide { position: relative; overflow: hidden; background: #fff; border-radius: 22px; padding: 52px 60px; min-height: 540px; display: flex; flex-direction: column; justify-content: center; }
.slide-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .8fr; gap: 52px; align-items: center; }
@media (max-width: 820px) { .slide { padding: 30px 26px; min-height: 0; } .slide-grid { grid-template-columns: 1fr; gap: 22px; } .slide-right { order: -1; } }
.slide-num { display: inline-block; font-weight: 800; color: #0d9488; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; padding: 4px 12px; border-radius: 999px; background: #ccfbf1; }
.slide-title { font-size: clamp(28px, 3.2vw, 46px); font-weight: 800; color: #0f766e; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 30px; }
.slide-accent { color: #ea7317; }
.slide-points { list-style: none; margin: 0; padding: 0; }
.slide-points li { position: relative; padding-left: 30px; margin: 18px 0; font-size: 19px; line-height: 1.62; color: #1e293b; }
.slide-points li::before { content: ""; position: absolute; left: 0; top: 10px; width: 11px; height: 11px; border-radius: 999px; background: linear-gradient(135deg, #14b8a6, #06b6d4); box-shadow: 0 0 0 4px #ccfbf1; }
.slide-note { margin-top: 22px; padding: 12px 18px; border-left: 4px solid #14b8a6; border-radius: 0 12px 12px 0; background: #f0fdfa; font-style: italic; color: #475569; font-size: 15px; line-height: 1.6; }
.slide-visual { border: none; background: linear-gradient(155deg, #ecfeff, #e0f2fe 55%, #eef2ff); border-radius: 24px; padding: 52px 26px; text-align: center; box-shadow: inset 0 0 0 1.5px rgba(20,184,166,.18), 0 14px 34px -22px rgba(59,130,246,.4); }
.slide-visual-emoji { font-size: clamp(88px, 11vw, 140px); line-height: 1; filter: drop-shadow(0 12px 22px rgba(15,23,42,.14)); }
.slide-visual-cap { margin-top: 20px; font-weight: 800; color: #0f766e; font-size: 20px; letter-spacing: -0.01em; }
.slide-blob { position: absolute; border-radius: 999px; z-index: 0; }
.slide-blob-tr { top: -52px; right: -44px; width: 210px; height: 210px; background: #fff4e6; }
.slide-blob-bl { bottom: -64px; left: -54px; width: 190px; height: 190px; background: #ccfbf1; }
.slide-example { margin-top: 22px; padding: 16px 20px; border-radius: 14px; background: linear-gradient(135deg, #ecfeff, #f0f9ff); border: 1px solid color-mix(in srgb, #06b6d4 28%, var(--line)); font-size: 16px; line-height: 1.6; color: #334155; }
.slide-example strong { color: #0e7490; }
.slide-tip { margin-top: 16px; padding: 13px 18px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); font-size: 15.5px; line-height: 1.55; color: #334155; }
.slide-warn { margin-top: 16px; padding: 13px 18px; border-radius: 14px; background: color-mix(in srgb, #f59e0b 13%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 36%, var(--line)); font-size: 15.5px; line-height: 1.55; color: #334155; }
.deck-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.deck-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; flex: 1; }
.deck-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--line); cursor: pointer; transition: background .15s, transform .15s; }
.deck-dot.on { background: var(--accent); transform: scale(1.25); }

/* ── Language AI speaking partner ── */
.lang-speak { max-width: 680px; margin: 0 auto; }
.lang-speak-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lang-speak-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: linear-gradient(135deg, var(--accent), #06b6d4); }
.lang-chat { background: var(--tint); border: 1px solid var(--line); border-radius: 14px; padding: 14px; height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.lang-bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; line-height: 1.45; }
.lang-bubble.tutor { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.lang-bubble.you { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.lb-native { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.lb-gloss { font-size: 12.5px; opacity: .78; margin-top: 3px; font-style: italic; }
.lang-bubble.you .lb-gloss { color: #e0e7ff; opacity: .9; }
.lb-fix { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 9px; padding: 6px 11px; font-size: 13px; font-weight: 600; margin-bottom: 7px; line-height: 1.45; }
.lang-speak-controls { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.lang-mic { width: 100%; }
.lang-mic.rec { background: #ef4444 !important; }
.lang-type { display: flex; gap: 8px; }
.lang-type .lc-input { flex: 1; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; }
.lang-type .lc-input:focus { outline: none; border-color: var(--accent); }
.lang-mock-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.lang-mock-passage { background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 8px 0 14px; line-height: 1.8; font-size: 15px; color: var(--ink-2); }

/* ── Hands-free continuous speaking ──────────────────────────────────────── */
.lang-speak-empty { text-align: center; color: var(--ink-3); font-size: 14px; margin: auto; max-width: 440px; line-height: 1.6; }
.lang-speak-avatar.listening { box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 35%, transparent); animation: lsPulse 1.4s ease-in-out infinite; }
.lang-speak-avatar.talking { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 38%, transparent); animation: lsPulse 0.8s ease-in-out infinite; }
@keyframes lsPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.lang-bubble.interim { opacity: .6; font-style: italic; }
.lang-speak-status { text-align: center; font-size: 13.5px; font-weight: 600; padding: 8px 12px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); color: var(--ink-2); }
.lang-speak-status.s-listening { background: color-mix(in srgb, #22c55e 14%, transparent); border-color: color-mix(in srgb, #22c55e 40%, var(--line)); color: #15803d; }
.lang-speak-status.s-thinking { background: color-mix(in srgb, #f59e0b 14%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, var(--line)); color: #b45309; }
.lang-speak-status.s-speaking { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent); }
.lang-start, .lang-stop { width: 100%; font-size: 15px; padding: 12px; }
.lang-stop { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; }

/* ── Learn hub: segmented Lessons / Learning Club switch ──────────────────── */
.learnhub-bar { border-bottom: 1px solid var(--line); background: var(--tint); padding: 14px 16px; }
.learnhub-tabs { display: flex; gap: 8px; max-width: 720px; margin: 0 auto; }
.learnhub-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink-2); cursor: pointer; font-weight: 700; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.learnhub-tab .lh-ico { font-size: 20px; }
.learnhub-tab .lh-sub { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.learnhub-tab:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.learnhub-tab.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--accent); box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 18%, transparent); }
.learnhub-tab.active .lh-sub { color: color-mix(in srgb, var(--accent) 70%, var(--ink-3)); }

/* ── AI Band-Score Checker ───────────────────────────────────────────────── */
.bc-tasks { display: flex; gap: 8px; margin-bottom: 12px; }
.bc-task { flex: 1; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font-weight: 600; color: var(--ink-2); }
.bc-task.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--accent); }
.bc-textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 14px; font-size: 15px; line-height: 1.6; font-family: inherit; background: var(--surface); color: var(--ink); resize: vertical; box-sizing: border-box; }
.bc-textarea:focus { outline: none; border-color: var(--accent); }
.bc-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.bc-words { font-size: 13px; font-weight: 600; }
.bc-words.low { color: #d97706; } .bc-words.ok { color: #16a34a; }
.bc-err { margin-top: 10px; color: #dc2626; font-size: 14px; }
.bc-loading { text-align: center; color: var(--ink-2); }
.bc-result { margin-top: 16px; }
.bc-overall { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 140px; height: 140px; border-radius: 50%; color: #fff; margin: 0 auto 18px; box-shadow: 0 14px 34px -16px rgba(0,0,0,.4); }
.bc-overall-num { font-size: 46px; font-weight: 800; line-height: 1; }
.bc-overall-lbl { font-size: 12px; opacity: .92; margin-top: 4px; letter-spacing: .04em; }
.bc-criteria { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .bc-criteria { grid-template-columns: 1fr; } .bc-lists { grid-template-columns: 1fr !important; } }
.bc-crit { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.bc-crit-head { display: flex; justify-content: space-between; align-items: baseline; }
.bc-crit-key { font-weight: 700; font-size: 14px; color: var(--ink); }
.bc-crit-score { font-weight: 800; font-size: 20px; }
.bc-crit-bar { height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.bc-crit-bar span { display: block; height: 100%; border-radius: 999px; }
.bc-crit-comment { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.bc-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.bc-list { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: var(--surface); }
.bc-list h4 { margin: 0 0 8px; font-size: 14px; }
.bc-list ul { margin: 0; padding-left: 18px; }
.bc-list li { font-size: 13.5px; line-height: 1.55; margin: 5px 0; color: var(--ink-2); }
.bc-fixes h4 { margin: 0 0 10px; }
.bc-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.bc-fix-old { color: #dc2626; text-decoration: line-through; }
.bc-fix-arrow { color: var(--ink-3); }
.bc-fix-new { color: #16a34a; font-weight: 600; }
.bc-rewrite { margin-top: 12px; padding: 14px; background: var(--tint); border-radius: 10px; line-height: 1.7; font-size: 14.5px; white-space: pre-wrap; }
.bc-cue { background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.bc-cue p { margin: 8px 0 10px; line-height: 1.6; }
.bc-rec-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.bc-rec.on { background: #ef4444 !important; }

/* ── Gamification (XP / level / streak / badges) ─────────────────────────── */
.gam-card { background: linear-gradient(135deg, color-mix(in srgb, #7c3aed 12%, var(--surface)), color-mix(in srgb, #06b6d4 12%, var(--surface))); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; }
.gam-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gam-level { display: flex; align-items: center; gap: 10px; }
.gam-level-emoji { font-size: 30px; }
.gam-level-num { font-weight: 800; font-size: 16px; color: var(--ink); }
.gam-level-title { font-size: 12.5px; color: var(--ink-2); }
.gam-streak { display: flex; align-items: center; gap: 4px; }
.gam-flame { font-size: 22px; filter: grayscale(1) opacity(.5); }
.gam-flame.on { filter: none; }
.gam-streak-num { font-weight: 800; font-size: 18px; color: #ea580c; }
.gam-streak-lbl { font-size: 12px; color: var(--ink-2); }
.gam-xp-row { margin-top: 12px; }
.gam-xp-bar { height: 10px; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 999px; overflow: hidden; }
.gam-xp-bar span { display: block; height: 100%; background: linear-gradient(90deg, #7c3aed, #06b6d4); border-radius: 999px; transition: width .4s ease; }
.gam-xp-txt { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; font-weight: 600; }
.gam-goal { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 10px; padding: 9px 12px; }
.gam-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 12px; }
.gam-badge { text-align: center; padding: 10px 6px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line); opacity: .45; filter: grayscale(.8); }
.gam-badge.got { opacity: 1; filter: none; background: var(--surface); box-shadow: 0 3px 10px rgba(0,0,0,.06); }
.gam-badge-emoji { font-size: 24px; display: block; }
.gam-badge-name { font-size: 11px; color: var(--ink-2); font-weight: 600; display: block; margin-top: 3px; }
.gam-compact .gam-badges, .gam-compact .gam-goal { display: none; }
.vocab-syn { color: var(--accent); font-style: normal; font-weight: 600; font-size: 12.5px; }
/* Word count & readability */
.wc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0; }
.wc-stat { border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; background: var(--surface); }
.wc-num { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; }
.wc-lbl { font-size: 12px; color: var(--ink-2); margin-top: 5px; }
.wc-targets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wc-pill { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line); color: var(--ink-2); }
.wc-pill.ok { background: color-mix(in srgb, #16a34a 14%, transparent); border-color: color-mix(in srgb, #16a34a 40%, var(--line)); color: #15803d; }
.wc-warn { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); background: color-mix(in srgb, #f59e0b 12%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 34%, var(--line)); border-radius: 12px; padding: 11px 14px; }
.wc-warn ul { margin: 6px 0 0; padding-left: 18px; }
.wc-warn li { margin: 3px 0; }
/* Language stories */
.story-lines { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.story-line { display: flex; gap: 10px; align-items: flex-start; }
.story-native { font-size: 16px; color: var(--ink); line-height: 1.5; }
.story-gloss { font-size: 13px; color: var(--ink-3); font-style: italic; margin-top: 2px; }
/* Relocate / Move Abroad */
.rl-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.rl-progress-bar { flex: 1; height: 9px; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 999px; overflow: hidden; }
.rl-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, #16a34a, #06b6d4); border-radius: 999px; transition: width .3s; }
.rl-progress-txt { font-size: 13px; font-weight: 700; color: #15803d; }
.rl-check { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.rl-check:last-child { border-bottom: none; }
.rl-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: #16a34a; cursor: pointer; }
.rl-check.checked span { text-decoration: line-through; color: var(--ink-3); }
.rl-timeline { list-style: none; margin: 8px 0 0; padding: 0; }
.rl-timeline li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 12px 0; border-left: 2px solid var(--line); padding-left: 16px; margin-left: 6px; position: relative; }
.rl-timeline li::before { content: ""; position: absolute; left: -7px; top: 16px; width: 12px; height: 12px; border-radius: 999px; background: var(--accent); }
.rl-step-when { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.rl-step-body strong { display: block; color: var(--ink); font-size: 14.5px; }
.rl-step-body span { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 560px) { .rl-timeline li { grid-template-columns: 1fr; gap: 3px; } }
.rl-cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.rl-city-country { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.rl-city-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; font-size: 13px; color: var(--ink-2); }
.rl-city-meta span { background: color-mix(in srgb, var(--ink) 5%, transparent); padding: 4px 10px; border-radius: 8px; }
.rl-city-areas { font-size: 13px; color: var(--ink-2); margin: 6px 0; }
.rl-city-tips { margin: 8px 0 0; padding-left: 18px; }
.rl-city-tips li { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: 4px 0; }
/* Which English Test? finder */
.tf-card { max-width: 620px; margin: 0 auto; }
.tf-progress { height: 7px; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.tf-progress span { display: block; height: 100%; background: linear-gradient(90deg, #7c3aed, #06b6d4); border-radius: 999px; transition: width .3s; }
.tf-step { font-size: 12.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.tf-q { font-size: 22px; margin: 6px 0 16px; color: var(--ink); }
.tf-opts { display: grid; gap: 10px; }
.tf-opt { text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font-weight: 600; font-size: 15px; color: var(--ink); transition: border-color .15s ease, background .15s ease, transform .1s ease; }
.tf-opt:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); transform: translateY(-1px); }
.tf-result { max-width: 640px; margin: 0 auto; }
.tf-rec { text-align: center; padding: 26px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, #7c3aed 14%, var(--surface)), color-mix(in srgb, #06b6d4 14%, var(--surface))); border: 1px solid var(--line); margin-bottom: 14px; }
.tf-rec-emoji { font-size: 56px; line-height: 1; }
.tf-rec-name { font-size: 24px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.tf-rec-blurb { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
/* Homepage popular-tools strip */
.hp-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.hp-tool-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.hp-tool-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 8px 24px -14px rgba(0,0,0,.25); transform: translateY(-2px); }
.hp-tool-ic { font-size: 30px; }
.hp-tool-t { font-weight: 800; font-size: 16px; color: var(--ink); }
.hp-tool-d { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.gam-goal.done { color: #15803d; }
.gam-more { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.gam-more:hover { text-decoration: underline; }

/* XP / level-up toasts */
#lp-toast-host { position: fixed; left: 0; right: 0; bottom: 22px; z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.lp-toast { background: #111827; color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .35s ease, transform .35s ease; max-width: 90vw; }
.lp-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.lp-toast.big { background: linear-gradient(135deg, #7c3aed, #06b6d4); font-size: 15px; padding: 14px 22px; }
.lp-toast b { font-weight: 800; }

/* Achievements page */
.ach-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
@media (max-width: 600px) { .ach-sources { grid-template-columns: 1fr; } }
.ach-src { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ach-src-emoji { font-size: 20px; }
.ach-src-what { flex: 1; font-size: 13.5px; color: var(--ink-2); }
.ach-src-xp { font-weight: 800; color: var(--accent); font-size: 14px; }
.ach-ladder { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ach-rung { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); opacity: .6; }
.ach-rung.passed { opacity: 1; }
.ach-rung.current { opacity: 1; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 16%, transparent); }
.ach-rung-emoji { font-size: 22px; }
.ach-rung-title { flex: 1; font-weight: 700; color: var(--ink); font-size: 14px; }
.ach-rung-xp { font-size: 12.5px; color: var(--ink-3); }
.ach-badge { display: flex; flex-direction: column; }
.ach-badge-how { font-size: 10px; color: var(--ink-3); margin-top: 4px; line-height: 1.3; }
.ach-badge.got .ach-badge-how { color: #15803d; font-weight: 600; }

/* ── Share-your-score viral loop (results screen) ───────────────────────────── */
.share-score-card {
  margin: 0 auto 28px; max-width: 640px; padding: 18px 20px;
  background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(124,58,237,0.08));
  border: 1.5px solid var(--line); border-radius: 16px; text-align: center;
}
.share-score-card .ssc-head { font-weight: 800; font-size: 16px; color: var(--ink); letter-spacing: -0.01em; }
.share-score-card .ssc-sub { font-size: 13px; color: var(--ink-3); margin: 4px 0 14px; }
.share-score-card .ssc-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.share-score-card .ssc-native { font-weight: 700; }
.share-score-card .ssc-copy { font-weight: 600; }
.share-score-card .ssc-net {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 700;
  text-decoration: none; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.share-score-card .ssc-net:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15,23,42,0.12); }
.share-score-card .ssc-whatsapp:hover { border-color: #25D366; }
.share-score-card .ssc-twitter:hover  { border-color: #111827; }
.share-score-card .ssc-facebook:hover { border-color: #1877F2; }
.share-score-card .ssc-linkedin:hover { border-color: #0A66C2; }
.share-score-card .ssc-telegram:hover { border-color: #229ED9; }
@media (max-width: 480px) { .share-score-card .ssc-net { flex: 1 1 calc(50% - 8px); justify-content: center; } }

/* ─── Touch tap targets (WCAG 2.5.5): ≥44px comfortable hit areas on touch
   devices. Appended at end of file so it reliably overrides the base sizes. ─── */
@media (pointer: coarse) {
  .topbar-icon-btn { width: 44px; height: 44px; }
  .menu-btn { width: 44px; height: 44px; }
  .drawer-close { width: 44px; height: 44px; font-size: 24px; }
  .footer a { display: inline-block; padding: 6px 0; }
  .footer ul { gap: 4px; }
  .crumb a { display: inline-block; padding: 5px 2px; }
}

/* Returning-user bar — streak + resume (#6/#7), shown only to users with activity */
.returning-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 14px 0 0; padding: 11px 16px;
  background: linear-gradient(135deg, rgba(79,70,229,.09), rgba(124,58,237,.07)); border: 1px solid var(--line); border-radius: 14px; font-size: 14px; }
.returning-bar .rb-item { color: var(--ink); }
.returning-bar .rb-quest { color: var(--ink-2); }
.returning-bar .rb-cta { margin-left: auto; background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 9px 17px; font-weight: 700; font-size: 13px; cursor: pointer; min-height: 40px; }
.returning-bar .rb-cta:hover { filter: brightness(1.05); }
@media (max-width: 560px) { .returning-bar { gap: 6px 14px; } .returning-bar .rb-cta { margin-left: 0; width: 100%; } }

/* GMAT Data Insights — multi-source, chart, two-part renderers */
.di-sources { display: grid; gap: 10px; margin: 0 0 12px; }
.di-source { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.di-source-label { background: var(--surface-2); padding: 6px 12px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--line); }
.di-source-text { margin: 0; padding: 10px 12px; white-space: pre-wrap; font: 13px/1.5 system-ui; }
.di-chart { margin: 4px 0 14px; }
.di-chart-caption { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.di-chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding: 6px 4px; border-bottom: 2px solid var(--line); }
.di-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; }
.di-bar { width: 70%; max-width: 46px; background: linear-gradient(180deg, var(--accent), #7c3aed); border-radius: 6px 6px 0 0; }
.di-bar-val { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.di-bar-label { font-size: 12px; color: var(--ink-2); margin-top: 5px; text-align: center; }
.di-twopart { width: 100%; border-collapse: collapse; margin-top: 8px; }
.di-twopart th, .di-twopart td { border: 1px solid var(--line); padding: 8px 10px; text-align: center; }
.di-twopart .tp-rowhead, .di-twopart .tp-rowlabel { text-align: left; }
.di-twopart .tp-radio { width: 80px; }
.di-twopart .tp-radio input { width: 18px; height: 18px; }

/* Scenario image panel (CELPIP listening/speaking "look at the picture") */
.scene-panel { margin: 0 auto 14px; max-width: 520px; }
.scene-frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.scene-img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.scene-illus { height: 200px; display: flex; align-items: center; justify-content: center; }
.scene-emoji { font-size: 92px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.12)); }
.scene-cap { text-align: center; font-size: 13px; color: var(--ink-2); margin-top: 8px; font-weight: 600; }

/* CELPIP listening two-phase flow (listen → then answer) */
.celpip-listen-gate { text-align: center; padding: 30px 20px; margin-top: 12px; background: var(--surface-2, #f8fafc); border: 1px dashed var(--line, #e5e7eb); border-radius: 14px; }
.celpip-listen-gate .clg-icon { font-size: 42px; line-height: 1; }
.celpip-listen-gate .clg-note { color: var(--ink-2, #475569); font-size: 14px; max-width: 460px; margin: 10px auto 18px; line-height: 1.6; }
.celpip-listen-gate .clg-btn { font-size: 15px; padding: 12px 26px; }
.celpip-answer-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; margin-top: 8px; background: var(--surface-2, #f8fafc); border-radius: 10px; font-size: 14px; color: var(--ink-2, #475569); }
.celpip-answer-head strong { color: var(--ink, #0f172a); }
.celpip-answer-head .clg-replay { margin-left: auto; background: none; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--ink-2, #475569); }
.celpip-answer-head .clg-replay:hover { background: #fff; }

/* CELPIP listening — one question per page (real exam) */
.celpip-q-progress { font-size: 13px; font-weight: 600; color: var(--ink-2, #475569); margin-bottom: 10px; }
.celpip-q-nav { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.celpip-q-nav .btn { padding: 10px 18px; font-size: 14px; }
.celpip-q-nav .btn:disabled { opacity: .4; cursor: default; }
.cqn-dots { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.cqn-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line, #e5e7eb); cursor: pointer; transition: transform .1s; }
.cqn-dot:hover { transform: scale(1.2); }
.cqn-dot.done { background: var(--leaf, #16a34a); }
.cqn-dot.active { background: var(--accent, #4F46E5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4F46E5) 25%, transparent); }