:root {
  color-scheme: light;
  font-family: var(--font-text);

  /* Two optical cuts of the same system family: Text for body copy (open
     counters, wider spacing at small sizes) and Display for headings (tighter,
     more refined). This is exactly what SF Pro and Segoe UI Variable are for. */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", sans-serif;

  /* Tricolore, deepened for screen. The flag's #0055A4 and #EF4135 are too
     saturated to carry large areas of text, so the brand blue and red are
     darkened for legibility and the white becomes the glass itself. */
  --bleu: #10428f;
  --bleu-deep: #072a63;
  --bleu-soft: #edf2fd;
  --bleu-bright: #2e6bd6;
  --rouge: #ce2b37;
  --rouge-deep: #a3202a;
  /* One radius for every primary CTA, so the home button, lesson Continue,
     billing and account CTAs are visually identical. */
  --cta-radius: 15px;

  /* Matte pastels. These carry the surfaces; the saturated tricolore above is
     reserved for text, icons and CTAs so the theme stays light instead of bold. */
  --pastel-bleu: #e3e9fb;
  --pastel-bleu-deep: #d3ddf8;
  --pastel-rose: #fbe4e8;
  --pastel-rose-deep: #f7d5dc;
  --pastel-mist: #f0f2fb;

  --canvas: #f3f4fb;
  --surface: #ffffff;
  --ink: #0b1533;
  --muted: #5a6178;
  --blue: #3a63c4;
  /* --green stays an actual green: it marks correct answers and success states,
     so it carries meaning and must not be recoloured into the brand palette. */
  --green: #1f7a55;
  --gold: #8f5d06;
  --border: #e6e9f5;
  --shadow: 0 24px 70px rgba(11, 21, 51, 0.10);

  /* Liquid glass: translucent white over the ambient wash, blurred and
     saturated so colour behind bleeds through, with a bright top edge and a
     soft inner floor to imply the thickness of real glass. */
  --glass-tint: rgba(255, 255, 255, 0.66);
  --glass-tint-strong: rgba(255, 255, 255, 0.88);
  --glass-blur: blur(20px) saturate(135%);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-edge:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(11, 21, 51, 0.03);
  --glass-lift:
    0 1px 2px rgba(11, 21, 51, 0.03),
    0 8px 22px rgba(59, 72, 130, 0.07);
  --glass-lift-strong:
    0 1px 2px rgba(11, 21, 51, 0.04),
    0 16px 40px rgba(59, 72, 130, 0.10);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(72% 52% at 10% 0%, rgba(163, 181, 243, 0.42), transparent 64%),
    radial-gradient(64% 48% at 94% 2%, rgba(243, 182, 196, 0.36), transparent 62%),
    radial-gradient(60% 50% at 50% 104%, rgba(186, 197, 246, 0.32), transparent 64%),
    var(--canvas);
  background-attachment: fixed;
  color: var(--ink);
  /* Antialiased instead of subpixel: strokes render a shade lighter and
     smoother, which is most of what makes type feel soft rather than harsh. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

/* Headings take the display cut with a little negative tracking. Large type at
   default tracking reads loose; tightening it is the single biggest
   professionalism win at headline sizes. */
h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: -0.021em;
}

button {
  font: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: 3px solid rgba(16, 66, 143, 0.35);
  outline-offset: 2px;
}

.svg-icon {
  width: 23px;
  height: 23px;
  display: inline-grid;
  flex: 0 0 23px;
  place-items: center;
}

.svg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.phone-frame {
  /* Fluid vertical unit. Every Today-screen height derives from this, so the
     whole home page compresses smoothly as the viewport gets shorter instead of
     jumping at a breakpoint. 186px = shell padding + topbar + bottom nav. */
  --u: clamp(6.2px, calc((100vh - 186px) * 0.01218), 9.6px);
  position: relative;
  width: min(100%, 430px);
  height: min(932px, calc(100vh - 32px));
  min-height: 680px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: linear-gradient(180deg, #ffffff 0%, var(--canvas) 100%);
  border: 1px solid rgba(11, 21, 51, 0.07);
  border-radius: 38px;
  box-shadow: var(--shadow);
}

/* The tricolore wash the glass refracts. Without colour behind them, blurred
   translucent panels read as flat grey, so this sits under every screen: blue
   from the top-left, red from the top-right, deep blue rising from the base. */
.phone-frame::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 74% at 2% -8%, rgba(150, 172, 240, 0.42), transparent 60%),
    radial-gradient(96% 60% at 108% 2%, rgba(240, 175, 190, 0.34), transparent 62%),
    radial-gradient(130% 70% at 50% 112%, rgba(168, 184, 244, 0.34), transparent 64%);
}

.screen-content,
.topbar,
.bottom-nav {
  position: relative;
  z-index: 1;
}

.topbar {
  height: 76px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 14px rgba(11, 21, 51, 0.05);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  z-index: 2;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.brand strong {
  color: var(--bleu);
}

/* Badge + wordmark. The mark is a speech bubble (language) carrying three
   tricolore dots (French), built from rects and circles so it stays crisp at
   26px instead of relying on a fine-detail path. */
.brand-mark {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  margin-right: 9px;
  display: block;
  border-radius: 9px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 3px 10px rgba(47, 86, 184, 0.32);
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}

.brand-word {
  display: inline-flex;
  align-items: baseline;
  letter-spacing: -0.017em;
}

/* Topbar controls as small glass chips, matching the dock and side menu. */
.icon-button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(11, 21, 51, 0.06);
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(59, 72, 130, 0.08);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

/* Amber bell with the red badge: the warm glyph pulls the eye far better than
   ink did, and amber-plus-red is the familiar "something needs you" pairing. */
.notice {
  position: relative;
  border-color: rgba(46, 92, 176, 0.16);
  color: var(--bleu);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(232, 239, 255, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 5px 14px rgba(38, 73, 152, 0.12);
}

.notice::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  background: linear-gradient(145deg, #e65a63, var(--rouge-deep));
  box-shadow: 0 2px 5px rgba(163, 32, 42, 0.34);
}

/* A soft ping ring radiating from the badge — quiet "something is waiting". */
.notice::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4px;
  right: 4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(206, 43, 55, 0.26);
  background: rgba(252, 231, 234, 0.72);
}

/* The bell itself gives one short ring every few seconds, swinging from its
   mount like a real bell rather than rotating around its centre. */
.notice .svg-icon {
  width: 19px;
  height: 19px;
  stroke-width: 2.15;
}

.screen-content {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(var(--u) * 0.8) 18px 0;
  scroll-padding-bottom: 18px;
  scrollbar-width: thin;
  scrollbar-color: #d7dfe5 transparent;
}

.view-stack {
  display: grid;
  gap: 11px;
  /* Section pages breathe below the topbar; the Today view zeroes this and
     manages its own top gap through the grid instead. */
  padding-top: calc(var(--u) * 1.1);
  padding-bottom: calc(var(--u) * 1.6);
  animation: view-enter 260ms ease both;
}

/* The Today screen fills the full content box and spreads any leftover height
   evenly across its gaps. The zero-height ::before and ::after are the first
   and last grid rows, so the space under the topbar and the space above the
   dock are both ordinary grid gaps — identical to the gaps between sections.
   The negative margin cancels the scroll container's own top padding so the
   top gap is governed by the grid alone. */
.today-view {
  min-height: calc(100% + var(--u) * 0.8);
  margin-top: calc(var(--u) * -0.8);
  padding-top: 0;
  padding-bottom: 0;
  gap: calc(var(--u) * 1.02);
  align-content: space-between;
}

.today-view::before,
.today-view::after {
  content: "";
  display: block;
  height: 0;
}

.hero-row {
  position: relative;
  min-height: calc(var(--u) * 15.8);
  overflow: hidden;
  border-radius: 22px;
  isolation: isolate;
  /* The one committed-colour surface on the screen. Everything else is quiet
     white glass, so the day's mission owns the eye the moment the app opens. */
  border: 1px solid rgba(7, 42, 99, 0.45);
  background: linear-gradient(118deg, #0c3576 0%, #10428f 52%, #2e5cb0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 44px rgba(16, 66, 143, 0.35);
}

.hero-row::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #0d3878 0%, rgba(13, 56, 120, 0.98) 40%, rgba(13, 56, 120, 0.82) 56%, rgba(13, 56, 120, 0.38) 74%, transparent 92%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 71%;
  /* Text inside a card needs its own inset — flush-left against the card edge
     is what made the hero read amateur. */
  padding: calc(var(--u) * 1.4) 0 calc(var(--u) * 1.2) calc(var(--u) * 1.7);
}

.section-label,
.panel-label {
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bleu);
  font-size: 15px;
  font-weight: 610;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 9px;
  color: var(--ink);
  font-size: 34px;
  font-weight: 630;
  line-height: 1.08;
  letter-spacing: -0.021em;
}

.today-view .hero-row h1 {
  /* White type on the committed blue; the shine sweep lightens to sky. */
  --word: #ffffff;
  --shine: #a8c6ff;
  max-width: 250px;
  /* line-height 1.01 pulls the box tighter than the glyphs, so the descender of
     "yourself" needs a little extra room before the paragraph below. */
  margin-bottom: calc(var(--u) * 1.1);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: calc(var(--u) * 3.62);
  /* The headline is the one place the type is allowed to be genuinely bold —
     it anchors the whole screen while everything around it stays light. */
  font-weight: 730;
  line-height: 1.02;
  letter-spacing: -0.028em;
}

/* Live clock beside the date. Tabular figures keep the chip from twitching as
   the seconds change width. */
.hero-clock {
  padding-left: 8px;
  margin-left: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.86);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* The date as a floating glass chip over the blue, tucked in the top corner. */
.today-view .section-label {
  width: fit-content;
  margin-bottom: calc(var(--u) * 1);
  padding: calc(var(--u) * 0.42) calc(var(--u) * 1.05);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  gap: 6px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  font-size: calc(var(--u) * 1.28);
  font-weight: 560;
  letter-spacing: 0.015em;
}

.today-view .section-label .svg-icon {
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 1.5);
  flex: 0 0 calc(var(--u) * 1.5);
}

/* Each headline word rises into place on a stagger, then a slow teal shine
   travels across the line so the heading keeps a little life instead of
   sitting completely static. line-height is inherited so switching the words
   to inline-block does not change how tall the heading is. */
/* "Today:" holds its own line; the line below cycles through the lesson title
   and its French phrases. Two lines are reserved for the rotating line so a
   shorter phrase never makes the hero, and everything under it, jump. */
.headline-static,
.headline-rotator {
  display: block;
}

/* Reserves exactly one main line + the companion line — the uniform shape of
   every rotating entry — so nothing below the heading moves during rotation
   and no dead strip is left under the companion line. */
.headline-rotator {
  min-height: calc(1.02em + 0.16em + 0.564em);
}

.headline-word {
  --word: var(--ink);
  --shine: var(--bleu-bright);
  display: inline-block;
  line-height: inherit;
  color: var(--word);
  animation: headline-word-in 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i) * 85ms);
}

/* On the committed blue hero the words flip to white and the sweep goes sky. */
.today-view .hero-row h1 .headline-word {
  --word: #ffffff;
  --shine: #a8c6ff;
}

/* The companion line under the rotating text: the English meaning of a French
   phrase, or a French tagline under a title. Smaller and quieter so the main
   line keeps the stage, sized so main + sub together match the two reserved
   headline lines and the hero never changes height. */
.headline-sub {
  display: block;
  width: fit-content;
  margin-top: 0.16em;
  font-size: 0.47em;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.006em;
}

.today-view .hero-row h1 .headline-sub {
  --word: #cddcf9;
  --shine: #ffffff;
}

@keyframes headline-word-in {
  from {
    opacity: 0;
    transform: translateY(0.4em) scale(0.965);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* The shine needs background-clip: text. Guarded, because without support the
   transparent text colour would make the heading invisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .headline-word {
    /* background-color always paints the full box, so even if the gradient
       layer fails to cover it the glyphs still render solid ink. Without this
       any uncovered area shows through as transparent — invisible text. */
    background-color: var(--word);
    background-image: linear-gradient(100deg, var(--word) 41%, var(--shine) 50%, var(--word) 59%);
    background-size: 260% 100%;
    background-position: 0% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:
      headline-word-in 620ms cubic-bezier(0.22, 1, 0.36, 1) both,
      headline-shine 7s ease-in-out infinite;
    animation-delay: calc(var(--i) * 85ms), calc(1100ms + var(--i) * 95ms);
  }
}

/* Stays within 0%-100%. Because the image is wider than the element, any
   position in that range covers it completely; going outside (130%, -30%)
   slides the image clear of part of the element and blanks those glyphs. */
@keyframes headline-shine {
  0% { background-position: 100% 0; }
  20% { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

.hero-copy,
.page-title p {
  margin-bottom: 0;
  color: #464e64;
  font-size: 15px;
  line-height: 1.52;
}

.today-view .hero-copy {
  max-width: 238px;
  color: rgba(255, 255, 255, 0.92);
  font-size: calc(var(--u) * 1.52);
  line-height: 1.46;
  font-weight: 510;
  /* Even out the two description lines ("...greet someone / and say your
     name...") instead of a long first line with a short orphan under it. */
  text-wrap: balance;
}

.scene-card {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 68% center;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 27%, rgba(0, 0, 0, 0.64) 54%, #000 72%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 27%, rgba(0, 0, 0, 0.64) 54%, #000 72%);
}

.progress-panel,
.instructor-panel,
.lesson-card,
.module-row,
.test-row,
.test-visual,
.voice-room,
.correction-card,
.profile-panel,
.plan-list > div {
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--glass-tint-strong), var(--glass-tint));
  box-shadow: var(--glass-edge), var(--glass-lift);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.progress-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 6.9) 94px;
  align-items: center;
  gap: 12px;
  padding: calc(var(--u) * 1.2) 15px;
  box-shadow: var(--glass-edge), var(--glass-lift);
}

/* Small-caps eyebrow instead of a loud blue caption — the numbers below are
   the story; the label just files them. */
.progress-panel .panel-label {
  margin-bottom: calc(var(--u) * 0.8);
  color: #59617e;
  font-size: calc(var(--u) * 1.12);
  font-weight: 590;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.progress-panel h2 {
  margin: 0 0 calc(var(--u) * 1);
  font-size: calc(var(--u) * 3.05);
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1;
}

.progress-panel h2 span,
.level-note strong {
  color: var(--bleu);
}

.progress-panel h2 span {
  color: #626c8f;
  font-weight: 500;
}

.progress-bar {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(11, 21, 51, 0.07);
  box-shadow: inset 0 1px 2px rgba(11, 21, 51, 0.06);
}

.progress-bar span {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: linear-gradient(90deg, #4a74d4, var(--bleu));
  box-shadow: 0 1px 4px rgba(16, 66, 143, 0.35);
}

.progress-bar.small {
  height: 5px;
  margin-top: 11px;
}

.score-ring {
  position: relative;
  width: calc(var(--u) * 6.9);
  height: calc(var(--u) * 6.9);
}

.score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.score-ring circle {
  fill: none;
  stroke: rgba(11, 21, 51, 0.08);
  stroke-width: 4.75;
}

/* Gradient stroke (defined in the ring's own <defs>) with a solid fallback —
   at 0% only the rounded cap shows, so the dot still reads in brand blue. */
.score-ring .ring-progress {
  stroke: var(--bleu);
  stroke: url(#scoreRingGradient);
  stroke-dasharray: 113;
  stroke-dashoffset: 91;
  stroke-linecap: round;
}

.score-ring strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: calc(var(--u) * 1.68);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.level-note {
  margin: 0;
  color: var(--muted);
  font-size: calc(var(--u) * 1.26);
  line-height: 1.48;
}

/* Streak line: amber once the streak exists, brighter still once today is done. */
.streak-note {
  display: inline-block;
  margin-top: 2px;
  color: #8a5a06;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.streak-note.lit {
  color: #96550a;
}

/* Press feedback on every tappable surface — the screen answers your finger.
   Transitions already exist on these elements, so the press eases naturally. */
.primary-action:active,
.secondary-action:active,
.lesson-card:active,
.instructor-panel:active,
.free-instructor-panel:active,
.bottom-nav button:active {
  transform: scale(0.972);
}

.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.primary-action,
.secondary-action {
  position: relative;
  overflow: hidden;
  height: calc(var(--u) * 5.05);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: calc(var(--u) * 1.62);
  font-weight: 580;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

/* Tricolore CTAs: red primary, blue secondary. The ::after is the gloss —
   a bright band across the top third that gives the button a wet, domed
   surface instead of a flat fill.

   SINGLE SOURCE OF TRUTH for every red primary button in the app. This recipe
   was previously copy-pasted into five places and had already drifted (radii
   14/14/15/16/16, and the lesson Continue was a flat fill with no gradient at
   all). Every primary CTA now lists itself here so they cannot diverge again.
   Size-specific rules (height, font-size) stay with each component below. */
.primary-action,
.subscription-panel > button,
.billing-footer > button,
.talk-cta,
.lesson-primary,
.onboarding-primary,
.auth-submit,
.data-actions button.cta-red,
.account-content > button:not(.account-secondary):not(.account-danger),
.account-content .danger-block > button.account-danger {
  position: relative;
  border: 1px solid var(--rouge-deep);
  border-radius: var(--cta-radius);
  color: white;
  background: linear-gradient(180deg, #e0404c 0%, var(--rouge) 46%, var(--rouge-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 8px 22px rgba(163, 32, 42, 0.28);
}

.primary-action::after,
.subscription-panel > button::after,
.billing-footer > button::after,
.talk-cta::after,
.lesson-primary::after,
.auth-submit::after,
.onboarding-primary::after,
.account-content > button:not(.account-secondary):not(.account-danger)::after,
.account-content .danger-block > button.account-danger::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 52%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

.secondary-action {
  border: 1px solid rgba(16, 66, 143, 0.4);
  color: var(--bleu);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(237, 242, 253, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 18px rgba(16, 66, 143, 0.12);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.primary-action::after,
.secondary-action::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 52%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

.primary-action > *,
.secondary-action > * {
  position: relative;
  z-index: 1;
}

.instructor-panel {
  width: 100%;
  min-height: calc(var(--u) * 10.1);
  overflow: hidden;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 11px;
  padding: 0 13px 0 0;
  text-align: left;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(224, 233, 250, 0.72));
  box-shadow: var(--glass-edge), var(--glass-lift);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.today-view .instructor-panel .avatar-stage {
  height: 100%;
  min-height: calc(var(--u) * 10.1);
}

.avatar-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100px;
  align-self: stretch;
  overflow: hidden;
  display: block;
  perspective: 700px;
  background: #dceef2;
}

.avatar-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 34%, rgba(255, 255, 255, 0.2) 48%, transparent 62%);
  transform: translateX(-110%);
  animation: avatar-light 8s ease-in-out infinite;
}

.avatar-face-stack {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 52% 24%;
  will-change: transform;
  animation: avatar-idle 7s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.avatar-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 18%;
  backface-visibility: hidden;
}

.avatar-smile,
.avatar-blink {
  opacity: 0;
  will-change: opacity;
}

.avatar-smile {
  animation: avatar-smile 11s ease-in-out infinite;
}

.avatar-blink {
  animation: avatar-blink 6.4s linear infinite;
}

.avatar-presence {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 9px;
  height: 9px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(27, 164, 77, 0.3);
  animation: avatar-online 2.6s ease-out infinite;
}

.avatar-wave {
  position: absolute;
  right: 20px;
  bottom: 8px;
  height: 13px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 3px;
}

.avatar-wave i {
  width: 2px;
  height: calc(4px + (var(--wave) * 1.5px));
  border-radius: 2px;
  background: var(--bleu);
  animation: avatar-wave 1.15s ease-in-out infinite alternate;
  animation-delay: calc(var(--wave) * -110ms);
}

.instructor-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.instructor-copy {
  min-width: 0;
  padding: calc(var(--u) * 1.02) 0;
}

.instructor-copy p {
  margin: 0 0 1px;
  color: var(--bleu);
  font-size: calc(var(--u) * 1.02);
  font-weight: 600;
  text-transform: uppercase;
}

.instructor-copy h2 {
  margin: 0 0 calc(var(--u) * 0.5);
  color: var(--ink);
  font-size: calc(var(--u) * 2.14);
  line-height: 1.08;
}

.ready-status {
  margin-bottom: calc(var(--u) * 0.4);
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  font-size: calc(var(--u) * 1.32);
  font-weight: 600;
}

.ready-status i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(27, 164, 77, 0.1);
}

.instructor-copy small {
  display: block;
  color: #465066;
  font-size: calc(var(--u) * 1.22);
  line-height: 1.42;
}

.chat-mark {
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: var(--ink);
  box-shadow: 0 8px 18px rgba(11, 21, 51, 0.16);
}

.chat-mark .svg-icon {
  width: 21px;
  height: 21px;
}

.lesson-list {
  overflow: hidden;
  display: grid;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--glass-tint-strong), var(--glass-tint));
  box-shadow: var(--glass-edge), var(--glass-lift);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.lesson-card {
  min-width: 0;
  width: 100%;
  height: calc(var(--u) * 6.28);
  min-height: calc(var(--u) * 6.28);
  overflow: hidden;
  padding: calc(var(--u) * 0.7) 10px;
  border: 0;
  border-radius: 0;
  /* The list itself is the glass panel; rows stay transparent so four more
     backdrop filters are not stacked on top of it. */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: var(--ink);
  box-shadow: none;
  transition: background 160ms ease, transform 160ms ease;
}

.lesson-card + .lesson-card {
  border-top: 1px solid rgba(11, 21, 51, 0.07);
}

.lesson-icon {
  width: calc(var(--u) * 3.85);
  height: calc(var(--u) * 3.85);
  grid-row: auto;
  border-radius: 14px;
  display: grid;
  place-items: center;
}

/* Each activity keeps its own hue — blue, green, amber, red — as soft matte
   tints, so the row reads colourful and scannable without any tile shouting. */
.lesson-icon.blue {
  color: var(--blue);
  background: linear-gradient(160deg, rgba(214, 225, 252, 0.95), rgba(186, 203, 246, 0.85));
}

.lesson-icon.green {
  color: var(--green);
  background: linear-gradient(160deg, rgba(211, 240, 226, 0.95), rgba(182, 227, 206, 0.85));
}

.lesson-icon.gold {
  color: var(--gold);
  background: linear-gradient(160deg, rgba(250, 238, 210, 0.95), rgba(244, 224, 176, 0.85));
}

.lesson-icon.coral {
  color: var(--rouge);
  background: linear-gradient(160deg, rgba(252, 219, 223, 0.95), rgba(246, 198, 204, 0.85));
}

.lesson-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.lesson-copy {
  min-width: 0;
}

.lesson-copy strong,
.lesson-copy small {
  display: block;
}

.lesson-copy strong {
  margin: 0 0 calc(var(--u) * 0.3);
  font-size: calc(var(--u) * 1.43);
  line-height: 1.16;
}

.lesson-copy small {
  color: var(--muted);
  overflow: hidden;
  font-size: calc(var(--u) * 1.04);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-action {
  grid-column: auto;
  align-self: center;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
}

.lesson-action .svg-icon {
  width: 14px;
  height: 14px;
}

.lesson-action.blue { color: var(--blue); }
.lesson-action.green { color: var(--green); }
.lesson-action.gold { color: var(--gold); }
.lesson-action.coral { color: var(--rouge); }

/* Floating glass dock, iOS-style: a rounded pill inset from the frame edges
   with the ambient wash blurring through it. Height + margin still totals the
   78px the fluid-unit budget expects, so no layout math changes. */
.bottom-nav {
  height: 66px;
  margin: 0 14px 12px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 26px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(243, 246, 255, 0.6));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(59, 72, 130, 0.05),
    0 16px 40px rgba(59, 72, 130, 0.18);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  z-index: 3;
}

.bottom-nav button {
  position: relative;
  min-width: 0;
  height: 54px;
  margin: 0 1px;
  padding: 5px 1px;
  border: 0;
  border-radius: 17px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  color: #565e76;
  background: transparent;
  font-size: 11px;
  font-weight: 550;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

/* The active tab is a solid brand-blue pill — white icon and label, glossy top
   edge, soft blue glow — echoing the hero so the dock and the day's mission
   speak the same colour. It lands with a small spring on every tab change. */
.bottom-nav button.active {
  color: #ffffff;
  font-weight: 600;
  background: linear-gradient(160deg, #2e5cb0 0%, var(--bleu) 55%, #0c3576 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 6px 16px rgba(16, 66, 143, 0.32);
  animation: dock-pill-in 300ms cubic-bezier(0.34, 1.35, 0.64, 1);
}

.bottom-nav button.active .svg-icon {
  transform: translateY(-1px);
  animation: dock-icon-pop 380ms cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes dock-pill-in {
  0% { transform: scale(0.82); }
  62% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes dock-icon-pop {
  0% { transform: translateY(2px) scale(0.85); }
  62% { transform: translateY(-2.5px) scale(1.12); }
  100% { transform: translateY(-1px) scale(1); }
}

.menu-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 240ms;
}

.menu-layer.open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.menu-scrim {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  background: rgba(11, 21, 51, 0.32);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  transition: opacity 220ms ease;
}

.menu-layer.open .menu-scrim {
  opacity: 1;
}

.side-menu {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(82%, 330px);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  border-right: 1px solid var(--glass-border);
  border-radius: 0 30px 30px 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 243, 253, 0.90)),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    24px 0 60px rgba(11, 21, 51, 0.2);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  transform: translateX(-102%);
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}

.menu-layer.open .side-menu {
  transform: translateX(0);
}

.menu-header {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mini-brand {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 620;
  letter-spacing: -0.02em;
}

.mini-brand .brand-mark {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-right: 8px;
  border-radius: 14px;
}

.mini-brand strong {
  color: var(--bleu);
}

.menu-close {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(11, 21, 51, 0.06);
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(59, 72, 130, 0.08);
}

/* The learner block becomes its own glass tile instead of a bare row over a
   hairline — the menu then reads as a stack of surfaces, like iOS settings. */
.learner-summary {
  position: relative;
  overflow: hidden;
  margin: 16px 0 18px;
  padding: 12px 13px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.96), rgba(225, 234, 254, 0.70));
  box-shadow: inset 3px 0 0 var(--bleu), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px rgba(59, 72, 130, 0.09);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.learner-summary img {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  box-shadow: 0 3px 10px rgba(59, 72, 130, 0.18);
}

.learner-summary strong,
.learner-summary span {
  display: block;
}

.learner-summary strong {
  margin-bottom: 3px;
  font-size: 15px;
}

.learner-summary span {
  color: var(--muted);
  font-size: 12px;
}

.learner-summary .learner-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}

.learner-meta i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(31, 122, 85, 0.12);
}

.menu-nav {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}

.menu-nav button {
  --menu-tone: var(--bleu);
  --menu-soft: #eaf0fe;
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #3d4762;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.menu-nav button.menu-tone-green { --menu-tone: #1c7b5a; --menu-soft: #e4f6ec; }
.menu-nav button.menu-tone-gold { --menu-tone: #95630b; --menu-soft: #fff1d8; }
.menu-nav button.menu-tone-violet { --menu-tone: #5b42b5; --menu-soft: #eeeafd; }
.menu-nav button.menu-tone-coral { --menu-tone: #bd4c59; --menu-soft: #fde9ed; }

.menu-nav button:active {
  transform: scale(0.98);
}

/* Every row's icon sits in a small tinted tile; the active row's tile flips to
   solid brand blue with a white glyph, so the state is unmistakable. */
.menu-nav button .svg-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  color: var(--menu-tone);
  background: linear-gradient(145deg, color-mix(in srgb, var(--menu-soft) 72%, white), var(--menu-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 2px 7px rgba(33, 57, 109, 0.04);
  transition: background 150ms ease, color 150ms ease;
}

.menu-nav button .svg-icon svg {
  width: 18px;
  height: 18px;
  margin: auto;
}

.menu-nav button.active {
  color: var(--menu-tone);
  background: linear-gradient(90deg, color-mix(in srgb, var(--menu-soft) 88%, white), rgba(255, 255, 255, 0.14));
  box-shadow: inset 3px 0 0 var(--menu-tone);
}

.menu-nav button.active .svg-icon {
  color: #ffffff;
  background: linear-gradient(155deg, color-mix(in srgb, var(--menu-tone) 72%, white), var(--menu-tone));
  box-shadow: 0 5px 12px color-mix(in srgb, var(--menu-tone) 26%, transparent);
}

/* The conversion moment of the menu: committed hero blue, not a pale pastel.
   The ::after gloss matches the CTA buttons so the whole app's "act now"
   surfaces share one material. */
.menu-upgrade {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 72px;
  margin-top: auto;
  padding: 13px 14px 13px 16px;
  border: 1px solid rgba(7, 42, 99, 0.5);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  color: #ffffff;
  background: linear-gradient(135deg, #2e5cb0 0%, var(--bleu) 55%, #0c3576 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 10px 26px rgba(16, 66, 143, 0.32);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.menu-upgrade::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 52%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
}

.menu-upgrade:active {
  transform: scale(0.98);
}

.menu-upgrade-copy,
.menu-upgrade strong,
.menu-upgrade-mark {
  position: relative;
  z-index: 1;
}

.menu-upgrade-copy small,
.menu-upgrade-copy strong {
  display: block;
}

.menu-upgrade-copy small {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
}

.menu-upgrade-copy strong {
  color: #ffffff;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.menu-upgrade-mark {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.menu-upgrade-mark .svg-icon {
  width: 18px;
  height: 18px;
}

.onboarding-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  background: white;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.onboarding-layer.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.onboarding-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(92% 44% at -12% -8%, rgba(141, 166, 239, 0.28), transparent 62%),
    radial-gradient(78% 42% at 112% -2%, rgba(239, 168, 185, 0.24), transparent 62%),
    linear-gradient(180deg, #fbfcff 0%, #f3f6fd 100%);
}

.onboarding-header {
  min-height: 76px;
  padding: 18px 20px 10px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 14px;
}

.onboarding-header.welcome-header {
  grid-template-columns: 1fr auto;
}

.onboarding-back {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--bleu-deep);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--glass-edge), 0 7px 16px rgba(16, 66, 143, 0.08);
}

.onboarding-skip {
  min-height: 38px;
  padding: 0 4px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 560;
}

.onboarding-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.onboarding-progress span {
  height: 4px;
  border-radius: 999px;
  background: rgba(16, 66, 143, 0.10);
}

.onboarding-progress span.active {
  background: linear-gradient(90deg, var(--bleu), var(--blue));
  box-shadow: 0 2px 5px rgba(16, 66, 143, 0.22);
}

.onboarding-count {
  justify-self: end;
  min-width: 38px;
  height: 30px;
  border: 1px solid rgba(16, 66, 143, 0.12);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 650;
}

.onboarding-count b {
  color: var(--bleu);
  font-size: 13px;
}

.onboarding-count i {
  width: 1px;
  height: 11px;
  background: rgba(90, 97, 120, 0.35);
}

.onboarding-welcome {
  min-height: 0;
  overflow-y: auto;
  padding: 16px 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.welcome-portrait {
  width: 178px;
  height: 196px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #d5eceb;
  border-radius: 50% 50% 8px 8px;
  background: #eef2fc;
  box-shadow: 0 18px 38px rgba(20, 76, 82, 0.14);
}

.welcome-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 16%;
}

.welcome-greeting {
  margin-bottom: 8px;
  color: var(--bleu);
  font-size: 15px;
  font-weight: 610;
}

.onboarding-welcome h1,
.onboarding-question h1,
.onboarding-summary h1 {
  color: var(--ink);
  font-size: 33px;
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: 0;
}

.onboarding-welcome h1 {
  max-width: 340px;
  margin-bottom: 12px;
}

.onboarding-welcome > p:last-child {
  max-width: 340px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.onboarding-question,
.onboarding-summary {
  min-height: 0;
  overflow-y: auto;
  padding: 12px 20px 18px;
}

.onboarding-question-intro {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
}

.onboarding-question-symbol {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(145deg, #2d68c9 0%, var(--bleu) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 10px 20px rgba(16, 66, 143, 0.20);
}

.onboarding-question-symbol .svg-icon {
  width: 23px;
  height: 23px;
  stroke-width: 2.05;
}

.onboarding-question h1 {
  margin: 1px 0 6px;
  font-size: 30px;
  line-height: 1.08;
}

.onboarding-question-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.onboarding-options {
  display: grid;
  gap: 9px;
}

.onboarding-option {
  --option-tone: var(--bleu);
  --option-soft: #edf2fd;
  width: 100%;
  min-height: 76px;
  padding: 12px 13px;
  border: 1px solid rgba(16, 66, 143, 0.11);
  border-radius: 17px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-align: left;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 5px 14px rgba(33, 57, 109, 0.035);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.onboarding-option.option-tone-1 {
  --option-tone: #18795a;
  --option-soft: #e6f6ed;
}

.onboarding-option.option-tone-2 {
  --option-tone: #7251bb;
  --option-soft: #f0edfb;
}

.onboarding-option.option-tone-3 {
  --option-tone: #aa5c13;
  --option-soft: #fff2dd;
}

.option-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--option-tone);
  background: linear-gradient(145deg, color-mix(in srgb, var(--option-soft) 72%, white), var(--option-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.option-portrait {
  width: 42px;
  height: 50px;
  border-radius: 14px;
  display: block;
  object-fit: cover;
  object-position: center 16%;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: var(--option-soft);
}

.onboarding-option.instructor-option {
  min-height: 82px;
}

.option-copy {
  min-width: 0;
}

.option-copy strong,
.option-copy small {
  display: block;
}

.option-copy strong {
  margin-bottom: 3px;
  font-size: 15.5px;
  line-height: 1.2;
}

.option-copy small {
  color: var(--muted);
  font-size: 11.8px;
  line-height: 1.35;
}

.option-check {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(16, 66, 143, 0.18);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: transparent;
  background: rgba(255, 255, 255, 0.78);
}

.option-check .svg-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.onboarding-option.selected {
  border-color: color-mix(in srgb, var(--option-tone) 58%, white);
  background: linear-gradient(118deg, var(--option-soft) 0%, rgba(255, 255, 255, 0.98) 76%);
  box-shadow: inset 3px 0 0 var(--option-tone), inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 10px 22px color-mix(in srgb, var(--option-tone) 16%, transparent);
}

.onboarding-option.selected .option-check {
  border-color: var(--option-tone);
  color: white;
  background: var(--option-tone);
  box-shadow: 0 4px 9px color-mix(in srgb, var(--option-tone) 28%, transparent);
}

.onboarding-footer {
  padding: 12px 20px 18px;
  border-top: 1px solid rgba(16, 66, 143, 0.08);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 -8px 24px rgba(34, 56, 111, 0.035);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.onboarding-primary {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: white;
  font-size: 16px;
  font-weight: 620;
  transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.onboarding-primary .svg-icon {
  width: 19px;
  height: 19px;
}

.onboarding-primary:disabled {
  cursor: not-allowed;
  border-color: #edb8be;
  background: #eaa2aa;
  opacity: 0.78;
  box-shadow: none;
}

.summary-intro {
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.summary-intro img {
  width: 82px;
  height: 92px;
  border-radius: 14px;
  object-fit: cover;
  object-position: center 15%;
  background: var(--bleu-soft);
}

.summary-intro p {
  margin-bottom: 5px;
  color: var(--bleu);
  font-size: 13px;
  font-weight: 610;
}

.summary-intro h1 {
  margin: 0;
  font-size: 29px;
}

.plan-summary {
  border-top: 1px solid var(--border);
}

.plan-summary > div {
  min-height: 66px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.plan-summary span {
  color: var(--muted);
  font-size: 12px;
}

.plan-summary strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.summary-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.lesson-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  background: white;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.lesson-layer.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.lesson-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #f5f7fb;
}

/* Free lessons add the Plus strip between the header and scroll area. Give it
   a real grid track so it cannot consume the content row or cover the lesson. */
.lesson-shell.has-plus-bar {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.lesson-header {
  min-height: 117px;
  padding: 12px 20px 10px;
  position: relative;
  border-bottom: 1px solid rgba(211, 220, 232, 0.82);
  background: rgba(255, 255, 255, 0.96);
}

.lesson-topline {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
}

.lesson-context {
  min-width: 0;
}

.lesson-context > span,
.lesson-context > strong {
  display: block;
}

.lesson-context > span {
  margin-bottom: 2px;
  color: var(--bleu);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lesson-context > strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 690;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-step-count {
  justify-self: end;
  color: var(--bleu);
  font-size: 18px;
  font-weight: 760;
}

.lesson-step-count small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.lesson-close {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #fff;
}

.lesson-stage-rail {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.lesson-stage-rail > span {
  --stage: var(--blue);
  --stage-soft: #e6eefc;
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  color: var(--stage);
}

.lesson-stage-rail > span.stage-tone-blue { --stage: var(--blue); --stage-soft: #e6eefc; }
.lesson-stage-rail > span.stage-tone-violet { --stage: #7055b7; --stage-soft: #eeeafd; }
.lesson-stage-rail > span.stage-tone-green { --stage: var(--green); --stage-soft: #e4f5ec; }
.lesson-stage-rail > span.stage-tone-coral { --stage: #be4353; --stage-soft: #fce8eb; }
.lesson-stage-rail > span.stage-tone-gold { --stage: var(--gold); --stage-soft: #fff2d8; }

.lesson-stage-rail i {
  width: 18px;
  height: 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--stage-soft);
}

.lesson-stage-rail i .svg-icon {
  width: 11px;
  height: 11px;
}

.lesson-stage-rail b {
  overflow: hidden;
  font-size: 9px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-stage-rail > span.active { color: var(--stage); }
.lesson-stage-rail > span.complete { color: var(--green); }

.lesson-stage-rail > span.active i {
  border-color: var(--stage);
  color: white;
  background: var(--stage);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--stage) 30%, transparent);
}

.lesson-stage-rail > span.complete i {
  border-color: #a9d9c2;
  color: white;
  background: var(--green);
}

.lesson-progress {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ebf0;
}

.lesson-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bleu);
  transition: width 260ms ease;
}

.lesson-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cdd7dc transparent;
}

.lesson-content {
  padding: 24px 20px 22px;
  animation: view-enter 220ms ease both;
}

.lesson-content h1 {
  margin-bottom: 9px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
}

.lesson-content > p {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}

.lesson-scene-frame {
  height: 212px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(21, 47, 89, 0.1);
  border-radius: 16px;
  background: #e8edf4;
  box-shadow: 0 14px 30px rgba(20, 56, 70, 0.13);
}

.lesson-scene-frame.text-only {
  height: auto;
  min-height: 0;
  overflow: visible;
  border-color: rgba(16, 66, 143, 0.14);
  background: linear-gradient(135deg, #f9fbff, #edf3fd);
  box-shadow: none;
}

.lesson-scene {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 62%;
}

.lesson-visual-slot {
  height: 100%;
  padding: 18px;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  color: #173056;
  background: linear-gradient(135deg, #edf5ff 0%, #f7fbff 48%, #eef8f5 100%);
}

.visual-slot-art {
  height: 104px;
  border: 1px solid rgba(41, 93, 169, 0.14);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #2f62b5;
  background: linear-gradient(158deg, #d8e8fd, #c8e0e8 52%, #dff0e7);
}

.visual-slot-art::before,
.visual-slot-art::after,
.visual-slot-art b,
.visual-slot-art em {
  position: absolute;
  content: '';
  display: block;
}

.visual-slot-art::before { width: 68px; height: 68px; right: -25px; bottom: -34px; border-radius: 50%; background: rgba(255, 255, 255, 0.54); }
.visual-slot-art::after { width: 48px; height: 4px; left: 13px; bottom: 20px; border-radius: 99px; background: rgba(33, 92, 134, 0.24); }
.visual-slot-art b { width: 32px; height: 27px; left: 19px; bottom: 24px; border-radius: 10px 10px 4px 4px; background: rgba(28, 101, 132, 0.31); }
.visual-slot-art em { width: 24px; height: 31px; right: 18px; bottom: 24px; border-radius: 12px 12px 4px 4px; background: rgba(220, 88, 101, 0.32); }
.visual-slot-art > i { width: 32px; height: 32px; z-index: 1; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.86); box-shadow: 0 5px 13px rgba(41, 88, 143, 0.14); }
.visual-slot-art .svg-icon { width: 17px; height: 17px; }

.visual-slot-copy span,
.visual-slot-copy strong,
.visual-slot-copy small { display: block; }
.visual-slot-copy span { margin-bottom: 5px; color: var(--bleu); font-size: 10px; font-weight: 760; letter-spacing: 0.05em; text-transform: uppercase; }
.visual-slot-copy strong { margin-bottom: 5px; color: var(--ink); font-size: 17px; line-height: 1.15; }
.visual-slot-copy small { color: var(--muted); font-size: 11px; line-height: 1.42; }

.lesson-subtopics {
  margin: 0 0 18px;
}

.lesson-subtopic-heading {
  margin: 0 0 9px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.lesson-subtopic-heading > span {
  color: var(--bleu);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.lesson-subtopic-heading > small {
  color: var(--muted);
  font-size: 10px;
}

.subtopic-list {
  display: grid;
  gap: 8px;
}

.subtopic-card {
  --scene: var(--blue);
  --scene-soft: #e6eefc;
  --scene-border: rgba(58, 99, 196, 0.15);
  --scene-shape: rgba(58, 99, 196, 0.28);
  min-height: 74px;
  padding: 8px;
  border: 1px solid var(--scene-border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 57px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--scene-soft) 44%, #ffffff));
}

.subtopic-card.subtopic-tone-blue { --scene: var(--blue); --scene-soft: #e6eefc; --scene-border: rgba(58, 99, 196, 0.15); --scene-shape: rgba(58, 99, 196, 0.28); }
.subtopic-card.subtopic-tone-violet { --scene: #7055b7; --scene-soft: #eeeafd; --scene-border: rgba(112, 85, 183, 0.15); --scene-shape: rgba(112, 85, 183, 0.28); }
.subtopic-card.subtopic-tone-green { --scene: var(--green); --scene-soft: #e4f5ec; --scene-border: rgba(31, 122, 85, 0.16); --scene-shape: rgba(31, 122, 85, 0.28); }

.subtopic-card.has-illustration {
  min-height: 82px;
  grid-template-columns: 70px minmax(0, 1fr);
}

.subtopic-scene {
  height: 56px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--scene);
  background: linear-gradient(155deg, color-mix(in srgb, var(--scene-soft) 84%, #ffffff), var(--scene-soft));
}

.subtopic-scene::before,
.subtopic-scene::after,
.subtopic-scene b,
.subtopic-scene em { position: absolute; content: ''; display: block; }
.subtopic-scene::before { width: 40px; height: 40px; right: -15px; bottom: -18px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.subtopic-scene::after { width: 30px; height: 3px; left: 8px; bottom: 10px; border-radius: 99px; background: var(--scene-shape); }
.subtopic-scene b { width: 16px; height: 14px; left: 11px; bottom: 13px; border-radius: 6px 6px 2px 2px; background: var(--scene-shape); }
.subtopic-scene em { width: 13px; height: 18px; right: 11px; bottom: 13px; border-radius: 8px 8px 2px 2px; background: var(--scene-shape); }
.subtopic-scene > i { width: 25px; height: 25px; z-index: 1; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.88); }
.subtopic-scene .svg-icon { width: 14px; height: 14px; }
.subtopic-scene.has-illustration { height: 64px; background: var(--scene-soft); }
.subtopic-scene.has-illustration::before,
.subtopic-scene.has-illustration::after { display: none; }
.subtopic-scene.has-illustration img { width: 100%; height: 100%; display: block; object-fit: cover; }
.subtopic-card span,
.subtopic-card strong,
.subtopic-card small { display: block; }
.subtopic-card span { margin-bottom: 2px; color: var(--scene); font-size: 9px; font-weight: 730; letter-spacing: 0.045em; text-transform: uppercase; }
.subtopic-card strong { margin-bottom: 2px; color: var(--ink); font-size: 13px; }
.subtopic-card small { color: var(--muted); font-size: 10px; line-height: 1.35; }

.production-checklist {
  margin: 0 0 14px;
  display: grid;
  gap: 7px;
}

.production-checklist span {
  padding: 9px 10px;
  border: 1px solid rgba(31, 122, 85, 0.16);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #285b4e;
  background: #f1faf5;
  font-size: 11px;
  line-height: 1.35;
}

.production-checklist .svg-icon { width: 15px; height: 15px; color: var(--green); }

.lesson-writing { display: grid; gap: 7px; }
.lesson-writing > span { color: var(--ink); font-size: 12px; font-weight: 720; }
.lesson-writing textarea { width: 100%; resize: vertical; border: 1px solid #cdd9e7; border-radius: 12px; padding: 12px; color: var(--ink); background: #fff; font: inherit; font-size: 14px; line-height: 1.45; outline: none; }
.lesson-writing textarea:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(16, 66, 143, 0.12); }
.production-model { margin-top: 15px; border-top: 1px solid var(--border); padding-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.production-model summary { color: var(--bleu); cursor: pointer; font-weight: 700; }
.production-model p { margin: 9px 0 0; padding: 10px; border-left: 3px solid var(--gold); background: #fffaf0; }

.lesson-scene-label {
  position: absolute;
  left: 11px;
  bottom: 11px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 8px;
  color: #152d59;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 3px 10px rgba(9, 28, 60, 0.16);
  font-size: 10px;
  font-weight: 740;
}

.lesson-kicker {
  margin-bottom: 7px;
  display: block;
  color: var(--rouge-deep);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lesson-video {
  background: #10182b;
}

.lesson-goal {
  margin: 4px 0 21px;
  padding: 13px;
  border: 1px solid rgba(16, 66, 143, 0.15);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  color: var(--bleu);
  background: linear-gradient(135deg, #f8fbff, #eef4ff);
}

.lesson-goal > span,
.lesson-goal strong,
.lesson-goal small {
  display: block;
}

.lesson-goal strong {
  margin-bottom: 3px;
  font-size: 12px;
}

.lesson-goal small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.lesson-stage-lead {
  margin-bottom: 19px;
}

.lesson-stage-lead > span {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--bleu);
  font-size: 11px;
  font-weight: 730;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.lesson-stage-lead > span > i {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--bleu);
  background: #e6eefc;
}

.lesson-stage-lead > span .svg-icon {
  width: 14px;
  height: 14px;
}

.lesson-stage-lead h1,
.lesson-stage-lead p {
  margin: 0;
}

.lesson-stage-lead h1 {
  margin-bottom: 8px;
}

.lesson-stage-lead p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}

.dialogue-list,
.vocabulary-list {
  display: grid;
  gap: 10px;
}

.dialogue-row {
  min-height: 90px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 11px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(20, 44, 76, 0.045);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.dialogue-row.playing,
.vocabulary-row.playing {
  border-color: var(--bleu);
  background: #f3fbfa;
}

.dialogue-row img,
.learner-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.dialogue-row img {
  object-fit: cover;
  object-position: center 16%;
}

.learner-avatar {
  display: grid;
  place-items: center;
  color: var(--bleu);
  background: var(--bleu-soft);
  font-size: 12px;
  font-weight: 620;
}

.dialogue-copy {
  min-width: 0;
}

.dialogue-copy span,
.dialogue-copy strong,
.dialogue-copy small {
  display: block;
}

.dialogue-copy span {
  margin-bottom: 4px;
  color: var(--bleu);
  font-size: 11px;
  font-weight: 610;
}

.dialogue-copy strong {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.3;
}

.dialogue-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.listen-button {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--bleu);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--bleu);
  background: white;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.playing .listen-button {
  color: white;
  background: var(--bleu);
}

.listen-button .svg-icon {
  width: 19px;
  height: 19px;
}

.audio-notice {
  margin: 10px 0 0 !important;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  color: var(--muted) !important;
  background: #fffaf0;
  font-size: 12px !important;
}

/* Full narration stays inside the lesson rather than becoming a disconnected
   media screen. It keeps the tricolore lesson language while giving learners
   the controls they need during a commute or a short study session. */
.lesson-narration {
  margin: -4px 0 19px;
  padding: 13px;
  border: 1px solid rgba(16, 66, 143, 0.17);
  border-radius: 15px;
  background: linear-gradient(135deg, #ffffff, #eef4ff 68%, #f8fbff);
  box-shadow: 0 10px 22px rgba(25, 61, 118, 0.07);
}

.lesson-narration.is-playing {
  border-color: rgba(47, 98, 181, 0.44);
  box-shadow: 0 12px 26px rgba(47, 98, 181, 0.14);
}

.lesson-narration-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.narration-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.narration-icon.tone-blue {
  color: var(--bleu);
  background: linear-gradient(160deg, #dce8ff, #c6d8fb);
}

.narration-icon .svg-icon { width: 18px; height: 18px; }
.lesson-narration-head > span { min-width: 0; }
.lesson-narration-head strong,
.lesson-narration-head small { display: block; }
.lesson-narration-head strong { color: var(--ink); font-size: 13px; line-height: 1.2; }
.lesson-narration-head small { margin-top: 3px; color: var(--muted); font-size: 10.5px; line-height: 1.3; }

.narration-speed select {
  min-width: 57px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(16, 66, 143, 0.2);
  border-radius: 9px;
  color: var(--bleu);
  background: rgba(255, 255, 255, 0.8);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.lesson-narration-controls {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 38px 44px 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.narration-toggle,
.narration-skip,
.narration-lock {
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.narration-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--bleu);
  border-radius: 50%;
  color: white;
  background: linear-gradient(160deg, #315fb1, var(--bleu));
  box-shadow: 0 8px 16px rgba(16, 66, 143, 0.24);
}

.narration-toggle .svg-icon { width: 19px; height: 19px; }
.narration-toggle:disabled { cursor: wait; opacity: 0.65; }

.narration-skip {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 11px;
  grid-template-columns: 14px 12px;
  gap: 0;
  color: var(--bleu);
  background: rgba(255, 255, 255, 0.72);
}

.narration-skip .svg-icon { width: 14px; height: 14px; }
.narration-skip small { font-size: 9px; font-weight: 760; }
.narration-skip:disabled { cursor: default; opacity: 0.38; }

.narration-timeline { min-width: 0; }
.narration-timeline input { width: 100%; margin: 0; accent-color: var(--bleu); }
.narration-timeline input:disabled { opacity: 0.45; }
.narration-timeline div { margin-top: 3px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }

.narration-options {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.narration-options > small {
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.2;
  text-align: right;
}

.narration-ambient {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  cursor: pointer;
  font-size: 10.5px;
  white-space: nowrap;
}

.narration-ambient input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.narration-ambient > span {
  width: 29px;
  height: 17px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #b8c3d7;
  box-shadow: inset 0 0 0 1px rgba(16, 66, 143, 0.08);
  transition: background 160ms ease;
}

.narration-ambient > span::after {
  width: 13px;
  height: 13px;
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(12, 33, 70, 0.24);
  transition: transform 160ms ease;
}

.narration-ambient input:checked + span { background: #2f8f74; }
.narration-ambient input:checked + span::after { transform: translateX(12px); }
.narration-ambient input:focus-visible + span { outline: 2px solid var(--bleu); outline-offset: 2px; }
.narration-ambient b { font: inherit; font-weight: 720; }

.lesson-narration-locked {
  min-height: 66px;
  margin-bottom: 19px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #f8fbff, #eef3fb);
  box-shadow: none;
}

.lesson-narration-locked > span { min-width: 0; }
.lesson-narration-locked strong,
.lesson-narration-locked small { display: block; }
.lesson-narration-locked strong { color: var(--ink); font-size: 13px; }
.lesson-narration-locked small { margin-top: 3px; color: var(--muted); font-size: 10.5px; }

.narration-lock {
  width: 34px;
  height: 34px;
  border: 1px dashed rgba(16, 66, 143, 0.3);
  border-radius: 10px;
  color: var(--bleu);
  background: white;
}

.narration-lock .svg-icon { width: 16px; height: 16px; }

@media (max-width: 420px) {
  .lesson-narration-controls { grid-template-columns: 34px 42px 34px minmax(0, 1fr); gap: 6px; }
  .narration-skip { width: 34px; height: 34px; }
  .narration-toggle { width: 42px; height: 42px; }
}

.vocabulary-row {
  min-height: 76px;
  padding: 10px 11px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 11px;
}

.vocabulary-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(20, 44, 76, 0.05);
}

.vocabulary-row:last-child {
  border-bottom: 0;
}

.phrase-number {
  color: var(--bleu);
  font-size: 11px;
  font-weight: 620;
}

.vocabulary-row strong,
.vocabulary-row small {
  display: block;
}

.vocabulary-row strong {
  margin-bottom: 4px;
  font-size: 17px;
}

.vocabulary-row small {
  color: var(--muted);
  font-size: 12px;
}

.camille-note {
  margin-top: 20px;
  padding: 12px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  background: #eef2fc;
}

.camille-note img {
  width: 48px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  object-position: center 15%;
}

.camille-note p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.camille-note strong {
  margin-bottom: 3px;
  display: block;
  color: var(--bleu);
}

.practice-prompt {
  margin-bottom: 18px !important;
  padding: 13px 14px;
  border: 1px solid rgba(143, 93, 6, 0.18);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  background: #fffbf3;
  color: var(--ink) !important;
  font-size: 15px !important;
  line-height: 1.4;
}

.practice-prompt strong {
  color: var(--bleu);
  font-size: 11px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.sentence-answer {
  min-height: 120px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  background: #fbfcff;
}

.sentence-answer > span {
  align-self: center;
  margin: auto;
  /* #858b99 was 3.24:1 on this panel — below AA for 13px text. */
  color: #5f6780;
  font-size: 13px;
}

.sentence-answer > button,
.word-bank > button {
  min-height: 43px;
  padding: 0 13px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
}

.sentence-answer > button {
  border: 1px solid var(--bleu);
  color: var(--bleu-deep);
  background: var(--bleu-soft);
}

.sentence-answer.correct {
  border-color: var(--green);
  background: #f5fbf6;
}

.sentence-answer.wrong {
  border-color: var(--rouge);
  background: #fdf2f4;
}

.word-bank {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.word-bank > button {
  border: 1px solid #ccd5dc;
  color: var(--ink);
  background: white;
}

.word-bank > button:disabled {
  opacity: 0.28;
  cursor: default;
}

.reset-words {
  margin-top: 14px;
  padding: 4px 0;
  border: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--bleu);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}

.answer-feedback {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 4px solid;
  display: grid;
  gap: 3px;
  font-size: 13px;
}

.answer-feedback strong,
.answer-feedback span {
  display: block;
}

.answer-feedback span {
  color: var(--muted);
  line-height: 1.4;
}

.answer-feedback.correct {
  border-color: var(--green);
  color: var(--green);
  background: #f1faf3;
}

.answer-feedback.wrong {
  border-color: var(--rouge);
  color: var(--rouge-deep);
  background: #fdf1f3;
}

.quiz-options {
  display: grid;
  gap: 10px;
}

.quiz-options button {
  width: 100%;
  min-height: 60px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 24px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  background: white;
  font-size: 15px;
  font-weight: 560;
}

.quiz-option-letter {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #58627a;
  background: #f0f3f8;
  font-size: 11px;
  font-weight: 750;
}

.quiz-options i {
  width: 24px;
  height: 24px;
  border: 1px solid #ced7ea;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: transparent;
  font-style: normal;
}

.quiz-options i .svg-icon {
  width: 14px;
  height: 14px;
}

.quiz-options button.selected {
  border-color: var(--bleu);
  background: #f0f3fd;
}

.quiz-options button.selected .quiz-option-letter {
  color: white;
  background: var(--bleu);
}

.quiz-options button.selected i {
  border-color: var(--bleu);
  color: white;
  background: var(--bleu);
}

.lesson-complete {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.completion-portrait {
  width: 142px;
  height: 154px;
  margin-bottom: 20px;
  position: relative;
}

.completion-portrait img {
  width: 100%;
  height: 100%;
  border: 1px solid #cfe7e5;
  border-radius: 50% 50% 8px 8px;
  object-fit: cover;
  object-position: center 15%;
  background: var(--bleu-soft);
}

.completion-portrait > span {
  position: absolute;
  right: -5px;
  bottom: 4px;
  width: 38px;
  height: 38px;
  border: 4px solid white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: var(--green);
}

.lesson-complete > p {
  margin-bottom: 7px;
  color: var(--bleu);
  font-size: 13px;
  font-weight: 620;
}

.lesson-complete h1 {
  margin-bottom: 10px;
}

.completion-copy {
  max-width: 330px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.completion-list {
  width: 100%;
  margin-top: 26px;
  border-top: 1px solid var(--border);
}

.completion-list > div {
  min-height: 62px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--bleu);
  text-align: left;
}

.completion-list strong,
.completion-list small {
  display: block;
}

.completion-list strong {
  color: var(--ink);
  font-size: 14px;
}

.completion-list small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.lesson-footer {
  padding: 12px 20px 18px;
  border-top: 1px solid rgba(225, 231, 238, 0.85);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -8px 20px rgba(29, 48, 75, 0.04);
}

.lesson-footer.single {
  grid-template-columns: 1fr;
}

.lesson-back {
  width: 48px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: white;
}

.lesson-primary {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  font-size: 16px;
  font-weight: 620;
  transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.lesson-primary:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

/* Section pages share the hero's voice, one size quieter: these are working
   screens, so the title guides rather than shouts and the muted subtitle
   does the explaining. */
.page-title h1 {
  margin-bottom: 5px;
  font-size: 25px;
  font-weight: 680;
  letter-spacing: -0.024em;
}

.page-title p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.module-list,
.plan-list {
  display: grid;
  gap: 11px;
}

.module-row {
  padding: 15px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  box-shadow: 0 5px 14px rgba(59, 72, 130, 0.04);
}

.module-badge {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--module-ink);
  background: linear-gradient(160deg, color-mix(in srgb, var(--module-soft) 80%, white), var(--module-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  font-weight: 620;
}

.module-badge .svg-icon { width: 23px; height: 23px; }

.module-row p {
  margin-bottom: 3px;
  color: var(--bleu);
  font-size: 12px;
  font-weight: 610;
}

.module-row h2,
.test-row h2 {
  margin-bottom: 4px;
  font-size: 18px;
}


.course-hero {
  min-height: 132px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 19px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: end;
  gap: 12px;
  color: #fff;
  background: linear-gradient(135deg, #0d367e 0%, #174f9a 48%, #b03b5b 135%);
  box-shadow: 0 16px 31px rgba(19, 55, 119, 0.24);
}

.course-hero::before,
.course-hero::after { content: ''; position: absolute; display: block; border-radius: 50%; pointer-events: none; }
.course-hero::before { width: 165px; height: 165px; top: -102px; right: -32px; border: 22px solid rgba(255,255,255,0.11); }
.course-hero::after { width: 86px; height: 86px; right: 40px; bottom: -63px; background: rgba(255,255,255,0.09); }
.course-hero > div { position: relative; z-index: 1; }
.course-hero span { display: block; margin-bottom: 7px; color: rgba(255,255,255,0.78); font-size: 10px; font-weight: 760; letter-spacing: 0.06em; text-transform: uppercase; }
.course-hero h1 { margin: 0 0 7px; color: #ffffff; font-size: 27px; font-weight: 640; letter-spacing: -0.02em; line-height: 1.05; }
.course-hero p { margin: 0; max-width: 250px; color: rgba(255,255,255,0.86); font-size: 12px; line-height: 1.42; }
.course-hero > i { width: 56px; height: 56px; z-index: 1; border: 1px solid rgba(255,255,255,0.35); border-radius: 17px; display: grid; place-items: center; color: white; background: rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.24); }
.course-hero > i .svg-icon { width: 29px; height: 29px; }

.roadmap-summary {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 94px;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--glass-tint-strong), var(--glass-tint));
  box-shadow: var(--glass-edge), var(--glass-lift);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.roadmap-summary > div > span,
.roadmap-summary > div > strong {
  display: block;
}

.roadmap-summary > div > span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
}

.roadmap-summary > div > strong {
  color: var(--bleu);
  font-size: 20px;
  line-height: 1;
}

.roadmap-summary > i {
  color: #a5aeba;
}

.roadmap-summary > i .svg-icon {
  width: 19px;
  height: 19px;
}

.roadmap-summary .roadmap-count {
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.roadmap-summary .roadmap-count strong {
  margin-bottom: 3px;
  font-size: 16px;
}

.roadmap-summary .roadmap-count strong b { padding: 0 1px; color: #a6b0c1; font-weight: 600; }

.roadmap-summary .roadmap-count span {
  margin: 0;
  line-height: 1.25;
}

.roadmap-summary > .progress-bar {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.roadmap-module {
  --module-ink: var(--bleu);
  --module-soft: #e8f0ff;
  --module-wash: #f6f9ff;
  border: 1px solid rgba(30, 60, 116, 0.1);
  border-radius: 17px;
  overflow: hidden;
  background: white;
  box-shadow: 0 8px 18px rgba(28, 49, 97, 0.045);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.roadmap-module.open { box-shadow: 0 15px 30px rgba(28, 49, 97, 0.1); }
.roadmap-module.theme-blue { --module-ink: #1d58ae; --module-soft: #dde9ff; --module-wash: #f4f8ff; }
.roadmap-module.theme-coral { --module-ink: #ba4459; --module-soft: #fce0e3; --module-wash: #fff6f6; }
.roadmap-module.theme-green { --module-ink: #19765c; --module-soft: #d9f0e5; --module-wash: #f3fbf7; }
.roadmap-module.theme-gold { --module-ink: #95660c; --module-soft: #f8eac9; --module-wash: #fffaf0; }
.roadmap-module.theme-violet { --module-ink: #6845ae; --module-soft: #e9ddfa; --module-wash: #faf7ff; }
.roadmap-module.theme-teal { --module-ink: #087d7e; --module-soft: #d6f1ef; --module-wash: #f2fbfb; }
.roadmap-module.theme-rouge { --module-ink: #b53e4b; --module-soft: #f7dde0; --module-wash: #fff6f7; }

.roadmap-module-header {
  width: 100%;
  min-height: 78px;
  padding: 11px 13px;
  border: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 55px;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-align: left;
  background: linear-gradient(135deg, #fff, var(--module-wash));
}

.roadmap-module.open .roadmap-module-header { background: linear-gradient(135deg, var(--module-wash), #fff); }

.module-copy strong,
.module-copy small,
.module-copy em {
  display: block;
}

.module-copy small {
  margin-bottom: 3px;
  color: var(--module-ink);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.module-copy strong {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.15;
}

.module-copy em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.module-copy em b { color: var(--module-ink); font-weight: 750; }
.module-header-end { display: grid; justify-items: end; gap: 4px; }
.module-header-end > i { color: var(--module-ink); font-size: 9px; font-style: normal; font-weight: 720; }
.module-header-end > .svg-icon { width: 18px; height: 18px; color: var(--module-ink); }

.roadmap-module-header > .svg-icon:last-child,
.future-module > button > .svg-icon:last-child {
  width: 19px;
  height: 19px;
  color: var(--bleu);
}

.learning-path {
  padding: 6px 11px 12px;
  position: relative;
  background: linear-gradient(180deg, var(--module-wash), #fff 72%);
}

.learning-path::before {
  content: "";
  width: 2px;
  position: absolute;
  top: 33px;
  bottom: 42px;
  left: 29px;
  background: color-mix(in srgb, var(--module-ink) 28%, white);
}

.path-row {
  min-height: 84px;
  padding: 8px 7px;
  border-top: 1px solid rgba(225, 231, 238, 0.7);
  display: grid;
  grid-template-columns: 36px 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  position: relative;
}

.path-row.current {
  border-top-color: transparent;
  border-radius: 14px;
  background: var(--module-soft);
}

.path-marker {
  width: 36px;
  height: 36px;
  border: 2px solid #aab5c1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 1;
  color: var(--muted);
  background: white;
  font-size: 12px;
  font-weight: 620;
}

.path-row.completed .path-marker {
  border-color: var(--module-ink);
  color: white;
  background: var(--module-ink);
}

.path-row.current .path-marker,
.path-row.checkpoint .path-marker {
  border-color: var(--module-ink);
  color: var(--module-ink);
}

.path-marker .svg-icon {
  width: 17px;
  height: 17px;
}

.path-row > img,
.path-visual {
  width: 64px;
  height: 58px;
  border-radius: 6px;
  display: block;
}

.path-row > img {
  border: 1px solid rgba(11, 21, 51, 0.06);
  object-fit: cover;
}

.path-row:nth-child(1) > img {
  object-position: 55% center;
}

.path-visual {
  display: grid;
  place-items: center;
  color: #8e97b0;
  background: #f1f4f6;
}

.path-visual .svg-icon {
  width: 24px;
  height: 24px;
}

.path-row > div > strong,
.path-row > div > small {
  display: block;
}

.path-row > div > strong {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.25;
}

.path-row > div > small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.path-row.completed > div > small,
.path-row.current > div > small,
.path-row.checkpoint > div > small {
  color: var(--module-ink);
  font-weight: 590;
}

.path-row > button {
  min-width: 52px;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid var(--bleu);
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--bleu);
  background: white;
  font-size: 10px;
  font-weight: 620;
}

.path-row.current > button:not(:disabled) {
  border-color: var(--module-ink);
  color: white;
  background: var(--module-ink);
  box-shadow: 0 7px 15px color-mix(in srgb, var(--module-ink) 24%, transparent);
}

.path-row > button:disabled {
  min-width: 40px;
  border-color: #cfd7df;
  color: #8e97b0;
  background: #f6f8fd;
  cursor: not-allowed;
}

.path-row > button .svg-icon {
  width: 16px;
  height: 16px;
}

.future-modules {
  display: grid;
  gap: 8px;
}

.future-module {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: white;
}

.future-module > button {
  width: 100%;
  min-height: 60px;
  padding: 9px 12px;
  border: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-align: left;
  background: white;
}

.module-lock {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #7e8999;
  background: #f0f3f5;
}

.module-lock .svg-icon {
  width: 17px;
  height: 17px;
}

.future-module > button > span:nth-child(2) {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.future-module > button strong {
  font-size: 14px;
}

.future-module > button small {
  color: var(--muted);
  font-size: 10px;
}

.module-preview {
  padding: 2px 14px 14px 72px;
  background: linear-gradient(180deg, var(--module-wash), #fff);
}

.module-preview p {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.module-preview > small { display: block; margin-top: 9px; color: var(--module-ink); font-size: 10px; font-weight: 620; }
.module-preview-lessons { margin-top: 10px; display: grid; gap: 5px; }
.module-preview-lessons span { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 10px; }
.module-preview-lessons b { width: 19px; height: 19px; border-radius: 7px; display: grid; place-items: center; color: var(--module-ink); background: var(--module-soft); font-size: 8px; }
.module-preview > em { margin-top: 8px; display: block; color: var(--module-ink); font-size: 10px; font-style: normal; font-weight: 720; }

.module-row span,
.test-row p,
.correction-card span,
.profile-panel p,
.plan-list p {
  color: var(--muted);
  line-height: 1.4;
}

.voice-room {
  min-height: 326px;
  padding: 26px 20px;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  /* The conversation stage gets the ambient-wash treatment: a soft blue-rose
     halo behind the instructor instead of a flat tinted box. */
  background:
    radial-gradient(85% 60% at 50% 0%, rgba(163, 181, 243, 0.35), transparent 65%),
    radial-gradient(70% 45% at 88% 100%, rgba(243, 182, 196, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 243, 253, 0.8));
}

.large-avatar {
  width: 112px;
  height: 112px;
  margin-bottom: 16px;
  border: 4px solid white;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  box-shadow: 0 12px 28px rgba(18, 55, 67, 0.16);
}

.voice-room h2,
.test-visual h2,
.profile-panel h2 {
  margin-bottom: 7px;
}

.voice-room p {
  margin-bottom: 20px;
  color: var(--muted);
}

.talk-room {
  display: grid;
  gap: 13px;
}

.assist-control {
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 10px;
  background: white;
}

.assist-control.enabled {
  border-color: rgba(16, 66, 143, 0.35);
  background: #f0f3fd;
}

.assist-control > img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  object-position: center 18%;
}

.assist-control > .svg-icon {
  width: 30px;
  height: 30px;
  color: var(--bleu);
}

.assist-control strong,
.assist-control small {
  display: block;
}

.assist-control strong {
  margin-bottom: 2px;
  font-size: 13px;
}

.assist-control small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.assist-control > button {
  width: 46px;
  height: 27px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  background: #ced7ea;
  transition: background 160ms ease;
}

.assist-control > button i {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: block;
  background: white;
  box-shadow: 0 2px 6px rgba(11, 21, 51, 0.18);
  transform: translateX(0);
  transition: transform 160ms ease;
}

.assist-control.enabled > button {
  background: var(--bleu);
}

.assist-control.enabled > button i {
  transform: translateX(19px);
}

.profile-assist {
  margin-top: 2px;
}

.practice-modes {
  height: 46px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  background: #f4f7f8;
}

.practice-modes button {
  min-width: 0;
  padding: 0 5px;
  border: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 620;
}

.practice-modes button .svg-icon {
  width: 16px;
  height: 16px;
}

.practice-modes button.active {
  color: var(--bleu);
  background: white;
  box-shadow: 0 3px 9px rgba(18, 55, 67, 0.1);
}

.live-ai-control {
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: white;
}

.live-ai-control.connected {
  border-color: rgba(16, 66, 143, 0.42);
  background: #f0f3fd;
}

.live-ai-status {
  min-width: 0;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  column-gap: 7px;
}

.live-ai-status > i {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  grid-row: 1 / span 2;
  background: #aab6be;
}

.connected .live-ai-status > i {
  background: #20a959;
  box-shadow: 0 0 0 4px rgba(32, 169, 89, 0.12);
}

.live-ai-status strong,
.live-ai-status small {
  display: block;
}

.live-ai-status strong {
  color: var(--ink);
  font-size: 12px;
}

.live-ai-status small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.live-ai-control > button {
  min-height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  color: white;
  background: var(--bleu);
  font-size: 11px;
  font-weight: 620;
}

.live-ai-control.connected > button {
  color: var(--ink);
  background: #e1e8ea;
}

.live-ai-control > button:disabled {
  opacity: 0.55;
}

.realtime-notice {
  margin: -2px 0 0;
  padding: 9px 11px;
  border-left: 3px solid var(--rouge);
  color: #6f302d;
  background: #fdf1f3;
  font-size: 11px;
  line-height: 1.35;
}

.avatar-stage {
  width: 100%;
  height: 292px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #edf5f4;
  box-shadow: 0 14px 28px rgba(18, 55, 67, 0.12);
}

.avatar-stage > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 23%;
  transform: scale(1.02);
  transition: transform 400ms ease;
}

.avatar-stage.speaking > img {
  animation: instructor-presence 2.2s ease-in-out infinite;
}

.avatar-stage.listening {
  border-color: rgba(16, 66, 143, 0.55);
  box-shadow: 0 14px 30px rgba(16, 66, 143, 0.16);
}

.avatar-status {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(225, 231, 238, 0.9);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: absolute;
  top: 12px;
  left: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 14px rgba(11, 21, 51, 0.1);
  font-size: 11px;
  font-weight: 620;
}

.avatar-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20a959;
}

.avatar-stage.speaking .avatar-status i {
  background: var(--bleu);
  animation: status-pulse 1.2s ease-in-out infinite;
}

.avatar-stage.listening .avatar-status i {
  background: var(--rouge);
  animation: status-pulse 1.1s ease-in-out infinite;
}

.speech-wave {
  height: 50px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  pointer-events: none;
}

.speech-wave i {
  width: 3px;
  height: 8px;
  border-radius: 999px;
  display: block;
  opacity: 0.38;
  background: white;
  box-shadow: 0 1px 5px rgba(11, 21, 51, 0.28);
}

.speech-wave i:nth-child(3n) {
  height: 24px;
}

.speech-wave i:nth-child(4n) {
  height: 34px;
}

.speech-wave i:nth-child(5n) {
  height: 17px;
}

.avatar-stage.speaking .speech-wave i,
.avatar-stage.listening .speech-wave i {
  opacity: 0.95;
  animation: talk-wave 760ms ease-in-out infinite alternate;
  animation-delay: calc(var(--bar) * -45ms);
}

.hear-instructor {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: absolute;
  right: 10px;
  bottom: 58px;
  color: white;
  background: rgba(11, 21, 51, 0.78);
  font-size: 11px;
  font-weight: 620;
}

.hear-instructor .svg-icon {
  width: 16px;
  height: 16px;
}

.instructor-message {
  padding: 2px 2px 13px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.instructor-message img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  object-position: center 18%;
}

.instructor-message strong,
.instructor-message p,
.instructor-message small {
  display: block;
}

.instructor-message strong {
  margin-bottom: 3px;
  color: var(--bleu);
  font-size: 12px;
}

.instructor-message p {
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
}

.instructor-message small {
  color: var(--muted);
  font-size: 11px;
}

.practice-callout {
  text-align: center;
}

.practice-callout span,
.practice-callout strong {
  display: block;
}

.practice-callout span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 590;
}

.practice-callout strong {
  color: var(--bleu);
  font-size: 16px;
  line-height: 1.3;
}

.talk-controls {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.talk-controls > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 590;
}

.live-transcript {
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f7f9fd;
}

.live-transcript span {
  margin-bottom: 3px;
  display: block;
  color: var(--bleu);
  font-size: 10px;
  font-weight: 620;
  text-transform: uppercase;
}

.live-transcript p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.live-transcript.has-text {
  border-color: rgba(16, 66, 143, 0.42);
  background: #f0f3fd;
}

.live-transcript.has-text p {
  color: var(--ink);
  font-weight: 560;
}

.writing-practice {
  display: grid;
  gap: 7px;
}

.writing-practice label {
  color: var(--bleu);
  font-size: 11px;
  font-weight: 620;
}

.writing-practice textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--ink);
  background: #f7f9fd;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.writing-practice textarea:focus {
  border-color: var(--bleu);
  outline: 3px solid rgba(16, 66, 143, 0.12);
}

.writing-practice button {
  height: 44px;
  border: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: white;
  background: var(--rouge);
  box-shadow: 0 8px 18px rgba(217, 71, 63, 0.2);
  font-size: 13px;
  font-weight: 620;
}

.writing-practice button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  box-shadow: none;
}

.writing-practice button .svg-icon {
  width: 17px;
  height: 17px;
}

.voice-button {
  width: 80px;
  height: 80px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: var(--rouge);
  box-shadow: 0 14px 28px rgba(217, 71, 63, 0.24);
  transition: transform 160ms ease, background 160ms ease;
}

.voice-button.active {
  background: var(--rouge-deep);
  animation: listening 1.5s ease-in-out infinite;
}

.correction-card,
.profile-panel {
  padding: 17px;
}

.correction-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background: #f1f4fd;
}

.correction-card > .svg-icon {
  width: 27px;
  height: 27px;
  color: var(--bleu);
}

.correction-card.success {
  border-color: rgba(27, 164, 77, 0.3);
  background: #f2fbf5;
}

.correction-card.success > .svg-icon {
  color: var(--green);
}

.correction-card.coach {
  border-color: rgba(217, 71, 63, 0.26);
  background: #fdf1f3;
}

.correction-card p {
  margin-bottom: 3px;
  color: var(--bleu);
  font-size: 11px;
  font-weight: 600;
}

.correction-card h3 {
  margin-bottom: 7px;
}

.test-visual {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  color: var(--ink);
  text-align: left;
  background: #f1f4fd;
  font: inherit;
}

.examiner {
  width: 96px;
  height: 112px;
  border-radius: 14px;
  object-fit: cover;
}

.test-row {
  width: 100%;
  padding: 15px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  color: var(--ink);
  text-align: left;
  font: inherit;
}

.test-row:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.test-row > .svg-icon {
  color: var(--bleu);
}

.test-row > span:last-child {
  color: var(--bleu);
  font-size: 11px;
  font-weight: 620;
}

.exam-simulators {
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  background: white;
}

.exam-simulators > div > p {
  margin: 0 0 3px;
  color: var(--rouge);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}

.exam-simulators > div > h2 {
  margin: 0;
  font-size: 20px;
}

.exam-simulators > div > span {
  margin-top: 4px;
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.exam-simulators > button {
  width: 100%;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-align: left;
  background: #f7fafb;
}

.exam-simulators strong,
.exam-simulators small {
  display: block;
}

.exam-simulators strong { font-size: 13px; }
.exam-simulators small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.exam-simulators > button > .svg-icon { color: var(--bleu); }

.exam-layer {
  position: absolute;
  inset: 0;
  z-index: 65;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  background: white;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.exam-layer.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.exam-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background:
    radial-gradient(90% 40% at 8% 0%, rgba(163, 181, 243, 0.2), transparent 60%),
    radial-gradient(70% 35% at 100% 2%, rgba(243, 182, 196, 0.15), transparent 58%),
    #f7f8fd;
}

.exam-shell.exam-shell-no-progress {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.exam-shell > header {
  min-height: 78px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: white;
}

.exam-shell > header > button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: white;
}

.exam-shell > header span { color: var(--bleu); font-size: 9px; font-weight: 650; text-transform: uppercase; }
.exam-shell > header h1 { margin: 2px 0 0; font-size: 21px; }
.exam-shell > header > strong { max-width: 92px; color: var(--muted); font-size: 9px; line-height: 1.3; text-align: right; }
.exam-progress { height: 5px; background: #e7ebf6; }
.exam-progress i { height: 100%; display: block; background: var(--bleu); }
.exam-scroll { min-height: 0; padding: 20px; overflow-y: auto; }
.exam-intro { padding: 18px; border: 1px solid #ccd8f2; border-radius: 14px; background: #eef2fc; }
.exam-intro p { margin: 0 0 5px; color: var(--bleu); font-size: 10px; font-weight: 650; text-transform: uppercase; }
.exam-intro h2 { margin: 0 0 8px; font-size: 25px; }
.exam-intro > span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.exam-sections { margin-top: 16px; border-top: 1px solid var(--border); }
.exam-sections article { min-height: 64px; padding: 10px 2px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; }
.exam-sections article > i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--ink); font-size: 10px; font-style: normal; }
.exam-sections strong,.exam-sections small { display: block; }
.exam-sections strong { font-size: 12px; }.exam-sections small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.exam-disclaimer { margin: 17px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.exam-task > p { color: var(--bleu); font-size: 10px; font-weight: 650; text-transform: uppercase; }
.exam-task > h2 { margin: 18px 0 12px; font-size: 23px; }
.exam-task blockquote { margin: 0; padding: 18px; border: 1px solid var(--border); border-left: 4px solid var(--bleu); border-radius: 7px; color: var(--ink); background: white; font-size: 14px; line-height: 1.6; }
.exam-audio { width: 100%; min-height: 86px; padding: 14px; border: 1px solid #ccd8f2; border-radius: 14px; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--ink); text-align: left; background: #eef2fc; }
.exam-audio > .svg-icon { color: var(--bleu); }.exam-audio strong,.exam-audio small { display:block; }.exam-audio small { margin-top:3px;color:var(--muted);font-size:10px; }
.exam-audio:disabled { cursor: default; opacity: .72; }
.exam-record { width:100%;min-height:72px;margin-top:14px;padding:13px;border:1px solid #ccd8f2;border-radius:8px;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:11px;color:var(--ink);text-align:left;background:white; }
.exam-record > .svg-icon { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:white;background:var(--rouge); }
.exam-record strong,.exam-record small { display:block; }.exam-record small { margin-top:3px;color:var(--muted);font-size:10px; }
.exam-record.recording { border-color:#efb8b3;background:#fdf0f2; }.exam-record.recording > .svg-icon { animation:status-pulse 1.3s infinite; }
.exam-record:disabled { opacity:.5; }
.exam-options { display: grid; gap: 9px; }
.exam-options button { width:100%;min-height:58px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:8px;color:var(--ink);text-align:left;background:white;font-size:12px;font-weight: 590; }
.exam-options button i { width:22px;height:22px;border:1px solid #ced7ea;border-radius:50%;display:grid;place-items:center;color:transparent; }
.exam-options button.selected { border-color:var(--bleu);background:#f0f3fd; }.exam-options button.selected i { color:white;background:var(--bleu); }
.exam-prompt { padding:16px;border:1px solid #ccd8f2;border-radius:8px;background:#eef2fc; }.exam-prompt p { margin:0;color:var(--ink);font-size:14px;font-weight: 590;line-height:1.5; }.exam-prompt small { margin-top:7px;display:block;color:var(--bleu);font-size:10px;font-weight: 620; }
.exam-task textarea { width:100%;min-height:180px;margin-top:14px;padding:13px;border:1px solid var(--border);border-radius:8px;color:var(--ink);background:white;font:inherit;font-size:13px;line-height:1.5;resize:vertical; }
.exam-visual { width:100%;height:210px;margin-bottom:14px;border:1px solid var(--border);border-radius:8px;display:block;object-fit:cover; }
.exam-result { padding:20px;border:1px solid #ccd8f2;border-radius:8px;text-align:center;background:#eef2fc; }.exam-result > strong { color:var(--bleu);font-size:48px; }.exam-result h2 { margin:5px 0 8px;font-size:22px; }.exam-result p { margin:0;color:var(--muted);font-size:11px;line-height:1.5; }
.exam-shell > footer { padding:12px 20px 17px;border-top:1px solid var(--border);background:white; }.exam-shell > footer button { width:100%;height:52px;border:0;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;color:white;background:var(--rouge);font-size:13px;font-weight: 650; }.exam-shell > footer button:disabled { opacity:.42; }

.profile-panel strong {
  margin-bottom: 9px;
  display: block;
  color: var(--bleu);
  font-size: 52px;
  line-height: 1;
}

.profile-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}

.profile-panel > div + div {
  padding-left: 18px;
  border-left: 1px solid var(--border);
}

.profile-panel > p {
  grid-column: 1 / -1;
}

.profile-panel > div strong {
  margin: 3px 0 4px;
  font-size: 36px;
}

.subscription-panel {
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.membership-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.membership-heading p {
  margin: 0 0 3px;
  color: var(--bleu);
  font-size: 11px;
  font-weight: 620;
  text-transform: uppercase;
}

.membership-heading h2 {
  margin: 0;
  font-size: 24px;
}

.membership-heading > span {
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--bleu);
  background: var(--bleu-soft);
  font-size: 10px;
  font-weight: 620;
}

.subscription-panel > p {
  margin: 10px 0 13px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Same red material as "Start Lesson" and the checkout button — every
   act-now surface in the app is one recognisable thing. */
.subscription-panel > button {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 48px;
  border-radius: var(--cta-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  font: inherit;
  font-size: 13.5px;
  font-weight: 640;
  transition: transform 180ms ease;
}

.subscription-panel > button::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 52%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

.subscription-panel > button > * {
  position: relative;
  z-index: 1;
}

.subscription-panel > button:active {
  transform: scale(0.985);
}

.review-centre,
.learning-settings,
.data-controls {
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: white;
}

.profile-section-heading,
.mistake-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

/* Same tinted tiles as the home page's activity rows, so an analytics panel
   is recognisably part of the same product rather than a plain data card. */
.section-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin-top: 1px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(59, 72, 130, 0.08);
}

.section-icon .svg-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.1;
}

.section-icon.blue {
  color: var(--blue);
  background: linear-gradient(160deg, rgba(214, 225, 252, 0.95), rgba(186, 203, 246, 0.85));
}

.section-icon.green {
  color: var(--green);
  background: linear-gradient(160deg, rgba(211, 240, 226, 0.95), rgba(182, 227, 206, 0.85));
}

.section-icon.gold {
  color: var(--gold);
  background: linear-gradient(160deg, rgba(250, 238, 210, 0.95), rgba(244, 224, 176, 0.85));
}

.section-icon.violet {
  color: #5a3fc0;
  background: linear-gradient(160deg, #e2dcfa, #cdc2f4);
}

.section-icon.coral {
  color: var(--rouge);
  background: linear-gradient(160deg, rgba(252, 219, 223, 0.95), rgba(246, 198, 204, 0.85));
}

/* The heading text column takes the free space so the meta chip stays right. */
.profile-section-heading > div {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-section-heading p,
.mistake-heading p {
  margin: 0 0 3px;
  color: var(--bleu);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}

.profile-section-heading h2,
.mistake-heading h3 {
  margin: 0;
  font-size: 19px;
}

.profile-section-heading > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 620;
}

.skill-readiness {
  margin-top: 15px;
  display: grid;
  gap: 10px;
}

.skill-readiness > div {
  display: grid;
  grid-template-columns: 76px 74px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.skill-readiness span,
.skill-readiness strong {
  font-size: 11.5px;
}

.skill-readiness span {
  color: var(--ink);
  font-weight: 600;
}

.skill-readiness strong {
  color: var(--ink);
  font-weight: 680;
  text-align: right;
}

/* An untested skill gets a soft chip rather than grey body text, so "not yet"
   reads as a state instead of a failure. */
.skill-readiness .skill-untested strong {
  justify-self: end;
  padding: 3px 8px;
  border-radius: 999px;
  color: #4a5473;
  background: rgba(59, 72, 130, 0.09);
  font-size: 9.5px;
  font-weight: 640;
  letter-spacing: 0.01em;
}

.skill-readiness i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(59, 72, 130, 0.11);
  box-shadow: inset 0 1px 2px rgba(59, 72, 130, 0.09);
}

.skill-readiness b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #5c86e0, var(--blue));
  box-shadow: 0 1px 3px rgba(16, 66, 143, 0.28);
}

.skill-readiness .skill-violet b {
  background: linear-gradient(90deg, #8b74e2, #5a3fc0);
  box-shadow: 0 1px 3px rgba(90, 63, 192, 0.28);
}

.skill-readiness .skill-gold b {
  background: linear-gradient(90deg, #d9a63c, var(--gold));
  box-shadow: 0 1px 3px rgba(143, 93, 6, 0.26);
}

.skill-readiness .skill-green b {
  background: linear-gradient(90deg, #46a97d, var(--green));
  box-shadow: 0 1px 3px rgba(31, 122, 85, 0.26);
}

.mistake-heading {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.mistake-heading button {
  padding: 4px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 620;
}

.mistake-list {
  margin-top: 10px;
}

.mistake-list article,
.review-empty {
  min-height: 62px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.mistake-list article > .svg-icon {
  color: var(--rouge);
}

.mistake-list strong,
.mistake-list small,
.review-empty strong,
.review-empty small {
  display: block;
}

.mistake-list strong,
.review-empty strong {
  font-size: 11px;
}

.mistake-list small,
.review-empty small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.mistake-list article > button {
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  color: white;
  background: var(--ink);
  font-size: 9px;
  font-weight: 620;
}

.review-empty {
  grid-template-columns: 28px minmax(0, 1fr);
  color: var(--bleu);
}

.setting-row {
  min-height: 68px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 11px;
}

/* Same tinted-tile language as the account rows, so preferences read as part
   of the product rather than a bare list of switches. */
.setting-icon {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.setting-icon .svg-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.05;
}

.setting-icon.tone-blue {
  color: var(--blue);
  background: linear-gradient(160deg, #d6e1fc, #bacbf6);
}

.setting-icon.tone-green {
  color: var(--green);
  background: linear-gradient(160deg, #d3f0e2, #b6e3ce);
}

.setting-icon.tone-gold {
  color: var(--gold);
  background: linear-gradient(160deg, #faeed2, #f4e0b0);
}

.setting-icon.tone-violet {
  color: #5a3fc0;
  background: linear-gradient(160deg, #e2dcfa, #cdc2f4);
}

.learning-settings .profile-section-heading {
  margin-bottom: 10px;
}

.setting-row strong,
.setting-row small {
  display: block;
}

.setting-row strong {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.setting-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.setting-row > button {
  width: 46px;
  height: 27px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: #ced7ea;
}

.setting-row > button i {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: block;
  background: white;
  transform: translateX(0);
  transition: transform 160ms ease;
}

.setting-row > button[aria-checked="true"] {
  background: var(--bleu);
}

.setting-row > button[aria-checked="true"] i {
  transform: translateX(19px);
}

.data-controls > p {
  margin: 13px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

/* Stacked full-width rows: the half-width grid could not fit an icon beside
   "Export my data", so the glyph wrapped onto its own line. */
.data-actions {
  display: grid;
  gap: 8px;
}

.data-actions button {
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 11px;
  text-align: left;
  color: var(--ink);
  background: linear-gradient(165deg, #ffffff, #f7f9ff);
  box-shadow: 0 1px 2px rgba(59, 72, 130, 0.05);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.data-actions button:hover {
  border-color: rgba(58, 99, 196, 0.34);
  box-shadow: 0 6px 16px rgba(16, 66, 143, 0.12);
  transform: translateY(-1px);
}

.data-actions button > i {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.data-actions button > i.tone-blue {
  color: var(--blue);
  background: linear-gradient(160deg, #d6e1fc, #bacbf6);
}

.data-actions button > i.tone-coral {
  color: var(--rouge);
  background: linear-gradient(160deg, #fcdbdf, #f6c6cc);
}

.data-actions button > i .svg-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.05;
}

.data-actions button > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.data-actions button strong {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.data-actions button small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.data-actions button > .svg-icon {
  width: 15px;
  height: 15px;
  color: var(--muted);
  justify-self: end;
}

.data-actions button.danger {
  border-color: rgba(175, 48, 42, 0.22);
  background: linear-gradient(165deg, #fffafb, #fdf1f3);
}

.data-actions button.danger strong {
  color: #a3202a;
}

.data-actions button.danger:hover {
  border-color: rgba(175, 48, 42, 0.42);
  box-shadow: 0 6px 16px rgba(175, 48, 42, 0.14);
}

html.large-text .screen-content {
  font-size: 112%;
}

html.large-text .screen-content small,
html.large-text .screen-content button,
html.large-text .screen-content textarea {
  font-size: max(11px, 1em);
}

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

.billing-layer {
  position: absolute;
  inset: 0;
  z-index: 70;
  visibility: hidden;
  opacity: 0;
  background: rgba(19, 34, 43, 0.28);
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.support-layer {
  position: absolute;
  inset: 0;
  z-index: 75;
  visibility: hidden;
  opacity: 0;
  background: rgba(19, 34, 43, 0.28);
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.support-layer.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.support-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background:
    radial-gradient(90% 40% at 8% 0%, rgba(163, 181, 243, 0.22), transparent 60%),
    radial-gradient(70% 35% at 100% 2%, rgba(243, 182, 196, 0.16), transparent 58%),
    #f6f8fd;
}

.support-shell > header {
  min-height: 78px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  background: white;
}

.support-shell > header button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: white;
}

.support-shell > header span {
  color: var(--bleu);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}

.support-shell > header h1 {
  margin: 2px 0 0;
  font-size: 24px;
}

/* Three tabs now, not two — the old 2-column grid wrapped "Refunds" onto a
   second row. Segmented pill control, same language as the billing cycle. */
.support-tabs {
  padding: 10px 18px 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  background: #ffffff;
}

.support-tabs.support-tabs-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.support-tabs button {
  height: 38px;
  border: 1px solid rgba(59, 72, 130, 0.1);
  border-radius: 12px;
  color: var(--muted);
  background: #f2f4fb;
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-tabs button.active {
  color: #ffffff;
  border-color: rgba(7, 42, 99, 0.4);
  background: linear-gradient(160deg, #2e5cb0 0%, var(--bleu) 60%, #0c3576 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 12px rgba(16, 66, 143, 0.26);
}

/* Each heading + paragraph pair reads as its own white card instead of a
   wall of prose, with a blue rule marking the section. */
.support-content {
  padding: 18px 18px 26px;
  overflow-y: auto;
}

.support-content h2 {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.024em;
}

.support-content h3 {
  position: relative;
  margin: 16px 0 7px;
  padding-left: 13px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.012em;
}

.support-content h3::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4a74d4, var(--bleu));
}

.support-content p {
  margin: 0;
  padding: 13px 15px;
  border: 1px solid rgba(59, 72, 130, 0.1);
  border-radius: 14px;
  color: #414965;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(59, 72, 130, 0.05), 0 4px 12px rgba(59, 72, 130, 0.05);
  font-size: 12.5px;
  line-height: 1.6;
}
.support-content a { color:var(--bleu);font-weight: 590; }
.support-legal-links { margin-top:22px!important;padding:14px 15px!important;border:1px solid rgba(59,72,130,0.1);border-radius:14px;background:#ffffff;box-shadow:none!important;display:flex;flex-wrap:wrap;gap:14px;justify-content:center; }

.billing-layer.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.billing-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(95% 40% at 5% 0%, rgba(137, 169, 240, 0.25), transparent 62%),
    radial-gradient(74% 38% at 100% 4%, rgba(245, 186, 198, 0.22), transparent 58%),
    #f7f8fd;
  transform: translateY(12px);
  transition: transform 220ms ease;
}

.billing-layer.open .billing-shell {
  transform: translateY(0);
}

.billing-header {
  position: relative;
  padding: 17px 20px 15px;
  border-bottom: 1px solid rgba(65, 76, 125, 0.1);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.91);
  box-shadow: 0 5px 18px rgba(49, 67, 124, 0.05);
}

.billing-header::after {
  content: "";
  position: absolute;
  top: -44px;
  right: -32px;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(49, 88, 176, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(49, 88, 176, 0.035), 0 0 0 42px rgba(49, 88, 176, 0.025);
  pointer-events: none;
}

.billing-header > button {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(46, 92, 176, 0.16);
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--bleu);
  background: linear-gradient(145deg, #ffffff, #eef3ff);
  box-shadow: inset 0 1px 0 #ffffff, 0 4px 12px rgba(49, 88, 176, 0.08);
}

.billing-header > div { position: relative; z-index: 1; }

.billing-header span {
  color: var(--bleu);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0;
  text-transform: uppercase;
}

.billing-header h1 {
  margin: 3px 0 0;
  font-size: 21px;
  font-weight: 740;
  letter-spacing: 0;
  line-height: 1.1;
}

.billing-scroll {
  padding: 15px 20px 25px;
  overflow-y: auto;
}

.billing-cycle {
  min-height: 54px;
  padding: 5px;
  border: 1px solid rgba(16, 66, 143, 0.16);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(239, 244, 255, 0.86)),
    #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 9px 22px rgba(31, 50, 107, 0.09);
}

.billing-cycle button {
  position: relative;
  overflow: hidden;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  color: #4e5875;
  background: transparent;
  font: inherit;
  box-shadow: inset 0 0 0 1px transparent;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.billing-cycle button strong {
  display: block;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.1;
}

.billing-cycle button small {
  display: block;
  font-size: 8.5px;
  font-weight: 690;
  line-height: 1.15;
}

.billing-cycle button.active {
  color: white;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(145deg, #2f64bd 0%, var(--bleu) 58%, #0b3475 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 8px 18px rgba(16, 66, 143, 0.3);
}

.billing-cycle button.active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.24) 49%, transparent 66%);
  pointer-events: none;
}

.billing-cycle button:active {
  transform: scale(0.985);
}

.billing-cycle span {
  margin-left: 2px;
  color: #a8fff5;
  font-size: 7.5px;
  font-weight: 700;
}

.pricing-grid {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.pricing-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 16px 15px 15px;
  border: 1px solid rgba(55, 75, 137, 0.13);
  border-radius: 10px;
  color: var(--ink);
  text-align: left;
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.91)),
    radial-gradient(90% 100% at 100% 0%, rgba(var(--plan-glow), 0.1), transparent 56%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 9px 24px rgba(38, 54, 110, 0.09);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pricing-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.5), transparent 32%),
    radial-gradient(70% 80% at 100% 0%, rgba(var(--plan-glow), 0.09), transparent 60%);
  opacity: 0.72;
  pointer-events: none;
}

.pricing-card::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background 160ms ease;
  z-index: 1;
}

/* The chosen plan commits: brand-blue ring, lifted, blue glow. This is the
   moment the app asks for trust, so the selection must feel decisive. */
.pricing-card.selected {
  border-color: rgba(var(--plan-glow), 0.55);
  box-shadow:
    0 0 0 2px rgba(var(--plan-glow), 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 15px 34px rgba(var(--plan-glow), 0.2);
  transform: translateY(-2px);
}

.pricing-card.selected::before { background: var(--plan); }

.pricing-card.tone-green.selected {
  background:
    radial-gradient(80% 110% at 100% 0%, rgba(188, 235, 214, 0.42), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 253, 249, 0.93));
}

/* One accent per tier, driving the icon tile, the ticks, the price and the
   selected ring — the same tinted-tile language as the home page. */
.pricing-card.tone-blue {
  --plan: var(--blue);
  --plan-tile: linear-gradient(160deg, rgba(214, 225, 252, 0.95), rgba(186, 203, 246, 0.85));
  --plan-glow: 46, 92, 176;
}

.pricing-card.tone-green {
  --plan: var(--green);
  --plan-tile: linear-gradient(160deg, rgba(211, 240, 226, 0.95), rgba(182, 227, 206, 0.85));
  --plan-glow: 18, 128, 90;
}

.pricing-card.tone-gold {
  --plan: var(--gold);
  --plan-tile: linear-gradient(160deg, rgba(250, 238, 210, 0.95), rgba(244, 224, 176, 0.85));
  --plan-glow: 176, 122, 8;
}

.pricing-card.tone-violet {
  --plan: #7657c9;
  --plan-tile: linear-gradient(160deg, rgba(232, 223, 255, 0.98), rgba(210, 196, 246, 0.9));
  --plan-glow: 118, 87, 201;
}

.pricing-card.tone-coral {
  --plan: var(--rouge-deep);
  --plan-tile: linear-gradient(160deg, rgba(255, 226, 224, 0.98), rgba(248, 199, 194, 0.9));
  --plan-glow: 181, 48, 53;
}

.pricing-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pricing-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 650;
}

.pricing-name > b {
  flex: 1 1 auto;
  font-weight: 650;
}

.plan-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--plan);
  background: var(--plan-tile);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 5px 12px rgba(var(--plan-glow), 0.12);
}

.plan-icon .svg-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.1;
}

.plan-current {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--plan);
  background: rgba(var(--plan-glow), 0.12);
  font-size: 8.5px;
  font-weight: 720;
  letter-spacing: 0;
  font-style: normal;
  white-space: nowrap;
}

/* Recommendation ribbon on Immersion — the visual learning tier most learners should pick. */
.plan-flag {
  padding: 4px 8px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #157a58, var(--green));
  box-shadow: 0 4px 10px rgba(18, 128, 90, 0.2);
  font-size: 8.5px;
  font-weight: 720;
  font-style: normal;
  letter-spacing: 0;
  white-space: nowrap;
}

.pricing-price {
  position: relative;
  z-index: 2;
  margin: 10px 0 5px;
  display: block;
  color: var(--plan);
  font-size: 28px;
  font-weight: 740;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.pricing-price small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 620;
  letter-spacing: 0;
}

.pricing-card > p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}

.pricing-rule {
  position: relative;
  z-index: 2;
  height: 1px;
  margin: 10px 0 9px;
  display: block;
  background: linear-gradient(90deg, rgba(var(--plan-glow), 0.22), rgba(var(--plan-glow), 0.04) 72%, transparent);
}

.pricing-card ul {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  list-style: none;
}

.pricing-card li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #303a58;
  font-size: 10.25px;
  line-height: 1.4;
}

.pricing-card li .svg-icon {
  width: 13px;
  height: 13px;
  color: var(--plan);
  stroke-width: 2.5;
}

.billing-total {
  margin: 13px 0 0;
  color: var(--muted);
  text-align: center;
  font-size: 9.5px;
}

/* Lives in the footer beside the CTA, not at the end of the scrolling plan
   list — a message the learner has to scroll to find reads as "the button did
   nothing". */
.billing-notice {
  margin-bottom: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(217, 71, 63, 0.24);
  border-radius: 13px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: var(--rouge-deep);
  background: #fdf1f3;
  font-size: 12.5px;
  line-height: 1.4;
  animation: billing-notice-in 220ms ease both;
}

@keyframes billing-notice-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

html.reduce-motion .billing-notice {
  animation: none;
}

.billing-notice .svg-icon {
  width: 17px;
  height: 17px;
}

.billing-notice strong,
.billing-notice span {
  display: block;
}

.billing-notice strong {
  margin-bottom: 3px;
  font-size: 11px;
}

.billing-notice span {
  font-size: 10px;
  line-height: 1.4;
}

.billing-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(65, 76, 125, 0.1);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -8px 20px rgba(49, 67, 124, 0.045);
}

/* Identical material to the home page's "Start Lesson": three-stop gradient,
   ink-red border, bright top edge and a dark inner floor, plus the ::after
   gloss below. */
.billing-footer > button {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 52px;
  border-radius: var(--cta-radius);
  color: white;
  font: inherit;
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -0.012em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 10px 26px rgba(163, 32, 42, 0.3);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.billing-footer > button::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 52%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

.billing-footer > button > * {
  position: relative;
  z-index: 1;
}

.billing-footer > button:not(:disabled):active {
  transform: scale(0.985);
}

.billing-footer > button:disabled {
  opacity: 0.45;
  box-shadow: none;
}

.billing-footer small {
  margin-top: 7px;
  display: block;
  color: var(--muted);
  text-align: center;
  font-size: 9px;
}

/* Free-tier upsell, pinned in the lesson shell so it appears on every step of
   every lesson rather than only the first screen. The sweep is the
   attention-getter; both animations stop under Reduce motion. */
.plus-bar {
  position: relative;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid rgba(16, 66, 143, 0.18);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  text-align: left;
  background: linear-gradient(122deg, #143a86 0%, #2f56b8 44%, #5b3fb0 100%);
  cursor: pointer;
}

.plus-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.32) 50%, transparent 66%);
  transform: translateX(-100%);
  animation: plus-sweep 3.6s ease-in-out infinite;
}

@keyframes plus-sweep {
  0%, 62% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.plus-bar-badge {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #7a4d00;
  background: linear-gradient(160deg, #ffe08a, #f5b73d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 8px rgba(0, 0, 0, 0.2);
  animation: plus-badge-pulse 2.8s ease-in-out infinite;
}

@keyframes plus-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

.plus-bar-badge .svg-icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

.plus-bar > span {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.plus-bar strong {
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 660;
  letter-spacing: -0.01em;
}

.plus-bar small {
  color: rgba(255, 255, 255, 0.88);
  font-size: 10.5px;
  line-height: 1.35;
}

.plus-bar-cta {
  position: relative;
  padding: 7px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #21324f;
  background: linear-gradient(160deg, #ffffff, #e9eefb);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  font-size: 11px;
  font-style: normal;
  font-weight: 680;
  white-space: nowrap;
}

.plus-bar-cta .svg-icon {
  width: 12px;
  height: 12px;
}

html.reduce-motion .plus-bar::after,
html.reduce-motion .plus-bar-badge {
  animation: none;
}

/* The scene image carries margin-bottom: 20px. This banner replaces it for
   free learners, and without the same margin the lesson title collided with
   it — which is exactly what a free user saw on every lesson. */
.text-lesson-banner {
  min-height: 68px;
  margin: 0;
  padding: 13px;
  border: 0;
  border-radius: 15px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  background: transparent;
}

.text-lesson-banner > i {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: linear-gradient(160deg, #d6e1fc, #bacbf6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.text-lesson-banner > i .svg-icon {
  width: 17px;
  height: 17px;
}

.text-lesson-banner strong,
.text-lesson-banner small {
  display: block;
}

.text-lesson-banner small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.text-lesson-banner button {
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: white;
  background: var(--ink);
  font-size: 10px;
  font-weight: 620;
}

.text-only-mark {
  color: var(--muted);
  font-size: 9px;
  font-weight: 620;
  text-transform: uppercase;
}

/* Locked audio: a real affordance that opens billing, instead of the dead
   grey "TEXT" label that used to sit here. */
.locked-audio {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px dashed rgba(16, 66, 143, 0.34);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: linear-gradient(160deg, #eef2fd, #dfe7fa);
  transition: transform 150ms ease, border-color 150ms ease;
}

.locked-audio:hover {
  border-color: var(--blue);
  transform: scale(1.05);
}

.locked-audio .svg-icon {
  width: 16px;
  height: 16px;
}

/* Tap-to-practise self-check above the dialogue. */
.practise-meter {
  margin-bottom: 11px;
  padding: 9px 12px;
  border: 1px solid rgba(16, 66, 143, 0.16);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  background: linear-gradient(165deg, #ffffff, #f4f7ff);
}

.practise-meter > i {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: linear-gradient(160deg, #d6e1fc, #bacbf6);
}

.practise-meter > i .svg-icon {
  width: 14px;
  height: 14px;
}

.practise-meter > span {
  color: #414965;
  font-size: 11px;
  line-height: 1.35;
}

.practise-meter > b {
  color: var(--bleu);
  font-size: 12px;
  font-weight: 700;
}

.practise-meter.complete {
  border-color: rgba(31, 122, 85, 0.28);
  background: linear-gradient(165deg, #f7fdfa, #eaf7f1);
}

.practise-meter.complete > i {
  color: var(--green);
  background: linear-gradient(160deg, #d3f0e2, #b6e3ce);
}

.practise-meter.complete > b {
  color: var(--green);
}

/* A practised line: green edge, tick avatar, and a short pop so the tap is
   felt as well as seen. */
.dialogue-row {
  cursor: pointer;
}

.dialogue-row.practised {
  border-color: rgba(31, 122, 85, 0.4);
  background: linear-gradient(165deg, #f8fdfb, #edf8f3);
}

.dialogue-row.practised .learner-avatar {
  color: var(--green);
  background: linear-gradient(160deg, #d3f0e2, #b6e3ce);
  animation: practise-pop 320ms ease;
}

.dialogue-row.practised .learner-avatar .svg-icon {
  width: 22px;
  height: 22px;
  stroke-width: 2.6;
}

@keyframes practise-pop {
  0% { transform: scale(0.7); }
  55% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.dialogue-row:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.learner-avatar.avatar-tutor {
  color: #5a3fc0;
  background: linear-gradient(160deg, #e2dcfa, #cdc2f4);
}

/* --blue on this tile is only 3.84:1 and the label is 12px, so it needs the
   deeper --bleu to clear AA at 6.57:1. */
.learner-avatar.avatar-you {
  color: var(--bleu);
  background: linear-gradient(160deg, #d6e1fc, #bacbf6);
}

html.reduce-motion .dialogue-row.practised .learner-avatar {
  animation: none;
}

.free-instructor-panel {
  width: 100%;
  min-height: calc(var(--u) * 10.1);
  padding: 0 14px 0 0;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(224, 233, 250, 0.74));
  box-shadow: var(--glass-edge), var(--glass-lift);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.free-instructor-panel .avatar-stage {
  width: 84px;
  height: calc(var(--u) * 10.1);
  min-height: calc(var(--u) * 10.1);
}

.free-instructor-panel > i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: var(--ink);
  font-style: normal;
}

.free-instructor-panel > i .svg-icon {
  width: 16px;
  height: 16px;
}

.free-instructor-panel strong,
.free-instructor-panel small {
  display: block;
}

.free-instructor-panel small {
  margin-top: calc(var(--u) * 0.4);
  color: var(--muted);
  font-size: calc(var(--u) * 1.12);
  line-height: 1.4;
}

.premium-gate-view {
  min-height: 100%;
  align-content: start;
}

.premium-gate {
  padding: 28px 22px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(180deg, var(--glass-tint-strong), var(--glass-tint));
  box-shadow: var(--glass-edge), var(--glass-lift);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* --- Talk paywall: a full-bleed live scene ------------------------------- */
/* The entire view is the stage: edge-to-edge hero blue with an ambient glow
   behind the instructor and a faint rouge warmth at the base — no cards, one
   continuous premium moment from title to CTA. */
/* Gates follow the home-page composition: light page, one blue hero card at
   the top, light glass content beneath, red CTA. Same structure everywhere. */
.gate-view {
  position: relative;
  align-content: start;
  justify-items: stretch;
  gap: 0;
}

/* Two slow-drifting light fields over the blue — an aurora that never repeats
   on a visible beat. Painted behind the content and pointer-transparent, so it
   adds atmosphere without affecting layout or blocking taps. */
/* Hero cards on the gates reuse the readiness card's blue and its drifting
   light, so Talk, Test and Progress all open on the same surface. */
.talk-hero,
.exam-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 18px 14px;
  border: 1px solid rgba(7, 42, 99, 0.5);
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(150deg, #051a42 0%, #0a2f6d 52%, #0e3c84 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 42px rgba(5, 26, 66, 0.42);
}

.talk-hero::before,
.exam-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -30% -60%;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 36%, rgba(255, 255, 255, 0.1) 46%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 54%, transparent 64%);
  animation: readiness-sweep-light 14s ease-in-out infinite;
}

.talk-hero > *,
.exam-hero > * {
  position: relative;
  z-index: 1;
}

/* --- Progress analytics -------------------------------------------------- */
/* The readiness card is the one committed-colour surface on this screen —
   the single number a learner checks before booking an exam. */
/* Deep blue carrying three layers of continuous motion behind the content: a
   rotating conic sheen, a breathing colour mesh, and two drifting blobs. Their
   periods (26s / 20s / 16s / 21s) share no common multiple, so the texture
   flows without ever visibly looping. */
.readiness-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(7, 42, 99, 0.5);
  border-radius: 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  color: #ffffff;
  background: linear-gradient(150deg, #051a42 0%, #0a2f6d 52%, #0e3c84 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 42px rgba(5, 26, 66, 0.42);
}

/* A single band of light travelling slowly across the card on the diagonal.
   No pattern, no texture — just a clean sweep that keeps the surface alive. */
.readiness-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -30% -60%;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 36%, rgba(255, 255, 255, 0.1) 46%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 54%, transparent 64%);
  animation: readiness-sweep-light 14s ease-in-out infinite;
}

@keyframes readiness-sweep-light {
  0% { transform: translate3d(-38%, 0, 0); }
  50% { transform: translate3d(38%, 0, 0); }
  100% { transform: translate3d(-38%, 0, 0); }
}

/* Ring colour only — never text. Text on this card is always white. */
.readiness-card.band-low { --band: #ff8f6b; }
.readiness-card.band-mid { --band: #f7cd76; }
.readiness-card.band-good { --band: #8fb8ff; }
.readiness-card.band-high { --band: #6fe3b4; }
.readiness-card.band-none { --band: #c3ccdf; }

.readiness-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Two cool nebulae for depth behind the stars — blue-white only, no tint. */
.readiness-glow i {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  background: radial-gradient(circle, rgba(150, 190, 255, 0.4), transparent 70%);
  mix-blend-mode: screen;
}

.readiness-glow i:first-child {
  top: -46%;
  left: -18%;
  width: 62%;
  height: 150%;
  animation: readiness-drift-a 16s ease-in-out infinite;
}

.readiness-glow i:last-child {
  right: -22%;
  bottom: -54%;
  width: 58%;
  height: 150%;
  animation: readiness-drift-b 21s ease-in-out infinite;
}

@keyframes readiness-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
  50% { transform: translate3d(26%, 10%, 0) scale(1.18); opacity: 1; }
}

@keyframes readiness-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); opacity: 0.6; }
  50% { transform: translate3d(-24%, -14%, 0) scale(0.92); opacity: 0.9; }
}

.readiness-card > *:not(.readiness-glow) {
  position: relative;
  z-index: 1;
}

.readiness-ring {
  position: relative;
  width: 128px;
  height: 128px;
}

/* Faint white disc inside the ring so the figure sits on its own light and
   lifts off the dark blue. */
.readiness-ring::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.readiness-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.readiness-ring circle {
  fill: none;
  stroke-width: 7;
}

.readiness-track { stroke: rgba(255, 255, 255, 0.32); }

/* Sweeps up from empty on every visit, so the score arrives rather than
   just sitting there. */
.readiness-fill {
  stroke: var(--band);
  stroke-linecap: round;
  stroke-dasharray: 289;
  animation: readiness-sweep 1200ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

@keyframes readiness-sweep {
  from { stroke-dashoffset: 289; }
  to { stroke-dashoffset: var(--offset); }
}

/* The headline number: white, large, and the clear focal point of the screen.
   Flex rather than grid so the % sits beside the figure as a raised
   superscript instead of stacking underneath it. */
.readiness-ring strong {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-shadow: 0 2px 14px rgba(2, 10, 30, 0.5);
  font-variant-numeric: tabular-nums;
}

/* Only 100 needs three digits; stepping down keeps it inside the stroke
   without shrinking every other score. */
.readiness-ring strong.is-full {
  font-size: 44px;
}

.readiness-ring strong small {
  align-self: flex-start;
  margin-top: 0.66em;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0.74;
}

.readiness-ring strong.is-full small {
  font-size: 16px;
}

.readiness-copy p {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* The band name as a tinted chip — the colour cue repeats where the eye lands. */
/* White label; the band colour is carried by the dot and the ring, not text. */
.readiness-copy h2 {
  width: fit-content;
  margin: 0 0 6px;
  padding: 5px 12px 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -0.015em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Live status dot cycling through the full signal palette — orange, red,
   yellow, green — with the glow tracking each colour. Purely a "this is live"
   indicator; the band itself is still read from the ring colour. */
.readiness-copy h2::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  animation: status-dot-cycle 5.2s ease-in-out infinite;
}

@keyframes status-dot-cycle {
  0%, 100% { background: #ff8f3c; box-shadow: 0 0 9px 1px rgba(255, 143, 60, 0.85); }
  12% { background: #ff8f3c; box-shadow: 0 0 4px 0 rgba(255, 143, 60, 0.4); }
  25% { background: #ff5757; box-shadow: 0 0 9px 1px rgba(255, 87, 87, 0.85); }
  37% { background: #ff5757; box-shadow: 0 0 4px 0 rgba(255, 87, 87, 0.4); }
  50% { background: #ffd23c; box-shadow: 0 0 9px 1px rgba(255, 210, 60, 0.85); }
  62% { background: #ffd23c; box-shadow: 0 0 4px 0 rgba(255, 210, 60, 0.4); }
  75% { background: #4ade80; box-shadow: 0 0 9px 1px rgba(74, 222, 128, 0.85); }
  87% { background: #4ade80; box-shadow: 0 0 4px 0 rgba(74, 222, 128, 0.4); }
}

.readiness-target {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12.5px;
}

.readiness-stats {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.readiness-stats div { min-width: 0; }

.readiness-stats dt {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px;
  line-height: 1.3;
}

.readiness-stats dd {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* --- shared score colour language --------------------------------------- */
.band-low { --band: #c8324a; --band-soft: rgba(200, 50, 74, 0.14); }
.band-mid { --band: #8c5c05; --band-soft: rgba(176, 122, 8, 0.16); }
.band-good { --band: #2e5cb0; --band-soft: rgba(46, 92, 176, 0.14); }
.band-high { --band: #12805a; --band-soft: rgba(18, 128, 90, 0.14); }
.band-none { --band: #5a6178; --band-soft: rgba(142, 151, 176, 0.14); }

.skill-readiness .band-low b,
.skill-readiness .band-mid b,
.skill-readiness .band-good b,
.skill-readiness .band-high b,
.trend-row[class*="band-"] .trend-bar i:not(.pending),
.sim-row[class*="band-"] .trend-bar i {
  /* Solid first so the bar still paints if color-mix is unsupported; the
     gradient below simply upgrades it where available. */
  background: var(--band);
  background: linear-gradient(90deg, color-mix(in srgb, var(--band) 70%, white), var(--band));
}

.skill-readiness > div[class*="band-"] strong,
.trend-row[class*="band-"] .trend-score:not(.muted),
.sim-row[class*="band-"] .trend-score {
  color: var(--band);
}

/* --- Account & settings hub --------------------------------------------- */
/* Header carries its own tinted tile, so each sub-page is colour-coded the
   way home-page rows are. */
.account-header {
  align-items: center;
  gap: 12px;
}

.account-header .section-icon {
  margin-top: 0;
}

.account-header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.024em;
}

.account-signout > i {
  color: var(--green) !important;
  background: linear-gradient(160deg, rgba(211, 240, 226, 0.95), rgba(182, 227, 206, 0.85)) !important;
}

.account-identity {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(59, 72, 130, 0.1);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(59, 72, 130, 0.06), 0 6px 18px rgba(59, 72, 130, 0.07);
}

.account-avatar {
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--bleu);
  background: linear-gradient(160deg, rgba(214, 225, 252, 0.95), rgba(186, 203, 246, 0.85));
  box-shadow: 0 4px 12px rgba(59, 72, 130, 0.16);
}

.account-avatar.large {
  width: 78px;
  height: 78px;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar .svg-icon {
  width: 24px;
  height: 24px;
}

.account-identity strong {
  display: block;
  font-size: 15px;
  font-weight: 650;
}

.account-identity small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.account-rows {
  display: grid;
  gap: 8px;
}

.account-rows button {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-align: left;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(59, 72, 130, 0.06), 0 4px 12px rgba(59, 72, 130, 0.06);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.account-rows button:active {
  transform: scale(0.99);
}

/* Per-row tones, matching the home page's activity tiles. */
.account-rows button > i {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--bleu);
  background: linear-gradient(160deg, #d6e1fc, #bacbf6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.account-rows button > i.tone-blue {
  color: var(--blue);
  background: linear-gradient(160deg, #d6e1fc, #bacbf6);
}

.account-rows button > i.tone-green {
  color: var(--green);
  background: linear-gradient(160deg, #d3f0e2, #b6e3ce);
}

.account-rows button > i.tone-gold {
  color: var(--gold);
  background: linear-gradient(160deg, #faeed2, #f4e0b0);
}

.account-rows button > i.tone-violet {
  color: #5a3fc0;
  background: linear-gradient(160deg, #e2dcfa, #cdc2f4);
}

.account-rows button > i.tone-coral {
  color: var(--rouge);
  background: linear-gradient(160deg, #fcdbdf, #f6c6cc);
}

.account-rows button > i .svg-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.1;
}

.account-rows strong {
  display: block;
  font-size: 13.5px;
  font-weight: 620;
}

.account-rows small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}

.account-rows button > .svg-icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.avatar-editor {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.avatar-editor > div {
  display: grid;
  gap: 7px;
  justify-items: start;
}

.file-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(16, 66, 143, 0.28);
  border-radius: 12px;
  color: var(--bleu);
  background: #eef3fd;
  box-shadow: 0 1px 2px rgba(59, 72, 130, 0.06);
  font-size: 13px;
  font-weight: 620;
  cursor: pointer;
}

.file-button .svg-icon {
  width: 16px;
  height: 16px;
}

.account-fineprint {
  margin: 2px auto 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
  text-align: center;
}

.priority-group {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
}

.priority-group legend {
  padding: 0 0 7px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 620;
}

.priority-option {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(59, 72, 130, 0.05);
  cursor: pointer;
}

.priority-option.selected {
  border-color: rgba(16, 66, 143, 0.5);
  background: #eef3fd;
  box-shadow: 0 0 0 2px rgba(16, 66, 143, 0.14);
}

/* The browser default paints a square well behind the dot. Drawing the
   control ourselves removes that box and leaves only the ring. */
.priority-option input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid rgba(59, 72, 130, 0.3);
  border-radius: 50%;
  background: #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.priority-option input:checked {
  border-color: var(--bleu);
  box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 20px var(--bleu);
}

.priority-option input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(16, 66, 143, 0.2), inset 0 0 0 4px #ffffff, inset 0 0 0 20px var(--bleu);
}

.priority-option strong {
  display: block;
  font-size: 13px;
  font-weight: 620;
}

.priority-option small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
}

.attachment-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(18, 128, 90, 0.3);
  border-radius: 12px;
  color: #0f6b4b;
  background: rgba(18, 128, 90, 0.09);
  font-size: 12px;
  font-weight: 560;
}

.attachment-chip > span { flex: 1 1 auto; min-width: 0; }

.attachment-chip .svg-icon { width: 15px; height: 15px; }

.attachment-chip button {
  padding: 0;
  border: 0;
  background: none;
  color: #0f6b4b;
}

.ticket-list {
  display: grid;
  gap: 8px;
}

.ticket-row {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 16px;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-align: left;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(59, 72, 130, 0.06), 0 4px 12px rgba(59, 72, 130, 0.06);
}

.ticket-row.static { grid-template-columns: auto minmax(0, 1fr); }

.ticket-status {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  text-transform: capitalize;
}

.ticket-status.open {
  color: #0f6b4b;
  background: rgba(18, 128, 90, 0.14);
}

.ticket-status.closed {
  color: var(--muted);
  background: rgba(59, 72, 130, 0.11);
}

.ticket-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 620;
}

.ticket-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.ticket-row > .svg-icon { width: 15px; height: 15px; color: var(--muted); }

.ticket-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ticket-meta { color: var(--muted); font-size: 11.5px; }

.ticket-subject { margin: 0; font-size: 19px; }

.ticket-body {
  margin: 0;
  color: #414965;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.danger-block {
  padding: 16px;
  border: 1px solid rgba(206, 43, 55, 0.28);
  border-radius: 16px;
  display: grid;
  gap: 11px;
  background: rgba(206, 43, 55, 0.05);
}

.danger-block h2 { margin: 0; font-size: 18px; color: var(--rouge-deep); }

.danger-block p { margin: 0; color: #414965; font-size: 12.5px; line-height: 1.5; }

.danger-block ul { margin: 0; padding: 0; display: grid; gap: 7px; list-style: none; }

.danger-block li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #414965;
  font-size: 12px;
}

.danger-block li .svg-icon { width: 14px; height: 14px; color: var(--rouge); }

.account-notice.tone-success {
  border-color: rgba(18, 128, 90, 0.28);
  color: #0f6b4b;
  background: rgba(18, 128, 90, 0.09);
}

/* Profile opens on the same blue hero as every other tab: instructor portrait,
   greeting, a real progress bar and three stats. */
.profile-hero {
  position: relative;
  overflow: hidden;
  padding: 17px;
  border: 1px solid rgba(7, 42, 99, 0.5);
  border-radius: 20px;
  display: grid;
  gap: 13px;
  color: #ffffff;
  background: linear-gradient(150deg, #051a42 0%, #0a2f6d 52%, #0e3c84 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 16px 38px rgba(5, 26, 66, 0.36);
}

.profile-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -30% -60%;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 36%, rgba(255, 255, 255, 0.1) 46%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0.1) 54%, transparent 64%);
  animation: readiness-sweep-light 14s ease-in-out infinite;
}

.profile-hero > * {
  position: relative;
  z-index: 1;
}

.profile-hero-top {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.profile-hero-avatar {
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: block;
  box-shadow: 0 6px 18px rgba(2, 12, 34, 0.4);
}

.profile-hero-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 18%;
}

.profile-hero-copy p {
  margin: 0 0 3px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10.5px;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-hero-copy h2 {
  margin: 0 0 3px;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: -0.022em;
}

.profile-hero-copy > span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.profile-hero-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.profile-hero-bar i {
  display: block;
  height: 100%;
  min-width: 7px;
  border-radius: inherit;
  background: linear-gradient(90deg, #a8c6ff, #ffffff);
  box-shadow: 0 0 10px rgba(168, 198, 255, 0.6);
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.profile-hero-stats {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-hero-stats div { min-width: 0; }

.profile-hero-stats dt {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px;
}

.profile-hero-stats dd {
  margin: 0;
  color: #ffffff;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

/* The verdict card: green when every gate clears, amber when close, blue
   while building. Colour is the fastest read of "can I book yet". */
.verdict-card {
  padding: 15px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  display: grid;
  gap: 12px;
  background: linear-gradient(180deg, var(--glass-tint-strong), var(--glass-tint));
  box-shadow: var(--glass-edge), var(--glass-lift);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.verdict-card.verdict-ready {
  border-color: rgba(18, 128, 90, 0.4);
  box-shadow: 0 0 0 2px rgba(18, 128, 90, 0.16), var(--glass-edge), var(--glass-lift);
}

.verdict-card.verdict-almost {
  border-color: rgba(143, 93, 6, 0.32);
}

.verdict-copy {
  margin: 0;
  color: #414965;
  font-size: 12.5px;
  line-height: 1.5;
}

.verdict-gates {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}

.verdict-gates li {
  padding: 9px 11px;
  border: 1px solid rgba(59, 72, 130, 0.09);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12.5px;
  background: linear-gradient(165deg, #ffffff, #f8faff);
}

.verdict-gates li.done {
  border-color: rgba(31, 122, 85, 0.2);
  background: linear-gradient(165deg, #f7fdfa, #eef9f4);
}

.verdict-gates li > i {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.verdict-gates li > i .svg-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.1;
}

/* Tinted tiles, matching the account rows and preferences, so a pending gate
   still carries product colour instead of reading as disabled. */
.verdict-gates li > i.tone-blue {
  color: var(--blue);
  background: linear-gradient(160deg, #d6e1fc, #bacbf6);
}

.verdict-gates li > i.tone-green {
  color: var(--green);
  background: linear-gradient(160deg, #d3f0e2, #b6e3ce);
}

.verdict-gates li > i.tone-gold {
  color: var(--gold);
  background: linear-gradient(160deg, #faeed2, #f4e0b0);
}

.verdict-gates li > i.tone-violet {
  color: #5a3fc0;
  background: linear-gradient(160deg, #e2dcfa, #cdc2f4);
}

/* Cleared-count ring in the card header. Needs to outrank
   `.profile-section-heading > div { flex: 1 1 auto }`, which would otherwise
   stretch it across the header. */
.profile-section-heading > .verdict-ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
}

.verdict-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.verdict-ring circle {
  fill: none;
  stroke-width: 3.4;
  stroke-linecap: round;
}

.verdict-ring .ring-track {
  stroke: rgba(59, 72, 130, 0.13);
}

.verdict-ring .ring-fill {
  stroke: var(--blue);
  transition: stroke-dasharray 0.5s ease;
}

.verdict-ring-almost .ring-fill {
  stroke: var(--gold);
}

.verdict-ring-ready .ring-fill {
  stroke: var(--green);
}

.verdict-ring b {
  position: relative;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.verdict-ring b span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 600;
}

.verdict-gates strong {
  display: block;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 620;
}

.verdict-gates li.todo strong {
  color: #414965;
  font-weight: 560;
}

.verdict-gates small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 10.5px;
}

.verdict-note {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(59, 72, 130, 0.12);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.analytics-panel {
  padding: 15px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  display: grid;
  gap: 12px;
  background: linear-gradient(180deg, var(--glass-tint-strong), var(--glass-tint));
  box-shadow: var(--glass-edge), var(--glass-lift);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.analytics-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Fourteen day cells — filled where a lesson, checkpoint or exam was finished. */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 4px;
}

.activity-grid i {
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(214, 225, 252, 0.75), rgba(199, 213, 247, 0.6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.activity-grid i.on {
  background: linear-gradient(180deg, #4a74d4, var(--bleu));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(16, 66, 143, 0.25);
}

.sim-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sim-summary div {
  padding: 10px 12px;
  border: 1px solid rgba(16, 66, 143, 0.16);
  border-radius: 13px;
  background: rgba(237, 242, 253, 0.7);
}

.sim-summary dt {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10.5px;
}

.sim-summary dd {
  margin: 0;
  color: var(--bleu);
  font-size: 19px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.sim-list,
.trend-list {
  display: grid;
  gap: 10px;
}

.sim-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 38px;
  align-items: center;
  gap: 10px;
}

.sim-label strong {
  display: block;
  font-size: 13px;
  font-weight: 620;
}

.sim-label small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 10.5px;
}

.trend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 38px;
  align-items: center;
  gap: 10px;
}

.trend-label strong {
  display: block;
  font-size: 13px;
  font-weight: 620;
}

.trend-label small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 10.5px;
}

.trend-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(59, 72, 130, 0.11);
}

.trend-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4a74d4, var(--bleu));
}

/* A module with lessons done but no checkpoint yet shows coverage, not score —
   striped so it never reads as an achieved result. */
.trend-bar i.pending {
  background: repeating-linear-gradient(115deg, rgba(59, 72, 130, 0.34) 0 5px, rgba(59, 72, 130, 0.16) 5px 10px);
}

.trend-score {
  color: var(--bleu);
  font-size: 13px;
  font-weight: 640;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.trend-score.muted { color: var(--muted); font-weight: 560; }

.focus-list {
  display: grid;
  gap: 8px;
}

.focus-row {
  padding: 11px 12px;
  border: 1px solid rgba(206, 43, 55, 0.2);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  background: rgba(206, 43, 55, 0.06);
}

.focus-row > i {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--rouge);
  background: rgba(206, 43, 55, 0.12);
}

.focus-row > i .svg-icon { width: 16px; height: 16px; }

.focus-row strong {
  display: block;
  font-size: 13.5px;
  font-weight: 620;
}

.focus-row small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
}

.focus-row button {
  padding: 7px 12px;
  border: 1px solid rgba(206, 43, 55, 0.3);
  border-radius: 10px;
  color: var(--rouge);
  background: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 620;
}

.analytics-link-card {
  padding: 15px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  display: grid;
  gap: 10px;
  background: linear-gradient(180deg, var(--glass-tint-strong), var(--glass-tint));
  box-shadow: var(--glass-edge), var(--glass-lift);
}

.analytics-link-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.analytics-link-card button {
  width: 100%;
  height: 46px;
  border: 1px solid rgba(16, 66, 143, 0.3);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--bleu);
  background: rgba(237, 242, 253, 0.9);
  font-size: 14px;
  font-weight: 620;
}

.analytics-link-card button .svg-icon { width: 17px; height: 17px; }

/* --- grouped vertical rhythm ------------------------------------------- */
.talk-hero,
.exam-hero {
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 0.85);
}

/* The section timer as the hero: the ring sweeps once on entry, so the screen
   opens on an exam already running. */
.exam-dial {
  position: relative;
  width: calc(var(--u) * 9.2);
  height: calc(var(--u) * 9.2);
}

.exam-dial svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.exam-dial circle {
  fill: none;
  stroke-width: 5;
}

.exam-dial-track {
  stroke: rgba(255, 255, 255, 0.2);
}

.exam-dial-fill {
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  filter: drop-shadow(0 2px 6px rgba(4, 16, 42, 0.35));
  animation: dial-sweep 1900ms cubic-bezier(0.22, 1, 0.36, 1) 320ms both;
}

@keyframes dial-sweep {
  to { stroke-dashoffset: 66; }
}

.exam-dial strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: calc(var(--u) * 2.35);
  font-weight: 660;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* The proof: a real item from the TEF bank, answered and marked correct. */
.exam-proof {
  width: 100%;
  margin-top: 10px;
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4);
  border-radius: 18px;
  display: grid;
  gap: calc(var(--u) * 0.7);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 26px rgba(4, 16, 42, 0.3);
  animation: bubble-in 520ms cubic-bezier(0.22, 1, 0.36, 1) 480ms both;
}

.exam-proof-label {
  margin: 0;
  color: var(--bleu);
  font-size: calc(var(--u) * 1.16);
  font-weight: 640;
}

.exam-proof-q {
  margin: 0;
  font-size: calc(var(--u) * 1.28);
  font-weight: 520;
  line-height: 1.36;
}

.exam-proof-q small {
  display: block;
  margin-top: calc(var(--u) * 0.5);
  color: var(--ink);
  font-size: calc(var(--u) * 1.34);
  font-weight: 640;
}

.exam-opt {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.7);
  padding: calc(var(--u) * 0.82) calc(var(--u) * 1.1);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: calc(var(--u) * 1.28);
  font-weight: 550;
}

/* Marked a beat after the question lands, so the learner watches it happen. */
.exam-opt.is-correct {
  border-color: rgba(18, 128, 90, 0.45);
  color: #0f6b4b;
  background: rgba(18, 128, 90, 0.1);
  font-weight: 640;
  animation: option-mark 460ms cubic-bezier(0.22, 1, 0.36, 1) 1500ms both;
}

.exam-opt.is-correct .svg-icon {
  width: calc(var(--u) * 1.55);
  height: calc(var(--u) * 1.55);
  flex: 0 0 calc(var(--u) * 1.55);
  color: #12805a;
}

@keyframes option-mark {
  0% { transform: scale(0.98); border-color: var(--border); background: rgba(18, 128, 90, 0); }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* The conversation demo becomes a light glass card, matching the lesson list
   and every other content surface in the app. */
.talk-thread {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--glass-tint-strong), var(--glass-tint));
  box-shadow: var(--glass-edge), var(--glass-lift);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.talk-pitch {
  margin-top: 14px;
  text-align: center;
}

/* Generous, even inset on all four sides — the tiles were sitting almost on
   the card edge, which is what read as unfinished. */
.talk-benefits {
  margin-top: 11px;
  padding: 14px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--glass-tint-strong), var(--glass-tint));
  box-shadow: var(--glass-edge), var(--glass-lift);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.talk-action {
  width: 100%;
  margin-top: 10px;
  display: grid;
  justify-items: center;
  gap: 9px;
}

.gate-view .page-title {
  text-align: center;
}

/* The headline lives inside the blue hero, exactly like the home screen —
   white on the committed colour rather than black text floating below it. */
.gate-heading {
  margin: 2px 0 0;
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 2px 12px rgba(2, 10, 30, 0.4);
  text-wrap: balance;
}

/* One tight line of support under the headline, still inside the hero. */
.gate-sub {
  max-width: 32ch;
  margin: -3px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

.talk-stage-portrait {
  position: relative;
  width: calc(var(--u) * 8.6);
  height: calc(var(--u) * 8.6);
}

.talk-stage-portrait .avatar-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  box-shadow: 0 12px 32px rgba(4, 16, 42, 0.45);
}

/* Presence rings radiating from the portrait — a live call, not a photo. */
.talk-stage-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.talk-stage-aura i {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  animation: talk-ring 3.3s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.talk-stage-aura i:nth-child(2) { animation-delay: 1.1s; }
.talk-stage-aura i:nth-child(3) { animation-delay: 2.2s; }

@keyframes talk-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.05); opacity: 0; }
}

.talk-stage-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: calc(var(--u) * 0.62) calc(var(--u) * 1.4);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: calc(var(--u) * 1.32);
  font-weight: 600;
}

.talk-stage-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.25);
  animation: presence-breathe 2.4s ease-in-out infinite;
}

@keyframes presence-breathe {
  50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0.12); }
}

/* Conversation preview: her greeting lands first, then a reply is "being
   typed" — the moment is mid-conversation, inviting the learner in. */
.talk-bubble {
  justify-self: start;
  max-width: 88%;
  padding: calc(var(--u) * 0.95) calc(var(--u) * 1.3);
  border-radius: 16px 16px 16px 5px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 18px rgba(4, 16, 42, 0.28);
  font-size: calc(var(--u) * 1.42);
  font-weight: 560;
  line-height: 1.36;
  animation: bubble-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 480ms;
}

.talk-bubble small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(var(--u) * 1.2);
  font-weight: 500;
}

/* The learner's spoken reply, right-aligned with a mic mark. */
.talk-bubble-learner {
  justify-self: end;
  display: flex;
  align-items: center;
  border-radius: 16px 16px 5px 16px;
  background: rgba(209, 225, 255, 0.94);
  animation-delay: 1300ms;
}

.talk-bubble-learner .svg-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-right: 8px;
  color: #37549f;
}

/* The payoff: the correction landing in real time. */
.talk-bubble-correction {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation-delay: 2250ms;
}

.talk-bubble-correction > i {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #12805a;
  background: rgba(18, 128, 90, 0.14);
}

.talk-bubble-correction > i .svg-icon {
  width: 15px;
  height: 15px;
}

.talk-bubble-correction strong {
  color: #12805a;
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

.talk-thread {
  width: 100%;
  display: grid;
  gap: calc(var(--u) * 0.8);
}

.talk-benefits {
  width: 100%;
  /* The UA stylesheet's default list margin would silently add ~16px here and
     break both the fit and the grouped rhythm. */
  margin-bottom: 0;
  display: grid;
  gap: 13px;
  list-style: none;
}

/* Key term in solid white, the rest slightly recessed — each line has its own
   small hierarchy instead of being one flat run of text. */
/* Rows separated by hairlines rather than raw gap: the list reads as one
   considered block instead of three floating lines. */
.talk-benefits li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(59, 72, 130, 0.1);
  color: #414965;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 1.45;
}

.talk-benefits li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.talk-benefits li strong {
  color: var(--ink);
  font-weight: 650;
}

/* Same tinted tiles as the home page's activity list, cycling blue, green and
   gold so the accent language is identical across every screen. */
.talk-benefits li .svg-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(59, 72, 130, 0.08);
}

/* Slightly heavier stroke and a touch more room inside the tile: at 17px a
   1.9 stroke reads thin and wiry, which is what made the glyphs look weak. */
.talk-benefits li .svg-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.1;
}

.talk-benefits li:nth-child(1) .svg-icon {
  color: var(--blue);
  background: linear-gradient(160deg, rgba(214, 225, 252, 0.95), rgba(186, 203, 246, 0.85));
}

.talk-benefits li:nth-child(2) .svg-icon {
  color: var(--green);
  background: linear-gradient(160deg, rgba(211, 240, 226, 0.95), rgba(182, 227, 206, 0.85));
}

.talk-benefits li:nth-child(3) .svg-icon {
  color: var(--gold);
  background: linear-gradient(160deg, rgba(250, 238, 210, 0.95), rgba(244, 224, 176, 0.85));
}

.talk-benefits li:nth-child(4) .svg-icon {
  color: var(--rouge);
  background: linear-gradient(160deg, rgba(252, 219, 223, 0.95), rgba(246, 198, 204, 0.85));
}

.talk-benefits li .svg-icon svg {
  width: calc(var(--u) * 1.65);
  height: calc(var(--u) * 1.65);
}

/* The one warm element on the blue: the same glossy rouge as Start Lesson. */
.talk-cta {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(var(--u) * 5.3);
  border-radius: var(--cta-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 10px 26px rgba(0, 0, 0, 0.3);
  font-size: calc(var(--u) * 1.72);
  font-weight: 640;
  letter-spacing: -0.012em;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* The arrow drifts forward on a slow pulse — the button invites, it doesn't
   just sit there. */
.talk-cta .svg-icon {
  position: relative;
  z-index: 1;
  width: calc(var(--u) * 1.8);
  height: calc(var(--u) * 1.8);
  animation: cta-nudge 2.6s ease-in-out infinite;
}

@keyframes cta-nudge {
  0%, 72%, 100% { transform: translateX(0); }
  84% { transform: translateX(3px); }
}

.talk-cta::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 52%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
}

.talk-cta:active {
  transform: scale(0.98);
}

/* Was white from when this sat on the blue full-bleed gate; on the light page
   it has to be ink and muted like every other supporting line in the app. */
.talk-cta-sub {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

.talk-cta-sub strong {
  color: var(--ink);
  font-weight: 640;
}

.talk-plans-link {
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--bleu);
  font-size: 13px;
  font-weight: 620;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Replaces the boxed note, whose ink-and-grey palette was invisible on blue.
   A quiet centered line under a hairline reads as considered, not unfinished. */
.talk-free-note {
  width: 100%;
  max-width: 38ch;
  margin: 9px auto 0;
  padding-top: 8px;
  border-top: 1px solid rgba(59, 72, 130, 0.14);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

.premium-gate-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: var(--bleu);
}

.premium-gate p {
  margin: 0 0 5px;
  color: var(--rouge);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}

.premium-gate h2 {
  margin: 0 0 9px;
  font-size: 23px;
}

.premium-gate > span:not(.premium-gate-icon) {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.premium-gate > button {
  width: 100%;
  height: 48px;
  margin-top: 18px;
  border: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: white;
  background: var(--rouge);
  font-size: 12px;
  font-weight: 650;
}

.free-access-note {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  color: var(--bleu);
  background: var(--bleu-soft);
}

.free-access-note strong,
.free-access-note span {
  display: block;
}

.free-access-note span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.free-access-note strong {
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 11px;
}

.account-layer {
  position: absolute;
  inset: 0;
  z-index: 75;
  visibility: hidden;
  opacity: 0;
  background: rgba(19, 34, 43, 0.3);
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.account-layer.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.account-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    radial-gradient(90% 40% at 8% 0%, rgba(163, 181, 243, 0.2), transparent 60%),
    radial-gradient(70% 35% at 100% 2%, rgba(243, 182, 196, 0.15), transparent 58%),
    #f7f8fd;
}

/* Three columns now: back control, the view's tinted tile, then the titles. */
.account-header {
  min-height: 82px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(59, 72, 130, 0.1);
  display: grid;
  grid-template-columns: 40px 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  background: #ffffff;
}

.account-header > button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: white;
}

.account-header span {
  color: var(--bleu);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}

.account-header h1 {
  margin: 2px 0 0;
  font-size: 23px;
}

.account-content {
  padding: 24px 20px 28px;
  overflow-y: auto;
  /* One rhythm for every child, so no label can touch the field above it. */
  display: grid;
  align-content: start;
  gap: 16px;
}

.account-emblem {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: var(--bleu);
  box-shadow: 0 12px 26px rgba(16, 66, 143, 0.18);
}

.account-content > h2 {
  margin: 0 0 8px;
  font-size: 27px;
}

.account-content > p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.account-content label > span {
  margin-bottom: 8px;
  display: block;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 620;
}

/* textarea was inheriting the browser's monospace default — every field now
   shares one glass treatment and the app's own type. */
.account-content input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.account-content textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(59, 72, 130, 0.06), 0 3px 10px rgba(59, 72, 130, 0.05);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.account-content input:not([type="radio"]):not([type="checkbox"]):not([type="file"]) { height: 50px; padding: 0 14px; }

.account-content textarea {
  min-height: 118px;
  resize: vertical;
}

.account-content input:not([type="radio"])::placeholder,
.account-content textarea::placeholder {
  color: #8b93ab;
}

.account-content input:not([type="radio"]):focus,
.account-content textarea:focus {
  outline: 0;
  border-color: rgba(16, 66, 143, 0.5);
  box-shadow: 0 0 0 3px rgba(16, 66, 143, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Primary action uses the same layered red as "Start Lesson". */
.account-content > button:not(.account-secondary):not(.account-danger),
.account-content .danger-block > button.account-danger {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  font-size: 14px;
  font-weight: 640;
  transition: transform 160ms ease;
}

.account-content > button:not(.account-secondary):not(.account-danger)::after,
.account-content .danger-block > button.account-danger::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 52%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

.account-content > button > *,
.account-content .danger-block > button > * {
  position: relative;
  z-index: 1;
}

.account-content > button:not(:disabled):active,
.account-content .danger-block > button:active {
  transform: scale(0.985);
}

/* A dimmed red reads as a broken button. Disabled goes fully neutral instead,
   so it looks deliberately inactive rather than faded out. */
.account-content > button:not(.account-secondary):not(.account-danger):disabled {
  opacity: 1;
  border-color: rgba(59, 72, 130, 0.16);
  color: #545c78;
  background: #eceff6;
  box-shadow: none;
}

.account-content > button:not(.account-secondary):not(.account-danger):disabled::after {
  display: none;
}

/* Secondary: glass, blue label — matches "Practice Test" on the home page. */
.account-content .account-secondary {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(16, 66, 143, 0.28);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--bleu);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(59, 72, 130, 0.06), 0 4px 12px rgba(16, 66, 143, 0.08);
  font-size: 13.5px;
  font-weight: 620;
}

.account-content .account-secondary .svg-icon { width: 16px; height: 16px; }

.account-notice {
  margin-top: 0;
  padding: 12px;
  border: 1px solid rgba(217, 71, 63, 0.2);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  color: var(--rouge-deep);
  background: #fdf1f3;
  font-size: 10px;
  line-height: 1.45;
}

/* Tinted tiles matching the home page, one colour per benefit. */
.account-benefits {
  margin-top: 4px;
  padding: 16px;
  border: 1px solid rgba(59, 72, 130, 0.1);
  border-radius: 16px;
  display: grid;
  gap: 13px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(59, 72, 130, 0.06), 0 4px 12px rgba(59, 72, 130, 0.06);
}

.account-benefits > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.account-benefits > div > .svg-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.account-benefits > div > .svg-icon svg { width: 17px; height: 17px; stroke-width: 2.1; }

.account-benefits > div:nth-child(1) > .svg-icon {
  color: var(--blue);
  background: linear-gradient(160deg, #d6e1fc, #bacbf6);
}

.account-benefits > div:nth-child(2) > .svg-icon {
  color: var(--green);
  background: linear-gradient(160deg, #d3f0e2, #b6e3ce);
}

.account-benefits > div:nth-child(3) > .svg-icon {
  color: #5a3fc0;
  background: linear-gradient(160deg, #e2dcfa, #cdc2f4);
}

.account-benefits strong,
.account-benefits small {
  display: block;
}

.account-benefits strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
}

.account-benefits small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.roadmap-module.module-locked .module-badge {
  color: var(--muted);
  background: #f1f3f5;
}

.notification-layer {
  position: absolute;
  inset: 0;
  z-index: 65;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.notification-layer.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.notification-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(11, 21, 51, 0.24);
}

.notification-panel {
  width: calc(100% - 24px);
  max-height: calc(100% - 94px);
  margin: 76px 12px 0;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  position: relative;
  overflow-y: auto;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.95), rgba(240, 243, 253, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 18px 50px rgba(11, 21, 51, 0.22);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}

.notification-panel header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.notification-panel header span {
  color: var(--bleu);
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

.notification-panel header h2 {
  margin: 2px 0 0;
  font-size: 24px;
}

.notification-panel header button {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: white;
}

.notification-list {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.notification-list > button {
  width: 100%;
  min-height: 66px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-align: left;
  background: #f7f9fe;
}

.notification-list > button > .svg-icon:first-child {
  color: var(--bleu);
}

.notification-list strong,
.notification-list small {
  display: block;
}

.notification-list strong {
  font-size: 11px;
}

.notification-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.notification-panel > p {
  margin: 12px 0 0;
  color: var(--muted);
  text-align: center;
  font-size: 9px;
}

.instructor-picker {
  display: grid;
  gap: 12px;
}

.picker-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.picker-heading p {
  margin: 0 0 3px;
  color: var(--bleu);
  font-size: 12px;
  font-weight: 620;
}

.picker-heading h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
}

.picker-heading > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 560;
}

.instructor-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.instructor-choice {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  position: relative;
  color: var(--ink);
  text-align: left;
  background: white;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.instructor-choice > img {
  width: 52px;
  height: 64px;
  border-radius: 7px;
  display: block;
  object-fit: cover;
  object-position: center 16%;
}

.instructor-choice strong,
.instructor-choice small {
  display: block;
}

.instructor-choice strong {
  margin-bottom: 4px;
  font-size: 14px;
}

.instructor-choice small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.instructor-choice > i {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: none;
  place-items: center;
  position: absolute;
  top: 6px;
  right: 6px;
  color: white;
  background: var(--bleu);
}

.instructor-choice > i .svg-icon {
  width: 13px;
  height: 13px;
}

.instructor-choice.selected {
  border-color: var(--bleu);
  background: #f0f3fd;
  box-shadow: 0 7px 18px rgba(16, 66, 143, 0.08);
}

.instructor-choice.selected > i {
  display: grid;
}

.plan-list > div {
  padding: 15px;
}

.plan-list > .selected {
  border-color: var(--bleu);
  background: var(--bleu-soft);
}

.plan-list span {
  margin-bottom: 3px;
  display: block;
  font-weight: 620;
}

.test-layer {
  position: absolute;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  background: white;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.test-layer.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.checkpoint-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(90% 40% at 8% 0%, rgba(163, 181, 243, 0.2), transparent 60%),
    radial-gradient(70% 35% at 100% 2%, rgba(243, 182, 196, 0.15), transparent 58%),
    #f7f8fd;
}

.checkpoint-header {
  min-height: 76px;
  padding: 12px 20px 10px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 10px;
  position: relative;
}

.checkpoint-header > button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #f0f3fb;
}

.checkpoint-header > strong {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.checkpoint-time {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 5px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 620;
}

.checkpoint-time .svg-icon {
  width: 17px;
  height: 17px;
  color: var(--bleu);
}

.checkpoint-time i {
  font-style: normal;
}

.checkpoint-progress {
  height: 5px;
  overflow: hidden;
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  border-radius: 999px;
  background: #e7ebf6;
}

.checkpoint-progress i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--bleu);
  transition: width 220ms ease;
}

.checkpoint-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.checkpoint-content {
  padding: 25px 20px 22px;
}

.checkpoint-count {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 590;
}

.checkpoint-content > h1 {
  margin-bottom: 8px;
  font-size: 34px;
}

.checkpoint-instruction {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.checkpoint-content > h2 {
  margin: 22px 0 13px;
  font-size: 20px;
  line-height: 1.3;
}

.checkpoint-intro {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.checkpoint-emblem {
  width: 82px;
  height: 82px;
  margin-bottom: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: var(--bleu);
  box-shadow: 0 14px 30px rgba(16, 66, 143, 0.2);
}

.checkpoint-emblem .svg-icon {
  width: 38px;
  height: 38px;
}

.checkpoint-intro > p {
  margin-bottom: 7px;
  color: var(--bleu);
  font-size: 13px;
  font-weight: 620;
}

.checkpoint-intro > h1 {
  max-width: 340px;
  margin-bottom: 11px;
  font-size: 31px;
}

.checkpoint-intro > span {
  max-width: 340px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.checkpoint-facts {
  width: 100%;
  margin-top: 25px;
  border-top: 1px solid var(--border);
}

.checkpoint-facts > div {
  min-height: 62px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  text-align: left;
}

.checkpoint-facts > div > .svg-icon {
  color: var(--bleu);
}

.checkpoint-facts strong,
.checkpoint-facts small {
  display: block;
}

.checkpoint-facts strong {
  margin-bottom: 2px;
  font-size: 13px;
}

.checkpoint-facts small {
  color: var(--muted);
  font-size: 11px;
}

.checkpoint-audio {
  width: 100%;
  min-height: 82px;
  padding: 13px;
  border: 1px solid rgba(16, 66, 143, 0.35);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-align: left;
  background: #f0f3fd;
}

.checkpoint-audio > .svg-icon {
  width: 50px;
  height: 50px;
  padding: 14px;
  border-radius: 50%;
  color: white;
  background: var(--bleu);
}

.checkpoint-audio.playing > .svg-icon {
  animation: listening 1.5s ease-in-out infinite;
}

.checkpoint-audio strong,
.checkpoint-audio small {
  display: block;
}

.checkpoint-audio strong {
  margin-bottom: 3px;
  font-size: 15px;
}

.checkpoint-audio small {
  color: var(--muted);
  font-size: 11px;
}

.checkpoint-passage {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--bleu);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  background: #f7f9fd;
  font-size: 17px;
  font-weight: 560;
  line-height: 1.65;
}

.checkpoint-options {
  display: grid;
  gap: 9px;
}

.checkpoint-options button {
  width: 100%;
  min-height: 56px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  background: white;
  font-size: 14px;
  font-weight: 590;
}

.checkpoint-options button > i {
  width: 24px;
  height: 24px;
  border: 1px solid #ced7ea;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: transparent;
}

.checkpoint-options button > i .svg-icon {
  width: 14px;
  height: 14px;
}

.checkpoint-options button.selected {
  border-color: var(--bleu);
  background: #f0f3fd;
}

.checkpoint-options button.selected > i {
  border-color: var(--bleu);
  color: white;
  background: var(--bleu);
}

.checkpoint-visual {
  width: 100%;
  height: 252px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: block;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 12px 26px rgba(18, 55, 67, 0.1);
}

.exam-instruction {
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  background: #f7f9fd;
  font-size: 12px;
  line-height: 1.4;
}

.exam-instruction .svg-icon {
  color: var(--bleu);
}

.checkpoint-record {
  margin-top: 18px;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.checkpoint-record > button {
  width: 82px;
  height: 82px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: var(--rouge);
  box-shadow: 0 14px 28px rgba(217, 71, 63, 0.24);
}

.checkpoint-record > button.recording {
  background: var(--rouge-deep);
  animation: listening 1.5s ease-in-out infinite;
}

.checkpoint-record > button .svg-icon {
  width: 32px;
  height: 32px;
}

.checkpoint-record > strong {
  font-size: 13px;
}

.checkpoint-record > small {
  color: var(--muted);
  font-size: 10px;
}

.writing-test-prompt {
  min-height: 78px;
  margin-bottom: 18px;
  padding: 13px;
  border: 1px solid rgba(16, 66, 143, 0.28);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background: #f0f3fd;
}

.writing-test-prompt > .svg-icon {
  color: var(--bleu);
}

.writing-test-prompt p {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 590;
  line-height: 1.4;
}

.checkpoint-writing span {
  margin-bottom: 7px;
  display: block;
  color: var(--bleu);
  font-size: 12px;
  font-weight: 620;
}

.checkpoint-writing textarea {
  width: 100%;
  min-height: 190px;
  resize: vertical;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--ink);
  background: #f7f9fd;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
}

.checkpoint-writing textarea:focus {
  border-color: var(--bleu);
  outline: 3px solid rgba(16, 66, 143, 0.12);
}

.word-count {
  margin: 6px 0 0;
  color: var(--muted);
  text-align: right;
  font-size: 10px;
}

.checkpoint-notice {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  color: #8a302d;
  background: #fceef1;
  font-size: 11px;
  line-height: 1.4;
}

.checkpoint-footer {
  padding: 12px 20px 18px;
  border-top: 1px solid rgba(225, 231, 238, 0.8);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  background: rgba(255, 255, 255, 0.98);
}

.checkpoint-footer.single {
  grid-template-columns: 1fr;
}

.checkpoint-back,
.checkpoint-primary {
  height: 54px;
  border-radius: 14px;
}

.checkpoint-back {
  padding: 0;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--ink);
  background: white;
}

.checkpoint-back:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.checkpoint-primary {
  padding: 0 16px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  background: var(--rouge);
  box-shadow: 0 10px 24px rgba(217, 71, 63, 0.22);
  font-size: 14px;
  font-weight: 620;
}

.checkpoint-primary:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  box-shadow: none;
}

.checkpoint-results {
  padding-top: 22px;
}

.result-intro {
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.result-score {
  width: 94px;
  height: 94px;
  border: 7px solid var(--bleu-soft);
  border-radius: 50%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--bleu);
}

.result-score strong {
  align-self: center;
  font-size: 34px;
  line-height: 1;
}

.result-score span {
  align-self: center;
  font-size: 10px;
}

.result-intro p {
  margin-bottom: 5px;
  color: var(--bleu);
  font-size: 11px;
  font-weight: 620;
}

.result-intro h1 {
  margin: 0;
  font-size: 25px;
}

.result-list {
  border-top: 1px solid var(--border);
}

.result-list > div {
  min-height: 70px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.result-list > div > .svg-icon {
  color: var(--bleu);
}

.result-list > div.review > .svg-icon {
  color: var(--rouge);
}

.result-list strong,
.result-list small {
  display: block;
}

.result-list strong {
  margin-bottom: 3px;
  font-size: 13px;
}

.result-list small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.examiner-feedback {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(16, 66, 143, 0.28);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background: #f0f3fd;
}

.examiner-feedback img {
  width: 52px;
  height: 60px;
  border-radius: 7px;
  object-fit: cover;
  object-position: center 18%;
}

.examiner-feedback p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.examiner-feedback strong {
  margin-bottom: 3px;
  display: block;
  color: var(--bleu);
  font-size: 12px;
}

.checkpoint-disclaimer {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
  text-align: center;
}

@media (hover: hover) {
  .primary-action:hover,
  .secondary-action:hover,
  .instructor-panel:hover,
  .lesson-card:hover,
  .onboarding-option:hover,
  .onboarding-primary:not(:disabled):hover,
  .lesson-primary:not(:disabled):hover,
  .listen-button:hover,
  .instructor-choice:hover {
    transform: translateY(-2px);
  }

  .primary-action:hover {
    background: var(--rouge-deep);
    box-shadow: 0 12px 24px rgba(217, 71, 63, 0.28);
  }

  .secondary-action:hover,
  .lesson-card:hover {
    box-shadow: 0 10px 22px rgba(59, 72, 130, 0.09);
  }

  .lesson-card:hover {
    background: #f7f9fd;
  }

  .free-instructor-panel:hover {
    border-color: #cddfe2;
    box-shadow: 0 10px 26px rgba(59, 72, 130, 0.085);
    transform: translateY(-1px);
  }

  /* Hover must never touch the active pill: dark-blue-on-dark-blue made the
     label vanish. Inactive tabs get a soft tint preview of the pill instead. */
  .bottom-nav button:not(.active):hover {
    color: var(--bleu);
    background: rgba(58, 99, 196, 0.09);
  }

  .bottom-nav button.active:hover {
    filter: brightness(1.08);
  }

  .icon-button:hover {
    color: var(--bleu);
    transform: translateY(-1px);
  }

  .menu-nav button:not(.active):hover {
    color: var(--bleu);
    background: rgba(58, 99, 196, 0.07);
  }

  .menu-upgrade:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      0 14px 32px rgba(16, 66, 143, 0.4);
  }

  .onboarding-option:hover {
    border-color: #b9d9d7;
  }

  .onboarding-primary:not(:disabled):hover {
    background: var(--rouge-deep);
  }

  .lesson-primary:not(:disabled):hover {
    background: var(--rouge-deep);
  }

  .listen-button:hover {
    color: white;
    background: var(--bleu);
  }
}

/* Starts above the resting position on purpose: the Today view fills its
   scroll container exactly, and downward entry motion would briefly flash a
   scrollbar. Overflow past the top edge is not scrollable, so this does not. */
@keyframes view-enter {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes listening {
  50% { box-shadow: 0 0 0 12px rgba(217, 71, 63, 0.1), 0 14px 28px rgba(217, 71, 63, 0.22); }
}

@keyframes instructor-presence {
  0%, 100% { transform: scale(1.02) translateY(0); }
  50% { transform: scale(1.035) translateY(-1px); }
}

@keyframes avatar-idle {
  0%, 18%, 100% { transform: scale(1.045) rotateX(0deg) rotateZ(0deg) translate3d(0, 0, 0); }
  28% { transform: scale(1.06) rotateX(0.7deg) rotateZ(-0.8deg) translate3d(-1px, -1px, 0); }
  43% { transform: scale(1.052) rotateX(0deg) rotateZ(0.4deg) translate3d(1px, 0, 0); }
  61% { transform: scale(1.06) rotateX(-0.6deg) rotateZ(0.9deg) translate3d(1px, -1px, 0); }
  78% { transform: scale(1.05) rotateX(0deg) rotateZ(-0.3deg) translate3d(0, 0, 0); }
}

@keyframes avatar-light {
  0%, 58% { transform: translateX(-110%); }
  74%, 100% { transform: translateX(125%); }
}

@keyframes avatar-smile {
  0%, 38%, 59%, 100% { opacity: 0; }
  43%, 54% { opacity: 1; }
}

@keyframes avatar-blink {
  0%, 44%, 47%, 74%, 77%, 100% { opacity: 0; }
  45%, 46%, 75%, 76% { opacity: 1; }
}

@keyframes avatar-wave {
  from { transform: scaleY(0.55); opacity: 0.66; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes avatar-online {
  0% { box-shadow: 0 0 0 0 rgba(27, 164, 77, 0.32); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(27, 164, 77, 0); }
}

@keyframes talk-wave {
  from { transform: scaleY(0.45); }
  to { transform: scaleY(1); }
}

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 66, 143, 0.18); }
  50% { box-shadow: 0 0 0 5px rgba(16, 66, 143, 0); }
}

@media (max-width: 470px) {
  .app-shell {
    padding: 0;
  }

  .phone-frame {
    /* Edge-to-edge on phones, so the frame keeps the full 100vh and only the
       topbar and bottom nav (154px) come off the vertical budget. */
    --u: clamp(6.2px, calc((100vh - 154px) * 0.01218), 9.6px);
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .topbar {
    padding-inline: 15px;
  }

  .brand {
    font-size: 28px;
  }

  .screen-content {
    padding: calc(var(--u) * 0.7) 16px 0;
  }

  /* Phones use a slightly smaller screen-content top pad, so the cancelling
     margins have to match it exactly for full-bleed views to stay flush. */
  .today-view {
    min-height: calc(100% + var(--u) * 0.7);
    margin-top: calc(var(--u) * -0.7);
  }

  h1 {
    font-size: 32px;
  }

  .scene-card {
    width: 100%;
    height: 100%;
  }

  .hero-content {
    width: 69%;
    padding-block: calc(var(--u) * 1.15);
  }

  .today-view .hero-row h1 {
    font-size: calc(var(--u) * 3.45);
  }

  .progress-panel {
    grid-template-columns: minmax(0, 1fr) calc(var(--u) * 6.5) 84px;
    gap: 9px;
    padding: calc(var(--u) * 1.35) 14px;
  }

  .progress-panel h2 {
    font-size: calc(var(--u) * 2.85);
  }

  .score-ring {
    width: calc(var(--u) * 6.5);
    height: calc(var(--u) * 6.5);
  }

  .instructor-panel {
    grid-template-columns: 84px minmax(0, 1fr) 36px;
    gap: 9px;
    padding-right: 10px;
  }

  .chat-mark {
    width: 38px;
    height: 38px;
  }
}

/* The old fixed 880px compact tier is gone: the --u fluid unit above now
   compresses the Today screen continuously at every height, so there is no
   band of window sizes left where the last card falls behind the nav bar. */
@media (max-height: 880px) and (min-width: 361px) {
  .topbar {
    height: 68px;
    padding-top: 8px;
  }
}

@media (max-width: 360px) {
  .action-row {
    grid-template-columns: 1fr;
  }

  .progress-panel {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .level-note {
    grid-column: 1 / -1;
  }

  .instructor-panel {
    grid-template-columns: 94px minmax(0, 1fr) 36px;
  }

  .onboarding-welcome h1,
  .onboarding-question h1 {
    font-size: 29px;
  }

  .onboarding-question,
  .onboarding-summary {
    padding-inline: 16px;
  }

  .onboarding-option {
    min-height: 68px;
  }

  .instructor-choices {
    grid-template-columns: 1fr;
  }

  .lesson-content {
    padding-inline: 16px;
  }

  .lesson-content h1 {
    font-size: 29px;
  }

  .lesson-scene {
    height: 180px;
  }

  .dialogue-row {
    grid-template-columns: 46px minmax(0, 1fr) 40px;
    gap: 8px;
  }

  .dialogue-row img,
  .learner-avatar {
    width: 46px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   AUTH — sign in / create account

   The front door is the same product as the rooms behind it: light, calm,
   tricolore in a muted register, one clear composition. Camille is the
   feature — large, centred, alive (blink + smile from the home page) with a
   rotating greeting — and the headline underneath rotates like the home hero.
   Motion is soft: two drifting pastel blooms, a slow tricolore ring around
   Camille, the two rotators. Nothing that competes with the form.
   ========================================================================== */
.auth-layer {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none;
}

.auth-layer.open {
  display: block;
}

.auth-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  background:
    radial-gradient(90% 60% at 50% -12%, #e6eeff 0%, rgba(230, 238, 255, 0) 70%),
    linear-gradient(180deg, #f7f9fe 0%, #f3f5fb 100%);
  animation: auth-shell-in 320ms ease both;
}

@keyframes auth-shell-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Two pastel blooms — blue upper-left, rose lower-right — drifting slowly.
   Blurred and low-alpha so they read as light, not colour. */
.auth-aurora {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  filter: blur(54px);
}

.auth-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.auth-aurora i:nth-child(1) {
  width: 64%;
  height: 48%;
  top: 4%;
  left: -6%;
  background: radial-gradient(circle, rgba(58, 99, 196, 0.26), transparent 66%);
  animation: auth-drift-a 14s ease-in-out infinite;
}

.auth-aurora i:nth-child(2) {
  width: 62%;
  height: 50%;
  right: -10%;
  bottom: 2%;
  background: radial-gradient(circle, rgba(206, 43, 55, 0.16), transparent 66%);
  animation: auth-drift-b 18s ease-in-out infinite;
}

@keyframes auth-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(10%, 12%, 0) scale(1.14); }
}

@keyframes auth-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50% { transform: translate3d(-12%, -10%, 0) scale(0.94); }
}

.auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 4px 12px rgba(59, 72, 130, 0.08);
  transition: background 160ms ease, transform 160ms ease;
}

.auth-close:hover {
  background: #ffffff;
  transform: scale(1.05);
}

.auth-body {
  position: relative;
  z-index: 2;
  min-height: 0;
  padding: 26px 20px 20px;
  overflow-y: auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 72, 130, 0.25) transparent;
}

/* ── Hero: Camille, her greeting, the headline ─────────────────────────── */
.auth-hero {
  width: min(100%, 380px);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  animation: auth-rise-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes auth-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* A slow tricolore ring turns behind Camille — the only "live" ornament on
   the screen, so it carries weight. The white gap ring keeps the portrait
   clean against it. */
.auth-tutor-ring {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.auth-tutor-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--bleu) 0deg, #cfe0ff 110deg, #ffffff 180deg, #ffd1cc 250deg, var(--rouge) 360deg);
  animation: auth-ring-turn 14s linear infinite;
  z-index: -1;
}

.auth-tutor-ring::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #ffffff;
  z-index: -1;
}

@keyframes auth-ring-turn {
  to { transform: rotate(360deg); }
}

.auth-tutor-ring .avatar-stage {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bleu-soft);
  box-shadow: 0 14px 34px rgba(16, 66, 143, 0.22);
}

.auth-tutor-ring .avatar-face-stack,
.auth-tutor-ring .avatar-frame {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
}

.auth-tutor-ring .avatar-presence {
  display: none;
}

/* Speech bubble under Camille, tail pointing up to her. Swaps its line with a
   short rise so the change is noticed but never jarring. */
.auth-bubble {
  position: relative;
  margin-top: 4px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(59, 72, 130, 0.1);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.auth-bubble::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  background: #ffffff;
  transform: translateX(-50%) rotate(45deg);
  border-top-left-radius: 2px;
}

.auth-bubble.swap {
  animation: auth-swap-in 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes auth-swap-in {
  from { opacity: 0.2; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* Headline: quiet first line, strong rotating second line in brand blue. The
   words reuse the home page's per-word entrance. */
.auth-headline {
  margin: 4px 0 0;
  display: grid;
  gap: 1px;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.auth-headline-fixed {
  color: var(--muted);
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -0.012em;
}

/* Each phrase carries its own theme tone via --tail-word / --tail-shine, set
   inline by paintAuthTail(), so the line cycles bleu → rouge → green → gold →
   violet as it rotates. Falls back to bleu. */
.auth-headline-tail {
  --tail-word: var(--bleu);
  --tail-shine: var(--blue);
  min-height: 36px;
  color: var(--tail-word);
  font-size: 28px;
  font-weight: 700;
  transition: color 320ms ease;
}

.auth-headline-tail .headline-word {
  --word: var(--tail-word);
  --shine: var(--tail-shine);
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.auth-card {
  width: min(100%, 380px);
  padding: 20px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 22px 56px rgba(16, 66, 143, 0.12);
  animation: auth-rise-in 560ms 60ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-eyebrow {
  margin: 0 0 4px;
  color: var(--bleu);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-lead {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.auth-form {
  display: grid;
  gap: 11px;
}

/* Floating-label fields on a soft grey well. */
.auth-field {
  position: relative;
}

.auth-field input {
  width: 100%;
  height: 54px;
  padding: 19px 14px 7px;
  border: 1px solid #e2e7f5;
  border-radius: 14px;
  color: var(--ink);
  background: #f4f6fb;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.auth-field input:focus {
  outline: none;
  border-color: var(--blue);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(58, 99, 196, 0.16);
}

.auth-field label {
  position: absolute;
  top: 17px;
  left: 15px;
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
  transition: transform 160ms ease, color 160ms ease, font-size 160ms ease;
  transform-origin: left top;
}

.auth-field input:focus + label,
.auth-field.filled label,
.auth-field input:not(:placeholder-shown) + label {
  transform: translateY(-11px);
  color: var(--blue);
  font-size: 10.5px;
  font-weight: 680;
  letter-spacing: 0.04em;
}

.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  caret-color: var(--ink);
}

.auth-reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  transform: translateY(-50%);
  transition: color 150ms ease, background 150ms ease;
}

.auth-reveal:hover {
  color: var(--ink);
  background: rgba(59, 72, 130, 0.08);
}

.auth-reveal .svg-icon {
  width: 17px;
  height: 17px;
}

/* Strength: four segments, rouge → gold → green. */
.auth-strength {
  display: grid;
  gap: 6px;
  margin-top: -2px;
}

.auth-strength i {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.auth-strength b {
  height: 3px;
  border-radius: 999px;
  background: #e6e9f5;
  transition: background 240ms ease;
}

.auth-strength[data-strength="1"] b:nth-child(-n + 1),
.auth-strength[data-strength="2"] b:nth-child(-n + 2),
.auth-strength[data-strength="3"] b:nth-child(-n + 3),
.auth-strength[data-strength="4"] b:nth-child(-n + 4) {
  background: var(--rouge);
}

.auth-strength[data-strength="3"] b:nth-child(-n + 3) {
  background: #d9a63c;
}

.auth-strength[data-strength="4"] b {
  background: var(--green);
}

.auth-strength small {
  color: var(--muted);
  font-size: 10.5px;
}

.auth-strength small strong {
  color: var(--ink);
  font-weight: 680;
}

.auth-link {
  padding: 0;
  border: 0;
  color: var(--bleu);
  background: transparent;
  font-size: 11.5px;
  font-weight: 640;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-link.resend {
  justify-self: start;
  margin: -6px 0 12px;
  font-size: 12px;
}

.auth-link.right {
  justify-self: end;
  margin-top: -3px;
}

/* The CTA is the house primary — the same red as the home page. It lives in
   the shared single-source recipe; only sizing is set here. */
.auth-submit {
  width: 100%;
  min-height: 54px;
  margin-top: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.auth-submit > * {
  position: relative;
  z-index: 1;
}

.auth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
}

.auth-submit:disabled {
  cursor: progress;
  filter: saturate(0.75) brightness(0.96);
}

.auth-submit .svg-icon {
  width: 17px;
  height: 17px;
}

.auth-submit.busy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 36%, rgba(255, 255, 255, 0.34) 50%, transparent 64%);
  animation: auth-busy-sweep 1.1s linear infinite;
}

@keyframes auth-busy-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.auth-switch {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.auth-switch button {
  padding: 0;
  border: 0;
  color: var(--bleu);
  background: transparent;
  font-size: 12px;
  font-weight: 720;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-alert {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(206, 43, 55, 0.24);
  border-radius: 13px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: var(--rouge-deep);
  background: #fdf1f3;
  font-size: 12.5px;
  line-height: 1.4;
  animation: auth-alert-in 240ms ease both;
}

.auth-alert.good {
  border-color: rgba(31, 122, 85, 0.28);
  color: var(--green);
  background: #eef9f4;
}

.auth-alert .svg-icon {
  width: 16px;
  height: 16px;
}

@keyframes auth-alert-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Trust row: the house tinted tiles, small. */
.auth-assurances {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  list-style: none;
}

.auth-assurances li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.auth-assurances li > i {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.auth-assurances li > i.tone-blue { color: var(--blue); background: linear-gradient(160deg, #d6e1fc, #bacbf6); }
.auth-assurances li > i.tone-green { color: var(--green); background: linear-gradient(160deg, #d3f0e2, #b6e3ce); }
.auth-assurances li > i.tone-gold { color: var(--gold); background: linear-gradient(160deg, #faeed2, #f4e0b0); }

.auth-assurances .svg-icon {
  width: 13px;
  height: 13px;
}

html.reduce-motion .auth-aurora i,
html.reduce-motion .auth-shell,
html.reduce-motion .auth-hero,
html.reduce-motion .auth-card,
html.reduce-motion .auth-tutor-ring::before,
html.reduce-motion .auth-bubble,
html.reduce-motion .auth-headline-tail .headline-word,
html.reduce-motion .auth-submit.busy::before,
html.reduce-motion .auth-alert {
  animation: none;
}

/* Short viewports: shrink the hero, never the form. */
@media (max-height: 700px) {
  .auth-body {
    align-content: start;
    padding-top: 14px;
    gap: 12px;
  }

  .auth-tutor-ring {
    width: 84px;
    height: 84px;
  }

  .auth-tutor-ring .avatar-stage {
    width: 74px;
    height: 74px;
  }

  .auth-headline-fixed {
    font-size: 15px;
  }

  .auth-headline-tail {
    min-height: 30px;
    font-size: 24px;
  }

  .auth-lead {
    margin-bottom: 12px;
  }
}

/* Signed-out identity card: a real way in, not a dead label. */
.account-identity.signed-out {
  grid-template-columns: 54px minmax(0, 1fr) auto;
}

.identity-signin {
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  background: linear-gradient(160deg, #2e5cb0, var(--bleu));
  box-shadow: 0 4px 12px rgba(16, 66, 143, 0.28);
  font-size: 11.5px;
  font-weight: 680;
  white-space: nowrap;
}

.identity-signin .svg-icon {
  width: 13px;
  height: 13px;
}

/* While the gate is up the app chrome is inert and hidden from view, so a
   visitor cannot see or tab into a dashboard they have not signed in to. */
.phone-frame.auth-gated > :not(.auth-layer) {
  visibility: hidden;
}