/* ==========================================================================
   Ursula — Look C: "Balanced"
   Between A (quiet) and B (loud). Light, calm surfaces from A; firmer type,
   crisper edges and a little more contrast from B. No hard offset shadows,
   no dot grids, no gradient text, one accent per surface.

   Motion rule: this file never sets transform, opacity, filter, animation or
   transition-timing on anything the landing animates. It only changes colour,
   type, borders, radii and shadows, so every scroll scene runs exactly as it
   does today. The one structural change is the practice reel (see "Reel").
   ========================================================================== */

:root {
  --c-ink: #16141f;
  --c-ink-2: #393546;
  --c-muted: #666174;
  --c-paper: #f5f3ee;
  --c-paper-2: #edeae3;
  --c-card: #ffffff;
  --c-line: rgba(22, 20, 31, .11);
  --c-line-2: rgba(22, 20, 31, .2);
  --c-violet: #5a43ea;
  --c-violet-2: #7563ff;
  --c-violet-soft: #ecE9ff;
  --c-lilac: #bdb3ff;
  --c-mint: #2fe0a2;
  --c-amber: #f6d36b;
  --c-night: #111019;
  --c-night-2: #1a1824;
  --c-night-line: rgba(255, 255, 255, .1);
  --c-shadow: 0 1px 2px rgba(22, 20, 31, .05), 0 14px 34px -20px rgba(34, 26, 80, .28);
  --c-shadow-lg: 0 1px 2px rgba(22, 20, 31, .05), 0 34px 70px -34px rgba(34, 26, 80, .38);
  --c-shadow-dark: 0 30px 70px -36px rgba(0, 0, 0, .85);
}

/* ───────────── Landing ─────────────
   Scenes keep their dark / light / dark / light rhythm. The landing has no
   theme switch: the light theme only ever recoloured the top bar, so it is
   removed and the bar is always the dark pill. index.html pins
   data-theme="dark" for this page only (not saved, so the app keeps the
   visitor's own choice). White product "screens" get light-theme tokens. */
html body.cinematic-home {
  --cinema-paper: var(--c-paper);
  --cinema-purple: var(--c-violet);
  --cinema-night: var(--c-night);
  --cinema-ink: var(--c-ink);
}
html body.cinematic-home .theme-toggle,
html body.cinematic-home .m-theme { display: none !important; }

/* Light "screens" on the dark page: restore light-theme tokens inside them */
html body.cinematic-home :is(.reel-face, .exam-window, .calm-exam) {
  --text: #16141f; --text-muted: #5f5a6c; --primary: #5a43ea; --primary-hover: #4a33d6;
  --surface: #ffffff; --surface-secondary: #f1eff7; --border: rgba(22, 20, 31, .14);
  --u-accent-text: #4b34d4; --on-primary: #ffffff; --mint: #4b34d4; --accent: #4b34d4; --u-accent-lit: #5a43ea; color: #16141f;
}

/* Headlines: one voice */
html body.cinematic-home :is(.hero-copy h1, .preview-heading h2, .feedback-copy h2, .progress-copy h2, .speak-copy h2, .return-copy h2, .home-final-cta h2) {
  font-family: var(--sans) !important; font-weight: 700 !important;
  letter-spacing: -.05em !important; line-height: .96 !important; text-transform: none !important;
}
html body.cinematic-home :is(.feedback-copy, .speak-copy, .home-final-cta) h2 { color: #fbfaff !important; }
html body.cinematic-home :is(.preview-heading, .progress-copy, .return-copy) h2 { color: var(--c-ink) !important; }
html body.cinematic-home :is(.hero-copy h1, .preview-heading h2, .feedback-copy h2, .progress-copy h2, .speak-copy h2, .return-copy h2, .home-final-cta h2) em {
  font-family: var(--serif) !important; font-style: italic !important; font-weight: 400 !important;
  letter-spacing: -.015em !important; color: var(--c-lilac) !important;
}
html body.cinematic-home :is(.preview-heading, .progress-copy, .return-copy) h2 em { color: var(--c-violet) !important; }
@media (min-width: 981px) {
  html body.cinematic-home .hero-copy h1 { font-size: clamp(60px, 6.8vw, 108px) !important; }
}

/* Kicker: thin outlined chip */
html body.cinematic-home :not(.preview-heading) > .scene-kicker {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px !important;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 999px;
  color: var(--c-lilac) !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .13em !important;
}
html body.cinematic-home :not(.preview-heading) > .scene-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html body.cinematic-home :is(.progress-copy, .return-copy) .scene-kicker { color: var(--c-violet) !important; }
html body.cinematic-home .home-final-cta .scene-kicker { color: rgba(255, 255, 255, .86) !important; border-color: rgba(255, 255, 255, .35); }

/* Body copy on dark */
html body.cinematic-home :is(.feedback-copy, .progress-copy, .speak-copy, .return-copy) > p:not(.scene-kicker) { font-size: 16.5px !important; line-height: 1.6 !important; }
html body.cinematic-home :is(.feedback-copy, .speak-copy) > p:not(.scene-kicker) { color: rgba(244, 241, 251, .74) !important; }
html body.cinematic-home :is(.progress-copy, .return-copy) > p:not(.scene-kicker) { color: var(--c-muted) !important; }
html body.cinematic-home .preview-heading > span { color: var(--c-muted) !important; font-size: 14.5px !important; line-height: 1.55 !important; }
html body.cinematic-home .analysis-steps span { color: rgba(244, 241, 251, .6) !important; }
html body.cinematic-home .analysis-steps span.active { color: var(--c-lilac) !important; }
html body.cinematic-home :is(.hero-actions, .home-final-cta) .text-link { color: #fff !important; }
html body.cinematic-home :is(.speak-copy, .feedback-copy) .text-link { color: var(--c-lilac) !important; }

/* ── Nav: one dark pill on every scene ── */
html body.cinematic-home .home-nav .ursula-brand-logo-light { display: none !important; }
html body.cinematic-home .home-nav .ursula-brand-logo-dark { display: block !important; }
@media (min-width: 981px) {
  html body.cinematic-home .home-nav,
  html body.cinematic-home .home-nav.on-dark {
    background: rgba(20, 19, 29, .8) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: 0 12px 34px -16px rgba(0, 0, 0, .7) !important;
    color: #fff !important;
  }
  html body.cinematic-home .home-nav .home-links a { color: rgba(255, 255, 255, .82) !important; font-weight: 600 !important; font-size: 13.5px !important; border-radius: 10px !important; }
  html body.cinematic-home .home-nav .home-links a:hover { color: #fff !important; background: rgba(255, 255, 255, .07) !important; }

  /* Account buttons: identical box, centred labels, one baseline */
  html body.cinematic-home .home-nav .home-account { display: flex !important; align-items: center !important; gap: 8px !important; }
  html body.cinematic-home .home-nav .home-account .nav-account {
    box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 148px !important; min-width: 148px !important; height: 40px !important; min-height: 40px !important;
    margin: 0 !important; padding: 0 12px !important; border-radius: 11px !important;
    font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap;
    box-shadow: none !important;
  }
  html body.cinematic-home .home-nav .home-account .nav-account.pro { background: #fbefc4 !important; color: #3a2d0c !important; border: 1px solid #ecd58a !important; }
  html body.cinematic-home .home-nav .home-account .nav-account.signup { border: 1px solid transparent !important; }
  html body.cinematic-home .home-nav .home-account .nav-account[data-auth="login"] { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .28) !important; }
  html body.cinematic-home .home-nav .home-account .nav-account[data-auth="login"]:hover { background: rgba(255, 255, 255, .08) !important; }
  html body.cinematic-home .home-nav :is(.home-profile, .lx-tools button) {
    width: 40px !important; height: 40px !important; display: inline-grid !important; place-items: center;
    background: transparent !important; border: 1px solid rgba(255, 255, 255, .14) !important; color: #fff !important; border-radius: 11px !important;
  }
}

/* ── Hero ── */
html body.cinematic-home .hero-sticky::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, rgba(12, 11, 18, .84) 0%, rgba(12, 11, 18, .5) 40%, rgba(12, 11, 18, 0) 66%),
    linear-gradient(0deg, rgba(12, 11, 18, .45) 0%, rgba(12, 11, 18, 0) 30%);
}
html body.cinematic-home .hero-copy { z-index: 3 !important; }
html body.cinematic-home .hero-intro { font-size: 17px !important; line-height: 1.6 !important; color: rgba(245, 242, 255, .82) !important; max-width: 470px !important; }
html body.cinematic-home .hero-eyebrow { letter-spacing: .14em !important; font-weight: 700 !important; color: rgba(245, 242, 255, .78) !important; }
html body.cinematic-home .hero-actions .home-cta {
  background: var(--c-violet) !important; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 13px !important;
  height: 52px !important; padding: 0 22px !important; font-weight: 700 !important; font-size: 15px !important;
  box-shadow: 0 12px 30px -12px rgba(90, 67, 234, .9) !important;
}
html body.cinematic-home .hero-actions .home-cta:hover { background: var(--c-violet-2) !important; }
html body.cinematic-home .hero-actions .text-link { font-weight: 600 !important; }
html body.cinematic-home .doubt {
  background: rgba(255, 255, 255, .92) !important; color: var(--c-ink) !important;
  border: 1px solid rgba(255, 255, 255, .95) !important; border-radius: 12px !important;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6) !important;
  font-family: var(--sans) !important; font-style: normal !important; font-size: 13px !important; font-weight: 600 !important;
}
html body.cinematic-home .exam-window { border-radius: 20px !important; box-shadow: 0 50px 110px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .45) !important; }
html body.cinematic-home .exam-question small { color: #5f5a6c !important; }

/* No fake window chrome or tiny captions on the product cards */
html body.cinematic-home :is(.exam-window, .calm-exam) > .window-bar { display: none !important; }
html body.cinematic-home .reel-face > header small { display: none !important; }

/* ── Reel ── (faces are not clipped while they turn) */
html body.cinematic-home .question-reel { overflow: visible !important; }
html body.cinematic-home .practice-sticky { overflow: clip !important; }
@media (min-width: 701px) { html body.cinematic-home .reel-view { perspective: 2400px !important; } }
html body.cinematic-home .practice-preview {
  background: radial-gradient(55% 45% at 50% 50%, rgba(117, 99, 255, .1), transparent 72%), var(--c-paper) !important;
}
html body.cinematic-home .reel-face { background: #ffffff !important; border: 1px solid var(--c-line-2) !important; box-shadow: none !important; }
html body.cinematic-home .reel-face > header { border-bottom: 1px solid rgba(22, 20, 31, .1) !important; }
html body.cinematic-home .reel-face > header strong { font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: -.025em; color: var(--c-ink) !important; }
html body.cinematic-home .reel-face > header span { color: var(--c-violet) !important; font-weight: 700 !important; }
html body.cinematic-home .reel-face :is(.preview-word-count, .preview-countdown) { color: #5f5a6c !important; }
html body.cinematic-home .reel-controls { color: var(--c-muted) !important; }
html body.cinematic-home .reel-controls nav { gap: 6px !important; }
html body.cinematic-home .reel-controls nav button {
  border: 1px solid var(--c-line-2) !important; background: #fff !important; color: var(--c-ink-2) !important;
  border-radius: 999px !important; font-weight: 650 !important; font-size: 12px !important; box-shadow: none !important;
}
html body.cinematic-home .reel-controls nav button[aria-pressed="true"] { background: var(--c-ink) !important; border-color: var(--c-ink) !important; color: #fff !important; }
html body.cinematic-home :is(.reel-skip, #resumeTour) { color: var(--c-ink) !important; }

/* ── Feedback scene ── */
html body.cinematic-home .feedback-story { background: radial-gradient(50% 60% at 80% 32%, rgba(117, 99, 255, .2), transparent 70%), var(--c-night) !important; }
html body.cinematic-home :is(.response-card, .feedback-report, .speak-device) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)), var(--c-night-2) !important;
  border: 1px solid var(--c-night-line) !important; border-radius: 20px !important; box-shadow: var(--c-shadow-dark) !important;
}
html body.cinematic-home .response-card header :is(span, small) { color: rgba(244, 241, 251, .7) !important; }
html body.cinematic-home .response-card > p { color: rgba(244, 241, 251, .82) !important; }
html body.cinematic-home .feedback-report header small { color: rgba(244, 241, 251, .68) !important; }
html body.cinematic-home .feedback-report header strong,
html body.cinematic-home #animatedScore { color: #fff !important; font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: -.03em; }
html body.cinematic-home .feedback-report header strong b { color: rgba(244, 241, 251, .62) !important; }
html body.cinematic-home .feedback-ready { color: #5fe3b4 !important; }
html body.cinematic-home .feedback-metrics article { border-color: var(--c-night-line) !important; border-radius: 14px !important; }
html body.cinematic-home .feedback-metrics article div span { color: rgba(244, 241, 251, .62) !important; font-size: 10px !important; }
html body.cinematic-home .feedback-metrics article div strong { color: #fff !important; }
html body.cinematic-home .feedback-metrics article p { color: rgba(244, 241, 251, .72) !important; }
html body.cinematic-home .feedback-metrics article > b { background: rgba(255, 255, 255, .12) !important; }
html body.cinematic-home .feedback-metrics article.highlighted { background: #eeebff !important; }
html body.cinematic-home .feedback-metrics article.highlighted div span { color: #5f5a6c !important; }
html body.cinematic-home .feedback-metrics article.highlighted div strong { color: var(--c-ink) !important; }
html body.cinematic-home .feedback-metrics article.highlighted p { color: #4a4657 !important; }
html body.cinematic-home .feedback-metrics article.highlighted > b { background: rgba(22, 20, 31, .12) !important; }
html body.cinematic-home .next-step-card { border-radius: 14px !important; }
html body.cinematic-home .next-step-card > span { color: var(--c-lilac) !important; }
html body.cinematic-home .next-step-card p { color: #fff !important; }
html body.cinematic-home .next-step-card a { color: #fff !important; }

/* ── Progress scene (light) ── */
html body.cinematic-home .progress-story { background: var(--c-paper) !important; }
html body.cinematic-home .progress-path { stroke: var(--c-violet) !important; stroke-width: 3.5 !important; }
html body.cinematic-home :is(.attempt, .confidence-label) {
  background: #fff !important; border: 1px solid var(--c-line-2) !important;
  border-radius: 12px !important; box-shadow: var(--c-shadow) !important;
}
/* Attempt chips: label and value share one centred column */
html body.cinematic-home .attempt {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  gap: 4px !important; padding: 10px 14px !important; min-width: 78px; text-align: center;
}
html body.cinematic-home .attempt span {
  margin: 0 !important; color: #5f5a6c !important;
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .1em !important; line-height: 1 !important;
}
html body.cinematic-home .attempt strong {
  margin: 0 !important; color: var(--c-ink) !important; font-family: var(--sans) !important; font-weight: 700 !important;
  font-size: 24px !important; line-height: 1 !important; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
html body.cinematic-home .confidence-label span { color: #5f5a6c !important; font-size: 10px !important; font-weight: 700 !important; }
html body.cinematic-home .confidence-label strong { color: var(--c-violet) !important; font-family: var(--sans) !important; font-weight: 700 !important; }
@media (max-width: 700px) {
  html body.cinematic-home .attempt { padding: 7px 10px !important; min-width: 58px; }
  html body.cinematic-home .attempt strong { font-size: 18px !important; }
  html body.cinematic-home .attempt span { font-size: 8px !important; }
}

/* ── Speak scene ── */
html body.cinematic-home .speak-story { background: radial-gradient(50% 60% at 75% 55%, rgba(117, 99, 255, .16), transparent 70%), #141320 !important; }
html body.cinematic-home .speak-device header :is(span, small) { color: rgba(244, 241, 251, .78) !important; }
html body.cinematic-home .speech-student small { color: rgba(244, 241, 251, .7) !important; font-size: 10px !important; }
html body.cinematic-home .topic-cloud button { border-radius: 999px !important; font-weight: 600 !important; color: rgba(255, 255, 255, .82) !important; border-color: rgba(255, 255, 255, .2) !important; }
html body.cinematic-home .topic-cloud button.selected { background: var(--c-violet) !important; border-color: var(--c-violet) !important; color: #fff !important; }

/* ── Return scene (light) ── */
html body.cinematic-home .return-story { background: var(--c-paper-2) !important; }
html body.cinematic-home .calm-exam { background: #ffffff !important; border: 1px solid var(--c-line-2) !important; border-radius: 22px !important; box-shadow: var(--c-shadow-lg) !important; }
html body.cinematic-home .calm-exam strong { font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: -.035em !important; color: var(--c-ink) !important; }
html body.cinematic-home .calm-exam :is(small, p) { color: #5f5a6c !important; }
html body.cinematic-home .calm-exam b { font-family: var(--sans) !important; font-weight: 700 !important; color: var(--c-violet) !important; }

/* ── Final CTA + footer ── */
html body.cinematic-home .home-final-cta {
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(140, 124, 255, .45), transparent 70%),
    linear-gradient(180deg, #3d2db8 0%, #1e1650 100%) !important;
}
html body.cinematic-home .home-final-cta::before { display: none !important; }
html body.cinematic-home .home-final-cta h2 { font-size: clamp(58px, 8.6vw, 136px) !important; }
html body.cinematic-home .home-final-cta > p:not(.scene-kicker) { font-size: 18px !important; color: rgba(255, 255, 255, .84) !important; }
html body.cinematic-home .home-final-cta .home-cta { height: 54px !important; padding: 0 26px !important; border-radius: 13px !important; font-size: 15px !important; font-weight: 700 !important; }
html body.cinematic-home .home-footer { background: var(--c-night) !important; border-top: 1px solid rgba(255, 255, 255, .06) !important; }
html body.cinematic-home .home-footer :is(p, span, nav a) { color: rgba(244, 241, 251, .72) !important; }

/* ───────────── Practice (toefl.html) ───────────── */
html body.u-workspace { background: var(--c-paper) !important; }
html[data-theme="dark"] body.u-workspace { background: var(--c-night) !important; }
@media (min-width: 761px) {
  html body.u-workspace .topbar-inner { width: min(1180px, calc(100% - 48px)) !important; max-width: none !important; }
}
html body.u-workspace .topbar-inner {
  background: rgba(255, 255, 255, .86) !important; border: 1px solid var(--c-line) !important;
  box-shadow: 0 10px 30px -18px rgba(34, 26, 80, .32) !important;
}
html[data-theme="dark"] body.u-workspace .topbar-inner { background: rgba(26, 24, 36, .86) !important; border-color: var(--c-night-line) !important; }
html body.u-workspace .topbar-inner .exam-tab { font-weight: 650 !important; border-radius: 10px !important; }
html body.u-workspace .topbar-inner .exam-tab.active { background: var(--c-violet-soft) !important; color: var(--c-violet) !important; }
html[data-theme="dark"] body.u-workspace .topbar-inner .exam-tab.active { background: rgba(189, 179, 255, .14) !important; color: var(--c-lilac) !important; }
html body.u-workspace .topbar .auth-actions .pro-nav-action { background: #fbefc4 !important; color: #3a2d0c !important; border: 1px solid #ecd58a !important; border-radius: 10px !important; box-shadow: none !important; }
html body.u-workspace .topbar .auth-actions .auth-button.signup { background: var(--c-violet) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; }
html body.u-workspace .topbar .auth-actions .auth-button[data-auth-action="login"] { background: transparent !important; border: 1px solid var(--c-line-2) !important; color: inherit !important; border-radius: 10px !important; }
html body.u-workspace .topbar-inner :is(.theme-toggle, .profile-button, .lx-tools button) { background: transparent !important; border-color: transparent !important; }

html body.u-workspace .toefl-modebar nav { background: var(--c-card) !important; border: 1px solid var(--c-line) !important; border-radius: 12px !important; padding: 3px !important; }
html body.u-workspace .toefl-modebar nav button { border: 0 !important; border-radius: 9px !important; font-weight: 650 !important; background: transparent !important; box-shadow: none !important; }
html body.u-workspace .toefl-modebar nav button[aria-pressed="true"] { background: var(--c-ink) !important; color: #fff !important; }
html[data-theme="dark"] body.u-workspace .toefl-modebar nav { background: var(--c-night-2) !important; border-color: var(--c-night-line) !important; }
html[data-theme="dark"] body.u-workspace .toefl-modebar nav button[aria-pressed="true"] { background: #fff !important; color: var(--c-ink) !important; }

html body.u-workspace #workspaceHead .eyebrow { color: var(--c-violet) !important; font-weight: 700 !important; }
html body.u-workspace #workspaceHead h1 { font-weight: 700 !important; letter-spacing: -.045em !important; font-size: clamp(30px, 2.8vw, 40px) !important; line-height: 1.02 !important; }
html body.u-workspace #workspaceHead h1 em { font-family: var(--serif) !important; font-weight: 400 !important; letter-spacing: -.01em !important; color: var(--c-violet) !important; }
html[data-theme="dark"] body.u-workspace :is(#workspaceHead h1 em, #workspaceHead .eyebrow) { color: var(--c-lilac) !important; }

html body.u-workspace .section-tabs .section-tab { background: var(--c-card) !important; border: 1px solid var(--c-line-2) !important; color: var(--c-ink-2) !important; font-weight: 650 !important; box-shadow: none !important; }
html body.u-workspace .section-tabs .section-tab.active { background: var(--c-ink) !important; border-color: var(--c-ink) !important; color: #fff !important; }
html[data-theme="dark"] body.u-workspace .section-tabs .section-tab { background: var(--c-night-2) !important; border-color: var(--c-night-line) !important; color: rgba(255, 255, 255, .8) !important; }
html[data-theme="dark"] body.u-workspace .section-tabs .section-tab.active { background: #fff !important; color: var(--c-ink) !important; }

html body.u-workspace .progress-line { height: 4px !important; border-radius: 4px !important; background: rgba(22, 20, 31, .08) !important; }
html body.u-workspace .progress-line span { background: var(--c-violet) !important; border-radius: 4px !important; }
html[data-theme="dark"] body.u-workspace .progress-line { background: rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] body.u-workspace .progress-line span { background: var(--c-lilac) !important; }

html body.u-workspace .question-surface { background: var(--c-card) !important; border: 1px solid var(--c-line-2) !important; border-radius: 20px !important; box-shadow: var(--c-shadow) !important; }
html[data-theme="dark"] body.u-workspace .question-surface { background: var(--c-night-2) !important; border-color: var(--c-night-line) !important; box-shadow: var(--c-shadow-dark) !important; }
html body.u-workspace .question-surface :is(.cloze-passage, p) { line-height: 1.85; }
html body.u-workspace .cloze-char { border-radius: 6px !important; }
html body.u-workspace .question-controls :is(button, a) { border-radius: 11px !important; font-weight: 650 !important; }

/* ───────────── Dashboard (profile.html) ───────────── */
html body.product-body { background: var(--c-paper) !important; }
html[data-theme="dark"] body.product-body { background: var(--c-night) !important; }

/* Sidebar: white, crisp edge, violet-soft active item */
html body.product-body .product-nav { background: var(--c-card) !important; border-right: 1px solid var(--c-line) !important; box-shadow: none !important; }
html[data-theme="dark"] body.product-body .product-nav { background: var(--c-night-2) !important; border-right-color: var(--c-night-line) !important; }
html body.product-body .product-nav-links a { font-weight: 600 !important; color: var(--c-ink-2) !important; border-radius: 10px !important; background: transparent !important; border: 0 !important; }
html body.product-body .product-nav-links a:hover { background: rgba(22, 20, 31, .05) !important; color: var(--c-ink) !important; }
html body.product-body .product-nav-links a.active { background: var(--c-violet-soft) !important; color: var(--c-violet) !important; }
html[data-theme="dark"] body.product-body .product-nav-links a { color: rgba(255, 255, 255, .72) !important; }
html[data-theme="dark"] body.product-body .product-nav-links a:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
html[data-theme="dark"] body.product-body .product-nav-links a.active { background: rgba(189, 179, 255, .14) !important; color: var(--c-lilac) !important; }
html body.product-body .product-nav-speak span { background: var(--c-violet-soft) !important; color: var(--c-violet) !important; border: 0 !important; font-weight: 700 !important; }
html body.product-body .product-pro-action { background: #fbefc4 !important; color: #3a2d0c !important; border: 1px solid #ecd58a !important; border-radius: 10px !important; box-shadow: none !important; font-weight: 700 !important; }
html body.product-body :is(.exam-switcher-button, .product-account-button) { background: var(--c-card) !important; border: 1px solid var(--c-line) !important; border-radius: 12px !important; box-shadow: none !important; }
html[data-theme="dark"] body.product-body :is(.exam-switcher-button, .product-account-button) { background: rgba(255, 255, 255, .04) !important; border-color: var(--c-night-line) !important; }
html body.product-body .product-nav-actions :is(.theme-toggle, .lx-tools button) { background: transparent !important; border-color: transparent !important; }
html body.product-body .avatar-fallback { background: var(--c-violet) !important; color: #fff !important; }
html body.product-body :is(.exam-switcher-menu, .product-account-menu) { border-radius: 14px !important; border: 1px solid var(--c-line) !important; box-shadow: var(--c-shadow-lg) !important; }

/* Headings */
html body.product-body :is(.dashboard-heading, .workspace-heading) h1 { font-weight: 700 !important; letter-spacing: -.05em !important; line-height: .98 !important; font-size: clamp(36px, 3.8vw, 58px) !important; }
html body.product-body #welcomeName { font-family: var(--serif) !important; font-style: italic; font-weight: 400 !important; letter-spacing: -.01em; color: var(--c-violet) !important; }
html body.product-body .profile-eyebrow { font-weight: 700 !important; letter-spacing: .13em !important; color: var(--c-violet) !important; }
html[data-theme="dark"] body.product-body :is(#welcomeName, .profile-eyebrow) { color: var(--c-lilac) !important; }
html body.product-body :is(.dashboard-section-heading, .plain-heading, .resume-copy) h2 { font-weight: 700 !important; letter-spacing: -.035em !important; }
html body.product-body #dashboardFreshness {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px !important;
  border: 1px solid var(--c-line-2); border-radius: 999px; font-weight: 600; font-size: 13px !important; color: var(--c-ink-2) !important; background: var(--c-card);
}
html body.product-body #dashboardFreshness::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-mint); }
html[data-theme="dark"] body.product-body #dashboardFreshness { background: var(--c-night-2); border-color: var(--c-night-line); color: rgba(255, 255, 255, .8) !important; }

/* One card language */
html body.product-body :is(.dashboard-plain, .activity-list, .practice-group, .mock-hub-list, .history-skill, .history-overview, .history-upgrade, .mock-history-list, .product-empty) {
  background: var(--c-card) !important; border: 1px solid var(--c-line-2) !important; border-radius: 18px !important; box-shadow: var(--c-shadow) !important;
}
html[data-theme="dark"] body.product-body :is(.dashboard-plain, .activity-list, .practice-group, .mock-hub-list, .history-skill, .history-overview, .history-upgrade, .mock-history-list, .product-empty, .skill-card) {
  background: var(--c-night-2) !important; border-color: var(--c-night-line) !important; box-shadow: var(--c-shadow-dark) !important;
}
html body.product-body :is(.history-overview, .history-upgrade, .product-empty) { padding: 22px 24px !important; }
html body.product-body .practice-group > header { padding: 20px 24px !important; }
html body.product-body .practice-group > div { background: transparent !important; border: 0 !important; border-top: 1px solid var(--c-line) !important; box-shadow: none !important; border-radius: 0 !important; }
html body.product-body :is(.activity-list, .mock-hub-list, .mock-history-list) { overflow: hidden; }
html body.product-body :is(.mock-hub-row, .mock-history-row) { border-radius: 0 !important; box-shadow: none !important; border-left: 0 !important; border-right: 0 !important; }

/* Continue card: soft lavender, the first stop without a heavy dark block */
html body.product-body .resume-panel {
  background: linear-gradient(135deg, #ece8ff 0%, #f6f4ff 60%, #ffffff 100%) !important; color: var(--c-ink) !important;
  border: 1px solid rgba(90, 67, 234, .22) !important; border-radius: 20px !important; box-shadow: var(--c-shadow) !important;
}
html body.product-body .resume-panel .resume-copy h2 { color: var(--c-ink) !important; font-size: clamp(24px, 2.3vw, 34px) !important; }
html body.product-body .resume-panel .resume-copy p { color: var(--c-ink-2) !important; }
html body.product-body .resume-panel .profile-eyebrow { color: var(--c-violet) !important; }
html body.product-body .resume-progress span { color: var(--c-ink-2) !important; }
html body.product-body .resume-progress strong { color: var(--c-violet) !important; }
html body.product-body .resume-track { height: 6px !important; border-radius: 6px !important; background: rgba(90, 67, 234, .14) !important; }
html body.product-body .resume-track > span { background: var(--c-violet) !important; border-radius: 6px !important; }
html body.product-body .resume-panel .button.primary { background: var(--c-violet) !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 24px -12px rgba(90, 67, 234, .85) !important; }
html body.product-body .resume-panel .button.primary:hover { background: var(--c-violet-2) !important; }
/* Dark theme: the same card in a quiet violet-tinted surface */
html[data-theme="dark"] body.product-body .resume-panel { background: linear-gradient(135deg, #2a2545 0%, #1f1c30 100%) !important; border-color: rgba(189, 179, 255, .22) !important; box-shadow: var(--c-shadow-dark) !important; }
html[data-theme="dark"] body.product-body .resume-panel .resume-copy h2 { color: #fff !important; }
html[data-theme="dark"] body.product-body .resume-panel .resume-copy p,
html[data-theme="dark"] body.product-body .resume-progress span { color: rgba(255, 255, 255, .74) !important; }
html[data-theme="dark"] body.product-body :is(.resume-panel .profile-eyebrow, .resume-progress strong) { color: var(--c-lilac) !important; }
html[data-theme="dark"] body.product-body .resume-track { background: rgba(255, 255, 255, .12) !important; }
html[data-theme="dark"] body.product-body .resume-track > span { background: var(--c-lilac) !important; }

/* Buttons and links */
html body.product-body .button.primary { background: var(--c-violet) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; font-weight: 700 !important; box-shadow: 0 10px 24px -12px rgba(90, 67, 234, .85) !important; }
html body.product-body .button.secondary { background: var(--c-card) !important; border: 1px solid var(--c-line-2) !important; border-radius: 12px !important; font-weight: 650 !important; }
html body.product-body :is(.inline-action, .dashboard-section-heading button) { color: var(--c-violet) !important; font-weight: 650 !important; background: transparent !important; border: 0 !important; }
html[data-theme="dark"] body.product-body :is(.inline-action, .dashboard-section-heading button) { color: var(--c-lilac) !important; }

/* Skill cards: separate tiles, one small colour dot per skill */
html body.product-body .skill-grid { gap: 12px !important; border: 0 !important; background: transparent !important; }
html body.product-body .skill-card { background: var(--c-card) !important; border: 1px solid var(--c-line-2) !important; border-radius: 16px !important; box-shadow: none !important; transition: box-shadow .2s, border-color .2s; }
html body.product-body .skill-card:hover { border-color: rgba(90, 67, 234, .45) !important; box-shadow: var(--c-shadow) !important; }
html body.product-body .skill-index { display: inline-flex !important; align-items: center; gap: 8px; font-size: 12px !important; font-weight: 700 !important; color: var(--c-muted) !important; letter-spacing: .06em; }
html body.product-body .skill-index::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--skill-dot, var(--c-violet)); }
html body.product-body .skill-reading { --skill-dot: #6a55f0; }
html body.product-body .skill-listening { --skill-dot: #23b98a; }
html body.product-body .skill-speaking { --skill-dot: #e2a93b; }
html body.product-body .skill-writing { --skill-dot: #d0679a; }
html body.product-body .skill-card h3 { font-weight: 700 !important; letter-spacing: -.03em !important; font-size: 20px !important; }
html body.product-body .skill-card strong { color: var(--c-ink) !important; font-weight: 700 !important; }
html body.product-body .skill-card p { color: var(--c-muted) !important; }
html body.product-body .skill-card a { color: var(--c-violet) !important; font-weight: 650 !important; }
html[data-theme="dark"] body.product-body .skill-card strong { color: #fff !important; }
html[data-theme="dark"] body.product-body :is(.skill-card p, .dashboard-plain p, .activity-row small) { color: rgba(255, 255, 255, .64) !important; }
html[data-theme="dark"] body.product-body .skill-card a { color: var(--c-lilac) !important; }

html body.product-body .dashboard-pair { gap: 14px !important; border: 0 !important; }
html body.product-body .plain-heading > span { background: var(--c-violet-soft) !important; color: var(--c-violet) !important; border: 0 !important; font-weight: 700 !important; border-radius: 999px !important; }
html[data-theme="dark"] body.product-body .plain-heading > span { background: rgba(189, 179, 255, .14) !important; color: var(--c-lilac) !important; }

html body.product-body :is(.activity-row, .practice-task, .task-performance-row) { border-color: var(--c-line) !important; transition: background .15s; }
html body.product-body :is(.activity-row, .practice-task, .task-performance-row, .mock-hub-row):hover { background: rgba(90, 67, 234, .045) !important; }
html[data-theme="dark"] body.product-body :is(.activity-row, .practice-task, .task-performance-row, .mock-hub-row):hover { background: rgba(255, 255, 255, .035) !important; }
html body.product-body .activity-row > span:last-child strong { color: var(--c-violet) !important; font-weight: 700 !important; }
html[data-theme="dark"] body.product-body .activity-row > span:last-child strong { color: var(--c-lilac) !important; }
html body.product-body .mock-number { color: var(--c-violet) !important; font-weight: 700 !important; }

@media (max-width: 760px) {
  html body.product-body .product-nav { border-right: 0 !important; border-bottom: 1px solid var(--c-line) !important; }
}

/* ───────────── Contrast fixes found by the audit ───────────── */
html[data-theme="dark"] body.product-body .mock-number { color: var(--c-lilac) !important; }
html[data-theme="dark"] body.product-body .skill-index { color: rgba(255, 255, 255, .66) !important; }
html body.u-workspace .mode-count { color: #1b5e4e !important; }
html[data-theme="dark"] body.u-workspace .mode-count { color: #8fe9c8 !important; }

/* ───────────── Top-bar buttons: same size, centred, one line ───────────── */
html body.u-workspace .topbar .auth-actions { display: flex !important; align-items: center !important; gap: 8px !important; }
html body.u-workspace .topbar .auth-actions :is(.pro-nav-action, .auth-button) {
  box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 92px !important; min-width: 92px !important; height: 36px !important; min-height: 36px !important;
  margin: 0 !important; padding: 0 10px !important; line-height: 1 !important; white-space: nowrap;
  font-size: 13px !important; font-weight: 700 !important; border-radius: 10px !important; box-shadow: none !important;
}
html body.u-workspace .topbar .auth-actions .auth-button.signup { border: 1px solid transparent !important; }
html body.u-workspace .topbar .auth-actions :is(.theme-toggle, .profile-button, .lx-tools button) { width: 36px !important; height: 36px !important; }
html body.product-body .product-pro-action {
  box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  height: 36px !important; line-height: 1 !important;
}
html[data-theme="dark"] body.product-body .button.secondary { background: rgba(255, 255, 255, .06) !important; color: #fff !important; border-color: rgba(255, 255, 255, .2) !important; }
html body .plan-saving { color: #1b5e4e !important; }
html[data-theme="dark"] body .plan-saving { color: #8fe9c8 !important; }
html body .exam-index { color: inherit !important; opacity: .7; }
html[data-theme="dark"] body .plan-card.recommended .plan-top strong { color: #fff !important; }

/* ───────────── IELTS (ielts.html) — same system as TOEFL practice ─────────────
   The IELTS page ships its own small stylesheet built on local tokens
   (--page, --card, --ink, --accent ...). Retune those tokens to Look C, then
   give its header, tabs, cards and session panels the TOEFL practice shapes. */
html body.ielts-page {
  --page: var(--c-paper); --card: #ffffff; --soft: #f1eeff; --ink: var(--c-ink); --muted: #5f5a6c;
  --line: rgba(22, 20, 31, .14); --accent: var(--c-violet); --on-accent: #ffffff;
  background: var(--c-paper) !important; color: var(--ink) !important; font-family: var(--sans) !important;
}
html[data-theme="dark"] body.ielts-page {
  --page: var(--c-night); --card: var(--c-night-2); --soft: #262238; --ink: #f2eefb; --muted: rgba(242, 238, 251, .7);
  --line: rgba(255, 255, 255, .12); --accent: var(--c-lilac); --on-accent: #16141f;
  background: var(--c-night) !important; color: var(--ink) !important;
}

/* Header = TOEFL floating top bar */
html body.ielts-page .ielts-header {
  position: sticky; top: 14px; z-index: 50;
  width: min(1180px, calc(100% - 48px)); height: 64px; margin: 14px auto 0; padding: 0 12px 0 20px; gap: 22px;
  background: rgba(255, 255, 255, .86); border: 1px solid var(--c-line); border-radius: 18px;
  box-shadow: 0 10px 30px -18px rgba(34, 26, 80, .32); backdrop-filter: blur(14px);
}
html[data-theme="dark"] body.ielts-page .ielts-header { background: rgba(26, 24, 36, .86); border-color: var(--c-night-line); }
html body.ielts-page .ielts-brand {
  width: 132px; height: 44px; background: url("ursula-logo-light.png") left center / contain no-repeat;
}
html[data-theme="dark"] body.ielts-page .ielts-brand { background-image: url("ursula-logo-dark.png"); }
html body.ielts-page .ielts-brand img { opacity: 0; }
html body.ielts-page .ielts-header > a:not(.ielts-brand) {
  font-size: 13.5px; font-weight: 600; color: var(--ink); opacity: .8; padding: 8px 12px; border-radius: 10px;
}
html body.ielts-page .ielts-header > a:not(.ielts-brand):hover { opacity: 1; background: rgba(22, 20, 31, .05); }
html body.ielts-page .header-right { gap: 8px; }
html body.ielts-page #themeToggle {
  width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center;
  background: transparent; border-color: transparent; border-radius: 10px; color: var(--ink); font-size: 16px;
}
html body.ielts-page #themeToggle:hover { background: rgba(22, 20, 31, .05); }
html body.ielts-page #accountLink {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: 104px; height: 36px; padding: 0 10px; border-radius: 10px; line-height: 1;
  font-size: 13px; font-weight: 700; color: var(--ink); border: 1px solid var(--c-line-2);
}
html body.ielts-page #accountLink:hover { background: rgba(22, 20, 31, .05); }
html[data-theme="dark"] body.ielts-page :is(#accountLink) { border-color: rgba(255, 255, 255, .24); }
html[data-theme="dark"] body.ielts-page :is(#themeToggle:hover, #accountLink:hover, .ielts-header > a:not(.ielts-brand):hover) { background: rgba(255, 255, 255, .07); }

/* Workspace column matches the TOEFL content width */
html body.ielts-page #workspace { max-width: 1180px; padding: 40px 24px 80px; }

/* Type: Inter everywhere, serif only for the accent word */
html body.ielts-page :is(h1, h2, h3, .passage, .result-score, .dashboard-stat strong) { font-family: var(--sans) !important; }
html body.ielts-page h1 { font-weight: 700; letter-spacing: -.045em; line-height: 1.02; font-size: clamp(32px, 3.6vw, 52px); }
html body.ielts-page h1 em { font-family: var(--serif) !important; font-weight: 400; letter-spacing: -.01em; color: var(--accent); }
html body.ielts-page .session-head h1 { font-size: clamp(26px, 2.4vw, 34px); }
html body.ielts-page h2 { font-weight: 700; letter-spacing: -.03em; }
html body.ielts-page h3 { font-weight: 700; letter-spacing: -.02em; }
html body.ielts-page .eyebrow { font-weight: 700; letter-spacing: .13em; color: var(--accent); }
html body.ielts-page .intro { font-size: 16px; line-height: 1.6; }
html body.ielts-page .dashboard-stat strong { font-weight: 700; font-size: 40px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* Buttons */
html body.ielts-page button { border-radius: 11px; font-weight: 650; font-size: 14px; border-color: var(--line); }
html body.ielts-page button:hover { border-color: var(--accent); }
html body.ielts-page .primary { background: var(--c-violet); border-color: var(--c-violet); color: #fff; font-weight: 700; box-shadow: 0 10px 24px -12px rgba(90, 67, 234, .85); }
html body.ielts-page .primary:hover { background: #4b34d6; border-color: #4b34d6; }
html[data-theme="dark"] body.ielts-page .primary { background: var(--c-violet); border-color: var(--c-violet); color: #fff; }

/* Skill tabs + filters = TOEFL task tabs (pills, ink when active) */
html body.ielts-page .skill-tabs { gap: 8px; border-bottom: 0; padding-bottom: 0; margin-bottom: 28px; }
html body.ielts-page :is(.skill-tabs button, .filters button) {
  border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 650; background: var(--card); color: var(--c-ink-2); border: 1px solid var(--c-line-2);
}
html body.ielts-page :is(.skill-tabs button[aria-current=true], .filters button[aria-pressed=true]) { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
html[data-theme="dark"] body.ielts-page :is(.skill-tabs button, .filters button) { color: rgba(255, 255, 255, .82); border-color: rgba(255, 255, 255, .14); }
html[data-theme="dark"] body.ielts-page :is(.skill-tabs button[aria-current=true], .filters button[aria-pressed=true]) { background: #fff; border-color: #fff; color: var(--c-ink); }
html body.ielts-page .filters select { border-radius: 10px; padding: 9px 12px; border-color: var(--c-line-2); }

/* Cards and panels = TOEFL question card */
html body.ielts-page :is(.set-card, .source-panel, .questions-panel, .writing-panel, .speaking-panel, .results-panel) {
  background: var(--card); border: 1px solid var(--c-line-2); border-radius: 20px; box-shadow: var(--c-shadow);
}
html[data-theme="dark"] body.ielts-page :is(.set-card, .source-panel, .questions-panel, .writing-panel, .speaking-panel, .results-panel) { border-color: var(--c-night-line); box-shadow: var(--c-shadow-dark); }
html body.ielts-page .set-card { transition: border-color .2s, box-shadow .2s; }
html body.ielts-page .set-card:hover { border-color: rgba(90, 67, 234, .45); box-shadow: var(--c-shadow-lg); }
html body.ielts-page .set-card .eyebrow { font-size: 10.5px; }
html body.ielts-page .tags { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
html body.ielts-page .empty, html body.ielts-page .loading { border-style: solid; border-color: var(--c-line-2); background: var(--card); }

/* Session: header, timer, question numbers */
html body.ielts-page .timer { font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
html body.ielts-page .exam-meta { gap: 10px; padding: 6px 6px 6px 14px; background: var(--card); border: 1px solid var(--c-line-2); border-radius: 14px; }
html[data-theme="dark"] body.ielts-page .exam-meta { border-color: var(--c-night-line); }
html body.ielts-page .attempt-nav button, html body.ielts-page .question-nav a {
  min-width: 32px; height: 32px; padding: 0 8px; display: inline-grid; place-items: center;
  border-radius: 9px; font-size: 12.5px; font-weight: 650; border: 1px solid var(--c-line-2); background: var(--card); color: var(--c-ink-2);
}
html body.ielts-page :is(.attempt-nav button[aria-current=true], .question-nav a.answered) { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
html[data-theme="dark"] body.ielts-page .attempt-nav button, html[data-theme="dark"] body.ielts-page .question-nav a { color: rgba(255, 255, 255, .82); border-color: rgba(255, 255, 255, .14); }
html[data-theme="dark"] body.ielts-page :is(.attempt-nav button[aria-current=true], .question-nav a.answered) { background: #fff; border-color: #fff; color: var(--c-ink); }

/* Reading passage reads like the TOEFL passage */
html body.ielts-page .passage { font-size: 17px; line-height: 1.85; }
html body.ielts-page .paragraph-label { font-family: var(--sans); color: var(--accent); }
html body.ielts-page .instructions { background: var(--soft); border-radius: 12px; font-size: 13.5px; line-height: 1.55; }
html body.ielts-page .question > label, html body.ielts-page .question legend { font-size: 14.5px; font-weight: 650; }
html body.ielts-page .question-number { font-weight: 700; }
html body.ielts-page :is(.question select, .question input[type=text], textarea) { border-radius: 10px; border-color: var(--c-line-2); }
html body.ielts-page :is(.question select, .question input[type=text], textarea):focus { outline: 2px solid var(--accent); outline-offset: 1px; }
html body.ielts-page .cue { border-left: 0; border-radius: 14px; }
html body.ielts-page .result-score { font-weight: 700; letter-spacing: -.04em; }
html body.ielts-page .criterion { border-radius: 14px; }
html body.ielts-page .submit-bar { border-top-color: var(--line); }

/* Footer like the TOEFL footer */
html body.ielts-page .ielts-footer { max-width: 1180px; margin: 0 auto; padding: 26px 24px; border-top: 1px solid var(--line); color: var(--muted); }
html body.ielts-page #notice:not(:empty) { border-radius: 14px; }

@media (max-width: 760px) {
  html body.ielts-page .ielts-header { width: calc(100% - 20px); top: 10px; margin-top: 10px; height: 58px; padding: 0 8px 0 14px; gap: 10px; }
  html body.ielts-page .ielts-brand { width: 104px; height: 36px; }
  html body.ielts-page .ielts-header > a:not(.ielts-brand) { padding: 6px 8px; font-size: 12.5px; }
  html body.ielts-page #accountLink { width: 84px; }
  html body.ielts-page #workspace { padding: 28px 16px 60px; }
}
html:has(body.ielts-page) { scroll-padding-top: 96px; }
html body.ielts-page #workspace { scroll-margin-top: 96px; }
html body.ielts-page #themeToggle { font-size: 0 !important; }
html body.ielts-page #themeToggle::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.65 17.65l1.42 1.42M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.65 6.35l1.42-1.42'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.65 17.65l1.42 1.42M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.65 6.35l1.42-1.42'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-theme="dark"] body.ielts-page #themeToggle::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M20.5 15.1A8.7 8.7 0 0 1 8.9 3.5 8.8 8.8 0 1 0 20.5 15.1Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M20.5 15.1A8.7 8.7 0 0 1 8.9 3.5 8.8 8.8 0 1 0 20.5 15.1Z'/%3E%3C/svg%3E");
}

html body.ielts-page .ielts-header > a:not(.ielts-brand) { white-space: nowrap; }
/* IELTS Pro-locked sets: a proper button like "Start practice", in the Go Pro amber */
html body.ielts-page .set-card a.primary {
  margin-top: auto; align-self: flex-start; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: 11px; line-height: 1;
  font-size: 14px; font-weight: 700; text-decoration: none;
  background: #fbefc4; color: #3a2d0c; border: 1px solid #ecd58a; box-shadow: none;
}
html body.ielts-page .set-card a.primary:hover { background: #f8e6a8; border-color: #e2c86f; color: #3a2d0c; }
html body.ielts-page .set-card button.primary { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; line-height: 1; }
html body.ielts-page .primary:disabled { opacity: 1; background: rgba(22, 20, 31, .06); border-color: var(--c-line-2); color: #5f5a6c; box-shadow: none; }
html[data-theme="dark"] body.ielts-page .primary:disabled { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .62); }

/* Phones: the turning reel must stay inside its own box (it was spilling over the heading and the skill buttons).
   A longer perspective keeps the turn shallow enough that clipping at the box edge is not visible. */
@media (max-width: 700px) {
  html body.cinematic-home .question-reel { overflow: clip !important; }
  html body.cinematic-home .reel-view { perspective: 3200px !important; }
}

/* Exam choice: the TOEFL card is a soft lavender card (same family as the dashboard "continue" card), not a black block. */
html body.choice-page .exam-card:not(.unavailable) .exam-front {
  background: linear-gradient(135deg, #ece8ff 0%, #f6f4ff 60%, #ffffff 100%) !important;
  border: 1px solid rgba(90, 67, 234, .24) !important; color: var(--c-ink) !important;
  box-shadow: 0 1px 2px rgba(22, 20, 31, .05), 0 18px 40px -24px rgba(34, 26, 80, .35) !important;
}
html body.choice-page .exam-card:not(.unavailable):hover .exam-front { border-color: rgba(90, 67, 234, .5) !important; box-shadow: 0 24px 60px -28px rgba(90, 67, 234, .45) !important; }
html body.choice-page .exam-card:not(.unavailable) .exam-front .exam-name { color: var(--c-ink) !important; }
html body.choice-page .exam-card:not(.unavailable) .exam-front .exam-description { color: var(--c-ink-2) !important; }
html body.choice-page .exam-card:not(.unavailable) .exam-front .exam-index { color: var(--c-violet) !important; opacity: 1 !important; }
html body.choice-page .exam-card:not(.unavailable) .exam-front .exam-arrow { color: var(--c-violet) !important; border-color: rgba(90, 67, 234, .35) !important; background: #fff !important; }
html body.choice-page .exam-card:not(.unavailable):hover .exam-front .exam-arrow { background: var(--c-violet) !important; color: #fff !important; }
html body.choice-page .exam-card:not(.unavailable) .exam-front .lx-inline-badge > * { background: #fff !important; color: var(--c-violet) !important; border-color: rgba(90, 67, 234, .3) !important; }
html[data-theme="dark"] body.choice-page .exam-card:not(.unavailable) .exam-front {
  background: linear-gradient(135deg, #2a2545 0%, #1f1c30 100%) !important; border-color: rgba(189, 179, 255, .26) !important; color: #fff !important; box-shadow: var(--c-shadow-dark) !important;
}
html[data-theme="dark"] body.choice-page .exam-card:not(.unavailable) .exam-front .exam-name { color: #fff !important; }
html[data-theme="dark"] body.choice-page .exam-card:not(.unavailable) .exam-front .exam-description { color: rgba(255, 255, 255, .76) !important; }
html[data-theme="dark"] body.choice-page .exam-card:not(.unavailable) .exam-front :is(.exam-index, .exam-arrow) { color: var(--c-lilac) !important; }
html[data-theme="dark"] body.choice-page .exam-card:not(.unavailable) .exam-front .exam-arrow { background: transparent !important; border-color: rgba(189, 179, 255, .35) !important; }
html[data-theme="dark"] body.choice-page .exam-card:not(.unavailable) .exam-front .lx-inline-badge > * { background: rgba(189, 179, 255, .14) !important; color: var(--c-lilac) !important; border-color: rgba(189, 179, 255, .3) !important; }

/* Verification code: six boxes, one digit each (otp-boxes.js lays the real input over them). */
html body .otp-boxes { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; width: 100%; }
html body .otp-box {
  display: grid; place-items: center; height: 58px; border-radius: 12px;
  border: 1px solid var(--c-line-2); background: var(--c-card); color: var(--c-ink);
  font: 700 26px/1 var(--sans); font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
html body .otp-box.filled { border-color: rgba(22, 20, 31, .32); }
html body .otp-box.active { border-color: var(--c-violet); box-shadow: 0 0 0 3px rgba(90, 67, 234, .18); }
html body .otp-box.active:not(.filled)::after { content: ""; width: 2px; height: 26px; border-radius: 2px; background: var(--c-violet); animation: otpCaret 1s steps(1) infinite; }
@keyframes otpCaret { 50% { opacity: 0; } }
html body .otp-boxes.complete .otp-box { border-color: rgba(90, 67, 234, .45); }
html body input.otp-input.otp-input-overlay {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; outline: none !important; box-shadow: none !important;
  background: transparent !important; color: transparent !important; caret-color: transparent !important;
  -webkit-text-fill-color: transparent !important; font-size: 16px !important; letter-spacing: 0 !important; text-indent: -9999px;
  cursor: text; z-index: 1;
}
html body input.otp-input.otp-input-overlay::selection { background: transparent; }
html[data-theme="dark"] body .otp-box { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .18); color: #fff; }
html[data-theme="dark"] body .otp-box.filled { border-color: rgba(255, 255, 255, .34); }
html[data-theme="dark"] body .otp-box.active { border-color: var(--c-lilac); box-shadow: 0 0 0 3px rgba(189, 179, 255, .2); }
html[data-theme="dark"] body .otp-box.active:not(.filled)::after { background: var(--c-lilac); }
@media (max-width: 420px) { html body .otp-boxes { gap: 7px; } html body .otp-box { height: 52px; font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { html body .otp-box.active:not(.filled)::after { animation: none; } }

/* History "by skill" cards: inner padding that matches the rows, and space between the cards. */
html body.product-body .history-breakdown { display: grid; gap: 16px; }
html body.product-body .history-breakdown > .dashboard-section-heading { margin-bottom: 4px; }
html body.product-body .history-skill { margin: 0 !important; overflow: hidden; }
html body.product-body .history-skill > header {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px;
  padding: 22px 24px !important; margin: 0 !important;
}
html body.product-body .history-skill > header h2 { margin: 0 0 4px !important; }
html body.product-body .history-skill > header p { margin: 0 !important; }
html body.product-body .history-skill > header > strong { text-align: right; line-height: 1.1; }
html body.product-body .history-skill .task-performance-list { border-top: 1px solid var(--c-line) !important; margin: 0 !important; }
html body.product-body .history-skill .task-performance-row { padding: 18px 24px !important; }
html body.product-body .history-skill .task-performance-row:last-child { border-bottom: 0 !important; }
@media (max-width: 760px) {
  html body.product-body .history-skill > header { padding: 18px 18px !important; flex-direction: row !important; align-items: center !important; text-align: left !important; }
  html body.product-body .history-skill > header > div { text-align: left !important; min-width: 0; }
  html body.product-body .history-skill > header > strong { flex: none; }
  html body.product-body .history-skill .task-performance-row { padding: 16px 18px !important; }
}