/* ================================================================
   GURU PINTAR v3.0 — Design System
   6 Tema: Ocean Blue | Forest Green | Sunset Orange | Royal Purple | Monochrome Dark | Glass
   PR #4 Responsive | PR #5 5 Themes | PR #6 Pro Design | PR #7 Animations
   ================================================================ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════
   THEME 1: OCEAN BLUE (default)
═══════════════════════════════════════════════════════════════ */
:root,
[data-theme="ocean"] {
  --theme-name: "Ocean Blue";
  /* Brand */
  --primary:        #0EA5E9;
  --primary-btn:    #0B7DB1; /* dipakai khusus background tombol solid — lebih gelap dari --primary demi kontras AA (4.56:1) thd teks putih */
  --on-primary:     #FFFFFF;
  --primary-dark:   #0284C7;
  --primary-deeper: #0369A1;
  --primary-light:  #E0F2FE;
  --primary-mid:    #38BDF8;
  --secondary:      #F59E0B;
  --secondary-light:#FEF3C7;
  --accent:         #06B6D4;
  --accent-light:   #CFFAFE;
  /* Sidebar */
  --sidebar-bg:     #0C1A2E;
  --sidebar-hover:  rgba(14,165,233,.15);
  --sidebar-active: rgba(14,165,233,.25);
  --sidebar-border: rgba(14,165,233,.15);
  --sidebar-text:   rgba(255,255,255,.65);
  --sidebar-text-active: #FFFFFF;
  --sidebar-accent: #0EA5E9;
  /* Content */
  --bg-main:        #F0F9FF;
  --bg-card:        #FFFFFF;
  --bg-glass:       rgba(255,255,255,.85);
  --text-primary:   #0C1A2E;
  --text-secondary: #64748B;
  --text-muted:     #94A3B8;
  --border:         #E0F2FE;
  --border-mid:     #BAE6FD;
  /* Gradients */
  --grad-hero:      linear-gradient(135deg,#0C1A2E 0%,#0369A1 50%,#0EA5E9 100%);
  --grad-card:      linear-gradient(135deg,#0EA5E9,#06B6D4);
  --grad-accent:    linear-gradient(135deg,#F59E0B,#EF4444);
}

/* ═══════════════════════════════════════════════════════════════
   THEME 2: FOREST GREEN
═══════════════════════════════════════════════════════════════ */
[data-theme="forest"] {
  --primary:        #16A34A;
  --primary-btn:    #12873D; /* kontras AA thd teks putih: 4.59:1 */
  --on-primary:     #FFFFFF;
  --primary-dark:   #15803D;
  --primary-deeper: #166534;
  --primary-light:  #DCFCE7;
  --primary-mid:    #4ADE80;
  --secondary:      #CA8A04;
  --secondary-light:#FEF9C3;
  --accent:         #0D9488;
  --accent-light:   #CCFBF1;
  --sidebar-bg:     #0A1A0F;
  --sidebar-hover:  rgba(22,163,74,.15);
  --sidebar-active: rgba(22,163,74,.25);
  --sidebar-border: rgba(22,163,74,.15);
  --sidebar-text:   rgba(255,255,255,.65);
  --sidebar-text-active: #FFFFFF;
  --sidebar-accent: #16A34A;
  --bg-main:        #F0FDF4;
  --bg-card:        #FFFFFF;
  --bg-glass:       rgba(255,255,255,.85);
  --text-primary:   #0A1A0F;
  --text-secondary: #4B5563;
  --text-muted:     #9CA3AF;
  --border:         #DCFCE7;
  --border-mid:     #BBF7D0;
  --grad-hero:      linear-gradient(135deg,#0A1A0F 0%,#166534 50%,#16A34A 100%);
  --grad-card:      linear-gradient(135deg,#16A34A,#0D9488);
  --grad-accent:    linear-gradient(135deg,#CA8A04,#F59E0B);
}

/* ═══════════════════════════════════════════════════════════════
   THEME 3: SUNSET ORANGE
═══════════════════════════════════════════════════════════════ */
[data-theme="sunset"] {
  --primary:        #EA580C;
  --primary-btn:    #CC4D0A; /* kontras AA thd teks putih: 4.56:1 */
  --on-primary:     #FFFFFF;
  --primary-dark:   #C2410C;
  --primary-deeper: #9A3412;
  --primary-light:  #FFEDD5;
  --primary-mid:    #FB923C;
  --secondary:      #D97706;
  --secondary-light:#FEF3C7;
  --accent:         #DC2626;
  --accent-light:   #FEE2E2;
  --sidebar-bg:     #1A0A05;
  --sidebar-hover:  rgba(234,88,12,.15);
  --sidebar-active: rgba(234,88,12,.25);
  --sidebar-border: rgba(234,88,12,.15);
  --sidebar-text:   rgba(255,255,255,.65);
  --sidebar-text-active: #FFFFFF;
  --sidebar-accent: #EA580C;
  --bg-main:        #FFF7ED;
  --bg-card:        #FFFFFF;
  --bg-glass:       rgba(255,255,255,.85);
  --text-primary:   #1A0A05;
  --text-secondary: #57534E;
  --text-muted:     #A8A29E;
  --border:         #FFEDD5;
  --border-mid:     #FED7AA;
  --grad-hero:      linear-gradient(135deg,#1A0A05 0%,#9A3412 50%,#EA580C 100%);
  --grad-card:      linear-gradient(135deg,#EA580C,#DC2626);
  --grad-accent:    linear-gradient(135deg,#D97706,#EA580C);
}

/* ═══════════════════════════════════════════════════════════════
   THEME 4: ROYAL PURPLE
═══════════════════════════════════════════════════════════════ */
[data-theme="royal"] {
  --primary:        #7C3AED;
  --primary-btn:    #7C3AED; /* sudah lolos AA (5.70:1), tidak perlu diubah */
  --on-primary:     #FFFFFF;
  --primary-dark:   #6D28D9;
  --primary-deeper: #5B21B6;
  --primary-light:  #EDE9FE;
  --primary-mid:    #A78BFA;
  --secondary:      #EC4899;
  --secondary-light:#FCE7F3;
  --accent:         #6366F1;
  --accent-light:   #E0E7FF;
  --sidebar-bg:     #130A1E;
  --sidebar-hover:  rgba(124,58,237,.15);
  --sidebar-active: rgba(124,58,237,.25);
  --sidebar-border: rgba(124,58,237,.15);
  --sidebar-text:   rgba(255,255,255,.65);
  --sidebar-text-active: #FFFFFF;
  --sidebar-accent: #7C3AED;
  --bg-main:        #FAF5FF;
  --bg-card:        #FFFFFF;
  --bg-glass:       rgba(255,255,255,.85);
  --text-primary:   #130A1E;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;
  --border:         #EDE9FE;
  --border-mid:     #DDD6FE;
  --grad-hero:      linear-gradient(135deg,#130A1E 0%,#5B21B6 50%,#7C3AED 100%);
  --grad-card:      linear-gradient(135deg,#7C3AED,#6366F1);
  --grad-accent:    linear-gradient(135deg,#EC4899,#7C3AED);
}

/* ═══════════════════════════════════════════════════════════════
   THEME 5: MONOCHROME DARK
═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --primary:        #E2E8F0;
  --primary-btn:    #E2E8F0; /* tetap terang spy konsisten dgn aksen dark mode; keterbacaan dijaga via --on-primary gelap (kontras 14.48:1) */
  --on-primary:     #0F172A;
  --primary-dark:   #CBD5E1;
  --primary-deeper: #94A3B8;
  --primary-light:  rgba(226,232,240,.1);
  --primary-mid:    #94A3B8;
  --secondary:      #64748B;
  --secondary-light:rgba(100,116,139,.15);
  --accent:         #475569;
  --accent-light:   rgba(71,85,105,.15);
  --sidebar-bg:     #020617;
  --sidebar-hover:  rgba(226,232,240,.08);
  --sidebar-active: rgba(226,232,240,.14);
  --sidebar-border: rgba(226,232,240,.08);
  --sidebar-text:   rgba(226,232,240,.5);
  --sidebar-text-active: #E2E8F0;
  --sidebar-accent: #E2E8F0;
  --bg-main:        #0F172A;
  --bg-card:        #1E293B;
  --bg-glass:       rgba(30,41,59,.9);
  --text-primary:   #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;
  --border:         rgba(226,232,240,.1);
  --border-mid:     rgba(226,232,240,.2);
  --grad-hero:      linear-gradient(135deg,#020617 0%,#0F172A 50%,#1E293B 100%);
  --grad-card:      linear-gradient(135deg,#1E293B,#334155);
  --grad-accent:    linear-gradient(135deg,#475569,#64748B);
}

/* ═══════════════════════════════════════════════════════════════
   THEME 6: GLASS (Frosted Glass)
═══════════════════════════════════════════════════════════════ */
[data-theme="glass"] {
  --theme-name: "Glass";
  --primary:        #7FA8FF;
  --primary-btn:    #236AFF; /* kontras AA thd teks putih: 4.60:1 */
  --on-primary:     #FFFFFF;
  --primary-dark:   #5C82E0;
  --primary-deeper: #3D5FC0;
  --primary-light:  #E7EEFF;
  --primary-mid:    #A9C2FF;
  --secondary:      #FFC559;
  --secondary-light:#FFF3D9;
  --accent:         #B58CFF;
  --accent-light:   #EFE6FF;
  /* Sidebar jadi panel kaca semi-transparan, bukan solid — backdrop-filter
     di-set lewat selector khusus di bawah karena bukan sesuatu yang bisa
     dititipkan lewat custom property biasa */
  --sidebar-bg:     rgba(20,22,46,.55);
  --sidebar-hover:  rgba(255,255,255,.10);
  --sidebar-active: rgba(255,255,255,.16);
  --sidebar-border: rgba(255,255,255,.16);
  --sidebar-text:   rgba(255,255,255,.62);
  --sidebar-text-active: #FFFFFF;
  --sidebar-accent: #7FA8FF;
  --bg-main:        #EEF1FB;
  --bg-card:        rgba(255,255,255,.72);
  --bg-glass:       rgba(255,255,255,.55);
  --text-primary:   #171933;
  --text-secondary: #5B5F82;
  --text-muted:     #9296B8;
  --border:         rgba(23,25,51,.10);
  --border-mid:     rgba(23,25,51,.16);
  --grad-hero:      linear-gradient(135deg,#171933 0%,#3D5FC0 50%,#7FA8FF 100%);
  --grad-card:      linear-gradient(135deg,#7FA8FF,#B58CFF);
  --grad-accent:    linear-gradient(135deg,#FFC559,#FF9F5A);
}
/* Cahaya warna lembut di belakang body — supaya efek blur kaca kelihatan,
   bukan cuma nge-blur warna polos yang hasilnya kusam */
[data-theme="glass"] body {
  background:
    radial-gradient(560px 420px at 6% 8%, rgba(127,168,255,.30), transparent 60%),
    radial-gradient(520px 420px at 96% 16%, rgba(255,197,89,.20), transparent 60%),
    radial-gradient(600px 500px at 30% 96%, rgba(181,140,255,.24), transparent 60%),
    var(--bg-main);
}
[data-theme="glass"] .sidebar {
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 8px 32px rgba(23,25,51,.14);
}
[data-theme="glass"] .card,
[data-theme="glass"] .stat-card,
[data-theme="glass"] .modal-box,
[data-theme="glass"] .rapor-page {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* ── Common Variables (all themes) ───────────────────────────── */
:root {
  --success:        #16A34A;
  --success-light:  #DCFCE7;
  --warning:        #D97706;
  --warning-light:  #FEF3C7;
  --danger:         #DC2626;
  --danger-light:   #FEE2E2;
  --info:           #0284C7;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow:         0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --shadow-md:      0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:      0 16px 48px rgba(0,0,0,.16),0 4px 16px rgba(0,0,0,.08);
  --shadow-xl:      0 24px 64px rgba(0,0,0,.20),0 8px 24px rgba(0,0,0,.10);
  --radius-xs:      6px;
  --radius-sm:      10px;
  --radius:         16px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-pill:    999px;
  --sidebar-w:      260px;
  --sidebar-w-collapsed: 0px;
  --header-h:       64px;
  --transition:     .2s cubic-bezier(.4,0,.2,1);
  --transition-slow:.4s cubic-bezier(.4,0,.2,1);
  --ease-smooth:    cubic-bezier(.16,1,.3,1);
  --font-main:      'Plus Jakarta Sans','Inter',system-ui,sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0; }
html { scroll-behavior:smooth; height:100%; overflow:hidden; }
body {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-main);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition-slow), color var(--transition-slow);
}

/* ── App Layout ──────────────────────────────────────────────── */
/* Dokumen (html/body) sengaja TIDAK bisa di-scroll sama sekali.
   Hanya #main-content yang jadi area scroll. Ini mencegah sidebar
   fixed "ikut naik"/lepas posisi saat scroll di HP (bug umum toolbar
   browser mobile yang menyusut/melebar, atau saat keyboard muncul). */
#app { display:flex; height:100vh; height:100dvh; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  transition: transform var(--transition-slow), width var(--transition);
  border-right: 1px solid var(--sidebar-border);
  overflow: hidden;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  position: relative;
}
.sidebar-logo img.logo-main {
  width: 36px; height: 36px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.sidebar-logo img.logo-kurmer {
  width: 22px; height: 22px;
  object-fit: contain;
  opacity: .8;
}
/* Logo Sekolah di sidebar — ukuran disamakan dengan logo Bebas Mengajar (36px),
   tanpa latar/chip supaya logo transparan tampil apa adanya. */
.sidebar-logo img.logo-sekolah-sidebar {
  width: 36px;
  height: 36px;
  object-fit: contain;
  opacity: 1;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  flex-shrink: 0;
}
.sidebar-logo-text { flex: 1; min-width: 0; }
.sidebar-logo-text .app-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
  display: block;
  font-family: var(--font-main);
}
.sidebar-logo-text .app-sub {
  font-size: 10px;
  color: var(--sidebar-text);
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 500;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display:none; }

.sidebar-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--sidebar-text);
  padding: 14px 8px 6px;
  opacity: .6;
}

/* ── Search menu sidebar ─────────────────────────────────────────
   Ditaruh di sidebar (bukan header) supaya selalu ada di dekat menu
   yang difilter, baik di desktop (sidebar permanen) maupun mobile
   (drawer). Filter murni DOM (lihat filterSidebarNav() di app.js),
   tidak render ulang dari NAV_GROUPS supaya ringan tiap ketikan. */
.sidebar-search-wrap { position:relative; margin:2px 10px 6px; flex-shrink:0; }
.sidebar-search-icon {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  font-size:15px; color:var(--sidebar-text); opacity:.55; pointer-events:none;
}
.sidebar-search-input {
  width:100%; height:38px; padding:0 10px 0 34px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-pill); color:var(--sidebar-text-active);
  font-family:var(--font-main); font-size:13px; transition:all var(--transition);
}
.sidebar-search-input::placeholder { color:var(--sidebar-text); opacity:.55; }
.sidebar-search-input:focus {
  outline:none; background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.22);
}
.sidebar-empty-search { padding:16px 14px; font-size:12.5px; color:var(--sidebar-text); opacity:.6; text-align:center; }

.sidebar-subgroup {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sidebar-text);
  padding: 8px 8px 4px 30px;
  opacity: .45;
}
/* Saat lagi difilter search, section/subgroup yg semua isinya
   tersembunyi ikut disembunyikan lewat kelas ini (lihat app.js). */
.sidebar-section.is-filtered-hidden,
.sidebar-subgroup.is-filtered-hidden { display:none; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  letter-spacing: -.1px;
}
.sidebar-item:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active);
  transform: translateX(2px);
}
.sidebar-item.active {
  background: var(--sidebar-active);
  color: var(--sidebar-text-active);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--sidebar-accent);
}
.sidebar-item.active .nav-icon { color: var(--sidebar-accent); }
.sidebar-item.locked { opacity: .45; }

.nav-icon {
  font-size: 18px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  transition: color var(--transition);
}
.nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-pro {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  background: var(--secondary);
  color: white;
  border-radius: var(--radius-pill);
  letter-spacing: .3px;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--sidebar-border);
  background: rgba(0,0,0,.1);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-sm);
  padding: 6px;
  cursor: pointer;
  transition: background var(--transition);
}
.sidebar-user:hover { background: var(--sidebar-hover); }
.avatar {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width:100%; height:100%; object-fit:cover; }
.user-name { font-size:13px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-badge { font-size:9px; font-weight:700; padding:1px 7px; border-radius:var(--radius-pill); display:inline-block; margin-top:2px; }
.badge-basic { background:rgba(255,255,255,.15); color:rgba(255,255,255,.7); }
.badge-pro-pill { background:var(--secondary); color:white; }

/* ── Main Content ─────────────────────────────────────────────── */
#main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: margin-left var(--transition-slow);
}

/* ── Pengumuman Running Text (menggantikan slot iklan dashboard) ─
   Isi dikelola admin lewat admin.bebasmendalam.com > Pengumuman, diambil
   guru lewat /api/pengumuman/index. Kelas .top-ad-banner DIPERTAHANKAN di
   markup (lihat index.php) supaya aturan print yang sudah ada di halaman
   lain (mis. pages/rapor.html: "... .top-ad-banner ... {display:none}")
   tetap berlaku tanpa perlu diubah satu-satu. */
.top-ad-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  color: white;
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 40px 0 0;
}
.pengumuman-track {
  display: inline-flex;
  white-space: nowrap;
  animation: pengumuman-scroll 26s linear infinite;
  will-change: transform;
}
.pengumuman-track:hover { animation-play-state: paused; }
.pengumuman-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  padding-right: 60px;
}
.pengumuman-item strong { font-weight: 700; }
.pengumuman-item .tag {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 1px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
@keyframes pengumuman-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.pengumuman-close {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.18);
  border: none;
  color: white;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: background .15s;
}
.pengumuman-close:hover { background: rgba(255,255,255,.32); }

/* ── Header ──────────────────────────────────────────────────── */
.app-header {
  height: var(--header-h);
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
  transition: background var(--transition-slow);
}
.page-title-header {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  letter-spacing: -.2px;
}

/* PR #9: Hamburger (PR #9 gradient) */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: all var(--transition);
  flex-shrink: 0;
}
.hamburger-btn:hover { transform:scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,.3); }

.theme-toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border-mid);
  background: var(--bg-card);
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  font-size: 16px;
  transition: all var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover { background:var(--primary-light); border-color:var(--primary); transform:rotate(20deg); }

.header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }

/* ── Content Area ─────────────────────────────────────────────── */
.app-content { padding: 24px; flex: 1; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  border: 1px solid var(--border);
  transition: background var(--transition-slow), box-shadow var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  font-family: var(--font-main);
  white-space: nowrap;
  letter-spacing: -.1px;
}
.btn:disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn-primary  { background:var(--primary-btn); color:var(--on-primary); box-shadow:0 2px 8px rgba(0,0,0,.15); }
.btn-primary:hover { background:var(--primary-dark); box-shadow:0 4px 16px rgba(0,0,0,.2); transform:translateY(-1px); }
.btn-secondary { background:var(--bg-card); color:var(--text-primary); border:1.5px solid var(--border-mid); }
.btn-secondary:hover { border-color:var(--primary); color:var(--primary); }
.btn-gradient { background:var(--grad-card); color:white; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.btn-gradient:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.25); }
.btn-success { background:var(--success); color:white; }
.btn-danger  { background:var(--danger); color:white; }
.btn-ghost   { background:transparent; color:var(--text-secondary); border:1.5px solid var(--border); }
.btn-ghost:hover { background:var(--primary-light); color:var(--primary); border-color:var(--primary); }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-lg { padding:12px 28px; font-size:15px; }
.btn-xl { padding:14px 36px; font-size:16px; font-weight:700; }
.btn-icon { padding:8px; border-radius:var(--radius-sm); }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
/* FIX: class ini dipakai di beberapa halaman (setting, kalender, surat) tapi sebelumnya
   TIDAK PERNAH didefinisikan di CSS manapun -- akibatnya "2 kolom" selalu tampil 1 kolom
   bertumpuk ke bawah, bikin modal jadi jauh lebih panjang dari seharusnya. */
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 12px; }
@media (max-width:520px) {
  .form-grid-2, .form-grid-3 { grid-template-columns:1fr; }
}
.form-label { display:block; font-weight:600; margin-bottom:6px; color:var(--text-primary); font-size:13px; letter-spacing:-.1px; }
.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-main);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition-slow);
  outline: none;
}
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb,14,165,233),.12);
}
.form-input::placeholder { color:var(--text-muted); }
[data-theme="dark"] .form-input { background:rgba(255,255,255,.05); }
textarea.form-input { resize:vertical; min-height:80px; }
select.form-input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:calc(100% - 14px) center; padding-right:36px; }

/* ── Stats Grid (PR #20 Visual Counters) ─────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 18px 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
  cursor: default;
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.stat-card.blue::after   { background: linear-gradient(90deg,var(--primary),var(--accent)); }
.stat-card.green::after  { background: linear-gradient(90deg,var(--success),#4ADE80); }
.stat-card.orange::after { background: linear-gradient(90deg,var(--secondary),#EF4444); }
.stat-card.purple::after { background: linear-gradient(90deg,#7C3AED,#EC4899); }
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }

.stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items:center; justify-content:center;
  font-size: 20px;
}
.stat-icon-blue   { background:var(--primary-light); color:var(--primary); }
.stat-icon-green  { background:var(--success-light); color:var(--success); }
.stat-icon-orange { background:var(--warning-light); color:var(--warning); }
.stat-icon-purple { background:#EDE9FE; color:#7C3AED; }

.stat-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  font-family: var(--font-main);
  letter-spacing: -1px;
  /* Animated counter */
  transition: opacity .3s;
}
.stat-label { font-size:12px; color:var(--text-secondary); font-weight:500; }
.stat-trend { font-size:11px; display:flex; align-items:center; gap:3px; }
.stat-trend.up { color:var(--success); }
.stat-trend.down { color:var(--danger); }

/* ── Quick Actions ────────────────────────────────────────────── */
.quick-actions { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-bottom:24px; }
.quick-action-btn {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  color: var(--text-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.quick-action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card);
  opacity: 0;
  transition: opacity var(--transition);
}
.quick-action-btn:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  color: white;
}
.quick-action-btn:hover::before { opacity: 1; }
.quick-action-btn:hover .qa-icon { color: white; }
.quick-action-btn:hover .qa-label { color: rgba(255,255,255,.9); }
.qa-icon { font-size: 26px; color: var(--primary); position:relative; z-index:1; transition:color var(--transition); }
.qa-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); position:relative; z-index:1; transition:color var(--transition); }

/* ── Data Tables ──────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { background:var(--primary-light); padding:10px 14px; text-align:left; font-weight:700; color:var(--primary-deeper); border-bottom:2px solid var(--primary); font-size:11px; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.data-table td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr { transition:background var(--transition); }
.data-table tbody tr:hover td { background:var(--primary-light); }
[data-theme="dark"] .data-table th { background:rgba(255,255,255,.07); }
[data-theme="dark"] .data-table tbody tr:hover td { background:rgba(255,255,255,.05); }

/* ── Badges ───────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:700; letter-spacing:.2px; }
.badge-hadir     { background:var(--success-light); color:var(--success); }
.badge-absen     { background:var(--danger-light); color:var(--danger); }   /* alias lama, dipertahankan utk data lama */
.badge-alfa      { background:var(--danger-light); color:var(--danger); }
.badge-terlambat { background:var(--warning-light); color:var(--warning); }
.badge-izin      { background:var(--primary-light); color:var(--primary); }
.badge-sakit     { background:#F3E8FF; color:#9333EA; }
.badge-pulang    { background:var(--border); color:var(--text-secondary); }
.badge-neutral   { background:var(--border); color:var(--text-secondary); }

/* ── Modals ───────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:200; backdrop-filter:blur(6px); animation:fadeIn .2s ease; }
.modal-container { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:201; width:100%; max-width:560px; padding:0 16px; animation:slideUp .25s cubic-bezier(.4,0,.2,1); }
/* Dipakai modal dengan field lebih banyak dari biasanya (mis. Buku Induk) supaya kolom
   3-nya tidak sempit, sambil tetap dibatasi oleh area scroll internal di dalamnya. */
.modal-container.modal-container-lebar { max-width:680px; }
.modal-box { background:var(--bg-card); border-radius:var(--radius-xl); padding:28px; box-shadow:var(--shadow-xl); }
.modal-box h2 { font-size:18px; font-weight:700; margin-bottom:8px; letter-spacing:-.3px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

/* ── AI Loader ────────────────────────────────────────────────── */
.ai-loader { display:flex; flex-direction:column; align-items:center; padding:48px 24px; gap:14px; }
.pulse-ring {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid var(--border-mid);
  border-top-color: var(--primary);
  animation: spin .8s linear infinite;
  position: relative;
}
.pulse-ring::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: var(--accent);
  animation: spin 1.4s linear infinite reverse;
}

/* ── Toast ────────────────────────────────────────────────────── */
.toast-container { position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:8px; z-index:9999; }
.toast {
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  color: white;
  animation: slideInRight .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  backdrop-filter: blur(8px);
}
.toast-info    { background:rgba(14,165,233,.95); }
.toast-success { background:rgba(22,163,74,.95); }
.toast-error   { background:rgba(220,38,38,.95); }
.toast-warning { background:rgba(217,119,6,.95); }

/* ── Pro Banner ───────────────────────────────────────────────── */
.pro-banner {
  background: linear-gradient(135deg,#C2410C,#EA580C,#F59E0B);
  border-radius: var(--radius);
  padding: 18px 24px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(234,88,12,.3);
}
.pro-banner h3 { font-size:15px; font-weight:700; margin-bottom:3px; }
.pro-banner p { font-size:12px; opacity:.9; }
.btn-upgrade { background:white; color:#C2410C; padding:8px 18px; border-radius:var(--radius-pill); font-weight:700; font-size:12px; border:none; cursor:pointer; text-decoration:none; flex-shrink:0; transition:all var(--transition); }
.btn-upgrade:hover { transform:scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,.2); }

/* ── Tips Card ────────────────────────────────────────────────── */
.tips-card {
  background: linear-gradient(135deg,var(--primary-light),var(--accent-light));
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.tips-card .ti { color:var(--primary); font-size:22px; margin-top:2px; flex-shrink:0; }

/* ── Tab ──────────────────────────────────────────────────────── */
.tab-nav { display:flex; gap:2px; border-bottom:2px solid var(--border); margin-bottom:20px; overflow-x:auto; scrollbar-width:none; }
.tab-nav::-webkit-scrollbar { display:none; }
.tab-btn { padding:9px 18px; background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text-secondary); transition:all .15s; font-family:var(--font-main); white-space:nowrap; }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-btn:hover { color:var(--primary); }

/* ── Toggle Switch (slider on/off) ───────────────────────────────── */
.toggle-switch { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-switch .toggle-track { position:absolute; inset:0; background:var(--border); border-radius:999px; cursor:pointer; transition:background .2s; }
.toggle-switch .toggle-track::before { content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.toggle-switch input:checked + .toggle-track { background:var(--primary); }
.toggle-switch input:checked + .toggle-track::before { transform:translateX(20px); }
.toggle-switch input:disabled + .toggle-track { opacity:.5; cursor:not-allowed; }
.toggle-switch input:focus-visible + .toggle-track { box-shadow:0 0 0 3px var(--primary-light); }

/* ── Theme Switcher Popup ─────────────────────────────────────── */
.theme-switcher {
  position: fixed;
  bottom: 80px;
  right: 24px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-mid);
  padding: 16px;
  z-index: 999;
  display: none;
  min-width: 220px;
  animation: slideUp .2s cubic-bezier(.4,0,.2,1);
}
.theme-switcher.open { display: block; }
.theme-switcher h3 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-secondary); margin-bottom:10px; }
.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
  font-size:13px;
  font-weight:500;
}
.theme-option:hover { background:var(--primary-light); color:var(--primary); }
.theme-option.active { background:var(--primary-light); color:var(--primary); font-weight:700; }
.theme-dot { width:18px; height:18px; border-radius:50%; flex-shrink:0; border:2px solid rgba(0,0,0,.1); }

/* ── Skeleton Loading ─────────────────────────────────────────── */
.skeleton-bar,.skeleton-card {
  background: linear-gradient(90deg,var(--border) 25%,var(--bg-main) 50%,var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
.skeleton-bar { height:16px; margin-bottom:10px; }
.skeleton-bar.w-40{width:40%} .skeleton-bar.w-60{width:60%} .skeleton-bar.w-80{width:80%}
.skeleton-card { height:160px; border-radius:var(--radius); margin-top:16px; }

/* ── Camera / Scanner ─────────────────────────────────────────── */
.camera-container { position:relative; width:100%; max-width:480px; margin:0 auto; border-radius:var(--radius); overflow:hidden; background:#000; aspect-ratio:4/3; }
.camera-container video { width:100%; height:100%; object-fit:cover; display:block; }
.scan-frame { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80%; height:35%; pointer-events:none; }
.scan-corner {
  position: absolute;
  width: 20px; height: 20px;
  border-color: var(--secondary);
  border-style: solid;
}
.scan-corner.tl { top:0;left:0; border-width:3px 0 0 3px; border-radius:4px 0 0 0; }
.scan-corner.tr { top:0;right:0; border-width:3px 3px 0 0; border-radius:0 4px 0 0; }
.scan-corner.bl { bottom:0;left:0; border-width:0 0 3px 3px; border-radius:0 0 0 4px; }
.scan-corner.br { bottom:0;right:0; border-width:0 3px 3px 0; border-radius:0 0 4px 0; }
.scan-line { position:absolute; left:5%; width:90%; height:2px; background:var(--secondary); box-shadow:0 0 10px var(--secondary); animation:scanMove 2s ease-in-out infinite; }
.scan-status { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.75); color:white; padding:6px 16px; border-radius:var(--radius-pill); font-size:12px; white-space:nowrap; backdrop-filter:blur(4px); }

/* ── PWA Banner ───────────────────────────────────────────────── */
.pwa-banner { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); width:calc(100% - 32px); max-width:480px; background:var(--bg-card); border-radius:var(--radius); box-shadow:var(--shadow-lg); border:1px solid var(--border-mid); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; z-index:998; animation:slideUp .3s ease; }

/* ── AI Assistant Popup (PR #19) ──────────────────────────────── */
.ai-assistant-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--grad-card);
  color: white;
  border: none;
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  font-size: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  z-index: 999;
  transition: all var(--transition);
  animation: bounceIn .5s cubic-bezier(.68,-.55,.265,1.55);
}
.ai-assistant-fab:hover { transform:scale(1.1) rotate(-5deg); box-shadow:0 6px 28px rgba(0,0,0,.4); }
.ai-assistant-fab .notif-dot { position:absolute; top:6px; right:6px; width:10px; height:10px; background:#EF4444; border-radius:50%; border:2px solid var(--bg-card); animation:pulse 2s infinite; }
.ai-assistant-fab { cursor:grab; touch-action:none; }
.ai-assistant-fab.dragging { cursor:grabbing; transition:none; animation:none; box-shadow:0 8px 30px rgba(0,0,0,.45); }
.ai-assistant-fab.dragging:hover { transform:none; }

.ai-chat-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 340px;
  max-height: 520px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  z-index: 997;
  overflow: hidden;
  transition: all var(--transition-slow);
  transform-origin: bottom right;
}
.ai-chat-panel.hidden { display:none; }
.ai-chat-header {
  background: var(--grad-card);
  color: white;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  cursor: pointer;
}
.ai-chat-header-btns { display:flex; gap:6px; margin-left:auto; flex-shrink:0; }
.ai-chat-header-btn {
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.18); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; flex-shrink:0;
  transition: background var(--transition);
}
.ai-chat-header-btn:hover { background:rgba(255,255,255,.34); }
.ai-chat-header-btn:active { transform:scale(.92); }
/* Panel diminimize: cuma header yang tampil, sisanya disembunyikan (klik header lagi untuk buka) */
.ai-chat-panel.minimized { max-height:64px !important; }
.ai-chat-panel.minimized .ai-chat-messages,
.ai-chat-panel.minimized .chat-suggests,
.ai-chat-panel.minimized .ai-chat-input { display:none !important; }
.ai-chat-panel.minimized .ai-chat-header { cursor:pointer; }
.ai-chat-header .ai-avatar { width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:18px; }
.ai-chat-messages { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ai-chat-messages::-webkit-scrollbar { display:none; }
.chat-msg { max-width:80%; border-radius:var(--radius); padding:10px 14px; font-size:13px; line-height:1.6; animation:msgPop .32s var(--ease-smooth) backwards; }
@keyframes msgPop { from{opacity:0;transform:translateY(10px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
.chat-msg.bot { background:var(--primary-light); color:var(--text-primary); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-msg.user { background:var(--primary); color:white; align-self:flex-end; border-bottom-right-radius:4px; }
/* Indikator "sedang mengetik" — 3 titik memantul, ganti teks statis "Mengetik..." */
.chat-typing { align-self:flex-start; display:flex; gap:4px; padding:11px 15px; background:var(--primary-light); border-radius:var(--radius); border-bottom-left-radius:4px; animation:msgPop .32s var(--ease-smooth); }
.chat-typing span { width:6px; height:6px; border-radius:50%; background:var(--primary); opacity:.6; animation:chatTypingBounce 1.1s ease-in-out infinite; }
.chat-typing span:nth-child(2) { animation-delay:.15s; }
.chat-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes chatTypingBounce { 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-4px);opacity:1} }
/* Chip saran pertanyaan cepat, tampil sekali di percakapan pertama */
.chat-suggests { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 12px; flex-shrink:0; }
.chat-suggest-chip { background:var(--bg-main); border:1px solid var(--border-mid); color:var(--primary); font-size:11.5px; font-weight:600; padding:7px 12px; border-radius:999px; cursor:pointer; transition:all var(--transition); }
.chat-suggest-chip:hover { background:var(--primary); color:#fff; transform:translateY(-2px); }
.chat-suggest-chip:active { transform:scale(.95); }
.ai-chat-input { border-top:1px solid var(--border); padding:10px; display:flex; gap:8px; flex-shrink:0; background:var(--bg-card); }
.ai-chat-input input { flex:1; border:1.5px solid var(--border-mid); border-radius:var(--radius-pill); padding:8px 14px; font-size:13px; background:var(--bg-main); color:var(--text-primary); font-family:var(--font-main); outline:none; transition:border-color var(--transition); }
.ai-chat-input input:focus { border-color:var(--primary); }
.ai-chat-send { width:34px;height:34px;border-radius:50%;background:var(--primary);color:white;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all var(--transition); }
.ai-chat-send:hover { background:var(--primary-dark); transform:scale(1.1); }
.ai-chat-send:active { transform:scale(.9); }

/* ── Presisi Mobile (iOS & Android) ──────────────────────────────
   - FAB & panel hormat safe-area (notch/home-indicator iPhone, gesture bar Android)
   - Panel jadi bottom-sheet penuh lebar di layar kecil, tinggi pakai dvh (viewport
     dinamis) supaya tidak kepotong toolbar browser yang naik-turun di mobile
   - Input font WAJIB >=16px di mobile, kalau tidak Safari iOS auto-zoom saat fokus */
@media (max-width:768px) {
  .ai-assistant-fab {
    bottom: calc(16px + env(safe-area-inset-bottom));
    right: calc(16px + env(safe-area-inset-right));
  }
  .ai-chat-panel {
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-width:100%;
    max-height:min(78dvh, 620px);
    border-radius:20px 20px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -8px 40px rgba(0,0,0,.25);
  }
  .ai-chat-panel::before {
    content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:36px; height:4px; border-radius:4px; background:rgba(0,0,0,.15); z-index:1;
  }
  .ai-chat-header { padding-top:18px; }
  .ai-chat-input input { font-size:16px; }
  .ai-chat-send { width:40px; height:40px; font-size:17px; }
  .chat-suggest-chip { padding:8px 13px; font-size:12px; }
}

/* ── Page Header ──────────────────────────────────────────────── */
.page-header { margin-bottom:24px; }
.page-header h1 { font-size:22px; font-weight:800; color:var(--text-primary); margin-bottom:4px; font-family:var(--font-main); letter-spacing:-.5px; }
.page-header p  { color:var(--text-secondary); font-size:14px; }

/* ── Generator Output ─────────────────────────────────────────── */
.generator-output { background:var(--bg-main); border:1px solid var(--border); border-radius:var(--radius); padding:24px; max-height:520px; overflow-y:auto; font-size:14px; line-height:1.8; }
.modul-section-card { background:var(--bg-card); border-radius:var(--radius-sm); padding:16px 20px; margin-bottom:12px; border-left:4px solid var(--primary); box-shadow:var(--shadow-sm); }
.modul-section-card h3 { font-size:14px; font-weight:700; color:var(--primary); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.modul-section-card.green { border-left-color:var(--success); } .modul-section-card.green h3 { color:var(--success); }
.modul-section-card.orange { border-left-color:var(--warning); } .modul-section-card.orange h3 { color:var(--warning); }
.modul-section-card.purple { border-left-color:#7C3AED; } .modul-section-card.purple h3 { color:#7C3AED; }

/* ── Animations ───────────────────────────────────────────────── */
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }
@keyframes slideUp    { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideDown  { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideLeft  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInRight { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} }
@keyframes spin       { to{transform:rotate(360deg)} }
@keyframes shimmer    { to{background-position:-200% 0} }
@keyframes scanMove   { 0%,100%{top:10%} 50%{top:85%} }
@keyframes bounceIn   { 0%{transform:scale(0)} 70%{transform:scale(1.1)} 100%{transform:scale(1)} }
@keyframes pulse      { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.2)} }
@keyframes float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes countUp    { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
/* Drift sangat pelan untuk elemen dekoratif ambient (lingkaran di hero, dsb) —
   jangan dipakai untuk elemen berisi teks/aksi, cukup untuk hiasan latar */
@keyframes driftSlow  { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-10px,10px) scale(1.04)} }

/* PR #7 — Animasi masuk untuk elemen, sekarang pakai easing "expo-out"
   (cepat di awal, mendarat halus di akhir) supaya kerasa lebih premium
   dibanding ease bawaan browser yang datar */
.animate-in { animation: fadeIn .5s var(--ease-smooth), slideUp .5s var(--ease-smooth); }
.animate-slide-left { animation: slideLeft .5s var(--ease-smooth); }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-drift { animation: driftSlow 10s ease-in-out infinite; }

/* Stagger children — durasi & easing diseragamkan ke --ease-smooth.
   3 tier disediakan supaya blok besar di halaman (hero → ring counter →
   pilar → shortcut) muncul BERURUTAN turun ke bawah, bukan serentak —
   animation-delay tidak diwariskan ke child, jadi tiap tier punya
   basis delay sendiri (tier 2 mulai setelah tier 1 kelar, dst). */
.stagger-children > * { animation: slideUp .5s var(--ease-smooth) backwards; }
.stagger-children > *:nth-child(1){animation-delay:.05s}
.stagger-children > *:nth-child(2){animation-delay:.1s}
.stagger-children > *:nth-child(3){animation-delay:.15s}
.stagger-children > *:nth-child(4){animation-delay:.2s}
.stagger-children > *:nth-child(5){animation-delay:.25s}
.stagger-children > *:nth-child(6){animation-delay:.3s}
.stagger-children > *:nth-child(7){animation-delay:.35s}

.stagger-children.tier-2 > *:nth-child(1){animation-delay:.30s}
.stagger-children.tier-2 > *:nth-child(2){animation-delay:.36s}
.stagger-children.tier-2 > *:nth-child(3){animation-delay:.42s}
.stagger-children.tier-2 > *:nth-child(4){animation-delay:.48s}

.stagger-children.tier-3 > *:nth-child(1){animation-delay:.50s}
.stagger-children.tier-3 > *:nth-child(2){animation-delay:.56s}
.stagger-children.tier-3 > *:nth-child(3){animation-delay:.62s}
.stagger-children.tier-3 > *:nth-child(4){animation-delay:.68s}
.stagger-children.tier-3 > *:nth-child(5){animation-delay:.74s}
.stagger-children.tier-3 > *:nth-child(6){animation-delay:.80s}

/* ── Misc Helpers ─────────────────────────────────────────────── */
.hidden { display:none!important; }
.flex   { display:flex; }
.gap-1  { gap:4px; } .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px}
.text-muted { color:var(--text-secondary); }
code { font-family:'JetBrains Mono','Fira Code',monospace; font-size:12px; background:var(--border); padding:2px 6px; border-radius:4px; color:var(--danger); }

/* ── Auth pages (login/register): sidebar & header app tidak relevan ──── */
body.auth-page .sidebar,
body.auth-page .app-header,
body.auth-page .hamburger-btn,
body.auth-page .ai-assistant-fab,
body.auth-page .ai-chat-panel { display:none !important; }
body.auth-page #main-content { margin-left:0 !important; }

.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 40; /* di bawah header (50) & sidebar (100), di atas konten halaman */
  opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility 0s var(--transition);
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; transition: opacity var(--transition); }
@media (min-width:769px){ .sidebar-backdrop{ display:none !important; } }

/* ── Sentuhan & interaksi mobile (Android & iPhone) ──────────────
   - Hilangkan kilatan abu-abu bawaan saat tap (tap-highlight)
   - touch-action:manipulation buang delay ~300ms sebelum tap terdaftar,
     & cegah zoom tak sengaja karena double-tap pada tombol/kartu
   - Feedback tekan (scale down halus) HANYA di perangkat sentuh murni
     (hover:none), supaya di desktop hover-state tetap seperti biasa */
button, .btn, .sidebar-item, .content-type-card, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}
button, .btn, .sidebar-item, .content-type-card, .quick-action, .chat-suggest-chip {
  touch-action: manipulation;
}
@media (hover:none) {
  .btn:active, .content-type-card:active, .quick-action:active, .chat-suggest-chip:active,
  .ai-assistant-fab:active, .ai-chat-send:active, .ai-chat-header-btn:active {
    transform: scale(.94);
    transition: transform .1s ease;
  }
  .sidebar-item:active { background: var(--sidebar-hover); }
}
/* Momentum scroll halus di semua area yang bisa di-scroll (iOS) */
#main-content, .sidebar-nav, .modal-container, .ai-chat-messages {
  -webkit-overflow-scrolling: touch;
}
/* Cegah body ikut "memantul"/scroll saat sidebar drawer atau modal sedang scroll habis (iOS rubber-band leak) */
.sidebar, .modal-container { overscroll-behavior: contain; }

/* ── Responsive (PR #4) ───────────────────────────────────────── */
@media (max-width:1024px) {
  :root { --sidebar-w: 240px; }
  .app-content { padding:18px; }
}

@media (max-width:768px) {
  :root { --sidebar-w: 260px; }
  .hamburger-btn { display:flex; }
  .sidebar { transform:translateX(-280px); box-shadow:none; z-index:100; }
  .sidebar.open { transform:translateX(0); box-shadow:var(--shadow-xl); }
  #main-content { margin-left:0 !important; }
  .app-content  { padding:14px; }
  .stats-grid   { grid-template-columns:repeat(2,1fr); gap:10px; }
  .quick-actions{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .modal-container { max-width:95vw; }
  .data-table { display:block; overflow-x:auto; }

  /* Target sentuh minimal ~44px (rekomendasi Apple HIG & Material) */
  .btn, .btn-sm { min-height:44px; padding:10px 18px; }
  .sidebar-item { min-height:46px; }
  .form-input, select.form-input { min-height:44px; }

  /* WAJIB >=16px, kalau tidak Safari iOS auto-zoom in saat input difokus */
  .form-input, select, textarea, input[type="text"], input[type="number"],
  input[type="email"], input[type="password"], input[type="search"] { font-size:16px; }

  /* Header hormat notch/status bar di HP dengan poni (safe-area) */
  .app-header { padding-top: env(safe-area-inset-top); min-height: calc(56px + env(safe-area-inset-top)); }
  .sidebar { padding-top: env(safe-area-inset-top); }

  /* Toast tidak ketutup gesture-bar/home-indicator Android & iPhone */
  .toast-container { bottom: calc(16px + env(safe-area-inset-bottom)); }
}

@media (max-width:480px) {
  .stats-grid   { grid-template-columns:repeat(2,1fr); }
  .quick-actions{ grid-template-columns:repeat(2,1fr); }
  .app-header   { padding:0 14px; }
}

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  .sidebar,.app-header,.hamburger-btn,#toast-container,.pwa-banner,.ai-assistant-fab,.ai-chat-panel,.theme-switcher,.no-print { display:none!important; }
  #main-content { margin-left:0!important; }
  body { background:white; }
  .card { box-shadow:none!important; border:1px solid #ddd!important; }
}

/* ═══════════════════════════════════════════════════════════════
   KBC v2 — Aksen "Kurikulum Berbasis Cinta" (rencana v2 §5)
   Override warna aksen SAJA (hijau-oranye, identitas visual panduan KBC),
   di atas 6 tema apa pun yang sedang dipilih guru (ocean/forest/sunset/
   royal/dark/glass) — supaya sistem tema tetap jalan normal untuk kedua
   jalur kurikulum. Diaktifkan lewat body[data-kurikulum="kbc"] yang
   di-set oleh app.js saat sesi dimuat.
   ═══════════════════════════════════════════════════════════════ */
body[data-kurikulum="kbc"] {
  --primary:         #1F9D55;
  --primary-dark:    #15803D;
  --primary-deeper:  #14532D;
  --primary-light:   #DCFCE7;
  --primary-mid:     #4ADE80;
  --secondary:       #EA580C;
  --secondary-light: #FFEDD5;
  --accent:          #EA580C;
  --accent-light:    #FFEDD5;
  --sidebar-accent:  #1F9D55;
  --grad-card:       linear-gradient(135deg,#1F9D55,#EA580C);
  --grad-accent:     linear-gradient(135deg,#EA580C,#F59E0B);
}
/* Sidebar tetap pakai warna gelap tema aktif; hanya state hover/active ikut aksen KBC */
body[data-kurikulum="kbc"] .sidebar-item.active,
body[data-kurikulum="kbc"] .sidebar-item:hover {
  background: rgba(31,157,85,.18);
}

/* ═══════════════════════════════════════════════════════════════
   SIT v1 — Aksen "Sekolah Islam Terpadu" (JSIT)
   Sama seperti override KBC: hanya warna aksen (teal-emas), tidak
   mengganggu 6 tema yang sudah ada. Diaktifkan lewat
   body[data-kurikulum="sit"] yang di-set app.js saat sesi dimuat.
   ═══════════════════════════════════════════════════════════════ */
body[data-kurikulum="sit"] {
  --primary:         #0F766E;
  --primary-dark:    #115E59;
  --primary-deeper:  #134E4A;
  --primary-light:   #CCFBF1;
  --primary-mid:     #2DD4BF;
  --secondary:       #B45309;
  --secondary-light: #FEF3C7;
  --accent:          #B45309;
  --accent-light:    #FEF3C7;
  --sidebar-accent:  #0F766E;
  --grad-card:       linear-gradient(135deg,#0F766E,#B45309);
  --grad-accent:     linear-gradient(135deg,#B45309,#D97706);
}
body[data-kurikulum="sit"] .sidebar-item.active,
body[data-kurikulum="sit"] .sidebar-item:hover {
  background: rgba(15,118,110,.18);
}