:root {
  --navy: #07152f;
  --navy-2: #0f172a;
  --blue: #2563eb;
  --cyan: #00c2ff;
  --purple: #8b5cf6;
  --green: #22c55e;
  --bg: #eef5ff;
  --surface: rgba(255, 255, 255, 0.9);
  --white: #ffffff;
  --muted: #64748b;
  --light: #f8fafc;
  --line: #dbeafe;

  /* Elevation scale — shared depths so cards/buttons/modals read as one system */
  --shadow-xs: 0 8px 20px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 12px 30px rgba(15, 23, 42, 0.07);
  --shadow-soft: 0 18px 44px rgba(15, 23, 42, 0.08);
  --shadow: 0 28px 80px rgba(15, 23, 42, 0.14);
  --shadow-lg: 0 36px 90px rgba(15, 23, 42, 0.16);
  --shadow-accent: 0 16px 40px rgba(37, 99, 235, 0.24);
  --shadow-accent-lg: 0 22px 55px rgba(37, 99, 235, 0.24);
  --accent-soft: rgba(37, 99, 235, 0.08);

  /* Radius scale — every rounded surface picks one of these */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Gradients — built from the palette above only, no new hues */
  --gradient-primary: linear-gradient(135deg, var(--blue), var(--cyan));
  --gradient-accent: linear-gradient(135deg, var(--purple), var(--blue));
  --gradient-success: linear-gradient(135deg, var(--green), var(--cyan));

  /* Motion tokens — shared by every animation utility below, so
     prefers-reduced-motion only has to be handled in one place. */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  /* Confetti palette — same 4 brand colors, no new hues */
  --confetti-1: var(--blue);
  --confetti-2: var(--cyan);
  --confetti-3: var(--purple);
  --confetti-4: var(--green);
}

/* Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--navy-2);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 28%),
    radial-gradient(circle at bottom right, rgba(0, 194, 255, 0.12), transparent 22%),
    linear-gradient(180deg, #f6faff 0%, var(--bg) 100%);
  line-height: 1.6;
  scroll-behavior: smooth;
  min-height: 100vh;
}

body::before,
body::after {
  content: '';
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}

body::before {
  top: -100px;
  left: -120px;
  background: rgba(37, 99, 235, 0.16);
}

body::after {
  right: -80px;
  bottom: -140px;
  background: rgba(0, 194, 255, 0.16);
}

body.modal-open {
  overflow: hidden;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

::selection {
  background: rgba(37, 99, 235, 0.18);
  color: var(--navy-2);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--ease-standard),
    transform 0.7s var(--ease-standard);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   Animation utilities — shared building blocks so every view opts into
   the same small set of effects via class names instead of bespoke
   per-view animation code. All covered by the global
   prefers-reduced-motion block further down (it zeroes every
   animation-duration/transition-duration on the page), so none of these
   need their own reduced-motion override. */

/* Entrance for content injected dynamically after load (e.g. a
   freshly-rendered lesson list), where an IntersectionObserver isn't
   warranted - use .reveal-on-scroll above for anything already in the
   viewport-observed flow. */
.card-enter {
  animation: fade-in-up var(--duration-slow) var(--ease-standard);
}

/* Large, clear buttons still need a tactile response on click - kept to
   a small scale so it never feels like the button "jumps". */
.btn-press {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.btn-press:active {
  transform: scale(0.97);
}

/* Hover lift capped at 2-4px per the design spec - never more, so it
   reads as responsive rather than floaty. */
.hover-lift {
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

/* Applied to progress-bar fill elements that already render an inline
   `style="width:X%"` - the browser animates the width transition
   automatically on the next re-render, no JS timing logic needed. */
.progress-fill-animated {
  transition: width var(--duration-slow) var(--ease-standard);
}

/* Confetti burst - a handful of .confetti-piece nodes spawned inside a
   fixed .confetti-burst container, self-removing on animationend. See
   celebrateActivityCompletion() in script.js. */
.confetti-burst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: confetti-fall 1.1s ease-in forwards;
}

@keyframes confetti-fall {
  from {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: translateY(70vh) rotate(340deg);
    opacity: 0;
  }
}

/* XP badge micro-animation on activity completion - a brief scale/glow,
   not a persistent state, so it's a plain keyframe rather than a toggled
   :hover/:active rule. */
@keyframes xp-pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(0, 194, 255, 0));
  }
  40% {
    transform: scale(1.18);
    filter: drop-shadow(0 0 10px rgba(0, 194, 255, 0.55));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(0, 194, 255, 0));
  }
}

.xp-celebrate {
  animation: xp-pulse var(--duration-slow) var(--ease-standard);
}

/* Small pulsing dot/bar shown next to the currently-playing audio
   control - toggled alongside the existing .is-active play/pause state
   classes, not a replacement for them. */
@keyframes audio-pulse {
  0%,
  100% {
    transform: scaleY(0.4);
    opacity: 0.6;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.audio-playing-indicator {
  display: inline-block;
  width: 3px;
  height: 12px;
  margin-left: 2px;
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
  animation: audio-pulse 0.9s ease-in-out infinite;
}

a {
  text-decoration: none;
  color: inherit;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  background: var(--blue);
  color: white;
  padding: 10px 14px;
  border-radius: 999px;
  z-index: 100;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* View titles (tabindex="-1") only ever receive focus programmatically, on
   a hash/view change - never by mouse - so a plain :focus outline (not
   :focus-visible) is always the right call here. */
.hero-content h2:focus,
.section-heading h2:focus {
  outline: 3px solid var(--blue);
  outline-offset: 6px;
  border-radius: 4px;
}

.navbar {
  width: 100%;
  padding: 14px 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(20px);
  z-index: 30;
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
  box-shadow: 0 10px 30px rgba(7, 21, 47, 0.04);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  min-width: 0;
}

.brand-logo-symbol {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: block;
  border-radius: 18px;
  background-color: #fff;
  background-image: url('/andergo-logo.png');
  background-repeat: no-repeat;
  background-size: 175% auto;
  background-position: center 7%;
  box-shadow: var(--shadow-xs);
}

.brand-name {
  min-width: 0;
}

.brand h1 {
  font-size: 1rem;
  letter-spacing: 0.035em;
  font-weight: 900;
  line-height: 1.15;
}

.brand p {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.global-language-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.65rem 6%;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(37, 99, 235, 0.12);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.global-language-controls .language-pair-bar {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 0.55rem;
}

.global-language-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.global-language-summary .path-pair-preview {
  margin: 0;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
}

.menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--navy-2);
  border-radius: 999px;
}

.menu {
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 700;
  color: #334155;
  font-size: 0.88rem;
  flex-wrap: nowrap;
}

.menu a {
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}

.menu a:hover {
  color: var(--blue);
}

.menu a:hover::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-radius: 999px;
}

.menu a.active {
  color: var(--blue);
}

.menu a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-radius: 999px;
}

/* Two mutually-exclusive nav link sets (visitor vs signed-in member),
   toggled by renderAuthState() in script.js. display:contents keeps each
   group's <a> children as direct flex items of .menu, matching the layout
   .menu already had before the groups existed. */
.nav-group {
  display: contents;
}

.nav-group[hidden] {
  display: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  flex-wrap: nowrap;
  flex-shrink: 0;
  justify-content: flex-end;
}

.user-chip[hidden] {
  display: none;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--blue);
  font-weight: 800;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32ch;
}

.nav-actions .login {
  padding: 9px 16px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
  color: #334155;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.nav-actions .login:hover {
  color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
}

.logout-btn {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
  color: #475569;
  font-weight: 800;
  font-size: 0.82rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}

.logout-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}

.signup,
.primary-btn {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: white;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-weight: 800;
  box-shadow: var(--shadow-accent);
  display: inline-block;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
  position: relative;
}

.signup[hidden],
.primary-btn[hidden] {
  display: none;
}

.signup:hover,
.primary-btn:hover,
.signup:focus-visible,
.primary-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent-lg);
  filter: saturate(1.05);
}

.primary-btn::after {
  content: '→';
  display: inline-block;
  margin-left: 10px;
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.primary-btn:hover::after {
  transform: translateX(3px);
}

.secondary-btn {
  border: 1px solid rgba(96, 165, 250, 0.35);
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-weight: 800;
  display: inline-block;
  background: rgba(255, 255, 255, 0.95);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.secondary-btn:hover {
  transform: translateY(-1px);
  border-color: var(--blue);
  color: var(--blue);
}

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
  padding: 72px 6%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(235, 246, 255, 1) 100%);
  position: relative;
  overflow: hidden;
}

.hero-content,
.hero-card {
  animation: fade-in-up 0.8s ease both;
}

.hero-card {
  animation-delay: 0.1s;
}

.hero:before {
  content: '';
  position: absolute;
  left: -40px;
  top: 40px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.12);
  filter: blur(32px);
}

.hero:after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -40px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(0, 194, 255, 0.12);
  filter: blur(32px);
}

.pill {
  display: inline-flex;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--blue);
  background: rgba(37, 99, 235, 0.12);
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}

.hero h2 {
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.07em;
  max-width: 780px;
  margin-bottom: 26px;
}

.hero p {
  font-size: 1.18rem;
  color: #475569;
  max-width: 640px;
  margin-bottom: 34px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 42px;
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 680px;
}

.quick-stats div {
  background: white;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.quick-stats strong {
  display: block;
  font-size: 1.25rem;
  color: var(--blue);
}

.quick-stats span {
  font-size: 0.9rem;
  color: var(--muted);
}

.hero-card {
  display: grid;
  place-items: center;
  padding: 24px 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(0, 194, 255, 0.1));
  border-radius: 42px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hero-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lg);
}

.hero-card:before,
.hero-card:after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(35px);
  opacity: 0.7;
}

.hero-card:before {
  width: 260px;
  height: 260px;
  background: rgba(37, 99, 235, 0.2);
  top: -60px;
  right: 40px;
}

.hero-card:after {
  width: 200px;
  height: 200px;
  background: rgba(0, 194, 255, 0.22);
  bottom: -50px;
  left: 20px;
}

.course-card {
  width: min(460px, 90%);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-2xl);
  padding: 34px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(59, 130, 246, 0.08);
  backdrop-filter: blur(12px);
}

.course-card > *:not(:last-child) {
  margin-bottom: 22px;
}

.card-top {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 26px;
}

.progress-summary {
  text-align: center;
  margin-bottom: 22px;
}

.progress-summary p {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.95rem;
}

.progress-bar {
  width: 100%;
  height: 16px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.progress-meter {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.progress-text {
  margin-top: 10px;
  font-size: 0.92rem;
  color: var(--muted);
}

.progress-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--blue);
  background:
    radial-gradient(circle at 50% 50%, white 55%, transparent 57%),
    conic-gradient(var(--blue) 68%, #dbeafe 0);
  box-shadow: inset 0 12px 30px rgba(37, 99, 235, 0.12);
}

.skill-grid div {
  background: #f8fafc;
  border-radius: 16px;
  padding: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.course-card button {
  width: 100%;
  border: none;
  padding: 15px;
  border-radius: 16px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.18);
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.course-card button:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 45px rgba(37, 99, 235, 0.22);
}

.auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 47, 0.6);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 50;
}

.auth-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.auth-panel {
  width: min(540px, 92%);
  background: white;
  border-radius: 28px;
  box-shadow: 0 40px 80px rgba(15, 23, 42, 0.25);
  padding: 32px;
  position: relative;
}

/* Caps the panel's height so the primary button is always reachable without
   the student having to zoom out - the ID selectors give this enough
   specificity to win over the shared .auth-panel rule further down without
   depending on source order. */
#authModal .auth-panel,
#usernameOnboardingModal .auth-panel {
  width: min(92vw, 520px);
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}

@media (max-width: 640px) {
  #authModal .auth-panel,
  #usernameOnboardingModal .auth-panel {
    padding: 20px;
  }

  #authModal .auth-form,
  #authModal .signup-fields,
  #authModal .signup-step,
  #authModal .signup-pending {
    gap: 14px;
  }

  #authModal .auth-form input,
  #usernameOnboardingModal input {
    min-height: 48px;
  }

  /* Narrower than desktop so all 6 boxes fit inside a 360px-wide viewport
     without horizontal scroll (360 * 0.92 - 2*20 padding =~ 291px content
     width; 6 * 40px + 5 * 6px gap = 270px). */
  #authModal .otp-input-row {
    gap: 6px;
  }

  #authModal .otp-digit {
    width: 40px;
    height: 52px;
    font-size: 1.2rem;
  }

  #authModal .auth-form .primary-btn,
  #authModal .auth-form .secondary-btn,
  #authModal .signup-pending .primary-btn,
  #authModal .signup-pending .secondary-btn,
  #usernameOnboardingModal .primary-btn,
  #usernameOnboardingModal .secondary-btn {
    min-height: 48px;
  }
}

.close-modal {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #f8fafc;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--navy-2);
}

.auth-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--navy-2);
  padding: 16px 18px;
  border-radius: 18px;
  font-weight: 700;
  cursor: pointer;
}

.auth-tab.active {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: white;
  border-color: transparent;
}

.auth-forms {
  display: grid;
}

.auth-form {
  display: none;
  gap: 18px;
}

.auth-form.active {
  display: grid;
}

.auth-form h3 {
  font-size: 1.9rem;
  margin-bottom: 20px;
}

.auth-form label {
  display: grid;
  gap: 10px;
  color: var(--navy-2);
  font-weight: 700;
}

.auth-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--navy-2);
}

.auth-form .primary-btn {
  width: 100%;
  padding: 16px 20px;
  font-size: 1rem;
}

.auth-note {
  color: var(--muted);
  font-size: 0.95rem;
}

.signup-fields {
  display: grid;
  gap: 18px;
}

.signup-step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.signup-step-indicator .step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.35;
  transition:
    background 0.2s ease,
    opacity 0.2s ease;
}

.signup-step-indicator .step-dot.active {
  background: var(--blue);
  opacity: 1;
}

.auth-step-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.signup-step {
  display: grid;
  gap: 18px;
}

.signup-step[hidden] {
  display: none;
}

.signup-step-actions {
  display: flex;
  gap: 12px;
}

.signup-step-actions .primary-btn,
.signup-step-actions .secondary-btn {
  flex: 1;
  width: auto;
  text-align: center;
}

@media (max-width: 480px) {
  .signup-step-actions {
    flex-direction: column;
  }
}

.signup-pending {
  display: grid;
  gap: 14px;
}

.signup-pending[hidden] {
  display: none;
}

.signup-pending-heading {
  color: var(--green);
  font-size: 1.3rem;
  font-weight: 800;
}

.signup-pending-message {
  color: var(--navy-2);
  font-size: 1rem;
  line-height: 1.5;
}

.signup-pending .primary-btn,
.signup-pending .secondary-btn {
  width: 100%;
  padding: 16px 20px;
  font-size: 1rem;
}

.auth-tabs.is-hidden {
  display: none;
}

.verify-account-step[hidden],
.verify-account-success[hidden] {
  display: none;
}

.verify-account-step h4,
.verify-account-success h4 {
  font-size: 1.3rem;
  margin: 0 0 6px;
}

.otp-input-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.otp-digit {
  width: 46px;
  height: 56px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--navy-2);
}

.otp-digit:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.otp-status {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.otp-status.is-error {
  color: #dc2626;
}

.password-field {
  position: relative;
  display: block;
}

.password-field input {
  padding-right: 52px;
}

.password-toggle-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.15rem;
  min-width: 40px;
  min-height: 40px;
  border-radius: 12px;
}

.password-toggle-btn:hover {
  background: rgba(15, 23, 42, 0.06);
}

.password-toggle-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.auth-field-hint {
  margin: -8px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.username-availability-status {
  margin: -8px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  min-height: 1.1em;
  color: var(--muted);
}

.username-availability-status.is-available {
  color: #15803d;
}

.username-availability-status.is-error {
  color: #dc2626;
}

.password-strength {
  margin: -8px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  min-height: 1.1em;
  color: var(--muted);
}

.password-strength.is-weak {
  color: #dc2626;
}

.password-strength.is-fair {
  color: #d97706;
}

.password-strength.is-good {
  color: #2563eb;
}

.password-strength.is-strong {
  color: #15803d;
}

.auth-forgot-link {
  justify-self: start;
  border: none;
  background: none;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0;
  cursor: pointer;
}

.auth-forgot-link:hover {
  text-decoration: underline;
}

.reset-password-status {
  min-height: 1.1em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.reset-password-status.is-error {
  color: #dc2626;
}

.auth-status {
  min-height: 1.1em;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f766e;
}

.auth-status.is-error {
  color: #dc2626;
}

/* Username onboarding - reuses .auth-modal/.auth-panel's backdrop and card
   conventions, same as .confirm-modal, since this is another modal-like
   surface shown on top of any view. */
.username-onboarding-modal {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 47, 0.6);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 50;
}

.username-onboarding-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.username-onboarding-modal .auth-panel {
  width: min(440px, 92%);
}

.username-onboarding-modal form {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.username-onboarding-modal .primary-btn,
.username-onboarding-modal .secondary-btn {
  width: 100%;
  padding: 14px 18px;
}

.reset-password-section {
  max-width: 480px;
  margin: 0 auto;
}

.reset-password-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: var(--shadow-soft);
}

.reset-password-card form {
  display: grid;
  gap: 18px;
}

.reset-password-card label {
  display: grid;
  gap: 10px;
  color: var(--navy-2);
  font-weight: 700;
}

.reset-password-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--navy-2);
}

.reset-password-success,
.reset-password-invalid {
  display: grid;
  gap: 12px;
  text-align: center;
}

/* Logout confirmation dialog - reuses .auth-modal/.auth-panel's backdrop
   and card conventions (same tokens, same open/close pattern) since this
   is the only other modal-like surface in the app. */
.confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 47, 0.6);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 60;
}

.confirm-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.confirm-panel {
  width: min(420px, 90%);
  background: white;
  border-radius: 28px;
  box-shadow: 0 40px 80px rgba(15, 23, 42, 0.25);
  padding: 32px;
}

.confirm-panel h3 {
  font-size: 1.4rem;
  margin-bottom: 22px;
}

.confirm-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.confirm-actions button,
.confirm-actions a.primary-btn {
  flex: 1;
  min-width: 140px;
  text-align: center;
}

/* Paywall modal (shown when a Free-tier monthly cap is reached) - reuses
   .confirm-modal/.confirm-panel for the overlay and card, adds only the
   pricing-specific bits below. */
.paywall-panel {
  width: min(460px, 90%);
}

.paywall-usage-line {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: -12px;
  margin-bottom: 14px;
}

.paywall-features {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--navy-2);
}

.paywall-features li::before {
  content: '✔ ';
  color: var(--blue);
}

.paywall-price-line {
  font-weight: 700;
  color: var(--navy-2);
  margin-bottom: 22px;
}

.path-pair-preview {
  color: var(--blue);
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: -8px;
  margin-bottom: 6px;
}

.skill-tabs {
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 32px;
  overflow: hidden;
  margin-bottom: 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 26px 56px rgba(15, 23, 42, 0.08);
}

.skill-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.96));
}

.skill-tab-button {
  flex: 1 1 140px;
  border: none;
  background: transparent;
  color: var(--navy-2);
  padding: 18px 0;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.skill-tab-button.active {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: white;
}

.skill-panel {
  display: none;
  padding: 28px 32px 34px;
}

.skill-panel.active {
  display: block;
}

.skill-panel h4 {
  margin-bottom: 14px;
}

.skill-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.skill-panel p {
  color: var(--muted);
  margin-bottom: 18px;
}

.skill-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.skill-focus-block {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.82);
}

.skill-focus-block strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
}

.skill-focus-block span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.skill-mini-vocab {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.skill-mini-vocab span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 8px;
  background: white;
  color: var(--muted);
  font-size: 0.86rem;
}

.skill-mini-vocab strong {
  color: var(--navy);
}

.skill-reading-text {
  margin-top: 16px;
  padding: 14px;
  border-left: 3px solid var(--blue);
  background: rgba(37, 99, 235, 0.05);
  line-height: 1.65;
}

.tutor-action {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: stretch;
  margin: 18px 0 28px;
}

.tutor-action .primary-btn {
  padding: 16px 26px;
  font-size: 1rem;
  border-radius: 20px;
  align-self: flex-start;
}

.predictive-box {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
}

.predictive-box strong {
  display: block;
  color: var(--blue);
  margin-bottom: 10px;
}

.predictive-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.predictive-suggestion {
  background: white;
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 14px;
  padding: 10px 14px;
  color: var(--navy-2);
  font-size: 0.95rem;
}

.access-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 12px;
  align-items: center;
}

.detail-toggle {
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.06);
  color: var(--blue);
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 4px;
  margin-bottom: 20px;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.detail-toggle:hover {
  background: rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.vocab-section,
.grammar-section,
.reading-comprehension,
.tutor-action {
  display: none;
}

/* Skill tabs are always visible — no toggle needed */
.skill-tabs {
  display: block;
}

.vocab-section.is-open,
.grammar-section.is-open,
.reading-comprehension.is-open {
  display: block;
}

.tutor-action.is-open {
  display: flex;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 700;
}

.badge.free {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border: 1px solid rgba(34, 197, 94, 0.18);
}

.badge.premium {
  background: rgba(37, 99, 235, 0.12);
  color: #1e40af;
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.premium-note {
  color: var(--navy-2);
  font-size: 0.95rem;
  text-align: center;
  margin-top: 6px;
}

.section {
  padding: 90px 6%;
  position: relative;
}

.section + .section {
  margin-top: 6px;
}

.section-heading {
  max-width: 760px;
  margin: 0 auto 46px;
  text-align: center;
  position: relative;
}

.section-heading::before {
  content: '';
  display: block;
  width: 72px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.section-heading h2,
.download-box h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.05em;
  margin: 12px 0;
}

.section-heading p,
.download-box p {
  color: var(--muted);
  font-size: 1.08rem;
}

.features-grid,
.pricing-grid {
  display: grid;
  gap: 22px;
}

.payment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.payment-actions .paypal-btn {
  background: linear-gradient(135deg, #003087, #0058d4);
  color: white;
  border: none;
}

.payment-actions a {
  min-width: 190px;
  text-align: center;
}

.payment-methods {
  margin-top: 28px;
  padding: 32px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.07);
}

.payment-methods h4 {
  margin-bottom: 14px;
  font-size: 1.2rem;
}

.payment-methods p {
  color: var(--muted);
  margin-bottom: 18px;
}

.payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.payment-icons span {
  background: white;
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 18px;
  padding: 12px 18px;
  font-weight: 700;
}

.language-selector {
  max-width: 360px;
  margin: 0 auto 28px;
  display: grid;
  gap: 10px;
}

.language-selector label {
  font-weight: 800;
  color: var(--navy-2);
}

.language-selector select {
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--navy-2);
  background: white;
}

.language-tabs {
  display: grid;
  gap: 28px;
}

.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.tab-button {
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: white;
  color: var(--navy-2);
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.tab-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 35px rgba(37, 99, 235, 0.12);
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}

.tab-button.active {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: white;
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.2);
}

.tab-panels {
  display: grid;
  gap: 24px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: grid;
}

.language-card,
.features-grid article,
.plan,
.payment-methods,
.auth-panel,
.course-card,
.download-box,
.language-preview-card,
.dashboard-goal-card,
.dashboard-activity-card,
.how-it-works-step,
.about-block,
.translator-panel {
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 32px;
  padding: 30px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  position: relative;
  isolation: isolate;
}

.language-card:hover,
.features-grid article:hover,
.plan:hover,
.payment-methods:hover,
.auth-panel:hover,
.course-card:hover,
.download-box:hover,
.language-preview-card:hover,
.dashboard-goal-card:hover,
.dashboard-activity-card:hover,
.how-it-works-step:hover,
.about-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
}

.language-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

.language-preview-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.language-preview-flag {
  font-size: 2.4rem;
  margin-bottom: 12px;
}

.language-preview-card h3 {
  margin-bottom: 6px;
}

.language-preview-levels {
  color: var(--blue);
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.language-preview-desc {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.language-preview-btn {
  margin-top: auto;
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: rgba(255, 255, 255, 0.95);
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.language-preview-btn:hover,
.language-preview-btn:focus-visible {
  transform: translateY(-1px);
  border-color: var(--blue);
  color: var(--blue);
}

.skill-competency-card {
  cursor: pointer;
}

.skill-competency-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.skill-competency-card .icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.skill-competency-card:hover .icon {
  transform: scale(1.18) rotate(-4deg);
}

.language-overview span,
.section-heading span,
.download-box span {
  color: var(--blue);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

.language-overview h3 {
  font-size: clamp(1.9rem, 2.5vw, 2.6rem);
  margin: 18px 0 16px;
}

.language-overview p {
  color: var(--muted);
  max-width: 760px;
  font-size: 1.05rem;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.level-grid div {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 249, 255, 0.96));
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 24px;
  padding: 24px 20px;
  text-align: center;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}

.level-grid div:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.28);
}

.level-card.active {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.16);
  transform: translateY(-2px);
}

.level-grid strong {
  display: block;
  font-size: 1.16rem;
  color: var(--blue);
  margin-bottom: 12px;
}

.level-grid span {
  color: var(--muted);
  font-size: 0.95rem;
}

.reading-comprehension {
  margin-top: 32px;
  border-top: 1px solid rgba(96, 165, 250, 0.16);
  padding-top: 30px;
}

.reading-comprehension h4 {
  margin-bottom: 18px;
  font-size: 1.55rem;
}

.world-lesson-preview {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(96, 165, 250, 0.16);
}

.world-lesson-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.world-lesson-preview-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.world-lesson-preview-head h4 {
  font-size: 1.25rem;
}

.world-lesson-open {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--blue);
  color: white;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}

.world-lesson-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.world-lesson-row {
  display: flex;
  flex-direction: column;
  min-height: 138px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.world-lesson-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
}

.world-lesson-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.lesson-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.lesson-tag-level {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.lesson-tag-skill {
  background: rgba(37, 99, 235, 0.1);
  color: var(--blue);
}

.lesson-tag-free {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.lesson-tag-premium {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.world-lesson-row h5 {
  margin-bottom: 6px;
  font-size: 0.98rem;
}

.world-lesson-row p {
  flex: 1;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
  margin-bottom: 12px;
}

.world-lesson-start {
  align-self: flex-start;
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: white;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.world-lesson-start:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
}

.grammar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.grammar-grid div {
  background: var(--light);
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.grammar-grid strong {
  display: block;
  margin-bottom: 10px;
  color: var(--blue);
}

.grammar-grid span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.level-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.level-list div {
  background: var(--light);
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 20px;
  padding: 18px;
}

.level-list strong {
  display: block;
  margin-bottom: 10px;
  color: var(--blue);
}

.reading-comprehension h5 {
  margin-bottom: 12px;
  font-size: 1.15rem;
}

.reading-text {
  margin-bottom: 18px;
  line-height: 1.75;
  color: var(--muted);
}

.mcq-list {
  list-style: none;
  counter-reset: question;
  padding-left: 0;
}

.mcq-list li {
  margin-bottom: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 18px;
  border: 1px solid var(--line);
}

.mcq-list li strong {
  display: inline-block;
  margin-bottom: 8px;
}

.features-grid p,
.plan li {
  color: var(--muted);
}

.dark {
  background: var(--navy);
  color: white;
}

.dark .section-heading p {
  color: #cbd5e1;
}

.features-grid {
  grid-template-columns: repeat(3, 1fr);
}

.features-grid article {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.icon {
  font-size: 2rem;
  margin-bottom: 16px;
}

.features-grid h3 {
  margin-bottom: 10px;
}

.pricing-grid {
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
  align-items: stretch;
}

.plan {
  position: relative;
  overflow: hidden;
}

.plan::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), transparent 58%);
  pointer-events: none;
}

.plan h3 {
  font-size: 1.6rem;
}

.price {
  font-size: 3rem;
  font-weight: 900;
  margin: 16px 0;
}

.price small {
  font-size: 1rem;
  color: var(--muted);
}

.plan ul {
  list-style: none;
  margin: 24px 0;
}

.plan li {
  margin-bottom: 12px;
}

.plan li:before {
  content: '✓';
  color: var(--green);
  font-weight: 900;
  margin-right: 10px;
}

.premium-plan {
  border: 2px solid rgba(37, 99, 235, 0.3);
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(37, 99, 235, 0.16);
}

.plan-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: #dbeafe;
  color: var(--blue);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 900;
}

/* Cómo funciona */
.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

.how-it-works-step h3 {
  margin-bottom: 8px;
}

.how-it-works-step p {
  color: var(--muted);
  font-size: 0.95rem;
}

.how-it-works-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* Traductor */
.translator-panel {
  max-width: 960px;
  margin: 0 auto;
}

.translator-workspace {
  width: 100%;
  max-width: 1400px;
  padding: clamp(1rem, 2.5vw, 2rem);
}

.translator-controls {
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.translator-controls label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  flex: 1 1 200px;
}

.translator-controls select {
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: white;
  font-weight: 600;
  color: var(--navy-2);
}

.translator-swap-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.translator-swap-btn:hover,
.translator-swap-btn:focus-visible {
  transform: rotate(180deg);
  border-color: var(--blue);
}

.translator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.translator-grid .tutor-input {
  min-height: 220px;
  max-height: 480px;
  overflow-y: auto;
}

.translator-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.translator-field--source {
  border-top: 3px solid var(--blue);
}

.translator-field--output {
  border-top: 3px solid var(--cyan);
}

.translator-field > label {
  font-weight: 700;
  font-size: 0.9rem;
}

.translator-char-count {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
}

.translator-field-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.translator-field-actions .secondary-btn,
.translator-field-actions .translator-dictate-btn,
.translator-field-actions .translator-dictate-stop-btn {
  min-height: 2.5rem;
}

.translator-listen-btn {
  min-width: 7.5rem;
}

.translator-listen-btn.is-playing {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.translator-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.translator-status {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--bg);
  font-weight: 700;
  color: var(--muted);
}

.translator-status.is-loading {
  color: var(--blue);
}

.translator-status.is-success {
  color: var(--green);
}

.translator-status.is-unavailable {
  color: #b45309;
}

.translator-detected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

.translator-detected-caution {
  color: #b45309;
}

.translator-detected-correct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.translator-detected-correct select {
  font-size: 0.85rem;
}

/* Corrector (Fase 3) - reuses .translator-panel/.translator-field/
   .translator-field-actions/.translator-actions/.translator-status as-is;
   only its own result box and highlight marks are new. */
.corrector-output {
  min-height: 160px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 12px 14px;
  background: var(--bg);
  font-size: 0.95rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.corrector-result-label {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 4px;
}

.corrector-output p {
  margin: 0;
}

.corrector-output mark {
  background: #fde68a;
  color: inherit;
  border-radius: 4px;
  padding: 0 2px;
}

.corrector-explanation {
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

/* Predictive text (Fase 4) */
.translator-input-wrap {
  position: relative;
}

.translator-suggestions {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  max-height: 200px;
  overflow-y: auto;
}

.translator-suggestion-item {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

.translator-suggestion-item:hover,
.translator-suggestion-item.is-active {
  background: var(--bg);
}

/* Spelling corrections and contextual next-word suggestions read slightly
   differently from a plain autocomplete match (spec: "distinguir
   autocompletado / corrección ortográfica / predicción contextual"). */
.translator-suggestion-item[data-type='spelling'] {
  font-style: italic;
}

.translator-suggestion-item[data-type='contextual'] {
  color: var(--blue);
}

.translator-suggestions-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 400;
}

.translator-history {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.translator-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.translator-history-header h3 {
  margin: 0;
  font-size: 1rem;
}

.translator-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.translator-history-item {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 8px);
  background: var(--bg);
}

.translator-history-pair {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.translator-history-source {
  color: var(--muted);
}

.translator-history-target {
  font-weight: 600;
}

.translator-history-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

/* About */
.about-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}

.about-block h3 {
  margin-bottom: 14px;
}

.about-block p {
  color: var(--muted);
  margin-bottom: 12px;
}

.about-block p:last-child {
  margin-bottom: 0;
}

.about-editable-note {
  font-style: italic;
  font-size: 0.9rem;
}

.about-contact-btn {
  display: inline-block;
  margin-bottom: 14px;
}

/* "Cómo funciona" and "Sobre el creador" get the full row inside
   #about's grid - they carry more content than a plain text block
   ("Qué es ANDERGO" / "Qué incluye la plataforma" stay single-column). */
.about-block-full {
  grid-column: 1 / -1;
}

.about-block-full .how-it-works-grid {
  margin-top: 1rem;
}

.about-includes-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Sobre el creador: photo stacked above the text on small screens, side
   by side on wider ones - object-fit: cover keeps the crop consistent
   regardless of the source photo's own aspect ratio. */
.about-creator-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.about-creator-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

.about-creator-text {
  flex: 1 1 auto;
  min-width: 0;
}

.about-creator-text p {
  color: var(--muted);
  margin-bottom: 12px;
}

.about-creator-text p:last-child {
  margin-bottom: 0;
}

@media (min-width: 700px) {
  .about-creator-layout {
    flex-direction: row;
    align-items: stretch;
  }

  .about-creator-photo {
    width: 260px;
    height: auto;
    flex: 0 0 260px;
  }
}

/* About — editorial layout */
.about-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 8%, rgba(14, 165, 233, 0.1), transparent 27rem),
    radial-gradient(circle at 94% 42%, rgba(37, 99, 235, 0.09), transparent 30rem),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 48%, #f8fbff 100%);
}

.about-section::before,
.about-section::after {
  content: '';
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(37, 99, 235, 0.09);
  border-radius: 50%;
  pointer-events: none;
}

.about-section::before {
  top: 7rem;
  right: -10rem;
  width: 28rem;
  height: 28rem;
}

.about-section::after {
  bottom: 10rem;
  left: -12rem;
  width: 24rem;
  height: 24rem;
}

.about-section > * {
  position: relative;
  z-index: 1;
}

.about-section .section-heading {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.about-section .section-heading span {
  display: inline-flex;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}

.about-layout {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  width: min(1180px, 100%);
  max-width: none;
}

.about-layout .about-block {
  padding: clamp(1.35rem, 2.5vw, 2rem);
  border: 1px solid rgba(37, 99, 235, 0.13);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.075);
}

.about-block h3 {
  margin: 0 0 0.8rem;
  color: var(--navy-2);
  font-size: 1.06rem;
  letter-spacing: -0.02em;
}

.about-block p {
  margin-bottom: 0.75rem;
  font-size: 0.94rem;
  line-height: 1.72;
}

.about-what-block {
  grid-column: 1 / span 7;
  grid-row: 1;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 95% 0%, rgba(56, 189, 248, 0.3), transparent 16rem),
    linear-gradient(135deg, #07152f 0%, #123c85 62%, #2563eb 100%);
  color: white;
}

.about-what-block::after {
  content: 'A';
  position: absolute;
  right: -0.4rem;
  bottom: -4.8rem;
  color: rgba(255, 255, 255, 0.06);
  font-size: 17rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.12em;
  pointer-events: none;
}

.about-what-block h3,
.about-what-block p {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  color: white;
}

.about-what-block h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
}

.about-what-block h3::before {
  content: 'A';
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
  color: #7dd3fc;
  font-weight: 950;
}

.about-what-block p {
  color: rgba(255, 255, 255, 0.78);
}

.about-includes-block {
  grid-column: 8 / -1;
  grid-row: 1;
  height: 100%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.95));
}

.about-includes-block h3::before {
  content: '✓';
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  margin-right: 0.55rem;
  border-radius: 9px;
  background: #dcfce7;
  color: #15803d;
}

.about-how-block,
.about-creator-block,
.about-contact-block {
  grid-column: 1 / -1;
}

.about-how-block {
  grid-row: 2;
  background: rgba(255, 255, 255, 0.92);
}

.about-creator-block {
  grid-row: 3;
}

.about-how-block > h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.about-block-full .how-it-works-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.25rem;
}

.about-how-block .how-it-works-step {
  min-height: 220px;
  padding: 1.2rem;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 18px;
  box-shadow: none;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.about-how-block .how-it-works-step::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(180deg, var(--blue), var(--cyan));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.about-how-block .how-it-works-step:hover::before {
  opacity: 1;
}

.about-how-block .how-it-works-step .icon {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 13px;
  background: #eff6ff;
  font-size: 1.25rem;
}

.about-how-block .how-it-works-step h3 {
  font-size: 0.96rem;
  line-height: 1.35;
}

.about-how-block .how-it-works-step p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
}

.about-how-block .how-it-works-cta {
  margin-top: 1.5rem;
}

.about-how-block .how-it-works-cta .primary-btn {
  min-width: 180px;
  text-align: center;
}

.about-includes-list {
  display: grid;
  gap: 0.62rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-includes-list li {
  position: relative;
  padding-left: 1.55rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.about-includes-list li::before {
  content: '✓';
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  color: var(--blue);
  font-size: 0.66rem;
  font-weight: 900;
}

.about-creator-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 2fr);
  gap: clamp(1.35rem, 3vw, 2.5rem);
  align-items: stretch;
}

.about-creator-photo-frame {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 20px;
  background: #07152f;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.15);
}

.about-creator-photo-frame .about-creator-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 370px;
  border-radius: 0;
  object-fit: cover;
  object-position: center 22%;
}

.about-creator-identity {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 260px;
  padding: 1.5rem;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 10%, rgba(125, 211, 252, 0.28), transparent 12rem),
    linear-gradient(145deg, #07152f, #123c85);
  color: #fff;
  text-align: center;
}

.about-creator-identity::before {
  content: '';
  position: absolute;
  right: -3rem;
  bottom: -5rem;
  width: 13rem;
  height: 13rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.about-creator-identity img {
  display: block;
  width: 100%;
  max-width: 116px;
  aspect-ratio: 1;
  margin-bottom: 0.8rem;
  border-radius: 22px;
  object-fit: contain;
}

.about-creator-identity span {
  font-size: 1.05rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.about-creator-identity small {
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.64);
}

.about-creator-text {
  min-width: 0;
  align-self: center;
}

.about-creator-text > p:first-child {
  margin-bottom: 0.8rem;
  color: var(--navy-2);
  font-size: 1.08rem;
}

.about-contact-block {
  grid-row: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 2rem;
  background: linear-gradient(135deg, #fff 0%, #eff6ff 100%);
}

.about-contact-block h3,
.about-contact-block p {
  grid-column: 1;
}

.about-contact-block .about-contact-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 190px;
  margin: 0;
  text-align: center;
}

.about-contact-block .about-editable-note {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(37, 99, 235, 0.1);
  font-size: 0.78rem;
}

@media (max-width: 980px) {
  .about-what-block,
  .about-includes-block,
  .about-how-block,
  .about-creator-block,
  .about-contact-block {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .about-block-full .how-it-works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .about-layout {
    display: flex;
    flex-direction: column;
  }

  .about-layout .about-block {
    padding: 1.2rem;
    border-radius: 20px;
  }

  .about-block-full .how-it-works-grid,
  .about-creator-layout,
  .about-contact-block {
    grid-template-columns: 1fr;
  }

  .about-how-block .how-it-works-step {
    min-height: 0;
  }

  .about-creator-identity {
    min-height: 220px;
  }

  .about-creator-photo-frame {
    aspect-ratio: 4 / 5;
  }

  .about-creator-photo-frame .about-creator-photo {
    min-height: 0;
  }

  .about-contact-block .about-contact-btn {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin: 0.35rem 0 0.75rem;
  }
}

@media (max-width: 780px) {
  .translator-grid {
    grid-template-columns: 1fr;
  }

  .translator-controls {
    align-items: stretch;
  }

  .translator-swap-btn {
    align-self: center;
  }
}

.download-box {
  border-radius: 36px;
  background: linear-gradient(135deg, #07152f, #123c85, #2563eb);
  color: white;
  padding: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  box-shadow: var(--shadow);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.download-box::before {
  content: '';
  position: absolute;
  inset: auto -30px -40px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(6px);
}

.download-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 80px rgba(7, 21, 47, 0.2);
}

.download-box p {
  color: #dbeafe;
  max-width: 620px;
}

.download-box .primary-btn {
  background: white;
  color: var(--blue);
  flex: none;
}

.app-section {
  background: linear-gradient(180deg, #f8fbff 0%, #f1f7ff 100%);
}

.app-preview {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
  align-items: center;
  margin-top: 24px;
}

.app-phone {
  background: linear-gradient(145deg, #0f172a, #172554);
  border-radius: 36px;
  padding: 20px;
  box-shadow: 0 28px 70px rgba(7, 21, 47, 0.18);
  max-width: 360px;
  margin: 0 auto;
}

.phone-notch {
  width: 40%;
  height: 18px;
  background: #020617;
  border-radius: 0 0 18px 18px;
  margin: 0 auto 18px;
}

.phone-screen {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: 24px;
  padding: 24px;
  min-height: 320px;
}

.screen-pill {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.phone-screen h3 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.phone-screen p {
  color: var(--muted);
  margin-bottom: 18px;
}

.phone-screen ul {
  list-style: none;
  display: grid;
  gap: 10px;
  padding: 0;
}

.phone-screen li {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  color: var(--navy-2);
  font-weight: 600;
}

.app-copy h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: 14px;
}

.app-copy p {
  color: var(--muted);
  margin-bottom: 18px;
}

.feature-list {
  display: grid;
  gap: 12px;
}

.feature-list div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: white;
  border: 1px solid rgba(96, 165, 250, 0.16);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.feature-list strong {
  color: var(--blue);
}

footer {
  padding: 64px 6% 48px;
  text-align: center;
  background:
    radial-gradient(circle at 15% 0%, rgba(37, 99, 235, 0.28), transparent 42%),
    radial-gradient(circle at 85% 100%, rgba(0, 194, 255, 0.18), transparent 46%), var(--navy);
  color: white;
  position: relative;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, 70%);
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--purple), var(--blue), var(--cyan));
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  text-align: left;
  max-width: 1080px;
  margin: 0 auto 32px;
}

.footer-brand {
  max-width: 320px;
}

.footer-links {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-col h4 {
  color: #e2e8f0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.footer-links-col a {
  color: #cbd5e1;
  font-weight: 600;
  transition: color 0.2s ease;
}

.footer-links-col a:hover,
.footer-links-col a:focus-visible {
  color: white;
}

.footer-contact-note {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #94a3b8;
  font-style: italic;
}

@media (max-width: 640px) {
  .footer-top {
    flex-direction: column;
    text-align: center;
  }

  .footer-brand {
    max-width: none;
  }

  .footer-links {
    justify-content: center;
    text-align: center;
  }

  .footer-links-col {
    align-items: center;
  }
}

footer strong {
  display: inline-block;
  letter-spacing: 0.16em;
  font-size: 1.3rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), #ffffff 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

footer p {
  margin: 12px 0 20px;
  color: #cbd5e1;
}

footer small {
  display: inline-block;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 1280px, separate from the 1100px breakpoint below: the signed-in nav
   (Aprender/Progreso/Logros/Objetivos/Tutor IA/Traductor/Acerca de/
   Seguridad - 8 links) plus the "Hola, {username}" chip and Salir button
   need that much room to sit on one line without overlapping the logo -
   anything narrower should already get the hamburger menu instead of a
   cramped, overlapping nav row. Kept separate from the grid breakpoints
   below so the hero/card grids keep switching at their own width. */
@media (max-width: 1280px) {
  .navbar {
    flex-wrap: wrap;
    gap: 16px;
  }

  .menu-toggle {
    display: flex;
    margin-left: auto;
  }

  .menu {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
  }

  .menu.is-open {
    display: flex;
  }

  .nav-actions {
    margin-left: auto;
  }

  .global-language-controls {
    flex-wrap: wrap;
  }
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 60px;
  }

  .quick-stats,
  .language-tabs,
  .features-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .tab-list {
    justify-content: center;
  }

  .level-grid,
  .world-lesson-grid,
  .skill-panel-grid,
  .skill-mini-vocab,
  .vocab-grid,
  .grammar-grid {
    grid-template-columns: 1fr;
  }

  .download-box {
    flex-direction: column;
    text-align: center;
  }

  .app-preview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .navbar {
    padding: 16px 5%;
  }

  .brand p {
    display: none;
  }

  .brand-logo-symbol {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }

  .brand h1 {
    font-size: 0.82rem;
  }

  .global-language-controls {
    align-items: stretch;
    padding: 0.75rem 5%;
  }

  .global-language-summary {
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }

  .nav-actions {
    width: 100%;
    justify-content: space-between;
  }

  .hero {
    min-height: auto;
    padding: 48px 5%;
    gap: 32px;
  }

  .hero h2 {
    font-size: clamp(2rem, 7vw, 3rem);
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .world-lesson-preview-head {
    align-items: stretch;
    flex-direction: column;
  }

  .world-lesson-open {
    width: 100%;
  }

  .hero-buttons a,
  .payment-actions a,
  .nav-actions a {
    width: 100%;
    text-align: center;
  }

  .course-card,
  .language-card,
  .plan,
  .download-box,
  .skill-panel {
    padding: 24px;
  }

  .section {
    padding: 60px 5%;
  }

  .quick-stats {
    grid-template-columns: 1fr;
  }

  .payment-actions {
    flex-direction: column;
  }
}

/* Access and pricing rules */
.badge.limited {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.22);
}

.pricing-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.96));
}

.pricing-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}

.free-plan {
  border: 1px solid rgba(96, 165, 250, 0.18);
}

.upgrade-btn {
  border: 0;
  width: fit-content;
  cursor: pointer;
}

@media (max-width: 780px) {
  .pricing-layout {
    grid-template-columns: 1fr;
  }
}

.price-annual {
  margin-top: -0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ANDERGO compact homepage and active button behavior */
.compact-hidden-section {
  display: none !important;
}

.hero-content .pill,
.quick-stats,
.course-card,
.language-card,
.goal-card {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.primary-btn,
.secondary-btn,
.signup,
.login,
.logout-btn,
.continue-lesson-btn,
.lesson-complete-btn,
.goal-select,
.detail-toggle,
.skill-tab-button,
.tab-button,
.tutor-chat-btn {
  cursor: pointer;
}

.primary-btn:active,
.secondary-btn:active,
.signup:active,
.login:active,
.continue-lesson-btn:active,
.lesson-complete-btn:active,
.goal-select:active,
.detail-toggle:active,
.skill-tab-button:active,
.tab-button:active,
.tutor-chat-btn:active,
.upgrade-btn:active {
  transform: translateY(1px) scale(0.99);
}

.continue-lesson-btn {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 0.95rem 1.1rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.25);
}

.predictive-suggestion.selected {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.tutor-result {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.18);
  color: #1e293b;
}

.tutor-result.is-visible {
  display: block;
}

.tutor-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.tutor-conversation {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 360px;
  overflow-y: auto;
  padding: 0.25rem 0.1rem;
}

.tutor-welcome {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.18);
  color: #1e3a8a;
}

.tutor-message {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 88%;
  padding: 0.75rem 1rem;
  border-radius: 18px;
  line-height: 1.5;
}

.tutor-message p {
  margin: 0;
}

.tutor-message-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.7;
}

.tutor-message--user {
  align-self: flex-end;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
}

/* The Tutor's own reply - deliberately a full-width, standalone card (not
   a chat bubble like .tutor-message--user) so it reads as the primary
   answer, not text tucked in a dim box. */
.tutor-message--tutor {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  background: #fff;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 24px;
  color: #1e293b;
  margin-top: 0.35rem;
}

.tutor-message--tutor .tutor-message-label {
  color: var(--blue);
  opacity: 1;
  margin-bottom: 0.15rem;
}

.tutor-message--tutor p {
  font-size: 0.98rem;
  line-height: 1.6;
}

.tutor-message--tutor ul,
.tutor-message--tutor ol {
  margin: 0.4rem 0 0;
  padding-left: 1.25rem;
}

.tutor-message--tutor li {
  margin-bottom: 0.2rem;
}

@media (max-width: 480px) {
  .tutor-message--tutor {
    padding: 18px;
    border-radius: 20px;
  }
}

.tutor-message--error {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #991b1b;
}

/* Visibly marks whichever tutor reply is currently being read aloud (at
   most one at a time - see stopAllTutorAudio() in script.js). */
.tutor-message--tutor.is-playing {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
}

/* Word-highlight sync (script.js: tokenizeTutorTextForHighlight/
   setTutorHighlightWord). .tutor-word with no .is-current is the normal,
   unhighlighted state (spec §6) - no visual difference from plain text
   besides the word-boundary span wrapper. */
.tutor-word {
  border-radius: 5px;
  padding: 0 1px;
  transition: background-color 120ms ease;
}

.tutor-word.is-current {
  background: rgba(37, 99, 235, 0.18);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
}

.dark .tutor-word.is-current {
  background: rgba(96, 165, 250, 0.32);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.45);
}

/* Paused (spec §6: "conservar la palabra actual resaltada; mostrar estado
   Pausado") - same word stays highlighted, just a static/dimmer treatment
   instead of the active transition, so pausing is visually distinguishable
   from actively-being-read without a separate text label. */
.tutor-message.is-tts-paused .tutor-word.is-current {
  background: rgba(148, 163, 184, 0.3);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .tutor-word {
    transition: none;
  }
}

.tutor-voice-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}

.tutor-voice-btn {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--navy-2);
  cursor: pointer;
}

.tutor-voice-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tutor-voice-speed-group {
  display: flex;
  gap: 0.25rem;
}

.tutor-voice-speed-btn {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.tutor-voice-speed-btn.is-active {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  border-color: transparent;
}

.tutor-voice-limit-message {
  flex-basis: 100%;
  margin-top: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--navy-2);
  font-size: 0.8rem;
  font-weight: 700;
}

.tutor-voice-limit-message:empty {
  display: none;
}

/* "ANDERGO Premium" / "Conversación por voz" / "Corrección de pronunciación"
   indicators - visual labels only (see the Premium page and the AI Tutor
   view), reusing the same gradient as .primary-btn/.level-tab.active. */
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
}

.premium-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

/* Discreet Tutor IA usage counter ("Te quedan N de 30 consultas") - plain
   muted text, not a promo. Empty (guest/Premium/ceo, see
   renderTutorUsageCounter) collapses to nothing via :empty. */
.tutor-usage-counter {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.tutor-usage-counter:empty {
  display: none;
}

.tutor-thinking {
  margin: 0;
  color: #475569;
  font-style: italic;
}

.tutor-clear-btn {
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease;
}

.tutor-clear-btn:hover {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(100, 116, 139, 0.55);
}

.tutor-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.tutor-context-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.16);
  color: #1e3a8a;
  font-size: 0.95rem;
}

.tutor-connection-status {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  font-weight: 700;
  font-size: 0.85rem;
}

.tutor-autoplay-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #334155;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.tutor-autoplay-toggle input {
  accent-color: var(--blue);
  cursor: pointer;
}

/* Premium hands-free voice conversation toggle - .is-locked (default, no
   Premium) opens the paywall on click instead of arming the mode; .is-active
   is only ever added once entitlements.isPremium is actually true (see
   setTutorConversationMode() in script.js), never on the locked state. */
.tutor-conversation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.tutor-conversation-toggle-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.tutor-conversation-toggle:hover {
  border-color: rgba(37, 99, 235, 0.45);
}

.tutor-conversation-toggle.is-active {
  background: rgba(37, 99, 235, 0.12);
  border-color: var(--blue);
  color: #1d4ed8;
}

.tutor-conversation-toggle.is-active .tutor-conversation-toggle-badge {
  display: none;
}

.tutor-conversation-toggle.is-listening {
  background: rgba(220, 38, 38, 0.1);
  border-color: #dc2626;
  color: #b91c1c;
  animation: tutor-dictate-pulse 1.6s ease-in-out infinite;
}

/* Shown only when the Traductor/Tutor was opened from a lesson (see
   openTranslator()/openTutorDrawer() context) so the student can get back to
   exactly where they were instead of hunting through the main nav. */
.translator-return-link,
.tutor-return-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: -0.5rem;
  margin-bottom: 0.75rem;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.translator-return-link:hover,
.tutor-return-link:hover {
  text-decoration: underline;
}

.tutor-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  color: #0f172a;
  font-weight: 600;
}

.tutor-input {
  width: 100%;
  min-height: 112px;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: #fff;
  color: #0f172a;
  font: inherit;
  resize: vertical;
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.tutor-input:focus {
  border-color: rgba(37, 99, 235, 0.65);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.tutor-helper {
  margin: 0;
  color: #475569;
  line-height: 1.5;
}

.tutor-dictate-status {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1d4ed8;
}

.tutor-dictate-note {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
}

.tutor-dictate-btn,
.tutor-dictate-stop-btn,
.translator-dictate-btn,
.translator-dictate-stop-btn {
  border: 1px solid rgba(37, 99, 235, 0.35);
  background: #fff;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.tutor-dictate-btn:hover:not(:disabled),
.tutor-dictate-stop-btn:hover,
.translator-dictate-btn:hover:not(:disabled),
.translator-dictate-stop-btn:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.55);
}

.tutor-dictate-btn:focus-visible,
.tutor-dictate-stop-btn:focus-visible,
.translator-dictate-btn:focus-visible,
.translator-dictate-stop-btn:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

.tutor-dictate-btn:disabled,
.translator-dictate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tutor-dictate-btn.is-listening,
.translator-dictate-btn.is-listening {
  background: rgba(220, 38, 38, 0.1);
  border-color: #dc2626;
  color: #b91c1c;
  animation: tutor-dictate-pulse 1.6s ease-in-out infinite;
}

.tutor-dictate-stop-btn,
.translator-dictate-stop-btn {
  border-color: rgba(220, 38, 38, 0.4);
  color: #b91c1c;
}

@keyframes tutor-dictate-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.25);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.12);
  }
}

.home-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 9999;
  max-width: min(92vw, 520px);
  transform: translate(-50%, 24px);
  opacity: 0;
  pointer-events: none;
  padding: 0.95rem 1.15rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.28);
  font-weight: 700;
  text-align: center;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.home-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Homepage visual refresh: a calmer, product-led learning experience. */
.navbar {
  padding: 12px clamp(24px, 5vw, 88px);
  gap: clamp(18px, 2.2vw, 38px);
}

.brand-logo-symbol {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.brand h1 {
  font-size: 1.18rem;
  letter-spacing: 0.075em;
}

.brand p {
  font-size: 0.78rem;
}

.menu {
  gap: clamp(12px, 1.35vw, 24px);
  font-size: 0.82rem;
}

.global-language-controls {
  padding: 0.45rem clamp(24px, 5vw, 88px);
  background: rgba(248, 251, 255, 0.94);
}

.hero {
  min-height: 590px;
  grid-template-columns: minmax(0, 0.95fr) minmax(440px, 0.85fr);
  gap: clamp(48px, 6vw, 112px);
  padding: clamp(72px, 8vw, 120px) clamp(24px, 8vw, 152px);
  background:
    radial-gradient(circle at 72% 18%, rgba(14, 165, 233, 0.15), transparent 26%),
    radial-gradient(circle at 15% 86%, rgba(37, 99, 235, 0.13), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f1f8ff 100%);
}

.hero::before {
  width: 420px;
  height: 420px;
  left: -180px;
  top: 12%;
  opacity: 0.8;
}

.hero::after {
  width: 420px;
  height: 420px;
  right: -160px;
  bottom: -180px;
  opacity: 0.75;
}

.hero-content,
.hero-card {
  position: relative;
  z-index: 1;
}

.pill {
  padding: 0.48rem 0.78rem;
  margin-bottom: 1.25rem;
  background: rgba(37, 99, 235, 0.09);
  border: 1px solid rgba(37, 99, 235, 0.16);
  font-size: 0.7rem;
  letter-spacing: 0.095em;
}

.hero h2 {
  max-width: 650px;
  font-size: clamp(3.25rem, 4.65vw, 5.45rem);
  line-height: 0.98;
  letter-spacing: -0.075em;
  margin-bottom: 1.4rem;
}

.hero p {
  max-width: 570px;
  font-size: clamp(1.02rem, 1.2vw, 1.22rem);
  line-height: 1.65;
  margin-bottom: 1.8rem;
}

.hero-copy-carousel {
  max-width: 650px;
  min-height: 355px;
}

.hero-copy-slide {
  display: none;
  animation: hero-copy-enter 360ms ease both;
}

.hero-copy-slide.is-active {
  display: block;
}

.hero-copy-slide h2,
.hero-copy-slide p {
  margin-top: 0;
}

.hero-carousel-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: -0.35rem;
}

.hero-carousel-dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hero-carousel-dots button,
.hero-carousel-arrow {
  border: 0;
  cursor: pointer;
}

.hero-carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.22);
  transition: width 180ms ease, background 180ms ease;
}

.hero-carousel-dots button.is-active {
  width: 24px;
  background: var(--blue);
}

.hero-carousel-arrow {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--navy-2);
  font-size: 1.05rem;
  font-weight: 800;
}

.hero-carousel-arrow:hover,
.hero-carousel-arrow:focus-visible {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 5px 15px rgba(37, 99, 235, 0.15);
}

@keyframes hero-copy-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-buttons {
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.hero-buttons .primary-btn,
.hero-buttons .secondary-btn {
  padding: 0.85rem 1.15rem;
  border-radius: 12px;
  font-size: 0.92rem;
}

.quick-stats {
  max-width: 590px;
  gap: 0.7rem;
}

.quick-stats div {
  min-height: 102px;
  padding: 1rem;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
}

.quick-stats strong {
  font-size: 1rem;
}

.quick-stats span {
  display: block;
  margin-top: 0.35rem;
  line-height: 1.35;
  font-size: 0.8rem;
}

.hero-card {
  min-height: 378px;
  padding: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(203, 229, 255, 0.92), rgba(223, 247, 255, 0.84));
  box-shadow: 0 28px 60px rgba(30, 64, 175, 0.14);
}

.course-card {
  width: min(405px, 100%);
  padding: clamp(1.45rem, 3vw, 2.1rem);
  border-radius: 20px;
  border-color: rgba(37, 99, 235, 0.13);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.13);
}

.hero-card-kicker {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.student-greeting {
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--navy-2);
}

.section {
  padding: clamp(74px, 8vw, 122px) clamp(24px, 8vw, 152px);
}

.language-picker-section {
  position: relative;
  background: linear-gradient(180deg, #f1f8ff 0%, #f8fbff 100%);
}

.language-picker-section .global-language-controls {
  width: min(1080px, 100%);
  margin: clamp(2rem, 4vw, 3.5rem) auto 0;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.07);
}

.section-heading {
  max-width: 660px;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.section-heading::before {
  width: 46px;
  height: 3px;
  margin-bottom: 0.85rem;
}

.section-heading h2,
.download-box h2 {
  font-size: clamp(2.25rem, 3.3vw, 3.65rem);
  letter-spacing: -0.065em;
}

.section-heading p {
  font-size: 1rem;
  line-height: 1.6;
}

.language-preview-grid {
  gap: 1.1rem;
}

.language-preview-card {
  min-height: 270px;
  justify-content: center;
  padding: 2rem 1.45rem;
  border-radius: 20px;
  box-shadow: 0 15px 36px rgba(15, 23, 42, 0.08);
}

.language-preview-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  opacity: 0;
  transition: opacity 180ms ease;
}

.language-preview-card:hover::before {
  opacity: 1;
}

.language-preview-flag {
  font-size: 2.75rem;
  margin-bottom: 0.85rem;
}

.language-preview-card h3 {
  font-size: 1.25rem;
}

.language-preview-desc {
  max-width: 30ch;
  line-height: 1.55;
}

.language-preview-btn {
  margin-top: 0.6rem;
  border-radius: 10px;
}

.pricing-section {
  background: #fff;
}

.current-plan-summary {
  max-width: 1040px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
}

.current-plan-option {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.current-plan-option--active {
  border-color: rgba(37, 99, 235, 0.28);
  background: var(--accent-soft);
}

.current-plan-option--premium {
  border-color: rgba(124, 58, 237, 0.25);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(245, 243, 255, 0.94));
}

.current-plan-option--premium.is-active {
  border-color: #7c3aed;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.18);
}

.current-plan-option small {
  color: var(--muted);
  font-weight: 700;
}

.current-plan-label {
  width: 100%;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.current-plan-summary strong {
  color: var(--navy-2);
  font-size: 1.2rem;
}

.current-plan-summary [data-current-plan-price] {
  color: var(--muted);
  font-weight: 700;
}

.pricing-details {
  margin-top: 2rem;
}

.pricing-layout {
  max-width: 1040px;
  gap: 1.25rem;
}

.premium-checkout-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.premium-checkout-actions .primary-btn,
.premium-checkout-actions .secondary-btn {
  width: 100%;
  justify-content: center;
}

.premium-checkout-status {
  min-height: 1.4em;
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

@media (max-width: 640px) {
  .current-plan-summary {
    grid-template-columns: 1fr;
  }

  .premium-checkout-actions {
    grid-template-columns: 1fr;
  }
}

.plan {
  border-radius: 22px;
  padding: clamp(1.5rem, 3vw, 2.35rem);
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero-card {
    max-width: 680px;
    width: 100%;
    margin-inline: auto;
  }

}

@media (max-width: 640px) {
  .hero {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .hero h2 {
    font-size: clamp(2.55rem, 12vw, 3.65rem);
  }

  .hero-copy-carousel {
    min-height: 330px;
  }

  .quick-stats {
    grid-template-columns: 1fr;
  }

  .hero-card {
    min-height: 0;
    padding: 0.75rem;
  }

  .brand-logo-symbol {
    width: 48px;
    height: 48px;
  }

}

/* ==========================================================================
   Gamification: XP bar, level chip, streak flame, badges, missions, MCQ,
   celebrations. Added as part of the gamification engine pass.
   ========================================================================== */

.gamification-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 0.35rem;
}

.level-chip {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: var(--white);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}

.xp-bar {
  flex: 1;
  height: 10px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  width: 4%;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  border-radius: 999px;
  transition: width 400ms ease;
}

.xp-bar-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.next-lesson-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--accent-soft);
  padding: 6px 12px;
  border-radius: 999px;
}

.next-lesson-label strong {
  font-weight: 800;
}

.streak-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Home hero card: compact signed-in summary vs. guest invite */
.home-summary-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 12px;
}

.home-summary-row[hidden] {
  display: none;
}

.home-summary-row .progress-circle {
  margin: 0;
  width: 96px;
  height: 96px;
  font-size: 1.4rem;
}

.goal-summary {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

.goal-summary strong {
  display: block;
  color: var(--navy-2);
  font-size: 1rem;
}

.home-guest-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-guest-actions[hidden] {
  display: none;
}

/* Goals section */
.goals-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-bottom: 28px;
}

.goal-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.goal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
}

.goal-card > span {
  color: var(--blue);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.goal-card h3 {
  font-size: 1.2rem;
}

.goal-card p {
  color: var(--muted);
  font-size: 0.92rem;
  flex: 1;
}

.goal-card.active {
  border-color: var(--blue);
  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.16);
}

.goal-select {
  align-self: flex-start;
  padding: 10px 20px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy-2);
  font-weight: 800;
  font-size: 0.88rem;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.goal-select:hover {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  transform: translateY(-1px);
}

.goal-card.active .goal-select {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

/* Student dashboard panel */
.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

.progress-gamification-line {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 28px;
}

.dashboard-stat {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  background: var(--surface);
}

.dashboard-stat span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}

.dashboard-stat strong {
  font-size: 1.15rem;
  font-weight: 800;
}

.dashboard-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-bottom: 28px;
}

.dashboard-goal-card h3,
.dashboard-activity-card h3 {
  margin-bottom: 14px;
}

.dashboard-goal-label {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.dashboard-goal-meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.dashboard-goal-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.dashboard-goal-form[hidden] {
  display: none;
}

.dashboard-goal-form select {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  font-weight: 600;
}

.dashboard-goal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.dashboard-goal-form button,
.dashboard-goal-actions button {
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: var(--white);
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.dashboard-goal-form button:hover,
.dashboard-goal-actions button:hover {
  transform: translateY(-1px);
  border-color: var(--blue);
  color: var(--blue);
}

.dashboard-activity-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashboard-activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.dashboard-activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dashboard-activity-text {
  flex: 1;
}

.dashboard-activity-date {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.dashboard-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .dashboard-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
  }

  .dashboard-actions {
    flex-direction: column;
  }

  .dashboard-actions button {
    width: 100%;
  }
}

.goal-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 26px 30px;
  box-shadow: var(--shadow-soft);
  max-width: 560px;
}

.goal-panel h3 {
  font-size: 1rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.goal-panel p {
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 14px;
}

.goal-progress-bar {
  height: 8px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}

.goal-progress-meter {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 999px;
  transition: width 300ms ease;
}

.goal-panel small {
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  .goals-layout {
    grid-template-columns: 1fr;
  }
}

/* Security section ("Seguridad de la cuenta" - TOTP enrollment) */
.security-section {
  background: var(--light);
}

.security-panel {
  background: var(--surface);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  max-width: 560px;
  display: grid;
  gap: 1.25rem;
}

.security-mfa-status {
  display: grid;
  gap: 0.85rem;
  align-items: start;
}

.mfa-enroll-flow[hidden] {
  display: none;
}

.mfa-enroll-flow {
  display: grid;
  gap: 0.85rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

.mfa-enroll-flow h3 {
  font-size: 1.15rem;
}

.mfa-qr-wrap {
  display: flex;
  justify-content: center;
  padding: 0.5rem;
  background: var(--bg);
  border-radius: 14px;
}

.mfa-qr-wrap img {
  max-width: 200px;
  height: auto;
}

.mfa-manual-key {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  word-break: break-all;
}

.mfa-manual-key code {
  background: var(--bg);
  border-radius: 8px;
  padding: 2px 8px;
  font-weight: 700;
  color: var(--navy-2);
}

.mfa-code-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--navy-2);
}

.mfa-status-text {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.mfa-status-text.is-error {
  color: #dc2626;
}

.mfa-enroll-actions {
  display: flex;
  gap: 10px;
}

.mfa-enroll-actions .primary-btn,
.mfa-enroll-actions .secondary-btn {
  flex: 1;
}

/* Achievements section */
.achievements-section {
  background: var(--light);
}

.achievements-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .achievements-layout {
    grid-template-columns: 1fr;
  }
}

.missions-panel,
.badges-panel {
  background: var(--surface);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.missions-panel h3,
.badges-panel h3 {
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.mission-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mission-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--bg);
  border-radius: 14px;
  padding: 0.65rem 0.85rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.mission-item:not(.done):hover {
  transform: translateX(3px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}

.mission-item.done {
  opacity: 0.65;
}

.mission-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mission-copy strong {
  font-size: 0.85rem;
}

.mission-progress-bar {
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.mission-progress-bar div {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  border-radius: 999px;
  transition: width 300ms ease;
}

.mission-xp {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--blue);
  white-space: nowrap;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  background: var(--bg);
  border-radius: 16px;
  padding: 1rem 0.6rem;
  border: 1px solid var(--line);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.badge-card.locked {
  opacity: 0.5;
  filter: grayscale(1);
}

.badge-card.unlocked {
  border-color: var(--cyan);
  box-shadow: 0 8px 20px rgba(0, 194, 255, 0.15);
}

.badge-card.unlocked:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 30px rgba(0, 194, 255, 0.24);
}

.badge-card-icon {
  font-size: 1.6rem;
  transition: transform 0.25s ease;
}

.badge-card.unlocked:hover .badge-card-icon {
  transform: scale(1.15);
}

.badge-card strong {
  font-size: 0.8rem;
}

.badge-card span {
  font-size: 0.7rem;
  color: var(--muted);
}

.badge-progress-bar {
  width: 100%;
  height: 5px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.15rem;
}

.badge-progress-bar div {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 999px;
  transition: width 300ms ease;
}

.badge-progress-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--blue);
}

.badges-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 1.5rem 0.5rem;
}

.missions-panel-head,
.badges-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.missions-panel-head h3,
.badges-panel-head h3 {
  margin-bottom: 0;
}

.missions-countdown {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
}

.badge-filter-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.badge-filter-btn {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

.badge-filter-btn:hover {
  border-color: var(--cyan);
}

.badge-filter-btn.active {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-color: transparent;
  color: #fff;
}

/* Achievements stats header: level ring, streak, best streak, badges earned */
.achievements-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 720px) {
  .achievements-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow-soft);
}

.stat-tile-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.stat-tile-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.stat-tile-copy strong {
  font-size: 1.15rem;
  line-height: 1;
}

.stat-tile-copy span {
  font-size: 0.72rem;
  color: var(--muted);
}

.stat-level-ring {
  --ring-percent: 0;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--blue) calc(var(--ring-percent) * 1%), var(--line) 0);
  transition: background 300ms ease;
}

.stat-level-ring span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--blue);
}

/* Gamification toasts: popped for badge unlocks, level-ups and mission completions */
.gamification-toasts {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(340px, calc(100vw - 2.5rem));
}

.gamification-toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 0.75rem 1rem;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.gamification-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.gamification-toast.hide {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
}

.gamification-toast-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.gamification-toast-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
}

.gamification-toast-copy span {
  font-size: 0.75rem;
  color: var(--muted);
}

.gamification-toast.badge {
  border-color: var(--cyan);
  box-shadow: 0 10px 26px rgba(0, 194, 255, 0.25);
}

.gamification-toast.level {
  border-color: var(--purple);
  box-shadow: 0 10px 26px rgba(139, 92, 246, 0.25);
}

.gamification-toast.mission {
  border-color: var(--green);
  box-shadow: 0 10px 26px rgba(34, 197, 94, 0.2);
}

/* Learning path language/level controls */
/* Prominent "Puente ⇄ Objetivo  [Nivel]" selector - the one place on the
   Aprender view the student always sees which two languages they're paired
   in, so it gets its own highlighted panel instead of blending in as plain
   label+select rows like the rest of the page's forms. */
.language-pair-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.08));
  border: 1px solid rgba(37, 99, 235, 0.16);
}

.language-pair-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.language-pair-field select {
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy-2);
  min-width: 9.5rem;
}

.language-pair-field-level select {
  min-width: 5rem;
}

.path-start-learning-btn {
  min-height: 2.65rem;
  min-width: 7.5rem;
  align-self: flex-end;
}

.course-progress-units {
  margin: 1rem 0 1.5rem;
}

.course-progress-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.course-progress-heading span,
.course-progress-unit-card p {
  color: var(--muted);
  font-size: 0.82rem;
}

.course-progress-unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}

.course-progress-unit-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.course-progress-unit-card > span {
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.course-progress-unit-bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--light);
}

.course-progress-unit-bar > div {
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-primary);
}

.skill-competency-card[data-skill='reading'] {
  order: 1;
}

.skill-competency-card[data-skill='listening'] {
  order: 2;
}

.skill-competency-card[data-skill='vocabulary'] {
  order: 3;
}

.skill-competency-card[data-skill='grammar'] {
  order: 4;
}

.skill-competency-card[data-skill='speaking'] {
  order: 5;
}

.skill-competency-card[data-skill='writing'] {
  order: 6;
}

.language-pair-swap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid rgba(37, 99, 235, 0.3);
  background: var(--white);
  color: var(--blue);
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.language-pair-swap-btn:hover {
  background: rgba(37, 99, 235, 0.1);
  transform: rotate(180deg);
}

@media (max-width: 640px) {
  .language-pair-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .language-pair-swap-btn {
    align-self: center;
    transform: rotate(90deg);
  }
  .language-pair-swap-btn:hover {
    transform: rotate(270deg);
  }
  .path-start-learning-btn {
    width: 100%;
    align-self: stretch;
  }
}

/* Interactive multiple-choice questions (reading comprehension + lesson exercises) */
.mcq-question {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), var(--accent-soft));
}

.exercise-challenge-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.exercise-challenge-kicker,
.exercise-xp {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.exercise-challenge-kicker { color: var(--blue); }

.exercise-xp {
  color: #a16207;
  background: rgba(250, 204, 21, 0.18);
  border-radius: 999px;
  padding: 0.24rem 0.48rem;
  letter-spacing: 0;
  text-transform: none;
}

.exercise-prompt {
  font-size: 1rem;
  line-height: 1.4;
}

.mcq-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem;
}

.mcq-option {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.48rem;
  text-align: left;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.mcq-option:hover:not(:disabled) {
  border-color: var(--blue);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.mcq-option[aria-pressed='true']:not(:disabled) {
  border-color: var(--blue);
  background: var(--accent-soft);
}

.mcq-option-letter {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 800;
}

.mcq-option-text { min-width: 0; }

.mcq-option:disabled {
  cursor: default;
}

.mcq-question.is-checking .mcq-option:not([aria-pressed='true']) {
  opacity: 0.55;
}

.mcq-option.correct {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--green);
  color: #15803d;
}

.mcq-option.correct .mcq-option-letter {
  background: var(--green);
  color: var(--white);
}

.mcq-option.incorrect {
  background: rgba(220, 38, 38, 0.12);
  border-color: #dc2626;
  color: #b91c1c;
}

.mcq-option.incorrect .mcq-option-letter {
  background: #dc2626;
  color: var(--white);
}

.mcq-feedback {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

.mcq-feedback.is-ready { font-weight: 600; }

.mcq-feedback.is-result { animation: exercise-feedback-pop 180ms ease-out; }

.mcq-question.is-correct .mcq-feedback {
  color: #15803d;
}

.mcq-question.is-incorrect .mcq-feedback {
  color: #b91c1c;
}

.lesson-exercise {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.lesson-exercise.mcq-question {
  margin: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.lesson-exercise:last-child {
  border-bottom: none;
}

.open-exercise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.open-exercise > div { display: grid; gap: 0.36rem; }

.practice-mark-btn {
  flex-shrink: 0;
  border: 1px solid var(--blue);
  background: var(--accent-soft);
  color: var(--blue);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}

.practice-mark-btn:disabled {
  border-color: var(--green);
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
  cursor: default;
}

@keyframes exercise-feedback-pop {
  from { transform: translateY(2px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mcq-feedback.is-result { animation: none; }
}

/* Celebration toast for level-ups and badge unlocks */
.celebration-toast {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -12px) scale(0.94);
  background: linear-gradient(135deg, var(--purple), var(--blue));
  color: var(--white);
  padding: 1rem 1.75rem;
  border-radius: 18px;
  font-weight: 800;
  font-size: 1rem;
  text-align: center;
  box-shadow: 0 24px 60px rgba(37, 99, 235, 0.35);
  z-index: 80;
  opacity: 0;
  transition:
    opacity 250ms ease,
    transform 250ms ease;
  pointer-events: none;
}

.celebration-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.unit-completion-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(5px);
}

.unit-completion-card {
  position: relative;
  width: min(560px, 100%);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  text-align: center;
}

.unit-completion-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy-2);
  font-size: 1.35rem;
  cursor: pointer;
}

.unit-completion-icon {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 3rem;
}

.unit-completion-kicker {
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.unit-completion-card h2 {
  margin: 0.45rem 0 0.6rem;
}

.unit-completion-card > p {
  color: var(--muted);
  line-height: 1.55;
}

.unit-completion-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1.4rem 0;
}

.unit-completion-results span {
  padding: 0.85rem 0.5rem;
  border-radius: 14px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.78rem;
}

.unit-completion-results strong {
  display: block;
  color: var(--navy-2);
  font-size: 1.05rem;
}

.unit-completion-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 520px) {
  .unit-completion-results {
    grid-template-columns: 1fr;
  }

  .unit-completion-actions > * {
    width: 100%;
  }
}

@media (max-width: 780px) {
  .achievements-layout {
    gap: 1rem;
  }

  .gamification-strip {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Learning path workspace — left: module/lesson list, right: lesson panel
   ========================================================================== */

.learning-path-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(520px, 0.88fr);
  grid-template-areas: 'lesson route';
  gap: clamp(24px, 2.4vw, 40px);
  align-items: start;
  width: 100%;
}

/* The route and each skill already have their own visual hierarchy. The
   general section spacing made the learner cross a large empty band before
   reaching the tabs, especially after opening a route from the language
   selector. Keep enough breathing room below the fixed header without
   making the learning interface feel disconnected. */
.learning-path-section,
.skill-view-section {
  padding-top: clamp(2.75rem, 4.5vw, 4.5rem);
  padding-bottom: clamp(3.5rem, 5vw, 5.5rem);
}

.learn-route-toggle {
  display: none;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy-2);
  cursor: pointer;
  margin-bottom: 1rem;
}

.learn-route-toggle:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.learning-route-context {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: fit-content;
  max-width: min(100%, 560px);
  min-height: 30px;
  margin: 0.7rem auto 1rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-xs);
  color: var(--navy-2);
  font-size: 0.76rem;
  font-weight: 750;
  white-space: nowrap;
}

.learning-route-context i {
  width: 3px;
  height: 3px;
  flex: 0 0 3px;
  border-radius: 999px;
  background: var(--blue);
}

.activity-route-context {
  margin: 0 auto 0.65rem;
  min-height: 28px;
  padding-block: 0.22rem;
  background: rgba(255, 255, 255, 0.82);
}

.skill-graph {
  grid-area: route;
  position: relative;
  overflow-y: auto;
  max-height: 680px;
  background:
    radial-gradient(circle at 92% 4%, rgba(0, 194, 255, 0.14), transparent 18%),
    radial-gradient(circle at 4% 28%, rgba(124, 58, 237, 0.1), transparent 20%),
    var(--surface);
  border-radius: 26px;
  padding: 1.35rem;
  box-shadow: 0 24px 55px rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.16);
}

.skill-graph::-webkit-scrollbar {
  width: 5px;
}
.skill-graph::-webkit-scrollbar-track {
  background: transparent;
}
.skill-graph::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

.skill-graph-empty {
  padding: 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.path-summary {
  padding: 0.4rem 0.45rem 1.15rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed rgba(37, 99, 235, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.path-summary-lang {
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--navy-2);
}

.path-summary-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.path-summary-progress div {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 999px;
  transition: width 300ms ease;
}

.path-summary-detail {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.path-module-header {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0.25rem 0.25rem 0.6rem;
}

.path-module-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.path-lesson-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  min-height: 44px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 16px;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.path-lesson-item:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.path-lesson-item:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.path-lesson-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.path-lesson-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.path-lesson-skill {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--blue);
}

.path-lesson-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.path-lesson-meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}

.path-lesson-progress {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin-top: 0.15rem;
}

.path-lesson-progress span {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 999px;
  transition: width var(--duration-slow) var(--ease-standard);
}

.path-lesson-state {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.path-lesson-state--available {
  background: rgba(0, 194, 255, 0.12);
  color: #0369a1;
}
.path-lesson-state--recommended {
  background: rgba(37, 99, 235, 0.14);
  color: var(--blue);
}
.path-lesson-state--in-progress {
  background: rgba(234, 179, 8, 0.15);
  color: #a16207;
}
.path-lesson-state--completed {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}
.path-lesson-state--locked {
  background: var(--line);
  color: var(--muted);
}
.path-lesson-state--now {
  background: var(--blue);
  color: #fff;
}

/* Active lesson: distinct border + background + the state badge above
   already reads "Ahora" - aria-current="true" is set in the markup. */
.path-lesson-item[aria-current='true'] {
  border-color: var(--blue);
  background: rgba(37, 99, 235, 0.06);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.path-lesson-item--locked {
  opacity: 0.7;
}

/* Ruta/Reading/Listening/.../Vocabulary tab strip, repeated at the top of
   #learning-path and each of the 6 skill sections. Same visual language as
   .auth-tabs/.auth-tab. */
.level-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.level-tab {
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--navy-2);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease;
}

.level-tab:hover {
  border-color: var(--blue);
}

.level-tab.active {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  border-color: transparent;
}

/* Unit list (Ruta tab for unit-aware languages, e.g. English A1's 12
   thematic units) - just the unit name + progress, one button each. Skill
   breakdown lives in the right-hand unit overview panel's single CTA
   (renderUnitOverviewCard) and each skill's own level-tabs nav, not here. */
.unit-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.path-unit-group {
  display: grid;
  gap: 0.45rem;
  border-radius: 20px;
}

.path-unit {
  display: grid;
  grid-template-columns: 3rem minmax(180px, 1fr) auto auto auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 88px;
  border: 1px solid rgba(37, 99, 235, 0.13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.9rem 1rem;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.path-unit:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12);
}

.path-unit:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.32);
  outline-offset: 3px;
}

.path-unit-order {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, #dbeafe, #ede9fe);
  font-size: 1.35rem;
  box-shadow: 0 7px 15px rgba(37, 99, 235, 0.13);
}

.path-unit-titles {
  display: grid;
  min-width: 0;
  margin-right: auto;
}

.path-unit-journey {
  color: var(--blue);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.path-unit-reward {
  color: #a16207;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.path-unit-premium {
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  background: #f3e8ff;
  color: #6d28d9;
  font-size: 0.68rem;
  font-weight: 850;
  white-space: nowrap;
}

.path-unit--premium:hover,
.path-unit--premium:focus-visible {
  border-color: #8b5cf6;
  background: #faf7ff;
}

.path-unit-progress-label {
  min-width: 3.25rem;
  padding: 0.32rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
}

@media (max-width: 520px) {
  .path-unit {
    flex-wrap: wrap;
  }

  .path-unit-reward {
    margin-left: 3.2rem;
  }

  .path-unit-premium {
    margin-left: auto;
  }
}

.path-unit-lessons {
  position: relative;
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.25rem 0.9rem;
  padding-left: 1rem;
}

.path-unit-lessons::before {
  content: '';
  position: absolute;
  top: 0.15rem;
  bottom: 0.15rem;
  left: 0.2rem;
  width: 2px;
  border-radius: 999px;
  background: var(--line);
}

.path-unit-lessons .path-lesson-item {
  position: relative;
  padding: 0.62rem 0.68rem;
}

.path-unit-lessons .path-lesson-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -1.21rem;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: #b9c8dd;
  transform: translateY(-50%);
  box-shadow: 0 0 0 1px var(--line);
}

.path-unit-lessons .path-lesson-item[aria-current='true'] {
  border-color: var(--blue);
  background: var(--accent-soft);
}

.path-unit-lessons .path-lesson-item[aria-current='true']::before {
  width: 12px;
  height: 12px;
  left: -1.3rem;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.path-unit--selected {
  border-color: var(--blue);
  background: linear-gradient(100deg, rgba(239, 246, 255, 0.98), rgba(250, 245, 255, 0.96));
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.1),
    0 16px 34px rgba(37, 99, 235, 0.14);
}

.path-unit-order {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 16px;
}

.path-unit-titles {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0.1rem;
}

.path-unit-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy-2);
  line-height: 1.25;
}

.path-unit-title-es {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}

.path-unit-progress-label {
  min-width: 3.6rem;
  padding: 0.42rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 1260px) and (min-width: 641px) {
  .learning-path-layout {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
  }

  .path-unit {
    grid-template-columns: 3rem minmax(150px, 1fr) auto auto;
  }

  .path-unit-progress-label {
    grid-column: 2 / -1;
    justify-self: stretch;
  }
}

@media (max-width: 560px) {
  .learning-route-context {
    gap: 0.5rem;
    width: 100%;
    font-size: 0.72rem;
  }
}

/* Skill library grid (Reading/Listening/.../Vocabulary tabs for unit-aware
   languages): every activity of that skill across all units, one card each. */
.skill-library-intro {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

.skill-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
}

.skill-library-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition:
    border-color 150ms ease,
    transform 150ms ease;
}

.skill-library-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.skill-library-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.skill-library-card-unit {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--blue);
}

.skill-library-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-2);
}

.skill-library-card-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.skill-library-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: 0.2rem;
}

/* Lesson workspace panel */
.lesson-workspace {
  grid-area: lesson;
  background: var(--surface);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}

.lesson-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.learn-back-to-route {
  display: inline-block;
  border: none;
  background: none;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.learn-back-to-route:hover {
  text-decoration: underline;
}

/* Right panel's default state, shown whenever no lesson has been explicitly
   opened yet (learningPathState.activeSlug is empty) - the panel is never
   left blank. */
.lesson-continue-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 260px;
  justify-content: center;
  padding: clamp(0.25rem, 2vw, 1.25rem);
}

.lesson-continue-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue);
}

.lesson-continue-card h3 {
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  margin: 0;
}

.lesson-continue-title {
  font-weight: 700;
  color: var(--navy-2);
  font-size: 1rem;
}

.lesson-continue-desc {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.lesson-continue-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy-2);
}

.lesson-continue-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
  margin-top: 0.3rem;
}

.lesson-continue-progress div {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 999px;
  transition: width var(--duration-slow) var(--ease-standard);
}

.lesson-continue-count {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.lesson-continue-btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.compact-skills-row {
  margin-bottom: 1.5rem;
}

.compact-skills-row.features-grid {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

/* .features-grid article's dark-section styling (rgba white-on-transparent)
   doesn't apply here - this row now lives in #learning-path, a light
   section, not the removed standalone dark #skills section. */
.compact-skills-row.features-grid article {
  background: var(--surface);
  border-color: rgba(96, 165, 250, 0.15);
}

.compact-skills-row .skill-competency-card {
  padding: 0.85rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.compact-skills-row .icon {
  font-size: 1.3rem;
}

.compact-skills-row h3 {
  font-size: 0.85rem;
  margin-bottom: 0;
}

.skill-card-status {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}

.skill-card-status-available {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.skill-card-status-soon,
.skill-card-status-loading {
  background: var(--line);
  color: var(--muted);
}

.skill-card-status-partial {
  background: rgba(234, 179, 8, 0.14);
  color: #a16207;
}

.skill-card-progress {
  width: 100%;
  height: 5px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.skill-card-progress div {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 999px;
  transition: width 300ms ease;
}

.skill-card-xp {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--blue);
  min-height: 1em;
}

.lesson-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--blue);
  display: block;
  margin-bottom: 0.25rem;
}

.lesson-workspace h3 {
  font-size: 1.1rem;
  line-height: 1.3;
}

.lesson-intro {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  line-height: 1.55;
}

.lesson-audio:empty {
  display: none;
}

.lesson-audio-player {
  width: 100%;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  height: 42px;
  background: var(--bg);
}

.lesson-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.lesson-columns h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.lesson-vocabulary > div,
.lesson-dialogue > div {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
  line-height: 1.4;
}

.lesson-vocabulary > div:last-child,
.lesson-dialogue > div:last-child {
  border-bottom: none;
}

.lesson-vocabulary strong,
.lesson-dialogue strong {
  display: block;
  font-weight: 700;
  color: var(--navy-2);
}

.lesson-vocabulary span,
.lesson-dialogue span {
  color: var(--muted);
  font-size: 0.78rem;
}

.lesson-complete-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0.6rem 1.1rem;
  font-weight: 800;
  font-size: 0.83rem;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.lesson-complete-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

.lesson-complete-btn:disabled {
  opacity: 0.52;
  cursor: default;
  box-shadow: none;
}

.premium-lock-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
}

.premium-lock-box strong {
  font-size: 1rem;
}

/* Discreet inline notice for the Tutor's monthly free-query/voice caps
   (see appendTutorUsageNotice in script.js) - the locked variant reuses
   .premium-lock-box above (added as a second class) instead of its own
   background/border. */
.tutor-usage-notice {
  margin: 0.5rem 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.tutor-usage-notice.premium-lock-box {
  font-size: 0.95rem;
  color: var(--navy-2);
}

/* Responsive adjustments */

/* Tablet: keep the recommended lesson prominent and the route secondary. */
@media (max-width: 1024px) and (min-width: 641px) {
  .learning-path-layout {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.95fr);
    gap: 20px;
  }
  .skill-graph {
    max-height: 520px;
  }
}

/* Mobile: single column, lesson content first, path tucked into a
   collapsible drawer behind "Ver ruta" - no fixed sidebar, no horizontal
   scroll, 44px+ touch targets (already set on .path-lesson-item/.learn-route-toggle above). */
@media (max-width: 640px) {
  .learn-route-toggle {
    display: block;
  }

  .learning-path-layout {
    display: flex;
    flex-direction: column;
  }

  .lesson-workspace {
    order: 1;
  }

  .skill-graph {
    order: 2;
    max-height: 0;
    padding: 0;
    margin: 0;
    border-width: 0;
    box-shadow: none;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 220ms ease,
      opacity 180ms ease;
  }

  .skill-graph.is-drawer-open {
    max-height: 2000px;
    opacity: 1;
    padding: 1rem;
    margin-top: 1rem;
    border-width: 1px;
    box-shadow: var(--shadow-soft);
  }
}

@media (max-width: 640px) {
  .lesson-columns {
    grid-template-columns: 1fr;
  }
}

/* Compact learning context: keep the course controls and current mission
   visible without pushing the lesson content below the fold. */
.skill-view-section > .level-tabs {
  display: none;
}

.skill-view-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  border-radius: 16px;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.8rem;
}

.skill-view-pills {
  gap: 0.4rem;
  margin: 0;
}

.skill-view-pill {
  padding: 0.22rem 0.6rem;
  font-size: 0.76rem;
}

.skill-view-sentence {
  flex: 1 1 280px;
  margin: 0;
  font-size: 0.78rem;
}

.skill-view-actions {
  margin-left: auto;
  gap: 0.4rem;
}

.skill-view-actions .secondary-btn,
.skill-view-actions .primary-btn {
  min-height: 32px;
  padding: 0.3rem 0.45rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--blue);
  font-size: 0.72rem;
}

.skill-view-actions .secondary-btn:hover,
.skill-view-actions .primary-btn:hover {
  background: rgba(37, 99, 235, 0.07);
  transform: none;
}

/* Keep the route visible, but tuck rarely used controls into a small
   disclosure. This removes the repeated three-button toolbar from every
   skill without removing the Tutor or course-combination controls. */
.skill-view-more {
  position: relative;
}

.skill-view-more > summary {
  min-height: 32px;
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  color: var(--blue);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  list-style: none;
}

.skill-view-more > summary::-webkit-details-marker {
  display: none;
}

.skill-view-more > summary::after {
  content: '⌄';
  display: inline-block;
  margin-left: 0.25rem;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.skill-view-more[open] > summary,
.skill-view-more > summary:hover {
  background: rgba(37, 99, 235, 0.07);
}

.skill-view-more[open] > summary::after {
  transform: rotate(180deg);
}

.skill-view-more > summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.skill-view-more-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 0.4rem);
  right: 0;
  display: grid;
  min-width: 11.5rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.skill-view-more-menu button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  background: transparent;
  color: var(--navy-2);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
}

.skill-view-more-menu button:hover {
  background: var(--accent-soft);
  color: var(--blue);
}

.unit-mission-strip {
  gap: 0.5rem 0.75rem;
  margin: 0.55rem 0 0.8rem;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
}

.unit-route-markers {
  padding-top: 0.1rem;
}

.unit-route-markers::before,
.unit-route-markers::after {
  top: 0.78rem;
  height: 2px;
}

.unit-route-marker {
  gap: 0.15rem;
}

.unit-route-marker > span {
  width: 1.35rem;
  height: 1.35rem;
  border-width: 2px;
  font-size: 0.58rem;
}

.unit-route-marker small {
  font-size: 0.58rem;
}

.unit-mission-copy {
  gap: 0.1rem;
}

.unit-mission-copy span,
.unit-mission-kicker {
  font-size: 0.66rem;
}

.unit-mission-copy strong {
  font-size: 0.84rem;
}

.unit-mission-copy small {
  font-size: 0.7rem;
}

.unit-mission-route-btn {
  min-height: 30px;
  padding: 0.25rem 0.4rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--blue);
  font-size: 0.7rem;
}

/* ===================================================================
   Dedicated skill views (Reading/Writing/Speaking/Grammar/Vocabulary/
   Listening) - shared header + per-skill content, full-width like the
   other routed views (no cramped columns).
   =================================================================== */

.skill-view-section .skill-view-content {
  max-width: none;
}

.skill-view-section {
  padding-top: clamp(6rem, 7vw, 7rem);
}

@media (max-width: 720px) {
  .skill-view-section {
    padding-top: 2.5rem;
  }
}

.skill-view-header {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.skill-view-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.skill-view-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.16);
  color: #1e3a8a;
  font-size: 0.85rem;
}

.skill-view-sentence {
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 0.9rem;
}

.skill-view-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.skill-view-tutor-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

/* One visible learning action keeps the exercise focused; Tutor, translation
   and document tools remain nearby inside the native, keyboard-accessible
   disclosure. */
.learning-tools {
  align-items: center;
}

.learning-tools-more .skill-view-more-menu {
  position: static;
  min-width: min(18rem, calc(100vw - 3rem));
  margin-top: 0.35rem;
}

.learning-tools-more .skill-view-more-menu button {
  width: 100%;
}

/* Reading */
.reading-print-area {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(0.7rem, 1.4vw, 1.1rem);
  box-shadow: var(--shadow-soft);
}

.reading-level-tag {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.reading-progress-bar {
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.1rem 0.35rem 0.7rem;
}

.reading-progress-bar div {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 999px;
  transition: width var(--duration-slow) var(--ease-standard);
}

/* Reading hero: title/level/duration on the left, a small icon card on the
   right - see .reading-illustration below. Stacks to a single column,
   illustration first, on narrower screens (media query further down). */
.reading-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.reading-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.reading-heading h3 {
  margin: 0.15rem 0 0.4rem;
}

.reading-description {
  color: var(--muted);
  font-size: 0.95rem;
}

/* The reading heading belongs to the article card, immediately before the
   prose it introduces. This keeps the title visually connected to its text
   while the audio and display controls remain available above it. */
.reading-reader-card .reading-hero--near-text {
  margin: 1rem 0 0.85rem;
  padding: 0 0 0.75rem;
  gap: 0.85rem;
}

.reading-reader-card .reading-hero--near-text .reading-level-tag {
  margin-bottom: 0.35rem;
}

.reading-reader-card .reading-hero--near-text h3 {
  margin-bottom: 0.25rem;
}

.reading-reader-card .reading-hero--near-text .reading-description {
  margin: 0.25rem 0 0;
}

/* Small icon card - a quiet accent next to the title, not a hero image:
   a fixed, compact square with a soft pastel background and a simple
   line-art glyph (see buildGenericIllustrationDataUri in script.js).
   Deliberately static (no animation) - at this size motion reads as a
   flicker, not as polish. */
.reading-illustration {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.reading-illustration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px) {
  .reading-hero {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.85rem;
  }
  .reading-illustration {
    width: 64px;
    height: 64px;
  }
}

/* Reading full text - the single source of truth for what's on screen and
   in the printed PDF alike (see renderReadingParagraphsHtml/#readingPrintArea
   in script.js) - never duplicated elsewhere. */
.reading-reader-card {
  width: 100%;
  margin-inline: auto;
  padding: clamp(0.7rem, 1.5vw, 1rem);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.reading-display-controls {
  width: 100%;
  min-height: 34px;
  margin: 0 0 0.55rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(239, 246, 255, 0.7);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.reading-display-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.reading-size-controls {
  display: inline-flex;
  gap: 0.2rem;
}

.reading-display-btn {
  min-height: 28px;
  padding: 0.15rem 0.48rem;
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 8px;
  background: #fff;
  color: var(--navy-2);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.reading-display-btn:hover,
.reading-display-btn.is-active,
.reading-font-select:focus-visible {
  border-color: var(--blue);
  background: rgba(37, 99, 235, 0.09);
  color: var(--blue);
}

.reading-font-control {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 28px;
  padding: 0.15rem 0.48rem;
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 8px;
  background: #fff;
  color: var(--navy-2);
  font-size: 0.78rem;
  font-weight: 700;
}

.reading-font-select {
  min-width: 104px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.reading-text {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  text-align: left;
}

.reading-selection-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 1rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 12px;
  background: rgba(239, 246, 255, 0.72);
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.45;
}

.reading-selection-hint--footer {
  margin-top: 1.5rem;
  margin-bottom: 0;
  border-style: dashed;
  background: rgba(248, 250, 252, 0.82);
  font-size: 0.75rem;
  font-style: italic;
}

.reading-text ::selection {
  background: rgba(37, 99, 235, 0.24);
  color: var(--navy-2);
}

.reading-translation-popover {
  position: fixed;
  z-index: 12000;
  overflow: auto;
  max-height: min(520px, calc(100vh - 24px));
  padding: 0;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.22);
  color: var(--navy-2);
}

.reading-translation-popover[hidden] {
  display: none;
}

.reading-translation-card,
.reading-translation-error {
  padding: 1rem;
}

.reading-translation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
  color: #2563eb;
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reading-translation-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  font-size: 1.15rem;
  cursor: pointer;
}

.reading-translation-term,
.reading-translation-result {
  margin: 0;
  overflow-wrap: anywhere;
}

.reading-translation-term {
  color: #64748b;
  font-size: 0.86rem;
}

.reading-translation-result {
  margin-top: 0.2rem;
  color: #0f172a;
  font-size: 1.2rem;
  font-weight: 850;
}

.reading-translation-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.reading-translation-actions .secondary-btn,
.reading-translation-error .secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.32rem 0.4rem;
  border-radius: 13px;
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1.1;
  white-space: nowrap;
}

.reading-translation-save.is-premium-only {
  border-color: rgba(124, 58, 237, 0.3);
  background: linear-gradient(135deg, #faf5ff, #eff6ff);
  color: #6d28d9;
}

.reading-translation-status {
  display: block;
  min-height: 1.2em;
  margin-top: 0.7rem;
  color: #2563eb;
  font-size: 0.75rem;
  line-height: 1.4;
}

.reading-translation-loading {
  padding: 1rem;
  color: #2563eb;
  font-size: 0.85rem;
  font-weight: 800;
}

.reading-translation-error {
  position: relative;
}

.reading-translation-error p {
  margin: 0 2rem 0.75rem 0;
  color: #b91c1c;
  font-size: 0.82rem;
}

.reading-translation-error .reading-translation-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
}

.reading-print-area[data-reading-alignment='justify'] .reading-text p {
  text-align: justify;
  text-justify: inter-word;
}

.reading-text p {
  font-size: 1.075rem;
  line-height: 1.8;
  margin: 0 0 1.25rem;
  text-indent: 1.25em;
  color: var(--navy-2);
}

.reading-text p:last-child {
  margin-bottom: 0;
}

.reading-references {
  width: 100%;
  max-width: 1120px;
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(15, 23, 42, 0.14);
  color: var(--muted);
}

.reading-references h4 {
  margin: 0 0 0.75rem;
  color: var(--navy-2);
  font-size: 1rem;
}

.reading-references ol {
  margin: 0;
  padding-left: 1.35rem;
}

.reading-references li {
  margin-bottom: 0.55rem;
  font-size: 0.875rem;
  line-height: 1.55;
}

.reading-references a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reading-print-area[data-reading-size='small'] .reading-text p {
  font-size: 0.975rem;
}

.reading-print-area[data-reading-size='large'] .reading-text p {
  font-size: 1.2rem;
}

.reading-print-area[data-reading-font='arial'] .reading-text {
  font-family: Arial, Helvetica, sans-serif;
}

.reading-print-area[data-reading-font='times'] .reading-text {
  font-family: 'Times New Roman', Times, serif;
}

/* Highlights whichever sentence the audio player is currently speaking -
   a background tint only, no size/layout change, so the text never jumps. */
.reading-sentence.is-speaking {
  background: rgba(37, 99, 235, 0.12);
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

/* Visual break between the reading itself and the activities below it -
   vocab/support/reflect/questions/ordering read as one distinct group. */
.reading-vocab-section {
  width: min(100%, 820px);
  margin: 1.75rem 0 1rem;
  margin-inline: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.reading-vocab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.saved-reading-vocabulary {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.9), #fff);
}

.saved-reading-vocabulary-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.saved-reading-vocabulary-heading h4,
.saved-reading-vocabulary-heading p,
.saved-reading-vocabulary-empty p,
.saved-reading-vocabulary-empty span {
  margin: 0;
}

.saved-reading-vocabulary-heading p,
.saved-reading-vocabulary-heading span,
.saved-reading-vocabulary-empty p,
.saved-reading-vocabulary-empty span {
  color: #64748b;
  font-size: 0.78rem;
}

.saved-reading-vocabulary-heading strong,
.saved-reading-vocabulary-heading span {
  display: block;
}

.saved-reading-vocabulary-heading span {
  margin-top: 0.15rem;
}

.saved-reading-vocabulary-empty {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.saved-reading-vocabulary-premium {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.saved-reading-vocabulary-premium strong,
.saved-reading-vocabulary-premium span {
  display: block;
}

.saved-reading-vocabulary-premium span {
  margin-top: 0.2rem;
  color: #64748b;
  font-size: 0.78rem;
}

.saved-reading-vocabulary-premium .secondary-btn {
  flex: 0 0 auto;
}

.saved-reading-vocabulary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.7rem;
}

.saved-reading-word {
  position: relative;
  min-width: 0;
  padding: 0.75rem 2.5rem 0.75rem 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  background: #fff;
}

.saved-reading-word strong,
.saved-reading-word span,
.saved-reading-word small,
.saved-reading-word p {
  display: block;
  overflow-wrap: anywhere;
}

.saved-reading-word strong {
  color: #0f172a;
}

.saved-reading-word span {
  margin-top: 0.15rem;
  color: #2563eb;
  font-weight: 750;
}

.saved-reading-word small,
.saved-reading-word p {
  margin-top: 0.4rem;
  margin-bottom: 0;
  color: #64748b;
  font-size: 0.74rem;
  line-height: 1.4;
}

.saved-reading-word-listen {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eff6ff;
  cursor: pointer;
}

@media (max-width: 600px) {
  .saved-reading-vocabulary-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .saved-reading-vocabulary-premium {
    align-items: stretch;
    flex-direction: column;
  }

  .reading-reader-card {
    padding: 0.6rem;
    border-radius: 14px;
  }

  .reading-display-controls {
    min-height: 32px;
    margin-bottom: 0.45rem;
    padding: 0.15rem 0.25rem;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .reading-display-controls::-webkit-scrollbar {
    display: none;
  }

  .reading-display-label,
  .reading-size-controls,
  .reading-font-control,
  .reading-align-btn {
    flex: 0 0 auto;
  }
}

.reading-vocab-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.reading-vocab-list[hidden] {
  display: none;
}

.reading-vocab-item {
  background: var(--bg);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
}

.reading-vocab-support {
  color: var(--muted);
}

.reading-questions {
  margin-top: 1.5rem;
}

/* Reading comprehension quiz (see renderReadingComprehensionQuiz() in
   src/js/script.js) - four-option (A/B/C/D) multiple choice, single
   selection per question, graded as a batch via "Calificar". */
.reading-comp-quiz {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
}

.reading-comp-quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-soft), rgba(255, 255, 255, 0.78));
}

.reading-comp-quiz-header > div:first-child {
  display: grid;
  gap: 0.16rem;
}

.reading-comp-kicker {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reading-comp-progress {
  width: min(180px, 32%);
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.14);
}

.reading-comp-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width 180ms ease;
}

.reading-comp-count-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
}

.reading-comp-count-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--navy-2);
  font: inherit;
  padding: 0.32rem 0.6rem;
  cursor: pointer;
}

.reading-comp-count-btn.is-selected {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.reading-comp-question {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.reading-comp-question:last-of-type {
  border-bottom: none;
}

.reading-comp-prompt {
  font-size: 0.95rem;
  color: var(--navy-2);
}

.reading-comp-question-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.reading-comp-question-number {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
}

.reading-comp-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

@media (max-width: 640px) {
  .reading-comp-options {
    grid-template-columns: 1fr;
  }
}

.reading-comp-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-2);
  cursor: pointer;
  text-align: left;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.reading-comp-option:hover:not(:disabled) {
  border-color: var(--blue);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.reading-comp-option:disabled {
  cursor: default;
}

.reading-comp-option-letter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--bg);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
}

.reading-comp-option-text {
  flex: 1;
}

.reading-comp-option.is-selected {
  border-color: var(--blue);
  background: var(--accent-soft);
}

.reading-comp-option.is-selected .reading-comp-option-letter {
  background: var(--blue);
  color: var(--white);
}

.reading-comp-option.is-correct {
  border-color: var(--green);
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}

.reading-comp-option.is-correct .reading-comp-option-letter {
  background: var(--green);
  color: var(--white);
}

.reading-comp-option.is-incorrect {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.reading-comp-option.is-incorrect .reading-comp-option-letter {
  background: #dc2626;
  color: var(--white);
}

.reading-comp-option.is-correct-answer {
  border-color: var(--green);
  border-style: dashed;
}

.reading-comp-feedback {
  font-size: 0.8rem;
  font-weight: 700;
  animation: reading-comp-feedback-pop 180ms ease-out;
}

.reading-comp-feedback.is-correct {
  color: #15803d;
}

.reading-comp-feedback.is-incorrect {
  color: #b91c1c;
}

.reading-comp-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.reading-comp-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.reading-comp-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
}

.reading-comp-error {
  font-size: 0.82rem;
  font-weight: 700;
  color: #b91c1c;
  margin: 0;
}

.reading-comp-result {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.reading-comp-result-score {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy-2);
  margin: 0;
}

.reading-comp-result-detail {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.reading-comp-result-message {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue);
  margin: 0.25rem 0 0;
}

.reading-print-answer-space,
.reading-print-header {
  display: none;
}

/* .print-only elements (reading-print-header, reading-print-answer-space)
   are only meant to be visible inside the PDF/print layout - @media print
   below flips this back to display:block !important. The reading's full
   text (.reading-text) is not print-only - it has no visibility:hidden
   base rule, so it shows on screen and inside #readingPrintArea's printed
   output identically, with nothing duplicating it either place. */
.print-only {
  display: none;
}

/* Full-reading Text-to-Speech player (spec section A) - the only control
   surface for moving through the audio; it sits above the always-visible
   full reading text and never replaces or reflows it. Kept deliberately
   compact (~54-66px tall on desktop) so it reads as a discreet utility
   between the title and the reading body, not a protagonist section. */
.reading-audio-player {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.5625rem 0.55rem;
  margin-bottom: 0.55rem;
}

.reading-audio-player.is-completed {
  border-color: var(--blue);
}

.reading-audio-unavailable {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.reading-audio-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.reading-audio-rate-group {
  display: flex;
  gap: 0.3rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--line);
}

@media (max-width: 480px) {
  .reading-print-area {
    padding: 0.5rem;
    border-radius: 14px;
  }

  .reading-progress-bar {
    height: 3px;
    margin: 0 0.2rem 0.45rem;
  }

  .reading-audio-player {
    padding: 0.25rem 0.3rem;
    margin-bottom: 0.4rem;
    border-radius: 11px;
  }

  .reading-audio-controls {
    gap: 0.22rem;
  }

  .reading-audio-rate-group {
    padding-left: 0;
    border-left: none;
    width: auto;
  }

  .reading-audio-progress {
    flex: 1 1 90px;
  }

  .reading-audio-meta {
    flex: 0 0 auto;
    gap: 0.25rem;
  }

  .reading-audio-status:empty,
  .reading-audio-status {
    display: none;
  }

  .reading-audio-voice-label {
    display: none;
  }

}

.reading-audio-btn {
  min-height: 36px;
  min-width: 36px;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: var(--radius-md);
  background: var(--surface, #fff);
  color: var(--navy-2);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease;
}

.reading-audio-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.reading-audio-btn.is-active,
.reading-audio-btn:active:not(:disabled) {
  border-color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue);
}

/* Animated indicator while audio is playing - purely decorative,
   reuses the existing .is-active state already toggled in JS to mark
   the play/pause button as "currently playing" (see script.js's
   reading-audio-playpause-btn render). No new JS hook needed. */
.reading-audio-playpause-btn.is-active::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 10px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
  animation: audio-pulse 0.9s ease-in-out infinite;
}

.reading-audio-btn[hidden] {
  display: none;
}

.reading-audio-rate-btn {
  min-height: 32px;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
}

.reading-audio-rate-btn.is-active {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
}

.reading-audio-progress {
  flex: 1 1 70px;
  min-width: 60px;
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.reading-audio-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 999px;
  transition: width 200ms linear;
}

.reading-audio-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.reading-audio-status {
  font-weight: 700;
  color: var(--blue);
}

@media (max-width: 360px) {
  .reading-audio-btn {
    flex: 0 0 auto;
  }
}

/* Mobile learning route: prioritize the activity, preserve comfortable
   touch targets and let secondary navigation scroll instead of squeezing. */
@media (max-width: 640px) {
  .learning-path-section,
  .skill-view-section {
    padding-right: 0.7rem;
    padding-left: 0.7rem;
  }

  .learning-route-context {
    justify-content: flex-start;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .learning-route-context::-webkit-scrollbar {
    display: none;
  }

  .unit-mission-strip {
    width: 100%;
    padding: 0.65rem;
  }

  .unit-mission-copy {
    width: 100%;
  }

  .unit-route-markers {
    grid-template-columns: repeat(7, minmax(62px, 1fr));
    width: 100%;
    padding-bottom: 0.35rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .unit-route-markers::-webkit-scrollbar {
    display: none;
  }

  .unit-route-marker {
    min-height: 44px;
    scroll-snap-align: center;
  }

  .reading-print-area {
    width: 100%;
    padding: 0.65rem;
  }

  .reading-audio-player {
    padding: 0.55rem;
    border-radius: 14px;
  }

  .reading-audio-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .reading-audio-btn {
    min-width: 0;
    min-height: 44px;
    padding: 0.45rem 0.35rem;
    font-size: 0.76rem;
    white-space: nowrap;
  }

  .reading-audio-voice-btn {
    grid-column: 1 / -1;
  }

  .reading-audio-rate-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding: 0;
    border: 0;
  }

  .reading-audio-rate-btn {
    min-height: 40px;
  }

  .reading-audio-progress {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    height: 4px;
    margin-top: 0.1rem;
  }

  .reading-audio-meta {
    grid-column: 1 / -1;
    justify-content: space-between;
    width: 100%;
  }

  .reading-text,
  .reading-text p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .unit-activity-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 0.75rem;
  }

  .unit-activity-footer .primary-btn,
  .unit-activity-footer .secondary-btn {
    width: 100%;
    min-height: 46px;
  }
}

.reading-print-answer-lines div {
  border-bottom: 1px solid #999;
  height: 2rem;
}

/* Writing */
.writing-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.writing-heading h3,
.writing-heading p {
  margin: 0;
}

.writing-heading > div:first-child > p:last-child {
  margin-top: 0.35rem;
  color: var(--muted);
}

.writing-kicker {
  margin-bottom: 0.35rem !important;
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.writing-best-score {
  min-width: 116px;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 14px;
  background: var(--accent-soft);
  text-align: center;
}

.writing-best-score span,
.writing-best-score strong {
  display: block;
}

.writing-best-score span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
}

.writing-best-score strong {
  color: var(--blue);
  font-size: 1.25rem;
}

.writing-practice-shell {
  margin-bottom: 1rem;
  padding: clamp(0.85rem, 2vw, 1.25rem);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(239, 246, 255, 0.94), rgba(255, 255, 255, 0.98));
  box-shadow: var(--shadow-soft);
}

.writing-practice-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.writing-practice-counter {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 850;
}

.writing-practice-progress > div {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
}

.writing-practice-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), #06b6d4);
  transition: width 220ms ease;
}

.writing-practice-gamebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.writing-practice-streak {
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.1);
  color: #a16207;
  transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.writing-practice-streak.is-active {
  background: #fef3c7;
  transform: scale(1.06);
}

.writing-practice-card {
  min-height: 290px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.writing-practice-type {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--blue);
}

.writing-practice-type span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  font-weight: 850;
}

.writing-practice-prompt {
  margin: 1.25rem 0;
  color: var(--navy-2);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 750;
  line-height: 1.55;
}

.writing-practice-input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--navy-2);
  font: inherit;
}

.writing-practice-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
}

.writing-practice-options,
.writing-token-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.writing-practice-options button,
.writing-token-bank button,
.writing-order-reset {
  min-height: 40px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--navy-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.writing-practice-options button:hover,
.writing-practice-options button.is-selected,
.writing-token-bank button:hover {
  border-color: var(--blue);
  background: var(--accent-soft);
  color: var(--blue);
}

.writing-token-bank button:disabled {
  opacity: 0.35;
  cursor: default;
}

.writing-order-answer {
  min-height: 48px;
  margin-bottom: 0.65rem;
  padding: 0.7rem 0.85rem;
  border: 1px dashed rgba(37, 99, 235, 0.42);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--navy-2);
  font-weight: 750;
}

.writing-order-reset {
  margin-top: 0.65rem;
  color: var(--muted);
}

.writing-practice-feedback {
  margin: 1rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: 11px;
  font-weight: 750;
}

.writing-practice-feedback.is-correct {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.writing-practice-feedback.is-incorrect {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

.writing-practice-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.writing-practice-result {
  display: grid;
  min-height: 290px;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  text-align: center;
}

.writing-practice-result > span {
  font-size: 2.5rem;
}

.writing-practice-result p,
.writing-practice-result small {
  margin: 0;
}

.writing-practice-reinforcement {
  color: var(--navy-2);
  font-weight: 800;
}

.writing-practice-result strong {
  color: var(--blue);
  font-size: clamp(2.4rem, 7vw, 4rem);
}

.writing-practice-result button {
  margin-top: 0.8rem;
}

.writing-micro-challenge {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.writing-micro-challenge > summary {
  padding: 0.9rem 1rem;
  color: var(--navy-2);
  font-weight: 800;
  cursor: pointer;
}

.writing-micro-content {
  padding: 0 1rem 1rem;
}

.writing-editor--compact {
  min-height: 105px;
}

.writing-consigna {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.writing-guide {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0;
}

.writing-guide-step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.writing-guide-step > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--blue);
  font-weight: 850;
}

.writing-guide-step.is-current {
  border-color: rgba(37, 99, 235, 0.32);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(6, 182, 212, 0.05));
}

.writing-guide-step strong,
.writing-guide-step p {
  display: block;
  margin: 0;
}

.writing-guide-step p {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.writing-help {
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  overflow: hidden;
}

.writing-help summary {
  padding: 0.8rem 1rem;
  color: var(--blue);
  font-weight: 800;
  cursor: pointer;
}

.writing-help .writing-model,
.writing-help .writing-connectors {
  margin: 0;
  border-radius: 0;
}

.writing-phrase-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 0.35rem 0.7rem;
  color: var(--navy-2);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.writing-phrase-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.writing-plan {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.writing-plan > strong {
  grid-column: 1 / -1;
}

.writing-plan label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.writing-plan input {
  width: 100%;
  min-height: 42px;
  margin-top: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  background: var(--surface);
  color: var(--navy-2);
  font: inherit;
  font-size: 0.85rem;
}

.writing-editor-shell {
  padding: 1rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 16px;
  background: var(--surface);
}

.writing-editor-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.writing-editor-meta p {
  margin: 0.4rem 0 0;
}

.writing-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.writing-model,
.writing-connectors {
  background: var(--bg);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.writing-connectors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.writing-connectors-list span {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.8rem;
}

.writing-editor-label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.writing-word-limit {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8rem;
}

.writing-editor {
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

.writing-word-count {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

.writing-tutor-panel {
  margin-top: 1.5rem;
  background: var(--bg);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.writing-tutor-panel[hidden] {
  display: none;
}

.writing-tutor-panel > div strong {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.writing-tutor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Speaking */
.speaking-situation,
.speaking-model {
  margin-bottom: 0.75rem;
}

.speaking-response {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.speaking-record-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.speaking-record-btn {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 0.6rem 1rem;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--muted);
}

.speaking-record-btn:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
}

.speaking-record-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.speaking-record-btn[data-recording-action='record']:not(:disabled) {
  border-color: #ef4444;
  color: #ef4444;
}

.speaking-record-status {
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0.3rem 0;
}

.speaking-record-timer {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.2rem 0;
}

.speaking-record-warning {
  color: #b45309;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0.3rem 0;
}

.speaking-record-result {
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--bg-soft, rgba(96, 165, 250, 0.08));
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  margin: 0.4rem 0;
}

.speaking-record-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* Speaking: mode tabs (Práctica guiada / Diálogos / Respuesta libre) - see
   renderSpeakingView()/renderSpeakingModeContent() in src/js/script.js.
   Dialogues live here instead of as their own top-level skill/nav
   destination. */
.speaking-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.speaking-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.7rem;
  overflow: visible;
}

.speaking-action-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 76px;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  color: var(--navy-2);
  text-align: left;
  cursor: pointer;
}

.speaking-action-card:hover,
.speaking-action-card.is-active {
  border-color: var(--blue);
  background: rgba(37, 99, 235, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
}

.speaking-action-icon {
  font-size: 1.35rem;
}

.speaking-action-card strong,
.speaking-action-card small {
  display: block;
}

.speaking-action-card small {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.speaking-action-card em {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.speaking-guided-shortcut {
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 0 0 1rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
}

.speaking-simple-panel {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.speaking-simple-panel h4 {
  margin: 0.2rem 0 0.4rem;
}

.speaking-step-kicker {
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.speaking-simple-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.pronunciation-model {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.8rem 0;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: var(--bg);
}

.pronunciation-model p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.pronunciation-model small {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pronunciation-intro {
  margin: 0.45rem 0 0.8rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.pronunciation-sentence-picker {
  display: grid;
  gap: 0.5rem;
  margin: 0.8rem 0;
}

.pronunciation-sentence-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--navy-2);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.pronunciation-sentence-btn > span {
  display: inline-flex;
  flex: 0 0 1.5rem;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--light);
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 850;
}

.pronunciation-sentence-btn:hover,
.pronunciation-sentence-btn:focus-visible,
.pronunciation-sentence-btn.is-active {
  border-color: var(--blue);
  background: var(--accent-soft);
  outline: none;
}

.pronunciation-sentence-btn:hover { transform: translateY(-1px); }

.pronunciation-sentence-btn.is-active > span {
  background: var(--gradient-primary);
  color: white;
}

.speaking-mini-steps {
  margin: 0.7rem 0 1rem;
  padding-left: 1.3rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.pronunciation-disclaimer {
  color: var(--muted);
  font-size: 0.75rem;
}

.speaking-mode-btn.is-active {
  border-color: var(--blue);
  color: var(--blue);
}

.speaking-stage {
  display: flex;
  flex-direction: column;
}

.speaking-guided-progress {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.dialogue-lines-list--history {
  opacity: 0.65;
}

.dialogue-line--done {
  border-style: dashed;
}

.speaking-guided-turn {
  background: var(--bg);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
}

.speaking-guided-turn-text {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.35rem 0 0.6rem;
}

.speaking-guided-actions {
  margin: 0.75rem 0 1.25rem;
}

/* Recorder block (shared by every Speaking mode): record/stop/play/delete/
   redo controls, the always-editable transcript, and the correction
   result. See renderSpeakingRecorderHtml()/wireSpeakingRecorderControls(). */
.speaking-recorder-block {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin: 0.5rem 0 1.25rem;
  background: var(--surface);
}

.speaking-transcript-block {
  margin: 0.75rem 0;
}

.speaking-transcript-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.speaking-transcript {
  width: 100%;
  min-height: 4.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}

.speaking-transcript-hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

.speaking-actions {
  margin: 0.75rem 0;
}

.speaking-correct-btn {
  min-height: 44px;
}

.speaking-correction-result {
  margin: 0.75rem 0;
}

.speaking-correction-loading {
  font-size: 0.85rem;
  color: var(--muted);
}

.speaking-correction-error {
  color: #b91c1c;
  font-weight: 700;
  font-size: 0.85rem;
}

.speaking-correction-card {
  background: var(--bg-soft, rgba(96, 165, 250, 0.08));
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
}

.speaking-correction-text {
  white-space: pre-line;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.speaking-correction-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.speaking-privacy-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* Dialogues inside Speaking: "Responder oralmente" mounts the same shared
   recorder block into a specific roleplay line's own slot. */
.dialogue-respond-btn {
  min-height: 44px;
}

.dialogue-respond-block {
  margin-top: 0.5rem;
}

/* Grammar */
.skill-view-section[data-skill='grammar'] .skill-print-area {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding: clamp(1.15rem, 2.4vw, 2rem);
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.skill-view-section[data-skill='grammar'] .skill-print-area > h3 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  color: var(--navy-2);
}

.grammar-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.grammar-concept-card {
  position: relative;
  min-width: 0;
  min-height: 170px;
  padding: 1.15rem 1.2rem 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff 15%, #f5f9ff 100%);
}

.grammar-concept-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

.grammar-concept-icon {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.1);
  font-size: 1.15rem;
}

.grammar-concept-step {
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 850;
}

.grammar-concept-card--structure .grammar-concept-icon { background: rgba(124, 58, 237, 0.1); }
.grammar-concept-card--use .grammar-concept-icon { background: rgba(8, 145, 178, 0.1); }
.grammar-concept-card--example .grammar-concept-icon { background: rgba(22, 163, 74, 0.1); }

.grammar-concept-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--blue), var(--cyan));
}

.grammar-concept-card > span {
  display: inline-flex;
  margin-bottom: 0.55rem;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.09);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.grammar-concept-card h4 {
  margin: 0 0 0.55rem;
  color: var(--navy-2);
  font-size: 1.02rem;
}

.grammar-concept-card p {
  margin: 0;
  color: #475569;
  font-size: 0.94rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.grammar-explanation {
  background: var(--bg);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

/* Grammar notes can be several short paragraphs (rule + examples + a brief
   Spanish support line) separated by blank lines in the source content -
   this preserves those breaks instead of squashing them into one block. */
.grammar-explanation p {
  white-space: pre-line;
}

/* Printable Grammar/Vocabulary worksheet question list (see
   renderPrintableExerciseList) - independent from the interactive
   .mcq-option buttons used on-screen. */
.skill-print-question {
  margin-bottom: 0.9rem;
}

.skill-print-options {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
}

.skill-print-option {
  margin-bottom: 0.2rem;
}

.grammar-example {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.grammar-example-target,
.grammar-example-bridge {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  background: #f8fbff;
}

.grammar-example-target span,
.grammar-example-bridge span {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.grammar-exercise {
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 18px;
  background: #f8fbff;
}

.grammar-exercise > h4 {
  margin: 0 0 1rem;
  color: var(--navy-2);
  font-size: 1.08rem;
}

.grammar-lesson-hero,
.grammar-test-hero,
.grammar-practice-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.grammar-lesson-hero {
  margin-bottom: 1rem;
}

.grammar-lesson-hero-icon,
.grammar-test-hero-icon {
  display: grid;
  flex: 0 0 3.5rem;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #dbeafe, #ede9fe);
  font-size: 1.65rem;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.grammar-lesson-hero p,
.grammar-lesson-hero h3,
.grammar-lesson-hero > div > span,
.grammar-test-hero h3,
.grammar-test-hero > div > p:last-child,
.grammar-practice-header h3,
.grammar-practice-header p {
  margin: 0;
}

.grammar-lesson-hero p {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.grammar-lesson-hero > div > span,
.grammar-test-hero > div > p:last-child,
.grammar-practice-header > div > p:last-child {
  color: var(--muted);
  font-size: 0.88rem;
}

.grammar-quick-intro {
  display: grid;
  gap: 0.85rem;
  margin: 1rem 0;
}

.grammar-quick-mission {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #eef5ff, #f6f1ff);
}

.grammar-quick-mission > div:first-child {
  display: grid;
  gap: 0.25rem;
}

.grammar-quick-mission > div:first-child span {
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.grammar-quick-mission strong {
  color: var(--navy-2);
  font-size: 0.9rem;
  line-height: 1.4;
}

.grammar-quick-badges,
.grammar-quick-ready {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.grammar-quick-badges span,
.grammar-quick-ready span {
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: #fff;
  color: var(--navy-2);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.grammar-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.grammar-quick-grid article {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}

.grammar-quick-icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
}

.grammar-quick-grid h4,
.grammar-quick-grid p {
  margin: 0;
}

.grammar-quick-grid h4 {
  margin-bottom: 0.25rem;
  color: var(--blue);
  font-size: 0.73rem;
  text-transform: uppercase;
}

.grammar-quick-grid p {
  color: var(--navy-2);
  font-size: 0.78rem;
  line-height: 1.42;
}

.grammar-quick-ready {
  align-items: center;
}

.grammar-quick-ready span {
  border: 1px solid var(--line);
  background: #f8fafc;
}

.grammar-learning-route {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.grammar-learning-route li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
}

.grammar-learning-route li > span {
  display: grid;
  grid-row: 1 / 3;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  align-self: center;
  border-radius: 50%;
  background: white;
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 850;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.grammar-learning-route strong { color: var(--navy-2); font-size: 0.82rem; }
.grammar-learning-route small { color: var(--muted); font-size: 0.7rem; }
.grammar-learning-route li.is-current {
  border-color: rgba(37, 99, 235, 0.3);
  background: var(--accent-soft);
}

.grammar-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.grammar-section-heading > span {
  font-size: 1.4rem;
}

.grammar-section-heading small {
  color: var(--blue);
  font-weight: 850;
  text-transform: uppercase;
}

.grammar-section-heading h4,
.grammar-section-heading p {
  margin: 0;
}

.grammar-section-heading p {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.86rem;
}

@media (max-width: 720px) {
  .skill-view-section[data-skill='grammar'] .skill-print-area {
    padding: 1rem;
    border-radius: 18px;
  }

  .grammar-card-grid {
    grid-template-columns: 1fr;
  }

  .grammar-concept-card {
    min-height: 0;
  }
}

/* Scored Grammar test (course_lessons.extra.grammarTest - see
   renderGrammarTestView() in src/js/script.js). One card component reused
   across instructions/question/review/results phases. */
.grammar-test-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(100%, 1180px);
  margin-inline: auto;
  min-width: 0;
}

.grammar-test-instructions-text {
  color: var(--muted);
}

.grammar-test-meta-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.grammar-test-meta-list li {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--light);
}

.grammar-test-progress-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.grammar-test-counter {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.grammar-test-progress-bar {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  overflow: hidden;
}

.grammar-test-progress-bar div {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-pill);
}

.grammar-test-question-prompt {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-2);
}

.grammar-test-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.grammar-test-hero {
  padding: 0.25rem 0 0.4rem;
}

.grammar-test-hero h3,
.grammar-practice-header h3 {
  margin-bottom: 0.2rem;
  color: var(--navy-2);
}

.grammar-test-start-btn {
  align-self: flex-start;
  min-width: min(100%, 260px);
}

.grammar-practice-header {
  justify-content: space-between;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.grammar-practice-count {
  display: grid;
  flex: 0 0 4rem;
  min-height: 3.8rem;
  place-items: center;
  align-content: center;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--blue);
  font-size: 1.35rem;
  font-weight: 850;
}

.grammar-practice-count small {
  font-size: 0.65rem;
  text-transform: uppercase;
}

.grammar-test-eyebrow {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.grammar-test-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy-2);
  cursor: pointer;
  width: 100%;
  min-width: 0;
  text-align: left;
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

/* A/B/C/D badge (spec §4) - aria-hidden on the letter itself since the
   option's real accessible name is its text + aria-pressed state, not the
   letter (which is just a visual reference for "which option is which"). */
.grammar-test-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--light);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.grammar-test-option.is-selected .grammar-test-option-letter {
  background: var(--blue);
  color: white;
}

.grammar-test-option:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.grammar-test-option:active {
  transform: scale(0.97);
}

.grammar-test-option.is-selected {
  background: var(--accent-soft);
  border-color: var(--blue);
  color: var(--blue);
}

.grammar-test-fill-input {
  width: 100%;
  max-width: 320px;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
}

.grammar-test-fill-input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.listening-comp-card {
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.listening-comp-intro,
.listening-comp-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.listening-comp-intro strong {
  display: block;
  color: var(--navy-2);
  font-size: 1.05rem;
}

.listening-comp-intro p {
  margin: 0.2rem 0 0;
  color: var(--muted);
}

.listening-comp-intro > span,
.listening-comp-submit-row > span {
  flex-shrink: 0;
  color: var(--muted);
  font-weight: 700;
}

.listening-comp-question-list {
  gap: 0.75rem;
}

.listening-comp-question-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1rem;
}

.listening-comp-question-number {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--blue);
  font-weight: 850;
}

.listening-comp-question-content {
  min-width: 0;
}

.listening-comp-question-content .grammar-test-question-prompt {
  margin-top: 0.25rem;
}

.listening-comp-question-content .grammar-test-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.listening-comp-submit-row {
  padding-top: 0.25rem;
}

@media (max-width: 720px) {
  .listening-comp-intro,
  .listening-comp-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .listening-comp-question-content .grammar-test-options {
    grid-template-columns: 1fr;
  }
}

.grammar-test-order-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.grammar-test-order-help {
  margin: 0 0 0.65rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.grammar-test-order-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 0.9rem;
  cursor: grab;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.grammar-test-order-item:hover {
  border-color: #93c5fd;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08);
}

.grammar-test-order-item.is-dragging {
  opacity: 0.5;
  transform: scale(0.98);
  cursor: grabbing;
}

.grammar-test-order-grip {
  color: var(--blue);
  font-size: 1.1rem;
  letter-spacing: -0.1rem;
}

.grammar-test-order-number {
  display: grid;
  flex: 0 0 1.7rem;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
}

.grammar-test-order-text { flex: 1; font-weight: 700; }
.grammar-test-order-actions { display: inline-flex; gap: 0.25rem; }
.grammar-test-order-move {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--navy-2);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}
.grammar-test-order-move:hover { border-color: var(--blue); color: var(--blue); }

.grammar-test-order-list.is-reconstruction {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 0.85rem;
  border: 1px dashed #93c5fd;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}

@keyframes reading-comp-feedback-pop {
  from { opacity: 0.4; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reading-comp-feedback { animation: none; }
}

@media (max-width: 640px) {
  .reading-comp-quiz-header { align-items: stretch; flex-direction: column; }
  .reading-comp-progress { width: 100%; }
}

.grammar-test-order-list.is-reconstruction .grammar-test-order-item {
  flex: 0 1 auto;
  min-width: 10rem;
  padding: 0.55rem 0.65rem;
  background: var(--white);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.07);
}

.grammar-test-order-list.is-reconstruction .grammar-test-order-number {
  background: var(--blue);
  color: var(--white);
}

.grammar-test-order-list.is-reconstruction .grammar-test-order-text {
  white-space: nowrap;
}

.grammar-reconstruction-answer,
.grammar-reconstruction-bank {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.55rem;
  min-height: 4.5rem;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
}

.grammar-reconstruction-answer {
  margin-bottom: 0.65rem;
  border: 2px dashed #93c5fd;
  background: rgba(219, 234, 254, 0.45);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.grammar-reconstruction-answer.is-correct {
  border-color: #22c55e;
  background: rgba(220, 252, 231, 0.65);
}

.grammar-reconstruction-answer.is-incorrect {
  border-color: #ef4444;
  background: rgba(254, 226, 226, 0.65);
}

.grammar-reconstruction-bank {
  border: 0;
  background: transparent;
}

.grammar-reconstruction-chip {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid #bfdbfe;
  background: var(--white);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  font: inherit;
}

.grammar-reconstruction-chip .grammar-test-order-text {
  white-space: nowrap;
}

.grammar-reconstruction-placeholder {
  color: var(--muted);
  font-weight: 700;
  pointer-events: none;
}

.grammar-reconstruction-answer:has(.grammar-reconstruction-chip)
  .grammar-reconstruction-placeholder {
  display: none;
}

@media (max-width: 520px) {
  .grammar-test-order-item { gap: 0.45rem; padding: 0.55rem; }
  .grammar-test-order-grip { display: none; }
  .grammar-test-order-list.is-reconstruction .grammar-test-order-item {
    flex: 1 1 100%;
    min-width: 0;
  }
  .grammar-reconstruction-chip {
    flex: 0 1 auto;
  }
}

.grammar-test-order-select {
  flex-shrink: 0;
  width: 3.2rem;
  padding: 0.3rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-weight: 700;
  text-align: center;
}

.grammar-test-nav-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.grammar-test-review-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.grammar-test-review-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.grammar-test-review-item.is-unanswered {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.06);
}

.grammar-test-review-prompt {
  flex: 1;
  font-size: 0.88rem;
}

.grammar-test-review-warning {
  font-size: 0.85rem;
  font-weight: 700;
  color: #b45309;
}

.grammar-test-question-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

/* A compact visual map keeps a 10–20 question assessment approachable.
   It is navigation/progress only: correctness remains server-graded after
   submission, so it cannot reveal the answer key. */
.grammar-challenge-map {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff, #f5f3ff);
}

.grammar-challenge-map > span {
  color: var(--navy-2);
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.grammar-challenge-map > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.grammar-challenge-map-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 50%;
  background: white;
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 850;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.grammar-challenge-map-item:hover,
.grammar-challenge-map-item:focus-visible {
  transform: translateY(-2px) scale(1.06);
  outline: none;
}

.grammar-challenge-map-item.is-answered,
.grammar-test-question-item.is-answered .grammar-test-question-kicker {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

.grammar-test-question-kicker {
  display: inline-flex;
  margin-bottom: 0.55rem;
  padding: 0.22rem 0.52rem;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 999px;
  background: white;
  color: var(--blue);
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vocab-practice-panel {
  margin-top: 1rem;
}

.vocab-practice-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.vocab-practice-intro strong {
  color: var(--blue);
}

.vocab-practice-intro span {
  color: var(--muted);
  font-size: 0.88rem;
}

.vocab-practice-question .grammar-test-option {
  min-height: 3rem;
}

.grammar-test-question-item {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.grammar-test-question-item .grammar-test-question-prompt {
  margin: 0 0 0.8rem;
  line-height: 1.45;
}

.grammar-test-submit-bar {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.grammar-test-submit-bar .grammar-test-submit-btn {
  flex-shrink: 0;
}

.grammar-test-score-band {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--gradient-success);
  color: white;
}

.grammar-test-score-emoji {
  font-size: 1.8rem;
}

.grammar-test-score-number {
  font-size: 1.6rem;
}

.grammar-test-score-label {
  font-weight: 700;
  margin-left: auto;
}

.grammar-test-score-detail {
  color: var(--muted);
  font-size: 0.88rem;
}

.grammar-test-breakdown-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.grammar-test-breakdown-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.grammar-test-breakdown-item.is-correct {
  border-color: var(--green);
  background: rgba(34, 197, 94, 0.06);
}

.grammar-test-breakdown-item.is-incorrect {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

.grammar-test-breakdown-prompt {
  font-weight: 700;
  font-size: 0.9rem;
}

.grammar-test-breakdown-explanation {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.2rem;
}

/* Explicit, visible "Correcta"/"Incorrecta" text next to the emoji (spec
   §4: never color-only feedback) and the explicit correct-answer reveal
   when the student got it wrong. */
.grammar-test-breakdown-status-text {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  margin-right: 0.3rem;
}

.grammar-test-breakdown-item.is-correct .grammar-test-breakdown-status-text {
  color: #15803d;
}

.grammar-test-breakdown-item.is-incorrect .grammar-test-breakdown-status-text {
  color: #b91c1c;
}

.grammar-test-breakdown-submitted-answer,
.grammar-test-breakdown-correct-answer {
  font-size: 0.85rem;
  margin-top: 0.3rem;
  color: var(--navy-2);
}

.grammar-test-breakdown-submitted-answer {
  color: var(--muted);
}

/* "Lección completa" (spec §4) - shown before the test starts, parsed from
   the same hand-authored grammarNote every unit already carries (see
   parseGrammarNoteSections in src/js/script.js). */
.grammar-lesson-content {
  margin: 1rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  background: var(--surface);
}

.grammar-lesson-sections-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  width: 100%;
  margin-top: 0.9rem;
}

.grammar-lesson-content summary {
  cursor: pointer;
  font-weight: 700;
}

.grammar-lesson-section {
  min-width: 0;
  width: 100%;
  margin-top: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}

.grammar-lesson-section h4 {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--blue);
}

.grammar-lesson-section p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .grammar-test-question-list,
  .grammar-lesson-sections-grid {
    grid-template-columns: 1fr;
  }

  .grammar-test-submit-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .grammar-test-submit-bar .grammar-test-submit-btn {
    width: 100%;
  }

  .vocab-practice-intro {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .grammar-quick-mission {
    align-items: flex-start;
    flex-direction: column;
  }

  .grammar-quick-grid {
    grid-template-columns: 1fr;
  }

  .grammar-learning-route {
    grid-template-columns: 1fr;
  }

  .grammar-learning-route li {
    min-height: 3.25rem;
  }

  .grammar-lesson-hero,
  .grammar-test-hero {
    align-items: flex-start;
  }

  .grammar-lesson-hero-icon,
  .grammar-test-hero-icon {
    flex-basis: 2.8rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 14px;
    font-size: 1.25rem;
  }

  .grammar-practice-count {
    display: none;
  }

  .grammar-test-start-btn {
    width: 100%;
  }
}

/* Historial de intentos (spec §4) */
.grammar-test-history {
  margin-top: 1rem;
}

.grammar-test-history-details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
}

.grammar-test-history-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.grammar-test-history-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  color: var(--muted);
}

.grammar-test-history-item.is-best {
  border-color: #eab308;
  background: rgba(234, 179, 8, 0.08);
}

.grammar-test-history-best-tag {
  margin-left: auto;
  font-weight: 700;
  color: #92700a;
}

/* Vocabulary flashcards - one shared card component (see
   renderVocabCardHtml() in src/js/script.js) reused for every language,
   level and unit, the shuffled review order, and the mini vocabulary quiz
   below the deck. Never fork this markup/CSS per language.

   Real 3D flip: .vocab-card is the perspective root + focusable/clickable
   hit target, .vocab-card-inner is what actually rotates, and the two
   .vocab-card-face children are absolutely stacked and rotated 180deg apart
   so exactly one is ever facing the viewer. Absolute-positioned faces mean
   .vocab-card needs an explicit height rather than true "auto" height on
   every breakpoint; back-face content that runs long scrolls internally
   instead of growing the card, which is what keeps a whole row's cards the
   same height and avoids grid jumps on flip. */
.vocab-mission {
  display: grid;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 12%, rgba(139, 92, 246, 0.14), transparent 30%),
    linear-gradient(135deg, #f7fbff, #f7f5ff);
}

.vocab-mission-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vocab-mission-kicker {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vocab-mission h3 {
  margin: 0.25rem 0;
  color: var(--navy-2);
}

.vocab-mission p {
  max-width: 70ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.vocab-mission-score {
  display: grid;
  flex: 0 0 82px;
  min-height: 72px;
  place-content: center;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-xs);
  text-align: center;
}

.vocab-mission-score strong {
  color: var(--blue);
  font-size: 1.45rem;
}

.vocab-mission-score span {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 750;
}

.vocab-mission-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.vocab-mission-steps span {
  padding: 0.38rem 0.65rem;
  border-radius: 999px;
  background: #fff;
  color: var(--navy-2);
  font-size: 0.72rem;
  font-weight: 750;
}

.vocab-mission-progress-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vocab-mission-progress {
  flex: 1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfeafb;
}

.vocab-mission-progress div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), #8b5cf6);
  transition: width 240ms ease;
}

.vocab-mission-count {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.vocab-card-deck-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}

.vocab-l1-translation-btn.is-active {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--accent-soft);
}

.vocab-card-deck {
  display: grid;
  /* Matches .skill-library-grid's own column sizing (220px/0.9rem gap) -
     Vocabulary/Verbos flashcards should read as the same size as the
     library's unit cards, not a visibly larger tile. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  .vocab-card-deck {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .vocab-mission-main {
    align-items: flex-start;
  }

  .vocab-mission-progress-row {
    align-items: stretch;
    flex-direction: column;
  }

  .vocab-mission-count { white-space: normal; }

  .vocab-card-deck {
    grid-template-columns: 1fr;
  }
}

.vocab-card {
  position: relative;
  height: 100%;
  /* Matches .skill-library-card's typical rendered height - was 280px, a
     visibly taller tile than the library cards next to it. .vocab-card-face
     keeps overflow-y: auto (below), so back-face content that doesn't fit
     at this height scrolls internally instead of forcing the card taller. */
  min-height: 190px;
  perspective: 1400px;
  border-radius: var(--radius-xl);
  cursor: pointer;
}

@media (max-width: 900px) {
  .vocab-card {
    min-height: 200px;
  }
}

@media (max-width: 560px) {
  .vocab-card {
    min-height: 190px;
  }
}

.vocab-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--radius-xl);
}

.vocab-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 400ms ease;
}

.vocab-card.is-flipped .vocab-card-inner {
  transform: rotateY(180deg);
}

.vocab-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow: hidden;
  /* Was 22px - matches .skill-library-card's 1rem (16px) padding now that
     the card itself is the same size as a library card. */
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  backface-visibility: hidden;
  transition:
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.vocab-card:hover .vocab-card-face {
  box-shadow: var(--shadow-sm);
}

.vocab-card-back {
  transform: rotateY(180deg);
  overflow-x: hidden;
  overflow-y: auto;
}

/* Mastery status tints the border - always paired with the text/icon status
   chip in the header (.vocab-card-status) so nothing depends on color alone. */
.vocab-card[data-mastery='practicing'] .vocab-card-face {
  border-color: rgba(217, 119, 6, 0.35);
}

.vocab-card[data-mastery='mastered'] .vocab-card-face {
  border-color: rgba(34, 197, 94, 0.4);
}

.vocab-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.6rem;
  flex-shrink: 0;
}

.vocab-card-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.55rem;
  white-space: nowrap;
}

.vocab-card-audio-btn {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--light);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition:
    border-color 150ms ease,
    background 150ms ease;
}

.vocab-card-audio-btn:hover {
  border-color: var(--blue);
  background: var(--accent-soft);
}

.vocab-card-audio-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.vocab-card-audio-btn.is-playing {
  border-color: var(--blue);
  background: var(--accent-soft);
  animation: vocab-audio-pulse 900ms ease-in-out infinite;
}

@keyframes vocab-audio-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* Front face: word centered with generous vertical space, hint pinned to
   the bottom. */
.vocab-card-front {
  justify-content: center;
  text-align: center;
}

.vocab-card-word-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: auto 0;
}

.vocab-card-target {
  margin: 0;
  /* Keep short terms prominent while preventing advanced expressions from
     dominating the compact card or wrapping into the footer. */
  max-width: 100%;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--navy-2);
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.vocab-card-target--medium {
  font-size: 0.92rem;
}

.vocab-card-target--long {
  font-size: 0.82rem;
  line-height: 1.3;
}

.vocab-card-phonetic {
  margin: 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
  opacity: 0.85;
}

.vocab-card-hint {
  flex-shrink: 0;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  opacity: 0.75;
}

/* Back face: translation up top, contexts left-aligned and separated,
   compact actions pinned to the bottom. */
.vocab-card-translation {
  flex-shrink: 0;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--navy-2);
}

/* Direct/immersion mode (spec §5/§9) - definition/synonyms/opposites/image
   in L2, shown instead of .vocab-card-translation (empty in that mode).
   Only ever present when real content was authored - no placeholder image
   or empty boxes (spec §10). */
.vocab-card-image {
  flex-shrink: 0;
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.vocab-card-definition {
  flex-shrink: 0;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-2);
  text-align: left;
}

.vocab-card-synonyms-opposites {
  flex-shrink: 0;
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: left;
}

.vocab-card-usage-note {
  flex-shrink: 0;
  margin: 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--muted);
  text-align: left;
}

/* The only flexible/scrollable region on the back face - header, translation
   and actions are all flex-shrink: 0 (pinned to natural size), so on a short
   card with 3 contexts this is what scrolls instead of spilling out over the
   action buttons below it. */
.vocab-card-contexts {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.55rem;
  min-height: 0;
  overflow-y: auto;
}

.vocab-card-context {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.72);
}

.vocab-card-brief-definition,
.vocab-card-l1-translation {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(239, 246, 255, 0.72);
}

.vocab-card-brief-definition > span,
.vocab-card-l1-translation > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vocab-card-l1-translation {
  border-color: rgba(37, 99, 235, 0.25);
  background: var(--accent-soft);
}

.vocab-card-l1-translation p {
  margin: 0;
  color: var(--navy-2);
  font-size: 0.9rem;
  font-weight: 750;
}

.vocab-card-context:first-child {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
}

.vocab-card-context-target {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--navy-2);
  text-align: left;
}

.vocab-card-context-target > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.vocab-card-context-support {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
  text-align: left;
}

.vocab-card-context-info {
  flex-shrink: 0;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 10px;
  background: var(--accent-soft);
}

.vocab-card-context-info summary {
  padding: 0.5rem 0.65rem;
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  text-align: left;
}

.vocab-card-context-info summary::-webkit-details-marker {
  display: none;
}

.vocab-card-context-info-body {
  display: grid;
  gap: 0.5rem;
  padding: 0 0.55rem 0.55rem;
}

.vocab-useful-expressions {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.vocab-useful-expressions-toggle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.vocab-useful-expressions-action {
  min-width: 4.25rem;
  color: var(--blue);
  font-weight: 850;
}

.vocab-useful-expressions-panel {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.vocab-useful-expressions-panel[hidden] {
  display: none;
}

.vocab-useful-expressions-panel ul {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vocab-useful-expressions-panel li {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--accent-soft);
}

.vocab-useful-expressions-panel li span {
  color: var(--muted);
  font-size: 0.88rem;
}

.vocab-example-audio-btn {
  flex-shrink: 0;
  width: 2.15rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.vocab-example-audio-btn:hover {
  border-color: var(--blue);
}

.vocab-example-audio-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.vocab-example-audio-btn.is-playing {
  border-color: var(--blue);
  background: var(--accent-soft);
}

.vocab-card-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--light);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}

.vocab-status-dot {
  font-size: 0.6rem;
}

.vocab-card[data-mastery='practicing'] .vocab-status-dot,
.vocab-card[data-mastery='practicing'] .vocab-status-label {
  color: #b45309;
}

.vocab-card[data-mastery='mastered'] .vocab-status-dot,
.vocab-card[data-mastery='mastered'] .vocab-status-label {
  color: #15803d;
}

/* Back face's three actions: mastery pair + return-to-front, all equally
   compact so none reads as more "primary" than flipping the card itself. */
.vocab-card-actions {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.vocab-know-btn,
.vocab-retry-btn,
.vocab-back-btn {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 1.85rem;
  font-size: 0.59rem;
  line-height: 1.1;
  font-weight: 700;
  padding: 0.28rem 0.42rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--light);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease;
}

.vocab-know-btn {
  max-width: 4.4rem;
}

.vocab-retry-btn,
.vocab-back-btn {
  max-width: 4.75rem;
}

.vocab-know-btn:hover,
.vocab-retry-btn:hover,
.vocab-back-btn:hover {
  border-color: var(--blue);
}

.vocab-know-btn:focus-visible,
.vocab-retry-btn:focus-visible,
.vocab-back-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.vocab-know-btn {
  color: #15803d;
}

.vocab-retry-btn {
  color: #b45309;
}

.vocab-back-btn {
  color: var(--muted);
}

/* Reduced motion: no 3D rotation - swap faces in place with a short fade,
   and let the card size to whichever face is showing instead of relying on
   the absolute-positioned flip layout above. */
@media (prefers-reduced-motion: reduce) {
  .vocab-card {
    height: auto;
    min-height: 0;
  }

  .vocab-card-inner {
    height: auto;
    transition: none;
  }

  .vocab-card.is-flipped .vocab-card-inner {
    transform: none;
  }

  .vocab-card-face {
    position: relative;
    inset: auto;
    transform: none;
    backface-visibility: visible;
  }

  .vocab-card-back {
    display: none;
  }

  .vocab-card.is-flipped .vocab-card-front {
    display: none;
  }

  .vocab-card.is-flipped .vocab-card-back {
    display: flex;
    animation: vocab-fade-in 150ms ease;
  }
}

@keyframes vocab-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Dialogues: situation + 3-mode selector (Écouter/Jouer un rôle/Tuteur IA) +
   line-by-line playback/roleplay list. See renderDialogueView() in
   src/js/script.js. */
.dialogue-section-header {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.85rem;
}

.dialogue-section-header span {
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dialogue-section-header h4 {
  margin: 0;
  color: var(--navy-2);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.dialogue-situation {
  background: var(--bg);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
}

.dialogue-practical-guide {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.65rem 0 0.85rem;
}

.dialogue-practical-guide > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--navy-2);
  font-size: 0.8rem;
  font-weight: 800;
}

.dialogue-practical-guide b {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, var(--blue), #06b6d4);
  font-size: 0.7rem;
}

.dialogue-practical-guide i {
  color: var(--muted);
  font-style: normal;
}

.dialogue-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.dialogue-mode-btn.is-active {
  border-color: var(--blue);
  color: var(--blue);
}

.dialogue-panel {
  margin-bottom: 1.25rem;
}

.dialogue-lines-list,
.dialogue-roleplay-lines {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dialogue-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 18px 18px 18px 6px;
  padding: 0.7rem 0.85rem;
  max-width: min(78%, 760px);
  background: var(--surface);
  box-shadow: 0 5px 16px rgba(30, 64, 175, 0.08);
}

.dialogue-line:nth-child(even) {
  align-self: flex-end;
  border-radius: 18px 18px 6px 18px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.dialogue-line--mine {
  flex-direction: column;
  align-items: stretch;
  border-color: var(--blue);
}

.dialogue-speaker {
  font-weight: 700;
  min-width: auto;
  color: var(--blue);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dialogue-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.dialogue-line-speak-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.dialogue-practice-line-btn {
  border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line));
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  color: var(--blue);
  border-radius: 999px;
  padding: 0.42rem 0.65rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
}

.dialogue-practice-line-btn:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.dialogue-phrases {
  margin: 0.8rem 0;
  padding: 0.65rem 0.8rem;
  border: 1px dashed color-mix(in srgb, var(--blue) 30%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 4%, var(--surface));
}

.dialogue-phrases summary {
  color: var(--blue);
  font-weight: 800;
  cursor: pointer;
}

.dialogue-phrases ul {
  margin: 0.65rem 0 0;
  padding-left: 1.25rem;
}

@media (max-width: 680px) {
  .dialogue-practice-line-btn {
    width: 100%;
  }
}

.dialogue-translation {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  width: 100%;
}

/* Never show the Spanish support translation until the student opts in
   (see the reading-vocab-support / dialogue-toggle-translation-btn
   handler in script.js) - without this, the class rule above's
   `display: block` wins over the [hidden] attribute's UA-stylesheet
   `display: none`, since both have equal specificity and this
   author stylesheet loads after it. */
.dialogue-translation[hidden] {
  display: none;
}

.dialogue-role-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}

.dialogue-role-btn.is-active {
  border-color: var(--blue);
  color: var(--blue);
}

.dialogue-roleplay-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  font-family: inherit;
  font-size: 0.9rem;
}

.dialogue-model-line {
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--bg-soft, rgba(96, 165, 250, 0.08));
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
}

.dialogue-phrases {
  background: var(--bg);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
}

.dialogue-phrases ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

/* Listening: status cards (no audio / AI offer / error) */
.listening-status-card {
  text-align: center;
  max-width: 480px;
  margin: 2rem auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-soft);
}

.listening-status-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.listening-status-title {
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.listening-status-detail {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.listening-status-error {
  color: #b91c1c;
  font-size: 0.85rem;
}

/* Listening: real activity view */
.listening-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 1.15rem;
}

.listening-meta-item {
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.listening-audio-stage {
  margin-bottom: 1.4rem;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(56, 189, 248, 0.18), transparent 28%),
    linear-gradient(145deg, #f8fbff 0%, #eef5ff 100%);
  box-shadow: 0 18px 44px rgba(30, 64, 175, 0.09);
}

.listening-stage-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.listening-stage-heading > div {
  min-width: 0;
}

.listening-stage-heading p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.listening-stage-icon {
  display: grid;
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  border-radius: 16px;
  background: var(--gradient-primary);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
  font-size: 1.55rem;
}

.listening-source-banner {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.28rem 0.62rem;
  border-radius: 12px;
  margin-bottom: 0.25rem;
  font-weight: 700;
  font-size: 0.85rem;
}

.listening-source-banner.is-official {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.listening-source-banner.is-ai {
  background: rgba(37, 99, 235, 0.08);
  color: #1e3a8a;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.listening-ai-disclosure {
  font-weight: 500;
  font-size: 0.8rem;
}

.listening-title {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.listening-player {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 18px;
  padding: clamp(1rem, 2vw, 1.35rem);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.listening-player-status {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.5rem 0 1rem;
}

.listening-player[data-state='error'] .listening-player-status {
  color: #b91c1c;
  font-weight: 700;
}

.listening-player-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.listening-ctrl-btn {
  border: 1px solid rgba(37, 99, 235, 0.16);
  background: #f7faff;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.listening-ctrl-btn:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.45);
  background: #edf5ff;
}

.listening-play-btn {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.listening-ctrl-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.listening-ctrl-btn.is-active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.listening-player-progress-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.listening-progress-range {
  flex: 1;
}

.listening-time-elapsed,
.listening-time-duration {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.85rem;
  min-width: 2.5rem;
}

.listening-volume-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.listening-transcript {
  margin: 1.25rem 0;
}

.listening-transcript-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.listening-transcript-note {
  color: var(--muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.listening-transcript-body {
  margin-top: 0.75rem;
  background: var(--bg);
  border-radius: 12px;
  padding: 1rem;
  line-height: 1.6;
}

.listening-transcript-body[hidden] {
  display: none;
}

.listening-vocab {
  margin: 1.4rem 0;
  padding: 1.1rem;
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
}

.listening-vocab-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.listening-vocab-item {
  background: #f5f9ff;
  border: 1px solid rgba(37, 99, 235, 0.09);
  border-radius: 12px;
  padding: 0.5rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
}

.listening-vocab-item small {
  color: var(--muted);
}

/* Rich Listening extra modes (Diálogo / Dictado / Transcripción y
   pronunciación / Comprensión) - see renderListeningExtraModesHtml in
   src/js/script.js. Only rendered for lessons that carry `extra`/`dictation`
   data (today: English A1's "hello" pilot unit and Spanish A1). */
.listening-extra-modes {
  margin: 1.5rem 0;
}

.listening-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.35rem;
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

/* Small screens: one row that scrolls horizontally instead of wrapping to
   several lines, so five tabs stay reachable without eating vertical space. */
@media (max-width: 640px) {
  .listening-mode-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  .listening-mode-tab {
    flex: 0 0 auto;
  }
}

.listening-mode-tab {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 999px;
  padding: 0.52rem 0.95rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.listening-mode-tab.is-active {
  background: var(--accent, #4f46e5);
  color: #fff;
  border-color: transparent;
}

.listening-mode-panel {
  margin-top: 0.9rem;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 18px;
  padding: clamp(1rem, 2.5vw, 1.35rem);
}

.listening-story-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.listening-story-heading h4 {
  margin: 0.2rem 0;
  color: var(--navy-2);
}

.listening-story-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.listening-story-kicker {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.listening-story-body {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--blue);
  border-radius: 0 12px 12px 0;
  background: #f4f8ff;
  line-height: 1.75;
}

.listening-story-body[hidden] {
  display: none;
}

.listening-story-body p {
  margin: 0;
}

.listening-connected-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.55fr);
  gap: 1rem;
  margin: 1.4rem 0;
}

.listening-connected-tools .listening-story,
.listening-vocabulary-link {
  min-height: 100%;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  padding: 1.1rem;
}

.listening-vocabulary-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--navy-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.listening-vocabulary-link:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.1);
}

.listening-vocabulary-link > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.2rem;
}

.listening-vocabulary-link small {
  color: var(--muted);
  line-height: 1.45;
}

.listening-vocabulary-link-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border-radius: 13px;
  background: rgba(37, 99, 235, 0.1);
  font-size: 1.3rem;
}

.listening-comprehension-direct {
  margin: 1.5rem 0;
}

.listening-section-heading {
  margin-bottom: 0.75rem;
}

.listening-section-heading span {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.listening-section-heading h3 {
  margin: 0.25rem 0 0;
}

.unit-learning-sequence,
.unit-overview-sequence {
  margin: 1rem 0 1.35rem;
  padding: 1rem;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.unit-sequence-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.unit-sequence-heading span {
  color: var(--muted);
  font-size: 0.82rem;
}

.unit-sequence-steps {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.unit-sequence-step {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 112px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 12px;
  background: #f7faff;
  color: var(--navy-2);
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
}

.unit-sequence-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.unit-sequence-label small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 600;
}

.unit-sequence-step--current .unit-sequence-label small {
  color: rgba(255, 255, 255, 0.78);
}

.unit-sequence-number {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--blue);
  font-size: 0.72rem;
}

.unit-sequence-step--current {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

/* On the route overview there is one clear suggested next activity. The
   remaining steps stay available for review, but no longer compete with the
   primary action visually. */
.unit-sequence-step--recommended {
  border-color: var(--blue);
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.13);
}

.unit-sequence-step--recommended .unit-sequence-number {
  background: var(--gradient-primary);
  color: white;
}

.unit-sequence-step--recommended .unit-sequence-label small {
  color: var(--blue);
  font-weight: 850;
}

.unit-sequence-step--current .unit-sequence-number {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.unit-sequence-step--completed .unit-sequence-number {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}

.unit-sequence-step--locked {
  opacity: 0.62;
}

.unit-sequence-step--verbs {
  border-style: solid;
}

.unit-sequence-step--verbs:not(.unit-sequence-step--current):not(.unit-sequence-step--completed) {
  border-color: rgba(37, 99, 235, 0.38);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.09), rgba(6, 182, 212, 0.1));
  color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.06);
}

@media (max-width: 860px) {
  .speaking-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .writing-plan {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .unit-learning-sequence,
  .unit-overview-sequence {
    padding: 0.7rem;
  }

  .unit-sequence-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.55rem;
  }

  .unit-sequence-step {
    min-width: 94px;
    padding: 0.5rem 0.6rem;
  }

  .speaking-action-grid {
    grid-template-columns: 1fr;
  }

  .speaking-action-card {
    min-height: 82px;
  }

  .writing-editor-meta,
  .pronunciation-model {
    align-items: flex-start;
    flex-direction: column;
  }
}

.unit-verbs-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  margin: 0 auto 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fbff, #eef5ff);
}

.unit-verbs-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.unit-verbs-copy > span,
.unit-verbs-score > span {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unit-verbs-context p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.unit-verbs-score {
  display: grid;
  gap: 0.1rem;
  min-width: 5.4rem;
  padding: 0.45rem 0.7rem;
  border-left: 1px solid var(--line);
}

.unit-verbs-score strong {
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.unit-verbs-context-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
}

.unit-verbs-practice-btn {
  min-height: 2.55rem;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.unit-verbs-more .skill-view-more-menu {
  min-width: 14rem;
}

.unit-verbs-more .skill-view-more-menu .unit-verbs-finish-btn {
  color: var(--blue);
}

#verbsTabs .skill-tab-button[data-skill='practice']:not(.active) {
  position: relative;
  color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
  box-shadow: inset 0 -3px 0 rgba(37, 99, 235, 0.42);
}

#verbsTabs .skill-tab-button[data-skill='practice']::after {
  content: 'Recomendado';
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

#verbsTabs .skill-tab-button[data-skill='practice'].active::after {
  background: rgba(255, 255, 255, 0.22);
}

.dictation-segment {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
}

.dictation-segment-label {
  font-size: 0.8rem;
  color: var(--muted);
}

.dictation-segment-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 0.5rem 0.7rem;
  font-family: inherit;
  resize: vertical;
}

.dictation-segment-feedback {
  font-size: 0.8rem;
  color: var(--muted);
}

.dictation-overall-result {
  font-weight: 600;
  margin: 0.6rem 0;
}

.listening-phonetic-segments,
.listening-phonetic-syllables {
  margin: 0.6rem 0;
  padding-left: 1.2rem;
}

.phonetic-ipa {
  color: var(--muted);
}

.listening-phonetic-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.6rem;
}

/* Transcripción y pronunciación (merged tab) - one block per line, L1
   support and pronunciation each independently toggle-able. */
.listening-transcript-lines {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.listening-transcript-line {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.listening-transcript-line:last-child {
  border-bottom: none;
}

.listening-transcript-en {
  margin: 0;
}

.listening-transcript-speaker {
  font-weight: 600;
  margin-right: 0.35rem;
}

.listening-transcript-l1,
.listening-transcript-pron {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.listening-transcript-l1[hidden],
.listening-transcript-pron[hidden] {
  display: none;
}

.listening-pron-approx-tag {
  font-size: 0.75rem;
  font-style: italic;
}

.listening-transcript-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.listening-direct-glossary {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

.listening-direct-glossary ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.listening-phonetic-guide {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.listening-phonetic-guide[hidden] {
  display: none;
}

/* Compact "audio recording still coming" notice - see
   renderListeningAudioPendingBannerHtml in src/js/script.js. Used instead
   of the full .listening-status-card whenever the lesson already has real
   Diálogo/Dictado/Transcripción-y-pronunciación/Comprensión content, so
   that content stays the visual focus instead of a large "not available"
   card. */
.listening-audio-pending-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent, #4f46e5);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
}

.listening-audio-pending-icon {
  font-size: 1.4rem;
  line-height: 1.2;
}

.listening-audio-pending-body {
  flex: 1;
  min-width: 0;
}

.listening-audio-pending-title {
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.listening-audio-pending-detail {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.listening-dialogue-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.listening-dialogue-speaker {
  font-weight: 600;
  min-width: 90px;
}

.listening-dialogue-translation {
  width: 100%;
  color: var(--muted);
  font-size: 0.85rem;
}

.listening-dialogue-translation[hidden] {
  display: none;
}

.listening-roleplay-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.listening-questions-section {
  margin: 1.25rem 0;
}

.listening-progress-bar {
  height: 8px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.75rem 0 1.25rem;
}

.listening-progress-bar div {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 999px;
  transition: width var(--duration-slow) var(--ease-standard);
}

.listening-ai-complete-note {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.listening-ai-complete-note[hidden] {
  display: none;
}

.listening-nav-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

@media (max-width: 640px) {
  .listening-stage-heading,
  .listening-story-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .listening-story-toggle {
    width: 100%;
  }
  .listening-connected-tools {
    grid-template-columns: 1fr;
  }
  .unit-sequence-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .unit-verbs-context {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .unit-verbs-score {
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-inline: 0;
  }
  .unit-verbs-context-actions {
    width: 100%;
    justify-content: space-between;
  }
  .listening-player-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .listening-ctrl-btn {
    width: 100%;
  }
  .listening-player-progress-row {
    flex-wrap: wrap;
  }
  .listening-progress-range {
    order: 1;
    width: 100%;
  }
}

/* Change-combination popover */
.change-combo-popover {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 47, 0.6);
  display: grid;
  place-items: center;
  z-index: 70;
}

.change-combo-popover[hidden] {
  display: none;
}

.change-combo-panel {
  width: min(420px, 90%);
  background: white;
  border-radius: 24px;
  box-shadow: 0 40px 80px rgba(15, 23, 42, 0.25);
  padding: 28px;
  position: relative;
  display: grid;
  gap: 14px;
}

.change-combo-panel label {
  display: grid;
  gap: 6px;
  font-weight: 700;
  color: var(--navy-2);
  font-size: 0.9rem;
}

.change-combo-panel select {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
}

/* Tutor IA floating button */
.tutor-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: white;
  font-size: 1.6rem;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.35);
  cursor: pointer;
  z-index: 40;
  transition: transform 0.2s ease;
}

.tutor-fab:hover {
  transform: translateY(-3px) scale(1.05);
}

.tutor-fab[hidden] {
  display: none;
}

/* Tutor IA drawer - centered modal on desktop/tablet, full-screen sheet on
   mobile. .tutor-drawer is the fixed full-viewport flex wrapper that centers
   .tutor-drawer-panel (the actual visible card); only .tutor-conversation
   inside the panel scrolls, so header/context/input stay pinned and there's
   never more than one scrollbar. */
.tutor-drawer {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0px, 3vw, 32px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.tutor-drawer.open {
  opacity: 1;
  pointer-events: auto;
}

.tutor-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 21, 47, 0.5);
}

.tutor-drawer-panel {
  position: relative;
  width: min(80vw, 1200px);
  height: min(90dvh, 900px);
  max-width: 1200px;
  max-height: 90dvh;
  background: white;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
  overflow: hidden;
}

.tutor-drawer.open .tutor-drawer-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.tutor-drawer-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.tutor-drawer-head h2 {
  font-size: 1.3rem;
  margin-right: auto;
}

.tutor-drawer-head .tutor-autoplay-toggle {
  padding: 0.4rem 0.65rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.tutor-drawer .tutor-context {
  flex-shrink: 0;
}

.tutor-drawer .tutor-autoplay-toggle {
  flex-shrink: 0;
}

/* Two panels side by side, same pattern as .translator-grid: conversation
   transcript on the left (gets the extra space), practice controls
   (text/voice input + send) on the right - instead of everything stacked in
   one long column. flex:1/min-height:0 lets this grid fill the remaining
   drawer height so only .tutor-conversation itself scrolls. */
.tutor-panel-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.25rem;
  flex: 1;
  min-height: 0;
}

.tutor-panel-conversation {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.tutor-panel-conversation .tutor-conversation {
  flex: 1;
  min-height: 220px;
  max-height: none;
  overflow-y: auto;
}

.tutor-panel-controls {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border-radius: 20px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.2);
  overflow-y: auto;
}

.tutor-panel-controls .tutor-input-group,
.tutor-panel-controls .tutor-dictate-status,
.tutor-panel-controls .tutor-dictate-note,
.tutor-panel-controls .tutor-buttons {
  flex-shrink: 0;
}

.tutor-panel-controls .tutor-input {
  flex: 1;
  min-height: 140px;
}

.tutor-panel-controls .tutor-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tutor-panel-controls .tutor-clear-btn {
  align-self: flex-start;
}

/* Tablet */
@media (max-width: 1024px) {
  .tutor-drawer-panel {
    width: min(92vw, 1200px);
    height: min(90dvh, 900px);
  }
}

/* Below this, two side-by-side panels no longer have room to breathe -
   stack conversation above controls instead (same breakpoint spirit as
   .translator-grid's own @media (max-width: 780px)). */
@media (max-width: 860px) {
  .tutor-panel-grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .tutor-panel-conversation .tutor-conversation {
    min-height: 180px;
  }
  .tutor-panel-controls {
    overflow-y: visible;
  }
}

/* Mobile - full-screen sheet, no outer padding/rounding, no horizontal
   scroll risk since the panel exactly matches the viewport. */
@media (max-width: 640px) {
  .tutor-drawer {
    padding: 0;
  }
  .tutor-drawer-panel {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    padding: 1rem;
  }
  .tutor-fab {
    right: 1rem;
    bottom: 1rem;
    width: 52px;
    height: 52px;
  }
  .skill-view-actions {
    flex-direction: column;
  }
  .skill-view-actions .secondary-btn,
  .skill-view-actions .primary-btn {
    width: 100%;
    text-align: center;
  }
}

/* ===================================================================
   Reading/Grammar/Vocabulary → PDF: prints only the active .skill-print-area,
   hides everything else, drops the on-screen action buttons (.no-print) and
   reveals the print-only header/answer space. One shared rule instead of a
   separate one per skill - Reading, Grammar and Vocabulary's print buttons
   all target this same class (see renderReadingView/renderGrammarView/
   renderVocabularyView in src/js/script.js).
   =================================================================== */
@page {
  size: A4;
  margin: 2cm;
}

@media print {
  html,
  body,
  main,
  .skill-view-section,
  .skill-view-section .skill-view-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The normal page view gives every .section a large top padding and
     position:relative. If left in place, the absolutely-positioned print
     document starts below that invisible screen layout, creating the large
     blank band seen on page 1. Remove that containing block only in print so
     the document begins at the normal @page margin. */
  .skill-view-section,
  .skill-view-section .skill-view-content {
    position: static !important;
  }

  body * {
    visibility: hidden;
  }

  .skill-print-area,
  .skill-print-area * {
    visibility: visible;
  }

  .skill-print-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: none;
    border: none;
    padding: 0;
  }

  .reading-reader-card {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .no-print {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  .skill-print-header {
    margin-bottom: 0.65cm;
    border-bottom: 1px solid #000;
    padding: 0 0 0.25cm;
    text-align: center;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .skill-print-brand-image {
    display: block;
    width: 2.8cm;
    height: 2.8cm;
    margin: 0 auto 0.08cm;
    object-fit: contain;
  }

  .skill-print-language-pair {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.14cm;
    margin: 0.05cm 0 0;
    color: #111;
    font-size: 0.78rem;
  }

  .skill-print-unit {
    margin: 0.08cm 0 0;
    color: #333;
    font-size: 0.76rem;
  }

  .reading-print-date {
    margin: 0.08cm 0 0;
    font-size: 0.76rem;
  }

  .reading-text p {
    color: #000;
    orphans: 3;
    widows: 3;
    /* A paragraph is the smallest self-contained reading unit - never let
       the browser split one across two pages. */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Every question/list-row-shaped block below can be several lines tall
     (a prompt + 4 lettered options, or a word + translation + example) -
     avoid: none (the pre-fix default) let the browser split one of these
     mid-item, leaving orphaned option letters at the top of the next page.
     .skill-print-question wraps a Grammar prompt + its lettered options;
     .skill-print-option is also reused directly by Vocabulary's
     word/translation/example rows (no separate question wrapper there). */
  .skill-print-question,
  .skill-print-option,
  .reading-print-answer-lines {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .skill-print-answer-space {
    margin-top: 1cm;
    page-break-before: auto;
  }

  /* Answer-key print only (role==='ceo' - see renderPrintableExerciseList):
     correct options are marked, never shown to a student's own print output. */
  .skill-print-option.is-correct-answer {
    font-weight: 800;
  }
  .skill-print-option.is-correct-answer::after {
    content: ' ✓';
  }

  /* Browsers do not support CSS Paged Media page-number counters
     (@page { @bottom-center: counter(page) }) in the print-to-PDF path
     window.print() uses - no mainstream engine renders them from page
     CSS. Only the browser's own "Headers and footers" print-dialog
     checkbox can add page numbers, and that's the user's choice, not
     something this stylesheet can control. Not attempted here to avoid
     shipping something that silently does nothing in every browser.
     The compact symbol-only .skill-print-header is shown on page 1. */
}

/* Unit Overview Panel */
.lesson-workspace--unit-overview {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.unit-overview-panel {
  background: var(--surface);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.unit-overview-header .unit-title {
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}

.unit-overview-header .unit-objective {
  color: var(--navy-2);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

.unit-overview-header .unit-scenario {
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
}

.unit-overview-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.unit-overview-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}

.unit-overview-progress-bar div {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 999px;
  transition: width 300ms ease;
}

.unit-overview-progress-label {
  font-size: 0.8rem;
  color: var(--muted);
}

.unit-overview-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--line);
}

.unit-overview-column--full {
  grid-column: 1 / -1;
}

.unit-overview-column h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.unit-overview-column p {
  font-size: 0.9rem;
  color: var(--navy-2);
  line-height: 1.5;
}

.unit-overview-column ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--navy-2);
}

.unit-overview-column ul li {
  padding-left: 1.25rem;
  position: relative;
}

.unit-overview-column ul li::before {
  content: '✓';
  color: var(--green);
  font-weight: 900;
  position: absolute;
  left: 0;
}

.unit-overview-actions .unit-action-btn {
  width: 100%;
}

.unit-overview-collapsible {
  display: none;
}
.unit-overview-collapsible > summary {
    list-style: none;
}
.unit-overview-collapsible > summary::-webkit-details-marker {
    display: none;
}

@media (max-width: 780px) {
  .unit-overview-desktop {
    display: none;
  }
  .unit-overview-collapsible {
    display: block;
  }
  .unit-overview-collapsible summary {
    cursor: pointer;
  }

  .unit-overview-collapsible .unit-overview-body {
     padding-top: 1rem;
     margin-top: 1rem;
     border-top: 1px solid var(--line);
  }
  .unit-overview-body {
    grid-template-columns: 1fr;
  }
}

/* Verbos (Fase 2 pilot) - the card deck and sub-tabs reuse .vocab-card and
   .skill-tabs as-is; only the search/filter/sort toolbar and the per-card
   favorite/conjugate row below each flashcard are new. */
.verbs-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.verbs-search-field,
.verbs-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.verbs-search-field input,
.verbs-filter-field select {
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy-2);
  min-width: 9.5rem;
}

.verb-favorite-btn.is-active {
  background: rgba(234, 179, 8, 0.14);
  border-color: rgba(234, 179, 8, 0.4);
  color: #92700a;
}

/* ---------------------------------------------------------------------
   Verbos card redesign - compact tile (replaces the old flip-card reuse of
   .vocab-card/.vocab-card-deck for this section only; Vocabulary keeps
   .vocab-card exactly as it is, untouched). Sized to match
   .skill-library-card (~130-160px), not a bigger flashcard next to it.
   --------------------------------------------------------------------- */
.verb-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.7rem;
}

@media (max-width: 560px) {
  .verb-tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 340px) {
  .verb-tile-grid {
    grid-template-columns: 1fr;
  }
}

.verb-tile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.verb-tile:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.verb-tile:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Mastery tints the border only (never the only signal - each state also
   has the dot below, with a text tooltip via [title]). */
.verb-tile[data-mastery='practicing'] {
  border-color: rgba(217, 119, 6, 0.35);
}

.verb-tile[data-mastery='mastered'] {
  border-color: rgba(34, 197, 94, 0.4);
}

.verb-tile-top-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.verb-tile-rank {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  opacity: 0.8;
}

.verb-tile-reg-badge {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--blue);
  background: var(--accent-soft);
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
}

.verb-tile-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  margin-left: auto;
  background: rgba(148, 163, 184, 0.7);
}

.verb-tile-status-dot--learning {
  background: rgba(37, 99, 235, 0.75);
}

.verb-tile-status-dot--practicing {
  background: #d97706;
}

.verb-tile-status-dot--mastered {
  background: #22c55e;
}

.verb-tile-word {
  margin: 0.15rem 0 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--navy-2);
  line-height: 1.1;
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
}

.verb-tile-pron-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 1.4rem;
}

.verb-tile-pron {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--muted);
  opacity: 0.85;
}

.verb-tile-audio-btn.vocab-example-audio-btn {
  width: 1.35rem;
  height: 1.35rem;
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
}

.verb-tile-support {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.verb-tile-actions {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.verb-tile-action-btn {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.verb-tile-action-btn:hover {
  border-color: var(--blue);
  background: var(--accent-soft);
}

.verb-tile-action-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   "Ver detalles" modal - same open/close visual language as #authModal
   (fixed overlay, .open toggles opacity/pointer-events), scoped entirely
   to Verbos.
   --------------------------------------------------------------------- */
.verb-detail-modal {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 47, 0.6);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 55;
  padding: 1rem;
}

.verb-detail-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.verb-detail-panel {
  position: relative;
  width: min(480px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.verb-detail-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.verb-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-right: 2rem;
}

.verb-detail-head h3 {
  margin: 0 0 0.35rem;
  text-transform: capitalize;
}

.verb-detail-line {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.4rem 0 0;
}

.verb-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* Conjugador (Fase 3 pilot) */
.verb-conjugation-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.5rem;
  background: var(--white);
}

.verb-conjugation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.verb-conjugation-head h3 {
  margin: 0 0 0.35rem;
  text-transform: capitalize;
}

.verb-conjugation-support {
  color: var(--muted);
  font-weight: 600;
  margin: 0.5rem 0 1.25rem;
}

.verb-conjugation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.verb-conjugation-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: var(--light);
  border: 1px solid var(--line);
}

.verb-conjugation-cell span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}

.verb-conjugation-cell strong {
  font-size: 1rem;
  color: var(--navy-2);
}

.verb-conjugation-examples {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.verb-conjugation-example {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.verb-conjugation-example-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue);
}

.verb-conjugation-example p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* Practicar (Fase 4 pilot) - question card itself reuses .grammar-test-*
   as-is; only the setup screen, inline feedback and the correct/incorrect
   option states (Grammar's own test defers that to a separate results
   screen instead of inline) are new. */
.verb-practice-setup {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(124, 58, 237, 0.07));
}

/* Author display:flex above beats the UA [hidden] stylesheet rule at equal
   specificity - without this, setting .hidden = true in JS left the setup
   toolbar visibly on screen above the active question/results card. */
.verb-practice-setup[hidden] {
  display: none;
}

.verb-practice-challenge { display: grid; gap: 0.45rem; }
.verb-practice-challenge-label { color: var(--navy-2); font-size: 0.82rem; font-weight: 800; }
.verb-practice-challenge-options, .verb-practice-live-stats, .verb-practice-result-stats { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.verb-practice-preset { min-width: 62px; padding: 0.48rem 0.65rem; border: 1px solid #bfdbfe; border-radius: 999px; background: var(--white); color: var(--navy-2); cursor: pointer; font: inherit; font-weight: 800; }
.verb-practice-preset:hover, .verb-practice-preset.is-active { border-color: var(--blue); background: var(--blue); color: var(--white); transform: translateY(-1px); }
.verb-practice-live-stats { margin-bottom: 0.95rem; }
.verb-practice-live-stats span, .verb-practice-result-stats span { padding: 0.38rem 0.64rem; border-radius: 999px; background: var(--light); color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.verb-practice-celebration { margin: 0.25rem 0 0.85rem; color: var(--navy-2); font-weight: 800; text-align: center; }
.verb-practice-result-stats { justify-content: center; margin: 0 0 1rem; }
.verb-practice-result-stats strong { color: var(--blue); }

.grammar-test-option.is-correct {
  border-color: var(--green);
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.grammar-test-option.is-incorrect {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

.grammar-question-feedback {
  margin: 0.65rem 0 0;
  font-weight: 800;
}

.grammar-question-feedback.is-correct {
  color: #15803d;
}

.grammar-question-feedback.is-incorrect {
  color: #b91c1c;
}

.verb-practice-feedback {
  font-weight: 700;
  margin: 1rem 0;
}

.verb-practice-feedback.is-correct {
  color: #15803d;
}

.verb-practice-feedback.is-incorrect {
  color: #b91c1c;
}

/* Mi progreso (Fase 3) - reuses getStoredVocabMastery/VERB_PRACTICE_STATS_KEY,
   see verbs-view.js#renderVerbsProgress. No new data model, just a display. */
.verb-progress-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.verb-progress-tile {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  background: var(--light);
  border: 1px solid var(--line);
  text-align: center;
}

.verb-progress-tile strong {
  font-size: 1.4rem;
  color: var(--navy-2);
}

.verb-progress-tile span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}

.verb-progress-totals {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}

.verb-progress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.verb-progress-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--white);
}

.verb-progress-word {
  font-weight: 700;
  text-transform: capitalize;
  min-width: 70px;
}

.verb-progress-mastery-badge--new {
  background: rgba(148, 163, 184, 0.16);
  color: #475569;
}

.verb-progress-mastery-badge--learning {
  background: rgba(37, 99, 235, 0.1);
  color: #1e3a8a;
}

.verb-progress-mastery-badge--practicing {
  background: rgba(234, 179, 8, 0.14);
  color: #92700a;
}

.verb-progress-mastery-badge--mastered {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

/* Fase 4 - overall mastery bar, one proportional read of all 100 verbs
   above the per-status tiles (same counts, this just adds "relative to the
   whole set" that plain numbers don't convey). Colors match
   .verb-progress-mastery-badge--* so the two never disagree visually. */
.verb-progress-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--light);
  margin-bottom: 0.85rem;
}

.verb-progress-bar-seg {
  height: 100%;
  transition: width 0.3s ease;
}

.verb-progress-bar-seg--new {
  background: rgba(148, 163, 184, 0.7);
}

.verb-progress-bar-seg--learning {
  background: rgba(37, 99, 235, 0.65);
}

.verb-progress-bar-seg--practicing {
  background: rgba(234, 179, 8, 0.75);
}

.verb-progress-bar-seg--mastered {
  background: #22c55e;
}

.verb-progress-reset-row {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.verb-practice-results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.verb-progress-stat {
  font-size: 0.82rem;
  color: var(--muted);
}

.verb-progress-last {
  margin-left: auto;
}

/* Verbos Fase 1 - compact header variant. .section-heading is a large,
   centered marketing-style hero (up to 3.4rem title, 46px bottom margin) -
   fine for landing sections, far too tall for a study-tool utility section.
   This modifier only shrinks spacing/typography and left-aligns; it doesn't
   change .section-heading's own rules, so any other section could reuse it
   later without a separate class needed. */
.section-heading-compact {
  max-width: none;
  margin: 0 0 18px;
  text-align: left;
}

.section-heading-compact::before {
  margin: 0 0 10px;
}

.section-heading-compact h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 4px 0;
}

.section-heading-compact p {
  font-size: 0.95rem;
  margin: 0;
}

.verbs-heading-meta {
  margin: 6px 0 0 !important;
  font-size: 0.82rem !important;
  font-weight: 700;
  color: var(--navy-2, inherit);
}

@media (max-width: 640px) {
  .section-heading-compact {
    text-align: center;
  }
}

/* Search/filter/sort toolbar - one row on desktop when there's room (spec:
   "filtros en una sola línea cuando sea posible"), stacked on narrower
   screens (spec: "filtros apilables" on mobile) - .verbs-toolbar's existing
   flex-wrap already does this without a media query; this only trims the
   minimum width per control so all three fit more often before wrapping. */
.verbs-search-field input,
.verbs-filter-field select {
  min-width: 8rem;
}


.verbs-load-more-row {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.verbs-error-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.verb-conjugation-collocations,
.verb-conjugation-notes {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.4rem 0 0;
}

/* Fase 3 - full tense conjugation table (src/js/verbs/
   verb-conjugation-engine.js). Reuses .skill-tab-button's look for the
   tense pills instead of inventing a second tab visual language. */
.verb-tense-heading {
  margin: 1.25rem 0 0.6rem;
  font-size: 0.95rem;
}

.verb-tense-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.verb-tense-tab {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--navy-2, inherit);
}

.verb-tense-tab.active {
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  color: #fff;
  border-color: transparent;
}

.verb-tense-table {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.86rem;
}

.verb-tense-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.9fr) repeat(3, 1.4fr);
  gap: 0.6rem;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}

.verb-tense-header-row {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
}

.verb-tense-pronoun {
  font-weight: 700;
}

.verb-tense-table--imperative .verb-tense-row:not(.verb-tense-header-row) {
  grid-template-columns: minmax(90px, 0.9fr) 1.4fr 1.4fr;
}

.verb-tense-note {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .verb-tense-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
    padding: 0.5rem 0;
  }

  .verb-tense-header-row {
    display: none;
  }

  .verb-tense-pronoun {
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
  }

  .verb-tense-cell::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--muted);
  }
}
/* Vocabulary flashcards: the direct method keeps the same study-card
   language as bilingual decks; only the pedagogical content changes. */
.vocab-card-deck {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}

.vocab-card {
  min-height: 190px;
}

.vocab-card-face {
  gap: 0.4rem;
  padding: 1rem;
  background: var(--white);
}

.vocab-card:hover .vocab-card-face {
  box-shadow: var(--shadow-sm);
}

.vocab-card-side-label,
.vocab-card-method {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.64rem;
  font-weight: 850;
}

.vocab-card-side-label {
  color: var(--muted);
}

.vocab-card-method {
  padding: 0.25rem 0.6rem;
  color: #1d4ed8;
  background: rgba(219, 234, 254, 0.82);
  border: 1px solid rgba(37, 99, 235, 0.16);
}

.vocab-card-front::before {
  content: none;
}

.vocab-card-target {
  font-size: 1.02rem;
  font-weight: 800;
}

.vocab-card-target--medium {
  font-size: 0.92rem;
}

.vocab-card-target--long {
  font-size: 0.82rem;
}

.vocab-card-front-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.vocab-card-front-footer .vocab-card-hint {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-card[data-learning-mode='direct'] .vocab-card-back {
  background:
    linear-gradient(145deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98) 50%),
    var(--white);
}

.vocab-card[data-learning-mode='direct'] .vocab-card-brief-definition {
  border-left: 4px solid var(--blue);
  background: var(--white);
  box-shadow: var(--shadow-xs);
}

@media (max-width: 900px) {
  .vocab-card {
    min-height: 200px;
  }
}

@media (max-width: 560px) {
  .vocab-card {
    min-height: 190px;
  }
}
.verbs-language-switcher {
  width: min(100%, 430px);
  margin: 0 auto 1rem;
  padding: 0.75rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-xs);
}

.verbs-language-switcher label {
  flex-shrink: 0;
  color: var(--navy-2);
  font-size: 0.82rem;
  font-weight: 800;
}

.verbs-language-switcher select {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--navy-2);
  font: inherit;
  font-weight: 750;
}

@media (max-width: 560px) {
  .verbs-language-switcher {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ==========================================================================
   Language entry screen — one compact, intentional starting point
   ========================================================================== */

.language-picker-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(3rem, 5vw, 5rem) clamp(1.25rem, 6vw, 6rem);
  background:
    radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.1), transparent 27%),
    radial-gradient(circle at 88% 78%, rgba(0, 194, 255, 0.11), transparent 25%),
    linear-gradient(180deg, #f5f9ff 0%, #eef7ff 100%);
}

.language-picker-section > .section-heading {
  order: 1;
  margin-bottom: 1.6rem;
}

.language-picker-section > .section-heading h2 {
  max-width: 740px;
  margin-inline: auto;
  font-size: clamp(2.1rem, 3.6vw, 3.45rem);
}

.language-picker-section > .global-language-controls {
  order: 2;
  width: min(1080px, 100%);
  margin: 0 auto 1.6rem;
  padding: 1.2rem 1.35rem;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.12);
}

.language-picker-section .language-pair-bar {
  flex: 1;
  justify-content: center;
  gap: 0.75rem;
}

.language-picker-section .path-start-learning-btn {
  min-width: 9rem;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
}

.language-picker-section > .language-preview-grid {
  order: 3;
  width: min(1080px, 100%);
  margin: 0 auto;
  gap: 1rem;
}

.language-picker-section .language-preview-card {
  min-height: 215px;
  padding: 1.35rem;
  border-color: rgba(37, 99, 235, 0.12);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.065);
}

.language-picker-section .language-preview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.13);
}

.language-picker-section .language-preview-card.is-selected {
  border-color: var(--blue);
  background: linear-gradient(160deg, #ffffff 25%, #eef6ff 100%);
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.1),
    0 18px 38px rgba(37, 99, 235, 0.14);
}

.language-picker-section .language-preview-card.is-selected::before {
  opacity: 1;
}

.language-picker-section .language-preview-flag {
  margin-bottom: 0.45rem;
  font-size: 2.25rem;
}

.language-picker-section .language-preview-levels {
  margin: 0.15rem 0 0.45rem;
}

.language-picker-section .language-preview-desc {
  min-height: 2.9em;
  margin-bottom: 0.5rem;
  font-size: 0.84rem;
}

.language-picker-section .language-preview-btn {
  min-height: 2.55rem;
  padding: 0.55rem 1rem;
}

.language-picker-section .language-preview-card.is-selected .language-preview-btn {
  border-color: transparent;
  background: var(--gradient-primary);
  color: var(--white);
}

.language-picker-section > .current-plan-summary {
  order: 4;
  width: min(1080px, 100%);
  margin: 1rem auto 0;
  padding: 0.8rem 1rem;
  border-color: rgba(37, 99, 235, 0.14);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.pricing-section:not([hidden]) {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

footer {
  padding: 44px 6% 28px;
}

.footer-top {
  gap: 28px;
  margin-bottom: 20px;
}

footer small {
  padding-top: 14px;
}

@media (max-width: 900px) {
  .language-picker-section > .global-language-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .language-picker-section .language-pair-bar {
    justify-content: flex-start;
  }

  .language-picker-section .global-language-summary {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 720px) {
  .language-picker-section {
    padding: 2.5rem 1rem;
  }

  .language-picker-section > .language-preview-grid {
    grid-template-columns: 1fr;
  }

  .language-picker-section .language-preview-card {
    min-height: 0;
  }

  .language-picker-section > .current-plan-summary {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Focused unit mission: the full sequence stays on the route, while a
   lesson shows only the learner's current task and the next step. */
.unit-mission-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-color: rgba(37, 99, 235, 0.24);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(245, 243, 255, 0.88));
}

.unit-route-markers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(72px, 1fr));
  flex: 1 0 100%;
  gap: 0;
  width: 100%;
  padding-top: 0.35rem;
  overflow-x: auto;
}

.unit-route-markers::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 1.02rem;
  right: 7%;
  left: 7%;
  height: 3px;
  border-radius: 999px;
  background: #ccd9eb;
}

.unit-route-markers::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 1.02rem;
  left: 7%;
  width: var(--route-progress-width, 0%);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, var(--blue));
  transition: width 240ms ease;
}

.unit-route-marker {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}

.unit-route-marker > span {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 3px solid #eef4fc;
  border-radius: 50%;
  background: #afbed3;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 850;
  box-shadow: 0 0 0 1px #afbed3;
}

.unit-route-marker small {
  color: inherit;
  font-size: 0.62rem;
  font-weight: 750;
  white-space: nowrap;
}

.unit-route-marker:hover {
  color: var(--blue);
}

.unit-route-marker:hover > span {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.unit-route-marker--current {
  color: var(--blue);
}

.unit-route-marker--current > span {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}

.unit-route-marker--completed {
  color: #15803d;
}

.unit-route-marker--completed > span {
  background: #22c55e;
  box-shadow: 0 0 0 1px #22c55e;
}

.unit-route-marker:focus-visible > span {
  outline: 3px solid rgba(37, 99, 235, 0.3);
  outline-offset: 3px;
}

.unit-mission-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.unit-mission-copy span,
.unit-mission-kicker {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.unit-mission-copy strong { color: var(--navy-2); font-size: 0.95rem; }
.unit-mission-copy small { color: var(--muted); font-size: 0.78rem; }

/* Keep these route-specific compact rules after the base route styles. */
.unit-mission-strip {
  gap: 0.5rem 0.75rem;
  margin: 0.55rem 0 0.8rem;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
}

.unit-route-markers {
  padding-top: 0.1rem;
}

.unit-route-markers::before,
.unit-route-markers::after {
  top: 0.78rem;
  height: 2px;
}

.unit-route-marker {
  gap: 0.15rem;
}

.unit-route-marker > span {
  width: 1.35rem;
  height: 1.35rem;
  border-width: 2px;
  font-size: 0.58rem;
}

.unit-route-marker small {
  font-size: 0.58rem;
}

.unit-mission-copy {
  gap: 0.1rem;
}

.unit-mission-copy span,
.unit-mission-kicker {
  font-size: 0.66rem;
}

.unit-mission-copy strong {
  font-size: 0.84rem;
}

.unit-mission-copy small {
  font-size: 0.7rem;
}

.unit-mission-route-btn {
  min-height: 38px;
  padding: 0.45rem 0.85rem;
  border-radius: 12px;
  font-size: 0.76rem;
}

.grammar-mission-card {
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.92), rgba(239, 246, 255, 0.92));
}

.grammar-mission-card span {
  color: #7c3aed;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.grammar-mission-card strong { color: var(--navy-2); }
.grammar-mission-card small { color: var(--muted); font-weight: 700; }

/* Teacher-only curriculum projection. Authorization is enforced by the
   backend; these styles only provide a clear read-only reporting surface. */
.teacher-curriculum-section {
  max-width: 1240px;
  margin-inline: auto;
}

.teacher-curriculum-heading {
  margin-bottom: 1rem;
}

.teacher-curriculum-notice {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 14px;
  background: linear-gradient(135deg, #f5f3ff, #eff6ff);
}

.teacher-curriculum-notice p {
  margin: 0;
  color: var(--navy-2);
  font-size: 0.88rem;
}

.teacher-curriculum-panel {
  display: grid;
  gap: 1rem;
}

.teacher-curriculum-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.teacher-curriculum-stats article {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.teacher-curriculum-stats span,
.teacher-curriculum-stats strong {
  display: block;
}

.teacher-curriculum-stats span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.teacher-curriculum-stats strong {
  margin-top: 0.25rem;
  color: var(--navy-2);
  font-size: 1.6rem;
}

.teacher-framework-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.teacher-framework-card {
  min-width: 0;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.teacher-framework-card header {
  display: grid;
  gap: 0.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.teacher-framework-card header > span {
  width: fit-content;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 850;
}

.teacher-framework-card header small,
.teacher-framework-empty {
  color: var(--muted);
}

.teacher-framework-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.85rem 0;
}

.teacher-framework-metrics span {
  padding: 0.35rem 0.55rem;
  border-radius: 10px;
  background: var(--bg);
  font-size: 0.76rem;
}

.teacher-framework-card ul {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

.teacher-framework-card li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
}

.teacher-framework-card a {
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 750;
}

.teacher-curriculum-error {
  padding: 1rem;
  border: 1px solid #fecaca;
  border-radius: 14px;
  background: #fef2f2;
  color: #b91c1c;
}

@media (max-width: 800px) {
  .teacher-curriculum-stats,
  .teacher-framework-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .teacher-curriculum-stats,
  .teacher-framework-grid {
    grid-template-columns: 1fr;
  }
}

.writing-predictive-accept {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding: 0.55rem 0.7rem;
  border: 1px dashed rgba(37, 99, 235, 0.38);
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.72);
  color: var(--navy-2);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.writing-predictive-accept strong { flex: 1; color: var(--blue); }
.writing-predictive-accept small { color: var(--muted); font-weight: 800; }
.writing-predictive-accept:hover { border-style: solid; background: var(--accent-soft); }

@media (max-width: 560px) {
  .unit-mission-strip { align-items: flex-start; flex-direction: column; }
}

.unit-activity-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fbff, #eef6ff);
  box-shadow: 0 10px 28px rgba(30, 64, 175, 0.08);
}

.lesson-curriculum-brief {
  margin: 0 0 1rem;
  padding: 0.85rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(30, 64, 175, 0.07);
}

.lesson-curriculum-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.7rem;
}

.lesson-curriculum-heading > div {
  display: grid;
  gap: 0.1rem;
}

.lesson-curriculum-heading span {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lesson-curriculum-heading strong {
  color: var(--navy-2);
  font-size: 1rem;
}

.lesson-curriculum-heading small {
  color: var(--muted);
  font-size: 0.72rem;
}

.lesson-curriculum-start {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0.65rem 1rem;
  border-radius: 13px;
  white-space: nowrap;
}

.lesson-curriculum-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.lesson-curriculum-grid article {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.65rem;
  border-radius: 14px;
  background: #f7faff;
}

.lesson-curriculum-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #e7f0ff;
  color: var(--blue);
  font-weight: 900;
}

.lesson-curriculum-grid h4 {
  margin: 0 0 0.3rem;
  color: var(--navy-2);
  font-size: 0.8rem;
}

.lesson-curriculum-grid p,
.lesson-curriculum-grid ul {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.lesson-curriculum-grid ul {
  display: grid;
  gap: 0.2rem;
  padding-left: 1rem;
}

.lesson-curriculum-grid small {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.lesson-curriculum-reopen {
  display: none;
  margin: 0.2rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.lesson-curriculum-brief.is-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
}

.lesson-curriculum-brief.is-collapsed .lesson-curriculum-heading {
  margin: 0;
}

.lesson-curriculum-brief.is-collapsed .lesson-curriculum-heading > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
}

.lesson-curriculum-brief.is-collapsed .lesson-curriculum-heading span,
.lesson-curriculum-brief.is-collapsed .lesson-curriculum-heading small,
.lesson-curriculum-brief.is-collapsed .lesson-curriculum-start,
.lesson-curriculum-brief.is-collapsed .lesson-curriculum-grid {
  display: none;
}

.lesson-curriculum-brief.is-collapsed .lesson-curriculum-reopen {
  display: inline-flex;
  flex: 0 0 auto;
}

.unit-activity-footer-progress {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.unit-activity-footer-progress strong { color: var(--navy-2); }

.unit-activity-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

.unit-activity-footer--reading-inline {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.unit-activity-footer--reading-inline .unit-activity-footer-progress {
  display: none;
}

.unit-activity-footer--verbs {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0.35rem;
}

.reading-section-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  color: var(--navy-2);
  font-size: 0.8rem;
}

.reading-section-indicator > div {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 0.35rem;
}

.reading-section-indicator span {
  width: min(52px, 10vw);
  height: 5px;
  border-radius: 999px;
  background: #dbe7f5;
}

.reading-section-indicator span.is-active {
  background: linear-gradient(90deg, var(--blue), #22c1f1);
}

@media (max-width: 560px) {
  .unit-activity-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .unit-activity-footer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unit-activity-footer-actions > :only-child { grid-column: 2; }
  .unit-activity-footer-actions button { width: 100%; }

  .unit-activity-footer--reading-inline {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 820px) {
  .lesson-curriculum-grid { grid-template-columns: 1fr; }

  .lesson-curriculum-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .lesson-curriculum-start {
    width: 100%;
  }

  .lesson-curriculum-brief.is-collapsed {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Final compact activity chrome. Kept at the end so legacy component
   defaults cannot restore the oversized button-card treatment. */
.skill-view-section > .level-tabs {
  display: none;
}

.skill-view-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.8rem;
  border-radius: 16px;
}

.skill-view-pills {
  gap: 0.4rem;
  margin: 0;
}

.skill-view-pill {
  padding: 0.22rem 0.6rem;
  font-size: 0.76rem;
}

.skill-view-sentence {
  flex: 1 1 280px;
  margin: 0;
  font-size: 0.78rem;
}

.skill-view-actions {
  gap: 0.4rem;
  margin-left: auto;
}

.skill-view-actions .secondary-btn,
.skill-view-actions .primary-btn {
  min-height: 32px;
  padding: 0.3rem 0.45rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--blue);
  font-size: 0.72rem;
}

.skill-view-actions .secondary-btn:hover,
.skill-view-actions .primary-btn:hover {
  background: rgba(37, 99, 235, 0.07);
  transform: none;
}

.unit-mission-route-btn {
  min-height: 30px;
  padding: 0.25rem 0.4rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--blue);
  font-size: 0.7rem;
}

/* The route needs all skill shortcuts, but it does not need a large landing
   header before every lesson. Keep that orientation compact and make the
   skill switcher feel like navigation rather than a second row of CTAs. */
.learning-path-section > .section-heading {
  max-width: 680px;
  margin-bottom: 0.85rem;
}

.learning-path-section > .section-heading::before {
  display: none;
}

.learning-path-section > .section-heading span {
  font-size: 0.72rem;
}

.learning-path-section > .section-heading h2 {
  margin: 0.2rem 0;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing: -0.035em;
}

.learning-path-section > .section-heading p {
  font-size: 0.86rem;
}

#learning-path > .level-tabs {
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

#learning-path > .level-tabs .level-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.38rem 0.72rem;
  font-size: 0.78rem;
}

/* A learner arriving from the route already sees a thin
   "language · level · lesson" bar and the unit mission. Hiding the
   generic course pills in that state removes repeated information while
   keeping the route link and secondary actions available. */
.skill-view-section.is-route-activity .skill-view-header {
  justify-content: flex-end;
  min-height: 32px;
  padding-block: 0.15rem;
  margin-bottom: 0.15rem;
}

.skill-view-section.is-route-activity .skill-view-pills,
.skill-view-section.is-route-activity .skill-view-sentence {
  display: none;
}

.skill-view-section.is-route-activity .skill-view-actions {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .skill-view-header {
    align-items: flex-start;
  }

  .skill-view-actions {
    width: 100%;
    margin-left: 0;
  }

  .skill-view-more-menu {
    right: auto;
    left: 0;
  }

  #learning-path > .level-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: calc(100% + 1rem);
    margin-right: -0.5rem;
    margin-left: -0.5rem;
    padding: 0 0.5rem 0.35rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  #learning-path > .level-tabs::-webkit-scrollbar {
    display: none;
  }

  #learning-path > .level-tabs .level-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .skill-view-section.is-route-activity .skill-view-header {
    justify-content: flex-start;
  }

  .skill-view-section.is-route-activity .skill-view-actions {
    width: auto;
  }
}