/* ── GOOGLE FONTS ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ── DESIGN TOKENS ────────────────────────────────────────────────────────── */
:root {
  --bg:          oklch(0.95 0.003 250);
  --surface:     oklch(0.90 0.004 250);
  --elevated:    oklch(0.98 0.002 250);
  --fg:          oklch(0.18 0.03  250);
  --card:        oklch(0.98 0.002 250);
  --primary:     oklch(0.20 0.04  255);
  --primary-fg:  oklch(0.96 0.003 250);
  --primary-soft:oklch(0.82 0.02  250);
  --sec:         oklch(0.32 0.06  255);
  --sec-fg:      oklch(0.96 0.003 250);
  --sec-soft:    oklch(0.85 0.025 250);
  --accent:      oklch(0.72 0.13   75);
  --accent-fg:   oklch(0.18 0.03  250);
  --accent-soft: oklch(0.92 0.05   80);
  --muted:       oklch(0.90 0.004 250);
  --muted-fg:    oklch(0.42 0.02  250);
  --border:      oklch(0.86 0.004 250);
  --success:     oklch(0.62 0.15  155);
  --destruct:    oklch(0.58 0.21   27);
  --shad-soft:   0 4px  24px  -8px oklch(0.20 0.04 255 / 0.20);
  --shad-pop:    0 12px 32px -12px oklch(0.20 0.04 255 / 0.40);
}
.dark {
  --bg:          oklch(0.16 0.025 250);
  --surface:     oklch(0.22 0.04  250);
  --elevated:    oklch(0.28 0.05  250);
  --fg:          oklch(0.93 0.005 250);
  --card:        oklch(0.22 0.04  250);
  --primary:     oklch(0.66 0.13   75);
  --primary-fg:  oklch(0.14 0.02  250);
  --primary-soft:oklch(0.42 0.09   75);
  --sec:         oklch(0.569 0.116 249);
  --sec-fg:      oklch(0.93 0.005 250);
  --sec-soft:    oklch(0.26 0.05  250);
  --accent:      oklch(0.82 0      0);
  --accent-fg:   oklch(0.16 0.025 250);
  --accent-soft: oklch(0.38 0.02  250);
  --muted:       oklch(0.28 0.04  250);
  --muted-fg:    oklch(0.72 0.01  250);
  --border:      oklch(1    0      0 / 0.12);
  --success:     oklch(0.68 0.15  155);
  --destruct:    oklch(0.58 0.21   27);
  --shad-soft:   0 4px  24px  -8px oklch(0.08 0.02 250 / 0.60);
  --shad-pop:    0 12px 32px -12px oklch(0.66 0.13  75 / 0.45);
}

/* ── BASE ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  min-height: 100vh;
}
::-webkit-scrollbar { width: 0; height: 0; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; }
h1, h2, h3, h4, .font-display { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.02em; }

/* ── UTILITIES ────────────────────────────────────────────────────────────── */
.grain {
  background-image: radial-gradient(oklch(0.36 0.07 45 / 0.04) 1px, transparent 1px);
  background-size: 4px 4px;
}
.shadow-soft { box-shadow: var(--shad-soft); }
.shadow-pop  { box-shadow: var(--shad-pop); }
.gradient-warm { background: linear-gradient(135deg, var(--primary), var(--sec)); }
.gradient-cool { background: linear-gradient(135deg, var(--sec), var(--accent)); }

/* ── BACKGROUND COLORS ────────────────────────────────────────────────────── */
.c-bg-card        { background-color: var(--card); }
.c-bg-surface     { background-color: var(--surface); }
.c-bg-muted       { background-color: var(--muted); }
.c-bg-primary     { background-color: var(--primary); }
.c-bg-sec         { background-color: var(--sec); }
.c-bg-accent      { background-color: var(--accent); }
.c-bg-accent-soft { background-color: var(--accent-soft); }
.c-bg-sec-soft    { background-color: var(--sec-soft); }
.c-bg-prim-soft   { background-color: var(--primary-soft); }
.c-bg-success-10  { background-color: oklch(0.62 0.15 155 / 0.10); }
.c-bg-success-20  { background-color: oklch(0.62 0.15 155 / 0.20); }
.c-bg-destruct-10 { background-color: oklch(0.58 0.21  27 / 0.10); }
.c-bg-prim-30     { background-color: oklch(0.20 0.04 255 / 0.30); }
.c-bg-prim-65     { background-color: oklch(0.20 0.04 255 / 0.65); }
.c-bg-card-95     { background-color: oklch(0.98 0.002 250 / 0.95); }
.c-bg-elevated    { background-color: var(--elevated); }

/* ── TEXT COLORS ──────────────────────────────────────────────────────────── */
.c-text-primary   { color: var(--primary); }
.c-text-sec       { color: var(--sec); }
.c-text-accent    { color: var(--accent); }
.c-text-accent-fg { color: var(--accent-fg); }
.c-text-prim-fg   { color: var(--primary-fg); }
.c-text-sec-fg    { color: var(--sec-fg); }
.c-text-muted-fg  { color: var(--muted-fg); }
.c-text-success   { color: var(--success); }
.c-text-destruct  { color: var(--destruct); }

/* ── BORDER COLORS ────────────────────────────────────────────────────────── */
.c-border-60         { border-color: oklch(0.86 0.004 250 / 0.60); }
.c-border-sec        { border-color: var(--sec); }
.c-border-success-30 { border-color: oklch(0.62 0.15 155 / 0.30); }
.c-border-accent-30  { border-color: oklch(0.72 0.13  75 / 0.30); }

/* ── HEADER ───────────────────────────────────────────────────────────────── */
.header-glass {
  background-color: oklch(0.95 0.003 250 / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dark .header-glass { background-color: oklch(0.16 0.025 250 / 0.85); }

/* ── TAB NAV ──────────────────────────────────────────────────────────────── */
.tab-glass {
  background: linear-gradient(135deg, oklch(0.18 0.03 250 / 0.82), oklch(0.18 0.03 250 / 0.65));
  box-shadow: 0 16px 48px -12px oklch(0.18 0.03 250 / 0.60),
              inset 0 1px 0 0 oklch(1 0 0 / 0.35),
              inset 0 -1px 0 0 oklch(0 0 0 / 0.25);
  backdrop-filter: blur(24px) saturate(2);
  -webkit-backdrop-filter: blur(24px) saturate(2);
}
.tab-btn {
  display: flex; flex: 1; flex-direction: column;
  align-items: center; gap: 2px; padding: 8px 4px;
  border-radius: 1rem; font-size: 12px; font-weight: 600;
  color: var(--primary-fg); opacity: 0.70;
  transition: opacity 0.2s; position: relative; z-index: 10;
}
.tab-btn:hover { opacity: 0.90; }
.tab-btn.active {
  opacity: 1;
  background: linear-gradient(135deg, oklch(1 0 0 / 0.30), oklch(1 0 0 / 0.12));
  box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 0.45),
              inset 0 -1px 0 0 oklch(0 0 0 / 0.20),
              0 6px 16px -8px oklch(0 0 0 / 0.40);
}
.tab-btn.active svg { color: var(--accent); }

/* ── PROGRESS BAR ─────────────────────────────────────────────────────────── */
.pb-track { height: 8px; width: 100%; border-radius: 9999px; overflow: hidden; }
.pb-fill  { height: 100%; border-radius: 9999px; transition: width 0.4s ease; }
.pb-track.tone-primary   { background-color: var(--muted); }
.pb-track.tone-secondary { background-color: var(--sec-soft); }
.pb-track.tone-light     { background-color: oklch(1 0 0 / 0.20); }
.pb-fill.tone-primary    { background-color: var(--primary); }
.pb-fill.tone-secondary  { background-color: var(--sec); }
.pb-fill.tone-light      { background-color: var(--accent); }

/* ── INPUT ────────────────────────────────────────────────────────────────── */
.c-input {
  display: block; width: 100%;
  padding: 0.875rem 1rem; border-radius: 1rem;
  background-color: var(--card); border: 1px solid var(--border);
  font-size: 0.875rem; color: var(--fg); outline: none;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-input:focus { border-color: var(--sec); box-shadow: 0 0 0 4px oklch(0.32 0.06 255 / 0.15); }
.c-input::placeholder { color: var(--muted-fg); }

/* ── MODULE CARD ──────────────────────────────────────────────────────────── */
.module-card { display: flex; flex-direction: column; cursor: pointer; transition: transform 0.15s; }
.module-card:hover { transform: translateY(-2px); }
.module-card .card-img { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.module-card .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── LESSON ITEM ──────────────────────────────────────────────────────────── */
.lesson-item { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 1rem; border: 1px solid; transition: border-color 0.15s; }
.lesson-item.done     { background-color: oklch(0.62 0.15 155 / 0.10); border-color: oklch(0.62 0.15 155 / 0.30); }
.lesson-item.open     { background-color: var(--card); border-color: oklch(0.86 0.004 250 / 0.60); }
.lesson-item.open:hover { border-color: var(--sec); }
.lesson-item.locked   { background-color: var(--muted); border-color: oklch(0.86 0.004 250 / 0.60); opacity: 0.60; }
.lesson-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lesson-icon.done   { background-color: var(--success); color: white; }
.lesson-icon.open   { background-color: var(--sec); color: var(--sec-fg); }
.lesson-icon.locked { background-color: var(--muted); color: var(--muted-fg); }

/* ── QUIZ ANSWER BUTTON ───────────────────────────────────────────────────── */
.answer-btn {
  width: 100%; text-align: left; padding: 1rem;
  border-radius: 1rem; border: 2px solid oklch(0.86 0.004 250 / 0.60);
  background-color: var(--card); cursor: pointer; display: flex;
  align-items: center; gap: 12px; transition: border-color 0.15s, background-color 0.15s;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.875rem;
}
.answer-btn:hover:not(:disabled) { border-color: var(--sec); }
.answer-btn.selected  { background-color: var(--sec-soft); border-color: var(--sec); }
.answer-btn.correct   { background-color: oklch(0.62 0.15 155 / 0.10); border-color: oklch(0.62 0.15 155 / 0.60); }
.answer-btn.wrong     { background-color: oklch(0.58 0.21 27 / 0.10); border-color: oklch(0.58 0.21 27 / 0.40); }
.answer-btn:disabled  { opacity: 0.70; cursor: default; }
.answer-letter {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid oklch(0.86 0.004 250 / 0.60);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0; color: var(--muted-fg);
}
.answer-btn.selected .answer-letter { background-color: var(--sec); color: var(--sec-fg); border-color: transparent; }

/* ── BADGE ────────────────────────────────────────────────────────────────── */
.badge-gold   { background-color: #fef9c3; color: #854d0e; }
.badge-silver { background-color: #f1f5f9; color: #475569; }
.badge-bronze { background-color: #ffedd5; color: #9a3412; }

/* ── DARK MODE TOGGLE ─────────────────────────────────────────────────────── */
#dm-icon-moon { display: block; }
#dm-icon-sun  { display: none; }
.dark #dm-icon-moon { display: none; }
.dark #dm-icon-sun  { display: block; }