/* ===== CSS Variables & Reset ===== */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #dbeafe;
  --accent: #f59e0b;
  --success: #10b981;
  --danger: #ef4444;
  --bg: #e0f7fa;
  --surface: #ffffff;
  --text: #1e293b;
  --text-secondary: #64748b;
  --border: #e2e8f0;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1), 0 4px 10px -5px rgba(0,0,0,0.04);
  --shadow-hover: 0 12px 28px -5px rgba(37,99,235,0.18), 0 6px 12px -5px rgba(0,0,0,0.08);
  --radius: 16px;
  --radius-sm: 10px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(180deg, #b2ebf2 0%, #e0f7fa 30%, #e0f7fa 70%, #b2ebf2 100%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ===== Verb Words Background ===== */
.bg-words {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-word {
  position: absolute;
  font-family: "SF Pro Text", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  color: rgba(0, 0, 100, 0.3);
  white-space: nowrap;
  user-select: none;
  animation: floatWord linear infinite;
}

@keyframes floatWord {
  0% { transform: translateY(0) rotate(var(--rot)); }
  100% { transform: translateY(-120px) rotate(var(--rot)); }
}

header, .progress-module, .controls, .carousel-wrapper, .card-counter, .no-results-container, footer {
  position: relative;
  z-index: 1;
}

/* ===== Header ===== */
header {
  background: linear-gradient(90deg, #006847 0%, #006847 33%, #FFFFFF 33%, #FFFFFF 66%, #CE1126 66%, #CE1126 100%);
  color: white;
  padding: 0px 24px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-lg);
}

.header-escudo {
  height: 64px;
  width: auto;
  display: block;
  margin: 0 auto 0px;
  padding-top: 8px;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.5)) drop-shadow(0 0 12px rgba(206, 17, 38, 0.3));
  animation: eaglePulse 3s ease-in-out infinite;
}

@keyframes eaglePulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.5)) drop-shadow(0 0 12px rgba(206, 17, 38, 0.3));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.6)) drop-shadow(0 0 20px rgba(0, 104, 71, 0.5));
  }
}

header h1 {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 0px;
  background: linear-gradient(90deg, #ff0000, #ff8c00, #ffd700, #00e5ff, #00ff88, #a855f7, #ff0080, #ff0000, #ff8c00, #ffd700, #00e5ff);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleShine 3s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 20px rgba(0, 229, 255, 0.4));
  text-transform: uppercase;
}

@keyframes titleShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

header .subtitle {
  font-size: 0.55rem;
  opacity: 1;
  font-weight: 600;
  color: #000000;
  text-shadow: none;
}

/* ===== Mode Selector ===== */
.mode-selector {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px 24px 0;
  max-width: 600px;
  margin: 0 auto;
}

.mode-btn {
  flex: 1;
  padding: 14px 20px;
  font-size: 1.05rem;
  font-weight: 700;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  min-height: 50px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mode-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.mode-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* ===== Progress Module ===== */
.progress-module {
  max-width: 600px;
  margin: 16px auto 0;
  padding: 0 24px;
}

.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  padding: 14px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}

.progress-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
}

.toggle-arrow {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.progress-content {
  background: var(--surface);
  padding: 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  border: 1px solid var(--border);
  border-top: none;
  margin-top: -8px;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.progress-bar {
  flex: 1;
  height: 20px;
  background: var(--bg);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}

.progress-fill {
  height: 100%;
  transition: width 0.4s ease;
}

.progress-known {
  background: var(--success);
}

.progress-unknown {
  background: var(--danger);
}

.progress-percentage {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
  min-width: 50px;
  text-align: right;
}

.progress-stats,
.progress-quiz-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

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

.progress-stat {
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
}

.stat-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.stat-known-box { border-left: 3px solid var(--success); }
.stat-unknown-box { border-left: 3px solid var(--danger); }
.stat-pending-box { border-left: 3px solid var(--accent); }
.stat-total-box { border-left: 3px solid var(--primary); }
.stat-correct-box { border-left: 3px solid var(--success); }
.stat-wrong-box { border-left: 3px solid var(--danger); }
.stat-score-box { border-left: 3px solid var(--primary); }

.reset-btn {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 2px solid var(--danger);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
}

.reset-btn:hover {
  background: var(--danger);
  color: white;
}

/* ===== Controls ===== */
.controls {
  padding: 16px 24px;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-box input {
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.search-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.search-box input::placeholder {
  color: var(--text-secondary);
}

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 40px;
}

.filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(37,99,235,0.15);
}

.filter-btn:active {
  transform: scale(0.95);
  transition-duration: 0.06s;
}

.filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.filter-known-btn.active {
  background: var(--success);
  border-color: var(--success);
}

.filter-unknown-btn.active {
  background: var(--danger);
  border-color: var(--danger);
}

.stats {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
}

.stats span {
  font-weight: 700;
  color: var(--primary);
}

/* ===== Carousel Wrapper ===== */
.carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
}

.nav-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.18s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 48px;
}

.nav-btn:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(37,99,235,0.25);
}

.nav-btn:active:not(:disabled) {
  transform: scale(0.9);
  transition-duration: 0.06s;
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.card-display {
  flex: 1;
  max-width: 480px;
}

.card-counter,
.quiz-counter {
  text-align: center;
  padding: 12px 0 20px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.card-counter span,
.quiz-counter span {
  color: var(--primary);
  font-weight: 800;
}

/* ===== Verb Card ===== */
.verb-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  animation: cardSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardSlideIn {
  0% { opacity: 0; transform: translateY(15px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 10px;
}

.card-emoji {
  font-size: 3.5rem;
  line-height: 1;
}

.badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-regular {
  background: #dcfce7;
  color: #166534;
}

.badge-irregular {
  background: #fee2e2;
  color: #991b1b;
}

.card-body {
  padding: 8px 24px 16px;
}

.card-base {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.card-spanish {
  font-size: 1.1rem;
  color: #000000;
  font-style: italic;
  font-weight: 600;
  margin-bottom: 18px;
}

.card-forms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.form-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  min-width: 40px;
}

.form-value {
  flex: 1;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}

.sound-btn-mini {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
  padding: 0;
}

.sound-btn-mini:hover,
.sound-btn-mini:active {
  background: var(--primary);
  border-color: var(--primary);
  transform: scale(1.1);
}

.sound-btn-mini.playing {
  background: var(--accent);
  border-color: var(--accent);
  animation: pulse 0.6s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.form-future {
  border-left: 3px solid var(--accent);
}

.form-gerund {
  border-left: 3px solid #8b5cf6;
}

/* Card Actions */
.card-actions {
  padding: 0 24px 12px;
}

.play-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary);
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 48px;
}

.play-all-btn:hover,
.play-all-btn:active {
  background: var(--primary);
  color: white;
}

.play-all-btn.playing {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Mark Buttons */
.card-marks {
  display: flex;
  gap: 10px;
  padding: 12px 24px 20px;
  border-top: 1px solid var(--border);
}

.mark-btn {
  flex: 1;
  padding: 14px 12px;
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 52px;
}

.mark-btn:active {
  transform: scale(0.93);
  transition-duration: 0.06s;
}

.mark-known {
  color: #166534;
}

.mark-known:hover {
  border-color: var(--success);
  background: #dcfce7;
  transform: scale(1.03);
  box-shadow: 0 3px 10px rgba(16,185,129,0.2);
}

.mark-known.active {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.mark-unknown {
  color: #991b1b;
}

.mark-unknown:hover {
  border-color: var(--danger);
  background: #fee2e2;
  transform: scale(1.03);
  box-shadow: 0 3px 10px rgba(239,68,68,0.2);
}

.mark-unknown.active {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}

/* ===== Quiz Section (inside card) ===== */
.quiz-section {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.quiz-form-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.quiz-form-selector span {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.quiz-form-btns {
  display: flex;
  gap: 6px;
}

.quiz-form-btn {
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 34px;
}

.quiz-form-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: scale(1.06);
}

.quiz-form-btn:active {
  transform: scale(0.94);
  transition-duration: 0.06s;
}

.quiz-form-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.quiz-ask {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

.quiz-input-row {
  display: flex;
  gap: 8px;
}

.quiz-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 1.05rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

.quiz-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.quiz-input.input-correct {
  border-color: var(--success);
  background: #dcfce7;
}

.quiz-input.input-wrong {
  border-color: var(--danger);
  background: #fee2e2;
}

.quiz-check-btn {
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: white;
  cursor: pointer;
  transition: background 0.2s;
  min-height: 46px;
  -webkit-tap-highlight-color: transparent;
}

.quiz-check-btn:hover {
  background: var(--primary-dark);
}

.quiz-result {
  margin-top: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  min-height: 20px;
}

.quiz-correct {
  color: var(--success);
}

.quiz-wrong {
  color: var(--danger);
}

/* ===== Main Menu ===== */
.main-menu {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.menu-title {
  text-align: center;
  font-size: 1.8rem;
  color: #000000;
  font-weight: 700;
  margin-bottom: 20px;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px;
  background: linear-gradient(160deg, #0a0e27 0%, #0d1333 30%, #0a1628 60%, #0e0f2a 100%);
  border: 1px solid rgba(100, 200, 255, 0.15);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.2s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3), inset 0 1px 0 rgba(100,200,255,0.08);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 130px;
  will-change: transform;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* Aurora borealis animated glow */
.menu-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0, 255, 170, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0, 180, 255, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(120, 0, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(255, 0, 180, 0.06) 0%, transparent 40%);
  animation: auroraMove 8s ease-in-out infinite alternate;
  z-index: -2;
  pointer-events: none;
}

/* Stars overlay */
.menu-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.9) 50%, transparent 100%),
    radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,0.8) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 80%, rgba(255,255,255,0.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 70% 70%, rgba(200,220,255,0.9) 50%, transparent 100%),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.6) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 85%, rgba(200,230,255,0.8) 50%, transparent 100%),
    radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,0.5) 50%, transparent 100%),
    radial-gradient(1px 1px at 60% 45%, rgba(220,240,255,0.7) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 40% 30%, rgba(255,255,255,0.8) 50%, transparent 100%),
    radial-gradient(1px 1px at 75% 50%, rgba(180,220,255,0.6) 50%, transparent 100%);
  animation: starsTwinkle 4s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--radius);
}

@keyframes auroraMove {
  0% {
    transform: translate(0, 0) rotate(0deg);
    filter: hue-rotate(0deg);
  }
  33% {
    transform: translate(5%, -3%) rotate(2deg);
    filter: hue-rotate(30deg);
  }
  66% {
    transform: translate(-3%, 5%) rotate(-1deg);
    filter: hue-rotate(-20deg);
  }
  100% {
    transform: translate(2%, 2%) rotate(1deg);
    filter: hue-rotate(15deg);
  }
}

@keyframes starsTwinkle {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* Vary aurora timing per card for natural feel */
.menu-card:nth-child(2)::before { animation-delay: -1.5s; animation-duration: 9s; }
.menu-card:nth-child(3)::before { animation-delay: -3s; animation-duration: 7s; }
.menu-card:nth-child(4)::before { animation-delay: -0.8s; animation-duration: 10s; }
.menu-card:nth-child(5)::before { animation-delay: -4s; animation-duration: 8.5s; }
.menu-card:nth-child(6)::before { animation-delay: -2s; animation-duration: 9.5s; }
.menu-card:nth-child(7)::before { animation-delay: -5s; animation-duration: 7.5s; }
.menu-card:nth-child(8)::before { animation-delay: -1s; animation-duration: 11s; }
.menu-card:nth-child(9)::before { animation-delay: -3.5s; animation-duration: 8s; }
.menu-card:nth-child(10)::before { animation-delay: -2.5s; animation-duration: 10.5s; }
.menu-card:nth-child(11)::before { animation-delay: -4.5s; animation-duration: 7.8s; }
.menu-card:nth-child(12)::before { animation-delay: -0.5s; animation-duration: 9.2s; }
.menu-card:nth-child(13)::before { animation-delay: -3.8s; animation-duration: 8.8s; }
.menu-card:nth-child(14)::before { animation-delay: -1.2s; animation-duration: 10.2s; }
.menu-card:nth-child(15)::before { animation-delay: -2.8s; animation-duration: 7.2s; }
.menu-card:nth-child(16)::before { animation-delay: -4.2s; animation-duration: 9.8s; }

/* Vary star twinkle per card */
.menu-card:nth-child(2)::after { animation-delay: -0.5s; animation-duration: 3.5s; }
.menu-card:nth-child(3)::after { animation-delay: -1.2s; animation-duration: 5s; }
.menu-card:nth-child(4)::after { animation-delay: -0.3s; animation-duration: 4.5s; }
.menu-card:nth-child(5)::after { animation-delay: -2s; animation-duration: 3.8s; }
.menu-card:nth-child(6)::after { animation-delay: -1.5s; animation-duration: 4.2s; }
.menu-card:nth-child(7)::after { animation-delay: -0.8s; animation-duration: 5.2s; }
.menu-card:nth-child(8)::after { animation-delay: -2.5s; animation-duration: 3.2s; }

.menu-card:hover {
  border-color: rgba(100, 220, 255, 0.5);
  box-shadow: 0 14px 35px -6px rgba(0, 200, 255, 0.25), 0 0 20px rgba(0, 255, 170, 0.1);
  transform: translateY(-5px) scale(1.02);
}

/* Sparkle star particles on hover */
.menu-sparkle {
  position: absolute;
  color: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  z-index: 3;
  text-shadow: 0 0 6px rgba(100, 220, 255, 0.9), 0 0 12px rgba(0, 255, 170, 0.5);
  animation: sparkleFloat 0.7s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes sparkleFloat {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) scale(1.2) rotate(90deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0) rotate(180deg);
    opacity: 0;
  }
}

.menu-card:hover::before {
  animation-duration: 3s;
  filter: brightness(1.8);
}

.menu-card:active {
  transform: translateY(-1px) scale(0.97);
  box-shadow: 0 4px 10px -2px rgba(0, 200, 255, 0.2);
  transition-duration: 0.08s;
}

.menu-icon {
  font-size: 2.5rem;
  line-height: 1;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.3));
}

.menu-label {
  font-size: 1rem;
  font-weight: 700;
  color: #e8f0ff;
  text-align: center;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.menu-desc {
  font-size: 0.8rem;
  color: rgba(180, 210, 240, 0.8);
  text-align: center;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ===== Section Headers ===== */
.section {
  position: relative;
  z-index: 1;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  max-width: 700px;
  margin: 0 auto;
}

.section-header h2 {
  color: #000000;
}

.back-btn {
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease, color 0.15s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 40px;
  white-space: nowrap;
}

.back-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: scale(1.05);
}

.back-btn:active {
  transform: scale(0.93);
  transition-duration: 0.06s;
}

.section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000000;
}

/* ===== Idiom Card ===== */
.idiom-card .idiom-phrase {
  font-size: 1.5rem;
  line-height: 1.4;
}

.idiom-example {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
}

.idiom-example strong {
  color: var(--text);
  font-style: normal;
}

.idiom-example-es {
  margin-top: 6px;
  padding: 8px 16px;
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
  border-left: 3px solid var(--primary);
  background: #f0f4ff;
  border-radius: 0 8px 8px 0;
}

.badge-idiom {
  background: #fef3c7;
  color: #92400e;
}

/* ===== Motivational Card with 3D Verb ===== */
.motiv-card .card-body {
  padding: 16px 24px 20px;
}

.motiv-phrase {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 16px;
  text-align: center;
}

.motiv-trans {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 16px;
}

.motiv-verb {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 8px 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.motiv-verb strong {
  color: var(--primary);
}

.badge-motiv {
  background: #ede9fe;
  color: #5b21b6;
}

/* 3D Verb Highlight */
.verb-3d {
  display: inline-block;
  font-weight: 900;
  font-size: 1.15em;
  color: var(--primary);
  text-shadow:
    1px 1px 0px rgba(37, 99, 235, 0.3),
    2px 2px 0px rgba(37, 99, 235, 0.2),
    3px 3px 0px rgba(37, 99, 235, 0.1),
    4px 4px 8px rgba(37, 99, 235, 0.15);
  transform: perspective(200px) rotateX(5deg);
  letter-spacing: 0.02em;
  padding: 0 4px;
  background: linear-gradient(180deg, var(--primary) 0%, #1e40af 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(2px 3px 2px rgba(37, 99, 235, 0.25));
  animation: verb3dPulse 2s ease-in-out infinite alternate;
}

@keyframes verb3dPulse {
  0% { transform: perspective(200px) rotateX(5deg) scale(1); }
  100% { transform: perspective(200px) rotateX(5deg) scale(1.05); }
}

/* ===== Quiz Section Styles ===== */
.quiz-mode-selector {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 24px 12px;
  max-width: 600px;
  margin: 0 auto;
}

.quiz-mode-btn {
  flex: 1;
  max-width: 180px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
}

.quiz-mode-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.quiz-mode-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.quiz-filter-selector {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 24px;
  max-width: 600px;
  margin: 0 auto;
}

.quiz-type-btn,
.match-type-btn {
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
}

.quiz-type-btn:hover,
.match-type-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.quiz-type-btn.active,
.match-type-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* Quiz Write Card */
.quiz-write-card .card-body {
  padding: 12px 24px 20px;
}

.quiz-big-spanish {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}

.quiz-hints-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.quiz-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 6px 12px;
  background: var(--bg);
  border-radius: 50px;
}

.quiz-hint strong {
  color: var(--text);
}

.quiz-score-bar {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 12px 24px 20px;
  max-width: 600px;
  margin: 0 auto;
  font-size: 1rem;
  color: var(--text-secondary);
}

.quiz-score-bar strong {
  color: var(--text);
}

/* ===== Match Game ===== */
.match-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px;
}

.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

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

.match-col h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 4px;
}

.match-item {
  padding: 14px 12px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 48px;
  line-height: 1.3;
}

.match-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.match-selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.match-solved {
  border-color: var(--success);
  background: #dcfce7;
  color: #166534;
  cursor: default;
  opacity: 0.7;
}

.match-wrong {
  border-color: var(--danger) !important;
  background: #fee2e2 !important;
  color: #991b1b !important;
  animation: shakeMatch 0.4s ease;
}

@keyframes shakeMatch {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.match-score {
  text-align: center;
  padding: 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.match-new-btn {
  display: block;
  margin: 0 auto 20px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary);
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}

.match-new-btn:hover {
  background: var(--primary);
  color: white;
}

/* ===== Progress Full Section ===== */
.progress-full {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.progress-block {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.progress-block h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}

/* ===== No Results ===== */
.no-results-container {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.no-results-container .emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;
}

/* ===== Footer ===== */
footer {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: 20px;
}

footer p {
  margin: 4px 0;
}

/* ===== RESPONSIVE — iPad Pro & Tablets ===== */
@media (min-width: 768px) {
  header h1 {
    font-size: 3rem;
  }

  header .subtitle {
    font-size: 1.1rem;
  }

  .mode-selector {
    max-width: 500px;
  }

  .mode-btn {
    font-size: 1.1rem;
    padding: 16px 24px;
  }

  .progress-module {
    max-width: 600px;
  }

  .controls {
    max-width: 600px;
  }

  .search-box input {
    font-size: 1.05rem;
    padding: 16px 24px;
  }

  .filter-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .carousel-wrapper {
    max-width: 650px;
    gap: 16px;
  }

  .card-display {
    max-width: 520px;
  }

  .quiz-container {
    max-width: 650px;
  }

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

/* ===== RESPONSIVE — Mobile ===== */
@media (max-width: 767px) {
  header {
    padding: 4px 10px;
  }

  .header-escudo {
    height: 52px;
  }

  header h1 {
    font-size: 1rem;
  }

  header .subtitle {
    font-size: 0.55rem;
  }

  .mode-selector {
    padding: 16px 16px 0;
    gap: 8px;
  }

  .mode-btn {
    padding: 12px 14px;
    font-size: 0.95rem;
  }

  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .menu-card {
    padding: 18px 12px;
    min-height: 100px;
  }

  .menu-icon {
    font-size: 2rem;
  }

  .menu-label {
    font-size: 0.88rem;
  }

  .section-header {
    padding: 12px 16px;
  }

  .section-title {
    font-size: 1.05rem;
  }

  .progress-module {
    padding: 0 16px;
  }

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

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

  .controls {
    padding: 12px 16px;
  }

  .search-box input {
    padding: 12px 16px;
    font-size: 1rem;
  }

  .filter-btn {
    padding: 7px 12px;
    font-size: 0.78rem;
  }

  .carousel-wrapper {
    gap: 8px;
    padding: 0 8px;
  }

  .nav-btn {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    min-height: 40px;
  }

  .card-header {
    padding: 16px 16px 8px;
  }

  .card-emoji {
    font-size: 2.8rem;
  }

  .card-body {
    padding: 6px 16px 12px;
  }

  .card-base {
    font-size: 1.6rem;
  }

  .card-spanish {
    font-size: 1rem;
  }

  .form-item {
    padding: 10px 12px;
    gap: 8px;
  }

  .form-value {
    font-size: 1rem;
  }

  .sound-btn-mini {
    width: 38px;
    height: 38px;
  }

  .card-actions {
    padding: 0 16px 10px;
  }

  .card-marks {
    padding: 10px 16px 16px;
    gap: 8px;
  }

  .mark-btn {
    padding: 12px 8px;
    font-size: 0.9rem;
    min-height: 48px;
  }

  .quiz-section {
    padding: 12px 16px 16px;
  }

  .quiz-form-btns {
    gap: 4px;
  }

  .quiz-form-btn {
    padding: 5px 9px;
    font-size: 0.74rem;
  }

  .quiz-input-row {
    flex-direction: column;
  }

  .motiv-phrase {
    font-size: 1.15rem;
  }

  .idiom-card .idiom-phrase {
    font-size: 1.25rem;
  }

  .match-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .match-item {
    padding: 12px 10px;
    font-size: 0.82rem;
  }

  .quiz-score-bar {
    gap: 16px;
    font-size: 0.9rem;
  }

  .progress-full {
    padding: 0 16px 20px;
  }
}

/* ===== Dark Mode Support ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --surface: #1e293b;
    --text: #f1f5f9;
    --text-secondary: #94a3b8;
    --border: #334155;
    --primary-light: #1e3a5f;
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.4);
    --shadow-hover: 0 12px 28px -5px rgba(37,99,235,0.3);
  }

  .badge-regular {
    background: #064e3b;
    color: #6ee7b7;
  }

  .badge-irregular {
    background: #7f1d1d;
    color: #fca5a5;
  }

  .mark-known {
    color: #6ee7b7;
  }

  .mark-known:hover {
    background: #064e3b;
  }

  .mark-unknown {
    color: #fca5a5;
  }

  .mark-unknown:hover {
    background: #7f1d1d;
  }

  .quiz-input.input-correct {
    background: #064e3b;
    border-color: var(--success);
  }

  .quiz-input.input-wrong {
    background: #7f1d1d;
    border-color: var(--danger);
  }

  .stat-known-box { border-left-color: #6ee7b7; }
  .stat-unknown-box { border-left-color: #fca5a5; }

  .bg-word {
    color: rgba(148, 163, 184, 0.06);
  }

  .badge-idiom {
    background: #78350f;
    color: #fde68a;
  }

  .idiom-example-es {
    background: #1e293b;
    color: #94a3b8;
    border-left-color: #818cf8;
  }

  .badge-motiv {
    background: #4c1d95;
    color: #c4b5fd;
  }

  .verb-3d {
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(2px 3px 2px rgba(96, 165, 250, 0.35));
  }

  .match-solved {
    background: #064e3b;
    border-color: #6ee7b7;
    color: #6ee7b7;
  }

  .match-wrong {
    background: #7f1d1d !important;
    border-color: #fca5a5 !important;
    color: #fca5a5 !important;
  }
}

/* ===== iPad Pro Landscape ===== */
@media (min-width: 1024px) {
  header {
    padding: 8px 32px;
  }

  .header-escudo {
    height: 88px;
  }

  header h1 {
    font-size: 2.2rem;
  }

  .carousel-wrapper {
    max-width: 700px;
  }

  .card-display {
    max-width: 560px;
  }

  .quiz-container {
    max-width: 700px;
  }
}

/* ===== TENSES SECTION ===== */
.tenses-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 0 16px 12px;
  max-width: 700px;
  margin: 0 auto;
}

.tense-tab {
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.tense-tab:hover {
  border-color: var(--primary);
}

.tense-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.tenses-carousel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 0 8px;
  max-width: 700px;
  margin: 0 auto;
}

.tense-card {
  max-width: 600px;
}

.tense-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 6px;
}

.tense-usage {
  font-size: 0.88rem;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 16px;
  line-height: 1.5;
}

.badge-tense {
  background: #6366f1;
  color: white;
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.tense-structures {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.tense-struct {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}

.struct-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

.struct-formula {
  font-size: 0.82rem;
  color: var(--text-light);
  font-family: 'Courier New', monospace;
  word-break: break-word;
}

.tense-examples-title,
.tense-keywords-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.tense-examples {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.tense-example {
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}

.tense-example-en {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tense-example-es {
  font-size: 0.82rem;
  color: var(--text-light);
  font-style: italic;
}

/* Main example highlight */
.tense-main-example {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border: 2px solid #818cf8;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.main-ex-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #4338ca;
  margin-bottom: 6px;
}

.main-ex-en {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.main-ex-es {
  font-size: 0.88rem;
  color: var(--text-light);
  font-style: italic;
}

/* Usage list */
.tense-usage-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.tense-usage-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.usage-item {
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid #8b5cf6;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.usage-desc {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.usage-example {
  font-size: 0.8rem;
  color: #6366f1;
  font-style: italic;
  font-weight: 500;
}

.tense-deepdive {
  margin: 0 0 16px 0;
  padding: 14px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1px solid #c7d2fe;
  border-radius: var(--radius-sm);
}

.tense-dd-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: #4338ca;
  margin-bottom: 12px;
}

.tense-dd-item {
  padding: 10px 12px;
  background: #fff;
  border-radius: var(--radius-sm);
  border-left: 3px solid #6366f1;
  margin-bottom: 10px;
}

.tense-dd-item:last-child {
  margin-bottom: 0;
}

.tense-dd-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e1b4b;
  margin-bottom: 4px;
}

.tense-dd-desc {
  font-size: 0.83rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 6px;
}

.tense-dd-ex {
  font-size: 0.82rem;
  color: #4f46e5;
  font-style: italic;
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  .tense-deepdive {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    border-color: #4338ca;
  }
  .tense-dd-heading {
    color: #a5b4fc;
  }
  .tense-dd-item {
    background: #1e293b;
    border-left-color: #818cf8;
  }
  .tense-dd-title {
    color: #e0e7ff;
  }
  .tense-dd-ex {
    color: #a5b4fc;
  }
}

/* Dark mode for new elements */
@media (prefers-color-scheme: dark) {
  .tense-main-example {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    border-color: #6366f1;
  }

  .main-ex-label {
    color: #a5b4fc;
  }

  .usage-example {
    color: #a5b4fc;
  }
}

.tense-verb-hl {
  color: var(--primary);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.tense-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tense-keyword {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #ede9fe;
  color: #6366f1;
  border-radius: 12px;
  border: 1px solid #c4b5fd;
}

/* Tenses dark mode */
@media (prefers-color-scheme: dark) {
  .tense-keyword {
    background: #312e81;
    color: #a5b4fc;
    border-color: #4338ca;
  }

  .badge-tense {
    background: #4f46e5;
  }
}

/* Tenses responsive */
@media (max-width: 767px) {
  .tense-tab {
    font-size: 0.65rem;
    padding: 5px 8px;
  }

  .tense-name {
    font-size: 1rem;
  }

  .struct-formula {
    font-size: 0.75rem;
  }
}

/* ===== STORIES SECTION ===== */
.stories-level-filter {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 0 16px 12px;
  flex-wrap: wrap;
}

.story-level-btn {
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.story-level-btn:hover {
  border-color: var(--primary);
}

.story-level-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.stories-carousel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 0 8px;
  max-width: 750px;
  margin: 0 auto;
}

.story-card {
  max-width: 650px;
}

.story-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}

.story-title-es {
  font-size: 0.9rem;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 12px;
}

.level-basic {
  background: #16a34a;
  color: white;
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
}

.level-intermediate {
  background: #ca8a04;
  color: white;
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
}

.level-advanced {
  background: #dc2626;
  color: white;
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
}

.story-speed-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.speed-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-light);
}

.speed-btn {
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.speed-btn:hover {
  border-color: var(--primary);
  background: #eef2ff;
}

.speed-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.story-play-all-btn {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), #2563eb);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.2s;
}

.story-play-all-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.story-play-all-btn.playing {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}

.story-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.story-para {
  padding: 14px 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--border);
  transition: all 0.4s ease;
}

.story-para-active {
  border-left-color: var(--primary);
  border-left-width: 5px;
  background: linear-gradient(135deg, #eef2ff 0%, #dbeafe 100%);
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.2);
  transform: scale(1.01);
}

@keyframes paraGlow {
  0%, 100% { box-shadow: 0 3px 12px rgba(37, 99, 235, 0.15); }
  50% { box-shadow: 0 3px 16px rgba(37, 99, 235, 0.3); }
}

.story-para-active {
  animation: paraGlow 2s ease-in-out infinite;
}

.story-para-en {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

.story-words-wrap {
  flex: 1;
  line-height: 1.8;
}

.story-word {
  display: inline;
  transition: all 0.15s ease;
  border-radius: 3px;
  padding: 1px 0;
}

.story-word.word-active {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1e293b;
  border-radius: 4px;
  padding: 1px 3px;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.4);
  transform: scale(1.05);
  display: inline-block;
}

.story-para-es {
  font-size: 0.82rem;
  color: var(--text-light);
  font-style: italic;
  line-height: 1.5;
  padding-left: 4px;
  border-left: 2px solid #c4b5fd;
}

.story-moral {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #f59e0b;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.story-moral-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 6px;
}

.story-moral-en {
  font-size: 0.95rem;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.story-moral-es {
  font-size: 0.85rem;
  color: #92400e;
  font-style: italic;
}

.story-verbs-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.story-verbs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.story-verb-tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 12px;
  border: 1px solid #93c5fd;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}

.story-verb-tag:hover {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
  transform: scale(1.08);
}

.story-verb-tag.has-tooltip:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #f8fafc;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.story-verb-tag.has-tooltip:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e293b;
  z-index: 100;
  pointer-events: none;
}

/* Touch devices: tap to show translation */
.story-verb-tag.show-translation {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}

.story-verb-tag.show-translation::after {
  content: attr(data-translation);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #f8fafc;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.story-verb-tag.show-translation::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e293b;
  z-index: 100;
}

/* Stories dark mode */
@media (prefers-color-scheme: dark) {
  .speed-btn {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
  }

  .speed-btn:hover {
    border-color: #818cf8;
    background: #312e81;
  }

  .speed-btn.active {
    background: #4f46e5;
    color: white;
    border-color: #4f46e5;
  }

  .story-para-active {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    border-left-color: #818cf8;
  }

  .story-word.word-active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1e293b;
    box-shadow: 0 1px 6px rgba(245, 158, 11, 0.5);
  }

  .story-moral {
    background: linear-gradient(135deg, #451a03, #78350f);
    border-color: #f59e0b;
  }

  .story-moral-label {
    color: #fde68a;
  }

  .story-moral-en {
    color: #fef3c7;
  }

  .story-moral-es {
    color: #fde68a;
  }

  .story-verb-tag {
    background: #1e3a5f;
    color: #93c5fd;
    border-color: #2563eb;
  }

  .story-para-es {
    border-left-color: #6366f1;
  }
}

/* Stories responsive */
@media (max-width: 767px) {
  .story-title {
    font-size: 1.1rem;
  }

  .story-para-en {
    font-size: 0.85rem;
  }

  .story-para-es {
    font-size: 0.78rem;
  }

  .story-play-all-btn {
    font-size: 0.88rem;
  }
}

/* ===== NOTES SECTION ===== */
.notes-categories {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 16px;
  max-width: 900px;
  margin: 0 auto;
}

.notes-cat-btn {
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.notes-cat-btn:hover {
  border-color: var(--primary);
  background: #eef2ff;
}

.notes-cat-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.notes-card {
  max-width: 900px;
  margin: 16px auto;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 24px;
  box-shadow: 0 2px 12px var(--shadow);
}

.notes-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.notes-card-icon {
  font-size: 2.4rem;
}

.notes-card-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.notes-card-subtitle {
  font-size: 0.88rem;
  color: var(--text-light);
  margin: 2px 0 0;
}

.notes-count {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 16px;
  font-weight: 500;
}

.notes-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.note-item {
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  transition: all 0.2s;
  cursor: default;
}

.note-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
  border-color: var(--primary);
}

.note-item-extra {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-bottom: 4px;
  font-weight: 500;
}

.note-item-en {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.note-item-en .sound-btn-mini {
  font-size: 0.7rem;
  padding: 2px 4px;
  vertical-align: middle;
}

.note-item-es {
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 500;
}

/* Notes dark mode */
@media (prefers-color-scheme: dark) {
  .notes-cat-btn {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
  }

  .notes-cat-btn:hover {
    border-color: #818cf8;
    background: #312e81;
  }

  .notes-cat-btn.active {
    background: #4f46e5;
    color: white;
    border-color: #4f46e5;
  }

  .note-item {
    background: linear-gradient(135deg, #1e293b, #1e1b4b);
    border-color: #475569;
  }

  .note-item:hover {
    border-color: #818cf8;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
  }

  .note-item-en {
    color: #818cf8;
  }

  .note-item-es {
    color: #e2e8f0;
  }

  .note-item-extra {
    color: #94a3b8;
  }
}

/* Notes responsive */
@media (max-width: 767px) {
  .notes-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }

  .notes-cat-btn {
    font-size: 0.75rem;
    padding: 6px 12px;
  }

  .note-item-en {
    font-size: 0.88rem;
  }

  .notes-card {
    padding: 16px;
    margin: 12px 8px;
  }
}

/* ===== NOTES EXERCISES ===== */
.notes-exercises {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 2px dashed rgba(0,150,200,0.3);
}
.notes-ex-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0096ff;
  text-align: center;
  margin-bottom: 4px;
}
.notes-ex-sub {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted, #888);
  margin-bottom: 16px;
}
.notes-ex-item {
  background: rgba(0,150,200,0.06);
  border: 1px solid rgba(0,150,200,0.2);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.notes-ex-sentence {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #1a1a2e);
  margin-bottom: 4px;
}
.notes-ex-blank {
  color: #0096ff;
  font-weight: 800;
  letter-spacing: 1px;
}
.notes-ex-es {
  font-size: 0.82rem;
  color: var(--text-muted, #777);
  font-style: italic;
  margin-bottom: 10px;
}
.notes-ex-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.notes-ex-opt {
  background: #fff;
  border: 2px solid #d0d7de;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a2e;
  cursor: pointer;
  transition: all 0.2s;
}
.notes-ex-opt:hover:not(:disabled) {
  border-color: #0096ff;
  background: #e3f2fd;
}
.notes-ex-opt:disabled { cursor: default; opacity: 0.9; }
.notes-ex-correct {
  background: #d4edda !important;
  border-color: #22c55e !important;
  color: #14532d !important;
}
.notes-ex-wrong {
  background: #f8d7da !important;
  border-color: #ef4444 !important;
  color: #721c24 !important;
}
.notes-ex-feedback {
  margin-top: 10px;
  font-size: 0.88rem;
  font-weight: 600;
}
.notes-ex-fb-ok { color: #22c55e; }
.notes-ex-fb-bad { color: #ef4444; }
.notes-ex-hint {
  margin-top: 6px;
  font-size: 0.82rem;
  color: #856404;
  background: #fff3cd;
  border-radius: 8px;
  padding: 6px 10px;
}
body.dark-mode .notes-ex-opt { background: #1e293b; color: #e2e8f0; border-color: #334155; }
body.dark-mode .notes-ex-opt:hover:not(:disabled) { background: #334155; }
body.dark-mode .notes-ex-correct { background: #14532d !important; color: #d4edda !important; }
body.dark-mode .notes-ex-wrong { background: #4c1d1d !important; color: #f8d7da !important; }
body.dark-mode .notes-ex-hint { background: #3a3a1a; color: #ffe08a; }

/* ===== LISTENING SECTION ===== */
.listen-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 10px 16px;
}

.listen-levels {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.listen-level-btn {
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.listen-level-btn:hover {
  border-color: var(--primary);
  background: #eef2ff;
}

.listen-level-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.listen-level-desc {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 8px;
  font-weight: 500;
}

.listen-score {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.listen-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 2px 12px var(--shadow);
}

.listen-instruction {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 18px;
}

.listen-play-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.listen-play-btn {
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.listen-play-btn:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.listen-play-main {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  padding: 12px 28px;
  font-size: 1rem;
}

.listen-play-main:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.listen-input-wrap {
  margin-bottom: 16px;
}

.listen-input {
  width: 100%;
  padding: 16px 18px;
  font-size: 1.1rem;
  font-weight: 500;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
  text-align: center;
  letter-spacing: 0.5px;
}

.listen-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.listen-input-correct {
  border-color: #22c55e !important;
  background: #f0fdf4 !important;
  color: #166534 !important;
}

.listen-input-wrong {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
  color: #991b1b !important;
}

.listen-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.listen-check-btn {
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.listen-check-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.listen-next-btn {
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.listen-next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.listen-result {
  margin-top: 8px;
  text-align: center;
}

.listen-correct {
  font-size: 1.1rem;
  color: #16a34a;
  font-weight: 700;
  margin-bottom: 6px;
}

.listen-incorrect {
  font-size: 1.1rem;
  color: #dc2626;
  font-weight: 700;
  margin-bottom: 8px;
}

.listen-correct-answer {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.listen-your-answer {
  font-size: 0.88rem;
  color: var(--text-light);
  margin-bottom: 6px;
}

.listen-translation {
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
  margin-top: 6px;
}

.listen-word-ok {
  color: #16a34a;
  font-weight: 700;
}

.listen-word-wrong {
  color: #dc2626;
  font-weight: 700;
  text-decoration: underline;
}

.listen-counter {
  text-align: center;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-light);
  font-weight: 600;
}

/* Listening dark mode */
@media (prefers-color-scheme: dark) {
  .listen-level-btn {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
  }

  .listen-level-btn:hover {
    border-color: #818cf8;
    background: #312e81;
  }

  .listen-level-btn.active {
    background: #4f46e5;
    color: white;
    border-color: #4f46e5;
  }

  .listen-play-btn {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
  }

  .listen-play-btn:hover {
    border-color: #818cf8;
  }

  .listen-play-main {
    background: #4f46e5;
    border-color: #4f46e5;
  }

  .listen-input-correct {
    background: #052e16 !important;
    color: #86efac !important;
    border-color: #22c55e !important;
  }

  .listen-input-wrong {
    background: #450a0a !important;
    color: #fca5a5 !important;
    border-color: #ef4444 !important;
  }

  .listen-correct {
    color: #4ade80;
  }

  .listen-incorrect {
    color: #f87171;
  }

  .listen-word-ok {
    color: #4ade80;
  }

  .listen-word-wrong {
    color: #f87171;
  }
}

/* Listening responsive */
@media (max-width: 767px) {
  .listen-card {
    padding: 20px 16px;
  }

  .listen-input {
    font-size: 1rem;
    padding: 14px 14px;
  }

  .listen-play-btn {
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  .listen-play-main {
    padding: 10px 22px;
    font-size: 0.92rem;
  }

  .listen-check-btn,
  .listen-next-btn {
    padding: 10px 24px;
    font-size: 0.92rem;
  }
}

/* ===== VIDEOS ===== */
.videos-controls {
  padding: 0 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.videos-level-filter,
.videos-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.videos-category-filter .filter-btn {
  font-size: 0.8rem;
  padding: 6px 14px;
}
.videos-search {
  max-width: 500px;
  margin: 0 auto 12px;
}
.videos-search-mode {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.videos-search-mode .filter-btn {
  font-size: 0.9rem;
  padding: 8px 20px;
  font-weight: 700;
}
.videos-search {
  display: flex;
  gap: 8px;
  align-items: center;
}
.videos-search input {
  flex: 1;
  padding: 10px 16px;
  border: 2px solid #ddd;
  border-radius: 10px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
.videos-search input:focus {
  border-color: var(--primary);
  outline: none;
}
.yt-search-btn {
  padding: 10px 18px;
  background: #ff0000;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s;
}
.yt-search-btn:hover {
  background: #cc0000;
}
.videos-count {
  text-align: center;
  color: #888;
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 0 16px;
  max-width: 1200px;
  margin: 0 auto 30px;
}
.video-card {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.video-card-thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background-size: cover;
  background-position: center;
  background-color: #111;
}
.video-card-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  background: rgba(255,0,0,0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, background 0.3s;
}
.video-card:hover .video-card-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(255,0,0,1);
}
.video-card-play::after {
  content: "";
  border-left: 22px solid white;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  margin-left: 4px;
}
.video-card-duration {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.video-card-info {
  padding: 14px;
}
.video-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.3;
}
.video-card-titleEs {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 8px;
}
.video-card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.video-card-badge {
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
}
.video-card-badge.level-basico { background: #d4edda; color: #155724; }
.video-card-badge.level-intermedio { background: #fff3cd; color: #856404; }
.video-card-badge.level-avanzado { background: #f8d7da; color: #721c24; }
.video-card-badge.category { background: #e8f0fe; color: #1a56db; }
.video-card-channel {
  font-size: 0.75rem;
  color: #999;
  margin-top: 6px;
}

/* Video Player Modal */
.video-player {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.video-player-content {
  background: white;
  border-radius: 16px;
  padding: 20px;
  width: 95%;
  max-width: 800px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.video-player-close {
  position: absolute;
  top: 8px; right: 14px;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #666;
  z-index: 10;
}
.video-player-frame {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.video-player-frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.video-player-content h3 {
  margin: 0 0 4px;
  color: #333;
  font-size: 1.1rem;
}
.video-player-content p {
  margin: 0 0 8px;
  color: #888;
  font-size: 0.9rem;
}
.video-player-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (prefers-color-scheme: dark) {
  .video-card { background: #1e1e1e; }
  .video-card-title { color: #eee; }
  .video-card-titleEs { color: #aaa; }
  .video-card-channel { color: #888; }
  .video-player-content { background: #1e1e1e; }
  .video-player-content h3 { color: #eee; }
  .video-player-content p { color: #aaa; }
  .video-player-close { color: #aaa; }
  .videos-search input { background: #2d2d2d; border-color: #444; color: #eee; }
}

@media (max-width: 768px) {
  .videos-grid {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }
}

/* ===== MODAL VERBS ===== */
.modal-uses {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.modal-use-item {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  border-left: 3px solid var(--primary);
}
.modal-use-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
  margin-bottom: 2px;
}
.modal-use-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* ===== AUTH / SYNC ===== */
.auth-bar {
  text-align: center;
  margin-top: 2px;
}
.auth-btn {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.5);
  color: white;
  padding: 3px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.72rem;
  transition: background 0.3s;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.auth-btn:hover {
  background: rgba(0,0,0,0.5);
}
.auth-btn.logged-in {
  background: rgba(39,174,96,0.6);
  border-color: rgba(39,174,96,0.8);
}
#userInfo {
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
  margin-left: 8px;
}
.auth-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.auth-modal-content {
  background: white;
  border-radius: 16px;
  padding: 30px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.auth-close {
  position: absolute;
  top: 12px; right: 16px;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #666;
}
.auth-modal-content h2 {
  text-align: center;
  margin-bottom: 16px;
  color: #333;
}
.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.auth-tab {
  flex: 1;
  padding: 10px;
  border: 2px solid #ddd;
  background: #f8f8f8;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s;
}
.auth-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.auth-modal-content form div {
  margin-bottom: 14px;
}
.auth-modal-content label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  color: #555;
  font-size: 0.85rem;
}
.auth-modal-content input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
.auth-modal-content input:focus {
  border-color: var(--primary);
  outline: none;
}
.auth-submit {
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.3s;
}
.auth-submit:hover {
  background: var(--primary-dark);
}
.auth-error {
  background: #fde8e8;
  color: #e74c3c;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  text-align: center;
}
.sync-info {
  text-align: center;
}
.sync-info p {
  margin: 10px 0;
  color: #555;
}
.sync-last {
  font-size: 0.8rem;
  color: #999 !important;
}
@media (prefers-color-scheme: dark) {
  .auth-modal-content {
    background: #1e1e1e;
  }
  .auth-modal-content h2,
  .auth-modal-content label {
    color: #ddd;
  }
  .auth-modal-content input {
    background: #2d2d2d;
    border-color: #444;
    color: #eee;
  }
  .auth-tab {
    background: #2d2d2d;
    border-color: #444;
    color: #ccc;
  }
  .auth-close {
    color: #aaa;
  }
  .sync-info p { color: #bbb; }
}

/* ===== PASSIVE VOICE ===== */
.passive-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  max-width: 700px;
  margin: 0 auto;
  justify-content: center;
}

.passive-display {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px 20px;
}

.passive-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.passive-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #000;
  margin: 18px 0 10px;
}

.passive-section-title:first-child { margin-top: 0; }

.passive-explanation {
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.6;
}

.passive-comparison {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.passive-comp-box {
  flex: 1;
  min-width: 200px;
  padding: 14px;
  border-radius: var(--radius-sm);
  text-align: center;
}

.passive-comp-active {
  background: #ecfdf5;
  border: 2px solid #10b981;
}

.passive-comp-passive {
  background: #eff6ff;
  border: 2px solid #3b82f6;
}

.passive-comp-label {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.passive-comp-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.passive-comp-example {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.passive-comp-es {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 4px;
}

.passive-arrow {
  font-size: 1.5rem;
}

.passive-rule {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}

.passive-rule-text {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.passive-example-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.passive-en {
  font-weight: 600;
  color: var(--primary);
  font-size: 0.9rem;
}

.passive-es {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
}

.passive-formula-box {
  background: #1e293b;
  color: #e2e8f0;
  padding: 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-family: 'Courier New', monospace;
}

.passive-formula {
  font-size: 0.88rem;
  margin-bottom: 6px;
}

.passive-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.passive-step {
  padding: 8px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  border-left: 3px solid var(--accent);
}

.passive-tense-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.passive-tense-icon {
  font-size: 2rem;
}

.passive-tense-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
}

.passive-structures {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.passive-struct {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
}

.passive-struct-highlight {
  background: #eff6ff;
  border-left-color: #3b82f6;
}

.passive-struct-highlight .passive-struct-label,
.passive-struct-highlight .passive-struct-formula {
  color: #1e293b;
}

.passive-struct-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #000;
}

.passive-struct-formula {
  font-size: 0.85rem;
  font-family: 'Courier New', monospace;
  color: #1e293b;
  word-break: break-word;
}

.passive-note {
  padding: 10px 14px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: #92400e;
  margin-bottom: 16px;
}

.passive-examples-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 12px;
}

.passive-example-pair {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

.passive-active-side, .passive-passive-side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.passive-label-sm {
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.passive-sentence {
  font-size: 0.92rem;
  font-weight: 600;
}

.passive-transform-arrow {
  text-align: center;
  font-size: 1rem;
  margin: 4px 0;
}

.passive-translation {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

.passive-modal-item {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

.passive-modal-header {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary);
}

.passive-extra-forms {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.passive-extra {
  font-size: 0.85rem;
  margin-bottom: 4px;
  color: var(--text);
}

@media (max-width: 767px) {
  .passive-comparison {
    flex-direction: column;
  }
  .passive-arrow {
    transform: rotate(90deg);
  }
  .passive-comp-box {
    min-width: auto;
    width: 100%;
  }
}

.passive-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 8px;
}

.passive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 500px;
}

.passive-table thead th {
  background: #1e293b;
  color: #e2e8f0;
  padding: 10px 8px;
  text-align: left;
  font-weight: 700;
  font-size: 0.8rem;
  position: sticky;
  top: 0;
}

.passive-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}

.passive-table tbody tr:hover {
  background: #f0f9ff;
}

.passive-table td {
  padding: 10px 8px;
  vertical-align: middle;
}

.passive-table-tense {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.78rem;
  min-width: 110px;
}

.passive-table-from,
.passive-table-to {
  font-size: 0.82rem;
  color: var(--text);
}

.passive-table-from span,
.passive-table-to span {
  display: inline;
}

.passive-table-from .sound-btn-mini,
.passive-table-to .sound-btn-mini {
  margin-left: 4px;
  font-size: 0.7rem;
  vertical-align: middle;
}

.passive-table-arrow {
  text-align: center;
  font-size: 0.9rem;
  width: 30px;
}

.passive-table-na {
  opacity: 0.6;
}

.passive-table-dash {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.passive-table-note {
  display: block;
  font-size: 0.72rem;
  color: #f59e0b;
  font-style: italic;
}

.passive-table-section {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .passive-table {
    font-size: 0.75rem;
    min-width: 420px;
  }
  .passive-table td, .passive-table th {
    padding: 8px 5px;
  }
}

/* Being vs Been */
.bb-section {
  margin-bottom: 20px;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
}

.bb-being { border-color: #f59e0b; background: #fffbeb; }
.bb-been { border-color: #8b5cf6; background: #f5f3ff; }
.bb-neither { border-color: #64748b; background: #f8fafc; }

.bb-header { margin-bottom: 8px; }

.bb-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 1px;
}

.bb-badge-being { background: #f59e0b; color: #fff; }
.bb-badge-been { background: #8b5cf6; color: #fff; }
.bb-badge-neither { background: #64748b; color: #fff; }

.bb-rule {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
  line-height: 1.5;
}

.bb-tenses {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
  font-style: italic;
}

.bb-tense-tag {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}

.bb-yes {
  font-size: 0.78rem;
  font-weight: 700;
  color: #16a34a;
}

.bb-no {
  font-size: 1rem;
  color: var(--text-secondary);
}

@media (prefers-color-scheme: dark) {
  .bb-being { border-color: #f59e0b; background: #422006; }
  .bb-been { border-color: #8b5cf6; background: #2e1065; }
  .bb-neither { border-color: #64748b; background: #1e293b; }
  .bb-rule { color: #e2e8f0; }
  .bb-tenses { color: #94a3b8; }
  .bb-yes { color: #4ade80; }
  .bb-no { color: #64748b; }
}

/* Passive Voice dark mode */
@media (prefers-color-scheme: dark) {
  .passive-comp-active {
    background: #064e3b;
    border-color: #10b981;
  }
  .passive-comp-passive {
    background: #1e3a5f;
    border-color: #3b82f6;
  }
  .passive-comp-label,
  .passive-comp-desc,
  .passive-comp-example,
  .passive-comp-es {
    color: #e2e8f0;
  }
  .passive-struct {
    background: #1e293b;
    border-left-color: #475569;
  }
  .passive-struct-highlight {
    background: #1e3a5f;
    border-left-color: #3b82f6;
  }
  .passive-struct-highlight .passive-struct-label,
  .passive-struct-highlight .passive-struct-formula {
    color: #e2e8f0;
  }
  .passive-struct-label {
    color: #e2e8f0;
  }
  .passive-struct-formula {
    color: #cbd5e1;
  }
  .passive-rule {
    background: #1e293b;
    border-left-color: #3b82f6;
  }
  .passive-rule-text {
    color: #e2e8f0;
  }
  .passive-en {
    color: #60a5fa;
  }
  .passive-es {
    color: #94a3b8;
  }
  .passive-section-title {
    color: #e2e8f0;
  }
  .passive-explanation {
    color: #cbd5e1;
  }
  .passive-tense-header h3 {
    color: #e2e8f0;
  }
  .passive-note {
    background: #422006;
    border-color: #f59e0b;
    color: #fbbf24;
  }
  .passive-examples-title {
    color: #e2e8f0;
  }
  .passive-example-pair {
    background: #1e293b;
    border-color: #334155;
  }
  .passive-sentence {
    color: #e2e8f0;
  }
  .passive-translation {
    color: #94a3b8;
    border-top-color: #334155;
  }
  .passive-modal-item {
    background: #1e293b;
    border-color: #334155;
  }
  .passive-modal-header {
    color: #60a5fa;
    border-bottom-color: #3b82f6;
  }
  .passive-extra {
    color: #cbd5e1;
  }
  .passive-table tbody tr:hover {
    background: #1e293b;
  }
  .passive-table-tense {
    color: #60a5fa;
  }
  .passive-table-from,
  .passive-table-to {
    color: #e2e8f0;
  }
}

/* ===== TUTOR MATIAS ===== */
.tutor-home { padding: 10px; }
.tutor-avatar-container { text-align: center; padding: 20px 0; }
.tutor-avatar {
  width: 140px; height: 180px;
  margin: 0 auto;
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
  border-radius: 50% 50% 40% 40%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 30px rgba(0,150,255,0.4), 0 0 60px rgba(0,150,255,0.2);
  animation: tutorPulse 3s ease-in-out infinite;
  position: relative;
}
.tutor-robot-head { font-size: 60px; margin-top: -5px; }
.tutor-eagle-chest {
  font-size: 40px;
  margin-top: -5px;
  background: radial-gradient(circle, rgba(0,104,71,0.3), transparent);
  border-radius: 50%;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(206,17,38,0.5);
  box-shadow: 0 0 10px rgba(0,104,71,0.4);
}
@keyframes tutorPulse {
  0%,100% { box-shadow: 0 0 30px rgba(0,150,255,0.4); transform: scale(1); }
  50% { box-shadow: 0 0 50px rgba(0,150,255,0.7); transform: scale(1.05); }
}
.tutor-name { font-size: 1.8rem; font-weight: 700; color: #1a1a2e; margin-top: 10px; }
.tutor-subtitle { color: #555; font-size: 0.9rem; }
.tutor-greeting {
  background: #f0f8ff; border-radius: 12px; padding: 15px; margin: 10px 0;
  border-left: 4px solid #0096ff; text-align: center;
}
.tutor-greeting p { margin: 0 0 10px; color: #333; font-size: 0.95rem; }
.tutor-speak-btn {
  background: #0096ff; color: #fff; border: none; border-radius: 20px;
  padding: 8px 20px; font-size: 0.9rem; cursor: pointer;
}
.tutor-speak-btn:active { transform: scale(0.95); }
.tutor-plan-title {
  font-size: 1.3rem; font-weight: 700; color: #000; margin: 20px 0 10px; text-align: center;
}
.tutor-level { margin-bottom: 15px; }
.tutor-level-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 15px; border-left: 4px solid; border-radius: 8px;
  background: rgba(255,255,255,0.8); margin-bottom: 8px; font-weight: 600;
}
.tutor-level-badge {
  color: #fff; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600;
}
.tutor-topics { display: flex; flex-direction: column; gap: 6px; }
.tutor-topic-btn {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 12px;
  padding: 12px 15px; cursor: pointer; transition: all 0.2s; text-align: left; width: 100%;
}
.tutor-topic-btn:hover { background: #f0f8ff; border-color: #0096ff; transform: translateX(5px); }
.tutor-topic-done { background: #f0fff0; border-color: #22c55e; }
.tutor-topic-icon { font-size: 1.5rem; }
.tutor-topic-info { flex: 1; }
.tutor-topic-name { display: block; font-weight: 600; color: #000; font-size: 0.95rem; }
.tutor-topic-name-es { display: block; color: #666; font-size: 0.8rem; }
.tutor-check { font-size: 1.2rem; }
.tutor-arrow { color: #0096ff; font-size: 1.2rem; font-weight: 700; }

/* Tutor Conversation */
.tutor-conv { display: flex; flex-direction: column; height: calc(100vh - 120px); }
.tutor-conv-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px; background: rgba(255,255,255,0.9); border-radius: 12px; margin-bottom: 10px;
}
.tutor-back-btn {
  background: none; border: none; color: #0096ff; font-weight: 600; cursor: pointer; font-size: 0.9rem;
}
.tutor-conv-topic { font-weight: 600; color: #000; }
.tutor-conv-progress { color: #666; font-size: 0.85rem; background: #e8e8e8; padding: 3px 10px; border-radius: 10px; }
.tutor-avatar-mini { display: flex; align-items: center; gap: 8px; padding: 5px 10px; }
.tutor-avatar-small {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 15px rgba(0,150,255,0.3);
  position: relative;
}
.tutor-small-robot { font-size: 20px; }
.tutor-small-eagle { font-size: 12px; position: absolute; bottom: 2px; right: 2px; }
.tutor-avatar-mini span { font-weight: 600; color: #333; }

/* Chat messages */
.tutor-chat {
  flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px;
}
.tutor-msg { display: flex; gap: 8px; align-items: flex-start; animation: fadeInUp 0.3s; }
.tutor-msg-tutor { align-self: flex-start; }
.tutor-msg-user { align-self: flex-end; }
.tutor-msg-correction { align-self: flex-start; }
.tutor-msg-avatar { font-size: 1.3rem; min-width: 30px; text-align: center; }
.tutor-msg-bubble { padding: 10px 14px; border-radius: 16px; max-width: 80%; position: relative; }
.tutor-bubble-tutor { background: #f0f8ff; border: 1px solid #cce5ff; border-top-left-radius: 4px; }
.tutor-bubble-user { background: #0096ff; color: #fff; border-top-right-radius: 4px; }
.tutor-bubble-correction {
  background: #fff5f5; border: 1px solid #ffcdd2; border-top-left-radius: 4px;
}
.tutor-bubble-encourage { background: #f0fff0; border: 1px solid #c8e6c9; border-top-left-radius: 4px; color: #2e7d32; font-weight: 500; }
.tutor-msg-en { font-size: 0.95rem; line-height: 1.4; }
.tutor-msg-es { font-size: 0.8rem; color: #666; margin-top: 4px; font-style: italic; }
.tutor-bubble-user .tutor-msg-en { color: #fff; }
.sound-btn-mini { background: none; border: none; cursor: pointer; font-size: 0.8rem; margin-top: 4px; }
.tutor-correction-title { font-weight: 700; color: #c62828; margin-bottom: 5px; font-size: 0.85rem; }
.tutor-correction-item { margin-bottom: 6px; font-size: 0.85rem; }
.tutor-correction-wrong { display: block; color: #c62828; text-decoration: line-through; }
.tutor-correction-right { display: block; color: #2e7d32; font-weight: 600; }
.tutor-correction-rule { display: block; color: #555; font-style: italic; font-size: 0.8rem; }

/* Hints */
.tutor-hints {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px;
  border-top: 1px solid #eee;
}
.tutor-hint-btn {
  background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9;
  border-radius: 20px; padding: 6px 14px; font-size: 0.8rem; cursor: pointer;
  transition: all 0.2s;
}
.tutor-hint-btn:hover { background: #bbdefb; }

/* Input area */
.tutor-input-area {
  display: flex; flex-direction: column; gap: 10px; padding: 10px;
  background: rgba(255,255,255,0.95); border-top: 1px solid #e0e0e0; border-radius: 0 0 12px 12px;
}
.tutor-mic-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #0096ff, #0066cc); color: #fff;
  border: none; border-radius: 30px; padding: 14px; font-size: 1rem;
  cursor: pointer; transition: all 0.3s; font-weight: 600;
}
.tutor-mic-btn:hover { transform: scale(1.02); box-shadow: 0 4px 15px rgba(0,150,255,0.3); }
.tutor-mic-active {
  background: linear-gradient(135deg, #ff4444, #cc0000) !important;
  animation: micPulse 1.5s ease-in-out infinite;
}
@keyframes micPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,0,0,0.4); }
  50% { box-shadow: 0 0 0 15px rgba(255,0,0,0); }
}
.tutor-mic-icon { font-size: 1.3rem; }
.tutor-text-input {
  display: flex; gap: 8px; align-items: center;
}
.tutor-text-input input {
  flex: 1; padding: 10px 15px; border: 2px solid #e0e0e0; border-radius: 25px;
  font-size: 0.95rem; outline: none; background: #fff; color: #000;
}
.tutor-text-input input:focus { border-color: #0096ff; }
.tutor-send-btn {
  background: #0096ff; color: #fff; border: none; border-radius: 50%;
  width: 40px; height: 40px; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tutor-send-btn:active { transform: scale(0.9); }

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

/* Tutor AI Section */
.tutor-ai-section { margin: 15px 0; }
.tutor-ai-title {
  font-size: 1.2rem; font-weight: 700; color: #000; text-align: center;
  margin-bottom: 10px; background: linear-gradient(90deg, #ffd700, #ff8c00); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.tutor-ai-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.tutor-ai-opt {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #1a1a2e, #16213e); color: #fff;
  border: 1px solid rgba(0,150,255,0.3); border-radius: 14px;
  padding: 14px 16px; cursor: pointer; transition: all 0.3s; text-align: left; width: 100%;
}
.tutor-ai-opt:hover { border-color: #0096ff; box-shadow: 0 0 20px rgba(0,150,255,0.3); transform: translateX(5px); }
.tutor-ai-opt-icon { font-size: 2rem; }
.tutor-ai-opt small { color: #aaa; }
.tutor-tense-title { font-size: 1rem; font-weight: 600; color: #333; text-align: center; margin: 10px 0; }
.tutor-tense-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.tutor-tense-btn {
  background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 10px 8px;
  font-size: 0.82rem; font-weight: 600; color: #1a1a2e; cursor: pointer;
  transition: all 0.2s; text-align: center;
}
.tutor-tense-btn:hover { background: #e3f2fd; border-color: #0096ff; color: #0066cc; }
.tutor-ai-badge { background: linear-gradient(90deg, #ffd700, #ff8c00) !important; color: #000 !important; font-weight: 700; }

/* Tutor Stats */
.tutor-stats { background: #fff; border-radius: 14px; padding: 15px; margin: 15px 0; border: 1px solid #e0e0e0; }
.tutor-stats-title { font-size: 1.1rem; font-weight: 700; color: #000; text-align: center; margin-bottom: 10px; }
.tutor-stats-row { display: flex; justify-content: space-around; gap: 10px; margin-bottom: 10px; }
.tutor-stat-box { text-align: center; }
.tutor-stat-num { font-size: 1.5rem; font-weight: 800; color: #0096ff; }
.tutor-stat-label { font-size: 0.75rem; color: #666; }
.tutor-weak-areas { margin-top: 8px; }
.tutor-weak-title { font-size: 0.85rem; font-weight: 600; color: #333; margin-bottom: 4px; }
.tutor-weak-tag {
  display: inline-block; background: #fff3cd; color: #856404; padding: 3px 10px;
  border-radius: 12px; font-size: 0.75rem; margin: 2px 4px; font-weight: 500;
}
.tutor-repeat-tag {
  display: inline-block; background: #f8d7da; color: #721c24; padding: 3px 10px;
  border-radius: 12px; font-size: 0.75rem; margin: 2px 4px; font-weight: 500;
}

/* ===== REVIEW VISUAL ===== */
.review-controls {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-type-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.review-search {
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}
.review-search input {
  width: 100%;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  background: #ffffff;
  color: #000000;
}
.review-carousel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  justify-content: center;
}
.review-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}
.review-img-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.review-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-emoji-large {
  font-size: 5rem;
  text-align: center;
}
.review-content {
  padding: 16px 20px 20px;
}
.review-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.review-badge-irregular {
  background: #fde8e8;
  color: #c0392b;
}
.review-badge-regular {
  background: #e8f8e8;
  color: #27ae60;
}
.review-verb-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 14px;
}
.review-verb-main .review-emoji {
  font-size: 1.8rem;
}
.review-spanish {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
}
@media (prefers-color-scheme: dark) {
  .review-spanish {
    color: #f1f5f9;
  }
}
.review-tenses {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-tense {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--primary);
}
.review-tense:nth-child(1) {
  border-left-color: #27ae60;
}
.review-tense:nth-child(2) {
  border-left-color: #f39c12;
}
.review-tense:nth-child(3) {
  border-left-color: #e74c3c;
}
.review-tense-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 120px;
}
.review-tense-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  font-family: 'Georgia', serif;
}
.review-tense .sound-btn-mini {
  font-size: 1rem;
}

@media (max-width: 767px) {
  .review-img-container {
    height: 160px;
  }
  .review-tense-label {
    min-width: 90px;
    font-size: 0.68rem;
  }
  .review-tense-value {
    font-size: 1rem;
  }
  .review-content {
    padding: 12px 14px 16px;
  }
}

/* ===== SPELLING ===== */
.spelling-controls {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.spelling-level-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.spelling-score {
  font-size: 1.1rem;
  font-weight: 700;
}
.spelling-display {
  padding: 12px 16px;
  max-width: 500px;
  margin: 0 auto;
}
.spelling-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px 20px;
  text-align: center;
}
.spelling-word-info {
  margin-bottom: 16px;
}
.spelling-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 4px;
}
.spelling-spanish {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
}
.spelling-listen {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.spelling-listen-btn {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}
.spelling-listen-btn:hover {
  transform: scale(1.05);
}
.spelling-listen-btn.spelling-slow {
  background: #f39c12;
}
.spelling-listen-btn.spelling-letters {
  background: #8e44ad;
}
.spelling-input-area {
  margin-bottom: 14px;
}
.spelling-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.3rem;
  text-align: center;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Georgia', serif;
  letter-spacing: 2px;
  transition: border-color 0.3s;
}
.spelling-input:focus {
  border-color: var(--primary);
  outline: none;
}
.spelling-input.spelling-correct {
  border-color: #27ae60;
  background: #e8f8e8;
}
.spelling-input.spelling-wrong {
  border-color: #e74c3c;
  background: #fde8e8;
}
.spelling-letter-count {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 6px;
}
.spelling-actions {
  margin-bottom: 12px;
}
.spelling-check-btn {
  background: #27ae60;
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 28px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
}
.spelling-check-btn:hover {
  transform: scale(1.05);
}
.spelling-result {
  margin-top: 12px;
}
.spelling-success {
  color: #27ae60;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.spelling-fail {
  color: #e74c3c;
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.spelling-correct-word {
  font-size: 1.5rem;
  letter-spacing: 3px;
  margin: 8px 0;
  font-family: 'Georgia', serif;
}
.spell-letter-ok {
  color: #27ae60;
  font-weight: 700;
}
.spell-letter-bad {
  color: #e74c3c;
  font-weight: 700;
  text-decoration: underline;
}
.spelling-your-answer {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}
.spelling-next-btn {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  transition: transform 0.2s;
}
.spelling-next-btn:hover {
  transform: scale(1.05);
}
.spelling-progress {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.spelling-voice-area {
  margin-bottom: 14px;
  text-align: center;
}
.spelling-mic-btn {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.spelling-mic-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}
.spelling-mic-btn.spelling-mic-active {
  background: linear-gradient(135deg, #e74c3c, #ff6b6b);
  animation: mic-pulse 1s infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5); }
  50% { box-shadow: 0 0 0 12px rgba(231, 76, 60, 0); }
}
.spelling-voice-status {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.spelling-voice-hint {
  font-style: italic;
  color: var(--text-secondary);
}
.spelling-voice-result {
  color: var(--text);
}

/* ===== SPELLING CUSTOM ===== */
.spelling-custom-header {
  text-align: center;
  margin-bottom: 20px;
}
.spelling-custom-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 8px;
}
.spelling-custom-header h3 {
  font-size: 1.3rem;
  color: var(--text);
  margin: 0 0 6px 0;
}
.spelling-custom-header p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}
.spelling-custom-input-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
  margin: 0 auto 20px;
}
.spelling-custom-word-input {
  padding: 14px 16px;
  border: 2px solid #ddd;
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
  text-align: center;
  outline: none;
  transition: border-color 0.3s;
}
.spelling-custom-word-input:focus {
  border-color: #9b59b6;
}
.spelling-custom-start-btn {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 24px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.spelling-custom-start-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(155, 89, 182, 0.4);
}
.spelling-custom-practice-card {
  background: #f8f4ff;
  border-radius: var(--radius-sm);
  padding: 20px;
  margin: 16px 0;
  border: 2px solid #e8d5f5;
}
.spelling-custom-hidden-word {
  display: block;
  font-size: 1.1rem;
  color: #9b59b6;
  font-weight: 700;
  margin: 6px 0;
}
.spelling-hint-es {
  display: block;
  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: 6px;
}
.spelling-custom-history {
  margin-top: 20px;
  text-align: center;
}
.spelling-custom-history-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.spelling-custom-history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.spelling-custom-history-btn {
  background: linear-gradient(135deg, #f0e6f6, #e8d5f5);
  border: 1px solid #d5b8e8;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  font-weight: 600;
  color: #6c3483;
}
.spelling-custom-history-btn:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, #e8d5f5, #d5b8e8);
}
.spelling-custom-history-es {
  font-weight: 400;
  color: #8e6aa0;
  font-size: 0.8rem;
  margin-left: 4px;
}
@media (max-width: 768px) {
  .spelling-custom-word-input {
    font-size: 1rem;
    padding: 12px 14px;
  }
  .spelling-custom-start-btn {
    font-size: 1rem;
    padding: 12px 20px;
  }
}

/* ===== ORDERING ===== */
.ordering-controls {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ordering-type-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.ordering-score {
  font-size: 1.1rem;
  font-weight: 700;
}
.ordering-display {
  padding: 12px 16px;
  max-width: 500px;
  margin: 0 auto;
}
.ordering-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px 20px;
  text-align: center;
}
.ordering-verb-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ordering-emoji {
  font-size: 3rem;
}
.ordering-spanish {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
}
.ordering-badge {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.ordering-badge-irr {
  background: #fde8e8;
  color: #e74c3c;
}
.ordering-badge-reg {
  background: #e8f8e8;
  color: #27ae60;
}
.ordering-instruction {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.ordering-cards {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ordering-card-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.3s, box-shadow 0.2s;
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
  font-family: 'Georgia', serif;
}
.ordering-card-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.5);
}
.ordering-card-btn.ordering-card-used {
  opacity: 0.3;
  transform: scale(0.9);
  cursor: default;
  pointer-events: none;
}
.ordering-selected {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ordering-slot {
  background: #f5f5f5;
  border: 2px dashed #ccc;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  min-width: 100px;
  text-align: center;
  transition: all 0.3s;
}
.ordering-slot-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 600;
}
.ordering-slot-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Georgia', serif;
  color: var(--text);
}
.ordering-slot-filled {
  border-color: #667eea;
  background: #f0f0ff;
}
.ordering-slot-correct {
  border-color: #27ae60;
  background: #e8f8e8;
}
.ordering-slot-correct .ordering-slot-value {
  color: #27ae60;
}
.ordering-slot-wrong {
  border-color: #e74c3c;
  background: #fde8e8;
}
.ordering-slot-wrong .ordering-slot-value {
  color: #e74c3c;
}
.ordering-result {
  margin-top: 12px;
}
.ordering-success {
  color: #27ae60;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.ordering-fail {
  color: #e74c3c;
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.ordering-next-btn {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  transition: transform 0.2s;
}
.ordering-next-btn:hover {
  transform: scale(1.05);
}
.ordering-progress {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
@media (max-width: 767px) {
  .ordering-card-btn {
    padding: 12px 16px;
    font-size: 1rem;
  }
  .ordering-slot {
    min-width: 80px;
    padding: 8px 10px;
  }
}

/* ===== Grammar Practice ===== */
.grammar-controls {
  text-align: center;
  padding: 8px 16px;
}
.grammar-score {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.grammar-display {
  padding: 16px;
  max-width: 700px;
  margin: 0 auto;
}
.grammar-categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.grammar-cat-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.grammar-cat-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.grammar-cat-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.grammar-cat-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.grammar-cat-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.grammar-cat-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.grammar-cat-count {
  font-size: 0.78rem;
  color: var(--primary);
  font-weight: 600;
}
.grammar-exercise {
  background: var(--surface);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: center;
}
.grammar-progress {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.grammar-sentence {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.5;
}
.grammar-sentence-label {
  font-size: 0.95rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 10px;
}
.grammar-tense-badge {
  display: inline-block;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.grammar-active-sentence {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  padding: 12px;
  background: #eef2ff;
  border-radius: 10px;
}
.grammar-voice-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 6px;
}
.grammar-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}
.grammar-option-btn {
  padding: 12px 24px;
  font-size: 1.05rem;
  font-weight: 600;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 120px;
}
.grammar-option-btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-light);
}
.grammar-option-btn:disabled {
  cursor: default;
  opacity: 0.85;
}
.grammar-option-btn.grammar-correct {
  border-color: #27ae60;
  background: #d4edda;
  color: #155724;
}
.grammar-option-btn.grammar-wrong {
  border-color: #e74c3c;
  background: #f8d7da;
  color: #721c24;
}
.grammar-hint {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.grammar-translation {
  font-size: 0.9rem;
  color: #000;
  font-weight: 600;
  margin-bottom: 12px;
  font-style: italic;
}
@media (prefers-color-scheme: dark) {
  .grammar-translation {
    color: #f1f5f9;
  }
}
.grammar-feedback {
  margin-top: 16px;
  min-height: 40px;
}
.grammar-fb-correct {
  font-size: 1.1rem;
  color: #27ae60;
  font-weight: 700;
}
.grammar-fb-wrong {
  font-size: 1.1rem;
  color: #e74c3c;
  font-weight: 700;
}
.grammar-extra {
  font-size: 0.9rem;
  color: var(--text-secondary);
  display: inline-block;
  margin-top: 6px;
}
.grammar-next-btn {
  margin-top: 14px;
  padding: 10px 28px;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s;
}
.grammar-next-btn:hover {
  transform: scale(1.05);
}
.grammar-input-area {
  display: flex;
  gap: 10px;
  margin: 16px 0;
  align-items: center;
}
.grammar-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s;
}
.grammar-input:focus {
  border-color: var(--primary);
}
.grammar-check-btn {
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #27ae60, #219a52);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.grammar-check-btn:hover {
  transform: scale(1.05);
}
.grammar-rule {
  font-size: 0.85rem;
  color: #7c3aed;
  background: #f5f3ff;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.grammar-passive-answer, .grammar-your-answer {
  font-size: 1rem;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 6px 0;
}
.grammar-passive-answer {
  background: #d4edda;
  color: #155724;
}
.grammar-your-answer {
  background: #f8d7da;
  color: #721c24;
}
.grammar-complete {
  text-align: center;
  padding: 30px 20px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.grammar-complete h3 {
  font-size: 1.4rem;
  margin-bottom: 16px;
}
.grammar-final-score {
  font-size: 1.1rem;
  margin-bottom: 20px;
}
.grammar-final-score p {
  margin: 6px 0;
}
.grammar-action-btn {
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin: 6px;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}
.grammar-action-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(37,99,235,0.3);
}
.grammar-action-btn:active {
  transform: scale(0.95);
  transition-duration: 0.06s;
}
@media (max-width: 767px) {
  .grammar-exercise { padding: 16px; }
  .grammar-sentence { font-size: 1.1rem; }
  .grammar-option-btn { padding: 10px 18px; font-size: 0.95rem; min-width: 100px; }
  .grammar-input-area { flex-direction: column; }
  .grammar-input { width: 100%; }
  .grammar-active-sentence { font-size: 1rem; }
}

/* ===== Global Micro-Interactions ===== */

/* Bounce spring for all interactive buttons */
.grammar-option-btn,
.grammar-check-btn,
.grammar-next-btn,
.grammar-cat-btn,
.spelling-check-btn,
.spelling-mic-btn,
.ordering-card-btn,
.auth-btn,
.auth-submit {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.grammar-option-btn:hover,
.grammar-check-btn:hover,
.grammar-next-btn:hover,
.spelling-check-btn:hover,
.ordering-card-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.grammar-option-btn:active,
.grammar-check-btn:active,
.grammar-next-btn:active,
.spelling-check-btn:active,
.spelling-mic-btn:active,
.ordering-card-btn:active,
.auth-btn:active,
.auth-submit:active {
  transform: scale(0.94);
  transition-duration: 0.06s;
}

/* Card entrance animation for all card types */
.idiom-card,
.motiv-card,
.story-card,
.grammar-exercise,
.spelling-display > *,
.ordering-display > *,
.review-card {
  animation: cardSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Grammar category buttons spring hover */
.grammar-cat-btn:active {
  transform: scale(0.97);
  transition-duration: 0.06s;
}

/* Audio/speak buttons pulse on hover */
.card-actions button,
.story-audio-btn,
.listen-play-btn {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}

.card-actions button:hover,
.story-audio-btn:hover,
.listen-play-btn:hover {
  transform: scale(1.08);
}

.card-actions button:active,
.story-audio-btn:active,
.listen-play-btn:active {
  transform: scale(0.92);
  transition-duration: 0.06s;
}

/* Notes category cards */
.notes-cat-btn {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, border-color 0.15s ease;
}
.notes-cat-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.notes-cat-btn:active {
  transform: scale(0.97);
  transition-duration: 0.06s;
}

/* Video thumbnails */
.video-card {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.video-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.video-card:active {
  transform: scale(0.98);
  transition-duration: 0.06s;
}

/* Correct/wrong answer feedback animations */
@keyframes correctPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.grammar-option-btn.grammar-correct,
.mark-known.active,
.input-correct {
  animation: correctPop 0.35s ease;
}

.grammar-option-btn.grammar-wrong,
.mark-unknown.active,
.input-wrong {
  animation: wrongShake 0.4s ease;
}

/* Menu icon bounce on card hover */
.menu-card:hover .menu-icon {
  animation: iconBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iconBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* Smooth focus ring for inputs */
input:focus,
.spelling-input:focus,
.grammar-input:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Menú por niveles ===== */
.level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 900px) {
  .level-grid { grid-template-columns: repeat(3, 1fr); }
}
.level-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 14px 16px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--lv) 0%, #0d1333 120%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font-family: inherit;
}
.level-card:hover, .level-card:active { transform: scale(1.04); box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
.level-id {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.level-id.small {
  font-size: 1.8rem;
  background: var(--lv);
  color: #fff;
  border-radius: 12px;
  padding: 8px 12px;
}
.level-name { font-size: 1.05rem; font-weight: 700; }
.level-desc { font-size: 0.8rem; opacity: 0.9; text-align: center; min-height: 2.4em; }
.level-bar {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.25);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 4px;
}
.level-bar.big { height: 12px; background: #e2e8f0; margin: 12px 0 6px; }
.level-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #facc15);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.level-pct { font-size: 0.75rem; opacity: 0.9; }
.level-pct.dark { color: #334155; font-weight: 600; opacity: 1; }
.level-reco {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #facc15;
  color: #000;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
}
.level-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.level-action-btn {
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  margin-top: 10px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.level-action-btn.secondary { background: #fff; color: var(--primary); border: 2px solid var(--primary); }
.level-view-header {
  background: #fff;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  border-top: 6px solid var(--lv);
}
.level-view-title { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.level-view-title h2 { color: #000; font-size: 1.4rem; }
.level-view-title p { color: #334155; font-size: 0.9rem; }
.level-check { position: absolute; top: 8px; right: 10px; font-size: 1rem; }
.placement-card {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  text-align: center;
  color: #000;
}
.placement-card.result { border-top: 6px solid var(--lv); }
.placement-card.result .level-id { color: var(--lv); text-shadow: none; font-size: 4rem; margin: 8px 0; }
.placement-card h3 { font-size: 1.4rem; margin-bottom: 8px; }
.placement-card p { margin-bottom: 6px; color: #1e293b; }
.placement-count { font-weight: 700; color: #475569; }
.placement-q { font-size: 1.4rem; font-weight: 700; margin: 16px 0; }
.placement-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.placement-fb { margin-top: 14px; font-weight: 700; }
.placement-es { font-weight: 500; color: #000; margin-top: 6px; }

/* ===== Barra de herramientas ===== */
body { padding-bottom: 78px; }
.tools-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  justify-content: space-around;
  background: rgba(13, 19, 51, 0.96);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 14px rgba(0,0,0,0.25);
}
.tools-bar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 2px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tools-bar button span { font-size: 1.4rem; }
.tools-bar button:active { transform: scale(0.92); }

/* ===== Niveles: bloqueo, insignias y examen ===== */
.level-card { position: relative; }
.level-card.locked { filter: grayscale(0.85); opacity: 0.6; }
.level-lock { position: absolute; top: 10px; right: 12px; font-size: 1.4rem; }
.level-badge { position: absolute; top: 10px; left: 12px; background: rgba(255,255,255,0.92); color: #92400e; font-weight: 700; font-size: 0.8rem; padding: 3px 8px; border-radius: 999px; }
.level-lock-msg { max-width: 652px; margin: 16px auto 0; background: #fff7ed; border: 2px solid #fdba74; color: #7c2d12; border-radius: 14px; padding: 14px 16px; text-align: center; line-height: 1.5; }
.level-lock-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.level-lock-actions .level-action-btn { width: auto; padding: 10px 18px; margin: 0; }
.level-exam-card { max-width: 900px; margin: 20px auto 10px; background: #fff; border-left: 6px solid var(--lv, #2563eb); border-radius: 16px; padding: 16px 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.level-exam-card h3 { margin: 0 0 4px; color: #0f172a; }
.level-exam-card p { margin: 2px 0; color: #475569; }
.level-exam-card .level-action-btn { width: auto; padding: 12px 22px; margin: 0; }
.level-exam-passed { color: #b45309 !important; font-weight: 700; }
.level-badge-big { font-size: 3.5rem; margin: 6px 0; }
.exam-es { color: #64748b; font-weight: 400; font-size: 0.9em; }
.grammar-level-note { text-align: center; margin: 4px 0 14px; color: #334155; }
.grammar-level-all { border: 1px solid #2563eb; background: #fff; color: #2563eb; border-radius: 999px; padding: 4px 12px; font-weight: 600; cursor: pointer; }