/* =========================================================================
   Sinyal - meja dispatch
   Latar kertas peta, tinta biru gelap, jingga hanya untuk yang sedang hidup.
   ========================================================================= */

:root {
  --paper:        #e9edf2;
  --paper-deep:   #dde3eb;
  --surface:      #fbfcfd;
  --surface-sunk: #f2f5f8;

  --ink:   #111a26;
  --ink-2: #3a4859;
  --ink-3: #6b7b8e;
  --ink-4: #9aa8b8;

  /*
   * Kromium: permukaan yang SELALU gelap, di tema mana pun — bilah atas, plat
   * gerbang, tombol utama, kepala modal, balasan mentah, toast.
   *
   * Dulu keenamnya memakai var(--ink), yaitu token TEKS, sebagai latar. Selama
   * hanya ada satu tema itu tidak terasa salah: kebetulan tinta gelap dan latar
   * gelap bernilai sama. Begitu tema malam membalik --ink jadi terang, keenam
   * permukaan itu ikut terang serentak — dan teks terang yang ditulis di atasnya
   * lenyap. Bilah atas adalah yang pertama pecah.
   *
   * Dipisah supaya "warna tinta" dan "warna permukaan gelap" bisa bergerak
   * sendiri-sendiri.
   */
  --chrome:       #111a26;
  --chrome-deep:  #05101c;
  --chrome-ink:   #eef2f6;
  --chrome-ink-2: #dbe4ed;
  --chrome-ink-3: #93a5b8;
  /*
   * Dua nada tambahan yang ada HANYA supaya tema terang tidak bergeser.
   *
   * Keduanya cuma berselisih empat sampai enam dari 255 terhadap tetangganya —
   * mata tidak akan membedakannya. Tapi melipatnya berarti tema yang sudah
   * dipakai berubah diam-diam waktu mode malam dipasang, dan perubahan yang
   * tidak diminta lebih mahal daripada dua baris ini.
   */
  --chrome-ink-4: #8fa3b8;
  --chrome-raw:   #d5dee7;

  --rule:      #c9d3de;
  --rule-soft: #dfe6ed;

  --signal:      #d6541f;
  --signal-deep: #a83f14;
  --signal-soft: #fbeae1;

  --fix:      #0f6b5c;
  --fix-soft: #e2efec;

  --alert:      #9b1c2e;
  --alert-soft: #f8e8ea;

  /*
   * Token yang lahir waktu mode malam dibuat.
   *
   * Nilainya di sini SAMA PERSIS dengan warna yang dulu ditulis langsung di
   * tempatnya masing-masing, jadi tema terang tidak bergeser satu piksel pun.
   * Gunanya baru terasa di tema malam: tanpa nama, warna-warna ini tidak bisa
   * ikut berpindah dan akan tertinggal sebagai bercak terang.
   *
   * -lift  : permukaan yang terangkat DI ATAS --surface (dulu #fff)
   * -hover : latar sorot di atas --surface-sunk
   * -line  : garis tepi pendamping warna status, pasangan dari -soft
   * -fill  : latar lencana kecil bernada hijau
   * -deep  : nada tua untuk hover; di tema malam arahnya berbalik jadi lebih
   *          terang, karena di latar gelap "lebih tua" berarti menghilang
   */
  --surface-lift:  #fff;
  --surface-hover: #eef2f6;

  --signal-line: #eec3ad;
  --fix-line:    #a9cdc5;
  --fix-fill:    #cfe4df;
  --fix-deep:    #0b5548;
  --alert-line:  #e0b3ba;
  --alert-deep:  #7d1625;
  --alert-text:  #6f1220;

  /* Penanda jenis kelamin pada pohon keluarga. Sengaja bukan jingga atau merah:
     keduanya sudah berarti "sedang hidup" dan "bahaya" di seluruh aplikasi. */
  --pria:        #2f6fb0;
  --pria-soft:   #e7f0f8;
  --wanita:      #a8447a;
  --wanita-soft: #f9e9f1;

  --font-ui: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  color-scheme: light;

  --bar-h: 52px;
  --pad-w: 384px;

  --shadow-sheet: 0 1px 2px rgb(17 26 38 / 6%), 0 8px 24px -12px rgb(17 26 38 / 18%);
  --shadow-pop: 0 12px 32px -8px rgb(17 26 38 / 28%);
}


/* ======================= Tema malam =======================
 *
 * Satu blok, satu penanda: <html data-tema="gelap">.
 *
 * Sengaja TIDAK memakai @media (prefers-color-scheme) sebagai jalur kedua.
 * Jalur kedua berarti empat puluh token ditulis dua kali di berkas tiga ribu
 * baris tanpa tahap build, dan dua salinan pasti menyimpang. Sebagai gantinya,
 * assets/js/tema.js menerjemahkan selera sistem menjadi penanda eksplisit
 * sebelum lembar gaya ini dibaca — jadi yang di sini cukup satu kebenaran.
 *
 * Yang TIDAK ikut berubah, dan itu disengaja:
 *   --chrome*  tetap gelap di kedua tema; ia memang permukaan gelap, bukan tinta
 *   .qr        putihnya dibaca kamera
 *
 * Arah hover BERBALIK di sini: pada tema terang, "deep" berarti lebih tua;
 * pada latar gelap lebih tua berarti menghilang, jadi nilainya lebih terang.
 * Angka kontras tiap pasangan diperiksa terhadap syarat WCAG 4.5:1 untuk teks.
 */
:root[data-tema="gelap"] {
  color-scheme: dark;

  /* Abu kebiruan, bukan hitam pekat — senada dengan palet peta "Malam" yang
   * sudah ada di config/map-styles.js, supaya peta dan panel tidak bertabrakan.
   * Kartu lebih TERANG dari halaman, arah yang sama seperti tema terang. */
  --paper:         #0e141c;
  --paper-deep:    #080c12;
  --surface:       #161e28;
  --surface-sunk:  #101722;
  --surface-lift:  #202b38;
  --surface-hover: #283340;

  --ink:   #e6ecf3;   /* 14,1:1 di atas --surface */
  --ink-2: #b9c6d4;   /*  9,7:1 */
  --ink-3: #8b9bad;   /*  5,9:1 */
  --ink-4: #66788c;   /*  3,7:1 — hanya label dan teks bayangan */

  --rule:      #39465a;
  --rule-soft: #242e3c;

  /* Permukaan kromium dinaikkan sedikit supaya bilah atas terbaca sebagai
   * bidang terangkat, bukan melebur dengan halaman yang kini sama gelapnya. */
  --chrome:      #1b2533;
  --chrome-deep: #121a24;

  /* Jingga bata tetap jingga bata — rupanya dijaga, terangnya diturunkan
   * supaya tidak membara di latar gelap. 5,5:1 sebagai teks. */
  --signal:      #e8703a;
  --signal-deep: #f28c5c;
  --signal-soft: #2a1a12;
  --signal-line: #8a4a28;

  /* Hijau dan merah dipinjam dari lampu rail, yang memang sudah hidup di atas
   * latar gelap sejak awal. Merahnya dinaikkan satu nada: nilai rail #e05260
   * hanya 4,4:1, kurang sedikit dari syarat teks. */
  --fix:      #3fb984;
  --fix-deep: #7fd3ae;
  --fix-soft: #0f2520;
  --fix-line: #2f6b58;
  --fix-fill: #1a3832;

  --alert:      #e8646f;
  --alert-deep: #f0949e;
  --alert-text: #f0949e;
  --alert-soft: #2a1317;
  --alert-line: #7a3540;

  --pria:        #6ea8e0;
  --pria-soft:   #13212e;
  --wanita:      #d884ae;
  --wanita-soft: #271320;

  /* Bayangan gelap tidak kelihatan di atas latar gelap. Dipekatkan, dan
   * ketebalannya dikurangi supaya kartu tetap punya tepi yang terbaca. */
  --shadow-sheet: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 60%);
  --shadow-pop:   0 12px 32px -8px rgb(0 0 0 / 70%);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--fix); }

[hidden] { display: none !important; }

/* --- Label instrumen: dipakai untuk semua judul kecil --- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mono { font-family: var(--font-mono); font-variant-ligatures: none; }

.muted { color: var(--ink-3); }

/* =========================================================================
   Gerbang masuk
   ========================================================================= */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, #f3f6f9 0%, var(--paper) 55%, var(--paper-deep) 100%);
}

.gate-panel {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sheet);
}

.gate-plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--chrome);
  color: var(--chrome-ink);
}

.gate-plate .eyebrow { color: var(--chrome-ink-4); }

.gate-body { padding: 28px 28px 24px; }

.gate-title {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.gate-sub { margin: 0 0 22px; color: var(--ink-3); font-size: 13px; }

.gate-foot {
  border-top: 1px solid var(--rule-soft);
  padding: 14px 28px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* =========================================================================
   Bilah atas
   ========================================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  background: var(--chrome);
  color: var(--chrome-ink);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 15px;
}

.brand-mark {
  width: 0;
  height: 0;
  border-left: 9px solid var(--signal);
  border-bottom: 9px solid transparent;
  align-self: center;
}

/*
 * Deretan tab sekarang bisa berisi sepuluh tab, bukan tiga.
 *
 * Dibiarkan menggulir mendatar dan boleh menyusut, supaya bar atas tidak
 * terdorong dan bagian "siapa saya" di kanan tidak terdesak keluar layar.
 */
.tabs {
  display: flex;
  gap: 0;
  margin-left: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { flex: 0 0 auto; }

.tab {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--chrome-ink-3);
  padding: 6px 14px;
  height: 32px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 120ms ease, border-color 120ms ease;
}

.tab:hover { color: var(--chrome-ink-2); }

.tab[aria-selected='true'] {
  color: #fff;
  border-bottom-color: var(--signal);
}

.tab:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }

.topbar-spacer { flex: 1; }

/* --- Rail 10 line: tanda kecil yang menunjukkan lalu lintas --- */
.rail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid #2b3a4b;
  background: #0b131d;
}

.rail-bars { display: flex; gap: 3px; align-items: flex-end; }

.rail-bar {
  width: 6px;
  height: 18px;
  background: #2d3d4f;
  border-radius: 1px;
  position: relative;
  cursor: default;
}

.rail-bar[data-status='idle']     { background: #6d8399; }
.rail-bar[data-status='busy']     { background: var(--signal); }
.rail-bar[data-status='cooldown'] { background: #26333f; box-shadow: inset 0 -6px 0 #55708a; }
.rail-bar[data-status='disabled'],
.rail-bar[data-status='offline'] {
  background: transparent;
  box-shadow: inset 0 0 0 1px #35465a;
}

.rail-bar[data-mine='true']::after {
  content: '';
  position: absolute;
  inset: -3px -2px;
  border: 1px solid var(--signal);
}

/* Lampu keadaan untuk peran selain superadmin.
   Warna tema terang (--fix, --alert) tidak terbaca di bilah gelap ini, jadi
   nadanya dinaikkan. Warna tidak pernah jadi satu-satunya pembeda: teks di
   sebelahnya selalu menyebutkan keadaannya dengan kata. */
.rail-lamp {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #55708a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

.rail-lamp[data-level='ok'] {
  background: #3fb984;
  box-shadow: 0 0 0 1px rgba(63, 185, 132, .35), 0 0 7px rgba(63, 185, 132, .55);
}
.rail-lamp[data-level='busy'] {
  background: var(--signal);
  box-shadow: 0 0 0 1px rgba(214, 84, 31, .35), 0 0 7px rgba(214, 84, 31, .5);
}
.rail-lamp[data-level='down'] {
  background: #e05260;
  box-shadow: 0 0 0 1px rgba(224, 82, 96, .4), 0 0 8px rgba(224, 82, 96, .6);
  animation: railPulse 1.6s ease-in-out infinite;
}

@keyframes railPulse {
  50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-lamp[data-level='down'] { animation: none; }
}

/* Mode ringkas: satu lampu, jadi jaraknya tidak perlu selebar deretan bilah. */
.rail-bars[data-mode='ringkas'] { align-items: center; }

.rail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #7f93a8;
  white-space: nowrap;
}

.rail-label[data-level='ok']   { color: #7fd3ae; }
.rail-label[data-level='busy'] { color: #f0a077; }
.rail-label[data-level='down'] { color: #f0949e; }

.who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  border-left: 1px solid #2b3a4b;
}

.who-name { font-size: 13px; font-weight: 600; }
.who-role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome-ink-4);
}

.linkish {
  appearance: none;
  background: none;
  border: 0;
  color: var(--chrome-ink-3);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px;
}
.linkish:hover { color: #fff; }

/* Dipakai untuk tombol teks di atas latar terang, menggantikan warna inline
   yang membuat aturan :hover di atas tidak pernah berlaku. */
.linkish-dark { color: var(--ink-3); }
/* Tautan tindakan merusak: sama ringannya, tapi warnanya tidak boleh sama. */
.linkish-danger { color: var(--signal-deep); }
.linkish-danger:hover { text-decoration: underline; }

.linkish-dark:hover { color: var(--ink); }

/* =========================================================================
   Tata letak konsol
   ========================================================================= */

.console {
  display: grid;
  grid-template-columns: var(--pad-w) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-height: calc(100dvh - var(--bar-h));
}

.pad {
  position: sticky;
  top: var(--bar-h);
  height: calc(100dvh - var(--bar-h));
  overflow-y: auto;
  padding: 22px 20px 32px;
  background: var(--surface-sunk);
  border-right: 1px solid var(--rule);
}

.stage { padding: 22px 26px 64px; min-width: 0; }

.pad-block + .pad-block { margin-top: 26px; }

/* Keterangan sebaris di bawah judul panel kiri. */
.pad-note {
  margin: -2px 0 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-4);
}

.pad-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

/* =========================================================================
   Formulir
   ========================================================================= */

.field { display: block; margin-bottom: 14px; }

.field-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

textarea.input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select.input { font-family: var(--font-ui); font-size: 14px; letter-spacing: 0; }

.input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--signal);
}

.input::placeholder { color: var(--ink-4); }

.input-lg { height: 50px; font-size: 19px; font-weight: 500; }

/* --- Pilihan perintah: kartu radio, bukan dropdown --- */
.choices { display: grid; gap: 6px; margin-bottom: 16px; }

.choice {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.choice:hover { border-color: var(--ink-3); }

.choice input { margin: 3px 0 0; accent-color: var(--signal); }

.choice-name { font-size: 13px; font-weight: 600; }
.choice-hint { font-size: 12px; color: var(--ink-3); line-height: 1.35; }

.choice:has(input:checked) {
  border-color: var(--ink);
  background: var(--surface-lift);
  box-shadow: inset 3px 0 0 var(--signal);
}

.choice:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }

/* --- Centang --- */
.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: -2px 0 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}

.check input {
  margin: 2px 0 0;
  accent-color: var(--signal);
  flex-shrink: 0;
}

.check:hover span { color: var(--ink); }
.check:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 3px; }

/* --- Tombol --- */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  background: var(--chrome);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.btn:hover:not(:disabled) { background: var(--chrome-deep); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.btn-block { width: 100%; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface); border-color: var(--ink-3); }

.btn-danger { background: var(--alert); border-color: var(--alert); }
.btn-danger:hover:not(:disabled) { background: var(--alert-deep); }

/* Menyalakan dan mematikan fitur adalah dua tindakan berlawanan, jadi tombolnya
   tidak boleh terlihat sama. Sebelumnya keduanya memakai '.btn' polos —
   '.btn-primary' yang dipakai di JS tidak pernah ada di berkas ini, jadi
   diam-diam jatuh ke gaya bawaan.

   Warna bukan satu-satunya pembeda: tulisannya sendiri sudah menyebut
   "Nyalakan" atau "Matikan", dan bentuknya berbeda — yang menyalakan terisi
   penuh, yang mematikan bergaris. */
.btn-on {
  background: var(--fix);
  border-color: var(--fix);
  color: #fff;
}
.btn-on:hover:not(:disabled) { background: var(--fix-deep); border-color: #0b5548; }

.btn-off {
  background: transparent;
  color: var(--alert);
  border-color: var(--alert-line);
}
.btn-off:hover:not(:disabled) {
  background: var(--alert-soft);
  border-color: var(--alert);
}

.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }

/* =========================================================================
   Tiket permintaan - satu-satunya bagian yang bergerak
   ========================================================================= */

.ticket {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ticket-code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.ticket-input {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.ticket-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-bottom: 8px;
}

.ticket-step {
  height: 3px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}

.ticket-step[data-state='done'] { background: var(--ink-2); }
.ticket-step[data-state='active'] { background: var(--signal-soft); }

.ticket-step[data-state='active']::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform-origin: left;
  animation: crawl 1.6s ease-in-out infinite;
}

@keyframes crawl {
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0; }
}

.ticket-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.ticket[data-status='completed'] { border-color: var(--fix); box-shadow: inset 3px 0 0 var(--fix); }
.ticket[data-status='timeout'],
.ticket[data-status='failed']    { border-color: var(--alert); box-shadow: inset 3px 0 0 var(--alert); }
.ticket[data-status='queued'],
.ticket[data-status='dispatched'],
.ticket[data-status='awaiting_reply'] { border-color: var(--signal); box-shadow: inset 3px 0 0 var(--signal); }

/* =========================================================================
   Riwayat
   ========================================================================= */

.history { display: grid; gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); }

.history-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface);
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 120ms ease;
}

.history-item:hover { background: var(--surface-lift); }
.history-item[aria-current='true'] { background: var(--surface-lift); box-shadow: inset 3px 0 0 var(--ink); }

.history-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.history-input { font-family: var(--font-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================================
   Penanda status
   ========================================================================= */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
}

.chip-live   { color: var(--signal-deep); border-color: var(--signal-line); background: var(--signal-soft); }
.chip-ok     { color: var(--fix);         border-color: var(--fix-line); background: var(--fix-soft); }
.chip-bad    { color: var(--alert);       border-color: var(--alert-line); background: var(--alert-soft); }
.chip-idle   { color: var(--ink-3);       border-color: var(--rule); background: var(--surface-sunk); }

.dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.chip-live .dot { animation: blink 1.4s ease-in-out infinite; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* =========================================================================
   Lembar hasil
   ========================================================================= */

.sheet {
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sheet);
  animation: rise 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/*
 * Peringatan yang datang dari SERVER, bukan dari sumber.
 *
 * Memakai warna --signal, bukan --alert: hasilnya sering tetap berguna dan
 * tetap ditampilkan di bawahnya. Yang disampaikan bukan "ini rusak" melainkan
 * "ada bagian yang tidak sampai karena kami, jangan disimpulkan sebagai tidak
 * ada" — dan itu tidak sepantas merah yang dipakai kegagalan sungguhan.
 *
 * Dipasang menempel di bawah kepala lembar, sebelum isinya, supaya terbaca
 * lebih dulu daripada hasil yang sedang dikoreksinya.
 */
.spanduk-server {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--signal-soft);
}

.spanduk-server p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.spanduk-tanda {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--surface);
  background: var(--signal);
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(var(--surface), var(--surface-sunk));
}

.sheet-title { margin: 2px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.sheet-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.sheet-meta { text-align: right; display: grid; gap: 6px; justify-items: end; }

.sheet-body { padding: 20px; }

.sheet-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-3);
}

.sheet-empty-title { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }

/* --- Saklar fitur --- */

.feature-group + .feature-group { margin-top: 22px; }

.feature-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2px;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.feature-row:last-child { border-bottom: 0; }

.feature-name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.feature-hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-3);
  margin-top: 3px;
  max-width: 62ch;
}

.feature-meta {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 5px;
  opacity: .75;
}

/* Status dan tombol dijaga selebar tetap supaya tepi kanannya lurus
   sepanjang daftar, tidak bergeser mengikuti panjang kata. */
.feature-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.feature-action .chip { min-width: 62px; text-align: center; }
.feature-action .btn { min-width: 92px; }

@media (max-width: 620px) {
  .feature-row { grid-template-columns: 1fr; gap: 10px; }
  .feature-action { justify-content: flex-start; }
}

/* Daftar 37 perintah di dalam saklar fitur. Padat, karena isinya banyak dan
   dibaca sambil membandingkan, bukan dibaca satu per satu. */
.btn-mini {
  /* .btn memaksa tinggi 42px; tanpa ditimpa, tombol kecil ini tetap setinggi
     tombol biasa dan barisnya jadi longgar sekali. */
  height: 28px;
  padding: 0 11px;
  font-size: 11px;
  min-width: 82px;
}

.cmd-list {
  margin-top: 4px;
  padding: 14px 16px 4px;
  background: var(--surface-sunk);
  border: 1px solid var(--rule-soft);
}
.cmd-list[hidden] { display: none; }

.cmd-group + .cmd-group { margin-top: 16px; }

.cmd-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2px;
}
.cmd-group-head .btn-mini { margin-left: auto; }

.cmd-switches {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.cmd-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.cmd-row:last-child { border-bottom: 0; }

.cmd-name { font-size: 12.5px; font-weight: 500; }

.cmd-hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-3);
  margin-top: 2px;
  max-width: 66ch;
}

/* --- Peta --- */
.mapwrap {
  position: relative;
  border: 1px solid var(--rule);
  margin-bottom: 18px;
  background: var(--paper-deep);
}

.map { height: clamp(280px, 42vh, 420px); width: 100%; }
.map:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }

.map-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--rule);
  background: var(--surface);
}

.readout-cell {
  flex: 1 1 auto;
  min-width: 118px;
  padding: 8px 12px;
  border-right: 1px solid var(--rule-soft);
}
.readout-cell:last-child { border-right: 0; }

.readout-value { font-family: var(--font-mono); font-size: 13px; font-weight: 500; margin-top: 2px; }

.map-note {
  padding: 8px 12px;
  border-top: 1px solid var(--rule-soft);
  font-size: 12px;
  color: var(--ink-3);
  background: var(--surface-sunk);
}

/*
 * Tautan ke peta luar. Warnanya diambil dari token yang sama dengan sisa
 * konsol, jadi mode malam ikut sendiri tanpa aturan terpisah.
 */
.map-tautan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--rule-soft);
  background: var(--surface-sunk);
}

.map-tautan-item {
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 1px;
}

.map-tautan-item:hover,
.map-tautan-item:focus-visible { color: var(--ink); border-bottom-color: currentColor; }

/* Tinggi peta datang dari .map di atas. Aturan ini SENGAJA tidak menyetel
   tinggi: .maplibregl-map menempel pada elemen yang sama, dan karena letaknya
   lebih belakang di berkas ini, 'height' apa pun di sini akan menimpa .map —
   induknya bertinggi otomatis, jadi petanya kolaps jadi segaris. */
.maplibregl-map { font-family: var(--font-ui); background: var(--paper-deep); }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-attrib-inner { font-size: 10px; }

/* Kontrol peta memasang z-index tinggi pada dirinya sendiri. Tanpa batas ini
   tombol zoom menembus bilah atas yang sticky dan menutupi toast. */
.mapwrap { isolation: isolate; z-index: 0; }
.mapwrap .maplibregl-canvas-container,
.mapwrap .maplibregl-ctrl-top-left,
.mapwrap .maplibregl-ctrl-top-right,
.mapwrap .maplibregl-ctrl-bottom-left,
.mapwrap .maplibregl-ctrl-bottom-right { z-index: 1; }

/* --- Blok data --- */
.blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px;
  background: var(--surface);
}

.block {
  background: var(--surface);
  padding: 14px 16px;
  box-shadow: 0 0 0 1px var(--rule-soft);
}
.block-title { margin-bottom: 10px; }

.rows { display: grid; gap: 7px; }

.row {
  display: grid;
  grid-template-columns: minmax(76px, 30%) 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}

.row-label { color: var(--ink-3); font-size: 12px; }
.row-value { overflow-wrap: anywhere; }
.row-value.mono { font-family: var(--font-mono); font-size: 12.5px; }
.row-value.emphasis { font-weight: 700; font-size: 15px; }

.row-derived::after {
  content: 'dihitung';
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  vertical-align: 1px;
}

/* --- Daftar anggota / kandidat --- */
.stack { display: grid; gap: 12px; }

.card {
  border: 1px solid var(--rule);
  background: var(--surface);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--surface-sunk);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  border-left: 0; border-right: 0; border-top: 0;
}

.card-head:hover { background: var(--surface-hover); }
.card-name { font-weight: 700; font-size: 14px; }
.card-body { padding: 14px; }

/* =========================================================================
   Lampiran foto
   ========================================================================= */

.shots { margin: 0 0 18px; }

.shots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shot {
  display: block;
  border: 1px solid var(--rule);
  background: var(--surface-sunk);
  padding: 5px;
  line-height: 0;
  transition: border-color 120ms ease;
}

.shot:hover { border-color: var(--ink); }
.shot:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.shot img {
  display: block;
  height: clamp(150px, 22vh, 220px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.shot-item { margin: 0; }

.shot-caption {
  display: block;
  margin-top: 5px;
  max-width: 150px;
}

.shot-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.shot-relation {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 1px;
}

/* Orang yang dicari berdiri sendiri di depan, kerabatnya berderet di bawah.
   Dalam satu deret rata, wajah subjek tenggelam di antara wajah lain. */
.shots-lead {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
}

.shot-item-lead .shot img { height: clamp(190px, 30vh, 300px); }

.shots-lead-text {
  padding-top: 4px;
  min-width: 0;
}

.shots-lead-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  margin-top: 3px;
  line-height: 1.25;
}

.shots-group-label { margin-bottom: 8px; }

@media (max-width: 560px) {
  .shots-lead { flex-direction: column; gap: 10px; }
}

.shots-note {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-3);
}

/* =========================================================================
   Kartu line WhatsApp
   ========================================================================= */

.lines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.line-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sheet);
  display: flex;
  flex-direction: column;
}

.line-card[data-state='open'] { box-shadow: var(--shadow-sheet), inset 3px 0 0 var(--fix); }
.line-card[data-state='qr'] { box-shadow: var(--shadow-sheet), inset 3px 0 0 var(--signal); }
.line-card[data-state='logged_out'] { box-shadow: var(--shadow-sheet), inset 3px 0 0 var(--alert); }

.line-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--rule-soft);
}

.line-name { font-size: 14px; font-weight: 700; }

.line-body { padding: 14px 15px; display: grid; gap: 12px; }

.line-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 15px;
  border-top: 1px solid var(--rule-soft);
  background: var(--surface-sunk);
}

.line-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.qr-block {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/*
 * Putihnya DISENGAJA dan tidak boleh ikut digelapkan tema malam: kode QR dibaca
 * kamera, dan kamera menuntut kontras hitam-di-atas-putih yang sebenarnya.
 */
.qr {
  width: 168px;
  height: 168px;
  border: 1px solid var(--rule);
  background: #fff;
  padding: 6px;
  image-rendering: pixelated;
}

.qr-steps { flex: 1 1 180px; min-width: 180px; }

.steps {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.steps li { margin-bottom: 4px; }

/* =========================================================================
   Tabel data dari laporan
   ========================================================================= */

.datatables { display: grid; gap: 18px; margin-top: 18px; }

.datatable-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.datatable .tablewrap { border: 1px solid var(--rule-soft); }
.datatable table.grid { font-size: 12.5px; }
.datatable table.grid th { padding: 7px 11px; }
.datatable table.grid td { padding: 7px 11px; }

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 16px;
}

/* =========================================================================
   Sambungan antar pengenal
   ========================================================================= */

.links {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.links-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 10px;
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 6px;
}

.link-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'type value' 'type relation';
  gap: 0 9px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}

.link-chip:hover { border-color: var(--ink); background: var(--surface-lift); }
.link-chip:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.link-type {
  grid-area: type;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 34px;
  padding: 0 5px;
  background: var(--signal-soft);
  color: var(--signal-deep);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.link-value { grid-area: value; font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.link-relation { grid-area: relation; font-size: 11px; color: var(--ink-3); }

.link-chip[data-visited='true'] { background: var(--fix-soft); border-color: var(--fix-line); }
.link-chip[data-visited='true'] .link-type { background: var(--fix-fill); color: var(--fix); }

/* Pengenal yang tidak bisa ditelusuri peran ini: tetap terbaca, tapi tidak
   berpura-pura bisa diklik. */
.link-chip[data-locked='true'] {
  cursor: default;
  background: var(--surface-sunk);
  border-style: dashed;
}

.link-chip[data-locked='true']:hover { border-color: var(--rule); background: var(--surface-sunk); }
.link-chip[data-locked='true'] .link-type { background: var(--paper-deep); color: var(--ink-3); }
.link-chip[data-locked='true'] .link-value { color: var(--ink-2); }

/* =========================================================================
   Pemilih perintah untuk daftar panjang
   ========================================================================= */

.picker { margin-bottom: 14px; }

.picker-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}

.subject-card {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: inset 3px 0 0 var(--fix);
  margin-bottom: 8px;
}

.subject-title { font-size: 13px; font-weight: 700; }
.subject-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

.subject-actions { display: flex; gap: 6px; margin-top: 8px; }

/* =========================================================================
   Tabel admin
   ========================================================================= */

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sheet);
  margin-bottom: 20px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}

.panel-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.panel-body { padding: 16px 18px; }
.panel-body-flush { padding: 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  margin-bottom: 20px;
}

.stat { background: var(--surface); padding: 14px 16px; }
.stat-value { font-family: var(--font-mono); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }

.tablewrap { overflow-x: auto; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }

table.grid th {
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-sunk);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

table.grid td { padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: var(--surface-sunk); }

td.actions { white-space: nowrap; text-align: right; }
td.actions .btn + .btn { margin-left: 6px; }

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.filters .field { margin-bottom: 0; min-width: 150px; }

/* =========================================================================
   Dialog
   ========================================================================= */

dialog.modal {
  border: 1px solid var(--ink);
  padding: 0;
  width: min(520px, calc(100vw - 32px));
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}

dialog.modal::backdrop { background: rgb(17 26 38 / 42%); }

.modal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--chrome);
  color: #fff;
}
.modal-title { margin: 0; font-size: 15px; font-weight: 700; }
.modal-body { padding: 18px; max-height: min(62vh, 560px); overflow-y: auto; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
  background: var(--surface-sunk);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .grid-3 { grid-template-columns: 1fr; } }

pre.raw {
  margin: 0;
  padding: 14px;
  background: var(--chrome);
  color: var(--chrome-raw);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* =========================================================================
   Pesan sistem
   ========================================================================= */

.note {
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--surface);
  font-size: 13px;
  margin-bottom: 14px;
}

.note-bad  { border-color: var(--alert-line); background: var(--alert-soft); color: var(--alert-text); }
.note-warn { border-color: var(--signal-line); background: var(--signal-soft); color: var(--signal-deep); }

.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: grid;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}

.toast {
  padding: 11px 14px;
  background: var(--chrome);
  color: var(--chrome-ink);
  font-size: 13px;
  box-shadow: var(--shadow-pop);
  animation: rise 180ms ease;
}

.toast-bad { background: var(--alert); }
.toast-ok  { background: var(--fix); }

.spinner {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin 700ms linear infinite;
}

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

/* =========================================================================
   Layar sempit
   ========================================================================= */

@media (max-width: 1020px) {
  .console { grid-template-columns: 1fr; }
  .pad {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .stage { padding: 18px 16px 56px; }
  .rail-label { display: none; }
}

@media (max-width: 720px) {
  .topbar { gap: 10px; padding: 0 10px; }
  .brand span { display: none; }
  .rail { display: none; }
  .who { padding-left: 10px; }
  .who-name { display: none; }
  .tab { padding: 6px 9px; letter-spacing: 0.08em; }
  .sheet-head { flex-direction: column; }
  .sheet-meta { text-align: left; justify-items: start; }
  .row { grid-template-columns: 1fr; gap: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Peta -------------------------------------------------------------- */

/* Penanda menara: titik pekat dengan lingkar tipis, supaya tetap terbaca di
   atas gaya terang maupun gelap. */
.map-tower {
  display: block;
  width: 18px;
  height: 18px;
  position: relative;
}
.map-tower::before {
  content: '';
  position: absolute;
  inset: 5px;
  background: #111a26;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fbfcfd;
}
.map-tower::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #111a26;
  border-radius: 50%;
  opacity: .35;
}

/* Angka azimuth di ujung pancaran, supaya bacaan arah antena punya wujud. */
.map-azimuth {
  display: block;
  padding: 0 5px;
  font: 600 10px/16px ui-monospace, Menlo, monospace;
  letter-spacing: .06em;
  color: #a83f14;
  background: #fbfcfd;
  border: 1px solid var(--signal-line);
  white-space: nowrap;
}

/* Pemilih gaya peta. */
.map-style-picker select {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 22px 6px 9px;
  font: 500 11px/1 inherit;
  letter-spacing: .04em;
  color: #111a26;
  cursor: pointer;
}
.map-style-picker {
  background-image: linear-gradient(45deg, transparent 50%, #111a26 50%),
                    linear-gradient(135deg, #111a26 50%, transparent 50%);
  background-position: calc(100% - 12px) 13px, calc(100% - 8px) 13px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}


/* Penyaring daftar hasil panjang (mis. /nama dengan satu kata). */
.listfilter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.listfilter .input { flex: 1 1 auto; }
.listfilter .muted { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
  .listfilter { flex-wrap: wrap; }
  .listfilter .muted { width: 100%; }
}

/* =========================================================================
   Pengenalan wajah
   Wajah, nama, dan angka kemiripan dalam satu baris yang bisa dipindai cepat.
   ========================================================================= */

.face-list { display: grid; gap: 10px; }

.face-card {
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

/* Foto berdiri sendiri di kiri, tombol buka-tutup mengisi sisanya. */
.face-head-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 0 10px 10px;
  background: var(--surface-sunk);
}
.face-shot-link { display: block; line-height: 0; }
.face-shot-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 6px; }

.face-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 14px 10px 0;
  border: 0;
  background: var(--surface-sunk);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.face-head:hover { background: var(--surface-hover); }
.face-head:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }

.face-shot {
  width: 72px;
  height: 90px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  display: block;
}
.face-shot-kosong {
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--ink-4);
  text-align: center;
}

.face-main { min-width: 0; }
.face-name {
  font-weight: 700;
  font-size: 15px;
  /* Nama panjang tidak boleh mendorong angka kemiripan keluar dari kartu. */
  overflow-wrap: anywhere;
}
.face-nik { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.face-address {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * Angka kemiripan sengaja TIDAK diberi warna hijau/merah.
 *
 * Warna vonis membuat 74% terbaca sebagai "benar" dan 58% sebagai "salah",
 * padahal keduanya sama-sama dugaan mesin atas kemiripan rupa. Yang digambar
 * hanya angkanya dan panjang batangnya, dalam satu warna.
 */
.face-score { display: grid; gap: 5px; justify-items: end; }
.face-score-num {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.face-meter {
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: var(--paper-deep);
  overflow: hidden;
}
.face-meter-fill { display: block; height: 100%; background: var(--ink-3); }

.face-rules { margin: 14px 0; }
.face-rules ul { margin: 8px 0 0; padding-left: 20px; }
.face-rules li { font-size: 13px; color: var(--ink-2); margin-bottom: 5px; }

.face-engines { margin-top: 16px; display: grid; gap: 8px; }
.face-engines-row { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 560px) {
  .face-head-row { grid-template-columns: 60px minmax(0, 1fr); }
  .face-head { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .face-shot { width: 60px; height: 76px; }
  /* Angka pindah ke baris sendiri, rata kiri di bawah nama. */
  .face-score { grid-column: 1 / -1; justify-items: start; }
  .face-meter { width: 100%; }
}

/* =========================================================================
   Unggah foto untuk pengenalan wajah
   Yang dipampang adalah potongan yang benar-benar terkirim, bukan foto asli.
   ========================================================================= */

.photo-file {
  /* Tersembunyi dari mata, tetap terjangkau papan ketik lewat label-nya. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.photo-stage { margin-top: 8px; }

.photo-drop {
  display: grid;
  gap: 4px;
  place-items: center;
  padding: 26px 16px;
  border: 1.5px dashed var(--rule);
  border-radius: 8px;
  background: var(--surface-sunk);
  cursor: pointer;
  text-align: center;
}
.photo-drop:hover,
.photo-stage[data-seret='true'] .photo-drop {
  border-color: var(--signal);
  background: var(--signal-soft);
}
.photo-file:focus-visible + .photo-stage .photo-drop {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
.photo-drop-title { font-weight: 700; font-size: 14px; }
.photo-drop-hint { font-size: 12px; color: var(--ink-3); }

.photo-busy {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 26px 16px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  background: var(--surface-sunk);
  font-size: 13px;
  color: var(--ink-2);
}

.photo-row { display: flex; gap: 14px; align-items: flex-start; }

.photo-crop {
  width: 160px;
  height: 160px;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
}

.photo-side { min-width: 0; display: grid; gap: 8px; align-content: start; }
.photo-picks { display: flex; flex-wrap: wrap; gap: 6px; }

.photo-pick {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.photo-pick:hover { border-color: var(--ink-4); }
.photo-pick[data-aktif='true'] {
  border-color: var(--signal);
  background: var(--signal-soft);
  color: var(--signal-deep);
  font-weight: 600;
}
.photo-pick:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

@media (max-width: 560px) {
  .photo-row { flex-direction: column; }
  .photo-crop { width: 100%; height: auto; aspect-ratio: 1; }
}

/* Tabel yang isinya bisa ratusan baris (nama tersimpan /gc): tingginya dibatasi
   supaya tidak menenggelamkan sisa lembar, isinya tidak ada yang dipotong. */
.tablewrap-tinggi {
  max-height: 460px;
  overflow-y: auto;
}
.tablewrap-tinggi thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* Kepala tabel harus tetap buram saat baris lewat di belakangnya. */
  background: var(--surface-sunk);
}

/* Nama di pojok adalah pintu ke halaman profil. Dibuat tombol sungguhan supaya
   terjangkau papan ketik dan pembaca layar, tapi tampilannya tetap teks. */
.who-me {
  display: block;
  padding: 4px 8px;
  margin: -4px 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: right;
  cursor: pointer;
}
.who-me:hover { border-color: #2b3a4b; background: #16212e; }
.who-me:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.who-me .who-name,
.who-me .who-role { display: block; }

/* Halaman profil */
.profile-card {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  background: var(--surface);
}
.profile-note {
  margin: 6px 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 62ch;
}
.profile-actions { margin-top: 4px; }
.profile-card .field { max-width: 420px; }

/* =========================================================================
   Intip password
   ========================================================================= */

.peek-wrap { position: relative; display: block; }
.peek-wrap .input { padding-right: 92px; }

.peek {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  padding: 5px 9px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface-sunk);
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-3);
  cursor: pointer;
  /* Lebar dijaga tetap supaya kolom tidak bergeser saat tulisannya berganti
     antara "Lihat" dan "Sembunyikan". */
  min-width: 78px;
  text-align: center;
}
.peek:hover { color: var(--ink); border-color: var(--ink-4); }

/* =========================================================================
   Pratinjau gambar
   ========================================================================= */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox::backdrop { background: rgb(9 14 20 / 88%); }

.lightbox-frame {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 56px 20px 72px;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  /* Latar terang di belakang gambar transparan, supaya PNG berlubang tidak
     hilang menyatu dengan latar gelapnya. */
  background: #f2f5f8;
  box-shadow: 0 18px 60px -12px rgb(0 0 0 / 60%);
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 1px solid #3a4a5c;
  border-radius: 8px;
  background: #16212e;
  color: #e6edf5;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: #22303f; }
.lightbox-close:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.lightbox-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  color: #cfdae6;
  font-size: 13px;
}
.lightbox-caption { min-width: 0; overflow-wrap: anywhere; }
.lightbox-raw { color: #9fc4e8; flex: 0 0 auto; }

/* Halaman di belakang tidak ikut menggulir saat pratinjau terbuka. */
body.lightbox-open { overflow: hidden; }

@media (max-width: 560px) {
  .lightbox-frame { padding: 52px 10px 84px; }
  .lightbox-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* =========================================================================
   Hasil kosong
   Bukan layar error: sebagian besar keadaan di sini adalah jawaban yang sah.
   ========================================================================= */

.empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 64px 24px 72px;
  text-align: center;
}

/* Tanda sederhana, digambar dengan CSS — tidak ada berkas gambar yang perlu
   ikut, dan warnanya mengikuti palet yang sama. */
.empty-mark {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  background: var(--surface-sunk);
  margin-bottom: 4px;
}
.empty-mark::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 19px;
  line-height: 1;
  color: var(--ink-4);
}
/* Tidak ada isinya */
.empty-mark-kosong::after { content: '—'; }
/* Waktu habis */
.empty-mark-jam::after { content: '⌛'; font-size: 17px; }
/* Datang tapi tidak dimengerti */
.empty-mark-tanya::after { content: '?'; }
/* Berhenti sebelum selesai */
.empty-mark-batal::after { content: '×'; font-size: 22px; }
.empty-mark-batal { border-color: var(--alert-line); background: var(--alert-soft); }
.empty-mark-batal::after { color: var(--alert); }

.empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.empty-subject {
  font-size: 13px;
  color: var(--ink-2);
  padding: 3px 10px;
  border-radius: 5px;
  background: var(--surface-sunk);
  border: 1px solid var(--rule-soft);
  /* Boleh disalin, jadi jangan sampai terpotong di layar sempit. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.empty-note {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
}
.empty-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 46ch;
}
.empty-ticket { margin-top: 8px; color: var(--ink-4); }

/* =========================================================================
   Pohon keluarga
   Garis penghubung digambar CSS: tidak ada yang perlu diukur ulang saat
   jendela berubah, dan tidak ada yang bisa meleset saat kartunya beda tinggi.
   ========================================================================= */

.tree {
  margin: 0 0 20px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.tree-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--surface-sunk);
}

/* Keluarga besar lebih lebar dari layar. Digulir mendatar, bukan dilipat:
   melipat baris memutus garis penghubung dan jenjangnya jadi tidak terbaca. */
.tree-top-kanan { display: flex; align-items: baseline; gap: 12px; }

.tree-scroll { overflow-x: auto; padding: 22px 14px 18px; }

.tree-canvas {
  display: grid;
  justify-items: center;
  /* Lebar minimum menjaga pohon tetap di tengah saat isinya sedikit. */
  min-width: max-content;
  margin: 0 auto;
}

.tree-level {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* Sel pembungkus yang membawa garisnya, supaya kartunya sendiri tetap polos. */
.tree-cell {
  position: relative;
  padding: 0 9px;
  display: flex;
}

/* Jenjang kedua ke bawah: satu palang mendatar, lalu turun ke tiap kartu. */
.tree-level-turun { margin-top: 34px; }

.tree-level-turun > .tree-cell { padding-top: 34px; }

.tree-level-turun > .tree-cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 34px;
  background: var(--rule);
}

.tree-level-turun > .tree-cell::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--rule);
}
/* Palangnya berhenti di tengah kartu terluar, tidak menjulur ke kekosongan. */
.tree-level-turun > .tree-cell:first-child::after { left: 50%; }
.tree-level-turun > .tree-cell:last-child::after { right: 50%; }
.tree-level-turun > .tree-cell:only-child::after { display: none; }

/* Batang yang turun dari jenjang di atasnya menuju palang tadi. */
.tree-level-turun::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 1.5px;
  height: 34px;
  margin-top: -34px;
  background: var(--rule);
}
.tree-level { position: relative; }

/* --- Kartu orang --- */

.tree-card {
  position: relative;
  width: 216px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 13px 12px;
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--ink-4);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(17 26 38 / 5%);
}
/* Jenis kelamin tidak diketahui: tetap netral, tidak ditebak. */
.tree-x { border-left-color: var(--ink-4); }
.tree-l { border-left-color: var(--pria); }
.tree-p { border-left-color: var(--wanita); }

.tree-chip {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tree-l .tree-chip { background: var(--pria-soft); color: var(--pria); }
.tree-p .tree-chip { background: var(--wanita-soft); color: var(--wanita); }

.tree-head { display: flex; align-items: center; gap: 9px; }

.tree-face {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
}
.tree-face-kosong {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.tree-l .tree-face-kosong { background: var(--pria-soft); color: var(--pria); }
.tree-p .tree-face-kosong { background: var(--wanita-soft); color: var(--wanita); }

.tree-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.tree-rows {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 3px 8px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
}
.tree-rows dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 1px;
}
.tree-rows dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .tree-card { width: 186px; }
  .tree-scroll { padding: 18px 10px 14px; }
}

/* =========================================================================
   Laporan situasi
   Borang panjang di panggung: dikelompokkan jadi kartu supaya terbaca sebagai
   beberapa langkah, bukan satu dinding isian.
   ========================================================================= */

.report-card {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  background: var(--surface);
}
.report-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 16px;
}

.report-events { display: grid; gap: 12px; }

/* Tiap peristiwa diberi garis kiri sewarna tingkat risikonya, supaya urutan
   prioritas terbaca sambil menggulir tanpa membaca satu per satu. */
.report-event {
  padding: 13px 14px;
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--ink-4);
  border-radius: 7px;
  background: var(--surface-sunk);
}
.report-rendah  { border-left-color: var(--ink-4); }
.report-sedang  { border-left-color: var(--signal); }
.report-tinggi  { border-left-color: var(--alert); }
.report-kritis  { border-left-color: var(--alert); box-shadow: inset 0 0 0 1px var(--alert-soft); }

.report-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.report-event-tools { display: flex; align-items: center; gap: 8px; }

.report-level {
  width: auto;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  text-transform: capitalize;
}

.report-area {
  min-height: 52px;
  padding-top: 8px;
  padding-bottom: 8px;
  resize: vertical;
  line-height: 1.5;
}

/* Dua kolom sumber berdampingan: pilih dari daftar, atau ketik sendiri. */
.report-source {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 16px;
}

/* Sudut penelusuran: beberapa kotak centang berjajar. */
.report-lenses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 4px 0 2px;
}
.report-lenses .check { margin: 0; font-size: 12.5px; }

/* Baris analisis mesin — dibedakan karena ini satu-satunya yang berbiaya. */
.report-analisis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 14px 0 10px;
  padding: 11px 13px;
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--signal);
  border-radius: 7px;
  background: var(--signal-soft);
}
.report-analisis-kiri { display: grid; gap: 2px; }
.report-analisis-kanan { display: flex; align-items: center; gap: 8px; }
.report-ai-hasil { flex: 1 0 100%; margin-top: 6px; }

/* Hasil tarikan berita, di bawah borangnya. */
.report-hasil { margin-top: 16px; }
.report-hasil .grid td { vertical-align: top; }

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.report-preview {
  max-height: 460px;
  overflow: auto;
  margin: 0;
}

@media (max-width: 560px) {
  .report-grid { grid-template-columns: 1fr; }
  .report-event-head { flex-wrap: wrap; }
}

/* ---------- Peta situasi ---------- */

/*
 * Peta di kiri, catatan wilayah di kanan. Petanya yang melar mengikuti layar,
 * bukan panel catatannya: yang dibaca berulang-ulang adalah bentuk wilayah dan
 * warnanya, sedangkan catatan dibaca satu wilayah pada satu waktu.
 */
.peta-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  height: calc(100vh - var(--bar-h) - 48px);
  min-height: 420px;
}

.peta-map {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface-sunk);
  overflow: hidden;
}

.peta-panel {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  overflow-y: auto;
}

.peta-panel-isi { padding: 14px 16px; }

.peta-panel-kepala {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}

.peta-panel-kepala h3 { margin: 0; font-size: 15px; }

/* --- legenda --- */

.peta-legenda { margin-top: 18px; }

.peta-legenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}

.peta-legenda-item:hover { background: var(--surface-sunk); }

/* Bidang yang sedang disaring diberi bingkai, bukan latar penuh: latar penuh
   akan bersaing dengan kotak warna kategori di sebelahnya. */
.peta-legenda-item.is-on {
  border-color: var(--ink-3);
  background: var(--surface-sunk);
  color: var(--ink);
}

.peta-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.peta-legenda-nama { flex: 1 1 auto; }

.peta-legenda-angka {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

/* --- ringkasan --- */

.peta-stat { margin-top: 18px; }

.peta-stat-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 13px;
}

.peta-stat-list dt { color: var(--ink-3); }
.peta-stat-list dd { margin: 0; color: var(--ink); }

/* --- kartu peristiwa --- */

.peta-kartu {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.peta-kartu:last-child { border-bottom: 0; }

.peta-kartu-atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.peta-kartu-cat { display: inline-flex; gap: 3px; }

.peta-cat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 2px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
}

.peta-kartu-teks {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.peta-kartu-kaki {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
}

/* --- borang --- */

.peta-cat-pilih { display: flex; flex-wrap: wrap; gap: 6px; }

.peta-cat-tombol {
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}

.peta-cat-tombol.is-on { color: #fff; }

@media (max-width: 900px) {
  .peta-stage {
    grid-template-columns: 1fr;
    height: auto;
  }
  .peta-map { height: 52vh; }
}

/* ---------- Wewenang wilayah ---------- */

.grant-box { display: grid; gap: 10px; min-width: 320px; }

/* Kotak centang duduk sebaris dengan keterangannya, bukan bertumpuk seperti
   kolom isian biasa. */
.field-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.grant-list {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.grant-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
}

.grant-row:last-child { border-bottom: 0; }

.grant-nama { color: var(--ink); }

.grant-hak {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* ---------- Menarik peristiwa dari pemberitaan ---------- */

.peta-tarik {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  background: var(--surface-sunk);
}

.peta-tarik > summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}

.peta-tarik-borang {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.peta-tarik-hasil { margin-top: 12px; }

.peta-berita {
  margin: 8px 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
}

.peta-berita li { margin-bottom: 4px; }

.peta-usul { margin-top: 12px; }

/* Usulan mesin dibedakan dari catatan yang sudah tersimpan: garis kiri tegas
   supaya tidak ada yang salah membaca usulan sebagai catatan resmi. */
.peta-usul-kartu {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--signal);
  background: var(--surface);
}

/* Borang peristiwa peta: kolomnya bertumpuk, cukup lebar untuk membaca uraian
   yang sedang diketik tanpa jendela dialog melebar mengikuti isi. */
.peta-borang {
  display: grid;
  gap: 10px;
  min-width: 340px;
  max-width: 460px;
}

/* ---------- Wajah saat masuk lewat aplikasi ---------- */

.wajah-kisi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}

.wajah-butir {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface-sunk);
  overflow: hidden;
}

/* Persegi, dipotong ke tengah: wajah hampir selalu ada di tengah bingkai
   kamera depan, dan tinggi seragam membuat kisinya terbaca sebagai deretan. */
.wajah-foto {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--paper-deep);
  cursor: zoom-in;
}

.wajah-kaki {
  display: grid;
  gap: 3px;
  padding: 8px 10px 10px;
  font-size: 11px;
}

.wajah-nama { font-weight: 600; color: var(--ink); font-size: 12px; }
.wajah-waktu { color: var(--ink-3); font-family: var(--font-mono); font-size: 10px; }
.wajah-hp { color: var(--ink-3); }
.wajah-kaki .chip { justify-self: start; margin-top: 3px; }
/* Tombol hapus disejajarkan kiri seperti chip-nya, dan diberi jarak supaya
   tidak tertekan tanpa sengaja saat orang menggulir kisi foto. */
.wajah-kaki .linkish-danger { justify-self: start; margin-top: 6px; padding: 2px 0; }

/* ============================== Tab Berita ==============================
 *
 * Kartu, bukan tabel. Tabel memaksa mata menyeberangi kolom demi kolom untuk
 * satu berita; yang dicari pembaca di sini — apa yang terjadi, seberapa baru,
 * seberapa ramai — harus tertangkap sekali lihat.
 */

.berita-lensa { display: grid; gap: 7px; margin-top: 4px; }
.berita-lensa-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.berita-lensa-item input { accent-color: var(--signal); }

.berita-panggung { display: grid; gap: 16px; }

.berita-ringkas {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.berita-ringkas-detail { font-size: 11.5px; margin-top: 3px; }

/* --- saringan --- */
.berita-saringan { display: grid; gap: 8px; justify-items: start; }
.berita-saring-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.berita-saring-judul {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  min-width: 44px;
}
.berita-saring {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.berita-saring:hover { border-color: var(--ink-3); }
.berita-saring:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.berita-saring.is-on {
  background: var(--signal-soft);
  border-color: var(--signal);
  color: var(--signal-deep);
}
.berita-saring-jumlah {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-4);
}
.berita-saring.is-on .berita-saring-jumlah { color: var(--signal-deep); }

/* Keterangan di samping penyaring wilayah: berapa yang disembunyikan. Angka
 * yang hilang tanpa penjelasan membuat orang mengira datanya kurang. */
.berita-saring-kabar { font-size: 11.5px; color: var(--ink-4); }

.berita-chip-luar {
  color: var(--ink-3);
  border-color: var(--rule);
  background: var(--paper-deep);
  font-style: italic;
}

/* --- kartu --- */
.berita-daftar { display: grid; gap: 10px; }

.berita-kartu {
  display: grid;
  gap: 7px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  /* Garis kiri tebal: penanda diam yang memisahkan satu berita dari berikutnya
   * tanpa menambah kotak di dalam kotak. */
  border-left: 3px solid var(--rule);
}
.berita-kartu:hover { border-left-color: var(--signal); }

.berita-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.berita-media {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.berita-umur {
  font-size: 11.5px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.berita-lensa-tanda { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }

.berita-judul {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
a.berita-judul:hover { color: var(--signal-deep); text-decoration: underline; }

.berita-cuplikan {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.berita-kaki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.berita-tumpuk {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--signal-deep);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.berita-tumpuk:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.berita-tunggal { font-size: 12px; color: var(--ink-4); }

.berita-serupa {
  margin: 4px 0 0;
  padding: 10px 0 0 14px;
  border-top: 1px solid var(--rule-soft);
  list-style: none;
  display: grid;
  gap: 7px;
}
.berita-serupa li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
}
.berita-serupa a { color: var(--ink-2); }
.berita-serupa a:hover { color: var(--signal-deep); }
.berita-serupa-media {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  min-width: 78px;
}
.berita-serupa-umur { font-size: 11px; color: var(--ink-4); margin-left: auto; }

.berita-kosong {
  padding: 28px 22px;
  border: 1px dashed var(--rule);
  background: var(--surface-sunk);
  display: grid;
  gap: 6px;
}
.berita-kosong p { margin: 0; font-size: 13px; color: var(--ink-2); }

@media (max-width: 720px) {
  .berita-lensa-tanda { margin-left: 0; width: 100%; }
  .berita-serupa-umur { margin-left: 0; }
  .berita-serupa-media { min-width: 0; }
}

/* --- Tabel berkolom banyak ---------------------------------------------
 *
 * Lebar 100% memaksa kolom menyempit sampai isinya tercacah satu kata per
 * baris. Sejak delapan kolom, tabelnya dibiarkan selebar isinya dan
 * pembungkus `.tablewrap` yang menggeser — bukan barisnya yang menjulang.
 */
.datatable-lebar table.grid {
  width: auto;
  min-width: 100%;
}
.datatable-lebar table.grid th,
.datatable-lebar table.grid td { white-space: nowrap; }

/* Sel panjang berspasi (alamat, uraian) tetap boleh melipat supaya tidak
 * menyeret lebar tabel tanpa batas — tapi dibatasi agar tidak mendominasi. */
.datatable-lebar table.grid td.luwes {
  white-space: normal;
  max-width: 34ch;
  min-width: 18ch;
}

/* Penanda bahwa tabel masih bisa digeser ke kanan. */
.datatable-lebar .tablewrap { scrollbar-width: thin; }

/* --- Penahan lebar lembar hasil ----------------------------------------
 *
 * Satu tabel lebar pernah melebarkan SELURUH lembar, bukan menggeser dirinya
 * sendiri: tabel KBLI, Seri saham, dan Akta ikut terdorong keluar layar
 * padahal kolomnya sedikit.
 *
 * Sebabnya aturan bawaan flex dan grid: anak keduanya bernilai `min-width:auto`
 * sehingga MENOLAK menyusut di bawah lebar isinya. `overflow-x: auto` pada
 * pembungkus tabel tidak pernah terpakai — yang melar justru induknya, satu
 * per satu sampai ke tepi halaman.
 *
 * `min-width: 0` mengembalikan izin menyusut itu, dan barulah pembungkusnya
 * yang menggeser. Dipasang pada seluruh rantai, karena satu mata rantai yang
 * terlewat sudah cukup meneruskan pelebarannya ke atas.
 */
.sheet { min-width: 0; }
.sheet-body { min-width: 0; }
.datatables { min-width: 0; }
.datatable { min-width: 0; }
.tablewrap { max-width: 100%; }

/* ============================ Buku panduan ============================
 *
 * Dibaca sambil mengerjakan sesuatu yang berisiko — memasang APK, menyentuh
 * server — jadi yang diutamakan keterbacaan panjang: ukuran baris terbatas,
 * jarak antar blok jelas, dan peringatan yang tidak bisa terlewat.
 */
/*
 * Ukuran baris dibatasi, tapi sisanya dibagi rata — bukan ditinggal menganga
 * di satu sisi.
 *
 * Angka 72ch memang enak dibaca untuk prosa panjang, tapi halaman ini bukan
 * prosa panjang: sebagian besar isinya tabel, daftar langkah, dan blok
 * perintah, dan semuanya ikut terjepit ke ukuran yang sama. Pada panel selebar
 * 1280px hasilnya lebih dari separuh halaman kosong di kanan, dan yang tersisa
 * terbaca seperti tampilan yang rusak, bukan seperti margin yang disengaja.
 */
.panduan {
  max-width: 108ch;
  margin-inline: auto;
}
.panduan > * + * { margin-top: 14px; }

.panduan-judul {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
  margin: 26px 0 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-soft);
}
.panduan > .panduan-judul:first-child { margin-top: 0; }

.panduan-teks { margin: 0; line-height: 1.65; color: var(--ink-2); }

.panduan-kode {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  background: var(--surface-sunk);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--signal);
  border-radius: 2px;
  padding: 11px 13px;
  margin: 0;
  color: var(--ink);
}

.panduan-poin { margin: 0; padding-left: 20px; }
.panduan-poin li { margin-bottom: 6px; line-height: 1.6; color: var(--ink-2); }
.panduan-poin li::marker { color: var(--signal); }

/* Bernomor HANYA untuk urutan sungguhan — memasang, memperbarui, menanam APK.
 * Nomor pada daftar yang bukan urutan memberi kesan keliru bahwa ada langkah
 * yang harus didahulukan. */
.panduan-langkah {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: panduan;
  display: grid;
  gap: 16px;
}
.panduan-langkah > li {
  counter-increment: panduan;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
}

/*
 * SEMUA isi langkah masuk kolom kedua — dan tanpa baris ini blok perintahnya
 * hancur.
 *
 * Tiap <li> adalah grid dua kolom: nomor di kolom satu, isi di kolom dua.
 * Nomornya digambar ::before, jadi ia grid item pertama; paragrafnya item
 * kedua dan jatuh di kolom dua dengan sendirinya. Tapi <pre> perintahnya adalah
 * item KETIGA — penempatan otomatis membungkusnya ke baris berikutnya di kolom
 * PERTAMA, yang lebarnya 26px. Digabung dengan `white-space: pre` dan
 * `overflow-x: auto`, seluruh perintah tinggal menyisakan dua huruf: "np", "ba".
 */
.panduan-langkah > li > * { grid-column: 2; }
.panduan-langkah > li::before {
  content: counter(panduan);
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--signal-deep);
  background: var(--signal-soft);
  border-radius: 2px;
  text-align: center;
  padding: 3px 0;
}
.panduan-langkah > li > p { margin: 0; line-height: 1.6; color: var(--ink-2); }

.panduan-nota { margin: 0; }
.panduan-nota p { margin: 6px 0 0; line-height: 1.6; }
.panduan-nota .eyebrow { display: block; }
.panduan-bahaya {
  border-color: var(--alert-line);
  background: var(--alert-soft);
}
.panduan-bahaya .eyebrow { color: var(--alert); }
.panduan-awas {
  border-color: var(--signal-line);
  background: var(--signal-soft);
}
.panduan-awas .eyebrow { color: var(--signal-deep); }
.panduan-aman {
  border-color: var(--fix-line);
  background: var(--fix-soft);
}
.panduan-aman .eyebrow { color: var(--fix); }

.panduan .tablewrap { border: 1px solid var(--rule-soft); border-radius: 2px; }
.panduan table.grid { font-size: 13px; }

/* ======================= Cetak =======================
 *
 * Blok ini BARU. Sebelum ada tema malam, berkas ini tidak punya satu pun
 * @media print — cetakan mewarisi gaya layar apa adanya, dan itu sudah salah
 * bahkan sebelum ada mode gelap:
 *
 *   - Teks putih di atas permukaan gelap tetap putih saat dicetak, sementara
 *     browser membuang latarnya. Hasilnya putih di atas putih: hilang.
 *   - .sheet mulai dengan opacity 0 lalu dianimasikan. Cetakan bisa menangkap
 *     keadaan awal itu dan keluar sebagai halaman kosong.
 *
 * Tema malam membuat keduanya jauh lebih parah, jadi perbaikannya dikerjakan
 * sekalian di sini: cetakan SELALU terang, apa pun tema di layar.
 */
@media print {
  /*
   * Token dipasang ulang secara eksplisit, bukan diwariskan. Selektor
   * :root[data-tema="gelap"] lebih kuat daripada :root, jadi menimpa :root saja
   * tidak cukup — nilai malam akan tetap menang saat tema gelap sedang hidup.
   */
  :root,
  :root[data-tema="gelap"] {
    color-scheme: light;

    --paper:         #fff;
    --paper-deep:    #fff;
    --surface:       #fff;
    --surface-sunk:  #fff;
    --surface-lift:  #fff;
    --surface-hover: #fff;

    --ink:   #000;
    --ink-2: #222;
    --ink-3: #444;
    --ink-4: #555;

    --rule:      #999;
    --rule-soft: #ccc;

    --signal:      #a33b10;
    --signal-deep: #7d2c0b;
    --signal-soft: #fff;
    --signal-line: #999;

    --fix:      #0b5548;
    --fix-deep: #083e34;
    --fix-soft: #fff;
    --fix-line: #999;
    --fix-fill: #fff;

    --alert:      #7d1625;
    --alert-deep: #5c0f1a;
    --alert-text: #5c0f1a;
    --alert-soft: #fff;
    --alert-line: #999;

    --pria:   #1f4f80;
    --wanita: #7a2f58;
    --pria-soft:   #fff;
    --wanita-soft: #fff;

    --shadow-sheet: none;
    --shadow-pop:   none;
  }

  html, body { background: #fff; color: #000; }

  /*
   * Kromium disembunyikan, bukan diterangkan. Warnanya dipasang langsung di
   * banyak tempat dan tidak bisa dijangkau token — lagi pula bilah atas,
   * panel samping, dan tombol tidak berguna di atas kertas.
   */
  .topbar, .pad, .rail, .who, .linkish, .btn,
  dialog.modal, .toast, .peta-kendali { display: none !important; }

  /* Animasi dimatikan: tanpa ini cetakan bisa menangkap keadaan awal yang
   * masih tembus pandang dan keluar sebagai halaman kosong. */
  .sheet, .panel, .card { animation: none !important; opacity: 1 !important; }

  /* Hemat tinta dan jaga keterbacaan: tepi tipis, tanpa bayangan. */
  .panel, .card, .sheet, .note, .datatable { box-shadow: none !important; }

  .stage { padding: 0 !important; }
}


/* ============================================================
 * Tab Tanya — percakapan dengan mesin AI.
 *
 * Tidak ada satu pun warna baru di sini. Semuanya token yang sudah dipakai
 * tujuh tab lain, jadi mode malam ikut sendiri tanpa aturan terpisah — dan
 * tanpa mengulang kegagalan yang tercatat di berkas ini waktu enam permukaan
 * memakai --ink sebagai latar.
 *
 * --signal (jingga) hanya menempel pada yang SEDANG HIDUP: strip menimbang.
 * Gelembung jawaban tidak pernah memakainya.
 * ============================================================ */

.tanya-bungkus {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.tanya-daftar {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tanya-pesan { display: flex; flex-direction: column; gap: 4px; max-width: 760px; }
.tanya-operator { align-self: flex-end; align-items: flex-end; }
.tanya-asisten { align-self: flex-start; align-items: flex-start; }

.tanya-gelembung {
  padding: 10px 14px;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Pertanyaan operator: tenggelam, karena ia sudah tahu apa yang ia tulis. */
.tanya-operator .tanya-gelembung { background: var(--surface-sunk); color: var(--ink); }

/* Jawaban: permukaan terangkat dan prosa memakai --ink-2, sama seperti panduan. */
.tanya-jawab { background: var(--surface); color: var(--ink-2); white-space: normal; }

.tanya-kaki { display: flex; gap: 10px; padding: 0 2px; }

/* --- strip penalaran: satu-satunya tempat --signal dipakai di tab ini --- */

.tanya-nalar { display: flex; flex-direction: column; gap: 4px; }

.tanya-nalar-ekor {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  max-width: 560px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Teks berjalan dibaca dari kanan: ekornya yang baru, bukan kepalanya. */
  direction: rtl;
  text-align: left;
}

.tanya-nalar-lipat { display: flex; flex-direction: column; gap: 6px; }

.tanya-nalar-penuh {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-3);
  background: var(--chrome);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 10px 12px;
  margin: 0;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
}

/* --- komposer --- */

.tanya-bar {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--rule-soft);
  background: var(--surface-sunk);
}

.tanya-komposer {
  flex: 1 1 auto;
  resize: none;
  min-height: 42px;
  max-height: 200px;
  line-height: 1.5;
}

.tanya-aksi { display: flex; gap: 6px; flex: 0 0 auto; }

.tanya-kosong { margin: auto; max-width: 440px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.tanya-kosong-judul { font-size: 15px; font-weight: 600; color: var(--ink); }

/* --- markdown dari mesin (lihat teks-rapi.js) --- */

.md-paragraf { margin: 0 0 10px; }
.md-paragraf:last-child { margin-bottom: 0; }

.md-judul { font-weight: 600; color: var(--ink); margin: 14px 0 6px; }
.md-judul:first-child { margin-top: 0; }

.md-daftar { margin: 0 0 10px; padding-left: 20px; }
.md-daftar li { margin: 3px 0; }

.md-kode {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--chrome);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  padding: 1px 4px;
}

.md-blok {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  background: var(--chrome);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 10px 12px;
  margin: 0 0 10px;
  overflow-x: auto;
  white-space: pre;
}

@media (max-width: 720px) {
  .tanya-daftar { padding: 12px; gap: 14px; }
  .tanya-pesan { max-width: 100%; }
  .tanya-bar { padding: 10px 12px 12px; }
  .tanya-nalar-ekor { max-width: 100%; }
}