/* Hak cipta (c) 2026 wnuarta. Wuzchat, dibuat oleh wnuarta.
   Dilisensikan di bawah GNU AGPL-3.0-only; catatan ini wajib dipertahankan. Lihat HAK-CIPTA.md. */

@font-face {
  font-family: "Wuz Sans";
  src: url("wuz_sans.ttf?v=1") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Wuzchat: nama variabel lama dipertahankan, isinya navy gelap dan oranye */
  --navy: #111a2c;
  --navy-dalam: #0b1220;
  --emas: #ff7a1a;
  --emas-tua: #c2410c;
  --biru: #c2410c;
  --latar: #f3f5f9;
  --kartu: #ffffff;
  --tinta: #111a2c;
  --lembut: #4a5468;
  --garis: #e1e5ec;
  --tautan: #c2410c;
  --grafik: #f26b1d;
  --grafik-sorot: #c2410c;
  --oranye-tipis: #ffede0;
  --bingkai: rgba(255, 122, 26, .45);
}

:root:not([data-theme="light"]) {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --latar: #0d1424;
    --kartu: #111a2c;
    --tinta: #f2f5f8;
    --lembut: #a9b3c6;
    --garis: #1f2a40;
    --tautan: #ff8a3d;
    --grafik: #ff8a3d;
    --grafik-sorot: #ffa463;
    --emas-tua: #ff8a3d;
    --oranye-tipis: #3a2416;
  }
}

* { box-sizing: border-box; }

/* Ruang scrollbar selalu disediakan, jadi halaman tidak bergeser kiri-kanan saat berpindah menu
   antara isi yang pendek (tanpa scrollbar) dan isi yang panjang */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

body {
  margin: 0;
  background: var(--latar);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 "Wuz Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--tautan); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--emas); outline-offset: 3px; }

.lebar { width: min(70rem, 100% - 2rem); margin-inline: auto; }
.bacaan { width: min(42rem, 100% - 2rem); margin-inline: auto; }

/* Bilah menu navy polos dengan garis oranye tipis, seperti kepala layar aplikasi */
.bilah {
  background: var(--navy);
  border-bottom: 1px solid var(--bingkai);
}

.atas { background: var(--navy); color: #fff; }

/* Batas bawah bagian navy: garis gradasi oranye logo */
.pembatas {
  height: 4px;
  background: linear-gradient(90deg, #ff9a2e, #ee5219);
}

.pembuka .slogan { margin: 0 0 .5rem; color: #ff8a3d; font-weight: 500; letter-spacing: .02em; }

.atas a { color: #fff; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.merek {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-weight: 600;
  font-size: 1.25rem;
  text-decoration: none;
}

.merek img { width: 2.25rem; height: 2.25rem; }

.nav-tautan { display: flex; gap: 1.25rem; font-size: .9375rem; }
.nav-tautan a { text-decoration: none; }
.nav-tautan a:hover { color: var(--emas); }

.pembuka {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center;
  gap: 2.5rem;
  padding-block: 2.5rem 4rem;
}

.pembuka h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.5rem, 6.4vw, 4.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.pembuka p { margin: 0 0 2rem; max-width: 34rem; font-size: 1.1875rem; color: #dfe6f0; }

.logo-besar { width: min(100%, 22rem); justify-self: center; display: block; }

.tombol {
  display: inline-block;
  padding: .875rem 1.75rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8a2a, #f05a1a);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(240, 90, 26, .35);
}

.tombol:hover { background: linear-gradient(180deg, #ff9a45, #f26b1d); }

.pembuka .catatan-unduh { margin: .875rem 0 0; font-size: .9375rem; color: #c5d0df; }
.catatan-unduh a { color: #fff; }

section { padding-block: 4rem; }

h2 { margin: 0 0 1rem; font-size: clamp(1.625rem, 3.4vw, 2.25rem); font-weight: 600; line-height: 1.2; }
h3 { margin: 0 0 .25rem; font-size: 1.125rem; font-weight: 600; }

.pengantar { max-width: 40rem; margin: 0 0 2.5rem; color: var(--lembut); }

.fitur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  column-gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fitur li { padding-block: 1.25rem; border-top: 1px solid var(--garis); }
.fitur p { margin: 0; color: var(--lembut); }

.rapat { margin-bottom: 0; }

.selang { background: var(--kartu); border-block: 1px solid var(--garis); }

.langkah { margin: 0; padding: 0; list-style: none; counter-reset: langkah; max-width: 42rem; }

.langkah li {
  position: relative;
  padding: 0 0 1.5rem 3.25rem;
  counter-increment: langkah;
}

.langkah li::before {
  content: counter(langkah);
  position: absolute;
  left: 0;
  top: -.125rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--emas);
  font-weight: 600;
}

.langkah p { margin: 0; color: var(--lembut); }

.sidik {
  display: block;
  margin-top: .5rem;
  padding: .75rem 1rem;
  border: 1px solid var(--garis);
  border-radius: .75rem;
  background: var(--latar);
  font: .8125rem/1.5 ui-monospace, Consolas, monospace;
  overflow-wrap: anywhere;
}

/* Sama dengan bilah menu: navy polos dengan garis oranye tipis */
.kaki {
  background: var(--navy);
  border-top: 1px solid var(--bingkai);
  color: #fff;
  font-size: .9375rem;
}
.kaki .lebar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 2rem; }
.kaki a { color: #fff; }
.kaki nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.dokumen { padding-block: 2.5rem 4rem; }
.dokumen h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 600; line-height: 1.15; }
.dokumen h2 { margin-top: 2.5rem; font-size: 1.375rem; }
.dokumen .tanggal { color: var(--lembut); }
.dokumen table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.dokumen th, .dokumen td { padding: .625rem .75rem .625rem 0; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: top; }
.dokumen th { font-weight: 600; }

.isi-dulu { background: #ffc20e; color: #14284a; padding: 0 .25rem; border-radius: .25rem; font-weight: 600; }

/* Ponsel dan tablet tegak: tombol unduh harus sudah terlihat saat halaman dibuka, tanpa menggulir */
@media (max-width: 48rem) {
  .nav { padding-block: .5rem; }
  .merek { font-size: 1.125rem; gap: .5rem; flex-shrink: 0; }
  .merek img { width: 2rem; height: 2rem; }
  .nav-tautan { font-size: .8125rem; gap: .75rem; }
  .pembuka { grid-template-columns: 1fr; gap: .75rem; padding-block: 1rem 1.5rem; }
  /* Mengikuti tinggi layar: di layar pendek logo mengecil lebih dulu, bukan tombolnya yang terdorong */
  .logo-besar { width: clamp(3.5rem, 15vh, 9rem); order: -1; justify-self: center; }
  .pembuka h1 { font-size: clamp(1.75rem, 7.6vw, 3rem); margin-bottom: .625rem; text-align: center; }
  .pembuka p { font-size: clamp(.9375rem, 2.6vw, 1.1875rem); line-height: 1.45; margin-bottom: 1rem; max-width: none; text-align: center; }
  .tombol { display: block; max-width: 24rem; margin-inline: auto; text-align: center; }
  .pembuka .catatan-unduh { margin: .625rem 0 0; font-size: .8125rem; }
  section { padding-block: 3rem; }
}

/* Layar sangat sempit: tautan menu turun ke baris sendiri daripada terpotong */
@media (max-width: 22.5rem) {
  .nav-tautan { gap: .5rem; font-size: .75rem; }
}

/* Ponsel mendatar: dua kolom, supaya judul dan tombol muat dalam tinggi yang sangat pendek */
@media (max-height: 30rem) and (min-width: 34rem) {
  .nav { padding-block: .375rem; }
  .pembuka { grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; padding-block: .625rem 1rem; }
  .logo-besar { width: 7rem; order: 0; }
  .pembuka h1 { font-size: 1.75rem; margin-bottom: .25rem; text-align: left; }
  .pembuka p { font-size: .9375rem; line-height: 1.35; margin-bottom: .5rem; text-align: left; }
  .tombol { display: inline-block; padding: .5rem 1.25rem; }
  .pembuka .catatan-unduh { margin-top: .25rem; }
}

/* Tablet mendatar dan laptop pendek */
@media (min-width: 48.01rem) and (max-height: 45rem) {
  .pembuka { padding-block: 1.5rem 2rem; }
  .pembuka h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
  .logo-besar { width: min(100%, 17rem); }
}


/* Toko PIN dan halaman admin */
[hidden] { display: none !important; }

.bilah-putih { color: #fff; }
.bilah-putih a { color: #fff; }

.kartu-toko {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--bingkai);
  border-radius: .75rem;
  background: var(--kartu);
}
.kartu-toko.sempit { max-width: 26rem; margin-inline: auto; }
.kartu-toko.sorot { border: 1px solid var(--emas); background: linear-gradient(180deg, var(--oranye-tipis), var(--kartu) 60%); }
.dokumen .kartu-toko h1, .dokumen .kartu-toko h2 { margin: 0 0 .75rem; font-size: 1.375rem; }
.kartu-toko h3 { margin-top: 1.25rem; }
.kartu-toko label { display: block; margin: .875rem 0 .25rem; font-weight: 600; }
.kartu-toko label.centang { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; }
.kartu-toko .centang input { width: auto; margin-top: .375rem; flex-shrink: 0; }
.kartu-toko > .tombol-kecil { margin-top: 1rem; }

.kartu-toko input, .kartu-toko textarea, .kartu-toko select {
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid var(--garis);
  border-radius: .5rem;
  background: var(--latar);
  color: var(--tinta);
  font: inherit;
}
.kartu-toko textarea { display: block; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--emas); outline-offset: 1px; }

.baris-isian { display: flex; gap: .5rem; }
.baris-isian input { min-width: 0; font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; }

.tombol-kecil {
  display: inline-block;
  padding: .625rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.tombol-kecil:hover { background: var(--navy-dalam); }
/* Mode gelap: navy tombol sama dengan latar kartu, jadi diberi garis oranye supaya tetap tampak tombol */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tombol-kecil { box-shadow: inset 0 0 0 1px var(--emas); } }
:root[data-theme="dark"] .tombol-kecil { box-shadow: inset 0 0 0 1px var(--emas); }
.tombol-kecil:disabled { opacity: .6; cursor: default; }

.tombol-teks {
  padding: .375rem .5rem;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.tombol-teks.gelap { color: var(--tautan); }

.petunjuk { margin: .375rem 0 0; color: var(--lembut); font-size: .9375rem; }
.petunjuk.rapat-atas { margin-top: 0; }
.pesan-toko { margin: .75rem 0 0; font-weight: 600; }
.pesan-toko.galat { color: #b3261e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pesan-toko.galat { color: #ffb4ab; } }
.petunjuk-bayar { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.daftar-toko { margin: 0; padding-left: 1.25rem; }
.dokumen td.harga { text-align: right; white-space: nowrap; font-weight: 600; padding-right: 0; }
.baris-cari { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: .5rem; }
.kartu-toko .baris-cari input[type="search"] { flex: 1 1 14rem; width: auto; }
.kartu-toko label.per-halaman { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 400; white-space: nowrap; }
.kartu-toko label.per-halaman select { width: auto; }
.halaman { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .75rem; font-variant-numeric: tabular-nums; }
.halaman button:disabled { opacity: .4; cursor: default; }
.tabel-akun td, .tabel-pesanan td { white-space: nowrap; }
/* Pesanan: teks panjang (pemesan dan email, produk, status) boleh pindah baris supaya tabel muat */
.tabel-pesanan td:nth-child(2) { white-space: normal; min-width: 5.5rem; }
.tabel-pesanan td:nth-child(3), .tabel-pesanan td:nth-child(4), .tabel-pesanan td:nth-child(6) { white-space: normal; min-width: 7rem; }
.tabel-pesanan td:nth-child(3) .petunjuk { overflow-wrap: anywhere; font-size: .8125rem; }
.tabel-pesanan td:nth-child(5) { text-align: right; }
.tabel-pesanan .tindakan { white-space: normal; width: 9.5rem; }
.tabel-pesanan .tindakan .tombol-kecil { display: block; width: 100%; margin: 0 0 .375rem; }
.tabel-pesanan .tindakan .tombol-kecil:last-child { margin-bottom: 0; }
/* Judul kolom boleh dua baris, supaya tabel lebih sering muat tanpa berubah jadi kartu */
.tabel-admin th { white-space: normal; font-size: .875rem; line-height: 1.25; vertical-align: bottom; }
.tabel-admin .kolom-no { width: 1%; text-align: right; color: var(--lembut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aktivasi { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }
.kartu-toko .aktivasi select { width: auto; padding-block: .25rem; font-size: .875rem; }
.aktivasi .tombol-kecil { margin: 0; padding: .3rem .75rem; font-size: .875rem; }
.baris-judul { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.stat-grup { margin-top: 1.5rem; padding-block: 0; }
.stat-grup > h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--lembut); font-weight: 600; }
.stat-ubin { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.stat-ubin > div { border: 1px solid var(--garis); border-radius: .5rem; padding: .625rem .75rem; }
.stat-ubin dt { font-size: .8125rem; color: var(--lembut); }
.stat-ubin dd { margin: .125rem 0 0; font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta); }
.stat-ubin dd small { font-size: .8125rem; font-weight: 400; color: var(--lembut); }
.grafik { position: relative; margin-top: 1rem; }
.grafik .sumbu { display: flex; justify-content: space-between; color: var(--lembut); font-size: .75rem; font-variant-numeric: tabular-nums; }
.grafik .maks { color: var(--lembut); font-size: .75rem; font-variant-numeric: tabular-nums; }
.grafik h4 { margin: 0 0 .25rem; font-size: .9375rem; }
.grafik svg { display: block; width: 100%; height: 9rem; overflow: visible; }
.grafik .batang { fill: var(--grafik); }
.grafik .batang-kena { fill: transparent; cursor: default; }
.grafik .batang-kena:hover + .batang, .grafik .batang-kena:focus + .batang { fill: var(--grafik-sorot); }
.grafik .garis-dasar { stroke: var(--garis); stroke-width: 1; }

.grafik-tip { position: absolute; pointer-events: none; transform: translate(-50%, -100%); background: var(--tinta); color: var(--kartu); font-size: .8125rem; padding: .25rem .5rem; border-radius: .375rem; white-space: nowrap; }
.grafik details { margin-top: .25rem; font-size: .875rem; }
.grafik details table { border-collapse: collapse; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.grafik details td, .grafik details th { padding: .125rem .75rem .125rem 0; text-align: left; }
.laporan-item { border-top: 1px solid var(--garis); padding: .875rem 0; }
.laporan-item.selesai { opacity: .6; }
.laporan-item h3 { margin: 0; font-size: 1rem; }
.laporan-item .meta { color: var(--lembut); font-size: .875rem; margin: .125rem 0 .375rem; }
.laporan-item blockquote { margin: .375rem 0; padding: .375rem .625rem; border-left: 3px solid var(--garis); font-size: .9375rem; white-space: pre-wrap; }
.laporan-item blockquote.dari-terlapor { border-left-color: var(--emas); }
.kartu-toko progress { display: block; width: 100%; height: .625rem; margin-top: .375rem; accent-color: var(--emas); }
.tersimpan { margin-left: .75rem; color: var(--lembut); font-size: .9375rem; }
.baris-tombol { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; }

.gulir { overflow-x: auto; }
.dokumen .tabel-admin { font-size: .9375rem; }

/* Tabel yang tidak muat menjadi kartu per baris (lihat tabel-pas.js): tanpa geser ke samping */
table.tumpuk, table.tumpuk tbody, table.tumpuk tr, table.tumpuk td { display: block; width: auto; }
table.tumpuk { min-width: 0; }
table.tumpuk thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
table.tumpuk tr { margin-bottom: .625rem; padding: .375rem .875rem; border: 1px solid var(--garis); border-radius: .75rem; background: var(--kartu); }
/* Judul kolom di kiri (34%), semua isi sel di kanan: tetap rapi walau satu sel berisi beberapa elemen */
.dokumen table.tumpuk td { position: relative; min-height: 1.5rem; padding: .45rem 0 .45rem calc(34% + .75rem);
  border-bottom: 1px solid var(--garis); white-space: normal; overflow-wrap: anywhere; text-align: left; }
.dokumen table.tumpuk td:last-child { border-bottom: 0; }
table.tumpuk td::before { content: attr(data-label); position: absolute; left: 0; top: .55rem; width: 34%; color: var(--lembut); font-size: .8125rem; font-weight: 600; overflow-wrap: normal; }
.dokumen table.tumpuk td[data-label=""] { padding-left: 0; }
table.tumpuk td[data-label=""]::before { content: none; }
table.tumpuk td.kolom-no { width: auto; text-align: left; color: var(--tinta); font-weight: 700; }
table.tumpuk .tindakan { white-space: normal; }
.dokumen table.tumpuk td select { width: auto; max-width: 100%; }
.dokumen table.tumpuk td { text-align: left; }
table.tumpuk.tabel-pesanan .tindakan { width: auto; }
table.tumpuk.tabel-pesanan .tindakan .tombol-kecil { display: inline-block; width: auto; margin: .125rem .375rem .125rem 0; }
table.tumpuk .tindakan .tombol-kecil { margin: .125rem .25rem .125rem 0; }
.tindakan { white-space: nowrap; }
.tindakan .tombol-kecil { padding: .375rem .875rem; margin-right: .25rem; }

.baris-harga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem auto;
  align-items: center;
  column-gap: .75rem;
  padding-block: .75rem;
  border-top: 1px solid var(--garis);
}
.kartu-toko .baris-harga label { margin: 0; font-weight: 400; }
.baris-harga .tersimpan { grid-column: 1 / -1; margin: .25rem 0 0; text-align: right; }

@media (max-width: 34rem) {
  .kartu-toko { padding: 1rem; }
  .baris-harga { grid-template-columns: minmax(0, 1fr) auto; row-gap: .5rem; }
  .kartu-toko .baris-harga label { grid-column: 1 / -1; }
}

/* Admin: menu tetap di kiri, satu bagian tampil dalam satu waktu */
.admin-utama { padding-block: 1.5rem 3rem; }
/* Admin memakai layar lebar: menu samping sudah makan 13rem, tabel butuh sisanya */
.lebar.admin-utama { width: min(84rem, 100% - 2rem); }
.dokumen .tabel-admin th, .dokumen .tabel-admin td { padding-right: .5rem; }
.tabel-akun td:nth-child(2) { white-space: normal; min-width: 7rem; }
.tabel-admin td select { width: auto; max-width: 100%; }
.admin-utama h1, .admin-utama h2 { margin: 0 0 .75rem; font-size: 1.375rem; }
.admin-tata { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.admin-tata[hidden] { display: none; }
.admin-menu { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .25rem; padding: .5rem; border: 1px solid var(--garis); border-radius: .75rem; background: var(--kartu); }
.admin-menu a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; padding: .5rem .75rem; border-radius: .5rem; color: var(--tinta); font-weight: 600; text-decoration: none; }
.admin-menu a:hover { background: var(--latar); }
.admin-menu a[aria-current="page"] { background: var(--navy); color: #fff; }
.admin-menu a:focus-visible { outline: 3px solid var(--emas); outline-offset: 1px; }
.admin-lencana { min-width: 1.5rem; padding: 0 .375rem; border-radius: 1rem; background: var(--emas); color: #0f1720; font-size: .8125rem; line-height: 1.5rem; text-align: center; }
.admin-lencana[hidden] { display: none; }
.admin-lencana.baru { background: var(--grafik); color: #fff; }
@keyframes lencana-masuk { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.admin-lencana.masuk { animation: lencana-masuk .6s ease-out 2; }
@media (prefers-reduced-motion: reduce) { .admin-lencana.masuk { animation: none; } }
.admin-isi { min-width: 0; }
.admin-isi .kartu-toko[hidden] { display: none; }
@media (max-width: 47.99rem) {
  .admin-tata { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .admin-menu { position: static; flex-direction: row; overflow-x: auto; }
  .admin-menu a { flex: none; }
}

/* Paket grup: beberapa kode, satu per baris */
.kode-banyak { white-space: pre-line; }
#grup-daftar ol { padding-left: 1.4em; }
#grup-daftar li { margin: 4px 0; }

/* ===== Admin: Kesehatan server ===== */
:root { --aman: #1b7f3b; --aman-tipis: #e3f4e8; --waspada: #8a5a00; --waspada-tipis: #fff3d6; --bahaya: #b3261e; --bahaya-tipis: #fde7e5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --aman: #7ddc97; --aman-tipis: #12301d; --waspada: #ffd27a; --waspada-tipis: #3a2c0c; --bahaya: #ffb4ab; --bahaya-tipis: #3d1714; }
}
:root[data-theme="dark"] { --aman: #7ddc97; --aman-tipis: #12301d; --waspada: #ffd27a; --waspada-tipis: #3a2c0c; --bahaya: #ffb4ab; --bahaya-tipis: #3d1714; }
.sehat-kotak { margin: .75rem 0; padding: .75rem 1rem; border-radius: .5rem; border: 1px solid currentColor; }
.sehat-kotak p { margin: .125rem 0; }
.sehat-kotak.aman { color: var(--aman); background: var(--aman-tipis); }
.sehat-kotak.waspada { color: var(--waspada); background: var(--waspada-tipis); }
.sehat-kotak.bahaya { color: var(--bahaya); background: var(--bahaya-tipis); }
.kesehatan-judul { margin-top: 1.5rem; flex-wrap: wrap; align-items: center; }
.kesehatan-judul h3 { margin: 0; }
.kesehatan-tombol { display: flex; gap: .5rem; flex-wrap: wrap; }
.label-bahaya { display: inline-block; padding: 0 .5rem; border-radius: 1rem; font-size: .75rem; font-weight: 700; line-height: 1.375rem; white-space: nowrap; }
.label-bahaya.CRITICAL, .label-bahaya.HIGH { color: var(--bahaya); background: var(--bahaya-tipis); }
.label-bahaya.MODERATE, .label-bahaya.UNKNOWN { color: var(--waspada); background: var(--waspada-tipis); }
.label-bahaya.LOW { color: var(--lembut); background: var(--latar); }
.label-baru { margin-left: .375rem; color: #0f1720; background: var(--emas); }
.tabel-admin td.versi { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== Admin: Kapasitas dan pantau langsung ===== */
.sehat-kotak.netral { color: var(--tinta); background: var(--latar); border-color: var(--garis); }
.sehat-kotak h4 { margin: 0 0 .375rem; font-size: 1rem; }
.sehat-kotak .saran { margin-top: .5rem; font-weight: 700; }
.kesehatan-subjudul { margin: 1.5rem 0 0; }
.grafik .garis-batas { stroke: var(--bahaya); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.grafik .batas-label { color: var(--bahaya); font-size: .75rem; }
.grafik .garis-deret { fill: none; stroke: var(--grafik); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.grafik .garis-deret.kedua { stroke: var(--lembut); }
.legenda { display: flex; gap: 1rem; color: var(--lembut); font-size: .75rem; }
.legenda span::before { content: ''; display: inline-block; width: .75rem; height: 2px; margin-right: .375rem; vertical-align: middle; background: var(--grafik); }
.legenda span.kedua::before { background: var(--lembut); }
.dua-kolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.tabel-admin td.angka, .tabel-admin th.angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Admin: filter akun, label PIN khusus ===== */
.nav-admin { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.label-khusus { color: var(--emas-tua); background: var(--oranye-tipis); }
.tabel-akun td small { display: inline-block; margin-top: .125rem; }

/* ===== Laporan PDF: Cetak › Simpan sebagai PDF ===== */
.kepala-cetak { display: none; }
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  :root {
    --kartu: #fff !important; --latar: #f3f5f9 !important; --tinta: #111a2c !important; --lembut: #4a5468 !important;
    --garis: #d5dae3 !important; --emas-tua: #c2410c !important; --oranye-tipis: #ffede0 !important; --grafik: #f26b1d !important;
    --aman: #1b7f3b !important; --aman-tipis: #e3f4e8 !important; --waspada: #8a5a00 !important; --waspada-tipis: #fff3d6 !important;
    --bahaya: #b3261e !important; --bahaya-tipis: #fde7e5 !important; color-scheme: light;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; color: #111a2c !important; }
  .bilah, .admin-menu, #info, #galat, #tidak-aktif, #form-masuk, #voucher, .halaman, .baris-cari, .kesehatan-tombol,
  button, .tombol-kecil, .tombol-teks, details, .grafik-tip, .admin-lencana, #langsung-tombol { display: none !important; }
  .admin-utama { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .admin-tata { display: block !important; }
  .admin-isi { width: 100% !important; }
  body.cetak .admin-isi [data-tab] { display: none !important; }
  body.cetak .admin-isi [data-tab][data-cetak] { display: block !important; }
  body.cetak .admin-isi [data-cetak="awal"]:not(.cetak-pertama) { break-before: page; }
  .kepala-cetak { display: block !important; margin: 0 0 6mm; padding-bottom: 3mm; border-bottom: 2px solid #ff7a1a; }
  .kepala-cetak h1 { margin: 0; font-size: 16pt; }
  .kepala-cetak p { margin: 1mm 0 0; font-size: 9pt; color: #4a5468; }
  .kartu-toko { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 6mm !important; background: none !important; }
  .gulir { overflow: visible !important; }
  table { font-size: 8.5pt; }
  tr, .stat-ubin > div, .grafik, .sehat-kotak, .laporan-item { break-inside: avoid; }
  h2, h3, h4 { break-after: avoid; }
  input, select, textarea { border: 0 !important; background: none !important; color: #111a2c !important; padding: 0 !important; appearance: none; font: inherit; box-shadow: none !important; }
  textarea { resize: none; overflow: visible; }
  a { color: #111a2c; text-decoration: none; }
  .tabel-pesanan th:last-child, .tabel-pesanan td:last-child { display: none; }
  .tabel-akun th:nth-child(n+8), .tabel-akun td:nth-child(n+8) { display: none; }
}