/* ──────────────────────────────────────────────────────────────────
   Saemal — language learning prototype
   Theme tokens driven by Tweaks. Three palettes × three type pairings
   × three density steps. Everything below cascades from CSS vars.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* Cobalt (default) — hues remapped to the "Danish Modern" palette */
  --bg:        oklch(98% 0.012 80);
  --bg-soft:   oklch(96% 0.018 75);
  --bg-deep:   oklch(94% 0.024 70);
  --surface:   #ffffff;
  --surface-2: oklch(98.5% 0.008 80);
  --ink:       oklch(22% 0.02 60);
  --ink-2:     oklch(38% 0.02 60);
  --ink-3:     oklch(58% 0.015 60);
  --ink-4:     oklch(76% 0.012 60);
  --line:      oklch(90% 0.012 80);
  --line-2:    oklch(85% 0.018 75);

  --primary:   oklch(58% 0.14 245); /* steel blue */
  --primary-2: oklch(46% 0.15 245);
  --primary-on:#ffffff;
  --primary-soft: oklch(93% 0.03 245);

  --accent-a:  oklch(66% 0.09 150);  /* sage */
  --accent-b:  oklch(68% 0.13 32);   /* terracotta */
  --accent-c:  oklch(76% 0.13 85);   /* mustard */
  --accent-d:  oklch(66% 0.09 18);   /* dusty rose */

  --warn:      oklch(70% 0.12 55);
  --good:      oklch(62% 0.09 150);
  --bad:       oklch(56% 0.15 25);

  /* Typography */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-ko:      "Noto Sans KR", "Plus Jakarta Sans", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --display-tracking: -0.02em;
  --body-tracking: 0;

  /* Density (regular) */
  --pad: 24px;
  --pad-tight: 16px;
  --pad-loose: 32px;
  --gap: 16px;
  --gap-tight: 10px;
  --gap-loose: 24px;
  --card-pad: 24px;
  --card-radius: 4px;
  --pill-radius: 999px;
  --row-height: 56px;

  --shadow-card: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(30,30,60,.06), 0 6px 24px -8px rgba(30,30,60,.08);
  --shadow-pop:  0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(30,30,60,.08), 0 24px 60px -20px rgba(30,30,60,.18);
}

/* ── Theme: Hanji (earthy clay + sage + plum) ───────────────────── */
.theme-hanji {
  --bg:        oklch(96.5% 0.015 70);
  --bg-soft:   oklch(94.5% 0.022 65);
  --bg-deep:   oklch(91.5% 0.030 60);
  --surface:   oklch(99% 0.008 75);
  --surface-2: oklch(97% 0.012 70);
  --ink:       oklch(25% 0.03 50);
  --ink-2:     oklch(40% 0.025 55);
  --ink-3:     oklch(58% 0.02 55);
  --ink-4:     oklch(76% 0.015 60);
  --line:      oklch(88% 0.018 65);
  --line-2:    oklch(82% 0.026 60);

  --primary:   oklch(56% 0.12 30);   /* clay → terracotta */
  --primary-2: oklch(46% 0.13 28);
  --primary-soft: oklch(91% 0.04 32);

  --accent-a:  oklch(62% 0.09 150);  /* sage */
  --accent-b:  oklch(48% 0.10 25);   /* plum → dusty brick */
  --accent-c:  oklch(70% 0.12 82);   /* ochre → mustard */
  --accent-d:  oklch(58% 0.10 170);  /* teal → sage-steel */
}

/* ── Theme: Inkwell (dark) ─────────────────────────────────────── */
.theme-inkwell {
  --bg:        oklch(18% 0.020 60);
  --bg-soft:   oklch(22% 0.022 60);
  --bg-deep:   oklch(26% 0.025 60);
  --surface:   oklch(24% 0.022 60);
  --surface-2: oklch(28% 0.025 60);
  --ink:       oklch(96% 0.012 80);
  --ink-2:     oklch(80% 0.018 80);
  --ink-3:     oklch(64% 0.018 80);
  --ink-4:     oklch(46% 0.018 80);
  --line:      oklch(34% 0.020 60);
  --line-2:    oklch(40% 0.025 60);

  --primary:   oklch(74% 0.14 30);   /* terracotta */
  --primary-2: oklch(80% 0.13 32);
  --primary-on:oklch(20% 0.02 60);
  --primary-soft: oklch(30% 0.05 28);

  --accent-a:  oklch(76% 0.10 150);  /* sage */
  --accent-b:  oklch(72% 0.12 248);  /* steel blue */
  --accent-c:  oklch(83% 0.12 85);   /* mustard */
  --accent-d:  oklch(76% 0.09 20);   /* dusty rose */

  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.3), 0 6px 24px -8px rgba(0,0,0,.4);
  --shadow-pop:  0 1px 0 rgba(255,255,255,.05) inset, 0 24px 80px -20px rgba(0,0,0,.6);
}

/* ── Font pairings ─────────────────────────────────────────────── */
.font-bricolage {
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-ko:      "Noto Sans KR", sans-serif;
  --display-tracking: -0.02em;
}
.font-editorial {
  --font-display: "DM Serif Display", ui-serif, Georgia, serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-ko:      "Gowun Batang", serif;
  --display-tracking: -0.005em;
}
.font-crisp {
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-ko:      "Noto Sans KR", sans-serif;
  --display-tracking: -0.015em;
}

/* ── Density ───────────────────────────────────────────────────── */
.density-compact {
  --pad: 16px; --pad-tight: 10px; --pad-loose: 22px;
  --gap: 10px; --gap-tight: 6px; --gap-loose: 16px;
  --card-pad: 16px; --card-radius: 2px; --row-height: 44px;
}
.density-cozy {
  --pad: 32px; --pad-tight: 22px; --pad-loose: 44px;
  --gap: 22px; --gap-tight: 14px; --gap-loose: 32px;
  --card-pad: 32px; --card-radius: 6px; --row-height: 68px;
}

/* ── Base ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: var(--body-tracking);
}
#root { min-height: 100vh; }
button { font-family: inherit; color: inherit; }
:lang(ko), .ko { font-family: var(--font-ko); font-feature-settings: normal; }

/* ── Splash ────────────────────────────────────────────────────── */
.splash {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--bg); color: var(--ink);
  flex-direction: column; gap: 12px;
}
.splash-mark {
  font-family: var(--font-ko); font-weight: 700; font-size: 64px;
  color: var(--primary); letter-spacing: -0.02em;
  animation: pulse 1.8s ease-in-out infinite;
}
.splash-name { font-family: var(--font-display); letter-spacing: -0.02em; color: var(--ink-3); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ── Layout shell ──────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: 244px 1fr;
  min-height: 100vh;
}
.density-compact .shell { grid-template-columns: 216px 1fr; }
.density-cozy    .shell { grid-template-columns: 272px 1fr; }

.sidebar {
  position: sticky; top: 0; height: 100vh;
  padding: 22px 16px;
  display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--line);
  background: var(--bg);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 18px;
}
.brand-mark {
  width: 36px; height: 36px; border-radius: 4px;
  background: var(--primary); color: var(--primary-on);
  display: grid; place-items: center;
  font-family: var(--font-ko); font-weight: 700; font-size: 22px;
  line-height: 1; letter-spacing: -0.02em;
}
.brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em;
}
.brand-tag {
  display: block; font-size: 11px; color: var(--ink-3);
  font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  margin-top: 2px;
}

.nav-section {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 16px 12px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 3px;
  font-weight: 500; font-size: 14px; color: var(--ink-2);
  cursor: pointer; user-select: none;
  border: 1px solid transparent;
  transition: background 80ms ease;
}
.nav-item:hover { background: var(--bg-soft); }
.nav-item.active {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-card);
  border-color: var(--line);
}
.nav-item .nav-icon {
  width: 18px; height: 18px; color: var(--ink-3);
  flex-shrink: 0;
}
.nav-item.active .nav-icon { color: var(--primary); }
.nav-item .nav-badge {
  margin-left: auto;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--primary-soft); color: var(--primary);
  padding: 2px 7px; border-radius: 999px;
  min-width: 22px; text-align: center;
}
.theme-inkwell .nav-item.active .nav-icon { color: var(--primary); }

.sidebar-footer {
  margin-top: auto; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--line);
}
.avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-b), var(--primary));
  color: white; display: grid; place-items: center;
  font-weight: 600; font-size: 13px;
}
.sidebar-footer .who { font-size: 13px; font-weight: 500; }
.sidebar-footer .lvl { font-size: 11px; color: var(--ink-3); }

/* ── Page chrome ───────────────────────────────────────────────── */
.page { padding: 28px var(--pad-loose) 64px; max-width: 1280px; }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--pad-loose); gap: 24px;
}
.page-eyebrow {
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 6px;
}
.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px; line-height: 1.05;
  letter-spacing: var(--display-tracking);
  margin: 0;
}
.page-subtitle {
  color: var(--ink-2); font-size: 15px; margin-top: 8px;
  max-width: 60ch;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  appearance: none; border: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 4px;
  font-weight: 600; font-size: 14px; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
  transition: transform 80ms ease, box-shadow 80ms ease, background 80ms ease;
}
.btn:hover { background: var(--bg-soft); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--primary); color: var(--primary-on);
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -6px var(--primary);
}
.btn.primary:hover { background: var(--primary-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--bg-soft); color: var(--ink); }
.btn.lg { padding: 14px 22px; font-size: 16px; border-radius: 4px; }
.btn.sm { padding: 6px 10px; font-size: 12px; border-radius: 3px; }
.btn.icon-only { padding: 8px; }

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--shadow-card);
}

/* ── Chips & pills ─────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: var(--bg-soft); color: var(--ink-2);
  border: 1px solid var(--line);
  cursor: pointer; user-select: none;
}
.chip:hover { background: var(--bg-deep); }
.chip.active {
  background: var(--ink); color: var(--bg); border-color: transparent;
}
.chip .dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--primary);
}
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: var(--primary-soft); color: var(--primary-2);
}
.tag::before { content: "#"; opacity: 0.55; }
.theme-inkwell .tag { color: var(--primary); }

/* ── Hero (Home) ───────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: var(--pad-loose);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--pad-loose);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hero-greet {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500;
  color: var(--ink-3); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-headline {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 700; line-height: 1.05;
  letter-spacing: var(--display-tracking);
  margin: 12px 0 14px;
}
.hero-headline .hello {
  color: var(--primary);
  font-weight: 700;
}
.hero-headline .hello.ko { font-family: "Noto Sans KR", var(--font-display); font-weight: 900; }
.hero-headline .ko { color: var(--primary); }
.hero-sub { color: var(--ink-2); font-size: 15px; max-width: 44ch; }
.hero-cta { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }

.hero-rings {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.ring.full { grid-column: 1 / -1; }
.ring {
  background: var(--bg-soft);
  border-radius: 4px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.ring .ring-label { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.ring .ring-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.ring .ring-unit  { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.ring .ring-bar   { height: 5px; background: var(--line); border-radius: 999px; overflow: hidden; }
.ring .ring-bar > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.ring.b .ring-bar > i { background: var(--accent-a); }
.ring.c .ring-bar > i { background: var(--accent-b); }
.ring.d .ring-bar > i { background: var(--accent-c); }

/* ── Grid utilities ────────────────────────────────────────────── */
.row { display: flex; gap: var(--gap); }
.col { display: flex; flex-direction: column; gap: var(--gap); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.section-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -0.015em;
  margin: 32px 0 14px; display: flex; align-items: baseline; justify-content: space-between;
}
.section-title .meta { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--ink-3); }

/* ── Streak strip ──────────────────────────────────────────────── */
.streak {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: nowrap;
}
.streak-day {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px;
  border-radius: 12px;
}
.streak-day .d { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.streak-day .o {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--line); position: relative;
}
.streak-day.done .o { background: var(--primary); }
.streak-day.done .o::after {
  content: ""; position: absolute; inset: 7px;
  border-left: 2px solid white; border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px);
  width: 14px; height: 7px;
}
.streak-day.today { background: var(--bg-soft); border: 1px solid var(--primary-soft); }
.streak-day.today .o { background: var(--bg); border: 2px dashed var(--primary); }
.streak-day.done.today .o { background: var(--primary); border: none; }

/* ── Deck card ─────────────────────────────────────────────────── */
.deck {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.deck:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.deck-stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--primary);
}
.deck-stripe.jade { background: var(--accent-a); }
.deck-stripe.indigo { background: var(--accent-b); }
.deck-stripe.mustard { background: var(--accent-c); }
.deck-stripe.berry { background: var(--accent-d); }
.deck-name {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700; letter-spacing: -0.015em;
  margin: 8px 0 0;
}
.deck-meta {
  display: flex; gap: 14px; color: var(--ink-3); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.deck-meta b { color: var(--ink); font-weight: 600; }
.deck-progress {
  height: 6px; background: var(--bg-deep); border-radius: 999px; overflow: hidden;
  display: flex;
}
.deck-progress > i { display: block; height: 100%; }
.deck-progress > i.due { background: var(--primary); }
.deck-progress > i.learn { background: var(--accent-c); }
.deck-progress > i.review { background: var(--accent-a); }
.deck-progress > i.master { background: var(--accent-b); }

.deck-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Drop zone ─────────────────────────────────────────────────── */
.dropzone {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--card-radius);
  padding: 28px;
  background: var(--surface-2);
  display: flex; align-items: center; gap: 18px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.dropzone:hover, .dropzone.over {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.dropzone-icon {
  width: 48px; height: 48px; border-radius: 4px;
  background: var(--surface); display: grid; place-items: center;
  color: var(--primary);
  border: 1px solid var(--line);
}
.dropzone h4 {
  margin: 0 0 4px; font-family: var(--font-display);
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
}
.dropzone p { margin: 0; font-size: 13px; color: var(--ink-3); }

/* ── Study screen ──────────────────────────────────────────────── */
.study-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg);
}
.study-top {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
}
.study-bar {
  flex: 1; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden;
  position: relative;
}
.study-bar > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--primary); border-radius: 999px;
  transition: width 200ms cubic-bezier(.3,.7,.4,1);
}
.study-bar .marks { position: absolute; inset: 0; display: flex; }
.study-bar .marks > b {
  display: block; height: 100%; border-right: 1px solid rgba(255,255,255,.4);
  flex: 1;
}
.study-count {
  font-variant-numeric: tabular-nums; font-size: 13px;
  color: var(--ink-3); font-weight: 500;
}
.study-count b { color: var(--ink); font-weight: 700; }

.study-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px;
  position: relative;
  overflow-y: auto;
  gap: 24px;
}

.flashcard {
  width: min(640px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 56px 48px;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  user-select: none;
  transition: transform 180ms cubic-bezier(.3,.7,.4,1);
}
.flashcard:hover { transform: translateY(-2px); }
.flashcard .pos {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px;
}
.flashcard .term {
  font-family: var(--font-ko);
  font-weight: 700;
  font-size: 78px; line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.flashcard .romaji {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 14px; color: var(--ink-3);
  letter-spacing: 0.04em;
}
.flashcard .meaning {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px dashed var(--line);
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.015em;
}
.flashcard .example {
  margin-top: 20px;
  font-size: 15px; color: var(--ink-2);
  line-height: 1.5;
}
.flashcard .example .ex-ko { display: block; font-family: var(--font-ko); font-weight: 500; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.flashcard .audio-btn {
  position: absolute; top: 22px; right: 22px;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line);
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink-2);
}
.flashcard .audio-btn:hover { background: var(--primary-soft); color: var(--primary); }
.flashcard .tags-row {
  position: absolute; top: 22px; left: 22px;
  display: flex; gap: 6px;
}
.flashcard .reveal-hint {
  margin-top: 28px;
  font-size: 12px; color: var(--ink-3); letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 500;
}

/* Card type chips (mc, type, listening, cloze, ...) */
.card-type-pill {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  padding: 4px 12px; border-radius: 999px;
  text-transform: uppercase;
}

/* Multiple-choice tiles */
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.mc-tile {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px 18px;
  text-align: left; font-size: 16px; font-weight: 500;
  cursor: pointer; transition: transform 80ms, background 80ms, border-color 80ms;
  display: flex; align-items: center; gap: 10px;
}
.mc-tile:hover { background: var(--bg-soft); border-color: var(--primary); }
.mc-tile .kbd {
  width: 22px; height: 22px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-3);
  flex-shrink: 0;
}
.mc-tile.correct { background: color-mix(in oklch, var(--good) 18%, var(--surface)); border-color: var(--good); }
.mc-tile.wrong   { background: color-mix(in oklch, var(--bad)  18%, var(--surface)); border-color: var(--bad); }

/* Type-the-answer */
.type-input {
  appearance: none; width: 100%;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px 18px;
  font-family: var(--font-ko); font-size: 22px; font-weight: 500;
  text-align: center; color: var(--ink);
  margin-top: 24px;
  outline: none;
}
.type-input:focus { border-color: var(--primary); background: var(--surface); }

/* Cloze */
.cloze-sentence {
  font-family: var(--font-ko); font-size: 32px; font-weight: 600;
  line-height: 1.4; letter-spacing: -0.01em;
  margin: 20px 0; word-break: keep-all;
}
.cloze-blank {
  display: inline-block; min-width: 120px;
  border-bottom: 3px solid var(--primary);
  margin: 0 4px; padding: 0 8px;
  color: var(--ink-4);
}
.cloze-blank.filled { color: var(--primary); border-color: var(--accent-a); }

/* Answer dock */
.answer-dock {
  display: flex; gap: 8px; justify-content: center;
  padding: 18px 28px 32px;
}
.ans-btn {
  flex: 1; max-width: 180px;
  appearance: none; border: 0;
  padding: 14px 16px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--line);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform 80ms, background 80ms;
}
.ans-btn:hover { transform: translateY(-1px); background: var(--bg-soft); }
.ans-btn .lbl {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
}
.ans-btn .iv {
  font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.ans-btn .kbd {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-4);
}
.ans-btn.again { box-shadow: 0 -3px 0 var(--bad) inset; }
.ans-btn.hard  { box-shadow: 0 -3px 0 var(--warn) inset; }
.ans-btn.good  { box-shadow: 0 -3px 0 var(--good) inset; }
.ans-btn.easy  { box-shadow: 0 -3px 0 var(--accent-b) inset; }
.ans-btn.again:hover { background: color-mix(in oklch, var(--bad) 8%, var(--surface)); }
.ans-btn.hard:hover  { background: color-mix(in oklch, var(--warn) 8%, var(--surface)); }
.ans-btn.good:hover  { background: color-mix(in oklch, var(--good) 8%, var(--surface)); }
.ans-btn.easy:hover  { background: color-mix(in oklch, var(--accent-b) 8%, var(--surface)); }

/* ── Spatial study mode ────────────────────────────────────────── */
.spatial {
  position: relative; width: 100%; min-height: 540px;
  background:
    radial-gradient(circle at 20% 30%, var(--primary-soft) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, color-mix(in oklch, var(--accent-a) 20%, transparent) 0%, transparent 50%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.spatial-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.4;
}
.spatial-node {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 13px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  min-width: 90px; text-align: center;
  transition: transform 120ms, box-shadow 120ms;
}
.spatial-node:hover { transform: translate(-50%, -52%); box-shadow: var(--shadow-pop); }
.spatial-node .nko { font-family: var(--font-ko); font-weight: 600; font-size: 18px; }
.spatial-node .nen { font-size: 11px; color: var(--ink-3); }
.spatial-node.done {
  background: var(--accent-a); color: white;
  border-color: transparent;
}
.spatial-node.done .nen { color: rgba(255,255,255,.8); }
.spatial-node.current {
  background: var(--primary); color: var(--primary-on);
  border-color: transparent;
  transform: translate(-50%, -50%) scale(1.1);
  z-index: 2;
}
.spatial-node.current .nen { color: rgba(255,255,255,.85); }
.spatial-edge {
  position: absolute;
  height: 2px;
  background: var(--line);
  transform-origin: left center;
  z-index: 0;
}
.spatial-edge.done { background: var(--accent-a); }
.spatial-region {
  position: absolute;
  border: 1.5px dashed var(--line-2);
  border-radius: 6px;
  padding: 22px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
}
.spatial-region span { background: var(--bg); padding: 2px 8px; border-radius: 6px; position: absolute; top: -10px; left: 16px; }

/* ── Game mode ─────────────────────────────────────────────────── */
.game-stage {
  width: min(820px, 100%);
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
.quest-header {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px;
}
.hearts {
  display: flex; gap: 4px;
  font-size: 18px;
}
.heart.full { color: var(--bad); }
.heart.empty { color: var(--line-2); }
.combo {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px;
  color: var(--accent-c);
}
.xp-bar {
  height: 14px; background: var(--bg-deep); border-radius: 999px;
  flex: 1; overflow: hidden; position: relative;
}
.xp-bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent-c), var(--primary));
  border-radius: 999px;
  transition: width 300ms cubic-bezier(.3,.7,.4,1);
}
.xp-bar > span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600; color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  letter-spacing: 0.04em;
}

/* ── Card detail ───────────────────────────────────────────────── */
.detail-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap-loose);
  align-items: flex-start;
}
.detail-hero {
  position: relative; padding: 36px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.detail-hero .stripe {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 8px; background: var(--primary);
  border-radius: 6px 0 0 6px;
}
.detail-hero .pos { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase; }
.detail-hero .term {
  font-family: var(--font-ko);
  font-weight: 700; font-size: 64px; line-height: 1.1;
  letter-spacing: -0.02em; margin: 8px 0 4px;
}
.detail-hero .romaji { font-family: var(--font-mono); color: var(--ink-3); font-size: 14px; }
.detail-hero .meaning {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
}
.detail-section {
  padding: 24px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line);
}
.detail-section h3 {
  margin: 0 0 14px; font-family: var(--font-display);
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3);
}
.usage-line {
  border-left: 3px solid var(--accent-a);
  padding: 6px 0 6px 14px; margin-bottom: 14px;
}
.usage-line .uk { font-family: var(--font-ko); font-weight: 500; font-size: 17px; }
.usage-line .ue { color: var(--ink-3); font-size: 14px; margin-top: 4px; }

.conj-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.conj-table th, .conj-table td { padding: 9px 8px; text-align: left; }
.conj-table th { font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.conj-table tr { border-top: 1px solid var(--line); }
.conj-table .form { font-family: var(--font-ko); font-weight: 600; }

.review-track {
  display: flex; align-items: flex-end; gap: 4px; height: 80px;
  margin-bottom: 8px;
}
.review-track > i {
  flex: 1; background: var(--line); border-radius: 4px 4px 0 0;
  transition: background 120ms;
}
.review-track > i.good { background: var(--good); }
.review-track > i.again { background: var(--bad); }
.review-track > i.hard { background: var(--warn); }
.review-track > i.easy { background: var(--accent-b); }

/* ── Stats screen ──────────────────────────────────────────────── */
.heatmap-months {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 0 0 4px;
  font-size: 10px;
  color: var(--ink-3);
}
.heatmap-months span { grid-row: 1; white-space: nowrap; }
.heatmap {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  aspect-ratio: 53 / 7;
  padding: 4px 0;
}
.heat {
  border-radius: 2px;
  background: var(--bg-deep);
}
.heat.ghost { opacity: 0; pointer-events: none; }
.heat.l1 { background: color-mix(in oklch, var(--primary) 22%, var(--bg-deep)); }
.heat.l2 { background: color-mix(in oklch, var(--primary) 45%, var(--bg-deep)); }
.heat.l3 { background: color-mix(in oklch, var(--primary) 70%, var(--bg-deep)); }
.heat.l4 { background: var(--primary); }
.heatmap-legend { display: flex; gap: 4px; align-items: center; font-size: 11px; color: var(--ink-3); margin-top: 8px; }

.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius);
  padding: 20px;
}
.stat-label { font-size: 12px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.stat-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; }
.stat-delta { font-size: 12px; color: var(--good); font-weight: 600; margin-top: 2px; }
.stat-delta.down { color: var(--bad); }

.tag-bar-row {
  display: grid; grid-template-columns: 130px 1fr 70px; gap: 12px; align-items: center;
  font-size: 13px;
  margin-bottom: 10px;
}
.tag-bar { height: 10px; background: var(--bg-deep); border-radius: 999px; overflow: hidden; }
.tag-bar > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.tag-bar-row .pct { font-variant-numeric: tabular-nums; color: var(--ink-3); text-align: right; font-weight: 500; }

/* SVG retention curve container */
.retention-svg { width: 100%; height: 220px; display: block; }

/* ── Settings ──────────────────────────────────────────────────── */
.setting-row {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.setting-row:first-child { border-top: 0; }
.setting-row .lbl { font-weight: 600; font-size: 15px; }
.setting-row .sub { font-size: 13px; color: var(--ink-3); margin-top: 4px; max-width: 56ch; }
.switch {
  width: 44px; height: 26px; border-radius: 999px;
  background: var(--line); position: relative;
  cursor: pointer;
  transition: background 120ms;
}
.switch.on { background: var(--primary); }
.switch i {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 999px;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform 140ms cubic-bezier(.3,.7,.4,1);
}
.switch.on i { transform: translateX(18px); }

/* ── Filter rail ───────────────────────────────────────────────── */
.filter-rail {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--gap-loose);
  align-items: center;
}
.filter-rail .label {
  font-size: 12px; color: var(--ink-3); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-right: 8px;
}

/* ── Util ──────────────────────────────────────────────────────── */
.spacer { flex: 1; }
.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.kbd-inline {
  display: inline-block; min-width: 22px; padding: 2px 6px;
  border-radius: 5px; background: var(--bg-soft);
  border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px;
  text-align: center; color: var(--ink-2);
}

/* Subtle slide-in for screen transitions */
.screen-anim { animation: fadeIn 220ms cubic-bezier(.3,.7,.4,1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Cloze answer chips */
.cloze-options { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.cloze-options .opt {
  padding: 10px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer;
  font-family: var(--font-ko); font-size: 18px; font-weight: 500;
  transition: transform 80ms, background 80ms, border-color 80ms;
}
.cloze-options .opt:hover { background: var(--primary-soft); border-color: var(--primary); transform: translateY(-1px); }
.cloze-options .opt.used { opacity: 0.35; cursor: not-allowed; }

/* Listening visual */
.listen-circle {
  width: 180px; height: 180px; border-radius: 999px;
  margin: 0 auto 22px;
  background: radial-gradient(circle at 35% 35%, var(--surface), var(--primary-soft));
  border: 1px solid var(--line);
  display: grid; place-items: center;
  position: relative;
}
.listen-circle::before, .listen-circle::after {
  content: ""; position: absolute; inset: -12px;
  border: 2px solid var(--primary);
  border-radius: 999px;
  opacity: 0;
  animation: pingRing 2.4s ease-out infinite;
}
.listen-circle::after { animation-delay: 1.2s; }
@keyframes pingRing {
  0% { opacity: 0.4; transform: scale(0.92); }
  100% { opacity: 0; transform: scale(1.18); }
}
.listen-circle .play {
  width: 76px; height: 76px; border-radius: 999px;
  background: var(--primary); color: var(--primary-on);
  display: grid; place-items: center;
  cursor: pointer;
  border: 0;
  box-shadow: 0 8px 24px -8px var(--primary);
}

/* Image association */
.img-slot {
  width: 220px; height: 160px; border-radius: 4px;
  background:
    repeating-linear-gradient(45deg,
      var(--bg-soft) 0 10px,
      var(--bg-deep) 10px 20px);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-3); font-family: var(--font-mono); font-size: 11px;
  margin: 0 auto 24px;
}

/* Speaking visual */
.mic-orb {
  width: 120px; height: 120px; border-radius: 999px;
  background: var(--primary); color: var(--primary-on);
  display: grid; place-items: center;
  margin: 0 auto 24px;
  position: relative;
  cursor: pointer;
  box-shadow: 0 12px 36px -8px var(--primary);
}
.mic-orb .wave {
  position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid var(--primary);
  opacity: 0.5;
  animation: pingRing 1.8s ease-out infinite;
}
.waveform {
  display: flex; align-items: center; gap: 3px; justify-content: center;
  margin: 0 auto 18px;
  height: 32px;
}
.waveform > i {
  display: block; width: 3px; border-radius: 2px;
  background: var(--primary);
  animation: wave 1.2s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { height: 6px; }
  50% { height: 28px; }
}

/* ─────────────────────────────────────────────
   Languages screen
   ───────────────────────────────────────────── */

.lang-switch {
  appearance: none;
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  margin: 14px 0 18px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms, border-color 120ms;
}
.lang-switch:hover {
  background: var(--primary-soft);
  border-color: color-mix(in oklch, var(--primary) 30%, var(--line));
}
.lang-switch-glyph {
  width: 32px; height: 32px;
  background: var(--primary);
  color: var(--primary-on);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  display: grid; place-items: center;
  border-radius: 3px;
  flex-shrink: 0;
}
.lang-switch-glyph.ko { font-family: "Noto Sans KR", var(--font-display); }
.lang-switch-meta { flex: 1; min-width: 0; }
.lang-switch-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.lang-switch-sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 1px;
}

.lang-hero {
  display: flex; gap: 28px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid var(--stripe, var(--primary));
  border-radius: 6px;
  margin-top: var(--pad);
}
.lang-hero-mark {
  position: relative;
  flex-shrink: 0;
}
.lang-glyph {
  width: 120px; height: 120px;
  display: grid; place-items: center;
  background: var(--primary);
  color: var(--primary-on);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  border-radius: 6px;
  letter-spacing: -0.02em;
}
.lang-glyph.ko { font-family: "Noto Sans KR", var(--font-display); font-weight: 900; }
.lang-active-badge {
  position: absolute;
  top: -8px; right: -8px;
  background: var(--accent-a);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
}
.lang-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.lang-native {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-3);
  font-weight: 500;
}
.lang-note {
  font-size: 15px;
  color: var(--ink-2);
  margin: 10px 0 18px;
  max-width: 56ch;
}
.lang-stats {
  display: flex; gap: 36px;
  flex-wrap: wrap;
}
.lang-stat-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.lang-stat-n.emph { color: var(--primary); }
.lang-stat-l {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
  font-weight: 600;
}

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--gap);
}
.section-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  margin: 0;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap);
}
.lang-card {
  appearance: none;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
  cursor: pointer;
  transition: transform 120ms, border-color 120ms, box-shadow 120ms;
  font: inherit;
  color: inherit;
}
.lang-card:hover {
  border-color: color-mix(in oklch, var(--primary) 40%, var(--line));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px color-mix(in oklch, var(--ink) 30%, transparent);
}
.lang-card.add {
  border-style: dashed;
  background: transparent;
  display: flex; flex-direction: column; align-items: flex-start;
}
.lang-card-head {
  display: flex; align-items: center; gap: 14px;
}
.lang-card-mark {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  border-radius: 4px;
  flex-shrink: 0;
}
.lang-card-mark.accent-berry   { background: color-mix(in oklch, var(--accent-d) 22%, var(--surface)); color: var(--accent-d); }
.lang-card-mark.accent-mustard { background: color-mix(in oklch, var(--accent-c) 28%, var(--surface)); color: oklch(50% 0.14 90); }
.lang-card-mark.accent-indigo  { background: color-mix(in oklch, var(--primary) 20%, var(--surface)); color: var(--primary); }
.lang-card-mark.accent-jade    { background: color-mix(in oklch, var(--accent-a) 22%, var(--surface)); color: var(--accent-a); }
.lang-card-mark.accent-primary { background: var(--primary-soft); color: var(--primary); }
.lang-card-meta { flex: 1; min-width: 0; }
.lang-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.lang-card-native {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.lang-card-switch {
  color: var(--ink-3);
}
.lang-card:hover .lang-card-switch { color: var(--primary); }
.lang-card-note {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 14px 0 14px;
  line-height: 1.45;
  min-height: 38px;
}
.lang-card-foot {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
}
.lang-card-foot b { color: var(--ink); font-weight: 700; }
.lang-card-due { color: var(--primary); }
.lang-card-due b { color: var(--primary); }

.csv-note {
  display: flex; gap: 16px;
  margin-top: var(--pad-loose);
  padding: 20px 22px;
  background: var(--primary-soft);
  border-radius: 4px;
  border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--line));
}
.csv-note-icon {
  width: 40px; height: 40px;
  background: var(--primary);
  color: var(--primary-on);
  border-radius: 4px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.csv-note h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}
.kbd {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 3px;
}

/* Add-language modal */
.modal-scrim {
  position: fixed; inset: 0;
  background: color-mix(in oklch, var(--ink) 50%, transparent);
  display: grid; place-items: center;
  z-index: 100;
  animation: fadein 140ms ease-out;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface);
  border-radius: 6px;
  padding: 28px;
  width: min(640px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  overflow: auto;
  box-shadow: 0 30px 60px -20px color-mix(in oklch, var(--ink) 40%, transparent);
}
.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.preset {
  appearance: none;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  font: inherit;
}
.preset:hover {
  background: var(--primary-soft);
  border-color: color-mix(in oklch, var(--primary) 40%, var(--line));
}
.preset.custom { background: transparent; border-style: dashed; }
.preset-glyph {
  width: 40px; height: 40px;
  margin: 0 auto 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  border-radius: 3px;
  color: var(--ink);
}
.preset-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.preset-native {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
}

/* ── Learn screen ─────────────────────────────────────────────── */
.lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.lesson-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lesson-card:hover:not(.disabled) {
  border-color: var(--lesson-accent, var(--primary));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.lesson-card.disabled { opacity: .45; cursor: default; }
.lesson-card-icon {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 8px;
  background: color-mix(in oklch, var(--lesson-accent, var(--primary)) 14%, var(--surface));
  color: var(--lesson-accent, var(--primary));
  display: flex; align-items: center; justify-content: center;
}
.lesson-card-title { font-size: 16px; font-weight: 700; font-family: var(--font-display); }
.lesson-card-desc  { font-size: 13px; color: var(--ink-3); }

/* ── Active lesson shell ──────────────────────────────────────── */
.learn-screen {
  display: flex; flex-direction: column; height: 100vh;
  background: var(--bg-base); overflow: hidden;
}
.learn-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px; flex-shrink: 0;
  border-bottom: 1px solid var(--line);
}
.learn-progress {
  flex: 1; height: 10px; background: var(--bg-soft);
  border-radius: 999px; overflow: hidden;
}
.learn-progress-fill {
  height: 100%; background: var(--primary);
  border-radius: 999px; transition: width .35s ease;
}
.learn-xp {
  font-size: 13px; font-weight: 700;
  color: var(--accent-c); display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.learn-body {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 20px 140px;
}

/* ── Exercise wrapper ─────────────────────────────────────────── */
.exercise {
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column;
  padding-top: 36px; gap: 0;
}
.exercise-eyebrow {
  font-size: 22px; font-weight: 700; font-family: var(--font-display);
  letter-spacing: -.018em; margin-bottom: 22px; text-align: center;
}
.exercise-prompt {
  font-size: 44px; font-weight: 800; line-height: 1.15; text-align: center;
  padding: 24px 20px; background: var(--surface);
  border: 2px solid var(--line); border-radius: 18px;
  margin-bottom: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: border-color .12s;
}
.exercise-prompt:hover { border-color: var(--primary); }
.exercise-prompt.sentence { font-size: 22px; font-weight: 600; line-height: 1.4; }
.ep-hint { opacity: .35; display: flex; align-items: center; }

/* ── Choice grid ──────────────────────────────────────────────── */
.choices-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
}
.choices-grid.one-col { grid-template-columns: 1fr; }
.choice-btn {
  padding: 15px 12px; background: var(--surface);
  border: 2px solid var(--line); border-radius: 12px;
  font-size: 15px; font-weight: 600; font-family: var(--font-body);
  color: var(--ink); cursor: pointer; text-align: center;
  line-height: 1.3; transition: border-color .1s, background .1s;
}
.choice-btn:hover:not(:disabled):not(.dimmed):not(.correct):not(.wrong) {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 6%, var(--surface));
}
.choice-btn.correct { background: color-mix(in oklch, var(--good) 14%, var(--surface)); border-color: var(--good); color: var(--good); }
.choice-btn.wrong   { background: color-mix(in oklch, var(--bad)  14%, var(--surface)); border-color: var(--bad);  color: var(--bad); }
.choice-btn.dimmed  { opacity: .45; }

/* ── Feedback bar ─────────────────────────────────────────────── */
.feedback-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 18px 28px; display: flex; align-items: center; gap: 14px;
  border-top: 2px solid transparent;
  animation: fb-in .18s ease;
}
@keyframes fb-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.feedback-bar.correct { background: color-mix(in oklch, var(--good) 10%, var(--bg-base)); border-color: var(--good); }
.feedback-bar.wrong   { background: color-mix(in oklch, var(--bad)  10%, var(--bg-base)); border-color: var(--bad); }
.feedback-icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.feedback-bar.correct .feedback-icon { background: var(--good); color: #fff; }
.feedback-bar.wrong   .feedback-icon { background: var(--bad);  color: #fff; }
.feedback-body { flex: 1; }
.feedback-verdict { font-size: 15px; font-weight: 700; }
.feedback-bar.correct .feedback-verdict { color: var(--good); }
.feedback-bar.wrong   .feedback-verdict { color: var(--bad); }
.feedback-answer { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.feedback-cta { background: var(--surface); border: 2px solid var(--line); }
.feedback-bar.wrong .feedback-cta { background: var(--bad); border-color: var(--bad); color: #fff; }

/* ── Intro card ───────────────────────────────────────────────── */
.intro-card {
  background: var(--surface); border: 2px solid var(--line);
  border-radius: 20px; padding: 28px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; margin-bottom: 20px;
}
.intro-ko     { font-size: 52px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0; }
.intro-romaji { font-size: 15px; color: var(--ink-3); font-style: italic; }
.intro-rule   { width: 36px; height: 3px; background: var(--primary); border-radius: 999px; margin: 10px 0; }
.intro-en     { font-size: 28px; font-weight: 700; font-family: var(--font-display); }
.intro-pos    { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.intro-example {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line); width: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px;
}
.learn-audio-btn {
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: color-mix(in oklch, var(--primary) 12%, var(--surface));
  color: var(--primary); display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.learn-audio-btn:hover { background: color-mix(in oklch, var(--primary) 22%, var(--surface)); }

/* ── Speak circle ─────────────────────────────────────────────── */
.speak-circle {
  width: 96px; height: 96px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 8px auto 0; flex-shrink: 0;
  box-shadow: 0 4px 20px color-mix(in oklch, var(--primary) 38%, transparent);
  transition: transform .1s, box-shadow .1s;
}
.speak-circle:hover { transform: scale(1.05); }
.speak-circle.listening {
  background: var(--bad);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--bad) 50%, transparent);
  animation: mic-pulse 1.1s infinite;
}
@keyframes mic-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in oklch, var(--bad) 45%, transparent); }
  70%  { box-shadow: 0 0 0 18px transparent; }
  100% { box-shadow: 0 0 0 0   transparent; }
}
.speak-result {
  text-align: center; padding: 20px; background: var(--surface);
  border-radius: 14px; border: 2px solid var(--line); margin: 16px 0;
}

/* ── Lesson complete ──────────────────────────────────────────── */
.learn-screen.complete { justify-content: center; align-items: center; }
.complete-wrap { text-align: center; max-width: 400px; padding: 32px 24px; width: 100%; }
.complete-stars { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }
.complete-star  { color: var(--line-2); transition: color .3s, transform .3s; }
.complete-star.on { color: var(--accent-c); transform: scale(1.15); }
.complete-title    { font-size: 34px; font-weight: 800; font-family: var(--font-display); letter-spacing: -.02em; margin: 0 0 6px; }
.complete-subtitle { font-size: 15px; color: var(--ink-3); margin-bottom: 28px; }
.complete-stats {
  display: flex; gap: 0; justify-content: center;
  background: var(--surface); border-radius: 16px; border: 2px solid var(--line);
  overflow: hidden;
}
.cstat { flex: 1; padding: 20px 16px; text-align: center; }
.cstat + .cstat { border-left: 1px solid var(--line); }
.cstat-n { font-size: 28px; font-weight: 800; font-family: var(--font-display); }
.cstat-l { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* ── Import modals ────────────────────────────────────────────── */
.apkg-drop {
  border: 2px dashed var(--line-2);
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  color: var(--ink-3);
  transition: border-color .15s, background .15s;
  margin-bottom: 20px;
}
.apkg-drop:hover {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 4%, var(--surface));
  color: var(--ink);
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ── Learn rows ─────────────────────────────────────────────────── */
.learn-rows-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 48px;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 0 80px;
}
.learn-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; width: 100%;
}
.learn-row-label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
}
.learn-row-nodes {
  display: flex; align-items: center; flex-wrap: wrap;
  justify-content: center;
  gap: 24px 28px;
}
.learn-sq {
  width: 92px; height: 92px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; color: rgba(255,255,255,.92);
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  transition: transform .12s cubic-bezier(.3,.7,.4,1), box-shadow .12s;
  flex-shrink: 0;
}
.learn-sq:hover:not(.learn-sq-disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.learn-sq:active:not(.learn-sq-disabled) { transform: translateY(1px); }
.learn-sq-disabled { opacity: 0.35; filter: grayscale(0.5); cursor: default; }