/* ==========================================================================
   AGENTGO x ASK SYSTEM — DUOLINGO GAMIFIED DESIGN SYSTEM
   Version: 1.0 (8 Oktober 2026)
   Theme: Playful, Micro-learning, 3D Tactile Buttons, Mascot "Byte"
   ========================================================================== */

:root {
  /* Color Palette based on dokumen_desain_agentgo.md */
  --duo-cyan: #00E5FF;
  --duo-cyan-dark: #00B8D4;
  --duo-purple: #5E35B1;
  --duo-purple-light: #7E57C2;
  --duo-purple-dark: #4527A0;
  
  --duo-green: #58CC02;
  --duo-green-dark: #46A302;
  --duo-green-light: #D7FFB8;
  
  --duo-red: #FF4B4B;
  --duo-red-dark: #EA2B2B;
  --duo-red-light: #FFDFE0;
  
  --duo-yellow: #FFC800;
  --duo-yellow-dark: #E5A500;
  --duo-yellow-light: #FFF5CC;
  
  --duo-blue: #1CB0F6;
  --duo-blue-dark: #1899D6;
  --duo-blue-light: #DDF4FF;
  
  --duo-gray-bg: #F8FAFC;
  --duo-card-bg: #FFFFFF;
  --duo-border: #E2E8F0;
  --duo-border-dark: #CBD5E1;
  --duo-text-main: #0F172A;
  --duo-text-muted: #64748B;
  
  --font-heading: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Global Reset to Clean Modern Academic Canvas */
body {
  background-color: var(--duo-gray-bg) !important;
  color: var(--duo-text-main) !important;
  font-family: var(--font-body) !important;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
  color: var(--duo-text-main) !important;
}

/* --------------------------------------------------------------------------
   1. Duolingo Tactile 3D Buttons (Button Physics)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   1. Modern Flat Academic Buttons (Clean Micro-Interactions)
   -------------------------------------------------------------------------- */
.btn-duo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.btn-duo:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
}

.btn-duo:active, .btn-duo.active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Green (Success & Mastery) */
.btn-duo-green {
  background-color: #10B981;
  color: #FFFFFF;
  border-color: #059669;
}
.btn-duo-green:hover {
  background-color: #059669;
}

/* Cyan / Blue (Brand Primary Action - Logo Cyan) */
.btn-duo-blue {
  background-color: #06B6D4;
  color: #FFFFFF;
  border-color: #0891B2;
}
.btn-duo-blue:hover {
  background-color: #0891B2;
}

/* Yellow (Warning & Streaks - Logo Yellow) */
.btn-duo-yellow {
  background-color: #F59E0B;
  color: #FFFFFF;
  border-color: #D97706;
}
.btn-duo-yellow:hover {
  background-color: #D97706;
}

/* Pink / Red (Special Diagnostic & Focus - Logo Pink) */
.btn-duo-red {
  background-color: #F43F5E;
  color: #FFFFFF;
  border-color: #E11D48;
}
.btn-duo-red:hover {
  background-color: #E11D48;
}

/* Purple (Tech / Mentor) */
.btn-duo-purple {
  background-color: #6366F1;
  color: #FFFFFF;
  border-color: #4F46E5;
}
.btn-duo-purple:hover {
  background-color: #4F46E5;
}

/* White / Neutral Clean Button */
.btn-duo-white {
  background-color: #FFFFFF;
  color: #334155;
  border-color: #CBD5E1;
}
.btn-duo-white:hover {
  background-color: #F8FAFC;
  border-color: #94A3B8;
  color: #0F172A;
}

/* Small Button Variant */
.btn-duo-sm {
  padding: 6px 14px;
  font-size: 12.5px;
  border-radius: 7px;
}

/* --------------------------------------------------------------------------
   2. Playful Header Navigation & Gamification Stats
   -------------------------------------------------------------------------- */
.app-header {
  background: #FFFFFF !important;
  border-bottom: 2px solid var(--duo-border) !important;
  padding: 8px 20px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  gap: 12px;
  min-height: 64px;
  box-sizing: border-box;
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand-logo-img {
  height: 48px !important;
  max-height: 52px !important;
  width: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
}

.welcome-hero-logo {
  height: 110px !important;
  max-height: 120px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 16px auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Fitted Header Actions Container & Buttons */
.header-status {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  flex-shrink: 0;
}

.header-status .btn {
  padding: 7px 14px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  margin: 0 !important;
  box-shadow: 0 2px 0 rgba(0,0,0,0.12) !important;
  letter-spacing: 0.02em !important;
  transition: all 0.15s ease !important;
}

.header-status .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15) !important;
}

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

.header-status .btn.active {
  box-shadow: 0 0 0 2.5px #2563EB, 0 2px 0 rgba(0,0,0,0.2) !important;
}

/* User Badge in Header (When Logged In) */
.header-student-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F0F9FF;
  color: #0369A1;
  border: 1.5px solid #BAE6FD;
  border-bottom: 3px solid #7DD3FC;
  border-radius: 9999px;
  padding: 5px 12px;
  font-weight: 800;
  font-size: 11.5px;
  white-space: nowrap;
  margin: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(3, 105, 161, 0.08);
}

/* ==========================================================================
   STRICT SEPARATION: LOGGED-OUT (GUEST) VS LOGGED-IN (STUDENT)
   ========================================================================== */
/* 1. STATE TANPA USER (GUEST / LOGGED OUT) */
body:not(.is-student-logged-in) .header-student-badge,
body:not(.is-student-logged-in) #headerStudentBadge,
body:not(.is-student-logged-in) #btnHeaderProfile,
body:not(.is-student-logged-in) #btnHeaderLogout,
body:not(.is-student-logged-in) #welcomeAuthBox {
  display: none !important;
}

/* Navigasi Siswa: Tersembunyi hanya jika BELUM login dan BELUM pernah asesmen */
body:not(.is-student-logged-in):not(.has-assessment) #btnHeaderStudentDash,
body:not(.is-student-logged-in):not(.has-assessment) #btnHeaderProbe,
body:not(.is-student-logged-in):not(.has-assessment) #btnHeaderReport {
  display: none !important;
}

body:not(.is-student-logged-in) #welcomeUnauthBox {
  display: block !important;
}

body.is-student-logged-in #welcomeAuthBox {
  display: block !important;
}

body.is-student-logged-in #welcomeUnauthBox {
  display: none !important;
}

/* Desktop Only Header Buttons State */
@media (min-width: 993px) {
  body.has-assessment #btnHeaderStudentDash,
  body.has-assessment #btnHeaderProbe,
  body.has-assessment #btnHeaderReport {
    display: inline-flex !important;
  }

  body:not(.is-student-logged-in) #btnHeaderLogin {
    display: inline-flex !important;
  }

  body.is-student-logged-in #headbarQuickNav,
  body.is-student-logged-in .ask-headbar-nav,
  body.is-student-logged-in #btnHeaderLogin,
  body.is-student-logged-in #btnHeaderProfile {
    display: none !important;
  }

  body.is-student-logged-in .header-student-badge,
  body.is-student-logged-in #headerStudentBadge {
    display: inline-flex !important;
  }

  body.is-student-logged-in #btnHeaderStudentDash,
  body.is-student-logged-in #btnHeaderProbe,
  body.is-student-logged-in #btnHeaderReport,
  body.is-student-logged-in #btnHeaderLogout {
    display: inline-flex !important;
  }
}

.header-student-badge:hover {
  background: #E0F2FE !important;
  border-color: #7DD3FC !important;
  transform: translateY(-1px) !important;
}

.header-student-badge .badge-student-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-student-badge .badge-tier-pill {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  line-height: 1.2 !important;
}

/* Gamified Stat Badges (Hearts, Streak, Gems, XP) */
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  border: 2px solid transparent;
  transition: transform 0.15s ease;
  user-select: none;
}
.stat-pill:hover {
  transform: scale(1.05);
}

.stat-pill-hearts {
  color: var(--duo-red);
  background: var(--duo-red-light);
  border-color: #FFC1C1;
}

.stat-pill-streak {
  color: #E57E00;
  background: var(--duo-yellow-light);
  border-color: #FFE082;
}

.stat-pill-gems {
  color: var(--duo-blue-dark);
  background: var(--duo-blue-light);
  border-color: #B3E5FC;
}

.stat-pill-xp {
  color: var(--duo-purple);
  background: #EDE7F6;
  border-color: #D1C4E9;
}

/* --------------------------------------------------------------------------
   3. Student Authentication & Status Banners
   -------------------------------------------------------------------------- */
.welcome-auth-prompt-card {
  background: #FFFFFF;
  border: 2px solid var(--duo-border);
  border-bottom: 5px solid var(--duo-border-dark);
  border-radius: 20px;
  padding: 28px 24px;
  margin: 24px 0;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

.auth-prompt-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: var(--duo-green-dark);
  background: var(--duo-green-light);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.auth-prompt-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--duo-text-main);
  margin-bottom: 8px;
}

.auth-prompt-desc {
  font-size: 14.5px;
  color: #555;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.welcome-student-status-card {
  background: #F0F9FF;
  border: 2px solid #BAE6FD;
  border-bottom: 4px solid #7DD3FC;
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   4. The Skill Tree / Path Map (Pohon Keahlian & Peta Jalur Belajar)
   -------------------------------------------------------------------------- */
.skill-tree-section {
  max-w: 900px;
  margin: 0 auto;
  padding: 30px 20px;
}

.path-unit-card {
  background: var(--duo-green);
  color: #FFF;
  border-radius: 24px;
  padding: 24px 28px;
  border-bottom: 6px solid var(--duo-green-dark);
  margin-bottom: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.path-unit-card:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.path-unit-card:active {
  transform: translateY(2px);
}

.path-unit-title {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 4px;
}

.path-unit-desc {
  font-size: 15px;
  font-weight: 700;
  opacity: 0.95;
}

.skill-nodes-river {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  padding: 20px 0;
}

.skill-node-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.skill-node-wrapper:hover .skill-node-btn {
  transform: scale(1.06);
}

.skill-node-wrapper:hover .skill-node-label {
  border-color: var(--duo-blue);
  color: var(--duo-blue);
}

/* Alternating Winding Path positions for all nodes */
.skill-node-wrapper:nth-child(4n+1) { transform: translateX(0); }
.skill-node-wrapper:nth-child(4n+2) { transform: translateX(-40px); }
.skill-node-wrapper:nth-child(4n+3) { transform: translateX(40px); }
.skill-node-wrapper:nth-child(4n)   { transform: translateX(-20px); }

.skill-node-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: pointer;
  border: 3px solid transparent;
  position: relative;
  transition: all 0.15s ease;
  user-select: none;
}

.skill-node-btn:active {
  transform: translateY(6px);
}

/* Mastered / Gold Node */
.node-mastered {
  background: var(--duo-yellow);
  border-color: #FFA000;
  box-shadow: 0 8px 0 var(--duo-yellow-dark);
  color: #4B3800;
}
.node-mastered:active {
  box-shadow: 0 2px 0 var(--duo-yellow-dark);
}

/* Active / In Progress Node (Green) */
.node-active {
  background: var(--duo-green);
  border-color: #388E3C;
  box-shadow: 0 8px 0 var(--duo-green-dark);
  color: #FFF;
  animation: pulseNode 2s infinite;
}
@keyframes pulseNode {
  0%, 100% { box-shadow: 0 8px 0 var(--duo-green-dark), 0 0 0 0 rgba(88, 204, 2, 0.4); }
  50% { box-shadow: 0 8px 0 var(--duo-green-dark), 0 0 0 12px rgba(88, 204, 2, 0); }
}

/* Developing Node (Blue) */
.node-developing {
  background: var(--duo-blue);
  border-color: #0288D1;
  box-shadow: 0 8px 0 var(--duo-blue-dark);
  color: #FFF;
}
.node-developing:active {
  box-shadow: 0 2px 0 var(--duo-blue-dark);
}

/* Learning Node (Orange) */
.node-learning {
  background: #FF9800;
  border-color: #F57C00;
  box-shadow: 0 8px 0 #E65100;
  color: #FFF;
}
.node-learning:active {
  box-shadow: 0 2px 0 #E65100;
}

/* Not Ready Node (Red) */
.node-not-ready {
  background: #E53935;
  border-color: #C62828;
  box-shadow: 0 8px 0 #B71C1C;
  color: #FFF;
}
.node-not-ready:active {
  box-shadow: 0 2px 0 #B71C1C;
}

/* Locked Node (Gray) */
.node-locked {
  background: #E5E5E5;
  border-color: #CCCCCC;
  box-shadow: 0 8px 0 #CECECE;
  color: #A0A0A0;
  cursor: pointer;
}

.skill-node-label {
  font-size: 13px;
  font-weight: 800;
  margin-top: 10px;
  text-align: center;
  color: var(--duo-text-main);
  background: #FFF;
  padding: 4px 12px;
  border-radius: 12px;
  border: 2px solid var(--duo-border);
  box-shadow: 0 2px 0 var(--duo-border);
  cursor: pointer;
  transition: all 0.15s ease;
}

/* --------------------------------------------------------------------------
   5. Lesson / Assessment Screen (Gamified Interactive CBT)
   -------------------------------------------------------------------------- */
.lesson-container {
  max-width: 840px;
  margin: 0 auto;
  padding: 24px 20px 100px;
}

.lesson-top-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.lesson-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #AFAFAF;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.lesson-close-btn:hover { color: var(--duo-text-main); }

.lesson-progress-track {
  flex-grow: 1;
  height: 16px;
  background: #E5E5E5;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.lesson-progress-fill {
  height: 100%;
  background: var(--duo-green);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.lesson-progress-fill::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  right: 6px;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 999px;
}

/* Per-Item Countdown Bar */
.item-countdown-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--duo-text-muted);
}

/* Question Stimulus Card */
.lesson-card-question {
  background: #FFFFFF;
  border-radius: 24px;
  border: 2px solid var(--duo-border);
  border-bottom: 5px solid var(--duo-border-dark);
  padding: 28px;
  margin-bottom: 24px;
}

.lesson-question-prompt {
  font-size: 20px;
  font-weight: 800;
  color: var(--duo-text-main);
  margin-bottom: 14px;
  line-height: 1.4;
}

/* Options 3D Cards */
.lesson-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 30px;
}

@media (min-width: 640px) {
  .lesson-options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lesson-option-card {
  background: #FFFFFF;
  border: 2px solid var(--duo-border);
  border-bottom: 4px solid var(--duo-border-dark);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.1s ease;
  user-select: none;
}

.lesson-option-card:hover {
  background: #F7F7F7;
  border-color: #CECECE;
}

.lesson-option-card:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
}

.lesson-option-card.selected {
  background: var(--duo-blue-light);
  border-color: var(--duo-blue);
  border-bottom-color: var(--duo-blue-dark);
}

.option-badge-key {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 2px solid var(--duo-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
  color: var(--duo-text-muted);
  flex-shrink: 0;
  background: #FAFAFA;
}

.lesson-option-card.selected .option-badge-key {
  background: var(--duo-blue);
  color: #FFF;
  border-color: var(--duo-blue);
}

.option-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--duo-text-main);
  line-height: 1.4;
}

/* Bottom Slide-up Action Footer (Duolingo Bottom Sheet) */
.lesson-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-top: 2px solid var(--duo-border);
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 90;
}

.bottom-sheet-correct {
  background: var(--duo-green-light) !important;
  border-top-color: var(--duo-green) !important;
}

.bottom-sheet-incorrect {
  background: var(--duo-red-light) !important;
  border-top-color: var(--duo-red) !important;
}

/* --------------------------------------------------------------------------
   6. 4-State Mastery Badges (Gamified Edition)
   -------------------------------------------------------------------------- */
.badge-mastered {
  background: var(--duo-green) !important;
  color: #FFF !important;
  border-radius: 10px !important;
  border: 2px solid var(--duo-green) !important;
  border-bottom: 3px solid var(--duo-green-dark) !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
}

.badge-developing {
  background: var(--duo-yellow) !important;
  color: #4B3800 !important;
  border-radius: 10px !important;
  border: 2px solid var(--duo-yellow) !important;
  border-bottom: 3px solid var(--duo-yellow-dark) !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
}

.badge-learning {
  background: var(--duo-blue) !important;
  color: #FFF !important;
  border-radius: 10px !important;
  border: 2px solid var(--duo-blue) !important;
  border-bottom: 3px solid var(--duo-blue-dark) !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
}

.badge-not-ready {
  background: #FF5252 !important;
  color: #FFF !important;
  border-radius: 10px !important;
  border: 2px solid #FF5252 !important;
  border-bottom: 3px solid #D32F2F !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
}

/* --------------------------------------------------------------------------
   7. Cards & Modals (Rounded-3xl with 3D bottom border)
   -------------------------------------------------------------------------- */
.welcome-card, .dash-hero-card, .dash-section-card, .report-page, .modal-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.info-item {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 14px !important;
}

.info-item-value {
  color: var(--duo-purple) !important;
  font-weight: 900 !important;
}

/* Input Fields */
input[type="text"], select, textarea {
  background: #FFFFFF !important;
  border: 2px solid var(--duo-border) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--duo-text-main) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03) !important;
  outline: none !important;
}

input[type="text"]:focus, select:focus, textarea:focus {
  border-color: var(--duo-blue) !important;
  box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.2) !important;
}

/* --------------------------------------------------------------------------
   8. Overriding Legacy App Buttons into 3D Tactile Duolingo Physics
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  border-radius: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  transition: all 0.1s ease !important;
  cursor: pointer !important;
}

.btn:active {
  transform: translateY(3px) !important;
}

.btn-primary {
  background: var(--duo-green) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--duo-green) !important;
  border-bottom: 5px solid var(--duo-green-dark) !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: #61E002 !important;
}
.btn-primary:active {
  border-bottom-width: 2px !important;
}

.btn-secondary {
  background: #FFFFFF !important;
  color: var(--duo-text-main) !important;
  border: 2px solid var(--duo-border) !important;
  border-bottom: 5px solid var(--duo-border-dark) !important;
  box-shadow: none !important;
}
.btn-secondary:hover {
  background: #F7F7F7 !important;
}
.btn-secondary:active {
  border-bottom-width: 2px !important;
}

.btn-warning {
  background: var(--duo-yellow) !important;
  color: #4B3800 !important;
  border: 2px solid var(--duo-yellow) !important;
  border-bottom: 5px solid var(--duo-yellow-dark) !important;
  box-shadow: none !important;
}
.btn-warning:hover {
  background: #FFD21A !important;
}
.btn-warning:active {
  border-bottom-width: 2px !important;
}

.btn-ghost {
  background: #FFFFFF !important;
  color: var(--duo-blue) !important;
  border: 2px solid #BAE6FD !important;
  border-bottom: 4px solid #7DD3FC !important;
  box-shadow: none !important;
}
.btn-ghost:hover {
  background: #F0F9FF !important;
}

/* --------------------------------------------------------------------------
   9. Interactive Option Cards (Duolingo Lesson Options)
   -------------------------------------------------------------------------- */
.option-item {
  background: #FFFFFF !important;
  border: 2px solid var(--duo-border) !important;
  border-bottom: 5px solid var(--duo-border-dark) !important;
  border-radius: 18px !important;
  padding: 16px 20px !important;
  margin-bottom: 14px !important;
  cursor: pointer !important;
  transition: all 0.12s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  box-shadow: none !important;
}

.option-item:hover {
  background: #FAFAFA !important;
  border-color: #CECECE !important;
  transform: translateY(-2px) !important;
}

.option-item:active {
  transform: translateY(3px) !important;
  border-bottom-width: 2px !important;
}

.option-item.selected {
  background: var(--duo-blue-light) !important;
  border-color: var(--duo-blue) !important;
  border-bottom: 5px solid var(--duo-blue-dark) !important;
}

.option-radio, .option-checkbox {
  width: 22px !important;
  height: 22px !important;
  accent-color: var(--duo-blue) !important;
  cursor: pointer !important;
}

.option-label {
  font-family: var(--font-body) !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: var(--duo-text-main) !important;
  line-height: 1.45 !important;
}

/* --------------------------------------------------------------------------
   10. Duolingo Milestone Nav Grid (Question Pills)
   -------------------------------------------------------------------------- */
.nav-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
}

.nav-grid button, .nav-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  background: #FFFFFF !important;
  border: 2px solid var(--duo-border) !important;
  border-bottom: 4px solid var(--duo-border-dark) !important;
  color: var(--duo-text-muted) !important;
  cursor: pointer !important;
  transition: all 0.1s ease !important;
}

.nav-grid button:active, .nav-btn:active {
  transform: translateY(2px) !important;
  border-bottom-width: 2px !important;
}

.nav-grid button.answered, .nav-btn.answered {
  background: var(--duo-green-light) !important;
  border-color: var(--duo-green) !important;
  border-bottom-color: var(--duo-green-dark) !important;
  color: var(--duo-green-dark) !important;
}

.nav-grid button.current, .nav-btn.current {
  background: var(--duo-blue) !important;
  border-color: var(--duo-blue-dark) !important;
  border-bottom-color: #0288D1 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.3) !important;
}

.nav-grid button.doubt, .nav-btn.doubt {
  background: var(--duo-yellow-light) !important;
  border-color: var(--duo-yellow) !important;
  border-bottom-color: var(--duo-yellow-dark) !important;
  color: #996500 !important;
}

/* Package Selection Cards */
.package-card {
  border-radius: 20px !important;
  border: 2px solid var(--duo-border) !important;
  border-bottom: 5px solid var(--duo-border-dark) !important;
  transition: all 0.12s ease !important;
  padding: 16px 20px !important;
}

.package-card:hover {
  background: #FAFAFA !important;
  border-color: #BDBDBD !important;
}

.package-card.active {
  background: var(--duo-blue-light) !important;
  border-color: var(--duo-blue) !important;
  border-bottom-color: var(--duo-blue-dark) !important;
}

/* --------------------------------------------------------------------------
   11. Focused CBT Assessment Layout (Distraction-Free & Auto-Advancing)
   -------------------------------------------------------------------------- */
.test-layout-focused {
  max-width: 780px;
  margin: 32px auto 48px auto;
  padding: 0 16px;
  width: 100%;
}

.question-card-focused {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 32px 36px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

@media (max-width: 640px) {
  .question-card-focused {
    padding: 20px 16px !important;
    border-radius: 14px !important;
  }
}

.q-focused-header {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.q-focused-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.q-focused-number {
  font-family: var(--font-body) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  letter-spacing: -0.01em;
}

.q-progress-bar-track {
  width: 100%;
  height: 8px;
  background: #F1F5F9;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
}

.q-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #06B6D4, #0891B2);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.question-stem {
  font-family: var(--font-body) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}

.stimulus-box {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  margin-bottom: 22px !important;
  overflow: hidden;
}

.stimulus-title {
  background-color: #F1F5F9 !important;
  color: #475569 !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid #E2E8F0 !important;
}

.stimulus-text {
  padding: 16px 20px !important;
  font-family: var(--font-body) !important;
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  color: #334155 !important;
}

/* Hint Button and Inline Drawer Under Options */
.q-hint-section {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed #CBD5E1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.btn-hint-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 9px;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: #92400E;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-hint-trigger:hover {
  background: #FEF3C7;
  border-color: #F59E0B;
  transform: translateY(-1px);
}

.btn-hint-trigger:active {
  transform: translateY(1px);
}

.hint-icon {
  font-size: 1.1rem;
}

.q-hint-drawer-inline {
  width: 100%;
  background: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.06) !important;
  margin-top: 8px;
  animation: slideDownHint 0.22s ease-out;
}

@keyframes slideDownHint {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hint-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 900;
  font-size: 0.95rem;
  color: #92400E;
}

.btn-hint-close {
  background: #FEF3C7;
  border: 1.5px solid #FDE68A;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #92400E;
  cursor: pointer;
  padding: 4px 10px;
  transition: background 0.1s ease;
}

.btn-hint-close:hover {
  background: #FDE68A;
}

.hint-drawer-body {
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
  color: #451A03 !important;
  font-weight: 600;
}

/* ============================================================ */
/* MULTI-STEP REPORT STEPPER HEADER & CONTEXTUAL NAVIGATION    */
/* ============================================================ */
.report-stepper-header {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  padding: 18px 24px;
  margin-bottom: 24px;
}

.stepper-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #EEEEEE;
}

.stepper-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  color: #E60000;
  letter-spacing: 0.05em;
}

.stepper-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: #1A1A1A;
  margin: 2px 0 0 0;
}

.stepper-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.report-stepper-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stepper-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.stepper-tab:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateY(-1px);
}

.stepper-tab.active {
  background: #ECFEFF !important;
  border-color: #06B6D4 !important;
  color: #0891B2 !important;
  box-shadow: 0 1px 3px rgba(6, 182, 212, 0.15);
  transform: translateY(-1px);
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E2E8F0;
  color: #1E293B;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.stepper-tab.active .step-badge {
  background: #0891B2;
  color: #FFFFFF;
  box-shadow: none;
}

.step-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.step-name {
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stepper-tab.active .step-name {
  color: #FFFFFF;
}

.step-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stepper-tab.active .step-sub {
  color: #E0E7FF;
}

/* Page Bottom Nav Bar */
.rep-page-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 16px 20px;
  background: #F8FAFC;
  border: 2px solid #000000;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #000000;
}

.rep-nav-actions-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rep-nav-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rep-step-hint-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
}

.rep-next-btn {
  background: #0000FF !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0 #000000 !important;
  padding: 10px 18px !important;
}

.rep-prev-btn {
  background: #FFFFFF !important;
  color: #000000 !important;
  font-weight: 800 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0 #000000 !important;
  padding: 10px 16px !important;
}

/* Alert Box: Flagged Questions Needing Evaluation */
.rep-eval-alert-card {
  margin-top: 20px;
  background: #FFFBEB;
  border: 2px solid #F59E0B;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 3px 3px 0 #000000;
}

.eval-alert-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.eval-alert-badge {
  background: #D97706;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.eval-alert-title {
  font-size: 1rem;
  font-weight: 900;
  color: #78350F;
}

.eval-alert-desc {
  font-size: 0.84rem;
  color: #92400E;
  line-height: 1.5;
  margin-bottom: 12px;
}

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

.eval-item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid #FCD34D;
  border-radius: 8px;
  padding: 10px 14px;
  gap: 12px;
}

.eval-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eval-item-code {
  font-family: var(--font-mono, monospace);
  font-weight: 900;
  font-size: 0.82rem;
  background: #FEF3C7;
  color: #92400E;
  padding: 2px 6px;
  border-radius: 4px;
}

.eval-item-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1E293B;
}

.eval-item-reason {
  font-size: 0.78rem;
  font-weight: 800;
  color: #DC2626;
  background: #FEE2E2;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ============================================================ */
/* STUDENT DASHBOARD: VIDEO HUB & PRACTICE MODES               */
/* ============================================================ */
.student-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.student-video-card {
  background: #FFFFFF;
  border: 2px solid #000000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 3px 3px 0 #000000;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease;
}

.student-video-card:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 #000000;
}

.student-video-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  cursor: pointer;
  overflow: hidden;
}

.student-video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.student-video-thumb-wrap:hover .student-video-thumb-img {
  opacity: 1;
  transform: scale(1.03);
}

.student-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: rgba(230, 0, 0, 0.9);
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1.1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.student-video-rec-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #FFFF00;
  color: #000000;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #000000;
  box-shadow: 1px 1px 0 #000000;
}

.student-video-info {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.student-video-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  margin-bottom: 6px;
}

.student-video-sub {
  font-size: 0.78rem;
  color: #64748B;
  margin-bottom: 12px;
  flex: 1;
}

.student-video-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #F1F5F9;
}

.student-video-meta {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748B;
}

/* Practice Modes Grid */
.practice-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.practice-mode-card {
  background: #FFFFFF;
  border: 2.5px solid #000000;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 4px 4px 0 #000000;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.15s ease;
}

.practice-mode-card:hover {
  transform: translateY(-2px);
}

.card-remedial {
  background: #FFFBEB;
  border-color: #D97706;
}

.card-numerasi {
  background: #EFF6FF;
  border-color: #2563EB;
}

.card-literasi {
  background: #F0FDF4;
  border-color: #16A34A;
}

.pm-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  border: 1px solid #000000;
}

.badge-remedial {
  background: #F59E0B;
  color: #000000;
}

.badge-numerasi {
  background: #3B82F6;
  color: #FFFFFF;
}

.badge-literasi {
  background: #22C55E;
  color: #FFFFFF;
}

.pm-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 6px 0;
}

.pm-desc {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 18px;
  flex: 1;
}

.pm-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748B;
}

.pm-action-btn {
  width: 100%;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  padding: 10px !important;
  border: 2px solid #000000 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

/* ============================================================ */
/* PRACTICE QUIZ MODAL & INTERACTIVE ENGINE                     */
/* ============================================================ */
.modal-practice-quiz-dialog {
  max-width: 620px !important;
  width: 95% !important;
}

.pq-question-stem {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.55;
  margin-bottom: 18px;
}

.pq-choices-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.pq-choice-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.94rem;
  font-weight: 700;
  color: #1E293B;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pq-choice-btn:hover:not(:disabled) {
  background: #F1F5F9;
  border-color: #64748B;
  transform: translateX(2px);
}

.pq-choice-btn.selected {
  border-color: #0000FF;
  background: #EEF2FF;
}

.pq-choice-btn.correct {
  border-color: #16A34A !important;
  background: #DCFCE7 !important;
  color: #14532D !important;
  font-weight: 800 !important;
}

.pq-choice-btn.incorrect {
  border-color: #DC2626 !important;
  background: #FEE2E2 !important;
  color: #7F1D1D !important;
}

.pq-feedback-card {
  margin-top: 14px;
  border-radius: 10px;
  padding: 14px 16px;
  border: 2px solid;
  animation: slideDownHint 0.2s ease-out;
}

.pq-feedback-card.correct {
  background: #F0FDF4;
  border-color: #22C55E;
}

.pq-feedback-card.incorrect {
  background: #FEF2F2;
  border-color: #EF4444;
}

.pq-feedback-title {
  font-size: 0.95rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.pq-feedback-card.correct .pq-feedback-title {
  color: #15803D;
}

.pq-feedback-card.incorrect .pq-feedback-title {
  color: #B91C1C;
}

.pq-feedback-explanation {
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.5;
}

/* Gamified Daily Drill Progress Bar & Animations */
.practice-quiz-progress-track {
  width: 100%;
  height: 8px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.practice-quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10B981, #059669);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes drillBounceHero {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes drillFlameGlow {
  0% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4)); }
  50% { transform: scale(1.14); filter: drop-shadow(0 0 16px rgba(239, 68, 68, 0.75)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4)); }
}

.drill-celebration-hero {
  animation: drillBounceHero 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.drill-flame-anim {
  display: inline-block;
  animation: drillFlameGlow 1.8s infinite ease-in-out;
}

/* ============================================================ */
/* PRINT MEDIA RULES (COMPLETE 4 PAGES A4 SEQUENTIAL)           */
/* ============================================================ */
@media print {
  .report-stepper-header,
  .rep-page-nav-bar,
  .no-print {
    display: none !important;
  }
  
  .report-page {
    display: flex !important;
    page-break-after: always !important;
    break-after: page !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    border: 1px solid #000000 !important;
  }
  
  .report-page:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }
}

/* ============================================================ */
/* RESPONSIVE MOBILE OPTIMIZATION                              */
/* ============================================================ */
/* ============================================================ */
/* RESPONSIVE MOBILE OPTIMIZATION                              */
/* ============================================================ */
@media (max-width: 768px) {
  /* Global typography & input safety on mobile */
  *, *::before, *::after {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Stepper Header Navigation */
  .report-stepper-header {
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 14px;
  }

  .stepper-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .stepper-title {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .stepper-quick-actions {
    width: 100%;
    justify-content: stretch;
    display: flex;
    gap: 8px;
  }

  .stepper-quick-actions button {
    flex: 1;
    font-size: 0.82rem !important;
    padding: 8px 10px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* 3-Scope Navigator Pills */
  .report-scope-nav-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    margin: 10px 0 14px 0 !important;
    border-radius: 12px !important;
  }

  .report-scope-label {
    font-size: 11px !important;
    text-align: center !important;
  }

  .report-scope-buttons {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .btn-scope-pill {
    width: 100% !important;
    justify-content: center !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    text-align: center !important;
  }

  /* 4-Step Interactive Stepper Tabs (No font cutoff) */
  .report-stepper-nav {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 6px;
  }

  .stepper-tab {
    flex-shrink: 0;
    min-width: 135px;
    padding: 8px 10px;
    gap: 8px;
    border-radius: 10px;
  }

  .step-info {
    min-width: 0;
    flex: 1;
  }

  .step-name {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
  }

  .step-sub {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
  }

  /* ========================================================== */
  /* SCREEN REPORT CONTAINER & 4 A4-STYLE PAGES (RESPONSIVE)     */
  /* Eliminates the "mengecil lurus kebawah" squished strip     */
  /* ========================================================== */
  #screenReport {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .report-container {
    padding: 8px 2px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  .print-layout-4pages {
    gap: 18px !important;
    width: 100% !important;
  }

  .report-page {
    padding: 16px 12px !important;
    border: 2px solid #0F172A !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: auto !important;
  }

  .page-header-stamp-row {
    margin-bottom: 12px !important;
    padding-bottom: 6px !important;
    font-size: 0.72rem !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Official Institutional Kop Surat (Kop Lembaga) */
  .kop-surat-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .kop-logo-wrap {
    margin: 0 auto !important;
  }

  .kop-logo-img {
    height: 46px !important;
    max-height: 50px !important;
    margin: 0 auto !important;
  }

  .kop-text-wrap {
    text-align: center !important;
    width: 100% !important;
  }

  .kop-instansi-name {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
    color: #0F172A !important;
    word-break: break-word !important;
  }

  .kop-instansi-sub {
    font-size: 0.74rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
    color: #475569 !important;
    margin-top: 3px !important;
    word-break: break-word !important;
  }

  .kop-instansi-address {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
    color: #64748B !important;
    margin-top: 3px !important;
    word-break: break-word !important;
  }

  .kop-line-double {
    margin-bottom: 14px !important;
    height: 4px !important;
  }

  /* Certificate Title Block */
  .cert-title-block {
    margin-bottom: 14px !important;
    text-align: center !important;
  }

  .cert-main-title {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
    color: #0F172A !important;
    word-break: break-word !important;
  }

  .cert-sub-title {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
    color: #475569 !important;
    margin-top: 4px !important;
    word-break: break-word !important;
  }

  .cert-statement-box {
    padding: 10px 12px !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    border-radius: 8px !important;
    margin-bottom: 14px !important;
    word-break: break-word !important;
  }

  /* Student Metadata Table Card */
  .report-meta-table-wrap {
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #F8FAFC !important;
    margin-bottom: 16px !important;
    padding: 10px 12px !important;
  }

  .meta-table-clean {
    display: block !important;
    width: 100% !important;
    border-collapse: separate !important;
  }

  .meta-table-clean tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .meta-table-clean tr {
    display: flex !important;
    flex-direction: column !important;
    border-bottom: 1px dashed #E2E8F0 !important;
    padding-bottom: 6px !important;
    margin-bottom: 2px !important;
    width: 100% !important;
  }

  .meta-table-clean tr:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .meta-table-clean td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
  }

  .meta-col-sep {
    display: none !important;
  }

  .meta-col-label {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
    width: 100% !important;
  }

  .meta-col-val {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    word-break: break-word !important;
  }

  .meta-col-val:last-child {
    margin-bottom: 0 !important;
  }

  /* Score Overview Grid */
  .score-overview-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .score-card {
    padding: 12px 10px !important;
    border: 2px solid #0F172A !important;
    border-radius: 12px !important;
    box-shadow: 2px 2px 0 #0F172A !important;
  }

  .score-card-label {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
    word-break: break-word !important;
  }

  .score-num {
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
    word-break: break-word !important;
  }

  .score-fraction {
    font-size: 0.74rem !important;
    word-break: break-word !important;
  }

  .score-badge {
    font-size: 0.72rem !important;
    padding: 2px 6px !important;
  }

  /* Parent Summary Card */
  .parent-summary-card {
    border-radius: 14px !important;
    border: 2px solid #0F172A !important;
    box-shadow: 2px 2px 0 #0F172A !important;
    margin-bottom: 16px !important;
  }

  .parent-summary-header {
    padding: 10px 14px !important;
  }

  .parent-summary-header h3 {
    font-size: 0.85rem !important;
    word-break: break-word !important;
  }

  .parent-summary-body {
    padding: 14px 12px !important;
  }

  .profile-headline {
    font-size: 1.02rem !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
    word-break: break-word !important;
  }

  .profile-summary-text {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
    word-break: break-word !important;
  }

  .parent-counsel-box {
    padding: 10px 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    border-radius: 8px !important;
    word-break: break-word !important;
  }

  /* Dual Audit Columns: Strengths & Bottlenecks */
  .strengths-bottlenecks-wrapper {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .diagnostic-column {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 2px solid #0F172A !important;
    box-shadow: 2px 2px 0 #0F172A !important;
  }

  .diagnostic-col-header {
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
    word-break: break-word !important;
  }

  .diagnostic-col-list {
    padding: 10px !important;
    gap: 8px !important;
  }

  .strength-item-card,
  .bottleneck-item-card {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    word-break: break-word !important;
  }

  /* ========================================================== */
  /* HALAMAN 2: DEEP DIVE PRESKRIPSI & 4 PILAR DIAGNOSTIK      */
  /* ========================================================== */
  .page-section-header {
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
  }

  .page-section-title {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .page-section-desc {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
  }

  .intervention-detail-block {
    border: 2px solid #0F172A !important;
    border-radius: 14px !important;
    padding: 12px 10px !important;
    margin-bottom: 12px !important;
    box-shadow: 2px 2px 0 #0F172A !important;
  }

  .intervention-block-header {
    padding-bottom: 8px !important;
    margin-bottom: 10px !important;
  }

  .prescription-area {
    font-size: 0.96rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .diagnostic-pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 10px 0 !important;
  }

  .pillar-box {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
  }

  .pillar-title {
    font-size: 0.74rem !important;
    margin-bottom: 3px !important;
    word-break: break-word !important;
  }

  .stage-step-row {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    word-break: break-word !important;
  }

  .stage-step-num {
    font-size: 0.72rem !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
  }

  .mastery-criteria-box {
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    border-radius: 8px !important;
    margin-top: 8px !important;
    word-break: break-word !important;
  }

  /* ========================================================== */
  /* HALAMAN 3: CHARTS & TABEL 20 MATERI (SWIPEABLE & NO SQUISH)*/
  /* ========================================================== */
  .charts-section {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .chart-box {
    padding: 12px 10px !important;
    border-radius: 12px !important;
    border: 2px solid #0F172A !important;
    box-shadow: 2px 2px 0 #0F172A !important;
  }

  .chart-title {
    font-size: 0.82rem !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
    word-break: break-word !important;
  }

  .radar-wrapper svg {
    max-width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
  }

  .mastery-table-responsive,
  .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid #CBD5E1 !important;
    position: relative !important;
  }

  .mastery-matrix-table {
    min-width: 660px !important;
    width: 100% !important;
    border: none !important;
  }

  .matrix-table {
    min-width: 620px !important;
    width: 100% !important;
    border: none !important;
  }

  .mastery-legend-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px 0 !important;
  }

  .legend-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  /* ========================================================== */
  /* HALAMAN 4: ROADMAP 4 PEKAN, CATATAN & LEMBAR PENGESAHAN    */
  /* ========================================================== */
  .roadmap-timeline-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
    margin-bottom: 16px !important;
  }

  .roadmap-week-card {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 2px solid #0F172A !important;
    box-shadow: 2px 2px 0 #0F172A !important;
  }

  .roadmap-week-header {
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
    word-break: break-word !important;
  }

  .roadmap-week-body {
    padding: 10px 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    gap: 6px !important;
    word-break: break-word !important;
  }

  .roadmap-milestone {
    font-size: 0.78rem !important;
    padding-top: 6px !important;
    word-break: break-word !important;
  }

  .mastery-launch-banner {
    border-radius: 12px !important;
    padding: 12px !important;
    margin: 12px 0 !important;
  }

  .mastery-launch-title {
    font-size: 0.88rem !important;
    word-break: break-word !important;
  }

  .mastery-launch-body {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .mastery-launch-body button {
    width: 100% !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .signature-area {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    margin-top: 16px !important;
    padding-top: 12px !important;
  }

  .sig-block {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
  }

  .page-footer-print {
    font-size: 0.65rem !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: center !important;
    align-items: center !important;
    padding-top: 8px !important;
  }

  /* Bottom Navigation Action Bar on Report Pages */
  .rep-page-nav-bar {
    flex-direction: column-reverse !important;
    gap: 10px !important;
    align-items: stretch !important;
    padding: 12px 8px !important;
  }

  .rep-nav-actions-left,
  .rep-nav-actions-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .rep-nav-actions-left button,
  .rep-nav-actions-right button {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.88rem !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 10px 14px !important;
  }

  .practice-modes-grid {
    grid-template-columns: 1fr;
  }

  .student-videos-grid {
    grid-template-columns: 1fr;
  }

  .eval-item-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .score-overview-grid {
    grid-template-columns: 1fr !important;
  }

  .stepper-title {
    font-size: 1.1rem !important;
  }

  .stepper-tab {
    min-width: 120px !important;
    padding: 6px 8px !important;
  }

  .step-name {
    font-size: 0.78rem !important;
  }

  .step-sub {
    font-size: 0.65rem !important;
  }

  .report-page {
    padding: 14px 10px !important;
  }

  .kop-instansi-name {
    font-size: 0.98rem !important;
  }

  .cert-main-title {
    font-size: 0.98rem !important;
  }
}

/* Touch-friendly swipe hint for mobile matrix tables */
.mobile-table-swipe-hint {
  display: none;
}

@media (max-width: 768px) {
  .mobile-table-swipe-hint {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #EFF6FF !important;
    border: 1px dashed #93C5FD !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    margin: 8px 0 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #1D4ED8 !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   COLORFUL MODERN MASTERY MATRIX TABLE (SWISS / MATERIAL THEME)
   Replaces stark black table headers with harmonious cognitive depth colors
   ========================================================================== */
.mastery-matrix-table, .matrix-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  background: #FFFFFF !important;
  font-family: 'Nunito', 'Inter', -apple-system, sans-serif !important;
}

.mastery-matrix-table thead th, .matrix-table thead th {
  background: #1E293B !important;
  color: #FFFFFF !important;
  padding: 12px 10px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-bottom: 2px solid #CBD5E1 !important;
}

/* Distinctive Cognitive Depth & Status Column Headers */
.mastery-matrix-table thead th.th-l1 {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  color: #FFFFFF !important;
  border-left: 1px solid rgba(255,255,255,0.15) !important;
}

.mastery-matrix-table thead th.th-l2 {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
  color: #FFFFFF !important;
  border-left: 1px solid rgba(255,255,255,0.15) !important;
}

.mastery-matrix-table thead th.th-l3 {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%) !important;
  color: #FFFFFF !important;
  border-left: 1px solid rgba(255,255,255,0.15) !important;
}

.mastery-matrix-table thead th.th-l4 {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #FFFFFF !important;
  border-left: 1px solid rgba(255,255,255,0.15) !important;
}

.mastery-matrix-table thead th.th-status {
  background: linear-gradient(135deg, #4338CA 0%, #3730A3 100%) !important;
  color: #FFFFFF !important;
  border-left: 1px solid rgba(255,255,255,0.15) !important;
}

.mastery-matrix-table tbody td, .matrix-table tbody td {
  padding: 10px 12px !important;
  border: none !important;
  border-bottom: 1px solid #F1F5F9 !important;
  border-right: 1px solid #F8FAFC !important;
  font-size: 12.5px !important;
  color: #1E293B !important;
  vertical-align: middle !important;
}

.mastery-matrix-table tbody tr:nth-child(even), .matrix-table tbody tr:nth-child(even) {
  background: #F8FAFC !important;
}

.mastery-matrix-table tbody tr:hover, .matrix-table tbody tr:hover {
  background: #F1F5F9 !important;
  transition: background 0.15s ease !important;
}

/* Rounded Colorful Badges in Table */
.mastery-matrix-table .legend-badge, .matrix-table .status-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.mastery-matrix-table .badge-mastered, .matrix-table .badge-mastered {
  background: #DCFCE7 !important;
  color: #15803D !important;
  border: 1px solid #86EFAC !important;
}

.mastery-matrix-table .badge-developing, .matrix-table .badge-developing {
  background: #FEF9C3 !important;
  color: #A16207 !important;
  border: 1px solid #FDE047 !important;
}

.mastery-matrix-table .badge-learning, .matrix-table .badge-learning {
  background: #FFEDD5 !important;
  color: #C2410C !important;
  border: 1px solid #FDBA74 !important;
}

.mastery-matrix-table .badge-not-ready, .matrix-table .badge-not-ready {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
  border: 1px solid #FCA5A5 !important;
}

.mastery-matrix-table .badge-verification, .matrix-table .badge-verification {
  background: #EDE9FE !important;
  color: #6D28D9 !important;
  border: 1px solid #C4B5FD !important;
}

/* ========================================================================== */
/* REPORT SCOPE SELECTOR & EMPTY STATE (SWISS MINIMALIST & BOLD)             */
/* ========================================================================== */
.report-scope-nav-bar {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 18px;
  padding: 14px 20px;
  margin: 14px 0 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.report-scope-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0F172A;
  text-transform: uppercase;
}

.report-scope-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-scope-pill {
  background: #F8FAFC;
  color: #1E293B;
  border: 2px solid #CBD5E1;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.btn-scope-pill:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  transform: translateY(-1px);
}

.btn-scope-pill.active {
  background: var(--duo-green, #58CC02);
  color: #FFFFFF;
  border-color: var(--duo-green-dark, #46A302);
  box-shadow: 0 3px 0 var(--duo-green-dark, #46A302);
}

.btn-scope-pill.active:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--duo-green-dark, #46A302);
}

/* Report Partial Alert Banner */
.report-partial-banner {
  background: #FEF3C7;
  border: 1.5px solid #FDE68A;
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: #92400E;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
}

/* Report Empty State Card */
.report-empty-state-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 24px;
  padding: 48px 24px;
  text-align: center;
  max-width: 640px;
  margin: 32px auto;
  box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.08);
}

.report-empty-state-icon {
  font-size: 56px;
  margin-bottom: 16px;
  line-height: 1;
}

.report-empty-state-title {
  font-size: 22px;
  font-weight: 900;
  color: #0F172A;
  margin-bottom: 10px;
}

.report-empty-state-desc {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure White Font on Dark/Black Table Headers & Summary Headers */
.parent-summary-header {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

.parent-summary-header h1,
.parent-summary-header h2,
.parent-summary-header h3,
.parent-summary-header h4,
.parent-summary-header span:not(.score-badge) {
  color: #FFFFFF !important;
}

.mastery-matrix-table th,
.matrix-table th,
.token-table th,
.dash-records-table th,
table th[style*="background: #000"],
table th[style*="background:#000"] {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

.mastery-audit-header,
.mastery-audit-header-title {
  color: #FFFFFF !important;
}

@media print {
  .table-responsive,
  .mastery-table-responsive {
    overflow: visible !important;
    overflow-x: visible !important;
    width: 100% !important;
    margin-bottom: 8pt !important;
  }

  .report-page-3 .mastery-matrix-table,
  .mastery-matrix-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    font-size: 7.5pt !important;
    border: 1pt solid #000000 !important;
    box-shadow: none !important;
  }

  .mastery-matrix-table tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .mastery-matrix-table thead th,
  .mastery-matrix-table th {
    background: #000000 !important;
    color: #FFFFFF !important;
    padding: 3pt 2pt !important;
    font-size: 7pt !important;
    font-weight: 800 !important;
    text-align: center !important;
    border: 0.75pt solid #000000 !important;
    letter-spacing: 0 !important;
  }

  .mastery-matrix-table tbody td,
  .mastery-matrix-table td {
    padding: 2.5pt 3pt !important;
    font-size: 7.5pt !important;
    border: 0.75pt solid #333333 !important;
    vertical-align: middle !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.15 !important;
  }

  .mastery-matrix-table th.th-no { width: 4.5% !important; }
  .mastery-matrix-table th.th-materi { width: 29.5% !important; text-align: left !important; }
  .mastery-matrix-table th.th-domain { width: 11% !important; }
  .mastery-matrix-table th.th-l1 { width: 11% !important; }
  .mastery-matrix-table th.th-l2 { width: 11% !important; }
  .mastery-matrix-table th.th-l3 { width: 11% !important; }
  .mastery-matrix-table th.th-l4 { width: 11% !important; }
  .mastery-matrix-table th.th-status { width: 11% !important; }

  .mastery-matrix-table td div {
    font-size: 7.5pt !important;
    line-height: 1.15 !important;
  }

  .mastery-matrix-table .legend-badge,
  .mastery-matrix-table .tag-badge {
    box-sizing: border-box !important;
    padding: 1.5pt 2.5pt !important;
    font-size: 6pt !important;
    font-weight: 800 !important;
    border-radius: 3px !important;
    display: inline-block !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
    border: 0.5pt solid #000000 !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   STUDENT LOGGED-IN SCREEN & DASHBOARD NON-COLLIDING STYLES
   ========================================================================== */

/* Ketika siswa sudah login, hapus menu navigasi belakang (#headbarQuickNav) sepenuhnya */
body.is-student-logged-in #headbarQuickNav,
body.is-student-logged-in .ask-headbar-nav {
  display: none !important;
}

/* Main student dashboard container */
.student-dash-screen {
  padding: 12px 0 48px !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
}

/* Hero card in Student Dashboard */
/* Hero card in Student Dashboard (Clean Flat Academic) */
.dash-hero-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 26px 28px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.dash-hero-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  padding-bottom: 18px !important;
  margin-bottom: 18px !important;
}

.dash-hero-title {
  font-family: var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.015em !important;
}

.dash-hero-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  font-size: 13px !important;
  color: #475569 !important;
}

.dash-tier-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  background: #0891B2 !important;
  color: #FFFFFF !important;
}

.dash-hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.dash-hero-actions .btn {
  padding: 9px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* Horizontal Progress Bar: Kelengkapan Materi Belajar */
.materi-overall-progress-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.materi-overall-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.progress-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.progress-main-title {
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 800;
  color: #0F172A;
}

.progress-sub-ratio {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: #64748B;
  font-weight: 500;
}

.progress-badge-pct {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: #0891B2;
  background: #ECFEFF;
  border: 1px solid #A5F3FC;
  padding: 3px 12px;
  border-radius: 999px;
}

.materi-progress-track {
  width: 100%;
  height: 8px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
}

.materi-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #06B6D4 0%, #0891B2 100%);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4-Mastery Summary Grid & Cards (Standard Academic Metric Panels) */
.mastery-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

.mastery-summary-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.mastery-summary-card:hover {
  transform: translateY(-2px) !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

.mastery-summary-card.state-not-ready {
  background: #FFFFFF !important;
  border-top: 3px solid #F43F5E !important; /* Brand Pink */
  color: #0F172A !important;
}
.mastery-summary-card.state-not-ready .state-label {
  color: #E11D48 !important;
}

.mastery-summary-card.state-learning {
  background: #FFFFFF !important;
  border-top: 3px solid #F59E0B !important; /* Brand Yellow/Amber */
  color: #0F172A !important;
}
.mastery-summary-card.state-learning .state-label {
  color: #D97706 !important;
}

.mastery-summary-card.state-developing {
  background: #FFFFFF !important;
  border-top: 3px solid #06B6D4 !important; /* Brand Cyan */
  color: #0F172A !important;
}
.mastery-summary-card.state-developing .state-label {
  color: #0891B2 !important;
}

.mastery-summary-card.state-mastered {
  background: #FFFFFF !important;
  border-top: 3px solid #10B981 !important; /* Academic Emerald */
  color: #0F172A !important;
}
.mastery-summary-card.state-mastered .state-label {
  color: #059669 !important;
}

.mastery-summary-card .state-count {
  font-family: var(--font-body) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

.mastery-summary-card .state-label {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.mastery-summary-card .state-sub {
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  color: #64748B !important;
  opacity: 1 !important;
  margin-top: 3px !important;
}

/* Section Cards inside Student Dashboard */
.dash-section-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 24px 28px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

.dash-section-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
  border-bottom: 1.5px solid var(--duo-border) !important;
  padding-bottom: 14px !important;
}

.dash-section-title {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #0F172A !important;
}

.dash-section-desc {
  font-size: 13px !important;
  color: #64748B !important;
  margin-top: 3px !important;
  max-width: 780px !important;
  line-height: 1.5 !important;
}

/* Practice Modes Grid & Cards */
.practice-modes-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 18px !important;
  margin-top: 14px !important;
}

.practice-mode-card {
  background: #FFFFFF !important;
  border: 2px solid var(--duo-border) !important;
  border-bottom: 4px solid var(--duo-border-dark) !important;
  border-radius: 18px !important;
  padding: 22px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: transform 0.15s ease !important;
}

.practice-mode-card:hover {
  transform: translateY(-2px) !important;
}

.card-remedial {
  background: #FFFBEB !important;
  border-color: #FCD34D !important;
  border-bottom-color: #F59E0B !important;
}

.card-numerasi {
  background: #EFF6FF !important;
  border-color: #93C5FD !important;
  border-bottom-color: #3B82F6 !important;
}

.card-literasi {
  background: #F0FDF4 !important;
  border-color: #86EFAC !important;
  border-bottom-color: #22C55E !important;
}

.pm-badge {
  display: inline-block !important;
  align-self: flex-start !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 12px !important;
  border: none !important;
}

.badge-remedial {
  background: #F59E0B !important;
  color: #FFFFFF !important;
}

.badge-numerasi {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
}

.badge-literasi {
  background: #22C55E !important;
  color: #FFFFFF !important;
}

.pm-title {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #0F172A !important;
  margin: 0 0 8px 0 !important;
}

.pm-desc {
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.5 !important;
  margin-bottom: 18px !important;
  flex: 1 !important;
}

.pm-action-btn {
  width: 100% !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 11px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15) !important;
}

/* Skill Tree River Responsive Overlap Prevention */
.skill-nodes-river {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

@media (max-width: 680px) {
  .skill-node-wrapper:nth-child(n) {
    transform: none !important;
  }
  .skill-node-label {
    max-width: 220px;
  }
}

/* Responsive Headbar & Mobile Breakpoints */
@media (max-width: 960px) {
  .dash-hero-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .dash-hero-actions {
    width: 100% !important;
  }
}

/* ==========================================================================
   POPUP EDUKASI FITUR TERKUNCI (ASSESSMENT PREREQUISITE MODAL)
   ========================================================================== */
.ask-modal-lock-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex;
  align-items: flex-start !important;
  justify-content: center !important;
  z-index: 100002 !important;
  padding: 32px 16px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.ask-modal-lock-overlay[style*="display: none"] {
  display: none !important;
}

.ask-lock-modal-dialog {
  position: relative !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: auto !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.25) !important;
  padding: 28px 24px 22px !important;
  animation: askLockPopIn 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
  overscroll-behavior: contain !important;
}

@keyframes askLockPopIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(24px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ask-lock-close-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 2px solid #CBD5E1 !important;
  background: #F8FAFC !important;
  color: #64748B !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
.ask-lock-close-btn:hover {
  background: #FEE2E2 !important;
  border-color: #EF4444 !important;
  color: #DC2626 !important;
  transform: rotate(90deg) scale(1.05) !important;
}

/* HERO SECTION */
.ask-lock-hero {
  text-align: center !important;
  margin-bottom: 18px !important;
}

.ask-lock-icon-wrapper {
  position: relative !important;
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ask-lock-icon-glow {
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.45) 0%, rgba(245, 158, 11, 0) 70%) !important;
  animation: askGlowPulse 2.2s infinite ease-in-out !important;
}

@keyframes askGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.18); opacity: 0.95; }
}

.ask-lock-icon-circle {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FEF08A 0%, #F59E0B 100%) !important;
  border: 2px solid #F59E0B !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 36px !important;
  animation: askLockBounce 2.5s infinite ease-in-out !important;
}

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

.ask-lock-sparkle {
  position: absolute !important;
  font-size: 16px !important;
  pointer-events: none !important;
}
.sparkle-1 {
  top: -2px !important;
  right: -2px !important;
  animation: askSparkleFloat 2s infinite ease-in-out !important;
}
.sparkle-2 {
  bottom: 0px !important;
  left: -2px !important;
  animation: askSparkleFloat 2s infinite ease-in-out 1s !important;
}

@keyframes askSparkleFloat {
  0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.5; }
  50% { transform: scale(1.2) rotate(15deg); opacity: 1; }
}

.ask-lock-pill-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  background: #FEF3C7 !important;
  border: 1.5px solid #F59E0B !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #92400E !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 10px !important;
}

.ask-lock-pill-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #F59E0B !important;
  animation: askBlinkDot 1.4s infinite !important;
}

@keyframes askBlinkDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}

.ask-lock-title {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #0F172A !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.3 !important;
}

.ask-lock-subtitle {
  font-size: 13.5px !important;
  color: #475569 !important;
  margin: 0 auto !important;
  max-width: 460px !important;
  line-height: 1.55 !important;
}

/* REASON INFO BOX */
.ask-lock-reason-box {
  background: #EFF6FF !important;
  border: 1.5px solid #93C5FD !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-bottom: 18px !important;
}
.ask-lock-reason-icon {
  font-size: 22px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.ask-lock-reason-title {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #1E40AF !important;
  margin-bottom: 3px !important;
}
.ask-lock-reason-desc {
  font-size: 12px !important;
  color: #1E3A8A !important;
  line-height: 1.5 !important;
}

/* ROADMAP CONTAINER */
.ask-lock-roadmap-container {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 14px 14px 10px !important;
  margin-bottom: 20px !important;
}

.ask-lock-roadmap-header {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #64748B !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
}

.ask-lock-step-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}

.ask-lock-step-item {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.ask-lock-step-item.step-active {
  background: #FFFFFF !important;
  border: 2px solid #22C55E !important;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.14) !important;
}

.ask-lock-step-item.step-locked {
  background: #F1F5F9 !important;
  border: 1.5px dashed #CBD5E1 !important;
  opacity: 0.88 !important;
}

.ask-lock-step-badge {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.step-active .ask-lock-step-badge {
  background: #22C55E !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3) !important;
}

.step-locked .ask-lock-step-badge {
  background: #CBD5E1 !important;
  color: #64748B !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}

.ask-lock-step-body {
  flex: 1 !important;
}

.ask-lock-step-title-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 3px !important;
  flex-wrap: wrap !important;
}

.step-title {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.step-status-chip {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  letter-spacing: 0.3px !important;
}

.chip-action {
  background: #DCFCE7 !important;
  color: #15803D !important;
  border: 1px solid #86EFAC !important;
}

.chip-locked {
  background: #E2E8F0 !important;
  color: #64748B !important;
}

.step-text {
  font-size: 11.5px !important;
  color: #475569 !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}

/* FOOTER & BUTTONS */
.ask-lock-footer {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}

.ask-lock-cta-btn {
  width: 100% !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #22C55E !important;
  border: none !important;
  box-shadow: 0 4px 0 #15803D !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
}
.ask-lock-cta-btn:hover {
  background: #16A34A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #15803D !important;
}
.ask-lock-cta-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #15803D !important;
}

.ask-lock-secondary-btn {
  width: 100% !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: #F8FAFC !important;
  border: 2px solid #CBD5E1 !important;
  border-radius: 10px !important;
  color: #64748B !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.15s ease !important;
}
.ask-lock-secondary-btn:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

/* BUTTONS LOCKED STYLES IN HEADBAR */
.btn.is-locked-btn {
  opacity: 0.9 !important;
  position: relative !important;
}
.btn.is-locked-btn:hover {
  filter: brightness(0.97) !important;
}

/* ATTENTION PULSE ANIMATION ON ONBOARDING */
@keyframes askPulseAttention {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.75);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(34, 197, 94, 0);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    transform: scale(1);
  }
}

.pulse-attention {
  animation: askPulseAttention 1s ease-in-out 2 !important;
  border-color: #22C55E !important;
}

/* ROBUST TOAST CONTAINER STYLING */
.app-toast-container {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 100000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-width: 420px !important;
  pointer-events: none !important;
}
.app-toast {
  pointer-events: auto !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  padding: 13px 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  opacity: 0 !important;
  transform: translateY(16px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.app-toast.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.app-toast.toast-success {
  background: #064E3B !important;
  border-left: 5px solid #34D399 !important;
}
.app-toast.toast-warning {
  background: #78350F !important;
  border-left: 5px solid #FBBF24 !important;
}
.app-toast.toast-error {
  background: #881337 !important;
  border-left: 5px solid #F43F5E !important;
}
.app-toast.toast-info {
  background: #1E3A8A !important;
  border-left: 5px solid #60A5FA !important;
}
.app-toast-close {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  margin-left: auto !important;
}
.app-toast-close:hover {
  color: #FFFFFF !important;
}

@media (max-width: 600px) {
  .ask-lock-modal-dialog {
    padding: 22px 16px 18px !important;
    border-radius: 16px !important;
  }
  .ask-lock-title {
    font-size: 19px !important;
  }
  .ask-lock-subtitle {
    font-size: 12.5px !important;
  }
  .ask-lock-icon-wrapper {
    width: 68px !important;
    height: 68px !important;
  }
  .ask-lock-icon-circle {
    width: 62px !important;
    height: 62px !important;
    font-size: 30px !important;
  }
  .ask-lock-step-title-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .ask-lock-cta-btn {
    font-size: 13.5px !important;
    padding: 12px 14px !important;
  }
}

/* ======================================================== */
/* RAPOR BELAJAR 1 HALAMAN (1-PAGE BLUEPRINT)               */
/* ======================================================== */
.print-layout-1page {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.report-page-single {
  background: #FFFFFF !important;
  border: 2px solid #0F172A !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  box-shadow: 0 12px 35px -5px rgba(15, 23, 42, 0.12) !important;
  font-family: 'Outfit', sans-serif !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  color: #0F172A !important;
}

/* Header & Meta */
.report-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #0F172A;
  padding-bottom: 8px;
  gap: 12px;
}

.kop-mini {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kop-logo-mini {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.instansi-title {
  font-size: 15px;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.instansi-sub {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
}

.doc-badge-mini {
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  color: #334155;
  font-weight: 700;
  white-space: nowrap;
}

.student-meta-compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  gap: 8px;
}

.student-meta-compact span strong {
  color: #64748B;
  font-weight: 800;
  margin-right: 4px;
}

/* Bagian A: Profil Utama */
.section-part-a {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-summary-band {
  display: grid;
  grid-template-columns: 175px 1fr 175px;
  gap: 12px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px 12px;
  align-items: center;
}

.score-hero-box {
  text-align: center;
  border-right: 1.5px solid #E2E8F0;
  padding-right: 10px;
}

.score-hero-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #64748B;
  margin-bottom: 2px;
}

.score-hero-val {
  font-size: 26px;
  font-weight: 900;
  color: #2563EB;
  line-height: 1;
}

.score-sub-details {
  margin-top: 4px;
  font-size: 9.5px;
  color: #475569;
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  line-height: 1.2;
}

.score-sub-details strong {
  color: #0F172A;
}

.mastery-hero-box {
  text-align: center;
  padding: 0 10px;
}

.mastery-hero-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #64748B;
  margin-bottom: 2px;
}

.mastery-hero-val {
  font-size: 16px;
  font-weight: 900;
  color: #0F172A;
  margin-bottom: 4px;
}

.mastery-hero-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #86EFAC;
}

/* Kotak Peta Radar Header Sejajar */
.header-radar-box {
  text-align: center;
  border-left: 1.5px solid #E2E8F0;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.header-radar-title {
  font-size: 9px;
  font-weight: 900;
  color: #475569;
  letter-spacing: 0.4px;
  margin-bottom: 1px;
}

.radar-wrapper-header {
  width: 100%;
  max-width: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.radar-wrapper-header svg {
  max-width: 120px !important;
  max-height: 105px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
}

.radar-legend-header {
  font-size: 8.5px;
  font-weight: 800;
  color: #475569;
  display: flex;
  gap: 8px;
  margin-top: 1px;
  justify-content: center;
  flex-wrap: wrap;
}

.radar-legend-header .dot-num {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #059669;
  margin-right: 3px;
}

.radar-legend-header .dot-lit {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563EB;
  margin-right: 3px;
}

.domain-split-box {
  text-align: right;
  border-left: 1.5px solid #E2E8F0;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
}

.empathy-quote-box {
  background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 100%);
  border: 1.5px solid #BFDBFE;
  border-left: 4px solid #2563EB;
  border-radius: 10px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #1E3A8A;
  line-height: 1.35;
}

.empathy-quote-box .empathy-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* ============================================================ */
/* Bagian B: Matriks Kompetensi Lengkap (Full Width 100%)       */
/* Menggantikan layout 3-kolom / sidebar kanan menjadi 100%    */
/* ============================================================ */
.section-part-b {
  display: block;
  width: 100%;
  margin: 6px 0;
}

.matrix-full-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
}

.column-mini-title {
  font-size: 10px;
  font-weight: 900;
  color: #334155;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-align: center;
}

/* 2 Kolom Seimbang HANYA di dalam Matriks: Kiri Numerasi, Kanan Literasi */
.competency-matrix-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  align-items: start;
}

.matrix-domain-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.matrix-domain-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.3px;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 2px;
}

.matrix-domain-header.header-num {
  background: #EFF6FF;
  color: #1E40AF;
  border-left: 3.5px solid #2563EB;
}

.matrix-domain-header.header-lit {
  background: #ECFDF5;
  color: #065F46;
  border-left: 3.5px solid #059669;
}

.matrix-cards-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comp-matrix-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 4px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}

.comp-matrix-card.is-mastered {
  border-left: 3.5px solid #16A34A;
  background: #F0FDF4;
}

.comp-matrix-card.is-focus {
  border-left: 3.5px solid #EA580C;
  background: #FFF7ED;
}

.comp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.comp-card-title {
  font-size: 9.5px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.badge-chip {
  font-size: 8px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
  flex-shrink: 0;
}

.badge-chip-mastered {
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid #86EFAC;
}

.badge-chip-focus {
  background: #FFEDD5;
  color: #C2410C;
  border: 1px solid #FDBA74;
}

.comp-card-meta {
  font-size: 8.5px;
  color: #64748B;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.comp-weakness-box {
  margin-top: 2px;
  padding-top: 2px;
  border-top: 1px dashed #FDBA74;
}

.comp-weakness-item {
  font-size: 8px;
  color: #9A3412;
  line-height: 1.2;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 3px;
}

.checklist-upsell-box {
  margin-top: 4px;
  padding: 4px 6px;
  background: #EFF6FF;
  border-left: 2.5px solid #2563EB;
  border-radius: 4px;
  font-size: 8.5px;
  color: #1E40AF;
  line-height: 1.3;
  font-weight: 600;
}

.checklist-upsell-box strong {
  color: #1D4ED8;
  font-weight: 800;
}

/* Bagian C: Rencana Aksi */
.section-part-c {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-plan-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1.5px solid #E2E8F0;
  padding-bottom: 4px;
  flex-wrap: wrap;
  gap: 6px;
}

.action-plan-title {
  font-size: 12.5px;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: 0.3px;
}

.action-plan-subtitle {
  font-size: 10.5px;
  color: #64748B;
  font-weight: 600;
}

.action-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

.checklist-item-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-sizing: border-box;
}

.focus-activity-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.focus-activity-card.domain-num {
  border-left: 4px solid #2563EB;
  background: #F8FAFC;
}

.focus-activity-card.domain-lit {
  border-left: 4px solid #059669;
  background: #F8FAFC;
}

.focus-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.focus-badge {
  font-size: 8.5px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.badge-num {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

.badge-lit {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}

.focus-accuracy-pill {
  font-size: 8.5px;
  font-weight: 800;
  color: #C2410C;
  background: #FFEDD5;
  padding: 1.5px 7px;
  border-radius: 999px;
  border: 1px solid #FDBA74;
}

.checklist-name {
  font-weight: 800;
  font-size: 10.5px;
  color: #0F172A;
  line-height: 1.3;
}

.focus-props-tag {
  font-size: 9px;
  color: #475569;
  background: #F1F5F9;
  padding: 3px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.25;
}

.focus-props-tag strong {
  color: #1E293B;
}

.checklist-desc {
  font-size: 9.5px;
  color: #334155;
  line-height: 1.4;
  margin-top: 1px;
}

/* Banner Hardsell Elegan (Prompt 3) */
.ask-hardsell-banner {
  margin: 12px 0 8px 0;
  background: linear-gradient(135deg, #EFF6FF 0%, #FEF9C3 100%);
  border: 1.5px solid #93C5FD;
  border-left: 5px solid #2563EB;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.05);
}

.hardsell-icon {
  font-size: 26px;
  flex-shrink: 0;
}

.hardsell-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hardsell-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #1E3A8A;
  line-height: 1.35;
}

.hardsell-subtitle {
  font-size: 9.5px;
  font-weight: 600;
  color: #475569;
  line-height: 1.3;
}

/* Signatures Mini */
.signatures-compact-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 6px;
  border-top: 1.5px solid #E2E8F0;
  font-size: 10.5px;
}

.sig-col {
  text-align: center;
}

.sig-col .sig-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #64748B;
  margin-bottom: 20px;
}

.sig-col .sig-name {
  font-size: 10.5px;
  color: #0F172A;
}

.sig-verified .sig-stamp-box {
  border: 2px dashed #2563EB;
  border-radius: 6px;
  padding: 3px 8px;
  color: #2563EB;
  font-weight: 900;
  font-size: 9px;
  margin-bottom: 4px;
  display: inline-block;
  line-height: 1.2;
}

/* Floating Action Bar on Screen */
.report-screen-action-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0;
}

@media (max-width: 768px) {
  .section-part-b {
    display: block !important;
    width: 100% !important;
  }
  .competency-matrix-2col {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .score-summary-band {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .score-hero-box, .header-radar-box, .domain-split-box {
    border: none !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .action-checklist-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .contrast-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   40-QUESTION DEPTH ASSESSMENT (4-LEVEL CBT NAVIGATION & RESULTS)
   ========================================================================== */
.probe-level-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.probe-level-tab {
  flex: 1;
  min-width: 120px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 800;
  color: #64748B;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.probe-level-tab:hover {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: #1D4ED8;
}

.probe-level-tab.active {
  background: #1D4ED8;
  border-color: #1D4ED8;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
}

.probe-level-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
  display: inline-flex;
  align-items: center;
}

.probe-cbt-grid-wrapper {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  animation: fadeIn 0.2s ease-in-out;
}

.probe-cbt-grid-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.probe-cbt-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}

@media (max-width: 600px) {
  .probe-cbt-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

.cbt-num-btn {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
  transition: all 0.12s ease;
  padding: 0;
}

.cbt-num-btn:hover {
  border-color: #3B82F6;
  color: #1D4ED8;
  background: #EFF6FF;
}

.cbt-num-btn.answered {
  background: #16A34A !important;
  border-color: #15803D !important;
  color: #FFFFFF !important;
}

.cbt-num-btn.current {
  outline: 2.5px solid #2563EB;
  outline-offset: 1px;
  background: #DBEAFE !important;
  color: #1E40AF !important;
  font-weight: 900;
}

/* 4-Level Progress Breakdown Cards in Result Modal */
.level-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}

@media (max-width: 600px) {
  .level-breakdown-grid {
    grid-template-columns: 1fr;
  }
}

.level-breakdown-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.level-breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
}

.level-breakdown-track {
  height: 8px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}

.level-breakdown-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.level-breakdown-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #64748B;
  font-weight: 700;
}

/* ============================================================ */
/* GAMIFIED LEVEL SELECTOR MODAL                                */
/* ============================================================ */
.modal-probe-level-select-content {
  max-width: 820px !important;
  width: 95%;
  border-radius: 20px;
  background: #FFFFFF;
}

.probe-gamified-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 12px 0 16px 0;
}

@media (max-width: 768px) {
  .probe-gamified-grid {
    grid-template-columns: 1fr;
  }
}

.probe-gamified-card {
  position: relative;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.probe-gamified-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.08);
}

.probe-gamified-card.level-1-card {
  border-color: #BBF7D0;
  background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 35%);
}
.probe-gamified-card.level-1-card:hover {
  border-color: #22C55E;
}

.probe-gamified-card.level-2-card {
  border-color: #BFDBFE;
  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 35%);
}
.probe-gamified-card.level-2-card:hover {
  border-color: #3B82F6;
}

.probe-gamified-card.level-3-card {
  border-color: #FED7AA;
  background: linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 35%);
}
.probe-gamified-card.level-3-card:hover {
  border-color: #F97316;
}

.probe-gamified-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.level-1-card .probe-gamified-badge {
  background: #DCFCE7;
  color: #15803D;
}
.level-2-card .probe-gamified-badge {
  background: #DBEAFE;
  color: #1D4ED8;
}
.level-3-card .probe-gamified-badge {
  background: #FFEDD5;
  color: #C2410C;
}

.probe-gamified-title {
  font-size: 16px;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 2px 0;
}

.probe-gamified-sub {
  font-size: 12px;
  font-weight: 800;
  color: #64748B;
  margin-bottom: 10px;
}

.probe-gamified-desc {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.45;
  margin: 0 0 14px 0;
  flex: 1;
}

.probe-gamified-target {
  font-size: 11.5px;
  padding: 8px 10px;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 8px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.probe-gamified-rule {
  font-size: 11px;
  color: #64748B;
  margin-bottom: 14px;
  line-height: 1.35;
}

.btn-gamified-action {
  width: 100%;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.level-1-card .btn-gamified-action {
  background: #16A34A;
  border: 1.5px solid #15803D;
  color: #FFFFFF;
}
.level-1-card .btn-gamified-action:hover {
  background: #15803D;
}

.level-2-card .btn-gamified-action {
  background: #2563EB;
  border: 1.5px solid #1D4ED8;
  color: #FFFFFF;
}
.level-2-card .btn-gamified-action:hover {
  background: #1D4ED8;
}

.level-3-card .btn-gamified-action {
  background: #EA580C;
  border: 1.5px solid #C2410C;
  color: #FFFFFF;
}
.level-3-card .btn-gamified-action:hover {
  background: #C2410C;
}

/* ============================================================ */
/* DEDICATED RESULT NOTIFICATIONS: BERHASIL VS GAGAL            */
/* ============================================================ */
.probe-notify-card {
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

/* 1. NOTIFIKASI BERHASIL (LULUS) */
.probe-notify-success {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border: 2px solid #22C55E;
  box-shadow: 0 10px 25px -5px rgba(34, 197, 94, 0.2);
}

.probe-notify-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.probe-notify-icon-success {
  width: 52px;
  height: 52px;
  background: #22C55E;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.35);
  flex-shrink: 0;
}

.probe-notify-tag-success {
  font-size: 11px;
  font-weight: 900;
  color: #15803D;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.probe-notify-title {
  font-size: 19px;
  font-weight: 900;
  color: #0F172A;
  margin: 2px 0 0 0;
}

.probe-notify-score-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid #BBF7D0;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
}

@media (max-width: 600px) {
  .probe-notify-score-row {
    grid-template-columns: 1fr;
  }
}

.probe-notify-score-box {
  display: flex;
  flex-direction: column;
}

.probe-notify-score-lbl {
  font-size: 11.5px;
  color: #64748B;
  font-weight: 700;
  margin-bottom: 2px;
}

.probe-notify-score-val {
  font-size: 16px;
  font-weight: 900;
}

.probe-notify-message-success {
  font-size: 13px;
  line-height: 1.5;
  color: #166534;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #86EFAC;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

/* 2. NOTIFIKASI GAGAL / DUKUNGAN SEMANGAT */
.probe-notify-support {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 2px solid #F97316;
  box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.2);
}

.probe-notify-icon-support {
  width: 52px;
  height: 52px;
  background: #F97316;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.35);
  flex-shrink: 0;
}

.probe-notify-tag-support {
  font-size: 11px;
  font-weight: 900;
  color: #C2410C;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.probe-notify-message-support {
  font-size: 13px;
  line-height: 1.55;
  color: #9A3412;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid #FDBA74;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.probe-notify-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================ */
/* SCAFFOLDING PROBE LEVELS: LOCKED & PASSED STATES             */
/* ============================================================ */
.probe-gamified-card.probe-card-locked {
  background: #F8FAFC !important;
  border: 2px dashed #CBD5E1 !important;
  box-shadow: none !important;
  filter: grayscale(0.2);
}
.probe-gamified-card.probe-card-locked:hover {
  transform: none !important;
  border-color: #EF4444 !important;
  cursor: pointer;
}
.probe-gamified-card.probe-card-locked .probe-gamified-badge {
  background: #E2E8F0 !important;
  color: #64748B !important;
}
.probe-scaffold-lock-banner {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #B91C1C;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.35;
}
.btn-locked-scaffold {
  width: 100%;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  background: #F1F5F9 !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #64748B !important;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-locked-scaffold:hover {
  background: #FEE2E2 !important;
  border-color: #F87171 !important;
  color: #DC2626 !important;
}

.probe-gamified-card.probe-card-passed {
  border-color: #22C55E !important;
}
.probe-passed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 900;
  color: #15803D;
  background: #DCFCE7;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}

@keyframes scaffoldShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}
.scaffold-shake {
  animation: scaffoldShake 0.4s ease;
}

/* ==========================================================================
   STREAK FLAME INDICATORS (Header, Sidebar, Peta Belajar)
   ========================================================================== */
.streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  line-height: 1.2;
  box-sizing: border-box;
  white-space: nowrap;
}

.streak-flame {
  font-size: 14px;
  display: inline-block;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.streak-count {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Streak Active (Menyala / Menyala Terang) */
.streak-pill.streak-active {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%) !important;
  border: 1.5px solid #F59E0B !important;
  color: #B45309 !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.28) !important;
}

.streak-pill.streak-active .streak-flame {
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.95)) drop-shadow(0 0 12px rgba(239, 68, 68, 0.65)) !important;
  animation: streakFlameLit 1.8s ease-in-out infinite alternate;
}

@keyframes streakFlameLit {
  0% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.85));
  }
  50% {
    transform: scale(1.16) rotate(-3deg);
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.95)) drop-shadow(0 0 14px rgba(245, 158, 11, 0.7));
  }
  100% {
    transform: scale(1.08) rotate(3deg);
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.9));
  }
}

/* Streak Inactive (Abu-abu / Muted Gray) */
.streak-pill.streak-inactive {
  background: #F1F5F9 !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #64748B !important;
  box-shadow: none !important;
}

.streak-pill.streak-inactive .streak-flame {
  filter: grayscale(1) opacity(0.45) !important;
  animation: none !important;
}

/* Specific Adjustments for Sidebar */
.sidebar-user-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.sidebar-user-mini .streak-pill {
  padding: 2px 8px;
  font-size: 11px;
  flex-shrink: 0;
}

/* Specific Adjustments for Header Atas */
#headerStreakBadge {
  padding: 6px 14px;
  font-size: 13px;
}

/* Specific Adjustments for Peta Belajar Header */
#petaBelajarStreakBadge {
  padding: 4px 12px;
  font-size: 12px;
}

/* ==========================================================================
   DYNAMIC STUDENT HOME DASHBOARD COMPONENTS
   ========================================================================== */

/* 1. Widget Status Pembelajaran (Atas) */
.home-mastery-card {
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
}

.home-mastery-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #10B981, #3B82F6, #F59E0B);
}

.home-mastery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.home-student-greeting {
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-student-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  border: 1.5px solid #C7D2FE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12);
}

.home-greeting-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  color: #4338CA;
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.home-greeting-title {
  font-size: 20px;
  font-weight: 900;
  color: #0F172A;
  margin: 0;
  line-height: 1.3;
}

.home-greeting-sub {
  font-size: 13.5px;
  color: #64748B;
  margin: 4px 0 0;
  line-height: 1.45;
}

.home-mastery-ratio-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1.5px solid #6EE7B7;
  color: #065F46;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
  white-space: nowrap;
}

.home-mastery-ratio-badge .ratio-icon {
  font-size: 18px;
}

.home-progress-bar-wrap {
  margin-bottom: 20px;
}

.home-progress-bar-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.home-progress-title {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.home-progress-pct {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 900;
  color: #059669;
}

.home-progress-track {
  width: 100%;
  height: 18px;
  background: #F1F5F9;
  border: 1.5px solid #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
  padding: 2px;
  box-sizing: border-box;
}

.home-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #10B981 0%, #059669 100%);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-mastery-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.mastery-chip {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mastery-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.mastery-chip .chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mastery-chip .chip-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748B;
  flex: 1;
}

.mastery-chip strong {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 900;
}

.mastery-chip.chip-mastered { border-color: #A7F3D0; background: #F0FDF4; }
.mastery-chip.chip-mastered .chip-dot { background: #10B981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); }
.mastery-chip.chip-mastered strong { color: #065F46; }

.mastery-chip.chip-developing { border-color: #FDE68A; background: #FFFBEB; }
.mastery-chip.chip-developing .chip-dot { background: #F59E0B; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
.mastery-chip.chip-developing strong { color: #92400E; }

.mastery-chip.chip-learning { border-color: #BAE6FD; background: #F0F9FF; }
.mastery-chip.chip-learning .chip-dot { background: #0284C7; box-shadow: 0 0 6px rgba(2, 132, 199, 0.5); }
.mastery-chip.chip-learning strong { color: #075985; }

.mastery-chip.chip-notready { border-color: #FECDD3; background: #FFF1F2; }
.mastery-chip.chip-notready .chip-dot { background: #F43F5E; box-shadow: 0 0 6px rgba(244, 63, 94, 0.5); }
.mastery-chip.chip-notready strong { color: #9F1239; }

/* 2. Widget Rekomendasi Harian (Tengah) */
.home-rec-section {
  margin-bottom: 28px;
}

.home-section-header {
  margin-bottom: 14px;
}

.home-section-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.home-section-title {
  font-size: 18px;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 4px 0;
}

.home-section-sub {
  font-size: 13.5px;
  color: #64748B;
  margin: 0;
  line-height: 1.45;
}

.home-rec-card {
  background: #FFFFFF;
  border: 2px solid #FCD34D;
  border-radius: 20px;
  padding: 24px 28px;
  position: relative;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-rec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.12);
}

.home-rec-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.home-rec-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.home-rec-tag.domain-tag {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1.5px solid #BFDBFE;
}

.home-rec-tag.priority-tag {
  background: #FEF3C7;
  color: #B45309;
  border: 1.5px solid #FCD34D;
}

.home-rec-score-pill {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  padding: 3px 10px;
  border-radius: 999px;
}

.home-rec-score-pill strong {
  color: #DC2626;
}

.home-rec-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.home-rec-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 2px solid #F59E0B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.home-rec-info {
  flex: 1;
}

.home-rec-code-level {
  font-size: 11.5px;
  font-weight: 800;
  color: #B45309;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.home-rec-title {
  font-size: 19px;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.home-rec-desc {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

.home-rec-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1.5px dashed #E2E8F0;
}

.btn-rec-cta {
  background: linear-gradient(180deg, #FFC800 0%, #F59E0B 100%) !important;
  color: #78350F !important;
  border: 1.5px solid #D97706 !important;
  box-shadow: 0 4px 0 #B45309, 0 6px 16px rgba(245, 158, 11, 0.3) !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  padding: 12px 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-rec-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #B45309, 0 8px 20px rgba(245, 158, 11, 0.4) !important;
}

.btn-rec-cta:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #B45309 !important;
}

.btn-rec-cta .cta-flame {
  font-size: 18px;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.8));
  animation: streakFlameLit 1.8s ease-in-out infinite alternate;
}

/* 3. Widget Statistik (Bawah) */
.home-stats-section {
  margin-bottom: 24px;
}

.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.home-stat-card {
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.stat-card-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.stat-card-icon-wrap.icon-streak { background: #FEF3C7; border: 1.5px solid #FCD34D; }
.stat-card-icon-wrap.icon-record { background: #ECFDF5; border: 1.5px solid #A7F3D0; }
.stat-card-icon-wrap.icon-days { background: #EFF6FF; border: 1.5px solid #BFDBFE; }
.stat-card-icon-wrap.icon-reinforce { background: #FDF2F8; border: 1.5px solid #FBCFE8; }

.stat-chip {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}

.stat-chip.chip-active { background: #FEF3C7; color: #B45309; border: 1px solid #FCD34D; }
.stat-chip.chip-inactive { background: #F1F5F9; color: #64748B; border: 1px solid #CBD5E1; }
.stat-chip.chip-record { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.stat-chip.chip-days { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.stat-chip.chip-reinforce { background: #FDF2F8; color: #BE185D; border: 1px solid #FBCFE8; }

.stat-card-value {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.2;
  margin-bottom: 4px;
}

.stat-card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 4px;
}

.stat-card-hint {
  font-size: 12px;
  color: #64748B;
  line-height: 1.4;
}