:root {
  --background: 42 38% 96%;
  --foreground: 214 42% 13%;
  --primary: 174 75% 27%;
  --primary-foreground: 0 0% 100%;
  --secondary: 32 92% 56%;
  --secondary-foreground: 214 42% 13%;
  --muted: 42 22% 88%;
  --muted-foreground: 213 18% 38%;
  --destructive: 3 75% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 42 22% 78%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px rgba(19, 47, 51, 0.08);
  --shadow-md: 0 14px 34px rgba(19, 47, 51, 0.13);
  --shadow-lg: 0 24px 60px rgba(19, 47, 51, 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 0.75rem;
  --radius-md: 1.15rem;
  --radius-lg: 1.65rem;
}

.dark {
  --background: 206 44% 8%;
  --foreground: 42 48% 94%;
  --primary: 174 72% 42%;
  --primary-foreground: 206 44% 8%;
  --secondary: 34 94% 61%;
  --secondary-foreground: 206 44% 8%;
  --muted: 207 30% 16%;
  --muted-foreground: 42 20% 75%;
  --destructive: 3 76% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 207 24% 24%;
  --card: 206 38% 11%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, hsl(var(--secondary) / 0.18), transparent 34rem),
    radial-gradient(circle at bottom right, hsl(var(--primary) / 0.16), transparent 30rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, a { transition: var(--transition-smooth); }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid hsl(var(--secondary) / 0.55);
  outline-offset: 3px;
}

.app-shell { max-width: 1120px; margin: 0 auto; }
.lesson-card { box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }
.audio-wave span {
  display: inline-block;
  width: 4px;
  height: 10px;
  margin: 0 2px;
  border-radius: 999px;
  background: hsl(var(--primary));
  opacity: 0.55;
}
.audio-wave.is-active span { animation: wave 1.15s ease-in-out infinite; }
.audio-wave.is-active span:nth-child(2) { animation-delay: 0.12s; }
.audio-wave.is-active span:nth-child(3) { animation-delay: 0.24s; }
.audio-wave.is-active span:nth-child(4) { animation-delay: 0.36s; }
.audio-wave.is-active span:nth-child(5) { animation-delay: 0.48s; }
@keyframes wave {
  0%, 100% { height: 10px; opacity: 0.45; }
  50% { height: 28px; opacity: 1; }
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td { vertical-align: top; }
.malayalam { font-family: ui-sans-serif, system-ui, "Noto Sans Malayalam", sans-serif; }