/* ═══════════════════════════════════════════════════════════════
   ASISTEN LINA — style.css
   Urutan section:
   1.  Variabel & Reset
   2.  Base (body, container, animasi)
   3.  Navbar desktop
   4.  Dropdown menu desktop
   5.  Theme toggle (dark/light switch)
   6.  Cards & grid
   7.  Tabel
   8.  Form
   9.  Feedback & loader LINA
   10. Halaman Petunjuk
   11. Modal peringatan kata
   12. Modal error AI & jaringan
   13. Leaderboard berwarna + tombol reset
   14. Tombol mode guru
   15. Modal PIN guru
   16. Ornamen Batik Melayu Riau
   17. Mobile: drawer sidebar  (≤ 768px)
   18. Tablet fix              (769px – 1024px)
   19. Sembunyikan elemen mobile di desktop  (≥ 769px)
   20. Responsif grid & tabel
   21. Indikator keaslian & modal detail siswa (mode guru)
   22. Bukti Karya — galeri siswa & karya
   23. Safety: HP landscape / viewport pendek
   24. Artefak — toolbar layout switch, grid/list, kartu artefak berwarna
   25. Latihan Numerasi & Kotak Diskusi Kak Lina (Tahap 1: kerangka)
   26. Dashboard sub-tab (Literasi / Numerasi)
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   1. VARIABEL & RESET
   ─────────────────────────────────────────────────────────────── */

:root {
  --bg-app      : #f8fafc;
  --bg-card     : #ffffff;
  --text-main   : #1e293b;
  --text-muted  : #64748b;
  --accent      : #2563eb;
  --accent-hover: #1d4ed8;
  --border      : #e2e8f0;
  --shadow      : 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --gold        : #d97706;
  --navbar-h    : 64px;  /* tinggi navbar — dipakai utk offset container */
}

[data-theme="dark"] {
  --bg-app      : #0f172a;
  --bg-card     : #1e293b;
  --text-main   : #f8fafc;
  --text-muted  : #94a3b8;
  --accent      : #3b82f6;
  --accent-hover: #60a5fa;
  --border      : #334155;
  --shadow      : 0 4px 6px -1px rgb(0 0 0 / 0.3);
}

* {
  box-sizing                  : border-box;
  margin                      : 0;
  padding                     : 0;
  -webkit-tap-highlight-color : transparent !important;
  -webkit-touch-callout       : none;
  outline                     : none !important;
}


/* ───────────────────────────────────────────────────────────────
   2. BASE
   ─────────────────────────────────────────────────────────────── */

html {
  scrollbar-gutter: stable;
}

body {
  font-family     : 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-app);
  color           : var(--text-main);
  transition      : background-color 0.3s, color 0.3s;
  line-height     : 1.5;
  /* Cegah horizontal scroll di seluruh halaman */
  overflow-x      : hidden;
}

.container {
  max-width: 1200px;
  margin   : 2rem auto;
  padding  : 0 1.5rem;
}

.page-section {
  display  : none;
  animation: fadeIn 0.4s ease-in-out;
}

.page-section.active {
  display: block;
}

.text-center  { text-align: center; }
.text-accent  { color: var(--accent); }
.text-gold    { color: var(--gold); }
.hidden       { display: none !important; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ───────────────────────────────────────────────────────────────
   3. NAVBAR DESKTOP
   ─────────────────────────────────────────────────────────────── */

/* Wrapper sticky agar navbar bisa sticky sekaligus pakai ::after absolut */
.navbar-sticky-wrapper {
  position: sticky;
  top     : 0;
  z-index : 100;
}

.navbar {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  padding         : 0 5%;
  height          : var(--navbar-h);
  background-color: var(--bg-card);
  border-bottom   : none;
  box-shadow      : var(--shadow);
  position        : relative;
}

.brand-area {
  display    : flex;
  align-items: center;
  gap        : 0.75rem;
  flex-shrink: 0;
}

.brand-logo {
  width        : 44px;
  height       : 44px;
  border-radius: 50%;
  object-fit   : cover;
  border       : 2px solid var(--accent);
}

.brand-text {
  display       : flex;
  flex-direction: column;
}

.brand-title {
  font-weight   : 700;
  font-size     : 1.1rem;
  letter-spacing: -0.025em;
  white-space   : nowrap;
}

.brand-subtitle {
  font-size  : 0.7rem;
  color      : var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.nav-links {
  display    : flex;
  align-items: center;
  gap        : 0.25rem;
  list-style : none;
  flex-wrap  : nowrap;
}

.nav-links a {
  text-decoration: none;
  color          : var(--text-muted);
  font-weight    : 600;
  font-size      : 0.9rem;
  cursor         : pointer;
  padding        : 0.45rem 0.65rem;
  border-radius  : 6px;
  transition     : all 0.2s;
  display        : inline-flex;
  align-items    : center;
  white-space    : nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color           : var(--accent);
  background-color: rgba(37, 99, 235, 0.08);
}

.navbar-right-group {
  display    : flex;
  align-items: center;
  gap        : 0.5rem;
  flex-shrink: 0;
}


/* ───────────────────────────────────────────────────────────────
   4. DROPDOWN MENU DESKTOP
   ─────────────────────────────────────────────────────────────── */

.dropdown {
  position: relative;
}

/* Jembatan hover tak-terlihat: menutup celah kosong antara tombol "Mulai Belajar"
   dsb dengan kotak submenu di bawahnya (navbar lebih tinggi dari tombolnya sendiri
   karena di-tengahkan vertikal), supaya kursor yang bergerak turun tidak dianggap
   "keluar" dari area hover sebelum sampai ke submenu. Tidak terlihat sama sekali. */
.dropdown::after {
  content : '';
  position: absolute;
  left    : 0;
  right   : 0;
  top     : 100%;
  height  : 18px;
}

.dropdown-toggle {
  display    : inline-flex !important;
  align-items: center !important;
  gap        : 0.4rem !important;
}

.dist-arrow {
  font-size : 0.7rem !important;
  transition: transform 0.2s;
}

.dropdown-menu {
  position        : absolute;
  top             : 100%;
  left            : 0;
  background-color: var(--bg-card);
  border          : 1px solid var(--border);
  border-radius   : 8px;
  box-shadow      : var(--shadow);
  list-style      : none;
  padding         : 0.5rem 0;
  min-width       : 220px;
  display         : none;
  z-index         : 1000;
}

.dropdown-menu li {
  width: 100%;
}

.dropdown-menu li a {
  color           : var(--text-main) !important;
  display         : flex !important;
  align-items     : center !important;
  gap             : 0.6rem;
  padding         : 0.65rem 1rem !important;
  font-weight     : 500 !important;
  font-size       : 0.88rem !important;
  border-radius   : 0 !important;
  background-color: transparent !important;
  text-decoration : none;
  white-space     : nowrap;
}

.dropdown-menu li a:hover {
  background-color: rgba(37, 99, 235, 0.08) !important;
  color           : var(--accent) !important;
}

/* Submenu "Setor Jurnal Literasi" & "Latihan Numerasi": ikon disamakan lebarnya
   supaya teksnya sejajar rapi (atas-bawah lurus, tidak "miring"/crooked) */
.submenu-belajar-item i {
  width      : 18px;
  text-align : center;
  flex-shrink: 0;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown:hover .dist-arrow {
  transform: rotate(180deg);
}


/* ───────────────────────────────────────────────────────────────
   5. THEME TOGGLE (dark / light switch)
   ─────────────────────────────────────────────────────────────── */

.theme-switch-wrapper {
  display         : flex;
  align-items     : center;
  gap             : 8px;
  background-color: var(--bg-card);
  border          : 1px solid var(--border);
  padding         : 5px 10px;
  border-radius   : 30px;
  cursor          : pointer;
  user-select     : none;
  box-shadow      : var(--shadow);
  transition      : all 0.3s ease;
  flex-shrink     : 0;
}

.theme-switch-text {
  font-size  : 0.82rem;
  font-weight: 600;
  color      : var(--text-main);
  white-space: nowrap;
}

.switch-pill-track {
  width           : 40px;
  height          : 22px;
  background-color: #cbd5e1;
  border-radius   : 15px;
  position        : relative;
  transition      : background-color 0.3s ease;
  flex-shrink     : 0;
}

.switch-circle-thumb {
  width           : 16px;
  height          : 16px;
  background-color: #ffffff;
  border-radius   : 50%;
  position        : absolute;
  top             : 3px;
  left            : 3px;
  display         : flex;
  justify-content : center;
  align-items     : center;
  font-size       : 0.65rem;
  box-shadow      : 0 2px 4px rgba(0, 0, 0, 0.2);
  transition      : transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch-circle-thumb .icon-matahari { color: #f97316; display: block; }
.switch-circle-thumb .icon-bulan    { color: #f59e0b; display: none; }

[data-theme="dark"] .switch-pill-track       { background-color: #3b82f6; }
[data-theme="dark"] .switch-circle-thumb     { transform: translateX(18px); }
[data-theme="dark"] .switch-circle-thumb .icon-matahari { display: none; }
[data-theme="dark"] .switch-circle-thumb .icon-bulan    { display: block; }


/* ───────────────────────────────────────────────────────────────
   6. CARDS & GRID
   ─────────────────────────────────────────────────────────────── */

.card {
  background-color: var(--bg-card);
  border          : 1px solid var(--border);
  border-radius   : 12px;
  padding         : 1.5rem;
  box-shadow      : var(--shadow);
  border-top      : 3px solid transparent;
  background-clip : padding-box;
  position        : relative;
}

.grid-dashboard {
  display              : grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap                  : 1.5rem;
  /* Cegah overflow horizontal */
  min-width            : 0;
}

.grid-form {
  display              : grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap                  : 1.5rem;
  min-width            : 0;
}

.chart-container {
  position: relative;
  height  : 300px;
  width   : 100%;
  min-width: 0;
}

.card-header h3 {
  font-size    : 1rem;
  margin-bottom: 1.25rem;
  font-weight  : 600;
  display      : flex;
  align-items  : center;
  gap          : 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  flex-wrap    : wrap;
}

.section-header {
  margin-bottom: 1rem;
}

.section-header h2 {
  font-size    : 1.6rem;
  font-weight  : 700;
  margin-bottom: 0.25rem;
}

.section-header p {
  color: var(--text-muted);
}


/* ───────────────────────────────────────────────────────────────
   7. TABEL
   ─────────────────────────────────────────────────────────────── */

.table-wrapper {
  overflow-x: auto;
  max-height: 320px;
  /* Pastikan scrollbar horizontal terlihat di semua browser */
  -webkit-overflow-scrolling: touch;
}

table {
  width          : 100%;
  border-collapse: collapse;
}

th, td {
  padding      : 0.7rem 0.9rem;
  text-align   : left;
  border-bottom: 1px solid var(--border);
  font-size    : 0.88rem;
}

th {
  background-color: rgba(0, 0, 0, 0.02);
  color           : var(--text-muted);
  font-weight     : 600;
}

[data-theme="dark"] th {
  background-color: rgba(255, 255, 255, 0.02);
}


/* ───────────────────────────────────────────────────────────────
   8. FORM
   ─────────────────────────────────────────────────────────────── */

.form-group {
  margin-bottom: 1.25rem;
}

.form-grid-two {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 1rem;
}

label {
  display     : block;
  font-size   : 0.88rem;
  font-weight : 600;
  margin-bottom: 0.5rem;
}

input, select, textarea {
  width           : 100%;
  padding         : 0.75rem;
  border          : 1px solid var(--border);
  border-radius   : 8px;
  background-color: var(--bg-app);
  color           : var(--text-main);
  font-family     : inherit;
  font-size       : 0.9rem;
  outline         : none;
  transition      : border-color 0.2s;
  /* Cegah textarea dan input melampaui container di iOS */
  max-width       : 100%;
  box-sizing      : border-box;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
}

.btn-primary {
  background-color: var(--accent);
  color           : #ffffff;
  border          : none;
  padding         : 0.85rem 1.5rem;
  font-weight     : 600;
  border-radius   : 8px;
  cursor          : pointer;
  width           : 100%;
  font-size       : 0.95rem;
  transition      : background-color 0.2s;
  font-family     : inherit;
  /* Tombol mudah di-tap di HP */
  min-height      : 48px;
}

.btn-primary:hover    { background-color: var(--accent-hover); }
.btn-primary:disabled { background-color: var(--text-muted); cursor: not-allowed; }

/* Petunjuk minimal kata di bawah textarea */
textarea#isiJurnal {
  margin-bottom: 0.25rem;
  resize       : vertical;
}

.form-group:has(textarea#isiJurnal)::after {
  content    : "💡 Tulis minimal 75 – 100 kata";
  display    : block;
  font-size  : 0.78rem;
  color      : var(--text-muted);
  font-weight: 500;
  margin-top : 0.4rem;
  font-style : italic;
}


/* ───────────────────────────────────────────────────────────────
   9. FEEDBACK & LOADER LINA
   ─────────────────────────────────────────────────────────────── */

.feedback-card {
  border-left: 5px solid var(--accent);
}

.feedback-body {
  display       : flex;
  flex-direction: column;
  gap           : 1.25rem;
}

.fb-item h4 {
  font-size    : 0.95rem;
  margin-bottom: 0.25rem;
  display      : flex;
  align-items  : center;
  gap          : 0.4rem;
}

.fb-item p {
  color      : var(--text-main);
  font-size  : 0.92rem;
  line-height: 1.6;
  word-break : break-word;
}

.text-success h4 { color: #16a34a; }
.text-info h4    { color: #2563eb; }
.text-warning h4 { color: #ca8a04; }

.text-magic { color: #7c3aed; }

.feedback-header h3 {
  font-size    : 1rem;
  font-weight  : 700;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  display      : flex;
  align-items  : center;
  gap          : 0.5rem;
}

.lina-status-loader {
  display      : flex;
  align-items  : center;
  gap          : 12px;
  padding      : 12px 16px;
  background   : rgba(37, 99, 235, 0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  font-weight  : 500;
  color        : var(--text-main);
  animation    : fadeInStatus 0.3s ease-out forwards;
  flex-wrap    : wrap;
}

.lina-avatar-thinking {
  width        : 32px;
  height       : 32px;
  border-radius: 50%;
  object-fit   : cover;
  border       : 2px solid var(--accent);
  animation    : linaPulseEffect 2s infinite ease-in-out;
  flex-shrink  : 0;
}

.thinking-text-wrapper {
  display    : flex;
  align-items: center;
  gap        : 8px;
  flex-wrap  : wrap;
}

.wave-dots {
  display: inline-flex;
  gap    : 5px;
}

.wave-dots span {
  display         : inline-block;
  width           : 6px;
  height          : 6px;
  border-radius   : 50%;
  background-color: var(--accent);
  opacity         : 0.8;
  animation       : waveDotEffect 1.3s infinite ease-in-out;
}

.wave-dots span:nth-child(1) { animation-delay: 0s; }
.wave-dots span:nth-child(2) { animation-delay: 0.15s; }
.wave-dots span:nth-child(3) { animation-delay: 0.3s; }

.fade-in-sentence {
  opacity  : 0;
  animation: fadeInTeksEfek 0.3s ease-out forwards;
}

@keyframes waveDotEffect {
  0%, 100% { transform: translateY(0);    opacity: 0.8; }
  50%      { transform: translateY(-5px); opacity: 0.3; }
}

@keyframes linaPulseEffect {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  50%  { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

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

@keyframes fadeInTeksEfek {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ───────────────────────────────────────────────────────────────
   10. HALAMAN PETUNJUK
   ─────────────────────────────────────────────────────────────── */

.tentang-card p {
  margin-bottom: 1rem;
  line-height  : 1.7;
}

.about-list,
.about-list2 {
  margin: 1rem 0 1.5rem 1.5rem;
}

.about-list li {
  margin-bottom: 0.5rem;
}

.alur-gambar-wrapper {
  display         : flex;
  justify-content : center;
  align-items     : center;
  margin          : 1.5rem 0;
  padding         : 0.5rem;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius   : 8px;
  overflow        : hidden;
}

[data-theme="dark"] .alur-gambar-wrapper {
  background-color: rgba(255, 255, 255, 0.02);
}

.alur-img-lokal {
  max-width   : 100%;
  height      : auto;
  max-height  : 380px;
  object-fit  : contain;
  border-radius: 15px;
}


/* ───────────────────────────────────────────────────────────────
   11. MODAL PERINGATAN KATA
   ─────────────────────────────────────────────────────────────── */

.custom-modal-overlay {
  position        : fixed;
  inset           : 0;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter : blur(4px);
  display         : flex;
  justify-content : center;
  align-items     : center;
  z-index         : 9999;
  opacity         : 0;
  pointer-events  : none;
  transition      : opacity 0.3s ease;
  padding         : 1rem;
}

.custom-modal-overlay.modal-show {
  opacity       : 1;
  pointer-events: auto;
}

.custom-modal-box {
  background-color: var(--bg-card);
  color           : var(--text-main);
  padding         : 1.75rem;
  border-radius   : 16px;
  width           : 100%;
  max-width       : 440px;
  text-align      : center;
  box-shadow      : 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border          : 1px solid var(--border);
  transform       : scale(0.85);
  transition      : transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-modal-overlay.modal-show .custom-modal-box {
  transform: scale(1);
}

.custom-modal-icon {
  width           : 56px;
  height          : 56px;
  background-color: rgba(217, 119, 6, 0.1);
  color           : var(--gold);
  border-radius   : 50%;
  display         : flex;
  justify-content : center;
  align-items     : center;
  font-size       : 1.6rem;
  margin          : 0 auto 1.25rem;
}

.custom-modal-title {
  font-size    : 1.15rem;
  font-weight  : 700;
  margin-bottom: 0.75rem;
}

.custom-modal-body {
  font-size    : 0.92rem;
  color        : var(--text-muted);
  line-height  : 1.6;
  margin-bottom: 1.5rem;
}

.custom-modal-body p {
  margin-bottom: 0.5rem;
}

.word-badge-info {
  display         : inline-block;
  background-color: var(--bg-app);
  padding         : 0.4rem 1rem;
  border-radius   : 20px;
  font-size       : 0.8rem;
  font-weight     : 600;
  color           : var(--accent);
  margin-top      : 0.75rem;
  border          : 1px dashed var(--border);
}

.custom-modal-btn {
  background-color: var(--accent);
  color           : #ffffff;
  border          : none;
  padding         : 0.75rem 2rem;
  font-size       : 1rem;
  font-weight     : 600;
  border-radius   : 8px;
  cursor          : pointer;
  width           : auto;
  min-width       : 50%;
  /* Tap-friendly di HP */
  min-height      : 48px;
  transition      : background-color 0.2s, transform 0.1s;
  box-shadow      : 0 4px 6px -1px rgba(37, 99, 235, 0.2);
  font-family     : inherit;
}

.custom-modal-btn:hover  { background-color: var(--accent-hover); }
.custom-modal-btn:active { transform: scale(0.98); }


/* ───────────────────────────────────────────────────────────────
   12. MODAL ERROR AI & JARINGAN
   ─────────────────────────────────────────────────────────────── */

.lina-modal-overlay {
  position       : fixed !important;
  inset          : 0 !important;
  background     : rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(5px) !important;
  display        : flex !important;
  align-items    : center !important;
  justify-content: center !important;
  z-index        : 99999 !important;
  opacity        : 0;
  pointer-events : none;
  transition     : opacity 0.3s ease-in-out;
  padding        : 1rem !important;
}

.lina-modal-overlay.lina-show-aktif {
  opacity       : 1 !important;
  pointer-events: auto !important;
}

.lina-modal-box {
  background   : var(--bg-card) !important;
  border-radius: 16px !important;
  padding      : 2rem !important;
  width        : 100% !important;
  max-width    : 420px !important;
  box-shadow   : 0 20px 40px rgba(0, 0, 0, 0.25) !important;
  transform    : scale(0.8);
  transition   : transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing   : border-box !important;
}

.lina-modal-overlay.lina-show-aktif .lina-modal-box {
  transform: scale(1) !important;
}

.lina-modal-body {
  display       : flex !important;
  flex-direction: column !important;
  align-items   : center !important;
  text-align    : center !important;
}

.lina-modal-icon  { font-size: 3rem !important; margin-bottom: 14px !important; display: block !important; }
.lina-modal-title { font-size: 1.2rem !important; font-weight: 700 !important; margin: 0 0 12px !important; line-height: 1.4 !important; }
.lina-modal-desc  { font-size: 0.95rem !important; line-height: 1.6 !important; color: var(--text-main) !important; margin-bottom: 12px !important; word-break: break-word !important; }
.lina-modal-hint  { font-size: 0.86rem !important; color: var(--text-muted) !important; margin-bottom: 20px !important; }

.lina-modal-hint.lina-italic { font-style: italic !important; }

.lina-modal-btn {
  border       : none !important;
  color        : #ffffff !important;
  padding      : 12px 30px !important;
  font-size    : 1rem !important;
  font-weight  : 600 !important;
  border-radius: 8px !important;
  cursor       : pointer !important;
  width        : 100% !important;
  display      : block !important;
  min-height   : 48px !important;
  box-shadow   : 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  transition   : opacity 0.2s ease !important;
  font-family  : inherit !important;
}

.lina-modal-btn:hover { opacity: 0.9 !important; }

.text-danger { color: #ef4444 !important; }
.bg-danger   { background-color: #ef4444 !important; }
.text-warning{ color: #f59e0b !important; }
.bg-warning  { background-color: #f59e0b !important; }

.lina-theme-danger .lina-code-error {
  font-family : monospace !important;
  background  : rgba(239, 64, 64, 0.08) !important;
  padding     : 8px 12px !important;
  border-radius: 6px !important;
  color       : #b91c1c !important;
  display     : inline-block !important;
  margin-top  : 10px !important;
  font-size   : 0.88rem !important;
  border      : 1px solid rgba(239, 64, 64, 0.2) !important;
  word-break  : break-all !important;
}


/* ───────────────────────────────────────────────────────────────
   13. LEADERBOARD BERWARNA + TOMBOL RESET
   ─────────────────────────────────────────────────────────────── */

/* Header kartu grafik: judul kiri, tombol reset kanan */
.chart-card-header {
  display        : flex !important;
  align-items    : flex-start !important;
  justify-content: space-between !important;
  flex-wrap      : wrap !important;
  gap            : 0.5rem;
}

/* Paksa h3 di dalam chart-card-header tidak margin bawah sendiri */
.chart-card-header h3 {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  flex          : 1;
  min-width     : 0;
}

/* Separator setelah header chart */
.chart-card-header + * {
  margin-top: 1rem;
}

/* Tetapi jika ada div.chart-container langsung setelah header */
.chart-card .chart-card-header {
  border-bottom : 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom : 1rem;
}

.btn-reset-wrapper {
  flex-shrink: 0;
}

.btn-reset-chart {
  display    : inline-flex;
  align-items: center;
  gap        : 0.4rem;
  padding    : 0.38rem 0.85rem;
  border     : 1.5px solid var(--accent);
  background : transparent;
  color      : var(--accent);
  font-size  : 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  cursor     : pointer;
  white-space: nowrap;
  font-family: inherit;
  transition : background-color 0.2s ease, color 0.2s ease,
               transform 0.15s ease, box-shadow 0.2s ease;
  min-height : 36px;
}

.btn-reset-chart:hover {
  background-color: var(--accent);
  color           : #ffffff;
  box-shadow      : 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-reset-chart:active { transform: scale(0.96); }

.btn-reset-chart i {
  font-size : 0.78rem;
  transition: transform 0.4s ease;
}

.btn-reset-chart:hover i { transform: rotate(-180deg); }

/* Leaderboard table */
.leaderboard-table {
  width          : 100%;
  border-collapse: collapse;
  table-layout   : fixed;
}

/* Baris status (kosong/loading/error) memakai colspan — pastikan tidak
   terjepit oleh lebar kolom fixed dan tetap rata tengah penuh */
.leaderboard-table tbody tr td[colspan] {
  width     : auto;
  text-align: center;
}

.leaderboard-table .col-rank { width: 36px; }
.leaderboard-table .col-nama { width: auto; }
.leaderboard-table .col-buku { width: 58px; text-align: center; }
.leaderboard-table .col-skor { width: 58px; text-align: center; }

.leaderboard-table th {
  padding         : 0.55rem 0.6rem;
  font-size       : 0.78rem;
  color           : var(--text-muted);
  font-weight     : 600;
  background-color: rgba(37, 99, 235, 0.04);
  border-bottom   : 2px solid var(--border);
  white-space     : nowrap;
}

.leaderboard-table td {
  padding       : 0.6rem;
  font-size     : 0.85rem;
  border-bottom : 1px solid var(--border);
  vertical-align: middle;
  overflow      : hidden;
  text-overflow : ellipsis;
}

/* Baris podium berwarna */
.leaderboard-table tbody tr.rank-1 { background: linear-gradient(90deg, rgba(255, 215, 0, 0.12) 0%, transparent 100%); }
.leaderboard-table tbody tr.rank-2 { background: linear-gradient(90deg, rgba(192, 192, 192, 0.13) 0%, transparent 100%); }
.leaderboard-table tbody tr.rank-3 { background: linear-gradient(90deg, rgba(205, 127, 50, 0.12) 0%, transparent 100%); }

[data-theme="dark"] .leaderboard-table tbody tr.rank-1 { background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%); }
[data-theme="dark"] .leaderboard-table tbody tr.rank-2 { background: linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, transparent 100%); }
[data-theme="dark"] .leaderboard-table tbody tr.rank-3 { background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, transparent 100%); }

.leaderboard-table tbody tr:hover {
  background-color: rgba(37, 99, 235, 0.04);
  transition      : background-color 0.15s ease;
}

.rank-badge {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 26px;
  height         : 26px;
  border-radius  : 50%;
  font-size      : 1.05rem;
  line-height    : 1;
}

.rank-number {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 22px;
  height          : 22px;
  border-radius   : 50%;
  font-size       : 0.72rem;
  font-weight     : 700;
  color           : var(--text-muted);
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .rank-number {
  background-color: rgba(255, 255, 255, 0.08);
}

.skor-chip {
  display      : inline-block;
  padding      : 0.22rem 0.55rem;
  border-radius: 20px;
  font-weight  : 700;
  font-size    : 0.85rem;
  white-space  : nowrap;
}

.skor-chip.skor-tinggi { background: rgba(37, 99, 235, 0.1);   color: var(--accent); }
.skor-chip.skor-sedang { background: rgba(217, 119, 6, 0.1);   color: var(--gold); }
.skor-chip.skor-rendah { background: rgba(100, 116, 139, 0.1); color: var(--text-muted); }

.nama-siswa-cell {
  font-weight: 600;
  font-size  : 0.85rem;
  line-height: 1.3;
  word-break : break-word;
}

.jurnal-chip {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 2px;
  font-size      : 0.78rem;
  font-weight    : 600;
  color          : var(--text-muted);
}


/* ───────────────────────────────────────────────────────────────
   14. TOMBOL MODE GURU
   ─────────────────────────────────────────────────────────────── */

.btn-mode-guru {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 34px;
  height         : 34px;
  background     : none;
  border         : 1px solid var(--border);
  border-radius  : 8px;
  cursor         : pointer;
  color          : var(--text-muted);
  font-size      : 0.9rem;
  flex-shrink    : 0;
  transition     : color 0.2s ease, border-color 0.2s ease,
                   background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-mode-guru:hover {
  color           : var(--accent);
  border-color    : var(--accent);
  background-color: rgba(37, 99, 235, 0.06);
}

.btn-mode-guru.guru-aktif {
  color           : var(--accent);
  border-color    : var(--accent);
  background-color: rgba(37, 99, 235, 0.08);
  box-shadow      : 0 0 0 3px rgba(37, 99, 235, 0.15);
}


/* ───────────────────────────────────────────────────────────────
   15. MODAL PIN GURU
   ─────────────────────────────────────────────────────────────── */

.modal-guru-overlay {
  display         : none;
  position        : fixed;
  inset           : 0;
  background      : rgba(0, 0, 0, 0.45);
  backdrop-filter : blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index         : 9999;
  align-items     : center;
  justify-content : center;
  padding         : 1rem;
  box-sizing      : border-box;
}

.modal-guru-box {
  background  : var(--bg-card);
  border      : 1px solid var(--border);
  border-radius: 16px;
  padding     : 2rem 1.75rem 1.5rem;
  width       : 100%;
  max-width   : 320px;
  box-shadow  : 0 20px 60px rgba(0, 0, 0, 0.22);
  text-align  : center;
  box-sizing  : border-box;
  animation   : modalFadeIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.88) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.modal-guru-icon {
  width           : 52px;
  height          : 52px;
  background      : rgba(37, 99, 235, 0.1);
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  margin          : 0 auto 1rem;
  font-size       : 1.4rem;
  color           : var(--accent);
}

.modal-guru-title {
  font-size  : 1rem;
  font-weight: 700;
  margin     : 0 0 0.3rem;
  color      : var(--text-main);
}

.modal-guru-desc {
  font-size: 0.82rem;
  color    : var(--text-muted);
  margin   : 0 0 1.2rem;
}

.modal-guru-input {
  width          : 100%;
  padding        : 0.6rem 0.9rem;
  border         : 1.5px solid var(--border);
  border-radius  : 10px;
  background     : var(--bg-app);
  color          : var(--text-main);
  font-size      : 1.1rem;
  text-align     : center;
  letter-spacing : 0.3em;
  font-family    : monospace;
  outline        : none;
  box-sizing     : border-box;
  transition     : border-color 0.2s ease, box-shadow 0.2s ease;
}

.modal-guru-input:focus {
  border-color: var(--accent);
  box-shadow  : 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.modal-guru-error {
  display    : none;
  color      : #dc2626;
  font-size  : 0.8rem;
  margin     : 0.5rem 0 0;
  line-height: 1.4;
}

.modal-guru-actions {
  display   : flex;
  gap       : 0.6rem;
  margin-top: 1.2rem;
}

.btn-modal-batal,
.btn-modal-masuk {
  flex       : 1;
  padding    : 0.6rem;
  border-radius: 10px;
  font-size  : 0.88rem;
  font-weight: 600;
  cursor     : pointer;
  font-family: inherit;
  min-height : 44px;
  transition : opacity 0.2s ease, background-color 0.2s ease;
}

.btn-modal-batal {
  border    : 1.5px solid var(--border);
  background: transparent;
  color     : var(--text-muted);
}

.btn-modal-batal:hover { background-color: rgba(0, 0, 0, 0.04); }

.btn-modal-masuk {
  border    : none;
  background: var(--accent);
  color     : #ffffff;
}

.btn-modal-masuk:hover  { opacity: 0.88; }
.btn-modal-masuk:active { transform: scale(0.97); }

@media (max-width: 360px) {
  .modal-guru-box   { padding: 1.5rem 1.25rem 1.2rem; border-radius: 12px; }
  .modal-guru-input { font-size: 1rem; }
}


/* ───────────────────────────────────────────────────────────────
   16. ORNAMEN BATIK MELAYU RIAU
   ─────────────────────────────────────────────────────────────── */

/* Strip tri-warna di bawah navbar */
.navbar::after {
  content   : '';
  position  : absolute;
  bottom    : 0;
  left      : 0;
  right     : 0;
  height    : 4px;
  background: linear-gradient(90deg,
    #cc2929 0%,    #cc2929 33.3%,
    #d4a017 33.3%, #d4a017 66.6%,
    #1a7a3c 66.6%, #1a7a3c 100%
  );
  opacity: 0.85;
}

.navbar::before {
  content       : '';
  position      : absolute;
  bottom        : -8px;
  left          : 0;
  right         : 0;
  height        : 8px;
  background    : linear-gradient(to bottom, rgba(0, 0, 0, 0.06), transparent);
  pointer-events: none;
  z-index       : 1;
}

/* Divider batik antar section */
.batik-divider {
  width      : 100%;
  overflow   : hidden;
  line-height: 0;
  margin     : 0.5rem 0 1.5rem;
}

.batik-divider svg {
  display: block;
  width  : 100%;
}

/* Pola pucuk rebung di section-header */
.section-header {
  position     : relative;
  padding      : 1rem;
  border-radius: 10px;
  margin-bottom: 1.25rem;
  overflow     : hidden;
}

.section-header::before {
  content          : '';
  position         : absolute;
  inset            : 0;
  background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23b8860b' stroke-width='0.8' opacity='0.13'%3E%3Cpolygon points='30,4 54,52 6,52'/%3E%3Cpolygon points='30,14 47,47 13,47'/%3E%3Cpolygon points='30,24 41,42 19,42'/%3E%3Crect x='26' y='26' width='8' height='8' transform='rotate(45 30 30)'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='54' cy='6' r='3'/%3E%3Ccircle cx='6' cy='54' r='3'/%3E%3Ccircle cx='54' cy='54' r='3'/%3E%3Cline x1='3' y1='6' x2='9' y2='6'/%3E%3Cline x1='6' y1='3' x2='6' y2='9'/%3E%3Cline x1='51' y1='6' x2='57' y2='6'/%3E%3Cline x1='54' y1='3' x2='54' y2='9'/%3E%3Cline x1='3' y1='54' x2='9' y2='54'/%3E%3Cline x1='6' y1='51' x2='6' y2='57'/%3E%3Cline x1='51' y1='54' x2='57' y2='54'/%3E%3Cline x1='54' y1='51' x2='54' y2='57'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size  : 60px 60px;
  pointer-events   : none;
  border-radius    : 10px;
}

/* Garis emas tipis di atas setiap card */
.card::before {
  content      : '';
  position     : absolute;
  top          : -3px;
  left         : 0;
  right        : 0;
  height       : 3px;
  border-radius: 12px 12px 0 0;
  background   : linear-gradient(90deg,
    transparent            0%,
    rgba(184, 134, 11, 0)  10%,
    rgba(184, 134, 11, .35) 30%,
    rgba(184, 134, 11, .55) 50%,
    rgba(184, 134, 11, .35) 70%,
    rgba(184, 134, 11, 0)  90%,
    transparent            100%
  );
}

/* Dark mode: turunkan intensitas ornamen */
[data-theme="dark"] .section-header::before { opacity: 0.65; filter: invert(1) hue-rotate(20deg); }
[data-theme="dark"] .card::before           { opacity: 0.5; }
[data-theme="dark"] .navbar::after          { opacity: 0.55; }


/* ───────────────────────────────────────────────────────────────
   17. MOBILE: DRAWER SIDEBAR  (≤ 768px)
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  .desktop-only { display: none !important; }

  /* Navbar fixed di mobile */
  .navbar-sticky-wrapper {
    position: fixed !important;
    top     : 0 !important;
    left    : 0 !important;
    right   : 0 !important;
    z-index : 500 !important;
  }

  .navbar {
    padding         : 0 !important;
    height          : 60px !important;
    display         : flex !important;
    flex-direction  : row !important;
    align-items     : center !important;
    justify-content : center !important;
    background-color: var(--bg-card) !important;
    border-bottom   : 1px solid var(--border) !important;
    box-shadow      : var(--shadow) !important;
    overflow        : visible !important;
  }

  /* Container diberi padding-top agar tidak tertutup navbar fixed */
  .container { margin-top: 0; padding-top: 76px; }

  /* Top bar mobile */
  .mobile-topbar {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 100%;
    height         : 60px;
  }

  .mobile-lina-trigger {
    width        : 44px;
    height       : 44px;
    border-radius: 50%;
    object-fit   : cover;
    border       : 2px solid var(--accent);
    cursor       : pointer;
    transition   : transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  }

  .mobile-lina-trigger.menu-open {
    transform : scale(1.1);
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.2);
  }

  /* Overlay buram */
  .mobile-overlay {
    display         : none;
    position        : fixed;
    inset           : 0;
    background      : rgba(0, 0, 0, 0.4);
    backdrop-filter : blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index         : 600;
    opacity         : 0;
    transition      : opacity 0.35s ease;
  }

  .mobile-overlay.overlay-show {
    display: block;
    opacity: 1;
  }

  /* Drawer sidebar */
  .mobile-drawer {
    position        : fixed;
    top             : 0;
    left            : 0;
    height          : 100dvh;
    width           : 72px;
    background-color: var(--bg-card);
    border-right    : 1px solid var(--border);
    box-shadow      : 6px 0 24px rgba(0, 0, 0, 0.18);
    z-index         : 700;
    transform       : translateX(-100%);
    transition      : transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y      : auto;
    overflow-x      : hidden;
    scrollbar-width : none;
  }

  .mobile-drawer::-webkit-scrollbar { display: none; }

  .mobile-drawer.drawer-open { transform: translateX(0); }

  .mobile-drawer-inner {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    padding       : 12px 0 28px;
    min-height    : 100%;
  }

  .mobile-drawer-logo {
    width          : 100%;
    display        : flex;
    justify-content: center;
    padding        : 6px 0 12px;
    border-bottom  : 1px solid var(--border);
    margin-bottom  : 10px;
  }

  .mobile-drawer-lina-img {
    width        : 40px;
    height       : 40px;
    border-radius: 50%;
    object-fit   : cover;
    border       : 2px solid var(--accent);
  }

  /* Nav items */
  .mobile-nav {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    width         : 100%;
    gap           : 3px;
    padding       : 0 8px;
  }

  .mobile-nav-item {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 3px;
    width          : 52px;
    height         : 48px;
    border-radius  : 10px;
    font-size      : 1.2rem;
    color          : var(--text-muted);
    cursor         : pointer;
    text-decoration: none;
    transition     : background-color 0.22s ease, color 0.22s ease, transform 0.15s ease;
  }

  .mobile-nav-item:hover,
  .mobile-nav-item:active {
    background-color: rgba(37, 99, 235, 0.1);
    color           : var(--accent);
  }

  #btnModeGuruMobile {
    background: none;
    border    : none;
    padding   : 0;
  }

  #btnModeGuruMobile.guru-aktif {
    color           : var(--accent);
    background-color: rgba(37, 99, 235, 0.1);
  }

  .mobile-dist-arrow {
    font-size : 0.52rem !important;
    transition: transform 0.3s ease;
    opacity   : 0.55;
    margin-left: 1px;
  }

  /* Dropdown mobile */
  .mobile-nav-dropdown {
    width         : 100%;
    display       : flex;
    flex-direction: column;
    align-items   : center;
  }

  .mobile-sub-menu {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 2px;
    width         : 52px;
    max-height    : 0;
    overflow      : hidden;
    opacity       : 0;
    transition    : max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
  }

  .mobile-sub-menu.sub-open {
    max-height: 400px;
    opacity   : 1;
  }

  .mobile-sub-menu a {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 46px;
    height         : 42px;
    border-radius  : 8px;
    font-size      : 1.3rem;
    text-decoration: none;
    color          : var(--text-main);
    cursor         : pointer;
    transition     : background-color 0.2s ease, transform 0.15s ease;
  }

  .mobile-sub-menu a:hover,
  .mobile-sub-menu a:active {
    background-color: rgba(37, 99, 235, 0.1);
    transform       : scale(1.08);
  }

  .mobile-nav-dropdown.sub-active .mobile-dist-arrow {
    transform: rotate(180deg);
    opacity  : 1;
  }

  /* Theme toggle di drawer */
  .mobile-theme-toggle {
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-top     : 14px;
    width          : 52px;
    height         : 48px;
    border-radius  : 10px;
    cursor         : pointer;
    transition     : background-color 0.22s ease;
    /* Reset gaya bawaan <button> supaya identik dengan tampilan lama (<div>) */
    background-color: transparent;
    border         : none;
    font           : inherit;
    -webkit-appearance: none;
    appearance     : none;
    position       : relative;
    z-index        : 1;
  }

  .mobile-theme-toggle:hover {
    background-color: rgba(37, 99, 235, 0.08);
  }

  /* Responsif konten di mobile */
  .grid-dashboard,
  .grid-form     { grid-template-columns: 1fr; }
  .form-grid-two { grid-template-columns: 1fr; }

  .chart-container { height: 220px; }

  .section-header { padding: 0.75rem; }
  .section-header h2 { font-size: 1.3rem; }

  .card { padding: 1rem; }

  .container { padding-left: 1rem; padding-right: 1rem; }

  /* Leaderboard: kurangi padding cell agar muat di HP kecil */
  .leaderboard-table th,
  .leaderboard-table td { padding: 0.5rem 0.4rem; font-size: 0.8rem; }
  .leaderboard-table .col-rank { width: 30px; }
  .leaderboard-table .col-buku { width: 48px; }
  .leaderboard-table .col-skor { width: 48px; }
  .leaderboard-table .col-keaslian { width: 56px; }
  .badge-keaslian { font-size: 0.72rem; padding: 0.16rem 0.4rem; }

  /* Modal: penuh di mobile */
  .custom-modal-btn { width: 100%; }

  /* Margin bawah section agar tidak terlalu menempel */
  .page-section.active { padding-bottom: 1rem; }

} /* end @media ≤ 768px */


/* ───────────────────────────────────────────────────────────────
   18. TABLET FIX  (769px – 1024px)
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) and (min-width: 769px) {
  /* Navbar horizontal tetap tapi lebih compact */
  .navbar         { padding: 0 3%; height: var(--navbar-h); }
  .brand-logo     { width: 36px; height: 36px; }
  .brand-title    { font-size: 0.95rem; }
  .brand-subtitle { font-size: 0.62rem; }
  .nav-links      { gap: 0.1rem; }
  .nav-links a    { font-size: 0.82rem; padding: 0.4rem 0.5rem; }
  .theme-switch-text { display: none; }
  .btn-mode-guru  { width: 30px; height: 30px; font-size: 0.82rem; }
}

/* Grid: 2-kolom di tablet landscape, 1-kolom di tablet portrait */
@media (max-width: 900px) and (min-width: 769px) {
  .grid-dashboard,
  .grid-form     { grid-template-columns: 1fr; }
  .form-grid-two { grid-template-columns: 1fr; }
  .chart-container { height: 260px; }
  .container { padding: 0 1.25rem; }
}


/* ───────────────────────────────────────────────────────────────
   19. SEMBUNYIKAN ELEMEN MOBILE DI DESKTOP  (≥ 769px)
   ─────────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  .mobile-topbar,
  .mobile-overlay,
  .mobile-drawer {
    display: none !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   20. RESPONSIF KONTEN TAMBAHAN
   ─────────────────────────────────────────────────────────────── */

/* Large desktop: container beri ruang lebih */
@media (min-width: 1025px) {
  .container { margin-top: 2rem; }
  .chart-container { height: 300px; }
}

/* Leaderboard table di layar sedang */
@media (max-width: 1024px) and (min-width: 769px) {
  .leaderboard-table .col-buku { width: 52px; }
  .leaderboard-table .col-skor { width: 52px; }
}

/* Section header font di mid-range */
@media (max-width: 850px) and (min-width: 769px) {
  .section-header h2 { font-size: 1.4rem; }
}


/* ───────────────────────────────────────────────────────────────
   21. INDIKATOR KEASLIAN & MODAL DETAIL SISWA (MODE GURU)
   ─────────────────────────────────────────────────────────────── */

.guru-only {
  display: none;
}

body.guru-aktif .guru-only {
  display: table-cell;
}

.leaderboard-table .col-keaslian {
  width     : 70px;
  text-align: center;
}

/* Nama siswa bisa diklik hanya saat Mode Guru aktif */
body.guru-aktif .nama-siswa-cell {
  cursor           : pointer;
  text-decoration  : underline dotted;
  text-decoration-color: var(--text-muted);
  transition       : color 0.15s ease;
}

body.guru-aktif .nama-siswa-cell:hover {
  color: var(--accent);
}

/* Badge keaslian */
.badge-keaslian {
  display      : inline-flex;
  align-items  : center;
  gap          : 0.3rem;
  padding      : 0.18rem 0.5rem;
  border-radius: 20px;
  font-size    : 0.78rem;
  font-weight  : 600;
  white-space  : nowrap;
}

.badge-keaslian.badge-asli {
  background: rgba(34, 197, 94, 0.12);
  color     : #16a34a;
}

.badge-keaslian.badge-cek {
  background: rgba(217, 119, 6, 0.12);
  color     : var(--gold);
}

.badge-keaslian.badge-ai {
  background: rgba(220, 38, 38, 0.12);
  color     : #dc2626;
}

.badge-keaslian.badge-unknown {
  background: rgba(100, 116, 139, 0.12);
  color     : var(--text-muted);
}

/* ── Modal Detail Siswa ── */
.modal-detail-overlay {
  display        : none;
  position       : fixed;
  inset          : 0;
  background     : rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index        : 9999;
  align-items    : center;
  justify-content: center;
  padding        : 1rem;
  box-sizing     : border-box;
}

.modal-detail-box {
  background    : var(--bg-card);
  border        : 1px solid var(--border);
  border-radius : 16px;
  width         : 100%;
  max-width     : 460px;
  max-height    : 85vh;
  display       : flex;
  flex-direction: column;
  box-shadow    : 0 20px 60px rgba(0, 0, 0, 0.22);
  box-sizing    : border-box;
  animation     : modalFadeIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  overflow      : hidden;
}

.modal-detail-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 0.75rem;
  padding        : 1.1rem 1.25rem;
  border-bottom  : 1px solid var(--border);
  flex-shrink    : 0;
}

.modal-detail-title {
  display    : flex;
  align-items: center;
  gap        : 0.5rem;
  font-size  : 0.95rem;
  font-weight: 700;
  color      : var(--text-main);
  overflow   : hidden;
  min-width  : 0;
}

.modal-detail-title i {
  flex-shrink: 0;
}

.modal-detail-title span {
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}

.btn-modal-tutup {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 32px;
  height         : 32px;
  border         : none;
  border-radius  : 8px;
  background     : transparent;
  color          : var(--text-muted);
  font-size      : 0.95rem;
  cursor         : pointer;
  flex-shrink    : 0;
  transition     : background-color 0.2s ease, color 0.2s ease;
}

.btn-modal-tutup:hover {
  background-color: rgba(220, 38, 38, 0.1);
  color           : #dc2626;
}

.modal-detail-body {
  padding       : 1.1rem 1.25rem;
  overflow-y    : auto;
  display       : flex;
  flex-direction: column;
  gap           : 0.85rem;
  -webkit-overflow-scrolling: touch;
}

.detail-loading,
.detail-kosong {
  text-align: center;
  color     : var(--text-muted);
  font-size : 0.9rem;
  padding   : 1.5rem 0;
}

.detail-jurnal-item {
  border       : 1px solid var(--border);
  border-radius: 10px;
  padding      : 0.75rem 0.9rem;
}

.detail-jurnal-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 0.6rem;
  margin-bottom  : 0.5rem;
  flex-wrap      : wrap;
}

.detail-jurnal-judul {
  font-size  : 0.85rem;
  font-weight: 600;
  display    : flex;
  align-items: center;
  gap        : 0.4rem;
  overflow   : hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width  : 0;
}

.detail-jurnal-header .skor-chip,
.detail-jurnal-meta .badge-keaslian,
.detail-jurnal-meta .detail-tanggal {
  flex-shrink: 0;
}

.detail-jurnal-meta {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 0.6rem;
  flex-wrap      : wrap;
}

.detail-tanggal {
  font-size  : 0.78rem;
  color      : var(--text-muted);
  display    : flex;
  align-items: center;
  gap        : 0.3rem;
}

.detail-alasan {
  margin-top : 0.6rem;
  padding-top: 0.6rem;
  border-top : 1px solid var(--border);
  font-size  : 0.84rem;
  line-height: 1.55;
  color      : var(--text-muted);
  word-break : break-word;
}

/* ───────────────────────────────────────────────────────────────
   22. BUKTI KARYA - Galeri Siswa & Karya
   ─────────────────────────────────────────────────────────────── */

.bukti-karya-wrapper {
  width: 100%;
}

.siswa-grid {
  display       : grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap           : 1rem;
  margin-top    : 1.5rem;
}

.siswa-card {
  background    : var(--bg-card);
  border        : 1px solid var(--border);
  border-radius : 12px;
  padding       : 1rem;
  text-align    : center;
  cursor        : pointer;
  transition    : all 0.3s ease;
  box-shadow    : 0 1px 3px rgba(0,0,0,0.08);
}

.siswa-card:hover {
  transform     : translateY(-4px);
  box-shadow    : 0 4px 12px rgba(0,0,0,0.12);
  border-color  : var(--accent);
}

.siswa-avatar {
  width         : 80px;
  height        : 80px;
  margin        : 0 auto 0.8rem;
  border-radius : 50%;
  background    : linear-gradient(135deg, var(--accent), #a370f7);
  display       : flex;
  align-items   : center;
  justify-content: center;
  font-size     : 2rem;
  color         : #fff;
  font-weight   : 700;
  overflow      : hidden;
}

.siswa-avatar img {
  width         : 100%;
  height        : 100%;
  object-fit    : cover;
}

.siswa-nama {
  font-weight   : 700;
  font-size     : 0.95rem;
  color         : var(--text-main);
  margin-bottom : 0.4rem;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
  max-width     : 100%;
}

.siswa-jumlah-karya {
  font-size     : 0.8rem;
  color         : var(--text-muted);
  display       : flex;
  align-items   : center;
  justify-content: center;
  gap           : 0.3rem;
}

.siswa-card-loading {
  grid-column   : 1 / -1;
  text-align    : center;
  padding       : 3rem 1rem;
  color         : var(--text-muted);
}

.siswa-card-empty {
  grid-column   : 1 / -1;
  text-align    : center;
  padding       : 2rem 1rem;
  color         : var(--text-muted);
}

/* Responsive grid */
@media (max-width: 768px) {
  .siswa-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap           : 0.8rem;
  }

  .siswa-card {
    padding       : 0.8rem;
  }

  .siswa-avatar {
    width         : 70px;
    height        : 70px;
    font-size     : 1.8rem;
  }

  .siswa-nama {
    font-size     : 0.9rem;
  }
}

@media (max-width: 480px) {
  .siswa-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap           : 0.6rem;
  }

  .siswa-card {
    padding       : 0.6rem;
  }

  .siswa-avatar {
    width         : 60px;
    height        : 60px;
    font-size     : 1.5rem;
    margin-bottom : 0.6rem;
  }

  .siswa-nama {
    font-size     : 0.85rem;
  }

  .siswa-jumlah-karya {
    font-size     : 0.75rem;
  }
}

@media (max-width: 480px) {
  .modal-detail-box    { max-width: 100%; max-height: 92vh; }
  .modal-detail-header { padding: 0.9rem 1rem; }
  .modal-detail-body   { padding: 0.9rem 1rem; }
  .detail-jurnal-judul { white-space: normal; }
}

/* ───────────────────────────────────────────────────────────────
   23. SAFETY: HP LANDSCAPE / VIEWPORT PENDEK
   ─────────────────────────────────────────────────────────────── */

@media (max-height: 480px) and (max-width: 900px) {
  .custom-modal-box,
  .lina-modal-box,
  .modal-guru-box {
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-detail-box { max-height: 90vh; }

  .mobile-drawer { height: 100vh; }
}


/* ───────────────────────────────────────────────────────────────
   24. ARTEFAK — toolbar layout switch, grid/list, kartu artefak berwarna
   ─────────────────────────────────────────────────────────────── */

/* ── Toolbar atas: label + tombol switch tata letak ── */
.artefak-toolbar {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 1rem;
  margin-bottom  : 0.25rem;
  flex-wrap      : wrap;
}

.artefak-toolbar-label {
  font-size  : 0.95rem;
  font-weight: 700;
  color      : var(--text-main);
}

.layout-switch {
  display         : inline-flex;
  align-items     : center;
  gap             : 2px;
  background-color: var(--bg-app);
  border          : 1px solid var(--border);
  border-radius   : 10px;
  padding         : 3px;
  flex-shrink     : 0;
}

.layout-switch-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 34px;
  height         : 30px;
  border         : none;
  border-radius  : 7px;
  background     : transparent;
  color          : var(--text-muted);
  font-size      : 0.85rem;
  cursor         : pointer;
  transition     : background-color 0.2s ease, color 0.2s ease;
}

.layout-switch-btn:hover {
  color: var(--accent);
}

.layout-switch-btn.active {
  background-color: var(--accent);
  color           : #ffffff;
}

/* ── Grid siswa: mode petak (default) ── */
.siswa-grid {
  transition: gap 0.2s ease;
}

.siswa-card {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 0;
  position      : relative;
  transition    : transform 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease;
}

.siswa-info {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  min-width     : 0;
  width         : 100%;
}

.siswa-card-chevron {
  display: none; /* hanya tampil di mode list */
}

/* ── Grid siswa: mode list ── */
.siswa-grid.siswa-grid-list {
  display              : flex;
  flex-direction       : column;
  grid-template-columns: none;
  gap                  : 0.6rem;
}

.siswa-grid-list .siswa-card {
  flex-direction : row;
  align-items    : center;
  justify-content: flex-start;
  text-align     : left;
  padding        : 0.65rem 1rem;
  gap            : 0.85rem;
}

.siswa-grid-list .siswa-avatar {
  width        : 44px;
  height       : 44px;
  font-size    : 1.1rem;
  margin-bottom: 0;
  flex-shrink  : 0;
}

.siswa-grid-list .siswa-info {
  align-items: flex-start;
  flex       : 1;
  min-width  : 0;
}

.siswa-grid-list .siswa-nama {
  font-size    : 0.92rem;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  max-width    : 100%;
}

.siswa-grid-list .siswa-jumlah-karya {
  justify-content: flex-start;
}

.siswa-grid-list .siswa-card-chevron {
  display    : block;
  color      : var(--text-muted);
  font-size  : 0.85rem;
  flex-shrink: 0;
}

.siswa-grid-list .siswa-card:hover {
  transform: translateX(2px);
}

/* ── Modal artefak: sedikit lebih lebar dari modal detail siswa biasa ── */
.modal-artefak-box {
  max-width: 520px;
}

.artefak-jurnal-list {
  display      : flex;
  flex-direction: column;
  gap          : 1rem;
}

.artefak-loading,
.artefak-kosong {
  text-align: center;
  color     : var(--text-muted);
  font-size : 0.9rem;
  padding   : 2rem 0;
}

/* ── Kartu artefak — berwarna sesuai status capaian ── */
.artefak-card {
  border          : 1px solid var(--border);
  border-left     : 4px solid var(--border);
  border-radius   : 12px;
  padding         : 0.9rem 1rem;
  background-color: var(--bg-app);
  transition      : box-shadow 0.2s ease;
}

.artefak-card:hover {
  box-shadow: var(--shadow);
}

.artefak-card-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 0.6rem;
  margin-bottom  : 0.55rem;
}

.artefak-judul {
  font-size    : 0.92rem;
  font-weight  : 700;
  display      : flex;
  align-items  : center;
  gap          : 0.4rem;
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
  min-width    : 0;
  color        : var(--text-main);
}

.artefak-meta-row {
  display        : flex;
  align-items    : center;
  gap            : 0.5rem;
  flex-wrap      : wrap;
  margin-bottom  : 0.75rem;
}

.artefak-tanggal {
  font-size  : 0.78rem;
  color      : var(--text-muted);
  display    : flex;
  align-items: center;
  gap        : 0.3rem;
}

.artefak-status-pill {
  display      : inline-flex;
  align-items  : center;
  gap          : 0.35rem;
  padding      : 0.22rem 0.65rem;
  border-radius: 20px;
  font-size    : 0.76rem;
  font-weight  : 700;
}

/* ── Variasi warna berdasar status capaian (selaras tema skor-chip) ── */
.artefak-card.capaian-mahir {
  border-left-color: #16a34a;
}
.artefak-status-pill.capaian-mahir {
  background: rgba(34, 197, 94, 0.12);
  color     : #16a34a;
}

.artefak-card.capaian-cakap {
  border-left-color: var(--accent);
}
.artefak-status-pill.capaian-cakap {
  background: rgba(37, 99, 235, 0.1);
  color     : var(--accent);
}

.artefak-card.capaian-dasar {
  border-left-color: var(--gold);
}
.artefak-status-pill.capaian-dasar {
  background: rgba(217, 119, 6, 0.12);
  color     : var(--gold);
}

.artefak-card.capaian-intervensi {
  border-left-color: #dc2626;
}
.artefak-status-pill.capaian-intervensi {
  background: rgba(220, 38, 38, 0.12);
  color     : #dc2626;
}

.artefak-card.capaian-default {
  border-left-color: var(--text-muted);
}
.artefak-status-pill.capaian-default {
  background: rgba(100, 116, 139, 0.12);
  color     : var(--text-muted);
}

/* ── Isi tulisan siswa di dalam kartu ── */
.artefak-isi-wrapper {
  border-top : 1px dashed var(--border);
  padding-top: 0.7rem;
}

.artefak-isi-label {
  font-size    : 0.76rem;
  font-weight  : 700;
  color        : var(--text-muted);
  display      : flex;
  align-items  : center;
  gap          : 0.35rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.03em;
}

.artefak-isi-teks {
  font-size  : 0.88rem;
  line-height: 1.65;
  color      : var(--text-main);
  white-space: pre-wrap;
  word-break : break-word;
}

.artefak-isi-teks.isi-terpotong {
  display            : -webkit-box;
  -webkit-line-clamp : 4;
  line-clamp         : 4;
  -webkit-box-orient : vertical;
  overflow           : hidden;
}

.artefak-isi-teks.isi-terbuka {
  display: block;
}

.btn-baca-selengkapnya {
  display      : inline-flex;
  align-items  : center;
  gap          : 0.3rem;
  margin-top   : 0.5rem;
  padding      : 0;
  border       : none;
  background   : none;
  color        : var(--accent);
  font-size    : 0.8rem;
  font-weight  : 700;
  cursor       : pointer;
  font-family  : inherit;
}

.btn-baca-selengkapnya:hover {
  text-decoration: underline;
}

/* ── Responsif: Tablet & HP ── */
@media (max-width: 850px) {
  .artefak-toolbar {
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 480px) {
  .artefak-toolbar-label { font-size: 0.88rem; }

  .siswa-grid-list .siswa-card {
    padding: 0.6rem 0.8rem;
    gap    : 0.65rem;
  }

  .siswa-grid-list .siswa-avatar {
    width    : 38px;
    height   : 38px;
    font-size: 1rem;
  }

  .siswa-grid-list .siswa-nama {
    font-size: 0.85rem;
  }

  .siswa-grid-list .siswa-jumlah-karya {
    font-size: 0.72rem;
  }

  .modal-artefak-box   { max-width: 100%; }
  .artefak-card        { padding: 0.75rem 0.85rem; }
  .artefak-judul       { font-size: 0.85rem; }
  .artefak-isi-teks    { font-size: 0.84rem; }
}

/* ───────────────────────────────────────────────────────────────
   25. LATIHAN NUMERASI & KOTAK DISKUSI KAK LINA (Tahap 1: kerangka)
   ─────────────────────────────────────────────────────────────── */

#section-numerasi {
  overflow-anchor: none; /* cegah browser "loncat" scroll saat tinggi panel berubah drastis */
}

#numPanelRegistrasi,
#numLoadingScreen,
#numPanelSoalWrapper,
#numPanelHasil {
  overflow-anchor: none;
}

.grid-numerasi {
  display              : grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap                  : 1.5rem;
  min-width            : 0;
  align-items          : start;
  animation            : fadeInNum 0.35s ease;
}

@keyframes fadeInNum {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.num-loading-card {
  text-align: center;
  color     : var(--text-muted);
  font-size : 1rem;
  min-height: 140px;
  display   : flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.num-loading-card i { font-size: 1.6rem; color: var(--accent); margin-bottom: 0.75rem; display: block; }

.num-header-soal {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-bottom  : 0.75rem;
}

.num-info-butir {
  font-size    : 0.78rem;
  font-weight  : 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color        : var(--text-muted);
}

.num-judul-materi {
  font-size    : 0.85rem;
  font-weight  : 600;
  color        : var(--accent);
  margin-bottom: 0.75rem;
}

.soal-box {
  background   : rgba(0, 0, 0, 0.02);
  border-left  : 4px solid var(--accent);
  padding      : 1rem;
  border-radius: 8px;
  font-weight  : 600;
  margin-bottom: 1rem;
  line-height  : 1.5;
}
[data-theme="dark"] .soal-box { background: rgba(255, 255, 255, 0.03); }

#numContainerOpsi { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }

.opsi-jawaban {
  border       : 1px solid var(--border);
  border-radius: 8px;
  padding      : 0.75rem 1rem;
  cursor       : pointer;
  transition   : background-color 0.15s, border-color 0.15s;
  font-size    : 0.92rem;
}
.opsi-jawaban:hover     { background-color: rgba(0, 0, 0, 0.03); border-color: var(--accent); }
[data-theme="dark"] .opsi-jawaban:hover { background-color: rgba(255, 255, 255, 0.05); }
.opsi-jawaban.dinonaktifkan { pointer-events: none; }
.opsi-jawaban.benar-dikunci { background-color: rgba(22, 163, 74, 0.12); border-color: #16a34a; }
.opsi-jawaban.salah-dikunci { background-color: rgba(220, 38, 38, 0.1); border-color: #dc2626; }

#numBoxFeedback .feedback-box {
  padding      : 0.85rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size    : 0.9rem;
  line-height  : 1.5;
}
#numBoxFeedback .status-benar { background-color: rgba(22, 163, 74, 0.1); color: #15803d; }
#numBoxFeedback .status-salah { background-color: rgba(220, 38, 38, 0.08); color: #b91c1c; }
[data-theme="dark"] #numBoxFeedback .status-benar { color: #4ade80; }
[data-theme="dark"] #numBoxFeedback .status-salah { color: #f87171; }

.num-btn-lanjut { width: auto; padding-inline: 1.5rem; }

/* Kotak diskusi Kak Lina */
.num-chat-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 480px; }

.num-chat-header {
  display      : flex;
  align-items  : center;
  gap          : 0.7rem;
  padding      : 1rem 1.2rem;
  background   : linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color        : #ffffff;
}
.num-chat-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.8); }
.num-chat-header h4 { font-size: 0.95rem; font-weight: 700; margin: 0; }
.num-chat-header p  { font-size: 0.72rem; opacity: 0.9; margin: 0; }

.num-chat-body {
  flex           : 1;
  padding        : 1rem;
  overflow-y     : auto;
  display        : flex;
  flex-direction : column;
  gap            : 0.8rem;
  background     : rgba(0, 0, 0, 0.015);
}
[data-theme="dark"] .num-chat-body { background: rgba(255, 255, 255, 0.02); }

.message-row { display: flex; width: 100%; align-items: flex-end; gap: 8px; }
.message-row.siswa { justify-content: flex-end; }
.message-row.lina  { justify-content: flex-start; }

.loading-bubble { display: flex; gap: 4px; align-items: center; padding: 0.6rem 0.9rem !important; }
.loading-bubble .dot {
  width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
  animation: bounceDotNum 1.4s infinite ease-in-out both; opacity: 0.6;
}
.loading-bubble .dot:nth-child(1) { animation-delay: -0.32s; }
.loading-bubble .dot:nth-child(2) { animation-delay: -0.16s; }

.bubble-lina-mengetik::after {
  content  : '▌';
  display  : inline-block;
  margin-left: 2px;
  color    : var(--accent);
  animation: kedipKursorLina 0.8s steps(1) infinite;
}
@keyframes kedipKursorLina { 50% { opacity: 0; } }
@keyframes bounceDotNum { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

.lina-icon-bubble { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.bubble {
  max-width    : 78%;
  padding      : 0.6rem 0.9rem;
  border-radius: 14px;
  font-size    : 0.85rem;
  line-height  : 1.45;
  word-break   : break-word;
}
.message-row.siswa .bubble { background: var(--accent); color: #ffffff; border-bottom-right-radius: 4px; }
.message-row.lina .bubble  { background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }

.num-chat-footer {
  display    : flex;
  align-items: flex-end; /* tombol kirim selalu sejajar baris bawah textarea */
  gap        : 0.5rem;
  padding    : 0.85rem;
  border-top : 1px solid var(--border);
  background : var(--bg-card);
}
.num-chat-footer .chat-input {
  flex        : 1;
  border      : 1px solid var(--border);
  border-radius: 10px;
  padding     : 0.6rem 0.85rem;
  font-size   : 0.88rem;
  font-family : inherit;
  outline     : none;
  background  : var(--bg-app);
  color       : var(--text-main);
  resize      : none;       /* sembunyikan handle resize manual */
  overflow-y  : hidden;     /* tidak ada scrollbar, tinggi otomatis mengikuti isi */
  max-height  : 120px;      /* batas maksimal ~5 baris sebelum mulai scroll */
  line-height : 1.5;
}
.num-chat-footer .chat-input:focus { border-color: var(--accent); }
.btn-kirim {
  background   : var(--accent);
  color        : #ffffff;
  border       : none;
  border-radius: 10px;
  width        : 42px;
  height       : 42px;
  font-size    : 1rem;
  cursor       : pointer;
  flex-shrink  : 0;
  transition   : background-color 0.2s;
  align-self   : flex-end; /* tombol selalu nempel di bawah, tidak ikut melar */
}
.btn-kirim:hover { background-color: var(--accent-hover); }

/* Panel hasil */
.num-hasil-card { text-align: center; }
.num-trophy-icon { font-size: 2.5rem; color: var(--gold); margin-bottom: 0.5rem; display: block; }
.num-skor-akhir { font-size: 2.2rem; font-weight: 800; color: var(--accent); margin: 0.5rem 0 1.25rem; }

/* Responsif: HP & tablet — kotak soal & Kak Lina ditumpuk, bukan berdampingan */
@media (max-width: 900px) {
  .grid-numerasi  { grid-template-columns: 1fr; }
  .num-chat-card  { height: 420px; }
}

@media (max-width: 480px) {
  .num-chat-card      { height: 360px; }
  .num-header-soal    { flex-wrap: wrap; gap: 0.4rem; }
  .num-info-butir     { font-size: 0.72rem; }
  .num-skor-akhir     { font-size: 1.8rem; }
  .opsi-jawaban       { padding: 0.65rem 0.85rem; font-size: 0.88rem; }
  .num-chat-header h4 { font-size: 0.88rem; }
  .num-chat-header p  { font-size: 0.68rem; }
}


/* ───────────────────────────────────────────────────────────────
   26. DASHBOARD SUB-TAB (Literasi / Numerasi)
   ─────────────────────────────────────────────────────────────── */

.dash-subtab-group {
  display      : inline-flex;
  gap          : 4px;
  background   : var(--bg-app);
  border       : 1px solid var(--border);
  border-radius: 12px;
  padding      : 4px;
  margin-bottom: 1.25rem;
}

.dash-subtab-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 0.4rem;
  padding      : 0.55rem 1.1rem;
  border       : none;
  border-radius: 9px;
  background   : transparent;
  color        : var(--text-muted);
  font-weight  : 600;
  font-size    : 0.88rem;
  font-family  : inherit;
  cursor       : pointer;
  transition   : background-color 0.2s ease, color 0.2s ease;
}

.dash-subtab-btn:hover  { color: var(--accent); }
.dash-subtab-btn.active { background-color: var(--accent); color: #ffffff; }

.dash-subtab-panel { animation: fadeInNum 0.3s ease; }

@media (max-width: 480px) {
  .dash-subtab-group { width: 100%; }
  .dash-subtab-btn   { flex: 1; justify-content: center; padding: 0.6rem 0.5rem; }
}