@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Warna diambil dari buku prestasi: kertas, tinta pulpen biru, dan stempel merah. */
:root {
  --kertas: #F5F7FA;
  --permukaan: #FFFFFF;
  --permukaan-2: #EEF1F6;
  --tinta: #24408E;
  --tinta-tua: #172B61;
  --tinta-muda: #E3E9F7;
  --teks: #1B2233;
  --teks-2: #5A6478;
  --garis: #D9DFE9;
  --stempel: #B3261E;
  --stempel-muda: #FBE9E7;
  --hijau: #1D7348;
  --hijau-muda: #E3F3EA;
  --kuning: #85570A;
  --kuning-muda: #FDF1DC;
  --bayang: 0 1px 2px rgba(23, 43, 97, .08), 0 4px 16px rgba(23, 43, 97, .06);
  --kepala: #24408E;
  --pada-tinta: #FFFFFF;
  --r-kecil: 8px;
  --r: 14px;
  --nav-tinggi: 64px;
  color-scheme: light;
}
/* Tema: data-theme="light"/"dark" dipilih pengguna; tanpa atribut = ikuti HP. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kertas: #11151F; --permukaan: #1A2030; --permukaan-2: #232A3D;
    --tinta: #8FA8EE; --tinta-tua: #B9C8F5; --tinta-muda: #26314F;
    --teks: #E7EAF2; --teks-2: #A3ABBD; --garis: #2E3650;
    --stempel: #F2867D; --stempel-muda: #3A2020; --hijau: #6FD3A0; --hijau-muda: #1C3328;
    --kuning: #F1C376; --kuning-muda: #3A2F18;
    --bayang: 0 1px 2px rgba(0,0,0,.3);
    --kepala: #1C2A52; --pada-tinta: #0E1630;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --kertas: #11151F; --permukaan: #1A2030; --permukaan-2: #232A3D;
    --tinta: #8FA8EE; --tinta-tua: #B9C8F5; --tinta-muda: #26314F;
    --teks: #E7EAF2; --teks-2: #A3ABBD; --garis: #2E3650;
    --stempel: #F2867D; --stempel-muda: #3A2020; --hijau: #6FD3A0; --hijau-muda: #1C3328;
    --kuning: #F1C376; --kuning-muda: #3A2F18;
    --bayang: 0 1px 2px rgba(0,0,0,.3);
    --kepala: #1C2A52; --pada-tinta: #0E1630;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kertas);
  color: var(--teks);
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75em; }
a { color: var(--tinta); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.muat { padding: 40px 16px; text-align: center; color: var(--teks-2); }
.redup { color: var(--teks-2); }
.kecil { font-size: .88rem; }
.tebal { font-weight: 700; }
.angka { font-variant-numeric: tabular-nums; }
.sembunyi { display: none !important; }

/* ---------- Kerangka ---------- */
.kerangka { min-height: 100vh; padding-bottom: calc(var(--nav-tinggi) + env(safe-area-inset-bottom)); }
.kepala {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--kepala); color: #fff;
}
.kepala .judul { flex: 1; min-width: 0; }
.kepala .judul b { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kepala .judul span { font-size: .82rem; opacity: .85; }
.pil-sinkron {
  border: 0; border-radius: 999px; padding: 6px 12px; font-size: .82rem; font-weight: 700;
  background: rgba(255,255,255,.16); color: #fff; cursor: pointer; white-space: nowrap;
}
.ikon-kepala { border: 0; background: rgba(255,255,255,.16); color: #fff; width: 40px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.ikon-kepala svg { width: 22px; height: 22px; }
.pil-sinkron.menunggu { background: #FCE7B2; color: #5C3D00; }
.pil-sinkron.gagal { background: #FFD8D3; color: #7A1610; }
.isi { max-width: 760px; margin: 0 auto; padding: 16px; }
.isi.lebar { max-width: 1100px; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--permukaan); border-top: 1px solid var(--garis);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--nav-tinggi); text-decoration: none; color: var(--teks-2); font-size: .74rem; font-weight: 700;
}
.nav a svg { width: 24px; height: 24px; }
.nav a.aktif { color: var(--tinta); }
.nav a.aktif svg { stroke-width: 2.4; }

@media (min-width: 960px) {
  .kerangka { padding-bottom: 0; padding-left: 232px; }
  .nav {
    top: 0; bottom: 0; right: auto; width: 232px; flex-direction: column; justify-content: flex-start;
    border-top: 0; border-right: 1px solid var(--garis); padding: 84px 12px 12px;
  }
  .nav a { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; height: 48px; padding: 0 14px; border-radius: 10px; font-size: .95rem; }
  .nav a.aktif { background: var(--tinta-muda); }
  .kepala { padding-left: 24px; }
}

/* ---------- Komponen dasar ---------- */
.kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r); padding: 16px; margin-bottom: 14px; }
.baris { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.baris > .lentur { flex: 1; min-width: 0; }
.tumpuk > * + * { margin-top: 12px; }

.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--garis);
  background: var(--permukaan); color: var(--teks); font-weight: 700; cursor: pointer; text-decoration: none;
}
.tombol:disabled { opacity: .5; cursor: default; }
.tombol.utama { background: var(--tinta); border-color: var(--tinta); color: var(--pada-tinta); }
.tombol.bahaya { color: var(--stempel); border-color: currentColor; background: transparent; }
.tombol.datar { border-color: transparent; background: transparent; color: var(--tinta); padding: 0 10px; }
.tombol.penuh { width: 100%; }
.tombol.kecil { min-height: 38px; padding: 0 12px; font-size: .9rem; border-radius: 10px; }
.tombol svg { width: 22px; height: 22px; }

label.isian { display: block; }
label.isian > span { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 4px; }
label.isian > small { display: block; color: var(--teks-2); margin-top: 4px; font-size: .84rem; }
input[type=text], input[type=password], input[type=date], input[type=search], input[type=number], input[type=month], input[type=tel], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--garis); border-radius: 10px;
  background: var(--permukaan); font-size: 1rem;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px var(--tinta-muda); }
.centang { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.centang input { width: 22px; height: 22px; accent-color: var(--tinta); }

.galat { background: var(--stempel-muda); color: var(--stempel); border-radius: 10px; padding: 10px 12px; font-weight: 700; }
.info { background: var(--tinta-muda); color: var(--tinta-tua); border-radius: 10px; padding: 10px 12px; }
.peringatan { background: var(--kuning-muda); color: var(--kuning); border-radius: 10px; padding: 10px 12px; }
.sukses { background: var(--hijau-muda); color: var(--hijau); border-radius: 10px; padding: 10px 12px; }

.lencana { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--permukaan-2); color: var(--teks-2); white-space: nowrap; }
.lencana.hadir { background: var(--hijau-muda); color: var(--hijau); }
.lencana.izin, .lencana.sakit { background: var(--kuning-muda); color: var(--kuning); }
.lencana.alpa { background: var(--stempel-muda); color: var(--stempel); }
.lencana.setor { background: var(--tinta); color: var(--pada-tinta); }

/* Penanda warna kelompok, seperti warna sampul tiap jilid. */
.kel { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; color: var(--teks-2); }
.kel::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--warna-kel, var(--tinta)); }

/* ---------- Pemilih kelompok ---------- */
.pilih-kel { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -16px 6px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.pilih-kel::-webkit-scrollbar { display: none; }
.pilih-kel button {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 12px; cursor: pointer; font-weight: 700;
  border: 1.5px solid var(--garis); background: var(--permukaan); color: var(--teks);
  box-shadow: inset 4px 0 0 var(--warna-kel);
}
.pilih-kel button[aria-pressed=true] { background: var(--warna-kel); border-color: var(--warna-kel); color: #fff; box-shadow: none; }

/* ---------- Daftar santri ---------- */
.daftar { list-style: none; margin: 0; padding: 0; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r); overflow: hidden; }
.daftar > li + li { border-top: 1px solid var(--garis); }
.butir { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px; }
.butir .tekan { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; display: block; }
.butir .nama { font-weight: 700; font-size: 1.05rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.butir .ket { color: var(--teks-2); font-size: .88rem; display: block; }
.butir.selesai .nama { color: var(--teks-2); }
.butir .opsi { background: none; border: 0; padding: 8px; color: var(--teks-2); cursor: pointer; border-radius: 8px; min-width: 44px; min-height: 44px; }

.ringkas-hari { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ringkas-hari .lencana { font-size: .88rem; padding: 4px 12px; }
.togel-layar {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 32px; padding: 0; border-radius: 999px;
  border: 1.5px solid var(--garis); background: var(--permukaan); color: var(--teks-2); cursor: pointer;
}
.togel-layar svg { width: 20px; height: 20px; }
.togel-layar.nyala { border-color: var(--kuning); background: var(--kuning-muda); color: var(--kuning); }

.pindai-mengambang {
  position: fixed; right: 16px; bottom: calc(var(--nav-tinggi) + 16px + env(safe-area-inset-bottom)); z-index: 25;
  display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 22px 0 18px; border-radius: 30px; border: 0;
  background: var(--tinta); color: var(--pada-tinta); font-weight: 700; font-size: 1.05rem; box-shadow: 0 6px 20px rgba(23,43,97,.35); cursor: pointer;
}
.pindai-mengambang svg { width: 28px; height: 28px; }
@media (min-width: 960px) { .pindai-mengambang { bottom: 24px; right: 24px; } }

/* ---------- Lembar (bottom sheet) ---------- */
.latar { position: fixed; inset: 0; z-index: 50; background: rgba(15, 22, 40, .45); display: flex; align-items: flex-end; justify-content: center; }
.lembar {
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--permukaan);
  border-radius: 20px 20px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  animation: naik .18s ease-out;
}
@media (min-width: 640px) { .latar { align-items: center; } .lembar { border-radius: 20px; } }
@keyframes naik { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.lembar .tutup { float: right; margin: -6px -6px 0 0; }
.lembar h2 { margin-right: 48px; }

/* ---------- Stempel nilai ---------- */
.stempel-baris { display: flex; gap: 12px; flex-wrap: wrap; }
.stempel {
  width: 68px; height: 68px; border-radius: 50%; cursor: pointer;
  border: 3px solid var(--tinta); background: transparent; color: var(--tinta);
  font-weight: 700; font-size: 1.35rem; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease;
}
.stempel:active { transform: scale(.94); }
.stempel[aria-pressed=true] {
  background: var(--tinta); color: var(--pada-tinta); transform: rotate(-8deg);
  box-shadow: 0 0 0 3px var(--permukaan), 0 0 0 5px var(--tinta);
}
.stempel.kecil { width: 48px; height: 48px; font-size: 1rem; border-width: 2.5px; }
.desk-nilai { min-height: 1.4em; color: var(--teks-2); font-size: .9rem; margin-top: 8px; }

.stepper { display: flex; align-items: stretch; gap: 8px; }
.stepper button { width: 56px; min-height: 56px; border-radius: 12px; border: 1.5px solid var(--garis); background: var(--permukaan-2); font-size: 1.6rem; font-weight: 700; cursor: pointer; color: var(--tinta); }
.stepper input { text-align: center; font-size: 1.5rem; font-weight: 700; min-height: 56px; }

/* ---------- Pemindai ---------- */
.pemindai { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; display: flex; flex-direction: column; }
.pemindai video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pemindai .bingkai {
  position: absolute; left: 50%; top: 45%; width: min(70vw, 300px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 24px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); border: 3px solid rgba(255,255,255,.9);
}
.pemindai .atas, .pemindai .bawah { position: relative; z-index: 2; padding: 16px; padding-top: calc(16px + env(safe-area-inset-top)); }
.pemindai .bawah { margin-top: auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pemindai .bawah .tombol { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.35); }
.pemindai p { text-align: center; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* ---------- Tabel (pengurus) ---------- */
.gulir-x { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--garis); border-radius: var(--r); background: var(--permukaan); }
table.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabel th, .tabel td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--garis); vertical-align: top; }
.tabel th { background: var(--permukaan-2); font-size: .84rem; color: var(--teks-2); white-space: nowrap; position: sticky; top: 0; }
.tabel td.angka, .tabel th.angka { text-align: right; }
.tabel tr:last-child td { border-bottom: 0; }

.angka-besar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.angka-besar > div { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r); padding: 12px 14px; }
.angka-besar b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.angka-besar span { color: var(--teks-2); font-size: .86rem; }

.menu-daftar a {
  display: flex; align-items: center; gap: 14px; padding: 14px; min-height: 60px; text-decoration: none; color: var(--teks);
}
.menu-daftar a svg { width: 24px; height: 24px; color: var(--tinta); flex: 0 0 auto; }
.menu-daftar a b { display: block; }
.menu-daftar a span { display: block; color: var(--teks-2); font-size: .86rem; }

.linimasa { list-style: none; padding: 0; margin: 0; }
.linimasa li { position: relative; padding: 0 0 14px 22px; }
.linimasa li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--warna-kel, var(--tinta)); }
.linimasa li::after { content: ''; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: var(--garis); }
.linimasa li:last-child::after { display: none; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-tinggi) + 90px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70;
  background: var(--teks); color: var(--permukaan); padding: 12px 18px; border-radius: 12px; font-weight: 700; max-width: calc(100vw - 32px);
  box-shadow: var(--bayang); animation: naik .18s ease-out; cursor: pointer;
}

.tab-seg { display: flex; background: var(--permukaan-2); border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 14px; }
.tab-seg button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; font-weight: 700; color: var(--teks-2); cursor: pointer; }
.tab-seg button[aria-pressed=true] { background: var(--permukaan); color: var(--tinta); box-shadow: var(--bayang); }

.teks-wa { white-space: pre-wrap; background: var(--permukaan-2); border-radius: 10px; padding: 12px; font-size: .95rem; }

/* ---------- Halaman orang tua ---------- */
.wali { max-width: 560px; margin: 0 auto; padding: 0 16px 40px; }
.wali-kepala { background: var(--kepala); color: #fff; padding: 28px 20px 56px; text-align: left; }
.wali-kepala .tpq { opacity: .85; font-size: .9rem; }
.wali-kepala h1 { font-size: 1.9rem; margin: 6px 0 4px; }
.wali-kartu-utama { margin-top: -40px; }
.capaian-besar { font-size: 1.7rem; font-weight: 700; color: var(--tinta); line-height: 1.15; }
.banding { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.banding > div { background: var(--permukaan-2); border-radius: 12px; padding: 12px; }
.banding .lbl { font-size: .84rem; color: var(--teks-2); }

/* ---------- Cetak stiker QR ---------- */
.lembar-cetak { display: grid; grid-template-columns: repeat(auto-fill, var(--lebar-stiker, 40mm)); gap: 4mm; justify-content: start; }
.stiker { width: var(--lebar-stiker, 40mm); border: 1px dashed #9AA3B5; border-radius: 3mm; padding: 2.5mm; text-align: center; background: #fff; color: #000; break-inside: avoid; }
.stiker svg { width: var(--qr, 30mm); height: var(--qr, 30mm); display: block; margin: 0 auto; }
.stiker .n { font-weight: 700; font-size: 9pt; margin-top: 1.5mm; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stiker .k { font-size: 7pt; color: #333; }
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff; }
  .kepala, .nav, .tanpa-cetak, .pindai-mengambang { display: none !important; }
  .kerangka { padding: 0 !important; }
  .isi { max-width: none; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Pilihan tema */
.pilih-tema { display: flex; background: var(--permukaan-2); border-radius: 12px; padding: 4px; gap: 4px; }
.pilih-tema button { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent; font-weight: 700; color: var(--teks-2); cursor: pointer; }
.pilih-tema button[aria-pressed=true] { background: var(--permukaan); color: var(--tinta); box-shadow: var(--bayang); }

/* Kolom halaman bisa dimatikan per santri */
.baris-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.togel-hal {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 30px; padding: 0;
  border-radius: 999px; border: 1.5px solid var(--tinta); background: var(--tinta-muda); color: var(--tinta); cursor: pointer;
}
.togel-hal svg { width: 18px; height: 18px; }
.togel-hal.mati { border-color: var(--garis); background: var(--permukaan); color: var(--teks-2); }

/* Popup setoran & kehadiran: ukuran besar agar mudah dipakai pengajar senior */
.lembar.besar { max-width: 600px; max-height: 96vh; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); }
.lembar.besar h2 { font-size: 1.75rem; margin-right: 56px; }
.lembar.besar .tutup { width: 52px; min-height: 52px; }
.lembar.besar .tutup svg { width: 28px; height: 28px; }
.lembar.besar .info, .lembar.besar .peringatan { font-size: 1.02rem; }
.lembar.besar .tebal.kecil, .lembar.besar .isian > span { font-size: 1.05rem; }
.lembar.besar .redup.kecil, .lembar.besar .kecil.redup { font-size: .95rem; }
.lembar.besar select, .lembar.besar textarea { font-size: 1.1rem; min-height: 56px; }
.lembar.besar .tumpuk > * + * { margin-top: 16px; }
/* Stempel nilai mengisi lebar layar: 4 nilai = 4 kolom besar */
.lembar.besar .stempel-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 12px; }
.lembar.besar .stempel { width: 100%; max-width: 96px; height: auto; aspect-ratio: 1; justify-self: center; font-size: 1.9rem; border-width: 4px; }
.lembar.besar .stempel[aria-pressed=true] { box-shadow: 0 0 0 3px var(--permukaan), 0 0 0 6px var(--tinta); }
.lembar.besar .desk-nilai { font-size: 1rem; }
.lembar.besar .stepper button { width: 72px; min-height: 68px; font-size: 2.1rem; }
.lembar.besar .stepper input { min-height: 68px; font-size: 2rem; }
.lembar.besar .togel-hal { width: 46px; height: 40px; }
.lembar.besar .togel-hal svg { width: 22px; height: 22px; }
.lembar.besar .tombol { min-height: 60px; font-size: 1.15rem; border-radius: 14px; }
.lembar.besar .tombol.utama { min-height: 66px; font-size: 1.25rem; }
.lembar.besar .tombol.datar { min-height: 48px; font-size: 1.05rem; }