/* Eduma LMS global theme layer */
:root {
  --red: #be3428 !important;
  --red-soft: #d4473a !important;
  --red-pale: #fef2f0 !important;
  --ink: #252525 !important;
  --ink-mid: #555f6d !important;
  /* #7b8492 hanya 3,52:1 dan #b8c0ca 1,71:1 di atas --cream #f5f7fa —
     keduanya token TEKS (label, cap waktu, ikon cari), bukan garis. */
  --ink-soft: #676F7B !important;
  --ink-faint: #6B6F75 !important;
  --cream: #f5f7fa !important;
  --white: #ffffff !important;
  --surface: #ffffff !important;
  --border: rgba(37, 37, 37, 0.09) !important;
  --border-mid: rgba(37, 37, 37, 0.15) !important;
  --gold: #ffb606 !important;
  --gold-pale: #fff4cf !important;
  --green: #18a058 !important;
  --green-pale: #e9f8f1 !important;
  --blue: #2f80ed !important;
  --blue-pale: #edf5ff !important;
  --nav-bg: rgba(255, 255, 255, 0.96) !important;
  --shadow-sm: 0 8px 22px rgba(27, 39, 51, 0.07) !important;
  --shadow-md: 0 16px 38px rgba(27, 39, 51, 0.11) !important;
  --shadow-lg: 0 28px 70px rgba(27, 39, 51, 0.16) !important;
  --eduma-dark: #252525;
  --eduma-dark-2: #191919;
  --eduma-muted-bg: #f5f7fa;
}

[data-theme="dark"] {
  --red: #be3428 !important;
  --red-soft: #ffc53d !important;
  --red-pale: rgba(255, 182, 6, 0.16) !important;
  --ink: #f7f7f5 !important;
  --ink-mid: #d4d6da !important;
  --ink-soft: #a6adba !important;
  --ink-faint: #888E96 !important;   /* #626a75 cuma 3,09:1 di atas --white #1a1d23 */
  --cream: #111318 !important;
  --white: #1a1d23 !important;
  --surface: #1f232b !important;
  --border: rgba(255, 255, 255, 0.08) !important;
  --border-mid: rgba(255, 255, 255, 0.15) !important;
  --gold-pale: rgba(255, 182, 6, 0.16) !important;
  --green-pale: rgba(24, 160, 88, 0.16) !important;
  --blue-pale: rgba(47, 128, 237, 0.16) !important;
  --nav-bg: rgba(26, 29, 35, 0.94) !important;
  --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.24) !important;
  --shadow-md: 0 16px 38px rgba(0, 0, 0, 0.32) !important;
  --eduma-dark: #111318;
  --eduma-dark-2: #0c0e12;
}

html {
  scroll-padding-top: 86px;
}

body {
  background:
    linear-gradient(180deg, rgba(245, 247, 250, 0.96), rgba(245, 247, 250, 0.96)),
    var(--cream) !important;
  color: var(--ink) !important;
  font-family: "Outfit", "DM Sans", Arial, sans-serif !important;
}

body::after {
  background: none !important;
  opacity: 0 !important;
}

a,
button,
input,
textarea,
select,
.page-card,
.kana-cell,
.kanji-card,
.grammar-card,
.vt-card,
.vocab-item,
.qa-btn,
.chat-topic,
.prompt-chip,
.sug-chip {
  cursor: pointer;
}

nav:not(.kn-nav):not(.kn-bottom-nav) {
  height: 74px !important;
  padding: 0 clamp(18px, 5vw, 72px) !important;
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 24px rgba(27, 39, 51, 0.06) !important;
}

.nav-logo,
.nav-logo:visited {
  align-items: center !important;
  color: inherit;
  text-decoration: none;
}

.nav-logo-jp {
  color: var(--ink) !important;
  font-family: "Outfit", "DM Sans", Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  background: none !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: currentColor !important;
}

.nav-logo-jp::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: 9px;
  border-radius: 2px;
  background: var(--red);
  box-shadow: 16px 0 0 var(--ink), 0 16px 0 var(--ink), 16px 16px 0 var(--red);
  transform: translateY(-1px);
}

.nav-logo-id,
.nav-logo-sub {
  background: transparent !important;
  color: var(--ink-soft) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
}

.nav-links {
  align-items: center;
  gap: 0.1rem !important;
}

.nav-links a,
.mobile-link {
  color: var(--ink-mid) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 11px;
  border-radius: 4px !important;
  transition: color 160ms ease, background-color 160ms ease;
}

.nav-links a:hover,
.nav-links a.active,
.mobile-link:hover,
.conv-item.active,
.prompt-chip:hover,
.sug-chip:hover,
.chart-tab.active,
.filter-btn.active,
.f-pill.active,
.tab.active,
.level-tabs button.active,
.section-tabs button.active {
  background: var(--red-pale) !important;
  border-color: rgba(255, 182, 6, 0.35) !important;
  color: #b37c00 !important;
}

.theme-toggle,
.nav-login-btn,
.btn-primary,
.btn-sm,
.nav-cta,
.plan-btn,
.btn-white,
.as-new-btn,
.send-btn,
.tool,
.tool-btn,
.qa-btn,
.hero-actions a,
.hero-actions button,
.premium-modal-actions a,
.premium-modal-actions button {
  border-radius: 4px !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.btn-primary,
.btn-sm,
.nav-cta,
.nav-login-btn:hover,
.auth-submit,
.as-new-btn,
.send-btn,
.tool.primary,
.tool-btn.primary,
.live-badge,
.plan-btn,
.live-cta,
.theme-toggle:hover,
.choice.correct {
  background: var(--red) !important;
  color: #252525 !important;
  border-color: var(--red) !important;
  box-shadow: 0 10px 22px rgba(255, 182, 6, 0.22) !important;
  font-weight: 800 !important;
}

.btn-primary:hover,
.btn-sm:hover,
.nav-cta:hover,
.nav-login-btn:hover,
.auth-submit:hover,
.as-new-btn:hover,
.send-btn:hover,
.tool.primary:hover,
.tool-btn.primary:hover,
.live-cta:hover {
  background: var(--red-soft) !important;
  border-color: var(--red-soft) !important;
  color: #252525 !important;
  transform: translateY(-1px);
}

.btn-ghost,
.hero-secondary,
.tool,
.tool-btn,
.nihongo-speak-btn {
  border-color: var(--border-mid) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
}

.btn-ghost:hover,
a:hover,
.tool:hover,
.tool-btn:hover,
.nihongo-speak-btn:hover {
  color: #b37c00 !important;
  border-color: rgba(255, 182, 6, 0.45) !important;
}

.social-bar {
  background: var(--eduma-dark) !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.social-item,
.social-text,
.social-text strong {
  color: inherit !important;
}

.social-icon {
  color: var(--red) !important;
}

.mobile-menu,
.chat-header,
.chat-input-area,
.as-header,
.as-prompts,
.profile-bar {
  background: var(--nav-bg) !important;
  border-color: var(--border) !important;
}

.hero,
.hero-section,
.page-hero,
.dash-hero,
.course-hero,
.video-hero,
.premium-hero {
  background:
    linear-gradient(110deg, rgba(37, 37, 37, 0.9), rgba(37, 37, 37, 0.76)),
    linear-gradient(135deg, #323232, #1b1b1b) !important;
  color: #fff !important;
  isolation: isolate;
}

.hero {
  min-height: min(780px, 90vh) !important;
  padding-top: 108px !important;
}

.hero::before,
.page-hero::before,
.dash-hero::before,
.course-hero::before,
.video-hero::before,
.premium-hero::before {
  color: rgba(255, 182, 6, 0.12) !important;
  opacity: 1 !important;
}

.hero-left h1,
.hero h1,
.page-hero h1,
.dash-hero h1,
.course-hero h1,
.video-hero h1,
.premium-hero h1,
.section-title,
.mh-title,
.ks-title,
.greeting h1 {
  letter-spacing: 0 !important;
}

.hero-left h1,
.hero h1,
.page-hero h1,
.dash-hero h1,
.course-hero h1,
.video-hero h1,
.premium-hero h1 {
  color: #fff !important;
}

.hero-left h1 .accent,
.section-label,
.hero-badge,
.kicker,
.tag,
.ci-title,
.jp-text,
.level-badge,
.stat-num,
.v-lvl,
.strip-badge,
.speaker,
.char,
.kanji,
.sc-value,
.streak-count {
  color: var(--red) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--red) !important;
}

.hero-left h1 .sub-jp,
.hero-desc,
.hero p,
.page-hero p,
.dash-hero p,
.course-hero p,
.video-hero p,
.premium-hero p {
  color: rgba(255, 255, 255, 0.76) !important;
}

.hero-badge,
.kicker,
.mh-badge,
.greeting-badge,
.plan-badge,
.pc-tag,
.sc-trend,
.ch-badge,
.level-badge,
.tag {
  background: rgba(255, 182, 6, 0.14) !important;
  border: 1px solid rgba(255, 182, 6, 0.26) !important;
  border-radius: 4px !important;
  color: var(--red) !important;
}

.hero-badge::before {
  background: var(--red) !important;
}

.mascot-wrap,
.anime-photo-frame,
.instructor-card {
  background: #fff !important;
  border: 6px solid #fff !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Teks #252525 di atas var(--red) rgb(190,52,40) memberi rasio kontras 2,71 —
   di bawah ambang WCAG AA 4,5 untuk teks biasa, dan pita ini bukan teks besar
   (13px, tebal 800). Putih di atas merah yang sama memberi 5,65. */
.photo-ribbon {
  background: var(--red) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-weight: 800 !important;
}

/* Latarnya dulu #fff harfiah sementara teksnya var(--ink) yang ikut tema.
   Di mode gelap --ink menjadi #F5F5F5, jadi teks nyaris putih duduk di atas
   latar yang dipaksa putih — rasio kontras 1,09, praktis tak terbaca.

   Latar kini memakai var(--white) yang ikut membalik (#FEFCF8 → #1A1A1A),
   sehingga pasangan latar-teks selalu berasal dari satu set token. */
.mascot-bubble,
.study-mini-card {
  background: var(--white) !important;
  border-color: var(--border-mid) !important;
  border-radius: 4px !important;
  color: var(--ink) !important;
}

.hero-stats,
.stats,
.stat-grid,
.dashboard-grid {
  gap: 14px !important;
}

.stat-pill,
.panel,
.card,
.page-card,
.feat-card,
.level-card,
.grammar-card,
.kanji-card,
.vocab-card,
.vocab-item,
.vt-card,
.qa-card,
.stat-card,
.summary-card,
.video-card,
.v-card,
.flashcard,
.scene .card,
.msg-bubble,
.auth-modal,
.offline,
.table,
.search-box,
.filter-panel,
.modal,
.shortcut-card,
.course-card,
.lesson-card,
.module,
.level-summary,
.stat,
.step,
.ai-card,
.qa-btn {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow-sm) !important;
}

.panel:hover,
.card:hover,
.page-card:hover,
.feat-card:hover,
.level-card:hover,
.grammar-card:hover,
.kanji-card:hover,
.vocab-item:hover,
.vt-card:hover,
.video-card:hover,
.v-card:hover,
.stat-pill:hover,
.shortcut-card:hover,
.qa-btn:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(255, 182, 6, 0.38) !important;
  transform: translateY(-2px);
}

/* #b37c00 gagal di KEDUA tema di atas --red-pale: 3,31:1 saat tintnya
   pucat dan 3,42:1 saat tintnya menggelap. Nilai terang digelapkan,
   dan mode gelap diberi pasangannya sendiri di bawah. */
.feat-icon,
.icon,
.nav-avatar,
.msg-avatar.ai,
.tutor-avatar,
.avatar,
.level-chip,
.status,
.nihongo-search-meta,
.cert-icon,
.qa-icon,
.ai-icon {
  background: var(--red-pale) !important;
  color: #916400 !important;
  border-color: rgba(255, 182, 6, 0.34) !important;
}
[data-theme="dark"] :is(.feat-icon, .icon, .nav-avatar, .msg-avatar.ai, .tutor-avatar, .avatar, .level-chip, .status, .nihongo-search-meta, .cert-icon, .qa-icon, .ai-icon) { color: #C49A3B !important; }

.features-bg,
#level,
.chart-section,
.instructor-section,
.live-section,
.dashboard-section,
.section,
main,
.wrap,
.page {
  background: var(--cream) !important;
}

.features-header,
.chart-header,
.testi-header,
.section-head {
  border-bottom-color: var(--border) !important;
}

.level-card.featured,
.featured,
.auth-banner,
.back {
  background: linear-gradient(150deg, var(--eduma-dark) 0%, var(--eduma-dark-2) 100%) !important;
  color: #fff !important;
}

.level-card.featured *,
.featured *,
.auth-banner *,
.back * {
  border-color: rgba(255, 255, 255, 0.16);
}

.progress span,
.progress-fill,
.bar-fill,
.ring-fill,
.countdown-num,
.su-xp-fill,
.jlpt-row.active .jlpt-bar-fill {
  background: var(--red) !important;
}

.jlpt-bar-fill.n5,
.good,
.easy {
  background: var(--green) !important;
}

.jlpt-bar-fill.n4,
.jlpt-bar-fill.n3,
.hard {
  background: var(--blue) !important;
}

.jlpt-bar-fill.n2,
.again {
  background: #e5534b !important;
}

input,
textarea,
select,
.search {
  background: var(--surface) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: 4px !important;
  color: var(--ink) !important;
}

input:focus,
textarea:focus,
select:focus,
.search:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(255, 182, 6, 0.18) !important;
  outline: none !important;
}

table,
.jlpt-table,
.rubric {
  border-color: var(--border) !important;
  border-radius: 6px !important;
}

th,
.jlpt-table th,
.rubric th {
  background: #eef1f5 !important;
  color: var(--ink-mid) !important;
}

.testi-section,
.cta-section,
footer {
  background: var(--eduma-dark) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.testi-section .section-title,
.testi-section .section-sub,
.cta-section .section-title,
.cta-section .section-sub,
footer * {
  color: inherit !important;
}

/* Pola yang sama dengan .mascot-bubble: latar #fff harfiah dipasangkan
   dengan teks var(--ink) yang ikut tema. Di mode gelap rasionya 1,09. */
.testi-card {
  background: var(--white) !important;
  color: var(--ink) !important;
}

.testi-stars {
  color: var(--red) !important;
}

.live-section {
  border-top: 4px solid var(--red) !important;
  border-bottom: 1px solid var(--border) !important;
}

.live-inner,
.countdown-unit {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.hamburger span {
  background: var(--ink) !important;
}

@media (max-width: 920px) {
  nav:not(.kn-nav):not(.kn-bottom-nav) {
    height: 68px !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 92px !important;
  }

  .mobile-menu {
    top: 68px !important;
  }
}