/* ============================================================
   main.css — Sistem desain SobaTKA v2 (R3.1)
   Acuan: RANCANGAN-UI-V2.md §1 (warna, huruf, ukuran, lencana, tombol, ikon)
   dan §2.7 (bilah seksi, toast, keadaan kosong, pemuatan, konfirmasi).

   Aturan:
   - Kode warna hanya boleh ditulis di :root. Komponen memakai var(--…),
     supaya satu warna selalu berarti satu hal (§0.4). Diperiksa uji-konsistensi.js.
   - Token §1.1 ditulis apa adanya; nilainya dicocokkan dengan RANCANGAN-UI-V2.md oleh uji.
   - Bagian KOMPATIBILITAS memetakan nama variabel/kelas v1 ke rupa v2 agar halaman
     lama ikut berganti palet tanpa disentuh. Jangan dipakai di kode baru. Masih dipakai login, profil, ganti-sandi,
     print-kartu, pengguna, diagnostik (R8.5); dihapus saat halaman itu dirapikan (R11).
   ============================================================ */

:root {
  /* ---- §1.1 Warna (apa adanya) ---- */
  --utama:       #1677FF;
  --utama-tua:   #0B5ED7;
  --utama-muda:  #EAF2FF;
  --navy:        #0F2742;
  --gelap:       #1F2937;
  --seksi:       #1F6E8C;
  --oranye:      #F28C38;
  --hijau:       #16A34A;
  --hijau-muda:  #EAF7EF;
  --teal:        #0E9FB0;
  --ungu:        #7C5CC4;
  --merah:       #DC3545;
  --kuning-muda: #FFF4E5;
  --bg:          #F4F6F9;
  --putih:       #FFFFFF;
  --garis:       #E5E7EB;
  --teks:        #1F2937;
  --teks-lemah:  #6B7280;

  /* ---- Turunan (rona gelap/muda dari warna di atas; bukan arti baru) ---- */
  --utama-cincin: rgba(22, 119, 255, .22);
  --hijau-tua:    #15803D;
  --oranye-tua:   #D9731F;
  --oranye-muda:  #FFF1E5;
  --oranye-teks:  #A8500F;
  --merah-tua:    #B02A37;
  --merah-muda:   #FDECEE;
  --teal-tua:     #0B7285;
  --teal-muda:    #E4F6F8;
  --ungu-tua:     #5B3FA8;
  --ungu-muda:    #F1ECFB;
  --navy-muda:    #E8EDF4;
  --gelap-tua:    #111827;
  --kuning-teks:  #92400E;
  --abu:          #EEF0F3;
  --abu-tua:      #4B5563;
  --abu-muda:     #F6F7F9;
  --teks-samar:   #9CA3AF;
  --garis-halus:  #F1F3F6;
  --kepala-tabel: #F9FAFB;
  --putih-lembut: rgba(255, 255, 255, .85);
  --putih-samar:  rgba(255, 255, 255, .65);
  --putih-tipis:  rgba(255, 255, 255, .14);
  --lapisan:      rgba(15, 39, 66, .45);
  --lapisan-muat: rgba(244, 246, 249, .88);
  --kilau:        rgba(255, 255, 255, .6);

  /* ---- §1.2 Huruf ---- */
  --huruf:      Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --huruf-soal: Merriweather, Georgia, "Times New Roman", serif;
  --huruf-kode: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- §1.3 Ukuran ---- */
  --j1: 4px;  --j2: 8px;  --j3: 12px;  --j4: 16px;  --j5: 24px;  --j6: 32px;
  --r-tombol:  8px;
  --r-isian:   8px;
  --r-kartu:   12px;
  --r-lencana: 6px;
  --r-bulat:   999px;
  --bayang-modal: 0 24px 60px -20px rgba(15, 39, 66, .45);
  --bayang-menu:  0 12px 32px -12px rgba(15, 39, 66, .35);

  /* ---- KOMPATIBILITAS v1 → v2 (jangan dipakai di kode baru; dihapus di R11, lihat kepala berkas) ---- */
  --biru:          var(--utama);
  --biru-tua:      var(--utama-tua);
  --biru-muda:     #4C8DFF;
  --navy-tua:      #0A1C30;
  --koral:         var(--oranye);
  --koral-muda:    #F6A25C;
  --kuning:        var(--oranye);
  --isian:         var(--putih);
  --teks-sidebar:        var(--putih-lembut);
  --teks-sidebar-samar:  var(--putih-samar);
  --biru-bg:   var(--utama-muda);   --biru-fg:   var(--utama-tua);
  --hijau-bg:  var(--hijau-muda);   --hijau-fg:  var(--hijau-tua);
  --hijau-bg2: var(--hijau-muda);
  --amber-bg:  var(--oranye-muda);  --amber-fg:  var(--oranye-teks);
  --amber-bg2: var(--oranye-muda);
  --merah-bg:  var(--merah-muda);   --merah-fg:  var(--merah-tua);
  --netral-bg: var(--abu);          --netral-fg: var(--teks);
  --r-medium:  10px;
  --r-kecil:   8px;
  --r-pil:     6px;
  --bayang:    0 1px 2px rgba(15, 39, 66, .05), 0 8px 24px -16px rgba(15, 39, 66, .3);
}

/* ============================================================
   DASAR
   ============================================================ */

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* atribut hidden selalu menang atas display komponen (tombol, kotak) */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--teks);
  font: 400 14px/1.55 var(--huruf);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;                 /* §0.5: halaman tidak pernah menggulir ke samping */
}

h1, h2, h3, h4 { line-height: 1.3; }
.judul-halaman { margin: 0; font: 700 20px/1.3 var(--huruf); }
.judul-kartu   { margin: 0 0 var(--j1); font: 700 16px/1.35 var(--huruf); }

a { color: var(--utama); text-decoration: none; }
a:hover { color: var(--utama-tua); text-decoration: underline; }
::selection { background: var(--utama-muda); color: var(--teks); }

:focus-visible { outline: 2px solid var(--utama); outline-offset: 2px; }

img, svg { max-width: 100%; }

.teks-lemah { color: var(--teks-lemah); }
.teks-samar { color: var(--teks-samar); }
.kode-soal  { font: 500 12px/1.4 var(--huruf-kode); color: var(--teks-lemah); letter-spacing: .01em; }
.tersembunyi { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

code {
  background: var(--abu); padding: 1px 6px; border-radius: var(--r-lencana);
  font: 500 12.5px var(--huruf-kode); color: var(--teks);
}
pre {
  background: var(--gelap); color: var(--garis); padding: var(--j4); border-radius: var(--r-kartu);
  overflow-x: auto; font: 500 12px/1.55 var(--huruf-kode); margin-top: 14px;
}

/* ============================================================
   IKON — sprite img/ikon.svg (§1.6)
   <svg class="ikon"><use href="img/ikon.svg#i-pensil"></use></svg>
   ============================================================ */

.ikon { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.ikon.kecil { width: 14px; height: 14px; vertical-align: -2px; }
.ikon.besar { width: 24px; height: 24px; }

/* ============================================================
   TOMBOL (§1.5)
   ============================================================ */

button, .tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--j2);
  padding: 9px 16px;
  border: 1px solid transparent; border-radius: var(--r-tombol);
  background: var(--utama); color: var(--putih);
  font: 600 14px/1.2 var(--huruf); cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
button:hover, .tombol:hover { background: var(--utama-tua); color: var(--putih); text-decoration: none; }
button:focus-visible, .tombol:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--utama-cincin); }
button:disabled, .tombol[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Tautan bergaya tombol tanpa kelas .tombol (mis. <a class="tombol-garis">): bentuk dasarnya di sini,
   warnanya dari kelas varian di bawah. */
a.tombol-garis, a.tombol-hijau, a.tombol-oranye, a.tombol-gelap, a.tombol-bahaya, a.tombol-kembali,
a.tombol-halus, a.tombol-koral, a.tombol-amber, a.tombol-teal, a.tombol-ikon {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--j2);
  border-style: solid; border-width: 1px; cursor: pointer;
}
a.tombol-garis:hover, a.tombol-hijau:hover, a.tombol-oranye:hover, a.tombol-gelap:hover, a.tombol-bahaya:hover,
a.tombol-kembali:hover, a.tombol-halus:hover, a.tombol-koral:hover, a.tombol-amber:hover, a.tombol-teal:hover,
a.tombol-ikon:hover { text-decoration: none; }
.tombol-garis, .tombol-hijau, .tombol-oranye, .tombol-gelap, .tombol-bahaya,
.tombol-halus, .tombol-koral, .tombol-amber, .tombol-teal {
  padding: 9px 16px; border-radius: var(--r-tombol); font: 600 14px/1.2 var(--huruf);
}

.tombol-hijau  { background: var(--hijau);  color: var(--putih); border-color: transparent; }
.tombol-hijau:hover  { background: var(--hijau-tua); }
.tombol-oranye { background: var(--oranye); color: var(--putih); border-color: transparent; }
.tombol-oranye:hover { background: var(--oranye-tua); }
.tombol-gelap  { background: var(--gelap);  color: var(--putih); border-color: transparent; }
.tombol-gelap:hover  { background: var(--gelap-tua); }
.tombol-bahaya { background: var(--merah);  color: var(--putih); border-color: transparent; }
.tombol-bahaya:hover { background: var(--merah-tua); }
.tombol-teal   { background: var(--teal);   color: var(--putih); border-color: transparent; }   /* Lihat Kisi Kisi (L18) */
.tombol-teal:hover   { background: var(--teal-tua); }
/* K51: aksi berbahaya di baris tabel (Batalkan jadwal) — garis merah, penuh saat diarahkan */
.tombol-garis.garis-bahaya { color: var(--merah); border-color: var(--merah); }
.tombol-garis.garis-bahaya:hover { background: var(--merah); color: var(--putih); }

.tombol-garis {
  background: var(--putih); color: var(--teks); border-color: var(--garis);
}
.tombol-garis:hover { background: var(--abu-muda); color: var(--teks); border-color: var(--teks-samar); }
.tombol-garis.aktif { background: var(--utama-muda); color: var(--utama-tua); border-color: var(--utama); }

.tombol-kembali {
  background: var(--putih); color: var(--utama); border-color: var(--utama);
  border-radius: var(--r-bulat); padding: 7px 14px; font-size: 13px; font-weight: 600;
}
.tombol-kembali:hover { background: var(--utama-muda); color: var(--utama-tua); }

.tombol-ikon {
  width: 32px; height: 32px; padding: 0; border-radius: var(--r-tombol);
  background: var(--putih); color: var(--teks-lemah); border-color: var(--garis);
}
.tombol-ikon:hover { background: var(--abu-muda); color: var(--teks); }
.tombol-ikon.biru   { color: var(--utama); }
.tombol-ikon.oranye { color: var(--oranye); }
.tombol-ikon.hijau  { color: var(--hijau); }
.tombol-ikon.merah  { color: var(--merah); }
.tombol-ikon .ikon  { width: 17px; height: 17px; vertical-align: 0; }

.tombol-kecil { padding: 6px 12px; font-size: 13px; }
.tombol-besar { padding: 13px 24px; font-size: 16px; }
.tombol-penuh { width: 100%; }
.tombol-baris { display: flex; gap: var(--j2); flex-wrap: wrap; align-items: center; }
.tombol-baris.kanan { justify-content: flex-end; }

/* Memuat di dalam tombol (dipasang UI.modal saat menyimpan) */
.tombol.sibuk, button.sibuk { position: relative; color: transparent !important; pointer-events: none; }
.tombol.sibuk::after, button.sibuk::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--putih-samar); border-top-color: var(--putih);
  animation: putar .7s linear infinite;
}
.tombol-garis.sibuk::after { border-color: var(--garis); border-top-color: var(--utama); }

/* ============================================================
   LENCANA (§1.4) — peta status → warna ada di UI.STATUS (utils.js, R3.2)
   ============================================================ */

.lencana {
  display: inline-flex; align-items: center; gap: var(--j1);
  padding: 3px 9px; border-radius: var(--r-lencana); border: 1px solid transparent;
  font: 600 12px/1.4 var(--huruf); white-space: nowrap; vertical-align: middle;
}
.lencana.abu      { background: var(--abu);         color: var(--abu-tua); }
.lencana.abu-tua  { background: var(--abu-tua);     color: var(--putih); }
.lencana.abu-muda { background: var(--abu-muda);    color: var(--teks-lemah); border-color: var(--garis-halus); }
.lencana.garis    { background: var(--putih);       color: var(--teks-lemah); border-color: var(--garis); }
.lencana.teal     { background: var(--teal-muda);   color: var(--teal-tua); }
.lencana.navy     { background: var(--navy);        color: var(--putih); }
.lencana.oranye   { background: var(--oranye-muda); color: var(--oranye-teks); }
.lencana.merah    { background: var(--merah-muda);  color: var(--merah-tua); }
.lencana.hijau    { background: var(--hijau-muda);  color: var(--hijau-tua); }
.lencana.ungu     { background: var(--ungu-muda);   color: var(--ungu-tua); }
.lencana.kecil    { padding: 1px 7px; font-size: 11px; }   /* peran pada penugasan: penyusun · reviewer */

/* K72: isian batas predikat (Pengaturan › Mata Pelajaran, Pengaturan Event) */
.mapel-predikat { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.mapel-predikat label, .form-baris .mapel-predikat label { display: inline-flex; gap: 6px; align-items: center; width: auto; padding: 0; margin: 0;
  white-space: nowrap; font: 500 14px var(--huruf); color: var(--teks); }
.mapel-predikat input { width: 76px; }

/* ============================================================
   KARTU
   ============================================================ */

.kartu {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--r-kartu); padding: 20px;
  min-width: 0;                       /* dalam grid/flex: tabel lebar bergulir di dalam kartu, bukan melebarkan halaman */
}
.kartu.rapat { padding: var(--j4); }
.kartu h2 { margin: 0 0 var(--j1); font: 700 16px/1.35 var(--huruf); }
.kartu .sub { margin: 0 0 var(--j4); font: 400 13px/1.5 var(--huruf); color: var(--teks-lemah); }
.kepala-kartu {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--j3); flex-wrap: wrap;
  margin-bottom: var(--j4);
}

.petak { display: grid; gap: var(--j3); }
.petak-2 { grid-template-columns: repeat(2, 1fr); }
.petak-3 { grid-template-columns: repeat(3, 1fr); }
.petak-4 { grid-template-columns: repeat(4, 1fr); }
.petak-auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width: 1100px) { .petak-4, .petak-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .petak-2, .petak-3, .petak-4 { grid-template-columns: 1fr; } }

/* ============================================================
   BILAH SEKSI (§2.7) — Stimulus, Butir Soal, Petunjuk Pengisian dan Pembahasan
   ============================================================ */

.bilah-seksi {
  display: flex; align-items: center; gap: var(--j2);
  padding: 9px 14px; border-radius: 6px;
  background: var(--seksi); color: var(--putih);
  font: 700 14px/1.3 var(--huruf);
}

/* ============================================================
   FORMULIR
   ============================================================ */

.medan { margin-bottom: var(--j4); }
.medan label, .label {
  display: block; margin-bottom: 6px;
  font: 600 13px/1.4 var(--huruf); color: var(--teks);
}
.medan .bantuan { margin: 6px 0 0; font: 400 12.5px/1.45 var(--huruf); color: var(--teks-lemah); }
.medan .opsional { font-weight: 400; color: var(--teks-lemah); }
.medan .galat-isian { margin: 6px 0 0; font: 500 12.5px/1.45 var(--huruf); color: var(--merah-tua); }
.wajib { color: var(--merah); }

input[type=text], input[type=search], input[type=number], input[type=email], input[type=password],
input[type=tel], input[type=url], input[type=date], input[type=time], input[type=datetime-local],
select, textarea {
  width: 100%; padding: 9px 12px; min-height: 38px;
  border: 1px solid var(--garis); border-radius: var(--r-isian);
  background: var(--putih); color: var(--teks);
  font: 400 14px/1.4 var(--huruf);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 90px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--teks-samar); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--utama); box-shadow: 0 0 0 3px var(--utama-cincin);
}
input:disabled, select:disabled, textarea:disabled, input[readonly] {
  background: var(--abu-muda); color: var(--teks-lemah); cursor: not-allowed;
}
input.galat, select.galat, textarea.galat { border-color: var(--merah); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--utama); margin: 0; }

/* Formulir dalam modal: label kiri ±30%, isian kanan (§2.3); bertumpuk di HP */
.form-baris {
  display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: var(--j2) var(--j4);
  align-items: start; margin-bottom: var(--j3);
}
.form-baris > label { margin: 9px 0 0; font: 600 13px/1.4 var(--huruf); }
.form-baris > div { min-width: 0; }   /* isian panjang membungkus, tidak meluber keluar jendela */
@media (max-width: 768px) {
  .form-baris { grid-template-columns: 1fr; gap: 6px; }
  .form-baris > label { margin: 0; }
}

.pilihan { display: flex; gap: var(--j2) var(--j4); flex-wrap: wrap; }
.pilihan label { display: inline-flex; align-items: center; gap: var(--j2); font: 500 14px var(--huruf); cursor: pointer; }

/* Cip (UI.pilihPengguna, Penugasan Masal) */
.cip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 4px 3px 10px; border-radius: var(--r-bulat);
  background: var(--utama-muda); color: var(--utama-tua);
  font: 500 13px/1.4 var(--huruf);
}
.cip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cip button {
  width: 20px; height: 20px; padding: 0; border-radius: 50%;
  background: transparent; color: var(--utama-tua); font-size: 14px; line-height: 1;
}
.cip button:hover { background: var(--utama); color: var(--putih); }
.daftar-cip { display: flex; flex-wrap: wrap; gap: 6px; }

.form-baris .bantuan { margin: 6px 0 0; font: 400 12.5px/1.45 var(--huruf); color: var(--teks-lemah); }
.form-baris .bantuan:empty { display: none; }
.form-baris .bantuan .ikon { width: 14px; height: 14px; vertical-align: -2px; }

/* Kisi-kisi (K29): formulir bersama js/kisi-pilih.js (kisi.html, kelola.html) dan rincian baca saja. */
.formulir-kisi select { width: 100%; }
.formulir-kisi select:disabled { background: var(--abu-muda); color: var(--teks); opacity: 1; }
.kotak-sub { margin-top: 6px; padding: 8px 10px; border-radius: var(--r-kartu); background: var(--abu-muda);
  font: 400 13px/1.5 var(--huruf); color: var(--teks); }
.kotak-sub.terisi { background: var(--utama-muda); }
.kode-ind { font: 600 12.5px/1.4 var(--huruf-kode); color: var(--navy); }
.level-kognitif { display: inline-block; min-width: 28px; padding: 1px 8px; border-radius: 999px; text-align: center;
  background: var(--utama-muda); color: var(--utama-tua); font: 700 12px/1.5 var(--huruf); }
.info-kisi { display: grid; gap: 4px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-kartu); background: var(--abu-muda); }
.info-kisi div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; font: 400 13px/1.5 var(--huruf); }
.info-kisi dt { color: var(--teks-lemah); }
.info-kisi dd { margin: 0; color: var(--teks); font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 768px) { .info-kisi div { grid-template-columns: 110px minmax(0, 1fr); } }

/* Pemilih pengguna (UI.pilihPengguna, §2.4) */
.pilih-pengguna { position: relative; }
.pilih-pengguna .daftar-cip:not(:empty) { margin-bottom: var(--j2); }
.pilih-daftar { left: 0; right: 0; top: 100%; margin-top: var(--j1); max-height: 264px; overflow-y: auto; }
/* Di dalam modal daftar pilihan ikut mengalir di isi modal (tidak terpotong tepi modal) dan lebih tinggi. */
.modal-isi .pilih-daftar { position: static; max-height: 320px; box-shadow: none; }
.pilih-butir {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 6px;
  font: 500 14px/1.4 var(--huruf); color: var(--teks); cursor: pointer;
}
.pilih-butir.aktif, .pilih-butir:hover { background: var(--utama-muda); color: var(--utama-tua); }
.pilih-butir small { font: 400 12px/1.4 var(--huruf); color: var(--teks-lemah); }
.pilih-butir.terlarang, .pilih-butir.terlarang:hover { background: transparent; color: var(--teks-samar); cursor: not-allowed; }
.pilih-butir.kosong-pilih, .pilih-butir.kosong-pilih:hover { background: transparent; color: var(--teks-lemah); cursor: default; }

/* ============================================================
   PESAN (kotak di dalam halaman)
   ============================================================ */

.pesan {
  padding: 12px 14px; border-radius: var(--r-isian); border: 1px solid transparent;
  font: 400 14px/1.55 var(--huruf);
}
.pesan.ok         { background: var(--hijau-muda);  color: var(--hijau-tua);  border-color: var(--hijau-muda); }
.pesan.gagal      { background: var(--merah-muda);  color: var(--merah-tua);  border-color: var(--merah-muda); }
.pesan.info       { background: var(--utama-muda);  color: var(--utama-tua);  border-color: var(--utama-muda); }
.pesan.tunda,
.pesan.peringatan { background: var(--kuning-muda); color: var(--kuning-teks); border-color: var(--oranye-muda); }
.pesan code { background: var(--putih-lembut); }

/* ============================================================
   TABEL (§2.2) — tampilan; perilaku di UI.tabel (R3.2)
   ============================================================ */

.tabel-alat {
  display: flex; align-items: center; justify-content: space-between; gap: var(--j3); flex-wrap: wrap;
  margin-bottom: var(--j3); font: 400 13px var(--huruf); color: var(--teks-lemah);
}
.tabel-alat label { display: inline-flex; align-items: center; gap: var(--j2); min-width: 0; max-width: 100%; }
.tabel-alat input[type=search] { width: 240px; max-width: 100%; min-width: 0; flex: 0 1 240px; }
.tabel-alat select { width: auto; min-width: 72px; }

.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left; padding: 10px 12px; white-space: nowrap;
  background: var(--kepala-tabel); border-bottom: 1px solid var(--garis);
  font: 600 13px/1.35 var(--huruf); color: var(--teks);
}
table.data td {
  padding: 10px 12px; border-bottom: 1px solid var(--garis-halus);
  font: 400 14px/1.45 var(--huruf); vertical-align: middle;
}
table.data tbody tr:hover td { background: var(--abu-muda); }
table.data tr:last-child td { border-bottom: none; }
table.data td.angka, table.data th.angka { text-align: right; }
table.data .pilih-baris { width: 36px; }

/* table.data th.bisa-urut: harus lebih spesifik daripada `table.data th` (padding 12px) agar panah urut tidak menimpa judul. */
table.data th.bisa-urut { cursor: pointer; user-select: none; padding-right: 26px; position: relative; }
th.bisa-urut::after {
  content: "⇅"; position: absolute; right: 10px; color: var(--teks-samar); font-size: 12px;
}
th.bisa-urut.naik::after  { content: "▲"; color: var(--utama); font-size: 10px; }
th.bisa-urut.turun::after { content: "▼"; color: var(--utama); font-size: 10px; }

.tabel-kaki {
  display: flex; align-items: center; justify-content: space-between; gap: var(--j3); flex-wrap: wrap;
  margin-top: var(--j3); font: 400 13px var(--huruf); color: var(--teks-lemah);
}
.halaman { display: flex; gap: var(--j1); flex-wrap: wrap; }
.halaman button {
  min-width: 32px; height: 32px; padding: 4px 9px;
  background: var(--putih); color: var(--teks); border-color: var(--garis); font-weight: 500; font-size: 13px;
}
.halaman button:hover { background: var(--abu-muda); color: var(--teks); }
.halaman button.aktif { background: var(--utama); color: var(--putih); border-color: var(--utama); }
.halaman button:disabled { opacity: .45; }

.aksi-baris { display: flex; gap: 6px; flex-wrap: wrap; }
.saring { display: flex; gap: var(--j2); flex-wrap: wrap; align-items: center; }
.saring input[type=search] { max-width: 250px; }
.saring select { max-width: 200px; }

table.data td.kosong-sel { padding: 0; }
table.data tbody tr.baris-kosong:hover td { background: transparent; }

/* Di HP setiap baris menjadi kartu kecil: judul kolom di kiri, isi di kanan (UI.tabel opsi kartuHp) */
@media (max-width: 768px) {
  table.data.kartu-hp thead { display: none; }
  table.data.kartu-hp tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--garis); }
  table.data.kartu-hp tr:last-child { border-bottom: none; }
  table.data.kartu-hp td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--j3);
    padding: 5px 0; border: none; text-align: right;
  }
  table.data.kartu-hp td::before {
    content: attr(data-label); flex: none; max-width: 40%;
    font: 600 12px var(--huruf); color: var(--teks-lemah); text-align: left;
  }
  table.data.kartu-hp td.kosong-sel { display: block; }
  table.data.kartu-hp td.kosong-sel::before, table.data.kartu-hp td.pilih-baris::before,
  table.data.kartu-hp td[data-label=""]::before { content: none; }
  table.data.kartu-hp tbody tr:hover td { background: transparent; }
  table.data.kartu-hp .aksi-baris { justify-content: flex-end; }
}

/* Tab halaman (Pengguna · Impor · Sekolah; Kisi-Kisi · Penulisan · Telaah) — tab dibuka lewat hash */
.tab-baris { display: flex; gap: 6px; margin-bottom: var(--j4); flex-wrap: wrap; }
.tab-baris button { background: var(--putih); color: var(--teks-lemah); border-color: var(--garis); }
.tab-baris button:hover { background: var(--abu-muda); color: var(--teks); }
.tab-baris button.aktif { background: var(--utama); border-color: var(--utama); color: var(--putih); }
.tab { display: none; }
.tab.aktif { display: block; }

/* Kartu angka (Dasbor L04): label kecil, angka besar, keterangan; garis kiri berwarna menurut arti */
.kartu-angka {
  min-width: 0; padding: 14px 16px; border: 1px solid var(--garis); border-left: 4px solid var(--utama);
  border-radius: var(--r-kartu); background: var(--putih);
}
.kartu-angka.hijau  { border-left-color: var(--hijau); }
.kartu-angka.oranye { border-left-color: var(--oranye); }
.kartu-angka.merah  { border-left-color: var(--merah); }
.kartu-angka small { display: block; font: 600 12px/1.3 var(--huruf); color: var(--teks-lemah); text-transform: uppercase; letter-spacing: .04em; }
.kartu-angka b { display: block; margin: 6px 0 8px; font: 700 24px/1.15 var(--huruf); color: var(--navy); }
.kartu-angka .ket { margin: 6px 0 0; font: 400 12.5px/1.45 var(--huruf); color: var(--teks-lemah); }

/* Batang progres (Progres Penugasan / Pengerjaan) — HTML-nya dari UI.progres */
.progres { display: flex; align-items: center; gap: var(--j2); min-width: 140px; }
.progres .alur {
  flex: 1; height: 8px; border-radius: var(--r-bulat); background: var(--garis-halus); overflow: hidden;
}
.progres .alur > span { display: block; height: 100%; width: 0; background: var(--utama); border-radius: var(--r-bulat); }
.progres.hijau .alur > span { background: var(--hijau); }
.progres .nilai { font: 500 12.5px var(--huruf); color: var(--teks-lemah); white-space: nowrap; }

/* ============================================================
   KEADAAN KOSONG & PEMUATAN (§2.7)
   ============================================================ */

.kosong {
  display: flex; flex-direction: column; align-items: center; gap: var(--j2);
  padding: 40px 20px; text-align: center; color: var(--teks-lemah); font: 400 14px/1.5 var(--huruf);
}
.kosong > .ikon { width: 40px; height: 40px; color: var(--teks-samar); opacity: .6; }
.kosong .tombol { margin-top: var(--j1); }

.kerangka-baris {
  height: 14px; border-radius: var(--r-lencana); margin: 10px 0;
  background: linear-gradient(90deg, var(--abu) 0%, var(--garis-halus) 50%, var(--abu) 100%);
  background-size: 200% 100%; animation: kilau 1.2s ease-in-out infinite;
}
.kerangka-baris.pendek { width: 40%; }
.kerangka-baris.sedang { width: 70%; }
@keyframes kilau { from { background-position: 200% 0; } to { background-position: -200% 0; } }

#memuat {
  position: fixed; inset: 0; z-index: 1000; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: var(--j3);
  background: var(--lapisan-muat);
}
#memuat p { margin: 0; font: 500 14px var(--huruf); color: var(--teks-lemah); }
.putaran {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--garis); border-top-color: var(--utama);
  animation: putar .7s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg); } }

/* K50 Tahap 2 — Mode Tembolok (js/tembolok.js) */
.bilah-tembolok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--j3);
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-kartu); border: 1px solid var(--garis); background: var(--abu-muda); }
.bilah-tembolok.nyala { border-color: var(--teal); background: var(--teal-muda); }
.bilah-tembolok .isi-tembolok { flex: 1 1 320px; font: 400 13.5px/1.55 var(--huruf); color: var(--teks); }
.bilah-tembolok > .pesan { flex: 1 1 100%; }
.bilah-tembolok .daftar-ditolak { margin: 6px 0 0; padding-left: 18px; }
.teks-oranye { color: var(--oranye-teks); }
.daftar-kunci { margin: 6px 0 0; padding-left: 18px; }
.daftar-kunci li { margin: 4px 0; }
.lencana-lokal, .lencana-ditolak, .lencana-kunci, .lencana-minta, .lencana-peramban { display: inline-block; margin: 2px 0 0; padding: 1px 7px; border-radius: var(--r-lencana);
  font: 600 11.5px/1.5 var(--huruf); white-space: nowrap; vertical-align: middle; }
.lencana-lokal { background: var(--oranye-muda); color: var(--oranye-teks); }
.lencana-ditolak { background: var(--merah-muda); color: var(--merah-tua); }
.lencana-peramban { background: var(--navy-muda); color: var(--navy); }   /* K56 */
.lencana-kunci { background: var(--abu); color: var(--abu-tua); max-width: 14em; overflow: hidden; text-overflow: ellipsis; }
.lencana-kunci.saya { background: var(--teal-muda); color: var(--teal-tua); }
/* K55 — permintaan perbaikan dari penulis */
.lencana-minta { background: var(--ungu-muda); color: var(--ungu-tua); cursor: help; }
.bilah-minta { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--ungu-muda); color: var(--teks); font: 400 13.5px/1.55 var(--huruf); }
.bilah-minta b { color: var(--ungu-tua); }
.bilah-minta .tombol-baris { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* K50 — tanda data tersimpan di atas tabel (UI.tandaSalinan) */
.tanda-salinan { margin: 0 0 10px; font: 500 13px/1.5 var(--huruf); color: var(--teks-lemah); }
.tanda-salinan .putar { display: inline-block; animation: putar 1s linear infinite; }
.tanda-salinan[data-keadaan="galat"] { color: var(--merah-tua); }

@media (prefers-reduced-motion: reduce) {
  .kerangka-baris, .putaran, .tanda-salinan .putar, .tombol.sibuk::after, button.sibuk::after { animation-duration: 3s; }
  * { transition-duration: .01ms !important; }
}

/* ============================================================
   MODAL (§2.3) — UI.modal memakai .kotak-modal.tersusun
   ============================================================ */

.lapisan-modal {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: var(--lapisan);
}
.kotak-modal {
  width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--putih); border-radius: var(--r-kartu); padding: 24px;
  box-shadow: var(--bayang-modal);
}
.kotak-modal.lebar { max-width: 720px; }
.kotak-modal.tersusun { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.modal-kepala {
  display: flex; align-items: center; justify-content: space-between; gap: var(--j3);
  padding: 14px 20px; border-bottom: 1px solid var(--garis);
}
.modal-kepala h2 { margin: 0; font: 700 16px/1.35 var(--huruf); }
.modal-tutup {
  width: 32px; height: 32px; padding: 0; border-radius: var(--r-tombol);
  background: transparent; color: var(--teks-lemah); font-size: 20px; line-height: 1;
}
.modal-tutup:hover { background: var(--abu); color: var(--teks); }
.modal-isi { padding: 20px; overflow-y: auto; }
.modal-isi > .sub, .modal-isi .tempat-galat + .sub { margin: 0 0 var(--j4); font: 400 13px/1.5 var(--huruf); color: var(--teks-lemah); }
.modal-kaki {
  display: flex; justify-content: flex-end; gap: var(--j2); flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--garis); background: var(--kepala-tabel);
}
@media (max-width: 768px) {
  .lapisan-modal { padding: 12px; align-items: flex-end; }
  .kotak-modal { max-height: calc(100vh - 24px); }
}

/* Menu tarik-turun (avatar, Pengaturan ▾) — dipakai kerangka R3.3 */
.menu-turun {
  position: absolute; z-index: 700; min-width: 200px; padding: 6px;
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-kartu);
  box-shadow: var(--bayang-menu);
}
.menu-turun a, .menu-turun button {
  display: flex; width: 100%; justify-content: flex-start; gap: var(--j2);
  padding: 8px 10px; border-radius: 6px; border: none;
  background: transparent; color: var(--teks); font: 500 14px var(--huruf); text-decoration: none;
}
.menu-turun a:hover, .menu-turun button:hover { background: var(--utama-muda); color: var(--utama-tua); }

/* ============================================================
   TOAST (§2.7) — pojok kanan atas; UI.pesan menghilangkannya setelah 4 detik
   ============================================================ */

.toast {
  position: fixed; top: 16px; right: 16px; z-index: 900;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: var(--r-isian);
  background: var(--utama); color: var(--putih);
  font: 500 14px/1.45 var(--huruf); box-shadow: var(--bayang-menu);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.tampil   { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast.info     { background: var(--utama); }
.toast.berhasil { background: var(--hijau); }
.toast.galat    { background: var(--merah); }
@media (max-width: 768px) { .toast { left: 12px; right: 12px; top: 12px; max-width: none; } }

/* ============================================================
   MEREK & LAYAR TENGAH (masuk, ganti sandi, diagnostik)
   ============================================================ */

.merek-baris { display: flex; align-items: center; gap: var(--j3); margin-bottom: 22px; }
.merek-baris .logo {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--utama); color: var(--putih); font: 800 22px/1 var(--huruf);
}
/* Lambang Kabupaten Deli Serdang (K24) menggantikan kotak "S"; berkas img/lambang-deli-serdang.png (149×192). */
.lambang { flex: none; display: block; width: auto; height: 46px; }
.merek-baris h1 { margin: 0; font: 700 18px/1.25 var(--huruf); color: var(--navy); }
.merek-baris p  { margin: 0; font: 400 12.5px/1.4 var(--huruf); color: var(--teks-lemah); }

.layar-tengah { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.kotak-tengah {
  width: 100%; max-width: 440px; padding: 32px 28px;
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-kartu);
}
.kotak-tengah.lebar { max-width: 580px; }

/* ============================================================
   TEKS SOAL (§1.2) — pratinjau, telaah, ujian, cetak
   ============================================================ */

.teks-soal { font: 400 16px/1.7 var(--huruf-soal); color: var(--teks); }
.opsi-soal {
  display: flex; align-items: center; gap: var(--j3);
  padding: 12px 14px; border-radius: var(--r-isian);
  background: var(--putih); border: 1px solid var(--garis);
  font: 400 15px/1.6 var(--huruf-soal);
}
.opsi-soal.kunci { border: 2px solid var(--hijau); background: var(--hijau-muda); }
.opsi-soal b { font: 700 12px var(--huruf); color: var(--teks-lemah); }

/* ============================================================
   HALAMAN PEMERIKSAAN SISTEM (diagnostik.html)
   ============================================================ */

.periksa { list-style: none; margin: var(--j4) 0 0; padding: 0; }
.periksa li { display: flex; align-items: flex-start; gap: var(--j3); padding: var(--j3) 0; border-bottom: 1px solid var(--garis-halus); }
.periksa li:last-child { border-bottom: none; }
.periksa .tanda {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 700 12px var(--huruf); color: var(--putih);
}
.tanda.ok     { background: var(--hijau); }
.tanda.gagal  { background: var(--merah); }
.tanda.tunda  { background: var(--oranye); }
.tanda.nunggu { background: var(--garis); color: var(--teks-lemah); }
.periksa .isi { flex: 1; min-width: 0; }
.periksa .judul { font: 600 14px var(--huruf); }
.periksa .ket { font: 400 13px/1.55 var(--huruf); color: var(--teks-lemah); word-break: break-word; }
.langkah { margin: 10px 0 0; padding-left: 20px; font: 400 14px/1.8 var(--huruf); color: var(--teks-lemah); }

/* ============================================================
   BILAH ATAS (§2.1) — dipasang kerangka.js di semua halaman berakun.
   Halaman muka (index.html, K23) punya gaya sendiri di halamannya.
   ============================================================ */

.kerangka {
  position: sticky; top: 0; z-index: 500;
  background: var(--putih); border-bottom: 1px solid var(--garis);
}
.kerangka-isi {
  position: relative; display: flex; align-items: center; gap: var(--j4);
  min-height: 64px; padding: 8px 24px;
}
.kerangka-merek { display: flex; align-items: center; gap: 10px; flex: none; color: var(--navy); text-decoration: none; }
.kerangka-merek:hover { color: var(--navy); text-decoration: none; }
.kerangka .lambang { height: 42px; }
.kerangka-merek-teks b { display: block; font: 700 16px/1.2 var(--huruf); }
.kerangka-merek-teks small { display: block; font: 400 11.5px/1.3 var(--huruf); color: var(--teks-lemah); }
.kerangka-spasi { flex: 1; }

.kerangka-nav { flex: 1 1 auto; min-width: 0; }
.kerangka-nav ul { list-style: none; margin: 0; padding: 0; }
.kerangka-nav > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.kerangka-nav li { position: relative; }
.kerangka-tautan {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px;
  border: none; border-radius: var(--r-tombol); background: transparent;
  color: var(--teks-lemah); font: 600 14px/1.2 var(--huruf); text-decoration: none; white-space: nowrap;
}
.kerangka-tautan:hover { background: var(--abu-muda); color: var(--teks); text-decoration: none; }
.kerangka-tautan.aktif { background: var(--utama-muda); color: var(--utama-tua); }
.kerangka-kembali { color: var(--utama); }
.kerangka-caret { width: 14px; height: 14px; transition: transform .15s; }
[aria-expanded="true"] > .kerangka-caret { transform: rotate(180deg); }
.kerangka-lihat {
  padding: 1px 6px; border-radius: var(--r-lencana); background: var(--abu);
  font: 600 10.5px var(--huruf); color: var(--teks-lemah); text-transform: uppercase; letter-spacing: .04em;
}
.kerangka-anak { top: calc(100% + 6px); left: 0; }
.kerangka-anak a.aktif { background: var(--utama-muda); color: var(--utama-tua); }
/* K76/K67.5: menu lebar sedang (769–1180px) — ikon menu disembunyikan agar label panjang ("Capaian Pembelajaran") tetap satu baris. */
@media (min-width: 769px) and (max-width: 1180px) {
  .kerangka-nav .kerangka-tautan { padding: 8px 8px; }
  .kerangka-nav .kerangka-tautan > svg:not(.kerangka-caret) { display: none; }
}

.kerangka-kanan { display: flex; align-items: center; gap: var(--j2); flex: none; margin-left: auto; }
.kerangka-kode {
  padding: 4px 10px; border-radius: var(--r-lencana); background: var(--navy); color: var(--putih);
  font: 700 12px var(--huruf-kode); letter-spacing: .04em;
}
.kerangka-lonceng, .kerangka-akun { position: relative; }
.kerangka-ikon, .kerangka-tombol-menu {
  position: relative; width: 40px; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--teks-lemah);
}
.kerangka-ikon:hover, .kerangka-tombol-menu:hover,
.kerangka-ikon[aria-expanded="true"], .kerangka-tombol-menu[aria-expanded="true"] { background: var(--abu-muda); color: var(--teks); }
.kerangka-angka {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-bulat); background: var(--merah); color: var(--putih); font: 700 11px/18px var(--huruf);
}
.kerangka-angka[hidden] { display: none; }
.kerangka-avatar {
  gap: var(--j2); padding: 3px 10px 3px 3px; border: 1px solid transparent; border-radius: var(--r-bulat);
  background: transparent; color: var(--teks); text-align: left;
}
.kerangka-avatar:hover, .kerangka-avatar[aria-expanded="true"] { background: var(--abu-muda); color: var(--teks); }
.kerangka-avatar .avatar { background: var(--utama-muda); color: var(--utama-tua); }
.kerangka-nama b { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.25 var(--huruf); }
.kerangka-nama small { display: block; font: 400 11.5px/1.25 var(--huruf); color: var(--teks-lemah); }
.kerangka-turun-kanan { top: calc(100% + 6px); right: 0; max-width: calc(100vw - 24px); }
.kerangka-tugas { width: 300px; }
.kerangka-siapa { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--garis); }
.kerangka-siapa b { display: block; font: 600 14px var(--huruf); }
.kerangka-siapa small { display: block; font: 400 12px var(--huruf); color: var(--teks-lemah); word-break: break-word; }
.kerangka-judul-turun { margin: 4px 10px 6px; font: 700 11.5px var(--huruf); color: var(--teks-lemah); text-transform: uppercase; letter-spacing: .05em; }
.kerangka-kosong { margin: 6px 10px 10px; font: 400 13px/1.5 var(--huruf); color: var(--teks-lemah); }
.kerangka-tombol-menu { display: none; }

/* Isi halaman di bawah bilah atas */
.hal-isi { max-width: 1180px; margin: 0 auto; padding: 22px 24px 70px; }
.hal-isi.sempit { max-width: 780px; }
.judul-halaman-baris { display: flex; align-items: center; justify-content: space-between; gap: var(--j3); flex-wrap: wrap; margin-bottom: var(--j4); }
.judul-halaman-baris h1 { margin: 0; font: 700 20px/1.3 var(--huruf); color: var(--navy); }

@media (max-width: 1279.98px) { .kerangka-nama { display: none; } .kerangka-avatar { padding-right: 6px; } }
@media (max-width: 1439.98px) {
  /* Menu event Admin paling panjang: nama di avatar disembunyikan agar menu tetap satu baris di 1366px. */
  .dalam-event .kerangka-nama { display: none; }
  .dalam-event .kerangka-avatar { padding-right: 6px; }
  .dalam-event .kerangka-merek-teks small { display: none; }
}
@media (max-width: 767.98px) {
  .kerangka-isi { min-height: 56px; padding: 8px 12px; gap: var(--j2); }
  .kerangka-merek-teks small { display: none; }
  .kerangka .lambang { height: 36px; }
  .kerangka-tombol-menu { display: inline-flex; order: 3; }
  .kerangka-kanan { order: 2; gap: 2px; }
  .kerangka-avatar .kerangka-caret { display: none; }
  .kerangka-avatar { padding: 3px; }
  .kerangka-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; order: 4;
    max-height: calc(100vh - 56px); overflow: auto; padding: 8px 12px 14px;
    background: var(--putih); border-bottom: 1px solid var(--garis); box-shadow: var(--bayang-menu);
  }
  .kerangka-nav.terbuka { display: block; }
  .kerangka-nav > ul { flex-direction: column; align-items: stretch; }
  .kerangka-tautan { width: 100%; justify-content: flex-start; padding: 11px 12px; }
  .kerangka-anak { position: static; min-width: 0; padding: 0 0 4px 22px; border: none; box-shadow: none; }
  /* R4.2: panel lonceng/avatar selebar layar (ditambat ke bilah, bukan ke tombolnya) agar tidak terpotong di kiri. */
  .kerangka-lonceng, .kerangka-akun { position: static; }
  .kerangka-turun-kanan { top: calc(100% - 2px); left: 12px; right: 12px; width: auto; max-width: none; }
  .hal-isi { padding: 16px 14px 60px; }
}

/* ============================================================
   KOMPATIBILITAS v1 → v2 (jangan dipakai di kode baru; dihapus di R11, lihat kepala berkas)
   ============================================================ */

.tombol-halus { background: var(--putih); color: var(--teks); border-color: var(--garis); }
.tombol-halus:hover { background: var(--abu-muda); color: var(--teks); border-color: var(--teks-samar); }
.tombol-koral { background: var(--oranye); color: var(--putih); border-color: transparent; }
.tombol-koral:hover { background: var(--oranye-tua); color: var(--putih); }
.tombol-amber { background: var(--oranye-muda); color: var(--oranye-teks); border-color: var(--oranye-muda); }
.tombol-amber:hover { background: var(--kuning-muda); color: var(--oranye-teks); }

.lencana.biru     { background: var(--utama-muda);  color: var(--utama-tua); }
.lencana.amber,
.lencana.pending  { background: var(--oranye-muda); color: var(--oranye-teks); }
.lencana.netral   { background: var(--abu);         color: var(--teks); }
.lencana.aktif    { background: var(--hijau-muda);  color: var(--hijau-tua); }
.lencana.nonaktif { background: var(--abu);         color: var(--teks-lemah); }

.kartu-biru  { background: var(--utama); border: none; color: var(--putih); }
.kartu-navy  { background: var(--navy);  border: none; color: var(--putih); }
.kartu-amber { background: var(--kuning-muda); border-color: var(--oranye-muda); }
.kartu-hijau { background: var(--hijau-muda);  border-color: var(--hijau-muda); }

.ikon-kotak {
  width: 48px; height: 48px; border-radius: var(--r-kartu);
  display: flex; align-items: center; justify-content: center; font: 800 21px var(--huruf);
}
.orang { display: flex; align-items: center; gap: 10px; }
.orang .nama { font: 600 14px var(--huruf); }
.orang .ket  { margin: 2px 0 0; font: 400 12.5px var(--huruf); color: var(--teks-lemah); }
.avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--abu); color: var(--navy); font: 700 12px var(--huruf);
}

/* Konten soal (R6.1, js/konten.js): hasil Konten.render dan editor Quill + jendela rumus MathLive (K31). */
.konten-soal { font: 400 15px/1.7 var(--huruf); color: var(--teks); overflow-wrap: anywhere; }
.konten-soal p { margin: 0 0 8px; }
.konten-soal p:last-child { margin-bottom: 0; }
/* K51: ukuran gambar = persen lebar kolom, tinggi proporsional — sama di layar murid, pratinjau, cetak, dan editor.
   Tanpa kelas = Sedang (gambar baru dan gambar lama). */
.konten-soal img, .editor-soal .ql-editor img { width: 50%; max-width: 100%; height: auto; border-radius: 6px; vertical-align: top; }
.konten-soal img.ql-ukuran-kecil, .editor-soal .ql-editor img.ql-ukuran-kecil { width: 25%; }
.konten-soal img.ql-ukuran-besar, .editor-soal .ql-editor img.ql-ukuran-besar { width: 100%; }
.editor-soal .ql-editor img { cursor: pointer; }
.bilah-ukuran { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--putih);
  border: 1px solid var(--garis); border-radius: 8px; box-shadow: 0 4px 14px rgba(15, 23, 42, .16); }
.bilah-ukuran[hidden] { display: none; }
.bilah-ukuran-label { padding: 0 4px 0 6px; font: 600 12px var(--huruf); color: var(--teks-lemah); }
.bilah-ukuran button { padding: 4px 9px; border: 1px solid var(--garis); border-radius: 6px; background: var(--putih); color: var(--teks);
  font: 600 12.5px var(--huruf); cursor: pointer; }
.bilah-ukuran button:hover { background: var(--utama-muda); color: var(--teks); }
.bilah-ukuran button[aria-pressed="true"], .bilah-ukuran button[aria-pressed="true"]:hover { background: var(--utama); border-color: var(--utama); color: var(--putih); }
.bilah-ukuran button.ubah-bagan { margin-left: 4px; }
.konten-soal table, .ql-editor table { border-collapse: collapse; margin: 6px 0 10px; max-width: 100%; }
.konten-soal td, .konten-soal th, .ql-editor td { border: 1px solid var(--garis); padding: 4px 10px; vertical-align: top; min-width: 3em; height: 1.7em; }
.konten-soal th { background: var(--abu-muda); font-weight: 600; }
.konten-soal ol, .konten-soal ul { margin: 0 0 8px; padding-left: 24px; }
.konten-soal .ql-align-center { text-align: center; }
.konten-soal .ql-align-right { text-align: right; }
.konten-soal .ql-align-justify { text-align: justify; }
.konten-soal .ql-indent-1 { padding-left: 2em; } .konten-soal .ql-indent-2 { padding-left: 4em; }
.konten-soal .katex { font-size: 1.08em; }
.editor-soal .ql-toolbar.ql-snow { border-color: var(--garis); border-radius: 8px 8px 0 0; background: var(--abu-muda); font-family: var(--huruf); }
.editor-soal .ql-container.ql-snow { border-color: var(--garis); border-radius: 0 0 8px 8px; font: 400 15px/1.6 var(--huruf); }
.editor-soal .ql-container { height: auto; }
.editor-soal .ql-editor { min-height: 110px; }
.editor-soal.kecil .ql-editor { min-height: 44px; }
.editor-soal .ql-editor .ql-formula { cursor: pointer; padding: 0 2px; border-radius: 4px; }
.editor-soal .ql-editor img[src^="data:"] { opacity: .5; outline: 2px dashed var(--utama); outline-offset: 2px; }   /* sedang diunggah (R6.6) */
.editor-soal .ql-editor .ql-formula:hover { background: var(--utama-muda); }
.editor-soal .ql-toolbar .ql-tombol-teks { width: auto; padding: 0 6px; font: 600 12px var(--huruf); color: var(--teks); }
.kotak-rumus { display: block; width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--garis);
  border-radius: 8px; font-size: 26px; background: var(--putih); }
math-field.kotak-rumus:focus-within { outline: 2px solid var(--utama); outline-offset: 1px; }
.palet-rumus { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.palet-rumus button { min-width: 44px; font-size: 15px; }

/* Bilah info mapel (§2.5) dan grid soal paralel (§2.6) — bersama kelola.html, kisi.html, penulisan.html (R6.4). */
.info-mapel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; margin: 0; }
.info-mapel div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px; font: 400 14px/1.5 var(--huruf); }
.info-mapel dt { color: var(--teks-lemah); }
.info-mapel dt::after { content: " :"; }
.info-mapel dd { margin: 0; font-weight: 600; color: var(--teks); }
.nomor-soal { font: 700 15px var(--huruf); color: var(--navy); }
.perlu-tindakan { font: 600 12.5px var(--huruf); color: var(--oranye); }
.sel-soal { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 150px; }
.sel-soal .baris-aksi { display: flex; gap: 4px; }
.sel-kisi { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ringkas-kisi { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ringkas-kisi .ikon { width: 14px; height: 14px; color: var(--teks-lemah); }
.belum-rancang { font: italic 400 12.5px/1.4 var(--huruf); color: var(--teks-lemah); white-space: nowrap; }
.tipe-kisi { font: 500 12.5px/1.4 var(--huruf); color: var(--teks-lemah); white-space: nowrap; }
.kisi-belum { font: 600 12px/1.4 var(--huruf); color: var(--oranye-teks); white-space: nowrap; }
/* Kolom No Soal dan Kisi Kisi menempel saat digulir ke samping. */
.grid-soal table.data th:nth-child(1), .grid-soal table.data td:nth-child(1) { position: sticky; left: 0; z-index: 1; width: 96px; min-width: 96px; }
.grid-soal table.data th:nth-child(2), .grid-soal table.data td:nth-child(2) { position: sticky; left: 96px; z-index: 1; min-width: 112px;
  box-shadow: 1px 0 0 var(--garis); }
.grid-soal table.data td:nth-child(2) .tombol-garis, .grid-soal table.data td:nth-child(2) .tombol-teal { white-space: nowrap; }
.grid-soal table.data td:nth-child(-n+2) { background: var(--putih); }
.grid-soal table.data tbody tr:hover td:nth-child(-n+2) { background: var(--abu-muda); }
@media (max-width: 1100px) { .info-mapel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .info-mapel div { grid-template-columns: 140px minmax(0, 1fr); }
  .grid-soal table.data th, .grid-soal table.data td { position: static !important; }
  .sel-soal, .sel-kisi { align-items: flex-end; }
}

/* Lembar baca satu soal (js/lihat-soal.js, R6.4): 👁 Penulisan guru dan Kelola Admin. */
.meta-soal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin: 0 0 14px; padding: 12px 14px;
  border-radius: var(--r-kartu); background: var(--abu-muda); }
.meta-soal div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; font: 400 13px/1.6 var(--huruf); }
.meta-soal dt { color: var(--teks-lemah); }
.meta-soal dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.meta-soal div:first-child { grid-column: 1 / -1; }   /* Kode Soal satu baris penuh */
.bagian-soal { margin: 0 0 16px; }
.bagian-soal h3 { margin: 0 0 8px; font: 700 13px/1.4 var(--huruf); color: var(--seksi); text-transform: uppercase; letter-spacing: .03em; }
.isi-kosong { margin: 0; font: italic 400 13.5px var(--huruf); color: var(--teks-lemah); }
.opsi-soal { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opsi-soal li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border: 1px solid var(--garis); border-radius: var(--r-kartu); }
.opsi-soal li.benar { border-color: var(--hijau); background: var(--hijau-muda); }
.opsi-soal .konten-soal { flex: 1; min-width: 0; }
.huruf-opsi { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--abu); font: 700 13px var(--huruf); color: var(--navy); }
.opsi-soal li.benar .huruf-opsi { background: var(--hijau); color: var(--putih); }
.tanda-kunci { flex: none; font: 700 12px/28px var(--huruf); color: var(--hijau-tua); white-space: nowrap; }
.kunci-kategori { flex: none; min-width: 56px; padding: 2px 8px; border-radius: var(--r-lencana); text-align: center;
  font: 700 12.5px/24px var(--huruf); color: var(--teks-lemah); background: var(--abu); }
.kunci-kategori.benar { color: var(--hijau-tua); background: var(--hijau-muda); }
.kunci-kategori.salah { color: var(--merah-tua); background: var(--merah-muda); }
.ringkas-kunci { margin: 8px 0 0; font: 400 13.5px var(--huruf); color: var(--teks-lemah); }
.ringkas-kunci b { color: var(--teks); }
.petunjuk-soal { margin: 0; font: italic 400 14px/1.5 var(--huruf); }
.tab-stimulus { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.tab-stimulus button { padding: 5px 12px; border: 1px solid var(--garis); border-radius: var(--r-tombol); background: var(--putih);
  font: 600 13px var(--huruf); color: var(--teks); cursor: pointer; }
.tab-stimulus button[aria-selected="true"] { background: var(--utama-muda); border-color: var(--utama); color: var(--utama-tua); }
.panel-stimulus { padding: 10px 12px; border: 1px solid var(--garis-halus); border-radius: var(--r-kartu); }
@media (max-width: 768px) {
  .meta-soal { grid-template-columns: minmax(0, 1fr); }
  .meta-soal div { grid-template-columns: 110px minmax(0, 1fr); }
}

/* R6.5 — Tulis Soal: jendela lebar penuh (Pratinjau L21, Riwayat L22), tampilan seperti murid, riwayat versi. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.kotak-modal.modal-penuh { max-width: 1240px; height: calc(100vh - 40px); }
.kotak-modal.modal-penuh .modal-isi { flex: 1; }
.kisi-tulis { display: grid; gap: 8px; margin: 0; }
.kisi-tulis div { display: grid; gap: 1px; font: 400 13px/1.5 var(--huruf); }
.kisi-tulis dt { color: var(--teks-lemah); font-size: 12px; }
.kisi-tulis dd { margin: 0; color: var(--teks); font-weight: 500; overflow-wrap: anywhere; }
.bagian-soal.berubah { padding: 8px 10px; border-radius: var(--r-kartu); background: var(--hijau-muda); }
.meta-soal div.berubah { background: var(--hijau-muda); border-radius: 6px; }
.tanda-berubah { margin-left: 6px; padding: 1px 6px; border-radius: var(--r-lencana); background: var(--hijau); color: var(--putih);
  font: 700 10.5px/1.6 var(--huruf); text-transform: none; letter-spacing: 0; }
.daftar-wacana { display: grid; gap: 12px; margin: 4px 0 10px; }
.wacana { padding: 10px 12px; border: 1px solid var(--garis); border-radius: var(--r-kartu); }
.kepala-wacana { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.kepala-wacana .nama-tab { flex: 1 1 180px; min-width: 0; max-width: 280px; }
.kepala-wacana [data-hapus] { margin-left: auto; }
/* Tampilan seperti murid (LihatSoal.htmlMurid) */
.pratinjau-ujian { display: grid; gap: 12px; }
.kepala-ujian { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px;
  border-radius: var(--r-kartu); background: var(--navy); color: var(--putih); font: 700 14px/1.4 var(--huruf); }
.kepala-ujian .kode-soal { color: var(--putih-lembut); }
.saklar-kunci { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--huruf); cursor: pointer; }
.pratinjau-ujian .tab-baris { margin-bottom: 0; }
.badan-ujian { display: grid; gap: 12px; }
.kisi-ujian { padding: 8px 12px; border: 1px solid var(--garis); border-radius: var(--r-kartu); background: var(--abu-muda); }
.kisi-ujian summary { cursor: pointer; font: 600 13px var(--huruf); color: var(--navy); }
.kisi-ujian .kisi-tulis { margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.murid-soal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.murid-soal.ada-stimulus { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.murid-soal.ada-stimulus .murid-stimulus { order: -1; }
.murid-utama { display: grid; gap: 12px; min-width: 0; }
.murid-petunjuk { margin: 0; padding: 6px 10px; border-radius: 6px; background: var(--kuning-muda); color: var(--kuning-teks); font: italic 500 13.5px/1.5 var(--huruf); }
.murid-opsi, .murid-kategori { display: grid; gap: 8px; }
.murid-pilih { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: var(--r-kartu);
  cursor: pointer; background: var(--putih); }
.murid-pilih:hover { border-color: var(--utama); }
.murid-pilih:focus-visible, .murid-tombol-bs:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--utama-cincin); }
.murid-pilih .konten-soal { flex: 1; min-width: 0; }
.murid-tanda { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--teks-samar);
  font: 700 13px var(--huruf); color: var(--navy); background: var(--putih); }
.murid-pilih.bulat .murid-tanda { border-radius: 50%; }
.murid-pilih.kotak .murid-tanda { border-radius: 6px; }
.murid-pilih[aria-checked="true"] { border-color: var(--utama); background: var(--utama-muda); }
.murid-pilih[aria-checked="true"] .murid-tanda { border-color: var(--utama); background: var(--utama); color: var(--putih); }
.murid-pilih.kotak[aria-checked="true"] .murid-tanda::after { content: "✓"; }
.murid-pilih.kunci { border-color: var(--hijau); box-shadow: inset 4px 0 0 var(--hijau); }
.murid-pilih .tanda-kunci { font-size: 16px; line-height: 28px; }
.murid-kategori-baris { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: var(--r-kartu); }
.murid-kategori-baris .konten-soal { flex: 1; min-width: 0; }
.murid-no { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--abu);
  font: 700 12.5px var(--huruf); color: var(--navy); }
.murid-bs { flex: none; display: flex; gap: 6px; }
.murid-tombol-bs { padding: 5px 12px; border: 1px solid var(--garis); border-radius: var(--r-tombol); font: 600 13px var(--huruf); cursor: pointer; background: var(--putih); }
.murid-tombol-bs[aria-checked="true"] { background: var(--utama); border-color: var(--utama); color: var(--putih); }
.murid-tombol-bs.kunci { border-color: var(--hijau); color: var(--hijau-tua); box-shadow: inset 0 -3px 0 var(--hijau); }
.murid-tombol-bs.kunci[aria-checked="true"] { color: var(--putih); }
.murid-pembahasan { padding: 12px 14px; border-radius: var(--r-kartu); background: var(--hijau-muda); border: 1px solid var(--hijau); }
.murid-pembahasan > b { display: block; margin-bottom: 6px; color: var(--hijau-tua); font: 700 13px var(--huruf); }
.murid-stimulus { padding: 12px 14px; border: 1px solid var(--garis); border-radius: var(--r-kartu); background: var(--abu-muda); min-width: 0; }
.murid-stimulus h3 { margin: 0 0 8px; font: 700 14px/1.4 var(--huruf); color: var(--navy); }
/* Riwayat versi (L22) */
.riwayat-soal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.daftar-versi { display: grid; gap: 8px; }
.daftar-versi h3, .detail-versi h3 { margin: 0 0 6px; font: 700 14px/1.4 var(--huruf); color: var(--navy); }
.kartu-versi { display: grid; gap: 2px; justify-items: start; justify-content: stretch; width: 100%; padding: 10px 12px; text-align: left; background: var(--putih); color: var(--teks);
  border: 1px solid var(--garis); border-radius: var(--r-kartu); font: 400 13px/1.5 var(--huruf); }
.kartu-versi:hover { background: var(--abu-muda); color: var(--teks); }
.kartu-versi.aktif { border-color: var(--utama); background: var(--utama-muda); }
.alasan-versi { font-style: italic; color: var(--teks-lemah); }
@media (max-width: 900px) {
  .murid-soal.ada-stimulus, .riwayat-soal { grid-template-columns: minmax(0, 1fr); }
}

/* R7.2 — Telaah: layar tinjau (L23), daftar periksa (K33), catatan penelaah, log telaah di Riwayat. */
.bilah-catatan { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-kartu); background: var(--merah-muda); color: var(--merah-tua);
  font: 400 14px/1.5 var(--huruf); border-left: 4px solid var(--merah); }
.kotak-modal.modal-penuh .layar-tinjau { min-height: 100%; grid-template-rows: auto auto 1fr auto; }
.tinjau-badan { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.tinjau-kiri { display: grid; gap: 12px; position: sticky; top: 0; }
.tinjau-kiri .kisi-ujian .kisi-tulis { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.tinjau-kiri .kisi-tulis div { grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }   /* ringkas: label di kiri, isi di kanan */
.tinjau-kiri .kisi-tulis dt { font-size: 12px; }
.tinjau-isi { min-width: 0; }
.kotak-periksa { padding: 10px 12px; border: 1px solid var(--garis); border-radius: var(--r-kartu); background: var(--putih); }
.judul-periksa { margin: 0 0 6px; font: 700 13px/1.4 var(--huruf); color: var(--navy); }
.sub-periksa { margin: 8px 0 4px; font: 600 12px/1.4 var(--huruf); color: var(--teks-lemah); text-transform: uppercase; letter-spacing: .03em; }
.daftar-periksa { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.daftar-periksa label { display: flex; gap: 8px; align-items: flex-start; font: 400 13px/1.45 var(--huruf); cursor: pointer; }
.daftar-periksa input { margin-top: 2px; flex: none; }
.daftar-periksa input:checked + span { color: var(--teks-lemah); text-decoration: line-through; }
.kaki-tinjau { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 2px; background: var(--putih); border-top: 1px solid var(--garis); }
.log-telaah { display: grid; gap: 6px; margin-top: 6px; }
.log-telaah li { list-style: none; padding: 8px 10px; border: 1px solid var(--garis-halus); border-radius: var(--r-kartu); font: 400 12.5px/1.5 var(--huruf); }
.log-telaah ul { margin: 0; padding: 0; }
.log-telaah .catatan-log { display: block; color: var(--teks); font-style: italic; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .tinjau-badan { grid-template-columns: minmax(0, 1fr); }
  .tinjau-kiri { position: static; order: 2; }      /* HP: soal dulu, kisi + daftar periksa di bawahnya */
}
@media (max-width: 600px) {
  .kaki-tinjau > .teks-lemah:first-child { display: none; }
  .kaki-tinjau .tombol-baris { width: 100%; flex-wrap: nowrap; gap: 6px; }
  .kaki-tinjau .tombol-baris > * { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; font-size: 13px; white-space: nowrap; }
}

/* Unggah berkas (R6.7 Unggah Excel soal; framework.html dan pengguna.html masih punya salinan sendiri) */
.jatuhkan { border: 2px dashed var(--garis); border-radius: var(--r-kartu); padding: 28px 20px; text-align: center;
  color: var(--teks-lemah); cursor: pointer; background: var(--abu-muda); transition: border-color .15s, background .15s; }
.jatuhkan:hover, .jatuhkan:focus-visible { border-color: var(--utama); background: var(--utama-muda); outline: none; }
.jatuhkan.menimpa { border-color: var(--hijau); background: var(--hijau-muda); }
.jatuhkan p { margin: 6px 0 0; font: 400 14px var(--huruf); }
.jatuhkan b { font: 700 14px var(--huruf); color: var(--utama-tua); }
.jatuhkan .ikon { width: 32px; height: 32px; color: var(--utama); }
.ringkas-impor { display: flex; gap: 18px; flex-wrap: wrap; font: 700 14px var(--huruf); margin: 14px 0 10px; }
.ringkas-impor .hijau { color: var(--hijau-tua); }
.ringkas-impor .merah { color: var(--merah-tua); }
.teks-galat { color: var(--merah-tua); font-weight: 600; }
.teks-tunda { color: var(--oranye-tua); font-weight: 600; }   /* K41: peringatan di pratinjau unggah kisi */
.judul-kecil { margin: 12px 0 8px; font: 700 14px/1.4 var(--huruf); color: var(--navy); }

/* K40 — Bagan sederhana di editor soal (js/bagan.js): gambar PNG di Drive + data-bagan; klik di editor untuk mengubah. */
img.ql-bagan { display: block; height: auto; margin: 6px 0; border-radius: 6px; }   /* lebar: aturan ukuran K51 */
.editor-soal .ql-editor img.ql-bagan { cursor: pointer; outline: 1px dashed transparent; outline-offset: 3px; }
.editor-soal .ql-editor img.ql-bagan:hover { outline-color: var(--utama); }
.kotak-modal.modal-bagan { max-width: 1040px; }
.bagan-susun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.bagan-isian { display: grid; gap: 12px; min-width: 0; }
.bagan-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: end; }
.bagan-tiga { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px 12px; align-items: end; }
.bagan-isian .bidang { display: grid; gap: 5px; font: 600 13px/1.4 var(--huruf); color: var(--teks); }
.bagan-isian .bidang small { font-weight: 400; color: var(--teks-lemah); }
.centang-bagan { display: flex; align-items: center; gap: 8px; font: 500 13px/1.4 var(--huruf); grid-column: 1 / -1; }
.bagan-kepala, .bagan-baris { display: grid; grid-template-columns: 20px minmax(0, 1.3fr) minmax(0, 1fr) 32px; gap: 6px 8px; align-items: center; }
.bagan-kepala.org, .bagan-baris.org { grid-template-columns: 20px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr) 32px; }
.bagan-kepala { font: 600 12px/1.3 var(--huruf); color: var(--teks-lemah); margin-bottom: 6px; }
.bagan-kepala small { font-weight: 400; }
.bagan-baris { margin-bottom: 6px; }
.bagan-tabel .bg-no { color: var(--teks-lemah); font: 500 12px var(--huruf); text-align: right; }
.bagan-tabel input, .bagan-tabel select { min-height: 34px; padding: 6px 9px; font-size: 13.5px; }
.bagan-pratinjau { position: sticky; top: 0; border: 1px solid var(--garis); border-radius: 10px; padding: 12px; background: var(--putih); min-width: 0; }
.bagan-label { font: 600 12px/1.3 var(--huruf); color: var(--teks-lemah); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.bagan-pratinjau canvas { display: block; width: 100%; height: auto; }
.bagan-pratinjau .pesan { margin: 0; }
@media (max-width: 860px) {
  .bagan-susun { grid-template-columns: 1fr; }
  .bagan-pratinjau { position: static; }
}
@media (max-width: 480px) {
  .bagan-dua, .bagan-tiga { grid-template-columns: 1fr; }
}

/* Pantau murid (js/pantau-murid.js; L13 Admin, L25 proktor — R8.3/R8.4) */
.pantau-murid-kepala { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.peringatan-kecil { font: 600 12.5px var(--huruf); color: var(--oranye-tua); white-space: nowrap; }
/* K51: jalur resmi memperbaiki soal yang sudah dirakit (Tulis Soal, Telaah, Kelola, Perakitan) */
.jalur-perbaikan { margin: 6px 0; padding-left: 22px; }
.jalur-perbaikan li { margin: 2px 0; }
.jalur-kelola { margin-top: 8px; }

/* R10 — capaian, sebaran, matriks (js/capaian.js; Analisis L14, Laporan Sekolah, Capaianku) */
.legenda-capaian { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; font: 500 12.5px var(--huruf); color: var(--teks-lemah); }
.legenda-capaian span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-capaian i { display: inline-block; }
.legenda-capaian .kotak-utama { width: 18px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--hijau) 0 33%, var(--oranye) 33% 66%, var(--merah) 66%); }
.legenda-capaian .kotak-kab { width: 14px; height: 4px; border-radius: 2px; background: var(--abu-tua); }
.legenda-capaian .garis-nas { width: 0; height: 14px; border-left: 2px dashed var(--navy); }
.daftar-capaian { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.baris-capaian { display: grid; grid-template-columns: minmax(160px, 1.2fr) 2fr 92px; gap: 12px; align-items: center; }
.nama-capaian { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.nama-capaian b { font: 600 13.5px/1.35 var(--huruf); color: var(--teks); overflow-wrap: anywhere; }
.nama-capaian small { flex-basis: 100%; font: 400 12.5px/1.4 var(--huruf); color: var(--teks-lemah); }
.jalur-capaian { position: relative; height: 18px; border-radius: 4px; background: var(--abu); overflow: visible; }
.isi-capaian { position: absolute; left: 0; top: 0; height: 12px; border-radius: 0 4px 4px 0; background: var(--utama); }
.isi-capaian.hijau { background: var(--hijau); } .isi-capaian.oranye { background: var(--oranye); } .isi-capaian.merah { background: var(--merah); }
.isi-capaian.abu { background: var(--teks-samar); }
.isi-kab { position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 0 2px 2px 0; background: var(--abu-tua); }
.tanda-nas { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--navy); }
.angka-capaian { text-align: right; font: 400 12px/1.35 var(--huruf); color: var(--teks-lemah); }
.angka-capaian b { display: block; font: 700 15px/1.2 var(--huruf); color: var(--navy); }
.angka-capaian small { display: block; }
@media (max-width: 640px) {
  .baris-capaian { grid-template-columns: 1fr 76px; }
  .baris-capaian .nama-capaian { grid-column: 1 / -1; }
}
.sebaran-nilai { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; height: 170px; padding-top: 4px; }
.kolom-sebaran { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.batang-sebaran { width: 100%; max-width: 44px; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--utama); }
.jumlah-sebaran { font: 600 12px/1.4 var(--huruf); color: var(--teks); }
.kolom-sebaran small { margin-top: 4px; font: 500 11px/1 var(--huruf); color: var(--teks-lemah); }
.sel-capaian { display: inline-block; min-width: 52px; padding: 3px 6px; border-radius: 4px; text-align: center; font: 600 12.5px var(--huruf); }
.sel-capaian.hijau { background: var(--hijau-muda); color: var(--hijau-tua); }
.sel-capaian.oranye { background: var(--oranye-muda); color: var(--oranye-teks); }
.sel-capaian.merah { background: var(--merah-muda); color: var(--merah-tua); }
.sel-capaian.abu { background: var(--abu); color: var(--teks-lemah); }
.kunci-pilihan { color: var(--hijau-tua); }
.analisis-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.analisis-kepala h1 { margin: 0 0 4px; font: 700 21px/1.3 var(--huruf); color: var(--navy); }
.analisis-kepala p { margin: 0; font: 400 14px/1.6 var(--huruf); color: var(--teks-lemah); }
.analisis-kepala .tombol-baris { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.analisis-kepala > div { min-width: 0; max-width: 100%; }
.analisis-kepala select { width: auto; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.judul-bagian { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.judul-bagian h2 { margin: 0; font: 700 17px/1.3 var(--huruf); color: var(--navy); }
.judul-bagian p { margin: 2px 0 0; font: 400 13px/1.5 var(--huruf); color: var(--teks-lemah); }
.tab-capaian { display: inline-flex; gap: 4px; padding: 3px; border-radius: 8px; background: var(--abu); flex-wrap: wrap; }
.tab-capaian button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; font: 600 13px var(--huruf); color: var(--teks-lemah); cursor: pointer; }
.tab-capaian button[aria-pressed="true"] { background: var(--putih); color: var(--navy); box-shadow: 0 1px 2px rgba(15, 39, 66, .12); }
.isi-sel { display: inline-block; min-width: 0; max-width: 100%; vertical-align: middle; }
@media (max-width: 768px) { table.data.kartu-hp td > .isi-sel { flex: 1 1 auto; text-align: right; overflow-wrap: anywhere; } }

/* ===== R12 — Saran AI (js/saran-ai.js): panel di layar tinjau telaah dan laci kanan layar tulis soal ===== */
.ai-kartu { border: 1px solid var(--utama-muda); background: var(--abu-muda); border-radius: var(--r-kartu); padding: 14px 16px; margin-top: 12px;
  font: 400 13.5px/1.5 var(--huruf); color: var(--teks); }
.ai-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ai-kepala b { font-size: 14.5px; color: var(--navy); }
.ai-lencana { font: 600 11px var(--huruf); background: var(--utama-muda); color: var(--utama-tua); border-radius: var(--r-bulat); padding: 2px 8px; }
.ai-label { font: 600 11px var(--huruf); color: var(--teks-lemah); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; }
.ai-kunci { padding: 8px 10px; border-radius: var(--r-isian); font-weight: 600; }
.ai-kunci.cocok { background: var(--hijau-muda); color: var(--hijau-tua); }
.ai-kunci.beda { background: var(--merah-muda); color: var(--merah-tua); }
.ai-kunci.ragu { background: var(--kuning-muda); color: var(--kuning-teks); }
.ai-alasan { margin: 6px 0; }
.ai-temuan { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ai-temuan li { background: var(--putih); border: 1px solid var(--garis); border-left: 4px solid var(--teks-samar); border-radius: var(--r-isian); padding: 7px 10px; word-break: break-word; }
.ai-temuan li.merah { border-left-color: var(--merah); }
.ai-temuan li.kuning { border-left-color: var(--oranye); }
.ai-temuan li.hijau { border-left-color: var(--hijau); }
.ai-temuan small { display: block; font-weight: 600; color: var(--teks-lemah); font-size: 11.5px; }
.ai-info { background: var(--kuning-muda); color: var(--kuning-teks); border-radius: var(--r-isian); padding: 7px 10px; font-size: 12.5px; margin: 6px 0; }
.ai-tombol-baris { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ai-kaki { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--garis); font-size: 12px; color: var(--teks-lemah); }
.ai-putar { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--utama-muda); border-top-color: var(--utama); border-radius: 50%;
  vertical-align: -1px; animation: ai-putar .8s linear infinite; }
@keyframes ai-putar { to { transform: rotate(360deg); } }
.ai-laci { position: fixed; top: 72px; right: 16px; bottom: 76px; width: 430px; max-width: calc(100vw - 32px); background: var(--putih);
  border-radius: 14px; box-shadow: var(--bayang-modal); overflow: auto; z-index: 60; padding: 0 18px 18px; }
.ai-laci[hidden] { display: none; }
.ai-laci .ai-kartu { border: none; background: none; padding: 0; margin-top: 4px; }
.ai-laci .ai-kepala b { display: none; }
.ai-laci-judul { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--putih);
  padding: 14px 0 10px; border-bottom: 1px solid var(--garis); z-index: 1; }
.ai-laci-judul b { font-size: 16px; color: var(--navy); }
.tombol-ai { white-space: nowrap; }
@media (max-width: 600px) { .ai-laci { left: 8px; right: 8px; top: 64px; bottom: 8px; width: auto; max-width: none; z-index: 70; } }

/* K78: panel galat (api.js Galat) — kode galat + Salin Laporan; di atas toast, tidak menutupi tombol utama di HP */
.panel-galat { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9000; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 16px; border-radius: 12px;
  background: var(--merah-muda); color: var(--merah-tua); border: 1px solid var(--merah); box-shadow: var(--bayang-menu);
  font: 600 13px/1.4 var(--huruf); }
.panel-galat[hidden] { display: none; }
.panel-galat-teks { flex: 1 1 200px; }
.panel-galat-salin { border: 0; border-radius: 8px; padding: 7px 12px; background: var(--merah); color: var(--putih); font: 700 13px var(--huruf); cursor: pointer; }
.panel-galat-tutup { border: 0; background: none; color: var(--merah-tua); font: 700 20px/1 var(--huruf); cursor: pointer; padding: 2px 6px; }

/* K74: formulir Susulan / Remedial (js/tambahan.js) */
.tambahan-calon { border: 1px solid var(--garis); border-radius: var(--r-isian); padding: 10px 12px; max-height: 260px; overflow: auto; }
.tambahan-semua { display: flex; gap: 8px; align-items: center; font: 600 13px var(--huruf); padding-bottom: 8px; border-bottom: 1px solid var(--garis-halus); margin-bottom: 8px; }
.tambahan-daftar { display: grid; gap: 8px; }
.tambahan-daftar label { display: flex; gap: 8px; align-items: flex-start; font: 400 13.5px/1.4 var(--huruf); cursor: pointer; }
.tambahan-daftar input { margin-top: 3px; }
.tambahan-waktu { display: flex; gap: 8px; flex-wrap: wrap; }
.tambahan-waktu input { flex: 1 1 140px; min-width: 0; }