/* ==========================================================================
   FIEZEL · features/ui/fiezel-tactile-clay.css
   TACTILE CLAY DESIGN SYSTEM — OFFICIAL PWA RUNTIME OVERHAUL
   Physical 3D bevels, daylight travertine canvas, Solar Gold tactile CTA,
   emerald KelasKu cards, obsidian signature cards, and responsive haptic states.
   ========================================================================== */

:root {
  /* Base Canvas */
  --bg-stage:         #E5ECF6;
  --bg-canvas:        #FAF8F5;

  /* Clay Surfaces */
  --card-surface:     #FFFFFF;
  --card-border:      #E2E8F0;
  --card-bevel:       #CBD5E1;
  --card-shadow:      0 6px 0 var(--card-bevel), 0 14px 28px rgba(15, 23, 42, 0.05);

  /* Core Brand: Fiezel Solar Gold */
  --gold-primary:     #FFD21E;
  --gold-gradient:    linear-gradient(180deg, #FFE054 0%, #FFB703 100%);
  --gold-bevel:       #D97706;
  --gold-shadow:      0 5px 0 var(--gold-bevel), 0 12px 24px rgba(255, 183, 3, 0.35);
  --gold-text:        #2E1800;

  /* Typography */
  --text-main:        #0F172A;
  --text-sub:         #64748B;
  --text-muted:       #94A3B8;
  --font-sans:        'FZ Plus Jakarta Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:        'JetBrains Mono', monospace;

  /* Functional Accents */
  --flame-orange:     #FF5E1E;
  --flame-bevel:      #C2410C;
  --emerald-green:    #22C55E;
  --emerald-bevel:    #15803D;
  --sky-blue:         #0284C7;
  --sky-bevel:        #0369A1;
  --crimson-hp:       #EF4444;
  --crimson-bevel:    #B91C1C;

  /* Signature Dark Card */
  --card-black:       #0B0F17;
  --card-black-elev:  #131926;
  --yellow-bright:    #FFE600;
  --yellow-warm:      #FFD21E;
  --shadow-ivory:     #E2D7BC;

  /* KelasKu Official Signature Emerald */
  --kelasku-emerald:        #1F7A63;
  --kelasku-emerald-dark:   #166052;
  --kelasku-emerald-deep:   #0F372D;
  --kelasku-emerald-soft:   #DDEFE7;
  --kelasku-emerald-border: #A9D5CA;
  --kelasku-emerald-bevel:  #7CBBAE;

  /* Physics */
  --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 1. GLOBAL CANVAS & TYPOGRAPHY */
html, body,
main.app, .app, #app,
.home-today, .home-page,
.classroom-page, .progress-page, .profile-page,
.skills-lab-page, .skills-page, .writing-page,
.library-page, .ask-page, .settings-page,
.learner-flow-page, .view-page, .view-container {
  background-color: var(--bg-canvas) !important;
  color: var(--text-main) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* 2. CLAY CARDS WITH 3D BEVEL */
.card, .home-card, .today-card, .fz-stadium-card,
.card-surface, .hero-card, .skill-card, .classroom-card,
.quiz-card, .feedback-card, .stat-card, .library-card,
.arena-card, .proctor-card, .class-bar, .fz-aurora-card {
  background: var(--card-surface) !important;
  border: 2px solid var(--card-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--card-shadow) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.card:hover, .home-card:hover, .fz-stadium-card:hover {
  border-color: #CBD5E1 !important;
}

/* 3. SIGNATURE DARK CARDS */
.fz-card-dark, .card-black, .streak-card,
.fz-stadium-card.fz-card-dark {
  background: var(--card-black) !important;
  border: 2px solid #1E293B !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 0 var(--shadow-ivory), 0 14px 28px rgba(11, 15, 23, 0.2) !important;
  color: #FFFFFF !important;
}

.fz-card-dark .fz-clean-header-title,
.fz-card-dark h3, .fz-card-dark b {
  color: #FFFFFF !important;
}

.fz-card-dark .fz-clean-header-sub,
.fz-card-dark p, .fz-card-dark small {
  color: #94A3B8 !important;
}

.fz-vocab-kicker-tag.is-dark-tag {
  color: var(--yellow-bright) !important;
  font-weight: 800 !important;
}

/* 4. KELASKU EMERALD CARDS */
.kelasku-card, .ch-task-card,
.ch-assignment-tile {
  background: #FFFFFF !important;
  border: 2px solid var(--kelasku-emerald-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 0 var(--kelasku-emerald-bevel), 0 10px 20px rgba(31, 122, 99, 0.06) !important;
}

.ch-student {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 14px calc(96px + env(safe-area-inset-bottom)) !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.kelasku-wordmark {
  color: var(--kelasku-emerald) !important;
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
}

/* 5. TACTILE 3D PRIMARY ACTION BUTTONS (Solar Gold Clay) */
.primary, .btn-primary, .fz-hero-cta,
.fz-aurora-cta-btn, .token-submit-btn,
.quiz-submit-btn, .btn-sim-progress,
.home-hero-cta, button.primary {
  background: var(--gold-gradient) !important;
  border: 2px solid var(--gold-bevel) !important;
  border-radius: 18px !important;
  color: var(--gold-text) !important;
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: var(--gold-shadow) !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
  text-decoration: none !important;
}

.primary:hover, .btn-primary:hover, .fz-hero-cta:hover {
  filter: brightness(1.03) !important;
}

.primary:active, .btn-primary:active, .fz-hero-cta:active,
.fz-aurora-cta-btn:active, .token-submit-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 var(--gold-bevel), 0 4px 8px rgba(255, 183, 3, 0.2) !important;
}

.primary:disabled, .token-submit-btn:disabled,
button.primary:disabled {
  background: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
  color: #94A3B8 !important;
  box-shadow: 0 3px 0 #CBD5E1 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* 6. TACTILE 3D SECONDARY BUTTONS */
button:not(.primary):not(.nav):not(.token-chip):not(.fz-aurora-audio-btn):not(.option-btn):not(.fz-i):not(.brand-button):not(.icon-button):not(.course-switch-btn):not(.fzb-bug):not(.fzb-exit):not(.kelasku-strip-btn):not(.fz-drawer-toggle):not(.close-btn):not(#modalClose):not(.hero-cta-btn):not(.bug-raid-btn):not(.class-btn-3d):not(.fz-kawan-cta):not(.audio-btn-3d):not(.today-cta-soft):not(.target-lang-chip):not(.btn-class-selector):not(.ch-segbar-btn):not(.ch-tab):not(.progress-tab):not(.active-level-control):not(.ch-btn-kerjakan):not(.ch-btn-mulai):not(.ch-btn-tuntas):not(.setup-link):not(.level-picker-card):not(.jlpt-opt-btn):not(.fsl-option):not(.fsl-exit-btn):not(.listening-close-btn):not(.jlpt-primary-play-btn):not(.jlpt-jees-chip):not(.jlpt-speed-chip):not(.jlpt-fb-next-btn):not(.jlpt-fb-key-btn):not(.jlpt-tab-chip):not(.fsl-play-hero):not([data-next]):not(.fsl-primary):not(.fsl-play-btn):not([class*="fzc-"]),
.btn:not(.primary):not(.hero-cta-btn):not(.bug-raid-btn):not(.class-btn-3d):not(.fz-kawan-cta):not(.target-lang-chip):not(.ch-btn-kerjakan):not(.ch-btn-mulai):not(.ch-btn-tuntas):not(.setup-link):not(.level-picker-card):not(.jlpt-opt-btn):not(.fsl-option):not(.fsl-exit-btn):not(.listening-close-btn):not(.jlpt-primary-play-btn):not(.jlpt-jees-chip):not(.jlpt-speed-chip):not(.jlpt-fb-next-btn):not(.jlpt-fb-key-btn):not(.jlpt-tab-chip):not(.fsl-play-hero):not([data-next]):not(.fsl-primary):not(.fsl-play-btn):not([class*="fzc-"]) {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 0 var(--card-bevel) !important;
  color: var(--text-main) !important;
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

button:not(.primary):not(.nav):not(.token-chip):not(.fz-aurora-audio-btn):not(.option-btn):not(.fz-i):not(.brand-button):not(.icon-button):not(.course-switch-btn):not(.fzb-bug):not(.fzb-exit):not(.kelasku-strip-btn):not(.fz-drawer-toggle):not(.close-btn):not(#modalClose):not(.hero-cta-btn):not(.bug-raid-btn):not(.class-btn-3d):not(.fz-kawan-cta):not(.audio-btn-3d):not(.today-cta-soft):not(.target-lang-chip):not(.btn-class-selector):not(.ch-segbar-btn):not(.ch-tab):not(.progress-tab):not(.active-level-control):not(.ch-btn-kerjakan):not(.ch-btn-mulai):not(.ch-btn-tuntas):not(.setup-link):not(.level-picker-card):not(.jlpt-opt-btn):not(.fsl-option):not(.fsl-exit-btn):not(.listening-close-btn):not(.jlpt-primary-play-btn):not(.jlpt-jees-chip):not(.jlpt-speed-chip):not(.jlpt-fb-next-btn):not(.jlpt-fb-key-btn):not(.jlpt-tab-chip):not(.fsl-play-hero):not([data-next]):not(.fsl-primary):not(.fsl-play-btn):not([class*="fzc-"]):active,
.btn:not(.primary):not(.hero-cta-btn):not(.bug-raid-btn):not(.class-btn-3d):not(.fz-kawan-cta):not(.target-lang-chip):not(.ch-btn-kerjakan):not(.ch-btn-mulai):not(.ch-btn-tuntas):not(.setup-link):not(.level-picker-card):not(.jlpt-opt-btn):not(.fsl-option):not(.fsl-exit-btn):not(.listening-close-btn):not(.jlpt-primary-play-btn):not(.jlpt-jees-chip):not(.jlpt-speed-chip):not(.jlpt-fb-next-btn):not(.jlpt-fb-key-btn):not(.jlpt-tab-chip):not(.fsl-play-hero):not([data-next]):not(.fsl-primary):not(.fsl-play-btn):not([class*="fzc-"]):active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 var(--card-bevel) !important;
}

#accountSheet .setup-link,
button.setup-link,
.setup-link {
  display: block !important;
  width: 100% !important;
  margin: 6px 0 !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #0284C7 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transform: none !important;
  box-sizing: border-box !important;
}
#accountSheet .setup-link:hover,
button.setup-link:hover,
.setup-link:hover {
  text-decoration: underline !important;
  background: rgba(2, 132, 199, 0.06) !important;
}

.topbar .brand-button,
button.brand-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.topbar .brand-button:active {
  transform: scale(0.96) !important;
  box-shadow: none !important;
}

/* 7. TACTILE 3D AUDIO BUTTONS */
.fz-aurora-audio-btn, .audio-btn-3d,
.audio-play-btn, .audio-btn {
  background: #FFFFFF !important;
  border: 2px solid #BAE6FD !important;
  border-radius: 14px !important;
  color: var(--sky-blue) !important;
  box-shadow: 0 4px 0 #BAE6FD !important;
  cursor: pointer !important;
  transition: all 0.12s !important;
}

.fz-aurora-audio-btn:active, .audio-btn-3d:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #BAE6FD !important;
}

/* 8. BUTTER YELLOW & GLOSSY STAY-FIXED DOCK (FIEZEL LIQUID UITabBar) */
html body nav.bottomnav,
html body .bottomnav,
html body.fz-lux nav.bottomnav,
html body.fz-lux .bottomnav,
html body.fz-lang-ja nav.bottomnav,
html body.fz-lang-ja .bottomnav,
html body:has(.home-today) nav.bottomnav,
html body:has(.home-today) .bottomnav,
.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;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(180deg, #FFFDF0 0%, #FEF08A 100%) !important;
  border-radius: 0 !important;
  border: none !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.95) !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;
  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;
  view-transition-name: bottomnav !important;
  overflow: visible !important;
}
::view-transition-old(bottomnav),
::view-transition-new(bottomnav) {
  animation: none !important;
  mix-blend-mode: normal !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;
}

html body.fz-lesson-mode nav.bottomnav,
html body.fz-lesson-mode .bottomnav,
html body.fz-stage-quiz nav.bottomnav,
html body.fz-stage-quiz .bottomnav,
html body.fsl-session-active nav.bottomnav,
html body.fsl-session-active .bottomnav,
html body.fz-stage-sl.fsl-session-active nav.bottomnav,
html body.fz-stage-sl.fsl-session-active .bottomnav,
html body.fz-stage-sl nav.bottomnav,
html body.fz-stage-sl .bottomnav,
html body:has(#speakingListeningRoot .fsl-card-listening) nav.bottomnav,
html body:has(#speakingListeningRoot .fsl-card-listening) .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(.card-flashcard) nav.bottomnav,
html body:has(.card-flashcard) .bottomnav,
html body:has(.quiz-shell) nav.bottomnav,
html body:has(.quiz-shell) .bottomnav,
body.fz-lesson-mode .bottomnav,
body.fz-stage-quiz .bottomnav,
body.fsl-session-active .bottomnav,
body.fz-stage-sl.fsl-session-active .bottomnav,
body.fz-stage-sl .bottomnav,
body:has(#speakingListeningRoot .fsl-card-listening) .bottomnav,
body:has(.fsl-card-listening) .bottomnav,
body:has(.fsl-feedback) .bottomnav,
body:has(.card-flashcard) .bottomnav,
body:has(.quiz-shell) .bottomnav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body nav.bottomnav .nav,
html body .bottomnav .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;
  border-radius: 9999px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #78350F !important;
  cursor: pointer !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  transform: none !important;
  transition: color 0.18s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  animation: none !important;
}

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

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

html body nav.bottomnav .nav .fz-i,
html body .bottomnav .nav .fz-i,
.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;
}

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

html body nav.bottomnav .nav span,
html body .bottomnav .nav span,
.bottomnav .nav span {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: #78350F !important;
  opacity: 0.75 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  max-width: 100% !important;
  margin-top: 1px !important;
  transition: color 0.18s ease, font-weight 0.18s ease, opacity 0.18s ease !important;
}

html body nav.bottomnav .nav.active,
html body .bottomnav .nav.active,
html body:has(.home-today) .bottomnav .nav.active,
.bottomnav .nav.active {
  color: #78350F !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* Fallback before pill synchronizes */
.bottomnav:not(.pill-synced) .nav.active {
  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;
}

html body nav.bottomnav .nav.active .fz-i,
html body .bottomnav .nav.active .fz-i,
.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;
}

html body nav.bottomnav .nav.active svg,
html body .bottomnav .nav.active svg,
.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;
}

html body nav.bottomnav .nav.active span,
html body .bottomnav .nav.active span,
.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 emerald active */
html body nav.bottomnav .nav[data-view="classroom"].active,
html body .bottomnav .nav[data-view="classroom"].active,
.bottomnav .nav[data-view="classroom"].active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #065F46 !important;
}

html body nav.bottomnav .nav[data-view="classroom"].active .fz-i,
html body .bottomnav .nav[data-view="classroom"].active .fz-i,
.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;
}

html body nav.bottomnav .nav[data-view="classroom"].active svg,
html body .bottomnav .nav[data-view="classroom"].active svg,
.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;
}

html body nav.bottomnav .nav[data-view="classroom"].active span,
html body .bottomnav .nav[data-view="classroom"].active span,
.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;
}


/* 9. GRAMMAR COACH ENGINE INTEGRATION (Token Rail & Ruby Gloss) */
.token-rail {
  background: #F8FAFC !important;
  border: 2px dashed #CBD5E1 !important;
  border-radius: 20px !important;
  min-height: 72px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03) !important;
}

.token-bank {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 0 !important;
}

.token-chip {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 0 var(--card-bevel) !important;
  color: #0F172A !important;
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.token-chip:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--card-bevel) !important;
}

.token-chip.in-rail {
  background: #FEF3C7 !important;
  border-color: #FCD34D !important;
  box-shadow: 0 4px 0 #FBBF24 !important;
  color: #78350F !important;
}

/* Ruby Gloss: Gloss Bahasa Indonesia / Terjemahan tegak tepat DI ATAS kata Inggris, fit dalam kartu tanpa offset */
.token-chip,
.token-chip.has-gloss,
.bank-token,
.bank-token.has-gloss,
.puzzle-tile,
.puzzle-placed-chip {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 6px 14px !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.token-gloss,
.bank-gloss {
  display: block !important;
  order: 1 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0284C7 !important;
  line-height: 1.15 !important;
  margin-bottom: 2px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.token-word,
.bank-word,
.tok-text {
  display: block !important;
  order: 2 !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* Vacant Slot Insertion */
.gx-vacant-slot {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 12px !important;
  background: #FEF3C7 !important;
  border: 2px dashed #F59E0B !important;
  border-radius: 14px !important;
  color: #B45309 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* Scaffolding Hint */
.gx-hint {
  background: #FFFDF5 !important;
  border: 2px solid #FCD34D !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: 0 4px 0 #FBBF24 !important;
  margin: 10px 0 !important;
}

.gx-hint-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  color: #B45309 !important;
  margin-bottom: 4px !important;
}

.gx-hint-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #78350F !important;
  margin-bottom: 2px !important;
}

.gx-hint-body {
  font-size: 12.5px !important;
  color: #92400E !important;
  line-height: 1.4 !important;
}

/* L1 Contrast Card: Beda dengan Bahasa Indonesia */
.gx-contrast-card {
  background: #F0FDF4 !important;
  border: 2px solid #BBF7D0 !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: 0 4px 0 #86EFAC !important;
  margin: 10px 0 !important;
}

.gx-contrast-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #15803D !important;
  margin-bottom: 4px !important;
}

.gx-contrast-body {
  font-size: 12.5px !important;
  color: #166534 !important;
  line-height: 1.4 !important;
}

/* Pin Formula Button */
.gx-pin-formula-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: #FEF3C7 !important;
  border: 1.5px solid #FCD34D !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 0 #FBBF24 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #78350F !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  transition: all 0.1s ease !important;
}

.gx-pin-formula-btn:active {
  transform: translateY(2px) !important;
  box-shadow: none !important;
}

.gx-pin-formula-btn.pinned {
  background: #D1FAE5 !important;
  border-color: #6EE7B7 !important;
  box-shadow: 0 2px 0 #34D399 !important;
  color: #065F46 !important;
}

/* 10. QUIZ OPTION BUTTONS */
.option-btn, .quiz-option, .choice-btn {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 0 var(--card-bevel) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.option-btn:hover, .choice-btn:hover {
  border-color: #CBD5E1 !important;
}

.option-btn:active, .choice-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 var(--card-bevel) !important;
}

.option-btn.is-selected, .quiz-option.is-selected {
  background: #FEF3C7 !important;
  border-color: #F59E0B !important;
  box-shadow: 0 4px 0 #D97706 !important;
  color: #78350F !important;
}

/* 11. LUXURY TACTILE CLAY WELCOME BAR */
.fz-welcome-header.tactile-welcome-bar {
  margin: 6px 0 16px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.tactile-welcome-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 10px !important;
}

.tactile-welcome-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.tactile-kicker-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tactile-kicker-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #22C55E !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.7) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.tactile-kicker-text {
  font-family: 'FZ Plus Jakarta Sans', var(--font-sans), sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #64748B !important;
  text-transform: uppercase !important;
}

html body:not(.fz-teacher-mode) .fz-greet-title,
html body:not(.fz-teacher-mode) .home-today .fz-greet-title,
html body:not(.fz-teacher-mode) .fz-welcome-header .fz-greet-title,
.fz-greet-title {
  font-family: 'FZ Plus Jakarta Sans', var(--font-sans), sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

.tactile-streak-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #FFFFFF !important;
  border: 2px solid #FED7AA !important;
  border-radius: 14px !important;
  padding: 6px 12px !important;
  box-shadow: 0 4px 0 #FDBA74, 0 8px 16px rgba(249, 115, 22, 0.08) !important;
  flex-shrink: 0 !important;
}

.tactile-streak-val {
  font-family: 'FZ Plus Jakarta Sans', var(--font-sans), sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #C2410C !important;
  line-height: 1 !important;
}

.tactile-streak-lbl {
  font-family: 'FZ Plus Jakarta Sans', var(--font-sans), sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #EA580C !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
}

/* 12. AURORA HERO CARD (WORD OF THE DAY & SESI ADAPTIF) */
.fz-aurora-card {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 6px 0 var(--card-bevel), 0 16px 32px rgba(15, 23, 42, 0.05) !important;
  overflow: hidden !important;
}

.fz-aurora-vocab-zone {
  background: #FFFFFF !important;
  border-bottom: 2px solid #E2E8F0 !important;
  padding: 16px 18px !important;
}

.fz-aurora-glass-pod {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
}

.fz-aurora-word {
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: 20px !important;
}

.fz-aurora-pos {
  background: #E2E8F0 !important;
  color: #475569 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
}

.fz-aurora-phonetic {
  color: #64748B !important;
  font-family: var(--font-mono) !important;
  font-size: 12.5px !important;
}

.fz-aurora-meaning {
  color: #1E293B !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-top: 4px !important;
}

.fz-aurora-session-zone {
  background: #FAF8F5 !important;
  padding: 16px 18px !important;
}

.fz-aurora-session-title {
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

.fz-aurora-session-desc {
  color: #64748B !important;
  font-size: 13px !important;
}

.fz-aurora-progress-labels {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.fz-aurora-track {
  background: #E2E8F0 !important;
  border-radius: 9999px !important;
  height: 10px !important;
  overflow: hidden !important;
}

.fz-aurora-track-fill {
  background: var(--gold-gradient) !important;
  border-radius: 9999px !important;
  height: 100% !important;
}

/* 13. QUICK CHIPS (Flashcard, Duel, Audio, etc.) */
.quick-chips {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 6px 2px 10px !important;
  scrollbar-width: none !important;
}

.quick-chips::-webkit-scrollbar {
  display: none !important;
}

.fz-quick-chip,
.quick-chip {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 0 var(--card-bevel) !important;
  color: var(--text-main) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.fz-quick-chip:active,
.quick-chip:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 var(--card-bevel) !important;
}

.fz-quick-chip .fz-i,
.quick-chip .fz-i {
  --fz-i-fill: #FEF3C7;
  --fz-i-line: #D97706;
}

/* 14. TOPBAR: 100% TACTILE CLAY SPECIFICATION */
header.topbar,
.topbar {
  background: rgba(253, 250, 243, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: none !important;
  padding: 8px 16px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.topbar-brand-fiezel,
#topBrandWrap {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#topBrandWrap[style*="display: none"],
#topBrandWrap[style*="display:none"] {
  display: none !important;
}

.topbar-brand-fiezel .fiezel-wordmark-text,
#topBrandWrap .fiezel-wordmark-text {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
}

.topbar-brand-fiezel .fiezel-brand-tag,
#topBrandWrap .fiezel-brand-tag {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #92400E !important;
  background: #FEF3C7 !important;
  border: 1px solid #FDE68A !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
}

.topbar .brand-button {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

.topbar .brand-button:active {
  transform: scale(0.96) !important;
}

.topbar .brand svg.fiezel-wordmark {
  width: 98px !important;
  height: 26px !important;
  display: block !important;
}

.topbar .brand svg.fiezel-wordmark text,
.topbar .brand svg.fiezel-wordmark path,
.topbar .brand svg.fiezel-wordmark rect,
.topbar .brand svg.fiezel-wordmark g {
  --wordmark-ink-hi: #0F172A !important;
  --wordmark-ink-lo: #1E293B !important;
  --wordmark-accent-hi: #FFD21E !important;
  --wordmark-accent-lo: #D97706 !important;
}

.topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Tactile Selector Pill Button in Topbar (Matching KelasKu .btn-class-selector) */
.btn-course-selector,
.topbar .btn-course-selector,
.topbar #fzCourseSwitchBtn {
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  box-shadow: 0 3px 0 #CBD5E1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

#fzCourseSwitchBtn[style*="display: none"],
#fzCourseSwitchBtn[style*="display:none"] {
  display: none !important;
}

#topGamifyCluster[style*="display: none"],
#topGamifyCluster[style*="display:none"] {
  display: none !important;
}
  height: 44px !important;
  min-height: 44px !important;
  width: auto !important;
  min-width: auto !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  transition: all 0.12s ease !important;
  overflow: visible !important;
}

.btn-course-selector:hover,
.topbar #fzCourseSwitchBtn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 0 #CBD5E1 !important;
  border-color: #CBD5E1 !important;
}

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

.btn-course-selector .course-switch-flag,
.topbar #fzCourseSwitchBtn .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;
}

.btn-course-selector .course-switch-flag svg,
.topbar #fzCourseSwitchBtn .course-switch-flag svg {
  width: 18px !important;
  height: 13px !important;
  border-radius: 2px !important;
  display: block !important;
  object-fit: cover !important;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4) !important;
}

.btn-course-selector .course-switch-label,
.topbar #fzCourseSwitchBtn .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;
}

.topbar .icon-button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1.5px solid var(--card-border, #E2E8F0) !important;
  box-shadow: 0 3px 0 #CBD5E1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: var(--text-main, #0F172A) !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
  position: relative !important;
}

.topbar .icon-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 0 #CBD5E1 !important;
}

.topbar .icon-button:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #CBD5E1 !important;
}

.topbar .icon-button svg,
.topbar .icon-button i {
  width: 17px !important;
  height: 17px !important;
}

.topbar .notif-badge:not(.hidden) {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 7px !important;
  height: 7px !important;
  background: #EF4444 !important;
  border-radius: 50% !important;
  border: 1.5px solid #FFFFFF !important;
}

/* ==========================================================================
   15. TACTILE CLAY HOME COCKPIT & CARDS (HERO, BUG ARENA, QUICK GRID, KELASKU)
   ========================================================================== */
body:has(.home-today) #app,
#app:has(.home-today) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.home-page.home-today,
.home-today {
  padding: 10px 12px calc(84px + env(safe-area-inset-bottom, 12px)) 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.today-home-cockpit,
.tactile-home-cockpit {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Hero Quest Card */
.hero-card {
  width: 100% !important;
  max-width: 100% !important;
  background: #FFFFFF !important;
  border-radius: 24px !important;
  border: 2px solid var(--card-border) !important;
  box-shadow: 0 8px 0 var(--card-bevel), 0 16px 32px rgba(15, 23, 42, 0.06) !important;
  padding: 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.hero-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.hero-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #D97706 !important;
}

.hero-rhythm-badge {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--text-sub) !important;
  font-family: var(--font-mono) !important;
}

.hero-rhythm-badge span {
  color: #0F172A !important;
}

/* 3D Progress Track */
.hero-progress-track {
  width: 100% !important;
  height: 12px !important;
  background: #EEF2F6 !important;
  border-radius: 9999px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
  padding: 2px !important;
  box-sizing: border-box !important;
}

.hero-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #F59E0B, #FFD21E) !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4) !important;
  position: relative !important;
  transition: width 0.5s var(--ease-bounce) !important;
}

.hero-progress-fill::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  right: 4px;
  height: 3px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 9999px;
}

/* Word of the Day Micro-Learning Tile */
.hero-micro-bite {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.micro-text-group {
  flex: 1 !important;
  min-width: 0 !important;
}

.micro-word-title {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.word-en {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.word-ipa {
  font-size: 12.5px !important;
  font-family: var(--font-mono) !important;
  color: var(--sky-blue) !important;
  font-weight: 700 !important;
}

.word-id {
  font-size: 12px !important;
  color: var(--text-sub) !important;
  margin-top: 2px !important;
}

.adaptive-sub {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #92400E !important;
  background: #FEF3C7 !important;
  border: 1px solid #FDE68A !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
  margin-top: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: fit-content !important;
}

/* 3D Audio Button */
.audio-btn-3d {
  background: #FFFFFF !important;
  border: 2px solid #BAE6FD !important;
  color: var(--sky-blue) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 0 #BAE6FD !important;
  transition: all 0.12s !important;
  flex-shrink: 0 !important;
}

.audio-btn-3d:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #BAE6FD !important;
}

.waveform-bars {
  display: flex !important;
  align-items: center !important;
  gap: 2.5px !important;
  height: 10px !important;
  margin-top: 2px !important;
}

.waveform-bar {
  width: 2.5px !important;
  background: var(--sky-blue) !important;
  border-radius: 2px !important;
  height: 3px !important;
  transition: height 0.15s ease !important;
}

/* Chunky Tactile 3D Action CTA (Solar Gold Clay) */
button.hero-cta-btn,
.hero-cta-btn {
  width: 100% !important;
  background: linear-gradient(180deg, #FFE054 0%, #FFB703 100%) !important;
  background-color: #FFD21E !important;
  color: #2E1800 !important;
  font-family: var(--font-sans) !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 15px 18px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 5px 0 #D97706, 0 12px 24px rgba(255, 183, 3, 0.35) !important;
  position: relative !important;
  transition: all 0.12s ease-out !important;
  box-sizing: border-box !important;
}

button.hero-cta-btn::before,
.hero-cta-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 12px !important;
  right: 12px !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border-radius: 9999px !important;
}

button.hero-cta-btn:hover,
.hero-cta-btn:hover {
  filter: brightness(1.04) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 var(--gold-bevel), 0 16px 28px rgba(255, 183, 3, 0.4) !important;
}

button.hero-cta-btn:active,
.hero-cta-btn:active {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 var(--gold-bevel), 0 4px 10px rgba(255, 183, 3, 0.2) !important;
}

/* Bug Arena (Tactical Boss Raid) */
.bug-arena-card {
  width: 100% !important;
  max-width: 100% !important;
  background: #FFFFFF !important;
  border: 2px solid var(--card-border) !important;
  border-radius: 24px !important;
  padding: 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-shadow: 0 6px 0 var(--card-bevel), 0 14px 28px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
}

.bug-arena-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.arena-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.arena-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #0F172A !important;
}

.arena-count-badge {
  background: #FEE2E2 !important;
  border: 1.5px solid #FCA5A5 !important;
  color: #B91C1C !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 0 #FCA5A5 !important;
}

/* Bug List Items */
.bug-items-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}

.bug-row {
  background: #F8FAFC !important;
  border: 1.5px solid var(--card-border) !important;
  border-radius: 16px !important;
  padding: 11px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 0 #E2E8F0 !important;
  transition: all 0.15s !important;
}

.bug-row:hover {
  border-color: #CBD5E1 !important;
  transform: translateY(-1px) !important;
}

.bug-row:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #E2E8F0 !important;
}

.bug-row-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.bug-name {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.bug-hp-pill {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

.bug-hp-pill.crimson {
  color: #B91C1C !important;
  background: #FEE2E2 !important;
  border: 1px solid #FCA5A5 !important;
}

.bug-hp-pill.gold {
  color: #B45309 !important;
  background: #FEF3C7 !important;
  border: 1px solid #FDE68A !important;
}

.bug-summary {
  font-size: 11.5px !important;
  color: var(--text-sub) !important;
  line-height: 1.35 !important;
}

/* HP Gauge 3D */
.hp-bar-track {
  width: 100% !important;
  height: 7px !important;
  background: #E2E8F0 !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  padding: 1px !important;
  box-sizing: border-box !important;
}

.hp-bar-fill {
  height: 100% !important;
  border-radius: 9999px !important;
  transition: width 0.5s ease !important;
}

.hp-bar-fill.crimson {
  width: 82%;
  background: linear-gradient(90deg, #F87171, #EF4444) !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4) !important;
}

.hp-bar-fill.gold {
  width: 60%;
  background: linear-gradient(90deg, #FDE047, #EAB308) !important;
  box-shadow: 0 2px 4px rgba(234, 179, 8, 0.4) !important;
}

/* Panel Eliminasi 5 Bug Hari Ini: Kartu Hitam + Tulisan Kuning Cerah + Shadow Putih Gading */
button.bug-raid-btn,
.bug-raid-btn {
  width: 100% !important;
  background: var(--card-black) !important;
  background-color: #0B0F17 !important;
  border: 2px solid var(--yellow-bright) !important;
  color: var(--yellow-bright) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 13px 16px !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  box-shadow: 0 5px 0 var(--shadow-ivory), 0 10px 20px rgba(11, 15, 23, 0.15) !important;
  transition: all 0.12s !important;
  box-sizing: border-box !important;
}

button.bug-raid-btn:hover,
.bug-raid-btn:hover {
  background: #131926 !important;
  border-color: #FFD21E !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 0 var(--shadow-ivory), 0 12px 24px rgba(11, 15, 23, 0.2) !important;
}

button.bug-raid-btn:active,
.bug-raid-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--shadow-ivory) !important;
}

/* Quick Practice Head & Headline */
.quick-practice-head {
  width: 100% !important;
  display: block !important;
  margin-bottom: 6px !important;
}

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

.section-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #0F172A !important;
}

.section-see-all {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--sky-blue) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  margin: -10px -8px !important;
  border-radius: 10px !important;
}

/* Tactile Language Shortcut Banner */
button.target-lang-chip,
.target-lang-chip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 0 10px 0 !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
  background: #F8FAFC !important;
  border: 1.5px solid var(--card-border) !important;
  box-shadow: 0 3px 0 #E2E8F0 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.12s ease !important;
  box-sizing: border-box !important;
}

button.target-lang-chip:hover,
.target-lang-chip:hover {
  border-color: #CBD5E1 !important;
  transform: translateY(-1px) !important;
}

button.target-lang-chip:active,
.target-lang-chip:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #E2E8F0 !important;
}

.target-lang-chip .chip-ja-badge {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: #EEF2FF !important;
  border: 1.5px solid #C7D2FE !important;
  box-shadow: 0 2px 0 #C7D2FE !important;
  color: #4F46E5 !important;
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.target-lang-chip .chip-label {
  font-weight: 800 !important;
  font-size: 12.5px !important;
  color: var(--text-main) !important;
  display: block !important;
}

.target-lang-chip .chip-sub {
  font-size: 11px !important;
  color: var(--text-sub) !important;
  font-weight: 600 !important;
  display: block !important;
}

.target-lang-chip .chip-go {
  color: var(--sky-blue) !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.quick-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 11px !important;
}

.grid-tile {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border) !important;
  border-radius: 20px !important;
  padding: 14px 13px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: 0 5px 0 var(--card-bevel), 0 10px 20px rgba(15, 23, 42, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.grid-tile:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 var(--card-bevel), 0 14px 24px rgba(15, 23, 42, 0.06) !important;
}

.grid-tile:active {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 var(--card-bevel) !important;
}

.tile-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.tile-icon-3d {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tile-icon-3d.vocab {
  background: #E0F2FE !important;
  border: 1.5px solid #BAE6FD !important;
  box-shadow: 0 3px 0 #BAE6FD !important;
}
.tile-icon-3d.grammar {
  background: #EEF2FF !important;
  border: 1.5px solid #C7D2FE !important;
  box-shadow: 0 3px 0 #C7D2FE !important;
}
.tile-icon-3d.reading {
  background: #DCFCE7 !important;
  border: 1.5px solid #BBF7D0 !important;
  box-shadow: 0 3px 0 #BBF7D0 !important;
}
.tile-icon-3d.listening {
  background: #FEF3C7 !important;
  border: 1.5px solid #FDE68A !important;
  box-shadow: 0 3px 0 #FDE68A !important;
}

.tile-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  background: #F1F5F9 !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
}

.tile-name {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.tile-meta {
  font-size: 11.5px !important;
  color: var(--text-sub) !important;
  font-weight: 600 !important;
}

/* Classroom Task Banner */
.class-bar {
  background: #FFFFFF !important;
  border: 2px solid var(--kelasku-emerald-border) !important;
  border-radius: 20px !important;
  padding: 13px 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-shadow: 0 5px 0 var(--kelasku-emerald-border), 0 12px 24px rgba(31, 122, 99, 0.08) !important;
  position: relative !important;
  cursor: pointer !important;
}

.class-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.class-icon-wrap {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: var(--kelasku-emerald-soft) !important;
  border: 1.5px solid var(--kelasku-emerald-border) !important;
  box-shadow: 0 3px 0 var(--kelasku-emerald-bevel) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.class-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.class-badge-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
}

.class-badge-brand .kelasku-wordmark {
  font-size: 13px !important;
}

.class-badge-dot {
  font-size: 11px !important;
  color: #475569 !important;
}

.class-badge-tag {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--kelasku-emerald) !important;
  background: var(--kelasku-emerald-soft) !important;
  padding: 1px 6px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.03em !important;
}

.class-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.25 !important;
}

.class-due {
  font-size: 11px !important;
  color: var(--kelasku-emerald-dark) !important;
  font-weight: 700 !important;
}

button.class-btn-3d,
.class-btn-3d {
  background: linear-gradient(180deg, #248F74 0%, #1F7A63 100%) !important;
  background-color: #1F7A63 !important;
  color: #FFFFFF !important;
  border: none !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 9px 15px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 0 var(--kelasku-emerald-deep), 0 6px 14px rgba(31, 122, 99, 0.35) !important;
  transition: all 0.12s !important;
  white-space: nowrap !important;
}

button.class-btn-3d:active,
.class-btn-3d:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--kelasku-emerald-deep) !important;
}

/* ==========================================================================
   UNIVERSAL MOBILE EDGE-TO-EDGE & TACTILE CLAY SHELL
   ========================================================================== */
#app,
.app {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

.home-today,
section.fade,
#fzClassHub,
.classroom-page,
.progress-page,
.profile-page,
.ch-student {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
}

/* Universal Section Headers */
.section-head,
.latihan-hero-header,
.kelasku-hero-header,
.progres-hero-header,
.profile-hero-header {
  padding: 6px 4px 14px 4px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body:not(.fz-teacher-mode) h1,
html body:not(.fz-teacher-mode) h2,
html body:not(.fz-teacher-mode) h3,
html body:not(.fz-teacher-mode) .section-head h1,
.section-head h1,
.latihan-title,
.kelasku-brand-title,
.progres-title,
.profile-title,
h1 {
  font-family: var(--font-sans) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  margin: 0 0 3px 0 !important;
}

html body:not(.fz-teacher-mode) .section-head h1::after,
.section-head h1::after {
  display: none !important;
}

.section-head p,
.latihan-subtitle,
.kelasku-subtitle,
.progres-subtitle,
.profile-subtitle {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Universal Tactile Clay Level Control Banner */
.section-head .active-level-control,
.latihan-level-card,
.practice-level-banner {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border, #E2E8F0) !important;
  border-radius: 20px !important;
  padding: 10px 14px !important;
  box-shadow: 0 4px 0 var(--card-bevel, #CBD5E1), 0 10px 20px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 10px 0 16px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.section-head .active-level-control span:first-child,
.level-label {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #64748B !important;
}

.section-head .active-level-control b,
.section-head .active-level-control .active-level-val,
.level-pill-badge {
  background: #0B0F17 !important;
  color: #FFE600 !important;
  font-family: var(--font-mono), 'JetBrains Mono', monospace !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 3px 12px !important;
  border-radius: 10px !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.section-head .active-level-control button,
.btn-ganti-level {
  background: #F8FAFC !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 12px !important;
  padding: 5px 12px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

.section-head .active-level-control button:hover,
.btn-ganti-level:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

/* TAB LATIHAN (LATIHAN HUB) TACTILE CLAY */
.continue-learning-card {
  background: #0B0F17 !important;
  border: 2px solid #1A2234 !important;
  border-radius: 22px !important;
  padding: 16px !important;
  box-shadow: 0 5px 0 #E2D7BC, 0 16px 28px rgba(15, 23, 42, 0.12) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.continue-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  text-align: left !important;
}

.continue-card-body small:first-child {
  color: #FFE600 !important;
  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.continue-card-body b {
  color: #FFFFFF !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.continue-card-body small:last-child {
  color: #94A3B8 !important;
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

.continue-card-btn {
  background: linear-gradient(180deg, #FFE054, #FFB703) !important;
  border: 1.5px solid #D97706 !important;
  border-radius: 14px !important;
  padding: 9px 16px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #2E1800 !important;
  box-shadow: 0 3px 0 #D97706 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.learning-launcher {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.launch-card {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border, #E2E8F0) !important;
  border-radius: 22px !important;
  padding: 16px 14px !important;
  box-shadow: 0 5px 0 var(--card-bevel, #CBD5E1), 0 12px 24px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 146px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  position: relative !important;
}

.launch-card:hover {
  border-color: #CBD5E1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 var(--card-bevel, #CBD5E1), 0 16px 28px rgba(15, 23, 42, 0.06) !important;
}

.launch-card:active {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 var(--card-bevel, #CBD5E1) !important;
}

.launch-card .launch-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}

.launch-card b {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  display: block !important;
  line-height: 1.25 !important;
}

.launch-card small {
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  display: block !important;
  margin-top: 2px !important;
}

.launch-card [data-lucide="arrow-up-right"] {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  color: #94A3B8 !important;
}

/* TAB KELASKU (CLASSROOM HUB) TACTILE CLAY */
#fzClassHub,
.ch-student {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ch-head {
  padding: 6px 4px 14px 4px !important;
  border: none !important;
  background: transparent !important;
}

.ch-head h1,
.ch-head [data-testid="class-hub-title"] {
  font-family: var(--font-sans) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  letter-spacing: -0.025em !important;
}

.ch-head [data-testid="class-hub-title"] .kelasku-wordmark {
  color: var(--kelasku-emerald, #1F7A63) !important;
}

.ch-nav,
.task-filter-row {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  margin: 10px 0 16px 0 !important;
  padding: 4px 0 !important;
}

.ch-nav button,
.task-filter-chip {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 9999px !important;
  padding: 7px 16px !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  box-shadow: 0 3px 0 #CBD5E1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.12s ease !important;
}

.ch-nav button.active,
.task-filter-chip.active {
  background: var(--kelasku-emerald, #1F7A63) !important;
  color: #FFFFFF !important;
  border-color: #0F372D !important;
  box-shadow: 0 3px 0 #0F372D !important;
}

.ch-card,
.ch-empty,
.ch-join-card,
.teacher-broadcast-card {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border, #E2E8F0) !important;
  border-radius: 22px !important;
  box-shadow: 0 5px 0 var(--card-bevel, #CBD5E1), 0 12px 24px rgba(15, 23, 42, 0.04) !important;
  padding: 18px 16px !important;
  margin-bottom: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ch-join-card button,
.btn-task-action {
  background: linear-gradient(180deg, #248F74, #1F7A63) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #0F372D !important;
  border-radius: 14px !important;
  padding: 10px 20px !important;
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 0 #0F372D !important;
  cursor: pointer !important;
}

/* TAB PROGRES (PROGRESS PASSPORT) TACTILE CLAY */
.stat-grid,
.progress-stats-grid,
.progres-grid-4 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 12px 0 16px 0 !important;
}

.stat-card,
.stat-grid > div,
.progress-stats-grid > div {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border, #E2E8F0) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 0 var(--card-bevel, #CBD5E1), 0 10px 20px rgba(15, 23, 42, 0.03) !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 88px !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.stat-card b,
.stat-grid b,
.progress-stats-grid b {
  font-family: var(--font-mono), 'JetBrains Mono', monospace !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.1 !important;
  display: block !important;
}

.stat-card small,
.stat-grid small,
.progress-stats-grid small {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748B !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.progres-hero-card {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border, #E2E8F0) !important;
  border-radius: 24px !important;
  padding: 18px !important;
  box-shadow: 0 5px 0 var(--card-bevel, #CBD5E1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 14px !important;
}

.progres-track {
  width: 100% !important;
  height: 12px !important;
  background: #E2E8F0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06) !important;
  margin: 10px 0 !important;
}

.progres-fill-candy {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #FFD21E 0%, #10B981 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* =========================================================================
   TAB PROFIL TACTILE CLAY DESIGN SYSTEM (100% COCKPIT MATCH)
   ========================================================================= */
#viewProfile {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 0 0 36px 0 !important;
  width: 100% !important;
}

/* 1. Profile Hero Card */
.profile-hero-card,
.profile-card {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border, #E2E8F0) !important;
  border-radius: 24px !important;
  padding: 18px !important;
  box-shadow: 0 5px 0 var(--card-bevel, #CBD5E1), 0 14px 28px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 14px !important;
}

.profile-user-top {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.profile-avatar-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
}

.profile-avatar-tactile {
  width: 64px !important;
  height: 64px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  border: 2.5px solid #FFFFFF !important;
  box-shadow: 0 4px 0 #075985, 0 10px 18px rgba(2, 132, 199, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.profile-status-dot {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  border: 2.5px solid #FFFFFF !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12) !important;
}

.profile-user-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.profile-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

.profile-fullname {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
}

.profile-btn-edit {
  background: #F1F5F9 !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 10px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #334155 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
  transition: all 0.12s ease !important;
}

.profile-btn-edit:active {
  transform: translateY(2px) !important;
  box-shadow: none !important;
}

.profile-handle {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  font-family: var(--font-mono, monospace) !important;
}

.profile-badges-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  flex-wrap: wrap !important;
}

.profile-level-chip {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #1D4ED8 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

.profile-status-chip,
.profile-school-chip {
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #047857 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 3-Stat Tactile Blocks */
.profile-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.profile-stat-box {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 2px !important;
  box-shadow: 0 3px 0 #CBD5E1 !important;
}

.profile-stat-val {
  font-family: var(--font-mono, monospace) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.profile-stat-lbl {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #64748B !important;
}

/* 2. KelasKu Enrolled School Card */
.profile-kelasku-card {
  background: #FFFFFF !important;
  border: 2px solid #A7F3D0 !important;
  border-radius: 22px !important;
  padding: 16px !important;
  box-shadow: 0 4px 0 #6EE7B7, 0 10px 20px rgba(16, 185, 129, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 14px !important;
}

.kelasku-head-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.kelasku-badge-online {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #047857 !important;
  background: #D1FAE5 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.kelasku-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.kelasku-icon-circle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: #DDEFE7 !important;
  border: 1.5px solid #1F7A63 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.kelasku-info-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.kelasku-class-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #064E3B !important;
}

.kelasku-teacher-sub {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #059669 !important;
}

.kelasku-code-bar {
  background: #F0FDF4 !important;
  border: 1px dashed #86EFAC !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.code-label-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.code-txt {
  font-family: var(--font-mono, monospace) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #065F46 !important;
  letter-spacing: 0.05em !important;
}

.btn-copy-code {
  background: #FFFFFF !important;
  border: 1px solid #86EFAC !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #047857 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 0 #A7F3D0 !important;
  transition: all 0.1s ease !important;
}

.btn-copy-code:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}

/* 3. Section Cards (Goals, Settings, Account) */
.profile-section-card {
  background: #FFFFFF !important;
  border: 2px solid var(--card-border, #E2E8F0) !important;
  border-radius: 22px !important;
  padding: 16px !important;
  box-shadow: 0 5px 0 var(--card-bevel, #CBD5E1), 0 14px 28px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 14px !important;
}

.section-card-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.section-card-header.is-collapsible {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
}

.header-text-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.header-action-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.btn-card-collapse {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: #F1F5F9 !important;
  border: 1.5px solid #CBD5E1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #475569 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.btn-card-collapse:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

.btn-card-collapse:active {
  transform: translateY(2px) !important;
  box-shadow: none !important;
}

.chevron-icon {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.profile-section-card.is-collapsed .chevron-icon {
  transform: rotate(180deg) !important;
}

.card-collapsed-pill {
  display: none !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #0284C7 !important;
  background: #E0F2FE !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #BAE6FD !important;
}

.profile-section-card.is-collapsed .card-collapsed-pill {
  display: inline-block !important;
}

.section-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  transition: all 0.2s ease !important;
}

.profile-section-card.is-collapsed .section-card-body {
  display: none !important;
}

.section-card-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.section-card-desc {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #64748B !important;
}

/* Goal Pills Selector */
.goal-pills-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.goal-pill-btn {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 10px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 0 #CBD5E1 !important;
  transition: all 0.12s ease !important;
}

.goal-pill-btn:hover {
  border-color: #CBD5E1 !important;
}

.goal-pill-btn.active {
  background: #0B0F17 !important;
  border-color: #0B0F17 !important;
  box-shadow: 0 3px 0 #E2D7BC !important;
}

.goal-pill-btn.active .goal-time {
  color: #FFE600 !important;
}

.goal-pill-btn.active .goal-label {
  color: #F8FAFC !important;
}

.goal-time {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.goal-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #64748B !important;
}

/* Setting Row Items */
.setting-row-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.setting-row-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.setting-left-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
}

.setting-item-name {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.setting-item-desc {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748B !important;
}

/* Tactile Toggle Switch */
.tactile-toggle {
  position: relative !important;
  width: 44px !important;
  height: 26px !important;
  flex-shrink: 0 !important;
}

.tactile-toggle input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.tactile-slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: #E2E8F0 !important;
  border-radius: 999px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.tactile-slider:before {
  position: absolute !important;
  content: "" !important;
  height: 20px !important;
  width: 20px !important;
  left: 3px !important;
  bottom: 3px !important;
  background: #FFFFFF !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.tactile-toggle input:checked + .tactile-slider {
  background: #10B981 !important;
}

.tactile-toggle input:checked + .tactile-slider:before {
  transform: translateX(18px) !important;
}

/* Speed Selector Pills */
.speed-pills-wrap {
  display: flex !important;
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 12px !important;
  padding: 3px !important;
  gap: 3px !important;
}

.speed-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 5px 10px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #64748B !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

.speed-btn.active {
  background: #FFFFFF !important;
  color: #0F172A !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}

/* Synchronize & Safe Anonymous ID */
.profile-sync-box {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.sync-status-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #047857 !important;
}

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

.sync-id-val {
  font-family: var(--font-mono, monospace) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #334155 !important;
  background: #FFFFFF !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #CBD5E1 !important;
  letter-spacing: 0.04em !important;
}

/* Action Buttons in Profile */
.profile-action-btn {
  width: 100% !important;
  background: #F8FAFC !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #1E293B !important;
  box-shadow: 0 3px 0 #CBD5E1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.12s ease !important;
}

.profile-action-btn:active {
  transform: translateY(2px) !important;
  box-shadow: none !important;
}

.profile-action-btn.secondary {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}

.profile-action-btn.danger {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #DC2626 !important;
  box-shadow: 0 3px 0 #FCA5A5 !important;
}

/* Profile Footer Version */
.profile-version-foot {
  text-align: center !important;
  padding: 10px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.version-stamp {
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748B !important;
}

.version-desc {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
}

/* ==========================================================================
   TACTILE CLAY MASTER OVERRIDES: TOPBAR, TABS, LAUNCH CARDS & PANELS
   ========================================================================== */

/* 1. TOPBAR WORDMARK & EQUALIZER ANIMATION */
:root, body, header.topbar, .topbar, #fzTopMark {
  --wordmark-ink-hi: #0F172A !important;
  --wordmark-ink-lo: #020617 !important;
  --wordmark-accent-hi: #FFE054 !important;
  --wordmark-accent-lo: #FF9E00 !important;
}

header.topbar .brand svg.fiezel-wordmark,
.topbar .brand svg.fiezel-wordmark {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.06));
}

.fz-eq-bar-1 {
  transform-origin: 205px 230px;
  animation: fzEq1Pulse 2.2s ease-in-out infinite !important;
}
.fz-eq-bar-2 {
  transform-origin: 253px 230px;
  animation: fzEq2Pulse 2.2s ease-in-out infinite 0.35s !important;
}
@keyframes fzEq1Pulse {
  0%, 100% { transform: scaleY(1); }
  38% { transform: scaleY(0.72); }
  72% { transform: scaleY(1.06); }
}
@keyframes fzEq2Pulse {
  0%, 100% { transform: scaleY(1); }
  42% { transform: scaleY(1.42); }
  78% { transform: scaleY(0.86); }
}

/* 2. UNIVERSAL ANTI-MAROON & LUXURY OBSIDIAN HEADERS */
html body:not(.fz-teacher-mode) #app h1,
html body:not(.fz-teacher-mode) #app h2,
html body:not(.fz-teacher-mode) #app h3,
html body:not(.fz-teacher-mode) #app h4,
html body:not(.fz-teacher-mode) #app .section-head h1,
html body:not(.fz-teacher-mode) #app .section-title,
html body:not(.fz-teacher-mode) #app .quick-practice-title,
html body:not(.fz-teacher-mode) #app .arena-title,
html body:not(.fz-teacher-mode) #app .latihan-title,
html body:not(.fz-teacher-mode) #app .cat-title,
html body:not(.fz-teacher-mode) .section-head h1,
.section-head h1,
.quick-practice-title,
.latihan-title {
  color: #0F172A !important;
  font-family: 'FZ Plus Jakarta Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.section-head h1::after,
.section-title::after,
h1::after {
  display: none !important;
}

/* 3. HIGH-SPECIFICITY OVERRIDES FOR LAUNCH CARDS IN TAB LATIHAN */
html body:not(.fz-teacher-mode) #app .launch-card,
html body #app .launch-card,
.launch-card {
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 22px !important;
  box-shadow: 0 5px 0 #CBD5E1, 0 10px 22px rgba(15, 23, 42, 0.04) !important;
  padding: 15px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  min-height: 140px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  position: relative !important;
}

html body:not(.fz-teacher-mode) #app .launch-card:hover,
.launch-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 #CBD5E1, 0 14px 28px rgba(15, 23, 42, 0.07) !important;
  border-color: #CBD5E1 !important;
}

html body:not(.fz-teacher-mode) #app .launch-card:active,
.launch-card:active {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
}

html body:not(.fz-teacher-mode) #app .launch-card b,
html body #app .launch-card b,
.launch-card b {
  font-size: 14.5px !important;
  line-height: 1.25 !important;
  color: #0F172A !important;
  font-weight: 800 !important;
  display: block !important;
  margin-top: 4px !important;
}

html body:not(.fz-teacher-mode) #app .launch-card small,
html body #app .launch-card small,
.launch-card small {
  font-size: 11.5px !important;
  color: #64748B !important;
  font-weight: 600 !important;
  display: block !important;
}

html body:not(.fz-teacher-mode) #app .launch-card .launch-icon,
.launch-card .launch-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: #E0F2FE !important;
  border: 1.5px solid #BAE6FD !important;
  box-shadow: 0 3px 0 #BAE6FD !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}

html body:not(.fz-teacher-mode) #app .launch-card:has([data-fz-icon="vocab"]) .launch-icon {
  background: #E0F2FE !important; border-color: #BAE6FD !important; box-shadow: 0 3px 0 #BAE6FD !important;
  --fz-i-fill: #38BDF8 !important; --fz-i-line: #0369A1 !important;
}
html body:not(.fz-teacher-mode) #app .launch-card:has([data-fz-icon="grammar"]) .launch-icon {
  background: #EEF2FF !important; border-color: #C7D2FE !important; box-shadow: 0 3px 0 #C7D2FE !important;
  --fz-i-fill: #818CF8 !important; --fz-i-line: #4F46E5 !important;
}
html body:not(.fz-teacher-mode) #app .launch-card:has([data-fz-icon="reading"]) .launch-icon {
  background: #DCFCE7 !important; border-color: #BBF7D0 !important; box-shadow: 0 3px 0 #BBF7D0 !important;
  --fz-i-fill: #4ADE80 !important; --fz-i-line: #15803D !important;
}
html body:not(.fz-teacher-mode) #app .launch-card:has([data-fz-icon="skills"]) .launch-icon,
html body:not(.fz-teacher-mode) #app .launch-card:has([data-fz-icon="speaking"]) .launch-icon {
  background: #FEF3C7 !important; border-color: #FDE68A !important; box-shadow: 0 3px 0 #FDE68A !important;
  --fz-i-fill: #FBBF24 !important; --fz-i-line: #B45309 !important;
}
html body:not(.fz-teacher-mode) #app .launch-card:has([data-fz-icon="writing"]) .launch-icon {
  background: #FFEDD5 !important; border-color: #FED7AA !important; box-shadow: 0 3px 0 #FDBA74 !important;
  --fz-i-fill: #FB923C !important; --fz-i-line: #C2410C !important;
}
html body:not(.fz-teacher-mode) #app .launch-card:has([data-fz-icon="library"]) .launch-icon {
  background: #F1F5F9 !important; border-color: #CBD5E1 !important; box-shadow: 0 3px 0 #94A3B8 !important;
  --fz-i-fill: #64748B !important; --fz-i-line: #334155 !important;
}

/* 4. TACTILE CLAY TABS STRIP (PROGRES, KELASKU, PROFIL) */
html body #app .progress-tabs,
html body .progress-tabs,
.progress-tabs,
html body #app .ch-tabs,
html body .ch-tabs,
.ch-tabs,
html body #app .sub-nav,
.sub-nav {
  background: #F1F5F9 !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
  padding: 4px !important;
  display: flex !important;
  gap: 6px !important;
  margin: 10px 0 16px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html body #app .progress-tabs::-webkit-scrollbar,
.progress-tabs::-webkit-scrollbar {
  display: none !important;
}

html body #app .progress-tab,
html body .progress-tab,
.progress-tab {
  background: transparent !important;
  color: #475569 !important;
  font-family: 'FZ Plus Jakarta Sans', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  flex: 1 1 0 !important;
}

html body #app .progress-tab.active,
html body #app .progress-tab[aria-selected="true"],
html body .progress-tab.active,
.progress-tab.active,
.progress-tab[aria-selected="true"] {
  background: #0B0F17 !important;
  color: #FFE600 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
}

/* KELASKU SUBTABS (Tugas | Hasilku | Kelas Saya) - Symmetrical 3-Column Grid */
html body #app .ch-tabs,
html body .ch-tabs,
.ch-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  padding: 4px !important;
  background: #E2E8F0 !important;
  border: none !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 6px 0 12px 0 !important;
  overflow: visible !important;
}

html body #app .ch-tab,
html body .ch-tab,
.ch-tab {
  width: 100% !important;
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 7px 6px !important;
  font-family: 'FZ Plus Jakarta Sans', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  border: none !important;
  border-radius: 9999px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

html body #app .ch-tab.is-active,
html body .ch-tab.is-active,
.ch-tab.is-active {
  background: #FFFFFF !important;
  color: #0F172A !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}

html body #app .ch-tab .ch-badge,
html body .ch-tab .ch-badge,
.ch-tab .ch-badge,
.ch-tab-badge {
  background: #FEE2E2 !important;
  color: #EF4444 !important;
  border: none !important;
  outline: none !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 1px 6.5px !important;
  margin-left: 6px !important;
  min-width: 17px !important;
  height: 17px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

/* 5. KELASKU REFINED CLAY CARDS (Compact, Sleek, Precision) */
html body #app .ch-card,
html body #app .ch-link-card,
.ch-card, .ch-link-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 18px !important;
  color: #0F172A !important;
  box-shadow: 0 3px 0 #CBD5E1, 0 8px 18px rgba(15, 23, 42, 0.04) !important;
  padding: 13px 14px !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

html body #app .ch-card h2,
html body #app .ch-card h3,
.ch-card h2, .ch-card h3 {
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  margin: 0 0 4px 0 !important;
}

/* Compact streak card (Belum belajar hari ini) */
html body #app .ch-card.ch-streak-card,
.ch-card.ch-streak-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 13px !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 3px 0 #CBD5E1, 0 6px 14px rgba(15, 23, 42, 0.03) !important;
  margin-bottom: 10px !important;
}

.ch-streak-emoji {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.ch-streak-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.ch-streak-info b {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
  display: block !important;
}

.ch-streak-info span {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  line-height: 1.25 !important;
  display: block !important;
}

/* 3-Column KPI Stat Grid in Hasilku */
html body #app .ch-kpis,
.ch-kpis {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body #app .ch-kpi,
.ch-kpi {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
  padding: 8px 6px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body #app .ch-kpi b,
.ch-kpi b {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.15 !important;
  display: block !important;
}

html body #app .ch-kpi span,
.ch-kpi span {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  line-height: 1.2 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Nested KPI inside cards (e.g. Minggu Ini) */
html body #app .ch-card .ch-kpi,
.ch-card .ch-kpi {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1.5px 0 #CBD5E1 !important;
  padding: 7px 6px !important;
  border-radius: 12px !important;
}

.ch-head {
  margin-bottom: 8px !important;
  padding: 0 2px !important;
}
.ch-head h1 {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: #0F172A !important;
  margin: 0 0 2px 0 !important;
}
.ch-head .ch-sub {
  font-size: 12px !important;
  color: #64748B !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.ch-kicker {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 0 6px 0 !important;
}

html body #app .ch-card.ch-empty,
.ch-card.ch-empty {
  background: #F8FAFC !important;
  border: 1.5px dashed #CBD5E1 !important;
  border-radius: 18px !important;
  padding: 22px 14px !important;
  color: #475569 !important;
  text-align: center !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
}

html body #app .ch-card.ch-empty p,
.ch-card.ch-empty p {
  color: #64748B !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  max-width: 30ch !important;
  margin: 0 auto !important;
}

html body #app .ch-btn.is-primary,
.ch-btn.is-primary,
html body #app .ch-card .ch-btn,
.ch-card .ch-btn {
  background: linear-gradient(180deg, #248F74 0%, #1F7A63 100%) !important;
  color: #FFFFFF !important;
  font-family: 'FZ Plus Jakarta Sans', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 10px 20px !important;
  box-shadow: 0 3px 0 #0F372D, 0 6px 14px rgba(31, 122, 99, 0.25) !important;
  cursor: pointer !important;
  transition: transform 0.12s, box-shadow 0.12s !important;
}
html body #app .ch-btn.is-primary:active,
.ch-btn.is-primary:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #0F372D !important;
}

/* 5B. PAPAN KELAS LEADERBOARD & FORM INPUT (Tactile Clay High Contrast WCAG AAA) */
html body #app .ch-papan-card,
html body .ch-papan-card,
.ch-papan-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 0 #CBD5E1, 0 10px 24px rgba(15, 23, 42, 0.04) !important;
  padding: 16px !important;
  color: #0F172A !important;
  margin-bottom: 12px !important;
}

html body #app .ch-papan-card h3,
html body .ch-papan-card h3,
.ch-papan-card h3 {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html body #app .ch-papan-period,
html body .ch-papan-period,
.ch-papan-period {
  color: #0D9488 !important;
  font-weight: 700 !important;
}

html body #app .ch-papan-row,
html body .ch-papan-row,
.ch-papan-row {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  margin-bottom: 6px !important;
  color: #0F172A !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

html body #app .ch-papan-row.is-me,
html body .ch-papan-row.is-me,
.ch-papan-row.is-me {
  background: #ECFDF5 !important;
  border: 1.5px solid #A7F3D0 !important;
  box-shadow: 0 2px 0 #6EE7B7 !important;
}

html body #app .ch-papan-rank,
html body .ch-papan-rank,
.ch-papan-rank {
  font-weight: 800 !important;
  font-size: 13px !important;
  color: #64748B !important;
}

html body #app .ch-papan-row.is-me .ch-papan-rank,
html body .ch-papan-row.is-me .ch-papan-rank,
.ch-papan-row.is-me .ch-papan-rank {
  color: #059669 !important;
}

html body #app .ch-papan-name,
html body .ch-papan-name,
.ch-papan-name {
  color: #0F172A !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

html body #app .ch-papan-row.is-me .ch-papan-name,
html body .ch-papan-row.is-me .ch-papan-name,
.ch-papan-row.is-me .ch-papan-name {
  color: #065F46 !important;
}

html body #app .ch-papan-badge,
html body .ch-papan-badge,
.ch-papan-badge {
  color: #059669 !important;
  font-weight: 800 !important;
}

html body #app .ch-papan-score,
html body .ch-papan-score,
.ch-papan-score {
  color: #0F172A !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

html body #app .ch-papan-row.is-me .ch-papan-score,
html body .ch-papan-row.is-me .ch-papan-score,
.ch-papan-row.is-me .ch-papan-score {
  color: #059669 !important;
}

/* Form input in tactile clay */
html body #app .ch-form input,
html body .ch-form input,
.ch-form input {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.05) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
}

html body #app .ch-form input::placeholder,
html body .ch-form input::placeholder,
.ch-form input::placeholder {
  color: #94A3B8 !important;
}

/* 6. LEVEL CONTROL BANNER: HIGH CONTRAST DARK BADGE WITH YELLOW A1 */
html body #app .active-level-control,
.active-level-control {
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 20px !important;
  padding: 10px 16px !important;
  box-shadow: 0 4px 0 #CBD5E1, 0 10px 20px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 10px 0 16px 0 !important;
}

html body #app .active-level-control span:first-child,
.active-level-control span:first-child {
  font-family: 'FZ Plus Jakarta Sans', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #64748B !important;
}

html body #app .active-level-control b,
html body #app .active-level-control .active-level-val,
.active-level-control b {
  background: #0B0F17 !important;
  color: #FFE600 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 4px 14px !important;
  border-radius: 12px !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 7. ACTIVE LEVEL CONTROL PILL */
html body #app .active-level-control,
html body .active-level-control,
.active-level-control {
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  box-shadow: 0 4px 0 #CBD5E1 !important;
  border-radius: 18px !important;
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  cursor: pointer !important;
  margin-bottom: 16px !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

.active-level-control:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
}

.active-level-control span {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}

.active-level-control strong {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #D97706 !important;
  letter-spacing: -0.02em !important;
}

.active-level-control small {
  background: #FEF3C7 !important;
  border: 1.5px solid #FDE68A !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #B45309 !important;
  box-shadow: 0 2px 0 #F59E0B !important;
}

/* Compact Active Level Pill inside Topbar (Zero Card Bloat) */
html body header.topbar .active-level-control,
html body #topContextActions .active-level-control,
header.topbar .active-level-control,
#topContextActions .active-level-control,
.topbar-context-actions .active-level-control {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 2px 8px 2px 10px !important;
  margin: 0 !important;
  border-radius: 9999px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

html body header.topbar .active-level-control:active,
html body #topContextActions .active-level-control:active,
header.topbar .active-level-control:active,
#topContextActions .active-level-control:active {
  transform: translateY(1px) scale(0.97) !important;
  box-shadow: 0 1px 0 #CBD5E1 !important;
}

html body header.topbar .active-level-control > span,
html body #topContextActions .active-level-control > span,
header.topbar .active-level-control > span,
#topContextActions .active-level-control > span {
  display: none !important;
}

html body header.topbar .active-level-control strong,
html body #topContextActions .active-level-control strong,
header.topbar .active-level-control strong,
#topContextActions .active-level-control strong {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #D97706 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body header.topbar .active-level-control small,
html body #topContextActions .active-level-control small,
header.topbar .active-level-control small,
#topContextActions .active-level-control small {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  background: #FDE047 !important;
  border: 1px solid #FACC15 !important;
  border-radius: 9999px !important;
  padding: 2px 7px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

html body header.topbar .active-level-control b,
html body header.topbar .active-level-control .active-level-val,
html body #topContextActions .active-level-control b,
html body #topContextActions .active-level-control .active-level-val,
header.topbar .active-level-control b,
header.topbar .active-level-control .active-level-val,
#topContextActions .active-level-control b,
#topContextActions .active-level-control .active-level-val {
  background: transparent !important;
  color: #D97706 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 8. PROGRES 2x2 TACTILE STAT GRID & GEM CARD */
html body #app .progress-stats,
.progress-stats {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

html body #app .progress-stats > div,
.progress-stats > div {
  background: #0B0F17 !important;
  border: 1.5px solid #1E293B !important;
  border-radius: 18px !important;
  padding: 14px 12px !important;
  text-align: center !important;
  box-shadow: 0 4px 0 #020617, 0 8px 16px rgba(0,0,0,0.12) !important;
}

html body #app .progress-stats > div small,
.progress-stats > div small {
  color: #94A3B8 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: block !important;
  margin-bottom: 4px !important;
}

html body #app .progress-stats > div b,
.progress-stats > div b {
  color: #FFFFFF !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  font-family: 'JetBrains Mono', monospace !important;
  display: block !important;
}

/* GEM Card: Luxury Warm Gold Clay with High Contrast */
html body #app .progress-stats > div.stat-gem-span,
html body .stat-gem-span,
.progress-stats > div.stat-gem-span,
.stat-gem-span {
  grid-column: 1 / -1 !important;
  background: #FFFBEB !important;
  border: 2px solid #FDE68A !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 0 #F59E0B !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
}

html body #app .progress-stats > div.stat-gem-span small,
html body .stat-gem-span small,
.stat-gem-span small {
  color: #B45309 !important;
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
  display: inline-block !important;
}

html body #app .progress-stats > div.stat-gem-span strong,
html body #app .progress-stats > div.stat-gem-span b,
html body .stat-gem-span strong,
html body .stat-gem-span b,
.stat-gem-span strong,
.stat-gem-span b {
  color: #92400E !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  display: inline-block !important;
}

/* 9. TACTILE CLAY LEVEL ROADMAP (CEFR LADDER [A1] [A2] [B1] [B2] [C1] [C2]) */
html body #app .fz2-level.card,
html body .fz2-level.card,
.fz2-level.card {
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 24px !important;
  box-shadow: 0 6px 0 #CBD5E1, 0 14px 28px rgba(15, 23, 42, 0.05) !important;
  padding: 20px !important;
  position: relative !important;
}

html body #app .fz2-level-head,
.fz2-level-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

html body #app .fz2-level-head .eyebrow,
.fz2-level-head .eyebrow {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64748B !important;
}

html body #app .fz2-level-big,
.fz2-level-big {
  display: none !important;
}

html body #app .fz2-level-lead,
.fz2-level-lead {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.45 !important;
  margin-bottom: 12px !important;
}

html body #app .fz2-lvls,
html body .fz2-lvls,
.fz2-lvls,
.card .fz2-lvls {
  display: flex !important;
  gap: 8px !important;
  margin-top: 16px !important;
  max-width: 100% !important;
  width: 100% !important;
}

html body #app .fz2-lvl::before,
html body .fz2-lvl::before,
.fz2-lvl::before {
  display: none !important;
}

/* Inactive Level Pills: High Contrast, Crisp Slate Keys */
html body #app .fz2-lvls span,
html body #app .fz2-lvl,
html body .fz2-lvls span,
html body .fz2-lvl,
.fz2-lvls span,
.fz2-lvl,
.card .fz2-lvls span,
.card .fz2-lvl {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  padding: 0 4px !important;
  background: #F8FAFC !important;
  border: 2px solid #CBD5E1 !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 0 #94A3B8 !important;
  color: #1E293B !important;
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
  transition: all 0.15s ease !important;
}

/* Active Level Pill: Radiant Solar Gold Clay Key */
html body #app .fz2-lvls span.is-now,
html body #app .fz2-lvl.is-now,
html body .fz2-lvls span.is-now,
html body .fz2-lvl.is-now,
.fz2-lvls span.is-now,
.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: linear-gradient(180deg, #FEF08A 0%, #FACC15 100%) !important;
  border: 2px solid #CA8A04 !important;
  box-shadow: 0 4px 0 #A16207, 0 6px 14px rgba(202, 138, 4, 0.28) !important;
  color: #713F12 !important;
  font-weight: 800 !important;
  transform: translateY(-2px) !important;
}

/* Completed Level Pill: Emerald Clay Key */
html body #app .fz2-lvls span.is-done,
html body #app .fz2-lvl.is-done,
html body .fz2-lvls span.is-done,
html body .fz2-lvl.is-done,
.fz2-lvls span.is-done,
.fz2-lvl.is-done,
.card .fz2-lvls span.is-done,
.card .fz2-lvl.is-done,
.card div > span.fz2-lvl.is-done {
  background: linear-gradient(180deg, #D1FAE5 0%, #A7F3D0 100%) !important;
  border: 2px solid #059669 !important;
  box-shadow: 0 3px 0 #047857 !important;
  color: #064E3B !important;
  font-weight: 800 !important;
}

/* 10. KELASKU TOPBAR BRAND & CLASS SELECTOR */
body.fz-view-classroom header.topbar #topBrandWrap,
body.fz-view-classroom header.topbar .brand-button,
body.fz-view-classroom header.topbar #topGamifyCluster,
body.fz-view-classroom header.topbar .topbar-actions {
  display: none !important;
}

body.fz-view-classroom header.topbar #topBrandKelasKu {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

body.fz-view-classroom header.topbar #topKelasKuCluster {
  display: flex !important;
  align-items: center !important;
}

.kelasku-top-brand .kelasku-wordmark {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  color: var(--kelasku-emerald, #1F7A63) !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
}

.kelasku-top-brand .kelasku-brand-tag {
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #065F46 !important;
  background: #D1FAE5 !important;
  border: 1px solid #A7F3D0 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  transition: all 0.15s ease !important;
}

.kelasku-top-brand .kelasku-brand-tag.is-unjoined,
.kelasku-top-brand .kelasku-brand-tag.is-inactive {
  color: #475569 !important;
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}

.btn-class-selector {
  background: #FFFFFF !important;
  border: 2px solid var(--kelasku-emerald-border, #A9D5CA) !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--kelasku-emerald-dark, #166052) !important;
  box-shadow: 0 3px 0 var(--kelasku-emerald-bevel, #7CBBAE) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  height: 36px !important;
  min-height: 36px !important;
  width: auto !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  transition: all 0.12s !important;
}

.btn-class-selector svg {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

.btn-class-selector span {
  white-space: nowrap !important;
  line-height: 1 !important;
}

.btn-class-selector:hover {
  background: var(--kelasku-emerald-tint, #F2F9F6) !important;
}

.btn-class-selector:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--kelasku-emerald-bevel, #7CBBAE) !important;
}

/* 11. KELASKU FILTER BAR (SEGBAR - Exact Mockup Alignment) */
html body #app .ch-segbar,
html body .ch-segbar,
.ch-segbar {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 10px 0 14px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html body #app .ch-segbar .ch-segbar-btn,
html body .ch-segbar .ch-segbar-btn,
.ch-segbar .ch-segbar-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 9999px !important;
  padding: 5px 8px !important;
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #334155 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html body #app .ch-segbar .ch-segbar-btn.is-active,
html body .ch-segbar .ch-segbar-btn.is-active,
.ch-segbar .ch-segbar-btn.is-active {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border: 1px solid #0F172A !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15) !important;
}

html body #app .ch-segbar .ch-segbar-btn[style*="display:none"],
html body .ch-segbar .ch-segbar-btn[style*="display:none"],
.ch-segbar .ch-segbar-btn[style*="display:none"] {
  display: none !important;
}

html body #app .ch-segbar .ch-segbar-n,
html body .ch-segbar .ch-segbar-n,
.ch-segbar-n {
  display: inline !important;
  color: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

html body #app .ch-segbar .ch-btn-archive,
html body .ch-segbar .ch-btn-archive,
.ch-segbar .ch-btn-archive {
  margin-left: auto !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* 12. KELASKU ANNOUNCEMENT CARD (Bu Sari) */
html body #app .ch-greeting-card,
.ch-greeting-card {
  background: #F0FDF4 !important;
  border: 1.5px solid #86EFAC !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.06), 0 2px 0 #BBF7D0 !important;
  margin-bottom: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ch-greeting-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.ch-greeting-avatar-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
}
.ch-greeting-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #047857 !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.02em !important;
}
.ch-greeting-dot {
  position: absolute !important;
  bottom: -1px !important;
  right: -1px !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  border: 2px solid #FFFFFF !important;
}
.ch-greeting-body {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.ch-greeting-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 5px !important;
}
.ch-greeting-author {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}
.ch-greeting-role {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #059669 !important;
}
.ch-greeting-bubble {
  background: #FFFFFF !important;
  border: 1px solid #BBF7D0 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #1E293B !important;
  line-height: 1.4 !important;
}
.ch-greeting-time {
  color: #059669 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  margin-top: 5px !important;
}

/* 13. KELASKU TASK ITEMS (Precise 3-Column Layout) */
html body #app .ch-task-item,
.ch-task-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 2px 0 #CBD5E1, 0 4px 10px rgba(15, 23, 42, 0.03) !important;
  margin-bottom: 9px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ch-task-date {
  width: 44px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ch-task-date.is-red {
  background: #FFF1F2 !important;
  border: 1.5px solid #FECDD3 !important;
}
.ch-task-date.is-red .ch-task-day,
.ch-task-date.is-red .ch-task-num {
  color: #E11D48 !important;
}
.ch-task-date.is-amber {
  background: #FFFBEB !important;
  border: 1.5px solid #FDE68A !important;
}
.ch-task-date.is-amber .ch-task-day,
.ch-task-date.is-amber .ch-task-num {
  color: #D97706 !important;
}
.ch-task-date.is-green {
  background: #F0FDF4 !important;
  border: 1.5px solid #BBF7D0 !important;
}
.ch-task-date.is-green .ch-task-day,
.ch-task-date.is-green .ch-task-num {
  color: #059669 !important;
}
.ch-task-day {
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin-bottom: 1px !important;
}
.ch-task-num {
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.ch-task-body {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.ch-task-tag {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ch-task-tag.is-purple { color: #4F46E5 !important; }
.ch-task-tag.is-amber { color: #D97706 !important; }
.ch-task-tag.is-green { color: #059669 !important; }
.ch-task-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 0 2px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ch-task-meta {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ch-task-action {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
html body #app .ch-task-action button.ch-btn-kerjakan,
html body #app .ch-btn-kerjakan,
button.ch-btn-kerjakan,
.ch-btn-kerjakan {
  background: #F59E0B !important;
  color: #0F172A !important;
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 9999px !important;
  padding: 6px 12px !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.ch-btn-kerjakan:active {
  transform: translateY(1px) !important;
}
html body #app .ch-task-action button.ch-btn-mulai,
html body #app .ch-btn-mulai,
button.ch-btn-mulai,
.ch-btn-mulai {
  background: #FEF3C7 !important;
  color: #92400E !important;
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 9999px !important;
  padding: 6px 12px !important;
  border: 1px solid #FDE68A !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.ch-btn-mulai:active {
  transform: translateY(1px) !important;
}
html body #app .ch-task-action .ch-btn-tuntas,
html body #app .ch-btn-tuntas,
.ch-btn-tuntas {
  background: #DCFCE7 !important;
  color: #16A34A !important;
  font-family: var(--font-sans), 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 9999px !important;
  padding: 5px 12px !important;
  border: 1px solid #86EFAC !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
}

/* 14. TOPBAR GAMIFY PILLS (Streak & XP) */
.topbar-gamify-pills {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.topbar-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 9999px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 0 #E2E8F0 !important;
  line-height: 1 !important;
}
.topbar-pill-icon {
  font-size: 13px !important;
  line-height: 1 !important;
}

/* 15. PROFILE PRESENTATION (Tactile Cockpit Design System) */
body.fz-view-profile .active-level-control,
body.fz-view-profile .section-head,
body.fz-view-classroom .topbar-actions > button[onclick="openSettings()"] {
  display: none !important;
}

/* Ensure Progress Tabs (Profil, Teman, Papan) stay visible & accessible */
html body.fz-view-profile #app .progress-tabs,
html body.fz-view-profile .progress-tabs,
body.fz-view-profile .progress-tabs,
body.fz-view-profile nav.progress-tabs {
  display: flex !important;
  margin: 6px 0 16px 0 !important;
}

body.fz-view-profile #cardOnlineTeman,
body.fz-view-profile #cardTargetHarian,
body.fz-view-profile #cardSuaraAudio,
body.fz-view-profile #cardSyncAkun {
  display: flex !important;
}

body.fz-view-profile #app {
  padding-top: 14px !important;
}

/* Clear, elegant contextual typography for card & settings descriptions */
.section-card-desc,
html body.fz-view-profile .section-card-desc,
body.fz-view-profile .section-card-desc {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  line-height: 1.35 !important;
  margin-top: 2px !important;
}

.setting-item-desc,
html body.fz-view-profile .setting-item-desc,
body.fz-view-profile .setting-item-desc {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}

.profile-version-foot,
html body.fz-view-profile .profile-version-foot,
body.fz-view-profile .profile-version-foot {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 12px 0 4px !important;
}

/* Zero leak screen reader utility */
.sr-only,
span.sr-only,
[data-testid="class-hub-title"].sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}





/* ==========================================================================
   16. LATIHAN — compact centered launcher grid (with unified persistent topbar)
   ========================================================================== */
html body.fz-view-latihan #app,
html body.fz-view-grammar #app {
  padding-top: 4px !important;
}
html body.fz-view-latihan #app .section-head,
html body.fz-view-grammar #app .section-head,
html body.fz-view-vocab #app .section-head,
html body.fz-stage-sl #app .section-head,
html body.fz-view-reading #app .section-head,
html body.fz-view-writing #app .section-head,
html body.fz-view-library #app .section-head,
html body #app .section-head {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* level control becomes a small pill beside the title */
html body.fz-view-latihan #app .section-head .active-level-control,
html body.fz-view-grammar #app .section-head .active-level-control {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 6px 8px 6px 12px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 0 #E2E8F0 !important;
}
html body.fz-view-latihan #app .section-head .active-level-control > span,
html body.fz-view-grammar #app .section-head .active-level-control > span {
  display: none !important;
}
html body.fz-view-latihan #app .section-head .active-level-control strong,
html body.fz-view-grammar #app .section-head .active-level-control strong {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #D97706 !important;
  line-height: 1 !important;
}
html body.fz-view-latihan #app .section-head .active-level-control small,
html body.fz-view-grammar #app .section-head .active-level-control small {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  background: #FDE047 !important;
  border-radius: 9999px !important;
  padding: 3px 8px !important;
  line-height: 1 !important;
}

html body.fz-view-latihan #app .learning-launcher {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}
html body.fz-view-latihan #app .learning-launcher .launch-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  min-height: 104px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: 16px 12px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 4px 0 #E2E8F0, 0 8px 18px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
}
html body.fz-view-latihan #app .learning-launcher .launch-card:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #E2E8F0 !important;
}
html body.fz-view-latihan #app .learning-launcher .launch-card::before,
html body.fz-view-latihan #app .learning-launcher .launch-card::after,
html body.fz-view-latihan #app .learning-launcher .launch-card > svg,
html body.fz-view-latihan #app .learning-launcher .launch-card > i[data-lucide] {
  display: none !important;
}
html body.fz-view-latihan #app .learning-launcher .launch-card .launch-icon {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 4px !important;
  border-radius: 16px !important;
  flex-shrink: 0 !important;
}
html body.fz-view-latihan #app .learning-launcher .launch-card .launch-icon svg {
  width: 24px !important;
  height: 24px !important;
}
html body.fz-view-latihan #app .learning-launcher .launch-card > span:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
html body.fz-view-latihan #app .learning-launcher .launch-card b {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: #0F172A !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
}
html body.fz-view-latihan #app .learning-launcher .launch-card small {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
}
/* If there is an odd last card, center it nicely */
html body.fz-view-latihan #app .learning-launcher .launch-card:last-child:nth-child(odd) {
  grid-column: span 2 !important;
  max-width: calc(50% - 6px) !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* ==========================================================================
   17. GRAMMAR HUB — simple: title + progress strip + one row of tool pills
   ========================================================================== */
html body.fz-view-grammar #app .grammar-intensity-selector,
html body.fz-view-grammar #app .fz2-path-summary small,
html body.fz-view-grammar #app .exam-entry-chip small,
html body.fz-view-grammar #app .exam-entry-chip > svg:last-child {
  display: none !important;
}
html body.fz-view-grammar #app .fz2-path-summary {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  margin: 0 0 12px !important;
  min-height: 0 !important;
}
html body.fz-view-grammar #app .fz2-path-summary .fz2-path-ring {
  width: 46px !important;
  height: 46px !important;
  flex-shrink: 0 !important;
}
html body.fz-view-grammar #app .fz2-path-summary .fz2-path-ring-count {
  font-size: 12px !important;
}
html body.fz-view-grammar #app .fz2-path-summary b {
  font-size: 15px !important;
  line-height: 1.2 !important;
}
html body.fz-view-grammar #app .fz2-path-summary span:not(.fz2-path-ring):not(.fz2-path-ring-count) {
  font-size: 12px !important;
}
html body.fz-view-grammar #app .grammar-hub-tools {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  margin: 0 0 14px !important;
  padding: 2px 0 4px !important;
}
html body.fz-view-grammar #app .grammar-hub-tools::-webkit-scrollbar { display: none !important; }
html body.fz-view-grammar #app .grammar-hub-tools > .path-view-toggle {
  flex: 0 0 auto !important;
  margin: 0 !important;
  width: auto !important;
}
html body.fz-view-grammar #app .grammar-hub-tools .exam-entry-chip,
html body.fz-view-grammar #app .grammar-hub-tools .path-view-toggle > button {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 0 #E2E8F0 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
html body.fz-view-grammar #app .grammar-hub-tools .exam-entry-chip {
  background: #FEF3C7 !important;
  border-color: #FCD34D !important;
  box-shadow: 0 2px 0 #FCD34D !important;
}
html body.fz-view-grammar #app .grammar-hub-tools .exam-entry-chip b,
html body.fz-view-grammar #app .grammar-hub-tools .exam-entry-chip span {
  color: #92400E !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}
html body.fz-view-grammar #app .grammar-hub-tools svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   18. RITME BELAJAR MODAL — readable title, compact one-line options
   ========================================================================== */
.modal-intensity-sheet.first-time-intensity {
  max-width: 340px !important;
  margin: 0 auto !important;
  padding: 4px 2px 2px !important;
  text-align: center !important;
}
.modal-intensity-sheet.first-time-intensity .modal-mark {
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 6px !important;
}
.modal-intensity-sheet.first-time-intensity h2 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 0 14px !important;
}
.modal-intensity-sheet.first-time-intensity > p.muted,
.modal-intensity-sheet.first-time-intensity .option-desc,
.modal-intensity-sheet.first-time-intensity .option-specs {
  display: none !important;
}
.modal-intensity-sheet.first-time-intensity .modal-intensity-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.modal-intensity-sheet.first-time-intensity .intensity-option-card {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  min-height: 0 !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
}
.modal-intensity-sheet.first-time-intensity .intensity-option-card.is-selected {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
}
.modal-intensity-sheet.first-time-intensity .option-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
}
.modal-intensity-sheet.first-time-intensity .option-name b {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}
.modal-intensity-sheet.first-time-intensity .intensity-option-card.is-selected .option-name b {
  color: #047857 !important;
}
.modal-intensity-sheet.first-time-intensity .option-badge {
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 9px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
}

/* ========================================================
   FIEZEL PRACTICE & PEDAGOGY CLARITY ELEVATION
   ======================================================== */

/* 1. Lesson Example Card Contrast */
html body:not(.fz-teacher-mode) #app .lesson-example h3,
.lesson-example h3 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
}
html body:not(.fz-teacher-mode) #app .lesson-example p,
.lesson-example p {
  color: #CBD5E1 !important;
}
html body:not(.fz-teacher-mode) #app .lesson-example p strong,
.lesson-example p strong {
  color: #FCD34D !important;
}

/* 2. Memory Tip High Contrast */
.grammar-lesson-card .memory-tip,
.lesson-stage .memory-tip,
.card .memory-tip {
  background: #FFFBEB !important;
  border: 1.5px solid #FDE68A !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  color: #78350F !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
.grammar-lesson-card .memory-tip span,
.lesson-stage .memory-tip span,
.card .memory-tip span {
  color: #78350F !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.grammar-lesson-card .memory-tip svg,
.lesson-stage .memory-tip svg,
.card .memory-tip svg {
  color: #D97706 !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* 3. Scaffold Retry Nudge High Contrast */
html body:not(.fz-teacher-mode) #app #quizScaffoldNudge,
#quizScaffoldNudge,
.scaffold-nudge {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #FFFBEB !important;
  border: 1.5px solid #FCD34D !important;
  border-left: 4px solid #F59E0B !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12) !important;
  opacity: 1 !important;
  transform: none !important;
  margin-bottom: 12px !important;
}
html body:not(.fz-teacher-mode) #app #quizScaffoldNudge span,
#quizScaffoldNudge span,
.scaffold-nudge span {
  color: #78350F !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
html body:not(.fz-teacher-mode) #app #quizScaffoldNudge svg,
#quizScaffoldNudge svg,
.scaffold-nudge svg {
  color: #D97706 !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* 4. Feedback & Explanation Sheet */
#feedback {
  background: #0F172A !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  padding: 18px 20px 24px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3) !important;
  color: #F8FAFC !important;
}
#feedback .feedback-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
#feedback .feedback-title b {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}
/* m025-565 Stempel Ingatan: baris meta tipis tepat di bawah vonis, warna muted lembar ini
   (sama dengan details p.muted). Ditarik mendekati judul seperti dateline, bukan blok baru. */
#feedback .feedback-stamp {
  margin: -6px 0 10px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: #94A3B8 !important;
  -webkit-text-fill-color: #94A3B8 !important;
}
:lang(th) #feedback .feedback-stamp {
  font-size: 13px !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
}
#feedback p {
  color: #F1F5F9 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 6px 0 !important;
}
#feedback p strong {
  color: #38BDF8 !important;
}
#feedback .feedback-your-pick {
  background: rgba(239, 68, 68, 0.14) !important;
  border-left: 3px solid #EF4444 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  color: #FECACA !important;
}
#feedback .feedback-your-pick strong {
  color: #F87171 !important;
}
#feedback .feedback-rule-pill {
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  color: #E0F2FE !important;
}
#feedback .feedback-rule-pill strong {
  color: #38BDF8 !important;
}
#feedback details {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  margin: 10px 0 !important;
}
#feedback details summary {
  color: #FCD34D !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-size: 13px !important;
}
#feedback details p.muted {
  color: #94A3B8 !important;
  font-size: 12.5px !important;
  margin-top: 6px !important;
}
#feedback .feedback-memory-box {
  background: rgba(251, 191, 36, 0.12) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin: 12px 0 !important;
}
#feedback .feedback-memory-kicker {
  color: #FCD34D !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}
#feedback .feedback-memory-content {
  color: #FEF3C7 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}
#feedback .ai-btn {
  background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
  cursor: pointer !important;
  width: 100% !important;
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* 5. Step Guidance inside Feedback Sheet */
#feedback .tutor-steps {
  background: #FFF8EE !important;
  border: 1.5px solid #FDE68A !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin: 12px 0 !important;
}
#feedback .tutor-steps .eyebrow {
  color: #B45309 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  display: block !important;
  margin-bottom: 8px !important;
}
#feedback .tutor-step {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin-bottom: 8px !important;
}
#feedback .tutor-step::before {
  background: #FEF3C7 !important;
  border: 1.5px solid #D97706 !important;
  color: #92400E !important;
  font-weight: 800 !important;
}
#feedback .tutor-step-final {
  color: #9A3412 !important;
  -webkit-text-fill-color: #9A3412 !important;
  border-top: 1px dashed rgba(217, 119, 6, 0.4) !important;
  font-size: 13.5px !important;
  padding-top: 8px !important;
  margin-top: 8px !important;
}

/* 6. Enforce Memory Tip Text In All Cards */
html body #app .card p.memory-tip,
html body #app .card p.memory-tip span,
html body #app .card .memory-tip,
html body #app .card .memory-tip span,
html body #app .memory-tip,
html body #app .memory-tip span {
  color: #78350F !important;
  -webkit-text-fill-color: #78350F !important;
  font-weight: 700 !important;
}

/* ========================================================
   7. GRAMMAR ROADMAP: COMPACT, EYE-FRIENDLY, CLEAN CARDS
   ======================================================== */
.path-step {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: flex-start !important;
  padding: 6px 0 14px !important;
}
.path-step::after {
  left: 21px !important;
  top: 48px !important;
}
.path-node {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  box-shadow: 0 3px 0 #E2E8F0 !important;
}
.path-ring {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.path-ring > b {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}
.path-ring > i,
.path-ring svg {
  width: 18px !important;
  height: 18px !important;
  color: #10B981 !important;
}
.path-step.is-current .path-node {
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18) !important;
  animation: none !important;
}
.path-step.is-current .path-ring > b {
  color: #D97706 !important;
}

/* Compact, clean, friendly lesson card */
.path-step .path-label,
html body.fz-view-grammar #app .path-step .path-label {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.path-step.is-current .path-label,
html body.fz-view-grammar #app .path-step.is-current .path-label {
  border: 2px solid #F59E0B !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12) !important;
}
.path-step.is-locked .path-label,
html body.fz-view-grammar #app .path-step.is-locked .path-label {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  opacity: 0.82 !important;
  box-shadow: none !important;
}
.path-step .path-label b,
html body.fz-view-grammar #app .path-step .path-label b {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.path-step.is-locked .path-label b {
  color: #64748B !important;
}
.path-step .path-label > span,
html body.fz-view-grammar #app .path-step .path-label > span {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.path-step.is-locked .path-label > span {
  color: #94A3B8 !important;
}
.path-step .path-label .lesson-lock-note {
  font-size: 11px !important;
  color: #94A3B8 !important;
  margin: 2px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.path-step .path-label .lesson-lock-note svg {
  width: 12px !important;
  height: 12px !important;
  color: #94A3B8 !important;
}

/* Compact CTA button & skip link */
.path-step .path-label .path-cta,
html body.fz-view-grammar #app .path-step .path-label .path-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  align-self: flex-start !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  margin-top: 6px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #FBBF24, #F59E0B) !important;
  /* Audit UX grammar U14: putih di atas amber hanya 2,6:1; teks gelap di atas amber terang > 7:1. */
  color: #1F1A14 !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25) !important;
}
.path-step .path-label .lesson-skip-link,
html body.fz-view-grammar #app .path-step .path-label .lesson-skip-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  align-self: flex-start !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748B !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 3px 0 !important;
  margin-top: 2px !important;
}
.path-step.is-locked .lesson-skip-link {
  display: none !important;
}
.path-step .path-mascot {
  display: none !important;
}

/* ========================================================
   8. FLOATING ACTION BAR & RETRY BAR: NO DARK BACKGROUND
   ======================================================== */
#quizFloatingBar,
.quiz-floating-bar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}
#quizFloatingBar *,
.quiz-floating-bar * {
  pointer-events: auto !important;
}
.quiz-floating-retry {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
  padding: 12px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: calc(100% - 32px) !important;
  max-width: 380px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.retry-bar-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #B45309 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-align: center !important;
  white-space: normal !important;
}
.retry-bar-label svg {
  color: #D97706 !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
.retry-giveup-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 280px !important;
  min-height: 40px !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15) !important;
  transition: transform 0.15s ease, background-color 0.15s ease !important;
}
.retry-giveup-btn:active {
  transform: scale(0.98) !important;
}

/* ========================================================
   9. HIGH CONTRAST TUTOR TURN & TEACHER CLUE
   ======================================================== */
#tutorTurn,
.tutor-turn {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-left: 4px solid #047857 !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}
.tutor-turn-face,
html body .tutor-turn .tutor-turn-face,
#tutorTurn .tutor-turn-face {
  background: #10B981 !important;
  color: #FFFFFF !important;
}
.tutor-turn-face svg,
html body .tutor-turn .tutor-turn-face svg,
#tutorTurn .tutor-turn-face svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}
.tutor-turn-head b,
html body .tutor-turn .tutor-turn-head b,
#tutorTurn .tutor-turn-head b {
  color: #047857 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}
.tutor-turn-say,
#tutorTurn .tutor-turn-say {
  color: #0F172A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  margin: 6px 0 0 !important;
}
.tutor-turn-ask,
#tutorTurn .tutor-turn-ask {
  color: #0F172A !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  margin: 8px 0 0 !important;
}
.tutor-speed-pill,
html body .tutor-speed-pill,
#tutorTurn .tutor-speed-pill {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #047857 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
.tutor-speed-pill svg,
#tutorTurn .tutor-speed-pill svg {
  color: #047857 !important;
}
.tutor-diagnostic-clue,
#tutorTurn .tutor-diagnostic-clue {
  background: #ECFDF5 !important;
  border: 1.5px solid #A7F3D0 !important;
  border-left: 4px solid #059669 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 8px 0 !important;
}
.tutor-diagnostic-clue svg,
#tutorTurn .tutor-diagnostic-clue svg {
  color: #047857 !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
.tutor-diagnostic-clue span,
#tutorTurn .tutor-diagnostic-clue span {
  color: #064E3B !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}
.tutor-ladder {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin-top: 8px !important;
}
.tutor-ladder .eyebrow {
  color: #047857 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}
.tutor-ladder .tutor-turn-ask {
  color: #0F172A !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.tutor-ladder .tutor-ladder-now {
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ULAS BARENG (RETEACH TUTOR CARD) */
.tutor-card,
.card .tutor-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 20px !important;
  padding: 20px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  display: grid !important;
  gap: 14px !important;
}
.tutor-card-head small {
  color: #047857 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.tutor-card-head b {
  color: #0F172A !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
.card .tutor-card-why,
.card .tutor-card .tutor-card-why,
.tutor-card .tutor-card-why,
.tutor-card-why {
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-left: 4px solid #10B981 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.card .tutor-card p,
.card .tutor-card-rule,
.card .tutor-card .tutor-card-rule,
.tutor-card .tutor-card-rule,
.tutor-card-rule {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.card .tutor-card-cue,
.card .tutor-card .tutor-card-cue,
.tutor-card .tutor-card-cue,
.tutor-card-cue {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}
.tutor-card-cue svg {
  color: #F59E0B !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
#teachNext {
  min-height: 48px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  border-radius: 14px !important;
}

/* ========================================================
   10. HIDE BRAINCORE TELEMETRY PILLS IN FEEDBACK
   ======================================================== */
.braincore-telemetry-row,
#feedback .braincore-telemetry-row {
  display: none !important;
}

/* ========================================================
   11. GRAMMAR LESSON DIRECT HERO CARD
   ======================================================== */
.grammar-lesson-card .grammar-start-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 24px 20px 20px !important;
}
.grammar-hero-badge {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #D97706 !important;
  background: #FEF3C7 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  margin-bottom: 12px !important;
}
.grammar-start-hero h2 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.3 !important;
  margin: 0 0 12px !important;
}
.grammar-brief-rule {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  margin: 0 0 20px !important;
}
.grammar-lesson-card b,
.grammar-lesson-card strong,
.grammar-brief-rule b,
.grammar-brief-rule strong,
.grammar-brief-example b,
.grammar-brief-example strong {
  color: #0F172A !important;
  font-weight: 800 !important;
}
.grammar-brief-example {
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 24px !important;
}
.grammar-brief-example span {
  color: #64748B !important;
  font-weight: 700 !important;
}
.grammar-start-direct-btn {
  width: 100% !important;
  height: 52px !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: none !important;
  cursor: pointer !important;
}

/* ========================================================
   12. WIDE-SCREEN DESKTOP & TABLET COHESIVE FRAMING
   Eliminates left-right empty void feeling across the app
   ======================================================== */
@media (min-width: 768px) {
  body {
    background: radial-gradient(circle at 50% 15%, #FFFDF8 0%, #F5EFEB 100%) !important;
    background-attachment: fixed !important;
  }
  .app,
  main.app {
    max-width: 680px !important;
    margin: 20px auto !important;
    padding: 24px 28px calc(60px + env(safe-area-inset-bottom)) 28px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #EFE8DF !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 60px rgba(46, 39, 36, 0.08), 0 4px 16px rgba(46, 39, 36, 0.04) !important;
    min-height: calc(100vh - 40px) !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
  }
  body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: radial-gradient(circle at 10% 25%, rgba(254, 243, 199, 0.4) 0%, transparent 50%),
                radial-gradient(circle at 90% 75%, rgba(209, 250, 229, 0.3) 0%, transparent 50%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
}

/* ========================================================
   13. TOKEN ORDER (SUSUN KATA) PRECISE BALANCED ACTIONS
   Full-width balanced 2-column actions grid
   ======================================================== */
.token-actions,
#gxTokenOrderContainer .token-actions,
.token-order-container .token-actions {
  display: grid !important;
  grid-template-columns: minmax(100px, 1fr) minmax(150px, 1.8fr) !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 24px !important;
  box-sizing: border-box !important;
}

.token-reset-btn,
#gxTokenOrderContainer .token-reset-btn,
.token-order-container .token-reset-btn,
#tokenResetBtn {
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 16px !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  border: 1.5px solid #CBD5E1 !important;
  border-bottom: 3.5px solid #94A3B8 !important;
  border-radius: 16px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 120ms ease !important;
  box-sizing: border-box !important;
}

.token-reset-btn svg,
#tokenResetBtn svg {
  width: 16px !important;
  height: 16px !important;
  color: #0F172A !important;
}

.token-reset-btn:not(:disabled):hover,
#tokenResetBtn:not(:disabled):hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

.token-reset-btn:not(:disabled):active,
#tokenResetBtn:not(:disabled):active {
  transform: translateY(2px) !important;
  border-bottom-width: 1.5px !important;
}

.token-reset-btn:disabled,
#tokenResetBtn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  border-bottom-color: #E2E8F0 !important;
  color: #475569 !important;
}

.token-submit-btn,
#gxTokenOrderContainer .token-submit-btn,
.token-order-container .token-submit-btn,
#tokenSubmitBtn {
  min-height: 48px !important;
  height: 48px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 120ms ease !important;
  box-sizing: border-box !important;
}

/* Disabled state */
.token-submit-btn:disabled,
#tokenSubmitBtn:disabled {
  background: #E2E8F0 !important;
  color: #94A3B8 !important;
  border: 1.5px solid #CBD5E1 !important;
  border-bottom: 3.5px solid #CBD5E1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Enabled normal state */
.token-submit-btn:not(:disabled):not(.token-submit-retry),
#tokenSubmitBtn:not(:disabled):not(.token-submit-retry) {
  background: linear-gradient(180deg, #10B981, #059669) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-bottom: 3.5px solid #047857 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

.token-submit-btn:not(:disabled):not(.token-submit-retry):hover,
#tokenSubmitBtn:not(:disabled):not(.token-submit-retry):hover {
  background: linear-gradient(180deg, #059669, #047857) !important;
}

.token-submit-btn:not(:disabled):not(.token-submit-retry):active,
#tokenSubmitBtn:not(:disabled):not(.token-submit-retry):active {
  transform: translateY(2px) !important;
  border-bottom-width: 1.5px !important;
}

/* Retry state (Periksa Ulang) */
.token-submit-btn.token-submit-retry,
#tokenSubmitBtn.token-submit-retry {
  background: linear-gradient(180deg, #F59E0B, #D97706) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-bottom: 3.5px solid #B45309 !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25) !important;
}

.token-bank-label {
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

/* ========================================================
   14. ONBOARDING LANGUAGE PICKER (ZERO DOUBLE-CARD, SYMMETRIC)
   Clean, high-contrast, country above flag, large flags
   ======================================================== */
.fiezel-language-sheet,
div.fiezel-sheet.fiezel-language-sheet {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 32px 16px 24px !important;
  margin: auto auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 440px !important;
  box-sizing: border-box !important;
}

.fiezel-language-sheet .fiezel-language-kicker {
  display: inline-block !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #D97706 !important;
  background: #FEF3C7 !important;
  border: 1px solid #FDE68A !important;
  border-radius: 9999px !important;
  padding: 4px 14px !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}

.fiezel-language-sheet .fiezel-title,
.fiezel-language-sheet h2.fiezel-title {
  color: #0F172A !important;
  font-family: var(--fz-display, "Instrument Serif", Georgia, serif) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 0 0 10px 0 !important;
  text-align: center !important;
}

.fiezel-language-sheet .fiezel-body {
  color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  margin: 0 auto 26px auto !important;
  text-align: center !important;
  max-width: 340px !important;
}

.fiezel-language-grid,
div.fiezel-language-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.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: 20px 14px 18px !important;
  min-height: 136px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.fiezel-language-choice:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
  border-bottom-color: #64748B !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1) !important;
}

.fiezel-language-choice:active {
  transform: translateY(2px) !important;
  border-bottom-width: 2px !important;
}

.fiezel-language-choice.is-selected {
  background: #F0F9FF !important;
  border-color: #0284C7 !important;
  border-bottom-color: #0369A1 !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.18) !important;
}

.fiezel-language-copy,
.fiezel-language-choice .fiezel-language-copy {
  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;
  order: 1 !important;
}

.fiezel-language-copy b,
.fiezel-language-choice .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-copy small,
.fiezel-language-choice .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-language-flag {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  order: 2 !important;
}

.fiezel-language-flag .fiezel-flag-svg,
.fiezel-language-choice .fiezel-flag-svg {
  width: 68px !important;
  height: 44px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  display: block !important;
}


/* m025-454 Gelombang 1 audit kabel BrainCore: kartu "Kata Braincore Hari Ini" (Beranda), panel
   bukti belajar (Progres), dan baris fokus hub Grammar. Teks gelap di atas kartu terang, tombol
   amber bertulisan gelap: kontras di atas 4,5:1 pada keduanya. */
/* User directive: HILANGKAN SELURUH KARTU TENTANG KATA BRAINCORE HARI INI DI HALAMAN PANEL HOME */
.today-home-cockpit .fz-bc-card,
[data-testid="braincore-home-card"],
.fz-bc-card {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.fz-bc-head{display:flex;align-items:center;gap:8px;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:#7A4E00}
.fz-bc-arah{margin:0;font-size:1rem;font-weight:700;line-height:1.35;color:#1F1A14}
.fz-bc-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:10px;border-top:1px dashed #F1E3C6}
.fz-bc-row p{margin:0;font-size:.92rem;line-height:1.35;color:#3A3128}
.fz-bc-card button.fz-bc-cta{flex:0 0 auto;min-height:44px;padding:0 14px;border-radius:14px;border:0;background:#FFC93C;color:#1F1A14;font-weight:800;font-size:.85rem;box-shadow:0 3px 0 #D99A00;cursor:pointer}
.fz-bc-card button.fz-bc-cta:active{transform:translateY(2px);box-shadow:0 1px 0 #D99A00}
.fz-bc-proof{margin:0;padding-left:18px;display:grid;gap:6px;color:#1F1A14}
.fz-bc-focus{margin:8px 0 0;padding:8px 12px;border-radius:12px;background:#FFF6DF;color:#5C3B00;font-weight:700;font-size:.9rem}

/* Audit UX grammar U7 (2026-10-04): judul tur tercat gelap di kartu gelap (1,02:1) karena isi teks
   h2 global memakai fill transparan. Warna dan fill dipaku putih khusus di kartu tur. */
.fz-tour .fz-tour-card h2{color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important;background:none!important}

/* Audit UX grammar U8 (2026-10-04): bar mengambang "coba lagi" / "Lanjut" (position:fixed) menutupi
   kartu petunjuk dan kartu "Trik Cepat Ingat" di bawahnya. Selama bar itu ada, isi kuis diberi ruang
   bawah setinggi bar. Tombol "Buntu? Buka pembahasan lengkap" di kartu guru disembunyikan selama bar
   coba lagi tampil, karena bar itu sudah punya tombol "Buka Pembahasan": satu aksi, satu tombol. */
.quiz-shell:has(#quizFloatingBar){padding-bottom:180px!important}
.quiz-shell:has(#quizFloatingBar .quiz-floating-retry) #tutorStuck{display:none!important}

/* Audit UX grammar U12 (2026-10-04): satu contoh kalimat di kartu materi, kata kuncinya ditebalkan. */
html body #app .grammar-brief-example{margin:4px 0 14px;padding:10px 14px;border-radius:14px;background:#FFF6DF!important;color:#3A2A00!important;-webkit-text-fill-color:#3A2A00!important;font-size:1rem;line-height:1.45;text-transform:none!important;letter-spacing:normal!important}
html body #app .grammar-brief-example span{font-weight:800;color:#7A4E00!important;-webkit-text-fill-color:#7A4E00!important;background:none!important;margin-right:4px;padding:0!important;text-transform:none!important}
html body #app .grammar-brief-example b{color:#9A3412!important;-webkit-text-fill-color:#9A3412!important;font-weight:800;background:none!important}

/* Audit UX grammar U14 (2026-10-04): "Buka materi" putih di atas amber (2,6:1) dan catatan pelajaran
   terkunci abu muda (2,45:1). Teks tombol digelapkan, catatan kunci dipertegas: keduanya di atas 4,5:1. */
.path-step .lesson-lock-note,html body #app .path-step .lesson-lock-note{color:#5B5348!important}

/* Audit UX grammar U13, U15 sampai U17 dan sisa kontras (2026-10-04, putaran kedua).
   U13: toast di sesi pelajaran turun ke bawah layar (24px) dan menutup pilihan jawaban serta bar
        "Lanjut". Selama pelajaran, toast naik menutupi bilah atas (tombol keluar dan hitungan soal)
        saja, yang tidak perlu disentuh dalam 2,6 detik itu.
   U15: dua desain bertabrakan di simpul jalur hub. fiezel-2.css membuatnya titik 16px tanpa nomor
        (`.path-ring>b{display:none}`), lalu tactile-clay membesarkan tombolnya jadi kotak 44px
        berpadding tombol umum, jadi yang tampil kotak putih kosong. Kotaknya dipertahankan dan
        diisi: lingkaran 34px, nomor pelajaran, ikon kunci atau centang. Ikon pil "Ujian Naik Level"
        tercat krem di atas putih; kini cokelat tua.
   U16: chip "Sudah dicoba" abu #94A3B8 di atas abu tipis (2,24:1) kini abu tua. Tetapi pilihan yang
        sudah dicoba tetap `:disabled`, dan `body .option:disabled:not(.correct):not(.wrong){opacity:.78}`
        (fiezel-2.css) meredupkan seluruh isinya, jadi angka yang dirender cuma 4,31:1. Opasitas
        dikembalikan khusus selama chip tampil (di bawah, sesudah pasangan warnanya).
   U17: petunjuk "Ketuk keping di bawah..." #94A3B8 (2,45:1) kini #5B6474 (di atas 5:1).
   Sisa kontras dari probe ulang:
     - kalimat pegangan ingatan tutor (#FDE68A) tampil di kartu tangga petunjuk yang TERANG (1,19:1);
     - kartu "Trik Cepat Ingat" bertinta cokelat di atas panel pembahasan gelap (1,56:1). Kartunya
       diberi latar krem padat supaya terbaca di panel mana pun;
     - label "Daftar kata tersedia" abu sangat muda (1,48:1);
     - label "PRASASTI BARU" kuning di atas krem (1,29:1). */
body.fz-lesson-mode .toast,body:has(.quiz-shell) .toast{top:calc(66px + env(safe-area-inset-top));bottom:auto!important}
html body #app .path-step .path-node{padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}
html body #app .path-step .path-node .path-ring{width:34px!important;height:34px!important;border-radius:50%!important;flex:none!important}
html body #app .path-step .path-node .path-ring > b{display:block!important;margin:0!important;padding:0!important;height:auto!important;line-height:1!important;background:none!important;border:0!important;box-shadow:none!important;font-size:14px!important;font-weight:800!important;color:#1F1A14!important;-webkit-text-fill-color:#1F1A14!important}
html body #app .path-step .path-node .path-ring > svg{display:block!important;width:18px!important;height:18px!important;color:#1F1A14!important}
html body #app .path-step.is-current .path-node .path-ring{background:#FFC93C!important}
html body #app .path-step.is-locked .path-node .path-ring > svg{color:#5B5348!important}
html body #app .path-step.is-mastered .path-node .path-ring > svg,html body #app .path-step.is-completed .path-node .path-ring > svg{color:#0B3B24!important}
html body #app .exam-entry-chip > svg{display:block!important;color:#8A5A00!important;opacity:1!important}
html body #app .path-step .path-node .path-ring > svg,html body #app .exam-entry-chip > svg{fill:none!important;stroke:currentColor!important;background:none!important;border-radius:0!important;box-shadow:none!important}
html body #app .path-step .path-node .path-ring > svg *,html body #app .exam-entry-chip > svg *{color:inherit!important;fill:none!important;stroke:currentColor!important}
html body #app .quiz-shell .option .tried-tag,html body .tried-tag{background:#E8EDF3!important;color:#3F4A5A!important;-webkit-text-fill-color:#3F4A5A!important}
/* U16 lanjutan: `body .option:disabled:not(.correct):not(.wrong){opacity:.78}` (fiezel-2.css) ikut
   meredupkan `.tried-tag` yang bersarang, jadi kontras mentah 7,63:1 hanya terender ~4,31:1.
   Selama chip "Sudah dicoba" tampil, pilihan yang sudah dicoba tidak lagi diredupkan. Ditulis di
   sini (setelah pasangan warnanya) dengan spesifisitas yang menang atas `.option:disabled:...`. */
html body #app #options .option.was-tried:disabled,html body #app .quiz-shell .option.was-tried:disabled,body .option.was-tried:disabled{opacity:1!important}
html body .puzzle-empty-hint{color:#5B6474!important;-webkit-text-fill-color:#5B6474!important}
html body #app .tutor-ladder .tutor-turn-ask,html body #tutorTurn .tutor-ladder p.tutor-turn-ask{color:#7A3E00!important;-webkit-text-fill-color:#7A3E00!important}
html body #feedback .feedback-memory-box,html body .card .feedback-memory-box{background:#FFF6DF!important;border-color:#F1D9A8!important}
html body #feedback .feedback-memory-box .feedback-memory-kicker,html body .card .feedback-memory-box .feedback-memory-kicker{color:#7A4E00!important;-webkit-text-fill-color:#7A4E00!important}
html body #feedback .feedback-memory-box .feedback-memory-content,html body #feedback .feedback-memory-box .feedback-memory-content span,html body .card .feedback-memory-box .feedback-memory-content,html body .card .feedback-memory-box .feedback-memory-content span{color:#3A2A00!important;-webkit-text-fill-color:#3A2A00!important}
html body #app .token-bank-label,html body .gx-gloss-bar .token-bank-label{color:#4A5363!important;-webkit-text-fill-color:#4A5363!important}
html body .fz-prasasti-card .modal-mark{color:#8A5A00!important;-webkit-text-fill-color:#8A5A00!important}
/* Probe ulang juga menemukan dua JUDUL yang tidak terlihat sama sekali: judul modal "Misi Kosakata
   Kunci" dan judul kemenangan FIEZEL QUEST tercat putih (aturan umum `.modal-panel h2` untuk
   panel gelap) di atas kartu putih, 1:1. Keduanya dipaku gelap. Sisanya label kecil di bawah
   4,5:1 yang digelapkan satu tingkat dalam keluarga warnanya sendiri. */
html body .gateway-header h2,html body .modal .gateway-header h2,html body h2.victory-headline,html body .modal h2.victory-headline{color:#0F172A!important;-webkit-text-fill-color:#0F172A!important;background:none!important}
html body .active-level-control strong{color:#9A4A00!important;-webkit-text-fill-color:#9A4A00!important}
/* U19 (temuan probe berkontras-sadar-opasitas): kartu pelajaran TERKUNCI memakai
   `.path-step.is-locked .path-label{opacity:.82}`, jadi baris meta "pola grammar dasar · Dikuasai 0%"
   (#64748B di atas kartu #F8FAFC) yang mentah 4,62:1 terender ~3,3:1. Nadanya dinaikkan supaya
   tetap terlihat "terkunci" namun lolos 4,5:1 pada opasitas yang sama. Judul dan catatan kunci
   sudah lolos dan tidak disentuh. */
html body.fz-view-grammar #app .path-step.is-locked .path-label > span{color:#3F4A5A!important;-webkit-text-fill-color:#3F4A5A!important}
html body .gateway-badge{color:#075985!important;-webkit-text-fill-color:#075985!important}
html body .gw-meaning{color:#0369A1!important;-webkit-text-fill-color:#0369A1!important}
html body .stage-tag{color:#047857!important;-webkit-text-fill-color:#047857!important}
html body #app .grammar-hero-badge{color:#8A4B00!important;-webkit-text-fill-color:#8A4B00!important}
html body #tutorTurn .tutor-turn-head b{color:#34D399!important;-webkit-text-fill-color:#34D399!important}
/* JLPT Sheet Tabs in Daylight Travertine Drawer (High Contrast) */
.jlpt-sheet-tabs button.jlpt-tab-chip,
.jlpt-sheet-tabs button.jlpt-sheet-tab-btn,
.jlpt-sheet-tabs .jlpt-tab-chip,
button.jlpt-tab-chip,
button.jlpt-sheet-tab-btn {
  background: #FAF6EF !important;
  border: 1.5px solid #E8DFD3 !important;
  box-shadow: 0 1.5px 0 #D8CEBF !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-weight: 800 !important;
}
.jlpt-sheet-tabs button.jlpt-tab-chip:hover,
.jlpt-sheet-tabs button.jlpt-sheet-tab-btn:hover {
  background: #F3ECE1 !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
}
.jlpt-sheet-tabs button.jlpt-tab-chip.active,
.jlpt-sheet-tabs button.jlpt-sheet-tab-btn.active,
.jlpt-sheet-tabs .jlpt-tab-chip.active,
button.jlpt-tab-chip.active,
button.jlpt-sheet-tab-btn.active {
  background: #FFE02E !important;
  border-color: #F59E0B !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 0 #D97706 !important;
}
.jlpt-sheet-tab-count,
.jlpt-sheet-tabs button.jlpt-tab-chip span,
#jlptVocabCount {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* JLPT Tips Box & Tip Card High Contrast */
.jlpt-explain-tip-box,
.jlpt-explain-tip-card,
.listening-modal .jlpt-explain-tip-card,
div.jlpt-explain-tip-card {
  background: #EFF6FF !important;
  border: 1.5px solid #BAE6FD !important;
  color: #0369A1 !important;
  -webkit-text-fill-color: #0369A1 !important;
}
.jlpt-explain-tip-box b,
.jlpt-explain-tip-box strong,
.jlpt-explain-tip-card b,
.jlpt-explain-tip-card strong,
.listening-modal .jlpt-explain-tip-card b,
div.jlpt-explain-tip-card b {
  color: #0C4A6E !important;
  -webkit-text-fill-color: #0C4A6E !important;
  font-weight: 800 !important;
}

/* 17. CLEAN DAYLIGHT MINIMALIST LEVEL PROGRESSION CARDS (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: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 8px 0 !important;
}

.level-picker-card,
button.level-picker-card {
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 13px !important;
  padding: 9px 12px !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  box-shadow: 0 2px 0 #CBD5E1 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.level-picker-card strong {
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  line-height: 1.1 !important;
  min-width: 28px !important;
  flex-shrink: 0 !important;
}

.level-picker-card span {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !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;
  -webkit-text-fill-color: #92400E !important;
}

.level-picker-card.is-active span {
  color: #78350F !important;
  -webkit-text-fill-color: #78350F !important;
  font-weight: 700 !important;
}

.level-picker-card.is-locked {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  box-shadow: none !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

.level-picker-card.is-locked strong,
.level-picker-card.is-locked span {
  color: #94A3B8 !important;
  -webkit-text-fill-color: #94A3B8 !important;
}

.level-trust-badge {
  background: #F1F5F9 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  margin-top: 0 !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

.level-trust-badge.is-verified {
  background: #D1FAE5 !important;
  color: #065F46 !important;
  -webkit-text-fill-color: #065F46 !important;
}

.level-exam-cta {
  padding: 10px 12px !important;
  margin: 8px 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !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;
  text-align: left !important;
}

.level-exam-cta b {
  font-size: 0.84rem !important;
  line-height: 1.2 !important;
  display: block !important;
}

.level-exam-cta span {
  font-size: 0.68rem !important;
  line-height: 1.25 !important;
  display: block !important;
}

.level-exam-cta button.primary,
#openLevelExam {
  padding: 8px 14px !important;
  font-size: 0.78rem !important;
  min-height: 36px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* m025-501 TOPBAR AUTHORITY: satu aturan final untuk SEMUA panel.
   Fixed (sama seperti .bottomnav) -> tidak ada sticky jitter saat scroll;
   tinggi identik di semua tab -> tidak ada beda ukuran antar panel. */
html body header.topbar,
html body.fz-lux header.topbar,
html body.fz-view-classroom header.topbar,
html body.fz-view-profile header.topbar,
html body.fz-view-latihan header.topbar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important; max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  max-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  padding: env(safe-area-inset-top, 0px) 16px 0 16px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: var(--bgDay, #FDFAF3) !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 12px !important;
  view-transition-name: topbar !important;
}
/* m025-573: tepi topbar muncul HANYA saat isi halaman lewat di bawahnya (kelas .is-scrolled
   dipasang app.js syncTopbarScrolled). Aturan di atas sengaja tanpa garis dan bayangan, dan
   latarnya nyaris sama dengan latar halaman, jadi saat di-scroll kartu tampak terpotong garis
   tak terlihat. Di puncak halaman topbar tetap rata menyatu dengan status bar. */
html body header.topbar.is-scrolled,
html body.fz-lux header.topbar.is-scrolled {
  box-shadow: 0 1px 0 rgba(94, 20, 32, 0.08), 0 8px 18px -12px rgba(36, 26, 17, 0.28) !important;
}
@media (prefers-reduced-motion: no-preference) {
  html body header.topbar,
  html body.fz-lux header.topbar { transition: box-shadow .18s ease !important; }
}
::view-transition-old(topbar),
::view-transition-new(topbar) {
  animation: none !important;
  mix-blend-mode: normal !important;
}
#topSettingsBtn {
  display: none !important;
}
html body.fz-view-profile #topSettingsBtn {
  display: inline-flex !important;
}
html body.fz-view-profile #fzCourseSwitchBtn {
  display: none !important;
}
html body main.app.app,html body.fz-lux main.app.app,html body.fz-lux.fz-stage-home main.app.app {
  padding-top: calc(56px + env(safe-area-inset-top, 0px) + 4px) !important;
}
html body.fz-lesson-mode main.app.app,html body.fz-lux.fz-lesson-mode main.app.app,html body.fz-lux.fz-stage-quiz main.app.app,html body:has(.quiz-shell) main.app.app,html body.fz-view-chat main.app.app,html body.fz-lux.fz-view-chat main.app.app { padding-top: 0 !important; }
html body.fz-lesson-mode header.topbar,
html body.fz-teacher-mode header.topbar,
html body.fz-teacher-mode nav.bottomnav,
html body.fz-teacher-mode .bottomnav,
html body.fz-teacher-mode .nav-scrim,
html body.fz-auth-open header.topbar,
html body.fz-auth-open nav.bottomnav,
html body.fz-auth-open .bottomnav,
html body.fz-auth-open .nav-scrim,
html body.fz-stage-sl.fsl-session-active header.topbar { display: none !important; }
body.fz-auth-open { background-color: #1B1418 !important; }

/* ==========================================================================
   18. IN-QUIZ LISTENING QUESTION & SKILLS LAB TACTILE CLAY HARMONY
   Physical 3D bevels, Solar Gold audio CTA, animated wave visualizer,
   and clean docked header with tactile help dot for Skills Lab.
   ========================================================================== */

/* Hero In-Quiz Listening Card */
.quiz-listen-hero {
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 24px !important;
  box-shadow: 0 5px 0 #CBD5E1, 0 12px 24px rgba(15, 23, 42, 0.05) !important;
  padding: 22px 18px 18px !important;
  margin: 10px 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.quiz-listen-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Solar Gold Tactile Clay Audio Button */
#quizListen,
.quiz-listen-btn,
button.quiz-listen-btn,
.quiz-listen-btn-hero {
  background: linear-gradient(180deg, #FFE054 0%, #FFB703 100%) !important;
  border: 2px solid #F59E0B !important;
  border-radius: 999px !important;
  color: #2E1800 !important;
  font-family: var(--font-sans) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  padding: 14px 28px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 4px 0 #D97706, 0 10px 20px rgba(245, 158, 11, 0.25) !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#quizListen:hover:not(:disabled),
.quiz-listen-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFEA78 0%, #FFC11E 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 0 #D97706, 0 12px 24px rgba(245, 158, 11, 0.3) !important;
}

#quizListen:active:not(:disabled),
.quiz-listen-btn:active:not(:disabled) {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #D97706, 0 4px 8px rgba(245, 158, 11, 0.2) !important;
}

#quizListen:focus-visible,
.quiz-listen-btn:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.45) !important;
  outline-offset: 3px !important;
}

#quizListen.is-playing {
  animation: fzListenPulse 1.2s ease-in-out infinite alternate !important;
}

@keyframes fzListenPulse {
  0% { box-shadow: 0 4px 0 #D97706, 0 0 0 0 rgba(245, 158, 11, 0.4); }
  100% { box-shadow: 0 4px 0 #D97706, 0 0 0 10px rgba(245, 158, 11, 0); }
}

#quizListen:disabled,
.quiz-listen-btn:disabled,
#quizListen.is-depleted {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #94A3B8 !important;
  box-shadow: 0 3px 0 #CBD5E1 !important;
  transform: none !important;
  cursor: not-allowed !important;
  opacity: 0.8 !important;
}

#quizListen svg,
.quiz-listen-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.5 !important;
}

/* Speed Toggle Button (1.0x / 0.8x) */
#quizListenSpeed,
.quiz-listen-speed-btn,
button.quiz-listen-speed-btn {
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  min-height: 48px !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  box-shadow: 0 3px 0 #CBD5E1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.12s ease !important;
}

#quizListenSpeed:hover,
.quiz-listen-speed-btn:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  transform: translateY(-1px) !important;
}

#quizListenSpeed:active,
.quiz-listen-speed-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #CBD5E1 !important;
}

#quizListenSpeed.is-slow,
.quiz-listen-speed-btn.is-slow {
  background: #FEF9C3 !important;
  border-color: #F59E0B !important;
  color: #92400E !important;
  box-shadow: 0 3px 0 #D97706 !important;
}

/* Visual Wave Equalizer */
#quizAudioWave,
.quiz-audio-wave {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 28px !important;
  margin: 6px 0 4px !important;
}

#quizAudioWave.hidden,
.quiz-audio-wave.hidden {
  display: none !important;
}

#quizAudioWave span,
.quiz-audio-wave span {
  display: inline-block !important;
  width: 5px !important;
  background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%) !important;
  border-radius: 999px !important;
  animation: quizTactileWaveBounce 0.75s ease-in-out infinite alternate !important;
}

#quizAudioWave span:nth-child(1), .quiz-audio-wave span:nth-child(1) { height: 35% !important; animation-delay: 0.1s !important; }
#quizAudioWave span:nth-child(2), .quiz-audio-wave span:nth-child(2) { height: 80% !important; animation-delay: 0.28s !important; }
#quizAudioWave span:nth-child(3), .quiz-audio-wave span:nth-child(3) { height: 100% !important; animation-delay: 0.15s !important; }
#quizAudioWave span:nth-child(4), .quiz-audio-wave span:nth-child(4) { height: 65% !important; animation-delay: 0.4s !important; }
#quizAudioWave span:nth-child(5), .quiz-audio-wave span:nth-child(5) { height: 45% !important; animation-delay: 0.22s !important; }

@keyframes quizTactileWaveBounce {
  0% { transform: scaleY(0.25); opacity: 0.65; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* High Contrast Audio Note */
#quizListenNote,
.quiz-listen .muted,
.quiz-listen-hero .muted {
  color: #334155 !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  display: block !important;
  margin: 2px 0 0 !important;
}

/* Skills Lab Topbar & Tactile Clay Help Dot */
.skill-page-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  position: relative !important;
  top: auto !important;
  z-index: 20 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.skill-topbar-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.skill-back-btn,
button.skill-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  box-shadow: 0 3px 0 #CBD5E1 !important;
  color: #0F172A !important;
  font-family: var(--font-sans) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

.skill-back-btn:hover,
button.skill-back-btn:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  transform: translateY(-1px) !important;
}

.skill-back-btn:active,
button.skill-back-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #CBD5E1 !important;
}

.skill-back-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.5 !important;
}

.skill-help-dot,
button.skill-help-dot,
html.fiezel-ui-v6 .skill-help-dot {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  box-shadow: 0 3px 0 #CBD5E1 !important;
  color: #0F172A !important;
  font-family: var(--font-sans) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

.skill-help-dot:hover,
button.skill-help-dot:hover {
  background: #FEF9C3 !important;
  border-color: #F59E0B !important;
  color: #92400E !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 0 #D97706 !important;
}

.skill-help-dot:active,
button.skill-help-dot:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #CBD5E1 !important;
}

/* ==========================================================================
   15. MULTI-DEVICE COMFORT (m025-574)
   OWNER: "PERBAIKI SEMUA, AGAR TAMPILAN DI MULTI DEVICE NYAMAN DI PANDANG MATA".
   Temuan audit di 5 ukuran (iPhone SE/15, iPad tegak/mendatar, desktop 1440), masing-masing
   terukur di Chromium dan diperiksa visual. Semua aturan di sini dijaga
   tests/multi-device-comfort-test.js.
   ========================================================================== */

/* 15.1 Soal kuis yang TIDAK duduk di gelembung gelap. fiezel-paw-slot.js memakai anchor
   'side' (>=980px) dan 'peek' (ponsel mendatar), dan di kedua anchor itu #quizStem langsung
   berada di kartu terang. Aturan style.css / grammar-upgrade.css yang memaku .question-main
   menjadi #FFFFFF membuat soalnya putih di atas krem: TIDAK TERBACA di iPad mendatar dan
   desktop. Penolakan "light surface" lama ditulis body:not(.fz-lux), padahal body selalu fz-lux. */
.quiz-shell .question-main:not(.quiz-bubble *):not(.quiz-stage *):not(.speech-bubble *) {
  color: #241A11 !important;
}
.quiz-shell .question-instruction:not(.quiz-bubble *):not(.quiz-stage *):not(.speech-bubble *) {
  color: #475569 !important;
  background: rgba(100, 116, 139, 0.10) !important;
}

/* 15.2 Teks tebal di kartu mewarisi warna kartunya. mobile-edge-fit.css memaku
   `.card b/strong/h1-h4` menjadi #FFFFFF untuk tema kartu gelap yang sudah lama diganti kartu
   putih, jadi judul kartu hilang (Membaca "Materi level A1", Menulis, Perpustakaan, Tes Level,
   Progres "Minggu ini"). Spesifisitas SAMA dengan aturan itu dan dimuat sesudahnya: aturan
   yang lebih spesifik tetap menang seperti sebelumnya, dan petak gelap di dalam kartu
   (statistik Progres, lencana Prasasti terkunci) tetap putih karena warnanya diwarisi. */
.card :is(h1, h2, h3, h4, b, strong) {
  color: inherit !important;
}
.progress-stats > div { color: #FFFFFF !important; }
.prasasti-badge.is-locked { color: #FFFFFF !important; }

/* 15.3 Kontras teks kecil (WCAG AA 4.5:1). Diawali `html body #app` karena warna lamanya
   dipaku aturan berlapis !important yang lebih spesifik; nilai lama -> rasio baru di latarnya. */
html body #app .progress-stats > div small { color: #CBD5E1 !important; }                   /* di petak gelap */
html body #app .fz2-level-head .eyebrow { color: #6B5F55 !important; }                       /* 1.48 -> 5.9 */
html body #app .fz2-day span { color: #6B5F55 !important; }                                  /* label hari */
html body #app .map-note, html body #app .map-note span { color: #6B5F55 !important; }
html body #app .tile-badge { color: #475569 !important; }                                    /* 2.34 -> 7.0 */
html body #app .library-card .library-meta b { color: #241A11 !important; }                  /* putih -> tinta */
html body #app .library-meta small, html body #app .library-meta em { color: #5B6472 !important; }
html body #app .writing-rubric li span,
html body #app .writing-meta span,
html body #app .writing-prompt .skill-badge { color: #5B6472 !important; }
html body #app .card:has(> button[onclick^="openReadingLevel"]) > .row > span { color: #5B6472 !important; }
html body #app .lf-goal b { color: #241A11 !important; }
html body #app .lf-goal small { color: #475569 !important; }
html body #app .lf-card > h2 { color: #FFF4DA !important; }
html body #app .undercover-card .arcade-card-title { color: #FFFFFF !important; }
html body #app .undercover-card .arcade-card-desc { color: #CBD5E1 !important; }
html body #app .undercover-card .arcade-play-hint { color: #FBBF24 !important; }
html body #app .hero-tag span, html body #app .tactile-streak-lbl { color: #B45309 !important; }   /* amber 3.2 -> 5.0 */
html body header.topbar #topContextActions .active-level-control strong,
html body header.topbar .active-level-control strong,
html body #app .fsl-gem-chip b { color: #B45309 !important; }
html body #app .fsl-gem-chip small { color: #475569 !important; }
html body #app .word-ipa, html body #app .section-see-all { color: #0369A1 !important; }   /* biru 3.9 -> 5.9 */
html body #app .profile-online-badge-pill span { color: #047857 !important; }
html body #app .class-badge-tag { color: #17624F !important; }
html body #app .ch-tab { color: #475569 !important; }
/* Label tab bawah yang tidak aktif: abu-merah 75% di atas kuning = 3.1:1 pada 10px. */
html body nav.bottomnav .nav:not(.active) span,
html body nav.bottomnav .nav:not(.active) .kelasku-wordmark {
  color: #6B5658 !important;
  opacity: 1 !important;
}

/* 15.4 Kotak hari "Minggu ini": dirancang untuk kartu gelap, jadi di kartu putih tujuh hari
   KOSONG tampil hitam pekat - terbaca seperti tujuh hari selesai. Kosong = petak terang
   bergaris, aktif = emas, hari ini = garis putus amber. */
html body .fz2-day i {
  background: #F3EEE7 !important;
  border: 1.5px solid #E5DCCF !important;
  box-shadow: none !important;
}
html body .fz2-day i.is-on { background: #FFE02E !important; border-color: #E8C200 !important; }
html body .fz2-day i.is-big { background: #F59E0B !important; border-color: #D97706 !important; }
html body .fz2-day i.is-today { background: #FFFBEB !important; border: 2px dashed #D97706 !important; }

/* 15.5 Baris geser horizontal (alat Grammar, tab Progres/Profil): tepi kanannya memotong
   tombol tanpa tanda bisa digeser. Tepi memudar + ruang akhir supaya tombol terakhir bisa
   digulir keluar dari bayang pudarnya. */
.grammar-hub-tools,
.progress-tabs {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  padding-right: 28px !important;
  scroll-padding-inline-end: 28px;
}

/* 15.6 Teks label yang terlalu kecil (10-10.5px) dinaikkan ke 11.5-12px. */
html body nav.bottomnav .nav span { font-size: 11px !important; }
.tactile-kicker-text, .tactile-streak-lbl, .tile-badge, .library-badge,
.profile-stat-lbl, .ch-segbar-btn, .poster-sub-brand, .progress-stats > div small {
  font-size: 11.5px !important;
}

/* 15.7 Target sentuh: tombol ikon topbar 34px dan pil level 32px diberi area ketuk 44px
   tanpa mengubah rupanya (outline tak terlihat di luar tombol). */
header.topbar .icon-button,
header.topbar .active-level-control,
#app .active-level-control {
  position: relative;
}
header.topbar .icon-button::after,
header.topbar .active-level-control::after,
#app .active-level-control::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* 15.8 ADAPTIF MULTI-DEVICE (m025-575): dok bawah di HP, rail kiri di tablet, sidebar kiri
   + isi multi-kolom di iPad mendatar/laptop/desktop.
   OWNER sesudah #605: "MULTI ADAPTIVE DEVICE UI NYA TIDAK BERFUNGSI". #602 membawa tiga
   tingkat perangkat, tetapi juga mengunci html/body/#app setinggi 100dvh dengan
   overflow:hidden, sehingga scroll mati dan kartu terjepit. Revert #603 ikut membuang tingkat
   perangkatnya, dan #605 hanya melebarkan kolom HP. Di sini tingkat perangkat kembali TANPA
   kunci tinggi: scroll tetap milik jendela, kartu bertinggi alami (align-items:start), dan
   tidak ada height:100%/overflow:hidden pada section. HP (<768px) tidak disentuh.

   Tiga variabel di <body> mengatur geometri:
     --fz-rail  lebar navigasi kiri: 88px di tablet, 232px di desktop. Nilainya 0 saat
                navigasi disembunyikan (kuis, pelajaran, sesi bicara/dengar, kartu hafalan),
                supaya isi tidak menyisakan lajur kosong.
     --fz-col   lebar maksimum kolom isi: 760px di tablet, 900px di desktop, dan 1160px di
                layar yang punya tata letak multi-kolom (Hari ini, Latihan, Progres, Profil,
                Perpustakaan).
     --fz-gut   jarak tepi isi.
   Mode guru punya cangkangnya sendiri (teacher-shell.css), jadi selalu dikecualikan. */
@media (min-width: 768px) {
  html body:not(.fz-teacher-mode) {
    --fz-rail: 88px;
    --fz-col: 760px;
    --fz-gut: 20px;
  }
}
@media (min-width: 1024px) {
  html body:not(.fz-teacher-mode) {
    --fz-rail: 232px;
    --fz-col: 900px;
    --fz-gut: 28px;
  }
}
@media (min-width: 1100px) {
  html body:is(.fz-stage-home, .fz-view-latihan, .fz-stage-map, .fz-view-profile):not(.fz-teacher-mode),
  html body:has(#app > .library-page):not(.fz-teacher-mode) {
    --fz-col: 1160px;
  }
}
@media (min-width: 768px) {
  /* Navigasi disembunyikan di keadaan ini oleh aturan di Section 8 dan mobile-edge-fit. */
  html body:is(.fz-lesson-mode, .fz-stage-quiz, .fsl-session-active, .fz-stage-sl),
  html body:has(.fsl-card-listening, .fsl-feedback, .card-flashcard, .quiz-shell) {
    --fz-rail: 0px !important;
    --fz-col: 880px !important;
  }

  /* Latar halaman = latar section (#FFF9EE) supaya kolom isi tidak tampak sebagai pita samar.
     Spesifisitas (0,2,2) karena index.html memaku `html:not(.fz-booting) body` #FBF7F3. */
  html:not(.fz-booting),
  html:not(.fz-booting) body:not(.fz-teacher-mode) {
    background: #FFF9EE !important;
  }

  /* Cangkang: isi bergeser sebesar lebar navigasi kiri. Hanya padding kiri/kanan/bawah yang
     diubah; padding atas (ruang topbar fixed) tetap milik aturan lama. */
  html body:not(.fz-teacher-mode) main.app.app {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: var(--fz-rail) !important;
    padding-right: 0 !important;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  /* Spesifisitas sengaja sama dengan aturan lama (1,0,2): aturan kuis/pelajaran
     `body.fz-stage-quiz #app` dan mode guru `body.fz-teacher-mode #app` tetap menang. */
  html body #app {
    max-width: var(--fz-col) !important;
    width: 100% !important;
    margin: 0 auto !important;
    background: transparent !important;
  }
  html body #app > :is(.home-today, section.fade, #fzClassHub, .classroom-page, .progress-page, .profile-page, .ch-student) {
    max-width: 100% !important;
    padding-left: var(--fz-gut) !important;
    padding-right: var(--fz-gut) !important;
  }
  html body #app :is(.today-home-cockpit, section.ch-student) {
    max-width: 100% !important;
  }

  /* Topbar tetap selebar layar; logonya duduk di atas rail/sidebar, tombolnya di kanan. */
  html body:not(.fz-teacher-mode) header.topbar.topbar {
    padding-left: var(--fz-gut) !important;
    padding-right: var(--fz-gut) !important;
  }

  /* RAIL (tablet): navigasi menempel di kiri, di bawah topbar, ikon di atas label. */
  html body:not(.fz-teacher-mode) nav.bottomnav.bottomnav.bottomnav {
    top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: var(--fz-rail) !important;
    max-width: var(--fz-rail) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
    margin: 0 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 16px 8px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-right: 1.5px solid rgba(217, 119, 6, 0.16) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #FFFDF4 0%, #FEF6C7 100%) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.9), 8px 0 24px -18px rgba(120, 53, 15, 0.30) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  html body:not(.fz-teacher-mode) nav.bottomnav.bottomnav.bottomnav .nav {
    flex: 0 0 auto !important;
    width: 72px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 8px 4px !important;
    border-radius: 18px !important;
  }
  /* Pil aktif: app.js syncNavActivePill() menulis posisi 2D saat navigasi vertikal. */
  html body:not(.fz-teacher-mode) nav.bottomnav.bottomnav.bottomnav #navActivePill {
    border-radius: 18px !important;
  }
}

@media (min-width: 1024px) {
  /* SIDEBAR (iPad mendatar, laptop, desktop): baris ikon + label. */
  html body:not(.fz-teacher-mode) nav.bottomnav.bottomnav.bottomnav {
    align-items: stretch !important;
    gap: 4px !important;
    padding: 20px 14px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body:not(.fz-teacher-mode) nav.bottomnav.bottomnav.bottomnav .nav {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
  }
  html body:not(.fz-teacher-mode) nav.bottomnav.bottomnav.bottomnav .nav span {
    font-size: 14px !important;
    text-align: left !important;
    margin-top: 0 !important;
  }
  html body:not(.fz-teacher-mode) nav.bottomnav.bottomnav.bottomnav #navActivePill {
    border-radius: 14px !important;
  }
}

/* ISI MULTI-KOLOM. Semua grid ber-align-items:start dan tanpa tinggi tetap: kartu memakai
   tinggi alaminya, halaman tetap digulir jendela. */
@media (min-width: 1100px) {
  /* Hari ini: misi + KelasKu di kiri, Latihan Singkat di kanan. Kartu lain (mis. kartu
     BrainCore) tetap selebar penuh di bawahnya. */
  html body #app .today-home-cockpit.today-home-cockpit {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    /* Baris ke-3 lentur: tinggi Latihan Singkat yang melebihi misi diserap baris KelasKu,
       jadi KelasKu menempel tepat di bawah misi. */
    grid-template-rows: auto auto 1fr !important;
    column-gap: 24px !important;
    row-gap: 16px !important;
    align-items: start !important;
  }
  html body #app .today-home-cockpit.today-home-cockpit > * {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html body #app .today-home-cockpit.today-home-cockpit > .tactile-welcome-bar { grid-row: 1 !important; }
  html body #app .today-home-cockpit.today-home-cockpit > #heroCard { grid-column: 1 !important; grid-row: 2 !important; }
  html body #app .today-home-cockpit.today-home-cockpit > .class-bar { grid-column: 1 !important; grid-row: 3 !important; }
  html body #app .today-home-cockpit.today-home-cockpit > .quick-practice-section {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
  }

  /* Latihan dan Perpustakaan: tiga kolom. */
  html body #app .learning-launcher.learning-launcher,
  html body #app .library-page .library-grid.library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Progres: statistik di kiri (ikut menempel saat digulir), tab + isinya di kanan. */
  html body.fz-stage-map #app > section.fade {
    display: grid !important;
    grid-template-columns: 340px minmax(0, 1fr) !important;
    column-gap: 24px !important;
    row-gap: 16px !important;
    align-items: start !important;
  }
  html body.fz-stage-map #app > section.fade > * {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html body.fz-stage-map #app > section.fade > .card:has(.progress-stats) {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    position: sticky !important;
    top: calc(72px + env(safe-area-inset-top, 0px)) !important;
  }
  html body.fz-stage-map #app > section.fade > .progress-tabs { grid-column: 2 !important; grid-row: 1 !important; }
  html body.fz-stage-map #app > section.fade > #progressTabPane { grid-column: 2 !important; grid-row: 2 !important; }

  /* Profil: kartu profil selebar penuh, kartu pengaturan mengalir di dua kolom. */
  html body.fz-view-profile #onlineRoot #viewProfile {
    display: block !important;
    column-count: 2 !important;
    column-gap: 24px !important;
  }
  html body.fz-view-profile #onlineRoot #viewProfile > * {
    break-inside: avoid !important;
    margin: 0 0 24px !important;
  }
  html body.fz-view-profile #onlineRoot #viewProfile > .profile-hero-card {
    column-span: all !important;
  }
}

/* ==========================================================================
   16. SELUBUNG CANGKANG SAAT BOOT (m025-576)
   OWNER (Android, instal pertama): sesudah splash muncul "semacam menu utama tapi seluruh
   layarnya warna cream dan bottom barnya muncul" selama 5-7 detik, lalu berkedip ke layar
   masuk. Topbar dan tab bawah adalah markup statis index.html, jadi mereka sudah tampil
   begitu splash terangkat, walau belum ada satu layar pun yang digambar (sementara layar
   masuk/perkenalan belum terpasang, atau jaring pengaman boot sudah menutup splash). Keduanya
   kini baru tampil sesudah render() pertama memasang html.fz-app-open, jadi celah itu hanya
   berupa latar krem polos, bukan menu yang belum bisa dipakai.
   ========================================================================== */
html:not(.fz-app-open) body nav.bottomnav,
html:not(.fz-app-open) body header.topbar {
  visibility: hidden !important;
}
html:not(.fz-app-open) body .nav-scrim {
  visibility: hidden !important;
}

/* ==========================================================================
   KAWAN BICARA / MITRA KAIWA — kartu launcher percakapan di panel Hari Ini (m025-596)
   Tactile Clay hangat (amber), elevasi 3D, lencana status hidup. Selektor dipaku ke
   `html body #app` karena tipografi dan tombol global di berkas ini memakai !important
   dengan spesifisitas tinggi (terukur di probe 390 px: judul membesar, CTA memutih).
   ========================================================================== */
html body #app .fz-kawan-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas: "avatar body" "cta cta" !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 12px !important;
  padding: 14px !important;
  margin: 0 !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #FFF6E8 0%, #FFFFFF 62%) !important;
  border: 2px solid #F3D7AA !important;
  box-shadow: 0 5px 0 #E9C188, 0 12px 26px rgba(217, 119, 6, 0.10) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: clip !important; /* clip, bukan hidden: kartu bukan wadah gulir */
  transition: transform 0.16s ease, box-shadow 0.16s ease !important;
  -webkit-tap-highlight-color: transparent;
}

html body #app .fz-kawan-card::after {
  content: '';
  position: absolute;
  right: -28px;
  top: -34px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0) 70%);
  pointer-events: none;
}

@media (hover: hover) {
  html body #app .fz-kawan-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 0 #E9C188, 0 16px 30px rgba(217, 119, 6, 0.14) !important;
  }
}

html body #app .fz-kawan-card:active {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 #E9C188, 0 6px 14px rgba(217, 119, 6, 0.10) !important;
}

html body #app .fz-kawan-card .fz-kawan-avatar {
  grid-area: avatar;
  align-self: start;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFEBCC;
  border: 1.5px solid #F3D7AA;
  box-shadow: 0 3px 0 #E9C188;
  color: #B45309;
  animation: fzKawanFloat 3.2s ease-in-out infinite;
}

html body #app .fz-kawan-card .fz-kawan-avatar svg { width: 30px; height: 30px; display: block; }

html body #app .fz-kawan-card .fz-kawan-body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

html body #app .fz-kawan-card .fz-kawan-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

html body #app .fz-kawan-card .fz-kawan-title {
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #1B1418 !important;
}

html body #app .fz-kawan-card .fz-kawan-tag {
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em;
  color: #92400E !important;
  background: #FFF1D6;
  border: 1px solid #F3D7AA;
  border-radius: 9999px;
  padding: 0 7px;
  white-space: nowrap;
}

html body #app .fz-kawan-card .fz-kawan-lead {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: #66595F !important;
  font-weight: 600 !important;
}

html body #app .fz-kawan-card .fz-kawan-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

html body #app .fz-kawan-card .fz-kawan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: #66595F !important;
  background: #FFFFFF;
  border: 1px solid #EAE3D6;
  border-radius: 9999px;
  padding: 0 8px;
  white-space: nowrap;
}

html body #app .fz-kawan-card .fz-kawan-badge.is-live { color: #047857 !important; border-color: #A7F3D0; background: #ECFDF5; }
html body #app .fz-kawan-card .fz-kawan-badge.is-koreksi { color: #B45309 !important; border-color: #F3D7AA; background: #FFF6E8; }

html body #app .fz-kawan-card .fz-kawan-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: fzKawanPulse 1.8s ease-out infinite;
}

html body #app .fz-kawan-card button.fz-kawan-cta {
  grid-area: cta;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 9999px !important;
  background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%) !important;
  color: #1B1418 !important;
  -webkit-text-fill-color: #1B1418 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 3px 0 #B45309, 0 6px 14px rgba(217, 119, 6, 0.30) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
  position: relative;
  z-index: 1;
}
html body #app .fz-kawan-card button.fz-kawan-cta span {
  color: #1B1418 !important;
  -webkit-text-fill-color: #1B1418 !important;
}

html body #app .fz-kawan-card button.fz-kawan-cta:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #B45309 !important;
}

html body #app .fz-kawan-card button.fz-kawan-cta:focus-visible { outline: 2px solid #1B1418 !important; outline-offset: 2px !important; }

/* Layar lebar: tombol kembali ke kanan, sejajar isi kartu. */
@media (min-width: 600px) {
  html body #app .fz-kawan-card {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "avatar body cta" !important;
  }
  html body #app .fz-kawan-card .fz-kawan-avatar { align-self: center; }
  html body #app .fz-kawan-card button.fz-kawan-cta { width: auto !important; }
}

@keyframes fzKawanFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes fzKawanPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  80%, 100% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html body #app .fz-kawan-card .fz-kawan-avatar,
  html body #app .fz-kawan-card .fz-kawan-dot { animation: none !important; }
  html body #app .fz-kawan-card,
  html body #app .fz-kawan-card button.fz-kawan-cta { transition: none !important; }
}

/* Mobile & Tablet (<1100px): Posisikan #heroCard (Latihan Hari Ini) tepat di bawah sapaan
   di atas Kawan Bicara supaya CTA utama tidak tertutup bottomnav pada layar kompak 360x640. */
@media (max-width: 1099px) {
  html body #app .today-home-cockpit > .fz-welcome-header { order: 1 !important; }
  html body #app .today-home-cockpit > #heroCard { order: 2 !important; }
  html body #app .today-home-cockpit > .fz-kawan-card { order: 3 !important; }
  html body #app .today-home-cockpit > .fz-bc-card { order: 4 !important; }
  html body #app .today-home-cockpit > .quick-practice-section { order: 5 !important; }
  html body #app .today-home-cockpit > .class-bar { order: 6 !important; }
}

/* Status sesi harian selesai pada #heroCard */
html body #app #heroCard.is-done .hero-tag {
  color: #047857 !important;
}
html body #app #heroCard.is-done .hero-progress-fill {
  background: linear-gradient(90deg, #10B981 0%, #059669 100%) !important;
}
html body #app #heroCard.is-done .hero-pil[data-pil="selesai"] {
  color: #065F46 !important;
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
}
html body #app #heroCard.is-done button.hero-cta-btn[data-done="1"] {
  background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%) !important;
  color: #065F46 !important;
  border: 1.5px solid #6EE7B7 !important;
  box-shadow: 0 4px 0 #34D399, 0 8px 18px rgba(16, 185, 129, 0.16) !important;
}
html body #app #heroCard.is-done h1.fz-greet-title,
html body #app h1.fz-greet-title {
  margin: 0 !important;
}

/* Desktop: Kawan Bicara selebar penuh tepat di bawah sapaan; misi/KelasKu/Latihan Singkat
   turun satu baris (lihat grid Hari Ini di atas). */
@media (min-width: 1100px) {
  html body #app .today-home-cockpit.today-home-cockpit { grid-template-rows: auto auto auto 1fr !important; }
  html body #app .today-home-cockpit.today-home-cockpit > .fz-kawan-card { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  html body #app .today-home-cockpit.today-home-cockpit > #heroCard { grid-row: 3 !important; }
  html body #app .today-home-cockpit.today-home-cockpit > .class-bar { grid-row: 4 !important; }
  html body #app .today-home-cockpit.today-home-cockpit > .quick-practice-section { grid-row: 3 / span 2 !important; }
}

/* ==========================================================================
   17. AUDIT UI/UX SESI LATIHAN GRAMMAR (G-01 s/d G-09)
   ========================================================================== */

/* G-01: Dock #quizFloatingBar dalam alur dokumen tepat di bawah kartu soal
   agar tidak pernah menumpuki kartu #feedback, #tutorTurn, maupun akordion
   yang dibuka di Mobile (390x844) maupun Desktop (1280x800). */
html body #app .quiz-shell #quizFloatingBar.quiz-floating-bar,
.quiz-shell #quizFloatingBar {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 4px auto 16px !important;
  padding: 0 !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
}

/* G-02: Video Lab — satu ikon aktif di tombol Play/Pause + kontras badge loop */
html body #app .video-play-btn svg.is-hidden,
html body #app .video-player-container:not(.is-playing) .video-play-btn .pause-icon,
html body #app .video-player-container.is-playing .video-play-btn .play-icon {
  display: none !important;
}

html body #app .video-loop-badge,
html body #app .video-loop-badge span {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #F8FAFC !important;
  -webkit-text-fill-color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
}

/* G-03 & G-04: Hierarki tipografi kalimat soal (.question-main >= 18px/700)
   dan bingkai kartu soal di Desktop saat berada di luar .quiz-bubble */
html body #app .quiz-shell .question-main {
  font-size: clamp(1.12rem, 1.05rem + 0.45vw, 1.32rem) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

html body #app .quiz-shell #quizStem:not(.quiz-bubble *):not(.quiz-stage *):not(.speech-bubble *) {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  margin: 0 0 14px 0 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

/* G-07: Target sentuh >= 44x44px & cegah teks terpotong di tepi kanan */
html body #app .path-cta {
  min-height: 44px !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html body #app .lesson-skip-link,
html body #app button.lesson-skip-link {
  min-height: 44px !important;
  padding: 8px 14px !important;
  max-width: 100% !important;
  white-space: normal !important;
  text-align: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html body #hintCloseBtn,
html body .hint-close-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body #app #feedback details.acc > summary,
html body #app .quiz-shell details.acc > summary {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  box-sizing: border-box !important;
}

html body .modal .puzzle-tile,
html body button.puzzle-tile {
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 10px 16px !important;
  box-sizing: border-box !important;
}

html body .course-switch-btn,
html body button.course-switch-btn,
html body header.topbar #fzCourseSwitchBtn,
html body .topbar .btn-course-selector {
  height: 44px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html body .level-change-btn,
html body button.level-change-btn {
  min-height: 44px !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html body #app .retry-giveup-btn,
html body #app button.retry-giveup-btn {
  min-height: 44px !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html body .modal-close-corner {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

html body .modal .skill-help-panel h2,
html body .modal-panel .skill-help-panel h2 {
  padding-left: 44px !important;
  padding-right: 44px !important;
}

/* G-08: Perbaikan kontras WCAG AA (>= 4.5:1) */
html body .modal .skill-help-panel .skill-badge,
html body .skill-help-panel .skill-badge {
  color: #78350F !important;
  -webkit-text-fill-color: #78350F !important;
  background: #FEF3C7 !important;
  border: 1px solid #FDE68A !important;
  opacity: 1 !important;
}

html body #app .grammar-grid .card.lesson-locked {
  opacity: 1 !important;
  background: #F8FAFC !important;
}

html body #app .grammar-grid .card .muted,
html body #app .grammar-grid .card .row span,
html body #app .grammar-grid .card .lesson-card-foot span,
html body #app .grammar-grid .card .lesson-lock-note,
html body #app .grammar-grid .card .lesson-lock-note span {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  opacity: 1 !important;
}

html body #app #tokenResetBtn:disabled,
html body #app #tokenResetBtn:disabled span,
html body #app #tokenSubmitBtn:disabled,
html body #app #tokenSubmitBtn:disabled span {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  background: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
  opacity: 1 !important;
}

html body .modal .puzzle-tile.is-used,
html body .puzzle-tile.is-used {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  background: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
  opacity: 1 !important;
}

/* ==========================================================================
   18. VISSOL PWA HOME UI & UX REDESIGN (MOBILE, TABLET, DESKTOP)
   ========================================================================== */

/* Overall Page Background & Typography */
body:not(.fz-teacher-mode),
body:not(.fz-teacher-mode) .app,
html.fz-app-open body {
  background: #FFFDF8 !important;
}

/* Topbar Styling */
header.topbar {
  background: #FFFDF8 !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.6) !important;
  box-shadow: none !important;
}

#topBrandWrap .fiezel-brand-tag {
  background: #ECFDF5 !important;
  color: #047857 !important;
  border: 1.5px solid #A7F3D0 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 10px 3px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  letter-spacing: 0.04em !important;
}

#topBrandWrap .fiezel-brand-tag::before {
  content: '•';
  color: #10B981 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

#fzCourseSwitchBtn {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  color: #1E293B !important;
  font-weight: 750 !important;
  font-size: 13px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#fzNotifBtn {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  color: #1E293B !important;
}

#fzNotifBtn::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  background: #EF4444;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
}

/* Home Cockpit Layout Container */
body:has(.home-today),
.home-page.home-today,
.home-today {
  background-color: #FDFAF3 !important;
  background-image:
    radial-gradient(ellipse 520px 300px at 85% 0px, rgba(254, 240, 199, 0.85) 0%, rgba(254, 243, 199, 0.40) 50%, transparent 100%),
    radial-gradient(ellipse 420px 240px at 15% 0px, rgba(255, 251, 235, 0.70) 0%, transparent 80%) !important;
  background-repeat: no-repeat !important;
}

.today-home-cockpit,
.tactile-home-cockpit {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 8px 16px 90px !important;
  box-sizing: border-box !important;
}

/* 1. Greeting & Mascot Section */
.fz-vissol-welcome {
  width: 100% !important;
  margin-top: 4px !important;
  margin-bottom: 2px !important;
  position: relative !important;
  overflow: visible !important;
}

.fz-vissol-header-wave-bg {
  position: absolute !important;
  top: -14px !important;
  right: -16px !important;
  left: 0 !important;
  height: 170px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: visible !important;
}

.fz-vissol-header-wave-bg svg {
  width: 100% !important;
  height: 170px !important;
  overflow: visible !important;
}

.fz-vissol-welcome-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

.fz-vissol-welcome-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
}

.fz-vissol-greeting-time {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  font-family: var(--font-sans) !important;
  line-height: 1.2 !important;
}

.fz-vissol-title {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: #0F172A !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  font-family: var(--font-sans) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.fz-wave-hand {
  display: inline-block !important;
  transform-origin: 70% 70% !important;
  animation: fzHandWave 2.5s infinite !important;
}

@keyframes fzHandWave {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.fz-vissol-sub {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.4 !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: 2px !important;
}

.fz-vissol-mascot-wrap {
  flex-shrink: 0 !important;
  width: 142px !important;
  height: 142px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  cursor: grab !important;
  touch-action: none !important;
}

.fz-vissol-mascot-wrap:active {
  cursor: grabbing !important;
}

.fz-vissol-mascot-wrap .fz-mochi-viewport {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

.fz-vissol-mascot-wrap .fz-mochi-viewport canvas {
  display: block !important;
  touch-action: none !important;
  pointer-events: auto !important;
}

.fz-vissol-mascot-cloud-bg {
  position: absolute !important;
  top: -10px !important;
  right: -8px !important;
  width: 158px !important;
  height: 154px !important;
  background: radial-gradient(circle at 60% 45%, #FEF08A 0%, #FEF9C3 40%, rgba(254, 240, 138, 0) 75%) !important;
  border-radius: 50% !important;
  filter: blur(12px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.9 !important;
  animation: fzCloudBreathe 4s ease-in-out infinite alternate !important;
}

@keyframes fzCloudBreathe {
  0% { transform: scale(0.94); opacity: 0.75; }
  100% { transform: scale(1.08); opacity: 0.95; }
}

.fz-vissol-mascot-sparks {
  position: absolute !important;
  top: -6px !important;
  left: -6px !important;
  width: 130px !important;
  height: 130px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  animation: fzSparksTwinkle 3s ease-in-out infinite alternate !important;
}

@keyframes fzSparksTwinkle {
  0% { transform: scale(0.96) rotate(-2deg); opacity: 0.85; }
  100% { transform: scale(1.04) rotate(2deg); opacity: 1; }
}

.fz-vissol-mascot-img {
  position: relative !important;
  z-index: 2 !important;
  width: 114px !important;
  height: auto !important;
  max-height: 118px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 22px rgba(245, 158, 11, 0.20)) !important;
  animation: fzMochiFloat 2.6s ease-in-out infinite !important;
  transition: opacity 0.3s ease !important;
}

@keyframes fzMochiFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1, 1);
  }
  30% {
    transform: translateY(-9px) rotate(2.5deg) scale(0.98, 1.03);
  }
  65% {
    transform: translateY(-3px) rotate(-1.5deg) scale(1.02, 0.98);
  }
  85% {
    transform: translateY(1.5px) rotate(0.5deg) scale(1.03, 0.97);
  }
}

/* 2. Primary Action Hero Card (Golden Solar Card) */
.fz-vissol-hero-card {
  width: 100% !important;
  background: #FFFDF8 !important;
  border: 1.5px solid #FEEBC8 !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.08), 0 2px 6px rgba(0,0,0,0.02) !important;
  padding: 16px 18px 14px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

.fz-vissol-hero-bg-curve {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 220px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.fz-vissol-hero-bg-curve svg {
  width: 220px !important;
  height: 180px !important;
}

.fz-vissol-hero-content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  position: relative !important;
  z-index: 1 !important;
}

.fz-vissol-hero-left {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.fz-vissol-hero-badge-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #FEF3C7 !important;
  border: 1px solid #FDE68A !important;
  border-radius: 999px !important;
  padding: 3px 10px 3px 5px !important;
  width: fit-content !important;
}

.fz-vissol-target-icon {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fz-vissol-badge-text {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #92400E !important;
  letter-spacing: 0.02em !important;
}

.fz-vissol-hero-title {
  font-size: 19px !important;
  font-weight: 850 !important;
  color: #0F172A !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin: 4px 0 2px !important;
}

.fz-vissol-hero-desc {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

.fz-vissol-chips-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  flex-wrap: wrap !important;
}

.fz-vissol-meta-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #FFFFFF !important;
  border: 1px solid #F1F5F9 !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

.fz-vissol-hero-illus {
  flex-shrink: 0 !important;
  margin-top: -8px !important;
  position: relative !important;
  z-index: 1 !important;
}

.hero-cta-btn,
.fz-vissol-hero-btn {
  width: 100% !important;
  height: 44px !important;
  background: linear-gradient(180deg, #FDC742 0%, #F59E0B 100%) !important;
  color: #1E1B4B !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 0 20px !important;
  font-size: 14.5px !important;
  font-weight: 850 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.28), inset 0 1px 1px rgba(255,255,255,0.6) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  position: relative !important;
  z-index: 1 !important;
}

.hero-cta-btn:active,
.fz-vissol-hero-btn:active {
  transform: scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
}

/* 3. Bonus Feature Card (Kawan Bicara) */
html body #app .fz-kawan-card.fz-vissol-kawan-card {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  row-gap: 0 !important;
  column-gap: 10px !important;
  width: 100% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #F1F5F9 !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.03) !important;
  padding: 11px 16px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  position: relative !important;
  overflow: clip !important; /* clip, bukan hidden: gerbang E2 & kartu bukan wadah gulir */
}

html body #app .fz-kawan-card.fz-vissol-kawan-card::after {
  display: none !important;
  content: none !important;
}

.fz-vissol-kawan-card {
  width: 100% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #F1F5F9 !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.03) !important;
  padding: 11px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.fz-vissol-kawan-bg-curve {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 160px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.fz-vissol-kawan-bg-curve svg {
  width: 160px !important;
  height: 80px !important;
}

.fz-vissol-kawan-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.05) !important;
}

.fz-vissol-kawan-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.fz-vissol-kawan-text {
  flex: 1 !important;
  min-width: 0 !important;
}

.fz-vissol-kawan-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: #F3E8FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.fz-vissol-kawan-badge {
  display: inline-block !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #7C3AED !important;
  background: #F3E8FF !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  margin-bottom: 2px !important;
  letter-spacing: 0.02em !important;
}

.fz-vissol-kawan-title {
  font-size: 16px !important;
  font-weight: 850 !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.fz-vissol-kawan-desc {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  line-height: 1.35 !important;
  margin: 2px 0 0 !important;
}

.fz-vissol-kawan-right {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.fz-vissol-kawan-right svg {
  width: 58px !important;
  height: 45px !important;
}

@media (min-width: 640px) {
  .fz-vissol-kawan-right svg {
    width: 70px !important;
    height: 54px !important;
  }
}

.fz-vissol-chevron {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
  line-height: 1 !important;
  margin-left: 2px !important;
}

/* 4. Progres Belajar Section */
.fz-vissol-progress-section {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.fz-vissol-section-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 4px !important;
}

.fz-vissol-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  color: #0F172A !important;
}

.fz-vissol-see-all {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #64748B !important;
  cursor: pointer !important;
}

.fz-vissol-see-all:hover {
  color: #0F172A !important;
}

.fz-vissol-progress-card {
  width: 100% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #F1F5F9 !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.03) !important;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.fz-vissol-progress-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.05) !important;
}

.fz-vissol-ring-col {
  flex-shrink: 0 !important;
}

.fz-vissol-ring-wrap {
  position: relative !important;
  width: 76px !important;
  height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fz-vissol-ring-val {
  position: absolute !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #0F172A !important;
  letter-spacing: -0.02em !important;
  font-family: var(--font-sans) !important;
}

.fz-vissol-progress-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.fz-vissol-plan-kicker {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748B !important;
}

.fz-vissol-plan-count {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #0F172A !important;
  line-height: 1.1 !important;
}

.fz-vissol-plan-count span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  margin-left: 4px !important;
}

.fz-vissol-progress-track {
  width: 100% !important;
  height: 8px !important;
  background: #F1F5F9 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin: 3px 0 !important;
}

.fz-vissol-progress-fill {
  height: 8px !important;
  background: linear-gradient(90deg, #FFC82C 0%, #FFA500 100%) !important;
  border-radius: 999px !important;
}

.fz-vissol-time-left {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748B !important;
}

/* 5. 4 Core Learning Cards Grid */
.fz-vissol-learning-hub {
  width: 100% !important;
}

.fz-vissol-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
}

.fz-vissol-tile {
  border-radius: 20px !important;
  padding: 15px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 98px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.fz-vissol-tile:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04) !important;
}

.fz-vissol-tile.is-vocab {
  background: #FFF5F5 !important;
  border: 1.5px solid #FFE4E6 !important;
}
.fz-vissol-tile-icon.is-vocab-icon {
  background: #F43F5E !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.fz-vissol-tile-chevron.is-vocab-chevron {
  color: #FB7185 !important;
}

.fz-vissol-tile.is-grammar {
  background: #F0FDF4 !important;
  border: 1.5px solid #DCFCE7 !important;
}
.fz-vissol-tile-icon.is-grammar-icon {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.fz-vissol-tile-chevron.is-grammar-chevron {
  color: #34D399 !important;
}

.fz-vissol-tile.is-reading {
  background: #FAF5FF !important;
  border: 1.5px solid #F3E8FF !important;
}
.fz-vissol-tile-icon.is-reading-icon {
  background: #A855F7 !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.fz-vissol-tile-chevron.is-reading-chevron {
  color: #C084FC !important;
}

.fz-vissol-tile.is-listening {
  background: #F0F9FF !important;
  border: 1.5px solid #E0F2FE !important;
}
.fz-vissol-tile-icon.is-listening-icon {
  background: #0EA5E9 !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.fz-vissol-tile-chevron.is-listening-chevron {
  color: #38BDF8 !important;
}

.fz-vissol-tile-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.fz-vissol-tile-chevron {
  font-size: 20px !important;
  font-weight: 700 !important;
}

.fz-vissol-tile-title {
  font-size: 15px !important;
  font-weight: 850 !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.fz-vissol-tile-sub {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748B !important;
  margin: 2px 0 0 !important;
}

/* 6. KelasKu Banner Card */
.fz-vissol-kelasku-bar {
  width: 100% !important;
  background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%) !important;
  border: 1.5px solid #D1FAE5 !important;
  border-radius: 20px !important;
  padding: 12px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.fz-vissol-kelasku-bg-curve {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 220px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.fz-vissol-kelasku-bg-curve svg {
  width: 220px !important;
  height: 80px !important;
}

.fz-vissol-kelasku-bar:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.1) !important;
}

.fz-vissol-kelasku-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}

.fz-vissol-kelasku-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: #D1FAE5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.fz-vissol-kelasku-pill {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #047857 !important;
  background: #D1FAE5 !important;
  border-radius: 999px !important;
  padding: 2px 9px !important;
  display: inline-block !important;
  margin-bottom: 2px !important;
}

.fz-vissol-kelasku-title {
  font-size: 15px !important;
  font-weight: 850 !important;
  color: #064E3B !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.fz-vissol-kelasku-sub {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #059669 !important;
  margin: 2px 0 0 !important;
}

.fz-vissol-kelasku-btn {
  background: #10B981 !important;
  color: #FFFFFF !important;
  font-weight: 850 !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.28) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 7. Bottom Navigation Dock */
html body:not(.fz-teacher-mode) nav.bottomnav {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(241, 245, 249, 0.8) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.03) !important;
}

nav.bottomnav .nav.active[data-view="home"] i,
nav.bottomnav .nav.active[data-view="home"] .fz-i {
  background: #FEF3C7 !important;
  color: #D97706 !important;
  border-radius: 50% !important;
  padding: 5px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

nav.bottomnav .nav.active {
  color: #0F172A !important;
  font-weight: 800 !important;
}

nav.bottomnav .nav:not(.active) {
  color: #94A3B8 !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   MULTI-DEVICE RESPONSIVENESS: MOBILE, TABLET, AND DESKTOP
   ========================================================================== */

/* Mobile (< 768px): Strict visual order matching mockup */
@media (max-width: 767px) {
  .today-home-cockpit > .fz-welcome-header { order: 1 !important; }
  .today-home-cockpit > #heroCard { order: 2 !important; }
  .today-home-cockpit > .fz-kawan-card { order: 3 !important; }
  .today-home-cockpit > .fz-vissol-progress-section { order: 4 !important; }
  .today-home-cockpit > .quick-practice-section { order: 5 !important; }
  .today-home-cockpit > .class-bar { order: 6 !important; }
}

/* Tablet (768px - 1099px): Spacious & 4-card horizontal layout */
@media (min-width: 768px) and (max-width: 1099px) {
  .today-home-cockpit,
  .tactile-home-cockpit {
    max-width: 580px !important;
    margin: 0 auto !important;
    padding: 16px 20px 80px !important;
    gap: 14px !important;
  }
  .today-home-cockpit > .fz-welcome-header { order: 1 !important; }
  .today-home-cockpit > #heroCard { order: 2 !important; }
  .today-home-cockpit > .fz-kawan-card { order: 3 !important; }
  .today-home-cockpit > .fz-vissol-progress-section { order: 4 !important; }
  .today-home-cockpit > .quick-practice-section { order: 5 !important; }
  .today-home-cockpit > .class-bar { order: 6 !important; }

  .fz-vissol-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .fz-vissol-mascot-wrap {
    width: 160px !important;
    height: 160px !important;
  }
  .fz-vissol-mascot-img {
    width: 154px !important;
    max-height: 160px !important;
  }
}

/* Desktop (>= 1100px): Balanced 2-Column Bento Grid */
@media (min-width: 1100px) {
  html body #app .today-home-cockpit.today-home-cockpit {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    gap: 16px !important;
    padding: 18px 24px 80px !important;
  }

  html body #app .today-home-cockpit.today-home-cockpit > .fz-welcome-header {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    order: 1 !important;
    margin-bottom: 4px !important;
  }

  html body #app .today-home-cockpit.today-home-cockpit > .fz-kawan-card {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    order: 2 !important;
  }

  html body #app .today-home-cockpit.today-home-cockpit > #heroCard {
    grid-column: 1 !important;
    grid-row: 3 !important;
    order: 3 !important;
    height: fit-content !important;
  }

  html body #app .today-home-cockpit.today-home-cockpit > .quick-practice-section {
    grid-column: 2 !important;
    grid-row: 3 !important;
    order: 4 !important;
    height: fit-content !important;
  }

  html body #app .today-home-cockpit.today-home-cockpit > .fz-vissol-progress-section {
    grid-column: 1 !important;
    grid-row: 4 !important;
    order: 5 !important;
    height: fit-content !important;
  }

  html body #app .today-home-cockpit.today-home-cockpit > .class-bar {
    grid-column: 2 !important;
    grid-row: 4 !important;
    order: 6 !important;
    height: fit-content !important;
  }

  .fz-vissol-mascot-wrap {
    width: 175px !important;
    height: 175px !important;
  }
  .fz-vissol-mascot-img {
    width: 168px !important;
    max-height: 175px !important;
  }
}

html body #app .fz-vissol-kawan-card button.fz-kawan-cta {
  display: none !important;
}


/* 19. VISSOL COMPACT CARDS — kartu ramping seperti mockup owner.
   Aturan h2 global (26px) menimpa judul kartu; spesifisitas di sini (1,3,3) mengalahkannya. */
html body #app .today-home-cockpit h2.fz-vissol-hero-title {
  font-size: 19px !important;
  line-height: 1.22 !important;
  margin: 4px 0 2px !important;
  letter-spacing: -0.02em !important;
}

html body #app .today-home-cockpit h2.fz-vissol-kawan-title {
  font-size: 16px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

html body #app .today-home-cockpit h1.fz-vissol-title {
  font-size: 26px !important;
  font-weight: 800 !important;
}

html body #app .today-home-cockpit #heroCard.fz-vissol-hero-card {
  display: block !important;
  padding: 14px 16px 14px !important;
  border-radius: 22px !important;
}

html body #app .today-home-cockpit .fz-vissol-hero-content {
  margin-bottom: 12px !important;
  align-items: center !important;
}

html body #app .today-home-cockpit .fz-vissol-chips-row {
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

html body #app .today-home-cockpit .fz-vissol-meta-chip {
  white-space: nowrap !important;
  padding: 4px 9px !important;
}

html body #app .today-home-cockpit .fz-vissol-hero-illus {
  margin-top: 0 !important;
  width: 100px !important;
}

html body #app .today-home-cockpit button.hero-cta-btn,
html body #app .today-home-cockpit button.fz-vissol-hero-btn {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
}

html body #app .today-home-cockpit .fz-vissol-kawan-badge {
  font-size: 10.5px !important;
  padding: 2px 8px !important;
  white-space: nowrap !important;
}

html body #app .today-home-cockpit .fz-vissol-kawan-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, #F5F3FF 0%, #EDE9FE 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 3px 8px rgba(124, 58, 237, 0.12) !important;
}

html body #app .today-home-cockpit .fz-vissol-welcome {
  margin-bottom: -10px !important;
}

html body #app .today-home-cockpit button.hero-cta-btn,
html body #app .today-home-cockpit button.fz-vissol-hero-btn {
  background: linear-gradient(180deg, #FFD34E 0%, #FBBF24 100%) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255,255,255,0.55) !important;
  border-bottom: none !important;
}

html body #app .today-home-cockpit p.fz-vissol-kawan-desc {
  font-size: 12px !important;
  line-height: 1.38 !important;
  margin: 2px 0 0 !important;
}

html body #app .today-home-cockpit p.fz-vissol-hero-desc {
  font-size: 12.5px !important;
  line-height: 1.38 !important;
}

html body #app .today-home-cockpit .fz-vissol-kawan-right svg {
  width: 56px !important;
  height: 44px !important;
}

/* 19b. Tile materi & KelasKu ramping (aturan h3 global menimpa ke 26px+) */
html body #app .today-home-cockpit h3.fz-vissol-tile-title {
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

html body #app .today-home-cockpit p.fz-vissol-tile-sub {
  font-size: 11.5px !important;
  margin: 2px 0 0 !important;
}

html body #app .today-home-cockpit .fz-vissol-tile {
  padding: 12px !important;
  min-height: 0 !important;
  border-radius: 16px !important;
}

html body #app .today-home-cockpit .fz-vissol-tile-top {
  margin-bottom: 10px !important;
}

html body #app .today-home-cockpit h3.fz-vissol-kelasku-title {
  font-size: 15px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

html body #app .today-home-cockpit p.fz-vissol-kelasku-sub {
  font-size: 11.5px !important;
}

html body #app .today-home-cockpit button.hero-cta-btn::before,
html body #app .today-home-cockpit button.fz-vissol-hero-btn::before {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 1099px) {
  html body #app .today-home-cockpit.today-home-cockpit {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1100px) {
  html body #app .today-home-cockpit.today-home-cockpit {
    max-width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: start !important;
  }
}

/* ==========================================================================
   SECTION 20: FIEZEL SIGNATURE ORNAMENTS & KINETIC MOTION GRAPHICS
   (Mirrors website/ Landing Page Atmospheric System)
   ========================================================================== */

/* 1. Global Topbar Signature Ornaments */
html body header.topbar {
  overflow: clip !important;
}

html body header.topbar .topbar-ornament-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  pointer-events: none !important;
  overflow: clip !important;
  z-index: 0 !important;
}

html body header.topbar .topbar-brand-fiezel,
html body header.topbar .topbar-context-wrap,
html body header.topbar .topbar-context-actions,
html body header.topbar .kelasku-top-brand,
html body header.topbar .topbar-actions,
html body header.topbar .kelasku-top-cluster {
  position: relative !important;
  z-index: 1 !important;
}

.topbar-fx-net {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0.55;
}

.topbar-fx-net line {
  stroke: rgba(245, 158, 11, 0.35);
  stroke-width: 1;
  stroke-dasharray: 4 8;
  animation: fzflow-edge 14s linear infinite;
}

.topbar-fx-net circle {
  fill: #F59E0B;
  stroke: rgba(140, 34, 51, 0.3);
  stroke-width: 0.8;
  transform-box: fill-box;
  transform-origin: center;
  animation: fzflow-node 5s ease-in-out infinite;
}

.topbar-contour-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  opacity: 0.65;
}

.topbar-spark-cluster .spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #FFDE59 0%, rgba(245, 158, 11, 0.6) 50%, rgba(245, 158, 11, 0) 100%);
  animation: sparkRise 8s ease-in-out infinite;
}

.topbar-sp1 { left: 24%; top: 40%; animation-delay: 1.2s; }
.topbar-sp2 { right: 30%; top: 50%; animation-delay: 3.8s; }

/* 2. Home Background Motion Graphic */
html body #app .today-home-cockpit {
  position: relative !important;
}

.fz-vissol-bg-motion {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 480px !important;
  pointer-events: none !important;
  overflow: clip !important;
  z-index: 0 !important;
}

.fz-motion-aura {
  position: absolute;
  right: -40px;
  top: -20px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.4) 0%, rgba(253, 230, 138, 0.18) 40%, transparent 70%);
  animation: fzflow-aura 8s ease-in-out infinite;
  opacity: 0.8;
}

.fz-motion-rings-wrap {
  position: absolute;
  right: -50px;
  top: 10px;
  width: min(100%, 380px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.55;
}

.fz-motion-rings {
  width: 100%;
  aspect-ratio: 1;
  overflow: visible;
}

.fz-motion-rings .fx-ring {
  fill: none;
  transform-origin: 320px 320px;
}

.fz-motion-rings .fx-ring-1 {
  stroke: rgba(140, 34, 51, 0.15);
  stroke-width: 1.1;
  animation: fxSpin 52s linear infinite;
}

.fz-motion-rings .fx-ring-2 {
  stroke: rgba(245, 158, 11, 0.38);
  stroke-width: 1.1;
  stroke-dasharray: 4 10;
  animation: fxSpin 38s linear infinite reverse;
}

.fz-motion-rings .fx-ring-3 {
  stroke: rgba(245, 158, 11, 0.2);
  stroke-width: 1;
  stroke-dasharray: 2 8;
  animation: fxSpin 60s linear infinite;
}

.fz-motion-rings .fx-draw {
  fill: none;
  stroke-linecap: round;
}

.fz-motion-rings .fx-draw-1 {
  stroke: rgba(140, 34, 51, 0.18);
  stroke-width: 1.4;
  stroke-dasharray: 1200;
  stroke-dashoffset: 0;
  animation: fxDraw 5.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fz-motion-rings .fx-draw-2 {
  stroke: rgba(245, 158, 11, 0.32);
  stroke-width: 1.2;
  stroke-dasharray: 1200;
  stroke-dashoffset: 0;
  animation: fxDraw 6.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

.fz-vissol-bg-motion .fzflow-net {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 280px;
  opacity: 0.45;
}

.fz-vissol-bg-motion .fzflow-net line {
  stroke: rgba(245, 158, 11, 0.3);
  stroke-width: 1;
  stroke-dasharray: 4 8;
  animation: fzflow-edge 12s linear infinite;
}

.fz-vissol-bg-motion .fzflow-net circle {
  fill: #F59E0B;
  stroke: rgba(140, 34, 51, 0.25);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: fzflow-node 5.6s ease-in-out infinite;
}

.fz-vissol-bg-motion .fzflow-net .fzflow-node-core {
  fill: #8C2233;
}

.fz-vissol-bg-motion .spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #FFDE59 0%, rgba(255, 199, 0, 0.55) 45%, rgba(255, 199, 0, 0) 100%);
  animation: sparkRise 9.5s ease-in-out infinite;
}

.fz-vissol-bg-motion .sp1 { left: 8%; top: 45%; }
.fz-vissol-bg-motion .sp2 { left: 22%; top: 20%; animation-delay: 1.1s; }
.fz-vissol-bg-motion .sp3 { left: 35%; top: 60%; animation-delay: 2.4s; }
.fz-vissol-bg-motion .sp4 { left: 52%; top: 15%; animation-delay: 3.5s; }
.fz-vissol-bg-motion .sp5 { left: 68%; top: 50%; animation-delay: 0.6s; }
.fz-vissol-bg-motion .sp6 { left: 82%; top: 25%; animation-delay: 4.4s; }
.fz-vissol-bg-motion .sp7 { left: 92%; top: 40%; animation-delay: 2s; }
.fz-vissol-bg-motion .sp8 { left: 60%; top: 32%; animation-delay: 5.6s; }

/* 3. Core Keyframe Animations */
@keyframes fxSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fzflow-node {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.6); opacity: 1; }
}

@keyframes fzflow-edge {
  to { stroke-dashoffset: -140px; }
}

@keyframes sparkRise {
  0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.55); }
  16% { opacity: 0.95; }
  56% { opacity: 0.45; }
  100% { opacity: 0; transform: translate3d(0, -52px, 0) scale(1.15); }
}

@keyframes fzflow-aura {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.08); }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .fz-motion-rings .fx-ring-1,
  .fz-motion-rings .fx-ring-2,
  .fz-motion-rings .fx-ring-3 {
    animation: none !important;
  }
  .fz-vissol-bg-motion .spark,
  .topbar-spark-cluster .spark {
    opacity: 0.4 !important;
    animation: none !important;
  }
  .fz-vissol-bg-motion .fzflow-net circle,
  .topbar-fx-net circle {
    animation: none !important;
  }
  .fz-motion-aura {
    animation: none !important;
  }
}