/* ==== TEMA GELAP — "HIJAU GELAP" (lapisan aditif; base tidak diubah) ====
   Seluruh warna gelap dikumpulkan sebagai variabel --pc-* di blok pertama,
   jadi menyetel ulang tema cukup dari satu tempat.

   Prinsipnya BUKAN hitam pekat, melainkan hijau tua yang masih terbaca
   sebagai hijau: halaman paling gelap, kartu satu tingkat lebih terang,
   dan garis tepi hijau muda supaya batas antar kartu tetap jelas.
   Komponen yang tadinya masih putih ikut diselaraskan ke keluarga hijau
   yang sama (lihat bagian "penyelarasan komponen putih" di bawah).
   ====================================================================== */
html[data-theme="dark"]{
  color-scheme:dark;

  /* ---------- palet inti ---------- */
  --pc-page:      #16302A;   /* latar halaman — hijau tua */
  --pc-surface:   #20463A;   /* kartu & panel — satu tingkat lebih terang */
  --pc-surface-2: #1B3B31;   /* lapis kedua: kepala tabel, chip, isian */
  --pc-surface-3: #26523F;   /* hover / keadaan aktif */
  --pc-line:      #31604E;   /* garis tepi & pemisah */
  --pc-text:      #ECF6F0;   /* teks utama */
  --pc-muted:     #A9C6B6;   /* teks sekunder */
  --pc-brand:     #63C98D;   /* aksen hijau terang (samakan dengan --gold-500) */
  --pc-brand-ink: #0E2A20;   /* teks di atas aksen */
  --pc-soft:      #1D3D33;   /* pil & lencana lembut */
  --pc-danger-bg: #4A2622;
  --pc-danger:    #F5B7AC;

  --shadow-soft:0 1px 2px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.55);
}

  /* ================= 1. KERANGKA HALAMAN ================= */
  html[data-theme="dark"] body{ background:var(--pc-page); color:var(--pc-text); }
  html[data-theme="dark"] .topbar{ background:transparent; border-color:var(--pc-line); }
  html[data-theme="dark"] .eyebrow{ color:var(--pc-muted); }
  html[data-theme="dark"] .page-title{ color:var(--pc-text); }
  html[data-theme="dark"] .date-chip{ color:var(--pc-muted); }
  html[data-theme="dark"] .bell{ background:var(--pc-surface-2); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .bell svg{ color:#C4D4C9; }
  html[data-theme="dark"] .menu-btn{ background:var(--pc-surface-2); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .menu-btn svg{ color:#C4D4C9; }
  html[data-theme="dark"] ::placeholder{ color:var(--pc-muted); opacity:1; }

  /* ================= 2. KARTU, PANEL, TABEL ================= */
  html[data-theme="dark"] .stat-card,
  html[data-theme="dark"] .panel,
  html[data-theme="dark"] .chart-card,
  html[data-theme="dark"] .book-card{
    background:var(--pc-surface); border:1px solid var(--pc-line);
  }
  html[data-theme="dark"] .stat-card .n{ color:var(--pc-text); }
  html[data-theme="dark"] .stat-card .l{ color:var(--pc-muted); }
  html[data-theme="dark"] .book-title{ color:var(--pc-text); }
  html[data-theme="dark"] .book-author{ color:var(--pc-muted); }
  html[data-theme="dark"] .chart-card h3{ color:var(--pc-text); }
  html[data-theme="dark"] thead th{
    color:var(--pc-muted); background:var(--pc-surface-2); border-bottom:1px solid var(--pc-line);
  }
  html[data-theme="dark"] tbody td{ color:#D8EAE0; border-bottom:1px solid var(--pc-line); }
  html[data-theme="dark"] tbody tr:hover{ background:var(--pc-surface-3); }
  html[data-theme="dark"] .cell-strong{ color:var(--pc-text); }
  html[data-theme="dark"] .cell-muted{ color:var(--pc-muted); }
  html[data-theme="dark"] .empty-state{ color:var(--pc-muted); }
  html[data-theme="dark"] .m-avatar{ background:#2C5B48; color:var(--pc-text); }

  /* ================= 3. LENCANA & STATUS ================= */
  html[data-theme="dark"] .status-tersedia,
  html[data-theme="dark"] .badge-dikembalikan{ background:var(--pc-soft); color:#8FD6A6; }
  html[data-theme="dark"] .status-dipinjam,
  html[data-theme="dark"] .badge-dipinjam{ background:#1C3A38; color:#8ED8CB; }
  html[data-theme="dark"] .badge-terlambat,
  html[data-theme="dark"] .pc-badge.bad,
  html[data-theme="dark"] .pc-badge.warn{ background:var(--pc-danger-bg); color:var(--pc-danger); }
  html[data-theme="dark"] .pc-badge{ background:var(--pc-soft); color:var(--pc-muted); }
  html[data-theme="dark"] .pc-badge.muted{ background:var(--pc-surface-2); color:var(--pc-muted); }
  html[data-theme="dark"] .trend.up{ color:#8FD6A6; background:var(--pc-soft); }
  html[data-theme="dark"] .trend.warn{ color:var(--pc-danger); background:var(--pc-danger-bg); }
  html[data-theme="dark"] .pc-stok-pill{ background:var(--pc-soft); color:#8FD6A6; }
  html[data-theme="dark"] .pc-stok-pill.habis{ background:var(--pc-danger-bg); color:var(--pc-danger); }
  html[data-theme="dark"] .pc-book-status.limited{ color:#F0C674; background:#453413; }
  html[data-theme="dark"] .pc-book-status.empty{ color:var(--pc-danger); background:var(--pc-danger-bg); }
  html[data-theme="dark"] .pc-not-found .pc-empty-mark{ color:var(--pc-danger); background:var(--pc-danger-bg); }
  html[data-theme="dark"] .pc-assignment-banner.is-error{ background:var(--pc-danger-bg); color:var(--pc-danger); }
  html[data-theme="dark"] .pc-hbadge.due-soon{ background:#453413; }
  html[data-theme="dark"] .pc-hbadge.overdue{ background:var(--pc-danger-bg); color:var(--pc-danger); }
  html[data-theme="dark"] .pc-denda{ color:var(--pc-danger); }
  html[data-theme="dark"] .pc-summary{ color:var(--pc-danger); background:var(--pc-danger-bg); }

  /* ================= 4. TOMBOL & ISIAN ================= */
  html[data-theme="dark"] .icon-btn{ background:var(--pc-surface-2); color:var(--pc-text); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .icon-btn:hover{ background:var(--pc-surface-3); color:#fff; border-color:var(--pc-brand); }
  html[data-theme="dark"] .icon-btn-ghost{ background:var(--pc-surface-2); color:#D9EEE2; border-color:var(--pc-line); }
  html[data-theme="dark"] .icon-btn-ghost:hover{ background:var(--pc-surface-3); color:var(--pc-text); }
  html[data-theme="dark"] .icon-btn-text{ color:#CDE8DB; background:var(--pc-surface-2); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .icon-btn-text:hover{ background:var(--pc-surface-3); color:var(--pc-text); }
  html[data-theme="dark"] .icon-btn-text:disabled:hover{ background:var(--pc-surface-2); color:#CDE8DB; }
  html[data-theme="dark"] .select-mini{ color:#D8EAE0; background:var(--pc-surface-2); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .chip-soft{ background:var(--pc-soft); color:#CDE8DB; border:1px solid var(--pc-line); }
  html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{
    background:var(--pc-surface-2); color:var(--pc-text); border-color:var(--pc-line);
  }
  html[data-theme="dark"] option{ background:var(--pc-surface-2); color:var(--pc-text); }
  html[data-theme="dark"] .field label{ color:var(--pc-muted); }
  html[data-theme="dark"] .field input,
  html[data-theme="dark"] .field select,
  html[data-theme="dark"] .field textarea{ color:var(--pc-text); background:var(--pc-surface-2); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .field input:focus,
  html[data-theme="dark"] .field select:focus,
  html[data-theme="dark"] .field textarea:focus{ background:var(--pc-surface-3); }
  html[data-theme="dark"] .pwd-toggle{ color:var(--pc-muted); }
  html[data-theme="dark"] .pwd-toggle:hover{ background:var(--pc-surface-3); color:#CDE8DB; }

  /* ================= 5. HERO & PENCARIAN ================= */
  html[data-theme="dark"] .search-bar{ background:var(--pc-surface-2); }
  html[data-theme="dark"] .search-bar input{ color:var(--pc-text); }
  html[data-theme="dark"] .search-bar input::placeholder{ color:var(--pc-muted); }
  html[data-theme="dark"] .search-bar button{ color:var(--pc-brand-ink); }
  html[data-theme="dark"] .site-nav .site-sub{ color:var(--pc-brand); }
  html[data-theme="dark"] .hero-tag{ color:var(--pc-brand); }
  html[data-theme="dark"] .tab{ background:var(--pc-surface-2); border:1px solid var(--pc-line); color:#D8EAE0; }
  html[data-theme="dark"] .tab:hover{ border-color:var(--pc-brand); }
  html[data-theme="dark"] .tab.active{ background:var(--pc-brand); color:var(--pc-brand-ink); border-color:var(--pc-brand); }
  html[data-theme="dark"] .section-head .eyebrow{ color:var(--pc-brand); }
  html[data-theme="dark"] .section-head h2{ color:var(--pc-text); }
  html[data-theme="dark"] .section-head .sub{ color:var(--pc-muted); }
  html[data-theme="dark"] .see-all{ color:#CDE8DB; }

  /* ================= 6. PENYELARASAN KOMPONEN PUTIH =================
     Bagian ini yang memperbaiki blok-blok putih pada tangkapan layar:
     pil kategori, kartu rekomendasi, kartu buku, strip statistik, dan
     seluruh komponen halaman Katalog / Kelola Buku / Label QR / Fiksi. */

  /* --- hero: kotak pencarian & merek --- */
  html[data-theme="dark"] .pc-hero__search{ background:var(--pc-surface-2); box-shadow:0 14px 28px -18px rgba(0,0,0,.55); }
  html[data-theme="dark"] .pc-hero__search input{ color:var(--pc-text); }
  html[data-theme="dark"] .pc-hero__search input::placeholder{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-hero__search button{ background:var(--pc-brand); color:var(--pc-brand-ink); }
  html[data-theme="dark"] .pc-hero__search button:hover{ background:#46A872; color:#fff; }
  html[data-theme="dark"] .pc-hero__mark{ background:transparent; color:var(--pc-brand-ink); }

  /* --- pil kategori --- */
  html[data-theme="dark"] .pc-pills a,
  html[data-theme="dark"] .pc-kat-pills a{
    background:var(--pc-surface); border:1px solid var(--pc-line); color:#D8EAE0;
  }
  html[data-theme="dark"] .pc-pills a:hover,
  html[data-theme="dark"] .pc-kat-pills a:hover{ border-color:var(--pc-brand); color:var(--pc-text); }
  html[data-theme="dark"] .pc-pills a.active,
  html[data-theme="dark"] .pc-kat-pills a.active{
    background:var(--pc-brand); color:var(--pc-brand-ink); border-color:var(--pc-brand);
  }
  html[data-theme="dark"] .pc-fn-toggle{ background:var(--pc-surface); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .pc-fn-toggle a{ color:#D8EAE0; }
  html[data-theme="dark"] .pc-fn-toggle a.active{ background:var(--pc-brand); color:var(--pc-brand-ink); }

  /* --- kartu rekomendasi --- */
  html[data-theme="dark"] .pc-rekom-card{
    background:var(--pc-surface); border:1px solid var(--pc-line);
  }
  html[data-theme="dark"] .pc-rekom-card h2{ color:var(--pc-text); }
  html[data-theme="dark"] .pc-rekom-meta{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-rekom-link{ color:var(--pc-brand); }
  html[data-theme="dark"] .pc-rekom-link:hover{ color:#8FE8B4; }
  html[data-theme="dark"] .pc-rekom-chip{ background:var(--pc-soft); color:#8FD6A6; }

  /* --- kartu buku (ringkasan & rekomendasi) --- */
  html[data-theme="dark"] .pc-book{
    background:var(--pc-surface); border:1px solid var(--pc-line);
  }
  html[data-theme="dark"] .pc-book:hover{ box-shadow:0 8px 22px -10px rgba(0,0,0,.6); border-color:var(--pc-brand); }
  html[data-theme="dark"] .pc-book__body{ background:var(--pc-surface); }
  html[data-theme="dark"] .pc-book__title{ color:var(--pc-text); }
  html[data-theme="dark"] .pc-book__author{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-book__reason{ color:#8FD6A6; background:var(--pc-soft); }

  /* --- katalog siswa/admin --- */
  html[data-theme="dark"] .pc-kat-card{ background:var(--pc-surface); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .pc-kat-card:hover{ box-shadow:0 8px 22px -10px rgba(0,0,0,.6); border-color:var(--pc-brand); }
  html[data-theme="dark"] .pc-kat-card__body{ background:var(--pc-surface); border-top:1px solid var(--pc-line); }
  html[data-theme="dark"] .pc-kat-card__title{ color:var(--pc-text); }
  html[data-theme="dark"] .pc-kat-card__author{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-kat-card__status.tersedia{ background:var(--pc-soft); color:#8FD6A6; }
  html[data-theme="dark"] .pc-kat-card__status.dipinjam{ background:#1C3A38; color:#8ED8CB; }
  html[data-theme="dark"] .pc-kat-card__status.habis{ background:var(--pc-danger-bg); color:var(--pc-danger); }
  /* Penanda Fiksi / Non-Fiksi di katalog siswa */
  html[data-theme="dark"] .pc-kat-card__jenis{ background:var(--pc-soft); color:#8FD6A6; }
  html[data-theme="dark"] .pc-kat-card__jenis.nonfiksi{ background:var(--pc-surface-3); color:#A6D6C2; }
  html[data-theme="dark"] .pc-kat-toolbar{ background:transparent; border-color:var(--pc-line); }
  html[data-theme="dark"] .pc-kat-toolbar .search-bar{ background:var(--pc-surface-2); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .pc-kat-toolbar .select-mini{ background:var(--pc-surface-2); border:1px solid var(--pc-line); color:#D8EAE0; }
  html[data-theme="dark"] .pc-kat-toolbar .pc-rekom-btn{
    background:var(--pc-surface-2); border:1px solid var(--pc-line); color:#D8EAE0;
  }
  html[data-theme="dark"] .pc-kat-toolbar .pc-rekom-btn:hover{ background:var(--pc-surface-3); color:var(--pc-text); }
  html[data-theme="dark"] #page-katalog-buku .pc-kat-card,
  html[data-theme="dark"] #page-katalog-buku .pc-kat-card__body,
  html[data-theme="dark"] #page-katalog-buku .panel,
  html[data-theme="dark"] #page-katalog-buku .pc-kat-toolbar,
  html[data-theme="dark"] #page-katalog-buku .pc-kat-toolbar .search-bar,
  html[data-theme="dark"] #page-katalog-buku .pc-kat-toolbar .select-mini,
  html[data-theme="dark"] #page-katalog-buku .pc-kat-toolbar .pc-rekom-btn{
    background:var(--pc-surface); border-color:var(--pc-line);
  }
  html[data-theme="dark"] #page-katalog-buku .pc-kat-pills a{ background:var(--pc-surface); border-color:var(--pc-line); color:#D8EAE0; }
  html[data-theme="dark"] #page-katalog-buku .pc-kat-pills a.active{ background:var(--pc-brand); color:var(--pc-brand-ink); border-color:var(--pc-brand); }

  /* --- fiksi / non-fiksi --- */
  html[data-theme="dark"] .pc-fn-card{ background:var(--pc-surface); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .pc-fn-card__title{ color:var(--pc-text); }
  html[data-theme="dark"] .pc-fn-card__author{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-fn-card__meta{ color:#D8EAE0; }
  html[data-theme="dark"] .pc-fn-card__tag{ background:var(--pc-soft); color:#BEE8A0; }
  html[data-theme="dark"] .pc-fn-card__tag.nonfiksi{ background:#1C3A38; color:#8ED8CB; }
  html[data-theme="dark"] .pc-fn-subtitle{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-section-head h2{ color:var(--pc-text); }
  html[data-theme="dark"] .pc-section-head p{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-section-head .pc-eyebrow{ color:var(--pc-brand); }

  /* --- strip statistik & profil --- */
  html[data-theme="dark"] .pc-stat-strip__item,
  html[data-theme="dark"] .pc-stat-mini{ background:var(--pc-surface); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .pc-stat-strip__num,
  html[data-theme="dark"] .pc-stat-num{ color:var(--pc-text); }
  html[data-theme="dark"] .pc-stat-strip__lbl,
  html[data-theme="dark"] .pc-stat-lbl{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-stat-mini.is-alert{ background:#3A2422; border-color:#5A3330; }
  html[data-theme="dark"] .pc-stat-mini.is-alert .pc-stat-num{ color:var(--pc-danger); }
  html[data-theme="dark"] .pc-profpanel{ background:var(--pc-surface); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .pc-profavatar{ background:var(--pc-surface-2); color:var(--pc-muted); }
  html[data-theme="dark"] .pc-proftitle{ color:var(--pc-text); }
  html[data-theme="dark"] .pc-profsub{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-btn-link{ color:var(--pc-brand); }

  /* --- halaman Kelola Buku --- */
  html[data-theme="dark"] #page-kelola-buku .panel table{ background:var(--pc-surface); }
  html[data-theme="dark"] #page-kelola-buku .panel table thead th{ background:var(--pc-surface-2); }
  html[data-theme="dark"] #page-kelola-buku .pc-row-book__cover{ background:#1B3B31; }
  html[data-theme="dark"] #page-kelola-buku .pc-row-book__cover.is-empty{ background:#24443A; color:#8FB0A0; }
  html[data-theme="dark"] #page-kelola-buku td > ul li{ background:var(--pc-surface-2); border-color:var(--pc-line); }
  html[data-theme="dark"] #page-kelola-buku td > form input[type=text]{ background:var(--pc-surface-2); color:var(--pc-text); border-color:var(--pc-line); }
  html[data-theme="dark"] #page-kelola-buku .pc-row-actions .icon-btn-text,
  html[data-theme="dark"] #page-kelola-buku .pc-row-actions .icon-btn-text--danger{ background:var(--pc-surface-2); border-color:var(--pc-line); color:#CDE8DB; }
  html[data-theme="dark"] #page-kelola-buku .pc-row-actions .icon-btn-text:hover{ background:var(--pc-surface-3); color:var(--pc-text); }
  html[data-theme="dark"] #page-kelola-buku .pc-row-actions .icon-btn-text--danger{ color:var(--pc-danger); }
  html[data-theme="dark"] #page-kelola-buku .pc-row-actions .icon-btn-text--danger:hover{ background:var(--pc-danger-bg); color:var(--pc-danger); }

  /* --- label QR & aksi baris --- */
  html[data-theme="dark"] .pc-label-card{ background:var(--pc-surface); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .pc-label-info b{ color:var(--pc-text); }
  html[data-theme="dark"] .pc-label-info span{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-label-notice{ background:var(--pc-surface-2); color:var(--pc-muted); }
  html[data-theme="dark"] .pc-label-notice.ok{ background:var(--pc-soft); color:#8FD6A6; }
  html[data-theme="dark"] .pc-row-actions .icon-btn-text{ background:var(--pc-surface-2); border-color:var(--pc-line); color:#CDE8DB; }
  html[data-theme="dark"] .pc-row-actions .icon-btn-text:hover{ background:var(--pc-surface-3); color:var(--pc-text); }
  html[data-theme="dark"] .rec-actions .icon-btn-text{ background:var(--pc-surface-2); border-color:var(--pc-line); color:#CDE8DB; }
  html[data-theme="dark"] .rec-actions .icon-btn-text:hover{ background:var(--pc-surface-3); color:var(--pc-text); }
  /* QR wajib tetap hitam-putih supaya tetap bisa dipindai — jangan digelapkan */
  html[data-theme="dark"] .pc-label-qr{ background:#fff; color:#000; }

  /* --- form & akun siswa --- */
  html[data-theme="dark"] .pc-form-grid label{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-form-grid input,
  html[data-theme="dark"] .pc-form-grid select,
  html[data-theme="dark"] .pc-form-grid textarea{ background:var(--pc-surface-2); color:var(--pc-text); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .pc-account-form input{ background:var(--pc-surface-2); color:var(--pc-text); border-color:var(--pc-line); }
  html[data-theme="dark"] .pc-student-card{ background:var(--pc-surface); border-color:var(--pc-line); }
  html[data-theme="dark"] .pc-manual-row input{ background:var(--pc-surface-2); color:var(--pc-text); border-color:var(--pc-line); }
  html[data-theme="dark"] #pc-scan-reader__dashboard{ background:var(--pc-surface); }
  html[data-theme="dark"] .pc-book-fact strong,
  html[data-theme="dark"] .pc-manual-form label{ color:var(--pc-text); }

  /* --- halaman masuk / daftar (kartu putih di atas latar hijau) --- */
  html[data-theme="dark"] .pc-auth-card{ background:var(--pc-surface); box-shadow:0 24px 60px rgba(0,0,0,.5); }
  html[data-theme="dark"] .pc-auth-card h1{ color:var(--pc-text); }
  html[data-theme="dark"] .pc-auth-sub{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-auth-card label{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-auth-card input[type=text],
  html[data-theme="dark"] .pc-auth-card input[type=password],
  html[data-theme="dark"] .pc-auth-card select{ background:var(--pc-surface-2); color:var(--pc-text); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .pc-field-help{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-auth-hint{ color:var(--pc-muted); }
  html[data-theme="dark"] .pc-switcher a{ color:var(--pc-brand); }
  html[data-theme="dark"] .pc-login-error,
  html[data-theme="dark"] .login-error{ color:var(--pc-danger); background:var(--pc-danger-bg); }
  html[data-theme="dark"] .pc-alert{ background:var(--pc-surface-2); color:#D8EAE0; }
  html[data-theme="dark"] .pc-alert.ok{ background:var(--pc-soft); color:#8FD6A6; }
  html[data-theme="dark"] .pc-alert.error{ background:var(--pc-danger-bg); color:var(--pc-danger); }

  /* ================= 7. REKOMENDASI (CBF) ================= */
  html[data-theme="dark"] .rec-info{ background:var(--pc-surface); border:1px solid var(--pc-line); border-left:4px solid var(--pc-brand); }
  html[data-theme="dark"] .rec-info-badge{ color:var(--pc-brand-ink); background:var(--pc-brand); }
  html[data-theme="dark"] .rec-info-title{ color:var(--pc-text); }
  html[data-theme="dark"] .rec-info-text{ color:var(--pc-muted); }
  html[data-theme="dark"] .rec-info-text b{ color:#CDE8DB; }
  html[data-theme="dark"] .rec-ctl label{ color:var(--pc-muted); }
  html[data-theme="dark"] .rec-profile{ background:var(--pc-surface); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .rec-prof-label{ color:#D9EEE2; }
  html[data-theme="dark"] .rec-chip{ color:#CDE8DB; background:var(--pc-surface-2); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .rec-chip.is-tema{ background:var(--pc-soft); border-color:#2A5342; color:#BEE8A0; }
  html[data-theme="dark"] .rec-note{ color:var(--pc-muted); }
  html[data-theme="dark"] .rec-score{ color:var(--pc-brand-ink); background:rgba(223,243,230,.94); }
  html[data-theme="dark"] .rec-bar{ background:var(--pc-surface-2); }
  html[data-theme="dark"] .rec-reason{ color:var(--pc-muted); }
  html[data-theme="dark"] .rec-reason b{ color:#CDE8DB; }
  html[data-theme="dark"] .rec-strip-head{ background:var(--pc-surface); border:1px solid var(--pc-line); border-left:4px solid var(--pc-brand); }
  html[data-theme="dark"] .rec-eyebrow-live{ color:var(--pc-brand); }
  html[data-theme="dark"] .rec-pin-badge{ color:var(--pc-brand-ink); background:rgba(223,243,230,.94); box-shadow:0 1px 3px rgba(0,0,0,.4); }
  html[data-theme="dark"] #katalog-rec-toggle:hover{ background:var(--pc-surface-3); color:var(--pc-text); }
  html[data-theme="dark"] #katalog-rec-toggle.is-active{ background:var(--pc-brand); color:var(--pc-brand-ink); border-color:var(--pc-brand); }
  html[data-theme="dark"] #katalog-rec-toggle.is-active svg{ fill:var(--pc-brand-ink); stroke:var(--pc-brand-ink); }
  html[data-theme="dark"] .rec-how h3{ color:var(--pc-text); }
  html[data-theme="dark"] .rec-how li{ color:#D8EAE0; }
  html[data-theme="dark"] .rec-how li b{ color:#CDE8DB; }
  html[data-theme="dark"] .rec-pipe span{ color:#CDE8DB; background:var(--pc-surface-2); border:1px solid var(--pc-line); }
  html[data-theme="dark"] .rec-term{ background:var(--pc-soft); border:1px solid #2A5342; }

  /* ================= 8. MODAL, TOAST, GULIR ================= */
  html[data-theme="dark"] .modal{ background:var(--pc-surface); }
  html[data-theme="dark"] .modal h3{ color:var(--pc-text); }
  html[data-theme="dark"] .modal-sub{ color:var(--pc-muted); }
  html[data-theme="dark"] .detail-sub{ color:var(--pc-muted); }
  html[data-theme="dark"] .detail-meta{ color:#D8EAE0; }
  html[data-theme="dark"] .detail-meta .row{ border-bottom:1px solid var(--pc-line); }
  html[data-theme="dark"] .detail-meta .k{ color:var(--pc-muted); }
  html[data-theme="dark"] .detail-desc{ color:#D8EAE0; }
  html[data-theme="dark"] ::-webkit-scrollbar{ width:11px; height:11px; }
  html[data-theme="dark"] ::-webkit-scrollbar-track{ background:var(--pc-page); }
  html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#3A6353; border-radius:99px; border:2px solid var(--pc-page); }
  html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:#4A7A66; }
  html[data-theme="dark"] ::selection{ background:#2E6B4F; color:#EFFBF4; }
  html[data-theme="dark"] img,html[data-theme="dark"] svg{ color-scheme:normal; }

  /* ================= 9. TOMBOL TEMA ================= */
  .pc-theme-btn{width:38px;height:38px;flex:0 0 auto;border-radius:var(--radius-pill);border:1px solid var(--line);
    background:var(--white);color:var(--navy-900);display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;padding:0;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;}
  .pc-theme-btn:hover{background:var(--cream-100);transform:translateY(-1px);}
  .pc-theme-btn:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;}
  .pc-theme-btn svg{width:18px;height:18px;display:block;}
  html[data-theme="dark"] .pc-theme-btn{ background:var(--pc-surface-2); border-color:var(--pc-line); color:var(--pc-brand); }
  html[data-theme="dark"] .pc-theme-btn:hover{ background:var(--pc-surface-3); }
  html.pc-theme-anim *{transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease !important;}
  @media print{ .pc-theme-btn{display:none !important;} }


/* ================================================================
   LAPISAN ANIMASI TAMBAHAN (aditif) — prefix "pc-".
   Hanya menganimasikan transform & opacity (GPU-friendly),
   tidak mengubah tata letak, markup, maupun JS base.
   Memakai ulang keyframes yang sudah ada (gskPulse, gskFadeUp).
   ================================================================ */
@keyframes pcShake{
  0%,100%{ transform:translateX(0); }
  20%   { transform:translateX(-6px); }
  40%   { transform:translateX(6px); }
  60%   { transform:translateX(-4px); }
  80%   { transform:translateX(4px); }
}
@keyframes pcModalIn{
  from{ opacity:0; transform:translateY(16px) scale(.97); }
  to  { opacity:1; transform:none; }
}
@keyframes pcToastIn{
  from{ opacity:0; transform:translateX(24px); }
  to  { opacity:1; transform:none; }
}
@keyframes pcToastOut{
  from{ opacity:1; transform:none; }
  to  { opacity:0; transform:translateX(24px); }
}

/* modal masuk halus — murni CSS, dipicu saat kelas .hidden dilepas */
.modal-backdrop:not(.hidden) .modal{ animation:pcModalIn .32s cubic-bezier(.22,1,.36,1) both; }

/* getar halus saat login petugas salah (dipicu JS, hanya sekali) */
.modal.pc-shake{ animation:pcShake .42s cubic-bezier(.36,.07,.19,.97) both; }

/* notifikasi masuk dari kanan; keluar dikelola oleh JS toast() */
.toast{ animation:pcToastIn .3s cubic-bezier(.22,1,.36,1) both; }
.toast.pc-out{ animation:pcToastOut .22s ease both; }

/* denyut hanya pada tabel peminjaman utama, agar tidak puluhan elemen berdenyut */
#page-peminjaman .pc-hbadge.overdue{ animation:gskPulse 2.4s ease-in-out infinite; }

/* ---------- sampul asli buku (aditif): ikon hanya disembunyikan bila gambar berhasil ada ---------- */
.book-cover img.pc-cover-img, .detail-cover img.pc-cover-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:1;
}
.book-cover > .cat-chip, .detail-cover > .cat-chip{ position:relative; z-index:2; }

/* ---------- kilau (sheen) DIMATIKAN ---------- */
.book-grid.mi-sheen .book-card .book-cover::after{ display:none; }

/* pop-up TIPIS: memakai transisi, bukan animasi.
   Karena tidak ada keyframes, tidak ada gerakan yang diputar ulang
   saat kursor berpindah dari satu kartu ke kartu lain. */
.book-grid .book-card{ position:relative; }
.book-grid .book-card:hover,
.book-grid .book-card:focus-visible{
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 8px 18px rgba(14,42,32,.16);
  border-color: var(--gold-500);
  z-index: 5;
}

.detail-cover{ position:relative; }

/* ---------- tampilan detail: sampul UTUH, tidak dipotong ---------- */
.detail-cover.pc-has-img{
  aspect-ratio: 3 / 4;
  max-height: 62vh;
  overflow: hidden;
  padding: 14px;
  position: relative;
  isolation: isolate;
  background-image: var(--pc-cover-url);
  background-size: cover;
  background-position: center;
}
/* latar kabur dari sampul yang sama, mengisi ruang sisa */
.detail-cover.pc-has-img::before{
  content: '';
  position: absolute;
  inset: -28px;
  background-image: var(--pc-cover-url);
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.2) brightness(.68);
  transform: scale(1.1);
  z-index: 0;
}
.detail-cover.pc-has-img img.pc-cover-img{
  position: static;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  object-fit: contain;              /* <-- inti perbaikan: seluruh sampul terlihat */
  z-index: 1;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.5));
}
.detail-cover.pc-has-img > .cat-chip{ justify-content: flex-start; }

/* state kosong muncul lembut */
#katalog-empty, #rec-empty{ animation:gskFadeUp .38s ease-out both; }

/* umpan balik tekan (tidak menimpa transition yang sudah ada) */
.icon-btn:active, .role-option:active, .rec-chip:active{ transform:scale(.96); }

/* kill-switch aksesibilitas — sejalan dengan lapisan mi- */
@media (prefers-reduced-motion: reduce){
  .modal-backdrop:not(.hidden) .modal,
  .modal.pc-shake,
  .toast, .toast.pc-out,
  #page-peminjaman .pc-hbadge.overdue,
  #katalog-empty, #rec-empty{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .icon-btn:active, .role-option:active, .rec-chip:active{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
  .book-grid .book-card:hover, .book-grid .book-card:focus-visible{ transform:none !important; }
}