/* ============================================================
   みんなの日本語 Quiz — Main Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Space+Mono:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ──────────── Reset & Base ──────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Primary palette — vibrant indigo-purple */
  --primary:       #6366f1;
  --primary-dark:  #4f46e5;
  --primary-light: #eef2ff;
  --primary-glow:  rgba(99,102,241,.25);

  /* Accent gradients */
  --grad-primary:  linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --grad-warm:     linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --grad-cool:     linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --grad-nature:   linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --grad-amber:    linear-gradient(135deg, #f7971e 0%, #ffd200 100%);

  /* Semantic colors */
  --green:       #10b981;
  --green-dark:  #059669;
  --green-light: #d1fae5;
  --red:         #ef4444;
  --red-light:   #fee2e2;
  --amber:       #f59e0b;
  --amber-light: #fef3c7;
  --blue:        #3b82f6;
  --blue-light:  #dbeafe;

  /* Neutrals */
  --gray-50:     #fafafa;
  --gray-100:    #f1f0f5;
  --gray-200:    #e2e0ec;
  --gray-400:    #9ca3af;
  --gray-600:    #6b7280;
  --gray-900:    #111827;
  --white:       #ffffff;

  /* Layout */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --shadow-sm:   0 1px 4px rgba(99,102,241,.08);
  --shadow-md:   0 8px 32px rgba(99,102,241,.12);
  --shadow-lg:   0 20px 60px rgba(99,102,241,.18);

  /* Typography */
  --font-jp:     'Plus Jakarta Sans', 'Noto Sans JP', sans-serif;
  --font-mono:   'Space Mono', monospace;
  --transition:  0.2s ease;
}

/* ══════════════════════════════════════════
   DARK MODE — Variable Overrides
══════════════════════════════════════════ */
html.dark-mode {
  color-scheme: dark;
  --primary:       #818cf8;
  --primary-dark:  #6366f1;
  --primary-light: rgba(99,102,241,.12);
  --primary-glow:  rgba(129,140,248,.2);
  --grad-primary:  linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
  --green:       #34d399;
  --green-dark:  #10b981;
  --green-light: rgba(52,211,153,.12);
  --red:         #f87171;
  --red-light:   rgba(248,113,113,.12);
  --amber:       #fbbf24;
  --amber-light: rgba(251,191,36,.12);
  --blue:        #60a5fa;
  --blue-light:  rgba(96,165,250,.12);
  --gray-50:     #111118;
  --gray-100:    #1c1b27;
  --gray-200:    #282737;
  --gray-400:    #6b7280;
  --gray-600:    #9ca3af;
  --gray-900:    #f1f0f9;
  --white:       #16151f;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.4);
  --shadow-md:   0 8px 32px rgba(0,0,0,.5);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.7);
}

/* Smooth transitions on mode switch */
html, body, .top-nav, .card, .quiz-card, .stat-card, .option-btn,
.btn, .nav-tab, .page-header h1 {
  transition: background 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
}


html { scroll-behavior: smooth; }

body {
  font-family: var(--font-jp);
  background: #ffffff;
  color: var(--gray-900);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* ──────────── Layout ──────────── */
.app-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

/* Nav brand */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* Nav brand logo (real image) */
.nav-brand-logo {
  height: 48px;
  width: 48px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;          /* clip jadi lingkaran, sembunyikan area putih */
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.nav-brand:hover .nav-brand-logo {
  opacity: 0.88;
  transform: scale(1.05);
}

/* Keep old icon/text styles for any fallback */
.nav-brand-icon {
  width: 44px;
  height: 44px;
  background: var(--grad-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 4px 16px var(--primary-glow);
}
.nav-brand-text { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.nav-brand-text small { display: block; font-size: 12px; color: var(--gray-400); font-weight: 400; }

/* ────────── Top Nav ────────── */
.top-nav {
  background: #ffffff;
  border-bottom: 1px solid #ededf5;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 300;
  box-shadow: 0 1px 0 #f0eff4, 0 6px 28px rgba(0,0,0,.08);
}

/* Row 1: Brand + actions */
.nav-top-row {
  max-width: 960px;          /* wider on desktop */
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 68px;              /* was 54px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0eff4;
}

.nav-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Admin button */
.nav-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;        /* was 5px 12px */
  border-radius: var(--radius-md);
  font-size: 13px;          /* was 12px */
  font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
  border: 1.5px solid var(--gray-200);
  background: var(--gray-50);
  transition: all var(--transition);
  font-family: var(--font-jp);
}
.nav-admin-btn:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--primary-glow);
}

/* Row 2: Full-width tab bar — hidden on mobile */
.nav-tabs-row {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 4px;
  position: relative;
}

/* On mobile: hide the top tab row */
@media (max-width: 640px) {
  .nav-tabs-desktop { display: none !important; }
  .nav-admin-label  { display: none; }
  body { padding-bottom: 72px; }
  .nav-top-row      { height: 52px; padding: 0 0.75rem; }
  .nav-brand-logo   { height: 36px; width: 36px; }
  .nav-admin-btn    { padding: 5px 10px; font-size: 12px; }
  .dark-toggle      { width: 30px; height: 30px; font-size: 14px; }
  .nav-top-actions  { gap: 6px; }
  .stats-tab-wrap   { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .stats-tab-wrap::-webkit-scrollbar { display: none; }
  .stats-tab        { flex-shrink: 0; }
  .options-grid     { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .options-grid { grid-template-columns: 1fr; }
}

/* ── 1-baris penuh, tanpa scroll (semua item muat) ── */
.nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  gap: 1px;
  padding: 4px 0;
  overflow: visible;        /* visible agar bubble label tidak terpotong */
}

.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 1 1 0;              /* bagi rata lebar kontainer */
  min-width: 0;
  padding: 7px 2px 6px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: var(--font-jp);
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  font-weight: 600;
  overflow: visible;        /* visible agar bubble tidak terpotong */
}

.nav-tab-icon {
  font-size: 18px;
  line-height: 1;
  display: block;
  transition: transform 0.18s ease;
}

/* Label — hidden by default */
.nav-tab-label {
  display: none;
}

/* ✨ Pop bubble — muncul DI ATAS saat tab diklik/aktif */
.nav-tab.active .nav-tab-label {
  display: block;
  position: absolute;
  bottom: calc(100% + 6px); /* tepat di atas tombol */
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 99px;        /* pill shape */
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 14px var(--primary-glow);
  animation: bubblePop 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

/* Ekor segitiga kecil di bawah bubble */
.nav-tab.active .nav-tab-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--primary-dark);
}

@keyframes bubblePop {
  from { opacity: 0; transform: translateX(-50%) scale(0.6); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

.nav-tab:hover {
  background: #f0effe;
  color: var(--primary);
}
.nav-tab:hover .nav-tab-icon { transform: translateY(-1px); }

.nav-tab.active {
  background: linear-gradient(135deg, #eef0ff, #f0eaff);
  color: var(--primary-dark);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(99,102,241,.12);
}
.nav-tab.active .nav-tab-icon { transform: translateY(-1px); }

.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2.5px;
  border-radius: 999px;
  background: var(--grad-primary);
  box-shadow: 0 0 6px var(--primary-glow);
}

/* ──────────── Screens ──────────── */
.screen { display: none; padding-top: 1.5rem; }
.screen.active { display: block; }

/* ══════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
══════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 -4px 32px rgba(0,0,0,.10);
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: 66px;
  align-items: stretch;
  justify-content: space-around;
}

@media (max-width: 640px) {
  .mobile-bottom-nav { display: flex; }
}

/* ── Base tab ── */
.mob-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-jp);
  color: #b0b8c8;
  transition: color 0.2s ease;
  padding: 6px 4px;
  position: relative;
  min-width: 0;
}

/* Icon bubble */
.mob-tab-icon {
  font-size: 21px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  border-radius: 10px;
  background: transparent;
  transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.mob-tab-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color 0.2s ease;
}

/* Top indicator */
.mob-tab::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 3px;
  border-radius: 0 0 4px 4px;
  transition: width 0.22s ease;
}

/* Tab 1 – Kana: Rose */
.mob-tab:nth-child(1).active              { color: #e11d48; }
.mob-tab:nth-child(1).active .mob-tab-icon{ background: #fff0f3; transform: translateY(-3px) scale(1.08); }
.mob-tab:nth-child(1).active::before      { width: 32px; background: #e11d48; box-shadow: 0 0 8px rgba(225,29,72,.5); }
.mob-tab:nth-child(1):not(.active):hover  { color: #e11d48; }

/* Tab 2 – Kotoba: Amber */
.mob-tab:nth-child(2).active              { color: #d97706; }
.mob-tab:nth-child(2).active .mob-tab-icon{ background: #fffbeb; transform: translateY(-3px) scale(1.08); }
.mob-tab:nth-child(2).active::before      { width: 32px; background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,.5); }
.mob-tab:nth-child(2):not(.active):hover  { color: #d97706; }

/* Tab 3 – Bunpou: Emerald */
.mob-tab:nth-child(3).active              { color: #059669; }
.mob-tab:nth-child(3).active .mob-tab-icon{ background: #ecfdf5; transform: translateY(-3px) scale(1.08); }
.mob-tab:nth-child(3).active::before      { width: 32px; background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,.5); }
.mob-tab:nth-child(3):not(.active):hover  { color: #059669; }

/* Tab 4 – Kanji: Indigo */
.mob-tab:nth-child(4).active              { color: #4f46e5; }
.mob-tab:nth-child(4).active .mob-tab-icon{ background: #eef2ff; transform: translateY(-3px) scale(1.08); }
.mob-tab:nth-child(4).active::before      { width: 32px; background: #6366f1; box-shadow: 0 0 8px rgba(99,102,241,.5); }
.mob-tab:nth-child(4):not(.active):hover  { color: #4f46e5; }

/* Tab 5 – Lainnya: Purple */
.mob-tab:nth-child(5).active              { color: #7c3aed; }
.mob-tab:nth-child(5).active .mob-tab-icon{ background: #f5f3ff; transform: translateY(-3px) scale(1.08); }
.mob-tab:nth-child(5).active::before      { width: 32px; background: #8b5cf6; box-shadow: 0 0 8px rgba(139,92,246,.5); }
.mob-tab:nth-child(5):not(.active):hover  { color: #7c3aed; }

/* More icon */
.mob-more-icon { font-size: 20px; font-weight: 700; letter-spacing: 2px; }

/* ══════════════════════════════════════════
   MOBILE BOTTOM SHEET DRAWER
══════════════════════════════════════════ */
.mob-more-drawer {
  display: none;
  position: fixed; inset: 0; z-index: 300;
}
.mob-more-drawer.open { display: block; }

.mob-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  animation: fadeInBd 0.22s ease;
}

@keyframes fadeInBd { from { opacity:0; } to { opacity:1; } }

.mob-drawer-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 14px 20px;
  padding-bottom: max(32px, env(safe-area-inset-bottom, 32px));
  animation: slideUpSheet 0.3s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 -8px 48px rgba(0,0,0,.18);
}

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

.mob-drawer-handle {
  width: 40px;
  height: 4px;
  background: #e5e7eb;
  border-radius: 99px;
  margin: 0 auto 16px;
}

.mob-drawer-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-400);
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-jp);
}

.mob-drawer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.mob-drawer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-100);
  background: var(--gray-50);
  cursor: pointer;
  font-family: var(--font-jp);
  text-decoration: none;
  color: var(--gray-600);
  transition: all 0.18s ease;
}

.mob-drawer-item:hover,
.mob-drawer-item:active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
  transform: scale(0.97);
}

.mob-drawer-icon {
  font-size: 28px;
  line-height: 1;
  display: block;
}

.mob-drawer-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

/* Active state for drawer items */
.mob-drawer-item.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* Dark mode: Mobile Bottom Nav */
html.dark-mode .mobile-bottom-nav {
  background: #16151f;
  border-top-color: rgba(255,255,255,.06);
  box-shadow: 0 -4px 24px rgba(0,0,0,.4);
}

html.dark-mode .mob-tab { color: #4b5563; }
html.dark-mode .mob-tab.active { color: var(--primary); }

html.dark-mode .mob-drawer-sheet {
  background: #1c1b27;
}

html.dark-mode .mob-drawer-handle { background: #282737; }

html.dark-mode .mob-drawer-item {
  background: #1c1b29;
  border-color: rgba(255,255,255,.07);
  color: #6b7280;
}

html.dark-mode .mob-drawer-item:hover,
html.dark-mode .mob-drawer-item:active,
html.dark-mode .mob-drawer-item.active {
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.4);
  color: #a5b4fc;
}

html.dark-mode .mob-drawer-backdrop { background: rgba(0,0,0,.65); }

/* ──────────── Page Header ──────────── */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 {
  font-size: 21px;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.5px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-header h1::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--grad-primary);
  border-radius: 50%;
  margin-left: 2px;
  vertical-align: middle;
}
.page-header p  { font-size: 13px; color: #9ca3af; margin-top: 4px; }

/* ──────────── Cards ──────────── */
.card {
  background: #ffffff;
  border: 1px solid #ededf2;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.03);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 32px rgba(99,102,241,.06);
  border-color: #e0deee;
}

.card + .card { margin-top: 12px; }

/* ──────────── Stat Cards ──────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 1.25rem;
}

.stat-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: center;
  border: 1px solid #ededf2;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-primary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.stat-card:hover {
  box-shadow: 0 4px 16px rgba(99,102,241,.1);
  border-color: #dddaf0;
  transform: translateY(-1px);
}

.stat-label {
  font-size: 11px;
  color: var(--gray-400);
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.stat-val {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--gray-900);
}

.stat-val.green  { color: var(--green); }
.stat-val.red    { color: var(--red); }
.stat-val.amber  { color: var(--amber); }
.stat-val.blue   { color: var(--blue); }

/* ──────────── Progress Bar ──────────── */
.progress-wrap {
  background: var(--gray-100);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--grad-primary);
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px var(--primary-glow);
}

/* ──────────── Quiz Card ──────────── */
.quiz-card {
  background: #ffffff;
  border: 1px solid #ededf2;
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 16px 48px rgba(99,102,241,.07);
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.quiz-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-primary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.bab-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-600);
}

.cat-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
  margin-left: 6px;
}

.q-num {
  font-size: 12px;
  color: var(--gray-400);
  font-family: var(--font-mono);
}

.word-display {
  text-align: center;
  padding: 1.75rem 0 1.25rem;  /* padding atas lebih besar agar rt tidak terpotong */
}

.word-jp {
  font-size: 52px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.6;          /* lebih tinggi agar furigana tidak terpotong */
  margin-bottom: 6px;
  letter-spacing: -1px;
}

.word-sub {
  font-size: 13px;
  color: var(--gray-400);
  font-family: var(--font-mono);
}

.question-label {
  font-size: 13px;
  color: var(--gray-400);
  text-align: center;
  margin-bottom: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--gray-100);
}

/* ──────────── Options Grid ──────────── */
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Minna Kanji quiz: 1 column on mobile (arti text tends to be long) */
@media (max-width: 640px) {
  .mk-options-grid {
    grid-template-columns: 1fr;
  }
  .mk-options-grid .option-btn {
    font-size: 14px;
    padding: 16px 14px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mk-options-grid .option-btn .opt-kanji {
    font-size: 36px;
    min-width: 44px;
    text-align: center;
  }
}



.option-btn {
  background: var(--primary-light);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 14px 12px;
  font-size: 13px;
  color: var(--gray-900);
  font-family: var(--font-jp);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  line-height: 1.5;
  white-space: pre-line;
  word-break: break-word;
  font-weight: 600;
  position: relative;
  overflow: visible; /* allow content to grow; ::before clips via border-radius */
}

.option-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: inherit;
}

.option-btn:hover:not(:disabled) {
  border-color: var(--primary);
  box-shadow: 0 4px 16px var(--primary-glow);
  transform: translateY(-2px);
  color: var(--primary-dark);
}

.option-btn.correct {
  background: var(--green-light) !important;
  border-color: var(--green) !important;
  color: var(--green-dark) !important;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(16,185,129,.25) !important;
}

.option-btn.wrong {
  background: var(--red-light) !important;
  border-color: var(--red) !important;
  color: #7f1d1d !important;
  box-shadow: 0 4px 16px rgba(239,68,68,.2) !important;
}

.option-btn:disabled { cursor: default; transform: none !important; }

/* ──────────── Reveal extra info setelah menjawab ──────────── */
.opt-main {
  display: block;
  line-height: 1.4;
}

.opt-extra {
  display: block;
  font-size: 11px;
  font-family: var(--font-jp);
  color: var(--gray-400);
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(0,0,0,.07);
  letter-spacing: 0.5px;
  animation: optExtraReveal 0.3s ease forwards;
  word-break: break-word;
  white-space: normal;
}

/* Kanji character inside option button (arti_kanji / baca_kanji mode) */
.opt-kanji {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  font-family: var(--font-jp);
  color: var(--gray-900);
}

@keyframes optExtraReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Warna extra text sesuai status tombol */
.option-btn.correct .opt-extra {
  color: var(--green-dark);
  border-top-color: rgba(16,185,129,.2);
}
.option-btn.wrong .opt-extra {
  color: #9b2626;
  border-top-color: rgba(239,68,68,.2);
}

/* Dark mode */
html.dark-mode .opt-extra              { color: #4b5563; border-top-color: rgba(255,255,255,.08); }
html.dark-mode .option-btn.correct .opt-extra { color: #34d399; border-top-color: rgba(52,211,153,.2); }
html.dark-mode .option-btn.wrong   .opt-extra { color: #f87171; border-top-color: rgba(248,113,113,.2); }

/* ──────────── Kanji reveal setelah menjawab ──────────── */
.opt-extra-kanji {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-700);
  line-height: 1.1;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,.07);
  animation: optExtraReveal 0.3s ease forwards;
  opacity: 0;
  transform: translateY(-4px);
  font-family: var(--font-jp);
}

.opt-extra-baca {
  display: block;
  font-size: 11px;
  font-family: var(--font-jp);
  color: var(--gray-400);
  margin-top: 3px;
  animation: optExtraReveal 0.35s ease forwards;
  opacity: 0;
  letter-spacing: 0.3px;
}

/* Warna sesuai status */
.option-btn.correct .opt-extra-kanji { color: var(--green-dark); border-top-color: rgba(16,185,129,.2); }
.option-btn.correct .opt-extra-baca  { color: #10b981; }
.option-btn.wrong   .opt-extra-kanji { color: #9b2626; border-top-color: rgba(239,68,68,.2); }
.option-btn.wrong   .opt-extra-baca  { color: #e05252; }

/* Dark mode */
html.dark-mode .opt-extra-kanji              { color: #c4b5fd; border-top-color: rgba(255,255,255,.08); }
html.dark-mode .opt-extra-baca               { color: #4b5563; }
html.dark-mode .option-btn.correct .opt-extra-kanji { color: #34d399; border-top-color: rgba(52,211,153,.2); }
html.dark-mode .option-btn.correct .opt-extra-baca  { color: #34d399; }
html.dark-mode .option-btn.wrong   .opt-extra-kanji { color: #f87171; border-top-color: rgba(248,113,113,.2); }
html.dark-mode .option-btn.wrong   .opt-extra-baca  { color: #f87171; }


/* ──────────── Feedback Bar ──────────── */
.feedback-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: 1rem;
}

.feedback-bar.show    { display: flex; }
.feedback-bar.correct { background: var(--green-light); color: var(--green-dark); }
.feedback-bar.wrong   { background: var(--red-light);   color: #501313; }
.feedback-bar.skip    { background: var(--amber-light);  color: #633806; }

.fb-icon { font-size: 16px; flex-shrink: 0; }

/* ──────────── Action Row ──────────── */
.action-row {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}

/* ──────────── Buttons ──────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-jp);
  border: 2px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-900);
  transition: all 0.2s ease;
  text-decoration: none;
  letter-spacing: 0.1px;
}

.btn:hover  { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px var(--primary-glow); }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px var(--primary-glow);
}
.btn-primary:hover {
  background: linear-gradient(135deg,#5a5ee8,#6a3f91);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 24px var(--primary-glow);
  transform: translateY(-2px);
}

.btn-full { width: 100%; padding: 14px 20px; font-size: 15px; font-weight: 700; border-radius: var(--radius-lg); }
.btn-sm   { padding: 6px 14px; font-size: 12px; }

/* ──────────── Form Controls ──────────── */
.form-group { margin-bottom: 1rem; }
.form-label { font-size: 12px; color: var(--gray-400); margin-bottom: 5px; display: block; }

select, input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius-md);
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--gray-900);
  background: var(--white);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888780' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

input[type="text"] {
  background-image: none;
  padding-right: 12px;
  cursor: text;
}

select:focus, input:focus {
  outline: none;
  border-color: var(--green);
}

.controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 1rem;
}

/* ──────────── Start Screen ──────────── */
.start-hero {
  text-align: center;
  padding: 1.5rem 0 1.25rem;
}

.hero-icon { font-size: 56px; margin-bottom: 0.75rem; line-height: 1; }
.hero-title { font-size: 24px; font-weight: 500; margin-bottom: 6px; }
.hero-sub { font-size: 13px; color: var(--gray-400); }

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 1.25rem 0;
}

.feature-item {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 12px;
}

.feature-item strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 3px;
}

.feature-item span {
  font-size: 12px;
  color: var(--gray-400);
}

/* ──────────── Result Screen ──────────── */
.result-center {
  text-align: center;
  padding: 2rem 1rem;
}

.result-emoji { font-size: 52px; line-height: 1; margin-bottom: 1rem; }

.result-score {
  font-size: 52px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
  margin-bottom: 4px;
}

.result-label {
  font-size: 15px;
  color: var(--gray-400);
  margin-bottom: 1.5rem;
}

.result-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1.5rem;
}

.rb-card {
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 14px 10px;
}

.rb-val {
  font-size: 24px;
  font-weight: 500;
  font-family: var(--font-mono);
}

.rb-lbl { font-size: 11px; color: var(--gray-400); margin-top: 4px; }

.result-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ──────────── Vocab Browser ──────────── */
.vocab-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 1rem;
}

.vocab-table-wrap {
  overflow-x: auto;
}

.vocab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.vocab-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-400);
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.vocab-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}

.vocab-table tr:hover td { background: var(--gray-50); }

.bab-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
  font-family: var(--font-mono);
}

.cat-pill {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-600);
}

.jp-text { font-size: 16px; font-weight: 500; }
.hira-text { font-size: 12px; color: var(--gray-400); }

.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 1rem;
}

.page-btn {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-100);
  background: var(--white);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: var(--transition);
}

.page-btn:hover   { background: var(--gray-50); }
.page-btn.active  { background: var(--green); color: var(--white); border-color: var(--green); }
.page-btn:disabled { opacity: 0.4; cursor: default; }

/* ──────────── Stats Screen ──────────── */
.stats-section-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.5rem 0 0.75rem;
}

.sessions-list { display: flex; flex-direction: column; gap: 8px; }

.session-item {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.session-score {
  font-size: 20px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--green);
  min-width: 50px;
}

.session-info { flex: 1; }
.session-info strong { display: block; font-size: 13px; font-weight: 500; }
.session-info span   { font-size: 12px; color: var(--gray-400); }

.session-acc {
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-mono);
}

.hardest-list { display: flex; flex-direction: column; gap: 6px; }

.hardest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.wrong-count {
  background: var(--red-light);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
}

/* ──────────── Timer Display ──────────── */
.timer-display {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 4px 12px;
  border-radius: 999px;
}

.timer-display.warn { color: var(--red); background: var(--red-light); }

/* ──────────── Loading ──────────── */
.loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gray-400);
  font-size: 13px;
}

.loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--gray-100);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto 0.75rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ──────────── Toast ──────────── */
.toast-wrap {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.toast {
  background: var(--gray-900);
  color: var(--white);
  font-size: 13px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: toastIn 0.2s ease, toastOut 0.3s ease 2.5s forwards;
}

@keyframes toastIn  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { to   { opacity:0; transform:translateY(8px); } }

/* ──────────── Mode Badge ──────────── */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
}

.mk-arti-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font-weight: 700;
}
html.dark-mode .mk-arti-badge {
  background: rgba(22,101,52,.25);
  color: #86efac;
}
/* ──────────── Dark Mode Toggle Button ──────────── */
.dark-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all var(--transition);
  flex-shrink: 0;
  line-height: 1;
}

.dark-toggle:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
  transform: scale(1.08);
}

.dark-toggle:active { transform: scale(0.95); }

/* ── Furigana Toggle Button ── */
.furigana-toggle-btn {
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1.5px solid var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-jp);
  letter-spacing: 0.3px;
  transition: all var(--transition);
  flex-shrink: 0;
  white-space: nowrap;
  gap: 3px;
}
.furigana-toggle-btn:hover {
  background: var(--primary);
  color: #fff;
  transform: scale(1.05);
}
.furigana-toggle-btn:active { transform: scale(0.95); }
.furigana-toggle-btn.furigana-btn-off {
  border-color: var(--gray-300);
  background: var(--gray-50);
  color: var(--gray-400);
}
html.dark-mode .furigana-toggle-btn {
  background: rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.4);
  color: #a5b4fc;
}
html.dark-mode .furigana-toggle-btn.furigana-btn-off {
  background: transparent;
  border-color: #374151;
  color: #374151;
}
@media (max-width: 640px) {
  .furigana-toggle-btn { display: none; }
}

/* ──────────── Responsive ──────────── */
@media (max-width: 480px) {
  .stats-grid          { grid-template-columns: repeat(2, 1fr); }
  .options-grid        { grid-template-columns: 1fr; }
  .controls-grid       { grid-template-columns: 1fr; }
  .features-grid       { grid-template-columns: 1fr; }
  .vocab-filters       { grid-template-columns: 1fr 1fr; }
  .result-breakdown    { grid-template-columns: repeat(3, 1fr); }
  .nav-tab-label       { display: none; }
  .nav-tab             { padding: 7px 10px; }
  .nav-admin-btn span  { display: none; }
  .nav-admin-btn       { padding: 6px 9px; }
  .word-jp             { font-size: 40px; line-height: 1.8; }
  .kanji-char          { font-size: 52px; }

  /* Kanji vocab grid: 2 kolom di mobile */
  .kanji-card-grid     { grid-template-columns: repeat(2, 1fr); }
  /* Reset border aturan 4n, ganti ke 2n untuk 2-kolom */
  .kanji-card-item:nth-child(4n)  { border-right: 1px solid var(--gray-100); }
  .kanji-card-item:nth-child(2n)  { border-right: none; }
  .kanji-card-item     { padding: 12px 10px; }
  .kanji-card-char     { font-size: 32px; margin-bottom: 6px; }
  .kanji-card-arti     { font-size: 11px; }
  .kanji-card-contoh   { padding: 4px 6px; font-size: 10px; }
  .contoh-kata         { font-size: 13px; }
  .contoh-baca,
  .contoh-arti         { font-size: 10px; }
}

/* ──────────── Kanji Quiz Styles ──────────── */

/* Large kanji character display */
.kanji-char {
  font-size: 80px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -2px;
  text-align: center;
}

/* Reading hints below kanji */
.kanji-reading-hints {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* On'yomi badge (red/coral) */
.badge-onyomi {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--red-light);
  color: var(--red);
  font-weight: 500;
  white-space: nowrap;
}

/* Kun'yomi badge (blue) */
.badge-kunyomi {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
  font-weight: 500;
  white-space: nowrap;
}

/* Kanji option button (large char) */
.opt-kanji {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

/* Mode tag in quiz card meta */
.kanji-mode-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--amber-light);
  color: var(--amber);
  margin-left: 6px;
  font-weight: 500;
}

/* Kanji badge in result */
.kanji-badge {
  background: var(--amber-light) !important;
  color: var(--amber) !important;
}

/* ──────────── Kanji Vocab Card Grid ──────────── */
.kanji-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.kanji-card-item {
  padding: 16px 14px;
  border-right: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
  min-width: 0; /* prevent overflow in grid */
  overflow: hidden;
}

.kanji-card-item:nth-child(4n) { border-right: none; }
.kanji-card-item:hover { background: var(--gray-50); }

.kanji-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kanji-card-char {
  font-size: 42px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
  margin-bottom: 8px;
  text-align: center;
}

.kanji-card-readings {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.kanji-card-arti {
  font-size: 12px;
  color: var(--gray-900);
  font-weight: 500;
  margin-bottom: 8px;
}

.kanji-card-contoh {
  padding: 6px 8px;
  background: var(--gray-50);
  border-left: 2px solid var(--green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 11px;
}

.contoh-kata {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
}

.contoh-baca {
  display: block;
  font-size: 11px;
  color: var(--gray-400);
  font-family: var(--font-mono);
  margin-top: 2px;
}

.contoh-arti {
  display: block;
  font-size: 11px;
  color: var(--gray-600);
  margin-top: 2px;
}

/* Stroke count badge */
.stroke-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green-dark);
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Hardest kanji char in stats */
.kanji-hardest-char {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
  min-width: 32px;
  text-align: center;
}

/* ──────────── Stats Tab Toggle ──────────── */
.stats-tab-wrap {
  display: flex;
  gap: 6px;
  margin-bottom: 1.25rem;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 4px;
}

.stats-tab {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
}

.stats-tab.active {
  background: var(--white);
  color: var(--gray-900);
  box-shadow: var(--shadow-sm);
}

.stats-tab:hover:not(.active) { color: var(--gray-900); }

/* ──────────── Kanji Vocab Tabs ──────────── */
.kv-tab-row {
  display: flex;
  gap: 8px;
  background: var(--gray-100);
  padding: 6px;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}
.kv-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-jp);
}
.kv-tab.active {
  background: var(--white);
  color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
}
html.dark-mode .kv-tab-row { background: var(--gray-200); }
html.dark-mode .kv-tab { color: var(--gray-400); }
html.dark-mode .kv-tab.active { background: var(--gray-100); color: var(--primary); }

/* ──────────── Kanji Vocab Filters ──────────── */
.kanji-vocab-filters {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}

/* ──────────── Extra dark mode overrides for kanji ──────────── */
html.dark-mode .badge-onyomi  { color: #ff9999; background: #3a1111; }
html.dark-mode .badge-kunyomi { color: #6AABF7; background: #0d2340; }
html.dark-mode .kanji-card-item:hover { background: var(--gray-100); }
html.dark-mode .kanji-hardest-char { color: var(--gray-900); }

html.dark-mode .stats-tab,
html.dark-mode .kanji-card-item,
html.dark-mode .stroke-badge {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ──────────── Level Pills (JLPT) ──────────── */
.level-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Pra Minna — hijau tua */
.level-pill.level-pra  { background: #DDFBE8; color: #0d6932; }
/* N5 — biru */
.level-pill.level-n5   { background: var(--blue-light); color: var(--blue); }
/* N4 — teal */
.level-pill.level-n4   { background: #D6F5F2; color: #0e7c75; }
/* N3 — amber */
.level-pill.level-n3   { background: var(--amber-light); color: var(--amber); }
/* N2 — oranye */
.level-pill.level-n2   { background: #FDE8D0; color: #b55a0a; }
/* N1 — merah */
.level-pill.level-n1   { background: var(--red-light); color: var(--red); }

/* Dark mode overrides */
html.dark-mode .level-pill.level-pra { background: #0d3a20; color: #4ade80; }
html.dark-mode .level-pill.level-n5  { background: #0d2340; color: #6AABF7; }
html.dark-mode .level-pill.level-n4  { background: #063330; color: #2dd4bf; }
html.dark-mode .level-pill.level-n3  { background: #3a2403; color: #E0A040; }
html.dark-mode .level-pill.level-n2  { background: #3a1a03; color: #fb923c; }
html.dark-mode .level-pill.level-n1  { background: #3a1111; color: #F07070; }


/* ══════════════════════════════════════════════════════════════
   KUIS HIRAGANA & KATAKANA — Styles
   ══════════════════════════════════════════════════════════════ */

/* ──────────── Kana Start Screen Hero ──────────── */
.kana-hero-accent {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  color: #fff;
  text-align: center;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}

.kana-hero-accent::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}

.kana-hero-accent::after {
  content: '';
  position: absolute;
  bottom: -30px; left: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}

.kana-hero-chars {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 0.6rem;
  letter-spacing: 8px;
  position: relative;
  z-index: 1;
}

.kana-hero-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

.kana-hero-sub {
  font-size: 12px;
  opacity: .8;
  position: relative;
  z-index: 1;
}

/* ──────────── Kana Sub Navigation ──────────── */
.kana-sub-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 1.25rem;
}

.kana-sub-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-100);
  background: var(--white);
  color: var(--gray-600);
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.kana-sub-btn:hover {
  border-color: #764ba2;
  color: #764ba2;
  background: #f5f3ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(118,75,162,.15);
}

.kana-sub-btn .kana-btn-icon {
  font-size: 22px;
}

/* ──────────── Kana Type Tag ──────────── */
.kana-type-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #667eea22, #764ba222);
  color: #764ba2;
  margin-left: 6px;
  font-weight: 600;
}

html.dark-mode .kana-type-tag {
  background: #2d1f4a;
  color: #b39ddb;
}

/* ──────────── Kana Character Display ──────────── */
.kana-word-display {
  text-align: center;
  padding: 1.5rem 0 1rem;
}

.kana-char-big {
  font-size: 100px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -2px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kana-romaji-big {
  font-size: 64px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--gray-900);
  line-height: 1;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Bounce animation for new question */
@keyframes kanaBounce {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.kana-bounce { animation: kanaBounce 0.32s cubic-bezier(.34,1.56,.64,1); }

/* ──────────── Option Button - Kana variant ──────────── */
.opt-kana-char {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gray-900);
}

.opt-kana-sub {
  display: block;
  font-size: 11px;
  color: var(--gray-400);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* ──────────── Kana Badge ──────────── */
.kana-badge {
  background: linear-gradient(135deg, #667eea22, #764ba222) !important;
  color: #764ba2 !important;
}

html.dark-mode .kana-badge {
  background: #2d1f4a !important;
  color: #b39ddb !important;
}

/* ──────────── Kana Result Weak List ──────────── */
.kana-weak-section {
  margin: 1rem 0 1.5rem;
  padding: 1rem;
  background: var(--red-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--red);
  border-opacity: .3;
}

.kana-weak-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 0.5rem;
}

.kana-weak-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--white);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.kana-weak-char {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
}

.kana-weak-romaji {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--gray-400);
}

/* ──────────── Kana Tabel Screen ──────────── */
.kana-tabel-toggle {
  display: flex;
  gap: 4px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 1rem;
}

.kana-tabel-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
}

.kana-tabel-btn.active {
  background: #764ba2;
  color: #fff;
  box-shadow: 0 2px 8px rgba(118,75,162,.3);
}

.kana-tabel-btn:hover:not(.active) { color: var(--gray-900); background: var(--gray-100); }

.kana-tabel-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--gray-400);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.kana-legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.kana-legend-dot.mastered   { background: var(--green); }
.kana-legend-dot.learning   { background: var(--amber); }
.kana-legend-dot.needs-work { background: var(--red); }

.kana-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 1.5rem 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kana-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-100);
}

/* ──────────── Kana Table Grid ──────────── */
.kana-table-wrap {
  overflow-x: auto;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-100);
}

.kana-table {
  display: grid;
  min-width: 340px;
}

.kana-th, .kana-th-head, .kana-th-side {
  padding: 6px 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400);
  font-family: var(--font-mono);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}

.kana-th-side {
  border-right: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.kana-cell {
  padding: 8px 4px;
  text-align: center;
  border-right: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  cursor: default;
  transition: background var(--transition);
  position: relative;
}

.kana-cell:last-child { border-right: none; }
.kana-cell-empty { background: var(--gray-50); }

.kana-cell:hover:not(.kana-cell-empty) { background: #f5f3ff; }

.kana-main {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
}

.kana-main.kata { color: #764ba2; }

.kana-both {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: baseline;
  font-size: 18px;
  font-weight: 700;
}

.kana-both .kata { color: #764ba2; }

.kana-rom {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--gray-400);
  margin-top: 2px;
}

.kana-acc {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  margin-top: 2px;
}

/* Mastery status colors on cells */
.kana-cell.mastered   { background: #f0fdf4; }
.kana-cell.learning   { background: #fffbeb; }
.kana-cell.needs-work { background: #fff5f5; }

html.dark-mode .kana-cell.mastered   { background: #0d3327; }
html.dark-mode .kana-cell.learning   { background: #3a2403; }
html.dark-mode .kana-cell.needs-work { background: #3a1111; }

/* ──────────── Progress Screen ──────────── */
.kana-progress-bar-wrap {
  height: 10px;
  background: var(--gray-100);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.kana-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 999px;
  transition: width 0.8s ease;
}

.kana-weak-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 0.75rem;
}

.kana-weak-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 10px 6px;
  text-align: center;
  transition: all var(--transition);
}

.kana-weak-card:hover {
  border-color: var(--red);
  background: var(--red-light);
}

.kana-weak-h {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
}

.kana-weak-k {
  font-size: 18px;
  font-weight: 700;
  color: #764ba2;
  line-height: 1;
  margin-top: 2px;
}

.kana-weak-r {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--gray-400);
  margin-top: 3px;
}

.kana-weak-acc {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-top: 3px;
}

/* ──────────── Features List Kana ──────────── */
.kana-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 1rem 0;
}

.kana-feat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  font-size: 12px;
}

.kana-feat-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.kana-feat-title { font-weight: 600; display: block; font-size: 12px; }
.kana-feat-desc  { color: var(--gray-400); font-size: 11px; }

/* ──────────── Pill Button Group ──────────── */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Section label inside pill group */
.pill-group-section-label {
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gray-400);
  padding: 2px 0;
}

/* JLPT pills — slightly bigger and bolder */
.pill-jlpt {
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 8px 20px !important;
  letter-spacing: 0.5px;
}

.pill-opt {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--gray-200);
  background: var(--gray-50);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-jp);
  color: var(--gray-600);
  transition: all 0.18s ease;
  white-space: nowrap;
  line-height: 1;
}

.pill-opt:hover {
  border-color: #b39ddb;
  color: #764ba2;
  background: #f5f3ff;
  transform: translateY(-1px);
}

.pill-opt.active {
  background: #764ba2;
  border-color: #764ba2;
  color: #fff;
  box-shadow: 0 2px 8px rgba(118,75,162,.3);
}

/* JLPT colored pill variants */
.pill-opt.pill-pra { border-color: #86efac; color: #0d6932; background: #DDFBE8; }
.pill-opt.pill-pra:hover,
.pill-opt.pill-pra.active { background: #0d6932; border-color: #0d6932; color: #fff; box-shadow: 0 2px 8px rgba(13,105,50,.3); }

.pill-opt.pill-n5 { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.pill-opt.pill-n5:hover,
.pill-opt.pill-n5.active { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(24,95,165,.3); }

.pill-opt.pill-n4 { border-color: #0e7c75; color: #0e7c75; background: #D6F5F2; }
.pill-opt.pill-n4:hover,
.pill-opt.pill-n4.active { background: #0e7c75; border-color: #0e7c75; color: #fff; box-shadow: 0 2px 8px rgba(14,124,117,.3); }

.pill-opt.pill-n3 { border-color: var(--amber); color: var(--amber); background: var(--amber-light); }
.pill-opt.pill-n3:hover,
.pill-opt.pill-n3.active { background: var(--amber); border-color: var(--amber); color: #fff; box-shadow: 0 2px 8px rgba(186,117,23,.3); }

.pill-opt.pill-n2 { border-color: #b55a0a; color: #b55a0a; background: #FDE8D0; }
.pill-opt.pill-n2:hover,
.pill-opt.pill-n2.active { background: #b55a0a; border-color: #b55a0a; color: #fff; box-shadow: 0 2px 8px rgba(181,90,10,.3); }

.pill-opt.pill-n1 { border-color: var(--red); color: var(--red); background: var(--red-light); }
.pill-opt.pill-n1:hover,
.pill-opt.pill-n1.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(226,75,74,.3); }

/* Dark mode */
html.dark-mode .pill-opt {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--gray-600);
}
html.dark-mode .pill-opt:hover {
  border-color: #9c7cc8;
  color: #c4b0e8;
  background: #2d1f4a;
}
html.dark-mode .pill-opt.active {
  background: #764ba2;
  border-color: #764ba2;
  color: #fff;
}

/* ──────────── Mode Card Selector ──────────── */
.mode-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mode-card-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px;
  border-radius: var(--radius-md);
  border: 2px solid var(--gray-100);
  background: var(--gray-50);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-jp);
  color: var(--gray-600);
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #667eea15, #764ba215);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mode-card:hover {
  border-color: #b39ddb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(118,75,162,.15);
}

.mode-card:hover::before { opacity: 1; }

.mode-card.active {
  border-color: #764ba2;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  color: #5b21b6;
  box-shadow: 0 4px 16px rgba(118,75,162,.25);
  transform: translateY(-1px);
}

.mode-card.active .mode-card-desc { color: #9d7cbf; }

.mode-card-icon {
  font-size: 28px;
  line-height: 1;
  display: block;
  margin-bottom: 2px;
}

.mode-card-title {
  font-size: 12px;
  font-weight: 700;
  display: block;
  line-height: 1.3;
}

.mode-card-desc {
  font-size: 10px;
  color: var(--gray-400);
  display: block;
  line-height: 1.3;
}

/* Dark mode */
html.dark-mode .mode-card {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--gray-600);
}

html.dark-mode .mode-card:hover {
  border-color: #9c7cc8;
}

html.dark-mode .mode-card.active {
  background: linear-gradient(135deg, #2d1f4a, #3b2660);
  border-color: #9c7cc8;
  color: #c4b0e8;
}

html.dark-mode .mode-card.active .mode-card-desc {
  color: #9c7cc8;
}

/* Responsive */
@media (max-width: 480px) {
  .mode-card-grid        { grid-template-columns: repeat(2, 1fr); }
  .mode-card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .mode-card-icon        { font-size: 22px; }
  .mode-card             { padding: 10px 6px; }
}

/* ── Kotoba mode-card grid: 5 mode (3 + 2 choukai) ── */
#pgModeGrid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 600px) { #pgModeGrid { grid-template-columns: repeat(2, 1fr); } }

/* ── Choukai (Audio) mode card variant ── */
.mode-card--audio {
  border-color: #c4b5fd;
  background: linear-gradient(135deg, #faf5ff, #ede9fe);
}

.mode-card--audio:hover {
  border-color: #7c3aed;
  box-shadow: 0 4px 14px rgba(124,58,237,.2);
}

.mode-card--audio.active {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  box-shadow: 0 4px 18px rgba(124,58,237,.3);
}

.mode-card-audio-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 9px;
  font-weight: 800;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  border-radius: 99px;
  padding: 2px 7px;
  letter-spacing: .3px;
  white-space: nowrap;
}

html.dark-mode .mode-card--audio {
  background: linear-gradient(135deg, #2d1f4a, #3b2660);
  border-color: #7c3aed;
}

html.dark-mode .mode-card--audio.active {
  background: linear-gradient(135deg, #3b2660, #4c3280);
  border-color: #9d7cbf;
}


/* ──────────── Kana Typing Mode (ketik) ──────────── */
.kana-type-area {
  padding: 0.5rem 0 0.25rem;
}

.kana-type-input-wrap {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.kana-type-input {
  flex: 1;
  font-size: 22px !important;
  font-family: var(--font-mono) !important;
  text-align: center;
  padding: 14px 16px !important;
  border-radius: var(--radius-md) !important;
  border: 2px solid var(--gray-200) !important;
  background: var(--white) !important;
  color: var(--gray-900) !important;
  background-image: none !important;
  letter-spacing: 3px;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.kana-type-input:focus {
  outline: none;
  border-color: #764ba2 !important;
  box-shadow: 0 0 0 3px rgba(118,75,162,.15);
}

.kana-type-input:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

.kana-type-submit {
  padding: 14px 20px !important;
  font-size: 15px !important;
  border-radius: var(--radius-md) !important;
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  border-color: transparent !important;
  flex-shrink: 0;
}

.kana-type-submit:hover {
  background: linear-gradient(135deg, #5a6fd8, #673fa0) !important;
  border-color: transparent !important;
}

.kana-type-hint {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
  min-height: 20px;
  font-family: var(--font-mono);
  line-height: 1.5;
}

/* Shake animation for empty submit */
@keyframes kana-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

/* Dark mode for type area */
html.dark-mode .kana-type-input {
  background: var(--white) !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-900) !important;
}

html.dark-mode .kana-type-input:focus {
  border-color: #b39ddb !important;
  box-shadow: 0 0 0 3px rgba(179,157,219,.2);
}

/* Responsive */
@media (max-width: 480px) {
  .kana-char-big { font-size: 72px; }
  .kana-romaji-big { font-size: 48px; }
  .kana-sub-nav { grid-template-columns: 1fr 1fr; }
  .kana-weak-grid { grid-template-columns: repeat(4, 1fr); }
  .kana-features { grid-template-columns: 1fr; }
  .opt-kana-char { font-size: 24px; }
  .kana-type-input { font-size: 18px !important; }
  .kana-type-submit { padding: 12px 14px !important; font-size: 13px !important; }
}

/* ══════════════════════════════════════════
   FLASHCARD KANJI
══════════════════════════════════════════ */

/* Filter bar */
.fc-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 0;
}

.fc-filter-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.fc-filter-right {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.fc-shuffle-btn, .fc-reset-btn {
  padding: 7px 14px;
  font-size: 12px;
  border-radius: var(--radius-md);
}

/* Progress */
.fc-progress-wrap {
  height: 5px;
  background: var(--gray-100);
  border-radius: 999px;
  margin: 12px 0 6px;
  overflow: hidden;
}

.fc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 999px;
  transition: width 0.5s ease;
}

.fc-progress-stats {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 16px;
}

.fc-stat {
  font-size: 13px;
  font-weight: 600;
}

.fc-stat.green { color: var(--green); }
.fc-stat.red   { color: var(--red); }
.fc-stat.gray  { color: var(--gray-400); }

/* Flashcard 3D Scene */
.fc-scene {
  perspective: 1200px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 16px;
  cursor: pointer;
}

.fc-card {
  width: 100%;
  aspect-ratio: 3/2;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius-lg);
}

.fc-card.is-flipped {
  transform: rotateY(180deg);
}

/* Card faces */
.fc-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}

/* FRONT */
.fc-front {
  background: linear-gradient(145deg, #1a1040 0%, #2d1f6a 50%, #3b2a8a 100%);
  box-shadow: 0 20px 60px rgba(118,75,162,.4), 0 0 0 1px rgba(255,255,255,.08);
}

.fc-front::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  border-radius: 50%;
}

.fc-level-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* Level badge colors */
.fc-lv-pra { background: #0d6932; color: #fff; }
.fc-lv-n5  { background: var(--blue); color: #fff; }
.fc-lv-n4  { background: #0e7c75; color: #fff; }
.fc-lv-n3  { background: var(--amber); color: #fff; }
.fc-lv-n2  { background: #b55a0a; color: #fff; }
.fc-lv-n1  { background: var(--red); color: #fff; }

.fc-kanji-big {
  font-family: var(--font-jp);
  font-size: 100px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,.4);
  letter-spacing: -2px;
}

.fc-hint {
  position: absolute;
  bottom: 14px;
  font-size: 11px;
  color: rgba(255,255,255,.4);
  letter-spacing: .3px;
}

/* Scene states (after marking) */
.fc-scene-hafal .fc-front {
  background: linear-gradient(145deg, #0d3d1e, #155c30, #1a7d40);
  box-shadow: 0 20px 60px rgba(13,105,50,.4), 0 0 0 1px rgba(255,255,255,.08);
}

.fc-scene-belum .fc-front {
  background: linear-gradient(145deg, #3d0d0d, #6b1919, #8a2020);
  box-shadow: 0 20px 60px rgba(181,30,30,.4), 0 0 0 1px rgba(255,255,255,.08);
}

/* BACK */
.fc-back {
  background: linear-gradient(145deg, #fafafa, #f3f0ff);
  box-shadow: 0 20px 60px rgba(118,75,162,.2), 0 0 0 1px rgba(118,75,162,.12);
  transform: rotateY(180deg);
  gap: 8px;
}

.fc-back-kanji {
  font-family: var(--font-jp);
  font-size: 48px;
  line-height: 1;
  color: #4f3a9e;
  font-weight: 400;
}

.fc-back-arti {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
  text-align: center;
  line-height: 1.3;
}

.fc-readings {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.fc-reading {
  font-family: var(--font-jp);
  font-size: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.fc-reading.on  { background: #fff3cd; color: #856404; }
.fc-reading.kun { background: #cfe2ff; color: #0a58ca; }
.fc-reading-sep { color: var(--gray-300); }

.fc-contoh {
  margin-top: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fc-contoh-word {
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
  display: block;
}

.fc-contoh-baca {
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--gray-400);
  display: block;
}

.fc-contoh-arti {
  font-size: 12px;
  color: var(--gray-500);
  display: block;
}

/* Hafal / Belum buttons */
.fc-answer-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 12px;
}

.fc-btn-belum {
  flex: 1;
  max-width: 200px;
  background: linear-gradient(135deg, #fee2e2, #fca5a5) !important;
  border-color: #f87171 !important;
  color: #991b1b !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px !important;
  transition: all 0.2s ease !important;
}

.fc-btn-belum:hover {
  background: linear-gradient(135deg, #fca5a5, #f87171) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(239,68,68,.3) !important;
}

.fc-btn-hafal {
  flex: 1;
  max-width: 200px;
  background: linear-gradient(135deg, #d1fae5, #6ee7b7) !important;
  border-color: #34d399 !important;
  color: #065f46 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px !important;
  transition: all 0.2s ease !important;
}

.fc-btn-hafal:hover {
  background: linear-gradient(135deg, #6ee7b7, #34d399) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(52,211,153,.3) !important;
}

/* Navigation */
.fc-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.fc-nav-btn {
  padding: 10px 20px;
  font-size: 13px;
  min-width: 90px;
}

.fc-counter {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-500);
  font-family: var(--font-mono);
}

/* Done screen */
.fc-done-wrap {
  text-align: center;
  padding: 32px 20px;
}

.fc-done-emoji {
  font-size: 64px;
  margin-bottom: 12px;
}

.fc-done-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.fc-done-sub {
  font-size: 16px;
  color: var(--gray-500);
  margin-bottom: 4px;
}

/* Dark mode */
html.dark-mode .fc-back {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

html.dark-mode .fc-back-arti { color: var(--white); }
html.dark-mode .fc-back-kanji { color: #c4b0e8; }
html.dark-mode .fc-contoh-word { color: var(--gray-200); }
html.dark-mode .fc-done-title  { color: var(--white); }

/* Responsive */
@media (max-width: 480px) {
  .fc-kanji-big    { font-size: 72px; }
  .fc-back-kanji   { font-size: 36px; }
  .fc-back-arti    { font-size: 18px; }
  .fc-filter-bar   { flex-direction: column; align-items: flex-start; }
  .fc-filter-right { align-self: flex-end; }
  .fc-card         { aspect-ratio: 4/3; }
}




/* ══════════════════════════════════════════
   DARK MODE — Element Overrides
══════════════════════════════════════════ */

/* Body */
html.dark-mode body {
  background: #0c0c14 !important;
  color: #f1f0f9 !important;
}

/* Navbar */
html.dark-mode .top-nav {
  background: rgb(16,15,26) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 8px 32px rgba(0,0,0,.4) !important;
}
html.dark-mode .nav-top-row { border-bottom-color: rgba(255,255,255,.05) !important; }
html.dark-mode .nav-brand-text { color: #f1f0f9; }
html.dark-mode .nav-brand-text small { color: #6b7280; }
html.dark-mode .nav-admin-btn {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #9ca3af !important;
}
html.dark-mode .nav-admin-btn:hover {
  background: rgba(255,255,255,.1) !important;
  color: #f1f0f9 !important;
}
html.dark-mode .nav-tab { color: #4b5563 !important; }
html.dark-mode .nav-tab:hover {
  background: rgba(129,140,248,.1) !important;
  color: #a5b4fc !important;
}
html.dark-mode .nav-tab.active {
  background: rgba(129,140,248,.12) !important;
  color: #a5b4fc !important;
}
html.dark-mode .nav-tab.active::after {
  background: linear-gradient(135deg,#818cf8,#a78bfa) !important;
  box-shadow: 0 0 8px rgba(129,140,248,.4) !important;
}

/* Cards */
html.dark-mode .card {
  background: #16151f !important;
  border-color: rgba(255,255,255,.07) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2) !important;
}
html.dark-mode .card:hover {
  border-color: rgba(129,140,248,.2) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 8px 32px rgba(129,140,248,.08) !important;
}

html.dark-mode .quiz-card {
  background: #1a1928 !important;
  border-color: rgba(255,255,255,.07) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.3) !important;
}

/* Stat cards */
html.dark-mode .stat-card {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.07) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}
html.dark-mode .stat-label { color: #4b5563 !important; }
html.dark-mode .stat-val   { color: #e0e7ff !important; }

/* Page header */
html.dark-mode .page-header h1 { color: #e0e7ff !important; }
html.dark-mode .page-header p  { color: #4b5563 !important; }

/* Progress */
html.dark-mode .progress-wrap { background: #1c1b29 !important; }

/* Tags */
html.dark-mode .bab-tag {
  background: rgba(255,255,255,.07) !important;
  color: #9ca3af !important;
}
html.dark-mode .cat-tag { background: rgba(96,165,250,.12) !important; color: #93c5fd !important; }
html.dark-mode .kanji-mode-tag { background: rgba(245,158,11,.2) !important; color: #fcd34d !important; }
html.dark-mode .q-num   { color: #4b5563 !important; }

/* Word display */
html.dark-mode .word-jp      { color: #e0e7ff !important; }
html.dark-mode .word-sub     { color: #4b5563 !important; }
html.dark-mode .kanji-char   { color: #e0e7ff !important; }
html.dark-mode .opt-kanji    { color: #e0e7ff !important; }
html.dark-mode .mk-reveal-kanji ruby { color: #e0e7ff !important; }
html.dark-mode .mk-reveal-kanji ruby rt { color: #f9a8d4 !important; }
html.dark-mode .question-label {
  color: #4b5563 !important;
  border-top-color: rgba(255,255,255,.06) !important;
}

/* Option buttons */
html.dark-mode .option-btn {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #d1d5db !important;
}
html.dark-mode .option-btn:hover:not(:disabled) {
  background: rgba(129,140,248,.12) !important;
  border-color: rgba(129,140,248,.4) !important;
  color: #e0e7ff !important;
  box-shadow: 0 4px 16px rgba(129,140,248,.15) !important;
  transform: translateY(-1px);
}
html.dark-mode .option-btn.correct {
  background: rgba(52,211,153,.12) !important;
  border-color: #34d399 !important;
  color: #6ee7b7 !important;
  box-shadow: 0 4px 16px rgba(52,211,153,.15) !important;
}
html.dark-mode .option-btn.wrong {
  background: rgba(248,113,113,.12) !important;
  border-color: #f87171 !important;
  color: #fca5a5 !important;
}
html.dark-mode .option-btn:disabled { transform: none !important; }

html.dark-mode .option-btn.correct .opt-kanji { color: #6ee7b7 !important; }
html.dark-mode .option-btn.wrong .opt-kanji   { color: #fca5a5 !important; }
html.dark-mode .option-btn:hover:not(:disabled) .opt-kanji { color: #e0e7ff !important; }

/* Feedback bars */
html.dark-mode .feedback-bar.correct {
  background: rgba(52,211,153,.1) !important;
  color: #6ee7b7 !important;
}
html.dark-mode .feedback-bar.wrong {
  background: rgba(248,113,113,.1) !important;
  color: #fca5a5 !important;
}
html.dark-mode .feedback-bar.skip {
  background: rgba(251,191,36,.1) !important;
  color: #fcd34d !important;
}

/* Buttons */
html.dark-mode .btn {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #9ca3af !important;
}
html.dark-mode .btn:hover {
  background: rgba(129,140,248,.1) !important;
  border-color: rgba(129,140,248,.4) !important;
  color: #e0e7ff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(129,140,248,.15) !important;
}
html.dark-mode .btn-primary {
  background: linear-gradient(135deg,#818cf8,#a78bfa) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(129,140,248,.3) !important;
}
html.dark-mode .btn-primary:hover {
  background: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  box-shadow: 0 8px 28px rgba(129,140,248,.4) !important;
}

/* Form elements */
html.dark-mode .form-label { color: #4b5563 !important; }
html.dark-mode select,
html.dark-mode input[type="text"],
html.dark-mode input[type="search"] {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #e0e7ff !important;
}
html.dark-mode select:focus,
html.dark-mode input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,.15) !important;
}

/* Pill buttons */
html.dark-mode .pill-opt {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #6b7280 !important;
}
html.dark-mode .pill-opt:hover {
  background: rgba(129,140,248,.1) !important;
  border-color: rgba(129,140,248,.4) !important;
  color: #a5b4fc !important;
}
html.dark-mode .pill-opt.active {
  background: linear-gradient(135deg,#818cf8,#a78bfa) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(129,140,248,.3) !important;
}

/* Mode cards */
html.dark-mode .mode-card {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.dark-mode .mode-card:hover {
  background: rgba(129,140,248,.1) !important;
  border-color: rgba(129,140,248,.4) !important;
}
html.dark-mode .mode-card.active {
  background: rgba(129,140,248,.15) !important;
  border-color: #818cf8 !important;
}
html.dark-mode .mode-card-icon  { color: #818cf8 !important; }
html.dark-mode .mode-card-title { color: #e0e7ff !important; }
html.dark-mode .mode-card-desc  { color: #4b5563 !important; }

/* Feature items */
html.dark-mode .feature-item {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.06) !important;
}
html.dark-mode .feature-item strong { color: #e0e7ff !important; }
html.dark-mode .feature-item span   { color: #4b5563 !important; }

/* Vocab table */
html.dark-mode .vocab-table th {
  background: #1c1b29 !important;
  color: #6b7280 !important;
  border-color: rgba(255,255,255,.06) !important;
}
html.dark-mode .vocab-table td {
  border-color: rgba(255,255,255,.05) !important;
  color: #d1d5db !important;
}
html.dark-mode .vocab-table tr:hover td {
  background: rgba(129,140,248,.05) !important;
}

/* Pagination */
html.dark-mode .page-btn {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #6b7280 !important;
}
html.dark-mode .page-btn.active {
  background: linear-gradient(135deg,#818cf8,#a78bfa) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html.dark-mode .page-btn:hover:not(.active) {
  background: rgba(129,140,248,.1) !important;
  color: #a5b4fc !important;
}

/* Result & session */
html.dark-mode .result-score { color: #a5b4fc !important; }
html.dark-mode .rb-card      { background: #1c1b29 !important; border-color: rgba(255,255,255,.06) !important; }
html.dark-mode .session-item { border-color: rgba(255,255,255,.06) !important; }
html.dark-mode .hardest-item { border-color: rgba(255,255,255,.06) !important; }

/* Toast */
html.dark-mode .toast {
  background: #1c1b29 !important;
  color: #e0e7ff !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Kana hero */
html.dark-mode .kana-hero-accent {
  background: linear-gradient(135deg,#0f0e1e,#1a1833,#211a45) !important;
}
html.dark-mode .kana-hero-chars { color: rgba(165,180,252,.15) !important; }
html.dark-mode .kana-hero-title { color: #e0e7ff !important; }
html.dark-mode .kana-hero-sub   { color: rgba(165,180,252,.5) !important; }

/* Kana table */
html.dark-mode .kana-cell {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.07) !important;
  color: #e0e7ff !important;
}
html.dark-mode .kana-cell-rom { color: #4b5563 !important; }
html.dark-mode .kana-cell.mastered {
  background: rgba(52,211,153,.1) !important;
  border-color: rgba(52,211,153,.3) !important;
}
html.dark-mode .kana-cell.weak {
  background: rgba(248,113,113,.1) !important;
  border-color: rgba(248,113,113,.3) !important;
}

/* Kana sub-nav */
html.dark-mode .kana-sub-btn {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.07) !important;
  color: #6b7280 !important;
}
html.dark-mode .kana-sub-btn:hover,
html.dark-mode .kana-sub-btn.active {
  background: rgba(129,140,248,.12) !important;
  border-color: rgba(129,140,248,.4) !important;
  color: #a5b4fc !important;
}

/* Flashcard */
html.dark-mode .fc-filter-bar {
  background: #1a1928 !important;
  border-color: rgba(255,255,255,.07) !important;
}
html.dark-mode .fc-progress-wrap { background: #1c1b29 !important; }
html.dark-mode .fc-counter        { color: #4b5563 !important; }
html.dark-mode .fc-done-title     { color: #e0e7ff !important; }
html.dark-mode .fc-done-sub       { color: #4b5563 !important; }
html.dark-mode .fc-back {
  background: linear-gradient(145deg,#1a1928,#211d35) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
}
html.dark-mode .fc-back-kanji { color: #a5b4fc !important; }
html.dark-mode .fc-back-arti  { color: #e0e7ff !important; }
html.dark-mode .fc-contoh-word{ color: #c4b5fd !important; }

/* Typing input */
html.dark-mode .kana-type-input {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #e0e7ff !important;
}
html.dark-mode .kana-type-input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,.15) !important;
}
html.dark-mode .kana-type-hint { color: #4b5563 !important; }

/* Loading */
html.dark-mode .loading { color: #4b5563 !important; }

/* Select arrow */
html.dark-mode select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234b5563' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
}


/* ══════════════════════════════════════════════════════════════
   KUIS KOTOBA — Styles
   ══════════════════════════════════════════════════════════════ */

/* ──────────── Kotoba Hero Banner ──────────── */
.kotoba-hero-accent {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 50%, #ff6b6b 100%);
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(247,151,30,.35);
}

.kotoba-hero-accent::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
}

.kotoba-hero-accent::after {
  content: '';
  position: absolute;
  bottom: -35px; left: -35px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
}

@keyframes kotoba-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.kotoba-hero-chars {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 0.6rem;
  letter-spacing: 10px;
  position: relative;
  z-index: 1;
  opacity: .25;
  font-weight: 700;
  animation: kotoba-float 5s ease-in-out infinite;
}

.kotoba-hero-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
  letter-spacing: -0.5px;
}

.kotoba-hero-sub {
  font-size: 12px;
  opacity: .75;
  position: relative;
  z-index: 1;
  font-weight: 500;
}

/* ──────────── Kotoba Sub Navigation ──────────── */
.kotoba-sub-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 1.25rem;
}
@media (max-width: 500px) {
  .kotoba-sub-nav { grid-template-columns: repeat(3, 1fr); }
}

.kotoba-sub-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 14px;
  border: 2px solid transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  background: var(--gray-50, #f9fafb);
  color: var(--gray-600, #4b5563);
  border-color: var(--gray-200, #e5e7eb);
  letter-spacing: .01em;
}
.kotoba-sub-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.kotoba-sub-btn .kotoba-btn-icon {
  font-size: 20px;
  display: block;
  line-height: 1;
}

/* Per-level colors — idle pastel */
.ksb-n54  { background:linear-gradient(135deg,#ede9fe,#ddd6fe); color:#5b21b6; border-color:#c4b5fd; }
.ksb-n3   { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; border-color:#fcd34d; }
.ksb-n2   { background:linear-gradient(135deg,#ffedd5,#fed7aa); color:#9a3412; border-color:#fdba74; }
.ksb-n1   { background:linear-gradient(135deg,#fee2e2,#fecaca); color:#991b1b; border-color:#fca5a5; }
.ksb-vocab{ background:linear-gradient(135deg,#f0fdf4,#dcfce7); color:#166534; border-color:#86efac; }

/* Hover — deeper shade */
.ksb-n54:hover  { background:linear-gradient(135deg,#ddd6fe,#c4b5fd); box-shadow:0 6px 14px rgba(99,102,241,.2); }
.ksb-n3:hover   { background:linear-gradient(135deg,#fde68a,#fcd34d); box-shadow:0 6px 14px rgba(245,158,11,.2); }
.ksb-n2:hover   { background:linear-gradient(135deg,#fed7aa,#fdba74); box-shadow:0 6px 14px rgba(249,115,22,.2); }
.ksb-n1:hover   { background:linear-gradient(135deg,#fecaca,#fca5a5); box-shadow:0 6px 14px rgba(239,68,68,.2); }
.ksb-vocab:hover{ background:linear-gradient(135deg,#dcfce7,#bbf7d0); box-shadow:0 6px 14px rgba(16,185,129,.2); }

/* Active — full gradient, white text */
.kotoba-sub-btn--active,
.kotoba-sub-btn.active {
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px);
}
.ksb-n54.kotoba-sub-btn--active,  .ksb-n54.active   { background:linear-gradient(135deg,#6366f1,#8b5cf6) !important; box-shadow:0 6px 16px rgba(99,102,241,.35) !important; }
.ksb-n3.kotoba-sub-btn--active,   .ksb-n3.active    { background:linear-gradient(135deg,#f59e0b,#d97706) !important; box-shadow:0 6px 16px rgba(245,158,11,.35) !important; }
.ksb-n2.kotoba-sub-btn--active,   .ksb-n2.active    { background:linear-gradient(135deg,#f97316,#ea580c) !important; box-shadow:0 6px 16px rgba(249,115,22,.35) !important; }
.ksb-n1.kotoba-sub-btn--active,   .ksb-n1.active    { background:linear-gradient(135deg,#ef4444,#dc2626) !important; box-shadow:0 6px 16px rgba(239,68,68,.35) !important; }
.ksb-vocab.kotoba-sub-btn--active, .ksb-vocab.active { background:linear-gradient(135deg,#10b981,#059669) !important; box-shadow:0 6px 16px rgba(16,185,129,.35) !important; }

/* Dark mode — idle */
html.dark-mode .ksb-n54  { background:rgba(99,102,241,.15);  color:#c4b5fd; border-color:rgba(99,102,241,.4); }
html.dark-mode .ksb-n3   { background:rgba(245,158,11,.12);  color:#fde047; border-color:rgba(245,158,11,.4); }
html.dark-mode .ksb-n2   { background:rgba(249,115,22,.12);  color:#fdba74; border-color:rgba(249,115,22,.4); }
html.dark-mode .ksb-n1   { background:rgba(239,68,68,.12);   color:#fca5a5; border-color:rgba(239,68,68,.4); }
html.dark-mode .ksb-vocab{ background:rgba(16,185,129,.12);  color:#6ee7b7; border-color:rgba(16,185,129,.4); }
/* Dark active */
html.dark-mode .ksb-n54.kotoba-sub-btn--active,  html.dark-mode .ksb-n54.active   { background:linear-gradient(135deg,#4f46e5,#7c3aed) !important; }
html.dark-mode .ksb-n3.kotoba-sub-btn--active,   html.dark-mode .ksb-n3.active    { background:linear-gradient(135deg,#d97706,#b45309) !important; }
html.dark-mode .ksb-n2.kotoba-sub-btn--active,   html.dark-mode .ksb-n2.active    { background:linear-gradient(135deg,#ea580c,#c2410c) !important; }
html.dark-mode .ksb-n1.kotoba-sub-btn--active,   html.dark-mode .ksb-n1.active    { background:linear-gradient(135deg,#dc2626,#b91c1c) !important; }
html.dark-mode .ksb-vocab.kotoba-sub-btn--active, html.dark-mode .ksb-vocab.active { background:linear-gradient(135deg,#059669,#047857) !important; }

/* ──────────── Kotoba Bab Grid (multi-select) ──────────── */
/* ── Minna Kanji Bab Selection Grid ── */
.minna-bab-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin-bottom: 0.5rem;
}

.minna-bab-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1.5px solid;
  padding: 6px 2px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.34,1.56,0.64,1);
  gap: 1px;
  min-height: 44px;
}

.minna-bab-num {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-mono);
  line-height: 1;
}

.minna-bab-lbl {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* ── Warna per grup 10 bab ── */

/* Bab 1–10: Biru */
.minna-bab-pill:nth-child(n+1):nth-child(-n+10) {
  border-color: #bfdbfe; background: #eff6ff;
}
.minna-bab-pill:nth-child(n+1):nth-child(-n+10) .minna-bab-num { color: #1d4ed8; }
.minna-bab-pill:nth-child(n+1):nth-child(-n+10) .minna-bab-lbl { color: #93c5fd; }
.minna-bab-pill:nth-child(n+1):nth-child(-n+10):hover {
  border-color: #3b82f6; background: #dbeafe;
  box-shadow: 0 2px 8px rgba(59,130,246,.3); transform: scale(1.12);
}
.minna-bab-pill:nth-child(n+1):nth-child(-n+10).active {
  background: linear-gradient(135deg,#1d4ed8,#3b82f6);
  border-color: transparent; box-shadow: 0 2px 10px rgba(29,78,216,.4); transform: scale(1.05);
}

/* Bab 11–20: Emerald */
.minna-bab-pill:nth-child(n+11):nth-child(-n+20) {
  border-color: #6ee7b7; background: #ecfdf5;
}
.minna-bab-pill:nth-child(n+11):nth-child(-n+20) .minna-bab-num { color: #047857; }
.minna-bab-pill:nth-child(n+11):nth-child(-n+20) .minna-bab-lbl { color: #6ee7b7; }
.minna-bab-pill:nth-child(n+11):nth-child(-n+20):hover {
  border-color: #10b981; background: #d1fae5;
  box-shadow: 0 2px 8px rgba(16,185,129,.3); transform: scale(1.12);
}
.minna-bab-pill:nth-child(n+11):nth-child(-n+20).active {
  background: linear-gradient(135deg,#047857,#10b981);
  border-color: transparent; box-shadow: 0 2px 10px rgba(4,120,87,.4); transform: scale(1.05);
}

/* Bab 21–30: Amber */
.minna-bab-pill:nth-child(n+21):nth-child(-n+30) {
  border-color: #fcd34d; background: #fffbeb;
}
.minna-bab-pill:nth-child(n+21):nth-child(-n+30) .minna-bab-num { color: #b45309; }
.minna-bab-pill:nth-child(n+21):nth-child(-n+30) .minna-bab-lbl { color: #fbbf24; }
.minna-bab-pill:nth-child(n+21):nth-child(-n+30):hover {
  border-color: #f59e0b; background: #fef3c7;
  box-shadow: 0 2px 8px rgba(245,158,11,.3); transform: scale(1.12);
}
.minna-bab-pill:nth-child(n+21):nth-child(-n+30).active {
  background: linear-gradient(135deg,#b45309,#f59e0b);
  border-color: transparent; box-shadow: 0 2px 10px rgba(180,83,9,.4); transform: scale(1.05);
}

/* Bab 31–40: Violet */
.minna-bab-pill:nth-child(n+31):nth-child(-n+40) {
  border-color: #c4b5fd; background: #f5f3ff;
}
.minna-bab-pill:nth-child(n+31):nth-child(-n+40) .minna-bab-num { color: #6d28d9; }
.minna-bab-pill:nth-child(n+31):nth-child(-n+40) .minna-bab-lbl { color: #c4b5fd; }
.minna-bab-pill:nth-child(n+31):nth-child(-n+40):hover {
  border-color: #8b5cf6; background: #ede9fe;
  box-shadow: 0 2px 8px rgba(139,92,246,.3); transform: scale(1.12);
}
.minna-bab-pill:nth-child(n+31):nth-child(-n+40).active {
  background: linear-gradient(135deg,#6d28d9,#8b5cf6);
  border-color: transparent; box-shadow: 0 2px 10px rgba(109,40,217,.4); transform: scale(1.05);
}

/* Bab 41–50: Rose */
.minna-bab-pill:nth-child(n+41):nth-child(-n+50) {
  border-color: #fbcfe8; background: #fff0f6;
}
.minna-bab-pill:nth-child(n+41):nth-child(-n+50) .minna-bab-num { color: #be185d; }
.minna-bab-pill:nth-child(n+41):nth-child(-n+50) .minna-bab-lbl { color: #f9a8d4; }
.minna-bab-pill:nth-child(n+41):nth-child(-n+50):hover {
  border-color: #db2777; background: #fce7f3;
  box-shadow: 0 2px 8px rgba(219,39,119,.3); transform: scale(1.12);
}
.minna-bab-pill:nth-child(n+41):nth-child(-n+50).active {
  background: linear-gradient(135deg,#db2777,#f43f5e);
  border-color: transparent; box-shadow: 0 2px 10px rgba(219,39,119,.4); transform: scale(1.05);
}

/* Teks putih saat aktif */
.minna-bab-pill.active .minna-bab-num { color: #fff !important; }
.minna-bab-pill.active .minna-bab-lbl { color: rgba(255,255,255,.7) !important; }

@media (max-width: 540px) {
  .minna-bab-grid { grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .minna-bab-pill { min-height: 40px; }
}
@media (max-width: 380px) {
  .minna-bab-grid { grid-template-columns: repeat(5, 1fr); }
  .minna-bab-pill { min-height: 46px; }
  .minna-bab-num  { font-size: 13px; }
}

/* Dark mode — idle state */
html.dark-mode .minna-bab-pill:nth-child(n+1):nth-child(-n+10)   { background: rgba(29,78,216,.12);  border-color: rgba(59,130,246,.35); }
html.dark-mode .minna-bab-pill:nth-child(n+11):nth-child(-n+20)  { background: rgba(4,120,87,.12);   border-color: rgba(16,185,129,.35); }
html.dark-mode .minna-bab-pill:nth-child(n+21):nth-child(-n+30)  { background: rgba(180,83,9,.12);   border-color: rgba(245,158,11,.35); }
html.dark-mode .minna-bab-pill:nth-child(n+31):nth-child(-n+40)  { background: rgba(109,40,217,.12); border-color: rgba(139,92,246,.35); }
html.dark-mode .minna-bab-pill:nth-child(n+41):nth-child(-n+50)  { background: rgba(219,39,119,.12); border-color: rgba(219,39,119,.35); }
html.dark-mode .minna-bab-pill:nth-child(n+1):nth-child(-n+10) .minna-bab-num   { color: #93c5fd; }
html.dark-mode .minna-bab-pill:nth-child(n+11):nth-child(-n+20) .minna-bab-num  { color: #6ee7b7; }
html.dark-mode .minna-bab-pill:nth-child(n+21):nth-child(-n+30) .minna-bab-num  { color: #fcd34d; }
html.dark-mode .minna-bab-pill:nth-child(n+31):nth-child(-n+40) .minna-bab-num  { color: #c4b5fd; }
html.dark-mode .minna-bab-pill:nth-child(n+41):nth-child(-n+50) .minna-bab-num  { color: #f9a8d4; }

/* Dark mode — ACTIVE state (restore gradient, override idle background) */
html.dark-mode .minna-bab-pill:nth-child(n+1):nth-child(-n+10).active   { background: linear-gradient(135deg,#1d4ed8,#3b82f6) !important; border-color: transparent !important; box-shadow: 0 3px 14px rgba(29,78,216,.5) !important; }
html.dark-mode .minna-bab-pill:nth-child(n+11):nth-child(-n+20).active  { background: linear-gradient(135deg,#047857,#10b981) !important; border-color: transparent !important; box-shadow: 0 3px 14px rgba(4,120,87,.5) !important; }
html.dark-mode .minna-bab-pill:nth-child(n+21):nth-child(-n+30).active  { background: linear-gradient(135deg,#b45309,#f59e0b) !important; border-color: transparent !important; box-shadow: 0 3px 14px rgba(180,83,9,.5) !important; }
html.dark-mode .minna-bab-pill:nth-child(n+31):nth-child(-n+40).active  { background: linear-gradient(135deg,#6d28d9,#8b5cf6) !important; border-color: transparent !important; box-shadow: 0 3px 14px rgba(109,40,217,.5) !important; }
html.dark-mode .minna-bab-pill:nth-child(n+41):nth-child(-n+50).active  { background: linear-gradient(135deg,#db2777,#f43f5e) !important; border-color: transparent !important; box-shadow: 0 3px 14px rgba(219,39,119,.5) !important; }
html.dark-mode .minna-bab-pill.active .minna-bab-num { color: #fff !important; }
html.dark-mode .minna-bab-pill.active .minna-bab-lbl { color: rgba(255,255,255,.8) !important; }


.kotoba-bab-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin-bottom: 0.5rem;
  overflow: visible;
  padding: 2px; /* ruang agar scale tidak ter-clip */
}

.kotoba-bab-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1.5px solid;
  padding: 6px 2px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.34,1.56,0.64,1);
  gap: 1px;
  min-height: 44px;
}

.kbab-lbl, .dbab-lbl {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}

.kbab-num, .dbab-num {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-mono);
  line-height: 1;
}

/* Kotoba: Warm palette per 10 bab */
/* Bab 1–10: Orange */
.kotoba-bab-pill:nth-child(n+1):nth-child(-n+10) { border-color:#fed7aa; background:#fff7ed; }
.kotoba-bab-pill:nth-child(n+1):nth-child(-n+10) .kbab-num  { color:#c2410c; }
.kotoba-bab-pill:nth-child(n+1):nth-child(-n+10) .kbab-lbl  { color:#fdba74; }
.kotoba-bab-pill:nth-child(n+1):nth-child(-n+10):hover { border-color:#ea580c; background:#ffedd5; box-shadow:0 2px 8px rgba(234,88,12,.3); transform:scale(1.04); }
.kotoba-bab-pill:nth-child(n+1):nth-child(-n+10).active { background:linear-gradient(135deg,#c2410c,#ea580c); border-color:transparent; box-shadow:0 2px 10px rgba(194,65,12,.4); transform:scale(1.05); }

/* Bab 11–20: Red */
.kotoba-bab-pill:nth-child(n+11):nth-child(-n+20) { border-color:#fecaca; background:#fef2f2; }
.kotoba-bab-pill:nth-child(n+11):nth-child(-n+20) .kbab-num  { color:#b91c1c; }
.kotoba-bab-pill:nth-child(n+11):nth-child(-n+20) .kbab-lbl  { color:#fca5a5; }
.kotoba-bab-pill:nth-child(n+11):nth-child(-n+20):hover { border-color:#dc2626; background:#fee2e2; box-shadow:0 2px 8px rgba(220,38,38,.3); transform:scale(1.04); }
.kotoba-bab-pill:nth-child(n+11):nth-child(-n+20).active { background:linear-gradient(135deg,#b91c1c,#dc2626); border-color:transparent; box-shadow:0 2px 10px rgba(185,28,28,.4); transform:scale(1.05); }

/* Bab 21–30: Gold/Yellow */
.kotoba-bab-pill:nth-child(n+21):nth-child(-n+30) { border-color:#fde68a; background:#fefce8; }
.kotoba-bab-pill:nth-child(n+21):nth-child(-n+30) .kbab-num  { color:#a16207; }
.kotoba-bab-pill:nth-child(n+21):nth-child(-n+30) .kbab-lbl  { color:#fcd34d; }
.kotoba-bab-pill:nth-child(n+21):nth-child(-n+30):hover { border-color:#ca8a04; background:#fef9c3; box-shadow:0 2px 8px rgba(202,138,4,.3); transform:scale(1.04); }
.kotoba-bab-pill:nth-child(n+21):nth-child(-n+30).active { background:linear-gradient(135deg,#a16207,#ca8a04); border-color:transparent; box-shadow:0 2px 10px rgba(161,98,7,.4); transform:scale(1.05); }

/* Bab 31–40: Coral/Rose */
.kotoba-bab-pill:nth-child(n+31):nth-child(-n+40) { border-color:#fda4af; background:#fff1f2; }
.kotoba-bab-pill:nth-child(n+31):nth-child(-n+40) .kbab-num  { color:#be123c; }
.kotoba-bab-pill:nth-child(n+31):nth-child(-n+40) .kbab-lbl  { color:#fb7185; }
.kotoba-bab-pill:nth-child(n+31):nth-child(-n+40):hover { border-color:#e11d48; background:#ffe4e6; box-shadow:0 2px 8px rgba(225,29,72,.3); transform:scale(1.04); }
.kotoba-bab-pill:nth-child(n+31):nth-child(-n+40).active { background:linear-gradient(135deg,#be123c,#e11d48); border-color:transparent; box-shadow:0 2px 10px rgba(190,18,60,.4); transform:scale(1.05); }

/* Bab 41–50: Amber/Brown */
.kotoba-bab-pill:nth-child(n+41):nth-child(-n+50) { border-color:#fcd34d; background:#fffbeb; }
.kotoba-bab-pill:nth-child(n+41):nth-child(-n+50) .kbab-num  { color:#b45309; }
.kotoba-bab-pill:nth-child(n+41):nth-child(-n+50) .kbab-lbl  { color:#fbbf24; }
.kotoba-bab-pill:nth-child(n+41):nth-child(-n+50):hover { border-color:#d97706; background:#fef3c7; box-shadow:0 2px 8px rgba(217,119,6,.3); transform:scale(1.04); }
.kotoba-bab-pill:nth-child(n+41):nth-child(-n+50).active { background:linear-gradient(135deg,#b45309,#d97706); border-color:transparent; box-shadow:0 2px 10px rgba(180,83,9,.4); transform:scale(1.05); }

.kotoba-bab-pill.active .kbab-num { color:#fff !important; }
.kotoba-bab-pill.active .kbab-lbl { color:rgba(255,255,255,.7) !important; }

@media (max-width: 540px) { .kotoba-bab-grid { grid-template-columns: repeat(7,1fr); } }
@media (max-width: 380px) { .kotoba-bab-grid { grid-template-columns: repeat(5,1fr); } }

/* Dark mode Kotoba — idle */
html.dark-mode .kotoba-bab-pill:nth-child(n+1):nth-child(-n+10)  { background:rgba(194,65,12,.1);  border-color:rgba(234,88,12,.3); }
html.dark-mode .kotoba-bab-pill:nth-child(n+11):nth-child(-n+20) { background:rgba(185,28,28,.1);  border-color:rgba(220,38,38,.3); }
html.dark-mode .kotoba-bab-pill:nth-child(n+21):nth-child(-n+30) { background:rgba(161,98,7,.1);   border-color:rgba(202,138,4,.3); }
html.dark-mode .kotoba-bab-pill:nth-child(n+31):nth-child(-n+40) { background:rgba(190,18,60,.1);  border-color:rgba(225,29,72,.3); }
html.dark-mode .kotoba-bab-pill:nth-child(n+41):nth-child(-n+50) { background:rgba(180,83,9,.1);   border-color:rgba(217,119,6,.3); }
html.dark-mode .kotoba-bab-pill:nth-child(n+1):nth-child(-n+10) .kbab-num  { color:#fdba74; }
html.dark-mode .kotoba-bab-pill:nth-child(n+11):nth-child(-n+20) .kbab-num { color:#fca5a5; }
html.dark-mode .kotoba-bab-pill:nth-child(n+21):nth-child(-n+30) .kbab-num { color:#fde68a; }
html.dark-mode .kotoba-bab-pill:nth-child(n+31):nth-child(-n+40) .kbab-num { color:#fda4af; }
html.dark-mode .kotoba-bab-pill:nth-child(n+41):nth-child(-n+50) .kbab-num { color:#fcd34d; }
/* Dark mode Kotoba — ACTIVE */
html.dark-mode .kotoba-bab-pill:nth-child(n+1):nth-child(-n+10).active  { background:linear-gradient(135deg,#c2410c,#ea580c) !important; border-color:transparent !important; box-shadow:0 3px 14px rgba(194,65,12,.55) !important; }
html.dark-mode .kotoba-bab-pill:nth-child(n+11):nth-child(-n+20).active { background:linear-gradient(135deg,#b91c1c,#dc2626) !important; border-color:transparent !important; box-shadow:0 3px 14px rgba(185,28,28,.55) !important; }
html.dark-mode .kotoba-bab-pill:nth-child(n+21):nth-child(-n+30).active { background:linear-gradient(135deg,#a16207,#ca8a04) !important; border-color:transparent !important; box-shadow:0 3px 14px rgba(161,98,7,.55) !important; }
html.dark-mode .kotoba-bab-pill:nth-child(n+31):nth-child(-n+40).active { background:linear-gradient(135deg,#be123c,#e11d48) !important; border-color:transparent !important; box-shadow:0 3px 14px rgba(190,18,60,.55) !important; }
html.dark-mode .kotoba-bab-pill:nth-child(n+41):nth-child(-n+50).active { background:linear-gradient(135deg,#b45309,#d97706) !important; border-color:transparent !important; box-shadow:0 3px 14px rgba(180,83,9,.55) !important; }
html.dark-mode .kotoba-bab-pill.active .kbab-num { color:#fff !important; }
html.dark-mode .kotoba-bab-pill.active .kbab-lbl { color:rgba(255,255,255,.8) !important; }

.kotoba-bab-note {
  font-size: 11px;
  color: var(--gray-400);
  font-style: italic;
  margin-top: 4px;
}


/* ──────────── Kotoba Typing Input Area ──────────── */
.kotoba-tik-input-wrap {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 0.5rem 0 0.25rem;
}

.kotoba-tik-input {
  flex: 1;
  font-size: 20px !important;
  font-family: var(--font-jp) !important;
  text-align: center;
  padding: 14px 16px !important;
  border-radius: var(--radius-md) !important;
  border: 2px solid var(--gray-200) !important;
  background: var(--white) !important;
  color: var(--gray-900) !important;
  background-image: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}

.kotoba-tik-input:focus {
  outline: none;
  border-color: #f7971e !important;
  box-shadow: 0 0 0 3px rgba(247,151,30,.15) !important;
}

.kotoba-tik-input:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

.kotoba-tik-submit {
  padding: 14px 22px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-md) !important;
  background: linear-gradient(135deg, #f7971e, #ffd200) !important;
  border-color: transparent !important;
  color: #2d1200 !important;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(247,151,30,.3) !important;
}

.kotoba-tik-submit:hover {
  background: linear-gradient(135deg, #e5880f, #f0c500) !important;
  border-color: transparent !important;
  color: #2d1200 !important;
  box-shadow: 0 6px 20px rgba(247,151,30,.4) !important;
  transform: translateY(-1px) !important;
}

.kotoba-tik-hint {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
  min-height: 20px;
  font-family: var(--font-jp);
  line-height: 1.6;
  padding: 0 0.5rem;
}

/* ──────────── Kotoba Start Screen: Mulai button amber ──────────── */
.btn-kotoba-tik {
  background: linear-gradient(135deg, #f7971e, #ffd200) !important;
  border-color: transparent !important;
  color: #2d1200 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(247,151,30,.3) !important;
}

.btn-kotoba-tik:hover {
  background: linear-gradient(135deg, #e5880f, #f0c500) !important;
  box-shadow: 0 8px 24px rgba(247,151,30,.4) !important;
  transform: translateY(-2px) !important;
}

/* ──────────── Word Display for type quiz ──────────── */
.kotoba-tik-word {
  font-size: 52px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -1px;
  text-align: center;
}

.kotoba-tik-sub {
  font-size: 13px;
  color: var(--gray-400);
  font-family: var(--font-mono);
  text-align: center;
}

/* ──────────── Kotoba Mode Badge ──────────── */
.kotoba-badge {
  background: linear-gradient(135deg, rgba(247,151,30,.15), rgba(255,210,0,.15)) !important;
  color: #b85c00 !important;
}

/* ──────────── Responsive ──────────── */
@media (max-width: 540px) {
  .kotoba-bab-grid { grid-template-columns: repeat(7, 1fr); }
  .kotoba-sub-nav  { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 400px) {
  .kotoba-bab-grid       { grid-template-columns: repeat(5, 1fr); }
  .kotoba-hero-chars     { font-size: 32px; letter-spacing: 6px; }
  .kotoba-hero-title     { font-size: 18px; }
  .kotoba-tik-input      { font-size: 16px !important; }
  .kotoba-tik-submit     { padding: 12px 14px !important; font-size: 13px !important; }
}

/* ══════════════════════════════════════════
   WIP CARD — N2 / N1 Under Development
══════════════════════════════════════════ */

/* Floating kanji keyframes */
@keyframes wip-float1 { 0%,100%{transform:translateY(0) rotate(-6deg)  scale(1)  }50%{transform:translateY(-18px) rotate(4deg) scale(1.08)} }
@keyframes wip-float2 { 0%,100%{transform:translateY(0) rotate(8deg)   scale(1)  }50%{transform:translateY(-22px) rotate(-5deg) scale(.95)} }
@keyframes wip-float3 { 0%,100%{transform:translateY(0) rotate(-3deg)  scale(.9) }50%{transform:translateY(-14px) rotate(6deg) scale(1.05)} }
@keyframes wip-float4 { 0%,100%{transform:translateY(0) rotate(5deg)   scale(1.1)}50%{transform:translateY(-20px) rotate(-8deg) scale(.92)} }
@keyframes wip-float5 { 0%,100%{transform:translateY(0) rotate(-10deg) scale(.85)}50%{transform:translateY(-16px) rotate(3deg) scale(1)} }
@keyframes wip-float6 { 0%,100%{transform:translateY(0) rotate(12deg)  scale(.95)}50%{transform:translateY(-24px) rotate(-4deg) scale(1.1)} }
@keyframes wip-pulse-bar { 0%,100%{opacity:1}50%{opacity:.6} }
@keyframes wip-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes wip-badge-in { from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)} }

.wip-card {
  border-radius: 20px;
  padding: 1.5rem 1.25rem 1.75rem;
  margin-top: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--white, #fff);
  border: 1.5px solid var(--gray-100, #f3f4f6);
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.wip-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .04;
  background: repeating-linear-gradient(
    45deg,
    #000 0,#000 1px,
    transparent 1px,transparent 12px
  );
  pointer-events: none;
}

/* Color accent top strip */
.wip-card--n2::after {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg,#f97316,#ea580c,#f59e0b);
}
.wip-card--n1::after {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg,#ef4444,#dc2626,#f87171);
}

/* Kanji floating stage */
.wip-kanji-stage {
  position: relative;
  height: 110px;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wip-k {
  position: absolute;
  font-family: var(--font-jp, serif);
  font-weight: 900;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.wip-k1 { font-size:52px; color:rgba(249,115,22,.18); left:8%;  top:10%; animation:wip-float1 5.2s ease-in-out infinite; }
.wip-k2 { font-size:40px; color:rgba(239,68,68,.14);  right:12%;top:5%;  animation:wip-float2 6.1s ease-in-out infinite; }
.wip-k3 { font-size:34px; color:rgba(245,158,11,.16); left:30%; bottom:0%;animation:wip-float3 4.8s ease-in-out infinite 0.5s; }
.wip-k4 { font-size:62px; color:rgba(0,0,0,.06);      left:50%; top:50%; transform:translate(-50%,-50%); animation:wip-float4 7s ease-in-out infinite 1s; font-family:var(--font-mono,monospace); }
.wip-k5 { font-size:28px; color:rgba(249,115,22,.12); right:28%;bottom:5%;animation:wip-float5 5.5s ease-in-out infinite 0.3s; }
.wip-k6 { font-size:38px; color:rgba(239,68,68,.10);  left:18%; top:5%;  animation:wip-float6 6.8s ease-in-out infinite 0.8s; }

/* N1 darker accent */
.wip-card--n1 .wip-k1 { color:rgba(239,68,68,.18); }
.wip-card--n1 .wip-k2 { color:rgba(220,38,38,.14); }
.wip-card--n1 .wip-k5 { color:rgba(239,68,68,.12); }

/* WIP badge */
.wip-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(90deg,#fef3c7,#fde68a,#fef3c7);
  background-size: 200% auto;
  animation: wip-shimmer 2.5s linear infinite, wip-badge-in .4s ease;
  color: #92400e;
  font-size: .75rem;
  font-weight: 800;
  padding: .35rem .9rem;
  border-radius: 99px;
  border: 1.5px solid #fcd34d;
  margin-bottom: .75rem;
  letter-spacing: .04em;
}

.wip-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--gray-900, #111);
  margin: 0 0 .5rem;
  letter-spacing: -.3px;
}
.wip-card--n2 .wip-title { background:linear-gradient(135deg,#ea580c,#f59e0b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.wip-card--n1 .wip-title { background:linear-gradient(135deg,#dc2626,#f97316); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.wip-desc {
  font-size: .85rem;
  color: var(--gray-500, #6b7280);
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

/* Progress bar */
.wip-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.25rem;
  text-align: left;
  flex-wrap: wrap;
}
.wip-progress-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.wip-progress-bar {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: var(--gray-100, #f3f4f6);
  overflow: hidden;
  min-width: 80px;
}
.wip-progress-fill {
  height: 100%;
  border-radius: 99px;
  animation: wip-pulse-bar 2s ease-in-out infinite;
}
.wip-fill--n2 { width:45%; background:linear-gradient(90deg,#f97316,#fbbf24); }
.wip-fill--n1 { width:20%; background:linear-gradient(90deg,#ef4444,#f97316); }
.wip-progress-pct {
  font-size: .75rem;
  font-weight: 800;
  color: var(--gray-600);
  white-space: nowrap;
}

/* Feature chips */
.wip-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.wip-feat {
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: .6rem .8rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-600);
  text-align: left;
}
.wip-card--n2 .wip-feat { border-left: 3px solid #f97316; }
.wip-card--n1 .wip-feat { border-left: 3px solid #ef4444; }

/* Dark mode */
html.dark-mode .wip-card {
  background: #1c1b29;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
html.dark-mode .wip-title { filter: brightness(1.2); }
html.dark-mode .wip-desc  { color: #6b7280; }
html.dark-mode .wip-progress-bar { background: rgba(255,255,255,.08); }
html.dark-mode .wip-feat  { background:#1a1929; border-color:rgba(255,255,255,.07); color:#9ca3af; }

/* ──────────── Dark Mode: Kotoba ──────────── */

html.dark-mode .kotoba-hero-accent {
  background: linear-gradient(135deg, #3d2000 0%, #4a2d00 50%, #5c1500 100%) !important;
  box-shadow: 0 8px 32px rgba(247,151,30,.15) !important;
}

html.dark-mode .kotoba-hero-chars { color: rgba(255,210,100,.12) !important; }
html.dark-mode .kotoba-hero-title { color: #fde68a !important; }
html.dark-mode .kotoba-hero-sub   { color: rgba(253,230,138,.55) !important; }

html.dark-mode .kotoba-sub-btn {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.07) !important;
  color: #6b7280 !important;
}

html.dark-mode .kotoba-sub-btn:hover,
html.dark-mode .kotoba-sub-btn--active,
html.dark-mode .kotoba-sub-btn.active {
  background: rgba(247,151,30,.12) !important;
  border-color: rgba(247,151,30,.5) !important;
  color: #fbbf24 !important;
}

html.dark-mode .kotoba-bab-pill {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #6b7280 !important;
}

html.dark-mode .kotoba-bab-pill:hover {
  background: rgba(247,151,30,.1) !important;
  border-color: rgba(247,151,30,.4) !important;
  color: #fbbf24 !important;
}

html.dark-mode .kotoba-bab-pill.active {
  background: linear-gradient(135deg, #b85c00, #c99000) !important;
  border-color: transparent !important;
  color: #fff8ee !important;
  box-shadow: 0 2px 8px rgba(247,151,30,.3) !important;
}

html.dark-mode .kotoba-bab-note { color: #4b5563 !important; }

html.dark-mode .kotoba-tik-input {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #e0e7ff !important;
}

html.dark-mode .kotoba-tik-input:focus {
  border-color: #f7971e !important;
  box-shadow: 0 0 0 3px rgba(247,151,30,.15) !important;
}

html.dark-mode .kotoba-tik-hint { color: #4b5563 !important; }

html.dark-mode .kotoba-badge {
  background: rgba(247,151,30,.15) !important;
  color: #fbbf24 !important;
}

/* ══════════════════════════════════════════
   KANJI HERO BANNER
══════════════════════════════════════════ */
.kanji-hero-accent {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  color: #e8e8f8;
  text-align: center;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(15,52,96,.5);
}

.kanji-hero-accent::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(99,102,241,.15);
}

.kanji-hero-accent::after {
  content: '';
  position: absolute;
  bottom: -35px; left: -35px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(99,102,241,.10);
}

/* JLPT Baca hero: beda warna — teal/green */
.jlpt-baca-hero {
  background: linear-gradient(135deg, #0f3443 0%, #1a5276 50%, #117a65 100%) !important;
  box-shadow: 0 8px 32px rgba(17,122,101,.45) !important;
}

@keyframes kanji-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.kanji-hero-chars {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 0.6rem;
  letter-spacing: 10px;
  position: relative;
  z-index: 1;
  opacity: .18;
  font-weight: 700;
  animation: kanji-float 6s ease-in-out infinite;
}

.kanji-hero-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
  letter-spacing: -0.5px;
  color: #fff;
}

.kanji-hero-sub {
  font-size: 12px;
  opacity: .7;
  position: relative;
  z-index: 1;
  font-weight: 500;
  color: #e8e8f8;
}

/* ══════════════════════════════════════════
   KANJI SUB NAVIGATION
══════════════════════════════════════════ */
.kanji-sub-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 1.25rem;
}

.kanji-sub-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 13px 8px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--gray-100);
  background: var(--white);
  color: var(--gray-600);
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.kanji-sub-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(167,139,250,.06));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.kanji-sub-btn:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px var(--primary-glow);
}

.kanji-sub-btn:hover::before { opacity: 1; }

.kanji-sub-btn--active,
.kanji-sub-btn.active {
  background: linear-gradient(135deg, #f0effe, #e9e7ff) !important;
  border-color: var(--primary) !important;
  color: var(--primary-dark) !important;
  box-shadow: 0 4px 14px var(--primary-glow) !important;
}

.kanji-sub-btn .kanji-btn-icon {
  font-size: 22px;
  display: block;
}

/* ══════════════════════════════════════════
   JLPT CARA BACA QUIZ COMPONENTS
══════════════════════════════════════════ */

/* Info grid (4 fitur) di halaman start JLPT baca */
.jlpt-baca-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 1.25rem;
}

.jlpt-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 12px;
}

.jlpt-info-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}

.jlpt-info-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 2px;
}

.jlpt-info-desc {
  display: block;
  font-size: 11px;
  color: var(--gray-400);
}

/* Level grid (4 kartu: Semua, N5, N4, N3) */
.jlpt-level-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}

/* Level badge inside mode-card */
.level-badge-n5 {
  color: #fff !important;
  background: #3b82f6;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 15px !important;
  font-weight: 800;
  font-family: var(--font-mono);
}
.level-badge-n4 {
  color: #fff !important;
  background: #8b5cf6;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 15px !important;
  font-weight: 800;
  font-family: var(--font-mono);
}
.level-badge-n3 {
  color: #fff !important;
  background: #10b981;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 15px !important;
  font-weight: 800;
  font-family: var(--font-mono);
}

/* Mulai button — teal gradient */
.btn-jlpt-baca {
  background: linear-gradient(135deg, #1abc9c, #16a085) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(26,188,156,.35) !important;
}

.btn-jlpt-baca:hover {
  background: linear-gradient(135deg, #17a589, #138d75) !important;
  box-shadow: 0 8px 24px rgba(26,188,156,.45) !important;
  transform: translateY(-2px) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Quiz Screen: Kanji word display besar */
.jlpt-word-display {
  text-align: center;
  padding: 1.5rem 0 1rem;
}

.jlpt-kanji-big {
  font-size: 72px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -2px;
  font-family: var(--font-jp);
}

.jlpt-meaning-hint {
  font-size: 14px;
  color: var(--gray-400);
  font-style: italic;
  letter-spacing: 0.3px;
}

/* Reading option button — hiragana besar */
.jlpt-reading-btn {
  font-size: 20px !important;
  padding: 18px 14px !important;
  font-family: var(--font-jp) !important;
  font-weight: 600 !important;
  background: var(--primary-light) !important;
  flex-direction: column;
  gap: 4px;
}

.jlpt-reading-text {
  display: block;
  font-size: 22px;
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 1px;
}

.jlpt-reading-btn:hover:not(:disabled) .jlpt-reading-text {
  color: var(--primary-dark);
}

.jlpt-reading-btn.correct .jlpt-reading-text { color: var(--green-dark) !important; }
.jlpt-reading-btn.wrong  .jlpt-reading-text { color: #7f1d1d !important; }

/* Level tag in quiz card header */
.jlpt-level-tag {
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  margin-right: 6px;
}

.jlpt-level-tag.level-n5 { background: #3b82f6; }
.jlpt-level-tag.level-n4 { background: #8b5cf6; }
.jlpt-level-tag.level-n3 { background: #10b981; }

.jlpt-mode-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(16,185,129,.12);
  color: #065f46;
  font-family: var(--font-jp);
}

/* Result badge */
.jlpt-badge {
  background: linear-gradient(135deg, rgba(26,188,156,.15), rgba(22,160,133,.15)) !important;
  color: #0e6655 !important;
}

/* ──────────── Responsive ──────────── */
@media (max-width: 640px) {
  /* Hero banner kanji: kurangi padding & letter-spacing agar tidak overflow */
  .kanji-hero-accent  { padding: 1.5rem 1rem; }
  .kanji-hero-chars   { font-size: 34px; letter-spacing: 6px; }
  .kanji-hero-title   { font-size: 19px; }
  .kanji-hero-sub     { font-size: 11px; line-height: 1.5; }
}

@media (max-width: 540px) {
  .kanji-sub-nav       { grid-template-columns: repeat(3, 1fr); }
  .jlpt-level-grid     { grid-template-columns: repeat(2, 1fr) !important; }
  .jlpt-kanji-big      { font-size: 56px; }
  .jlpt-reading-text   { font-size: 18px; }
  .jlpt-reading-btn    { padding: 14px 10px !important; }
  /* Info grid JLPT: 1 kolom agar tidak sempit */
  .jlpt-baca-info-grid { grid-template-columns: 1fr; gap: 6px; }
  .jlpt-info-item      { padding: 10px; }
  /* Kanji hero lebih kecil lagi */
  .kanji-hero-chars    { font-size: 28px; letter-spacing: 5px; }
  .kanji-hero-title    { font-size: 18px; }
  .kanji-hero-sub      { font-size: 10.5px; }
}

@media (max-width: 400px) {
  .kanji-hero-accent   { padding: 1.25rem 0.75rem; }
  .kanji-hero-chars    { font-size: 22px; letter-spacing: 4px; }
  .kanji-hero-title    { font-size: 16px; }
  .kanji-hero-sub      { font-size: 10px; }
  .jlpt-kanji-big      { font-size: 46px; }
  .jlpt-reading-text   { font-size: 15px; }
  .kanji-char          { font-size: 44px; }
  .kanji-sub-nav       { gap: 5px; }
  .kanji-sub-btn       { padding: 10px 4px; font-size: 11px; }
  .kanji-btn-icon      { font-size: 18px !important; }
}

/* ──────────── Dark Mode: Kanji Hero & Sub-Nav ──────────── */
html.dark-mode .kanji-hero-accent {
  background: linear-gradient(135deg, #0d0d1a 0%, #0a0f1e 40%, #081428 100%) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
}

html.dark-mode .jlpt-baca-hero {
  background: linear-gradient(135deg, #0a1f25 0%, #0e2f3a 50%, #0a2018 100%) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}

html.dark-mode .kanji-hero-title { color: #c7d2fe !important; }
html.dark-mode .kanji-hero-sub   { color: rgba(199,210,254,.5) !important; }

html.dark-mode .kanji-sub-btn {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.07) !important;
  color: #6b7280 !important;
}

html.dark-mode .kanji-sub-btn:hover,
html.dark-mode .kanji-sub-btn--active,
html.dark-mode .kanji-sub-btn.active {
  background: rgba(99,102,241,.12) !important;
  border-color: rgba(99,102,241,.5) !important;
  color: #a5b4fc !important;
}

html.dark-mode .jlpt-info-item {
  background: #1c1b29 !important;
  border-color: rgba(255,255,255,.07) !important;
}
html.dark-mode .jlpt-info-title { color: #e0e7ff !important; }
html.dark-mode .jlpt-info-desc  { color: #4b5563 !important; }

html.dark-mode .jlpt-kanji-big  { color: #e0e7ff !important; }
html.dark-mode .jlpt-meaning-hint { color: #4b5563 !important; }

html.dark-mode .jlpt-reading-btn {
  background: rgba(99,102,241,.1) !important;
}
html.dark-mode .jlpt-reading-text { color: #a5b4fc !important; }

html.dark-mode .jlpt-mode-tag  { background: rgba(16,185,129,.1); color: #34d399; }
html.dark-mode .jlpt-badge     { color: #34d399 !important; background: rgba(26,188,156,.12) !important; }

/* ══════════════════════════════════════════
   JLPT CHIP — compact colorful pill selector
══════════════════════════════════════════ */
.jlpt-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .9rem;
  border-radius: 99px;
  border: 1.5px solid transparent;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
  font-family: inherit;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.jlpt-chip:hover  { transform: translateY(-2px) scale(1.05); }
.jlpt-chip:active { transform: scale(.95); }

/* Dot indicator */
.jlpt-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: currentColor;
  opacity: .6;
  transition: opacity .2s;
}
.jlpt-chip.active .jlpt-chip-dot { opacity: 1; background: rgba(255,255,255,.9); }

/* ── Per-level IDLE (pastel background, colored text) ── */
.jlpt-chip--all { background:#ede9fe; color:#5b21b6; border-color:#c4b5fd; }
.jlpt-chip--pra { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }
.jlpt-chip--n5  { background:#dbeafe; color:#1e40af; border-color:#93c5fd; }
.jlpt-chip--n4  { background:#ccfbf1; color:#0f766e; border-color:#5eead4; }
.jlpt-chip--n3  { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.jlpt-chip--n2  { background:#ffedd5; color:#9a3412; border-color:#fdba74; }
.jlpt-chip--n1  { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }

/* ── HOVER — slightly deeper ── */
.jlpt-chip--all:hover { background:#ddd6fe; border-color:#a78bfa; }
.jlpt-chip--pra:hover { background:#a7f3d0; border-color:#34d399; }
.jlpt-chip--n5:hover  { background:#bfdbfe; border-color:#60a5fa; }
.jlpt-chip--n4:hover  { background:#99f6e4; border-color:#2dd4bf; }
.jlpt-chip--n3:hover  { background:#fde68a; border-color:#fbbf24; }
.jlpt-chip--n2:hover  { background:#fed7aa; border-color:#fb923c; }
.jlpt-chip--n1:hover  { background:#fecaca; border-color:#f87171; }

/* ── ACTIVE — full gradient, white text ── */
.jlpt-chip.active { color:#fff !important; border-color:transparent !important; }
.jlpt-chip--all.active { background:linear-gradient(135deg,#6366f1,#8b5cf6);  box-shadow:0 4px 12px rgba(99,102,241,.35); }
.jlpt-chip--pra.active { background:linear-gradient(135deg,#10b981,#059669);  box-shadow:0 4px 12px rgba(16,185,129,.35); }
.jlpt-chip--n5.active  { background:linear-gradient(135deg,#3b82f6,#1d4ed8);  box-shadow:0 4px 12px rgba(59,130,246,.35); }
.jlpt-chip--n4.active  { background:linear-gradient(135deg,#0d9488,#0f766e);  box-shadow:0 4px 12px rgba(13,148,136,.35); }
.jlpt-chip--n3.active  { background:linear-gradient(135deg,#f59e0b,#d97706);  box-shadow:0 4px 12px rgba(245,158,11,.35); }
.jlpt-chip--n2.active  { background:linear-gradient(135deg,#f97316,#ea580c);  box-shadow:0 4px 12px rgba(249,115,22,.35); }
.jlpt-chip--n1.active  { background:linear-gradient(135deg,#ef4444,#dc2626);  box-shadow:0 4px 12px rgba(239,68,68,.35); }

/* ── Dark mode IDLE ── */
html.dark-mode .jlpt-chip--all { background:rgba(99,102,241,.15);  color:#c4b5fd; border-color:rgba(99,102,241,.4); }
html.dark-mode .jlpt-chip--pra { background:rgba(16,185,129,.12);  color:#6ee7b7; border-color:rgba(16,185,129,.4); }
html.dark-mode .jlpt-chip--n5  { background:rgba(59,130,246,.12);  color:#93c5fd; border-color:rgba(59,130,246,.4); }
html.dark-mode .jlpt-chip--n4  { background:rgba(13,148,136,.12);  color:#5eead4; border-color:rgba(13,148,136,.4); }
html.dark-mode .jlpt-chip--n3  { background:rgba(245,158,11,.12);  color:#fde047; border-color:rgba(245,158,11,.4); }
html.dark-mode .jlpt-chip--n2  { background:rgba(249,115,22,.12);  color:#fdba74; border-color:rgba(249,115,22,.4); }
html.dark-mode .jlpt-chip--n1  { background:rgba(239,68,68,.12);   color:#fca5a5; border-color:rgba(239,68,68,.4); }
/* Dark active — same gradient */
html.dark-mode .jlpt-chip--all.active { background:linear-gradient(135deg,#4f46e5,#7c3aed) !important; box-shadow:0 4px 14px rgba(79,70,229,.45) !important; }
html.dark-mode .jlpt-chip--pra.active { background:linear-gradient(135deg,#059669,#047857) !important; box-shadow:0 4px 14px rgba(16,185,129,.45) !important; }
html.dark-mode .jlpt-chip--n5.active  { background:linear-gradient(135deg,#2563eb,#1d4ed8) !important; box-shadow:0 4px 14px rgba(37,99,235,.45) !important; }
html.dark-mode .jlpt-chip--n4.active  { background:linear-gradient(135deg,#0d9488,#0f766e) !important; box-shadow:0 4px 14px rgba(13,148,136,.45) !important; }
html.dark-mode .jlpt-chip--n3.active  { background:linear-gradient(135deg,#d97706,#b45309) !important; box-shadow:0 4px 14px rgba(217,119,6,.45) !important; }
html.dark-mode .jlpt-chip--n2.active  { background:linear-gradient(135deg,#ea580c,#c2410c) !important; box-shadow:0 4px 14px rgba(234,88,12,.45) !important; }
html.dark-mode .jlpt-chip--n1.active  { background:linear-gradient(135deg,#dc2626,#b91c1c) !important; box-shadow:0 4px 14px rgba(220,38,38,.45) !important; }




/* ══════════════════════════════════════════
   SSW (特定技能) — Kuis Bidang Kerja
══════════════════════════════════════════ */

/* ── Hero Banner ── */
.ssw-hero {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 40%, #047857 100%);
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.ssw-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(52,211,153,.15) 0%, transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(16,185,129,.12) 0%, transparent 50%);
}
.ssw-hero-chars {
  font-size: 28px;
  letter-spacing: 12px;
  color: rgba(255,255,255,.25);
  font-weight: 900;
  margin-bottom: .5rem;
  position: relative;
}
.ssw-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  position: relative;
  margin-bottom: .4rem;
}
.ssw-hero-sub {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  position: relative;
}

/* ── Bidang Section ── */
.ssw-bidang-section {
  margin-bottom: 0;
}
.ssw-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: 1rem;
  letter-spacing: 0.3px;
}

/* ── Bidang Grid ── */
.ssw-bidang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

/* ── Bidang Card ── */
.ssw-bidang-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 1.1rem .75rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-200);
  background: var(--gray-50);
  cursor: pointer;
  font-family: var(--font-jp);
  transition: all 0.2s ease;
  position: relative;
  text-align: center;
}

.ssw-bidang-icon {
  font-size: 32px;
  line-height: 1;
}

.ssw-bidang-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.4;
}
.ssw-bidang-name small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-400);
  margin-top: 2px;
}

/* ── Active bidang (klik-able) ── */
.ssw-bidang-active {
  border-color: #86efac;
  background: #f0fdf4;
}
.ssw-bidang-active:hover {
  border-color: #16a34a;
  background: #dcfce7;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(22,163,74,.15);
}
.ssw-bidang-active.ssw-selected {
  border-color: #16a34a !important;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
  box-shadow: 0 4px 20px rgba(22,163,74,.25) !important;
  transform: translateY(-2px);
}

/* ── Soon bidang (disabled) ── */
.ssw-bidang-soon {
  opacity: 0.5;
  cursor: not-allowed;
}
.ssw-bidang-soon .ssw-bidang-name { color: var(--gray-400); }

/* ── Badges ── */
.ssw-bidang-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ssw-badge-ready {
  background: #dcfce7;
  color: #15803d;
}
.ssw-badge-soon {
  background: var(--gray-100);
  color: var(--gray-400);
}

/* ── Settings Card ── */
.ssw-settings-card {
  animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ssw-selected-bidang {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .75rem 1rem;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.ssw-bidang-label-selected {
  font-size: 15px;
  font-weight: 700;
  color: #15803d;
}
.ssw-bidang-desc {
  font-size: 11px;
  color: var(--gray-400);
  margin-left: auto;
  font-family: var(--font-mono);
}

/* ── Level tag di quiz card ── */
.ssw-level-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Result bidang label ── */
.ssw-result-bidang {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: .5rem;
  letter-spacing: -0.2px;
}

/* ── Dark mode SSW ── */
html.dark-mode .ssw-hero {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 100%);
}
html.dark-mode .ssw-bidang-card {
  background: var(--gray-100);
  border-color: var(--gray-200);
}
html.dark-mode .ssw-bidang-active {
  background: rgba(22,163,74,.08);
  border-color: rgba(22,163,74,.3);
}
html.dark-mode .ssw-bidang-active:hover {
  background: rgba(22,163,74,.15);
  border-color: #16a34a;
}
html.dark-mode .ssw-bidang-active.ssw-selected {
  background: rgba(22,163,74,.2) !important;
  border-color: #16a34a !important;
}
html.dark-mode .ssw-selected-bidang {
  background: rgba(22,163,74,.08);
  border-color: rgba(22,163,74,.3);
}
html.dark-mode .ssw-bidang-label-selected { color: #34d399; }
html.dark-mode .ssw-badge-ready { background: rgba(22,163,74,.15); color: #4ade80; }
html.dark-mode .ssw-section-title { color: var(--gray-600); }
html.dark-mode .ssw-bidang-name  { color: var(--gray-900); }

/* ── SSW Sub Navigation ── */
.ssw-sub-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 1.25rem;
}
.ssw-sub-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--gray-200);
  background: var(--gray-50);
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s ease;
}
.ssw-sub-btn:hover {
  border-color: #16a34a;
  color: #16a34a;
  background: #f0fdf4;
}
.ssw-sub-btn--active {
  background: #f0fdf4 !important;
  border-color: #16a34a !important;
  color: #15803d !important;
  box-shadow: 0 2px 8px rgba(22,163,74,.15);
}

/* ── Simulasi Hero variant ── */
.ssw-sim-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e4a7a 50%, #1a5276 100%);
}

/* ── Simulasi Info Grid ── */
.ssw-sim-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 0;
}
.ssw-sim-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .9rem 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}
.ssw-sim-info-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.ssw-sim-info-title { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.ssw-sim-info-desc  { font-size: 11px; color: var(--gray-400); margin-top: 1px; }

/* ── Confirm Start Card ── */
.ssw-sim-confirm {
  padding: 1rem;
  background: #eff6ff;
  border: 1.5px solid #93c5fd;
  border-radius: var(--radius-md);
}
.ssw-sim-confirm-icon { font-size: 16px; font-weight: 700; color: #1d4ed8; margin-bottom: .5rem; }
.ssw-sim-confirm-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ssw-sim-confirm-detail span {
  font-size: 12px;
  padding: 3px 10px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 999px;
  font-weight: 600;
}

/* ── Simulasi Exam Button ── */
.ssw-btn-sim {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 15px;
}
.ssw-btn-sim:hover { background: linear-gradient(135deg, #1e40af, #1d4ed8); transform: translateY(-1px); }

/* ════════════════════════════════
   SIMULASI UJIAN — Exam Screen
════════════════════════════════ */

/* ── Header ── */
.sim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: .75rem;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sim-header-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sim-bidang-tag {
  font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; letter-spacing: .5px;
}
.sim-progress-text { font-size: 12px; color: var(--gray-400); font-family: var(--font-mono); }

/* ── Timer ── */
.sim-timer { display: flex; align-items: center; gap: 6px; }
.sim-timer-label { font-size: 11px; color: var(--gray-400); }
.sim-timer-val {
  font-size: 20px; font-weight: 700; font-family: var(--font-mono);
  color: var(--gray-900); transition: color 0.3s;
}
.sim-timer-warn   { color: var(--amber) !important; }
.sim-timer-danger { color: var(--red) !important; animation: timerPulse 1s infinite; }
@keyframes timerPulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }

/* ── Navigator Dots ── */
.sim-nav-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: .6rem .75rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: .75rem;
}
.sim-dot {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1.5px solid var(--gray-200);
  background: #fff;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-600);
}
.sim-dot-current  { border-color: #2563eb !important; background: #eff6ff !important; color: #1d4ed8 !important; font-weight: 800; box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
.sim-dot-correct  { background: var(--green-light) !important; border-color: var(--green) !important; color: var(--green-dark) !important; }
.sim-dot-wrong    { background: var(--red-light) !important; border-color: var(--red) !important; color: var(--red) !important; }
.sim-dot-empty    { background: #fff; border-color: var(--gray-200); color: var(--gray-400); }
.sim-dot:hover    { transform: scale(1.15); }

/* ── Question Card ── */
.sim-question-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-bottom: .75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.sim-q-meta { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.sim-q-num { font-size: 12px; font-family: var(--font-mono); color: var(--gray-400); }
.sim-q-word { font-size: 48px; font-weight: 700; text-align: center; padding: .75rem 0; letter-spacing: -1px; }
.sim-q-hira { font-size: 13px; color: var(--gray-400); font-family: var(--font-mono); text-align: center; margin-bottom: .25rem; }
.sim-q-label { font-size: 13px; color: var(--gray-400); text-align: center; padding-top: .75rem; border-top: 1px solid var(--gray-100); margin-bottom: 1rem; }

/* ── Options ── */
.sim-options { display: grid; gap: 8px; }
.sim-opt-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--gray-50);
  cursor: pointer;
  font-family: var(--font-jp);
  font-size: 14px; font-weight: 600;
  text-align: left;
  transition: all 0.18s;
}
.sim-opt-btn:hover:not(:disabled) { border-color: #2563eb; background: #eff6ff; }
.sim-opt-letter {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--gray-200); color: var(--gray-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.sim-opt-text { flex: 1; }
.sim-opt-correct { background: var(--green-light) !important; border-color: var(--green) !important; }
.sim-opt-correct .sim-opt-letter { background: var(--green) !important; color: #fff !important; }
.sim-opt-wrong   { background: var(--red-light) !important; border-color: var(--red) !important; }
.sim-opt-wrong .sim-opt-letter   { background: var(--red) !important; color: #fff !important; }
.sim-opt-btn:disabled { cursor: default; }

/* ── Nav buttons ── */
.sim-nav-btns {
  display: flex; gap: 8px; justify-content: space-between;
  padding: .75rem 0;
}
.sim-nav-btns .btn { flex: 1; }

/* ════════════════════════════════
   SIMULASI RESULT
════════════════════════════════ */
.sim-result-wrap { padding-bottom: 3rem; }

.sim-result-status {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  border-radius: var(--radius-xl);
  margin-bottom: 1.25rem;
}
.sim-lulus { background: linear-gradient(135deg, #dcfce7, #bbf7d0); border: 2px solid #86efac; }
.sim-gagal { background: linear-gradient(135deg, #fee2e2, #fecaca); border: 2px solid #fca5a5; }
.sim-result-emoji   { font-size: 56px; margin-bottom: .5rem; }
.sim-result-verdict { font-size: 28px; font-weight: 900; letter-spacing: 2px; }
.sim-lulus .sim-result-verdict { color: #15803d; }
.sim-gagal .sim-result-verdict { color: #b91c1c; }
.sim-result-bidang  { font-size: 14px; font-weight: 600; margin-top: .25rem; opacity: .7; }

/* ── Score circle ── */
.sim-result-score-wrap {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.sim-score-circle {
  width: 90px; height: 90px; border-radius: 50%;
  border: 5px solid var(--green);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sim-score-pct    { font-size: 24px; font-weight: 800; font-family: var(--font-mono); line-height: 1; }
.sim-score-detail { font-size: 12px; color: var(--gray-400); font-family: var(--font-mono); }
.sim-score-stats  { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sim-score-stat   { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ssv-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.ssv-dot.green { background: var(--green); }
.ssv-dot.red   { background: var(--red); }
.ssv-dot.gray  { background: var(--gray-400); }
.ssv-dot.amber { background: var(--amber); }

/* ── Pass bar ── */
.sim-pass-bar {
  height: 12px; background: var(--gray-200); border-radius: 999px;
  position: relative; overflow: visible; margin-bottom: .4rem;
}
.sim-pass-fill { height: 100%; border-radius: 999px; max-width: 100%; transition: width .6s ease; }
.sim-pass-marker {
  position: absolute; top: -4px;
  width: 3px; height: 20px;
  background: var(--gray-900); border-radius: 2px;
  transform: translateX(-50%);
}
.sim-pass-label {
  position: absolute; top: 22px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--gray-600);
  font-family: var(--font-mono);
}
.sim-pass-note { font-size: 11px; color: var(--gray-400); text-align: center; margin-top: .5rem; }

/* ── Review ── */
.sim-review-section { margin-top: 1.5rem; }
.sim-review-title { font-size: 15px; font-weight: 700; margin-bottom: .75rem; color: var(--gray-900); }
.sim-review-list { display: flex; flex-direction: column; gap: 6px; }

/* ══════════════════════════════════════════
   RESULT CARD — muncul setelah menjawab soal
   ══════════════════════════════════════════ */
.sim-result-card {
  margin-top: 1.25rem;
  border-radius: 14px;
  overflow: hidden;
  animation: fadeInUp 0.3s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

/* Header benar / salah */
.sim-result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .75rem 1.1rem;
  font-size: 15px;
  font-weight: 700;
}
.sim-result-icon { font-size: 20px; line-height: 1; }
.sim-result-label { font-size: 15px; font-weight: 700; letter-spacing: .2px; }

/* Warna BENAR */
.sim-result-benar .sim-result-header {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
}
.sim-result-benar {
  border: 2px solid #16a34a;
  background: #f0fdf4;
}

/* Warna SALAH */
.sim-result-salah .sim-result-header {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
}
.sim-result-salah {
  border: 2px solid #dc2626;
  background: #fff5f5;
}

/* Jawaban yang benar (muncul jika salah menjawab) */
.sim-koreksi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .6rem 1.1rem .4rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.sim-koreksi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #dc2626;
  opacity: .8;
}
.sim-koreksi-text {
  font-size: 14px;
  font-weight: 600;
  color: #15803d;
  line-height: 1.5;
}

/* Arti / Penjelasan Bahasa Indonesia */
/* ── Semua Pilihan (muncul setelah menjawab) ── */
.sim-semua-pilihan {
  padding: .6rem 1.1rem .5rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
/* ── Terjemahan Soal (arti pertanyaan dalam B.Indonesia) ── */
.sim-terj-soal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .5rem 1.1rem .4rem;
  background: rgba(99,102,241,.07);
  border-bottom: 1px solid rgba(99,102,241,.15);
}
.sim-terj-soal-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6366f1;
}
.sim-terj-soal-text {
  font-size: 13px;
  font-weight: 600;
  color: #312e81;
  line-height: 1.5;
}
html.dark-mode .sim-terj-soal        { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.2); }
html.dark-mode .sim-terj-soal-label  { color: #a5b4fc; }
html.dark-mode .sim-terj-soal-text   { color: #c7d2fe; }

/* Baris utama pilihan */
.sim-semua-main { display: flex; align-items: flex-start; gap: 5px; }

/* Terjemahan per pilihan */
.sim-opt-terj {
  display: block;
  font-size: 11px;
  color: #6b7280;
  padding-left: 22px;
  margin-top: 1px;
  line-height: 1.4;
  font-style: italic;
}
.sim-semua-item.benar .sim-opt-terj { color: #15803d; }
.sim-semua-item.salah .sim-opt-terj { color: #b91c1c; }
html.dark-mode .sim-opt-terj                  { color: #9ca3af; }
html.dark-mode .sim-semua-item.benar .sim-opt-terj { color: #4ade80; }
html.dark-mode .sim-semua-item.salah .sim-opt-terj { color: #f87171; }

.sim-semua-label {

  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6b7280;
  margin-bottom: .4rem;
}
.sim-semua-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
  margin-bottom: 2px;
}
.sim-semua-item.benar {
  background: #dcfce7;
  color: #15803d;
  font-weight: 600;
}
.sim-semua-item.salah {
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 500;
}
html.dark-mode .sim-semua-item         { color: #d1d5db; }
html.dark-mode .sim-semua-item.benar   { background: rgba(22,163,74,.15); color: #4ade80; }
html.dark-mode .sim-semua-item.salah   { background: rgba(220,38,38,.15); color: #f87171; }
html.dark-mode .sim-semua-label        { color: #9ca3af; }

/* ── Arti / Penjelasan ── */
.sim-arti {

  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: .75rem 1.1rem .9rem;
}
.sim-arti-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.sim-arti-text {
  font-size: 13px;
  line-height: 1.6;
  color: #374151;
  font-weight: 500;
}

/* ── Review meta (seksi label di review) ── */
.sim-review-meta { margin-bottom: 4px; }
.rev-seksi-jp  { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background:#dbeafe; color:#1e40af; }
.rev-seksi-tek { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background:#dcfce7; color:#15803d; }

/* ── Review penjelasan ── */
.sim-review-explain {
  font-size: 11px;
  color: #92400e;
  background: #fffbeb;
  border-left: 3px solid #fde68a;
  padding: 4px 8px;
  margin-top: 5px;
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
}

/* ── Dark mode ── */
html.dark-mode .sim-q-pertanyaan { color: var(--gray-900); }
html.dark-mode .sim-seksi-jp  { background: rgba(37,99,235,.15); color: #93c5fd; }
html.dark-mode .sim-seksi-tek { background: rgba(22,163,74,.15); color: #4ade80; }
html.dark-mode .sim-result-benar { background: rgba(22,163,74,.08); border-color: #16a34a; }
html.dark-mode .sim-result-salah { background: rgba(220,38,38,.08); border-color: #dc2626; }
html.dark-mode .sim-arti-text    { color: #d1d5db; }
html.dark-mode .sim-koreksi-text { color: #4ade80; }
html.dark-mode .sim-review-explain { background: rgba(251,191,36,.08); border-left-color: rgba(251,191,36,.3); color: #fbbf24; }
html.dark-mode .rev-seksi-jp  { background: rgba(37,99,235,.15); color: #93c5fd; }
html.dark-mode .rev-seksi-tek { background: rgba(22,163,74,.15); color: #4ade80; }



.sim-review-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-md);
  border-left: 4px solid var(--gray-200);
}
.rev-correct { background: #f0fdf4; border-left-color: var(--green); }
.rev-wrong   { background: #fef2f2; border-left-color: var(--red); }
.rev-skip    { background: var(--gray-50); border-left-color: var(--gray-400); }
.sim-review-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gray-200); color: var(--gray-600);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rev-correct .sim-review-num { background: var(--green); color: #fff; }
.rev-wrong   .sim-review-num { background: var(--red);   color: #fff; }
.sim-review-body { flex: 1; min-width: 0; }
.sim-review-q    { font-size: 15px; font-weight: 700; color: var(--gray-900); }
.sim-review-hira { font-size: 12px; color: var(--gray-400); font-family: var(--font-mono); font-weight: 400; }
.sim-review-ans  { font-size: 12px; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rev-label-correct { color: var(--green-dark); font-weight: 600; }
.rev-label-wrong   { color: var(--red); font-weight: 600; }
.rev-label-skip    { color: var(--gray-400); font-style: italic; }

/* ── Dark mode Simulasi ── */
html.dark-mode .sim-header  { background: var(--white); border-color: var(--gray-200); }
html.dark-mode .sim-nav-dots, html.dark-mode .sim-question-card { background: var(--white); border-color: var(--gray-200); }
html.dark-mode .sim-opt-btn { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-900); }
html.dark-mode .sim-dot     { background: var(--gray-100); border-color: var(--gray-200); }
html.dark-mode .ssw-sub-btn { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-600); }
html.dark-mode .ssw-sim-info-item { background: var(--gray-100); border-color: var(--gray-200); }
html.dark-mode .ssw-sim-confirm   { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.3); }
html.dark-mode .ssw-sim-confirm-detail span { background: rgba(37,99,235,.15); color: #93c5fd; }
html.dark-mode .sim-result-score-wrap { background: var(--gray-100); border-color: var(--gray-200); }
html.dark-mode .sim-lulus { background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.3); }
html.dark-mode .sim-gagal { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.3);  }
html.dark-mode .rev-correct { background: rgba(16,185,129,.08); }
html.dark-mode .rev-wrong   { background: rgba(239,68,68,.08);  }

/* ── Teks pertanyaan (format simulasi baru) ── */
/* ── Terjemahan soal di result card (muncul setelah menjawab) ── */
.sim-terj-soal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .55rem 1.1rem .45rem;
  background: rgba(99,102,241,.07);
  border-bottom: 1px solid rgba(99,102,241,.12);
}
.sim-terj-soal-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6366f1;
}
.sim-terj-soal-text {
  font-size: 13px;
  font-weight: 600;
  color: #312e81;
  line-height: 1.5;
}
html.dark-mode .sim-terj-soal        { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.2); }
html.dark-mode .sim-terj-soal-label  { color: #a5b4fc; }
html.dark-mode .sim-terj-soal-text   { color: #c7d2fe; }

.sim-q-pertanyaan {

  font-size: 16px;
  font-weight: 600;
  line-height: 2.2;          /* lebih tinggi untuk ruang furigana */
  color: var(--gray-900);
  padding: 1rem 0 .5rem;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 1rem;
  white-space: pre-line;
}

/* ── Ruby / Furigana ── */
/*
 * Gunakan native ruby rendering bawaan browser — JANGAN override display.
 * Hanya sesuaikan ukuran dan warna rt agar furigana tampil rapi.
 */
ruby {
  ruby-align: center;
  /* TIDAK ada display: inline-flex — biarkan browser render ruby secara native */
}
rt {
  font-size: 0.5em;
  font-weight: 500;
  color: #dc2626;
  letter-spacing: 0.03em;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  font-family: var(--font-jp);
  white-space: nowrap;
}
rt.rt-small { font-size: 0.42em; }
rt.rt-large { font-size: 0.58em; }

/* Dark mode ruby */
html.dark-mode rt { color: #f87171; }

/* Furigana OFF — sembunyikan rt, ruby jadi inline biasa */
html.furigana-off rt   { display: none; }
html.furigana-off ruby { ruby-position: unset; }

/* ── Seksi Badge ── */
.sim-seksi-badge {
  font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: .5px; text-transform: uppercase;
}
.sim-seksi-jp  { background: #dbeafe; color: #1e40af; }
.sim-seksi-tek { background: #dcfce7; color: #15803d; }

/* ── Penjelasan box (muncul setelah menjawab) ── */
.sim-penjelasan {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: #92400e;
  line-height: 1.5;
  animation: fadeInUp 0.3s ease;
}

/* ── Review meta (seksi label di review) ── */
.sim-review-meta { margin-bottom: 4px; }
.rev-seksi-jp  { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background:#dbeafe; color:#1e40af; }
.rev-seksi-tek { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background:#dcfce7; color:#15803d; }

/* ── Review penjelasan ── */
.sim-review-explain {
  font-size: 11px;
  color: #92400e;
  background: #fffbeb;
  border-left: 3px solid #fde68a;
  padding: 4px 8px;
  margin-top: 5px;
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
}

/* ── Dark mode additions ── */
html.dark-mode .sim-q-pertanyaan { color: var(--gray-900); }
html.dark-mode .sim-seksi-jp  { background: rgba(37,99,235,.15); color: #93c5fd; }
html.dark-mode .sim-seksi-tek { background: rgba(22,163,74,.15); color: #4ade80; }
html.dark-mode .sim-penjelasan { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.3); color: #fbbf24; }
html.dark-mode .sim-review-explain { background: rgba(251,191,36,.08); border-left-color: rgba(251,191,36,.3); color: #fbbf24; }
html.dark-mode .rev-seksi-jp  { background: rgba(37,99,235,.15); color: #93c5fd; }
html.dark-mode .rev-seksi-tek { background: rgba(22,163,74,.15); color: #4ade80; }

/* ════════════════════════════════════════════════
   GAMBAR SOAL SIMULASI SSW
   ════════════════════════════════════════════════ */

/* ── Wrapper gambar di soal ── */
.sim-q-image-wrap {
  margin: .75rem 0 1rem;
  text-align: center;
  position: relative;
}

.sim-q-image {
  max-width: 100%;
  max-height: 300px;
  width: auto;
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-200);
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.sim-q-image:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  border-color: #2563eb;
}

.sim-q-image-hint {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 5px;
  font-style: italic;
}

/* ── Gambar kecil di review jawaban ── */
.sim-review-img-wrap {
  margin: 6px 0 4px;
}
.sim-review-img {
  max-width: 120px;
  max-height: 80px;
  border-radius: 8px;
  border: 1.5px solid var(--gray-200);
  object-fit: contain;
  display: block;
}

/* ── Image Modal Overlay ── */
.sim-img-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.sim-img-modal-overlay.sim-img-modal-open {
  opacity: 1;
  pointer-events: all;
}

.sim-img-modal-box {
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  transform: scale(0.95);
  transition: transform 0.2s ease;
}
.sim-img-modal-overlay.sim-img-modal-open .sim-img-modal-box {
  transform: scale(1);
}

.sim-img-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.sim-img-modal-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-600);
}
.sim-img-modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.sim-img-modal-close:hover {
  background: var(--red);
  color: #fff;
}

.sim-img-modal-img {
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  padding: 1rem;
}

/* Dark mode image */
html.dark-mode .sim-q-image    { border-color: var(--gray-200); }
html.dark-mode .sim-q-image-hint { color: var(--gray-500); }
html.dark-mode .sim-review-img { border-color: var(--gray-200); }
html.dark-mode .sim-img-modal-box   { background: var(--white); }
html.dark-mode .sim-img-modal-header { background: var(--gray-100); border-color: var(--gray-200); }
html.dark-mode .sim-img-modal-close { background: var(--gray-200); color: var(--gray-900); }

/* ══════════════════════════════════════════
   DRAWER SECTION LABELS
══════════════════════════════════════════ */
.mob-drawer-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-400);
  padding: 0 4px 8px;
  font-family: var(--font-jp);
}
html.dark-mode .mob-drawer-section-label { color: var(--gray-600); }

/* ══════════════════════════════════════════
   HOME / DASHBOARD SCREEN
══════════════════════════════════════════ */

/* ── Hero Banner ── */
.home-hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 1.25rem;
  min-height: 160px;
  display: flex;
  align-items: center;
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1a4e 0%, #2d1b69 30%, #1565c0 65%, #0288d1 100%);
  z-index: 0;
}
.home-hero-bg::before {
  content: 'みんなの日本語';
  position: absolute;
  right: -10px; top: 50%;
  transform: translateY(-50%);
  font-size: 72px;
  font-weight: 900;
  color: rgba(255,255,255,.06);
  letter-spacing: -4px;
  white-space: nowrap;
  pointer-events: none;
}
.home-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.08) 0%, transparent 60%);
}

.home-hero-content {
  position: relative;
  z-index: 1;
  padding: 1.5rem 1.5rem;
  width: 100%;
}

.home-greeting {
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  color: rgba(255,255,255,.75);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.home-tagline {
  font-size: clamp(24px, 7vw, 36px);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 6px;
}

.home-subtitle {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  font-weight: 500;
}

.home-streak {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  min-height: 26px;
}
.home-streak:empty { display: none; }

/* ── Quick Stats Row ── */
.home-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 1.5rem;
}

.home-stat-pill {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.home-stat-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.home-stat-icon {
  font-size: 18px;
  line-height: 1;
}

.home-stat-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--gray-900);
  font-family: var(--font-mono);
  line-height: 1.2;
}

.home-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ── Section Titles ── */
.home-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.home-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
  border-radius: 999px;
}

/* ── Main Menu Cards Grid ── */
.home-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.home-menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px 14px;
  border-radius: var(--radius-lg);
  border: 1.5px solid transparent;
  background: var(--white);
  cursor: pointer;
  font-family: var(--font-jp);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.home-menu-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.home-menu-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.home-menu-card:active { transform: scale(.97); }

.home-card-icon {
  font-size: 32px;
  line-height: 1;
  display: block;
}

.home-card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.3;
  white-space: nowrap;
}

.home-card-desc {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

/* Per-card accent colors */
.home-card--kana   { border-color: #e9d5ff; }
.home-card--kana::before   { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.home-card--kana:hover     { border-color: #a78bfa; box-shadow: 0 8px 24px rgba(124,58,237,.18); }

.home-card--kotoba { border-color: #fed7aa; }
.home-card--kotoba::before { background: linear-gradient(90deg, #ea580c, #f97316); }
.home-card--kotoba:hover   { border-color: #f97316; box-shadow: 0 8px 24px rgba(234,88,12,.18); }

.home-card--kanji  { border-color: #bfdbfe; }
.home-card--kanji::before  { background: linear-gradient(90deg, #1d4ed8, #3b82f6); }
.home-card--kanji:hover    { border-color: #3b82f6; box-shadow: 0 8px 24px rgba(29,78,216,.18); }

.home-card--bunpou { border-color: #bbf7d0; }
.home-card--bunpou::before { background: linear-gradient(90deg, #16a34a, #22c55e); }
.home-card--bunpou:hover   { border-color: #22c55e; box-shadow: 0 8px 24px rgba(22,163,74,.18); }

.home-card--dokkai { border-color: #a5f3fc; }
.home-card--dokkai::before { background: linear-gradient(90deg, #0891b2, #06b6d4); }
.home-card--dokkai:hover   { border-color: #06b6d4; box-shadow: 0 8px 24px rgba(8,145,178,.18); }

.home-card--flash  { border-color: #fde68a; }
.home-card--flash::before  { background: linear-gradient(90deg, #d97706, #f59e0b); }
.home-card--flash:hover    { border-color: #f59e0b; box-shadow: 0 8px 24px rgba(217,119,6,.18); }

.home-card--minnakanji { border-color: #fbcfe8; }
.home-card--minnakanji::before { background: linear-gradient(90deg, #db2777, #f43f5e); }
.home-card--minnakanji:hover   { border-color: #f43f5e; box-shadow: 0 8px 24px rgba(219,39,119,.18); }

.home-card--henkan { border-color: #c7d2fe; }
.home-card--henkan::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.home-card--henkan:hover   { border-color: #8b5cf6; box-shadow: 0 8px 24px rgba(99,102,241,.18); }

.home-card--susun  { border-color: #c4b5fd; }
.home-card--susun::before  { background: linear-gradient(90deg, #7c3aed, #a855f7); }
.home-card--susun:hover    { border-color: #a855f7; box-shadow: 0 8px 24px rgba(124,58,237,.2); }

/* ── Furigana reveal for Minna Kanji quiz ── */
.mk-reveal-kanji {
  text-align: center;
  margin: 4px 0;
}
.mk-reveal-kanji ruby {
  font-size: 56px;
  font-weight: 900;
  color: var(--indigo, #4f46e5);
  font-family: var(--font-jp);
  ruby-align: center;
}
.mk-reveal-kanji ruby rt {
  font-size: 18px;
  font-weight: 600;
  color: #db2777;
  letter-spacing: 1px;
  line-height: 1.4;
}

/* ── Exam Cards ── */
.home-exam-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.home-exam-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: var(--font-jp);
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.home-exam-card:hover { transform: translateY(-3px); }
.home-exam-card:active { transform: scale(.98); }

.home-exam-badge {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 99px;
  color: #fff;
}

.home-exam-icon { font-size: 32px; line-height: 1; flex-shrink: 0; }

.home-exam-title {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}

.home-exam-desc {
  font-size: 10px;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
}

.home-exam--ssw {
  background: linear-gradient(135deg, #7f1d1d, #dc2626, #ef4444);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 4px 16px rgba(220,38,38,.3);
}
.home-exam--ssw .home-exam-badge { background: rgba(0,0,0,.25); }
.home-exam--ssw:hover { box-shadow: 0 8px 28px rgba(220,38,38,.4); }

.home-exam--jft {
  background: linear-gradient(135deg, #1e3a5f, #1565c0, #1976d2);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 4px 16px rgba(21,101,192,.3);
}
.home-exam--jft .home-exam-badge { background: rgba(0,0,0,.25); }
.home-exam--jft:hover { box-shadow: 0 8px 28px rgba(21,101,192,.4); }

/* ── Reference Cards Row ── */
.home-ref-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.home-ref-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  font-family: var(--font-jp);
  transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
  text-align: left;
}
.home-ref-item:hover {
  border-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.home-ref-item:active { transform: scale(.98); }

.home-ref-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  font-size: 18px;
  flex-shrink: 0;
  transition: all .2s ease;
}
.home-ref-item:hover .home-ref-icon {
  background: var(--primary-light);
  transform: scale(1.1) rotate(-5deg);
}

.home-ref-text {
  display: flex;
  flex-direction: column;
}
.home-ref-title {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.2;
}
.home-ref-desc {
  font-size: 9px;
  color: var(--gray-400);
  font-weight: 500;
  margin-top: 2px;
}

/* ── Footer Promo ── */
.home-footer-promo {
  margin-top: 1.75rem;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fdf4ff, #f0f9ff);
  border: 1px solid #e0d7fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--gray-600);
  font-weight: 600;
  margin-bottom: 1rem;
}

.home-tiktok-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 99px;
  background: linear-gradient(135deg, #010101, #1a1a2e);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s ease;
  flex-shrink: 0;
}
.home-tiktok-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

/* ── Dark mode for Home ── */
html.dark-mode .home-stat-pill {
  background: #1e1b2e;
  border-color: rgba(255,255,255,.1);
}
html.dark-mode .home-stat-val { color: #e0e7ff; }
html.dark-mode .home-stat-lbl { color: #6b7280; }
html.dark-mode .home-menu-card {
  background: #1a1828;
  border-color: rgba(255,255,255,.08);
}
html.dark-mode .home-card-title { color: #e0e7ff; }
html.dark-mode .home-card-desc  { color: #6b7280; }
/* Dark mode per-card accents */
html.dark-mode .home-card--kana       { border-color: rgba(167,139,250,.3); background: #1a1230; }
html.dark-mode .home-card--kotoba     { border-color: rgba(249,115,22,.3);  background: #1c1208; }
html.dark-mode .home-card--kanji      { border-color: rgba(59,130,246,.3);  background: #0d1828; }
html.dark-mode .home-card--bunpou     { border-color: rgba(34,197,94,.3);   background: #0a1f10; }
html.dark-mode .home-card--dokkai     { border-color: rgba(6,182,212,.3);   background: #061820; }
html.dark-mode .home-card--minnakanji { border-color: rgba(244,63,94,.3);   background: #1f0d16; }
html.dark-mode .home-card--henkan     { border-color: rgba(139,92,246,.3);  background: #130f28; }
html.dark-mode .home-card--susun      { border-color: rgba(168,85,247,.3);  background: #180d2e; }
html.dark-mode .home-ref-item {
  background: #1a1828;
  border-color: rgba(255,255,255,.08);
}
html.dark-mode .home-ref-title { color: #e0e7ff; }
html.dark-mode .home-ref-icon { background: #252236; color: #a5b4fc; }
html.dark-mode .home-footer-promo {
  background: linear-gradient(135deg, #1a1625, #111827);
  border-color: rgba(255,255,255,.08);
  color: #6b7280;
}

/* Bottom nav tab color for Home (tab 1 = rose → change to indigo for Home) */
.mob-tab:nth-child(1).active              { color: #6366f1; }
.mob-tab:nth-child(1).active .mob-tab-icon{ background: #eef2ff; transform: translateY(-3px) scale(1.08); }
.mob-tab:nth-child(1).active::before      { width: 32px; background: #6366f1; box-shadow: 0 0 8px rgba(99,102,241,.5); }
.mob-tab:nth-child(1):not(.active):hover  { color: #6366f1; }

/* Tab 3 = Kanji: keep indigo */
/* Tab 4 = Dokkai: Cyan */
.mob-tab:nth-child(4).active              { color: #0891b2; }
.mob-tab:nth-child(4).active .mob-tab-icon{ background: #ecfeff; transform: translateY(-3px) scale(1.08); }
.mob-tab:nth-child(4).active::before      { width: 32px; background: #06b6d4; box-shadow: 0 0 8px rgba(6,182,212,.5); }
.mob-tab:nth-child(4):not(.active):hover  { color: #0891b2; }