/* ============================================
   ARTICULATION TRAINER - MAIN STYLES
   ============================================ */

/* ==================== CSS VARIABLES ==================== */
:root {
  /* Colors — modern indigo/violet primary, emerald secondary, rose accent */
  --primary-color: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #818cf8;
  --secondary-color: #10b981;
  --secondary-dark: #059669;
  --accent-color: #f43f5e;

  /* Text Colors */
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-light: #94a3b8;
  --text-white: #ffffff;

  /* Background Colors */
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-hover: #f1f5f9;
  --bg-dark: #0f172a;

  /* UI Elements */
  --border-color: #e2e8f0;
  --border-radius: 14px;
  --border-radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 32px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.06);

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;

  /* Typography */
  --font-family: 'Inter', 'Segoe UI', 'San Francisco', 'Helvetica Neue', Arial, sans-serif;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;
  --line-height: 1.6;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* ==================== RESET & BASE STYLES ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-primary);
  background-color: var(--bg-main);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

h1 {
  font-size: var(--font-size-xxl);
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-lg);
}

p {
  margin-bottom: var(--spacing-sm);
}

a {
  text-decoration: none;
  color: var(--primary-color);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-dark);
}

ul, ol {
  list-style-position: inside;
  margin-bottom: var(--spacing-sm);
}

/* ==================== NAVIGATION BAR ==================== */
.nav-bar {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  padding: var(--spacing-sm) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.brand-icon {
  font-size: 28px;
}

.nav-menu {
  display: flex;
  gap: var(--spacing-sm);
  list-style: none;
  margin: 0;
}

.nav-link {
  padding: 8px var(--spacing-md);
  border-radius: 999px;
  color: var(--text-secondary);
  font-weight: 500;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.nav-label {
  font-weight: 600;
  font-size: var(--font-size-base);
}

.nav-sub {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 2px;
}

.nav-link:hover {
  background-color: var(--bg-hover);
  color: var(--primary-color);
}

.nav-link.active {
  background-color: var(--primary-color);
  color: var(--text-white);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

/* ==================== MAIN CONTAINER ==================== */
#app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

/* ==================== VIEW MANAGEMENT ==================== */
.view {
  display: none;
  animation: fadeIn var(--transition-base);
}

.view.active {
  display: block;
}

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

/* ==================== VIEW HEADER ==================== */
.view-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.view-header h1 {
  margin-bottom: var(--spacing-sm);
}

.view-header p {
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
}

/* ==================== HOME/DASHBOARD STYLES ==================== */
.hero-section {
  padding: var(--spacing-lg) 0 var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.hero-section h1 {
  font-size: 36px;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 60%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Tier display — top-right of hero */
.tier-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: var(--shadow-sm);
  min-width: 130px;
}

.tier-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.tier-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  background: #64748b;
  transition: background var(--transition-base);
}

.tier-description {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
}

/* ==================== STAT TILES ==================== */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md) var(--spacing-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.stat-tile:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-tile-icon {
  color: var(--primary-color);
  display: flex;
  align-items: center;
}

.stat-tile-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.stat-tile-value {
  font-size: 12px;
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  .stat-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-section h1 {
    font-size: 26px;
  }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.dashboard-card {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: all var(--transition-base);
  text-align: center;
}

.dashboard-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.card-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-md);
}

.dashboard-card h2 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.dashboard-card p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.card-contents {
  list-style: none;
  margin: 0 0 var(--spacing-md) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-contents li {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding-left: 14px;
  position: relative;
}

.card-contents li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: 700;
}

.card-stats {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--primary-color);
  margin: var(--spacing-md) 0;
}

/* ==================== LEARNING PATH STEPPER (#1) ==================== */
.learning-path-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bg-card);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
}

.lp-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-md) var(--spacing-sm);
  gap: var(--spacing-xs);
  border-right: 1px solid var(--border-color);
  transition: background var(--transition-fast);
  position: relative;
}

.lp-step:last-child {
  border-right: none;
}

.lp-step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border-color);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.lp-step-label {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.lp-step-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
}

.lp-step-stat {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
}

.lp-step-btn {
  margin-top: 4px;
  font-size: 12px;
  padding: 4px 12px;
  text-decoration: none;
}

/* Current step — highlighted */
.lp-step-current {
  background: linear-gradient(135deg, #f0f0ff 0%, #e8e8ff 100%);
}

.lp-step-current .lp-step-number {
  background: var(--primary-color);
  color: #fff;
}

.lp-step-current .lp-step-stat {
  color: var(--primary-color);
}

/* Done step */
.lp-step-done .lp-step-number {
  background: var(--secondary-color);
  color: #fff;
}

.lp-step-done .lp-step-number::after {
  content: "✓";
}

.lp-step-done .lp-step-number {
  font-size: 0; /* hide number, show checkmark */
  font-size: var(--font-size-sm);
}

.lp-step-done .lp-step-stat {
  color: var(--secondary-color);
}

.lp-arrow {
  display: flex;
  align-items: center;
  color: var(--text-light);
  font-size: 1.25rem;
  padding: 0 2px;
  flex-shrink: 0;
  display: none; /* hidden — borders act as separators on desktop */
}

/* ==================== BEGINNER CHECKLIST (#4) ==================== */
.beginner-checklist-card {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
}

/* Toggle header row */
.bcl-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: var(--font-family);
  text-align: left;
  transition: background var(--transition-fast);
}

.bcl-toggle:hover {
  background: var(--bg-hover);
}

.bcl-toggle-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bcl-toggle-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.bcl-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.bcl-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

.bcl-progress-summary {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--primary-color);
}

.bcl-chevron {
  font-size: 20px;
  color: var(--text-light);
  line-height: 1;
  transition: transform var(--transition-fast);
}

.bcl-toggle--open .bcl-chevron {
  transform: rotate(90deg);
}

/* Body (hidden by default) */
.bcl-body {
  padding: 0 var(--spacing-lg) var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.bcl-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.bcl-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-fast);
}

.bcl-item:hover {
  background: var(--bg-hover);
}

.bcl-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.bcl-check-done {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
}

.bcl-check-done::after {
  content: "✓";
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.bcl-item-body {
  flex: 1;
  min-width: 0;
}

.bcl-text {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.bcl-item-done .bcl-text {
  text-decoration: line-through;
  color: var(--text-light);
}

.bcl-link {
  font-size: 12px;
  color: var(--primary-color);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
  margin-top: 2px;
  width: 120px;
  flex-shrink: 0;
  text-align: right;
}

.bcl-link:hover {
  text-decoration: underline;
}

.bcl-item-done .bcl-link {
  visibility: hidden;
}

.bcl-progress {
  margin-top: 6px;
}

.bcl-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.bcl-progress-label {
  font-size: 11px;
  color: var(--text-light);
  white-space: nowrap;
}

.bcl-progress-bar-track {
  width: 100%;
  height: 5px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

.bcl-progress-bar-fill {
  height: 100%;
  background: var(--primary-color);
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 2px;
}

.bcl-complete {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  color: var(--secondary-dark);
  font-weight: 500;
  text-align: center;
}

/* ==================== DAILY DRILL ==================== */
.daily-drill-section {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--primary-color);
}

.daily-drill-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.daily-drill-header h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.daily-drill-subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.drill-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.drill-step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-main);
  transition: opacity 0.2s, background 0.2s;
}

.drill-step-done {
  opacity: 0.55;
  background: #f0faf4;
}

.drill-check-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}

.drill-check-btn.checked {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
}

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

.drill-step-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1.2;
}

.drill-step-body {
  flex: 1;
}

.drill-step-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.drill-step-detail {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.drill-step-actions {
  margin-top: var(--spacing-sm);
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}

.drill-complete-banner {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  color: white;
  text-align: center;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  font-size: var(--font-size-lg);
}

/* ==================== DAILY SUGGESTIONS CARD (Option B) ==================== */
.suggestions-card {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.suggestions-title {
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-lg);
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-main);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

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

.suggestion-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.suggestion-text {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.4;
}

.suggestion-link {
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 12px;
  text-decoration: none;
  flex-shrink: 0;
}

/* ==================== TIPS SECTION (kept for fallback) ==================== */
.tips-section {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.tips-section h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.tips-list {
  list-style-type: none;
  padding-left: 0;
}

.tips-list li {
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  background: var(--bg-hover);
  border-radius: var(--border-radius-sm);
  padding-left: var(--spacing-lg);
  position: relative;
}

.tips-list li:before {
  content: "→";
  position: absolute;
  left: var(--spacing-sm);
  color: var(--primary-color);
  font-weight: bold;
}

/* ==================== VOCABULARY STYLES ==================== */
.difficulty-selector,
.theme-selector {
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.difficulty-selector label,
.theme-selector label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.word-container {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-lg);
  min-height: 300px;
}

.word-card {
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--border-radius);
  padding: var(--spacing-sm);
}

.word-card--still-learning {
  border-color: rgba(234, 179, 8, 0.45);
}

.word-card--learned {
  border-color: rgba(34, 197, 94, 0.4);
}

.word-main {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.tts-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 28px;
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  transition: transform 0.15s ease, background 0.15s ease;
  line-height: 1;
}

.tts-btn:hover {
  background: var(--bg-hover);
  transform: scale(1.15);
}

.word-pronunciation {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: var(--spacing-md);
}

.word-definition {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md);
  background: var(--bg-hover);
  border-radius: var(--border-radius-sm);
}

.word-example {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  font-style: italic;
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  border-left: 4px solid var(--primary-color);
  background: var(--bg-hover);
}

.word-synonyms {
  margin-top: var(--spacing-md);
}

.word-synonyms strong {
  color: var(--text-primary);
}

.synonyms-list {
  display: inline;
  color: var(--primary-color);
}

.empty-state {
  text-align: center;
  color: var(--text-light);
  padding: var(--spacing-xl);
  font-size: var(--font-size-lg);
}

/* ==================== LEARNED WORDS SECTION ==================== */
.learned-words-section {
  margin-top: var(--spacing-xl);
}

.words-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.word-chip {
  background: #eef2ff;
  color: var(--primary-dark);
  padding: 6px var(--spacing-md);
  border-radius: 999px;
  border: 1px solid #c7d2fe;
  text-align: center;
  font-weight: 500;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.word-chip:hover {
  background: var(--primary-color);
  color: var(--text-white);
  border-color: var(--primary-color);
  transform: scale(1.03);
}

.word-chip--learned {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.4);
  color: #166534;
}

.word-chip--learned:hover {
  background: rgba(34, 197, 94, 0.8);
  border-color: rgba(34, 197, 94, 0.8);
  color: var(--text-white);
}

.word-chip--still-learning {
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.45);
  color: #854d0e;
}

.word-chip--still-learning:hover {
  background: rgba(234, 179, 8, 0.75);
  border-color: rgba(234, 179, 8, 0.75);
  color: var(--text-white);
}

/* ==================== STORYTELLING STYLES ==================== */
.prompts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.prompt-card {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  cursor: pointer;
  border: 1px solid var(--border-color);
}

.prompt-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-md);
  transform: translateY(-2px);
}

.prompt-note-btn {
  margin-top: var(--spacing-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.5;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.prompt-note-btn:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.prompt-note-panel {
  display: none;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-left: 3px solid var(--primary-color);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
  white-space: pre-wrap;
}

.prompt-note-panel.visible {
  display: block;
}

.countdown-active {
  font-size: 3rem !important;
  font-weight: 700 !important;
  color: var(--primary-color) !important;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}

.prompt-theme {
  display: inline-block;
  padding: 3px 10px;
  background: #eef2ff;
  color: var(--primary-dark);
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.practice-interface {
  animation: fadeIn var(--transition-base);
}

.practice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.prompt-details {
  background: var(--bg-card);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.prompt-text {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  line-height: 1.8;
}

.guidance-section {
  background: var(--bg-hover);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.guidance-toggle {
  width: 100%;
  background: transparent;
  border: none;
  padding: var(--spacing-sm);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--primary-color);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
}

.guidance-toggle:hover {
  color: var(--primary-dark);
}

.guidance-content {
  padding-top: var(--spacing-md);
}

.guidance-item {
  margin-bottom: var(--spacing-md);
}

.guidance-item strong {
  color: var(--primary-color);
  display: block;
  margin-bottom: 4px;
}

.practice-area {
  margin-bottom: var(--spacing-lg);
}

.practice-area label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.practice-area textarea {
  width: 100%;
  padding: var(--spacing-md);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  resize: vertical;
  transition: border-color var(--transition-fast);
}

.practice-area textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* ==================== DAILY WORD STYLES ==================== */
.streak-banner {
  background: linear-gradient(135deg, var(--accent-color), #FF8E53);
  color: var(--text-white);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-md);
}

.streak-icon {
  font-size: 48px;
}

.streak-number {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.streak-subtitle {
  font-size: var(--font-size-base);
  opacity: 0.9;
}

.daily-word-card {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-lg);
}

.daily-word-card h2 {
  text-align: center;
  color: var(--primary-color);
  margin-bottom: var(--spacing-lg);
}

.exercise-section {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}

.reference-section {
  background: var(--bg-hover);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
}

.weak-words-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.weak-word-card {
  background: var(--bg-card);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
}

.weak {
  color: var(--accent-color);
  font-weight: 600;
  text-decoration: line-through;
  flex-shrink: 0;
}

.arrow {
  color: var(--text-light);
  flex-shrink: 0;
}

.strong {
  color: var(--secondary-color);
  font-weight: 500;
  font-size: var(--font-size-sm);
}

/* ==================== PROGRESS STYLES ==================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.stat-card {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: all var(--transition-base);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.stat-icon {
  font-size: 42px;
  margin-bottom: var(--spacing-sm);
}

.stat-number {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-xs);
}

.stat-label {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.progress-section {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}

.progress-section h2 {
  margin-bottom: var(--spacing-lg);
}

.activity-list {
  list-style: none;
}

.activity-item {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

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

.activity-icon {
  font-size: 24px;
}

.activity-text {
  flex: 1;
}

.activity-time {
  color: var(--text-light);
  font-size: var(--font-size-sm);
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-md);
}

.achievement-badge {
  background: var(--bg-hover);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  padding: var(--spacing-md);
  text-align: center;
  transition: all var(--transition-fast);
}

.achievement-badge.unlocked {
  background: linear-gradient(135deg, var(--secondary-color), #34d399);
  border-color: transparent;
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.achievement-badge:not(.unlocked) {
  opacity: 0.5;
}

.achievement-icon {
  font-size: 32px;
  margin-bottom: var(--spacing-xs);
}

.achievement-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* ==================== ACTION BUTTONS ==================== */
.action-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--spacing-lg);
}

/* ==================== SPACED REPETITION (SRS) ==================== */
.srs-review-section {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  border-left: 4px solid var(--secondary-color);
}

.srs-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  gap: var(--spacing-md);
}

.srs-header h2 {
  margin-bottom: var(--spacing-xs);
}

.srs-badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.srs-info-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.srs-info-icon {
  font-size: 1rem;
  color: var(--text-secondary);
  cursor: default;
  line-height: 1;
  user-select: none;
}

.srs-info-popover {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 100;
}

.srs-info-wrap:hover .srs-info-popover {
  display: block;
}

.srs-due-badge {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: white;
  padding: 4px 14px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}

.srs-progress-line {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.srs-card {
  background: var(--bg-main);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  text-align: center;
  margin-bottom: var(--spacing-md);
  transition: border-color 0.2s;
}

.srs-card:hover {
  border-color: var(--primary-color);
}

.srs-card-word {
  font-size: 42px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
}

.srs-card-hint {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  font-style: italic;
  margin-top: var(--spacing-sm);
}

.srs-card-definition,
.srs-card-example {
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  line-height: 1.6;
}

.srs-rating-btns {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
}

.srs-btn-hard {
  background: var(--accent-color);
  color: white;
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-weight: 600;
}
.srs-btn-ok {
  background: #f39c12;
  color: white;
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-weight: 600;
}
.srs-btn-good {
  background: var(--secondary-color);
  color: white;
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-weight: 600;
}
.srs-btn-easy {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-weight: 600;
}

.srs-done-msg {
  padding: var(--spacing-md) 0;
}

/* ==================== READ ALOUD ==================== */
.readaloud-script-box {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-lg);
  font-size: var(--font-size-lg);
  line-height: 2;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: var(--spacing-lg);
}

.script-word {
  display: inline;
  border-radius: 3px;
  padding: 1px 2px;
  transition: background 0.2s;
}

.script-word.spoken {
  background: #d4edda;
  color: #155724;
}

.readaloud-live-stats {
  display: flex;
  gap: var(--spacing-lg);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.readaloud-stat {
  text-align: center;
  min-width: 80px;
}

.readaloud-stat-num {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  color: var(--primary-color);
}

.readaloud-stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ==================== ONBOARDING ==================== */
#onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: onboarding-fade-in 0.3s ease;
}

#onboarding-overlay.onboarding-fade-out {
  animation: onboarding-fade-out 0.3s ease forwards;
}

@keyframes onboarding-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes onboarding-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.onboarding-modal {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  max-width: 540px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: onboarding-slide-up 0.35s ease;
}

@keyframes onboarding-slide-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.onboarding-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.onboarding-logo {
  font-size: 48px;
  margin-bottom: var(--spacing-sm);
}

.onboarding-header h2 {
  font-size: var(--font-size-xxl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.onboarding-header p {
  color: var(--text-secondary);
}

.onboarding-progress-bar {
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.onboarding-progress-fill {
  height: 100%;
  background: var(--primary-color);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.onboarding-step {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.onboarding-question {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

.onboarding-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.onboarding-option {
  text-align: left;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-card);
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
}

.onboarding-option:hover {
  border-color: var(--primary-color);
  background: var(--bg-hover);
  transform: translateX(4px);
}

.onboarding-result {
  text-align: center;
  padding: var(--spacing-md) 0;
}

.onboarding-level-badge {
  display: inline-block;
  color: white;
  font-size: var(--font-size-xl);
  font-weight: 700;
  padding: var(--spacing-sm) var(--spacing-xl);
  border-radius: 999px;
  margin-bottom: var(--spacing-lg);
}

.onboarding-result h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

.onboarding-rec {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--spacing-xl);
}

.onboarding-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* ==================== RECORDINGS ==================== */
.rec-status {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.rec-timer {
  font-size: 42px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
}

.rec-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-main);
  margin-bottom: var(--spacing-sm);
}

.rec-item-info {
  flex: 1;
  min-width: 0;
}

.rec-item-prompt {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rec-item-meta {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.rec-item-controls {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.rec-player-wrap {
  width: 100%;
}

.rec-custom-player {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
}

.rec-time-current,
.rec-time-total {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  min-width: 2.8rem;
  font-variant-numeric: tabular-nums;
}

.rec-time-current {
  text-align: right;
}

.rec-progress-track {
  flex: 1;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.rec-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--primary-color);
  border-radius: 3px;
  transition: width 0.1s linear;
}

/* ==================== SHADOWING ==================== */
.shadowing-passage-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-md);
}

.shadowing-passage-card {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.1s;
}

.shadowing-passage-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.shadowing-passage-card-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.shadowing-passage-card-meta {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shadowing-difficulty-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.difficulty-beginner { background: #d4edda; color: #155724; }
.difficulty-intermediate { background: #cce5ff; color: #004085; }
.difficulty-advanced { background: #f8d7da; color: #721c24; }

.shadowing-controls-top {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.shadowing-passage-title {
  font-weight: 600;
  color: var(--text-primary);
}

.shadowing-legend {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.shadow-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 12px;
}

.shadowing-text {
  font-size: var(--font-size-xl);
  line-height: 2.2;
  color: var(--text-primary);
}

.shadow-stress {
  color: var(--primary-color);
  font-weight: 800;
}

.shadow-pause {
  color: var(--text-light);
  font-size: 0.9em;
}

.shadow-slow {
  color: var(--accent-color);
  font-size: 0.8em;
  vertical-align: super;
}

.shadowing-notes {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-hover);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.shadowing-script {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

/* ==================== PROGRESS CHARTS ==================== */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-lg);
}

.chart-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-base);
}

.chart-empty {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align: center;
  padding: var(--spacing-lg) 0;
  font-style: italic;
}

canvas {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* ==================== REVIEW DASHBOARD ==================== */

/* Hero Banner */
.review-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%);
  border-radius: 18px;
  padding: var(--spacing-xl) var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  position: relative;
  overflow: hidden;
  gap: var(--spacing-lg);
}

.review-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: 200px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(99,102,241,0.25) 0%, transparent 70%);
  pointer-events: none;
}

.review-hero-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
  margin-bottom: 6px;
}

.review-hero-title {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.2;
}

.review-hero-sub {
  color: #94a3b8;
  font-size: var(--font-size-sm);
  margin: 0;
}

.review-hero-days-active {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.review-hero-days-number {
  font-size: 42px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -1px;
}

.review-hero-days-label {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
}

.review-hero-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.review-hero-goal {
  text-align: center;
  position: relative;
}

.review-goal-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #818cf8;
  margin-bottom: 6px;
}

.review-goal-pct {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-top: -8px;
}

.review-goal-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* KPI Cards */
.review-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.review-kpi-card {
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.review-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.review-kpi-primary { background: linear-gradient(135deg, #f43f5e, #e11d48); color: #fff; }
.review-kpi-green   { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.review-kpi-indigo  { background: linear-gradient(135deg, #6366f1, #4338ca); color: #fff; }
.review-kpi-purple  { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; }
.review-kpi-orange  { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; }
.review-kpi-teal    { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; }

.review-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.review-kpi-icon {
  font-size: 22px;
}

.review-kpi-trend {
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 999px;
  position: relative;
  cursor: default;
}

#kpi-tooltip {
  position: fixed;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  z-index: 9999;
  pointer-events: none;
  display: none;
}

.review-kpi-number {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.review-kpi-label {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.95;
}

.review-kpi-current {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
  margin-top: 1px;
}

.review-kpi-sub {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}

.review-kpi-card[role="button"] {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.review-kpi-card[role="button"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.review-kpi-goto {
  margin-top: auto;
  padding-top: 10px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
  letter-spacing: 0.03em;
  display: block;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Chart panels */
.review-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.review-charts-row.three-col {
  grid-template-columns: repeat(3, 1fr);
}

.review-chart-panel {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 16px 12px 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.review-chart-panel canvas {
  display: block;
  width: 100%;
  height: 280px;
}

.review-charts-row.three-col .review-chart-panel canvas {
  height: 240px;
}

.review-chart-wide {
  grid-column: span 1;
}

.review-chart-narrow {
  grid-column: span 1;
}

.review-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: var(--spacing-sm);
}

.review-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.review-panel-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.review-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.review-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Speech quality bars */
.review-quality-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review-quality-empty {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
  padding: var(--spacing-md) 0;
}

.review-quality-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-quality-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-quality-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.review-quality-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-color);
}

.review-quality-bar-bg {
  height: 7px;
  background: var(--bg-hover);
  border-radius: 999px;
  overflow: hidden;
}

.review-quality-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}

/* Bottom row */
.review-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.review-panel {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.review-panel-full {
  width: 100%;
  margin-bottom: var(--spacing-lg);
}

/* Vocab progress bars in new style */
.review-vocab-bars {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.review-vocab-bar-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-vocab-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-vocab-bar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
}

.review-vocab-bar-count {
  font-size: 13px;
  font-weight: 700;
}

.review-vocab-bar-bg {
  height: 10px;
  background: var(--bg-hover);
  border-radius: 999px;
  overflow: hidden;
}

.review-vocab-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.7s ease;
}

/* New Achievements Grid */
.review-achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--spacing-md);
}

.review-achievement-card {
  background: var(--bg-hover);
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  padding: var(--spacing-md);
  text-align: center;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.review-achievement-card.unlocked {
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  border-color: #6366f1;
  color: #fff;
  box-shadow: 0 4px 16px rgba(99,102,241,0.25);
}

.review-achievement-card.unlocked .review-achievement-name {
  color: #e0e7ff;
}

.review-achievement-card.unlocked .review-achievement-desc {
  color: #a5b4fc;
}

.review-achievement-card:not(.unlocked) {
  opacity: 0.45;
}

.review-achievement-icon {
  font-size: 30px;
  margin-bottom: 8px;
}

.review-achievement-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.review-achievement-desc {
  font-size: 11px;
  color: var(--text-secondary);
}

.review-achievement-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #6366f1;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==================== TOAST NOTIFICATIONS ==================== */
.toast-container {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.toast {
  background: var(--bg-dark);
  color: var(--text-white);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg);
  animation: slideIn var(--transition-base);
  min-width: 300px;
}

.toast.success {
  background: var(--secondary-color);
}

.toast.error {
  background: var(--accent-color);
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ==================== NUDGE BANNERS ==================== */
.nudge-slot {
  margin-top: var(--spacing-md);
}

.nudge-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background: linear-gradient(135deg, #e8f4fd 0%, #d6eaf8 100%);
  border: 1px solid #a9cce3;
  border-left: 4px solid var(--primary-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  animation: nudgeSlideDown 0.3s ease;
}

.nudge-message {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.nudge-link {
  white-space: nowrap;
  font-size: var(--font-size-sm);
  padding: 4px 12px;
  text-decoration: none;
}

.nudge-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}

.nudge-close:hover {
  color: var(--text-primary);
}

.nudge-exit {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

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

/* ==================== MERRIAM-WEBSTER WORD OF THE DAY ==================== */
.mw-word-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-md);
}

.mw-word-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.mw-word-header h2 {
  color: var(--text-white);
  margin: 0;
  font-size: var(--font-size-xl);
}

.mw-logo {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-white);
  padding: 6px 12px;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.mw-word-content {
  background: var(--bg-card);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-lg);
  min-height: 150px;
}

.mw-word-main {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--border-color);
}

.mw-word-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-xs);
}

.mw-word-pronunciation {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: var(--spacing-xs);
}

.mw-word-pos {
  display: inline-block;
  background: var(--bg-hover);
  color: var(--text-secondary);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.mw-word-definition {
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
  line-height: 1.7;
}

.mw-word-definition strong {
  color: var(--primary-color);
}

.mw-word-example {
  background: var(--bg-hover);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-md);
  border-left: 4px solid var(--primary-color);
}

.mw-word-example strong {
  color: var(--primary-color);
  display: block;
  margin-bottom: var(--spacing-xs);
}

.mw-word-synonyms {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-hover);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
}

.mw-word-synonyms strong {
  color: var(--primary-color);
  margin-right: var(--spacing-xs);
}

.mw-word-footer {
  text-align: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.mw-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.mw-link:hover {
  color: var(--primary-dark);
}

.mw-word-error {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--text-secondary);
}

.mw-word-error p {
  margin-bottom: var(--spacing-md);
}

.loading-spinner {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--text-secondary);
  font-style: italic;
}

/* ==================== WORD BANK ==================== */
.word-bank-add-section {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.word-bank-add-section h2 {
  margin-bottom: var(--spacing-xs);
}

.word-bank-add-section .subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.custom-word-form {
  margin-top: var(--spacing-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-md);
}

.form-group label {
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: var(--spacing-sm);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.form-group textarea {
  resize: vertical;
}

.word-bank-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1.5px solid var(--primary-light);
  border-left: 4px solid var(--primary-color);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.word-bank-search-bar:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), var(--shadow-md);
}

.word-bank-search-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.word-bank-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  outline: none;
}

.word-bank-search-input::placeholder {
  color: var(--text-light);
}

.word-bank-search-clear {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 2px;
  line-height: 1;
}

.word-bank-search-clear:hover {
  color: var(--accent-color);
}

.word-bank-section {
  margin-bottom: var(--spacing-xl);
}

.word-bank-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.word-bank-section-header h2 {
  margin-bottom: 0;
  color: var(--text-primary);
}

.word-bank-section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.word-bank-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  position: relative;
  top: -3px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.word-bank-toggle-btn:hover {
  color: var(--text-primary);
}

.word-bank-toggle-btn.collapsed {
  transform: rotate(180deg);
}

.word-bank-grid.collapsed {
  display: none;
}

.word-bank-sort {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.sort-dropdown {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.sort-dropdown:focus {
  outline: none;
  border-color: var(--primary-color);
}

.word-bank-section h2 {
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

.word-bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

.word-bank-card {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 2px solid transparent;
}

.word-bank-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.word-bank-card--still-learning {
  border-color: rgba(234, 179, 8, 0.45);
}

.word-bank-card--learned {
  border-color: rgba(34, 197, 94, 0.4);
}

.word-bank-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-xs);
  gap: var(--spacing-sm);
}

.word-bank-word {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  cursor: pointer;
  flex: 1;
}

.word-bank-pronunciation {
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.word-bank-definition {
  color: var(--text-primary);
  line-height: 1.5;
  margin-top: var(--spacing-sm);
}

.custom-word-card {
  border-left: 4px solid var(--secondary-color);
}

.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
}

.btn-icon:hover {
  background: var(--accent-color);
  color: var(--text-white);
}

.lookup-status {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
}

/* ==================== DEFINITION PICKER ==================== */
.def-picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.def-picker-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-size: var(--font-size-sm);
  background: var(--bg-card);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.def-picker-item:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
}

.def-picker-item--selected {
  background: rgba(99, 102, 241, 0.08);
  border-color: var(--primary-color);
}

.def-picker-pos {
  font-style: italic;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 60px;
}

.def-picker-text {
  color: var(--text-primary);
  line-height: 1.4;
}

/* ==================== QUIZ YOURSELF ==================== */
.word-bank-quiz-section {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

.word-bank-quiz-section h2 {
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.word-bank-quiz-section .subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

.quiz-section {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

.quiz-section h2 {
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

/* Quiz Start Screen */
#quiz-start-screen {
  text-align: center;
}

.quiz-stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.quiz-stat {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--bg-hover);
  border-radius: var(--border-radius);
  min-width: 150px;
}

.quiz-stat-number {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
}

.quiz-stat-label {
  display: block;
  margin-top: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quiz-selectors {
  display: flex;
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  flex-wrap: wrap;
  justify-content: center;
}

.quiz-selector {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 200px;
}

.quiz-selector-label {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 600;
}

.quiz-selector-dropdown {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quiz-selector-dropdown:hover {
  border-color: var(--primary-color);
}

.quiz-selector-dropdown:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.btn-large {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
  min-width: 200px;
}

/* Quiz Active Screen */
.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--border-color);
}

.quiz-progress-container {
  flex: 1;
  margin-right: var(--spacing-lg);
}

.quiz-progress-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.quiz-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-hover);
  border-radius: 10px;
  overflow: hidden;
}

.quiz-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transition: width 0.3s ease;
}

.quiz-score-display {
  text-align: right;
}

.quiz-score-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  display: block;
}

.quiz-score {
  font-size: 2rem;
  font-weight: 700;
  color: var(--secondary-color);
}

/* Quiz Question Card */
.quiz-question-card {
  background: var(--bg-hover);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.quiz-question-card h3 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  line-height: 1.4;
}

/* Quiz Options */
.quiz-options {
  display: grid;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.quiz-option {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  text-align: left;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-primary);
  font-weight: 500;
}

.quiz-option:hover:not(:disabled) {
  border-color: var(--primary-color);
  background: var(--primary-light);
  color: var(--text-white);
  transform: translateX(4px);
}

.quiz-option.selected {
  border-width: 3px;
}

.quiz-option.correct {
  border-color: var(--secondary-color);
  background: var(--secondary-color);
  color: var(--text-white);
}

.quiz-option.incorrect {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: var(--text-white);
}

.quiz-option:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Quiz Actions */
.quiz-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.quiz-actions .btn {
  flex: 1;
}

/* Quiz Results Screen */
.quiz-results {
  text-align: center;
  padding: var(--spacing-xl);
}

.quiz-results h3 {
  font-size: var(--font-size-xxl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

.quiz-final-score {
  font-size: 4rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: var(--spacing-lg) 0;
  line-height: 1;
}

.quiz-percentage {
  font-size: 2rem;
  color: var(--secondary-color);
  font-weight: 600;
  margin-bottom: var(--spacing-xl);
}

.quiz-message {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.quiz-results .quiz-actions {
  max-width: 400px;
  margin: 0 auto;
  justify-content: center;
}

/* Quiz Review */
.quiz-review-title {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: var(--spacing-xl) 0 var(--spacing-md);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}

.quiz-review-item {
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-sm);
  border-left: 4px solid transparent;
}

.quiz-review-item.review-correct {
  background-color: rgba(80, 200, 120, 0.1);
  border-left-color: #50C878;
}

.quiz-review-item.review-incorrect {
  background-color: rgba(255, 107, 107, 0.1);
  border-left-color: #FF6B6B;
}

.quiz-review-item-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.quiz-review-icon {
  font-weight: bold;
  font-size: var(--font-size-lg);
}

.review-correct .quiz-review-icon {
  color: #50C878;
}

.review-incorrect .quiz-review-icon {
  color: #FF6B6B;
}

.quiz-review-word {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

.quiz-review-definition {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
}

.quiz-review-example {
  color: var(--text-tertiary, var(--text-secondary));
  font-size: var(--font-size-sm);
  font-style: italic;
  margin-top: var(--spacing-xs);
}

/* ==================== VOCABULARY SECTION ==================== */

/* Vocabulary Category Navigation */
.vocab-categories {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
  justify-content: center;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: var(--spacing-xs);
  position: sticky;
  top: 70px;
  background-color: var(--bg-main);
  z-index: 900;
  padding-top: var(--spacing-md);
  margin-top: calc(-1 * var(--spacing-md));
}

.vocab-category-tab {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  border-bottom: 3px solid transparent;
  position: relative;
  bottom: -2px;
}

.vocab-category-tab:hover {
  color: var(--primary-color);
}

.vocab-category-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* Vocabulary Category Content */
.vocab-category {
  display: none;
}

.vocab-category.active {
  display: block;
}

/* ==================== STORYTELLING SECTION ==================== */

/* Storytelling Category Navigation */
.storytelling-categories {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xl);
  flex-wrap: nowrap;
  justify-content: center;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: var(--spacing-xs);
  position: sticky;
  top: 70px;
  background-color: var(--bg-main);
  z-index: 900;
  padding-top: var(--spacing-md);
}

.storytelling-category-tab {
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  border-bottom: 3px solid transparent;
  position: relative;
  bottom: -2px;
}

.storytelling-category-tab:hover {
  color: var(--primary-color);
}

.storytelling-category-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* Storytelling Category Content */
.storytelling-category {
  display: none;
}

.storytelling-category.active {
  display: block;
}

/* Timer Display */
.timer-display {
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--bg-hover);
  border-radius: var(--border-radius);
  margin-top: var(--spacing-lg);
}

.timer-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-xs);
}

.timer-label {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

/* Button Groups for Challenges */
.time-selector,
.framework-selector,
.situation-selector,
.duration-selector {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  justify-content: center;
}

.time-btn,
.ws-inst-time-btn,
.framework-btn,
.situation-btn,
.duration-btn,
.association-time-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 2px solid var(--border-color);
  background: var(--bg-hover);
  color: var(--text-primary);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-family);
}

.time-btn:hover,
.ws-inst-time-btn:hover,
.framework-btn:hover,
.situation-btn:hover,
.duration-btn:hover,
.association-time-btn:hover {
  background-color: var(--border-color);
}

.time-btn.active,
.ws-inst-time-btn.active,
.framework-btn.active,
.situation-btn.active,
.duration-btn.active,
.association-time-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-white);
}

/* ==================== FLUENCY & ARTICULATION SECTION ==================== */

/* Category Navigation */
.fluency-categories {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
  justify-content: center;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: var(--spacing-xs);
  position: sticky;
  top: 70px;
  background-color: var(--bg-main);
  z-index: 900;
  padding-top: var(--spacing-md);
  margin-top: calc(-1 * var(--spacing-md));
}

.category-tab {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  border-bottom: 3px solid transparent;
  position: relative;
  bottom: -2px;
}

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

.category-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* Category Content */
.fluency-category {
  display: none;
}

.fluency-category.active {
  display: block;
}

/* Fluency Cards */
.fluency-card {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.fluency-card:hover {
  box-shadow: var(--shadow-md);
}

.fluency-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.fluency-card-icon {
  flex-shrink: 0;
  color: var(--primary-color);
  opacity: 0.85;
}

.fluency-card-header h3 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
}

.fluency-card-description {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Shared exercise group label — Grammar, Polish, Practice */
.exercise-group {
  margin-bottom: var(--spacing-xl);
}

.exercise-group-label {
  display: inline-block;
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid var(--primary-color);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  padding: 8px var(--spacing-md) 8px var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.exercise-group-subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-md);
  padding-left: calc(var(--spacing-sm) + 3px);
}

.fluency-card-content {
  padding: var(--spacing-lg);
}

/* Exercise Display Areas */
.exercise-display {
  background: var(--bg-hover);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-lg);
  margin: var(--spacing-md) 0;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.exercise-text {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  text-align: center;
  line-height: 1.8;
  margin: 0;
  font-weight: 500;
}

.exercise-prompt {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.exercise-controls {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin-top: var(--spacing-md);
}

/* Difficulty Selector */
.difficulty-selector {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  justify-content: center;
  flex-wrap: wrap;
}

.difficulty-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 2px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

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

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

/* Minimal Pairs */
.minimal-pair-instruction {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.minimal-pair-container {
  display: flex;
  gap: var(--spacing-xl);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.minimal-pair-word {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  color: var(--primary-color);
  padding: var(--spacing-lg);
  background: var(--bg-card);
  border-radius: var(--border-radius);
  min-width: 150px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.vs-divider {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  font-weight: 600;
}

/* Info Boxes */
.info-box {
  background: var(--bg-hover);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.info-box h4 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.filler-words-list {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.filler-tag {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--accent-color);
  color: var(--text-white);
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.tip-text {
  color: var(--text-secondary);
  font-style: italic;
  margin: var(--spacing-md) 0 0 0;
}

/* Pacing Info */
.pacing-info {
  background: var(--bg-hover);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.pacing-info p {
  margin: var(--spacing-xs) 0;
  color: var(--text-primary);
}

/* Transition Words */
.transition-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.transition-group h4 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: var(--spacing-xs);
}

.transition-words {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.transition-word {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.transition-word:hover {
  border-color: var(--primary-color);
  background: var(--primary-light);
  color: var(--text-white);
}

/* Rhetorical Types */
.rhetorical-types {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  justify-content: center;
}

.rhetorical-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 2px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.rhetorical-btn:hover {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.rhetorical-btn.active {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white);
}

/* Power Words */
.power-words-categories {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  justify-content: center;
}

.power-category-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 2px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.power-category-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.power-category-btn.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--text-white);
}

.power-words-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

.power-word-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  text-align: center;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.power-word-card:hover {
  border-color: var(--accent-color);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.power-word-card .word {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-xs);
}

.power-word-card .definition {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Stress Pattern Display */
#stress-word-display {
  text-align: center;
}

.stress-word {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.stress-syllable {
  display: inline-block;
  margin: 0 4px;
}

.stress-syllable.stressed {
  color: var(--accent-color);
  text-transform: uppercase;
  font-size: 1.2em;
}

.stress-explanation {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-top: var(--spacing-md);
}

/* Hint Text */
.hint-text {
  background: var(--primary-light);
  color: var(--text-white);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  margin-top: var(--spacing-md);
  font-size: var(--font-size-base);
}

.hint-text.hidden {
  display: none !important;
}

/* ==================== GRAMMAR MODULE STYLES ==================== */

/* Grammar Exercise Section */
.grammar-exercise-section {
  margin-bottom: var(--spacing-xxl);
}

.grammar-exercise-section h2 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.grammar-exercise-section .subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

/* Grammar Exercise Card */
.grammar-exercise-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.grammar-exercise-card h3 {
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
}

.grammar-exercise-card .instruction {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  font-style: italic;
}

/* Correction Display */
.correction-display {
  margin-top: var(--spacing-md);
}

/* Agreement Options */
.agreement-options {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
}

.agreement-option-btn {
  min-width: 100px;
  transition: all 0.3s ease;
}

.agreement-option-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.agreement-option-btn:disabled {
  cursor: not-allowed;
}

/* Voice Type Label */
.voice-type-label {
  display: inline-block;
  background: var(--primary-light);
  color: var(--text-white);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
}

/* Punctuation Rules */
.punctuation-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.punctuation-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  text-align: center;
  transition: all 0.3s ease;
}

.punctuation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.punctuation-mark {
  font-size: 48px;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
  font-weight: bold;
}

.punctuation-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.punctuation-use {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.punctuation-example {
  color: var(--text-primary);
  font-style: italic;
  padding: var(--spacing-sm);
  background: var(--bg-hover);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
}

/* ==================== WORD BANK FLOATING ACTION BUTTON ==================== */
.word-bank-fab {
  position: fixed;
  right: 24px;
  bottom: 32px;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-base);
}

.word-bank-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 28px rgba(99, 102, 241, 0.55);
}

.word-bank-fab:active {
  transform: translateY(0) scale(0.98);
}

.word-bank-fab-icon {
  font-size: 18px;
  line-height: 1;
}

.word-bank-fab--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

/* ============================================
   KNOWLEDGE CHECK — SUB-TABS
   ============================================ */

.kc-subtabs {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0;
}

.kc-subtab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
  border-radius: 0;
}

.kc-subtab:hover {
  color: var(--primary-color);
}

.kc-subtab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.kc-panel {
  display: none;
}

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

/* ============================================
   KNOWLEDGE CHECK — SHARED GAME STYLES
   ============================================ */

.kc-game-section {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.kc-game-header h2 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-xl);
  color: var(--text-primary);
}

.kc-game-header .subtitle {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-secondary);
}

.kc-score-strip {
  display: flex;
  gap: var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-main);
  border-radius: var(--border-radius-sm);
}

.kc-score-strip strong {
  color: var(--primary-color);
}

.kc-exercise-card {
  background: var(--bg-main);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  min-height: 80px;
}

.kc-controls {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.kc-feedback {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.kc-feedback-correct {
  background: #d1fae5;
  color: #065f46;
  border-left: 4px solid var(--secondary-color);
}

.kc-feedback-wrong {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid var(--accent-color);
}

.kc-empty-state {
  color: var(--text-secondary);
  text-align: center;
  padding: var(--spacing-lg);
}

.kc-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto var(--spacing-sm);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   2 WORDS AND A LIE
   ============================================ */

.twal-loading-wrap {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--text-secondary);
}

.twal-intro {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.twal-word-display {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.twal-word-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.twal-word {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--primary-color);
}

.twal-pos {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 2px 10px;
}

.twal-prompt {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.twal-sentences {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.twal-sentence-btn {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  text-align: left;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text-primary);
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}

.twal-sentence-btn:hover:not(:disabled) {
  border-color: var(--primary-color);
  background: #eef2ff;
}

.twal-label {
  font-weight: 700;
  color: var(--primary-color);
  flex-shrink: 0;
  min-width: 20px;
}

.twal-sentence-btn.twal-correct-sentence {
  border-color: var(--secondary-color);
  background: #d1fae5;
}

.twal-sentence-btn.twal-incorrect-sentence {
  border-color: var(--accent-color);
  background: #fee2e2;
}

.twal-sentence-btn.twal-chosen-right {
  border-width: 3px;
  border-color: var(--secondary-color);
}

.twal-sentence-btn.twal-chosen-wrong {
  border-width: 3px;
  border-color: var(--accent-color);
}

.twal-feedback {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.twal-feedback-correct {
  background: #d1fae5;
  color: #065f46;
  border-left: 4px solid var(--secondary-color);
}

.twal-feedback-wrong {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid var(--accent-color);
}

.twal-score-bar {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-main);
  border-radius: var(--border-radius-sm);
}

.twal-score-bar strong {
  color: var(--primary-color);
}

.twal-actions {
  margin-top: var(--spacing-sm);
}

/* ============================================
   USE IT IN A SENTENCE
   ============================================ */

.uis-picker {
  margin-top: var(--spacing-sm);
}

.uis-word-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.uis-word-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.uis-word-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.uis-word {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

.uis-pos {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
}

.uis-definition {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.5;
}

.uis-textarea {
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--surface-color);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.uis-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.uis-actions {
  margin-top: var(--spacing-sm);
}

.uis-submitted-sentence {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  font-style: italic;
}

.uis-result-card {
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-md);
  border: 1.5px solid transparent;
}

.uis-result-correct {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

.uis-result-incorrect {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}

.uis-result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.uis-result-icon {
  font-size: 1.2rem;
  font-weight: 700;
}

.uis-result-correct .uis-result-icon { color: #10b981; }
.uis-result-incorrect .uis-result-icon { color: #ef4444; }

.uis-result-label {
  font-weight: 600;
  font-size: 0.95rem;
}

.uis-result-correct .uis-result-label { color: #10b981; }
.uis-result-incorrect .uis-result-label { color: #ef4444; }

.uis-result-feedback {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.5;
}

.uis-suggestion {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============================================
   DAILY SPEAKING PROMPT
   ============================================ */

.daily-speaking-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg, 12px);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.daily-speaking-header h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.daily-speaking-header .subtitle {
  margin: 0 0 var(--spacing-md);
}

.dsp-prompt {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
  padding: 12px 14px;
  background: var(--background-color);
  border-radius: var(--border-radius);
  border-left: 3px solid var(--primary-color);
}

.dsp-mic-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: var(--spacing-md) 0;
}

.dsp-mic-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: var(--primary-color);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.2s;
}

.dsp-mic-btn:hover {
  transform: scale(1.07);
}

.dsp-mic-btn.dsp-mic-active {
  background: #ef4444;
  animation: dsp-pulse 1.2s ease-in-out infinite;
}

@keyframes dsp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

.dsp-mic-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.dsp-recording-label {
  color: #ef4444;
  font-weight: 600;
}

.dsp-transcript-live {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
  min-height: 40px;
  line-height: 1.5;
  text-align: center;
}

.dsp-transcript-display {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  padding: 10px 12px;
  background: var(--background-color);
  border-radius: var(--border-radius);
  line-height: 1.5;
}

.dsp-feedback-grid {
  display: grid;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.dsp-feedback-item {
  padding: 10px 14px;
  background: var(--background-color);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.dsp-feedback-tip {
  border-color: var(--primary-color);
  background: rgba(99, 102, 241, 0.06);
}

.dsp-feedback-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.dsp-feedback-tip .dsp-feedback-label {
  color: var(--primary-color);
}

.dsp-feedback-text {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.5;
}

.dsp-actions {
  margin-top: var(--spacing-sm);
}

/* ============================================
   SECTION NEXT BUTTON
   ============================================ */

.section-next-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 10px 0;
  margin: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  opacity: 0.55;
  transition: opacity 0.2s, color 0.2s, transform 0.2s;
}

.section-next-btn:hover {
  opacity: 1;
  color: var(--primary-color);
  transform: translateY(2px);
}

.section-next-label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* Page-level next button — navigates to the next page/tab */
.page-next-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: var(--spacing-lg) 0 var(--spacing-md);
  margin-top: var(--spacing-xl);
  background: none;
  border: none;
  border-top: 1px solid var(--border-color);
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s, transform 0.2s;
}

.page-next-btn:hover {
  color: var(--primary-color);
  transform: translateY(2px);
}

.page-next-label {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* ============================================
   SPOT THE ERROR
   ============================================ */

.ste-sentence {
  font-size: var(--font-size-lg);
  line-height: 1.8;
  color: var(--text-primary);
}

.ste-word {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 3px;
  transition: background 0.15s, color 0.15s;
  display: inline;
}

.ste-word:hover {
  background: #eef2ff;
  color: var(--primary-color);
}

.ste-word-correct {
  background: #d1fae5 !important;
  color: #065f46 !important;
  font-weight: 700;
  cursor: default;
}

.ste-word-wrong {
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-weight: 700;
  cursor: default;
}

/* ============================================
   FILL IN THE BLANK
   ============================================ */

.fib-sentence {
  font-size: var(--font-size-lg);
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.fib-blank {
  display: inline-block;
  border-bottom: 2px solid var(--primary-color);
  min-width: 60px;
  text-align: center;
  color: var(--primary-color);
  font-weight: 700;
}

.fib-filled {
  font-weight: 700;
  padding: 0 4px;
  border-radius: 4px;
}

.fib-filled-correct {
  background: #d1fae5;
  color: #065f46;
}

.fib-filled-wrong {
  background: #fee2e2;
  color: #991b1b;
}

.fib-options {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.fib-option-btn {
  min-width: 80px;
  font-size: var(--font-size-base);
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}

.fib-correct {
  background: var(--secondary-color) !important;
  color: white !important;
  border-color: var(--secondary-color) !important;
}

.fib-wrong {
  background: var(--accent-color) !important;
  color: white !important;
  border-color: var(--accent-color) !important;
}

/* ==================== SITE FOOTER ==================== */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
  padding: var(--spacing-lg) var(--spacing-md);
}

.footer-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.footer-brand-icon {
  color: var(--primary-color);
  display: flex;
  align-items: center;
}

.footer-brand-name {
  font-weight: 600;
  color: var(--text-primary);
}

.footer-tagline {
  color: var(--text-light);
}

.footer-tagline::before {
  content: '—';
  margin-right: 6px;
}

/* Quick stats */
.footer-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 4px 14px;
}

.footer-stats span[id] {
  font-weight: 600;
  color: var(--primary-color);
}

.footer-stat-divider {
  color: var(--text-light);
}

/* Links row */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px var(--spacing-md);
}

.footer-link {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-family);
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--primary-color);
}

.footer-link--feedback {
  color: var(--primary-color);
  font-weight: 500;
}

.footer-link--feedback:hover {
  color: var(--primary-dark);
}

/* Tip + copyright */
.footer-tip {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
}

.footer-copy {
  font-size: 12px;
  color: var(--text-light);
}

/* Footer modal */
.footer-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.footer-modal-overlay[hidden] {
  display: none;
}

.footer-modal {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-lg);
  max-width: 480px;
  width: 100%;
  position: relative;
}

.footer-modal h2 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.footer-modal p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--spacing-sm);
}

.footer-modal p:last-child {
  margin-bottom: 0;
}

.footer-modal-coming-soon {
  font-weight: 600;
  color: var(--primary-color) !important;
}

.footer-modal-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-light);
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.footer-modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

@media (max-width: 600px) {
  .footer-tagline {
    display: none;
  }
}