/* =====================================================================
 * dn-design.css — Design System "Modern Soft" (daonovel)
 * FASE 1: fondasi token + komponen. BELUM mengubah halaman manapun.
 * Brand: #00aeef (cyan). Dark mode via body.nightmode-on / [data-theme=dark].
 * Tanpa !important. Tanpa framework. CSS murni + custom properties.
 * Prefix kelas: .dn-*  | Prefix token: --dn-*
 * ===================================================================== */

/* -------------------------------------------------- TOKENS (light) */
:root {
  color-scheme: light;

  /* Brand (dipertahankan — #00aeef utama, #009688 opsi Customizer) */
  --dn-brand:        #009688;             /* isian/aksen utama        */
  --dn-brand-strong: #00796b;             /* hover/pressed (lebih tua)*/
  --dn-brand-ink:    #0a7aa3;             /* teks link di latar terang*/
  --dn-brand-tint:   rgba(0, 174, 239, .12);
  --dn-brand-tint-2: rgba(0, 174, 239, .20);
  --dn-on-brand:     #ffffff;
  --dn-accent-2:     #009688;             /* teal — cadangan/opsi     */

  /* Permukaan & teks */
  --dn-bg:         #ffffff;
  --dn-surface:    #ffffff;
  --dn-surface-2:  #f4f6f8;
  --dn-surface-3:  #eceff3;
  --dn-border-l:   #e6e9ee;            /* border mode terang (themeable) */
  --dn-border:     var(--dn-border-l);
  --dn-star:       #ff912c;            /* bintang rating terisi (orange kanonik) */
  --dn-star-empty: #cdd2d9;            /* bintang rating kosong (abu lembut) */
  /* Lebar halaman KANONIK (theme-independent) — jangan hardcode px per halaman */
  --dn-page-w:     1112px;             /* container arsip/listing (dgn sidebar) */
  --dn-content-w:  760px;              /* kolom artikel (kiri, saat ada sidebar) */
  --dn-sidebar-w:  332px;              /* sidebar (kanan) — SATU lebar sitewide */
  --dn-page-narrow: var(--dn-content-w); /* halaman kolom-tunggal (genre/cats/lu/rank) — owner 2026-07-03: SAMA 760 dgn kolom konten bersidebar (dulu 960) */
  --dn-text:       #1f2733;
  --dn-text-muted: #5b6470;
  --dn-text-faint: #8a929c;

  /* Status (untuk pill status novel) */
  --dn-ok:      #1f9d57;  --dn-ok-tint:     rgba(31, 157, 87, .14);
  --dn-warn:    #c8881a;  --dn-warn-tint:   rgba(200, 136, 26, .16);
  --dn-danger:  #d64545;  --dn-danger-tint: rgba(214, 69, 69, .14);

  /* Bentuk "Modern Soft" — sudut sedikit lebih tegas */
  --dn-radius-card:     8px;
  --dn-radius-control:  5px;
  --dn-radius-sm:       4px;
  --dn-radius-pill:    999px;

  /* Tombol (default = warna brand; bisa di-override Customizer) */
  --dn-btn-bg:        var(--dn-brand);
  --dn-btn-bg-hover:  var(--dn-brand-strong);
  --dn-btn-text:      var(--dn-on-brand);
  --dn-btn-radius:    var(--dn-radius-control);

  /* Bayangan halus */
  --dn-shadow-sm:    0 1px 2px rgba(16, 24, 40, .06);
  --dn-shadow-card:  0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px rgba(16, 24, 40, .06);
  --dn-shadow-hover: 0 10px 26px rgba(16, 24, 40, .12);
  --dn-shadow-pop:   0 14px 36px rgba(16, 24, 40, .18);

  /* Ritme spacing */
  --dn-space-xs:  4px;
  --dn-space-sm:  8px;
  --dn-space-md: 12px;
  --dn-space-lg: 16px;
  --dn-space-xl: 24px;
  --dn-space-2xl:32px;

  /* Tipografi — 3 peran:
   *  display = Fraunces (serif berkarakter) → judul besar / hero / section title
   *  head    = Montserrat (sans rapat)      → chrome UI: tombol, label, badge, judul kecil
   *  body    = Fira Sans (sans)             → teks isi
   * JANGAN tulis font-family/font-size literal di template — pakai token ini. */
  --dn-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --dn-font-body:    "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --dn-font-head:    "Montserrat", var(--dn-font-body);
  --dn-font-reading: var(--dn-font-body);   /* reader; Customizer bisa ganti serif */

  /* Skala tipe (satu sumber — semua judul ambil dari sini) */
  --dn-fs-display: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);   /* hero / 404 / judul halaman besar */
  --dn-fs-h1: clamp(1.5rem, 1.18rem + 1.4vw, 2rem);
  --dn-fs-h2: clamp(1.25rem, 1.07rem + .8vw, 1.5rem);
  --dn-fs-h3: clamp(1.05rem, .98rem + .4vw, 1.2rem);
  --dn-fs-h4: 1rem;
  --dn-fs-base: 1rem;
  --dn-fs-sm:  .8125rem;
  --dn-fs-xs:  .6875rem;       /* eyebrow / caption / meta */

  /* Bobot — referensi tunggal */
  --dn-fw-normal:   400;
  --dn-fw-medium:   500;
  --dn-fw-semibold: 600;
  --dn-fw-bold:     700;

  /* Tracking (letter-spacing) — display rapat, eyebrow lebar */
  --dn-tracking-display: -.02em;
  --dn-tracking-tight:   -.01em;
  --dn-tracking-normal:  0;
  --dn-tracking-wide:    .14em;   /* eyebrow uppercase */

  --dn-leading-tight:   1.25;
  --dn-leading-base:    1.6;
  --dn-leading-reading: 1.85;   /* nyaman utk baca novel panjang */
  --dn-measure: 70ch;           /* lebar baris optimal (umum)     */
  --dn-reading-measure: 80ch;   /* lebar kolom prose reader (Customizer) */
  --dn-reader-scale: 1;         /* skala font baca global (Customizer); fontsize-N ikut */

  /* Motion */
  --dn-transition: 160ms cubic-bezier(.2, .6, .2, 1);
  --dn-ring: 0 0 0 3px rgba(0, 174, 239, .35);

  /* Glow brand (cyan) untuk hover kartu */
  --dn-brand-glow: rgba(0, 174, 239, .32);

  /* Hover themeable (light) — bisa diatur terpisah dari dark via Customizer */
  --dn-hover-card: #f4f6f8;            /* bg kartu .box saat hover (terang) */
  --dn-hover-btn:  var(--dn-brand-strong); /* bg tombol saat hover         */
  --dn-hover-nav:  #ffffff;            /* bg pill nav saat hover            */
}

/* -------------------------------------------------- TOKENS (dark) */
body.nightmode-on,
[data-theme="dark"] {
  color-scheme: dark;

  /* Link/tint gelap SATU keluarga dgn brand teal (dulu cyan #4cc6f5 — tabrakan).
   * Bila brand diganti via Customizer, nid_customizer_css meng-derive ulang. */
  --dn-brand-ink:    #4cc9b8;          /* link teal muda di latar gelap */
  --dn-brand-tint:   rgba(0, 150, 136, .16);
  --dn-brand-tint-2: rgba(0, 150, 136, .28);

  /* Palet "Deep Graphite" (2026-07-04) — netral dingin, TANPA dominan biru-navy.
   * 3 elevasi berdekatan & tenang: canvas < panel (m-card/header) < kotak .box.
   * Pemisahan visual mengandalkan elevasi + shadow, bukan border terang. */
  --dn-bg:         #0c1015;            /* canvas graphite (bukan hitam pekat) */
  --dn-surface:    #151a21;            /* header/footer/panel default  */
  --dn-surface-2:  #1d242e;            /* .box widget (raised)         */
  --dn-surface-3:  #26303c;            /* hover kotak (lebih terang)   */
  --dn-border-d:   #2b3441;            /* border redup — hairline, tak silau */
  --dn-border:     var(--dn-border-d);
  --dn-star:       #ff912c;            /* bintang rating terisi (orange kanonik) */
  --dn-star-empty: #727376;            /* bintang kosong — abu medium, tetap terlihat di kartu gelap */
  --dn-card:       #151a21;            /* .m-card bg (panel)           */
  --dn-text:       #e8eaee;
  --dn-text-muted: #9aa3af;
  --dn-text-faint: #6a7380;

  --dn-ok-tint:     rgba(31, 157, 87, .22);
  --dn-warn-tint:   rgba(200, 136, 26, .24);
  --dn-danger-tint: rgba(214, 69, 69, .22);

  --dn-shadow-sm:    0 1px 2px rgba(0, 0, 0, .5);
  --dn-shadow-card:  0 1px 2px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .35);
  --dn-shadow-hover: 0 12px 28px rgba(0, 0, 0, .5);
  --dn-shadow-pop:   0 16px 40px rgba(0, 0, 0, .55);
  --dn-ring: 0 0 0 3px rgba(45, 212, 191, .35);
  --dn-brand-glow: rgba(45, 212, 191, .38);  /* glow teal lembut di latar gelap */

  /* Hover themeable (dark) — terpisah dari light */
  --dn-hover-card: var(--dn-surface-3);     /* bg kartu .box saat hover (gelap) */
  --dn-hover-btn:  var(--dn-brand-strong);
  --dn-hover-nav:  #ffffff;
}

/* box-sizing hanya utk komponen dn (spesifisitas 0, tak ganggu gaya lama) */
:where([class^="dn-"], [class*=" dn-"]) { box-sizing: border-box; }

/* =================================================== BASE TIPOGRAFI
 * Default keluarga font untuk SEMUA judul → halaman tanpa override ikut konsisten.
 * Spesifisitas elemen (0,0,1) sengaja rendah: template lama dgn selector kelas
 * masih menang, tapi target migrasi = HAPUS literal font di template agar jatuh
 * ke base ini. JANGAN tulis font-family/font-size literal di template.
 * Pakai :where() agar tak menaikkan spesifisitas pd reader (font-switcher aman). */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--dn-font-head);
  color: var(--dn-text);
  line-height: var(--dn-leading-tight);
}
/* h1 = momen editorial → serif display Fraunces */
:where(h1) {
  font-family: var(--dn-font-display);
  font-weight: var(--dn-fw-semibold);
  letter-spacing: var(--dn-tracking-display);
  font-size: var(--dn-fs-h1);
}
:where(h2) { font-size: var(--dn-fs-h2); font-weight: var(--dn-fw-bold); }
:where(h3) { font-size: var(--dn-fs-h3); font-weight: var(--dn-fw-semibold); }
:where(h4) { font-size: var(--dn-fs-h4); font-weight: var(--dn-fw-semibold); }

/* ---- Primitive tipografi (opt-in, pakai di template, bukan literal) ---- */

/* Eyebrow: label kecil di atas judul (kategori, konteks) */
.dn-eyebrow {
  display: inline-block;
  font-family: var(--dn-font-head);
  font-size: var(--dn-fs-xs);
  font-weight: var(--dn-fw-bold);
  letter-spacing: var(--dn-tracking-wide);
  text-transform: uppercase;
  color: var(--dn-brand-ink);
  margin: 0 0 var(--dn-space-sm);
}

/* Display: judul hero / 404 / judul halaman besar (serif Fraunces) */
.dn-display {
  font-family: var(--dn-font-display);
  font-size: var(--dn-fs-display);
  font-weight: var(--dn-fw-semibold);
  letter-spacing: var(--dn-tracking-display);
  line-height: 1.08;
  color: var(--dn-text);
  margin: 0 0 var(--dn-space-md);
}

/* Title: judul halaman standar (serif, lebih kecil dari display) */
.dn-title {
  font-family: var(--dn-font-display);
  font-size: var(--dn-fs-h1);
  font-weight: var(--dn-fw-semibold);
  letter-spacing: var(--dn-tracking-tight);
  line-height: 1.14;
  color: var(--dn-text);
  margin: 0 0 var(--dn-space-sm);
}

/* Lede: paragraf pengantar di bawah judul */
.dn-lede {
  font-family: var(--dn-font-body);
  font-size: 1.0625rem;
  line-height: var(--dn-leading-base);
  color: var(--dn-text-muted);
  max-width: var(--dn-measure);
  margin: 0 0 var(--dn-space-lg);
}

/* Section head: judul blok (widget, daftar) + garis/aksi opsional */
.dn-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dn-space-md);
  margin: 0 0 var(--dn-space-md);
}
.dn-section-title {
  font-family: var(--dn-font-head);
  font-size: var(--dn-fs-h2);
  font-weight: var(--dn-fw-bold);
  letter-spacing: var(--dn-tracking-tight);
  color: var(--dn-text);
  margin: 0;
}
.dn-section-link {
  font-family: var(--dn-font-head);
  font-size: var(--dn-fs-sm);
  font-weight: var(--dn-fw-semibold);
  color: var(--dn-brand-ink);
  text-decoration: none;
  white-space: nowrap;
}
.dn-section-link:hover { text-decoration: underline; }

/* Prose: kolom teks statis (about, kebijakan, isi glossary) */
.dn-prose {
  font-family: var(--dn-font-body);
  font-size: var(--dn-fs-base);
  line-height: var(--dn-leading-base);
  color: var(--dn-text);
  max-width: var(--dn-measure);
}
.dn-prose h2, .dn-prose h3 { margin: var(--dn-space-xl) 0 var(--dn-space-sm); }
.dn-prose p { margin: 0 0 var(--dn-space-md); }
.dn-prose a { color: var(--dn-brand-ink); }

/* =================================================== KOMPONEN */

/* ---- Tombol ---- */
.dn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dn-space-sm);
  font-family: var(--dn-font-head);
  font-size: var(--dn-fs-base);
  font-weight: 600;
  line-height: 1;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--dn-btn-radius);
  background: var(--dn-surface-2);
  color: var(--dn-text);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dn-transition), color var(--dn-transition),
              border-color var(--dn-transition), box-shadow var(--dn-transition),
              transform var(--dn-transition);
}
.dn-btn:hover { background: var(--dn-surface-3); }
.dn-btn:focus-visible { outline: none; box-shadow: var(--dn-ring); }
.dn-btn:active { transform: translateY(1px); }

.dn-btn--primary {
  background: var(--dn-btn-bg);
  color: var(--dn-btn-text);
  box-shadow: var(--dn-shadow-sm);
}
.dn-btn--primary:hover {
  background: var(--dn-btn-bg-hover);
  box-shadow: var(--dn-shadow-hover);
  transform: translateY(-1px);
}

.dn-btn--secondary {
  background: transparent;
  color: var(--dn-brand-ink);
  border-color: var(--dn-brand);
}
.dn-btn--secondary:hover { background: var(--dn-brand-tint); }

.dn-btn--ghost { background: transparent; color: var(--dn-text-muted); }
.dn-btn--ghost:hover { background: var(--dn-surface-2); color: var(--dn-text); }

.dn-btn--pill { border-radius: var(--dn-radius-pill); }
.dn-btn--sm   { padding: 6px 12px; font-size: var(--dn-fs-sm); }
.dn-btn--lg   { padding: 13px 24px; font-size: 1.0625rem; }
.dn-btn--block{ display: flex; width: 100%; }
.dn-btn[disabled], .dn-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Card / surface ---- */
.dn-card {
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card);
  box-shadow: var(--dn-shadow-card);
  padding: var(--dn-space-lg);
  color: var(--dn-text);
}
.dn-card--flush { padding: 0; overflow: hidden; }
.dn-card--hover { transition: box-shadow var(--dn-transition), transform var(--dn-transition); }
.dn-card--hover:hover { box-shadow: var(--dn-shadow-hover); transform: translateY(-2px); }

/* ---- Badge / Pill (genre, status) ---- */
.dn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-family: var(--dn-font-body);
  font-size: var(--dn-fs-sm);
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--dn-radius-pill);
  background: var(--dn-brand-tint);
  color: var(--dn-brand-ink);
  text-decoration: none;
}
.dn-badge--neutral { background: var(--dn-surface-3); color: var(--dn-text-muted); }
.dn-badge--ok      { background: var(--dn-ok-tint);     color: var(--dn-ok); }
.dn-badge--warn    { background: var(--dn-warn-tint);   color: var(--dn-warn); }
.dn-badge--danger  { background: var(--dn-danger-tint); color: var(--dn-danger); }

/* chip = badge yang bisa diklik (genre link) */
.dn-chip { border: 1px solid transparent; transition: background var(--dn-transition), color var(--dn-transition), border-color var(--dn-transition); }
.dn-chip:hover { background: var(--dn-brand-tint-2); color: var(--dn-brand-ink); }
.dn-chip:focus-visible { outline: none; box-shadow: var(--dn-ring); }

/* wadah deret badge/chip (genre, tags) */
.dn-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Cover-stack (KANONIK) — tumpukan mini-cover novel utk kartu "list/koleksi".
   Dipakai My Lists + Community. Kosong = spine dashed; >N = badge .__more.
   Markup: <div class="dn-covers[ is-empty]"><span class="dn-covers__img" style="background-image:url()"></span>… <span class="dn-covers__more">+N</span></div> */
.dn-covers { --dn-cover-w: 46px; --dn-cover-h: 64px; position: relative; flex: none; width: calc(var(--dn-cover-w) + 22px); height: var(--dn-cover-h); }
.dn-covers__img {
  position: absolute; top: 0; width: var(--dn-cover-w); height: var(--dn-cover-h);
  background-size: cover; background-position: center; background-color: var(--dn-surface-3);
  border-radius: var(--dn-radius-sm); box-shadow: var(--dn-shadow-sm); border: 1px solid var(--dn-border);
}
.dn-covers__img:nth-child(1) { left: 0;    transform: rotate(-5deg); z-index: 1; }
.dn-covers__img:nth-child(2) { left: 9px;  transform: rotate(0deg);  z-index: 2; }
.dn-covers__img:nth-child(3) { left: 18px; transform: rotate(5deg);  z-index: 3; }
.dn-covers.is-empty::before, .dn-covers.is-empty::after {
  content: ""; position: absolute; top: 0; width: var(--dn-cover-w); height: var(--dn-cover-h);
  border-radius: var(--dn-radius-sm); border: 1px dashed var(--dn-border); background: var(--dn-surface-2);
}
.dn-covers.is-empty::before { left: 0;   transform: rotate(-5deg); }
.dn-covers.is-empty::after  { left: 11px; transform: rotate(5deg); }
.dn-covers__more {
  position: absolute; right: -2px; bottom: -2px; z-index: 4;
  display: inline-flex; align-items: center; padding: 1px 7px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-bold);
  color: var(--dn-on-brand); background: var(--dn-brand); border-radius: var(--dn-radius-pill); box-shadow: var(--dn-shadow-sm);
}

/* Overlay status + jumlah chapter di cover (kartu listing) — pill solid agar terbaca di gambar */
span.status, span.ch {
  position: absolute; top: 6px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 600; line-height: 1.6;
  color: #fff; border: none;
  border-radius: var(--dn-radius-pill);
  background: rgba(0, 0, 0, .6);
}
span.status { left: 6px; }
span.ch { right: 6px; }
span.status.ongoing { background: var(--dn-ok); }
span.status.complete, span.status.completed { background: var(--dn-brand); }
span.status.hiatus { background: var(--dn-warn); }
span.status.dropped { background: var(--dn-danger); }

/* Badge bendera negara asal (meta nid_negara) — pojok kanan-BAWAH cover kartu.
 * Pojok atas sudah dipakai status (kiri) + jumlah ch (kanan).
 * pointer-events:none → klik tembus ke link cover. */
.dn-flag {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  display: inline-flex;
  pointer-events: none;
}
.dn-flag img {
  display: block; width: 20px; height: 15px; object-fit: cover;
  border-radius: calc(var(--dn-radius-sm) - 2px);
  box-shadow: var(--dn-shadow-sm);
}
/* Konteks posisi tiap keluarga kartu. a.list-a (kartu grid) sudah display:block
 * + overflow:hidden → badge ikut terklip sudut cover & tak ikut zoom hover. */
.box:not(.rank-box):not(.read-box) a.list-a { position: relative; }
a.dn-rank-cover, span.dn-rank-cover, a.sr-cover, a.lu-cover, .tx-cover { position: relative; }
.tx-cover { display: block; }
/* Varian pojok kanan-ATAS — untuk kartu yang pill status/ch-nya di bawah cover
 * (widget Recommendation), supaya bendera tidak menimpa pill. */
.dn-flag--top { bottom: auto; top: 6px; }
/* Kartu carousel: beri napas lebih dari tepi bawah cover. */
.box.car a.list-a .dn-flag { right: 9px; bottom: 12px; }
/* Cover kecil pada baris daftar → bendera menyusut. */
.dn-rank-cover .dn-flag, .sr-cover .dn-flag, .lu-cover .dn-flag, .tx-cover .dn-flag { right: 4px; bottom: 4px; }
.dn-rank-cover .dn-flag img, .sr-cover .dn-flag img, .lu-cover .dn-flag img, .tx-cover .dn-flag img { width: 18px; height: 13px; }

/* transisi: menangkan warna badge/chip link di nightmode lama (dirapikan saat Fase 3).
   Spesifisitas (0,2,2) mengalahkan `body.nightmode-on main a` (0,1,3). */
body.nightmode-on a.dn-badge,
[data-theme="dark"] a.dn-badge { color: var(--dn-brand-ink); }
body.nightmode-on a.dn-badge--ok,
[data-theme="dark"] a.dn-badge--ok { color: var(--dn-ok); }
body.nightmode-on a.dn-badge--warn,
[data-theme="dark"] a.dn-badge--warn { color: var(--dn-warn); }
body.nightmode-on a.dn-badge--danger,
[data-theme="dark"] a.dn-badge--danger { color: var(--dn-danger); }
/* chip genre/tags: bg brand-tint nyaris tak terlihat di dark → border tipis (light: transparent, tak berubah) */
body.nightmode-on .dn-chip,
[data-theme="dark"] .dn-chip { border-color: var(--dn-brand-tint-2); }
/* tombol link tetap teks putih di nightmode (kalahkan `body.nightmode-on main a`) */
body.nightmode-on a.but, [data-theme="dark"] a.but,
body.nightmode-on a.small-btn, [data-theme="dark"] a.small-btn { color: var(--dn-on-brand); }

/* ---- Input / form ---- */
.dn-input,
.dn-select,
.dn-textarea {
  display: block;
  width: 100%;
  font-family: var(--dn-font-body);
  font-size: var(--dn-fs-base);
  color: var(--dn-text);
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
  padding: 10px 12px;
  transition: border-color var(--dn-transition), box-shadow var(--dn-transition);
}
.dn-textarea { line-height: var(--dn-leading-base); resize: vertical; }
.dn-input::placeholder, .dn-textarea::placeholder { color: var(--dn-text-faint); }
.dn-input:focus,
.dn-select:focus,
.dn-textarea:focus {
  outline: none;
  border-color: var(--dn-brand);
  box-shadow: var(--dn-ring);
}

/* ---- Link aksen ---- */
.dn-link { color: var(--dn-brand-ink); text-decoration: none; }
.dn-link:hover { text-decoration: underline; }

/* =================================================== ADOPSI KELAS LAMA
 * Migrasi inline -> external (Fase 2): definisi dipindah ke sini dari blok
 * <style amp-custom> tiap header. Properti LAYOUT dipertahankan apa adanya,
 * APPEARANCE dimodernkan via token (radius/shadow/border/surface, dark-aware).
 * Varian (body.style-*, body.nightmode-on, .box.car, .rank-box) tetap inline. */

/* ---- Desktop top nav (post-de-AMP: amp-sidebar `toolbar` mekanisme dihapus,
 *      jadi <nav><ul.navbar-nav> dirender langsung — paksa horizontal tanpa bullet) ---- */
#toolbar nav { display: inline-block; }
#toolbar nav > ul { list-style: none; margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
#toolbar nav > ul > li { list-style: none; display: inline-block; margin: 0; }
.amp-sidebar-toolbar-target-hidden { display: block; }

/* ---- Header bar global ---- */
header {
  position: fixed; top: 0; z-index: 25;
  width: 100%; height: auto; padding: 18px 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--dn-brand);
  color: var(--dn-on-brand);
  box-shadow: var(--dn-shadow-sm);
  /* auto-hide saat scroll bawah (pengganti amp-fx float-in-top, JS di footer) */
  transition: transform .35s ease;
  will-change: transform;
}
header.nid-nav-hidden { transform: translateY(-100%); }
/* Search (dropdown + overlay) ikut geser ke atas saat header sembunyi — TAPI isi tetap
 * (transform, bukan display:none) → muncul lagi saat scroll atas selagi teks belum dihapus. */
#as-box, #search { transition: transform .35s ease; }
html.nid-nav-up #as-box, html.nid-nav-up #search { transform: translateY(-130%); }
@media (prefers-reduced-motion: reduce) { header, #as-box, #search { transition: none; } }

/* Overlay search (mobile): buka/tutup beranimasi — slide turun + fade via .nid-open (JS footer). */
#search { opacity: 0; transform: translateY(-100%); transition: opacity .26s ease, transform .3s cubic-bezier(.22,.61,.36,1); will-change: transform, opacity; }
#search.nid-open { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { #search { transition: none; } }

/* ---- Logo ---- */
a.logo {
  display: block; float: left; width: 135px;
  margin-left: 10px; padding-right: 15px;
  font-size: 20px; font-weight: 700;
  color: var(--dn-on-brand);
  border-right: 1px solid rgba(255, 255, 255, .35);
}

/* ---- Search field (di header bar brand) — underline minimalis (desain lama) ---- */
.s-input {
  display: block; position: absolute; top: 50%;
  width: 200px; margin-left: 30px;
  line-height: 30px; font-size: 15px;
  color: var(--dn-on-brand);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  transition: width .22s ease, border-bottom-color .22s ease;
}
.s-input::placeholder { color: rgba(255, 255, 255, .8); }
/* fokus: kotak + garis melebar sedikit, balik ke 200px saat blur */
.s-input:focus { outline: none; width: 240px; border-bottom-color: #fff; }
/* tombol silang (clear) bawaan input[type=search] — kursor seperti link */
.s-input::-webkit-search-cancel-button { cursor: pointer; }
.s-input::-webkit-search-decoration { cursor: pointer; }

/* ---- Search dropdown ---- */
.autosuggest-box {
  width: 100%; max-width: 640px; height: auto;
  padding: 8px 12px 12px; box-sizing: border-box;
  background: var(--dn-surface);
  border-radius: var(--dn-radius-card);
  box-shadow: var(--dn-shadow-pop);
}

/* ---- Hasil pencarian (autosuggest) — baris bersih, hover beda light/dark ---- */
#as-box .autosuggest-box { background: var(--dn-surface); }
[data-theme="dark"] #as-box .autosuggest-box { background: var(--dn-card); }
.autosuggest-box .sug-list { clear: none; margin: 0; }
.autosuggest-box .sug-list a {
  display: flex; align-items: center; gap: 12px;
  width: 100%; height: auto; min-height: 60px;
  padding: 8px 10px; box-sizing: border-box;
  color: var(--dn-text-muted);
  border-radius: var(--dn-radius-control);
  transition: background .15s ease, color .15s ease;
}
.autosuggest-box .sug-tmb { float: none; padding: 0; flex: 0 0 auto; }
.autosuggest-box .sug-tmb img {
  width: 40px; height: 54px; object-fit: cover; display: block;
  border-radius: 6px; background: var(--dn-surface-2);
}
.autosuggest-box .sug-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.autosuggest-box .sug-title {
  display: block; height: auto; font-size: 15px; font-weight: 700;
  color: var(--dn-text); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.autosuggest-box .sug-sub {
  display: block; font-size: 12.5px; color: var(--dn-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* hover MENGIKUTI pengaturan Customizer "Bg kartu saat hover" (--dn-hover-card, per-mode) */
.autosuggest-box .sug-list a:hover { background: var(--dn-hover-card); }
.autosuggest-box .sug-list a:hover .sug-title { color: var(--dn-brand); }
[data-theme="dark"] .autosuggest-box .sug-list a:hover .sug-title { color: var(--dn-text); }

/* Hasil banyak → bisa di-scroll (batasi tinggi, scrollbar tipis) */
.autosuggest-box {
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dn-border) transparent;
}
.autosuggest-box::-webkit-scrollbar { width: 8px; }
.autosuggest-box::-webkit-scrollbar-thumb { background: var(--dn-border); border-radius: 8px; }
.autosuggest-box::-webkit-scrollbar-track { background: transparent; }

/* ---- Dropdown autosuggest ditambatkan di bawah input aktif (JS set left/top/width) ---- */
#as-box.nid-anchored {
  top: auto; left: 0; width: auto; max-width: none;
  padding: 0; z-index: 60;
}
#as-box.nid-anchored .wrap { padding: 0; margin: 0; max-width: none; width: 100%; }
#as-box.nid-anchored .autosuggest-box { max-width: none; width: 100%; max-height: 70vh; }

/* ---- Loading state saat mencari ---- */
.sug-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 14px; font-size: 13.5px; color: var(--dn-text-muted);
}
.sug-spin {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid var(--dn-border); border-top-color: var(--dn-brand);
  animation: nid-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .sug-spin { animation-duration: 1.4s; } }

/* ---- Nav buttons (toolbar + .nav span) — pill putih solid di header brand ----
 * Item ter-pusat vertikal (vertical-align:middle, TANPA margin negatif) supaya
 * pill tak terpotong header (overflow:hidden). Hover/aktif = pill putih + teks brand. */
#toolbar a, .nav span {
  display: inline-block;
  vertical-align: middle;
  margin: 0 3px;
  padding: 6px 14px;
  line-height: 18px;
  border-radius: 999px;
  color: #fff;
  transition: background var(--dn-transition), color var(--dn-transition);
}
#toolbar a:hover, #toolbar a:focus-visible, .nav span:hover, .nav span:focus-visible {
  background: var(--dn-hover-nav);
  color: var(--dn-brand);
}
/* Halaman saat ini (current page) = penanda halus, BUKAN kotak putih seperti hover
 * (header selalu brand → pill putih-transparan + teks putih konsisten light & dark). */
#toolbar .current-menu-item > a, #toolbar .current_page_item > a {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-weight: 600;
}
#toolbar .current-menu-item > a:hover, #toolbar .current-menu-item > a:focus-visible,
#toolbar .current_page_item > a:hover, #toolbar .current_page_item > a:focus-visible {
  background: var(--dn-hover-nav);
  color: var(--dn-brand);
}

/* ---- Drawer menu mobile (amp-sidebar -> div#sidebar.nid-drawer) ----
 * De-AMP: tanpa amp.js, positioning+slide+overlay disediakan CSS ini sendiri
 * (dulu dari runtime amp-sidebar). Toggle .open via JS (footer). */
.nid-drawer {
  position: fixed; top: 0; left: 0; height: 100vh; max-height: 100vh;
  width: 340px; max-width: 86vw; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: var(--dn-surface); color: var(--dn-text);
  border-right: 1px solid var(--dn-border);
  box-shadow: var(--dn-shadow-pop);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  z-index: 2147483647;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), visibility .28s;
}
.nid-drawer.open { transform: none; visibility: visible; }
.nid-drawer a { color: var(--dn-text); text-decoration: none; }

/* Close — tombol bulat ghost */
.nid-drawer .close-button {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--dn-surface-2); border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill); color: var(--dn-text-muted);
  cursor: pointer; transition: var(--dn-transition);
}
.nid-drawer .close-button:hover { color: var(--dn-brand-ink); background: var(--dn-brand-tint); border-color: var(--dn-brand); }
.nid-drawer .close-button::before { content: "\00d7"; font-family: var(--dn-font-head); font-size: var(--dn-fs-h4); line-height: 1; }

/* Header akun */
.nid-drawer .sd-us {
  display: flex; flex-direction: column; gap: var(--dn-space-md);
  padding: var(--dn-space-xl) var(--dn-space-lg) var(--dn-space-lg);
  border-bottom: 1px solid var(--dn-border);
}
.nid-drawer .sd-head { display: flex; align-items: center; gap: var(--dn-space-md); min-width: 0; }
.nid-drawer .ava {
  position: relative; flex: none; width: 60px; height: 60px;
  border-radius: var(--dn-radius-pill); overflow: hidden;
  background: var(--dn-surface-2);
  border: 2px solid var(--dn-surface); box-shadow: 0 0 0 2px var(--dn-brand);
}
.nid-drawer .ava img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.nid-drawer .ava #i-hd, .nid-drawer .ava .mbuh {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: var(--dn-text-faint); color: var(--dn-text-faint);
}
.nid-drawer #camera {
  position: absolute; top: auto; left: auto; right: -3px; bottom: -3px; z-index: 2;
  width: 24px; height: 24px; border-radius: var(--dn-radius-pill);
  background: var(--dn-brand); border: 2px solid var(--dn-surface);
}
.nid-drawer #camera::before {
  content: ""; position: absolute; inset: 0;
  background: var(--dn-on-brand);
  -webkit-mask: url(../images/camera.svg) center / 13px no-repeat;
          mask: url(../images/camera.svg) center / 13px no-repeat;
}
.nid-drawer .sd-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nid-drawer .sd-name {
  font-family: var(--dn-font-head); font-size: var(--dn-fs-h4); font-weight: var(--dn-fw-semibold);
  color: var(--dn-text); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nid-drawer .sd-sub { font-family: var(--dn-font-body); font-size: var(--dn-fs-xs); color: var(--dn-text-faint); }

/* Aksi akun (Logout / Login+Register). border/padding global `.cp` (site-chrome)
   dimatikan — dobel garis dgn border-bottom .sd-us. */
.nid-drawer .cp { display: flex; flex-wrap: wrap; gap: var(--dn-space-sm); border-bottom: 0; padding: 0; }
.nid-drawer .sd-logout, .nid-drawer .sd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 18px; border-radius: var(--dn-radius-pill);
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-semibold);
  border: 1px solid var(--dn-border); background: var(--dn-surface-2); color: var(--dn-text-muted);
  transition: var(--dn-transition); cursor: pointer;
}
.nid-drawer .sd-logout:hover { color: var(--dn-danger); border-color: var(--dn-danger); background: transparent; }
.nid-drawer .sd-btn { flex: 1 1 auto; }
.nid-drawer .sd-btn:hover { color: var(--dn-brand-ink); border-color: var(--dn-brand); background: var(--dn-brand-tint); }
.nid-drawer .sd-btn--primary { color: var(--dn-on-brand); background: var(--dn-brand); border-color: var(--dn-brand); }
.nid-drawer .sd-btn--primary:hover { color: var(--dn-on-brand); background: var(--dn-brand-strong, var(--dn-brand)); border-color: var(--dn-brand-strong, var(--dn-brand)); }

/* Navigasi */
.nid-drawer nav { padding: var(--dn-space-lg) var(--dn-space-md) var(--dn-space-sm); }
.nid-drawer nav::before {
  content: "Menu"; display: block; padding: 0 12px var(--dn-space-sm);
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-semibold);
  letter-spacing: var(--dn-tracking-wide); text-transform: uppercase; color: var(--dn-text-faint);
}
.nid-drawer ul { padding-left: 0; margin: 0; list-style: none; }
.nid-drawer ul li { list-style: none; margin: 0; }
.nid-drawer nav ul { border-bottom: 0; }
.nid-drawer ul li a {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; box-sizing: border-box;
  margin: 2px 0; padding: 11px 12px 11px 14px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-base); font-weight: var(--dn-fw-medium);
  color: var(--dn-text); text-align: left;
  border-radius: var(--dn-radius-control);
  transition: background var(--dn-transition), color var(--dn-transition);
}
.nid-drawer ul li a::before {
  content: ""; position: absolute; left: 2px; top: 50%;
  transform: translateY(-50%) scaleY(0); transform-origin: center;
  width: 3px; height: 58%; border-radius: var(--dn-radius-pill);
  background: var(--dn-brand); transition: transform var(--dn-transition);
}
.nid-drawer ul li a:hover { background: var(--dn-brand-tint); color: var(--dn-brand-ink); }
.nid-drawer ul li a:hover::before { transform: translateY(-50%) scaleY(1); }
.nid-drawer .current-menu-item > a, .nid-drawer .current_page_item > a {
  background: var(--dn-brand-tint); color: var(--dn-brand-ink);
}
.nid-drawer .current-menu-item > a::before, .nid-drawer .current_page_item > a::before { transform: translateY(-50%) scaleY(1); }
.nid-drawer ul svg { flex: none; width: 22px; height: 22px; fill: currentColor; }
.nid-drawer ul svg.nl { width: 26px; height: 26px; margin-left: -2px; }

/* Footer brand (signature) — wordmark serif */
.nid-drawer .sd-foot {
  margin-top: auto; padding: var(--dn-space-lg);
  border-top: 1px solid var(--dn-border);
}
.nid-drawer .sd-foot b {
  font-family: var(--dn-font-display); font-weight: var(--dn-fw-semibold);
  font-size: var(--dn-fs-h4); color: var(--dn-text); letter-spacing: var(--dn-tracking-tight);
}
.nid-drawer .sd-foot span {
  display: block; margin-top: 2px;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-xs); color: var(--dn-text-faint);
}

#nid-drawer-backdrop { position: fixed; inset: 0; background: rgba(16,24,40,.5); z-index: 2147483646; opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s; }
#nid-drawer-backdrop.open { opacity: 1; visibility: visible; }

/* ---- Footer ---- */
/* Footer minimalis — deret link + copyright, center. Modern via token. */
footer.site-footer {
  margin-top: var(--dn-space-xl);
  padding: var(--dn-space-xl) 0;
  background: var(--dn-surface-2);
  color: var(--dn-text-muted);
  border-top: 1px solid var(--dn-border);
  text-align: center;
}
.site-footer .container { max-width: var(--dn-page-w); margin: 0 auto; padding-left: var(--dn-space-lg); padding-right: var(--dn-space-lg); box-sizing: border-box; }
.footer-menu {
  list-style: none; margin: 0 0 var(--dn-space-md); padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--dn-space-sm) var(--dn-space-lg);
}
.footer-menu li { margin: 0; display: inline-flex; align-items: center; }
.footer-menu a {
  display: inline-flex; align-items: center; line-height: 1.4;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-medium);
  color: var(--dn-text-muted); text-decoration: none;
  transition: color var(--dn-transition);
}
.footer-menu a:hover { color: var(--dn-brand-ink); }
/* Buang semua ikon menu (svg/img/<i>/material-icons) → teks rata, tinggi seragam */
.footer-menu a svg, .footer-menu a img, .footer-menu a i, .footer-menu a .material-icons { display: none; }
.copyright {
  margin: 0; padding: 0; border: 0; line-height: 1.5;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-xs); color: var(--dn-text-faint);
}

/* Card utama (panel konten) */
.m-card {
  position: relative;
  width: 100%;
  margin: 24px 0;
  padding: var(--dn-space-lg);
  box-sizing: border-box;
  color: var(--dn-text);
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card);
  box-shadow: var(--dn-shadow-card);
}

/* Tombol aksi utama (.but) — appearance disatukan via token, layout inline-block */
a.but, span.but {
  display: inline-block;
  padding: 9px 16px;
  margin: 4px;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--dn-btn-radius);
  background: var(--dn-btn-bg);
  color: var(--dn-btn-text);
  box-shadow: var(--dn-shadow-sm);
  transition: background var(--dn-transition), box-shadow var(--dn-transition), transform var(--dn-transition);
}
a.but:hover { background: var(--dn-btn-bg-hover); box-shadow: var(--dn-shadow-hover); transform: translateY(-1px); }
span.but { background: var(--dn-surface-2); color: var(--dn-text-muted); box-shadow: none; cursor: default; }

/* Input form auth (Theme My Login .tml-field) — Modern Soft */
.tml .tml-field {
  width: 100%;
  max-width: 250px;
  height: 38px;
  padding: 9px 12px;
  font-family: var(--dn-font-body);
  font-size: var(--dn-fs-base);
  color: var(--dn-text);
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
  box-sizing: border-box;
  transition: border-color var(--dn-transition), box-shadow var(--dn-transition);
}
.tml .tml-field:focus { outline: none; border-color: var(--dn-brand); box-shadow: var(--dn-ring); }

/* Tombol submit auth (.tml-button) */
input.tml-button, button.tml-button {
  width: 100%;
  margin: 10px 0 0;
  padding: 11px 16px;
  font-family: var(--dn-font-head);
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: var(--dn-btn-radius);
  background: var(--dn-btn-bg);
  color: var(--dn-btn-text);
  transition: background var(--dn-transition), box-shadow var(--dn-transition), transform var(--dn-transition);
}
input.tml-button:hover, button.tml-button:hover {
  background: var(--dn-btn-bg-hover);
  box-shadow: var(--dn-shadow-hover);
  transform: translateY(-1px);
}

/* Tombol CTA kecil (sidebar/widget/komentar) */
#first-btn, #view-all, a.small-btn {
  display: block;
  width: 100px;
  margin: 0 auto;
  padding: 8px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: var(--dn-btn-radius);
  background: var(--dn-btn-bg);
  color: var(--dn-btn-text);
  transition: background var(--dn-transition), box-shadow var(--dn-transition), transform var(--dn-transition);
}
#view-all { margin: 0 auto 15px; }
#first-btn:hover, #view-all:hover, a.small-btn:hover {
  background: var(--dn-btn-bg-hover);
  box-shadow: var(--dn-shadow-hover);
  transform: translateY(-1px);
}

/* Kartu grid novel (listing/widget) — layout dipertahankan, tampilan Modern Soft */
.box {
  position: relative;
  display: block;
  float: left;
  box-sizing: border-box;
  width: calc(50% - 8px);
  max-width: 174px;
  height: 268px;
  margin: 4px;
  padding: 10px;
  text-align: center;
  color: var(--dn-text);
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);     /* hairline seragam dgn .dn-card */
  border-radius: var(--dn-radius-card);
  box-shadow: none;                        /* flat saat diam (match .dn-card) */
  transition: transform var(--dn-transition), box-shadow var(--dn-transition),
              border-color var(--dn-transition), background var(--dn-transition);
}
/* Hover kartu = IDENTIK dgn .dn-card (lift -2px + shadow-hover + tepi brand). Tanpa glow.
   bg hover = --dn-hover-card (themeable Customizer, per-mode terang/gelap) → di dark
   TAK jadi putih (baca tetap jelas), + pengaturan "Bg kartu saat hover" berlaku. */
.box:hover {
  transform: translateY(-2px);
  border-color: var(--dn-brand);
  box-shadow: var(--dn-shadow-hover);
  background: var(--dn-hover-card);
}

/* =================================================== FASE 3 — DARK MODE (site-wide)
 * Toggle global set <html data-theme="dark"> (persist localStorage 'dn-theme').
 * Token --dn-* sudah flip → header/footer/card/box/btn/input/badge ikut gelap.
 * Blok ini menambal elemen non-token yang masih hardcoded terang di
 * home/novel/listing/auth. Reader (chapters) TIDAK pakai ini (sistem nightmode
 * sendiri). Spesifisitas [data-theme=dark] .x (0,2,x) > inline kelas (0,1,x). */
[data-theme="dark"] body { background: var(--dn-bg); color: var(--dn-text); }
/* header tetap pakai var(--dn-brand) di dark juga → brand selalu terlihat & themeable */
/* Header gelap "Deep Graphite" (2026-07-04): panel + hairline, bukan teal menyala.
   !important perlu utk mengalahkan `header{background:var(--dn-brand)!important}` style.css. */
body.nightmode-on header,
[data-theme="dark"] header {
  background: var(--dn-surface) !important;
  box-shadow: 0 1px 0 var(--dn-border-d), var(--dn-shadow-sm);
}
[data-theme="dark"] #search { background: var(--dn-surface-2); }
[data-theme="dark"] input.sf-alt { background: var(--dn-surface-2); color: var(--dn-text); border-color: var(--dn-border); }
[data-theme="dark"] .m-card, [data-theme="dark"] .box { color: var(--dn-text); }
[data-theme="dark"] .m-card { background: var(--dn-card); border: 1px solid var(--dn-border-d); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--dn-text); }
[data-theme="dark"] .post-content { color: var(--dn-text); }
[data-theme="dark"] .main-title, [data-theme="dark"] .crumbs { border-color: var(--dn-border); }

/* Breadcrumb kanonik (di luar .nv-hero: chapter, all-chapter, dst) — sejajar
   redesign halaman novel: separator .crumbs__sep, item aktif .crumbs__cur,
   token-only, tanpa garis bawah. .nv-hero .crumbs (novel) tetap menang. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .28em .42em;
  margin: 0 0 var(--dn-space-md); padding: 0; border: 0;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); color: var(--dn-text-faint);
}
.crumbs__sep { flex: none; color: var(--dn-text-faint); }
.crumbs__cur { color: var(--dn-text-faint); }
[data-theme="dark"] .donations { background: var(--dn-brand-tint); }
/* teks sekunder (judul kartu/meta/widget) */
[data-theme="dark"] .caption em,
[data-theme="dark"] a.genre,
[data-theme="dark"] a.title,
[data-theme="dark"] a.view-all,
[data-theme="dark"] .update-box p a,
[data-theme="dark"] .update-box p b,
[data-theme="dark"] .update-box span small,
[data-theme="dark"] .link-box li,
[data-theme="dark"] span.right { color: var(--dn-text-muted); }
[data-theme="dark"] .link-box li { border-bottom-color: var(--dn-border); }
/* judul & meta kartu listing (carousel/grid/ranking/update) — biang teks gelap */
[data-theme="dark"] a.list-title,
[data-theme="dark"] strong.list-title { color: var(--dn-text); }
[data-theme="dark"] .caption,
[data-theme="dark"] span.views,
[data-theme="dark"] .update-box,
[data-theme="dark"] .update-box small,
[data-theme="dark"] .update-box span small { color: var(--dn-text-muted); }
[data-theme="dark"] .update-box p a { color: var(--dn-text); }
/* elemen lain di atas surface gelap */
[data-theme="dark"] .copyright a { color: var(--dn-text-muted); }
[data-theme="dark"] ul.chapter-list li a,
[data-theme="dark"] .read-box a { color: var(--dn-text); }
[data-theme="dark"] .read-box small,
[data-theme="dark"] .req { color: var(--dn-text-muted); }
[data-theme="dark"] amp-selector[role="tablist"].tabs-with-flex [role="tab"],
[data-theme="dark"] amp-selector[role="tablist"] [role="tab"] { color: var(--dn-text-muted); }
[data-theme="dark"] span.but { color: var(--dn-text-muted); }
/* hasil autosuggest pencarian (kotak surface gelap) */
[data-theme="dark"] .sug-list a { color: var(--dn-text-muted); }
[data-theme="dark"] .sug-list a strong,
[data-theme="dark"] .sug-list a span { color: var(--dn-text); }
/* halaman novel — panel & teks khusus (bg terang hardcoded) */
[data-theme="dark"] .info-wrap,
[data-theme="dark"] tr.odd, [data-theme="dark"] li.odd,
[data-theme="dark"] p.odd, [data-theme="dark"] a.odd { background: var(--dn-surface-2); }
[data-theme="dark"] .rev-wrap { background: var(--dn-surface-2); border-color: var(--dn-border); }
[data-theme="dark"] .rev-wrap strong { color: var(--dn-text); }
[data-theme="dark"] a.ch-link, [data-theme="dark"] div.ch-link,
[data-theme="dark"] #panelchapterlist p a { color: var(--dn-text); }
[data-theme="dark"] #panelchapterlist a:visited { color: var(--dn-text-faint); }
[data-theme="dark"] a.ch-link, [data-theme="dark"] div.ch-link,
[data-theme="dark"] .ch-list { border-color: var(--dn-border); }
[data-theme="dark"] .desc table tr { border-bottom-color: var(--dn-border); }
[data-theme="dark"] p.descr,
[data-theme="dark"] .comment-metadata a { color: var(--dn-text-muted); }
[data-theme="dark"] .warning,
[data-theme="dark"] #comments details { background: var(--dn-warn-tint); border-color: var(--dn-warn); }
/* dropdown bahasa */
[data-theme="dark"] #lang-list { background: var(--dn-surface); box-shadow: var(--dn-shadow-pop); }
[data-theme="dark"] #lang-list a, [data-theme="dark"] #lang-list strong { color: var(--dn-text); }

/* ---- Hover & state interaktif di dark (jangan jadi putih) ---- */
/* hover kartu widget (ranking/related/status/continue-reading semua pakai .box) */
/* kotak widget lebih terang dari m-card → kontras via background (bukan cyan) */
[data-theme="dark"] .box { background: var(--dn-surface-2); border: 1px solid var(--dn-border-d); }
[data-theme="dark"] .box:hover {
  border-color: var(--dn-brand);
  box-shadow: var(--dn-shadow-hover);
}
/* accordion daftar chapter (header section) */
[data-theme="dark"] amp-accordion section h2,
[data-theme="dark"] amp-accordion section h3 { background-color: var(--dn-surface-2); }
/* hover flag bahasa di header */
[data-theme="dark"] .nav span.lang-icon.en:hover { background-color: var(--dn-surface-2); }
/* placeholder shimmer → gradient gelap (bukan kilau putih) */
[data-theme="dark"] .plc {
  background: linear-gradient(90deg, var(--dn-surface) 8%, var(--dn-surface-3) 18%, var(--dn-surface) 33%);
  background-size: 800px 104px;
}

/* ---- Tombol toggle dark/light (di header brand) ---- */
.dn-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: 8px; padding: 0;
  border: 0; border-radius: var(--dn-radius-control);
  background: transparent; color: #fff; cursor: pointer;
  vertical-align: middle;
  transition: background var(--dn-transition);
}
.dn-theme-toggle:hover { background: rgba(255, 255, 255, .18); }
.dn-theme-toggle:focus-visible { outline: none; box-shadow: var(--dn-ring); }
.dn-theme-toggle svg { width: 20px; height: 20px; display: block; }
.dn-theme-toggle .dn-ico-sun { display: none; }
[data-theme="dark"] .dn-theme-toggle .dn-ico-moon { display: none; }
[data-theme="dark"] .dn-theme-toggle .dn-ico-sun { display: block; }
/* varian di bar mobile (.container-alt) — sejajar hamburger/s-alt */
.dn-theme-toggle--alt { float: right; margin: 2px 6px 0 0; }

/* =================================================== FASE 6 — DE-AMP (shallow)
 * amp-img -> <img loading="lazy">. amp-img default object-fit:cover; plain <img>
 * default fill (distorsi) -> set cover. Styling dipusatkan di sini (nginx-served,
 * tak kena opcache). Rule lama `amp-img.list-img` inline tetap (mati, tak match img). */
/* Pengganti perilaku KLIP amp-img: dulu <amp-img> jadi wadah overflow-hidden,
 * <img> di dalamnya yg zoom (terpotong rapi). Kini <img> = elemennya, jadi:
 *  - wadah link cover `a.list-a` yg meng-klip (overflow:hidden) + sudut membulat,
 *  - <img> mengisi lebar penuh + object-fit:cover (tak melar, tak keluar box),
 *  - hover-zoom dipasang via wadah → ter-klip (tak meluber keluar kartu).
 * UKURAN/float per-widget tetap dari rule asli (img.list-img di header.php). */
/* <img> isi penuh tapi TAK meluber keluar kartu — `max-width:100%` cukup, TANPA
 * mengubah lebar kartu (klip-wrapper dulu bikin read-box shrink-to-fit melebar →
 * 4 kartu jadi 3). Lebar/tinggi per-widget tetap dari rule asli. */
img.list-img {
  width: 100%;
  max-width: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
}
img.update-tmb { object-fit: cover; }
/* Ranking widget rank-box: thumb kecil kiri (48x64), bukan cover penuh. Dulu via
 * `.rank-box amp-img.list-img` — di header-novel/reader belum diretarget ke img →
 * cover jadi raksasa. Pusatkan di sini (live, kena semua header). */
.rank-box img.list-img { width: 48px; height: 64px; float: left; margin-right: 10px; max-width: none; object-fit: cover; }
/* Animasi load/ganti-tab ranking. Dulu Week/Month punya skeleton shimmer (amp-list);
 * kini server-render = instan, jadi beri fade-in saat panel tab tampil. Rule sibling
 * [selected]+[role=tabpanel] re-match tiap ganti tab → animasi main ulang. Properti
 * `animation` saja (display:block tetap dari inline header). */
/* Chapter list TOC: amp-accordion -> native <details>. Tiru gaya h3 lama + chevron CSS. */
.ch-acc .ch-acc-sec { border-bottom: 1px solid var(--dn-border); }
.ch-acc summary.ch-acc-h { font-size: 15px; padding: 10px 34px 10px 15px; font-weight: 700; cursor: pointer; background: var(--dn-surface-2); border-radius: var(--dn-radius-sm); list-style: none; position: relative; }
.ch-acc summary.ch-acc-h::-webkit-details-marker { display: none; }
.ch-acc summary.ch-acc-h::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .55; transition: transform .2s ease; }
.ch-acc .ch-acc-sec[open] > summary.ch-acc-h::after { transform: translateY(-30%) rotate(-135deg); }

/* De-AMP tab layout (novel tabs + widget ranking Day/Week/Month).
 * amp-selector→<div class="tabs-with-flex" role=tablist>. Rule lama di amp-custom
 * pakai selektor `amp-selector[role=tablist].tabs-with-flex` → TAK match <div> →
 * panel tak tersembunyi (semua tampil/tumpuk). Di sini base bare `.tabs-with-flex`
 * (match div): flex + sembunyikan panel non-aktif, tampilkan yg [selected]. JS footer
 * (batch A-4) set atribut [selected] saat klik. */
.tabs-with-flex { display: flex; flex-wrap: wrap; }
.tabs-with-flex [role=tab] {
  flex: 1 1 0; min-width: 0; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 8px 4px; cursor: pointer;
  color: var(--dn-text-muted); border-bottom: 1px solid var(--dn-border); min-height: 40px;
  font-size: 16px; box-sizing: border-box;
}
.tabs-with-flex [role=tab] svg { flex: none; }
.tabs-with-flex [role=tab] .material-icons { vertical-align: 0; }
/* Tab aktif = "ink notch": tint lembut + ink-bar brand tebal di bawah + segitiga
 * penunjuk ke panel (penghubung tab→konten = encode struktur). Teks brand ber-glow. */
.tabs-with-flex [role=tab][selected] {
  position: relative; z-index: 1;
  outline: none; color: var(--dn-brand); font-weight: 700;
  background: var(--dn-brand-tint);
  border-radius: 8px 8px 0 0;
  border-bottom: 3px solid var(--dn-brand);
  box-shadow: 0 4px 12px -4px var(--dn-brand-glow);
  text-shadow: 0 0 8px var(--dn-brand-glow);
}
.tabs-with-flex [role=tab][selected]::after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--dn-brand);          /* segitiga menunjuk panel */
  filter: drop-shadow(0 2px 4px var(--dn-brand-glow));
}
.tabs-with-flex [role=tabpanel] { display: none; width: 100%; order: 1; padding-top: 3px; }
.tabs-with-flex [role=tab][selected] + [role=tabpanel] { display: block; }

.tabs-with-flex [role=tab][selected] + [role=tabpanel] { animation: nidRankIn .35s ease both; }
@keyframes nidRankIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tabs-with-flex [role=tab][selected] + [role=tabpanel] { animation: none; }
}
/* Tab lebih ringkas di HP → 3 tab (Info/Chapters/Reviews) muat tanpa meluber. */
@media (max-width: 560px) {
  .tabs-with-flex [role=tab] { font-size: 13px; padding: 7px 2px; gap: 4px; min-height: 34px; }
  .tabs-with-flex [role=tab] .material-icons { font-size: 17px; }
  .tabs-with-flex [role=tab] svg { width: 15px; height: 15px; }
  .tabs-with-flex [role=tab][selected]::after { bottom: -7px; border-left-width: 6px; border-right-width: 6px; border-top-width: 6px; }
}
/* Novel page (loader-novel): cover utama + avatar review (amp-img -> img). */
img.main-tmb { object-fit: cover; }
img.rev-img { width: 32px; height: 32px; object-fit: cover; display: block; }

/* Tombol like (review & komentar) — primitive global, AJAX nid_comment_like. */
/* Like/report/view pills → assets/css/dn-thread.css (.nid-like/.nid-report/.nid-viewthread). */
/* Logo header (header-lang/header-login): amp-img -> img. Rule lama amp-img.img-logo mati. */
img.img-logo { display: inline-block; width: 28px; height: 28px; margin-right: 4px; margin-bottom: -6px; object-fit: contain; }
/* Avatar komentar (better_commets): amp-img.avatar -> img.avatar. */
img.avatar { width: 32px; height: 32px; border-radius: 16px; display: block; float: left; margin-right: 10px; object-fit: cover; }

/* KLIP cover + hover-zoom utk kartu novel grid (semua .box KECUALI rank-box &
 * read-box). a.list-a bungkus cover-saja → aman jadi klip. Zoom saat KARTU
 * di-hover (match .dn-card). rank-box dikecualikan: thumb-nya float → anchor
 * block+overflow:hidden akan kolaps 0-tinggi & menyembunyikan thumb. */
.box:not(.rank-box):not(.read-box) a.list-a {
  display: block;
  overflow: hidden;
  border-radius: var(--dn-radius-sm);
}
.box:not(.rank-box):not(.read-box):hover img.list-img { transform: scale(1.06); }
/* cover carousel sedikit lebih pendek (spesifisitas .amp-carousel-slide menang atas
 * header 184px) → caption judul+genre+tanggal tak kepotong di kartu 284px. */
.box.car.amp-carousel-slide img.list-img { height: 168px; }
/* slide carousel = inline-block tanpa vertical-align → default baseline → kartu
 * view-more & kartu cover beda baseline → atasnya tak sejajar. Paksa rata-atas. */
.box.car.amp-carousel-slide { vertical-align: top; }

/* De-AMP carousel: <amp-carousel>→<div class="carousel nid-carousel"> + track
 * <div class="nid-carousel-track"> (dulu `.i-amphtml-scrollable-carousel-container`,
 * dirombak setelah sweep AMP). Scroller native = overflow-x + white-space:nowrap;
 * slide = inline-block. Wrapper relative (anchor tombol absolute). JS scroll di footer.php. */
.nid-carousel { position: relative; }
.nid-carousel .amp-carousel-button {
  position: absolute; top: 38%; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--dn-surface); border: 1px solid var(--dn-border);
  box-shadow: var(--dn-shadow-card); cursor: pointer;
  opacity: 1; visibility: visible;
  transition: background var(--dn-transition), border-color var(--dn-transition), opacity var(--dn-transition);
}
.nid-carousel .amp-carousel-button::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--dn-text); border-bottom: 2px solid var(--dn-text);
}
.nid-carousel .amp-carousel-button-prev { left: -8px; }
.nid-carousel .amp-carousel-button-next { right: -8px; }
.nid-carousel .amp-carousel-button-prev::before { transform: translate(-35%, -50%) rotate(135deg); }
.nid-carousel .amp-carousel-button-next::before { transform: translate(-65%, -50%) rotate(-45deg); }
.nid-carousel .amp-carousel-button:hover { background: var(--dn-brand); border-color: var(--dn-brand); }
.nid-carousel .amp-carousel-button:hover::before { border-color: #fff; }
.nid-carousel .amp-carousel-button.amp-disabled { opacity: 0; visibility: hidden; pointer-events: none; }
.nid-carousel-track {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.nid-carousel-track::-webkit-scrollbar { display: none; }
.nid-carousel-track > .box.car { display: inline-block; vertical-align: top; white-space: normal; }

/* Grid widget plain .box (Recommendation dll): float bikin baris timpang (tinggi
 * kartu beda → staircase) + last-row tak center. Jadikan m-card-nya flex, KOSCOPED
 * via :has ke m-card yg punya .box BIASA sbg anak LANGSUNG. Yang TAK kena: ranking
 * (rank-box di dalam amp-selector, bukan anak langsung), carousel (.box.car di dalam
 * amp-carousel), Continue Reading (.box.read-box di dalam .post-content), & halaman
 * novel (m-card tanpa .box anak langsung). */
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
}
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .main-title { flex: 0 0 100%; }
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .clear { display: none; }
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > p,
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > center { flex: 0 0 100%; margin: 8px 0 0; }
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .box {
  flex: 0 0 150px;              /* grow:0 → kartu baris terakhir TAK melar → semua seragam */
  max-width: calc(50% - 5px);  /* jaga min 2 kolom di layar sempit */
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  float: none;
}
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .box img.list-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
/* Judul, genre rapat ke atas; rating dipin ke DASAR kartu → rating antar kartu
   satu baris selalu sejajar tanpa memaksa ruang kosong di bawah judul 1-baris.
   .box = flex kolom, .caption isi tinggi sisa, .nl-crate margin-top:auto. */
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .box {
  display: flex; flex-direction: column;
}
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .box .caption {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .box .list-title {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4;
}
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .box .nl-crate {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px;
}
/* Badge status/ch overlay NEMPEL dasar cover (pola .dn-card) — label kini di
   dalam anchor cover; matikan margin-hack legacy (.label{margin:-30px auto 36px}). */
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .box a.list-a {
  position: relative; display: block;
}
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .box a.list-a img.list-img {
  margin: 0; display: block;
}
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .box .label {
  position: absolute; left: 6px; right: 6px; bottom: 6px; top: auto;
  width: auto; max-width: none; margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
}
/* pill status/ch legacy diposisikan absolute (top:6px) relatif .label lama —
   di overlay baru anak harus ikut aliran flex .label */
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .box .label .status,
.m-card:has(> .box:not(.rank-box):not(.car):not(.read-box):not(.wide)) > .box .label .ch {
  position: static;
}

/* Continue Reading (.box.read-box): paksa 4 kolom (desktop). Aturan asli
 * `.read-box{width:calc(50%-8px)}` + cap `.box{max-width:174px}` tak hasilkan 4/baris
 * konsisten. Spesifisitas .box.read-box (0,3,0) menang. Mobile → 2 kolom. */
.box.read-box { width: calc(25% - 8px); max-width: none; }
@media (max-width: 680px) {
  .box.read-box { width: calc(50% - 8px); }
}

/* tombol kecil (See more / Open My Library) — lebar ikut teks, 1 baris. display:table
 * + margin auto = tetap center, tak melar 100%. KECUALIKAN `.recent-novels` (tombol
 * View more di dalam kartu carousel view-more → biar tetap ukuran asli, tak membesar). */
a.small-btn:not(.recent-novels) {
  display: table;
  width: auto;
  min-width: 100px;
  padding: 8px 16px;
  white-space: nowrap;
}

/* kartu "View more" carousel — dark-aware (dulu #eee, menyilaukan di mode gelap) */
[data-theme="dark"] .box.car.view-more,
body.nightmode-on .box.car.view-more { background: var(--dn-surface-2); border-color: var(--dn-border); }

/* Recent Updates: garis pemisah antar novel jangan menyala (#eaeaea) di mode gelap */
[data-theme="dark"] .update-box,
body.nightmode-on .update-box { border-bottom-color: var(--dn-border); }

/* tombol "Load more" (#first-btn / #view-all) — 1 baris, lebar ikut teks (id menang
 * atas base width:100px; margin:0 auto base + display:table = tetap center). */
#first-btn, #view-all {
  display: table;
  width: auto;
  min-width: 100px;
  padding-left: 16px;
  padding-right: 16px;
  white-space: nowrap;
}

/* =================================================== A11Y / MOTION */
@media (prefers-reduced-motion: reduce) {
  .dn-btn, .dn-card--hover, .dn-chip, .dn-input, .dn-select, .dn-textarea, .box {
    transition: none;
  }
  .dn-btn--primary:hover, .dn-card--hover:hover, .box:hover { transform: none; }
}

/* ============================================================
   RATING — ringkasan skor + form beri nilai  (tab Reviews novel)
   Scope #panelmtlstats / #ratingku → id menang atas style.css & inline.
   Lebar bar/meter tetap dari .w-XX (header inline). Themeable light/dark.
   ============================================================ */
#panelmtlstats {
  --dn-star:        #f5a623;
  --dn-star-2:      #ffce4d;
  --dn-star-empty:  rgba(120, 130, 145, .25);
}

/* --- Kartu ringkasan: rata-rata | distribusi --- */
#panelmtlstats .star-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  width: auto;
  max-width: none;              /* batalkan inline .star-container{max-width:512px} */
  margin: 6px 0 26px;
  padding: 20px 22px;
  background: var(--dn-surface-2);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card);
  box-shadow: var(--dn-shadow-sm);
}
#panelmtlstats .star-container .clear { display: none; }

/* Skor besar */
#panelmtlstats .star-avg {
  flex: 0 0 auto;
  width: 140px;                 /* batalkan inline width:120px + padding-top:32px */
  min-width: 116px;
  padding: 0 22px 0 0;
  float: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--dn-border);
  text-align: center;
}
#panelmtlstats .star-avg strong {
  display: block;
  font-family: var(--dn-font-head);
  font-weight: 800;
  font-size: 3.3rem;
  line-height: .92;
  letter-spacing: -.025em;
  color: var(--dn-text);
}
#panelmtlstats .star-avg .ratings { margin: 9px 0 5px; }
#panelmtlstats .star-avg small {
  color: var(--dn-text-muted);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* --- Bar distribusi 5..1 --- */
#panelmtlstats .star-bar {
  flex: 1 1 220px;
  width: auto;                  /* batalkan inline width:calc(100%-120px)+float */
  min-width: 200px;
  float: none;
}

/* Label "No rating" pada review tanpa skor */
#panelmtlstats .no-rating {
  font-style: italic;
  font-size: .82rem;
  color: var(--dn-text-faint);
}
/* Review text opsional: tandai "(optional)" + sembunyikan paragraf kosong */
#panelmtlstats .review-optional {
  font-weight: 400;
  font-size: .82rem;
  color: var(--dn-text-faint);
}
#panelmtlstats .rev-wrap p:empty { display: none; }
#panelmtlstats .star-bar .rate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 4px 0;
  line-height: 1;
}
#panelmtlstats .star-bar .rate-n {
  width: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--dn-text-muted);
}
#panelmtlstats .star-bar .rate-n::after {
  content: "\2605";          /* ★ */
  color: var(--dn-star);
  font-size: .72em;
  line-height: 1;
}
#panelmtlstats .star-bar .rate-track {
  flex: 1;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--dn-star-empty);
}
#panelmtlstats .star-bar .rate-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dn-star), var(--dn-star-2));
  box-shadow: 0 0 8px rgba(245, 166, 35, .35);
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

/* --- Heading di dalam tab --- */
#panelmtlstats h2 {
  font-family: var(--dn-font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--dn-text);
  margin: 24px 0 12px;
}
#panelmtlstats h2.center { text-align: center; margin-top: 6px; }

/* --- Form beri nilai --- */
#panelmtlstats #ratingku.rating-form {
  background: var(--dn-surface-2);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card);
  padding: 16px 20px 20px;
  margin: 0 0 22px;
}
/* Baris bintang: paksa 1 baris rapi (override font-size 3em + transform/negative
   margin dari inline plugin yang bikin glyph wrap & overlap). */
#panelmtlstats #review-form,
#panelmtlstats #review-form .mr-star-rating-select { text-align: center; }
#panelmtlstats #review-form fieldset.rating {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: auto;
  max-width: 100%;
  margin: 8px auto;
  padding: 0;
  font-size: 0;                 /* matikan inherit 3em + whitespace antar <i> */
  cursor: pointer;
}
#panelmtlstats #review-form fieldset.rating > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 0;
  position: static;
  top: auto;
  transform: none;
  font-size: 2rem;              /* ukuran bintang wajar (bukan 3em) */
  line-height: 1;
  font-style: normal;
  transition: color .12s ease, transform .12s ease;
}
#panelmtlstats #review-form fieldset.rating > i:hover { transform: scale(1.12); }
/* tombol minus (hapus rating) — disembunyikan; rating kosong = tak pilih bintang */
#panelmtlstats #review-form fieldset.rating > i.mr-minus,
#panelmtlstats #review-form fieldset.rating > i[id^="index-0-"] { display: none; }

/* Bintang dobel: <i class="lab fa">☆</i> me-render 2 glyph (FontAwesome + teks ☆).
   Solusi: gambar bintang sendiri lewat ::before, sembunyikan glyph teks bawaan. */
#panelmtlstats #review-form fieldset.rating > i.lab {
  font-family: "Segoe UI Symbol", "Apple Color Emoji", system-ui, sans-serif;
  font-size: 0;                       /* matikan glyph teks ☆ + lebar FontAwesome */
  color: var(--dn-text-faint);        /* warna bintang kosong */
  width: 2.7rem;
}
#panelmtlstats #review-form fieldset.rating > i.lab::before {
  content: "\2606";                   /* ☆ outline */
  font-size: 2.7rem;
  line-height: 1;
}
#panelmtlstats #review-form fieldset.rating > i.lab.mr-star-full::before,
#panelmtlstats #review-form fieldset.rating > i.lab.mr-star-hover::before,
#panelmtlstats #review-form fieldset.rating > i.lab.ratx::before {
  content: "\2605";                   /* ★ solid */
  position: static;                   /* batalkan .ratx{position:absolute} inline */
  color: var(--dn-star);
}

/* Blok review (textarea + tombol) — center selaras bintang */
#panelmtlstats #review { margin-top: 14px; text-align: center; }
#panelmtlstats #review .review-label { text-align: left; }
#panelmtlstats #review .review-text { text-align: left; }
#panelmtlstats .review-label {
  display: block;
  margin-bottom: 8px;
  font-size: .9rem;
  color: var(--dn-text);
}
#panelmtlstats .review-label strong { color: var(--dn-danger); }
#panelmtlstats .review-text {
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  resize: vertical;
  padding: 12px 14px;
  font: inherit;
  color: var(--dn-text);
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#panelmtlstats .review-text:focus {
  outline: none;
  border-color: var(--dn-brand);
  box-shadow: 0 0 0 3px var(--dn-brand-tint);
}
#panelmtlstats .review-text::placeholder { color: var(--dn-text-faint); }
#panelmtlstats .rev-submit {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border: 0;
  margin: 0;
  padding: 10px 22px;
  font: 600 .92rem/1 var(--dn-font-head);
  color: var(--dn-btn-text);
  background: var(--dn-btn-bg);
  border-radius: var(--dn-btn-radius);
  box-shadow: var(--dn-shadow-sm);
  transition: background .15s ease, transform .08s ease;
}
#panelmtlstats .rev-submit:hover { background: var(--dn-btn-bg-hover); }
#panelmtlstats .rev-submit:active { transform: translateY(1px); }
/* Cancel = tombol ghost senada tombol lain (bg putih + border), sejajar Submit.
   Selector ikut .nid-rev-actions (bukan #review yg tak ada di markup ini). */
#panelmtlstats .nid-rev-actions .cancel {
  cursor: pointer;
  margin: 0;
  box-sizing: border-box;
  padding: 10px 22px;
  font: 600 .92rem/1 var(--dn-font-head);
  color: var(--dn-text-muted);
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-btn-radius);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
#panelmtlstats .nid-rev-actions .cancel:hover { border-color: var(--dn-brand); color: var(--dn-brand-ink); text-decoration: none; }

/* Ajakan login */
#panelmtlstats .warning {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--dn-warn-tint);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
  color: var(--dn-text);
  font-size: .92rem;
}
#panelmtlstats .warning a { color: var(--dn-brand-ink); font-weight: 600; }

/* --- Dark: bintang kosong di form jangan hilang (template inline #333) --- */
[data-theme="dark"] #panelmtlstats .mr-star-empty,
body.nightmode-on  #panelmtlstats .mr-star-empty { color: #4a566b !important; }

/* --- Mobile: tumpuk skor di atas bar --- */
@media (max-width: 560px) {
  #panelmtlstats .star-avg {
    flex-basis: 100%;
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid var(--dn-border);
  }
  #panelmtlstats .star-bar { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #panelmtlstats .star-bar .rate-fill,
  #panelmtlstats #review-form .rating .lab { transition: none; }
}

/* ============================================================
   KOMENTAR — gaya "thread editorial": avatar kotak-membulat,
   pemisah hairline + hover (bukan kartu berat), rail balasan,
   form bertoken. Scope #comments → menang atas inline AMP lama.
   ============================================================ */
#comments { margin-top: 8px; }

/* Judul: "N thoughts on <novel>" */
#comments .comments-title {
  display: block;
  font-family: var(--dn-font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--dn-text);
  margin: 4px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dn-border);
}
#comments .comments-title span { color: var(--dn-text-muted); font-weight: 600; }

/* Daftar komentar */
#comments .comment-list { list-style: none; margin: 0; padding: 0; }
#comments .comment-list li.comment { list-style: none; }

#comments .comment-list > li.comment { margin-bottom: 4px; }
#comments .comment-body {
  position: relative;
  padding: 14px 18px 14px 12px;
  border-bottom: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
  background: transparent;
  transition: background .15s ease;
}
/* Komentar polos (tanpa selang-seling): badan transparan, hanya hover.
   Matikan striping bawaan (#fafafa inline AMP + parity WP comment_class). */
#comments li.odd, #comments li.even { background: transparent; }
/* Box meta: avatar + nama + tanggal di dalam panel abu */
#comments .comment-meta {
  background: var(--dn-surface-2);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
}
#comments .comment-body:hover { background: var(--dn-surface-2); }

/* Avatar float kiri → nama, tanggal & isi mengalir rapat di kanannya */
#comments .comment-body::after { content: ""; display: block; clear: both; }
#comments .comment-author img.avatar {
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: var(--dn-radius-control);   /* kotak-membulat, bukan lingkaran */
  border: 1px solid var(--dn-border);
  object-fit: cover;
}

/* Baris meta: nama (kiri) — tanggal (rata KANAN), center vertikal thd avatar (line-height=tinggi avatar) */
#comments .comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 10px; padding: 8px 14px; line-height: 40px; }
/* Avatar + nama = grup flex ter-center vertikal → nama sejajar tengah dgn tanggal. */
#comments .comment-author.vcard { display: flex; align-items: center; gap: 12px; min-width: 0; }
#comments .comment-author .fn {
  font-style: normal;
  font-weight: 700;
  font-size: .95rem;
  color: var(--dn-text);
}
#comments .comment-author .says { display: none; }   /* basa-basi "says:" */
#comments .comment-author em {
  margin-left: 6px;
  font-size: .78rem;
  color: var(--dn-warn);
}

#comments .comment-metadata { display: inline; margin-left: auto; }   /* dorong tanggal ke tepi kanan */
#comments .comment-metadata::before { content: none; }                /* pemisah · tak perlu saat rata kanan */
#comments .comment-metadata a {
  font-size: .78rem;
  color: var(--dn-text-faint);
  font-variant-numeric: tabular-nums;
}
#comments .comment-metadata a:hover { color: var(--dn-text-muted); }

/* Isi komentar — sejajar nama, clear dari avatar (12+40+12) */
#comments .comment-content {
  margin-left: 64px;
  color: var(--dn-text);
  font-size: .95rem;
  line-height: 1.55;
}
#comments .comment-content p { margin: 0 0 6px; }
#comments .comment-content p:last-child { margin-bottom: 0; }

/* Baris aksi reply — indent sejajar di bawah konten (past avatar). Pill like/
   reply/report distyle .nid-* di dn-thread.css; a.comment-reply-link legacy sudah
   dibuang (better_commets pindah ke modal). */
#comments .reply { margin-left: 64px; margin-top: 8px; }

/* Balasan bertingkat — rail thread + indent */
#comments .children {
  list-style: none;
  margin: 0 0 0 21px;
  padding-left: 18px;
  border-left: 2px solid var(--dn-border);
}
#comments .children .comment-author img.avatar { width: 34px; height: 34px; }
#comments .children .comment-meta { line-height: 34px; }
#comments .children .comment-content,
#comments .children .reply { margin-left: 58px; }   /* 12+34+12 */
#comments #all-comments-list .col-2 .comment-body,
#comments #all-comments-list .col-3 .comment-body { padding-left: 30px; }

/* Tombol "View N other comments" */
#comments #view-all-comments {
  display: block;
  margin: 16px auto 20px;
  padding: 9px 20px;
  background: transparent;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill);
  font: 600 .85rem/1 var(--dn-font-head);
  color: var(--dn-text-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
#comments #view-all-comments:hover {
  color: var(--dn-brand);
  border-color: var(--dn-brand);
  background: var(--dn-brand-tint);
}
#comments #view-all-comments[disabled] { opacity: .55; cursor: default; }

/* Navigasi komentar */
#comments .comment-navigation .nav-links,
#comments .comments-navigation { font-size: .85rem; }

/* ---------- Form komentar ---------- */
#comments .comment-respond {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--dn-surface-2);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card);
}
#comments .comment-reply-title {
  font-family: var(--dn-font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--dn-text);
  margin: 0 0 14px;
}
#comments .comment-reply-title small { font-weight: 400; font-size: .8rem; }
#comments .comment-reply-title small a { color: var(--dn-danger); }

#comments .comment-form { margin: 0; }
#comments .comment-notes,
#comments .logged-in-as,
#comments .must-log-in {
  font-size: .82rem;
  color: var(--dn-text-muted);
  margin: 0 0 14px;
}
#comments .comment-notes a,
#comments .logged-in-as a,
#comments .must-log-in a { color: var(--dn-brand-ink); font-weight: 600; }

/* Name / Email / Website sejajar */
#comments .comment-form-author,
#comments .comment-form-email,
#comments .comment-form-url {
  display: inline-block;
  width: calc(33.333% - 8px);
  margin: 0 0 12px;
  vertical-align: top;
}
#comments .comment-form-email,
#comments .comment-form-url { margin-left: 10px; }

#comments .comment-form label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--dn-text-muted);
  margin-bottom: 5px;
}
#comments .comment-form .required { color: var(--dn-danger); }

#comments .comment-form input[type=text],
#comments .comment-form input[type=email],
#comments .comment-form input[type=url],
#comments .comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  color: var(--dn-text);
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#comments .comment-form textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
#comments .comment-form input:focus,
#comments .comment-form textarea:focus {
  outline: none;
  border-color: var(--dn-brand);
  box-shadow: 0 0 0 3px var(--dn-brand-tint);
}
#comments .comment-form input::placeholder,
#comments .comment-form textarea::placeholder { color: var(--dn-text-faint); }
#comments .comment-form-comment { margin-bottom: 14px; }

#comments .comment-form-cookies-consent {
  font-size: .82rem;
  color: var(--dn-text-muted);
  margin: 0 0 14px;
}
#comments .comment-form-cookies-consent input { margin-right: 8px; }

#comments .form-submit { margin: 4px 0 0; }
#comments .form-submit .submit {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border: 0;
  padding: 11px 26px;
  font: 600 .92rem/1 var(--dn-font-head);
  color: var(--dn-btn-text);
  background: var(--dn-btn-bg);
  border-radius: var(--dn-btn-radius);
  box-shadow: var(--dn-shadow-sm);
  transition: background .15s ease, transform .08s ease;
}
#comments .form-submit .submit:hover { background: var(--dn-btn-bg-hover); }
#comments .form-submit .submit:active { transform: translateY(1px); }

#comments .no-comments {
  font-size: .9rem;
  color: var(--dn-text-muted);
  text-align: center;
  padding: 12px;
}

/* Mobile: input sejajar → tumpuk; rail balasan lebih rapat */
@media (max-width: 600px) {
  #comments .comment-form-author,
  #comments .comment-form-email,
  #comments .comment-form-url { display: block; width: 100%; margin-left: 0; }
  #comments .children { margin-left: 8px; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #comments .comment-body,
  #comments .reply a, #comments #view-all-comments,
  #comments .comment-form input, #comments .comment-form textarea,
  #comments .form-submit .submit { transition: none; }
}

/* Tombol dark-mode global disembunyikan di reader chapter (body.mycap):
   handler-nya tak dimuat di chapters; reader pakai panel setting sendiri. */
body.mycap .dn-theme-toggle { display: none !important; }

/* ============================================================
   LIBRARY — toolbar + grid + pilih/hapus. Kartu (.read-box)
   dibiarkan apa adanya; ini hanya layout, seleksi & aksi hapus.
   ============================================================ */
/* Library — empty-state guest (belum login) */
.lib-gate {
  max-width: 520px;
  margin: var(--dn-space-2xl) auto;
  padding: var(--dn-space-xl) var(--dn-space-lg);
  text-align: center;
}
.lib-gate__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--dn-space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dn-radius-pill);
  background: var(--dn-brand-tint);
  color: var(--dn-brand-ink);
}
.lib-gate__icon svg { width: 30px; height: 30px; fill: currentColor; }
.lib-gate__title {
  margin: 0 0 var(--dn-space-sm);
  font-family: var(--dn-font-display);
  font-weight: var(--dn-fw-semibold);
  font-size: var(--dn-fs-h2);
  color: var(--dn-text);
}
.lib-gate__text {
  margin: 0 auto var(--dn-space-xl);
  max-width: 42ch;
  font-family: var(--dn-font-body);
  font-size: var(--dn-fs-base);
  line-height: 1.6;
  color: var(--dn-text-muted);
}
.lib-gate, .lib-gate * { box-sizing: border-box; }
.lib-gate__cta { display: flex; gap: var(--dn-space-md); justify-content: center; flex-wrap: wrap; }
.lib-gate__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 22px;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill);
  background: var(--dn-surface);
  color: var(--dn-brand-ink);
  font-family: var(--dn-font-head);
  font-weight: var(--dn-fw-semibold);
  font-size: var(--dn-fs-sm);
  transition: var(--dn-transition);
}
.lib-gate__btn:hover { border-color: var(--dn-brand); background: var(--dn-brand-tint); }
.lib-gate__btn--primary { background: var(--dn-btn-bg); border-color: transparent; color: #fff; }
.lib-gate__btn--primary:hover { background: var(--dn-btn-bg-hover); color: #fff; }
.lib-gate__btn:focus-visible { outline: 2px solid var(--dn-brand); outline-offset: 2px; }
@media (max-width: 420px) {
  .lib-gate__cta { flex-direction: column; }
  .lib-gate__btn { width: 100%; }
}

.lib-page .lib-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--dn-border);
}
.lib-page .lib-head .main-title { margin: 0; }
.lib-page .lib-count {
  font-size: .78rem;
  font-weight: 600;
  color: var(--dn-text-muted);
  background: var(--dn-surface-2);
  border: 1px solid var(--dn-border);
  padding: 3px 10px;
  border-radius: var(--dn-radius-pill);
}

.lib-page .lib-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.lib-page .lib-sort { display: flex; align-items: center; gap: 8px; margin: 0; }
.lib-page .lib-sort label { font-size: .85rem; color: var(--dn-text-muted); }
.lib-page .lib-sort select {
  -webkit-appearance: none;
  appearance: none;
  padding: 7px 30px 7px 12px;
  font: inherit;
  font-size: .85rem;
  color: var(--dn-text);
  background: var(--dn-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lib-page .lib-sort select:focus {
  outline: none;
  border-color: var(--dn-brand);
  box-shadow: 0 0 0 3px var(--dn-brand-tint);
}

.lib-page .lib-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-page .lib-btn {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 7px 14px;
  font: 600 .82rem/1 var(--dn-font-head);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill);
  background: transparent;
  color: var(--dn-text-muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lib-page .lib-btn:hover { color: var(--dn-text); border-color: var(--dn-text-faint); background: var(--dn-surface-2); }
.lib-page .lib-del-sel,
.lib-page .lib-del-all { color: var(--dn-danger); border-color: var(--dn-danger); }
.lib-page .lib-del-all { background: var(--dn-danger-tint); }
.lib-page .lib-del-sel:hover,
.lib-page .lib-del-all:hover { background: var(--dn-danger); color: #fff; border-color: var(--dn-danger); }
.lib-page .lib-btn:disabled { opacity: .45; cursor: not-allowed; }
.lib-page .lib-btn:disabled:hover { background: transparent; color: var(--dn-text-muted); border-color: var(--dn-border); }

/* Grid kartu */
.lib-page .lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 18px;
}
.lib-page .lib-grid .read-box {
  width: auto;
  max-width: none;
  margin: 0;
  float: none;
}
.lib-page .lib-card {
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, outline-color .15s ease;
}
.lib-page .lib-card:hover { transform: translateY(-3px); }
.lib-page .lib-card.is-selected {
  outline: 2px solid var(--dn-brand);
  outline-offset: 2px;
  border-radius: var(--dn-radius-control);
}

/* Checkbox pilih (pojok kiri-atas cover) */
.lib-page .lib-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.lib-page .lib-check input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.lib-page .lib-check-box {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(0, 0, 0, .2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.lib-page .lib-check input:checked + .lib-check-box {
  background: var(--dn-brand);
  border-color: var(--dn-brand);
}
.lib-page .lib-check input:checked + .lib-check-box::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Trash cepat (pojok kanan-atas, muncul saat hover) */
.lib-page .lib-del-one {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(18, 20, 26, .58);
  color: #fff;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.lib-page .lib-del-one svg { fill: currentColor; }
.lib-page .lib-card:hover .lib-del-one,
.lib-page .lib-card.is-selected .lib-del-one { opacity: 1; transform: none; }
.lib-page .lib-del-one:hover { background: var(--dn-danger); }
@media (hover: none) {
  .lib-page .lib-del-one { opacity: 1; transform: none; }   /* sentuh: trash selalu tampak */
}

.lib-page .lib-empty {
  text-align: center;
  color: var(--dn-text-muted);
  padding: 44px 16px;
  font-size: .95rem;
}
.lib-page .lib-empty strong { color: var(--dn-text); }

@media (max-width: 560px) {
  .lib-page .lib-toolbar { align-items: stretch; }
  .lib-page .lib-actions { justify-content: flex-start; }
  .lib-page .lib-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
}

/* Library tabs (Saved / History) */
.lib-page .lib-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--dn-border);
}
.lib-page .lib-tab {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  margin-bottom: -1px;
  font: 600 .9rem/1 var(--dn-font-head);
  color: var(--dn-text-muted);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.lib-page .lib-tab:hover { color: var(--dn-text); }
.lib-page .lib-tab.is-active { color: var(--dn-brand); border-bottom-color: var(--dn-brand); }
.lib-page .lib-tab-n {
  font-size: .72rem;
  font-weight: 700;
  background: var(--dn-surface-2);
  border: 1px solid var(--dn-border);
  color: var(--dn-text-muted);
  padding: 1px 7px;
  border-radius: var(--dn-radius-pill);
}
.lib-page .lib-tab.is-active .lib-tab-n {
  background: var(--dn-brand-tint);
  border-color: transparent;
  color: var(--dn-brand-ink);
}

/* History: meta chapter + waktu, penanda tersimpan */
.lib-page .lib-clear-form { margin: 0; }
.lib-page .hist-ch {
  display: block;
  color: var(--dn-text-muted);
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-page .hist-ago {
  display: block;
  margin-top: 2px;
  color: var(--dn-text-faint);
  font-size: .72rem;
}
.lib-page .lib-saved-flag {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  color: #f5a623;
  font-size: 1rem;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* Pagination Library (paginate_links → .page-numbers) */
.lib-page .lib-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 24px 0 4px;
}
.lib-page .lib-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
  font: 600 .85rem/1 var(--dn-font-head);
  color: var(--dn-text-muted);
  background: var(--dn-surface);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lib-page .lib-pagination a.page-numbers:hover {
  color: var(--dn-brand);
  border-color: var(--dn-brand);
  background: var(--dn-brand-tint);
}
.lib-page .lib-pagination .page-numbers.current {
  color: var(--dn-on-brand);
  background: var(--dn-brand);
  border-color: var(--dn-brand);
}
.lib-page .lib-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* ============================================================
   FEEDBACK — spinner tombol + toast notifikasi + state In Library
   (dipakai Add to Library; toast pengganti alert() bawaan)
   ============================================================ */
.nid-spin {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nid-spin .6s linear infinite;
  vertical-align: -2px;
}
@keyframes nid-spin { to { transform: rotate(360deg); } }

/* ============================================================
 * PAGELOAD BAR (#dn-pbar) — garis teal berjalan di paling atas layar saat
 * navigasi antar-halaman. Dikendalikan assets/js/pageload-bar.js.
 * Kepala "comet" bercahaya + sapuan shimmer = tanda konten sedang dimuat.
 * ============================================================ */
#dn-pbar {
  position: fixed; top: 0; left: 0; height: 4px; width: 0;
  z-index: 100000; pointer-events: none;
  /* mint→hampir putih: kontras jelas di header teal maupun latar terang */
  background: linear-gradient(90deg, #0d9488 0%, #2dd4bf 45%, #99f6e4 100%);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px rgba(153, 246, 228, .9), 0 1px 4px rgba(0, 0, 0, .22);
  opacity: 0;
  transition: width .28s cubic-bezier(.22, .61, .36, 1), opacity .32s ease;
}
#dn-pbar.is-on { opacity: 1; }
/* kepala comet: titik terang berpendar di ujung kanan bar */
#dn-pbar::after {
  content: ""; position: absolute; right: 0; top: -1px;
  width: 90px; height: 5px; border-radius: 3px;
  transform: translateY(0);
  box-shadow: 0 0 12px 3px rgba(153, 246, 228, .95), 0 0 5px 1px rgba(45, 212, 191, .95);
}
/* sapuan shimmer diagonal berulang selama bar aktif */
#dn-pbar.is-on::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: dn-pbar-shimmer 1.15s linear infinite;
}
@keyframes dn-pbar-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
@media (prefers-reduced-motion: reduce) {
  #dn-pbar { transition: width .2s linear, opacity .2s linear; }
  #dn-pbar.is-on::before { animation: none; }
  #dn-pbar::after { box-shadow: 0 0 6px 2px rgba(77, 182, 172, .7); }
}

.nid-toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.nid-toast {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 90vw;
  padding: 12px 18px;
  border-radius: var(--dn-radius-pill);
  background: var(--dn-text);
  color: var(--dn-bg);
  font: 600 .88rem/1.2 var(--dn-font-body);
  box-shadow: var(--dn-shadow-pop);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
}
.nid-toast.show { opacity: 1; transform: none; }
.nid-toast--success { background: var(--dn-brand); color: var(--dn-on-brand); }
.nid-toast--error { background: var(--dn-danger); color: #fff; }
.nid-toast-ico { fill: currentColor; flex: none; }

/* Tombol "In Library" (sudah tersimpan) — sekunder/ghost + centang */
a.list-but-in {
  background: transparent !important;
  color: var(--dn-brand) !important;
  border: 1px solid var(--dn-brand) !important;
}
a.list-but-in:hover { background: var(--dn-brand-tint) !important; }
.nid-but-ico { fill: currentColor; vertical-align: -2px; margin-right: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nid-spin { animation-duration: 1.2s; }
  .nid-toast { transition: opacity .2s ease; transform: none; }
}

/* ============================================================
   GLOSSARY PAGE — desain modern minimalis
   Signature: panah transformasi "→" (sumber → terjemahan) = jantung glosarium
   Scope: .dn-glossary (glossary-page.php / cores/partial/table-glossary.php)
   Catatan: form/edit (action=form|edit) masih markup Bootstrap → re-skin .btn/.form-control tetap.
   ============================================================ */
.dn-glossary { color: var(--dn-text); }
.dn-glossary .material-icons { vertical-align: middle; line-height: 1; }

/* ---- Toolbar (header: judul + kontrol) ---- */
.dn-gl-head { margin-bottom: 22px; }
.dn-gl-title {
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dn-text);
}
.dn-gl-toolbar { display: flex; flex-direction: column; gap: 16px; }
.dn-gl-toolbar-top {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between;
}

.dn-gl-add {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: var(--dn-brand); color: #fff !important;
  border-radius: var(--dn-radius-control);
  font-weight: 600; font-size: 14px; text-decoration: none;
  border: 1px solid var(--dn-brand);
  transition: background .15s ease;
  white-space: nowrap;
}
.dn-gl-add:hover { background: var(--dn-brand-strong); border-color: var(--dn-brand-strong); }
.dn-gl-add .material-icons { font-size: 18px; }

.dn-gl-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 280px; max-width: 420px;
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
  padding: 0 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dn-gl-search:focus-within { border-color: var(--dn-brand); box-shadow: 0 0 0 3px var(--dn-brand-tint); }
.dn-gl-search .material-icons { font-size: 18px; color: var(--dn-text-faint); }
.dn-gl-search input {
  flex: 1; border: 0; background: transparent; outline: none;
  padding: 9px 0; font-size: 14px; color: var(--dn-text);
}
.dn-gl-search input::placeholder { color: var(--dn-text-faint); }

.dn-gl-controls { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-end; }
.dn-gl-group { display: flex; flex-direction: column; gap: 6px; }
.dn-gl-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dn-text-faint);
}
.dn-gl-group > .dn-gl-seg + .dn-gl-seg { margin-top: 0; }
.dn-gl-group { flex-direction: row; flex-wrap: wrap; align-items: center; }
.dn-gl-group .dn-gl-label { width: 100%; }

/* Segmented control (sort / filter) */
.dn-gl-seg {
  display: inline-flex;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
  overflow: hidden;
  background: var(--dn-surface);
}
.dn-gl-seg + .dn-gl-seg { margin-left: 8px; }
.dn-gl-seg a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--dn-text-muted); text-decoration: none;
  border-left: 1px solid var(--dn-border);
  transition: background .12s ease, color .12s ease;
}
.dn-gl-seg a:first-child { border-left: 0; }
.dn-gl-seg a:hover { background: var(--dn-surface-2); color: var(--dn-text); }
.dn-gl-seg a.is-active { background: var(--dn-brand); color: #fff; }
.dn-gl-seg--icon a { padding: 8px 10px; }
.dn-gl-seg--icon .material-icons { font-size: 18px; }

.dn-gl-select {
  padding: 9px 12px;
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
  color: var(--dn-text); font-size: 14px;
  min-width: 200px;
}
.dn-gl-select:focus { outline: none; border-color: var(--dn-brand); box-shadow: 0 0 0 3px var(--dn-brand-tint); }

/* ---- List of glossary cards ---- */
.dn-gl-body { display: block; }
.gl-list { display: flex; flex-direction: column; gap: 10px; }

.gl-card {
  position: relative;
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-left: 3px solid var(--dn-border);
  border-radius: var(--dn-radius-card);
  padding: 14px 16px 14px 17px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gl-card:hover { border-color: var(--dn-brand); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
/* rail status */
.gl-card.is-ok      { border-left-color: var(--dn-brand); }
.gl-card.is-wait    { border-left-color: #e0a800; }
.gl-card.is-pending { border-left-color: var(--dn-text-faint); }
.gl-card.is-no      { border-left-color: var(--dn-danger); }

.gl-main { flex: 1; min-width: 0; }

.gl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.gl-novel {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dn-brand);
}
.gl-date { font-size: 12px; color: var(--dn-text-faint); white-space: nowrap; }

/* hero — pasangan kata (signature) */
.gl-term { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; font-size: 17px; line-height: 1.35; }
.gl-from { color: var(--dn-text-muted); }
.gl-to   { color: var(--dn-text); font-weight: 700; }
.gl-arrow {
  font-family: ui-sans-serif, system-ui, sans-serif;
  color: var(--dn-brand); font-weight: 700; font-size: 16px;
  position: relative; top: 1px;
}
.gl-edit {
  display: inline-flex; align-self: center; margin-left: 2px;
  color: var(--dn-text-faint); opacity: 0; transition: opacity .15s ease, color .15s ease;
}
.gl-card:hover .gl-edit { opacity: 1; }
.gl-edit:hover { color: var(--dn-brand); }
.gl-edit .material-icons { font-size: 16px; }

.gl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; font-size: 12.5px; color: var(--dn-text-muted); }
.gl-by { color: var(--dn-text-muted); }
.gl-note { color: var(--dn-text-faint); font-style: italic; }
.gl-note::before { content: "·"; margin-right: 8px; color: var(--dn-text-faint); font-style: normal; }

/* F6: widget Google frontend — banner atas, gadget & tooltip bawaan disembunyikan.
   Google mengganti elemen banner (kini dibungkus .skiptranslate + class VIpgJd-*
   ter-obfuscate yang berubah-ubah) → sembunyikan .skiptranslate menyeluruh. Terjemahan
   teks TETAP jalan (diterapkan ke text node, bukan lewat bar); hanya UI/bar Google yang
   hilang. Holder & select kita pakai id sendiri (#nid-gtr-*), tak kena aturan ini.
   body.top di-reset agar layout tak tergeser turun oleh banner. */
.skiptranslate,
.goog-te-banner-frame,
iframe.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip { display: none !important; }
.goog-te-gadget { font-size: 0 !important; height: 0 !important; }
body { top: 0 !important; position: static !important; }
#nid-gtr-holder { display: none; }

/* F5 (reader): tampilan bilingual menampilkan teks asli (legacy .no-raw menyembunyikan) */
#entry-content.nid-view-both .text-raw { display: block; }
/* F5.2: baris badge MT + link lapor */
.nid-mt-line { display: flex; align-items: center; gap: var(--dn-space-sm); margin: var(--dn-space-xs) 0 var(--dn-space-md); }
.nid-mt-report { font-size: var(--dn-fs-xs); color: var(--dn-text-muted); text-decoration: underline; transition: var(--dn-transition); }
.nid-mt-report:hover { color: var(--dn-brand); }
.dn-set__chip.is-disabled { opacity: .45; cursor: not-allowed; }
/* F5.3: warna glossary → token (ganti literal .hijau #00FF00 / .hitam #333 di style.css) */
.glossary-tooltips.hijau { color: var(--dn-brand) !important; }
.glossary-tooltips.hitam { color: var(--dn-text) !important; }

/* Tooltip glossary (jTippy) → token + dark-aware. Satu-satunya pemakai jTippy di
   theme = anchor glossary [data-toggle=tooltip], jadi aman override .jtippy global.
   Ganti bubble #444 hardcoded + teks putih 800 + nowrap: bubble surface bertema,
   font body, teks bisa wrap (terjemahan panjang tak keluar garis). dn-design.css
   dimuat setelah jTippy.min.css → menang tanpa !important. */
.jtippy {
  background: var(--dn-brand);
  border: 1px solid var(--dn-brand);
  border-radius: var(--dn-radius-sm);
  box-shadow: var(--dn-shadow-pop);
  padding: var(--dn-space-xs) var(--dn-space-sm);
  max-width: min(280px, 78vw);
}
.jtippy .jt-title {
  margin: 0;
  color: var(--dn-on-brand);
  font-family: var(--dn-font-body);
  font-size: var(--dn-fs-sm);
  font-weight: var(--dn-fw-medium);
  line-height: var(--dn-leading-base);
  white-space: normal;
}
/* Panah ikut warna bubble (brand) → segitiga menyatu, terlihat light+dark. */
.jtippy .jt-arrow-top    { border-bottom-color: var(--dn-brand); }
.jtippy .jt-arrow-bottom { border-top-color: var(--dn-brand); }
.jtippy .jt-arrow-left   { border-right-color: var(--dn-brand); }
.jtippy .jt-arrow-right  { border-left-color: var(--dn-brand); }

/* FASE 3 (glossary v2): badge type/gender pada kartu term */
.gl-attr {
  display: inline-flex; align-items: center; align-self: center;
  padding: 1px 9px; border-radius: var(--dn-radius-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dn-text-muted); background: var(--dn-surface-2); border: 1px solid var(--dn-border);
}
.gl-attr--character { color: var(--dn-brand); background: var(--dn-brand-tint); border-color: transparent; }
.dn-gl-pair--attrs { align-items: flex-end; }

.gl-status {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: var(--dn-radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.gl-status--ok      { color: var(--dn-brand); background: var(--dn-brand-tint); }
.gl-status--wait    { color: #946c00; background: rgba(224,168,0,.16); }
.gl-status--pending { color: var(--dn-text-muted); background: var(--dn-surface-2); }
.gl-status--no      { color: var(--dn-danger); background: var(--dn-danger-tint); }

.gl-change {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding: 8px 11px;
  background: var(--dn-surface-2); border-radius: var(--dn-radius-sm);
  font-size: 12px; color: var(--dn-text-muted);
}
.gl-change-who { font-weight: 600; }
.gl-change b { color: var(--dn-text); font-weight: 600; }
.gl-arrow--sm { font-size: 13px; }

/* votes — pill ganda di kanan */
.gl-votes { display: flex; flex-direction: column; gap: 6px; flex: none; }
.gl-vote {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; min-width: 58px; justify-content: center;
  background: var(--dn-surface); color: var(--dn-text-muted);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.gl-vote .material-icons { font-size: 16px; }
.gl-vote--up .material-icons   { color: var(--dn-brand); }
.gl-vote--down .material-icons { color: var(--dn-danger); }
.gl-vote--up:hover:not([disabled])   { color: var(--dn-brand);  border-color: var(--dn-brand);  background: var(--dn-brand-tint); }
.gl-vote--down:hover:not([disabled]) { color: var(--dn-danger); border-color: var(--dn-danger); background: var(--dn-danger-tint); }
.gl-vote[disabled] { opacity: .55; cursor: not-allowed; }
/* Loading kecil saat vote diproses: ikon menghilang, spinner berputar di tempatnya. */
.gl-vote { position: relative; }
.gl-vote.is-loading { pointer-events: none; }
.gl-vote.is-loading .material-icons { opacity: 0; }
.gl-vote.is-loading::before {
  content: ""; position: absolute; left: 12px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; opacity: .75;
  animation: nid-spin .6s linear infinite;
}
.gl-vote--up.is-loading::before   { color: var(--dn-brand); }
.gl-vote--down.is-loading::before { color: var(--dn-danger); }
@media (prefers-reduced-motion: reduce) { .gl-vote.is-loading::before { animation-duration: 1.5s; } }
.hasilgl { display: none; }

/* empty state */
.gl-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 56px 24px; text-align: center;
  border: 1px dashed var(--dn-border); border-radius: var(--dn-radius-card);
  color: var(--dn-text-faint);
}
.gl-empty .material-icons { font-size: 40px; color: var(--dn-border); }
.gl-empty p { margin: 0; font-size: 14px; }

/* Pagination glossary memakai komponen #pagination tema utama (style.css) — beri jarak atas */
.dn-glossary #pagination { margin-top: 24px; }

/* ---- Add / Edit form (native, no Bootstrap) ---- */
.dn-gl-head--form { margin-bottom: 24px; }
.dn-gl-back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--dn-text-muted);
  text-decoration: none; margin-bottom: 12px;
}
.dn-gl-back:hover { color: var(--dn-brand); }
.dn-gl-back .material-icons { font-size: 17px; }
.dn-gl-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--dn-text-muted); max-width: 60ch; }

.dn-gl-form { display: flex; flex-direction: column; gap: 20px; max-width: 680px; }
.dn-gl-field { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.dn-gl-field label {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dn-text-muted);
}
.dn-gl-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--dn-text-faint); }

.dn-gl-input {
  width: 100%;
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control);
  color: var(--dn-text);
  font-size: 14.5px; line-height: 1.4;
  padding: 11px 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
select.dn-gl-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6470' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px; cursor: pointer;
}
.dn-gl-input::placeholder { color: var(--dn-text-faint); }
.dn-gl-input:focus { outline: none; border-color: var(--dn-brand); box-shadow: 0 0 0 3px var(--dn-brand-tint); }
.dn-gl-input:disabled { background: var(--dn-surface-2); color: var(--dn-text-muted); cursor: not-allowed; opacity: 1; }
textarea.dn-gl-input { resize: vertical; min-height: 84px; }

/* Pasangan kata: original → translated (signature panah, sejajar di desktop) */
.dn-gl-pair { display: flex; align-items: flex-end; gap: 14px; }
.dn-gl-pair-arrow { flex: none; padding-bottom: 11px; color: var(--dn-brand); font-weight: 700; font-size: 20px; }

.dn-gl-alert:empty { display: none; }
.dn-gl-alert { padding: 10px 13px; border-radius: var(--dn-radius-control); background: var(--dn-danger-tint); color: var(--dn-danger); font-size: 13px; }

/* Box "Last record" di form edit */
.dn-gl-record {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border-radius: var(--dn-radius-card);
  background: var(--dn-surface-2); border: 1px solid var(--dn-border);
}
.dn-gl-record-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--dn-text-faint); }
.dn-gl-record-body { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--dn-text); }
.dn-gl-record-body b { font-weight: 700; }
.dn-gl-record-meta { font-size: 12px; color: var(--dn-text-muted); font-weight: 400; }

.dn-gl-form-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--dn-border);
}
.dn-gl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border: 1px solid var(--dn-brand);
  background: var(--dn-brand); color: #fff;
  border-radius: var(--dn-radius-control); font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: background .15s ease;
}
.dn-gl-btn:hover { background: var(--dn-brand-strong); border-color: var(--dn-brand-strong); color: #fff; }
.dn-gl-btn-ghost {
  display: inline-flex; align-items: center;
  padding: 10px 18px; border: 1px solid var(--dn-border);
  background: transparent; color: var(--dn-text-muted);
  border-radius: var(--dn-radius-control); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: background .15s ease, color .15s ease;
}
.dn-gl-btn-ghost:hover { background: var(--dn-surface-2); color: var(--dn-text); }

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .gl-card { flex-direction: column; gap: 12px; }
  .gl-votes { flex-direction: row; align-self: flex-start; }
  .dn-gl-controls { gap: 16px; }
  .dn-gl-title { font-size: 24px; }
  .dn-gl-pair { flex-direction: column; align-items: stretch; gap: 10px; }
  .dn-gl-pair-arrow { align-self: center; padding: 0; transform: rotate(90deg); }
}

/* ============================================================
   PROFILE / ACCOUNT DASHBOARD (profile.php)
   Sidebar identitas + link akun, form setting bersekat. Dark-aware via token.
   ============================================================ */
.dn-prof { padding: 28px 0 48px; }
.dn-prof-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }

/* --- Sidebar --- */
.dn-prof-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
.dn-prof-id { background: var(--dn-surface); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-card); padding: 24px 20px; text-align: center; }
.dn-prof-avatar { width: 112px; height: 112px; margin: 0 auto 14px; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, var(--dn-brand), var(--dn-accent-2)); }
.dn-prof-avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; border: 3px solid var(--dn-surface); object-fit: cover; }
.dn-prof-name { margin: 0; font-family: var(--dn-font-head); font-size: var(--dn-fs-h3); font-weight: var(--dn-fw-bold); color: var(--dn-text); letter-spacing: var(--dn-tracking-tight); }
.dn-prof-handle { display: block; font-size: 13px; color: var(--dn-text-faint); margin-top: 2px; }
.dn-prof-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 12px; }
.dn-prof-role { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dn-brand); background: var(--dn-brand-tint); padding: 3px 10px; border-radius: var(--dn-radius-pill); }
.dn-prof-since { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--dn-text-muted); }
.dn-prof-since .material-icons { font-size: 14px; }

.dn-prof-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.dn-prof-stat { display: flex; flex-direction: column; gap: 3px; padding: 12px 8px; border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control); text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.dn-prof-stat:hover { border-color: var(--dn-brand); background: var(--dn-brand-tint); }
.dn-prof-stat-num { font-size: 20px; font-weight: 800; color: var(--dn-text); line-height: 1; }
.dn-prof-stat-lab { font-size: 10.5px; color: var(--dn-text-muted); text-transform: uppercase; letter-spacing: .03em; }

.dn-prof-nav { display: flex; flex-direction: column; background: var(--dn-surface); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-card); overflow: hidden; }
.dn-prof-link { display: flex; align-items: center; gap: 11px; padding: 13px 16px; font-size: 14px; font-weight: 600; color: var(--dn-text); text-decoration: none; border-bottom: 1px solid var(--dn-border); transition: background .12s ease; }
.dn-prof-link:last-child { border-bottom: 0; }
.dn-prof-link .material-icons { font-size: 19px; color: var(--dn-text-faint); }
.dn-prof-link-chev { margin-left: auto; font-size: 18px !important; color: var(--dn-text-faint) !important; }
.dn-prof-link:hover { background: var(--dn-surface-2); }
.dn-prof-link.is-current { background: var(--dn-brand-tint); color: var(--dn-brand); }
.dn-prof-link.is-current .material-icons { color: var(--dn-brand); }
.dn-prof-link--danger { color: var(--dn-danger); }
.dn-prof-link--danger .material-icons { color: var(--dn-danger); }
.dn-prof-link--danger:hover { background: var(--dn-danger-tint); }

/* --- Main panel --- */
.dn-prof-main { background: var(--dn-surface); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-card); padding: 28px; }
.dn-prof-head { margin-bottom: 22px; }
.dn-prof-title { margin: 0; font-family: var(--dn-font-display); font-size: var(--dn-fs-h1); font-weight: var(--dn-fw-semibold); letter-spacing: var(--dn-tracking-display); color: var(--dn-text); }
.dn-prof-sub { margin: 6px 0 0; font-size: 14px; color: var(--dn-text-muted); }

.dn-prof-alert { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-radius: var(--dn-radius-control); font-size: 13.5px; margin-bottom: 18px; }
.dn-prof-alert .material-icons { font-size: 19px; flex: none; }
.dn-prof-alert--ok { background: var(--dn-brand-tint); color: var(--dn-brand); }
.dn-prof-alert--err { background: var(--dn-danger-tint); color: var(--dn-danger); }

.dn-prof-form { display: flex; flex-direction: column; gap: 26px; }
.dn-prof-section { border: 0; padding: 0; margin: 0; min-width: 0; }
.dn-prof-section legend { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--dn-text); padding: 0 0 14px; width: 100%; border-bottom: 1px solid var(--dn-border); margin-bottom: 16px; }
.dn-prof-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 17px !important; color: var(--dn-brand); background: var(--dn-brand-tint); border-radius: var(--dn-radius-sm); }
.dn-prof-hint { margin: -8px 0 14px; font-size: 12.5px; color: var(--dn-text-faint); }

.dn-prof-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dn-prof-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dn-prof-field label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dn-text-muted); }
.dn-prof-req { color: var(--dn-danger); }
.dn-prof-input { width: 100%; background: var(--dn-surface); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control); color: var(--dn-text); font-size: 14.5px; line-height: 1.4; padding: 11px 13px; transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none; }
.dn-prof-input::placeholder { color: var(--dn-text-faint); }
.dn-prof-input:focus { outline: none; border-color: var(--dn-brand); box-shadow: 0 0 0 3px var(--dn-brand-tint); }
textarea.dn-prof-input { resize: vertical; min-height: 100px; }

.dn-prof-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--dn-border); }
.dn-prof-actions-note { font-size: 12.5px; color: var(--dn-text-faint); }
.dn-prof-actions-btns { display: flex; gap: 10px; }
.dn-prof-btn { display: inline-flex; align-items: center; padding: 11px 24px; border: 1px solid var(--dn-brand); background: var(--dn-brand); color: #fff; border-radius: var(--dn-radius-control); font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s ease; }
.dn-prof-btn:hover { background: var(--dn-brand-strong); border-color: var(--dn-brand-strong); }
.dn-prof-btn-ghost { display: inline-flex; align-items: center; padding: 11px 18px; border: 1px solid var(--dn-border); background: transparent; color: var(--dn-text-muted); border-radius: var(--dn-radius-control); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s ease, color .15s ease; }
.dn-prof-btn-ghost:hover { background: var(--dn-surface-2); color: var(--dn-text); }

@media (max-width: 860px) {
  .dn-prof-grid { grid-template-columns: 1fr; }
  .dn-prof-side { position: static; }
  .dn-prof-id { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; text-align: left; align-items: center; }
  .dn-prof-avatar { grid-row: span 2; margin: 0; }
  .dn-prof-stats { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .dn-prof-tags { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .dn-prof-row { grid-template-columns: 1fr; }
  .dn-prof-main { padding: 20px 16px; }
  .dn-prof-actions { flex-direction: column-reverse; align-items: stretch; }
  .dn-prof-actions-btns { justify-content: space-between; }
}

/* ============================================================
 * DISCOVERY WIDGET (.dn-disc) — Popular / New / Recently Updated
 * Universal 3-kolom, dipakai 404 + all-chapters + mana pun.
 * Render via nid_discovery_lists() (includes/helpers.php).
 * ============================================================ */
.dn-disc { border-top: 1px solid var(--dn-border); padding-top: var(--dn-space-xl); margin-top: var(--dn-space-xl); }
.dn-disc-h { font-family: var(--dn-font-head); font-size: var(--dn-fs-h3); color: var(--dn-text); text-align: center; margin: 0 0 var(--dn-space-xl); }
.dn-disc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--dn-space-lg); }
.dn-disc-col h3.link-title { font-family: var(--dn-font-head); font-size: .95rem; color: var(--dn-text); margin: 0 0 var(--dn-space-md); padding-bottom: 7px; border-bottom: 2px solid var(--dn-brand); display: inline-block; }
.dn-disc-col ol.link-box { list-style: none; padding: 0; margin: 0 0 var(--dn-space-sm); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-card); overflow: hidden; }
.dn-disc-col ol.link-box li { padding: 10px 12px; border-bottom: 1px solid var(--dn-border); color: var(--dn-text-muted); font-size: .82rem; line-height: 1.45; }
.dn-disc-col ol.link-box li:last-child { border-bottom: 0; }
.dn-disc-col ol.link-box li a { color: var(--dn-text); font-weight: 600; text-decoration: none; }
.dn-disc-col ol.link-box li a:hover { color: var(--dn-brand); text-decoration: none; }
.dn-disc-col ol.link-box li a.title { color: var(--dn-text); }
.dn-disc-col .dn-disc-meta { color: var(--dn-text-faint); font-weight: 400; }
.dn-disc-col a.view-more { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--dn-brand); text-decoration: none; }
.dn-disc-col a.view-more:hover { color: var(--dn-brand-strong); }

/* ============================================================
 * NOVEL CARD GRID (.dn-cards) — responsif, uniform, kartu cover+meta
 * Render via nid_novel_card_grid() — pengganti .box float lama.
 * ============================================================ */
.dn-cards-wrap { margin: var(--dn-space-md) 0 var(--dn-space-lg); }
.dn-cards-h { font-family: var(--dn-font-head); font-size: var(--dn-fs-h3); color: var(--dn-text); margin: 0 0 var(--dn-space-md); }
.dn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--dn-space-sm); }
/* Badge bendera di kartu grid: lawan `.dn-card-cover img{width:100%}` yang
 * (spesifisitas sama, urut lebih akhir) membuat bendera memenuhi cover. */
.dn-card-cover .dn-flag img { width: 22px; height: 16px; }
/* Arsip genre/kategori: 4 kartu per baris (lebih besar), turun bertahap di layar sempit. */
.ng-grid .dn-cards { grid-template-columns: repeat(4, 1fr); gap: var(--dn-space-md); }
@media (max-width: 900px) { .ng-grid .dn-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) {
  .ng-grid .dn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dn-space-sm); }
  /* Kartu arsip sempit di HP → bendera, badge status/ch, judul diperkecil. */
  .ng-grid .dn-card-cover .dn-flag img { width: 17px; height: 12px; }
  .ng-grid .dn-card-badges { padding: 5px; gap: 4px; }
  .ng-grid .dn-card-status, .ng-grid .dn-card-ch { font-size: .5rem; padding: 1px 5px; }
  .ng-grid .dn-card-title { font-size: .72rem; min-height: 0; }
  .ng-grid .dn-card-rating .mr-star-rating i { font-size: 11px; }
  /* Rating nempel konten di atasnya (buang margin-top:auto → tak ada celah saat pendek). */
  .ng-grid .dn-card-rating { margin-top: 0; }
}
.dn-card { display: flex; flex-direction: column; background: var(--dn-surface); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-card); overflow: hidden; transition: transform var(--dn-transition), box-shadow var(--dn-transition), border-color var(--dn-transition); }
.dn-card:hover { border-color: var(--dn-brand); box-shadow: var(--dn-shadow-hover); transform: translateY(-2px); }
.dn-card-cover { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--dn-surface-2); }
.dn-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.dn-card:hover .dn-card-cover img { transform: scale(1.05); }
.dn-card-badges { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; padding: 7px; }
.dn-card-status, .dn-card-ch { font-size: .56rem; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: var(--dn-radius-pill); color: #fff; background: rgba(15, 20, 30, .72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); white-space: nowrap; line-height: 1.4; }
.dn-card-status { text-transform: uppercase; }
.dn-card-status--ongoing { background: var(--dn-ok); }
.dn-card-status--complete, .dn-card-status--completed { background: var(--dn-brand); }
.dn-card-status--hiatus { background: var(--dn-warn); }
.dn-card-status--dropped { background: var(--dn-danger); }
.dn-card-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 11px 12px; flex: 1 1 auto; }
/* Seragam judul kartu/widget = font-head (Montserrat), selaras .dn-rank-title —
   dulu .list-title/.dn-card-title tanpa font-family → jatuh ke Fira Sans (body). */
a.list-title, strong.list-title, .update-box p a, .dn-card-title { font-family: var(--dn-font-head); }
.dn-card-title { font-size: .82rem; font-weight: 700; line-height: 1.3; color: var(--dn-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.1em; }
.dn-card-title:hover { color: var(--dn-brand); }
.dn-card-genre { font-size: .72rem; color: var(--dn-text-muted); text-decoration: none; }
.dn-card-genre:hover { color: var(--dn-brand); }
.dn-card-rating { margin-top: auto; padding-top: 4px; font-size: .72rem; line-height: 1.2; }
.dn-card-rating .mr-star-rating { display: inline-block; white-space: nowrap; line-height: 1; vertical-align: middle; }
.dn-card-rating .mr-star-rating i { font-size: 13px; }
/* ====== BINTANG RATING KANONIK (satu warna sitewide) ======================
   style.css punya rule legacy yg adu !important (#ff912c orange, #ffd700 gold,
   #333 empty) → warna bintang beda-beda antar halaman. Paksa satu standar di sini:
   terisi = orange (--dn-star), kosong = abu lembut (--dn-star-empty). !important
   WAJIB utk melawan !important legacy (design rule 4). Scope `.mr-star-rating`
   (hasil rating) → TIDAK menyentuh form input `.mr-star-rating-select`. */
.mr-star-rating .mr-star-full,
.mr-star-rating .mr-star-half,
.mr-star-rating .nid-star-half__fg { color: var(--dn-star) !important; }
.mr-star-rating .mr-star-empty { color: var(--dn-star-empty) !important; }
/* Setengah bintang: bintang penuh emas (glyph identik dgn dasar) di-clip 50% kiri,
   dioverlay tepat di atas bintang kosong abu → separuh kiri emas, kanan abu. Glyph &
   ukuran font sama → tak ada geser/misalign lintas ukuran. base <i> display:block +
   line-height:1 → kotak rapat, overlay top:0 sejajar persis dgn dasar. */
.mr-star-rating .nid-star-half { position: relative; display: inline-block; line-height: 1; }
.mr-star-rating .nid-star-half > i { display: block; }
.mr-star-rating .nid-star-half .nid-star-half__fg { position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; }
/* Jarak angka rating ke bintang (sitewide) + sejajar vertikal. */
.mr-star-rating + .star-result { margin-left: 6px; vertical-align: middle; }
.dn-card-rating .star-result { font-size: .72rem; color: var(--dn-text-muted); margin-left: 3px; vertical-align: middle; }
.dn-card-rating .count { font-size: .68rem; color: var(--dn-text-faint); }
.dn-card-rating .no-rating-results-text { font-size: .72rem; color: var(--dn-text-faint); }

/* ============================================================
   Kartu carousel `.car` (widget "Novel by Genre/Status/Country"):
   rating bintang menggantikan teks "Added …". Genre & jumlah chapter
   sebaris rata tengah (.cap-meta flex, ch didorong ke kanan via
   margin-left:auto → tak butuh float). Ukuran bintang seukuran kartu
   arsip (13px PC / 11px HP) → konsisten dgn .dn-card-rating.
   ============================================================ */
.car .caption .cap-meta { display: flex; align-items: center; gap: var(--dn-space-xs); margin-top: var(--dn-space-xs); line-height: 1.3; }
.car .caption .cap-meta .genre { margin: 0; }
.car .caption .cap-ch { margin-left: auto; font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); color: var(--dn-text-muted); white-space: nowrap; }
.car .caption .cap-rating { margin-top: var(--dn-space-xs); line-height: 1.2; }
.car .caption .cap-rating .mr-star-rating { display: inline-block; white-space: nowrap; line-height: 1; vertical-align: middle; }
.car .caption .cap-rating .mr-star-rating i { font-size: 13px; }
.car .caption .cap-rating .star-result { font-size: var(--dn-fs-xs); color: var(--dn-text-muted); margin-left: 3px; vertical-align: middle; }
@media (max-width: 600px) {
  .car .caption .cap-rating .mr-star-rating i { font-size: 11px; }
}

/* ============================================================
   PAGINATION KANONIK (.dn-pagination) — SATU bentuk sitewide.
   Bungkus output paginate_links() (type 'plain' ATAU 'list') dgn
   <nav class="dn-pagination"> atau <div class="dn-pagination">.
   Ganti semua varian lama: #pagination, .ng-pager, .sr/.lu/.lib-
   pagination, .pagination-wrapx, .pagination. Token-only.
   ============================================================ */
/* Semua nilai visual lewat token --dn-pg-* (fallback = tampilan bawaan) —
   di-override Customizer (Desain — Modern Soft > Pagination). */
.dn-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--dn-pg-gap, 6px); margin-top: var(--dn-pg-mt, var(--dn-space-xl)); }
/* type='list' bungkus <ul><li> → biarkan mengalir ke flex container */
.dn-pagination ul.page-numbers, .dn-pagination li { display: contents; }
.dn-pagination a.page-numbers, .dn-pagination span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--dn-pg-size, 38px); height: var(--dn-pg-size, 38px); padding: 0 var(--dn-pg-padx, var(--dn-space-md));
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-semibold);
  color: var(--dn-pg-text, var(--dn-text-muted)); background: var(--dn-pg-bg, var(--dn-surface));
  border: var(--dn-pg-bw, 1px) solid var(--dn-pg-border, var(--dn-border)); border-radius: var(--dn-pg-radius, var(--dn-radius-pill));
  box-shadow: var(--dn-pg-shadow, none);
  text-decoration: none; white-space: nowrap; line-height: 1; box-sizing: border-box;
  transition: color var(--dn-transition), border-color var(--dn-transition), background var(--dn-transition);
}
.dn-pagination a.page-numbers:hover { color: var(--dn-pg-hover-text, var(--dn-brand-ink)); border-color: var(--dn-pg-hover-border, var(--dn-brand)); background: var(--dn-pg-hover-bg, var(--dn-brand-tint)); }
.dn-pagination .page-numbers.current { color: var(--dn-pg-active-text, var(--dn-on-brand)); background: var(--dn-pg-active-bg, var(--dn-brand)); border-color: var(--dn-pg-active-bg, var(--dn-brand)); }
.dn-pagination .page-numbers.dots { border-color: transparent; background: transparent; box-shadow: none; min-width: 0; }
/* Prev/Next berteks ("Next »" / "« Prev") = pill melebar, bukan dipaksa lingkaran
   38px seperti nomor (min-width jadi lantai → teks meluber). */
.dn-pagination a.page-numbers.next, .dn-pagination a.page-numbers.prev {
  min-width: 0; width: auto; flex: 0 0 auto; padding: 0 calc(var(--dn-pg-padx, var(--dn-space-md)) + 4px); gap: 4px;
}
.dn-pagination a.page-numbers:focus-visible { outline: none; box-shadow: var(--dn-ring); }
.dn-pagination .page-numbers svg { display: block; }
@media (max-width: 575px) {
  .dn-pagination a.page-numbers, .dn-pagination span.page-numbers { min-width: calc(var(--dn-pg-size, 38px) - 4px); height: calc(var(--dn-pg-size, 38px) - 4px); padding: 0 var(--dn-pg-padx, var(--dn-space-sm)); }
}
@media (prefers-reduced-motion: reduce) { .dn-pagination a.page-numbers { transition: none; } }

@media (max-width: 480px) {
  .dn-cards { grid-template-columns: repeat(2, 1fr); }
  .dn-card-title { font-size: .8rem; }
}

/* =====================================================================
 * READER — panel setelan (#kiri .chapter-sidebar) + toolbox: design system
 * Fase 2: restyle ke token (dark/tema-baca aware). Scope #kiri → menang
 * spesifisitas atas style.css legacy. Markup/JS/data-* TIDAK diubah.
 * ===================================================================== */
/* Bottom-sheet: muncul dari bawah (dulu geser dari samping). */
#kiri.chapter-sidebar {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  width: 100%; max-width: 560px; height: auto; max-height: 82vh; margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--dn-surface); color: var(--dn-text);
  border: 1px solid var(--dn-border); border-bottom: 0;
  border-radius: var(--dn-radius-card) var(--dn-radius-card) 0 0;
  box-shadow: var(--dn-shadow-pop);
  padding: 0; padding-bottom: env(safe-area-inset-bottom);
  font-family: var(--dn-font-body);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
#kiri.chapter-sidebar.show { transform: translateY(0); }
/* Matikan transisi sesaat saat set state-tertutup (anti animasi dari layout lama). */
#kiri.chapter-sidebar.dn-no-anim { transition: none !important; }
#kiri .chapter-sheet-grip {
  flex: none; width: 40px; height: 4px; margin: 10px auto 2px;
  background: var(--dn-surface-3); border-radius: var(--dn-radius-pill);
}
#kiri .sidebar-tabs {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--dn-space-sm) var(--dn-space-lg) var(--dn-space-xl);
}
#kiri .sidebar-close { top: 8px; right: 12px; }

.chapter-sheet-backdrop {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(16, 24, 40, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.chapter-sheet-backdrop.show { opacity: 1; visibility: visible; }

/* ===== Settings (cog) preview-friendly — body class di-set JS (openSheet) =====
 * Tujuan: drawer setelan TAK menutupi teks → preview live saat geser slider. */
/* Mobile / PC sempit: bottom-sheet PENDEK + backdrop tipis → teks atas tetap kelihatan. */
@media (max-width: 768px) {
  body.dn-sheet-cog #kiri.chapter-sidebar { max-height: 60vh; }
}
body.dn-sheet-cog .chapter-sheet-backdrop { background: rgba(16, 24, 40, .22); }

/* Desktop + ruang margin cukup: drawer melayang di pinggir kiri m-card.
 * Tanpa backdrop gelap & tanpa lock-scroll → teks bisa di-scroll, preview live.
 * Tutup via tombol X / Escape. JS set --dn-set-left & --dn-set-w (px). */
body.dn-set-side .chapter-sheet-backdrop { background: transparent; pointer-events: none; }
body.dn-set-side #kiri.chapter-sidebar {
  z-index: 100000;
  top: 80px; bottom: 16px; left: auto; right: var(--dn-set-right, 12px); margin: 0;
  width: var(--dn-set-w, 360px); max-width: var(--dn-set-w, 360px);
  height: auto; max-height: calc(100vh - 96px);
  border-radius: var(--dn-radius-card);
  transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .24s ease;
  /* tertutup: tuck ke KIRI (off margin) + invisible; slide masuk ke kanan saat .show */
  transform: translateX(-100%);
  opacity: 0; pointer-events: none;
}
body.dn-set-side #kiri.chapter-sidebar.show {
  transform: translateX(0);
  opacity: 1; pointer-events: auto;
}
body.dn-set-side #kiri .chapter-sheet-grip { display: none; }
#kiri h4 {
  font-family: var(--dn-font-head);
  font-size: var(--dn-fs-h3);
  font-weight: var(--dn-fw-bold);
  line-height: var(--dn-leading-tight) !important;   /* kalahkan .font-weight-bold{line-height:.01} */
  color: var(--dn-text);
  margin: 0 0 var(--dn-space-sm);
}
#kiri hr {
  border: 0; border-top: 1px solid var(--dn-border);
  margin: 0 0 var(--dn-space-md);
}
#kiri .sidebar-close {
  position: absolute; right: 14px; top: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--dn-radius-pill);
  color: var(--dn-text-muted); background: var(--dn-surface-2);
  cursor: pointer; transition: var(--dn-transition);
}
#kiri .sidebar-close:hover { color: var(--dn-brand-ink); background: var(--dn-brand-tint); }
#kiri .sidebar-close .material-icons { font-size: 20px; }

#kiri .chapter-sidebar-menu { margin-bottom: var(--dn-space-lg); }
#kiri .chapter-sidebar-title {
  font-family: var(--dn-font-head);
  font-size: var(--dn-fs-xs);
  font-weight: var(--dn-fw-bold);
  letter-spacing: var(--dn-tracking-wide);
  text-transform: uppercase;
  color: var(--dn-text-muted);
  margin: 0 0 var(--dn-space-sm);
  display: flex; align-items: center; gap: 6px;
}
#kiri .chapter-sidebar-title .material-icons { font-size: 16px; cursor: pointer; color: var(--dn-text-faint); }
#kiri .chapter-sidebar-title .material-icons:hover { color: var(--dn-brand); }

/* Font picker → chips */
#kiri .inline-menu { display: flex; flex-wrap: wrap; gap: 6px; }
#kiri .inline-menu li { margin: 0; }
#kiri .inline-menu li > a {
  display: inline-block; padding: 6px 12px;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); line-height: 1.2;
  color: var(--dn-text); background: var(--dn-surface-2);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill);
  text-decoration: none; transition: var(--dn-transition);
}
#kiri .inline-menu li > a:hover,
#kiri .inline-menu li > a:focus-visible {
  color: var(--dn-brand-ink); background: var(--dn-brand-tint);
  border-color: var(--dn-brand); outline: none;
}

/* Background swatches → lingkaran */
#kiri .menu-inline { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
#kiri .menu-inline li { margin: 0; }
#kiri .menu-inline li > a {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--dn-border); box-shadow: var(--dn-shadow-sm);
  margin: 0; transition: var(--dn-transition);
}
#kiri .menu-inline li > a:hover,
#kiri .menu-inline li > a:focus-visible { border-color: var(--dn-brand); transform: scale(1.08); outline: none; }

/* Size stepper */
#kiri .menu-section.d-flex { align-items: center; gap: var(--dn-space-sm); }
#kiri .menu-section.d-flex li { margin: 0; }
#kiri .menu-section.d-flex a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--dn-text);
  background: var(--dn-surface-2); border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control); transition: var(--dn-transition);
}
#kiri .menu-section.d-flex a:hover { color: var(--dn-brand-ink); background: var(--dn-brand-tint); border-color: var(--dn-brand); }
#kiri #chapter-size-indicator {
  display: inline-block; min-width: 30px; text-align: center;
  font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold); color: var(--dn-text);
}

/* Line-height select */
#kiri select {
  width: 100%; padding: 9px 12px; font-family: var(--dn-font-body); font-size: var(--dn-fs-sm);
  color: var(--dn-text); background: var(--dn-surface); border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control); cursor: pointer; transition: var(--dn-transition);
}
#kiri select:focus { outline: none; border-color: var(--dn-brand); box-shadow: var(--dn-ring); }

/* Glossary checkbox */
#kiri .form-check-input { accent-color: var(--dn-brand); width: 16px; height: 16px; cursor: pointer; }
#kiri .labelraw { color: var(--dn-text); font-size: var(--dn-fs-sm); margin-left: 4px; cursor: pointer; }

/* Tab Chapters */
#kiri #page_position { width: 100%; }
#kiri #chapter-list-sidebar a { color: var(--dn-text); }
#kiri #chapter-list-sidebar a:hover { color: var(--dn-brand-ink); }

/* Toolbox kanan — token dark-aware (redesain penuh di Fase 3) */
#kiri a { text-decoration: none; }

/* ===== Reader Settings (#tab-cog) — komponen .dn-set (modern, state aktif) ===== */
#kiri .dn-set { display: flex; flex-direction: column; gap: var(--dn-space-lg); }
#kiri .dn-set__group { display: flex; flex-direction: column; gap: var(--dn-space-sm); }
#kiri .dn-set__group--row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--dn-space-md); }
#kiri .dn-set__label {
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--dn-text-muted);
}

#kiri .dn-set__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
#kiri .dn-set__chips li { margin: 0; }
#kiri .dn-set__chip {
  display: inline-block; padding: 7px 13px; cursor: pointer;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-medium); line-height: 1.1;
  color: var(--dn-text); background: var(--dn-surface-2);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill);
  text-decoration: none; transition: var(--dn-transition);
}
#kiri .dn-set__chip:hover { border-color: var(--dn-brand); color: var(--dn-brand-ink); }
#kiri .dn-set__chip.is-active { color: var(--dn-on-brand); background: var(--dn-brand); border-color: var(--dn-brand); }
#kiri .dn-set__chip:focus-visible { outline: none; box-shadow: var(--dn-ring); }

#kiri .dn-set__swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
#kiri .dn-set__swatches li { margin: 0; }
#kiri .dn-set__swatch {
  position: relative; display: block; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--dn-border); box-shadow: var(--dn-shadow-sm); cursor: pointer;
  transition: transform var(--dn-transition), box-shadow var(--dn-transition);
}
#kiri .dn-set__swatch:hover { transform: scale(1.08); }
#kiri .dn-set__swatch.is-active { border-color: var(--dn-brand); box-shadow: 0 0 0 3px var(--dn-brand-tint); }
#kiri .dn-set__swatch.is-active::after {
  content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--dn-brand); text-shadow: 0 1px 2px rgba(255, 255, 255, .7);
}

#kiri .dn-set__stepper { display: inline-flex; align-items: center; gap: var(--dn-space-sm); }
#kiri .dn-set__step, #kiri .dn-set__reset {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  color: var(--dn-text); background: var(--dn-surface-2);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
  transition: var(--dn-transition);
}
#kiri .dn-set__step:hover, #kiri .dn-set__reset:hover { color: var(--dn-brand-ink); background: var(--dn-brand-tint); border-color: var(--dn-brand); }
#kiri .dn-set__step .material-icons, #kiri .dn-set__reset .material-icons { font-size: 18px; }
#kiri .dn-set__reset { color: var(--dn-text-muted); margin-left: var(--dn-space-xs); }
#kiri .dn-set__val {
  min-width: 34px; text-align: center;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-base); font-weight: var(--dn-fw-semibold); color: var(--dn-text);
}
#kiri .dn-set__step:focus-visible, #kiri .dn-set__reset:focus-visible { outline: none; box-shadow: var(--dn-ring); }

#kiri .dn-set__switches { display: flex; flex-flow: row wrap; align-items: center; gap: var(--dn-space-md) var(--dn-space-xl); }

/* Slider (font size / line height / page width) */
#kiri .dn-set__group--slider { gap: 6px; }
#kiri .dn-set__sliderhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dn-space-sm); }
#kiri .dn-set__hint-inline { font-family: var(--dn-font-body); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-normal); letter-spacing: 0; text-transform: none; color: var(--dn-text-faint); }
#kiri .dn-set__slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 6px 0; padding: 0;
  background: var(--dn-surface-3); border-radius: var(--dn-radius-pill); cursor: pointer; outline: none;
}
#kiri .dn-set__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--dn-brand); border: 2px solid var(--dn-surface); box-shadow: var(--dn-shadow-sm); cursor: pointer;
}
#kiri .dn-set__slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--dn-brand);
  border: 2px solid var(--dn-surface); box-shadow: var(--dn-shadow-sm); cursor: pointer;
}
#kiri .dn-set__slider:focus-visible { box-shadow: var(--dn-ring); }

#kiri .dn-set__resetbtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; cursor: pointer;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-semibold);
  color: var(--dn-text); background: var(--dn-surface-2);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control); transition: var(--dn-transition);
}
#kiri .dn-set__resetbtn:hover { color: var(--dn-brand-ink); background: var(--dn-brand-tint); border-color: var(--dn-brand); }
#kiri .dn-set__resetbtn .material-icons { font-size: 16px; }
#kiri .dn-set__resetbtn:focus-visible { outline: none; box-shadow: var(--dn-ring); }
#kiri .dn-set__raw { display: flex; align-items: center; gap: 10px; }
#kiri .dn-set__raw .switch { flex: none; }
#kiri .dn-set__raw-txt { font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); color: var(--dn-text); }
#kiri .dn-set__hint { margin: 6px 0 0; font-family: var(--dn-font-body); font-size: var(--dn-fs-xs); color: var(--dn-text-faint); }

/* Jarak teks dari chapter-nav atas (dulu spacer = tombol Settings yg dibuang). */
body.mycap #entry-content { margin-top: var(--dn-space-xl); }

/* Lebar HALAMAN (.m-card) via slider → --reader-card-w. Container dikasih headroom.
   PENTING: <article> di-cap `max-width:760px;float:left` (header-chapter.php) → itu
   limiter sebenarnya. Override di reader supaya ikut --reader-card-w. Mobile aman. */
body.mycap main.container { max-width: 1320px; }
body.mycap article.post.no-sidebar {
  max-width: var(--reader-card-w, 760px);
  float: none; margin-left: auto; margin-right: auto;
}
body.mycap article.post.no-sidebar .m-card.single-page { max-width: 100%; }
/* .post-content default di-cap 80ch (~760px) → di reader ikut lebar card (slider Page width) */
body.mycap article.post.no-sidebar .post-content { max-width: 100%; }

/* #2 Paragraph spacing — jarak antar blok paragraf via slider. Override .mb-4 (bootstrap !important). */
body.mycap #entry-content .text-raw-translate,
body.mycap #entry-content .par,
body.mycap #entry-content > p { margin-bottom: var(--reader-para-space, 24px) !important; }

/* #7 Justify — rata kanan-kiri teks terjemahan (toggle body.dn-justify) */
body.mycap.dn-justify #entry-content .text-translate,
body.mycap.dn-justify #entry-content .par,
body.mycap.dn-justify #entry-content > p { text-align: justify; text-justify: inter-word; }

/* #12 Screen dimmer — overlay gelap full-screen, opacity diatur slider; klik tembus.
   z-index 40 = di atas konten + header (25), di bawah panel setting/modal/toast → kontrol tetap terang. */
#dn-dimmer {
  position: fixed; inset: 0; z-index: 40;
  background: #000; opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* Daftar chapter (bottom-sheet) — baris bersih + highlight chapter aktif */
#kiri #chapter-list-sidebar { margin: 0; }
#kiri .chap-list { list-style: none; margin: 0; padding: 0; }
#kiri .chap-item { margin: 0; }
#kiri .chap-item + .chap-item { border-top: 1px solid var(--dn-border); }
#kiri .chap-item a {
  display: block; padding: 13px 12px;
  color: var(--dn-text); font-size: var(--dn-fs-base); line-height: 1.5;
  text-decoration: none; border-radius: var(--dn-radius-control);
  transition: background var(--dn-transition), color var(--dn-transition);
}
/* Filter cepat daftar chapter */
#kiri .chap-filter {
  width: 100%; box-sizing: border-box; margin-bottom: var(--dn-space-md); padding: 10px 12px;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-base);
  color: var(--dn-text); background: var(--dn-surface);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
  transition: var(--dn-transition);
}
#kiri .chap-filter::placeholder { color: var(--dn-text-faint); }
#kiri .chap-filter:focus { outline: none; border-color: var(--dn-brand); box-shadow: var(--dn-ring); }
#kiri .chap-item.is-hidden { display: none; }

/* Desktop: angkat sheet dari tepi bawah + sudut membulat penuh (bukan nempel dasar) */
@media (min-width: 768px) {
  #kiri.chapter-sidebar {
    bottom: 5vh; max-height: 80vh;
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius-card);
    /* offset bottom:5vh harus ikut digeser saat sembunyi, kalau tidak 5vh nyembul */
    transform: translateY(calc(100% + 6vh));
  }
  #kiri.chapter-sidebar.show { transform: translateY(0); }
}
#kiri .chap-item a:hover { background: var(--dn-surface-2); color: var(--dn-brand-ink); }
#kiri .chap-item.is-current a {
  background: var(--dn-brand-tint); color: var(--dn-brand-ink);
  font-weight: var(--dn-fw-semibold); box-shadow: inset 3px 0 0 var(--dn-brand);
}
/* Sudah dibaca: teks redup + centang di kanan */
#kiri .chap-item.is-read a {
  color: var(--dn-text-faint);
  display: flex; align-items: center; gap: 8px;
}
#kiri .chap-item.is-read a::after {
  content: "\2713"; margin-left: auto; flex: none;
  font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-bold); color: var(--dn-brand);
}
#kiri .chap-item.is-read a:hover { color: var(--dn-brand-ink); }
#kiri .chap-loading {
  display: flex; align-items: center; gap: 8px; padding: 18px 12px;
  color: var(--dn-text-muted); font-size: var(--dn-fs-sm);
}
#kiri .chap-loading .nid-spin { border-color: rgba(0, 0, 0, .18); border-top-color: var(--dn-brand); }
#kiri .chap-empty { padding: 18px 12px; color: var(--dn-text-faint); font-size: var(--dn-fs-sm); }
#kiri .chap-empty a { color: var(--dn-brand-ink); }

@media (prefers-reduced-motion: reduce) {
  #kiri.chapter-sidebar, .chapter-sheet-backdrop { transition: none; }
}

/* =====================================================================
 * READER — Fase 3: toolbox aksi (#toolbox-settings)
 * Desktop: rail pill mengambang kanan + tooltip label kiri saat hover.
 * Mobile (≤500px): bar bawah penuh, target sentuh besar, safe-area.
 * Markup/JS tak diubah; aria-label dipakai utk tooltip + a11y.
 * ===================================================================== */
#toolbox-settings { right: 10px; }
#toolbox-settings ul {
  display: flex; flex-direction: column; gap: 2px;
  list-style: none; margin: 0; padding: 5px;
  background: var(--dn-surface);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-pill);
  box-shadow: var(--dn-shadow-pop);
}
#toolbox-settings ul li { border: 0; margin: 0; }
#toolbox-settings ul li > a {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0 !important;
  color: var(--dn-text-muted);
  border-radius: var(--dn-radius-pill);
  transition: var(--dn-transition);
}
#toolbox-settings ul li > a:hover,
#toolbox-settings ul li > a:focus-visible {
  color: var(--dn-brand); background: var(--dn-brand-tint); outline: none;
}
#toolbox-settings .material-icons { font-size: 22px; line-height: 1; }
/* Bookmark di rail: samakan dgn ikon lain (transparan, tanpa border/bg tombol).
   list-but-add/in dirancang utk tombol-teks listing (bg+border) → netralkan di rail.
   Saat tersimpan, a.list-but-in tetap mewarisi color:brand (icon teal = penanda saved). */
#toolbox-settings a.list-but-add,
#toolbox-settings a.list-but-in { border: 0 !important; background: transparent !important; }
#toolbox-settings a.list-but-add:hover,
#toolbox-settings a.list-but-in:hover { background: var(--dn-brand-tint) !important; }

/* Tooltip label (desktop) */
@media (min-width: 501px) {
  #toolbox-settings a[aria-label]::after {
    content: attr(aria-label);
    position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    background: var(--dn-text); color: var(--dn-bg);
    font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-semibold);
    letter-spacing: .01em; white-space: nowrap;
    padding: 5px 10px; border-radius: var(--dn-radius-sm);
    box-shadow: var(--dn-shadow-card);
    opacity: 0; pointer-events: none; transition: opacity var(--dn-transition);
  }
  #toolbox-settings a[aria-label]:hover::after,
  #toolbox-settings a[aria-label]:focus-visible::after { opacity: 1; }
}

/* Mobile: bar bawah */
@media (max-width: 500px) {
  #toolbox-settings ul {
    flex-direction: row; gap: 0;
    border-radius: 0;
    border: 0; border-top: 1px solid var(--dn-border);
    box-shadow: 0 -6px 20px rgba(16, 24, 40, .12);
    padding: 4px max(6px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  #toolbox-settings ul li { flex: 1 1 0; }
  #toolbox-settings ul li > a {
    width: 100%; height: 50px; border-radius: var(--dn-radius-control);
  }
  #toolbox-settings a[aria-label]::after { content: none; }  /* tak ada tooltip di sentuh */

  /* #5 Auto-hide saat scroll turun (mobile). id+class menang atas .chapter-toolbox{...!important}. */
  #toolbox-settings.dn-tb-hidden { transform: translateY(110%) !important; }
}

/* =====================================================================
 * READER — Fase 4b: modal (report/glossary/login/replacer) ke token.
 * Scope .modal.fade-scale → khusus modal reader (tak ganggu .dn-glossary).
 * Markup/JS open-close tak diubah.
 * ===================================================================== */
.modal.fade-scale .modal-content {
  background: var(--dn-surface);
  color: var(--dn-text);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card);
  box-shadow: var(--dn-shadow-pop);
  overflow: hidden;
}
.modal.fade-scale .modal-header {
  align-items: center;
  padding: var(--dn-space-md) var(--dn-space-lg);
  border-bottom: 1px solid var(--dn-border);
}
.modal.fade-scale .modal-title {
  font-family: var(--dn-font-head);
  font-size: var(--dn-fs-h3);
  font-weight: var(--dn-fw-bold);
  line-height: var(--dn-leading-tight);
  color: var(--dn-text);
}
.modal.fade-scale .modal-header .close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 0; padding: 0;
  font-size: 22px; color: var(--dn-text-muted);
  background: var(--dn-surface-2); border: 0; border-radius: var(--dn-radius-pill);
  opacity: 1; text-shadow: none; cursor: pointer; transition: var(--dn-transition);
}
.modal.fade-scale .modal-header .close:hover { color: var(--dn-danger); background: var(--dn-danger-tint); }
.modal.fade-scale .modal-body { padding: var(--dn-space-lg); }
.modal.fade-scale .modal-body label,
.modal.fade-scale .col-form-label {
  display: inline-block; margin-bottom: 6px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-semibold);
  color: var(--dn-text);
}
.modal.fade-scale .form-control {
  display: block; width: 100%; box-sizing: border-box;
  padding: 9px 12px; margin-bottom: 4px;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-base);
  color: var(--dn-text); background: var(--dn-surface);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
  transition: var(--dn-transition);
}
.modal.fade-scale .form-control::placeholder { color: var(--dn-text-faint); }
.modal.fade-scale .form-control:focus { outline: none; border-color: var(--dn-brand); box-shadow: var(--dn-ring); }
.modal.fade-scale textarea.form-control { min-height: 96px; resize: vertical; }
.modal.fade-scale .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: var(--dn-space-md); padding: 10px 18px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-base); font-weight: var(--dn-fw-semibold);
  color: var(--dn-on-brand); background: var(--dn-btn-bg); border: 1px solid transparent;
  border-radius: var(--dn-btn-radius); box-shadow: var(--dn-shadow-sm);
  cursor: pointer; transition: var(--dn-transition);
}
.modal.fade-scale .btn-primary:hover { background: var(--dn-btn-bg-hover); box-shadow: var(--dn-shadow-hover); transform: translateY(-1px); }

/* =====================================================================
 * READER — Fase 5: aksesibilitas (fokus keyboard + reduced-motion)
 * ===================================================================== */
/* Hormati prefers-reduced-motion: matikan animasi/transisi/auto-scroll */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Fokus keyboard terlihat (ring brand) pada kontrol reader */
.chapter-nav .prev:focus-visible,
.chapter-nav .toc:focus-visible,
.chapter-nav .next:focus-visible,
button#settings:focus-visible,
#settings-btn .edit-btn:focus-visible,
.modal.fade-scale .btn-primary:focus-visible,
.modal.fade-scale .close:focus-visible {
  outline: none;
  box-shadow: var(--dn-ring);
}
.modal.fade-scale .form-control:focus-visible {
  outline: none; border-color: var(--dn-brand); box-shadow: var(--dn-ring);
}
/* fallback fokus tautan dalam reader */
body.mycap a:focus-visible {
  outline: 2px solid var(--dn-brand); outline-offset: 2px; border-radius: var(--dn-radius-sm);
}

/* =====================================================================
 * ADD GLOSSARY — modal mandiri (.dn-gloss). Desktop: dialog tengah.
 * Mobile: bottom-sheet (slide-up + grip). Lepas dari .modal (jquery-modal/
 * bootstrap) supaya tak bentrok. Signature: dua field "asli → terjemahan"
 * dihubungkan node panah + chip preview hidup. z-index < toast (99999).
 * ===================================================================== */
.dn-gloss[hidden] { display: none; }
.dn-gloss {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; align-items: center; justify-content: center;
  padding: var(--dn-space-lg);
}
.dn-gloss__backdrop {
  position: absolute; inset: 0;
  background: rgba(16, 24, 40, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--dn-transition);
}
.dn-gloss.is-open .dn-gloss__backdrop { opacity: 1; }

.dn-gloss__sheet {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 440px;
  max-height: calc(100vh - 2 * var(--dn-space-lg));
  background: var(--dn-surface); color: var(--dn-text);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card);
  box-shadow: var(--dn-shadow-pop);
  overflow: hidden;
  opacity: 0; transform: translateY(8px) scale(.985);
  transition: opacity var(--dn-transition), transform var(--dn-transition);
}
.dn-gloss.is-open .dn-gloss__sheet { opacity: 1; transform: none; }

.dn-gloss__grip { display: none; }

.dn-gloss__head {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dn-space-md);
  padding: var(--dn-space-lg) var(--dn-space-lg) var(--dn-space-md);
  border-bottom: 1px solid var(--dn-border);
}
.dn-gloss__eyebrow {
  display: block; margin-bottom: 2px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-bold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--dn-brand);
}
.dn-gloss__title {
  margin: 0;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-h3); font-weight: var(--dn-fw-bold);
  line-height: var(--dn-leading-tight); color: var(--dn-text);
}
.dn-gloss__x {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  color: var(--dn-text-muted); background: var(--dn-surface-2);
  border: 0; border-radius: var(--dn-radius-pill);
  transition: var(--dn-transition);
}
.dn-gloss__x:hover { color: var(--dn-danger); background: var(--dn-danger-tint); }
.dn-gloss__x:focus-visible { outline: none; box-shadow: var(--dn-ring); }
.dn-gloss__x svg { fill: currentColor; }

.dn-gloss__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--dn-space-lg);
}

.dn-gloss__map {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--dn-space-sm);
  margin-bottom: var(--dn-space-lg);
}
.dn-gloss__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 5px;
  color: var(--dn-brand); background: var(--dn-brand-tint);
  border-radius: var(--dn-radius-pill);
}
.dn-gloss__arrow svg { fill: currentColor; }

.dn-gloss__field { display: flex; flex-direction: column; margin-bottom: var(--dn-space-lg); }
.dn-gloss__map .dn-gloss__field { margin-bottom: 0; }
.dn-gloss__field label {
  display: block; width: auto; /* timpa global label{width:92px} (cegah teks ke-clip/wrap) */
  margin-bottom: 6px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-semibold);
  color: var(--dn-text);
}
.dn-gloss__opt {
  font-family: var(--dn-font-body); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-normal);
  color: var(--dn-text-faint); letter-spacing: 0; text-transform: none;
}
.dn-gloss__field input,
.dn-gloss__field textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-base);
  color: var(--dn-text); background: var(--dn-surface);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
  transition: var(--dn-transition);
}
.dn-gloss__field textarea { min-height: 84px; resize: vertical; }
.dn-gloss__field input::placeholder,
.dn-gloss__field textarea::placeholder { color: var(--dn-text-faint); }
.dn-gloss__field input:focus,
.dn-gloss__field textarea:focus {
  outline: none; border-color: var(--dn-brand); box-shadow: var(--dn-ring);
}

.dn-gloss__preview {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--dn-space-sm);
  margin: 0 0 var(--dn-space-lg); padding: var(--dn-space-sm) var(--dn-space-md);
  background: var(--dn-surface-2); border-radius: var(--dn-radius-control);
}
.dn-gloss__preview svg { flex: none; fill: var(--dn-text-faint); }
.dn-gloss__chip {
  max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-medium);
  color: var(--dn-text);
}
.dn-gloss__chip--to { color: var(--dn-brand); }

.dn-gloss__actions { display: flex; gap: var(--dn-space-sm); justify-content: flex-end; }
.dn-gloss__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; cursor: pointer;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-base); font-weight: var(--dn-fw-semibold);
  border: 1px solid transparent; border-radius: var(--dn-btn-radius);
  transition: var(--dn-transition);
}
.dn-gloss__btn--ghost { color: var(--dn-text-muted); background: transparent; border-color: var(--dn-border); }
.dn-gloss__btn--ghost:hover { color: var(--dn-text); background: var(--dn-surface-2); }
.dn-gloss__btn--primary { color: var(--dn-on-brand); background: var(--dn-btn-bg); box-shadow: var(--dn-shadow-sm); }
.dn-gloss__btn--primary:hover { background: var(--dn-btn-bg-hover); box-shadow: var(--dn-shadow-hover); transform: translateY(-1px); }
.dn-gloss__btn:focus-visible { outline: none; box-shadow: var(--dn-ring); }
.dn-gloss__btn[disabled] { opacity: .7; cursor: default; transform: none; }

.dn-gloss__alt {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: var(--dn-space-lg) 0 0;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-sm);
}
.dn-gloss__alt a { color: var(--dn-brand-ink); }
.dn-gloss__alt a:hover { text-decoration: underline; }
.dn-gloss__alt span { color: var(--dn-text-faint); }

/* Selection "Edit word" — chip mengambang (pemicu Replacer). Selector JS: ul.tools#tels / .tools li */
ul.tools { display: none; position: absolute; z-index: 9999999; margin: 0; padding: 0; list-style: none; }
ul.tools li {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  margin: 0; padding: 7px 13px; cursor: pointer;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-semibold);
  color: var(--dn-on-brand); background: var(--dn-brand);
  border-radius: var(--dn-radius-pill); box-shadow: var(--dn-shadow-pop);
  transition: var(--dn-transition);
}
ul.tools li:hover { background: var(--dn-brand-strong); transform: translateY(-1px); }
ul.tools li svg { fill: currentColor; flex: none; }

body.dn-gloss-lock { overflow: hidden; }

/* Mobile → bottom-sheet */
@media (max-width: 560px) {
  .dn-gloss { align-items: flex-end; padding: 0; }
  .dn-gloss__sheet {
    max-width: none; max-height: 92vh;
    border-radius: var(--dn-radius-card) var(--dn-radius-card) 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
  }
  .dn-gloss.is-open .dn-gloss__sheet { transform: none; }
  .dn-gloss__grip {
    display: block; flex: none; width: 38px; height: 4px; margin: 8px auto 0;
    background: var(--dn-surface-3); border-radius: var(--dn-radius-pill);
  }
  .dn-gloss__head { padding-top: var(--dn-space-md); }
  .dn-gloss__map { grid-template-columns: 1fr; gap: var(--dn-space-xs); }
  .dn-gloss__map .dn-gloss__field { margin-bottom: var(--dn-space-sm); }
  .dn-gloss__arrow { margin: 0 auto; width: 26px; height: 26px; transform: rotate(90deg); }
  /* Tombol aksi (Cancel + submit) TETAP jejer di mobile spt desktop: cancel kiri,
     submit hijau kanan (urutan DOM). Bagi rata lebar biar target tap enak. */
  .dn-gloss__actions { flex-direction: row; }
  .dn-gloss__actions .dn-gloss__btn { flex: 1 1 0; width: auto; }
  /* Tombol dn-gloss di luar baris aksi (mis. Reply di foot thread) tetap full-width. */
  .dn-gloss__btn { width: 100%; }
}

/* Report — caption + quick-reason chips + textarea lebih tinggi */
.dn-gloss__caption {
  display: block; margin-bottom: 6px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-semibold);
  color: var(--dn-text);
}
.dn-gloss__reasons { display: flex; flex-wrap: wrap; gap: var(--dn-space-sm); margin-bottom: var(--dn-space-lg); }
.dn-gloss__reason {
  padding: 6px 13px; cursor: pointer;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-medium);
  color: var(--dn-text-muted); background: var(--dn-surface-2);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill);
  transition: var(--dn-transition);
}
.dn-gloss__reason:hover { color: var(--dn-text); border-color: var(--dn-text-faint); }
.dn-gloss__reason.is-active { color: var(--dn-on-brand); background: var(--dn-brand); border-color: var(--dn-brand); }
.dn-gloss__reason:focus-visible { outline: none; box-shadow: var(--dn-ring); }
#modal-report .dn-gloss__field textarea { min-height: 120px; }

/* Report Novel (2026-07-04) — accordion kategori + opsi radio + grid checkbox.
   Numpang sistem modal .dn-gloss; token-only. */
.dn-rep__group {
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-card);
  margin-bottom: var(--dn-space-sm); overflow: hidden;
  background: var(--dn-surface);
}
.dn-rep__group.is-open { border-color: var(--dn-text-faint); }
.dn-rep__ghead {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 11px 14px; cursor: pointer; text-align: left;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-semibold);
  color: var(--dn-text); background: transparent; border: 0;
}
.dn-rep__ghead svg { flex: none; transition: transform var(--dn-transition); color: var(--dn-text-faint); }
.dn-rep__group.is-open .dn-rep__ghead svg { transform: rotate(180deg); }
.dn-rep__ghead:focus-visible { outline: none; box-shadow: inset var(--dn-ring); }
.dn-rep__panel { padding: 0 10px 10px; }
.dn-rep__opt {
  display: flex; align-items: center; gap: 10px; width: auto;
  margin: 0 0 6px; padding: 10px 12px; cursor: pointer;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-medium);
  color: var(--dn-text-muted); background: var(--dn-surface-2);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
  transition: var(--dn-transition);
}
.dn-rep__opt:hover { color: var(--dn-text); border-color: var(--dn-text-faint); }
.dn-rep__opt input { accent-color: var(--dn-brand); margin: 0; flex: none; }
.dn-rep__opt:has(input:checked) { color: var(--dn-on-brand); background: var(--dn-brand); border-color: var(--dn-brand); }
.dn-rep__opt:has(input:focus-visible) { box-shadow: var(--dn-ring); }
.dn-rep__fields { margin: 2px 0 10px; padding: 10px 12px; background: var(--dn-surface-2); border-radius: var(--dn-radius-control); }
.dn-rep__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dn-rep__checks label {
  display: flex; align-items: center; gap: 8px; width: auto; margin: 0;
  padding: 8px 10px; cursor: pointer;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm);
  color: var(--dn-text-muted); background: var(--dn-surface);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
  transition: var(--dn-transition);
}
.dn-rep__checks label:hover { color: var(--dn-text); border-color: var(--dn-text-faint); }
.dn-rep__checks input { accent-color: var(--dn-brand); margin: 0; flex: none; }
.dn-rep__checks label:has(input:checked) { color: var(--dn-brand-ink); border-color: var(--dn-brand); background: var(--dn-brand-tint); }
.dn-gloss__btn--primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 480px) { .dn-rep__checks { grid-template-columns: 1fr; } }

/* Replacer — switch CSS (case sensitive / bold) + tabel aturan aktif */
.dn-gloss__switches { display: flex; flex-flow: row wrap; align-items: center; gap: var(--dn-space-md) var(--dn-space-xl); margin-bottom: var(--dn-space-lg); }
/* width:auto MENIMPA global `label{width:92px}` (header-chapter.php) yg bikin switch tabrakan */
.dn-switch { display: inline-flex; width: auto; align-items: center; gap: 10px; cursor: pointer; }
.dn-switch__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dn-switch__track {
  position: relative; flex: none; width: 42px; height: 24px;
  background: var(--dn-surface-3); border-radius: var(--dn-radius-pill);
  transition: var(--dn-transition);
}
.dn-switch__track::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; box-shadow: var(--dn-shadow-sm);
  transition: var(--dn-transition);
}
.dn-switch__input:checked + .dn-switch__track { background: var(--dn-brand); }
.dn-switch__input:checked + .dn-switch__track::before { transform: translateX(18px); }
.dn-switch__input:focus-visible + .dn-switch__track { box-shadow: var(--dn-ring); }
.dn-switch__label { font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-semibold); color: var(--dn-text); white-space: nowrap; }

.dn-gloss__rules { margin-top: var(--dn-space-md); padding-top: var(--dn-space-lg); border-top: 1px solid var(--dn-border); }
.dn-gloss__tablewrap {
  max-height: 320px; overflow: auto;
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
}
.dn-gloss__count {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-bold);
  color: var(--dn-brand); background: var(--dn-brand-tint); border-radius: var(--dn-radius-pill);
  vertical-align: middle;
}
.dn-gloss__table { width: 100%; border-collapse: collapse; font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); }
.dn-gloss__table th {
  position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
  padding: 9px 10px; background: var(--dn-surface-2); color: var(--dn-text-muted);
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-bold);
  letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--dn-border);
}
.dn-gloss__table td { padding: 8px 10px; color: var(--dn-text); border-bottom: 1px solid var(--dn-border); vertical-align: middle; word-break: break-word; }
.dn-gloss__table tr:last-child td { border-bottom: 0; }
.dn-gloss__empty { text-align: center; color: var(--dn-text-faint); padding: 18px 10px !important; }
.dn-gloss__rowact { display: flex; gap: 6px; }
.dn-gloss__iconbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; cursor: pointer;
  color: var(--dn-text-muted); background: var(--dn-surface);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-sm);
  transition: var(--dn-transition);
}
.dn-gloss__iconbtn .material-icons { font-size: 16px; line-height: 1; }
.dn-gloss__iconbtn--edit:hover { color: var(--dn-brand); border-color: var(--dn-brand); }
.dn-gloss__iconbtn--del:hover { color: var(--dn-danger); border-color: var(--dn-danger); background: var(--dn-danger-tint); }
.dn-gloss__iconbtn:focus-visible { outline: none; box-shadow: var(--dn-ring); }
.dn-gloss__iconbtn:disabled { opacity: .4; cursor: default; }

/* Replacer skala (§14): toolbar search+import/export & pager tabel */
.dn-gloss__toolbar { display: flex; align-items: center; gap: var(--dn-space-sm); margin: var(--dn-space-sm) 0; }
.dn-gloss__search {
  flex: 1 1 auto; min-width: 0; padding: 7px 10px;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-sm);
  color: var(--dn-text); background: var(--dn-surface);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
  transition: var(--dn-transition);
}
.dn-gloss__search::placeholder { color: var(--dn-text-faint); }
.dn-gloss__search:focus { outline: none; border-color: var(--dn-brand); box-shadow: var(--dn-ring); }
.dn-gloss__btn--sm { padding: 6px 12px; font-size: var(--dn-fs-xs); }
.dn-gloss__pager { display: flex; align-items: center; justify-content: center; gap: var(--dn-space-sm); margin-top: var(--dn-space-sm); }
.dn-gloss__pageinfo { font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); color: var(--dn-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .dn-gloss__backdrop, .dn-gloss__sheet { transition: none; }
  .dn-switch__track, .dn-switch__track::before { transition: none; }
}

/* =====================================================================
 * Halaman hasil pencarian (/?s=) — kartu novel modern, responsif, ringan
 * ===================================================================== */
/* offset header fixed (section-page tak punya margin-top:96px seperti main.container) */
.nid-search { padding: 96px 0 var(--dn-space-xl); }
@media (max-width: 1112px) { .nid-search { padding-top: 70px; } }
/* padding samping container (theme .container tanpa padding → bootstrap .row margin negatif
   bikin overflow kanan di mobile; +16px mengompensasi & menyelaraskan header dgn kartu). */
.nid-search .container { max-width: var(--dn-page-w); margin: 0 auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
.nid-search .breadcrumb {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 var(--dn-space-md); padding: 0;
  background: transparent; border-radius: 0;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-xs); color: var(--dn-text-faint);
}
.nid-search .breadcrumb-item + .breadcrumb-item::before { content: "/"; margin-right: 6px; color: var(--dn-text-faint); }
.nid-search .breadcrumb-item a { color: var(--dn-text-muted); text-decoration: none; }
.nid-search .breadcrumb-item a:hover { color: var(--dn-brand-ink); }
.nid-search .breadcrumb-item.active { color: var(--dn-text-muted); }

/* Header query */
.sr-head {
  margin: var(--dn-space-md) 0 var(--dn-space-xl);
  padding-bottom: var(--dn-space-lg);
  border-bottom: 1px solid var(--dn-border);
}
.sr-eyebrow {
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-semibold);
  letter-spacing: var(--dn-tracking-wide); text-transform: uppercase; color: var(--dn-text-faint);
}
.sr-title-main {
  margin: 6px 0 4px;
  font-family: var(--dn-font-display); font-weight: var(--dn-fw-semibold);
  font-size: var(--dn-fs-h1); line-height: 1.1; letter-spacing: var(--dn-tracking-tight);
  color: var(--dn-text); overflow-wrap: anywhere;
}
.sr-count { margin: 0; font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); color: var(--dn-text-muted); }

/* List + kartu */
.sr-list { display: flex; flex-direction: column; gap: var(--dn-space-md); }
.sr-card {
  display: flex; align-items: flex-start; gap: var(--dn-space-lg);
  padding: var(--dn-space-lg);
  background: var(--dn-surface); border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card);
  transition: border-color var(--dn-transition), box-shadow var(--dn-transition), transform var(--dn-transition);
}
.sr-card:hover { border-color: var(--dn-brand); box-shadow: var(--dn-shadow-hover); transform: translateY(-2px); }

/* Hasil dibungkus .m-card (.sr-card-wrap) → tiap kartu jadi baris rata dipisah garis */
.sr-card-wrap { margin-top: 0; }   /* sejajar dgn kartu sidebar (yg margin:0) */
.sr-card-wrap .sr-crumbs { margin-bottom: var(--dn-space-md); }
.sr-card-wrap .sr-crumbs .breadcrumb { margin: 0; }
.sr-card-wrap .sr-list { gap: 0; }
.sr-card-wrap .sr-card {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: var(--dn-space-lg) 0;
}
.sr-card-wrap .sr-card:first-child { padding-top: 0; }
.sr-card-wrap .sr-card:hover { transform: none; box-shadow: none; }
.sr-card-wrap .sr-card + .sr-card { border-top: 1px solid var(--dn-border); }
.sr-card-wrap .sr-pagination { margin-top: 0; padding-top: var(--dn-space-lg); border-top: 1px solid var(--dn-border); }
.sr-card-wrap .sr-empty { padding: var(--dn-space-lg) 0; }
.sr-cover {
  flex: none; width: 96px; aspect-ratio: 3 / 4;
  border-radius: var(--dn-radius-control); overflow: hidden;
  background: var(--dn-surface-2);
}
.sr-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-body { flex: 1 1 auto; min-width: 0; }
.sr-name {
  margin: 0 0 6px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-h4); font-weight: var(--dn-fw-semibold); line-height: 1.25;
  overflow-wrap: anywhere;
}
.sr-name a { color: var(--dn-text); text-decoration: none; }
.sr-name a:hover { color: var(--dn-brand-ink); }
.sr-meta {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-xs); color: var(--dn-text-muted);
}
.sr-meta li { display: inline-flex; align-items: center; }
.sr-meta li:not(:last-child)::after { content: "\00b7"; margin: 0 8px; color: var(--dn-text-faint); }
.sr-meta .sr-ic { width: 14px; height: 14px; margin-right: 5px; flex: none; fill: currentColor; opacity: .8; }
.sr-rating { margin-bottom: 8px; }
.sr-genres { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sr-genre {
  display: inline-block; padding: 3px 10px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-medium);
  color: var(--dn-text-muted); background: var(--dn-surface-2);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill); text-decoration: none;
  transition: var(--dn-transition);
}
.sr-genre:hover { color: var(--dn-brand-ink); border-color: var(--dn-brand); background: var(--dn-brand-tint); }
.sr-excerpt { margin: 0; font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); line-height: 1.6; color: var(--dn-text-muted); overflow-wrap: anywhere; }

/* Empty state */
.sr-empty { text-align: center; padding: var(--dn-space-xl) var(--dn-space-lg); }
.sr-empty-mark {
  width: 64px; height: 64px; margin: 0 auto var(--dn-space-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dn-font-display); font-size: var(--dn-fs-h1);
  color: var(--dn-brand); background: var(--dn-brand-tint); border-radius: var(--dn-radius-pill);
}
.sr-empty h2 { margin: 0 0 8px; font-family: var(--dn-font-head); font-size: var(--dn-fs-h3); color: var(--dn-text); }
.sr-empty p { margin: 0 auto var(--dn-space-lg); max-width: 420px; font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); color: var(--dn-text-muted); }
.sr-empty-btn {
  display: inline-block; padding: 10px 22px;
  font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold); font-size: var(--dn-fs-sm);
  color: var(--dn-on-brand); background: var(--dn-brand); border-radius: var(--dn-radius-pill); text-decoration: none;
  transition: var(--dn-transition);
}
.sr-empty-btn:hover { background: var(--dn-brand-strong, var(--dn-brand)); }

/* Pagination */
.sr-pagination { margin-top: var(--dn-space-xl); display: flex; flex-wrap: wrap; gap: 6px; }
.sr-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-medium);
  color: var(--dn-text-muted); background: var(--dn-surface);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
  text-decoration: none; transition: var(--dn-transition);
}
.sr-pagination a.page-numbers:hover { color: var(--dn-brand-ink); border-color: var(--dn-brand); background: var(--dn-brand-tint); }
.sr-pagination .page-numbers.current { color: var(--dn-on-brand); background: var(--dn-brand); border-color: var(--dn-brand); }
.sr-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* Layout 2-kolom (flex sendiri → tak gantung grid bootstrap; pasti sebelahan desktop) */
.sr-layout { display: flex; flex-wrap: wrap; gap: var(--dn-space-xl); align-items: flex-start; }
.sr-main { flex: 1 1 0; min-width: 0; }
.sr-side { flex: none; width: 320px; max-width: 100%; }
/* netralkan float:right legacy (.sidebar-container) + jarak antar widget (kartu) */
.nid-search .sr-side .sidebar-container {
  float: none; width: 100%; max-width: 100%; margin: 0;
  display: flex; flex-direction: column; gap: var(--dn-space-lg);
}
.nid-search .sr-side .m-card { margin: 0; }
@media (min-width: 992px) {
  .nid-search .sr-side .sidebar-container { position: sticky; top: 90px; }
}
@media (max-width: 991px) {
  .sr-layout { flex-direction: column; }
  .sr-side { width: 100%; margin-top: var(--dn-space-lg); }
}
@media (max-width: 575px) {
  .sr-card { padding: var(--dn-space-md); gap: var(--dn-space-md); }
  .sr-cover { width: 88px; }
  .sr-title-main { font-size: var(--dn-fs-h2); }
  .sr-name { font-size: var(--dn-fs-base); }
  /* clamp excerpt 3 baris → kartu tak terlalu tinggi di layar sempit */
  .sr-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* =====================================================================
 * Halaman Categories (/categories/) — accordion chip, modern & ringan
 * ===================================================================== */
.nid-cats.container { max-width: var(--dn-page-narrow); }
.nid-cats .cats-head {
  margin-bottom: var(--dn-space-xl);
  padding-bottom: var(--dn-space-lg);
  border-bottom: 1px solid var(--dn-border);
}
.cats-eyebrow {
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-semibold);
  letter-spacing: var(--dn-tracking-wide); text-transform: uppercase; color: var(--dn-text-faint);
}
.cats-title {
  margin: 6px 0 4px;
  font-family: var(--dn-font-display); font-weight: var(--dn-fw-semibold);
  font-size: var(--dn-fs-h1); line-height: 1.1; letter-spacing: var(--dn-tracking-tight); color: var(--dn-text);
}
.cats-sub { margin: 0; font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); color: var(--dn-text-muted); }

/* Section rata di dalam .m-card (bukan kartu-dalam-kartu) — dipisah garis */
.cats-acc { display: block; }
.cats-sec { background: transparent; border: 0; border-radius: 0; }
.cats-sec:not(:first-child) { border-top: 1px solid var(--dn-border); }
.cats-sec > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--dn-space-sm);
  padding: var(--dn-space-lg) 0;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-h4); font-weight: var(--dn-fw-semibold); color: var(--dn-text);
  transition: color var(--dn-transition);
}
.cats-sec > summary::-webkit-details-marker { display: none; }
.cats-sec > summary:hover .cats-sec-title { color: var(--dn-brand-ink); }
.cats-sec > summary:focus-visible { outline: none; color: var(--dn-brand-ink); }
.cats-count {
  font-family: var(--dn-font-body); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-normal);
  color: var(--dn-text-faint); margin-left: auto;
}
.cats-chev { width: 18px; height: 18px; flex: none; fill: var(--dn-text-muted); transition: transform var(--dn-transition); }
.cats-sec[open] > summary .cats-chev { transform: rotate(180deg); }
.cats-chips {
  list-style: none; margin: 0; padding: var(--dn-space-sm) 0 var(--dn-space-lg);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cats-chips li { margin: 0; }
.cats-chip {
  display: inline-block; padding: 6px 14px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-medium);
  color: var(--dn-text-muted); background: var(--dn-surface-2);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill); text-decoration: none;
  transition: var(--dn-transition);
}
.cats-chip:hover { color: var(--dn-brand-ink); border-color: var(--dn-brand); background: var(--dn-brand-tint); }
.cats-chip:focus-visible { outline: none; box-shadow: var(--dn-ring); }

/* header fixed di ≤1112 cuma sisakan 60px → kasih napas atas biar judul tak mepet */
@media (max-width: 1112px) { .nid-cats.container { padding-top: var(--dn-space-xl); margin-top: 72px; } }
@media (max-width: 575px) {
  .cats-sec > summary { padding: var(--dn-space-md) 0; font-size: var(--dn-fs-base); }
  .cats-chips { padding: var(--dn-space-sm) 0 var(--dn-space-md); }
  .cats-title { font-size: var(--dn-fs-h2); }
}
@media (prefers-reduced-motion: reduce) {
  .cats-chev, .cats-chip { transition: none; }
}

/* =====================================================================
 * Halaman Latest Updates (/latest-update/) — feed kronologis, modern
 * ===================================================================== */
.nid-lu.container { max-width: var(--dn-page-narrow); }
.nid-lu .lu-head {
  margin-bottom: var(--dn-space-md);
  padding-bottom: var(--dn-space-lg);
  border-bottom: 1px solid var(--dn-border);
}
.lu-eyebrow {
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-semibold);
  letter-spacing: var(--dn-tracking-wide); text-transform: uppercase; color: var(--dn-text-faint);
}
.lu-title-main {
  margin: 6px 0 4px;
  font-family: var(--dn-font-display); font-weight: var(--dn-fw-semibold);
  font-size: var(--dn-fs-h1); line-height: 1.1; letter-spacing: var(--dn-tracking-tight); color: var(--dn-text);
}
.lu-sub { margin: 0; font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); color: var(--dn-text-muted); }

.lu-list { list-style: none; margin: 0; padding: 0; }
.lu-row {
  display: flex; align-items: flex-start; gap: var(--dn-space-md);
  padding: var(--dn-space-lg) 0;
}
.lu-row:not(:last-child) { border-bottom: 1px solid var(--dn-border); }

.lu-cover {
  flex: none; width: 48px; height: 64px; border-radius: var(--dn-radius-sm);
  overflow: hidden; background: var(--dn-surface-2); display: block;
}
.lu-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lu-body { flex: 1 1 auto; min-width: 0; }
.lu-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.lu-genre {
  flex: none; font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-semibold);
  letter-spacing: var(--dn-tracking-wide); text-transform: uppercase;
  color: var(--dn-brand-ink); text-decoration: none;
}
.lu-genre:hover { text-decoration: underline; }
.lu-name {
  margin: 0; min-width: 0;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-base); font-weight: var(--dn-fw-semibold); line-height: 1.3;
}
.lu-name a { color: var(--dn-text); text-decoration: none; overflow-wrap: anywhere; }
.lu-name a:hover { color: var(--dn-brand-ink); }
.lu-ch {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 6px;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); color: var(--dn-text-muted); text-decoration: none;
}
.lu-ch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-ch:hover { color: var(--dn-brand-ink); }

.lu-meta {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right;
}
.lu-author {
  display: inline-flex; align-items: center; gap: 5px; max-width: 170px;
  font-family: var(--dn-font-body); font-size: var(--dn-fs-xs); color: var(--dn-text-faint);
}
.lu-author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-time {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-medium);
  color: var(--dn-brand-ink); background: var(--dn-brand-tint);
  padding: 3px 10px; border-radius: var(--dn-radius-pill);
}
.lu-ic { width: 14px; height: 14px; flex: none; fill: currentColor; }

.lu-pagination {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: var(--dn-space-xl); padding-top: var(--dn-space-lg); border-top: 1px solid var(--dn-border);
}
.lu-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-medium);
  color: var(--dn-text-muted); background: var(--dn-surface-2); border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-control); text-decoration: none; transition: var(--dn-transition);
}
.lu-pagination .page-numbers:hover { color: var(--dn-brand-ink); border-color: var(--dn-brand); background: var(--dn-brand-tint); }
.lu-pagination .page-numbers.current { color: var(--dn-on-brand); background: var(--dn-brand); border-color: var(--dn-brand); }

.lu-empty { text-align: center; padding: var(--dn-space-xl) 0; }
.lu-empty h2 { font-family: var(--dn-font-display); font-size: var(--dn-fs-h3); color: var(--dn-text); margin: 0 0 6px; }
.lu-empty p { font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); color: var(--dn-text-muted); margin: 0; }

@media (max-width: 1112px) { .nid-lu.container { padding-top: var(--dn-space-md); margin-top: 72px; } }
@media (max-width: 600px) {
  .lu-title-main { font-size: var(--dn-fs-h2); }
  .lu-row { flex-wrap: wrap; gap: var(--dn-space-sm) var(--dn-space-md); }
  .lu-meta {
    flex: 1 0 100%; flex-direction: row; align-items: center; justify-content: flex-start;
    gap: var(--dn-space-md); text-align: left; padding-left: calc(48px + var(--dn-space-md));
  }
  .lu-author { max-width: none; }
}
@media (max-width: 360px) { .lu-meta { padding-left: 0; } }
@media (prefers-reduced-motion: reduce) { .lu-pagination .page-numbers { transition: none; } }

/* Widget "Latest" (2026-07-04): pakai tampilan .lu-row halaman /latest-update/,
   dibungkus area scroll — ±5 baris terlihat, hingga 20 novel. */
.m-card.lu-widget .lu-scroll {
  max-height: 486px;              /* ≈ 5 baris (row ~96px + border) sebelum scroll */
  overflow-y: auto; overscroll-behavior: contain;
  margin: 0 calc(-1 * var(--dn-space-xs)); padding: 0 var(--dn-space-xs);
  scrollbar-width: thin; scrollbar-color: var(--dn-border) transparent;
}
.m-card.lu-widget .lu-scroll::-webkit-scrollbar { width: 8px; }
.m-card.lu-widget .lu-scroll::-webkit-scrollbar-thumb {
  background: var(--dn-border); border-radius: var(--dn-radius-pill);
  border: 2px solid transparent; background-clip: padding-box;
}
.m-card.lu-widget .lu-scroll::-webkit-scrollbar-thumb:hover { background: var(--dn-text-faint); background-clip: padding-box; }
.m-card.lu-widget .lu-row:first-child { padding-top: var(--dn-space-md); }
.m-card.lu-widget .lu-row:last-child { border-bottom: 0; }

/* ==========================================================================
   CK — Contribute API key (halaman contribute.php + modal retranslate reader)
   Semua nilai via token dn-design; chrome halaman = .dn-prof-* yang sudah ada.
   ========================================================================== */

/* Benefit tiles (state belum punya key) */
.dn-ck-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dn-space-md); margin: 0 0 var(--dn-space-sm); }
.dn-ck-benefit { border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control); padding: var(--dn-space-md); background: var(--dn-surface); }
.dn-ck-benefit-big { display: block; font-family: var(--dn-font-display); font-size: var(--dn-fs-h2); font-weight: var(--dn-fw-semibold); color: var(--dn-brand); line-height: var(--dn-leading-tight); font-variant-numeric: tabular-nums; }
.dn-ck-benefit-lab { display: block; margin-top: 5px; font-size: var(--dn-fs-sm); color: var(--dn-text-muted); line-height: 1.4; }

/* Langkah ambil key */
.dn-ck-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--dn-space-sm); counter-reset: ckstep; }
/* JANGAN flex/grid di li — anak inline (<a>/<b>) ikut jadi item & pecah baris.
   Lingkaran nomor absolut di rail kiri; teks mengalir inline normal. */
.dn-ck-steps li { position: relative; padding-left: 34px; font-size: var(--dn-fs-base); line-height: 1.55; color: var(--dn-text); }
.dn-ck-steps li::before {
  counter-increment: ckstep; content: counter(ckstep);
  position: absolute; left: 0; top: calc((1.55em - 22px) / 2);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--dn-radius-pill);
  background: var(--dn-surface-3); color: var(--dn-text-muted);
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-bold);
}
.dn-ck-steps a { color: var(--dn-brand-ink); font-weight: var(--dn-fw-semibold); text-decoration: none; }
.dn-ck-steps a:hover { text-decoration: underline; }
.dn-ck-onekey { margin: var(--dn-space-md) 0 0; padding: var(--dn-space-sm) var(--dn-space-md); background: var(--dn-warn-tint); color: var(--dn-warn); border-radius: var(--dn-radius-control); font-size: var(--dn-fs-sm); }

/* Halaman contribute: fieldset TIDAK di dalam .dn-prof-form (yang memberi gap
   antar-section di profile) — beri jarak antar-section manual di sini. */
.dn-ck-main .dn-prof-section { margin-top: var(--dn-space-2xl); }
.dn-ck-main .dn-prof-section:first-of-type { margin-top: var(--dn-space-lg); }

/* Form add key */
.dn-ck-form { display: flex; gap: var(--dn-space-sm); align-items: flex-start; flex-wrap: wrap; }
.dn-ck-field { flex: 1 1 320px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dn-ck-field label { font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-bold); letter-spacing: var(--dn-tracking-wide); text-transform: uppercase; color: var(--dn-text-muted); width: auto; margin: 0; }
.dn-ck-input {
  width: 100%; box-sizing: border-box; background: var(--dn-surface);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
  color: var(--dn-text); font-family: Consolas, Menlo, monospace; font-size: var(--dn-fs-base);
  padding: 11px 13px;
}
.dn-ck-input::placeholder { color: var(--dn-text-faint); font-family: var(--dn-font-body); }
.dn-ck-input:focus { outline: none; border-color: var(--dn-brand); box-shadow: var(--dn-ring); }
.dn-ck-hint { margin: 0; font-size: var(--dn-fs-sm); color: var(--dn-text-faint); }
.dn-ck-submit {
  flex: none; align-self: flex-start; margin-top: 25px;
  display: inline-flex; align-items: center; padding: 11px 22px; cursor: pointer;
  border: 1px solid var(--dn-brand); background: var(--dn-brand); color: #fff;
  border-radius: var(--dn-radius-control); font-family: var(--dn-font-head); font-size: var(--dn-fs-base); font-weight: var(--dn-fw-bold);
  transition: background var(--dn-transition);
}
.dn-ck-submit:hover { background: var(--dn-brand-strong); border-color: var(--dn-brand-strong); }
.dn-ck-submit:focus-visible { outline: none; box-shadow: var(--dn-ring); }

/* Signature: keycard kontributor */
.dn-ck-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-card);
  background: linear-gradient(120deg, var(--dn-brand-tint) 0%, var(--dn-surface) 42%);
  padding: var(--dn-space-xl) var(--dn-space-xl) var(--dn-space-lg);
}
.dn-ck-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--dn-brand), var(--dn-brand-strong)); }
.dn-ck-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dn-space-md); flex-wrap: wrap; }
.dn-ck-card-eyebrow { display: block; font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-bold); letter-spacing: .16em; text-transform: uppercase; color: var(--dn-brand); }
.dn-ck-card-key { margin: 6px 0 0; font-family: Consolas, Menlo, monospace; font-size: var(--dn-fs-h3); letter-spacing: .06em; color: var(--dn-text); font-weight: var(--dn-fw-semibold); }
.dn-ck-dots { color: var(--dn-text-faint); }
.dn-ck-badge { flex: none; }
.dn-ck-card-meta { display: flex; gap: var(--dn-space-xl); flex-wrap: wrap; margin: var(--dn-space-lg) 0 0; padding: var(--dn-space-md) 0 0; border-top: 1px dashed var(--dn-border); }
.dn-ck-meta { display: flex; flex-direction: column; gap: 2px; }
.dn-ck-meta .v { font-family: var(--dn-font-head); font-size: var(--dn-fs-base); font-weight: var(--dn-fw-bold); color: var(--dn-text); font-variant-numeric: tabular-nums; }
.dn-ck-meta .k { font-size: var(--dn-fs-xs); letter-spacing: var(--dn-tracking-wide); text-transform: uppercase; color: var(--dn-text-faint); }
.dn-ck-invalid { margin: var(--dn-space-md) 0 0; padding: var(--dn-space-sm) var(--dn-space-md); background: var(--dn-danger-tint); color: var(--dn-danger); border-radius: var(--dn-radius-control); font-size: var(--dn-fs-sm); }
.dn-ck-card-actions { margin-top: var(--dn-space-md); display: flex; justify-content: flex-end; }
.dn-ck-revoke {
  display: inline-flex; padding: 8px 16px; cursor: pointer;
  border: 1px solid var(--dn-border); background: transparent; color: var(--dn-text-muted);
  border-radius: var(--dn-radius-control); font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-semibold);
  transition: color var(--dn-transition), border-color var(--dn-transition), background var(--dn-transition);
}
.dn-ck-revoke:hover { color: var(--dn-danger); border-color: var(--dn-danger); background: var(--dn-danger-tint); }
.dn-ck-revoke:focus-visible { outline: none; box-shadow: var(--dn-ring); }

/* Meter kuota retranslate */
.dn-ck-quota { margin-top: var(--dn-space-md); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control); background: var(--dn-surface); padding: var(--dn-space-md) var(--dn-space-lg); }
.dn-ck-quota-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dn-space-sm); flex-wrap: wrap; margin-bottom: var(--dn-space-sm); }
.dn-ck-quota-title { font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-bold); color: var(--dn-text); }
.dn-ck-quota-count { font-size: var(--dn-fs-sm); color: var(--dn-text-muted); }
.dn-ck-quota-count b { color: var(--dn-brand); font-size: var(--dn-fs-base); font-variant-numeric: tabular-nums; }
.dn-ck-segs { display: flex; gap: 6px; }
.dn-ck-seg { flex: 1; height: 10px; border-radius: var(--dn-radius-pill); background: var(--dn-surface-3); }
.dn-ck-seg.is-left { background: var(--dn-brand); }
.dn-ck-quota-note { margin: var(--dn-space-sm) 0 0; font-size: var(--dn-fs-xs); color: var(--dn-text-faint); }
.dn-ck-inline-ic { font-size: 14px !important; vertical-align: -2px; }

/* Legend status */
.dn-ck-legend { display: flex; gap: var(--dn-space-md); flex-wrap: wrap; margin-top: var(--dn-space-md); font-size: var(--dn-fs-sm); color: var(--dn-text-muted); }
.dn-ck-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dn-ck-legend i { width: 8px; height: 8px; border-radius: 50%; font-style: normal; }
.dn-ck-legend .is-ok { background: var(--dn-ok); }
.dn-ck-legend .is-warn { background: var(--dn-warn); }
.dn-ck-legend .is-bad { background: var(--dn-danger); }

/* Modal retranslate (reader) — isi sheet .dn-gloss */
.dn-ck-mchapter { margin: 0 0 var(--dn-space-md); padding: var(--dn-space-sm) var(--dn-space-md); background: var(--dn-surface-2); border-radius: var(--dn-radius-control); }
/* Kelas unik — .nv/.ch global (badge kartu novel, pill absolut) sempat nyangkut di modal. */
.dn-ck-mnv { display: block; font-size: var(--dn-fs-xs); color: var(--dn-text-faint); }
.dn-ck-mch { display: block; margin-top: 2px; font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); font-weight: var(--dn-fw-bold); color: var(--dn-text); }
.dn-ck-mfacts { margin: 0 0 var(--dn-space-md); padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dn-ck-mfacts li { display: flex; gap: 9px; font-size: var(--dn-fs-sm); color: var(--dn-text-muted); }
.dn-ck-mfacts li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dn-brand); transform: translateY(7px); }
.dn-ck-mquota { display: flex; align-items: center; gap: var(--dn-space-sm); margin: 0 0 var(--dn-space-lg); padding: 11px var(--dn-space-md); background: var(--dn-brand-tint); border-radius: var(--dn-radius-control); }
.dn-ck-mquota .dn-ck-segs { flex: none; gap: 4px; }
.dn-ck-mquota .dn-ck-seg { width: 16px; flex: none; height: 8px; background: var(--dn-surface); }
.dn-ck-mquota .dn-ck-seg.is-left { background: var(--dn-brand); }
.dn-ck-mquota span { font-size: var(--dn-fs-sm); color: var(--dn-text-muted); }
.dn-ck-mquota b { color: var(--dn-brand); }
.dn-ck-mfoot { margin: var(--dn-space-md) 0 0; font-size: var(--dn-fs-xs); color: var(--dn-text-faint); }
.dn-ck-mlocked { margin: 0 0 var(--dn-space-md); padding: var(--dn-space-md); background: var(--dn-warn-tint); border: 1px solid var(--dn-warn); border-radius: var(--dn-radius-control); font-size: var(--dn-fs-sm); color: var(--dn-text); }
.dn-ck-mlocked a { color: var(--dn-brand-ink); font-weight: var(--dn-fw-bold); text-decoration: none; }
.dn-ck-mspin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; margin-right: 6px; animation: dn-ck-spin .7s linear infinite; }
@keyframes dn-ck-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dn-ck-mspin { animation: none; } }

@media (max-width: 760px) {
  .dn-ck-benefits { grid-template-columns: 1fr; }
  .dn-ck-submit { width: 100%; justify-content: center; margin-top: 0; }
  .dn-ck-card-meta { gap: var(--dn-space-md); }
}

/* ============================================================
 * HOMEPAGE POLISH (2026-07-03) — penyesuaian widget, bukan rombak.
 * Semua nilai dari token --dn-*; nol JS, nol aset baru.
 * ============================================================ */

/* (4) Judul seksi: strip teal pendek di kiri — pengikat brand semua kartu. */
.m-card > .main-title { display: flex; align-items: center; gap: 10px; }
.m-card > .main-title::before {
  content: ""; flex: none; width: 4px; height: 1em;
  border-radius: var(--dn-radius-pill); background: var(--dn-brand);
}

/* (1) Kartu carousel (.box.car): caption rapi & tinggi seragam.
 * max-height wajib menemani line-clamp: tanpa itu baris ke-3 bisa "menembus"
 * di bawah elipsis (bleed) dan menimpa chip genre. */
.box.car .caption .list-title {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em; max-height: 2.7em; line-height: 1.3; font-weight: 700;
}
.box.car .caption a.genre {
  display: inline-block; padding: 1px 9px;
  font-size: .7rem; font-weight: 600; text-decoration: none;
  color: var(--dn-text-muted);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill);
  transition: color var(--dn-transition), border-color var(--dn-transition);
}
.box.car .caption a.genre:hover { color: var(--dn-brand); border-color: var(--dn-brand); }
.box.car .caption .right { font-size: .72rem; font-weight: 600; color: var(--dn-text-muted); }
.box.car .caption em { display: block; margin-top: 6px; font-size: .72rem; color: var(--dn-text-muted); }

/* Kartu "View more": tile ber-rasio kover dgn panah di lingkaran (dulu <br> bertumpuk). */
.box.car.view-more { background: var(--dn-surface-2); }
.box.car.view-more .vm-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 258px; height: 100%;
  font-weight: 600; text-decoration: none; color: var(--dn-text-muted);
  transition: color var(--dn-transition);
}
.box.car.view-more .vm-ico {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 22px; line-height: 1;
  background: var(--dn-brand-tint); color: var(--dn-brand);
  transition: background var(--dn-transition), color var(--dn-transition);
}
.box.car.view-more .vm-link:hover { color: var(--dn-brand); }
.box.car.view-more .vm-link:hover .vm-ico { background: var(--dn-brand); color: var(--dn-on-brand); }

/* (2) Widget Latest: tabel bergaris penuh → baris berpembatas tipis. */
#latestt { border-collapse: collapse; width: 100%; }
#latestt th, #latestt td {
  border: 0 !important; border-bottom: 1px solid var(--dn-border) !important;
  padding: 9px 12px; vertical-align: middle;
}
#latestt thead th { border-bottom: 2px solid var(--dn-border) !important; }
#latestt thead small {
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dn-text-muted);
}
#latestt tbody tr { transition: background var(--dn-transition); }
#latestt tbody tr:hover { background: var(--dn-surface-2); }
#latestt tbody tr:last-child td { border-bottom: 0 !important; }
#latestt td:first-child { font-size: .76rem; font-weight: 600; color: var(--dn-text-muted); white-space: nowrap; }

/* (3) Widget Alphabet: huruf jadi chip indeks, bukan deretan dempet. */
.nav-tab-alphabet {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0; padding: 0; list-style: none; border: 0;
}
.nav-tab-alphabet .nav-item { margin: 0; }
.nav-tab-alphabet a.alp {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
  background: var(--dn-surface); text-decoration: none;
  transition: border-color var(--dn-transition), background var(--dn-transition);
}
.nav-tab-alphabet a.alp:hover { border-color: var(--dn-brand); background: var(--dn-brand-tint); }
.nav-tab-alphabet a.alp span { color: var(--dn-text) !important; font-weight: 700; }
.nav-tab-alphabet a.alp:hover span { color: var(--dn-brand) !important; }

/* (5) Ranking: nomor peringkat menonjol teal, angka sejajar. */
.rank-box .list-title strong { color: var(--dn-brand); font-variant-numeric: tabular-nums; }

/* (6) Recent Updates — REDESAIN 2026-07-04: baris novel (cover + judul + daftar
 * chapter), token-only. Markup .ru-item (PHP + loadmore JS identik). */
.m-card.ru .ru-item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--dn-space-md);
  padding: var(--dn-space-md) var(--dn-space-xs);
  border-bottom: 1px solid var(--dn-border);
}
.m-card.ru .ru-item:last-of-type { border-bottom: 0; }
.m-card.ru .ru-cover {
  display: block; width: 52px; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--dn-radius-sm); box-shadow: var(--dn-shadow-sm);
  position: relative;
}
.m-card.ru .ru-cover img.update-tmb {
  width: 100%; height: 100%; object-fit: cover; display: block; margin: 0;
  transition: transform var(--dn-transition);
}
.m-card.ru .ru-item:hover .ru-cover img.update-tmb { transform: scale(1.06); }
.m-card.ru .ru-body { min-width: 0; }
.m-card.ru .ru-novel {
  display: block; font-family: var(--dn-font-head); font-size: var(--dn-fs-base);
  font-weight: var(--dn-fw-semibold); line-height: var(--dn-leading-tight);
  color: var(--dn-brand-ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-card.ru .ru-novel:hover { color: var(--dn-brand-strong); }
[data-theme="dark"] .m-card.ru .ru-novel:hover { color: var(--dn-text); }
.m-card.ru .ru-chs { list-style: none; margin: var(--dn-space-sm) 0 0; padding: 0; }
.m-card.ru .ru-chs li { margin: 0; }
.m-card.ru .ru-ch {
  display: flex; align-items: center; gap: var(--dn-space-sm);
  padding: 5px 8px; margin: 1px -8px;
  border-radius: var(--dn-radius-sm); text-decoration: none;
  transition: background var(--dn-transition);
}
.m-card.ru .ru-cht { flex: 1 1 auto; }
.m-card.ru .ru-time { margin-left: auto; }
.m-card.ru .ru-ch:hover { background: var(--dn-surface-2); }
.m-card.ru .ru-num {
  flex: none; font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-bold);
  color: var(--dn-brand-ink); background: var(--dn-brand-tint);
  padding: 1px 7px; border-radius: var(--dn-radius-pill); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.m-card.ru .ru-cht {
  min-width: 0; font-family: var(--dn-font-body); font-size: var(--dn-fs-sm);
  color: var(--dn-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--dn-transition);
}
.m-card.ru .ru-ch:hover .ru-cht { color: var(--dn-text); }
.m-card.ru .ru-time {
  flex: none; font-family: var(--dn-font-head); font-size: var(--dn-fs-xs);
  color: var(--dn-text-faint); white-space: nowrap;
}
.m-card.ru .rcnt-update-list { display: contents; }
/* tombol Load more: pusatkan + beri jarak (id #first-btn sudah bergaya global) */
.m-card.ru #first-btn { margin: var(--dn-space-lg) auto 4px; }

/* Ikon menu header (BoostrapNavWalker: kelas ikon di item menu → <i class="material-icons">):
 * default 24px inline mendorong baseline → item "Blog" turun tak sejajar. Kecilkan + sejajarkan. */
.nav-link > i.material-icons { font-size: 18px; line-height: 1; vertical-align: -4px; margin-right: 2px; }
/* Item menu yang kelas "material-icons"-nya menempel di <li> (footer) — jangan tulari font teks. */
li.menu-item.material-icons { font-family: inherit; letter-spacing: inherit; text-transform: none; }

/* Tombol glossary di tabel Details novel (pengganti .tmbwaitinglglossary lama) */
.nv-glos-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.nv-glos-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  font-weight: 600; font-size: var(--dn-fs-sm); text-decoration: none;
  color: var(--dn-brand); background: var(--dn-surface);
  border: 1px solid var(--dn-brand); border-radius: var(--dn-radius-pill);
  transition: background var(--dn-transition), color var(--dn-transition), border-color var(--dn-transition);
}
.nv-glos-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.nv-glos-btn:hover { background: var(--dn-brand-tint); color: var(--dn-brand); }
/* style.css punya `#panelnovelinfo a { color: var(--dn-brand) !important }` →
 * wajib dilawan dengan !important berspesifisitas lebih tinggi. */
.nv-glos-btn--primary, #panelnovelinfo a.nv-glos-btn--primary { background: var(--dn-brand); color: var(--dn-on-brand) !important; }
.nv-glos-btn--primary:hover, #panelnovelinfo a.nv-glos-btn--primary:hover { background: var(--dn-brand); color: var(--dn-on-brand) !important; filter: brightness(1.08); }
.nv-glos-btn:focus-visible { outline: none; box-shadow: var(--dn-ring); }

/* ============================================================
 * CUSTOMIZER — MODE KARTU (body class dari cores/customizer.php)
 * ============================================================ */
:root { --nid-boxpad: 10px; }

/* Cover penuh: cover menempel tepi kartu .box; caption tetap bernapas.
 * (Kartu grid arsip .dn-card memang sudah flush — tak perlu diubah.) */
body.nid-card-flush { --nid-boxpad: 0px; }
body.nid-card-flush .box:not(.rank-box):not(.read-box) { padding: 0; overflow: hidden; }
body.nid-card-flush .box:not(.rank-box):not(.read-box) a.list-a {
  border-radius: calc(var(--dn-radius-card) - 1px) calc(var(--dn-radius-card) - 1px) 0 0;
}
body.nid-card-flush .box:not(.rank-box):not(.read-box) img.list-img { width: 100%; object-fit: cover; }
body.nid-card-flush .box:not(.rank-box):not(.read-box) .caption { padding: 8px 10px 10px; }
body.nid-card-flush .box .label { top: auto; }
/* Pill status + jumlah ch (widget Recommendation/Related): legacy .label
 * hanya 120px lebar → dua pill absolut (status kiri, ch kanan) berdempet.
 * Lebarkan kotak sedikit supaya ada jarak. */
.box .label { max-width: 138px; margin-top: -34px; }

/* Rasio cover carousel 3:4 (portrait): tinggi tetap 168px, kartu menyempit
 * mengikuti (126px cover + padding kartu), teks sedikit dirapatkan. */
body.nid-car-p34 .box.car.amp-carousel-slide,
body.nid-car-p34 .nid-carousel-track > .box.car {
  width: calc(126px + (var(--nid-boxpad) * 2) + 2px);
  max-width: none;
  height: auto;
  min-height: 268px;
}
body.nid-car-p34 .box.car.amp-carousel-slide img.list-img {
  width: 100%;
  height: 168px;
  object-fit: cover;
}
body.nid-car-p34 .box.car .caption { font-size: 12px; }
body.nid-car-p34 .box.car .caption .list-title { font-size: 13px; }
body.nid-car-p34 .box.car .caption a.genre { padding: 0 7px; font-size: .66rem; }
body.nid-car-p34 .box.car.view-more .vm-link { min-height: 240px; }

/* Kartu novel di grid arsip: kalahkan padding primitive .dn-card (baris ~330,
 * padding var(--dn-space-lg)) — kartu NOVEL bawaannya cover penuh tanpa padding.
 * (Primitive .dn-card utk panel konten lain tetap berpadding.) */
.dn-cards .dn-card { padding: 0; }

/* Kartu arsip (.dn-card) mode BERPADDING (pilihan Customizer "Gaya cover").
 * Cover diberi bingkai: margin + sudut membulat; badge overlay tetap di dalam cover. */
body.nid-dncard-pad .dn-cards .dn-card-cover {
  margin: 10px 10px 0;
  border-radius: var(--dn-radius-sm);
}
body.nid-dncard-pad .dn-cards .dn-card-body { padding-top: 8px; }

/* ==========================================================================
   Spoiler tag [spoiler]…[/spoiler] — komentar & review (cores/fn-spoiler.php
   + window.nidSpoilerize di app.js). Tertutup: teks blur + chip brand-tint,
   klik/Enter membuka permanen (one-way). user-select none saat tertutup
   supaya isi tak bisa di-copy sebelum dibuka.
   ========================================================================== */
.dn-spoiler {
  position: relative;
  display: inline;
  padding: 1px 0.3em;
  border-radius: var(--dn-radius-sm);
  background: var(--dn-brand-tint);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;   /* chip rapi saat spoiler patah baris */
  cursor: pointer;
  outline: none;
  transition: background var(--dn-transition);
}
.dn-spoiler:not(.is-open) { -webkit-user-select: none; user-select: none; }
.dn-spoiler:not(.is-open) .dn-spoiler__txt { filter: blur(5px); }
.dn-spoiler:not(.is-open):hover { background: var(--dn-brand-tint-2); }
.dn-spoiler:focus-visible { box-shadow: var(--dn-ring); }
.dn-spoiler.is-open { cursor: inherit; }
.dn-spoiler .dn-spoiler__txt { transition: filter var(--dn-transition); }
@media (prefers-reduced-motion: reduce) {
  .dn-spoiler, .dn-spoiler .dn-spoiler__txt { transition: none; }
}

/* Tombol form "Spoiler" + "Sticker" (sejajar) — pill kecil senada tombol aksi
   kartu (.nid-like dkk di dn-thread.css). Kontrak: spoiler tepat sesudah
   textarea; sticker tepat sesudah spoiler (fn-stickers.php). */
.dn-spoiler-btn, .dn-sticker-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--dn-space-xs); padding: 3px 10px; min-height: 26px; box-sizing: border-box;
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill);
  background: var(--dn-surface); color: var(--dn-text-muted); cursor: pointer;
  font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold); font-size: var(--dn-fs-xs); line-height: 1;
  transition: var(--dn-transition);
}
.dn-sticker-btn { margin-left: var(--dn-space-xs); }
.dn-spoiler-btn:hover, .dn-sticker-btn:hover { border-color: var(--dn-brand); color: var(--dn-brand-ink); }
.dn-spoiler-btn:focus-visible, .dn-sticker-btn:focus-visible { outline: none; box-shadow: var(--dn-ring); }
.dn-spoiler-btn svg, .dn-sticker-btn svg { flex: none; fill: currentColor; }
[data-theme="dark"] .dn-spoiler-btn, [data-theme="dark"] .dn-sticker-btn { background: var(--dn-surface-2); }
/* Di foot modal thread (flex row rata bawah): tanpa margin-top, sejajar tombol Reply. */
/* Spoiler/Sticker di komposer balasan (thread modal + quick-reply): kecil-GEPENG,
   di KIRI, baris sendiri (bukan sejajar tombol Cancel/Reply di baris aksi). */
.dn-thread__foot .dn-spoiler-btn, .dn-rv-repform .dn-spoiler-btn,
.dn-thread__foot .dn-sticker-btn, .dn-rv-repform .dn-sticker-btn { margin-top: 0; margin-bottom: 0; min-height: 0; padding: 2px 8px; }

/* ---- Sticker: gambar inline di komentar/review + panel picker ---- */
.nid-sticker { display: inline-block; height: 48px; width: auto; max-width: 120px; vertical-align: middle; margin: 1px 2px; }
#nid-stkr-pop {
  position: fixed; z-index: 100000;
  display: grid; grid-template-columns: repeat(6, 34px); gap: 3px;
  max-height: min(230px, 46vh); overflow-y: auto; padding: var(--dn-space-sm);
  background: var(--dn-surface); border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card); box-shadow: var(--dn-shadow-hover);
}
#nid-stkr-pop[hidden] { display: none; }
.nid-stkr-it { padding: 2px; border: 0; background: none; border-radius: var(--dn-radius-control); cursor: pointer; line-height: 0; }
.nid-stkr-it:hover { background: var(--dn-surface-2); }
.nid-stkr-it:focus-visible { outline: none; box-shadow: var(--dn-ring); }
.nid-stkr-it img { width: 28px; height: 28px; object-fit: contain; }
[data-theme="dark"] #nid-stkr-pop { background: var(--dn-surface-2); }
[data-theme="dark"] .nid-stkr-it:hover { background: var(--dn-surface-3); }
@media (max-width: 560px) { #nid-stkr-pop { grid-template-columns: repeat(5, 34px); } }