/* Custom variables with HSL for refined control - Improved Accessibility */
:root {
  color-scheme: light;
  --bg: hsl(225, 60%, 97%); /* Slightly darker for better contrast */
  --surface: rgba(255, 255, 255, 0.92); /* Increased opacity for better contrast */
  --surface-strong: #ffffff;
  --sidebar: hsla(38, 60%, 88%, 0.98); /* Darker sidebar for better contrast */
  --text: hsl(224, 45%, 8%); /* Darker text for WCAG AA compliance */
  --muted: hsl(224, 20%, 35%); /* Darker muted text */
  --text-secondary: hsl(224, 20%, 25%); /* Darker secondary text */
  --line: rgba(111, 122, 157, 0.25); /* More visible borders */
  --purple: hsl(258, 92%, 55%); /* Darker purple for better contrast */
  --purple-2: hsl(272, 92%, 55%);
  --pink: hsl(327, 90%, 55%); /* Darker pink */
  --blue: hsl(214, 100%, 50%); /* Darker blue */
  --green: hsl(145, 65%, 40%); /* Darker green */
  --amber: hsl(36, 100%, 48%); /* Darker amber */
  --cyan: hsl(187, 90%, 38%); /* Darker cyan */
  --shadow: 0 18px 50px rgba(45, 54, 88, 0.15);
  --shadow-soft: 0 10px 30px rgba(45, 54, 88, 0.08);
  --radius: 20px;

  /* Premium Gold variables - Light Mode (Improved Contrast) */
  --gold: hsl(43, 93%, 45%); /* Darker gold */
  --gold-text: hsl(40, 95%, 28%); /* Darker gold text */
  --gold-pastel: rgba(254, 243, 199, 0.85); /* More opaque */
  --gold-border: rgba(217, 119, 6, 0.5); /* More visible border */
  --gold-glow: rgba(217, 119, 6, 0.18); /* More visible glow */
}

body.dark {
  color-scheme: dark;
  --bg: hsl(220, 40%, 6%); /* Lighter background for better contrast */
  --surface: rgba(20, 30, 50, 0.85); /* More opaque surface */
  --surface-strong: hsl(220, 38%, 12%); /* Lighter surface-strong */
  --sidebar: rgba(15, 22, 35, 0.98); /* Lighter sidebar */
  --text: hsl(225, 60%, 95%); /* Slightly darker text for contrast */
  --muted: hsl(225, 18%, 65%); /* Darker muted text */
  --text-secondary: hsl(225, 24%, 75%); /* Darker secondary text */
  --line: rgba(138, 77, 255, 0.25); /* More visible borders */
  --purple: hsl(258, 100%, 62%); /* Darker purple */
  --purple-2: hsl(272, 100%, 62%);
  --pink: hsl(327, 100%, 62%); /* Darker pink */
  --blue: hsl(214, 100%, 58%); /* Darker blue */
  --green: hsl(145, 75%, 50%); /* Darker green */
  --amber: hsl(36, 100%, 55%); /* Darker amber */
  --cyan: hsl(187, 100%, 50%); /* Darker cyan */
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.35);

  /* Premium Gold variables - Dark Mode (Improved Contrast) */
  --gold: hsl(45, 100%, 50%); /* Darker gold */
  --gold-text: hsl(45, 100%, 60%); /* Darker gold text */
  --gold-pastel: rgba(251, 191, 36, 0.15); /* More visible */
  --gold-border: rgba(251, 191, 36, 0.55); /* More visible border */
  --gold-glow: rgba(251, 191, 36, 0.3); /* More visible glow */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 15%, var(--purple) 0%, transparent 25%),
    radial-gradient(circle at 15% 85%, var(--blue) 0%, transparent 20%),
    var(--bg);
  background-size: 100% 100%, 100% 100%, cover;
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
  transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, strong, .brand strong {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

/* App Layout Grid */
.app-shell {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  min-height: 100vh;
}

/* Confetti canvas */
#confettiCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
}

/* Floating XP bubbles */
.xp-bubble {
  position: absolute;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.4rem;
  color: #ffcd23;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 205, 35, 0.6);
  pointer-events: none;
  z-index: 10000;
  animation: floatXP 1.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes floatXP {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -24px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80px) scale(0.8);
  }
}

/* Sidebar Menu */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px;
  background: linear-gradient(135deg, hsla(140, 85%, 88%, 0.96), hsla(45, 90%, 86%, 0.96), hsla(275, 80%, 88%, 0.96));
  border-right: 1px solid var(--line);
  box-shadow: 10px 0 40px rgba(28, 33, 58, 0.04);
  z-index: 10;
  backdrop-filter: blur(20px);
  overflow-y: auto;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.sidebar::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome/Safari */
}

body.dark .sidebar {
  background: linear-gradient(135deg, hsla(140, 45%, 15%, 0.96), hsla(45, 40%, 13%, 0.96), hsla(275, 45%, 16%, 0.96));
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.25);
}

.brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0;
}

.brand-logo {
  height: 44px;
  width: 140px;
  max-width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}

.brand-logo:hover {
  transform: scale(1.05);
}

body:not(.dark) .brand-logo.logo-dark-theme {
  display: none;
}

body.dark .brand-logo.logo-light-theme {
  display: none;
}

/* Contenedor del logo — Modo Claro */
body:not(.dark) .brand {
  transition: transform 0.3s ease;
}

body:not(.dark) .brand:hover {
  transform: scale(1.02);
}

/* Logo 3D con fondo colorido — Modo Claro */
body:not(.dark) .brand-logo.logo-light-theme {
  /* La imagen ya trae su fondo y color, solo ajustamos su tamaño */
  width: 100%;
  height: auto;
  max-width: 180px;
  object-fit: contain;
}

/* Logo 3D para el Modo Oscuro */
body.dark .brand-logo.logo-dark-theme {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
  transition: filter 0.3s ease;
}

.level-meta,
.sidebar-stats span,
p,
small {
  color: var(--muted);
}

/* Common Card Styles */
.level-card,
.coach-bubble,
.stats-strip,
.calendar-card,
.agenda-card,
.upcoming-card,
.chat-panel,
.practice-panel,
.progress-hero,
.modal-card,
.topic-card,
.course-card,
.daily-card,
.lesson-focus,
.metric-grid article,
.achievement-grid article,
.event-row,
.tool-card,
.feedback-card {
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

/* Light-mode topic card: warm lavender-to-amber gradient - Improved Contrast */
body:not(.dark) .topic-card {
  background: linear-gradient(
    135deg,
    hsla(270, 60%, 92%, 0.90) 0%,
    hsla(300, 40%, 90%, 0.88) 40%,
    hsla(38, 80%, 90%, 0.90) 100%
  );
  border-color: hsla(280, 50%, 70%, 0.45);
  box-shadow:
    0 8px 24px hsla(270, 60%, 65%, 0.15),
    0 2px 8px hsla(38, 80%, 65%, 0.12);
}

body:not(.dark) .topic-card:hover {
  background: linear-gradient(
    135deg,
    hsla(270, 65%, 89%, 0.95) 0%,
    hsla(300, 45%, 87%, 0.93) 40%,
    hsla(38, 85%, 87%, 0.95) 100%
  );
  border-color: hsla(280, 55%, 60%, 0.55);
  box-shadow:
    0 12px 32px hsla(270, 60%, 65%, 0.20),
    0 4px 12px hsla(38, 80%, 60%, 0.18);
}

/* Dark-mode topic card: cool cyan-to-purple gradient - Improved Contrast */
body.dark .topic-card {
  background: linear-gradient(
    135deg,
    hsla(187, 70%, 15%, 0.92) 0%,
    hsla(220, 55%, 18%, 0.90) 45%,
    hsla(270, 65%, 18%, 0.92) 100%
  );
  border-color: hsla(200, 70%, 50%, 0.35);
  box-shadow:
    0 8px 24px hsla(187, 80%, 40%, 0.18),
    0 2px 8px hsla(270, 80%, 55%, 0.15);
}

body.dark .topic-card:hover {
  background: linear-gradient(
    135deg,
    hsla(187, 75%, 18%, 0.96) 0%,
    hsla(220, 60%, 21%, 0.94) 45%,
    hsla(270, 70%, 21%, 0.96) 100%
  );
  border-color: hsla(200, 80%, 55%, 0.50);
  box-shadow:
    0 12px 32px hsla(187, 80%, 45%, 0.25),
    0 4px 12px hsla(270, 80%, 60%, 0.22);
}

/* Interactive hover cards */
.course-card:hover,
.tool-card:hover,
.event-row:hover {
  transform: translateY(-4px);
  border-color: var(--gold-border);
  box-shadow: 0 12px 30px var(--gold-glow), var(--shadow);
  background: var(--surface-strong);
}

/* Progress and Leveling */
.level-card {
  padding: 16px;
  border: 1.5px solid var(--gold-border) !important;
  background: linear-gradient(135deg, var(--surface), var(--gold-pastel)) !important;
  box-shadow: 0 8px 30px var(--gold-glow);
}

.level-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
}

.metric-icon.star {
  color: #ffc107;
  font-size: 1.25rem;
  filter: drop-shadow(0 2px 6px rgba(255, 193, 7, 0.4));
}

.streak-mini {
  margin-left: auto;
  color: #ff7a00;
  font-weight: 800;
  background: rgba(255, 122, 0, 0.1);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.85rem;
}

.progress-track,
.mini-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(128, 138, 164, 0.14);
}

.progress-track {
  margin: 12px 0 8px;
}

.progress-track.large {
  height: 10px;
}

.progress-track span,
.mini-bar span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.level-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Navigation List */
.nav-list {
  display: grid;
  gap: 6px;
}

/* Navigation Section Grouping */
.nav-section {
  display: grid;
  gap: 4px;
  padding: 8px 0;
}

.nav-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 12px;
  margin-bottom: 4px;
}

/* More Menu styles removed - functionality discontinued */

.nav-list .mobile-admin-nav {
  display: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item:hover,
.nav-item.active {
  transform: translateX(4px);
  background: linear-gradient(90deg, rgba(116, 57, 246, 0.18), rgba(244, 74, 164, 0.10));
  color: var(--purple);
}

.nav-item.active {
  box-shadow: inset 4px 0 0 var(--purple);
  background: linear-gradient(90deg, rgba(116, 57, 246, 0.22), rgba(244, 74, 164, 0.15));
}

/* Light-mode nav buttons: warm purple-café-beige instead of bright white */
body:not(.dark) .nav-item:hover,
body:not(.dark) .nav-item.active {
  background: linear-gradient(
    90deg,
    hsla(270, 45%, 82%, 0.45) 0%,
    hsla(30, 35%, 86%, 0.38) 100%
  );
  color: hsl(265, 55%, 38%);
}

body:not(.dark) .nav-item.active {
  background: linear-gradient(
    90deg,
    hsla(270, 50%, 78%, 0.55) 0%,
    hsla(30, 40%, 82%, 0.44) 100%
  );
  box-shadow: inset 4px 0 0 hsl(265, 65%, 48%);
  color: hsl(265, 60%, 32%);
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 1.25rem;
}

.nav-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease, transform 0.2s ease;
}

.nav-item:hover .nav-icon svg,
.nav-item.active .nav-icon svg {
  transform: scale(1.1);
}

/* Mascot Section */
.coach-card {
  margin-top: 4px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
  align-items: center;
}

.mascot-container {
  width: 82px;
  height: 82px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#ollie-mascot {
  width: 100%;
  height: 100%;
  animation: ollie-float 3.5s ease-in-out infinite;
}

@keyframes ollie-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.coach-bubble {
  position: relative;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.8rem;
  width: 100%;
  box-shadow: var(--shadow-soft);
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

.coach-bubble::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent var(--line) transparent;
}

.coach-bubble::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent var(--surface-strong) transparent;
}

.coach-bubble strong {
  display: block;
  font-size: 0.85rem;
  color: var(--purple);
}

.coach-bubble span {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  line-height: 1.3;
}

/* Sidebar stats */
.sidebar-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.sidebar-stats div + div {
  border-left: 1px solid var(--line);
}

.sidebar-stats strong {
  display: block;
  color: var(--purple);
  font-size: 1.3rem;
}

.sidebar-stats div:nth-child(2) strong { color: var(--pink); }
.sidebar-stats div:nth-child(3) strong { color: var(--green); }

.sidebar-stats span {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 600;
}

/* Main Content Area */
.main-content {
  width: 100%;
  min-width: 0;
  padding: 30px clamp(20px, 4vw, 48px) 96px;
}

.view {
  display: none;
  animation: fadeSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.view.active {
  display: block;
}

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

/* Header/Hero Card */
.hero-card {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-radius: 24px;
  padding: clamp(24px, 4vw, 42px);
  background:
    linear-gradient(135deg, rgba(84, 62, 255, 0.94), rgba(171, 65, 242, 0.88) 50%, rgba(244, 74, 164, 0.86)),
    var(--surface-strong);
  box-shadow: var(--shadow);
  color: #ffffff;
  border: 0;
}

body.dark .hero-card {
  background:
    linear-gradient(135deg, rgba(30, 20, 80, 0.92), rgba(60, 24, 115, 0.88) 60%, rgba(93, 26, 96, 0.8)),
    var(--surface-strong);
  border: 1px solid rgba(138, 77, 255, 0.3);
}

.hero-copy {
  max-width: clamp(300px, 50%, 540px);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 99px;
  background: hsla(40, 55%, 62%, 0.30) !important;
  color: hsl(42, 95%, 52%) !important;
  border: 1px solid hsla(40, 80%, 55%, 0.50) !important;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px hsla(40, 70%, 50%, 0.18);
  text-shadow: 0 1px 4px hsla(40, 80%, 30%, 0.25);
}

.hero-card h1 {
  margin: 16px 0 8px;
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  line-height: 1.05;
  font-weight: 800;
}

.hero-card p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0;
}

.hero-actions,
.hero-metrics,
.focus-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* Button UI Components */
.primary-btn,
.ghost-btn,
.link-btn,
.course-card button,
.chat-form button,
.calendar-head button,
.modal-close,
.lesson-modal-close {
  border: 0;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.primary-btn {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 99px;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  box-shadow: 0 10px 24px rgba(116, 57, 246, 0.25);
}

.hero-card .primary-btn {
  background: #ffffff;
  color: var(--purple);
  box-shadow: 0 10px 24px rgba(255, 255, 255, 0.15);
}

.hero-card .primary-btn:hover {
  background: #f1ecff;
  transform: translateY(-2px);
}

.ghost-btn {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 99px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.ghost-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
  transform: translateY(-2px);
}

.primary-btn:hover,
.course-card button:hover,
.link-btn:hover,
.chat-form button:hover {
  transform: translateY(-2px);
}

.primary-btn:hover {
  box-shadow: 0 10px 24px var(--gold-glow), 0 4px 12px rgba(116, 57, 246, 0.25);
}

.primary-btn:active {
  transform: translateY(0);
}

.hero-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 99px;
  background: var(--gold-pastel) !important;
  border: 1.5px solid var(--gold-border) !important;
  color: var(--gold-text) !important;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 4px 12px var(--gold-glow);
}

.hero-image {
  position: absolute;
  right: 16px;
  top: 16px;
  bottom: 16px;
  width: min(48%, 510px);
  height: calc(100% - 32px);
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(45, 20, 94, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 2;
}

.hero-image:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(45, 20, 94, 0.35);
}

body.dark .hero-image {
  opacity: 0.8;
}

/* Sections and Titles */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 32px 0 16px;
}

.section-heading h2 {
  font-size: 1.5rem;
  margin: 0;
}

.page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 8px 0 24px;
}

.page-title h1 {
  font-size: 2.2rem;
  margin: 0;
}

.page-title p {
  margin: 4px 0 0 0;
  font-size: 1rem;
}

.link-btn {
  padding: 8px 16px;
  border-radius: 99px;
  background: transparent;
  color: var(--purple);
  font-weight: 700;
  font-size: 0.9rem;
}

/* Grids */
.topic-grid,
.course-grid,
.metric-grid,
.achievement-grid,
.upcoming-grid {
  display: grid;
  gap: 16px;
}

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

.topic-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  min-height: 110px;
}

.topic-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1.5rem;
}

.blue .topic-icon { background: rgba(37, 130, 255, 0.12); color: var(--blue); }
.green .topic-icon { background: rgba(43, 197, 109, 0.12); color: var(--green); }
.amber .topic-icon { background: rgba(255, 159, 28, 0.12); color: var(--amber); }
.pink .topic-icon { background: rgba(244, 74, 164, 0.12); color: var(--pink); }

.topic-card h3 {
  font-size: 1.1rem;
  margin: 0;
}

.topic-card p {
  font-size: 0.85rem;
  margin: 2px 0 0 0;
}

.topic-card small {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
}

.course-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.course-grid.full {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px !important;
  margin-top: 55px !important;
}

.course-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.course-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.course-card h3,
.course-card p,
.course-card button,
.course-card .mini-bar {
  margin-left: 16px;
  margin-right: 16px;
}

.course-card h3 {
  font-size: 1.15rem;
  margin: 14px 16px 4px;
}

.course-card p {
  font-size: 0.85rem;
  flex-grow: 1;
  min-height: 38px;
}

.course-card button {
  margin: 14px 16px;
  padding: 0;
  background: transparent;
  color: var(--purple);
  width: fit-content;
  font-size: 0.9rem;
}

.badge-count {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.9);
  color: hsl(224, 45%, 12%);
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.daily-skill-card {
  border: 1.5px solid rgba(124, 58, 237, 0.14);
}

.daily-skill-card::after {
  content: '';
  position: absolute;
  inset: auto 16px 54px 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.18), transparent);
  pointer-events: none;
}

.daily-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.82);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

.daily-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 16px 0;
}

.daily-card-meta span {
  border: 1px solid rgba(124, 58, 237, 0.16);
  background: rgba(124, 58, 237, 0.07);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 800;
}

.daily-card-meta span:first-child {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.22);
  color: #059669;
}

body.dark .daily-badge {
  background: rgba(248, 250, 252, 0.9);
  color: #111827;
}

body.dark .daily-card-meta span {
  border-color: rgba(167, 139, 250, 0.22);
  background: rgba(167, 139, 250, 0.12);
  color: #CBD5E1;
}

body.dark .daily-card-meta span:first-child {
  background: rgba(16, 185, 129, 0.18);
  color: #6EE7B7;
}

body.dark .badge-count {
  background: rgba(13, 20, 37, 0.9);
  color: #ffffff;
}

/* Bottom Stats Strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--gold-border) !important;
  background: linear-gradient(135deg, var(--surface), var(--gold-pastel)) !important;
  box-shadow: 0 8px 30px var(--gold-glow);
}

.stats-strip div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
}

.stats-strip div + div {
  border-left: 1px solid var(--line);
}

.stats-strip span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold-pastel) !important;
  color: var(--gold-text) !important;
  border: 1.5px solid var(--gold-border) !important;
  font-size: 1.25rem;
  font-weight: 800;
}

.stats-strip strong {
  display: block;
  font-size: 1.25rem;
  line-height: 1.1;
}

.stats-strip small {
  display: block;
  font-size: 0.75rem;
}

/* Double-column View Layouts (Lessons, Calendar, Tutor) */
.lesson-layout,
.calendar-layout,
.tutor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 20px;
}

.lesson-layout {
  margin-bottom: 55px !important;
}

.lesson-focus,
.daily-card {
  padding: 24px;
}

.lesson-focus {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(21, 29, 61, 0.3), rgba(116, 57, 246, 0.78)),
    linear-gradient(135deg, var(--blue), var(--purple), var(--pink));
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
}

.lesson-focus h2 {
  font-size: 1.8rem;
  margin: 12px 0 8px;
}

.lesson-focus p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
}

.focus-steps button {
  min-height: 44px;
  padding: 0 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.9rem;
}

.focus-steps button:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.daily-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1.5px solid var(--gold-border) !important;
  background: linear-gradient(135deg, var(--surface), var(--gold-pastel)) !important;
  box-shadow: 0 8px 30px var(--gold-glow);
}

.daily-card h3 {
  margin: 0 0 6px 0;
  font-size: 1.3rem;
}

.daily-card p {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
}

/* Calendar Section */
.calendar-card {
  padding: 20px;
}

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

.calendar-head button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 1.4rem;
}

.calendar-head button:hover {
  border-color: var(--gold);
  color: var(--gold-text);
  background: var(--gold-pastel) !important;
  box-shadow: 0 4px 12px var(--gold-glow);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.calendar-grid span,
.calendar-grid button {
  min-height: 52px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.15s ease;
}

.calendar-grid span {
  display: grid;
  place-items: center;
  min-height: 36px;
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--purple), var(--purple-2)) !important;
  border-bottom: 2.5px solid var(--gold-border) !important;
}

.calendar-grid button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.calendar-grid button:hover {
  background: rgba(116, 57, 246, 0.08);
}

.calendar-grid button.today {
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  font-weight: 800;
}

.calendar-grid button.selected-day {
  box-shadow: inset 0 0 0 2px var(--gold);
  background: var(--gold-pastel) !important;
  color: var(--gold-text) !important;
  font-weight: 800;
}

.calendar-grid button.muted {
  color: rgba(117, 126, 151, 0.4);
}

/* Event Dots */
.dot-container {
  display: flex;
  justify-content: center;
  gap: 3px;
  position: absolute;
  bottom: 6px;
  width: 100%;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dot.purple { background: var(--purple); }
.dot.pink { background: var(--pink); }
.dot.green { background: var(--green); }
.dot.amber { background: var(--amber); }
.dot.blue { background: var(--blue); }
.dot.cyan { background: var(--cyan); }
.dot.gold { background: var(--gold); }

/* Calendar Filter Chips */
.calendar-filters-container {
  display: flex;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}
.calendar-filters-container::-webkit-scrollbar {
  display: none;
}
.filter-chip {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-chip:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.filter-chip.active {
  background: linear-gradient(135deg, var(--purple), var(--purple-2)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(116, 57, 246, 0.25);
}

/* Status Badges */
.badge-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-block;
}
.badge-status.pending {
  background: rgba(255, 159, 28, 0.12);
  color: var(--amber);
  border: 1px solid rgba(255, 159, 28, 0.25);
}
.badge-status.completed {
  background: rgba(43, 197, 109, 0.12);
  color: var(--green);
  border: 1px solid rgba(43, 197, 109, 0.25);
}
.badge-status.overdue {
  background: rgba(244, 74, 164, 0.12);
  color: var(--pink);
  border: 1px solid rgba(244, 74, 164, 0.25);
}

/* Agenda column */
.agenda-card {
  padding: 20px;
}

.agenda-card h2 {
  font-size: 1.3rem;
  margin: 0;
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  max-height: 380px;
  overflow-y: auto;
}

.event-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 16px;
  width: 100%;
  border-radius: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-row:hover {
  border-color: var(--purple);
  box-shadow: 0 4px 12px rgba(116, 57, 246, 0.15);
  transform: translateY(-2px);
}

.event-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.event-time-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-time-meta time {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
}

.event-duration {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
}

.event-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.1rem;
}
.event-icon.blue { background: rgba(37, 130, 255, 0.12); color: var(--blue); }
.event-icon.green { background: rgba(43, 197, 109, 0.12); color: var(--green); }
.event-icon.amber { background: rgba(255, 159, 28, 0.12); color: var(--amber); }
.event-icon.pink { background: rgba(244, 74, 164, 0.12); color: var(--pink); }
.event-icon.purple { background: rgba(116, 57, 246, 0.12); color: var(--purple); }
.event-icon.cyan { background: rgba(11, 189, 210, 0.12); color: var(--cyan); }
.event-icon.gold { background: rgba(255, 159, 28, 0.12); color: var(--amber); }

.event-row em {
  display: none;
}

/* Upcoming grid row */
.upcoming-card {
  margin-top: 20px;
  padding: 20px;
}

.upcoming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.upcoming-event-card {
  padding: 16px;
  border-radius: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.upcoming-event-card:hover {
  border-color: var(--purple);
  box-shadow: 0 4px 12px rgba(116, 57, 246, 0.15);
  transform: translateY(-2px);
}

/* AI Tutor Area */
.tutor-layout .chat-panel,
.tutor-layout .practice-panel {
  border: 2px solid rgba(116, 57, 246, 0.28);
  box-shadow:
    0 18px 42px rgba(45, 54, 88, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.tutor-layout .chat-panel {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.34)),
    radial-gradient(circle at 12% 12%, rgba(167,139,250,0.28), transparent 38%),
    radial-gradient(circle at 88% 20%, rgba(96,165,250,0.22), transparent 42%),
    radial-gradient(circle at 52% 92%, rgba(244,114,182,0.16), transparent 40%);
}

.tutor-layout .practice-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.56), rgba(255,255,255,0.3)),
    radial-gradient(circle at 10% 8%, rgba(196,181,253,0.32), transparent 42%),
    radial-gradient(circle at 92% 48%, rgba(125,211,252,0.2), transparent 45%),
    radial-gradient(circle at 22% 94%, rgba(110,231,183,0.16), transparent 38%);
}

.chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 580px;
  max-height: 580px;
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 2px solid rgba(116, 57, 246, 0.18);
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(14px);
}

.chat-header h2 {
  font-size: 1.15rem;
  margin: 0;
}

.status-online {
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 700;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  flex-grow: 1;
  overflow-y: auto;
  background: linear-gradient(160deg, rgba(237,233,254,0.2), rgba(224,242,254,0.16) 52%, rgba(252,231,243,0.14));
}

.message {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.45;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(45, 54, 88, 0.04);
}

.tutor-message {
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(245,243,255,0.78));
  border: 2px solid rgba(116, 57, 246, 0.22);
  border-bottom-left-radius: 4px;
}

.tutor-message .ollie-rich-paragraph {
  margin: 0 0 10px;
  color: var(--text);
}

.tutor-message .ollie-rich-paragraph:last-child {
  margin-bottom: 0;
}

.ollie-rich-heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(116, 57, 246, 0.14), rgba(244, 74, 164, 0.1));
  border: 1px solid rgba(116, 57, 246, 0.18);
  color: var(--purple);
  font-size: 0.78rem;
  font-weight: 900;
}

.ollie-rich-heading:first-child {
  margin-top: 0;
}

.ollie-rich-list {
  display: grid;
  gap: 8px;
  margin: 6px 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: ollie-list;
}

.ollie-rich-list li {
  counter-increment: ollie-list;
  position: relative;
  display: grid;
  gap: 4px;
  padding: 10px 12px 10px 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(116, 57, 246, 0.08), rgba(79, 172, 254, 0.06));
  border: 1px solid rgba(116, 57, 246, 0.14);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.ollie-rich-list li::before {
  content: counter(ollie-list);
  position: absolute;
  left: 12px;
  top: 11px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow: 0 6px 14px rgba(116, 57, 246, 0.18);
}

.ollie-list-main {
  color: var(--text);
  font-weight: 750;
}

.ollie-choice-list li {
  cursor: pointer;
  user-select: none;
  background: linear-gradient(135deg, rgba(116, 57, 246, 0.11), rgba(79, 172, 254, 0.1));
  border-color: rgba(167, 139, 250, 0.34);
}

.ollie-choice-list li:hover,
.ollie-choice-list li:focus-visible {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(244, 74, 164, 0.62);
  background: linear-gradient(135deg, rgba(116, 57, 246, 0.18), rgba(244, 74, 164, 0.13), rgba(79, 172, 254, 0.13));
  box-shadow: 0 12px 26px rgba(116, 57, 246, 0.18);
  outline: none;
}

.ollie-choice-list li:active,
.ollie-choice-list li.selected {
  transform: translateY(1px) scale(0.99);
  border-color: rgba(244, 74, 164, 0.78);
  background: linear-gradient(135deg, rgba(116, 57, 246, 0.22), rgba(244, 74, 164, 0.18));
}

.ollie-choice-list.has-selection li:not(.selected) {
  opacity: 0.68;
}

.ollie-example {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

body.dark .ollie-rich-heading {
  color: #f5e8ff;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(244, 114, 182, 0.12));
  border-color: rgba(167, 139, 250, 0.24);
}

body.dark .ollie-rich-list li {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(14, 165, 233, 0.08));
  border-color: rgba(167, 139, 250, 0.18);
}

body.dark .ollie-choice-list li {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.16), rgba(14, 165, 233, 0.12));
  border-color: rgba(167, 139, 250, 0.32);
}

body.dark .ollie-choice-list li:hover,
body.dark .ollie-choice-list li:focus-visible {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.24), rgba(244, 114, 182, 0.17), rgba(14, 165, 233, 0.16));
  border-color: rgba(244, 114, 182, 0.56);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28), 0 0 22px rgba(167, 139, 250, 0.2);
}

body.dark .ollie-example {
  color: #cbd5e1;
}

.user-message {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  border-bottom-right-radius: 4px;
  box-shadow: 0 6px 16px rgba(116, 57, 246, 0.15);
}

.typing-indicator {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding-top: 4px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background-color: var(--muted);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px 16px;
  border-top: 2px solid rgba(116, 57, 246, 0.18);
  background: rgba(255, 255, 255, 0.46);
  backdrop-filter: blur(14px);
}

.chat-form input {
  min-height: 44px;
  border: 2px solid rgba(116, 57, 246, 0.24);
  border-radius: 24px;
  padding: 0 18px;
  outline: none;
  background: var(--surface-strong);
  color: var(--text);
  transition: all 0.2s ease;
}

.chat-form input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(116, 57, 246, 0.12);
}

.chat-form button {
  min-width: 80px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
}

.chat-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(116, 57, 246, 0.2);
}

.practice-panel {
  padding: 20px;
  overflow-y: auto;
}

.practice-panel h2 {
  font-size: 1.3rem;
  margin: 0 0 10px 0;
}

.tool-card {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  background: rgba(255,255,255,0.68);
  border: 2px solid rgba(116, 57, 246, 0.2);
  text-align: left;
}

.practice-panel .tool-card:nth-of-type(1) {
  background: linear-gradient(135deg, rgba(237,233,254,0.88), rgba(255,255,255,0.72));
  border-color: rgba(124,58,237,0.3);
}

.practice-panel .tool-card:nth-of-type(2) {
  background: linear-gradient(135deg, rgba(219,234,254,0.9), rgba(255,255,255,0.72));
  border-color: rgba(37,99,235,0.26);
}

.practice-panel .tool-card:nth-of-type(3) {
  background: linear-gradient(135deg, rgba(209,250,229,0.86), rgba(255,255,255,0.72));
  border-color: rgba(5,150,105,0.26);
}

.practice-panel .tool-card:nth-of-type(4) {
  background: linear-gradient(135deg, rgba(252,231,243,0.9), rgba(255,255,255,0.72));
  border-color: rgba(219,39,119,0.25);
}

.tool-card:hover,
.tool-card:focus-visible {
  border-color: rgba(116, 57, 246, 0.62);
}

.tool-card strong {
  display: block;
  font-size: 0.95rem;
}

.tool-card span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.feedback-card {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(116, 57, 246, 0.1), rgba(244, 74, 164, 0.06));
  border: 2px solid rgba(116, 57, 246, 0.2);
}

body.dark .tutor-layout .chat-panel,
body.dark .tutor-layout .practice-panel {
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body.dark .tutor-layout .chat-panel {
  background:
    linear-gradient(135deg, rgba(15,23,42,0.78), rgba(30,41,59,0.58)),
    radial-gradient(circle at 12% 12%, rgba(139,92,246,0.25), transparent 38%),
    radial-gradient(circle at 88% 20%, rgba(14,165,233,0.18), transparent 42%),
    radial-gradient(circle at 52% 92%, rgba(236,72,153,0.14), transparent 40%);
}

body.dark .tutor-layout .practice-panel {
  background:
    linear-gradient(145deg, rgba(15,23,42,0.78), rgba(30,41,59,0.56)),
    radial-gradient(circle at 10% 8%, rgba(139,92,246,0.24), transparent 42%),
    radial-gradient(circle at 92% 48%, rgba(14,165,233,0.16), transparent 45%),
    radial-gradient(circle at 22% 94%, rgba(16,185,129,0.12), transparent 38%);
}

body.dark .chat-header,
body.dark .chat-form {
  border-color: rgba(167, 139, 250, 0.28);
  background: rgba(15, 23, 42, 0.42);
}

body.dark .messages {
  background: linear-gradient(160deg, rgba(139,92,246,0.08), rgba(14,165,233,0.07) 52%, rgba(236,72,153,0.06));
}

body.dark .tutor-message {
  background: linear-gradient(135deg, rgba(30,41,59,0.92), rgba(49,46,129,0.38));
}

body.dark .tutor-message,
body.dark .tool-card,
body.dark .feedback-card,
body.dark .chat-form input {
  border-color: rgba(167, 139, 250, 0.34);
}

body.dark .practice-panel .tool-card:nth-of-type(1) {
  background: linear-gradient(135deg, rgba(91,33,182,0.32), rgba(30,41,59,0.7));
}

body.dark .practice-panel .tool-card:nth-of-type(2) {
  background: linear-gradient(135deg, rgba(30,64,175,0.3), rgba(30,41,59,0.7));
}

body.dark .practice-panel .tool-card:nth-of-type(3) {
  background: linear-gradient(135deg, rgba(5,150,105,0.24), rgba(30,41,59,0.7));
}

body.dark .practice-panel .tool-card:nth-of-type(4) {
  background: linear-gradient(135deg, rgba(190,24,93,0.25), rgba(30,41,59,0.7));
}

.feedback-card h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
}

.feedback-card p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Progress View Layout */
.progress-hero {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(280px, 420px);
  gap: 24px;
  align-items: center;
  min-height: 230px;
  overflow: hidden;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(116, 57, 246, 0.92), rgba(244, 74, 164, 0.75)),
    var(--surface-strong);
  color: white;
  border: 1px solid var(--gold-border) !important;
  box-shadow: 0 8px 30px var(--gold-glow);
}

body.dark .progress-hero {
  background:
    linear-gradient(135deg, rgba(30, 20, 80, 0.9), rgba(93, 26, 96, 0.75)),
    var(--surface-strong);
  border: 1px solid var(--gold-border) !important;
  box-shadow: 0 8px 30px var(--gold-glow);
}

.level-emblem {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffe066, #ffac1c);
  color: white;
  font-size: 2.2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--gold);
  box-shadow: 0 10px 28px var(--gold-glow);
}

.progress-hero h2 {
  font-size: 1.8rem;
  margin: 4px 0;
}

.progress-hero .progress-track {
  background: rgba(255, 255, 255, 0.22);
}

.progress-hero small {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.progress-london-banner {
  position: relative;
  width: 100%;
  height: 195px;
  border-radius: 16px;
  background: url('assets/hero-london.png') no-repeat center center;
  background-size: cover;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  transform: scale(1.03);
  transform-origin: center center;
}

body.dark .progress-london-banner {
  opacity: 0.8;
}

/* Metric Stats Grid */
.metric-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 20px;
}

.metric-grid article {
  padding: 16px;
  text-align: center;
}

.metric-grid span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(116, 57, 246, 0.08);
  color: var(--purple);
  font-size: 1.4rem;
}

.metric-grid strong {
  display: block;
  font-size: 1.6rem;
}

.metric-grid p {
  font-size: 0.8rem;
  margin-top: 4px;
}

.metric-grid small {
  display: block;
  margin-top: 10px;
  color: var(--purple);
  font-weight: 800;
  font-size: 0.72rem;
}

/* Achievements Grid */
.achievement-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.achievement-grid article {
  padding: 16px;
  text-align: center;
  transition: all 0.25s ease;
}

.achievement-grid article.unlocked {
  border-color: var(--gold-border);
  background: linear-gradient(135deg, var(--surface), var(--gold-pastel));
  box-shadow: 0 4px 15px var(--gold-glow);
}

.achievement-grid article.unlocked:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 28px var(--gold-glow), var(--shadow);
  border-color: var(--gold);
}

.achievement-grid article.unlocked span {
  background: var(--gold-pastel) !important;
  color: var(--gold) !important;
  border: 1.5px solid var(--gold-border) !important;
}

.achievement-grid article.unlocked strong {
  color: var(--gold-text);
}

.achievement-grid span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  font-size: 1.5rem;
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
}

.achievement-grid article.locked {
  filter: grayscale(1);
  opacity: 0.5;
  background: rgba(128, 138, 164, 0.06);
  border-style: dashed;
}

.achievement-grid h3 {
  font-size: 0.95rem;
  margin: 0 0 4px;
}

.achievement-grid p {
  font-size: 0.72rem;
  min-height: 38px;
  line-height: 1.3;
}

.achievement-grid strong {
  display: inline-block;
  margin-top: 8px;
  color: var(--purple);
  font-size: 0.85rem;
}

.achievement-grid article.locked strong {
  color: var(--muted);
}

/* Themes floating toggle button */
.theme-toggle {
  position: fixed;
  right: 28px;
  bottom: 24px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--gold-border);
  border-radius: 99px;
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: 0 8px 24px var(--gold-glow), var(--shadow-soft);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 12px 30px var(--gold-glow), var(--shadow);
}

.theme-toggle span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 193, 7, 0.14);
  color: #ffb300;
  font-size: 1rem;
}

body.dark .theme-toggle span {
  background: rgba(139, 77, 255, 0.17);
  color: #c09aff;
}

.theme-toggle strong {
  font-size: 0.85rem;
}

/* Toast System */
.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 3000;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 20px;
  border-radius: 99px;
  background: var(--surface-strong);
  color: var(--text);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}

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

/* Modals Core Styles */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(4, 8, 17, 0.45);
  backdrop-filter: blur(10px);
  animation: modalFadeIn 0.2s ease;
}

.modal.open {
  display: grid;
}

body.modal-open {
  overflow: hidden;
  touch-action: none;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  position: relative;
  width: min(540px, 100%);
  padding: 28px;
  animation: modalPopUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPopUp {
  from {
    transform: scale(0.92) translateY(12px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.modal-card .pill {
  color: var(--purple);
  background: rgba(116, 57, 246, 0.1);
  margin-bottom: 12px;
}

.modal-close,
.lesson-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 1.25rem;
}

.modal-close:hover,
.lesson-modal-close:hover {
  background: rgba(255, 76, 174, 0.1);
  color: var(--pink);
  border-color: var(--pink);
}

/* Modal Form Styles */
.modal-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-group label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
  min-height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  outline: none;
  background: var(--surface-strong);
  color: var(--text);
  width: 100%;
}

.form-group textarea {
  padding: 12px;
  resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(116, 57, 246, 0.1);
}

/* Quick Quiz Options */
.quiz-options {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.quiz-options button {
  min-height: 48px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--text);
  text-align: left;
  padding: 0 16px;
  font-weight: 700;
}

.quiz-options button:hover:not(:disabled) {
  background: rgba(116, 57, 246, 0.05);
  border-color: var(--purple);
}

.quiz-options button.correct {
  border-color: var(--green);
  background: rgba(43, 197, 109, 0.12);
  color: var(--green);
}

.quiz-options button.wrong {
  border-color: var(--pink);
  background: rgba(244, 74, 164, 0.1);
  color: var(--pink);
}

.quiz-result {
  min-height: 24px;
  margin-top: 14px;
  font-weight: 800;
  font-size: 0.95rem;
  text-align: center;
}

/* Dynamic Interactive Lesson Modals overlay */
.lesson-modal-card {
  width: min(820px, 95%);
  max-height: 90vh;
  overflow-y: auto;
}

/* Card Flip styles (Vocabulary lesson) */
.flashcard-deck {
  perspective: 1000px;
  width: min(100%, 340px);
  height: 220px;
  margin: 18px auto;
}

.flashcard {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.2);
  cursor: pointer;
}

.flashcard.flipped {
  transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}

.flashcard-front {
  background: var(--surface-strong);
  color: var(--text);
}

.flashcard-back {
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: #ffffff;
  transform: rotateY(180deg);
  border: 0;
}

.flashcard-front h3 {
  font-size: 2rem;
  margin: 0 0 6px;
  color: var(--purple);
}

.flashcard-front p {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}

.flashcard-back p {
  font-size: 1.25rem;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
}

.flashcard-back em {
  display: block;
  margin-top: 10px;
  font-size: 0.9rem;
  opacity: 0.85;
  font-style: italic;
}

.deck-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 320px;
  margin: 0 auto;
}

/* Audio waves (Listening / Speaking lessons) */
.audio-wave {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 52px;
  margin: 16px 0;
}

.audio-bar {
  width: 4px;
  height: 8px;
  background: linear-gradient(180deg, var(--purple), var(--pink));
  border-radius: 99px;
  transition: height 0.1s ease;
}

.audio-wave.active .audio-bar {
  animation: bounce-wave 0.6s ease-in-out infinite alternate;
}

.audio-wave.active .audio-bar:nth-child(2n) { animation-delay: 0.1s; }
.audio-wave.active .audio-bar:nth-child(3n) { animation-delay: 0.25s; }
.audio-wave.active .audio-bar:nth-child(4n) { animation-delay: 0.05s; }
.audio-wave.active .audio-bar:nth-child(5n) { animation-delay: 0.3s; }

@keyframes bounce-wave {
  from { height: 8px; }
  to { height: 42px; }
}

/* Level Up Card */
.level-up-card {
  text-align: center;
  width: min(440px, 95%);
  padding: 36px 28px;
}

.level-up-graphic {
  font-size: 4rem;
  margin-bottom: 12px;
  animation: spinGlow 1.8s ease-in-out infinite alternate;
  display: inline-block;
}

@keyframes spinGlow {
  0% {
    transform: scale(0.9) rotate(-10deg);
    filter: drop-shadow(0 0 10px rgba(255, 205, 35, 0.4));
  }
  100% {
    transform: scale(1.1) rotate(10deg);
    filter: drop-shadow(0 0 25px rgba(255, 205, 35, 0.85));
  }
}

.level-up-card h2 {
  font-size: 2.2rem;
  margin: 0;
  background: linear-gradient(135deg, #ffd13b, var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.congrats-text {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 12px 0 6px;
}

/* Certificate Modal Styles */
/* Certificate Modal Styles */
.certificate-modal-card {
  width: min(720px, 95%);
  padding: 24px;
  background: var(--surface-strong);
  border-radius: 28px;
}

.certificate-border {
  border: 10px double #d4af37;
  padding: 32px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fffdf8, #fff9e6);
  color: #2b2b2b;
  position: relative;
  box-shadow: inset 0 0 40px rgba(212, 175, 55, 0.2), 0 10px 30px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.cert-header-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}

.cert-gold-star {
  font-size: 2.2rem;
  color: #d4af37;
  filter: drop-shadow(0 4px 8px rgba(212, 175, 55, 0.4));
}

.cert-brand {
  font-size: 1.25rem;
  color: #7439f6;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}

.cert-title {
  font-size: 2.1rem;
  color: #1c2d5a;
  margin: 8px 0 4px;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.cert-subtext {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 6px;
}

.student-name {
  font-size: 2.1rem;
  color: #7439f6;
  margin: 8px 0 12px;
  border-bottom: 2.5px solid #d4af37;
  display: inline-block;
  padding: 0 40px 6px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
}

.cert-desc {
  max-width: 520px;
  margin: 0 auto 18px;
  line-height: 1.55;
  font-size: 0.88rem;
  color: #444;
}

.cert-gold-seal-wrapper {
  margin: 12px 0 18px;
  display: flex;
  justify-content: center;
}

.cert-gold-seal {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d4af37);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.4), inset 0 0 0 3px rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #1e1b4b;
}

.seal-star {
  font-size: 0.75rem;
  color: #ffffff;
  letter-spacing: 1px;
}

.seal-text {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffffff;
  margin-top: 2px;
}

.cert-footer {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding: 0 10px;
}

.cert-sig,
.cert-date {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cert-sig strong,
.cert-date strong {
  font-size: 0.9rem;
  color: #1c2d5a;
  border-bottom: 1px solid #cccccc;
  width: 120px;
  padding-bottom: 4px;
}

.cert-sig span,
.cert-date span {
  font-size: 0.72rem;
  color: #888888;
  margin-top: 4px;
}

.cert-code-display {
  margin-top: 20px;
  font-size: 0.75rem;
  color: #777;
  font-family: monospace;
  letter-spacing: 0.5px;
}

.print-btn {
  margin-top: 16px;
  width: 100%;
}

/* Interactive Lesson elements inside container */
.interactive-container {
  --skill-accent: #7439f6;
  --skill-soft: rgba(116, 57, 246, .09);
  text-align: center;
  padding: 10px 0;
}

.interactive-container[data-skill-experience="vocabulary"] { --skill-accent: #1d75d2; --skill-soft: rgba(29,117,210,.1); }
.interactive-container[data-skill-experience="grammar"] { --skill-accent: #15965a; --skill-soft: rgba(21,150,90,.1); }
.interactive-container[data-skill-experience="reading"] { --skill-accent: #d18100; --skill-soft: rgba(209,129,0,.1); }
.interactive-container[data-skill-experience="listening"] { --skill-accent: #7c3aed; --skill-soft: rgba(124,58,237,.1); }
.interactive-container[data-skill-experience="speaking"] { --skill-accent: #df2e7b; --skill-soft: rgba(223,46,123,.1); }
.interactive-container[data-skill-experience="writing"] { --skill-accent: #087f78; --skill-soft: rgba(8,127,120,.1); }

.skill-experience-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: -2px 0 20px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--skill-accent) 28%, var(--line));
  border-radius: 8px;
  background: linear-gradient(120deg, var(--skill-soft), rgba(255,255,255,.6));
  text-align: left;
}

.skill-format-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--skill-accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
}

.skill-experience-copy { display: grid; gap: 3px; min-width: 0; }
.skill-experience-copy small { color: var(--muted); font-size: .72rem; font-weight: 700; }
.skill-experience-copy strong { color: var(--text); font-size: 1rem; }

.skill-level-switcher {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-strong);
}
.skill-level-switcher button {
  min-width: 34px;
  height: 32px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
}
.skill-level-switcher button:hover { color: var(--skill-accent); background: var(--skill-soft); }
.skill-level-switcher button.active { background: var(--skill-accent); color: #fff; }

body.dark .skill-experience-head {
  background: linear-gradient(120deg, var(--skill-soft), rgba(15,23,42,.72));
}

.interactive-container p.instructions {
  font-size: 1rem;
  margin-bottom: 16px;
  font-weight: 600;
}

.bilingual-lesson-grid,
.bilingual-vocabulary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
  text-align: left;
}

.bilingual-panel,
.vocabulary-language {
  position: relative;
  min-width: 0;
  padding: 20px;
}
.bilingual-panel + .bilingual-panel,
.vocabulary-language + .vocabulary-language { border-left: 1px solid var(--line); }
.bilingual-panel.language-es,
.vocabulary-language.language-es { background: linear-gradient(145deg, rgba(255,244,229,.82), rgba(255,255,255,.36)); }
.bilingual-panel.language-en,
.vocabulary-language.language-en { background: linear-gradient(145deg, rgba(225,244,255,.82), rgba(255,255,255,.36)); }
.language-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  color: #fff;
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
}
.language-es .language-tag { background: #d9480f; }
.language-en .language-tag { background: #1565c0; }
.bilingual-panel h3,
.vocabulary-language h3 { margin: 0 0 8px; color: var(--text); font-size: 1.2rem; line-height: 1.2; }
.bilingual-panel p,
.vocabulary-language p { margin: 0; color: var(--text); font-size: .9rem; line-height: 1.55; }
.bilingual-panel small,
.vocabulary-language small { display: block; margin-top: 10px; color: var(--muted); font-weight: 700; line-height: 1.45; }

.bilingual-vocabulary-card { min-height: 246px; }
.vocabulary-language { display: flex; flex-direction: column; justify-content: center; }
.vocabulary-language h3 { font-size: clamp(1.55rem, 4vw, 2.15rem); }
.vocabulary-language.language-en h3 { color: #1565c0; }
.vocabulary-language.language-es h3 { color: #b9380c; }
.vocabulary-language em { display: block; margin-top: 14px; color: var(--muted); line-height: 1.5; }
.question-language {
  display: block;
  margin-bottom: 5px;
  color: var(--purple);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

body.dark .bilingual-panel.language-es,
body.dark .vocabulary-language.language-es { background: linear-gradient(145deg, rgba(108,42,12,.3), rgba(15,23,42,.42)); }
body.dark .bilingual-panel.language-en,
body.dark .vocabulary-language.language-en { background: linear-gradient(145deg, rgba(13,65,110,.34), rgba(15,23,42,.42)); }

.interactive-choices,
.quiz-choices {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.interactive-choices button,
.quiz-choices button {
  min-height: 48px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--text);
  font-weight: 700;
  padding: 0 16px;
}

.interactive-choices button:hover:not(:disabled),
.quiz-choices button:hover:not(:disabled) {
  background: rgba(116, 57, 246, 0.05);
  border-color: var(--purple);
}

.interactive-choices button.correct,
.quiz-choices button.correct {
  border-color: var(--green);
  background: rgba(43, 197, 109, 0.12);
  color: var(--green);
}

.interactive-choices button.wrong,
.quiz-choices button.wrong {
  border-color: var(--pink);
  background: rgba(244, 74, 164, 0.1);
  color: var(--pink);
}

.dictation-input-row,
.writing-input-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.dictation-input-row input,
.writing-input-row textarea {
  min-height: 48px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 16px;
  outline: none;
  background: var(--surface-strong);
  color: var(--text);
}

.writing-input-row textarea {
  min-height: 100px;
}

.dictation-input-row input:focus,
.writing-input-row textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(116, 57, 246, 0.12);
}

.speaking-text-card {
  background: var(--surface-strong);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 16px auto;
  max-width: 440px;
  color: var(--purple);
}

.speaking-record-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: white;
  font-size: 1.8rem;
  box-shadow: 0 8px 24px rgba(116, 57, 246, 0.3);
  margin: 12px auto;
}

.speaking-record-btn.recording {
  background: linear-gradient(135deg, var(--pink), #f44a86);
  animation: pulseRecording 1.2s infinite alternate;
  box-shadow: 0 8px 24px rgba(244, 74, 164, 0.4);
}

@keyframes pulseRecording {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.lesson-feedback-box {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(116, 57, 246, 0.08);
  font-weight: 700;
  text-align: center;
}

.lesson-feedback-box.success {
  background: rgba(43, 197, 109, 0.1);
  color: var(--green);
}

.lesson-feedback-box.error {
  background: rgba(244, 74, 164, 0.08);
  color: var(--pink);
}

/* Print Certificate Specific Override */
@media print {
  body * {
    visibility: hidden;
  }
  #certificateModal,
  #certificateModal *,
  .certificate-border,
  .certificate-border * {
    visibility: visible;
  }
  #certificateModal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: transparent;
    display: block;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
  }
  .certificate-modal-card {
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .print-btn,
  .modal-close {
    display: none !important;
  }
}

/* Responsiveness media queries */
@media (max-width: 1180px) {
  .topic-grid,
  .course-grid.compact,
  .metric-grid,
  .achievement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-grid.full {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .upcoming-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .stats-strip div + div {
    border-left: 0;
  }
}

/* Mobile Header & Hamburger Navigation Toggle */
.brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mobile-menu-toggle:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.mobile-menu-toggle:active {
  transform: scale(0.94);
}

.brand {
  transition: transform 0.2s ease;
}

.brand:hover {
  transform: scale(1.03);
}

@media (max-width: 960px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 999;
    height: auto;
    padding: 12px 16px;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .level-card {
    margin-top: 10px;
  }

  .nav-list {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 14px;
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(20, 14, 40, 0.96), rgba(45, 18, 75, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    animation: mobileMenuSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .sidebar.mobile-menu-open .nav-list {
    display: grid;
  }

  .desktop-admin-nav {
    display: none !important;
  }

  .nav-list .mobile-admin-nav {
    display: flex;
    grid-column: 1 / -1;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }

  .nav-item {
    justify-content: flex-start;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF !important;
    transition: all 0.2s ease;
  }

  .nav-item:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .nav-item.active {
    background: linear-gradient(135deg, #7439F6, #F44AA4) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(116, 57, 246, 0.5);
  }

  .nav-item span:last-child {
    display: inline-block !important;
    font-size: 0.9rem;
    font-weight: 700;
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  .nav-item .nav-icon svg {
    stroke: #FFFFFF !important;
  }

  .coach-card,
  .sidebar-stats {
    display: none;
  }

  .hero-card,
  .lesson-layout,
  .calendar-layout,
  .tutor-layout,
  .progress-hero {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-image {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    margin-top: 18px;
    transform: none;
  }

  .progress-london-banner {
    display: none;
  }
}

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

@media (max-width: 680px) {
  .main-content {
    padding: 18px 12px 90px;
  }

  .brand-logo {
    height: 38px;
    width: 120px;
  }

  .level-card {
    padding: 12px;
  }

  .hero-card {
    padding: 18px;
  }

  .hero-card h1,
  .page-title h1,
  .progress-hero h2,
  .lesson-focus h2 {
    font-size: 1.8rem;
  }

  .page-title,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-title button,
  .section-heading button {
    margin-top: 8px;
  }

  .primary-btn,
  .ghost-btn {
    width: 100%;
    justify-content: center;
  }

  .topic-grid,
  .course-grid.compact,
  .course-grid.full,
  .metric-grid,
  .achievement-grid,
  .upcoming-grid,
  .stats-strip {
    grid-template-columns: 1fr;
  }

  .event-row {
    grid-template-columns: 40px 1fr;
  }

  .event-row em {
    width: fit-content;
  }

  .calendar-grid span,
  .calendar-grid button {
    min-height: 44px;
    font-size: 0.75rem;
  }

  .chat-panel {
    min-height: 460px;
    max-height: 460px;
  }

  .message {
    max-width: 90%;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }

  .theme-toggle {
    right: 16px;
    bottom: 16px;
  }
}

/* Specific Gold Progress Fills */
.progress-hero .progress-track span,
.daily-card .progress-track span {
  background: linear-gradient(90deg, #ffe066, #ffac1c) !important;
  box-shadow: 0 0 10px rgba(255, 172, 28, 0.4);
}

/* Calendar Screen Specific Violet + Gold enhancements */
.calendar-card,
.agenda-card {
  border: 1.5px solid var(--gold-border) !important;
  background: linear-gradient(135deg, var(--surface), rgba(116, 57, 246, 0.05)) !important;
  box-shadow: 0 8px 30px var(--gold-glow), 0 4px 15px rgba(116, 57, 246, 0.04) !important;
}

.calendar-head h2 {
  color: var(--purple) !important;
  font-weight: 800;
  text-shadow: 0 1px 2px var(--gold-glow);
}

/* Premium Accent Styles for Lesson Cards */
.course-card.blue .mini-bar span {
  background: linear-gradient(90deg, var(--blue), hsl(210, 100%, 70%)) !important;
}
.course-card.green .mini-bar span {
  background: linear-gradient(90deg, var(--green), hsl(140, 100%, 70%)) !important;
}
.course-card.amber .mini-bar span {
  background: linear-gradient(90deg, var(--amber), hsl(45, 100%, 70%)) !important;
}
.course-card.purple .mini-bar span {
  background: linear-gradient(90deg, var(--purple), hsl(280, 100%, 75%)) !important;
}
.course-card.pink .mini-bar span {
  background: linear-gradient(90deg, var(--pink), hsl(330, 100%, 75%)) !important;
}
.course-card.teal .mini-bar span {
  background: linear-gradient(90deg, var(--teal), hsl(180, 100%, 70%)) !important;
}

/* Card buttons specific styling */
.course-card.blue button { color: var(--blue); }
.course-card.green button { color: var(--green); }
.course-card.amber button { color: var(--amber); }
.course-card.purple button { color: var(--purple); }
.course-card.pink button { color: var(--pink); }
.course-card.teal button { color: var(--teal); }

.course-card button:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* ==========================================
   DUOLINGO 2.0 GAMIFIED LEARNING PATH & HERO
   ========================================== */

/* Level View Base Containers */
#level-basic, #level-intermediate, #level-advanced {
  position: relative;
  border-radius: 28px;
  padding: 24px clamp(16px, 3vw, 32px) 48px;
  margin-top: -16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}

/* Light Mode Backgrounds */
#level-basic {
  background: radial-gradient(circle at 10% 15%, rgba(209, 250, 229, 0.7) 0%, transparent 60%),
              radial-gradient(circle at 90% 85%, rgba(254, 243, 199, 0.7) 0%, transparent 60%),
              #F6F7FB;
}
#level-intermediate {
  background: radial-gradient(circle at 10% 15%, rgba(254, 243, 199, 0.7) 0%, transparent 60%),
              radial-gradient(circle at 90% 85%, rgba(252, 231, 243, 0.7) 0%, transparent 60%),
              #F6F7FB;
}
#level-advanced {
  background: 
    radial-gradient(circle at 15% 20%, rgba(91, 33, 182, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(131, 24, 67, 0.35) 0%, transparent 55%),
    linear-gradient(180deg, #161338 0%, #2D1065 32%, #3B0764 68%, #4D071E 100%);
  color: #FFFFFF;
  border: 1px solid rgba(167, 139, 250, 0.2);
  box-shadow: inset 0 0 60px rgba(15, 10, 35, 0.5);
}

/* Dark Mode Canvas */
body.dark #level-basic,
body.dark #level-intermediate {
  background: radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.15) 0%, transparent 60%),
              radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 60%),
              #0A0A12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);
}

body.dark #level-advanced {
  background: 
    radial-gradient(circle at 15% 20%, rgba(91, 33, 182, 0.45) 0%, transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(131, 24, 67, 0.45) 0%, transparent 55%),
    linear-gradient(180deg, #0F0C29 0%, #1A0938 32%, #260542 68%, #360415 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Advanced Level Harmonized Indigo-Violet Theme Adjustments */
#level-advanced .path-center-line {
  background-image: repeating-linear-gradient(
    to bottom,
    #C084FC 0px,
    #C084FC 8px,
    transparent 8px,
    transparent 16px
  );
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.5);
}

#level-advanced .subtabs-pill {
  background: rgba(24, 21, 56, 0.75);
  border: 1px solid rgba(167, 139, 250, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

#level-advanced .subtab-btn {
  color: #E9D5FF;
}

#level-advanced .subtab-btn.active {
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.45);
}

#level-advanced .subtab-btn:hover:not(.active) {
  background: rgba(167, 139, 250, 0.18);
  color: #F5F3FF;
}

#level-advanced .end-path-card {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.8), rgba(131, 24, 67, 0.8));
  border: 2px dashed #F472B6;
  color: #FFFFFF;
  box-shadow: 0 12px 32px rgba(15, 10, 35, 0.6);
}

#level-advanced .end-path-card h2 {
  color: #F472B6;
}

#level-advanced .end-path-card p {
  color: #F5F3FF;
}

#level-advanced .end-path-card .next-level-btn {
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5);
}

/* Decorative Background Elements */
.path-bg-decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.bg-cloud {
  position: absolute;
  font-size: 2.2rem;
  opacity: 0.35;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
  animation: cloudFloat 22s ease-in-out infinite alternate;
}
.bg-cloud-1 { top: 18%; left: 4%; animation-delay: 0s; }
.bg-cloud-2 { top: 62%; right: 5%; animation-delay: -9s; }
.bg-star {
  position: absolute;
  font-size: 1.4rem;
  opacity: 0.6;
  animation: starTwinkle 3s ease-in-out infinite alternate;
}
.bg-star-1 { top: 32%; right: 8%; animation-delay: 0.5s; }
.bg-star-2 { top: 78%; left: 7%; animation-delay: 1.8s; }
.bg-leaf {
  position: absolute;
  font-size: 1.8rem;
  opacity: 0.4;
  top: 48%; left: 3%;
  transform: rotate(-15deg);
}
.bg-sun {
  position: absolute;
  top: 6%; right: 4%;
  font-size: 2.5rem;
  opacity: 0.5;
  animation: sunPulse 4s ease-in-out infinite alternate;
}

@keyframes cloudFloat {
  0% { transform: translateX(0px) translateY(0px); }
  100% { transform: translateX(35px) translateY(-12px); }
}
@keyframes starTwinkle {
  0% { transform: scale(0.9); opacity: 0.4; }
  100% { transform: scale(1.2); opacity: 0.9; }
}
@keyframes sunPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.12); }
}

/* HERO SECTION CARDS */
.level-hero-card {
  position: relative;
  z-index: 2;
  border-radius: 24px;
  padding: 32px clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: center;
  gap: 24px;
  box-shadow: 0 12px 36px rgba(124, 58, 237, 0.12);
  margin-bottom: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.hero-basic {
  background: linear-gradient(135deg, #D1FAE5, #A7F3D0, #FEF3C7);
  color: #0F172A;
}
.hero-medium {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A, #FCE7F3);
  color: #0F172A;
}
.hero-advanced {
  background: linear-gradient(135deg, #1E1B4B, #5B21B6, #831843);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark .hero-basic {
  background: linear-gradient(135deg, #064E3B, #047857, #78350F);
  color: #F8FAFC;
}
body.dark .hero-medium {
  background: linear-gradient(135deg, #78350F, #92400E, #831843);
  color: #F8FAFC;
}
body.dark .hero-advanced {
  background: linear-gradient(135deg, #0F172A, #4C1D95, #701A75);
  color: #F8FAFC;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7C3AED;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.hero-advanced .hero-eyebrow {
  background: rgba(255, 255, 255, 0.18);
  color: #FCD34D;
}

.hero-title {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.hero-subtitle {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.88;
  max-width: 520px;
  margin: 0;
}

.hero-progress-wrapper {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.hero-progress-track {
  height: 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}
.hero-advanced .hero-progress-track {
  background: rgba(255, 255, 255, 0.2);
}

.hero-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7C3AED, #EC4899);
  position: relative;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.hero-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: shimmerProgress 2.5s infinite;
}

@keyframes shimmerProgress {
  100% { left: 100%; }
}

.hero-actions {
  margin-top: 8px;
}

.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0F172A;
  color: #FFFFFF;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  transition: all 0.25s ease;
}
.hero-advanced .hero-cta-btn {
  background: #FFFFFF;
  color: #1E1B4B;
}

.hero-cta-btn:hover {
  transform: scale(1.04) translateY(-2px);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.35);
}
.hero-cta-btn:active {
  transform: scale(0.97);
}

/* Hero Mascot Column */
.hero-mascot-col {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero-ollie-svg {
  width: 180px;
  height: 180px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
  animation: heroOllieFloat 3s ease-in-out infinite alternate;
}

@keyframes heroOllieFloat {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-10px) rotate(2deg); }
}

/* SUB-TABS NAVIGATION */
.level-subtabs-container {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
  position: relative;
  z-index: 2;
}

.subtabs-pill {
  display: inline-flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
body.dark .subtabs-pill {
  background: rgba(19, 19, 31, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.subtab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-muted, #64748B);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.subtab-btn .tab-code {
  font-weight: 800;
  font-size: 0.82rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
}
body.dark .subtab-btn .tab-code {
  background: rgba(255, 255, 255, 0.1);
}

.subtab-btn.active {
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}
.subtab-btn.active .tab-code {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.subtab-btn:hover:not(.active) {
  background: rgba(124, 58, 237, 0.08);
  color: #7C3AED;
}

/* DUOLINGO SERPENTINE PATH CONTAINER */
.duo-path-container {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 20px 0 40px;
  z-index: 2;
}

/* Vertical Central Dashed Line */
.path-center-line {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  background-image: repeating-linear-gradient(
    to bottom,
    #7C3AED 0px,
    #7C3AED 8px,
    transparent 8px,
    transparent 16px
  );
  border-radius: 6px;
  z-index: 1;
  opacity: 0.8;
  animation: marching-ants 20s linear infinite;
}

@keyframes marching-ants {
  0% { background-position: 0 0; }
  100% { background-position: 0 160px; }
}

/* Path Rows Grid Layout */
.path-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

.path-row.row-left .path-card-col { grid-column: 1; justify-self: end; }
.path-row.row-left .path-marker-col { grid-column: 2; justify-self: center; }
.path-row.row-left .path-decor-col { grid-column: 3; justify-self: start; }

.path-row.row-right .path-card-col { grid-column: 3; justify-self: start; }
.path-row.row-right .path-marker-col { grid-column: 2; justify-self: center; }
.path-row.row-right .path-decor-col { grid-column: 1; justify-self: end; }

/* NODE MARKER DESIGN */
.node-marker {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.node-marker.status-active {
  background: #FFFFFF;
  border: 4px solid #7C3AED;
  box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.2), 0 4px 12px rgba(124, 58, 237, 0.4);
}
.node-marker.status-active .marker-icon {
  font-size: 10px;
  color: #7C3AED;
  margin-left: 2px;
}
.node-marker.status-active .marker-pulse {
  position: absolute;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
  border-radius: 50%;
  border: 2px solid #7C3AED;
  animation: markerPulse 2s infinite;
}

@keyframes markerPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

.node-marker.status-completed {
  background: linear-gradient(135deg, #10B981, #059669);
  border: 3px solid #FFFFFF;
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.node-marker.status-locked {
  background: #CBD5E1;
  border: 3px solid #F1F5F9;
  color: #64748B;
}
body.dark .node-marker.status-locked {
  background: #334155;
  border: 3px solid #1E293B;
  color: #94A3B8;
}

/* ============================================================================
   CAMINO CON FIGURAS GEOMÉTRICAS 3D (Basic = cubo, Intermediate = rombo,
   Advanced = esfera) — pedido explícito de Iker, estilo minimalista tipo
   Duolingo. Cada figura es el nodo completo de la lección: al tocarla se abre
   una tarjeta (#pathNodeModal) con el detalle, en vez de la tarjeta grande
   que había antes siempre visible en el camino.
   ========================================================================= */

.path-row.geo-row,
.path-row:has(.geo-node) {
  grid-template-columns: 1fr auto 1fr;
  min-height: 142px;
}
.path-row:has(.geo-node) .path-marker-col { grid-column: 2; justify-self: center; }

.path-marker-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.geo-node {
  --geo-glow: rgba(255, 196, 32, .42);
  --geo-ring: rgba(255, 255, 255, .72);
  position: relative;
  width: 116px;
  height: 108px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  perspective: 900px;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s cubic-bezier(.2, .9, .25, 1.35), filter .25s ease;
}
.geo-node::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 19%;
  right: 19%;
  bottom: 3px;
  height: 15px;
  border-radius: 50%;
  background: rgba(15, 23, 42, .3);
  filter: blur(8px);
  opacity: .62;
  transform: scaleX(.92);
  transition: transform .25s ease, opacity .25s ease;
}
.geo-node:hover:not(.status-locked) { transform: translateY(-6px) scale(1.045); }
.geo-node:hover:not(.status-locked)::after { transform: scaleX(.72); opacity: .42; }
.geo-node:active:not(.status-locked) { transform: translateY(-1px) scale(.97); }
.geo-node:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 50%;
  box-shadow: 0 0 0 7px var(--geo-glow);
}
.geo-node.status-locked { filter: saturate(.2); }

.geo-shape {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 78px;
  transform-style: preserve-3d;
  transform: translate(-50%, -52%) var(--shape-tilt, rotateX(-14deg) rotateY(28deg));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}
.geo-node:hover:not(.status-locked) .geo-shape {
  transform: translate(-50%, -55%) var(--shape-hover, rotateX(-20deg) rotateY(42deg)) scale(1.04);
}

.geo-face {
  position: absolute;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.geo-face::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.08) 44%, transparent 70%);
  opacity: .72;
  pointer-events: none;
}

.geo-icon {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: #171717;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -57%);
  box-shadow: 0 7px 16px rgba(15,23,42,.25), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.geo-node.status-active .geo-icon { color: #111827; }
.geo-node.status-completed .geo-icon { background: rgba(240,253,244,.9); color: #087F5B; }
.geo-node.status-locked .geo-icon {
  background: rgba(226,232,240,.78);
  border-color: rgba(255,255,255,.45);
  color: #64748B;
  box-shadow: 0 6px 12px rgba(15,23,42,.18);
}

.geo-symbol {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  color: currentColor;
}
.geo-symbol-play {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
}
.geo-symbol-check::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 11px;
  height: 6px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(-45deg);
}
.geo-symbol-lock::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 11px;
  height: 9px;
  border-radius: 3px;
  background: currentColor;
}
.geo-symbol-lock::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 7px;
  height: 9px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}
.geo-symbol-exam {
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 34%, 98% 34%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 34%, 39% 34%);
}

.geo-pulse {
  position: absolute;
  z-index: -1;
  inset: 7px 10px 9px;
  border: 1px solid transparent;
  border-radius: 50%;
  box-shadow: 0 0 30px 5px var(--geo-glow);
  pointer-events: none;
  animation: geoGlassPulse 1.9s ease-out infinite;
}

@keyframes geoGlassPulse {
  0% { opacity: .82; transform: scale(.78); }
  72%, 100% { opacity: 0; transform: scale(1.18); }
}

.geo-caption {
  min-width: 84px;
  margin-top: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}
.geo-caption small {
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: .58rem;
  font-weight: 900;
}

/* ── Cubo 3D Realista (Basic Level - A1/A2) ───────────────────────────── */
.shape-cube {
  --geo-glow: rgba(245, 158, 11, 0.65);
}

.shape-cube .geo-shape {
  width: 88px;
  height: 98px;
  transform-style: preserve-3d;
  transform: translate(-50%, -54%) rotate(-1deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  filter: drop-shadow(0 22px 18px rgba(146, 64, 14, 0.44));
}

.shape-cube:hover:not(.status-locked) .geo-shape {
  transform: translate(-50%, -60%) rotate(2deg) scale(1.08);
}

.shape-cube .geo-face {
  position: absolute;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .88),
    inset -9px -10px 20px rgba(120, 53, 15, .16);
  backface-visibility: hidden;
  clip-path: none;
}

.shape-cube .geo-face-front {
  left: 0;
  top: 16px;
  width: 68px;
  height: 80px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.82), transparent 24%),
    linear-gradient(138deg, #fde68a 0%, #fbbf24 35%, #f59e0b 68%, #b45309 100%);
  clip-path: polygon(0 0, 100% 16%, 100% 100%, 0 84%);
  transform: translateZ(22px);
}
.shape-cube .geo-face-top {
  left: 0;
  top: 0;
  width: 88px;
  height: 30px;
  background: linear-gradient(145deg, #fffdf0 0%, #fef3c7 34%, #fde047 72%, #eab308 100%);
  clip-path: polygon(23% 0, 100% 48%, 77% 100%, 0 53%);
  transform: translateZ(24px);
}
.shape-cube .geo-face-side {
  left: 68px;
  top: 15px;
  width: 20px;
  height: 81px;
  background: linear-gradient(150deg, #f59e0b 0%, #d97706 52%, #78350f 100%);
  clip-path: polygon(100% 0, 100% 84%, 0 100%, 0 16%);
  transform: translateZ(23px);
}
.shape-cube .geo-face-back,
.shape-cube .geo-face-left,
.shape-cube .geo-face-bottom { display: none; }

.shape-cube .geo-icon {
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(42px);
  z-index: 10;
}

.shape-cube.status-locked .geo-face-front { background: linear-gradient(135deg, #cbd5e1, #64748b); }
.shape-cube.status-locked .geo-face-top { background: linear-gradient(135deg, #f8fafc, #cbd5e1); }
.shape-cube.status-locked .geo-face-side { background: linear-gradient(135deg, #64748b, #334155); }

.shape-cube.status-completed .geo-face-front { background: linear-gradient(135deg, #86efac, #16a34a); }
.shape-cube.status-completed .geo-face-top { background: linear-gradient(135deg, #f0fdf4, #4ade80); }
.shape-cube.status-completed .geo-face-side { background: linear-gradient(135deg, #16a34a, #15803d); }

/* ── Rombo/Octaedro 3D Realista (Intermediate Level - B1/B2) ────────── */
.shape-rhombus {
  --geo-glow: rgba(239, 68, 68, 0.65);
}

.shape-rhombus .geo-shape {
  width: 72px;
  height: 72px;
  transform-style: preserve-3d;
  transform: translate(-50%, -52%) rotateX(-15deg) rotateY(25deg) rotateZ(45deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  filter: drop-shadow(0 18px 16px rgba(153, 27, 27, 0.45));
}

.shape-rhombus:hover:not(.status-locked) .geo-shape {
  transform: translate(-50%, -56%) rotateX(-22deg) rotateY(38deg) rotateZ(45deg) scale(1.1);
}

.shape-rhombus .geo-face {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  border: 1.5px solid rgba(254, 202, 202, 0.7);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.4), 0 0 15px rgba(239, 68, 68, 0.3);
  backface-visibility: hidden;
  clip-path: none;
}

.shape-rhombus .geo-face-front {
  background: conic-gradient(from 45deg, #7f1d1d, #ef4444, #fca5a5, #dc2626, #7f1d1d);
  transform: translateZ(36px);
}
.shape-rhombus .geo-face-top {
  background: linear-gradient(135deg, #fecaca 0%, #ef4444 60%, #991b1b 100%);
  transform: rotateX(90deg) translateZ(36px);
}
.shape-rhombus .geo-face-side {
  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 60%, #450a0a 100%);
  transform: rotateY(90deg) translateZ(36px);
}
.shape-rhombus .geo-face-back {
  background: linear-gradient(135deg, #7f1d1d 0%, #18181b 100%);
  transform: rotateY(180deg) translateZ(36px);
}

.shape-rhombus .geo-icon {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(40px);
  z-index: 10;
}

.shape-rhombus.status-locked .geo-face-front { background: conic-gradient(from 45deg, #334155, #94a3b8, #cbd5e1, #64748b, #334155); }
.shape-rhombus.status-completed .geo-face-front { background: conic-gradient(from 45deg, #064e3b, #22c55e, #86efac, #15803d, #064e3b); }

/* ── Esfera Mística 3D Realista (Advanced Level - C1/C2) ─────────────── */
.shape-sphere {
  --geo-glow: rgba(168, 85, 247, 0.65);
}

.shape-sphere .geo-shape {
  width: 78px;
  height: 78px;
  transform-style: preserve-3d;
  transform: translate(-50%, -52%) rotateX(10deg) rotateY(-15deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  filter: drop-shadow(0 20px 18px rgba(76, 29, 149, 0.45));
}

.shape-sphere:hover:not(.status-locked) .geo-shape {
  transform: translate(-50%, -56%) rotateX(-5deg) rotateY(20deg) scale(1.1);
}

.shape-sphere .geo-face.geo-face-front {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f0abfc 18%, #a855f7 44%, #6b21a8 75%, #2e1065 100%);
  box-shadow: inset -12px -14px 28px rgba(15, 3, 38, 0.75), inset 9px 9px 18px rgba(255, 255, 255, 0.65), 0 0 30px rgba(168, 85, 247, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  backface-visibility: hidden;
}

.shape-sphere .geo-icon {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(42px);
  z-index: 10;
}
.shape-sphere .geo-pulse { inset: 6px 9px 10px; border-radius: 50%; }

/* Respuesta física: cada sólido reacciona según su forma antes de abrirse. */
.geo-node.is-pressing { pointer-events: none; }
.geo-node.is-pressing .geo-icon { animation: geoIconPress .48s cubic-bezier(.22,.9,.28,1); }
.geo-node.is-pressing::after { animation: geoShadowPress .48s ease; }
.geo-node.shape-cube.is-pressing .geo-shape { animation: geoCubePress .48s cubic-bezier(.22,.9,.28,1); }
.geo-node.shape-rhombus.is-pressing .geo-shape { animation: geoRhombusPress .48s cubic-bezier(.22,.9,.28,1); }
.geo-node.shape-sphere.is-pressing .geo-shape { animation: geoSpherePress .48s cubic-bezier(.22,.9,.28,1); }

@keyframes geoCubePress {
  0%, 100% { transform: translate(-50%, -54%) rotate(-1deg) scale(1); }
  38% { transform: translate(-50%, -47%) rotate(-6deg) scaleX(1.04) scaleY(.84); }
  72% { transform: translate(-50%, -62%) rotate(3deg) scale(.98, 1.1); }
}
@keyframes geoRhombusPress {
  0%, 100% { transform: translate(-50%, -52%) rotateZ(0) scale(1); }
  38% { transform: translate(-50%, -47%) rotateX(15deg) rotateY(-9deg) rotateZ(-17deg) scale(.84); }
  72% { transform: translate(-50%, -57%) rotateX(-5deg) rotateY(5deg) rotateZ(8deg) scale(1.09); }
}
@keyframes geoSpherePress {
  0%, 100% { transform: translate(-50%, -52%) rotateX(3deg) rotateY(-7deg) scale(1); }
  34% { transform: translate(-50%, -43%) rotateX(12deg) rotateY(14deg) scaleX(1.08) scaleY(.76); }
  68% { transform: translate(-50%, -60%) rotateX(-8deg) rotateY(-15deg) scaleX(.92) scaleY(1.14); }
}
@keyframes geoIconPress {
  0%, 100% { transform: translate(-50%, -57%) scale(1); }
  38% { transform: translate(-50%, -48%) scale(.84); }
  72% { transform: translate(-50%, -63%) scale(1.12); }
}
@keyframes geoShadowPress {
  0%, 100% { transform: scaleX(.92); opacity: .62; }
  38% { transform: scaleX(1.08); opacity: .78; }
  72% { transform: scaleX(.62); opacity: .34; }
}

body.dark .geo-caption small { background: rgba(15,23,42,.78); }
body.dark .geo-node::after { background: rgba(0,0,0,.62); }

@media (prefers-reduced-motion: reduce) {
  .geo-node,
  .geo-shape { transition: none; }
  .geo-pulse { animation: none; opacity: .45; }
  .geo-node.is-pressing .geo-shape,
  .geo-node.is-pressing .geo-icon,
  .geo-node.is-pressing::after { animation: none; }
}

/* Selector de dificultad para las seis actividades de Home. */
.home-course-level-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: -2px 0 18px;
  padding: 12px 14px 12px 18px;
  border: 1px solid color-mix(in srgb, var(--purple) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 10px 26px rgba(76, 29, 149, .07), inset 0 1px rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
}

.home-course-level-bar > div:first-child {
  display: grid;
  gap: 2px;
}

.home-course-level-bar > div:first-child span {
  color: var(--text);
  font-size: .78rem;
  font-weight: 900;
}

.home-course-level-bar > div:first-child small {
  color: var(--muted);
  font-size: .69rem;
  font-weight: 650;
}

.home-course-level-tabs {
  display: grid;
  grid-template-columns: repeat(6, 44px);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
}

.home-course-level-tabs button {
  min-width: 44px;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.home-course-level-tabs button:hover {
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 9%, transparent);
}

.home-course-level-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  box-shadow: 0 6px 14px rgba(109, 40, 217, .24);
}

.home-course-level-tabs button:active { transform: scale(.94); }

body.dark .home-course-level-bar {
  background: rgba(22, 16, 43, .7);
  box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.06);
}

@media (max-width: 720px) {
  .home-course-level-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .home-course-level-tabs {
    grid-template-columns: repeat(6, minmax(36px, 1fr));
  }

  .home-course-level-tabs button {
    min-width: 0;
    min-height: 44px;
  }
}

/* El PNG del diamante es transparente; elimina el material CSS cuadrado
   heredado del icono anterior sin afectar el estado activo del botón. */
button.nav-item-geo[data-section="level-intermediate"]
  .nav-icon-3d > .mini-3d-rhombus {
  border: 0;
  border-radius: 0;
  background: url("assets/path-node-diamond-ruby.png") center / contain no-repeat transparent;
  box-shadow: none;
  filter: drop-shadow(0 3px 4px rgba(190, 24, 93, .32));
}


/* PROFILE — bilingual field labels: English left, Spanish right */
.profile-bilingual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.profile-bilingual-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
  color: var(--text);
  font-size: .84rem;
  font-weight: 800;
}

.profile-bilingual-label > span[lang="es"] {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  text-align: right;
}

.profile-bilingual-label small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
}

@media (max-width: 760px) {
  .profile-bilingual-grid { grid-template-columns: 1fr; gap: 18px; }
  .profile-bilingual-label { gap: 12px; }
}

/* ============================================================================
   MINI ÍCONOS GEOMÉTRICOS 3D PARA EL MENÚ LATERAL (SIDEBAR NAV)
   ========================================================================= */

.nav-icon-3d {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  perspective: 120px;
}

.mini-3d-cube {
  position: relative;
  width: 14px;
  height: 14px;
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(30deg);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mini-3d-cube::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(135deg, #fde047, #f59e0b);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transform: translateZ(7px);
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.5);
}

.mini-3d-cube::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(135deg, #d97706, #92400e);
  transform: rotateY(90deg) translateZ(7px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.nav-item:hover .mini-3d-cube,
.nav-item.active .mini-3d-cube {
  transform: rotateX(-32deg) rotateY(48deg) scale(1.2);
}

.mini-3d-rhombus {
  position: relative;
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, #f87171, #dc2626);
  border-radius: 2px;
  transform: rotate(45deg) rotateX(15deg);
  box-shadow: 2px 2px 0 #7f1d1d, 0 0 8px rgba(239, 68, 68, 0.6);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-item:hover .mini-3d-rhombus,
.nav-item.active .mini-3d-rhombus {
  transform: rotate(45deg) rotateX(30deg) rotateY(20deg) scale(1.15);
}

.mini-3d-sphere {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #c084fc 25%, #9333ea 70%, #3b0764 100%);
  box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.5), 0 0 8px rgba(168, 85, 247, 0.6);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mini-3d-sphere::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid rgba(232, 121, 249, 0.7);
  transform: rotateX(70deg);
}

.nav-item:hover .mini-3d-sphere,
.nav-item.active .mini-3d-sphere {
  transform: scale(1.2) rotate(15deg);
}

/* ── Ocultar el subnivel que no está activo ──────────────── */
.path-row.subtab-hidden { display: none; }

.subtab-btn.locked-tab {
  opacity: .55;
  cursor: not-allowed;
}
.subtab-btn.locked-tab::after {
  content: "";
}

/* ── Tarjeta emergente de info de lección/examen ─────────────────────────── */
.path-node-modal-card {
  max-width: 380px;
  width: 100%;
}
.path-node-modal-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 6px;
}
.path-node-modal-title {
  margin: 0 0 8px;
  font-size: 1.3rem;
}
.path-node-modal-desc {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.55;
  font-size: .95rem;
}
.path-node-modal-meta {
  display: flex;
  gap: 14px;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 12px;
}
.path-node-modal-cta {
  width: 100%;
  margin-top: 14px;
  padding: 13px 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--purple), var(--purple-2, #9333ea));
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(124,58,237,.32);
}
.path-node-modal-cta:disabled {
  background: #CBD5E1;
  color: #64748B;
  box-shadow: none;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .path-row:has(.geo-node) { min-height: 118px; }
  .geo-node { width: 94px; height: 90px; transform: scale(.88); }
  .geo-icon { width: 34px; height: 34px; font-size: .92rem; }
  .geo-caption { margin-top: -10px; font-size: .7rem; }
}

/* UNIT CARDS (MAX WIDTH 460px) */
.unit-card {
  width: 100%;
  max-width: 460px;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 22px 24px;
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  text-align: left;
}

body.dark .unit-card {
  background: #13131F;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Top Accent Bar 6px */
.unit-top-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  border-radius: 24px 24px 0 0;
}
.theme-emerald { background: linear-gradient(90deg, #10B981, #34D399); }
.theme-blue { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
.theme-amber { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.theme-purple { background: linear-gradient(90deg, #8B5CF6, #C084FC); }
.theme-pink { background: linear-gradient(90deg, #EC4899, #F472B6); }

/* Circular background blob */
.unit-card-blob {
  position: absolute;
  top: -20px; right: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.08;
  pointer-events: none;
}

.unit-card:hover:not(.locked) {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.4);
}

/* Unit Header */
.unit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.unit-eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cefr-pill {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  color: #FFFFFF;
}

/* Title & Description */
.unit-title {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text, #0F172A);
  margin: 0;
  line-height: 1.3;
}

.unit-desc {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted, #64748B);
  margin: 0;
}

/* Meta Row */
.unit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted, #64748B);
}

.unit-resource-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
}

.unit-resource-strip span {
  border: 1px solid rgba(124, 58, 237, 0.16);
  background: rgba(124, 58, 237, 0.06);
  color: var(--text-muted, #64748B);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.68rem;
  font-weight: 800;
}

body.dark .unit-resource-strip span {
  border-color: rgba(167, 139, 250, 0.22);
  background: rgba(167, 139, 250, 0.12);
  color: #CBD5E1;
}

/* Skills Pills */
.unit-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-tag {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.skill-vocab { background: rgba(139, 92, 246, 0.12); color: #8B5CF6; }
.skill-grammar { background: rgba(59, 130, 246, 0.12); color: #3B82F6; }
.skill-reading { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.skill-listen { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.skill-speaking { background: rgba(236, 72, 153, 0.12); color: #EC4899; }
.skill-writing { background: rgba(99, 102, 241, 0.12); color: #6366F1; }

body.dark .skill-vocab { background: rgba(139, 92, 246, 0.22); color: #C084FC; }
body.dark .skill-grammar { background: rgba(59, 130, 246, 0.22); color: #93C5FD; }
body.dark .skill-reading { background: rgba(16, 185, 129, 0.22); color: #6EE7B7; }
body.dark .skill-listen { background: rgba(245, 158, 11, 0.22); color: #FDE047; }
body.dark .skill-speaking { background: rgba(236, 72, 153, 0.22); color: #F472B6; }
body.dark .skill-writing { background: rgba(99, 102, 241, 0.22); color: #A5B4FC; }

/* Unit CTA Buttons */
.unit-cta-btn {
  width: 100%;
  padding: 11px;
  border-radius: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.btn-active {
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
}
.btn-active:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
}

.btn-completed {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.btn-completed:hover {
  background: rgba(16, 185, 129, 0.2);
}

.btn-locked {
  background: #F1F5F9;
  color: #94A3B8;
  border: 1.5px dashed #CBD5E1;
  cursor: not-allowed;
}
body.dark .btn-locked {
  background: #1E293B;
  color: #64748B;
  border-color: #334155;
}

/* OLLIE STATIONS (ESTACIONES DEL BÚHO) */
.owl-station-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 3;
}

.owl-speech-bubble {
  position: relative;
  background: #FFFFFF;
  color: #0F172A;
  padding: 10px 14px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.15);
  margin-bottom: 8px;
  max-width: 220px;
  text-align: center;
}

body.dark .owl-speech-bubble {
  background: #1E1B4B;
  color: #F8FAFC;
  border-color: rgba(167, 139, 250, 0.3);
}

.owl-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-right: 1px solid rgba(124, 58, 237, 0.15);
  border-bottom: 1px solid rgba(124, 58, 237, 0.15);
  transform: rotate(45deg);
}

.ollie-station-svg {
  width: 100px;
  height: 100px;
  animation: owlBounce 3s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(124, 58, 237, 0.2));
}

@keyframes owlBounce {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

.ollie-ground-shadow {
  width: 65px;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  margin-top: -4px;
}

/* END-OF-PATH CELEBRATION CARD */
.end-path-card {
  position: relative;
  z-index: 2;
  max-width: 540px;
  margin: 40px auto 0;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(236, 72, 153, 0.08));
  border: 2px dashed rgba(124, 58, 237, 0.3);
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.end-path-card h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text, #0F172A);
  margin: 0;
}

.end-path-card p {
  font-size: 0.9rem;
  color: var(--text-muted, #64748B);
  margin: 0;
  max-width: 400px;
}

.next-level-btn {
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  color: #FFFFFF;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
  transition: all 0.25s ease;
}

.next-level-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45);
}

/* RESPONSIVE LAYOUT (<768px MOBILE) */
@media (max-width: 768px) {
  .level-hero-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 24px 18px;
  }
  .hero-eyebrow, .hero-actions {
    justify-content: center;
  }
  .hero-subtitle {
    margin: 0 auto;
  }
  .hero-mascot-col {
    order: -1;
  }
  .hero-ollie-svg {
    width: 130px;
    height: 130px;
  }

  .subtabs-pill {
    width: 100%;
    justify-content: center;
  }

  /* Collapse Path Grid on Mobile: Central Line shifts to left 24px */
  .duo-path-container {
    padding-left: 36px;
  }
  .path-center-line {
    left: 20px;
    transform: none;
  }

  .path-row {
    grid-template-columns: 32px 1fr;
    gap: 16px;
  }
  .path-row.row-left .path-card-col,
  .path-row.row-right .path-card-col {
    grid-column: 2;
    justify-self: stretch;
  }
  .path-row.row-left .path-marker-col,
  .path-row.row-right .path-marker-col {
    grid-column: 1;
    justify-self: center;
  }
  .path-row.row-left .path-decor-col,
  .path-row.row-right .path-decor-col {
    display: none;
  }

  .unit-card {
    max-width: 100%;
  }

  .lesson-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .lesson-resource-card {
    flex-direction: row;
  }

  .resource-media {
    width: 34%;
    min-width: 118px;
    min-height: 100%;
  }

  .resource-media img {
    height: 100%;
    min-height: 156px;
  }

  .owl-speech-bubble {
    max-width: 190px;
    font-size: 0.78rem;
  }
}

/* Level badge pill overlay */
.level-badge-pill {
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: white;
  padding: 6px 16px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 0.95rem;
}

/* ==========================================
   IMMERSIVE LESSON WORKSPACE & PRACTICE
   ========================================== */
.lesson-workspace {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
  margin-top: 24px;
}

@media (max-width: 950px) {
  .lesson-workspace {
    grid-template-columns: 1fr;
  }
}

.ld-main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ld-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
}

.ld-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  margin-bottom: 12px;
  color: var(--purple);
  display: flex;
  align-items: center;
  gap: 8px;
}

.examples-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.examples-list div {
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-strong);
  border-left: 4px solid var(--purple);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.examples-list div strong {
  font-size: 1.05rem;
  color: var(--text);
}

.examples-list div span {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Dynamic Practice Inputs & Options */
.ld-options-grid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.ld-option-btn {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text);
  width: 100%;
}

.ld-option-btn:hover {
  background: var(--surface-strong);
  border-color: var(--purple);
  transform: translateY(-2px);
}

.ld-option-btn.selected {
  background: rgba(116, 57, 246, 0.08);
  border-color: var(--purple);
  box-shadow: 0 4px 12px rgba(116, 57, 246, 0.12);
}

/* In-Lesson AI Tutor Sidebar */
.ld-tutor-panel {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: calc(100vh - 48px);
  max-height: 650px;
}

.ld-tutor-messages {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
  background: var(--surface-strong);
  border-radius: 16px;
  border: 1px solid var(--line);
  max-height: 280px;
}

.ld-tutor-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.tutor-pill {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text);
}

.tutor-pill:hover {
  background: var(--surface);
  border-color: var(--purple);
  transform: translateX(4px);
}

.ld-tutor-form {
  display: flex;
  gap: 8px;
}

.ld-tutor-form input {
  flex-grow: 1;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  font-size: 0.9rem;
}

.ld-tutor-form button {
  background: var(--purple);
  color: white;
  border: 0;
  border-radius: 12px;
  padding: 0 16px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================
   LESSON COMPLETED VIEW
   ========================================== */
.completed-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 600px;
  margin: 60px auto;
  text-align: center;
  padding: 40px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.06);
}

.celebration-emblem {
  font-size: 4rem;
  animation: bounce-emblem 1.5s ease infinite alternate;
}

@keyframes bounce-emblem {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-12px) scale(1.08); }
}

.congrats-subtitle {
  font-size: 1.25rem;
  color: var(--muted);
  margin-top: 8px;
}

.completed-stats-grid {
  display: flex;
  gap: 16px;
  width: 100%;
  margin: 32px 0;
  justify-content: center;
}

.stat-bubble {
  background: var(--surface-strong);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  flex: 1;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-bubble strong {
  font-size: 1.4rem;
  color: var(--purple);
  font-family: 'Outfit', sans-serif;
}

.stat-bubble span {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
}

.progress-streak-message {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 24px;
}

/* ── Admin Tab System ── */
.admin-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.admin-tab {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  border-radius: 10px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.2s;
  white-space: nowrap;
}

.admin-tab:hover {
  border-color: var(--purple);
  color: var(--text, #fff);
}

.admin-tab.active {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(116, 57, 246, 0.4);
}

.admin-panel {
  display: none;
}

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

/* ── Course Item card ── */
.course-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.6rem;
}

.course-item .ci-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
}

.course-item .ci-desc {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}

.course-item .ci-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.ci-btn {
  background: rgba(116, 57, 246, 0.15);
  border: 1px solid rgba(116, 57, 246, 0.3);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  transition: 0.2s;
}

.ci-btn:hover {
  background: rgba(116, 57, 246, 0.4);
  color: #fff;
}

.ci-btn.danger {
  background: rgba(255, 80, 80, 0.1);
  border-color: rgba(255, 80, 80, 0.25);
  color: #f87171;
}

.ci-btn.danger:hover {
  background: rgba(255, 80, 80, 0.3);
}

/* ── Access Checklist ── */
.access-course-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.access-course-row:last-child {
  border-bottom: none;
}

.access-course-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--purple);
  cursor: pointer;
  flex-shrink: 0;
}

.access-course-row label {
  flex: 1;
  cursor: pointer;
  font-size: 0.9rem;
}

/* ── Light mode overrides for admin panel ── */
body:not(.dark) .admin-tab {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #666;
}

body:not(.dark) .admin-tab:hover {
  border-color: var(--purple);
  color: #000;
}

body:not(.dark) .admin-tab.active {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff;
  border-color: transparent;
}

body:not(.dark) .course-item {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

body:not(.dark) .ci-btn {
  background: rgba(116, 57, 246, 0.08);
  border-color: rgba(116, 57, 246, 0.2);
  color: #555;
}

/* Dark mode Admin input, label & placeholder high contrast enhancements */
body.dark #admin input,
body.dark #admin textarea,
body.dark #admin select {
  background: rgba(25, 30, 48, 0.9);
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark #admin input::placeholder,
body.dark #admin textarea::placeholder {
  color: #CBD5E1 !important;
  opacity: 0.95 !important;
  -webkit-text-fill-color: #CBD5E1 !important;
}

body.dark #admin label {
  color: #E2E8F0 !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body:not(.dark) .ci-btn:hover {
  background: rgba(116, 57, 246, 0.2);
  color: #000;
}

/* ── Modal overlay for Student/Teacher Registration ── */
.auth-overlay, #student-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#student-modal > div {
  background: var(--card-bg, #1a1b35);
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 20px;
  padding: 2rem;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

body:not(.dark) #student-modal > div {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.48), rgba(255,255,255,0.18)),
    linear-gradient(120deg, rgba(79,172,254,0.14), rgba(244,74,164,0.12));
  border-color: rgba(255,255,255,0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 24px 60px rgba(45,54,88,0.18);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

/* LMS style adjustments for our project theme */
.admin-panel input, .admin-panel textarea, .admin-panel select,
#student-modal input, #student-modal textarea, #student-modal select {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text, #fff);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

body:not(.dark) .admin-panel input, body:not(.dark) .admin-panel textarea, body:not(.dark) .admin-panel select,
body:not(.dark) #student-modal input, body:not(.dark) #student-modal textarea, body:not(.dark) #student-modal select {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.50), rgba(255,255,255,0.24));
  border-color: rgba(116, 57, 246, 0.22);
  color: #0f172a;
}

.admin-panel input:focus, .admin-panel textarea:focus, .admin-panel select:focus,
#student-modal input:focus, #student-modal textarea:focus, #student-modal select:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(116, 57, 246, 0.15);
}

/* Admin premium glassmorphism: readable, translucent, and not flat white. */
#admin {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(115deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.28) 34%, rgba(116,57,246,0.18) 68%, rgba(79,172,254,0.13) 100%),
    conic-gradient(from 210deg at 72% 18%, rgba(116,57,246,0.38), rgba(244,74,164,0.2), rgba(79,172,254,0.24), rgba(255,255,255,0.08), rgba(116,57,246,0.38));
}

#admin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.25) 42%, rgba(255,255,255,0.04) 100%),
    linear-gradient(155deg, rgba(14,165,233,0.18) 0%, rgba(255,255,255,0) 38%, rgba(236,72,153,0.18) 100%);
  backdrop-filter: blur(1px);
}

#admin .page-title {
  align-items: flex-start;
  margin-bottom: 24px;
}

#admin .page-title h1 {
  color: #0f172a !important;
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: 0;
  text-shadow: 0 2px 18px rgba(255,255,255,0.74);
}

#admin .admin-subtitle {
  max-width: 560px;
  margin-left: auto !important;
  padding: 12px 16px;
  border-radius: 16px;
  color: #0f172a !important;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,255,255,0.24)),
    linear-gradient(115deg, rgba(79,172,254,0.18), rgba(244,74,164,0.14));
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 12px 34px rgba(74, 45, 155, 0.16);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

#admin .admin-tabs {
  padding: 8px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.36), rgba(255,255,255,0.12)),
    linear-gradient(115deg, rgba(79,172,254,0.14), rgba(244,74,164,0.16));
  border: 1px solid rgba(255,255,255,0.34);
  box-shadow: 0 18px 42px rgba(45,54,88,0.12);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

#admin .admin-tab {
  border-radius: 12px;
  background: rgba(255,255,255,0.24);
  border: 1px solid rgba(255,255,255,0.34);
  color: #334155;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

#admin .admin-tab:hover {
  transform: translateY(-1px);
  color: #111827;
  border-color: rgba(116,57,246,0.38);
  background: rgba(255,255,255,0.36);
}

#admin .admin-tab.active {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(116,57,246,0.96), rgba(244,74,164,0.9)),
    linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  box-shadow:
    0 16px 34px rgba(116,57,246,0.34),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

#admin .admin-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#admin .card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.40), rgba(255,255,255,0.17) 46%, rgba(255,255,255,0.08)),
    linear-gradient(120deg, rgba(79,172,254,0.16), rgba(167,139,250,0.14) 45%, rgba(244,74,164,0.12) 100%);
  border: 1px solid rgba(255,255,255,0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 22px 54px rgba(45,54,88,0.14);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

#admin .card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.42), rgba(255,255,255,0) 38%, rgba(255,255,255,0.22) 74%, rgba(255,255,255,0));
  opacity: 0.45;
}

#admin .card > * {
  position: relative;
  z-index: 1;
}

#admin .card h3,
#admin .card h4,
#admin .card label,
#admin .course-item strong,
#admin .access-course-row label {
  color: #111827 !important;
  letter-spacing: 0;
}

#admin .card p,
#admin .course-item span,
#admin [style*="var(--text-secondary)"],
#admin [style*="var(--muted)"],
#admin [style*="color:#aaa"] {
  color: #334155 !important;
}

#admin .course-item,
#admin .access-course-row {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.30), rgba(255,255,255,0.12)),
    linear-gradient(90deg, rgba(79,172,254,0.10), rgba(244,74,164,0.08));
  border: 1px solid rgba(255,255,255,0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.58),
    0 12px 28px rgba(45,54,88,0.08);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

#admin .course-item:hover,
#admin .access-course-row:hover {
  transform: translateY(-1px);
  border-color: rgba(116,57,246,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.64),
    0 18px 36px rgba(116,57,246,0.14);
}

#admin input,
#admin textarea,
#admin select {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.52), rgba(255,255,255,0.26)) !important;
  border: 1px solid rgba(116,57,246,0.24) !important;
  color: #0f172a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 8px 22px rgba(45,54,88,0.07);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

#admin input::placeholder,
#admin textarea::placeholder {
  color: #52627a !important;
  opacity: 1 !important;
}

#admin input:focus,
#admin textarea:focus,
#admin select:focus {
  border-color: rgba(116,57,246,0.55) !important;
  box-shadow:
    0 0 0 4px rgba(116,57,246,0.14),
    0 14px 30px rgba(116,57,246,0.14);
}

#admin select option {
  background: #f8fbff;
  color: #0f172a;
}

#admin .ci-btn,
#admin .cta-button {
  border-radius: 12px;
  border: 1px solid rgba(116,57,246,0.22);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.38), rgba(255,255,255,0.16)),
    linear-gradient(120deg, rgba(116,57,246,0.12), rgba(79,172,254,0.10));
  color: #1f2937;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.58),
    0 10px 22px rgba(45,54,88,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#admin .ci-btn:hover,
#admin .cta-button:hover {
  transform: translateY(-1px);
  color: #fff;
  background: linear-gradient(135deg, rgba(116,57,246,0.9), rgba(244,74,164,0.86));
  box-shadow: 0 16px 32px rgba(116,57,246,0.25);
}

#admin .ci-btn.danger {
  color: #b42318;
  border-color: rgba(248,113,113,0.3);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.14)),
    linear-gradient(120deg, rgba(248,113,113,0.12), rgba(244,74,164,0.08));
}

#admin .ci-btn.danger:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(239,68,68,0.92), rgba(244,74,164,0.82));
}

body.dark #admin {
  background:
    linear-gradient(115deg, rgba(15,23,42,0.78), rgba(48,23,89,0.5) 48%, rgba(14,165,233,0.22) 100%),
    conic-gradient(from 210deg at 74% 18%, rgba(116,57,246,0.34), rgba(244,74,164,0.16), rgba(79,172,254,0.18), rgba(15,23,42,0.28), rgba(116,57,246,0.34));
}

body.dark #admin::before {
  background:
    linear-gradient(90deg, rgba(15,23,42,0.84), rgba(15,23,42,0.38) 44%, rgba(255,255,255,0.02)),
    linear-gradient(155deg, rgba(14,165,233,0.12), rgba(0,0,0,0) 38%, rgba(236,72,153,0.12));
}

body.dark #admin .page-title h1,
body.dark #admin .card h3,
body.dark #admin .card h4,
body.dark #admin .card label,
body.dark #admin .course-item strong,
body.dark #admin .access-course-row label {
  color: #f8fafc !important;
  text-shadow: none;
}

body.dark #admin .admin-subtitle,
body.dark #admin .card p,
body.dark #admin .course-item span,
body.dark #admin [style*="var(--text-secondary)"],
body.dark #admin [style*="var(--muted)"],
body.dark #admin [style*="color:#aaa"] {
  color: #dbeafe !important;
}

body.dark #admin .admin-subtitle,
body.dark #admin .admin-tabs,
body.dark #admin .card,
body.dark #admin .course-item,
body.dark #admin .access-course-row {
  background:
    linear-gradient(135deg, rgba(15,23,42,0.58), rgba(30,41,59,0.24)),
    linear-gradient(120deg, rgba(79,172,254,0.14), rgba(167,139,250,0.14) 48%, rgba(244,74,164,0.1));
  border-color: rgba(226,232,240,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 22px 54px rgba(0,0,0,0.34);
}

body.dark #admin .admin-tab {
  color: #cbd5e1;
  background: rgba(15,23,42,0.36);
  border-color: rgba(226,232,240,0.12);
}

body.dark #admin .admin-tab:hover {
  color: #fff;
  background: rgba(30,41,59,0.55);
}

body.dark #admin input,
body.dark #admin textarea,
body.dark #admin select {
  background: linear-gradient(135deg, rgba(15,23,42,0.62), rgba(30,41,59,0.38)) !important;
  border-color: rgba(226,232,240,0.18) !important;
  color: #f8fafc !important;
}

body.dark #admin input::placeholder,
body.dark #admin textarea::placeholder {
  color: #aebdda !important;
}

body.dark #admin select option {
  background: #0f172a;
  color: #f8fafc;
}

@media (max-width: 900px) {
  #admin .page-title {
    display: block;
  }

  #admin .admin-subtitle {
    margin-top: 12px !important;
    margin-left: 0 !important;
    text-align: left;
  }
}

/* EXAM NODE GOLDEN STYLING (Deliverable 2) */
.path-node.exam-node .unit-card,
.unit-card.exam-node {
  background: linear-gradient(135deg, #FCD34D, #F59E0B) !important;
  border: 3px solid #FBBF24 !important;
  position: relative;
  color: #1E1B4B !important;
}

.path-node.exam-node .unit-card h3,
.path-node.exam-node .unit-card p,
.path-node.exam-node .unit-card span,
.unit-card.exam-node h3,
.unit-card.exam-node p,
.unit-card.exam-node span {
  color: #1E1B4B !important;
}

.path-node.exam-node .unit-card::before,
.unit-card.exam-node::before {
  content: '🏆';
  position: absolute;
  top: -15px;
  right: 20px;
  font-size: 32px;
  background: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 5;
}

.path-node.exam-node .unit-cta-btn,
.unit-card.exam-node .unit-cta-btn {
  background: #1E1B4B !important;
  color: #FCD34D !important;
  font-weight: 700;
}

/* ============================================================================
   EXERCISE TYPES & FEEDBACK TOAST STYLING (FASE 2)
   ============================================================================ */

/* Base Exercise Container */
.exercise-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.exercise-question-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

/* Options Type */
.ex-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.ex-option-btn {
  background: var(--surface-strong);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
}

.ex-option-btn:hover {
  border-color: var(--purple-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.ex-option-btn.selected {
  background: rgba(124, 58, 237, 0.1);
  border-color: var(--purple);
  color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

/* Fill Blank Type */
.ex-fillblank-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ex-fillblank-input {
  width: 100%;
  padding: 16px;
  font-size: 1.1rem;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ex-fillblank-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
}

/* True / False Type */
.ex-tf-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ex-tf-btn {
  padding: 24px;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 20px;
  border: 2px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.ex-tf-btn.tf-true:hover,
.ex-tf-btn.tf-true.selected {
  border-color: var(--green);
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.ex-tf-btn.tf-false:hover,
.ex-tf-btn.tf-false.selected {
  border-color: var(--pink);
  background: rgba(236, 72, 153, 0.1);
  color: #EC4899;
}

/* Scenario Type */
.ex-scenario-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.scenario-brief {
  border: 1px solid rgba(124, 58, 237, 0.18);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(16, 185, 129, 0.08));
  border-radius: 18px;
  padding: 18px;
}

.scenario-label {
  display: inline-flex;
  color: var(--purple);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.scenario-brief p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.5;
}

.scenario-brief strong {
  color: var(--text);
  line-height: 1.4;
}

.scenario-option {
  text-align: left;
}

/* Match Type */
.ex-match-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ex-match-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ex-match-chip {
  width: 100%;
  appearance: none;
  font-family: inherit;
  text-align: left;
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.ex-match-chip:hover {
  border-color: var(--purple-2);
}

.ex-match-chip.selected {
  border-color: var(--purple);
  background: rgba(124, 58, 237, 0.15);
}

.ex-match-chip.matched {
  border-color: var(--green);
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  pointer-events: none;
  opacity: 0.8;
}

/* Reorder Type */
.ex-reorder-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ex-reorder-target {
  min-height: 64px;
  padding: 12px 16px;
  border: 2px dashed var(--purple-2);
  border-radius: 16px;
  background: rgba(124, 58, 237, 0.04);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ex-reorder-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ex-word-chip {
  appearance: none;
  font-family: inherit;
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 600;
  background: var(--surface-strong);
  border: 2px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

/* Daily learning studio */
.daily-learning-studio {
  margin: 30px 0 26px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.daily-studio-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.daily-studio-heading h2 {
  margin: 4px 0 5px;
  font-size: 1.55rem;
}

.daily-studio-heading p {
  margin: 0;
  color: var(--muted);
  max-width: 720px;
}

.daily-studio-kicker {
  color: var(--purple);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.daily-studio-controls {
  display: grid;
  grid-template-columns: 38px minmax(52px, auto) 38px;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.daily-studio-controls .icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
}

.daily-studio-controls span {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.daily-level-tabs {
  display: flex;
  gap: 6px;
  margin: 18px 0;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.daily-level-tabs button {
  min-width: 48px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.daily-level-tabs button.active {
  background: var(--text);
  color: var(--surface-strong);
  box-shadow: 0 4px 12px rgba(18, 24, 40, 0.14);
}

.daily-media-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.daily-media-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.daily-media-visual {
  display: grid;
  place-items: center;
  height: 104px;
  overflow: hidden;
  background: #e8f3ff;
  color: #1769aa;
}

.daily-media-story .daily-media-visual { background: #fff1cc; color: #8a5800; }
.daily-media-visual .daily-media-visual { background: #e7f8ef; color: #14734c; }
.daily-media-audio .daily-media-visual { background: #f0e8ff; color: #6d35c5; }
.daily-media-writing .daily-media-visual { background: #ffe8f1; color: #a82762; }

.daily-media-visual > span {
  font-size: 2.2rem;
  font-weight: 900;
}

.daily-media-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.daily-media-copy {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 15px;
}

.daily-media-copy > span {
  color: var(--purple);
  font-size: 0.69rem;
  font-weight: 800;
  text-transform: uppercase;
}

.daily-media-copy h3 {
  margin: 7px 0 6px;
  font-size: 1rem;
  line-height: 1.2;
}

.daily-media-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.daily-media-copy button {
  margin-top: auto;
  padding: 9px 0 2px;
  border: 0;
  background: transparent;
  color: var(--purple);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.daily-library-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 28px 0 12px;
}

.daily-library-heading h3,
.daily-library-heading p { margin: 0; }
.daily-library-heading h3 { font-size: 1.05rem; }
.daily-library-heading p { margin-top: 3px; color: var(--muted); font-size: 0.83rem; }
.daily-library-heading > span { color: var(--muted); font-size: 0.78rem; font-weight: 800; }

.daily-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.daily-library-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 84px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--purple);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.daily-library-verde { border-left-color: #1f9d67; }
.daily-library-ambar { border-left-color: #d59012; }
.daily-library-rosa { border-left-color: #d43f7c; }
.daily-library-cyan { border-left-color: #168da2; }
.daily-library-azul { border-left-color: #2676c5; }

.daily-library-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface-soft);
  font-size: 1.15rem;
}

.daily-library-copy { display: grid; min-width: 0; }
.daily-library-copy small { color: var(--purple); font-size: 0.67rem; font-weight: 800; text-transform: uppercase; }
.daily-library-copy strong { overflow: hidden; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }
.daily-library-copy > span { overflow: hidden; color: var(--muted); font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.daily-library-arrow { color: var(--muted); font-weight: 900; }

.daily-library-lesson {
  max-width: 780px;
  margin: 0 auto;
}

.daily-library-lesson > header {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.daily-library-lesson > header > span {
  color: var(--purple);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.daily-library-lesson > header h2 { margin: 6px 0 4px; }
.daily-library-lesson > header p { margin: 0; color: var(--muted); }
.daily-library-intro { color: var(--muted); line-height: 1.6; }

.daily-word-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.daily-word-list article {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.daily-bilingual-word > div { padding: 12px 14px; }
.daily-bilingual-word > div + div { border-top: 1px solid var(--line); background: var(--surface-strong); }
.daily-bilingual-word small { display: block; margin-bottom: 4px; color: var(--muted); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.daily-bilingual-word > div:first-child small { color: #b9380c; }
.daily-bilingual-word > div:nth-child(2) small { color: #1565c0; }
.daily-bilingual-word strong { display: block; font-size: 1rem; }
.daily-bilingual-word p { margin: 6px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.daily-word-list .daily-bilingual-word > button {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--purple);
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
}
.daily-word-list .daily-bilingual-word > button:hover { background: rgba(116,57,246,.08); }

.daily-reading-sheet {
  padding: 20px;
  border-left: 4px solid #d59012;
  background: var(--surface-soft);
}

.daily-reading-sheet p { margin: 0 0 12px; line-height: 1.7; }
.daily-reading-sheet p:last-child { margin-bottom: 0; }

.daily-glossary,
.daily-useful-words {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0;
}

.daily-glossary span,
.daily-useful-words span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.76rem;
}

.daily-library-lesson aside {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--purple);
  background: rgba(116, 57, 246, 0.08);
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.daily-listening-stage,
.daily-expression-stage,
.daily-writing-brief {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.daily-listening-stage > span { display: block; margin-bottom: 8px; font-size: 2rem; }
.daily-listening-stage > button { margin: 8px 8px 8px 0; }
.daily-listening-stage > div { margin-top: 10px; padding: 12px; border: 1px solid var(--line); background: var(--surface-strong); line-height: 1.6; }

.daily-expression-stage > span { color: var(--purple); font-size: 0.73rem; font-weight: 800; text-transform: uppercase; }
.daily-expression-stage > h3 { margin: 7px 0 12px; font-size: 2rem; }
.daily-expression-stage > div { display: grid; gap: 8px; margin-top: 16px; }
.daily-expression-stage article { display: grid; gap: 3px; padding: 11px; border: 1px solid var(--line); background: var(--surface-strong); }
.daily-expression-stage article span { color: var(--muted); font-size: 0.8rem; }

.daily-writing-brief textarea {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
  line-height: 1.6;
}

.daily-writing-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.daily-writing-footer span { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.daily-writing-brief details { margin-top: 16px; }
.daily-writing-brief summary { color: var(--purple); font-weight: 800; cursor: pointer; }

.daily-library-questions { margin-top: 22px; }
.daily-library-questions fieldset { margin: 0 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.daily-library-questions legend { padding: 0 6px; font-weight: 800; }
.daily-library-questions label { display: flex; gap: 8px; align-items: center; padding: 7px; color: var(--muted); cursor: pointer; }
.daily-library-questions input { accent-color: var(--purple); }
.daily-library-questions .lesson-feedback-box { margin-top: 12px; }
.daily-answer-explanations { display: grid; gap: 7px; margin-top: 10px; }
.daily-answer-explanations p { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0; font-size: 0.8rem; line-height: 1.45; }
.daily-answer-explanations p > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(116, 57, 246, 0.14); font-weight: 900; }

.daily-video-player {
  max-width: 760px;
  margin: 0 auto;
}

.daily-video-embed {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080b12;
  aspect-ratio: 16 / 9;
  box-shadow: 0 16px 34px rgba(15,23,42,.2);
}
.daily-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.daily-video-info {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  text-align: left;
}
.daily-video-info > div { min-width: 0; }
.daily-video-info span,
.daily-video-study-head span {
  color: var(--purple);
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}
.daily-video-info h3 { margin: 4px 0; font-size: 1.35rem; }
.daily-video-info p { margin: 0; color: var(--muted); line-height: 1.45; }
.daily-video-info > a { flex: 0 0 auto; text-decoration: none; }
.daily-video-study-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: var(--surface-soft);
  text-align: left;
}
.daily-video-study-head > div { display: grid; gap: 4px; }
.daily-video-study-head strong { line-height: 1.4; }

.daily-video-screen {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 8px;
  background: #111827;
}

.daily-video-screen > img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  opacity: 0.55;
}

.daily-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: white;
  background: linear-gradient(180deg, transparent 20%, rgba(10, 15, 30, 0.9));
}

.daily-video-overlay span {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.daily-video-overlay h3 {
  margin: 8px 0;
  font-size: 1.8rem;
}

.daily-video-overlay p {
  margin: 0;
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.5;
}

.daily-video-progress {
  position: relative;
  height: 5px;
  background: var(--line);
}

.daily-video-progress span {
  display: block;
  width: 33.333%;
  height: 100%;
  background: #f8d34f;
  transition: width 300ms ease;
}

.daily-video-controls {
  display: flex;
  gap: 10px;
  margin: 14px 0;
}

.daily-video-scenes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.daily-video-scenes button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-height: 76px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.daily-video-scenes button.active {
  border-color: var(--purple);
  box-shadow: inset 3px 0 var(--purple);
}

.daily-video-scenes strong {
  color: var(--purple);
}

.daily-video-scenes span {
  font-size: 0.78rem;
  line-height: 1.35;
}

body.dark .daily-media-card,
body.dark .daily-video-scenes button {
  background: rgba(18, 24, 40, 0.9);
}

@media (max-width: 1180px) {
  .daily-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .daily-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .daily-studio-heading { align-items: flex-start; flex-direction: column; }
  .daily-media-grid { grid-template-columns: 1fr; }
  .daily-media-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
  .daily-media-visual { height: 100%; min-height: 180px; }
  .daily-media-copy { min-height: 180px; }
  .daily-video-screen, .daily-video-screen > img { min-height: 300px; height: 300px; }
  .daily-video-overlay { padding: 20px; }
  .daily-video-overlay h3 { font-size: 1.4rem; }
  .daily-video-controls { align-items: stretch; flex-direction: column; }
  .daily-video-info, .daily-video-study-head { align-items: stretch; flex-direction: column; }
  .daily-video-info > a, .daily-video-study-head > button { width: 100%; justify-content: center; }
  .daily-video-scenes { grid-template-columns: 1fr; }
  .daily-library-heading { align-items: flex-start; flex-direction: column; }
  .daily-library-grid, .daily-word-list { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .skill-experience-head { grid-template-columns: 42px minmax(0, 1fr); }
  .skill-format-icon { width: 42px; height: 42px; }
  .skill-level-switcher { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .skill-level-switcher button { min-width: 0; width: 100%; }
  .bilingual-lesson-grid,
  .bilingual-vocabulary-card { grid-template-columns: 1fr; }
  .bilingual-panel + .bilingual-panel,
  .vocabulary-language + .vocabulary-language { border-top: 1px solid var(--line); border-left: 0; }
  .bilingual-panel,
  .vocabulary-language { padding: 17px; }
  .bilingual-vocabulary-card { min-height: 0; }
}

.ex-word-chip:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
}

/* Listening Type */
.ex-listening-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  width: 100%;
}

.ex-audio-play-btn {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: white;
  border: none;
  border-radius: 50px;
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.ex-audio-play-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.4);
}

/* Translate Type */
.ex-translate-input {
  width: 100%;
  min-height: 100px;
  padding: 16px;
  font-size: 1.1rem;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
  color: var(--text);
  resize: vertical;
  outline: none;
}

.ex-translate-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
}

/* FEEDBACK TOAST ANIMATED (Entregable 5) */
.feedback-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  width: 92%;
  max-width: 580px;
  padding: 18px 24px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feedback-toast.show {
  transform: translateX(-50%) translateY(0);
}

.feedback-toast[data-status="correct"] {
  background: #064E3B;
  border: 2px solid #10B981;
  color: #ECFDF5;
}

.feedback-toast[data-status="incorrect"] {
  background: #881337;
  border: 2px solid #F43F5E;
  color: #FFF1F2;
}

.toast-content-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.feedback-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  flex-shrink: 0;
}

.feedback-toast[data-status="correct"] .feedback-icon {
  background: #10B981;
  color: white;
}

.feedback-toast[data-status="incorrect"] .feedback-icon {
  background: #F43F5E;
  color: white;
}

.feedback-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feedback-title {
  font-weight: 800;
  font-size: 1.1rem;
}

.feedback-message {
  font-size: 0.95rem;
  opacity: 0.95;
}

.toast-xp-pill {
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
}

.toast-next-btn {
  background: white;
  color: #111827;
  border: none;
  border-radius: 16px;
  padding: 12px 20px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s ease;
  white-space: nowrap;
}

.toast-next-btn:hover {
  transform: scale(1.05);
}

/* ============================================================================
   EXAM VIEW & RESULTS STYLING (ENTREGABLE 7)
   ============================================================================ */

/* .active es necesario: sin él esta regla vencía a ".view { display: none }"
   por ir más abajo con el mismo peso, y la vista quedaba visible siempre. */
.exam-view.active {
  background: var(--bg);
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-radius: var(--radius);
}

.exam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

.exam-exit {
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.exam-exit:hover {
  background: rgba(244, 63, 94, 0.1);
  color: #F43F5E;
  border-color: #F43F5E;
}

.exam-timer {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--amber);
  background: rgba(245, 158, 11, 0.1);
  padding: 6px 18px;
  border-radius: 20px;
}

.exam-progress {
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
}

.exam-body {
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  max-width: 780px;
  width: 100%;
  align-self: center;
}

.question-counter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

.question-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--line);
  transition: all 0.2s ease;
}

.question-dot.active {
  background: var(--purple);
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}

.question-dot.completed {
  background: var(--green);
}

.question-dot.skipped {
  background: var(--amber);
}

.exam-question-box {
  width: 100%;
  background: var(--surface-strong);
  border: 2px solid var(--line);
  padding: 32px;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.exam-skip-counter {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.9rem;
}

.exam-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.exam-prev, .exam-skip-btn, .exam-next {
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.exam-prev {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid var(--line);
}

.exam-skip-btn {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber);
}

.exam-next {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: white;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.exam-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
}

/* RESULTS SCREEN */
/* Mismo caso que .exam-view: sin .active la vista se mostraba siempre. */
.exam-results.active {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 24px;
}

.results-card {
  background: var(--surface-strong);
  border: 2px solid var(--line);
  border-radius: 28px;
  padding: 40px;
  max-width: 640px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.results-icon {
  font-size: 64px;
  animation: bounce 1s infinite alternate;
}

.results-score {
  background: rgba(124, 58, 237, 0.08);
  border: 2px solid var(--purple-2);
  padding: 20px 40px;
  border-radius: 20px;
  margin: 12px 0;
}

.score-big {
  font-family: 'Outfit', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--purple);
}

.score-detail {
  font-weight: 600;
  color: var(--muted);
  font-size: 1rem;
}

.results-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
  margin: 16px 0;
}

.breakdown-item {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100%;
}

.results-actions button {
  padding: 14px 24px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.results-actions .btn-claim-badge {
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #1E1B4B;
  font-weight: 800;
}

.results-actions .btn-skip-level {
  background: var(--purple);
  color: white;
}

.results-actions .btn-retry {
  background: rgba(244, 63, 94, 0.15);
  color: #F43F5E;
}

.results-actions .btn-back-path {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}

/* ============================================================================
   LESSON DETAIL VIEW & CELEBRATION MODAL STYLING (ENTREGABLE 4)
   ============================================================================ */

/* Mismo caso que .exam-view: la regla debe aplicarse solo a la vista activa. */
.lesson-detail-view.active {
  background: var(--bg);
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: var(--radius);
  position: relative;
}

.lesson-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
}

.lesson-header .back-btn {
  background: transparent;
  border: 1px solid var(--line);
  padding: 10px 18px;
  border-radius: 14px;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lesson-header .back-btn:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: var(--purple);
  color: var(--purple);
}

.lesson-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.lesson-info h1 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
}

.lesson-meta {
  display: flex;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

.lesson-progress-ring {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.lesson-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}

.lesson-section {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px 28px;
  box-shadow: var(--shadow-soft);
}

.lesson-section h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--purple);
}

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

.lesson-section-heading h2 {
  margin: 0;
}

.lesson-section-heading span {
  border: 1px solid rgba(124, 58, 237, 0.18);
  background: rgba(124, 58, 237, 0.08);
  color: var(--purple);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.explanation-box {
  background: rgba(124, 58, 237, 0.04);
  border-left: 4px solid var(--purple);
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 1.05rem;
  line-height: 1.6;
}

.lesson-resource-section {
  overflow: hidden;
}

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

.lesson-resource-card {
  min-height: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.resource-media {
  min-height: 124px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(59, 130, 246, 0.16));
  display: grid;
  place-items: center;
}

.resource-video .resource-media {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(124, 58, 237, 0.2));
}

.resource-mission .resource-media {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(16, 185, 129, 0.14));
}

.resource-media img {
  width: 100%;
  height: 124px;
  object-fit: cover;
}

.resource-symbol {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #FFFFFF;
  color: var(--purple);
  font-size: 1.45rem;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
}

.resource-symbol.is-video {
  padding-left: 4px;
}

.resource-copy {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.resource-kicker {
  color: var(--purple);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.resource-copy h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
}

.resource-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
  flex: 1;
}

.resource-action {
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(124, 58, 237, 0.08);
  color: var(--purple);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.resource-action:hover {
  transform: translateY(-1px);
  background: rgba(124, 58, 237, 0.14);
}

body.dark .lesson-resource-card {
  background: #13131F;
}

body.dark .resource-symbol {
  background: #F8FAFC;
}

/* ── RECORRIDO Y TALLER MULTIMODAL DE LAS LECCIONES ───────────────────── */
.lesson-session-roadmap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--surface-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.lesson-roadmap-step {
  min-width: 0;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-right: 1px solid var(--line);
  color: var(--muted);
}

.lesson-roadmap-step:last-child { border-right: 0; }
.lesson-roadmap-step.active { box-shadow: inset 0 3px 0 #22C55E; }
.lesson-roadmap-step.completed { background: rgba(34, 197, 94, .08); }

.lesson-roadmap-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: .78rem;
  font-weight: 900;
}

.lesson-roadmap-step.completed .lesson-roadmap-number {
  background: #22C55E;
  border-color: #22C55E;
  color: #fff;
}

.lesson-roadmap-step strong,
.lesson-roadmap-step small { display: block; }
.lesson-roadmap-step strong { color: var(--text); font-size: .85rem; }
.lesson-roadmap-step small { margin-top: 2px; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson-roadmap-step em { font-style: normal; font-size: .72rem; font-weight: 800; white-space: nowrap; }

.lesson-skill-lab {
  min-width: 0;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border-color: rgba(34, 197, 94, .32);
}

.lesson-lab-heading {
  margin: 0;
  padding: 24px 28px 18px;
  align-items: flex-end;
  background: color-mix(in srgb, var(--surface-strong) 86%, #DFFFE8 14%);
}

.lesson-lab-heading > div { min-width: 0; }
.lesson-lab-heading h2 { color: var(--text); margin: 2px 0 4px; font-size: 1.35rem; }
.lesson-lab-heading p { margin: 0; color: var(--muted); font-size: .88rem; }
.lesson-lab-heading > strong { color: #15803D; font-size: .78rem; white-space: nowrap; }

.lesson-lab-kicker {
  display: block;
  color: #15803D;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.lesson-lab-heading .lesson-lab-kicker {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lesson-lab-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 28px;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--line);
}

.lesson-lab-tab {
  min-height: 48px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.lesson-lab-tab:hover { color: var(--text); background: rgba(99, 102, 241, .05); }
.lesson-lab-tab.active { color: var(--text); border-bottom-color: #EF4444; }
.lesson-lab-tab.completed::after { content: "  ✓"; color: #16A34A; }
.lesson-lab-tab:nth-child(2).active { border-bottom-color: #2563EB; }
.lesson-lab-tab:nth-child(3).active { border-bottom-color: #9333EA; }

.lesson-lab-panel { min-height: 370px; background: var(--surface-strong); }
.lesson-station-panel { min-height: 370px; }
.lesson-station-panel[hidden] { display: none; }

.vocabulary-wheel-layout,
.listening-lab-layout {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
  min-height: 370px;
}

.vocabulary-wheel-wrap,
.listening-stage-visual {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: 30px;
  border-right: 1px solid var(--line);
  background: #F2FFF5;
}

body.dark .vocabulary-wheel-wrap { background: #102119; }

.vocabulary-wheel {
  width: 190px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid var(--surface-strong);
  outline: 2px solid rgba(22, 163, 74, .34);
  background: conic-gradient(#EF4444 0 25%, #2563EB 0 50%, #FACC15 0 75%, #22C55E 0);
  position: relative;
  box-shadow: 0 18px 36px rgba(22, 101, 52, .18);
  transition: transform .8s cubic-bezier(.17, .67, .2, 1.15);
}

.vocabulary-wheel.spinning { transform: rotate(900deg); }
.vocabulary-wheel span { position: absolute; color: #fff; font-size: .65rem; font-weight: 900; }
.vocabulary-wheel span:nth-child(1) { top: 23px; left: 50%; transform: translateX(-50%); }
.vocabulary-wheel span:nth-child(2) { right: 13px; top: 50%; transform: rotate(90deg) translateX(-50%); transform-origin: top center; }
.vocabulary-wheel span:nth-child(3) { bottom: 23px; left: 50%; transform: translateX(-50%) rotate(180deg); }
.vocabulary-wheel span:nth-child(4) { left: 15px; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: top center; }
.vocabulary-wheel::after { content: "V"; position: absolute; inset: 34%; display: grid; place-items: center; border-radius: 50%; background: var(--surface-strong); color: #16A34A; font-size: 1.7rem; font-weight: 900; box-shadow: 0 5px 15px rgba(0, 0, 0, .15); }

.vocabulary-wheel-pointer {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid var(--text);
  transform: translateX(-50%);
  z-index: 2;
}

.vocabulary-spin-btn,
.listening-play-btn {
  border: 0;
  background: #161B2E;
  color: #fff;
  border-radius: 10px;
  padding: 11px 18px;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.vocabulary-spin-btn:disabled { opacity: .6; cursor: progress; }

.lesson-station-task {
  min-width: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.station-eyebrow {
  color: #DC2626;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.lesson-station-task h3 { margin: 5px 0 8px; color: var(--text); font-size: 1.2rem; }
.lesson-station-task > p { margin: 0 0 18px; color: var(--muted); font-size: .88rem; }

.lesson-answer-label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--text);
  font-size: .78rem;
  font-weight: 800;
}

.lesson-lab-input,
.lesson-lab-textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  font-size: .95rem;
  resize: vertical;
}

.lesson-lab-input:focus,
.lesson-lab-textarea:focus { outline: 3px solid rgba(37, 99, 235, .13); border-color: #2563EB; }
.lesson-lab-input:disabled { opacity: .65; cursor: not-allowed; }

.lesson-station-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.lesson-lab-primary,
.lesson-lab-secondary {
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
}
.lesson-lab-primary { border: 1px solid #16A34A; background: #16A34A; color: #fff; }
.lesson-lab-secondary { border: 1px solid var(--line); background: transparent; color: var(--text); }
.lesson-lab-primary:disabled,
.lesson-lab-secondary:disabled { opacity: .48; cursor: not-allowed; }

.lesson-token-feedback { margin-top: 14px; }
.lesson-token-message { margin: 0 0 9px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.lesson-token-feedback.is-correct .lesson-token-message { color: #15803D; font-weight: 700; }
.lesson-token-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lesson-token-correct,
.lesson-token-error { padding: 4px 3px; background: transparent; font: inherit; font-size: .92rem; }
.lesson-token-correct { color: #15803D; }
.lesson-token-error {
  border: 0;
  color: #DC2626;
  font-weight: 800;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  cursor: pointer;
}
.lesson-token-error:hover,
.lesson-token-error:focus-visible { background: rgba(239, 68, 68, .1); outline: none; }

.lesson-word-coach {
  margin-top: 14px;
  padding: 13px 14px;
  border-left: 4px solid #EF4444;
  background: rgba(239, 68, 68, .07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lesson-word-coach[hidden] { display: none; }
.word-coach-label { color: #DC2626; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.lesson-word-coach p { margin: 4px 0; display: flex; align-items: center; gap: 9px; }
.lesson-word-coach del { color: #DC2626; }
.lesson-word-coach strong { color: #15803D; }
.lesson-word-coach small { color: var(--muted); line-height: 1.35; }
.word-coach-audio { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-strong); cursor: pointer; }

.listening-stage-visual { background: #EEF6FF; color: #1D4ED8; }
body.dark .listening-stage-visual { background: #101B31; }
.listening-stage-visual > span { color: var(--muted); font-size: .75rem; }
.listening-play-btn { width: 58px; height: 58px; border-radius: 50%; padding-left: 20px; background: #2563EB; font-size: 1rem; }
.listening-wave { height: 70px; display: flex; align-items: center; gap: 6px; }
.listening-wave i { width: 7px; height: 20px; border-radius: 6px; background: #60A5FA; }
.listening-wave i:nth-child(2), .listening-wave i:nth-child(6) { height: 42px; }
.listening-wave i:nth-child(3), .listening-wave i:nth-child(5) { height: 62px; }
.listening-wave i:nth-child(4) { height: 48px; }
.listening-wave.playing i { animation: lessonWave .65s ease-in-out infinite alternate; }
.listening-wave.playing i:nth-child(2n) { animation-delay: .18s; }
@keyframes lessonWave { to { transform: scaleY(.38); background: #2563EB; } }

.writing-studio-layout { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); min-height: 370px; }
.writing-mission { padding: 30px; border-right: 1px solid var(--line); background: #FBF3FF; display: flex; flex-direction: column; justify-content: center; }
body.dark .writing-mission { background: #211329; }
.writing-mission .station-eyebrow { color: #7E22CE; }
.writing-mission h3 { margin: 7px 0 12px; color: var(--text); font-size: 1.15rem; line-height: 1.35; }
.writing-mission p { margin: 0 0 18px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.writing-mission strong { align-self: flex-start; padding: 7px 10px; border: 1px solid rgba(147, 51, 234, .25); color: #7E22CE; font-size: .72rem; }
.lesson-writing-canvas { padding: 30px; align-self: center; width: 100%; }
.lesson-writing-canvas .vc-caja { min-height: 190px; border-radius: 10px; }
.lesson-writing-canvas .vc-boton-revisar { border-radius: 9px; }
.lesson-lab-unavailable { padding: 18px; border-left: 4px solid #EF4444; background: rgba(239, 68, 68, .08); }

@media (max-width: 900px) {
  .lesson-session-roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-roadmap-step:nth-child(2) { border-right: 0; }
  .lesson-roadmap-step:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .vocabulary-wheel-layout,
  .listening-lab-layout,
  .writing-studio-layout { grid-template-columns: 1fr; }
  .vocabulary-wheel-wrap,
  .listening-stage-visual,
  .writing-mission { border-right: 0; border-bottom: 1px solid var(--line); }
  .vocabulary-wheel-wrap,
  .listening-stage-visual { min-height: 280px; }
}

@media (max-width: 620px) {
  .lesson-detail-view.active { padding: 12px; }
  .lesson-header { padding: 14px; align-items: flex-start; gap: 10px; }
  .lesson-header .back-btn { padding: 9px; font-size: 0; }
  .lesson-header .back-btn::before { content: "←"; font-size: 1rem; }
  .lesson-info { align-items: flex-start; }
  .lesson-info h1 { font-size: 1.08rem; }
  .lesson-meta { flex-wrap: wrap; gap: 5px 9px; font-size: .72rem; }
  .lesson-progress-ring { padding: 8px 10px; font-size: .78rem; }
  .lesson-session-roadmap { grid-template-columns: 1fr; }
  .lesson-roadmap-step { border-right: 0; border-bottom: 1px solid var(--line); }
  .lesson-roadmap-step:last-child { border-bottom: 0; }
  .lesson-lab-heading { padding: 20px; align-items: flex-start; flex-direction: column; }
  .lesson-lab-tabs { display: flex; width: 100%; min-width: 0; padding: 0; overflow-x: auto; }
  .lesson-lab-tab { flex: 0 0 145px; }
  .ai-generated-lab { width: auto; max-width: calc(100% - 24px); margin: 4px 12px 20px; }
  .lesson-station-task,
  .writing-mission,
  .lesson-writing-canvas { padding: 22px 18px; }
  .vocabulary-wheel { width: 165px; }
  .lesson-station-actions { flex-direction: column; }
  .lesson-lab-primary,
  .lesson-lab-secondary { width: 100%; }
  .vc-barra { align-items: stretch; flex-direction: column; }
  .vc-boton-revisar { width: 100%; }
}

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

.example-card {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 16px 20px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.ex-en {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  margin: 0;
}

.ex-es {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

.example-card .audio-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(124, 58, 237, 0.1);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: transform 0.2s ease;
}

.example-card .audio-btn:hover {
  transform: scale(1.15);
  background: var(--purple);
  color: white;
}

.practice-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.practice-progress {
  display: flex;
  align-items: center;
  gap: 16px;
}

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

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  border-radius: 10px;
  transition: width 0.3s ease;
}

.btn-verify-lesson {
  width: 100%;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: white;
  border: none;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
  transition: transform 0.2s ease;
}

.btn-verify-lesson:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.4);
}

/* CELEBRATION BOX */
.lesson-completion {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  z-index: 100;
  text-align: center;
  color: white;
}

.lesson-completion h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin: 0;
}

.lesson-completion h2 {
  font-size: 1.5rem;
  opacity: 0.9;
  margin: 0;
}

.rewards {
  display: flex;
  gap: 16px;
  margin: 12px 0;
}

.reward {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 12px 24px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 1.2rem;
}

.completion-actions {
  display: flex;
  gap: 16px;
}

.btn-back-path-completion, .btn-next-lesson-completion {
  padding: 14px 28px;
  border-radius: 18px;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  cursor: pointer;
}

.btn-back-path-completion {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-next-lesson-completion {
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #1E1B4B;
}

/* ============================================================================
   FLOATING OLLIE AI ASSISTANT WIDGET & QUICK CHAT MODAL
   ============================================================================ */

.ollie-floating-btn {
  position: fixed;
  right: 28px;
  bottom: 84px;
  z-index: 990;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 99px;
  background: linear-gradient(135deg, #7439f6, #9d4edd);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(116, 57, 246, 0.45), var(--shadow-soft);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ollie-floating-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 32px rgba(116, 57, 246, 0.65), var(--shadow);
  border-color: rgba(255, 255, 255, 0.5);
}

.ollie-floating-btn:active {
  transform: translateY(0) scale(0.98);
}

.ollie-floating-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.ollie-floating-text {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.ollie-pulse-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseGreen 1.8s infinite;
}

@keyframes pulseGreen {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Floating Chat Modal (Cuadrante) */
.ollie-floating-chat-modal {
  position: fixed;
  right: 28px;
  bottom: 144px;
  z-index: 1000;
  width: 375px;
  max-width: calc(100vw - 36px);
  height: 500px;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 30px rgba(116, 57, 246, 0.25);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ollie-floating-chat-modal.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

body.dark .ollie-floating-chat-modal {
  background: rgba(18, 22, 38, 0.96);
  border-color: rgba(255, 255, 255, 0.12);
}

.ollie-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(116, 57, 246, 0.15), rgba(157, 78, 221, 0.08));
  border-bottom: 1px solid var(--line);
}

.ollie-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coach-avatar.micro {
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #7439f6, #9d4edd);
}

.ollie-header-info strong {
  font-size: 0.95rem;
  display: block;
  color: var(--text);
}

.status-online-dot {
  font-size: 0.72rem;
  color: #10B981;
  font-weight: 700;
}

.ollie-chat-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

.ollie-chat-close-btn:hover {
  background: rgba(255, 76, 174, 0.2);
  color: #FF4CAE;
}

.ollie-chat-body {
  flex: 1;
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ollie-chat-quick-pills {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  white-space: nowrap;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.03);
}

body.dark .ollie-chat-quick-pills {
  background: rgba(255, 255, 255, 0.02);
}

.ollie-quick-pill {
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.ollie-quick-pill:hover {
  background: var(--purple-pastel);
  color: var(--purple);
  border-color: var(--purple);
  transform: translateY(-1px);
}

.ollie-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-strong);
}

.ollie-chat-form input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
}

.ollie-chat-form input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(116, 57, 246, 0.15);
}

.ollie-chat-form button {
  padding: 0 14px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #7439f6, #9d4edd);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ollie-chat-form button:hover {
  transform: scale(1.05);
}

.ollie-chat-mic-btn {
  background: rgba(116, 57, 246, 0.12) !important;
  color: #9d4edd !important;
  border: 1px solid rgba(116, 57, 246, 0.3) !important;
}

.ollie-chat-mic-btn.recording {
  background: #ef4444 !important;
  color: white !important;
  animation: pulseRedMic 1.2s infinite;
}

@keyframes pulseRedMic {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  70% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Speaking / Pronunciation Exercise Styling */
.ex-speaking-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--surface-strong);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  margin-top: 12px;
}

.ex-speaking-target-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(116, 57, 246, 0.1), rgba(157, 78, 221, 0.05));
  border-radius: 16px;
  border: 1px solid var(--purple-border, rgba(116, 57, 246, 0.2));
}

.speaking-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.speaking-target-text {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--purple);
}

.ex-speaking-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ex-audio-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ex-audio-play-btn:hover {
  background: var(--purple-pastel);
  color: var(--purple);
  border-color: var(--purple);
}

.ex-mic-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, #7439f6, #9d4edd);
  color: white;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(116, 57, 246, 0.35);
  transition: all 0.25s ease;
}

.ex-mic-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(116, 57, 246, 0.5);
}

.ex-mic-btn.recording {
  background: linear-gradient(135deg, #ef4444, #f43f5e);
  animation: pulseRedMic 1.5s infinite;
}

.ex-speaking-fallback {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.ex-speaking-fallback:focus {
  outline: 3px solid rgba(116, 57, 246, 0.18);
  border-color: var(--purple);
}

.ex-speaking-feedback {
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.listening-pulse {
  color: #ef4444;
  font-weight: 700;
  font-size: 0.9rem;
}

.transcript-preview {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 8px;
}

.accuracy-score-badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.accuracy-score-badge.passed strong {
  color: #10B981;
}

.accuracy-score-badge.failed strong {
  color: #ef4444;
}

/* Ollie Shop Modal Styling */
.shop-modal-card {
  position: relative;
  isolation: isolate;
  width: min(640px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.48)),
    radial-gradient(circle at 12% 12%, rgba(250,204,21,0.42), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(244,114,182,0.34), transparent 38%),
    radial-gradient(circle at 72% 92%, rgba(96,165,250,0.34), transparent 40%),
    radial-gradient(circle at 18% 88%, rgba(52,211,153,0.26), transparent 38%);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow: 0 28px 80px rgba(30,41,59,0.28), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.dark .shop-modal-card {
  background:
    linear-gradient(135deg, rgba(15,23,42,0.88), rgba(30,41,59,0.7)),
    radial-gradient(circle at 12% 12%, rgba(250,204,21,0.2), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(244,114,182,0.2), transparent 38%),
    radial-gradient(circle at 72% 92%, rgba(96,165,250,0.2), transparent 40%);
  border-color: rgba(255,255,255,0.18);
}

#ollieShopModal .modal-close {
  z-index: 5;
  color: #111827;
  background: rgba(255,255,255,0.88);
  border-color: rgba(15,23,42,0.18);
  box-shadow: 0 8px 22px rgba(15,23,42,0.16);
}

body.dark #ollieShopModal .modal-close {
  color: #ffffff;
  background: rgba(15,23,42,0.88);
  border-color: rgba(255,255,255,0.22);
}

.shop-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -4px -4px 16px;
  padding: 4px 44px 16px 4px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.34));
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  flex-wrap: wrap;
}

body.dark .shop-header {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.78) 100%);
}

.shop-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.shop-title-group h2 {
  font-size: 1.5rem;
  margin: 0;
  color: var(--text);
}

.shop-title-group p {
  color: var(--muted);
  margin-top: 2px;
  font-size: 0.85rem;
}

.shop-xp-badge {
  background: linear-gradient(135deg, var(--gold), #f59e0b);
  padding: 8px 16px;
  border-radius: 99px;
  font-weight: 800;
  color: #1e1b4b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 12px 28px rgba(245, 158, 11, 0.24);
}

.shop-catalog-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 8px 6px 0;
  scrollbar-gutter: stable;
}

.shop-catalog-scroll::-webkit-scrollbar {
  width: 10px;
}

.shop-catalog-scroll::-webkit-scrollbar-track {
  background: rgba(116, 57, 246, 0.08);
  border-radius: 99px;
}

.shop-catalog-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(157, 78, 221, 0.88), rgba(245, 158, 11, 0.78));
  border: 2px solid transparent;
  border-radius: 99px;
  background-clip: padding-box;
}

.shop-catalog-scroll:focus-visible {
  outline: 3px solid rgba(157, 78, 221, 0.45);
  outline-offset: 3px;
}

.shop-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.shop-item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px;
  background: rgba(255,255,255,0.56);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  transition: all 0.25s ease;
}

body.dark .shop-item-card {
  background: rgba(15,23,42,0.46);
  border-color: rgba(255,255,255,0.16);
}

.shop-item-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.2);
}

.shop-item-icon {
  font-size: 2.8rem;
  margin-bottom: 10px;
  line-height: 1;
}

.shop-item-card h4 {
  font-size: 1.05rem;
  margin: 0 0 4px;
  color: var(--text);
}

.shop-item-card p {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 16px;
  line-height: 1.4;
}

.shop-item-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.shop-price {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--gold);
}

.shop-action-btn {
  min-height: 36px;
  padding: 0 16px;
  font-size: 0.82rem;
  font-weight: 800;
}

/* Admin access role switch */
.access-admin-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(116,57,246,0.2);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.38), rgba(116,57,246,0.08));
}

.access-admin-control > div {
  display: grid;
  gap: 3px;
}

.access-admin-control strong {
  color: var(--text);
  font-size: 0.9rem;
}

.access-admin-control #access-admin-status {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.access-admin-control #access-admin-status.is-admin {
  color: #047857;
}

.access-admin-switch {
  flex: 0 0 auto;
  cursor: pointer;
}

.access-admin-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.access-admin-track {
  width: 46px;
  height: 26px;
  padding: 3px;
  border-radius: 99px;
  display: block;
  background: #cbd5e1;
  box-shadow: inset 0 2px 5px rgba(15,23,42,0.18);
  transition: background 0.22s ease, box-shadow 0.22s ease;
}

.access-admin-track span {
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(15,23,42,0.28);
  transition: transform 0.22s ease;
}

.access-admin-switch input:checked + .access-admin-track {
  background: linear-gradient(135deg, #7439f6, #ec4899);
  box-shadow: 0 0 0 4px rgba(116,57,246,0.12), inset 0 1px 3px rgba(15,23,42,0.2);
}

.access-admin-switch input:checked + .access-admin-track span {
  transform: translateX(20px);
}

.access-admin-switch input:focus-visible + .access-admin-track {
  outline: 3px solid rgba(116,57,246,0.42);
  outline-offset: 3px;
}

.access-admin-switch input:disabled + .access-admin-track {
  opacity: 0.55;
  cursor: not-allowed;
}

body.dark .access-admin-control #access-admin-status.is-admin {
  color: #6ee7b7;
}

@media (max-width: 720px) {
  .shop-modal-card {
    width: min(100%, calc(100vw - 20px));
    max-height: 88vh;
    padding: 22px;
    border-radius: 22px;
  }

  .shop-header {
    padding-right: 42px;
  }

  .shop-catalog-grid {
    grid-template-columns: 1fr;
  }

  .shop-item-footer {
    gap: 12px;
  }
}






/* ============================================================================
   PATH ENGINE v2 — estados que faltaban en los nodos generados
   ============================================================================ */

/* Examen bloqueado: mantiene la forma dorada pero apagada, para que se lea
   como "meta pendiente" y no como disponible. */
.unit-card.exam-node.locked {
  background: linear-gradient(135deg, #E5E7EB, #D1D5DB) !important;
  border-color: #CBD5E1 !important;
  filter: none;
}
.unit-card.exam-node.locked h3,
.unit-card.exam-node.locked p,
.unit-card.exam-node.locked span {
  color: #64748B !important;
}
.unit-card.exam-node.locked::before {
  content: '🔒';
  background: #F8FAFC;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.unit-card.exam-node.locked .unit-cta-btn {
  background: #94A3B8 !important;
  color: #F8FAFC !important;
}

body.dark .unit-card.exam-node.locked {
  background: linear-gradient(135deg, #1E293B, #334155) !important;
  border-color: #475569 !important;
}
body.dark .unit-card.exam-node.locked h3,
body.dark .unit-card.exam-node.locked p,
body.dark .unit-card.exam-node.locked span {
  color: #94A3B8 !important;
}
body.dark .unit-card.exam-node.locked::before {
  background: #0F172A;
}

/* Examen aprobado: verde de logro, gana sobre el dorado */
.unit-card.exam-node.completed {
  background: linear-gradient(135deg, #34D399, #059669) !important;
  border-color: #10B981 !important;
}
.unit-card.exam-node.completed h3,
.unit-card.exam-node.completed p,
.unit-card.exam-node.completed span {
  color: #052E16 !important;
}
.unit-card.exam-node.completed::before {
  content: '🎓';
  background: #FFFFFF;
}
.unit-card.exam-node.completed .unit-cta-btn {
  background: #052E16 !important;
  color: #A7F3D0 !important;
}

/* Unidad normal completada: marca clara de "ya lo hiciste" */
.unit-card.path-node.completed:not(.exam-node) .unit-top-accent {
  background: #10B981 !important;
}
.unit-card.path-node.completed:not(.exam-node)::after {
  content: '✓';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #10B981;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  z-index: 4;
}

/* Contador de preguntas en la meta del nodo */
.unit-meta span { white-space: nowrap; }

/* ============================================================================
   RUTA IA — temario A1-C2 y aula generativa independiente
   ============================================================================ */

.ai-course-view {
  --ai-level: #16a34a;
  --ai-level-soft: #dcfce7;
  color: var(--text);
}

/* Esta vista ya incluye a Ollie dentro del aula; ocultar el acceso flotante
   evita que cubra el campo de conversación de la lección. */
body:has(#ai-course.active) .ollie-floating-btn,
body:has(#ai-course.active) .theme-toggle {
  display: none;
}

.ai-course-heading,
.ai-lesson-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ai-course-heading h1,
.ai-lesson-topbar h1 {
  margin: 4px 0 2px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 3vw, 2.7rem);
  letter-spacing: 0;
}

.ai-course-heading p,
.ai-lesson-topbar span {
  margin: 0;
  color: var(--muted);
  font-weight: 650;
}

.ai-course-kicker {
  color: #6d28d9;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ai-course-resume {
  min-width: 176px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.18);
  cursor: pointer;
  text-align: left;
}

.ai-course-resume > span:first-child {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #facc15;
  color: #111827;
}

.ai-course-resume small,
.ai-course-resume strong {
  display: block;
}

.ai-course-resume small { color: #cbd5e1; }
.ai-course-resume strong { margin-top: 2px; font-size: 1rem; }

.ai-course-summary {
  margin: 26px 0 22px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 92px minmax(240px, 1fr) 110px 110px;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(110deg, rgba(255,255,255,0.94), rgba(240,253,250,0.9) 48%, rgba(250,245,255,0.9));
  box-shadow: var(--shadow-soft);
}

.ai-course-ring {
  width: 82px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #fff 75%, transparent 77% 100%), conic-gradient(#16a34a var(--ai-progress, 0%), #e2e8f0 0);
  text-align: center;
}

.ai-course-ring strong { font: 900 1.2rem "Outfit", sans-serif; }
.ai-course-ring span { color: var(--muted); font-size: 0.66rem; font-weight: 800; }

.ai-course-summary-copy > span {
  color: #0f766e;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-course-summary-copy h2 { margin: 3px 0; font-size: 1.25rem; }
.ai-course-summary-copy p { margin: 0 0 9px; color: var(--muted); font-size: 0.85rem; }

.ai-course-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: #e2e8f0;
}

.ai-course-progress-track span {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a34a, #14b8a6, #7c3aed);
  transition: width 0.35s ease;
}

.ai-course-stat {
  min-height: 66px;
  display: grid;
  place-content: center;
  border-left: 1px solid var(--line);
  text-align: center;
}

.ai-course-stat strong { font: 900 1.55rem "Outfit", sans-serif; }
.ai-course-stat span { color: var(--muted); font-size: 0.72rem; font-weight: 750; }

.ai-course-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.ai-level-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(54px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.ai-level-tab {
  min-height: 38px;
  padding: 7px 14px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.ai-level-tab.active {
  background: var(--tab-color, #16a34a);
  color: #fff;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--tab-color, #16a34a) 28%, transparent);
}

.ai-course-search {
  width: min(300px, 36vw);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.ai-course-search input {
  width: 100%;
  min-height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.ai-syllabus-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.ai-level-rail {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 6px;
}

.ai-rail-item {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.ai-rail-item:hover,
.ai-rail-item.active {
  border-color: color-mix(in srgb, var(--rail-color) 38%, var(--line));
  background: color-mix(in srgb, var(--rail-color) 9%, var(--surface));
}

.ai-rail-code {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--rail-color);
  color: #fff;
  font-weight: 900;
}

.ai-rail-item strong,
.ai-rail-item small { display: block; }
.ai-rail-item strong { font-size: 0.84rem; }
.ai-rail-item small { margin-top: 2px; color: var(--muted); font-size: 0.68rem; }
.ai-rail-percent { color: var(--rail-color); font-size: 0.74rem; font-weight: 900; }

.ai-syllabus-list { display: grid; gap: 10px; }

.ai-syllabus-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 0 0 4px;
}

.ai-syllabus-title h2 { margin: 0; font: 900 1.45rem "Outfit", sans-serif; }
.ai-syllabus-title span { color: var(--muted); font-size: 0.78rem; font-weight: 750; }

.ai-topic-row {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--topic-color);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ai-topic-row:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--topic-color) 50%, var(--line));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--topic-color) 12%, transparent);
}

.ai-topic-row.current { background: color-mix(in srgb, var(--topic-color) 7%, var(--surface)); }
.ai-topic-row.completed .ai-topic-number { background: #15803d; }

.ai-topic-number {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--topic-color);
  color: #fff;
  font: 900 0.9rem "Outfit", sans-serif;
}

.ai-topic-copy strong { display: block; font-size: 1rem; }
.ai-topic-copy p { margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.35; }

.ai-topic-meta {
  min-width: 108px;
  display: grid;
  justify-items: end;
  gap: 6px;
}

.ai-topic-meta span { color: var(--muted); font-size: 0.72rem; font-weight: 800; }
.ai-topic-status { color: var(--topic-color) !important; }

.ai-syllabus-empty {
  padding: 48px 20px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

/* Aula */
.ai-course-lesson[hidden],
#aiCourseOverview[hidden] { display: none !important; }

.ai-icon-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 1.15rem;
  cursor: pointer;
}

.ai-icon-btn:hover { border-color: var(--ai-level); color: var(--ai-level); }
.ai-lesson-topbar > div:nth-child(2) { flex: 1; }
.ai-lesson-actions { display: flex; gap: 8px; }

.ai-lesson-progress {
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.ai-lesson-progress span {
  padding: 8px 10px;
  border-bottom: 4px solid #e2e8f0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-align: center;
}

.ai-lesson-progress span.active,
.ai-lesson-progress span.done { border-color: var(--ai-level); color: var(--text); }

.ai-lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: stretch;
}

.ai-lesson-stage,
.ai-lesson-coach {
  min-height: 600px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.ai-lesson-stage { overflow: hidden; }

.ai-lesson-loading {
  min-height: 600px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 30px;
  text-align: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ai-level) 9%, #fff), #fff 55%, #fdf4ff);
}

.ai-spark-loader {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ai-level);
  color: #fff;
  font-size: 1.7rem;
  animation: aiSparkPulse 1.1s ease-in-out infinite;
}

@keyframes aiSparkPulse { 50% { transform: scale(1.08) rotate(12deg); } }

.ai-lesson-content { min-width: 0; min-height: 600px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
.ai-lesson-content > div { min-width: 0; width: 100%; }

.ai-lesson-intro {
  padding: 28px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--ai-level) 16%, #fff), #fff 58%, #fef3c7);
  border-bottom: 1px solid var(--line);
}

.ai-lesson-intro > span { color: var(--ai-level); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.ai-lesson-intro h2 { margin: 8px 0; font: 900 clamp(1.65rem, 3vw, 2.35rem) "Outfit", sans-serif; letter-spacing: 0; }
.ai-lesson-intro p { max-width: 780px; margin: 0; color: var(--text); font-size: 1.05rem; line-height: 1.55; }

.ai-key-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 28px 0;
}

.ai-key-point {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ai-level) 25%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--ai-level) 6%, var(--surface));
  font-size: 0.86rem;
  font-weight: 750;
}

.ai-key-point span { color: var(--ai-level); font-size: 1.1rem; }

.ai-examples { padding: 20px 28px; }
.ai-generated-lab { margin: 4px 28px 24px; }
.ai-generated-lab .vocabulary-wheel-layout,
.ai-generated-lab .listening-lab-layout,
.ai-generated-lab .writing-studio-layout { grid-template-columns: 1fr; }
.ai-generated-lab .vocabulary-wheel-wrap,
.ai-generated-lab .listening-stage-visual,
.ai-generated-lab .writing-mission {
  min-height: 250px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}
.ai-examples h3,
.ai-challenge h3 { margin: 0 0 12px; font: 900 1rem "Outfit", sans-serif; }

.ai-example-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.ai-example-row:last-child { border-bottom: 0; }
.ai-example-audio { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--ai-level); color: #fff; cursor: pointer; }
.ai-example-row strong,
.ai-example-row span { display: block; }
.ai-example-row strong { font-size: 1.08rem; }
.ai-example-row span { margin-top: 2px; color: var(--muted); font-size: 0.8rem; }

.ai-challenge {
  margin: 0 28px 28px;
  padding: 20px;
  border: 2px solid color-mix(in srgb, var(--ai-level) 35%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--ai-level) 5%, var(--surface));
}

.ai-challenge-question { margin: 0 0 14px; font: 800 1.22rem/1.35 "Outfit", sans-serif; }
.ai-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

.ai-answer-option {
  min-height: 50px;
  padding: 10px 13px;
  border: 2px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: 750 0.9rem "Inter", sans-serif;
  cursor: pointer;
  text-align: left;
}

.ai-answer-option:hover { border-color: var(--ai-level); }
.ai-answer-option.correct { border-color: #16a34a; background: #dcfce7; color: #14532d; }
.ai-answer-option.wrong { border-color: #e11d48; background: #ffe4e6; color: #881337; }
.ai-answer-option:disabled { cursor: default; }

.ai-challenge-feedback { margin: 14px 0 0; padding: 10px 12px; border-radius: 6px; font-weight: 750; }
.ai-challenge-feedback.correct { background: #dcfce7; color: #14532d; }
.ai-challenge-feedback.wrong { background: #fff1f2; color: #9f1239; }

.ai-self-check { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ai-self-check p { margin: 0 0 9px; font-size: 0.82rem; font-weight: 800; }
.ai-self-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ai-self-options button { min-height: 40px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font-weight: 750; cursor: pointer; }
.ai-self-options button.selected { border-color: var(--ai-level); background: color-mix(in srgb, var(--ai-level) 12%, var(--surface)); color: var(--ai-level); }

.ai-lesson-complete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 16px;
  border: 2px solid #18b967;
  border-radius: 8px;
  background: linear-gradient(120deg, rgba(57, 255, 136, 0.13), rgba(255,255,255,0.82));
  box-shadow: 0 10px 24px rgba(24, 185, 103, 0.12);
}

.ai-lesson-complete[hidden] { display: none !important; }
.ai-lesson-complete > div:first-child { min-width: 0; }
.ai-lesson-complete span,
.ai-lesson-complete strong { display: block; }
.ai-lesson-complete span { margin-bottom: 4px; color: #087f5b; font-size: 0.68rem; font-weight: 900; }
.ai-lesson-complete strong { font: 850 0.94rem/1.35 "Outfit", sans-serif; }
.ai-lesson-complete-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.ai-overview-btn,
.ai-next-lesson-btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 7px;
  font-weight: 850;
  cursor: pointer;
}

.ai-overview-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.ai-next-lesson-btn { border: 1px solid #0e9f58; background: #18b967; color: #fff; box-shadow: 0 7px 16px rgba(24, 185, 103, 0.2); }
.ai-next-lesson-btn:hover { background: #0e9f58; transform: translateY(-1px); }

.ai-lesson-coach { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.ai-coach-header { display: flex; gap: 10px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--ai-level) 8%, var(--surface)); }
.ai-coach-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--ai-level-soft); font-size: 1.25rem; }
.ai-coach-header strong,
.ai-coach-header span { display: block; }
.ai-coach-header span { margin-top: 2px; color: var(--muted); font-size: 0.72rem; }
.ai-coach-messages { min-height: 0; max-height: 515px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-coach-message { max-width: 90%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--ai-level) 7%, var(--surface)); font-size: 0.84rem; line-height: 1.45; white-space: pre-wrap; }
.ai-coach-message.user { margin-left: auto; border-color: var(--ai-level); background: var(--ai-level); color: #fff; }
.ai-coach-message.thinking { color: var(--muted); font-style: italic; }
.ai-coach-form { display: grid; grid-template-columns: 1fr 42px; gap: 7px; padding: 12px; border-top: 1px solid var(--line); }
.ai-coach-form input { min-width: 0; min-height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; outline: 0; }
.ai-coach-form input:focus { border-color: var(--ai-level); }
.ai-coach-form button { border: 0; border-radius: 7px; background: var(--ai-level); color: #fff; font-size: 1rem; cursor: pointer; }

body.dark .ai-course-summary,
body.dark .ai-lesson-loading,
body.dark .ai-lesson-intro { background: linear-gradient(120deg, #171f2d, #202638 58%, #2a2034); }
body.dark .ai-course-ring { background: radial-gradient(circle closest-side, #171b28 75%, transparent 77% 100%), conic-gradient(#34d399 var(--ai-progress, 0%), #334155 0); }
body.dark .ai-answer-option.correct,
body.dark .ai-challenge-feedback.correct { background: #153c2c; color: #bbf7d0; }
body.dark .ai-answer-option.wrong,
body.dark .ai-challenge-feedback.wrong { background: #4c1d2a; color: #fecdd3; }
body.dark .ai-lesson-complete { background: linear-gradient(120deg, #153c2c, #172233); }

/* ==========================================================================
   LESSONS V2 — recorrido claro, tarjetas completas y contraste por habilidad
   ========================================================================== */

#lessons {
  --lesson-neon: #16d978;
  --lesson-neon-soft: rgba(22, 217, 120, 0.12);
  --lesson-alert: #ef476f;
  --lesson-alert-soft: rgba(239, 71, 111, 0.1);
}

.lessons-page-kicker,
.daily-goal-label {
  color: #087f5b;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

#lessons .page-title {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

#lessons .page-title h1 { margin: 4px 0; }

#lessons .lesson-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  margin-bottom: 26px !important;
}

#lessons .lesson-focus {
  min-height: 300px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background:
    linear-gradient(130deg, rgba(10, 19, 46, 0.76), rgba(34, 197, 94, 0.24)),
    linear-gradient(135deg, #21409a, #6d28d9 58%, #ef476f);
  box-shadow: 0 18px 42px rgba(63, 52, 153, 0.22);
}

#lessons .lesson-focus .pill {
  align-self: flex-start;
  border: 1px solid rgba(57, 255, 136, 0.5);
  background: rgba(4, 18, 24, 0.28);
  color: #6dffad;
}

#lessons .lesson-focus h2 { max-width: 760px; font-size: clamp(1.55rem, 2.4vw, 2.15rem); }

#lessons .focus-steps {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

#lessons .focus-steps button {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 4px solid #39ff88;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  text-align: left;
}

#lessons .focus-steps button:hover,
#lessons .focus-steps button:focus-visible {
  border-color: #39ff88;
  background: rgba(57, 255, 136, 0.14);
  outline: 0;
  transform: translateX(4px);
}

#lessons .daily-card {
  justify-content: flex-start;
  gap: 6px;
  padding: 28px;
  border: 1px solid rgba(239, 71, 111, 0.32) !important;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 235, 241, 0.72)),
    var(--surface) !important;
  box-shadow: 0 16px 36px rgba(239, 71, 111, 0.1);
}

#lessons .daily-card h3 { margin-top: 4px; }
#lessons .daily-card .progress-track { margin-top: auto; }

.daily-learning-studio {
  margin: 0 0 28px;
  padding: 26px;
  border: 1px solid rgba(67, 97, 238, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(232, 245, 255, 0.62) 48%, rgba(241, 232, 255, 0.6));
  box-shadow: 0 18px 48px rgba(58, 72, 129, 0.09);
  backdrop-filter: blur(20px);
}

.daily-studio-heading { align-items: center; }
.daily-studio-heading h2 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
.daily-studio-kicker { color: #5b21b6; }

.daily-level-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(54px, 1fr));
  max-width: 620px;
  gap: 6px;
  margin: 20px 0;
}

.daily-level-tabs button {
  --daily-tab: #16a34a;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--daily-tab) 25%, var(--line));
  background: color-mix(in srgb, var(--daily-tab) 7%, var(--surface));
  color: var(--daily-tab);
}

.daily-level-tabs button:nth-child(2) { --daily-tab: #0284c7; }
.daily-level-tabs button:nth-child(3) { --daily-tab: #d97706; }
.daily-level-tabs button:nth-child(4) { --daily-tab: #db2777; }
.daily-level-tabs button:nth-child(5) { --daily-tab: #7c3aed; }
.daily-level-tabs button:nth-child(6) { --daily-tab: #0f766e; }
.daily-level-tabs button.active { background: var(--daily-tab); color: #fff; }

.daily-media-grid {
  position: relative;
  grid-template-columns: 1fr;
  gap: 10px;
}

.daily-media-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 26px;
  bottom: 26px;
  left: 25px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(#4361ee, #16d978 48%, #ef476f);
  opacity: 0.28;
}

.daily-media-card {
  --media-accent: #4361ee;
  position: relative;
  z-index: 1;
  min-height: 138px;
  display: grid;
  grid-template-columns: 52px 150px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--media-accent) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--media-accent) 4%, rgba(255, 255, 255, 0.9));
  box-shadow: 0 8px 22px rgba(35, 45, 80, 0.06);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.daily-media-story { --media-accent: #e69f00; }
.daily-media-visual { --media-accent: #10b968; }
.daily-media-audio { --media-accent: #7c3aed; }
.daily-media-writing { --media-accent: #ef476f; }

.daily-media-card.daily-media-visual {
  height: auto;
  place-items: initial;
  color: var(--text);
}

.daily-media-card:hover,
.daily-media-card:focus-visible {
  border-color: var(--media-accent);
  box-shadow: 0 13px 30px color-mix(in srgb, var(--media-accent) 14%, transparent);
  outline: 0;
  transform: translateX(5px);
}

.daily-media-step {
  align-self: center;
  justify-self: center;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 3px solid var(--surface-strong);
  border-radius: 50%;
  background: var(--media-accent);
  color: #fff;
  font: 900 0.74rem "Outfit", sans-serif;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--media-accent) 45%, transparent);
}

.daily-media-card .daily-media-visual {
  width: 100%;
  height: auto;
  min-height: 138px;
  color: var(--media-accent);
  background: color-mix(in srgb, var(--media-accent) 12%, #fff);
}

.daily-media-copy { min-height: 0; padding: 18px 20px; }
.daily-media-copy > span:first-child { color: var(--media-accent); }
.daily-media-copy h3 { font-size: 1.12rem; }
.daily-media-copy p { margin-bottom: 8px; -webkit-line-clamp: 2; }
.daily-media-action { margin-top: auto; color: var(--media-accent) !important; font-size: 0.82rem !important; font-weight: 900 !important; }

.daily-library-heading { align-items: center; padding-top: 4px; }
.daily-library-item:hover,
.daily-library-item:focus-visible { border-color: currentColor; transform: translateY(-2px); }

.lesson-catalog-heading {
  margin: 34px 0 14px;
  padding: 0 2px;
}

.lesson-catalog-heading h2 { margin: 4px 0; font-size: 1.55rem; }
.lesson-catalog-heading p { margin: 0; color: var(--muted); }

#lessons .course-grid.full {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px !important;
  margin-top: 0 !important;
}

#lessons .course-card.lesson {
  --skill-color: #4361ee;
  min-height: 232px;
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  border: 1px solid color-mix(in srgb, var(--skill-color) 28%, var(--line));
  border-left: 5px solid var(--skill-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--skill-color) 4%, var(--surface));
  box-shadow: 0 10px 28px rgba(34, 44, 78, 0.07);
  cursor: pointer;
}

#lessons .course-card.lesson.green { --skill-color: #00b968; }
#lessons .course-card.lesson.amber { --skill-color: #e69f00; }
#lessons .course-card.lesson.purple { --skill-color: #7c3aed; }
#lessons .course-card.lesson.pink { --skill-color: #ef476f; }
#lessons .course-card.lesson.teal { --skill-color: #008f9c; }

#lessons .course-card.lesson:hover,
#lessons .course-card.lesson:focus-visible {
  border-color: var(--skill-color);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--skill-color) 15%, transparent);
  outline: 0;
  transform: translateY(-3px);
}

#lessons .course-card.lesson > img {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: 232px;
  border: 0;
}

#lessons .course-card.lesson > :not(img):not(.daily-badge) { grid-column: 2; }
#lessons .course-card.lesson h3 { margin: 22px 18px 4px; font-size: 1.08rem; }
#lessons .course-card.lesson > p { margin: 0 18px 8px; }
#lessons .course-card.lesson .daily-card-meta { margin: 7px 18px; }
#lessons .course-card.lesson .mini-bar { margin: 10px 18px 8px; }
#lessons .course-card.lesson > .course-card-cta {
  display: block;
  margin: 0 18px 18px;
  padding: 0;
  color: var(--skill-color);
  font-weight: 900;
}

/* ==========================================================================
   RUTA IA V2 — mapa vertical, estados pedagógicos y controles globales
   ========================================================================== */

#ai-course { padding-bottom: 118px; }

body:has(#ai-course.active) .ollie-floating-btn { display: inline-flex; }
body:has(#ai-course.active) .theme-toggle { display: inline-flex; }

.ai-course-heading {
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--ai-level) 28%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--ai-level) 11%, rgba(255,255,255,0.86)), rgba(255,255,255,0.68) 55%, rgba(239,71,111,0.07));
  box-shadow: 0 14px 36px color-mix(in srgb, var(--ai-level) 9%, transparent);
  backdrop-filter: blur(18px);
}

.ai-course-kicker { color: var(--ai-level); }

.ai-course-summary {
  margin-top: 14px;
  border-color: color-mix(in srgb, var(--ai-level) 22%, var(--line));
  background:
    linear-gradient(110deg, rgba(255,255,255,0.82), color-mix(in srgb, var(--ai-level) 7%, rgba(255,255,255,0.75)) 55%, rgba(255,241,245,0.72));
  backdrop-filter: blur(18px);
}

.ai-course-progress-track span { background: linear-gradient(90deg, var(--ai-level), #39ff88); }
.ai-course-summary-copy > span { color: var(--ai-level); }

.ai-course-toolbar {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(16px);
}

.ai-syllabus-layout { grid-template-columns: 230px minmax(0, 1fr); }

.ai-level-rail {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.58);
  box-shadow: 0 12px 30px rgba(34,44,78,0.06);
  backdrop-filter: blur(16px);
}

.ai-rail-item { position: relative; min-height: 62px; }
.ai-rail-item + .ai-rail-item::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 28px;
  width: 2px;
  height: 10px;
  background: color-mix(in srgb, var(--rail-color) 36%, var(--line));
}

.ai-syllabus-column {
  min-width: 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--ai-level) 20%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--ai-level) 3%, rgba(255,255,255,0.68));
  backdrop-filter: blur(18px);
}

@media (min-width: 1101px) {
  #ai-course.active .ai-syllabus-column {
    padding-right: 164px;
  }
}

.ai-path-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
  padding: 10px 12px;
  border-left: 4px solid var(--ai-level);
  background: color-mix(in srgb, var(--ai-level) 7%, transparent);
}

.ai-path-intro span { color: var(--ai-level); font-size: 0.7rem; font-weight: 900; }
.ai-path-intro strong { font-size: 0.82rem; }

.ai-syllabus-list { position: relative; gap: 12px; }
.ai-syllabus-list::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 58px;
  bottom: 38px;
  left: 41px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(var(--ai-level), #39ff88 72%, #ef476f);
  opacity: 0.24;
}

.ai-syllabus-title { position: relative; z-index: 1; padding: 0 4px 8px; }

.ai-topic-row {
  position: relative;
  z-index: 1;
  width: calc(100% - 34px);
  min-height: 96px;
  border-left-width: 1px;
  background: color-mix(in srgb, var(--topic-color) 3%, rgba(255,255,255,0.9));
}

.ai-topic-row:nth-of-type(even) { margin-left: 34px; }
.ai-topic-row.current {
  border: 2px solid #18cf72;
  background: color-mix(in srgb, #39ff88 9%, var(--surface));
  box-shadow: 0 0 0 4px rgba(57,255,136,0.1), 0 12px 28px rgba(24,207,114,0.12);
}

.ai-topic-row.current .ai-topic-number { background: #18b967; box-shadow: 0 0 18px rgba(57,255,136,0.48); }
.ai-topic-row.mastered { border-color: #16a34a; background: rgba(220,252,231,0.68); }
.ai-topic-row.review { border-color: #ef476f; background: rgba(255,228,230,0.58); }
.ai-topic-row.review .ai-topic-number { background: #e11d48; }
.ai-topic-row.review .ai-topic-status { color: #e11d48 !important; }

body.dark .daily-learning-studio,
body.dark #lessons .daily-card,
body.dark .ai-course-heading,
body.dark .ai-course-summary,
body.dark .ai-course-toolbar,
body.dark .ai-level-rail,
body.dark .ai-syllabus-column {
  background: rgba(20, 27, 42, 0.78) !important;
}

body.dark .daily-media-card,
body.dark #lessons .course-card.lesson,
body.dark .ai-topic-row { background: color-mix(in srgb, var(--media-accent, var(--topic-color, #7c3aed)) 8%, #171f2d); }
body.dark .ai-topic-row.mastered { background: #153c2c; }
body.dark .ai-topic-row.review { background: #4c1d2a; }

@media (max-width: 1100px) {
  #lessons .lesson-layout { grid-template-columns: 1fr; }
  #lessons .course-grid.full { grid-template-columns: 1fr; }
  .ai-course-summary { grid-template-columns: 82px 1fr 90px; }
  .ai-course-stat:last-child { display: none; }
  .ai-syllabus-layout { grid-template-columns: 1fr; }
  .ai-level-rail { position: static; grid-template-columns: repeat(6, 1fr); }
  .ai-rail-item { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ai-rail-item > span:not(.ai-rail-code) { display: none; }
  .ai-rail-percent { display: none; }
  .ai-lesson-layout { grid-template-columns: 1fr; }
  .ai-lesson-stage,
  .ai-lesson-coach { min-height: auto; }
  .ai-coach-messages { min-height: 220px; max-height: 360px; }
}

@media (max-width: 700px) {
  .daily-learning-studio { padding: 18px 14px; }
  .daily-studio-heading { align-items: flex-start; }
  .daily-level-tabs { grid-template-columns: repeat(3, 1fr); }
  .daily-media-card { grid-template-columns: 46px minmax(0, 1fr); }
  .daily-media-card .daily-media-visual { grid-column: 2; min-height: 116px; }
  .daily-media-copy { grid-column: 2; padding: 14px 16px 17px; }
  #lessons .course-card.lesson { grid-template-columns: 118px minmax(0, 1fr); }
  #lessons .course-card.lesson > img { min-height: 245px; }
  .ai-syllabus-column { padding: 12px; }
  .ai-path-intro { align-items: flex-start; flex-direction: column; }
  .ai-topic-row,
  .ai-topic-row:nth-of-type(even) { width: 100%; margin-left: 0; }
  .ai-course-heading { align-items: flex-start; flex-direction: column; }
  .ai-course-resume { width: 100%; }
  .ai-course-summary { padding: 16px; grid-template-columns: 72px 1fr; gap: 14px; }
  .ai-course-ring { width: 70px; }
  .ai-course-stat { display: none; }
  .ai-course-toolbar { align-items: stretch; flex-direction: column; }
  .ai-level-tabs { grid-template-columns: repeat(6, 1fr); }
  .ai-level-tab { min-width: 0; padding: 7px 4px; }
  .ai-course-search { width: 100%; }
  .ai-level-rail { display: none; }
  .ai-topic-row { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .ai-topic-number { width: 44px; height: 44px; }
  .ai-topic-meta { grid-column: 2; min-width: 0; justify-items: start; grid-auto-flow: column; justify-content: start; }
  .ai-lesson-topbar { gap: 10px; }
  .ai-lesson-topbar h1 { font-size: 1.35rem; }
  .ai-lesson-actions { gap: 4px; }
  .ai-icon-btn { width: 40px; height: 40px; flex-basis: 40px; }
  .ai-lesson-progress span { padding: 7px 2px; font-size: 0.63rem; }
  .ai-key-points { grid-template-columns: 1fr; padding: 14px 16px 0; }
  .ai-lesson-intro,
  .ai-examples { padding: 20px 16px; }
  .ai-challenge { margin: 0 16px 20px; padding: 15px; }
  .ai-answer-grid { grid-template-columns: 1fr; }
  .ai-self-options { grid-template-columns: 1fr; }
  .ai-lesson-complete { align-items: stretch; flex-direction: column; }
  .ai-lesson-complete-actions { display: grid; grid-template-columns: 1fr; }
  body:has(#ai-course.active) .ollie-floating-btn,
  body:has(#ai-course.active) .theme-toggle {
    right: 12px;
    width: 48px;
    min-width: 48px;
    padding: 0;
    justify-content: center;
  }
  body:has(#ai-course.active) .ollie-floating-btn { bottom: 72px; }
  body:has(#ai-course.active) .theme-toggle { bottom: 14px; }
  body:has(#ai-course.active) .ollie-floating-text,
  body:has(#ai-course.active) .ollie-pulse-badge,
  body:has(#ai-course.active) .theme-toggle strong { display: none; }
}
/* La voz neuronal se carga solo al primer uso; el control conserva su
   tamano y comunica que esta preparando el audio sin bloquear la interfaz. */
.cargando-voz {
  cursor: progress !important;
  opacity: 0.72;
}

/* ==========================================================================
   LEVEL EXPERIENCE V3 - rutas A1-C2 claras, abiertas y animadas
   ========================================================================= */

#level-basic,
#level-intermediate,
#level-advanced {
  --level-accent: #16d981;
  --level-accent-rgb: 22, 217, 129;
  --level-secondary: #d7ff35;
  --level-ink: #0b241b;
  --level-canvas: #f4fbf8;
  margin-top: 0;
  padding: clamp(16px, 2.5vw, 30px) clamp(14px, 3vw, 34px) 64px;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(var(--level-accent-rgb), .12), transparent 34%),
    linear-gradient(315deg, color-mix(in srgb, var(--level-secondary) 10%, transparent), transparent 42%),
    var(--level-canvas);
  box-shadow: none;
  overflow: clip;
}

#level-intermediate {
  --level-accent: #ff315d;
  --level-accent-rgb: 255, 49, 93;
  --level-secondary: #ffbf24;
  --level-ink: #321018;
  --level-canvas: #fcf7f8;
}

#level-advanced {
  --level-accent: #8a5cff;
  --level-accent-rgb: 138, 92, 255;
  --level-secondary: #22e6cf;
  --level-ink: #201347;
  --level-canvas: #f8f7fc;
  color: var(--text);
}

body.dark #level-basic,
body.dark #level-intermediate,
body.dark #level-advanced {
  --level-canvas: #0d1119;
  border: 0;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(var(--level-accent-rgb), .12), transparent 34%),
    linear-gradient(315deg, color-mix(in srgb, var(--level-secondary) 7%, transparent), transparent 42%),
    var(--level-canvas);
  box-shadow: none;
}

#level-basic .path-bg-decorations,
#level-intermediate .path-bg-decorations,
#level-advanced .path-bg-decorations {
  display: none;
}

#level-basic .level-hero-card,
#level-intermediate .level-hero-card,
#level-advanced .level-hero-card {
  width: min(1000px, 100%);
  min-height: 180px;
  margin: 0 auto 16px;
  padding: clamp(16px, 2vw, 24px);
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(var(--level-accent-rgb), .15);
  border-top: 2px solid var(--level-accent);
  border-radius: 12px;
  color: var(--level-ink);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08), inset 0 1px rgba(255,255,255,.8);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  overflow: hidden;
  position: relative;
}

#level-basic .level-hero-card::before,
#level-intermediate .level-hero-card::before,
#level-advanced .level-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(var(--level-accent-rgb), .12), transparent 48%),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(var(--level-accent-rgb), .035) 58px 59px);
}

body.dark #level-basic .level-hero-card,
body.dark #level-intermediate .level-hero-card,
body.dark #level-advanced .level-hero-card {
  color: var(--text);
  background: rgba(17, 24, 39, .76);
  border-color: rgba(var(--level-accent-rgb), .3);
  border-top-color: var(--level-accent);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .3), inset 0 1px rgba(255,255,255,.06);
}

.view.active:is(#level-basic, #level-intermediate, #level-advanced) .level-hero-card {
  animation: levelHeroEnter .62s cubic-bezier(.2,.8,.2,1) both;
}

#level-basic .hero-content,
#level-intermediate .hero-content,
#level-advanced .hero-content {
  position: relative;
  z-index: 1;
  gap: 11px;
}

#level-basic .hero-eyebrow,
#level-intermediate .hero-eyebrow,
#level-advanced .hero-eyebrow {
  padding: 0 0 7px;
  border-bottom: 2px solid var(--level-accent);
  border-radius: 0;
  color: color-mix(in srgb, var(--level-accent) 78%, #111827);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.dark #level-basic .hero-eyebrow,
body.dark #level-intermediate .hero-eyebrow,
body.dark #level-advanced .hero-eyebrow { color: var(--level-accent); }

#level-basic .hero-title,
#level-intermediate .hero-title,
#level-advanced .hero-title {
  max-width: 700px;
  font-size: clamp(1.65rem, 2.7vw, 2.3rem);
  letter-spacing: 0;
}

#level-basic .hero-subtitle,
#level-intermediate .hero-subtitle,
#level-advanced .hero-subtitle {
  max-width: 640px;
  color: color-mix(in srgb, currentColor 72%, transparent);
}

#level-basic .hero-progress-wrapper,
#level-intermediate .hero-progress-wrapper,
#level-advanced .hero-progress-wrapper {
  max-width: 720px;
  margin-top: 4px;
}

#level-basic .hero-progress-track,
#level-intermediate .hero-progress-track,
#level-advanced .hero-progress-track {
  height: 8px;
  background: rgba(15, 23, 42, .1);
}

body.dark #level-basic .hero-progress-track,
body.dark #level-intermediate .hero-progress-track,
body.dark #level-advanced .hero-progress-track { background: rgba(255,255,255,.1); }

#level-basic .hero-progress-fill,
#level-intermediate .hero-progress-fill,
#level-advanced .hero-progress-fill {
  background: linear-gradient(90deg, var(--level-accent), var(--level-secondary));
  box-shadow: 0 0 18px rgba(var(--level-accent-rgb), .45);
}

#level-basic .hero-cta-btn,
#level-intermediate .hero-cta-btn,
#level-advanced .hero-cta-btn {
  padding: 11px 18px;
  border: 1px solid color-mix(in srgb, var(--level-accent) 55%, transparent);
  border-radius: 7px;
  color: #08131a;
  background: var(--level-accent);
  box-shadow: 0 10px 24px rgba(var(--level-accent-rgb), .22);
}

#level-basic .hero-cta-btn:hover,
#level-intermediate .hero-cta-btn:hover,
#level-advanced .hero-cta-btn:hover {
  transform: translateY(-3px);
  color: #08131a;
  background: color-mix(in srgb, var(--level-accent) 86%, white);
  box-shadow: 0 14px 30px rgba(var(--level-accent-rgb), .34);
}

#level-basic .hero-mascot-col,
#level-intermediate .hero-mascot-col,
#level-advanced .hero-mascot-col { z-index: 1; }

#level-basic .hero-ollie-svg,
#level-intermediate .hero-ollie-svg,
#level-advanced .hero-ollie-svg {
  width: 132px;
  height: 132px;
  filter: drop-shadow(0 14px 20px rgba(var(--level-accent-rgb), .18));
  animation: heroOllieFloat 3s ease-in-out infinite alternate, heroOllieTilt 7s ease-in-out infinite;
}

#level-basic .level-subtabs-container,
#level-intermediate .level-subtabs-container,
#level-advanced .level-subtabs-container {
  width: min(680px, 100%);
  margin: 0 auto 18px;
  position: sticky;
  top: 10px;
  z-index: 12;
}

#level-basic .subtabs-pill,
#level-intermediate .subtabs-pill,
#level-advanced .subtabs-pill {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(var(--level-accent-rgb), .2);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

body.dark #level-basic .subtabs-pill,
body.dark #level-intermediate .subtabs-pill,
body.dark #level-advanced .subtabs-pill { background: rgba(17, 24, 39, .84); }

#level-basic .subtab-btn,
#level-intermediate .subtab-btn,
#level-advanced .subtab-btn {
  justify-content: center;
  min-height: 46px;
  padding: 9px 14px;
  border-radius: 6px;
  color: var(--muted);
}

#level-basic .subtab-btn.active,
#level-intermediate .subtab-btn.active,
#level-advanced .subtab-btn.active {
  color: #07120f;
  background: var(--level-accent);
  box-shadow: 0 8px 20px rgba(var(--level-accent-rgb), .28);
}

#level-basic .subtab-btn.active .tab-code,
#level-intermediate .subtab-btn.active .tab-code,
#level-advanced .subtab-btn.active .tab-code {
  color: inherit;
  background: rgba(255,255,255,.38);
}

#level-basic .subtab-btn.active.locked-tab,
#level-intermediate .subtab-btn.active.locked-tab,
#level-advanced .subtab-btn.active.locked-tab {
  color: var(--muted);
  background: rgba(100, 116, 139, .12);
  box-shadow: none;
}

#level-basic .hero-cta-btn:disabled,
#level-intermediate .hero-cta-btn:disabled,
#level-advanced .hero-cta-btn:disabled {
  color: var(--muted);
  background: rgba(100, 116, 139, .16);
  border-color: rgba(100, 116, 139, .18);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

#level-basic .duo-path-container,
#level-intermediate .duo-path-container,
#level-advanced .duo-path-container {
  width: min(920px, 100%);
  max-width: none;
  margin: 0 auto;
  gap: 15px;
  padding: 0 22px 54px;
  border: 1px solid rgba(var(--level-accent-rgb), .16);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .07);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}

body.dark #level-basic .duo-path-container,
body.dark #level-intermediate .duo-path-container,
body.dark #level-advanced .duo-path-container { background: rgba(11, 18, 29, .72); }

.path-map-head {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  align-items: center;
  gap: 24px;
  margin: 0 -22px 18px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(var(--level-accent-rgb), .18);
  background: linear-gradient(100deg, rgba(var(--level-accent-rgb), .12), transparent 58%);
}

.path-map-kicker,
.path-summary-kicker {
  display: block;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--level-accent) 82%, #111827);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.dark .path-map-kicker,
body.dark .path-summary-kicker { color: var(--level-accent); }

.path-map-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  letter-spacing: 0;
}

.path-map-code {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 34px;
  margin-right: 8px;
  border-radius: 6px;
  color: #07120f;
  background: var(--level-accent);
  box-shadow: 0 7px 18px rgba(var(--level-accent-rgb), .25);
}

.path-map-next {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.4;
}

.path-map-progress {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr);
  align-items: center;
  gap: 5px 12px;
}

.path-map-progress strong {
  grid-row: 1 / 3;
  color: var(--text);
  font-size: 1.6rem;
}

.path-map-progress > span {
  height: 7px;
  border-radius: 999px;
  background: rgba(100, 116, 139, .16);
  overflow: hidden;
}

.path-map-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--level-accent), var(--level-secondary));
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}

.path-map-progress small { color: var(--muted); font-size: .7rem; font-weight: 700; }

#level-basic .path-center-line,
#level-intermediate .path-center-line,
#level-advanced .path-center-line {
  top: 156px;
  bottom: 68px;
  width: 360px;
  opacity: .72;
  background: var(--level-accent);
  box-shadow: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 760'%3E%3Cpath d='M180-8 C180 38 80 48 80 95 C80 146 132 165 180 190 C228 215 280 234 280 285 C280 336 228 355 180 380 C132 405 80 424 80 475 C80 526 132 545 180 570 C228 595 280 614 280 665 C280 712 180 722 180 768' fill='none' stroke='white' stroke-width='5' stroke-linecap='round' stroke-dasharray='11 10'/%3E%3C/svg%3E") center top / 360px 760px repeat-y;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 760'%3E%3Cpath d='M180-8 C180 38 80 48 80 95 C80 146 132 165 180 190 C228 215 280 234 280 285 C280 336 228 355 180 380 C132 405 80 424 80 475 C80 526 132 545 180 570 C228 595 280 614 280 665 C280 712 180 722 180 768' fill='none' stroke='white' stroke-width='5' stroke-linecap='round' stroke-dasharray='11 10'/%3E%3C/svg%3E") center top / 360px 760px repeat-y;
  filter: drop-shadow(0 0 7px rgba(var(--level-accent-rgb), .38));
  animation: none;
}

.duo-path-container .path-row:has(.geo-node) {
  grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr);
  min-height: 190px;
  animation: pathRowEnter .52s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--path-index) * 55ms);
}

/* La ruta alterna lados, pero la curva pasa suavemente por el centro. */
.duo-path-container .path-row.row-left:has(.geo-node) .path-marker-col {
  transform: translateX(-100px);
}

.duo-path-container .path-row.row-right:has(.geo-node) .path-marker-col {
  transform: translateX(100px);
}

.duo-path-container .path-row:has(.geo-node) .path-marker-col {
  position: relative;
  z-index: 3;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.duo-path-container .geo-node {
  width: 132px;
  height: 124px;
}

.duo-path-container .geo-caption {
  margin-top: 1px;
  padding: 4px 9px;
  border: 1px solid rgba(var(--level-accent-rgb), .18);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.dark .duo-path-container .geo-caption {
  background: rgba(12, 20, 32, .78);
}

.duo-path-container .path-row.row-left .path-node-summary {
  grid-column: 3;
  justify-self: start;
  translate: -30px 0;
}

.duo-path-container .path-row.row-right .path-node-summary {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  translate: 30px 0;
}

.path-node-summary {
  display: none;
  width: min(260px, 100%);
  padding: 15px 17px;
  border: 1px solid rgba(var(--level-accent-rgb), .25);
  border-left: 3px solid var(--level-accent);
  border-radius: 7px;
  color: var(--text);
  text-align: left;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .09);
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  animation: currentCardFloat 3.2s ease-in-out infinite;
}

.path-node-summary.is-current { display: block; }

#level-basic .hero-title:focus,
#level-intermediate .hero-title:focus,
#level-advanced .hero-title:focus { outline: none; }

body.dark .path-node-summary { background: rgba(24, 32, 46, .82); }

.path-node-summary:hover,
.path-node-summary:focus-visible {
  transform: translateY(-3px);
  border-color: var(--level-accent);
  outline: none;
  box-shadow: 0 17px 36px rgba(var(--level-accent-rgb), .2);
}

.path-node-summary strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: .91rem;
  line-height: 1.3;
}

.path-summary-meta { color: var(--muted); font-size: .72rem; font-weight: 750; }

.path-unit-break.path-row {
  width: min(540px, calc(100% - 20px));
  min-height: 0;
  margin: 24px auto 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(var(--level-accent-rgb), .22);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  animation: pathRowEnter .48s ease both;
}

body.dark .path-unit-break.path-row { background: rgba(20, 28, 40, .82); }

.path-unit-number {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 6px;
  color: #07120f;
  background: var(--level-accent);
  font-size: .82rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(var(--level-accent-rgb), .24);
}

.path-unit-copy { display: grid; gap: 2px; }
.path-unit-copy strong { color: var(--text); font-size: .88rem; }
.path-unit-copy small { color: var(--muted); font-size: .68rem; font-weight: 700; }

.path-row.subtab-hidden,
.path-unit-break.subtab-hidden { display: none !important; }

.geo-node.path-attention { animation: pathAttention 1.35s ease; }

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

@keyframes pathRowEnter {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes levelPathFlow {
  to { background-position-y: 190px; }
}

@keyframes currentCardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes heroOllieTilt {
  0%, 45%, 100% { rotate: 0deg; }
  50% { rotate: -3deg; }
  56% { rotate: 3deg; }
}

@keyframes pathAttention {
  0%, 100% { filter: none; }
  35%, 70% { filter: drop-shadow(0 0 18px rgba(var(--level-accent-rgb), .9)); transform: translateY(-5px) scale(1.08); }
}

@media (min-width: 769px) and (max-width: 1180px) {
  #level-basic .path-center-line,
  #level-intermediate .path-center-line,
  #level-advanced .path-center-line {
    width: 280px;
    -webkit-mask-size: 280px 760px;
    mask-size: 280px 760px;
  }

  .duo-path-container .path-row.row-left:has(.geo-node) .path-marker-col {
    transform: translateX(-68px);
  }

  .duo-path-container .path-row.row-right:has(.geo-node) .path-marker-col {
    transform: translateX(68px);
  }

  .duo-path-container .path-row.row-left .path-node-summary,
  .duo-path-container .path-row.row-right .path-node-summary {
    translate: 0 0;
  }
}

@media (max-width: 768px) {
  #level-basic,
  #level-intermediate,
  #level-advanced { padding: 12px 10px 52px; }

  #level-basic .level-hero-card,
  #level-intermediate .level-hero-card,
  #level-advanced .level-hero-card {
    min-height: 0;
    padding: 20px 18px;
    display: block;
    text-align: left;
  }

  #level-basic .hero-content,
  #level-intermediate .hero-content,
  #level-advanced .hero-content { padding-right: 62px; }

  #level-basic .hero-mascot-col,
  #level-intermediate .hero-mascot-col,
  #level-advanced .hero-mascot-col {
    position: absolute;
    top: 18px;
    right: 12px;
    display: block;
    opacity: .42;
  }

  #level-basic .hero-ollie-svg,
  #level-intermediate .hero-ollie-svg,
  #level-advanced .hero-ollie-svg { width: 74px; height: 74px; opacity: .72; }

  #level-basic .hero-eyebrow,
  #level-intermediate .hero-eyebrow,
  #level-advanced .hero-eyebrow,
  #level-basic .hero-actions,
  #level-intermediate .hero-actions,
  #level-advanced .hero-actions { justify-content: flex-start; }

  .hero-progress-header { align-items: flex-start; gap: 5px; flex-direction: column; }
  .hero-progress-count { font-size: .73rem; }

  #level-basic .level-subtabs-container,
  #level-intermediate .level-subtabs-container,
  #level-advanced .level-subtabs-container { top: 6px; }

  #level-basic .subtab-btn,
  #level-intermediate .subtab-btn,
  #level-advanced .subtab-btn { padding: 8px 6px; font-size: .78rem; }

  #level-basic .duo-path-container,
  #level-intermediate .duo-path-container,
  #level-advanced .duo-path-container { padding: 0 12px 42px; }

  .path-map-head {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0 -12px 14px;
    padding: 18px 16px;
  }

  .path-map-progress { grid-template-columns: 48px 1fr; }

  #level-basic .path-center-line,
  #level-intermediate .path-center-line,
  #level-advanced .path-center-line {
    top: 236px;
    left: 43px;
    width: 116px;
    -webkit-mask-size: 116px 490px;
    mask-size: 116px 490px;
  }

  .duo-path-container .path-row:has(.geo-node) {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    min-height: 158px;
    padding-left: 0;
  }

  .duo-path-container .path-row.row-left:has(.geo-node) .path-marker-col {
    transform: translateX(-16px);
  }

  .duo-path-container .path-row.row-right:has(.geo-node) .path-marker-col {
    transform: translateX(16px);
  }

  .duo-path-container .geo-node {
    width: 100px;
    height: 104px;
    transform: scale(.88);
  }

  .duo-path-container .path-row.row-left .path-marker-col,
  .duo-path-container .path-row.row-right .path-marker-col {
    grid-column: 1;
    grid-row: 1;
  }

  .duo-path-container .path-row.row-left .path-node-summary,
  .duo-path-container .path-row.row-right .path-node-summary {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    width: 100%;
    text-align: left;
    translate: 0 0;
  }

  .duo-path-container .path-row:not(:has(.path-node-summary)) {
    grid-template-columns: 86px 1fr;
  }

  .path-unit-break.path-row {
    width: 100%;
    margin: 18px auto 7px;
  }

  body:has(#level-basic.active) .ollie-floating-btn,
  body:has(#level-intermediate.active) .ollie-floating-btn,
  body:has(#level-advanced.active) .ollie-floating-btn,
  body:has(#level-basic.active) .theme-toggle,
  body:has(#level-intermediate.active) .theme-toggle,
  body:has(#level-advanced.active) .theme-toggle {
    right: 10px;
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }

  body:has(#level-basic.active) .ollie-floating-btn,
  body:has(#level-intermediate.active) .ollie-floating-btn,
  body:has(#level-advanced.active) .ollie-floating-btn { bottom: 66px; }

  body:has(#level-basic.active) .theme-toggle,
  body:has(#level-intermediate.active) .theme-toggle,
  body:has(#level-advanced.active) .theme-toggle { bottom: 12px; }

  body:has(#level-basic.active) .ollie-floating-text,
  body:has(#level-intermediate.active) .ollie-floating-text,
  body:has(#level-advanced.active) .ollie-floating-text,
  body:has(#level-basic.active) .ollie-pulse-badge,
  body:has(#level-intermediate.active) .ollie-pulse-badge,
  body:has(#level-advanced.active) .ollie-pulse-badge,
  body:has(#level-basic.active) .theme-toggle strong,
  body:has(#level-intermediate.active) .theme-toggle strong,
  body:has(#level-advanced.active) .theme-toggle strong { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .view.active:is(#level-basic, #level-intermediate, #level-advanced) .level-hero-card,
  .duo-path-container .path-row:has(.geo-node),
  .path-unit-break.path-row,
  .path-node-summary,
  #level-basic .hero-ollie-svg,
  #level-intermediate .hero-ollie-svg,
  #level-advanced .hero-ollie-svg,
  #level-basic .path-center-line,
  #level-intermediate .path-center-line,
  #level-advanced .path-center-line {
    animation: none;
  }
}

/* ============================================================================
   LESSONS — SELECTOR VISUAL DE MATERIAS
   Tablero 3x2 inspirado en menus de juego. Conserva las mismas tarjetas,
   contenido diario y eventos; solo cambia su presentacion.
   ========================================================================= */

#lessons .lesson-chooser-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 42px 0 16px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 8px;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .76), rgba(235, 247, 255, .62) 48%, rgba(255, 239, 247, .58));
  box-shadow: 0 14px 34px rgba(36, 45, 78, .08), inset 0 1px 0 rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

body.dark #lessons .lesson-chooser-heading {
  background: linear-gradient(112deg, rgba(25, 31, 47, .82), rgba(24, 35, 49, .72) 50%, rgba(43, 25, 43, .68));
  border-color: rgba(255, 255, 255, .11);
}

#lessons .lesson-chooser-heading h2 {
  margin: 5px 0 3px;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  letter-spacing: 0;
}

#lessons .lesson-chooser-grid.course-grid.full {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px !important;
  margin-top: 0 !important;
}

#lessons .lesson-chooser-card.course-card.lesson {
  --skill-color: #3d7eff;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1.48 / 1;
  min-height: 250px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .76);
  border-left-width: 1px;
  border-radius: 8px;
  background: #18233a;
  box-shadow: 0 15px 34px rgba(31, 40, 72, .15), inset 0 1px 0 rgba(255, 255, 255, .38);
  cursor: pointer;
  transform: translateY(0);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease, border-color .28s ease;
  animation: lessonChooserIn .46s cubic-bezier(.2, .8, .2, 1) both;
}

#lessons .lesson-chooser-card:nth-child(2) { animation-delay: .05s; }
#lessons .lesson-chooser-card:nth-child(3) { animation-delay: .1s; }
#lessons .lesson-chooser-card:nth-child(4) { animation-delay: .15s; }
#lessons .lesson-chooser-card:nth-child(5) { animation-delay: .2s; }
#lessons .lesson-chooser-card:nth-child(6) { animation-delay: .25s; }

#lessons .lesson-chooser-card.green { --skill-color: #20c997; }
#lessons .lesson-chooser-card.amber { --skill-color: #ffb020; }
#lessons .lesson-chooser-card.purple { --skill-color: #8a5cff; }
#lessons .lesson-chooser-card.pink { --skill-color: #ff4d8d; }
#lessons .lesson-chooser-card.teal { --skill-color: #00a6b2; }

#lessons .lesson-chooser-card.course-card.lesson > img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border: 0;
  filter: saturate(1.08) contrast(1.03);
  transform: scale(1.01);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}

#lessons .lesson-chooser-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 14, 29, .05) 0 27%, rgba(8, 14, 29, .38) 55%, rgba(8, 14, 29, .94) 100%),
    linear-gradient(110deg, color-mix(in srgb, var(--skill-color) 24%, transparent), transparent 54%);
  transition: background .3s ease;
}

#lessons .lesson-chooser-card::after {
  content: attr(data-skill-label);
  position: absolute;
  top: 16px;
  left: 16px;
  right: auto;
  bottom: auto;
  z-index: 3;
  width: auto;
  height: auto;
  padding: 6px 9px;
  color: #fff;
  background: rgba(10, 16, 31, .58);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .06em;
  pointer-events: none;
}

#lessons .lesson-chooser-card.course-card.lesson > :not(img):not(.daily-badge) {
  position: relative;
  z-index: 2;
  grid-column: auto;
}

#lessons .lesson-chooser-card h3 {
  display: -webkit-box;
  margin: 0 0 5px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .45);
}

#lessons .lesson-chooser-card > p {
  display: -webkit-box;
  flex-grow: 0;
  min-height: 0;
  margin: 0 0 9px;
  overflow: hidden;
  color: rgba(255, 255, 255, .82);
  font-size: .78rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

#lessons .lesson-chooser-card .daily-card-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0 0 10px;
  overflow: hidden;
}

#lessons .lesson-chooser-card .daily-card-meta span {
  flex: 0 0 auto;
  padding: 4px 7px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#lessons .lesson-chooser-card .daily-card-meta span:nth-child(n + 3) { display: none; }

#lessons .lesson-chooser-card .mini-bar {
  width: 100%;
  height: 5px;
  margin: 0 0 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
}

#lessons .lesson-chooser-card .mini-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #fff, var(--skill-color));
  box-shadow: 0 0 14px var(--skill-color);
}

#lessons .lesson-chooser-card > .course-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .02em;
}

#lessons .lesson-chooser-card > .course-card-cta::after {
  content: "→";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #111827;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .2);
  transition: transform .24s ease, background .24s ease;
}

#lessons .lesson-chooser-card .daily-badge {
  top: 14px;
  right: 14px;
  left: auto;
  max-width: 44%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#lessons .lesson-chooser-card:hover,
#lessons .lesson-chooser-card:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--skill-color) 68%, #fff);
  box-shadow: 0 24px 46px color-mix(in srgb, var(--skill-color) 22%, rgba(23, 31, 58, .2));
  outline: 3px solid color-mix(in srgb, var(--skill-color) 34%, transparent);
  outline-offset: 3px;
}

#lessons .lesson-chooser-card:hover > img,
#lessons .lesson-chooser-card:focus-visible > img {
  transform: scale(1.075);
  filter: saturate(1.2) contrast(1.05);
}

#lessons .lesson-chooser-card:hover > .course-card-cta::after,
#lessons .lesson-chooser-card:focus-visible > .course-card-cta::after {
  transform: translateX(3px);
  background: var(--skill-color);
}

#lessons .lesson-chooser-card:active { transform: translateY(-1px) scale(.985); }

@keyframes lessonChooserIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1180px) {
  #lessons .lesson-chooser-grid.course-grid.full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  #lessons .lesson-chooser-heading { margin-top: 30px; padding: 18px; }
  #lessons .lesson-chooser-grid.course-grid.full { grid-template-columns: 1fr; gap: 12px !important; }
  #lessons .lesson-chooser-card.course-card.lesson {
    aspect-ratio: 1.58 / 1;
    min-height: 232px;
    padding: 18px;
  }
  #lessons .lesson-chooser-card.course-card.lesson > img { min-height: 0; }
  #lessons .lesson-chooser-card h3 { font-size: 1.42rem; }
}

@media (prefers-reduced-motion: reduce) {
  #lessons .lesson-chooser-card { animation: none; }
  #lessons .lesson-chooser-card:hover,
  #lessons .lesson-chooser-card:focus-visible,
  #lessons .lesson-chooser-card:hover > img,
  #lessons .lesson-chooser-card:focus-visible > img { transform: none; }
}

/* ===========================================================================
   LEVEL EXPERIENCE V4 - sendero vivo, solidos 3D y paisaje de progreso
   ========================================================================== */

#level-basic,
#level-intermediate,
#level-advanced {
  isolation: isolate;
  background-color: var(--level-canvas);
}

#level-basic {
  background-image: linear-gradient(145deg, #fff7cf 0%, #eefbea 48%, #fff1bc 100%);
}

#level-intermediate {
  background-image: linear-gradient(145deg, #fff2f3 0%, #fff8f2 48%, #ffe6e9 100%);
}

#level-advanced {
  background-image: linear-gradient(145deg, #f2edff 0%, #e7dcff 48%, #f8f5ff 100%);
}

body.dark #level-basic {
  background-image: linear-gradient(145deg, #11180f 0%, #172014 48%, #251c0a 100%);
}

body.dark #level-intermediate {
  background-image: linear-gradient(145deg, #160d12 0%, #241016 48%, #120b10 100%);
}

body.dark #level-advanced {
  background-image: linear-gradient(145deg, #0d0920 0%, #1c0d38 48%, #100826 100%);
}

#level-basic::before,
#level-intermediate::before,
#level-advanced::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    repeating-linear-gradient(7deg, rgba(var(--level-accent-rgb), .2) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(97deg, rgba(31, 41, 55, .08) 0 1px, transparent 1px 23px);
  mix-blend-mode: multiply;
}

body.dark #level-basic::before,
body.dark #level-intermediate::before,
body.dark #level-advanced::before {
  opacity: .16;
  mix-blend-mode: screen;
}

#level-basic > *,
#level-intermediate > *,
#level-advanced > * {
  position: relative;
  z-index: 1;
}

#level-basic .duo-path-container,
#level-intermediate .duo-path-container,
#level-advanced .duo-path-container {
  width: min(1080px, 100%);
  gap: 10px;
  padding: 0 30px 80px;
  border-color: rgba(var(--level-accent-rgb), .22);
  background:
    linear-gradient(120deg, rgba(255,255,255,.65), rgba(255,255,255,.3)),
    color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow:
    0 30px 80px rgba(15, 23, 42, .11),
    inset 0 1px 0 rgba(255,255,255,.85);
  overflow: hidden;
}

body.dark #level-basic .duo-path-container,
body.dark #level-intermediate .duo-path-container,
body.dark #level-advanced .duo-path-container {
  background: linear-gradient(120deg, rgba(9,15,25,.9), rgba(20,17,34,.78));
  box-shadow: 0 34px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07);
}

.path-route-svg {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}

.path-route-svg path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.path-route-underlay {
  stroke: color-mix(in srgb, var(--level-accent) 22%, var(--surface));
  stroke-width: 15;
  opacity: .72;
}

.path-route-line {
  stroke: var(--level-accent);
  stroke-width: 5;
  stroke-dasharray: 4 15;
  filter: drop-shadow(0 0 6px rgba(var(--level-accent-rgb), .55));
  animation: pathTrailFlow 1.8s linear infinite;
}

@keyframes pathTrailFlow {
  to { stroke-dashoffset: -38; }
}

.duo-path-container .path-row:has(.geo-node) {
  z-index: 3;
  min-height: 210px;
  grid-template-columns: minmax(0, 1fr) 154px minmax(0, 1fr);
}

.duo-path-container .path-row.row-left:has(.geo-node) .path-marker-col {
  transform: translateX(-145px);
}

.duo-path-container .path-row.row-right:has(.geo-node) .path-marker-col {
  transform: translateX(145px);
}

.duo-path-container .geo-node {
  width: 144px;
  height: 138px;
  perspective: 760px;
}

.duo-path-container .geo-node::after {
  left: 22%;
  right: 22%;
  bottom: 7px;
  height: 18px;
  filter: blur(10px);
}

.geo-shape,
.geo-face {
  transform-style: preserve-3d;
}

/* Basic: cubo de tres caras, con iluminacion superior y profundidad lateral. */
.shape-cube .geo-shape {
  width: 100px;
  height: 108px;
  transform: translate(-50%, -55%) rotateX(0deg) rotateY(0deg) rotateZ(-1deg);
  filter: drop-shadow(0 22px 18px rgba(120, 53, 15, .4));
}

.shape-cube:hover:not(.status-locked) .geo-shape {
  transform: translate(-50%, -61%) rotateZ(2deg) scale(1.07);
}

.shape-cube .geo-face {
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.82), inset -10px -12px 20px rgba(99,49,8,.17);
}

.shape-cube .geo-face-front {
  left: 0;
  top: 21px;
  width: 76px;
  height: 83px;
  clip-path: polygon(0 0, 100% 17%, 100% 100%, 0 83%);
  background:
    linear-gradient(125deg, rgba(255,255,255,.8), transparent 27%),
    linear-gradient(145deg, #ffe882 0%, #ffc52f 35%, #f29a0a 72%, #bd5806 100%);
  transform: translateZ(28px);
}

.shape-cube .geo-face-top {
  left: 0;
  top: 0;
  width: 100px;
  height: 35px;
  clip-path: polygon(24% 0, 100% 48%, 76% 100%, 0 52%);
  background: linear-gradient(145deg, #fffef2 0%, #fff4b3 36%, #ffd950 72%, #e8a20a 100%);
  transform: translateZ(30px);
}

.shape-cube .geo-face-side {
  left: 76px;
  top: 20px;
  width: 24px;
  height: 84px;
  clip-path: polygon(100% 0, 100% 83%, 0 100%, 0 17%);
  background: linear-gradient(155deg, #efa21a 0%, #c96a07 55%, #733006 100%);
  transform: translateZ(29px);
}

.shape-cube .geo-face-back,
.shape-cube .geo-face-left,
.shape-cube .geo-face-bottom { display: none; }

/* Intermediate: diamante facetado con nucleo oscuro y caras reflectantes. */
.shape-rhombus .geo-shape {
  width: 96px;
  height: 96px;
  transform: translate(-50%, -55%) rotateZ(0deg);
  filter: drop-shadow(0 22px 18px rgba(75, 4, 15, .48));
}

.shape-rhombus:hover:not(.status-locked) .geo-shape {
  transform: translate(-50%, -61%) rotateZ(5deg) scale(1.08);
}

.shape-rhombus .geo-face {
  inset: 5px;
  width: auto;
  height: auto;
  border: 1px solid rgba(255,225,225,.64);
  border-radius: 9px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.shape-rhombus .geo-face-front {
  z-index: 3;
  background: conic-gradient(from 45deg at 50% 50%, #45070d 0 12.5%, #f04a52 12.5% 25%, #ff9d96 25% 37.5%, #a50e20 37.5% 50%, #260208 50% 62.5%, #d61d35 62.5% 75%, #ff6a66 75% 87.5%, #590711 87.5% 100%);
  box-shadow: inset 10px 8px 18px rgba(255,255,255,.26), inset -12px -14px 24px rgba(20,0,5,.58);
  transform: translateZ(28px);
}

.shape-rhombus .geo-face-top {
  z-index: 2;
  background: linear-gradient(135deg, #ffb1a8, #ba1428 48%, #35050c);
  transform: translate(7px, 9px) translateZ(14px);
}

.shape-rhombus .geo-face-side {
  z-index: 1;
  background: #170207;
  transform: translate(12px, 15px);
  box-shadow: 0 14px 28px rgba(71,5,17,.42);
}

.shape-rhombus .geo-face-back,
.shape-rhombus .geo-face-left,
.shape-rhombus .geo-face-bottom { display: none; }

/* Advanced: esfera optica con reflejo especular, rebote de luz y sombra. */
.shape-sphere .geo-shape {
  width: 94px;
  height: 94px;
  transform: translate(-50%, -56%);
  filter: drop-shadow(0 24px 18px rgba(39, 10, 80, .5));
}

.shape-sphere:hover:not(.status-locked) .geo-shape {
  transform: translate(-50%, -62%) scale(1.08);
}

.shape-sphere .geo-face.geo-face-front {
  inset: 0;
  border: 1px solid rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 29% 23%, #fff 0 4%, rgba(255,255,255,.78) 5%, transparent 17%),
    radial-gradient(circle at 35% 31%, #efceff 0%, #bb6df3 23%, #7e32cc 48%, #3d126f 73%, #160629 100%);
  box-shadow:
    inset 12px 10px 22px rgba(255,255,255,.38),
    inset -18px -20px 30px rgba(11,2,26,.68),
    0 0 0 5px rgba(179,104,255,.08),
    0 0 32px rgba(153,72,237,.48);
}

.shape-sphere .geo-shape::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 8px 13px 48px 18px;
  border-radius: 50%;
  border-top: 2px solid rgba(255,255,255,.62);
  transform: rotate(-22deg);
}

/* Estados: el material cambia, no solo la opacidad. */
.geo-node.status-active {
  filter: saturate(1.08) contrast(1.02);
}

.geo-node.status-completed .geo-shape {
  filter: drop-shadow(0 20px 18px rgba(3, 105, 64, .42));
}

.shape-cube.status-completed .geo-face-front,
.shape-cube.status-completed .geo-face-top,
.shape-cube.status-completed .geo-face-side,
.shape-rhombus.status-completed .geo-face-front,
.shape-rhombus.status-completed .geo-face-top,
.shape-rhombus.status-completed .geo-face-side {
  background: linear-gradient(145deg, #d6ffe4 0%, #51e889 35%, #13a957 68%, #075f35 100%);
}

.shape-sphere.status-completed .geo-face.geo-face-front {
  background: radial-gradient(circle at 30% 24%, #fff 0 5%, #adf7c7 15%, #36d778 42%, #087b45 72%, #043b24 100%);
}

.geo-node.status-locked {
  filter: grayscale(.84) saturate(.2) opacity(.66);
}

/* Apertura fisica de cada forma antes de que aparezca la ficha. */
.shape-cube.is-opening .geo-face-top { animation: cubeLidOpen .7s cubic-bezier(.2,.8,.2,1) both; }
.shape-cube.is-opening .geo-face-front { animation: cubeFrontOpen .7s cubic-bezier(.2,.8,.2,1) both; }
.shape-rhombus.is-opening .geo-face-front { animation: diamondOpen .7s cubic-bezier(.2,.8,.2,1) both; }
.shape-rhombus.is-opening .geo-face-top { animation: diamondFacetLeft .7s ease both; }
.shape-rhombus.is-opening .geo-face-side { animation: diamondFacetRight .7s ease both; }
.shape-sphere.is-opening .geo-shape { animation: sphereOpen .72s cubic-bezier(.2,.8,.2,1) both; }

@keyframes cubeLidOpen {
  0% { transform: translateZ(30px); }
  55%, 100% { transform: translate(-10px, -24px) rotate(-18deg) scaleY(.7) translateZ(45px); }
}
@keyframes cubeFrontOpen {
  0% { transform: translateZ(28px); opacity: 1; }
  70%, 100% { transform: translate(0, 18px) scaleY(.76) translateZ(28px); opacity: .55; }
}
@keyframes diamondOpen {
  0% { transform: translateZ(28px) scale(1); }
  55%, 100% { transform: translateZ(50px) rotate(12deg) scale(1.28); opacity: .22; }
}
@keyframes diamondFacetLeft {
  to { transform: translate(-26px, 18px) rotate(-20deg); opacity: .2; }
}
@keyframes diamondFacetRight {
  to { transform: translate(30px, 20px) rotate(22deg); opacity: .16; }
}
@keyframes sphereOpen {
  0% { transform: translate(-50%, -56%) scale(1); opacity: 1; }
  58% { transform: translate(-50%, -56%) scale(1.45); opacity: .3; }
  100% { transform: translate(-50%, -56%) scale(1.9); opacity: 0; }
}

/* La ficha emerge desde las coordenadas de la figura seleccionada. */
#pathNodeModal {
  z-index: 9200;
  --path-origin-x: 50vw;
  --path-origin-y: 50vh;
  --path-modal-accent: 124, 58, 237;
  background: rgba(8, 10, 22, .48);
  backdrop-filter: blur(16px) saturate(1.15);
}

#pathNodeModal[data-shape="shape-cube"] { --path-modal-accent: 245, 158, 11; }
#pathNodeModal[data-shape="shape-rhombus"] { --path-modal-accent: 225, 29, 72; }
#pathNodeModal[data-shape="shape-sphere"] { --path-modal-accent: 139, 92, 246; }

#pathNodeModal .path-node-modal-card {
  width: min(760px, calc(100vw - 40px));
  max-width: 760px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 5vw, 62px);
  overflow: hidden;
  border: 1px solid rgba(var(--path-modal-accent), .34);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,244,255,.78)),
    var(--surface);
  box-shadow:
    0 42px 110px rgba(12,7,30,.34),
    0 0 44px rgba(var(--path-modal-accent), .12),
    inset 0 1px rgba(255,255,255,.92);
}

#pathNodeModal .path-node-modal-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(var(--path-modal-accent), .9), transparent);
  box-shadow: 0 4px 18px rgba(var(--path-modal-accent), .26);
}

body.dark #pathNodeModal .path-node-modal-card {
  background: linear-gradient(135deg, rgba(24,24,40,.96), rgba(15,12,30,.94));
  box-shadow: 0 46px 120px rgba(0,0,0,.6), inset 0 1px rgba(255,255,255,.08);
}

#pathNodeModal.path-origin-open .path-node-modal-card {
  animation: pathCardFromNode .72s cubic-bezier(.18,.86,.22,1) both;
}

@keyframes pathCardFromNode {
  0% {
    opacity: 0;
    transform: translate(calc(var(--path-origin-x) - 50vw), calc(var(--path-origin-y) - 50vh)) scale(.05);
    border-radius: 50%;
    filter: saturate(1.5) brightness(1.35);
  }
  58% { opacity: 1; border-radius: 18px; }
  100% { transform: translate(0, 0) scale(1); border-radius: var(--radius); filter: none; }
}

#pathNodeModal .path-node-modal-title {
  max-width: 620px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.05;
}

#pathNodeModal .path-node-modal-desc {
  max-width: 620px;
  font-size: 1rem;
}

/* Hitos y paisaje lateral: utiles para orientar, ligeros para no tapar la ruta. */
.path-landmark {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 138px;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.path-landmark.landmark-left { left: 14px; }
.path-landmark.landmark-right { right: 14px; }

.path-landmark small {
  padding: 5px 8px;
  border: 1px solid rgba(var(--level-accent-rgb), .2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: 0 7px 18px rgba(15,23,42,.08);
  font-size: .62rem;
  font-weight: 850;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.landmark-art {
  position: relative;
  width: 58px;
  height: 58px;
  display: block;
  animation: landmarkFloat 3.6s ease-in-out infinite;
}

.landmark-art i,
.landmark-art b { position: absolute; display: block; }

.landmark-plant .landmark-art::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 3px;
  width: 24px;
  height: 24px;
  border-radius: 5px 5px 12px 12px;
  background: linear-gradient(145deg, #f3a737, #a84d12);
  box-shadow: 0 9px 14px rgba(91,49,15,.24);
}
.landmark-plant .landmark-art i,
.landmark-plant .landmark-art b {
  bottom: 22px;
  width: 23px;
  height: 32px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(145deg, #85e46f, #168248);
  transform-origin: bottom;
}
.landmark-plant .landmark-art i { left: 8px; transform: rotate(-24deg); }
.landmark-plant .landmark-art b { right: 7px; transform: scaleX(-1) rotate(-24deg); }

.landmark-kite .landmark-art::before {
  content: "";
  position: absolute;
  inset: 7px 12px 17px;
  border-radius: 6px;
  background: conic-gradient(from 45deg, #ffce34, #ff4f81, #7857ff, #32cf9b, #ffce34);
  transform: rotate(45deg);
  box-shadow: 0 10px 20px rgba(var(--level-accent-rgb), .24);
}
.landmark-kite .landmark-art::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 39px;
  width: 24px;
  height: 18px;
  border-left: 2px solid #7f5a38;
  border-bottom: 2px solid #7f5a38;
  border-radius: 0 0 0 18px;
  transform: rotate(-12deg);
}

.landmark-star .landmark-art,
.landmark-spark .landmark-art {
  clip-path: polygon(50% 0, 61% 34%, 98% 34%, 68% 55%, 79% 92%, 50% 70%, 21% 92%, 32% 55%, 2% 34%, 39% 34%);
  background: linear-gradient(145deg, #fff9a8, #ffbd20 52%, #e77508);
  filter: drop-shadow(0 9px 10px rgba(172,91,0,.3));
}

.landmark-sign .landmark-art::before,
.landmark-flag .landmark-art::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 8px;
  width: 38px;
  height: 25px;
  border: 3px solid #2a0710;
  border-radius: 5px;
  background: linear-gradient(145deg, #ff6a72, #a80d28);
  box-shadow: 0 10px 18px rgba(91,5,20,.25);
}
.landmark-sign .landmark-art::after,
.landmark-flag .landmark-art::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 32px;
  width: 4px;
  height: 25px;
  border-radius: 4px;
  background: #2a0710;
}

.landmark-comet .landmark-art::before {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff, #bba4ff 30%, #6940dc 70%);
  box-shadow: 0 0 20px rgba(139,92,246,.55);
}
.landmark-comet .landmark-art::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 29px;
  width: 38px;
  height: 7px;
  border-radius: 100%;
  background: linear-gradient(90deg, transparent, #7ce9dc, #af8cff);
  transform: rotate(-36deg);
  filter: blur(1px);
}

.landmark-constellation .landmark-art {
  background:
    radial-gradient(circle at 16% 72%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 42% 34%, #8ff8e8 0 3px, transparent 4px),
    radial-gradient(circle at 78% 18%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 83% 76%, #c49cff 0 3px, transparent 4px);
}
.landmark-constellation .landmark-art::before {
  content: "";
  position: absolute;
  inset: 15px 8px;
  border: 1px solid rgba(124,240,223,.65);
  transform: skew(-18deg) rotate(-8deg);
}

.landmark-crystal .landmark-art::before {
  content: "";
  position: absolute;
  inset: 5px 11px;
  clip-path: polygon(50% 0, 100% 35%, 76% 100%, 24% 100%, 0 35%);
  background: conic-gradient(from 20deg, #7ef6e6, #a66cff, #4b1b99, #ecb7ff, #7ef6e6);
  box-shadow: inset 8px 6px rgba(255,255,255,.18);
  filter: drop-shadow(0 10px 12px rgba(74,34,142,.34));
}

.landmark-ollie .landmark-art {
  width: 54px;
  height: 58px;
  border-radius: 48% 48% 44% 44%;
  background: linear-gradient(145deg, #bd78ff, #6f2fd0 66%, #421283);
  box-shadow: 0 13px 20px rgba(76,29,149,.3), inset 8px 6px 12px rgba(255,255,255,.22);
}
.landmark-ollie .landmark-art::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 13px;
  width: 40px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 47%, #17213b 0 4px, #fff 5px 9px, transparent 10px),
    radial-gradient(circle at 72% 47%, #17213b 0 4px, #fff 5px 9px, transparent 10px);
}
.landmark-ollie .landmark-art::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 31px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #ffb416;
}

@keyframes landmarkFloat {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 0 -7px; rotate: 2deg; }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .duo-path-container .path-row.row-left:has(.geo-node) .path-marker-col { transform: translateX(-90px); }
  .duo-path-container .path-row.row-right:has(.geo-node) .path-marker-col { transform: translateX(90px); }
  .path-landmark { width: 86px; }
  .path-landmark small { display: none; }
}

@media (max-width: 768px) {
  #level-basic .duo-path-container,
  #level-intermediate .duo-path-container,
  #level-advanced .duo-path-container { padding: 0 10px 52px; }

  .duo-path-container .path-row:has(.geo-node) {
    min-height: 170px;
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .duo-path-container .path-row.row-left:has(.geo-node) .path-marker-col { transform: translateX(-12px); }
  .duo-path-container .path-row.row-right:has(.geo-node) .path-marker-col { transform: translateX(12px); }
  .duo-path-container .geo-node { width: 112px; height: 116px; transform: scale(.86); }

  .path-landmark {
    top: 23px;
    right: 8px !important;
    left: auto !important;
    width: 42px;
    opacity: .72;
  }
  .path-landmark small { display: none; }
  .landmark-art { transform: scale(.68); }

  #pathNodeModal { padding: 0; }
  #pathNodeModal .path-node-modal-card {
    width: 100vw;
    min-height: 100dvh;
    max-width: none;
    border: 0;
    border-radius: 0;
    padding: 58px 24px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .path-route-line,
  .landmark-art,
  .shape-cube.is-opening .geo-face-top,
  .shape-cube.is-opening .geo-face-front,
  .shape-rhombus.is-opening .geo-face-front,
  .shape-rhombus.is-opening .geo-face-top,
  .shape-rhombus.is-opening .geo-face-side,
  .shape-sphere.is-opening .geo-shape,
  #pathNodeModal.path-origin-open .path-node-modal-card {
    animation: none;
  }
}

/* LEVEL HERO POLISH V4 - cierre de cascada para las tres páginas de nivel. */
#level-basic {
  --level-accent: #f2b90c;
  --level-accent-rgb: 242, 185, 12;
  --level-secondary: #fff0a8;
  --level-ink: #2b2104;
}

#level-basic,
#level-intermediate,
#level-advanced {
  --level-hero-surface: rgba(255, 255, 255, .76);
  --level-hero-panel: rgba(255, 255, 255, .62);
  --level-hero-line: rgba(var(--level-accent-rgb), .24);
  --level-hero-shadow: 0 24px 64px rgba(25, 31, 48, .11);
}

body.dark #level-basic,
body.dark #level-intermediate,
body.dark #level-advanced {
  --level-hero-surface: rgba(14, 20, 31, .82);
  --level-hero-panel: rgba(19, 27, 42, .78);
  --level-hero-line: rgba(var(--level-accent-rgb), .31);
  --level-hero-shadow: 0 26px 70px rgba(0, 0, 0, .34);
}

#level-basic .level-hero-card,
#level-intermediate .level-hero-card,
#level-advanced .level-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: stretch;
  width: min(1120px, 100%);
  min-height: 320px;
  margin: 0 auto 22px;
  padding: 28px;
  gap: 28px;
  border: 1px solid var(--level-hero-line);
  border-top-color: rgba(255, 255, 255, .92);
  border-radius: 8px;
  color: var(--level-ink);
  background: var(--level-hero-surface);
  box-shadow: var(--level-hero-shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
}

#level-basic .level-hero-card::before,
#level-intermediate .level-hero-card::before,
#level-advanced .level-hero-card::before {
  background:
    linear-gradient(90deg, var(--level-accent) 0 38%, var(--level-secondary) 72% 100%) top / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(var(--level-accent-rgb), .035) 72px 73px);
}

#level-basic .hero-content,
#level-intermediate .hero-content,
#level-advanced .hero-content {
  justify-content: center;
  padding: 10px 8px 10px 6px;
  gap: 12px;
}

#level-basic .hero-eyebrow,
#level-intermediate .hero-eyebrow,
#level-advanced .hero-eyebrow {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(var(--level-accent-rgb), .3);
  border-radius: 6px;
  color: color-mix(in srgb, var(--level-accent) 68%, #111827);
  background: rgba(var(--level-accent-rgb), .08);
}

#level-basic .hero-title,
#level-intermediate .hero-title,
#level-advanced .hero-title {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.06;
}

#level-basic .hero-subtitle,
#level-intermediate .hero-subtitle,
#level-advanced .hero-subtitle {
  max-width: 650px;
  font-size: .98rem;
  line-height: 1.58;
}

#level-basic .hero-progress-wrapper,
#level-intermediate .hero-progress-wrapper,
#level-advanced .hero-progress-wrapper {
  width: 100%;
  max-width: 680px;
  margin-top: 7px;
}

#level-basic .hero-cta-btn,
#level-intermediate .hero-cta-btn,
#level-advanced .hero-cta-btn {
  min-height: 48px;
  padding: 0 19px;
  border-radius: 7px;
  box-shadow: 0 9px 0 color-mix(in srgb, var(--level-accent) 68%, #111827),
    0 18px 30px rgba(var(--level-accent-rgb), .22);
}

#level-basic .hero-mascot-col,
#level-intermediate .hero-mascot-col,
#level-advanced .hero-mascot-col {
  position: relative;
  top: auto;
  right: auto;
  display: flex;
  min-height: 264px;
  padding: 14px 10px;
  border: 1px solid rgba(var(--level-accent-rgb), .2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--level-accent-rgb), .1), transparent 58%),
    var(--level-hero-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 12px 34px rgba(31, 38, 56, .08);
  opacity: 1;
  overflow: hidden;
}

#level-basic .hero-mascot-col .geo-portal,
#level-intermediate .hero-mascot-col .geo-portal,
#level-advanced .hero-mascot-col .geo-portal {
  width: 100%;
  gap: 7px;
}

#level-basic .hero-mascot-col .geo-portal-stage,
#level-intermediate .hero-mascot-col .geo-portal-stage,
#level-advanced .hero-mascot-col .geo-portal-stage {
  width: 190px;
  height: 190px;
}

#level-basic .hero-mascot-col .geo-body-img,
#level-intermediate .hero-mascot-col .geo-body-img,
#level-advanced .hero-mascot-col .geo-body-img {
  width: 188px;
  max-height: 188px;
  object-fit: contain;
  filter: drop-shadow(0 20px 24px rgba(22, 18, 36, .25));
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), filter .32s ease;
}

#level-basic .hero-mascot-col .geo-portal:hover .geo-body-img,
#level-intermediate .hero-mascot-col .geo-portal:hover .geo-body-img,
#level-advanced .hero-mascot-col .geo-portal:hover .geo-body-img {
  transform: translateY(-7px) scale(1.035);
  filter: drop-shadow(0 25px 30px rgba(var(--level-accent-rgb), .32)) brightness(1.04);
}

#level-basic .hero-mascot-col .geo-portal-label,
#level-intermediate .hero-mascot-col .geo-portal-label,
#level-advanced .hero-mascot-col .geo-portal-label {
  min-width: 178px;
  padding: 9px 15px;
  border: 1px solid rgba(var(--level-accent-rgb), .24);
  border-radius: 7px;
  background: rgba(255, 255, 255, .82);
}

#level-basic .hero-mascot-col .geo-portal-label small,
#level-intermediate .hero-mascot-col .geo-portal-label small,
#level-advanced .hero-mascot-col .geo-portal-label small {
  display: none;
}

#level-basic .hero-mascot-col .geo-portal-label strong,
#level-intermediate .hero-mascot-col .geo-portal-label strong,
#level-advanced .hero-mascot-col .geo-portal-label strong {
  color: var(--level-ink);
  font-size: .86rem;
}

body.dark #level-basic .level-hero-card,
body.dark #level-intermediate .level-hero-card,
body.dark #level-advanced .level-hero-card {
  color: #f8fafc;
  border-color: var(--level-hero-line);
  background: var(--level-hero-surface);
  box-shadow: var(--level-hero-shadow), inset 0 1px 0 rgba(255, 255, 255, .07);
}

body.dark #level-basic .hero-mascot-col,
body.dark #level-intermediate .hero-mascot-col,
body.dark #level-advanced .hero-mascot-col {
  border-color: rgba(var(--level-accent-rgb), .26);
  background:
    linear-gradient(135deg, rgba(var(--level-accent-rgb), .12), transparent 58%),
    var(--level-hero-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 15px 38px rgba(0, 0, 0, .22);
}

body.dark #level-basic .hero-mascot-col .geo-portal-label,
body.dark #level-intermediate .hero-mascot-col .geo-portal-label,
body.dark #level-advanced .hero-mascot-col .geo-portal-label {
  border-color: rgba(var(--level-accent-rgb), .3);
  background: rgba(11, 17, 29, .86);
}

body.dark #level-basic .hero-mascot-col .geo-portal-label strong,
body.dark #level-intermediate .hero-mascot-col .geo-portal-label strong,
body.dark #level-advanced .hero-mascot-col .geo-portal-label strong {
  color: #f8fafc;
}

body:has(#level-basic.view.active) #mascotSpeech,
body:has(#level-intermediate.view.active) #mascotSpeech,
body:has(#level-advanced.view.active) #mascotSpeech {
  display: none;
}

body:has(#level-basic.view.active) #coachBubble::after,
body:has(#level-intermediate.view.active) #coachBubble::after,
body:has(#level-advanced.view.active) #coachBubble::after {
  display: block;
  font-size: .78rem;
  line-height: 1.42;
}

body:has(#level-basic.view.active) #coachBubble::after {
  content: "Ruta A1-A2: fundamentos, comprensión y práctica guiada.";
}

body:has(#level-intermediate.view.active) #coachBubble::after {
  content: "Ruta B1-B2: fluidez, precisión y comunicación segura.";
}

body:has(#level-advanced.view.active) #coachBubble::after {
  content: "Ruta C1-C2: matices, registro y dominio profesional.";
}

@media (max-width: 1180px) {
  #level-basic .level-hero-card,
  #level-intermediate .level-hero-card,
  #level-advanced .level-hero-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px;
  }

  #level-basic .hero-mascot-col,
  #level-intermediate .hero-mascot-col,
  #level-advanced .hero-mascot-col {
    min-height: 190px;
  }

  #level-basic .hero-mascot-col .geo-portal,
  #level-intermediate .hero-mascot-col .geo-portal,
  #level-advanced .hero-mascot-col .geo-portal {
    display: grid;
    grid-template-columns: 174px minmax(0, 1fr);
    align-items: center;
    max-width: 470px;
  }

  #level-basic .hero-mascot-col .geo-portal-stage,
  #level-intermediate .hero-mascot-col .geo-portal-stage,
  #level-advanced .hero-mascot-col .geo-portal-stage {
    width: 174px;
    height: 168px;
  }

  #level-basic .hero-mascot-col .geo-body-img,
  #level-intermediate .hero-mascot-col .geo-body-img,
  #level-advanced .hero-mascot-col .geo-body-img {
    width: 164px;
    max-height: 164px;
  }
}

@media (max-width: 720px) {
  #level-basic .level-hero-card,
  #level-intermediate .level-hero-card,
  #level-advanced .level-hero-card {
    grid-template-columns: 1fr;
    padding: 18px;
    gap: 18px;
  }

  #level-basic .hero-content,
  #level-intermediate .hero-content,
  #level-advanced .hero-content {
    padding: 4px 2px 8px;
  }

  #level-basic .hero-title,
  #level-intermediate .hero-title,
  #level-advanced .hero-title {
    font-size: 2rem;
  }

  #level-basic .hero-mascot-col,
  #level-intermediate .hero-mascot-col,
  #level-advanced .hero-mascot-col {
    min-height: 190px;
    padding: 10px;
  }

  #level-basic .hero-mascot-col .geo-portal,
  #level-intermediate .hero-mascot-col .geo-portal,
  #level-advanced .hero-mascot-col .geo-portal {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
  }

  #level-basic .hero-mascot-col .geo-portal-stage,
  #level-intermediate .hero-mascot-col .geo-portal-stage,
  #level-advanced .hero-mascot-col .geo-portal-stage {
    width: 132px;
    height: 150px;
  }

  #level-basic .hero-mascot-col .geo-body-img,
  #level-intermediate .hero-mascot-col .geo-body-img,
  #level-advanced .hero-mascot-col .geo-body-img {
    width: 132px;
    max-height: 142px;
  }
}

/* Los niveles comparten el fondo global; la ruta conserva su propio escenario. */
#level-basic,
#level-intermediate,
#level-advanced,
body.dark #level-basic,
body.dark #level-intermediate,
body.dark #level-advanced {
  background-color: transparent;
  background-image: none;
}

#level-basic::before,
#level-intermediate::before,
#level-advanced::before,
body.dark #level-basic::before,
body.dark #level-intermediate::before,
body.dark #level-advanced::before {
  content: none;
}

/* Controles globales disponibles también sobre juegos y vistas inmersivas. */
.ollie-floating-btn,
.theme-toggle {
  z-index: 9400;
}

.ollie-floating-chat-modal {
  z-index: 9500;
}

body.jxp-abierto .ollie-floating-btn,
body.jxp-abierto .theme-toggle {
  display: inline-flex;
}

@media (max-width: 760px) {
  body.jxp-abierto .ollie-floating-btn,
  body.jxp-abierto .theme-toggle {
    right: 14px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    justify-content: center;
  }

  body.jxp-abierto .ollie-floating-btn { bottom: 74px; }
  body.jxp-abierto .theme-toggle { bottom: 16px; }
  body.jxp-abierto .ollie-floating-text,
  body.jxp-abierto .ollie-pulse-badge,
  body.jxp-abierto .theme-toggle strong { display: none; }
}


.ollie-chat-body .typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  min-height: 38px;
  align-self: flex-start;
  background: rgba(116, 57, 246, 0.12);
  border: 1px solid rgba(116, 57, 246, 0.25);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
}

.ollie-chat-body .typing-indicator .typing-dot {
  width: 8px;
  height: 8px;
  background-color: #a855f7;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}