/* ════════════════════════════════════════════════════
   assets/css/partikel.css — Kuis Dokkai (Reading Quiz)
   ════════════════════════════════════════════════════ */

/* ── Furigana ruby styles (scoped to dokkai) ── */
.dokkai-teks ruby,
.dokkai-pertanyaan ruby,
.dokkai-pilihan-btn ruby,
.dokkai-review-q ruby {
  ruby-align: center;
}
.dokkai-teks rt,
.dokkai-pertanyaan rt,
.dokkai-pilihan-btn rt,
.dokkai-review-q rt,
.dokkai-soal-card rt {
  font-size: .55em;
  color: #e53935;
  font-weight: 600;
  opacity: 1;
}
.dark-mode .dokkai-teks rt,
.dark-mode .dokkai-pertanyaan rt,
.dark-mode .dokkai-pilihan-btn rt,
.dark-mode .dokkai-review-q rt,
.dark-mode .dokkai-soal-card rt {
  color: #ff8a65;
}

/* ── Hero Banner ── */
.dokkai-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl, 20px);
  background: linear-gradient(135deg, #1a237e 0%, #283593 40%, #1565c0 100%);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 32px rgba(26,35,126,.35);
}
.dokkai-hero::before {
  content: '読';
  position: absolute;
  top: -20px; right: -10px;
  font-size: 130px;
  font-weight: 900;
  color: rgba(255,255,255,.06);
  pointer-events: none;
  line-height: 1;
}
.dokkai-hero-icon { font-size: 2.8rem; line-height: 1; margin-bottom: .4rem; }
.dokkai-hero-title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: .35rem;
  letter-spacing: -.02em;
}
.dokkai-hero-sub {
  font-size: .875rem;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
}
.dokkai-hero-badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.dokkai-hero-badge {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 99px;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: 4px 12px;
  backdrop-filter: blur(8px);
}

/* ── Sub-nav (shared pattern) ── */
.dokkai-sub-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 1.25rem;
}
.dokkai-sub-nav::-webkit-scrollbar { display: none; }
.dokkai-sub-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 99px;
  border: 1.5px solid var(--border, #e5e7eb);
  background: var(--white, #fff);
  color: var(--gray-700, #374151);
  font-size: .83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
}
.dokkai-sub-btn:hover { border-color: #1565c0; color: #1565c0; }
.dokkai-sub-btn--active {
  background: #1565c0;
  color: #fff;
  border-color: #1565c0;
}

/* ── Bab Grid ── */
.dokkai-bab-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin-top: .5rem;
}
.dokkai-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;
  position: relative;
}
.dbab-lbl {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}
.dbab-num {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  line-height: 1;
}

/* Dokkai: Cool palette per 10 bab */
/* Bab 1–10: Cyan */
.dokkai-bab-pill:nth-child(n+1):nth-child(-n+10) { border-color:#a5f3fc; background:#ecfeff; }
.dokkai-bab-pill:nth-child(n+1):nth-child(-n+10) .dbab-num  { color:#0e7490; }
.dokkai-bab-pill:nth-child(n+1):nth-child(-n+10) .dbab-lbl  { color:#67e8f9; }
.dokkai-bab-pill:nth-child(n+1):nth-child(-n+10):hover { border-color:#06b6d4; background:#cffafe; box-shadow:0 2px 8px rgba(6,182,212,.3); transform:scale(1.12); }
.dokkai-bab-pill:nth-child(n+1):nth-child(-n+10).selected { background:linear-gradient(135deg,#0e7490,#06b6d4); border-color:transparent; box-shadow:0 2px 10px rgba(14,116,144,.4); transform:scale(1.05); }

/* Bab 11–20: Teal */
.dokkai-bab-pill:nth-child(n+11):nth-child(-n+20) { border-color:#99f6e4; background:#f0fdfa; }
.dokkai-bab-pill:nth-child(n+11):nth-child(-n+20) .dbab-num  { color:#0f766e; }
.dokkai-bab-pill:nth-child(n+11):nth-child(-n+20) .dbab-lbl  { color:#5eead4; }
.dokkai-bab-pill:nth-child(n+11):nth-child(-n+20):hover { border-color:#14b8a6; background:#ccfbf1; box-shadow:0 2px 8px rgba(20,184,166,.3); transform:scale(1.12); }
.dokkai-bab-pill:nth-child(n+11):nth-child(-n+20).selected { background:linear-gradient(135deg,#0f766e,#14b8a6); border-color:transparent; box-shadow:0 2px 10px rgba(15,118,110,.4); transform:scale(1.05); }

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

/* Bab 31–40: Sky */
.dokkai-bab-pill:nth-child(n+31):nth-child(-n+40) { border-color:#bae6fd; background:#f0f9ff; }
.dokkai-bab-pill:nth-child(n+31):nth-child(-n+40) .dbab-num  { color:#0369a1; }
.dokkai-bab-pill:nth-child(n+31):nth-child(-n+40) .dbab-lbl  { color:#7dd3fc; }
.dokkai-bab-pill:nth-child(n+31):nth-child(-n+40):hover { border-color:#0ea5e9; background:#e0f2fe; box-shadow:0 2px 8px rgba(14,165,233,.3); transform:scale(1.12); }
.dokkai-bab-pill:nth-child(n+31):nth-child(-n+40).selected { background:linear-gradient(135deg,#0369a1,#0ea5e9); border-color:transparent; box-shadow:0 2px 10px rgba(3,105,161,.4); transform:scale(1.05); }

/* Bab 41–50: Indigo */
.dokkai-bab-pill:nth-child(n+41):nth-child(-n+50) { border-color:#c7d2fe; background:#eef2ff; }
.dokkai-bab-pill:nth-child(n+41):nth-child(-n+50) .dbab-num  { color:#3730a3; }
.dokkai-bab-pill:nth-child(n+41):nth-child(-n+50) .dbab-lbl  { color:#a5b4fc; }
.dokkai-bab-pill:nth-child(n+41):nth-child(-n+50):hover { border-color:#6366f1; background:#e0e7ff; box-shadow:0 2px 8px rgba(99,102,241,.3); transform:scale(1.12); }
.dokkai-bab-pill:nth-child(n+41):nth-child(-n+50).selected { background:linear-gradient(135deg,#3730a3,#6366f1); border-color:transparent; box-shadow:0 2px 10px rgba(55,48,163,.4); transform:scale(1.05); }

.dokkai-bab-pill.selected .dbab-num { color:#fff !important; }
.dokkai-bab-pill.selected .dbab-lbl { color:rgba(255,255,255,.7) !important; }

.dokkai-bab-pill.has-data::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4caf50;
}

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

.dokkai-bab-note {
  font-size: .78rem;
  color: var(--gray-500, #6b7280);
  margin-top: .5rem;
  text-align: center;
}


/* ════════════════════════════════════════════════════
   QUIZ SCREEN
   ════════════════════════════════════════════════════ */

/* Progress header */
.dokkai-quiz-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white, #fff);
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dokkai-quiz-back {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--gray-600, #4b5563);
  padding: 4px 8px;
  border-radius: 8px;
  transition: background .15s;
}
.dokkai-quiz-back:hover { background: var(--gray-100, #f3f4f6); }
.dokkai-quiz-meta { flex: 1; }
.dokkai-quiz-title { font-size: .9rem; font-weight: 700; color: var(--gray-900, #111); }
.dokkai-quiz-sub { font-size: .75rem; color: var(--gray-500, #6b7280); }
.dokkai-quiz-counter {
  font-size: .8rem;
  font-weight: 700;
  color: #1565c0;
  white-space: nowrap;
}

/* Progress bar */
.dokkai-progress-bar {
  height: 5px;
  background: var(--gray-200, #e5e7eb);
  border-radius: 0;
  overflow: hidden;
}
.dokkai-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1565c0, #42a5f5);
  border-radius: 0 3px 3px 0;
  transition: width .4s ease;
}

/* Bacaan card */
.dokkai-bacaan-card {
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  border: 1.5px solid #90caf9;
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1rem;
  margin: 1rem 1rem .75rem;
  position: relative;
  transition: box-shadow .3s;
}

/* ── Sticky bacaan popup ── */
.dokkai-sticky-bacaan {
  position: fixed;
  top: 61px;
  left: 0; right: 0;
  z-index: 200;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
  will-change: opacity, transform;
}
.dokkai-sticky-bacaan.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dokkai-sticky-inner {
  margin: 0 8px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(21,101,192,.22), 0 2px 8px rgba(0,0,0,.1);
  border: 1.5px solid rgba(144,202,249,.6);
}
.dark-mode .dokkai-sticky-inner {
  border-color: rgba(66,165,245,.35);
  box-shadow: 0 6px 28px rgba(0,0,0,.45);
}
.dokkai-sticky-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .55rem 1rem;
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 60%, #1e88e5 100%);
  color: #fff;
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
}
.dokkai-sticky-toggle-icon-book {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.dokkai-sticky-toggle-meta {
  flex: 1;
  min-width: 0;
}
.dokkai-sticky-toggle-title {
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dokkai-sticky-toggle-hint {
  font-size: .68rem;
  opacity: .75;
  margin-top: 1px;
}
.dokkai-sticky-toggle-chevron {
  font-size: .7rem;
  opacity: .85;
  transition: transform .25s;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.dokkai-sticky-toggle.open .dokkai-sticky-toggle-chevron { transform: rotate(180deg); }
.dokkai-sticky-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
  background: #fff;
}
.dark-mode .dokkai-sticky-body { background: #111827; }
.dokkai-sticky-body.open { max-height: 240px; overflow-y: auto; }
.dokkai-sticky-teks {
  font-size: .9rem;
  line-height: 2;
  padding: .875rem 1.125rem;
  color: var(--gray-800, #1f2937);
  border-top: 1.5px solid rgba(21,101,192,.12);
}
.dark-mode .dokkai-sticky-teks {
  color: var(--gray-900, #f9fafb);
  border-color: rgba(144,202,249,.15);
}


.dark-mode .dokkai-bacaan-card {
  background: linear-gradient(135deg, rgba(21,101,192,.2) 0%, rgba(106,27,154,.15) 100%);
  border-color: rgba(144,202,249,.3);
}
.dokkai-bacaan-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #1565c0;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dokkai-bacaan-label .bab-badge {
  background: #1565c0;
  color: #fff;
  border-radius: 99px;
  padding: 2px 8px;
  font-size: .7rem;
}
.dokkai-bacaan-judul {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gray-900, #111);
  margin-bottom: .6rem;
}
.dokkai-teks {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--gray-800, #1f2937);
  font-family: 'Noto Serif JP', serif, sans-serif;
  background: rgba(255,255,255,.6);
  border-radius: 10px;
  padding: .75rem 1rem;
  margin-bottom: .6rem;
  border: 1px solid rgba(144,202,249,.4);
}
.dark-mode .dokkai-teks {
  background: rgba(255,255,255,.06);
  color: var(--gray-900, #f9fafb);
}
.dokkai-blank-num {
  display: inline-block;
  background: #1565c0;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: .75rem;
  font-weight: 800;
  vertical-align: middle;
  margin: 0 2px;
  cursor: default;
}
.dokkai-terjemahan {
  font-size: .8rem;
  color: var(--gray-500, #6b7280);
  line-height: 1.5;
  font-style: italic;
  border-top: 1px solid rgba(144,202,249,.3);
  padding-top: .5rem;
  margin-top: .25rem;
}
.dokkai-terjemahan-toggle {
  font-size: .75rem;
  font-weight: 600;
  color: #1565c0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: .35rem;
}

/* Soal cards */
.dokkai-soal-list { padding: 0 1rem 1rem; }
.dokkai-soal-card {
  background: var(--white, #fff);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: .875rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: border-color .2s;
}
.dark-mode .dokkai-soal-card {
  background: var(--gray-800, #1f2937);
  border-color: var(--gray-700, #374151);
}
.dokkai-soal-card.answered { border-color: transparent; }
.dokkai-soal-num {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #1565c0;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dokkai-soal-tipe-badge {
  font-size: .65rem;
  padding: 2px 7px;
  border-radius: 99px;
  font-weight: 700;
}
.tipe-partikel { background: #e3f2fd; color: #1565c0; }
.tipe-kalimat  { background: #f3e5f5; color: #6a1b9a; }
.tipe-maru_batsu { background: #fff8e1; color: #e65100; }

/* ── Maru/Batsu (〇✕) buttons ── */
.dokkai-mb-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: .25rem;
}
.dokkai-mb-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 1rem .5rem;
  border-radius: 14px;
  border: 2.5px solid var(--border, #e5e7eb);
  background: var(--white, #fff);
  cursor: pointer;
  transition: all .18s;
  font-size: .8rem;
  font-weight: 700;
  color: var(--gray-600, #4b5563);
}
.dark-mode .dokkai-mb-btn {
  background: var(--gray-700, #374151);
  border-color: var(--gray-600, #4b5563);
  color: var(--gray-300, #d1d5db);
}
.dokkai-mb-icon {
  font-size: 2.4rem;
  line-height: 1;
  transition: transform .18s;
}
.dokkai-mb-btn:hover:not(:disabled) { transform: translateY(-2px); }
.dokkai-mb-btn--maru:hover:not(:disabled) {
  border-color: #43a047;
  background: #e8f5e9;
  color: #1b5e20;
}
.dokkai-mb-btn--batsu:hover:not(:disabled) {
  border-color: #e53935;
  background: #ffebee;
  color: #b71c1c;
}
.dark-mode .dokkai-mb-btn--maru:hover:not(:disabled) {
  background: rgba(67,160,71,.2);
  border-color: #43a047;
  color: #a5d6a7;
}
.dark-mode .dokkai-mb-btn--batsu:hover:not(:disabled) {
  background: rgba(229,57,53,.2);
  border-color: #e53935;
  color: #ef9a9a;
}
.dokkai-mb-btn:disabled { cursor: default; opacity: .8; }
/* Correct state (maru) */
.dokkai-mb-btn.mb-correct-maru {
  border-color: #43a047 !important;
  background: #e8f5e9 !important;
  color: #1b5e20 !important;
  box-shadow: 0 0 0 3px rgba(67,160,71,.25);
}
/* Correct state (batsu) */
.dokkai-mb-btn.mb-correct-batsu {
  border-color: #e53935 !important;
  background: #ffebee !important;
  color: #b71c1c !important;
  box-shadow: 0 0 0 3px rgba(229,57,53,.25);
}
/* Wrong choice */
.dokkai-mb-btn.mb-wrong {
  border-color: var(--gray-300, #d1d5db) !important;
  background: var(--gray-100, #f3f4f6) !important;
  color: var(--gray-400, #9ca3af) !important;
  text-decoration: line-through;
  opacity: .5;
}
.dark-mode .dokkai-mb-btn.mb-correct-maru { background: rgba(67,160,71,.25) !important; color: #a5d6a7 !important; }
.dark-mode .dokkai-mb-btn.mb-correct-batsu { background: rgba(229,57,53,.25) !important; color: #ef9a9a !important; }

/* ── Dark mode adjustments ── */
.dark-mode .dokkai-bacaan-label { color: #90caf9; }
.dark-mode .dokkai-bacaan-judul { color: var(--gray-900, #f9fafb); }
.dark-mode .dokkai-soal-num { color: #90caf9; }
.dark-mode .tipe-partikel { background: rgba(21,101,192,.25); color: #90caf9; }
.dark-mode .tipe-kalimat  { background: rgba(106,27,154,.25); color: #ce93d8; }
.dark-mode .tipe-maru_batsu { background: rgba(230,81,0,.2); color: #ffcc80; }
.dark-mode .dokkai-terjemahan { color: var(--gray-400, #9ca3af); }
.dark-mode .dokkai-quiz-title { color: var(--gray-900, #f9fafb); }
.dark-mode .dokkai-quiz-sub { color: var(--gray-400, #9ca3af); }
.dark-mode .dokkai-quiz-back { color: var(--gray-300, #d1d5db); }
.dark-mode .dokkai-quiz-counter { color: #90caf9; }
.dark-mode .dokkai-sub-btn { background: var(--gray-800, #1f2937); border-color: var(--gray-700, #374151); color: var(--gray-900, #f9fafb); }

/* Dokkai bab pills dark mode — idle */
.dark-mode .dokkai-bab-pill:nth-child(n+1):nth-child(-n+10)  { background:rgba(14,116,144,.12); border-color:rgba(6,182,212,.3); }
.dark-mode .dokkai-bab-pill:nth-child(n+11):nth-child(-n+20) { background:rgba(15,118,110,.12); border-color:rgba(20,184,166,.3); }
.dark-mode .dokkai-bab-pill:nth-child(n+21):nth-child(-n+30) { background:rgba(29,78,216,.12);  border-color:rgba(59,130,246,.3); }
.dark-mode .dokkai-bab-pill:nth-child(n+31):nth-child(-n+40) { background:rgba(3,105,161,.12);  border-color:rgba(14,165,233,.3); }
.dark-mode .dokkai-bab-pill:nth-child(n+41):nth-child(-n+50) { background:rgba(55,48,163,.12);  border-color:rgba(99,102,241,.3); }
.dark-mode .dokkai-bab-pill:nth-child(n+1):nth-child(-n+10) .dbab-num  { color:#67e8f9; }
.dark-mode .dokkai-bab-pill:nth-child(n+11):nth-child(-n+20) .dbab-num { color:#5eead4; }
.dark-mode .dokkai-bab-pill:nth-child(n+21):nth-child(-n+30) .dbab-num { color:#93c5fd; }
.dark-mode .dokkai-bab-pill:nth-child(n+31):nth-child(-n+40) .dbab-num { color:#7dd3fc; }
.dark-mode .dokkai-bab-pill:nth-child(n+41):nth-child(-n+50) .dbab-num { color:#a5b4fc; }
/* Dokkai bab pills dark mode — SELECTED */
.dark-mode .dokkai-bab-pill:nth-child(n+1):nth-child(-n+10).selected  { background:linear-gradient(135deg,#0e7490,#06b6d4) !important; border-color:transparent !important; box-shadow:0 3px 14px rgba(14,116,144,.55) !important; }
.dark-mode .dokkai-bab-pill:nth-child(n+11):nth-child(-n+20).selected { background:linear-gradient(135deg,#0f766e,#14b8a6) !important; border-color:transparent !important; box-shadow:0 3px 14px rgba(15,118,110,.55) !important; }
.dark-mode .dokkai-bab-pill:nth-child(n+21):nth-child(-n+30).selected { background:linear-gradient(135deg,#1d4ed8,#3b82f6) !important; border-color:transparent !important; box-shadow:0 3px 14px rgba(29,78,216,.55) !important; }
.dark-mode .dokkai-bab-pill:nth-child(n+31):nth-child(-n+40).selected { background:linear-gradient(135deg,#0369a1,#0ea5e9) !important; border-color:transparent !important; box-shadow:0 3px 14px rgba(3,105,161,.55) !important; }
.dark-mode .dokkai-bab-pill:nth-child(n+41):nth-child(-n+50).selected { background:linear-gradient(135deg,#3730a3,#6366f1) !important; border-color:transparent !important; box-shadow:0 3px 14px rgba(55,48,163,.55) !important; }
.dark-mode .dokkai-bab-pill.selected .dbab-num { color:#fff !important; }
.dark-mode .dokkai-bab-pill.selected .dbab-lbl { color:rgba(255,255,255,.8) !important; }

.dark-mode .dokkai-sub-btn.active {
  background: rgba(21,101,192,.25);
  border-color: #42a5f5;
  color: #90caf9;
}

/* ── Responsive tweaks ── */
@media (max-width: 480px) {
  .dokkai-bacaan-card { margin: .75rem .75rem .5rem; padding: 1rem; }
  .dokkai-soal-list { padding: 0 .75rem .75rem; }
  .dokkai-next-wrap { padding: .75rem; bottom: 60px; }
  .dokkai-mb-icon { font-size: 2rem; }
}

/* ── Responsive tweaks ── */
@media (max-width: 480px) {
  .dokkai-bacaan-card { margin: .75rem .75rem .5rem; padding: 1rem; }
  .dokkai-soal-list { padding: 0 .75rem .75rem; }
  .dokkai-next-wrap { padding: .75rem; bottom: 60px; }
}

/* ════════════════════════════════════════════
   HIGHLIGHT KOSAKATA BARU
   ════════════════════════════════════════════ */
.dokkai-vocab {
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg, #fff9c4, #fff176);
  border-radius: 4px;
  padding: 0 3px;
  border-bottom: 2px solid #f9a825;
  cursor: help;
  font-weight: 600;
  transition: background .15s;
}
.dark-mode .dokkai-vocab {
  background: linear-gradient(135deg, rgba(249,168,37,.25), rgba(255,238,88,.2));
  border-color: #f9a825;
  color: #ffe082;
}
.dokkai-vocab:hover { background: linear-gradient(135deg, #fff176, #ffee58); }

/* Tooltip */
.dokkai-vocab::after {
  content: attr(data-meaning);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a237e;
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s;
  z-index: 50;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.dokkai-vocab::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1a237e;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s;
  z-index: 51;
}
.dokkai-vocab:hover::after,
.dokkai-vocab:hover::before,
.dokkai-vocab.tooltip-open::after,
.dokkai-vocab.tooltip-open::before { opacity: 1; }

/* Vocab badge in header */
.dokkai-vocab-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .7rem;
  font-weight: 700;
  background: linear-gradient(135deg,#fff9c4,#fff176);
  color: #6d4c00;
  border: 1.5px solid #f9a825;
  border-radius: 99px;
  padding: 2px 10px;
  cursor: pointer;
  transition: all .15s;
}
.dokkai-vocab-badge:hover { background: #fff176; transform: scale(1.04); }
.dark-mode .dokkai-vocab-badge { background: rgba(249,168,37,.2); color:#ffe082; }

/* ════════════════════════════════════════════
   PRINT / PDF EXPORT
   ════════════════════════════════════════════ */
.dokkai-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .45rem .875rem;
  border-radius: 99px;
  border: 1.5px solid #1565c0;
  background: transparent;
  color: #1565c0;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.dokkai-print-btn:hover {
  background: #1565c0;
  color: #fff;
  box-shadow: 0 3px 12px rgba(21,101,192,.3);
}
.dark-mode .dokkai-print-btn { border-color: #90caf9; color: #90caf9; }
.dark-mode .dokkai-print-btn:hover { background: #1565c0; color: #fff; }

/* Print window styles (injected into new window) */
@media print {
  body * { visibility: hidden !important; }
  .dokkai-printable, .dokkai-printable * { visibility: visible !important; }
  .dokkai-printable { position: absolute; top: 0; left: 0; width: 100%; }
}