/* SIAP - gaya tampilan bersama.
   Warna dan hurufnya mengikuti aplikasi versi sebelumnya agar pengguna
   yang sudah terbiasa tidak perlu menyesuaikan diri lagi. */

:root{
  --paper:#F4F6F3; --surface:#fff; --ink:#14302B; --muted:#5A6D67;
  --line:#D2DBD6; --forest:#1F5E52; --forest-tua:#164539; --gold:#D9A21B;
  --merah:#B3261E; --merah-muda:#FDECEA;
  --radius:12px; --bayang:0 1px 2px rgba(20,48,43,.06), 0 8px 24px rgba(20,48,43,.07);
}
*{box-sizing:border-box}
/* Atribut hidden harus selalu menang. Aturan seperti .medan{display:block}
   memiliki kekhususan lebih tinggi daripada [hidden]{display:none} bawaan
   peramban, sehingga elemen yang disembunyikan tetap tampil. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink); font-size:15.5px; line-height:1.6;
  font-family:"Plus Jakarta Sans","Segoe UI",Roboto,Arial,sans-serif;
  display:flex; flex-direction:column; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---------- halaman masuk ---------- */
.masuk-bungkus{flex:1; display:grid; place-items:center; padding:24px 16px}
.kartu{
  width:min(420px,100%); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--bayang); padding:30px 28px;
}
.merek{display:flex; gap:12px; align-items:center; margin-bottom:22px}
.merek .tanda{
  width:44px; height:44px; border-radius:11px; background:var(--gold);
  display:grid; place-items:center; flex:none;
}
.merek .tanda-lambang{height:52px; width:auto; flex:none; display:block}
.merek b{display:block; font-size:17px; letter-spacing:-.01em}
.merek span{display:block; font-size:12.5px; color:var(--muted); line-height:1.4}

h1{font-size:21px; letter-spacing:-.02em; margin:0 0 4px}
.sub{color:var(--muted); font-size:13.5px; margin:0 0 20px}

/* ---------- isian ---------- */
.medan{display:block; margin-bottom:15px}
.medan>span.nama{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px}
.petunjuk{display:block; font-weight:400; font-size:12.5px; color:var(--muted); margin-top:2px}
.isian{
  width:100%; padding:11px 13px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
}
.isian:focus{outline:2px solid var(--forest); outline-offset:1px; border-color:var(--forest)}
.isian[aria-invalid="true"]{border-color:var(--merah)}

/* kotak kata sandi dengan tombol mata */
.sandi-kotak{position:relative}
.sandi-kotak .isian{padding-right:46px}
.mata{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center;
  background:none; border:0; border-radius:8px; cursor:pointer; color:var(--muted);
}
.mata:hover{background:var(--paper); color:var(--ink)}
.mata:focus-visible{outline:2px solid var(--forest); outline-offset:1px}
.mata svg{width:20px; height:20px}
.mata svg[hidden]{display:none}

/* ---------- soal hitung ---------- */
.soal{
  display:inline-flex; align-items:center; gap:10px; width:fit-content;
  background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:9px 12px;
}
.soal .tanya{font-size:17px; font-weight:700; letter-spacing:.02em; white-space:nowrap}
.soal .isian{width:90px; text-align:center; font-weight:600}

/* Pada halaman masuk, soal memenuhi lebar kartu: soal - isian - tombol ganti. */
.masuk-bungkus .soal{display:flex; width:100%}
.masuk-bungkus .soal .isian{flex:1; min-width:0; width:auto}
.soal-segar{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  color:var(--muted); cursor:pointer;
}
.soal-segar:hover{background:var(--paper); color:var(--ink)}
.soal-segar:focus-visible{outline:2px solid var(--forest); outline-offset:1px}
.soal-segar[disabled]{cursor:progress}
.soal-segar svg{width:18px; height:18px}
.soal-segar.berputar svg{animation:putar .6s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.soal-segar.berputar svg{animation:none}}

/* Halaman masuk dirapatkan agar muat satu layar tanpa menggulung. */
.masuk-bungkus{padding:12px 16px}
.masuk-bungkus .kartu{padding:22px 26px}
.masuk-bungkus .merek{margin-bottom:14px}
.masuk-bungkus .sub{margin-bottom:14px}
.masuk-bungkus .medan{margin-bottom:11px}
.masuk-bungkus .isian{padding:9px 13px}
.masuk-bungkus .soal{padding:6px 10px}
@media (max-height:640px){
  .masuk-bungkus .sub,.masuk-bungkus .petunjuk{display:none}
}

/* ---------- tombol ---------- */
.tombol{
  width:100%; padding:12px 16px; font:inherit; font-size:15px; font-weight:600;
  color:#fff; background:var(--forest); border:0; border-radius:9px; cursor:pointer;
}
.tombol:hover{background:var(--forest-tua)}
.tombol:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.tombol[disabled]{opacity:.6; cursor:progress}

/* ---------- pesan ---------- */
.galat{
  background:var(--merah-muda); border:1px solid #F3C0BC; color:#7A1B15;
  border-radius:9px; padding:10px 12px; font-size:13.5px; margin-bottom:16px;
}
.galat ul{margin:0; padding-left:18px}
.galat li+li{margin-top:3px}
.kabar{
  background:#E7F3EE; border:1px solid #BEDDD0; color:#12503F;
  border-radius:9px; padding:10px 12px; font-size:13.5px; margin-bottom:16px;
}
.wajib-ganti{
  background:#FDF4E0; border:1px solid #EBD9A8; color:#6B4E07;
  border-radius:9px; padding:11px 13px; font-size:13.5px; margin-bottom:18px;
}

/* ---------- kaki halaman ---------- */
.kaki{
  border-top:1px solid var(--line); background:var(--surface); padding:16px;
  display:flex; gap:12px; align-items:center; justify-content:center;
  flex-wrap:wrap; text-align:center;
}
.kaki img{height:34px; width:auto; flex:none}
.kaki .t{font-size:12.5px; color:var(--muted); line-height:1.55}
.kaki .t b{display:block; color:var(--ink); font-size:13px}
.kaki a{color:var(--forest)}
.kaki .versi{white-space:nowrap}

@media (max-width:420px){
  .kartu{padding:24px 20px; border:0; box-shadow:none; background:transparent}
}

/* ===================== kerangka halaman panitia =====================

   Menu berdiri tegak di kiri. Menu mendatar punya lebar terbatas, dan
   begitu jumlahnya bertambah ia melipat ke baris kedua — yang terdorong ke
   bawah berhenti terbaca sebagai menu. Ke bawah, tempatnya lega. */
/* height:auto menimpa html,body{height:100%}. Dengan tinggi terkunci setinggi
   layar, kolom isi tidak ikut memanjang saat halamannya panjang; bilah sisi
   hanya sebatas tinggi layar itu dan ikut terguling keluar saat digulung. */
body.tata-panel{display:grid; grid-template-columns:268px minmax(0,1fr); height:auto}

.lewati{position:absolute; left:-9999px; top:8px; z-index:5; background:var(--surface);
  color:var(--ink); padding:9px 14px; border-radius:8px; box-shadow:var(--bayang)}
.lewati:focus{left:8px}

.sisi{
  background:var(--ink); color:#EAF2EE; display:flex; flex-direction:column;
  padding:18px 13px 14px; gap:16px;
  position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
}
.sisi-merek{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit;
  padding:2px 5px 16px; border-bottom:1px solid rgba(255,255,255,.12)}
/* Lambang daerah, bukan gambar hias: tingginya dipatok dan lebarnya
   mengikuti, supaya perbandingan perisainya tidak pernah berubah walau
   lambang yang diunggah berbeda ukuran. */
.sisi-merek img{flex:none; height:44px; width:auto; display:block}
.sisi-merek b{display:block; font-size:19px; letter-spacing:-.01em; line-height:1.25}
.sisi-merek i{display:block; font-style:normal; font-size:12px; color:#9FBBB0; line-height:1.35}

.sisi-menu{display:flex; flex-direction:column; gap:3px}
.sisi-menu a{
  display:flex; gap:13px; align-items:center; color:#BCCFC8; text-decoration:none;
  font-size:15px; padding:10px 12px; border-radius:10px;
}
.sisi-menu .ikon{flex:none; opacity:.85}
.sisi-menu a:hover{background:rgba(255,255,255,.07); color:#fff}
.sisi-menu a[aria-current]{background:rgba(255,255,255,.11); color:#fff; font-weight:600}
.sisi-menu a[aria-current] .ikon{opacity:1; color:var(--gold)}

/* Keterangan akun yang sedang masuk, menempel di dasar bilah. */
.sisi-akun{margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.12)}
.sisi-label{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:#89A79B; padding:0 5px 7px}
.sisi-orang{display:flex; gap:10px; align-items:center; padding:0 5px 10px}
.sisi-awal{flex:none; width:34px; height:34px; border-radius:50%; background:var(--gold);
  color:#1B1400; display:grid; place-items:center; font-size:13px; font-weight:700}
.sisi-nama{min-width:0}
.sisi-nama b{display:block; font-size:13.5px; line-height:1.3; overflow-wrap:anywhere}
.sisi-nama i{display:block; font-style:normal; font-size:12px; color:#9FBBB0; line-height:1.4;
  overflow-wrap:anywhere}
.sisi form{margin:0}
.sisi .keluar{display:flex; gap:13px; align-items:center; width:100%;
  background:none; border:0; color:#BCCFC8; font:inherit; font-size:14.5px;
  padding:9px 12px; border-radius:10px; cursor:pointer; text-align:left}
.sisi .keluar:hover{background:rgba(255,255,255,.07); color:#fff}
.sisi .keluar .ikon{flex:none; opacity:.85}

.sisi-kanan{display:flex; flex-direction:column; min-height:100vh; min-width:0}

/* Pada layar sempit bilahnya kembali mendatar di atas isi halaman: 252
   piksel di kiri layar HP berarti isinya tinggal separuh. */
@media (max-width:900px){
  body.tata-panel{display:flex; flex-direction:column}
  .sisi{position:static; height:auto; align-self:stretch; padding:12px 14px; gap:10px}
  .sisi-merek{padding:0 0 10px}
  .sisi-menu{flex-direction:row; flex-wrap:wrap; gap:2px}
  .sisi-menu a{font-size:14px; padding:8px 11px; gap:9px}
  .sisi-akun{margin-top:0; padding-top:10px; display:flex; flex-wrap:wrap;
    align-items:center; gap:4px 14px}
  .sisi-label{display:none}
  .sisi-orang{padding:0; margin-right:auto}
  /* Tingginya diserahkan ke isi halaman, tetapi kaki halaman tetap jatuh di
     dasar layar ketika isinya pendek. */
  body.tata-panel{min-height:100vh}
  .sisi-kanan{flex:1; min-height:0}
}

main.isi{flex:1; width:100%; max-width:1080px; margin:0 auto; padding:24px 18px 40px}
.judul-baris{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-bottom:18px}
.judul-baris h1{margin:0; font-size:23px}
.judul-baris .kanan{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}

.tombol-kecil{display:inline-block; padding:9px 14px; font:inherit; font-size:14px;
  font-weight:600; border-radius:8px; border:1px solid var(--forest); cursor:pointer;
  background:var(--forest); color:#fff; text-decoration:none}
.tombol-kecil:hover{background:var(--forest-tua); border-color:var(--forest-tua)}
.tombol-kecil.garis{background:transparent; color:var(--forest)}
.tombol-kecil.garis:hover{background:#E7F3EE}
.tombol-kecil.bahaya{background:transparent; color:var(--merah); border-color:#E3B5B1}
.tombol-kecil.bahaya:hover{background:var(--merah-muda)}

/* Keterangan apa saja yang akan hilang, di atas tombol yang memusnahkannya.
   Dibuat mencolok dengan sengaja: yang dihapus di sini tidak dapat kembali. */
.kotak-bahaya{
  background:var(--merah-muda); border:1px solid #F3C0BC; color:#7A1B15;
  border-radius:9px; padding:12px 14px; font-size:13.5px; margin:12px 0 16px;
}
.kotak-bahaya ul{margin:6px 0 0; padding-left:18px}
.kotak-bahaya li+li{margin-top:3px}
.kotak-bahaya .ket{color:#7A1B15; opacity:.85}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--bayang); padding:20px 22px; margin-bottom:18px}
.panel h2{margin:0 0 4px; font-size:17px; letter-spacing:-.01em}
.panel .ket{color:var(--muted); font-size:13.5px; margin:0 0 16px}

table.daftar{width:100%; border-collapse:collapse; font-size:14.5px}
table.daftar th,table.daftar td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
  vertical-align:top}
table.daftar th{font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:700; white-space:nowrap}
table.daftar tbody tr:hover{background:var(--paper)}
table.daftar a{color:var(--forest); font-weight:600; text-decoration:none}
table.daftar a:hover{text-decoration:underline}
.gulung{overflow-x:auto; margin:0 -22px; padding:0 22px}

.label{display:inline-block; padding:3px 9px; border-radius:99px; font-size:12px; font-weight:700;
  white-space:nowrap}
.label.dijadwalkan{background:#EEF1F0; color:#48605A}
.label.berlangsung{background:#DFF3E7; color:#136A43}
.label.selesai{background:#F0EBE0; color:#6B5A21}

.kosong{text-align:center; color:var(--muted); padding:34px 16px; font-size:14.5px}
.kosong b{display:block; color:var(--ink); font-size:16px; margin-bottom:5px}

.medan-2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media (max-width:640px){.medan-2{grid-template-columns:1fr}}

/* Isian berdampingan selalu sejajar. Keterangan (label) dan kotak isian tiap kolom berbagi
   baris grid dengan tetangganya, jadi kotaknya tetap sejajar walau hanya sebagian isian yang
   berketerangan, atau keterangannya melipat menjadi dua baris. Peramban tanpa subgrid tetap
   memakai tata letak lama. Syaratnya: tiap .medan memuat dua anak, keterangan lalu kotak isian. */
@supports (grid-template-rows:subgrid){
  .medan-2>.medan{display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0}
  /* Keterangan rata dasar: bila tetangganya punya petunjuk, label tetap menempel pada kotaknya. */
  .medan-2>.medan>span.nama{align-self:end}
}
/* Isian yang memakai selebar kedua kolom. */
.medan-2>.medan-lebar{grid-column:1/-1}

/* Kata sandi yang hanya lewat sekali. Dibuat mencolok karena tidak dapat
   ditampilkan ulang; kelewat sekali berarti harus disetel ulang. */
.sandi-sekali{border-color:var(--gold); background:#FDF8EC}
.sandi-besar{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:26px; letter-spacing:.06em; font-weight:600; color:var(--ink);
  background:#fff; border:1px dashed var(--gold); border-radius:10px;
  padding:14px 16px; margin:4px 0 12px; word-break:break-all; user-select:all}

/* Satu akun pada daftar pengguna, dapat dibuka untuk disunting di tempat. */
.akun{border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:#fff}
.akun[data-nonaktif] .akun-nama b{color:var(--muted)}
.akun summary{display:flex; gap:12px; justify-content:space-between; align-items:center;
  padding:13px 15px; cursor:pointer; list-style:none}
.akun summary::-webkit-details-marker{display:none}
.akun summary:hover{background:var(--paper)}
.akun-nama{min-width:0}
.akun-buka{flex-shrink:0; font-size:13px; font-weight:600; color:var(--forest)}
.akun[open] .akun-buka{color:var(--muted)}
.akun-isi{padding:4px 15px 16px; border-top:1px solid var(--line)}
.akun-aksi{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--line)}

/* Baris unggah: dua isian berdampingan dengan tombolnya di ujung. */
.baris-unggah{display:flex; flex-wrap:wrap; gap:0 14px; align-items:flex-end;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line)}
.baris-unggah .medan{flex:1 1 240px; margin-bottom:0}
.baris-unggah-tombol{display:flex}
.baris-unggah-tombol .tombol-kecil{min-height:48px}
@media (max-width:640px){
  .baris-unggah .medan{flex:1 1 100%}
  .baris-unggah-tombol{width:100%; margin-top:10px}
  .baris-unggah-tombol .tombol-kecil{width:100%}
}

/* Daftar berkas materi. Nomornya dipakai karena urutan paparan bermakna. */
.daftar-berkas{list-style:decimal; margin:0; padding-left:26px}
.daftar-berkas li{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  align-items:center; padding:12px 0; border-bottom:1px solid var(--line)}
.daftar-berkas li:last-child{border-bottom:0}
.berkas-nama{min-width:0; flex:1 1 240px; word-break:break-word}
.berkas-aksi{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* Galeri dokumentasi. */
.galeri{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.foto{margin:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper)}
.foto img{display:block; width:100%; height:190px; object-fit:cover; background:#E7EAE6}
.foto figcaption{padding:10px 12px; display:flex; flex-direction:column; gap:8px; font-size:13px}
.foto-ubah{display:flex; gap:8px}
.foto-ubah .isian{flex:1; min-width:0; padding:7px 10px; font-size:13.5px}
.foto-ubah button{flex-shrink:0}

/* Notulen. Tulisannya memakai lebar baca yang nyaman dan menjaga baris baru
   apa adanya, karena notulen kerap berisi daftar bernomor yang diketik
   manual. Kotak tulisnya tidak dibatasi lebar baca agar layar lebar terpakai. */
/* Tiga kotak bagian, jadi masing-masing tidak setinggi kotak tunggal dahulu. */
.notulen-tulis{min-height:150px; line-height:1.65; resize:vertical}
.notulen-tulis::placeholder{color:#9AA8A3; opacity:1}
.notulen-judul{font-size:14px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); margin:18px 0 6px}
.notulen-judul:first-of-type{margin-top:4px}
.notulen-baca{white-space:pre-wrap; line-height:1.7; font-size:15px; max-width:68ch}
.notulen-berkas{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  align-items:center; margin-top:16px; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--paper)}

/* Baris penyaring daftar. Tombolnya disejajarkan dengan dasar kotak isian,
   bukan dengan labelnya, karena label dan kotak tingginya berbeda. */
.saring{display:flex; flex-wrap:wrap; gap:0 14px; align-items:flex-end;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line)}
.saring .medan{flex:1 1 220px; margin-bottom:0}
.saring-tombol{display:flex; gap:10px}
.saring-tombol .tombol-kecil{min-height:48px}
@media (max-width:640px){
  .saring{gap:0}
  .saring .medan{flex:1 1 100%}
  .saring-tombol{width:100%; margin-top:10px}
  .saring-tombol .tombol-kecil{flex:1; text-align:center}
}
select.isian{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%235A6D67' stroke-width='2'><path d='M6 8l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:36px}
textarea.isian{min-height:90px; resize:vertical}
.pilihan-opd{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:6px 14px;
  max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:9px; padding:10px 12px}
.pilihan-opd label{display:flex; gap:8px; align-items:flex-start; font-size:14px; line-height:1.4}

/* ===================== QR dan rincian rapat ===================== */
.qr-blok{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap}
.qr-kotak{border:1px solid var(--line); border-radius:10px; padding:14px; background:#fff;
  display:grid; place-items:center; flex:none}
.qr-kotak canvas,.qr-kotak img{display:block; width:190px; height:190px; image-rendering:pixelated}
.qr-ket{flex:1; min-width:230px}
.kode-besar{font-size:30px; font-weight:800; letter-spacing:.18em; margin:2px 0 6px;
  font-variant-numeric:tabular-nums}
.tautan-hadir{word-break:break-all; font-size:13.5px; color:var(--muted)}

.rincian{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:14.5px; margin:0}
.rincian dt{color:var(--muted); white-space:nowrap}
.rincian dd{margin:0}

.ttd-gambar{height:44px; width:auto; max-width:150px}

/* ===================== halaman peserta ===================== */
.peserta{flex:1; width:100%; max-width:560px; margin:0 auto; padding:18px 16px 36px}
.kepala-rapat{background:var(--forest); color:#fff; border-radius:var(--radius); padding:16px 18px;
  margin-bottom:18px}
.kepala-rapat h1{margin:0 0 4px; font-size:19px; color:#fff; line-height:1.35}
.kepala-rapat .meta{font-size:13.5px; color:#CBE5DA; line-height:1.55}
.tutup-pesan{background:#FDF4E0; border:1px solid #EBD9A8; color:#6B4E07; border-radius:9px;
  padding:14px 16px; font-size:14.5px}

.sug{position:relative}
.sug-daftar{position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px);
  background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:var(--bayang);
  max-height:210px; overflow:auto; padding:4px}
.sug-daftar button{display:block; width:100%; text-align:left; background:none; border:0;
  font:inherit; font-size:14.5px; padding:9px 10px; border-radius:7px; cursor:pointer; color:var(--ink)}
.sug-daftar button:hover,.sug-daftar button[aria-selected="true"]{background:#E7F3EE}
.sug-daftar .jab{font-weight:600}
.sug-daftar .org{display:block; font-size:12.5px; color:var(--muted)}
.sug-petunjuk{font-size:12.5px; color:var(--muted); margin-top:5px}

/* Keterangan bahwa jabatan boleh diketik sendiri. Dibuat setenang petunjuk
   lain: ini pemberitahuan, bukan galat. Yang menuntun matanya cuma kata
   "ketik saja" yang ditebalkan. */
.ketik-sendiri{font-size:12.5px; color:var(--muted); line-height:1.5;
  margin-top:6px; padding-left:9px; border-left:2px solid var(--line)}

.ttd-bungkus{border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden}
.ttd-bungkus canvas{display:block; width:100%; height:190px; touch-action:none; cursor:crosshair}
.ttd-kaki{display:flex; align-items:center; gap:10px; padding:8px 10px; border-top:1px solid var(--line);
  background:var(--paper)}
.ttd-kaki .sisa{font-size:12.5px; color:var(--muted); margin-right:auto}

.setuju{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.55;
  background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:12px 14px}
.setuju input{margin-top:3px; flex:none; width:17px; height:17px}
.setuju a{color:var(--forest)}

.selesai-kartu{text-align:center; padding:30px 24px}
.selesai-kartu .centang{width:62px; height:62px; border-radius:50%; background:#DFF3E7;
  display:grid; place-items:center; margin:0 auto 16px}
.selesai-kartu h1{font-size:21px; margin:0 0 6px}
.selesai-kartu .nama-besar{font-size:17px; font-weight:700; margin:14px 0 2px}

/* Angka ringkasan pada rekapitulasi. */
.angka-baris{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.angka{border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--paper)}
.angka-besar{font-size:30px; font-weight:700; line-height:1.15; color:var(--forest)}
.angka-ket{font-size:13px; color:var(--muted); margin-top:3px}

/* Tanda tangan notulis dan pimpinan pada notulen. */
.ttd-notulen{margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
.ttd-notulen h3{margin:0 0 4px; font-size:16px}
.ttd-dua{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px}
@media (max-width:760px){.ttd-dua{grid-template-columns:1fr}}
.ttd-kartu{border:1px solid var(--line); border-radius:10px; padding:14px; background:#fff}
.ttd-kartu .ttd-peran{font-weight:700; margin-bottom:8px}
.ttd-kartu .ttd-nama{font-weight:600; margin-top:6px}
.ttd-kartu .ttd-gambar{height:70px; max-width:100%; display:block}
.ttd-kartu form{margin-top:10px}

/* Kotak gores. touch-action:none wajib, kalau tidak jari menggulung halaman
   alih-alih menggambar. */
canvas.kotak-ttd{display:block; width:100%; height:150px; touch-action:none;
  cursor:crosshair; background:#fff; border:1px dashed var(--line); border-radius:9px}
.ttd-aksi{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  align-items:center; margin-top:10px}

/* Tautan tanda tangan tablet pada halaman rapat. */
.tautan-ttd{margin-top:12px; padding:12px 14px; border:1px solid var(--gold);
  border-radius:10px; background:#FDF8EC}
.qr-kecil{margin:10px 0}
.qr-kecil img{display:block; width:150px; height:150px;
  image-rendering:pixelated; border:1px solid var(--line);
  border-radius:6px; background:#fff; padding:6px}
.tautan-alamat{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; word-break:break-all; color:var(--ink); margin-bottom:6px}
.tautan-ttd form{margin-top:10px}

/* Pita penanda mode tablet pada halaman peserta. */
.pita-tablet{background:var(--forest); color:#fff; text-align:center;
  padding:9px 14px; border-radius:9px; margin-bottom:14px;
  font-size:13.5px; font-weight:600}
.ttd-untuk{font-size:14px; color:var(--muted)}

/* Notulen yang dibaca di tablet sebelum ditandatangani. */
.gulung-notulen{max-height:38vh; overflow:auto; padding:12px 14px;
  border:1px solid var(--line); border-radius:9px; background:var(--paper)}

/* Pratinjau lambang dan logo. Latar kotak-kotak halus supaya gambar berlatar
   tembus pandang tetap terlihat batasnya. */
.lambang-pratinjau{border:1px solid var(--line); border-radius:10px; padding:12px;
  background-color:#fff;
  background-image:linear-gradient(45deg,#F0F2EF 25%,transparent 25%,transparent 75%,#F0F2EF 75%),
                   linear-gradient(45deg,#F0F2EF 25%,transparent 25%,transparent 75%,#F0F2EF 75%);
  background-size:14px 14px; background-position:0 0,7px 7px}
.lambang-pratinjau img{display:block; max-height:90px; max-width:100%; object-fit:contain}
.logo-kecil{height:34px; width:auto; max-width:60px; object-fit:contain}

/* --- memindahkan peserta daftar hadir ke Data pejabat --- */
.simpan-pejabat{margin-top:6px}
.simpan-pejabat>summary{
  display:inline-block; cursor:pointer; list-style:none;
  font-size:12.5px; font-weight:600; color:var(--forest);
  padding:3px 9px; border:1px solid #BEDDD0; border-radius:7px; background:#F2F8F5;
}
.simpan-pejabat>summary::-webkit-details-marker{display:none}
.simpan-pejabat>summary:hover{background:#E7F3EE}
.simpan-pejabat[open]>summary{margin-bottom:8px}
.simpan-pejabat form{max-width:300px; padding:10px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface)}
.simpan-pejabat .medan{margin-bottom:10px}
.simpan-pejabat .isian{padding:8px 10px; font-size:14px}
.sudah-pejabat{font-size:12.5px; color:var(--muted); margin-top:6px}

/* Keterangan bahwa sebuah daftar kosong karena datanya memang belum ada.
   Dibedakan dari .galat: ini bukan kesalahan pemakai, hanya pemberitahuan. */
.kotak-kabar{
  background:#F2F8F5; border:1px solid #BEDDD0; color:#1C4D3E;
  border-radius:9px; padding:11px 13px; font-size:13.5px; line-height:1.55;
}
.kotak-kabar a{color:var(--forest-tua); font-weight:600}

/* Penanda unit kerja di bawah perangkat daerah pada daftar Perangkat daerah. */
.unit-cabang{color:var(--muted); margin-right:5px; font-weight:400}

/* --- halaman penahan saat perubahan basis data belum dipasang --- */
.kartu-tengah{
  max-width:620px; margin:48px auto; padding:26px 28px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--bayang);
}
.kartu-tengah h1{font-size:21px; margin:0 0 6px}
.kartu-tengah .ket{color:var(--muted); font-size:13.5px; margin:0 0 10px}
.langkah-judul{font-size:15px; margin:22px 0 8px}
.langkah{margin:0 0 18px; padding-left:20px; line-height:1.75; font-size:15px}
.langkah li+li{margin-top:4px}
.perintah{
  background:#14302B; color:#E6F0EC; border-radius:9px;
  padding:12px 14px; font-size:13px; line-height:1.6;
  overflow-x:auto; margin:0 0 18px;
}