/* ==========================================================================
   FIEZEL MOBILE EDGE-FIT & DUOLINGO-GRADE LAYOUT REFINEMENTS
   Enforces 100% full-width edge-to-edge topbar, docked bottombar, and
   viewport-fitted login screen for mobile devices.
   ========================================================================== */

/* 0. Mobile Touch Responsiveness & Tap Delay Elimination (Duolingo & Apple Native Grade) */
button, a, [role="button"], .launch-card, .quiz-option, .choice-btn, .token-chip, .tappable, .fz-tactile-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 1. Viewport & App Container */
@media (max-width: 768px) {
  html {
    overflow-x: clip !important;
    overflow-y: auto !important;
    background: #FFF9EE !important;
    -webkit-overflow-scrolling: touch;
  }
  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    background: #FFF9EE !important;
  }

  main.app,
  .app,
  body.fz-lux .app,
  html body.fz-lang-ja .app {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 calc(84px + env(safe-area-inset-bottom)) 0 !important;
    box-sizing: border-box !important;
  }

  /* Inner view content below topbar gets comfortable screen padding */
  .app > *:not(#app):not(.topbar):not(#globalSky):not(.notification-panel):not(.auth-panel):not(.modal-panel):not(.listening-modal):not(.quiz-shell),
  #appInner,
  .home-today,
  .section-head,
  .quick-practice-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Quiz Shell: Edge-to-edge mobile fit, ZERO VOID */
  body:has(.quiz-shell) main.app,
  body.fz-stage-quiz main.app,
  body.fz-lesson-mode main.app,
  body:has(.quiz-shell) .app,
  body.fz-stage-quiz .app,
  body.fz-lesson-mode .app {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:has(.quiz-shell) #app,
  body.fz-stage-quiz #app,
  body.fz-lesson-mode #app,
  .app > #app:has(.quiz-shell) {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Universal Fixed Topbar across ALL quiz/practice sessions */
  .quiz-topbar,
  .quiz-shell .quiz-topbar,
  body.fz-stage-quiz .quiz-topbar,
  body.fz-lux.fz-stage-quiz .quiz-topbar,
  body.fz-lesson-mode .quiz-topbar,
  body:has(.quiz-shell) .quiz-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1.5px solid #E2E8F0 !important;
    background: rgba(253, 250, 243, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05) !important;
    padding: max(10px, env(safe-area-inset-top, 10px)) 16px 10px 16px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
  }

  body.theme-dark .quiz-topbar,
  body.scene-night .quiz-topbar {
    background: rgba(27, 20, 24, 0.98) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  }

  #app > section.quiz-shell,
  .quiz-shell {
    padding-top: calc(64px + max(10px, env(safe-area-inset-top, 10px))) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 auto !important;
    max-width: 600px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* 2. Topbar: 100% Full-Width Edge-to-Edge */
.topbar,
header.topbar,
body.fz-lux .topbar,
html body.fz-lang-ja .topbar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px 16px !important;
  background: var(--bgDay, #FDFAF3) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  z-index: 100 !important;
  box-sizing: border-box !important;
}

/* Universal topbar is used across all screens including Home; hide duplicate in-page topbar */
.fz-home-topbar,
.fz-sports-topbar {
  display: none !important;
}

.fz-home-brand-wrap {
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

.fz-home-brand-wrap svg.fiezel-wordmark {
  height: 24px !important;
  width: auto !important;
  max-width: 110px !important;
  display: block !important;
  filter: drop-shadow(0 2px 8px rgba(255, 217, 79, 0.35)) !important;
}

/* 3. Bottom Navigation Bar: Butter Yellow & Glossy Stay-Fixed Dock */
nav.bottomnav,
.bottomnav,
html body nav.bottomnav,
html body.fz-lang-ja nav.bottomnav,
html body.fz-lux nav.bottomnav,
html.fiezel-ui-v6 body.fz-lux .bottomnav {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  background: linear-gradient(180deg, #FFFDF0 0%, #FEF08A 100%) !important;
  box-shadow: inset 0 1.5px 2px #FFFFFF, inset 0 -2px 3px rgba(217, 119, 6, 0.12), 0 -4px 20px rgba(180, 83, 9, 0.10) !important;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: 2px !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Sliding Liquid Pill Indicator */
.nav-active-pill,
#navActivePill {
  position: absolute !important;
  top: 6px !important;
  height: 50px !important;
  border-radius: 9999px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FEF08A 65%, #FDE047 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: inset 0 2px 3px #FFFFFF, inset 0 -1.5px 2px rgba(217, 119, 6, 0.3), 0 4px 12px rgba(217, 119, 6, 0.22) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1), width 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease !important;
  will-change: transform, width !important;
  left: 0;
  width: 0;
  opacity: 0;
}

nav.bottomnav .nav,
.bottomnav .nav,
html body.fz-lang-ja nav.bottomnav .nav {
  position: relative !important;
  z-index: 2 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  min-height: 48px !important;
  padding: 4px 1px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 9999px !important;
  transform: none !important;
  box-shadow: none !important;
  color: #78350F !important;
  cursor: pointer !important;
  outline: none !important;
  transition: color 0.18s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

nav.bottomnav .nav:hover,
.bottomnav .nav:hover {
  color: #78350F !important;
  background: transparent !important;
}

nav.bottomnav .nav:active,
.bottomnav .nav:active {
  transform: scale(0.92) !important;
  background: transparent !important;
}

nav.bottomnav .nav.active,
.bottomnav .nav.active,
html body.fz-lang-ja nav.bottomnav .nav.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 9999px !important;
  color: #78350F !important;
  font-weight: 800 !important;
  transform: none !important;
}

nav.bottomnav .nav .fz-i,
.bottomnav .nav .fz-i,
html body.fz-lang-ja nav.bottomnav .nav .fz-i {
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  --fz-i-fill: transparent !important;
  --fz-i-line: #78350F !important;
  opacity: 0.70 !important;
  filter: none !important;
  transition: filter 0.2s ease, transform 0.15s ease, opacity 0.18s ease !important;
}

nav.bottomnav .nav svg,
.bottomnav .nav svg,
html body.fz-lang-ja nav.bottomnav .nav svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #78350F !important;
  stroke-width: 1.8 !important;
  fill: none !important;
  opacity: 0.70 !important;
}

nav.bottomnav .nav.active .fz-i,
.bottomnav .nav.active .fz-i,
html body.fz-lang-ja nav.bottomnav .nav.active .fz-i {
  --fz-i-fill: #FEF08A !important;
  --fz-i-line: #92400E !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8)) !important;
}

nav.bottomnav .nav.active svg,
.bottomnav .nav.active svg,
html body.fz-lang-ja nav.bottomnav .nav.active svg {
  stroke: #92400E !important;
  stroke-width: 2.2 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8)) !important;
}

nav.bottomnav .nav span,
.bottomnav .nav span,
html body.fz-lang-ja nav.bottomnav .nav span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  color: #78350F !important;
  opacity: 0.75 !important;
  margin-top: 1px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-align: center !important;
  transition: color 0.18s ease, transform 0.18s ease, opacity 0.18s ease !important;
}

nav.bottomnav .nav.active span,
.bottomnav .nav.active span,
html body.fz-lang-ja nav.bottomnav .nav.active span {
  color: #78350F !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

/* KelasKu signature Emerald Green active state inside capsule */
nav.bottomnav .nav[data-view="classroom"].active,
.bottomnav .nav[data-view="classroom"].active,
html body.fz-lang-ja nav.bottomnav .nav[data-view="classroom"].active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #065F46 !important;
}

nav.bottomnav .nav[data-view="classroom"].active .fz-i,
.bottomnav .nav[data-view="classroom"].active .fz-i,
html body.fz-lang-ja nav.bottomnav .nav[data-view="classroom"].active .fz-i {
  --fz-i-fill: #A7F3D0 !important;
  --fz-i-line: #047857 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8)) !important;
}

nav.bottomnav .nav[data-view="classroom"].active svg,
.bottomnav .nav[data-view="classroom"].active svg,
html body.fz-lang-ja nav.bottomnav .nav[data-view="classroom"].active svg {
  stroke: #047857 !important;
  stroke-width: 2.2 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8)) !important;
}

nav.bottomnav .nav[data-view="classroom"].active span,
.bottomnav .nav[data-view="classroom"].active span,
nav.bottomnav .nav[data-view="classroom"].active .kelasku-wordmark,
.bottomnav .nav[data-view="classroom"].active .kelasku-wordmark,
html body.fz-lang-ja nav.bottomnav .nav[data-view="classroom"].active span {
  color: #065F46 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

/* ==========================================================================
   FIEZEL "HARI INI" REDESIGN — Live Dark Theme, Minimalist Icons, App-First
   ========================================================================== */
.fz-welcome-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}
.fz-greet-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 2px !important;
}
.fz-greet-sky-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #FFD94F !important;
  letter-spacing: 0.02em !important;
}
.fz-streak-glow-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, rgba(255, 217, 79, 0.18) 0%, rgba(255, 153, 0, 0.12) 100%) !important;
  border: 1px solid rgba(255, 217, 79, 0.35) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #FFD94F !important;
  box-shadow: 0 0 12px rgba(255, 217, 79, 0.2) !important;
}
.fz-greet-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}
.fz-greet-motivation {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* ==========================================================================
   DAILY RITUAL ANCHOR (HABIT-FORMING MICRO-CHECKLIST)
   ========================================================================== */
.fz-ritual-anchor-box {
  background: #14141E !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  margin: 2px 0 !important;
}
.fz-ritual-anchor-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.fz-ritual-anchor-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em !important;
}
.fz-ritual-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #10B981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}
.fz-ritual-checklist {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.fz-ritual-check-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 600 !important;
}
.fz-ritual-check-item.is-done {
  background: rgba(16, 185, 129, 0.06) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
  color: #FFFFFF !important;
}
.fz-check-dot {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  flex-shrink: 0 !important;
}
.fz-ritual-check-item.is-done .fz-check-dot {
  background: #10B981 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5) !important;
}
.fz-check-label {
  flex: 1 !important;
  min-width: 0 !important;
}
.fz-confidence-quote {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 217, 79, 0.9) !important;
  background: rgba(255, 217, 79, 0.08) !important;
  border: 1px dashed rgba(255, 217, 79, 0.25) !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   SOLUSI B: OBSIDIAN AURORA GLASS HERO CARD (Apple Pro / Ultra Mewah)
   ========================================================================== */
.fz-stadium-card.fz-aurora-card {
  width: 100% !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #111118 !important;
  border: 1px solid rgba(255, 217, 79, 0.28) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, border-color 0.2s ease !important;
  position: relative !important;
}
.fz-stadium-card.fz-aurora-card:active {
  transform: scale(0.985) !important;
}

/* ZONE 1: Kosakata Harian (Word of the Day Glass Tile) */
.fz-aurora-vocab-zone {
  padding: 18px 20px 16px !important;
  background: radial-gradient(circle at 85% 15%, rgba(255, 217, 79, 0.08) 0%, transparent 60%), #14141E !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.fz-aurora-zone-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.fz-aurora-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #FFD94F !important;
}
.fz-aurora-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #FFD94F !important;
  box-shadow: 0 0 8px #FFD94F !important;
}

.fz-aurora-stepper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.fz-aurora-step-text {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  letter-spacing: 0.04em !important;
}
.fz-aurora-dots {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.fz-aurora-dot-item {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.2) !important;
  transition: all 0.2s ease !important;
}
.fz-aurora-dot-item.is-active {
  width: 14px !important;
  border-radius: 9999px !important;
  background: #FFD94F !important;
  box-shadow: 0 0 6px rgba(255, 217, 79, 0.5) !important;
}

/* Floating 24K Glass Pod */
.fz-aurora-glass-pod {
  background: linear-gradient(135deg, rgba(255, 217, 79, 0.12) 0%, rgba(255, 184, 0, 0.04) 100%) !important;
  border: 1px solid rgba(255, 217, 79, 0.32) !important;
  border-radius: 18px !important;
  padding: 15px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  position: relative !important;
  backdrop-filter: blur(8px) !important;
}

.fz-aurora-word-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.fz-aurora-word-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}
.fz-aurora-word {
  font-size: 25px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}
.fz-aurora-pos {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #FFD94F !important;
  background: rgba(255, 217, 79, 0.16) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.fz-aurora-phonetic {
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 600 !important;
}
.fz-aurora-meaning {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
}

.fz-aurora-audio-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: rgba(255, 217, 79, 0.16) !important;
  border: 1px solid rgba(255, 217, 79, 0.4) !important;
  color: #FFD94F !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}
.fz-aurora-audio-btn:hover {
  transform: scale(1.05) !important;
  background: rgba(255, 217, 79, 0.25) !important;
}

/* ZONE 2: Core Adaptive Session Zone */
.fz-aurora-session-zone {
  padding: 18px 20px 20px !important;
  background: #0E0E14 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
}

.fz-aurora-session-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.fz-aurora-session-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: rgba(255, 217, 79, 0.12) !important;
  color: #FFD94F !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 217, 79, 0.25) !important;
}
.fz-aurora-session-time {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
}

.fz-aurora-session-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.fz-aurora-session-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em !important;
}
.fz-aurora-session-desc {
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Progress Block */
.fz-aurora-progress-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.fz-aurora-progress-labels {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
.fz-aurora-progress-labels b {
  color: #FFD94F !important;
}
.fz-aurora-track {
  width: 100% !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
}
.fz-aurora-track-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #FFD94F 0%, #FF9900 100%) !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 8px rgba(255, 217, 79, 0.4) !important;
  transition: width 0.3s ease !important;
}

/* CTA Button */
.fz-aurora-cta-btn {
  width: 100% !important;
  background: linear-gradient(135deg, #FFD94F 0%, #FFB800 100%) !important;
  color: #0A0A0E !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(255, 184, 0, 0.35) !important;
  transition: transform 0.1s ease !important;
}
.fz-aurora-cta-btn:active {
  transform: translateY(1px) !important;
}

/* 2x2 Bento Learning Hub */
.fz-stitch-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.fz-stitch-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: -4px !important;
}
.fz-stitch-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
.fz-stitch-all {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #FFD94F !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.fz-stitch-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.fz-stitch-card {
  background: #14141A !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  padding: 15px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 128px !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, border-color 0.15s ease !important;
}
.fz-stitch-card:active {
  transform: scale(0.98) !important;
  border-color: #FFD94F !important;
}
.fz-stitch-card-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}
.fz-stitch-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.fz-stitch-icon.is-yellow {
  background: rgba(255, 217, 79, 0.14) !important;
  color: #FFD94F !important;
}
.fz-stitch-icon.is-green {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #10B981 !important;
}
.fz-stitch-icon.is-blue {
  background: rgba(56, 189, 248, 0.14) !important;
  color: #38BDF8 !important;
}
.fz-stitch-icon.is-rose {
  background: rgba(244, 63, 94, 0.14) !important;
  color: #F43F5E !important;
}
.fz-stitch-icon .fz-i {
  width: 22px !important;
  height: 22px !important;
  --fz-i-line: currentColor !important;
  --fz-i-fill: currentColor !important;
}
.fz-stitch-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.fz-stitch-badge.is-yellow {
  background: rgba(255, 217, 79, 0.18) !important;
  color: #FFD94F !important;
  border-color: rgba(255, 217, 79, 0.3) !important;
}
.fz-stitch-card-bottom h3 {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 2px 0 !important;
}
.fz-stitch-card-bottom p {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* KelasKu Task Strip */
.fz-stitch-kelasku {
  background: #14141A !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: transform 0.12s ease !important;
}
.fz-stitch-kelasku:active {
  transform: scale(0.99) !important;
}
.kelasku-strip-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.kelasku-strip-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(16, 185, 129, 0.16) !important;
  color: #34D399 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.kelasku-strip-icon .fz-i {
  width: 22px !important;
  height: 22px !important;
  --fz-i-line: #34D399 !important;
  --fz-i-fill: #34D399 !important;
}
.kelasku-strip-text {
  min-width: 0 !important;
}
.kelasku-strip-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-bottom: 2px !important;
}
.kelasku-meta-brand {
  color: #34D399 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.kelasku-meta-due {
  color: #F87171 !important;
}
.kelasku-strip-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.kelasku-strip-sub {
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
.kelasku-strip-btn {
  flex-shrink: 0 !important;
  background: #10B981 !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 8px 14px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35) !important;
}

/* 4. Auth & Login Screen: 100% Viewport-Fit (No Scroll Required) */
body:has(.fz-auth) {
  overflow: hidden !important;
  height: 100vh !important;
}

/* 4. Hide shell chrome during Auth Gate and Booting */
body.fz-auth-open nav.bottomnav,
body.fz-auth-open .bottomnav,
body.fz-auth-open .topbar,
body.fz-auth-open header.topbar,
html:has(.fz-auth) nav.bottomnav,
html:has(.fz-auth) .bottomnav,
html:has(.fz-auth) .topbar,
html:has(.fz-auth) header.topbar,
html.fz-booting nav.bottomnav,
html.fz-booting .bottomnav,
html.fz-booting .topbar,
html.fz-booting header.topbar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 4. Auth & Login Screen: 100% Viewport-Fit, High Contrast, Zero-Mascot */
.fz-auth {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
  background: #FDFAF3 !important;
  color: #1B1418 !important;
  box-sizing: border-box !important;
  z-index: 2147481950 !important;
}

.fz-auth::-webkit-scrollbar {
  display: none !important;
}

.fz-auth-hero {
  position: relative !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  background: #1B1418 !important;
  color: #FDFAF3 !important;
}

.fz-auth-hero.is-welcome {
  min-height: 48vh !important;
  max-height: 52vh !important;
}

.fz-auth-hero.is-masuk {
  flex: 0 0 auto !important;
  min-height: 16vh !important;
  max-height: 20vh !important;
  padding: max(14px, calc(env(safe-area-inset-top) + 8px)) 20px 20px !important;
}

.fz-auth-hero.is-daftar {
  flex: 0 0 auto !important;
  min-height: 14vh !important;
  max-height: 18vh !important;
  padding: max(14px, calc(env(safe-area-inset-top) + 6px)) 20px 18px !important;
}

.fz-auth-hero .fz-auth-brand .fiezel-wordmark {
  width: min(44vw, 180px) !important;
  display: block !important;
  margin: 0 auto !important;
}

.fz-auth-hero.is-masuk .fz-auth-brand .fiezel-wordmark {
  width: min(36vw, 140px) !important;
}

.fz-auth-wave {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  width: 100% !important;
  height: 38px !important;
  z-index: 2 !important;
}

.fz-auth-wave path {
  fill: #FDFAF3 !important;
}

/* ZERO MASCOTS / PAW */
.fz-auth-paw,
.fz-auth-hero .fz-auth-paw,
.fz-auth-hero.is-welcome .fz-auth-paw {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.fz-auth-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 6px 24px max(20px, env(safe-area-inset-bottom)) 24px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  width: 100% !important;
  background: transparent !important;
  color: #1B1418 !important;
  box-sizing: border-box !important;
}

/* Titles: Deep Ink (#1B1418) */
.fz-auth .fz-auth-title,
.fz-auth-body .fz-auth-title,
.fz-auth-body h1,
.fz-auth-body h2 {
  color: #1B1418 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 4px 0 10px 0 !important;
}

.fz-auth-title.is-underlined {
  display: inline-block !important;
  align-self: flex-start !important;
  text-decoration: underline !important;
  text-decoration-color: #9B3A4A !important;
  text-decoration-thickness: 3.5px !important;
  text-underline-offset: 7px !important;
  text-decoration-skip-ink: none !important;
}

/* Lead & Descriptions */
.fz-auth .fz-auth-lead,
.fz-auth-body .fz-auth-lead,
.fz-auth-body p:not(.fz-auth-or) {
  color: #475569 !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  max-width: 36ch !important;
  margin: 0 0 14px 0 !important;
}

/* Action Rows & Next Button */
.fz-auth-next-row {
  margin-top: auto !important;
  padding-top: 24px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.fz-auth .fz-auth-next {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1B1418 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  padding: 8px 6px 8px 12px !important;
  cursor: pointer !important;
}

.fz-auth .fz-auth-next span {
  color: #1B1418 !important;
  font-weight: 800 !important;
}

.fz-auth-next-dot {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: #9B3A4A !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(155, 58, 74, 0.45) !important;
}

.fz-auth-next-dot svg {
  stroke: #FFFFFF !important;
}

/* Role Tabs (Murid / Guru) */
.fz-auth-roles {
  display: flex !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 12px !important;
  background: #EFE7DE !important;
  margin: 0 0 12px 0 !important;
}

.fz-auth .fz-auth-role {
  flex: 1 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6E635C !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  cursor: pointer !important;
}

.fz-auth .fz-auth-role.is-on {
  background: #FFFFFF !important;
  color: #1B1418 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14) !important;
}

/* Google Sign-in Slot */
.fz-auth-google {
  min-height: 44px !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: 4px !important;
}

/* Or Divider */
.fz-auth-or {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 10px 0 6px !important;
  color: #64748B !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

.fz-auth-or::before,
.fz-auth-or::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: #E2D9C8 !important;
}

/* Form Fields & Labels */
.fz-auth-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 4px !important;
}

.fz-auth-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.fz-auth-label {
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  color: #1B1418 !important;
}

.fz-auth-label small {
  font-weight: 600 !important;
  color: #64748B !important;
}

.fz-auth .fz-auth-input {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-bottom: 2px solid #E2D9C8 !important;
  padding: 4px 0 !important;
  color: #64748B !important;
  transition: border-color 0.2s !important;
}

.fz-auth .fz-auth-input:focus-within {
  border-bottom-color: #9B3A4A !important;
  color: #9B3A4A !important;
}

.fz-auth .fz-auth-input input[name] {
  flex: 1 !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1B1418 !important;
  padding: 8px 0 !important;
  min-height: 38px !important;
  outline: none !important;
}

.fz-auth .fz-auth-input input::placeholder {
  color: #94A3B8 !important;
}

.fz-auth .fz-auth-eye {
  border: 0 !important;
  background: transparent !important;
  color: #64748B !important;
  cursor: pointer !important;
  padding: 6px !important;
}

.fz-auth .fz-auth-input svg {
  stroke: #64748B !important;
}

.fz-auth .fz-auth-input:focus-within svg {
  stroke: #9B3A4A !important;
}

/* Hints & Links */
.fz-auth-hint {
  margin: 0 0 6px 0 !important;
  color: #64748B !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}

.fz-auth-row {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: -2px !important;
}

.fz-auth .fz-auth-link {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 2px !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  color: #9B3A4A !important;
  cursor: pointer !important;
}

.fz-auth-alt {
  margin: 14px 0 0 0 !important;
  text-align: center !important;
  color: #64748B !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

.fz-auth-alt button {
  border: 0 !important;
  background: transparent !important;
  color: #9B3A4A !important;
  font-weight: 700 !important;
  font-size: inherit !important;
  cursor: pointer !important;
  padding: 0 2px !important;
}

/* Primary Submit Button: High Contrast Golden Amber */
.fz-auth .fz-auth-submit {
  width: 100% !important;
  margin-top: 14px !important;
  padding: 15px 20px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #FFD94F 0%, #FFB800 100%) !important;
  color: #101018 !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(255, 184, 0, 0.4) !important;
  cursor: pointer !important;
}

.fz-auth-error {
  margin: 8px 0 0 0 !important;
  color: #DC2626 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* 6. Topbar Flag Switch Button (Tactile Pill Harmony) */
.course-switch-btn,
#fzCourseSwitchBtn,
.btn-course-selector {
  width: auto !important;
  min-width: auto !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 12px 6px 8px !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: 0 2px 0 #CBD5E1, 0 4px 8px rgba(15, 23, 42, 0.04) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.course-switch-btn:hover,
#fzCourseSwitchBtn:hover,
.btn-course-selector:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  transform: translateY(-1px) !important;
}

.course-switch-btn:active,
#fzCourseSwitchBtn:active,
.btn-course-selector:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #CBD5E1 !important;
}

.course-switch-flag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

.course-switch-flag svg {
  display: block !important;
  width: 18px !important;
  height: 13px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4) !important;
}

.course-switch-label {
  display: inline-block !important;
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* 7. Stadium Match Cards (media_1790431262884.jpg) */
/* 7. Greeting & Motivational Header */
.fz-welcome-header {
  padding: 6px 4px 18px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  text-align: left !important;
}

.fz-greet-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.fz-greet-motivation {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

.fz-stadium-card,
.today-card.fz-stadium-card,
html body #app .today-card.fz-stadium-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
  margin: 0 auto 16px auto !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  background: #14141A !important;
  display: block !important;
}

.fz-stadium-card:active,
.today-card.fz-stadium-card:active {
  transform: scale(0.985) !important;
}

/* Recessed Notch at top center - hidden to eliminate faux-phone cutouts */
.fz-stadium-notch {
  display: none !important;
}

/* Top Header Section */
.fz-stadium-header {
  background: linear-gradient(135deg, #FFD94F 0%, #FFB800 100%) !important;
  padding: 22px 20px 18px 20px !important;
  position: relative !important;
  color: #0A0A0E !important;
}

.fz-stadium-header.is-silver {
  background: linear-gradient(135deg, #EEF2F6 0%, #DDE3EA 100%) !important;
  color: #0A0A0E !important;
}

.fz-stadium-header.is-dark {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
  color: #FFFFFF !important;
}

/* Vocab Header for Card 1 (Badge-free) */
.fz-stadium-vocab-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
}

.fz-stadium-vocab-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 2px !important;
}

.fz-vocab-kicker-tag {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #0A0A0E !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border-radius: 9999px !important;
  padding: 3px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.fz-vocab-kicker-tag.is-silver-tag {
  color: #1E293B !important;
  background: rgba(0, 0, 0, 0.07) !important;
}

.fz-vocab-kicker-tag.is-dark-tag {
  color: #38BDF8 !important;
  background: rgba(56, 189, 248, 0.15) !important;
}

.fz-vocab-level-tag {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #0A0A0E !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border-radius: 9999px !important;
  padding: 3px 8px !important;
}

.fz-vocab-level-tag.is-silver-tag {
  color: #475569 !important;
  background: rgba(0, 0, 0, 0.06) !important;
}

.fz-vocab-level-tag.is-dark-tag {
  color: #E2E8F0 !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.fz-vocab-hero-content {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.fz-vocab-word-title {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #0A0A0E !important;
  line-height: 1.15 !important;
}

.fz-vocab-word-phonetic {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(10, 10, 14, 0.65) !important;
  margin-bottom: 2px !important;
}

.fz-vocab-word-meaning {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  line-height: 1.35 !important;
}

.fz-vocab-word-example {
  font-size: 12px !important;
  font-style: italic !important;
  color: rgba(10, 10, 14, 0.72) !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
  padding-left: 8px !important;
  border-left: 2.5px solid rgba(0, 0, 0, 0.25) !important;
}

/* Clean Header for Cards 2 and 3 */
.fz-stadium-clean-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.fz-clean-header-content {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  text-align: left !important;
}

.fz-clean-header-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.fz-stadium-header.is-silver .fz-clean-header-title {
  color: #0F172A !important;
}

.fz-stadium-header.is-dark .fz-clean-header-title {
  color: #F8FAFC !important;
}

.fz-clean-header-sub {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

.fz-stadium-header.is-silver .fz-clean-header-sub {
  color: #475569 !important;
}

.fz-stadium-header.is-dark .fz-clean-header-sub {
  color: #94A3B8 !important;
}

.fz-stadium-vs {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #0A0A0E !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  flex-shrink: 0 !important;
}

/* White Base Section */
.fz-stadium-body {
  background: #FFFFFF !important;
  color: #0A0A0E !important;
  padding: 18px 20px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.fz-stadium-metrics-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.fz-stadium-chip {
  border: 1.5px dashed rgba(0, 0, 0, 0.22) !important;
  border-radius: 9999px !important;
  padding: 9px 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #0A0A0E !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fz-stadium-chip.is-xp {
  color: #0A0A0E !important;
  background: rgba(255, 224, 46, 0.14) !important;
  border-color: rgba(220, 170, 0, 0.45) !important;
}

.fz-stadium-chip.is-gain {
  color: #059669 !important;
  border-color: rgba(5, 150, 105, 0.4) !important;
  background: rgba(5, 150, 105, 0.08) !important;
}

.fz-stadium-chip.is-streak {
  color: #EA580C !important;
  border-color: rgba(234, 88, 12, 0.4) !important;
  background: rgba(234, 88, 12, 0.08) !important;
}

.fz-stadium-center-time {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.fz-stadium-center-time .fz-time-val {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  color: #0A0A0E !important;
  line-height: 1 !important;
}

.fz-stadium-center-time .fz-date-val {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #64748B !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

.fz-stadium-info-desc {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: #475569 !important;
  margin: 0 !important;
}

.fz-stadium-info-desc strong {
  color: #0A0A0E !important;
  font-weight: 800 !important;
}

.fz-stadium-cta-btn {
  width: 100% !important;
  min-height: 48px !important;
  padding: 14px 20px !important;
  border-radius: 9999px !important;
  background: #FFE02E !important;
  color: #0A0A0E !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(255, 224, 46, 0.45) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.fz-stadium-cta-btn:active {
  transform: scale(0.97) !important;
}

.fz-stadium-cta-btn.is-silver-btn {
  background: #0F172A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
}

.fz-stadium-cta-btn.is-dark-btn {
  background: #0F172A !important;
  color: #FFE02E !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3) !important;
}

/* Footer notch bar - hidden to eliminate faux-phone cutouts and redundant carets */
.fz-stadium-footer-notch,
.fz-stadium-footer-notch::after,
.fz-footer-caret {
  display: none !important;
}

/* ==========================================================================
   HIGH-CONTRAST DARK THEME OVERHAUL
   Ensures zero invisible dark-on-dark text across the entire application.
   ========================================================================== */

:root {
  --bg: #0A0A0E !important;
  --text: #F8FAFC !important;
  --ink: #F8FAFC !important;
  --black: #F8FAFC !important;
  --muted: #94A3B8 !important;
  --muted-soft: #64748B !important;
  --ambient-text: #F8FAFC !important;
  --ambient-muted: #94A3B8 !important;
  --panel: #14141E !important;
  --panel-soft: #1E1E2A !important;
  --surface: #14141E !important;
  --surface-solid: #14141E !important;
  --line: rgba(255, 255, 255, 0.12) !important;
  --line-soft: rgba(255, 255, 255, 0.08) !important;
  --line-strong: rgba(255, 255, 255, 0.2) !important;
}

html, body {
  background: #FAF8F5 !important;
  color: #0F172A !important;
}

/* Common text elements defaulting to readable dark colors on daylight surfaces */
.home-page,
.section-head,
.home-section-head,
.learning-launcher,
.home-today {
  color: #0F172A !important;
}

.home-section-head h2,
.section-head h1 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.section-head p,
.home-section-head p,
p.muted,
span.muted,
small.muted,
.quick-practice-hint {
  color: #94A3B8 !important;
  font-weight: 500 !important;
}

/* Launch Cards (Latihan & Home) */
.launch-card,
button.launch-card {
  background: #151520 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.launch-card:active {
  background: #1C1C2C !important;
}

.launch-card span b,
.launch-card b {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.launch-card span small,
.launch-card small {
  color: #94A3B8 !important;
  font-weight: 600 !important;
}

.launch-card .launch-icon {
  background: #202030 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.launch-card i[data-lucide],
.launch-card .launch-arrow {
  color: #94A3B8 !important;
}

/* Active Level Control Pill (in Latihan & Home) */
.active-level-control {
  background: #151520 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
}

.active-level-control span {
  color: #94A3B8 !important;
  font-weight: 700 !important;
}

.active-level-control strong {
  color: #FFE02E !important;
  font-weight: 900 !important;
}

.active-level-control small {
  background: rgba(255, 217, 79, 0.16) !important;
  color: #FFD94F !important;
  border: 1px solid rgba(255, 217, 79, 0.35) !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

/* Details Drawer below stadium cards */
.fz-card-drawer {
  background: #151520 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  margin-top: 14px !important;
}

.fz-drawer-toggle {
  background: #1A1A28 !important;
  color: #F8FAFC !important;
  font-weight: 800 !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
}

.fz-drawer-toggle span {
  color: #F8FAFC !important;
  font-weight: 800 !important;
}

.fz-drawer-inner {
  padding: 16px 18px !important;
  color: #F8FAFC !important;
}

.fz-drawer-inner .today-eyebrow {
  color: #94A3B8 !important;
  font-weight: 800 !important;
}

.fz-drawer-inner .today-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.fz-drawer-inner .today-lead {
  color: #CBD5E1 !important;
}

.fz-drawer-inner .today-isi-head {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.fz-drawer-inner .today-blocks li {
  background: #202030 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

.fz-drawer-inner .today-blocks li b {
  color: #FFFFFF !important;
}

.fz-drawer-inner .today-blocks li span {
  color: #94A3B8 !important;
}

.fz-drawer-inner .today-rhythm-bar {
  color: #F8FAFC !important;
  font-weight: 700 !important;
}

.fz-drawer-inner .today-rhythm-bar span {
  color: #F8FAFC !important;
}

.fz-drawer-inner .today-rhythm-bar span b {
  color: #FFFFFF !important;
}

.fz-drawer-inner .today-streak {
  color: #F97316 !important;
  font-weight: 800 !important;
}

/* Mascot Speech Bubble & Coach Strip */
.paw-hero-cockpit {
  background: #151520 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  margin-top: 14px !important;
}

.paw-speech-bubble {
  background: #202030 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
}

.paw-bubble-title {
  color: #FFE02E !important;
  font-weight: 800 !important;
}

.paw-bubble-text {
  color: #F8FAFC !important;
  font-weight: 600 !important;
}

/* Progres CEFR level card */
.fz2-level.card {
  background: #151520 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  color: #F8FAFC !important;
}

.fz2-level-big {
  color: #FFE02E !important;
  font-weight: 900 !important;
}

.fz2-level-lead {
  color: #E2E8F0 !important;
  font-weight: 600 !important;
}

.fz2-level-head .eyebrow {
  color: #94A3B8 !important;
  font-weight: 800 !important;
}

.fz2-lvls span,
.card .fz2-lvls span {
  background: #202030 !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.fz2-lvls span.is-now,
.fz2-lvl.is-now,
span.fz2-lvl.is-now,
.card .fz2-lvls span.is-now,
.card .fz2-lvl.is-now,
.card div > span.fz2-lvl.is-now,
.card div > span.is-now,
.card .fz2-lvls .is-now {
  background: #FFE02E !important;
  color: #0A0A0E !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.fz2-lvls span.is-done,
.fz2-lvl.is-done,
span.fz2-lvl.is-done,
.card .fz2-lvls span.is-done,
.card .fz2-lvl.is-done,
.card div > span.fz2-lvl.is-done {
  background: #10B981 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* Generic Cards across all views */
.card,
section.card,
div.card {
  background: #151520 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
}

.card h1, .card h2, .card h3, .card h4, .card b, .card strong {
  color: #FFFFFF !important;
}

/* G1: Kartu materi pelajaran (.grammar-lesson-card) berlatar putih/terang, teks b/strong/p wajib gelap */
.grammar-lesson-card,
.card.grammar-lesson-card {
  background: #FFFFFF !important;
  color: #0F172A !important;
}
.grammar-lesson-card h1,
.grammar-lesson-card h2,
.grammar-lesson-card h3,
.grammar-lesson-card h4,
.grammar-lesson-card b,
.grammar-lesson-card strong,
.card.grammar-lesson-card b,
.card.grammar-lesson-card strong,
.grammar-brief-rule b,
.grammar-brief-rule strong,
.grammar-brief-example b,
.grammar-brief-example strong {
  color: #0F172A !important;
}
.grammar-lesson-card p,
.card.grammar-lesson-card p,
.grammar-brief-rule,
.grammar-brief-example {
  color: #334155 !important;
}

/* m025-574: dua aturan di bawah ditulis untuk tema kartu GELAP (#151520). Kartu sekarang putih
   (style.css "body.fz-lux .card"), jadi #CBD5E1 = 1,48:1 - paragraf dan label kartu nyaris hilang
   (Progres "Level kamu"/label hari, Membaca "53 bacaan", Menulis "TOPIK A1"/"0 kata").
   Nilai sekarang #5B6472 (5,9:1 di putih); kartu yang memang gelap memakai aturannya sendiri. */
.card p {
  color: #5B6472 !important;
}

.card > span:not([class*="lvl"]):not(.vocab-focus-word):not(.phonetic):not(.feedback-memory-kicker):not(#feedback *):not(#quizScaffoldNudge *):not(.quiz-scaffold-nudge *):not(.tutor-diagnostic-clue *):not(#tutorTurn *):not(.tutor-turn *):not([class*="pill"]):not(.prasasti-badge *),
.card p > span:not([class*="lvl"]):not(.vocab-focus-word):not(.phonetic):not(#feedback *):not(#quizScaffoldNudge *):not(.quiz-scaffold-nudge *):not(.tutor-diagnostic-clue *):not(#tutorTurn *):not(.tutor-turn *):not([class*="pill"]):not(.prasasti-badge *),
.card div > span:not([class*="badge"]):not([class*="tag"]):not([class*="btn"]):not([class*="act"]):not([class*="avatar"]):not([class*="lvl"]):not(.is-now):not(.is-done):not(.vocab-focus-word):not(.phonetic):not(.feedback-memory-kicker):not(#feedback *):not(#quizScaffoldNudge *):not(.quiz-scaffold-nudge *):not(.tutor-diagnostic-clue *):not(#tutorTurn *):not(.tutor-turn *):not([class*="pill"]):not(.prasasti-badge *) {
  color: #5B6472 !important;
}

.vocab-focus-word,
.card .vocab-focus-word,
#app .vocab-focus-word {
  color: #0F172A !important;
  font-weight: 800 !important;
}

.vocab-focus .phonetic,
.card .vocab-focus .phonetic,
#app .vocab-focus .phonetic,
.card .phonetic,
#app .phonetic,
.phonetic {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #64748B !important;
  padding: 0 4px !important;
}

/* Ensure feedback memory box and kicker retain their high-contrast colors */
.feedback-memory-box,
.card .feedback-memory-box,
#feedback .feedback-memory-box {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.feedback-memory-kicker,
.card .feedback-memory-kicker,
.card div > span.feedback-memory-kicker,
#feedback .feedback-memory-kicker {
  color: #FBBF24 !important;
}

.feedback-memory-content,
.feedback-memory-content span,
.card .feedback-memory-content,
.card .feedback-memory-content span,
.card div > span.feedback-memory-content,
.card div > .feedback-memory-content span,
#feedback .feedback-memory-content,
#feedback .feedback-memory-content span {
  color: #F8FAFC !important;
}

.feedback-memory-content strong,
.card .feedback-memory-content strong,
#feedback .feedback-memory-content strong {
  color: #FEF08A !important;
}

/* Ensure .fz2-lvl.is-now stays deep black text even after .card rules */
.card .fz2-lvls span.is-now,
.card .fz2-lvl.is-now,
.card div > span.fz2-lvl.is-now,
.card div > span.is-now {
  color: #0A0A0E !important;
  background: #FFE02E !important;
  font-weight: 900 !important;
}

.social-avatar,
span.social-avatar,
.social-me .social-avatar,
.social-friend .social-avatar,
.social-boardrow .social-avatar,
.card .social-avatar,
.card div > span.social-avatar {
  background: #FFE02E !important;
  color: #101018 !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: none !important;
}

/* Pencegahan Horizontal Layout Blowout pada layar sempit (<= 400px) */
@media (max-width: 400px) {
  .social-friend {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .social-friend-acts {
    width: 100% !important;
    justify-content: flex-end !important;
  }
}

/* Class Hub Badges (Zero white-on-yellow) */
.ch-badge,
span.ch-badge,
.card .ch-badge,
.card span.ch-badge {
  background: #FFE02E !important;
  color: #0A0A0E !important;
  font-weight: 900 !important;
}

/* Quick practice section & Target Lang Chip (Daylight Tactile) */
.quick-practice-section .target-lang-chip,
.target-lang-chip {
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 3px 0 #CBD5E1 !important;
}

.target-lang-chip .chip-label {
  color: #0F172A !important;
  font-weight: 800 !important;
}

.target-lang-chip .chip-sub {
  color: #64748B !important;
  font-weight: 600 !important;
}

/* Social & Community cards */
.fz2-social.card,
.fz2-social-card,
.social-card,
.card.social-card {
  background: #151520 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.fz2-social-title,
.social-card h3 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.fz2-social-sub {
  color: #94A3B8 !important;
  font-weight: 500 !important;
}

.fz2-social .fz2-act {
  background: #202032 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

.fz2-social .fz2-act:active {
  background: #2A2A42 !important;
}

.fz2-social .fz2-act span,
.fz2-social .fz2-act b {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.fz2-social .fz2-link,
.fz2-link {
  color: #FFE02E !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* STADIUM CARDS HIGH-CONTRAST PRECISION (Zero Invisible Text) */

/* Card 1: Yellow Header */
.fz-card-yellow .fz-stadium-header {
  background-color: #FFE02E !important;
  background-image: linear-gradient(180deg, #FFE02E 0%, #FFD41D 100%) !important;
  color: #0A0A0E !important;
}

.fz-card-yellow .fz-vocab-kicker-tag,
.fz-card-yellow .fz-vocab-level-tag {
  color: #0A0A0E !important;
  background-color: rgba(0, 0, 0, 0.14) !important;
  font-weight: 800 !important;
}

.fz-card-yellow .fz-vocab-word-title {
  color: #0A0A0E !important;
  font-weight: 900 !important;
}

.fz-card-yellow .fz-vocab-word-phonetic {
  color: #1F2937 !important;
  font-weight: 700 !important;
}

.fz-card-yellow .fz-vocab-word-meaning {
  color: #0F172A !important;
  font-weight: 800 !important;
}

.fz-card-yellow .fz-vocab-word-example {
  color: #111827 !important;
  font-weight: 600 !important;
  border-left: 3px solid #0A0A0E !important;
}

.fz-card-yellow .fz-vocab-word-example em {
  color: #1F2937 !important;
  font-weight: 700 !important;
}

/* Card 2: Silver Header */
.fz-card-silver .fz-stadium-header {
  background-color: #EEF2F6 !important;
  background-image: linear-gradient(135deg, #EEF2F6 0%, #DDE3EA 100%) !important;
  color: #0A0A0E !important;
}

.fz-card-silver .fz-vocab-kicker-tag,
.fz-card-silver .fz-vocab-level-tag {
  color: #0A0A0E !important;
  background-color: rgba(0, 0, 0, 0.12) !important;
  font-weight: 800 !important;
}

.fz-card-silver .fz-clean-header-title {
  color: #0A0A0E !important;
  font-weight: 900 !important;
}

.fz-card-silver .fz-clean-header-sub {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* Card 3: Dark Header */
.fz-card-dark .fz-stadium-header {
  background-color: #0F172A !important;
  background-image: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
  color: #FFFFFF !important;
}

.fz-card-dark .fz-vocab-kicker-tag {
  color: #38BDF8 !important;
  background: rgba(56, 189, 248, 0.2) !important;
  font-weight: 800 !important;
}

.fz-card-dark .fz-vocab-level-tag {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.16) !important;
  font-weight: 800 !important;
}

.fz-card-dark .fz-clean-header-title {
  color: #FFFFFF !important;
  font-weight: 900 !important;
}

.fz-card-dark .fz-clean-header-sub {
  color: #E2E8F0 !important;
  font-weight: 600 !important;
}

/* All Stadium Card Bodies (Pure Crisp White) */
.fz-stadium-body {
  background: #FFFFFF !important;
  color: #0A0A0E !important;
  padding: 18px 20px 22px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.fz-stadium-body .fz-stadium-chip {
  color: #0A0A0E !important;
  font-weight: 800 !important;
  border-color: rgba(10, 10, 14, 0.3) !important;
}

.fz-stadium-body .fz-time-val {
  color: #0A0A0E !important;
  font-weight: 900 !important;
}

.fz-stadium-body .fz-date-val {
  color: #334155 !important;
  font-weight: 800 !important;
}

.fz-stadium-footer-notch {
  display: none !important;
}

/* 4. MODALS, SHEETS & NOTIFICATION GATE (Rich Dark Theme, Zero White-on-White) */
body.fz-lux .welcome-panel,
body.fz-lux .modal-panel,
body.fz-lux .notification-panel,
.welcome-panel,
.modal-panel,
.notification-panel {
  background: #14141E !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #F8FAFC !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75) !important;
}

.welcome-mark,
.modal-mark {
  color: #FFE02E !important;
  font-weight: 800 !important;
}

.welcome-panel h1, .welcome-panel h2, .welcome-panel h3,
.modal-panel h1, .modal-panel h2, .modal-panel h3,
.notification-panel h1, .notification-panel h2, .notification-panel h3 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.welcome-panel p,
.modal-panel p,
.notification-panel p {
  color: #CBD5E1 !important;
  line-height: 1.6 !important;
}

.notification-requirement {
  background: #1E1E2C !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #E2E8F0 !important;
}

.notification-requirement span {
  color: #E2E8F0 !important;
  font-weight: 600 !important;
}

.notification-requirement svg {
  color: #FFE02E !important;
}

.notification-status {
  background: #1E1E2C !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-weight: 700 !important;
}

.notification-status.success {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34D399 !important;
}

.notification-help {
  color: #94A3B8 !important;
  font-weight: 500 !important;
}

.welcome-panel .text-button,
.modal-panel .text-button,
.notification-panel .text-button {
  color: #94A3B8 !important;
  font-weight: 700 !important;
}

.welcome-panel .text-button:hover,
.welcome-panel .text-button:active,
.notification-panel .text-button:hover,
.notification-panel .text-button:active {
  color: #FFFFFF !important;
}

/* Settings Modal & Rows */
.setting-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.setting-row b {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.setting-row small {
  color: #94A3B8 !important;
}

.setting-icon {
  background: #202032 !important;
  color: #FFE02E !important;
}

.setting-row select,
.setting-row input:not([type="checkbox"]) {
  background: #202032 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Listening Modal High Contrast & Complete Close Isolation */
.listening-modal:not(.open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.listening-modal-box {
  background: #FFFDF9 !important;
  border: 1.5px solid var(--line, #E8DFD3) !important;
  color: #241A11 !important;
}

.listening-modal-box .f-tag {
  color: #7A5F1B !important;
  background: #FAF6EF !important;
}

.listening-modal-box b,
.listening-modal-box strong {
  color: #241A11 !important;
}

.listening-modal-box p,
.listening-modal-box span:not(.jlpt-speaker-chip):not(.jlpt-speaker-chip *):not(.jlpt-speaker-dot) {
  color: #382E25 !important;
}

/* 5. PRODUCT TOUR (High Contrast Dark Bubble) */
.fz-tour-card {
  background: #181824 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8) !important;
}

.fz-tour-card h2 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.fz-tour-card p {
  color: #CBD5E1 !important;
}

.fz-tour-dot {
  background: rgba(255, 255, 255, 0.2) !important;
}

.fz-tour-dot.is-active {
  background: #FFE02E !important;
}

.fz-tour-skip {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #94A3B8 !important;
  font-weight: 700 !important;
}

.fz-tour-skip:hover {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.fz-tour-next {
  background: #FFE02E !important;
  border: none !important;
  color: #0A0A0E !important;
  font-weight: 800 !important;
}

/* 6. ONBOARDING SHEETS (High Contrast Dark Theme) */
.fiezel-sheet {
  background: #14141E !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #F8FAFC !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7) !important;
}

.fiezel-sheet:not(.fiezel-language-sheet) .fiezel-title,
html body .fiezel-sheet:not(.fiezel-language-sheet) .fiezel-title,
html body:not(.fz-teacher-mode) #app .fiezel-sheet:not(.fiezel-language-sheet) .fiezel-title,
html body:not(.fz-teacher-mode) #app .fiezel-sheet:not(.fiezel-language-sheet) h2 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* Language Sheet Title on Daylight Background */
.fiezel-language-sheet .fiezel-title,
.fiezel-language-sheet h2.fiezel-title,
.fiezel-language-sheet h2,
html body .fiezel-language-sheet .fiezel-title,
html body .fiezel-language-sheet h2,
html body:not(.fz-teacher-mode) #app .fiezel-language-sheet .fiezel-title,
html body:not(.fz-teacher-mode) #app .fiezel-language-sheet h2,
#galleryLanguageSheetHost .fiezel-title,
#galleryLanguageSheetHost h2 {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-weight: 800 !important;
}

.fiezel-body {
  color: #CBD5E1 !important;
}

.fiezel-note {
  color: #94A3B8 !important;
}

/* Onboarding Carousel Pills (High Contrast Dark Cards) */
.fiezel-carousel-item {
  background: #202030 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
  padding: 12px 14px !important;
}

.fiezel-carousel-item span {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 700 !important;
}

.fiezel-carousel-item i,
.fiezel-carousel-item .fiezel-glyph,
.fiezel-carousel-item svg {
  color: #F59E0B !important;
  fill: #F59E0B !important;
}

.fiezel-carousel-arrow {
  background: #202030 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}

.fiezel-carousel-arrow[disabled] {
  background: #181824 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #64748B !important;
  opacity: 0.6 !important;
}

.fiezel-language-kicker {
  color: #FFE02E !important;
}

.fiezel-goal-choice {
  background: #202030 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

.fiezel-goal-choice.is-selected {
  border-color: #FFE02E !important;
  background: #2A2A40 !important;
}

.fiezel-goal-choice b {
  color: #FFFFFF !important;
}

.fiezel-goal-choice small {
  color: #94A3B8 !important;
}

/* Onboarding Language Choice Cards (Centered, Tactile White Cards with High-Contrast Obsidian Text) */
.fiezel-language-choice,
button.fiezel-language-choice {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-bottom: 4px solid #CBD5E1 !important;
  border-radius: 22px !important;
  padding: 18px 14px 16px !important;
  min-height: 136px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.fiezel-language-choice .fiezel-language-flag {
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.fiezel-language-choice .fiezel-language-copy,
.fiezel-language-copy {
  order: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.fiezel-language-choice .fiezel-language-copy b,
.fiezel-language-sheet .fiezel-language-copy b {
  display: block !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto 2px auto !important;
}

.fiezel-language-choice .fiezel-language-copy small,
.fiezel-language-sheet .fiezel-language-copy small {
  display: block !important;
  color: #64748B !important;
  -webkit-text-fill-color: #64748B !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.fiezel-field input {
  background: #202030 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

.fiezel-field span {
  color: #CBD5E1 !important;
}

/* 7. Universal Primary Button High-Contrast */
button.primary,
.primary {
  background-color: #FFE02E !important;
  color: #0A0A0E !important;
  font-weight: 800 !important;
}

/* =========================================================================
   COMPREHENSIVE UI/UX AUDIT ENHANCEMENTS:
   - Settings Modal text/password/url inputs
   - Quiz Mode (Hide bottomnav, floating dock z-index, furigana contrast)
   - JLPT Listening Modal & Bottom Sheet (Backdrop z-index, dark theme cards, options)
   ========================================================================= */

/* 1. Settings & Form Inputs */
.modal input[type="text"],
.modal input[type="password"],
.modal input[type="url"],
.modal input[type="email"],
.modal input[type="number"],
.modal textarea,
.endpoint-label input,
.setting-row input[type="text"],
.setting-row input[type="password"],
.setting-row input[type="url"],
#settingLearnerName,
#backupPassphrase,
#reportEndpoint {
  background-color: #1C1C2A !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
}

.modal input::placeholder,
.endpoint-label input::placeholder,
#settingLearnerName::placeholder {
  color: #64748B !important;
}

/* 2. Quiz, Flashcard & Skills Lab / Listening Session: Hide bottom nav completely to prevent overlap and accidental tab switching */
html body.fz-stage-quiz nav.bottomnav,
html body.fz-stage-quiz .bottomnav,
html body:has(.quiz-shell) nav.bottomnav,
html body:has(.quiz-shell) .bottomnav,
html body.fz-lux.fz-stage-quiz nav.bottomnav,
html body.fz-lux.fz-stage-quiz .bottomnav,
html.fiezel-ui-v6 body.fz-stage-quiz nav.bottomnav,
html.fiezel-ui-v6 body:has(.quiz-shell) nav.bottomnav,
body.fz-stage-quiz nav.bottomnav,
body.fz-stage-quiz .bottomnav,
body:has(.quiz-shell) nav.bottomnav,
body:has(.quiz-shell) .bottomnav,
html body.fsl-session-active nav.bottomnav,
html body.fsl-session-active .bottomnav,
html body.fz-stage-sl nav.bottomnav,
html body.fz-stage-sl .bottomnav,
html body.fz-stage-sl.fsl-session-active nav.bottomnav,
html body.fz-stage-sl.fsl-session-active .bottomnav,
html body:has(.fsl-card-listening) nav.bottomnav,
html body:has(.fsl-card-listening) .bottomnav,
html body:has(.fsl-feedback) nav.bottomnav,
html body:has(.fsl-feedback) .bottomnav,
html body:has(#speakingListeningRoot .fsl-card-listening) nav.bottomnav,
html body:has(#speakingListeningRoot .fsl-card-listening) .bottomnav,
body.fsl-session-active nav.bottomnav,
body.fsl-session-active .bottomnav,
body:has(.fsl-card-listening) nav.bottomnav,
body:has(.fsl-card-listening) .bottomnav,
body:has(.fsl-feedback) nav.bottomnav,
body:has(.fsl-feedback) .bottomnav,
html body.fz-lesson-mode nav.bottomnav,
html body.fz-lesson-mode .bottomnav,
html body:has(.card-flashcard) nav.bottomnav,
html body:has(.card-flashcard) .bottomnav,
html body.fz-lux.fz-lesson-mode nav.bottomnav,
html body.fz-lux.fz-lesson-mode .bottomnav,
html.fiezel-ui-v6 body.fz-lesson-mode nav.bottomnav,
html.fiezel-ui-v6 body:has(.card-flashcard) nav.bottomnav,
body.fz-lesson-mode nav.bottomnav,
body.fz-lesson-mode .bottomnav,
body:has(.card-flashcard) nav.bottomnav,
body:has(.card-flashcard) .bottomnav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Level Cards (e.g. Mulai latihan level A1, A2, etc.) */
button.level-card,
.level-card,
html.fiezel-ui-v6 body.fz-lux button.level-card {
  background: #181826 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  color: #FFFFFF !important;
}
button.level-card *,
.level-card * {
  color: #FFFFFF !important;
}
button.level-card p,
.level-card p {
  color: #E2E8F0 !important;
  font-weight: 600 !important;
}
button.level-card .level-number,
.level-card .level-number,
button.level-card .level-num,
.level-card .level-num,
.level-number {
  background: #FFE02E !important;
  color: #101018 !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
.level-card strong {
  background: rgba(255, 224, 46, 0.15) !important;
  color: #FFE02E !important;
  font-weight: 800 !important;
}

/* Quiz Floating Next Action Bar */
#quizFloatingBar,
.quiz-floating-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 16px max(14px, env(safe-area-inset-bottom)) 16px !important;
  background: rgba(14, 14, 20, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6) !important;
  z-index: 2000 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

#quizFloatingBar .quiz-floating-next-btn,
.quiz-floating-bar button {
  width: 100% !important;
  max-width: 480px !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #FFE02E 0%, #F59E0B 100%) !important;
  color: #101018 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(255, 224, 46, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

/* Furigana Ruby Pronunciation High Contrast */
ruby rt,
.ja-word rt,
.furigana {
  color: #FBBF24 !important;
  font-weight: 600 !important;
}

/* Level scope note badge */
.level-scope-note {
  background: #181824 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
  border-radius: 12px !important;
}
.level-scope-note b {
  color: #FFE02E !important;
  font-weight: 800 !important;
}
.level-scope-note span {
  color: #94A3B8 !important;
}

/* Feedback Drawer in Quiz */
.feedback,
#feedback {
  background: #181826 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
  border-radius: 18px !important;
  padding: 16px 18px 24px 18px !important;
  margin-top: 16px !important;
  margin-bottom: 84px !important;
}
.feedback.feedback-success {
  border-left: 4px solid #10B981 !important;
}
.feedback.feedback-error {
  border-left: 4px solid #EF4444 !important;
}
.feedback p,
.feedback span,
.feedback .feedback-title b {
  color: #F8FAFC !important;
}
.feedback details summary {
  color: #38BDF8 !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}
.feedback details p {
  color: #94A3B8 !important;
}
.feedback .memory-tip {
  background: rgba(255, 224, 46, 0.08) !important;
  border: 1px solid rgba(255, 224, 46, 0.2) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  color: #FEF08A !important;
}
.feedback .memory-tip span {
  color: #FEF08A !important;
}
.feedback .ai-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #CBD5E1 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  margin-top: 12px !important;
}

/* Tutor Turn in Quiz / Brain Scaffolding (100% WCAG AAA Compliant) */
.tutor-turn,
#tutorTurn,
html body #tutorTurn,
html body .tutor-turn {
  background: #181826 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 4px solid #F59E0B !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  margin-top: 16px !important;
  color: #F8FAFC !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.tutor-turn-head,
html body .tutor-turn .tutor-turn-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #FBBF24 !important;
}

.tutor-turn-head b,
html body .tutor-turn .tutor-turn-head b {
  color: #FBBF24 !important;
  font-weight: 800 !important;
}

.tutor-turn-face,
html body .tutor-turn .tutor-turn-face {
  background: #F59E0B !important;
  color: #181826 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
}

.tutor-turn-face svg,
html body .tutor-turn .tutor-turn-face svg {
  color: #181826 !important;
  stroke: #181826 !important;
}

.tutor-turn-say,
html body .tutor-turn .tutor-turn-say,
html body #tutorTurn p.tutor-turn-say {
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #F8FAFC !important;
}

.tutor-turn-ask,
html body .tutor-turn .tutor-turn-ask,
html body #tutorTurn p.tutor-turn-ask {
  margin: 10px 0 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
  color: #FDE68A !important;
}

.tutor-turn-actions,
html body .tutor-turn .tutor-turn-actions {
  margin-top: 14px !important;
}

.tutor-stuck,
html body #tutorStuck,
html body .tutor-stuck {
  min-height: 44px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.tutor-stuck:hover,
.tutor-stuck:active,
html body #tutorStuck:hover,
html body #tutorStuck:active {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: #FBBF24 !important;
  color: #FBBF24 !important;
}

/* 3. JLPT Listening Modal & Detail Sheet Dark Theme */
.jlpt-badge-mondai {
  background: #1E1E2C !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
}
.jlpt-badge-mondai span {
  color: #F8FAFC !important;
}
.jlpt-counter-pill {
  background: #1E1E2C !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
}

/* JLPT Primary Play Button */
.jlpt-primary-play-btn,
.jlpt-primary-play-btn *,
.jlpt-primary-play-btn span,
#jlptPlayText,
#jlptPlayIcon,
#jlptMainPlayBtn,
#jlptMainPlayBtn * {
  color: #101018 !important;
  font-weight: 800 !important;
}

/* JLPT Options Base, Correct & Wrong States */
.jlpt-opt-btn .jlpt-opt-ja {
  color: #0F172A !important;
  font-weight: 800 !important;
}
.jlpt-opt-btn .jlpt-opt-id {
  color: #475569 !important;
  font-weight: 600 !important;
}

.jlpt-opt-btn.correct {
  background: rgba(16, 185, 129, 0.22) !important;
  border: 2px solid #10B981 !important;
}
.jlpt-opt-btn.correct .jlpt-opt-badge {
  background: #10B981 !important;
  color: #FFFFFF !important;
}
.jlpt-opt-btn.correct .jlpt-opt-ja {
  color: #065F46 !important;
  font-weight: 800 !important;
}
.jlpt-opt-btn.correct .jlpt-opt-id {
  color: #047857 !important;
  font-weight: 600 !important;
}

.jlpt-opt-btn.wrong {
  background: rgba(239, 68, 68, 0.22) !important;
  border: 2px solid #EF4444 !important;
}
.jlpt-opt-btn.wrong .jlpt-opt-badge {
  background: #EF4444 !important;
  color: #FFFFFF !important;
}
.jlpt-opt-btn.wrong .jlpt-opt-ja {
  color: #991B1B !important;
  font-weight: 800 !important;
}
.jlpt-opt-btn.wrong .jlpt-opt-id {
  color: #B91C1C !important;
  font-weight: 600 !important;
}

.jlpt-opt-btn.revealed-correct {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 2px solid #10B981 !important;
}

/* JLPT Answer Feedback Banner */
.jlpt-feedback-banner {
  border-radius: 14px !important;
}
.jlpt-feedback-banner.correct {
  background: #ECFDF5 !important;
  border: 1.5px solid #A7F3D0 !important;
  color: #065F46 !important;
}
.jlpt-feedback-banner.correct * {
  color: #065F46 !important;
}
.jlpt-feedback-banner.wrong {
  background: #FEF2F2 !important;
  border: 1.5px solid #FECACA !important;
  color: #991B1B !important;
}
.jlpt-feedback-banner.wrong * {
  color: #991B1B !important;
}
.jlpt-fb-next-btn {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border: none !important;
}
.jlpt-fb-key-btn {
  background: #FFFFFF !important;
  color: #1E293B !important;
  border: 1.5px solid #CBD5E1 !important;
}
.jlpt-replay-pill {
  color: #7A5F1B !important;
  background: #FEF3C7 !important;
  border: 1px solid #FDE68A !important;
}

/* JLPT Bottom Sheet Drawer */
#jlptDetailSheet {
  z-index: 2650 !important;
}
#jlptSheetBackdrop {
  z-index: 2660 !important;
}
.jlpt-sheet-container {
  z-index: 2700 !important;
  background: #FFFDF9 !important;
  border-top: 1.5px solid #E8DFD3 !important;
  box-shadow: 0 -12px 38px rgba(36, 26, 17, 0.18) !important;
  color: #0F172A !important;
}

.jlpt-sheet-header {
  background: #FFFDF9 !important;
  border-bottom: 1.5px solid #E8DFD3 !important;
}
.jlpt-sheet-title {
  color: #0F172A !important;
  font-weight: 800 !important;
}
.jlpt-sheet-subtitle {
  color: #7A6F64 !important;
}
.jlpt-sheet-close {
  background: #FAF6EF !important;
  color: #1E293B !important;
  border: 1.5px solid #E8DFD3 !important;
  border-radius: 999px !important;
}

/* JLPT Sheet Tabs */
.jlpt-sheet-tabs {
  background: #FAF6EF !important;
  border: 1.5px solid #E8DFD3 !important;
}
.jlpt-tab-chip,
.jlpt-sheet-tab-btn {
  background: #FFFDF9 !important;
  color: #64748B !important;
  border: 1px solid #E8DFD3 !important;
}
.jlpt-sheet-tab-btn:hover {
  color: #0F172A !important;
}
.jlpt-tab-chip.active,
.jlpt-sheet-tab-btn.active {
  background: #241A11 !important;
  color: #FFD94F !important;
  font-weight: 800 !important;
  border-color: #18110A !important;
}
.jlpt-sheet-tab-count {
  background: rgba(36, 26, 17, 0.08) !important;
  color: #1E293B !important;
}
.jlpt-sheet-tab-btn.active .jlpt-sheet-tab-count {
  background: #FFD94F !important;
  color: #101018 !important;
}

/* JLPT Sheet Naskah Tab */
.jlpt-transcript-tag {
  background: #FAF6EF !important;
  color: #0284C7 !important;
  border: 1px solid rgba(2, 132, 199, 0.25) !important;
  border-radius: 6px !important;
}
.jlpt-dialogue-turn {
  background: transparent !important;
}
.jlpt-turn-bubble {
  background: #FAF6EF !important;
  border: 1.5px solid #E8DFD3 !important;
  border-radius: 12px !important;
}
.jlpt-bubble-ja {
  color: #0F172A !important;
  font-weight: 700 !important;
}
.jlpt-bubble-ro {
  color: #64748B !important;
}
.jlpt-bubble-id {
  color: #334155 !important;
  border-top: 1px dashed #E8DFD3 !important;
}

/* JLPT Sheet Pembahasan Tab */
.jlpt-explain-article {
  background: #FAF6EF !important;
  border: 1.5px solid #E8DFD3 !important;
  border-radius: 14px !important;
  color: #0F172A !important;
}
.jlpt-explain-article-title {
  color: #0F172A !important;
  font-weight: 800 !important;
}
.jlpt-explain-body {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  color: #1E293B !important;
  line-height: 1.65 !important;
}
.jlpt-explain-title,
.listening-modal .jlpt-explain-title {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-weight: 800 !important;
}
.jlpt-explain-desc,
.listening-modal .jlpt-explain-desc {
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}
.jlpt-explain-tip-box {
  background: #EFF6FF !important;
  border: 1.5px solid #BAE6FD !important;
  border-radius: 10px !important;
  color: #0369A1 !important;
  font-weight: 600 !important;
}
.jlpt-explain-tip-box strong,
.jlpt-explain-tip-box b {
  color: #0C4A6E !important;
  font-weight: 800 !important;
}

/* JLPT Sheet Kosakata Tab */
.jlpt-vocab-card-item {
  background: #FFFDF9 !important;
  border: 1.5px solid #E8DFD3 !important;
  border-radius: 12px !important;
}
.jlpt-vocab-card-item:hover {
  background: #FAF6EF !important;
  border-color: #D8CEBF !important;
}
.jlpt-vocab-term {
  color: #0F172A !important;
  font-weight: 800 !important;
}
.jlpt-vocab-meaning {
  color: #475569 !important;
}

/* ==========================================================================
   AUDIT FIX 1: ZERO LEGACY MASCOT HARD ENFORCEMENT (NON-PRACTICE VIEWS)
   Suppresses legacy flat 2D decorative paws on maps, account, and auth views.
   ========================================================================== */
.path-mascot,
.writing-mascot,
.fz2-level-paw,
.coach-strip-face,
.fz-paw-peek,
.fz-paw-head,
.mascot-wrap,
.paw-avatar,
.paw-face {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   AUDIT FIX 1B: 3D MOCHI MASCOT COMPANION PRACTICE STAGE SLOTS & VIEWPORT
   Enforces prominent, unclipped 3D Volumetric Jelly Mochi companion across
   Practice Stages (Quiz, Chokai/Listening, Skills Lab, JLPT) on Mobile & Desktop.
   ========================================================================== */
.quiz-stage .fz-paw-slot,
.quiz-stage .fz-paw-above,
.quiz-stage fiezel-mascot,
.quiz-stage .fz-paw-slot fiezel-mascot,
.quiz-shell .fz-paw-side,
.quiz-shell .fz-paw-side fiezel-mascot,
.quiz-mascot,
.quiz-mascot fiezel-mascot,
.fsl-mascot-slot,
.fsl-mascot,
.fsl-player fiezel-mascot,
.fsl-card fiezel-mascot,
fiezel-mascot:has(.fz-mochi-viewport),
.fz-paw-slot:has(.fz-mochi-viewport) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

/* Universal Anti-Ghost PAW Invariant: NEVER show legacy 2D SVG cat mascot anywhere */
fiezel-mascot .fz-svg,
fiezel-mascot.mochi-active .fz-svg,
fiezel-mascot:has(.fz-mochi-viewport) .fz-svg,
fiezel-mascot:has(canvas) .fz-svg,
.fiezel-ob-mascot .fz-svg,
.fiezel-ob-paw .fz-svg,
.fz-coach-mascot .fz-svg,
.coach-strip-mascot .fz-svg,
.coach-strip-face .fz-svg,
.paw-hero-avatar .fz-svg,
.lesson-mascot .fz-svg,
.writing-stage .fz-svg,
.fz-mochi-viewport ~ .fz-svg {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Home Cockpit & Onboarding: 3D Mochi companion allowed and active */
.paw-hero-cockpit {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.paw-hero-avatar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 76px !important;
  height: 76px !important;
  position: relative !important;
  overflow: visible !important;
}
.paw-hero-avatar .coach-strip-face {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
.paw-hero-avatar .coach-strip-face .coach-strip-mascot,
.paw-hero-avatar fiezel-mascot {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  position: relative !important;
}
.paw-speech-bubble {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.fiezel-ob-mascot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 170px !important;
  height: 155px !important;
  min-height: 140px !important;
  position: relative !important;
  overflow: visible !important;
}
.fiezel-ob-mascot fiezel-mascot,
.fiezel-ob-mascot .fiezel-ob-paw {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: visible !important;
}

/* 3D Mochi Viewport: full dimensions, zero clipping on paws, badges, or ears */
.fz-mochi-viewport,
.quiz-stage .fz-mochi-viewport,
.fsl-mascot-slot .fz-mochi-viewport,
.jlpt-mascot-slot .fz-mochi-viewport {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

.fz-mochi-viewport,
.fz-mochi-viewport canvas {
  overflow: visible !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: auto !important;
  display: block !important;
}

/* Quiz Stage Layout - Mobile (<640px) */
@media (max-width: 640px) {
  .quiz-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
  }

  .quiz-stage .fz-paw-slot,
  .quiz-stage .fz-paw-above {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    width: clamp(140px, 38vw, 172px) !important;
    height: clamp(140px, 36vw, 165px) !important;
    min-height: 140px !important;
    max-height: 175px !important;
    min-width: 140px !important;
    aspect-ratio: 16/15 !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .quiz-stage fiezel-mascot,
  .quiz-stage .fz-paw-slot fiezel-mascot {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 140px !important;
    position: relative !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .quiz-bubble {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .quiz-bubble::before,
  .quiz-bubble::after {
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .quiz-bubble::before {
    top: -19px !important;
    border-right-color: transparent !important;
    border-bottom-color: var(--line, #E2E8F0) !important;
  }

  .quiz-bubble::after {
    top: -16px !important;
    border-right-color: transparent !important;
    border-bottom-color: #181824 !important;
  }
}

/* Unified Warm Travertine / Daifuku Card Theme for Whole Quiz Card */
.quiz-shell > .card,
body.fz-stage-quiz .quiz-shell > .card,
.quiz-shell .card {
  background: linear-gradient(180deg, #FDF8F1 0%, #F5ECE0 100%) !important;
  border: 1.5px solid #E6D9C8 !important;
  border-radius: var(--radius-lg, 28px) !important;
  box-shadow: 0 12px 36px rgba(46, 39, 36, 0.08) !important;
}

/* ZERO isolated box around Mochi companion: seamless floating stage */
.quiz-stage .fz-paw-slot,
.quiz-stage .fz-paw-above,
.quiz-stage fiezel-mascot,
.quiz-stage .fz-paw-slot fiezel-mascot,
.quiz-shell .fz-paw-side,
.quiz-shell .fz-paw-side fiezel-mascot,
.fz-mochi-viewport {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Answer option buttons: clean white tiles with delicate warm border */
.quiz-shell .options button:not(.correct):not(.wrong):not(.is-correct):not(.is-selected),
.quiz-shell .options .option:not(.correct):not(.wrong):not(.is-correct):not(.is-selected),
.quiz-shell button.option:not(.correct):not(.wrong):not(.is-correct):not(.is-selected),
.quiz-shell .option:not(.correct):not(.wrong):not(.is-correct):not(.is-selected) {
  background: #FFFFFF !important;
  border: 1.5px solid #E8DFD3 !important;
  border-radius: 16px !important;
  color: #1E293B !important;
  box-shadow: 0 4px 10px rgba(46, 39, 36, 0.04) !important;
  font-weight: 600 !important;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.quiz-shell .options button:not(.correct):not(.wrong):hover:not(:disabled),
.quiz-shell .options .option:not(.correct):not(.wrong):hover:not(:disabled),
.quiz-shell button.option:not(.correct):not(.wrong):hover:not(:disabled) {
  background: #FAF8F4 !important;
  border-color: #D1C2AF !important;
  transform: translateY(-1px) !important;
}

.quiz-shell .options button:not(.correct):not(.wrong):active:not(:disabled),
.quiz-shell .options .option:not(.correct):not(.wrong):active:not(:disabled) {
  transform: scale(0.985) !important;
}

/* Quiz Stage Layout - Desktop & Tablets (>=641px) */
@media (min-width: 641px) {
  .quiz-stage {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 0 14px 0 !important;
    width: 100% !important;
  }

  .quiz-stage .fz-paw-slot,
  .quiz-stage .fz-paw-above {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    width: clamp(150px, 28%, 180px) !important;
    height: clamp(140px, 24vw, 165px) !important;
    min-height: 140px !important;
    min-width: 150px !important;
    aspect-ratio: 16/15 !important;
    position: relative !important;
    overflow: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .quiz-stage fiezel-mascot,
  .quiz-stage .fz-paw-slot fiezel-mascot {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 140px !important;
    position: relative !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .quiz-bubble {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Desktop Side Mascot Column in Quiz Shell (>=980px) */
@media (min-width: 980px) {
  .quiz-shell .fz-paw-side {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: clamp(148px, 16vw, 192px) !important;
    min-height: 148px !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  .quiz-shell .fz-paw-side fiezel-mascot {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 148px !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
}

/* Skills Lab (Chokai / Listening & Speaking) Mascot Slots */
.fsl-mascot-slot {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  min-height: 130px !important;
  min-width: 130px !important;
  width: clamp(130px, 30vw, 160px) !important;
  height: clamp(120px, 28vw, 150px) !important;
  aspect-ratio: 16/15 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.fsl-mascot-slot:has(fiezel-mascot),
.fsl-mascot-slot:has(.fz-mochi-viewport) {
  overflow: visible !important;
  background: transparent !important;
}

.fsl-mascot,
.fsl-mascot-slot fiezel-mascot,
.fsl-mascot-slot fiezel-mascot.fsl-mascot {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 120px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
}

/* JLPT Listening Exam Mascot Slot */
.jlpt-mascot-slot {
  position: relative !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 145px !important;
  height: 165px !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

@media (max-width: 480px) {
  .jlpt-mascot-slot {
    min-height: 140px !important;
    height: 145px !important;
  }
}

.jlpt-mascot,
.jlpt-mascot-slot .jlpt-mascot,
.jlpt-mascot-slot fiezel-mascot {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 260px !important;
  position: relative !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   AUDIT FIX 2: PREVENT BOOT SPLASH CANVAS LEAK
   ========================================================================== */
html:not(.fz-booting) .fz-splash-canvas,
#fiezelBootSplash.is-leaving .fz-splash-canvas,
html:not(.fz-booting) #fiezelBootSplash:not(.is-leaving) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ==========================================================================
   AUDIT FIX 3: SKILLS LAB (BICARA & DENGAR) DAYLIGHT TRAVERTINE TACTILE THEME
   ========================================================================== */
.fsl-card,
article.fsl-card,
.fsl-shell .fsl-card,
.fsl-card-listening {
  background: #FFFDF9 !important;
  border: 1.5px solid #E8DFD3 !important;
  border-radius: 20px !important;
  color: #241A11 !important;
  box-shadow: 0 4px 20px rgba(36, 26, 17, 0.06) !important;
}
.fsl-card h1,
.fsl-card h2,
.fsl-card h3,
.fsl-head h1,
.fsl-card-listening h2 {
  color: #0F172A !important;
  font-weight: 800 !important;
}
.fsl-card p,
.fsl-head p,
.fsl-card span:not(.fsl-kicker):not(.fsl-gem-mark) {
  color: #475569 !important;
}
.fsl-card .fsl-kicker,
.fsl-kicker {
  color: #D97706 !important;
  font-weight: 800 !important;
}
.fsl-card button.fsl-primary,
.fsl-primary,
.fsl-actions button.fsl-primary,
[data-next] {
  background: #FFE02E !important;
  color: #101018 !important;
  font-weight: 800 !important;
  border: 1.5px solid #241A11 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 0 #241A11 !important;
}
.fsl-card button:not(.fsl-primary):not(.fsl-exit-btn):not(.fsl-option),
.fsl-actions button:not(.fsl-primary):not(.fsl-exit-btn):not(.fsl-option) {
  background: #FAF6EF !important;
  color: #382E25 !important;
  border: 1.5px solid #E8DFD3 !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 0 #D8CEBF !important;
}
.fsl-player {
  background: #FAF6EF !important;
  border: 1.5px solid #E8DFD3 !important;
  border-radius: 16px !important;
}
.fsl-player .fsl-replays {
  color: #64748B !important;
}
.fsl-player .fsl-wave {
  color: #D97706 !important;
}
.fsl-gem-chip {
  background: #FAF6EF !important;
  border: 1.5px solid #E8DFD3 !important;
  color: #241A11 !important;
}
.fsl-gem-chip b {
  color: #D97706 !important;
}
.fsl-gem-chip small {
  color: #64748B !important;
}
.fsl-gem-toggle {
  background: #FAF6EF !important;
  border: 1.5px solid #E8DFD3 !important;
  color: #382E25 !important;
}
.fsl-gem-toggle[aria-pressed="true"] {
  background: #FFF3DC !important;
  border-color: #D97706 !important;
  color: #78350F !important;
}
.fsl-gem-empty {
  background: #FAF6EF !important;
  border: 1px dashed #D8CEBF !important;
  color: #64748B !important;
}
.fsl-gem-empty b {
  color: #241A11 !important;
}
.fsl-status,
.fsl-feedback {
  background: #FAF6EF !important;
  border: 1.5px solid #E8DFD3 !important;
  color: #241A11 !important;
  box-shadow: 0 3px 0 #D8CEBF !important;
}
.fsl-option {
  background: #FFFFFF !important;
  border: 1.5px solid #E8DFD3 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 0 #D8CEBF !important;
}
.fsl-option:hover:not(:disabled) {
  background: #FFFDF8 !important;
  border-color: #D6CBC0 !important;
}
.fsl-option.is-correct {
  background: #F0FDF4 !important;
  border-color: #16A34A !important;
  color: #14532D !important;
}
.fsl-option.is-wrong {
  background: #FEF2F2 !important;
  border-color: #EF4444 !important;
  color: #7F1D1D !important;
}
.fsl-work:disabled .fsl-input,
.fsl-work:disabled .fsl-option {
  background: #FAF6EF !important;
  color: #94A3B8 !important;
  border-color: #E8DFD3 !important;
  box-shadow: none !important;
}
.fsl-input {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  border-radius: 12px !important;
}
.fsl-prompt {
  color: #241A11 !important;
}
.fsl-transcript {
  background: #101018 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
}

/* ==========================================================================
   AUDIT FIX 4: WRITING VIEW DARK THEME & ZERO MASCOT
   ========================================================================== */
.skill-page-hero,
.skill-writing,
.skill-help-panel {
  background: #181826 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  color: #FFFFFF !important;
}
html body:not(.fz-teacher-mode) #app .skill-page-hero h1,
html body:not(.fz-teacher-mode) #app .skill-writing h1,
.skill-page-hero h1,
.skill-writing h1,
.skill-page-hero h2,
.skill-page-hero h3,
.skill-help-panel h2 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 800 !important;
}
.skill-page-hero p,
.skill-help-panel p {
  color: #CBD5E1 !important;
}
.skill-page-hero .skill-badge {
  background: rgba(255, 224, 46, 0.15) !important;
  color: #FFE02E !important;
  border: 1px solid rgba(255, 224, 46, 0.3) !important;
  font-weight: 800 !important;
}
.card.writing-prompt .skill-badge,
.writing-prompt .skill-badge {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  opacity: 1 !important;
  display: inline-block !important;
}
.writing-prompt textarea,
.writing-input,
textarea.writing-area {
  background: #12121C !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  border-radius: 14px !important;
}
.writing-prompt textarea:focus,
.writing-input:focus,
textarea.writing-area:focus {
  border-color: #FFE02E !important;
  outline: none !important;
}
.writing-meta {
  color: #94A3B8 !important;
}
.writing-feedback .card {
  background: #181826 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

/* Reading Dark Card High-Contrast Headings */
html body:not(.fz-teacher-mode) #app .passage-reading h3,
html body:not(.fz-teacher-mode) #app .card-reading h3,
html body:not(.fz-teacher-mode) #app #quizPassage h3,
.passage-reading h3,
.card-reading h3,
#quizPassage h3 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 800 !important;
}
.passage-reading .eyebrow,
.card-reading .eyebrow,
#quizPassage .eyebrow {
  color: #FFE02E !important;
  -webkit-text-fill-color: #FFE02E !important;
  font-weight: 800 !important;
}

/* Reading Card & Passage High-Contrast Body Text (Solves Dark-on-Dark Unreadable Bug) */
html body:not(.fz-teacher-mode) #app .passage-reading p,
html body:not(.fz-teacher-mode) #app .card-reading p,
html body:not(.fz-teacher-mode) #app #quizPassage p,
.passage-reading p,
.card-reading p,
#quizPassage p,
.passage p {
  color: #F8FAFC !important;
  -webkit-text-fill-color: #F8FAFC !important;
  font-size: 1.12rem !important;
  line-height: 2.15 !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
}

/* Base text (Kanji, Kana, Romaji, and Spans) inside reading passages */
html body:not(.fz-teacher-mode) #app .passage-reading p *,
html body:not(.fz-teacher-mode) #app .card-reading p *,
html body:not(.fz-teacher-mode) #app #quizPassage p *,
.passage-reading p *,
.card-reading p *,
#quizPassage p *,
.card-reading ruby,
#quizPassage ruby,
.passage-reading ruby,
.card-reading .ja-word,
#quizPassage .ja-word,
.card-reading .ja-word-wrap,
#quizPassage .ja-word-wrap,
.card-reading span,
#quizPassage span {
  color: #F8FAFC !important;
  -webkit-text-fill-color: #F8FAFC !important;
}

/* High-contrast vibrant furigana above kanji */
.card-reading ruby rt,
#quizPassage ruby rt,
.passage-reading ruby rt,
.card-reading rt,
#quizPassage rt {
  color: #FCD34D !important;
  -webkit-text-fill-color: #FCD34D !important;
  font-weight: 700 !important;
  font-size: 0.65em !important;
  letter-spacing: 0.02em !important;
}

/* Grammar Cloze Input High-Contrast (While Typing & Disabled) */
.cloze-input,
input.cloze-input,
#clozeInput {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  background-color: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  caret-color: #0F172A !important;
}

.cloze-input:focus,
.cloze-input:focus-visible,
#clozeInput:focus {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  background-color: #FFFFFF !important;
  border-color: #0284C7 !important;
  outline: 2px solid rgba(2, 132, 199, 0.25) !important;
  outline-offset: 2px !important;
}

.cloze-input::placeholder,
#clozeInput::placeholder {
  color: #64748B !important;
  -webkit-text-fill-color: #64748B !important;
  font-weight: 500 !important;
}

.cloze-input:disabled,
#clozeInput:disabled {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-weight: 700 !important;
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  opacity: 1 !important;
}

/* Flashcard Level Badge High-Contrast */
.chip-level,
.flashcard .chip-level,
.card .chip-level,
.flash-level-chip {
  background: #FEF3C7 !important;
  color: #92400E !important;
  -webkit-text-fill-color: #92400E !important;
  border: 1.5px solid #F59E0B !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
}

/* Placement Test Diagnostic Results High-Contrast */
.result-card .score,
.result-stage .score,
#quizScoreCount {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-weight: 800 !important;
}
.result-bands small {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
.result-band {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

/* Thai Step Guidance High-Contrast */
.tutor-steps,
#feedback .tutor-steps {
  background: #FFF8EE !important;
  border: 1.5px solid #FDE68A !important;
}
.tutor-steps p,
.tutor-steps .tutor-step,
#feedback .tutor-step {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}
.tutor-step::before,
#feedback .tutor-step::before {
  background: #FEF3C7 !important;
  border: 1.5px solid #D97706 !important;
  color: #92400E !important;
  font-weight: 800 !important;
}
.tutor-step-final,
#feedback .tutor-step-final {
  color: #9A3412 !important;
  -webkit-text-fill-color: #9A3412 !important;
  font-weight: 700 !important;
}

/* Prasasti Rewards Badges & Gallery Note */
.prasasti-badge.is-locked .prasasti-icon {
  background: #2D2D42 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFE02E !important;
}
.prasasti-badge.is-locked .prasasti-icon svg {
  color: #FFE02E !important;
  fill: currentColor !important;
}
.prasasti-badge .prasasti-hint {
  color: #CBD5E1 !important;
  -webkit-text-fill-color: #CBD5E1 !important;
  font-weight: 500 !important;
}
.map-note,
.map-note span,
p.map-note {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   AUDIT FIX 5: GRAMMAR VIEW PATH & RING DARK THEME
   ========================================================================== */
body.fz-lux .fz2-path-summary,
body .fz2-path-summary,
.fz2-path-summary,
.grammar-level-note {
  background: #181826 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  color: #FFFFFF !important;
}
.fz2-path-summary b,
.fz2-path-summary>div>b {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.fz2-path-summary span,
.fz2-path-summary>div>span {
  color: #FFE02E !important;
  font-weight: 700 !important;
}
.fz2-path-summary small,
.fz2-path-summary>div>small {
  color: #94A3B8 !important;
}
body .fz2-path-ring {
  background: conic-gradient(#FFE02E calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.1) 0) !important;
}
body .fz2-path-ring::after {
  background: #181826 !important;
}
body .fz2-path-ring b,
body .fz2-path-ring .fz2-path-ring-count {
  color: #FFE02E !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
}
body.fz-lux .path-label,
body .path-label,
.path-label {
  background: #181826 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}
body.fz-lux .path-label b,
body .path-label b {
  color: #FFFFFF !important;
}
body.fz-lux .path-label>span,
body .path-label>span {
  color: #94A3B8 !important;
}
body.fz-lux .path-step.is-current .path-label,
body .path-step.is-current .path-label {
  border: 2px solid #FFE02E !important;
  box-shadow: 0 4px 16px rgba(255, 224, 46, 0.2) !important;
}
body.fz-lux .path-step.is-mastered .path-label::after,
body .path-step.is-mastered .path-label::after {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10B981 !important;
}

/* ==========================================================================
   AUDIT FIX 6: LEARNER FLOW & ARENA HIGH CONTRAST DARK THEME
   ========================================================================== */
.lf-card,
.today-card:not(.fz-stadium-card),
.paw-lobby-card,
.duel-hero,
.duel-play,
.duel-result,
.paw-rules-card,
.paw-stories,
.paw-story-full,
.paw-help-inner,
.paw-artifact,
.paw-code-share {
  background: #181826 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  color: #FFFFFF !important;
}
.lf-card h1, .lf-card h2, .lf-card h3, .lf-card h4, .lf-card b, .lf-card strong,
.duel-hero h2, .duel-hero b,
.paw-lobby-card b,
.paw-rules-card b,
.paw-story-full b {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.lf-card p,
.lf-muted,
.tac-muted,
.paw-rules-goal,
.paw-story-text {
  color: #CBD5E1 !important;
}
.lf-kicker,
.tac-kicker {
  color: #FFE02E !important;
  font-weight: 800 !important;
}
.lf-tabs,
.tac-tabs {
  background: #12121C !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
}
.lf-tab,
.tac-tab {
  background: transparent !important;
  color: #94A3B8 !important;
}
.lf-tab.is-active,
.tac-tab.is-active {
  background: #FFE02E !important;
  color: #101018 !important;
  font-weight: 800 !important;
}
.lf-primary,
button.lf-primary,
.paw-lobby-actions button.lf-mini.paw-lobby-cta,
button[data-arena="pick"] {
  background: #FFE02E !important;
  color: #101018 !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 999px !important;
}
.lf-ghost,
button.lf-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 999px !important;
}
.lf-mini.paw-lobby-friend,
span.paw-lobby-friend {
  background: rgba(255, 224, 46, 0.15) !important;
  color: #FFE02E !important;
  border: 1px solid rgba(255, 224, 46, 0.3) !important;
  border-radius: 999px !important;
}
.lf-option {
  background: #1C1C2A !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}
.lf-option.is-correct {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: #10B981 !important;
  color: #FFFFFF !important;
}
.lf-option.is-wrong {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
}
.paw-scores {
  background: #141420 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.paw-scores .duel-p {
  color: #CBD5E1 !important;
}
.paw-scores .duel-p b {
  color: #FFE02E !important;
}
.paw-rules-steps li {
  color: #CBD5E1 !important;
}
.paw-rules-steps li span {
  background: #FFE02E !important;
  color: #101018 !important;
  font-weight: 800 !important;
}
.paw-clue-card {
  background: #1E1E2E !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #CBD5E1 !important;
}
.paw-clue-card.is-picked {
  background: rgba(255, 224, 46, 0.15) !important;
  border-color: #FFE02E !important;
  color: #FFE02E !important;
}
.lf-stepper li {
  background: #1E1E2E !important;
  color: #CBD5E1 !important;
}
.lf-stepper li span {
  background: #2A2A3E !important;
  color: #FFFFFF !important;
}
.lf-stepper li.is-current {
  background: #FFE02E !important;
  color: #101018 !important;
}
.lf-stepper li.is-current span {
  background: #101018 !important;
  color: #FFE02E !important;
}

/* ==========================================================================
   AUDIT FIX 7: LIBRARY CARDS & READER DOCK CONTRAST
   ========================================================================== */
.library-card,
button.library-card,
.library-item {
  background: #181826 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  color: #FFFFFF !important;
}
.library-card b,
.library-card h2,
.library-card h3,
.library-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.library-card p,
.library-card span,
.library-card small,
.library-desc,
.library-meta {
  color: #CBD5E1 !important;
}
.library-dock {
  background: rgba(20, 20, 30, 0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6) !important;
  color: #FFFFFF !important;
  z-index: 3000 !important;
  bottom: 0 !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
}
.library-dock * {
  color: #FFFFFF !important;
}
.library-dock .library-status {
  color: #CBD5E1 !important;
}
.library-dock button {
  background: #FFE02E !important;
  color: #101018 !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 999px !important;
}
.library-sentence {
  background: #181826 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
}
.library-sentence.is-active {
  border-color: #FFE02E !important;
  background: rgba(255, 224, 46, 0.1) !important;
}
html body:has(.library-reader) nav.bottomnav,
html body.fz-lux:has(.library-reader) nav.bottomnav,
html.fiezel-ui-v6 body:has(.library-reader) nav.bottomnav,
html body:has(.library-reader) .bottomnav,
body:has(.library-reader) nav.bottomnav,
body:has(.library-reader) .bottomnav,
body.has-library-reader nav.bottomnav,
html:has(.library-reader) nav.bottomnav {
  display: none !important;
}

/* Learner flow goal cards */
.lf-goal,
button.lf-goal,
html body .lf-goal,
html body.fz-lux .lf-goal {
  background: #1E1E2E !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  color: #FFFFFF !important;
}
.lf-goal b,
html body .lf-goal b {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.lf-goal small,
html body .lf-goal small {
  color: #CBD5E1 !important;
  font-weight: 500 !important;
}
.lf-goal:hover,
html body .lf-goal:hover {
  background: #252538 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.lf-goal.is-selected,
html body .lf-goal.is-selected {
  background: rgba(255, 224, 46, 0.15) !important;
  border-color: #FFE02E !important;
}
.lf-goal.is-selected b,
html body .lf-goal.is-selected b {
  color: #FFE02E !important;
}
.lf-goal.is-selected small,
html body .lf-goal.is-selected small {
  color: #FEF08A !important;
}

/* ==========================================================================
   AUDIT FIX 8: JAPANESE KANA CHART HIGH CONTRAST DARK THEME
   ========================================================================== */
.ja-kana .kana-tabs {
  background: #141420 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
}
html body .ja-kana .kana-tab {
  color: #94A3B8 !important;
}
html body .ja-kana .kana-tab[aria-selected="true"] {
  background: #FFE02E !important;
  color: #101018 !important;
  font-weight: 800 !important;
}
.ja-kana .kana-heading {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.ja-kana .kana-cell {
  background: #181826 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}
.ja-kana .kana-cell b {
  color: #FFFFFF !important;
}
.ja-kana .kana-cell small {
  color: #FFE02E !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   AUDIT FIX 9: LEVEL PICKER MODAL CLEAN DAYLIGHT TACTILE (COMPACT & UNCLIPPED)
   ========================================================================== */
.modal-panel:has(.level-picker-grid),
body.fz-lux .modal-panel:has(.level-picker-grid),
#modalPanel:has(.level-picker-grid) {
  padding: 16px 16px 18px !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
}
.modal-panel:has(.level-picker-grid) h2 {
  font-size: 1.3rem !important;
  line-height: 1.2 !important;
  margin: 2px 0 4px !important;
}
.modal-panel:has(.level-picker-grid) > p {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  margin: 0 0 8px !important;
}
.level-picker-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 8px 0 !important;
}
.level-picker-card,
button.level-picker-card {
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 14px !important;
  color: #0F172A !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
  padding: 9px 11px !important;
  min-height: 0 !important;
  gap: 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
/* When 5 levels exist (JLPT N5–N1), let the 5th card span full width as a sleek horizontal row */
.level-picker-grid > .level-picker-card:last-child:nth-child(odd),
.level-picker-grid > button.level-picker-card:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.level-picker-grid > .level-picker-card:last-child:nth-child(odd) span {
  flex: 1 1 auto !important;
  margin: 0 4px !important;
}
.level-picker-grid > .level-picker-card:last-child:nth-child(odd) .level-trust-badge {
  margin-top: 0 !important;
  flex-shrink: 0 !important;
}
.level-picker-card strong {
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  line-height: 1.15 !important;
}
.level-picker-card span {
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
}
.level-picker-card.is-active {
  background: #FEF9C3 !important;
  border-color: #F59E0B !important;
  box-shadow: 0 2px 0 #D97706 !important;
}
.level-picker-card.is-active strong {
  color: #92400E !important;
}
.level-picker-card.is-active span {
  color: #78350F !important;
  font-weight: 700 !important;
}
.level-picker-card.is-locked {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  opacity: 0.55 !important;
  box-shadow: none !important;
}
.level-picker-card.is-locked strong,
.level-picker-card.is-locked span {
  color: #94A3B8 !important;
}
.level-trust-badge {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border-radius: 6px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  margin-top: 2px !important;
}
.level-trust-badge.is-verified {
  background: #D1FAE5 !important;
  color: #065F46 !important;
}
.level-exam-cta {
  background: #181826 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
  padding: 10px 12px !important;
  margin: 8px 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.level-exam-cta div {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.level-exam-cta b {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  line-height: 1.2 !important;
}
.level-exam-cta span {
  color: #CBD5E1 !important;
  font-size: 0.68rem !important;
  line-height: 1.25 !important;
}
.level-exam-cta button.primary,
#openLevelExam {
  background: #FFE02E !important;
  color: #101018 !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 0.78rem !important;
  min-height: 36px !important;
  width: auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.level-source-note {
  background: #141420 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #CBD5E1 !important;
  padding: 8px 10px !important;
  margin: 6px 0 8px !important;
  font-size: 0.72rem !important;
  line-height: 1.3 !important;
}
.level-source-note b {
  color: #FFE02E !important;
  font-weight: 800 !important;
}
.modal-panel:has(.level-picker-grid) .modal-actions {
  margin-top: 8px !important;
}
.modal-panel:has(.level-picker-grid) .modal-actions button {
  min-height: 40px !important;
  padding: 8px 16px !important;
}
.level-lock-note {
  background: #181826 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}
.level-lock-note b {
  color: #FFE02E !important;
}

/* ==========================================================================
   THAI TYPOGRAPHY SAFE-ZONE & ZERO-CLIPPING RULES (:lang(th))
   ========================================================================== */
:lang(th) body,
:lang(th) .app,
:lang(th) .fz-stadium-card,
:lang(th) .card,
:lang(th) .launch-card,
:lang(th) .modal-panel {
  font-family: 'Noto Sans Thai Looped', 'Plus Jakarta Sans', -apple-system, sans-serif !important;
}

:lang(th) .fz-greet-title,
:lang(th) .fz-clean-header-title,
:lang(th) .fz-vocab-word-title {
  font-family: 'Noto Sans Thai Looped', 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
}

:lang(th) .fz-greet-motivation,
:lang(th) .fz-clean-header-sub,
:lang(th) .fz-vocab-word-meaning,
:lang(th) .fz-vocab-word-example {
  font-family: 'Noto Sans Thai Looped', 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.55 !important;
  letter-spacing: normal !important;
}

:lang(th) .fz-stadium-cta-btn,
:lang(th) button.primary,
:lang(th) .btn-primary,
:lang(th) .fz-action-card b,
:lang(th) .fz-action-card span,
:lang(th) .launch-card b,
:lang(th) .launch-card small {
  font-family: 'Noto Sans Thai Looped', 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

:lang(th) .fz-stadium-chip,
:lang(th) .fz-vocab-kicker-tag,
:lang(th) .fz-vocab-level-tag,
:lang(th) .badge,
:lang(th) .chip {
  font-family: 'Noto Sans Thai Looped', 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  overflow: visible !important;
}

:lang(th) nav.bottomnav .nav span,
:lang(th) .bottomnav button span {
  font-family: 'Noto Sans Thai Looped', 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   ZERO VOID SPACE (Anti-Ruang Hampa) - Stop Scroll Snapping Into Empty Voids
   Eliminate stacked padding-bottom and artificial min-height that create
   empty black void space below cards across all panels and screens.
   ========================================================================== */
body,
body.fz-lux,
body.fz-stage-map .app,
body.fz-stage-quiz .app,
body.fz-stage-sl .app,
body.fz-stage-hub .app,
main.app,
.app,
.view-container,
#app {
  padding-bottom: 0 !important;
}

/* Screen containers: bottom padding exactly matches fixed bottombar (~60px) + safe-area breathing space */
#app > section,
#app > div,
#app > article,
main.app > section,
main.app > div,
section.fade,
.classroom-page,
.home-page,
.home-today,
.learner-flow-page,
.skills-lab-page,
.skills-page,
.writing-page,
.library-page,
.ask-page,
.progress-page,
.profile-page,
.settings-page,
.view-page,
.view-container {
  min-height: auto !important;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 12px)) !important;
  scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom, 12px)) !important;
}

/* Remove any nested padding-bottom on child wrappers */
.home-today .today-home-cockpit,
.today-home-cockpit,
.ch-student,
.classroom-shell,
.learner-flow-shell,
.paw-arena-shell,
.tutor-center-shell,
.teacher-shell-root,
.progress-container,
#socialHomeSlot,
.fz2-social,
.learning-launcher,
.fz-card-drawer,
.library-reader,
.fsl-feedback,
.grid,
#fzClassHub,
#fzLearnerFlow,
#fzPawArena,
#fzTeacherShell,
#fzTutorCenter {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Modals & popup panels: snug fit without endless trailing void */
.modal-panel,
.welcome-panel,
.notification-panel {
  max-height: min(780px, 90vh) !important;
  overflow-y: auto !important;
  padding-bottom: 18px !important;
  margin-bottom: 0 !important;
}

/* Penjelasan Guru & Diagnostic Clue (Midnight Navy / Travertine White - Zero Brown / Zero Maroon) */
.tutor-turn,
html body .tutor-turn,
.card .tutor-turn {
  margin-top: 14px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: #151520 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 4px solid #38BDF8 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="light"] .tutor-turn,
body:not(.theme-dark):not(.fz-lux) .card-light .tutor-turn,
body:not(.theme-dark):not(.fz-lux) .tutor-turn {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-left: 4px solid #0284C7 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.tutor-turn-head,
.card .tutor-turn-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #38BDF8 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .tutor-turn-head,
body:not(.theme-dark):not(.fz-lux) .card-light .tutor-turn-head,
body:not(.theme-dark):not(.fz-lux) .tutor-turn-head {
  color: #0369A1 !important;
}

.tutor-turn-face {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(56, 189, 248, 0.2) !important;
  color: #38BDF8 !important;
  flex-shrink: 0 !important;
}

[data-theme="light"] .tutor-turn-face,
body:not(.theme-dark):not(.fz-lux) .card-light .tutor-turn-face,
body:not(.theme-dark):not(.fz-lux) .tutor-turn-face {
  background: #E0F2FE !important;
  color: #0284C7 !important;
}

.tutor-diagnostic-clue {
  background: rgba(56, 189, 248, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  color: #F8FAFC !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  margin: 6px 0 10px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.tutor-diagnostic-clue svg {
  width: 17px !important;
  height: 17px !important;
  color: #38BDF8 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

[data-theme="light"] .tutor-diagnostic-clue,
body:not(.theme-dark):not(.fz-lux) .card-light .tutor-diagnostic-clue,
body:not(.theme-dark):not(.fz-lux) .tutor-diagnostic-clue {
  background: #F0F9FF !important;
  border-color: #BAE6FD !important;
  color: #0C4A6E !important;
}

.tutor-turn-say,
.card .tutor-turn-say {
  margin: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: #CBD5E1 !important;
}

[data-theme="light"] .tutor-turn-say,
body:not(.theme-dark):not(.fz-lux) .card-light .tutor-turn-say,
body:not(.theme-dark):not(.fz-lux) .tutor-turn-say {
  color: #475569 !important;
}

.tutor-turn-ask,
.card .tutor-turn-ask {
  margin: 8px 0 0 !important;
  font-size: 0.94rem !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
  color: #FBBF24 !important;
}

[data-theme="light"] .tutor-turn-ask,
body:not(.theme-dark):not(.fz-lux) .card-light .tutor-turn-ask,
body:not(.theme-dark):not(.fz-lux) .tutor-turn-ask {
  color: #B45309 !important;
}

.tutor-turn-actions {
  margin-top: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.tutor-stuck,
html body .tutor-stuck,
.card .tutor-stuck {
  min-height: 38px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #CBD5E1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: all .15s ease !important;
  text-decoration: none !important;
}

.tutor-stuck svg {
  width: 15px !important;
  height: 15px !important;
  color: #94A3B8 !important;
}

.tutor-stuck:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="light"] .tutor-stuck,
body:not(.theme-dark):not(.fz-lux) .card-light .tutor-stuck,
body:not(.theme-dark):not(.fz-lux) .tutor-stuck {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}

[data-theme="light"] .tutor-stuck:hover,
body:not(.theme-dark):not(.fz-lux) .card-light .tutor-stuck:hover,
body:not(.theme-dark):not(.fz-lux) .tutor-stuck:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

/* Compact question card & prompt (Reduced by >50% vertical footprint) */
.quiz-bubble,
.speech-bubble {
  padding: 8px 12px !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
}

.quiz-bubble .question-instruction,
.quiz-stage .question-instruction,
.speech-bubble .question-instruction,
.quiz-shell .question-instruction,
.card .question-instruction,
.question .question-instruction,
.question-instruction {
  display: inline-block !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  line-height: 1.25 !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  background: rgba(148, 163, 184, 0.12) !important;
}

.quiz-bubble .question-main,
.quiz-stage .question-main,
.speech-bubble .question-main,
.quiz-shell .question-main,
.card .question-main,
.question .question-main,
.question-main {
  display: block !important;
  font-size: clamp(0.92rem, 0.88rem + 0.3vw, 1.02rem) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}


.tutor-diagnostic-clue,
.tutor-turn .tutor-diagnostic-clue,
.card .tutor-diagnostic-clue,
#tutorTurn .tutor-diagnostic-clue,
.tutor-diagnostic-clue {
  background: #F0F9FF !important;
  border: 1px solid #BAE6FD !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: #0369A1 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 8px 0 12px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.tutor-diagnostic-clue span,
.tutor-turn .tutor-diagnostic-clue span,
.card .tutor-diagnostic-clue span,
.card div > .tutor-diagnostic-clue span,
#tutorTurn .tutor-diagnostic-clue span {
  color: #0369A1 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.tutor-diagnostic-clue svg,
.tutor-turn .tutor-diagnostic-clue svg {
  width: 18px !important;
  height: 18px !important;
  color: #0284C7 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

body.scene-night .card .tutor-diagnostic-clue,
body.scene-night #tutorTurn .tutor-diagnostic-clue,
body.scene-night .tutor-diagnostic-clue,
body.theme-dark .card .tutor-diagnostic-clue,
body.theme-dark #tutorTurn .tutor-diagnostic-clue,
body.theme-dark .tutor-diagnostic-clue {
  background: rgba(14, 165, 233, 0.16) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #E0F2FE !important;
}

body.scene-night .tutor-diagnostic-clue span,
body.scene-night #tutorTurn .tutor-diagnostic-clue span,
body.scene-night .card .tutor-diagnostic-clue span,
body.theme-dark .tutor-diagnostic-clue span,
body.theme-dark #tutorTurn .tutor-diagnostic-clue span,
body.theme-dark .card .tutor-diagnostic-clue span {
  color: #E0F2FE !important;
}

/* ==========================================================================
   WARM CREAM & HIGH-COMFORT FLASHCARD THEME (Spacious & Simple Edition)
   Latar cerah cream, tipografi besar & tajam, tanpa ruang kosong terbuang.
   ========================================================================== */
.card-flashcard,
.card.card-flashcard,
html body:not(.fz-teacher-mode) .card.card-flashcard,
body.fz-lux .card.card-flashcard {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: min(520px, 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: calc(100vh - 145px) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.flashcard {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: clamp(380px, 56vh, 540px) !important;
  min-height: 360px !important;
  cursor: pointer;
  perspective: 1400px;
  -webkit-perspective: 1400px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  border: none !important;
  border-radius: 28px !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Card Deck Layering: disabled to prevent static card penetration in 3D flip */
.flashcard::before,
.flashcard::after {
  display: none !important;
  content: none !important;
}

.flash-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}

.flashcard.flipped .flash-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.flash-face,
.flashcard .flash-face,
.card-flashcard .flash-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  border-radius: 28px !important;
  padding: 26px 22px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #FFFDF8 !important;
  background: linear-gradient(165deg, #FFFFFF 0%, #FFFDF5 55%, #FAF4E8 100%) !important;
  border: 2px solid #EDE2CE !important;
  box-shadow: 0 16px 36px -10px rgba(135, 105, 65, 0.14), 0 4px 14px rgba(135, 105, 65, 0.06), inset 0 1.5px 0 rgba(255, 255, 255, 0.95) !important;
  color: #1E1B18 !important;
  box-sizing: border-box;
  overflow: visible !important;
  transition: opacity 0.22s ease;
}

@media(min-width: 640px) {
  .flash-face, .flashcard .flash-face, .card-flashcard .flash-face {
    padding: 30px 28px !important;
  }
}
@media(max-width: 380px) {
  .flash-face, .flashcard .flash-face, .card-flashcard .flash-face {
    padding: 20px 16px !important;
  }
}
@media(max-height: 560px) {
  .card-flashcard,
  .card.card-flashcard,
  html body:not(.fz-teacher-mode) .card.card-flashcard,
  body.fz-lux .card.card-flashcard {
    min-height: calc(100vh - 90px) !important;
    gap: 8px !important;
  }
  .flashcard {
    height: clamp(260px, 50vh, 340px) !important;
    min-height: 240px !important;
  }
  .flash-face, .flashcard .flash-face, .card-flashcard .flash-face {
    padding: 14px 16px !important;
  }
}

.flash-front {
  transform: rotateY(0deg) translateZ(1px);
  -webkit-transform: rotateY(0deg) translateZ(1px);
  justify-content: space-between;
}

.flashcard:not(.flipped) .flash-back {
  pointer-events: none !important;
}
.flashcard.flipped .flash-front {
  pointer-events: none !important;
}

.flash-front-main {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* HUGE Front Word Typography */
.flash-front .word,
.flashcard .word,
.card-flashcard .word,
html body:not(.fz-teacher-mode) .flash-front h2.word,
html body:not(.fz-teacher-mode) .flashcard h2.word,
html body:not(.fz-teacher-mode) .card-flashcard h2.word {
  font-family: var(--fz-heading, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: clamp(3.2rem, 11vw, 4.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin: 8px 0 2px !important;
  color: #1A1715 !important;
  word-break: break-word;
}

/* Large Phonetic */
.flash-front .phonetic,
.flashcard .phonetic {
  font-size: clamp(1.25rem, 4.4vw, 1.6rem) !important;
  color: #7D6B5A !important;
  font-weight: 600 !important;
  margin-top: 2px;
}

/* Audio button inside card */
.flash-audio-btn {
  margin-top: 12px !important;
  background: #FAF4E8 !important;
  border: 1.5px solid #E5D7C0 !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #382E25 !important;
  box-shadow: 0 3px 10px rgba(135, 105, 65, 0.08) !important;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.flash-audio-btn:hover {
  background: #F3EBD8 !important;
  transform: scale(1.02);
}
.flash-audio-btn:active {
  transform: scale(0.98);
}
.flash-front-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 12px 0 6px !important;
}
.flash-front-actions .flash-audio-btn {
  margin: 0 !important;
  padding: 10px 22px !important;
}

.flash-back-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 380px !important;
  margin: 12px 0 6px !important;
  box-sizing: border-box !important;
}
.flash-back-actions .flash-audio-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 10px 14px !important;
  font-size: 0.88rem !important;
  white-space: nowrap !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* Flip Hints */
.flash-flip-hint,
.flash-front .flash-flip-hint,
.flash-back .flash-flip-hint,
.flashcard .flash-flip-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #8E7B6C !important;
  margin: 8px 0 0;
}

.flash-flip-hint svg,
.flash-front .flash-flip-hint svg,
.flash-back .flash-flip-hint svg {
  width: 14px;
  height: 14px;
  stroke: #8E7B6C !important;
}

/* Chips on Front */
.chips-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.flash-front .chip-level,
.flashcard .chip-level {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border: 1.5px solid #FCD34D !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
}

.flash-front .chip-cat,
.flashcard .chip-cat {
  background: #F5EFEB !important;
  color: #6B5E54 !important;
  border: 1.5px solid #E5D9CE !important;
  font-size: 0.88rem !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
}

.flash-front .chip-cat b,
.flashcard .chip-cat b {
  color: #2D241E !important;
  font-weight: 800 !important;
}

.flash-face .eyebrow,
.flashcard .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FEF3C7 !important;
  color: #92400E !important;
  border: 1.5px solid #FCD34D !important;
  font-weight: 800 !important;
  font-size: 0.84rem !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px 0 !important;
}

/* Back Face */
.flash-back {
  transform: rotateY(180deg) translateZ(1px);
  -webkit-transform: rotateY(180deg) translateZ(1px);
  justify-content: space-between;
}

.flash-front-main {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
}

.flash-back-main {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
}

.flash-kicker,
.flashcard .flash-kicker {
  display: block;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: #B45309 !important;
  margin: 0 !important;
}

/* HUGE Back Meaning */
.flash-meaning,
.flashcard .flash-meaning,
.card-flashcard .flash-meaning,
html body:not(.fz-teacher-mode) .flash-back h3.flash-meaning,
html body:not(.fz-teacher-mode) .flashcard h3.flash-meaning,
html body:not(.fz-teacher-mode) .card-flashcard h3.flash-meaning {
  font-family: var(--fz-heading, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: clamp(2.4rem, 8vw, 3.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.18 !important;
  color: #1A1715 !important;
  margin: 0 !important;
  text-align: center !important;
  word-break: break-word;
}

/* Large Example Box */
.flash-example-box,
.flashcard .flash-example-box {
  width: 100% !important;
  max-width: 440px !important;
  background: #FDF9F0 !important;
  border: 1.5px solid #EADECA !important;
  border-radius: 20px !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  text-align: center;
  box-sizing: border-box;
  box-shadow: inset 0 1px 3px rgba(120, 95, 60, 0.04) !important;
}

.flash-example-en,
.flashcard .flash-example-en {
  font-size: 1.15rem !important;
  line-height: 1.48 !important;
  color: #1E293B !important;
  font-style: italic !important;
  font-weight: 600 !important;
  margin: 0;
}

.flash-example-id,
.flashcard .flash-example-id {
  font-size: 1.02rem !important;
  line-height: 1.42 !important;
  color: #645649 !important;
  font-weight: 500 !important;
  margin: 6px 0 0 !important;
}

/* Japanese Display Toggles inside Flashcard */
.flash-face .ja-toggle-btn {
  background: #F5EFEB !important;
  border-color: #E2D5C8 !important;
  color: #5C4E43 !important;
}
.flash-face .ja-toggle-btn.active {
  background: #FDE68A !important;
  border-color: #F59E0B !important;
  color: #92400E !important;
}

/* Mastery Buttons below Flashcard — ONLY 2 clean, large, tactile decision buttons */
.flash-mastery-bar {
  width: 100% !important;
  max-width: 520px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}

.flash-btn-learning,
.flash-btn-mastered {
  min-height: 56px !important;
  border-radius: 20px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.flash-btn-learning {
  background: #FFFFFF !important;
  border: 2px solid #E5D9CE !important;
  color: #2D241E !important;
  box-shadow: 0 4px 14px rgba(120, 95, 60, 0.08) !important;
}
.flash-btn-learning:hover {
  background: #FAF5EA !important;
  transform: translateY(-1px);
}
.flash-btn-learning:active {
  transform: scale(0.98);
}

.flash-btn-mastered {
  background: #FFD026 !important;
  border: 2px solid #E5A800 !important;
  color: #0F172A !important;
  box-shadow: 0 6px 18px rgba(255, 208, 38, 0.4) !important;
}
.flash-btn-mastered:hover {
  box-shadow: 0 8px 22px rgba(255, 208, 38, 0.5) !important;
  transform: translateY(-1px);
}
.flash-btn-mastered:active {
  transform: scale(0.98);
}
.topline #aiWord,
.topline .flash-ai-btn {
  width: auto !important;
  margin-top: 0 !important;
  padding: 6px 14px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

/* ==========================================================================
   POLISH: GLOSSY WRITING HERO CARD & BADGE
   ========================================================================== */
.skill-page-hero.skill-writing,
.skill-page-hero,
.skill-writing {
  background: linear-gradient(145deg, #181926 0%, #0F101A 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  padding: 24px 20px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  position: relative !important;
  overflow: hidden !important;
}

.skill-page-hero.skill-writing::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.skill-page-hero .skill-badge,
.skill-writing .skill-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #FFE02E 0%, #F59E0B 100%) !important;
  border: 1.5px solid #FEF08A !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  margin-bottom: 12px !important;
  width: fit-content !important;
}

.skill-page-hero h1,
.skill-writing h1 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  margin: 4px 0 8px 0 !important;
  letter-spacing: -0.02em !important;
}

.skill-page-hero p,
.skill-writing p {
  color: rgba(255, 255, 255, 0.72) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin-bottom: 16px !important;
}

html body section.writing-page .skill-page-hero button.active-level-control,
html body .skill-page-hero button.active-level-control,
html body .skill-writing button.active-level-control {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 18px !important;
  padding: 12px 18px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-top: 14px !important;
  cursor: pointer !important;
}

html body section.writing-page .skill-page-hero button.active-level-control span,
html body .skill-page-hero button.active-level-control span {
  color: #CBD5E1 !important;
  -webkit-text-fill-color: #CBD5E1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

html body section.writing-page .skill-page-hero button.active-level-control strong,
html body .skill-page-hero button.active-level-control strong {
  color: #FFE02E !important;
  -webkit-text-fill-color: #FFE02E !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body section.writing-page .skill-page-hero button.active-level-control small,
html body .skill-page-hero button.active-level-control small {
  background: #FFE02E !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 2px 8px rgba(255, 224, 46, 0.4) !important;
}

/* ==========================================================================
   POLISH: MINIMALIST PLACEMENT TEST DIAGNOSTIC RESULTS
   ========================================================================== */
.result-stage .result-level-scope,
.result-stage .result-bands small,
.result-stage .outcome-line,
.result-stage .srl-line,
.result-stage .tutor-line,
.result-stage .tutor-report,
.result-stage p.muted,
.result-stage .session-summary,
.result-stage .measure-review,
.result-stage .map-note,
.result-stage h3 {
  display: none !important;
}

.result-stage .result-level {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 20px 20px !important;
  margin: 16px 0 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.result-stage .result-level-mark {
  color: #94A3B8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: block !important;
}

.result-stage .result-level-name {
  color: #FFE02E !important;
  -webkit-text-fill-color: #FFE02E !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  display: block !important;
  margin: 6px 0 2px 0 !important;
}

.result-stage .result-level-desc {
  color: #E2E8F0 !important;
  -webkit-text-fill-color: #E2E8F0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: block !important;
}

.result-stage .result-bands {
  margin: 16px 0 !important;
}

.result-stage .result-band-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}

.result-stage .band-chip {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 9999px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.result-stage .band-chip.is-active,
.result-stage .band-chip.is-pass {
  background: #FEF3C7 !important;
  border-color: #F59E0B !important;
  color: #92400E !important;
  -webkit-text-fill-color: #92400E !important;
}

/* ==========================================================================
   POLISH: VIBRANT LUXURY PRASASTI BADGES
   ========================================================================== */
.prasasti-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.prasasti-badge,
.prasasti-badge.is-locked,
.prasasti-badge.is-earned {
  opacity: 1 !important;
  background: linear-gradient(145deg, #1C1B2A 0%, #12111E 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  padding: 18px 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
}

.prasasti-badge .prasasti-icon,
.prasasti-badge.is-locked .prasasti-icon,
.prasasti-badge.is-earned .prasasti-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #383556 0%, #201E35 100%) !important;
  border: 2px solid rgba(255, 224, 46, 0.45) !important;
  box-shadow: 0 4px 16px rgba(255, 224, 46, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
  display: grid !important;
  place-items: center !important;
  color: #FFE02E !important;
  margin-bottom: 4px !important;
}

.prasasti-badge .prasasti-icon svg,
.prasasti-badge.is-locked .prasasti-icon svg,
.prasasti-badge.is-earned .prasasti-icon svg {
  width: 28px !important;
  height: 28px !important;
  color: #FFE02E !important;
  fill: #FFE02E !important;
  filter: drop-shadow(0 2px 6px rgba(255, 224, 46, 0.5)) !important;
}

.prasasti-badge b,
.prasasti-badge.is-locked b,
.prasasti-badge.is-earned b {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

.prasasti-badge .prasasti-hint,
.prasasti-badge.is-locked .prasasti-hint,
.prasasti-badge.is-earned .prasasti-hint {
  color: #CBD5E1 !important;
  -webkit-text-fill-color: #CBD5E1 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}