/* ============ RAFANTO — gaya utama ============
   Warna mengikuti identitas merek Rafanto. Biru dan merahnya SAMA PERSIS
   dengan warna PT Pandawa Gemar Kreasi — Rafanto merek produk di bawah
   naungan PGK, bukan perusahaan lain.

   --merah SENGAJA hanya untuk BAHAYA: hapus, galat, saldo minus. Jangan
   dipakai jadi warna tombol utama. Di dalam aplikasi merah sudah punya arti
   baku, dan tombol "Simpan" berwarna merah akan terbaca sebagai peringatan.
   Merah merek muncul cuma sebagai satu aksen kecil di lambang. */
:root {
  --biru: #0353A4;       /* warna utama: tombol, tautan, keadaan terpilih */
  --biru-tua: #023E7D;   /* penekanan: angka besar, judul nilai */
  --navy: #16233A;       /* sidebar pekat, teks paling gelap */
  --aksen: #2E86D6;      /* biru muda: garis penanda kartu ringkas */
  --merah: #C1121F;      /* BAHAYA saja */
  --oranye: #E07B39;     /* peringatan */
  --kanvas: #F3F6FB;
  --kartu: #FFFFFF;
  --tinta: #16233A;
  --tinta-muda: #64748B;
  --garis: #DEE6F0;
  --bayang: 0 1px 3px rgba(2, 62, 125, .08), 0 4px 14px rgba(2, 62, 125, .07);
  /* Tinggi pita putih paling atas. Dipakai BERSAMA oleh kepala halaman (#atas)
     dan kotak logo di sidebar supaya keduanya benar-benar sejajar — satu nilai,
     bukan dua angka yang harus diingat agar cocok. Kepala berubah, kotak ikut. */
  --tinggi-kepala: 71px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* elemen ber-atribut hidden harus benar-benar tersembunyi, walau punya display sendiri */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--kanvas);
  color: var(--tinta);
  font-size: 14px;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; font-size: 14px; }

#bingkai { display: flex; height: 100vh; }

/* ============ SIDEBAR ============
   Bidang biru rata, bukan gradasi: warna merek jadi permukaan terbesar di
   layar, dan tiap menu terbaca sebagai kepingan di atasnya. Gradasi gelap
   membuat sidebar terasa seperti latar belakang, bukan bagian dari merek. */
#sisi {
  width: 224px; flex-shrink: 0;
  background: var(--biru);
  color: #D7E5F7;
  display: flex; flex-direction: column;
  /* Tanpa jarak atas: kotak logo harus mulai dari titik yang sama persis
     dengan kepala halaman di sebelahnya. */
  padding: 0 10px 12px;
}

/* Kartu merek: latar PUTIH supaya lambang berwarna bisa dipakai apa adanya.
   Di atas biru, versi berwarna lambang akan lenyap — birunya menyatu dengan
   latar. Kartu putih ini yang membuatnya tetap utuh. */
/* Bidang PUTIH yang menyambung dengan kepala halaman di sebelahnya: tinggi,
   tepi atas, dan tepi bawahnya sama persis, sehingga keduanya terbaca sebagai
   SATU pita putih di bagian atas layar.
   Bersudut siku seperti kepala halaman, bukan membulat — kalau membulat,
   sambungannya terlihat sebagai dua benda berbeda yang kebetulan berdempetan.
   Latar putih ini sekaligus syarat mutlak untuk lambang BERWARNA: di atas
   bidang biru, biru pada lambangnya menyatu dengan latar dan bentuknya hilang. */
.sisi-merek {
  display: flex; align-items: center; gap: 9px;
  background: var(--kartu);
  height: var(--tinggi-kepala);
  /* WAJIB. #sisi adalah wadah flex tegak; di mode laci isinya melebihi tinggi
     layar, dan tanpa larangan ini kotak logo ikut dikempiskan flex sampai
     setinggi lambangnya saja. */
  flex-shrink: 0;
  margin: 0 -10px 14px;          /* menembus jarak tepi #sisi, rata sampai pinggir */
  padding: 0 15px;
  border-bottom: 1px solid var(--garis);   /* garis yang sama dengan kepala halaman */
}
.sisi-logo {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sisi-logo svg { width: 100%; height: 100%; display: block; }
.sisi-teks-merek { min-width: 0; }
/* Nama merek memakai TULISAN dari berkas logo, bukan huruf biasa: bentuk
   hurufnya digambar khusus dan tidak ada padanannya di font mana pun. */
.sisi-nama svg { width: 106px; height: auto; display: block; }
/* Baris di bawahnya = jenis aplikasinya (KASIR, AKUNTANSI, GUDANG, …),
   bukan slogan. Satu kata, huruf besar, direnggangkan. */
/* Jenis aplikasinya (POS, AKUNTANSI, GUDANG, …), bukan slogan.
   Warnanya biru merek supaya menyatu dengan tulisan di atasnya. */
.sisi-ver {
  font-size: 9.5px; font-weight: 800; letter-spacing: .2em;
  color: var(--biru); margin-top: 3px;
}

#menu { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.menu-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px; border-radius: 9px;
  color: #AFC4DE; font-size: 13.5px; font-weight: 600; text-align: left;
  transition: background .15s;
}
.menu-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.menu-item:hover:not(:disabled) { background: rgba(255,255,255,.14); color: #fff; }
/* Menu terpilih: kepingan putih di atas bidang biru.
   Sengaja TIDAK dibuat menjulur sampai tepi sidebar — #menu punya
   overflow-y:auto, dan wadah yang menggulir selalu ikut memotong sisi
   mendatarnya, jadi julurannya malah terpotong. */
.menu-item.aktif {
  background: var(--kartu); color: var(--biru); font-weight: 700;
  box-shadow: 0 1px 4px rgba(2, 20, 50, .16);
}

/* ---------- MENU BERGRUP (submenu yang bisa dibuka-tutup) ----------
   Sub-itemnya BUKAN halaman lain: semuanya membuka halaman yang sama lalu
   menyetel penyaringnya. Keping penyaring di halaman tetap ada dan tetap
   jadi patokan — menu ini jalan pintas, bukan penggantinya. */
.menu-grup { display: flex; flex-direction: column; gap: 3px; }
.menu-item svg.menu-panah {
  width: 15px; height: 15px; margin-left: auto; opacity: .7;
  transition: transform .16s;
}
.menu-item[aria-expanded="true"] svg.menu-panah { transform: rotate(180deg); }

.submenu { display: flex; flex-direction: column; gap: 1px; padding-bottom: 3px; }
.submenu[hidden] { display: none; }
.submenu-item {
  position: relative;
  width: 100%; text-align: left;
  padding: 7px 12px 7px 40px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: #BFD5EF;
  transition: background .15s, color .15s;
}
/* Garis tegak tipis: menandai bahwa baris-baris ini bersarang di bawah induknya. */
.submenu-item::before {
  content: ""; position: absolute; left: 22px; top: 0; bottom: 0;
  width: 1.5px; background: rgba(255, 255, 255, .22);
}
.submenu-item:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.submenu-item.aktif { background: rgba(255, 255, 255, .22); color: #fff; font-weight: 700; }
.submenu-item.aktif::before { background: #fff; width: 2.5px; }

/* ============ AREA UTAMA ============ */
#utama { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#atas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; background: var(--kartu); border-bottom: 1px solid var(--garis);
  min-height: var(--tinggi-kepala);   /* patokan bersama dengan kotak logo di sidebar */
}
#atas-judul { font-size: 19px; font-weight: 700; }
#atas-usaha { font-size: 12px; color: var(--tinta-muda); }
#atas-jam { font-size: 13px; font-weight: 600; color: var(--biru); text-align: right; }

.lihat { display: none; flex: 1; min-height: 0; padding: 18px 22px; overflow-y: auto; }
.lihat.aktif { display: block; }
#lihat-kasir.aktif { display: flex; gap: 18px; overflow: hidden; }

/* ============ KASIR: KIRI ============ */
.kasir-kiri { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cari-baris { margin-bottom: 12px; }
.cari-kotak {
  display: flex; align-items: center; gap: 10px;
  background: var(--kartu); border: 1.5px solid var(--garis); border-radius: 11px;
  padding: 0 14px; box-shadow: var(--bayang);
}
.cari-kotak svg { width: 17px; height: 17px; fill: none; stroke: var(--tinta-muda); stroke-width: 2; stroke-linecap: round; }
.cari-kotak input { flex: 1; border: none; outline: none; padding: 12px 0; font-size: 14.5px; background: transparent; }
.cari-kotak:focus-within { border-color: var(--biru); }

.chip-baris { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  padding: 7px 15px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  background: var(--kartu); color: var(--tinta-muda); border: 1.5px solid var(--garis);
  transition: all .15s;
}
.chip:hover { border-color: var(--biru); color: var(--biru); }
.chip.aktif { background: var(--biru); border-color: var(--biru); color: #fff; }

.grid-produk {
  flex: 1; overflow-y: auto; padding-bottom: 8px; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px;
}
.p-kartu {
  background: var(--kartu); border-radius: 13px; padding: 12px;
  box-shadow: var(--bayang); border: 1.5px solid transparent;
  text-align: left; display: flex; flex-direction: column; gap: 8px;
  transition: transform .12s, border-color .12s;
}
.p-kartu:hover { transform: translateY(-2px); border-color: var(--biru); }
.p-kartu:active { transform: scale(.97); }
.p-ikon {
  width: 100%; height: 58px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px; color: #fff; letter-spacing: .5px;
}
.p-nama { font-weight: 600; font-size: 13px; line-height: 1.3; min-height: 34px; }
.p-bawah { display: flex; align-items: center; justify-content: space-between; }
.p-harga { font-weight: 700; font-size: 13.5px; color: var(--biru); }
.p-stok { font-size: 11px; color: var(--tinta-muda); }
.p-stok.tipis { color: var(--merah); font-weight: 700; }
.p-kartu.habis { opacity: .45; }
.p-kartu.habis:hover { transform: none; border-color: transparent; }

/* ============ KASIR: KERANJANG ============ */
.kasir-kanan {
  width: 340px; flex-shrink: 0;
  background: var(--kartu); border-radius: 15px; box-shadow: var(--bayang);
  display: flex; flex-direction: column; overflow: hidden;
}
.krj-kepala {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--garis);
  font-weight: 700; font-size: 15px;
}
.krj-daftar { flex: 1; overflow-y: auto; padding: 8px 12px; }
.krj-kosong { text-align: center; color: var(--tinta-muda); padding: 40px 10px; font-size: 13px; }
.krj-item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 9px 6px; border-bottom: 1px dashed var(--garis);
}
.krj-nama { font-weight: 600; font-size: 13px; }
.krj-sub { font-weight: 700; font-size: 13px; text-align: right; align-self: center; }
.krj-kendali { display: flex; align-items: center; gap: 7px; grid-column: 1 / -1; }
.krj-btn {
  width: 24px; height: 24px; border-radius: 7px; font-weight: 700; font-size: 14px;
  background: var(--kanvas); color: var(--biru); border: 1px solid var(--garis);
  display: flex; align-items: center; justify-content: center;
}
.krj-btn:hover { background: var(--biru); color: #fff; }
.krj-btn.hapus { color: var(--merah); margin-left: auto; }
.krj-btn.hapus:hover { background: var(--merah); color: #fff; }
.krj-qty { font-weight: 700; min-width: 20px; text-align: center; }
.krj-satuan { font-size: 11.5px; color: var(--tinta-muda); }

.krj-ringkas { border-top: 1px solid var(--garis); padding: 12px 16px 16px; }
.krj-baris {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0; font-size: 13.5px; color: var(--tinta-muda);
}
.krj-baris b { color: var(--tinta); }
#krj-diskon {
  width: 110px; text-align: right; padding: 5px 9px;
  border: 1.5px solid var(--garis); border-radius: 8px; outline: none;
}
#krj-diskon:focus { border-color: var(--biru); }
.krj-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 8px 0 12px; font-weight: 700;
}
.krj-total span { font-size: 13px; letter-spacing: 1px; }
.krj-total b { font-size: 25px; color: var(--biru-tua); }

.tombol-besar {
  width: 100%; padding: 14px; border-radius: 11px;
  background: linear-gradient(135deg, var(--biru), var(--biru-tua));
  color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 1.5px;
  box-shadow: 0 4px 14px rgba(3, 83, 164, .35);
  transition: transform .12s, opacity .15s;
}
.tombol-besar:hover:not(:disabled) { transform: translateY(-1px); }
.tombol-besar:disabled { opacity: .35; cursor: default; box-shadow: none; }

.tombol-isi {
  padding: 9px 18px; border-radius: 9px; font-weight: 700; font-size: 13px;
  background: var(--biru); color: #fff;
}
.tombol-isi:hover { background: var(--biru-tua); }
.tombol-teks { color: var(--tinta-muda); font-weight: 600; font-size: 13px; padding: 9px 12px; border-radius: 8px; }
.tombol-teks:hover { color: var(--merah); background: var(--kanvas); }

/* ============ KARTU & TABEL ============ */
.kartu {
  background: var(--kartu); border-radius: 15px; box-shadow: var(--bayang);
  overflow: hidden; margin-bottom: 18px;
}
.kartu.sempit { max-width: 560px; }
.kartu-kepala {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--garis);
  font-weight: 700; font-size: 15px;
}
.kartu-kepala input[type="date"] {
  padding: 7px 10px; border: 1.5px solid var(--garis); border-radius: 8px; outline: none; color: var(--tinta);
}
.tabel-bungkus { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabel th {
  text-align: left; padding: 11px 20px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--tinta-muda); background: #F9FBFD;
  border-bottom: 1px solid var(--garis);
}
.tabel td { padding: 11px 20px; border-bottom: 1px solid var(--garis); }
.tabel tr:last-child td { border-bottom: none; }
.tabel tr:hover td { background: #F5F9FE; }
.tabel .ka { text-align: right; }
.tabel-aksi { display: flex; gap: 6px; justify-content: flex-end; }
.mini-btn {
  padding: 5px 11px; border-radius: 7px; font-size: 12px; font-weight: 600;
  background: var(--kanvas); color: var(--biru); border: 1px solid var(--garis);
}
.mini-btn:hover { background: var(--biru); color: #fff; }
.mini-btn.merah { color: var(--merah); }
.mini-btn.merah:hover { background: var(--merah); color: #fff; }
.tag-metode {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; background: #E3EDF9; color: var(--biru-tua);
}

/* ============ LAPORAN ============ */
.stat-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-kartu {
  border-radius: 14px; padding: 16px 18px; color: #fff;
  box-shadow: var(--bayang);
}
.stat-kartu .s-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; }
.stat-kartu .s-nilai { font-size: 23px; font-weight: 800; margin-top: 5px; }

/* ============ LAPORAN: PERIODE & GRAFIK ============ */
.periode-baris {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 15px;
}
.periode-baris .chip-baris { margin-bottom: 0; }
.periode-kanan { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-muda); }
.periode-kanan input[type="date"] {
  padding: 8px 10px; border: 1.5px solid var(--garis); border-radius: 8px;
  outline: none; color: var(--tinta); background: var(--kartu);
}
.tombol-isi.kecil { padding: 8px 14px; font-size: 12.5px; }
.lap-2kolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.grafik-bungkus { padding: 14px 18px 18px; overflow-x: auto; }
.grafik-bungkus svg { width: 100%; height: auto; display: block; }
.legenda { display: flex; gap: 14px; font-size: 12px; font-weight: 600; color: var(--tinta-muda); }
.leg::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; background: var(--c); margin-right: 6px;
}
.grafik-kosong { text-align: center; color: var(--tinta-muda); padding: 34px 10px; font-size: 13px; }
.tabel-tinggi { max-height: 330px; overflow-y: auto; }

/* ============ FORM ============ */
.form-isi { padding: 18px 20px; display: flex; flex-direction: column; gap: 13px; }
.form-isi label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--tinta-muda); }
.form-isi input {
  padding: 10px 12px; border: 1.5px solid var(--garis); border-radius: 9px;
  outline: none; font-size: 14px; color: var(--tinta);
}
.form-isi input:focus { border-color: var(--biru); }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.form-kanan { display: flex; justify-content: flex-end; }
.form-isi select {
  padding: 10px 12px; border: 1.5px solid var(--garis); border-radius: 9px;
  outline: none; font-size: 14px; color: var(--tinta); background: #fff;
}
.form-isi select:focus { border-color: var(--biru); }
.form-isi input:disabled { background: var(--kanvas); color: var(--tinta-muda); font-weight: 700; }
.cek { flex-direction: row !important; align-items: center; gap: 8px !important; }
.cek input { width: 16px; height: 16px; accent-color: var(--biru); }
.kepala-kanan { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.kepala-kanan b { color: var(--biru-tua); }
.kartu-kepala input[type="month"] {
  padding: 7px 10px; border: 1.5px solid var(--garis); border-radius: 8px; outline: none; color: var(--tinta);
}

/* ============ MODAL ============ */
.modal-latar {
  position: fixed; inset: 0; background: rgba(22, 35, 58, .5);
  display: none; align-items: center; justify-content: center; z-index: 50;
  backdrop-filter: blur(2px);
}
.modal-latar.buka { display: flex; }
.modal {
  background: var(--kartu); border-radius: 17px; width: 560px; max-width: 94vw;
  max-height: 92vh; overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 20px 60px rgba(22, 35, 58, .35);
  animation: modalMasuk .18s ease;
}
.modal-xl { width: 1000px; }
.modal-penuh { width: 1560px; max-width: 97vw; }
@keyframes modalMasuk { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-kepala { padding: 18px 22px 4px; font-size: 17px; font-weight: 700; }
.modal-kaki { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 18px 18px; }

.bayar-total {
  margin: 12px 22px; padding: 14px 18px; border-radius: 12px;
  background: linear-gradient(135deg, var(--biru), var(--biru-tua)); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
.bayar-total b { font-size: 23px; }
.bayar-metode { display: flex; gap: 8px; padding: 2px 22px 12px; }
.metode {
  flex: 1; padding: 10px; border-radius: 10px; font-weight: 700; font-size: 13px;
  border: 1.5px solid var(--garis); color: var(--tinta-muda); background: var(--kartu);
}
.metode.aktif { border-color: var(--biru); background: #E6EFFA; color: var(--biru-tua); }
#bayar-tunai-area { padding: 0 22px; }
.bayar-label { font-size: 12.5px; font-weight: 600; color: var(--tinta-muda); }
#bayar-uang {
  width: 100%; margin-top: 5px; padding: 12px 14px; font-size: 19px; font-weight: 700;
  text-align: right; border: 1.5px solid var(--garis); border-radius: 10px; outline: none;
}
#bayar-uang:focus { border-color: var(--biru); }
.bayar-cepat { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.cepat {
  padding: 7px 13px; border-radius: 8px; font-weight: 700; font-size: 12.5px;
  background: var(--kanvas); border: 1px solid var(--garis); color: var(--biru-tua);
}
.cepat:hover { background: var(--biru); color: #fff; }
.bayar-kembali {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 13px; padding: 11px 15px; border-radius: 10px; background: var(--kanvas);
  font-weight: 600; color: var(--tinta-muda);
}
.bayar-kembali b { font-size: 19px; color: var(--biru-tua); }
.bayar-kembali.kurang b { color: var(--merah); }

/* ============ STRUK ============ */
.modal-struk { width: 340px; }
#area-struk {
  font-family: "Consolas", "Courier New", monospace; font-size: 12px; line-height: 1.5;
  background: #fff; padding: 20px 18px 8px; color: #111;
}
.struk-tengah { text-align: center; }
.struk-judul { font-size: 14px; font-weight: 700; }
.struk-garis { border-top: 1px dashed #999; margin: 7px 0; }
.struk-baris { display: flex; justify-content: space-between; gap: 10px; }
.struk-total { font-weight: 700; font-size: 13px; }

@media print {
  body > #bingkai, .modal-kaki, #modal-bayar, #modal-produk { display: none !important; }
  body { overflow: visible; background: #fff; }
  .modal-latar#modal-struk { position: static; display: block !important; background: none; backdrop-filter: none; }
  .modal-struk { width: 80mm; max-width: 80mm; box-shadow: none; border-radius: 0; margin: 0; max-height: none; }
  #area-struk { padding: 0; }
}

/* ============ LAYAR KUNCI (login PIN) ============ */
#layar-kunci {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(160deg, var(--biru-tua), var(--navy));
  display: flex; align-items: center; justify-content: center;
}
#layar-kunci[hidden] { display: none; }
.kunci-kotak {
  background: var(--kartu); border-radius: 20px; padding: 34px 38px;
  width: 360px; max-width: 92vw; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.kunci-logo {
  width: 64px; height: 64px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
}
.kunci-logo svg { width: 100%; height: 100%; display: block; }
.kunci-judul { font-size: 21px; font-weight: 800; letter-spacing: 1px; }
.kunci-sub { font-size: 12.5px; color: var(--tinta-muda); margin: 4px 0 16px; }
.kunci-daftar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.kunci-orang {
  padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: 13.5px;
  border: 1.5px solid var(--garis); color: var(--tinta-muda); background: var(--kartu);
}
.kunci-orang.aktif { border-color: var(--biru); background: #E6EFFA; color: var(--biru-tua); }
#kunci-pin {
  width: 100%; padding: 12px; font-size: 22px; text-align: center; letter-spacing: 8px;
  border: 1.5px solid var(--garis); border-radius: 11px; outline: none; margin-bottom: 8px;
}
#kunci-pin:focus { border-color: var(--biru); }
.kunci-galat { min-height: 18px; font-size: 12.5px; font-weight: 700; color: var(--merah); margin-bottom: 6px; }
.kunci-goyang { animation: goyang .35s; }
@keyframes goyang { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }

/* ============ SESI (pengguna aktif) ============ */
#sesi-info {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; margin-top: 6px; border-radius: 10px;
  background: rgba(255,255,255,.07);
}
.sesi-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--oranye); color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.sesi-teks { flex: 1; min-width: 0; }
#sesi-nama { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sesi-peran { font-size: 10.5px; opacity: .65; text-transform: capitalize; }
#btn-keluar { color: #AFC4DE; padding: 4px; border-radius: 6px; }
#btn-keluar:hover { background: rgba(255,255,255,.12); color: #fff; }
#btn-keluar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ============ KERANJANG: ALAT ============ */
.krj-alat { display: flex; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--garis); }
.alat-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
  background: var(--kanvas); color: var(--biru-tua); border: 1px solid var(--garis);
}
.alat-btn:hover { border-color: var(--biru); }
.alat-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#btn-pilih-pelanggan { flex: 1; min-width: 0; }
#btn-pilih-pelanggan span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lencana-mini {
  background: var(--biru); color: #fff; border-radius: 20px;
  font-size: 10px; padding: 1px 6px; font-weight: 800;
}
#krj-catatan {
  width: 150px; text-align: right; padding: 5px 9px;
  border: 1.5px solid var(--garis); border-radius: 8px; outline: none; font-size: 12.5px;
}
#krj-catatan:focus { border-color: var(--biru); }
.krj-item-catatan { grid-column: 1 / -1; }
.krj-item-catatan input {
  width: 100%; padding: 5px 9px; font-size: 12px;
  border: 1.5px dashed var(--garis); border-radius: 7px; outline: none; color: var(--tinta-muda);
}
.krj-item-catatan input:focus { border-color: var(--biru); }
.krj-btn.nota-btn { font-size: 11px; width: auto; padding: 0 7px; }

/* ============ STATUS TRANSAKSI ============ */
.tag-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; }
.tag-status.selesai { background: #E3F2E8; color: #2C6A4A; }
.tag-status.void { background: #F0F2F6; color: #64748B; text-decoration: line-through; }
.tag-status.refund { background: #FBE5E9; color: var(--merah); }
tr.baris-batal td { opacity: .55; }
.merah-isi { background: var(--merah) !important; }
.merah-isi:hover { background: #9C0E19 !important; }

/* ============ DAFTAR PILIHAN (varian / bill / pelanggan) ============ */
.varian-daftar, .bill-daftar, .plg-pilih-daftar {
  padding: 6px 18px 12px; display: flex; flex-direction: column; gap: 7px;
  max-height: 320px; overflow-y: auto;
}
.pilih-baris {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border: 1.5px solid var(--garis); border-radius: 11px;
  font-size: 13.5px; font-weight: 600; text-align: left; width: 100%;
  background: var(--kartu); transition: border-color .12s;
}
.pilih-baris:hover { border-color: var(--biru); }
.pilih-baris .kanan { color: var(--biru); font-weight: 700; white-space: nowrap; }
.pilih-baris .sub { font-size: 11.5px; color: var(--tinta-muda); font-weight: 500; }
.pilih-baris.nonaktif { opacity: .45; }
.bill-aksi { display: flex; gap: 6px; }

/* ============ TUTUP KASIR ============ */
.ts-baris { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--tinta-muda); }
.ts-baris b { color: var(--tinta); }
.ts-tebal { font-weight: 800; padding-top: 6px; border-top: 1px dashed var(--garis); }
.ts-tebal b { color: var(--biru-tua); font-size: 15px; }
.ts-selisih-minus b { color: var(--merah) !important; }

/* ============ PAKET / KOMPONEN ============ */
.modal-lebar { width: 720px; }
.paket-judul { font-size: 12.5px; font-weight: 700; color: var(--tinta-muda); margin-bottom: 7px; }
.paket-tambah { display: flex; gap: 7px; margin-bottom: 6px; }
.paket-tambah select { flex: 1; padding: 8px 10px; border: 1.5px solid var(--garis); border-radius: 8px; outline: none; }
.paket-tambah input { padding: 8px 10px; border: 1.5px solid var(--garis); border-radius: 8px; outline: none; text-align: center; }
.paket-tambah input:focus { border-color: var(--biru); }
#p-komp-cari, #rsp-bahan-cari { flex: 1; text-align: left; }
.paket-bantuan { font-size: 11.5px; color: var(--tinta-muda); margin-bottom: 10px; }
#modal-bahan { z-index: 60; }
.paket-daftar { display: flex; flex-direction: column; gap: 5px; }
.paket-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 11px; background: var(--kanvas); border-radius: 8px; font-size: 12.5px; font-weight: 600;
}

/* master resep: pratinjau bahan yang diwarisi produk + ringkasan biaya */
.resep-pratinjau {
  border: 1.5px dashed var(--garis); border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; color: var(--tinta); margin-bottom: 10px; background: var(--kanvas);
}
.resep-pratinjau .rp-judul { font-weight: 700; font-size: 12px; color: var(--tinta-muda); margin-bottom: 6px; }
.resep-pratinjau ul { margin: 0; padding-left: 17px; }
.resep-pratinjau li { margin-bottom: 2px; }
.resep-ringkas {
  display: flex; flex-wrap: wrap; gap: 18px; padding: 9px 12px; margin: 8px 0 4px;
  background: var(--kanvas); border-radius: 9px; font-size: 12.5px;
}
.resep-ringkas b { display: block; font-size: 14px; color: var(--biru); }
.resep-ringkas span { color: var(--tinta-muda); font-size: 11.5px; }

/* ============ LAIN-LAIN ============ */
.cari-kecil { padding: 8px 12px; border: 1.5px solid var(--garis); border-radius: 8px; outline: none; width: 180px; }
.cari-kecil:focus { border-color: var(--biru); }
.kartu-catatan { padding: 12px 20px 16px; font-size: 12.5px; color: var(--tinta-muda); line-height: 1.5; }
.kepala-kanan select { padding: 7px 10px; border: 1.5px solid var(--garis); border-radius: 8px; outline: none; color: var(--tinta); }
.tabel-tinggi2 { max-height: 55vh; overflow-y: auto; }
.tabel input.sel-input {
  width: 100%; padding: 6px 9px; text-align: right;
  border: 1.5px solid var(--garis); border-radius: 7px; outline: none;
}
.tabel input.sel-input:focus { border-color: var(--biru); }
.bayar-poin-baris {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 2px 22px 4px; font-size: 13px; font-weight: 600; color: var(--tinta-muda);
}
.bayar-poin-baris input {
  width: 90px; text-align: right; padding: 7px 10px;
  border: 1.5px solid var(--garis); border-radius: 8px; outline: none; font-weight: 700;
}
.bayar-poin-nilai { padding: 0 22px 8px; font-size: 12px; font-weight: 700; color: var(--biru-tua); text-align: right; }
.stok-merah { color: var(--merah) !important; font-weight: 800; }

/* ============ TIPE PENJUALAN & KASBON ============ */
.bayar-tipe-baris {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 22px 10px; font-size: 12.5px; font-weight: 600; color: var(--tinta-muda);
  flex-wrap: wrap;
}
.bayar-tipe { display: flex; gap: 6px; flex-wrap: wrap; }
.bayar-tipe .chip { padding: 5px 12px; font-size: 11.5px; }
#bayar-kasbon-area { padding-bottom: 4px; }
.tag-bayar { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; }
.tag-bayar.lunas { background: #E3F2E8; color: #2C6A4A; }
.tag-bayar.belum { background: #FBE5E9; color: var(--merah); }
.tag-terlambat { color: var(--merah); font-weight: 800; font-size: 12px; }
.tag-tempo-ok { color: var(--tinta-muda); font-size: 12px; }
.rp-baris { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--tinta-muda); }
.rp-baris b { color: var(--tinta); }
.rp-baris.total { font-weight: 800; padding-top: 8px; border-top: 1px dashed var(--garis); }
.rp-baris.total b { color: var(--biru-tua); font-size: 16px; }
.rp-baris.info b { color: var(--merah); }

/* ============ PENGATURAN: SAKELAR, TAB, STRUK ============ */
.sakelar-baris {
  display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between;
  gap: 14px !important; padding: 10px 0; border-bottom: 1px solid var(--garis);
  font-size: 13.5px; font-weight: 600; color: var(--tinta); cursor: pointer;
}
.sakelar-baris:last-child { border-bottom: none; }
.sakelar-baris .ket { font-size: 11.5px; color: var(--tinta-muda); font-weight: 500; display: block; margin-top: 2px; }
.sakelar { display: inline-block; position: relative; width: 46px; height: 25px; flex-shrink: 0; }

/* input teks yang menyertai sebuah sakelar (mis. isi teks footer / QR) */
.teks-elemen { display: flex; flex-direction: column; gap: 5px; padding: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--tinta-muda); }
.teks-elemen input {
  padding: 9px 12px; border: 1.5px solid var(--garis); border-radius: 9px;
  outline: none; font-size: 13px; color: var(--tinta); background: #fff;
}
.teks-elemen input:focus { border-color: var(--biru); }
.sakelar input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.sakelar-tuas {
  position: absolute; inset: 0; border-radius: 20px; background: #C4D0E0;
  transition: background .16s; pointer-events: none;
}
.sakelar-tuas::after {
  content: "OFF"; position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-size: 8px; font-weight: 800; color: #fff; letter-spacing: .3px;
}
.sakelar-tuas::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; transition: transform .16s; z-index: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.sakelar input:checked + .sakelar-tuas { background: var(--biru); }
.sakelar input:checked + .sakelar-tuas::before { transform: translateX(21px); }
.sakelar input:checked + .sakelar-tuas::after { content: "ON"; right: auto; left: 8px; }

.tab-garis { display: flex; gap: 4px; border-bottom: 1.5px solid var(--garis); margin-bottom: 14px; }
.tab-item {
  padding: 10px 20px; font-size: 13.5px; font-weight: 700; color: var(--tinta-muda);
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; background: none;
}
.tab-item:hover { color: var(--biru); }
.tab-item.aktif { color: var(--biru); border-bottom-color: var(--biru); }

.struk-atur { display: grid; grid-template-columns: minmax(320px, 1fr) 330px; gap: 22px; padding: 16px 20px 20px; }
.struk-kiri { min-width: 0; }
.struk-kelompok { font-size: 13.5px; font-weight: 800; color: var(--tinta); margin: 16px 0 2px; }
.struk-kelompok:first-child { margin-top: 0; }
.struk-kelompok .ket { display: block; font-size: 11.5px; color: var(--tinta-muda); font-weight: 500; margin-top: 2px; }
.struk-kanan { position: sticky; top: 10px; }
.struk-pratinjau-judul { font-size: 12px; font-weight: 700; color: var(--tinta-muda); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .8px; }
.struk-kertas {
  background: #fff; border: 1px solid var(--garis); border-radius: 6px; padding: 16px 14px;
  font-family: "Consolas", "Courier New", monospace; font-size: 11px; line-height: 1.45; color: #111;
  max-height: 560px; overflow-y: auto; box-shadow: var(--bayang);
}
.struk-pratinjau-catatan { font-size: 11px; color: var(--tinta-muda); margin-top: 8px; font-style: italic; }
.struk-logo { display: block; max-width: 120px; max-height: 70px; margin: 0 auto 6px; }
.struk-qr { display: block; width: 110px; height: 110px; margin: 6px auto 2px; }

.logo-baris { display: flex; gap: 16px; align-items: flex-start; }
.logo-kotak {
  width: 130px; height: 88px; border: 1.5px dashed var(--garis); border-radius: 11px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--kanvas); flex-shrink: 0; padding: 6px;
}
.logo-kotak span { font-size: 11.5px; color: var(--tinta-muda); text-align: center; }
.logo-kotak img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-aksi { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.atur-panel[hidden] { display: none; }

@media (max-width: 1180px) {
  .struk-atur { grid-template-columns: 1fr; }
  .struk-kanan { position: static; }
}

/* ============ SAKELAR ELEMEN & IZIN ============ */
.elemen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 7px 14px; }
.elemen-grid label {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--tinta); cursor: pointer;
}
.elemen-grid input { width: 16px; height: 16px; accent-color: var(--biru); }
.elemen-grid .sekat {
  grid-column: 1 / -1; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--tinta-muda); font-weight: 800; margin-top: 8px;
}

/* ============ MULTI-PEMBAYARAN ============ */
.bayar-split { padding: 0 22px 4px; text-align: right; }
#bayar-daftar:not(:empty) { padding: 2px 22px 8px; display: flex; flex-direction: column; gap: 5px; }
.bayar-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 12px; border-radius: 9px; background: var(--kanvas); font-size: 13px; font-weight: 600;
}
.bayar-item b { margin-left: auto; }
.bayar-sisa {
  display: flex; justify-content: space-between; padding: 8px 22px 2px;
  font-size: 13px; font-weight: 700; color: var(--merah);
}

/* ============ LAPORAN AKUNTANSI ============ */
.lap-dua { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
table.lap { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.lap td { padding: 7px 20px; border-bottom: 1px solid var(--garis); }
table.lap tr.kelompok td {
  font-weight: 800; color: var(--biru-tua); background: #F9FBFD;
  text-transform: uppercase; font-size: 11.5px; letter-spacing: .8px; padding-top: 12px;
}
table.lap tr.sub td { font-weight: 700; border-top: 1px solid var(--garis); background: #F5F9FE; }
table.lap tr.total td {
  font-weight: 800; font-size: 15px; color: #fff; background: var(--biru-tua);
  border: none; padding: 11px 20px;
}
table.lap tr.total.merah td { background: var(--merah); }
table.lap .ka { text-align: right; }
table.lap .kode { color: var(--tinta-muda); font-size: 12px; width: 78px; }
.lap-kosong { padding: 34px; text-align: center; color: var(--tinta-muda); }
.jurnal-blok { border-bottom: 1px solid var(--garis); padding: 11px 20px; }
.jurnal-kepala { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.jurnal-kepala b { color: var(--tinta); }
.jurnal-kepala span { color: var(--tinta-muda); }
.jurnal-baris { display: grid; grid-template-columns: 1fr 120px 120px; font-size: 13px; padding: 2px 0; }
.jurnal-baris.kredit { padding-left: 26px; color: var(--tinta-muda); }
.jurnal-baris .ka { text-align: right; }
.seimbang-ok { color: #2C6A4A; font-weight: 800; }
.seimbang-x { color: var(--merah); font-weight: 800; }

/* ============ DONAT KATEGORI ============ */
.donat-baris { display: flex; align-items: center; gap: 18px; }
.grafik-bungkus svg.donat-svg, .donat-svg { width: 150px; height: 150px; flex-shrink: 0; }
.donat-legenda { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.donat-leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.donat-leg b { margin-left: auto; color: var(--biru-tua); }
.donat-titik { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.donat-nama { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ KARYAWAN & PAYROLL ============ */
.form-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.form-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.wajib { color: var(--merah); }
.modal-tab { padding: 10px 22px 0; margin-bottom: 0; }
.kartu.sedang { max-width: 820px; }
.kepala-alat { display: flex; align-items: center; gap: 8px; }
.kepala-alat input[type="text"], .kepala-alat input[type="date"], .kepala-alat select {
  padding: 8px 11px; border: 1.5px solid var(--garis); border-radius: 9px;
  outline: none; font-size: 13px; color: var(--tinta); background: #fff;
}
.kepala-alat input[type="text"] { width: 210px; }
.kepala-alat input:focus, .kepala-alat select:focus { border-color: var(--biru); }
.sampai-teks { font-size: 12.5px; color: var(--tinta-muda); }

/* ringkasan kartu kecil di atas tabel */
.ringkas-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.ringkas-kartu {
  background: var(--kartu); border-radius: 14px; padding: 14px 17px; box-shadow: var(--bayang);
  border-left: 4px solid var(--biru);
}
.ringkas-kartu .label { font-size: 11.5px; font-weight: 700; color: var(--tinta-muda); text-transform: uppercase; letter-spacing: .4px; }
.ringkas-kartu .nilai { font-size: 21px; font-weight: 800; color: var(--biru-tua); margin-top: 3px; }
.ringkas-kartu .kaki { font-size: 11.5px; color: var(--tinta-muda); margin-top: 2px; }
.ringkas-kartu.oranye { border-left-color: var(--oranye); }
.ringkas-kartu.merah { border-left-color: var(--merah); }
.ringkas-kartu.aksen { border-left-color: var(--aksen); }

/* daftar peran */
.peran-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 16px 20px; }
.peran-kartu {
  border: 1.5px solid var(--garis); border-radius: 13px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, box-shadow .15s;
}
.peran-kartu:hover { border-color: var(--biru); box-shadow: var(--bayang); }
.peran-atas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.peran-nama { font-size: 15px; font-weight: 800; color: var(--biru-tua); }
.peran-kode { font-size: 11px; color: var(--tinta-muda); font-family: Consolas, monospace; }
.peran-izin { display: flex; flex-wrap: wrap; gap: 5px; }
.izin-cip {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
  background: #E6EFFA; color: var(--biru-tua);
}
.izin-cip.penuh { background: var(--biru); color: #fff; }
.peran-kaki { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--tinta-muda); }

/* form karyawan */
.ky-atas { display: flex; gap: 20px; align-items: flex-start; }
.ky-foto { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; flex-shrink: 0; }
.foto-kotak {
  width: 130px; height: 130px; border-radius: 14px; border: 2px dashed var(--garis);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--tinta-muda); font-size: 11.5px; text-align: center; background: var(--kanvas);
}
.foto-kotak img { width: 100%; height: 100%; object-fit: cover; }
.ky-isian { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.ky-akses { padding: 4px 0; }
.izin-ringkas {
  background: var(--kanvas); border-radius: 11px; padding: 11px 14px;
  font-size: 12.5px; color: var(--tinta-muda); line-height: 1.6;
}
.izin-ringkas b { color: var(--biru-tua); }
.sakelar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px 16px; }
.sakelar-baris.kiri { justify-content: flex-start; border-bottom: none; padding: 6px 0; }
.sakelar-teks { font-size: 13px; font-weight: 600; color: var(--tinta); }
.sakelar-teks b { color: var(--biru-tua); }
.form-isi label > .lbl { display: flex; align-items: center; gap: 4px; }
.komp-tambah { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.komp-tambah input, .komp-tambah select {
  padding: 9px 11px; border: 1.5px solid var(--garis); border-radius: 9px; outline: none;
  font-size: 13px; color: var(--tinta); background: #fff;
}
.komp-tambah input:focus, .komp-tambah select:focus { border-color: var(--biru); }
.komp-tambah input#kk-nama { flex: 1; min-width: 200px; }
.gaji-ringkas-kotak {
  background: linear-gradient(135deg, #E6EFFA, #F2F7FD); border-radius: 12px;
  padding: 12px 16px; font-size: 13px; line-height: 1.7; color: var(--tinta);
}
.gaji-ringkas-kotak b { color: var(--biru-tua); }
.tabel-mini { max-height: 210px; overflow-y: auto; }

/* tabel penggajian */
.pg-atas { padding-bottom: 8px; }
.pg-alat { display: flex; align-items: center; gap: 12px; }
.pg-info { font-size: 12.5px; color: var(--tinta-muda); }
.pg-tabel { max-height: 52vh; overflow: auto; border-top: 1px solid var(--garis); }
.tabel-rapat th, .tabel-rapat td { padding: 6px 8px; font-size: 12.5px; white-space: nowrap; }
.tabel-rapat th.pot { color: var(--merah); }
.tabel-rapat input.sel {
  width: 96px; text-align: right; padding: 5px 7px; border: 1.5px solid var(--garis);
  border-radius: 7px; outline: none; font-size: 12.5px; color: var(--tinta);
}
.tabel-rapat input.sel:focus { border-color: var(--biru); background: #F5F9FE; }
.tabel-rapat input.sel.pot { color: var(--merah); }
.tabel-rapat td.neto { font-weight: 800; color: var(--biru-tua); }
.pg-total td { font-weight: 800; background: var(--kanvas); color: var(--biru-tua); position: sticky; bottom: 0; }
.pg-catatan { flex: 1; flex-direction: row !important; align-items: center; gap: 8px !important;
  font-size: 12.5px; font-weight: 600; color: var(--tinta-muda); }
.pg-catatan input { flex: 1; padding: 8px 11px; border: 1.5px solid var(--garis); border-radius: 9px; outline: none; }
.pg-catatan input:focus { border-color: var(--biru); }

/* status slip & karyawan */
.lencana-status { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: .3px; }
.lencana-status.draf { background: #EFF3F8; color: var(--tinta-muda); }
.lencana-status.dikunci { background: #FDF0E6; color: #B45A1E; }
.lencana-status.dibayar { background: #E7F4EC; color: #2C6A4A; }
.lencana-status.aktif { background: #E7F4EC; color: #2C6A4A; }
.lencana-status.nonaktif { background: #FBE9EC; color: var(--merah); }

/* slip gaji */
.slip-isi { padding: 4px 22px 10px; }
.slip-orang { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.slip-ava { width: 44px; height: 44px; border-radius: 50%; background: var(--biru); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; flex-shrink: 0; }
.slip-ava img { width: 100%; height: 100%; object-fit: cover; }
.slip-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.slip-kolom h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-muda); margin-bottom: 6px; }
.slip-baris { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; border-bottom: 1px dashed var(--garis); }
.slip-baris.jumlah { font-weight: 800; color: var(--biru-tua); border-bottom: none; border-top: 1.5px solid var(--garis); margin-top: 4px; padding-top: 7px; }
.slip-neto { margin-top: 14px; padding: 13px 18px; border-radius: 12px;
  background: linear-gradient(135deg, var(--biru), var(--biru-tua)); color: #fff;
  display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.slip-neto b { font-size: 22px; }
.slip-pilih { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0 12px; }

/* baris karyawan di tabel */
.kar-orang { display: flex; align-items: center; gap: 10px; }
.kar-ava { width: 36px; height: 36px; border-radius: 50%; background: var(--biru); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; flex-shrink: 0; }
.kar-ava img { width: 100%; height: 100%; object-fit: cover; }
.kar-nip { font-size: 11px; color: var(--tinta-muda); font-family: Consolas, monospace; }
.tombol-garis {
  padding: 9px 16px; border-radius: 9px; border: 1.5px solid var(--biru);
  color: var(--biru); font-weight: 700; font-size: 13.5px; background: #fff;
}
.tombol-garis:hover { background: #E6EFFA; }

/* dokumen tambahan pada modal struk */
.struk-dokumen { display: flex; gap: 6px; justify-content: center; padding: 4px 18px 0; flex-wrap: wrap; }

/* ============ MEJA & DENAH ============ */
.meja-denah { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 22px; }
.meja-denah.mode-atur .meja-kotak { border-style: dashed; }
.meja-area-judul {
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--tinta-muda); margin-bottom: 10px;
}
.meja-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.meja-kotak {
  border: 2px solid var(--garis); border-radius: 14px; padding: 14px 12px; min-height: 104px;
  background: var(--kartu); font: inherit; color: inherit; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.meja-kotak:hover { border-color: var(--biru); box-shadow: var(--bayang); transform: translateY(-1px); }
.meja-kotak:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; }
.meja-kotak.terisi { border-color: var(--biru); background: linear-gradient(160deg, #E6EFFA, #F5F9FE); }
.meja-kotak.telat { border-color: var(--merah); background: linear-gradient(160deg, #FCEDEF, #FDF6F7); }
.meja-nama { font-weight: 800; font-size: 15.5px; color: var(--biru-tua); }
.meja-kap { font-size: 11.5px; color: var(--tinta-muda); }
.meja-nilai { font-weight: 700; margin-top: auto; color: var(--tinta); }
.meja-waktu { font-size: 11px; color: var(--tinta-muda); }
.meja-kotak.telat .meja-waktu { color: var(--merah); font-weight: 700; }
.meja-kosong-teks { margin-top: auto; font-size: 12px; color: var(--tinta-muda); font-style: italic; }

/* ============ PISAH TAGIHAN ============ */
.orang-pilih { display: flex; gap: 4px; }
.orang-btn {
  width: 28px; height: 26px; border-radius: 7px; border: 1.5px solid var(--garis);
  background: #fff; font: inherit; font-size: 12px; font-weight: 700; color: var(--tinta-muda); cursor: pointer;
}
.orang-btn:hover { border-color: var(--biru); color: var(--biru); }
.orang-btn.aktif { background: var(--biru); border-color: var(--biru); color: #fff; }
.orang-btn:focus-visible { outline: 2px solid var(--biru); outline-offset: 1px; }
.sp-ringkas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
  padding: 14px 22px 4px;
}
.sp-orang { border: 1.5px solid var(--biru); border-radius: 11px; padding: 10px 13px; background: #F2F7FD; }
.sp-orang.kosong { border-color: var(--garis); background: var(--kanvas); opacity: .6; }
.sp-orang-label { font-size: 11.5px; font-weight: 700; color: var(--tinta-muda); text-transform: uppercase; letter-spacing: .4px; }
.sp-orang-nilai { font-size: 18px; font-weight: 800; color: var(--biru-tua); }
.sp-orang-ket { font-size: 11.5px; color: var(--tinta-muda); }

/* ============ PILIH SATUAN (MULTISATUAN) ============ */
.satuan-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; padding: 14px 22px 6px; }
.satuan-pilih {
  border: 1.5px solid var(--garis); border-radius: 12px; padding: 13px 15px; text-align: left;
  background: var(--kartu); font: inherit; color: inherit; cursor: pointer;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.satuan-pilih:hover { border-color: var(--biru); box-shadow: var(--bayang); transform: translateY(-1px); }
.satuan-pilih:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; }
.satuan-nama { font-weight: 700; font-size: 15px; color: var(--biru-tua); }
.satuan-isi { font-size: 11.5px; color: var(--tinta-muda); margin: 2px 0 6px; }
.satuan-harga { font-weight: 700; color: var(--tinta); }

/* ============ PROMO ============ */
.hari-baris { display: flex; gap: 4px; flex-wrap: wrap; }
.hari-kotak { position: relative; cursor: pointer; }
.hari-kotak input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hari-kotak span {
  display: flex; align-items: center; justify-content: center;
  min-width: 38px; padding: 8px 4px; border: 1.5px solid var(--garis); border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--tinta-muda); background: #fff;
  transition: background .12s, color .12s, border-color .12s;
}
.hari-kotak input:checked + span { background: var(--biru); border-color: var(--biru); color: #fff; }
.hari-kotak input:focus-visible + span { outline: 2px solid var(--biru); outline-offset: 1px; }
.tanda-promo {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
  padding: 1px 5px; border-radius: 4px; background: var(--oranye); color: #fff;
  vertical-align: 1px; margin-right: 4px;
}
#krj-kupon { text-transform: uppercase; }

/* saldo awal: dua kolom harta vs kewajiban */
.lap-dua { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
#akt-isi input.sel { width: 170px; }
#akt-isi .tabel-rapat td { white-space: normal; }

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #C2CFE0; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #9EB0C6; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ TATA LETAK LAYAR KECIL (HP & TABLET) ============
   Ditambahkan 18 Sep 2026 setelah aplikasi diuji di iPhone sungguhan, lalu disusun ulang
   supaya ikut menyesuaikan saat HP diputar. Berlaku juga untuk jendela Electron yang
   dikecilkan — tidak ada yang berubah di layar besar. */

/* Tinggi kerangka.
   Di iOS SEMUA browser memakai mesin Safari (Apple mewajibkannya), dan di sana 100vh dihitung
   TANPA memperhitungkan bilah alamat. Akibatnya kerangka lebih tinggi daripada layar yang
   terlihat, bagian bawah sidebar — Pemilik, Tutup Kasir, Pengaturan — terdorong keluar layar,
   dan karena body ber-overflow:hidden halaman tidak bisa digeser untuk menjangkaunya.
   100dvh mengikuti tinggi yang BENAR-BENAR terlihat, dan otomatis menyesuaikan saat diputar.
   Baris 100vh di atasnya sengaja dipertahankan sebagai cadangan untuk browser lama. */
#bingkai { height: 100vh; height: 100dvh; }

#btn-sisi {
  display: none; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 10px;
  align-items: center; justify-content: center;
  background: var(--kanvas); color: var(--navy);
}
#btn-sisi svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
#tirai-sisi { display: none; }

/* ---------- LACI SIDEBAR ----------
   Syaratnya SEMPIT **atau** PENDEK, bukan sempit saja.
   HP yang diputar ke lanskap menjadi lebar ±844px tapi tingginya cuma ±390px. Kalau patokannya
   hanya lebar, sidebar 216px menempel kembali di layar setinggi 390px dan memakan ruang yang
   justru paling langka di posisi itu.

   Batas lebarnya 900px, bukan 760px, dan itu disengaja untuk TABLET POTRET. Di lebar 768px,
   sidebar menempel 216px menyisakan hanya ±150px untuk kisi produk setelah keranjang 340px —
   satu kolom sempit yang tidak layak dipakai jualan. Dengan sidebar jadi laci, ruangnya menjadi
   ±380px alias tiga kolom produk. Tablet lanskap (1024px ke atas) tetap memakai sidebar
   menempel seperti biasa. */
@media (max-width: 900px), (max-height: 520px) {
  #sisi {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    width: min(84vw, 300px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(22, 35, 58, .45);
    overflow-y: auto;            /* seluruh isi laci bisa digulir, bukan cuma bagian menunya */
    -webkit-overflow-scrolling: touch;
  }
  #sisi.buka { transform: none; }

  /* Penggulir dipindah ke #sisi, kalau tidak bagian bawah laci tetap tidak terjangkau. */
  #menu { flex: none; overflow: visible; }

  /* Kepala halaman dipadatkan di sini (padding 9px), jadi patokan tinggi pita
     putihnya ikut turun — kotak logo di laci menyesuaikan sendiri. */
  :root { --tinggi-kepala: 58px; }

  /* Sasaran sentuh dilebarkan. Di layar besar menu ditunjuk kursor yang presisi;
     di HP ditekan ujung jari, dan baris setinggi 31px terlalu sering meleset —
     apalagi sub-item yang berdempetan. */
  .menu-item { padding: 12px 13px; font-size: 14px; }
  .submenu-item { padding: 11px 13px 11px 44px; font-size: 13.5px; }
  .submenu-item::before { left: 25px; }

  #tirai-sisi {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(22, 35, 58, .45);
  }
  #tirai-sisi[hidden] { display: none; }

  #btn-sisi { display: inline-flex; }

  /* Kepala dipadatkan: di lanskap, tiap piksel tegak berharga. */
  #atas { padding: 9px 14px; gap: 12px; justify-content: flex-start; }
  #atas > div:first-of-type { margin-right: auto; min-width: 0; }
  #atas-judul { font-size: 17px; }
  #atas-usaha { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #atas-jam { font-size: 11px; line-height: 1.35; }

  .lihat { padding: 12px 14px; }
}

/* ---------- ISI BERTUMPUK ----------
   Hanya saat layar benar-benar SEMPIT. Di lanskap (lebar tapi pendek) keranjang justru LEBIH
   BAIK tetap di samping: ruang tegaknya sedikit sementara ruang mendatarnya berlimpah, jadi
   menumpuknya malah memaksa menggulir terus-menerus saat melayani pembeli. */
@media (max-width: 760px) {
  #lihat-kasir.aktif { flex-direction: column; overflow-y: auto; gap: 12px; }
  .kasir-kiri { flex: none; }
  .grid-produk {
    overflow: visible; flex: none;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 9px;
  }
  .p-ikon { height: 46px; font-size: 16px; }
  .p-nama { font-size: 12px; min-height: 0; }
  /* Kartu produk sempit: harga dan stok tidak muat sebaris, dan "Stok 100" sempat terpenggal
     jadi dua baris. Dibiarkan turun baris utuh, bukan terpenggal di tengah. */
  .p-bawah { flex-wrap: wrap; gap: 2px 8px; }
  .p-stok { white-space: nowrap; }
  .kasir-kanan { width: auto; flex-shrink: 1; overflow: visible; }

  /* Kepala kartu dibiarkan turun baris supaya tombol aksinya tidak pernah terpotong —
     sebelumnya tombol seperti "+ Pelanggan Baru" tertahan di luar layar dan baru terlihat
     setelah kartunya digeser, padahal itu tombol yang paling sering dipakai. */
  .kartu-kepala { flex-wrap: wrap; gap: 8px; }
  .kepala-kanan { flex-wrap: wrap; width: 100%; }
  .kepala-kanan .cari-kecil { flex: 1; min-width: 0; }

  /* Baris penyaring & alat. Ditemukan lewat penyapuan seluruh halaman di lebar 390px:
     hanya wadah inilah yang isinya menonjol keluar layar, karena flex tanpa izin turun baris.
     Akibatnya kolom tanggal, kotak cari, dan tombol ekspor tidak terjangkau sama sekali di
     halaman Riwayat, Akuntansi, Karyawan, dan Produk. */
  .periode-kanan, .kepala-alat { flex-wrap: wrap; width: 100%; }
  .periode-kanan > *, .kepala-alat > * { min-width: 0; }
  .periode-kanan input[type="date"], .kepala-alat input[type="date"] { flex: 1 1 130px; }
  .kepala-alat input[type="text"] { width: auto; flex: 1 1 100%; }
  .kepala-alat select { flex: 1 1 130px; }

  /* Formulir dua, tiga & empat kolom jadi satu kolom — di lebar HP, kolom yang dibagi dua
     membuat kotak isian terlalu sempit untuk diketik dengan nyaman.
     form-4 sempat tertinggal di sini, dan akibatnya empat kolom tanggal di "Buat Penggajian"
     terjepit jadi ±90px masing-masing sehingga isinya terpotong. */
  .form-2, .form-3, .form-4 { grid-template-columns: 1fr; }

  /* Modal memakai lebar layar penuh: di 430px, sisa 6vw untuk latar belakang tidak berguna
     untuk apa pun dan cuma mengurangi ruang isi. */
  .modal { width: 100%; max-width: 96vw; }
  .modal-kaki { flex-wrap: wrap; }
  .modal-kaki > * { flex: 1 1 auto; }

  /* Baris alat di dalam modal ikut boleh turun baris, kalau tidak tombol "Hitung Ulang
     Otomatis" dan keterangan di sebelahnya saling mendorong keluar layar. */
  .pg-alat { flex-wrap: wrap; }

  /* Tabel payroll punya 17 kolom. Sebagai wadah gulir sendiri di dalam modal yang juga
     bergulir, isinya praktis tidak terjangkau; dibiarkan mengalir mengikuti modal saja. */
  .pg-tabel { max-height: none; overflow: visible; }
  .pg-total td { position: static; }

  /* ---------- TABEL JADI KARTU ----------
     Tabel 6-8 kolom tidak akan pernah muat di layar 400px, dan memaksa kasir menggeser ke
     samping untuk melihat harga atau tombol aksi itu tidak bisa diterima saat tangannya penuh
     melayani pembeli. Jadi di layar sempit tiap BARIS tabel diubah jadi satu kartu bertumpuk:
     nama kolom di kiri, isinya di kanan, semuanya muat tanpa digeser sama sekali.

     Nama kolomnya diambil otomatis dari <thead> oleh labeliTabel() di aplikasi.js dan
     dipasang sebagai data-kolom pada tiap sel — jadi ini berlaku untuk SELURUH tabel di
     aplikasi tanpa perlu menyentuh kode yang menggambarnya satu per satu.

     BERLAKU JUGA UNTUK TABEL DI DALAM MODAL. Aturannya sempat ditulis `.kartu` saja,
     sehingga tabel 17 kolom di "Buat Penggajian" — yang berada di dalam modal, bukan
     kartu halaman — tetap dipaksa muat di layar 430px dan terpotong. Struk dikecualikan
     karena tata letaknya memang harus tetap berbentuk tabel selebar kertas. */
  :is(.kartu, .modal:not(.modal-struk)) :is(table, tbody, tr, td) { display: block; width: auto; }
  :is(.kartu, .modal:not(.modal-struk)) thead { display: none; }

  :is(.kartu, .modal:not(.modal-struk)) tbody tr {
    border: 1.5px solid var(--garis); border-radius: 11px;
    margin: 0 0 9px; padding: 9px 12px; background: var(--kartu);
  }
  :is(.kartu, .modal:not(.modal-struk)) tbody tr:last-child { margin-bottom: 0; }

  :is(.kartu, .modal:not(.modal-struk)) tbody td {
    display: grid; grid-template-columns: 38% 1fr; gap: 10px; align-items: baseline;
    padding: 5px 0; border: 0; white-space: normal; text-align: left;
  }
  :is(.kartu, .modal:not(.modal-struk)) tbody td::before {
    content: attr(data-kolom);
    font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--tinta-muda); line-height: 1.5;
    /* Sebagian sel mewarisi rata-kanan dari tabel aslinya (kolom angka). Nama kolom harus
       tetap rata kiri supaya deretan labelnya lurus dan mudah dipindai mata. */
    text-align: left;
  }
  /* Sel tanpa nama kolom (mis. kolom tombol aksi) memakai lebar penuh, tidak dipaksa dua kolom. */
  :is(.kartu, .modal:not(.modal-struk)) tbody td:not([data-kolom]) { display: block; }
  /* Baris pesan kosong seperti "Belum ada pelanggan." tetap tampil apa adanya, bukan kartu. */
  :is(.kartu, .modal:not(.modal-struk)) tbody td[colspan] { display: block; text-align: center; padding: 10px 0; }
  :is(.kartu, .modal:not(.modal-struk)) tbody td[colspan]::before { content: none; }
  :is(.kartu, .modal:not(.modal-struk)) tbody tr:has(td[colspan]) { border: 0; padding: 0; background: none; }

  /* Sel isian di dalam kartu (baris payroll bisa disunting langsung) tidak boleh melebihi
     lebar kartunya. */
  :is(.kartu, .modal:not(.modal-struk)) tbody td input,
  :is(.kartu, .modal:not(.modal-struk)) tbody td select { width: 100%; min-width: 0; }
}

/* ---------- LANSKAP PENDEK ----------
   Ruang tegak sangat sempit (HP diputar). Yang dikorbankan tinggi, bukan lebar. */
@media (max-height: 520px) and (min-width: 761px) {
  .lihat { padding: 10px 16px; }
  .grid-produk { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 9px; }
  .p-ikon { height: 38px; font-size: 15px; }
  .p-nama { min-height: 0; font-size: 12px; }
}

/* ============ KEPING PENYARING YANG SUDAH PINDAH KE SIDEBAR ============
   Kelompok keping di bawah ini sudah punya submenu di sidebar, jadi di
   halaman disembunyikan. Alasannya layar kecil: di HP keping-keping ini
   membungkus jadi dua-tiga baris dan menindih isi halaman.

   Elemennya TETAP ADA di DOM dan TIDAK BOLEH dihapus — submenu sidebar
   bekerja dengan MENEKAN keping ini. Menghapusnya akan mematikan navigasi.

   Keping periode Dashboard (#chip-periode), kategori di Kasir (#chip-kategori),
   dan stok (#chip-stok) SENGAJA tidak ikut: ketiganya penyaring cepat yang
   harus terlihat berdampingan dengan isian di sebelahnya. */
#riwayat-status, #produk-tab, #beli-tab, #promo-tab,
#akt-tab, #akv-tab, #kar-tab, #gaji-tab, #atur-tab { display: none; }

/* ============ NOMOR VERSI ============
   Ditaruh di dua tempat yang sengaja SEPI: kaki sidebar dan layar kunci.
   Bukan di kepala halaman — itu ruang kerja kasir. Nomor bangun tidak ikut
   tampil karena panjang dan tidak berarti apa-apa bagi pemakai sehari-hari;
   ia muncul saat barisnya diketuk, untuk dibacakan waktu melapor masalah. */
.sisi-versi {
  width: 100%; text-align: left;
  padding: 8px 13px 2px;
  font-size: 10.5px; font-weight: 600; line-height: 1.35;
  color: rgba(255, 255, 255, .5);
}
.sisi-versi:hover { color: rgba(255, 255, 255, .8); }
.kunci-versi {
  margin-top: 12px;
  font-size: 11px; font-weight: 600; color: var(--tinta-muda);
}

/* ============ HALAMAN PAKET & LISENSI ============ */
.lis-kotak{ padding:18px 20px; }
.lis-atas{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; justify-content:space-between; margin-bottom:6px; }
.lis-paket{ font-size:23px; font-weight:800; color:var(--biru-tua); line-height:1.2; }
.lis-ket{ font-size:12.5px; color:var(--tinta-muda); margin-top:2px; }
.lis-lencana{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:20px; }
.lis-lencana.aktif{ background:#E7F4EC; color:#2C6A4A; }
.lis-lencana.coba{ background:#E3EDF9; color:var(--biru-tua); }
.lis-lencana.awas{ background:#FDF0E6; color:#B45309; }
.lis-lencana.tolak{ background:#FBE9EC; color:var(--merah); }
.lis-rinci{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px 18px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--garis); }
.lis-rinci div span{ display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-muda); }
.lis-rinci div b{ font-size:13.5px; color:var(--tinta); font-weight:700; }
.lis-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:4px; }
.lis-form input{ flex:1; min-width:240px; padding:10px 12px; border:1.5px solid var(--garis); border-radius:9px; outline:none; font-size:13px; font-family:ui-monospace,Consolas,monospace; }
.lis-form input:focus{ border-color:var(--biru); }
.lis-pesan{ font-size:12.5px; font-weight:700; margin-top:9px; min-height:17px; }
.lis-pesan.ok{ color:#2C6A4A; }
.lis-pesan.galat{ color:var(--merah); }
.lis-modul td.nama{ font-weight:700; }
.lis-modul td.isi{ color:var(--tinta-muda); font-size:12.5px; }
.lis-punya{ color:#2C6A4A; font-weight:800; }
.lis-kunci{ color:var(--tinta-muda); font-weight:700; }