/* ============================================
   FONT LOKAL (self-hosted)
   ============================================ */
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Lato'; src: url('../fonts/lato-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Nunito'; src: url('../fonts/nunito-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ============================================
   READER PAGE — css/reader.css
   Tampilan baca artikel ala reader.py Streamlit
   ============================================ */

/* ============================================
   TOOLBAR BACA
   ============================================ */
.reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: white;
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.reader-toolbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.6rem var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.toolbar-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  transition: var(--transition);
  flex-shrink: 0;
}

.toolbar-back:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(88,101,200,0.05);
}

.toolbar-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex: 1;
}

.toolbar-control-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.toolbar-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.toolbar-select {
  padding: 0.35rem 0.6rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text);
  background: white;
  cursor: pointer;
  outline: none;
  transition: var(--transition);
  max-width: 130px;
}

.toolbar-select:focus,
.toolbar-select:hover {
  border-color: var(--color-primary);
}

.toolbar-control-wide .toolbar-select {
  max-width: 100px;
}

/* Stepper (± kolom, ± font size) */
.toolbar-stepper {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.stepper-btn {
  width: 28px;
  height: 28px;
  font-size: 1rem;
  line-height: 1;
  border: none;
  background: white;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepper-btn:hover { background: var(--color-bg-alt); color: var(--color-primary); }

.stepper-val {
  min-width: 28px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  padding: 0 4px;
  user-select: none;
}

/* Tombol toolbar (print, sitasi, scholar) */
.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: white;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
}

.toolbar-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(88,101,200,0.05);
}

.toolbar-btn-scholar {
  border-color: #4285F4;
  color: #1a73e8;
}

.toolbar-btn-scholar:hover {
  background: #4285F4;
  color: white;
}

/* ============================================
   STATES
   ============================================ */
.reader-loading,
.reader-error {
  text-align: center;
  padding: 5rem var(--space-8);
  color: var(--color-text-muted);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  margin: 0 auto var(--space-6);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.reader-error-icon {
  font-size: 3.5rem;
  margin-bottom: var(--space-4);
}

.reader-error h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

/* ============================================
   LAYOUT UTAMA
   ============================================ */
.reader-main {
  padding: var(--space-12) var(--space-6);
  min-height: 60vh;
}

.reader-container {
  max-width: 860px; /* default, dioverride JS */
  margin: 0 auto;
  transition: max-width 0.3s ease;
}

/* ============================================
   HEADER ARTIKEL
   ============================================ */
.reader-header {
  text-align: center;
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.reader-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.reader-meta .badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-year     { background: #e8f5e9; color: #2e7d32; }
.badge-journal  { background: #ede8fb; color: #3d4aad; }
.badge-volume   { background: #e3f2fd; color: #1565c0; }
.badge-keyword  { background: #fff4e0; color: #b56a00; }

.reader-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.reader-byline {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-2);
}

.reader-affil {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.reader-keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ============================================
   KONTEN — SECTIONS
   ============================================ */
.reader-section {
  margin-bottom: var(--space-12);
}

.reader-section-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-top: var(--space-10);
  margin-bottom: var(--space-7);
  padding: var(--space-2) var(--space-6);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
}

/* Section pertama (Abstrak) tidak perlu margin-top besar */
.reader-section:first-of-type .reader-section-title {
  margin-top: 0;
}

.reader-section-title::before,
.reader-section-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28%;
  height: 1px;
  background: var(--color-border);
}

.reader-section-title::before { left: 0; }
.reader-section-title::after  { right: 0; }

/* Abstrak: italic, JUSTIFY (tidak lagi center) */
.reader-section-abstract .reader-section-body {
  font-style: italic;
  column-count: 1 !important;
  /* text-align: center; max-width: 680px; margin: 0 auto; — DIHAPUS */
}

/* Saat abstrak diikuti keywords, kecilkan margin bawahnya supaya nempel */
.reader-section-abstract:has(+ .reader-keywords-inline) {
  margin-bottom: var(--space-3);
}

/* Keywords inline — nempel ke abstrak, style mengikuti abstrak */
.reader-keywords-inline {
  margin: 0 0 var(--space-12);
  font-size: var(--text-base);
  line-height: 1.85;
  font-style: italic;
  text-align: justify;
  hyphens: auto;
}

.reader-keywords-label {
  font-weight: 700;
  color: var(--color-text);
  margin-right: 0.4rem;
  font-style: normal;
}

.reader-keyword-tag {
  display: inline;
  font-style: italic;
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-base);
}

.reader-keyword-sep {
  color: var(--color-text-muted);
  font-weight: 400;
  font-style: normal;
}

/* Body paragraf — diatur JS untuk font, size, kolom */
.reader-section-body {
  text-align: justify;
  line-height: 1.85;
  color: var(--color-text);
  column-gap: 2.5rem;
  /* column-count diset via JS */
  white-space: pre-wrap;
  word-wrap: break-word;
  hyphens: auto;
}

/* Pastikan break antar kolom rapi */
.reader-section-body p {
  margin-bottom: 0.75em;
  break-inside: avoid;
}


/* ============================================
   SOURCE DROPDOWN (Garuda / Scholar)
   ============================================ */
.toolbar-source-wrap {
  position: relative;
}

.toolbar-btn-source {
  gap: 0.3rem;
}

.source-arrow {
  font-size: 0.6rem;
  transition: transform 0.2s ease;
}

.toolbar-btn-source.open .source-arrow {
  transform: rotate(180deg);
}

.source-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 170px;
  overflow: hidden;
  z-index: 300;
}

.source-dropdown.open {
  display: block;
}

.source-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.15s;
}

.source-option:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.source-option.toolbar-btn-scholar {
  border: none;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  color: #1a73e8;
}

.source-option.toolbar-btn-scholar:hover {
  background: #f0f4ff;
  color: #1a73e8;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .reader-toolbar { display: none !important; }
  .reader-main { padding: 0; }
  .reader-container { max-width: 100% !important; }

  .reader-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #333;
  }

  .reader-section-body {
    text-align: justify;
    line-height: 1.7;
  }

  @page {
    size: A4;
    margin: 2cm;

    @top-center {
      content: "TXTperpus — artikel mungkin tidak lengkap";
      font-size: 9pt;
      color: #666;
    }

    @bottom-center {
      content: counter(page) " / " counter(pages);
      font-size: 9pt;
      color: #666;
    }
  }
}

/* ============================================
   TOAST
   ============================================ */
.reader-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: #222;
  color: white;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
  white-space: nowrap;
}

.reader-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ============================================
   WORD CLOUD MODAL
   ============================================ */
.wc-modal .modal-content {
  max-width: 780px;
}

.wc-modal-body {
  padding: var(--space-6) var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#wcCanvas {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.wc-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

.toolbar-btn-wc {
  border-color: #7b86d4;
  color: #5865c8;
}

.toolbar-btn-wc:hover {
  background: rgba(88,101,200,0.08);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Modal shared styles (jika belum ada dari apps.css) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}

.modal-content {
  position: relative;
  background: white;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 900px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.22s ease;
}

@keyframes modal-in {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
}

.modal-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  font-size: 1.4rem;
  color: var(--color-text-muted);
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.modal-body {
  padding: var(--space-6) var(--space-8);
  overflow-y: auto;
}


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .reader-toolbar-inner {
    padding: 0.5rem var(--space-4);
    gap: var(--space-2);
  }

  /* Sembunyikan label di mobile supaya tidak penuh */
  .toolbar-label { display: none; }

  /* Sembunyikan teks tombol, hanya ikon */
  .toolbar-btn span,
  .toolbar-back span { display: none; }

  .toolbar-back { padding: 0.4rem 0.6rem; }

  .toolbar-controls { gap: var(--space-2); }

  .reader-main { padding: var(--space-6) var(--space-4); }

  .reader-title { font-size: var(--text-xl); }

  .reader-section-body { column-count: 1 !important; }

  /* Section title margin lebih kecil di mobile */
  .reader-section-title {
    margin-top: var(--space-8);
    margin-bottom: var(--space-5);
  }

  .reader-section {
    margin-bottom: var(--space-10);
  }
}

/* ============================================
   STATISTIK BACA & ARTIKEL TERKAIT
   Ditambahkan bersama halaman artikel server-side (artikel.php)
   ============================================ */

.reader-related {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}

.reader-related-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.9rem;
  color: var(--color-text, #0f172a);
}

/* --- Tab: Artikel serupa / Lainnya di jurnal ini --- */
.reader-related-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.reader-related-tab {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--color-border, #e2e8f0);
  background: transparent;
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.reader-related-tab:hover {
  color: var(--color-text, #0f172a);
  border-color: var(--color-text-muted, #94a3b8);
}

.reader-related-tab.is-active {
  background: var(--color-primary, #4f46e5);
  border-color: var(--color-primary, #4f46e5);
  color: #fff;
}

.reader-related-tab:focus-visible {
  outline: 2px solid var(--color-primary, #4f46e5);
  outline-offset: 2px;
}

/* Sebagian reset CSS menimpa perilaku bawaan atribut hidden,
   jadi ditegaskan di sini. */
.reader-related-panel[hidden] { display: none; }

.reader-related-sub {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  color: var(--color-text-muted, #64748b);
}

.reader-related-list {
  list-style: none;
  margin: 0;
  padding: 0;

  /* Grid dipasang di UL, bukan di tiap LI, supaya kolomnya dibagi bersama
     seluruh baris — itu yang membuat kolom kanan sejajar.
     Lebar kolom kedua "auto": menyesuaikan isi terlebar di daftar itu.
     Jadi tab "Lainnya di jurnal ini" yang isinya cuma tahun mendapat kolom
     sempit dan judulnya nyaris selebar penuh, sementara tab "Artikel serupa"
     yang memuat nama jurnal mendapat kolom lebih lebar. Nilai persen tetap
     tidak bisa melakukan ini: yang isinya tahun jadi menyisakan lompong. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem 1.1rem;
  align-items: baseline;
}

.reader-related-list li {
  /* display:contents melarutkan kotak LI sehingga <a> dan <span> di
     dalamnya menjadi item grid milik UL — tanpa ini tiap baris punya
     grid sendiri dan kolomnya tidak akan sejajar satu sama lain.
     Semantik daftar dijaga lewat role="list"/"listitem" di artikel.php,
     karena sebagian pembaca layar lama kehilangan itu pada display:contents. */
  display: contents;
  line-height: 1.5;
}

.reader-related-list a {
  color: var(--color-primary, #4f46e5);
  text-decoration: none;
  font-size: 0.92rem;

  /* Judul dipotong satu baris dengan elipsis tepat di batas kolom.
     Dipilih lewat CSS, bukan memotong string di PHP, karena batasnya ikut
     lebar layar dan teks lengkapnya tetap utuh di HTML — jadi mesin
     pencari tetap membacanya. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reader-related-list a:hover,
.reader-related-list a:focus-visible {
  text-decoration: underline;
}

.reader-related-meta {
  /* Membatasi lebar item ikut membatasi lebar kolom "auto" di atas. */
  max-width: 18rem;
  font-size: 0.78rem;
  color: var(--color-text-muted, #64748b);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Di layar sempit judul dan keterangannya ditumpuk supaya judul
   mendapat lebar penuh, bukan berebut ruang dengan nama jurnal. */
@media (max-width: 640px) {
  .reader-related-list {
    /* Layar sempit: satu kolom, judul dapat lebar penuh dan keterangan
       jatuh ke baris bawahnya. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
  /* Jarak antar entri dikembalikan lewat margin, karena gap baris kini
     dipakai untuk memisahkan judul dari keterangannya. */
  .reader-related-list .reader-related-meta {
    margin-bottom: 0.55rem;
  }
  .reader-related-list a {
    max-width: 100%;
  }
  .reader-related-meta {
    max-width: 100%;
    text-align: left;
  }
}

/* Bagian terkait tidak perlu ikut tercetak */
@media print {
  .reader-related { display: none; }
}


/* ============================================
   MODAL ADUAN ARTIKEL
   Primitif isiannya (.form-field, .btn-solid, dst) ada di css/form.css
   supaya dipakai bersama halaman sponsorship.
   ============================================ */
/* Tombol mengambang di pojok kanan bawah.
   z-index-nya di bawah modal (1000) dan toast (9999), jadi ia tertutup
   rapi begitu formulirnya dibuka. */
.report-fab {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 900;

  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.2rem;

  border: 1.5px solid #d97706;
  border-radius: var(--radius-full);
  background: white;
  color: #b45309;

  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  transition: var(--transition);
}

.report-fab:hover {
  background: #b45309;
  border-color: #b45309;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(180, 83, 9, 0.32);
}

.report-fab:focus-visible {
  outline: 3px solid rgba(217, 119, 6, 0.45);
  outline-offset: 2px;
}

.report-fab-icon {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .report-fab:hover { transform: none; }
}

/* Tidak ikut tercetak. */
@media print {
  .report-fab { display: none !important; }
}

.report-modal-content {
  max-width: 640px;
}

.report-body {
  padding-top: var(--space-5);
}

.report-intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-3);
}

/* Judul artikel yang sedang dilaporkan — konteks, bukan isian */
.report-article {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0.7rem 0.9rem;
  margin-bottom: var(--space-5);
}

.report-privacy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-top: calc(var(--space-2) * -1);
}

@media (max-width: 768px) {
  .report-modal-content { max-height: 92vh; }
  .report-body { padding-left: var(--space-5); padding-right: var(--space-5); }

  /* Tombolnya tetap berlabel — ikon saja terlalu samar untuk tindakan
     yang jarang dipakai — hanya dirampingkan supaya tidak menutupi teks. */
  .report-fab {
    right: var(--space-4);
    bottom: var(--space-4);
    padding: 0.6rem 1rem;
    font-size: var(--text-xs);
  }

  /* Di layar sempit toast yang di tengah bawah bertabrakan dengan
     tombol mengambang, jadi ia dinaikkan ke atasnya. */
  .reader-toast { bottom: 4.75rem; }
}