/* frontend/assets/css/components.css
   Komponen antarmuka. Seluruh nilai berasal dari tokens.css.
   Target sentuh minimum 44px berlaku untuk semua kontrol. */

/* ============================================================== tombol */

.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jarak-2);
  min-height: var(--target-sentuh);
  padding: var(--jarak-3) var(--jarak-5);
  border-radius: var(--radius-2);
  font-size: var(--teks-md);
  font-weight: var(--tebal-tebal);
  line-height: 1.2;
  letter-spacing: .005em;
  border: 1px solid transparent;
  transition: background var(--transisi-cepat), border-color var(--transisi-cepat),
              box-shadow var(--transisi-cepat), color var(--transisi-cepat),
              transform var(--transisi-cepat), opacity var(--transisi-cepat);
  text-align: center;
  white-space: nowrap;
}
.tombol:hover { text-decoration: none; }
.tombol:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.tombol:disabled { opacity: .5; box-shadow: none; }
.tombol__ikon { font-size: 1.1em; line-height: 1; display: inline-flex; }

.tombol--primer { background: var(--warna-primer); color: var(--warna-teks-terbalik); box-shadow: var(--bayang-primer); }
.tombol--primer:hover:not(:disabled) { background: var(--warna-primer-kuat); }

.tombol--sekunder {
  background: var(--warna-permukaan);
  color: var(--warna-teks-primer);
  border-color: var(--warna-garis-kuat);
  box-shadow: var(--bayang-1);
}
.tombol--sekunder:hover:not(:disabled) { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }

.tombol--lembut { background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.tombol--lembut:hover:not(:disabled) { background: var(--warna-primer-garis); }
.tombol--hantu { background: transparent; color: var(--warna-teks-lembut); }
.tombol--hantu:hover:not(:disabled) { background: var(--warna-sorot); color: var(--warna-teks); }

.tombol--sukses { background: var(--warna-sukses); color: #fff; }
.tombol--bahaya { background: var(--warna-bahaya); color: #fff; }
.tombol--aksen { background: var(--warna-aksen); color: #2a2205; }
/* Dipakai keputusan "tetap lanjut meski ada peringatan" dan hasil "Belum kompeten". */
.tombol--peringatan { background: var(--warna-peringatan); color: #fff; }
.tombol--peringatan:hover:not(:disabled),
.tombol--sukses:hover:not(:disabled),
.tombol--bahaya:hover:not(:disabled),
.tombol--aksen:hover:not(:disabled) { filter: brightness(1.07); }

.tombol--kecil { min-height: 36px; padding: var(--jarak-2) var(--jarak-3); font-size: var(--teks-sm); }
.tombol--besar { min-height: 52px; font-size: var(--teks-lg); border-radius: var(--radius-3); }
.tombol--penuh { width: 100%; }

/* Tombol ikon persegi (app bar, penutup modal). */
.tombol-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-2);
  color: inherit;
  font-size: var(--teks-lg);
  transition: background var(--transisi-cepat), color var(--transisi-cepat);
}
.tombol-ikon:hover { background: var(--warna-sorot); }
/* Target sentuh tetap 44px meski lingkaran yang terlihat 40px. */
@media (pointer: coarse) { .tombol-ikon { width: var(--target-sentuh); height: var(--target-sentuh); } }

/* ============================================================== kartu */

.kartu {
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
  background: var(--warna-permukaan);
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-3);
  padding: var(--jarak-4);
  box-shadow: var(--bayang-1);
}
.kartu--klik {
  cursor: pointer;
  transition: box-shadow var(--transisi), transform var(--transisi), border-color var(--transisi);
}
.kartu--klik:hover { box-shadow: var(--bayang-2); border-color: var(--warna-garis-kuat); transform: translateY(-1px); }
.kartu--klik:active { transform: translateY(0) scale(.995); }
.kartu--datar { box-shadow: none; }
/* Kartu sorotan (ringkasan utama di beranda): garis emas tipis di atas dan
   rona aksen yang memudar — menonjol tanpa menjadi kotak kuning penuh. */
.kartu--sorot {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--warna-aksen) 40%, var(--warna-garis));
  background:
    radial-gradient(120% 90% at 100% 0%, var(--warna-aksen-lembut) 0%, transparent 60%),
    var(--warna-permukaan);
}
.kartu--sorot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--warna-aksen), color-mix(in srgb, var(--warna-aksen) 30%, transparent));
}
.kartu--sukses { border-color: var(--warna-sukses); background: var(--warna-sukses-lembut); }
.kartu--peringatan { border-color: var(--warna-peringatan); background: var(--warna-peringatan-lembut); }
.kartu__judul { font-weight: var(--tebal-tebal); font-size: var(--teks-md); }
.kartu__meta { font-size: var(--teks-sm); color: var(--warna-teks-lembut); }

/* ============================================================ lencana */

.lencana {
  display: inline-flex;
  align-items: center;
  gap: var(--jarak-1);
  padding: 3px var(--jarak-2);
  border-radius: var(--radius-penuh);
  font-size: var(--teks-xs);
  font-weight: var(--tebal-tebal);
  line-height: 1.4;
  white-space: nowrap;
}
.lencana--netral { background: var(--warna-permukaan-2); color: var(--warna-teks-lembut); }
.lencana--info { background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.lencana--sukses { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.lencana--peringatan { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.lencana--bahaya { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); }
.lencana--aksen { background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }

/* ============================================================= app bar */

/* Permukaan tembus pandang yang mengabur di atas konten yang digulir —
   bukan blok navy penuh, yang di mode gelap menjadi pita biru terang. */
.appbar {
  position: sticky;
  top: 0;
  z-index: var(--z-appbar);
  display: flex;
  align-items: center;
  gap: var(--jarak-2);
  min-height: calc(var(--tinggi-appbar) + var(--aman-atas));
  padding: var(--jarak-2) var(--jarak-3);
  padding-top: calc(var(--jarak-2) + var(--aman-atas));
  padding-left: calc(var(--jarak-3) + var(--aman-kiri));
  padding-right: calc(var(--jarak-2) + var(--aman-kanan));
  background: var(--warna-appbar);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  color: var(--warna-teks);
  border-bottom: 1px solid var(--warna-garis);
}
.appbar__logo {
  flex: none;
  width: 32px;
  height: 32px;
  margin-right: var(--jarak-1);
  border-radius: var(--radius-penuh);
}
.appbar__teks { display: flex; flex-direction: column; justify-content: center; }
.appbar__judul {
  font-size: var(--teks-lg);
  font-weight: var(--tebal-berat);
  letter-spacing: -.01em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appbar__sub { font-size: var(--teks-xs); color: var(--warna-teks-lembut); line-height: 1.35; }
.appbar__aksi { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.appbar .tombol-ikon { color: var(--warna-teks-lembut); }
.appbar .tombol-ikon:hover { color: var(--warna-teks); }
.appbar__tema .ikon { transition: transform var(--transisi-lambat); }
.appbar__tema:hover .ikon { transform: rotate(-20deg); }

.appbar__lonceng { position: relative; }
.appbar__jumlah {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--radius-penuh);
  background: var(--warna-bahaya);
  color: #fff;
  font-size: 10px;
  font-weight: var(--tebal-berat);
  box-shadow: 0 0 0 2px var(--warna-permukaan);
  animation: lencana-muncul 260ms var(--kurva) both;
}
@keyframes lencana-muncul { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Pemilih role di app bar. */
.pemilih-role {
  display: inline-flex;
  align-items: center;
  gap: var(--jarak-1);
  height: 34px;
  padding: 0 var(--jarak-2) 0 var(--jarak-3);
  margin-right: var(--jarak-1);
  border-radius: var(--radius-penuh);
  background: var(--warna-primer-lembut);
  border: 1px solid var(--warna-primer-garis);
  color: var(--warna-teks-primer);
  font-size: var(--teks-xs);
  font-weight: var(--tebal-tebal);
  letter-spacing: .02em;
  white-space: nowrap;
  transition: border-color var(--transisi-cepat);
}
.pemilih-role:hover { border-color: var(--warna-primer); }

/* Tanpa dukungan blur, permukaan tembus pandang membuat teks di bawahnya
   terbaca menembus bilah — pakai permukaan padat. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .appbar, .bottomnav { background: var(--warna-permukaan); }
}

/* =========================================================== bottomnav */

.bottomnav {
  position: sticky;
  bottom: 0;
  z-index: var(--z-bottomnav);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: var(--jarak-1) var(--jarak-1) calc(var(--jarak-1) + var(--aman-bawah));
  background: var(--warna-appbar);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--warna-garis);
}
.bottomnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 56px;
  padding: var(--jarak-1) 2px;
  color: var(--warna-teks-samar);
  font-size: 11px;
  font-weight: var(--tebal-sedang);
  transition: color var(--transisi-cepat);
}
.bottomnav__item:hover { text-decoration: none; color: var(--warna-teks-lembut); }
/* Pil di belakang ikon menandai tujuan aktif — terbaca sekilas meski
   warna teksnya saja tidak cukup kontras di bawah sinar matahari. */
.bottomnav__ikon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 30px;
  border-radius: var(--radius-penuh);
  transition: background var(--transisi), transform var(--transisi);
}
.bottomnav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.bottomnav__item[aria-current="page"] { color: var(--warna-teks-primer); font-weight: var(--tebal-tebal); }
.bottomnav__item[aria-current="page"] .bottomnav__ikon {
  background: var(--warna-primer-lembut);
  animation: pil-muncul 260ms var(--kurva) both;
}
@keyframes pil-muncul { from { transform: scaleX(.55); opacity: .4; } to { transform: none; opacity: 1; } }

/* Lembar "Menu": tujuan yang tidak muat di bottom navigation. */
.menu-lembar { display: grid; gap: var(--jarak-5); padding-bottom: var(--jarak-2); }
.menu-lembar__judul {
  margin-bottom: var(--jarak-2);
  font-size: var(--teks-xs);
  font-weight: var(--tebal-tebal);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--warna-teks-samar);
}
.menu-lembar__ubin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jarak-2); }
.ubin-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jarak-2);
  min-height: 96px;
  padding: var(--jarak-3) var(--jarak-1);
  border-radius: var(--radius-3);
  background: var(--warna-permukaan-2);
  border: 1px solid transparent;
  color: var(--warna-teks);
  font-size: var(--teks-xs);
  font-weight: var(--tebal-sedang);
  line-height: 1.3;
  text-align: center;
  transition: background var(--transisi-cepat), border-color var(--transisi-cepat);
}
.ubin-menu:hover { text-decoration: none; background: var(--warna-primer-lembut); }
.ubin-menu[aria-current="page"] { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
.ubin-menu__ikon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-3);
  background: var(--warna-permukaan);
  color: var(--warna-teks-primer);
  box-shadow: var(--bayang-1);
}

/* ============================================================ sidebar */

.sidebar { display: none; }

/* ====================================================== banner jaringan */

.banner-jaringan {
  position: sticky;
  top: 0;
  z-index: var(--z-banner);
  display: flex;
  align-items: center;
  gap: var(--jarak-2);
  padding: var(--jarak-2) var(--jarak-4);
  padding-top: calc(var(--jarak-2) + var(--aman-atas));
  background: var(--warna-peringatan-lembut);
  color: var(--warna-teks-peringatan);
  font-size: var(--teks-sm);
  font-weight: var(--tebal-sedang);
  border-bottom: 1px solid var(--warna-peringatan);
}
.banner-jaringan--sinkron {
  background: var(--warna-primer-lembut);
  color: var(--warna-teks-primer);
  border-bottom-color: var(--warna-primer);
}

/* ============================================================== toast */

.toast-wadah {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tinggi-bottomnav) + var(--aman-bawah) + var(--jarak-3));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--jarak-2);
  width: min(calc(100vw - var(--jarak-8)), 460px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--jarak-3);
  padding: var(--jarak-3) var(--jarak-4);
  border-radius: var(--radius-3);
  background: var(--abu-900);
  color: #fff;
  box-shadow: var(--bayang-3);
  font-size: var(--teks-sm);
  animation: toast-masuk var(--transisi) both;
}
.toast--keluar { animation: toast-keluar var(--transisi-cepat) both; }
.toast--sukses { background: var(--hijau-700); }
.toast--bahaya { background: var(--merah-700); }
.toast--peringatan { background: var(--amber-700); }
.toast--info { background: var(--navy-700); }
.toast__isi { flex: 1 1 auto; }
.toast__aksi {
  flex: none;
  color: #fff;
  font-weight: var(--tebal-tebal);
  text-decoration: underline;
  padding: 2px 4px;
}
@keyframes toast-masuk {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-keluar {
  to { opacity: 0; transform: translateY(8px); }
}

/* ======================================================== modal & sheet */

.tirai {
  position: fixed;
  inset: 0;
  background: var(--warna-tirai);
  animation: pudar-masuk var(--transisi-cepat) both;
}
@keyframes pudar-masuk { from { opacity: 0; } to { opacity: 1; } }

.modal-lapisan {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  /* minmax(0, …): isi yang panjang (mis. judul KC di dropdown) tidak boleh
     melebarkan dialog melampaui layar ponsel (v2.35.0). */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--jarak-4);
}
.modal {
  position: relative;
  width: min(560px, 100%);
  max-height: min(84dvh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--warna-permukaan-tinggi);
  border-radius: var(--radius-4);
  box-shadow: var(--bayang-3);
  animation: modal-masuk var(--transisi) both;
}

/* Dialog lebar untuk isi yang memang butuh ruang, mis. pratinjau A4 lanskap.
 * `width` ikut ditimpa: .modal memakai width: min(560px, 100%), sehingga
 * max-width saja tidak akan melebarkannya sama sekali. Dua kelas (bukan satu)
 * karena layouts.css — dimuat sesudah berkas ini — menetapkan ulang lebar
 * .modal di desktop dan sebelumnya ikut menyempitkan dialog lebar. */
.modal.modal--lebar { width: min(96vw, 1100px); }
@keyframes modal-masuk {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.modal__kepala {
  display: flex;
  align-items: flex-start;
  gap: var(--jarak-3);
  padding: var(--jarak-4) var(--jarak-4) var(--jarak-3);
  border-bottom: 1px solid var(--warna-garis);
}
.modal__judul { font-size: var(--teks-lg); font-weight: var(--tebal-tebal); }
.modal__sub { font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.modal__tutup { margin-left: auto; color: var(--warna-teks-lembut); }
.modal__tutup:hover { background: var(--warna-permukaan-2); }
.modal__isi { padding: var(--jarak-4); overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Pesan konfirmasi boleh berisi daftar baris (mis. daftar peringatan jadwal). */
.modal__isi > p { white-space: pre-line; }
.modal__kaki {
  display: flex;
  gap: var(--jarak-2);
  padding: var(--jarak-3) var(--jarak-4) var(--jarak-4);
  border-top: 1px solid var(--warna-garis);
}
.modal__kaki .tombol { flex: 1 1 auto; }

.sheet-lapisan { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; align-items: flex-end; }
.sheet {
  position: relative;
  width: 100%;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  background: var(--warna-permukaan-tinggi);
  border-radius: var(--radius-4) var(--radius-4) 0 0;
  box-shadow: var(--bayang-3);
  padding-bottom: var(--aman-bawah);
  animation: sheet-naik var(--transisi) both;
}
@keyframes sheet-naik { from { transform: translateY(100%); } to { transform: none; } }
.sheet__pegangan {
  width: 40px; height: 4px;
  margin: var(--jarak-3) auto var(--jarak-1);
  border-radius: var(--radius-penuh);
  background: var(--warna-garis-kuat);
  flex: none;
}
.sheet__kepala { padding: var(--jarak-2) var(--jarak-4) var(--jarak-3); }
.sheet__judul { font-size: var(--teks-lg); font-weight: var(--tebal-tebal); }
.sheet__sub { font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.sheet__isi { padding: 0 var(--jarak-4) var(--jarak-4); overflow-y: auto; }
.sheet__kaki { padding: var(--jarak-3) var(--jarak-4) var(--jarak-4); display: flex; gap: var(--jarak-2); }
.sheet__kaki .tombol { flex: 1 1 auto; }
/* Layar lebar (v2.40.2): lembar bawah tidak membentang selebar layar — baris
   dan kotak cari 2000px sukar dibaca. Lebar maksimum 640px di tengah, sesuai
   pedoman bottom sheet Material 3 untuk layar besar. */
@media (min-width: 768px) {
  .sheet-lapisan { justify-content: center; }
  .sheet { max-width: 640px; }
}

/* Daftar aksi di dalam bottom sheet. */
.sheet-aksi { display: flex; flex-direction: column; }
.sheet-aksi__item {
  display: flex;
  align-items: center;
  gap: var(--jarak-3);
  width: 100%;
  min-height: var(--target-sentuh);
  padding: var(--jarak-3) var(--jarak-1);
  font-size: var(--teks-md);
  text-align: left;
  border-radius: var(--radius-2);
}
.sheet-aksi__item:hover { background: var(--warna-permukaan-2); }
.sheet-aksi__item--bahaya { color: var(--warna-teks-bahaya); }
.sheet-aksi__ikon { font-size: 20px; width: 24px; text-align: center; }

/* ============================================================ skeleton */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--warna-permukaan-2);
  border-radius: var(--radius-2);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--warna-kilau), transparent);
  animation: kilau 1.3s infinite;
}
@keyframes kilau { 100% { transform: translateX(100%); } }

.skeleton--teks { height: 12px; margin-bottom: var(--jarak-2); }
.skeleton--judul { height: 18px; width: 60%; margin-bottom: var(--jarak-3); }
.skeleton--baris { height: 12px; width: 100%; }
.skeleton--pendek { width: 40%; }
.skeleton--lingkar { border-radius: var(--radius-penuh); }

/* ============================================================== funnel */

.funnel__jalur {
  height: 22px;
  border-radius: var(--radius-1);
  background: var(--warna-permukaan-2);
  overflow: hidden;
}
.funnel__isi {
  height: 100%;
  border-radius: inherit;
  transform-origin: left;
  animation: batang-tumbuh 600ms var(--kurva) both;
}
@keyframes batang-tumbuh { from { transform: scaleX(0); } to { transform: none; } }

/* ============================================================= progres */

.progres {
  height: 8px;
  border-radius: var(--radius-penuh);
  background: var(--warna-permukaan-2);
  overflow: hidden;
}
.progres__isi {
  height: 100%;
  border-radius: inherit;
  background: var(--warna-primer);
  transform-origin: left;
  transition: width var(--transisi-lambat);
  animation: batang-tumbuh 700ms var(--kurva) both;
}
.progres--sukses .progres__isi { background: var(--warna-sukses); }
.progres--aksen .progres__isi { background: var(--warna-aksen); }
.progres--peringatan .progres__isi { background: var(--warna-peringatan); }
.progres--bahaya .progres__isi { background: var(--warna-bahaya); }

.cincin { display: grid; place-items: center; position: relative; }
.cincin__teks {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.15;
}
.cincin__angka { font-size: var(--teks-2xl); font-weight: var(--tebal-berat); }
.cincin__label { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }

/* =============================================================== daftar */

.daftar { display: flex; flex-direction: column; gap: var(--jarak-2); }

.daftar-item {
  display: flex;
  align-items: center;
  gap: var(--jarak-3);
  width: 100%;
  min-height: var(--target-sentuh);
  padding: var(--jarak-3);
  background: var(--warna-permukaan);
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-2);
  text-align: left;
}
.daftar-item--klik { cursor: pointer; transition: border-color var(--transisi-cepat), background var(--transisi-cepat); }
.daftar-item--klik:hover { background: var(--warna-permukaan-2); border-color: var(--warna-garis-kuat); text-decoration: none; }
.daftar-item--terpilih { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
.daftar-item__utama { flex: 1 1 auto; min-width: 0; }
/* display:block wajib: .potong (overflow + ellipsis) tidak berlaku pada span
   sebaris, sehingga judul panjang meluap menimpa lencana di kanannya. */
.daftar-item__judul { display: block; font-weight: var(--tebal-sedang); }
.daftar-item__meta { display: block; font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.daftar-item__kanan { flex: none; display: flex; align-items: center; gap: var(--jarak-2); }

.avatar {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-penuh);
  background: var(--warna-primer-lembut);
  color: var(--warna-teks-primer);
  font-weight: var(--tebal-tebal);
  font-size: var(--teks-sm);
}
.avatar--kecil { width: 30px; height: 30px; font-size: var(--teks-xs); }

/* ======================================================== keadaan kosong */

.keadaan-kosong {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jarak-2);
  padding: var(--jarak-10) var(--jarak-4);
  text-align: center;
}
.keadaan-kosong__ikon { font-size: 40px; line-height: 1; }
.keadaan-kosong__judul { font-weight: var(--tebal-tebal); font-size: var(--teks-md); }
.keadaan-kosong__pesan { color: var(--warna-teks-lembut); font-size: var(--teks-sm); max-width: 42ch; }
.keadaan-kosong--galat .keadaan-kosong__judul { color: var(--warna-teks-bahaya); }

/* ============================================================= formulir */

.bidang { display: flex; flex-direction: column; gap: var(--jarak-2); }
.bidang__label { font-size: var(--teks-sm); font-weight: var(--tebal-sedang); color: var(--warna-teks); }
.bidang__wajib { color: var(--warna-teks-bahaya); }
.bidang__bantuan { font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.bidang__galat { font-size: var(--teks-xs); color: var(--warna-teks-bahaya); font-weight: var(--tebal-sedang); }

.bidang-sandi { position: relative; }
.bidang-sandi input { padding-right: 52px; }
.bidang-sandi__lihat {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--warna-teks-lembut);
  border-radius: var(--radius-2);
}

.centang {
  display: flex;
  align-items: center;
  gap: var(--jarak-3);
  min-height: var(--target-sentuh);
  padding: var(--jarak-2) var(--jarak-1);
  cursor: pointer;
  border-radius: var(--radius-2);
}
.centang:hover { background: var(--warna-permukaan-2); }
.centang input { flex: none; }
.centang--nonaktif { opacity: .55; cursor: not-allowed; }

/* Keadaan terpilih harus terbaca sekilas dari jarak baca ponsel — kotak centang
   bawaan peramban terlalu kecil sebagai satu-satunya penanda saat guru
   mencentang puluhan siswa berturut-turut. */
.centang:has(input:checked),
.centang--terpilih {
  background: var(--warna-primer-lembut);
  border-color: var(--warna-primer) !important;
  box-shadow: inset 3px 0 0 var(--warna-primer);
}
.centang:has(input:checked) .teks-sedang,
.centang--terpilih .teks-sedang {
  color: var(--warna-teks-primer);
  font-weight: var(--tebal-tebal);
}
.centang:has(input:disabled) { opacity: .55; }

/* Baris daftar yang dipilih lewat kotak centang (kotak masuk PIC, kandidat sesi). */
.daftar-item:has(input:checked) {
  border-color: var(--warna-primer);
  background: var(--warna-primer-lembut);
}
.kartu:has(input:checked) {
  border-color: var(--warna-primer);
  box-shadow: inset 3px 0 0 var(--warna-primer), var(--bayang-1);
}

/* Kelompok tombol pilihan (segmented control). */
.segmen {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--warna-permukaan-2);
  border-radius: var(--radius-2);
  width: 100%;
}
.segmen__item {
  flex: 1 1 0;
  min-height: 38px;
  padding: var(--jarak-2) var(--jarak-3);
  border-radius: calc(var(--radius-2) - 2px);
  font-size: var(--teks-sm);
  font-weight: var(--tebal-sedang);
  color: var(--warna-teks-lembut);
  white-space: nowrap;
}
.segmen__item[aria-pressed="true"] {
  background: var(--warna-permukaan);
  color: var(--warna-teks);
  font-weight: var(--tebal-tebal);
  box-shadow: var(--bayang-1);
}

/* Baris filter yang dapat digulir mendatar. */
.filter-baris {
  display: flex;
  gap: var(--jarak-2);
  overflow-x: auto;
  padding-bottom: var(--jarak-1);
  scrollbar-width: none;
}
.filter-baris::-webkit-scrollbar { display: none; }
.cip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--jarak-1);
  min-height: 36px;
  padding: var(--jarak-2) var(--jarak-3);
  border-radius: var(--radius-penuh);
  border: 1px solid var(--warna-garis-kuat);
  background: var(--warna-permukaan);
  font-size: var(--teks-sm);
  font-weight: var(--tebal-sedang);
  color: var(--warna-teks-lembut);
  white-space: nowrap;
}
.cip[aria-pressed="true"] {
  background: var(--warna-primer);
  border-color: var(--warna-primer);
  color: var(--warna-teks-terbalik);
}
.cip__hapus { font-size: var(--teks-md); line-height: 1; opacity: .8; }

/* =============================================================== tabel */

.tabel-bungkus {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-3);
  background: var(--warna-permukaan);
}
.tabel { width: 100%; border-collapse: collapse; font-size: var(--teks-sm); }
.tabel th, .tabel td {
  padding: var(--jarak-3);
  text-align: left;
  border-bottom: 1px solid var(--warna-garis);
  white-space: nowrap;
}
.tabel th {
  position: sticky; top: 0;
  background: var(--warna-permukaan-2);
  font-weight: var(--tebal-tebal);
  color: var(--warna-teks-lembut);
  font-size: var(--teks-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tabel tbody tr:last-child td { border-bottom: none; }
.tabel tbody tr { transition: background var(--transisi-cepat); }
.tabel tbody tr:hover { background: var(--warna-sorot); }
.tabel td.angka, .tabel th.angka { text-align: right; font-variant-numeric: tabular-nums; }
/* Kolom pertama tetap terlihat saat tabel digulir mendatar. */
.tabel--lengket-kiri th:first-child,
.tabel--lengket-kiri td:first-child {
  position: sticky; left: 0;
  background: var(--warna-permukaan);
  z-index: 1;
}
.tabel--lengket-kiri th:first-child { background: var(--warna-permukaan-2); z-index: 2; }

/* ============================================================ timeline */

.timeline { display: flex; flex-direction: column; }
.timeline__item {
  position: relative;
  display: flex;
  gap: var(--jarak-3);
  padding-bottom: var(--jarak-4);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__titik {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: var(--radius-penuh);
  border: 2px solid var(--warna-garis-kuat);
  background: var(--warna-permukaan);
  display: grid; place-items: center;
  font-size: 11px;
  color: var(--warna-teks-samar);
}
.timeline__item--selesai .timeline__titik {
  border-color: var(--warna-sukses);
  background: var(--warna-sukses);
  color: #fff;
}
.timeline__item--gagal .timeline__titik {
  border-color: var(--warna-bahaya);
  background: var(--warna-bahaya);
  color: #fff;
}
.timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 10px; top: 26px; bottom: 4px;
  width: 2px;
  background: var(--warna-garis);
}
.timeline__item--selesai:not(:last-child)::before { background: var(--warna-sukses); }
.timeline__judul { font-weight: var(--tebal-sedang); font-size: var(--teks-sm); }
.timeline__waktu { font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.timeline__catatan { font-size: var(--teks-sm); color: var(--warna-teks-lembut); margin-top: 2px; }

/* Tahapan ringkas (v2.49.0): penanda mendatar satu baris + rincian yang dapat
   dibuka. Kolom sama lebar (--n tahap); label maksimal dua baris. */
.alur-tahap-wadah { display: grid; gap: 6px; min-width: 0; }
.alur-tahap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.alur-tahap__item { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; padding: 0 2px; text-align: center; }
.alur-tahap__item::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--warna-garis); }
.alur-tahap__item:first-child::before { display: none; }
.alur-tahap__item--selesai::before { background: var(--warna-sukses); }
.alur-tahap__item--gagal::before { background: var(--warna-bahaya); }
.alur-tahap__titik { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-penuh);
  border: 2px solid var(--warna-garis-kuat); background: var(--warna-permukaan); color: var(--warna-teks-samar); font-size: 11px; font-weight: var(--tebal-tebal);
  animation: alur-muncul .35s var(--kurva) both; animation-delay: calc(var(--i, 0) * 60ms); }
.alur-tahap__item--selesai .alur-tahap__titik { border-color: var(--warna-sukses); background: var(--warna-sukses); color: #fff; }
.alur-tahap__item--gagal .alur-tahap__titik { border-color: var(--warna-bahaya); background: var(--warna-bahaya); color: #fff; }
.alur-tahap__item--kini .alur-tahap__titik { border-color: var(--warna-primer); color: var(--warna-teks-primer); box-shadow: 0 0 0 4px var(--warna-primer-lembut); }
.alur-tahap__label { font-size: 12px; line-height: 1.3; color: var(--warna-teks-lembut); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.alur-tahap__item--selesai .alur-tahap__label, .alur-tahap__item--gagal .alur-tahap__label, .alur-tahap__item--kini .alur-tahap__label { color: var(--warna-teks); font-weight: var(--tebal-sedang); }
.alur-tahap__posisi { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--warna-teks-lembut); }
.alur-tahap__posisi strong { color: var(--warna-teks); font-weight: var(--tebal-tebal); }
.alur-tahap__posisi--gagal strong { color: var(--warna-teks-bahaya); }
.alur-tahap__rincian > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; list-style: none; cursor: pointer;
  font-size: 12px; font-weight: var(--tebal-tebal); color: var(--warna-teks-primer); }
.alur-tahap__rincian > summary::-webkit-details-marker { display: none; }
.alur-tahap__rincian > summary svg { transition: transform var(--transisi-cepat); }
.alur-tahap__rincian[open] > summary svg { transform: rotate(180deg); }
.alur-tahap__rincian > .timeline { margin-top: 6px; padding: 10px 12px; border-radius: var(--radius-2); background: var(--warna-permukaan-2); animation: sh-naik .25s var(--kurva) both; }
@keyframes alur-muncul { from { transform: scale(.6); opacity: 0; } }
@media (max-width: 767.98px), (pointer: coarse) { .alur-tahap__rincian > summary { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .alur-tahap__titik, .alur-tahap__rincian > .timeline { animation: none; } }

/* ======================================================== judul bagian */

.judul-bagian {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--jarak-3);
  margin-bottom: var(--jarak-3);
}
.judul-bagian__teks {
  font-size: var(--teks-md);
  font-weight: var(--tebal-berat);
  letter-spacing: -.005em;
}

/* ==================================================== bilah aksi lengket */

.bilah-aksi {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--jarak-2);
  padding: var(--jarak-3);
  padding-bottom: calc(var(--jarak-3) + var(--aman-bawah));
  margin: var(--jarak-4) calc(var(--jarak-4) * -1) calc(var(--jarak-4) * -1);
  background: var(--warna-permukaan);
  border-top: 1px solid var(--warna-garis);
  box-shadow: var(--bayang-atas);
}
.bilah-aksi .tombol { flex: 1 1 auto; }

/* Bilah pilihan massal yang muncul saat ada item tercentang. */
.bilah-pilihan {
  position: sticky;
  top: var(--tinggi-appbar);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--jarak-2);
  padding: var(--jarak-2) var(--jarak-3);
  background: var(--warna-primer-lembut);
  border: 1px solid var(--warna-primer-garis);
  border-radius: var(--radius-2);
  font-size: var(--teks-sm);
  font-weight: var(--tebal-sedang);
  color: var(--warna-teks-primer);
}

/* ============================================================ bilah alat */

/* Cari + pilihan + tombol. Di ponsel kotak cari mendapat barisnya sendiri;
   tanpa itu ia terjepit menjadi selebar kata "Cari…". */
.bilah-alat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-2); }
.bilah-alat__cari { flex: 1 1 100%; min-width: 0; }
.bilah-alat > select { width: auto; flex: none; }
.bilah-alat > .tombol { margin-left: auto; }
@media (min-width: 560px) {
  .bilah-alat__cari { flex-basis: 0; }
  .bilah-alat > .tombol { margin-left: 0; }
}

/* Bilah penyaring: kotak cari (dibungkus .isi-sisa) + beberapa <select>.
   Dipakai Dokumen Soal & Buku Saku; sebelum v2.21.0 kelas ini tidak bergaya
   sehingga setiap penyaring menempati satu baris penuh. */
.bilah-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-2); }
.bilah-filter > .isi-sisa { flex: 1 1 100%; min-width: 0; }
.bilah-filter > select { width: auto; flex: 1 1 160px; max-width: 100%; }
@media (min-width: 720px) {
  .bilah-filter > .isi-sisa { flex: 1 1 260px; }
  .bilah-filter > select { flex: 0 1 220px; }
}

/* Pilihan di dalam baris fleksibel tidak ikut melebar 100% seperti di formulir. */
.baris > select, .baris-antara > select { width: auto; flex: none; }

/* Zona berbahaya yang dapat dilipat. */
.zona-bahaya {
  border: 1px solid color-mix(in srgb, var(--warna-bahaya) 35%, var(--warna-garis));
  border-radius: var(--radius-3);
  background: var(--warna-permukaan);
  padding: var(--jarak-3) var(--jarak-4);
}
.zona-bahaya[open] { background: var(--warna-bahaya-lembut); border-color: var(--warna-bahaya); }
.zona-bahaya > :not(summary) { margin-top: var(--jarak-3); }
.zona-bahaya__ringkas {
  display: flex;
  align-items: center;
  gap: var(--jarak-2);
  cursor: pointer;
  font-size: var(--teks-sm);
  font-weight: var(--tebal-tebal);
  color: var(--warna-teks-bahaya);
}

/* ============================================================== statistik */

.statistik {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--jarak-2);
}
/* Empat petak: 2×2 di ponsel, satu baris di layar lebar. auto-fit membuatnya
   3+1 di lebar ponsel umum — satu angka tertinggal sendirian di baris kedua. */
.statistik[data-jumlah="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) {
  .statistik[data-jumlah="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.statistik__sel {
  padding: var(--jarak-3);
  border-radius: var(--radius-2);
  background: var(--warna-permukaan-2);
  border: 1px solid var(--warna-garis);
  text-align: center;
}
.statistik__angka { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1.1; }
.statistik__label { font-size: var(--teks-xs); color: var(--warna-teks-lembut); margin-top: 2px; }

/* ======================================================= indikator pemuat */

.pemuat-bilah {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: calc(var(--z-toast) + 1);
  background: transparent;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--transisi-cepat);
  pointer-events: none;
}
.pemuat-bilah--aktif { opacity: 1; }
.pemuat-bilah__isi {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: var(--radius-penuh);
  background: linear-gradient(90deg,
    var(--warna-primer), var(--warna-aksen), var(--warna-primer));
  animation: pemuat-lari 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
}
.pemuat-bilah--tuntas .pemuat-bilah__isi {
  animation: none;
  width: 100%;
  transition: width 180ms ease-out;
}
@keyframes pemuat-lari {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

.pemuat-tirai {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--warna-latar) 82%, transparent);
  backdrop-filter: blur(3px);
  animation: pudar-masuk 160ms ease-out both;
}
.pemuat-tirai__kotak {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jarak-4);
}
.pemuat-tirai__teks {
  font-size: var(--teks-sm);
  font-weight: var(--tebal-sedang);
  color: var(--warna-teks-lembut);
}

.pemuat-denyut {
  position: relative;
  width: 68px; height: 68px;
  display: grid; place-items: center;
}
.pemuat-denyut__cincin {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-penuh);
  border: 3px solid var(--warna-primer-garis);
  border-top-color: var(--warna-primer);
  animation: pemuat-putar 900ms linear infinite;
}
.pemuat-denyut__logo {
  width: 44px; height: 44px;
  border-radius: 22%;
  animation: pemuat-denyut 1.6s ease-in-out infinite;
}
@keyframes pemuat-putar { to { transform: rotate(360deg); } }
@keyframes pemuat-denyut {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(.88); }
}

/* Pengguna yang membatasi gerak cukup melihat perubahan kehalusan warna. */
@media (prefers-reduced-motion: reduce) {
  .pemuat-bilah__isi { animation: none; width: 100%; }
  .pemuat-denyut__cincin { animation: none; border-top-color: var(--warna-primer); }
  .pemuat-denyut__logo { animation: none; }
}

/* ============================================== dropdown dengan pencarian */

.pilihcari { position: relative; min-width: 0; }

.pilihcari__tombol {
  display: flex;
  align-items: center;
  gap: var(--jarak-2);
  width: 100%;
  min-height: var(--target-sentuh);
  padding: var(--jarak-3) var(--jarak-4);
  background: var(--warna-permukaan);
  border: 1px solid var(--warna-garis-kuat);
  border-radius: var(--radius-2);
  font-size: var(--teks-input);
  text-align: left;
  transition: border-color var(--transisi-cepat), box-shadow var(--transisi-cepat);
}
.pilihcari__tombol:hover { border-color: var(--warna-primer); }
.pilihcari__tombol[aria-expanded="true"] {
  border-color: var(--warna-primer);
  box-shadow: 0 0 0 3px var(--warna-primer-lembut);
}
.pilihcari__tombol[aria-invalid="true"] { border-color: var(--warna-bahaya); }
.pilihcari__tombol:disabled { cursor: not-allowed; background: var(--warna-permukaan-2); }
.pilihcari__tombol:disabled:hover { border-color: var(--warna-garis-kuat); }
/* Putaran kecil saat pilihan sedang diambil dari server (v2.18.0). */
.pilihcari__putar {
  flex: none;
  width: 16px; height: 16px;
  border-radius: var(--radius-penuh);
  border: 2px solid var(--warna-primer-garis);
  border-top-color: var(--warna-primer);
  animation: pemuat-putar 800ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pilihcari__putar { animation: none; border-top-color: var(--warna-primer); }
}
.pilihcari__teks { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilihcari__teks--kosong { color: var(--warna-teks-samar); }
.pilihcari__panah { flex: none; color: var(--warna-teks-samar); font-size: var(--teks-sm); }

/* Panel dilekatkan ke <body>, bukan ke bidangnya, supaya tidak terpotong oleh
   pembungkus ber-overflow seperti isi modal. Posisi dan tingginya dihitung
   di JavaScript; di sini hanya penampilannya. z-index harus di atas modal
   (yang memakai 50) agar panel tetap terlihat saat dibuka dari dalam dialog. */
.pilihcari__panel {
  position: fixed;
  z-index: calc(var(--z-modal) + 2);
  display: flex;
  flex-direction: column;
  background: var(--warna-permukaan-tinggi);
  border: 1px solid var(--warna-garis-kuat);
  border-radius: var(--radius-2);
  box-shadow: var(--bayang-3);
  overflow: hidden;
  animation: pilihcari-masuk 140ms cubic-bezier(.2, .8, .3, 1) both;
}
.pilihcari__panel--atas { animation-name: pilihcari-masuk-atas; }
@keyframes pilihcari-masuk {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pilihcari-masuk-atas {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pilihcari__panel { animation: none; }
}

.pilihcari__kepala {
  flex: none;
  padding: var(--jarak-2);
  border-bottom: 1px solid var(--warna-garis);
}
.pilihcari__cari { min-height: 40px; padding: var(--jarak-2) var(--jarak-3); }

/* Daftar mengisi sisa tinggi panel; batas tingginya ditetapkan pada panel. */
.pilihcari__daftar {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.pilihcari__opsi {
  display: flex;
  align-items: center;
  gap: var(--jarak-2);
  min-height: var(--target-sentuh);
  padding: var(--jarak-2) var(--jarak-3);
  font-size: var(--teks-md);
  cursor: pointer;
}
.pilihcari__opsi:hover,
.pilihcari__opsi--sorot { background: var(--warna-permukaan-2); }
.pilihcari__opsi--terpilih {
  background: var(--warna-primer-lembut);
  color: var(--warna-teks-primer);
  font-weight: var(--tebal-sedang);
}
.pilihcari__keterangan {
  display: block;
  font-size: var(--teks-xs);
  color: var(--warna-teks-samar);
}
.pilihcari__grup {
  padding: var(--jarak-3) var(--jarak-3) var(--jarak-1);
  font-size: var(--teks-xs);
  font-weight: var(--tebal-tebal);
  color: var(--warna-teks-samar);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.pilihcari__kosong {
  padding: var(--jarak-5) var(--jarak-3);
  text-align: center;
  font-size: var(--teks-sm);
  color: var(--warna-teks-samar);
}

/* ============================================================ tabel data */

.tabeldata { display: flex; flex-direction: column; gap: var(--jarak-3); }

.tabeldata__bilah { display: flex; gap: var(--jarak-2); align-items: center; }
.tabeldata__bilah select { width: auto; flex: none; min-width: 116px; }

.tabeldata__urut { cursor: pointer; user-select: none; white-space: nowrap; }
.tabeldata__urut:hover { color: var(--warna-teks-primer); }
.tabeldata__panah { margin-left: var(--jarak-1); opacity: .5; font-size: 10px; }
.tabeldata__urut[aria-sort="ascending"] .tabeldata__panah,
.tabeldata__urut[aria-sort="descending"] .tabeldata__panah {
  opacity: 1;
  color: var(--warna-primer);
}

.tabeldata__paginasi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--jarak-1);
}
.tabeldata__hal {
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--jarak-2);
  border-radius: var(--radius-2);
  border: 1px solid var(--warna-garis);
  background: var(--warna-permukaan);
  font-size: var(--teks-sm);
  font-weight: var(--tebal-sedang);
  color: var(--warna-teks-lembut);
}
.tabeldata__hal:hover:not(:disabled) {
  border-color: var(--warna-primer);
  color: var(--warna-teks-primer);
}
.tabeldata__hal:disabled { opacity: .4; }
.tabeldata__hal--aktif {
  background: var(--warna-primer);
  border-color: var(--warna-primer);
  color: var(--warna-teks-terbalik);
  font-weight: var(--tebal-tebal);
}
.tabeldata__elipsis {
  display: grid;
  place-items: center;
  min-width: 24px;
  color: var(--warna-teks-samar);
}

/* v2.49.0: pasangan label–nilai dua per baris (label kecil di atas nilai),
   bukan satu per baris — kartu ±30% lebih pendek di HP. */
.tabeldata__rincian {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: var(--jarak-2) var(--jarak-3);
  margin-top: var(--jarak-3);
  padding-top: var(--jarak-3);
  border-top: 1px solid var(--warna-garis);
}
.tabeldata__pasangan {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  font-size: var(--teks-sm);
}
.tabeldata__pasangan dt { color: var(--warna-teks-samar); font-size: 12px; }
.tabeldata__pasangan dd { margin: 0; }

/* Di bawah 768px tabel berganti menjadi kartu; di atasnya sebaliknya. */
.tabeldata__tabel { display: none; }
.tabeldata__kartu { display: flex; }

@media (min-width: 768px) {
  .tabeldata__tabel { display: block; }
  .tabeldata__kartu { display: none; }
  .tabeldata__bilah select { min-width: 140px; }
}

/* ================================================== kartu & peringatan ==== */

.kartu--bahaya {
  border-color: var(--warna-bahaya);
  background: var(--warna-bahaya-lembut);
}
.kartu--bahaya > p:first-child { color: var(--warna-teks-bahaya); }

.peringatan {
  padding: var(--jarak-3);
  border-radius: var(--radius-2);
  border: 1px solid var(--warna-garis);
  background: var(--warna-permukaan-2);
  font-size: var(--teks-sm);
}
.peringatan--bahaya {
  border-color: var(--warna-bahaya);
  background: var(--warna-bahaya-lembut);
  color: var(--warna-teks-bahaya);
}
.peringatan--peringatan {
  border-color: var(--warna-peringatan);
  background: var(--warna-peringatan-lembut);
  color: var(--warna-teks-peringatan);
}

.daftar-titik {
  margin: var(--jarak-2) 0 0;
  padding-left: var(--jarak-5);
  list-style: disc;
  display: grid;
  gap: var(--jarak-1);
}

/* ============================================== bidang formulir terkunci === */

/* Bidang yang tidak boleh diubah pada status tertentu tetap ditampilkan, bukan
   disembunyikan — LSP perlu melihat nilainya dan tahu bahwa bidang itu ada. */
.bidang--terkunci { opacity: .55; }
.bidang--terkunci .bidang__label::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 4px;
  vertical-align: -1px;
  background-color: currentColor;
  /* Lambang gembok Lucide (ISC) sebagai mask, supaya mewarisi warna label. */
  mask: var(--gembok-kecil) center / contain no-repeat;
  -webkit-mask: var(--gembok-kecil) center / contain no-repeat;
}
.bidang--terkunci input,
.bidang--terkunci textarea,
.bidang--terkunci .pilihcari__tombol {
  cursor: not-allowed;
  background: var(--warna-permukaan-2);
}

/* ================================================ tombol keputusan uji === */

/* Empat pilihan penguji dibuat sebagai tombol besar, bukan dropdown atau
   segmented control: penguji memutuskan sambil berdiri di bengkel, sering
   dengan satu tangan, dan keputusannya tidak boleh salah tekan. */
.keputusan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--jarak-1);
  min-height: 76px;
  padding: var(--jarak-3);
  border: 2px solid var(--warna-garis);
  border-radius: var(--radius-3);
  background: var(--warna-permukaan);
  color: var(--warna-teks-lembut);
  font-size: var(--teks-sm);
  font-weight: var(--tebal-sedang);
  text-align: center;
  line-height: 1.25;
  transition: border-color var(--transisi-cepat), background var(--transisi-cepat);
}
.keputusan__ikon { font-size: 20px; line-height: 1; }
.keputusan:hover { border-color: var(--warna-garis-kuat); }

.keputusan--aktif { color: var(--warna-teks-primer); }
.keputusan--sukses.keputusan--aktif {
  border-color: var(--warna-sukses);
  background: var(--warna-sukses-lembut);
  color: var(--warna-teks-sukses);
}
.keputusan--bahaya.keputusan--aktif {
  border-color: var(--warna-bahaya);
  background: var(--warna-bahaya-lembut);
  color: var(--warna-teks-bahaya);
}
.keputusan--sekunder.keputusan--aktif {
  border-color: var(--warna-garis-kuat);
  background: var(--warna-permukaan-2);
  color: var(--warna-teks);
}
/* "Minta tinjauan" sengaja tetap netral walau aktif: ia jalan keluar,
   bukan pilihan setara dengan keputusan yang sebenarnya. */
.keputusan--hantu.keputusan--aktif {
  border-color: var(--warna-peringatan);
  background: var(--warna-peringatan-lembut);
  color: var(--warna-teks-peringatan);
}

/* Kartu untuk catatan yang sudah tidak berlaku — pengecualian yang dicabut
   tetap ditampilkan sebagai jejak, tetapi tidak boleh menuntut perhatian
   sebesar yang masih aktif. */
.kartu--pudar { opacity: .6; }

/* ========================================================= ikon antarmuka === */

/* Lambang mengikuti warna dan ukuran teks di sekitarnya. Sejajar tengah secara
   optik dengan huruf, bukan dengan garis dasar — ikon sebaris yang duduk di
   baseline selalu terlihat melorot. */
.ikon {
  display: inline-block;
  vertical-align: -0.125em;
  flex: none;
  color: inherit;
}

/* Jarak ikon ke label tombol sudah diatur oleh gap pada .tombol itu sendiri,
   jadi di sini tidak perlu margin tambahan. */

/* Ikon navigasi lebih besar dan tidak pernah menyusut. */
.bottomnav__ikon .ikon,
.sidebar__ikon .ikon { width: 22px; height: 22px; }

/* Ikon pada keadaan kosong: besar, redup, tidak menuntut perhatian. */
.keadaan-kosong__ikon .ikon {
  width: 40px;
  height: 40px;
  color: var(--warna-teks-samar);
  stroke-width: 1.5;
}

/* Baris rincian (tanggal, tempat, penguji) — ikon sejajar dengan teksnya. */
.baris-ikon {
  display: flex;
  align-items: flex-start;
  gap: var(--jarak-2);
}

/* Digeser sedikit ke bawah supaya pusat lambang sejajar dengan huruf pada
   baris pertama, bukan dengan bagian atas kotak barisnya. */
.baris-ikon > .ikon { margin-top: .15em; }

/* Ikon banner jaringan tidak boleh ikut menyusut saat pesannya membungkus. */
.banner-jaringan__ikon {
  flex: none;
  display: inline-flex;
  align-items: center;
}

/* ====================================================== monitoring capaian === */

/* KPI: grid yang menyusut sendiri. Di ponsel dua kolom — satu kolom membuat
   pengguna harus menggulir jauh hanya untuk membaca enam angka. */
/* Enam KPI. Jumlah kolomnya ditentukan bertingkat, bukan diserahkan pada
   auto-fit: pada lebar menengah auto-fit menghasilkan 4+2, yang membuat dua
   angka terakhir tampak seperti sisa. Kelipatan 6 — yaitu 6, 3, lalu 2 —
   selalu menghasilkan baris yang penuh. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--jarak-3);
}
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--jarak-2); }
}

.kpi {
  background: var(--warna-permukaan);
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-3);
  padding: var(--jarak-3);
  display: flex;
  flex-direction: column;
  gap: var(--jarak-1);
}
.kpi__kepala {
  display: flex;
  align-items: center;
  gap: var(--jarak-2);
  color: var(--warna-teks-samar);
}
.kpi__label { font-size: var(--teks-xs); line-height: 1.3; }
.kpi__angka { font-size: var(--teks-2xl); font-weight: var(--tebal-berat); line-height: 1.1; }
.kpi__sub { font-size: var(--teks-xs); color: var(--warna-teks-samar); }

/* Sebaran: tiga bilah bertumpuk, masing-masing dengan angkanya sendiri. */
.distribusi { display: grid; gap: var(--jarak-4); }
.distribusi__baris { display: grid; gap: var(--jarak-1); }

/* Keterangan cara menghitung. Tertutup secara bawaan: pembaca yang sudah paham
   tidak perlu melewatinya setiap kali membuka halaman. */
.keterangan-metrik {
  font-size: var(--teks-sm);
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-2);
  padding: var(--jarak-2) var(--jarak-3);
  background: var(--warna-permukaan-2);
}
.keterangan-metrik > summary {
  cursor: pointer;
  color: var(--warna-teks-lembut);
  font-weight: var(--tebal-sedang);
}
.keterangan-metrik > summary:focus-visible { outline: 2px solid var(--warna-primer); outline-offset: 2px; }
.keterangan-metrik ul { margin: var(--jarak-2) 0 0; padding-left: var(--jarak-4); }
.keterangan-metrik li + li { margin-top: var(--jarak-1); }

/* Tabel lebar menggulir di dalam wadahnya sendiri, bukan menggeser halaman. */
.tabel-gulir {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-3);
  background: var(--warna-permukaan);
}
.tabel--peringkat th:first-child,
.tabel--peringkat td:first-child { white-space: normal; min-width: 11rem; }

.baris-klik { cursor: pointer; }
.baris-klik:hover { background: var(--warna-permukaan-2); }
.baris-klik:focus-visible { outline: 2px solid var(--warna-primer); outline-offset: -2px; }

/* Di layar sempit, tiap baris tabel peringkat menjadi kartu. Tabel lima kolom
   yang digulir menyamping menyembunyikan kolom status — justru kolom yang
   paling dicari pada halaman ini. */
@media (max-width: 640px) {
  .tabel--peringkat thead { display: none; }
  .tabel--peringkat, .tabel--peringkat tbody, .tabel--peringkat tr, .tabel--peringkat td {
    display: block; width: 100%;
  }
  .tabel--peringkat tr {
    padding: var(--jarak-3);
    border-bottom: 1px solid var(--warna-garis);
  }
  .tabel--peringkat td {
    border: 0;
    padding: 0;
    white-space: normal;
  }
  .tabel--peringkat td + td {
    display: inline-flex;
    align-items: baseline;
    gap: var(--jarak-1);
    margin-top: var(--jarak-2);
    margin-right: var(--jarak-4);
    text-align: left;
  }
  /* Label kolom dibawa serta lewat data-label agar angka tetap punya arti
     setelah kepala tabelnya disembunyikan. */
  .tabel--peringkat td[data-label]::before {
    content: attr(data-label) ' ';
    color: var(--warna-teks-samar);
    font-size: var(--teks-xs);
  }
  .tabel-gulir { overflow-x: visible; }
}

/* ===================================== peringkat & detail kelas (v2.34.0) ===
   Tabel peringkat kelas berurut dengan nomor (medali 1–3) dan tombol "Detail"
   di kolom paling kanan; detailnya menggantikan tabel di bagian yang sama
   (components/detail-kelas.js). Animasi hanya transform/opacity dan mati pada
   prefers-reduced-motion. */
.tabel--berperingkat th.mon-no,
.tabel--berperingkat td.mon-no { width: 1%; min-width: 0; padding-right: 0; text-align: center; white-space: nowrap; }
.tabel--berperingkat th.mon-nama,
.tabel--berperingkat td.mon-nama { white-space: normal; min-width: 11rem; }
.mon-no__lencana {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: var(--radius-penuh); background: var(--warna-permukaan-2); color: var(--warna-teks-lembut);
  font-size: var(--teks-sm); font-weight: var(--tebal-berat);
}
.mon-no__lencana--1 { background: linear-gradient(145deg, #f6dc7c, var(--emas-500)); color: #4a3a05; box-shadow: 0 2px 6px rgba(201, 162, 39, .4); }
.mon-no__lencana--2 { background: linear-gradient(145deg, #eef2f6, #a9b6c4); color: #2b3846; }
.mon-no__lencana--3 { background: linear-gradient(145deg, #f1cba6, #b87333); color: #3d2105; }
.tabel--peringkat th.mon-aksi,
.tabel--peringkat td.mon-aksi { width: 1%; text-align: right; white-space: nowrap; }
.mon-detail {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 14px;
  border: 1px solid var(--warna-primer-garis); border-radius: var(--radius-penuh);
  background: var(--warna-primer-lembut); color: var(--warna-teks-primer);
  font: inherit; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); white-space: nowrap; cursor: pointer;
  transition: background-color var(--transisi-cepat), color var(--transisi-cepat), border-color var(--transisi-cepat), transform var(--transisi-cepat);
}
.mon-detail svg { transition: transform var(--transisi-cepat); }
.baris-klik:hover .mon-detail,
.mon-detail:hover { background: var(--warna-primer); border-color: var(--warna-primer); color: var(--warna-teks-terbalik); }
.baris-klik:hover .mon-detail svg { transform: translateX(2px); }
.mon-detail:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.mon-detail:active { transform: scale(.97); }
.tabel--peringkat tr.mkd-sorot { animation: mkd-sorot 1.8s ease-out; }
@keyframes mkd-sorot { 0%, 35% { background: var(--warna-aksen-lembut); } 100% { background: transparent; } }

/* Kartu per baris ditentukan oleh lebar WADAH, bukan layar: dengan sidebar,
   layar 800–1000 px hanya menyisakan ±560 px untuk tabel, dan kolom tombol
   Detail di ujung kanan akan tersembunyi di balik gulir samping. Peramban
   tanpa container query tetap mendapat kartu lewat @media ≤640 px di atas. */
.mkd-isi { container: mkd / inline-size; }
@container mkd (max-width: 720px) {
  .tabel--berperingkat thead { display: none; }
  .tabel--berperingkat, .tabel--berperingkat tbody { display: block; width: 100%; }
  .tabel--berperingkat tr {
    display: flex; flex-wrap: wrap; align-items: center; padding: var(--jarak-3);
    border-bottom: 1px solid var(--warna-garis);
  }
  .tabel--berperingkat td { display: block; width: auto; padding: 0; border: 0; white-space: normal; }
  .tabel--berperingkat td + td { display: inline-flex; align-items: baseline; gap: var(--jarak-1); margin: var(--jarak-2) var(--jarak-4) 0 0; text-align: left; }
  .tabel--berperingkat td[data-label]::before { content: attr(data-label) ' '; color: var(--warna-teks-samar); font-size: var(--teks-xs); }
  .tabel--berperingkat td.mon-no { flex: none; width: auto; margin: 0 12px 0 0; }
  .tabel--berperingkat td.mon-nama { display: block; flex: 1 1 calc(100% - 48px); min-width: 0; margin: 0; }
  .tabel--berperingkat td.mon-aksi { display: block; flex: 1 1 100%; margin: 12px 0 0; }
  .tabel--berperingkat .mon-detail { width: 100%; justify-content: center; min-height: var(--target-sentuh); }
  .mkd-isi > .tabel-gulir { overflow-x: visible; }
}
@media (max-width: 640px) {
  .tabel--berperingkat tr { display: flex; flex-wrap: wrap; align-items: center; }
  .tabel--berperingkat td { width: auto; }
  .tabel--berperingkat td.mon-no { flex: none; width: auto; margin: 0 12px 0 0; }
  .tabel--berperingkat td.mon-nama { display: block; flex: 1 1 calc(100% - 48px); min-width: 0; margin: 0; }
  .tabel--peringkat td.mon-aksi { display: block; flex: 1 1 100%; margin: 12px 0 0; text-align: left; }
  .mon-detail { width: 100%; justify-content: center; min-height: var(--target-sentuh); }
}

.mkd { scroll-margin-top: calc(var(--tinggi-appbar) + 12px); }
.mkd-isi > * { animation: mkd-masuk 280ms var(--kurva) both; }
.mkd-petunjuk { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.mkd-panel { display: grid; gap: 16px; min-width: 0; }
.mkd-atas { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mkd-jejak { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; font-size: var(--teks-sm); color: var(--warna-teks-samar); }
.mkd-jejak strong { color: var(--warna-teks); font-weight: var(--tebal-tebal); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .mkd-jejak { display: none; } }
.mkd-catatan {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px;
  border-radius: var(--radius-3); background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen);
  font-size: var(--teks-sm); line-height: 1.5;
}
.mkd-catatan svg { flex: none; margin-top: 2px; }
.mkd-kartu {
  min-width: 0; padding: 16px; border: 1px solid var(--warna-garis); border-radius: var(--radius-3);
  background: var(--warna-permukaan); box-shadow: var(--bayang-1);
}
.mkd-sub { margin-bottom: 12px; }
.mkd-sub__teks { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--teks-md); font-weight: var(--tebal-tebal); }
.mkd-sub__jumlah {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 8px;
  border-radius: var(--radius-penuh); background: var(--warna-primer-lembut); color: var(--warna-teks-primer);
  font-size: var(--teks-xs); font-weight: var(--tebal-berat);
}
.mkd-sub__jumlah:empty { display: none; }
.mkd-sub__ket { margin: 4px 0 0; font-size: var(--teks-xs); line-height: 1.5; color: var(--warna-teks-samar); }

/* lintasan posisi */
.mkd-lintas { position: relative; height: 48px; margin: 32px 12px 0; }
.mkd-lintas__rel {
  position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: var(--radius-penuh);
  background: linear-gradient(90deg, var(--warna-bahaya-lembut), var(--warna-peringatan-lembut) 50%, var(--warna-sukses-lembut));
  box-shadow: inset 0 0 0 1px var(--warna-garis);
}
.mkd-lintas__titik {
  position: absolute; top: 50%; left: calc(var(--p) * 1%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border: 2px solid var(--warna-teks-samar); border-radius: 50%; background: var(--warna-permukaan);
  animation: mkd-pop 360ms var(--kurva) both; animation-delay: calc(min(var(--i), 20) * 30ms);
}
.mkd-lintas__rata {
  position: absolute; top: 2px; bottom: 2px; left: calc(var(--p) * 1%); width: 0;
  border-left: 2px dashed var(--warna-teks-lembut);
}
.mkd-lintas__saya {
  position: absolute; top: 50%; left: calc(var(--p) * 1%); z-index: 2; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 3px solid var(--warna-permukaan); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f6dc7c, var(--emas-500));
  box-shadow: 0 0 0 2px var(--emas-500), 0 4px 10px rgba(201, 162, 39, .45);
  animation: mkd-pop 520ms var(--kurva) 240ms both;
}
.mkd-lintas__saya::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--emas-500); opacity: 0;
  animation: mkd-denyut 1.8s ease-out 800ms 3;
}
/* Label menempel pada titik tetapi bergeser sebanding posisinya, sehingga di
   0% rata kiri dan di 100% rata kanan — tidak pernah keluar dari kartu. */
.mkd-lintas__label {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(calc(var(--p) * -1%));
  padding: 2px 8px; border-radius: 8px; background: var(--warna-primer); color: var(--warna-teks-terbalik);
  font-size: var(--teks-xs); font-weight: var(--tebal-berat); white-space: nowrap;
}
.mkd-lintas__skala { display: flex; justify-content: space-between; margin: 4px 12px 0; font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.mkd-kalimat {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 8px 12px;
  border-radius: var(--radius-2); font-size: var(--teks-sm); line-height: 1.5;
  background: var(--warna-permukaan-2); color: var(--warna-teks-lembut);
}
.mkd-kalimat svg { flex: none; margin-top: 2px; }
.mkd-kalimat--naik { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.mkd-kalimat--turun { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.mkd-legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.mkd-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.mkd-legenda__saya, .mkd-legenda__titik { width: 12px; height: 12px; border-radius: 50%; }
.mkd-legenda__saya { background: var(--emas-500); }
.mkd-legenda__titik { border: 2px solid var(--warna-teks-samar); }
.mkd-legenda__rata { width: 0; height: 12px; border-left: 2px dashed var(--warna-teks-lembut); }

/* daftar kompetensi & siswa */
.mkd-daftar-wadah { display: grid; gap: 8px; justify-items: start; }
.mkd-daftar-wadah > .mkd-daftar { justify-self: stretch; }
.mkd-daftar { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mkd-daftar > li { animation: mkd-masuk 280ms var(--kurva) both; animation-delay: calc(var(--i) * 40ms); }
.mkd-baris {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(64px, 160px) 48px auto;
  grid-template-areas: "a n b p u"; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: var(--radius-2);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--transisi-cepat);
}
.mkd-daftar > li:nth-child(odd) .mkd-baris { background: var(--warna-permukaan-2); }
.mkd-baris:hover { background: var(--warna-primer-lembut) !important; }
.mkd-baris:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.mkd-baris__kode, .mkd-baris__avatar { grid-area: a; }
.mkd-baris__nama { grid-area: n; display: grid; gap: 2px; min-width: 0; }
.mkd-baris__bilah { grid-area: b; min-width: 0; }
.mkd-baris__bilah .progres { background: var(--warna-garis); }
.mkd-baris__persen { grid-area: p; text-align: right; font-size: var(--teks-md); font-weight: var(--tebal-berat); }
.mkd-baris__ujung { grid-area: u; justify-self: end; white-space: nowrap; color: var(--warna-teks-samar); }
.mkd-baris__kode {
  padding: 4px 8px; border-radius: 8px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer);
  font-size: var(--teks-xs); font-weight: var(--tebal-berat); white-space: nowrap;
}
.mkd-baris__avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(145deg, var(--navy-600), var(--navy-800)); color: #fff;
  font-size: var(--teks-xs); font-weight: var(--tebal-berat);
}
.mkd-baris__judul { font-size: var(--teks-sm); font-weight: var(--tebal-sedang); color: var(--warna-teks); }
.mkd-baris__meta { font-size: var(--teks-xs); color: var(--warna-teks-samar); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkd-bawah { display: flex; flex-wrap: wrap; gap: 8px; }
/* Baris bertumpuk mengikuti lebar kartunya (lihat .mkd-isi di atas). */
.mkd-kartu { container: mkdk / inline-size; }
@container mkdk (max-width: 600px) {
  .mkd-baris { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "a p" "n n" "b u"; row-gap: 8px; }
  .mkd-baris__kode { justify-self: start; }
  .mkd-baris__judul { white-space: normal; }
  .mkd-baris--siswa { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "a n p" "a b b"; }
  .mkd-baris--siswa .mkd-baris__ujung { display: none; }
  .mkd-baris--siswa .mkd-baris__judul { white-space: nowrap; }
}
@media (max-width: 640px) {
  .mkd-bawah > .tombol { flex: 1 1 100%; }
}

@keyframes mkd-masuk { from { opacity: 0; transform: translateY(8px); } }
@keyframes mkd-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes mkd-denyut { 0% { opacity: .7; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.8); } }
@media (prefers-reduced-motion: reduce) {
  .mkd-isi > *, .mkd-daftar > li, .mkd-lintas__titik, .mkd-lintas__saya,
  .tabel--peringkat tr.mkd-sorot { animation: none; }
  .mkd-lintas__saya::after { display: none; }
  .mon-detail, .mon-detail svg { transition: none; }
}

/* Daftar prioritas tindak lanjut. */
.daftar-prioritas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-1); }
.daftar-prioritas__item {
  display: flex;
  align-items: center;
  gap: var(--jarak-2);
  padding: var(--jarak-2);
  border-radius: var(--radius-2);
  font-size: var(--teks-sm);
}
.daftar-prioritas__item:nth-child(odd) { background: var(--warna-permukaan-2); }

/* Sepasang kartu prioritas. Berbeda dari .grid-2 yang label isinya pendek,
   judul di sini berupa kalimat, sehingga dua kolom di ponsel memecahnya
   menjadi satu kata per baris. */
.grid-prioritas {
  display: grid;
  gap: var(--jarak-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) {
  .grid-prioritas { grid-template-columns: 1fr; }
}

/* ================================================= dasbor beranda manajemen === */

/* minmax(0, 1fr), bukan kolom implisit: kolom implisit melebar mengikuti isi
   terlebar (baris cip filter yang digulir), sehingga di ponsel 375px seluruh
   dasbor menjadi 381px dan terpotong di tepi kanan. */
.dasbor-mnj { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jarak-6); }
.dasbor-mnj > * { min-width: 0; }
/* Di ponsel judul halaman sudah tertulis di app bar. */
@media (max-width: 767.98px) {
  .dasbor-mnj__judul { display: none; }
}

.dasbor-mnj__kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--jarak-4);
}
.dasbor-mnj__judul {
  margin: 0;
  font-size: var(--teks-2xl);
  line-height: 1.2;
  color: var(--warna-teks);
  text-wrap: balance;
}
.dasbor-mnj__kepala p { margin: var(--jarak-1) 0 0; }

.dasbor-mnj__filter-isi {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--jarak-3);
}
/* Baris cip yang digulir menyamping tidak boleh menentukan lebar barisnya —
   tidak juga lebar pembungkusnya di kepala dasbor. */
.dasbor-mnj__kepala > *,
.dasbor-mnj__filter-isi > * { min-width: 0; max-width: 100%; }
.dasbor-mnj__filter-unit { min-width: 220px; }
.dasbor-mnj__filter-unit .bidang { margin: 0; }

.dasbor-mnj__panel {
  background: var(--warna-permukaan);
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-3);
  box-shadow: var(--bayang-1);
  padding: var(--jarak-5);
  display: grid;
  gap: var(--jarak-4);
  min-width: 0;
}
/* Bagian ketercapaian adalah yang paling menentukan; garis atas navy menandai
   urutan kepentingannya tanpa menambah warna baru. */
.dasbor-mnj__panel--utama { border-top: 3px solid var(--warna-primer); }

.dasbor-mnj__bagian-kepala {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--jarak-3);
}
.dasbor-mnj__bagian-kepala p { margin: var(--jarak-1) 0 0; max-width: 62ch; }
.dasbor-mnj__h2 {
  margin: 0;
  font-size: var(--teks-lg, 18px);
  font-weight: var(--tebal-tebal);
  color: var(--warna-teks);
  text-wrap: balance;
}
.dasbor-mnj__h3 {
  margin: 0;
  font-size: var(--teks-sm);
  font-weight: var(--tebal-tebal);
  color: var(--warna-teks);
}

/* Ketercapaian: dua donat di kiri, empat angka pendukung di kanan. */
.dasbor-mnj__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--jarak-5);
  align-items: center;
}
@media (max-width: 900px) {
  .dasbor-mnj__hero { grid-template-columns: 1fr; }
}
.dasbor-mnj__donat-grup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jarak-4);
}
.dasbor-mnj__donat,
.dasbor-mnj__mini {
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
.dasbor-mnj__donat {
  display: grid;
  justify-items: center;
  gap: var(--jarak-2);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-3);
  padding: var(--jarak-3) var(--jarak-2);
  text-align: center;
  transition: border-color var(--transisi-cepat, .15s), background var(--transisi-cepat, .15s);
}
.dasbor-mnj__donat:hover { background: var(--warna-permukaan-2); border-color: var(--warna-garis); }
.dasbor-mnj__donat:focus-visible,
.dasbor-mnj__mini:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.dasbor-mnj__donat-kanvas {
  position: relative;
  width: min(176px, 100%);
  aspect-ratio: 1;
}
.dasbor-mnj__donat-kanvas canvas { width: 100% !important; height: 100% !important; }
.dasbor-mnj__donat-tengah {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}
.dasbor-mnj__donat-angka {
  font-size: var(--teks-3xl);
  font-weight: var(--tebal-berat);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--warna-teks);
}
.dasbor-mnj__donat-judul { font-weight: var(--tebal-tebal); font-size: var(--teks-sm); }
/* Cincin cadangan bila Chart.js tidak dapat dimuat: tetap satu sumber angka. */
.dasbor-mnj__cincin-cadangan {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(var(--warna-sukses) var(--nilai), var(--warna-garis-kuat) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 73%);
  mask: radial-gradient(farthest-side, transparent 72%, #000 73%);
}

.dasbor-mnj__legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--jarak-1) var(--jarak-3);
  font-size: var(--teks-xs);
  color: var(--warna-teks-lembut);
}
.dasbor-mnj__panel > .tumpuk > .dasbor-mnj__legenda,
.dasbor-mnj__panel .tumpuk-2 > .dasbor-mnj__legenda { justify-content: flex-start; }
.dasbor-mnj__legenda-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* nowrap: butir legenda turun baris SEBAGAI SATU KESATUAN. Tanpa itu, di ponsel
   "Belum tercapai" patah di tengah dan angkanya terpisah dari labelnya. */
.dasbor-mnj__legenda-item strong { color: var(--warna-teks); font-weight: var(--tebal-tebal); }
.dasbor-mnj__titik { width: 10px; height: 10px; border-radius: 2px; flex: none; }

.dasbor-mnj__mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jarak-3);
}
@media (min-width: 900px) {
  .dasbor-mnj__mini-grid--empat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dasbor-mnj__mini {
  display: grid;
  align-content: start;
  gap: 2px;
  background: var(--warna-permukaan);
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-2);
  padding: var(--jarak-3);
  min-width: 0;
  transition: border-color var(--transisi-cepat, .15s);
}
.dasbor-mnj__mini:hover { border-color: var(--warna-garis-kuat); }
.dasbor-mnj__mini-label { font-size: var(--teks-xs); color: var(--warna-teks-lembut); line-height: 1.3; }
.dasbor-mnj__mini-angka {
  font-size: var(--teks-2xl);
  font-weight: var(--tebal-berat);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: var(--warna-teks);
}
.dasbor-mnj__mini-sub { font-size: var(--teks-xs); color: var(--warna-teks-samar); }

.dasbor-mnj__grafik { position: relative; width: 100%; min-width: 0; }
.dasbor-mnj__gulir {
  max-height: 520px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-2);
  padding: var(--jarak-2) var(--jarak-2) var(--jarak-2) 0;
}

.dasbor-mnj__tiga {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--jarak-3);
}
/* minmax(0, 1fr) hanya mengizinkan JALUR grid menyusut; item grid-nya sendiri
   tetap ber-min-width: auto dan menolak lebih sempit dari isinya. Tanpa aturan
   ini, lencana "Prioritas Tindak Lanjut" mendorong kartu melewati kolomnya dan
   seluruh halaman bergeser ke samping. */
.dasbor-mnj__tiga > * { min-width: 0; }
/* Di kolom sempit, lencana turun ke baris berikutnya alih-alih memotong judul.
   Dilingkup ke dasbor: komponen daftarPrioritas juga dipakai halaman PIC. */
.dasbor-mnj .daftar-prioritas__item { flex-wrap: wrap; }
.dasbor-mnj .daftar-prioritas__item .isi-sisa { min-width: 0; }
@media (max-width: 900px) {
  .dasbor-mnj__tiga { grid-template-columns: 1fr; }
}

.dasbor-mnj__lipat > summary {
  cursor: pointer;
  font-size: var(--teks-sm);
  color: var(--warna-teks-lembut);
  padding: var(--jarak-1) 0;
}
.dasbor-mnj__lipat > summary:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.dasbor-mnj__lipat[open] > summary { margin-bottom: var(--jarak-2); }

.dasbor-mnj__catatan { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-2); }
.dasbor-mnj__catatan li { display: flex; align-items: center; gap: var(--jarak-2); font-size: var(--teks-sm); }

.dasbor-mnj__dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--jarak-1) var(--jarak-3);
  margin: 0;
  font-size: var(--teks-sm);
}
.dasbor-mnj__dl dt { color: var(--warna-teks-lembut); }
.dasbor-mnj__dl dd { margin: 0; text-align: right; font-weight: var(--tebal-sedang); color: var(--warna-teks); }

.dasbor-mnj__ik {
  border: 1px solid var(--warna-garis);
  border-radius: var(--radius-2);
  padding: var(--jarak-2) var(--jarak-3);
  background: var(--warna-permukaan);
}
.dasbor-mnj__ik > summary { cursor: pointer; list-style: none; display: grid; gap: var(--jarak-1); }
.dasbor-mnj__ik > summary::-webkit-details-marker { display: none; }
.dasbor-mnj__ik > summary:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }

@media (max-width: 560px) {
  .dasbor-mnj__panel { padding: var(--jarak-4); }
  .dasbor-mnj__donat-angka { font-size: var(--teks-2xl); }
  .dasbor-mnj__filter-unit { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dasbor-mnj__donat, .dasbor-mnj__mini { transition: none; }
}

/* ============================================= aplikasi terpasang (PWA) === */

/* Kartu ajakan memasang aplikasi (layar masuk, halaman Akun). */
.kartu-pasang {
  display: flex;
  align-items: center;
  gap: var(--jarak-3);
  width: 100%;
  max-width: 440px;
  margin-top: var(--jarak-4);
  padding: var(--jarak-3) var(--jarak-4);
  border-radius: var(--radius-3);
  border: 1px solid var(--warna-primer-garis);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--warna-primer-lembut) 0%, transparent 70%),
    var(--warna-permukaan);
  color: var(--warna-teks);
  text-align: left;
  box-shadow: var(--bayang-1);
  transition: border-color var(--transisi-cepat), box-shadow var(--transisi-cepat), transform var(--transisi-cepat);
}
.kartu-pasang:hover { border-color: var(--warna-primer); box-shadow: var(--bayang-2); }
.kartu-pasang:active { transform: scale(.99); }
.halaman .kartu-pasang { max-width: none; margin-top: 0; }
.kartu-pasang__ikon { flex: none; width: 44px; height: 44px; border-radius: 22%; box-shadow: var(--bayang-1); }
.kartu-pasang__teks { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.kartu-pasang__judul { font-weight: var(--tebal-tebal); font-size: var(--teks-sm); }
.kartu-pasang__sub { font-size: var(--teks-xs); color: var(--warna-teks-lembut); line-height: 1.4; }
.kartu-pasang__aksi {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-penuh);
  background: var(--warna-primer);
  color: var(--warna-teks-terbalik);
}

/* Lembar panduan pemasangan. */
.pasang { display: grid; gap: var(--jarak-5); }
.pasang__kepala { display: flex; align-items: center; gap: var(--jarak-3); }
.pasang__ikon { flex: none; width: 64px; height: 64px; border-radius: 22%; box-shadow: var(--bayang-2); }
.pasang__nama { font-weight: var(--tebal-berat); font-size: var(--teks-lg); }
.pasang__manfaat { display: grid; gap: var(--jarak-2); }
.pasang__manfaat li {
  display: flex;
  align-items: center;
  gap: var(--jarak-3);
  font-size: var(--teks-sm);
  color: var(--warna-teks-lembut);
}
.pasang__manfaat .ikon { color: var(--warna-sukses); }
.pasang__subjudul {
  margin-bottom: var(--jarak-2);
  font-size: var(--teks-xs);
  font-weight: var(--tebal-tebal);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--warna-teks-samar);
}
.pasang__langkah { display: grid; gap: var(--jarak-3); counter-reset: langkah; }
.pasang__langkah li {
  position: relative;
  padding-left: 40px;
  min-height: 28px;
  font-size: var(--teks-sm);
  line-height: 1.5;
  counter-increment: langkah;
}
.pasang__langkah li::before {
  content: counter(langkah);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-penuh);
  background: var(--warna-primer-lembut);
  color: var(--warna-teks-primer);
  font-size: var(--teks-xs);
  font-weight: var(--tebal-berat);
}

/* Notifikasi HP. */
.kartu-notif__ikon,
.ajakan-notif__ikon {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-3);
  background: var(--warna-aksen-lembut);
  color: var(--warna-teks-aksen);
}
.kartu-notif__ikon { width: 40px; height: 40px; }
.ajakan-notif__ikon { width: 56px; height: 56px; margin: 0 auto; }

/* ================================================ Kompetensi Khusus (v2.18.0) */

.lencana-khusus { display: inline-flex; align-items: center; gap: 4px; }

/* Kontak PIC: identitas di kiri, tombol telepon & WhatsApp di kanan. Di layar
   sempit tombolnya turun ke baris sendiri supaya nama tidak terpotong habis. */
.kontak-pic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--jarak-2) var(--jarak-3);
  padding: var(--jarak-2) 0;
}
.kontak-pic + .kontak-pic { border-top: 1px solid var(--warna-garis); }
.kontak-pic > .isi-sisa { min-width: 0; flex: 1 1 160px; }
.kontak-pic__aksi { display: flex; gap: var(--jarak-2); flex-wrap: wrap; }

.khusus-pic-terpilih {
  border: 1px dashed var(--warna-primer-garis);
  border-radius: var(--radius-2);
  padding: var(--jarak-2) var(--jarak-3);
  background: var(--warna-primer-lembut);
}
.khusus-berkas { display: block; width: 100%; font-size: var(--teks-sm); }
.khusus-hitung { text-align: right; }

/* ===================================================== Master Data (v2.19.0)
   Tata letak kerja data: navigasi entitas berkelompok di kiri (≥1200px) atau
   dropdown (di bawahnya), kepala halaman, bilah cari & filter, info jumlah,
   tabel padat, kaki paginasi.

   SKALA HURUF (dari token, tidak ada ukuran lepas):
     11px  label kelompok / overline  — tebal 600, huruf kapital, spasi .06em
     12px  kepala tabel, kode, kaki    — kepala tabel kapital 600, warna lembut
     13px  isi tabel, navigasi, info   — kolom utama tebal 600 warna teks penuh
     16px  isian (cari, pilihan)       — mencegah iOS memperbesar halaman
     20px  judul halaman               — tebal 700
   Tinggi baris tabel ±44px (padding 10px), cukup untuk target sentuh tanpa
   memboroskan layar ketika LSP memindai ratusan baris. */

.mdata { display: flex; flex-direction: column; gap: var(--jarak-4); }
.mdata__utama { display: flex; flex-direction: column; gap: var(--jarak-3); min-width: 0; }

/* --- navigasi entitas --- */
.mdata__nav { display: none; }
.mdata__nav-ponsel { margin: 0; }
.mdata__nav-grup + .mdata__nav-grup { margin-top: var(--jarak-4); }
.mdata__nav-judul {
  font-size: 11px; font-weight: var(--tebal-tebal); text-transform: uppercase;
  letter-spacing: .06em; color: var(--warna-teks-samar);
  padding: 0 var(--jarak-3); margin-bottom: var(--jarak-1);
}
.mdata__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mdata__nav-item {
  position: relative; display: block;
  padding: 7px var(--jarak-3); border-radius: var(--radius-1);
  font-size: var(--teks-sm); font-weight: var(--tebal-sedang);
  color: var(--warna-teks-lembut); text-decoration: none;
  transition: background var(--transisi-cepat), color var(--transisi-cepat);
}
.mdata__nav-item:hover { background: var(--warna-sorot); color: var(--warna-teks); }
.mdata__nav-item[aria-current="page"] {
  background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-weight: var(--tebal-tebal);
}
.mdata__nav-item[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 3px; background: var(--warna-primer);
}

@media (min-width: 1200px) {
  .halaman.mdata { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: var(--jarak-6); align-items: start; }
  .mdata__samping { position: sticky; top: calc(var(--tinggi-appbar) + var(--jarak-4)); }
  .mdata__nav { display: block; }
  .mdata__nav-ponsel { display: none; }
}

/* --- kepala --- */
.mdata__kepala { display: flex; align-items: flex-start; gap: var(--jarak-3); flex-wrap: wrap; }
.mdata__grup {
  font-size: 11px; font-weight: var(--tebal-tebal); text-transform: uppercase;
  letter-spacing: .06em; color: var(--warna-teks-samar);
}
.mdata__judul { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: var(--tinggi-baris-rapat); margin: 2px 0 var(--jarak-1); letter-spacing: -.01em; }
.mdata__deskripsi { font-size: var(--teks-sm); color: var(--warna-teks-lembut); max-width: 70ch; }
.mdata__kepala-aksi { display: flex; align-items: center; gap: var(--jarak-2); margin-left: auto; }
@media (max-width: 559.98px) {
  .mdata__kepala-aksi { width: 100%; flex-wrap: wrap; }
  .mdata__kepala-aksi .tombol { flex: 1 1 0; min-width: 0; padding-inline: var(--jarak-2); white-space: nowrap; }
  /* Tombol utama selalu satu baris penuh; aksi tambahan berbagi baris di atasnya. */
  .mdata__kepala-aksi .tombol--primer { flex-basis: 100%; order: 9; }
}

/* --- cari & filter --- */
.mdata__alat {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--jarak-2);
  padding: var(--jarak-3); background: var(--warna-permukaan);
  border: 1px solid var(--warna-garis); border-radius: var(--radius-3);
}
.mdata__cari { position: relative; flex: none; min-width: 0; display: block; }
/* Basis 260px hanya bermakna di bilah alat yang mendatar; di wadah kolom
   (panel, dialog) nilai yang sama akan menjadi TINGGI 260px. */
.mdata__alat .mdata__cari { flex: 1 1 260px; }
.mdata__cari-ikon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--warna-teks-samar); display: inline-flex; pointer-events: none;
}
.mdata__cari-input { padding-left: 38px !important; }
.mdata__filter { display: contents; }
.mdata__filter-item { flex: 1 1 150px; min-width: 0; margin: 0; }
.mdata__filter-item .pilihcari__tombol { min-height: var(--target-sentuh); }
.mdata__filter > .tombol { align-self: center; }
@media (min-width: 900px) {
  .mdata__alat .mdata__cari { flex: 2 1 240px; }
  .mdata__filter-item { flex: 1 1 150px; max-width: 220px; }
}

/* --- info & pilihan massal --- */
.mdata__info { font-size: var(--teks-sm); color: var(--warna-teks); min-height: 20px; }
.mdata__jumlah { font-weight: var(--tebal-berat); }
.mdata__terpilih {
  position: sticky; top: var(--tinggi-appbar); z-index: 5;
  display: flex; align-items: center; gap: var(--jarak-2);
  padding: var(--jarak-2) var(--jarak-3);
  background: var(--warna-primer-lembut); border: 1px solid var(--warna-primer-garis);
  border-radius: var(--radius-2); font-size: var(--teks-sm); font-weight: var(--tebal-tebal);
  color: var(--warna-teks-primer);
}

/* --- data --- */
.mdata__data { position: relative; transition: opacity var(--transisi-cepat); }
/* Saat halaman/filter berganti, baris lama tetap terlihat redup — tata letak
   tidak melompat — dan garis tipis di atas menandai permintaan berjalan. */
.mdata__data--memuat { opacity: .5; pointer-events: none; }
.mdata__data--memuat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--warna-primer), transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
  animation: mdata-muat 1s linear infinite;
}
@keyframes mdata-muat { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { .mdata__data--memuat::before { animation: none; background: var(--warna-primer); } }

.mdata__tabel { display: none; max-height: calc(100dvh - 260px); overflow: auto; }
.mdata__tbl th, .mdata__tbl td { padding: 10px var(--jarak-3); vertical-align: middle; }
.mdata__tbl td { font-size: var(--teks-sm); color: var(--warna-teks-lembut); white-space: normal; overflow-wrap: anywhere; }
/* Teks biasa boleh membungkus supaya tabel muat tanpa gulir samping; kode,
   angka, dan tanggal tidak — memotong NIS di tengah membuatnya salah baca. */
.mdata__tbl td .kode, .mdata__tbl td.angka, .mdata__tbl td .lencana { white-space: nowrap; overflow-wrap: normal; }
.mdata__tbl th { white-space: normal; line-height: 1.3; }
.mdata__tbl tbody tr { cursor: pointer; }
.mdata__tbl tbody tr:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.mdata__tbl .kode { font-size: var(--teks-xs); color: var(--warna-teks); }
.mdata__utama-sel { color: var(--warna-teks); font-weight: var(--tebal-tebal); white-space: normal; display: inline-block; min-width: 140px; max-width: 420px; }
.mdata__kol-pilih { width: 44px; }
.mdata__kol-aksi { width: 52px; text-align: right; }
.mdata__kol-aksi .tombol-ikon { width: 32px; height: 32px; color: var(--warna-teks-samar); }
.mdata__tbl tbody tr:hover .mdata__kol-aksi .tombol-ikon { color: var(--warna-teks-primer); }
.mdata__kosong { color: var(--warna-teks-samar); }
.mdata__hilang {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--warna-teks-peringatan); background: var(--warna-peringatan-lembut);
  border-radius: var(--radius-1); padding: 1px 6px;
}
.mdata__hilang .kode { color: inherit; }
.mdata__kosong-blok { background: var(--warna-permukaan); border: 1px solid var(--warna-garis); border-radius: var(--radius-3); }

/* Kartu ponsel: satu kartu per baris, label kecil di kiri dan nilai di kanan. */
.mdata__kartu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--jarak-2); }
.mdata__kartu-item {
  display: flex; gap: var(--jarak-2); align-items: flex-start;
  background: var(--warna-permukaan); border: 1px solid var(--warna-garis);
  border-radius: var(--radius-3); padding: var(--jarak-3);
}
.mdata__kartu-pilih { padding-top: 2px; }
.mdata__kartu-isi { flex: 1 1 auto; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: var(--jarak-2); }
.mdata__kartu-judul { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--jarak-2); font-size: var(--teks-md); }
.mdata__kartu-judul .mdata__utama-sel { min-width: 0; max-width: none; }
.mdata__kartu-rincian {
  display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 4px var(--jarak-3);
  margin: 0; font-size: var(--teks-sm);
}
.mdata__kartu-rincian dt { color: var(--warna-teks-samar); font-size: var(--teks-xs); padding-top: 1px; }
.mdata__kartu-rincian dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

@media (min-width: 768px) {
  .mdata__tabel { display: block; }
  .mdata__kartu { display: none; }
}

/* --- kaki --- */
.mdata__kaki {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-2) var(--jarak-4);
  font-size: var(--teks-xs); color: var(--warna-teks-lembut);
}
.mdata__kaki:empty { display: none; }
.mdata__kaki-ukuran { display: inline-flex; align-items: center; gap: var(--jarak-2); }
.mdata__ukuran { width: auto; min-height: 32px; padding: 2px 28px 2px 10px; font-size: var(--teks-sm); }
.mdata__rentang { color: var(--warna-teks); }
.mdata__paginasi { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mdata__hal {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--teks-sm); font-variant-numeric: tabular-nums; color: var(--warna-teks);
  border: 1px solid transparent;
}
.mdata__hal:hover:not(:disabled) { background: var(--warna-sorot); }
.mdata__hal:disabled { opacity: .35; cursor: not-allowed; }
.mdata__hal--aktif { background: var(--warna-primer); color: var(--warna-teks-terbalik); font-weight: var(--tebal-tebal); }
.mdata__elipsis { padding: 0 2px; color: var(--warna-teks-samar); }
@media (max-width: 559.98px) {
  .mdata__paginasi { margin-left: 0; width: 100%; justify-content: center; }
}

/* --- formulir dua kolom --- */
.mdata__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jarak-3) var(--jarak-4); }
.mdata__form > .bidang { margin: 0; }
@media (min-width: 640px) {
  .mdata__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdata__form-penuh { grid-column: 1 / -1; }
}

/* ============================== Pengajuan & Penjadwalan Uji (v2.19.0)
   Memakai skala huruf yang sama dengan Master Data (lihat blok .mdata). */

/* --- tab status berpenghitung: satu baris, bergulir mendatar di ponsel --- */
.tab-status {
  display: flex; gap: var(--jarak-1); overflow-x: auto; scrollbar-width: thin;
  padding-bottom: 2px; border-bottom: 1px solid var(--warna-garis);
}
.tab-status__item {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px var(--jarak-3); margin-bottom: -1px;
  font-size: var(--teks-sm); font-weight: var(--tebal-sedang); color: var(--warna-teks-lembut);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--transisi-cepat), border-color var(--transisi-cepat);
}
.tab-status__item:hover { color: var(--warna-teks); }
.tab-status__item[aria-selected="true"] { color: var(--warna-teks-primer); border-bottom-color: var(--warna-primer); font-weight: var(--tebal-tebal); }
.tab-status__jumlah {
  min-width: 22px; padding: 0 6px; border-radius: var(--radius-penuh);
  font-size: 11px; line-height: 18px; text-align: center;
  background: var(--warna-permukaan-2); color: var(--warna-teks-lembut);
}
.tab-status__item[aria-selected="true"] .tab-status__jumlah { background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.tab-status__item--peringatan .tab-status__jumlah { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.tab-status__item--aksen .tab-status__jumlah { background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }

/* --- isi sel tambahan --- */
.mdata__sub { display: block; font-size: var(--teks-xs); color: var(--warna-teks-samar); margin-top: 2px; }
.mdata__lencana-tumpuk { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mdata__panah { color: var(--warna-teks-samar); display: inline-flex; }
.mdata__tbl tbody tr:hover .mdata__panah { color: var(--warna-teks-primer); }
.mdata__tbl--statis tbody tr { cursor: default; }
.mdata__tabel--penuh { max-height: none; }
.mdata__catatan { display: block; color: var(--warna-teks); }
.mdata__kol-tindakan { width: 1%; white-space: nowrap; text-align: right; }
.mdata__tindakan { display: inline-flex; gap: var(--jarak-1); flex-wrap: wrap; justify-content: flex-end; }
.mdata__dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--jarak-4); margin: 0; font-size: var(--teks-sm); }
.mdata__dl dt { color: var(--warna-teks-samar); font-size: var(--teks-xs); padding-top: 1px; }
.mdata__dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* --- panel & sub judul --- */
.mdata__panel {
  display: flex; flex-direction: column; gap: var(--jarak-3);
  padding: var(--jarak-4); background: var(--warna-permukaan);
  border: 1px solid var(--warna-garis); border-radius: var(--radius-3);
}
.mdata__panel-kepala { display: flex; align-items: flex-start; gap: var(--jarak-3); flex-wrap: wrap; }
.mdata__panel-angka { font-size: var(--teks-sm); margin-left: auto; white-space: nowrap; }
.mdata__subjudul { font-size: var(--teks-md); font-weight: var(--tebal-berat); line-height: var(--tinggi-baris-rapat); }
.mdata__rentang-tanggal { display: inline-flex; align-items: center; gap: var(--jarak-2); font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.mdata__tanggal { width: auto; min-width: 150px; }

/* --- antrean per kompetensi --- */
.antrean { list-style: none; margin: 0; padding: 0; }
.antrean__item {
  display: flex; align-items: center; gap: var(--jarak-3);
  padding: var(--jarak-3) 0; border-top: 1px solid var(--warna-garis);
}
.antrean__item:first-child { border-top: none; }
.antrean__judul { display: block; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks); }
.antrean__angka { display: flex; flex-direction: column; align-items: flex-end; min-width: 72px; text-align: right; }
.antrean__jumlah { font-size: var(--teks-lg); font-weight: var(--tebal-berat); line-height: 1.1; }
@media (max-width: 559.98px) {
  .antrean__item { flex-wrap: wrap; }
  .antrean__item > .isi-sisa { flex-basis: 100%; }
  .antrean__angka { flex-direction: row; gap: 6px; align-items: baseline; margin-right: auto; }
}

/* --- kuota: angka + bilah tipis --- */
.kuota { display: inline-flex; flex-direction: column; gap: 4px; min-width: 84px; }
.kuota__teks { font-size: var(--teks-sm); color: var(--warna-teks); }
.kuota__bilah { display: block; height: 4px; border-radius: 4px; background: var(--warna-permukaan-2); overflow: hidden; }
.kuota__isi { display: block; height: 100%; background: var(--warna-primer); border-radius: 4px; }
.kuota__isi--penuh { background: var(--warna-sukses); }

/* --- ringkasan jadwal & statistik kecil --- */
.ringkas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--warna-garis); border: 1px solid var(--warna-garis); border-radius: var(--radius-3); overflow: hidden;
}
.ringkas__item { display: flex; flex-direction: column; gap: 4px; padding: var(--jarak-3) var(--jarak-4); background: var(--warna-permukaan); min-width: 0; }
.ringkas__label { font-size: 11px; font-weight: var(--tebal-tebal); text-transform: uppercase; letter-spacing: .06em; color: var(--warna-teks-samar); }
.ringkas__nilai { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks); overflow-wrap: anywhere; }
.ringkas__sub { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.statmini-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--jarak-2); }
.statmini {
  display: flex; flex-direction: column; gap: 2px; padding: var(--jarak-3);
  border: 1px solid var(--warna-garis); border-radius: var(--radius-2); background: var(--warna-permukaan);
}
.statmini__angka { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1.1; }
.statmini__label { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.statmini--peringatan { border-color: var(--warna-peringatan); background: var(--warna-peringatan-lembut); }
.statmini--peringatan .statmini__angka { color: var(--warna-teks-peringatan); }
.statmini--sukses .statmini__angka { color: var(--warna-teks-sukses); }

/* --- pemilihan peserta --- */
.pilih-peserta { display: flex; flex-direction: column; border: 1px solid var(--warna-garis); border-radius: var(--radius-2); max-height: 50dvh; overflow: auto; }
.pilih-peserta--tinggi { max-height: 60dvh; }
.pilih-peserta__item {
  display: flex; align-items: center; gap: var(--jarak-3); padding: 10px var(--jarak-3);
  border-top: 1px solid var(--warna-garis); cursor: pointer; font-size: var(--teks-sm);
}
.pilih-peserta__item:first-child { border-top: none; }
.pilih-peserta__item:hover { background: var(--warna-sorot); }
.pilih-peserta__item:has(input:checked) { background: var(--warna-primer-lembut); }

/* --- wizard jadwal baru: dua kolom, ringkasan menempel --- */
.wizard { display: flex; flex-direction: column; gap: var(--jarak-4); }
.wizard__utama, .wizard__samping { display: flex; flex-direction: column; gap: var(--jarak-4); min-width: 0; }
@media (min-width: 1100px) {
  .wizard { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .wizard__samping { position: sticky; top: calc(var(--tinggi-appbar) + var(--jarak-4)); }
}
.langkah-judul { display: flex; align-items: center; gap: var(--jarak-2); }
.langkah-judul__no {
  width: 24px; height: 24px; border-radius: var(--radius-penuh); display: grid; place-items: center;
  font-size: var(--teks-xs); font-weight: var(--tebal-berat); background: var(--warna-primer); color: var(--warna-teks-terbalik);
}
.syarat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--teks-sm); color: var(--warna-teks-samar); }
.syarat__item { display: flex; align-items: center; gap: var(--jarak-2); }
.syarat__item--ok { color: var(--warna-teks); }
.syarat__item--ok .ikon { color: var(--warna-sukses); }
.syarat__item--waspada { color: var(--warna-teks-peringatan); }
.syarat__item--waspada .ikon { color: var(--warna-peringatan); }

/* ================================= tombol aksi berikon + tooltip (v2.21.0) */
.ikon-aksi-baris { display: inline-flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.ikon-aksi {
  position: relative; width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-1); color: var(--warna-teks-lembut);
  transition: background var(--transisi-cepat), color var(--transisi-cepat);
}
.ikon-aksi:hover:not(:disabled), .ikon-aksi:focus-visible { background: var(--warna-sorot); color: var(--warna-teks-primer); }
.ikon-aksi--bahaya:hover:not(:disabled) { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); }
.ikon-aksi--peringatan:hover:not(:disabled) { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.ikon-aksi--sukses:hover:not(:disabled) { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.ikon-aksi:disabled { opacity: .4; cursor: not-allowed; }
@media (pointer: coarse) { .ikon-aksi { width: 40px; height: 40px; } }
/* Tooltip: muncul saat kursor di atas tombol atau tombol difokus papan ketik. */
.ikon-aksi[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 30;
  transform: translate(-50%, 3px);
  padding: 4px 8px; border-radius: 6px;
  background: var(--abu-900); color: #fff;
  font-size: 11px; font-weight: var(--tebal-sedang); line-height: 1.3; white-space: nowrap;
  box-shadow: var(--bayang-2);
  opacity: 0; pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
.ikon-aksi:hover::after, .ikon-aksi:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ikon-aksi[data-tip]::after { transition: none; } }
/* Ikon terakhir di tepi kanan tabel: tooltip rata kanan supaya tidak terpotong wadah gulir. */
.ikon-aksi-baris > .ikon-aksi:last-child[data-tip]::after { left: auto; right: 0; transform: translate(0, 3px); }
.ikon-aksi-baris > .ikon-aksi:last-child[data-tip]:is(:hover, :focus-visible)::after { transform: none; }
:root[data-tema="gelap"] .ikon-aksi[data-tip]::after { background: #e8eef5; color: #0d1b2a; }

/* Pilihan unit tujuan template: dikelompokkan per jenis. */
.pilih-unit { display: flex; flex-direction: column; gap: var(--jarak-3); max-height: 46dvh; overflow: auto;
  padding: var(--jarak-3); border: 1px solid var(--warna-garis); border-radius: var(--radius-2); }
.pilih-unit__grup-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--jarak-2);
  font-size: 11px; font-weight: var(--tebal-tebal); text-transform: uppercase; letter-spacing: .06em; color: var(--warna-teks-samar); }
.pilih-unit__isi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px var(--jarak-3); margin-top: 6px; }
.pilih-unit__isi .centang { font-size: var(--teks-sm); min-height: 32px; }
.chip-unit { display: inline-flex; flex-wrap: wrap; gap: 4px; }
/* Ringkas (v2.49.0): satu baris, sisanya "+n" yang membuka daftar lengkap. */
.chip-unit--ringkas { flex-wrap: nowrap; align-items: center; white-space: nowrap; }
.chip-unit__lagi { display: inline-grid; place-items: center; min-width: 32px; min-height: 24px; padding: 0 8px; border-radius: var(--radius-penuh);
  border: 1px dashed var(--warna-garis-kuat); background: none; color: var(--warna-teks-primer); font: inherit; font-size: 12px; font-weight: var(--tebal-tebal); cursor: pointer; }
.chip-unit__lagi:hover { border-style: solid; border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
@media (max-width: 767.98px), (pointer: coarse) { .chip-unit__lagi { min-height: 32px; } }
.chip-unit-daftar { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip-unit-daftar li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.chip-unit-daftar li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
/* Sel berkas: judul (≤ 2 baris) + baris keterangan kecil — ganti 2–3 kolom terpisah. */
.sel-berkas { display: grid; gap: 2px; min-width: 0; max-width: 46ch; }
.sel-berkas__judul { font-weight: var(--tebal-sedang); line-height: 1.35; overflow-wrap: anywhere; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sel-berkas__meta { font-size: 12px; color: var(--warna-teks-lembut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-orang { display: grid; gap: 1px; min-width: 0; font-size: 13px; white-space: nowrap; }
.sel-orang > span:last-child { font-size: 12px; color: var(--warna-teks-lembut); }

/* ===================================================== dasbor beranda PIC === */
/* v2.22.0. Memakai panel .dasbor-mnj__* milik Beranda Manajemen agar kedua
   dasbor terasa satu aplikasi; yang di bawah ini hanya bagian khusus PIC. */

.dpic__kepala-aksi { display: grid; justify-items: end; gap: var(--jarak-2); }
.dpic__kepala-aksi > * { max-width: 100%; min-width: 0; }
@media (max-width: 559.98px) {
  .dpic__kepala-aksi { width: 100%; justify-items: stretch; }
  .dpic__kepala-aksi .baris { justify-content: space-between; }
}

/* --- perlu tindakan: empat kartu yang dapat diklik --- */
/* auto-fit: kartu KC khusus hanya ada untuk PIC konsentrasi, jadi jumlah
   kartunya 3 atau 4 — keduanya harus mengisi baris penuh. */
.dpic-tindakan { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--jarak-3); }
.dpic-tindakan > * { min-width: 0; }
@media (max-width: 480px) { .dpic-tindakan { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jarak-2); } }
.dpic-tindakan__kartu {
  display: grid; align-content: start; gap: 6px; text-align: left; width: 100%;
  padding: var(--jarak-4); background: var(--warna-permukaan);
  border: 1px solid var(--warna-garis); border-left: 3px solid var(--warna-garis);
  border-radius: var(--radius-3); box-shadow: var(--bayang-1);
  transition: border-color var(--transisi-cepat), background var(--transisi-cepat);
}
.dpic-tindakan__kartu:hover { border-color: var(--warna-garis-kuat); background: var(--warna-permukaan-2); }
.dpic-tindakan__kartu:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.dpic-tindakan__kartu--peringatan { border-left-color: var(--warna-peringatan); }
.dpic-tindakan__kartu--peringatan .dpic-tindakan__angka { color: var(--warna-teks-peringatan); }
.dpic-tindakan__kartu--sukses { border-left-color: var(--warna-sukses); }
.dpic-tindakan__kepala { display: flex; align-items: center; gap: var(--jarak-2); color: var(--warna-teks-lembut); }
.dpic-tindakan__ikon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-2); background: var(--warna-permukaan-2);
}
.dpic-tindakan__label { font-size: var(--teks-xs); font-weight: var(--tebal-sedang); line-height: 1.3; }
.dpic-tindakan__angka { font-size: var(--teks-2xl); font-weight: var(--tebal-berat); line-height: 1.1; color: var(--warna-teks); }
.dpic-tindakan__sub {
  font-size: var(--teks-xs); color: var(--warna-teks-samar); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- ketercapaian: bilah sebaran di kiri, empat angka di kanan --- */
.dpic-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--jarak-5); align-items: start; }
@media (max-width: 900px) { .dpic-hero { grid-template-columns: minmax(0, 1fr); } }
/* Dua panel peringkat berdampingan sama tinggi; isinya tetap rapat di atas. */
.dpic .grid-prioritas > .dasbor-mnj__panel { align-content: start; }
.dpic-mini { text-align: left; width: 100%; }
.dpic-mini:hover { background: var(--warna-permukaan-2); }
.dpic-mini:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }

/* --- peringkat rombel / KC / siswa: satu baris per butir --- */
.dpic-peringkat { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dpic-peringkat__baris {
  width: 100%; text-align: left; display: grid; align-items: center; column-gap: var(--jarak-3); row-gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nama persen" "bilah lencana";
  padding: var(--jarak-2) var(--jarak-3); border-radius: var(--radius-2);
  transition: background var(--transisi-cepat);
}
.dpic-peringkat li:nth-child(odd) .dpic-peringkat__baris { background: var(--warna-permukaan-2); }
.dpic-peringkat__baris:hover { background: var(--warna-primer-lembut) !important; }
.dpic-peringkat__baris:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.dpic-peringkat__nama { grid-area: nama; display: grid; min-width: 0; font-size: var(--teks-sm); }
.dpic-peringkat__persen { grid-area: persen; text-align: right; font-weight: var(--tebal-tebal); font-size: var(--teks-md); align-self: start; }
.dpic-peringkat__bilah { grid-area: bilah; min-width: 0; }
.dpic-peringkat__lencana { grid-area: lencana; justify-self: end; white-space: nowrap; }
/* Panel lebar penuh (siswa): satu baris per siswa di layar lebar. */
@media (min-width: 900px) {
  .dpic-peringkat__baris--siswa {
    grid-template-columns: minmax(0, 1.4fr) minmax(120px, 1fr) 3.25rem minmax(0, 11rem);
    grid-template-areas: "nama bilah persen lencana";
  }
  .dpic-peringkat__baris--siswa .dpic-peringkat__persen { align-self: center; }
}

/* --- alur uji: tahap berurutan, tiap angka = pengajuan yang SEDANG di tahap itu --- */
.dpic-alur {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-2);
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.dpic-alur__li { display: flex; }
.dpic-alur__tahap {
  width: 100%; display: grid; align-content: start; gap: 2px; text-align: left;
  padding: var(--jarak-3); border: 1px solid var(--warna-garis); border-radius: var(--radius-2);
  background: var(--warna-permukaan-2);
}
.dpic-alur__tahap--klik { cursor: pointer; transition: border-color var(--transisi-cepat); }
.dpic-alur__tahap--klik:hover { border-color: var(--warna-garis-kuat); }
.dpic-alur__tahap--klik:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.dpic-alur__tahap--peringatan { background: var(--warna-peringatan-lembut); border-color: var(--warna-peringatan); }
.dpic-alur__tahap--peringatan .dpic-alur__angka { color: var(--warna-teks-peringatan); }
.dpic-alur__tahap--sukses { background: var(--warna-sukses-lembut); border-color: var(--warna-sukses); }
.dpic-alur__tahap--sukses .dpic-alur__angka { color: var(--warna-teks-sukses); }
.dpic-alur__angka { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1.15; color: var(--warna-teks); }
.dpic-alur__teks { font-size: var(--teks-xs); color: var(--warna-teks-lembut); line-height: 1.3; }

.dpic-saran {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-2);
  padding: var(--jarak-3); border-radius: var(--radius-2);
  background: var(--warna-aksen-lembut); color: var(--warna-teks); font-size: var(--teks-sm);
}
.dpic-saran > span { flex: 1 1 240px; min-width: 0; }

/* Tabel siswa monitoring berhalaman di server: penghitung bawaan tabelData
   ("Menampilkan 1–25 dari 25") hanya tahu satu halaman, jadi disembunyikan dan
   diganti kaki .mdata__kaki yang tahu total sebenarnya. */
.mon-siswa .tabeldata__kaki { display: none; }
.mon-siswa__cari .mdata__cari { max-width: 360px; }

/* ======================================================= kotak masuk PIC === */
/* v2.22.0. Satu baris per pengajuan: siswa, KC, kesiapan indikator, waktu.
   Lebar kolom tetap sehingga mata dapat menyusuri satu kolom ke bawah. */
.kmasuk__filter { display: flex; flex-wrap: wrap; gap: var(--jarak-2); flex: 1 1 320px; min-width: 0; }
.kmasuk__filter > select { flex: 1 1 180px; width: auto; min-width: 0; }
.kmasuk .mdata__alat .mdata__cari { flex: 1 1 260px; }
.kmasuk__bilah--aktif { background: var(--warna-primer-lembut); border-color: var(--warna-primer); }

.kmasuk__daftar {
  list-style: none; margin: 0; padding: 0; display: grid;
  border: 1px solid var(--warna-garis); border-radius: var(--radius-3);
  background: var(--warna-permukaan); overflow: hidden;
}
.kmasuk__daftar > li + li { border-top: 1px solid var(--warna-garis); }
.kmasuk__baris {
  display: grid; align-items: center; column-gap: var(--jarak-4); row-gap: var(--jarak-1);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(120px, .8fr) minmax(0, .8fr);
  grid-template-areas: "siswa kc siap waktu" "alasan alasan alasan alasan";
  padding: var(--jarak-3) var(--jarak-4);
  transition: background var(--transisi-cepat);
}
.kmasuk__baris--pilih {
  cursor: pointer;
  grid-template-columns: 20px minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(120px, .8fr) minmax(0, .8fr);
  grid-template-areas: "centang siswa kc siap waktu" ". alasan alasan alasan alasan";
}
.kmasuk__baris--pilih:hover { background: var(--warna-permukaan-2); }
.kmasuk__baris--terpilih, .kmasuk__baris--terpilih:hover { background: var(--warna-primer-lembut); }
.kmasuk__centang { grid-area: centang; display: inline-flex; }
.kmasuk__centang input { width: 18px; height: 18px; padding: 0; }
.kmasuk__siswa { grid-area: siswa; display: grid; min-width: 0; }
.kmasuk__nama {
  text-align: left; font-weight: var(--tebal-tebal); font-size: var(--teks-sm); color: var(--warna-teks);
  padding: 0; max-width: 100%;
}
.kmasuk__nama:hover { color: var(--warna-teks-primer); text-decoration: underline; }
.kmasuk__nama:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.kmasuk__kc { grid-area: kc; display: grid; min-width: 0; }
.kmasuk__kc .kode { color: var(--warna-teks-samar); }
.kmasuk__siap { grid-area: siap; display: grid; gap: 4px; min-width: 0; }
.kmasuk__waktu { grid-area: waktu; display: grid; justify-items: end; text-align: right; gap: 2px; min-width: 0; }
/* v2.57.0: baris lebih rapat agar 50 pengajuan per halaman tidak memanjang. */
.kmasuk__waktu > span:not(.kmasuk__uji):not(.lencana) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 761px) { .kmasuk__baris { padding-block: var(--jarak-2); } }
.kmasuk__alasan { grid-area: alasan; }
@media (max-width: 760px) {
  .kmasuk__baris, .kmasuk__baris--pilih {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "siswa waktu" "kc kc" "siap siap" "alasan alasan";
    row-gap: var(--jarak-2);
  }
  .kmasuk__baris--pilih {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas: "centang siswa waktu" ". kc kc" ". siap siap" ". alasan alasan";
  }
}

/* ========================================================= jadwal uji PIC === */
.jadwal-pic {
  list-style: none; margin: 0; padding: 0; display: grid;
  border: 1px solid var(--warna-garis); border-radius: var(--radius-3);
  background: var(--warna-permukaan); overflow: hidden;
}
.jadwal-pic > li + li { border-top: 1px solid var(--warna-garis); }
.jadwal-pic__baris {
  width: 100%; text-align: left; display: grid; align-items: center; column-gap: var(--jarak-4); row-gap: var(--jarak-2);
  grid-template-columns: 52px minmax(0, 2fr) minmax(0, 1fr) 84px auto;
  grid-template-areas: "tgl utama asesor peserta status";
  padding: var(--jarak-3) var(--jarak-4); transition: background var(--transisi-cepat);
}
.jadwal-pic__baris:hover { background: var(--warna-permukaan-2); }
.jadwal-pic__baris:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.jadwal-pic__tgl {
  grid-area: tgl; display: grid; justify-items: center; padding: 6px 0;
  border-radius: var(--radius-2); background: var(--warna-primer-lembut); color: var(--warna-teks-primer);
}
.jadwal-pic__hari { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1; }
.jadwal-pic__bulan { font-size: 11px; font-weight: var(--tebal-tebal); text-transform: uppercase; letter-spacing: .04em; }
.jadwal-pic__utama { grid-area: utama; display: grid; gap: 2px; min-width: 0; }
.jadwal-pic__asesor { grid-area: asesor; display: grid; min-width: 0; }
.jadwal-pic__peserta { grid-area: peserta; display: grid; justify-items: end; text-align: right; }
.jadwal-pic__status { grid-area: status; justify-self: end; }
@media (max-width: 760px) {
  .jadwal-pic__baris {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "tgl utama utama" "tgl asesor peserta" ". status status";
  }
  .jadwal-pic__status { justify-self: start; }
}
.jadwal-pic__rekap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jarak-2); }
@media (max-width: 480px) { .jadwal-pic__rekap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jadwal-pic__rekap-sel {
  display: grid; gap: 2px; padding: var(--jarak-3); border-radius: var(--radius-2);
  background: var(--warna-permukaan-2); border: 1px solid var(--warna-garis);
}
.jadwal-pic__rekap-angka { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1.15; }
/* Ponsel: app bar hanya bertuliskan "Beranda PIC", jadi nama unit tetap
   ditampilkan; baris keterangan TA disembunyikan karena sudah ada di app bar. */
@media (max-width: 767.98px) {
  .dpic .dpic__judul { display: block; font-size: var(--teks-xl); }
  .dpic .dasbor-mnj__kepala .mdata__grup { display: none; }
  .dpic .dasbor-mnj__panel { padding: var(--jarak-4); }
  .dpic .dasbor-mnj__bagian-kepala { flex-wrap: wrap; }
  .dpic .dasbor-mnj__bagian-kepala > .isi-sisa { flex: 1 1 220px; }
}
@media (max-width: 480px) {
  .dpic-tindakan > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dpic-tindakan__kartu { padding: var(--jarak-3); }
}

/* ============================================== pratinjau berkas (v2.23.0) === */
.pratinjau { min-height: 160px; }
.pratinjau__pdf { width: 100%; height: min(62dvh, 680px); border: 1px solid var(--warna-garis); border-radius: var(--radius-2); background: #fff; }
.pratinjau__gambar { display: flex; justify-content: center; background: var(--warna-permukaan-2); border-radius: var(--radius-2); padding: var(--jarak-2); }
.pratinjau__gambar img { max-width: 100%; max-height: 70dvh; object-fit: contain; }
.pratinjau__teks {
  margin: 0; max-height: 65dvh; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: var(--huruf-kode, ui-monospace, monospace); font-size: var(--teks-sm); line-height: 1.5;
  padding: var(--jarak-3); background: var(--warna-permukaan-2); border: 1px solid var(--warna-garis); border-radius: var(--radius-2);
}
.pratinjau__kosong { display: grid; gap: var(--jarak-2); justify-items: center; text-align: center; padding: var(--jarak-6) var(--jarak-4); }
/* Halaman dokumen: kertas terang di kedua tema, karena begitulah berkas aslinya tampak. */
.pratinjau__dok {
  max-height: 65dvh; overflow: auto; padding: var(--jarak-5) var(--jarak-6);
  background: #fff; color: #1b2430; border: 1px solid var(--warna-garis); border-radius: var(--radius-2);
  font-size: 14px; line-height: 1.6;
}
.pratinjau__dok p { margin: 0 0 .5em; }
.pratinjau__dok h2, .pratinjau__dok h3, .pratinjau__dok h4, .pratinjau__dok h5, .pratinjau__dok h6 { margin: .9em 0 .4em; line-height: 1.3; color: #0d1b2a; }
.pratinjau__dok h2 { font-size: 20px; } .pratinjau__dok h3 { font-size: 17px; } .pratinjau__dok h4 { font-size: 15px; }
.pratinjau__dok ul { margin: 0 0 .6em; padding-left: 1.4em; }
.pratinjau__dok .pratinjau__tabel { color: #1b2430; }
@media (max-width: 559.98px) { .pratinjau__dok { padding: var(--jarak-4); } }
.pratinjau__chip { display: inline-block; padding: 0 6px; margin: 0 2px; border-radius: 4px; background: #eef2f7; color: #526479; font-size: 11px; }
.pratinjau__gulir { max-width: 100%; overflow: auto; max-height: 60dvh; margin: .4em 0 .8em; }
.pratinjau__tabel { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.pratinjau__tabel td, .pratinjau__tabel th { border: 1px solid #cbd5e0; padding: 4px 8px; vertical-align: top; text-align: left; }
.pratinjau__tabel td p { margin: 0; }
.pratinjau__tabel--grid { background: var(--warna-permukaan); color: var(--warna-teks); }
.pratinjau__tabel--grid td, .pratinjau__tabel--grid th { border-color: var(--warna-garis); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.pratinjau__tabel--grid th { position: sticky; top: 0; background: var(--warna-permukaan-2); color: var(--warna-teks-samar); font-weight: var(--tebal-sedang); font-size: 11px; text-align: center; }
.pratinjau__tabel--grid tr > th:first-child { position: sticky; left: 0; z-index: 1; }
.pratinjau__tab { display: flex; gap: var(--jarak-1); overflow-x: auto; border-bottom: 1px solid var(--warna-garis); }
.pratinjau__tab-item { padding: 6px var(--jarak-3); font-size: var(--teks-sm); color: var(--warna-teks-lembut); border-bottom: 2px solid transparent; white-space: nowrap; }
.pratinjau__tab-item[aria-selected="true"] { color: var(--warna-teks-primer); border-bottom-color: var(--warna-primer); font-weight: var(--tebal-tebal); }
.pratinjau__slide { padding: var(--jarak-4); border: 1px solid var(--warna-garis); border-radius: var(--radius-2); background: var(--warna-permukaan-2); }
.pratinjau__slide h4 { margin: 4px 0; font-size: var(--teks-md); }
.pratinjau__slide p { margin: 0; font-size: var(--teks-sm); }
.pratinjau__zip { list-style: none; margin: 0; padding: 0; max-height: 60dvh; overflow: auto; border: 1px solid var(--warna-garis); border-radius: var(--radius-2); }
.pratinjau__zip li { display: flex; justify-content: space-between; gap: var(--jarak-3); padding: 6px var(--jarak-3); font-size: var(--teks-sm); }
.pratinjau__zip li + li { border-top: 1px solid var(--warna-garis); }

/* Pilihan kategori template/petunjuk pada dialog LSP. */
.pilih-kategori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jarak-2); }
.pilih-kategori__opsi {
  display: grid; gap: 2px; padding: var(--jarak-3); cursor: pointer;
  border: 1px solid var(--warna-garis); border-radius: var(--radius-2); background: var(--warna-permukaan);
}
.pilih-kategori__opsi:has(input:checked) { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
.pilih-kategori__opsi input { position: absolute; opacity: 0; pointer-events: none; }
.pilih-kategori__opsi:has(input:focus-visible) { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }

/* ============================================ dasbor Manajemen (v2.24.0) === */
/* Ringkasan eksekutif & Uji-Sertifikasi. Panel memakai .dasbor-mnj__*; di sini
   hanya visualisasi khususnya. Warna seluruhnya dari token, sehingga tema
   gelap/terang berlaku tanpa menggambar ulang. */

.vg-warna--sukses { background: var(--warna-sukses); }
.vg-warna--peringatan { background: var(--warna-peringatan); }
.vg-warna--bahaya { background: var(--warna-bahaya); }
.vg-warna--info { background: var(--navy-400); }
.vg-warna--aksen { background: var(--warna-aksen); }
.vg-warna--primer { background: var(--warna-primer); }
.vg-warna--netral { background: var(--warna-garis-kuat); }
:root[data-tema="gelap"] .vg-warna--primer { background: var(--navy-300); }

@media (max-width: 767.98px) { .mnj .mnj__judul { display: block; font-size: var(--teks-xl); } }
.mnj-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jarak-6); align-items: start; }
.mnj-dua > * { min-width: 0; }
@media (max-width: 980px) { .mnj-dua { grid-template-columns: minmax(0, 1fr); } }
.mnj .dasbor-mnj__bagian-kepala { flex-wrap: wrap; }
.mnj .dasbor-mnj__bagian-kepala > .isi-sisa { flex: 1 1 260px; }
.mnj .dasbor-mnj__bagian-kepala > select { width: auto; flex: 0 1 240px; }
.vg-panas__sel { min-width: 52px; }
@media (max-width: 767.98px) { .mnj .dasbor-mnj__panel { padding: var(--jarak-4); } }
.mnj-info {
  flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-penuh); color: var(--warna-teks-lembut); border: 1px solid var(--warna-garis);
}
.mnj-info:hover { color: var(--warna-teks-primer); border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
.mnj-info:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.mnj-tren__kanvas { position: relative; height: 260px; }

/* --- tanda vital --- */
.mvital { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jarak-3); }
@media (max-width: 1180px) { .mvital { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mvital > * { min-width: 0; }
.mvital__kartu {
  display: grid; gap: var(--jarak-2); text-align: left; width: 100%; padding: var(--jarak-4);
  background: var(--warna-permukaan); border: 1px solid var(--warna-garis); border-top: 3px solid var(--warna-primer);
  border-radius: var(--radius-3); box-shadow: var(--bayang-1); transition: border-color var(--transisi-cepat), transform var(--transisi-cepat);
}
.mvital__kartu:hover { border-color: var(--warna-garis-kuat); transform: translateY(-1px); }
.mvital__kartu:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.mvital__kartu--sukses { border-top-color: var(--warna-sukses); }
.mvital__kartu--peringatan { border-top-color: var(--warna-peringatan); }
.mvital__kartu--peringatan .mvital__angka { color: var(--warna-teks-peringatan); }
.mvital__label { display: flex; align-items: center; gap: 6px; font-size: var(--teks-xs); font-weight: var(--tebal-sedang); color: var(--warna-teks-lembut); }
.mvital__isi { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--jarak-3); min-height: 70px; }
.mvital__angka { font-size: var(--teks-3xl); font-weight: var(--tebal-berat); line-height: 1; color: var(--warna-teks); }
.mvital__viz { flex: 0 1 128px; min-width: 0; display: flex; justify-content: flex-end; }
.mvital__viz > svg, .mvital__tumpuk { width: 100%; max-width: 128px; }
.mvital__tumpuk { align-self: center; }
.mvital__sub { font-size: var(--teks-xs); color: var(--warna-teks-samar); line-height: 1.35; }
.mvital__lagi { display: inline-flex; align-items: center; gap: 2px; font-size: var(--teks-xs); color: var(--warna-teks-primer); font-weight: var(--tebal-sedang); }
@media (max-width: 520px) {
  .mvital { gap: var(--jarak-2); }
  .mvital__kartu { padding: var(--jarak-3); gap: 6px; }
  .mvital__isi { flex-direction: column; align-items: stretch; min-height: 0; gap: 6px; }
  .mvital__angka { font-size: var(--teks-2xl); }
  .mvital__viz { flex: none; justify-content: flex-start; }
  .mvital__viz > svg, .mvital__tumpuk { max-width: 112px; }
  .mvital__lagi { display: none; }
}

/* --- gauge --- */
.vg { width: 100%; height: auto; overflow: visible; }
.vg-zona { stroke-linecap: butt; opacity: .22; }
.vg-zona--bahaya { stroke: var(--warna-bahaya); }
.vg-zona--peringatan { stroke: var(--warna-peringatan); }
.vg-zona--sukses { stroke: var(--warna-sukses); }
.vg-nilai { stroke-linecap: round; }
.vg-nilai--sukses { stroke: var(--warna-sukses); }
.vg-nilai--peringatan { stroke: var(--warna-peringatan); }
.vg-nilai--bahaya { stroke: var(--warna-bahaya); }
.vg-nilai--netral { stroke: var(--warna-primer); }
.vg-jarum { stroke: var(--warna-teks); stroke-width: 2.5; stroke-linecap: round; }
.vg-poros { fill: var(--warna-teks); }

/* --- sparkline --- */
.vg-spark { width: 100%; height: 34px; }
.vg-spark__isi { fill: var(--warna-primer); }
.vg-spark--sukses .vg-spark__isi { fill: var(--warna-sukses); }
.vg-spark__nol { fill: var(--warna-garis); }

/* --- bilah bertumpuk & legenda --- */
.vg-tumpuk { display: flex; gap: 2px; height: 14px; border-radius: var(--radius-penuh); overflow: hidden; background: var(--warna-permukaan-2); }
.vg-tumpuk--tipis { height: 8px; }
.vg-tumpuk__seg { min-width: 3px; flex-basis: 0; }
.vg-legenda { display: flex; flex-wrap: wrap; gap: 4px var(--jarak-4); font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.vg-legenda__item { display: inline-flex; align-items: center; gap: 6px; }
.vg-legenda__item strong { color: var(--warna-teks); font-weight: var(--tebal-tebal); }
.vg-titik { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }

/* --- perjalanan kompetensi --- */
.vg-alur { display: grid; gap: var(--jarak-3); }
.vg-alur__baris { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr); align-items: end; }
.vg-alur__tahap {
  display: grid; justify-items: center; gap: 2px; padding: var(--jarak-2); border-radius: var(--radius-2); text-align: center;
  transition: background var(--transisi-cepat);
}
.vg-alur__tahap:hover { background: var(--warna-permukaan-2); }
.vg-alur__tahap:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.vg-alur__kolom { width: min(72px, 100%); height: 120px; display: flex; align-items: flex-end; border-radius: 8px 8px 4px 4px; background: var(--warna-permukaan-2); overflow: hidden; margin-bottom: var(--jarak-2); }
.vg-alur__isi { width: 100%; border-radius: 6px 6px 0 0; background: var(--navy-400); transition: height .5s var(--kurva); }
.vg-alur__tahap--0 .vg-alur__isi { background: var(--warna-garis-kuat); }
.vg-alur__tahap--1 .vg-alur__isi { background: var(--navy-300); }
.vg-alur__tahap--2 .vg-alur__isi { background: var(--navy-500); }
.vg-alur__tahap--3 .vg-alur__isi { background: var(--warna-aksen); }
.vg-alur__tahap--4 .vg-alur__isi { background: var(--warna-sukses); }
.vg-alur__angka { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1.1; color: var(--warna-teks); }
.vg-alur__teks { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks); }
.vg-alur__sub { font-size: 11px; color: var(--warna-teks-samar); line-height: 1.3; }
.vg-alur__panah { display: grid; justify-items: center; gap: 2px; padding-bottom: 74px; color: var(--warna-teks-samar); font-size: 11px; font-weight: var(--tebal-tebal); }
.vg-alur__bocor {
  display: flex; align-items: center; gap: var(--jarak-2); text-align: left; padding: var(--jarak-3);
  border-radius: var(--radius-2); background: var(--warna-peringatan-lembut); color: var(--warna-teks); font-size: var(--teks-sm);
  border: 1px solid transparent;
}
.vg-alur__bocor > span { flex: 1 1 auto; }
.vg-alur__bocor svg:first-child { color: var(--warna-teks-peringatan); }
.vg-alur__bocor:hover { border-color: var(--warna-peringatan); }
@media (max-width: 760px) {
  .vg-alur__baris { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 2px; }
  .vg-alur__tahap { grid-template-columns: 1fr auto; grid-template-areas: "teks angka" "kolom kolom" "sub sub"; justify-items: start; text-align: left; }
  .vg-alur__kolom { grid-area: kolom; width: 100%; height: 10px; border-radius: 99px; margin: 4px 0; }
  .vg-alur__isi { height: 100% !important; border-radius: 99px; }
  .vg-alur__tahap .vg-alur__isi { width: var(--lebar, 100%); }
  .vg-alur__angka { grid-area: angka; font-size: var(--teks-lg); }
  .vg-alur__teks { grid-area: teks; }
  .vg-alur__sub { grid-area: sub; }
  .vg-alur__panah { padding: 0 0 0 var(--jarak-2); grid-template-columns: auto auto; justify-content: start; align-items: center; transform: none; }
  .vg-alur__panah svg { transform: rotate(90deg); }
}

/* --- peta panas --- */
.vg-panas__gulir { overflow: auto; max-height: 560px; border: 1px solid var(--warna-garis); border-radius: var(--radius-2); }
.vg-panas { border-collapse: separate; border-spacing: 3px; font-size: var(--teks-xs); }
.vg-panas th { font-weight: var(--tebal-sedang); color: var(--warna-teks-lembut); white-space: nowrap; }
.vg-panas thead th { position: sticky; top: 0; z-index: 2; background: var(--warna-permukaan); padding: 6px 4px; }
.vg-panas__pojok { text-align: left; left: 0; z-index: 3 !important; }
.vg-panas__kol span { display: inline-block; min-width: 44px; }
.vg-panas__baris { position: sticky; left: 0; z-index: 1; background: var(--warna-permukaan); text-align: left; padding: 0 var(--jarak-2) 0 4px; }
.vg-panas__grup th { text-align: left; padding: var(--jarak-2) 4px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--warna-teks-samar); background: var(--warna-permukaan); position: sticky; left: 0; }
.vg-panas__sel { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 44px; height: 32px; border-radius: 6px; font-weight: var(--tebal-tebal); }
button.vg-panas__sel { cursor: pointer; transition: transform var(--transisi-cepat), box-shadow var(--transisi-cepat); }
button.vg-panas__sel:hover { transform: scale(1.06); box-shadow: var(--bayang-2); }
button.vg-panas__sel:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 1px; }
.vg-panas__sel--kosong { color: var(--warna-teks-samar); background: transparent; }
.vg-panas__sel--0 { background: var(--warna-permukaan-2); color: var(--warna-teks-samar); }
.vg-panas__sel--1 { background: var(--merah-500); color: #fff; }
.vg-panas__sel--2 { background: var(--amber-200); color: var(--amber-700); }
.vg-panas__sel--3 { background: var(--hijau-200); color: var(--hijau-700); }
.vg-panas__sel--4 { background: var(--hijau-500); color: #fff; }
.vg-legenda .vg-panas__sel--1, .vg-legenda .vg-panas__sel--2, .vg-legenda .vg-panas__sel--3, .vg-legenda .vg-panas__sel--4 { width: 14px; height: 14px; border-radius: 3px; }

/* --- denyut --- */
.vg-denyut__svg { width: 100%; height: 120px; display: block; }
.vg-denyut__batang { fill: var(--navy-400); opacity: .75; }
.vg-denyut__batang--kini { fill: var(--warna-aksen); opacity: 1; }
.vg-denyut__batang--nol { fill: var(--warna-garis); opacity: 1; }
.vg-denyut__label { fill: var(--warna-teks-samar); font-size: 10px; }
.maktif { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.maktif__item { width: 100%; display: flex; align-items: center; gap: var(--jarak-2); padding: 6px var(--jarak-2); border-radius: var(--radius-2); text-align: left; font-size: var(--teks-sm); }
.maktif__item:hover { background: var(--warna-permukaan-2); }

/* --- sorotan --- */
.msorot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--jarak-2); }
.msorot__item {
  display: flex; align-items: flex-start; gap: var(--jarak-3); text-align: left; padding: var(--jarak-3);
  border-radius: var(--radius-2); border: 1px solid var(--warna-garis); border-left: 4px solid var(--warna-garis-kuat);
  background: var(--warna-permukaan); transition: background var(--transisi-cepat);
}
.msorot__item:hover { background: var(--warna-permukaan-2); }
.msorot__item:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.msorot__item > svg:last-child { flex: none; margin-top: 3px; color: var(--warna-teks-samar); }
.msorot__ikon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--warna-permukaan-2); }
.msorot__isi { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.msorot__judul { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks); line-height: 1.35; }
.msorot__teks { font-size: var(--teks-xs); color: var(--warna-teks-lembut); line-height: 1.4; }
.msorot__item--bahaya { border-left-color: var(--warna-bahaya); }
.msorot__item--bahaya .msorot__ikon { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); }
.msorot__item--peringatan { border-left-color: var(--warna-peringatan); }
.msorot__item--peringatan .msorot__ikon { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.msorot__item--info { border-left-color: var(--navy-400); }
.msorot__item--info .msorot__ikon { background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.msorot__item--sukses { border-left-color: var(--warna-sukses); }
.msorot__item--sukses .msorot__ikon { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }

/* --- kinerja unit --- */
.munit { display: grid; gap: 2px; }
.munit__kepala, .munit__baris {
  display: grid; align-items: center; gap: var(--jarak-3);
  grid-template-columns: minmax(0, 1.6fr) minmax(150px, 1.3fr) 70px minmax(0, .9fr) minmax(0, .9fr) 80px minmax(0, .9fr);
}
.munit__kepala { padding: 0 var(--jarak-3) var(--jarak-2); font-size: 11px; font-weight: var(--tebal-tebal); text-transform: uppercase; letter-spacing: .04em; color: var(--warna-teks-samar); border-bottom: 1px solid var(--warna-garis); }
.munit__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.munit__baris { width: 100%; text-align: left; padding: var(--jarak-3); border-radius: var(--radius-2); transition: background var(--transisi-cepat); }
.munit__daftar li:nth-child(odd) .munit__baris { background: var(--warna-permukaan-2); }
.munit__baris:hover { background: var(--warna-primer-lembut) !important; }
.munit__baris:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.munit__nama { display: grid; min-width: 0; font-size: var(--teks-sm); }
.munit__capaian { display: grid; gap: 4px; min-width: 0; }
.munit__sel { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--teks-sm); min-width: 0; }
@media (max-width: 1100px) {
  .munit__kepala { display: none; }
  .munit__baris { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--jarak-2); }
  .munit__nama, .munit__capaian { grid-column: 1 / -1; }
  .munit__sel::before { content: attr(data-label) ': '; color: var(--warna-teks-samar); font-size: var(--teks-xs); }
}

/* --- jadwal --- */
.mjadwal { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-2); }
.mjadwal__item { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) 96px; align-items: center; gap: var(--jarak-3); text-align: left; padding: var(--jarak-2); border-radius: var(--radius-2); border: 1px solid var(--warna-garis); }
.mjadwal__item:hover { background: var(--warna-permukaan-2); }
.mjadwal__tgl { display: grid; justify-items: center; padding: 6px 0; border-radius: var(--radius-2); background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.mjadwal__hari { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1; }
.mjadwal__bln { font-size: 11px; font-weight: var(--tebal-tebal); text-transform: uppercase; }
.mjadwal__isi { display: grid; min-width: 0; gap: 2px; }
.mjadwal__kursi { display: grid; gap: 4px; justify-items: end; }
.mjadwal__kursi .progres { width: 100%; }

/* --- navigasi --- */
.mnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--jarak-2); }
.mnav__item { display: flex; align-items: center; gap: var(--jarak-3); text-align: left; padding: var(--jarak-3) var(--jarak-4); border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks-primer); }
.mnav__item > .isi-sisa { display: grid; color: var(--warna-teks); }
.mnav__item:hover { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }

/* --- uji & sertifikasi --- */
.muji-tahapan { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--jarak-2); }
.muji-tahap { display: grid; gap: 2px; text-align: left; padding: var(--jarak-3); border-radius: var(--radius-2); border: 1px solid var(--warna-garis); background: var(--warna-permukaan-2); border-top: 3px solid var(--warna-garis-kuat); }
.muji-tahap:hover { border-color: var(--warna-garis-kuat); }
.muji-tahap--peringatan { border-top-color: var(--warna-peringatan); }
.muji-tahap--info { border-top-color: var(--navy-400); }
.muji-tahap--aksen { border-top-color: var(--warna-aksen); }
.muji-tahap--sukses { border-top-color: var(--warna-sukses); }
.muji-tahap--bahaya { border-top-color: var(--warna-bahaya); }
.muji-tahap--nol { opacity: .6; }
.muji-tahap__angka { font-size: var(--teks-xl); font-weight: var(--tebal-berat); color: var(--warna-teks); }
.muji-tahap__teks { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.muji-histo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jarak-3); align-items: end; height: 190px; }
.muji-histo__kol { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; gap: 4px; }
.muji-histo__angka { font-weight: var(--tebal-berat); font-size: var(--teks-md); }
.muji-histo__batang { width: min(56px, 100%); display: flex; align-items: flex-end; background: var(--warna-permukaan-2); border-radius: 8px; overflow: hidden; }
.muji-histo__isi { width: 100%; border-radius: 8px 8px 0 0; }
.muji-histo__label { font-size: 11px; color: var(--warna-teks-lembut); text-align: center; }
.muji-lulus { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-2); }
.muji-lulus__baris { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px 46px; align-items: center; gap: var(--jarak-2); font-size: var(--teks-sm); }
.muji-lulus__bilah { position: relative; }
.muji-lulus__target { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--warna-teks); opacity: .55; border-radius: 1px; }
.muji-lulus__angka { text-align: right; font-weight: var(--tebal-tebal); }
.muji-unit { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.muji-unit__baris { width: 100%; display: grid; grid-template-columns: 110px minmax(0, 1fr) 160px; align-items: center; gap: var(--jarak-3); text-align: left; padding: var(--jarak-2) var(--jarak-3); border-radius: var(--radius-2); }
.muji-unit__baris:hover { background: var(--warna-permukaan-2); }
.muji-unit__nama { display: grid; min-width: 0; }
.muji-unit__ket { text-align: right; }
@media (max-width: 640px) {
  .muji-unit__baris { grid-template-columns: minmax(0, 1fr) auto; }
  .muji-unit__bilah { grid-column: 1 / -1; grid-row: 2; }
}

/* --- panel rincian (laci samping di layar lebar) --- */
@media (min-width: 900px) {
  .sheet-lapisan--samping { justify-content: flex-end; align-items: stretch; }
  .sheet-lapisan--samping .sheet {
    width: min(580px, 92vw); max-height: none; height: 100dvh; border-radius: var(--radius-4) 0 0 var(--radius-4);
    animation: sheet-samping var(--transisi) both;
  }
  .sheet-lapisan--samping .sheet__pegangan { display: none; }
  .sheet-lapisan--samping .sheet__kepala { padding-top: var(--jarak-5); }
}
@keyframes sheet-samping { from { transform: translateX(100%); } to { transform: none; } }
.sheet__kaki .tombol { flex: 1 1 auto; }
.vg-rinci__sorot { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--jarak-2); }
.vg-rinci__angka { display: grid; gap: 2px; padding: var(--jarak-3); border-radius: var(--radius-2); background: var(--warna-permukaan-2); border: 1px solid var(--warna-garis); }
.vg-rinci__nilai { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1.15; color: var(--warna-teks); }
.vg-rinci__bagian { display: grid; gap: var(--jarak-2); }
.vg-rinci__judul { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; font-weight: var(--tebal-tebal); text-transform: uppercase; letter-spacing: .05em; color: var(--warna-teks-samar); }
.vg-rinci__tindak { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: var(--teks-sm); }
.vg-tabel { font-size: var(--teks-sm); }
.vg-tabel td, .vg-tabel th { white-space: normal; }

/* ============================================== uji divisi (v2.25.0) === */
/* Empat warna divisi — dari token yang sudah ada, agar tema gelap ikut. */
.sdv-warna--0 { --dv: var(--navy-500); --dv-lembut: var(--navy-050); }
.sdv-warna--1 { --dv: var(--hijau-500); --dv-lembut: var(--hijau-050); }
.sdv-warna--2 { --dv: var(--amber-500); --dv-lembut: var(--amber-050); }
.sdv-warna--3 { --dv: var(--merah-500); --dv-lembut: var(--merah-050); }
:root[data-tema="gelap"] .sdv-warna--0 { --dv: var(--navy-300); --dv-lembut: rgba(91, 139, 198, .16); }
:root[data-tema="gelap"] .sdv-warna--1 { --dv: var(--hijau-200); --dv-lembut: rgba(30, 125, 90, .2); }
:root[data-tema="gelap"] .sdv-warna--2 { --dv: var(--amber-200); --dv-lembut: rgba(180, 83, 9, .2); }
:root[data-tema="gelap"] .sdv-warna--3 { --dv: var(--merah-200); --dv-lembut: rgba(180, 35, 24, .2); }

.sdv { padding-bottom: 96px; }

/* --- hero --- */
.sdv-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--jarak-3) var(--jarak-4); align-items: center;
  padding: var(--jarak-5); border-radius: var(--radius-4); color: #fff;
  background: radial-gradient(circle at 85% 20%, rgba(201, 162, 39, .35), transparent 45%), var(--merek-latar);
  box-shadow: var(--bayang-2);
}
.sdv-hero__kecil { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; margin: 0; }
.sdv-hero__judul { font-size: var(--teks-2xl); font-weight: var(--tebal-berat); margin: 2px 0 4px; line-height: 1.15; }
.sdv-hero__sub { font-size: var(--teks-sm); opacity: .85; margin: 0; max-width: 46ch; }
.sdv-hero__ring { position: relative; width: 74px; height: 74px; display: grid; place-items: center; }
.sdv-hero__ring .sdv-cincin { position: absolute; inset: 0; }
.sdv-hero__ring .sdv-cincin__dasar { stroke: rgba(255, 255, 255, .18); }
.sdv-hero__ring .sdv-cincin__isi { stroke: var(--emas-400); }
.sdv-hero__ring-isi { display: grid; justify-items: center; line-height: 1.05; font-size: 10px; opacity: .9; }
.sdv-hero__ring-isi strong { font-size: var(--teks-md); }
.sdv-hero__statistik { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--jarak-2); font-size: var(--teks-xs); }
.sdv-hero__statistik span { padding: 4px 10px; border-radius: var(--radius-penuh); background: rgba(255, 255, 255, .12); }
.sdv-cincin__dasar { stroke: var(--warna-garis); }
.sdv-cincin__isi { stroke: var(--dv, var(--warna-primer)); transition: stroke-dashoffset .6s var(--kurva); }

/* --- tab segmen --- */
.sdv-tab { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--radius-penuh); background: var(--warna-permukaan-2); border: 1px solid var(--warna-garis); }
.sdv-tab__item { padding: 10px; border-radius: var(--radius-penuh); font-size: var(--teks-sm); font-weight: var(--tebal-sedang); color: var(--warna-teks-lembut); }
.sdv-tab__item[aria-selected="true"] { background: var(--warna-permukaan); color: var(--warna-teks); box-shadow: var(--bayang-1); font-weight: var(--tebal-tebal); }

/* --- kartu divisi (gulir menyamping di ponsel) --- */
.sdv-divisi { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: var(--jarak-2); overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; scrollbar-width: none; }
.sdv-divisi::-webkit-scrollbar { display: none; }
.sdv-divisi__kartu {
  scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ikon ring" "nama nama" "meta meta";
  gap: 6px; text-align: left; padding: var(--jarak-3); border-radius: var(--radius-3);
  border: 1.5px solid var(--warna-garis); background: var(--warna-permukaan); transition: transform var(--transisi-cepat), border-color var(--transisi-cepat), box-shadow var(--transisi-cepat);
}
.sdv-divisi__kartu[aria-selected="true"] { border-color: var(--dv); background: var(--dv-lembut); box-shadow: 0 6px 18px -10px var(--dv); transform: translateY(-2px); }
.sdv-divisi__kartu:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.sdv-divisi__ikon { grid-area: ikon; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--dv); }
.sdv-divisi__ring { grid-area: ring; justify-self: end; position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.sdv-divisi__ring .sdv-cincin { position: absolute; inset: 0; }
.sdv-divisi__persen { font-size: 11px; font-weight: var(--tebal-tebal); }
.sdv-divisi__nama { grid-area: nama; font-weight: var(--tebal-tebal); font-size: var(--teks-sm); line-height: 1.25; color: var(--warna-teks); }
.sdv-divisi__meta { grid-area: meta; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
@media (min-width: 768px) { .sdv-divisi { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }
.sdv-pic { display: flex; align-items: center; gap: 6px; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }

/* --- kartu kompetensi --- */
.sdv-kk { border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); overflow: hidden; transition: box-shadow var(--transisi-cepat); }
.sdv-kk--buka { box-shadow: var(--bayang-2); }
.sdv-kk--tuntas { border-color: var(--warna-sukses); }
.sdv-kk__kepala { width: 100%; display: flex; align-items: center; gap: var(--jarak-2); padding: var(--jarak-3) var(--jarak-3) var(--jarak-2); text-align: left; }
.sdv-kk__judul { flex: 1 1 auto; display: grid; min-width: 0; gap: 1px; font-size: var(--teks-sm); }
.sdv-kk__kode { font-size: 11px; font-weight: var(--tebal-tebal); letter-spacing: .03em; color: var(--warna-teks-samar); text-transform: uppercase; }
.sdv-kk__panah { color: var(--warna-teks-samar); transition: transform var(--transisi-cepat); display: inline-flex; }
.sdv-kk--buka .sdv-kk__panah { transform: rotate(180deg); }
.sdv-pita { display: flex; gap: 3px; padding: 0 var(--jarak-3) var(--jarak-3); }
.sdv-pita__ruas { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--warna-garis); transition: background var(--transisi-cepat), transform var(--transisi-cepat); }
.sdv-pita__ruas--tercapai { background: var(--warna-sukses); }
.sdv-pita__ruas--diajukan { background: var(--warna-peringatan); }
.sdv-pita__ruas--dijadwalkan { background: var(--navy-400); }
.sdv-pita__ruas--dipilih { background: var(--warna-aksen); transform: scaleY(1.6); }
.sdv-kk__isi { display: grid; gap: var(--jarak-2); padding: 0 var(--jarak-3) var(--jarak-3); animation: sdv-masuk .2s var(--kurva) both; }
@keyframes sdv-masuk { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- indikator --- */
.sdv-ik { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sdv-ik__baris {
  width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--jarak-2);
  text-align: left; padding: 10px var(--jarak-3); border-radius: var(--radius-2); border: 1.5px solid var(--warna-garis);
  background: var(--warna-permukaan); font-size: var(--teks-sm); min-height: 52px;
  transition: border-color var(--transisi-cepat), background var(--transisi-cepat), transform .08s;
}
.sdv-ik__baris:not(:disabled):active { transform: scale(.985); }
.sdv-ik__baris:not(:disabled):hover { border-color: var(--warna-garis-kuat); }
.sdv-ik__baris:disabled { cursor: default; }
.sdv-ik__baris--dipilih { border-color: var(--warna-aksen); background: var(--warna-aksen-lembut); }
.sdv-ik__baris--tercapai { background: var(--warna-sukses-lembut); border-color: transparent; }
.sdv-ik__baris--diajukan, .sdv-ik__baris--dijadwalkan { background: var(--warna-permukaan-2); border-style: dashed; }
.sdv-ik__tanda { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--warna-garis-kuat); color: var(--warna-teks-samar); }
.sdv-ik__baris--dipilih .sdv-ik__tanda { background: var(--warna-aksen); border-color: var(--warna-aksen); color: #fff; }
.sdv-ik__baris--tercapai .sdv-ik__tanda { background: var(--warna-sukses); border-color: var(--warna-sukses); color: #fff; }
.sdv-ik__baris--diajukan .sdv-ik__tanda { border-color: var(--warna-peringatan); color: var(--warna-teks-peringatan); }
.sdv-ik__baris--dijadwalkan .sdv-ik__tanda { border-color: var(--navy-400); color: var(--warna-teks-primer); }
.sdv-ik__teks { display: grid; gap: 1px; min-width: 0; color: var(--warna-teks); }
.sdv-ik__kode { font-size: 11px; font-weight: var(--tebal-tebal); color: var(--warna-teks-samar); }
.sdv-ik__status { font-size: 11px; font-weight: var(--tebal-sedang); color: var(--warna-teks-lembut); white-space: nowrap; }
.sdv-ik--ringkas { gap: 4px; }
.sdv-ik__hasil { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--jarak-2); align-items: center; font-size: var(--teks-sm); padding: 4px 0; }
.sdv-ik__hasil .sdv-ik__tanda { width: 22px; height: 22px; }
.sdv-ik__hasil--sukses .sdv-ik__tanda { background: var(--warna-sukses); border-color: var(--warna-sukses); color: #fff; }
.sdv-ik__hasil--bahaya .sdv-ik__tanda { background: var(--warna-bahaya); border-color: var(--warna-bahaya); color: #fff; }
.sdv-ik__hasil--sukses .sdv-ik__status { color: var(--warna-teks-sukses); }
.sdv-ik__hasil--bahaya .sdv-ik__status { color: var(--warna-teks-bahaya); }

.sdv-catat { display: flex; align-items: center; gap: var(--jarak-2); padding: var(--jarak-2) var(--jarak-3); border-radius: var(--radius-2); font-size: var(--teks-sm); text-align: left; width: 100%; }
.sdv-catat--sukses { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.sdv-catat--info { background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.sdv-catat--bahaya { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); margin: 0; }
.sdv-ringkas { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: var(--teks-sm); }
.sdv-ringkas li span { display: block; }

/* --- bilah aksi menempel --- */
.sdv-aksi {
  position: fixed; left: var(--jarak-3); right: var(--jarak-3); z-index: 40;
  bottom: calc(var(--tinggi-bottomnav) + var(--aman-bawah) + var(--jarak-2));
  display: flex; align-items: center; gap: var(--jarak-2); padding: var(--jarak-2) var(--jarak-2) var(--jarak-2) var(--jarak-4);
  border-radius: var(--radius-penuh); background: var(--warna-teks); color: var(--warna-permukaan);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .45); animation: sdv-naik .25s var(--kurva) both;
}
.sdv-aksi .tombol--hantu { color: inherit; }
.sdv-aksi__info { flex: 1 1 auto; display: grid; line-height: 1.2; font-size: var(--teks-xs); min-width: 0; }
.sdv-aksi__info strong { font-size: var(--teks-sm); }
@keyframes sdv-naik { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 768px) {
  .sdv-aksi { left: auto; right: var(--jarak-6); bottom: var(--jarak-6); width: min(520px, 60vw); }
}

/* --- kartu pengajuan & tahapan --- */
.sdv-ajuan { display: grid; gap: var(--jarak-3); padding: var(--jarak-4); border-radius: var(--radius-3); background: var(--warna-permukaan); border: 1px solid var(--warna-garis); border-left: 4px solid var(--warna-garis-kuat); }
.sdv-ajuan--peringatan { border-left-color: var(--warna-peringatan); }
.sdv-ajuan--info { border-left-color: var(--navy-400); }
.sdv-ajuan--sukses { border-left-color: var(--warna-sukses); }
.sdv-ajuan--bahaya { border-left-color: var(--warna-bahaya); }
.sdv-tahap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.sdv-tahap::before { content: ''; position: absolute; top: 7px; left: 16%; right: 16%; height: 2px; background: var(--warna-garis); }
.sdv-tahap__item { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
.sdv-tahap__titik { width: 16px; height: 16px; border-radius: 50%; background: var(--warna-permukaan); border: 2px solid var(--warna-garis-kuat); z-index: 1; }
.sdv-tahap__item--selesai .sdv-tahap__titik { background: var(--warna-sukses); border-color: var(--warna-sukses); }
.sdv-tahap__item--gagal .sdv-tahap__titik { background: var(--warna-bahaya); border-color: var(--warna-bahaya); }
.sdv-tahap__teks { font-size: var(--teks-xs); font-weight: var(--tebal-sedang); color: var(--warna-teks); }
.sdv-tahap__waktu { font-size: 11px; color: var(--warna-teks-samar); min-height: 1em; }
.sdv-jadwal { display: flex; align-items: center; gap: var(--jarak-3); padding: var(--jarak-3); border-radius: var(--radius-2); background: var(--warna-primer-lembut); }
.sdv-jadwal .isi-sisa { display: grid; gap: 2px; }
.sdv-jadwal__tgl { flex: none; width: 50px; display: grid; justify-items: center; padding: 6px 0; border-radius: var(--radius-2); background: var(--warna-primer); color: #fff; }
.sdv-jadwal__hari { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1; }
.sdv-jadwal__bln { font-size: 11px; font-weight: var(--tebal-tebal); text-transform: uppercase; }

/* --- perayaan --- */
.sdv-rayakan { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none; background: rgba(8, 18, 29, .35); animation: sdv-pudar .2s both; }
.sdv-rayakan--pergi { opacity: 0; transition: opacity .35s; }
@keyframes sdv-pudar { from { opacity: 0; } to { opacity: 1; } }
.sdv-rayakan__kartu { display: grid; justify-items: center; gap: 6px; padding: var(--jarak-5) var(--jarak-6); border-radius: var(--radius-4); background: var(--warna-permukaan); color: var(--warna-teks); box-shadow: var(--bayang-3); text-align: center; max-width: 300px; animation: sdv-pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.sdv-rayakan__ikon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--warna-sukses); }
@keyframes sdv-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.sdv-rayakan__titik { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 2px;
  background: hsl(calc(var(--i) * 26), 80%, 55%); animation: sdv-pecah .9s ease-out both; --sudut: calc(var(--i) * 25.7deg); }
@keyframes sdv-pecah { from { transform: translate(-50%, -50%) rotate(var(--sudut)) translateY(0); opacity: 1; } to { transform: translate(-50%, -50%) rotate(var(--sudut)) translateY(-150px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sdv-rayakan__titik { display: none; } .sdv-rayakan__kartu, .sdv-aksi, .sdv-kk__isi { animation: none; } }

/* --- promosi di beranda siswa --- */
.sdv-promo {
  display: flex; align-items: center; gap: var(--jarak-3); width: 100%; text-align: left; padding: var(--jarak-4);
  border-radius: var(--radius-3); color: var(--warna-teks); border: 1px solid var(--warna-garis);
  background: linear-gradient(120deg, var(--warna-aksen-lembut), var(--warna-primer-lembut));
}
.sdv-promo .isi-sisa { display: grid; gap: 2px; font-size: var(--teks-sm); }
.sdv-promo .isi-sisa span { color: var(--warna-teks-lembut); font-size: var(--teks-xs); }
.sdv-promo__ikon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--warna-aksen); }

/* ---------------------------------------------------------- PIC divisi --- */
.pdv { padding-bottom: 88px; }
.pdv-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jarak-2); }
@media (max-width: 760px) { .pdv-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pdv-kpi__item { display: grid; gap: 2px; text-align: left; padding: var(--jarak-3); border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); border-top: 3px solid var(--warna-garis-kuat); }
.pdv-kpi__item:hover { border-color: var(--warna-garis-kuat); }
.pdv-kpi__item--peringatan { border-top-color: var(--warna-peringatan); }
.pdv-kpi__item--peringatan .pdv-kpi__angka { color: var(--warna-teks-peringatan); }
.pdv-kpi__item--aksen { border-top-color: var(--warna-aksen); }
.pdv-kpi__item--sukses { border-top-color: var(--warna-sukses); }
.pdv-kpi__angka { font-size: var(--teks-2xl); font-weight: var(--tebal-berat); line-height: 1.1; color: var(--warna-teks); }
.pdv-kpi__label { font-size: var(--teks-sm); font-weight: var(--tebal-sedang); color: var(--warna-teks); }
.pdv-kpi__sub { font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.pdv-grup { border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); overflow: hidden; }
.pdv-grup--tiba { border-color: var(--warna-aksen); }
.pdv-grup__kepala { display: flex; align-items: center; gap: var(--jarak-3); padding: var(--jarak-3); background: var(--warna-permukaan-2); border-bottom: 1px solid var(--warna-garis); cursor: pointer; }
.pdv-grup__kepala input, .pdv-baris__centang input { width: 18px; height: 18px; padding: 0; flex: none; }
.pdv-grup__kepala--tanggal .isi-sisa { display: grid; }
.pdv-tgl { flex: none; width: 46px; display: grid; justify-items: center; padding: 4px 0; border-radius: var(--radius-2); background: var(--warna-primer); color: #fff; }
.pdv-tgl__hari { font-size: var(--teks-lg); font-weight: var(--tebal-berat); line-height: 1; }
.pdv-tgl__bln { font-size: 10px; font-weight: var(--tebal-tebal); text-transform: uppercase; }
.pdv-daftar { list-style: none; margin: 0; padding: 0; }
.pdv-daftar > li + li { border-top: 1px solid var(--warna-garis); }
.pdv-baris {
  display: grid; align-items: center; column-gap: var(--jarak-3); row-gap: 4px; padding: var(--jarak-3);
  grid-template-columns: 20px minmax(0, 1.2fr) auto minmax(0, 1.4fr) auto;
  grid-template-areas: "centang siswa kk ik waktu" ". catatan catatan catatan catatan";
}
label.pdv-baris { cursor: pointer; }
label.pdv-baris:hover { background: var(--warna-permukaan-2); }
.pdv-baris--dipilih, .pdv-baris--dipilih:hover { background: var(--warna-primer-lembut); }
.pdv-baris__centang { grid-area: centang; display: inline-flex; }
.pdv-baris__siswa { grid-area: siswa; display: grid; min-width: 0; font-size: var(--teks-sm); }
.pdv-baris__kk { grid-area: kk; font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut); }
.pdv-baris__ik { grid-area: ik; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pdv-baris__waktu { grid-area: waktu; display: grid; justify-items: end; text-align: right; }
.pdv-baris__catatan { grid-area: catatan; font-style: italic; }
div.pdv-baris { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; grid-template-areas: "siswa ik waktu"; }
@media (max-width: 640px) {
  .pdv-baris { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "centang siswa waktu" ". kk kk" ". ik ik" ". catatan catatan"; }
  div.pdv-baris { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "siswa waktu" "ik ik"; }
}
.pdv-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-penuh); font-size: 11px; font-weight: var(--tebal-tebal); background: var(--warna-permukaan-2); border: 1px solid var(--warna-garis); color: var(--warna-teks-lembut); white-space: nowrap; }
.pdv-chip--sukses { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); border-color: transparent; }
.pdv-chip--bahaya { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); border-color: transparent; }
.pdv-bilah {
  position: fixed; left: var(--jarak-3); right: var(--jarak-3); z-index: 40; bottom: calc(var(--tinggi-bottomnav) + var(--aman-bawah) + var(--jarak-2));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-2); padding: var(--jarak-2) var(--jarak-3);
  border-radius: var(--radius-3); background: var(--warna-permukaan-tinggi); border: 1px solid var(--warna-primer); box-shadow: var(--bayang-3); animation: sdv-naik .2s var(--kurva) both;
}
@media (min-width: 768px) { .pdv-bilah { left: auto; right: var(--jarak-6); bottom: var(--jarak-6); width: min(640px, 70vw); } }
.pdv-jadwal input[type="date"], .pdv-jadwal input[type="time"] { margin-top: var(--jarak-2); }
.pdv-jadwal .filter-baris { margin-top: 4px; }
.pdv-jadwal__ringkas { padding: var(--jarak-3); border-radius: var(--radius-2); background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: var(--teks-sm); font-weight: var(--tebal-sedang); margin: 0; }
.pdv-nilai__alat { position: sticky; top: 0; z-index: 2; padding: var(--jarak-2) 0; background: var(--warna-permukaan-tinggi); flex-wrap: wrap; gap: var(--jarak-2); }
.pdv-nilai { display: grid; gap: var(--jarak-2); padding: var(--jarak-3); border-radius: var(--radius-3); border: 1.5px solid var(--warna-garis); background: var(--warna-permukaan); }
.pdv-nilai--lengkap { border-color: var(--warna-sukses); }
.pdv-nilai__ik { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jarak-2); }
.pdv-nilai__baris { display: grid; gap: 6px; }
.pdv-nilai__teks { display: flex; gap: var(--jarak-2); align-items: baseline; }
.pdv-segmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: var(--radius-2); background: var(--warna-permukaan-2); }
.pdv-segmen__item { padding: 9px 4px; border-radius: 8px; font-size: var(--teks-sm); font-weight: var(--tebal-sedang); color: var(--warna-teks-lembut); min-height: 40px; }
.pdv-segmen__item[aria-checked="true"].pdv-segmen__item--sukses { background: var(--warna-sukses); color: #fff; }
.pdv-segmen__item[aria-checked="true"].pdv-segmen__item--bahaya { background: var(--warna-bahaya); color: #fff; }
.pdv-segmen__item[aria-checked="true"].pdv-segmen__item--netral { background: var(--abu-600); color: #fff; }
.pdv-nilai__catatan summary { cursor: pointer; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.pdv-nilai__catatan textarea { margin-top: 6px; }

/* ===================================================================
   v2.26.0 — kecepatan & Pusat Sistem
   =================================================================== */

/* --- garis "menyelaraskan": data yang tampil sedang diperiksa ulang --- */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: calc(var(--z-toast) + 1);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--warna-sukses), var(--warna-aksen), transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 240ms ease;
}
body.sedang-selaras::after {
  opacity: .9;
  animation: selaras-lari 1.2s linear infinite;
}
@keyframes selaras-lari {
  from { background-position: -50% 0; }
  to   { background-position: 150% 0; }
}

/* --- pil "data terbaru tersedia" --- */
.pil-segar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tinggi-bottomnav) + var(--aman-bawah) + 14px);
  z-index: var(--z-toast);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 0; border-radius: var(--radius-penuh);
  background: var(--warna-primer); color: #fff;
  font: inherit; font-size: var(--teks-sm); font-weight: var(--tebal-sedang);
  box-shadow: var(--bayang-3);
  transform: translate(-50%, 140%); opacity: 0;
  transition: transform 260ms var(--kurva), opacity 200ms ease;
  cursor: pointer;
}
.pil-segar svg { width: 16px; height: 16px; }
.pil-segar--tampil { transform: translate(-50%, 0); opacity: 1; }
@media (min-width: 900px) { .pil-segar { bottom: 24px; } }

/* --- pita lingkungan --- */
.pita-lingkungan {
  position: fixed;
  /* Menggantung di tepi bawah app bar: tidak menutupi judul di layar sempit. */
  top: calc(var(--aman-atas) + var(--tinggi-appbar) - 11px);
  left: 50%;
  transform: translateX(-50%);
  /* Di atas app bar, di bawah laci & modal: tidak pernah menutupi judulnya. */
  z-index: calc(var(--z-sheet) - 1);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px 3px 9px;
  border: 1px solid color-mix(in srgb, var(--amber-700) 40%, transparent);
  border-radius: var(--radius-penuh);
  background: repeating-linear-gradient(-45deg, var(--amber-200) 0 8px, var(--emas-200) 8px 16px);
  color: var(--amber-700);
  font: inherit; font-size: 11px; font-weight: var(--tebal-berat); letter-spacing: .06em;
  box-shadow: 0 4px 14px rgba(146, 64, 14, .25);
  cursor: pointer;
}
.pita-lingkungan--kustom { background: var(--navy-100); color: var(--navy-700); border-color: var(--navy-300); }
:root[data-staging] #appbar { box-shadow: inset 0 -3px 0 var(--amber-500); }

/* --- Pusat Sistem --- */
.sys { --sys-garis: color-mix(in srgb, var(--warna-primer) 22%, var(--warna-garis)); }
.sys-nada--primer { --n: var(--warna-primer); --n-l: var(--warna-primer-lembut); }
.sys-nada--aksen { --n: var(--warna-aksen); --n-l: var(--warna-aksen-lembut); }
.sys-nada--sukses { --n: var(--warna-sukses); --n-l: var(--warna-sukses-lembut); }
.sys-nada--peringatan { --n: var(--warna-peringatan); --n-l: var(--warna-peringatan-lembut); }
.sys-nada--bahaya { --n: var(--warna-bahaya); --n-l: var(--warna-bahaya-lembut); }
.sys-nada--netral { --n: var(--abu-600); --n-l: var(--warna-sorot); }

.sys-hero {
  position: relative; overflow: hidden;
  margin-bottom: var(--jarak-4);
  padding: var(--jarak-5) var(--jarak-4) var(--jarak-4);
  border-radius: var(--radius-4);
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201, 162, 39, .28), transparent 55%),
    linear-gradient(150deg, var(--navy-900), var(--navy-700) 60%, var(--navy-600));
  box-shadow: var(--bayang-2);
  isolation: isolate;
}
.sys-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  animation: sys-kisi 18s linear infinite;
}
@keyframes sys-kisi { to { background-position: 22px 22px, 22px 22px; } }
.sys-hero--staging {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .18), transparent 55%),
    linear-gradient(150deg, #5a2a06, var(--amber-700) 55%, var(--amber-500));
}
.sys-hero__atas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sys-lingkungan {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-penuh);
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25);
  font-size: 11px; font-weight: var(--tebal-berat); letter-spacing: .06em;
}
.sys-denyut {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--teks-xs); color: rgba(255, 255, 255, .85);
}
.sys-denyut__titik { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); animation: sys-denyut 1.8s ease-out infinite; }
@keyframes sys-denyut { 70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.sys-hero__judul { margin: var(--jarak-3) 0 2px; font-size: var(--teks-lg); font-weight: var(--tebal-berat); line-height: 1.2; overflow-wrap: anywhere; }
.sys-hero__meta { margin: 0; font-size: var(--teks-xs); color: rgba(255, 255, 255, .72); }
.sys-hero__kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--jarak-4); }
@media (min-width: 640px) { .sys-hero__kisi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sys-hero__kotak {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 10px 12px; border-radius: var(--radius-3); text-align: left;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08);
  color: inherit; font: inherit; cursor: pointer;
  transition: transform var(--transisi-cepat), background var(--transisi-cepat);
}
.sys-hero__kotak:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.sys-hero__kotak--sukses { box-shadow: inset 3px 0 0 #4ade80; }
.sys-hero__kotak--peringatan { box-shadow: inset 3px 0 0 var(--emas-400); }
.sys-hero__kotak--bahaya { box-shadow: inset 3px 0 0 #f87171; }
.sys-hero__angka { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1.1; }
.sys-hero__label { font-size: var(--teks-xs); font-weight: var(--tebal-sedang); }
.sys-hero__sub { font-size: 11px; color: rgba(255, 255, 255, .7); }

.sys-panel { display: flex; flex-direction: column; gap: var(--jarak-4); margin-top: var(--jarak-3); }
.sys-panel__pengantar { margin: 0; font-size: var(--teks-sm); color: var(--warna-teks-lembut); line-height: var(--tinggi-baris); }
.sys-subjudul { margin: var(--jarak-2) 0 0; font-size: var(--teks-xs); font-weight: var(--tebal-tebal); letter-spacing: .05em; text-transform: uppercase; color: var(--warna-teks-lembut); }
.sys-catatan { margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); line-height: var(--tinggi-baris); }

/* peta sistem */
.sys-peta { display: flex; flex-direction: column; align-items: center; gap: 0; padding: var(--jarak-4) 0 var(--jarak-2); }
.sys-peta__baris { display: flex; align-items: center; justify-content: center; width: 100%; }
.sys-peta__tiga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.sys-simpul {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: min(100%, 320px);
  padding: 12px 14px; border-radius: var(--radius-3);
  border: 1px solid var(--sys-garis); background: var(--warna-permukaan);
  color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--bayang-1);
  transition: transform var(--transisi-cepat), box-shadow var(--transisi-cepat), border-color var(--transisi-cepat);
}
.sys-simpul:hover { transform: translateY(-2px); box-shadow: var(--bayang-2); border-color: var(--warna-primer); }
.sys-simpul__ikon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.sys-simpul__teks { display: flex; flex-direction: column; min-width: 0; }
.sys-simpul__judul { font-weight: var(--tebal-tebal); font-size: var(--teks-sm); }
.sys-simpul__sub { font-size: 11px; color: var(--warna-teks-lembut); line-height: 1.3; }
.sys-simpul__status { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--warna-sukses); box-shadow: 0 0 0 3px var(--warna-sukses-lembut); }
.sys-simpul--peringatan { border-color: color-mix(in srgb, var(--warna-peringatan) 55%, transparent); }
.sys-simpul--peringatan .sys-simpul__status { background: var(--warna-peringatan); box-shadow: 0 0 0 3px var(--warna-peringatan-lembut); animation: sys-kedip 1.4s ease-in-out infinite; }
@keyframes sys-kedip { 50% { opacity: .35; } }
.sys-simpul--cache .sys-simpul__ikon { background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }
.sys-simpul--sheet .sys-simpul__ikon { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.sys-simpul--pwa { background: linear-gradient(135deg, var(--warna-primer-lembut), var(--warna-permukaan)); }
.sys-peta__tiga .sys-simpul { flex-direction: column; align-items: center; text-align: center; padding: 12px 6px; gap: 6px; width: 100%; }
.sys-peta__tiga .sys-simpul__teks { align-items: center; }
.sys-peta__baris .sys-simpul { width: auto; flex: 1 1 0; max-width: 240px; }

/* kabel: titik-titik data yang mengalir */
.sys-kabel { position: relative; display: block; width: 2px; height: 30px; background: var(--sys-garis); overflow: hidden; }
.sys-kabel i { position: absolute; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--warna-aksen); top: -6px; animation: sys-alir 1.6s linear infinite; }
.sys-kabel i:nth-child(2) { animation-delay: .53s; }
.sys-kabel i:nth-child(3) { animation-delay: 1.06s; }
@keyframes sys-alir { to { top: 100%; } }
.sys-kabel--datar { width: 28px; height: 2px; flex: none; }
.sys-kabel--datar i { top: -2px; left: -6px; animation-name: sys-alir-datar; }
@keyframes sys-alir-datar { to { left: 100%; } }
.sys-kabel--cabang { width: 67%; height: 30px; background: none; overflow: visible; }
.sys-kabel--cabang::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--sys-garis); }
.sys-kabel--cabang::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(var(--sys-garis), var(--sys-garis)) left 0 top 50% / 2px 50% no-repeat,
  linear-gradient(var(--sys-garis), var(--sys-garis)) 50% 0 / 2px 100% no-repeat,
  linear-gradient(var(--sys-garis), var(--sys-garis)) right 0 top 50% / 2px 50% no-repeat; }
.sys-kabel--cabang i { left: calc(50% - 2px); z-index: 1; }
.sys-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--warna-teks-lembut); }
.sys-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.sys-legenda__titik { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--n, var(--warna-sukses)); }
.sys-legenda__titik--peringatan { background: var(--warna-peringatan); }

/* rincian di laci */
.sys-daftar { display: flex; flex-direction: column; gap: 10px; }
.sys-fakta { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--warna-garis); font-size: var(--teks-sm); }
.sys-fakta span { color: var(--warna-teks-lembut); }
.sys-fakta strong { text-align: right; overflow-wrap: anywhere; }
.sys-cek { display: flex; align-items: flex-start; gap: 8px; font-size: var(--teks-sm); color: var(--warna-teks-peringatan); }
.sys-cek svg { flex: none; margin-top: 2px; }
.sys-cek--ok { color: var(--warna-teks); }
.sys-cek--ok svg { color: var(--warna-sukses); }
.sys-baris-tombol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* tautan */
.sys-grup { display: flex; flex-direction: column; gap: 8px; padding: var(--jarak-4); border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); }
.sys-grup__judul { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); }
.sys-grup__isi { display: flex; flex-direction: column; gap: 6px; }
.sys-tautan { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-2); background: var(--warna-latar); }
.sys-tautan--kosong { opacity: .72; }
.sys-tautan__ikon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--n-l); color: var(--n); }
.sys-tautan__isi { flex: 1 1 auto; min-width: 0; }
.sys-tautan__label { margin: 0; font-size: var(--teks-sm); font-weight: var(--tebal-sedang); }
.sys-tautan__nilai { margin: 0; font-size: 11px; color: var(--warna-teks-lembut); font-family: var(--font-angka); }
.sys-tautan__bantu { margin: 2px 0 0; font-size: 11px; color: var(--warna-teks-samar); }
.sys-tautan__aksi { flex: none; display: flex; gap: 2px; }
.sys-tikon { width: 34px; height: 34px; }
.sys-prop { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--warna-garis); font-size: var(--teks-xs); }
.sys-prop code { font-size: 11px; }
.sys-prop__nilai { max-width: 60%; color: var(--warna-teks-lembut); font-family: var(--font-angka); }
.sys-prop__rahasia { display: inline-flex; align-items: center; gap: 4px; color: var(--warna-teks-samar); }

/* data */
.sys-data-atas { display: flex; gap: var(--jarak-4); align-items: center; }
.sys-data-atas__teks { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sys-data-atas__judul { margin: 0; font-weight: var(--tebal-tebal); }
.sys-cincin {
  --p: 0; flex: none;
  display: grid; place-items: center; align-content: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--warna-permukaan) 76%, transparent 77%), conic-gradient(var(--warna-sukses) calc(var(--p) * 1%), var(--warna-sorot) 0);
}
.sys-cincin--bahaya { background: radial-gradient(closest-side, var(--warna-permukaan) 76%, transparent 77%), conic-gradient(var(--warna-bahaya) calc(var(--p) * 1%), var(--warna-sorot) 0); }
.sys-cincin span { font-size: var(--teks-lg); font-weight: var(--tebal-berat); line-height: 1; }
.sys-cincin small { font-size: 10px; color: var(--warna-teks-lembut); }
.sys-kel--master { --k: var(--navy-500); }
.sys-kel--transaksi { --k: var(--emas-500); }
.sys-kel--capaian { --k: var(--hijau-500); }
.sys-kel--sistem { --k: var(--abu-500, #7a8899); }
.sys-legenda__titik.sys-kel--master, .sys-legenda__titik.sys-kel--transaksi, .sys-legenda__titik.sys-kel--capaian, .sys-legenda__titik.sys-kel--sistem { background: var(--k); }
.sys-petak { display: flex; flex-wrap: wrap; gap: 4px; }
.sys-petak__item {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
  min-height: 58px; padding: 6px 8px; border: 0; border-radius: 8px;
  background: color-mix(in srgb, var(--k) 16%, var(--warna-permukaan));
  box-shadow: inset 0 -3px 0 var(--k);
  color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer; min-width: 0;
  transition: transform var(--transisi-cepat), background var(--transisi-cepat);
}
.sys-petak__item:hover { transform: scale(1.03); background: color-mix(in srgb, var(--k) 28%, var(--warna-permukaan)); }
.sys-petak__nama { font-size: 10px; color: var(--warna-teks-lembut); max-width: 100%; }
.sys-petak__angka { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); }
.sys-sheet-daftar { display: flex; flex-direction: column; }
.sys-sheet { display: grid; grid-template-columns: 10px minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--warna-garis); background: none; color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer; }
.sys-sheet:hover { background: var(--warna-sorot); }
.sys-sheet__titik { width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.sys-sheet__nama { font-size: var(--teks-sm); }
.sys-sheet__bilah { height: 6px; border-radius: 6px; background: var(--warna-sorot); overflow: hidden; }
.sys-sheet__bilah i { display: block; height: 100%; border-radius: inherit; background: var(--warna-primer); }
.sys-sheet__angka { font-size: var(--teks-xs); color: var(--warna-teks-lembut); min-width: 52px; text-align: right; }

/* profil guru ganda (v2.52.0) */
.mdata-ganda { display: flex; flex-direction: column; gap: 8px; margin: 0 0 var(--jarak-3); padding: 14px 16px; border-radius: var(--radius-3); border: 1px solid var(--warna-peringatan); background: var(--warna-peringatan-lembut); }
.mdata-ganda__kepala { display: flex; align-items: center; gap: 8px; color: var(--warna-teks-peringatan); }
.mdata-ganda__teks { margin: 0; font-size: var(--teks-sm); color: var(--warna-teks); line-height: var(--tinggi-baris); }
.mdata-ganda__daftar { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mdata-ganda__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius-2); background: var(--warna-permukaan); }
.mdata-ganda__orang { display: flex; flex-direction: column; min-width: 0; }
.mdata-ganda__nama { font-weight: var(--tebal-tebal); overflow-wrap: anywhere; }
.mdata-ganda__sub { font-size: var(--teks-xs); color: var(--warna-teks-lembut); overflow-wrap: anywhere; }
.mdata-ganda__pilihan { display: flex; flex-direction: column; gap: 8px; }
.mdata-ganda__pilih { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); cursor: pointer; }
.mdata-ganda__pilih:has(.mdata-ganda__radio:checked) { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
.mdata-ganda__radio { margin-top: 3px; flex: none; }
.mdata-ganda__pilih-isi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mdata-ganda__pilih-kepala { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* staging satu tombol (v2.51.0) */
.sys-segar__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); overflow-wrap: anywhere; }
.sys-segar__status--jalan .lencana { animation: sys-arsip-denyut 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sys-segar__status--jalan .lencana { animation: none; } }

/* arsip (v2.50.0) */
.sys-arsip-daftar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 720px) { .sys-arsip-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sys-arsip-ta { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-latar, var(--warna-permukaan)); box-shadow: inset 4px 0 0 var(--abu-400, #9aa7b6); animation: sys-arsip-muncul .24s ease both; }
.sys-arsip-ta--primer { box-shadow: inset 4px 0 0 var(--warna-primer); }
.sys-arsip-ta--sukses { box-shadow: inset 4px 0 0 var(--warna-sukses); }
.sys-arsip-ta--peringatan { box-shadow: inset 4px 0 0 var(--warna-peringatan); }
.sys-arsip-ta--bahaya { box-shadow: inset 4px 0 0 var(--warna-bahaya); }
.sys-arsip-ta--jalan .lencana { animation: sys-arsip-denyut 1.4s ease-in-out infinite; }
.sys-arsip-ta__kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sys-arsip-ta__label { font-weight: var(--tebal-tebal); font-size: var(--teks-sm); }
.sys-arsip-ta__rinci { margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); overflow-wrap: anywhere; }
.sys-arsip-ta__pesan { margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-peringatan); overflow-wrap: anywhere; }
.sys-arsip-ta__aksi { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 2px; }
.sys-arsip-daftar--diam .sys-arsip-ta { animation: none; }
@keyframes sys-arsip-muncul { from { opacity: 0; transform: translateY(4px); } }
@keyframes sys-arsip-denyut { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sys-arsip-ta, .sys-arsip-ta--jalan .lencana { animation: none; } }

/* drive */
.sys-drive { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 720px) { .sys-drive { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sys-drive__kartu { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: inset 4px 0 0 var(--abu-400, #9aa7b6); }
.sys-drive__kartu--sukses { box-shadow: inset 4px 0 0 var(--warna-sukses); }
.sys-drive__kartu--bahaya { box-shadow: inset 4px 0 0 var(--warna-bahaya); }
.sys-drive__kepala { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sys-drive__ikon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.sys-drive__judul { margin: 0; font-weight: var(--tebal-tebal); font-size: var(--teks-sm); }
.sys-drive__nama { margin: 0; font-size: 11px; color: var(--warna-teks-lembut); }
.sys-drive__peran { margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.sys-drive__kaki { display: flex; justify-content: space-between; align-items: center; }
.sys-drive__waktu { font-size: 11px; color: var(--warna-teks-samar); }
.sys-lini { list-style: none; margin: 0; padding: 0 0 0 6px; }
.sys-lini__item { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 8px 18px; border-left: 2px solid var(--warna-garis); font-size: var(--teks-sm); }
.sys-lini__titik { position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--warna-garis-kuat); }
.sys-lini__item--baru .sys-lini__titik { background: var(--warna-sukses); box-shadow: 0 0 0 4px var(--warna-sukses-lembut); }
.sys-lini__nama { color: var(--warna-teks-primer); overflow-wrap: anywhere; }
.sys-lini__waktu { flex: none; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }

/* performa */
.sys-grafik { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 10px; border-radius: var(--radius-3); background: var(--warna-permukaan); border: 1px solid var(--warna-garis); }
.sys-grafik__batang { position: relative; flex: 1 1 0; min-width: 3px; border-radius: 4px 4px 1px 1px; background: var(--n); opacity: .85; transform-origin: bottom; animation: sys-tumbuh 420ms var(--kurva) both; }
.sys-grafik__batang:hover { opacity: 1; }
@keyframes sys-tumbuh { from { transform: scaleY(0); } }
.sys-grafik__hit { position: absolute; top: -7px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--warna-aksen); }
.sys-grafik__hit--legenda { background: var(--warna-aksen); }
.sys-ringkas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .sys-ringkas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sys-ringkas__kotak { display: flex; flex-direction: column; gap: 1px; padding: 12px; border-radius: var(--radius-3); background: var(--warna-permukaan); border: 1px solid var(--warna-garis); }
.sys-ringkas__kotak--sukses { border-top: 3px solid var(--warna-sukses); }
.sys-ringkas__kotak--primer { border-top: 3px solid var(--warna-primer); }
.sys-ringkas__kotak--aksen { border-top: 3px solid var(--warna-aksen); }
.sys-ringkas__angka { font-size: var(--teks-xl); font-weight: var(--tebal-berat); }
.sys-ringkas__label { font-size: var(--teks-xs); font-weight: var(--tebal-sedang); }
.sys-ringkas__sub { font-size: 11px; color: var(--warna-teks-lembut); }
.sys-terjun { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.sys-terjun__baris { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 64px; gap: 8px; align-items: center; font-size: var(--teks-xs); }
.sys-terjun__teks { color: var(--warna-teks-lembut); }
.sys-terjun__jalur { height: 10px; border-radius: 6px; background: var(--warna-sorot); overflow: hidden; }
.sys-terjun__jalur i { display: block; height: 100%; border-radius: inherit; background: var(--n); animation: sys-lebar 600ms var(--kurva) both; transform-origin: left; }
@keyframes sys-lebar { from { transform: scaleX(0); } }
.sys-terjun__ms { text-align: right; font-weight: var(--tebal-tebal); }
.sys-langkah { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--teks-sm); line-height: var(--tinggi-baris); }

/* staging */
.sys-lajur-wadah { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 720px) { .sys-lajur-wadah { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sys-lajur { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-3); border: 1px dashed var(--warna-garis-kuat); background: var(--warna-permukaan); }
.sys-lajur--primer { --l: var(--warna-primer); --l-l: var(--warna-primer-lembut); }
.sys-lajur--peringatan { --l: var(--warna-peringatan); --l-l: var(--warna-peringatan-lembut); }
.sys-lajur--aktif { border-style: solid; border-color: var(--l); box-shadow: 0 0 0 3px var(--l-l); }
.sys-lajur__kepala { display: flex; align-items: center; gap: 8px; color: var(--l); }
.sys-lajur__kepala strong { color: var(--warna-teks); font-size: var(--teks-sm); }
.sys-lajur__kepala .lencana { margin-left: auto; }
.sys-lajur__rantai { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sys-lajur__mata { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-penuh); background: var(--l-l); color: var(--warna-teks); font-size: 11px; font-weight: var(--tebal-sedang); }
.sys-lajur__mata--kosong { background: none; border: 1px dashed var(--warna-garis-kuat); color: var(--warna-teks-samar); }
.sys-lajur__panah { color: var(--warna-teks-samar); display: inline-flex; }
.sys-lajur__teks { margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.sys-tahap-kepala { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sys-tahap-kepala__kanan { display: inline-flex; align-items: center; gap: 8px; }
.sys-progres { --p: 0; display: block; width: 90px; height: 6px; border-radius: 6px; background: var(--warna-sorot); overflow: hidden; }
.sys-progres i { display: block; height: 100%; width: calc(var(--p) * 1%); background: var(--warna-sukses); transition: width 300ms var(--kurva); }
.sys-progres__teks { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.sys-tahap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sys-tahap__item { border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); }
.sys-tahap__item summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.sys-tahap__item summary::-webkit-details-marker { display: none; }
.sys-tahap__no { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: var(--teks-xs); font-weight: var(--tebal-berat); }
.sys-tahap__judul { flex: 1 1 auto; font-size: var(--teks-sm); font-weight: var(--tebal-sedang); }
.sys-tahap__cek { width: 20px; height: 20px; accent-color: var(--warna-sukses); }
.sys-tahap__item--selesai .sys-tahap__no { background: var(--warna-sukses); color: #fff; }
.sys-tahap__item--selesai .sys-tahap__judul { color: var(--warna-teks-lembut); text-decoration: line-through; text-decoration-color: var(--warna-garis-kuat); }
.sys-tahap__isi { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px 50px; font-size: var(--teks-sm); color: var(--warna-teks-lembut); line-height: var(--tinggi-baris); }
.sys-tahap__isi p { margin: 0; }
.sys-kode { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: var(--radius-2); background: var(--navy-900); color: #e6eef8; }
.sys-kode code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 12px; background: none; color: inherit; }
.sys-kode .sys-tikon { color: #e6eef8; }
@media (max-width: 420px) {
  .sys-tahap__isi { padding-left: 14px; }
  .sys-terjun__baris { grid-template-columns: minmax(0, 1fr) 60px; }
  .sys-terjun__jalur { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .sys-kabel i, .sys-hero::before, .sys-denyut__titik, body.sedang-selaras::after { animation: none; }
}

/* ===================================================================
   v2.27.0 — Pengajar & Penguji
   =================================================================== */

/* --- cincin progres ringan (ringkas-kelas.js) --- */
.rk-cincin {
  --p: 0; --rk: var(--warna-primer);
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--warna-permukaan) 74%, transparent 75%),
    conic-gradient(var(--rk) calc(var(--p) * 1%), var(--warna-sorot) 0);
  font-size: 12px; font-weight: var(--tebal-berat); color: var(--warna-teks);
  transition: --p 600ms;
}
.rk-cincin--baik { --rk: var(--warna-sukses); }
.rk-cincin--rendah { --rk: var(--warna-peringatan); }
.rk-cincin--muat { background: radial-gradient(closest-side, var(--warna-permukaan) 74%, transparent 75%), var(--warna-sorot); animation: sys-kedip 1.2s ease-in-out infinite; }

/* --- beranda guru --- */
.gb-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--jarak-5) var(--jarak-4) var(--jarak-4);
  border-radius: var(--radius-4); color: #fff;
  background: radial-gradient(110% 80% at 100% 0%, rgba(30, 125, 90, .45), transparent 60%),
    linear-gradient(145deg, var(--navy-900), var(--navy-700) 65%, var(--navy-600));
  box-shadow: var(--bayang-2);
}
.gb-hero::after {
  content: ''; position: absolute; right: -40px; bottom: -60px; z-index: -1;
  width: 200px; height: 200px; border-radius: 50%;
  border: 28px solid rgba(255, 255, 255, .06);
}
.gb-hero__salam { margin: 0; font-size: var(--teks-sm); color: rgba(255, 255, 255, .75); }
.gb-hero__nama { margin: 2px 0 4px; font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1.15; }
.gb-hero__meta { margin: 0; font-size: var(--teks-xs); color: rgba(255, 255, 255, .7); }
.gb-hero__stats { display: flex; gap: var(--jarak-5); margin-top: var(--jarak-4); }
.gb-hero__stat { display: flex; flex-direction: column; }
.gb-hero__angka { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1.1; }
.gb-hero__label { font-size: 11px; color: rgba(255, 255, 255, .72); }
.gb-hero__aksi { margin-top: var(--jarak-4); }
.gb-lanjut {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px; border-radius: var(--radius-3); border: 0;
  background: rgba(255, 255, 255, .12); color: #fff; font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  transition: background var(--transisi-cepat), transform var(--transisi-cepat);
}
.gb-lanjut:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.gb-lanjut__ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--emas-500); color: var(--navy-900); flex: none; }
.gb-lanjut__teks { display: flex; flex-direction: column; min-width: 0; }
.gb-lanjut__label { font-weight: var(--tebal-tebal); font-size: var(--teks-sm); }
.gb-lanjut__isi { font-size: 11px; color: rgba(255, 255, 255, .75); }
.gb-judul { margin: var(--jarak-2) 0 var(--jarak-3); font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut); text-transform: uppercase; letter-spacing: .05em; }
.gb-kisi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 720px) { .gb-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .gb-kisi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gb-kelas { display: flex; flex-direction: column; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: var(--bayang-1); overflow: hidden; transition: box-shadow var(--transisi-cepat), border-color var(--transisi-cepat); }
.gb-kelas:hover { box-shadow: var(--bayang-2); border-color: var(--warna-primer-garis); }
.gb-kelas__kepala { display: flex; align-items: center; gap: 12px; padding: 14px; border: 0; background: none; color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer; min-height: 76px; }
.gb-kelas__kepala > svg { color: var(--warna-teks-samar); flex: none; }
.gb-kelas__ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); flex: none; }
.gb-kelas__teks { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.gb-kelas__nama { font-weight: var(--tebal-tebal); }
.gb-kelas__meta { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.gb-kelas__info { font-size: var(--teks-xs); color: var(--warna-teks-lembut); margin-top: 2px; }
.gb-kelas__info--aksen { color: var(--warna-teks-aksen); font-weight: var(--tebal-sedang); }
.gb-kelas__mapel { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.gb-mapel {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 6px 12px; border-radius: var(--radius-penuh); border: 1px solid var(--warna-primer-garis);
  background: var(--warna-primer-lembut); color: var(--warna-teks-primer);
  font: inherit; font-size: var(--teks-xs); font-weight: var(--tebal-tebal); cursor: pointer;
}
.gb-mapel:hover { background: var(--warna-primer); color: #fff; }
.gb-fokus { padding: 12px 14px; border-radius: var(--radius-3); background: var(--warna-peringatan-lembut); border: 1px solid color-mix(in srgb, var(--warna-peringatan) 30%, transparent); }
.gb-fokus__kepala { display: flex; align-items: center; gap: 6px; font-size: var(--teks-xs); font-weight: var(--tebal-tebal); color: var(--warna-teks-peringatan); margin-bottom: 8px; }
.gb-fokus__daftar { display: flex; flex-direction: column; gap: 4px; }
.gb-fokus__item { display: grid; grid-template-columns: minmax(0, 1fr) 90px 42px; align-items: center; gap: 10px; padding: 8px 6px; border: 0; border-radius: var(--radius-2); background: none; color: var(--warna-teks); font: inherit; font-size: var(--teks-sm); text-align: left; cursor: pointer; }
.gb-fokus__item:hover { background: rgba(255, 255, 255, .5); }
.gb-fokus__nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-fokus__bar { height: 6px; border-radius: 6px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.gb-fokus__bar i { display: block; height: 100%; background: var(--warna-peringatan); border-radius: inherit; }
.gb-fokus__angka { text-align: right; font-weight: var(--tebal-tebal); }

/* --- input capaian --- */
.pgj { --pgj-sel: var(--warna-sukses); }
.pgj-langkah { display: flex; flex-direction: column; gap: 6px; }
.pgj-langkah__label { margin: 6px 0 0; font-size: 12px; font-weight: var(--tebal-tebal); letter-spacing: .06em; text-transform: uppercase; color: var(--warna-teks-lembut); }
.pgj-langkah__kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--jarak-2); min-height: 24px; }
.pgj-langkah__kepala .pgj-langkah__label { margin: 0; }
.pgj-semua {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: var(--radius-penuh);
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks-primer);
  font: inherit; font-size: var(--teks-xs); font-weight: var(--tebal-tebal); cursor: pointer;
}
.pgj-semua:hover { border-color: var(--warna-primer); }
@media (max-width: 767.98px), (pointer: coarse) { .pgj-semua { min-height: 44px; } }
.pgj-pasangan { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.pgj-cip {
  flex: none; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  min-height: 48px; padding: 6px 14px; border-radius: var(--radius-3);
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks);
  font: inherit; cursor: pointer; transition: all var(--transisi-cepat);
}
.pgj-cip__kelas { font-weight: var(--tebal-tebal); font-size: var(--teks-sm); white-space: nowrap; }
.pgj-cip__unit { font-size: 12px; color: var(--warna-teks-lembut); }
.pgj-cip--aktif { background: var(--warna-primer); border-color: var(--warna-primer); color: #fff; box-shadow: var(--bayang-primer); }
.pgj-cip--aktif .pgj-cip__unit { color: rgba(255, 255, 255, .8); }
.pgj-kk {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: var(--radius-3); border: 1px solid var(--warna-garis);
  background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer;
}
.pgj-kk:hover { border-color: var(--warna-primer); }
.pgj-kk--kosong { cursor: default; font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.pgj-kk__kode { flex: none; padding: 6px 8px; border-radius: 10px; background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); font-size: 12px; font-weight: var(--tebal-berat); font-family: var(--font-angka); }
.pgj-kk__teks { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pgj-kk__judul { font-size: var(--teks-sm); font-weight: var(--tebal-sedang); line-height: 1.3; }
.pgj-kk__meta { font-size: 12px; color: var(--warna-teks-lembut); }
.pgj-kk__ganti { color: var(--warna-teks-lembut); flex: none; }
/* Lembar Pilih kompetensi (v2.40.2). */
.pgj-kkpilih { display: grid; gap: var(--jarak-4); }
.pgj-kkpilih__alat { display: grid; gap: var(--jarak-3); }
.pgj-kksaring { justify-self: start; }
.pgj-kkdaftar { display: grid; gap: var(--jarak-4); }
.pgj-kkdaftar__kosong { margin: 0; padding: var(--jarak-4) 0; font-size: var(--teks-sm); color: var(--warna-teks-lembut); text-align: center; }
.pgj-kkgrup { display: grid; gap: var(--jarak-2); }
.pgj-kkgrup__judul { margin: 0; font-size: var(--teks-xs); font-weight: var(--tebal-berat); letter-spacing: .06em; text-transform: uppercase; color: var(--warna-teks-lembut); }
.pgj-kkgrup__isi { display: grid; gap: var(--jarak-2); }
.pgj-kkitem {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px;
  border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan);
  color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--transisi-cepat), background var(--transisi-cepat);
}
.pgj-kkitem:hover { border-color: var(--warna-primer-garis); background: var(--warna-permukaan-2); }
.pgj-kkitem--aktif, .pgj-kkitem--aktif:hover { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
.pgj-kkitem .pgj-kk__judul { line-height: 1.35; }
.pgj-kkitem__tanda { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--warna-garis-kuat); color: #fff; }
.pgj-kkitem--aktif .pgj-kkitem__tanda { background: var(--warna-primer); border-color: var(--warna-primer); }
.pgj-cari {
  width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-penuh);
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; font-size: var(--teks-sm);
}
.pgj-cari:focus { outline: 2px solid var(--warna-fokus); outline-offset: 1px; }
.pgj-mode { margin-top: 8px; }
.pgj-mode .segmen { width: 100%; }
.pgj-isi { margin-top: var(--jarak-4); }

.pgj-ik {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: var(--radius-4);
  background: linear-gradient(160deg, var(--warna-primer-lembut), var(--warna-permukaan) 70%);
  border: 1px solid var(--warna-primer-garis);
}
.pgj-ik__atas { display: flex; align-items: center; gap: 8px; }
.pgj-ik__atas .tombol-ikon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--warna-permukaan); box-shadow: var(--bayang-1); }
.pgj-ik__posisi { display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; min-width: 0; text-align: center; }
.pgj-ik__nomor { font-weight: var(--tebal-berat); font-size: var(--teks-md); max-width: 100%; }
.pgj-ik__dari { font-size: 12px; color: var(--warna-teks-lembut); }
.pgj-ik__deskripsi { margin: 0; font-size: var(--teks-sm); line-height: var(--tinggi-baris); }
.pgj-ik__progres { display: flex; align-items: center; gap: 10px; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.pgj-ik__bar { flex: 1 1 auto; height: 8px; border-radius: 8px; background: var(--warna-sorot); overflow: hidden; }
.pgj-ik__bar i { display: block; height: 100%; border-radius: inherit; background: var(--warna-sukses); transition: width 300ms var(--kurva); }
.pgj-pita { display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.pgj-pita::-webkit-scrollbar { display: none; }
.pgj-pita__titik {
  --p: 0; flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(closest-side, var(--warna-permukaan) 70%, transparent 72%), conic-gradient(var(--warna-sukses) calc(var(--p) * 1%), var(--warna-sorot) 0);
  color: var(--warna-teks); font: inherit; font-size: 12px; font-weight: var(--tebal-tebal);
}
.pgj-pita__titik--aktif { box-shadow: 0 0 0 2px var(--warna-primer); }

.pgj-alat { display: flex; flex-direction: column; gap: 8px; }
.pgj-alat__baris { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pgj-alat__baris .pgj-cari, .pgj-alat__baris .bidang { flex: 1 1 200px; margin: 0; }
.pgj-saring { display: inline-flex; padding: 3px; border-radius: var(--radius-penuh); background: var(--warna-sorot); gap: 2px; max-width: 100%; overflow-x: auto; }
.pgj-saring__item { flex: none; min-height: 34px; padding: 6px 12px; border: 0; border-radius: var(--radius-penuh); background: none; color: var(--warna-teks-lembut); font: inherit; font-size: var(--teks-xs); font-weight: var(--tebal-sedang); cursor: pointer; white-space: nowrap; }
.pgj-saring__item[aria-pressed="true"] { background: var(--warna-permukaan); color: var(--warna-teks); box-shadow: var(--bayang-1); }

.pgj-ubin-kisi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 560px) { .pgj-ubin-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pgj-ubin-kisi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pgj-ubin-daftar { display: flex; flex-direction: column; gap: 8px; }
.pgj-ubin {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 10px 12px; border-radius: var(--radius-3);
  border: 1.5px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color 150ms, background 150ms, transform 120ms;
  -webkit-tap-highlight-color: transparent;
}
.pgj-ubin:active:not(:disabled) { transform: scale(.98); }
.pgj-ubin--lebar { align-items: flex-start; }
.pgj-ubin__lencana { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--warna-sorot); font-size: 12px; font-weight: var(--tebal-berat); color: var(--warna-teks-lembut); }
.pgj-ubin__teks { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pgj-ubin__judul { font-size: var(--teks-sm); font-weight: var(--tebal-sedang); line-height: 1.35; }
.pgj-ubin__sub { font-size: 12px; color: var(--warna-teks-lembut); }
.pgj-ubin__tanda { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--warna-garis-kuat); color: transparent; transition: all 150ms; }
.pgj-ubin--nyala { border-color: var(--pgj-sel); background: var(--warna-sukses-lembut); }
.pgj-ubin--nyala .pgj-ubin__tanda { background: var(--pgj-sel); border-color: var(--pgj-sel); color: #fff; animation: pgj-pop 220ms var(--kurva); }
.pgj-ubin--nyala .pgj-ubin__lencana { background: var(--pgj-sel); color: #fff; }
.pgj-ubin--tertunda::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--warna-aksen); box-shadow: 0 0 0 2px var(--warna-permukaan); }
.pgj-ubin--kunci { cursor: not-allowed; opacity: .7; background: var(--warna-latar); }
.pgj-ubin--kunci .pgj-ubin__tanda { color: var(--warna-teks-samar); border-style: dashed; }
@keyframes pgj-pop { 0% { transform: scale(.6); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.pgj-siswa__identitas { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; justify-content: center; }
.pgj-siswa__identitas .pgj-ik__posisi { align-items: flex-start; text-align: left; flex: 0 1 auto; }
.pgj-siswa__cincin { --p: 0; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 12px; font-weight: var(--tebal-berat);
  background: radial-gradient(closest-side, var(--warna-permukaan) 72%, transparent 74%), conic-gradient(var(--warna-sukses) calc(var(--p) * 1%), var(--warna-sorot) 0); }
.pgj-catatan { margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.pgj-catatan--kunci { color: var(--warna-teks-peringatan); }

.pgj-mx { overflow: auto; max-height: 70vh; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); }
.pgj-mx table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.pgj-mx th, .pgj-mx td { padding: 3px; border-bottom: 1px solid var(--warna-garis); text-align: center; }
.pgj-mx thead th { position: sticky; top: 0; z-index: 2; background: var(--warna-permukaan); }
.pgj-mx tbody th { position: sticky; left: 0; z-index: 1; background: var(--warna-permukaan); text-align: left; }
.pgj-mx .pgj-mx__sudut { position: sticky; left: 0; top: 0; z-index: 3; text-align: left; padding: 8px; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.pgj-mx__kol { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--warna-garis); background: var(--warna-latar); color: var(--warna-teks); font: inherit; font-size: 12px; font-weight: var(--tebal-tebal); cursor: pointer; }
.pgj-mx__kol:hover { border-color: var(--warna-primer); color: var(--warna-teks-primer); }
.pgj-mx__nama { display: flex; align-items: center; gap: 8px; width: min(46vw, 220px); padding: 6px 8px; border: 0; background: none; color: var(--warna-teks); font: inherit; font-size: var(--teks-sm); text-align: left; cursor: pointer; }
.pgj-mx__nama:hover { color: var(--warna-teks-primer); }
.pgj-mx__absen { flex: none; width: 22px; color: var(--warna-teks-samar); font-size: 12px; }
.pgj-mx__sel { width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--warna-garis); background: var(--warna-latar); cursor: pointer; transition: all 120ms; }
.pgj-mx__sel--nyala { background: var(--pgj-sel); border-color: var(--pgj-sel); box-shadow: inset 0 0 0 3px var(--warna-permukaan); }
.pgj-mx__sel--tertunda { outline: 2px solid var(--warna-aksen); outline-offset: 1px; }
.pgj-mx__sel:disabled { cursor: not-allowed; opacity: .5; }
.pgj-mx__persen { font-size: var(--teks-xs); color: var(--warna-teks-lembut); min-width: 44px; }
.pgj-mx__kunci th { opacity: .7; }

.pgj-bilah { flex-direction: column; align-items: stretch; z-index: 6; }
.pgj-bilah__ringkas { display: flex; gap: 6px; flex-wrap: wrap; }
.pgj-bilah__tombol { display: flex; gap: 8px; }
.pgj-bilah__tombol .tombol--sekunder { flex: 0 0 auto; }

/* --- rekap kelas --- */
.rk-hero { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--radius-4); background: var(--warna-permukaan); border: 1px solid var(--warna-garis); box-shadow: var(--bayang-1); }
.rk-hero__atas { display: flex; align-items: center; gap: 14px; }
.rk-hero__atas .rk-cincin { width: 72px; height: 72px; font-size: var(--teks-md); }
.rk-hero__nama { margin: 0; font-size: var(--teks-lg); font-weight: var(--tebal-berat); }
.rk-hero__cakupan { margin: 2px 0 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.rk-hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rk-stat { display: flex; flex-direction: column; padding: 8px; border-radius: var(--radius-2); background: var(--warna-latar); }
.rk-stat__angka { font-size: var(--teks-lg); font-weight: var(--tebal-berat); line-height: 1.1; }
.rk-stat__label { font-size: 10px; color: var(--warna-teks-lembut); line-height: 1.2; }
.rk-stat--aksen { background: var(--warna-aksen-lembut); }
.rk-stat--aksen .rk-stat__angka { color: var(--warna-teks-aksen); }
.rk-stat--sukses { background: var(--warna-sukses-lembut); }
.rk-stat--sukses .rk-stat__angka { color: var(--warna-teks-sukses); }
.rk-stat--peringatan { background: var(--warna-peringatan-lembut); }
.rk-stat--peringatan .rk-stat__angka { color: var(--warna-teks-peringatan); }
.rk-hero__aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-kk { display: flex; flex-direction: column; gap: 6px; }
.rk-kk__baris { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; text-align: left; }
.rk-kk__baris--klik { cursor: pointer; transition: border-color var(--transisi-cepat), transform var(--transisi-cepat); }
.rk-kk__baris--klik:hover { border-color: var(--warna-primer); transform: translateX(2px); }
.rk-kk__baris > svg { color: var(--warna-teks-samar); }
.rk-kk__kode { padding: 4px 7px; border-radius: 8px; background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); font-size: 11px; font-weight: var(--tebal-berat); font-family: var(--font-angka); }
.rk-kk__teks { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rk-kk__judul { font-size: var(--teks-sm); }
.rk-kk__bar { height: 6px; border-radius: 6px; background: var(--warna-sorot); overflow: hidden; }
.rk-kk__bar i { display: block; height: 100%; border-radius: inherit; background: var(--warna-primer); }
.rk-kk__bar--sukses i { background: var(--warna-sukses); }
.rk-kk__bar--peringatan i { background: var(--warna-peringatan); }
.rk-kk__meta { font-size: 10px; color: var(--warna-teks-lembut); }
.rk-kk__persen { font-weight: var(--tebal-berat); font-size: var(--teks-sm); min-width: 40px; text-align: right; }
.rk-tabel-progres { display: inline-flex; align-items: center; gap: 8px; }
.rk-tabel-progres__bar { width: 56px; height: 6px; border-radius: 6px; background: var(--warna-sorot); overflow: hidden; }
.rk-tabel-progres__bar i { display: block; height: 100%; background: var(--warna-primer); border-radius: inherit; }

/* --- penguji: daftar & rincian sesi --- */
/* v2.38.0: label Penguji minimal 12px (sebelumnya 9–11px) — huruf minimum yang nyaman di ponsel. */
.pu-pita { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pu-pita__hari {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 64px; padding: 6px 0; border-radius: var(--radius-3);
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks);
  font: inherit; cursor: pointer; transition: all var(--transisi-cepat);
}
.pu-pita__hari:disabled { cursor: default; opacity: .55; background: none; }
.pu-pita__hari--ini { border-color: var(--warna-primer); }
.pu-pita__hari--pilih { background: var(--warna-primer); border-color: var(--warna-primer); color: #fff; }
.pu-pita__nama { font-size: 12px; color: inherit; opacity: .75; white-space: nowrap; }
.pu-pita__tgl { font-size: var(--teks-md); font-weight: var(--tebal-berat); }
.pu-pita__titik { display: flex; gap: 2px; min-height: 5px; }
.pu-pita__titik i { width: 5px; height: 5px; border-radius: 50%; background: var(--warna-aksen); }
.pu-pita__hari--pilih .pu-pita__titik i { background: #fff; }
.pu-bagian { display: flex; flex-direction: column; gap: 8px; }
.pu-bagian__judul { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut); text-transform: uppercase; letter-spacing: .05em; }
.pu-bagian__jumlah { padding: 1px 8px; border-radius: var(--radius-penuh); background: var(--warna-sorot); font-size: 12px; color: var(--warna-teks); text-transform: none; letter-spacing: 0; }
.pu-sesi {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px; border-radius: var(--radius-3); border: 1px solid var(--warna-garis);
  background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--bayang-1); transition: border-color var(--transisi-cepat), transform var(--transisi-cepat);
}
.pu-sesi:hover { border-color: var(--warna-primer-garis); transform: translateY(-1px); }
.pu-sesi > svg { color: var(--warna-teks-samar); flex: none; }
.pu-sesi--bahaya { border-left: 4px solid var(--warna-bahaya); }
.pu-sesi--aksen { border-left: 4px solid var(--warna-aksen); }
.pu-sesi--peringatan { border-left: 4px solid var(--warna-peringatan); }
.pu-sesi--redup { opacity: .7; }
.pu-sesi__tanggal { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; padding: 6px 0; border-radius: 12px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.pu-sesi--bahaya .pu-sesi__tanggal { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); }
.pu-sesi--aksen .pu-sesi__tanggal { background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }
.pu-sesi__hari, .pu-sesi__bln { font-size: 12px; font-weight: var(--tebal-tebal); text-transform: uppercase; }
.pu-sesi__tgl { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1.05; }
.pu-sesi__isi { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.pu-sesi__kode { font-size: 12px; color: var(--warna-teks-lembut); font-family: var(--font-angka); }
.pu-sesi__judul { font-weight: var(--tebal-tebal); font-size: var(--teks-sm); line-height: 1.3; }
.pu-sesi__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--warna-teks-lembut); }
.pu-sesi__meta span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.pu-sesi__bawah { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.pu-sesi__label { font-size: 12px; font-weight: var(--tebal-tebal); padding: 2px 8px; border-radius: var(--radius-penuh); background: var(--warna-sorot); }
.pu-sesi__label--bahaya { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); }
.pu-sesi__label--aksen { background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }
.pu-sesi__label--peringatan { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.pu-sesi__peran { font-size: 12px; color: var(--warna-teks-lembut); }
@media (min-width: 640px) { .pu-detail__fakta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pu-hasil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pu-hasil__item { padding: 10px; border-radius: var(--radius-2); background: var(--warna-sorot); font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.pu-hasil__item strong { display: block; font-size: var(--teks-lg); color: var(--warna-teks); }
.pu-hasil__item--sukses strong { color: var(--warna-teks-sukses); }
.pu-hasil__item--peringatan strong { color: var(--warna-teks-peringatan); }
.pu-ik { border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); }
.pu-ik summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: var(--tebal-sedang); font-size: var(--teks-sm); list-style: none; min-height: 48px; }
.pu-ik summary::-webkit-details-marker { display: none; }
.pu-ik summary .pu-bagian__jumlah { margin-left: auto; }
.pu-ik__daftar { margin: 0; padding: 0 14px 14px 34px; display: flex; flex-direction: column; gap: 10px; font-size: var(--teks-sm); line-height: var(--tinggi-baris); }
.pu-ik__daftar li { padding-left: 4px; }
.pu-ik__kode { display: block; font-size: 12px; color: var(--warna-teks-samar); font-family: var(--font-angka); }
.pu-catatan { margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }

/* --- penguji: penilaian --- */
.pn-kemajuan__bar { display: flex; height: 8px; border-radius: 8px; background: var(--warna-sorot); overflow: hidden; }
.pn-kemajuan__final { background: var(--warna-sukses); transition: width 300ms var(--kurva); }
.pn-kemajuan__draf { background: repeating-linear-gradient(-45deg, var(--warna-primer) 0 6px, var(--navy-400) 6px 12px); transition: width 300ms var(--kurva); }
.pn-peserta { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--radius-3); border: 1.5px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: var(--bayang-1); scroll-margin-top: 140px; transition: border-color 200ms; }
.pn-peserta--siap { border-color: var(--warna-primer); }
.pn-peserta--final { box-shadow: none; background: var(--warna-latar); }
.pn-peserta__kepala { display: flex; align-items: center; gap: 10px; }
.pn-peserta__nama { font-weight: var(--tebal-tebal); }
.pn-peserta__kelas { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.pn-peserta__final { display: flex; flex-direction: column; gap: 4px; font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.pn-peserta__final p { margin: 0; }
.pn-catatan { display: flex; flex-direction: column; gap: 6px; }
.pn-catatan__label { display: flex; justify-content: space-between; font-size: var(--teks-xs); font-weight: var(--tebal-sedang); color: var(--warna-teks-lembut); }
.pn-catatan__hitung { color: var(--warna-teks-peringatan); }
.pn-catatan__hitung--ok { color: var(--warna-teks-sukses); }
.pn-catatan__area { width: 100%; padding: 10px 12px; border-radius: var(--radius-2); border: 1px solid var(--warna-garis); background: var(--warna-latar); color: var(--warna-teks); font: inherit; font-size: var(--teks-input, 16px); resize: vertical; }
.pn-catatan__area:focus { outline: 2px solid var(--warna-fokus); outline-offset: 1px; }
.pn-cepat__daftar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.pn-cepat { flex: none; min-height: 36px; padding: 6px 12px; border-radius: var(--radius-penuh); border: 1px dashed var(--warna-garis-kuat); background: none; color: var(--warna-teks-lembut); font: inherit; font-size: var(--teks-xs); cursor: pointer; white-space: nowrap; }
.pn-cepat:hover { border-style: solid; border-color: var(--warna-primer); color: var(--warna-teks-primer); }
.pn-selesai { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; text-align: center; border-radius: var(--radius-3); background: var(--warna-sukses-lembut); }
.pn-selesai__ikon { color: var(--warna-sukses); }
.pn-selesai__judul { margin: 0; font-weight: var(--tebal-tebal); }
.pn-selesai__teks { margin: 0; font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.pn-bilah { flex-direction: column; align-items: stretch; z-index: 6; }
.pn-bilah__tombol { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-bilah__tombol .tombol { flex: 1 1 140px; min-width: 0; }
@media (max-width: 420px) { .rk-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .pgj-ubin--nyala .pgj-ubin__tanda, .rk-cincin--muat { animation: none; }
}

/* Pembungkus bilah menempel: tidak membuat kotak sendiri, sehingga bilah
   sticky di dalamnya menempel pada .halaman (v2.27.0). */
.wadah-lengket { display: contents; }

/* --- v2.27.1: bilah simpan tidak keluar layar, KC dengan banyak indikator --- */
/* .tombol--penuh bernilai width:100%; di samping "Urungkan" itu mendorong
   tombol Simpan melewati tepi kanan. Lebarnya kini dibagi oleh flex.
   Selektor dua kelas (.bilah-aksi.pgj-bilah) mengalahkan aturan desktop
   layouts.css yang membuat .bilah-aksi statis — bilah simpan input & penilaian
   harus tetap terjangkau tanpa menggulir ke dasar matriks. */
.bilah-aksi.pgj-bilah, .bilah-aksi.pn-bilah { box-sizing: border-box; max-width: none; }
.pgj-bilah__tombol, .pn-bilah__tombol { display: flex; gap: 8px; min-width: 0; }
.bilah-aksi.pgj-bilah .tombol, .bilah-aksi.pn-bilah .tombol { width: auto; min-width: 0; }
.bilah-aksi .tombol > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

@media (max-width: 767px) {
  /* Ponsel: selebar layar, tepat di atas navigasi bawah. */
  .bilah-aksi.pgj-bilah, .bilah-aksi.pn-bilah {
    flex-direction: column; align-items: stretch;
    bottom: calc(var(--tinggi-bottomnav) + var(--aman-bawah));
    margin-left: calc(var(--jarak-4) * -1); margin-right: calc(var(--jarak-4) * -1);
    padding: 10px var(--jarak-4); border-radius: 0;
  }
  .pgj-bilah__tombol, .pn-bilah__tombol { width: 100%; }
  .bilah-aksi.pgj-bilah .tombol--sekunder { flex: 0 0 auto; }
  .bilah-aksi.pgj-bilah .tombol--primer { flex: 1 1 0; }
  .bilah-aksi.pn-bilah .tombol { flex: 1 1 0; }
}

@media (min-width: 768px) {
  /* Tablet & laptop: kartu mengambang yang tetap menempel. */
  .bilah-aksi.pgj-bilah, .bilah-aksi.pn-bilah {
    position: sticky; bottom: var(--jarak-3); z-index: 6;
    flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
    margin: var(--jarak-4) 0 0; padding: 10px 12px 10px 16px;
    background: var(--warna-permukaan); border: 1px solid var(--warna-garis);
    border-radius: var(--radius-3); box-shadow: var(--bayang-3);
  }
  .pgj-bilah__tombol, .pn-bilah__tombol { flex: 0 1 auto; justify-content: flex-end; }
  .bilah-aksi.pgj-bilah .tombol, .bilah-aksi.pn-bilah .tombol { flex: 0 1 auto; min-width: 0; }
  .bilah-aksi.pgj-bilah .tombol--primer, .bilah-aksi.pn-bilah .tombol { min-width: 150px; }
  .bilah-aksi.pn-bilah > p { margin: 0; }
}

/* Pita indikator: dibungkus ke baris berikutnya, bukan digulir tersembunyi —
   10–20 indikator tetap terlihat semua. */
.pgj-pita { flex-wrap: wrap; overflow: visible; }

/* Matriks */
.pgj-legenda { border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); }
.pgj-legenda summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: var(--teks-sm); font-weight: var(--tebal-sedang); }
.pgj-legenda summary::-webkit-details-marker { display: none; }
.pgj-legenda[open] summary { border-bottom: 1px solid var(--warna-garis); }
.pgj-legenda__daftar { list-style: none; margin: 0; padding: 8px 12px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 16px; max-height: 260px; overflow: auto; font-size: var(--teks-xs); }
@media (min-width: 900px) { .pgj-legenda__daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pgj-legenda__daftar li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.pgj-legenda__no { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-weight: var(--tebal-berat); font-size: 12px; }
.pgj-mx__keterangan { display: flex; gap: 8px; align-items: baseline; margin: 0; min-height: 2.6em; padding: 8px 12px; border-radius: var(--radius-2); background: var(--warna-primer-lembut); font-size: var(--teks-xs); line-height: 1.4; }
.pgj-mx__keterangan strong { flex: none; color: var(--warna-teks-primer); }
.pgj-mx__kol--penuh { background: var(--warna-sukses); border-color: var(--warna-sukses); color: #fff; }
.pgj-mx tfoot th, .pgj-mx tfoot td { position: sticky; bottom: 0; background: var(--warna-latar); font-size: 12px; color: var(--warna-teks-lembut); border-top: 1px solid var(--warna-garis); padding: 6px 3px; }
.pgj-mx tfoot th { left: 0; z-index: 3; text-align: left; padding-left: 10px; }
.pgj-mx tbody th { box-shadow: 1px 0 0 var(--warna-garis); }
/* Banyak kolom: sel dan kolom nama dirapatkan (sel tetap ≥ 30px, di atas 24px WCAG 2.5.8). */
.pgj-mx--padat .pgj-mx__sel, .pgj-mx--padat .pgj-mx__kol { width: 30px; height: 30px; }
.pgj-mx--padat th, .pgj-mx--padat td { padding: 2px; }
@media (max-width: 767px) {
  .pgj-mx__nama { width: min(36vw, 150px); font-size: var(--teks-xs); padding: 6px 4px; }
  .pgj-mx__absen { width: 18px; }
}
.pgj-mx__geser { display: none; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--warna-teks-lembut); }
/* Bayangan tepi saat tabel dapat digeser (pola "scroll shadow"): bayangan
   di sisi yang masih menyimpan kolom tersembunyi. */
.pgj-mx {
  background:
    linear-gradient(to left, var(--warna-permukaan) 40%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 32, 52, .22), transparent) right center / 12px 100% no-repeat scroll,
    var(--warna-permukaan);
}
@media (max-width: 767px) {
  .pgj-lebar-saja { display: none; }
  .pgj-mx__geser { display: flex; }
  .bilah-aksi.pgj-bilah .tombol--besar { font-size: var(--teks-md); }
}

/* --- v2.27.2: tombol baris matriks (semua indikator seorang siswa) --- */
.pgj-mx__kepala-baris { display: flex; align-items: center; gap: 4px; }
.pgj-mx__baris {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px dashed var(--warna-garis-kuat); background: var(--warna-permukaan);
  color: var(--warna-teks-samar); cursor: pointer; padding: 0;
  transition: background 150ms, border-color 150ms, color 150ms, transform 120ms;
}
.pgj-mx__baris:hover:not(:disabled) { border-color: var(--warna-sukses); color: var(--warna-sukses); }
.pgj-mx__baris:active:not(:disabled) { transform: scale(.92); }
.pgj-mx__baris[data-keadaan="sebagian"] { border-style: solid; border-color: var(--warna-sukses); color: var(--warna-sukses); background: var(--warna-sukses-lembut); }
.pgj-mx__baris[data-keadaan="penuh"] { border-style: solid; border-color: var(--warna-sukses); background: var(--warna-sukses); color: #fff; }
.pgj-mx__baris:disabled { cursor: not-allowed; opacity: .4; }
.pgj-catatan__ikon.pgj-mx__baris { display: inline-grid; width: 18px; height: 18px; vertical-align: -4px; border-width: 1px; cursor: default; }
/* Ponsel (v2.40.2): target sentuh lebih lega tanpa melebarkan kolom matriks —
   sel tetap 34px (≥ 24px WCAG 2.5.8) agar seluruh indikator muat di layar. */
@media (max-width: 767.98px), (pointer: coarse) {
  .pgj-cari { min-height: 44px; }
  .pgj-pita__titik { width: 40px; height: 40px; }
  .pgj-mx__nama { min-height: 40px; }
  .pgj-mx__baris { width: 34px; height: 34px; }
}
@media (max-width: 767px) {
  .pgj-mx__nama { width: min(30vw, 130px); }
}

/* ===================================================================
   v2.28.0 — Master Data & Import
   =================================================================== */

/* --- master data: sorotan data baru/diubah, kolom otomatis --- */
@keyframes mdata-sorot { 0% { background: color-mix(in srgb, var(--warna-aksen) 38%, transparent); } 100% { background: transparent; } }
.mdata__baris--sorot, .mdata__baris--sorot td { animation: mdata-sorot 2.8s ease-out 1; }
.mdata__baris--sorot > td:first-child { box-shadow: inset 4px 0 0 var(--warna-aksen); }
li.mdata__baris--sorot { box-shadow: inset 4px 0 0 var(--warna-aksen); }
.mdata__form-otomatis input::placeholder { color: var(--warna-teks-aksen); font-style: italic; opacity: .9; }
.mdata__form-otomatis .bidang__label::after { content: ' ✦ otomatis'; font-size: 10px; font-weight: var(--tebal-tebal); color: var(--warna-teks-aksen); letter-spacing: .03em; }
.mdata__form-bantu { padding: 8px 10px; border-radius: var(--radius-2); background: var(--warna-sorot); }
.mdata__form-bantu .bidang__label { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.mdata__form--dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mdata__ik-pratinjau { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; }
.mdata__ik-pratinjau li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 6px 10px; border-radius: var(--radius-2); background: var(--warna-latar); font-size: var(--teks-sm); }
.mdata__ik-pratinjau .kode { color: var(--warna-teks-aksen); font-weight: var(--tebal-tebal); }

/* --- import --- */
.imp { display: flex; flex-direction: column; gap: var(--jarak-4); }
.imp-urutan { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-3); background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: var(--teks-xs); }
.imp-langkah { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-4); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: var(--bayang-1); }
.imp-langkah__kepala { display: flex; align-items: center; gap: 10px; }
.imp-langkah__no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--warna-primer); color: #fff; font-size: var(--teks-sm); font-weight: var(--tebal-berat); flex: none; }
.imp-langkah__judul { margin: 0; font-size: var(--teks-md); font-weight: var(--tebal-tebal); }
.imp-langkah--hasil { border-color: var(--warna-primer-garis); }

.imp-jenis { display: flex; flex-direction: column; gap: 12px; }
.imp-jenis__judul-grup { margin: 0 0 6px; font-size: 11px; font-weight: var(--tebal-tebal); letter-spacing: .06em; text-transform: uppercase; color: var(--warna-teks-lembut); }
.imp-jenis__kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.imp-kartu {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px;
  border-radius: var(--radius-3); border: 1.5px solid var(--warna-garis); background: var(--warna-latar);
  color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--transisi-cepat), background var(--transisi-cepat), transform var(--transisi-cepat);
}
.imp-kartu:hover { border-color: var(--warna-primer-garis); transform: translateY(-1px); }
.imp-kartu__ikon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.imp-kartu__teks { display: flex; flex-direction: column; min-width: 0; }
.imp-kartu__judul { font-weight: var(--tebal-tebal); font-size: var(--teks-sm); }
.imp-kartu__sub { font-size: 11px; color: var(--warna-teks-lembut); }
.imp-kartu--aktif { border-color: var(--warna-primer); background: var(--warna-primer-lembut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warna-primer) 18%, transparent); }
.imp-kartu--aktif .imp-kartu__ikon { background: var(--warna-primer); color: #fff; }
.imp-kartu--khusus { border-style: dashed; }

.imp-berkas-kisi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 720px) { .imp-berkas-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.imp-berkas { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 14px; border-radius: var(--radius-3); background: var(--warna-latar); border: 1px solid var(--warna-garis); }
.imp-berkas > .tombol { grid-column: 1 / -1; }
.imp-berkas__ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }
.imp-berkas__judul { margin: 0; font-weight: var(--tebal-tebal); }
.imp-berkas__isi { margin: 2px 0 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); line-height: 1.45; }
.imp-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--warna-teks-lembut); }
.imp-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.imp-legenda__warna { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.imp-legenda__warna--wajib { background: #1e3a5f; }
.imp-legenda__warna--id { background: #d6dce4; }

.imp-mode { align-self: flex-start; }
.imp-mode__ket { margin: 0; font-size: 12px; color: var(--warna-teks-lembut); }
@media (max-width: 479px) {
  .imp-mode { align-self: stretch; overflow: visible; }
  .imp-mode .pgj-saring__item { flex: 1 1 0; justify-content: center; text-align: center; }
}
.imp-zona {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  min-height: 150px; padding: 20px; border-radius: var(--radius-4); border: 2px dashed var(--warna-garis-kuat);
  background: repeating-linear-gradient(-45deg, transparent 0 12px, color-mix(in srgb, var(--warna-primer) 4%, transparent) 12px 24px);
  color: var(--warna-teks-lembut); cursor: pointer; transition: border-color var(--transisi-cepat), background var(--transisi-cepat), transform var(--transisi-cepat);
}
.imp-zona:hover, .imp-zona:focus-visible { border-color: var(--warna-primer); color: var(--warna-teks-primer); }
.imp-zona--seret { border-color: var(--warna-aksen); background: var(--warna-aksen-lembut); transform: scale(1.01); }
.imp-zona--terisi { border-style: solid; border-color: var(--warna-sukses); background: var(--warna-sukses-lembut); color: var(--warna-teks); }
.imp-zona__ikon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--warna-permukaan); box-shadow: var(--bayang-1); color: var(--warna-primer); }
.imp-zona--terisi .imp-zona__ikon { color: var(--warna-sukses); }
.imp-zona__teks { display: flex; flex-direction: column; gap: 2px; font-size: var(--teks-sm); }
.imp-zona__teks strong { color: var(--warna-teks); }
.imp-tempel summary { cursor: pointer; font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.imp-tempel textarea { width: 100%; margin-top: 8px; padding: 10px; border-radius: var(--radius-2); border: 1px solid var(--warna-garis); background: var(--warna-latar); color: var(--warna-teks); font: inherit; font-size: var(--teks-sm); }

.imp-memeriksa { display: flex; align-items: center; gap: 12px; padding: 18px; font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.imp-memeriksa__putar { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--warna-sorot); border-top-color: var(--warna-primer); animation: imp-putar .8s linear infinite; }
@keyframes imp-putar { to { transform: rotate(360deg); } }
.imp-peringatan { margin: 0; padding: 8px 12px; border-radius: var(--radius-2); background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); font-size: var(--teks-xs); }
.imp-stat-kisi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 640px) { .imp-stat-kisi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.imp-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: var(--radius-3); border: 1.5px solid var(--warna-garis); background: var(--warna-latar); color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer; }
.imp-stat:disabled { cursor: default; opacity: .55; }
.imp-stat__angka { font-size: var(--teks-xl); font-weight: var(--tebal-berat); line-height: 1.1; }
.imp-stat__label { font-size: 11px; color: var(--warna-teks-lembut); }
.imp-stat--sukses .imp-stat__angka { color: var(--warna-teks-sukses); }
.imp-stat--primer .imp-stat__angka { color: var(--warna-teks-primer); }
.imp-stat--bahaya .imp-stat__angka { color: var(--warna-teks-bahaya); }
.imp-stat--aktif { border-color: currentColor; box-shadow: 0 0 0 3px var(--warna-sorot); }
.imp-stat--aktif.imp-stat--sukses { border-color: var(--warna-sukses); }
.imp-stat--aktif.imp-stat--primer { border-color: var(--warna-primer); }
.imp-stat--aktif.imp-stat--bahaya { border-color: var(--warna-bahaya); }
.imp-tab { max-height: 460px; overflow: auto; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); }
.imp-kosong { margin: 0; padding: 18px; text-align: center; font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.imp-daftar { list-style: none; margin: 0; padding: 0; }
.imp-baris { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--warna-garis); font-size: var(--teks-sm); }
.imp-baris:last-child { border-bottom: 0; }
.imp-baris__no { font-size: 11px; color: var(--warna-teks-lembut); padding-top: 2px; }
.imp-baris__isi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.imp-baris--tolak .imp-baris__isi { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.imp-baris__label { font-weight: var(--tebal-sedang); overflow-wrap: anywhere; }
.imp-ubah { display: flex; flex-wrap: wrap; gap: 6px; }
.imp-ubah__item { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--radius-penuh); background: var(--warna-primer-lembut); font-size: 11px; max-width: 100%; }
.imp-ubah__kolom { font-weight: var(--tebal-tebal); color: var(--warna-teks-primer); }
.imp-ubah__item del { color: var(--warna-teks-bahaya); text-decoration: line-through; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.imp-ubah__item ins { color: var(--warna-teks-sukses); text-decoration: none; font-weight: var(--tebal-sedang); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.imp-baru { font-size: 11px; overflow-wrap: anywhere; }
.imp-perbaiki { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-3); background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); font-size: var(--teks-xs); }
.imp-aksi { display: flex; justify-content: flex-end; }
@media (max-width: 640px) { .imp-aksi .tombol { width: 100%; } }
.imp-selesai { align-items: center; text-align: center; padding: 28px 16px; background: linear-gradient(180deg, var(--warna-sukses-lembut), var(--warna-permukaan)); }
.imp-selesai__ikon { color: var(--warna-sukses); animation: pgj-pop 400ms var(--kurva); }
.imp-selesai__judul { margin: 0; font-size: var(--teks-lg); }
@media (prefers-reduced-motion: reduce) { .imp-memeriksa__putar, .mdata__baris--sorot, .mdata__baris--sorot td { animation: none; } }


/* ==========================================================================
   Tema Manajemen mengikuti tema Pengajar (v2.30.0)
   Hanya gaya — elemen, urutan, dan isinya tidak berubah. Dikunci ke
   .mnj-tema karena Beranda PIC (.dpic) memakai kelas dasbor-mnj yang sama.
   Bahasa visualnya diambil dari Beranda Pengajar (.gb-hero, .gb-kelas):
   kepala navy bergradien, kartu putih membulat, ikon dalam cip lembut.
   ========================================================================== */
.mnj-tema .dasbor-mnj__kepala {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--jarak-5) var(--jarak-5) var(--jarak-4);
  border-radius: var(--radius-4); color: #fff;
  background: radial-gradient(110% 80% at 100% 0%, rgba(30, 125, 90, .45), transparent 60%),
    linear-gradient(145deg, var(--navy-900), var(--navy-700) 65%, var(--navy-600));
  box-shadow: var(--bayang-2);
}
.mnj-tema .dasbor-mnj__kepala::after {
  content: ''; position: absolute; right: -40px; bottom: -60px; z-index: -1;
  width: 200px; height: 200px; border-radius: 50%;
  border: 28px solid rgba(255, 255, 255, .06);
}
.mnj-tema .dasbor-mnj__kepala .mdata__grup { color: rgba(255, 255, 255, .72); }
.mnj-tema .dasbor-mnj__judul { color: #fff; }
.mnj-tema .dasbor-mnj__kepala p,
.mnj-tema .dasbor-mnj__kepala .teks-lembut { color: rgba(255, 255, 255, .75); }
@media (max-width: 767.98px) {
  .mnj-tema .dasbor-mnj__judul { display: block; font-size: var(--teks-xl); }
  .mnj-tema .dasbor-mnj__kepala { padding: var(--jarak-5) var(--jarak-4) var(--jarak-4); }
}
/* Kontrol di atas navy: kaca tipis; pilihan aktif emas seperti tombol utama Pengajar. */
.mnj-tema .dasbor-mnj__kepala .cip {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .88);
}
.mnj-tema .dasbor-mnj__kepala .cip:hover { background: rgba(255, 255, 255, .16); }
.mnj-tema .dasbor-mnj__kepala .cip[aria-pressed="true"] {
  background: var(--emas-500); border-color: var(--emas-500); color: var(--navy-900);
}
.mnj-tema .dasbor-mnj__kepala .tombol--sekunder {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff;
}
.mnj-tema .dasbor-mnj__kepala .tombol--sekunder:hover:not(:disabled) {
  background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4);
}
.mnj-tema .dasbor-mnj__kepala select,
.mnj-tema .dasbor-mnj__kepala .pilihcari__tombol {
  background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff;
}
.mnj-tema .dasbor-mnj__kepala select option { color: var(--warna-teks); background: var(--warna-permukaan); }
.mnj-tema .dasbor-mnj__kepala .bidang__label { color: rgba(255, 255, 255, .8); }

/* Kartu & panel: putih membulat, terangkat halus saat disentuh (seperti .gb-kelas). */
.mnj-tema .dasbor-mnj__panel,
.mnj-tema .mvital__kartu,
.mnj-tema .kpi,
.mnj-tema .mnav__item {
  border-radius: var(--radius-3);
  transition: box-shadow var(--transisi-cepat), border-color var(--transisi-cepat), transform var(--transisi-cepat);
}
.mnj-tema .dasbor-mnj__panel:hover,
.mnj-tema .kpi:hover { box-shadow: var(--bayang-2); border-color: var(--warna-primer-garis); }
/* Garis atas tebal diganti rona lembut di bagian atas kartu utama. */
.mnj-tema .dasbor-mnj__panel--utama {
  border-top: 1px solid var(--warna-garis);
  background: linear-gradient(180deg, var(--warna-primer-lembut), var(--warna-permukaan) 140px);
}
.mnj-tema .mvital__kartu { border-top: 1px solid var(--warna-garis); }
.mnj-tema .mvital__kartu:hover { box-shadow: var(--bayang-2); border-color: var(--warna-primer-garis); transform: translateY(-1px); }
.mnj-tema .mvital__label { gap: 10px; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks); }
/* Ikon label di dalam cip lembut, seperti .gb-kelas__ikon. */
.mnj-tema .mvital__label > svg,
.mnj-tema .kpi__kepala > svg,
.mnj-tema .mnav__item > svg:first-child {
  flex: none; box-sizing: content-box; padding: 7px; border-radius: 11px;
  background: var(--warna-primer-lembut); color: var(--warna-teks-primer);
}
.mnj-tema .mvital__kartu--sukses .mvital__label > svg { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.mnj-tema .mvital__kartu--peringatan .mvital__label > svg { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.mnj-tema .dasbor-mnj__mini { border-radius: var(--radius-3); background: var(--warna-permukaan-2); }
.mnj-tema button.dasbor-mnj__mini:hover { border-color: var(--warna-primer-garis); box-shadow: var(--bayang-1); }
.mnj-tema .mnav__item:hover { box-shadow: var(--bayang-2); border-color: var(--warna-primer-garis); background: var(--warna-permukaan); transform: translateY(-1px); }
.mnj-tema .mnav__item > svg:first-child { padding: 9px; border-radius: 12px; }

/* Monitoring Capaian (komponen bersama PIC): hanya bila dibuka Manajemen. */
.mnj-mon .kpi { box-shadow: var(--bayang-1); padding: var(--jarak-4); gap: 6px; }
.mnj-mon .kpi__kepala { color: var(--warna-teks-lembut); }
.mnj-mon .kpi__label { font-weight: var(--tebal-sedang); }
.mnj-mon .judul-bagian__teks {
  font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut);
  text-transform: uppercase; letter-spacing: .05em;
}
.mnj-mon .kartu { border-radius: var(--radius-3); box-shadow: var(--bayang-1); }

/* Kartu angka tanpa aksi (bukan tombol) tidak menampilkan kursor tangan. */
div.dasbor-mnj__mini { cursor: default; }

/* ==========================================================================
   Panduan pelaksanaan indikator divisi (v2.31.0) — .pnd-*
   Bahasa visual Pengajar (.gb-hero, .gb-kelas): hero navy, kartu putih
   membulat, ikon dalam cip lembut. Animasi hanya transform/opacity.
   ========================================================================== */

/* --- daftar PIC --- */
.pnd-hero { display: flex; align-items: center; gap: var(--jarak-4); }
.pnd-hero__isi { flex: 1 1 auto; min-width: 0; }
.pnd-hero__cincin { position: relative; flex: none; width: 80px; height: 80px; }
.pnd-hero__persen { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.pnd-hero__persen strong { font-size: var(--teks-lg); }
.pnd-hero__persen span { font-size: 10px; color: rgba(255, 255, 255, .72); }
.pnd-hero__busur { transition: stroke-dashoffset .9s var(--kurva); }
@media (max-width: 520px) { .pnd-hero { align-items: flex-start; } .pnd-hero__cincin { width: 64px; height: 64px; } .pnd-hero__cincin svg { width: 64px; height: 64px; } }

.pnd-alat { display: flex; flex-wrap: wrap; gap: var(--jarak-2); align-items: center; }
.pnd-alat__cari { flex: 1 1 220px; min-width: 0; }

.pnd-kk { border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: var(--bayang-1); overflow: hidden; }
.pnd-kk__kepala { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--warna-garis); }
.pnd-kk__kode { margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.pnd-kk__judul { margin: 0; font-size: var(--teks-md); font-weight: var(--tebal-tebal); line-height: 1.3; }
.pnd-kk__skor { display: grid; gap: 4px; justify-items: end; font-size: var(--teks-xs); font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut); flex: none; }
.pnd-kk__bilah { width: 64px; height: 6px; border-radius: 99px; background: var(--warna-permukaan-2); overflow: hidden; }
.pnd-kk__bilah i { display: block; height: 100%; background: var(--warna-sukses); border-radius: inherit; transform-origin: left; transition: transform .6s var(--kurva); }

.pnd-ik { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
.pnd-ik__baris {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px; border: 0; border-radius: var(--radius-2); background: none; color: var(--warna-teks);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer; min-height: 52px;
  transition: background var(--transisi-cepat);
}
.pnd-ik__baris:hover { background: var(--warna-primer-lembut); }
.pnd-ik__baris:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.pnd-ik__kode { font-size: 11px; font-weight: var(--tebal-tebal); padding: 3px 7px; border-radius: 6px; background: var(--warna-permukaan-2); color: var(--warna-teks-lembut); }
.pnd-ik__teks { display: grid; gap: 2px; min-width: 0; }
.pnd-ik__desk { font-size: var(--teks-sm); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pnd-ik__meta { font-size: 11px; color: var(--warna-teks-samar); }
.pnd-ik__aksi { display: inline-flex; align-items: center; gap: 4px; font-size: var(--teks-xs); font-weight: var(--tebal-tebal); color: var(--warna-teks-primer); }
@media (max-width: 560px) {
  .pnd-ik__baris { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'kode lencana' 'teks teks'; row-gap: 6px; }
  .pnd-ik__kode { grid-area: kode; justify-self: start; }
  .pnd-ik__teks { grid-area: teks; }
  .pnd-ik__baris > .lencana { grid-area: lencana; }
}
/* CRUD per indikator (v2.31.1): tautan baris + grup aksi. */
.pnd-ik__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; border-radius: var(--radius-2); }
.pnd-ik__item:hover { background: var(--warna-primer-lembut); }
.pnd-ik__item .pnd-ik__baris:hover { background: none; }
.pnd-ik__aksi-grup { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding-right: 6px; }
.pnd-aksi {
  display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks-lembut);
  font: inherit; font-size: var(--teks-xs); font-weight: var(--tebal-tebal); cursor: pointer; white-space: nowrap;
  transition: border-color var(--transisi-cepat), color var(--transisi-cepat), background var(--transisi-cepat);
}
.pnd-aksi:hover:not(:disabled) { border-color: var(--warna-primer); color: var(--warna-teks-primer); }
.pnd-aksi:disabled { opacity: .55; cursor: progress; }
.pnd-aksi--primer { background: var(--warna-primer); border-color: var(--warna-primer); color: #fff; }
.pnd-aksi--primer:hover:not(:disabled) { color: #fff; filter: brightness(1.1); }
.pnd-aksi--sukses { color: var(--warna-teks-sukses); border-color: color-mix(in srgb, var(--warna-sukses) 40%, transparent); }
.pnd-aksi--sukses:hover:not(:disabled) { background: var(--warna-sukses-lembut); border-color: var(--warna-sukses); color: var(--warna-teks-sukses); }
.pnd-aksi--bahaya:hover:not(:disabled) { border-color: var(--warna-bahaya); color: var(--warna-teks-bahaya); background: var(--warna-bahaya-lembut); }
@media (max-width: 760px) {
  .pnd-ik__item { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; border-bottom: 1px solid var(--warna-garis); border-radius: 0; }
  .pnd-ik__item:last-child { border-bottom: 0; }
  .pnd-ik__aksi-grup { justify-content: stretch; padding: 0 10px; }
  .pnd-ik__aksi-grup .pnd-aksi { flex: 1 1 0; justify-content: center; min-height: 40px; }
}

/* --- editor --- */
.pnd-remah { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 6px; border: 0; border-radius: 10px; background: none; color: var(--warna-teks-lembut); font: inherit; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); cursor: pointer; }
.pnd-remah:hover { background: var(--warna-sorot); color: var(--warna-teks); }
.pnd-ed-hero__judul { margin: 6px 0 10px; display: grid; gap: 6px; font-size: var(--teks-lg); font-weight: var(--tebal-berat); line-height: 1.3; }
.pnd-ed-hero__kode { justify-self: start; font-size: 11px; font-weight: var(--tebal-tebal); letter-spacing: .03em; padding: 3px 8px; border-radius: 6px; background: var(--emas-500); color: var(--navy-900); }
.pnd-ed-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--teks-xs); color: rgba(255, 255, 255, .78); }
.pnd-ed-hero__meta .tombol--sekunder { margin-left: auto; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff; }
.pnd-ed-hero__meta .tombol--sekunder:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }

.pnd-pulih { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: var(--radius-3); background: var(--warna-aksen-lembut); border: 1px solid color-mix(in srgb, var(--warna-aksen) 40%, transparent); font-size: var(--teks-sm); }
.pnd-pulih > svg { color: var(--warna-teks-aksen); flex: none; }

.pnd-tab { display: none; }
@media (max-width: 1199.98px) {
  .pnd-tab { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--warna-permukaan-2); border: 1px solid var(--warna-garis); }
  .pnd-tab__item { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: 0; border-radius: 9px; background: none; color: var(--warna-teks-lembut); font: inherit; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); cursor: pointer; }
  .pnd-tab__item[aria-selected="true"] { background: var(--warna-permukaan); color: var(--warna-teks); box-shadow: var(--bayang-1); }
  .pnd-tata[data-tab="tulis"] .pnd-pratinjau { display: none; }
  .pnd-tata[data-tab="lihat"] .pnd-tulis { display: none; }
}
.pnd-tata { display: grid; gap: var(--jarak-4); align-items: start; }
@media (min-width: 1200px) {
  .pnd-tata { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
  .pnd-pratinjau { position: sticky; top: calc(var(--tinggi-appbar) + var(--aman-atas) + 12px); max-height: calc(100dvh - var(--tinggi-appbar) - 120px); overflow: auto; }
}
.pnd-tulis { display: grid; gap: var(--jarak-3); min-width: 0; }
.pnd-blok { display: grid; gap: 12px; padding: var(--jarak-4); border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: var(--bayang-1); }
.pnd-blok__kepala { display: flex; gap: 12px; align-items: flex-start; }
.pnd-blok__nomor { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-weight: var(--tebal-berat); font-size: var(--teks-sm); }
.pnd-blok__judul { margin: 0; font-size: var(--teks-md); font-weight: var(--tebal-tebal); }
.pnd-blok__sub { margin: 2px 0 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.pnd-blok .bidang { margin: 0; position: relative; }
.pnd-hitung { position: absolute; right: 2px; top: 0; font-size: 11px; color: var(--warna-teks-samar); }
.pnd-cepat { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pnd-cepat .cip { min-height: 32px; padding: 4px 12px; }
.pnd-blok input[type="text"], .pnd-blok input[type="url"], .pnd-blok textarea {
  width: 100%; box-sizing: border-box; min-height: 42px; padding: 9px 12px; border-radius: var(--radius-2);
  border: 1px solid var(--warna-garis-kuat); background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; font-size: var(--teks-input);
}
.pnd-blok textarea { resize: vertical; line-height: 1.5; }
.pnd-blok input:focus, .pnd-blok textarea:focus { outline: none; border-color: var(--warna-primer); box-shadow: 0 0 0 3px var(--warna-primer-lembut); }

.pnd-daftar { display: grid; gap: 8px; }
.pnd-daftar__ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pnd-daftar__baris { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.pnd-daftar__baris--tautan { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.pnd-daftar__titik { width: 8px; height: 8px; border-radius: 50%; background: var(--warna-garis-kuat); }
.pnd-tautan-isian { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
@media (max-width: 560px) { .pnd-tautan-isian { grid-template-columns: minmax(0, 1fr); } }
.pnd-tautan-url { position: relative; display: block; }
.pnd-tautan-url input { padding-right: 34px !important; }
.pnd-url-tanda { position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; }
.pnd-url-tanda--ok { background: var(--warna-sukses); }
.pnd-url-tanda--salah { background: var(--warna-bahaya); }
.pnd-tambah { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1.5px dashed var(--warna-garis-kuat); background: none; color: var(--warna-teks-primer); font: inherit; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); cursor: pointer; }
.pnd-tambah:hover { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
.pnd-tambah--besar { justify-self: stretch; justify-content: center; min-height: 48px; }

.pnd-langkah-ed { display: grid; gap: 10px; }
.pnd-langkah-ed__ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.pnd-langkah-ed__kartu { display: grid; gap: 8px; padding: 10px; border-radius: var(--radius-2); border: 1px solid var(--warna-garis); background: var(--warna-permukaan-2); }
.pnd-langkah-ed__kartu--baru { animation: pnd-muncul .35s var(--kurva); }
@keyframes pnd-muncul { from { opacity: 0; transform: translateY(6px); } }
.pnd-langkah-ed__kepala { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.pnd-langkah-ed__nomor { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--warna-primer); color: #fff; font-weight: var(--tebal-berat); font-size: var(--teks-sm); }
.pnd-langkah-ed__alat { display: flex; gap: 2px; }
.pnd-langkah-ed__alat .tombol-ikon { width: 34px; height: 34px; }
@media (max-width: 560px) {
  .pnd-langkah-ed__kepala { grid-template-columns: auto minmax(0, 1fr); }
  .pnd-langkah-ed__alat { grid-column: 1 / -1; justify-content: flex-end; }
}

.pnd-lampiran { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-2); border: 1px solid var(--warna-garis); background: var(--warna-permukaan-2); font-size: var(--teks-sm); }
.pnd-unggah { cursor: pointer; }
.pnd-catatan { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.pnd-catatan > svg { flex: none; margin-top: 1px; }
.pnd-bahaya { padding: 10px 14px; border-radius: var(--radius-3); border: 1px dashed color-mix(in srgb, var(--warna-bahaya) 40%, transparent); }
.pnd-bahaya summary { cursor: pointer; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks-bahaya); }
.pnd-bahaya[open] { display: grid; gap: 8px; }

.pnd-pratinjau { display: grid; gap: var(--jarak-3); min-width: 0; }
.pnd-meter { padding: 12px 14px; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: var(--bayang-1); display: grid; gap: 8px; }
.pnd-meter__kepala { display: flex; justify-content: space-between; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); }
.pnd-meter__bilah { height: 8px; border-radius: 99px; background: var(--warna-permukaan-2); overflow: hidden; }
.pnd-meter__bilah i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--emas-500), var(--warna-sukses)); transform-origin: left; transition: transform .45s var(--kurva); }
.pnd-meter__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.pnd-meter__daftar li { display: flex; gap: 6px; align-items: center; }
.pnd-meter__daftar li > svg { flex: none; color: var(--warna-teks-peringatan); }
.pnd-meter__ok { color: var(--warna-teks); }
.pnd-meter__ok > svg { color: var(--warna-sukses) !important; }
.pnd-ponsel { padding: 10px; border-radius: 28px; background: linear-gradient(145deg, var(--navy-800), var(--navy-900)); box-shadow: var(--bayang-2); }
.pnd-ponsel__layar { border-radius: 20px; background: var(--warna-latar); overflow: hidden; }
.pnd-pratinjau__isi { display: grid; gap: 0; }
@media (max-width: 1199.98px) { .pnd-ponsel { padding: 0; background: none; box-shadow: none; } .pnd-ponsel__layar { border-radius: var(--radius-3); border: 1px solid var(--warna-garis); } }

.bilah-aksi.pnd-bilah { box-sizing: border-box; max-width: none; flex-direction: column; align-items: stretch; z-index: 6; }
.pnd-bilah__info { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.pnd-bilah__info--kotor { color: var(--warna-teks-peringatan); font-weight: var(--tebal-tebal); }
.pnd-bilah__tombol { display: flex; gap: 8px; min-width: 0; }
.bilah-aksi.pnd-bilah .tombol { width: auto; min-width: 0; flex: 1 1 0; }
@media (max-width: 767px) {
  .bilah-aksi.pnd-bilah { bottom: calc(var(--tinggi-bottomnav) + var(--aman-bawah)); margin-left: calc(var(--jarak-4) * -1); margin-right: calc(var(--jarak-4) * -1); padding: 10px var(--jarak-4); border-radius: 0; }
}
@media (min-width: 768px) {
  .bilah-aksi.pnd-bilah {
    position: sticky; bottom: var(--jarak-3); flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
    margin: var(--jarak-4) 0 0; padding: 10px 12px 10px 16px; background: var(--warna-permukaan);
    border: 1px solid var(--warna-garis); border-radius: var(--radius-3); box-shadow: var(--bayang-3);
  }
  .pnd-bilah__tombol { flex: 0 1 auto; }
  .bilah-aksi.pnd-bilah .tombol { flex: 0 1 auto; min-width: 150px; }
}

/* --- tampilan panduan (pratinjau PIC & lembar siswa) --- */
.pnd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; overflow-wrap: anywhere; }
/* v2.32.1: item grid default-nya min-width:auto → teks nowrap (.potong) di tautan
   panjang memaksa kolom melebar melewati layar HP. Kunci semua kolom ke lebar wadah. */
.pnd-bagian, .pnd-sumber, .pnd-siap, .pnd-centang, .pnd-kotak { grid-template-columns: minmax(0, 1fr); }
.pnd > *, .pnd-bagian > *, .pnd-sumber > *, .pnd-kotak > *, .pnd-tujuan > *, .pnd-siap__item > *, .pnd-centang li > * { min-width: 0; }
.pnd--kosong { place-items: center; text-align: center; padding: 40px 20px; color: var(--warna-teks-lembut); font-size: var(--teks-sm); }
.pnd-kosong__ikon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.pnd-paragraf { margin: 0 0 6px; line-height: 1.6; overflow-wrap: anywhere; }
.pnd-paragraf:last-child { margin-bottom: 0; }
.pnd-label { margin: 0 0 2px; font-size: 11px; font-weight: var(--tebal-berat); letter-spacing: .06em; text-transform: uppercase; color: var(--warna-teks-primer); }
.pnd-cip { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 9px; border-radius: 99px; font-size: var(--teks-xs); font-weight: var(--tebal-tebal); background: var(--warna-permukaan); border: 1px solid var(--warna-garis); color: var(--warna-teks-lembut); }
.pnd-cip--kaca { margin: 0; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff; }
.pnd-cip--baru { margin: 0; background: var(--emas-500); border-color: var(--emas-500); color: var(--navy-900); }

.pnd-kepala { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; overflow-wrap: anywhere; padding: 18px 16px 16px; color: #fff;
  background: radial-gradient(110% 80% at 100% 0%, rgba(30, 125, 90, .45), transparent 60%), linear-gradient(145deg, var(--navy-900), var(--navy-700) 65%, var(--navy-600)); }
.pnd-kepala::after { content: ''; position: absolute; right: -40px; bottom: -70px; z-index: -1; width: 170px; height: 170px; border-radius: 50%; border: 24px solid rgba(255, 255, 255, .06); }
.pnd-kepala--mini { padding: 14px; }
.pnd-kepala__jejak { margin: 0; font-size: var(--teks-xs); color: rgba(255, 255, 255, .72); }
.pnd-kepala__kode { justify-self: start; font-size: 11px; font-weight: var(--tebal-tebal); padding: 2px 8px; border-radius: 6px; background: var(--emas-500); color: var(--navy-900); }
.pnd-kepala__judul { margin: 0; font-size: var(--teks-lg); font-weight: var(--tebal-berat); line-height: 1.3; }
.pnd-kepala__cip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.pnd-tujuan { display: flex; gap: 12px; padding: 14px; border-radius: var(--radius-3); background: var(--warna-primer-lembut); border: 1px solid var(--warna-primer-garis); }
.pnd-tujuan__ikon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--warna-primer); color: #fff; }
.pnd-tujuan__teks { font-size: var(--teks-md); color: var(--warna-teks); }

.pnd-bagian { display: grid; gap: 10px; }
.pnd-judul-baris { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pnd-judul { display: flex; align-items: center; gap: 10px; }
.pnd-judul__ikon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.pnd-judul__teks { margin: 0; font-size: var(--teks-md); font-weight: var(--tebal-berat); }
.pnd-judul__sub { display: block; font-size: 11px; color: var(--warna-teks-samar); }

.pnd-siap { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pnd-siap__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-2); background: var(--warna-permukaan); border: 1px solid var(--warna-garis); font-size: var(--teks-sm); }
.pnd-siap__item--cek { padding: 0; }
.pnd-siap__item--cek label { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; min-height: 44px; }
.pnd-siap__item--cek input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pnd-siap__kotak { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--warna-garis-kuat); color: transparent; transition: background var(--transisi-cepat), border-color var(--transisi-cepat); }
.pnd-siap__item--cek input:checked + .pnd-siap__kotak { background: var(--warna-sukses); border-color: var(--warna-sukses); color: #fff; }
.pnd-siap__item--cek input:checked ~ span:last-child { color: var(--warna-teks-lembut); text-decoration: line-through; }
.pnd-siap__item--cek input:focus-visible + .pnd-siap__kotak { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }

.pnd-kemajuan__wadah { display: grid; gap: 4px; justify-items: end; font-size: 11px; font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut); }
.pnd-kemajuan__bilah { width: 90px; height: 6px; border-radius: 99px; background: var(--warna-permukaan-2); overflow: hidden; }
.pnd-kemajuan__bilah i { display: block; height: 100%; background: var(--warna-sukses); border-radius: inherit; transform-origin: left; transition: transform .4s var(--kurva); }

.pnd-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pnd-langkah__item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; animation: pnd-muncul .4s var(--kurva) both; animation-delay: calc(var(--i, 0) * 40ms); }
.pnd-langkah__item::before { content: ''; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; background: var(--warna-garis); }
.pnd-langkah__item:last-child { padding-bottom: 0; }
.pnd-langkah__item:last-child::before { display: none; }
.pnd-langkah__nomor { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 2px solid var(--warna-primer); background: var(--warna-permukaan); color: var(--warna-teks-primer); font: inherit; font-weight: var(--tebal-berat); }
button.pnd-langkah__nomor { cursor: pointer; transition: background var(--transisi-cepat), border-color var(--transisi-cepat), transform var(--transisi-cepat); }
button.pnd-langkah__nomor:active { transform: scale(.92); }
.pnd-langkah__cek { display: none; }
.pnd-langkah__item--selesai .pnd-langkah__nomor { background: var(--warna-sukses); border-color: var(--warna-sukses); color: #fff; }
.pnd-langkah__item--selesai .pnd-langkah__angka { display: none; }
.pnd-langkah__item--selesai .pnd-langkah__cek { display: grid; }
.pnd-langkah__item--selesai::before { background: var(--warna-sukses); }
.pnd-langkah__isi { min-width: 0; padding: 8px 12px 10px; border-radius: var(--radius-2); background: var(--warna-permukaan); border: 1px solid var(--warna-garis); font-size: var(--teks-sm); }
.pnd-langkah__judul { margin: 0 0 4px; font-size: var(--teks-sm); font-weight: var(--tebal-berat); }
.pnd-langkah__item--selesai .pnd-langkah__isi { opacity: .72; }

.pnd-kotak { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius-3); font-size: var(--teks-sm); }
.pnd-kotak--nilai { background: var(--warna-sukses-lembut); border: 1px solid color-mix(in srgb, var(--warna-sukses) 30%, transparent); }
.pnd-kotak--nilai .pnd-judul__ikon { background: var(--warna-sukses); color: #fff; }
.pnd-kotak--tips { background: var(--warna-peringatan-lembut); border: 1px solid color-mix(in srgb, var(--warna-peringatan) 30%, transparent); }
.pnd-kotak--tips .pnd-judul__ikon { background: var(--warna-peringatan); color: #fff; }
.pnd-centang { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pnd-centang li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.pnd-centang li > svg { flex: none; margin-top: 3px; color: var(--warna-teks-sukses); }

.pnd-sumber { display: grid; gap: 8px; }
.pnd-sumber__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-2); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks); text-decoration: none; font: inherit; text-align: left; cursor: pointer; min-height: 52px; transition: border-color var(--transisi-cepat), box-shadow var(--transisi-cepat); }
.pnd-sumber__item:hover { border-color: var(--warna-primer-garis); box-shadow: var(--bayang-1); }
.pnd-sumber__item:disabled { cursor: default; opacity: .7; }
.pnd-sumber__item > svg:last-child { color: var(--warna-teks-samar); flex: none; }
.pnd-sumber__ikon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.pnd-sumber__item--pdf .pnd-sumber__ikon { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); }
.pnd-sumber__nama { display: block; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); }
.pnd-sumber__url { display: block; font-size: 11px; color: var(--warna-teks-samar); }
.pnd-jejak { margin: 0; padding: 0 14px 14px; font-size: 11px; color: var(--warna-teks-samar); }

/* Lembar siswa: kepala bergradien menempel ke tepi lembar. */
.pnd-lembar { margin: calc(var(--jarak-4) * -1) calc(var(--jarak-4) * -1) 0; }
.pnd-lembar > .pnd { padding: 14px var(--jarak-4); }
.pnd-lembar__kaki { display: flex; gap: 8px; width: 100%; }
.pnd-lembar__kaki .tombol { flex: 1 1 0; }

/* --- halaman Divisi siswa: tombol panduan per indikator --- */
.sdv-ik__li--panduan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: stretch; }
.sdv-ik__panduan {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 64px; padding: 6px 8px; border-radius: var(--radius-2); border: 1.5px solid var(--warna-primer-garis);
  background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font: inherit; font-size: 11px; font-weight: var(--tebal-tebal); cursor: pointer;
  transition: background var(--transisi-cepat), transform var(--transisi-cepat);
}
.sdv-ik__panduan:hover { background: var(--warna-primer); color: #fff; }
.sdv-ik__panduan:active { transform: scale(.96); }
.sdv-ik__panduan--baru::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--emas-500); box-shadow: 0 0 0 2px var(--warna-permukaan); }
.sdv-panduan-info { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-2); background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: var(--teks-xs); font-weight: var(--tebal-sedang); }
.sdv-panduan-info > svg { flex: none; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
  .pnd-langkah__item, .pnd-langkah-ed__kartu--baru { animation: none; }
  .pnd-hero__busur, .pnd-meter__bilah i, .pnd-kemajuan__bilah i, .pnd-kk__bilah i { transition: none; }
}

/* ==========================================================================
   Pita pembaruan aplikasi (v2.31.2) — core/pembaruan.js
   Di atas (bawah app bar), bukan di bawah: tidak bertabrakan dengan bilah
   simpan/ajukan & navigasi bawah. Menetap sampai diketuk.
   ========================================================================== */
.pita-pembaruan {
  position: fixed; left: 50%; top: calc(var(--tinggi-appbar) + var(--aman-atas) + 8px); z-index: 65;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px);
  padding: 6px 6px 6px 14px; border-radius: var(--radius-penuh);
  background: var(--navy-800); color: #fff; box-shadow: var(--bayang-3);
  transform: translateX(-50%); animation: pita-pembaruan-masuk .35s var(--kurva);
}
.pita-pembaruan__ikon { display: inline-flex; color: var(--emas-400); flex: none; }
.pita-pembaruan__teks { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pita-pembaruan__tombol {
  flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-penuh);
  background: var(--emas-500); color: var(--navy-900); font: inherit; font-size: var(--teks-sm); font-weight: var(--tebal-berat); cursor: pointer;
}
.pita-pembaruan__tombol:hover { filter: brightness(1.06); }
.pita-pembaruan__tombol:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pita-pembaruan--sibuk { padding-right: 14px; }
.pita-pembaruan--sibuk .pita-pembaruan__ikon { animation: pita-pembaruan-putar 1s linear infinite; }
@keyframes pita-pembaruan-masuk { from { opacity: 0; transform: translate(-50%, -8px); } }
@keyframes pita-pembaruan-putar { to { transform: rotate(360deg); } }
body.tanpa-appbar .pita-pembaruan { top: calc(var(--aman-atas) + 12px); }
@media (prefers-reduced-motion: reduce) { .pita-pembaruan, .pita-pembaruan--sibuk .pita-pembaruan__ikon { animation: none; } }
@media print { .pita-pembaruan { display: none !important; } }

/* ==========================================================================
   Tema halaman siswa (v2.32.0) — .siswa-tema & .sh-*
   Bahasa visual Pengajar (.gb-hero/.gb-kelas). Skala tipografi:
     hero 22/26px · judul kartu 15px · isi 14px · keterangan 12px (minimum)
     judul bagian 12px kapital, spasi .06em
   Skala jarak (kelipatan 4px): antarbagian 20px (24px lebar) · padding
   kartu 16px · isi kartu 8–12px. Target sentuh ≥ 44px.
   Animasi hanya transform/opacity; mati pada prefers-reduced-motion.
   ========================================================================== */
.siswa-tema { gap: 20px; }
@media (min-width: 768px) { .siswa-tema { gap: 24px; } }
.siswa-tema > * { min-width: 0; animation: sh-naik .42s var(--kurva) both; }
.siswa-tema > :nth-child(2) { animation-delay: 50ms; }
.siswa-tema > :nth-child(3) { animation-delay: 100ms; }
.siswa-tema > :nth-child(4) { animation-delay: 150ms; }
.siswa-tema > :nth-child(5) { animation-delay: 200ms; }
.siswa-tema > :nth-child(n+6) { animation-delay: 250ms; }
@keyframes sh-naik { from { opacity: 0; transform: translateY(10px); } }

/* kartu & teks */
.siswa-tema .kartu { border-radius: var(--radius-3); padding: 16px; box-shadow: var(--bayang-1); }
.siswa-tema .kartu--klik { transition: box-shadow var(--transisi-cepat), border-color var(--transisi-cepat), transform var(--transisi-cepat); }
.siswa-tema .kartu--klik:hover { box-shadow: var(--bayang-2); border-color: var(--warna-primer-garis); }
.siswa-tema .kartu--klik:active { transform: scale(.985); }
.siswa-tema .kartu__judul { font-size: 15px; font-weight: var(--tebal-tebal); line-height: 1.35; }
.siswa-tema .daftar { gap: 12px; }
.siswa-tema .judul-bagian__teks {
  font-size: 12px; font-weight: var(--tebal-berat); letter-spacing: .06em; text-transform: uppercase; color: var(--warna-teks-lembut);
}
.siswa-tema .progres { height: 8px; border-radius: 99px; }
.siswa-tema .progres__isi { border-radius: inherit; }
.siswa-tema .lencana { white-space: nowrap; }
.siswa-tema .bidang__label { margin-bottom: 6px; }
/* Formulir di dalam kartu (mis. Kompetensi Khusus): ritme 16px antarisian. */
.siswa-tema .kartu:has(> .bidang) > * + * { margin-top: 16px; }
.siswa-tema .kartu:has(> .bidang) > .teks-sedang { font-size: 15px; font-weight: var(--tebal-tebal); }
.siswa-tema .kartu:has(> .bidang) > .teks-sedang + * { margin-top: 6px; }
.siswa-tema input[type="file"] {
  width: 100%; max-width: 100%; box-sizing: border-box; padding: 6px; border-radius: var(--radius-2);
  border: 1.5px dashed var(--warna-garis-kuat); background: var(--warna-permukaan-2); color: var(--warna-teks-lembut);
  font: inherit; font-size: 13px;
}
.siswa-tema input[type="file"]::file-selector-button {
  margin-right: 10px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px;
  background: var(--warna-primer); color: #fff; font: inherit; font-size: 13px; font-weight: var(--tebal-tebal); cursor: pointer;
}

/* hero */
.sh-hero { display: flex; align-items: center; gap: 16px; padding: 20px 16px; }
@media (min-width: 768px) { .sh-hero { padding: 24px; gap: 24px; } }
.sh-hero__isi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sh-hero__alis { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: var(--tebal-tebal); letter-spacing: .04em; color: var(--emas-400); }
.sh-hero__judul { margin: 0; font-size: 22px; font-weight: var(--tebal-berat); line-height: 1.2; letter-spacing: -.01em; color: #fff; overflow-wrap: anywhere; }
@media (min-width: 768px) { .sh-hero__judul { font-size: 26px; } }
.sh-hero__sub { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.sh-hero__stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 8px 0 0; }
.sh-hero__stat-item { display: flex; flex-direction: column-reverse; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14); min-width: 0; }
.sh-hero__stat-item dt { font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, .74); }
.sh-hero__stat-item dd { margin: 0; font-size: 20px; font-weight: var(--tebal-berat); line-height: 1.1; color: #fff; }
.sh-hero__stat-item--sukses dd { color: #8be3bd; }
.sh-hero__stat-item--aksen dd { color: var(--emas-400); }
.sh-hero__aksi { margin-top: 6px; }
.sh-cincin { position: relative; flex: none; width: 96px; height: 96px; }
.sh-cincin__svg { width: 100%; height: 100%; }
.sh-cincin__jalur { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 9; }
.sh-cincin__busur { fill: none; stroke: var(--emas-500); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1s var(--kurva); }
.sh-cincin__isi { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.sh-cincin__angka { font-size: 20px; color: #fff; }
.sh-cincin__label { font-size: 11px; color: rgba(255, 255, 255, .72); }
/* Ponsel: cincin di pojok kanan atas, statistik tetap selebar hero. */
@media (max-width: 559.98px) {
  .sh-hero { position: relative; display: block; }
  .sh-cincin { position: absolute; top: 16px; right: 16px; width: 76px; height: 76px; }
  .sh-cincin__angka { font-size: 17px; }
  .sh-cincin__label { font-size: 10px; }
  .sh-hero:has(.sh-cincin) .sh-hero__alis,
  .sh-hero:has(.sh-cincin) .sh-hero__judul,
  .sh-hero:has(.sh-cincin) .sh-hero__sub { padding-right: 88px; }
  .sh-hero:has(.sh-cincin) .sh-hero__isi { min-height: 76px; }
}

/* jalan pintas */
.sh-pintas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) {
  .sh-pintas { display: flex; flex-wrap: wrap; }
  .sh-pintas__ubin { flex: 1 1 150px; }
}
.sh-pintas__ubin {
  position: relative; display: grid; align-content: start; gap: 2px; min-height: 96px; padding: 14px; text-align: left;
  border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks);
  box-shadow: var(--bayang-1); font: inherit; cursor: pointer;
  transition: box-shadow var(--transisi-cepat), border-color var(--transisi-cepat), transform var(--transisi-cepat);
}
.sh-pintas__ubin:hover { box-shadow: var(--bayang-2); border-color: var(--warna-primer-garis); }
.sh-pintas__ubin:active { transform: scale(.97); }
.sh-pintas__ubin:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.sh-pintas__ikon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 11px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.sh-pintas__ubin--aksen .sh-pintas__ikon { background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }
.sh-pintas__ubin--sukses .sh-pintas__ikon { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.sh-pintas__judul { font-size: 14px; font-weight: var(--tebal-tebal); line-height: 1.3; }
.sh-pintas__sub { font-size: 12px; line-height: 1.35; color: var(--warna-teks-lembut); overflow-wrap: anywhere; }
.sh-pintas__lencana { position: absolute; top: 12px; right: 12px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font-size: 12px; font-weight: var(--tebal-berat); background: var(--emas-500); color: var(--navy-900); }
.sh-pintas > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) { .sh-pintas > :last-child:nth-child(odd) { grid-column: auto; } }

/* bagian & judul */
.sh-bagian { display: flex; flex-direction: column; gap: 12px; }
.sh-judul { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-judul__teks { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: var(--tebal-berat); letter-spacing: .06em; text-transform: uppercase; color: var(--warna-teks-lembut); }
.sh-judul__jumlah { min-width: 20px; padding: 1px 7px; border-radius: 99px; background: var(--warna-primer); color: #fff; font-size: 11px; letter-spacing: 0; text-align: center; }
.sh-ringkas { display: flex; flex-direction: column; gap: 8px; }
.sh-saring { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh-catatan { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--radius-3); background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: 13px; line-height: 1.5; }
.sh-catatan > svg { flex: none; margin-top: 2px; }
.sh-catatan--peringatan { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.sh-catatan--polos { padding: 0 4px; background: none; color: var(--warna-teks-lembut); font-size: 12px; }
.sh-kosong { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius-3); border: 1px dashed var(--warna-garis-kuat); background: var(--warna-permukaan); }
.sh-kosong__ikon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--warna-permukaan-2); color: var(--warna-teks-samar); }
.sh-kosong p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--warna-teks-lembut); }

/* kartu siap diajukan */
.sh-siap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: var(--radius-3); background: linear-gradient(135deg, var(--warna-aksen-lembut), var(--warna-permukaan) 70%); border: 1px solid color-mix(in srgb, var(--warna-aksen) 35%, transparent); box-shadow: var(--bayang-1); }
.sh-siap > .tombol { grid-column: 1 / -1; min-height: 44px; }
.sh-siap__lencana { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--emas-500); color: var(--navy-900); animation: sh-denyut 2.4s ease-in-out infinite; }
@keyframes sh-denyut { 50% { transform: scale(1.06); } }
.sh-siap__isi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-siap__kode { font-size: 12px; font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut); }
.sh-siap__judul { margin: 0; font-size: 15px; font-weight: var(--tebal-tebal); line-height: 1.35; overflow-wrap: anywhere; }
.sh-siap__ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--tebal-tebal); color: var(--warna-teks-sukses); }

/* jadwal */
.sh-jadwal { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; width: 100%; padding: 16px; text-align: left; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks); box-shadow: var(--bayang-1); font: inherit; cursor: pointer; transition: box-shadow var(--transisi-cepat), transform var(--transisi-cepat); }
.sh-jadwal:hover { box-shadow: var(--bayang-2); }
.sh-jadwal:active { transform: scale(.985); }
.sh-jadwal__tgl { display: grid; place-content: center; text-align: center; height: 60px; border-radius: 14px; background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); color: #fff; line-height: 1.1; }
.sh-jadwal__tgl strong { font-size: 22px; }
.sh-jadwal__tgl span { font-size: 12px; text-transform: uppercase; color: var(--emas-400); }
.sh-jadwal__isi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-jadwal__kode { font-size: 12px; font-weight: var(--tebal-tebal); color: var(--warna-teks-aksen); }
.sh-jadwal__judul { font-size: 15px; font-weight: var(--tebal-tebal); line-height: 1.35; overflow-wrap: anywhere; }
.sh-jadwal__meta { display: grid; gap: 2px; margin-top: 4px; font-size: 13px; color: var(--warna-teks-lembut); min-width: 0; }

/* notifikasi */
.sh-notif { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: var(--bayang-1); }
.sh-notif__item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border-radius: 10px; }
.sh-notif__item + .sh-notif__item { border-top: 1px solid var(--warna-garis); border-radius: 0; }
.sh-notif__titik { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.sh-notif__item--baru .sh-notif__titik { background: var(--emas-500); box-shadow: 0 0 0 3px var(--warna-aksen-lembut); }
.sh-notif__isi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-notif__judul { font-size: 14px; font-weight: var(--tebal-tebal); line-height: 1.35; }
.sh-notif__item:not(.sh-notif__item--baru) .sh-notif__judul { font-weight: var(--tebal-sedang); }
.sh-notif__pesan { font-size: 13px; line-height: 1.45; color: var(--warna-teks-lembut); overflow-wrap: anywhere; }
.sh-notif__waktu { font-size: 12px; color: var(--warna-teks-samar); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .siswa-tema > *, .sh-siap__lencana { animation: none; }
  .sh-cincin__busur { transition: none; }
}

/* ==========================================================================
   Prestasi siswa (v2.33.0) — level, lemari medali, grafik semester,
   pembanding kelas, konfeti. Skala sama dengan .sh-* (min. 12px, jarak 4px).
   Animasi transform/opacity saja; dimatikan pada prefers-reduced-motion.
   ========================================================================== */
/* level di hero */
.sp-level { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 14px 8px 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); --medali: rgba(255, 255, 255, .85); --medali-2: rgba(255, 255, 255, .55); }
.sp-level::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-120%); animation: sp-kilap 3.6s ease-in-out 1s infinite; pointer-events: none; }
.sp-level__medali { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--navy-900);
  background: radial-gradient(circle at 30% 28%, #fff8 0 18%, transparent 19%), linear-gradient(145deg, var(--medali), var(--medali-2));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 4px 10px rgba(0, 0, 0, .25); animation: sp-timbul .6s var(--kurva) .3s both; }
.sp-level__teks { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sp-level__teks strong { font-size: 14px; color: #fff; }
.sp-level__teks span { font-size: 12px; color: rgba(255, 255, 255, .78); overflow-wrap: anywhere; }
.sp-level--perunggu { --medali: #e2a36b; --medali-2: #a8662f; }
.sp-level--perak { --medali: #eef2f7; --medali-2: #9aa7b8; }
.sp-level--emas { --medali: #f3d36b; --medali-2: var(--emas-500); }
.sp-level--platinum { --medali: #c9f3ee; --medali-2: #6fbdb5; }
.sp-level--berlian { --medali: #d9f1ff; --medali-2: #8fb4ff; }
.sp-level--emas, .sp-level--platinum, .sp-level--berlian { border-color: color-mix(in srgb, var(--medali) 55%, transparent); }
@keyframes sp-kilap { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes sp-timbul { from { opacity: 0; transform: scale(.4) rotate(-30deg); } }

/* lemari medali */
.sp-lemari { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--radius-3); color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(201, 162, 39, .32), transparent 55%), linear-gradient(150deg, var(--navy-900), var(--navy-700)); box-shadow: var(--bayang-2); }
.sp-lemari::before { content: ''; position: absolute; z-index: -1; right: -36px; top: -36px; width: 140px; height: 140px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .05); }
.sp-lemari__selamat { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: var(--tebal-tebal);
  background: var(--emas-500); color: var(--navy-900); animation: sp-timbul .5s var(--kurva) both; }
.sp-lemari__kepala { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sp-lemari__piala { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--navy-900);
  background: linear-gradient(145deg, #f3d36b, var(--emas-500)); box-shadow: 0 6px 16px rgba(201, 162, 39, .35); }
.sp-lemari__judul { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-lemari__alis { font-size: 12px; font-weight: var(--tebal-berat); letter-spacing: .06em; text-transform: uppercase; color: var(--emas-400); }
.sp-lemari__jumlah { font-size: 14px; color: rgba(255, 255, 255, .85); }
.sp-lemari__angka { font-size: 26px; line-height: 1.1; color: #fff; }
.sp-medali { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-medali__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); animation: sh-naik .45s var(--kurva) both; animation-delay: calc(120ms + var(--i, 0) * 80ms); }
.sp-medali__koin { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--navy-900);
  background: radial-gradient(circle at 32% 28%, #fff9 0 16%, transparent 17%), linear-gradient(145deg, #f3d36b, var(--emas-500) 60%, #a8841c);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28), 0 4px 10px rgba(0, 0, 0, .25); animation: sp-koin .7s var(--kurva) both; animation-delay: calc(200ms + var(--i, 0) * 80ms); }
.sp-medali__koin--bayang { background: none; border: 2px dashed rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .5); box-shadow: none; animation: sh-denyut 2.4s ease-in-out infinite; }
@keyframes sp-koin { from { opacity: 0; transform: perspective(200px) rotateY(180deg) scale(.6); } }
.sp-medali__isi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-medali__kode { font-size: 12px; font-weight: var(--tebal-tebal); color: var(--emas-400); }
.sp-medali__judul { font-size: 14px; font-weight: var(--tebal-tebal); line-height: 1.35; color: #fff; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-medali__tgl { font-size: 12px; color: rgba(255, 255, 255, .7); }
.sp-lemari__kosong { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.sp-lemari__kosong p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.sp-lemari__resmi { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.sp-lemari__resmi > svg { flex: none; margin-top: 1px; color: #8be3bd; }
.sp-lemari__buka { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 0;
  background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 14px; font-weight: var(--tebal-tebal); cursor: pointer;
  transition: background var(--transisi-cepat), transform var(--transisi-cepat); }
.sp-lemari__buka:hover { background: rgba(255, 255, 255, .2); }
.sp-lemari__buka:active { transform: scale(.97); }
.sp-lemari__buka:focus-visible { outline: 2px solid var(--emas-400); outline-offset: 2px; }

/* papan grafik */
.sp-papan { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: var(--bayang-1); }
.sp-papan__ket { margin: 0; font-size: 12px; line-height: 1.45; color: var(--warna-teks-lembut); }
.sp-grafik { display: flex; flex-direction: column; gap: 12px; }
.sp-grafik__batang { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; align-items: end; }
.sp-grafik__kolom { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.sp-grafik__nilai { font-size: 12px; font-weight: var(--tebal-berat); color: var(--warna-teks-primer); }
.sp-grafik__kolom--penuh .sp-grafik__nilai { color: var(--warna-teks-aksen); }
.sp-grafik__kolom--nol .sp-grafik__nilai { color: var(--warna-teks-samar); }
.sp-grafik__jalur { position: relative; overflow: hidden; width: 100%; max-width: 40px; height: 128px; border-radius: 10px; background: var(--warna-permukaan-2); }
.sp-grafik__isi { position: absolute; inset: 0; border-radius: inherit; transform-origin: bottom; transform: scaleY(var(--p, 0));
  background: linear-gradient(180deg, var(--warna-primer), color-mix(in srgb, var(--warna-primer) 70%, var(--navy-900)));
  animation: sp-tumbuh .9s var(--kurva) both; animation-delay: calc(150ms + var(--i, 0) * 90ms); }
.sp-grafik__kolom--penuh .sp-grafik__isi { background: linear-gradient(180deg, #f3d36b, var(--emas-500)); }
@keyframes sp-tumbuh { from { transform: scaleY(0); } }
.sp-grafik__medali { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: var(--tebal-tebal); color: var(--warna-teks-aksen); white-space: nowrap; }
.sp-grafik__medali--kosong { color: var(--warna-teks-samar); font-weight: var(--tebal-sedang); }
.sp-grafik__label { display: flex; flex-direction: column; align-items: center; line-height: 1.2; text-align: center; }
.sp-grafik__label strong { font-size: 12px; color: var(--warna-teks); }
.sp-grafik__label span { font-size: 12px; color: var(--warna-teks-lembut); }
.sp-grafik__legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--warna-teks-lembut); }
.sp-grafik__legenda span { display: inline-flex; align-items: center; gap: 5px; }
.sp-grafik__legenda svg { color: var(--warna-teks-aksen); }
.sp-titik { width: 10px; height: 10px; border-radius: 3px; background: var(--warna-primer); }
.sp-titik--penuh { background: var(--emas-500); }

/* pembanding kelas */
.sp-kelas { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--warna-garis); }
.sp-kelas__kepala { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; }
.sp-kelas__ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.sp-kelas--unggul .sp-kelas__ikon { background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }
.sp-kelas__pesan { margin: 0; font-size: 14px; font-weight: var(--tebal-tebal); line-height: 1.45; }
.sp-kelas__baris { display: grid; grid-template-columns: 104px minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.sp-kelas__label { font-size: 13px; color: var(--warna-teks-lembut); }
.sp-kelas__baris--saya .sp-kelas__label { font-weight: var(--tebal-tebal); color: var(--warna-teks); }
.sp-kelas__jalur { position: relative; overflow: hidden; height: 10px; border-radius: 99px; background: var(--warna-permukaan-2); }
.sp-kelas__isi { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--warna-teks-samar);
  animation: sp-melebar .9s var(--kurva) .3s both; }
.sp-kelas__baris--saya .sp-kelas__isi { background: var(--warna-primer); }
.sp-kelas--unggul .sp-kelas__baris--saya .sp-kelas__isi { background: linear-gradient(90deg, var(--emas-500), #f3d36b); }
@keyframes sp-melebar { from { transform: scaleX(0); } }
.sp-kelas__angka { font-size: 13px; font-weight: var(--tebal-berat); text-align: right; }
.sp-kelas__catatan { margin: 0; font-size: 12px; color: var(--warna-teks-samar); }

.kartu-kk__dorong { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 2px; padding: 4px 10px; border-radius: 99px;
  font-size: 12px; font-weight: var(--tebal-tebal); background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }

/* konfeti sertifikat baru */
.sp-konfeti { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sp-konfeti i { position: absolute; top: -12px; left: 50%; width: 8px; height: 12px; border-radius: 2px; background: var(--emas-500); opacity: 0;
  animation: sp-jatuh 1.6s cubic-bezier(.2, .7, .4, 1) both; animation-delay: var(--d, 0ms); }
.sp-konfeti i:nth-child(4n+1) { background: #8be3bd; }
.sp-konfeti i:nth-child(4n+2) { background: #fff; }
.sp-konfeti i:nth-child(4n+3) { background: #8fb4ff; }
@keyframes sp-jatuh { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x, 0), 220px) rotate(var(--r, 360deg)); } }

@media (prefers-reduced-motion: reduce) {
  .sp-level::after, .sp-level__medali, .sp-lemari__selamat, .sp-medali__item, .sp-medali__koin, .sp-grafik__isi, .sp-kelas__isi { animation: none; }
}

/* Kontak PIC jurusan (Kompetensi Khusus): nama boleh dua baris, jumlah tidak terlipat. */
.sh-kontak { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; list-style: none; }
.sh-kontak::-webkit-details-marker { display: none; }
.sh-kontak__nama { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.35; }
.sh-kontak__nama strong { font-size: 12px; letter-spacing: .03em; color: var(--warna-teks-primer); }
.sh-kontak__nama span { overflow-wrap: anywhere; }
.sh-kontak__jumlah { flex: none; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: var(--tebal-tebal); white-space: nowrap; background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.sh-kontak__jumlah--kosong { background: var(--warna-permukaan-2); color: var(--warna-teks-samar); }

/* ============================================== kapasitas ruang (v2.35.0) ===
   PIC: halaman Kapasitas Ruang (.kpr-*). LSP: kartu ruang & keterangan asesor
   di Jadwal Uji Baru (.srj-*), keterangan asesor di kotak peringatan (.pj-info).
   Animasi hanya transform/opacity; mati pada prefers-reduced-motion. */
.kpr-hal { gap: var(--jarak-4); }
.kpr-cara { display: grid; gap: var(--jarak-3); }
.kpr-alur { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jarak-2); margin: 0; padding: 0; list-style: none; }
.kpr-alur__item {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px;
  border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan);
  animation: kpr-naik 360ms var(--kurva) both; animation-delay: calc(var(--i) * 70ms);
}
.kpr-alur__item + .kpr-alur__item::before {
  content: ''; position: absolute; left: -9px; top: 50%; width: 8px; height: 2px; background: var(--warna-garis-kuat);
}
.kpr-alur__ikon {
  position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: var(--warna-primer-lembut); color: var(--warna-teks-primer);
}
.kpr-alur__no {
  position: absolute; right: -5px; top: -5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--emas-500); color: var(--navy-900); font-size: 11px; font-weight: var(--tebal-berat);
}
.kpr-alur__teks { display: grid; min-width: 0; font-size: var(--teks-xs); color: var(--warna-teks-samar); line-height: 1.35; }
.kpr-alur__teks strong { font-size: var(--teks-sm); color: var(--warna-teks); }
@media (max-width: 640px) {
  .kpr-alur { grid-template-columns: 1fr; }
  .kpr-alur__item + .kpr-alur__item::before { left: 31px; top: -9px; width: 2px; height: 8px; }
}
.kpr-catatan {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--radius-2);
  background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); font-size: var(--teks-sm); line-height: 1.5;
}
.kpr-catatan svg { flex: none; margin-top: 2px; }
.kpr-alat { display: flex; flex-wrap: wrap; gap: var(--jarak-2); align-items: center; }
.kpr-alat__cari { flex: 1 1 220px; min-width: 0; }
.kpr-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--jarak-3); align-items: start; }
.kpr-kk {
  display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--warna-garis); border-radius: var(--radius-3);
  background: var(--warna-permukaan); box-shadow: var(--bayang-1);
  animation: kpr-naik 320ms var(--kurva) both; animation-delay: calc(var(--i) * 35ms);
}
.kpr-kk--diatur { border-left: 4px solid var(--warna-sukses); }
.kpr-kk__kepala { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.kpr-kk__kode {
  padding: 3px 8px; border-radius: 8px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer);
  font-size: var(--teks-xs); font-weight: var(--tebal-berat); white-space: nowrap;
}
.kpr-kk__meta { font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.kpr-kk__tunggu {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 8px; border-radius: 99px;
  background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); font-size: var(--teks-xs); font-weight: var(--tebal-tebal);
}
.kpr-kk__judul { margin: 0; font-size: var(--teks-md); font-weight: var(--tebal-tebal); line-height: 1.35; overflow-wrap: anywhere; }
.kpr-kk__kosong { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--teks-sm); color: var(--warna-teks-samar); }
.kpr-kk__kaki { display: flex; justify-content: flex-end; }
.kpr-ruang { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kpr-ruang__chip {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%;
  min-height: var(--target-sentuh); padding: 8px 10px; border: 1px solid var(--warna-garis); border-radius: var(--radius-2);
  background: var(--warna-permukaan-2); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--transisi-cepat), background-color var(--transisi-cepat), transform var(--transisi-cepat);
}
.kpr-ruang__chip:hover { border-color: var(--warna-primer-garis); background: var(--warna-primer-lembut); }
.kpr-ruang__chip:active { transform: scale(.99); }
.kpr-ruang__chip:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.kpr-ruang__ikon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.kpr-ruang__isi { display: grid; min-width: 0; }
.kpr-ruang__nama { font-size: var(--teks-sm); font-weight: var(--tebal-sedang); }
.kpr-ruang__sub { font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.kpr-ruang__angka { display: grid; justify-items: end; line-height: 1.05; }
.kpr-ruang__angka strong { font-size: var(--teks-lg); color: var(--warna-teks-primer); }
.kpr-ruang__angka span { font-size: 11px; color: var(--warna-teks-samar); }
.kpr-ruang__ubah { color: var(--warna-teks-samar); }

.kpr-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jarak-4); }
.kpr-stepper { display: grid; width: max-content; grid-template-columns: 48px 96px 48px; align-items: stretch; border: 1px solid var(--warna-garis-kuat); border-radius: var(--radius-3); overflow: hidden; }
.kpr-stepper__tombol { display: grid; place-items: center; min-height: 48px; border: 0; background: var(--warna-permukaan-2); color: var(--warna-teks); cursor: pointer; }
.kpr-stepper__tombol:hover { background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.kpr-stepper__tombol:active { transform: scale(.94); }
.kpr-stepper__input {
  width: 100%; min-width: 0; border: 0; border-inline: 1px solid var(--warna-garis); background: var(--warna-permukaan);
  color: var(--warna-teks); font-size: 22px; font-weight: var(--tebal-berat); text-align: center; -moz-appearance: textfield;
}
.kpr-stepper__input::-webkit-outer-spin-button, .kpr-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kpr-stepper__input:focus { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.kpr-default { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.kpr-kursi-wadah { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-3); background: var(--warna-permukaan-2); border: 1px dashed var(--warna-garis-kuat); }
.kpr-kursi { position: relative; display: flex; flex-wrap: wrap; gap: 5px; min-height: 14px; }
.kpr-kursi__titik {
  width: 14px; height: 14px; border-radius: 4px 4px 6px 6px; background: var(--warna-primer);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
  animation: kpr-kursi 260ms var(--kurva) both; animation-delay: calc(var(--i) * 18ms);
}
.kpr-kursi[data-lebih]:not([data-lebih=""])::after {
  content: attr(data-lebih); align-self: center; padding: 0 6px; border-radius: 6px; background: var(--warna-primer-lembut);
  color: var(--warna-teks-primer); font-size: var(--teks-xs); font-weight: var(--tebal-berat);
}
.kpr-kursi__teks { margin: 0; font-size: var(--teks-sm); font-weight: var(--tebal-sedang); color: var(--warna-teks-lembut); }
.kpr-kursi__teks--beda { color: var(--warna-teks-aksen); }
.kpr-lain { border: 1px solid var(--warna-garis); border-radius: var(--radius-3); padding: 10px 12px; }
.kpr-lain > summary { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); }
.kpr-lain > summary:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.kpr-lain[open] > summary { margin-bottom: 6px; }
.kpr-lain__jumlah:not(:empty) { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: var(--warna-primer); color: #fff; font-size: var(--teks-xs); }
.kpr-lain__isi { display: grid; gap: 10px; margin-top: 8px; }
.kpr-lain__kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpr-lain__daftar { display: grid; gap: 2px; }
.kpr-lain__item { display: flex; align-items: center; gap: 10px; min-height: var(--target-sentuh); padding: 4px 8px; border-radius: 8px; font-size: var(--teks-sm); cursor: pointer; }
.kpr-lain__item:hover { background: var(--warna-permukaan-2); }
.kpr-lain__ada { flex: none; padding: 2px 6px; border-radius: 6px; background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); font-size: 11px; }
@keyframes kpr-naik { from { opacity: 0; transform: translateY(8px); } }
@keyframes kpr-kursi { from { opacity: 0; transform: scale(.2) translateY(6px); } }

/* --- saran jadwal (LSP) --- */
.srj-waktu { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--jarak-3); }
.srj-waktu > .bidang { margin: 0; }
@media (max-width: 560px) { .srj-waktu { grid-template-columns: 1fr 1fr; } .srj-waktu > :first-child { grid-column: 1 / -1; } }
.srj-sub { display: grid; gap: 2px; margin: var(--jarak-4) 0 var(--jarak-2); }
.srj-ruang { display: grid; gap: var(--jarak-2); }
.srj-ruang__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--jarak-2); }
.srj-ruang__alat { display: flex; flex-wrap: wrap; gap: var(--jarak-2); }
.srj-kartu {
  position: relative; display: grid; gap: 6px; min-width: 0; padding: 12px; border: 1.5px solid var(--warna-garis); border-radius: var(--radius-3);
  background: var(--warna-permukaan); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--transisi-cepat), box-shadow var(--transisi-cepat), transform var(--transisi-cepat);
  animation: kpr-naik 300ms var(--kurva) both; animation-delay: calc(var(--i) * 45ms);
}
.srj-kartu:hover { border-color: var(--warna-primer-garis); box-shadow: var(--bayang-1); transform: translateY(-1px); }
.srj-kartu:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.srj-kartu--aktif { border-color: var(--warna-primer); box-shadow: 0 0 0 3px var(--warna-primer-lembut), var(--bayang-1); }
.srj-kartu--dipakai { background: var(--warna-permukaan-2); }
.srj-kartu--dipakai .srj-kartu__kap strong { color: var(--warna-teks-samar); }
.srj-kartu__kepala { display: flex; align-items: center; gap: 8px; min-width: 0; }
.srj-kartu__radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--warna-garis-kuat); transition: border-width var(--transisi-cepat), border-color var(--transisi-cepat); }
.srj-kartu--aktif .srj-kartu__radio { border: 6px solid var(--warna-primer); }
.srj-kartu__nama { flex: 1 1 auto; min-width: 0; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); }
.srj-kartu__kap { display: flex; align-items: baseline; gap: 6px; }
.srj-kartu__kap strong { font-size: 24px; line-height: 1; color: var(--warna-teks-primer); }
.srj-kartu__kap span { font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.srj-meter { display: block; height: 6px; border-radius: 99px; background: var(--warna-garis); overflow: hidden; }
.srj-meter__isi { display: block; height: 100%; border-radius: inherit; background: var(--warna-sukses); transform-origin: left; transform: scaleX(var(--isi)); animation: srj-isi 600ms var(--kurva) both; }
.srj-meter__isi--penuh { background: var(--warna-aksen); }
.srj-kartu__muat { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.srj-kartu__catatan { display: flex; align-items: flex-start; gap: 4px; font-size: var(--teks-xs); font-style: italic; color: var(--warna-teks-lembut); }
.srj-kartu__catatan svg { flex: none; margin-top: 2px; }
.srj-kartu__status { display: flex; align-items: flex-start; gap: 4px; font-size: var(--teks-xs); line-height: 1.4; }
.srj-kartu__status svg { flex: none; margin-top: 1px; }
.srj-kartu__status--ok { color: var(--warna-teks-sukses); }
.srj-kartu__status--waspada { color: var(--warna-teks-peringatan); }
.srj-kartu__status--netral { color: var(--warna-teks-samar); }
.srj-lencana { display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: var(--tebal-tebal); white-space: nowrap; }
.srj-lencana--saran { background: linear-gradient(135deg, var(--emas-200), var(--emas-400)); color: var(--navy-900); }
.srj-kuota-baris { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--jarak-2) var(--jarak-3); margin-top: var(--jarak-3); }
.srj-kuota-baris > .bidang { margin: 0; flex: 0 0 160px; }
.srj-kuota { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; font-size: var(--teks-sm); }
.srj-kuota--oto { padding: 6px 10px; border-radius: var(--radius-2); background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.srj-sisa { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 10px; border-radius: var(--radius-2); background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: var(--teks-sm); }
.srj-sisa svg { flex: none; margin-top: 2px; }
.srj-asesor {
  display: flex; gap: 10px; margin-top: var(--jarak-2); padding: 10px 12px; border-radius: var(--radius-3); border: 1px solid;
  animation: kpr-naik 260ms var(--kurva) both;
}
.srj-asesor--ok { border-color: var(--hijau-200); background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.srj-asesor--waspada { border-color: var(--warna-peringatan); background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.srj-asesor--bahaya { border-color: var(--warna-bahaya); background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); }
:root[data-tema="gelap"] .srj-asesor--ok { border-color: #1f5a43; }
.srj-asesor__ikon { flex: none; padding-top: 2px; }
.srj-asesor__isi { display: grid; gap: 4px; min-width: 0; }
.srj-asesor__judul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: var(--teks-sm); }
.srj-asesor__daftar { margin: 0; padding-left: 16px; font-size: var(--teks-sm); line-height: 1.45; }
.srj-asesor__meta { margin: 0; font-size: var(--teks-xs); opacity: .85; }
.syarat__item--info { color: var(--warna-teks-primer); }
.pj-info { padding: var(--jarak-3); border-radius: var(--radius-2); border: 1px solid var(--warna-primer-garis); background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: var(--teks-sm); }
.pj-info__judul { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-weight: var(--tebal-tebal); }
@keyframes srj-isi { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .kpr-alur__item, .kpr-kk, .kpr-kursi__titik, .srj-kartu, .srj-meter__isi, .srj-asesor { animation: none; }
  .srj-kartu, .kpr-ruang__chip, .srj-kartu__radio { transition: none; }
}

/* ==========================================================================
   Tema LSP (v2.36.0), PIC (v2.37.0), Penguji & Wali Kelas (v2.38.0), Pengajar (v2.40.0)
   Hanya gaya — elemen, urutan, dan isi halaman tidak berubah. Dikunci ke
   body[data-peran="LSP"/"PIC"] (app.js: pasangPenandaPeran), mengikuti bahasa visual
   Pengajar/Manajemen (.gb-hero, .mnj-tema): kepala navy bergradien, aksen
   emas, kartu membulat.
   Kaidah yang dipakai:
   - Huruf minimum 12px (Apple HIG: minimum 11pt; dipilih 12px agar nyaman
     dibaca di layar kecil); isi 15px, tinggi baris 1,5.
   - Target sentuh ≥ 44px di ponsel/layar sentuh (WCAG 2.5.5 & Apple HIG
     44pt; batas minimum WCAG 2.2 AA 2.5.8 adalah 24px).
   - Jarak kelipatan 4px, tepi halaman 16px; tanpa gulir mendatar sampai
     lebar 320px (WCAG 1.4.10 Reflow).
   ========================================================================== */
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__kepala,
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman > .kartu--sorot:first-child:has(.statistik) {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--jarak-5); border: 0; border-radius: var(--radius-4); color: #fff;
  background: radial-gradient(110% 80% at 100% 0%, rgba(201, 162, 39, .24), transparent 60%),
    linear-gradient(145deg, var(--navy-900), var(--navy-700) 65%, var(--navy-600));
  box-shadow: var(--bayang-2);
}
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__kepala::after,
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman > .kartu--sorot:first-child:has(.statistik)::after {
  content: ''; position: absolute; right: -40px; bottom: -60px; z-index: -1;
  width: 200px; height: 200px; border-radius: 50%; border: 28px solid rgba(255, 255, 255, .06);
  pointer-events: none;
}
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman > .kartu--sorot:first-child:has(.statistik)::before { display: none; }
@media (max-width: 559.98px) {
  body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__kepala,
  body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman > .kartu--sorot:first-child:has(.statistik) { padding: var(--jarak-5) var(--jarak-4) var(--jarak-4); }
}
/* teks di atas navy */
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__kepala .mdata__grup { color: var(--emas-400); }
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__judul { color: #fff; font-size: clamp(20px, 5.4vw, 26px); }
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__deskripsi { color: rgba(255, 255, 255, .78); line-height: 1.5; }
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman > .kartu--sorot:first-child:has(.statistik) .teks-lembut { color: rgba(255, 255, 255, .75); }
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman > .kartu--sorot:first-child:has(.statistik) .statistik__sel {
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14);
}
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman > .kartu--sorot:first-child:has(.statistik) .statistik__angka { color: #fff !important; }
/* Nada angka (gaya sebaris dari komponen statistik) disesuaikan agar kontras di atas navy. */
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman > .kartu--sorot:first-child:has(.statistik) .statistik__angka[style*="aksen"] { color: var(--emas-400) !important; }
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman > .kartu--sorot:first-child:has(.statistik) .statistik__angka[style*="peringatan"] { color: var(--amber-200) !important; }
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman > .kartu--sorot:first-child:has(.statistik) .statistik__label { color: rgba(255, 255, 255, .74); }
/* tombol di atas navy: utama emas, lainnya kaca tipis */
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__kepala .tombol--primer {
  background: var(--emas-500); border-color: var(--emas-500); color: var(--navy-900); box-shadow: 0 4px 14px rgba(201, 162, 39, .28);
}
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__kepala .tombol--primer:hover:not(:disabled) { background: var(--emas-400); border-color: var(--emas-400); }
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__kepala :is(.tombol--sekunder, .tombol--hantu) {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff;
}
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__kepala :is(.tombol--sekunder, .tombol--hantu):hover:not(:disabled) {
  background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4);
}
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__kepala .tombol-ikon { color: #fff; }
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__kepala .tombol-ikon:hover { background: rgba(255, 255, 255, .14); }
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten .halaman:not(:has(.sys-hero)) .mdata__kepala :focus-visible { outline-color: var(--emas-400); }

/* Huruf minimum 12px untuk label yang sebelumnya 11px. */
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) :is(.mdata__grup, .tab-status__jumlah, .ringkas__label, .imp-jenis__judul-grup,
  .imp-kartu__sub, .sys-hero__sub, .sys-simpul__sub, .sys-lingkungan, .imp-legenda, .sys-legenda,
  .gb-lanjut__isi, .sh-cincin__label, .jadwal-pic__bulan, .pdv-chip, .gb-hero__label,
  .pnd-hero__persen span, .pnd-ik__kode, .rk-stat__label, .rk-kk__kode, .rk-kk__meta) { font-size: 12px; }
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) .tab-status__jumlah { line-height: 20px; }

/* Target sentuh ≥ 44px di ponsel & layar sentuh. */
@media (max-width: 767.98px), (pointer: coarse) {
  body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) :is(.tombol, .tombol--kecil, .cip, .segmen__item, .pgj-saring__item, .mdata__ukuran, .tab-status__item, .pnd-aksi, .gb-mapel) { min-height: 44px; }
  body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) :is(.mdata__hal, .tabeldata__hal) { min-width: 44px; min-height: 44px; }
  body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) #konten details > summary { min-height: 44px; padding-block: 10px; box-sizing: border-box; }
  body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) .pilihcari__tombol { min-height: 48px; }
}

/* --- PIC (v2.37.0): kepala Beranda PIC (.dpic) mengikuti kepala Manajemen. --- */
body[data-peran="PIC"] .dpic .dasbor-mnj__kepala {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--jarak-5); border: 0; border-radius: var(--radius-4); color: #fff;
  background: radial-gradient(110% 80% at 100% 0%, rgba(30, 125, 90, .45), transparent 60%),
    linear-gradient(145deg, var(--navy-900), var(--navy-700) 65%, var(--navy-600));
  box-shadow: var(--bayang-2);
}
body[data-peran="PIC"] .dpic .dasbor-mnj__kepala::after {
  content: ''; position: absolute; right: -40px; bottom: -60px; z-index: -1; pointer-events: none;
  width: 200px; height: 200px; border-radius: 50%; border: 28px solid rgba(255, 255, 255, .06);
}
@media (max-width: 559.98px) { body[data-peran="PIC"] .dpic .dasbor-mnj__kepala { padding: var(--jarak-5) var(--jarak-4) var(--jarak-4); } }
body[data-peran="PIC"] .dpic .dasbor-mnj__kepala .mdata__grup { color: var(--emas-400); }
body[data-peran="PIC"] .dpic .dpic__judul { color: #fff; }
body[data-peran="PIC"] .dpic .dasbor-mnj__kepala :is(.teks-lembut, .teks-samar) { color: rgba(255, 255, 255, .75); }
body[data-peran="PIC"] .dpic .dasbor-mnj__kepala .cip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .88); }
body[data-peran="PIC"] .dpic .dasbor-mnj__kepala .cip:hover { background: rgba(255, 255, 255, .16); }
body[data-peran="PIC"] .dpic .dasbor-mnj__kepala .cip[aria-pressed="true"] { background: var(--emas-500); border-color: var(--emas-500); color: var(--navy-900); }
body[data-peran="PIC"] .dpic .dasbor-mnj__kepala :is(.tombol--sekunder, .tombol--hantu) { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff; }
body[data-peran="PIC"] .dpic .dasbor-mnj__kepala :is(.tombol--sekunder, .tombol--hantu):hover:not(:disabled) { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); }
body[data-peran="PIC"] .dpic .dasbor-mnj__kepala :focus-visible { outline-color: var(--emas-400); }
/* Panel & kartu angka: membulat, ikon dalam cip lembut (seperti .mnj-tema). */
body[data-peran="PIC"] .dpic :is(.dasbor-mnj__panel, .mvital__kartu) {
  border-radius: var(--radius-3);
  transition: box-shadow var(--transisi-cepat), border-color var(--transisi-cepat), transform var(--transisi-cepat);
}
body[data-peran="PIC"] .dpic .mvital__label > svg {
  flex: none; box-sizing: content-box; padding: 7px; border-radius: 11px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer);
}
/* Nomor langkah di halaman Kapasitas Ruang: 12px dalam lingkaran 20px. */
body:is([data-peran="LSP"], [data-peran="PIC"], [data-peran="PENGUJI"], [data-peran="WALI_KELAS"], [data-peran="PENGAJAR"]) .kpr-alur__no { width: 20px; height: 20px; font-size: 12px; }
/* Nama siswa di Kotak Masuk: area ketuk diperluas tanpa menggeser tata letak. */
@media (max-width: 767.98px), (pointer: coarse) {
  body[data-peran="PIC"] .kmasuk__nama { padding-block: 12px; margin-block: -12px; }
}

/* ==========================================================================
   Dasbor wali kelas (v2.39.0) — .wk-* ; penyusun pesan WhatsApp — .pwa-*
   Bahasa visual Pengajar (.gb-hero, .gb-kelas): hero navy, kartu putih
   membulat, aksen emas. Huruf ≥ 12px, target sentuh ≥ 44px, jarak kelipatan
   4px. Animasi hanya transform/opacity dan mati pada prefers-reduced-motion.
   ========================================================================== */
.wk { gap: var(--jarak-5); }
.wk-hero-aksi { display: grid; gap: var(--jarak-3); }
.wk-kelas { display: flex; flex-wrap: wrap; gap: var(--jarak-2); }
.wk-kelas__cip {
  min-height: 40px; padding: 0 14px; border-radius: var(--radius-penuh); border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .9); font: inherit; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); cursor: pointer;
}
.wk-kelas__cip--aktif { background: var(--emas-500); border-color: var(--emas-500); color: var(--navy-900); }
/* Banyak kelas (v2.40.1): bilah ‹ kelas › bertinggi tetap — 20 rombel tidak lagi memakan satu layar. */
.wk-pindah { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: var(--jarak-2); max-width: 420px; }
.wk-pindah__panah, .wk-pindah__tengah {
  min-height: 48px; border-radius: var(--radius-3); border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .08); color: #fff; font: inherit; cursor: pointer;
}
.wk-pindah__panah { display: grid; place-items: center; padding: 0; }
.wk-pindah__panah:disabled { opacity: .35; cursor: default; }
.wk-pindah__tengah { display: flex; align-items: center; gap: var(--jarak-2); min-width: 0; padding: 6px 12px; text-align: left; border-color: rgba(232, 184, 76, .55); }
.wk-pindah__teks { display: grid; min-width: 0; flex: 1 1 auto; }
.wk-pindah__alis { font-size: var(--teks-xs); color: rgba(255, 255, 255, .7); line-height: 1.3; }
.wk-pindah__nama { font-size: var(--teks-sm); font-weight: var(--tebal-berat); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.wk-pindah__ikon { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--emas-500); color: var(--navy-900); }
@media (hover: hover) {
  .wk-pindah__panah:not(:disabled):hover, .wk-pindah__tengah:hover { background: rgba(255, 255, 255, .16); }
}
/* Lembar daftar kelas. */
.wk-dk { display: grid; gap: var(--jarak-4); }
.wk-dk__daftar { display: grid; gap: var(--jarak-4); }
.wk-dk__grup { display: grid; gap: var(--jarak-2); }
.wk-dk__tingkat { display: flex; align-items: center; gap: var(--jarak-2); margin: 0; font-size: var(--teks-xs); font-weight: var(--tebal-berat); letter-spacing: .06em; text-transform: uppercase; color: var(--warna-teks-lembut); }
.wk-dk__isi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: var(--jarak-2); }
.wk-dk__item {
  display: flex; align-items: center; gap: var(--jarak-2); min-width: 0; min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); color: var(--warna-teks);
  font: inherit; text-align: left; cursor: pointer;
}
.wk-dk__item:hover { background: var(--warna-permukaan-2); }
.wk-dk__item--aktif { border-color: var(--emas-500); background: color-mix(in srgb, var(--emas-500) 14%, var(--warna-permukaan)); }
.wk-dk__teks { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.wk-dk__nama { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); overflow-wrap: anywhere; }
.wk-dk__mapel { font-size: var(--teks-xs); font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut); overflow-wrap: anywhere; }
.wk-dk__centang { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--emas-500); color: var(--navy-900); }
.wk-wa { max-width: 420px; }
.wk-wa .gb-lanjut__ikon { background: #25d366; color: #fff; }
.wk-judul { margin: 0 0 var(--jarak-3); font-size: var(--teks-sm); font-weight: var(--tebal-berat); letter-spacing: .06em; text-transform: uppercase; color: var(--warna-teks-lembut); }
.wk-bagian { min-width: 0; }

/* --- perlu tindakan --- */
.wk-aksi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--jarak-3); }
.wk-aksi__kartu {
  --warna: var(--warna-primer); --lembut: var(--warna-primer-lembut); --teks: var(--warna-teks-primer);
  position: relative; display: grid; align-content: start; gap: 4px; min-height: 120px; padding: 14px; overflow: hidden;
  border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); box-shadow: var(--bayang-1);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: transform var(--transisi-cepat), box-shadow var(--transisi-cepat), border-color var(--transisi-cepat);
  animation: wk-naik 360ms var(--kurva) both; animation-delay: calc(var(--i) * 60ms);
}
.wk-aksi__kartu::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--warna); transform-origin: left; transform: scaleX(.35); transition: transform var(--transisi); }
.wk-aksi__kartu:hover { transform: translateY(-2px); box-shadow: var(--bayang-2); border-color: var(--warna-primer-garis); }
.wk-aksi__kartu:hover::after { transform: scaleX(1); }
.wk-aksi__kartu:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.wk-aksi__kartu--aksen { --warna: var(--warna-aksen); --lembut: var(--warna-aksen-lembut); --teks: var(--warna-teks-aksen); }
.wk-aksi__kartu--bahaya { --warna: var(--warna-bahaya); --lembut: var(--warna-bahaya-lembut); --teks: var(--warna-teks-bahaya); }
.wk-aksi__kartu--peringatan { --warna: var(--warna-peringatan); --lembut: var(--warna-peringatan-lembut); --teks: var(--warna-teks-peringatan); }
.wk-aksi__kartu--netral { --warna: var(--warna-teks-samar); --lembut: var(--warna-permukaan-2); --teks: var(--warna-teks-lembut); }
.wk-aksi__kartu--nol { opacity: .72; }
.wk-aksi__kartu--nol::after { transform: scaleX(0); }
.wk-aksi__ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--lembut); color: var(--teks); }
.wk-aksi__angka { margin-top: 4px; font-size: 26px; line-height: 1.1; color: var(--teks); }
.wk-aksi__label { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks); }
.wk-aksi__sub { font-size: var(--teks-xs); line-height: 1.4; color: var(--warna-teks-samar); }

/* --- tab --- */
.wk-tab {
  position: sticky; top: calc(var(--tinggi-appbar) + 4px); z-index: 4; scroll-margin-top: calc(var(--tinggi-appbar) + 8px);
  display: flex; gap: 4px; padding: 4px; margin-bottom: var(--jarak-4); overflow-x: auto; scrollbar-width: none;
  border-radius: var(--radius-penuh); background: color-mix(in srgb, var(--warna-permukaan-2) 88%, transparent);
  border: 1px solid var(--warna-garis); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wk-tab::-webkit-scrollbar { display: none; }
.wk-tab__item {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: var(--radius-penuh); background: none; color: var(--warna-teks-lembut);
  font: inherit; font-size: var(--teks-sm); font-weight: var(--tebal-sedang); white-space: nowrap; cursor: pointer;
  transition: background-color var(--transisi-cepat), color var(--transisi-cepat), box-shadow var(--transisi-cepat);
}
.wk-tab__item--aktif { background: var(--warna-permukaan); color: var(--warna-teks); font-weight: var(--tebal-tebal); box-shadow: var(--bayang-1); }
.wk-tab__item:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.wk-tab__n { min-width: 22px; padding: 0 7px; border-radius: var(--radius-penuh); background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: 12px; line-height: 20px; text-align: center; }
.wk-tabisi { animation: wk-naik 260ms var(--kurva) both; }

/* --- bilah --- */
.wk-bilah { position: relative; display: block; height: 8px; border-radius: 99px; background: var(--warna-garis); overflow: visible; }
.wk-bilah__isi { position: absolute; inset: 0; border-radius: inherit; background: var(--warna-primer); transform-origin: left; transform: scaleX(var(--p)); animation: wk-isi 700ms var(--kurva) both; }
.wk-bilah--sukses .wk-bilah__isi { background: var(--warna-sukses); }
.wk-bilah--peringatan .wk-bilah__isi { background: var(--warna-peringatan); }
.wk-bilah--bahaya .wk-bilah__isi { background: var(--warna-bahaya); }
.wk-bilah__rata { position: absolute; top: -3px; bottom: -3px; left: var(--r); width: 2px; margin-left: -1px; border-radius: 2px; background: var(--warna-teks); opacity: .55; }
.wk-nada--primer { color: var(--warna-teks-primer); }
.wk-nada--sukses { color: var(--warna-teks-sukses); }
.wk-nada--peringatan { color: var(--warna-teks-peringatan); }
.wk-nada--bahaya { color: var(--warna-teks-bahaya); }
.wk-nada--netral { color: var(--warna-teks-samar); }

/* --- tab mapel --- */
.wk-mapel { display: grid; gap: var(--jarak-5); }
.wk-grup { display: grid; gap: var(--jarak-3); animation: wk-naik 320ms var(--kurva) both; animation-delay: calc(var(--i) * 70ms); }
.wk-grup__kepala { display: flex; align-items: center; gap: 12px; }
.wk-grup__ikon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.wk-grup__ikon--mapel_umum { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.wk-grup__ikon--divisi { background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }
.wk-grup__teks { flex: 1 1 auto; min-width: 0; }
.wk-grup__judul { margin: 0; font-size: var(--teks-md); font-weight: var(--tebal-tebal); }
.wk-grup__meta { margin: 2px 0 0; font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.wk-grup__persen { font-size: var(--teks-xl); font-weight: var(--tebal-berat); color: var(--warna-teks-primer); }
.wk-unitdaftar { display: grid; gap: var(--jarak-2); }
.wk-unit { border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); box-shadow: var(--bayang-1); overflow: hidden; transition: box-shadow var(--transisi-cepat), border-color var(--transisi-cepat); }
.wk-unit:hover { border-color: var(--warna-primer-garis); }
.wk-unit__kepala {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 12px 14px;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.wk-unit__kepala:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.wk-unit__kode { padding: 4px 9px; border-radius: 8px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: 12px; font-weight: var(--tebal-berat); white-space: nowrap; }
.wk-unit__kode--mapel_umum { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.wk-unit__kode--divisi { background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }
.wk-unit__teks { display: grid; gap: 4px; min-width: 0; }
.wk-unit__nama { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-unit__meta { font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.wk-unit__persen { font-size: var(--teks-lg); font-weight: var(--tebal-berat); }
.wk-unit__panah { color: var(--warna-teks-samar); transition: transform var(--transisi); }
.wk-unit__kepala[aria-expanded="true"] .wk-unit__panah { transform: rotate(180deg); }
.wk-unit__isi { padding: 4px 14px 14px; border-top: 1px solid var(--warna-garis); background: var(--warna-permukaan-2); animation: wk-naik 240ms var(--kurva) both; }
.wk-unit__kaki { display: flex; justify-content: flex-end; margin-top: var(--jarak-3); }
.wk-kc { display: grid; gap: var(--jarak-3); margin: var(--jarak-3) 0 0; padding: 0; list-style: none; }
.wk-kc__baris { display: grid; gap: 6px; padding: 12px; border-radius: var(--radius-2); background: var(--warna-permukaan); border: 1px solid var(--warna-garis); animation: wk-naik 260ms var(--kurva) both; animation-delay: calc(var(--i) * 35ms); }
.wk-kc__atas { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px; }
.wk-kc__kode { font-size: 12px; font-weight: var(--tebal-berat); color: var(--warna-teks-primer); white-space: nowrap; }
.wk-kc__judul { font-size: var(--teks-sm); font-weight: var(--tebal-sedang); line-height: 1.4; }
.wk-kc__persen { font-size: var(--teks-md); font-weight: var(--tebal-berat); }
.wk-kc__meta { margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.wk-kc__beres { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-sukses); }
.wk-nama { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wk-nama__label { font-size: var(--teks-xs); color: var(--warna-teks-lembut); font-weight: var(--tebal-sedang); }
.wk-nama__cip {
  min-height: 32px; padding: 0 10px; border-radius: var(--radius-penuh); border: 1px solid var(--warna-garis); background: var(--warna-permukaan-2);
  color: var(--warna-teks); font: inherit; font-size: 12px; cursor: pointer; transition: background-color var(--transisi-cepat), border-color var(--transisi-cepat);
}
.wk-nama__cip:hover { border-color: var(--warna-primer-garis); background: var(--warna-primer-lembut); }
.wk-nama__lagi { font-size: 12px; color: var(--warna-teks-samar); }

/* --- tab siswa --- */
.wk-alat { display: grid; gap: var(--jarak-3); margin-bottom: var(--jarak-3); }
.wk-saring { display: flex; gap: var(--jarak-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.wk-saring .cip { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.wk-saring__n { min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--warna-sorot); font-size: 12px; line-height: 20px; text-align: center; }
.wk-alat__baris { display: flex; flex-wrap: wrap; gap: var(--jarak-2); align-items: center; }
.wk-alat__cari { flex: 1 1 220px; min-width: 0; }
.wk-tampilan { display: inline-flex; padding: 3px; border-radius: var(--radius-2); background: var(--warna-permukaan-2); border: 1px solid var(--warna-garis); }
.wk-tampilan__item { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--warna-teks-lembut); font: inherit; font-size: var(--teks-sm); cursor: pointer; }
.wk-tampilan__item--aktif { background: var(--warna-permukaan); color: var(--warna-teks); font-weight: var(--tebal-tebal); box-shadow: var(--bayang-1); }
.wk-daftar__kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jarak-2); margin-bottom: var(--jarak-3); }
.wk-daftar { display: grid; gap: var(--jarak-2); margin: 0; padding: 0; list-style: none; }
.wk-siswa { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); box-shadow: var(--bayang-1); overflow: hidden; animation: wk-naik 260ms var(--kurva) both; animation-delay: calc(var(--i) * 25ms); }
.wk-siswa__baris { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 72px; padding: 10px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wk-siswa__baris:hover { background: var(--warna-primer-lembut); }
.wk-siswa__baris:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.wk-siswa__absen { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, var(--navy-600), var(--navy-800)); color: #fff; font-size: 12px; font-weight: var(--tebal-berat); }
.wk-siswa__teks { display: grid; gap: 4px; min-width: 0; }
.wk-siswa__nama { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-siswa__meta { font-size: var(--teks-xs); color: var(--warna-teks-samar); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-siswa__lencana { display: flex; flex-wrap: wrap; gap: 4px; }
.wk-siswa__persen { font-size: var(--teks-lg); font-weight: var(--tebal-berat); }
.wk-siswa__wa { position: relative; flex: none; display: grid; place-items: center; width: 52px; border: 0; border-left: 1px solid var(--warna-garis); background: none; color: #1f9d55; cursor: pointer; }
.wk-siswa__wa:hover { background: color-mix(in srgb, #25d366 12%, transparent); }
.wk-siswa__wa:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.wk-siswa__wa-titik { position: absolute; top: 14px; right: 13px; width: 8px; height: 8px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 2px var(--warna-permukaan); }
.wk-lencana { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: var(--tebal-tebal); white-space: nowrap; }
.wk-lencana--aksen { background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }
.wk-lencana--bahaya { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); }
.wk-lencana--primer { background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.wk-lencana--netral { background: var(--warna-permukaan-2); color: var(--warna-teks-lembut); }

/* peta capaian siswa × mapel */
.wk-peta { display: grid; gap: var(--jarak-3); }
.wk-peta__gulir { overflow-x: auto; border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); }
.wk-peta__gulir:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.wk-peta__tabel { border-collapse: separate; border-spacing: 3px; min-width: 100%; font-size: 12px; }
.wk-peta__tabel thead th { position: sticky; top: 0; z-index: 1; padding: 8px 4px; background: var(--warna-permukaan); color: var(--warna-teks-lembut); font-weight: var(--tebal-berat); text-align: center; white-space: nowrap; }
.wk-peta__nama { position: sticky; left: 0; z-index: 2; min-width: 120px; max-width: 160px; padding: 0 8px; background: var(--warna-permukaan); text-align: left !important; font-weight: var(--tebal-sedang); }
.wk-peta__nama .potong { display: block; }
.wk-peta__kol--konsentrasi { color: var(--warna-teks-primer) !important; }
.wk-peta__kol--divisi { color: var(--warna-teks-aksen) !important; }
.wk-peta__sel { min-width: 44px; height: 40px; border-radius: 8px; text-align: center; font-weight: var(--tebal-tebal); }
.wk-peta__tabel tbody tr { cursor: pointer; }
.wk-peta__tabel tbody tr:hover .wk-peta__nama { color: var(--warna-teks-primer); }
.wk-peta__tabel tbody tr:focus-visible { outline: 2px solid var(--warna-fokus); }
.wk-peta__sel--t4 { background: var(--warna-sukses); color: #fff; }
.wk-peta__sel--t3 { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.wk-peta__sel--t2 { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.wk-peta__sel--t1 { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); }
.wk-peta__sel--t0 { background: var(--warna-permukaan-2); color: var(--warna-teks-samar); }
.wk-peta__sel--na { background: transparent; color: var(--warna-teks-samar); }
.wk-peta__legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--warna-teks-lembut); }
.wk-peta__legenda li { display: inline-flex; align-items: center; gap: 6px; }
.wk-peta__contoh { display: inline-block; width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--warna-garis); }

/* --- tab jadwal --- */
.wk-jadwaltab { display: grid; gap: var(--jarak-3); }
.wk-sub { display: flex; align-items: center; gap: 8px; margin: var(--jarak-3) 0 0; font-size: var(--teks-md); font-weight: var(--tebal-tebal); }
.wk-kosong { display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px; border-radius: var(--radius-2); background: var(--warna-permukaan-2); font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.wk-jadwal__daftar { display: grid; gap: var(--jarak-3); margin: 0; padding: 0; list-style: none; }
.wk-jadwal { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); box-shadow: var(--bayang-1); animation: wk-naik 280ms var(--kurva) both; animation-delay: calc(var(--i) * 50ms); }
.wk-jadwal__tgl { flex: none; display: grid; place-content: center; width: 56px; height: 60px; border-radius: 14px; background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); color: #fff; text-align: center; line-height: 1.1; }
.wk-jadwal__tgl strong { font-size: 22px; }
.wk-jadwal__tgl span { font-size: 12px; text-transform: uppercase; color: var(--emas-400); }
.wk-jadwal__isi { display: grid; gap: 6px; min-width: 0; flex: 1 1 auto; }
.wk-jadwal__atas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.wk-jadwal__kode { font-size: 12px; font-weight: var(--tebal-berat); color: var(--warna-teks-primer); }
.wk-jadwal__judul { margin: 0; font-size: var(--teks-md); font-weight: var(--tebal-tebal); line-height: 1.35; }
.wk-jadwal__meta { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.wk-jadwal__meta svg { flex: none; margin-top: 1px; }
.wk-proses__grup { display: grid; gap: var(--jarak-3); }
.wk-proses { display: grid; gap: var(--jarak-2); }
.wk-proses__judul { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut); }
.wk-proses__daftar { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wk-proses__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; border: 1px solid var(--warna-garis); border-radius: var(--radius-2); background: var(--warna-permukaan); color: inherit; font: inherit; text-align: left; animation: wk-naik 240ms var(--kurva) both; animation-delay: calc(var(--i, 0) * 40ms); }
.wk-proses__item--klik { cursor: pointer; }
.wk-proses__item--klik:hover { border-color: var(--warna-primer-garis); background: var(--warna-primer-lembut); }
.wk-proses__item--klik > svg { flex: none; color: var(--warna-teks-samar); }
.wk-proses__teks { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.wk-proses__teks strong { font-size: var(--teks-sm); color: var(--warna-teks); }

@media (max-width: 559.98px) {
  .wk-aksi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-aksi__kartu:first-child { grid-column: 1 / -1; }
  .wk-tab__item { flex: 1 1 auto; padding: 0 10px; }
  .wk-unit__kepala { grid-template-columns: auto minmax(0, 1fr) auto; }
  .wk-unit__panah { display: none; }
  .wk-wa { max-width: none; }
}

/* --- penyusun pesan WhatsApp --- */
.pwa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jarak-3); }
.pwa-templat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px; }
.pwa-templat__item {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--warna-garis); border-radius: var(--radius-2);
  background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; font-size: var(--teks-sm); text-align: left; cursor: pointer;
  transition: border-color var(--transisi-cepat), background-color var(--transisi-cepat);
}
.pwa-templat__item > span:nth-child(2) { flex: 1 1 auto; }
.pwa-templat__item--aktif { border-color: #25d366; background: color-mix(in srgb, #25d366 10%, var(--warna-permukaan)); font-weight: var(--tebal-tebal); }
.pwa-templat__item:disabled { opacity: .45; cursor: not-allowed; }
.pwa-templat__n { min-width: 22px; padding: 0 6px; border-radius: 99px; background: var(--warna-sorot); font-size: 12px; line-height: 20px; text-align: center; }
.pwa-opsi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-2) var(--jarak-3); }
.pwa-segmen { display: flex; align-items: center; gap: 8px; }
.pwa-segmen__label { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.pwa-segmen__isi { display: inline-flex; padding: 3px; border-radius: var(--radius-2); background: var(--warna-permukaan-2); border: 1px solid var(--warna-garis); }
.pwa-segmen__item { min-height: 38px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--warna-teks-lembut); font: inherit; font-size: var(--teks-sm); cursor: pointer; }
.pwa-segmen__item--aktif { background: var(--warna-permukaan); color: var(--warna-teks); font-weight: var(--tebal-tebal); box-shadow: var(--bayang-1); }
.pwa-unit { min-height: 44px; max-width: 100%; padding: 0 10px; border: 1px solid var(--warna-garis-kuat); border-radius: var(--radius-2); background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; font-size: var(--teks-sm); }
.pwa-centang { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--teks-sm); cursor: pointer; }
.pwa-privasi { display: flex; align-items: flex-start; gap: 6px; flex: 1 1 100%; margin: 0; padding: 8px 10px; border-radius: var(--radius-2); background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); font-size: var(--teks-xs); }
.pwa-privasi svg { flex: none; margin-top: 1px; }
.pwa-teks {
  width: 100%; min-height: 240px; padding: 12px; border: 1px solid var(--warna-garis-kuat); border-radius: var(--radius-3);
  background: color-mix(in srgb, #dcf8c6 35%, var(--warna-permukaan)); color: var(--warna-teks);
  font: inherit; font-size: var(--teks-input); line-height: 1.5; resize: vertical;
}
:root[data-tema="gelap"] .pwa-teks { background: color-mix(in srgb, #005c4b 30%, var(--warna-permukaan)); }
.pwa-teks:focus { outline: 2px solid var(--warna-fokus); outline-offset: 1px; }
.pwa-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.pwa-kosong { margin: 0; padding: 10px 12px; border-radius: var(--radius-2); background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); font-size: var(--teks-sm); }
.pwa-wa { border-color: #25d366; color: #1f9d55; }
.pwa-wa:hover { background: color-mix(in srgb, #25d366 12%, transparent); }
.pwa-salin--ok { animation: pwa-ok 600ms var(--kurva); }
@keyframes pwa-ok { 40% { transform: scale(1.04); } }

@keyframes wk-naik { from { opacity: 0; transform: translateY(8px); } }
@keyframes wk-isi { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .wk-aksi__kartu, .wk-tabisi, .wk-grup, .wk-unit__isi, .wk-kc__baris, .wk-bilah__isi, .wk-siswa, .wk-jadwal, .wk-proses__item, .pwa-salin--ok { animation: none; }
  .wk-aksi__kartu, .wk-aksi__kartu::after, .wk-unit__panah { transition: none; }
}
@media (max-width: 767.98px), (pointer: coarse) {
  .pwa-segmen__item, .wk-tampilan__item, .wk-kelas__cip { min-height: 44px; }
}
/* Kaki lembar pesan WA: dua tombol berbagi lebar, membungkus di layar sangat sempit. */
.sheet:has(.pwa) .sheet__kaki { flex-wrap: wrap; }
.sheet:has(.pwa) .sheet__kaki > .isi-sisa { display: none; }
.sheet:has(.pwa) .sheet__kaki > .tombol { flex: 1 1 140px; min-width: 0; }
.wk-tab__pendek { display: none; }
@media (max-width: 559.98px) {
  .wk-tab__panjang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wk-tab__pendek { display: inline; }
}
.wk-siswatab { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Dasbor pengajar (v2.40.0): tautan ke verifikasi indikator per KC. */
.wk-kc__aksi { display: flex; justify-content: flex-end; }

/* ==========================================================================
   Pantau Anak Saya (v2.41.0) — .ortu-* ; tombol di layar masuk .masuk__ortu
   Halaman publik untuk orang tua. Bahasa visual Pengajar/Siswa (.gb-hero,
   .sh-*, .sp-*): hero navy, kartu putih membulat, aksen emas. Mobile-first:
   huruf ≥ 12px, target sentuh ≥ 44px, jarak kelipatan 4px. Animasi hanya
   transform/opacity dan mati pada prefers-reduced-motion.
   ========================================================================== */
.ortu { max-width: 880px; margin-inline: auto; }

/* --- hero + kotak cari --- */
/* overflow: clip — lingkaran hias .gb-hero::after menjorok keluar; dengan
   hidden, kursor di kotak cari menggulir hero ke samping (isi terpotong). */
.ortu-hero { display: grid; gap: 8px; padding: 24px 16px 20px; overflow: clip; }
@media (min-width: 768px) { .ortu-hero { padding: 32px 28px 26px; } }
.ortu-hero__judul { margin: 0; font-size: clamp(24px, 6.4vw, 32px); font-weight: var(--tebal-berat); line-height: 1.15; letter-spacing: -.015em; color: #fff; }
.ortu-hero__sub { margin: 0 0 8px; max-width: 46ch; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.ortu-cari {
  position: relative; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 6px 0 4px;
  border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(3, 14, 38, .28), 0 0 0 1px rgba(255, 255, 255, .2);
  transition: box-shadow var(--transisi-cepat), transform var(--transisi-cepat);
}
.ortu-cari:focus-within { box-shadow: 0 12px 34px rgba(3, 14, 38, .32), 0 0 0 3px var(--emas-400); }
.ortu-cari__label { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: var(--navy-600); }
.ortu-cari__input {
  flex: 1 1 auto; min-width: 0; height: 52px; border: 0; outline: 0; background: transparent;
  color: var(--navy-900); font: inherit; font-size: 16px; /* 16px: iOS tidak memperbesar saat fokus */
}
.ortu-cari__input::placeholder { color: #6b7590; }
/* Fokus ditandai cincin emas pada .ortu-cari (:focus-within), bukan cincin input global. */
.ortu-cari__input, .ortu-cari__input:focus, .ortu-cari__input:focus-visible { padding: 0 4px; border-radius: 0; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; }
.ortu-cari__input::-webkit-search-cancel-button { display: none; }
.ortu-cari__hapus { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #4b5570; cursor: pointer; }
.ortu-cari__hapus:hover { background: #eef1f7; }
.ortu-cari__putar { flex: none; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; border: 2px solid #d6dbe7; border-top-color: var(--navy-600); animation: pemuat-putar .7s linear infinite; }
.ortu-cari__bantu { margin: 2px 2px 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .72); }

/* --- hasil --- */
.ortu-hasil { display: grid; gap: 10px; }
.ortu-hasil:empty { display: none; }
.ortu-hasil__info { margin: 0; font-size: 13px; line-height: 1.5; color: var(--warna-teks-lembut); }
.ortu-hasil__info strong { color: var(--warna-teks); }
.ortu-hasil__galat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: var(--radius-3);
  background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); font-size: 13px; line-height: 1.45; }
.ortu-hasil__galat > span { flex: 1 1 200px; }
.ortu-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 720px) { .ortu-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ortu-siswa {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border-radius: var(--radius-3);
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks); text-decoration: none;
  box-shadow: var(--bayang-1); animation: sh-naik .32s var(--kurva) both; animation-delay: calc(var(--i, 0) * 40ms);
  transition: border-color var(--transisi-cepat), box-shadow var(--transisi-cepat), transform var(--transisi-cepat);
}
.ortu-siswa:hover { border-color: var(--warna-primer-garis); box-shadow: var(--bayang-2); }
.ortu-siswa:active { transform: scale(.985); }
.ortu-siswa:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.ortu-siswa__avatar {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(140deg, hsl(var(--rona, 220) 62% 46%), hsl(calc(var(--rona, 220) + 40) 62% 38%));
  color: #fff; font-size: 15px; font-weight: var(--tebal-berat); letter-spacing: .02em;
}
.ortu-siswa__teks { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ortu-siswa__nama { font-size: 15px; font-weight: var(--tebal-tebal); line-height: 1.3; overflow-wrap: anywhere; }
.ortu-siswa__meta { font-size: 12px; line-height: 1.4; color: var(--warna-teks-lembut); }
.ortu-siswa__panah { flex: none; color: var(--warna-teks-samar); transition: transform var(--transisi-cepat); }
.ortu-siswa:hover .ortu-siswa__panah { transform: translateX(3px); color: var(--warna-teks-primer); }
.ortu-semua { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; justify-self: center;
  border-radius: var(--radius-penuh); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks-primer);
  font: inherit; font-size: 13px; font-weight: var(--tebal-tebal); cursor: pointer; }
.ortu-semua:hover { border-color: var(--warna-primer); }
.ortu-siswa__nis { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ortu-sorot { padding: 0 1px; border-radius: 3px; background: var(--warna-aksen-lembut); color: inherit; }
.ortu-siswa--bayang { box-shadow: none; }
.ortu-siswa--bayang .ortu-siswa__avatar { background: var(--warna-permukaan-2); }
.ortu-siswa--bayang .skeleton { height: 12px; }
.ortu-siswa--bayang .skeleton + .skeleton { width: 55%; }
.ortu-kosong { display: grid; justify-items: center; gap: 6px; padding: 24px 16px; border-radius: var(--radius-3); border: 1px dashed var(--warna-garis-kuat); text-align: center; }
.ortu-kosong__ikon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--warna-permukaan-2); color: var(--warna-teks-lembut); }
.ortu-kosong__judul { margin: 4px 0 0; font-size: 15px; font-weight: var(--tebal-tebal); }
.ortu-kosong__teks { margin: 0; max-width: 42ch; font-size: 13px; line-height: 1.5; color: var(--warna-teks-lembut); }

/* --- cara memakai --- */
.ortu-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .ortu-langkah { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ortu-langkah__item {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-3);
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: var(--bayang-1);
  animation: sh-naik .42s var(--kurva) both; animation-delay: calc(120ms + var(--i, 0) * 70ms);
}
@media (min-width: 640px) { .ortu-langkah__item { flex-direction: column; align-items: flex-start; } }
.ortu-langkah__ikon { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.ortu-langkah__no { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--emas-500); color: var(--navy-900); font-size: 12px; font-weight: var(--tebal-berat); box-shadow: 0 0 0 2px var(--warna-permukaan); }
.ortu-langkah__teks { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--warna-teks-lembut); }
.ortu-langkah__teks strong { font-size: 15px; color: var(--warna-teks); }

/* --- catatan & kaki --- */
.ortu-catatan { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border-radius: var(--radius-3);
  background: var(--warna-permukaan-2); font-size: 12px; line-height: 1.55; color: var(--warna-teks-lembut); }
.ortu-catatan > svg { flex: none; margin-top: 1px; color: var(--warna-teks-sukses); }
.ortu-masuk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 8px; justify-self: center;
  font-size: 13px; font-weight: var(--tebal-sedang); color: var(--warna-teks-lembut); text-decoration: none; }
.ortu-masuk:hover { color: var(--warna-teks-primer); text-decoration: underline; }
.ortu-kaki { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
.ortu-kaki .tombol { min-height: 44px; }

/* --- laporan: ringkasan kalimat --- */
.ortu .sh-cincin__label, .ortu .sh-judul__jumlah { font-size: 12px; }
.ortu-ringkas { display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: var(--bayang-1); }
.ortu-poin { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ortu-poin__item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--warna-teks);
  animation: sh-naik .4s var(--kurva) both; animation-delay: calc(160ms + var(--i, 0) * 60ms); }
.ortu-poin__ikon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.ortu-poin__item--sukses .ortu-poin__ikon { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.ortu-poin__item--aksen .ortu-poin__ikon { background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }
.ortu-poin__item--peringatan .ortu-poin__ikon { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.ortu-ringkas__waktu { display: flex; align-items: center; gap: 6px; margin: 0; padding-top: 10px; border-top: 1px solid var(--warna-garis); font-size: 12px; color: var(--warna-teks-lembut); }
.ortu-bantu { margin: -4px 0 0; font-size: 13px; line-height: 1.5; color: var(--warna-teks-lembut); }

/* --- saringan --- */
.ortu-saring { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; }
.ortu-saring::-webkit-scrollbar { display: none; }
.ortu-saring__item {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-penuh);
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks-lembut);
  font: inherit; font-size: 13px; font-weight: var(--tebal-sedang); cursor: pointer; white-space: nowrap;
  transition: background var(--transisi-cepat), color var(--transisi-cepat), border-color var(--transisi-cepat);
}
.ortu-saring__item[aria-pressed="true"] { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.ortu-saring__item:disabled { opacity: .45; cursor: default; }
.ortu-saring__n { min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--warna-permukaan-2); color: var(--warna-teks); font-size: 12px; text-align: center; }
.ortu-saring__item[aria-pressed="true"] .ortu-saring__n { background: var(--emas-500); color: var(--navy-900); }
@media (max-width: 767.98px), (pointer: coarse) { .ortu-saring__item { min-height: 44px; } }

/* --- per mapel (akordeon) --- */
.ortu-unit-daftar { display: grid; gap: 10px; }
.ortu-unit { border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: var(--bayang-1); overflow: hidden;
  animation: sh-naik .36s var(--kurva) both; animation-delay: calc(var(--i, 0) * 35ms); }
.ortu-unit__kepala { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 12px 14px; border: 0; background: none; color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer; }
.ortu-unit__kepala:hover { background: var(--warna-permukaan-2); }
.ortu-unit__kepala:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.ortu-unit__cincin {
  --p: 0; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--warna-permukaan) 76%, transparent 78%), conic-gradient(var(--warna-sukses) calc(var(--p) * 1%), var(--warna-sorot) 0);
  font-size: 12px; font-weight: var(--tebal-berat);
}
.ortu-unit__teks { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.ortu-unit__jenis { font-size: 12px; font-weight: var(--tebal-tebal); letter-spacing: .04em; text-transform: uppercase; color: var(--warna-teks-aksen); }
.ortu-unit__nama { font-size: 15px; font-weight: var(--tebal-tebal); line-height: 1.3; overflow-wrap: anywhere; }
.ortu-unit__meta { font-size: 12px; line-height: 1.4; color: var(--warna-teks-lembut); }
.ortu-unit__chevron { flex: none; color: var(--warna-teks-samar); transition: transform var(--transisi); }
.ortu-unit__kepala[aria-expanded="true"] .ortu-unit__chevron { transform: rotate(180deg); }
.ortu-kc { list-style: none; margin: 0; padding: 0 10px 10px; display: grid; gap: 8px; }
.ortu-kc:not([hidden]) { animation: sh-naik .28s var(--kurva) both; }
@media (min-width: 720px) { .ortu-kc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ortu-kcb {
  display: grid; gap: 6px; width: 100%; min-height: 44px; padding: 12px; border-radius: 12px; border: 1px solid var(--warna-garis);
  background: var(--warna-latar); color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--transisi-cepat), transform var(--transisi-cepat);
}
.ortu-kcb:hover { border-color: var(--warna-primer-garis); }
.ortu-kcb:active { transform: scale(.985); }
.ortu-kcb__atas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ortu-kcb__kode { padding: 3px 7px; border-radius: 7px; background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); font-size: 12px; font-weight: var(--tebal-berat); }
.ortu-kcb__medali { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--emas-500); color: var(--navy-900); margin-left: auto; }
.ortu-kcb__judul { font-size: 14px; font-weight: var(--tebal-sedang); line-height: 1.4; }
.ortu-kcb__bilah { display: flex; align-items: center; gap: 10px; }
.ortu-kcb__jalur { position: relative; flex: 1 1 auto; height: 8px; border-radius: 99px; background: var(--warna-sorot); overflow: hidden; }
.ortu-kcb__jalur i { position: absolute; inset: 0; border-radius: inherit; background: var(--warna-sukses); transform-origin: left; transform: scaleX(var(--p, 0));
  animation: ortu-isi .7s var(--kurva) backwards; }
/* Tanpa keyframe "to": akhir animasi = transform elemen sendiri, scaleX(--p)
   (MDN @keyframes). batang-tumbuh berakhir di "transform: none" = penuh. */
@keyframes ortu-isi { from { transform: scaleX(0); } }
.ortu-kcb__angka { flex: none; min-width: 36px; text-align: right; font-size: 12px; font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut); }

/* --- lembar indikator --- */
.ortu-ik { display: grid; gap: 14px; }
.ortu-ik__kepala { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px; border-radius: var(--radius-3); background: var(--warna-permukaan-2); }
.ortu-ik__angka { display: grid; }
.ortu-ik__angka strong { font-size: 22px; line-height: 1.1; }
.ortu-ik__angka span { font-size: 12px; color: var(--warna-teks-lembut); }
.ortu-ik__jalur { grid-column: 1 / -1; }
.ortu-ik__info { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: 13px; line-height: 1.5; }
.ortu-ik__info--sukses { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.ortu-ik__deskripsi { margin: 0; font-size: 13px; line-height: 1.55; color: var(--warna-teks-lembut); }
.ortu-ik__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ortu-ik__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--warna-garis);
  animation: sh-naik .3s var(--kurva) both; animation-delay: calc(var(--i, 0) * 30ms); }
.ortu-ik__item--ya { border-color: color-mix(in srgb, var(--warna-sukses) 40%, var(--warna-garis)); background: color-mix(in srgb, var(--warna-sukses) 7%, var(--warna-permukaan)); }
.ortu-ik__tanda { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--warna-garis-kuat); color: var(--warna-teks-lembut); font-size: 12px; font-weight: var(--tebal-tebal); }
.ortu-ik__item--ya .ortu-ik__tanda { border: 0; background: var(--warna-sukses); color: #fff; animation: lencana-muncul .35s var(--kurva) both; animation-delay: calc(120ms + var(--i, 0) * 30ms); }
.ortu-ik__teks { display: grid; gap: 3px; min-width: 0; }
.ortu-ik__desk { font-size: 14px; line-height: 1.5; }
.ortu-ik__status { font-size: 12px; color: var(--warna-teks-lembut); }
.ortu-ik__item--ya .ortu-ik__status { color: var(--warna-teks-sukses); font-weight: var(--tebal-sedang); }

/* --- kerangka muat --- */
.ortu-kerangka-hero { height: 220px; border-radius: var(--radius-4); }
.ortu-kerangka-kartu { height: 140px; border-radius: var(--radius-3); }
.ortu-kerangka-ik { height: 56px; border-radius: 12px; }

/* --- jalur masuk lainnya di layar masuk (v2.44.0): tiga ubin seragam --- */
.masuk__lain { display: grid; gap: 12px; scroll-margin: 24px; }
.masuk__peran { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.masuk__peran-item {
  display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; min-height: 92px; padding: 12px 6px;
  border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan);
  color: var(--warna-teks); font: inherit; text-align: center; text-decoration: none; cursor: pointer;
  transition: border-color var(--transisi-cepat), box-shadow var(--transisi-cepat), transform var(--transisi-cepat);
}
.masuk__peran-item:hover { box-shadow: var(--bayang-2); transform: translateY(-1px); }
.masuk__peran-item:active { transform: scale(.97); }
.masuk__peran-item:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.masuk__peran-ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; margin-bottom: 2px; transition: transform var(--transisi-cepat); }
.masuk__peran-item:hover .masuk__peran-ikon { transform: scale(1.08); }
.masuk__peran-judul { font-size: 14px; font-weight: var(--tebal-tebal); line-height: 1.25; }
.masuk__peran-sub { font-size: 12px; line-height: 1.3; color: var(--warna-teks-lembut); }
.masuk__peran-item--guru .masuk__peran-ikon { background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.masuk__peran-item--guru:hover { border-color: var(--warna-primer); }
.masuk__peran-item--ortu .masuk__peran-ikon { background: var(--emas-500); color: var(--navy-900); }
.masuk__peran-item--ortu:hover { border-color: var(--emas-500); }
.masuk__peran-item--industri .masuk__peran-ikon { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.masuk__peran-item--industri:hover { border-color: var(--warna-sukses); }
/* Layar sangat sempit (< 360px): tiga kolom ±77px membuat judul terlipat tak
   seragam — ubin menjadi baris ringkas (ikon kiri, judul + keterangan kanan). */
@media (max-width: 359.98px) {
  .masuk__peran { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .masuk__peran-item { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 12px; row-gap: 0;
    min-height: 56px; padding: 8px 12px; text-align: left; }
  .masuk__peran-ikon { grid-row: span 2; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .masuk__peran-item, .masuk__peran-ikon { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .ortu-siswa, .ortu-langkah__item, .ortu-poin__item, .ortu-unit, .ortu-kc, .ortu-ik__item, .ortu-ik__tanda, .ortu-kcb__jalur i { animation: none !important; }
  .ortu-cari__putar { animation-duration: 2s; }
}
.masuk__ortu-pil {
  font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 10px; padding: 0 14px; border-radius: var(--radius-penuh);
  border: 1px solid rgba(232, 184, 76, .55); background: rgba(232, 184, 76, .14); color: #fff;
  font-size: 13px; font-weight: var(--tebal-tebal); text-decoration: none; position: relative; z-index: 1;
  transition: background var(--transisi-cepat), border-color var(--transisi-cepat);
}
.masuk__ortu-pil:hover { background: rgba(232, 184, 76, .26); border-color: var(--emas-400); }
.masuk__ortu-pil > svg:first-child { color: var(--emas-400); }
@media (pointer: coarse) { .masuk__ortu-pil { min-height: 44px; } }
/* Layar lebar: kartu masuk dan ubin "atau masuk sebagai" sudah terlihat berdampingan — pil penunjuk tidak perlu. */
@media (min-width: 900px) { .masuk__ortu-pil { display: none; } }

/* ==========================================================================
   Penguji (v2.43.0) — jadwal, rincian sesi, penilaian. Bahasa visual Pengajar:
   hero navy (.gb-hero/.sh-hero via heroSiswa), kartu putih membulat, aksen
   emas. Huruf ≥ 12px, target ≥ 44px, jarak kelipatan 4px; animasi hanya
   transform/opacity dan mati pada prefers-reduced-motion.
   ========================================================================== */
.pu { gap: 20px; }
.sh-hero__stat-item--bahaya dd { color: #ffb4a8; }
/* Empat angka: 2 × 2 di ponsel, satu baris di layar lebar (bukan 3 + 1). */
.pu .sh-hero__stat:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .pu .sh-hero__stat:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pu-daftar { display: grid; gap: 20px; }
.pu-sesi { animation: sh-naik .34s var(--kurva) both; animation-delay: calc(var(--i, 0) * 40ms); }
.pu-pita__hari { animation: sh-naik .3s var(--kurva) both; animation-delay: calc(var(--i, 0) * 30ms); }
.pu-semua { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; justify-self: start;
  border-radius: var(--radius-penuh); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks-primer);
  font: inherit; font-size: 13px; font-weight: var(--tebal-tebal); cursor: pointer; }

/* "Lanjutkan" di panel atas: satu langkah berikutnya yang paling mendesak. */
.uj-lanjut { min-height: 60px; }
.uj-lanjut > svg:last-child { flex: none; margin-left: auto; opacity: .8; transition: transform var(--transisi-cepat); }
.uj-lanjut:hover > svg:last-child { transform: translateX(3px); }
.uj-lanjut .gb-lanjut__teks { flex: 1 1 auto; }
.uj-lanjut .gb-lanjut__label { font-size: 15px; }
.uj-lanjut .gb-lanjut__isi { font-size: 12px; line-height: 1.45; }
.uj-lanjut--bahaya { box-shadow: inset 0 0 0 1px rgba(255, 140, 120, .55); background: rgba(229, 72, 77, .18); }
.uj-lanjut--bahaya .gb-lanjut__ikon { background: #e5484d; color: #fff; animation: uj-denyut 2s ease-in-out infinite; }
@keyframes uj-denyut { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); } 50% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); } }
.uj-aksi { display: grid; gap: 8px; }
.uj-cetak { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; justify-self: start;
  border-radius: var(--radius-penuh); border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff;
  font: inherit; font-size: 13px; font-weight: var(--tebal-tebal); cursor: pointer; }
.uj-cetak:hover { background: rgba(255, 255, 255, .16); }

/* Fakta sesi: waktu, tempat, penguji, peran. */
.uj-fakta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 8px; }
.uj-fakta__item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: var(--radius-3);
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); box-shadow: var(--bayang-1); }
.uj-fakta__ikon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.uj-fakta__teks { display: grid; min-width: 0; }
.uj-fakta__label { font-size: 12px; color: var(--warna-teks-lembut); }
.uj-fakta__nilai { font-size: 14px; font-weight: var(--tebal-tebal); line-height: 1.35; overflow-wrap: anywhere; }

/* Daftar peserta pada rincian sesi. */
.uj-peserta { list-style: none; margin: 0; padding: 0; display: grid; border-radius: var(--radius-3); border: 1px solid var(--warna-garis); background: var(--warna-permukaan); overflow: hidden; }
.uj-peserta__item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-top: 1px solid var(--warna-garis);
  animation: sh-naik .3s var(--kurva) both; animation-delay: calc(var(--i, 0) * 30ms); }
.uj-peserta__item:first-child { border-top: 0; }
.uj-peserta__no { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--warna-permukaan-2); font-size: 12px; font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut); }
.uj-peserta__teks { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.uj-peserta__nama { font-size: 14px; font-weight: var(--tebal-tebal); line-height: 1.3; overflow-wrap: anywhere; }
.uj-peserta__kelas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--warna-teks-lembut); }
.uj-peserta__item .lencana { flex: none; }
.pu-hasil__item { display: grid; gap: 2px; font-size: 12px; color: var(--warna-teks-lembut); }

/* Lembar daftar hadir: hanya tampil saat dicetak (mode "hadir", cetak.js). */
.uj-hadir { display: none; }

/* --- penilaian --- */
.pn { gap: 14px; }
.pn-atas {
  position: sticky; top: calc(var(--tinggi-appbar) + var(--aman-atas) + 8px); z-index: 5;
  display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius-3);
  border: 1px solid var(--warna-garis); background: color-mix(in srgb, var(--warna-permukaan) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--bayang-2);
}
.pn-atas__baris { display: flex; align-items: center; gap: 10px; }
.pn-atas__teks { flex: 1 1 auto; min-width: 0; }
.pn-atas__kode { margin: 0; font-size: 12px; font-weight: var(--tebal-tebal); letter-spacing: .03em; color: var(--warna-teks-aksen); }
.pn-atas__judul { margin: 0; font-size: 15px; font-weight: var(--tebal-berat); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-atas__ik { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-penuh);
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks-primer); font: inherit; font-size: 13px; font-weight: var(--tebal-tebal); cursor: pointer; }
.pn-atas__ik:hover { border-color: var(--warna-primer); }
@media (max-width: 380px) { .pn-atas__ik-teks { display: none; } }
.pn-atas__hitung { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 12px; color: var(--warna-teks-lembut); }
.pn-titik { width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--warna-sorot); }
.pn-titik:first-child { margin-left: 0; }
.pn-titik--final { background: var(--warna-sukses); }
.pn-titik--draf { background: var(--warna-primer); }
.pn-pulih { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: var(--radius-3);
  background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: 13px; line-height: 1.45; }
.pn-pulih > span { flex: 1 1 180px; }
.pn-pulih__buang { min-height: 36px; padding: 0 12px; border-radius: var(--radius-penuh); border: 1px solid currentColor; background: none; color: inherit; font: inherit; font-size: 12px; font-weight: var(--tebal-tebal); cursor: pointer; }
.pn-alat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pn-alat__cari { flex: 1 1 200px; }
/* minmax(0, 1fr) + min-width 0: deretan catatan cepat (nowrap, gulir mendatar)
   tidak boleh melebarkan kartu — item grid ber-min-width auto ikut isinya. */
.pn-daftar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pn-daftar > *, .pn-catatan, .pn-cepat__daftar { min-width: 0; }
.pn-kosong { margin: 0; padding: 16px; text-align: center; font-size: 13px; color: var(--warna-teks-lembut); }
.pn-peserta { gap: 10px; padding: 12px; animation: sh-naik .3s var(--kurva) both; animation-delay: calc(var(--i, 0) * 30ms); }
.pn-peserta__teks { flex: 1 1 auto; min-width: 0; }
.pn-peserta__nama { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.pn-peserta__kelas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.pn-peserta__belum { flex: none; font-size: 12px; color: var(--warna-teks-lembut); }
.pn-peserta__waktu { margin: 0; font-size: 12px; color: var(--warna-teks-samar); }
.pn-peserta--final { gap: 6px; }
.pn-peserta--ringkas { gap: 6px; padding-block: 10px; }
.pn-pilihan { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-penuh); font-size: 12px; font-weight: var(--tebal-tebal);
  background: var(--warna-permukaan-2); color: var(--warna-teks); animation: lencana-muncul .3s var(--kurva) both; }
.pn-pilihan--sukses { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.pn-pilihan--bahaya { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); }
.pn-pilihan--hantu { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.pn-ringkas__bawah { display: flex; align-items: center; gap: 10px; padding-left: 50px; }
.pn-ringkas__catatan { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--warna-teks-lembut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-ubah { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: var(--radius-penuh);
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks-primer); font: inherit; font-size: 12px; font-weight: var(--tebal-tebal); cursor: pointer; }
/* Empat keputusan: 2 × 2, ikon di kiri — ringkas tetapi tetap target besar. */
.pn-pilih { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .pn-pilih { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pn-pilih .keputusan { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 52px; padding: 8px 12px; text-align: left; font-size: 14px; cursor: pointer; }
.pn-pilih .keputusan:active { transform: scale(.97); }
.pn-pilih .keputusan__ikon { flex: none; display: grid; place-items: center; }
@media (max-width: 767.98px), (pointer: coarse) {
  .pn-ubah, .pn-pulih__buang { min-height: 44px; }
  .pn-cepat { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .pu-sesi, .pu-pita__hari, .uj-peserta__item, .pn-peserta, .pn-pilihan, .uj-lanjut--bahaya .gb-lanjut__ikon { animation: none !important; }
}

/* --- Sertifikat Kompetensi untuk Manajemen (v2.45.0): lencana "Baca saja" --- */
.mnj-sertifikat__baca { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-penuh);
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); color: #fff; font-size: 12px; font-weight: var(--tebal-tebal); white-space: nowrap; }
.mnj-sertifikat .dasbor-mnj__kepala { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.mnj-sertifikat .mdata__grup { font-size: 12px; }
@media (max-width: 767.98px), (pointer: coarse) {
  .mnj-sertifikat :is(.tombol--kecil, .tabeldata__hal) { min-height: 44px; }
  .mnj-sertifikat .tabeldata__hal { min-width: 44px; }
}

/* ==========================================================================
   Beranda Manajemen (v2.46.0) — posisi hari ini (.mposisi) dan ketercapaian
   per kelompok (.mkel, .mbar). Bullet bar (Few): bar = % indikator, pita
   abu-abu bergradasi = zona prioritas/perhatian/baik, garis tegak = batas baik.
   Huruf ≥ 12px, target ≥ 44px; animasi transform/opacity, mati pada
   prefers-reduced-motion.
   ========================================================================== */
.mposisi { display: grid; gap: 14px; padding: 18px; border-radius: var(--radius-4); border: 1px solid var(--warna-garis);
  background: linear-gradient(135deg, color-mix(in srgb, var(--warna-primer) 10%, var(--warna-permukaan)), var(--warna-permukaan) 70%);
  box-shadow: var(--bayang-1); animation: sh-naik .4s var(--kurva) both; }
@media (min-width: 900px) { .mposisi { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; padding: 20px 22px; } }
.mposisi__alis { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 12px; font-weight: var(--tebal-berat); letter-spacing: .06em; text-transform: uppercase; color: var(--warna-teks-aksen); }
.mposisi__utama { margin: 0; font-size: clamp(17px, 4.6vw, 21px); font-weight: var(--tebal-berat); line-height: 1.3; color: var(--warna-teks); }
.mposisi__sub { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--warna-teks-lembut); }
.mposisi__daftar { display: grid; gap: 8px; }
.mposisi__item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: var(--radius-3);
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--transisi-cepat), transform var(--transisi-cepat); }
.mposisi__item:hover { border-color: var(--warna-primer-garis); transform: translateX(2px); }
.mposisi__item > svg:last-child { flex: none; margin-left: auto; color: var(--warna-teks-samar); }
.mposisi__ikon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--warna-permukaan-2); color: var(--warna-teks-lembut); }
.mposisi__item--sukses .mposisi__ikon { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.mposisi__item--aksen .mposisi__ikon { background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); }
.mposisi__item--peringatan .mposisi__ikon { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.mposisi__teks { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.mposisi__angka { font-size: 20px; line-height: 1.1; }
.mposisi__label { font-size: 13px; color: var(--warna-teks-lembut); }

/* Item grid dasbor tidak boleh melebar mengikuti isinya (mis. peta panas yang
   punya wadah gulirnya sendiri) — sebelumnya seluruh halaman bergeser di HP. */
.dasbor-mnj > *, .dasbor-mnj__panel, .dasbor-mnj__panel > * { min-width: 0; }
.dasbor-mnj__bagian-kepala select { max-width: 100%; min-width: 0; }
.mkel-wadah { container-type: inline-size; }
/* Flex-wrap (v2.47.0): 1 kolom (sempit) → 2 kolom, kartu sisa merentang (sedang)
   → 3 kolom (lebar). Kartu yang difokuskan pada satu unit merentang penuh dan
   naik ke urutan pertama; kartu lain berbagi baris di bawahnya tanpa celah. */
.mkel { display: flex; flex-wrap: wrap; gap: 14px; }
.mkel > .mkel__kartu { flex: 1 1 290px; }
.mkel > .mkel__kartu--fokus { flex-basis: 100%; order: -1; }
.mkel__kartu { --aksen: var(--warna-primer); --aksen-lembut: var(--warna-primer-lembut);
  display: grid; align-content: start; gap: 14px; min-width: 0; padding: 14px; scroll-margin-top: 72px; border-radius: var(--radius-3);
  border: 1px solid var(--warna-garis); border-top: 3px solid var(--aksen); background: var(--warna-permukaan); box-shadow: var(--bayang-1);
  animation: sh-naik .42s var(--kurva) both; animation-delay: calc(var(--i, 0) * 70ms); }
.mkel__kartu--mapel { --aksen: var(--emas-500); --aksen-lembut: var(--warna-aksen-lembut); }
.mkel__kartu--divisi { --aksen: var(--warna-sukses); --aksen-lembut: var(--warna-sukses-lembut); }
.mkel__kepala { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer; }
.mkel__kepala > svg:last-child { flex: none; margin-left: auto; color: var(--warna-teks-samar); transition: transform var(--transisi-cepat); }
.mkel__kepala:hover > svg:last-child { transform: translateX(3px); }
.mkel__ikon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--aksen-lembut); color: var(--aksen); }
.mkel__kartu--mapel .mkel__ikon { color: var(--warna-teks-aksen); }
.mkel__kartu--divisi .mkel__ikon { color: var(--warna-teks-sukses); }
.mkel__judul { display: grid; min-width: 0; }
.mkel__nama { font-size: 16px; font-weight: var(--tebal-berat); line-height: 1.25; }
.mkel__meta { font-size: 12px; color: var(--warna-teks-lembut); }
.mkel__utama { display: flex; align-items: center; gap: 14px; }
.mkel__cincin { position: relative; flex: none; width: 64px; height: 64px; }
.mkel__cincin-svg { width: 100%; height: 100%; }
.mkel__cincin-jalur { fill: none; stroke: var(--warna-sorot); stroke-width: 7; }
.mkel__cincin-busur { fill: none; stroke: var(--aksen); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1s var(--kurva); }
.mkel__cincin-angka { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: var(--tebal-berat); }
.mkel__angka { display: grid; gap: 2px; min-width: 0; }
.mkel__besar { margin: 0; font-size: 13px; color: var(--warna-teks-lembut); }
.mkel__besar strong { font-size: 20px; color: var(--warna-teks); }
.mkel__kecil { margin: 0; font-size: 12px; color: var(--warna-teks-lembut); }
/* Alur mini: empat tahap berderet, angka tahap yang sudah terisi berwarna aksen. */
.mkel__alur { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; border-radius: 12px; background: var(--warna-permukaan-2); }
.mkel__langkah { position: relative; display: grid; justify-items: center; gap: 1px; text-align: center; }
.mkel__langkah strong { font-size: 16px; line-height: 1.2; color: var(--warna-teks-samar); }
.mkel__langkah--isi strong { color: var(--warna-teks); }
.mkel__langkah span { font-size: 12px; color: var(--warna-teks-lembut); }
.mkel__langkah i { position: absolute; right: -6px; top: 6px; width: 7px; height: 7px; border-top: 1.5px solid var(--warna-teks-samar); border-right: 1.5px solid var(--warna-teks-samar); transform: rotate(45deg); }
.mkel__unit { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mkel__lagi { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-penuh);
  background: none; color: var(--warna-teks-primer); font: inherit; font-size: 13px; font-weight: var(--tebal-tebal); cursor: pointer; }
.mkel__lagi:hover { background: var(--warna-permukaan-2); }
.mkel__kosong { margin: 0; font-size: 13px; color: var(--warna-teks-lembut); }
.mkel__belum { display: grid; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--warna-garis); }
.mkel__belum-label { font-size: 12px; font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut); }
.mkel__cip-daftar { display: flex; flex-wrap: wrap; gap: 6px; }
.mkel__cip { min-height: 32px; padding: 0 10px; border-radius: var(--radius-penuh); border: 1px solid var(--warna-garis); background: var(--warna-permukaan-2);
  color: var(--warna-teks-lembut); font: inherit; font-size: 12px; font-weight: var(--tebal-tebal); cursor: pointer; }
.mkel__cip:hover { border-color: var(--warna-garis-kuat); color: var(--warna-teks); }
.mkel__siap { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 0;
  background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen); font: inherit; font-size: 13px; font-weight: var(--tebal-tebal); text-align: left; cursor: pointer; }
/* Bullet bar satu mapel/divisi. */
.mbar { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) 3.4rem; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 6px;
  border: 0; border-radius: 10px; background: none; color: var(--warna-teks); font: inherit; text-align: left; cursor: pointer;
  animation: sh-naik .32s var(--kurva) both; animation-delay: calc(200ms + var(--i, 0) * 40ms); }
.mbar:hover { background: var(--warna-permukaan-2); }
.mbar__nama { display: grid; min-width: 0; line-height: 1.25; }
.mbar__nama strong { font-size: 13px; }
.mbar__panjang { font-size: 12px; color: var(--warna-teks-lembut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbar__jalur { position: relative; height: 14px; border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--warna-teks) 16%, transparent) 0 var(--prioritas),
    color-mix(in srgb, var(--warna-teks) 10%, transparent) var(--prioritas) var(--perhatian),
    color-mix(in srgb, var(--warna-teks) 5%, transparent) var(--perhatian) 100%); }
.mbar__isi { position: absolute; left: 0; right: 0; top: 4px; bottom: 4px; border-radius: 2px; background: var(--aksen); transform-origin: left; transform: scaleX(var(--p, 0));
  animation: mbar-isi .8s var(--kurva) backwards; animation-delay: calc(260ms + var(--i, 0) * 40ms); }
/* Tanpa keyframe "to": akhir animasi = scaleX(--p) milik elemen (bukan penuh). */
@keyframes mbar-isi { from { transform: scaleX(0); } }
.mbar__target { position: absolute; top: -2px; bottom: -2px; left: var(--perhatian); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--warna-teks); opacity: .7; }
.mbar__nilai { text-align: right; font-size: 13px; font-weight: var(--tebal-tebal); }
/* Kartu sempit (HP): nama + persen di atas, bar selebar kartu di bawah — jalur
   tidak menyusut menjadi ±80px sehingga perbedaan antarmapel tetap terbaca. */
.mkel__kartu { container: mkelkartu / inline-size; }
/* Tanpa nama: berlaku terhadap wadah terdekat — kartu (ringkas) atau blok
   dalam tampilan fokus — sehingga bar di kolom sempit ikut bertumpuk. */
@container (max-width: 380px) {
  .mbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nama nilai" "jalur jalur"; row-gap: 6px; padding-block: 6px; }
  .mbar__nama { grid-area: nama; display: flex; align-items: baseline; gap: 6px; }
  .mbar__nama strong { flex: none; }
  .mbar__jalur { grid-area: jalur; }
  .mbar__nilai { grid-area: nilai; }
}
@media (max-width: 767.98px), (pointer: coarse) { .mkel__lagi, .mkel__cip, .mkel__siap { min-height: 44px; } .mnj .mnj-info { width: 44px; height: 44px; } }

/* --------------------------------------------------------------------------
   Pemilih unit & tampilan fokus satu jurusan/mapel/divisi (v2.47.0).
   Urutan baca: posisi (vonis + angka) → alur → langkah yang disarankan →
   per kelas & per KC (paling tertinggal dulu) → siapa & kapan.
   -------------------------------------------------------------------------- */
.mkel__saring { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mkel__saring-ikon { flex: none; display: grid; place-items: center; color: var(--warna-teks-samar); }
.mkel__pilih { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; padding-block: 8px; border-radius: 12px; font-weight: var(--tebal-tebal);
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.mkel__kartu--fokus .mkel__pilih { border-color: var(--aksen); background-color: color-mix(in srgb, var(--aksen) 8%, var(--warna-permukaan)); }
.mkel__tutup { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--warna-garis);
  background: var(--warna-permukaan); color: var(--warna-teks-lembut); transition: border-color var(--transisi-cepat), color var(--transisi-cepat); }
.mkel__tutup:hover { border-color: var(--warna-garis-kuat); color: var(--warna-teks); }
.mkel__tutup[hidden] { display: none; }
.mkel__badan, .mkel__ringkas { display: grid; align-content: start; gap: 14px; min-width: 0; }
.mbar__nilai--bahaya { color: var(--warna-teks-bahaya); }
.mbar__nilai--peringatan { color: var(--warna-teks-peringatan); }

.mfokus { display: grid; gap: 16px; min-width: 0; animation: sh-naik .35s var(--kurva) both; }
.mfokus__atas { display: grid; gap: 14px; }
.mfokus__id { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.mfokus__judul { display: grid; gap: 4px; min-width: 0; }
.mfokus__kode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: var(--tebal-berat); letter-spacing: .04em; color: var(--warna-teks-lembut); }
.mfokus__nama { margin: 0; font-size: clamp(17px, 4.4vw, 20px); line-height: 1.25; overflow-wrap: anywhere; }
.mfokus__vonis { margin: 0; font-size: 14px; line-height: 1.5; }
.mfokus__peringkat { margin: 0; font-size: 12px; color: var(--warna-teks-lembut); }
.mfokus__angka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mfokus__ubin { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--warna-permukaan-2); }
.mfokus__ubin-label, .mfokus__ubin-sub { font-size: 12px; line-height: 1.35; color: var(--warna-teks-lembut); }
.mfokus__ubin-nilai { font-size: 20px; line-height: 1.2; }
.mfokus__ubin--sukses .mfokus__ubin-nilai { color: var(--warna-teks-sukses); }
.mfokus__ubin--peringatan { background: var(--warna-peringatan-lembut); }
.mfokus__ubin--peringatan .mfokus__ubin-nilai { color: var(--warna-teks-peringatan); }
.mfokus__tiga { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mfokus__blok { container-type: inline-size; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 12px; border-radius: 12px; border: 1px solid var(--warna-garis); }
.mfokus__h { margin: 0; font-size: 14px; font-weight: var(--tebal-berat); }
.mfokus__ket { margin: -6px 0 0; font-size: 12px; color: var(--warna-teks-lembut); }
.mlangkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mlangkah__item { --nada: var(--warna-primer); --nada-lembut: var(--warna-primer-lembut); --nada-teks: var(--warna-teks-primer);
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; border-left: 3px solid var(--nada);
  background: var(--warna-permukaan-2); font-size: 14px; line-height: 1.45; }
.mlangkah__item--bahaya { --nada: var(--warna-bahaya); --nada-lembut: var(--warna-bahaya-lembut); --nada-teks: var(--warna-teks-bahaya); }
.mlangkah__item--peringatan { --nada: var(--warna-peringatan); --nada-lembut: var(--warna-peringatan-lembut); --nada-teks: var(--warna-teks-peringatan); }
.mlangkah__item--sukses { --nada: var(--warna-sukses); --nada-lembut: var(--warna-sukses-lembut); --nada-teks: var(--warna-teks-sukses); }
.mlangkah__ikon { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nada-lembut); color: var(--nada-teks); }
.mfokus__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.mfokus__info-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--warna-garis); }
.mfokus__info-ikon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--aksen-lembut); color: var(--aksen); }
.mkel__kartu--mapel .mfokus__info-ikon { color: var(--warna-teks-aksen); }
.mkel__kartu--divisi .mfokus__info-ikon { color: var(--warna-teks-sukses); }
.mfokus__info-item--peringatan .mfokus__info-ikon { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.mfokus__info-item--bahaya .mfokus__info-ikon { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); }
.mfokus__info-teks { display: grid; min-width: 0; }
.mfokus__info-label, .mfokus__info-sub { font-size: 12px; line-height: 1.35; color: var(--warna-teks-lembut); }
.mfokus__info-nilai { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.mfokus__aksi { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@container mkelkartu (min-width: 520px) and (max-width: 719.98px) { .mfokus__angka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container mkelkartu (min-width: 640px) {
  .mfokus__tiga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mfokus__tiga > :first-child { grid-column: 1 / -1; }
}
@container mkelkartu (min-width: 720px) { .mfokus__atas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
@container mkelkartu (min-width: 1040px) {
  .mfokus__angka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mfokus__tiga { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .mfokus__tiga > :first-child { grid-column: auto; }
}
@container mkelkartu (max-width: 380px) { .mfokus__aksi > * { flex: 1 1 100%; } }
/* Blok fokus: bar bertumpuk sampai 520px agar keterangan (siswa, judul KC) tidak terpotong. */
@container (max-width: 520px) {
  .mfokus__blok .mbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nama nilai" "jalur jalur"; row-gap: 6px; padding-block: 6px; }
  .mfokus__blok .mbar__nama { grid-area: nama; display: flex; align-items: baseline; gap: 6px; }
  .mfokus__blok .mbar__nama strong { flex: none; }
  .mfokus__blok .mbar__jalur { grid-area: jalur; }
  .mfokus__blok .mbar__nilai { grid-area: nilai; }
}
/* Pindah kartu (melebar/kembali) dianimasikan View Transitions bila tersedia. */
::view-transition-group(mkel-konsentrasi), ::view-transition-group(mkel-mapel), ::view-transition-group(mkel-divisi) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  .mposisi, .mkel__kartu, .mbar, .mbar__isi, .mfokus { animation: none !important; }
  .mkel__cincin-busur { transition: none; }
}

/* Tampilan baca saja (v2.48.0): Manajemen di tampilan LSP. Kontrol tulis
   (tombol({tulis:true}) atau kelas .hanya-tulis) tidak ditampilkan; server
   tetap menolak tulis apa pun dari tampilan ini. */
body[data-baca-saja] .hanya-tulis { display: none !important; }

/* Kartu pengajuan siswa ringkas (v2.49.0). */
.spj { display: grid; gap: 12px; min-width: 0; }
.spj__kepala { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.spj__kode { font-size: 12px; color: var(--warna-teks-samar); font-family: var(--font-mono, inherit); }
.spj__judul { font-size: 15px; font-weight: var(--tebal-tebal); line-height: 1.35; overflow-wrap: anywhere; }
.spj__info { list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; border-radius: var(--radius-2);
  background: var(--warna-permukaan-2); font-size: 13px; color: var(--warna-teks-lembut); }
.spj__info li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.spj__info li > span { min-width: 0; overflow-wrap: anywhere; }
.spj__info svg { flex: none; color: var(--warna-teks-samar); }
.spj__info-utama { color: var(--warna-teks); font-weight: var(--tebal-sedang); }
.spj__hasil { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-2); font-size: 13px; line-height: 1.45; }
.spj__hasil > svg { flex: none; margin-top: 1px; }
.spj__hasil--sukses { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses); }
.spj__hasil--peringatan { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }
.spj__hasil--bahaya { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); }
.spj__catatan { margin: 2px 0 0; color: var(--warna-teks); overflow-wrap: anywhere; }
.spj__catatan--samar { color: var(--warna-teks-lembut); font-size: 12px; }
.spj__aksi { display: flex; justify-content: flex-end; }
.daftar-halaman { display: grid; gap: var(--jarak-3); min-width: 0; }

/* Riwayat penguji: bulan lama dilipat (v2.49.0). */
.pu-lipat > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: var(--radius-3);
  border: 1px solid var(--warna-garis); background: var(--warna-permukaan); list-style: none; cursor: pointer; font-weight: var(--tebal-tebal); }
.pu-lipat > summary::-webkit-details-marker { display: none; }
.pu-lipat > summary svg { transition: transform var(--transisi-cepat); color: var(--warna-teks-samar); }
.pu-lipat[open] > summary { margin-bottom: 10px; }
.pu-lipat[open] > summary svg { transform: rotate(180deg); }
/* Kartu tabelData di HP (v2.49.0): judul minimal ±13rem; deretan aksi yang
   tidak muat turun ke baris sendiri, rata kanan — tidak lagi menjepit judul. */
.tabeldata__kepala-kartu { flex-wrap: wrap; row-gap: 6px; }
.tabeldata__kepala-kartu > .isi-sisa { flex: 1 1 13rem; min-width: 0; }
.tabeldata__kepala-kartu > :not(.isi-sisa) { margin-left: auto; }


/* =====================================================================
   Keaktifan Siswa (v2.55.0) — wali kelas & pengajar. Tema beranda guru (.gb).
   ===================================================================== */
.akt-nada--sukses { --n: var(--warna-sukses); --n-l: var(--warna-sukses-lembut); }
.akt-nada--info { --n: var(--warna-info, var(--warna-primer)); --n-l: var(--warna-info-lembut, var(--warna-primer-lembut)); }
.akt-nada--peringatan { --n: var(--warna-peringatan); --n-l: var(--warna-peringatan-lembut); }
.akt-nada--bahaya { --n: var(--warna-bahaya); --n-l: var(--warna-bahaya-lembut); }
.akt-nada--netral { --n: var(--abu-400, #9aa7b6); --n-l: var(--warna-sorot); }

.akt { display: flex; flex-direction: column; gap: var(--jarak-3); }

/* hero */
.akt-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--jarak-4); }
.akt-hero__teks { min-width: 0; }
.akt-hero__stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--jarak-3); }
.akt-stat {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 8px 12px;
  border: 0; border-radius: var(--radius-3); background: rgba(255, 255, 255, .1); color: #fff; font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: background var(--transisi-cepat), transform var(--transisi-cepat);
}
.akt-stat:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.akt-stat:focus-visible { outline: 2px solid var(--emas-400, #f0c45c); outline-offset: 2px; }
.akt-stat__angka { font-size: var(--teks-lg); font-weight: var(--tebal-berat); line-height: 1.1; }
.akt-stat__label { font-size: 11px; color: rgba(255, 255, 255, .78); }
.akt-stat--sukses .akt-stat__angka { color: #8be0b3; }
.akt-stat--peringatan .akt-stat__angka { color: #ffd479; }
.akt-stat--bahaya .akt-stat__angka { color: #ffb4a8; }
.akt-hero__aksi { display: flex; align-items: center; gap: 8px; margin-top: var(--jarak-3); }
.akt-segar {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.akt-segar:hover { background: rgba(255, 255, 255, .2); }
.akt-segar--putar svg { animation: akt-putar .9s linear infinite; }

/* cincin status */
.akt-donat { position: relative; width: 136px; height: 136px; flex: none; }
.akt-donat__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.akt-donat__dasar { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 14; }
.akt-donat__ruas { fill: none; stroke: var(--n); stroke-width: 14; stroke-linecap: butt; transition: stroke-dasharray 1s var(--kurva, cubic-bezier(.2, .8, .2, 1)); }
.akt-donat__ruas.akt-nada--netral { stroke: rgba(255, 255, 255, .38); }
.akt-donat__tengah { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.akt-donat__persen { font-size: 26px; font-weight: var(--tebal-berat); line-height: 1; }
.akt-donat__label { margin-top: 2px; font-size: 10.5px; color: rgba(255, 255, 255, .75); }

/* pilih kelas */
.akt-kelas {
  display: flex; gap: 8px; margin: 0 calc(-1 * var(--jarak-1)); padding: 2px var(--jarak-1) 6px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.akt-kelas__item {
  display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; width: 150px; padding: 10px 12px; scroll-snap-align: start;
  border: 1.5px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); color: var(--warna-teks);
  font: inherit; text-align: left; cursor: pointer; transition: border-color var(--transisi-cepat), transform var(--transisi-cepat), box-shadow var(--transisi-cepat);
}
.akt-kelas__item:hover { transform: translateY(-1px); box-shadow: var(--bayang-1); }
.akt-kelas__item--aktif { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
.akt-kelas__nama { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akt-kelas__bilah { height: 5px; border-radius: 99px; background: var(--warna-sorot); overflow: hidden; }
.akt-kelas__bilah i { display: block; height: 100%; border-radius: inherit; background: var(--warna-sukses); transform-origin: left; animation: akt-tumbuh .7s var(--kurva, ease) both; }
.akt-kelas__meta { font-size: 11px; color: var(--warna-teks-lembut); white-space: nowrap; }

/* alat: cip status, cari, urut */
.akt-alat { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 72px; }
.akt-cip { display: flex; flex-wrap: wrap; gap: 6px; }
.akt-cip__item {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--warna-garis);
  border-radius: 99px; background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; font-size: var(--teks-sm); cursor: pointer;
  transition: background var(--transisi-cepat), border-color var(--transisi-cepat);
}
.akt-cip__item:hover:not(:disabled) { border-color: var(--n); }
.akt-cip__item--aktif { border-color: var(--n); background: var(--n-l); font-weight: var(--tebal-tebal); }
.akt-cip__item.akt-nada--netral.akt-cip__item--aktif { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
.akt-cip__item:disabled { opacity: .45; cursor: default; }
.akt-cip__titik { width: 8px; height: 8px; border-radius: 50%; background: var(--n); }
.akt-cip__n { min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--warna-sorot); font-size: 11.5px; line-height: 18px; text-align: center; }
.akt-alat__baris { display: flex; gap: 8px; }
.akt-cari { position: relative; flex: 1 1 auto; min-width: 0; }
.akt-cari__ikon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--warna-teks-samar); display: flex; }
.akt-cari__input, .akt-urut {
  width: 100%; min-height: 42px; border: 1px solid var(--warna-garis-kuat); border-radius: var(--radius-2);
  background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; font-size: var(--teks-input);
}
.akt-cari__input { padding: 0 12px 0 36px; }
.akt-urut { flex: 0 0 auto; width: auto; max-width: 46%; padding: 0 10px; font-size: var(--teks-sm); }

/* daftar siswa */
.akt-daftar-wadah { transition: opacity var(--transisi-cepat); }
.akt-daftar-wadah--muat { opacity: .55; pointer-events: none; }
.akt-daftar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 720px) { .akt-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .akt-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.akt-siswa {
  display: flex; min-width: 0; overflow: hidden; border: 1px solid var(--warna-garis); border-radius: var(--radius-3);
  background: var(--warna-permukaan); box-shadow: inset 3px 0 0 var(--n); transition: box-shadow var(--transisi-cepat), transform var(--transisi-cepat);
}
.akt-siswa:hover { transform: translateY(-1px); box-shadow: inset 3px 0 0 var(--n), var(--bayang-1); }
.akt-siswa--masuk { animation: wk-naik .38s var(--kurva, ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
.akt-siswa__buka {
  display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 12px 12px 12px 14px;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.akt-siswa__buka:focus-visible, .akt-siswa__wa:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.akt-avatar {
  position: relative; display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--n-l); color: var(--warna-teks); font-size: 13px; font-weight: var(--tebal-tebal); box-shadow: 0 0 0 2px var(--n);
}
.akt-nada--netral .akt-avatar, .akt-avatar.akt-nada--netral { box-shadow: 0 0 0 2px var(--warna-garis-kuat); background: var(--warna-permukaan-2); color: var(--warna-teks-lembut); }
.akt-avatar--denyut::after {
  content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--warna-sukses); box-shadow: 0 0 0 2px var(--warna-permukaan); animation: akt-denyut 2s ease-out infinite;
}
.akt-siswa__isi { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.akt-siswa__nama { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); }
.akt-siswa__waktu { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.akt-siswa__lalu { white-space: nowrap; }
.akt-segar-bilah { display: block; height: 4px; border-radius: 99px; background: var(--warna-sorot); overflow: hidden; }
.akt-segar-bilah i { display: block; height: 100%; width: calc(var(--isi, 0) * 100%); border-radius: inherit; background: var(--n); transform-origin: left; animation: akt-tumbuh .8s var(--kurva, ease) both; }
.akt-siswa__sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--warna-teks-samar); }
.akt-siswa__wa {
  position: relative; display: grid; place-items: center; flex: none; width: 52px; border: 0; border-left: 1px solid var(--warna-garis);
  background: none; color: #1f9d55; cursor: pointer;
}
.akt-siswa__wa:hover { background: color-mix(in srgb, #25d366 12%, transparent); }
.akt-siswa__wa-titik { position: absolute; top: 14px; right: 13px; width: 8px; height: 8px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 2px var(--warna-permukaan); }
.akt-kosong { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--jarak-5); color: var(--warna-teks-lembut); text-align: center; }

/* catatan */
.akt-catatan { border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); }
.akt-catatan summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-size: var(--teks-sm); color: var(--warna-teks-lembut); cursor: pointer; }
.akt-catatan ul { margin: 0; padding: 0 16px 12px 34px; font-size: var(--teks-xs); color: var(--warna-teks-lembut); line-height: var(--tinggi-baris); }

@keyframes akt-tumbuh { from { transform: scaleX(0); } }
@keyframes akt-denyut { 0% { box-shadow: 0 0 0 2px var(--warna-permukaan), 0 0 0 0 color-mix(in srgb, var(--warna-sukses) 55%, transparent); }
  70% { box-shadow: 0 0 0 2px var(--warna-permukaan), 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 2px var(--warna-permukaan), 0 0 0 0 transparent; } }
@keyframes akt-putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .akt-siswa--masuk, .akt-kelas__bilah i, .akt-segar-bilah i, .akt-avatar--denyut::after, .akt-segar--putar svg { animation: none; }
  .akt-donat__ruas { transition: none; }
}
@media (max-width: 559.98px) {
  .akt-hero { grid-template-columns: minmax(0, 1fr); }
  .akt-donat { position: absolute; top: var(--jarak-4); right: var(--jarak-3); width: 84px; height: 84px; }
  .akt-donat__persen { font-size: 18px; }
  .akt-donat__label { font-size: 9px; }
  .akt-hero__teks { padding-right: 92px; }
  .akt-hero__stats { margin-right: -92px; }
  .akt-hero__stats .akt-stat { flex: 1 1 0; }
  .akt-hero__aksi { margin-right: -92px; }
  .akt-hero__aksi .tombol { flex: 1 1 auto; }
}
@media (max-width: 767.98px), (pointer: coarse) {
  .akt-cip__item { min-height: 40px; }
}
@media (max-width: 767.98px) {
  /* Satu baris yang dapat digeser: status tidak memakan tiga baris layar HP. */
  .akt-cip { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--jarak-1)); padding: 2px var(--jarak-1) 4px; scrollbar-width: none; }
  .akt-cip::-webkit-scrollbar { display: none; }
  .akt-cip__item { flex: 0 0 auto; }
}

/* =====================================================================
   Kotak Masuk PIC — jadwal & penguji (v2.56.0)
   ===================================================================== */
.kmasuk__filter > .kmasuk__penguji { flex: 1 1 180px; min-width: 0; margin: 0; }
.kmasuk__uji { display: flex; flex-direction: column; min-width: 0; color: var(--warna-teks-lembut); }

.jpic-alat { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: var(--jarak-2); }
.jpic-rentang { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.jpic-rentang::-webkit-scrollbar { display: none; }
.jpic-rentang__item {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--warna-garis); border-radius: 99px; background: var(--warna-permukaan); color: var(--warna-teks);
  font: inherit; font-size: var(--teks-sm); cursor: pointer; transition: border-color var(--transisi-cepat), background var(--transisi-cepat);
}
.jpic-rentang__item:hover:not(:disabled) { border-color: var(--warna-primer); }
.jpic-rentang__item--aktif { border-color: var(--warna-primer); background: var(--warna-primer-lembut); font-weight: var(--tebal-tebal); }
.jpic-rentang__item--bahaya .jpic-rentang__n { background: var(--warna-bahaya); color: #fff; }
.jpic-rentang__item:disabled { opacity: .45; cursor: default; }
.jpic-rentang__n { min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--warna-sorot); font-size: 11.5px; line-height: 18px; text-align: center; }

.jpic-ingat {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 8px; padding: 10px 12px; border: 0; border-radius: var(--radius-3);
  font: inherit; font-size: var(--teks-sm); text-align: left;
}
.jpic-ingat > span { flex: 1 1 auto; min-width: 0; }
.jpic-ingat--bahaya { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya, var(--warna-bahaya)); cursor: pointer; }
.jpic-ingat--bahaya:hover { filter: brightness(.98); }
.jpic-ingat--peringatan { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); }

.jpic { display: flex; flex-direction: column; gap: var(--jarak-4); transition: opacity var(--transisi-cepat); }
.jpic-muat { opacity: .55; pointer-events: none; }
.jpic-kel__judul { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: var(--teks-xs);
  font-weight: var(--tebal-tebal); text-transform: uppercase; letter-spacing: .05em; color: var(--warna-teks-lembut); }
.jpic-kel--lewat .jpic-kel__judul { color: var(--warna-teks-bahaya, var(--warna-bahaya)); }
.jpic-kel--hari_ini .jpic-kel__judul { color: var(--warna-teks-aksen, var(--warna-aksen)); }
.jpic-kel__n { flex: none; white-space: nowrap; font-weight: var(--tebal-sedang); text-transform: none; letter-spacing: 0; color: var(--warna-teks-samar); }
.jpic-kel__isi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 1080px) { .jpic-kel__isi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.jpic-kartu {
  --n: var(--warna-primer); --n-l: var(--warna-primer-lembut);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; min-width: 0; overflow: hidden;
  border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan);
  transition: box-shadow var(--transisi-cepat), transform var(--transisi-cepat);
}
.jpic-kartu:hover { box-shadow: var(--bayang-1); }
.jpic-kartu--aksen { --n: var(--warna-aksen); --n-l: var(--warna-aksen-lembut); }
.jpic-kartu--peringatan { --n: var(--warna-peringatan); --n-l: var(--warna-peringatan-lembut); }
.jpic-kartu--bahaya { --n: var(--warna-bahaya); --n-l: var(--warna-bahaya-lembut); }
.jpic-kartu--masuk { animation: wk-naik .36s var(--kurva, ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
.jpic-kartu__tgl {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; padding: 10px 4px;
  background: var(--n-l); color: var(--warna-teks); border-right: 1px solid var(--warna-garis); text-align: center;
}
.jpic-kartu__hari { font-size: 11px; font-weight: var(--tebal-tebal); text-transform: uppercase; color: var(--warna-teks-lembut); }
.jpic-kartu__angka { font-size: 24px; font-weight: var(--tebal-berat); line-height: 1.05; color: var(--n); }
.jpic-kartu__bulan { font-size: 11px; color: var(--warna-teks-lembut); }
.jpic-kartu--aksen .jpic-kartu__tgl { position: relative; }
.jpic-kartu--aksen .jpic-kartu__tgl::after {
  content: ''; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--warna-aksen);
  animation: jpic-denyut 2s ease-out infinite;
}
.jpic-kartu__isi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; }
.jpic-kartu__kepala { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.jpic-kartu__judul { margin: 0; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jpic-fakta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.jpic-fakta li { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.jpic-fakta svg { flex: none; color: var(--warna-teks-samar); }
.jpic-fakta--kurang { color: var(--warna-teks-bahaya, var(--warna-bahaya)); font-weight: var(--tebal-tebal); }

.jpic-peserta { border-top: 1px dashed var(--warna-garis); margin-top: 2px; }
.jpic-peserta summary {
  display: flex; align-items: center; gap: 6px; min-height: 36px; list-style: none; cursor: pointer;
  font-size: var(--teks-xs); color: var(--warna-teks); font-weight: var(--tebal-sedang);
}
.jpic-peserta summary::-webkit-details-marker { display: none; }
.jpic-peserta__kelas { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--warna-teks-lembut); font-weight: normal; }
.jpic-peserta__panah { display: flex; transition: transform var(--transisi-cepat); color: var(--warna-teks-samar); }
.jpic-peserta[open] .jpic-peserta__panah { transform: rotate(180deg); }
.jpic-peserta__isi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; padding: 4px 0 8px; }
.jpic-peserta[open] .jpic-peserta__isi { animation: wk-naik .25s var(--kurva, ease) both; }
.jpic-peserta__grup { padding: 8px 10px; border-radius: var(--radius-2); background: var(--warna-permukaan-2); }
.jpic-peserta__judul { display: flex; justify-content: space-between; gap: 6px; margin: 0 0 4px; font-size: var(--teks-xs); font-weight: var(--tebal-tebal); }
.jpic-peserta__judul .angka { color: var(--warna-teks-samar); font-weight: normal; }
.jpic-peserta__daftar { margin: 0; padding-left: 22px; list-style: decimal; font-size: var(--teks-xs); line-height: 1.6; }
.jpic-peserta__daftar li { padding-left: 2px; }
.jpic-peserta__daftar li > * { vertical-align: middle; }
.jpic-peserta__daftar .lencana { margin-left: 4px; font-size: 10px; }

.jpic-wa {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 64px;
  border: 0; border-left: 1px solid var(--warna-garis); background: none; color: #1f9d55; font: inherit; font-size: 10.5px; cursor: pointer;
}
.jpic-wa:hover { background: color-mix(in srgb, #25d366 12%, transparent); }
.jpic-wa:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.jpic-wa__titik { position: absolute; top: 12px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 2px var(--warna-permukaan); }

.jpic-ekspor__label { margin: 0 0 6px; font-size: var(--teks-sm); font-weight: var(--tebal-sedang); }
.jpic-preset { display: flex; flex-wrap: wrap; gap: 6px; }
.jpic-preset__item { min-height: 34px; padding: 0 12px; border: 1px solid var(--warna-garis); border-radius: 99px; background: var(--warna-permukaan);
  color: var(--warna-teks); font: inherit; font-size: var(--teks-sm); cursor: pointer; }
.jpic-preset__item--aktif, .jpic-preset__item:hover { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
.jpic-ekspor__baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

@media (max-width: 559.98px) {
  .jpic-kartu { grid-template-columns: auto minmax(0, 1fr); }
  .jpic-kartu__tgl { width: 54px; }
  .jpic-kartu__angka { font-size: 20px; }
  .jpic-wa { grid-column: 1 / -1; flex-direction: row; width: auto; min-height: 42px; border-left: 0; border-top: 1px solid var(--warna-garis); font-size: var(--teks-sm); }
  .jpic-wa__titik { position: static; margin-left: 2px; }
}
@media (max-width: 767.98px), (pointer: coarse) { .jpic-rentang__item, .jpic-preset__item { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .jpic-kartu--masuk, .jpic-peserta[open] .jpic-peserta__isi, .jpic-kartu--aksen .jpic-kartu__tgl::after { animation: none; }
}
@keyframes jpic-denyut { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warna-aksen) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* =====================================================================
   Kotak Masuk PIC — skala ratusan data (v2.57.0): tampilan ringkas,
   navigasi per hari, penunjuk halaman atas, judul hari menempel.
   ===================================================================== */
/* Pembungkus bilah tidak membatasi "sticky": bilah pilihan massal menempel
   di bawah appbar selama daftar digulir. */
.kmasuk__bilah { display: contents; }

.jpic-tampilan { display: inline-flex; padding: 2px; border: 1px solid var(--warna-garis); border-radius: 99px; background: var(--warna-permukaan); }
.jpic-tampilan__item {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 99px;
  background: none; color: var(--warna-teks-lembut); font: inherit; font-size: var(--teks-xs); cursor: pointer;
  transition: background var(--transisi-cepat), color var(--transisi-cepat);
}
.jpic-tampilan__item--aktif { background: var(--warna-primer-lembut); color: var(--warna-teks); font-weight: var(--tebal-tebal); }

.jpic-hari { display: flex; align-items: center; gap: 4px; margin-bottom: var(--jarak-2); min-width: 0; }
.jpic-hari__jalur { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; }
.jpic-hari__jalur::-webkit-scrollbar { display: none; }
.jpic-hari__item {
  position: relative; display: grid; justify-items: center; flex: 0 0 auto; min-width: 56px; padding: 6px 8px 7px; scroll-snap-align: start;
  border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); color: var(--warna-teks);
  font: inherit; line-height: 1.15; cursor: pointer; transition: border-color var(--transisi-cepat), background var(--transisi-cepat), transform var(--transisi-cepat);
}
.jpic-hari__item:hover { border-color: var(--warna-primer); }
.jpic-hari__item:active { transform: scale(.97); }
.jpic-hari__nama { font-size: 10.5px; font-weight: var(--tebal-tebal); text-transform: uppercase; color: var(--warna-teks-lembut); }
.jpic-hari__tgl { font-size: var(--teks-xs); font-weight: var(--tebal-tebal); white-space: nowrap; }
.jpic-hari__n { margin-top: 3px; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--warna-sorot); font-size: 10.5px; line-height: 16px; }
.jpic-hari__item--lewat .jpic-hari__n { background: var(--warna-bahaya); color: #fff; }
.jpic-hari__item--ini { border-color: var(--warna-aksen); }
.jpic-hari__item--ini .jpic-hari__nama { color: var(--warna-teks-aksen, var(--warna-aksen)); }
.jpic-hari__item--aktif { border-color: var(--warna-primer); background: var(--warna-primer-lembut); box-shadow: inset 0 0 0 1px var(--warna-primer); }
.jpic-hari__geser { display: none; flex: none; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid var(--warna-garis);
  border-radius: 50%; background: var(--warna-permukaan); color: var(--warna-teks-lembut); cursor: pointer; }
.jpic-hari__geser:hover { color: var(--warna-teks); border-color: var(--warna-primer); }
@media (pointer: fine) and (min-width: 560px) { .jpic-hari__geser { display: inline-flex; } }

.jpic-hal { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; min-height: 32px; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.jpic-hal__nav { display: inline-flex; align-items: center; gap: 4px; }
.jpic-hal__posisi { min-width: 44px; text-align: center; color: var(--warna-teks); font-weight: var(--tebal-sedang); }
.jpic-hal__tombol { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--warna-garis);
  border-radius: var(--radius-2); background: var(--warna-permukaan); color: var(--warna-teks); cursor: pointer; }
.jpic-hal__tombol:hover:not(:disabled) { border-color: var(--warna-primer); }
.jpic-hal__tombol:disabled { opacity: .4; cursor: default; }

/* Judul kelompok menempel di bawah appbar → konteks hari tetap terlihat. */
.jpic-kel__judul { position: sticky; top: var(--tinggi-appbar); z-index: 2; margin: 0 calc(var(--jarak-1) * -1) 8px; padding: 6px var(--jarak-1);
  background: color-mix(in srgb, var(--warna-latar) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* --- baris ringkas --- */
.jpic--ringkas { gap: var(--jarak-3); container-type: inline-size; }
.jpic-baris-daftar { margin: 0; padding: 0; list-style: none; border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); overflow: hidden; }
.jpic-baris-daftar > li + li { border-top: 1px solid var(--warna-garis); }
.jpic-baris { --n: var(--warna-primer); }
.jpic-baris--bahaya { --n: var(--warna-bahaya); }
.jpic-baris--aksen { --n: var(--warna-aksen); }
.jpic-baris--peringatan { --n: var(--warna-peringatan); }
.jpic-baris__ringkas {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
  min-height: 52px; padding: 6px 8px 6px 0; list-style: none; cursor: pointer; box-shadow: inset 3px 0 0 var(--n);
  transition: background var(--transisi-cepat);
}
.jpic-baris__ringkas::-webkit-details-marker { display: none; }
.jpic-baris__ringkas:hover { background: var(--warna-permukaan-2); }
.jpic-baris[open] > .jpic-baris__ringkas { background: var(--warna-permukaan-2); }
.jpic-baris[open] .jpic-peserta__panah { transform: rotate(180deg); }
.jpic-baris__jam { display: grid; justify-items: center; line-height: 1.15; }
.jpic-baris__jam b { font-size: var(--teks-sm); }
.jpic-baris__jam small { font-size: 10.5px; color: var(--warna-teks-samar); }
.jpic-baris__kc { display: grid; gap: 2px; min-width: 0; }
.jpic-baris__judul { font-size: var(--teks-sm); font-weight: var(--tebal-sedang); }
.jpic-baris__judul .lencana { margin-left: 6px; font-size: 10px; }
.jpic-baris__judul .kode { margin-right: 2px; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.jpic-baris__sub { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.jpic-baris__ruang, .jpic-baris__penguji { display: none; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.jpic-baris__n { display: inline-flex; align-items: center; gap: 4px; font-size: var(--teks-xs); color: var(--warna-teks); }
.jpic-baris__n svg { color: var(--warna-teks-samar); }
.jpic-baris__wa { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0;
  border-radius: 50%; background: color-mix(in srgb, #25d366 12%, transparent); color: #1f9d55; cursor: pointer; }
.jpic-baris__wa:hover { background: color-mix(in srgb, #25d366 22%, transparent); }
.jpic-baris__wa:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 1px; }
.jpic-baris__wa .jpic-wa__titik { top: 3px; right: 3px; }
.jpic-baris__isi { padding: 8px 12px 10px 60px; border-top: 1px dashed var(--warna-garis); }
.jpic-baris[open] .jpic-baris__isi { animation: wk-naik .22s var(--kurva, ease) both; }
.jpic-baris__rinci { margin: 0 0 6px; color: var(--warna-teks-lembut); }
@container (min-width: 780px) {
  .jpic-baris__ringkas { grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1fr) 48px auto auto; }
  .jpic-baris__sub { display: none; }
  .jpic-baris__ruang, .jpic-baris__penguji { display: block; }
}
@container (max-width: 519.98px) {
  .jpic-baris__ringkas { grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: 8px; }
  .jpic-baris__ringkas > .jpic-peserta__panah { display: none; }
  .jpic-baris__isi { padding-left: 12px; }
}
@media (max-width: 559.98px) {
  .jpic-tampilan__item span { display: none; }
  .jpic-tampilan__item { padding: 0 9px; }
}
@media (max-width: 767.98px), (pointer: coarse) { .jpic-hal__tombol { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .jpic-baris[open] .jpic-baris__isi { animation: none; } .jpic-hari__item:active { transform: none; } }
/* Bilah pilihan massal hanya menempel saat ada yang dipilih. */
.kmasuk .bilah-pilihan:not(.kmasuk__bilah--aktif) { position: relative; top: auto; }
.kmasuk .bilah-pilihan.kmasuk__bilah--aktif { box-shadow: var(--bayang-1); }

/* =====================================================================
   v2.58.0 — Cincin hero membuka rincian per KC di dalam kotak hero,
   dan saringan indikator pada daftar siswa monitoring.
   ===================================================================== */
.sh-hero--rinci { flex-wrap: wrap; }
.sh-cincin-tombol {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px; border: 0; border-radius: 16px; background: none; color: #fff; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background var(--transisi-cepat);
}
.sh-cincin-tombol:hover { background: rgba(255, 255, 255, .06); }
.sh-cincin-tombol:hover .sh-cincin { transform: scale(1.04); }
.sh-cincin-tombol:active .sh-cincin { transform: scale(.97); }
.sh-cincin-tombol:focus-visible { outline: 2px solid var(--emas-400); outline-offset: 2px; }
.sh-cincin-tombol .sh-cincin { transition: transform var(--transisi-cepat); }
.sh-cincin__petunjuk {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 10px; border-radius: 99px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  font-size: 11px; font-weight: var(--tebal-tebal); line-height: 1.5; color: rgba(255, 255, 255, .9); white-space: nowrap;
}
.sh-cincin__petunjuk svg { transition: transform var(--transisi-cepat); }
.sh-cincin-tombol--buka .sh-cincin__petunjuk { background: var(--emas-500); border-color: var(--emas-500); color: var(--navy-900); }
.sh-cincin-tombol--buka .sh-cincin__petunjuk svg { transform: rotate(180deg); }

.sh-rinci { flex: 1 0 100%; min-width: 0; }
.sh-rinci[hidden] { display: none; }
.sh-rinci__dalam {
  margin-top: 4px; padding: 14px; border-radius: var(--radius-3);
  background: var(--warna-permukaan); color: var(--warna-teks); box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
@media (min-width: 768px) { .sh-rinci__dalam { padding: 16px 18px; } }
.sh-rinci--masuk .sh-rinci__dalam { animation: sh-rinci-masuk .28s var(--kurva, ease) both; }
@keyframes sh-rinci-masuk { from { opacity: 0; transform: translateY(-6px); } }
.sh-rinci__kepala { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.sh-rinci__teks { flex: 1 1 auto; min-width: 0; }
.sh-rinci__judul { margin: 0; font-size: var(--teks-md, 16px); font-weight: var(--tebal-berat); color: var(--warna-teks); }
.sh-rinci__ket { margin: 2px 0 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.sh-rinci__tutup {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--warna-garis); border-radius: 50%; background: var(--warna-permukaan); color: var(--warna-teks-lembut); cursor: pointer;
}
.sh-rinci__tutup:hover { color: var(--warna-teks); border-color: var(--warna-primer); }
.mkd-rinci__jumlah { margin: -4px 0 8px; }
.sh-rinci .mkd-daftar { margin: 0; }
.sh-rinci .wk-mapel { gap: var(--jarak-3); }

@media (max-width: 559.98px) {
  .sh-hero--rinci .sh-cincin-tombol { position: absolute; top: 10px; right: 10px; padding: 4px; }
  .sh-hero--rinci .sh-cincin-tombol .sh-cincin { position: relative; top: auto; right: auto; }
  .sh-hero--rinci .sh-hero__isi { min-height: 104px; }
  .sh-rinci__dalam { margin-top: 14px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-rinci--masuk .sh-rinci__dalam { animation: none; }
  .sh-cincin-tombol:hover .sh-cincin, .sh-cincin-tombol:active .sh-cincin { transform: none; }
}

/* --- saringan indikator daftar siswa --- */
.mon-siswa__alat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mon-siswa__alat > .mon-siswa__cari { flex: 0 1 360px; min-width: min(100%, 220px); }
.mon-ik { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 420px; min-width: 0; }
.mon-ik > .bidang { margin: 0; min-width: 0; }
.mon-ik__kk { flex: 1 1 200px; }
.mon-ik__ik { flex: 2 1 240px; }
.mon-ik__muat { padding: 0 4px; }
.mon-ik__seg { display: inline-flex; padding: 2px; border: 1px solid var(--warna-garis); border-radius: 99px; background: var(--warna-permukaan); }
.mon-ik__opsi {
  display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 99px;
  background: none; color: var(--warna-teks-lembut); font: inherit; font-size: var(--teks-sm); cursor: pointer;
  transition: background var(--transisi-cepat), color var(--transisi-cepat);
}
.mon-ik__opsi--aktif.mon-ik__opsi--belum { background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); font-weight: var(--tebal-tebal); }
.mon-ik__opsi--aktif.mon-ik__opsi--sudah { background: var(--warna-sukses-lembut); color: var(--warna-teks-sukses, var(--warna-sukses)); font-weight: var(--tebal-tebal); }
.mon-ik__n { min-width: 22px; padding: 0 6px; border-radius: 99px; background: var(--warna-sorot); font-size: 11.5px; line-height: 18px; text-align: center; }
.mon-ik__hapus {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--warna-garis); border-radius: 50%; background: var(--warna-permukaan); color: var(--warna-teks-lembut); cursor: pointer;
}
.mon-ik__hapus:hover { color: var(--warna-teks); border-color: var(--warna-primer); }
@media (max-width: 559.98px) {
  .mon-ik__kk, .mon-ik__ik { flex-basis: 100%; }
  .mon-ik__seg { flex: 1 1 auto; }
  .mon-ik__opsi { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 767.98px), (pointer: coarse) { .mon-ik__opsi { min-height: 40px; } .mon-ik__hapus { width: 40px; height: 40px; } }
/* Uraian indikator boleh dua baris di dropdown agar terbaca. */
.mon-ik__ik .pilihcari__keterangan { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--warna-teks-lembut); }
.mon-ik__akhir { display: inline-flex; align-items: center; gap: 8px; flex: none; }
@media (min-width: 560px) { .mon-ik__kk, .mon-ik__ik { flex-basis: 150px; } }
@media (max-width: 559.98px) { .mon-ik__akhir { flex: 1 1 100%; } }
/* Baris KC di panel rincian hero: judul diberi ruang, bilah di bawah judul. */
.mkd-rinci { container: mkdr / inline-size; }
@container mkdr (max-width: 760px) {
  .mkd-rinci .mkd-baris { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "a n p u" "a b b b"; row-gap: 6px; column-gap: 10px; }
  .mkd-rinci .mkd-baris__kode { align-self: start; }
}
@container mkdr (max-width: 460px) {
  .mkd-rinci .mkd-baris { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "a n p" "a b b" "a u u"; }
  .mkd-rinci .mkd-baris__ujung { justify-self: start; }
  .mkd-rinci .mkd-baris__judul { white-space: normal; }
}

/* =====================================================================
   v2.59.0 — Lama uji per ruang × KC (PIC) + jam selesai otomatis (LSP)
   ===================================================================== */
.kpr-ruang__chip { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.kpr-ruang__durasi {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px;
  background: var(--warna-aksen-lembut); color: var(--warna-teks-aksen, var(--warna-teks)); font-size: var(--teks-xs); font-weight: var(--tebal-tebal); white-space: nowrap;
}
.kpr-ruang__durasi--kosong { background: var(--warna-sorot); color: var(--warna-teks-samar); font-weight: var(--tebal-sedang); }

.kpr-durasi__cip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kpr-durasi__pil {
  min-height: 36px; min-width: 52px; padding: 0 12px; border: 1px solid var(--warna-garis); border-radius: 99px;
  background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; font-size: var(--teks-sm); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color var(--transisi-cepat), background var(--transisi-cepat), transform var(--transisi-cepat);
}
.kpr-durasi__pil:hover { border-color: var(--warna-primer); }
.kpr-durasi__pil:active { transform: scale(.96); }
.kpr-durasi__pil--aktif { border-color: var(--warna-primer); background: var(--warna-primer-lembut); font-weight: var(--tebal-tebal); box-shadow: inset 0 0 0 1px var(--warna-primer); }
.kpr-durasi__baris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kpr-durasi__lain { display: inline-flex; align-items: center; border: 1px solid var(--warna-garis-kuat); border-radius: var(--radius-2); overflow: hidden; background: var(--warna-permukaan); }
.kpr-durasi__input { width: 84px; min-height: 40px; border: 0; background: none; color: var(--warna-teks); font-size: var(--teks-md); font-weight: var(--tebal-tebal); text-align: center; -moz-appearance: textfield; }
.kpr-durasi__input::-webkit-outer-spin-button, .kpr-durasi__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kpr-durasi__input:focus { outline: none; }
.kpr-durasi__lain:focus-within { border-color: var(--warna-primer); box-shadow: 0 0 0 3px var(--warna-primer-lembut); }
.kpr-durasi__satuan { padding: 0 10px; align-self: stretch; display: grid; place-items: center; background: var(--warna-permukaan-2); border-left: 1px solid var(--warna-garis); font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.kpr-durasi__teks { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks-primer); }
.kpr-durasi__teks--kosong { font-weight: normal; color: var(--warna-teks-samar); font-size: var(--teks-xs); }
@media (max-width: 559.98px) {
  .kpr-ruang__chip { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "i n a" "i d u"; row-gap: 4px; }
  .kpr-ruang__ikon { grid-area: i; } .kpr-ruang__isi { grid-area: n; } .kpr-ruang__angka { grid-area: a; }
  .kpr-ruang__durasi { grid-area: d; justify-self: start; } .kpr-ruang__ubah { grid-area: u; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { .kpr-durasi__pil:active { transform: none; } }
.srj-kartu__durasi { display: flex; align-items: center; gap: 4px; font-size: var(--teks-xs); font-weight: var(--tebal-sedang); color: var(--warna-teks-aksen, var(--warna-teks)); }
.srj-kartu__durasi svg { flex: none; }
.srj-kartu__durasi--kosong { font-weight: normal; color: var(--warna-teks-samar); }
.srj-kartu[aria-disabled="true"] { cursor: not-allowed; opacity: .62; }
.srj-kartu[aria-disabled="true"]:hover { border-color: var(--warna-garis); transform: none; }
.srj-kartu--dipakai .srj-kartu__status--waspada { color: var(--warna-teks-bahaya, var(--warna-bahaya)); }
.srj-durasi { margin: -4px 0 var(--jarak-3); }
.srj-durasi:empty { display: none; }

/* =====================================================================
   v2.60.0 — Kompetensi Khusus PIC: wawancara verifikasi
   ===================================================================== */
.kw-alur { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.kw-alur__langkah {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9); font-size: 12px;
}
.kw-alur__langkah + .kw-alur__langkah { position: relative; }
.kw-alur__no { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--emas-500); color: var(--navy-900); font-size: 11px; font-weight: var(--tebal-berat); }

.kw-alat { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-alat .mdata__cari { flex: 1 1 280px; max-width: 420px; }
.kw-bilah { flex-wrap: wrap; row-gap: 8px; }
.kw-bilah__semua { display: inline-flex; align-items: center; gap: 8px; font-size: var(--teks-sm); cursor: pointer; }
.kw-bilah__semua input { width: 18px; height: 18px; }
.kw-bilah__aksi { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.kw-cip {
  min-height: 32px; padding: 0 12px; border: 1px solid var(--warna-garis); border-radius: 99px; background: var(--warna-permukaan);
  color: var(--warna-teks); font: inherit; font-size: var(--teks-xs); font-weight: var(--tebal-sedang); cursor: pointer; white-space: nowrap;
  transition: border-color var(--transisi-cepat), background var(--transisi-cepat);
}
.kw-cip:hover { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }

.kw-muat { opacity: .55; pointer-events: none; transition: opacity var(--transisi-cepat); }
.kw-daftar { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kw-daftar > li { animation: wk-naik .3s var(--kurva, ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.kw-baris {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 4px 4px 4px 12px;
  border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan);
  transition: border-color var(--transisi-cepat), background var(--transisi-cepat), box-shadow var(--transisi-cepat);
}
.kw-baris:hover { box-shadow: var(--bayang-1); }
.kw-baris--terpilih { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
.kw-baris--lewat { box-shadow: inset 3px 0 0 var(--warna-bahaya); }
.kw-baris__centang { width: 18px; height: 18px; margin-top: 17px; }
.kw-baris > .kw-baris__badan:first-child { grid-column: 1 / -1; }
.kw-baris__badan { min-width: 0; }
.kw-baris__kepala {
  display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 6px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.kw-baris__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: 13px; font-weight: var(--tebal-berat); }
.kw-baris__isi { display: grid; min-width: 0; }
.kw-baris__nama { font-size: var(--teks-sm); font-weight: var(--tebal-tebal); }
.kw-baris__sub { font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.kw-baris__kc { display: grid; min-width: 0; font-size: var(--teks-sm); }
.kw-baris__kc .kode { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.kw-baris__slot { display: grid; justify-items: end; max-width: 160px; line-height: 1.2; }
.kw-baris__slot strong { font-size: var(--teks-sm); color: var(--warna-teks-primer); }
.kw-baris__slot small { max-width: 100%; font-size: 11px; color: var(--warna-teks-samar); }
.kw-baris__tunggu { font-size: var(--teks-xs); color: var(--warna-teks-lembut); white-space: nowrap; }
.kw-baris__tunggu--lama { color: var(--warna-teks-peringatan); font-weight: var(--tebal-tebal); }
.kw-baris__panah { display: flex; color: var(--warna-teks-samar); transition: transform var(--transisi-cepat); }
.kw-baris__kepala[aria-expanded="true"] .kw-baris__panah { transform: rotate(180deg); }
.kw-baris__rinci { display: grid; gap: 10px; padding: 4px 8px 12px 52px; }
.kw-baris__rinci:not([hidden]) { animation: wk-naik .22s var(--kurva, ease) both; }
.kw-baris__rinci .tumpuk { margin-top: 0 !important; }
.kw-baris__aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-linimasa { padding: 8px 10px; border-radius: var(--radius-2); background: var(--warna-permukaan-2); }
.kw-jadwal { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-2); background: var(--warna-aksen-lembut); color: var(--warna-teks); }
.kw-jadwal svg { flex: none; margin-top: 2px; color: var(--warna-teks-aksen, var(--warna-aksen)); }
.kw-jadwal strong { font-size: var(--teks-sm); }
.kw-jadwal p { margin: 2px 0 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.kw-hasil { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 4px 8px 52px; }
.kw-hasil__ket { flex: 1 1 auto; font-size: var(--teks-xs); color: var(--warna-teks-samar); }

.kw-hari { display: grid; gap: var(--jarak-4); }
.kw-hari__judul {
  position: sticky; top: var(--tinggi-appbar); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0 calc(var(--jarak-1) * -1) 8px; padding: 6px var(--jarak-1);
  background: color-mix(in srgb, var(--warna-latar) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: var(--teks-xs); font-weight: var(--tebal-tebal); text-transform: uppercase; letter-spacing: .04em; color: var(--warna-teks-lembut);
}
.kw-hari__tgl { flex: 1 1 auto; min-width: 0; }
.kw-hari__grup--ini .kw-hari__tgl { color: var(--warna-teks-aksen, var(--warna-aksen)); }
.kw-hari__grup--lewat .kw-hari__tgl { color: var(--warna-teks-bahaya, var(--warna-bahaya)); }
.kw-hari__n { font-weight: var(--tebal-sedang); text-transform: none; letter-spacing: 0; color: var(--warna-teks-samar); }
.kw-hari__pilih, .kw-hari__wa {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border: 1px solid var(--warna-garis); border-radius: 99px;
  background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; font-size: 11.5px; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.kw-hari__wa { color: #1f9d55; }
.kw-hari__pilih:hover, .kw-hari__wa:hover { border-color: var(--warna-primer); }

/* penjadwal */
.kw-penjadwal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jarak-4); }
@media (min-width: 860px) { .kw-penjadwal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kw-penjadwal__form { display: grid; gap: var(--jarak-3); align-content: start; }
.kw-penjadwal__waktu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jarak-2); }
.kw-bidang { display: grid; gap: 6px; min-width: 0; }
.kw-bidang__label { font-size: var(--teks-sm); font-weight: var(--tebal-sedang); color: var(--warna-teks); }
.kw-masukan {
  width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--warna-garis-kuat); border-radius: var(--radius-2);
  background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; font-size: var(--teks-md, 16px);
}
.kw-masukan:focus { outline: none; border-color: var(--warna-primer); box-shadow: 0 0 0 3px var(--warna-primer-lembut); }
.kw-masukan--area { min-height: 64px; resize: vertical; line-height: 1.45; }
.kw-rekap { min-height: 220px; font-size: var(--teks-sm); }
.kw-saran { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan-2); }
.kw-seg__item {
  flex: 1 1 0; min-height: 38px; padding: 0 10px; border: 0; border-radius: var(--radius-2); background: none; color: var(--warna-teks-lembut);
  font: inherit; font-size: var(--teks-sm); white-space: nowrap; cursor: pointer; transition: background var(--transisi-cepat), color var(--transisi-cepat), box-shadow var(--transisi-cepat);
}
.kw-seg__item--aktif { background: var(--warna-permukaan); color: var(--warna-teks); font-weight: var(--tebal-tebal); box-shadow: var(--bayang-1); }
.kw-seg--kecil .kw-seg__item { min-height: 30px; font-size: var(--teks-xs); }
.kw-penjadwal__pratinjau { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px; border-radius: var(--radius-3); background: var(--warna-permukaan-2); }
.kw-pratinjau__kepala { display: grid; gap: 6px; }
.kw-pratinjau__ringkas { margin: 0; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks-primer); }
.kw-pratinjau { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; margin: 0; padding: 0; list-style: none; overscroll-behavior: contain; }
.kw-pratinjau__item {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 34px; padding: 4px 8px;
  border-radius: var(--radius-2); background: var(--warna-permukaan); font-size: var(--teks-sm); animation: wk-naik .22s var(--kurva, ease) both; animation-delay: calc(var(--i, 0) * 18ms);
}
.kw-pratinjau__jam { font-weight: var(--tebal-tebal); color: var(--warna-teks-primer); font-size: var(--teks-xs); }
.kw-pratinjau__kc { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.kw-awas { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: var(--radius-2); background: var(--warna-peringatan-lembut); color: var(--warna-teks-peringatan); font-size: var(--teks-xs); }
.kw-awas--bahaya { background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya, var(--warna-bahaya)); }
.kw-awas svg { flex: none; margin-top: 1px; }

/* undangan wawancara di halaman siswa */
.kh-wawancara {
  display: flex; gap: 12px; align-items: flex-start; margin-top: var(--jarak-3); padding: 12px 14px; border-radius: var(--radius-3);
  background: linear-gradient(135deg, var(--warna-aksen-lembut), var(--warna-primer-lembut)); border: 1px solid var(--warna-garis);
  animation: wk-naik .32s var(--kurva, ease) both;
}
.kh-wawancara__ikon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--warna-permukaan); color: var(--warna-teks-aksen, var(--warna-aksen)); box-shadow: var(--bayang-1); }
.kh-wawancara__isi { min-width: 0; }
.kh-wawancara__isi p { margin: 0; }
.kh-wawancara__alis { font-size: 11px; font-weight: var(--tebal-tebal); text-transform: uppercase; letter-spacing: .05em; color: var(--warna-teks-aksen, var(--warna-teks-lembut)); }
.kh-wawancara__waktu { font-size: var(--teks-md, 16px); font-weight: var(--tebal-berat); color: var(--warna-teks); }
.kh-wawancara__tempat { display: flex; align-items: center; gap: 4px; font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.kh-wawancara__pesan { margin-top: 4px !important; font-size: var(--teks-sm); }
.kh-wawancara__catatan { margin-top: 4px !important; font-size: var(--teks-xs); color: var(--warna-teks-samar); }

@media (max-width: 767.98px) {
  .kw-baris__kepala { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "a i u p" "a k k k"; row-gap: 4px; }
  .kw-baris__avatar { grid-area: a; align-self: start; } .kw-baris__isi { grid-area: i; } .kw-baris__kc { grid-area: k; }
  .kw-baris__kepala > :nth-child(4) { grid-area: u; } .kw-baris__panah { grid-area: p; }
  .kw-baris__kc { display: flex; gap: 6px; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
  .kw-baris__rinci, .kw-hasil { padding-left: 4px; }
  .kw-baris__slot { max-width: 110px; }
}
@media (max-width: 559.98px) {
  .kw-baris__avatar { width: 32px; height: 32px; font-size: 12px; }
  .kw-bilah__aksi { width: 100%; justify-content: stretch; }
  .kw-bilah__aksi > .tombol { flex: 1 1 auto; }
  .kw-pratinjau__item { grid-template-columns: 86px minmax(0, 1fr) auto; }
  .kw-seg__item { flex: 1 1 calc(33% - 4px); }
}
@media (max-width: 767.98px), (pointer: coarse) { .kw-cip, .kw-hari__pilih, .kw-hari__wa { min-height: 36px; } }
@media (prefers-reduced-motion: reduce) {
  .kw-daftar > li, .kw-baris__rinci:not([hidden]), .kw-pratinjau__item, .kh-wawancara { animation: none; }
}
.kw-bilah-wadah { display: contents; }
.kw .bilah-pilihan:not(.kmasuk__bilah--aktif) { position: relative; top: auto; }
.kw .bilah-pilihan.kmasuk__bilah--aktif { box-shadow: var(--bayang-1); }
/* Layar lebar: tombol hasil wawancara sebaris dengan kepala — baris lebih pendek. */
@media (min-width: 1180px) {
  .kw-baris__badan:has(> .kw-hasil--ringkas) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
  .kw-baris__badan > .kw-hasil--ringkas { padding: 0 4px 0 0; flex-wrap: nowrap; }
  .kw-baris__badan > .kw-baris__rinci { grid-column: 1 / -1; }
}
.kw .sh-hero__stat:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .kw .sh-hero__stat:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kw-baris__kc .kode { flex: none; white-space: nowrap; }

/* =====================================================================
   v2.61.0 — Notifikasi pengguna (.ntf-*) & Pusat Notifikasi LSP (.lnt-*)
   ===================================================================== */
.ntf .sh-hero__stat, .lnt .sh-hero__stat { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.lnt .sh-hero__stat:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .lnt .sh-hero__stat:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ntf-hp .kartu { border-style: dashed; }
.ntf-alat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ntf-cip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding: 2px; }
.ntf-cip::-webkit-scrollbar { display: none; }
.ntf-cip__item {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid var(--warna-garis);
  border-radius: 99px; background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; font-size: var(--teks-sm); cursor: pointer;
  transition: border-color var(--transisi-cepat), background var(--transisi-cepat);
}
.ntf-cip__item:hover { border-color: var(--warna-primer); }
.ntf-cip__item--aktif { border-color: var(--warna-primer); background: var(--warna-primer-lembut); font-weight: var(--tebal-tebal); }
.ntf-cip__n { min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--warna-sorot); font-size: 11.5px; line-height: 18px; text-align: center; }
.ntf-muat, .lnt-muat { opacity: .55; pointer-events: none; transition: opacity var(--transisi-cepat); }

.ntf-daftar, .lnt-daftar { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ntf-daftar > li, .lnt-daftar > li { animation: wk-naik .3s var(--kurva, ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
.ntf-baris {
  --n: var(--warna-primer); --n-l: var(--warna-primer-lembut);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--warna-garis);
  border-radius: var(--radius-3); background: var(--warna-permukaan); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--transisi-cepat), box-shadow var(--transisi-cepat), transform var(--transisi-cepat);
}
.ntf-baris:hover { box-shadow: var(--bayang-1); border-color: var(--warna-garis-kuat); }
.ntf-baris:active { transform: scale(.995); }
.ntf-baris:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 2px; }
.ntf-baris--aksen { --n: var(--warna-aksen); --n-l: var(--warna-aksen-lembut); }
.ntf-baris--sukses { --n: var(--warna-sukses); --n-l: var(--warna-sukses-lembut); }
.ntf-baris--info { --n: var(--warna-info, var(--warna-primer)); --n-l: var(--warna-info-lembut, var(--warna-primer-lembut)); }
.ntf-baris--netral { --n: var(--warna-teks-lembut); --n-l: var(--warna-sorot); }
.ntf-baris--baru { background: color-mix(in srgb, var(--n-l) 45%, var(--warna-permukaan)); border-color: color-mix(in srgb, var(--n) 30%, var(--warna-garis)); }
.ntf-baris--penting { box-shadow: inset 3px 0 0 var(--warna-bahaya); }
.ntf-baris__ikon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--n-l); color: var(--n); }
.ntf-baris__isi { display: grid; gap: 3px; min-width: 0; }
.ntf-baris__atas { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ntf-baris__judul { flex: 1 1 auto; min-width: 0; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); color: var(--warna-teks); }
.ntf-baris__titik { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--n); box-shadow: 0 0 0 3px var(--n-l); }
.ntf-baris__pesan { font-size: var(--teks-sm); color: var(--warna-teks-lembut); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ntf-baris__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.ntf-baris__lampiran { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; padding: 1px 8px; border-radius: 99px; background: var(--warna-sorot); color: var(--warna-teks-lembut); }

.ntf-rinci { display: grid; gap: var(--jarak-3); }
.ntf-rinci__penting { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin: 0; padding: 4px 10px; border-radius: 99px;
  background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya, var(--warna-bahaya)); font-size: var(--teks-xs); font-weight: var(--tebal-tebal); }
.ntf-rinci__pesan { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--teks-md, 16px); line-height: 1.6; color: var(--warna-teks); }
.ntf-rinci__pesan a { color: var(--warna-teks-primer); text-decoration: underline; }
.ntf-rinci__tautan { justify-self: start; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.ntf-lampiran { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan-2); }
.ntf-lampiran__ikon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya, var(--warna-bahaya)); }
.ntf-lampiran__isi { display: grid; flex: 1 1 auto; min-width: 0; }
.ntf-lampiran__nama { font-size: var(--teks-sm); font-weight: var(--tebal-sedang); }
.ntf-lampiran__ukuran { font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.ntf-lampiran .tombol { flex: none; text-decoration: none; }
.ntf-pratinjau { position: relative; overflow: hidden; height: min(70vh, 640px); border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan-2); }
.ntf-pratinjau iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .3s; }
.ntf-pratinjau--siap iframe { opacity: 1; }
.ntf-pratinjau__muat { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; font-size: var(--teks-sm); color: var(--warna-teks-samar); }
.ntf-pratinjau__putar { width: 28px; height: 28px; border: 3px solid var(--warna-garis); border-top-color: var(--warna-primer); border-radius: 50%; animation: ntf-putar .8s linear infinite; }
@keyframes ntf-putar { to { transform: rotate(360deg); } }

/* --- LSP --- */
.lnt-hero-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lnt-folder-wadah { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.lnt-folder {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 4px 12px; border-radius: var(--radius-3);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; text-decoration: none; font-size: var(--teks-xs);
}
.lnt-folder:hover { background: rgba(255, 255, 255, .16); }
.lnt-folder--kosong { color: rgba(255, 255, 255, .8); }
.lnt-folder__teks { display: grid; min-width: 0; line-height: 1.25; }
.lnt-folder__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--emas-400); }
.lnt-folder__ganti {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--warna-garis);
  border-radius: 50%; background: var(--warna-permukaan); color: var(--warna-teks-lembut); cursor: pointer;
}
.sh-hero .lnt-folder__ganti { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.lnt-tab { display: flex; gap: 4px; border-bottom: 1px solid var(--warna-garis); }
.lnt-tab__item {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--warna-teks-lembut); font: inherit; font-size: var(--teks-sm); cursor: pointer; margin-bottom: -1px;
}
.lnt-tab__item--aktif { color: var(--warna-teks); font-weight: var(--tebal-tebal); border-bottom-color: var(--warna-primer); }
.lnt-tab__n { min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--warna-sorot); font-size: 11.5px; line-height: 18px; text-align: center; color: var(--warna-teks-lembut); font-weight: normal; }
.lnt-alat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--jarak-2); }
.lnt-alat .mdata__cari { flex: 1 1 260px; max-width: 380px; }
.lnt-bilah { margin-bottom: var(--jarak-2); }
.lnt .bilah-pilihan:not(.kmasuk__bilah--aktif) { position: relative; top: auto; }

.lnt-baris {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 120px auto; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan);
  transition: box-shadow var(--transisi-cepat), border-color var(--transisi-cepat);
}
.lnt-baris:hover { box-shadow: var(--bayang-1); }
.lnt-baris--terjadwal { box-shadow: inset 3px 0 0 var(--warna-info, var(--warna-primer)); }
.lnt-baris--kedaluwarsa { opacity: .78; }
.lnt-baris .kw-baris__centang { margin: 0; }
.lnt-baris__isi { display: grid; gap: 4px; min-width: 0; }
.lnt-baris__kepala { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lnt-baris__judul { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--teks-sm); font-weight: var(--tebal-tebal); }
.lnt-baris__pesan { margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lnt-baris__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.lnt-baris__meta > * { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.lnt-baris__lampiran { color: var(--warna-teks-primer); text-decoration: none; max-width: 200px; }
.lnt-baris__baca { display: grid; justify-items: end; gap: 2px; line-height: 1.15; }
.lnt-baris__baca strong { font-size: var(--teks-md, 16px); }
.lnt-baris__baca small { font-size: 11px; color: var(--warna-teks-samar); }
.lnt-meter { width: 100%; height: 5px; margin-top: 3px; border-radius: 99px; background: var(--warna-sorot); overflow: hidden; }
.lnt-meter__isi { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--warna-primer), var(--warna-sukses));
  animation: lnt-isi .8s var(--kurva, ease) both; transform-origin: left; }
@keyframes lnt-isi { from { transform: scaleX(0); } }
.lnt-baris__aksi { display: flex; gap: 2px; }
.lnt-aksi { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; color: var(--warna-teks-lembut); cursor: pointer; }
.lnt-aksi:hover { background: var(--warna-sorot); color: var(--warna-teks); }

.lnt-bersih-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--jarak-3); }
.lnt-bersih { display: grid; gap: var(--jarak-3); align-content: start; padding: 16px; border: 1px solid var(--warna-garis); border-radius: var(--radius-3); background: var(--warna-permukaan); }
.lnt-bersih__kepala { display: flex; gap: 12px; align-items: flex-start; }
.lnt-bersih__kepala h3 { margin: 0; font-size: var(--teks-md, 16px); }
.lnt-bersih__kepala p { margin: 2px 0 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.lnt-bersih__ikon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya, var(--warna-bahaya)); }
.lnt-bersih__umur { display: grid; gap: 6px; }
.lnt-bersih__centang { display: inline-flex; align-items: center; gap: 8px; font-size: var(--teks-sm); cursor: pointer; }
.lnt-bersih__centang input { width: 18px; height: 18px; }
.lnt-bersih__kaki { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--warna-garis); }
.lnt-bersih__hasil { margin: 0; font-size: var(--teks-sm); color: var(--warna-teks-lembut); }
.lnt-bersih__hasil--ada { color: var(--warna-teks); font-weight: var(--tebal-tebal); }
.lnt-bersih__info { grid-column: 1 / -1; display: flex; gap: 6px; margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-samar); }

/* penyusun */
.lnt-penyusun { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jarak-4); }
@media (min-width: 960px) { .lnt-penyusun { grid-template-columns: minmax(0, 1fr) 300px; } }
.lnt-penyusun__form { display: grid; gap: var(--jarak-3); min-width: 0; }
.lnt-label { display: flex; justify-content: space-between; gap: 8px; }
.lnt-hitung { font-size: 11px; font-weight: normal; color: var(--warna-teks-samar); }
.lnt-pesan { min-height: 120px; }
.lnt-penting { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--warna-garis); border-radius: var(--radius-3); cursor: pointer; }
.lnt-penting input { width: 18px; height: 18px; flex: none; }
.lnt-penting:has(input:checked) { border-color: var(--warna-bahaya); background: var(--warna-bahaya-lembut); }
.lnt-penting__teks { display: grid; }
.lnt-penting__teks small { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.lnt-sasaran { display: grid; gap: 10px; }
.lnt-pil-baris { display: flex; flex-wrap: wrap; gap: 6px; }
.lnt-pil {
  display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; border: 1px solid var(--warna-garis); border-radius: 99px;
  background: var(--warna-permukaan); color: var(--warna-teks); font: inherit; font-size: var(--teks-sm); cursor: pointer;
  transition: border-color var(--transisi-cepat), background var(--transisi-cepat), transform var(--transisi-cepat);
}
.lnt-pil:hover { border-color: var(--warna-primer); }
.lnt-pil:active { transform: scale(.96); }
.lnt-pil--aktif { border-color: var(--warna-primer); background: var(--warna-primer-lembut); font-weight: var(--tebal-tebal); }
.lnt-pil--besar.lnt-pil--aktif { background: var(--warna-primer); border-color: var(--warna-primer); color: #fff; }
.lnt-pil--hapus { padding-right: 8px; }
.lnt-saring { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--radius-3); background: var(--warna-permukaan-2); }
.lnt-saring__judul { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.lnt-saring__baris { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 8px; }
.lnt-saring__label { padding-top: 7px; font-size: var(--teks-xs); font-weight: var(--tebal-tebal); color: var(--warna-teks-lembut); }
.lnt-rombel summary { display: flex; align-items: center; gap: 8px; min-height: 34px; cursor: pointer; font-size: var(--teks-sm); font-weight: var(--tebal-sedang); }
.lnt-rombel__isi { max-height: 200px; overflow-y: auto; padding: 4px 0; }
.lnt-orang { display: grid; gap: 6px; }
.lnt-orang__hasil { display: grid; gap: 2px; max-height: 200px; overflow-y: auto; }
.lnt-orang__opsi { display: grid; text-align: left; padding: 6px 10px; border: 0; border-radius: var(--radius-2); background: none; color: inherit; font: inherit; cursor: pointer; }
.lnt-orang__opsi:hover { background: var(--warna-sorot); }
.lnt-orang__opsi strong { font-size: var(--teks-sm); }
.lnt-orang__opsi small { font-size: var(--teks-xs); color: var(--warna-teks-samar); }
.lnt-penerima { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-3); background: var(--warna-primer-lembut); transition: opacity var(--transisi-cepat); }
.lnt-penerima--muat { opacity: .6; }
.lnt-penerima__ikon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--warna-permukaan); color: var(--warna-teks-primer); }
.lnt-penerima__isi { display: grid; }
.lnt-penerima__isi small { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.lnt-unggah {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px dashed var(--warna-garis-kuat); border-radius: var(--radius-3);
  cursor: pointer; transition: border-color var(--transisi-cepat), background var(--transisi-cepat);
}
.lnt-unggah:hover, .lnt-unggah:focus-within { border-color: var(--warna-primer); background: var(--warna-primer-lembut); }
.lnt-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lnt-unggah__ikon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--warna-primer-lembut); color: var(--warna-teks-primer); }
.lnt-unggah__teks { display: grid; }
.lnt-unggah__teks small { font-size: var(--teks-xs); color: var(--warna-teks-lembut); }
.lnt-dua { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--jarak-2); }
.lnt-waktu { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--jarak-2); margin-top: 8px; }

.lnt-penyusun__pratinjau { min-width: 0; }
@media (min-width: 960px) { .lnt-hp { position: sticky; top: 0; } }
.lnt-hp__label { margin: 0 0 8px; font-size: var(--teks-xs); font-weight: var(--tebal-tebal); text-transform: uppercase; letter-spacing: .05em; color: var(--warna-teks-lembut); }
.lnt-hp__layar {
  position: relative; display: grid; gap: 10px; align-content: start; min-height: 260px; padding: 22px 12px 16px; border-radius: 28px;
  background: radial-gradient(120% 80% at 80% 0%, rgba(30, 125, 90, .55), transparent 60%), linear-gradient(160deg, var(--navy-900), var(--navy-600));
  box-shadow: 0 0 0 6px #10161f, var(--bayang-2);
}
.lnt-hp__jam { margin: 0; text-align: center; font-size: 34px; font-weight: 300; color: #fff; letter-spacing: .02em; }
.lnt-hp__notif {
  display: grid; gap: 3px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .88); color: #10161f;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: lnt-masuk .45s var(--kurva, ease) both;
}
.lnt-hp__notif--penting { box-shadow: inset 3px 0 0 #d64545; }
@keyframes lnt-masuk { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
.lnt-hp__app { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #4a5565; }
.lnt-hp__app img { border-radius: 5px; }
.lnt-hp__judul { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.lnt-hp__pesan { font-size: 13px; line-height: 1.35; color: #2b3442; overflow-wrap: anywhere; }
.lnt-hp__lampiran { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 11.5px; color: #4a5565; }

@media (max-width: 767.98px) {
  .lnt-baris { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "c i a" "c b b"; row-gap: 8px; }
  .lnt-baris > .kw-baris__centang { grid-area: c; align-self: start; margin-top: 2px; }
  .lnt-baris__isi { grid-area: i; } .lnt-baris__aksi { grid-area: a; align-self: start; }
  .lnt-baris__baca { grid-area: b; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; justify-items: start; column-gap: 8px; }
  .lnt-baris__baca .lnt-meter { margin: 0; }
  .lnt-aksi { width: 32px; height: 32px; }
  .lnt-baris__aksi { flex-direction: column; }
  .lnt-penyusun__pratinjau { order: -1; }
  .lnt-hp__layar { min-height: 0; padding: 14px 10px 12px; }
  .lnt-hp__jam { font-size: 24px; }
}
@media (max-width: 559.98px) {
  .lnt-saring__baris { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lnt-saring__label { padding-top: 0; }
  .lnt-folder-wadah { width: 100%; }
  .lnt-folder { flex: 1 1 auto; }
}
@media (max-width: 767.98px), (pointer: coarse) { .ntf-cip__item, .lnt-pil { min-height: 40px; } .lnt-aksi { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) {
  .ntf-daftar > li, .lnt-daftar > li, .lnt-hp__notif, .lnt-meter__isi { animation: none; }
  .ntf-pratinjau__putar { animation-duration: 2s; }
}

/* ===================================================== Laporan LSP (v2.62.0) ===
 * Bahasa visual Pengajar (hero navy-emas dari heroSiswa) + kartu putih.
 * Gerak hanya transform/opacity, mati pada prefers-reduced-motion. */
.lap { gap: var(--jarak-5); }
.lap-kop { display: none; }
.lap .sh-hero__stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .lap .sh-hero__stat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lap-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.lap-aksi .tombol { min-height: 40px; }
/* Ponsel: tiga aksi satu baris, ikon di atas teks. */
@media (max-width: 559.98px) {
  .lap-aksi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lap-aksi .tombol { flex-direction: column; gap: 2px; min-height: 56px; padding: 6px 4px; font-size: 12px; line-height: 1.2; white-space: normal; text-align: center; }
}

/* rincian kelompok di dalam hero */
.lap-jenis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.lap-jenis__item { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.lap-jenis__kepala { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.lap-jenis__kepala .angka { font-weight: 800; color: var(--emas-400); }
.lap-jenis__sub { font-size: 12px; opacity: .8; }

/* bilah persen */
.lap-bilah { position: relative; display: block; flex: 1 1 auto; min-width: 48px; height: 8px; border-radius: 99px; background: var(--warna-permukaan-2); overflow: hidden; }
.lap-bilah__isi { position: absolute; inset: 0; width: var(--p); border-radius: inherit; background: var(--navy-400); transform-origin: left; animation: lap-garis .7s var(--kurva) both; }
.lap-bilah--sukses .lap-bilah__isi { background: var(--warna-sukses); }
.lap-bilah--peringatan .lap-bilah__isi { background: var(--warna-peringatan); }
.lap-bilah--bahaya .lap-bilah__isi { background: var(--warna-bahaya); }
@keyframes lap-garis { from { transform: scaleX(0); } }

/* saringan menempel */
.lap-saring {
  position: sticky; top: calc(var(--tinggi-appbar) + var(--aman-atas)); z-index: 4;
  display: grid; gap: 10px; margin-inline: calc(var(--jarak-2) * -1); padding: 10px var(--jarak-2);
  background: var(--warna-latar); box-shadow: 0 10px 14px -14px rgba(16, 32, 52, .35);
}
.lap-saring__baris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lap-saring__waktu { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--warna-teks-samar); }
.lap-saring__kc { display: grid; gap: 6px; }
.lap-saring__kc-wadah:empty { display: none; }
.lap-saring__kc-wadah { margin-top: calc(var(--jarak-2) * -1); }
.lap-saring__label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--warna-teks-samar); }
.lap-saring__petunjuk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--warna-teks-lembut); }
.lap-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--warna-permukaan-2); border: 1px solid var(--warna-garis); }
.lap-seg__item {
  min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--warna-teks-lembut);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--transisi-cepat), color var(--transisi-cepat);
}
.lap-seg__item[aria-checked="true"] { background: var(--warna-permukaan); color: var(--warna-teks); box-shadow: var(--bayang-1); }
.lap-seg--kecil .lap-seg__item { min-height: 30px; font-size: 12px; padding: 0 10px; }
.lap-pilih-wadah { position: relative; display: inline-flex; align-items: center; flex: 1 1 240px; max-width: 380px; color: var(--warna-teks-samar); }
.lap-pilih-wadah > .ikon { position: absolute; left: 11px; pointer-events: none; }
.lap-pilih {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 40px; padding: 0 32px 0 34px;
  border-radius: 12px; border: 1px solid var(--warna-garis); background: var(--warna-permukaan); color: var(--warna-teks);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7e93' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.lap-pilih--kecil { width: auto; padding-left: 12px; min-height: 38px; }
.lap-pilih:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: 1px; }
.lap-ikon-tombol {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px;
  background: transparent; color: var(--warna-teks-lembut); cursor: pointer;
}
.lap-ikon-tombol:hover { background: var(--warna-sorot); color: var(--warna-teks); }

/* cip KC di saringan */
.lap-cip-daftar { display: flex; flex-wrap: wrap; gap: 6px; }
.lap-cip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 34px; padding: 0 10px;
  border-radius: var(--radius-penuh); border: 1px solid var(--warna-garis); background: var(--warna-permukaan);
  color: var(--warna-teks); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color var(--transisi-cepat), background var(--transisi-cepat), transform var(--transisi-cepat);
}
.lap-cip:hover { border-color: var(--warna-primer-garis); }
.lap-cip:active { transform: scale(.97); }
.lap-cip__titik { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warna-garis-kuat); }
.lap-cip--sukses .lap-cip__titik { background: var(--warna-sukses); }
.lap-cip--peringatan .lap-cip__titik { background: var(--warna-peringatan); }
.lap-cip--bahaya .lap-cip__titik { background: var(--warna-bahaya); }
.lap-cip__kode { font-weight: 800; font-family: var(--font-angka); font-size: 11.5px; }
.lap-cip__judul { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--warna-teks-lembut); }
.lap-cip__n { font-weight: 700; }
.lap-cip--aktif { background: var(--navy-800); border-color: var(--navy-800); color: #fff; box-shadow: 0 6px 14px -8px rgba(10, 23, 38, .6); }
.lap-cip--aktif .lap-cip__judul { color: rgba(255, 255, 255, .8); }
.lap-cip--aktif .lap-cip__n { color: var(--emas-400); }

/* panel rincian indikator */
.lap-ik {
  display: grid; gap: 12px; padding: var(--jarak-4); border-radius: var(--radius-3);
  background: var(--warna-permukaan); border: 1px solid var(--warna-primer-garis); box-shadow: var(--bayang-2);
  animation: lap-masuk .3s var(--kurva);
}
.lap-ik--sheet { padding: 0; border: 0; box-shadow: none; animation: none; }
@keyframes lap-masuk { from { opacity: 0; transform: translateY(-8px); } }
.lap-ik__kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lap-ik__alis { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--warna-teks-aksen); }
.lap-ik__judul { font-size: 17px; font-weight: 800; line-height: 1.3; }
.lap-ik__stat { display: flex; flex-wrap: wrap; gap: 8px; }
.lap-ik__saran {
  display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  background: var(--warna-peringatan-lembut); color: var(--warna-teks);
}
.lap-ik__saran .ikon { flex: none; margin-top: 2px; color: var(--warna-teks-peringatan); }
.lap-ik__alat { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lap-ik__daftar { display: grid; gap: 4px; }
.lap-ik__baris {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px;
  padding: 10px 8px; border-radius: 10px; animation: lap-masuk .3s var(--kurva) calc(var(--i, 0) * 25ms) both;
}
.lap-ik__baris:nth-child(odd) { background: var(--warna-permukaan-2); }
.lap-ik__baris--sulit { box-shadow: inset 3px 0 0 var(--warna-bahaya); }
.lap-ik__nomor {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--warna-primer-lembut); color: var(--warna-teks-primer); font-size: 12px; font-weight: 800;
}
.lap-ik__deskripsi { font-size: 13.5px; line-height: 1.45; }
.lap-ik__meter { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.lap-ik__angka { flex: none; min-width: 38px; font-size: 13px; font-weight: 800; text-align: right; }
.lap-ik__jumlah { flex: none; font-size: 12px; color: var(--warna-teks-samar); }
.lap-ik__label { align-self: center; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; background: var(--warna-bahaya-lembut); color: var(--warna-teks-bahaya); white-space: nowrap; }

.lap-stat { display: grid; gap: 1px; min-width: 104px; padding: 8px 12px; border-radius: 12px; background: var(--warna-permukaan-2); }
.lap-stat__nilai { font-size: 18px; font-weight: 800; }
.lap-stat__label { font-size: 11.5px; color: var(--warna-teks-lembut); }
.lap-stat--peringatan .lap-stat__nilai { color: var(--warna-teks-peringatan); }
.lap-stat--bahaya .lap-stat__nilai { color: var(--warna-teks-bahaya); }

/* bagian */
.lap-isi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jarak-6); min-width: 0; transition: opacity .2s; }
.lap > * { min-width: 0; }
.lap-isi--muat { opacity: .5; pointer-events: none; }
.lap-bagian { display: grid; gap: 10px; min-width: 0; }
.lap-bagian__judul { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.lap-bagian__ikon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--navy-800); color: var(--emas-400); }
.lap-bagian__sub { font-size: 13px; color: var(--warna-teks-lembut); }
.lap-kartu { display: grid; gap: 12px; }
.lap-catatan { display: flex; gap: 6px; font-size: 12.5px; line-height: 1.5; color: var(--warna-teks-lembut); }
.lap-catatan .ikon { flex: none; margin-top: 2px; }
.lap-dua { display: grid; gap: var(--jarak-6); }
@media (min-width: 900px) { .lap-dua { grid-template-columns: 1fr 1fr; } }

/* temuan */
.lap-temuan { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lap-temuan__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px;
  border-radius: var(--radius-3); background: var(--warna-permukaan); border: 1px solid var(--warna-garis);
  box-shadow: inset 4px 0 0 var(--lap-nada, var(--warna-garis-kuat)), var(--bayang-1);
  animation: lap-masuk .35s var(--kurva) calc(var(--i, 0) * 40ms) both;
}
.lap-temuan__item--bahaya { --lap-nada: var(--warna-bahaya); --lap-lembut: var(--warna-bahaya-lembut); --lap-teks: var(--warna-teks-bahaya); }
.lap-temuan__item--peringatan { --lap-nada: var(--warna-peringatan); --lap-lembut: var(--warna-peringatan-lembut); --lap-teks: var(--warna-teks-peringatan); }
.lap-temuan__item--info { --lap-nada: var(--warna-primer); --lap-lembut: var(--warna-primer-lembut); --lap-teks: var(--warna-teks-primer); }
.lap-temuan__item--sukses { --lap-nada: var(--warna-sukses); --lap-lembut: var(--warna-sukses-lembut); --lap-teks: var(--warna-teks-sukses); }
.lap-temuan__ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--lap-lembut); color: var(--lap-teks); }
.lap-temuan__isi { display: grid; gap: 4px; min-width: 0; }
.lap-temuan__judul { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.lap-temuan__angka { font-size: 17px; font-weight: 800; color: var(--lap-teks); }
.lap-temuan__rinci { font-size: 13px; line-height: 1.5; color: var(--warna-teks); }
.lap-temuan__mengapa { font-size: 12.5px; line-height: 1.5; color: var(--warna-teks-lembut); }
.lap-temuan__mengapa strong { font-weight: 600; color: var(--warna-teks-lembut); }
.lap-temuan__aksi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lap-tindak {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: var(--radius-penuh); border: 1px solid var(--warna-garis); background: var(--warna-permukaan);
  color: var(--warna-teks); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color var(--transisi-cepat), background var(--transisi-cepat), transform var(--transisi-cepat);
}
.lap-tindak:hover { border-color: var(--lap-nada, var(--warna-primer)); }
.lap-tindak:active { transform: scale(.97); }
.lap-tindak--utama { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.lap-tindak--utama:hover { background: var(--navy-700); }
.lap-tindak--utama .ikon { color: var(--emas-400); }
.lap-temuan-wadah { display: grid; gap: 10px; }
.lap-lagi {
  justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border-radius: var(--radius-penuh); border: 1px solid var(--warna-garis); background: var(--warna-permukaan);
  color: var(--warna-teks); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.lap-lagi:hover { border-color: var(--warna-garis-kuat); }
@media (max-width: 559.98px) {
  .lap-temuan__item { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .lap-temuan__ikon { display: none; }
}
@media print { body.cetak-laporan .lap-temuan__item[hidden] { display: grid !important; } body.cetak-laporan .lap-lagi { display: none !important; } }

/* rapor */
.lap-rapor-wadah { display: grid; gap: 8px; min-width: 0; container-type: inline-size; }
.lap-rapor__alat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lap-rapor__alat .mdata__cari { flex: 1 1 240px; }
.lap-rapor { display: grid; gap: 8px; }
.lap-rapor__kosong { padding: 12px 4px; }
.lap-rapor__kepala, .lap-unit__kepala {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(200px, 2.3fr) minmax(140px, 1.6fr) repeat(4, minmax(64px, .8fr)) minmax(96px, 1fr) 20px;
}
.lap-rapor__kepala { padding: 0 16px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--warna-teks-samar); }
.lap-unit {
  border-radius: var(--radius-3); background: var(--warna-permukaan); border: 1px solid var(--warna-garis); box-shadow: var(--bayang-1);
  overflow: hidden; animation: lap-masuk .3s var(--kurva) calc(var(--i, 0) * 30ms) both;
}
.lap-unit__kepala {
  width: 100%; padding: 12px 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--transisi-cepat);
}
.lap-unit__kepala:hover { background: var(--warna-sorot); }
.lap-unit__kepala:focus-visible { outline: 2px solid var(--warna-fokus); outline-offset: -2px; }
.lap-unit__nama { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lap-unit__kode {
  flex: none; min-width: 52px; padding: 6px 8px; border-radius: 10px; text-align: center;
  font-size: 12px; font-weight: 800; background: var(--navy-800); color: var(--emas-400);
}
.lap-unit__teks { display: grid; min-width: 0; }
.lap-unit__teks strong { font-size: 14px; }
.lap-unit__pic { font-size: 12px; color: var(--warna-teks-lembut); }
.lap-unit__capaian { display: flex; align-items: center; gap: 8px; }
.lap-unit__persen { flex: none; min-width: 38px; font-size: 14px; font-weight: 800; text-align: right; }
.lap-unit__sel { display: grid; font-size: 14px; }
.lap-unit__sel strong { font-weight: 700; }
.lap-unit__label { display: none; font-size: 11px; color: var(--warna-teks-samar); }
.lap-unit__sel--bahaya strong { color: var(--warna-teks-bahaya); }
.lap-unit__sel--peringatan strong { color: var(--warna-teks-peringatan); }
.lap-unit__aktif { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--warna-teks-lembut); }
.lap-titik { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warna-garis-kuat); }
.lap-titik--sukses { background: var(--warna-sukses); } .lap-titik--peringatan { background: var(--warna-peringatan); } .lap-titik--bahaya { background: var(--warna-bahaya); }
.lap-unit__panah { display: grid; place-items: center; color: var(--warna-teks-samar); transition: transform var(--transisi); }
.lap-unit__kepala[aria-expanded="true"] .lap-unit__panah { transform: rotate(180deg); }
.lap-unit__badan { display: grid; gap: 8px; padding: 4px 16px 14px; border-top: 1px dashed var(--warna-garis); }
.lap-unit__ringkas { font-size: 12.5px; color: var(--warna-teks-lembut); padding-top: 8px; }
.lap-kc { display: grid; gap: 4px; }
.lap-kc__baris {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(120px, 1.2fr) minmax(0, 2fr) auto; align-items: center; gap: 12px;
  width: 100%; padding: 10px 10px; border: 0; border-radius: 10px; background: var(--warna-permukaan-2);
  color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--transisi-cepat), transform var(--transisi-cepat);
}
.lap-kc__baris:hover { background: var(--warna-primer-lembut); }
.lap-kc__baris:active { transform: scale(.995); }
.lap-kc__nama { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.lap-kc__kode { font-family: var(--font-angka); font-size: 12px; font-weight: 800; }
.lap-kc__judul { font-size: 13.5px; font-weight: 600; min-width: 0; }
.lap-kc__tingkat { font-size: 11.5px; color: var(--warna-teks-samar); }
.lap-kc__capaian { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.lap-kc__angka { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--warna-teks-lembut); }
.lap-kc__siap { color: var(--warna-teks-peringatan); font-weight: 700; }
.lap-kc__lanjut { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--warna-teks-primer); }

/* Wadah sempit (ponsel, atau layar sedang dengan menu samping): satu unit =
 * nama, bilah capaian, lalu empat angka berlabel. Container query, bukan media
 * query: lebar yang menentukan adalah lebar rapor, bukan lebar layar. */
@container (max-width: 860px) {
  .lap-rapor__kepala { display: none; }
  .lap-unit__kepala {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 20px; row-gap: 10px; column-gap: 8px;
    grid-template-areas: "n n n n p" "c c c c c" "s1 s2 s3 s4 .";
  }
  .lap-unit__nama { grid-area: n; } .lap-unit__panah { grid-area: p; } .lap-unit__capaian { grid-area: c; }
  .lap-unit__kepala > .lap-unit__sel:nth-child(3) { grid-area: s1; }
  .lap-unit__kepala > .lap-unit__sel:nth-child(4) { grid-area: s2; }
  .lap-unit__kepala > .lap-unit__sel:nth-child(5) { grid-area: s3; }
  .lap-unit__kepala > .lap-unit__sel:nth-child(6) { grid-area: s4; }
  .lap-unit__kepala > .lap-unit__aktif { display: none; }
  .lap-unit__label { display: block; }
  .lap-unit__sel { font-size: 13px; }
  .lap-kc__baris { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n l" "c c" "a a"; row-gap: 6px; }
  .lap-kc__nama { grid-area: n; } .lap-kc__lanjut { grid-area: l; } .lap-kc__capaian { grid-area: c; } .lap-kc__angka { grid-area: a; }
}

/* tren */
.lap-tren { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 150px; align-items: end; }
.lap-tren__kolom { display: grid; grid-template-rows: 1fr auto; gap: 4px; height: 100%; min-width: 0; }
.lap-tren__batang { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.lap-tren__isi { width: min(14px, 40%); border-radius: 4px 4px 1px 1px; transform-origin: bottom; animation: lap-tumbuh .6s var(--kurva) both; }
.lap-tren__isi--primer { background: var(--navy-400); }
.lap-tren__isi--aksen { background: var(--emas-500); }
.lap-tren__kunci { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
@keyframes lap-tumbuh { from { transform: scaleY(0); } }
.lap-tren__label { font-size: 11px; text-align: center; color: var(--warna-teks-samar); }

/* jadwal */
.lap-sesi__ringkas { display: flex; flex-wrap: wrap; gap: 8px; }
.lap-sesi { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lap-sesi__baris {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(110px, 160px); align-items: center; gap: 12px;
  width: 100%; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.lap-sesi__baris:hover { background: var(--warna-sorot); }
.lap-sesi__tanggal, .lap-sesi__isi { display: grid; min-width: 0; font-size: 12.5px; color: var(--warna-teks-lembut); }
.lap-sesi__tanggal strong, .lap-sesi__isi strong { font-size: 13.5px; color: var(--warna-teks); }
.lap-sesi__kursi { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
@media (max-width: 559.98px) {
  .lap-sesi__baris { grid-template-columns: 76px minmax(0, 1fr); }
  .lap-sesi__kursi { grid-column: 2; }
  /* Bilah saringan menempel cukup satu baris di ponsel. */
  .lap-saring__baris { flex-wrap: nowrap; gap: 6px; }
  .lap-saring__waktu > span:first-child { display: none; }
  .lap-pilih-wadah { flex: 1 1 0; min-width: 0; max-width: none; }
  .lap-pilih { padding-left: 30px; padding-right: 26px; text-overflow: ellipsis; }
  .lap-pilih-wadah > .ikon { left: 9px; }
  .lap-seg__item { padding: 0 9px; }
  .lap-stat { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .lap-ik__meter { flex-wrap: wrap; }
  .lap-ik__jumlah { flex-basis: 100%; }
  .lap-ik__baris { grid-template-columns: 28px minmax(0, 1fr); }
  .lap-ik__label { grid-column: 2; justify-self: start; }
}

/* ekspor CSV */
.lap-ekspor { border-radius: var(--radius-3); border: 1px dashed var(--warna-garis-kuat); background: var(--warna-permukaan); }
.lap-ekspor > summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--warna-teks-lembut); list-style: none;
}
.lap-ekspor > summary::-webkit-details-marker { display: none; }
.lap-ekspor__isi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 14px; }
.lap-ekspor__isi p { flex-basis: 100%; }

@media (prefers-reduced-motion: reduce) {
  .lap-bilah__isi, .lap-ik, .lap-ik__baris, .lap-temuan__item, .lap-unit, .lap-tren__isi { animation: none; }
}

/* cetak: kop resmi, tanpa kontrol */
@media print {
  body.cetak-laporan .lap-kop { display: block; margin-bottom: 8mm; padding-bottom: 3mm; border-bottom: 2px solid #1e3a5f; }
  .lap-kop__sekolah { font-size: 10pt; color: #555; }
  .lap-kop__judul { font-size: 15pt; font-weight: 800; color: #1e3a5f; }
  .lap-kop__sub { font-size: 9pt; color: #555; }
  body.cetak-laporan .lap-saring, body.cetak-laporan .lap-saring__kc-wadah, body.cetak-laporan .lap-aksi, body.cetak-laporan .lap-temuan__aksi,
  body.cetak-laporan .lap-rapor__alat, body.cetak-laporan .lap-ekspor, body.cetak-laporan .lap-ikon-tombol,
  body.cetak-laporan .sh-cincin__petunjuk, body.cetak-laporan .lap-unit__panah, body.cetak-laporan .lap-kc__lanjut { display: none !important; }
  body.cetak-laporan .lap-unit, body.cetak-laporan .lap-temuan__item, body.cetak-laporan .lap-ik__baris { break-inside: avoid; animation: none; }
  body.cetak-laporan .lap-bagian { break-inside: auto; }
  body.cetak-laporan .lap-bilah, body.cetak-laporan .lap-temuan__item, body.cetak-laporan .sh-hero, body.cetak-laporan .lap-unit__kode,
  body.cetak-laporan .lap-tren__isi, body.cetak-laporan .lap-bagian__ikon { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.cetak-laporan .lap-tren__isi, body.cetak-laporan .lap-bilah__isi { animation: none; }
}