/* learnfromx — lavender SRS design system.
 *
 * Aesthetic: pale lavender field, white panels, purple/gold/green accents.
 * Cormorant Garamond for display + UI, Noto Sans JP for Japanese.
 * Soft atmospheric blurs, subtle tile textures, garden-metaphor SRS states.
 *
 * Based on the React prototype (srs-lav-*.jsx).
 * Used across all SRS pages: home, calibrate, study, episode_picker, auth.
 * marketing.html keeps anime-noir (srs.css).
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
  /* Atmosphere */
  --lav-bg: #eeE8f9;
  --lav-bg-deep: #e4dcf3;
  --lav-panel: #ffffff;
  --lav-panel-soft: #faf8ff;
  --lav-hairline: rgba(90,63,192,0.12);
  --lav-hairline-soft: rgba(90,63,192,0.06);

  /* Ink */
  --lav-ink: #2a2440;
  --lav-ink-soft: #5b5575;
  --lav-ink-muted: #8d87a4;

  /* Accents */
  --lav-purple: #5a3fc0;
  --lav-purple-soft: #8c74e0;
  --lav-purple-tint: #ede7fb;
  --lav-gold: #d4a64a;
  --lav-gold-soft: #f0c969;
  --lav-gold-tint: #fbf4dc;
  --lav-green: #3e9963;
  --lav-green-soft: #7bc8a3;
  --lav-green-tint: #dff1e3;
  --lav-rust: #d97a4a;
  --lav-rust-tint: #fde6d6;
  --lav-reading: #1aa386;

  /* Card states */
  --lav-hidden: #e2dbf0;
  --lav-hidden-edge: rgba(90,63,192,0.10);
  --lav-due: #ffffff;
  --lav-due-edge: #d4a64a;
  --lav-due-glow: rgba(212,166,74,0.45);
  --lav-learning: #fbf4dc;
  --lav-learning-edge: #e8b864;
  --lav-young: #dff1e3;
  --lav-young-edge: #7bc8a3;
  --lav-mature: #bee8cd;
  --lav-mature-edge: #3e9963;
  --lav-mature-glow: rgba(62,153,99,0.35);
  --lav-lapsed: #fde6d6;
  --lav-lapsed-edge: #d97a4a;

  /* Typography */
  --lav-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --lav-ui: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --lav-jp: 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', system-ui, sans-serif;

  /* Rating colors */
  --lav-rate-again: #e25555;
  --lav-rate-hard: #e89a3a;
  --lav-rate-good: #4caa6e;
  --lav-rate-easy: #5a73d8;
}

/* --- Reset / base --------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.lav {
  background: var(--lav-bg);
  color: var(--lav-ink);
  font-family: var(--lav-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

body.lav::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Shared layout -------------------------------------------------- */

.lav-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 96px;
  position: relative;
}

.lav-shell--wide {
  max-width: 1140px;
}

.lav-shell--narrow {
  max-width: 480px;
}

/* --- Atmospheric orbs ----------------------------------------------- */

.lav-atmo {
  position: fixed;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.lav-atmo--1 {
  top: -160px; right: -100px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(170,140,230,0.50) 0%, rgba(170,140,230,0) 70%);
  animation: lavDrift1 28s ease-in-out infinite;
}

.lav-atmo--2 {
  top: 40%; left: -180px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(212,166,74,0.20) 0%, rgba(212,166,74,0) 70%);
  animation: lavDrift2 36s ease-in-out infinite;
}

.lav-atmo--3 {
  bottom: -200px; right: 20%;
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(130,106,214,0.25) 0%, rgba(130,106,214,0) 70%);
  animation: lavDrift3 32s ease-in-out infinite;
}

/* --- Typography ----------------------------------------------------- */

.lav-eyebrow {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 12px;
  color: var(--lav-purple);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 600;
}

.lav-title {
  font-family: var(--lav-display);
  font-size: 38px;
  font-weight: 500;
  color: var(--lav-ink);
  letter-spacing: -0.5px;
  line-height: 1.05;
  font-style: italic;
}

.lav-title--sm {
  font-size: 24px;
  letter-spacing: -0.2px;
}

.lav-subtitle {
  font-size: 12px;
  color: var(--lav-ink-soft);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.lav-section-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--lav-ink-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.lav-jp {
  font-family: var(--lav-jp);
}

.lav-display {
  font-family: var(--lav-display);
}

/* --- Panels / Cards ------------------------------------------------- */

.lav-panel {
  background: var(--lav-panel);
  border: 1px solid var(--lav-hairline);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 1px 2px rgba(40,30,80,0.04),
    0 4px 12px rgba(40,30,80,0.04),
    0 12px 32px rgba(40,30,80,0.06);
}

.lav-panel--ghost {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --- Chips (stat badges) -------------------------------------------- */

.lav-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--lav-hairline);
  font-size: 11px;
  font-weight: 700;
  color: var(--lav-ink-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(40,30,80,0.04);
}

.lav-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.lav-chip__value {
  color: var(--lav-ink);
  font-variant-numeric: tabular-nums;
}

.lav-chip__label {
  color: var(--lav-ink-muted);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.lav-chip__dot--mature     { background: var(--lav-mature); }
.lav-chip__dot--young      { background: var(--lav-young); }
.lav-chip__dot--learning   { background: var(--lav-learning); }
.lav-chip__dot--due        { background: var(--lav-due); border: 1px solid var(--lav-due-edge); }
.lav-chip__dot--lapsed     { background: var(--lav-lapsed); }
.lav-chip__dot--calibrated    { background: transparent; border: 1px solid rgba(62,153,99,0.35); }
.lav-chip__dot--assumed_known { background: var(--lav-hidden); opacity: 0.35; }
.lav-chip__dot--unseen        { background: var(--lav-hidden); }

/* --- Grid tiles (card state squares) -------------------------------- */

.lav-grid {
  display: grid;
  gap: 3px;
}

.lav-grid--10 { grid-template-columns: repeat(10, 1fr); }
.lav-grid--8  { grid-template-columns: repeat(8, 1fr); }
.lav-grid--6  { grid-template-columns: repeat(6, 1fr); }
.lav-grid--14 { grid-template-columns: repeat(14, 1fr); gap: 3px; }
.lav-grid--20 { grid-template-columns: repeat(20, 1fr); gap: 4px; }

.lav-tile {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease, background 0.4s ease, transform 0.18s ease, border-color 0.3s ease;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--lav-hidden-edge);
  background: var(--lav-hidden);
}

.lav-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(40,30,80,0.10);
}

.lav-tile--unseen        { background: var(--lav-hidden); border-color: var(--lav-hidden-edge); }
.lav-tile--assumed_known { background: var(--lav-hidden); border-color: var(--lav-hidden-edge); opacity: 0.25; }
.lav-tile--calibrated    { background: transparent; border: 1px solid rgba(62,153,99,0.35); opacity: 0.4; }
.lav-tile--hidden   { background: var(--lav-hidden); border-color: var(--lav-hidden-edge); cursor: pointer; }
.lav-tile--due      { background: var(--lav-due); border-color: rgba(212,166,74,0.53); cursor: pointer;
                       animation: lavPulse 2.4s ease-in-out infinite;
                       box-shadow: 0 1px 4px rgba(212,166,74,0.18); }
.lav-tile--learning { background: var(--lav-learning); border-color: rgba(232,184,100,0.53);
                       box-shadow: 0 1px 3px rgba(232,184,100,0.12); }
.lav-tile--young    { background: var(--lav-young); border-color: rgba(123,200,163,0.53);
                       box-shadow: 0 1px 3px rgba(123,200,163,0.14); }
.lav-tile--mature   { background: var(--lav-mature); border-color: rgba(62,153,99,0.53);
                       box-shadow: 0 0 0 1px rgba(62,153,99,0.35), 0 0 14px -2px var(--lav-mature-glow); }
.lav-tile--lapsed   { background: var(--lav-lapsed); border-color: rgba(217,122,74,0.53);
                       box-shadow: 0 1px 3px rgba(217,122,74,0.12); }

.lav-tile--current  { box-shadow: 0 0 0 2px var(--lav-gold), 0 0 18px -2px var(--lav-due-glow); }
.lav-tile--focused  { box-shadow: 0 0 0 1.5px var(--lav-gold); }

.lav-tile__kanji {
  font-family: var(--lav-jp);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--lav-ink);
}

/* --- Buttons -------------------------------------------------------- */

.lav-btn {
  padding: 14px 22px;
  border-radius: 14px;
  border: none;
  font-family: var(--lav-ui);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.18s cubic-bezier(.2,.8,.3,1), box-shadow 0.18s ease;
}

.lav-btn:active { transform: translateY(1px) scale(0.98); }

.lav-btn--primary {
  background: linear-gradient(135deg, #6a4dd4 0%, var(--lav-purple) 50%, #4e32a8 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 8px 22px rgba(90,63,192,0.33);
}

.lav-btn--primary:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 14px 36px rgba(90,63,192,0.45);
  transform: translateY(-1px);
}

.lav-btn--ghost {
  background: rgba(255,255,255,0.70);
  border: 1px solid var(--lav-hairline);
  color: var(--lav-ink-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 10px;
}

.lav-btn--ghost:hover {
  background: rgba(255,255,255,0.85);
  border-color: var(--lav-purple-soft);
  color: var(--lav-purple);
}

.lav-btn--full {
  width: 100%;
  justify-content: space-between;
  padding-left: 18px;
  padding-right: 14px;
}

.lav-btn__badge {
  background: rgba(255,255,255,0.22);
  border-radius: 9999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
}

/* --- Rating buttons ------------------------------------------------- */

.lav-ratings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  animation: lavRatingsIn 0.28s cubic-bezier(.2,.8,.3,1);
}

.lav-rate-btn {
  padding: 12px 6px;
  background: #fff;
  border-radius: 12px;
  font-family: var(--lav-ui);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform 0.18s cubic-bezier(.2,.8,.3,1), box-shadow 0.18s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,0.02);
}

.lav-rate-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(40,30,80,0.10); }
.lav-rate-btn:active { transform: translateY(0) scale(0.97); }

.lav-rate-btn--again { color: var(--lav-rate-again); border: 1px solid rgba(226,85,85,0.33); border-bottom: 3px solid var(--lav-rate-again); }
.lav-rate-btn--hard  { color: var(--lav-rate-hard);  border: 1px solid rgba(232,154,58,0.33); border-bottom: 3px solid var(--lav-rate-hard); }
.lav-rate-btn--good  { color: var(--lav-rate-good);  border: 1px solid rgba(76,170,110,0.33); border-bottom: 3px solid var(--lav-rate-good); }
.lav-rate-btn--easy  { color: var(--lav-rate-easy);  border: 1px solid rgba(90,115,216,0.33); border-bottom: 3px solid var(--lav-rate-easy); }

.lav-rate-btn__hint {
  font-size: 10px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lav-rate-btn__key {
  border-radius: 3px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 800;
}

.lav-rate-btn--again .lav-rate-btn__key { background: rgba(226,85,85,0.07); color: var(--lav-rate-again); }
.lav-rate-btn--hard  .lav-rate-btn__key { background: rgba(232,154,58,0.07); color: var(--lav-rate-hard); }
.lav-rate-btn--good  .lav-rate-btn__key { background: rgba(76,170,110,0.07); color: var(--lav-rate-good); }
.lav-rate-btn--easy  .lav-rate-btn__key { background: rgba(90,115,216,0.07); color: var(--lav-rate-easy); }

/* --- Review card ---------------------------------------------------- */

.lav-review-card {
  width: 100%;
  max-width: 640px;
  background: #ffffff;
  border: 1px solid var(--lav-hairline);
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 -1px 0 rgba(90,63,192,0.03) inset,
    0 4px 12px rgba(40,30,80,0.05),
    0 16px 48px rgba(40,30,80,0.08),
    0 32px 72px rgba(40,30,80,0.06);
  position: relative;
  transition: min-height 0.3s, padding 0.3s;
  animation: lavCardIn 0.32s cubic-bezier(.2,.8,.3,1);
}

.lav-review-card--front {
  padding: 52px 40px;
  min-height: 280px;
}

.lav-review-card--back {
  padding: 32px 36px 28px;
  min-height: 360px;
}

/* Card front — kanji mode */
.lav-front-kanji {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 28px;
  min-height: 200px;
  cursor: pointer;
}

.lav-front-kanji__sentence {
  font-family: var(--lav-jp);
  font-size: 17px;
  color: var(--lav-ink-soft);
  line-height: 1.5;
  max-width: 540px;
  text-wrap: pretty;
}

.lav-front-kanji__word {
  font-family: var(--lav-jp);
  font-size: 96px;
  line-height: 1;
  color: var(--lav-ink);
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (max-width: 600px) {
  .lav-front-kanji__word { font-size: 64px; }
}

/* Card front — audio mode */
.lav-front-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 200px;
  cursor: pointer;
}

.lav-front-audio__play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--lav-purple);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(90,63,192,0.33);
  transition: transform 0.15s;
}

.lav-front-audio__play:active { transform: scale(0.94); }

/* Card back */
.lav-back {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lav-back__header {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}

.lav-back__kanji {
  font-family: var(--lav-jp);
  font-size: 64px;
  line-height: 1;
  font-weight: 600;
  color: var(--lav-ink);
  letter-spacing: -0.02em;
}

.lav-back__reading {
  font-family: var(--lav-jp);
  font-size: 26px;
  color: var(--lav-green);
  font-weight: 600;
}

.lav-back__meaning {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--lav-ink);
}

.lav-back__also {
  font-size: 11px;
  font-weight: 700;
  color: var(--lav-ink-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.lav-back__also span {
  color: var(--lav-ink-soft);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  margin-left: 4px;
  font-size: 13px;
}

.lav-back__divider {
  border: none;
  border-top: 1px solid var(--lav-hairline-soft);
  margin: 6px 0 4px;
}

.lav-back__sentence {
  font-family: var(--lav-jp);
  font-size: 17px;
  line-height: 1.55;
  color: var(--lav-ink);
}

.lav-back__translation {
  font-size: 14px;
  font-style: italic;
  color: var(--lav-ink-soft);
  line-height: 1.4;
}

.lav-back__breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: baseline;
}

.lav-back__bk-jp {
  font-family: var(--lav-jp);
  font-weight: 600;
  color: var(--lav-purple);
  font-size: 14px;
}

.lav-back__bk-en {
  font-size: 12px;
  font-style: italic;
  color: var(--lav-ink-soft);
}

.lav-back__bk-sep {
  color: var(--lav-ink-muted);
  font-size: 11px;
}

/* "from Show · Ep N" label */
.lav-back__origin {
  font-size: 11px;
  color: var(--lav-ink-muted);
  font-style: italic;
  font-family: var(--lav-display);
  margin-top: 4px;
}

/* Furigana */
.lav-furi {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lav-furi__reading {
  font-size: 10px;
  color: var(--lav-reading);
  font-family: var(--lav-jp);
  line-height: 1;
  margin-bottom: 1px;
}

.lav-furi__base {
  font-family: var(--lav-jp);
  line-height: 1.2;
}

/* --- Progress dots (review session) --------------------------------- */

.lav-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  max-width: 480px;
}

.lav-progress__dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--lav-hairline);
  transition: all 0.3s;
}

.lav-progress__dot--done { background: var(--lav-purple); }
.lav-progress__dot--current { width: 18px; background: var(--lav-gold); }

/* --- Legend (tile state key) ---------------------------------------- */

.lav-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 10px;
  color: var(--lav-ink-muted);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.lav-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lav-legend__swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

/* --- Chapter row (dashboard) ---------------------------------------- */

.lav-chapter {
  margin-top: 28px;
}

.lav-chapter:first-child { margin-top: 0; }

.lav-chapter__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
  padding: 0 4px;
}

.lav-chapter__title {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 16px;
  color: var(--lav-ink-soft);
  font-weight: 500;
  letter-spacing: 0.1px;
  flex-shrink: 0;
}

.lav-chapter__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--lav-hairline), transparent);
}

.lav-chapter__stats {
  font-size: 10px;
  color: var(--lav-ink-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- Cell drawer (click-to-expand detail below grid row) ------------ */

.lav-drawer {
  grid-column: 1 / -1;
  background: linear-gradient(145deg, #ffffff 0%, var(--lav-panel-soft) 100%);
  border: 1px solid rgba(90,63,192,0.18);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 0 0 3px rgba(90,63,192,0.06),
    0 8px 24px rgba(140,116,224,0.12),
    0 20px 48px rgba(140,116,224,0.08);
  padding: 22px 28px 20px;
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 28px;
  animation: lavPanelIn 0.32s cubic-bezier(.2,.8,.3,1);
  position: relative;
}

.lav-drawer__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--lav-ink-muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.lav-drawer__stat {
  padding: 10px 12px;
  background: rgba(238,231,250,0.45);
  border: 1px solid var(--lav-hairline-soft);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(40,30,80,0.03);
}

.lav-drawer__stat-value {
  font-family: var(--lav-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--lav-ink);
  font-variant-numeric: tabular-nums;
  font-style: italic;
  line-height: 1;
  margin-top: 2px;
}

/* --- Session summary (post-review overlay) -------------------------- */

.lav-summary {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212,166,74,0.33);
  border-radius: 20px;
  padding: 18px 28px;
  box-shadow: 0 0 0 4px var(--lav-due-glow), 0 18px 60px rgba(40,30,80,0.18);
  text-align: center;
  pointer-events: none;
  animation: lavSummaryIn 0.45s cubic-bezier(.2,.8,.3,1);
}

/* --- Study sheet (mobile swipe-up) ---------------------------------- */

.lav-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(40,30,60,0.40);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.lav-sheet {
  height: 90%;
  background: var(--lav-bg);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -2px 0 var(--lav-hairline), 0 -20px 60px rgba(40,30,80,0.18);
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  animation: lavSheetUp 0.3s cubic-bezier(.2,.8,.3,1);
}

.lav-sheet__handle {
  width: 38px;
  height: 4px;
  background: var(--lav-ink-muted);
  opacity: 0.4;
  border-radius: 2px;
  align-self: center;
  margin-bottom: 8px;
}

/* --- Auth forms ----------------------------------------------------- */

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

.lav-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 22px;
  position: relative;
  z-index: 2;
}

.lav-auth__card {
  max-width: 380px;
  width: 100%;
  background: var(--lav-panel);
  border: 1px solid var(--lav-hairline);
  border-radius: 14px;
  padding: 40px 36px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 1px 2px rgba(40,30,80,0.04),
    0 8px 24px rgba(40,30,80,0.06),
    0 20px 48px rgba(40,30,80,0.08);
  animation: lavAuthFadeUp 0.5s cubic-bezier(.2,.8,.3,1) both;
}

.lav-auth__brand {
  text-align: center;
  margin-bottom: 4px;
}

.lav-auth__brand a {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--lav-ink-muted);
  text-decoration: none;
}

.lav-auth__title {
  font-family: var(--lav-display);
  font-size: 28px;
  font-weight: 500;
  font-style: italic;
  color: var(--lav-ink);
  margin: 0 0 4px;
}

.lav-auth__subtitle {
  font-size: 13px;
  color: var(--lav-ink-muted);
  margin: 0 0 24px;
}

.lav-auth__field {
  margin-bottom: 16px;
}

.lav-auth__label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--lav-ink-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.lav-auth__input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(90,63,192,0.12);
  border-radius: 8px;
  font-family: var(--lav-ui);
  font-size: 15px;
  color: var(--lav-ink);
  background: rgba(247,244,255,0.6);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.lav-auth__input:focus {
  outline: none;
  border-color: var(--lav-purple);
  box-shadow: 0 0 0 4px rgba(138,99,239,0.12);
  background: #fff;
}

.lav-auth__error {
  background: var(--lav-rust-tint);
  border: 1px solid var(--lav-lapsed-edge);
  color: #6a1f00;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.lav-auth__submit {
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6a4dd4 0%, var(--lav-purple) 50%, #4e32a8 100%);
  color: #fff;
  border: none;
  font-family: var(--lav-ui);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 8px 22px rgba(90,63,192,0.33);
  transition: transform 0.18s cubic-bezier(.2,.8,.3,1), box-shadow 0.18s ease;
}

.lav-auth__submit:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 14px 36px rgba(90,63,192,0.45);
  transform: translateY(-1px);
}
.lav-auth__submit:active { transform: translateY(1px) scale(0.98); }

.lav-auth__links {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--lav-ink-muted);
}

.lav-auth__links a {
  color: var(--lav-purple);
  text-decoration: none;
  font-weight: 700;
}

.lav-auth__links a:hover { text-decoration: underline; }

/* --- Home page ----------------------------------------------------- */

/* Shell: 2-col grid on desktop, single-col on mobile */
.lav-home-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 40px 80px;
  position: relative;
  z-index: 2;
}

/* Sidebar */
.lav-home-side {
  position: sticky;
  top: 36px;
  align-self: start;
  padding: 24px 26px;
  background: var(--lav-panel);
  border: 1px solid var(--lav-hairline);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 6px 18px rgba(40,30,80,0.04);
}

.lav-home-side__brand {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 17px;
  color: var(--lav-purple);
  text-decoration: none;
  margin-bottom: 18px;
  display: block;
}

.lav-home-side__greet {
  font-family: var(--lav-display);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--lav-ink);
  margin: 0 0 4px;
}

.lav-home-side__greet em { color: var(--lav-purple); }

.lav-home-side__greet-sub {
  font-family: var(--lav-ui);
  font-size: 12px;
  color: var(--lav-ink-soft);
  margin: 0 0 22px;
}

/* Hero CTA in sidebar */
.lav-home-hero {
  display: block;
  padding: 18px 22px;
  background: linear-gradient(135deg, #7d5de8 0%, #5a3fc0 50%, #4527a0 100%);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 32px rgba(90,63,192,0.34);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}

.lav-home-hero::before {
  content: '';
  position: absolute; top: -36px; right: -36px;
  width: 130px; height: 130px;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
  pointer-events: none;
}

.lav-home-hero:hover { transform: translateY(-2px); }

.lav-home-hero__main {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 4px;
}

.lav-home-hero__sub {
  font-family: var(--lav-ui);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}

.lav-home-hero__cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--lav-ui);
  font-weight: 800;
  font-size: 12px;
  color: #fff;
}

/* "All caught up" sidebar state */
.lav-home-caught {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(178,223,160,0.30), rgba(178,223,160,0.14));
  border: 1px solid rgba(110,162,90,0.24);
  border-radius: 8px;
  margin-bottom: 4px;
}

.lav-home-caught__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  display: grid; place-items: center;
  color: var(--lav-green);
  flex-shrink: 0;
}

.lav-home-caught__main { font-family: var(--lav-ui); font-weight: 800; font-size: 13px; color: #2e6f30; }
.lav-home-caught__sub { font-family: var(--lav-ui); font-size: 11px; font-weight: 600; color: rgba(46,111,48,0.7); }

/* Stats section in sidebar */
.lav-home-stats {
  margin-top: 22px;
  padding: 16px 0 0;
  border-top: 1px solid var(--lav-hairline);
}

.lav-home-stats__h {
  font-family: var(--lav-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--lav-ink-muted);
  margin-bottom: 12px;
}

.lav-home-stats__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.lav-home-stats__label {
  font-family: var(--lav-ui);
  font-size: 12px;
  color: var(--lav-ink-soft);
}

.lav-home-stats__value {
  font-family: var(--lav-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--lav-ink);
  font-variant-numeric: tabular-nums;
}

.lav-home-side__logout {
  display: block;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--lav-hairline);
  font-family: var(--lav-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--lav-ink-muted);
  text-decoration: none;
}

.lav-home-side__logout:hover { color: var(--lav-purple); }

/* Main content area */
.lav-home-main { min-width: 0; }

/* Section (per-mode) */
.lav-home-section { margin-bottom: 36px; }
.lav-home-section:first-child { margin-top: 4px; }

.lav-home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lav-hairline);
}

.lav-home-section__title {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 30px;
  color: var(--lav-ink);
  letter-spacing: -0.01em;
}

.lav-home-section__count {
  font-family: var(--lav-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--lav-ink-muted);
}

/* Show cards grid — 2-col desktop, 1-col mobile */
.lav-home-shows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lav-home-show {
  padding: 16px 18px;
  background: var(--lav-panel);
  border: 1px solid var(--lav-hairline);
  border-radius: 8px;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lav-home-show:hover {
  border-color: rgba(138,99,239,0.38);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 22px rgba(40,30,80,0.06);
  transform: translateY(-2px);
}

.lav-home-show__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lav-home-show__info {
  flex: 1;
  min-width: 0;
}

.lav-home-show__title {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 22px;
  color: var(--lav-ink);
  line-height: 1;
  letter-spacing: -0.005em;
  display: block;
  text-decoration: none;
}

.lav-home-show__title:hover { color: var(--lav-purple); }

.lav-home-show__meta {
  font-size: 11px;
  color: var(--lav-ink-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: block;
  margin-top: 2px;
}

.lav-home-show__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.lav-home-show__grid-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--lav-hairline);
  background: transparent;
  color: var(--lav-ink-muted);
  text-decoration: none;
  transition: all 0.2s;
}

.lav-home-show__grid-btn:hover {
  border-color: var(--lav-purple-soft);
  color: var(--lav-purple);
  background: var(--lav-purple-tint);
}

.lav-home-show__learn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--lav-purple);
  background: transparent;
  color: var(--lav-purple);
  font-family: var(--lav-ui);
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.lav-home-show__learn:hover:not(:disabled) {
  background: var(--lav-purple);
  color: #fff;
}

.lav-home-show__learn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.lav-home-show__learn-label {
  padding: 7px 14px;
  font-family: var(--lav-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--lav-ink-muted);
  white-space: nowrap;
}

/* Study bar (inline in section, above show grid) */
.lav-study-bar {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}

.lav-study-done {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(178,223,160,0.30), rgba(178,223,160,0.14));
  border: 1px solid rgba(110,162,90,0.24);
  border-radius: 8px;
  color: var(--lav-green);
  font-weight: 800;
  font-size: 13px;
}

.lav-study-done svg { flex-shrink: 0; }

/* Review CTA */
.lav-review-cta {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  filter: drop-shadow(0 8px 24px rgba(90,63,192,0.30));
}

/* Add show button */
.lav-add-show {
  display: block;
  text-align: center;
  padding: 16px;
  background: rgba(247,244,255,0.4);
  border: 1.5px dashed var(--lav-hairline);
  border-radius: 8px;
  color: var(--lav-ink-soft);
  text-decoration: none;
  font-family: var(--lav-ui);
  font-weight: 700;
  font-size: 13px;
  transition: all 0.18s ease;
}

.lav-add-show:hover {
  border-color: var(--lav-purple);
  color: var(--lav-purple);
}

/* Empty state */
.lav-empty {
  text-align: center;
  padding: 60px 20px;
}

.lav-empty__title {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 28px;
  color: var(--lav-ink);
  margin-bottom: 8px;
}

.lav-empty__sub {
  font-size: 14px;
  color: var(--lav-ink-soft);
  margin-bottom: 24px;
}

/* Responsive: mobile */
@media (max-width: 900px) {
  .lav-home-shell { grid-template-columns: 1fr; gap: 32px; padding: 22px 24px 80px; }
  .lav-home-side { position: static; }
  .lav-home-shows { grid-template-columns: 1fr; }
}

/* --- Calibration ---------------------------------------------------- */

.lav-cal {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 40px 80px;
  position: relative;
  z-index: 2;
}

.lav-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}

.lav-cal__brand {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 17px;
  color: var(--lav-purple);
  text-decoration: none;
}

.lav-cal__progress { display: flex; gap: 5px; width: 200px; }
.lav-cal__progress-seg { flex: 1; height: 3px; background: rgba(138,99,239,0.14); border-radius: 2px; }
.lav-cal__progress-seg--done { background: var(--lav-purple); }

.lav-cal__title {
  font-family: var(--lav-display);
  font-style: italic;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--lav-ink);
  margin: 0 0 8px;
}

.lav-cal__sub {
  font-family: var(--lav-ui);
  font-size: 16px;
  color: var(--lav-ink-soft);
  margin: 0 0 36px;
}

.lav-cal__card {
  /* cards (test, swipe, done) share the panel treatment */
  background: var(--lav-panel);
  border: 1px solid var(--lav-hairline);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 1px 2px rgba(40,30,80,0.04),
    0 8px 24px rgba(40,30,80,0.06),
    0 20px 48px rgba(40,30,80,0.08);
}

.lav-cal__modes {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: var(--lav-panel);
  border: 1px solid var(--lav-hairline);
  border-radius: 999px;
  margin-bottom: 28px;
}

.lav-cal__mode {
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-family: var(--lav-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--lav-ink-soft);
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lav-cal__mode--active,
.lav-cal__mode.is-active {
  background: var(--lav-purple);
  color: #fff;
}

.lav-cal__mode-status {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}
.lav-cal__mode--active .lav-cal__mode-status,
.lav-cal__mode.is-active .lav-cal__mode-status { background: rgba(255,255,255,0.22); }
.lav-cal__mode:not(.lav-cal__mode--active):not(.is-active) .lav-cal__mode-status--todo {
  background: rgba(40,30,80,0.06);
  color: var(--lav-ink-muted);
}
.lav-cal__mode:not(.lav-cal__mode--active):not(.is-active) .lav-cal__mode-status--done {
  background: rgba(76,175,80,0.16);
  color: var(--lav-green);
}

.lav-cal__levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lav-cal__level {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: var(--lav-panel);
  border: 1.5px solid var(--lav-hairline);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  font-family: inherit;
}

.lav-cal__level:hover {
  border-color: var(--lav-purple);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 10px 24px rgba(40,30,80,0.06);
}

.lav-cal__level-badge {
  font-family: var(--lav-display);
  font-style: italic;
  font-weight: 600;
  font-size: 30px;
  color: var(--lav-purple);
  line-height: 1;
  text-align: center;
}

.lav-cal__level-name {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 18px;
  color: var(--lav-ink);
  line-height: 1.1;
  margin-bottom: 4px;
}

.lav-cal__level-hint {
  font-family: var(--lav-jp);
  font-size: 12px;
  color: var(--lav-ink-soft);
  letter-spacing: 0.02em;
}

.lav-cal__level-arrow {
  color: var(--lav-purple);
  transition: transform 0.18s ease;
}
.lav-cal__level:hover .lav-cal__level-arrow { transform: translateX(3px); }

.lav-cal__foot {
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lav-cal__foot-note {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 13px;
  color: var(--lav-ink-muted);
}

.lav-cal__test-link {
  background: none;
  border: none;
  color: var(--lav-purple);
  font-family: var(--lav-ui);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.lav-cal__test-link:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .lav-cal { padding: 32px 24px 60px; }
  .lav-cal__title { font-size: 36px; }
  .lav-cal__levels { grid-template-columns: 1fr; }
  .lav-cal__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Calibration test (swipe card) */
.lav-cal__test {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lav-cal__test--active { display: flex; }

.lav-cal__swipe-card {
  width: 100%;
  max-width: 340px;
  background: var(--lav-panel);
  border: 1px solid var(--lav-hairline);
  border-radius: 18px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(40,30,80,0.08);
  animation: lavCardIn 0.32s cubic-bezier(.2,.8,.3,1);
}

.lav-cal__swipe-word {
  font-family: var(--lav-jp);
  font-size: 48px;
  font-weight: 600;
  color: var(--lav-ink);
  margin-bottom: 8px;
}

.lav-cal__swipe-reading {
  font-family: var(--lav-jp);
  font-size: 18px;
  color: var(--lav-reading);
  font-weight: 500;
  margin-bottom: 12px;
}

.lav-cal__swipe-meaning {
  font-size: 16px;
  color: var(--lav-ink-soft);
  font-weight: 600;
}

.lav-cal__swipe-btns {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 340px;
}

.lav-cal__swipe-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: none;
  font-family: var(--lav-ui);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

.lav-cal__swipe-btn--no {
  background: var(--lav-rust-tint);
  color: var(--lav-rust);
  border: 1px solid rgba(217,122,74,0.33);
}

.lav-cal__swipe-btn--yes {
  background: var(--lav-green-tint);
  color: var(--lav-green);
  border: 1px solid rgba(62,153,99,0.33);
}

/* --- Animations ----------------------------------------------------- */

@keyframes lavPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(212,166,74,0.4), 0 0 0px -2px var(--lav-due-glow); }
  50%      { box-shadow: 0 0 0 1.5px var(--lav-due-edge), 0 0 14px -2px var(--lav-due-glow); }
}

@keyframes lavSway {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

@keyframes lavSheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes lavDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-20px, 30px) scale(1.03); }
  66%      { transform: translate(-35px, 15px) scale(0.98); }
}

@keyframes lavDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(30px, -25px) scale(1.02); }
  70%      { transform: translate(15px, -10px) scale(0.97); }
}

@keyframes lavDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35%      { transform: translate(-40px, -15px) scale(1.04); }
  65%      { transform: translate(-20px, -25px) scale(0.98); }
}

@keyframes lavCardIn {
  0%   { opacity: 0; transform: translateY(8px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lavRatingsIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes lavPanelIn {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes lavSummaryIn {
  0%   { opacity: 0; transform: translate(-50%, -45%) scale(0.94); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes lavStudyPop {
  0%   { transform: scale(0.96); opacity: 0.7; }
  40%  { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Responsive ----------------------------------------------------- */

@media (max-width: 600px) {
  .lav-shell { padding: 16px 14px 96px; }
  .lav-title { font-size: 28px; }
  .lav-review-card--front { padding: 32px 24px; }
  .lav-review-card--back { padding: 24px 20px 20px; }
  .lav-back__kanji { font-size: 48px; }
  .lav-back__reading { font-size: 22px; }
  .lav-back__meaning { font-size: 18px; }
  .lav-drawer { grid-template-columns: 1fr; gap: 16px; }
  .lav-ratings { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .lav-rate-btn { font-size: 13px; padding: 10px 4px; }
}

/* ── Word furigana (ruby) ───────────────────────────── */
.pb-furigana, .pa-furigana {
  font-family: var(--lav-jp);
  font-size: 28px;
  font-weight: 500;
  color: var(--lav-ink);
  margin: 0 0 8px;
  line-height: 1.8;
}
.pb-furigana rt, .pa-furigana rt {
  font-size: 0.45em;
  color: var(--lav-reading);
  font-weight: 600;
}

/* ── Kanji decomposition ────────────────────────────── */
.lav-kanji-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--lav-hairline);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--lav-ink-muted);
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.15s;
}
.lav-kanji-toggle:hover {
  border-color: var(--lav-purple);
  color: var(--lav-purple);
}
.lav-kanji-section {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--lav-panel-soft);
  border-radius: 10px;
  border: 1px solid var(--lav-hairline-soft);
}
.lav-kanji-section .section-header {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--lav-ink-muted);
  margin-bottom: 6px;
}
.lav-kanji-section .kb-item {
  font-family: var(--lav-jp);
  font-size: 14px;
  color: var(--lav-ink);
  line-height: 1.6;
}

/* ── Source label ────────────────────────────────────── */
.pb-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--lav-hairline-soft);
  border-radius: 6px;
  color: var(--lav-ink-soft);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  margin: 8px 4px 0;
}
.pb-audio-btn:hover {
  background: var(--lav-bg-subtle);
  color: var(--lav-ink);
}

.lav-kanji-insight {
  font-size: 13px;
  color: var(--lav-ink-soft);
  line-height: 1.5;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--lav-hairline-soft);
}

.pb-notes {
  font-size: 13px;
  color: var(--lav-ink-soft);
  line-height: 1.5;
  margin: 10px 0 0;
}

.lav-source-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--lav-ink-muted);
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--lav-hairline-soft);
}

.lav-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lavSpin 0.6s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}
.lav-spinner--dark {
  border-color: rgba(0,0,0,0.1);
  border-top-color: var(--lav-ink-muted, #888);
  width: 12px;
  height: 12px;
}
@keyframes lavSpin {
  to { transform: rotate(360deg); }
}

/* ── Study session — desktop 2-col spread (dk-* namespace) ────────── */

.dk-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 0;
}
.dk-loading__text {
  font-size: 14px;
  color: var(--lav-ink-muted);
  letter-spacing: 0.02em;
}

.dk-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 60px 36px;
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .dk-shell { padding: 20px 18px 28px; }
}

/* Header */
.dk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 24px;
}
.dk-brand {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 16px;
  color: var(--lav-purple);
  text-decoration: none;
}
.dk-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dk-progress__bar {
  width: 140px;
  height: 4px;
  background: rgba(138,99,239,0.14);
  border-radius: 2px;
  overflow: hidden;
}
.dk-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--lav-purple), #b08cff);
  transition: width 0.3s ease;
}
.dk-progress__num {
  font-family: var(--lav-ui);
  font-size: 12px;
  font-weight: 800;
  color: var(--lav-ink-soft);
  font-variant-numeric: tabular-nums;
}
.dk-quit {
  font-family: var(--lav-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--lav-ink-muted);
  text-decoration: none;
  border: 1px solid var(--lav-hairline);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lav-panel);
  transition: all 0.15s;
}
.dk-quit:hover { border-color: var(--lav-purple); color: var(--lav-purple); }

/* Card body — airy, no box */
.dk-modal {
  grid-row: 2;
  align-self: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  animation: dkFade 0.4s cubic-bezier(.2,.8,.3,1);
}
@keyframes dkFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Front card face */
.dk-card { text-align: center; }
.dk-source {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 12px;
  color: var(--lav-ink-muted);
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}
.dk-source:not(:empty)::before,
.dk-source:not(:empty)::after {
  content: '\00b7';
  margin: 0 10px;
  color: var(--lav-purple);
}
.dk-surface-wrap { text-align: center; margin-bottom: 18px; }
.dk-surface {
  font-family: var(--lav-jp);
  font-weight: 600;
  font-size: 84px;
  line-height: 1;
  color: var(--lav-ink);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.dk-compound-badge {
  display: inline-block;
  font-family: var(--lav-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--lav-green);
  background: rgba(76,175,80,0.10);
  padding: 3px 10px;
  border-radius: 9999px;
  margin-top: 6px;
}
.dk-sentence-front {
  font-family: var(--lav-jp);
  font-size: 17px;
  line-height: 1.6;
  color: var(--lav-ink-soft);
  margin: 0 0 18px;
}

/* Audio buttons */
.dk-audio {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0 0 22px;
}
.dk-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--lav-panel);
  border: 1px solid var(--lav-hairline);
  border-radius: 999px;
  color: var(--lav-purple);
  cursor: pointer;
  font-family: var(--lav-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.18s ease;
}
.dk-audio-btn:hover {
  border-color: var(--lav-purple);
  background: rgba(138,99,239,0.08);
  transform: translateY(-1px);
}

/* Back — 2-col spread */
.dk-back-card {
  padding: 20px 0;
  animation: dkReveal 0.34s cubic-bezier(.2,.8,.3,1);
}
@keyframes dkReveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.dk-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.dk-col-left, .dk-col-right { min-width: 0; }

/* Front recap in left col */
.dk-front-recap {
  text-align: center;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--lav-hairline);
  margin-bottom: 26px;
}
.dk-front-recap .dk-surface {
  font-size: 84px;
}
.dk-sentence-back {
  font-family: var(--lav-jp);
  font-size: 17px;
  line-height: 1.6;
  color: var(--lav-ink-soft);
  margin: 0;
}

/* Answer section */
.dk-answer { text-align: center; }
.dk-reading {
  font-family: var(--lav-jp);
  font-size: 24px;
  font-weight: 600;
  color: var(--lav-green);
  margin: 0 0 6px;
}
.dk-meaning {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 38px;
  font-weight: 500;
  color: var(--lav-ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.dk-also {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 16px;
  color: var(--lav-ink-soft);
  margin: 0 0 14px;
}
.dk-also::before {
  content: 'also';
  font-family: var(--lav-ui);
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--lav-purple);
  margin-right: 8px;
}
.dk-translation {
  font-family: var(--lav-ui);
  font-size: 14px;
  color: var(--lav-ink-soft);
  margin: 0;
  line-height: 1.5;
  font-style: italic;
}
.dk-translation:not(:empty)::before { content: '\201c'; color: var(--lav-purple); margin-right: 2px; font-style: normal; }
.dk-translation:not(:empty)::after { content: '\201d'; color: var(--lav-purple); margin-left: 2px; font-style: normal; }

/* Right column blocks */
.dk-block { margin-bottom: 26px; }
.dk-block:last-child { margin-bottom: 0; }
.dk-block-h {
  font-family: var(--lav-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--lav-ink-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dk-block-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--lav-hairline);
}
.dk-block--notes .dk-block-h { color: var(--lav-purple); }
.dk-notes-text {
  font-family: var(--lav-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--lav-ink);
  margin: 0;
}

/* Sentence gloss pills */
.dk-gloss-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
}
.dk-gloss-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 10px 4px;
  background: rgba(138,99,239,0.04);
  border-radius: 4px;
  border-bottom: 1px solid rgba(138,99,239,0.18);
}
.dk-gloss-item--target {
  background: rgba(138,99,239,0.16);
  border-bottom-color: var(--lav-purple);
}
.dk-gloss-item__jp {
  font-family: var(--lav-jp);
  font-weight: 600;
  font-size: 15px;
  color: var(--lav-ink);
}
.dk-gloss-item__en {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 11px;
  color: var(--lav-ink-soft);
  margin-top: 2px;
  white-space: nowrap;
}

/* Kanji row */
.dk-kanji-row { display: flex; gap: 32px; flex-wrap: wrap; }
.dk-kanji { display: flex; align-items: center; gap: 14px; }
.dk-kanji__char {
  font-family: var(--lav-jp);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  color: var(--lav-ink);
}
.dk-kanji__gloss {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 16px;
  color: var(--lav-ink);
  line-height: 1.1;
}
.dk-kanji__reading {
  font-family: var(--lav-jp);
  font-size: 11px;
  color: var(--lav-purple);
  font-weight: 600;
  margin-top: 3px;
  letter-spacing: 0.05em;
}

/* Actions row */
.dk-actions {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.dk-reveal {
  width: 100%;
  padding: 14px 22px;
  background: linear-gradient(135deg, #7d5de8 0%, #5a3fc0 50%, #4527a0 100%);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: var(--lav-ui);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 12px 30px rgba(90,63,192,0.34);
  transition: all 0.2s ease;
}
.dk-reveal:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 18px 38px rgba(90,63,192,0.42);
}
.dk-reveal kbd {
  background: rgba(255,255,255,0.22);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--lav-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Rate buttons */
.dk-rate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.dk-rate-btn {
  padding: 16px 22px;
  border-radius: 999px;
  font-family: var(--lav-ui);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dk-rate-btn--again {
  background: #fff;
  color: #c23a30;
  border: 1.5px solid rgba(194,58,48,0.4);
}
.dk-rate-btn--again:hover { background: rgba(194,58,48,0.06); border-color: #c23a30; transform: translateY(-1px); }
.dk-rate-btn--good {
  background: linear-gradient(135deg, #4a9c4f 0%, #2e7d32 100%);
  color: #fff;
  border: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px rgba(46, 125, 50, 0.34);
}
.dk-rate-btn--good:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 32px rgba(46, 125, 50, 0.42); }
.dk-rate-btn:disabled { opacity: 0.5; cursor: default; transform: none !important; }

/* Responsive — single column on mobile */
@media (max-width: 900px) {
  .dk-spread { grid-template-columns: 1fr; gap: 28px; }
  .dk-modal { max-width: 100%; }
  .dk-surface { font-size: 56px; }
  .dk-front-recap .dk-surface { font-size: 56px; }
  .dk-meaning { font-size: 28px; }
}

/* Override for back-visible state: expand modal to full width */
.dk-modal--back { max-width: 100%; }

/* ── Grid page (inventory grid) ──────────────────────────────────────── */

.lav-grid-shell {
  padding-bottom: 110px;
}

.lav-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 16px;
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #ede5ff 0%, rgba(237,229,255,0.92) 80%, transparent 100%);
  backdrop-filter: blur(6px);
  z-index: 5;
}

.lav-grid-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 14px;
  color: var(--lav-purple);
  text-decoration: none;
}

.lav-grid-mode-badge {
  font-size: 10px;
  font-weight: 800;
  color: var(--lav-purple);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: var(--lav-purple-tint);
  padding: 4px 10px;
  border-radius: 9999px;
}

.lav-grid-title {
  font-family: var(--lav-display);
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--lav-ink);
  margin: 0 0 4px;
}

.lav-grid-meta {
  font-family: var(--lav-ui);
  font-size: 12px;
  color: var(--lav-ink-soft);
  margin-bottom: 16px;
}

.lav-grid-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.lav-grid-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: var(--lav-panel);
  border: 1px solid var(--lav-hairline);
  border-radius: 999px;
  font-family: var(--lav-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--lav-ink-soft);
  transition: all 0.15s ease;
}

.lav-grid-stat:hover {
  border-color: var(--lav-purple);
  color: var(--lav-ink);
}

.lav-grid-stat__count {
  color: var(--lav-ink);
  font-weight: 800;
}

.lav-grid-stat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.lav-grid-stat__dot--mature { background: var(--lav-green); }
.lav-grid-stat__dot--young { background: rgba(178,223,160,1); }
.lav-grid-stat__dot--learning { background: #f5d976; }
.lav-grid-stat__dot--due { background: #f5b876; }
.lav-grid-stat__dot--lapsed { background: #e88a78; }
.lav-grid-stat__dot--calibrated { background: transparent; border: 1px solid rgba(62,153,99,0.35); }
.lav-grid-stat__dot--assumed_known { background: var(--lav-hidden); opacity: 0.35; }
.lav-grid-stat__dot--unseen { background: rgba(180,170,210,0.6); }

.lav-grid-hint {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 12px;
  color: var(--lav-ink-muted);
  margin: 0 0 14px;
}

#grid-container .lav-tile {
  aspect-ratio: 1;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#grid-container .lav-tile:hover {
  transform: scale(1.4);
  z-index: 5;
  box-shadow: 0 6px 14px rgba(40,30,80,0.18);
  border-color: var(--lav-purple);
}

#grid-container .lav-tile__kanji {
  font-family: var(--lav-jp);
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  color: var(--lav-ink);
  padding: 0 2px;
  pointer-events: none;
}

#grid-container .lav-tile--unseen {
  background: rgba(180,170,210,0.18);
  border-color: rgba(180,170,210,0.22);
}

#grid-container .lav-tile--unseen .lav-tile__kanji {
  color: rgba(120,108,150,0.6);
  font-weight: 500;
}

#grid-container .lav-tile--mature {
  background: linear-gradient(135deg, rgba(178,223,160,0.65), rgba(110,162,90,0.55));
  border-color: rgba(110,162,90,0.5);
}

#grid-container .lav-tile--mature .lav-tile__kanji { color: #1a3a1a; }

#grid-container .lav-tile--young {
  background: linear-gradient(135deg, rgba(178,223,160,0.40), rgba(178,223,160,0.20));
  border-color: rgba(110,162,90,0.30);
}

#grid-container .lav-tile--young .lav-tile__kanji { color: #2e5a30; }

#grid-container .lav-tile--learning {
  background: linear-gradient(135deg, rgba(245,217,118,0.55), rgba(245,217,118,0.25));
  border-color: rgba(212,170,55,0.40);
}

#grid-container .lav-tile--learning .lav-tile__kanji { color: #5a4408; }

#grid-container .lav-tile--due {
  background: linear-gradient(135deg, rgba(245,184,118,0.65), rgba(245,184,118,0.30));
  border-color: rgba(206,130,55,0.45);
  animation: none;
}

#grid-container .lav-tile--due .lav-tile__kanji { color: #5a3008; }

#grid-container .lav-tile--due::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d8761b;
  box-shadow: 0 0 6px #d8761b;
}

#grid-container .lav-tile--lapsed {
  background: linear-gradient(135deg, rgba(232,138,120,0.65), rgba(232,138,120,0.30));
  border-color: rgba(180,80,60,0.45);
}

#grid-container .lav-tile--lapsed .lav-tile__kanji { color: #5a1410; }

#grid-container .lav-tile--lapsed::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c23a30;
}

#grid-container .lav-tile--assumed_known {
  background: rgba(180,170,210,0.18);
  border-color: rgba(180,170,210,0.22);
  opacity: 0.25;
}

#grid-container .lav-tile--calibrated {
  background: transparent;
  border: 1px solid rgba(62,153,99,0.35);
  opacity: 0.4;
}

#grid-container .lav-tile--active {
  box-shadow: 0 0 0 2px var(--lav-purple), 0 0 18px -2px rgba(90,63,192,0.30);
  z-index: 6;
  transform: scale(1.4);
}

#grid-container .lav-tile--active:hover {
  transform: scale(1.4);
}

.lav-grid-fab {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 26px;
  background: linear-gradient(135deg, #7d5de8, #5a3fc0);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--lav-ui);
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 12px 32px rgba(90,63,192,0.40);
  cursor: pointer;
  z-index: 10;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lav-grid-fab__count {
  background: rgba(255,255,255,0.18);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
}

.lav-grid-drawer {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 380px;
  background: var(--lav-panel);
  border: 1px solid var(--lav-hairline);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 24px 60px rgba(40,30,80,0.18);
  z-index: 11;
  display: none;
}

.lav-grid-drawer.is-open {
  display: block;
}

.lav-grid-drawer__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--lav-ink-muted);
  cursor: pointer;
  padding: 4px;
}

.lav-grid-drawer__rank {
  font-family: var(--lav-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--lav-ink-muted);
  margin-bottom: 4px;
}

.lav-grid-drawer__jp {
  font-family: var(--lav-jp);
  font-weight: 600;
  font-size: 32px;
  color: var(--lav-ink);
  line-height: 1;
  margin-bottom: 4px;
}

.lav-grid-drawer__reading {
  font-family: var(--lav-jp);
  font-size: 14px;
  color: var(--lav-purple);
  font-weight: 600;
  margin-bottom: 8px;
}

.lav-grid-drawer__meaning {
  font-family: var(--lav-display);
  font-style: italic;
  font-size: 17px;
  color: var(--lav-ink);
  margin-bottom: 8px;
}

.lav-grid-drawer__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--lav-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.lav-grid-drawer__state--mature { background: rgba(76,175,80,0.16); color: var(--lav-green); }
.lav-grid-drawer__state--young { background: rgba(178,223,160,0.30); color: #2e5a30; }
.lav-grid-drawer__state--learning { background: rgba(245,217,118,0.30); color: #5a4408; }
.lav-grid-drawer__state--due { background: rgba(245,184,118,0.30); color: #5a3008; }
.lav-grid-drawer__state--lapsed { background: rgba(232,138,120,0.30); color: #5a1410; }
.lav-grid-drawer__state--unseen { background: rgba(180,170,210,0.30); color: var(--lav-ink-muted); }
.lav-grid-drawer__state--calibrated { background: rgba(62,153,99,0.16); color: var(--lav-green); }
.lav-grid-drawer__state--assumed_known { background: rgba(180,170,210,0.30); color: var(--lav-ink-muted); }

@media (max-width: 900px) {
  #grid-container .lav-grid { grid-template-columns: repeat(10, 1fr); }
}

@media (max-width: 600px) {
  #grid-container .lav-grid { grid-template-columns: repeat(7, 1fr); }
  .lav-grid-title { font-size: 28px; }
}

@media (max-width: 380px) {
  #grid-container .lav-grid { grid-template-columns: repeat(5, 1fr); }
}