/* Tata letak: bilah atas tipis, isi satu kolom maks. 1100px; kartu grup di beranda, panel bertab di halaman grup. */
/* v3.4: token desain FIWA. Hijau FIWA hanya untuk aksi utama dan status aman; kuning/merah hanya untuk yang perlu tindakan. */
/* v3.4.2: token desain mengikuti logo FIWA: biru FIWA untuk aksi utama, emas sebagai aksen, hijau tetap untuk status aman. */
:root {
  --latar: #f5f7fa; --permukaan: #ffffff; --cekung: #edf1f6; --teks: #0d1b2a; --teks-2: #3f4f61; --redup: #5a6878; --garis: #e1e7ef; --garis-kuat: #7a8a9c;
  --aksen: #1572b8; --aksen-tua: #00507a; --aksen-teks: #ffffff; --aksen-lembut: #e6f0f9;
  --emas: #f0b419; --emas-tua: #8a6200; --merah-fiwa: #ed1c24;
  --aktif: #0b6b4a; --aktif-bg: #e3f3ec; --lain: #7a4e00; --lain-bg: #fff4db; --mati: #3f4f61; --mati-bg: #edf1f6;
  --bahaya: #b42318; --bahaya-bg: #fdecea; --bahaya-teks: #ffffff; --info: #174ea6; --info-bg: #e8f0fe; --fokus: #2463d6;
  --gelap: #0a2236; --gelap-2: #10304a; --gelap-garis: #1d4060; --gelap-redup: #b5c6d6; --hijau-terang: #f0b419;
  /* v3.28: token pengganti warna mentah (design system). */
  --di-gelap: #ffffff; --gelap-samar: #8ea3b8; --gelap-sorot: #12324e; --gelap-aktif: #17395a; --gelap-ujung: #0f3557; --latar-logo: #ffffff;
  --di-emas: #2b1d00; --emas-sorot: #f6c84a; --di-gelap-aktif: #6fd3a8; --di-gelap-lain: #f0c05a; --di-gelap-bahaya: #f97066;
  --lain-garis: #f3dca4; --lain-sorot: #fffaf0; --bahaya-garis: #f1b8b2;
  --seri-0: #1572b8; --seri-1: #0b6b4a; --seri-2: #b07800; --seri-3: #7a3fb0; --seri-4: #b42318; --seri-5: #3f4f61;
  --jenis-simulasi: #2f7d6d; --jenis-video: #b4372f; --jenis-latihan: #7a5bb5; --jenis-referensi: #3a6ea5; --jenis-buku: #8a6a2f; --jenis-alat: #4f5d6b; --jenis-kursus: #c06a22;
  --huruf: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arab: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 14px; --bayang: 0 1px 2px rgb(13 27 42 / .06), 0 4px 14px rgb(13 27 42 / .05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --latar: #0b1520; --permukaan: #122130; --cekung: #0f1c29; --teks: #e4ecf4; --teks-2: #c0cedb; --redup: #93a4b5; --garis: #22364a; --garis-kuat: #5a7590;
    --aksen: #5aa9e6; --aksen-tua: #8cc6f2; --aksen-teks: #04182a; --aksen-lembut: #14324d;
    --emas: #f0b419; --emas-tua: #f6cd5c;
    --aktif: #6fd3a8; --aktif-bg: #123628; --lain: #f0c05a; --lain-bg: #33290f; --mati: #c0cedb; --mati-bg: #1c2b3a;
    --bahaya: #f97066; --bahaya-bg: #3a1c1a; --bahaya-teks: #1a0706; --info: #8ab4ff; --info-bg: #182640; --fokus: #7aa7ff;
    --gelap: #07182a; --gelap-2: #0d2338; --gelap-garis: #1b3a57;
    --lain-garis: #5a4a1c; --lain-sorot: #241d0c; --bahaya-garis: #6b2c27;
    --seri-0: #5aa9e6; --seri-1: #6fd3a8; --seri-2: #f0c05a; --seri-3: #b48ee6; --seri-4: #f97066; --seri-5: #93a4b5; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--latar); color: var(--teks); font: 15px/1.55 var(--huruf); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.015em; } h2 { font-size: 18px; font-weight: 600; } h3 { font-size: 15px; font-weight: 600; }
a { color: var(--aksen); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.lewati { position: absolute; left: -999px; } .lewati:focus { left: 16px; top: 8px; background: var(--permukaan); padding: 6px 10px; z-index: 10; }
.kecil { font-size: 13px; color: var(--redup); }
.mono { font-family: var(--mono); font-size: 13px; }

.bilah { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px;
  background: var(--permukaan); border-bottom: 1px solid var(--garis); position: sticky; top: 0; z-index: 5; }
.merek { white-space: nowrap; font-weight: 700; font-size: 16px; color: var(--teks); text-decoration: none; }
.merek span { color: var(--aksen); }
.kanan { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lonceng { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--redup); text-decoration: none; }
.lonceng:hover, .lonceng:focus-visible { background: var(--latar); color: var(--teks); }
.lonceng.ada { color: var(--lain); }
.lonceng.ada-kritis { color: var(--bahaya); }
.lonceng-jumlah { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; box-sizing: border-box;
  background: var(--lain); color: var(--permukaan); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid var(--permukaan); }
.lonceng.ada-kritis .lonceng-jumlah { background: var(--bahaya); }
.halaman-peringatan .daftar-peringatan { margin-top: 12px; }
.tautan-panduan { font-size: 13px; font-weight: 600; color: var(--aksen); text-decoration: none; white-space: nowrap; }
.tautan-panduan:hover { text-decoration: underline; }
.akun { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--redup); min-width: 0; }
.akun span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }

.tombol { font: inherit; font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--aksen); background: var(--aksen); color: var(--aksen-teks); }
.tombol.halus { background: transparent; color: var(--teks); border-color: var(--garis); }
.tombol.bahaya { background: var(--bahaya); border-color: var(--bahaya); color: var(--bahaya-teks); }
.tombol.kecil-t { padding: 4px 10px; font-size: 13px; }
a.tombol { display: inline-block; text-decoration: none; }
.tombol:disabled { opacity: .55; cursor: not-allowed; }
.baris-tombol { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.kepala-halaman { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.kepala-halaman p { margin: 4px 0 0; color: var(--redup); }
.jejak { font-size: 13px; margin-bottom: 6px; display: inline-block; }

.kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; }
.kartu .alamat { font-size: 12px; color: var(--redup); word-break: break-all; }
.kartu.berjalan { border-color: var(--aktif); box-shadow: inset 0 0 0 1px var(--aktif); }

.pil { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.pil::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pil.aktif { color: var(--aktif); background: var(--aktif-bg); }
.pil.lain { color: var(--lain); background: var(--lain-bg); }
.pil.mati { color: var(--mati); background: var(--mati-bg); }
.pil.bahaya { color: var(--bahaya); background: var(--bahaya-bg); }

.tab { display: flex; gap: 4px; border-bottom: 1px solid var(--garis); margin-bottom: 16px; overflow-x: auto; }
.tab button { font: inherit; border: 0; background: none; padding: 10px 14px; color: var(--redup); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab button[aria-selected="true"] { color: var(--teks); border-bottom-color: var(--aksen); font-weight: 600; }

.panel { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 16px; }
.panel + .panel, .pesan + .panel { margin-top: 14px; }
.panel > h2, form.panel > h2 { margin-bottom: 10px; }
.kepala-halaman + .pesan { margin-top: 0; }
.panel-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

.ringkas { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--redup); }
.ringkas b { color: var(--teks); font-size: 20px; display: block; font-variant-numeric: tabular-nums; }

.bungkus-tabel, .gulir-tabel { overflow-x: auto; max-width: 100%; position: relative; } /* relative: elemen absolut di dalam tabel (mis. .sr-saja) tidak melebarkan halaman di HP */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
th { font-size: 12px; font-weight: 600; color: var(--redup); text-transform: uppercase; letter-spacing: .04em; }
td.angka { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.tak-bisa td { color: var(--redup); }

.kontrol { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
label { font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
select, input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="date"], input[type="month"], input[type="number"], textarea {
  font: inherit; color: inherit; background: var(--permukaan); border: 1px solid var(--garis-kuat); border-radius: 8px; padding: 7px 10px; }
textarea { width: 100%; min-height: 220px; font-family: var(--mono); font-size: 13px; background: var(--cekung); resize: vertical; }
.gabung { display: inline-flex; align-items: stretch; }
.gabung input { border-radius: 0; min-width: 0; width: 12em; }
.imbuhan { display: inline-flex; align-items: center; padding: 0 8px; font: 13px var(--mono); color: var(--redup);
  background: var(--cekung); border: 1px solid var(--garis); }
.imbuhan:first-child { border-right: 0; border-radius: 8px 0 0 8px; }
.imbuhan:last-child { border-left: 0; border-radius: 0 8px 8px 0; }
textarea.pendek { min-height: 84px; }
label.lebar { flex: 1 1 320px; }
.panel form.kontrol { margin-top: 14px; }
.daftar-alasan { margin: 6px 0 0; padding-left: 18px; }
td a { color: var(--teks); font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }
/* v3.30.3 (pedoman 1.15): area klik minimal 24 px; kotak centang 20 px + margin 2 px = 24 px. */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 2px; accent-color: var(--aksen); flex: none; }

.pesan { border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-top: 12px; }
.pesan.peringatan { background: var(--lain-bg); color: var(--lain); }
.pesan.galat { background: var(--bahaya-bg); color: var(--bahaya); }
.pesan.info { background: var(--aksen-lembut); color: var(--teks); }
.kosong { text-align: center; color: var(--redup); padding: 36px 16px; border: 1px dashed var(--garis); border-radius: 12px; }
.muat { color: var(--redup); padding: 24px 0; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--teks); color: var(--latar);
  padding: 10px 16px; border-radius: 8px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100% - 32px); }
.toast.tampil { opacity: 1; }
dialog { border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); color: var(--teks); padding: 20px; max-width: 420px; width: calc(100% - 32px); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog form { display: flex; flex-direction: column; gap: 12px; }
dialog p { margin: 0; color: var(--redup); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
@media (max-width: 560px) {
  .bilah { padding: 10px 16px; }
  .gabung input { width: 100%; }
  .gabung { width: 100%; }
  .sembunyi-hp { display: none; }
  /* Tabel santri menjadi baris bertumpuk supaya sisa waktu dan tombol aksi tetap terlihat. */
  table.santri thead { display: none; }
  table.santri tr { display: grid; grid-template-columns: 32px 1fr auto; grid-template-areas: "cek nama sisa" "cek status status" "aksi aksi aksi";
    gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--garis); }
  table.santri td { border: 0; padding: 0; }
  table.santri td.c-cek { grid-area: cek; padding-top: 2px; }
  table.santri td.c-nama { grid-area: nama; font-weight: 600; }
  table.santri td.c-sisa { grid-area: sisa; }
  table.santri td.c-status { grid-area: status; }
  table.santri td.c-aksi { grid-area: aksi; }
  table.santri td.c-aksi:empty { display: none; }
  table.santri td.c-aksi .baris-tombol { justify-content: flex-start; }
  table.santri td.c-sisa:has(> :empty), table.santri td.c-sisa.kosong-sisa { display: none; }
  /* Tabel anggota/pengguna: nama di atas, status di bawahnya, tombol aksi di kanan. */
  table.anggota thead { display: none; }
  table.anggota tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nama aksi" "status aksi";
    gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--garis); align-items: center; }
  table.anggota td { border: 0; padding: 0; }
  table.anggota td.c-nama { grid-area: nama; min-width: 0; overflow-wrap: anywhere; }
  table.anggota td.c-status { grid-area: status; }
  table.anggota td.c-aksi { grid-area: aksi; }
}

/* Isian email dengan saran dan chip validasi */
.pilih-email-bungkus { position: relative; flex: 1 1 420px; display: flex; flex-direction: column; gap: 6px; }
.label-teks { font-size: 14px; font-weight: 600; }
.pilih-email { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 6px 8px;
  border: 1px solid var(--garis); border-radius: 8px; background: var(--permukaan); cursor: text; }
.pilih-email:focus-within { outline: 2px solid var(--fokus); outline-offset: 1px; }
.pilih-email input[type="text"] { flex: 1 1 160px; min-width: 120px; border: 0; padding: 4px; background: transparent; outline: none; }
.chip-wadah { display: contents; }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 9px; border-radius: 999px; font-size: 13px; }
.chip.ok { background: var(--aktif-bg); color: var(--aktif); }
.chip.salah { background: var(--bahaya-bg); color: var(--bahaya); }
.chip.memeriksa { background: var(--mati-bg); color: var(--mati); }
.chip-tanda { font-weight: 700; }
.chip-alasan { font-size: 12px; opacity: .9; }
.chip-alasan::before { content: "· "; }
.chip-hapus { border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; }
.chip-hapus:hover { background: rgba(0,0,0,.08); }
.saran { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--permukaan); border: 1px solid var(--garis); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 320px; overflow: auto; }
.saran li { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.saran li.sorot, .saran li:hover { background: var(--cekung); }
.saran li.tak-boleh { opacity: .75; }
.saran li.kosong-saran { cursor: default; color: var(--redup); }
.saran-utama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-teks { color: var(--aktif); font-weight: 600; }
.salah-teks { color: var(--bahaya); font-weight: 600; }
.ringkas-email { margin: 0; min-height: 1.2em; flex: 1 1 auto; }
.baris-csv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.baris-csv > .kecil { color: var(--redup); }
.pilih-email.seret { outline: 2px dashed var(--aksen); outline-offset: 2px; background: var(--aksen-lembut); }

.label-sebaris { display: inline-flex; flex-direction: row; align-items: center; font-weight: 600; gap: 8px; font-size: 13px; color: var(--redup); }
.label-sebaris select { width: auto; }

/* ---------- mode grup, kesiapan, kebijakan santri, temuan, diagnosis ---------- */
#dialog-isi { white-space: pre-line; overflow-wrap: anywhere; }
.baris-tombol.kiri { justify-content: flex-start; margin-top: 12px; }
.pil.mode-pribadi, .pil.mode-fplus { background: transparent; border: 1px solid currentColor; padding: 1px 9px; }
.pil.mode-pribadi { color: var(--aksen); }
.pil.mode-fplus { color: var(--redup); }
.pil.mode-pribadi::before { border-radius: 2px; transform: rotate(45deg); width: 6px; height: 6px; }
.pil.mode-fplus::before { background: transparent; border: 1.5px solid currentColor; width: 5px; height: 5px; }
.kartu .alamat .pil { margin-left: 4px; word-break: normal; }

/* Penanda status: ikon dalam lingkaran + label; warna hanya penguat. */
.tanda { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 10px 2px 3px;
  border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.tanda-ikon { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; line-height: 1;
  background: currentColor; }
.tanda-ikon { color: inherit; }
.tanda.ok { color: var(--aktif); background: var(--aktif-bg); }
.tanda.peringatan { color: var(--lain); background: var(--lain-bg); }
.tanda.gagal { color: var(--bahaya); background: var(--bahaya-bg); }
.tanda.tak-tahu { color: var(--mati); background: var(--mati-bg); }
/* Ikon di atas lingkaran berwarna: teks memakai warna permukaan supaya kontras di tema terang dan gelap. */
.tanda-ikon { -webkit-text-fill-color: var(--permukaan); }

.ringkas-status { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--redup); margin-bottom: 4px; }
.daftar-butir { list-style: none; margin: 0; padding: 0; }
.butir { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--garis); }
.butir:last-child { border-bottom: 0; }
.butir h3 { margin-bottom: 2px; }
.butir p { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.butir .perbaikan { color: var(--redup); }
.butir-isi > .tombol { margin-top: 8px; }

details.tambahan summary, .daftar-paket summary, .hasil-wl summary { cursor: pointer; color: var(--aksen); font-weight: 600; font-size: 13px; padding: 4px 0; }
.info-perangkat { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px; }
.info-perangkat dt { color: var(--redup); }
.info-perangkat dd { margin: 0; overflow-wrap: anywhere; }
.info-perangkat dd .tanda { white-space: normal; }

/* Dialog lebar: diagnosis */
dialog.lebar { max-width: 760px; max-height: calc(100vh - 32px); overflow: auto; }
dialog.dialog-alasan { max-width: 520px; }
.dialog-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  position: sticky; top: -20px; background: var(--permukaan); padding: 20px 0 10px; margin-top: -20px; z-index: 1; border-bottom: 1px solid var(--garis); }
.dialog-kepala p { margin: 2px 0 0; }
.diag h3 { margin: 18px 0 8px; }
.diag > p { margin: 8px 0 0; }
.ringkas-diag { border-radius: 10px; padding: 14px 16px; margin-top: 14px; border-left: 4px solid currentColor; }
.ringkas-diag.ok { background: var(--aktif-bg); color: var(--aktif); }
.ringkas-diag.peringatan { background: var(--lain-bg); color: var(--lain); }
.ringkas-diag.gagal { background: var(--bahaya-bg); color: var(--bahaya); }
.ringkas-diag p { margin: 6px 0 0; color: var(--teks); }
.ringkas-diag .penyebab { font-size: 16px; font-weight: 700; }
.ringkas-diag .tanda { background: var(--permukaan); }
.daftar-periksa { list-style: none; margin: 0; padding: 0; }
.daftar-periksa li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--garis); font-size: 14px; align-items: start; }
.daftar-periksa li .kecil { overflow-wrap: anywhere; }
.daftar-periksa li.lewat b { color: var(--redup); font-weight: 600; }
.daftar-periksa li > .tanda, .butir-status .tanda { justify-self: start; }
table.linimasa { font-size: 13px; }
table.linimasa td.c-rinci { overflow-wrap: anywhere; }
.daftar-paket { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.daftar-paket li { border: 1px solid var(--garis); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
pre.json { max-height: 320px; overflow: auto; background: var(--cekung); border: 1px solid var(--garis); border-radius: 8px; padding: 10px;
  font: 12px/1.45 var(--mono); white-space: pre; margin: 6px 0 0; }

/* Hasil simpan whitelist dan siapkan OU pribadi */
.hasil-wl p { margin: 0 0 8px; }
.hasil-wl p.kecil { margin: 10px 0 0; color: var(--redup); }
.label-wl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.label-wl li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.label-wl .mono { min-width: 12em; overflow-wrap: anywhere; }
.catatan-mode { margin: 12px 0 0; }
.label-hp { display: none; }

@media (max-width: 560px) {
  .butir { grid-template-columns: 1fr; }
  .daftar-periksa li { grid-template-columns: 1fr; gap: 4px; }
  .label-wl .mono { min-width: 0; flex: 0 1 auto; }
  .label-wl li { padding-bottom: 6px; border-bottom: 1px solid var(--garis); }
  dialog.lebar { padding: 16px; }
  .dialog-kepala { top: -16px; margin-top: -16px; padding-top: 16px; }
  /* Linimasa: waktu + sumber di baris pertama, kejadian dan rincian di bawahnya. */
  table.linimasa thead { display: none; }
  table.linimasa tr { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "waktu sumber" "jenis jenis" "rinci rinci"; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--garis); }
  table.linimasa td { border: 0; padding: 0; }
  table.linimasa td.c-waktu { grid-area: waktu; } table.linimasa td.c-sumber { grid-area: sumber; }
  table.linimasa td.c-jenis { grid-area: jenis; font-weight: 600; } table.linimasa td.c-rinci { grid-area: rinci; }
  /* Tabel grup admin: nama, angka, lalu aksi. [kerapian R2] U110-A.2: baris mode dan status dibuang bersama kolomnya. */
  table.grup-admin thead { display: none; }
  table.grup-admin tr { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "nama nama nama" "guru santri santri" "aksi aksi aksi";
    gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--garis); align-items: center; }
  table.grup-admin td { border: 0; padding: 0; }
  table.grup-admin td.c-nama { grid-area: nama; overflow-wrap: anywhere; }
  table.grup-admin td.c-guru { grid-area: guru; } table.grup-admin td.c-santri { grid-area: santri; }
  table.grup-admin td.c-aksi { grid-area: aksi; } table.grup-admin td.c-aksi .baris-tombol { justify-content: flex-start; }
  table.grup-admin .label-hp { display: inline; color: var(--redup); font-size: 13px; }
}

/* ---------- v3: OU pribadi, kebijakan santri, temuan, darurat ---------- */
.tumpuk { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lencana { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px;
  background: var(--bahaya); color: var(--bahaya-teks); font-size: 12px; font-weight: 700; line-height: 1; vertical-align: 1px; }
.tombol .lencana { box-shadow: 0 0 0 2px var(--permukaan); }
button.tautan { font: inherit; border: 0; background: none; padding: 0; color: var(--aksen); font-weight: 600; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
button.tautan:hover { text-decoration: underline; }
.galat-teks { color: var(--bahaya); overflow-wrap: anywhere; }
.beda-teks { color: var(--lain); font-weight: 600; }
.alasan-wl { font-size: 13px; }
.catatan-uji { margin: 0 0 10px; max-width: 80ch; }
.konfig { margin: 12px 0 8px; }
.ringkas-chip { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.chip-ringkas { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 13px; }
.chip-ringkas b { font-size: 16px; font-variant-numeric: tabular-nums; }
.chip-ringkas.ok { color: var(--aktif); background: var(--aktif-bg); }
.chip-ringkas.peringatan { color: var(--lain); background: var(--lain-bg); }
.chip-ringkas.gagal { color: var(--bahaya); background: var(--bahaya-bg); }
.chip-ringkas.tak-tahu { color: var(--mati); background: var(--mati-bg); }
.kontrol.filter { margin-bottom: 8px; align-items: center; }
.kontrol.filter .label-sebaris { color: var(--teks); font-weight: 500; }

table.kebijakan { font-size: 14px; }
table.kebijakan td { vertical-align: top; }
table.kebijakan td.c-nama { min-width: 200px; overflow-wrap: anywhere; }
table.kebijakan td.c-nama > div { margin-top: 2px; }
table.kebijakan td.c-waktu { white-space: nowrap; }
table.kebijakan td.c-alasan { max-width: 220px; }
table.kebijakan td.c-aksi .baris-tombol { flex-wrap: nowrap; }
table.kebijakan tr.beda td { background: var(--lain-bg); }
table.kebijakan tr.beda td:first-child { box-shadow: inset 3px 0 0 var(--lain); }
details.tambahan ul { margin: 4px 0 0; padding-left: 16px; }

.hasil-ou:empty { display: none; }
.hasil-ou { margin-bottom: 14px; }

.zona-bahaya { border-color: var(--bahaya); box-shadow: inset 4px 0 0 var(--bahaya); }
.zona-bahaya h2 { color: var(--bahaya); }
.zona-bahaya p { margin: 0; max-width: 80ch; }

.daftar-temuan { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.temuan { border: 1px solid var(--garis); border-radius: 10px; padding: 12px 14px; background: var(--latar); }
.temuan.kritis { border-color: var(--bahaya); box-shadow: inset 4px 0 0 var(--bahaya); }
.temuan.peringatan { box-shadow: inset 4px 0 0 var(--lain); }
.temuan.selesai { opacity: .8; }
.temuan-kepala { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.temuan-kepala h3 { flex: 1 1 240px; }
.temuan-rinci { margin: 6px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.temuan-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; overflow-wrap: anywhere; }
.temuan > p.kecil { margin: 6px 0 0; }

@media (max-width: 560px) {
      /* Kebijakan santri: kartu bertumpuk per santri. */
  table.kebijakan thead { display: none; }
  table.kebijakan tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nama nama" "keadaan tambahan" "waktu waktu" "alasan alasan" "aksi aksi";
    gap: 6px 10px; padding: 12px 8px; border-bottom: 1px solid var(--garis); }
  table.kebijakan tr.beda { background: var(--lain-bg); box-shadow: inset 3px 0 0 var(--lain); }
  table.kebijakan tr.beda td { background: none; box-shadow: none; }
  table.kebijakan td { border: 0; padding: 0; min-width: 0; max-width: none; }
  table.kebijakan td.c-nama { grid-area: nama; min-width: 0; }
  table.kebijakan td.c-keadaan { grid-area: keadaan; } table.kebijakan td.c-tambahan { grid-area: tambahan; text-align: right; }
  table.kebijakan td.c-waktu { grid-area: waktu; display: flex; gap: 14px; flex-wrap: wrap; white-space: normal; }
  table.kebijakan td.c-alasan { grid-area: alasan; } table.kebijakan td.c-aksi { grid-area: aksi; }
  table.kebijakan td.c-aksi .baris-tombol { justify-content: flex-start; }
  table.kebijakan .label-hp { display: inline; }
  .temuan-kepala h3 { flex-basis: 100%; order: 2; }
}

/* ---------- v3.1: armada dan kepatuhan CB ---------- */
.lebar-baca { max-width: 80ch; margin: 4px 0 0; }
.chip-ringkas.netral { color: var(--teks); background: var(--cekung); border: 1px solid var(--garis); }
.kisi-armada { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.distribusi { border: 1px solid var(--garis); border-radius: 10px; padding: 12px 14px; background: var(--latar); min-width: 0; }
.distribusi h3 { font-size: 13px; color: var(--redup); font-weight: 600; margin-bottom: 8px; }
.distribusi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.distribusi li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(40px, 1fr) 2.5em; gap: 10px; align-items: center; font-size: 13px; }
.dist-label { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.dist-catatan { font-size: 12px; font-weight: 600; }
.dist-batang { height: 8px; border-radius: 4px; background: var(--cekung); overflow: hidden; }
.dist-batang > span { display: block; height: 100%; border-radius: 4px; background: var(--mati); }
.dist-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.distribusi li.ok .dist-batang > span { background: var(--aktif); } .distribusi li.ok .dist-catatan { color: var(--aktif); }
.distribusi li.peringatan .dist-batang > span { background: var(--lain); } .distribusi li.peringatan .dist-catatan { color: var(--lain); }
.distribusi li.gagal .dist-batang > span { background: var(--bahaya); } .distribusi li.gagal .dist-catatan { color: var(--bahaya); }
.distribusi.acuan p { margin: 0 0 4px; }
.acuan-email { overflow-wrap: anywhere; font-weight: 600; }
.distribusi.acuan .baris-tombol.kiri { margin-top: 8px; }
.tombol.halus.teks-bahaya { color: var(--bahaya); }

.pil-sumber { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 0 7px; border-radius: 4px; border: 1px solid currentColor;
  line-height: 18px; white-space: nowrap; vertical-align: middle; }
.pil-sumber.s-google { color: var(--fokus); }
.pil-sumber.s-aplikasi { color: var(--aksen); }
.pil-sumber.s-acuan { color: var(--lain); }
.aue { font-variant-numeric: tabular-nums; }
.aue > span { white-space: nowrap; }
.aue.lewat { color: var(--bahaya); font-weight: 700; }
.aue.dekat { color: var(--lain); font-weight: 600; }
.tumpuk.rapat { gap: 0; }

table.armada { font-size: 13px; }
table.armada th { white-space: nowrap; }
table.armada td { vertical-align: top; }
table.armada tr.klik { cursor: pointer; }
table.armada tbody tr.klik:hover td { background: var(--cekung); }
table.armada tr.st-gagal td:first-child { box-shadow: inset 3px 0 0 var(--bahaya); }
table.armada tr.st-peringatan td:first-child { box-shadow: inset 3px 0 0 var(--lain); }
table.armada td.c-nama { min-width: 150px; max-width: 200px; overflow-wrap: anywhere; }
table.armada td.c-nama .tautan { font-size: 14px; }
table.armada td.c-model { min-width: 100px; }
table.armada td.c-status { min-width: 170px; max-width: 230px; }
table.armada td.c-aue { min-width: 92px; }
table.armada td.c-waktu, table.armada td.c-jumlah { white-space: nowrap; }
.akar-utama { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.akar-ikon { flex: none; font-weight: 700; width: 1em; text-align: center; }
.akar-utama.gagal .akar-ikon { color: var(--bahaya); }
.akar-utama.peringatan .akar-ikon { color: var(--lain); }
table.kebijakan-cb td.c-sumber { white-space: nowrap; }

/* Detail konfigurasi */
.catatan-kumpulkan { margin: 10px 0 0; }
.catatan-kumpulkan:empty { display: none; }
.konfig-cb h4 { font-size: 14px; margin: 14px 0 4px; display: flex; align-items: center; gap: 8px; }
.konfig-cb .daftar-periksa li { grid-template-columns: 112px minmax(0, 1fr); }
.id-periksa { white-space: nowrap; }
.meta-konfig { font-size: 13px; }
.akar-kepala { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.daftar-akar { margin: 0; padding: 0 0 0 26px; display: grid; gap: 8px; }
.daftar-akar > li { border: 1px solid var(--garis); border-radius: 8px; padding: 8px 12px; font-size: 14px; background: var(--latar); }
.daftar-akar > li::marker { color: var(--redup); font-weight: 700; }
.daftar-akar > li.gagal { box-shadow: inset 3px 0 0 var(--bahaya); }
.daftar-akar > li.peringatan { box-shadow: inset 3px 0 0 var(--lain); }
.daftar-akar p { margin: 4px 0 0; overflow-wrap: anywhere; }
.daftar-akar .tindakan { color: var(--redup); }
.daftar-akar.padat > li { padding: 6px 10px; }
.blok-konfig { display: grid; gap: 8px; }
.blok-konfig .baris-tombol.kiri { margin-top: 0; }
table.perbedaan, table.kebijakan-cb { font-size: 13px; }
table.perbedaan td, table.kebijakan-cb td { vertical-align: top; overflow-wrap: anywhere; }
table.kebijakan-cb td.c-ringkas { max-width: 360px; }
table.kebijakan-cb td.c-skema { white-space: nowrap; }
details.blok-mentah { border: 1px solid var(--garis); border-radius: 8px; padding: 4px 12px; margin-top: 8px; }
details.blok-mentah[open] { padding-bottom: 10px; }
details.blok-mentah summary { cursor: pointer; color: var(--aksen); font-weight: 600; font-size: 14px; padding: 6px 0; }
details.blok-mentah > p { margin: 0 0 8px; }
.daftar-mono { margin: 0; padding-left: 20px; }
ul.daftar-galat { padding-left: 30px; margin: 0; }
.catatan-privasi { margin: 20px 0 0; padding-top: 10px; border-top: 1px solid var(--garis); }

@media (max-width: 560px) {
  .kisi-armada { grid-template-columns: minmax(0, 1fr); }
  /* Armada: kartu bertumpuk per CB. */
  table.armada thead { display: none; }
  table.armada tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nama nama" "model model" "versi eks" "aue aue" "status status" "jumlah waktu";
    gap: 4px 10px; padding: 10px 8px; border-bottom: 1px solid var(--garis); }
  table.armada td { border: 0; padding: 0; min-width: 0; }
  table.armada tr.st-gagal td:first-child, table.armada tr.st-peringatan td:first-child { box-shadow: none; }
  table.armada tr.st-gagal { box-shadow: inset 3px 0 0 var(--bahaya); }
  table.armada tr.st-peringatan { box-shadow: inset 3px 0 0 var(--lain); }
  table.armada td.c-nama { grid-area: nama; min-width: 0; font-weight: 600; }
  table.armada td.c-status { grid-area: status; max-width: none; min-width: 0; }
  table.armada td.c-aue { min-width: 0; }
  table.armada td.c-model { grid-area: model; min-width: 0; color: var(--redup); }
  table.armada td.c-versi { grid-area: versi; } table.armada td.c-eks { grid-area: eks; text-align: right; }
  table.armada td.c-aue { grid-area: aue; }
  table.armada td.c-nama { max-width: none; }
  table.armada td.c-jumlah { grid-area: jumlah; } table.armada td.c-waktu { grid-area: waktu; text-align: right; }
  table.armada td.c-versi .tumpuk { display: inline-flex; vertical-align: top; }
  table.armada .label-hp, table.perbedaan .label-hp { display: inline; color: var(--redup); font-size: 12px; font-family: var(--huruf); }
  /* Perbedaan dan kebijakan: kartu per butir. */
  table.perbedaan thead, table.kebijakan-cb thead { display: none; }
  table.perbedaan tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label tingkat" "acuan acuan" "ini ini"; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--garis); }
  table.perbedaan td { border: 0; padding: 0; }
  table.perbedaan td.c-label { grid-area: label; font-weight: 600; } table.perbedaan td.c-tingkat { grid-area: tingkat; }
  table.perbedaan td.c-acuan { grid-area: acuan; } table.perbedaan td.c-ini { grid-area: ini; }
  table.kebijakan-cb tr { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--garis); }
  table.kebijakan-cb td { border: 0; padding: 0; max-width: none; }
  table.kebijakan-cb td.c-skema { white-space: normal; font-weight: 600; }
  .konfig-cb .daftar-periksa li { grid-template-columns: 1fr; }
  .konfig-cb .info-perangkat { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 4px 10px; }
  .konfig-cb .info-perangkat dt { overflow-wrap: anywhere; }
  .daftar-akar { padding-left: 20px; }
}
table.armada .galat-teks { font-weight: 600; }
table.armada td.c-nama .kecil { font-weight: 400; }

/* ---------- Peringatan Kritis/Serius (guru selama les, admin 07.00–21.00 WIB) ---------- */
.peringatan-les { background: var(--permukaan); border: 1px solid var(--lain); box-shadow: inset 4px 0 0 var(--lain);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.peringatan-les.ada-kritis { border-color: var(--bahaya); box-shadow: inset 4px 0 0 var(--bahaya), 0 0 0 1px var(--bahaya); }
.peringatan-les.tipis { border-color: var(--garis); box-shadow: none; padding: 10px 14px; }
.peringatan-tipis { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.peringatan-tipis p { margin: 0; flex: 1 1 320px; max-width: 80ch; }
.peringatan-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.peringatan-kepala h2 { display: flex; align-items: center; gap: 8px; color: var(--lain); }
.peringatan-les.ada-kritis .peringatan-kepala h2 { color: var(--bahaya); }
.peringatan-kepala p { margin: 2px 0 0; }
.peringatan-ikon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: currentColor; font-size: 14px; font-weight: 800; }
.peringatan-ikon { -webkit-text-fill-color: var(--permukaan); }
.daftar-peringatan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.peringatan-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 12px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--garis); background: var(--latar); }
.peringatan-item.kritis { background: var(--bahaya-bg); border-color: var(--bahaya); }
.peringatan-item.peringatan { background: var(--lain-bg); border-color: var(--lain); }
.peringatan-item .tanda { background: var(--permukaan); }
.peringatan-isi { min-width: 0; }
.peringatan-isi > b { overflow-wrap: anywhere; }
.peringatan-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.peringatan-rinci { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.peringatan-les > p.kecil { margin: 8px 0 0; }
@media (max-width: 560px) {
  .peringatan-item { grid-template-columns: minmax(0, 1fr) auto; }
  .peringatan-item .peringatan-tanda { grid-column: 1 / -1; }
  .peringatan-kepala .baris-tombol { justify-content: flex-start; }
}

/* ---------- v3.2: kinerja, laporan, masalah, pengaturan ---------- */
.peringatan-aksi { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.peringatan-aksi:empty { display: none; }
textarea.teks-biasa { font-family: var(--huruf); font-size: 14px; background: var(--permukaan); }
input[aria-invalid="true"] { border-color: var(--bahaya); box-shadow: 0 0 0 1px var(--bahaya); }
.kosong.kosong-pendek { padding: 18px 16px; }
.ringkas-chip.rapat { margin: 0; }
.jarak-atas { margin-top: 18px; }
.panel > h3 { margin: 16px 0 8px; }
.kepala-laporan .panel-kepala p { margin: 4px 0 0; }
.segar { margin: 4px 0 0; }
.kinerja-basi { margin: 0 0 14px; border-left: 4px solid var(--bahaya); font-size: 15px; }
.ringkas-analisis { margin: 6px 0 0; font-size: 14px; padding: 8px 10px; border-radius: 8px; background: var(--permukaan); border: 1px solid var(--garis); overflow-wrap: anywhere; }
.diag .ringkas-analisis { background: var(--cekung); }

/* Ubin SLO */
.status-layanan { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 0 0 6px; }
.status-layanan > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.kelompok-ubin h3 { font-size: 13px; color: var(--redup); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px; }
.kisi-ubin { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ubin { font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-width: 0; padding: 10px 12px 10px 14px; border-radius: 10px; border: 1px solid var(--garis); background: var(--latar); box-shadow: inset 4px 0 0 var(--mati); }
.ubin:hover { border-color: var(--redup); }
.ubin.st-ok { box-shadow: inset 4px 0 0 var(--aktif); }
.ubin.st-peringatan { box-shadow: inset 4px 0 0 var(--lain); border-color: var(--lain); }
.ubin.st-gagal { box-shadow: inset 4px 0 0 var(--bahaya); border-color: var(--bahaya); }
.ubin .tanda { background: var(--permukaan); }
.ubin-kepala { display: flex; gap: 6px; align-items: baseline; font-size: 13px; line-height: 1.3; max-width: 100%; }
.ubin-kode { font: 700 12px var(--mono); color: var(--redup); flex: none; }
.ubin-judul { font-weight: 600; overflow-wrap: anywhere; }
.ubin-nilai { display: flex; align-items: baseline; gap: 3px; }
.ubin-nilai b { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ubin-nilai .satuan { font-size: 13px; color: var(--redup); }
.ubin-target { font-size: 12px; color: var(--redup); line-height: 1.35; }
.garis-kecil { display: block; width: 100%; height: 28px; overflow: visible; }
.garis-kecil path { fill: none; stroke: var(--redup); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.anggaran { display: block; width: 100%; font-size: 12px; color: var(--redup); }
.anggaran b { color: var(--teks); }
.anggaran-batang { display: block; height: 6px; margin-top: 3px; border-radius: 3px; background: var(--cekung); overflow: hidden; border: 1px solid var(--garis); }
.anggaran-batang > span { display: block; height: 100%; border-radius: 3px; background: var(--aktif); }
.anggaran.peringatan .anggaran-batang > span { background: var(--lain); }
.anggaran.gagal .anggaran-batang > span { background: var(--bahaya); }
.anggaran.gagal b { color: var(--bahaya); }
.daftar-anggaran { display: grid; gap: 10px; max-width: 520px; }
.daftar-anggaran .anggaran { font-size: 14px; }
.daftar-anggaran .anggaran-batang { height: 8px; }

/* Sesi berjalan */
table.sesi-kinerja { min-width: 680px; }
table.sesi-kinerja td { vertical-align: top; }
table.sesi-kinerja td:first-child { min-width: 150px; }
.corong { display: grid; gap: 5px; min-width: 220px; }
.corong-batang { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--cekung); }
.corong-batang > span { min-width: 4px; }
.corong-batang .ok, .contoh-warna.ok { background: var(--aktif); }
.corong-batang .tak-tahu, .contoh-warna.tak-tahu { background: var(--mati); }
.corong-batang .peringatan, .contoh-warna.peringatan { background: var(--lain); }
.corong-batang .gagal, .contoh-warna.gagal { background: var(--bahaya); }
.corong-legenda { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.corong-legenda > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.corong-legenda b { color: var(--teks); font-variant-numeric: tabular-nums; }
.corong-legenda .nol { opacity: .65; }
.contoh-warna { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }

/* Grafik */
details.tren-kinerja > summary { cursor: pointer; list-style-position: outside; padding: 2px 0; }
details.tren-kinerja > summary .judul-ringkas { font-size: 18px; font-weight: 700; }
details.tren-kinerja[open] > summary { margin-bottom: 8px; }
.kisi-grafik { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 10px; }
.grafik { margin: 0; min-width: 0; }
.grafik figcaption { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.grafik-bungkus { position: relative; }
.grafik-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.grafik-svg .kisi { stroke: var(--garis); stroke-width: 1; }
.grafik-svg .label-y, .grafik-svg .label-x, .grafik-svg .label-target { font: 10px var(--huruf); fill: var(--redup); }
.grafik-svg .garis-target { stroke: var(--redup); stroke-width: 1; stroke-dasharray: 2 3; }
.grafik-svg .seri { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafik-svg .seri-0 { stroke: var(--aksen); }
.grafik-svg .seri-1 { stroke: var(--teks); opacity: .6; }
.grafik-svg .putus { stroke-dasharray: 5 4; }
.grafik-svg .titik { stroke: var(--permukaan); stroke-width: 2; }
.grafik-svg .titik.seri-0 { fill: var(--aksen); }
.grafik-svg .titik.seri-1 { fill: var(--redup); }
.grafik-svg .silang { stroke: var(--redup); stroke-width: 1; }
.grafik-svg .penanda line { stroke: var(--lain); stroke-width: 1; stroke-dasharray: 3 2; }
.grafik-svg .penanda path { fill: var(--lain); }
.grafik-svg .penanda .kena { stroke: transparent; stroke-width: 10; stroke-dasharray: none; }
.grafik-tip { position: absolute; top: 0; z-index: 2; pointer-events: none; min-width: 150px; max-width: 260px; padding: 6px 9px; border-radius: 8px;
  background: var(--permukaan); border: 1px solid var(--garis); box-shadow: 0 6px 18px rgb(0 0 0 / .14); font-size: 12px; line-height: 1.45; }
.grafik-tip b { display: block; }
.tip-ubah { color: var(--lain); font-weight: 600; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.contoh-garis { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--aksen); vertical-align: middle; margin-right: 4px; }
.contoh-garis.seri-1 { border-top-color: var(--teks); opacity: .6; }
.contoh-garis.putus { border-top-style: dashed; }
.contoh-garis.target { border-top: 1px dotted var(--redup); }
.contoh-penanda { color: var(--lain); font-size: 11px; }

/* Insiden */
.daftar-kpi, .daftar-ubah, .daftar-santri, .daftar-blokir, .riwayat-masalah, .daftar-penerima, .daftar-keadaan, .alur-masalah { list-style: none; margin: 0; padding: 0; }
.daftar-kpi { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 14px; }
.daftar-kpi li { display: inline-flex; align-items: center; gap: 4px; }
.daftar-ubah { display: grid; gap: 6px; font-size: 14px; }
.daftar-ubah li { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--garis); }
.daftar-ubah li > span:last-child { overflow-wrap: anywhere; }
.daftar-santri { display: grid; gap: 0; }
.daftar-santri li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--garis); }
.daftar-santri li > div { min-width: 0; overflow-wrap: anywhere; }
.daftar-tindakan { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 14px; }
table.dimensi td { vertical-align: top; }
table.linimasa tr.sorot td { background: var(--bahaya-bg); }
.pasca { border: 1px solid var(--garis); border-radius: 8px; padding: 12px 14px; background: var(--cekung); }
.pasca ul { margin: 0; padding-left: 18px; }

/* Laporan */
.segmen { display: inline-flex; border: 1px solid var(--garis); border-radius: 8px; overflow: hidden; }
.segmen button { font: inherit; font-size: 14px; border: 0; background: var(--permukaan); color: var(--redup); padding: 7px 14px; cursor: pointer; }
.segmen button + button { border-left: 1px solid var(--garis); }
.segmen button[aria-pressed="true"] { background: var(--aksen); color: var(--aksen-teks); font-weight: 600; }
.laporan-cetak { margin-top: 14px; }
.kepala-laporan .panel-kepala { margin-bottom: 0; }
.kepala-laporan > p.kecil { margin: 8px 0 0; }
table.slo td { vertical-align: top; }
table.slo td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.batang-pareto { display: inline-block; width: 60px; height: 8px; border-radius: 4px; background: var(--cekung); overflow: hidden; vertical-align: middle; }
.batang-pareto > span { display: block; height: 100%; background: var(--mati); }
table.tren-bulan tr.sorot td { font-weight: 700; background: var(--aksen-lembut); }
.bagian-laporan .ringkas { margin-bottom: 10px; }

/* Masalah */
.alur-masalah { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.alur-masalah li { display: inline-flex; align-items: center; gap: 6px; }
.alur-masalah li + li::before { content: "→"; color: var(--redup); }
.tata-masalah { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.tata-masalah > .panel + .panel { margin-top: 0; }
.kelompok-masalah + .kelompok-masalah { margin-top: 6px; }
.kelompok-masalah h3 { margin: 4px 0 8px; display: flex; align-items: center; gap: 6px; }
.daftar-masalah { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.butir-masalah { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 3px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--garis); background: var(--latar); }
.butir-masalah:hover { border-color: var(--redup); }
.butir-masalah.dipilih { border-color: var(--aksen); box-shadow: inset 4px 0 0 var(--aksen); background: var(--aksen-lembut); }
.butir-masalah-kepala { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.butir-masalah-kepala b { overflow-wrap: anywhere; }
.detail-masalah textarea { margin-bottom: 4px; }
.detail-masalah label { margin-top: 8px; }
.detail-masalah .panel-kepala h2 { overflow-wrap: anywhere; }
/* Tindakan: satu kartu per baris (teks di atas; PJ, tenggat, hapus di bawah) supaya muat di panel detail yang sempit. */
table.tindakan, table.tindakan tbody { display: block; }
table.tindakan thead { display: none; }
table.tindakan tr { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 11em) auto; grid-template-areas: "selesai teks teks teks" ". pj tenggat hapus";
  gap: 6px 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--garis); }
table.tindakan td { border: 0; padding: 0; min-width: 0; }
table.tindakan td.c-selesai { grid-area: selesai; } table.tindakan td.c-teks { grid-area: teks; } table.tindakan td.c-pj { grid-area: pj; }
table.tindakan td.c-tenggat { grid-area: tenggat; } table.tindakan td.c-hapus { grid-area: hapus; }
table.tindakan input[type="text"], table.tindakan input[type="date"] { width: 100%; min-width: 0; }
table.tindakan td.c-tenggat .kecil { display: block; }
table.tindakan .label-hp { display: inline; font-weight: 500; }
.riwayat-masalah { display: grid; font-size: 14px; }
.riwayat-masalah li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--garis); }
@media (min-width: 900px) {
  /* 12 tab admin: dibungkus ke baris kedua di layar lebar supaya semua terlihat; di HP tetap digulir. */
  .tab.tab-admin { flex-wrap: wrap; overflow: visible; row-gap: 0; }
  .tab.tab-admin button { padding: 9px 12px; }
  .tata-masalah { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
}

/* Pengaturan */
.daftar-penerima { display: grid; gap: 6px; max-width: 520px; margin-top: 8px; }
.daftar-penerima li { display: flex; gap: 8px; align-items: center; }
.daftar-penerima input { flex: 1 1 auto; min-width: 0; }
.isian-kurs input { max-width: 200px; }
.hasil-sinkron p { margin: 6px 0 0; }
.daftar-keadaan { display: grid; gap: 8px; font-size: 14px; }
.daftar-keadaan li { line-height: 1.6; }

/* Diagnosis: galat dikenal */
.galat-dikenal { display: grid; gap: 8px; margin-top: 10px; }
.galat-dikenal-item { border: 1px solid var(--lain); border-radius: 10px; padding: 10px 14px; background: var(--lain-bg); box-shadow: inset 4px 0 0 var(--lain); }
.galat-dikenal-item p { margin: 4px 0 0; color: var(--teks); }
.galat-dikenal-item .tanda { background: var(--permukaan); }
.galat-dikenal-item .baris-tombol.kiri { margin-top: 8px; }

/* Laporan per sesi */
table.laporan-santri { min-width: 560px; }
.daftar-blokir { display: grid; gap: 4px; counter-reset: blokir; font-size: 14px; }
.daftar-blokir li { counter-increment: blokir; }
.daftar-blokir li::before { content: counter(blokir) ". "; color: var(--redup); }

@media (max-width: 560px) {
  .kisi-ubin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ubin { padding: 9px 10px 9px 12px; }
  .ubin-nilai b { font-size: 22px; }
  .ubin .tanda { white-space: normal; font-size: 11px; padding-right: 8px; }
  .kinerja .ringkas-analisis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
  .peringatan-item .peringatan-aksi { grid-column: 1 / -1; justify-content: flex-start; }
  .kisi-grafik { grid-template-columns: minmax(0, 1fr); }
  .daftar-ubah li { grid-template-columns: max-content minmax(0, 1fr); }
  .daftar-ubah li > span:last-child { grid-column: 1 / -1; }
  .riwayat-masalah li { grid-template-columns: minmax(0, 1fr); }
  .segmen button { padding: 7px 11px; }
  .kontrol.filter .label-sebaris { flex-wrap: wrap; }
  table.tindakan tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto; grid-template-areas: "selesai selesai selesai" "teks teks teks" "pj tenggat hapus"; }
  /* Laporan per sesi: kartu per santri supaya hasilnya terlihat tanpa menggulir ke samping. */
  table.laporan-santri { min-width: 0; }
  table.laporan-santri thead { display: none; }
  table.laporan-santri tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "nama nama aksi" "hasil hasil hasil" "buka les .";
    gap: 4px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--garis); }
  table.laporan-santri td { border: 0; padding: 0; min-width: 0; }
  table.laporan-santri td.c-nama { grid-area: nama; overflow-wrap: anywhere; font-weight: 600; }
  table.laporan-santri td.c-nama .kecil { font-weight: 400; }
  table.laporan-santri td.c-aksi { grid-area: aksi; justify-self: end; }
  table.laporan-santri td.c-hasil { grid-area: hasil; }
  table.laporan-santri td.c-buka { grid-area: buka; } table.laporan-santri td.c-les { grid-area: les; }
  table.laporan-santri .label-hp { display: inline; color: var(--redup); font-size: 12px; }
}

@media print {
  :root { --latar: #fff; --permukaan: #fff; --cekung: #f3f4f4; --teks: #000; --redup: #444; --garis: #bbb; --aksen: #0f6e56; --aksen-lembut: #eef6f3;
    --aktif: #0f6e56; --aktif-bg: #e1f2ec; --lain: #8a5a00; --lain-bg: #fff3d6; --mati: #555; --mati-bg: #eceff0; --bahaya: #b42318; --bahaya-bg: #fdecea; color-scheme: light; }
  body { background: var(--permukaan); color: var(--teks); font-size: 12px; }
  .bilah, .tab, #peringatan, .kepala-halaman, .no-print, .toast, .lewati, dialog, button, .tombol { display: none !important; }
  main { max-width: none; padding: 0; }
  .panel { border: 1px solid var(--garis); border-radius: 6px; padding: 10px 12px; break-inside: avoid; }
  .panel + .panel { margin-top: 10px; }
  .laporan-cetak { margin-top: 0; }
  .bungkus-tabel { overflow: visible; }
  table { font-size: 11px; }
  th, td { padding: 4px 6px; }
  .kecil, .mono { font-size: 10px; }
  a { color: inherit; text-decoration: none; }
  .tanda, .tanda-ikon, .anggaran-batang > span, .batang-pareto > span, .chip-ringkas { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* v3.3.5: urut dan cari tabel */
.bar-cari-tabel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 8px; }
.cari-tabel { flex: 1 1 220px; max-width: 360px; padding: 7px 10px; border: 1px solid var(--garis); border-radius: 8px; background: var(--permukaan); color: var(--teks); font: inherit; font-size: 14px; }
.cari-tabel:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.hitung-cari { color: var(--redup); }
/* v3.59.1 (P2S R2, komponen bersama): isian Cari di tabel 44 px di HP (pedoman 1.15: tombol HP 44 px). Belum ada token ukuran sentuh; angka sama dengan aturan 44 px lain. */
@media (max-width: 640px) { .cari-tabel { min-height: 44px; } }
th.bisa-urut { cursor: pointer; user-select: none; white-space: nowrap; }
th.bisa-urut:hover { color: var(--teks); }
th.bisa-urut:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
th.bisa-urut::after { content: ' ↕'; opacity: .35; }
th.bisa-urut[aria-sort="ascending"]::after { content: ' ↑'; opacity: 1; }
th.bisa-urut[aria-sort="descending"]::after { content: ' ↓'; opacity: 1; }
table.siapkan-ou td.c-aksi { text-align: right; }
/* v3.3.5: tabel panjang (Kebijakan santri) bergulir di tempat dengan judul kolom menempel. */
.bungkus-tabel.tinggi-terbatas { max-height: 65vh; overflow: auto; }
.bungkus-tabel.tinggi-terbatas thead th { position: sticky; top: 0; z-index: 1; background: var(--permukaan); }

/* v3.3.5: beranda */
.beranda-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.beranda-kepala h1 { font-size: 26px; letter-spacing: -.01em; }
.beranda-sub { margin: 6px 0 0; color: var(--redup); max-width: 60ch; }
.beranda-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.angka-ringkas { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.angka-ringkas b { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.angka-ringkas span { font-size: 13px; color: var(--redup); }
.angka-ringkas.hidup b { color: var(--aktif); }
.angka-ringkas.awas b { color: var(--lain); }
.beranda-alat { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.cari-beranda { flex: 1 1 240px; max-width: 360px; padding: 9px 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); color: var(--teks); font: inherit; }
.cari-beranda:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.segmen { display: inline-flex; gap: 2px; padding: 3px; background: var(--cekung); border: 1px solid var(--garis); border-radius: 10px; flex-wrap: wrap; }
.segmen button { font: inherit; font-size: 14px; border: 0; background: transparent; color: var(--redup); padding: 6px 12px; border-radius: 7px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.segmen button[aria-checked="true"] { background: var(--permukaan); color: var(--teks); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.segmen-n { font-size: 12px; color: var(--redup); font-variant-numeric: tabular-nums; }
.kisi-grup { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.kartu-grup { position: relative; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kartu-grup:has(.tautan-kartu):hover { border-color: var(--aksen); box-shadow: 0 4px 14px rgba(0,0,0,.06); transform: translateY(-1px); }
.kartu-grup:focus-within { border-color: var(--fokus); }
.kartu-grup.berjalan { border-color: var(--aktif); box-shadow: inset 3px 0 0 var(--aktif); }
.kartu-grup.belum { border-style: dashed; }
.kartu-grup-atas { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kartu-grup h2 { font-size: 17px; }
.tautan-kartu { color: inherit; text-decoration: none; }
.tautan-kartu::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.tautan-kartu:focus-visible { outline: none; }
.kartu-grup-email { font-size: 13px; color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu-grup-bawah { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; min-height: 30px; }
.kartu-grup-bawah .tombol { position: relative; z-index: 1; }
.status-diam { font-size: 13px; color: var(--redup); }
.aksi-kartu { font-size: 14px; font-weight: 600; color: var(--aksen); white-space: nowrap; }
.aksi-kartu.utama { background: var(--aksen); color: var(--aksen-teks); padding: 6px 12px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .kartu-grup { transition: none; } .kartu-grup:has(.tautan-kartu):hover { transform: none; } }
@media (max-width: 560px) {
  .beranda-kepala h1 { font-size: 22px; }
  .beranda-ringkas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .angka-ringkas { padding: 10px 12px; }
  .angka-ringkas b { font-size: 22px; }
  .angka-ringkas span { font-size: 12px; }
  .kartu-grup { padding: 14px 14px 12px; }
  .kartu-grup-bawah { margin-top: 8px; }
  .cari-beranda { max-width: none; }
}

/* ================= v3.4: desain FIWA ================= */
.tombol { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; padding: 8px 16px; transition: background .15s, border-color .15s; }
.tombol:not(.halus):not(.bahaya):hover:not(:disabled) { background: var(--aksen-tua); border-color: var(--aksen-tua); }
.tombol.halus { border-color: var(--garis-kuat); background: var(--permukaan); }
.tombol.halus:hover:not(:disabled) { background: var(--cekung); }
.tombol.kecil-t { min-height: 32px; }
/* v3.59.1 (P2S R2, komponen bersama): tombol biasa (Simpan dan sejenisnya) 44 px di HP; .kecil-t tetap 32 px. */
@media (max-width: 640px) { .tombol:not(.kecil-t) { min-height: 44px; } }
/* [QT7-4 K-5] Pengecualian .kecil-t di atas tidak berlaku di wilayah yang kanvasnya menetapkan 44 px di HP: panel sesi P1-A (kanvas
   papan 9, Hp.dc.html: .tombol termasuk .halus 44 px; Longgarkan untuk materi ini…, Akhiri pelonggaran) dan dialog menyalakan
   Statistik santri P2 (semua tombol dan isian dialog 44 px; tautan Ubah paragraf di Teks privasi). Tanpa warna; hanya tinggi. */
@media (max-width: 640px) {
  .p1a-sesi-wadah .tombol, .kepala-sesi-u3 .tombol, .p1a-pil-sesi .tombol, .p1a-pil-sesi button { min-height: 44px; }
  dialog.p2s-dialog-nyala button.tautan { min-height: 44px; display: inline-flex; align-items: center; }
}
.tombol.teks-bahaya { color: var(--bahaya); border-color: color-mix(in srgb, var(--bahaya) 35%, transparent); }
.tombol:disabled { opacity: 1; background: var(--cekung); border-color: var(--cekung); color: var(--redup); }
.panel { border-radius: var(--radius); padding: 20px; }
.panel-rapat { padding: 0; overflow: hidden; }
.panel-kepala.garis { padding: 16px 20px; margin: 0; border-bottom: 1px solid var(--garis); }
.panel-kaki { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--garis); background: var(--cekung); }
.pil { padding: 4px 10px; }
.pil.info { color: var(--info); background: var(--info-bg); }
.pil.aktif-gelap { color: var(--gelap); background: var(--emas); }
.mono { font-family: var(--mono); }
.jejak { color: var(--redup); text-decoration: none; font-weight: 500; }
.jejak:hover { color: var(--teks); }

/* Bilah atas */
.bilah { padding: 10px 24px; min-height: 64px; }
.merek { display: inline-flex; align-items: center; gap: 10px; }
.merek-tanda { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--aksen); color: var(--aksen-teks); font: 700 10px/1 var(--huruf); letter-spacing: .06em; }
.merek-tanda.besar { width: 48px; height: 48px; font-size: 12px; border-radius: 12px; }
.merek-teks { display: flex; flex-direction: column; line-height: 1.15; }
.merek-teks b { font-size: 15px; }
.merek-teks small { font-size: 11px; color: var(--redup); font-weight: 500; letter-spacing: .01em; }
.lonceng { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--garis); }
.akun { position: relative; }
.akun summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 4px; border: 1px solid var(--garis); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--teks); }
.akun summary::-webkit-details-marker { display: none; }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--aksen-lembut); color: var(--aksen-tua); font-size: 12px; font-weight: 700; }
.akun-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; box-shadow: 0 12px 32px rgb(14 26 23 / .14); padding: 14px; display: flex; flex-direction: column; gap: 12px; z-index: 20; }
.akun-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--redup); }
.akun-info b { font-size: 15px; color: var(--teks); }

/* Halaman masuk (v3.29.12: kanvas disetujui 9 Okt; satu blok, menggantikan aturan lama yang tersebar) */
body.di-masuk .bilah { display: none; }
body.di-masuk main { max-width: none; padding: 0; }
.masuk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.masuk-merek { background: linear-gradient(180deg, var(--gelap) 0%, var(--gelap-2) 100%); color: var(--di-gelap); padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.masuk-logo { display: block; width: 168px; height: auto; background: var(--latar-logo); border-radius: 16px; padding: 14px 16px; box-shadow: var(--bayang); }
.masuk-lambang, .masuk-nama { display: none; }
.masuk-pesan { max-width: 520px; display: flex; flex-direction: column; gap: 14px; }
.masuk-pesan p { margin: 0; }
.masuk-pesan .arab { font-family: var(--arab); font-size: 28px; color: var(--emas); text-align: left; }
.masuk-pesan .masuk-slogan { font-size: 38px; line-height: 1.15; font-weight: 700; color: var(--di-gelap); text-wrap: balance; }
.masuk-ket-merek { font-size: 16px; color: var(--gelap-redup); }
.masuk-kaki { margin: 0; font-size: 13px; color: var(--gelap-samar); }
.masuk-form { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 24px; gap: 24px; }
.masuk-kartu { width: 100%; max-width: 400px; box-sizing: border-box; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--bayang); }
.masuk-kartu h1 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; }
.masuk-kartu p { margin: 0; }
.masuk-kartu .pesan { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.masuk-kartu .blok-tolak p { margin: 0; }
#tombol-google { min-height: 40px; }
#tombol-google:empty { display: none; }
.masuk-memuat { display: flex; flex-direction: column; gap: 8px; }
.masuk-memuat .kerangka > div { height: 40px; border-radius: 4px; }
.masuk-gagal .tombol { align-self: flex-start; }
.catatan-masuk { font-size: 13px; color: var(--teks-2); background: var(--cekung); border-radius: 10px; padding: 12px 14px; }
.masuk-bawah { display: none; }
@media (max-width: 860px) {
  /* Satu kolom (HP, tablet, HP dengan zoom atau mode situs desktop): pita gelap pendek berisi lambang dan nama,
     kartu masuk di layar pertama, slogan pindah ke bawah kartu. v3.29.13: dulu hanya ≤ 640 px. */
  .masuk { grid-template-columns: 1fr; min-height: 0; }
  .masuk-merek { padding: 20px 16px 56px; gap: 12px; justify-content: flex-start; }
  .masuk-logo, .masuk-kaki, .masuk-slogan, .masuk-ket-merek { display: none; }
  .masuk-identitas { display: flex; align-items: center; gap: 12px; }
  .masuk-lambang { display: block; width: 44px; height: 44px; background: var(--latar-logo); border-radius: 12px; padding: 4px; box-sizing: border-box; }
  .masuk-nama { display: flex; flex-direction: column; line-height: 1.25; }
  .masuk-nama b { font-size: 17px; }
  .masuk-nama small { font-size: 13px; color: var(--gelap-redup); }
  .masuk-pesan .arab { font-size: 20px; }
  .masuk-form { padding: 0 16px 32px; margin-top: -40px; justify-content: flex-start; }
  .masuk-kartu { padding: 24px 20px; gap: 14px; max-width: 480px; }
  .masuk-kartu h1 { font-size: 22px; text-wrap: balance; }
  .masuk-kartu .pilih-bahasa button { min-height: 36px; }
  .masuk-bawah { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; width: 100%; max-width: 480px; box-sizing: border-box; }
  .masuk-bawah p { margin: 0; font-size: 14px; color: var(--teks-2); }
  .masuk-bawah .masuk-slogan { display: block; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--teks); text-wrap: balance; }
  .masuk-bawah .kecil { margin-top: 8px; }
}

/* Sapaan dan waktu sholat */
.kepala-sapa { align-items: flex-end; margin-bottom: 22px; }
.kepala-sapa h1 { font-size: 30px; }
.tanggal-sapa { margin: 0 0 6px !important; font-size: 14px; color: var(--redup); }
.kartu-sholat { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--permukaan); border: 1px solid var(--garis); }
.kartu-sholat div { display: flex; flex-direction: column; line-height: 1.3; }
.kartu-sholat b { font-size: 14px; }
.kartu-sholat span { font-size: 12px; color: var(--redup); }
.kartu-sholat .ikon-sholat { color: var(--aksen); display: inline-flex; }
.kartu-sholat.awas { border-color: color-mix(in srgb, var(--lain) 40%, transparent); background: var(--lain-bg); }
.kartu-sholat.awas span, .kartu-sholat.awas .ikon-sholat { color: var(--lain); }

/* Kartu sesi berjalan (gelap, bermotif) */
.kartu-berjalan { position: relative; overflow: hidden; background: var(--gelap); color: var(--di-gelap); border-radius: 18px; padding: 26px 30px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-bottom: 16px; }
.kartu-berjalan .motif { position: absolute; right: -60px; top: -40px; width: 420px; height: 260px; color: var(--di-gelap); opacity: .07; pointer-events: none; }
.kb-isi { position: relative; display: flex; flex-direction: column; gap: 10px; }
.kb-atas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kb-waktu { font-size: 14px; color: var(--gelap-redup); }
.kartu-berjalan h2 { font-size: 24px; font-weight: 700; color: var(--di-gelap); }
.kb-angka { display: flex; gap: 32px; flex-wrap: wrap; }
.kb-angka div { display: flex; flex-direction: column; gap: 2px; }
.kb-angka b { font: 500 30px/1 var(--mono); }
.kb-angka span { font-size: 13px; color: var(--gelap-redup); }
.tombol.tombol-terang { position: relative; background: var(--hijau-terang); border-color: var(--hijau-terang); color: var(--di-emas); min-height: 48px; padding: 0 22px; font-size: 15px; }
.tombol.tombol-terang:hover { background: var(--emas-sorot) !important; border-color: var(--emas-sorot) !important; }

/* Daftar grup (baris) */
.daftar-grup { list-style: none; margin: 0; padding: 0; }
.baris-grup { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 220px 130px; gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--garis); }
.baris-grup:last-child { border-bottom: 0; }
.baris-grup:has(.tautan-kartu):hover { background: var(--cekung); }
.baris-grup.berjalan { box-shadow: inset 3px 0 0 var(--aksen); }
.bg-nama { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bg-nama > a, .bg-nama > span:first-child { font-weight: 600; font-size: 15px; color: var(--teks); text-decoration: none; }
.bg-nama .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-nama .pil { align-self: flex-start; margin-top: 4px; }
.bg-aksi { display: flex; justify-content: flex-end; }
.bg-aksi .tombol, .bg-aksi button { position: relative; z-index: 1; }
/* [v3.62 BD-1] "Mulai sesi"/"Kelola" di daftar ruang adalah span hiasan (aria-hidden) tanpa penangan; klik diteruskan ke tautan kartu di bawahnya. */
.bg-aksi span.tombol { pointer-events: none; }
.baris-grup.bisa-pilih { grid-template-columns: 24px minmax(0, 1fr) 220px 130px; }
.bg-pilih { position: relative; z-index: 1; display: flex; align-items: center; }
.bg-pilih input, .pilih-semua-ruang input { margin: 2px; accent-color: var(--aksen); }
.alat-grup label.pilih-semua-ruang { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; margin: 0; font-weight: 500; }
.tautan-kartu::after { content: ""; position: absolute; inset: 0; }
.alat-grup { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.alat-grup .cari-beranda { max-width: 240px; padding: 7px 12px; }
@media (max-width: 720px) {
  .baris-grup { grid-template-columns: minmax(0, 1fr) auto; }
  .bg-status { grid-column: 1; grid-row: 2; }
  .bg-aksi { grid-column: 2; grid-row: 1 / span 2; }
  .baris-grup.bisa-pilih { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .baris-grup.bisa-pilih .bg-pilih { grid-column: 1; grid-row: 1 / span 2; }
  .baris-grup.bisa-pilih .bg-nama { grid-column: 2; grid-row: 1; }
  .baris-grup.bisa-pilih .bg-status { grid-column: 2; grid-row: 2; }
  .baris-grup.bisa-pilih .bg-aksi { grid-column: 3; grid-row: 1 / span 2; }
  .kartu-berjalan { grid-template-columns: 1fr; padding: 22px; }
  .kepala-sapa h1 { font-size: 24px; }
}

/* Tata letak admin: bilah samping */
body.tata-admin main { max-width: none; padding: 0; }
.tata-admin-isi { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: calc(100vh - 65px); }
.samping-admin { background: var(--gelap); color: var(--gelap-redup); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 65px; height: calc(100vh - 65px); overflow-y: auto; }
.samping-kepala { display: flex; flex-direction: column; padding: 2px 10px 10px; line-height: 1.3; }
.samping-kepala b { color: var(--di-gelap); font-size: 15px; }
.samping-kepala span { font-size: 12px; color: var(--gelap-samar); }
/* v3.36: kelompok berjudul (.nav-kelompok, .nav-judul) diganti tujuh menu akordeon (wilayah nav di bawah). */
.nav-admin { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 9px; font-size: 14px; color: var(--gelap-redup); text-decoration: none; }
.nav-admin:hover { background: var(--gelap-sorot); color: var(--di-gelap); }
.nav-admin.aktif { background: var(--gelap-aktif); color: var(--di-gelap); font-weight: 600; box-shadow: inset 3px 0 0 var(--hijau-terang); }
.nav-admin svg { flex-shrink: 0; opacity: .85; }
.nav-admin span:not(.lencana) { flex: 1; }
.nav-bawah { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--gelap-garis); display: flex; flex-direction: column; gap: 2px; }
.admin-utama { padding: 28px 36px 64px; min-width: 0; max-width: 1280px; }
/* v3.24: di layar ≤900px bilah samping admin menjadi laci dari kiri, dibuka tombol menu di header. */
.tombol-laci { display: none; }
@media (max-width: 900px) {
  .tata-admin-isi { grid-template-columns: 1fr; }
  body.tata-admin .tombol-laci { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -6px; border: 0; border-radius: 10px; background: none; color: var(--teks); cursor: pointer; flex: none; }
  body.tata-admin .tombol-laci:hover { background: var(--cekung); }
  .samping-admin { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: min(310px, 86vw); height: auto; padding: 14px 12px 20px; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; box-shadow: 8px 0 32px rgb(0 0 0 / .25); }
  body.laci-buka .samping-admin { transform: none; visibility: visible; transition: transform .2s ease; }
  body.laci-buka::after { content: ""; position: fixed; inset: 0; z-index: 39; background: rgb(10 34 54 / .45); }
  body.laci-buka { overflow: hidden; }
  .nav-admin { min-height: 44px; font-size: 15px; }
  .admin-utama { padding: 20px 16px 48px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .samping-admin { transition: none; } }

/* Ikhtisar */
.bilah-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; }
.bilah-status.ok { background: var(--aksen-lembut); color: var(--aktif); border: 1px solid color-mix(in srgb, var(--aksen) 25%, transparent); }
.bilah-status.peringatan { background: var(--lain-bg); color: var(--lain); }
.bilah-status.galat { background: var(--bahaya-bg); color: var(--bahaya); }
.kisi-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.kpi-judul { font-size: 13px; color: var(--redup); }
.kpi-nilai { font: 500 30px/1 var(--mono); }
.kpi-nilai small { font: 500 16px var(--mono); color: var(--redup); margin-left: 4px; }
.kpi-ket { font-size: 12px; color: var(--redup); }
.kpi.baik .kpi-ket { color: var(--aksen); }
.meter { display: block; height: 6px; border-radius: 99px; background: var(--cekung); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--aksen); border-radius: 99px; }
.kisi-ikhtisar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.daftar-tindakan, .daftar-berjalan { list-style: none; margin: 0; padding: 0; }
.daftar-tindakan li { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--garis); }
.daftar-tindakan li:last-child { border-bottom: 0; }
.tindakan-teks { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tindakan-teks b { font-size: 14px; }
.tindakan-teks span { font-size: 13px; color: var(--redup); }
.daftar-berjalan li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--garis); }
.daftar-berjalan a { display: flex; flex-direction: column; color: var(--teks); text-decoration: none; }
.kosong-tenang { display: flex; align-items: center; gap: 10px; padding: 22px 20px; color: var(--redup); font-size: 14px; }
.kosong-tenang svg { color: var(--aksen); }
.bilah-peralihan { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 4px 0 12px; }
.seg { display: inline-block; height: 10px; border-radius: 4px; background: var(--garis); }
.seg.siap { background: var(--aksen); } .seg.gagal { background: var(--bahaya-garis); } .seg.belum { background: var(--garis-kuat); } .seg.tanpa, .seg.fplus { background: var(--cekung); border: 1px dashed var(--garis-kuat); }
.legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--teks-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda .seg { width: 12px; height: 12px; }
@media (max-width: 1100px) { .kisi-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kisi-ikhtisar { grid-template-columns: 1fr; } }

/* Tab di dalam halaman tetap dipakai (halaman grup, Kinerja) */
.tab button { font-weight: 500; }
.tab button[aria-selected="true"] { font-weight: 600; }

.merek .merek-tanda { color: var(--aksen-teks); }
.merek .merek-teks b { color: var(--teks); }
.merek .merek-teks small { color: var(--redup); }
a.tombol { display: inline-flex; }

.lipat-baru { margin-bottom: 14px; }
.lipat-baru > summary { list-style: none; display: inline-flex; margin-bottom: 12px; }
.lipat-baru > summary::-webkit-details-marker { display: none; }
.lipat-baru[open] > summary { background: var(--permukaan); color: var(--teks); border-color: var(--garis-kuat); }
@media (max-width: 640px) {
  .bilah { padding: 8px 12px; gap: 8px; }
  .merek-teks small, .tautan-panduan, #akun-nama { display: none; }
  .akun summary { padding: 0 4px; }
  .kanan { gap: 8px; }
}
.ringkas .hitung-besar b { font: 500 30px/1.1 var(--mono); color: var(--teks); }
.ringkas b { font-family: var(--mono); font-weight: 500; }

/* ================= v3.4.1 ================= */
.kampus-pilih { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; margin: 0 4px 4px; background: var(--gelap-2); border-radius: 9px; }
.kampus-pilih button { font: 500 12px var(--huruf); border: 0; border-radius: 7px; padding: 7px 0; background: transparent; color: var(--gelap-redup); cursor: pointer; }
.kampus-pilih button[aria-checked="true"] { background: var(--gelap-aktif); color: var(--di-gelap); font-weight: 600; }
.tombol-cari { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--cekung); color: var(--redup); font: 500 14px var(--huruf); cursor: pointer; min-width: 200px; }
.tombol-cari span { flex: 1; text-align: left; }
.tombol-cari kbd, .palet kbd { font: 12px var(--mono); border: 1px solid var(--garis); border-radius: 6px; padding: 1px 6px; color: var(--redup); background: var(--permukaan); }
.palet { padding: 0; max-width: 620px; width: calc(100% - 32px); margin-top: 12vh; border-radius: 14px; overflow: hidden; }
.palet-cari { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--garis); color: var(--redup); }
.palet-cari input { flex: 1; border: 0; outline: 0; padding: 4px 0; font-size: 16px; background: transparent; }
.palet-hasil { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.palet-hasil li { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 9px; cursor: pointer; }
.palet-hasil li[aria-selected="true"] { background: var(--aksen-lembut); }
.palet-hasil li .kecil { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.palet-jenis { font: 600 11px var(--huruf); text-transform: uppercase; letter-spacing: .06em; color: var(--redup); min-width: 64px; }
.palet-kosong { color: var(--redup); justify-content: center; cursor: default !important; }
.laci { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(440px, 100%); max-width: none; border: 0; border-left: 1px solid var(--garis); border-radius: 0; padding: 24px; display: none; }
.laci[open] { display: flex; flex-direction: column; gap: 18px; }
.laci-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.laci-kepala p { margin: 4px 0 0; }
.laci-isi { display: flex; flex-direction: column; gap: 16px; }
.baris-pil { display: flex; gap: 8px; flex-wrap: wrap; }
.info-laci { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; margin: 0; font-size: 14px; }
.info-laci dt { color: var(--redup); }
.info-laci dd { margin: 0; }
.laci-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
button.tautan.nama-laci { font: 600 15px var(--huruf); color: var(--teks); padding: 0; text-align: left; }
.teks-lain { color: var(--lain); font-weight: 600; }
.sub-ou summary { cursor: pointer; color: var(--lain); font-weight: 600; }
.sub-ou ul { margin: 4px 0 0; padding-left: 18px; }
@media (max-width: 860px) { .tombol-cari { min-width: 0; } .tombol-cari span, .tombol-cari kbd { display: none; } }

/* ================= v3.4.2: logo FIWA dan warna biru-emas ================= */
.merek-lambang { width: 40px; height: 40px; border-radius: 10px; background: var(--latar-logo); object-fit: contain; padding: 2px; box-shadow: 0 0 0 1px var(--garis); }
/* v3.30.3 (sisa audit 5.13): logo pendamping Digispace (ekstensi 2.7.0) kecil di samping lambang sekolah. */
.merek-pendamping { display: inline-flex; margin-left: -4px; }
.merek-pendamping img { width: 24px; height: 24px; display: block; }
@media (max-width: 640px) { .merek-pendamping { display: none; } }
.bilah-status.ok { background: var(--aktif-bg); color: var(--aktif); border-color: color-mix(in srgb, var(--aktif) 25%, transparent); }
.kpi.baik .kpi-ket { color: var(--aktif); }
.seg.siap { background: var(--aktif); }
.kosong-tenang svg { color: var(--aktif); }
.nav-admin:hover { background: var(--gelap-sorot); }
.nav-admin.aktif { background: var(--gelap-aktif); box-shadow: inset 3px 0 0 var(--emas); }
.kampus-pilih { background: var(--gelap-2); }
.kampus-pilih button[aria-checked="true"] { background: var(--gelap-aktif); }
.nav-bawah { border-top-color: var(--gelap-garis); }
.lencana.hidup { background: var(--aktif); color: var(--permukaan); } /* v3.23: sesi berjalan = hijau "live"; amber khusus butuh tindakan */
.pil.aktif-gelap { color: var(--gelap); background: var(--emas); }
.tombol.tombol-terang { color: var(--di-emas); }
.tombol.tombol-terang:hover { background: var(--emas-sorot) !important; border-color: var(--emas-sorot) !important; }
.kartu-berjalan { background: linear-gradient(135deg, var(--gelap) 0%, var(--gelap-ujung) 100%); }
.baris-grup.berjalan { box-shadow: inset 3px 0 0 var(--aktif); }
.tab button[aria-selected="true"] { border-bottom-color: var(--aksen); }

/* ================= v3.4.3: umpan balik saat memuat ================= */
body.memuat::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50;
  background: linear-gradient(90deg, transparent 0%, var(--aksen) 30%, var(--emas) 60%, transparent 100%); background-size: 200% 100%; animation: kemajuan 1s linear infinite; }
@keyframes kemajuan { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.kerangka { display: flex; flex-direction: column; gap: 16px; }
.kerangka > div { border-radius: 12px; background: linear-gradient(90deg, var(--cekung) 0%, var(--garis) 50%, var(--cekung) 100%); background-size: 200% 100%; animation: kilau 1.2s ease-in-out infinite; }
.kerangka-judul { height: 34px; width: 38%; }
.kerangka-baris { height: 16px; width: 60%; }
.kerangka-kartu { height: 140px; }
.kerangka-kartu.pendek { height: 90px; }
@keyframes kilau { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { body.memuat::before, .kerangka > div { animation: none; } }

/* ================= v3.6.0: bahasa dan merek ================= */
sup.tm { font-size: .55em; font-weight: 600; margin-left: 1px; vertical-align: super; line-height: 0; }
.pilih-bahasa { display: inline-flex; gap: 2px; padding: 3px; background: var(--cekung); border: 1px solid var(--garis); border-radius: 10px; align-self: flex-start; }
.pilih-bahasa button { font: 500 13px var(--huruf); border: 0; border-radius: 7px; padding: 6px 12px; background: transparent; color: var(--redup); cursor: pointer; }
.pilih-bahasa button[aria-checked="true"] { background: var(--permukaan); color: var(--teks); font-weight: 600; box-shadow: 0 1px 2px rgb(13 27 42 / .1); }
.pilih-bahasa.di-akun { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }

/* ================= v3.6.2: pemilih kelas ================= */
.pemilih-kelas { margin-top: 18px; padding: 16px; border: 1px solid var(--garis); border-radius: 12px; background: var(--cekung); display: flex; flex-direction: column; gap: 10px; }
.pemilih-kelas h3 { font-size: 15px; }
.pemilih-kelas > p { margin: 0; }
.cari-kelas { width: 100%; max-width: 420px; padding: 9px 12px; border: 1px solid var(--garis-kuat); border-radius: 10px; background: var(--permukaan); font: inherit; }
.jejak-ou { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; min-height: 24px; }
.jejak-ou .pemisah { color: var(--redup); }
.jejak-ou [aria-current] { font-weight: 600; }
.daftar-ou { list-style: none; margin: 0; padding: 4px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 10px; max-height: 320px; overflow-y: auto; }
.ou-baris { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 8px; }
.ou-baris:hover, .ou-baris:focus-within { background: var(--aksen-lembut); }
.ou-nama { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 6px; border: 0; background: none; font: inherit; color: var(--teks); text-align: left; cursor: pointer; }
.ou-ikon { color: var(--aksen); display: inline-flex; }
.jenis-sub .ou-ikon { color: var(--lain); }
.ou-teks { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ou-teks b { font-weight: 600; }
.ou-teks .kecil { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ou-aksi { display: flex; gap: 6px; }
.kosong-kecil { padding: 12px; color: var(--redup); font-size: 14px; }
.pratinjau-ou:empty { display: none; }
.pratinjau-ou { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pratinjau-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tabel-pratinjau tr.tak-bisa td { color: var(--redup); }
.tabel-pratinjau { font-size: 14px; }
.pratinjau-ou .bungkus-tabel { max-height: 360px; overflow: auto; }

/* v3.6.2: baki proses panjang (kanan bawah): progress bar, galat per akun, Jeda/Lanjutkan/Hentikan. Tetap ada saat pindah halaman. */
.baki-proses { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column-reverse; gap: 10px;
  width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 96px); overflow-y: auto; pointer-events: none; }
.baki-proses:empty { display: none; }
.kartu-proses { pointer-events: auto; background: var(--permukaan); border: 1px solid var(--garis-kuat); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgb(13 27 42 / .18); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.kartu-proses.disorot { outline: 3px solid var(--emas); outline-offset: 2px; }
.proses-kepala { display: flex; align-items: flex-start; gap: 6px; }
.proses-judul { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.proses-judul b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proses-status { grid-column: 2; font-size: 12px; color: var(--redup); }
.proses-ikon { width: 10px; height: 10px; border-radius: 50%; background: var(--aksen); grid-row: 1 / span 2; }
.status-jalan .proses-ikon, .status-menjeda .proses-ikon, .status-menghentikan .proses-ikon { animation: denyut 1.2s ease-in-out infinite; }
.status-jeda .proses-ikon { background: var(--emas); }
.status-galat .proses-ikon { background: var(--bahaya); }
.status-selesai .proses-ikon { background: var(--aktif); }
.status-selesai.ada-gagal .proses-ikon { background: var(--emas); }
.status-dihentikan .proses-ikon { background: var(--mati); }
.status-galat .proses-status { color: var(--bahaya); font-weight: 600; }
@keyframes denyut { 50% { opacity: .35; } }
.tombol-ikon { border: 0; background: transparent; color: var(--redup); font-size: 18px; line-height: 1; width: 28px; height: 28px;
  border-radius: 8px; cursor: pointer; }
.tombol-ikon:hover { background: var(--cekung); color: var(--teks); }
.tombol-ikon:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.bar-proses { position: relative; height: 8px; border-radius: 999px; background: var(--cekung); overflow: hidden; }
.bar-isi { height: 100%; width: 0; background: var(--aksen); border-radius: inherit; transition: width .35s ease; }
.status-galat .bar-isi { background: var(--bahaya); }
.status-jeda .bar-isi { background: var(--emas); }
.status-selesai .bar-isi { background: var(--aktif); }
.bar-proses.sibuk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent);
  transform: translateX(-100%); animation: sapu 1.4s ease-in-out infinite; }
@keyframes sapu { to { transform: translateX(100%); } }
.proses-isi { display: flex; flex-direction: column; gap: 8px; }
.kartu-proses.ciut .proses-isi { display: none; }
.proses-angka { font-size: 13px; color: var(--teks-2); font-variant-numeric: tabular-nums; }
.proses-angka b { color: var(--teks); }
.kartu-proses .ringkas-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.kartu-proses .chip-ringkas { padding: 2px 10px; font-size: 12px; }
.kartu-proses .chip-ringkas b { font-size: 14px; }
.proses-sedang { margin: 0; color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu-proses .pesan { margin: 0; font-size: 13px; }
.proses-daftar summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.proses-daftar.gagal summary { color: var(--bahaya); }
.proses-daftar.lewat summary { color: var(--lain); }
.proses-daftar ul { margin: 6px 0 0; padding: 0; list-style: none; max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.proses-daftar li { display: flex; flex-direction: column; font-size: 12px; padding: 6px 8px; background: var(--cekung); border-radius: 8px; }
.proses-daftar .alasan { color: var(--teks-2); }
.kartu-proses .baris-tombol { margin: 0; gap: 8px; }
@media (max-width: 640px) { .baki-proses { right: 8px; left: 8px; bottom: 8px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .bar-proses.sibuk::after, .proses-ikon { animation: none !important; } .bar-isi { transition: none; } }
@media print { .baki-proses { display: none; } }
.status-selesai.ada-gagal .bar-isi { background: var(--emas); }

/* v3.7: ruang les buatan guru: formulir buat ruang, pemilih santri, tab Santri dan pengaturan. */
.form-ruang { display: flex; flex-direction: column; gap: 18px; }
.isian { display: flex; flex-direction: column; gap: 6px; }
.isian > label { display: flex; flex-direction: column; gap: 6px; }
.isian input[type="text"], .isian textarea, .isian select { max-width: 560px; }
.isian textarea { font-family: var(--mono); font-size: 13px; }
.kaki-form { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 12px 0 2px; background: var(--permukaan); border-top: 1px solid var(--garis); }
.kaki-form > .kecil { margin-right: auto; }
.pemilih-santri { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--garis); border-radius: 12px; background: var(--cekung); }
.ps-alat { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ps-alat .cari-kelas { flex: 1 1 260px; }
.ps-alat select { max-width: 320px; }
.pilih-jumlah { font-weight: 600; color: var(--teks); margin-right: auto; }
.daftar-pilih-santri { list-style: none; margin: 0; padding: 4px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 10px;
  max-height: 380px; overflow-y: auto; }
.daftar-pilih-santri li > label { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 10px;
  padding: 7px 8px; border-radius: 8px; cursor: pointer; font-weight: 400; color: var(--teks); }
.daftar-pilih-santri li > label:hover { background: var(--cekung); }
.daftar-pilih-santri input[type="checkbox"] { flex: none; accent-color: var(--aksen); }
.ps-teks { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ps-teks b { font-weight: 500; }
.ps-tag { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ps-tag .pil { font-size: 11px; padding: 2px 8px; }
.panel-dalam { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.tumpuk-panel { display: flex; flex-direction: column; gap: 16px; }
.tumpuk-panel > .panel { margin: 0; }
.anggota-ruang td .pil + .pil { margin-left: 4px; }
@media (max-width: 640px) { .daftar-pilih-santri li > label { flex-wrap: wrap; } .ps-tag { justify-content: flex-start; width: 100%; padding-left: 28px; } }

/* v3.7.1: cari pengguna dan profil pengguna (admin). */
.cari-pengguna { width: 100%; max-width: 560px; padding: 11px 14px; font-size: 15px; border: 1px solid var(--garis-kuat); border-radius: 12px; background: var(--permukaan); }
.hasil-pengguna { margin-top: 12px; }
.daftar-pengguna { list-style: none; margin: 0; padding: 0; border: 1px solid var(--garis); border-radius: 12px; overflow: hidden; }
.daftar-pengguna li + li { border-top: 1px solid var(--garis); }
.daftar-pengguna a { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 220px) auto auto; align-items: center; gap: 12px; padding: 10px 14px; color: var(--teks); text-decoration: none; }
.daftar-pengguna a:hover, .daftar-pengguna a:focus-visible { background: var(--cekung); }
.daftar-pengguna a > svg { color: var(--redup); }
.daftar-pengguna a.tak-bisa { opacity: .65; }
.avatar-kecil, .avatar-besar { display: inline-grid; place-items: center; border-radius: 50%; background: var(--aksen-lembut); color: var(--aksen-tua); font-weight: 700; flex: none; }
.avatar-kecil { width: 34px; height: 34px; font-size: 13px; }
.avatar-besar { width: 56px; height: 56px; font-size: 20px; }
.pg-teks { display: flex; flex-direction: column; min-width: 0; }
.pg-teks b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-ou { color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-tag { display: flex; gap: 4px; }
.profil-identitas { display: flex; gap: 14px; align-items: flex-end; }
.kisi-profil { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kartu-profil { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kp-isi { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.kp-isi .mono { font-size: 13px; font-weight: 500; }
.lipat-tambah { margin-top: 14px; }
.lipat-tambah > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
.lipat-tambah > summary::-webkit-details-marker { display: none; }
.lipat-tambah .panel-dalam { margin-top: 12px; }
.daftar-pilih-santri.pendek { max-height: 260px; }
.daftar-aktivitas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.daftar-aktivitas li { display: grid; grid-template-columns: 150px auto 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--garis); align-items: baseline; }
@media (max-width: 640px) {
  .daftar-pengguna a { grid-template-columns: auto minmax(0, 1fr) auto; }
  .daftar-pengguna a .pg-ou, .daftar-pengguna a > svg { display: none; }
  .daftar-aktivitas li { grid-template-columns: 1fr; gap: 2px; }
}
.proses-fase { margin: 0; color: var(--aksen-tua); font-weight: 500; }
.c-pilih { width: 36px; }
.c-pilih /* v3.30.3 (pedoman 1.15): area klik minimal 24 px; kotak centang 20 px + margin 2 px = 24 px. */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 2px; accent-color: var(--aksen); flex: none; }
/* v3.7.4: proses memuat (bar berjalan + langkah) dan pemilih bahasa di bilah atas. */
.muat-proses { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--garis); border-radius: 12px; background: var(--cekung); }
.muat-proses .bar-isi { transition: width .5s ease; }
.pilih-bahasa.di-atas { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--garis); border-radius: 999px; background: var(--cekung); }
.pilih-bahasa.di-atas button { border: 0; background: transparent; font: 600 12px/1 var(--huruf); padding: 6px 9px; border-radius: 999px; color: var(--redup); cursor: pointer; }
.pilih-bahasa.di-atas button[aria-checked="true"] { background: var(--permukaan); color: var(--teks); box-shadow: 0 1px 2px rgb(13 27 42 / .12); }
.pilih-bahasa.di-atas button:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
/* v3.7.4: pemilih santri sebagai tabel: pilih semua di kepala, urut per kolom. */
.tabel-pilih-bungkus { max-height: 420px; overflow: auto; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 10px; }
.tabel-pilih { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel-pilih thead th { position: sticky; top: 0; z-index: 1; background: var(--permukaan); border-bottom: 1px solid var(--garis); text-align: left; padding: 8px 10px; font-size: 12px; }
.tabel-pilih td { padding: 7px 10px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
.tabel-pilih tbody tr { cursor: pointer; }
.tabel-pilih tbody tr:hover { background: var(--cekung); }
.tabel-pilih .ps-nama { font-weight: 500; }
.tabel-pilih .ps-tag { justify-content: flex-start; }
.urut-kolom { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font: 600 12px/1.2 var(--huruf); letter-spacing: .04em; text-transform: uppercase; color: var(--redup); }
.urut-kolom:hover { color: var(--teks); }
.urut-kolom:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
.panah-urut { font-size: 10px; opacity: .8; }
@media (max-width: 640px) { .tabel-pilih td.mono, .tabel-pilih th:nth-child(3) { display: none; } }
/* v3.7.6: cakupan ekstensi. */
.cakupan { display: flex; flex-direction: column; gap: 14px; }
.cakupan > .panel-kepala { margin: 0; }
.kpi-klik { font: inherit; text-align: left; cursor: pointer; color: inherit; }
.kpi-klik:hover { border-color: var(--aksen); }
.kpi-klik:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.kpi.buruk .kpi-nilai { color: var(--bahaya); }
.teks-redup { color: var(--redup); }
.lipat-cara { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px 16px; }
.lipat-cara summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.lipat-cara ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.cakupan .segmen { margin-bottom: 12px; }
.cakupan .kontrol.filter { flex-wrap: wrap; }
.cakupan .kontrol.filter .baris-tombol { margin-left: auto; }

/* v3.7.7: diagnosis cakupan ekstensi */
.penyebab h2 { font-size: 16px; margin: 0 0 12px; }
.penyebab-kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.penyebab-kolom h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--redup); margin: 0 0 8px; }
.penyebab-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.penyebab-btn { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 8px 12px; cursor: pointer; font: inherit; color: inherit; }
.penyebab-btn:hover { border-color: var(--aksen, currentColor); }
.penyebab-judul { flex: 1; font-size: 14px; }
.penyebab-n { font-variant-numeric: tabular-nums; font-size: 16px; }
.penyebab-btn .pil, .diag summary .pil { flex: none; }
td.c-diag, th.c-diag { min-width: 280px; max-width: 420px; }
.diag summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; }
.diag summary::-webkit-details-marker { display: none; }
.diag summary::after { content: '▸'; color: var(--redup); font-size: 12px; }
.diag[open] summary::after { content: '▾'; }
.diag-judul { font-weight: 600; font-size: 14px; }
.diag-isi { margin-top: 8px; padding: 10px 12px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); font-size: 13px; }
.diag-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--redup); font-weight: 600; margin-top: 6px; }
.diag-label:first-child { margin-top: 0; }
.diag-isi ul, .diag-isi ol { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.sakelar-usang { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
tr.baris-redup td { opacity: .65; }
.sakelar-usang input { width: auto; margin: 0; }

/* v3.8: kepemilikan CB */
.daftar-kesiapan-kepem { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; }
.daftar-kesiapan-kepem li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--garis); }
.daftar-kesiapan-kepem li:last-child { border-bottom: 1px solid var(--garis); }
/* v3.46.1 (U104, kanvas U106): kartu pemantau; lencana syarat yang bisa menahan pindah, baris "Pindah tertahan" di tab Disetujui. */
.isi-kesiapan-kepem { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.isi-kesiapan-kepem .baris-tombol { margin: 4px 0 0; flex-wrap: wrap; }
.judul-kesiapan-kepem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lencana-tahan { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; color: var(--teks-2); border: 1px solid var(--garis-kuat); border-radius: 6px; padding: 0 7px; white-space: nowrap; }
.tertahan-kepem { margin: 0; color: var(--lain); }
.tertahan-kepem b { font-weight: 700; }
.centang-kepem { display: inline-flex; align-items: center; gap: 6px; }
.centang-kepem input { width: auto; margin: 0; }
.form-setelan-kepem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 10px; }
.form-setelan-kepem label { display: grid; gap: 4px; align-content: start; }
.form-setelan-kepem .baris-penuh { grid-column: 1 / -1; }
.form-setelan-kepem input[aria-invalid="true"] { border-color: var(--bahaya); }
.tabel-kepem td.c-pemilik { min-width: 240px; max-width: 360px; }
.pilih-pemilik { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.pilih-pemilik select, .pilih-pemilik input { width: auto; min-width: 160px; }
.form-kebijakan-ou { display: grid; gap: 8px; margin-top: 8px; padding: 10px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); }
.form-kebijakan-ou label { display: grid; gap: 3px; }
@media (max-width: 640px) { .daftar-kesiapan-kepem li { grid-template-columns: 1fr; gap: 6px; } .form-setelan-kepem { grid-template-columns: 1fr; } }
.kesiapan-kepem .centang-kepem, .panel-tabel .sakelar-usang { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; }

/* v3.9: panel allowlist RADIUS */
.pesan.sukses { background: var(--aktif-bg); color: var(--aktif); }
.panel-radius .baris-tombol { margin-top: 12px; }
.token-baru { margin-top: 12px; border: 1px solid var(--garis-kuat); border-radius: 8px; padding: 10px 12px; background: var(--cekung); }
.token-baru pre { overflow-x: auto; word-break: break-all; white-space: pre-wrap; }

/* ---------- v3.11: sub-tab menu, Pengguna dan peran ---------- */
.pil.info { color: var(--info); background: var(--info-bg); }
.tab-sub { margin-top: -4px; }
.tab-sub .lencana { margin-left: 6px; }
.pil-baris { display: flex; flex-wrap: wrap; gap: 4px; }
.pil-peran { padding-right: 4px; }
.pil-x { border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; padding: 0 4px; border-radius: 50%; line-height: 1; }
.pil-x:hover, .pil-x:focus-visible { background: rgb(0 0 0 / .08); }
.baris-saring { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.baris-saring input[type=search] { flex: 1 1 220px; min-width: 0; }
.baris-saring .tombol { margin-left: auto; }
.butir-setelan { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--garis); flex-wrap: wrap; }
.butir-setelan > div:first-child { flex: 1 1 320px; }
.butir-setelan p { margin: 4px 0 0; }
.pilih-segmen { display: inline-flex; border: 1px solid var(--garis-kuat); border-radius: 10px; overflow: hidden; }
.pilih-segmen button { font: inherit; border: 0; background: var(--permukaan); color: var(--teks-2); padding: 6px 14px; cursor: pointer; }
.pilih-segmen button + button { border-left: 1px solid var(--garis-kuat); }
.pilih-segmen button[aria-checked="true"] { background: var(--aksen); color: var(--aksen-teks); font-weight: 600; }
.kisi-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.form-izin { display: grid; gap: 10px; margin-bottom: 14px; padding: 12px; background: var(--cekung); border-radius: 10px; }
.form-izin label, .dialog-alasan label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.samping-kepala .kecil { display: block; }

/* ---------- v3.11: ruang belajar (mulai berbasis kehadiran, pengawasan, kendali kelas) ---------- */
.bilah-sesi { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px; box-shadow: var(--bayang); }
.bilah-sesi > div { display: grid; font-size: 13px; color: var(--redup); }
.bilah-sesi > div b { font-size: 18px; color: var(--teks); }
.bilah-sesi.tenang { display: grid; gap: 4px; }
.bilah-sesi .hitung-besar b { font-size: 28px; }
.aksi-sesi { justify-content: flex-start; margin-bottom: 14px; }
.mulai-sesi .panel h2 { font-size: 16px; margin: 0 0 10px; }
.mulai-sesi label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; margin: 8px 0; }
.mulai-sesi label.cek-besar { display: flex; align-items: center; gap: 10px; font-size: 16px; padding: 12px; border: 1px solid var(--garis-kuat); border-radius: 10px; background: var(--cekung); cursor: pointer; }
.cek-besar input { width: 22px; height: 22px; }
.tombol.besar { font-size: 16px; padding: 12px 28px; }
.spasi { flex: 1; }
.label-situs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.label-situs .pil::before { display: none; }
.chip-baris { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 13px; border: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks-2); border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.chip.aktif { background: var(--aksen); border-color: var(--aksen); color: var(--aksen-teks); }
.c-situs { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.c-situs > div > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-baris { position: relative; }
.menu-baris summary { list-style: none; cursor: pointer; padding: 2px 10px; border-radius: 8px; font-weight: 800; }
.menu-baris summary::-webkit-details-marker { display: none; }
.menu-baris[open] summary, .menu-baris summary:hover { background: var(--cekung); }
.menu-isi { position: absolute; right: 0; z-index: 4; display: grid; min-width: 190px; background: var(--permukaan); border: 1px solid var(--garis-kuat); border-radius: 10px; box-shadow: var(--bayang); padding: 4px; }
.menu-isi button { font: inherit; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--teks); }
.menu-isi button:hover, .menu-isi button:focus-visible { background: var(--cekung); }
/* S5e (U78 butir 1): butir menu nonaktif dengan keterangan singkat di bawahnya (Kunci layar untuk santri belajar manual). */
.menu-isi button.butir-nonaktif:disabled { color: var(--redup); cursor: not-allowed; background: none; }
.menu-isi button.butir-nonaktif .kecil { display: block; }
.kode-hadir { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kode-hadir > div { display: grid; }
.kode-angka { font-family: var(--mono); font-size: 44px; letter-spacing: .25em; color: var(--teks); }
.kode-hadir:fullscreen { background: var(--permukaan); justify-content: center; }
.kode-hadir:fullscreen .kode-angka { font-size: 22vw; }
.sapaan-awas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.penanda-sesi summary { cursor: pointer; font-weight: 600; }
.dialog-lebar { width: min(760px, 94vw); max-width: 94vw; }
.dialog-lebar h3 { font-size: 15px; margin: 14px 0 6px; }
@media (max-width: 640px) {
  .c-situs { max-width: 140px; }
  .aksi-sesi { position: sticky; bottom: 0; background: var(--latar); padding: 8px 0; z-index: 3; }
  .bilah-sesi { gap: 10px 18px; }
}
.bilah-bawah { display: none; }
@media (max-width: 640px) {
  .bilah-bawah { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--permukaan); border-top: 1px solid var(--garis); padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); }
  .bilah-bawah a { display: grid; justify-items: center; gap: 2px; font-size: 12px; color: var(--teks-2); text-decoration: none; padding: 6px 0; }
  body:has(.bilah-bawah) main { padding-bottom: 72px; }
  /* v3.33: pesan (toast) di atas bilah bawah, tidak tertutup menu HP. */
  body:has(.bilah-bawah) .toast { bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 7; }
}
.form-setelan { display: grid; gap: 12px; }
.form-setelan label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.form-setelan label.label-sebaris { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.form-setelan fieldset { border: 1px solid var(--garis); border-radius: 10px; padding: 10px 12px; }
.form-setelan legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
.pendek-angka { max-width: 120px; }
.mulai-sesi label.cek-besar { display: flex; flex-direction: row; justify-content: flex-start; text-align: left; }
/* ---------- v3.11: situs ---------- */
.kartu-periksa { border: 1px solid var(--garis); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: var(--cekung); display: grid; gap: 6px; }
.kartu-periksa.terlarang { border-color: var(--bahaya); background: var(--bahaya-bg); }
/* v3.19.1: kotak saran jenis konten. */
.kotak-jenis { border-left: 4px solid var(--info, var(--garis-kuat)); background: var(--permukaan); border-radius: 8px; padding: 8px 12px; display: grid; gap: 4px; }
.kotak-jenis ul { margin: 0; padding-left: 18px; }
.kotak-jenis.jenis-1 { border-left-color: var(--aktif); }
.kotak-jenis.jenis-3 { border-left-color: var(--lain); }
.kotak-jenis.jenis-4 { border-left-color: var(--bahaya); }
.kotak-jenis.jenis-x, .kotak-jenis.jenis-infra { border-left-color: var(--garis-kuat); }
/* v3.18: Tambah ke katalog di bawah hasil Periksa alamat. */
.kat-periksa-katalog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 8px; }
.kat-periksa-katalog .kecil { flex: 1 1 260px; }
.kat-periksa-katalog.kat-periksa-v361 { display: grid; gap: 10px; align-items: stretch; }
.kat-periksa-v361 .kecil { flex: initial; }
.kat-periksa-tingkat { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; }
.kat-periksa-tingkat p { margin: 0; }
.kat-periksa-bila { margin: 0; }
.kat-periksa-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kat-periksa-status > .kecil { flex: 1 1 260px; margin: 0; }
.kat-periksa-tunggu, .kat-periksa-akibat { border-radius: 8px; padding: 12px 14px; }
.kat-periksa-tunggu { background: var(--lain-bg); border: 1px solid var(--lain-garis); }
.kat-periksa-akibat { background: var(--bahaya-bg); border: 1px solid var(--bahaya-garis); }
.kat-periksa-akibat > p.kecil { flex: 1 1 100%; color: var(--teks); }
.daftar-pengajuan { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.kartu-pengajuan { border: 1px solid var(--garis); border-radius: 12px; padding: 14px; }
.kartu-pengajuan p { margin: 4px 0; }
.nav-appraisal { display: flex; gap: 18px; padding: 10px 24px; background: var(--permukaan); border-bottom: 1px solid var(--garis); font-weight: 600; }
.nav-appraisal a { text-decoration: none; color: var(--teks-2); display: inline-flex; gap: 6px; align-items: center; }
/* ---------- v3.11: kepatuhan ---------- */
tr.baris-kritis td { background: var(--bahaya-bg); }
.kerja-fisik tr.selesai td { opacity: .55; text-decoration: line-through; }
@media print {
  .samping-admin, .kepala, header, .tab-sub, .baris-tombol, .bilah-bawah, .nav-appraisal { display: none !important; }
  .kerja-fisik .panel { break-inside: avoid; box-shadow: none; border: 1px solid var(--garis); }
}

/* v3.11 Tahap 4: form satu baris (kasus jejak) */
.baris-form { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.baris-form input[type="email"] { flex: 1 1 14rem; }
.baris-form input[type="text"] { flex: 2 1 18rem; }
/* v3.11 (6.14 butir 8): pratinjau situs di kartu persetujuan */
.pratinjau-situs { margin: 8px 0; max-width: 560px; }
.pratinjau-situs img { display: block; width: 100%; max-height: 340px; object-fit: cover; object-position: top; border: 1px solid var(--garis); border-radius: 8px; background: var(--latar); }
.pratinjau-situs figcaption { margin-top: 4px; }

/* v3.11: paket situs dan saran alamat tambahan */
.baris-centang { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--garis); cursor: pointer; }
.baris-centang input { width: auto; margin: 3px 0 0; flex: none; }
.daftar-pilih-paket { max-height: 55vh; overflow: auto; margin: 8px 0 14px; }
dialog.lebar .isian { margin-bottom: 10px; }
dialog .baris-tombol { justify-content: flex-end; margin-top: 12px; }

/* v3.12: pilihan absensi ruang, menu Setup */
.pilihan-absensi { display: grid; gap: 8px; }
label.pilihan-radio { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; cursor: pointer; }
label.pilihan-radio:has(input:checked) { border-color: var(--aksen); background: var(--cekung); }
label.pilihan-radio input { margin-top: 3px; }
.setup-bagian .butir-setelan textarea { min-width: min(420px, 100%); }
.setup-bagian .butir-setelan input[type=text] { min-width: min(260px, 100%); }
textarea.daftar-guru-setup { width: 100%; min-width: 180px; min-height: 38px; height: 38px; font-size: 13px; padding: 7px 10px; }
.setup-bagian textarea, textarea.setup-pendek { min-height: 110px; }
label.centang-hari { flex-direction: row; align-items: center; gap: 4px; font-weight: 400; }

/* v3.12: isian akun standar di mana pun (tabel Setup, jendela) */
.isian-akun { flex: 1 1 260px; min-width: 220px; }
.isian-akun .pilih-email { min-height: 40px; }
.pilih-email.nonaktif { background: var(--cekung); }
.dialog-akun { overflow: visible; }
.dialog-akun .isian-akun { margin: 8px 0; }
td.sel-akun { min-width: 240px; }
td.sel-akun .isian-akun { min-width: 0; }
.tim-appraisal { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--garis); }
.tambah-tim { align-items: center; }

/* ---------- v3.13: bantuan kontekstual ---------- */
.tombol-bantuan { width: 40px; height: 40px; border: 1px solid var(--garis); border-radius: 10px; background: var(--cekung); color: var(--teks-2); font: 700 17px var(--huruf); cursor: pointer; }
.tombol-bantuan:hover { color: var(--aksen); border-color: var(--aksen); }
.ikon-info { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; margin-left: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--aksen); font: 600 15px/1 var(--huruf); cursor: pointer; vertical-align: middle; }
.ikon-info:hover, .ikon-info:focus-visible { background: var(--aksen-lembut); }
.tombol-kenapa { white-space: nowrap; }
.toast.ada-tombol { pointer-events: auto; display: flex; align-items: center; gap: 10px; }
.toast-tombol { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 8px; padding: 3px 10px; font: 600 13px var(--huruf); cursor: pointer; }
dialog.laci-bantuan { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(460px, 100%); max-width: 100%; border-radius: 0; border-width: 0 0 0 1px; padding: 0; display: none; flex-direction: column; }
dialog.laci-bantuan[open] { display: flex; }
.bantuan-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--garis); }
.bantuan-kepala .baris-tombol { margin: 0; }
.bantuan-cari { margin: 12px 18px 0; padding: 9px 12px; border: 1px solid var(--garis-kuat); border-radius: 10px; font: 15px var(--huruf); background: var(--permukaan); color: var(--teks); }
.bantuan-isi { padding: 14px 18px 28px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.bantuan-isi h2 { font-size: 19px; }
.bantuan-isi p { margin: 0; color: var(--teks-2); }
.bantuan-isi ol, .bantuan-isi ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--teks-2); }
.bantuan-jenis { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; margin: 0; }
.bantuan-bagian { display: flex; flex-direction: column; gap: 4px; }
.bantuan-bagian h3 { font-size: 13px; color: var(--redup); font-weight: 600; }
.daftar-tautan { list-style: none; padding-left: 0 !important; }
.daftar-tautan .tautan { text-align: left; }
.bantuan-umpan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--garis); }
.bantuan-umpan input { flex: 1; min-width: 160px; padding: 6px 10px; border: 1px solid var(--garis-kuat); border-radius: 8px; background: var(--permukaan); color: var(--teks); }
.bantuan-minta { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--cekung); border-radius: 10px; padding: 10px 12px; }
dialog.dialog-tiket { max-width: 560px; }
dialog.dialog-tiket textarea, dialog.dialog-tiket input[type=text], dialog.dialog-tiket select { width: 100%; }
dialog.dialog-tiket fieldset { border: 1px solid var(--garis); border-radius: 10px; padding: 8px 12px; }
.kelompok-setelan { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--garis); color: var(--teks-2); }

/* ---------- v3.13: Dashboard Pimpinan ---------- */
.kartu-pimpinan { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.kartu-skor { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px; border-radius: var(--radius); border: 1px solid var(--garis); background: var(--permukaan); color: var(--teks); cursor: pointer; font: inherit; box-shadow: var(--bayang); }
.kartu-skor:hover { border-color: var(--aksen); }
.kartu-judul { font-size: 13px; color: var(--redup); font-weight: 600; }
.kartu-angka { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kartu-skor.ok .kartu-angka { color: var(--aktif); } .kartu-skor.peringatan .kartu-angka { color: var(--lain); } .kartu-skor.gagal .kartu-angka { color: var(--bahaya); } .kartu-skor.tak-tahu .kartu-angka { color: var(--mati); }
.kartu-skor.ok { border-top: 4px solid var(--aktif); } .kartu-skor.peringatan { border-top: 4px solid var(--emas); } .kartu-skor.gagal { border-top: 4px solid var(--bahaya); } .kartu-skor.tak-tahu { border-top: 4px solid var(--garis-kuat); }
.pil-skor { display: inline-block; min-width: 38px; text-align: center; padding: 1px 8px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pil-skor.ok { color: var(--aktif); background: var(--aktif-bg); } .pil-skor.peringatan { color: var(--lain); background: var(--lain-bg); } .pil-skor.gagal { color: var(--bahaya); background: var(--bahaya-bg); }
td.angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tren-pimpinan { margin: 0; }
.grafik-pimpinan { width: 100%; max-width: 760px; height: auto; display: block; }
.grafik-pimpinan .garis-bantu { stroke: var(--garis); stroke-width: 1; }
.grafik-pimpinan .label-sumbu { fill: var(--redup); font: 11px var(--huruf); }
.grafik-pimpinan .seri { fill: none; stroke-width: 2.2; }
.grafik-pimpinan .seri-titik { stroke: var(--permukaan); stroke-width: 1.5; }
.seri-0 { stroke: var(--seri-0); fill: var(--seri-0); background: var(--seri-0); } .seri-1 { stroke: var(--seri-1); fill: var(--seri-1); background: var(--seri-1); } .seri-2 { stroke: var(--seri-2); fill: var(--seri-2); background: var(--seri-2); }
.seri-3 { stroke: var(--seri-3); fill: var(--seri-3); background: var(--seri-3); } .seri-4 { stroke: var(--seri-4); fill: var(--seri-4); background: var(--seri-4); } .seri-5 { stroke: var(--seri-5); fill: var(--seri-5); background: var(--seri-5); }
polyline.seri-1 { stroke-dasharray: 6 3; } polyline.seri-2 { stroke-dasharray: 2 3; } polyline.seri-3 { stroke-dasharray: 8 3 2 3; } polyline.seri-4 { stroke-dasharray: 4 4; }
.grafik-pimpinan polyline { fill: none !important; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--teks-2); margin-top: 8px; }
.legenda .penanda { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* ---------- v3.13: tiket ---------- */
.baris-klik { cursor: pointer; }
.teks-tiket { white-space: pre-wrap; color: var(--teks) !important; }
.utas-tiket { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.utas-tiket li { border: 1px solid var(--garis); border-radius: 10px; padding: 10px 12px; }
.utas-tiket li.support { border-left: 4px solid var(--aksen); }
.utas-tiket li.internal { background: var(--lain-bg); }
.utas-tiket p { white-space: pre-wrap; margin: 4px 0 0; }
.kontrol-tiket { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.kontrol-tiket label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.lampiran-tiket { max-width: 100%; border: 1px solid var(--garis); border-radius: 8px; }

@media print {
  .bilah, .samping-admin, .nav-appraisal, .bilah-bawah, .tanpa-cetak, .tab-sub, .ikon-info, .baki-proses, .toast { display: none !important; }
  body { background: var(--permukaan); color: var(--teks); font-size: 12px; }
  .tata-admin-isi { display: block; }
  .panel, .kartu-skor { box-shadow: none; break-inside: avoid; }
}

/* ---------- v3.13: Katalog situs belajar ---------- */
.kat-panel { display: flex; flex-direction: column; gap: 14px; }
.kat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.kat-cari-bungkus { flex: 1 1 320px; min-width: 0; }
.kat-cari, .kat-bar input[type=search], .kat-bar input[type=url] { width: 100%; font-size: 15px; padding: 10px 14px; border-radius: var(--radius); }
.kat-tampilan { display: inline-flex; gap: 4px; }
.kat-tampilan .aktif { background: var(--aksen-lembut); color: var(--aksen-tua); border-color: var(--aksen); }
.kat-bar-kurator { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border: 1px dashed var(--garis-kuat); border-radius: var(--radius); background: var(--cekung); }
.kat-tata { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.kat-panel.pilih .kat-tata { grid-template-columns: 200px minmax(0, 1fr); }
.kat-faset { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 24px); overflow: auto; padding-right: 4px; }
.kat-panel.pilih .kat-faset { position: static; max-height: 60vh; }
.kat-faset-kepala { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 4px; border-bottom: 1px solid var(--garis); }
.kat-faset-kelompok summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 0; display: flex; align-items: center; gap: 6px; }
.kat-faset-aktif { font-size: 11px; background: var(--aksen); color: var(--aksen-teks); border-radius: 999px; padding: 0 7px; }
.kat-faset-daftar { display: flex; flex-direction: column; gap: 1px; }
.kat-faset-daftar.panjang { max-height: 260px; overflow: auto; }
.kat-faset-butir { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 13px; padding: 3px 4px; border-radius: 6px; cursor: pointer; }
.kat-faset-butir:hover { background: var(--cekung); }
.kat-faset-n { font-size: 12px; color: var(--redup); font-variant-numeric: tabular-nums; }
.kat-ringkas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.kat-saring-baris { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.kat-saring-aktif { font: inherit; font-size: 12px; border: 1px solid var(--aksen); color: var(--aksen-tua); background: var(--aksen-lembut); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.kat-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.kat-kartu { display: flex; flex-direction: column; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--permukaan); overflow: hidden; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.kat-kartu:hover, .kat-kartu:focus-visible { border-color: var(--aksen); box-shadow: var(--bayang); outline: none; }
.kat-kartu.dipilih { border-color: var(--aksen); box-shadow: 0 0 0 2px var(--aksen-lembut); }
.kat-kartu.sudah { opacity: .6; }
.kat-kartu-gambar { position: relative; aspect-ratio: 16 / 9; background: var(--cekung); }
.kat-kartu-gambar .kat-gambar { width: 100%; height: 100%; }
.kat-centang { position: absolute; top: 8px; left: 8px; }
.kat-gambar { display: block; object-fit: cover; background: var(--cekung); }
.kat-gambar.huruf { display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; color: var(--di-gelap); background: var(--jenis-referensi); }
.kat-gambar.besar { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); }
.kat-gambar.huruf.jenis-simulasi { background: var(--jenis-simulasi); } .kat-gambar.huruf.jenis-video { background: var(--jenis-video); }
.kat-gambar.huruf.jenis-latihan { background: var(--jenis-latihan); } .kat-gambar.huruf.jenis-referensi { background: var(--jenis-referensi); }
.kat-gambar.huruf.jenis-buku { background: var(--jenis-buku); } .kat-gambar.huruf.jenis-alat { background: var(--jenis-alat); } .kat-gambar.huruf.jenis-kursus { background: var(--jenis-kursus); }
.kat-kartu-isi { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kat-judul { font-size: 15px; margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kat-alamat { color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kat-ringkasan { margin: 0; color: var(--teks); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kat-chip-baris { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kat-chip { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--cekung); color: var(--teks); border: 1px solid var(--garis); white-space: nowrap; }
.kat-chip.redup { color: var(--redup); font-weight: 500; }
.kat-chip[class*="jenis-"] { background: var(--aksen-lembut); border-color: transparent; color: var(--aksen-tua); }
.kat-kelompok { margin-bottom: 18px; }
.kat-kelompok-judul { display: flex; align-items: baseline; gap: 8px; font-size: 15px; margin: 6px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--garis); }
.kat-lagi { display: flex; justify-content: center; margin-top: 14px; }
.kat-tabel .kat-judul-tabel { font-weight: 600; }
.kat-tabel tr.dipilih td { background: var(--aksen-lembut); }
.kat-tabel .pil { margin: 2px 4px 0 0; }
.kat-rincian { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.kat-rincian dt { color: var(--redup); }
.kat-rincian dd { margin: 0; }
.laci-katalog { width: min(520px, 100%); overflow: auto; }
.kat-pilihan { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 6px 0; }
.kat-pilihan-butir { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
dialog.lebar.dialog-katalog { width: min(1100px, 96vw); max-width: 96vw; }
.dialog-katalog .kat-kisi { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.dialog-katalog .kat-hasil { max-height: 58vh; overflow: auto; }
.daftar-paket-pilih { list-style: none; padding: 0; margin: 6px 0 0; max-height: 220px; overflow: auto; border: 1px solid var(--garis); border-radius: var(--radius); }
.daftar-paket-pilih:empty { display: none; }
.daftar-paket-pilih li { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--garis); font-size: 14px; }
.daftar-paket-pilih li .tombol-ikon { margin-left: auto; }
dialog.lebar.dialog-youtube { width: min(900px, 96vw); max-width: 96vw; }
.yt-daftar { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
.yt-kartu { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 12px; padding: 8px; border: 1px solid var(--garis); border-radius: var(--radius); }
.yt-gambar { width: 168px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--cekung); }
.yt-gambar.huruf { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--redup); }
.yt-isi { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.yt-judul { font-weight: 600; }
.yt-kanal { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.yt-kanal li { border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px 12px; }
.yt-kanal p { margin: 4px 0 8px; }
.pemisah { flex: 1; }
@media (max-width: 760px) {
  .kat-tata, .kat-panel.pilih .kat-tata { grid-template-columns: 1fr; }
  .kat-faset { position: static; max-height: none; }
  .kat-faset-kelompok:not([open]) { border-bottom: 1px solid var(--garis); }
  .yt-kartu { grid-template-columns: 1fr; }
  .yt-gambar { width: 100%; }
}
@media print { .kat-faset, .kat-bar, .kat-bar-kurator, .kat-centang, .kat-lagi { display: none !important; } .kat-tata { display: block; } }

.kat-isian { margin-bottom: 12px; }
.kat-isian > label { display: flex; flex-direction: column; gap: 4px; }
.kat-pilihan .kat-pilihan-butir { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 500; margin: 0; }
textarea.kat-ringkasan-isian { font: inherit; min-height: 64px; height: auto; resize: vertical; }

/* v3.13: jejak akses */
.tabel td.sel-lebih { background: var(--lain-bg); color: var(--lain); font-weight: 700; }
.rentang-tanggal { display: inline-flex; align-items: center; gap: 6px; }

/* v3.14: arahkan kelas, tanda santri, kolom layar */
.aksi-arahkan { justify-content: flex-start; align-items: center; margin: -6px 0 14px; }
.aksi-arahkan > .kecil { margin-right: 4px; }
tr.baris-tanda > td { background: var(--lain-bg); }
.c-layar { min-width: 150px; }
.c-layar .mono { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; margin-left: 4px; }
.panel-tanda { border-left: 4px solid var(--lain); }

/* v3.14.5: Pengguna dan peran › Tambah/Ubah/Hapus pengguna */
.aksi-baris { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dialog-kelola h3 { font-size: 15px; margin: 16px 0 6px; }
.dialog-kelola .daftar-pilih-santri label.tak-bisa { opacity: .6; cursor: not-allowed; }
.dialog-kelola .daftar-pilih-santri .ps-teks .kecil { font-weight: 400; }
.kelola-akun { margin: 10px 0 4px; }
.kelola-identitas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); }
.kelola-identitas .pil-baris { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kelola-akun .pesan { margin-top: 8px; }
.dialog-alasan label.kelola-saring { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.kelola-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kelola-langkah li { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: var(--cekung); }
.kelola-langkah li.salah { background: var(--bahaya-bg); }
.kelola-tanda { font-weight: 700; width: 1em; text-align: center; flex: none; }
.kelola-langkah li.salah .kelola-tanda { color: var(--bahaya); }
dialog.dialog-kelola { width: min(980px, 96vw); max-width: 96vw; max-height: 92vh; overflow: auto; padding-bottom: 0; }
.kelola-kolom { display: grid; gap: 4px 20px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .kelola-kolom { grid-template-columns: 1fr 1fr; } }
.kelola-peran li > label { padding-top: 6px; padding-bottom: 6px; }
.kelola-peran .ps-teks .kecil { display: block; line-height: 1.35; }
.kelola-kaki { position: sticky; bottom: 0; background: var(--permukaan); padding: 12px 0 16px; margin-top: 12px; border-top: 1px solid var(--garis); }
td .aksi-baris { flex-wrap: nowrap; }
.kelola-peran { max-height: 400px; }
.kelola-kendala { display: block; color: var(--lain); margin-top: 2px; }

/* v3.15: kartu akses dan "Kenapa tidak bisa?" */
.ringkas-akses { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; font-weight: 500; }
.perbaikan-akses { margin: 8px 0; }
.rinci-akses { margin: 10px 0; }
.rinci-akses > summary { cursor: pointer; font-weight: 600; }
.panel-akses h3, .dialog-kenapa h3 { margin: 16px 0 6px; font-size: 1rem; }
.langkah-akses { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.langkah-akses li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; }
.tanda-langkah { justify-content: center; min-width: 24px; padding: 2px 0; text-align: center; font-weight: 700; }
.langkah-tidak > div > span:first-child { font-weight: 600; }
.dialog-kenapa label { display: block; margin-top: 10px; }
.dialog-kenapa label input, .dialog-kenapa label select { margin-top: 4px; width: 100%; }
.hasil-kenapa { margin-top: 12px; }
@media (max-width: 600px) { .panel-akses .panel-kepala { flex-direction: column; align-items: flex-start; } }
.tanda-langkah::before { display: none !important; }

/* v3.15.1: penolakan tiga bagian, nomor rujukan, pita 2SV */
.blok-tolak { margin-top: 6px; display: grid; gap: 4px; color: var(--teks); font-weight: 400; }
.blok-tolak p { margin: 0; }
#pesan-masuk .blok-tolak { text-align: left; }
.toast-rujukan { opacity: .85; font-size: .85em; }
.pita-2sv { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 12px 16px 0; padding: 10px 14px; border-radius: 10px; background: var(--lain-bg); color: var(--lain); }
.pita-2sv > span { color: var(--teks); }

/* v3.16: aturan akses (tahap 3) */
.panel-aturan.baru { border-left: 4px solid var(--aktif); }
.panel-aturan .panel-kepala { align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-aturan h2 { margin-bottom: 4px; }
.daftar-sebab { margin: 0; padding-left: 18px; }
.baris-kampus { margin-top: 6px; }
.pilih-kecil { font-size: .9rem; padding: 4px 8px; }

/* v3.17: menu Akun */
.aktif-saring { background: var(--aksen-lembut); border-color: var(--aksen, currentColor); font-weight: 600; }
.daftar-ditolak { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }

/* v3.19.2: Situs › Izin superadmin */
.form-izin-sa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 12px 16px; max-width: 860px; margin-bottom: 12px; }
.form-izin-sa > label { display: flex; flex-direction: column; gap: 6px; }
.form-izin-sa .lebar-penuh { grid-column: 1 / -1; }
.form-izin-sa .pilih-email-bungkus { flex: none; }
.form-izin-sa textarea { min-height: 64px; resize: vertical; font: inherit; }
.form-izin-sa input[type="number"] { max-width: 120px; }
.sel-situs-izin { min-width: 240px; }
.sel-situs-izin .mono { overflow-wrap: anywhere; }
.sel-alasan-izin { min-width: 200px; }
@media (max-width: 640px) { .form-izin-sa { grid-template-columns: minmax(0, 1fr); } }

/* v3.20.0: Kebijakan waktu */
.pita-jadwal { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: var(--garis); flex: 1; min-width: 120px; }
.pita-jadwal > span { display: block; height: 100%; }
.pita-kbm { background: var(--info); }
.pita-luar { background: var(--aktif); }
.pita-tidur { background: var(--mati); }
.jadwal-mini { display: grid; gap: 4px; margin: 8px 0; max-width: 640px; }
.jadwal-mini-baris { display: flex; align-items: center; gap: 8px; }
.jadwal-mini-hari { width: 64px; font-size: .85em; }
.jadwal-legenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.jadwal-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.kartu-kebijakan { border: 1px solid var(--garis); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.kartu-kebijakan-kepala { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.kartu-kebijakan h3 { margin: 0; }
/* v3.30.2: riwayat versi per kebijakan (hanya baca), dimuat saat dibuka. */
.riwayat-versi { margin-top: 8px; }
.riwayat-versi > summary { cursor: pointer; font-weight: 600; color: var(--teks-2); }
.riwayat-versi .bungkus-tabel { margin-top: 6px; }
.riwayat-versi table { min-width: 640px; }
.riwayat-versi td:nth-child(3) { min-width: 240px; }
.riwayat-versi .daftar-ringkas { margin: 0; padding-left: 16px; }
.riwayat-versi tr.baris-aktif td { background: var(--aktif-bg); }
.form-kebijakan > label, .form-kebijakan fieldset { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-width: 900px; }
.form-kebijakan fieldset { border: 1px solid var(--garis); border-radius: 8px; padding: 10px 12px; }
.form-kebijakan label.centang { flex-direction: row; align-items: center; gap: 6px; }
.pilih-ou { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.kisi-jadwal { display: grid; gap: 10px; }
.hari-jadwal { border-top: 1px solid var(--garis); padding-top: 8px; }
.hari-jadwal-kepala { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.hari-jadwal-kepala b { width: 64px; }
.rentang-jadwal { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.rentang-jadwal .jam-selesai { width: 70px; }
.kisi-ketat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kisi-ketat label { display: flex; flex-direction: column; gap: 4px; }
.form-simulasi { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; max-width: 980px; }
.form-simulasi label { display: flex; flex-direction: column; gap: 4px; }
.hasil-simulasi { margin-top: 12px; }
@media (max-width: 720px) { .form-simulasi, .kisi-ketat { grid-template-columns: minmax(0, 1fr); } }

/* v3.20.1: catatan peringatan di sel tabel (mis. tebakan Digispace berbeda dari impor CSV) */
.peringatan-teks { color: var(--lain); }

/* v3.20.1: penemu alamat, resep, alat ruang */
.baris-cari-penemu { display: flex; gap: 8px; max-width: 900px; margin: 8px 0 12px; }
.baris-cari-penemu input { flex: 1; min-width: 0; }
.hasil-penemu { display: grid; gap: 12px; }
.kotak-resep { border: 1px solid var(--garis); border-radius: 10px; padding: 10px 14px; background: var(--cekung); max-width: 900px; }
.kotak-resep ol { margin: 6px 0; padding-left: 20px; }
.kotak-resep .pil { margin-left: 8px; }
.tabel-tangga .baris-disarankan td { background: var(--aktif-bg); }
.tabel-tangga .sel-aksi { white-space: nowrap; }
.tabel-tangga .sel-aksi .tombol + .tombol { margin-left: 6px; }
.centang-luas { flex-direction: row !important; align-items: center; gap: 6px; }
.panel-dalam { border-top: 1px solid var(--garis); padding-top: 12px; margin-top: 8px; }
.form-resep { display: grid; gap: 10px; max-width: 620px; }
.form-resep > label { display: flex; flex-direction: column; gap: 4px; }
.form-resep > label.centang { flex-direction: row; align-items: center; gap: 6px; }
.dialog-resep { max-height: 90vh; overflow: auto; }
.daftar-alat { display: grid; gap: 8px; }
.kartu-alat { display: flex; gap: 8px; align-items: center; border: 1px solid var(--garis); border-radius: 8px; padding: 8px 12px; }
@media (max-width: 640px) { .baris-cari-penemu { flex-direction: column; } }

@media (max-width: 640px) { .daftar-tindakan li { flex-wrap: wrap; } }
.daftar-alat .kartu-alat { flex-direction: row; justify-content: flex-start; text-align: left; }
.daftar-alat .kartu-alat input { width: auto; margin: 0; }
#penemu-ruang .baris-tombol { margin: 10px 0 14px; }

/* v3.20.1d: hasil rekaman perekam di penemu alamat */
.hasil-rekaman { margin-top: 12px; }
.hasil-rekaman h4 { margin: 10px 0 4px; font-size: 14px; }
.daftar-ikutan { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 6px; }
.daftar-ikutan li { overflow-wrap: anywhere; }
.hasil-rekaman .baris-tombol .mono { max-width: 100%; overflow-wrap: anywhere; white-space: normal; text-align: left; }
.daftar-ikutan label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.daftar-ikutan label input { width: auto; margin: 0; }
@media (max-width: 640px) {
  .daftar-tindakan li .tindakan-teks { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .daftar-tindakan li { padding: 12px 14px; gap: 8px 10px; }
}

/* ---------- v3.20.3: editor kebijakan waktu (mode, slider 7 hari, fondasi, impor aSc) ---------- */
.form-kebijakan .tumpuk, .dialog-asc .tumpuk, .kw-fondasi .tumpuk { align-items: stretch; gap: 12px; }
.form-kebijakan > .tumpuk > label, .form-kebijakan .kw-insp label, .kw-fondasi label:not(.centang), .dialog-asc label:not(.centang) { display: flex; flex-direction: column; gap: 4px; }
.form-kebijakan fieldset { max-width: none; }
.pita-jadwal > span { min-width: 1px; }
.jadwal-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.jadwal-legenda i, .kw-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; border: 1px solid rgb(0 0 0 / .12); flex: none; }
.kw-chip-isi { display: inline-flex; align-items: center; gap: 2px; }

/* Alur di beranda kebijakan waktu */
.kw-alur { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kw-alur li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); }
.kw-alur li > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kw-alur li.kini { border-color: var(--aksen); background: var(--aksen-lembut); }
.kw-alur li.selesai .kw-bulat { background: var(--aktif); color: var(--permukaan); border-color: var(--aktif); }
.kw-bulat { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--garis-kuat); font-weight: 600; font-size: 13px; background: var(--permukaan); }
.kw-penyiapan, .kw-kunci { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
@media (max-width: 820px) { .kw-alur { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 480px) { .kw-alur { grid-template-columns: minmax(0, 1fr); } }

/* Langkah editor */
.kw-langkah { display: flex; gap: 6px; margin: 4px 0 16px; flex-wrap: wrap; }
.kw-langkah button { flex: 1 1 180px; display: flex; gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--teks); background: var(--cekung); border: 1px solid var(--garis); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.kw-langkah button > span:last-child { display: flex; flex-direction: column; }
.kw-langkah button.kini { background: var(--aksen-lembut); border-color: var(--aksen); }
.kw-langkah button.kini .kw-bulat { background: var(--aksen); color: var(--aksen-teks); border-color: var(--aksen); }
.kw-langkah button.lewat .kw-bulat { background: var(--aktif); color: var(--permukaan); border-color: var(--aktif); }
.kw-titik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kw-titik-pilih { display: flex !important; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; cursor: pointer; }
.kw-titik-pilih.terpilih { border-color: var(--aksen); background: var(--aksen-lembut); }
.kw-titik-pilih input { align-self: flex-start; }
@media (max-width: 720px) { .kw-titik { grid-template-columns: minmax(0, 1fr); } }

/* Pilihan cara (segmen) */
.kw-pilih-cara { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; }
.kw-pilih-cara p { margin: 2px 0 0; }
.kw-segmen { display: inline-flex; border: 1px solid var(--garis-kuat); border-radius: 8px; overflow: hidden; }
.kw-segmen button { font: inherit; border: 0; background: var(--permukaan); color: var(--teks); padding: 6px 12px; cursor: pointer; }
.kw-segmen button + button { border-left: 1px solid var(--garis-kuat); }
.kw-segmen button.terpilih { background: var(--aksen); color: var(--aksen-teks); }

/* Slider 7 hari */
.kw-tata { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.kw-utama { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kw-samping { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 70px; }
@media (max-width: 960px) { .kw-tata { grid-template-columns: minmax(0, 1fr); } .kw-samping { position: static; } }
.kw-alat { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.kw-alat label { display: inline-flex; align-items: center; gap: 6px; }
.kw-slider { display: flex; flex-direction: column; gap: 6px; position: relative; padding-top: 22px; }
.kw-baris { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: center; }
.kw-hari { font: inherit; font-size: 13px; text-align: left; border: 1px solid transparent; background: none; color: var(--teks-2); border-radius: 6px; padding: 4px 6px; cursor: pointer; }
.kw-hari.aktif { border-color: var(--aksen); color: var(--teks); font-weight: 600; background: var(--aksen-lembut); }
.kw-kolom { position: relative; }
.kw-trek { position: relative; height: 34px; border-radius: 6px; cursor: copy; touch-action: none;
  background: repeating-linear-gradient(135deg, var(--cekung) 0 6px, var(--garis) 6px 12px); border: 1px solid var(--garis); }
.kw-trek.aktif { outline: 2px solid var(--aksen-lembut); }
.kw-blok { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; cursor: grab; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px rgb(0 0 0 / .15); user-select: none; }
.kw-blok span { overflow: hidden; text-overflow: ellipsis; padding: 0 8px; pointer-events: none; }
.kw-blok:active { cursor: grabbing; }
.kw-blok.terpilih { box-shadow: 0 0 0 2px var(--permukaan), 0 0 0 4px var(--fokus); z-index: 2; }
.kw-blok.baru { outline: 2px dashed var(--lain); outline-offset: -2px; }
.kw-pegangan { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 1; }
.kw-pegangan.kiri { left: 0; } .kw-pegangan.kanan { right: 0; }
.kw-blok.terpilih .kw-pegangan::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: 3px; width: 2px; border-radius: 1px; background: currentColor; opacity: .7; }
.kw-tepi { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--garis-kuat); pointer-events: none; }
.kw-lapis { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.kw-garis { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1px dashed var(--redup); }
.kw-garis.kuat { border-left: 2px solid var(--fokus); }
.kw-label { position: absolute; top: -22px; padding: 1px 6px; border-radius: 4px; font: 600 11px/1.4 var(--mono); white-space: nowrap; background: var(--teks); color: var(--permukaan); }
.kw-label.kuat { background: var(--fokus); color: var(--aksen-teks); }
.kw-label-periode { position: relative; height: 14px; font-size: 10px; color: var(--redup); }
.kw-label-periode span { position: absolute; text-align: center; overflow: hidden; white-space: nowrap; }
.kw-tik { position: relative; height: 16px; font: 11px var(--mono); color: var(--redup); }
.kw-tik span { position: absolute; }
.kw-urung { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: var(--info-bg); color: var(--info); }
.kw-urung > span { color: var(--teks); }
.kw-salin { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; }
.kw-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.kw-chips button { font: inherit; font-size: 13px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks); cursor: pointer; }
.kw-chips button.terpilih { background: var(--aksen); border-color: var(--aksen); color: var(--aksen-teks); }
.kw-daftar { display: flex; flex-direction: column; border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; }
.kw-daftar-baris { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: center; text-align: left; font: inherit; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--garis); background: var(--permukaan); color: var(--teks); cursor: pointer; }
.kw-daftar-baris:last-child { border-bottom: 0; }
.kw-daftar-baris.celah { background: var(--cekung); color: var(--redup); }
.kw-daftar-baris.terpilih { background: var(--aksen-lembut); }
@media (max-width: 640px) { .kw-daftar-baris { grid-template-columns: 96px minmax(0, 1fr); } .kw-daftar-baris > :last-child { grid-column: 1 / -1; } }
.kw-insp { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--garis); border-left-width: 4px; border-radius: 10px; background: var(--permukaan); }
.kw-insp.kosong { border-left-width: 1px; background: var(--cekung); }
.kw-insp p { margin: 0; }
.kw-dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.kw-legenda-baris { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 13px; }
.kw-lipat { border: 1px solid var(--garis); border-radius: 10px; padding: 8px 12px; }
.kw-lipat > summary { cursor: pointer; font-weight: 600; }
.kw-lipat[open] > summary { margin-bottom: 8px; }
.kw-pengecualian { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-bottom: 6px; }
@media (max-width: 720px) { .kw-pengecualian { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kw-periode { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--cekung); }
.kw-periode-isi { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.kw-periode-isi > label { display: flex; flex-direction: column; gap: 4px; }
.kw-periode-isi input[type=number] { width: 80px; }
.kw-periode-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; flex: 1; min-width: 240px; }
.kw-periode-baris { display: flex; gap: 4px; align-items: center; }
.kw-periode-baris input { width: 62px; font-family: var(--mono); }
.kw-periode-baris.salah input { border-color: var(--bahaya); }
.kw-periode-baris b { width: 28px; font-size: 13px; }

/* Menu klik kanan blok */
.kw-tirai { position: fixed; inset: 0; z-index: 40; }
.kw-menu { position: fixed; z-index: 41; width: 300px; max-height: calc(100vh - 16px); overflow: auto; background: var(--permukaan); color: var(--teks); border: 1px solid var(--garis-kuat); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / .22); padding: 4px; }
.kw-menu-kepala { display: flex; flex-direction: column; padding: 8px 10px; border-bottom: 1px solid var(--garis); }
.kw-menu-bagian { display: flex; flex-direction: column; padding: 4px 0; border-bottom: 1px solid var(--garis); }
.kw-menu-bagian:last-child { border-bottom: 0; }
.kw-menu-judul { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; color: var(--redup); }
.kw-menu-judul.bahaya, .kw-menu-butir.bahaya { color: var(--bahaya); }
.kw-menu-butir { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: inherit; font-size: 14px; text-align: left; border: 0; background: none; color: inherit; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.kw-menu-butir:hover, .kw-menu-butir:focus-visible { background: var(--cekung); }
.kw-menu-sub { display: flex; flex-direction: column; padding-left: 12px; }

/* Tinjau */
.kw-tinjau-kepala { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kw-banding { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 820px) { .kw-banding { grid-template-columns: minmax(0, 1fr); } }
.kw-bypass { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--bahaya); border-radius: 10px; background: var(--bahaya-bg); }
.kw-bypass p { margin: 0; }
.kw-bypass .tombol { align-self: flex-start; }

/* Fondasi */
.kw-fondasi { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .kw-fondasi { grid-template-columns: minmax(0, 1fr); } }
.kw-fondasi-daftar { display: flex; flex-direction: column; gap: 4px; }
.kw-fondasi-daftar > button:not(.tombol) { display: flex; gap: 8px; align-items: flex-start; text-align: left; font: inherit; border: 1px solid var(--garis); border-radius: 8px; background: var(--permukaan); color: var(--teks); padding: 8px 10px; cursor: pointer; }
.kw-fondasi-daftar > button:not(.tombol) > span { display: flex; flex-direction: column; }
.kw-fondasi-daftar > button.terpilih { border-color: var(--aksen); background: var(--aksen-lembut); }
.kw-fondasi-daftar > .tombol { align-self: flex-start; margin-top: 4px; }
.kw-kalimat { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--info-bg); color: var(--teks); }
.kw-katalog { display: flex; flex-direction: column; max-height: 320px; overflow: auto; border: 1px solid var(--garis); border-radius: 8px; }
.kw-katalog-baris { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 5px 10px; border-bottom: 1px solid var(--garis); }
.kw-katalog-baris:last-child { border-bottom: 0; }
.kw-usul-fondasi { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--garis); }

/* Impor aSc */
dialog.lebar.dialog-asc { width: min(980px, 96vw); max-width: 96vw; }
.kw-impor-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 12px; }
.kw-impor-kisi label { display: flex; flex-direction: column; gap: 3px; }
/* v3.20.3: label centang (checkbox) satu baris di editor, fondasi, dan impor */
.form-kebijakan label.centang, .kw-fondasi label.centang, .dialog-asc label.centang, .kw-penyiapan label.centang { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-weight: 400; }
.kw-fondasi fieldset, .form-kebijakan .tumpuk fieldset { border: 1px solid var(--garis); border-radius: 10px; padding: 8px 12px 10px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.kw-fondasi legend, .form-kebijakan legend { font-weight: 600; padding: 0 4px; }
.kw-fondasi input[type=color] { width: 48px; height: 34px; padding: 2px; border: 1px solid var(--garis-kuat); border-radius: 6px; background: var(--permukaan); }

/* v3.21: permintaan cerita (peran Musyrif) */
.daftar-cerita { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.baris-cerita { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--permukaan); }
.baris-cerita.baru { border-left: 4px solid var(--aksen); }
.baris-cerita.ditemui { opacity: .8; }
.baris-cerita .bc-teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* v3.21.1: jendela impor pengguna dan peran untuk banyak akun. */
dialog.dialog-peran-banyak { width: min(920px, 96vw); max-width: 96vw; }
.dialog-peran-banyak textarea { width: 100%; font-family: var(--mono, monospace); }
.dialog-peran-banyak .gulir-tabel { max-height: 50vh; overflow-y: auto; }
.dialog-peran-banyak .daftar-langkah { margin: 0; padding-left: 0; list-style: none; }
.dialog-peran-banyak .daftar-langkah li + li { margin-top: 2px; }
.pilih-peran-banyak { gap: 6px 16px; }
.pilih-peran-banyak label.label-sebaris { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 500; }
.dialog-peran-banyak textarea { min-height: 0; }
.dialog-peran-banyak .daftar-galat-impor ul { max-height: 30vh; overflow-y: auto; margin: 6px 0 0; }
.dialog-peran-banyak .muat-pratinjau .bar-proses { margin-top: 6px; }

/* v3.21.8: editor daftar PDC per PDC */
.editor-pdc { margin: 16px 0; padding-top: 12px; border-top: 1px solid var(--garis); }
.editor-pdc h3, #pdc > h3 { margin: 8px 0; font-size: 1rem; }
.editor-pdc select { max-width: 100%; }
.tabel-pdc .kolom-pilih { width: 36px; text-align: center; }
.tabel-pdc { max-height: 420px; }
.editor-pdc .tambah-pdc .isian-akun { flex: 1 1 320px; min-width: 0; }

/* v3.21.9: desain ulang halaman Akun (tiga tab, kotak perhatian, saringan pil, panel samping, bilah aksi). */
.sr-saja { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.isi-ruang { flex: 1 1 auto; }
.akun-atas { display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.akun-intro { flex: 1 1 320px; margin: 0; color: var(--teks-2); font-size: 14px; }
.akun-tombol { margin: 0; flex-wrap: wrap; }
.tombol-pisah { display: inline-flex; align-items: stretch; position: relative; }
.tombol-pisah > .tombol { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tombol-pisah > .menu-titik summary { height: 100%; box-sizing: border-box; display: grid; place-items: center; padding: 0 12px; background: var(--aksen); color: var(--aksen-teks); border-left: 1px solid var(--aksen-tua); border-radius: 0 10px 10px 0; }
.tombol-pisah > .menu-titik[open] summary, .tombol-pisah > .menu-titik summary:hover { background: var(--aksen-tua); }
.kotak-perhatian { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 12px 16px; margin-bottom: 14px; border-radius: 12px; background: var(--lain-bg); border: 1px solid var(--lain-garis); color: var(--lain); }
.kotak-perhatian > b { color: var(--lain); }
.kotak-perhatian button.tautan { color: var(--lain); text-decoration: underline; font-weight: 500; }
.panel-akun { padding: 0; overflow: hidden; }
.akun-saring { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--garis); }
.akun-cari { flex: 1 1 260px; min-width: 0; }
.pil-saring-baris { display: flex; flex-wrap: wrap; gap: 6px; }
.pil-saring { font: inherit; font-size: 13px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks-2); cursor: pointer; }
.pil-saring:hover { background: var(--cekung); }
.pil-saring.aktif { border-color: var(--aksen); background: var(--aksen-lembut); color: var(--aksen-tua); font-weight: 600; }
.pil-saring.pil-bahaya { border-color: var(--bahaya-garis); background: var(--bahaya-bg); color: var(--bahaya); font-weight: 600; }
.pil-saring.pil-bahaya.aktif { background: var(--bahaya); color: var(--bahaya-teks); }
.tabel-akun { min-width: 860px; }
.tabel-akun td, .tabel-akun th { vertical-align: middle; }
.tabel-akun .kolom-pilih, .tabel-pdc .kolom-pilih { width: 32px; padding-left: 16px; }

.tabel-akun tr.baris-masalah { background: var(--lain-sorot); }
.tabel-akun tr.baris-terpilih { background: var(--aksen-lembut); }
.akun-sel { display: flex; gap: 10px; align-items: center; }
.avatar-akun { width: 34px; height: 34px; padding: 0; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.akun-nama { font-weight: 600; color: var(--teks); }
button.tautan.akun-nama { color: var(--teks); }
button.tautan.akun-nama:hover { color: var(--aksen); }
.kolom-aksi { width: 1%; white-space: nowrap; }
.tabel-akun .aksi-baris { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.menu-titik summary { min-width: 34px; min-height: 34px; box-sizing: border-box; display: grid; place-items: center; border: 1px solid var(--garis-kuat); border-radius: 8px; padding: 0 8px; }
.menu-isi button.teks-bahaya { color: var(--bahaya); }
.akun-kaki { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--garis); color: var(--teks-2); }
.akun-kaki .baris-tombol { margin: 0; }
.bilah-pilih { position: sticky; bottom: 16px; z-index: 6; margin: 12px auto 0; max-width: 960px; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--gelap); color: var(--di-gelap); box-shadow: 0 12px 32px rgba(10,34,54,.28); }
.bilah-pilih button.tautan { color: var(--gelap-redup); font-weight: 500; }
.bilah-pilih .tombol:not(.bahaya) { background: var(--gelap-2); border-color: var(--gelap-garis); color: var(--di-gelap); }
.bilah-pilih .tombol-ikon { color: var(--gelap-redup); width: 36px; height: 36px; font-size: 22px; }
/* Panel samping untuk menambah, mengubah, dan menonaktifkan akun. */
dialog.dialog-kelola.dialog-samping { margin: 0 0 0 auto; width: min(640px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; border-left: 1px solid var(--garis); padding: 0 24px; box-sizing: border-box; overflow: auto; }
dialog.dialog-kelola.dialog-samping::backdrop { background: rgba(10,34,54,.35); }
dialog.dialog-samping .kelola-kolom { grid-template-columns: 1fr; }
.kelola-kepala { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 2; background: var(--permukaan); padding: 18px 0 10px; }
.kelola-kepala h2 { flex: 1; margin: 0; }
.kelola-tutup { width: 40px; height: 40px; font-size: 24px; }
.kelola-masalah { margin: 4px 0 8px; }
dialog.dialog-samping .kelola-kaki { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Tab PDC santri: dua kolom. */
.pdc-dua { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.pdc-kiri { flex: 1 1 280px; max-width: 360px; padding: 0; overflow: hidden; }
.pdc-kanan { flex: 999 1 480px; min-width: 0; }
.pdc-kiri-cari { padding: 12px; border-bottom: 1px solid var(--garis); }
.pdc-kiri-cari input { width: 100%; box-sizing: border-box; }
.pdc-daftar { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; max-height: 620px; overflow: auto; }
.pdc-butir { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--teks); background: none; border: 0; border-radius: 10px; padding: 9px 12px; cursor: pointer; min-height: 44px; }
.pdc-butir:hover { background: var(--cekung); }
.pdc-butir.dipilih { background: var(--aksen-lembut); color: var(--aksen-tua); }
.pdc-butir-tanpa { background: var(--lain-bg); }
.pdc-butir-teks { flex: 1; display: grid; min-width: 0; }
.pdc-butir-teks b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdc-butir-teks .kecil { color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdc-jumlah { font-weight: 700; font-variant-numeric: tabular-nums; }
.pdc-kiri-kaki { margin: 0; padding: 8px 16px 14px; }
.pdc-kanan-kepala { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; margin-bottom: 12px; }
.pdc-kanan-kepala h2 { margin: 0; }
.pdc-kanan-kepala p { margin: 2px 0 0; }
.pdc-kanan-kepala input[type=search] { flex: 0 1 260px; }
.pdc-tambah { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; padding: 12px; margin-bottom: 12px; border-radius: 12px; background: var(--cekung); }
.pdc-tambah .isian-akun { flex: 1 1 280px; min-width: 0; }
.pdc-aksi { margin-top: 12px; align-items: center; }
.daftar-ditolak li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--garis); }
.av-aktif { background: var(--aktif-bg); color: var(--aktif); }
.av-info { background: var(--info-bg); color: var(--info); }
.av-lain { background: var(--lain-bg); color: var(--lain); }
.av-bahaya { background: var(--bahaya-bg); color: var(--bahaya); }
.av-mati { background: var(--mati-bg); color: var(--mati); }
dialog.dialog-samping .kelola-peran { max-height: none; overflow: visible; }
.pdc-dua > .panel { margin: 0; }

/* v3.22: keadaan "belum ada data" yang netral (bukan gagal, bukan aman). */
.kosong-belum { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 24px; color: var(--redup); font-size: 14px; max-width: 560px; margin: 0 auto; }
.kosong-belum svg { width: 28px; height: 28px; color: var(--redup); }
.kosong-belum b { color: var(--teks); font-size: 16px; }
.kosong-belum .tombol { margin-top: 8px; }

/* v3.22: isi kolom yang berasal dari laporan terakhir CB yang kini tidak melapor. */
.data-basi > * { opacity: .55; }

/* v3.23: komponen tabel baku. Judul kolom tidak terpotong, email dan ID tidak patah di tengah kata. */
th { white-space: nowrap; }
td.sel-id { white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
td .mono, td.mono { overflow-wrap: normal; }

/* v3.23: bilah aksi massal mengambang di bawah layar, di mana pun pemanggil menaruhnya. */
.bilah-pilih.mengambang { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; width: min(960px, calc(100% - 32px)); margin: 0; z-index: 40; }
.bilah-pilih.mengambang[hidden] { display: none; }
.bilah-pilih .bilah-hitung { font-weight: 700; }
.bilah-pilih .spasi { flex: 1; }

/* v3.23: isian jam 24 jam dan keterangan tanggal yang terbaca. */
input.isian-jam { width: 5.5em; font-variant-numeric: tabular-nums; }
input.isian-jam:invalid { border-color: var(--bahaya); }
.isian-tanggal { display: inline-flex; flex-direction: column; gap: 2px; vertical-align: top; }
.isian-tanggal > input { width: 100%; }
.ket-tanggal { font-size: 11.5px; color: var(--redup); white-space: nowrap; line-height: 1.2; }
.ket-tanggal:empty { display: none; }

/* v3.23: panel setup dengan perubahan belum disimpan. */
section.panel.belum-disimpan { box-shadow: inset 4px 0 0 var(--emas); }
.tanda-belum-simpan { margin-left: 8px; vertical-align: middle; }

/* v3.23: lencana peran netral (warna status tidak dipakai untuk peran). */
.pil.peran { color: var(--teks-2); background: var(--cekung); }
.pil.peran::before { display: none; }
.pil.peran.utama { color: var(--aksen-tua); background: var(--aksen-lembut, var(--cekung)); box-shadow: inset 0 0 0 1px var(--aksen); }
.av-peran { background: var(--cekung); color: var(--teks-2); }
.av-utama { background: var(--aksen); color: var(--aksen-teks); }
/* Di halaman admin berbilah samping, bilah aksi massal berada di tengah area isi, bukan menimpa bilah samping. */
@media (min-width: 901px) {
  body:has(.tata-admin-isi) .bilah-pilih.mengambang { left: calc(50% + 126px); width: min(960px, calc(100% - 252px - 48px)); }
}

/* v3.23.1: isian di bilah aksi massal tetap terbaca (dulu teks putih di atas putih). */
.bilah-pilih select { color: var(--teks); background: var(--permukaan); border: 1px solid var(--garis-kuat); border-radius: 8px; min-height: 36px; padding: 0 10px; font: inherit; }

/* ---------- v3.24: layar sesi guru ---------- */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bilah-aksi-sesi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; }
.bilah-aksi-sesi .kelompok { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bilah-aksi-sesi .pemisah { width: 1px; height: 28px; background: var(--garis); margin: 0 4px; }
.tombol.bahaya-garis { background: var(--permukaan); border-color: var(--bahaya); color: var(--bahaya); }
.tombol.bahaya-garis:hover { background: var(--bahaya-bg); }
.menu-arahkan > summary.tombol { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-weight: 600; }
.menu-arahkan > summary.tombol svg { width: 14px; height: 14px; transition: transform .15s; }
.menu-arahkan[open] > summary.tombol svg { transform: rotate(180deg); }
.menu-arahkan .menu-isi { left: 0; right: auto; top: calc(100% + 4px); min-width: 250px; z-index: 8; }
.panel-tanggap { box-shadow: inset 4px 0 0 var(--lain), var(--bayang); }
.panel-tanggap .panel-kepala { align-items: center; }
.tanggap { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--garis); }
.panel-tanggap .panel-kepala + .tanggap { border-top: 0; }
.tanggap-apa { min-width: 0; overflow-wrap: anywhere; }
.tanggap-apa.mono { font-size: 13px; }
.tanggap-aksi { justify-content: flex-end; flex-wrap: nowrap; }
tr.sorot > td { background: var(--aksen-lembut); transition: background .3s; }
.santri-sesi .c-nama b { font-weight: 600; }
/* Ringkasan setelah sesi */
.sesi-selesai .kepala-selesai h2 { font-size: 24px; margin: 4px 0; }
.sesi-selesai .kepala-selesai p { margin: 0 0 12px; color: var(--teks-2); }
.kisi-ringkas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.angka-ringkas { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--cekung); }
.angka-ringkas b { font-size: 22px; }
.daftar-alpa h3 { font-size: 16px; margin: 6px 0 2px; }
.baris-alpa { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--garis); }
.sesi-selesai label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; margin: 12px 0; }
.kaki-selesai { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--garis); }
@media (max-width: 900px) { .tanggap { grid-template-columns: minmax(0, 1fr); } .tanggap-aksi { justify-content: flex-start; flex-wrap: wrap; } }
@media (max-width: 640px) {
  .kisi-ringkas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baris-alpa { grid-template-columns: minmax(0, 1fr) 120px; }
}

/* v3.24: header HP: Cari jadi ikon; bahasa, Panduan, dan bantuan halaman pindah ke menu akun. */
.akun-hp { display: none; }
@media (max-width: 640px) {
  #pilih-bahasa-atas, .tombol-bantuan, .tautan-panduan { display: none !important; }
  .tombol-cari { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .merek-teks small { display: none; }
  .merek-teks b { font-size: 15px; }
  .akun-hp { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--garis); }
  .akun-menu { max-width: calc(100vw - 24px); }
  body.peran-guru .lonceng, body.peran-guru .nav-appraisal { display: none !important; }
}
/* Nav bawah guru: Beranda, Ruang, Peringatan, Lainnya. */
@media (max-width: 640px) {
  .bilah-bawah { grid-template-columns: repeat(4, 1fr); }
  .bilah-bawah a, .bilah-bawah button { display: grid; justify-items: center; gap: 2px; min-height: 52px; align-content: center; font: inherit; font-size: 12px; color: var(--teks-2); text-decoration: none; border: 0; background: none; cursor: pointer; padding: 6px 0; }
  .bilah-bawah [aria-current="page"] { color: var(--aksen-tua); font-weight: 700; }
}
.lembar-lainnya { margin: auto auto 0; width: 100%; max-width: 100%; border: 0; border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.lembar-lainnya::backdrop { background: rgb(10 34 54 / .45); }
.lembar-lainnya nav { display: grid; gap: 2px; margin: 8px 0 12px; }
.lembar-lainnya nav a, .lembar-lainnya nav button { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 10px; font: inherit; font-size: 16px; color: var(--teks); text-decoration: none; border: 0; background: none; text-align: left; cursor: pointer; }
.lembar-lainnya nav a:hover, .lembar-lainnya nav button:hover { background: var(--cekung); }
.lembar-lainnya nav a[aria-current="page"] { background: var(--aksen-lembut); color: var(--aksen-tua); font-weight: 600; }
/* Kanvas v38 papan 21: judul grup di lembar Lainnya (PDC: Santri binaan saya). */
.lembar-lainnya .lembar-grup { margin: 8px 0 0; padding: 8px 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); }

/* v3.24: layar sesi di HP: ringkasan menempel di atas, aksi menempel di bawah, santri sebagai kartu. */
.teks-pendek { display: none; }
.hanya-hp { display: none !important; }
@media (max-width: 640px) {
  .teks-panjang { display: none; }
  .teks-pendek { display: inline; }
  .hanya-hp { display: revert !important; }
  .sembunyi-aksi-hp { display: none !important; }
  .sesi-berjalan .bilah-sesi { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 4px 12px; margin: 0 -16px 12px; padding: 10px 16px; border-radius: 0; border: 0; background: var(--gelap); box-shadow: none; }
  .sesi-berjalan .bilah-sesi > div { color: var(--gelap-redup); font-size: 12px; }
  .sesi-berjalan .bilah-sesi > div b { color: var(--di-gelap); font-size: 18px; }
  .sesi-berjalan .bilah-sesi .hitung-besar b { font-size: 20px; }
  .sesi-berjalan .bilah-sesi > div:nth-child(2) { text-align: center; }
  .sesi-berjalan .bilah-sesi > div:nth-child(3) { text-align: right; justify-items: end; }
  .sesi-berjalan .bilah-sesi > div:nth-child(3) b { font-size: 15px; }
  .sesi-berjalan .bilah-sesi > div:nth-child(4) { display: none; }
  .sesi-berjalan .bilah-sesi .pil { color: inherit; }
  .bilah-aksi-sesi { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 6; margin: 0; border-radius: 0; border-width: 1px 0 0; padding: 8px 12px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; box-shadow: 0 -6px 16px rgb(0 0 0 / .06); }
  body:not(:has(.bilah-bawah)) .bilah-aksi-sesi { bottom: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .bilah-aksi-sesi .kelompok { display: contents; }
  .bilah-aksi-sesi .pemisah { display: none; }
  .bilah-aksi-sesi .tombol, .bilah-aksi-sesi summary.tombol { width: 100%; min-height: 44px; justify-content: center; padding: 0 6px; font-size: 14px; }
  .bilah-aksi-sesi .menu-arahkan .menu-isi { top: auto; bottom: calc(100% + 6px); min-width: min(300px, 92vw); }
  .bilah-aksi-sesi .menu-isi button { min-height: 44px; font-size: 15px; }
  body:has(.bilah-aksi-sesi) main { padding-bottom: 140px; }
  .sesi-berjalan .aksi-sesi { position: static; }
  .panel-tanggap .panel-kepala { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tanggap-aksi .tombol { min-height: 40px; }
  /* Kartu santri */
  table.santri-sesi tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nama aksi" "status status" "layar layar" "situs situs"; gap: 4px 8px; padding: 12px 0; }
  table.santri-sesi td.c-nama { grid-area: nama; min-width: 0; }
  table.santri-sesi td.c-nama > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  table.santri-sesi td.c-status { grid-area: status; display: flex; flex-wrap: wrap; gap: 4px; }
  table.santri-sesi td.c-layar { grid-area: layar; min-width: 0; font-size: 13px; }
  table.santri-sesi td.c-layar .mono { max-width: 60vw; }
  table.santri-sesi td.c-situs { grid-area: situs; max-width: none; font-size: 13px; }
  table.santri-sesi td.c-situs .kecil { display: inline; margin-left: 6px; }
  table.santri-sesi td.c-situs > div > span { display: inline; }
  table.santri-sesi td.c-sisa { display: none; }
  table.santri-sesi td.c-aksi { grid-area: aksi; align-self: start; }
  table.santri-sesi tr.baris-tanda { margin: 0 -8px; padding: 12px 8px; border-radius: 10px; }
  table.santri-sesi .menu-baris summary { min-width: 44px; min-height: 40px; display: grid; place-items: center; }
}

.menu-isi > div > button { width: 100%; }
.samping-kepala { position: relative; }
.tutup-laci { display: none; }
@media (max-width: 900px) {
  .tutup-laci { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: -4px; right: -2px; width: 44px; height: 44px; border: 1px solid var(--gelap-garis); border-radius: 12px; background: none; color: var(--di-gelap); cursor: pointer; }
}
@media (max-width: 640px) {
  .sesi-berjalan .bilah-sesi .pil { background: rgb(255 255 255 / .12); color: var(--di-gelap-aktif); }
  .sesi-berjalan .bilah-sesi .pil.bahaya { color: var(--di-gelap-bahaya); } .sesi-berjalan .bilah-sesi .pil.lain { color: var(--di-gelap-lain); }
  .bilah-aksi-sesi .menu-arahkan { position: static; }
  .bilah-aksi-sesi .menu-arahkan .menu-isi { left: 12px; right: 12px; bottom: calc(100% + 6px); min-width: 0; }
  table.santri-sesi tr.baris-tanda { background: var(--lain-bg); }
  table.santri-sesi tr.baris-tanda > td { background: none; }
}
@media (max-width: 640px) { table.santri .pil { white-space: normal; } table.santri td { min-width: 0; } }
.label-situs .pil { white-space: normal; overflow-wrap: anywhere; }
.sesi-selesai textarea { min-height: 0; height: 72px; resize: vertical; }

/* ---------- v3.25: tata ulang menu (Tahap 3) ---------- */
.tab a.tab-sub-btn { font: inherit; font-weight: 500; padding: 10px 14px; color: var(--redup); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; }
.tab a.tab-sub-btn:hover { color: var(--teks); }
.tab a.tab-sub-btn[aria-selected="true"] { color: var(--teks); border-bottom-color: var(--aksen); font-weight: 600; }
.saring-situs { margin-bottom: 4px; }
/* Setup: navigasi kiri */
.tata-setup { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.nav-setup { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 4px; }
.nav-setup input[type=search] { width: 100%; box-sizing: border-box; margin-bottom: 4px; }
.nav-setup-kelompok { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.nav-setup-judul { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--redup); padding: 0 10px 4px; }
.nav-setup a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--teks-2); text-decoration: none; font-size: 14px; }
.nav-setup a:hover { background: var(--cekung); color: var(--teks); }
.nav-setup a.aktif { background: var(--aksen-lembut); color: var(--aksen-tua); font-weight: 600; box-shadow: inset 3px 0 0 var(--aksen); }
.hasil-cari-setelan { list-style: none; margin: 0 0 6px; padding: 6px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); display: grid; gap: 2px; }
.hasil-cari-setelan button.tautan { display: block; width: 100%; padding: 6px 8px; border-radius: 6px; font-weight: 500; color: var(--teks); }
.hasil-cari-setelan button.tautan:hover { background: var(--cekung); text-decoration: none; }
.butir-setelan.sorot { background: var(--aksen-lembut); border-radius: 8px; transition: background .4s; }
@media (max-width: 900px) { .tata-setup { grid-template-columns: minmax(0, 1fr); } .nav-setup { position: static; } .nav-setup-kelompok { flex-direction: row; flex-wrap: wrap; } .nav-setup-judul { width: 100%; } }
/* Zona darurat */
.kartu-darurat { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-left: 4px solid var(--bahaya); }
.kartu-darurat h2 { font-size: 17px; margin: 0 0 4px; }
.kartu-darurat p { margin: 0 0 4px; max-width: 760px; }
.kartu-darurat .tombol { flex: none; }
@media (max-width: 640px) { .kartu-darurat { flex-direction: column; align-items: flex-start; } }
/* Beranda: antrean keputusan */
.daftar-antrean li { display: grid; grid-template-columns: minmax(0, 1fr) 56px auto; gap: 14px; align-items: center; }
.jumlah-antrean { font-size: 22px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.untuk-diketahui { padding: 12px 20px; border-top: 1px solid var(--garis); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; }
.untuk-diketahui button.tautan { font-size: 13px; font-weight: 500; }
/* Panel lonceng */
.panel-lonceng { position: fixed; top: 64px; right: 16px; z-index: 30; width: min(400px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 80px)); display: flex; flex-direction: column;
  background: var(--permukaan); border: 1px solid var(--garis-kuat); border-radius: 14px; box-shadow: 0 16px 40px rgb(14 26 23 / .18); overflow: hidden; }
.lonceng-kepala { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 8px; font-size: 16px; }
.lonceng-saring { padding: 0 16px 10px; }
.lonceng-daftar { list-style: none; margin: 0; padding: 0; overflow-y: auto; border-top: 1px solid var(--garis); }
.lonceng-daftar li + li { border-top: 1px solid var(--garis); }
.lonceng-daftar button { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; width: 100%; padding: 11px 16px; border: 0; background: none; text-align: left; font: inherit; color: var(--teks); cursor: pointer; }
.lonceng-daftar button:hover, .lonceng-daftar button:focus-visible { background: var(--cekung); }
.lonceng-daftar .titik { width: 8px; height: 8px; border-radius: 99px; margin-top: 6px; background: var(--garis-kuat); }
.lonceng-daftar li.baru .titik { background: var(--aksen); }
.lonceng-daftar li.kritis .titik { background: var(--bahaya); }
.lonceng-daftar li.baru button { background: color-mix(in srgb, var(--aksen-lembut) 55%, transparent); }
.lonceng-daftar li.kritis.baru button { background: var(--bahaya-bg); }
.lonceng-teks { display: grid; gap: 2px; min-width: 0; }
.lonceng-teks b { font-size: 14px; font-weight: 600; }
.lonceng-teks .kecil { overflow-wrap: anywhere; }
li:not(.baru) .lonceng-teks b { font-weight: 500; }
.lonceng-kosong { padding: 16px; margin: 0; border-top: 1px solid var(--garis); }
.lonceng-kaki { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--garis); color: var(--redup); }
.lonceng-kaki a { font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .panel-lonceng { top: 60px; right: 12px; left: 12px; width: auto; } }
/* Dialog Setujui situs */
.dialog-setujui { width: min(900px, 96vw); }
.dialog-setujui h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); margin: 14px 0 6px; }
.kisi-setujui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.seg-lingkup { display: flex; border: 1px solid var(--garis-kuat); border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
.seg-lingkup button { flex: 1; font: inherit; font-size: 13px; padding: 8px 10px; border: 0; border-left: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks-2); cursor: pointer; }
.seg-lingkup button:first-child { border-left: 0; }
.seg-lingkup button[aria-checked="true"] { background: var(--aksen-lembut); color: var(--aksen-tua); font-weight: 700; }
.pratinjau-lingkup { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--cekung); margin: 6px 0; }
.url-lingkup { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.url-lingkup .ok { color: var(--aktif); font-weight: 700; }
.url-lingkup .tidak { color: var(--bahaya); font-weight: 700; }
.url-lingkup .mono { overflow-wrap: anywhere; }
.pilih-jenis { display: grid; gap: 8px; }
.kartu-jenis { display: grid; gap: 2px; text-align: left; font: inherit; padding: 10px 12px; border: 1px solid var(--garis-kuat); border-radius: 12px; background: var(--permukaan); color: var(--teks); cursor: pointer; }
.kartu-jenis[aria-checked="true"] { border: 2px solid var(--aksen); background: var(--aksen-lembut); padding: 9px 11px; }
.kartu-jenis-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.dialog-setujui label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; margin: 8px 0; }
.kaki-setujui { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--garis); }
@media (max-width: 760px) { .kisi-setujui { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.dialog-setujui textarea { min-height: 0; height: 64px; resize: vertical; }
fieldset { min-width: 0; }
.tata-setup select, .tata-setup input:not([type=checkbox]):not([type=radio]) { max-width: 100%; }
@media (max-width: 640px) { .tata-setup .kisi-2 { grid-template-columns: minmax(0, 1fr); } }
.tata-setup label { min-width: 0; }
.tata-setup select { width: 100%; }
@media (max-width: 640px) { .admin-utama table.tabel:not(.tabel-akun) { display: block; overflow-x: auto; } }
/* v3.30.3 (pedoman 1.9 HP, sisa audit 5.12): Akun › Pengguna menjadi kartu di HP, tidak melebar. */
@media (max-width: 640px) {
  .tabel-akun { min-width: 0; width: 100%; }
  .tabel-akun thead { display: none; }
  .tabel-akun tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pilih akun aksi" ". peran peran" ". kelas kelas" ". dua dua" ". masuk masuk" ". tinjauan tinjauan";
    gap: 4px 10px; padding: 12px 16px; border-bottom: 1px solid var(--garis); align-items: start; }
  .tabel-akun td { border: 0; padding: 0; min-width: 0; }
  .tabel-akun td.kolom-pilih { grid-area: pilih; width: auto; padding-left: 0; }
  .tabel-akun td.c-akun { grid-area: akun; min-width: 0; overflow-wrap: anywhere; }
  .tabel-akun td.c-peran { grid-area: peran; } .tabel-akun td.c-kelas { grid-area: kelas; }
  .tabel-akun td.c-2sv { grid-area: dua; } .tabel-akun td.c-masuk { grid-area: masuk; text-align: left; justify-self: start; overflow-wrap: anywhere; } .tabel-akun td.c-tinjauan { grid-area: tinjauan; }
  .tabel-akun td.kolom-aksi { grid-area: aksi; width: auto; white-space: normal; }
  .tabel-akun .label-hp { display: inline; color: var(--redup); font-size: 13px; }
  .tabel-akun .aksi-baris { flex-wrap: wrap; justify-content: flex-end; }
}
/* v3.29: Kebijakan Enam Jenis dan penyambung (kanvas "Kanvas v3.29 Enam Jenis"). Hanya token DS. */
.kisi-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.kisi-tiga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.kisi-simulasi { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; margin: 10px 0; }
.kisi-simulasi label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; min-width: 0; }
.kisi-simulasi input, .kisi-simulasi select { width: 100%; max-width: 100%; }
.kartu-karakter { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--cekung); min-width: 0; }
.kartu-karakter .daftar-periksa { margin: 0; }
.kartu-karakter .mono { overflow-wrap: anywhere; }
.kartu-antrean { display: grid; gap: 10px; }
.antrean-isi { display: grid; gap: 10px; }
.antrean-jawab { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 8px; border-top: 1px solid var(--garis); }
.impor-teks { width: 100%; max-width: 100%; font-family: var(--mono); font-size: 13px; min-height: 160px; resize: vertical; }
.impor-isi { display: grid; gap: 10px; margin-top: 10px; }
.arsir-tambah { color: var(--aktif); font-weight: 700; margin-right: 6px; }
.arsir-hapus { color: var(--bahaya); font-weight: 700; margin-right: 6px; }
tr.baris-sorot td { background: var(--aksen-lembut); }
.baris-jadwal { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.baris-jadwal select, .baris-jadwal input { width: auto; max-width: 100%; }
.baris-antara { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.meter i.tambahan { background: var(--emas); margin-top: -6px; opacity: .85; }
@media (max-width: 640px) {
  .kisi-dua, .kisi-tiga, .kisi-simulasi { grid-template-columns: minmax(0, 1fr); }
}
.laci-jenis { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: var(--cekung); }
.laci-jenis h3, .laci-karakter h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); margin: 0; }
.laci-jenis label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; min-width: 0; }
.laci-jenis select, .laci-jenis input { width: 100%; max-width: 100%; }
.laci-karakter { display: grid; gap: 8px; }
.kisi-ringkas.kisi-enam { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kisi-enam .pesan { grid-column: 1 / -1; margin: 0; }
.angka-ringkas.perlu b { color: var(--lain); }
@media (max-width: 640px) { .kisi-ringkas.kisi-enam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.angka-ringkas b.teks-panjang { font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
a.angka-ringkas { text-decoration: none; color: inherit; }
a.angka-ringkas:hover, a.angka-ringkas:focus-visible { border-color: var(--aksen); }
a.angka-ringkas b { color: var(--aksen-tua); }

/* v3.29.1: rak Tertutup (jenis 6) di Katalog */
.angka-ringkas.terpilih { background: var(--aksen-lembut); border-color: var(--aksen); box-shadow: inset 0 0 0 1px var(--aksen); }
.rak-tertutup { display: flex; flex-direction: column; gap: 14px; }
.rak-tertutup .panel-kepala { margin-bottom: 0; justify-content: flex-start; }
.rak-tertutup > p { margin: 0; max-width: 70ch; }
.rak-bilah { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.rak-label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 280px; min-width: 0; }
.rak-cari { width: 100%; }
.rak-isi { display: flex; flex-direction: column; gap: 20px; }
.rak-kelompok { display: flex; flex-direction: column; gap: 12px; }
.rak-kelompok h3 { margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--garis); }
.rak-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rak-kartu { border: 1px solid var(--garis); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rak-kartu p { margin: 0; }
.rak-kepala { display: flex; align-items: baseline; gap: 8px; }
.rak-kepala span { font-variant-numeric: tabular-nums; }
.rak-pola { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rak-pola li { font-size: 12px; background: var(--cekung); color: var(--teks); border-radius: 6px; padding: 3px 8px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rak-kartu button.tautan { align-self: flex-start; }
.rak-cocok { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; align-items: start; }
.rak-cocok dt { color: var(--redup); font-size: 13px; padding-top: 3px; }
.rak-cocok dd { margin: 0; }
.rak-kosong b { color: var(--teks); }
.rak-tertutup .pesan { margin: 0; }
@media (max-width: 640px) {
  .rak-kisi { grid-template-columns: minmax(0, 1fr); }
  .rak-cocok { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rak-cocok dd { margin-bottom: 8px; }
  .rak-tertutup .segmen { width: 100%; }
  .rak-tertutup .segmen button { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .rak-kartu button.tautan { min-height: 44px; }
}

/* v3.29.4: Setup › Penyambung › Admin Console */
.daftar-langkah { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.baris-isian { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.baris-isian label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.baris-isian label.isi-ruang { flex: 1 1 320px; }
.baris-isian select { max-width: 100%; }
.kisi-sistem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kisi-sistem > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sel-aksi { white-space: nowrap; text-align: right; }
@media (max-width: 900px) { .kisi-sistem { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kisi-sistem { grid-template-columns: minmax(0, 1fr); } .baris-isian > * { flex: 1 1 100%; } .baris-isian select { width: 100%; } }
.tabel-ac .alasan-ringkas { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 34ch; }
.tabel-ac .sel-cek { width: 32px; }
.tabel-ac .judul-ac { font-weight: 600; margin-top: 4px; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabel-ac .pil + .pil { margin-left: 4px; }
.tabel-akses td:last-child { min-width: 200px; max-width: 240px; white-space: normal; }
.tabel-akses td:last-child .kontrol-keputusan { max-width: 100%; }
.tabel-akses .sel-id .mono { word-break: break-all; }
.tabel-akses td.angka { white-space: nowrap; }
.hasil-periksa-ac { margin: 8px 0; }
.baris-tombol.rapat { gap: 6px; margin-top: 6px; justify-content: flex-start; }
@media (max-width: 640px) {
  .admin-utama table.tabel.tabel-ac { display: block; overflow: visible; }
  .tabel-ac thead { display: none; }
  .tabel-ac tbody, .tabel-ac tr, .tabel-ac td { display: block; }
  .tabel-ac tr { position: relative; border: 1px solid var(--garis); border-radius: 12px; padding: 12px 12px 12px 48px; margin-bottom: 10px; }
  .tabel-ac td { border: 0; padding: 2px 0; }
  .tabel-ac td.sel-cek { position: absolute; left: 12px; top: 12px; width: auto; }
  .tabel-akses td.angka { text-align: left; display: flex; gap: 8px; align-items: baseline; }
  .tabel-akses td.angka > div { display: flex; gap: 8px; align-items: baseline; }
  .tabel-akses td[data-kolom]::before { content: attr(data-kolom); color: var(--teks-2); font-size: 13px; min-width: 104px; }
  .tabel-akses td:last-child { max-width: none; }
  .tabel-ac .alasan-ringkas { max-width: none; }
  .tabel-ac .baris-tombol.rapat button { min-height: 44px; }
}

/* v3.32 (P1): Situs › Izin selebar host (kanvas IzinHost). Isian alasan, pemilik, kedaluwarsa di kolom terakhir daftar keputusan. */
.tabel-izin-host { table-layout: fixed; width: 100%; }
.tabel-izin-host td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.tabel-izin-host .sel-cek { width: 36px; }
.tabel-izin-host th { white-space: normal; }
.tabel-izin-host th:nth-last-child(5) { width: 18%; }
.tabel-izin-host th:nth-last-child(4) { width: 13%; }
.tabel-izin-host th:nth-last-child(3) { width: 16%; }
.tabel-izin-host th:nth-last-child(2) { width: 25%; }
.tabel-izin-host td.sel-id { white-space: normal; max-width: none; overflow: visible; text-overflow: clip; }
.tabel-izin-host td.sel-id .mono { font-size: 13px; }
.tabel-izin-host td .pil { white-space: normal; overflow-wrap: normal; max-width: 100%; margin: 0 4px 4px 0; }
.tabel-izin-host select.kontrol-keputusan { width: 100%; max-width: 100%; font-size: 13px; padding-left: 8px; }
.tabel-izin-host tr.baris-awas { background: var(--lain-bg); }
.isian-izin-host { display: flex; flex-direction: column; gap: 4px; }
.isian-izin-host label { font-size: 12px; font-weight: 600; color: var(--teks-2); }
.isian-izin-host textarea { width: 100%; min-height: 64px; font-size: 13px; }
.baris-isian-izin-host { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.baris-isian-izin-host > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.baris-isian-izin-host select, .baris-isian-izin-host input { width: 100%; min-height: 36px; font-size: 13px; }
.kaki-izin-host { justify-content: space-between; margin-top: 10px; }
.daftar-ditetapkan { display: flex; flex-direction: column; }
.baris-ditetapkan { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--garis); }
.baris-ditetapkan:first-child { border-top: 0; }
.baris-ditetapkan > span:first-child { flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }
.baris-ditetapkan .baris-tombol.rapat { margin-top: 0; align-items: center; }
@media (max-width: 640px) {
  .tabel-izin-host td[data-kolom]::before { content: attr(data-kolom); display: block; color: var(--teks-2); font-size: 13px; margin-top: 6px; }
  .tabel-izin-host { table-layout: auto; }
  .baris-isian-izin-host select, .baris-isian-izin-host input { min-height: 44px; }
}

/* v3.29.4: tombol yang sedang memproses aksi (aksi()): putaran kecil di depan label, warna mengikuti teks tombol. */
.sibuk-tombol { position: relative; cursor: progress; }
.sibuk-tombol::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: putar-sibuk 0.8s linear infinite; }
@keyframes putar-sibuk { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sibuk-tombol::before { animation: none; border-right-color: currentColor; opacity: .6; } }

/* v3.29.7: pemilih OU pilot yang bisa dicari */
.pilih-ou { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: min(100%, 360px); }
.pilih-ou .saran-utama { white-space: normal; overflow-wrap: anywhere; }
.pilih-ou-isi { position: relative; }
.pilih-ou input[type='search'] { width: 100%; }
.pilih-ou .saran { max-height: 320px; overflow-y: auto; }
.saran li.saran-kelompok { cursor: default; padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--redup); }
.saran li.saran-kelompok:hover { background: none; }
.blok-internal { border: 1px solid var(--garis); border-radius: 10px; padding: 10px 12px; margin: 8px 0 12px; background: var(--cekung); }
.blok-internal h3 { margin: 0; font-size: 14px; }
.blok-internal .panel-kepala { margin-bottom: 4px; }

/* v3.29.9: standar Daftar keputusan (pedoman 1.17b) */
.kontrol-keputusan { max-width: 100%; }
.tabel-ac .kontrol-keputusan { min-width: 12ch; }
.bilah-pilih .sembunyi { display: none; }
.kepala-pilih { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kepala-pilih h2 { margin: 0; }
.dialog-ringkas { max-width: min(92vw, 560px); }
.daftar-ringkas-keputusan { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.daftar-ringkas-keputusan summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.daftar-ringkas-keputusan ul { margin: 6px 0 0 16px; padding: 0; max-height: 180px; overflow: auto; }
.daftar-ringkas-keputusan li li { list-style: disc; }

/* v3.30 tahap 2: sesi otomatis ruang mapel (Beranda guru "Ruang mapel hari ini", Kelas dan klub › Sesi otomatis) */
.panel-mapel-hari .panel-kepala p { margin: 2px 0 0; color: var(--redup); }
.panel-mapel-hari .pesan, .panel-mapel-hari .ket-mapel-hari { margin: 12px 20px 0; }
.panel-mapel-hari .ket-mapel-hari { color: var(--redup); }
.panel-mapel-hari .kosong-belum { padding: 28px 20px; }
.daftar-jam { list-style: none; margin: 8px 0 0; padding: 0; }
.baris-jam { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--garis); }
.baris-jam.berjalan { background: var(--aksen-lembut); }
.baris-jam .jam-waktu { display: flex; flex-direction: column; gap: 2px; }
.baris-jam .jam-waktu b { font-variant-numeric: tabular-nums; font-size: 15px; }
.baris-jam .jam-waktu .kecil { color: var(--redup); }
.baris-jam .tindakan-teks a { color: var(--teks); text-decoration: none; }
.baris-jam .tindakan-teks a:hover { color: var(--aksen); text-decoration: underline; }
.baris-jam .jam-keadaan { justify-self: end; }
.baris-jam .jam-aksi { grid-column: 2 / -1; justify-content: flex-start; margin-top: 2px; }
.baris-jam .jam-aksi .tombol { min-height: 44px; }
.baris-jam .jam-aksi .teks-pendek { display: none; }
@media (max-width: 640px) {
  .baris-jam { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 14px; }
  .baris-jam .jam-waktu { flex-direction: row; align-items: baseline; gap: 8px; }
  .baris-jam .jam-keadaan { justify-self: start; }
  .baris-jam .jam-aksi { grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; }
  .baris-jam .jam-aksi .tombol { width: 100%; justify-content: center; }
  .baris-jam .jam-aksi .teks-panjang { display: inline; }
}
.tabel-sesi-otomatis td, .tabel-hari-ini td { vertical-align: top; }
.tabel-sesi-otomatis .sel-ou { min-width: 200px; max-width: 320px; }
.tabel-sesi-otomatis .baris-tombol.rapat { margin-top: 6px; }
.tabel-sesi-otomatis .tombol { white-space: nowrap; }
.daftar-alasan { margin: 6px 0 0; padding-left: 16px; color: var(--lain); }
.daftar-alasan li + li { margin-top: 2px; }
tr.baris-nyala td { background: var(--aksen-lembut); }
.rekap-slot { margin-bottom: 10px; }

/* v3.30.3 (sisa audit 5.8): Kepatuhan › Kontrol: kelompok patuh dilipat, lebar kolom tetap, legenda Tk, glosarium. */
details.lipat-kelompok > summary { list-style: none; cursor: pointer; margin: 0; }
details.lipat-kelompok > summary::-webkit-details-marker { display: none; }
details.lipat-kelompok > summary h2::before { content: "▸"; display: inline-block; width: 1em; color: var(--redup); font-size: 13px; transition: transform .15s; }
details.lipat-kelompok[open] > summary h2::before { transform: rotate(90deg); }
details.lipat-kelompok:not([open]) > summary { margin-bottom: 0; }
details.lipat-kelompok[open] > summary { margin-bottom: 12px; }
table.tabel-kontrol { table-layout: fixed; width: 100%; min-width: 760px; }
table.tabel-kontrol th:nth-child(1) { width: 72px; } table.tabel-kontrol th:nth-child(2) { width: 48px; } table.tabel-kontrol th:nth-child(4) { width: 92px; }
table.tabel-kontrol th:nth-child(5) { width: 160px; } table.tabel-kontrol th:nth-child(6) { width: 220px; }
table.tabel-kontrol td { overflow-wrap: anywhere; }
.legenda-tk .pil { margin-right: 2px; }
.tindak-lanjut { margin-top: 4px; } .tindak-lanjut a { color: var(--aksen); }
.daftar-glosarium { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 8px 0 0; }
.daftar-glosarium dt { font-weight: 600; } .daftar-glosarium dd { margin: 0; }
@media (max-width: 640px) { .daftar-glosarium { grid-template-columns: 1fr; gap: 2px; } .daftar-glosarium dd { margin-bottom: 8px; } }
/* v3.30.3 (sisa audit 5.10): Setup › Kalender, tanggal libur sebagai pemilih tanggal + chip. */
.baris-tambah-tanggal { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.baris-tambah-tanggal .tombol { min-height: 36px; }
.chip-tanggal { max-width: 100%; }
.chip-tanggal .chip { padding-right: 4px; cursor: default; }
/* v3.30.3 (sisa audit 5.3): Akun › Akses, kartu status aturan akses berangka. */
.panel-aturan:not(.baru) { box-shadow: inset 4px 0 0 var(--lain); }
.angka-ringkas-aturan { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 12px; }
.angka-ringkas-aturan .angka-aturan { font-size: 30px; line-height: 1; font-weight: 700; }
/* v3.30.3 (pedoman 1.14): sel identitas santri di Absensi dan Log. */
.identitas-santri { line-height: 1.3; }
.identitas-santri .mono { font-size: 12px; }
table.tabel-absensi td.angka .pecahan { white-space: nowrap; }
/* v3.30.3 (sisa audit 5.1): arsir menit yang berubah antara usulan dan versi sebelumnya di kartu Kebijakan waktu. */
.pita-jadwal { position: relative; }
.pita-jadwal > .arsir-ubah { position: absolute; top: 0; bottom: 0; height: auto; background: repeating-linear-gradient(135deg, transparent 0 3px, var(--lain) 3px 5px); box-shadow: inset 0 0 0 2px var(--lain); z-index: 1; }
.tumpuk-pita { flex: 1; min-width: 120px; display: grid; gap: 2px; }
.pita-lama { opacity: .6; } .pita-lama .pita-jadwal { height: 5px; border-radius: 3px; }
.arsir-ubah-legenda { background: repeating-linear-gradient(135deg, var(--lain-bg) 0 3px, var(--lain) 3px 5px) !important; border-color: var(--lain) !important; }
.ringkas-beda { margin: 0 0 6px; color: var(--teks-2); }
/* v3.30.3 (sisa audit 5.11, kontras mode gelap): blok mode berwarna gelap (Jam tidur) tetap terlihat di tema gelap. */
.pita-jadwal > span:not(.arsir-ubah) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teks) 22%, transparent); }
.panel-aturan .panel-kepala > div:first-child { flex: 1 1 360px; min-width: 0; }
.panel-aturan .panel-kepala > .pil { align-self: flex-start; }
@media (max-width: 640px) {
  .tabel-akun .akun-sel { align-items: flex-start; }
  .tabel-akun .akun-sel > div { min-width: 0; }
  .tabel-akun .akun-sel .mono { overflow-wrap: anywhere; white-space: normal; }
}
/* v3.30.3 (sisa audit 5.7): menu ⋯ di baris terakhir tabel tidak terpotong wadah gulir selama terbuka. */
.bungkus-tabel:has(details.menu-titik[open]), .gulir-tabel:has(details.menu-titik[open]) { overflow: visible; }
.panel-akun:has(details.menu-titik[open]) { overflow: visible; }

/* ---------- v3.31: sesi terarah dari RPP (kanvas papan 2–5, 9–11) ---------- */
details.panel > summary { cursor: pointer; }
details.panel > summary + * { margin-top: 12px; }
.baris-judul-rpp { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kepala-rpp { margin-bottom: 14px; }
.kepala-rpp .panel-kepala { margin-bottom: 6px; }
.kepala-rpp > p.kecil { margin: 0 0 8px; color: var(--teks-2); }
.label-kelompok { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.tumpuk-isian { display: flex; flex-direction: column; gap: 10px; }
.tumpuk-isian label, .kisi-sumber-rpp label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.tumpuk-isian label .kecil, .kisi-sumber-rpp label .kecil { font-weight: 400; }
.tumpuk-isian label.label-sebaris { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.kisi-sumber-rpp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 12px; }
.kisi-sumber-rpp textarea, .kisi-sumber-rpp input[type="url"], .kisi-sumber-rpp input[type="text"] { width: 100%; }
.daftar-langkah-fims { margin: 0 0 8px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.hasil-baca-rpp:not(:empty) { margin-top: 12px; }
.sumber-rpp > .pesan { margin-top: 12px; }
.langkah-baca { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; font-size: 14px; }
.langkah-baca li { display: flex; gap: 10px; align-items: flex-start; background: var(--cekung); border-radius: 10px; padding: 10px 12px; }
.titik-ok { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--aktif); }
.ringkas-usulan { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 12px 16px; font-size: 14px; margin-bottom: 14px; }
.pemisah-teks { color: var(--garis-kuat); }
.tujuan-sesi { margin: -4px 0 14px; }
.usulan-rpp > .panel + .panel, .usulan-rpp > .lipat-baca { margin-bottom: 14px; }
.usulan-rpp .kartu-langkah { padding: 0; overflow: hidden; margin: 0 0 14px; }
.kartu-langkah.perlu-persetujuan { border-color: var(--lain-garis); }
.kartu-langkah.dilewati .kartu-langkah-isi, .kartu-langkah.dilewati .kartu-langkah-alasan { opacity: .55; }
.kartu-langkah-kepala { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; padding: 14px 20px; border-bottom: 1px solid var(--garis); }
.kartu-langkah.perlu-persetujuan .kartu-langkah-kepala { background: var(--lain-sorot); }
.kartu-langkah-judul { flex: 1 1 320px; min-width: 0; }
.label-langkah { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--redup); text-transform: uppercase; }
.kartu-langkah-judul h2 { font-size: 18px; overflow-wrap: anywhere; }
.tujuan-langkah { margin: 4px 0 0; font-size: 14px; }
.kisi-ubah-langkah { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 120px; gap: 10px; margin-top: 10px; }
.kisi-ubah-langkah label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.kisi-ubah-langkah input { width: 100%; min-width: 0; }
.kartu-langkah-keputusan { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kartu-langkah-keputusan select { min-width: 220px; min-height: 40px; }
.kartu-langkah-isi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 14px 20px; }
.segmen-mode { flex-wrap: wrap; }
.kisi-aturan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 14px; }
.cek-aturan, .tumpuk-isian label.cek-aturan { display: flex; flex-direction: row; gap: 8px; align-items: center; font-size: 14px; font-weight: 400; }
.cek-aturan input:disabled + span { color: var(--teks-2); }
.tabel-situs-langkah { width: 100%; font-size: 13px; }
.tabel-situs-langkah td { vertical-align: top; }
.tabel-situs-langkah .mono { overflow-wrap: anywhere; }
.tabel-situs-langkah .c-keputusan select { width: 100%; min-width: 150px; min-height: 36px; }
tr.baris-perlu td { background: var(--lain-sorot); }
.kartu-langkah-alasan { padding: 10px 20px; background: var(--cekung); border-top: 1px solid var(--garis); font-size: 13px; color: var(--teks-2); }
.kartu-langkah-alasan b { color: var(--teks); }
/* v3.32: yang dilihat santri (petunjuk, lembar kerja) dan panel lembar kerja di layar sesi */
.untuk-santri-langkah { grid-column: 1 / -1; border-top: 1px solid var(--garis); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.untuk-santri-langkah p { margin: 0; }
.daftar-petunjuk, .daftar-butir-lembar { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; overflow-wrap: anywhere; }
.daftar-butir-lembar.ubah li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.daftar-butir-lembar.ubah input { flex: 1 1 220px; min-width: 0; }
.santri-ubah textarea, .santri-ubah input[type="text"] { width: 100%; min-width: 0; }
.panel-lembar-langkah { display: flex; flex-direction: column; gap: 10px; }
.panel-lembar-langkah .panel-kepala { margin: 0; }
.daftar-jawaban-lembar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.kartu-jawaban-lembar { border: 1px solid var(--garis); border-radius: 10px; padding: 10px 12px; background: var(--permukaan); display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; }
.jawaban-per-butir { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.tanggapan-ustadz { color: var(--teks-2); }
.isian-tanggapan { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.isian-tanggapan input { flex: 1 1 180px; min-width: 0; }
.kaki-usulan { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; background: var(--cekung); border-radius: 10px; padding: 12px 16px; font-size: 14px; margin-bottom: 8px; }
.lipat-sumber, .lipat-usulan { margin-top: 14px; }
/* Sesi berjalan per langkah */
.sesi-langkah { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.sesi-langkah > .panel-kepala { margin: 0; }
.langkah-stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.langkah-stepper li { display: flex; gap: 10px; align-items: flex-start; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 10px 12px; font-size: 13px; min-width: 0; }
.langkah-stepper li.langkah-berjalan { background: var(--aksen-lembut); border-color: var(--aksen); }
.langkah-stepper li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.nomor-langkah { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cekung); color: var(--redup); font-weight: 700; }
.langkah-selesai .nomor-langkah { background: var(--aktif-bg); color: var(--aktif); }
.langkah-berjalan .nomor-langkah { background: var(--aksen); color: var(--aksen-teks); }
.kartu-langkah-aktif { border: 1px solid var(--aksen); background: var(--aksen-lembut); border-radius: 12px; padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.kartu-langkah-aktif-utama { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kartu-langkah-aktif-utama h2 { font-size: 20px; }
.kartu-langkah-aktif-utama p { margin: 0; font-size: 14px; }
.baris-sisa { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.angka-sisa { font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.meter-langkah { height: 8px; background: var(--permukaan); }
.aksi-langkah { margin-top: 4px; }
.kartu-langkah-aktif-samping { display: flex; flex-direction: column; gap: 10px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 10px; padding: 12px 14px; font-size: 14px; min-width: 0; }
.kartu-langkah-aktif-samping .mono { overflow-wrap: anywhere; }
.pil-aturan { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pil-aturan .pil { white-space: normal; }
.pil-rekap { display: flex; gap: 6px; flex-wrap: wrap; }
.perhatian-langkah { display: flex; flex-direction: column; gap: 8px; background: var(--cekung); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; }
.baris-perhatian { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--garis); padding-top: 8px; }
.baris-perhatian > span { flex: 1 1 240px; min-width: 0; }
.baris-perhatian .mono { overflow-wrap: anywhere; }
/* v3.32 (P3): santri di luar langkah lebih dari ambang (kanvas disetujui Mudir 10 Okt). */
.kotak-luar-langkah { display: flex; flex-direction: column; gap: 10px; background: var(--lain-bg); border: 1px solid var(--lain-garis); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.kepala-luar-langkah { display: flex; gap: 10px; align-items: flex-start; }
.kepala-luar-langkah > svg { flex: none; margin-top: 2px; color: var(--lain); }
.kepala-luar-langkah h3 { margin: 0 0 2px; font-size: 16px; }
.kepala-luar-langkah p { margin: 0; font-size: 14px; color: var(--teks-2); }
.baris-luar-langkah { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--lain-garis); padding-top: 10px; }
.nama-luar { display: flex; flex-direction: column; gap: 1px; flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.kotak-luar-langkah > .kecil { color: var(--redup); margin: 0; }
/* HP guru (kanvas P3, papan Hp): dua tombol sama lebar per baris; "Pesan…" ada di bilah bawah layar sesi. */
@media (max-width: 640px) {
  .baris-luar-langkah { flex-direction: column; align-items: stretch; }
  .kotak-luar-langkah .baris-tombol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kotak-luar-langkah .baris-tombol .tombol { min-height: 44px; justify-content: center; }
  .kotak-luar-langkah .pesan-luar { display: none; }
  .baris-luar-langkah > .pil { align-self: flex-start; }
}
.kisi-santri-langkah { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; font-size: 13px; }
.kartu-santri-langkah { display: grid; gap: 1px; border: 1px solid var(--garis); border-radius: 10px; padding: 8px 10px; background: var(--permukaan); box-shadow: inset 4px 0 0 var(--mati); min-width: 0; }
.kartu-santri-langkah > * { overflow-wrap: anywhere; }
.kartu-santri-langkah.st-aktif { box-shadow: inset 4px 0 0 var(--aktif); }
.kartu-santri-langkah.st-lain { box-shadow: inset 4px 0 0 var(--lain); background: var(--lain-sorot); border-color: var(--lain-garis); }
.kartu-santri-langkah.st-bahaya { box-shadow: inset 4px 0 0 var(--bahaya); border-color: var(--bahaya-garis); }
.teks-aktif { color: var(--aktif); font-weight: 600; } .teks-mati { color: var(--mati); font-weight: 600; } .kartu-santri-langkah .teks-lain, .kartu-santri-langkah .teks-bahaya { font-weight: 600; }
.panel-kelas-langkah .legenda { margin-top: 12px; }
.catatan-langkah ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.jam-catatan { display: inline-block; width: 56px; color: var(--redup); }
.bilah-aksi-sesi .aksi-langkah-utama { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .bilah-aksi-sesi.ada-langkah .aksi-langkah-utama { min-height: 52px; font-size: 16px; }
  .kartu-langkah-aktif { grid-template-columns: minmax(0, 1fr); }
  .angka-sisa { font-size: 40px; }
  .kisi-santri-langkah { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .langkah-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kartu-langkah-isi, .kisi-sumber-rpp, .kisi-ubah-langkah { grid-template-columns: minmax(0, 1fr); }
  .kartu-langkah-keputusan select { min-width: 0; width: 100%; }
  .kartu-langkah-keputusan { width: 100%; }
  .kisi-aturan { grid-template-columns: minmax(0, 1fr); }
  .tabel-situs-langkah thead { display: none; }
  .tabel-situs-langkah tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px 0; border-top: 1px solid var(--garis); }
  .tabel-situs-langkah td { display: block; padding: 0; border: 0; background: transparent; }
  .tabel-situs-langkah td.c-keputusan { grid-column: 1 / -1; }
  .segmen-mode { display: flex; flex-direction: column; }
  .kaki-usulan .baris-tombol, .kaki-usulan .baris-tombol .tombol { width: 100%; }
  .kaki-usulan .tombol { min-height: 44px; }
  body:has(.bilah-aksi-sesi.ada-langkah) main { padding-bottom: 200px; }
}
/* Berita acara: sesi terarah */
.berita-terarah { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.berita-terarah h3 { margin: 4px 0 0; }
.berita-terarah .kisi-ringkas { margin-bottom: 4px; }
.berita-terarah .angka-ringkas.kosong-belum b { color: var(--redup); }
.berita-terarah .panel-kepala { margin-bottom: 0; }
.tabel-langkah-ba { font-size: 14px; width: 100%; }
.tabel-langkah-ba td { vertical-align: top; }
.tabel-langkah-ba td:first-child { min-width: 170px; }
.berita-terarah ul.kecil { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.grafik-lima-menit { display: block; max-width: 100%; height: auto; font-family: var(--huruf); }
.grafik-wadah .gulir-tabel { overflow-x: auto; }
/* Setup › Aturan interaksi */
.aturan-interaksi > .panel-kepala { margin-bottom: 0; }
.tabel-aturan td { vertical-align: top; }
.tabel-aturan td:nth-child(2) { min-width: 320px; }
.tabel-aturan td:nth-child(2) .kecil { max-width: 60ch; }
.tabel-aturan .pil-aturan { margin-top: 0; }
.kartu-mode { border: 1px solid var(--garis-kuat); background: var(--permukaan); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.kartu-mode.kbm { border-color: var(--aksen); background: var(--aksen-lembut); }
.kartu-mode p { margin: 0; }
.kisi-batas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 14px; }
.ubin-batas { background: var(--cekung); border-radius: 10px; padding: 12px 14px; }
.ubin-batas p { margin: 4px 0 0; color: var(--teks-2); }
@media (max-width: 640px) {
  .kisi-batas { grid-template-columns: minmax(0, 1fr); }
  .tabel-aturan thead { display: none; }
  .tabel-aturan tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 0; border-top: 1px solid var(--garis); }
  .tabel-aturan td, .tabel-aturan td:nth-child(2) { display: block; padding: 0; border: 0; background: transparent; min-width: 0; }
}

/* ---------- v3.33 (agen c): jenis 4 Mandiri terjadwal: permintaan akses, pemantauan ruang, ruang tugas kelas (kanvas papan 4, 5, 6, 9, 10) ---------- */
.bilah-pilih button.sembunyi { display: none; }
.keadaan-pa { margin-top: 12px; }
.kalimat-halaman { margin: 0 0 12px; color: var(--teks-2); }
.hitung-tab { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--redup); background: var(--cekung); border-radius: 999px; padding: 0 7px; }
.hasil-pa { display: grid; gap: 6px; margin-bottom: 12px; }
.hasil-pa .pesan { margin: 0; }
.hasil-pa .baris-tombol.kiri { margin-top: 0; }
.isi-pa > .chip-baris, .isi-pa > .pesan { margin: 0; }
.kisi-kpi-pa { margin: 0 0 6px; }
.kisi-kpi-pa .kpi { gap: 6px; padding: 14px 16px; }
.kisi-kpi-pa .kpi-nilai { font-size: 26px; }
.kpi.perlu .kpi-nilai { color: var(--lain); }
.catatan-angka { margin: 0 0 12px; }
.daftar-pa { display: grid; gap: 14px; }
.kartu-pa { display: grid; gap: 10px; border-left-width: 4px; }
.kartu-pa.perlu { border-left-color: var(--lain); }
.kartu-pa.henti, .kartu-pa.tolak { border-left-color: var(--bahaya); }
.kartu-pa-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; }
.kartu-pa-judul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.kartu-pa-judul h3 { font-size: 17px; overflow-wrap: anywhere; }
.kartu-pa-judul input[type=checkbox] { margin: 0 2px 0 0; }
.kartu-pa-sub { margin: -4px 0 0; }
.tautan-riwayat { white-space: nowrap; color: var(--teks-2); }
.kartu-pa-isi { display: grid; gap: 16px; min-width: 0; }
.kartu-pa-isi.dua { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); align-items: start; }
.kartu-pa-utama { display: grid; gap: 12px; min-width: 0; }
.rinci-pa { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.rinci-pa dt { color: var(--redup); }
.rinci-pa dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.rinci-pa dd > div + div { margin-top: 2px; }
.uraian-pa { display: block; margin-top: 4px; padding: 6px 10px; border-left: 3px solid var(--garis-kuat); background: var(--cekung); border-radius: 0 8px 8px 0; color: var(--teks-2); quotes: none; }
.daftar-situs-pa, .daftar-periksa-pa, .daftar-tanda-pa, .daftar-situs-tugas, .daftar-prasyarat-pa, .riwayat-pa { list-style: none; margin: 0; padding: 0; }
.daftar-situs-pa li + li { margin-top: 4px; }
.daftar-situs-pa .mono, .daftar-situs-tugas .mono, .tabel-pantau .mono, .tabel-ruang-tugas .mono, .baris-jawab-situs .mono { overflow-wrap: anywhere; }
.bagian-pa { border: 1px solid var(--garis); border-radius: 10px; padding: 10px 14px; }
.bagian-pa h4, .putus-pa h4 { margin: 0 0 6px; font-size: 14px; }
.daftar-periksa-pa li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 7px 0; border-top: 1px solid var(--garis); font-size: 14px; }
.daftar-periksa-pa li:first-child { border-top: 0; }
.daftar-periksa-pa .pil, .daftar-tanda-pa .pil { justify-self: start; }
.langkah-pa { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.langkah-pa li { display: inline-flex; gap: 6px; align-items: baseline; color: var(--redup); }
.langkah-pa li b { font-weight: 600; color: var(--teks-2); }
.langkah-ikon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--cekung); color: var(--redup); flex: none; }
.langkah-selesai .langkah-ikon { background: var(--aktif-bg); color: var(--aktif); }
.langkah-berjalan .langkah-ikon { background: var(--lain-bg); color: var(--lain); }
.langkah-berjalan b { color: var(--teks); }
.putus-pa { background: var(--cekung); border-radius: 12px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.putus-pa.tunggu { background: transparent; padding: 0; }
.putus-pa.tunggu .pesan { margin: 0; }
.putus-pa .kecil { margin: 0; }
.putus-pa .baris-tombol { justify-content: stretch; }
.putus-pa .baris-tombol .tombol { flex: 1 1 auto; min-height: 40px; }
.centang-pa { display: flex; flex-direction: row; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 600; }
.centang-pa input { margin: 2px 0 0; flex: none; }
.perhatian-pa { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.perhatian-pa legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.perhatian-pa .centang-pa { font-weight: 400; }
.isian-pa { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.isian-pa textarea, .isian-pa select { width: 100%; font-weight: 400; }
.isian-pa textarea { min-height: 64px; font-family: var(--huruf); font-size: 14px; background: var(--permukaan); }
.hasil-kartu:empty { display: none; }
.hasil-kartu .pesan { margin: 0; }
/* Guru mapel: dua pertanyaan (papan 5) */
.kepala-tanya h1 { margin-top: 2px; }
.fakta-pa { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.fakta-pa span { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--teks-2); }
.fakta-pa b { font-family: var(--mono); color: var(--teks); }
.form-jawab-pa { display: grid; gap: 16px; margin-top: 14px; }
.form-jawab-pa > p { margin: -8px 0 0; }
.tanya-pa { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.tanya-pa legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 8px; }
.baris-jawab { display: flex; flex-wrap: wrap; gap: 8px; }
.baris-jawab.tegak { flex-direction: column; }
.pilih-jawab { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--garis-kuat); border-radius: 10px; background: var(--permukaan); cursor: pointer; font-size: 14px; }
.pilih-jawab:has(input:checked) { border-color: var(--aksen); background: var(--aksen-lembut); font-weight: 600; }
.pilih-jawab:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; }
.pilih-jawab input { margin: 0; }
.daftar-jawab-situs { display: grid; gap: 0; }
.baris-jawab-situs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--garis); }
.baris-jawab-situs:first-child { border-top: 0; }
/* Pemantauan (papan 9) */
.daftar-tanda-pa li { display: grid; grid-template-columns: 150px 110px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--garis); font-size: 14px; }
.tanda-waktu { padding-top: 2px; }
.kartu-pa.henti .pesan { margin: 0; }
.tabel-pantau td { vertical-align: top; }
.tabel-pantau td.c-situs { min-width: 160px; max-width: 220px; }
.tabel-ruang-tugas td.c-situs { max-width: none; }
.tabel-pantau td.c-santri { min-width: 130px; }
.tabel-pantau .identitas-santri .mono { display: none; }
.tabel-pantau .satu-baris, .tabel-pantau td.c-tanda summary, .tabel-pantau td.c-tanda > .kecil { white-space: nowrap; }
.tabel-pantau th { white-space: normal; vertical-align: bottom; }
.tabel-pantau td.c-pakai, .tabel-pantau td.c-cocok { min-width: 72px; }
.tabel-pantau td.c-situs .pil { margin: 4px 4px 0 0; }
.tabel-pantau td.c-status .pil + .pil { margin: 4px 0 0 4px; }
.tabel-pantau tr.ada-kuat td:first-child { box-shadow: inset 3px 0 0 var(--bahaya); }
.tabel-pantau tr.ada-lemah td:first-child { box-shadow: inset 3px 0 0 var(--lain); }
.tanda-pa summary { cursor: pointer; font-size: 13px; white-space: nowrap; }
.tanda-pa ul { margin: 6px 0 0; padding-left: 16px; max-width: 320px; }
.catatan-tabel { margin: 0; padding: 12px 20px; border-top: 1px solid var(--garis); }
.dialog-kunjungan .panel-kepala { align-items: flex-start; }
.dialog-kunjungan .panel-kepala p { margin: 2px 0 0; }
.dialog-kunjungan .panel-kepala .baris-tombol { align-items: center; }
.tabel-rinci-kunjungan td.c-url { max-width: 320px; overflow-wrap: anywhere; }
.dialog-kunjungan tr.situs-ruang td:first-child { box-shadow: inset 3px 0 0 var(--aktif); }
/* Ruang tugas kelas (papan 4) */
.judul-bagian { margin: 4px 0 10px; }
.daftar-situs-tugas li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--garis); }
.daftar-situs-tugas li .kecil { grid-column: 2; }
.daftar-situs-tugas .pil { justify-self: start; }
.kartu-tugas > .pesan, .kartu-tugas > p { margin: 0; }
.kaki-tugas { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tabel-ruang-tugas td { vertical-align: top; }
.tabel-ruang-tugas td.c-sampai .pil { margin-top: 4px; }
.daftar-prasyarat-pa li { padding: 6px 0; border-top: 1px solid var(--garis); font-size: 14px; }
.daftar-prasyarat-pa li:first-child { border-top: 0; }
.riwayat-pa li { padding: 6px 0; border-top: 1px solid var(--garis); }
.riwayat-pa li:first-child { border-top: 0; }
/* v3.35: akses situs C lewat permintaan (tingkat per situs, persetujuan situs C, lama akses, dasar wali). */
.situs-tingkat-pa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ket-situs-c { font-size: 13px; }
.daftar-titik-pa { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.lama-pa { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.lama-pa legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.lama-pa legend .teks-redup { font-weight: 400; }
.lama-pa .centang-pa { font-weight: 400; }
.singkat-pa > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lama-pa input[type=date], .lama-pa input[type=time] { font: inherit; font-size: 14px; min-height: 36px; padding: 4px 8px; border: 1px solid var(--garis-kuat); border-radius: 8px; background: var(--permukaan); color: var(--teks); max-width: 100%; }
.atur-lama-pa { display: grid; gap: 10px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); }
.atur-lama-pa[hidden] { display: none; }
.dua-isian-pa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dua-isian-pa > label { min-width: 0; }
.dua-isian-pa .isian-tanggal { display: grid; gap: 2px; min-width: 0; }
.dua-isian-pa input { width: 100%; min-width: 0; box-sizing: border-box; }
.bagian-c-pa .daftar-periksa-pa li { grid-template-columns: 156px minmax(0, 1fr); }
.hari-pa { border: 0; margin: 0; padding: 0; min-width: 0; }
.hari-pa legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.chip-hari-pa { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 8px; border: 1px solid var(--garis-kuat); border-radius: 999px; font-size: 13px; font-weight: 400; cursor: pointer; }
.chip-hari-pa input { width: 16px; height: 16px; min-height: 0; margin: 0; flex: none; }
.chip-hari-pa:has(input:checked) { border-color: var(--aksen); background: var(--info-bg); }
.ringkas-lama-pa .teks-galat-pa, .teks-galat-pa { color: var(--bahaya); }
.judul-kecil-pa { margin: 0 0 6px; font-size: 15px; }
.form-dasar-wali { display: grid; gap: 10px; max-width: 640px; }
.form-dasar-wali input[type=text], .form-dasar-wali input[type=date] { width: 100%; box-sizing: border-box; font-weight: 400; }
.form-dasar-wali .baris-tombol { justify-content: flex-end; }
.riwayat-dasar-wali summary { cursor: pointer; font-weight: 600; min-height: 32px; }
@media (max-width: 900px) {
  .kartu-pa-isi.dua { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .kartu-pa { padding: 14px; }
  .kisi-kpi-pa .kpi { padding: 12px 14px; }
  .kisi-kpi-pa .kpi-nilai { font-size: 22px; white-space: nowrap; }
  .rinci-pa { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .rinci-pa dt { margin-top: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
  .daftar-periksa-pa li, .daftar-tanda-pa li { grid-template-columns: minmax(0, 1fr); }
  .baris-jawab-situs { grid-template-columns: minmax(0, 1fr); }
  .baris-jawab .pilih-jawab { flex: 1 1 auto; justify-content: center; }
  .putus-pa .baris-tombol .tombol, .form-jawab-pa .baris-tombol .tombol, .kaki-tugas .tombol { min-height: 44px; width: 100%; }
  .lama-pa .centang-pa { min-height: 44px; align-items: center; }
  .chip-hari-pa { min-height: 44px; }
  .form-dasar-wali .baris-tombol .tombol { width: 100%; min-height: 44px; }
  .kaki-tugas .baris-tombol { width: 100%; flex-direction: column-reverse; }
  /* Tabel pemantauan dan ruang tugas menjadi kartu (pedoman 1.9). */
  .tabel-pantau thead, .tabel-ruang-tugas thead { display: none; }
  .tabel-pantau, .tabel-pantau tbody, .tabel-ruang-tugas, .tabel-ruang-tugas tbody { display: block; }
  .tabel-pantau tr, .tabel-ruang-tugas tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px; border-top: 1px solid var(--garis); }
  .tabel-pantau td, .tabel-ruang-tugas td { display: block; padding: 0; border: 0; grid-column: 1 / -1; min-width: 0; max-width: none; text-align: left; white-space: normal; }
  .tabel-pantau td[data-label]:not(.c-santri):not(.c-tugas)::before, .tabel-ruang-tugas td[data-label]:not(.c-tugas)::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--redup); margin-top: 6px; }
  .tabel-pantau td.c-santri, .tabel-ruang-tugas td.c-tugas { grid-column: 1; }
  .tabel-pantau td.c-aksi, .tabel-ruang-tugas td.c-aksi { grid-column: 2; grid-row: 1; align-self: start; }
  .tabel-pantau td.c-situs { min-width: 0; }
  .tabel-pantau tr.ada-kuat, .tabel-pantau tr.ada-lemah { box-shadow: inset 3px 0 0 var(--bahaya); }
  .tabel-pantau tr.ada-lemah { box-shadow: inset 3px 0 0 var(--lain); }
  .tabel-pantau tr td:first-child { box-shadow: none !important; }
  .tabel-pantau .menu-baris summary { min-width: 44px; min-height: 40px; display: grid; place-items: center; }
  .tabel-ruang-tugas td.c-aksi .tombol { min-height: 40px; }
  .daftar-situs-tugas li { grid-template-columns: minmax(0, 1fr); }
  .daftar-situs-tugas li .kecil { grid-column: 1; }
  .catatan-tabel { padding: 12px 14px; }
}
/* ---------- akhir v3.33 jenis 4 ---------- */


/* v3.32.7: Laporan › Kepatuhan santri (papan 1 sampai 3, 5, 7). Warna hanya token: seri grafik untuk jenis situs, bahaya/lain untuk status. */
.kepatuhan-santri .panel-kepala h2 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.saring-kepatuhan { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.saring-kepatuhan > label, .saring-kepatuhan .saring-jendela { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--redup); }
.saring-kepatuhan select { min-width: 160px; max-width: 100%; }
.segmen button:disabled { opacity: .5; cursor: not-allowed; }
.kpi-belum .kpi-nilai { color: var(--redup); }
.kisi-kpi-tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.batang-kepatuhan { height: 8px; border-radius: 999px; background: var(--cekung); overflow: hidden; display: flex; min-width: 72px; flex: 1 1 auto; }
.batang-kepatuhan-isi { height: 100%; border-radius: 999px; }
.warna-seri-0 { background: var(--seri-0); } .warna-seri-1 { background: var(--seri-1); } .warna-seri-2 { background: var(--seri-2); } .warna-seri-3 { background: var(--seri-3); } .warna-seri-5 { background: var(--seri-5); }
.warna-bahaya { background: var(--bahaya); } .warna-lain { background: var(--lain); } .warna-aksen { background: var(--aksen); }
.kisi-jenis-kepatuhan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.kolom-jenis-kepala { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.tumpuk-batang-kepatuhan { display: flex; flex-direction: column; gap: 8px; }
.batang-kepatuhan-baris { display: flex; flex-direction: column; gap: 4px; }
.batang-kepatuhan-label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.batang-kepatuhan-sel { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.batang-kepatuhan-sel > .angka { width: 40px; flex: none; }
.tabel-kepatuhan tr.baris-sorot-kepatuhan td { background: var(--lain-sorot); }
.tabel-kepatuhan td.sel-tren { min-width: 128px; }
.tabel-kepatuhan td.sel-tren .garis-kecil { width: 120px; }
.tabel-kepatuhan td.sel-aksi { white-space: nowrap; }
.tabel-kepatuhan .teks-lain { color: var(--lain); font-weight: 600; }
.tabel-kepatuhan-host td.sel-keputusan { min-width: 220px; max-width: 320px; white-space: normal; }
.tabel-kepatuhan-host td.sel-keputusan .kontrol-keputusan { max-width: 100%; }
.tabel-kepatuhan-host tr.baris-diputuskan td { color: var(--teks-2); }
.kaki-kepatuhan-host { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.jejak-kepatuhan { margin-bottom: 6px; }
.jejak-kepatuhan a { color: var(--redup); text-decoration: none; font-weight: 500; }
.jejak-kepatuhan a:hover { color: var(--teks); }
.profil-kepatuhan { display: flex; gap: 14px; align-items: center; }
.profil-kepatuhan h1 { margin: 0; }
.kepala-kepatuhan-santri .pil-baris { align-items: center; gap: 8px; }
.legenda-kepatuhan { margin-top: 0; }
.legenda-kepatuhan i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.batang-kepatuhan-hari { display: flex; gap: 6px; align-items: flex-end; margin-top: 14px; }
.batang-kepatuhan-kolom { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; text-align: center; }
.batang-kepatuhan-kolom > .kecil { white-space: nowrap; overflow: hidden; max-width: 100%; }
.batang-kepatuhan-kolom.tidak-melapor .batang-kepatuhan-tumpuk { border: 1px dashed var(--garis-kuat); border-radius: 4px; }
.batang-kepatuhan-tumpuk { width: 100%; display: flex; flex-direction: column-reverse; gap: 2px; justify-content: flex-start; box-sizing: border-box; }
.batang-kepatuhan-lapis { width: 100%; border-radius: 3px; flex: none; }
.pil-mini { font-size: 10px; padding: 0 6px; }
@media (max-width: 900px) { .kisi-kpi-tiga { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .kisi-jenis-kepatuhan, .kisi-dua-kepatuhan { grid-template-columns: minmax(0, 1fr); }
  .saring-kepatuhan > * { flex: 1 1 100%; }
  .saring-kepatuhan select, .saring-kepatuhan .segmen { width: 100%; box-sizing: border-box; }
  .saring-kepatuhan .tombol { width: 100%; min-height: 44px; }
  .admin-utama table.tabel.tabel-kartu-hp, table.tabel.tabel-kartu-hp { display: block; overflow: visible; }
  .tabel-kartu-hp thead { display: none; }
  .tabel-kartu-hp tbody, .tabel-kartu-hp tr, .tabel-kartu-hp td { display: block; }
  .tabel-kartu-hp tr { border: 1px solid var(--garis); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--permukaan); }
  .tabel-kepatuhan.tabel-kartu-hp tr.baris-sorot-kepatuhan { background: var(--lain-sorot); border-color: var(--lain-garis); }
  .tabel-kepatuhan.tabel-kartu-hp tr.baris-sorot-kepatuhan td { background: transparent; }
  .tabel-kartu-hp td { border: 0; padding: 2px 0; text-align: left; white-space: normal; }
  .tabel-kartu-hp td[data-kolom]::before { content: attr(data-kolom) ": "; color: var(--teks-2); font-size: 13px; }
  .tabel-kartu-hp td.sel-tren, .tabel-kartu-hp td.sel-cek, .tabel-kartu-hp th.sel-cek { display: none; }
  .tabel-kartu-hp td.sel-aksi { padding-top: 6px; }
  .tabel-kartu-hp td.sel-aksi a { font-weight: 600; }
  .tabel-kepatuhan-host td.sel-keputusan { min-width: 0; max-width: none; }
  .batang-kepatuhan-hari { gap: 3px; }
  .batang-kepatuhan-kolom > .kecil { font-size: 10px; }
  .batang-kepatuhan-kolom .pil-mini { display: none; }
  .profil-kepatuhan { align-items: flex-start; }
  .profil-kepatuhan h1 { font-size: 22px; overflow-wrap: anywhere; }
  .kepala-kepatuhan-santri .kecil { overflow-wrap: anywhere; }
}

/* v3.32.7 (c): tab Kepatuhan di ruang belajar (guru, papan 4) dan kartu Binaan saya (PDC, papan 6). Warna hanya token. */
.kepatuhan-ruang .kisi-kpi-tiga { margin-bottom: 0; }
.kepatuhan-ruang .panel-kepala h2, .kartu-binaan-panel .panel-kepala h2 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.kepatuhan-ruang .panel-kepala > .tautan { white-space: nowrap; }
.grafik-sesi-kepatuhan { display: block; max-width: 100%; }
.batang-sesi-kepatuhan { cursor: pointer; outline: none; }
.batang-sesi-kepatuhan:hover rect:last-of-type, .batang-sesi-kepatuhan:focus-visible rect:last-of-type { opacity: .8; }
.batang-sesi-kepatuhan:focus-visible rect:first-of-type { fill: var(--aksen-lembut); stroke: var(--fokus); stroke-width: 2; }
.saran-rpp-kepatuhan { margin-top: 12px; border-top: 1px solid var(--garis); padding-top: 10px; }
.saran-rpp-kepatuhan ul { margin: 4px 0 6px; padding-left: 20px; display: grid; gap: 4px; }
.saran-rpp-kepatuhan p { margin: 0; }
.daftar-binaan { display: flex; flex-direction: column; gap: 10px; }
.kartu-binaan { border: 1px solid var(--garis); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--permukaan); }
.kartu-binaan.perhatian { background: var(--lain-sorot); border-color: var(--lain-garis); }
.kartu-binaan-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.kartu-binaan-batang { display: flex; align-items: center; gap: 8px; }
.kartu-binaan-batang > .kecil { width: 110px; flex: none; }
.kartu-binaan-aksi { display: flex; gap: 14px; flex-wrap: wrap; }
.kartu-binaan-aksi a, .kartu-binaan-aksi button.tautan { font-weight: 600; }
.tombol-binaan-lagi { margin-top: 10px; width: 100%; }
.beranda-pdc .daftar-cerita { margin-top: 8px; }
@media (max-width: 640px) {
  .kepatuhan-ruang .kisi-kpi-tiga { grid-template-columns: minmax(0, 1fr); }
  .kepatuhan-ruang .panel-kepala, .kartu-binaan-panel .panel-kepala { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tabel-kepatuhan-ruang.tabel-kartu-hp td.sel-aksi { display: flex; gap: 8px; flex-wrap: wrap; }
  .tombol-binaan-lagi { min-height: 44px; }
}

/* ---------- v3.34 DI-2/3: pemantauan mendalam (kanvas DI-2/3 disetujui Mudir 15.01). Warna hanya token; amber hanya "perlu
   tinjau", merah hanya tanda kuat dan henti (pedoman 1.13). ---------- */
.pm-intro { color: var(--teks-2); margin: 0; max-width: 900px; }
.pm-kepala-tab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pm-kepala-tab > .pm-intro { flex: 1 1 420px; }
.pm-kisi { margin-bottom: 0; }
.pm-kisi-lima { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pm-kisi-enam { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pm-kpi .kpi-nilai small { font-size: 15px; }
.pm-kpi .kpi-nilai.pm-nada-lain { color: var(--lain); }
.pm-kpi .kpi-nilai.pm-nada-bahaya { color: var(--bahaya); }
.pm-kpi.kpi-kosong .kpi-nilai { color: var(--redup); font-size: 22px; }
.pm-kpi-teks { font-size: 24px; }
.pm-belum-nyala { border-style: dashed; border-color: var(--garis-kuat); }
.pm-belum-nyala p { max-width: 900px; }
.pm-sakelar-ringkas { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.pm-sakelar-ringkas li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--garis); }
.pm-sakelar-ringkas .pil { white-space: normal; text-align: right; }
.tab-dalam { display: flex; gap: 4px; border-bottom: 1px solid var(--garis); margin-bottom: 14px; overflow-x: auto; }
.tab-dalam-btn { font: inherit; font-weight: 500; padding: 10px 14px; color: var(--redup); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; }
.tab-dalam-btn[aria-selected="true"] { color: var(--teks); border-bottom-color: var(--aksen); font-weight: 600; }
.pm-baris-saring { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 8px; }
/* v3.35.2: kaki daftar santri persetujuan (jumlah halaman + tombol Sebelumnya/Berikutnya) dan waktu potret. */
.pm-kaki-halaman { display: flex; gap: 10px 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pm-kaki-halaman .baris-tombol { margin: 0; }
.pm-diperbarui { margin: -4px 0 8px; }
.pm-baris-saring .spasi { flex: 1; }
.pm-saring { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--teks-2); min-width: 0; }
.pm-saring select, .pm-saring input { font-weight: 400; min-width: 140px; max-width: 100%; }
.pm-kaki-tabel { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--redup); padding-top: 10px; }
.pm-tabel-tanda td, .pm-tabel-henti td, .pm-tabel-setuju td { vertical-align: top; }
.pm-tabel-tanda tr.pm-baris-kuat > td:first-child { box-shadow: inset 3px 0 0 var(--bahaya); }
.pm-aksi .baris-tombol { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
.pm-menu { position: relative; }
.pm-menu .menu-isi { right: 0; left: auto; min-width: 220px; }
.pm-menu-ket { padding: 6px 12px 2px; }
.pm-menu .menu-isi .pm-menu-redup { color: var(--redup); }
.pm-menu-garis { border: 0; border-top: 1px solid var(--garis); margin: 4px 0; }
.pm-samaran { font-family: var(--mono); font-size: .85em; padding: 0 5px; margin: 0 1px; border: 1px solid var(--garis-kuat); border-radius: 4px; background: var(--cekung); color: var(--teks-2); white-space: nowrap; }
.pm-kepala-rincian { align-items: flex-start; }
.pm-kepala-rincian .baris-pil { margin-top: 6px; }
.pm-dua-kolom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 16px; align-items: start; }
.pm-kolom-utama, .pm-kolom-samping { display: grid; gap: 16px; min-width: 0; }
.pm-kolom-utama > .panel, .pm-kolom-samping > .panel, .pm-kolom-utama > .pesan { margin: 0; }
.pm-isi-potongan { margin: 8px 0; padding: 14px 16px; background: var(--cekung); border: 1px solid var(--garis); border-radius: var(--radius); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.pm-potongan h3 { margin: 16px 0 4px; font-size: 15px; }
.pm-potongan p { margin: 0 0 6px; }
.pm-daftar-tautan { margin: 0; padding-left: 18px; overflow-wrap: anywhere; }
.pm-tertutup { display: grid; gap: 10px; justify-items: start; }
.pm-tertutup p { margin: 0; max-width: 640px; }
.pm-ikon-kunci { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--cekung); color: var(--teks-2); }
.pm-isian { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--teks-2); min-width: 0; }
.pm-isian > input, .pm-isian > textarea, .pm-isian > select { font-weight: 400; width: 100%; box-sizing: border-box; }
.pm-tertutup .pm-isian { width: min(420px, 100%); }
.pm-dl { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.pm-dl dt { color: var(--redup); }
.pm-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pm-riwayat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pm-riwayat li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--garis); }
.pm-riwayat li:last-child { border-bottom: 0; padding-bottom: 0; }
.pm-tindak { display: grid; gap: 10px; }
.pm-tindak .pm-kotak-henti { margin: 0; }
.pm-baris-tindak { flex-wrap: wrap; }
.pm-dorong-kanan { margin-left: auto; }
.pm-dialog { max-width: min(560px, 94vw); }
.pm-dialog ul { padding-left: 20px; }
.pm-chip-santri { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 12px; border-radius: 999px; background: var(--aksen-lembut); margin: 0; }
.pm-pilih-santri { width: 100%; margin-top: 8px; }
.pm-batang { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pm-batang li { display: grid; grid-template-columns: minmax(80px, 120px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.pm-batang-isi { display: inline-block; height: 8px; border-radius: 999px; background: var(--cekung); overflow: hidden; width: 100%; vertical-align: middle; }
.pm-batang-isi > span { display: block; height: 100%; background: var(--aksen); border-radius: 999px; }
.pm-batang-isi.kecil-batang { width: 110px; }
.pm-dua-sama { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pm-dua-sama > .panel { margin: 0; }
.pm-dua-sama:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.pm-panel-santri .panel-kepala { align-items: flex-end; }
.pm-tabel-setuju tr.pm-baris-perhatian > td:first-child { box-shadow: inset 3px 0 0 var(--lain); }
.pm-togel { font-size: 13px; padding: 0; margin-top: 4px; }
.pm-baris-rinci > td { background: var(--cekung); padding: 10px 12px 12px; }
.pm-tabel-persitus { width: 100%; background: var(--permukaan); }
.pil.pil-putus { background: transparent; border: 1px dashed var(--garis-kuat); }
.pm-akibat ul { margin: 4px 0 8px; padding-left: 20px; }
.pm-fieldset { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 6px; min-width: 0; }
.pm-fieldset legend { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.pm-radio, .pm-centang, .dialog-alasan label.pm-radio, .pm-daftar-pilih label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; color: var(--teks); }
.pm-tindak p, .pm-tertutup p { margin: 0; }
.pm-daftar-pilih { display: grid; gap: 6px; padding: 8px 12px; margin-left: 24px; border: 1px solid var(--garis); border-radius: var(--radius); }
.pm-daftar-pilih label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-kendala { display: grid; gap: 6px; margin: 0; border: 1px solid var(--lain-garis); }
.pm-kendala p { margin: 0; color: var(--teks); }
.pm-kendala-judul { display: flex; align-items: center; gap: 8px; }
.pm-dl-kendala { color: var(--teks); }
.pm-dl-kendala dt { color: var(--lain); font-weight: 600; }
.panel-polos { display: grid; gap: 10px; }
.pm-judul-bagian { margin: 0; font-size: 18px; }
.pm-setup { gap: 16px; }
.pm-setup-kepala h2 { margin: 0 0 4px; }
.pm-setup-kepala p { margin: 0; }
.pm-kartu-setup { display: grid; gap: 10px; margin: 0; }
.pm-kartu-setup > .panel-kepala { margin-bottom: 0; }
.pm-tabel-sakelar td { vertical-align: top; }
.pm-syarat { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.pm-syarat li.ok { color: var(--aktif); }
.pm-syarat li.kurang { color: var(--teks-2); }
.pm-syarat li.tahu { color: var(--redup); }
.pm-scope { display: grid; gap: 6px; padding: 12px; border-radius: var(--radius); background: var(--cekung); }
.pm-salin { display: flex; gap: 8px; }
.pm-salin input { flex: 1; min-width: 0; font-size: 13px; }
.segmen.segmen-bungkus { flex-wrap: wrap; }
.pm-daftar-kata { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pm-daftar-kata li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--garis); border-radius: 8px; }
.pm-daftar-kata li.kosong-kecil { justify-content: center; border-style: dashed; color: var(--redup); padding: 18px; }
.pm-tambah-kata { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.pm-tambah-kata > .pm-isian:first-child { grid-column: 1 / -1; }
.pm-setup .segmen, .pm-tabel-sakelar .segmen { flex-wrap: nowrap; }
.pm-tabel-kategori select { min-width: 150px; }
.pm-saring select { max-width: 280px; }
.pm-dua-sama .tabel th { white-space: normal; }
.pm-dl.pm-dl-kendala { grid-template-columns: 170px minmax(0, 1fr); }
.pm-kaki-henti { color: var(--redup); margin: 10px 0 0; }
.pm-kisi-isian { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; }
.pm-isian-angka input { max-width: 180px; font-family: var(--mono); }
.pm-kunci-ket { display: flex; gap: 6px; align-items: center; margin: 4px 0 0; }
.pm-ikrar { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.pm-syarat-jpsh { display: inline-flex; gap: 4px; }
.pm-syarat-tanda { display: inline-flex; align-items: center; gap: 1px; min-width: 26px; height: 22px; justify-content: center; padding: 0 4px; border-radius: 6px; font-size: 12px; font-weight: 700; border: 1px solid var(--garis); }
.pm-syarat-tanda.ok { color: var(--aktif); background: var(--aktif-bg); border-color: transparent; }
.pm-syarat-tanda.gagal { color: var(--teks); border-color: var(--garis-kuat); background: var(--permukaan); }
.pm-syarat-tanda.belum { color: var(--redup); border-style: dashed; }
.pm-katalog-c { display: grid; gap: 10px; }
.pm-kartu-situs-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pm-kartu-situs { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--permukaan); min-width: 0; }
.pm-kartu-situs > div { min-width: 0; display: grid; gap: 4px; }
.pm-kartu-situs p { margin: 0; }
.pm-inisial { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--gelap-2); color: var(--di-gelap); font-weight: 700; }
.pil-tingkat { display: inline-flex; align-items: center; font-size: 12px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--garis); color: var(--teks-2); background: var(--cekung); }
.pm-bendera { display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: var(--mati-bg); color: var(--mati); font-size: 12px; line-height: 1.4; }
.pm-bendera svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
@media (max-width: 1100px) {
  .pm-kisi-lima, .pm-kisi-enam { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-dua-kolom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pm-dua-sama { grid-template-columns: minmax(0, 1fr); }
  .pm-sakelar-ringkas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pm-kisi, .pm-kisi-lima, .pm-kisi-enam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-sakelar-ringkas { grid-template-columns: minmax(0, 1fr); }
  .pm-baris-saring > * { flex: 1 1 100%; }
  .pm-saring select, .pm-saring input, .pm-baris-saring .segmen { width: 100%; box-sizing: border-box; min-width: 0; }
  .pm-baris-saring .segmen button { flex: 1 1 0; }
  .pm-aksi .baris-tombol { justify-content: flex-start; }
  .pm-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pm-dl dt { margin-top: 8px; font-size: 12px; font-weight: 600; }
  .pm-batang li { grid-template-columns: minmax(70px, 90px) minmax(0, 1fr) auto; }
  .pm-tambah-kata { grid-template-columns: minmax(0, 1fr); }
  .pm-tabel-persitus thead { display: none; }
  .pm-tabel-persitus tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--garis); }
  .pm-tabel-persitus td { border: 0; padding: 0; }
  .pm-baris-rinci > td { padding: 8px; }
  .pm-dorong-kanan { margin-left: 0; }
  .pm-salin { flex-direction: column; }
  .pm-kepala-tab > .tombol, .pm-kepala-tab > button { width: 100%; }
  .pm-isi-potongan { font-size: 15px; }
}
/* Kartu HP daftar tanda: garis tanda kuat di kartu, bukan di sel pertama. */
@media (max-width: 640px) {
  .pm-tabel-tanda.tabel-kartu-hp tr.pm-baris-kuat { border-left: 3px solid var(--bahaya); }
  .pm-tabel-tanda.tabel-kartu-hp tr.pm-baris-kuat > td:first-child { box-shadow: none; }
}
/* ---------- DI-1: tingkat pengawasan (kanvas DI-1, keputusan D3: pil huruf netral, amber hanya Perlu ditinjau) ---------- */
.pil-tingkat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 1px 10px 1px 2px; border-radius: 999px; border: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks); white-space: nowrap; line-height: 1.6; }
.pil-tingkat.kosong { border-style: dashed; color: var(--redup); }
.huruf-tingkat { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--teks); color: var(--permukaan); font-size: 11px; font-weight: 700; flex: none; }
.pil-tingkat.kosong .huruf-tingkat { background: var(--cekung); color: var(--redup); }
.huruf-tingkat.kecil-huruf { width: 22px; height: 22px; font-size: 12px; }
.ciri-tingkat.ragu .huruf-tingkat { background: var(--cekung); color: var(--redup); border: 1px solid var(--garis-kuat); }
.panel-tingkat { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); }
.panel-tingkat .pil-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel-tingkat p { margin: 0; }
.panel-tingkat-muat { display: flex; align-items: center; gap: 8px; }
.putaran { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--garis-kuat); border-top-color: var(--aksen); animation: putar-sibuk 0.9s linear infinite; flex: none; }
@media (prefers-reduced-motion: reduce) { .putaran { animation: none; } }
.daftar-ciri { list-style: none; margin: 0; padding: 0; display: grid; }
.ciri-tingkat { display: grid; grid-template-columns: auto minmax(0, 1fr) 76px; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--garis); }
.ciri-tingkat:first-child { border-top: 0; }
.ciri-isi { display: grid; gap: 2px; min-width: 0; }
.ciri-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ciri-bukti { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.ciri-yakin { display: grid; gap: 4px; justify-items: end; }
.bar-yakin { display: block; width: 72px; height: 4px; border-radius: 2px; background: var(--cekung); overflow: hidden; }
.bar-yakin > span { display: block; height: 100%; background: var(--teks-2); }
/* td tetap table-cell (display grid pada td memecah baris tabel); anak-anaknya ditumpuk. */
.sel-tingkat > * { display: flex; width: fit-content; max-width: 100%; }
.sel-tingkat > * + * { margin-top: 4px; }
.sel-tingkat .kecil { max-width: 220px; }
.kisi-tingkat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpi-tingkat { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); color: var(--teks); text-decoration: none; }
.kpi-tingkat b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-tingkat span.kecil { color: var(--redup); }
.kpi-tingkat.perlu { background: var(--lain-sorot); border-color: var(--lain-garis); }
.kpi-tingkat.perlu .judul-perlu { color: var(--lain); font-size: 13px; font-weight: 600; }
.kpi-tingkat.terpilih { border-color: var(--aksen); box-shadow: 0 0 0 1px var(--aksen); }
.pesan-peralihan { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; }
.chip-tingkat-hp { display: none; }
.laci-tingkat { display: grid; gap: 10px; padding-top: 4px; border-top: 1px solid var(--garis); }
.laci-tingkat dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 10px; margin: 0; align-items: center; }
.laci-tingkat dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.laci-tingkat .riwayat-tingkat { margin: 0; padding-left: 18px; font-size: 13px; color: var(--redup); }
.tabel-tinjau td { vertical-align: top; }
.aturan-ciri { display: grid; }
.baris-ciri { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto 44px 40px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--garis); }
.baris-ciri .kode-ciri { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.rinci-ciri { grid-column: 1 / -1; display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: var(--cekung); }
.seg-tingkat { display: inline-flex; border: 1px solid var(--garis-kuat); border-radius: 8px; overflow: hidden; }
.seg-tingkat button { font: inherit; font-weight: 600; min-width: 38px; padding: 5px 10px; border: 0; border-left: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks); cursor: pointer; }
.seg-tingkat button:first-child { border-left: 0; }
.seg-tingkat button[aria-checked="true"] { background: var(--aksen); color: var(--aksen-teks); }
.seg-tingkat button:disabled { cursor: default; opacity: .7; }
.chip-pola { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-pola .chip { font-family: var(--mono); }
.kemajuan-penilaian { display: grid; gap: 6px; }
.kemajuan-penilaian .bar-proses { height: 8px; }
.syarat-c { margin: 0; padding: 0; list-style: none; display: grid; }
.syarat-c li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--garis); }
@media (max-width: 900px) {
  .kisi-tingkat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-tingkat-hp { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .baris-ciri { grid-template-columns: minmax(0, 1fr) auto; }
  .baris-ciri .label-ciri { grid-column: 1 / -1; }
  .laci-tingkat dl { grid-template-columns: 90px minmax(0, 1fr); }
  .ciri-tingkat { grid-template-columns: auto minmax(0, 1fr); }
  .ciri-yakin { grid-column: 2; justify-items: start; }
}
@media (max-width: 640px) {
  .tabel-tinjau td[data-kolom]::before, .tabel-luar-katalog td[data-kolom]::before { content: attr(data-kolom); display: block; color: var(--teks-2); font-size: 13px; margin-top: 6px; }
  .tabel-tinjau .sel-tingkat, .tabel-luar-katalog td { white-space: normal; }
  .kpi-tingkat b { font-size: 20px; }
}
.tabel-tinjau .sel-tingkat, .tabel-luar-katalog td { vertical-align: top; }
.tabel-luar-katalog .sel-id .mono { word-break: break-all; }
.sel-tingkat-baris { display: grid; gap: 2px; justify-items: start; }
.sel-tingkat-baris select { max-width: 200px; }
.sel-usulan { display: grid; gap: 2px; justify-items: start; }
.bagian-tingkat-setujui { display: grid; gap: 8px; }
.bagian-tingkat-setujui select { max-width: 100%; }
.antrean-tingkat { display: grid; gap: 6px; margin-top: 10px; }
.antrean-tingkat h3 { margin: 0; }
.kontrol-tingkat { max-width: 100%; }
.antrean-isi > * { min-width: 0; }
.antrean-jawab .label-sebaris { flex-wrap: wrap; min-width: 0; }
.antrean-jawab .label-sebaris select { max-width: 100%; min-width: 0; }
/* DI-1: pratinjau impor punya kolom Usulan tingkat; dialog dilebarkan supaya kolom keputusan terlihat tanpa gulir mendatar di layar lebar. */
dialog.dialog-impor { width: min(1120px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.tabel-tinjau td:last-child { min-width: 250px; }
.tabel-tinjau td:last-child .baris-tombol { flex-wrap: wrap; }
.tabel-tinjau td:last-child select { max-width: 100%; }
.kpi-tingkat { min-width: 0; }
.kpi-tingkat .pil-tingkat { max-width: 100%; white-space: normal; justify-self: start; }
/* DI-1 penyesuaian kanvas (tahap penuntasan). */
.ringkas-tingkat { display: grid; gap: 10px; margin-bottom: 12px; }
.ringkas-tingkat .kisi-tingkat { margin-bottom: 0; }
.kpi-tingkat.belum-dinilai { background: var(--cekung); color: var(--redup); }
.kpi-tingkat.belum-dinilai b { color: var(--redup); }
.pesan-penilaian-katalog { display: grid; gap: 8px; }
.pesan-penilaian-katalog p { margin: 0; }
.usulan-kartu { display: inline-flex; align-items: center; gap: 4px; }
.kosong-tingkat .baris-tombol { justify-content: center; }
.tabel-tinjau td.sel-id { white-space: normal; min-width: 160px; max-width: 260px; }
.sel-situs-tinjau .mono { overflow-wrap: anywhere; }
.tabel-tinjau td:last-child select { max-width: 170px; }
.kat-tabel-tingkat .sel-jenis { white-space: nowrap; }
.tabel-luar-katalog th { white-space: normal; }
.tabel-luar-katalog .sel-alamat-luar { min-width: 130px; max-width: 200px; }
.tabel-luar-katalog .sel-alamat-luar .mono { white-space: normal; overflow-wrap: anywhere; }
.tabel-luar-katalog td:nth-child(4) { min-width: 120px; max-width: 200px; }
.tabel-luar-katalog td:nth-child(6) { min-width: 130px; max-width: 220px; }
/* Kolom Situs di tabel Katalog kurator: alamat panjang (dokumen ber-ID) dipatahkan supaya kolom Pengawasan dan Usulan terlihat. */
.kat-tabel-tingkat td:nth-child(2) { min-width: 130px; max-width: 220px; }
.kat-tabel-tingkat th { padding-left: 8px; padding-right: 8px; }
.kat-tabel-tingkat td:nth-child(2) .mono { white-space: normal; overflow-wrap: anywhere; }
.kat-tabel-tingkat .sel-tingkat .kecil { max-width: 150px; }
.kat-tabel-tingkat td { padding-left: 8px; padding-right: 8px; }
.kat-tabel-tingkat .sel-tingkat .pil { white-space: normal; }
.kat-tabel-tingkat td.angka { white-space: nowrap; }
@media (max-width: 640px) {
  /* Kanvas d3: Sekarang dan Usulan berdampingan di kartu HP. */
  .tabel-tinjau td.sel-tingkat { display: inline-block; width: calc(50% - 6px); vertical-align: top; }
  .tabel-luar-katalog .sel-alamat-luar, .tabel-luar-katalog td:nth-child(n) { min-width: 0; max-width: none; }
}
/* Daftar pengajuan di HP: kontrol "Bila disetujui bersama" (v3.29.9) sempat melebarkan halaman ke 401 px; ditemukan saat uji DI-1. */
.daftar-pengajuan > li { min-width: 0; }
@media (max-width: 640px) {
  .kartu-pengajuan .label-sebaris { flex-wrap: wrap; min-width: 0; }
  .kartu-pengajuan .label-sebaris select { width: 100%; max-width: 100%; min-width: 0; }
}
/* Pratinjau impor (kanvas c2): kolom Keputusan terlihat utuh di 1280. */
.tabel-impor-tingkat td:nth-child(3) .mono { white-space: normal; overflow-wrap: anywhere; }
.tabel-impor-tingkat td:nth-child(3) { min-width: 140px; max-width: 220px; }
.tabel-impor-tingkat td:nth-child(5), .tabel-impor-tingkat td:nth-child(6) { min-width: 90px; max-width: 160px; }
.tabel-impor-tingkat td:last-child select { max-width: 220px; }
/* Di luar katalog: kolom Tetapkan (superadmin, tinjauan S6) muat di 1280: kontrol bertumpuk, pil keadaan boleh patah baris. */
.tabel-luar-katalog td:last-child .baris-tombol { flex-direction: column; align-items: flex-start; gap: 6px; }
.tabel-luar-katalog td:last-child select { max-width: 110px; }
.tabel-luar-katalog td:nth-child(5) .pil { white-space: normal; }
.tabel-luar-katalog td:nth-child(5) { max-width: 130px; }
.tabel-luar-katalog .sel-tingkat .pil-tingkat { white-space: normal; }
.tabel-luar-katalog td.sel-tingkat { max-width: 140px; }
.tabel-luar-katalog .usulan-kartu { flex-wrap: wrap; }
.tabel-luar-katalog .sel-tingkat .pil { white-space: normal; }

/* ===================== v3.36 NAVIGASI BARU (docs/KONTRAK-v3.36.md): satu wilayah per pengerja, awalan kelas .v36-<wilayah>- ===================== */
/* [v3.36 WILAYAH pesan] */
/* Aturan pesan (pedoman 1.18): bilah perhatian, pil keadaan, kepala halaman, hasil di tempat. Token saja. */
.v36-perhatian { border: 1px solid var(--lain-garis); background: var(--lain-bg); color: var(--teks); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; }
.v36-perhatian.v36-perhatian-kritis { border-color: var(--bahaya-garis); background: var(--bahaya-bg); }
.v36-perhatian.v36-perhatian-senyap { border-color: var(--garis); background: transparent; padding: 4px 12px; }
.v36-perhatian-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 32px; }
.v36-perhatian-baris > b { color: var(--lain); white-space: nowrap; }
.v36-perhatian-kritis .v36-perhatian-baris > b { color: var(--bahaya); }
.v36-perhatian-ikon { display: inline-flex; color: var(--lain); }
.v36-perhatian-kritis .v36-perhatian-ikon { color: var(--bahaya); }
.v36-perhatian-ikon svg { width: 18px; height: 18px; }
.v36-perhatian-ringkas { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.v36-perhatian-lihat { margin-left: auto; }
.v36-perhatian-daftar { list-style: none; margin: 8px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--lain-garis); }
.v36-perhatian-kritis .v36-perhatian-daftar { border-top-color: var(--bahaya-garis); }
.v36-perhatian-butir { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: flex-start; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--garis); }
.v36-perhatian-butir:last-child { border-bottom: 0; }
.v36-perhatian-isi { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.v36-perhatian-isi > .pil { margin-right: 6px; }
.v36-perhatian-rincian { margin-top: 4px; color: var(--teks-2); }
.v36-perhatian-rincian p, .v36-perhatian-rincian dl, .v36-perhatian-rincian ol, .v36-perhatian-rincian ul { margin: 4px 0 0; }
.v36-perhatian-aksi { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.v36-perhatian-ke, .v36-perhatian-aksi .tautan { min-height: 24px; display: inline-flex; align-items: center; }
.v36-perhatian-tersembunyi { margin: 4px 0 0; }
.v36-pesan-tampilkan { font-size: 13px; }
.v36-pil-wadah { position: relative; display: inline-flex; }
button.v36-pil { font: inherit; font-size: 12px; font-weight: 600; border: 1px solid transparent; cursor: pointer; min-height: 28px; }
button.v36-pil:hover { border-color: currentColor; }
button.v36-pil:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
button.v36-pil[aria-expanded="true"] { border-color: currentColor; }
.v36-pil-panah { font-size: 10px; line-height: 1; }
.v36-pil-rincian { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(360px, calc(100vw - 32px)); background: var(--permukaan); color: var(--teks);
  border: 1px solid var(--garis-kuat); border-radius: 10px; padding: 10px 12px 12px; box-shadow: var(--bayang); text-align: left; white-space: normal; font-weight: 400; }
.v36-pil-rincian.v36-pil-kanan { left: auto; right: 0; }
.v36-pil-rincian-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.v36-pil-rincian-isi p { margin: 4px 0 0; }
.v36-pil-rincian .baris-tombol.kiri { margin-top: 10px; }
.v36-kepala { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.v36-kepala-baris { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; }
.v36-kepala-judul { flex: 1 1 320px; min-width: 0; }
.v36-kepala-judul h1 { margin: 0; }
.v36-kepala-sub { margin: 4px 0 0; color: var(--teks-2); }
.v36-kepala-pil { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.v36-kepala .v36-perhatian { margin: 0; }
.v36-remah { font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; }
/* Pil di kepala panel lama (.panel-kepala) ikut membungkus di HP. */
.v36-pesan-pil-baris { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.v36-pesan-hasil-wadah:empty { display: none; }
.v36-pesan-hasil { display: flex; gap: 6px; align-items: baseline; margin: 6px 0 0; font-size: 13px; color: var(--teks); overflow-wrap: anywhere; }
.v36-pesan-hasil-tanda { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; }
.v36-pesan-hasil-ok .v36-pesan-hasil-tanda { color: var(--aktif); background: var(--aktif-bg); }
.v36-pesan-hasil-awas .v36-pesan-hasil-tanda { color: var(--lain); background: var(--lain-bg); }
.v36-pesan-hasil-galat .v36-pesan-hasil-tanda { color: var(--bahaya); background: var(--bahaya-bg); }
.v36-pesan-hasil-info .v36-pesan-hasil-tanda { color: var(--info); background: var(--info-bg); }
.v36-pesan-hasil-galat { color: var(--bahaya); }
.v36-pesan-catatan { margin: 8px 0 0; color: var(--teks-2); }
@media (max-width: 640px) {
  /* HP: penjelasan pil menjadi lembar bawah selebar layar, supaya tidak terpotong di 390 px. */
  .v36-pil-rincian, .v36-pil-rincian.v36-pil-kanan { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 60vh; overflow: auto; }
  .v36-perhatian-lihat { margin-left: 0; min-height: 44px; }
  button.v36-pil { min-height: 32px; }
  /* Cakupan di 390 px: saringan penyebab berlabel panjang sempat melebarkan halaman ke 406 px (ditemukan saat uji PESAN). */
  .cakupan .kontrol.filter select { max-width: 100%; min-width: 0; }
}
/* [/v3.36 WILAYAH pesan] */
/* [v3.36 WILAYAH nav] */
/* Tujuh menu akordeon (papan Akses, Hp): judul menu, sub-halaman menjorok di bawah menu yang terbuka. */
.v36-nav-daftar, .v36-nav-sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.v36-nav-daftar { margin-top: 10px; }
.v36-nav-sub { margin: 2px 0 8px; }
.v36-nav-sub[hidden] { display: none; }
.nav-admin.v36-nav-menu .v36-nav-label { flex: 1; min-width: 0; }
.nav-admin.v36-nav-menu .v36-nav-panah { flex: none; display: inline-flex; opacity: .7; transition: transform .15s ease; }
.nav-admin.v36-nav-menu .v36-nav-panah svg { width: 16px; height: 16px; }
.nav-admin.v36-nav-menu[aria-expanded="true"] .v36-nav-panah { transform: rotate(180deg); }
.nav-admin.v36-nav-menu.v36-nav-terbuka { color: var(--di-gelap); font-weight: 600; }
.nav-admin.v36-nav-sublink { min-height: 34px; padding-left: 38px; font-size: 13.5px; }
.nav-admin.v36-nav-sublink span:not(.lencana) { flex: 1; min-width: 0; }
.v36-nav-lain-baris { display: none; }
.v36-nav-lain-tombol { font: inherit; font-size: 13px; text-align: left; width: 100%; min-height: 44px; padding: 6px 10px 6px 38px; border: 0; border-radius: 9px; background: none; color: var(--gelap-samar); cursor: pointer; }
.v36-nav-lain-tombol:hover { background: var(--gelap-sorot); color: var(--di-gelap); }
.v36-nav-cari { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-admin.v36-nav-menu .v36-nav-panah { transition: none; } }
/* Laci HP (≤900 px): sasaran sentuh 44 px; sub jarang dipakai dilipat di "Lainnya" kecuali sedang dibuka. */
@media (max-width: 900px) {
  .nav-admin.v36-nav-sublink { min-height: 44px; font-size: 14px; padding-left: 42px; }
  .v36-nav-lain-tombol { padding-left: 42px; }
  .v36-nav-lain-baris { display: block; order: 1; }
  .v36-nav-sub .v36-nav-lain { order: 2; }
  .v36-nav-sub:not(.v36-nav-lain-buka) .v36-nav-lain { display: none; }
  .v36-nav-sub.v36-nav-lain-buka .v36-nav-lain-baris { display: none; }
  .v36-nav-cari { display: flex; align-items: center; gap: 10px; width: calc(100% - 8px); margin: 0 4px 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
    background: var(--gelap-2); color: var(--gelap-redup); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
  .v36-nav-cari:hover { color: var(--di-gelap); }
}
/* Tab di dalam halaman: segmen di atas isi, ikut alamat (?tab=). */
.v36-nav-segmen { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0 0 16px; width: fit-content; max-width: 100%; box-sizing: border-box;
  background: var(--cekung); border: 1px solid var(--garis); border-radius: 10px; }
.v36-nav-segmen a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 7px; font-size: 14px; color: var(--redup); text-decoration: none; white-space: nowrap; }
.v36-nav-segmen a:hover { color: var(--teks); }
.v36-nav-segmen a[aria-current="page"] { background: var(--permukaan); color: var(--teks); font-weight: 600; box-shadow: var(--bayang); }
.v36-nav-segmen .lencana { margin-left: 2px; }
@media (max-width: 640px) {
  .v36-nav-segmen { width: 100%; }
  .v36-nav-segmen a { flex: 1 1 auto; justify-content: center; min-height: 44px; white-space: normal; text-align: center; }
}
.v36-nav-disiapkan { margin-top: 8px; }
@media print { .v36-nav-segmen { display: none !important; } }
/* [/v3.36 WILAYAH nav]
/* [v3.36 WILAYAH cari] */
/* Cari (Ctrl K): papan docs/v336/kanvas/Cari.dc.html. Dialog lama .palet, isi berkelompok. */
.palet.v36-cari { max-width: 680px; margin-top: 9vh; display: flex; flex-direction: column; }
.palet.v36-cari:not([open]) { display: none; }
.v36-cari .palet-cari { padding: 16px 18px; gap: 12px; }
.v36-cari .palet-cari input { font-size: 18px; color: var(--teks); }
.v36-cari .palet-cari > svg, .v36-cari .palet-cari kbd { flex: none; }
.v36-cari .palet-cari input { min-width: 0; }
.v36-cari .palet-hasil { padding: 0 0 8px; max-height: min(60vh, 560px); }
.v36-cari .palet-hasil li.v36-cari-kel { display: block; padding: 10px 16px 4px; border-radius: 0; cursor: default; font: 600 12px var(--huruf); letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.v36-cari .palet-hasil li.v36-cari-hasil { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 16px; border-radius: 0; color: var(--teks); }
.v36-cari .palet-hasil li.v36-cari-hasil[aria-selected="true"] { background: var(--aksen-lembut); }
.v36-cari-ik { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--cekung); color: var(--teks-2); }
.v36-cari-ik svg { width: 16px; height: 16px; }
.v36-cari-hasil[aria-selected="true"] .v36-cari-ik { background: var(--aksen); color: var(--aksen-teks); }
.v36-cari-isi { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.v36-cari-isi b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v36-cari-ket { font-size: 13px; color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v36-cari-jenis { flex: none; font-size: 12px; color: var(--redup); border: 1px solid var(--garis); border-radius: 999px; padding: 1px 8px; }
.v36-cari-enter { flex: none; visibility: hidden; }
.v36-cari-hasil[aria-selected="true"] .v36-cari-enter { visibility: visible; }
.v36-cari .palet-kosong { padding: 16px; }
.v36-cari-kaki { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; border-top: 1px solid var(--garis); font-size: 12px; color: var(--redup); }
.v36-cari-sorot { outline: 2px solid var(--aksen); outline-offset: 4px; border-radius: 8px; }
.tombol-cari.v36-cari-tombol { min-width: 260px; }
@media (max-width: 1100px) { .tombol-cari.v36-cari-tombol { min-width: 200px; } }
@media (max-width: 860px) { .tombol-cari.v36-cari-tombol { min-width: 0; } }
@media (max-width: 600px) {
  .palet.v36-cari { width: calc(100% - 16px); margin-top: 8px; max-height: calc(100dvh - 16px); }
  .v36-cari .palet-hasil { max-height: none; flex: 1; }
  .v36-cari-kaki .v36-cari-kaki-ket, .v36-cari-enter { display: none; }
  .v36-cari .palet-hasil li.v36-cari-hasil { padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) { .v36-cari-sorot { transition: none; } }
/* [/v3.36 WILAYAH cari] */
/* [v3.36 WILAYAH akses] */
.v36-akses { display: flex; flex-direction: column; gap: 20px; max-width: 1140px; min-width: 0; }
.v36-akses .v36-kepala { margin-bottom: 0; }
.v36-akses .v36-kepala-judul p { color: var(--teks-2); line-height: 1.5; max-width: 720px; }
.v36-akses-alur { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.v36-akses-alur > li { flex: 1 1 200px; min-width: 0; display: flex; }
.v36-akses-langkah { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--permukaan); border: 1px solid var(--garis); color: var(--teks); text-decoration: none; min-width: 0; }
.v36-akses-langkah:hover { border-color: var(--garis-kuat); color: var(--teks); }
.v36-akses-langkah:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.v36-akses-langkah.v36-akses-kini { border-color: var(--emas); box-shadow: 0 0 0 1px var(--emas); }
.v36-akses-langkah > b { font-size: 16px; }
.v36-akses-nomor { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); }
.v36-akses-tanda { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0; background: var(--cekung); color: var(--teks-2); }
.v36-akses-ok .v36-akses-tanda { background: var(--aktif); color: var(--di-gelap); }
.v36-akses-kini .v36-akses-tanda { background: var(--emas); color: var(--di-emas); }
.v36-akses-tak { background: var(--cekung); }
.v36-akses-ket { font-size: 13px; color: var(--teks-2); line-height: 1.45; overflow-wrap: anywhere; }
.v36-akses-tugas { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; }
.v36-akses-tugas h2 { margin: 0; padding: 14px 16px; font-size: 16px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.v36-akses-tugas ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--garis); }
.v36-akses-kosong { font-weight: 400; }
.v36-akses-butir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--garis); }
.v36-akses-butir:last-child { border-bottom: 0; }
.v36-akses-butir-isi { flex: 1 1 360px; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.v36-akses-butir .tombol { text-decoration: none; white-space: nowrap; }
.v36-akses-cepat { display: flex; flex-wrap: wrap; gap: 12px; }
.v36-akses-tanya { flex: 1 1 360px; min-width: 0; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.v36-akses-tanya h3 { margin: 0; font-size: 14px; font-weight: 600; }
.v36-akses-isian { display: flex; gap: 8px; }
.v36-akses-isian input { flex: 1; min-width: 0; width: auto; }
.v36-akses-hasil { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v36-akses-hasil:empty { display: none; }
.v36-akses-putusan { margin: 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--garis); background: var(--cekung); line-height: 1.45; overflow-wrap: anywhere; }
.v36-akses-putusan-buka { background: var(--aktif-bg); }
.v36-akses-putusan-tutup { background: var(--bahaya-bg); border-color: var(--bahaya-garis); }
.v36-akses-putusan-info { background: var(--info-bg); }
.v36-akses-alasan { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.v36-akses-rincian summary { cursor: pointer; font-size: 13px; }
.v36-akses-rincian .kartu-periksa { margin-top: 8px; }
.v36-akses-ubin { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.v36-akses-ubin-butir { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--permukaan); border: 1px solid var(--garis); color: var(--teks); text-decoration: none; }
.v36-akses-ubin-butir:hover { border-color: var(--garis-kuat); color: var(--teks); }
.v36-akses-ubin-butir b { font-size: 15px; }
.v36-akses-ubin-butir span { font-size: 13px; color: var(--redup); line-height: 1.45; }
@media (max-width: 600px) {
  .v36-akses-ubin { grid-template-columns: 1fr; }
  .v36-akses-isian .tombol { min-height: 44px; }
}
/* [/v3.36 WILAYAH akses] */
/* [v3.36 WILAYAH jadwal] */
/* Akses internet › Jadwal akses (papan "Jadwal"). Warna hanya token. */
.v36-jadwal { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v36-jadwal > .v36-perhatian { margin-top: -4px; }
.v36-jadwal-tab { margin: 0; flex-wrap: nowrap; }
.v36-jadwal-n { margin-left: 6px; font-size: 12px; font-weight: 600; padding: 0 8px; border-radius: 999px; background: var(--cekung); color: var(--redup); line-height: 20px; }
.v36-jadwal-isi { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v36-jadwal-alat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.v36-jadwal-spasi { flex: 1 1 auto; }
.v36-jadwal-hasil { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--aktif-bg); border: 1px solid var(--garis); font-size: 14px; }
.v36-jadwal-hasil.galat { background: var(--bahaya-bg); border-color: var(--bahaya-garis); }
.v36-jadwal-hasil-baris { font-size: 13px; margin-top: 4px; }
.v36-jadwal-tabel td { vertical-align: middle; }
.v36-jadwal-tabel .v36-jadwal-cek { width: 32px; }
.v36-jadwal-tabel .v36-jadwal-kelas { white-space: nowrap; }
.v36-jadwal-tabel td.sel-aksi { text-align: right; white-space: nowrap; }
.v36-jadwal-tabel td.sel-aksi .baris-tombol { justify-content: flex-end; flex-wrap: nowrap; margin: 0; }
.v36-jadwal-tabel tr.v36-jadwal-kel td { background: var(--latar); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); padding: 8px 12px; }
.v36-jadwal-tabel tr.v36-jadwal-rinci > td { background: var(--latar); padding: 12px 14px 16px; }
.v36-jadwal-mode { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.v36-jadwal-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 10px; font-size: 14px; }
.v36-jadwal-dl dt { color: var(--redup); }
.v36-jadwal-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.v36-jadwal-pribadi { margin-top: 12px; border-top: 1px solid var(--garis); padding-top: 10px; }
.v36-jadwal-pribadi h4 { margin: 0 0 6px; font-size: 14px; }
.v36-jadwal-daftar-pribadi { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v36-jadwal-daftar-pribadi li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.v36-jadwal-daftar-pribadi .baris-tombol { margin: 0; }
.v36-jadwal-pratinjau { max-height: 320px; overflow: auto; }
.v36-jadwal-pratinjau td:first-child { white-space: nowrap; }
.v36-jadwal-terbuka { margin: 8px 0 14px; }
.v36-jadwal-terbuka h3 { margin: 0 0 6px; font-size: 15px; }
.v36-jadwal-kenapa { margin-top: 8px; }
.v36-jadwal-kenapa summary { cursor: pointer; font-size: 14px; font-weight: 600; }
@media (max-width: 640px) {
  .v36-jadwal-tab { overflow-x: auto; }
  .v36-jadwal-alat > .tombol, .v36-jadwal-alat > button { min-height: 44px; }
  .v36-jadwal-spasi { display: none; }
  .v36-jadwal-tabel.tabel-kartu-hp tr.v36-jadwal-kel { border: 0; padding: 4px 0; margin: 8px 0 4px; background: none; }
  .v36-jadwal-tabel.tabel-kartu-hp tr.v36-jadwal-kel td { background: none; padding: 0; }
  .v36-jadwal-tabel.tabel-kartu-hp tr[data-ou] { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
  .v36-jadwal-tabel.tabel-kartu-hp tr[data-ou] td:not(.v36-jadwal-cek) { grid-column: 2; }
  .v36-jadwal-tabel.tabel-kartu-hp tr[data-ou] td.v36-jadwal-cek { grid-row: 1 / span 4; width: auto; padding-top: 2px; }
  .v36-jadwal-tabel.tabel-kartu-hp td.sel-aksi { text-align: left; }
  .v36-jadwal-tabel.tabel-kartu-hp td.sel-aksi .baris-tombol { justify-content: flex-start; }
  .v36-jadwal-tabel.tabel-kartu-hp td.sel-aksi .tombol { min-height: 44px; }
  .v36-jadwal-tabel.tabel-kartu-hp tr.v36-jadwal-rinci { margin-top: -6px; }
  .v36-jadwal-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .v36-jadwal-dl dd { margin-bottom: 6px; }
}
/* [/v3.36 WILAYAH jadwal] */
/* [v3.36 WILAYAH katalog] */
/* Katalog kurator (papan Katalog-Main, Katalog-Diawasi, Katalog-Hp). */
.v36-katalog { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.v36-katalog .v36-kepala { margin-bottom: 0; }
.v36-katalog-isi { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.v36-katalog-lebih .menu-titik > summary { min-height: 40px; min-width: 44px; display: inline-grid; place-items: center; border: 1px solid var(--garis-kuat); border-radius: 9px; background: var(--permukaan); }
.v36-katalog-tab { margin-bottom: 0; }
.v36-katalog-tab button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.v36-katalog-tab-tautan { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--redup); text-decoration: none; white-space: nowrap; font-weight: 500; }
.v36-katalog-tab-tautan:hover { color: var(--teks); }
.v36-katalog-n { font-size: 12px; font-weight: 600; padding: 0 8px; border-radius: 999px; background: var(--cekung); color: var(--teks-2); line-height: 20px; font-variant-numeric: tabular-nums; }
.v36-katalog-tata { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.v36-katalog-saring { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.v36-katalog-saring-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v36-katalog-saring-kelompok { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.v36-katalog-saring-kelompok legend { padding: 0; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.v36-katalog-saring-butir { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; font-size: 14px; font-weight: 400; }
.v36-katalog-saring-butir input { width: 16px; height: 16px; margin: 0; flex: none; }
.v36-katalog-saring-butir span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.v36-katalog-n-saring { margin-left: auto; font-size: 12px; color: var(--redup); font-variant-numeric: tabular-nums; }
.v36-katalog-panel { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--permukaan); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v36-katalog-jenis { display: flex; flex-wrap: wrap; gap: 6px; }
.v36-katalog-jenis-btn { font: inherit; font-size: 13px; font-weight: 500; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.v36-katalog-jenis-btn:hover { background: var(--cekung); }
.v36-katalog-jenis-btn.nol { color: var(--redup); }
.v36-katalog-jenis-btn[aria-pressed="true"] { background: var(--gelap); border-color: var(--gelap); color: var(--di-gelap); }
.v36-katalog-jenis-btn[aria-pressed="true"] .v36-katalog-n { background: var(--gelap-2); color: var(--di-gelap); }
.v36-katalog-tombol-saring { display: none; }
.v36-katalog-cari-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.v36-katalog-cari-bungkus { flex: 1 1 260px; min-width: 0; }
.v36-katalog-cari { width: 100%; min-height: 40px; }
.v36-katalog-alih { display: inline-flex; gap: 6px; }
.v36-katalog-tabel { width: 100%; }
.v36-katalog-tabel tbody tr { cursor: pointer; }
.v36-katalog-tabel tbody tr:hover { background: var(--cekung); }
.v36-katalog-tabel tbody tr.dipilih { background: var(--aksen-lembut); }
.v36-katalog-kol-pilih { width: 36px; }
.v36-katalog-kol-situs { min-width: 160px; }
.v36-katalog-kol-situs .mono { overflow-wrap: anywhere; }
.v36-katalog-tabel td:nth-child(n+3) { white-space: nowrap; }
.v36-katalog-tabel th, .v36-katalog-tabel td { padding-left: 8px; padding-right: 8px; }
.v36-katalog-tabel button.v36-katalog-nama { font-weight: 600; text-align: left; color: var(--teks); }
.v36-katalog-tabel button.v36-katalog-nama:hover { color: var(--aksen-tua); text-decoration: underline; }
.v36-katalog-sel-tingkat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.v36-katalog-tk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; flex: none; box-sizing: border-box; }
.v36-katalog-tk-a { background: var(--permukaan); border: 1.5px solid var(--redup); color: var(--teks); }
.v36-katalog-tk-b { background: var(--cekung); border: 1.5px solid var(--garis-kuat); color: var(--teks); }
.v36-katalog-tk-c { background: var(--teks); color: var(--permukaan); }
.v36-katalog-tk-kosong { border: 1.5px dashed var(--garis-kuat); color: var(--redup); }
.v36-katalog-belum { color: var(--lain); }
.v36-katalog-kaki { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 4px; }
.v36-katalog-kaki .spasi { flex: 1; }
.v36-katalog-halaman { display: inline-flex; gap: 6px; }
.v36-katalog-pesan { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--cekung); }
.v36-katalog-catatan { margin: 0 0 8px; }
.v36-katalog-kosong { align-items: flex-start; }
.v36-katalog-kosong p { margin: 4px 0 8px; }
.v36-katalog-kisi { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.v36-katalog-bilah .menu-isi { top: auto; bottom: calc(100% + 6px); }
.v36-katalog-bilah .menu-titik > summary { color: var(--di-gelap); min-height: 36px; display: inline-grid; place-items: center; }
.v36-katalog-hanya-hp { display: none; }
.v36-katalog-hp { list-style: none; margin: 0; padding: 0; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--permukaan); }
.v36-katalog-hp li + li { border-top: 1px solid var(--garis); }
.v36-katalog-hp-baris { font: inherit; color: inherit; width: 100%; min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; background: none; text-align: left; cursor: pointer; }
.v36-katalog-hp-nama { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v36-katalog-hp-nama > span { overflow-wrap: anywhere; }
.v36-katalog-lagi { width: 100%; margin-top: 12px; }
.v36-katalog-dialog { max-width: 820px; }
.v36-katalog-dialog-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.v36-katalog-dialog-kepala h2 { margin: 0; }
.v36-katalog-dialog-tabel { max-height: 50vh; overflow: auto; margin: 8px 0; }
.v36-katalog-semua { margin: 8px 0; }
.v36-katalog-hasil-dialog:empty { display: none; }
.v36-katalog-daftar-entri { margin: 8px 0; padding-left: 18px; }
/* Tab Diawasi mendalam */
.v36-katalog-angka-baris { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v36-katalog-angka { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--permukaan); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.v36-katalog-angka b { font-size: 22px; font-variant-numeric: tabular-nums; }
.v36-katalog-diawasi .panel-kepala h2 { display: inline-flex; align-items: center; gap: 8px; }
.v36-katalog-chip-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.v36-katalog-chip { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--cekung); color: var(--teks-2); }
@media (max-width: 1100px) { .v36-katalog-tata { grid-template-columns: 190px minmax(0, 1fr); gap: 16px; } }
@media (max-width: 900px) {
  .v36-katalog-tata { grid-template-columns: minmax(0, 1fr); }
  .v36-katalog-saring { display: none; order: 0; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--permukaan); padding: 12px 14px; }
  .v36-katalog-saring.buka { display: flex; }
  .v36-katalog-tombol-saring { display: inline-flex; }
}
@media (max-width: 640px) {
  .v36-katalog-sembunyi-hp { display: none !important; }
  .v36-katalog-hanya-hp { display: block; }
  .v36-katalog-panel { border: 0; background: none; padding: 0; }
  .v36-katalog-jenis { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .v36-katalog-cari-baris { order: -1; }
  .v36-katalog .v36-kepala-baris > .baris-tombol { width: 100%; flex-wrap: nowrap; }
  .v36-katalog .v36-kepala-baris > .baris-tombol > .tombol { flex: 1; }
  .v36-katalog-angka-baris { grid-template-columns: minmax(0, 1fr); }
  .v36-katalog-jumlah { display: none; }
}
/* [/v3.36 WILAYAH katalog] */
/* [v3.36 WILAYAH setelan] */
.v36-setelan-alat { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.v36-setelan-alat .segmen { flex: 0 1 auto; }
.v36-setelan-cari { flex: 1 1 220px; max-width: 320px; min-width: 0; min-height: 40px; box-sizing: border-box; }
.v36-setelan-kelompok > h2 { margin: 0; }
.v36-setelan-kelompok > h2 + p { margin: 4px 0 4px; color: var(--teks-2); }
.v36-setelan-butir { align-items: flex-start; }
.v36-setelan-teks { flex: 1 1 340px; min-width: 0; }
.v36-setelan-tanya { font-weight: 600; }
.v36-setelan-akibat { margin: 6px 0 0; padding: 0; list-style: none; color: var(--teks-2); display: flex; flex-direction: column; gap: 4px; }
.v36-setelan-meta { margin-top: 6px; }
.v36-setelan-kontrol { flex: 0 1 300px; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: flex-end; }
.v36-setelan-kontrol textarea { width: min(420px, 100%); }
.v36-setelan-kontrol input[type=text] { flex: 1 1 160px; width: auto; max-width: 240px; min-width: 0; }
.v36-setelan-kontrol select { max-width: 100%; }
.v36-setelan-ubah { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: flex-end; }
.v36-setelan-pil-beda { color: var(--aksen-tua); background: var(--aksen-lembut); white-space: normal; max-width: 100%; }
.v36-setelan-beda { box-shadow: inset 3px 0 0 var(--aksen); padding-left: 10px; }
.v36-setelan-lanjutan { border-top: 1px solid var(--garis); padding-top: 10px; margin-top: 4px; }
.v36-setelan-lanjutan > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v36-setelan-simpan { margin-top: 12px; }
.v36-setelan-hasil { margin: 6px 0 0; }
.v36-setelan-hasil:empty { display: none; }
.v36-setelan-hasil-ok { color: var(--aktif); }
.v36-setelan-hasil-galat { color: var(--bahaya); }
.v36-setelan-judul-khusus { margin: 12px 0 8px; font-size: 18px; }
.v36-setelan-judul-tab { margin: 0; font-size: 20px; }
.v36-setelan-khusus { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v36-setelan-isi { min-width: 0; }
/* Panel khusus lama yang dulu hanya tampil di dalam .tata-setup memakai aturan lebar yang sama di halaman Setelan. */
.v36-setelan select, .v36-setelan input:not([type=checkbox]):not([type=radio]) { max-width: 100%; }
.v36-setelan label { min-width: 0; }
.v36-setelan-khusus select { width: 100%; }
/* Panel khusus lama dilipat satu baris (papan "Setelan"): judul + ringkasan awam; isinya utuh setelah dibuka. */
.v36-setelan-judul-lain { margin: 8px 0 0; font-size: 16px; }
.v36-setelan-lipat { gap: 0; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); }
.v36-setelan-lipat > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 16px; min-height: 44px; box-sizing: border-box; list-style-position: outside; }
.v36-setelan-lipat > summary::-webkit-details-marker { display: none; }
.v36-setelan-lipat > summary::before { content: '›'; display: inline-block; width: 12px; color: var(--teks-2); transition: transform .15s; }
.v36-setelan-lipat[open] > summary::before { transform: rotate(90deg); }
.v36-setelan-lipat > summary .v36-setelan-judul-khusus { margin: 0; font-size: 16px; }
.v36-setelan-ringkas { flex: 1 1 280px; min-width: 0; }
.v36-setelan-lipat[open] > summary { border-bottom: 1px solid var(--garis); }
.v36-setelan-lipat-isi { display: flex; flex-direction: column; gap: 12px; padding: 12px; min-width: 0; }
/* Simpan muncul di bawah kelompok yang berubah saja (penjaga simpan menonaktifkan tombol selama belum ada perubahan). */
.v36-setelan-kelompok:not(.belum-disimpan) .v36-setelan-simpan:has(> button:disabled) { display: none; }
@media (max-width: 640px) { .v36-setelan .kisi-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .v36-setelan-alat .segmen { width: 100%; }
  .v36-setelan-alat .segmen button { flex: 1 1 auto; justify-content: center; }
  .v36-setelan-cari { max-width: none; flex-basis: 100%; }
  .v36-setelan-kontrol, .v36-setelan-ubah { justify-content: flex-start; flex-basis: 100%; }
  .v36-setelan-yatidak button { min-height: 44px; min-width: 64px; justify-content: center; }
}
/* [/v3.36 WILAYAH setelan] */
/* [v3.36 WILAYAH pantau] */
.v36-pantau { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.v36-pantau .v36-kepala { margin-bottom: 0; }
.v36-pantau-tiga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v36-pantau-kotak { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); color: var(--teks); text-decoration: none; }
.v36-pantau-kotak:hover { border-color: var(--garis-kuat); }
.v36-pantau-kotak h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.v36-pantau-tanya { font-size: 13px; color: var(--redup); }
.v36-pantau-kaki { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.v36-pantau-lanjut { font-size: 13.5px; font-weight: 600; color: var(--aksen); }
.v36-pantau-kotak:hover .v36-pantau-lanjut { text-decoration: underline; }
.v36-pantau-titik { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mati); }
.v36-pantau-titik.v36-pantau-ok { background: var(--aktif); }
.v36-pantau-titik.v36-pantau-awas { background: var(--lain); }
.v36-pantau-titik.v36-pantau-buruk { background: var(--bahaya); }
.v36-pantau-ubin-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v36-pantau-ubin { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--cekung); min-width: 0; }
.v36-pantau-ubin b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.v36-pantau-ubin span { font-size: 12.5px; color: var(--teks-2); line-height: 1.35; }
.v36-pantau-ubin-awas { background: var(--lain-bg); }
.v36-pantau-ubin-awas b { color: var(--lain); }
.v36-pantau-belum { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: var(--cekung); color: var(--redup); }
.v36-pantau-garis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; }
.v36-pantau-garis li { display: flex; gap: 8px; align-items: flex-start; }
.v36-pantau-garis-awas { color: var(--lain); }
.v36-pantau-garis-buruk { color: var(--bahaya); }
.v36-pantau-lambang { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--mati-bg); color: var(--mati); }
.v36-pantau-lambang.v36-pantau-ok { background: var(--aktif-bg); color: var(--aktif); }
.v36-pantau-lambang.v36-pantau-awas { background: var(--lain-bg); color: var(--lain); }
.v36-pantau-lambang.v36-pantau-buruk { background: var(--bahaya-bg); color: var(--bahaya); }
.v36-pantau-lambang-besar { width: 56px; height: 56px; border-radius: 16px; font-size: 26px; }
.v36-pantau-tindak, .v36-pantau-daftar-butir, .v36-pantau-riwayat { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; }
.v36-pantau-tindak h2 { margin: 0; padding: 12px 16px; font-size: 15px; border-bottom: 1px solid var(--garis); }
.v36-pantau-tindak-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; border-bottom: 1px solid var(--garis); }
.v36-pantau-tindak-baris:last-child { border-bottom: 0; }
.v36-pantau-tindak-baris > span { flex: 1 1 420px; min-width: 0; }
.v36-pantau-tindak-baris > a { font-weight: 600; }
.v36-pantau-tenang { display: flex; align-items: center; gap: 6px; margin: 0; }
.v36-pantau-kepala-sehat { display: flex; gap: 16px; align-items: flex-start; }
.v36-pantau-kepala-sehat > .v36-kepala { flex: 1; min-width: 0; }
.v36-pantau-butir { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--garis); }
.v36-pantau-butir:last-child { border-bottom: 0; }
.v36-pantau-butir .v36-pantau-lambang { width: 30px; height: 30px; font-size: 14px; }
.v36-pantau-butir-awas { background: var(--lain-sorot); }
.v36-pantau-butir-buruk { background: var(--bahaya-bg); }
.v36-pantau-butir-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; overflow-wrap: anywhere; }
.v36-pantau-butir-teks b { font-size: 15.5px; }
.v36-pantau-butir-teks > span { font-size: 13.5px; color: var(--teks-2); }
.v36-pantau-butir-teks small { font-size: 12.5px; color: var(--redup); }
.v36-pantau-butir > a.tombol { flex: none; white-space: nowrap; }
.v36-pantau-riwayat { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.v36-pantau-riwayat h2 { margin: 0; font-size: 15px; }
.v36-pantau-hari-kisi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.v36-pantau-hari { font: inherit; font-size: 12.5px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-align: center; background: var(--mati-bg); color: var(--mati); min-width: 0; overflow-wrap: anywhere; }
.v36-pantau-hari.v36-pantau-ok { background: var(--aktif-bg); color: var(--aktif); }
.v36-pantau-hari.v36-pantau-awas { background: var(--lain-bg); color: var(--lain); }
.v36-pantau-hari.v36-pantau-buruk { background: var(--bahaya-bg); color: var(--bahaya); }
.v36-pantau-hari[aria-pressed="true"] { border-color: currentColor; }
.v36-pantau-cerita { margin: 0; line-height: 1.5; }
@media (max-width: 1100px) { .v36-pantau-tiga { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .v36-pantau-kepala-sehat { flex-direction: column; gap: 8px; }
  .v36-pantau-lambang-besar { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; }
  .v36-pantau-butir { flex-wrap: wrap; padding: 12px; gap: 10px; }
  .v36-pantau-butir-teks { flex: 1 1 calc(100% - 50px); }
  .v36-pantau-butir > a.tombol { margin-left: 40px; }
  .v36-pantau-hari-kisi { gap: 4px; }
  .v36-pantau-hari { padding: 8px 2px; font-size: 11.5px; overflow-wrap: normal; }
  .v36-pantau-tindak-baris > span { flex-basis: 100%; }
}
/* [/v3.36 WILAYAH pantau] */
/* [v3.36 WILAYAH kondisi-cb] */
/* Pantau › Kondisi Chromebook (papan "Cb"): segmen masalah, tabel + rincian berdampingan (bertumpuk di bawah 1100 px). */
.v36-kondisi-cb { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.v36-kondisi-cb-alat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.v36-kondisi-cb-alat .v36-kondisi-cb-segmen { flex: 1 1 420px; }
.v36-kondisi-cb-segmen .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 3px 12px; }
.v36-kondisi-cb-n { font-size: 12px; font-weight: 600; padding: 0 7px; border-radius: 999px; background: var(--cekung); color: var(--teks-2); line-height: 20px; font-variant-numeric: tabular-nums; }
.v36-kondisi-cb-segmen .chip.aktif .v36-kondisi-cb-n { background: var(--aksen-tua); color: var(--aksen-teks); }
/* Kanvas v38 papan 17 (v3.47.1): judul daftar di dalam panel; isi laci periksa (blok Perbaiki dari sini, hasil) bertumpuk. */
.v36-kondisi-cb-judul-daftar { font-size: 18px; line-height: 1.3; margin: 0; padding: 16px 16px 8px; }
.ux121-bagian-isi { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ux121-bagian-isi .v36-kondisi-cb-aksi:first-of-type { border-top: 0; }
.v36-kondisi-cb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.v36-kondisi-cb-grid.ada-rincian { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); }
.v36-kondisi-cb-daftar { padding: 0; overflow: hidden; min-width: 0; }
.v36-kondisi-cb-daftar .kosong-tenang { padding: 22px 20px; }
.v36-kondisi-cb-tabel td { vertical-align: top; }
.v36-kondisi-cb-tabel tbody tr { cursor: pointer; }
.v36-kondisi-cb-tabel tbody tr:hover td { background: var(--cekung); }
.v36-kondisi-cb-tabel tbody tr[aria-selected="true"] td { background: var(--aksen-lembut); }
.v36-kondisi-cb-tabel tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--aksen); }
.v36-kondisi-cb-tabel tbody tr:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.v36-kondisi-cb-tabel td.mono, .v36-kondisi-cb-waktu { white-space: nowrap; }
.v36-kondisi-cb-rincian { border-color: var(--aksen); display: flex; flex-direction: column; gap: 12px; min-width: 0; position: sticky; top: 12px; }
.v36-kondisi-cb-rincian:focus { outline: none; }
.v36-kondisi-cb-rincian:focus-visible { outline: 2px solid var(--fokus); }
.v36-kondisi-cb-rincian-kepala { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.v36-kondisi-cb-rincian-kepala > div { min-width: 0; overflow-wrap: anywhere; }
.v36-kondisi-cb-rincian-judul { font-size: 17px; font-weight: 600; color: var(--teks); }
.v36-kondisi-cb-judul-bagian { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.v36-kondisi-cb-cek-daftar { list-style: none; margin: 0; padding: 0; }
.v36-kondisi-cb-cek { display: flex; gap: 10px; padding: 6px 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.v36-kondisi-cb-ikon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; margin-top: 1px; }
.v36-kondisi-cb-ikon.ok { background: var(--aktif-bg); color: var(--aktif); }
.v36-kondisi-cb-ikon.gagal { background: var(--bahaya-bg); color: var(--bahaya); }
.v36-kondisi-cb-ikon.netral { background: var(--mati-bg); color: var(--mati); }
.v36-kondisi-cb-akibat { color: var(--teks-2); }
.v36-kondisi-cb-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--garis); }
.v36-kondisi-cb-aksi-teks { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.4; }
.v36-kondisi-cb-hasil { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--cekung); font-size: 13px; line-height: 1.5; }
.v36-kondisi-cb-hasil-baris { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.v36-kondisi-cb-hasil-baris.ok > span:first-child { color: var(--aktif); font-weight: 700; }
.v36-kondisi-cb-hasil-baris.gagal > span:first-child { color: var(--bahaya); font-weight: 700; }
td .v36-kondisi-cb-hasil-baris { margin-top: 4px; }
@media (max-width: 1100px) {
  .v36-kondisi-cb-grid.ada-rincian { grid-template-columns: minmax(0, 1fr); }
  .v36-kondisi-cb-rincian { position: static; }
}
@media (max-width: 640px) {
  /* Pedoman 1.9: tabel utama menjadi kartu di HP. */
  .v36-kondisi-cb-tabel thead { display: none; }
  .v36-kondisi-cb-tabel, .v36-kondisi-cb-tabel tbody, .v36-kondisi-cb-tabel tr, .v36-kondisi-cb-tabel td { display: block; width: 100%; }
  .v36-kondisi-cb-tabel tr { border-bottom: 1px solid var(--garis); padding: 8px 0; }
  .v36-kondisi-cb-tabel td { border: 0; padding: 2px 14px; }
  .v36-kondisi-cb-tabel td.mono, .v36-kondisi-cb-waktu { font-size: 13px; color: var(--redup); }
  .v36-kondisi-cb-aksi .tombol { min-height: 44px; }
  .v36-kondisi-cb-segmen .chip { min-height: 40px; }
  /* Enam segmen masalah: satu baris yang digeser ke samping (pola segmen Katalog), bukan empat baris yang mendorong daftar ke bawah. */
  .v36-kondisi-cb-alat .v36-kondisi-cb-segmen { flex: 1 1 100%; width: 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; position: relative;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: thin; }
  .v36-kondisi-cb-segmen .chip { flex: none; white-space: nowrap; scroll-snap-align: start; }
}
/* Halaman lama Chromebook › Kepatuhan perangkat: pilihan "OU uji" berisi path OU panjang; di HP membungkus dan tidak melebarkan halaman. */
.v36-kondisi-cb-muat-hp { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.v36-kondisi-cb-muat-hp .label-sebaris { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.v36-kondisi-cb-muat-hp select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
/* [/v3.36 WILAYAH kondisi-cb] */
/* [v3.36 WILAYAH aktivitas] */
.v36-aktivitas { display: flex; flex-direction: column; min-width: 0; }
.v36-aktivitas-tata { display: grid; grid-template-columns: 270px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "tangga isi" "catatan isi"; gap: 14px 20px; align-items: start; }
.v36-aktivitas-isi { grid-area: isi; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.v36-aktivitas-samping { grid-area: tangga; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v36-aktivitas-catatan-wadah { grid-area: catatan; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v36-aktivitas-samping-judul { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.v36-aktivitas-tangga { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v36-aktivitas-tg { display: flex; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--teks); }
a.v36-aktivitas-tg:hover { background: var(--cekung); }
a.v36-aktivitas-tg:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.v36-aktivitas-tg.kini { background: var(--aksen-lembut); }
.v36-aktivitas-tg.redup { color: var(--redup); }
.v36-aktivitas-no { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cekung); color: var(--teks-2); font-weight: 700; font-size: 13px; }
.v36-aktivitas-no.kini { background: var(--aksen); color: var(--aksen-teks); }
.v36-aktivitas-tg-teks { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; min-width: 0; }
.v36-aktivitas-tg-teks span { font-size: 12.5px; color: var(--redup); }
.v36-aktivitas-catatan { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--permukaan); border: 1px solid var(--garis); font-size: 12.5px; color: var(--teks-2); line-height: 1.5; }
.v36-aktivitas-angka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v36-aktivitas-angka-butir { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v36-aktivitas-angka-butir b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.v36-aktivitas-angka-butir span { font-size: 12.5px; color: var(--teks-2); }
.v36-aktivitas-angka-butir span.kecil { color: var(--redup); }
.v36-aktivitas-panel .panel-kepala { margin-bottom: 8px; }
.v36-aktivitas-panel .panel-kepala h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v36-aktivitas-h2-ket { font-weight: 400; font-size: 13px; }
.v36-aktivitas-kosong { margin: 4px 0; }
.v36-aktivitas-perhatian { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v36-aktivitas-perhatian > li { padding: 10px 0; border-bottom: 1px solid var(--garis); }
.v36-aktivitas-perhatian > li:last-child { border-bottom: 0; }
.v36-aktivitas-perhatian-nama { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.v36-aktivitas-perhatian ul { margin: 4px 0 0; padding-left: 18px; color: var(--teks-2); }
.v36-aktivitas-kolom-jam { width: 80px; }
.v36-aktivitas-garis td .pil, .v36-aktivitas-panel td .pil { white-space: normal; }
.v36-aktivitas-panel td .pil + .pil { margin-left: 4px; }
.v36-aktivitas-baris-kini td { background: var(--aksen-lembut); }
.v36-aktivitas-forensik { border-color: var(--teks); }
.v36-aktivitas-pil-kasus { background: var(--teks); color: var(--permukaan); }
.v36-aktivitas-forensik-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.v36-aktivitas-forensik-baris > p { margin: 0; flex: 1 1 420px; min-width: 0; font-size: 13.5px; color: var(--teks-2); line-height: 1.5; }
.v36-aktivitas-forensik-hasil h3 { font-size: 15px; margin: 16px 0 6px; }
.v36-aktivitas-url { word-break: break-all; min-width: 180px; }
.v36-aktivitas-host-daftar { font-size: 13px; min-width: 140px; }
.v36-aktivitas-daftar-rapat { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.v36-aktivitas-hasil:empty { display: none; }
@media (max-width: 900px) {
  .v36-aktivitas-tata { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "tangga" "isi" "catatan"; gap: 14px; }
  .v36-aktivitas-tangga { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .v36-aktivitas-tangga > li { flex: none; }
  .v36-aktivitas-tg { gap: 8px; padding: 8px 10px; align-items: center; }
  .v36-aktivitas-tg-teks span { display: none; }
}
@media (max-width: 640px) {
  .v36-aktivitas-angka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v36-aktivitas-forensik-baris > p { flex-basis: 100%; }
}
/* [/v3.36 WILAYAH aktivitas] */

/* ---------- v3.38: menu ⋯ melayang terhadap layar (laporan Mudir 14 Okt 18.26) ---------- */
/* Letak (top/left) diisi letakkanMenu() di app.js; menu tidak lagi terpotong wadah gulir tabel atau panel. */
.menu-isi.menu-melayang { position: fixed; z-index: 45; max-height: calc(100vh - 16px); overflow-y: auto; }
/* v3.38 U: menu yang baru terbuka disembunyikan sampai letakkanMenu() menghitung letaknya (tanpa kedipan satu frame). */
details.menu-baris[open] > .menu-isi:not(.menu-melayang) { visibility: hidden; }
/* Tabel "Bagian halaman les yang terblokir": alamat panjang boleh patah, tombol aksi tidak terpotong di tepi panel. */
table.tabel-elemen td.mono { overflow-wrap: anywhere; min-width: 12ch; }
table.tabel-elemen td.c-aksi { width: 1%; }
table.tabel-elemen td.c-aksi .baris-tombol { flex-wrap: nowrap; }
table.tabel-elemen td.c-aksi .tombol { white-space: nowrap; }

/* ---------- v3.38 D1: halaman Aturan situs ---------- */
/* [v3.38 WILAYAH ATURAN] -- D1: Akses internet › Setelan › Aturan situs. Hanya token var(--…). */
.v338-aturan { min-width: 0; }
.v338-aturan .v36-kepala { margin-bottom: 0; }
.v338-segmen-setelan { margin: 0; }
.v338-aturan-alat { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.v338-aturan-saring { flex: 0 1 auto; }
.v338-aturan-cari { flex: 1 1 220px; max-width: 320px; min-width: 0; min-height: 40px; box-sizing: border-box; }
.v338-aturan-kelompok { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v338-aturan-kelompok > h2 { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v338-aturan-n { font-weight: 400; }
.v338-aturan-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.v338-aturan-kartu { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); }
.v338-aturan-kartu.v338-buka { grid-column: 1 / -1; border-color: var(--garis-kuat); box-shadow: var(--bayang); }
.v338-aturan-kartu.belum-disimpan { box-shadow: inset 3px 0 0 var(--lain), var(--bayang); }
.v338-aturan-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 4px 10px; }
.v338-aturan-kepala h3 { margin: 0; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.v338-aturan-kepala .pil { white-space: normal; max-width: 100%; }
.v338-aturan-jumlah { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--teks); }
.v338-aturan-penjelasan { margin: 0; color: var(--teks-2); }
.v338-aturan-alasan { margin: 0; overflow-wrap: anywhere; }
.v338-aturan-cocok { margin: 0; color: var(--aksen-tua); }
.v338-aturan-peringatan { margin: 2px 0 0; font-size: 13.5px; padding: 8px 10px; }
.v338-aturan-tombol { margin-top: 4px; gap: 6px; }
.v338-aturan-penyunting { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--garis); }
.v338-aturan-penyunting > p { margin: 0; }
.v338-aturan-penyunting textarea.v338-aturan-isi { min-height: 140px; max-height: 60vh; }
.v338-aturan-kaki { align-items: center; margin-top: 2px; }
.v338-aturan-kaki .tanda-belum-simpan { margin-right: auto; }
.v338-aturan-galat { padding: 10px 12px; border-radius: 8px; background: var(--bahaya-bg); color: var(--bahaya); font-size: 14px; }
.v338-aturan-galat:focus { outline: 2px solid var(--fokus); outline-offset: 2px; }
.v338-aturan-galat p { margin: 0 0 4px; color: inherit; }
.v338-aturan-galat ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.v338-aturan-galat button.tautan { color: var(--bahaya); text-decoration: underline; }
/* Tabel penyunting (prasyarat, galat) dan riwayat. */
.v338-aturan-bungkus { border: 1px solid var(--garis); border-radius: 10px; }
.v338-aturan-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.v338-aturan-tabel th { text-align: left; font-size: 12px; font-weight: 600; color: var(--teks-2); padding: 8px; border-bottom: 1px solid var(--garis); background: var(--cekung); }
.v338-aturan-tabel td { padding: 6px 8px; border-bottom: 1px solid var(--garis); vertical-align: top; min-width: 0; }
.v338-aturan-tabel tbody tr:last-child td { border-bottom: 0; }
.v338-aturan-tabel input[type=text], .v338-aturan-tabel textarea { width: 100%; min-width: 120px; box-sizing: border-box; }
.v338-aturan-tabel textarea.v338-aturan-sel-isi { min-height: 56px; font-size: 13px; }
.v338-aturan-tabel td.v338-aturan-sel-aksi { width: 1%; white-space: nowrap; }
.v338-aturan-tabel tr.v338-baris-galat td { background: var(--bahaya-bg); }
.v338-aturan-tabel [aria-invalid="true"] { border-color: var(--bahaya); }
.v338-aturan-ringkas { margin: 4px 0 0; padding-left: 18px; overflow-wrap: anywhere; }
/* Rak dan kategori. */
.v338-aturan-rak-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.v338-aturan-rak { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border: 1px solid var(--garis); border-radius: 10px; background: var(--cekung); }
.v338-aturan-rak-kepala { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; }
.v338-aturan-rak-kepala label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 160px; min-width: 0; }
.v338-aturan-rak textarea.v338-aturan-isi { min-height: 90px; background: var(--permukaan); }
.v338-aturan-kategori-alat { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
.v338-aturan-kategori-alat label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; max-width: 360px; }
.v338-aturan-kategori-alat select, .v338-aturan-kategori-alat input { width: 100%; min-height: 40px; box-sizing: border-box; }
.v338-aturan-hasil-domain { display: flex; flex-wrap: wrap; gap: 6px; }
.v338-aturan-hasil-domain:empty { display: none; }
/* Dialog pratinjau, bawaan, riwayat. */
.v338-pratinjau .v338-pratinjau-judul { margin: 4px 0 0; font-size: 15px; }
.v338-pratinjau-dampak { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--teks); font-size: 14px; }
.v338-pratinjau .daftar-ringkas-keputusan .v338-aturan-ringkas { max-height: 220px; overflow: auto; }
.v338-pratinjau label { font-weight: 600; }
dialog.v338-riwayat { max-width: 900px; }
.v338-riwayat-tabel td:first-child { white-space: nowrap; }
@media (max-width: 640px) {
  .v338-aturan-saring { width: 100%; }
  .v338-aturan-saring button { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .v338-aturan-cari { max-width: none; flex-basis: 100%; min-height: 44px; }
  .v338-aturan-kartu { padding: 12px; }
  .v338-aturan-tombol .tombol, .v338-aturan-kaki .tombol { min-height: 44px; }
  .v338-aturan-kaki { justify-content: stretch; }
  .v338-aturan-kaki .tombol { flex: 1 1 auto; }
  .v338-aturan-kaki .tanda-belum-simpan { flex-basis: 100%; }
  /* Tabel penyunting dan riwayat menjadi baris bertumpuk; label kolom tampil di atas isian. */
  .v338-aturan-bungkus { border: 0; overflow: visible; }
  .admin-utama table.tabel.v338-aturan-tabel, table.tabel.v338-aturan-tabel, .v338-aturan-tabel { display: block; overflow: visible; }
  .v338-aturan-tabel thead { display: none; }
  .v338-aturan-tabel tbody, .v338-aturan-tabel tr, .v338-aturan-tabel td { display: block; }
  .v338-aturan-tabel tr { border: 1px solid var(--garis); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--permukaan); }
  .v338-aturan-tabel tr.v338-baris-galat { border-color: var(--bahaya); background: var(--bahaya-bg); }
  .v338-aturan-tabel tbody tr:last-child td, .v338-aturan-tabel td { border: 0; padding: 4px 0; background: transparent; }
  .v338-aturan-tabel td[data-kolom]::before { content: attr(data-kolom); display: block; font-size: 12px; font-weight: 600; color: var(--teks-2); margin-bottom: 2px; }
  .v338-aturan-tabel td.v338-aturan-sel-aksi { width: auto; padding-top: 6px; }
  .v338-aturan-tabel input[type=text] { min-height: 44px; }
  .v338-aturan-tabel input[type=text], .v338-aturan-tabel textarea { min-width: 0; }
  dialog.v338-riwayat { padding: 16px; }
}
/* [/v3.38 WILAYAH ATURAN] */

/* ---------- v3.38 D2: kolom Saran/Alasan, pil ikut, kartu pengalihan sesi ---------- */
/* [v3.38 WILAYAH D2] Kolom Saran dan Alasan, pil "ikut", kartu pengalihan di layar sesi (KONTRAK-v3.38 bagian 5). Token saja. */
.v338-saran-ringkas { margin: 4px 0 8px; }
.v338-saran-tabel td.mono, .v338-saran-tabel td.sel-id { white-space: normal; max-width: 24ch; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; min-width: 18ch; }
.v338-saran-tabel td .pil { white-space: normal; }
.v338-saran-tabel td.v338-saran-alasan { min-width: 20ch; }
.v338-saran-tabel td.v338-saran-pilih { width: 1%; }
.v338-saran-kontrol { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.v338-saran-kontrol select { max-width: 100%; }
.v338-saran-baris.v338-saran-jangan td.mono, .v338-saran-baris.v338-saran-tidak-bisa td.mono { color: var(--redup); }
.v338-saran-sudah { margin-top: 12px; }
.v338-saran-sudah > summary { cursor: pointer; font-weight: 600; color: var(--teks-2); padding: 4px 0; }

/* Daftar situs ruang: baris "ikut" */
.v338-ikut td { background: var(--cekung); }
.v338-pil-ikut { margin-top: 4px; white-space: normal; }
.v338-ikut-entri { overflow-wrap: anywhere; }
.v338-ikut-catatan { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.v338-ikut-ringkas { margin: 4px 0 8px; }

/* Layar sesi: tabel bagian halaman terblokir */
table.tabel-elemen td.v338-elemen-alasan { min-width: 18ch; max-width: 36ch; }
table.tabel-elemen td.v338-elemen-dari { min-width: 16ch; }
table.tabel-elemen td .pil { white-space: normal; }
/* Dua kolom baru (Saran, Alasan): tombol aksi bertumpuk supaya tetap utuh di tepi panel (perbaikan eaebda7 dipertahankan). */
table.tabel-elemen td.c-aksi .baris-tombol { flex-direction: column; align-items: stretch; }
.v338-pesan-sel { margin: 0; padding: 6px 10px; font-size: inherit; }

/* Layar sesi: kartu satu klik untuk pengalihan */
.v338-kartu-alih { border-color: var(--aksen); background: var(--aksen-lembut); display: grid; gap: 10px; }
.v338-kartu-alih-baris { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.v338-kartu-alih-baris + .v338-kartu-alih-baris { border-top: 1px solid var(--garis); padding-top: 10px; }
.v338-kartu-alih-isi { flex: 1 1 280px; min-width: 0; }
.v338-kartu-alih-isi p { margin: 0 0 2px; overflow-wrap: anywhere; }
.v338-kartu-alih-teks { color: var(--teks); }
.v338-kartu-alih-aksi { flex: 0 0 auto; }

@media (max-width: 640px) {
  .v338-saran-tabel td.v338-saran-alasan, table.tabel-elemen td.v338-elemen-alasan { max-width: none; min-width: 0; }
  .v338-saran-tabel td.mono { min-width: 0; font-weight: 600; }
  .v338-saran-kontrol select { flex: 1 1 100%; min-height: 44px; }
  .v338-saran-kontrol .tombol { min-height: 44px; }
  .v338-kartu-alih-aksi { flex: 1 1 100%; }
  .v338-kartu-alih-aksi .tombol { flex: 1 1 auto; min-height: 44px; }
  table.tabel-elemen.tabel-kartu-hp td.c-aksi { width: auto; padding-top: 6px; }
  table.tabel-elemen.tabel-kartu-hp td.c-aksi .baris-tombol { flex-direction: row; flex-wrap: wrap; }
  table.tabel-elemen.tabel-kartu-hp td.c-aksi .tombol { min-height: 44px; }
  .v338-saran-tabel td.mono, .v338-saran-tabel td.sel-id { max-width: none; }
  .v338-tabel-situs td.v338-sembunyi-hp { display: none; }
  .v338-tabel-situs tr.v338-ikut td { background: transparent; }
  table.tabel-kartu-hp.v338-tabel-situs tr.v338-ikut { background: var(--cekung); }
  .v338-tabel-situs .v338-ikut-catatan { justify-content: flex-start; }
  .v338-tabel-situs .v338-ikut-catatan .tombol { min-height: 44px; }
}
/* [/v3.38 WILAYAH D2] */

/* [v3.37 WILAYAH penyaring] -- pemilik: D (KONTRAK-v3.37 bagian 8). Papan Main, SitusC, Kejadian, SalahTutup; token saja. */
.v37-penyaring, .v37-kejadian, .v37-situs-c { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.v37-panel { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v37-panel h2 { margin: 0; }
.v37-panel-tabel { padding: 0; gap: 0; overflow: hidden; }
.v37-panel-kepala { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--garis); }
.v37-panel-kepala p { margin: 4px 0 0; }
.v37-panel-kepala.v37-kolom { flex-direction: column; align-items: stretch; }
.v37-kaki-panel { margin: 0; padding: 12px 18px; border-top: 1px solid var(--garis); }
.v37-sebaris { display: flex; flex-direction: row; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-width: 0; }
.v37-kanan { margin-left: auto; }
.v37-blok { display: block; }
.v37-tebal { font-weight: 600; color: var(--teks); }
.v37-lbl { font-size: 13px; font-weight: 600; color: var(--teks); }
.v37-isian { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v37-isian select { width: 100%; }
.v37-lebar-baca { max-width: 900px; }
.v37-tautan-tegas { font-weight: 600; }
.v37-hasil-wadah:empty { display: none; }
.v37-hasil-wadah { padding: 0 18px; }
.v37-tumpuk { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Sakelar (role=switch). */
.v37-saklar { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; border: 1px solid var(--garis-kuat); background: var(--cekung); padding: 0; cursor: pointer; }
.v37-saklar::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--permukaan); border: 1px solid var(--garis-kuat); box-sizing: border-box; transition: left .15s; }
.v37-saklar[aria-checked="true"] { background: var(--aksen); border-color: var(--aksen); }
.v37-saklar[aria-checked="true"]::after { left: 25px; border-color: var(--aksen-teks); }
.v37-saklar.kecil { width: 44px; height: 26px; }
.v37-saklar.kecil::after { width: 18px; height: 18px; }
.v37-saklar.kecil[aria-checked="true"]::after { left: 21px; }
.v37-saklar:disabled { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .v37-saklar::after { transition: none; } }
/* Status dan sakelar global. */
.v37-status { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; }
.v37-status-kiri { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 360px; }
.v37-status-kiri p { margin: 0; }
.v37-status-kanan { display: flex; align-items: center; gap: 12px; flex: none; }
.v37-status-label { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.v37-status-ket { color: var(--teks-2); }
.v37-status-ket b { color: var(--teks); }
/* v3.40.2: pilihan mode penyaring (Tidak aktif · Pantau saja · Aktif) menggantikan sakelar. */
.v37-status-kanan.v37-status-mode { flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 1 420px; }
.v37-status-mode .v37-status-label { align-items: flex-end; }
.v37-status-mode .bantu { text-align: right; max-width: 420px; }
.v37-mode button:disabled { opacity: .6; cursor: not-allowed; }
/* Tabel kategori berkelompok. */
.v37-tabel-kategori { width: 100%; }
.v37-tabel-kategori th, .v37-tabel-kategori td { vertical-align: middle; }
.v37-tabel-kategori tr.v37-kelompok th { background: var(--latar); color: var(--teks-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid var(--garis); }
.v37-kelompok-ket { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--redup); margin-left: 8px; }
.v37-tabel-kategori select { min-width: 0; width: 100%; }
.v37-tabel-kategori th:nth-child(3) { width: 300px; }
.v37-tabel-kategori th:nth-child(4) { width: 130px; }
.v37-tabel-kategori th:nth-child(5) { width: 84px; }
.v37-penyaring input[type="number"] { width: 84px; }
.v37-tabel-kejadian td .tombol { white-space: nowrap; }
.v37-nama { font-weight: 600; display: block; }
.v37-sub { display: block; font-size: 12.5px; color: var(--redup); }
.v37-sub:empty { display: none; }
.v37-dari { color: var(--teks-2); white-space: nowrap; }
.v37-tabel-kategori tr.v37-redup .v37-nama, .v37-tabel-kategori tr.v37-redup .v37-dari { color: var(--redup); }
/* Pemberitahuan, cuplikan, yang tidak dilakukan. */
.v37-dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.v37-penerima { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v37-penerima li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--garis); font-size: 13.5px; }
.v37-penerima li:first-child { border-top: 0; }
.v37-penerima-baris { display: block; }
.v37-cek { display: inline-flex; flex-direction: row; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 400; cursor: pointer; }
.v37-cek input { margin: 2px 0 0; flex: none; }
.v37-panel-tidak { background: var(--latar); }
.v37-tidak { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 24px; }
.v37-tidak li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.v37-tidak li svg { flex: none; margin-top: 2px; color: var(--teks-2); }
.v37-lipat > summary { cursor: pointer; list-style-position: outside; }
.v37-lipat-isi { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.v37-kaki { display: flex; align-items: center; justify-content: flex-end; gap: 10px 14px; flex-wrap: wrap; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 12px 16px; }
.v37-kaki > .kecil { margin-right: auto; }
.v37-kaki + .v36-pesan-hasil-wadah, .v37-kaki .v36-pesan-hasil-wadah { width: 100%; }
.v37-tab-setelan { margin-bottom: 0; }
/* Situs C. */
.v37-bilah-status { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 10px; padding: 10px 14px; }
.v37-alat { width: 100%; }
.v37-cari { width: 320px; max-width: 100%; }
.v37-alamat { display: block; font-size: 12.5px; color: var(--redup); }
.v37-tabel-situs .angka, .v37-tabel-st .angka { text-align: right; font-variant-numeric: tabular-nums; }
.v37-tabel-situs .angka a { font-weight: 600; }
.v37-diubah span { display: block; }
.v37-peralihan { margin-top: 6px; }
.v37-rak { color: var(--bahaya); margin-top: 4px; }
.v37-segmen-keadaan { flex-wrap: nowrap; }
.v37-segmen-keadaan button { white-space: nowrap; }
/* Kejadian. */
.v37-ringkas { display: flex; flex-direction: column; gap: 10px; }
.v37-ringkas h2 { margin: 0; }
.v37-ubin-kisi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.v37-ubin { font: inherit; text-align: left; color: var(--teks); background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.v37-ubin:hover { border-color: var(--garis-kuat); }
.v37-ubin.aktif { border-color: var(--aksen); box-shadow: inset 0 0 0 1px var(--aksen); }
.v37-ubin-label { font-size: 13px; font-weight: 600; color: var(--redup); }
.v37-ubin b { font-size: 26px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.v37-ubin-rinci { font-size: 12.5px; color: var(--teks-2); }
.v37-saringan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; padding: 16px 18px; border-bottom: 1px solid var(--garis); }
.v37-jumlah { padding-bottom: 10px; white-space: nowrap; }
.v37-chip-baris { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 0; }
.v37-chip { background: var(--aksen-lembut); color: var(--teks); }
.v37-tabel-kejadian td { vertical-align: top; }
.v37-waktu { white-space: nowrap; color: var(--teks-2); }
.v37-kat { display: inline-block; border-radius: 10px; padding: 2px 9px; font-size: 12.5px; font-weight: 600; background: var(--cekung); color: var(--teks); line-height: 1.4; }
.v37-tindak { color: var(--teks-2); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.v37-tabel-kejadian tr.v37-butuh td, .v37-tabel-kejadian tr.v37-butuh-ket td { background: var(--lain-bg); }
.v37-tabel-kejadian tr.v37-butuh td:first-child, .v37-tabel-kejadian tr.v37-butuh-ket td:first-child { box-shadow: inset 3px 0 0 var(--lain); }
.v37-tabel-kejadian tr.v37-butuh td { border-bottom: 0; }
.v37-tabel-kejadian tr.v37-butuh-ket td { border-bottom: 1px solid var(--lain-garis); padding-top: 0; }
.v37-tabel-kejadian tr.v37-sorot td { background: var(--aksen-lembut); }
.v37-baris-butuh { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
/* Dialog cuplikan. */
dialog.v37-dialog-cuplikan { max-width: 820px; }
.v37-cuplikan-isi { display: flex; flex-direction: column; gap: 12px; }
.v37-cuplikan-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.v37-cuplikan { margin: 0; background: var(--cekung); border: 1px solid var(--garis); border-radius: 10px; padding: 14px 16px; font-size: 15px; line-height: 1.6; color: var(--teks-2); font-style: italic; overflow-wrap: anywhere; }
.v37-catatan-buka { color: var(--teks); }
.v37-meta { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 16px; font-size: 13.5px; }
.v37-meta dt { color: var(--redup); }
.v37-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.v37-daftar-buka { margin: 6px 0 0; padding-left: 18px; }
/* Laporan salah tutup. */
.v37-bilah-keputusan { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--garis); background: var(--aksen-lembut); }
.v37-bilah-keputusan label.v37-cek, .v37-panel label.v37-cek { display: inline-flex; flex-direction: row; font-weight: 600; align-items: center; gap: 10px; }
.v37-panel label.v37-cek { font-weight: 400; align-items: flex-start; }
.v37-bilah-keputusan .v37-cek input { margin: 0; }
.v37-kol-pilih { width: 32px; }
.v37-halaman .v37-alamat { font-size: 11.5px; color: var(--teks-2); overflow-wrap: anywhere; }
.v37-kat-baris { margin-top: 8px; }
.v37-alasan { min-width: 190px; }
.v37-alasan q { color: var(--teks); }
.v37-daftar-alasan { margin: 4px 0 0; padding-left: 18px; }
.v37-keputusan select { width: 240px; max-width: 100%; }
.v37-saran-ket { max-width: 280px; margin-top: 4px; }
.v37-buka a { white-space: nowrap; }
.v37-buka .kecil { display: block; max-width: 120px; }
.v37-daftar-gagal { margin: 4px 0 0; padding-left: 18px; }
@media (max-width: 900px) {
  .v37-dua, .v37-tidak, .v37-cuplikan-grid { grid-template-columns: minmax(0, 1fr); }
  .v37-ubin-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v37-saringan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v37-jumlah { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (max-width: 640px) {
  .v37-status-kanan { width: 100%; justify-content: space-between; }
  .v37-status-label { align-items: flex-start; text-align: left; }
  .v37-status-kanan.v37-status-mode, .v37-status-mode .v37-status-label { align-items: flex-start; }
  .v37-status-mode .bantu { text-align: left; max-width: none; }
  .v37-mode { display: flex; width: 100%; }
  .v37-mode button { flex: 1 1 0; padding-left: 8px; padding-right: 8px; }
  .v37-panel-kepala, .v37-saringan, .v37-bilah-keputusan, .v37-kaki-panel { padding-left: 14px; padding-right: 14px; }
  .v37-hasil-wadah { padding: 0 14px; }
  .v37-tabel-kategori tr.v37-kelompok { border: 0; padding: 8px 0 0; margin: 0; background: transparent; }
  .v37-tabel-kategori tr.v37-kelompok th { display: block; background: transparent; padding: 4px 0; border: 0; }
  .v37-tabel-kategori select { max-width: 100%; }
  .v37-tabel-kategori tr.v37-kelompok th { padding-left: 4px; }
  .admin-utama table.v37-tabel-kategori tr[data-kategori], table.v37-tabel-kategori tr[data-kategori] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; }
  .v37-tabel-kategori tr[data-kategori] td { grid-column: 1 / -1; }
  .v37-tabel-kategori tr[data-kategori] td.v37-kol-nama { grid-column: 1; grid-row: 1; }
  .v37-tabel-kategori tr[data-kategori] td.v37-kol-saklar { grid-column: 2; grid-row: 1; }
  .v37-tabel-kategori td[data-kolom], .v37-tabel-situs td[data-kolom], .v37-tabel-kejadian td[data-kolom], .v37-tabel-st td[data-kolom] { padding: 4px 0; }
  .v37-segmen-keadaan { flex-wrap: wrap; }
  .v37-segmen-keadaan button { white-space: normal; text-align: left; }
  .v37-tabel-kejadian tr.v37-butuh-ket { margin-top: -10px; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
  .v37-tabel-kejadian tr.v37-butuh td, .v37-tabel-kejadian tr.v37-butuh-ket td, .v37-tabel-kejadian tr.v37-butuh td:first-child, .v37-tabel-kejadian tr.v37-butuh-ket td:first-child { background: transparent; box-shadow: none; }
  .v37-tabel-kejadian tr.v37-butuh, .v37-tabel-kejadian tr.v37-butuh-ket { border-left: 3px solid var(--lain); }
  .v37-tabel-kejadian tr.v37-butuh, .v37-tabel-kejadian tr.v37-butuh-ket { background: var(--lain-bg); border-color: var(--lain-garis); }
  .v37-tabel-kejadian tr.v37-butuh { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
  .v37-tabel-kejadian tr.v37-butuh-ket td[colspan] { padding-top: 6px; }
  .v37-tabel-st td.v37-kol-pilih { float: right; width: auto; }
  .v37-keputusan select { width: 100%; }
  .v37-tabel-st td.angka, .v37-tabel-situs td.angka { text-align: left; }
  .v37-meta { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .v37-meta dd { margin-bottom: 6px; }
  .v37-ubin b { font-size: 22px; }
  .v37-cari { width: 100%; }
}
/* [/v3.37 WILAYAH penyaring] */

/* v3.40 M: Jadwal akses › Mode */
/* ---------- v3.40 M: Jadwal akses › Mode (kanvas "Mode akses: yang terbuka bertumpuk" papan 1 sampai 5) ---------- */
/* Semua warna lewat token; kelas berawalan v340-mode supaya tidak bentrok dengan wilayah v3.40 lain. */
.v340-mode-ringkas-sub { margin: 0 0 10px; }
.v340-mode-tabel-ringkas .v340-mode-sel-mode { white-space: nowrap; }
.v340-mode-tabel-ringkas .v340-mode-sel-mode b { font-weight: 600; }
.v340-mode-boleh { color: var(--aktif); font-weight: 600; }
.v340-mode-tidak { color: var(--teks-2); font-weight: 600; }

.v340-mode-tata { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.v340-mode-daftar, .v340-mode-pilih { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v340-mode-pilih > button { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--teks); background: var(--permukaan);
  border: 1px solid var(--garis); border-radius: 12px; padding: 10px 12px; cursor: pointer; min-height: 44px; }
.v340-mode-pilih > button:hover { background: var(--cekung); }
.v340-mode-pilih > button > span { display: flex; flex-direction: column; min-width: 0; }
.v340-mode-pilih > button b { font-weight: 600; }
.v340-mode-pilih > button.terpilih { border-color: var(--aksen); background: var(--aksen-lembut); }
.v340-mode-pilih > button.terpilih .kecil { color: var(--teks-2); }
.v340-mode-pilih .kw-chip { width: 10px; height: 10px; margin: 0; }
.v340-mode-tambah { align-self: flex-start; }

.v340-mode-form { display: flex; flex-direction: column; gap: 14px; }
.v340-mode-kalimat { margin: 0; padding: 12px 14px; background: var(--aksen-lembut); color: var(--teks); border-radius: 8px; }
.v340-mode-form > .pesan { margin: 0; }
.v340-mode-nama-warna { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.v340-mode-nama-warna label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--teks-2); }
.v340-mode-nama-warna input[type="color"] { width: 46px; height: 40px; padding: 2px; }
.v340-mode-bagian { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--garis); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v340-mode-bagian legend { padding: 0 6px; font-weight: 600; }
.v340-mode-bagian .centang { display: flex; align-items: flex-start; gap: 8px; }
.v340-mode-bagian > p, .v340-mode-catatan-lapis { margin: 0; }
.v340-mode-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v340-mode-dua .v340-mode-bagian { padding: 12px 16px 14px; gap: 8px; }
.v340-mode-c-ket { margin: 0; }

/* Segmen Terbuka/Dikunci (papan 1/2): pilihan terpilih berlatar aksen. */
.segmen.v340-mode-segmen { align-self: flex-start; padding: 0; gap: 0; background: var(--permukaan); border: 1px solid var(--garis-kuat); border-radius: 10px; overflow: hidden; flex-wrap: nowrap; }
.v340-mode-segmen button { border-radius: 0; padding: 9px 14px; color: var(--teks); gap: 8px; }
.v340-mode-segmen button + button { border-left: 1px solid var(--garis-kuat); }
.v340-mode-segmen button[aria-checked="true"] { background: var(--aksen); color: var(--aksen-teks); box-shadow: none; }
.v340-mode-bulat { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-grid; place-items: center; flex: none; }
.v340-mode-segmen button[aria-checked="true"] .v340-mode-bulat::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Lapis bertumpuk: kontrol | nama + keterangan | status | jumlah. */
.v340-mode-tumpukan { display: flex; flex-direction: column; border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; }
.v340-mode-tumpukan > * + * { border-top: 1px solid var(--garis); }
.v340-mode-lapis { display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px 150px; grid-template-areas: "k n s j"; gap: 12px; align-items: center; padding: 12px 14px; background: var(--permukaan); }
.v340-mode-lapis-tetap { background: var(--cekung); color: var(--teks-2); padding: 10px 14px; }
label.v340-mode-lapis { cursor: pointer; font-weight: 400; }
.v340-mode-l-kontrol { grid-area: k; display: flex; justify-content: center; }
.v340-mode-l-kontrol input { width: 18px; height: 18px; margin: 0; accent-color: var(--aksen); }
.v340-mode-l-nama { grid-area: n; display: flex; flex-direction: column; min-width: 0; }
.v340-mode-l-nama b, .v340-mode-nama-daftar { font-weight: 600; }
.v340-mode-nama-daftar { cursor: pointer; }
.v340-mode-plus { color: var(--aksen); margin-right: 6px; }
.v340-mode-l-status { grid-area: s; justify-self: start; }
.v340-mode-l-jumlah { grid-area: j; display: flex; align-items: center; justify-content: flex-end; gap: 8px; text-align: right; }
.v340-mode-angka { font-variant-numeric: tabular-nums; white-space: nowrap; }
.v340-mode-label-kolom { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); margin: 0; }
.v340-mode-lapis.v340-mode-terbuka { background: var(--aksen-lembut); }
.v340-mode-diabaikan .v340-mode-l-nama > b, .v340-mode-diabaikan .v340-mode-nama-daftar { text-decoration: line-through; color: var(--redup); }
.v340-mode-redup .v340-mode-l-nama, .v340-mode-redup .v340-mode-angka { color: var(--redup); }
.v340-mode-tumpukan > .v340-mode-lapis-total { border-top: 2px solid var(--garis-kuat); }
.v340-mode-lapis-total .v340-mode-l-status { justify-self: stretch; }
.v340-mode-sama { font-weight: 700; color: var(--teks-2); }
.v340-mode-batang { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--cekung); overflow: hidden; }
.v340-mode-batang > span { display: block; height: 100%; background: var(--aksen); }
.v340-mode-batang.v340-mode-lewat > span { background: var(--bahaya); }
.v340-mode-total-angka { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v340-mode-lapis-tambah { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px 10px 54px; background: var(--permukaan); }
.v340-mode-infra-isi { padding: 10px 14px 12px 54px; background: var(--cekung); display: flex; flex-direction: column; gap: 8px; }
.v340-mode-infra-isi p { margin: 0; }

/* Penyunting daftar di tempat (papan 5). */
.v340-mode-penyunting-tempat:empty { display: none; }
.v340-mode-penyunting { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px 54px; background: var(--permukaan); border-top: 1px solid var(--garis); }
.v340-mode-penyunting > p, .v340-mode-cari > p { margin: 0; }
.v340-mode-butir-isi { display: flex; flex-wrap: wrap; gap: 8px; }
.v340-mode-butir { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 10px; border: 1px solid var(--garis-kuat); border-radius: 8px; background: var(--permukaan); }
.v340-mode-butir .mono { font-size: 13px; overflow-wrap: anywhere; }
.v340-mode-infra-isi .v340-mode-butir { padding-right: 10px; }
.v340-mode-butir-baru { border-color: var(--aksen); background: var(--aksen-lembut); }
.v340-mode-hapus-butir { font: inherit; border: 0; background: none; color: var(--redup); cursor: pointer; min-width: 24px; min-height: 24px; border-radius: 6px; }
.v340-mode-hapus-butir:hover { background: var(--cekung); color: var(--teks); }
.pil-tingkat.v340-mode-tingkat { padding: 0; border: 0; background: none; gap: 0; }
.v340-mode-tingkat > span:not(.huruf-tingkat) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v340-mode-cari { display: flex; flex-direction: column; gap: 8px; }
.v340-mode-cari-baris { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v340-mode-cari-baris input[type="search"] { flex: 1 1 240px; min-width: 0; }
.menu-baris.v340-mode-saring > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px; border: 1px solid var(--garis-kuat); border-radius: 8px; background: var(--permukaan); font-weight: 400; }
.v340-mode-saring-label { font-size: 12px; font-weight: 600; color: var(--redup); }
.v340-mode-saring-nilai { font-weight: 600; }
.v340-mode-saring-panah { color: var(--redup); }
.v340-mode-saring .menu-isi button[aria-checked="true"] { font-weight: 600; color: var(--aksen); }
.v340-mode-sel-alamat > span { display: block; }
.v340-mode-tabel-hasil { width: 100%; }
.v340-mode-tabel-hasil .v340-mode-sel-alamat { min-width: 140px; max-width: 240px; }
.v340-mode-tabel-hasil .v340-mode-sel-periksa { min-width: 0; overflow-wrap: anywhere; }
.v340-mode-sel-alamat .mono { font-size: 13px; overflow-wrap: anywhere; }
.v340-mode-tabel-hasil tr.v340-mode-mubazir td { background: var(--lain-sorot); }
.v340-mode-tabel-hasil tr.v340-mode-mubazir .v340-mode-sel-periksa { color: var(--lain); }
.v340-mode-tabel-hasil tr.v340-mode-tidak-bisa .v340-mode-sel-alamat .mono { color: var(--teks-2); }
.v340-mode-periksa-bisa { color: var(--aktif); }
.v340-mode-tabel-hasil .sel-aksi { text-align: right; }
.v340-mode-tabel-hasil .sel-aksi .tombol { white-space: nowrap; }
.v340-mode-bilah-simpan { justify-content: space-between; align-items: center; border-top: 1px solid var(--garis); padding-top: 10px; }
.v340-mode-bilah-simpan[hidden] { display: none; }
.v340-mode-bilah-tombol { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.v340-mode-kaki { align-items: center; }
.v340-mode-dipakai { margin-right: auto; }
.v340-mode-dialog-paket .sel-cek-paket { width: 36px; }

/* Label global dasbor berbentuk kolom tebal 13px; di formulir mode label baris kembali ke teks biasa. */
label.v340-mode-lapis { font-size: inherit; font-weight: 400; color: inherit; display: grid; }
label.v340-mode-nama-daftar { display: inline-flex; flex-direction: row; align-items: baseline; gap: 0; font-size: inherit; font-weight: 600; }
.v340-mode-bagian label.centang { flex-direction: row; align-items: flex-start; gap: 8px; font-size: inherit; font-weight: 400; color: var(--teks); cursor: pointer; }
.v340-mode-bagian label.centang input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--aksen); }
.v340-mode-nama-warna input[type="text"] { font-size: 15px; font-weight: 400; }

@media (max-width: 640px) {
  .v340-mode-tata { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .v340-mode-daftar { flex-direction: row; align-items: center; overflow-x: auto; padding-bottom: 4px; }
  .v340-mode-pilih { flex-direction: row; flex: none; }
  .v340-mode-pilih > button { border-radius: 999px; padding: 8px 14px; white-space: nowrap; }
  .v340-mode-pilih > button .kecil { display: none; }
  .v340-mode-tambah { flex: none; align-self: center; }
  .segmen.v340-mode-segmen { align-self: stretch; flex-direction: column; }
  .v340-mode-segmen button { min-height: 44px; }
  .v340-mode-segmen button + button { border-left: 0; border-top: 1px solid var(--garis-kuat); }
  .v340-mode-bagian { padding: 12px; }
  .v340-mode-lapis { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "k n j" "k s j"; row-gap: 2px; column-gap: 10px; padding: 12px; }
  .v340-mode-lapis:not(.v340-mode-terbuka):not(.v340-mode-lapis-total) .v340-mode-l-nama .kecil { display: none; }
  .v340-mode-l-status .v340-mode-label-kolom { font-size: 11px; }
  .v340-mode-l-jumlah { flex-direction: column; align-items: flex-end; gap: 4px; }
  .v340-mode-lapis-tambah, .v340-mode-infra-isi { padding-left: 12px; }
  .v340-mode-penyunting { padding: 12px; }
  .v340-mode-dua { grid-template-columns: minmax(0, 1fr); }
  .v340-mode-kaki .tombol:not(.halus) { flex: 1 1 100%; min-height: 44px; }
  .v340-mode-tabel-hasil .sel-aksi { text-align: left; }
  .v340-mode-tabel-hasil .v340-mode-sel-periksa { min-width: 0; }
  .v340-mode-tabel-hasil .v340-mode-sel-alamat { max-width: none; }
}

/* v3.40 R: Situs ruang satu panel dan ringkasan sesi */
/* [v3.40 R] Situs ruang satu panel + ringkasan Situs sesi ini (KONTRAK-v3.40 bagian 5; kanvas Situs ruang papan 1 sampai 4). */
.v340-situs-ruang { display: flex; flex-direction: column; gap: 16px; }
.v340-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.v340-kepala h2 { margin: 0; font-size: 18px; }
.v340-pil-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v340-mode-wadah { display: flex; flex-direction: column; gap: 8px; }
.v340-mode-wadah:empty { display: none; }
.v340-mode { margin: 0; font-size: 14px; color: var(--teks-2); }

/* Kotak Tambah situs (papan 1 dan 2) */
.v340-tambah { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--cekung); border-radius: 10px; }
.v340-tambah-label { font-size: 13px; font-weight: 600; color: var(--teks-2); }
.v340-tambah-baris { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.v340-tambah textarea.v340-tambah-isian { flex: 1 1 360px; width: auto; min-width: 0; min-height: 44px; padding: 9px 12px; font-size: 13px; line-height: 1.5;
  background: var(--permukaan); border: 1px solid var(--garis-kuat); border-radius: 8px; resize: vertical; }
.v340-pintas { display: flex; flex-wrap: wrap; gap: 8px; }
.v340-tambah-hasil { display: flex; flex-direction: column; gap: 10px; transition: opacity .15s; }
.v340-tambah-hasil:empty { display: none; }
.v340-tambah-hasil[aria-busy="true"] { opacity: .55; }
.v340-memeriksa { margin: 0; }
.v340-tabel-keadaan { display: flex; flex-direction: column; border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; background: var(--permukaan); }
.v340-tk-kepala, .v340-tk-baris { display: grid; grid-template-columns: minmax(0, 1.2fr) 170px minmax(0, 1.6fr); gap: 12px; align-items: center; padding: 10px 14px; }
.v340-tk-kepala { padding: 8px 14px; background: var(--cekung); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); }
.v340-tk-baris { border-top: 1px solid var(--garis); }
.v340-tk-alamat { font-size: 13px; overflow-wrap: anywhere; min-width: 0; }
.v340-tk-ket { color: var(--teks-2); }
.v340-tk-baris .pil { white-space: normal; }
.v340-tambah-aksi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.v340-tambah-aksi .baris-tombol { margin: 0; }
.v340-tambah-aksi .v36-pesan-hasil { margin: 0; flex: 1 1 260px; }
.v340-tambah-ringkas { font-size: 14px; color: var(--teks-2); }
.v340-alasan-label { display: flex; flex-direction: column; gap: 4px; max-width: 520px; margin: 0; font-weight: 600; color: var(--teks-2); }
.v340-tambah input.v340-alasan { width: 100%; background: var(--permukaan); font-weight: 400; }
.v340-tambah-catatan { margin: 0; }

/* Daftar berkelompok (papan 1) */
.v340-kelompok { display: flex; flex-direction: column; gap: 16px; }
.v340-grup { display: flex; flex-direction: column; gap: 6px; }
.v340-grup-judul { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.v340-titik { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.v340-titik-aktif { color: var(--aktif); }
.v340-titik-lain { color: var(--lain); }
.v340-titik-mati { color: var(--mati); }
.v340-titik-bahaya { color: var(--bahaya); }
.v340-daftar { list-style: none; margin: 0; padding: 0; border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; background: var(--permukaan); }
.v340-grup-menunggu .v340-daftar { border-color: var(--lain-garis); background: var(--lain-sorot); }
.v340-grup-belum .v340-daftar { border-color: var(--bahaya-garis); }
.v340-baris { display: grid; grid-template-columns: minmax(0, 1.3fr) 170px minmax(0, 1.4fr) 90px; gap: 12px; align-items: center; padding: 10px 14px; }
.v340-baris + .v340-baris { border-top: 1px solid var(--garis); }
.v340-grup-menunggu .v340-baris + .v340-baris { border-top-color: var(--lain-garis); }
.v340-grup-belum .v340-baris + .v340-baris { border-top-color: var(--bahaya-garis); }
.v340-alamat { font-size: 13px; overflow-wrap: anywhere; min-width: 0; }
.v340-pil-baris { justify-self: start; white-space: normal; }
.v340-ket { color: var(--redup); min-width: 0; overflow-wrap: anywhere; }
.v340-grup-menunggu .v340-ket, .v340-grup-belum .v340-ket { color: var(--teks-2); }
.v340-aksi-baris { justify-self: end; }
.v340-ikut { margin-top: 4px; }
.v340-ikut > summary { cursor: pointer; color: var(--teks-2); }
.v340-ikut .bungkus-tabel { margin-top: 8px; }
.v340-daftar-kosong { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px dashed var(--garis-kuat); border-radius: 10px; }

/* Bagian sekunder, dilipat di bawah panel utama */
.v340-sekunder { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.v340-sekunder-judul { margin: 0; font-size: 13px; font-weight: 600; color: var(--redup); }
.v340-sekunder .v340-lipat { border: 1px solid var(--garis); border-radius: 10px; padding: 10px 14px; background: var(--permukaan); box-shadow: none; margin: 0; }
.v340-lipat > summary { cursor: pointer; }
.v340-lipat[open] > summary { margin-bottom: 10px; }
.v340-lipat .panel { border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; border-radius: 0; }
.v340-lipat > .panel > h2, .v340-lipat > .panel > .panel-kepala > h2 { display: none; }
.v340-lipat > .panel > .panel-kepala { margin-bottom: 8px; justify-content: flex-end; }
.v340-ajukan-lingkup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--garis); }
.v340-ajukan-lingkup p { margin: 0; flex: 1 1 280px; }

/* Layar sesi guru: Situs sesi ini (papan 3) */
.v340-sesi-situs { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; margin: 12px 0; }
.v340-sesi-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.v340-sesi-judul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.v340-sesi-judul h2 { margin: 0; font-size: 16px; }
.v340-sesi-kepala .baris-tombol { margin: 0; }
.v340-sesi-tunggu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v340-sesi-tunggu li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; background: var(--lain-sorot); border: 1px solid var(--lain-garis); border-radius: 8px; font-size: 14px; }
.v340-sesi-tunggu .mono { font-size: 13px; overflow-wrap: anywhere; }
.v340-sesi-tunggu .kecil { color: var(--teks-2); }
.v340-buka-darurat { margin-left: auto; }
dialog.v340-dialog-tambah { max-width: 900px; }
dialog.v340-dialog-tambah .panel-kepala h2 { margin: 0; }

/* HP 390 (papan 4) */
@media (max-width: 640px) {
  .v340-kepala h2 { font-size: 17px; }
  .v340-tambah { padding: 12px; }
  .v340-tambah textarea.v340-tambah-isian { flex-basis: 100%; }
  .v340-pintas { width: 100%; }
  .v340-pintas .tombol { flex: 1 1 0; min-height: 44px; padding-left: 6px; padding-right: 6px; font-size: 14px; white-space: nowrap; }
  .v340-tk-kepala { display: none; }
  .v340-tk-baris { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .v340-tk-ket { grid-column: 1 / -1; }
  .v340-tk-baris:first-of-type { border-top: 0; }
  .v340-tambah-aksi .baris-tombol { width: 100%; }
  .v340-tambah-aksi .baris-tombol .tombol { flex: 1 1 0; min-height: 44px; }
  .v340-alasan-label { max-width: none; }
  .v340-baris { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "alamat pil" "ket ket" "aksi aksi"; gap: 4px 10px; padding: 10px 12px; }
  .v340-alamat { grid-area: alamat; }
  .v340-pil-baris { grid-area: pil; justify-self: end; }
  .v340-ket { grid-area: ket; }
  .v340-aksi-baris, .v340-aksi-kosong { grid-area: aksi; justify-self: end; }
  .v340-aksi-kosong { display: none; }
  .v340-grup:not(.v340-terbuka) .v340-lebih { display: none; }
  .v340-lainnya { align-self: flex-start; }
  .v340-sesi-situs { padding: 14px 16px; }
  .v340-sesi-kepala .baris-tombol { width: 100%; }
  .v340-sesi-kepala .baris-tombol .tombol { flex: 1 1 0; }
  .v340-buka-darurat { margin-left: 0; }
}

/* v3.40 P: Paket situs terpadu */
/* v3.40 P: Paket situs terpadu (kanvas "Situs ruang" papan 5). Semua warna lewat token. */
.v340-paket-tab { display: inline-flex; gap: 4px; padding: 4px; background: var(--cekung); border-radius: 10px; margin-bottom: 16px; max-width: 100%; overflow-x: auto; }
.v340-paket-tab [role="tab"] { font-size: 14px; padding: 6px 14px; border-radius: 8px; color: var(--teks-2); text-decoration: none; white-space: nowrap; }
.v340-paket-tab [role="tab"]:hover { color: var(--teks); }
.v340-paket-tab [role="tab"][aria-selected="true"] { background: var(--permukaan); color: var(--teks); font-weight: 600; box-shadow: var(--bayang); }
.v340-paket-tata { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.v340-paket-tata.ada-form { grid-template-columns: minmax(0, 1fr) 440px; }
.v340-paket-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v340-paket-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.v340-paket-kartu { gap: 8px; min-width: 0; }
.v340-paket-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.v340-paket-kepala h2 { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.v340-paket-ket { margin: 0; font-size: 13px; color: var(--redup); }
.v340-paket-kaki { margin: 0; font-size: 13px; color: var(--teks-2); }
.v340-tunggu-penyaring { color: var(--info); }
.v340-paket-jelas { margin: 0; }
.v340-paket-aksi { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: auto; }
.v340-paket-kepala-halaman { flex-wrap: nowrap; }
.v340-paket-kepala-halaman > div { flex: 1 1 0; min-width: 0; }
.v340-paket-kepala-halaman > .tombol { flex: none; }
/* Deret isi: alamat mono + huruf tingkat. */
.v340-paket-deret { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.v340-paket-entri { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 8px; border: 1px solid var(--garis); border-radius: 6px; font-size: 12px; color: var(--teks); background: var(--permukaan); }
.v340-paket-entri .mono { font-size: 12px; overflow-wrap: anywhere; }
.v340-paket-entri.tunggu { border-color: var(--info); }
.v340-paket-entri.tak-bisa { border-style: dashed; color: var(--redup); }
button.v340-paket-entri.lagi { font: inherit; font-size: 12px; cursor: pointer; min-height: 24px; }
span.v340-paket-entri.lagi { color: var(--redup); }
.v340-tingkat-ringkas { display: inline-flex; }
.v340-tingkat-ringkas .pil-tingkat { padding: 0; gap: 0; border: 0; background: none; line-height: 1; }
.v340-tingkat-ringkas .pil-tingkat > span:not(.huruf-tingkat) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v340-tingkat-ringkas .pil-tingkat.kosong .huruf-tingkat { border: 1px dashed var(--garis-kuat); }
/* Formulir paket di samping daftar. */
.v340-paket-form { display: flex; flex-direction: column; gap: 12px; border-color: var(--aksen); padding: 18px; }
.v340-paket-form h2 { font-size: 16px; font-weight: 600; }
.v340-isian { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v340-isian > span:first-child, .v340-isian-kepala label { font-size: 13px; font-weight: 600; color: var(--teks-2); }
.v340-isian input[type="text"], .v340-isian input[type="search"] { width: 100%; font: inherit; font-weight: 400; color: var(--teks); background: var(--permukaan); padding: 8px 10px; border: 1px solid var(--garis-kuat); border-radius: 8px; }
.v340-isian-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.v340-isian-kaki { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.v340-paket-isi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.v340-paket-isi li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v340-paket-isi li .v340-paket-entri { flex: 0 1 auto; min-width: 0; }
.v340-paket-isi li .tombol-ikon { margin-left: auto; min-width: 28px; min-height: 28px; }
.v340-paket-hasil { display: flex; flex-direction: column; border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; font-size: 13px; }
.v340-paket-baris { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; margin: 0; }
.v340-paket-baris + .v340-paket-baris { border-top: 1px solid var(--garis); }
.v340-paket-baris.redup { color: var(--redup); }
.v340-paket-baris-nama { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.v340-paket-baris-nama .mono { overflow-wrap: anywhere; }
.v340-baris-sakelar { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.v340-baris-sakelar label { cursor: pointer; font-weight: 400; }
/* Panel paket di tab Situs ruang dan dialog pilih paket. */
.v340-paket-ruang { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v340-paket-ruang li { display: flex; flex-direction: column; gap: 6px; }
.v340-paket-ruang-kepala { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.v340-pilih-paket { align-items: flex-start; flex-wrap: nowrap; }
.v340-pilih-paket-isi { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 0; }
/* Admin Akses internet › Paket situs: tautan ke halaman paket guru. */
.v340-tautan-paket-guru { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 14px; color: var(--teks-2); }
@media (max-width: 900px) {
  .v340-paket-tata.ada-form { grid-template-columns: minmax(0, 1fr); }
  .v340-paket-form-wadah { order: -1; }
}
@media (max-width: 640px) {
  .v340-paket-kepala-halaman { flex-wrap: wrap; }
  .v340-paket-kepala-halaman > div { flex-basis: 100%; }
  .v340-paket-tab { display: flex; }
  .v340-paket-tab [role="tab"] { flex: 1 1 auto; text-align: center; padding: 8px 10px; min-height: 40px; }
  .v340-paket-form .baris-tombol .tombol { min-height: 44px; }
}

/* v3.40.1 U: migrasi OU pribadi, baki pekerjaan server, gerbang, akun staf */
/* ---------- v3.40.1 U: migrasi CB ke OU pribadi, baki pekerjaan server, gerbang, akun staf (kanvas papan 1 sampai 6) ---------- */
/* Tugas armada di Pantau › Kondisi Chromebook */
.v3401-tugas { display: flex; flex-direction: column; gap: 14px; }
.v3401-tugas-kepala { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.v3401-tugas-judul { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v3401-tugas-judul h2 { margin: 0; font-size: 20px; }
.v3401-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); }
.v3401-tugas-ket { margin: 0; color: var(--teks-2); }
.v3401-bar { height: 8px; background: var(--cekung); border-radius: 999px; overflow: hidden; }
.v3401-bar-isi { height: 8px; background: var(--aksen); border-radius: 999px; min-width: 0; transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .v3401-bar-isi { transition: none; } }
.v3401-ubin-kisi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.v3401-ubin { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--latar); border-radius: 10px; color: var(--teks); text-decoration: none; min-width: 0; }
.v3401-ubin b { font-size: 24px; line-height: 1.2; }
.v3401-ubin > span { font-size: 13px; color: var(--teks-2); overflow-wrap: anywhere; }
a.v3401-ubin-tunggu { background: var(--lain-bg); }
a.v3401-ubin-tunggu > span { color: var(--lain); }
a.v3401-ubin-tunggu:hover { background: var(--lain-sorot); outline: 1px solid var(--lain-garis); }
.v3401-hasil:empty { display: none; }
.v3401-catatan-segmen { margin: -6px 0 0; }

/* Baki pekerjaan server (papan 3) */
.v3401-baki { display: flex; flex-direction: column; gap: 12px; }
.v3401-baki:empty { display: none; }
.v3401-pekerjaan { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; min-width: 0; }
.v3401-pekerjaan.v3401-rem { border-color: var(--bahaya-garis); }
.v3401-pekerjaan-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.v3401-pekerjaan-kepala .baris-tombol { margin: 0; }
.v3401-pekerjaan-judul { font-size: 17px; overflow-wrap: anywhere; }
.v3401-pekerjaan-meta, .v3401-pekerjaan-pesan { margin: 0; color: var(--teks-2); }
.v3401-pekerjaan .baris-tombol { margin: 0; flex-wrap: wrap; }
.v3401-butir { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.v3401-butir li { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.v3401-butir li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.v3401-rinci summary { cursor: pointer; color: var(--aksen); }
.v3401-rinci .mono { display: block; margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; color: var(--teks-2); }

/* Dialog Mulai migrasi (papan 2) dan dialog pekerjaan */
.v3401-dialog form { display: flex; flex-direction: column; gap: 14px; }
.v3401-dialog-mulai { width: min(720px, calc(100vw - 32px)); }
.v3401-kesiapan { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--cekung); }
.v3401-kesiapan.lolos { background: var(--aktif-bg); }
.v3401-kesiapan.lolos > b { color: var(--aktif); }
.v3401-kesiapan.gagal { background: var(--bahaya-bg); }
.v3401-kesiapan.gagal > b { color: var(--bahaya); }
.v3401-pilihan { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--garis); border-radius: 10px; padding: 12px 14px; margin: 0; }
.v3401-pilihan legend { font-weight: 600; padding: 0 4px; }
.v3401-radio, .dialog-alasan label.v3401-radio { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; }
.v3401-radio > input { margin-top: 4px; flex: none; }
.v3401-radio-isi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.v3401-radio-isi select { max-width: 100%; }
.v3401-jadwal { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.v3401-jadwal .isian-jam { width: 6.5em; }
.v3401-tidak-ikut { margin: 0; color: var(--teks-2); }
.v3401-tidak-ikut:empty { display: none; }
.v3401-staf { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--aksen-lembut); }
.v3401-staf .mono { overflow-wrap: anywhere; }
.v3401-staf.v3401-staf-kosong { background: var(--lain-bg); border: 1px solid var(--lain-garis); }
.v3401-staf.v3401-staf-kosong > b { color: var(--lain); }
.v3401-paham, .dialog-alasan label.v3401-paham { display: inline-flex; flex-direction: row; gap: 8px; align-items: center; font-weight: 600; }
.v3401-alasan, .dialog-alasan label.v3401-alasan { display: flex; flex-direction: column; gap: 4px; }
.v3401-alasan > span:first-child { font-weight: 600; }
.v3401-alasan input { width: 100%; }

/* Kepemilikan › Kesiapan: jenis perbedaan (papan 4) */
.v3401-banding { display: flex; flex-direction: column; gap: 12px; }
.v3401-banding > p { margin: 0; }
.v3401-ringkas-baris { display: flex; flex-wrap: wrap; gap: 8px; }
.v3401-pil-ringkas { display: inline-flex; gap: 4px; align-items: baseline; padding: 4px 12px; border-radius: 999px; background: var(--cekung); color: var(--teks); font-size: 13px; }
.v3401-pil-ringkas.awas { background: var(--lain-bg); color: var(--lain); }
.v3401-putuskan { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--lain-garis); border-radius: 10px; background: var(--permukaan); }
.v3401-putuskan > b { color: var(--lain); }
.v3401-putuskan p { margin: 0; }
.v3401-putuskan .baris-tombol { margin: 0; flex-wrap: wrap; }
.v3401-kebijakan { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3401-kebijakan .mono { overflow-wrap: anywhere; }
.v3401-tabel-banding tr.v3401-tolak td { background: var(--lain-sorot); }
.v3401-nilai { overflow-wrap: anywhere; }
.v3401-banding-pribadi { display: flex; flex-direction: column; gap: 8px; }
.v3401-banding-pribadi h3 { margin: 4px 0 0; font-size: 16px; }
.v3401-ringkas-staf { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }

/* Setup umum › Chromebook santri (papan 5) */
.v3401-staf-kartu, .v3401-bukan-keamanan { display: flex; flex-direction: column; gap: 14px; }
.v3401-staf-kartu .panel-kepala { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.v3401-staf-kartu .panel-kepala p { margin: 4px 0 0; }
.v3401-staf-bagian { display: flex; flex-direction: column; gap: 6px; }
.v3401-chip-baca { display: flex; flex-wrap: wrap; gap: 6px; }
.v3401-chip { background: var(--cekung); color: var(--teks); padding: 3px 10px; }
.v3401-chip .chip-hapus { margin-left: 2px; }
.v3401-galat-akun:empty { display: none; }
.v3401-staf-kaki { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.v3401-staf-kaki .baris-tombol { margin: 0; }
.v3401-daftar-bk { flex-wrap: wrap; }
.v3401-daftar-bk input { min-width: 12em; }
/* Integrasi: email dan nama skema panjang (tanpa spasi) dipatahkan di dalam chip dan rincian kesiapan, bukan melebarkan halaman HP. */
.v3401-staf-kartu .chip, .v3401-bukan-keamanan .chip, .v3401-staf-kartu .chip .mono, .v3401-bukan-keamanan .chip .mono { min-width: 0; overflow-wrap: anywhere; }
.v3401-kesiapan-tumpuk .daftar-kesiapan-kepem li > div { min-width: 0; overflow-wrap: anywhere; }
/* Isian akun di kolom (flex-direction: column): flex-basis 260px bawaan .isian-akun menjadi tinggi kosong; di sini setinggi isinya. */
.v3401-staf-bagian .isian-akun { flex: none; }

/* HP 390 (papan 6) */
@media (max-width: 640px) {
  .v3401-ubin-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v3401-ubin-kisi .v3401-ubin-tunggu { grid-column: 1 / -1; }
  .v3401-tugas-kepala { display: contents; }
  .v3401-tugas .v3401-tombol-mulai { order: 9; width: 100%; min-height: 44px; }
  .v3401-tugas .v3401-hasil { order: 10; }
  .v3401-tugas-judul h2 { font-size: 18px; }
  .v3401-pekerjaan { padding: 14px 16px; }
  .v3401-pekerjaan-judul { font-size: 16px; }
  .v3401-pekerjaan-kepala .baris-tombol { width: 100%; }
  .v3401-pekerjaan .baris-tombol .tombol { flex: 1 1 auto; min-height: 44px; }
  .v3401-dialog-mulai { width: calc(100vw - 16px); }
  .v3401-radio-isi select { width: 100%; }
}

/* v3.41 (KONTRAK-v3.41-PERMINTAAN 6.1): permintaan akses dua tingkat di dasbor (kanvas papan Guru dan Pdc). */
.daftar-v2-pa li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; }
.ai-v2-pa { border-color: var(--aksen); }
.ai-v2-pa ul { margin: 4px 0 8px; padding-left: 18px; }
.dua-v2-pa { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; }
.tegak-v2-pa li { grid-template-columns: minmax(0, 1fr); }
.jadwal-putus-v2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 8px; align-items: center; font-size: 14px; padding: 6px 0; border-top: 1px solid var(--garis); }
.jadwal-putus-v2 > b { grid-column: 1 / 3; }
.jadwal-putus-v2 > .centang-pa { grid-column: 3; justify-self: end; }
.jadwal-putus-v2 input[type=time] { width: 100%; min-width: 0; }
@media (max-width: 640px) {
  .daftar-v2-pa li { grid-template-columns: minmax(0, 1fr) auto; }
  .daftar-v2-pa li .tindakan-teks { grid-column: 1 / -1; }
}
/*
 * v3.42 (uji produksi 16 Okt: cetakan kartu PDC bertumpuk): kartu permintaan v2 dicetak satu kolom yang mengalir ke bawah.
 * Kisi dua kolom dan break-inside: avoid pada kartu yang lebih panjang dari satu halaman membuat isi terpotong atau
 * menimpa halaman berikutnya. Kepala (nama santri, tahap, status) ikut tercetak; isian keputusan dan tombol tidak.
 */
@media print {
  .jejak:has(+ .kepala-halaman.cetak-v2-pa), .hasil-pa { display: none !important; }
  .kepala-halaman.cetak-v2-pa { display: block !important; margin: 0 0 8px; }
  .kepala-halaman.cetak-v2-pa h1 { font-size: 18px; }
  .kepala-halaman.cetak-v2-pa .baris-pil { margin-top: 4px; }
  .kartu-pa { display: block; break-inside: auto; border-left-width: 1px; }
  .kartu-pa .kartu-pa-isi, .kartu-pa .kartu-pa-isi.dua, .kartu-pa .kartu-pa-utama { display: block; }
  .kartu-pa .kartu-pa-utama > * + *, .kartu-pa .kartu-pa-isi > * + * { margin-top: 10px; }
  .kartu-pa .bagian-pa, .kartu-pa .rinci-pa > dd, .kartu-pa .daftar-periksa-pa li { break-inside: avoid; }
  .kartu-pa h4 { break-after: avoid; }
  .kartu-pa .putus-pa { display: block; background: transparent; padding: 0; border-radius: 0; }
  .kartu-pa .putus-pa:not(.tunggu) > :not(.ai-v2-pa) { display: none !important; }
  .kartu-pa input, .kartu-pa textarea, .kartu-pa select, .kartu-pa fieldset { display: none !important; }
  .kartu-pa .pil, .kartu-pa .langkah-ikon { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Riwayat ikut tercetak walau tertutup (peramban yang mengenal ::details-content). */
@media print { .kartu-pa details.bagian-pa::details-content { content-visibility: visible; display: block; } }

/* v3.41.1 (KEPUTUSAN-v3.41.1, kanvas "migrasi CB empat langkah"): panel empat langkah, dialog Mulai/Setelan, halaman hasil. */
.v3411-migrasi { display: flex; flex-direction: column; gap: 14px; }
.v3411-angka-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.v3411-angka { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--latar); border-radius: 12px; min-width: 0; }
.v3411-angka-baris { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v3411-angka-judul { font-weight: 600; }
.v3411-angka-nilai { font-variant-numeric: tabular-nums; }
.v3411-angka-nilai b { font-size: 20px; }
.v3411-bar-aktif .v3401-bar-isi { background: var(--aktif); }
.v3411-bar-redup .v3401-bar-isi { background: var(--garis-kuat); }
.v3411-ket { margin: 0; color: var(--teks-2); }
.v3411-langkah-daftar { display: flex; flex-direction: column; gap: 12px; }
.v3411-langkah { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); min-width: 0; }
.v3411-langkah-kepala { display: flex; align-items: flex-start; gap: 12px; }
.v3411-no { flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--cekung); color: var(--teks); display: flex; align-items: center; justify-content: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.v3411-langkah-judul { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v3411-langkah-judul > b { font-size: 17px; }
.v3411-langkah-ket { color: var(--teks-2); }
.v3411-pil { flex: none; align-self: flex-start; white-space: nowrap; }
.v3411-langkah-isi { display: flex; flex-direction: column; gap: 8px; padding-left: 40px; min-width: 0; }
.v3411-hitungan { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v3411-langkah-aksi { flex-wrap: wrap; }
.v3411-kotak { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--cekung); color: var(--teks); }
.v3411-kotak.lain { background: var(--lain-bg); }
.v3411-kotak.aktif { background: var(--aktif-bg); }
.v3411-kotak.aktif > b { color: var(--aktif); }
.v3411-kotak.bahaya { background: var(--bahaya-bg); }
.v3411-kotak.bahaya > b { color: var(--bahaya); }
.v3411-kotak.mati { background: var(--cekung); }
.v3411-langkah-isi > .v3411-kotak.lain { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.v3411-dialog { max-width: 620px; }
.v3411-radio-isi { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.v3411-radio-isi input[type="search"] { width: 100%; }
.v3411-sub { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.v3411-hasil-cari { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.v3411-hasil-cari:empty { display: none; }
.v3411-hasil-butir { font: inherit; text-align: left; width: 100%; min-height: 32px; padding: 6px 8px; border: 1px solid var(--garis); border-radius: 8px; background: var(--permukaan); color: var(--teks); cursor: pointer; overflow-wrap: anywhere; }
.v3411-hasil-butir:hover { background: var(--aksen-lembut); }
.v3411-pil-ou { display: flex; flex-wrap: wrap; gap: 6px; }
.v3411-pil-ou:empty { display: none; }
.v3411-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; background: var(--aksen-lembut); color: var(--teks); border-radius: 999px; font-size: 13px; max-width: 100%; overflow-wrap: anywhere; }
.v3411-chip-x { font: inherit; width: 24px; height: 24px; border: 0; border-radius: 999px; background: transparent; color: var(--teks); cursor: pointer; flex: none; }
.v3411-chip-x:hover { background: var(--permukaan); }
.v3411-centang { display: flex; gap: 10px; align-items: flex-start; }
.v3411-centang input { margin-top: 4px; }
.v3411-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v3411-isian { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.v3411-sebaris { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v3411-angka-isi { width: 72px; }
.v3411-hasil { display: flex; flex-direction: column; gap: 14px; }
.v3411-kelompok { display: flex; flex-direction: column; gap: 10px; }
.v3411-kelompok-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.v3411-kelompok-judul { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v3411-kelompok-judul > b { font-size: 17px; }
.v3411-tabel-kecil { width: 100%; font-size: 14px; }
.v3411-tabel-kecil td { overflow-wrap: anywhere; vertical-align: top; }
.v3411-syarat { display: flex; flex-direction: column; gap: 10px; }
.v3411-syarat-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v3411-syarat-kepala h2 { margin: 0; }
.v3411-syarat-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3411-syarat-butir { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--garis); }
.v3411-syarat-butir.gagal { background: var(--bahaya-bg); padding: 12px; border-radius: 8px; border-top: 0; }
.v3411-syarat-baris { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.v3411-satu-cb summary { cursor: pointer; }
.v3411-satu-cb-daftar { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.v3411-satu-cb-daftar .tombol { justify-content: flex-start; text-align: left; }
@media (max-width: 640px) {
  .v3411-angka-kisi, .v3411-dua { grid-template-columns: minmax(0, 1fr); }
  .v3411-langkah { padding: 12px; }
  .v3411-langkah-kepala { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 12px; }
  .v3411-langkah-kepala > .v3411-pil { grid-column: 2; justify-self: start; }
  .v3411-langkah-isi { padding-left: 0; }
  .v3411-langkah-aksi .tombol { flex: 1 1 auto; min-height: 44px; }
  .v3411-kelompok-kepala, .v3411-syarat-kepala, .v3411-syarat-baris { flex-direction: column; }
}

/* ---------- v3.42 T5 kartu permintaan v3 (kanvas papan Guru, Pdc, UsulWali). Hanya token. ---------- */
.kepala-t5 { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.kepala-t5 .baris-pil { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kepala-cetak-t5 { display: none; }
.ringkas-pdc-t5 { margin: 0 0 14px; }
.panel-t5 { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; min-width: 0; }
.panel-t5 > .panel-kepala { margin-bottom: 0; }
.panel-t5 h2, .panel-t5 h3 { margin: 0; }
.tata-t5 { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.antrean-t5 { padding: 12px; }
.antrean-t5 h2 { font-size: 16px; margin: 4px 8px 8px; }
.antrean-t5 ul { list-style: none; margin: 0; padding: 0; }
.antrean-t5 li + li { border-top: 1px solid var(--garis); }
.antrean-t5 li a { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 10px; color: var(--teks); text-decoration: none; }
.antrean-t5 li.pilih a { background: var(--aksen-lembut); }
.ringkas-t5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ringkas-t5 > div { background: var(--cekung); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ringkas-t5 .pil { align-self: flex-start; }
.ai-t5 { display: flex; flex-direction: column; gap: 6px; }
.lencana-ai-t5 { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--aksen-tua); background: var(--aksen-lembut); border-radius: 999px; padding: 3px 10px; }
.panel-t5 .mini, .usul-kartu-t5 .mini, .antrean-t5 .mini, .tabel-t5 .mini { font-size: 12px; }
.tabel-t5 { overflow-x: auto; border: 1px solid var(--garis); border-radius: 12px; }
.tabel-t5 table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel-t5 th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); padding: 10px 12px; border-bottom: 1px solid var(--garis); }
.tabel-t5 td { padding: 12px; border-bottom: 1px solid var(--garis); vertical-align: top; overflow-wrap: anywhere; }
.tabel-t5 tr:last-child td { border-bottom: 0; }
.tabel-t5 .kol-cek { width: 28px; }
.tabel-t5 .kol-putus { width: 250px; }
.tabel-t5 table { table-layout: fixed; }
.tabel-t5 .kol-situs { width: 120px; } .tabel-t5 .kol-waktu { width: 100px; } .tabel-t5 .kol-putus.kol-guru { width: 200px; }
.tabel-t5 .kol-waktu2 { width: 170px; } .tabel-t5 .kol-pil { width: 170px; } .tabel-t5 .kol-pil2 { width: 120px; }
.tabel-t5 td select { width: 100%; }
.tabel-t5 tr.terkunci-t5 td { background: var(--cekung); color: var(--teks-2); }
.situs-t5 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.tanya-t5 { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.isian-mini-t5 { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12px; font-weight: 600; }
.isian-mini-t5 textarea, .isian-mini-t5 input { font-weight: 400; width: 100%; box-sizing: border-box; }
.isian-mini-t5[hidden] { display: none; }
.kondisi-t5 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kondisi-t5 li { display: grid; grid-template-columns: 24px 160px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--garis); }
.kondisi-t5 li:first-child { border-top: 0; padding-top: 0; }
.ikon-t5 { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; }
.ikon-t5.ok { background: var(--aktif-bg); color: var(--aktif); }
.ikon-t5.awas { background: var(--lain-bg); color: var(--lain); }
.pernyataan-t5, .panel-t5 label.pernyataan-t5 { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--lain-garis); border-radius: 10px; background: var(--lain-bg); font-size: 13px; cursor: pointer; }
.pernyataan-t5 input { width: 20px; height: 20px; margin: 0; flex: none; }
.profil-t5 { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.profil-kotak-t5 { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 12px; background: var(--cekung); }
.profil-kotak-t5 b { font-size: 20px; }
.profil-isi-t5 { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.profil-isi-t5 p, .profil-isi-t5 ul { margin: 0; }
.profil-isi-t5 ul { padding-left: 18px; }
.riwayat-t5 { margin-top: 0; }
.usul-t5 { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.usul-kartu-t5 { display: flex; flex-direction: column; gap: 12px; border-left: 4px solid var(--bahaya); }
.usul-kartu-t5 .panel-kepala { margin-bottom: 0; }
.usul-kartu-t5 h2 { margin: 0; font-size: 16px; }
.usul-kartu-t5 p { margin: 0; }
.kutip-t5 { padding: 10px 12px; border-radius: 10px; background: var(--cekung); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.persempit-t5 { display: flex; flex-direction: column; gap: 8px; }
/* ---------- v3.42 INT: data pekan ini di kartu usul walisantri (papan UsulWali) ---------- */
.usul-kartu-t5 .judul-data-int { margin: 0; font-size: 14px; font-weight: 700; }
.data-int { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.data-int > div { background: var(--cekung); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.data-int b { font-size: 16px; font-variant-numeric: tabular-nums; }
/* ---------- akhir v3.42 INT ---------- */
.persempit-t5[hidden] { display: none; }
.baris-persempit-t5 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 1024px) { .tata-t5 { grid-template-columns: minmax(0, 1fr); } .antrean-t5 { display: none; } }
@media (max-width: 640px) {
  .ringkas-t5, .profil-t5 { grid-template-columns: minmax(0, 1fr); }
  .kondisi-t5 li { grid-template-columns: 24px minmax(0, 1fr); }
  .kondisi-t5 li > span:last-child { grid-column: 1 / -1; }
  .tabel-t5 { overflow: visible; border: 0; }
  .tabel-t5 thead { display: none; }
  .tabel-t5 table, .tabel-t5 tbody { display: block; }
  .tabel-t5 tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px; border: 1px solid var(--garis); border-radius: 12px; margin-bottom: 10px; }
  .tabel-t5 td { display: block; padding: 0; border: 0; grid-column: 1 / -1; min-width: 0; }
  .tabel-t5 td[data-label=""] { grid-column: 2; grid-row: 1; }
  .tabel-t5 td[data-label="Situs"] { grid-column: 1; grid-row: 1; }
  .tabel-t5 td[data-label]:not([data-label=""]):not([data-label="Situs"])::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--redup); margin-top: 6px; }
  .tabel-t5 td select { min-height: 44px; }
  .tabel-t5 input[type=checkbox] { width: 22px; height: 22px; }
  .panel-t5 .baris-tombol .tombol, .usul-kartu-t5 .baris-tombol .tombol { width: 100%; min-height: 44px; justify-content: center; }
}
@media print {
  .kepala-cetak-t5 { display: block !important; font-size: 12px; margin: 0 0 8px; }
  .kepala-t5 .tombol, .panel-t5 .baris-tombol, .panel-t5 textarea, .panel-t5 select, .pernyataan-t5, .isian-mini-t5, .antrean-t5, .usul-t5, .tabel-t5 .kol-cek, .tabel-t5 td[data-label=""] { display: none !important; }
  .tata-t5 { display: block; }
  .riwayat-t5::details-content { content-visibility: visible; display: block; }
}

/* ---------- v3.42 T7b pemantauan, tinjauan, profil akses (kanvas papan Penilaian, Profil). Hanya token. ---------- */
.kpi-t7b { gap: 4px; padding: 14px 16px; }
.kpi-t7b .kpi-nilai, .kpi-t7b > b { font: 700 22px/1.2 var(--huruf); font-variant-numeric: tabular-nums; }
.kpi-t7b .pil { align-self: flex-start; }
.tabel-t7b tr.pilih-t7b td { background: var(--aksen-lembut); }
.tabel-t7b table { table-layout: auto; }
.tautan-t7b { background: none; border: 0; padding: 0; font: inherit; color: var(--aksen); text-align: left; cursor: pointer; text-decoration: underline; min-height: 24px; }
.cara-t7b summary { color: var(--aksen); font-weight: 600; font-size: 13px; cursor: pointer; min-height: 24px; }
.cara-t7b ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--teks-2); display: flex; flex-direction: column; gap: 4px; }
.dua-t7b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.blok-t7b { border: 1px solid var(--garis); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.blok-t7b .panel-kepala, .tinjauan-t7b .panel-kepala { margin-bottom: 0; flex-wrap: wrap; gap: 8px; }
.indikator-t7b { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.indikator-t7b li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; font-size: 13px; align-items: start; }
.indikator-t7b li + li { border-top: 1px solid var(--garis); }
.meter-t7b { display: block; height: 8px; border-radius: 4px; background: var(--cekung); overflow: hidden; margin-top: 4px; }
.meter-t7b i { display: block; height: 100%; background: var(--aksen); border-radius: 4px; }
.rekom-t7b { background: var(--aksen-lembut); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.rekom-t7b ul { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.rekom-t7b p { margin: 0; }
.aksi-t7b { flex-wrap: wrap; }
.aksi-t7b .kanan-t7b { margin-left: auto; }
.ubah-t7b { display: flex; flex-direction: column; gap: 8px; }
.ruang-tetap-t7b { margin-top: 18px; }
.ruang-tetap-t7b > h2 { font-size: 18px; margin: 0 0 10px; }
.tata-profil-t7b { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.grafik-t7b { display: flex; flex-direction: column; gap: 6px; }
.grafik-batang-t7b { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 130px; border-bottom: 1px solid var(--garis-kuat); }
.batang-t7b { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.batang-t7b i { display: block; width: 60%; background: var(--aksen); border-radius: 4px 4px 0 0; }
.batang-t7b span { font-size: 11.5px; color: var(--teks-2); font-variant-numeric: tabular-nums; }
.label-hari-t7b { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; text-align: center; font-size: 12px; color: var(--redup); }
.laporan-t7b { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.laporan-t7b li { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; font-size: 13px; align-items: start; }
.laporan-t7b li + li { border-top: 1px solid var(--garis); }
.linimasa-t7b { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.linimasa-t7b li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
.blok-t7b-alasan { display: block; margin-top: 2px; }
@media (max-width: 1024px) { .tata-profil-t7b { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .dua-t7b { grid-template-columns: minmax(0, 1fr); }
  .tabel-t5.tabel-t7b td.c-utama-t7b[data-label] { grid-column: 1 / -1; grid-row: auto; }
  .tabel-t5.tabel-t7b td.c-utama-t7b[data-label]::before { display: none; }
  .aksi-t7b .tombol { width: 100%; min-height: 44px; justify-content: center; }
  .aksi-t7b .kanan-t7b { margin-left: 0; }
  .laporan-t7b li { grid-template-columns: minmax(0, 1fr) auto; }
  .laporan-t7b li > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .linimasa-t7b li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kepala-t5 .baris-pil .tombol { min-height: 44px; }
  .tautan-t7b, .laporan-t7b .tombol { min-height: 44px; }
}
@media print {
  .kepala-t5 .tombol, .chip-baris, .aksi-t7b, .tab-sub, .laporan-t7b .tombol { display: none !important; }
  .tata-profil-t7b, .dua-t7b { display: block; }
}

/* ---------- v3.42 T8 pantau persetujuan (kanvas papan Kepsek). Hanya token. ---------- */
.pantau-t8 { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kepala-t8 { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.kepala-t8 h2 { margin: 0; font-size: 22px; }
.pantau-t8 .kisi-kpi { margin-bottom: 0; }
.panel-t8 { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel-t8 + .panel-t8 { margin-top: 0; }
.panel-t8 > h2 { margin: 0; font-size: 16px; }
.perhatian-t8 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.perhatian-t8 li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; align-items: center; font-size: 13.5px; }
.perhatian-t8 li + li { border-top: 1px solid var(--garis); }
.perhatian-t8 .isi-t8 { min-width: 0; overflow-wrap: anywhere; }
.perhatian-t8 .alasan-t8 { display: block; margin-top: 4px; }
.perhatian-t8 .tombol-t8 { display: flex; gap: 8px; flex-wrap: wrap; }
.tabel-t8 { border: 1px solid var(--garis); border-radius: 12px; }
.tabel-t8 table { font-size: 13px; }
.tabel-t8 td { vertical-align: top; }
.tabel-t8 td.c-waktu { white-space: nowrap; }
.tabel-t8 td.c-situs { min-width: 180px; overflow-wrap: anywhere; }
.tabel-t8 .tombol { white-space: nowrap; }
@media (max-width: 640px) {
  .perhatian-t8 li { grid-template-columns: minmax(0, 1fr); }
  .kepala-t8 h2 { font-size: 18px; }
  .kepala-t8 select { min-height: 44px; }
  .perhatian-t8 .tombol, .tabel-t8 .tombol { min-height: 44px; }
}

/* ---------- v3.43 D ---------- [v3.43 WILAYAH profil pindai] Situs C: profil pindai; laci penyunting; pemakaian penilai teks; jadwal kirim. */
.v343-atas { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v343-atas:empty { display: none; }
.v343-perhatian { background: var(--lain-bg); border: 1px solid var(--lain-garis); border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.v343-perhatian ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v343-perhatian li { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.v343-perhatian b { color: var(--lain); }
.v343-panel-kepala, .v343-antara { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.v343-panel-kepala h2, .v343-antara h2, .v343-antara h3 { margin: 0; }
.v343-menunggu p { margin: 0; }
.v343-sel-situs, .v343-sel-asal, .v343-sel-keputusan, .v343-sel-profil { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.v343-sel-situs .mono { font-size: 12.5px; }
.v343-sel-keputusan select { width: 100%; max-width: 420px; }
.v343-tabel-menunggu td { vertical-align: top; }
.v343-tabel-menunggu th:nth-child(2) { width: 200px; }
.v343-tabel-menunggu th:nth-child(3) { width: 190px; }
.v343-kol-profil { min-width: 220px; }
.v343-kelas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v343-kelas > div { background: var(--cekung); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--teks-2); }
.v343-kelas b { font-size: 13px; color: var(--teks); }
.v343-dampak { background: var(--lain-bg); border-radius: 10px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.v343-dampak[hidden] { display: none; }
.v343-blok { display: block; }
.v343-lbl-tebal { font-size: 13px; font-weight: 600; color: var(--teks); }
.v343-dialog { max-width: 560px; }
.v343-dialog form { display: flex; flex-direction: column; gap: 12px; }
.v343-dialog .daftar-ringkas-keputusan .mono { overflow-wrap: anywhere; }
.v343-dialog textarea, .v343-laci textarea { width: 100%; min-height: 64px; font-family: var(--huruf); font-size: 14px; }
/* Laci penyunting (papan Profil). */
dialog.v343-laci { width: min(720px, 100%); padding: 0; gap: 0; overflow: hidden; }
dialog.v343-laci[open] { display: flex; flex-direction: column; gap: 0; }
.v343-laci-kepala { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--garis); background: var(--permukaan); }
.v343-laci-kepala h2 { margin: 0; font-size: 18px; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.v343-tutup { width: 40px; height: 40px; border: 1px solid var(--garis-kuat); border-radius: 9px; color: var(--teks); flex: none; }
.v343-laci-isi { flex: 1 1 auto; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.v343-bagian { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v343-bagian + .v343-bagian { border-top: 1px solid var(--garis); padding-top: 20px; }
.v343-bagian h3 { margin: 0; font-size: 15px; }
.v343-bagian p { margin: 0; }
.v343-asal { background: var(--info-bg); border-radius: 10px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.v343-cara { background: var(--cekung); border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--teks-2); }
.v343-cara ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.v343-daftar-aturan { display: flex; flex-direction: column; gap: 10px; }
.v343-aturan { border: 1px solid var(--garis); border-radius: 12px; display: flex; flex-direction: column; min-width: 0; }
.v343-aturan-kepala { display: flex; align-items: flex-end; gap: 10px; padding: 10px 12px; background: var(--cekung); border-radius: 12px 12px 0 0; min-width: 0; }
.v343-aturan.v343-terlipat .v343-aturan-kepala, .v343-aturan-tetap .v343-aturan-kepala { align-items: center; }
.v343-aturan-tetap .v343-aturan-kepala:last-child, .v343-terlipat .v343-aturan-kepala:last-child { border-radius: 12px; }
.v343-no { width: 24px; height: 24px; border-radius: 50%; background: var(--permukaan); border: 1px solid var(--garis-kuat); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; margin-bottom: 8px; }
.v343-terlipat .v343-no, .v343-aturan-tetap .v343-no, .v343-hp .v343-no { margin-bottom: 0; }
.v343-lebar { flex: 1 1 auto; min-width: 0; }
.v343-aturan-kepala .menu-titik { margin-left: auto; flex: none; }
.v343-wilayah { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; padding: 10px 12px; align-items: start; }
.v343-wilayah + .v343-wilayah { border-top: 1px solid var(--garis); }
.v343-wilayah.v343-satu { grid-template-columns: minmax(0, 1fr); }
.v343-hapus-wilayah { grid-column: 1 / -1; justify-self: start; }
.v343-kiri { justify-self: start; }
.v343-aturan-ket { padding: 0 12px 12px; }
.v343-wilayah + .v343-aturan-ket, .v343-aturan-kepala + .v343-aturan-ket { padding-top: 10px; }
label.v343-lbl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--teks-2); min-width: 0; }
label.v343-lbl input, label.v343-lbl select, .v343-laci textarea, .v343-coba input { width: 100%; max-width: 100%; box-sizing: border-box; }
.v343-laci input.mono { font-family: var(--mono); font-size: 13px; }
.v343-laci .v343-galat { border: 2px solid var(--bahaya); }
.v343-pesan-galat { font-size: 12px; font-weight: 600; color: var(--bahaya); }
.v343-lipat-tombol { font: inherit; text-align: left; background: transparent; border: 0; padding: 0; color: var(--teks); flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; overflow-wrap: anywhere; }
.v343-lipat-tombol:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
.v343-coba { display: flex; gap: 8px; align-items: flex-end; }
.v343-hasil-coba { background: var(--aktif-bg); border-radius: 10px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.v343-hasil-coba ul, .v343-tetap { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.v343-tetap { color: var(--teks-2); }
.v343-kosong, .v343-sehat { background: var(--cekung); border-radius: 10px; padding: 12px; display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--teks-2); }
.v343-kosong b, .v343-sehat b { font-size: 20px; color: var(--redup); }
.v343-sehat-awas { background: var(--lain-bg); }
.v343-sehat-awas b { color: var(--lain); }
.v343-laci-kaki { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--garis); background: var(--permukaan); }
.v343-kaki-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.v343-kaki-aksi { display: flex; gap: 8px; margin-left: auto; }
.v343-laci-kaki .v36-pesan-hasil-wadah { flex: 1 1 100%; order: 3; }
.v343-laci-kaki .v36-pesan-hasil-wadah:empty { display: none; }
/* Pemakaian penilai teks (papan Pemakaian). */
.v343-pakai h3 { margin: 0; font-size: 14px; }
.v343-pakai p { margin: 0; }
.v343-kpi-kisi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.v343-kpi { background: var(--cekung); border: 0; padding: 14px; gap: 4px; min-width: 0; }
.v343-kpi .kpi-judul { font-size: 12px; font-weight: 600; color: var(--teks-2); }
.v343-kpi .kpi-nilai { font: 700 24px/1.2 var(--huruf); }
.v343-tabel-pakai td { vertical-align: middle; }
.v343-tabel-pakai .angka { text-align: right; font-variant-numeric: tabular-nums; }
.v343-menunggu label.v343-hp-saja { display: none; }
.v343-hapus-wilayah { font-size: 12px; font-weight: 600; }
.v343-meter-sel { display: flex; flex-direction: column; gap: 4px; }
.v343-meter { height: 8px; border-radius: 999px; background: var(--cekung); overflow: hidden; min-width: 140px; }
.v343-meter span { display: block; height: 100%; background: var(--aksen); border-radius: 999px; min-width: 2px; }
.v343-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.v343-tahap { border: 1px solid var(--garis); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v343-tahap ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.v343-kisi-isian { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin-top: 14px; }
.v343-isian { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v343-isian > label { font-size: 13px; font-weight: 600; }
.v343-baris { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--teks-2); }
.v343-penuh { grid-column: 1 / -1; margin: 0; }
.v343-subjudul { grid-column: 1 / -1; font-size: 14px; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--garis); }
.v343-segmen-t2 { align-self: flex-start; }
.v343-segmen-t2 button { min-height: 36px; }
.v343-segmen-t2 button:disabled { opacity: .6; cursor: not-allowed; }
.v343-catatan-lanjutan { margin: 14px 0 0; }
@media (max-width: 900px) {
  .v343-kelas, .v343-kpi-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Papan Hp: laci layar penuh, isian bertumpuk, kaki menempel. */
@media (max-width: 640px) {
  dialog.v343-laci { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; }
  .v343-laci-kepala { padding: 10px 16px; position: sticky; top: 0; }
  .v343-laci-kepala h2 { font-size: 16px; }
  .v343-tutup { width: 44px; height: 44px; }
  .v343-laci-isi { padding: 16px; gap: 16px; }
  .v343-bagian + .v343-bagian { padding-top: 16px; }
  .v343-wilayah { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .v343-aturan-kepala { align-items: center; }
  .v343-aturan-kepala .menu-titik summary { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  .v343-laci input, .v343-laci select, .v343-laci textarea { font-size: 16px; min-height: 44px; }
  .v343-laci .tombol { min-height: 44px; }
  .v343-coba { flex-direction: column; align-items: stretch; }
  .v343-laci-kaki { position: sticky; bottom: 0; flex-direction: column; align-items: stretch; padding: 12px 16px; }
  .v343-kaki-aksi { margin-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v343-laci-kaki .v36-pesan-hasil-wadah { flex: none; order: 0; width: 100%; }
  .v343-kelas, .v343-dua, .v343-kisi-isian { grid-template-columns: minmax(0, 1fr); }
  .v343-perhatian li { align-items: flex-start; }
  .v343-sel-keputusan select { max-width: 100%; }
  .v343-meter { min-width: 0; }
  .v343-menunggu label.v343-hp-saja { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }
}
/* [/v3.43 WILAYAH profil pindai] */

/* ---------- v3.43 E: tab Riwayat permintaan akses (gabungan Berjalan dan Selesai). Hanya token. ---------- */
.panel-riwayat-pa .c-tgl-riwayat { white-space: nowrap; }
.panel-riwayat-pa .situs-riwayat { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .panel-riwayat-pa .tabel-t5 td.c-utama-riwayat { grid-column: 1; grid-row: 1; }
  .panel-riwayat-pa .c-tgl-riwayat { white-space: normal; }
}
/* ---------- akhir v3.43 E ---------- */

/* ---------- v3.44 U S3: layar sesi terarah (papan 14, 15, 22, 29; kontrak 7.1 sampai 7.8) ---------- */
.kepala-sesi-u3 { background: var(--gelap); color: var(--di-gelap); border-radius: 18px; padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 14px; }
.kepala-sesi-u3 h2 { margin: 0; font-size: 22px; line-height: 1.25; color: var(--di-gelap); }
.kepala-sesi-u3-judul { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; min-width: 0; }
.kepala-sesi-u3-angka { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.kepala-sesi-u3 .ket-u3 { color: var(--gelap-redup); font-size: 13px; }
.kepala-sesi-u3 .besar-u3 { font-size: 28px; font-weight: 700; line-height: 1; }
.pil-gelap-u3 { display: inline-flex; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--gelap-redup); color: var(--di-gelap); }
.kepala-sesi-u3-sakelar { flex-basis: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--gelap-garis); padding-top: 12px; }
.label-sakelar-u3 { font-weight: 600; font-size: 13px; }
.sakelar-layar-u3 { display: inline-flex; border: 1px solid var(--gelap-redup); border-radius: 9px; overflow: hidden; }
.sakelar-layar-u3 .tombol { border: 0; border-radius: 0; min-height: 36px; background: transparent; color: var(--di-gelap); }
.sakelar-layar-u3 .tombol[aria-checked="true"] { background: var(--emas); color: var(--di-emas); }
.sakelar-layar-u3 .tombol:disabled { opacity: .6; cursor: not-allowed; }
.sakelar-layar-u3 .tombol:focus-visible { outline: 2px solid var(--emas); outline-offset: -4px; }
.kepala-sesi-u3 .ket-u3.ket-darurat-u3 { color: var(--di-gelap); font-weight: 600; }
.kepala-sesi-u3-sakelar .ket-u3 { flex: 1 1 280px; }
.perlu-u3 { border-color: var(--lain-garis); background: var(--lain-bg); }
.butir-u3 { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 10px 12px; }
.butir-u3 + .butir-u3 { margin-top: 8px; }
.nama-u3 { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; line-height: 1.35; }
.nama-u3 .kecil { overflow-wrap: anywhere; }
.butir-u3 .aksi-u3 { margin: 0; }
.dihampiri-u3 > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.dihampiri-u3 > summary h2 { display: inline; margin: 0; }
.dihampiri-u3[open] > summary { margin-bottom: 10px; }
.lipat-dibantu-u3 { border-color: var(--lain-garis); background: var(--lain-sorot); }
.tabel-layar-u3 { width: 100%; }
.tabel-layar-u3 td { vertical-align: middle; }
.tabel-layar-u3 td.c-situs { max-width: 260px; overflow-wrap: anywhere; }
.tabel-layar-u3 .menu-isi { min-width: 260px; }
.tabel-layar-u3 .menu-isi button:disabled { color: var(--redup); cursor: not-allowed; background: none; }
.tabel-layar-u3 tr.baris-manual-u3 td { color: var(--teks-2); }
.dialog-layar-u3 select, .dialog-layar-u3 input[type="text"] { width: 100%; box-sizing: border-box; }
.dampak-u3 { display: flex; flex-direction: column; gap: 4px; }
.pilihan-radio-u3 { display: flex; flex-direction: column; gap: 6px; }
.pilih-layar-rpp-u3 { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.pilih-layar-rpp-u3 label { font-weight: 600; }
.pilih-layar-rpp-u3 .baris-isian { align-items: center; }
.darurat-terarah-u3 { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 640px) {
  .sesi-berjalan:has(.kepala-sesi-u3) .bilah-sesi { position: static; }
  .kepala-sesi-u3 { position: sticky; top: 0; z-index: 5; margin: 0 -16px 12px; border-radius: 0; padding: 12px 16px; gap: 6px 12px; }
  .kepala-sesi-u3 h2 { font-size: 17px; }
  .kepala-sesi-u3 .besar-u3 { font-size: 20px; }
  .kepala-sesi-u3-angka { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .kepala-sesi-u3-sakelar { padding-top: 8px; gap: 8px; }
  .kepala-sesi-u3-sakelar .ket-u3:not(.ket-darurat-u3) { display: none; }
  .sakelar-layar-u3 .tombol { min-height: 44px; padding: 0 16px; }
  .butir-u3 { flex-direction: column; align-items: stretch; }
  .nama-u3 { flex-basis: auto; }
  .butir-u3 .aksi-u3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
  .butir-u3 .aksi-u3 .tombol { min-height: 44px; width: 100%; justify-content: center; white-space: normal; }
  .dihampiri-u3 > summary { min-height: 44px; }
  .tabel-layar-u3, .tabel-layar-u3 tbody { display: block; }
  .tabel-layar-u3 thead { display: none; }
  .tabel-layar-u3 tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nama aksi" "keadaan aksi"; gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--garis); }
  .tabel-layar-u3 td { display: block; padding: 0; border: 0; }
  .tabel-layar-u3 td.c-nama { grid-area: nama; min-width: 0; }
  .tabel-layar-u3 td.c-keadaan { grid-area: keadaan; min-width: 0; }
  .tabel-layar-u3 td.c-keadaan .pil { white-space: normal; }
  .tabel-layar-u3 td.c-aksi { grid-area: aksi; align-self: center; }
  .tabel-layar-u3 td.c-langkah, .tabel-layar-u3 td.c-situs, .tabel-layar-u3 td.c-lembar { display: none; }
  .tabel-layar-u3 .menu-baris summary { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  .tabel-layar-u3 .menu-isi { min-width: min(280px, 86vw); }
  .tabel-layar-u3 .menu-isi button { min-height: 44px; }
  .bilah-aksi-sesi.ada-langkah { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bilah-aksi-sesi.ada-langkah .aksi-langkah-utama { grid-column: auto; min-height: 44px; font-size: 15px; }
  body:has(.bilah-aksi-sesi.ada-langkah) main { padding-bottom: 140px; }
}
/* U63 butir 1: Lanjut dan Arahkan kelas di kepala sesi (layar lebar); menu Arahkan di bilah aksi hanya untuk HP. */
.aksi-kepala-u3 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.kepala-sesi-u3 .menu-arahkan-u3 > summary.tombol { background: transparent; color: var(--di-gelap); border: 1px solid var(--gelap-redup); }
.kepala-sesi-u3 .menu-arahkan-u3 > summary.tombol:hover, .kepala-sesi-u3 .menu-arahkan-u3[open] > summary.tombol { background: var(--gelap-sorot); }
.kepala-sesi-u3 .menu-arahkan-u3 .menu-isi { left: auto; right: 0; }
@media (min-width: 641px) { .sesi-berjalan:has(.kepala-sesi-u3) .bilah-aksi-sesi .menu-arahkan { display: none; } }
/* Penanda lipatan Perlu dihampiri yang terlihat (tinjauan pemegang 17.28): chevron berputar saat terbuka. */
.dihampiri-u3 > summary { list-style: none; }
.dihampiri-u3 > summary::-webkit-details-marker { display: none; }
.chevron-u3 { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--teks-2); transform: rotate(-90deg); transition: transform .15s ease; }
.dihampiri-u3[open] > summary .chevron-u3 { transform: none; }
.chevron-u3 svg { width: 20px; height: 20px; stroke-width: 2.5; }
.dihampiri-u3 > summary:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; border-radius: 8px; }
/* U63 butir 4: santri memilih lanjut sendiri: butir meredup sampai Saya hampiri atau langkah berganti. */
.butir-u3.redup-u3 { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .chevron-u3 { transition: none; } }
/* ---------- akhir v3.44 U S3 ---------- */
/* ---------- v3.44 U S5: Kendali kelas (papan 22, 23; kontrak fase 2 bagian 2 dan 3) ---------- */
.tab-sesi-u5 { margin: 0 0 14px; }
.kendali-u5 { display: flex; flex-direction: column; gap: 12px; }
.isi-kendali-u5 { display: flex; flex-direction: column; gap: 12px; padding-bottom: 88px; min-width: 0; }
.kepala-kendali-u5 { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.pilih-kendali-u5 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
label.cek-semua-u5 { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; min-height: 32px; cursor: pointer; }
.cek-semua-u5 input { width: 18px; height: 18px; margin: 0; }
button.saring-u5 { font: inherit; font-size: 12px; font-weight: 600; min-height: 28px; border: 1px solid transparent; cursor: pointer; }
button.saring-u5[aria-pressed="true"] { border-color: currentColor; }
button.saring-u5:disabled { opacity: .6; cursor: default; }
button.saring-u5:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
.keadaan-kendali-u5 { display: flex; flex-wrap: wrap; gap: 6px; }
.keadaan-kendali-u5 .pil { white-space: normal; }
.ringkasan-aksi-u5 { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ringkasan-aksi-u5 h3 { margin: 0; font-size: 15px; }
.ringkasan-aksi-u5 .v36-pesan-hasil { margin: 0; }
.ringkasan-aksi-u5 .v36-pesan-hasil > span:last-child { display: flex; flex-wrap: wrap; gap: 2px 6px; overflow-wrap: anywhere; min-width: 0; }
.kisi-u5 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ubin-u5 { display: flex; flex-direction: column; gap: 6px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.ubin-u5.terpilih-u5 { border-color: var(--aksen); box-shadow: inset 0 0 0 1px var(--aksen); }
.ubin-u5.ubin-manual-u5 { background: var(--cekung); }
label.nama-ubin-u5 { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 24px; font-size: 14px; overflow-wrap: anywhere; cursor: pointer; }
.nama-ubin-u5 input { width: 18px; height: 18px; flex: none; margin: 0; }
.nama-ubin-u5 input:disabled { cursor: not-allowed; }
.pil-ubin-u5 { display: flex; flex-wrap: wrap; gap: 4px; }
.pil-ubin-u5 .pil { white-space: normal; }
.ubin-u5 .mono, .terima-u5, .lewat-u5 { overflow-wrap: anywhere; }
.terima-gagal-u5 { color: var(--bahaya); font-weight: 600; }
.bilah-kendali-u5 .tombol { min-height: 32px; font-size: 13px; padding: 0 12px; }
.bilah-kendali-u5 .tombol.sembunyi { display: none; }
.dialog-kendali-u5 .kuis-u5 { display: block; }
@media (max-width: 640px) {
  .kisi-u5 { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); overflow: hidden; }
  .ubin-u5 { border: 0; border-bottom: 1px solid var(--garis); border-radius: 0; gap: 4px; }
  .ubin-u5:last-child { border-bottom: 0; }
  .ubin-u5.terpilih-u5 { box-shadow: inset 4px 0 0 var(--aksen); }
  label.nama-ubin-u5 { min-height: 44px; }
  .nama-ubin-u5 input, .cek-semua-u5 input { width: 22px; height: 22px; }
  label.cek-semua-u5, button.saring-u5 { min-height: 44px; }
  .isi-kendali-u5 { padding-bottom: 200px; }
  body:has(.bilah-aksi-sesi.ada-langkah) .bilah-kendali-u5 { bottom: calc(128px + env(safe-area-inset-bottom)); }
  .bilah-kendali-u5 { gap: 6px; padding: 8px 10px; }
  .bilah-kendali-u5 .tombol { min-height: 44px; flex: 1 1 calc(33% - 6px); justify-content: center; padding: 0 8px; }
  .bilah-kendali-u5 .bilah-hitung { order: 0; }
  .bilah-kendali-u5 .tautan { order: 1; margin-left: auto; min-height: 44px; }
  .bilah-kendali-u5 .spasi { order: 2; flex-basis: 100%; height: 0; }
  .bilah-kendali-u5 .tombol { order: 3; }
}
/* ---------- akhir v3.44 U S5 ---------- */

/* ---------- v3.45 WiFi bersertifikat (W-F2, kanvas versi 16 papan 1, 2, 3, 6, 7) ---------- */
.wifi-v345 .wifi-status { align-items: center; }
.wifi-v345 .alat-wifi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wifi-v345 .alat-wifi input[type='search'] { flex: 1 1 220px; min-width: 0; }
.wifi-v345 .alat-wifi select { max-width: 100%; }
.wifi-v345 .bungkus-tabel { max-width: 100%; }
.wifi-v345 tr.dipilih { background: var(--aksen-lembut); }
/* W45 R2: teks panjang (alasan, OU) dipatah di dalam sel supaya tabel CB tidak tergulir di dalam pada 1280; serial tidak dipatah. */
.wifi-v345 .tabel-wifi-cb td { overflow-wrap: anywhere; }
.wifi-v345 .tabel-wifi-cb td .mono { overflow-wrap: normal; }
.wifi-v345 .kisi-kes-wifi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.kes-wifi { border: 1px solid var(--garis); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--permukaan); min-width: 0; overflow-wrap: anywhere; }
.kes-wifi-bahaya { border-color: var(--bahaya); }
.kes-wifi-lain { border-color: var(--lain-garis); }
.kes-wifi-judul { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dampak-wifi { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--radius); background: var(--cekung); margin: 8px 0; }
.catatan-wifi { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: var(--radius); background: var(--cekung); }
.baris-setelan-wifi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: start; padding: 10px 0; border-top: 1px solid var(--garis); }
.isian-wifi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.isian-wifi input.pendek { width: 6.5em; }
.wifi-dibatasi { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 6px; }
/* W45 jawaban 5 (papan 6): teks pendek di HP; peralihan per OU dan keadaan server hanya di layar lebar. */
.wifi-v345 .wifi-hp { display: none; }
@media (max-width: 640px) {
  .wifi-v345 .wifi-lebar, .wifi-v345 .wifi-hanya-lebar { display: none; }
  .wifi-v345 .wifi-hp { display: inline; }
  .wifi-v345 .kisi-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wifi-v345 .alat-wifi > * { flex: 1 1 100%; }
  .baris-setelan-wifi { grid-template-columns: 1fr; }
  /* Papan 6: tabel CB di HP menjadi kartu per baris (tanpa gulir mendatar). */
  .wifi-v345 .tabel-wifi-cb thead, .wifi-v345 .tabel-wifi-ou thead { display: none; }
  .wifi-v345 .tabel-wifi-cb, .wifi-v345 .tabel-wifi-cb tbody, .wifi-v345 .tabel-wifi-cb tr, .wifi-v345 .tabel-wifi-cb td,
  .wifi-v345 .tabel-wifi-ou, .wifi-v345 .tabel-wifi-ou tbody, .wifi-v345 .tabel-wifi-ou tr, .wifi-v345 .tabel-wifi-ou td { display: block; width: auto; }
  .wifi-v345 .tabel-wifi-cb tr, .wifi-v345 .tabel-wifi-ou tr { position: relative; border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px 44px 10px 12px; margin-bottom: 8px; }
  .wifi-v345 .tabel-wifi-cb td, .wifi-v345 .tabel-wifi-ou td { border: 0; padding: 2px 0; }
  .wifi-v345 .tabel-wifi-cb td.c-aksi, .wifi-v345 .tabel-wifi-ou td.c-aksi { position: absolute; top: 6px; right: 6px; }
  .wifi-v345 .tabel-wifi-cb td.c-cek { position: absolute; top: 10px; right: 44px; }
}
/* ---------- akhir v3.45 WiFi (W-F2) ---------- */
/* ---------- v3.46 plafon harian: cara membuka situs per angkatan (kanvas v3.46 versi 11) ---------- */
.plh-panel { display: flex; flex-direction: column; gap: 14px; }
.plh-panel > .panel-kepala { margin-bottom: 0; }
.plh-sorot { margin: 0; padding: 12px 14px; border-radius: var(--radius); background: var(--aksen-lembut); color: var(--teks); font-size: 14px; }
.plh-beda > summary { cursor: pointer; font-weight: 600; color: var(--aksen); width: fit-content; }
.plh-beda-isi { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.plh-beda-isi > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--cekung); font-size: 14px; }
.plh-kampus { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--garis); }
.plh-kampus-kepala { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.plh-kampus-kepala h3 { margin: 0; font-size: 16px; }
.plh-usulan-kampus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.plh-kisi { gap: 12px; }
.plh-kartu { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.plh-kartu p { margin: 0; }
.plh-kartu .baris-tombol { margin-top: auto; padding-top: 4px; }
.plh-kartu-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 8px; flex-wrap: wrap; }
.plh-kartu-kepala h4 { white-space: nowrap; }
.plh-kartu-kepala h4 { margin: 0; font-size: 16px; }
.plh-batang { height: 8px; border-radius: 999px; background: var(--cekung); overflow: hidden; }
.plh-batang > i { display: block; height: 100%; background: var(--aksen); }
.plh-hp { display: none; }
.plh-tautan-kartu { color: inherit; text-decoration: none; }
.plh-tautan-kartu::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.plh-kartu:has(.plh-tautan-kartu) { position: relative; }
dialog.plh-dialog { max-width: 620px; width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
dialog.plh-dialog label.plh-pilihan { display: flex; font-weight: 400; }
dialog.plh-dialog label.plh-isian { display: flex; }
.plh-dialog-isi p:not(.kecil) { color: var(--teks); }
.plh-dialog-isi { display: flex; flex-direction: column; gap: 14px; }
.plh-dialog-isi h3 { font-size: 15px; margin: 0 0 6px; }
.plh-dialog-isi p { margin: 0; }
.plh-dialog-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.plh-dialog-kepala h2 { margin: 0; }
.plh-biasa { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.plh-cek { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plh-cek li { display: flex; gap: 10px; align-items: flex-start; }
.plh-cek li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plh-cek-ikon { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.plh-cek-ikon.ya { color: var(--aktif); background: var(--aktif-bg); }
.plh-cek-ikon.tidak { color: var(--bahaya); background: var(--bahaya-bg); }
.plh-pilihan-grup { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.plh-pilihan-grup legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 6px; }
.plh-pilihan { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; font-size: 14px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; cursor: pointer; }
.plh-pilihan:has(input:checked) { border-color: var(--aksen); background: var(--aksen-lembut); }
.plh-pilihan.mati { cursor: not-allowed; opacity: .7; }
.plh-pilihan input[type='radio'] { margin-top: 3px; width: auto; flex: none; }
.plh-pilihan > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.plh-isian { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--teks-2); min-width: 0; }
.plh-isian textarea, .plh-isian select, .plh-isian-uji { font: inherit; font-size: 14px; font-weight: 400; max-width: 100%; }
.plh-isian-uji { width: 100%; box-sizing: border-box; }
.plh-catatan { padding: 10px 14px; border-radius: 10px; background: var(--aksen-lembut); font-size: 14px; }
.plh-catatan.bahaya { background: var(--bahaya-bg); color: var(--bahaya); }
.plh-tabel-tinggi { max-height: 50vh; overflow: auto; }
.plh-rinci-kepala { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.plh-rinci-kepala h2 { margin: 0 0 6px; }
.plh-baris { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plh-besar { font-size: 17px; font-weight: 600; margin: 8px 0; }
.plh-angka { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.plh-angka > div { background: var(--cekung); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.plh-angka b { font-size: 22px; line-height: 1.2; }
.plh-perhatian { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--garis); }
.plh-perhatian:first-of-type { border-top: 0; }
.plh-perhatian > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.plh-perhatian h4 { margin: 0; font-size: 15px; }
.plh-perhatian p { margin: 0; }
.plh-perhatian-ikon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--lain); background: var(--lain-bg); }
.plh-nama { margin: 0; padding-left: 18px; columns: 2 220px; font-size: 14px; }
.plh-jadwal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plh-jadwal li { display: grid; grid-template-columns: 96px 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--garis); font-size: 14px; }
.plh-jadwal li:first-child { border-top: 0; }
.plh-jam { font-variant-numeric: tabular-nums; color: var(--teks-2); font-weight: 600; }
.plh-jadwal-tanda { color: var(--redup); text-align: center; }
.plh-jadwal li.selesai .plh-jadwal-tanda { color: var(--aktif); }
.plh-jadwal li.sekarang { background: var(--aksen-lembut); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.plh-jadwal li.sekarang .plh-jadwal-tanda { color: var(--aksen); }
.plh-judul-sub { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.plh-judul-sub h2 { margin: 0; }
.plh-atur { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; padding: 12px 0; border-top: 1px solid var(--garis); }
.panel > h3 + .plh-atur { border-top: 0; }
.plh-atur-teks { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plh-atur-teks p { margin: 0; }
.plh-ubah { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--cekung); }
.plh-ubah .baris-tombol { margin-top: 0; }
.plh-isian-baris { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.plh-satuan { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.plh-satuan input.pendek, .plh-isian input.pendek { width: 7em; }
.plh-timpa { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.plh-dt { color: var(--teks); }
.plh-dd { font-weight: 700; }
.plh-lanjutan { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border: 1px dashed var(--garis-kuat); border-radius: var(--radius); margin-top: 14px; }
.plh-lanjutan h3 { margin: 0 0 4px; }
.plh-lanjutan p { margin: 0; }
/* Papan 8 (HP 390): kartu menjadi satu baris bertaut ke rincian; mengubah cara dan pengaturan hanya dari laptop. */
@media (max-width: 640px) {
  .plh-laptop { display: none !important; }
  .plh-hp { display: block; }
  .plh-kisi { grid-template-columns: 1fr; }
  .plh-kartu { padding: 14px 16px; min-height: 44px; }
  .plh-atur { grid-template-columns: 1fr; }
  .plh-jadwal li { grid-template-columns: 76px 18px minmax(0, 1fr); }
  .plh-nama { columns: 1; }
}
/* ---------- akhir v3.46 plafon harian ---------- */
/* ---------- v3.46 klub dan eskul, les sore (kanvas v11 papan 6, 7) ---------- */
.plh-klub, .plh-sore { display: flex; flex-direction: column; gap: 14px; }
.plh-klub .panel + .panel, .plh-sore .panel + .panel { margin-top: 0; }
.plh-tabel-klub tr.pilih td { background: var(--aksen-lembut); }
.plh-klub-rinci { display: flex; flex-direction: column; gap: 12px; }
.plh-klub-rinci .panel-kepala { margin-bottom: 0; }
.plh-klub-rinci h3 { margin: 4px 0 0; font-size: 15px; }
.plh-info-klub { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.plh-info-klub > div { background: var(--cekung); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
.plh-situs-klub summary { cursor: pointer; color: var(--aksen); font-weight: 600; }
.plh-situs-klub ul { margin: 6px 0 0; padding-left: 18px; overflow-wrap: anywhere; font-size: 13px; }
/* Kanvas v38 papan 22 (v3.47.1): Klub saya untuk ustadz pembina. */
.plh-klub-pembina { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.plh-situs-baca { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; font-size: 13px; }
.plh-situs-baca code { font-family: var(--mono); }
.plh-anggota { list-style: none; margin: 0; padding: 0; }
.plh-anggota li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--garis); flex-wrap: wrap; }
.plh-anggota-nama { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plh-calon { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }
.plh-calon label { display: flex; flex-direction: row; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; font-size: 14px; font-weight: 400; cursor: pointer; }
dialog.plh-dialog .plh-calon label { display: flex; }
.plh-calon label.mati { cursor: not-allowed; opacity: .75; }
.plh-calon input[type='checkbox'], .plh-pilihan-kecil input { width: auto; flex: none; }
.plh-catatan.lain { background: var(--lain-bg); color: var(--teks); display: flex; flex-direction: column; gap: 8px; }
.plh-pilihan-kecil { display: inline-flex; flex-direction: row; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 400; cursor: pointer; }
dialog.plh-dialog label.plh-pilihan-kecil { display: inline-flex; }
.plh-aturan { list-style: none; margin: 0; padding: 0; }
.plh-aturan li { padding: 12px 0; border-top: 1px solid var(--garis); }
.plh-aturan li:first-child { border-top: 0; }
.plh-jadwal-klub { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.plh-formulir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }
.plh-formulir input[type='text'], .plh-formulir select { font: inherit; font-size: 14px; font-weight: 400; max-width: 100%; }
.plh-untuk { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
.plh-untuk legend { font-size: 13px; font-weight: 600; color: var(--teks-2); padding: 0; margin-bottom: 4px; width: 100%; }
.plh-sore-form { display: flex; flex-direction: column; gap: 14px; }
.plh-les-daftar { display: flex; flex-direction: column; gap: 12px; }
.plh-les { border: 1px solid var(--garis); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.plh-les p { margin: 0; }
.plh-les-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.plh-les-kepala > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plh-les-kepala h3 { margin: 0; font-size: 16px; }
@media (max-width: 640px) {
  .plh-formulir { grid-template-columns: 1fr; }
  .plh-klub-rinci .panel-kepala .baris-tombol { justify-content: flex-start; }
}
/* ---------- akhir v3.46 klub dan les sore ---------- */
/* [UX 1.21] laci periksa (pedoman 1.21a) dan KPI berkonteks (1.21b). Token saja. */
.ux121-kerja { display: block; min-width: 0; }
.ux121-daftar { min-width: 0; }
.ux121-laci { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--teks); }
.ux121-laci h2 { font-size: 18px; margin: 0; overflow-wrap: anywhere; }
.ux121-laci h2:focus { outline: none; }
.ux121-laci h2:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.ux121-laci h3 { font-size: 15px; margin: 0 0 6px; }
.ux121-laci-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ux121-laci-judul { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ux121-sub { margin: 0; overflow-wrap: anywhere; }
.ux121-tutup { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 4px; }
.ux121-nav-butir { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); }
.ux121-pil-baris { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ux121-ringkas { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.ux121-ringkas dt { color: var(--redup); }
.ux121-ringkas dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ux121-periksa { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ux121-cek { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.ux121-cek .ux121-ikon { flex: none; margin-top: 2px; }
.ux121-cek.ok .ux121-ikon { color: var(--aktif); }
.ux121-cek.awas .ux121-ikon, .ux121-cek.belum .ux121-ikon { color: var(--lain); }
.ux121-cek.gagal .ux121-ikon { color: var(--bahaya); }
.ux121-cek-isi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ux121-tebal { font-weight: 600; }
.ux121-langkah { margin: 0; }
.ux121-aksi { margin: 0; }
.ux121-hasil:empty { display: none; }
.ux121-hasil:focus { outline: none; }
.ux121-hasil:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
/* Catatan dan alamat kecil di laci; juga dipakai wilayah [P1-A DASBOR]. */
.p1a-mini { font-size: 12px; line-height: 1.5; }
.ux121-alamat { border-top: 1px solid var(--garis); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ux121-alamat-teks { word-break: break-all; }
.ux121-disalin { color: var(--aktif); }
.ux121-pegangan { display: none; width: 40px; height: 4px; border-radius: 999px; background: var(--garis-kuat); margin: 0 auto 2px; flex: none; }
.ux121-nama-baris { font: inherit; color: var(--aksen-tua); background: none; border: 0; padding: 2px 0; margin: 0; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--garis-kuat); text-underline-offset: 3px; min-height: 24px; }
.ux121-nama-baris:hover { color: var(--aksen); }
.ux121-nama-baris:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
.ux121-nama-baris b, .ux121-nama-baris .v37-nama { color: inherit; }
tr.ux121-terbuka > td, tr.ux121-terbuka > th, .ux121-baris.ux121-terbuka { background: var(--aksen-lembut); }
.ux121-tirai { position: fixed; inset: 0; z-index: 59; background: color-mix(in srgb, var(--gelap) 45%, transparent); }
@media (min-width: 1280px) {
  .ux121-kerja.ux121-laci-buka { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
  .ux121-kerja.ux121-laci-buka .ux121-sekunder { display: none; }
  .ux121-laci { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; }
  .ux121-tirai { display: none; }
}
@media (max-width: 1279px) {
  .ux121-laci { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); z-index: 60; overflow: auto; border-radius: 0; border-width: 0 0 0 1px; box-shadow: var(--bayang); }
  body:has(.ux121-laci[aria-modal="true"]:not([hidden])) { overflow: hidden; }
}
@media (max-width: 640px) {
  .ux121-laci { top: auto; left: 0; width: 100%; max-height: 82vh; border-radius: 18px 18px 0 0; border-width: 1px 0 0; padding: 10px 16px 0; }
  .ux121-pegangan { display: block; }
  .ux121-aksi { position: sticky; bottom: 0; background: var(--permukaan); padding: 10px 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-top: 1px solid var(--garis); z-index: 1; }
  .ux121-aksi .tombol:first-child { min-height: 44px; flex: 1 1 auto; }
  .ux121-alamat { padding-bottom: 12px; }
  .ux121-ringkas { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ux121-ringkas dd { margin-bottom: 6px; }
}
.ux121-kpi-kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ux121-kpi { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--teks); font: inherit; text-align: left; }
.ux121-kpi-saring { cursor: pointer; }
.ux121-kpi-saring:hover { border-color: var(--aksen); }
.ux121-kpi-saring[aria-pressed="true"] { border-color: var(--aksen); box-shadow: 0 0 0 1px var(--aksen); }
.ux121-kpi-saring:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.ux121-kpi-judul { font-size: 13px; color: var(--redup); }
.ux121-kpi-baris { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.ux121-kpi-nilai { font: 500 30px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--teks); }
.ux121-kpi-nilai.ux121-nilai-kosong { color: var(--redup); }
.ux121-kpi-dasar { font-size: 12px; color: var(--redup); font-variant-numeric: tabular-nums; }
.ux121-tren { flex: none; overflow: visible; }
.ux121-tren-64 { display: none; }
.ux121-tren-isi { fill: var(--aksen-lembut); stroke: none; }
.ux121-tren-garis { fill: none; stroke: var(--seri-0); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ux121-tren-titik { fill: var(--seri-0); }
.ux121-selisih { align-self: flex-start; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; line-height: 1.5; font-variant-numeric: tabular-nums; background: var(--mati-bg); color: var(--mati); }
.ux121-selisih.baik { background: var(--aktif-bg); color: var(--aktif); }
.ux121-selisih.buruk { background: var(--bahaya-bg); color: var(--bahaya); }
.ux121-pendek { display: none; }
.ux121-kpi.memuat .kerangka-baris { height: 30px; }
@media (max-width: 640px) {
  .ux121-kpi-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ux121-kpi { padding: 12px; }
  .ux121-kpi-nilai { font-size: 24px; }
  .ux121-kpi-baris { min-height: 24px; flex-wrap: wrap; }
  .ux121-tren-120 { display: none; }
  .ux121-tren-64 { display: block; }
  .ux121-selisih.ada-pendek .ux121-panjang { display: none; }
  .ux121-selisih.ada-pendek .ux121-pendek { display: inline; }
  .ux121-selisih { white-space: normal; }
}
/* [/UX 1.21] */
/* [P1-A DASBOR] penyaring isi sampai mode Aktif (KONTRAK-P1-A bagian 7). Token saja. */
/* .p1a-mini didefinisikan di wilayah [UX 1.21] (dipakai laci; memo pelaksana 21 Okt 02.15 butir 2). */
.p1a-teks2 { color: var(--teks-2); }
.p1a-antara { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.p1a-antara > div { min-width: 0; }
.p1a-tumpuk { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p1a-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.p1a-blok { display: block; }
.p1a-kanan { margin-left: auto; }
.p1a-mode, .p1a-cakupan, .p1a-rek, .p1a-konteks, .p1a-longgar-mapel { display: flex; flex-direction: column; gap: 14px; }
.p1a-tahap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.p1a-langkah { width: 100%; height: 100%; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks); }
.p1a-langkah:hover { border-color: var(--aksen); }
.p1a-langkah:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.p1a-langkah.kini { background: var(--aktif-bg); border-color: var(--aktif); }
.p1a-langkah.dilihat { box-shadow: 0 0 0 2px var(--aksen); border-color: var(--aksen); }
.p1a-nomor { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.p1a-langkah.kini .p1a-nomor { color: var(--aktif); }
.p1a-kotak { border: 1px solid var(--garis); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--cekung); min-width: 0; }
.p1a-kotak.lain { background: var(--lain-bg); border-color: var(--lain-garis); }
.p1a-kotak.info { background: var(--info-bg); border-color: var(--garis); }
.p1a-kotak h3 { margin: 0; font-size: 15px; }
.p1a-kotak ul, .p1a-dialog ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.p1a-urung, .p1a-urung-kepala { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.p1a-urung { padding: 8px 12px; border-radius: 10px; background: var(--cekung); }
.p1a-tabel-rem td.angka, .p1a-tabel-rem th.angka { white-space: nowrap; }
.p1a-baris-buka { text-align: left; }
.p1a-rinci { margin-top: 4px; overflow-wrap: anywhere; }
.p1a-pil-kecil { margin-left: 6px; }
.p1a-hasil-mode:empty, .p1a-hasil-rek:empty, .p1a-hasil:empty { display: none; }
.p1a-dialog form { display: flex; flex-direction: column; gap: 10px; }
.p1a-dialog textarea { width: 100%; min-height: 64px; font-family: var(--huruf); font-size: 14px; }
.p1a-pilihan { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.p1a-pilihan legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.p1a-radio, .p1a-cek { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 400; cursor: pointer; }
.p1a-radio input, .p1a-cek input { width: auto; flex: none; margin-top: 3px; }
dialog.p1a-dialog label.p1a-radio, dialog.p1a-dialog label.p1a-cek { display: flex; }
.p1a-angka-ketik { max-width: 140px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.p1a-terkunci { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; background: var(--cekung); }
.p1a-segmen-radio { display: flex; gap: 8px 16px; flex-wrap: wrap; }
.p1a-pratinjau { display: flex; flex-direction: column; gap: 10px; }
.p1a-meter { height: 8px; border-radius: 999px; background: var(--cekung); overflow: hidden; }
.p1a-meter i { display: block; height: 100%; background: var(--seri-0); }
.p1a-sumber { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; margin: 0; font-size: 14px; }
.p1a-sumber dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.p1a-keputusan { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.p1a-angka-lain { width: 88px; }
.p1a-tabel-rek td.angka { white-space: nowrap; }
.p1a-tabel-rek th { white-space: normal; }
.p1a-tabel-rek td:nth-child(2) { min-width: 200px; }
.p1a-tabel-rek .p1a-keputusan select { max-width: 180px; }
/* SU-P3-03 (DG14): angka panel Rekomendasi (sel tabel, batang sebaran, label pita) berlebar sama. */
.p1a-rek td, .p1a-sebaran, .p1a-label-pita { font-variant-numeric: tabular-nums; }
.p1a-sebaran { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 120px; }
.p1a-batang { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 2px; min-width: 0; }
.p1a-batang i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--seri-0); }
.p1a-batang.ambang i { background: var(--seri-2); }
.p1a-label-pita { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; font-size: 11px; color: var(--redup); text-align: center; font-family: var(--mono); }
.p1a-lipat summary { cursor: pointer; font-weight: 600; }
.p1a-saklar-baris { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 10px 0; border-top: 1px solid var(--garis); }
.p1a-saklar-baris > div { min-width: 0; }
.p1a-saklar-baris p { margin: 2px 0 0; }
.p1a-gulir { overflow-x: auto; max-width: 100%; }
.p1a-tabel-matriks th, .p1a-tabel-matriks td { text-align: center; white-space: nowrap; }
.p1a-tabel-matriks th[scope="row"], .p1a-tabel-matriks thead th:first-child { text-align: left; }
.p1a-tabel-matriks .p1a-kunci { background: var(--cekung); color: var(--redup); }
.p1a-kisi-isian { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.p1a-isian { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; min-width: 0; }
.p1a-isian input, .p1a-isian select, .p1a-isian textarea { width: 100%; font-weight: 400; }
.p1a-penuh { grid-column: 1 / -1; }
.p1a-lanjutan > .p1a-tumpuk { margin-top: 12px; }
.p1a-pil-sesi { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.p1a-pil-gelap { display: inline-flex; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--gelap-redup); color: var(--di-gelap); }
.p1a-pil-gelap.aktif { border-color: var(--di-gelap-aktif); color: var(--di-gelap-aktif); }
.p1a-pil-gelap.lain { border-color: var(--di-gelap-lain); color: var(--di-gelap-lain); }
.tombol.p1a-tombol-gelap { background: transparent; color: var(--di-gelap); border: 1px solid var(--gelap-redup); }
.tombol.p1a-tombol-gelap:hover { background: var(--gelap-2); }
.kepala-sesi-u3 .p1a-urung-kepala { color: var(--di-gelap); }
.p1a-butir .nama-u3 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p1a-butir .mono { overflow-wrap: anywhere; }
.p1a-perlu .panel-kepala { flex-wrap: wrap; }
.p1a-sesi-wadah { display: flex; flex-direction: column; gap: 10px; }
.p1a-sesi-wadah:empty { display: none; }
.p1a-pegangan { display: none; }
.p1a-pengingat { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--info-bg); color: var(--teks-2); }
.p1a-hanya-sempit-390 { display: none; }
@media (max-width: 390px) {
  .p1a-hanya-lebar-390 { display: none; }
  .p1a-hanya-sempit-390 { display: inline; }
}
@media (max-width: 900px) {
  .p1a-tahap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p1a-dua { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .p1a-tahap { grid-template-columns: minmax(0, 1fr); }
  dialog.p1a-lembar { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 82vh; border-radius: 18px 18px 0 0; padding-top: 10px; }
  dialog.p1a-lembar .p1a-pegangan { display: block; }
  dialog.p1a-lembar .p1a-hanya-lebar { display: none; }
  dialog.p1a-lembar .p1a-aksi-lembar { position: sticky; bottom: 0; background: var(--permukaan); padding: 10px 0; border-top: 1px solid var(--garis); }
  dialog.p1a-lembar .p1a-aksi-lembar .tombol { min-height: 44px; flex: 1 1 0; }
  .p1a-sebaran { height: 96px; gap: 3px; }
  .p1a-label-pita { gap: 3px; font-size: 10px; }
  .p1a-saklar-baris { gap: 10px; }
}
/* X30: kabar walisantri di dialog naik ke Satu kelas (hanya baca, paragraf dipertahankan). */
.p1a-kabar { white-space: pre-line; overflow-wrap: anywhere; max-height: 220px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--garis); border-radius: 8px; background: var(--permukaan); }
/* [/P1-A DASBOR] */
/* [P1-C KATALOG] profil anatomi situs, pilar nilai, Inspector, Setelan (KONTRAK-P1-C, kanvas C1 sampai C9). Token saja. */
.p1c-atas { display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; min-width: 0; }
.p1c-atas:empty { display: none; }
.p1c-ubin { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.p1c-pilar-baris { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
td.p1c-kol-pilar .p1c-pilar-baris { display: grid; grid-template-columns: max-content; }
td.p1c-kol-pilar, td.p1c-kol-profil { vertical-align: middle; }
.p1c-kol-profil { min-width: 0; width: 160px; }
.v36-katalog-tabel th.p1c-kol-profil, .v36-katalog-tabel td.p1c-kol-profil { white-space: normal; }
.p1c-kol-profil .pil.p1c-pil-profil { white-space: normal; text-align: left; display: inline-block; max-width: 150px; }
/* Dua kolom baru: di bawah 1600 px kolom Dipakai dan Kartu disembunyikan (isinya tetap di tampilan Kartu dan laci kartu), seperti papan C1. */
@media (max-width: 1599px) {
  .v36-katalog-tabel:has(th.p1c-kol-profil) > * > tr > :nth-child(5), .v36-katalog-tabel:has(th.p1c-kol-profil) > * > tr > :nth-child(6) { display: none; }
}
.p1c-pil-pilar { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--garis); background: var(--cekung); color: var(--teks); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p1c-pil-pilar.belum { background: transparent; border-style: dashed; color: var(--redup); }
.p1c-pil-pilar.usulan { background: var(--permukaan); border-color: var(--aksen); color: var(--aksen-tua); }
.p1c-usulan-kata { color: var(--aksen-tua); }
.p1c-meter { display: inline-flex; gap: 1px; }
.p1c-meter i { display: inline-block; width: 4px; height: 10px; border-radius: 1px; background: var(--garis-kuat); }
.p1c-meter i.isi { background: var(--teks-2); }
.p1c-pil-pilar.usulan .p1c-meter i.isi { background: var(--aksen); }
.p1c-kol-profil .ux121-nama-baris { text-decoration: none; }
.p1c-kol-profil .ux121-nama-baris:hover .pil { box-shadow: 0 0 0 1px var(--aksen); }
.p1c-hp-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 12px 10px; }
.p1c-hp-baris .ux121-nama-baris { text-decoration: none; min-height: 44px; }
.p1c-hp-pilih { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: -12px; cursor: pointer; }
@media (max-width: 640px) { .tautan.p1c-ubah { min-height: 44px; } }
.p1c-pilih-pilar { width: 100%; margin: 4px 0 6px; }
.ux121-kerja.ux121-laci-buka .v36-katalog-tabel th:nth-child(4), .ux121-kerja.ux121-laci-buka .v36-katalog-tabel td:nth-child(4),
.ux121-kerja.ux121-laci-buka .v36-katalog-tabel th:nth-child(5), .ux121-kerja.ux121-laci-buka .v36-katalog-tabel td:nth-child(5),
.ux121-kerja.ux121-laci-buka .v36-katalog-tabel th:nth-child(6), .ux121-kerja.ux121-laci-buka .v36-katalog-tabel td:nth-child(6) { display: none; }
@media (min-width: 1280px) { .ux121-kerja.ux121-laci-buka .v36-katalog-tata { grid-template-columns: minmax(0, 1fr); } .ux121-kerja.ux121-laci-buka .v36-katalog-saring { display: none; } }
.p1c-laci-tab { display: flex; gap: 2px; border-bottom: 1px solid var(--garis); flex: 1 1 100%; min-width: 0; overflow-x: auto; }
.p1c-laci-tab [role="tab"] { font: inherit; font-size: 14px; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; color: var(--redup); cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.p1c-laci-tab [role="tab"][aria-selected="true"] { color: var(--aksen-tua); border-bottom-color: var(--aksen); font-weight: 600; }
.p1c-laci-tab [role="tab"]:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.p1c-tab-isi { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.p1c-antara { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-width: 0; }
.p1c-segmen { align-self: flex-start; }
.p1c-segmen button[aria-checked="true"], .p1c-segmen button[aria-selected="true"] { background: var(--aksen); color: var(--aksen-teks); }
.p1c-lapis-daftar { display: flex; flex-direction: column; gap: 10px; }
.p1c-lapis { border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px 12px; background: var(--permukaan); }
.p1c-lapis > summary { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; min-height: 24px; align-items: center; }
.p1c-lapis > summary::-webkit-details-marker { display: none; }
.p1c-lapis > summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
.p1c-pola-daftar, .p1c-usul-daftar, .p1c-coba-hasil, .p1c-riwayat { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.p1c-pola { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding: 6px 4px; border-top: 1px solid var(--garis); }
.p1c-pola.baru { background: var(--aktif-bg); }
.p1c-pola.hapus .p1c-pola-nilai { text-decoration: line-through; color: var(--redup); }
.p1c-pola-jenis { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); }
.p1c-pola-isi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p1c-pola-nilai { overflow-wrap: anywhere; }
.p1c-coba { background: var(--cekung); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.p1c-coba-baris { display: flex; gap: 8px; }
.p1c-coba-isian { flex: 1 1 auto; min-width: 0; }
.p1c-coba-hasil li { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.p1c-pilar-kartu { border: 1px solid var(--garis); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--permukaan); }
.p1c-pilar-kartu h3 { margin: 0; font-size: 15px; }
.p1c-pilar-kepala { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.p1c-rubrik summary { cursor: pointer; color: var(--aksen-tua); }
.p1c-pilar-baris-rinci { border-top: 1px solid var(--garis); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.p1c-pilar-baris-rinci select, .p1c-usul select { width: 100%; }
.p1c-pilar-baris-rinci.kuning, .p1c-usul.kuning { background: var(--lain-bg); border-color: var(--lain-garis); }
.p1c-usul { border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--permukaan); overflow-wrap: anywhere; }
.p1c-usul.ditolak { background: var(--cekung); color: var(--redup); }
.p1c-tab-isi h3 { font-size: 15px; margin: 6px 0 0; }
.p1c-riwayat li { border-top: 1px solid var(--garis); padding-top: 6px; }
.p1c-inspector { display: flex; flex-direction: column; gap: 10px; }
.p1c-judul-kecil { font-size: 16px; margin: 0; }
.p1c-kotak { border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.p1c-kotak p { margin: 0; }
.p1c-cek { border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.p1c-impor-pratinjau { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
.p1c-impor-mapel { display: flex; flex-wrap: wrap; gap: 6px 14px; border: 0; padding: 0; }
.p1c-set-tata { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
.p1c-set-nav { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px; }
.p1c-set-nav a { padding: 6px 10px; border-radius: 6px; color: var(--teks-2); text-decoration: none; }
.p1c-set-nav a:hover { background: var(--aksen-lembut); }
.p1c-set-isi { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.p1c-set { display: flex; flex-direction: column; gap: 12px; }
.p1c-set-baris { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: 4px 16px; align-items: center; border-top: 1px solid var(--garis); padding-top: 10px; }
.p1c-set-baris label { display: flex; flex-direction: column; gap: 2px; }
.p1c-set-isian { display: flex; align-items: center; gap: 8px; }
.p1c-set-isian input { width: 100%; min-width: 0; }
.p1c-set-galat { grid-column: 1 / -1; color: var(--bahaya); }
.p1c-set-galat:empty { display: none; }
.p1c-sakelar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; border-top: 1px solid var(--garis); padding-top: 10px; }
.p1c-sakelar p { margin: 2px 0 0; }
@media (max-width: 900px) { .p1c-set-tata { grid-template-columns: minmax(0, 1fr); } .p1c-set-nav { position: static; flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 640px) {
  .p1c-ubin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p1c-set-baris { grid-template-columns: minmax(0, 1fr); }
  .p1c-sakelar { grid-template-columns: auto minmax(0, 1fr); }
  .p1c-sakelar > span[data-pil] { grid-column: 2; }
  .p1c-pola { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* [/P1-C KATALOG] */
/* [v3.47 V4a] ubin saring (K10), pil status Chromebook (K11), grafik batang (K12). Token saja. */
.tanda.info { color: var(--info); background: var(--info-bg); }
.v347k-ubin-saring { display: grid; grid-template-columns: repeat(var(--v347k-n, 4), minmax(0, 1fr)); gap: 10px; }
.v347k-ubin { font: inherit; text-align: left; color: var(--teks); background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0; transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.v347k-ubin:hover { border-color: var(--aksen); }
.v347k-ubin[aria-pressed="true"] { border-color: var(--aksen); box-shadow: 0 0 0 1px var(--aksen); }
.v347k-ubin:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.v347k-ubin-nama { font-size: 13px; color: var(--redup); overflow-wrap: anywhere; }
.v347k-ubin[aria-pressed="true"] .v347k-ubin-nama { color: var(--teks); font-weight: 600; }
.v347k-ubin-n { font: 500 26px/1.1 var(--mono); font-variant-numeric: tabular-nums; color: var(--teks); }
.v347k-ubin-n.v347k-n-kosong { color: var(--redup); }
.v347k-ubin-ket { font-size: 12px; color: var(--redup); overflow-wrap: anywhere; }
.v347k-grafik { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v347k-grafik-judul { font-size: 13px; color: var(--redup); }
.v347k-batang-kisi, .v347k-sumbu { display: grid; grid-template-columns: repeat(var(--v347k-jumlah, 1), minmax(0, 1fr)); gap: 4px; }
.v347k-batang-kisi { align-items: end; height: var(--v347k-tinggi, 140px); border-bottom: 1px solid var(--garis-kuat); padding-top: 8px; }
.v347k-batang { display: block; background: var(--seri-0); border-radius: 3px 3px 0 0; }
.v347k-batang.v347k-batang-kosong { background: none; }
.v347k-sumbu { font-size: 11px; color: var(--redup); font-variant-numeric: tabular-nums; }
.v347k-sumbu span { min-width: 0; white-space: nowrap; }
.v347k-sumbu span:last-child { display: flex; justify-content: flex-end; }
@media (max-width: 640px) {
  .v347k-ubin-saring { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v347k-ubin { min-height: 44px; padding: 10px 12px; }
  .v347k-ubin-n { font-size: 22px; }
  .v347k-batang-kisi, .v347k-sumbu { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .v347k-ubin { transition: none; }
}
/* [/v3.47 V4a] */

/* [v3.47 KOMPONEN] paket V4b: pemilihSasaran (K13), pratinjauDampak (K14), tanggaLapis (K15), segmenModeKepatuhan (K17),
   kalenderSepekan (K18). barisAtur (K16) memakai kelas .plh-atur yang sudah ada. Token saja, tanpa warna mentah. */
.v347-memuat { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.v347-memuat .kerangka { gap: 8px; }
.v347-memuat .kerangka-baris { height: 14px; }
.v347-angka { font-variant-numeric: tabular-nums; font-family: var(--mono); }

.v347-sasaran { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v347-sasaran-isi { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v347-sasaran-daftar { max-height: 360px; overflow-y: auto; border: 1px solid var(--garis); border-radius: 10px; padding: 6px; background: var(--permukaan); }
.v347-sasaran-grup + .v347-sasaran-grup { margin-top: 4px; }
.v347-sasaran-grup-judul { font-size: 13px; font-weight: 600; color: var(--teks-2); padding: 4px 6px; cursor: pointer; }
.v347-sasaran-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.v347-sasaran-ul > li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v347-sasaran-anak { padding-left: 18px; border-left: 1px solid var(--garis); margin-left: 10px; }
.v347-sasaran-butir { font: inherit; font-size: 14px; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; min-height: 32px;
  padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--teks); cursor: pointer; transition: background-color .15s; }
.v347-sasaran-butir:hover { background: var(--cekung); }
.v347-sasaran-butir[aria-pressed="true"] { background: var(--aksen-lembut); border-color: var(--aksen); font-weight: 600; }
.v347-sasaran-nama { min-width: 0; overflow-wrap: anywhere; }
.v347-sasaran-baris { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v347-sasaran-baris select, .v347-sasaran-pilihan { max-width: 100%; }
.v347-sasaran-pilihan { flex: 1 1 220px; min-width: 0; }
.v347-sasaran-santri { display: flex; flex-direction: column; gap: 4px; }
.v347-sasaran .isian-akun { flex: none; min-width: 0; }
.v347-sasaran-dipilih { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.v347-syarat-baris { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.v347-syarat-baris legend { font-size: 13px; font-weight: 600; color: var(--teks-2); padding: 0; margin-bottom: 4px; }
.v347-syarat-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.v347-chip { font: inherit; font-size: 13px; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks); cursor: pointer; transition: background-color .15s; }
.v347-chip[aria-pressed="true"] { background: var(--aksen); border-color: var(--aksen); color: var(--aksen-teks); font-weight: 600; }

.v347-pratinjau { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v347-pratinjau-judul { font-size: 14px; }
.v347-pratinjau-angka { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.v347-pratinjau-angka > div { background: var(--cekung); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.v347-pratinjau-angka dt { font-size: 12px; color: var(--redup); }
.v347-pratinjau-angka dd { margin: 0; overflow-wrap: anywhere; }
.v347-pratinjau-angka dd b { font-size: 20px; }
.v347-pratinjau-syarat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

.v347-tangga { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v347-tangga-hasil { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.v347-tangga-ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: lapis; }
.v347-tangga-butir { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 6px 8px; border-radius: 8px; border-left: 3px solid var(--garis); }
.v347-tangga-butir > .kecil:not(.v347-tangga-rinci), .v347-tangga-rinci { grid-column: 2 / -1; overflow-wrap: anywhere; }
.v347-tangga-ikon { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--mati-bg); color: var(--mati); }
.v347-tangga-nama { font-weight: 600; min-width: 0; }
.v347-tangga-kata { font-size: 12px; font-weight: 600; color: var(--redup); }
.v347-lapis-menang { background: var(--aktif-bg); border-left-color: var(--aktif); }
.v347-lapis-menang .v347-tangga-ikon { background: var(--aktif); color: var(--permukaan); }
.v347-lapis-menang .v347-tangga-kata { color: var(--aktif); }
.v347-lapis-kalah { border-left-color: var(--info); }
.v347-lapis-kalah .v347-tangga-ikon { background: var(--info-bg); color: var(--info); }
.v347-lapis-kalah .v347-tangga-kata { color: var(--info); }
.v347-lapis-lewat { color: var(--redup); }
.v347-lapis-lewat .v347-tangga-nama { font-weight: 500; }
.v347-tangga-pengaman .v347-tangga-butir { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

.v347-mode-wadah { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.v347-mode button { transition: background-color .15s; }
.v347-mode button[disabled] { cursor: not-allowed; opacity: .6; }
.v347-mode[aria-busy="true"] { opacity: .8; }
.v347-mode-alasan { color: var(--redup); }

.v347-kal { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v347-kal-nav { justify-content: space-between; align-items: center; }
.v347-kal-judul { margin: 0; font-variant-numeric: tabular-nums; }
.v347-kal-kepala { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 4px; font-size: 12px; font-weight: 600; color: var(--teks-2); }
.v347-kal-hari { text-align: center; overflow-wrap: anywhere; }
.v347-kal-kisi { position: relative; display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 4px; height: 672px; }
.v347-kal-sumbu { position: relative; font-size: 11px; color: var(--redup); font-variant-numeric: tabular-nums; }
.v347-kal-sumbu span { position: absolute; right: 4px; transform: translateY(-50%); }
.v347-kal-sumbu span:first-child { transform: none; }
.v347-kal-kolom { position: relative; background: var(--cekung); border-radius: 8px; min-width: 0; }
.v347-blok { position: absolute; left: 0; width: 100%; font: inherit; font-size: 11px; line-height: 1.25; text-align: left; overflow: hidden; display: flex; flex-direction: column; gap: 1px;
  padding: 2px 4px; border: 1px solid var(--garis); border-radius: 6px; cursor: pointer; transition: background-color .15s, box-shadow .15s; color: var(--teks); background: var(--permukaan); }
.v347-blok[aria-disabled="true"] { cursor: default; }
.v347-blok-nama { font-weight: 600; overflow-wrap: anywhere; }
.v347-kal-kisi .v347-blok-nama, .v347-kal-kisi .v347-blok-jam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v347-blok-jam { font-variant-numeric: tabular-nums; color: var(--teks-2); }
.v347-blok-kbm { background: var(--aksen-lembut); border-color: var(--aksen); }
.v347-blok-luar { background: var(--permukaan); border-color: var(--garis-kuat); }
.v347-blok-libur { background: var(--mati-bg); border-color: var(--garis-kuat); }
.v347-blok-tidur { background: var(--gelap-2); border-color: var(--gelap-garis); color: var(--di-gelap); }
.v347-blok-tidur .v347-blok-jam { color: var(--gelap-redup); }
.v347-blok-ujian { background: var(--info-bg); border-color: var(--info); }
.v347-blok-sesi, .v347-blok-klub, .v347-blok-permintaan, .v347-blok-aturan { background: var(--permukaan); border-color: var(--garis-kuat); border-left-width: 4px; }
.v347-blok-sesi { border-left-color: var(--seri-0); }
.v347-blok-klub { border-left-color: var(--seri-3); }
.v347-blok-permintaan { border-left-color: var(--seri-1); }
.v347-blok-aturan { border-left-color: var(--seri-2); }
.v347-blok-atas { z-index: 1; box-shadow: var(--bayang); }
.v347-blok:hover { box-shadow: 0 0 0 2px var(--aksen); }
.v347-kal-hp { display: none; flex-direction: column; gap: 10px; }
/* Kanvas v38 papan 23 (KL-UX-5): HP satu hari per layar. */
.v347-kal-hp-hari-pilih { display: flex; gap: 4px; }
.v347-kal-hp-hari-pilih button { flex: 1 1 0; min-width: 0; min-height: 44px; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--garis-kuat);
  border-radius: var(--radius-tombol); background: var(--permukaan); color: var(--teks-2); cursor: pointer; padding: 0 2px; }
.v347-kal-hp-hari-pilih button.pilih { background: var(--aksen); border-color: var(--aksen); color: var(--aksen-teks); }
.v347-kal-hp-satu { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v347-kal-hp-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.v347-kal-hp-kepala h4 { margin: 0; font-size: 16px; }
.v347-kal-pita { position: relative; height: 8px; border-radius: 999px; background: var(--cekung); overflow: hidden; }
.v347-kal-pita span { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--aksen); border: 0; }
.v347-kal-pita span.v347-blok-tidur { background: var(--gelap-2); }
.v347-kal-pita-sumbu { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--redup); }
.v347-kal-hp-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v347-kal-hp-blok { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--garis); align-items: start; }
.v347-kal-hp-jam { font-family: var(--mono); font-size: 13px; padding-top: 2px; }
.v347-kal-hp-isi { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 44px; overflow-wrap: anywhere; }
button.v347-kal-hp-isi { font: inherit; text-align: left; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button.v347-kal-hp-isi:hover b { color: var(--aksen); }
.v347-kal-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--teks-2); }
.v347-kal-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.v347-legenda-kotak { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--garis-kuat); }
@media (max-width: 640px) {
  .v347-kal-lebar { display: none; }
  .v347-kal-hp { display: flex; }
  .v347-mode button { min-height: 44px; }
  .v347-sasaran-butir, .v347-chip { min-height: 44px; }
  .v347-kal-nav .tombol, .v347-pratinjau .baris-tombol .tombol { min-height: 44px; }
  .v347-pratinjau-angka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .v347-sasaran-butir, .v347-chip, .v347-mode button, .v347-blok { transition: none; }
}
/* [/v3.47 KOMPONEN] */

/* [v3.47 KEBIJAKAN] paket V11a/V11b: Akses internet › Kebijakan akses (papan 11, 16; V11b 12, 13). Token saja. */
.v347keb { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.v347keb-sasaran { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; min-width: 0; }
.v347keb-kiri, .v347keb-kanan { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v347keb-kiri { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 12px 14px; }
.v347keb-judul-kecil { font-size: 15px; margin: 0; }
.v347keb-kepala-sasaran { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v347keb-kepala-sasaran h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
/* [T2 v3.52] tombol Batasi akses… / Kembalikan… di ujung kanan kepala santri; di HP selebar baris (tinggi 44 px, pedoman 1.17). */
.v347keb-kepala-sasaran > button[data-t2] { margin-left: auto; }
@media (max-width: 640px) { .v347keb-kepala-sasaran > button[data-t2] { margin-left: 0; width: 100%; min-height: 44px; } }
.v352-batasi-hasil:empty { display: none; }
/* [T2 v3.52] dialog pratinjau Batasi akses… (kanvas T2-2): baris judul–isi; di HP judul di atas isi. */
.v352-batasi-pratinjau { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 8px 0 4px; }
.v352-batasi-baris { display: contents; }
.v352-batasi-pratinjau dt { color: var(--teks-2); font-size: 13px; }
.v352-batasi-pratinjau dd { margin: 0; overflow-wrap: anywhere; }
.v352-batasi-ok { color: var(--aktif); }
.v352-batasi-awas { color: var(--bahaya); }
@media (max-width: 640px) { .v352-batasi-pratinjau { grid-template-columns: 1fr; gap: 2px 0; } .v352-batasi-pratinjau dd { margin-bottom: 6px; } }
.v347keb-tabel td { vertical-align: top; }
.v347keb-tabel tr.v347keb-abu > td { color: var(--teks-2); background: var(--latar); }
.v347keb-tabel tr.v347keb-abu .ux121-nama-baris { color: var(--teks-2); }
.v347keb-asal { white-space: nowrap; }
.v347keb-lintas { margin-left: 6px; }
.v347keb-pengaman { border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px 14px; background: var(--permukaan); }
.v347keb-pengaman > summary { cursor: pointer; font-weight: 600; }
.v347keb-dialog { width: min(720px, calc(100vw - 32px)); }
.v347keb-form { display: flex; flex-direction: column; gap: 12px; }
.v347keb-bagian { border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px 12px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.v347keb-bagian > legend { font-weight: 600; padding: 0 4px; }
.v347keb-lanjutan > summary { cursor: pointer; }
.v347keb-isian { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v347keb-isian-baris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v347keb-cek-baris { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.v347keb-cek { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.v347keb-galat-isian { color: var(--bahaya); }
.v347keb-dialog [aria-invalid="true"] { border-color: var(--bahaya); }
.v347keb-ket-simpan:empty, .v347keb-tautan-galat:empty { display: none; }
/* v3.47.1 kanvas v38 papan 18: tab Rincian/Riwayat di laci aturan, garis waktu riwayat, keadaan Menunggu persetujuan. Token saja. */
.v3471-laci-tab { display: flex; flex-direction: column; gap: 12px; }
.v3471-tab { display: flex; gap: 4px; border-bottom: 1px solid var(--garis); }
.v3471-tab-btn { font: inherit; font-size: 14px; font-weight: 600; color: var(--redup); background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; min-height: 40px; cursor: pointer; }
.v3471-tab-btn[aria-selected="true"] { color: var(--aksen); border-bottom-color: var(--aksen); }
.v3471-tab-btn:hover { color: var(--teks); }
.v3471-sorot { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.v3471-sorot p { margin: 0; }
.v3471-siapa { margin: 0; }
.v3471-lini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3471-lini > li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; position: relative; }
.v3471-lini > li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--garis); }
.v3471-lini > li:last-child::before { display: none; }
.v3471-lini p { margin: 2px 0 0; overflow-wrap: anywhere; }
.v3471-titik { width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--aksen); background: var(--permukaan); margin-top: 3px; box-sizing: border-box; }
.v3471-lini > li.sekarang .v3471-titik { background: var(--aksen); }
.v3471-riwayat { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 640px) { .v3471-tab-btn { min-height: 44px; } }
/* v3.47.1 kanvas v38 papan 19: isian Kapan berlaku (hari dan jam) di Tambah aturan. Token saja. */
.v3471-segmen { flex-wrap: wrap; width: fit-content; max-width: 100%; }
.v3471-segmen button { min-height: 40px; }
.v3471-panel-jam { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; background: var(--cekung); border-radius: var(--radius); }
.v3471-label { font-size: 13px; font-weight: 600; color: var(--teks-2); }
.v3471-hari { display: flex; flex-wrap: wrap; gap: 6px; }
.v3471-hari-btn { font: inherit; font-size: 13px; font-weight: 600; min-width: 46px; min-height: 40px; border-radius: 8px; border: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks-2); cursor: pointer; }
.v3471-hari-btn[aria-pressed="true"] { background: var(--aksen); border-color: var(--aksen); color: var(--aksen-teks); }
.v3471-jam-daftar { display: flex; flex-direction: column; gap: 10px; }
.v3471-jam-baris { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; }
.v3471-jam-baris > .v347keb-galat-isian { grid-column: 1 / -1; margin: 0; }
.v3471-ket-tidur { margin: 0; }
.v3471-dampak { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.v3471-dampak p { margin: 0; }
@media (max-width: 640px) {
  .v3471-hari-btn, .v3471-segmen button { min-height: 44px; }
  .v3471-jam-baris { grid-template-columns: minmax(0, 1fr); }
}
.v347keb-anggota { margin: 4px 0 0; padding-left: 18px; }
.v347keb-csv-tolak { margin: 4px 0 0; padding-left: 18px; }
.v347keb-kosong { margin: 6px 0; }
.v347keb-waktu, .v347keb-periksa { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.v347keb-waktu-kepala, .v347keb-periksa-isian { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.v347keb-rinci-blok:empty { display: none; }
.v347keb-rinci-blok { border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px 14px; background: var(--permukaan); display: flex; flex-direction: column; gap: 8px; }
.v347keb-rinci-blok h3 { margin: 0; font-size: 15px; }
@media (max-width: 900px) {
  .v347keb-sasaran { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .v347keb-isian-baris { grid-template-columns: minmax(0, 1fr); }
  .v347keb-tabel thead { display: none; }
  .v347keb-tabel, .v347keb-tabel tbody, .v347keb-tabel tr, .v347keb-tabel td { display: block; width: 100%; }
  .v347keb-tabel tr { border-bottom: 1px solid var(--garis); padding: 8px 0; }
  .v347keb-tabel td { border: 0; padding: 2px 0; }
  .v347keb-tabel td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--teks-2); }
  .v347keb .baris-tombol .tombol, .v347keb-dialog .baris-tombol .tombol { min-height: 44px; }
}
/* [/v3.47 KEBIJAKAN] */

/* [v3.47 CHROMEBOOK] paket V12: papan K347-1 sampai K347-9 (Pemetaan Google, Kepatuhan Chromebook, Santri dibatasi, Per kelas,
   Akses terbatas, Halaman di luar hak, Kiriman ke Google, kartu binaan PDC). Hanya tata letak; komponen memakai kelas K8–K18. Token saja. */
.v347c-kpi { margin: 4px 0; }
.v347c-kelas-daftar { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.v347c-kampus h3 { font-size: 15px; margin: 0 0 8px; }
.v347c-kartu-kisi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.v347c-kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v347c-kartu.ux121-terbuka { background: var(--aksen-lembut); border-color: var(--aksen); }
.v347c-kartu .ux121-nama-baris { text-align: left; }
.v347c-kartu .angka, .v347c-tabel-kelas .angka { font-variant-numeric: tabular-nums; }
.v347c-kelompok { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--garis); min-width: 0; }
.v347c-kelompok h3 { font-size: 15px; margin: 0; }
.v347c-mode-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.v347c-kepala-kartu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v347c-alamat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow: auto; }
.v347c-alamat-baris { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--garis); min-width: 0; }
.v347c-alamat-baris .mono { overflow-wrap: anywhere; flex: 1 1 200px; min-width: 0; }
.v347c-saring { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v347c-santri-batasi ul { margin: 4px 0 0; padding-left: 18px; }
.v347c-binaan-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.v347c-dialog-ekstra:empty { display: none; }
.v347c-usulan .kontrol-keputusan { max-width: 100%; }
@media (max-width: 640px) {
  .v347c-kartu-kisi { grid-template-columns: 1fr; }
  .v347c-alamat-baris .tombol { min-height: 44px; }
}
/* [/v3.47 CHROMEBOOK] */

/* [v3.47 SANTRI] PK-V13 Daftar santri (papan 15) dan status sesi (papan 14). Token saja. */
.v347s-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.v347s-status-sesi .panel-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.v347s-perhatian { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v347s-perhatian li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 6px 0; border-bottom: 1px solid var(--garis); }
.v347s-perhatian li .baris-tombol { margin-left: auto; }
.v347s-arti-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin: 8px 0 0; }
.v347s-arti-dl dd { margin: 0; color: var(--redup); }
.v347s-saring { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0; }
.v347s-saring label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v347s-saring select { min-width: 12rem; max-width: 100%; }
.v347s-jumlah { margin: 8px 0; font-variant-numeric: tabular-nums; }
.v347s-sampai { margin-top: 4px; }
.v347s-sampai input { max-width: 100%; }
.v347s-tautan-dibatasi { display: inline-block; margin-left: 6px; text-decoration: none; }
@media (max-width: 640px) {
  .v347s-saring { flex-direction: column; }
  .v347s-saring select { min-width: 0; width: 100%; }
  .v347s-perhatian li .baris-tombol { margin-left: 0; }
}
/* [/v3.47 SANTRI] */
/* [v3.47 SANTRI] kolom Beda cukup lebar supaya kalimatnya tidak patah per kata (layar lebar saja). */
@media (min-width: 901px) { .v347s-tabel-beda td:nth-child(5) { min-width: 15rem; } .v347s-tabel-beda td:nth-child(6) { min-width: 15rem; } }
/* [/v3.47 SANTRI] */

/* Kanvas v38 papan 24 (v3.47.1): kartu kelas Cara lama / Hanya catat / Cara baru di laci Pemetaan Google. Token saja. */
.v3471-kartu-kelas { display: flex; flex-direction: column; gap: 10px; }
.v3471-kartu-kelas .pesan { margin-top: 0; }
.v3471-cara button { min-height: 40px; }
.v3471-syarat { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; }
.v3471-syarat li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--garis); flex-wrap: wrap; }
.v3471-syarat li > span:first-child { flex: 1 1 220px; min-width: 0; }
.v3471-khusus { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; font-size: 14px; }
.v3471-khusus dd { margin: 0; }
@media (max-width: 640px) {
  .v3471-cara { display: flex; width: 100%; }
  .v3471-cara button { flex: 1 1 0; justify-content: center; min-height: 44px; }
  .v3471-khusus { grid-template-columns: 1fr; }
  .v3471-khusus dd { margin-bottom: 6px; }
}

/* [v3.48 V48-PRIV-1] Teks privasi dan pemberitahuan (kanvas v39 PrivasiSetup). Token saja. */
.v348tp { display: grid; gap: 12px; }
.v348tp-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v348tp-daftar { display: grid; gap: 14px; }
.v348tp-kelompok { display: grid; gap: 6px; }
.v348tp-kelompok-judul { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); margin: 0; }
.v348tp-kelompok-judul .kecil { text-transform: none; letter-spacing: 0; font-weight: 400; }
.v348tp-cuplik { color: var(--teks-2); margin: 4px 0 0; max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v348tp-isian { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--aksen-lembut); color: var(--aksen-tua); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.v348tp-teks { white-space: pre-line; }
.v348tp-riwayat { display: grid; gap: 8px; }
.v348tp-riwayat h3 { margin: 0; font-size: 15px; }
.v348tp-versi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v348tp-versi li { display: grid; gap: 4px; padding: 0 0 8px 12px; border-left: 2px solid var(--garis-kuat); border-bottom: 1px dashed var(--garis); }
.v348tp-versi li.v348tp-versi-kini { border-left-color: var(--aksen); }
.v348tp-versi-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v348tp-kutip { margin: 0; padding: 8px 12px; border-left: 3px solid var(--garis-kuat); background: var(--cekung); font-size: 14px; }
dialog.v348tp-dialog { max-width: 880px; width: calc(100% - 32px); }
.v348tp-dialog-isi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.v348tp-kolom { display: grid; gap: 8px; align-content: start; min-width: 0; }
.v348tp-kolom textarea { width: 100%; }
.v348tp-sisip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v348tp-hitung { margin-left: auto; color: var(--redup); }
.v348tp-galat { color: var(--bahaya); margin: 0; }
.v348tp-pratinjau { border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; }
.v348tp-pratinjau-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px; background: var(--cekung); }
.v348tp-pratinjau-isi { padding: 12px 14px; display: grid; gap: 6px; }
.v348tp-pratinjau-isi h3 { margin: 0; font-size: 15px; }
.v348tp-sorot { margin: 0; padding: 2px 4px; border-radius: 4px; background: var(--lain-bg); outline: 1px solid var(--lain-garis); }
.v348tp-dampak { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
@media (max-width: 760px) {
  .v348tp-dialog-isi { grid-template-columns: 1fr; }
  .v348tp-tabel thead { display: none; }
  .v348tp-tabel tr { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--garis); }
  .v348tp-tabel td { border: 0; padding: 0; }
  .v348tp-dialog .baris-tombol .tombol { min-height: 44px; }
}

/* [DASBOR v1] Dasbor dan laporan v1 (kanvas docs/kanvas-dasbor-v1 D1–D9, DSB-K10). Token saja. */
.dsb1 { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dsb1-kisi-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dsb1-kpi { min-width: 0; display: flex; }
.dsb1-kpi > .ux121-kpi { flex: 1; }
.dsb1-periode { flex-wrap: nowrap; }
.dsb1-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dsb1-dua > .panel { margin: 0; }
.dsb1-meter { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--cekung); margin: 4px 0 8px; }
.dsb1-meter i { display: block; height: 100%; }
.dsb1-meter-a { background: var(--seri-0); }
.dsb1-meter-b { background: var(--garis-kuat); }
.dsb1-meter-ket { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.dsb1-matriks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.dsb1-sel { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); color: var(--teks); text-decoration: none; min-height: 44px; }
.dsb1-sel:hover { border-color: var(--aksen); }
.dsb1-sel:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.dsb1-sel-nama { font-size: 14px; }
.dsb1-sel-angka { font-family: var(--mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.dsb1-sel-baik { border-color: var(--aktif); box-shadow: inset 4px 0 0 var(--aktif); }
.dsb1-sel-perhatian { border-color: var(--lain-garis); box-shadow: inset 4px 0 0 var(--lain); background: var(--lain-bg); }
.dsb1-sel-belum-data, .dsb1-sel-kecil { border-style: dashed; }
.dsb1-sel .tanda { align-self: flex-start; }
.dsb1-kartu-santri { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.dsb1-kartu-santri a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--garis); border-radius: 10px; color: var(--teks); background: var(--permukaan); text-decoration: none; }
.dsb1-kartu-santri a:hover { border-color: var(--aksen); }
.dsb1-tautan { display: flex; gap: 10px; flex-wrap: wrap; }
.dsb1-berjalan { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--lain-garis); background: var(--lain-bg); border-radius: 10px; font-size: 14px; }
.dsb1-status-santri { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* 9B F6: catatan hari terpotong bisa panjang (beberapa tanggal): boleh membungkus, tidak melebarkan halaman HP. */
.dsb1 [data-dsb1-terpotong], .v36-kepala-pil .pil[data-dsb1-terpotong] { white-space: normal; max-width: 100%; height: auto; line-height: 1.4; padding-top: 3px; padding-bottom: 3px; text-align: left; }
.dsb1-tabel td.angka, .dsb1-tabel th.angka { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .dsb1-dua { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .dsb1-kisi-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dsb1-matriks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsb1-kartu-santri { grid-template-columns: minmax(0, 1fr); }
  .dsb1-tautan .tombol { flex: 1 1 100%; min-height: 44px; }
  .dsb1-periode { width: 100%; }
  .dsb1-periode button { flex: 1; min-height: 40px; justify-content: center; }
}
/* [/DASBOR v1] */
/* [P1-D D3] Angkatan dan asrama: tabel silang, garis tren per baris, lencana selisih per sel (kanvas docs/kanvas-p1d P1D-6, P1D-H3). Token saja. */
.p1d3-kepala { flex-wrap: wrap; gap: 8px 16px; }
.p1d3-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--teks-2); }
.p1d3-label select { min-height: 40px; max-width: 100%; }
.p1d3-gulir { overflow-x: auto; max-width: 100%; position: relative; }
.p1d3-tabel-tabel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.p1d3-tabel-tabel > .panel { margin: 0; }
.p1d3-silang { max-width: 720px; }
.p1d3-tabel td, .p1d3-silang td { vertical-align: top; }
.p1d3-sel { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.p1d3-angka { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.p1d3-lencana { align-self: flex-end; white-space: nowrap; font-size: 11px; padding: 1px 8px; }
.p1d3-pendek { display: none; }
.p1d3-th-tren { white-space: nowrap; }
.p1d3-th-sub { display: block; font-size: 11px; font-weight: 400; color: var(--redup); }
.p1d3-td-tren { width: 72px; }
.p1d3-tren .ux121-tren-64 { display: block; }
.p1d3-tren .ux121-tren-120 { display: none; }
.p1d3-tabel th.p1d3-pilih, .p1d3-tabel td.p1d3-pilih { background: var(--aksen-lembut); }
.p1d3-catatan { margin: 8px 0 0; }
.p1d3-status { margin: 4px 0 8px; }
.p1d3-status:empty { display: none; }
.p1d3-status-galat { color: var(--bahaya); }
@media (max-width: 640px) {
  .p1d3-kepala { flex-direction: column; align-items: stretch; }
  .p1d3-label { flex-direction: column; align-items: stretch; gap: 4px; }
  .p1d3-label select { width: 100%; min-height: 44px; }
  .p1d3-panjang { display: none; }
  .p1d3-pendek { display: inline; }
  .p1d3-silang { max-width: none; width: 100%; }
  /* Label cakupan kepala sekolah panjang ("… cakupan belum diatur …") melebarkan halaman HP 518 px; boleh membungkus. */
  .v36-kepala-pil .pil[data-dsb1-label] { white-space: normal; max-width: 100%; height: auto; line-height: 1.4; padding-top: 3px; padding-bottom: 3px; text-align: left; }
}
/* [/P1-D D3] */
/* [v3.52 RAPOR WALI] Rapor wali v1 (kanvas docs/kanvas-rapor-wali RW-3, RW-4): ubin saringan, tabel binaan, kartu kelas Setup. Token saja. */
.rw1-ubin-baris { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.rw1-ubin { font: inherit; color: var(--teks-2); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--garis-kuat); background: var(--permukaan); font-size: 13px; }
.rw1-ubin b { font: 500 26px/1.1 var(--mono); color: var(--teks); font-variant-numeric: tabular-nums; }
.rw1-ubin:hover { border-color: var(--aksen); }
.rw1-ubin[aria-pressed="true"] { border-color: var(--aksen); background: var(--aksen-lembut); color: var(--aksen-tua); }
.rw1-ubin:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.rw1-daftar .panel-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rw1-tabel td.angka, .rw1-tabel th.angka { text-align: right; font-variant-numeric: tabular-nums; }
.rw1-sub { display: block; }
.rw1-kalimat { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--cekung); font-size: 13px; }
.rw1-kalimat ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.rw1-tautan-binaan { margin-top: 6px; }
.rw1-daftar-kelas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
label.rw1-kelas { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; cursor: pointer; }
label.rw1-kelas input { width: 20px; height: 20px; margin: 2px; flex: none; }
label.rw1-kelas .rw1-kelas-n { font-weight: 600; }
label.rw1-kelas .rw1-kelas-k { display: block; }
.rw1-dialog-pratinjau { width: min(460px, 100%); }
.rw1-pratinjau-bingkai { width: 100%; max-width: 390px; height: 70vh; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); display: block; margin: 0 auto; }
@media (max-width: 1100px) { .rw1-ubin-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .rw1-daftar-kelas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .rw1-ubin-baris { grid-template-columns: minmax(0, 1fr); gap: 8px; } .rw1-ubin { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; } }
/* [/v3.52 RAPOR WALI] */
/* [v3.53 WILAYAH teks-setup] panel teks Setup umum (memakai kelas .v348tp-*) dan Setup › Rapor wali › Teks rapor. Token saja. */
.v353ts-isian-daftar { display: grid; gap: 4px; }
.v353ts-isian-butir code { font-family: var(--mono); font-size: 12px; padding: 0 4px; border-radius: 4px; background: var(--cekung); }
.v353ts-pratinjau { align-items: center; flex-wrap: wrap; gap: 8px; }
.v353ts-bahasa { display: inline-flex; align-items: center; gap: 6px; }
.v348tp-sisip .tombol { min-height: 32px; }
@media (max-width: 640px) { .v353ts-pratinjau .tombol { min-height: 44px; } .v348tp-sisip .tombol { min-height: 44px; } }
/* [/v3.53 teks-setup] */
/* [P1-B] Sesi per langkah RPP (kanvas docs/kanvas-p1b, KONTRAK-P1-B). Token saja. */
.p1b-langkah { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--garis); padding-top: 10px; }
.p1b-kisi { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.p1b-lbl { font-size: 13px; font-weight: 600; color: var(--teks-2); }
.p1b-zona { flex-wrap: wrap; }
.p1b-zona button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.p1b-titik { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--teks-2); }
.p1b-zona-merah .p1b-titik { background: var(--bahaya); }
.p1b-zona-kuning .p1b-titik { background: var(--lain); }
.p1b-zona-hijau .p1b-titik { background: var(--aktif); }
.p1b-ket-zona { margin: 4px 0 0; }
.p1b-usulan .tabel-p1b td, .p1b-set .tabel-p1b td { vertical-align: middle; }
.p1b-alat .baris-tombol .tombol { min-height: 44px; }
.p1b-angka { display: grid; grid-template-columns: max-content max-content; gap: 4px 16px; margin: 0; font-size: 14px; }
.p1b-angka dt { color: var(--teks-2); }
.p1b-angka dd { margin: 0; font-weight: 600; }
@media (max-width: 720px) {
  .p1b-kisi { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .p1b-lbl { margin-top: 6px; }
  .p1b-zona { display: flex; flex-direction: column; }
  .p1b-alat .baris-tombol { flex-direction: column; align-items: stretch; }
}
/* [/P1-B] */
/* [P1-D D1] Pilot permintaan akses di kelas terpilih (kanvas docs/kanvas-p1d papan 1–3, H1). Token saja. */
.v36-setelan-butir.pa-d1 { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; min-width: 0; }
.butir-setelan.pa-d1 > div:first-child { flex: 0 0 auto; }
.butir-setelan.pa-d1 { justify-content: flex-start; }
.pa-d1 .pa-d1-kontrol { flex: 0 0 auto; justify-content: flex-start; }
.pa-d1-laporan .dsb1-kpi { flex-direction: column; gap: 6px; }
.pa-d1-laporan [data-indikator="paProfil"] .ux121-kpi-nilai { font-size: 22px; }
.pa-d1 > * { min-width: 0; max-width: 100%; }
.pa-d1-kontrol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pa-d1-kelas:empty { display: none; }
.pa-d1-kelas { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 8px; background: var(--cekung); }
.pa-d1-kelas > p { margin: 0; }
.pa-d1-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-d1-kelas select { width: 100%; max-width: 32rem; min-width: 0; }
.pa-d1-ringkas { margin: 0; color: var(--teks-2); }
.pa-d1-laporan .panel-kepala { align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.pa-d1-laporan .panel-kepala p { margin: 2px 0 0; }
.pa-d1-kenapa { margin-top: 4px; }
.pa-d1-kenapa summary { cursor: pointer; color: var(--aksen); }
@media (max-width: 720px) {
  .pa-d1-segmen { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .pa-d1-segmen button { min-height: 44px; justify-content: flex-start; }
  .pa-d1 .baris-tombol { flex-direction: column-reverse; align-items: stretch; }
  .pa-d1 .baris-tombol .tombol { min-height: 44px; }
}
/* [/P1-D D1] */
/* [v3.54 #16] Laporan di luar Digispace (kanvas docs/kanvas-v354 K16-1..K16-5). Token saja; ubin memakai .dsb1-kisi-kpi (HP 2 × 2) dan kpiBerkonteks. */
.dsb16-panel { display: flex; flex-direction: column; gap: 12px; }
.dsb16-panel > .panel-kepala { margin-bottom: 0; }
.dsb16-ubin > .ux121-kpi, .dsb16-ubin > .ux121-kpi-saring { flex: 1; }
.dsb16-ubin-tautan { display: flex; flex: 1; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--radius); }
.dsb16-ubin-tautan > .ux121-kpi { flex: 1; }
.dsb16-ubin-tautan:hover > .ux121-kpi { border-color: var(--aksen); }
.dsb16-ubin-tautan:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.dsb16-ubin .ux121-kpi-judul { color: var(--teks-2); font-weight: 600; }
.dsb16-kosong { padding: 8px 0; }
.dsb16-pencegahan { margin: 0; }
.dsb16-kemungkinan { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.dsb16-tabel td { vertical-align: top; }
.dsb16-tautan-dasbor { margin: 0; }
@media (max-width: 640px) {
  .dsb16-ubin .ux121-kpi-dasar { overflow-wrap: anywhere; }
  .dsb16-panel .baris-tombol .tombol { min-height: 44px; }
}
/* [/v3.54 #16] */
/* [P1-B K4] Kelas langkah per pola di penyunting P1-C (papan P1B5, P1B-K31..K34). Token saja. */
.p1b-k4-kelas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 4px; }
.p1b-k4-kelas-label { justify-self: start; display: inline-flex; align-items: center; gap: 2px; color: var(--teks-2); white-space: nowrap; }
.p1b-k4-kelas select { width: 100%; max-width: none; min-width: 0; }
.p1b-k4-kelas > .p1b-k4-peringatan, .p1b-k4-kelas > .p1c-set-galat { grid-column: 1 / -1; }
.p1b-k4-peringatan:empty { display: none; }
.p1b-k4-peringatan .v36-pesan-hasil { margin: 0; }
.p1b-k4-peringatan ul { margin: 6px 0 0; padding-left: 18px; }
.p1b-k4-pil { color: var(--teks-2); }
/* [/P1-B K4] */

/* [P1-D D2] Meja kurasi situs (Katalog › Sering dibuka santri; kanvas P1D-4, P1D-5, P1D-H2). Memakai .tabel-ac dan .tabel-akses; token saja. */
.tabel-kurasi-d2 td:not(:last-child) .kontrol-keputusan, .tabel-kurasi-d2 .kontrol-keputusan { max-width: 100%; }
.tabel-kurasi-d2 .kurasi-d2-mapel { display: inline-block; min-width: 9rem; }
.kurasi-d2 > .baris-tombol.kiri, .kurasi-d2 > .v36-pesan-hasil { margin: 8px 0; }
.kurasi-d2-keputusan { margin-top: 24px; }
.ux121-kerja.ux121-laci-buka .tabel-kurasi-d2 td:last-child { min-width: 0; max-width: 11rem; }
.ux121-kerja.ux121-laci-buka .tabel-kurasi-d2 .kurasi-d2-mapel { min-width: 0; }
.ux121-kerja.ux121-laci-buka .tabel-kurasi-d2 .kontrol-keputusan { width: 100%; }
.kurasi-d2-keputusan h3 { margin: 0 0 8px; }
.kurasi-d2-alasan { display: grid; gap: 6px; margin: 12px 0 4px; }
.kurasi-d2-alasan label { font-weight: 600; }
@media (max-width: 640px) {
  table.tabel.tabel-ac.tabel-kurasi-d2 { display: block; overflow: visible; }
  .tabel-kurasi-d2 td:last-child { min-width: 0; }
  .tabel-kurasi-d2 .baris-tombol.rapat { flex-wrap: wrap; }
  .tabel-kurasi-d2 .baris-tombol.rapat .kontrol-keputusan { flex: 1 1 100%; }
  .tabel-kurasi-d2 td.ux121-sekunder { display: flex; gap: 8px; align-items: baseline; }
  .tabel-kurasi-d2 td:not(.sel-cek):not(.sel-id):not(.angka)[data-kolom]::before { display: inline-block; }
}
/* [/P1-D D2] */

/* [P1-D D4] Petunjuk akun luar (kanvas docs/kanvas-p1d P1D-7, P1D-8, P1D-H4). Token saja. */
.d4-petunjuk { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--garis); padding-top: 10px; }
.d4-petunjuk h3 { margin: 0; }
.d4-petunjuk p { margin: 0; }
.d4-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.d4-butir { display: block; padding-left: 22px; position: relative; overflow-wrap: anywhere; }
.d4-butir::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--aktif); font-weight: 700; }
.d4-butir.perlu::before { content: "!"; color: var(--lain); }
.d4-butir .kecil { display: block; color: var(--teks-2); }
.d4-setup { display: flex; flex-direction: column; gap: 12px; }
.d4-setup > .panel-kepala { margin-bottom: 0; }
.d4-sakelar-daftar { display: flex; flex-direction: column; }
.d4-sakelar { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px 24px; padding: 12px 0; border-top: 1px solid var(--garis); }
.d4-sakelar-teks p { margin: 4px 0 0; }
.d4-sakelar-kendali { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.d4-sakelar-baris { display: flex; align-items: center; gap: 10px; }
.d4-lanjutan summary { cursor: pointer; font-weight: 600; }
.d4-variabel-daftar { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.d4-variabel { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.d4-variabel p { margin: 0; }
.d4-meter ul { margin: 4px 0 0; padding-left: 18px; }
@media (max-width: 640px) {
  .d4-sakelar { grid-template-columns: minmax(0, 1fr); }
  .d4-setup .tombol { min-height: 44px; }
}
/* [/P1-D D4] */
/* [P2 STATISTIK] statistik santri v3.59 (papan docs/kanvas-statistik S-1..S-5, S-H1, S-H2). Hanya token var(--…). */
.p2s-kontrol-nyala { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.p2s-kontrol-nyala > p { margin: 0; text-align: right; }
.p2s-kunci { display: flex; gap: 6px; align-items: baseline; max-width: 320px; font-size: 13px; color: var(--teks-2); text-align: left; }
.p2s-kunci-tanda { flex: none; color: var(--lain); font-weight: 700; }
.p2s-terpenuhi { margin: 0; color: var(--aktif); }
.p2s-pembaca { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 360px; }
.p2s-chip-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.p2s-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--cekung);
  border: 1px solid var(--garis); color: var(--teks); font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.p2s-chip button { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--teks-2); cursor: pointer; }
.p2s-chip button:hover, .p2s-chip button:focus-visible { background: var(--mati-bg); color: var(--teks); }
.p2s-tambah { display: flex; gap: 6px; }
.p2s-tambah input { flex: 1 1 auto; min-width: 0; }
.p2s-galat-isian:empty, .p2s-fims:empty { display: none; }
.p2s-galat-isian .v36-pesan-hasil { margin-top: 0; }
.p2s-galat-kontrol { flex: 1 1 100%; }
.p2s-kode { font-family: var(--mono); font-size: 12px; background: var(--aksen-lembut); color: var(--aksen-tua); border-radius: 4px; padding: 0 4px; }
.p2s-catatan-batas { display: flex; gap: 6px; align-items: baseline; margin: 6px 0 0; }
.p2s-ke-teks { margin: 8px 0 0; }
dialog.p2s-dialog-nyala { max-width: 820px; width: calc(100% - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
.p2s-dialog-nyala h3 { font-size: 14px; margin: 0 0 4px; }
.p2s-kisi-dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.p2s-kotak { border: 1px solid var(--garis); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--teks); }
.p2s-kotak ul { margin: 0 0 8px; padding-left: 18px; }
.p2s-kotak li + li { margin-top: 4px; }
.p2s-draf-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.p2s-isian-draf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.p2s-isian-draf label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--teks-2); }
.p2s-isian-draf input { width: 100%; }
.p2s-draf { border: 1px dashed var(--garis-kuat); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p2s-label { font-family: var(--mono); font-size: 11px; color: var(--redup); overflow-wrap: anywhere; }
dialog p.p2s-paragraf, .p2s-paragraf { margin: 2px 0 0; color: var(--teks); white-space: pre-line; overflow-wrap: anywhere; }
.p2s-paragraf-judul { font-weight: 600; }
.p2s-isian { background: var(--aksen-lembut); color: var(--aksen-tua); border-radius: 4px; padding: 0 3px; }
.p2s-isian.kosong { background: var(--lain-bg); color: var(--lain); }
.p2s-salin { align-items: center; }
.p2s-hasil-salin .v36-pesan-hasil { margin: 0; }
.p2s-teks-bungkus { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.p2s-saring { align-self: flex-start; }
.p2s-teks-statistik { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.p2s-belum-tampil { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.p2s-belum-tampil p { margin: 0; }
.p2s-gabungan { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--garis); padding-top: 12px; }
.p2s-gabungan p { margin: 0; }
.p2s-santri { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.p2s-santri p { margin: 0; }
.p2s-santri-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.p2s-santri-kepala h3 { margin: 0; }
.p2s-garis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.p2s-garis li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.p2s-titik { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--aksen); }
.p2s-titik.keluar { background: var(--emas-tua); }
.p2s-titik.pindah { background: transparent; border: 2px dashed var(--garis-kuat); }
.p2s-aksi { align-items: center; }
.p2s-form { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--garis); border-radius: 10px; padding: 12px; min-width: 0; }
.p2s-form h4 { margin: 0 0 4px; font-size: 15px; }
.p2s-form label { font-size: 13px; font-weight: 600; color: var(--teks); }
.p2s-form input[type=date], .p2s-form textarea { width: 100%; }
.p2s-golongan { border: 0; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.p2s-golongan legend { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); padding: 0; margin-bottom: 4px; }
.p2s-form label.p2s-radio { display: flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 400; }
.p2s-akibat { background: var(--cekung); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--teks); }
.p2s-akibat ul { margin: 4px 0 0; padding-left: 18px; }
.p2s-hasil .v36-pesan-hasil { margin-top: 0; }
.p2s-sumber { flex: 1 1 100%; border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; min-width: 0; }
.p2s-centang { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; color: var(--teks); cursor: pointer; }
.p2s-centang:has(input:disabled) { color: var(--teks-2); cursor: default; }
.p2s-kontrol-ket { flex: 1 1 100%; color: var(--teks-2); }
.p2s-biaya { margin: 4px 0 0; }
.p2s-biaya .angka { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* S-6..S-9, H3, H4: riwayat, data angkatan, tren per angkatan */
.p2s-riwayat { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p2s-riwayat p, .p2s-kohort p, .p2s-angkatan p { margin: 0; }
.p2s-riwayat-kepala { display: flex; flex-direction: column; gap: 2px; }
.p2s-riwayat-kepala h2 { margin: 0; }
.p2s-rentang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p2s-rentang-label { font-size: 13px; color: var(--teks-2); }
.p2s-rentang-pilih { display: none; }
.p2s-rentang-segmen button[aria-busy="true"] { opacity: .7; cursor: progress; }
.p2s-redup { opacity: .55; transition: opacity .15s; }
.p2s-riwayat-ubin .ux121-kerja { min-width: 0; }
.p2s-riwayat-kisi { margin-bottom: 8px; }
.p2s-tampil-lain { display: none; }
.p2s-garis-laci { display: flex; flex-direction: column; gap: 2px; }
.p2s-garis-laci-svg { width: 100%; height: 72px; overflow: visible; }
.p2s-garis-laci-bulan { display: flex; justify-content: space-between; font-size: 11px; color: var(--redup); }
.p2s-laci-judul { font-size: 14px; margin: 4px 0 0; }
.p2s-lipat { border-top: 1px solid var(--garis); padding-top: 8px; }
.p2s-lipat > summary { cursor: pointer; list-style-position: inside; min-height: 32px; display: flex; align-items: center; gap: 6px; }
.p2s-lipat > summary h3 { display: inline; margin: 0; font-size: 15px; }
.p2s-lipat-isi { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 4px; min-width: 0; }
.p2s-riwayat-lain { display: flex; flex-direction: column; gap: 4px; }
.p2s-dl { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 14px; }
.p2s-dl dt { color: var(--teks-2); }
.p2s-dl dd { margin: 0; color: var(--teks); overflow-wrap: anywhere; }
.p2s-dua-kolom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.p2s-dua-kolom h4, .p2s-semester h4 { margin: 0 0 4px; font-size: 14px; }
.p2s-tabel-kecil { font-size: 13px; }
.p2s-riwayat .angka, .p2s-kohort .angka, .p2s-angkatan .angka, .p2s-santri .angka { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.p2s-sebab ul { margin: 4px 0 0; padding-left: 18px; }
.p2s-semester { display: flex; flex-direction: column; gap: 4px; }
.p2s-kohort, .p2s-angkatan { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p2s-pemilih-kohort { border: 1px solid var(--garis); border-radius: 10px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.p2s-pemilih-kohort legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.p2s-kohort-aksi, .p2s-angkatan-pilih { align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.p2s-sel { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0; }
.p2s-sel-sembunyi { display: inline-block; font-size: 12px; color: var(--redup); border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.p2s-sel-sembunyi.pelengkap { border: 1px solid var(--garis-kuat); color: var(--teks-2); }
.p2s-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.p2s-tabel-kohort th[scope="row"] { font-weight: 600; text-align: left; }
@media (max-width: 640px) {
  .p2s-sumber { grid-template-columns: minmax(0, 1fr); }
  .p2s-rentang-segmen { display: none; }
  .p2s-rentang-pilih { display: block; flex: 1 1 auto; min-height: 44px; }
  .p2s-riwayat-kisi:not(.semua) .p2s-hp-lain { display: none; }
  .p2s-tampil-lain { display: inline-flex; min-height: 44px; width: 100%; justify-content: center; }
  .p2s-lipat > summary { min-height: 44px; }
  .p2s-dl { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .p2s-dl dd { margin-bottom: 6px; }
  .p2s-dua-kolom { grid-template-columns: minmax(0, 1fr); }
  .p2s-kohort .tombol, .p2s-kohort select, .p2s-angkatan select, .p2s-riwayat .tombol { min-height: 44px; }
  .p2s-sel { align-items: flex-start; }
  .p2s-centang { min-height: 44px; }
  .p2s-kisi-dua, .p2s-isian-draf { grid-template-columns: minmax(0, 1fr); }
  .p2s-kontrol-nyala { align-items: stretch; }
  .p2s-kontrol-nyala > p { text-align: left; }
  .p2s-kontrol-nyala .segmen button, .p2s-pembaca .tombol, .p2s-tambah input, .p2s-santri .tombol, .p2s-form .tombol,
  .p2s-form input[type=date], .p2s-dialog-nyala .tombol, .p2s-dialog-nyala input, .p2s-saring button { min-height: 44px; }
  .p2s-chip button { width: 44px; height: 44px; }
  .p2s-pembaca { max-width: none; }
  .p2s-form label.p2s-radio { min-height: 44px; }
  .p2s-form-tombol .tombol { flex: 1 1 auto; }
  /* S-H1: komponen Setup umum (ⓘ, isian angka, pilihan, tautan tombol) diperbesar hanya di kelompok Statistik santri. */
  [data-statistik-setup-p2] .ikon-info { width: 44px; height: 44px; margin: -11px -11px -11px -9px; }
  [data-statistik-setup-p2] input[type=number], [data-statistik-setup-p2] select { min-height: 44px; }
  [data-statistik-setup-p2] button.tautan { display: inline-flex; align-items: center; min-height: 44px; }
}
/* [/P2 STATISTIK] */

/* [P2 PENJAGA] Penjaga ketik (kanvas docs/kanvas-p2 P2-1..P2-12, H1..H6; P2J-K25..K35). Token saja; komponen yang ada
   (segmen radiogroup, v37-saklar, laci 1.21a, ux121-kpi, nav-setup). */
.pj-tata { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.pj-tata .nav-setup a { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pj-tata .nav-setup a .pj-nav-ket { font-size: 12px; color: var(--redup); font-variant-numeric: tabular-nums; }
.pj-bagian-pilih { display: none; }
.pj-isi { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pj-isi > .panel { margin: 0; }
.pj-butir { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 8px 24px; padding: 12px 0; border-top: 1px solid var(--garis); align-items: start; }
.pj-butir p { margin: 4px 0 0; }
.pj-kendali { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.pj-sebaris { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pj-angka-isian { width: 110px; }
.pj-tingkat { width: 100%; border-collapse: collapse; }
.pj-tingkat th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); padding: 8px 8px; border-bottom: 1px solid var(--garis); }
.pj-tingkat td { padding: 10px 8px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
.pj-tingkat tr.diubah > td:first-child { box-shadow: inset 3px 0 0 var(--lain); }
.pj-tingkat tr.pj-sub > td { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); padding-top: 14px; }
.pj-tingkat .segmen button { padding: 5px 10px; font-size: 13px; }
.pj-tingkat .segmen button.pj-turun { box-shadow: inset 0 -3px 0 var(--lain); }
.pj-alasan-tetap { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--cekung); font-size: 13px; color: var(--teks-2); }
.pj-alasan-isian { display: flex; flex-direction: column; gap: 4px; }
.pj-alasan-isian textarea { width: 100%; box-sizing: border-box; }
.pj-tabel-cegah { width: 100%; }
.pj-tabel-cegah td.pj-turun-sel { color: var(--lain); }
.pj-host { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pj-coba { background: var(--cekung); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pj-coba-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pj-coba-dua > div { background: var(--permukaan); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pj-coba-baris { display: flex; gap: 8px; flex-wrap: wrap; }
.pj-coba-baris input { flex: 1 1 240px; min-width: 0; }
.pj-kategori-kata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pj-kategori-kata > section { border: 1px solid var(--garis); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pj-pola { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pj-pola li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--garis); overflow-wrap: anywhere; }
.pj-pratinjau { border: 1px dashed var(--garis-kuat); border-radius: 10px; padding: 10px 12px; font-size: 14px; background: var(--permukaan); }
.pj-teks-tabel td, .pj-teks-tabel th { overflow-wrap: anywhere; }
.pj-daftar-alat { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pj-daftar-alat input[type=search] { flex: 1 1 220px; max-width: 320px; min-width: 0; }
.pj-daftar-alat .pj-jumlah { margin-left: auto; font-size: 13px; color: var(--redup); font-variant-numeric: tabular-nums; }
.pj-harian td, .pj-harian th { padding: 6px 6px; font-size: 13px; }
.pj-butir-korban, .pj-butir-docs { display: flex; flex-direction: column; gap: 6px; }
.pj-butir-docs fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pj-butir-docs label.pj-pilih { display: flex; gap: 8px; align-items: center; min-height: 32px; }
.pj-segera { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pj-segera li { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--garis); }
.pj-matriks select { width: 100%; }
.pj-matriks td.pj-batas { font-size: 13px; color: var(--teks-2); }
.pj-matriks tr.diubah > td:first-child { box-shadow: inset 3px 0 0 var(--lain); }
@media (max-width: 900px) {
  .pj-tata { grid-template-columns: minmax(0, 1fr); }
  .pj-tata > .nav-setup { display: none; }
  .pj-bagian-pilih { display: flex; flex-direction: column; gap: 4px; }
  .pj-bagian-pilih select { width: 100%; }
}
@media (max-width: 640px) {
  .pj-butir { grid-template-columns: minmax(0, 1fr); }
  .pj-meter, .pj-coba-dua, .pj-kategori-kata { grid-template-columns: minmax(0, 1fr); }
  .pj-tingkat thead { display: none; }
  .pj-tingkat, .pj-tingkat tbody, .pj-tingkat tr, .pj-tingkat td { display: block; width: 100%; box-sizing: border-box; }
  .pj-tingkat tr:not(.pj-sub) { border: 1px solid var(--garis); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
  .pj-tingkat td { border: 0; padding: 4px 0; }
  .pj-tingkat td[data-kolom]::before { content: attr(data-kolom); display: block; font-size: 12px; color: var(--redup); margin-bottom: 4px; }
  .pj-tingkat .segmen { display: flex; width: 100%; }
  .pj-tingkat .segmen button { flex: 1 1 0; min-height: 44px; justify-content: center; }
  .pj-isi .tombol, .pj-dasbor .tombol, .pj-laci .tombol { min-height: 44px; }
  .pj-isi .segmen button { min-height: 44px; }
  .pj-daftar-alat .pj-jumlah { margin-left: 0; }
}
/* [/P2 PENJAGA] */
/* [P2 LEVEL] tampilan P2-1 level warga digital (kanvas docs/kanvas-p2-level, sah 04.15). Token saja, tanpa warna mentah, tanpa kelas tombol baru. */
.p2l-panel { display: flex; flex-direction: column; gap: 12px; }
.p2l-kepala { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.p2l-judul { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.p2l-kpi3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.p2l-kpi3.p2l-kpi4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p2l-kpi3 > .ux121-kpi, .p2l-ubin > .ux121-kpi { width: 100%; min-height: 0; }
.p2l-mini { display: block; font-size: 12px; line-height: 1.45; color: var(--redup); }
.p2l-tabel td, .p2l-tabel th { vertical-align: top; }
.p2l-usul select { max-width: 280px; width: 100%; }
.p2l-arah { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.p2l-panah { color: var(--redup); flex: none; }
.p2l-prioritas td:first-child { box-shadow: inset 3px 0 0 var(--lain); }
.p2l-tabel .pil { white-space: normal; }
.p2l-hasil { display: flex; flex-direction: column; gap: 8px; }
.p2l-hasil-butir { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.p2l-hasil-butir li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.p2l-kuadran { display: inline-grid; grid-template-columns: repeat(2, 24px); grid-auto-rows: 18px; gap: 2px; vertical-align: middle; flex: none; }
.p2l-kuadran i { display: grid; place-items: center; font: 600 9px/1 var(--mono); white-space: nowrap; font-style: normal; color: var(--redup); background: var(--cekung); border-radius: 3px; }
.p2l-kuadran i.ini { background: var(--aksen); color: var(--aksen-teks); }
.p2l-kq { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.p2l-info { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--info-bg); color: var(--teks); font-size: 13px; }
.p2l-kutip { margin: 4px 0; padding-left: 10px; border-left: 3px solid var(--garis); color: var(--teks-2); font-size: 14px; overflow-wrap: anywhere; }
.p2l-tanda { display: flex; flex-direction: column; gap: 6px; }
.p2l-tanda p { margin: 0; }
.p2l-alasan { display: flex; flex-direction: column; gap: 4px; }
.p2l-alasan textarea { width: 100%; min-height: 64px; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--garis-kuat); border-radius: 8px; background: var(--permukaan); color: var(--teks); resize: vertical; }
.p2l-label { font-weight: 600; color: var(--teks); }
.p2l-alasan-massal { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.p2l-muat { display: flex; flex-direction: column; gap: 8px; }
.p2l-muat .p2l-pendek { width: 60%; }
.p2l-tab { display: flex; gap: 2px; border-bottom: 1px solid var(--garis); flex-wrap: wrap; }
.p2l-tab button { font: inherit; font-size: 14px; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; color: var(--redup); cursor: pointer; min-height: 40px; }
.p2l-tab button[aria-selected="true"] { color: var(--teks); border-bottom-color: var(--aksen); font-weight: 600; }
.p2l-skor3 { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.p2l-skor { display: inline-flex; flex-direction: column; gap: 0; }
.p2l-skor b { font-size: 18px; font-variant-numeric: tabular-nums; }
.p2l-tabel-kecil { font-size: 13px; width: 100%; }
.p2l-tabel-kecil td, .p2l-tabel-kecil th { padding: 6px 8px; }
.p2l-poin td { vertical-align: top; }
.p2l-redup td { color: var(--redup); }
.p2l-bobot { display: inline-flex; flex-direction: column; gap: 3px; min-width: 52px; }
.p2l-batang { display: block; height: 4px; background: var(--cekung); border-radius: 2px; overflow: hidden; }
.p2l-batang i { display: block; height: 100%; background: var(--seri-0); }
.p2l-rumus { font-family: var(--mono); color: var(--teks); }
.p2l-riwayat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.p2l-riwayat li { border-bottom: 1px solid var(--garis); padding-bottom: 8px; }
.p2l-riwayat p { margin: 2px 0; }
.p2l-riwayat-kepala { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.p2l-radio { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.p2l-radio label { display: flex; gap: 8px; align-items: center; min-height: 32px; }
.p2l-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.p2l-isian-pendek { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.p2l-isian-pendek input { width: 100%; }
.p2l-baik { color: var(--aktif); }
.p2l-buruk { color: var(--bahaya); }
.p2l-setup { display: flex; flex-direction: column; gap: 12px; }
.p2l-isian-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.p2l-isian-kisi > .bungkus-tabel, .p2l-isian-kisi > p, .p2l-isian-kisi > .p2l-isian:has(table) { grid-column: 1 / -1; }
.p2l-isian { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px; }
.p2l-isian label { font-weight: 600; }
.p2l-isian-nilai { display: flex; gap: 8px; align-items: center; }
.p2l-isian-nilai input[type="number"] { width: 110px; }
.p2l-isian-nilai input[type="text"], .p2l-isian-nilai select { width: 100%; max-width: 320px; }
.p2l-akibat { margin: 0; }
.p2l-akibat ul { margin: 4px 0 0; padding-left: 18px; }
.p2l-kisi input[type="number"] { width: 76px; }
.p2l-kisi th[scope="row"] { font-weight: 600; text-align: left; }
.p2l-sakelar-baris { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--garis); }
.p2l-sakelar-baris p { margin: 2px 0 0; }
.p2l-sakelar { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600; background: transparent; border: 0; color: var(--teks); cursor: pointer; min-height: 40px; flex: none; }
.p2l-sakelar-tombol { width: 40px; height: 22px; border-radius: 11px; background: var(--garis-kuat); position: relative; flex: none; }
.p2l-sakelar-tombol::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--permukaan); transition: left .15s; }
.p2l-sakelar.nyala .p2l-sakelar-tombol { background: var(--aktif); }
.p2l-sakelar.nyala .p2l-sakelar-tombol::after { left: 21px; }
.p2l-sakelar[aria-disabled="true"] { cursor: not-allowed; color: var(--redup); }
.p2l-sakelar[aria-disabled="true"] .p2l-sakelar-tombol { opacity: .55; }
.p2l-hak { font-size: 13px; }
.p2l-hak th, .p2l-hak td { padding: 6px 6px; vertical-align: top; }
.p2l-hak thead th span { display: block; }
.p2l-hak select { width: 100%; min-width: 0; font-size: 13px; }
.p2l-hak td { min-width: 118px; }
.p2l-hak thead .mono { text-transform: none; letter-spacing: 0; font-weight: 400; }
.p2l-sel { display: flex; flex-direction: column; gap: 2px; }
.p2l-hak-tetap td, .p2l-hak-tetap th { background: var(--cekung); }
.p2l-hak-hp { display: none; flex-direction: column; gap: 10px; }
.p2l-hak-isian { display: grid; grid-template-columns: minmax(0, 1fr) 178px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--garis); font-size: 14px; }
.p2l-hak-isian select { width: 100%; }
.p2l-total th, .p2l-total td { font-weight: 600; border-top: 1px solid var(--garis-kuat); }
.p2l-hasil-setup:empty { display: none; }
/* [LEVEL HITUNG ULANG] UR-HU1: tempat hasil bagian Tanggal yang belum terhitung punya kelas sendiri (bukan p2l-hasil-setup) supaya hasil gerbang tetap satu per kartu. */
.p2l-hasil-tertahan:empty { display: none; }
@media (max-width: 900px) {
  .p2l-kpi3, .p2l-kpi3.p2l-kpi4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p2l-hak-lebar { display: none; }
  .p2l-hak-hp { display: flex; }
}
@media (max-width: 640px) {
  .p2l-isian-kisi, .p2l-dua { grid-template-columns: 1fr; }
  .p2l-usul thead { display: none; }
  .p2l-usul tr { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--garis); }
  .p2l-usul td { border: 0; padding: 0; }
  .p2l-usul td:not(:first-child) { grid-column: 2; }
  .p2l-usul select { max-width: none; min-height: 44px; }
  .p2l-panel .tombol, .p2l-setup .tombol, .ux121-laci .tombol { min-height: 44px; }
  .p2l-sakelar-baris { flex-direction: column; align-items: flex-start; }
}
/* [/P2 LEVEL] */
/* [P2 LEVEL] buku poin sebagai daftar (laci 400 px). */
.p2l-skor3 { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.p2l-poin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.p2l-poin li { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--garis); }
.p2l-poin-kepala { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.p2l-poin-teks { color: var(--teks); }
.p2l-poin-angka { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.p2l-poin-angka > span { display: inline-flex; flex-direction: column; gap: 1px; }
.p2l-redup .p2l-poin-teks, .p2l-redup b { color: var(--redup); }
/* [/P2 LEVEL] */
/* [P2 LEVEL] J-LVT P2L-T11..T13: renderer daftar-pilihan dan daftar-email, bilah kemajuan tahap tayang, daftar kekurangan. */
.p2l-cek-daftar { display: flex; flex-direction: column; gap: 6px; }
.p2l-isian .p2l-cek-daftar label { display: flex; flex-direction: row; gap: 8px; align-items: center; min-height: 32px; font-weight: 400; }
.p2l-tahap-teks { display: flex; flex-direction: column; gap: 2px; }
.p2l-label-grup { font-weight: 600; }
.p2l-isian-akun { flex: 1; min-width: 0; }
.p2l-kemajuan { margin-top: 6px; max-width: 320px; }
.p2l-kurang { margin: 6px 0 0; padding-left: 20px; }
/* [/P2 LEVEL] */
/* [P2 LEVEL] pilihan radio di laci dan dialog (menimpa gaya label kolom). */
.ux121-laci .p2l-radio label, dialog .p2l-radio label { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; font-weight: 400; gap: 8px; }
.ux121-laci .p2l-radio input, dialog .p2l-radio input { width: auto; min-height: 0; margin: 0; flex: none; }
/* [/P2 LEVEL] */
/* [v3.53 WILAYAH persetujuan-wali] Persetujuan walisantri lewat surat (kanvas docs/kanvas-persetujuan-wali PW-8; adendum v3.53 surat):
   KPI netral, surat diterima per kelas, kartu kebijakan unit, bilah alat, tabel bercentang (kartu di HP, bilah tombol menempel), dialog
   satu centang dan dialog isian, laci (bukti per bagian, Rapor wali per alamat), Setup (sifat, kebijakan unit, teks surat). Token saja,
   tanpa merah; pil status netral. */
.pw1-kpi-kisi { margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 820px; }
.pw1-kpi { display: flex; flex-direction: column; min-width: 0; }
.pw1-kpi > .ux121-kpi { flex: 1; }
/* Surat diterima per kelas (lipatan). */
.pw1-perkelas > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; min-height: 32px; }
.pw1-perkelas[open] > summary { margin-bottom: 10px; }
.pw1-perkelas > p { margin: 8px 0 0; }
.pw1-tabel-kelas td:first-child { white-space: nowrap; }
.pw1-tabel-kelas td.angka, .pw1-tabel-kelas th.angka, .pw1-tabel-dampak td.angka, .pw1-tabel-dampak th.angka { text-align: right; font-variant-numeric: tabular-nums; }
.pw1-pecahan { display: block; color: var(--teks-2); font-size: 12px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pw1-kelas-tombol { font-weight: 600; text-align: left; }
/* Kartu kebijakan unit. */
.pw1-kebijakan .panel-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; }
.pw1-kebijakan .panel-kepala h2 { margin: 0; }
.pw1-kebijakan-daftar { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.pw1-kebijakan-daftar li { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); }
.pw1-kebijakan-daftar li .tombol { align-self: flex-start; }
.pw1-kebijakan-teks { display: grid; gap: 4px; font-size: 14px; }
.pw1-atas { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.pw1-hasil-kebijakan:empty, .pw1-pt-hasil:empty, .pw1-hasil-setup:empty { display: none; }
.pw1-hasil-kebijakan, .pw1-pt-hasil { margin: 10px 0 0; }
.pw1-pt-hasil { margin: 0 0 10px; }
/* Pil Dinonaktifkan: netral bergaris penuh dengan titik berlubang (beda dari Belum aktif yang bergaris putus). */
.pil.pw1-pil-non { background: transparent; border: 1px solid var(--garis-kuat); }
.pil.pw1-pil-non::before { background: transparent; border: 1.5px solid currentColor; width: 5px; height: 5px; }
/* PW-8: bilah alat, tabel bercentang, hasil di tempat. */
.pw1-alat { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 12px; }
.pw1-alat .spasi { flex: 1; }
.pw1-isian { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--teks-2); }
.pw1-isian select, .pw1-isian input { min-height: 40px; font-weight: 400; }
.pw1-isian input[type="search"] { width: 180px; max-width: 100%; }
.pw1-isian select { max-width: 240px; }
.pw1-pt-aksi { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pw1-tabel-pt td { vertical-align: middle; }
.pw1-tabel-pt tr.pw1-dipilih td { background: var(--aksen-lembut); }
.pw1-cek { width: 40px; }
.pw1-cek input { width: 20px; height: 20px; margin: 2px; }
.pw1-nama { font-weight: 600; }
.pw1-sejak { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw1-jumlah, .pw1-catatan { margin: 8px 0 0; }
.pw1-semua-hp { align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.pw1-semua-hp input { width: 24px; height: 24px; margin: 0; }
/* Dialog Aktifkan/Nonaktifkan: konfirmasi(…, bahaya = false) + kalimat Setup + daftar nama + satu kotak centang wajib (PW-8b/c). */
#dialog-konfirmasi.pw1-dialog { max-width: 520px; }
.pw1-kalimat-server { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--garis-kuat); background: var(--cekung); border-radius: 0 8px 8px 0; }
.pw1-daftar-nama { list-style: none; margin: 8px 0; padding: 0; max-height: 216px; overflow: auto; border: 1px solid var(--garis); border-radius: 10px; }
.pw1-daftar-nama li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--garis); }
.pw1-daftar-nama li:last-child { border-bottom: 0; }
.pw1-ket-daftar { margin: 0 0 8px; }
label.pw1-wajib, label.pw1-centang { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--garis-kuat); border-radius: 10px;
  background: var(--cekung); font-weight: 600; cursor: pointer; }
label.pw1-wajib input, label.pw1-centang input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
/* Dialog isian (kebijakan unit, Rapor wali, terbit, simpan Setup). */
dialog.pw1-dialog-isian h3 { font-size: 14px; margin: 12px 0 6px; }
dialog.pw1-dialog-isian label.pm-isian { display: grid; gap: 4px; margin: 10px 0 4px; }
dialog.pw1-dialog-isian textarea { width: 100%; }
.pw1-radio { border: 1px solid var(--garis); border-radius: 10px; padding: 8px 12px; margin: 8px 0; display: grid; gap: 6px; }
.pw1-radio legend { padding: 0 4px; font-size: 13px; color: var(--teks-2); }
.pw1-radio label { min-height: 32px; align-items: center; }
.pw1-dampak { margin: 10px 0; }
.pw1-dampak p { margin: 0 0 6px; }
.pw1-dampak-gulir { max-height: 200px; overflow: auto; border: 1px solid var(--garis); border-radius: 10px; }
.pw1-tabel-dampak { margin: 0; }
.pw1-tabel-dampak th { position: sticky; top: 0; background: var(--permukaan); }
.pw1-ubah-daftar { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px; }
.pw1-alamat-dialog { margin: 4px 0 8px; }
/* Laci per santri. */
.pw1-laci-jenis h3, .pw1-laci-rapor h3, .pw1-riwayat-wadah h3 { font-size: 14px; margin: 0 0 6px; }
.pw1-per-jenis, .pw1-rapor { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pw1-per-jenis li, .pw1-rapor li { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); }
.pw1-rapor li .tombol { justify-self: start; }
.pw1-rapor .mono { overflow-wrap: anywhere; }
.pw1-tautan-binaan { margin-top: 6px; }
/* Setup › Persetujuan walisantri. */
.pw1-setup-kepala { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pw1-setup-kepala p { margin: 0; flex: 1 1 320px; }
.pw1-setup-baris { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; padding: 12px 0; border-top: 1px solid var(--garis); }
.pw1-setup-baris p { margin: 4px 0 0; }
.pw1-setup-kontrol { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pw1-setup-kontrol select, .pw1-setup-kontrol input { min-height: 40px; }
.pw1-pil-baris { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.pw1-segmen-bahasa { margin: 8px 0 12px; }
.pw1-editor { display: grid; gap: 10px; }
.pw1-kelompok-surat { border: 1px solid var(--garis); border-radius: 10px; padding: 0 12px; background: var(--permukaan); }
.pw1-kelompok-surat > summary { cursor: pointer; padding: 10px 0; min-height: 24px; }
.pw1-kelompok-isi { display: grid; gap: 12px; padding: 0 0 12px; }
.pw1-medan-kelompok { border: 1px solid var(--garis); border-radius: 10px; padding: 8px 12px 12px; margin: 0; display: grid; gap: 10px; }
.pw1-medan-kelompok legend { padding: 0 4px; font-weight: 600; font-size: 13px; color: var(--teks-2); }
.pw1-isian-teks { display: grid; gap: 4px; }
.pw1-isian-teks > label { font-size: 13px; font-weight: 600; color: var(--teks-2); }
.pw1-isian-teks textarea, .pw1-isian-teks input { width: 100%; font-weight: 400; color: var(--teks); }
.pw1-isian-kaki { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pw1-hitung { margin-left: auto; font-variant-numeric: tabular-nums; }
.pw1-hitung.pw1-lebih, .pw1-isian-asing { color: var(--lain); font-weight: 600; }
.pw1-isian-daftar { margin: 12px 0; }
.pw1-isian-daftar > summary { cursor: pointer; min-height: 24px; }
.pw1-isian-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 8px 0; font-size: 13px; }
.pw1-isian-dl dd { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.pw1-isian-dl dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.pw1-isian-nilai { font-family: var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pw1-riwayat-wadah { margin-top: 16px; }
.pw1-riwayat { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.pw1-hasil-setup { margin-top: 8px; }
@media (max-width: 640px) {
  .pw1-kpi-kisi { grid-template-columns: minmax(0, 1fr); }
  .pw1-alat { flex-direction: column; align-items: stretch; }
  .pw1-alat .spasi { display: none; }
  .pw1-isian select, .pw1-isian input, .pw1-isian input[type="search"] { width: 100%; max-width: none; min-height: 44px; }
  /* PW-8e: bilah alat dibuka (display: contents) supaya tombol menjadi butir terakhir panel dan menempel di bawah layar selama daftar digulir. */
  .pw1-pt { display: flex; flex-direction: column; }
  .pw1-pt .pw1-alat { display: contents; }
  .pw1-pt .pw1-alat > * { margin-bottom: 10px; }
  .pw1-pt-aksi { order: 10; position: sticky; bottom: 0; z-index: 5; margin: 8px -16px -16px; padding: 10px 16px; background: var(--permukaan); border-top: 1px solid var(--garis); box-shadow: var(--bayang); }
  body:has(.bilah-bawah) .pw1-pt-aksi { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .pw1-pt-aksi .tombol { flex: 1 1 140px; min-height: 44px; }
  /* Baris menjadi kartu; centang (sasaran 48 px) di kiri. */
  .pw1-tabel-pt tr { position: relative; }
  .pw1-pt[data-pw1-ubah="1"] .pw1-tabel-pt tr { padding-left: 56px; }
  .pw1-tabel-pt td.pw1-cek { position: absolute; left: 6px; top: 6px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
  .pw1-tabel-pt td.pw1-cek::before { content: none; }
  .pw1-tabel-pt .pw1-cek input { width: 24px; height: 24px; }
  .pw1-tabel-pt tr.pw1-dipilih { background: var(--aksen-lembut); }
  .pw1-tabel-pt tr.pw1-dipilih td { background: transparent; }
  .pw1-semua-hp { margin: 4px 0 10px; }
  .pw1-kebijakan-daftar { grid-template-columns: minmax(0, 1fr); }
  .pw1-kebijakan-daftar li .tombol { min-height: 44px; align-self: stretch; }
  .pw1-setup-baris { grid-template-columns: minmax(0, 1fr); }
  .pw1-isian-dl { grid-template-columns: minmax(0, 1fr); }
  /* PW-8e: dialog sebagai lembar bawah selebar layar, tombol di kaki lembar. */
  #dialog-konfirmasi.pw1-dialog, dialog.pw1-dialog-isian { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 82vh; border-radius: 16px 16px 0 0; }
  #dialog-konfirmasi.pw1-dialog .baris-tombol .tombol, dialog.pw1-dialog-isian .baris-tombol .tombol { flex: 1; min-height: 44px; }
}
/* [/v3.53 persetujuan-wali] */
/* [v3.56 P1-E] */
/* Alamat lengkap dan linimasa tab (kanvas P1-E, pengesahan 23 Okt 07.05). Token saja; merah hanya untuk pesan galat. */
/* Laci santri bertab (T-1 A): strip tab pola P1-C, panel tab, pil status surat. */
.p1e-laci-isi { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.p1e-panel-tab { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.p1e-panel-tab:focus { outline: none; }
.p1e-panel-tab:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
.p1e-pil-status { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.p1e-kotak { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; color: var(--teks-2); }
.p1e-kotak b { color: var(--teks); font-size: 15px; }
.p1e-kosong { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
.p1e-pesan { margin: 0; }
.p1e-galat { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.p1e-kerangka { gap: 10px; }
.p1e-chip-alasan { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12.5px; color: var(--teks-2); background: var(--cekung); border-radius: 8px; padding: 6px 10px; }
.p1e-chip-alasan q { quotes: "“" "”"; }
.p1e-alat { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: space-between; }
.p1e-label-tanggal { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--teks-2); min-width: 0; max-width: 100%; }
.p1e-label-tanggal select { max-width: 100%; }
.p1e-kaki { font-size: 12.5px; color: var(--redup); border-top: 1px solid var(--garis); padding-top: 8px; margin: 0; }
.p1e-nowrap { white-space: nowrap; }
/* Daftar alamat per situs dan rincian per jam di tempat. */
.p1e-situs { display: flex; flex-direction: column; border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; }
.p1e-situs-kepala { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 8px 10px; background: var(--cekung); font-size: 13px; }
.p1e-alamat { border-top: 1px solid var(--garis); }
.p1e-alamat > button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; width: 100%; text-align: left; min-height: 44px; }
.p1e-alamat > button:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.p1e-alamat > button[aria-expanded="true"], .p1e-rinci { background: var(--aksen-lembut); }
.p1e-judul-hal { font-weight: 600; font-size: 14px; color: var(--teks); overflow-wrap: anywhere; }
.p1e-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; color: var(--teks-2); }
.p1e-rinci { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 8px; }
table.p1e-tabel-kecil { font-size: 13px; }
table.p1e-tabel-kecil th, table.p1e-tabel-kecil td { padding: 5px 6px; vertical-align: top; }
table.p1e-tabel-kecil .mono { overflow-wrap: anywhere; word-break: break-all; }
tr.p1e-sorot > td { background: var(--aksen-lembut); }
/* Pita linimasa tegak (T-5 A, P1E-K24): satu baris per jam, pita mini 60 menit; keadaan dengan warna, pola, dan kata. */
.p1e-legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--teks-2); }
.p1e-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.p1e-legenda i, .p1e-pil-k i { display: inline-block; width: 18px; height: 12px; border-radius: 3px; flex: none; }
.p1e-legenda i.p1e-legenda-sesi { height: 3px; background: var(--aksen); }
.p1e-k-aktif { background: var(--seri-0); color: var(--aksen-teks); }
.p1e-k-luar-chrome { background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info); color: var(--info); }
.p1e-k-diam { background: var(--mati-bg); box-shadow: inset 0 0 0 1px var(--garis-kuat); color: var(--mati); }
.p1e-k-terkunci { background: repeating-linear-gradient(135deg, var(--garis-kuat) 0 2px, var(--cekung) 2px 6px); color: var(--teks); }
.p1e-k-bukan { background: var(--aksen-lembut); box-shadow: inset 0 0 0 1px var(--seri-0); color: var(--aksen-tua); }
.p1e-k-tanpa { background: var(--permukaan); border: 1px dashed var(--garis-kuat); }
.p1e-pita { display: flex; flex-direction: column; gap: 3px; }
.p1e-pita-baris { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: center; }
.p1e-pita-jam { font: 500 12px var(--mono); color: var(--redup); text-align: right; }
.p1e-pita-jalur { position: relative; height: 22px; border-radius: 4px; border: 1px dashed var(--garis-kuat); background: var(--permukaan); }
.p1e-pita-baris.berlabel .p1e-pita-jalur { margin-top: 14px; }
.p1e-pita-sesi { position: absolute; bottom: -3px; height: 3px; background: var(--aksen); border-radius: 2px; }
.p1e-label-sesi { position: absolute; top: -15px; font-size: 11px; color: var(--aksen-tua); font-weight: 600; white-space: nowrap; }
.p1e-seg { position: absolute; top: 0; bottom: 0; border-radius: 2px; font-size: 11px; font-weight: 600; line-height: 22px; padding: 0 4px; overflow: hidden; white-space: nowrap; }
.p1e-seg.p1e-redam { opacity: .25; }
.p1e-pil-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.p1e-pil-k i { width: 12px; }
.p1e-ringkas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 12px; }
.p1e-ringkas div { background: var(--cekung); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; min-width: 0; }
.p1e-ringkas b { font-size: 14px; }
.p1e-semua { align-self: flex-start; }
/* Dialog alasan (P1E-2, varian tidak merah, tetap terbuka selama proses). */
dialog.p1e-dialog .p1e-dialog-pesan:empty { display: none; }
/* Setup (P1E-4) dan pintu halaman santri. */
.p1e-setup-keadaan { margin: 4px 0 8px; }
.p1e-pintu-santri { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 640px) {
  .p1e-tombol-buka { width: 100%; min-height: 44px; }
  .p1e-alat { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .p1e-kerangka > div { animation: none; } }
/* [/v3.56 P1-E] */
/* [v3.57.1 P2 PENGAYAAN] bahan pengayaan per langkah RPP (kanvas p2-pengayaan PG-1, PG-2, PG-5, H1, H2). Token saja, tanpa warna mentah. */
.pgy-bagian { grid-column: 1 / -1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--info-bg); border-radius: 12px; background: var(--permukaan); box-shadow: inset 3px 0 0 var(--info); }
.pgy-bagian.pgy-mati { box-shadow: inset 3px 0 0 var(--garis-kuat); border-color: var(--garis); }
.pgy-bagian h3 { margin: 0; font-size: 15px; }
.pgy-bagian p { margin: 0; }
.pgy-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap; }
.pgy-judul { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; min-width: 0; }
.pgy-hitung { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pgy-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.pgy-tabel th { text-align: left; font-size: 12px; font-weight: 600; color: var(--redup); padding: 6px; border-bottom: 1px solid var(--garis); }
.pgy-tabel td { padding: 8px 6px; border-bottom: 1px solid var(--garis); vertical-align: top; }
.pgy-tabel tr.baris-perlu td { background: var(--lain-sorot); }
.pgy-tabel .pgy-c-cek { width: 28px; }
.pgy-tabel .pgy-c-nilai { width: 92px; }
.pgy-tabel .pgy-c-penerima { width: 190px; }
.pgy-tabel .pgy-c-keputusan { width: 250px; }
.pgy-tabel .pgy-c-aksi { width: 96px; text-align: right; }
.pgy-tabel select { width: 100%; min-width: 0; }
.pgy-tabel tr.pgy-baris-masalah td { border-bottom: 1px solid var(--garis); padding-top: 0; }
.pgy-alamat { overflow-wrap: anywhere; word-break: break-all; white-space: normal; }
.pgy-c-alamat { min-width: 0; }
.pgy-asal { display: inline-block; font-size: 11px; font-weight: 600; color: var(--redup); border: 1px solid var(--garis-kuat); border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.pgy-kosong { padding: 18px 16px; max-width: none; }
.pgy-tambah textarea { width: 100%; }
.pgy-tambah .baris-tombol { margin-top: 6px; }
.pgy-hasil:empty { display: none; }
.pgy-pita { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 10px; background: var(--cekung); color: var(--teks-2); font-size: 13px; }
.pgy-mini { font-size: 12px; }
.pgy-sub-pil { font-size: 12px; color: var(--redup); align-self: center; }
.pgy-pil-kepala { border-color: var(--info-bg); background: var(--gelap-2); }
.pgy-tertahan { display: block; margin-top: 2px; }
.pgy-label-hp { color: var(--redup); font-weight: 600; }
.kartu-santri-langkah.st-info { box-shadow: inset 4px 0 0 var(--info); }
.kartu-santri-langkah .teks-info { color: var(--info); font-weight: 600; }
@media (max-width: 640px) {
  .pgy-tabel, .pgy-tabel tbody { display: block; }
  .pgy-tabel thead { display: none; }
  .pgy-tabel tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--garis); }
  .pgy-tabel td { display: block; padding: 0; border: 0; width: auto !important; text-align: left !important; }
  .pgy-tabel .pgy-c-cek { grid-column: 1; grid-row: 1; }
  .pgy-tabel .pgy-c-alamat { grid-column: 2; grid-row: 1; }
  .pgy-tabel .pgy-c-nilai { grid-column: 3; grid-row: 1; }
  .pgy-tabel .pgy-c-penerima, .pgy-tabel .pgy-c-keputusan, .pgy-tabel .pgy-c-aksi { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
  .pgy-tabel tr.pgy-baris-masalah { display: block; padding: 0 0 8px; }
  .pgy-tabel select { min-height: 44px; width: 100%; max-width: none; }
  .pgy-tabel .pgy-c-aksi .tombol, .pgy-tambah .tombol { min-height: 44px; width: 100%; }
}
/* [/v3.57.1 P2 PENGAYAAN] */
/* [LEVEL HITUNG ULANG] Tanggal yang belum terhitung (kanvas sah L-HU1..L-HU4, 4h-35). Token saja, tanpa warna mentah, tanpa kelas tombol baru. */
.p2l-hu-bagian { border-top: 1px solid var(--garis); padding-top: 14px; margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.p2l-hu-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.p2l-hu-kepala h3 { margin: 0; }
.p2l-hu-tabel { width: 100%; font-size: 13px; }
.p2l-hu-tabel td, .p2l-hu-tabel th { vertical-align: top; padding-left: 6px; padding-right: 6px; white-space: normal; }
.p2l-hu-tabel td { font-variant-numeric: tabular-nums; }
.p2l-hu-tabel .p2l-mini .mono { overflow-wrap: anywhere; }
.p2l-hu-tabel .pil { white-space: normal; }
.p2l-hu-nowrap, .p2l-hu-tgl { white-space: nowrap; }
.p2l-hu-kolom { display: none; }
.p2l-hu-aksi { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.p2l-hu-aksi .tombol { white-space: nowrap; }
.p2l-hu-dl { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; font-size: 13px; }
.p2l-hu-dl dt { color: var(--teks-2); font-weight: 600; }
.p2l-hu-dl dd { margin: 0; }
.p2l-hu-rinci { border: 1px solid var(--garis); border-radius: 10px; padding: 8px 12px; font-size: 13px; background: var(--permukaan); }
.p2l-hu-rinci summary { cursor: pointer; color: var(--aksen); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.p2l-hu-tanda { display: flex; flex-direction: column; gap: 4px; }
.p2l-hu-akibat { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.p2l-hu-jadwal { background: var(--cekung); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.p2l-hu-jadwal ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.p2l-hu-galat { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
@media (max-width: 640px) {
  .p2l-hu-tabel .p2l-hu-kolom { display: block; font-size: 12px; color: var(--teks-2); margin-top: 6px; }
  .p2l-hu-tabel td:first-child .p2l-hu-kolom { display: none; }
  .p2l-hu-tabel td:first-child { font-size: 15px; }
  .p2l-hu-aksi { margin-top: 8px; }
  .p2l-hu-aksi .tombol { width: 100%; min-height: 44px; }
  .p2l-hu-dl { grid-template-columns: minmax(0, 1fr); }
}
/* [/LEVEL HITUNG ULANG] */

/* [C2] Santri › Onboarding (UL-2) dan Santri › Offboarding (UL-5). Hanya token. */
.c2-meter { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.c2-meter i { width: 10px; height: 10px; border-radius: 2px; background: var(--garis); }
.c2-meter i.y { background: var(--aktif); }
.c2-meter i.u { background: var(--cekung); outline: 1px dashed var(--garis-kuat); outline-offset: -1px; }
.c2-kep { gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
/* Memo 18.00: kontrol keputusan selebar pilihan terpanjang sampai batas kolom; tidak dipotong. */
select.kontrol-keputusan.c2-kontrol { width: auto; max-width: 100%; }
.c2-tabel td { overflow-wrap: anywhere; }
.c2-tabel .pil { white-space: normal; }
.c2-tabel th, .c2-tabel th.bisa-urut { white-space: normal; }
.c2-rinci summary { cursor: pointer; }
/* [/C2] */

/* [C3] Beda data tujuh jenis (UL-7): baris Data per sumber yang berbeda ditebalkan. Hanya token. */
.c3-sumber tr.c3-beda th, .c3-sumber tr.c3-beda td { font-weight: 600; background: var(--lain-bg); }
.c3-tabel-beda td.c3-kol-beda, .c3-tabel-beda th.c3-kol-beda { min-width: 14rem; }
.c3-tabel-beda .v347s-sampai input[type="date"] { max-width: 100%; }
/* UK-E2-T8: tanda mode alumni satu baris di sel (pola UL-7E). */
.c3-tabel-beda .pil.c3-pil-mode-alumni { white-space: nowrap; }
.c3-mode-alumni { display: grid; gap: 6px; justify-items: start; }
/* [/C3] */

/* [C4] On leave di Daftar santri (UL-4). Hanya token. */
.c4-alasan { display: grid; gap: 6px; border: 0; padding: 0; margin: 0 0 8px; }
.c4-alasan legend { font-weight: 600; margin-bottom: 4px; }
dialog .c4-cek, dialog .c4-alasan label.pilihan-radio { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; font-weight: 400; }
dialog .c4-alasan label.pilihan-radio input, dialog .c4-cek input { margin-top: 3px; }
.c4-kotak { background: var(--cekung); border: 1px solid var(--garis); border-radius: 10px; padding: 10px 12px; }
.c4-mulai { display: block; padding: 8px 0; }
.c4-hasil { display: grid; gap: 6px; }
.c4-status .pil { white-space: normal; }
/* [/C4] */

/* [v3.60.1 DM-B UI] Device paket B (akun K1, 4h-38): kelas dm- dari kanvas sah (gaya-dm.css), token saja. */
.dm-halaman { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dm-halaman > .panel + .panel { margin-top: 0; }
.dm-utama-kpi { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.dm-utama-kpi > .ux121-kpi { margin: 0; }
.dm-posture { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.dm-batang { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--cekung); }
.dm-batang i, .dm-legenda i { display: block; }
.dm-batang i { height: 100%; }
:is(.dm-batang, .dm-legenda) .b-ok { background: var(--aktif); } :is(.dm-batang, .dm-legenda) .b-awas { background: var(--lain); }
:is(.dm-batang, .dm-legenda) .b-buruk { background: var(--bahaya); } :is(.dm-batang, .dm-legenda) .b-karantina { background: var(--mati); }
.dm-legenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.dm-legenda li { display: flex; align-items: center; min-width: 0; }
.dm-legenda li a { color: var(--teks); text-decoration: none; display: flex; gap: 8px; align-items: center; width: 100%; min-height: 24px; }
.dm-legenda li a:hover span:first-of-type { text-decoration: underline; }
.dm-legenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dm-legenda .angka { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dm-kpi-tautan { display: flex; text-decoration: none; color: inherit; min-width: 0; border-radius: var(--radius); }
.dm-kpi-tautan > .ux121-kpi { flex: 1; }
.dm-kpi-tautan:hover > .ux121-kpi { border-color: var(--aksen); }
.dm-kpi-tautan:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.dm-corong { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dm-corong li { display: grid; grid-template-columns: 250px minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 14px; }
.dm-corong li.dm-samping { padding-left: 18px; }
.dm-corong a, .dm-corong b { color: var(--teks); text-decoration: none; font-weight: 600; }
.dm-corong a:hover { color: var(--aksen); text-decoration: underline; }
.dm-corong .ket { display: block; font-weight: 400; font-size: 12px; color: var(--redup); }
.dm-corong .meter { height: 10px; border-radius: 999px; background: var(--cekung); overflow: hidden; }
.dm-corong .meter i { display: block; height: 100%; background: var(--seri-0); min-width: 2px; }
.dm-corong .meter i.nol { background: transparent; }
.dm-corong .n { text-align: right; font: 500 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
.dm-corong-pisah { border-top: 1px solid var(--garis); margin: 4px 0; }
.dm-corong + p { margin-top: 12px; }
.dm-saring { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.dm-saring label { min-width: 140px; }
.dm-saring .dm-cari { flex: 1 1 220px; }
.dm-saring .dm-cari input { width: 100%; }
table.dm-tabel td, table.dm-tabel th { vertical-align: top; }
.dm-tabel .sel-id { white-space: nowrap; }
.dm-pil-baris { display: flex; flex-wrap: wrap; gap: 4px; }
.dm-halaman-bawah { margin-top: 10px; }
.dm-meter-siap { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 6px; }
.dm-meter-siap i { display: block; width: 10px; height: 10px; border-radius: 3px; background: var(--aktif); }
.dm-meter-siap i.gagal { background: var(--permukaan); border: 1.5px solid var(--bahaya); }
.dm-meter-siap i.belum { background: var(--permukaan); border: 1.5px dashed var(--garis-kuat); }
.dm-syarat, .dm-syarat-baris { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.dm-syarat .pil, .dm-syarat-baris > .pil { align-self: flex-start; }
.dm-keputusan-baris { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.dm-keputusan-baris .dm-email-lain { flex: 1 1 200px; min-width: 0; }
.dm-riwayat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 13px; }
.dm-riwayat li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--garis); }
.dm-riwayat li:first-child { border-top: 0; }
.dm-riwayat time { color: var(--redup); font-variant-numeric: tabular-nums; }
.dm-pemakai { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.dm-pemakai li { display: flex; gap: 8px; align-items: flex-start; }
.dm-laci-tab { display: flex; gap: 2px; border-bottom: 1px solid var(--garis); margin: 0; }
.dm-laci-tab button { font: inherit; font-size: 13px; border: 0; background: none; padding: 8px 10px; min-height: 32px; color: var(--redup); border-bottom: 2px solid transparent; cursor: pointer; }
.dm-laci-tab button[aria-selected="true"] { color: var(--teks); border-bottom-color: var(--aksen); font-weight: 600; }
.dm-laci-tab button:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.dm-menu-lain { display: inline-block; }
.dm-menu-lain > summary.tombol { font-weight: 500; padding: 0 14px; display: inline-flex; align-items: center; }
.dm-menu-lain .menu-isi { min-width: 240px; }
.dm-menu-judul { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); padding: 8px 10px 2px; }
.dm-meja { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: 16px; align-items: start; }
.dm-meja > .panel { margin: 0; min-width: 0; }
.dm-langkah { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: langkah; }
.dm-langkah > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; counter-increment: langkah; }
.dm-langkah > li::before { content: counter(langkah); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--aksen-lembut); color: var(--aksen-tua); font: 700 13px/1 var(--huruf); }
.dm-langkah > li.selesai::before { background: var(--aktif-bg); color: var(--aktif); }
.dm-langkah-isi { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dm-langkah-isi label { width: 100%; }
.dm-langkah-isi input[type="text"], .dm-langkah-isi input[type="email"], .dm-langkah-isi select, .dm-langkah-isi textarea { width: 100%; }
.dm-daftar-simpan { margin: 0; padding-left: 18px; }
.dm-segmen { display: inline-flex; border: 1px solid var(--garis-kuat); border-radius: 9px; overflow: hidden; align-self: flex-start; }
.dm-segmen button { font: inherit; font-size: 14px; border: 0; border-left: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks); padding: 8px 14px; min-height: 36px; cursor: pointer; }
.dm-segmen button:first-child { border-left: 0; }
.dm-segmen button[aria-checked="true"] { background: var(--aksen); color: var(--aksen-teks); font-weight: 600; }
.dm-segmen button:disabled { color: var(--redup); cursor: not-allowed; }
.dm-pindai { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.dm-pindai-video { width: 100%; max-height: 50vh; background: var(--cekung); border-radius: 10px; }
.dm-cocok { border: 1px solid var(--aktif); background: var(--aktif-bg); color: var(--teks); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.dm-cocok b { color: var(--aktif); }
.dm-pita-gelap { display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; padding: 10px 12px; background: var(--info-bg); color: var(--info); font-size: 13px; }
.dm-pita-gelap b { color: var(--info); }
tr.dm-kuning > td:first-child { box-shadow: inset 3px 0 0 var(--lain); }
@media (max-width: 900px) {
  .dm-meja, .dm-utama-kpi { grid-template-columns: minmax(0, 1fr); }
}
/* ≤ 640 px: tabel menjadi kartu (pedoman 1.9), tombol utama 44 px. */
@media (max-width: 640px) {
  table.dm-tabel-kartu, table.dm-tabel-kartu tbody { display: block; }
  table.dm-tabel-kartu thead { display: none; }
  table.dm-tabel-kartu tr { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--garis); border-radius: 12px; padding: 12px; margin-bottom: 8px; background: var(--permukaan); }
  table.dm-tabel-kartu tr.ux121-terbuka { border-color: var(--aksen); }
  table.dm-tabel-kartu td { display: block; border: 0; padding: 0; }
  table.dm-tabel-kartu td.ux121-sekunder { display: none; }
  .dm-tabel .sel-id { white-space: normal; }
  .dm-keputusan-baris select, .dm-keputusan-baris .tombol, .dm-keputusan-baris input { width: 100%; min-height: 44px; }
  .dm-corong li { grid-template-columns: minmax(0, 1fr) 56px; }
  .dm-corong li .meter { grid-column: 1 / -1; grid-row: 2; }
  .dm-corong li.dm-samping { padding-left: 12px; }
  .dm-legenda { grid-template-columns: minmax(0, 1fr); }
  .dm-saring label { min-width: 0; flex: 1 1 45%; }
  .dm-saring select { width: 100%; }
  .dm-pindai { grid-template-columns: minmax(0, 1fr); }
  .dm-pindai .tombol, .dm-tombol-hp-penuh { width: 100%; min-height: 44px; }
  .dm-halaman .ux121-laci .tombol:not(.kecil-t) { min-height: 44px; }
  .dm-menu-lain .menu-isi { min-width: 0; }
}
/* [/v3.60.1 DM-B UI] */
/* [v3.60.1 DM-B UI] pengalihan bersyarat: satu baris tautan halaman lama di kepala halaman baru */
.dm-tautan-lama { margin: -6px 0 0; }
/* [/v3.60.1 DM-B UI] */
/* [v3.60.3 DM-D LAPOR] pintu laporan Chromebook hilang (kanvas P5-5, P5-6 jalur kantor; akun K8 4h-50). */
.lapor-hilang-form { display: grid; gap: 12px; max-width: 560px; }
.lapor-hilang-form p { margin: 0; }
.lapor-hilang-isian { display: grid; gap: 4px; }
.lapor-hilang-label { font-weight: 600; font-size: 14px; }
.lapor-hilang-isian input[type="text"], .lapor-hilang-isian select, .lapor-hilang-isian textarea { width: 100%; box-sizing: border-box; min-height: 44px; font-family: var(--huruf); font-size: 15px; }
.lapor-hilang-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lapor-hilang-baris { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--garis); }
.lapor-hilang-baris:last-child { border-bottom: 0; }
.lapor-hilang-tarik { grid-column: 1 / -1; display: grid; gap: 6px; justify-items: start; }
.lapor-hilang-tarik p { margin: 0; }
.lapor-hilang-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lapor-hilang-fieldset legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 6px; }
.lapor-hilang-cara { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.lapor-hilang-dialog textarea { width: 100%; box-sizing: border-box; font-family: var(--huruf); }
@media (max-width: 480px) {
  .lapor-hilang-form .baris-tombol .tombol, .lapor-hilang-tarik .tombol { width: 100%; justify-content: center; }
  .lapor-hilang-baris { grid-template-columns: minmax(0, 1fr); }
}
/* [/v3.60.3 DM-D LAPOR] */
/* [v3.60.3 DM-D UI] Service Chromebook paket D (kanvas P5-1, P5-2, P5-4; akun K9 4h-49 D-2). Token saja. */
.dm-d-kasus { border: 1px solid var(--garis); border-radius: var(--radius); padding: 12px; background: var(--cekung); display: grid; gap: 10px; }
.dm-d-kasus-awas { border-color: var(--lain-garis); background: var(--lain-bg); }
.dm-d-kasus-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dm-d-kasus-kepala h3 { margin: 0; }
.dm-d-tahap { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dm-d-tahap li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.dm-d-tahap li > div { display: grid; gap: 2px; min-width: 0; }
.dm-d-tahap li .kecil { color: var(--teks-2); overflow-wrap: anywhere; }
.dm-d-tahap-tanda { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--garis-kuat); color: var(--redup); background: var(--permukaan); }
.dm-d-tahap li.selesai .dm-d-tahap-tanda { background: var(--aktif); border-color: var(--aktif); color: var(--permukaan); }
.dm-d-tahap li.kini .dm-d-tahap-tanda { border-color: var(--aksen); color: var(--aksen); }
.dm-d-tahap li.kini b { color: var(--aksen-teks); }
.dm-d-tahap li.lewati { opacity: .6; }
.dm-d-tahap li.lewati b { text-decoration: line-through; font-weight: 500; }
.dm-d-dl { margin: 0; }
.dm-d-dampak { margin: 8px 0; padding: 10px 12px 10px 28px; background: var(--cekung); border-radius: var(--radius); display: grid; gap: 4px; }
.dm-d-lewat { color: var(--bahaya); font-weight: 600; }
.pil.dm-d-lewat { color: var(--bahaya); }
.dm-d-pw { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.dm-d-tunggu { margin: 0; align-self: center; }
.dm-d-sel-tahap { overflow-wrap: anywhere; }
.dm-d-tabel td { overflow-wrap: anywhere; }
.ux121-kerja.ux121-laci-buka .dm-d-tabel .identitas-santri .mono, .ux121-kerja.ux121-laci-buka .dm-d-tabel .dm-d-umur { display: none; }
.dm-d-kisi-pk { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.dm-d-pk { border: 1px solid var(--garis); border-radius: var(--radius); padding: 14px; background: var(--permukaan); display: grid; gap: 8px; min-width: 0; }
.dm-d-pk-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.dm-d-pk-kepala h3 { margin: 0; }
.dm-d-pk p { margin: 0; }
.dm-d-pk dd { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .dm-d-kisi-pk { grid-template-columns: minmax(0, 1fr); }
  .dm-d-pk .baris-tombol .tombol { flex: 1 1 auto; justify-content: center; }
}
/* [/v3.60.3 DM-D UI] */
/* [v3.60.3 DM-D UI PR2] laci Repair/Loaner dan pekerjaan massal Service (kanvas P5-3, P5-7; akun K4 4h-49 D-2). Token saja. */
.dm-d2-dialog label { display: grid; gap: 4px; }
.dm-d2-dialog select, .dm-d2-dialog input[type="date"], .dm-d2-dialog input[type="text"] { width: 100%; max-width: 100%; }
.dm-d2-dialog textarea { width: 100%; }
.dm-d2-dialog textarea.dm-d2-tempel { font-family: var(--mono); } /* [v3.61 DM-D] L-8: huruf mono hanya untuk daftar tempel kode */
.dm-d2-jenis { border: 1px solid var(--garis); border-radius: var(--radius); padding: 8px 12px; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dm-d2-jenis legend { padding: 0 4px; font-weight: 600; }
.dm-d2-dialog .dm-d2-pilih { display: inline-flex; align-items: center; gap: 6px; }
.dm-d2-baki { display: grid; gap: 10px; }
.dm-d2-baki:empty { display: none; }
@media (max-width: 640px) {
  .dm-d2-jenis { flex-direction: column; }
  .dm-d2-dialog .dm-d2-pilih { min-height: 44px; } /* [v3.61 DM-D] L-8: sasaran sentuh 44 px di HP */
}
/* [/v3.60.3 DM-D UI PR2] */
/* [UL-E2 UI] Santri › Akun santri keluar dan Daftar hapus akun (akun K1, 4h-51): papan EQ22 UL-8/UL-9, token saja. */
.ule2-halaman { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ule2-halaman > .panel + .panel { margin-top: 0; }
.ule2-istilah { margin: 0; color: var(--redup); max-width: 92ch; }
.ule2-istilah b { color: var(--teks); }
.ule2-halaman-nav { margin-top: 10px; gap: 12px; flex-wrap: wrap; }
.ule2-riwayat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ule2-riwayat li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 14px; }
.ule2-form { display: flex; flex-direction: column; gap: 10px; }
.ule2-form fieldset { border: 1px solid var(--garis); border-radius: var(--radius); padding: 8px 12px 10px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ule2-form legend { font-size: 14px; font-weight: 600; padding: 0 4px; }
.ule2-form .radio { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.ule2-form .radio input { margin-top: 3px; flex: none; }
.ule2-form label:not(.radio) { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ule2-kartu-r2 { border: 1px solid var(--garis); border-left: 4px solid var(--lain); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ule2-kartu-r2 + .ule2-kartu-r2 { margin-top: 10px; }
.ule2-kartu-r2 h3 { margin: 0; font-size: 15px; }
/* [UL-E2 UI susulan] keputusan per baris dengan alasan Tunda/Pertahankan (papan UL-9), gelombang yang belum selesai */
.ule2-keputusan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ule2-alasan-baris { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--redup); }
.ule2-alasan-baris input { width: 100%; min-width: 0; }
.ule2-berjalan { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 600px) {
  .ule2-riwayat li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ule2-kartu-r2 .baris-tombol > .tombol { flex: 1 1 100%; min-height: 44px; }
}
/* [/UL-E2 UI] */
/* [E1 P6-4b] Retire bergelombang (kanvas P6-4b); token saja. */
.dm-retirement tr.ret-dalam-pekerjaan > td { background: var(--cekung); }
.ret-gel-dialog { width: min(640px, calc(100vw - 32px)); }
/* [v3.61 C-12] PR 201 LAIN-4: daftar penghentian dan pilihan tambahan (token saja). */
.ret-tahap { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.ret-tahap > li { padding-left: 4px; border-left: 3px solid var(--garis); }
.ret-tahap > li.ret-tahap-selesai, .ret-tahap > li.ret-tahap-tidak-perlu { border-left-color: var(--aktif); }
.ret-tahap > li.ret-tahap-berjalan { border-left-color: var(--aksen); }
.ret-tahap > li.ret-tahap-gagal { border-left-color: var(--bahaya); }
.ret-keputusan { display: flex; flex-direction: column; gap: 8px; }
.ret-pilihan-tambahan:empty { display: none; }
.ret-riwayat > summary { cursor: pointer; }
.ret-gel-angka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ret-gel-ubin { border: 1px solid var(--garis); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.ret-gel-ubin b { font-size: 22px; font-variant-numeric: tabular-nums; }
.ret-gel-ubin span { font-size: 13px; color: var(--teks-2); }
.ret-gel-langkah { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.ret-gel-lain { padding: 8px 12px; border-radius: 10px; background: var(--cekung); }
@media (max-width: 600px) {
  .ret-gel-dialog { width: calc(100vw - 16px); }
  .ret-gel-angka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ret-gel-dialog .baris-tombol > .tombol { flex: 1 1 100%; min-height: 44px; }
}
/* [/E1 P6-4b] */
/* [E2b UI] Rencana naik kelas dan Peta OU (token saja). LAIN-2: tabel kunci plafon selebar laci. */
.nk-kunci, .nk-kunci .bungkus-tabel, .nk-kunci table { width: 100%; }
/* [/E2b UI] */

/* [v3.62 F UI] Akun baru (kanvas PF-1, PF-2, PF-4; akun C). Token saja. */
.akb-istilah { margin: 0; color: var(--teks-2); }
.akb-email { overflow-wrap: anywhere; }
.akb-rincian { margin-top: 4px; }
.akb-rincian summary { cursor: pointer; color: var(--redup); font-size: .85em; }
.akb-isian { display: grid; gap: 10px; }
.akb-isian textarea, .akb-isian input { width: 100%; }
.akb-cek-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.akb-cek { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.akb-cek-tanda { display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; font-weight: 700; background: var(--cekung); }
.akb-cek.ok .akb-cek-tanda { color: var(--aktif); }
.akb-cek.belum .akb-cek-tanda { color: var(--bahaya); }
.akb-kesehatan { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.akb-kesehatan dd { margin: 0; }
.akb-daftar-santri { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.akb-daftar-santri li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--garis); }
@media (max-width: 600px) { .akb-kesehatan { grid-template-columns: 1fr; } }