/* ═══════════════════════════════════════════════════════
   ROOT VARIABLES — Light Theme (default)
═══════════════════════════════════════════════════════ */
:root {
  --paper: #FAF7F2;
  --paper-dark: #F0EBE1;
  --ink: #1C1917;
  --ink-soft: #44403C;
  --ink-muted: #78716C;
  --card-bg: #FFFFFF;
  --border: #E7E0D5;

  --vermilion: #C41E3A;
  --vermilion-light: #FEE2E2;
  --moss: #3D6B4F;
  --moss-light: #D1FAE5;
  --gold: #92400E;
  --gold-light: #FEF3C7;
  --blue: #1E3A5F;
  --blue-light: #DBEAFE;

  /* Sidebar always dark — not affected by dark mode */
  --sb-bg: #0F0E0C;
  --sb-bg2: #1C1917;
  --sb-border: #2D2926;
  --sb-text: #A8A29E;
  --sb-muted: #57534E;
  --sb-hover: #2D2926;
  --sb-accent: #C41E3A;

  --sidebar-w: 270px;
  --radius: 10px;
  font-size: 16px;
}

/* ── DARK THEME ── */
body.dark {
  --paper: #131110;
  --paper-dark: #1C1917;
  --ink: #E7E0D5;
  --ink-soft: #C8BEB5;
  --ink-muted: #8C8580;
  --card-bg: #1E1B18;
  --border: #2D2926;
  --vermilion: #E05068;
  --vermilion-light: rgba(196,30,58,.18);
  --moss: #5E9B74;
  --moss-light: rgba(61,107,79,.18);
  --gold: #D4A044;
  --gold-light: rgba(146,64,14,.18);
  --blue: #5B8FCC;
  --blue-light: rgba(30,58,95,.25);
}

/* ── BASE ── */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Crimson Pro','Noto Sans JP',serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color .25s, color .25s;
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════ */
#sidebar {
  position: fixed; top:0; left:0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sb-bg);
  display: flex; flex-direction: column;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform .3s ease;
}
#sidebar::-webkit-scrollbar { width:4px; }
#sidebar::-webkit-scrollbar-thumb { background: #2D2926; border-radius:2px; }
#sidebar::-webkit-scrollbar-thumb:hover { background: #44403C; }

.sidebar-header {
  padding: 24px 20px 18px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sidebar-logo {
  font-family: 'Noto Serif JP',serif;
  font-size: 1.25rem; font-weight:600;
  color:#fff; line-height:1.2;
}
.sidebar-logo span { color: var(--sb-accent); }
.sidebar-sub { font-size:.68rem; color: var(--sb-muted); letter-spacing:.08em; text-transform:uppercase; margin-top:4px; }

.sidebar-section { padding: 12px 0 6px; flex-shrink:0; }
.sidebar-section-title { font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color: var(--sb-muted); padding: 0 20px 6px; }

.nav-link {
  display: flex; align-items:center; gap:10px;
  padding: 9px 20px;
  font-size:.87rem; color: var(--sb-text);
  text-decoration:none; cursor:pointer;
  transition: all .15s;
  border-left: 2px solid transparent;
}
.nav-link:hover { color:#fff; background: var(--sb-hover); }
.nav-link.active { color:#fff; border-left-color: var(--sb-accent); background: var(--sb-hover); }
.nav-icon { font-size:.95rem; width:18px; text-align:center; }

/* Lessons accordion */
.lessons-toggle {
  display:flex; align-items:center; justify-content:space-between;
  padding: 9px 20px;
  font-size:.87rem; color: var(--sb-text);
  cursor:pointer; border-left:2px solid transparent;
  transition: all .15s;
}
.lessons-toggle:hover { color:#fff; background: var(--sb-hover); }
.lessons-toggle.active { color:#fff; border-left-color: var(--sb-accent); }
.toggle-arrow { transition: transform .3s; font-size:.65rem; }
.toggle-arrow.open { transform: rotate(180deg); }

.lessons-nav { max-height:0; overflow:hidden; transition: max-height .35s ease; }
.lessons-nav.open { max-height: 3400px; }

/* Volume divider inside the lessons accordion */
.lessons-volume-divider {
  padding: 12px 20px 5px 20px;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sb-muted);
  border-top: 1px solid var(--sb-border);
  margin-top: 6px;
}

/* Volume divider on the home page grid */
.home-volume-divider {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 2px;
  font-family: 'Noto Serif JP', serif;
  font-size: .95rem; color: var(--ink-muted);
}
.home-volume-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.lesson-nav-item {
  padding: 7px 20px 7px 48px;
  cursor:pointer; transition: all .15s;
  display:block; border-left:2px solid transparent;
}
.lesson-nav-item:hover { color:#fff; background: var(--sb-hover); }
.lesson-nav-item.active { border-left-color: var(--sb-accent); }
.lesson-nav-item .lni-title { font-size:.82rem; color: var(--sb-text); }
.lesson-nav-item.active .lni-title { color:#fff; }
.lesson-nav-item:hover .lni-title { color:#fff; }
.lesson-nav-item .lni-rom { font-size:.68rem; color: var(--sb-muted); font-style:italic; margin-top:1px; }

/* ── Settings panel at bottom of sidebar ── */
.sidebar-settings {
  margin-top: auto;
  padding: 12px 0 20px;
  border-top: 1px solid var(--sb-border);
  flex-shrink:0;
}

.settings-btn {
  display:flex; align-items:center; gap:9px;
  margin: 4px 14px;
  padding: 8px 12px;
  border-radius:8px;
  background: var(--sb-bg2);
  border: 1.5px solid var(--sb-border);
  color: var(--sb-text);
  font-size:.82rem; cursor:pointer;
  transition: all .2s;
  font-family:'Crimson Pro',serif;
  width: calc(100% - 28px);
  justify-content: space-between;
}
.settings-btn:hover { border-color:#78716C; color:#fff; }
.settings-btn.on { border-color: var(--sb-accent); color:#fff; background: rgba(196,30,58,.12); }
.settings-btn-left { display:flex; align-items:center; gap:8px; }
.settings-btn-icon { font-size:.95rem; width:18px; text-align:center; flex-shrink:0; }

/* Toggle pill */
.toggle-pill {
  width:30px; height:17px; border-radius:9px;
  background:#44403C; position:relative;
  transition: background .2s; flex-shrink:0;
}
.toggle-pill::after {
  content:''; position:absolute;
  top:2.5px; left:2.5px;
  width:12px; height:12px; border-radius:50%;
  background:#78716C; transition: all .2s;
}
.settings-btn.on .toggle-pill { background: var(--sb-accent); }
.settings-btn.on .toggle-pill::after { left:15.5px; background:#fff; }

/* Language toggle */
.lang-toggle {
  display:flex; gap:6px;
  margin: 6px 14px 0;
}
.lang-btn {
  flex:1; padding:6px 0;
  border-radius:7px;
  background: var(--sb-bg2);
  border:1.5px solid var(--sb-border);
  color: var(--sb-text);
  font-size:.82rem; font-weight:600;
  cursor:pointer; transition: all .15s;
  font-family:'Crimson Pro',serif;
  letter-spacing:.04em;
}
.lang-btn:hover { color:#fff; border-color:#78716C; }
.lang-btn.active { background: var(--sb-accent); border-color: var(--sb-accent); color:#fff; }

/* ═══════════════════════════════════════════════════════
   TOPBAR (mobile)
═══════════════════════════════════════════════════════ */
#topbar {
  display:none;
  position:fixed; top:0; left:0; right:0;
  height:54px; background: var(--sb-bg);
  z-index:99; align-items:center;
  padding:0 12px; gap:10px;
}
#menu-btn {
  background:none; border:none; color:#fff;
  font-size:1.3rem; cursor:pointer;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
}
#topbar-title { font-family:'Noto Serif JP',serif; color:#fff; font-size:1rem; flex:1; }
#topbar-title span { color: var(--sb-accent); }
.topbar-right { display:flex; gap:6px; }
.topbar-icon-btn {
  background:none; border:1.5px solid var(--sb-border);
  border-radius:7px; color: var(--sb-text);
  font-size:.9rem; cursor:pointer;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  transition: all .15s;
}
.topbar-icon-btn:hover { color:#fff; border-color:#78716C; }
.topbar-icon-btn.on { border-color: var(--sb-accent); color:#fff; }

/* ── OVERLAY ── */
#overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99; }
#overlay.visible { display:block; }

/* ═══════════════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════════════ */
#main { margin-left: var(--sidebar-w); min-height:100vh; transition: margin .3s; }

.page { display:none; padding:40px 48px; max-width:1100px; }
.page.active { display:block; animation: fadeUp .3s ease; }

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

/* ── HOME HERO ── */
.home-hero {
  padding:56px 0 40px;
  border-bottom:1px solid var(--border);
  margin-bottom:40px;
  position:relative; overflow:hidden;
}
.home-hero::before {
  content:'日本語'; position:absolute;
  right:-10px; top:0;
  font-family:'Noto Serif JP',serif;
  font-size:7rem; font-weight:600;
  color: var(--ink); opacity:.04;
  pointer-events:none; line-height:1;
}
.home-badge {
  display:inline-block; background: var(--vermilion);
  color:#fff; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 12px;
  border-radius:20px; margin-bottom:14px;
}
.home-hero h1 {
  font-family:'Noto Serif JP',serif;
  font-size:2.6rem; font-weight:600;
  line-height:1.25; margin-bottom:12px; color: var(--ink);
}
.home-hero h1 span { color: var(--vermilion); }
.home-hero p { font-size:1.1rem; color: var(--ink-soft); max-width:540px; line-height:1.7; }

.progress-bar {
  display:flex; gap:3px; flex-wrap:wrap; margin-bottom:24px;
}
.pb-item {
  width:28px; height:28px; border-radius:50%;
  background: var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; cursor:pointer; transition: all .15s;
  color: var(--ink-muted);
}
.pb-item:hover, .pb-item.active { background: var(--vermilion); color:#fff; }

.home-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(195px,1fr));
  gap:14px; margin-bottom:48px;
}
.home-card {
  background: var(--card-bg); border:1px solid var(--border);
  border-radius: var(--radius); padding:20px 18px;
  cursor:pointer; transition: all .2s;
  position:relative; overflow:hidden;
}
.home-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background: var(--vermilion);
  transform:scaleX(0); transform-origin:left; transition: transform .2s;
}
.home-card:hover { border-color: var(--vermilion); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.home-card:hover::after { transform:scaleX(1); }
.card-jp { font-family:'Noto Serif JP',serif; font-size:1.4rem; margin-bottom:6px; color: var(--ink); }
.card-title { font-size:.87rem; font-weight:600; color: var(--ink-soft); }
.card-rom { font-size:.74rem; color: var(--ink-muted); font-style:italic; margin-top:2px; }
.card-num { position:absolute; top:12px; right:14px; font-size:.68rem; color: var(--ink-muted); }

/* ── SECTION CARDS ── */
.section-card {
  background: var(--card-bg); border:1px solid var(--border);
  border-radius: var(--radius); padding:26px 30px; margin-bottom:22px;
  transition: background-color .25s, border-color .25s;
  /* The 5-column vocabulary table scrolls inside the card instead of clipping */
  overflow-x: auto;
}
.section-card h2 {
  font-family:'Noto Serif JP',serif; font-size:1.35rem;
  margin-bottom:16px; color: var(--ink);
  padding-bottom:12px; border-bottom:1px solid var(--border);
}
.section-card h3 { font-size:1.02rem; font-weight:600; color: var(--ink); margin:16px 0 8px; }

/* ── LESSON HEADER ── */
.lesson-header {
  padding:36px 0 28px; border-bottom:1px solid var(--border); margin-bottom:28px;
}
.lesson-num { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--vermilion); margin-bottom:8px; }
.lesson-title { font-family:'Noto Serif JP',serif; font-size:2rem; font-weight:600; color: var(--ink); margin-bottom:4px; }
.lesson-title .title-rom { font-family:'Crimson Pro',serif; font-size:1rem; font-weight:400; color: var(--ink-muted); font-style:italic; margin-left:8px; }
.lesson-subtitle { font-size:.95rem; color: var(--ink-muted); margin-top:4px; }
.lesson-nav-btns { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }

/* ── BUTTONS ── */
.btn {
  padding:8px 18px; border-radius:6px; font-size:.85rem;
  cursor:pointer; border:1.5px solid var(--border);
  background: var(--card-bg); color: var(--ink-soft);
  transition: all .15s; font-family:'Crimson Pro',serif;
}
.btn:hover { border-color: var(--vermilion); color: var(--vermilion); }
.btn.primary { background: var(--vermilion); border-color: var(--vermilion); color:#fff; }
.btn.primary:hover { opacity:.9; }

/* ── TABS ── */
.tabs {
  display:flex; gap:0; border-bottom:2px solid var(--border);
  margin-bottom:26px; overflow-x:auto;
}
.tab-btn {
  padding:10px 20px; font-size:.87rem; cursor:pointer;
  background:none; border:none; color: var(--ink-muted);
  border-bottom:2px solid transparent; margin-bottom:-2px;
  transition: all .15s; white-space:nowrap; font-family:'Crimson Pro',serif;
}
.tab-btn.active { color: var(--vermilion); border-bottom-color: var(--vermilion); font-weight:600; }
.tab-btn:hover { color: var(--ink); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ── VOCAB TABLE ── */
.vocab-table { width:100%; border-collapse:collapse; font-size:.91rem; }
.vocab-table th {
  background: var(--ink); color:#fff;
  padding:9px 14px; text-align:left;
  font-size:.73rem; letter-spacing:.05em; text-transform:uppercase; font-weight:400;
}
.vocab-table td {
  padding:9px 14px; border-bottom:1px solid var(--border);
  vertical-align:middle; color: var(--ink);
  transition: background-color .25s;
}
.vocab-table tr:hover td { background: var(--paper-dark); }
.vocab-table tr:last-child td { border-bottom:none; }
.jp-cell { font-family:'Noto Sans JP',sans-serif; font-size:1.02rem; font-weight:500; }
.kana-cell { font-family:'Noto Sans JP',sans-serif; font-size:.88rem; color: var(--ink-soft); }
.romaji-cell { color: var(--ink-muted); font-style:italic; font-size:.87rem; }

/* ── GRAMMAR POINTS ── */
.grammar-point {
  background: var(--card-bg); border:1px solid var(--border);
  border-radius: var(--radius); padding:22px 26px; margin-bottom:18px;
  transition: background-color .25s, border-color .25s;
}
.grammar-title { font-family:'Noto Sans JP',sans-serif; font-size:1.15rem; font-weight:700; color: var(--ink); margin-bottom:2px; }
.grammar-romaji { font-size:.84rem; color: var(--ink-muted); font-style:italic; margin-bottom:10px; }
.grammar-desc { font-size:.96rem; color: var(--ink-soft); line-height:1.78; margin-bottom:14px; }
.grammar-examples { border-left:3px solid var(--vermilion); padding-left:16px; }
.grammar-example { margin-bottom:12px; }
.ex-jp { font-family:'Noto Sans JP',sans-serif; font-size:.97rem; color: var(--ink); margin-bottom:2px; }
.ex-romaji { font-size:.8rem; color: var(--ink-muted); font-style:italic; }
.ex-fr, .ex-en { font-size:.87rem; color: var(--ink-soft); }

/* ── PATTERN BOX ── */
.pattern-box {
  background: var(--paper-dark); border:1px solid var(--border);
  border-radius: var(--radius); padding:16px 20px; margin-bottom:14px;
  border-left:4px solid var(--moss);
  transition: background-color .25s;
}
.pattern-title { font-size:.73rem; text-transform:uppercase; letter-spacing:.08em; color: var(--moss); margin-bottom:6px; }
.pattern-text { font-family:'Noto Sans JP',sans-serif; font-size:1rem; color: var(--ink); }

/* ── NOTE BOX ── */
.note-box {
  background: var(--gold-light); border:1px solid rgba(146,64,14,.25);
  border-radius: var(--radius); padding:12px 16px; margin-top:10px;
  font-size:.87rem; color: var(--gold); display:flex; gap:8px;
  transition: background-color .25s;
}
.note-box::before { content:'💡'; flex-shrink:0; }

/* ── HIGHLIGHTS ── */
.jp-highlight {
  font-family:'Noto Sans JP',sans-serif;
  background: var(--vermilion-light); color: var(--vermilion);
  padding:1px 6px; border-radius:4px; font-size:.94em;
}

/* ── PAGE HEADER ── */
.page-header { padding:36px 0 22px; border-bottom:1px solid var(--border); margin-bottom:28px; }
.page-header h1 { font-family:'Noto Serif JP',serif; font-size:1.9rem; color: var(--ink); margin-bottom:5px; }
.page-header p { color: var(--ink-muted); font-size:.93rem; }

/* ── SEARCH ── */
.search-bar { position:relative; margin-bottom:18px; }
.search-bar input {
  width:100%; padding:10px 16px 10px 42px;
  border:1.5px solid var(--border); border-radius:8px;
  font-size:.91rem; background: var(--card-bg);
  font-family:'Crimson Pro',serif; color: var(--ink);
  outline:none; transition: border-color .15s, background-color .25s;
}
.search-bar input:focus { border-color: var(--vermilion); }
.search-bar input::placeholder { color: var(--ink-muted); }
.search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color: var(--ink-muted); }

/* ── FILTER PILLS ── */
.filter-pills { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.pill {
  padding:4px 13px; border-radius:20px; font-size:.8rem;
  cursor:pointer; border:1.5px solid var(--border);
  background: var(--card-bg); color: var(--ink-soft);
  transition: all .15s;
}
.pill.active { background: var(--vermilion); border-color: var(--vermilion); color:#fff; }
.pill:hover { border-color: var(--vermilion); }

/* ── BADGE ── */
.badge {
  display:inline-block; font-size:.68rem; padding:2px 7px;
  border-radius:20px; font-weight:600; margin-left:5px; vertical-align:middle;
}
.badge-v { background: var(--vermilion-light); color: var(--vermilion); }

/* ── CHEAT SHEET ── */
.cheat-section {
  background: var(--card-bg); border:1px solid var(--border);
  border-radius: var(--radius); padding:26px 30px; margin-bottom:22px;
  transition: background-color .25s, border-color .25s;
}
.cheat-section h2 {
  font-family:'Noto Serif JP',serif; font-size:1.28rem;
  color: var(--ink); margin-bottom:18px;
  padding-bottom:10px; border-bottom:1px solid var(--border);
}
.cheat-section h3 { font-size:.98rem; font-weight:600; color: var(--ink); margin:16px 0 10px; }

.days-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:9px; margin-bottom:14px; }
.day-card { background: var(--paper-dark); border-radius:8px; padding:10px; text-align:center; transition: background-color .25s; }
.day-jp { font-family:'Noto Sans JP',sans-serif; font-size:.97rem; color: var(--ink); }
.day-rom { font-size:.75rem; color: var(--ink-muted); margin-top:2px; }
.day-fr { font-size:.8rem; color: var(--ink-soft); margin-top:2px; font-style:italic; }

.particles-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:11px; margin-bottom:14px; }
.particle-card { background: var(--paper-dark); border-radius:8px; padding:13px; transition: background-color .25s; }
.p-char { font-family:'Noto Sans JP',sans-serif; font-size:1.4rem; color: var(--blue); font-weight:700; }
.p-role { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--blue); margin:3px 0; }
.p-desc { font-size:.83rem; color: var(--ink-soft); }
.p-ex { font-family:'Noto Sans JP',sans-serif; font-size:.82rem; color: var(--ink-muted); margin-top:5px; }

.counter-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:14px; margin-bottom:22px; }
.counter-card { background: var(--card-bg); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; transition: background-color .25s; }
.counter-card-header { background: var(--ink); color:#fff; padding:9px 14px; font-size:.78rem; line-height:1.4; }
.counter-note {
  padding:6px 11px; font-size:.75rem;
  color: var(--gold); background: var(--gold-light);
  border-bottom:1px solid var(--border);
}
.counter-how-many {
  display:flex; align-items:center; flex-wrap:wrap; gap:5px;
  padding:7px 11px; border-bottom:2px solid var(--vermilion);
  background: var(--vermilion-light);
}
.chm-label {
  font-size:.65rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--vermilion); font-weight:700; margin-right:2px; white-space:nowrap;
}
.chm-jp {
  font-family:'Noto Sans JP',sans-serif; font-size:.92rem;
  color: var(--ink); font-weight:500;
}
.chm-rom { font-size:.72rem; color: var(--ink-muted); font-style:italic; }
.chm-tr { font-size:.75rem; color: var(--ink-soft); margin-left:auto; }
.counter-card table { width:100%; border-collapse:collapse; font-size:.84rem; }
.counter-card td { padding:6px 11px; border-bottom:1px solid var(--border); color: var(--ink); }
.counter-card tr:last-child td { border-bottom:none; }
.n-col { font-weight:600; color: var(--vermilion); width:22px; }
.jp-col-ct { font-family:'Noto Sans JP',sans-serif; }
.rom-col-ct { font-size:.76rem; color: var(--ink-muted); font-style:italic; }

.conj-table { width:100%; border-collapse:collapse; font-size:.87rem; margin-bottom:18px; }
.conj-table th { background: var(--blue); color:#fff; padding:8px 12px; text-align:left; font-weight:400; font-size:.76rem; }
.conj-table td { padding:8px 12px; border-bottom:1px solid var(--border); color: var(--ink); transition: background-color .25s; }
.conj-table tr:nth-child(even) td { background: var(--paper-dark); }

/* ═══════════════════════════════════════════════════════
   KANA TABLES (improved)
═══════════════════════════════════════════════════════ */
.kana-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.kana-tbl { border-collapse: collapse; width:100%; min-width:300px; }
.kana-corner { background: var(--ink); min-width:44px; border:1px solid rgba(255,255,255,.06); }
.kana-col-head {
  background: var(--vermilion); color:#fff;
  padding:8px 10px; text-align:center; font-size:.75rem;
  letter-spacing:.1em; font-weight:500;
  border:1px solid rgba(255,255,255,.12); min-width:56px;
}
.kana-row-head {
  background: var(--ink); color:#A8A29E;
  padding:10px 12px; text-align:center;
  font-size:.72rem; letter-spacing:.08em; font-weight:600;
  border:1px solid rgba(255,255,255,.05);
}
.kana-cell {
  padding:10px 8px; text-align:center;
  border:1px solid var(--border); background: var(--card-bg);
  transition: background-color .15s, transform .1s;
  min-width:56px; cursor:default; vertical-align:middle;
}
.kana-cell:hover { background: var(--vermilion-light); transform:scale(1.08); z-index:2; position:relative; }
.kana-empty { background: var(--paper-dark) !important; }
.kana-empty:hover { transform:none !important; }
.kana-dash { color: var(--border); font-size:.9rem; }
.kana-char {
  font-family:'Noto Sans JP',sans-serif; font-size:1.18rem;
  display:block; color: var(--ink); line-height:1.3;
}
.kana-rom { font-size:.63rem; color: var(--ink-muted); margin-top:3px; display:block; }

/* Small kana tiles (dakuten / combos) */
.kana-tile {
  background: var(--card-bg); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; text-align:center; min-width:46px;
  transition: all .15s; cursor:default;
}
.kana-tile:hover { border-color: var(--vermilion); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
.kana-tile-char { font-family:'Noto Sans JP'; font-size:1rem; display:block; color: var(--ink); }
.kana-tile-rom { font-size:.63rem; color: var(--ink-muted); margin-top:2px; }

/* ═══════════════════════════════════════════════════════
   PROGRESS TRACKING
═══════════════════════════════════════════════════════ */
.progress-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px; flex-wrap:wrap; gap:10px;
}
.progress-count { font-size:.87rem; color: var(--ink-muted); }
.progress-count span { color: var(--moss); font-weight:700; font-size:1rem; }
.progress-track {
  height:6px; background: var(--border); border-radius:3px; margin-bottom:22px; overflow:hidden;
}
.progress-track-fill {
  height:100%; background: linear-gradient(90deg, var(--moss), #6FCF97);
  border-radius:3px; transition: width .4s ease;
}
.home-card.completed { border-color: var(--moss); }
.home-card.completed::before {
  content:'✓'; position:absolute; top:10px; left:14px;
  color: var(--moss); font-size:.85rem; font-weight:700;
}
.home-card.completed .card-num { color: var(--moss); }
.pb-item.done { background: var(--moss); color:#fff; }
.lesson-nav-item .done-mark { display:none; font-size:.75rem; color: var(--moss); }
.lesson-nav-item.done .done-mark { display:inline; }
.lesson-nav-item.done .lni-title { color: #A8A29E; }
.btn-complete {
  padding:8px 18px; border-radius:6px; font-size:.85rem;
  cursor:pointer; border:1.5px solid var(--moss);
  background: transparent; color: var(--moss);
  transition: all .15s; font-family:'Crimson Pro',serif;
}
.btn-complete:hover, .btn-complete.done { background: var(--moss); color:#fff; border-color: var(--moss); }

/* ═══════════════════════════════════════════════════════
   FLASHCARD PAGE
═══════════════════════════════════════════════════════ */
.flashcard-page { display:flex; flex-direction:column; align-items:center; padding-top:24px; }
.flashcard-controls-top {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:540px; margin-bottom:24px; flex-wrap:wrap; gap:12px;
}
.flashcard-session-info { font-size:.88rem; color: var(--ink-muted); }
.flashcard-session-info b { color: var(--ink); }

.flashcard-wrap { perspective:1000px; width:100%; max-width:540px; }
.flashcard {
  width:100%; min-height:250px; position:relative;
  cursor:pointer; transform-style:preserve-3d; transition:transform .5s ease;
  border-radius:16px;
}
.flashcard.flipped { transform: rotateY(180deg); }
.flashcard-face {
  position:absolute; inset:0;
  border-radius:16px; backface-visibility:hidden;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:32px; text-align:center;
  border:2px solid var(--border);
  background: var(--card-bg);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  transition: background-color .25s, border-color .25s;
}
.flashcard-face.back { transform: rotateY(180deg); background: var(--paper-dark); }
.fc-jp { font-family:'Noto Serif JP',serif; font-size:2.4rem; color: var(--ink); margin-bottom:8px; }
.fc-kana { font-family:'Noto Sans JP',sans-serif; font-size:1.1rem; color: var(--ink-soft); margin-bottom:6px; }
.fc-hint { font-size:.8rem; color: var(--ink-muted); margin-top:12px; }
.fc-rom { font-style:italic; font-size:1.1rem; color: var(--ink-muted); margin-bottom:8px; }
.fc-meaning { font-size:1.5rem; color: var(--ink); font-weight:600; }
.fc-lesson { font-size:.75rem; color: var(--ink-muted); margin-top:14px; }

.flashcard-actions {
  display:flex; gap:14px; margin-top:24px;
  opacity:0; transform:translateY(8px); transition: all .25s;
}
.flashcard-actions.visible { opacity:1; transform:translateY(0); }
.btn-again {
  padding:12px 28px; border-radius:10px; font-size:.95rem;
  cursor:pointer; border:1.5px solid var(--border);
  background: var(--card-bg); color: var(--ink-soft);
  transition: all .15s; font-family:'Crimson Pro',serif;
}
.btn-again:hover { border-color: var(--vermilion); color: var(--vermilion); }
.btn-known {
  padding:12px 28px; border-radius:10px; font-size:.95rem;
  cursor:pointer; border:1.5px solid var(--moss);
  background: var(--moss); color:#fff;
  transition: all .15s; font-family:'Crimson Pro',serif;
}
.btn-known:hover { opacity:.85; }

.fc-deck-selector {
  width:100%; max-width:540px; margin-bottom:32px;
}
.fc-deck-selector h2 { font-family:'Noto Serif JP',serif; font-size:1.5rem; color: var(--ink); margin-bottom:6px; }
.fc-deck-selector p { color: var(--ink-muted); font-size:.93rem; margin-bottom:18px; }
.deck-options { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:8px; }
.deck-btn {
  padding:10px 8px; border-radius:8px; font-size:.82rem;
  cursor:pointer; border:1.5px solid var(--border);
  background: var(--card-bg); color: var(--ink-soft);
  transition: all .15s; font-family:'Crimson Pro',serif; text-align:center;
}
.deck-btn:hover, .deck-btn.selected { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.deck-btn-all { grid-column:1/-1; background: var(--vermilion); border-color: var(--vermilion); color:#fff; font-size:.9rem; }
.deck-btn-all:hover { opacity:.9; color:#fff; }

.fc-result {
  width:100%; max-width:540px; text-align:center; padding:32px;
  background: var(--card-bg); border:1px solid var(--border);
  border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.08);
}
.fc-result-score { font-size:3rem; font-weight:700; color: var(--moss); margin:8px 0; }
.fc-result-label { font-size:1rem; color: var(--ink-muted); margin-bottom:20px; }

/* ═══════════════════════════════════════════════════════
   QUIZ PAGE
═══════════════════════════════════════════════════════ */
.quiz-wrap { max-width:620px; margin:0 auto; }
.quiz-progress-bar {
  height:5px; background: var(--border); border-radius:3px; margin-bottom:28px; overflow:hidden;
}
.quiz-progress-fill { height:100%; background: var(--vermilion); border-radius:3px; transition:width .3s; }

.quiz-question-card {
  background: var(--card-bg); border:1px solid var(--border);
  border-radius:14px; padding:32px; margin-bottom:18px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06); text-align:center;
  transition: background-color .25s;
}
.quiz-q-num { font-size:.73rem; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-muted); margin-bottom:12px; }
.quiz-q-jp { font-family:'Noto Serif JP',serif; font-size:2rem; color: var(--ink); margin-bottom:6px; }
.quiz-q-kana { font-family:'Noto Sans JP',sans-serif; font-size:1rem; color: var(--ink-soft); }
.quiz-q-rom { font-style:italic; font-size:.87rem; color: var(--ink-muted); margin-top:4px; }

.quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.quiz-option {
  padding:14px 16px; border-radius:10px; font-size:.93rem;
  cursor:pointer; border:1.5px solid var(--border);
  background: var(--card-bg); color: var(--ink-soft);
  transition: all .15s; font-family:'Crimson Pro',serif;
  text-align:left; line-height:1.4;
}
.quiz-option:hover:not(.correct):not(.wrong) { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.quiz-option.correct { border-color: var(--moss); background: var(--moss-light); color: var(--moss); }
.quiz-option.wrong { border-color: var(--vermilion); background: var(--vermilion-light); color: var(--vermilion); }
.quiz-option.reveal-correct { border-color: var(--moss); background: var(--moss-light); color: var(--moss); }
.quiz-option:disabled { cursor:default; }

.quiz-feedback {
  text-align:center; font-size:.95rem; padding:10px;
  border-radius:8px; margin-bottom:16px;
  opacity:0; transition: opacity .2s;
}
.quiz-feedback.visible { opacity:1; }
.quiz-feedback.correct { background: var(--moss-light); color: var(--moss); }
.quiz-feedback.wrong { background: var(--vermilion-light); color: var(--vermilion); }

.quiz-result {
  text-align:center; padding:40px 32px;
  background: var(--card-bg); border:1px solid var(--border);
  border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.08);
}
.quiz-result-stars { font-size:2.5rem; margin-bottom:8px; }
.quiz-result-score { font-size:2.8rem; font-weight:700; color: var(--vermilion); margin:6px 0; }
.quiz-result-label { font-size:1rem; color: var(--ink-muted); margin-bottom:24px; }

/* Deck selector (shared with flashcard) */
.deck-selector-page { max-width:620px; }
.deck-selector-page h2 { font-family:'Noto Serif JP',serif; font-size:1.6rem; color: var(--ink); margin-bottom:6px; }
.deck-selector-page p { color: var(--ink-muted); font-size:.93rem; margin-bottom:20px; }

/* ── ROMAJI TOGGLE ── */
body.hide-romaji .romaji-toggle,
body.hide-romaji .romaji-cell,
body.hide-romaji .ex-romaji,
body.hide-romaji .grammar-romaji { display:none !important; }

/* ── KEYBOARD FOCUS ── */
[role="button"]:focus-visible, .btn:focus-visible, .quiz-option:focus-visible,
.settings-btn:focus-visible, .lang-btn:focus-visible, .tab-btn:focus-visible {
  outline: 2px solid var(--vermilion); outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width:900px) {
  #sidebar { transform:translateX(-100%); }
  #sidebar.open { transform:translateX(0); }
  #main { margin-left:0; }
  #topbar { display:flex; }
  .page { padding:68px 18px 30px; }
  .home-hero h1 { font-size:1.9rem; }
  .home-grid { grid-template-columns:repeat(2,1fr); }
  .lesson-title { font-size:1.6rem; }
  .section-card, .cheat-section, .grammar-point { padding:18px; }
}
@media (max-width:480px) {
  .home-grid { grid-template-columns:1fr; }
  .counter-grid { grid-template-columns:1fr; }
}