/* ================================================================
   AI Explorer — Kids AI Learning PWA
   3 Themes: Zauberwald (Flora), Weltraum-Labor (Rosa), Hacker-Terminal (Ava)
   ================================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --transition: 0.2s ease;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-size: var(--font-size);
  transition: background var(--transition), color var(--transition);
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
img { max-width: 100%; }

/* ================================================================
   THEME: FLORA — Zauberwald (6 Jahre)
   Pastell, weich, gross, rund, verspielt
   ================================================================ */
[data-theme="flora"] {
  --bg: #FFF5F7;
  --bg-alt: #FFF0F5;
  --card: #FFFFFF;
  --card-hover: #FFF0F5;
  --accent: #F687B3;
  --accent-light: #FED7E2;
  --accent-dark: #D53F8C;
  --text: #4A3040;
  --text-muted: #9B7A8E;
  --success: #68D391;
  --success-bg: #F0FFF4;
  --error: #FC8181;
  --error-bg: #FFF5F5;
  --xp-bar: linear-gradient(90deg, #F687B3, #D53F8C);
  --border: #FED7E2;
  --shadow: 0 4px 20px rgba(214, 63, 140, 0.1);
  --shadow-hover: 0 8px 30px rgba(214, 63, 140, 0.2);
  --radius: 20px;
  --radius-sm: 14px;
  --font-size: 20px;
  --font-size-sm: 16px;
  --font-size-lg: 28px;
  --font-size-xl: 36px;
  --nav-size: 80px;
  --spacing: 20px;
  --font-weight-heading: 800;
}

/* ================================================================
   THEME: ROSA — Weltraum-Labor (9-10 Jahre)
   Dunkelblau, Neon, Tech-Glow
   ================================================================ */
[data-theme="rosa"] {
  --bg: #0F172A;
  --bg-alt: #1E293B;
  --card: #1E293B;
  --card-hover: #273548;
  --accent: #06B6D4;
  --accent-light: #164E63;
  --accent-dark: #0891B2;
  --text: #E2E8F0;
  --text-muted: #94A3B8;
  --success: #34D399;
  --success-bg: rgba(52, 211, 153, 0.1);
  --error: #F87171;
  --error-bg: rgba(248, 113, 113, 0.1);
  --xp-bar: linear-gradient(90deg, #06B6D4, #8B5CF6);
  --border: #334155;
  --shadow: 0 4px 20px rgba(6, 182, 212, 0.1);
  --shadow-hover: 0 4px 30px rgba(6, 182, 212, 0.25);
  --radius: 12px;
  --radius-sm: 8px;
  --font-size: 16px;
  --font-size-sm: 13px;
  --font-size-lg: 22px;
  --font-size-xl: 28px;
  --nav-size: 56px;
  --spacing: 16px;
  --font-weight-heading: 700;
}

/* Glow effects for Rosa */
[data-theme="rosa"] .nav-item--active,
[data-theme="rosa"] .badge-card--earned,
[data-theme="rosa"] .btn--primary {
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}

[data-theme="rosa"] .stat-card {
  border: 1px solid rgba(6, 182, 212, 0.2);
}

/* Stars background for Rosa */
[data-theme="rosa"] .home,
[data-theme="rosa"] .learn,
[data-theme="rosa"] .playground {
  background-image: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.15), transparent),
                    radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.1), transparent),
                    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.12), transparent),
                    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.08), transparent);
  background-size: 150px 100px;
}

/* ================================================================
   THEME: AVA — Hacker-Terminal (10-11 Jahre)
   Anthrazit, Gruen, Monospace, clean
   ================================================================ */
[data-theme="ava"] {
  --bg: #1A1A2E;
  --bg-alt: #16213E;
  --card: #16213E;
  --card-hover: #1C2A4A;
  --accent: #00F5A0;
  --accent-light: #0D3B2E;
  --accent-dark: #00C77B;
  --text: #E2EAF0;
  --text-muted: #9BADBF;
  --success: #00F5A0;
  --success-bg: rgba(0, 245, 160, 0.08);
  --error: #FF6B6B;
  --error-bg: rgba(255, 107, 107, 0.08);
  --xp-bar: linear-gradient(90deg, #00F5A0, #00B4D8);
  --border: #2A3A5C;
  --shadow: 0 2px 12px rgba(0, 245, 160, 0.06);
  --shadow-hover: 0 4px 20px rgba(0, 245, 160, 0.12);
  --radius: 8px;
  --radius-sm: 4px;
  --font-size: 15px;
  --font-size-sm: 12px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --nav-size: 48px;
  --spacing: 14px;
  --font-weight-heading: 600;
}

[data-theme="ava"] .lesson-code,
[data-theme="ava"] .chat-input,
[data-theme="ava"] .fill-starter {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* Scanline effect for Ava */
[data-theme="ava"] .home::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,245,160,0.015) 2px, rgba(0,245,160,0.015) 4px);
  pointer-events: none;
  z-index: 0;
}

/* ================================================================
   APP LAYOUT
   ================================================================ */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 600px;
  margin: 0 auto;
}

#main {
  flex: 1;
  padding: var(--spacing);
  padding-bottom: calc(var(--nav-size) + 30px);
  overflow-y: auto;
}

#nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  z-index: 100;
}

/* ================================================================
   NAVIGATION
   ================================================================ */
.nav-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--card);
  border-top: 1px solid var(--border);
  height: var(--nav-size);
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  min-width: 0;
  flex: 1;
}

.nav-item--active {
  background: var(--accent-light);
  color: var(--accent);
}

.nav-icon { font-size: 24px; }
[data-theme="flora"] .nav-icon { font-size: 32px; }

.nav-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.nav-item--active .nav-label { color: var(--accent); }

@media (max-width: 380px) {
  .nav-item { padding: 6px 2px; }
  .nav-icon { font-size: 20px; }
  .nav-label { font-size: 9px; }
}
@media (max-width: 320px) {
  .nav-label { display: none; }
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  font-weight: 600;
  transition: all var(--transition);
}

.btn--primary {
  background: var(--accent);
  color: var(--bg);
}

.btn--primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--large {
  width: 100%;
  padding: 16px;
  font-size: var(--font-size-lg);
  border-radius: var(--radius);
}

[data-theme="flora"] .btn--primary {
  border-radius: 50px;
  padding: 16px 32px;
  font-size: 20px;
  font-weight: 800;
  box-shadow: var(--shadow);
}

/* ================================================================
   PAGE TITLES
   ================================================================ */
.page-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-heading);
  margin-bottom: var(--spacing);
}

/* ================================================================
   PROFILE SCREEN
   ================================================================ */
.profile-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  gap: 32px;
  text-align: center;
}

.profile-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-heading);
}

.profile-subtitle { color: var(--text-muted); }

.profile-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 360px;
}

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--card);
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  transition: all var(--transition);
  cursor: pointer;
  width: 100%;
}

.profile-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
}

.profile-card--flora { border-left: 4px solid #F687B3; }
.profile-card--rosa { border-left: 4px solid #06B6D4; }
.profile-card--ava { border-left: 4px solid #00F5A0; }

.profile-avatar { font-size: 48px; }
.profile-name { font-size: var(--font-size-lg); font-weight: var(--font-weight-heading); }
.profile-tier { font-size: var(--font-size-sm); color: var(--text-muted); }
.profile-xp { font-size: var(--font-size-sm); color: var(--accent); }
.profile-streak { font-size: var(--font-size-sm); }

/* ================================================================
   HOME DASHBOARD
   ================================================================ */
.home { display: flex; flex-direction: column; gap: var(--spacing); }

.home-greeting-text h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-heading);
}

.home-streak {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-top: 4px;
}

.home-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-heading);
  margin-bottom: 12px;
}

/* Home Shortcuts */
.home-shortcuts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.home-shortcut-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card);
  border-radius: var(--radius);
  border: 2px solid var(--border);
  transition: all var(--transition);
}

.home-shortcut-card:hover,
.home-shortcut-card:active {
  border-color: var(--accent);
  transform: scale(1.02);
}

.home-shortcut-icon { font-size: 28px; }
[data-theme="flora"] .home-shortcut-icon { font-size: 36px; }

.home-shortcut-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-heading);
  color: var(--text);
}

/* Streak Week Calendar */
.streak-week {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 12px;
  padding: 10px 0;
}

.streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.streak-day-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.streak-day-dot {
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text-muted);
}

.streak-day--active .streak-day-dot {
  background: var(--accent-light);
  font-size: 16px;
}

.streak-day--today .streak-day-dot {
  border: 2px solid var(--accent);
}

[data-theme="flora"] .streak-day-dot {
  width: 40px;
  height: 40px;
  font-size: 22px;
}

/* XP Bar */
.xp-bar-container { background: var(--card); border-radius: var(--radius); padding: var(--spacing); }
.xp-bar-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.xp-level { font-weight: 700; }
.xp-amount { color: var(--accent); font-weight: 600; }
.xp-bar { height: 12px; background: var(--bg-alt); border-radius: 6px; overflow: hidden; }
.xp-bar-fill { height: 100%; background: var(--xp-bar); border-radius: 6px; transition: width 0.5s ease; }
.xp-bar-footer { font-size: var(--font-size-sm); color: var(--text-muted); margin-top: 6px; }
[data-theme="flora"] .xp-bar { height: 20px; border-radius: 10px; }

/* Next Lesson Card */
.home-next-card {
  display: block;
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--spacing);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow);
  transition: all var(--transition);
}

.home-next-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.home-next-module { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: 4px; }
.home-next-title { font-size: var(--font-size-lg); font-weight: 700; }
.home-next-action { color: var(--accent); font-weight: 600; margin-top: 8px; }
.home-complete { text-align: center; font-size: var(--font-size-lg); padding: 32px; }

/* Stats Grid */
.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--spacing);
  text-align: center;
}

.stat-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-heading); }
.stat-label { font-size: var(--font-size-sm); color: var(--text-muted); margin-top: 4px; }

[data-theme="flora"] .stat-card {
  border: 2px solid var(--accent-light);
}

/* Badges Row */
.home-badges-row { display: flex; gap: 12px; }
.badge-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: var(--font-size-sm);
}

/* Module Progress */
.home-modules-list { display: flex; flex-direction: column; gap: 10px; }

.home-module-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 12px var(--spacing);
  transition: all var(--transition);
}

.home-module-card:hover { background: var(--card-hover); }
.home-module-icon { font-size: 28px; }
.home-module-info { flex: 1; }
.home-module-name { font-weight: 600; }

.home-module-progress { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.home-module-bar { flex: 1; height: 6px; background: var(--bg-alt); border-radius: 3px; overflow: hidden; }
.home-module-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.home-module-progress span { font-size: var(--font-size-sm); color: var(--text-muted); min-width: 32px; text-align: right; }

/* ================================================================
   LEARN — MODULE LIST
   ================================================================ */
.learn { display: flex; flex-direction: column; gap: var(--spacing); }
.modules-list { display: flex; flex-direction: column; gap: var(--spacing); }

.module-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--spacing);
  box-shadow: var(--shadow);
}

.module-card--complete { border: 2px solid var(--success); }

.module-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.module-icon { font-size: 36px; }
.module-info { flex: 1; }
.module-name { font-size: var(--font-size-lg); font-weight: var(--font-weight-heading); }
.module-desc { font-size: var(--font-size-sm); color: var(--text-muted); margin-top: 2px; }
.module-check { font-size: 24px; }

.module-progress-bar {
  height: 6px;
  background: var(--bg-alt);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}

.module-progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }

.module-lessons { display: flex; flex-direction: column; gap: 4px; }

.lesson-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.lesson-row:hover { background: var(--card-hover); }
.lesson-row--done { opacity: 0.7; }
.lesson-row--locked { opacity: 0.4; cursor: not-allowed; }
.lesson-status { font-size: 18px; width: 28px; text-align: center; }
.lesson-title { flex: 1; font-weight: 500; }
.lesson-type { font-size: var(--font-size-sm); color: var(--text-muted); text-transform: capitalize; }

/* ================================================================
   LESSON VIEW
   ================================================================ */
.lesson { display: flex; flex-direction: column; gap: var(--spacing); }

.lesson-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lesson-back {
  font-size: var(--font-size-lg);
  padding: 8px;
  color: var(--text-muted);
}

.lesson-meta { font-size: var(--font-size-sm); color: var(--text-muted); }
.lesson-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-heading); }
.lesson-body { display: flex; flex-direction: column; gap: var(--spacing); }

.lesson-text {
  line-height: 1.6;
  font-size: var(--font-size);
}

.lesson-image {
  font-size: 72px;
  text-align: center;
  padding: 20px;
}

.lesson-example {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.example-step {
  padding: 8px 12px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
}

.example-arrow {
  text-align: center;
  font-size: 20px;
  color: var(--accent);
}

.lesson-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step {
  padding: 12px 16px;
  background: var(--card);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}

.lesson-code {
  background: #1a1a2e;
  color: #00F5A0;
  padding: var(--spacing);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* Compare blocks */
.lesson-compare {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--spacing);
}

.compare-option {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  border: 2px solid transparent;
}

.compare-option--better { border-color: var(--success); }
.compare-label { font-weight: 700; font-size: var(--font-size-sm); margin-bottom: 4px; }
.compare-text { font-size: var(--font-size); }
.compare-vs { text-align: center; font-weight: 700; color: var(--text-muted); }
.compare-explanation { font-size: var(--font-size-sm); color: var(--text-muted); padding-top: 8px; border-top: 1px solid var(--border); }

/* Drag & Drop */
.lesson-dragdrop { background: var(--card); border-radius: var(--radius); padding: var(--spacing); }
.dragdrop-instruction { font-weight: 600; margin-bottom: 12px; }

.dragdrop-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.dragdrop-category {
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: 12px;
  min-height: 120px;
}

.dragdrop-cat-title { font-weight: 700; font-size: var(--font-size-sm); margin-bottom: 8px; text-align: center; }

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

.dragdrop-item {
  padding: 8px 14px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: grab;
  font-size: var(--font-size-sm);
  transition: all var(--transition);
}

.dragdrop-item:hover { transform: scale(1.05); }

[data-theme="flora"] .dragdrop-item {
  padding: 14px 20px;
  font-size: 18px;
  border-radius: 50px;
}

/* Fill Prompt */
.lesson-fill-prompt {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--spacing);
}

.fill-starter {
  font-size: var(--font-size-lg);
  font-weight: 600;
  padding: 12px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.fill-hints { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fill-hint {
  padding: 6px 12px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.fill-example {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  padding: 12px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--success);
}

/* Suggestions */
.lesson-suggestions, .chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suggestion-chip, .chat-suggestion {
  padding: 8px 14px;
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.suggestion-chip:hover, .chat-suggestion:hover {
  background: var(--accent);
  color: var(--bg);
}

/* Topic Picker */
.lesson-topics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.topic-btn {
  padding: 14px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--font-size);
  font-weight: 600;
  transition: all var(--transition);
}

.topic-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

[data-theme="flora"] .topic-btn {
  font-size: 20px;
  padding: 20px;
  border-radius: 20px;
}

/* Lesson Footer */
.lesson-footer { padding-top: var(--spacing); }

/* ================================================================
   QUIZ
   ================================================================ */
.quiz { display: flex; flex-direction: column; gap: var(--spacing); }
.quiz-progress { font-size: var(--font-size-sm); color: var(--text-muted); }
.quiz-question { font-size: var(--font-size-lg); font-weight: var(--font-weight-heading); line-height: 1.4; }

.quiz-options { display: flex; flex-direction: column; gap: 10px; }

.quiz-option {
  padding: 14px var(--spacing);
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--font-size);
  color: var(--text);
  text-align: left;
  transition: all var(--transition);
  cursor: pointer;
}

.quiz-option:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--card-hover);
}

.quiz-option--large { padding: 20px; font-size: 20px; }
.quiz-option--correct { border-color: var(--success) !important; background: var(--success-bg) !important; color: var(--text) !important; }
.quiz-option--wrong { border-color: var(--error) !important; background: var(--error-bg) !important; color: var(--text) !important; }

.quiz-explanation {
  padding: 12px var(--spacing);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.quiz-explanation--correct { background: var(--success-bg); color: var(--success); }
.quiz-explanation--wrong { background: var(--error-bg); color: var(--error); }

.quiz-results { text-align: center; padding: 32px 0; }
.quiz-results-icon { font-size: 64px; margin-bottom: 16px; }
.quiz-results-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-heading); }
.quiz-results-score { font-size: var(--font-size-lg); color: var(--text-muted); margin: 8px 0; }
.quiz-results-xp { font-size: var(--font-size-lg); color: var(--accent); font-weight: 700; }
.quiz-results-levelup { font-size: var(--font-size-lg); margin-top: 12px; }

/* ================================================================
   CHAT
   ================================================================ */
.chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.chat-bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: var(--radius);
  line-height: 1.5;
}

.chat-bubble--assistant {
  background: var(--card);
  border: 1px solid var(--border);
  align-self: flex-start;
}

.chat-bubble--user {
  background: var(--accent);
  color: var(--bg);
  align-self: flex-end;
}

.chat-sender {
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--accent);
}

.chat-text { font-size: var(--font-size); }

.chat-input-area {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: var(--font-size);
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color var(--transition);
}

.chat-input:focus { border-color: var(--accent); }

.chat-send {
  padding: 12px 20px;
  white-space: nowrap;
}

.chat-typing {
  display: inline-flex;
  gap: 4px;
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Flora voice button */
.chat-input--flora {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 50px;
}

.chat-voice-btn {
  font-size: 22px;
  padding: 12px 28px;
  color: var(--accent);
  font-weight: 700;
}

.lesson-chat-area {
  min-height: 300px;
}

.lesson-chat-complete {
  padding-top: var(--spacing);
}

/* ================================================================
   PLAYGROUND
   ================================================================ */
.playground { display: flex; flex-direction: column; gap: var(--spacing); }
.playground-intro { color: var(--text-muted); font-size: var(--font-size-sm); }
.playground-chat { flex: 1; }

.playground-topics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

[data-theme="flora"] .playground-topics {
  gap: 12px;
}

.playground-suggestions {
  margin-bottom: 4px;
}

/* ================================================================
   BADGES PAGE
   ================================================================ */
.badges-page { display: flex; flex-direction: column; gap: var(--spacing); }

.badges-count {
  text-align: center;
  font-size: var(--font-size-lg);
  color: var(--text-muted);
}

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

.badge-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--spacing);
  text-align: center;
  border: 2px solid var(--border);
  transition: all var(--transition);
}

.badge-card--earned { border-color: var(--accent); }
.badge-card--locked { opacity: 0.5; }
.badge-icon { font-size: 40px; margin-bottom: 8px; }
.badge-name { font-weight: 700; font-size: var(--font-size-sm); }
.badge-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

[data-theme="flora"] .badge-icon { font-size: 56px; }
[data-theme="flora"] .badge-card { border-radius: 24px; padding: 24px; }

/* ================================================================
   TOAST NOTIFICATIONS
   ================================================================ */
#toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 90vw;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  font-weight: 600;
  font-size: var(--font-size-sm);
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.3s ease;
}

.toast--visible { transform: translateY(0); opacity: 1; }
.toast--xp { background: var(--accent); color: var(--bg); }
.toast--badge { background: var(--card); border-color: var(--accent); }
.toast--levelup { background: var(--accent); color: var(--bg); font-size: var(--font-size); }
.toast--streak { background: var(--card); border-color: var(--accent); }

/* ================================================================
   FLORA SPECIAL ANIMATIONS
   ================================================================ */
[data-theme="flora"] .btn--primary:active {
  transform: scale(0.95);
}

[data-theme="flora"] .quiz-results-icon {
  animation: bounce 1s ease infinite;
}

[data-theme="flora"] .badge-card--earned {
  animation: glow-flora 2s ease infinite alternate;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes glow-flora {
  from { box-shadow: 0 0 5px rgba(246, 135, 179, 0.3); }
  to { box-shadow: 0 0 20px rgba(246, 135, 179, 0.5); }
}

/* ================================================================
   ERROR
   ================================================================ */
.error {
  text-align: center;
  padding: 40px;
  color: var(--error);
  font-size: var(--font-size-lg);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 400px) {
  .badges-grid { grid-template-columns: 1fr; }
  .home-stats-grid { grid-template-columns: 1fr 1fr; }
  .dragdrop-categories { grid-template-columns: 1fr; }
}

/* ================================================================
   PAGE TRANSITIONS
   ================================================================ */
.page-enter {
  opacity: 0;
  transform: translateY(8px);
}

#main {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-exit {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ================================================================
   FILL PROMPT (interactive)
   ================================================================ */
.fill-prompt-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: var(--font-size);
  font-family: inherit;
  resize: vertical;
  margin: 12px 0;
  transition: border-color var(--transition);
}

.fill-prompt-input:focus {
  outline: none;
  border-color: var(--accent);
}

.fill-prompt-check {
  margin-top: 8px;
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.fill-prompt-check:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ================================================================
   SUGGESTION CHIPS (interactive)
   ================================================================ */
.suggestion-chip {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--card);
  border: 2px solid var(--border);
  font-size: var(--font-size-sm);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
}

.suggestion-chip:hover,
.suggestion-chip--selected {
  border-color: var(--accent);
  background: var(--accent-light);
}

/* ================================================================
   TOPIC PICKER (interactive)
   ================================================================ */
.topic-btn {
  padding: 12px 20px;
  border-radius: var(--radius);
  background: var(--card);
  border: 2px solid var(--border);
  font-size: var(--font-size);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

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

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

/* ================================================================
   COMPARE OPTION (clickable)
   ================================================================ */
.compare-option {
  cursor: pointer;
  transition: all var(--transition);
}

.compare-option:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.compare-option--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* ================================================================
   CONFETTI ANIMATION
   ================================================================ */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  border-radius: 2px;
  animation: confetti-fall 2.5s ease-in forwards;
}

@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ================================================================
   FLORA: chat-input fix
   ================================================================ */
[data-theme="flora"] .chat-input--flora {
  font-size: 18px;
  padding: 12px 16px;
  border-radius: 20px;
}

[data-theme="flora"] .chat-send {
  font-size: 18px;
  padding: 12px 20px;
  border-radius: 20px;
}