@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url("../fonts/plus-jakarta-sans-500.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url("../fonts/plus-jakarta-sans-600.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url("../fonts/plus-jakarta-sans-700.woff2") format("woff2");
}

:root {
    --navy: #0c2342;
    --biru: #2f6bff;
    --latar: #f4f7fb;
    --kartu: #ffffff;
    --garis: #e8eef6;
    --teks: #0f172a;
    --redup: #64748b;
    --bahaya: #b42318;
    --aman: #067647;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-weight: 500;
    color: var(--teks);
    background: var(--latar);
}

a { color: var(--biru); }

.kerangka { min-height: 100vh; display: grid; grid-template-columns: 272px 1fr; }

.samping {
    background: var(--navy);
    color: #d7e2f0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.merek { display: flex; align-items: center; gap: 12px; padding: 24px 20px 16px; }
.merek-bulat {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--navy); flex: none; overflow: hidden;
}
.merek-bulat svg, .merek-bulat img { width: 28px; height: 28px; object-fit: contain; }
.merek strong { display: block; color: #fff; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.merek span span { display: block; margin-top: 2px; color: #9fb0c9; font-size: 11px; }

.samping nav {
    display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 16px 12px;
    overflow: auto; min-height: 0; flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.28) transparent;
}
.samping nav::-webkit-scrollbar { width: 8px; }
.samping nav::-webkit-scrollbar-track { background: transparent; }
.samping nav::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 0.28);
    border: 2px solid transparent;
    border-radius: 99px;
    background-clip: padding-box;
}
.samping a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d7e2f0;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
}
.samping a svg, .nav-kaki svg, .pil-tahun svg { width: 18px; height: 18px; flex: none; }
.samping a:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
.samping a.aktif, .samping a.aktif:hover { background: var(--biru); color: #fff; }
.kelompok {
    margin: 16px 12px 4px;
    color: #8ea0b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.kaki-menu { border-top: 1px solid rgb(255 255 255 / 0.1); padding: 12px; }
.versi-kaki { margin: 0 8px 8px; color: #8ea0b8; font-size: 11px; }
.daftar-cocok { margin: 8px 0 0; padding-left: 18px; }
.daftar-cocok li { margin: 4px 0; }
.kaki-baris { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kaki-baris form.penuh, .kaki-baris form.penuh .nav-kaki { width: 100%; }
.nav-kaki {
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; background: transparent; color: #c5d4e8;
    padding: 6px 8px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none;
}
.samping .nav-kaki { padding: 6px 8px; color: #c5d4e8; font-size: 13px; }
.samping .nav-kaki:hover { background: transparent; color: #fff; }

.kolom-isi { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.palang {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px;
    height: 64px; padding: 0 24px;
    background: #fff; border-bottom: 1px solid #e6edf5;
}
.palang-judul { min-width: 0; }
.palang-judul strong { display: block; font-size: 16px; }
.palang-judul p { margin: 0; color: var(--redup); font-size: 12px; }
.palang-kanan { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pil-tahun, .pil-akun {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid #e2e8f0; background: #fff; border-radius: 999px;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}
.pil-tahun { padding: 6px 12px; font-size: 14px; font-weight: 600; }
.pil-akun { padding: 4px 12px 4px 4px; }
.pil-akun strong, .pil-akun small { display: block; line-height: 1.2; }
.pil-akun strong { font-size: 13px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pil-akun small { color: var(--redup); font-size: 11px; }
.awal {
    width: 32px; height: 32px; border-radius: 999px; background: var(--biru); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.awal svg { width: 16px; height: 16px; }
.tombol-menu {
    display: none; width: 36px; height: 36px; border: 0; border-radius: 12px; background: transparent; color: #334155; cursor: pointer;
}
.tombol-menu svg { width: 20px; height: 20px; }
.lapis { display: none; }

.isi { flex: 1; padding: 24px 32px 32px; min-width: 0; }
.kaki { padding: 16px 32px 20px; color: #94a3b8; font-size: 12px; }
.kepala { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.kepala > form, .kepala > .btn { flex: none; }
.kepala .btn { white-space: nowrap; }
.kepala h1 { margin-bottom: 4px; }
.kepala .redup { margin: 0; max-width: 42rem; line-height: 1.5; }
h1 { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.02em; }
h2 { font-size: 18px; margin: 0 0 12px; letter-spacing: -0.02em; }
.redup { color: var(--redup); }

.kartu {
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 12px 30px -24px rgb(15 23 42 / 0.45);
}

.angka { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0 22px; }
.angka .kartu strong { display: block; font-size: 28px; margin-top: 6px; }

.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #eef3f8; vertical-align: middle; font-size: 14px; }
.tabel th { color: var(--redup); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tabel tbody tr:hover { background: #f8fafc; }

.btn, button.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--biru); color: white; border: 0; border-radius: 999px;
    padding: 10px 16px; text-decoration: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
}
.btn:hover { background: #1d4ed8; }
.btn-teks, button.btn-teks { background: #fff; color: var(--teks); border: 1px solid #e2e8f0; }
.btn-teks:hover, .btn-teks:focus, .btn-teks:active,
button.btn-teks:hover, button.btn-teks:focus, button.btn-teks:active { background: #f8fafc; color: var(--teks); }
.btn-bahaya, button.btn-bahaya { background: #fff1f0; color: var(--bahaya); }
.btn-bahaya:hover, .btn-bahaya:focus, .btn-bahaya:active,
button.btn-bahaya:hover, button.btn-bahaya:focus, button.btn-bahaya:active { background: #ffe4e2; color: var(--bahaya); }
.baris-aksi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.cari { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.cari .pilih-periode { display: flex; align-items: center; gap: 8px; margin: 0; width: auto; font-size: 14px; }
.cari .pilih-periode .input { width: auto; min-width: 11.5rem; }
.cari .pilih-angkatan { white-space: nowrap; }
.cari .pilih-angkatan .input { width: min(34rem, 100%); min-width: 0; }
.input, select.input, textarea.input {
    width: 100%; border: 1px solid #dbe3ee; border-radius: 12px; padding: 10px 12px;
    font: inherit; font-size: 14px; background: white; color: var(--teks);
}
.input:focus, select.input:focus, textarea.input:focus { outline: none; border-color: var(--biru); box-shadow: 0 0 0 4px rgb(47 107 255 / 0.12); }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jenjang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
.lebar { grid-column: 1 / -1; }
.galat { color: var(--bahaya); font-size: 13px; margin: 4px 0 0; }

.pesan { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.pesan-galat { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.peringatan { background: #fff6e8; color: #8a5a00; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.baris-kirim { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.baris-kirim p, .baris-kirim form { margin: 0; }
.baris-kirim .btn { flex: none; white-space: nowrap; }
.kotak-rahasia { background: #0c2342; color: white; border-radius: 12px; padding: 14px; word-break: break-all; font-family: Consolas, monospace; }

.masuk-petugas { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.masuk-kiri {
    display: flex; align-items: center; justify-content: center; padding: 32px 20px;
    background:
        radial-gradient(circle at 0% 8%, rgb(191 219 254 / 0.85), transparent 24%),
        radial-gradient(circle at 100% 100%, rgb(191 219 254 / 0.7), transparent 28%),
        #f4f7fc;
}
.masuk-kartu { width: min(440px, 100%); background: white; border-radius: 24px; padding: 32px 28px; box-shadow: 0 24px 50px -32px rgb(15 23 42 / 0.45); }
.masuk-kartu h1 { font-size: 30px; margin-bottom: 8px; }
.masuk-kartu .btn { width: 100%; margin-top: 8px; border-radius: 14px; padding: 12px 16px; }
.masuk-kanan {
    display: flex; flex-direction: column; justify-content: center; padding: 48px;
    color: #e8eefc;
    background:
        radial-gradient(circle at 14% 10%, rgb(96 165 250 / 0.28), transparent 24%),
        linear-gradient(180deg, #1a56c4 0%, #0e449c 36%, #073c8c 100%);
}
.masuk-kanan h2 { color: #fff; font-size: 40px; line-height: 1.05; margin: 12px 0; }
.masuk-kanan p { color: #e8eefc; }
.masuk-atas { display: none; align-items: center; gap: 12px; margin-bottom: 24px; }

.izin { display: grid; gap: 12px; }
.izin-grup { border: 1px solid var(--garis); border-radius: 12px; padding: 12px; }
.izin-grup label { font-weight: 500; display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.halaman {
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--garis); flex-wrap: wrap;
}
.halaman a, .halaman .mati {
    display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
    border: 1px solid #d7e3f4; background: #f4f7fb; color: var(--navy);
    text-decoration: none; font-size: 13px; font-weight: 600;
}
.halaman a:hover { background: #e8f1ff; border-color: #b9d0ff; color: var(--biru); }
.halaman .mati { color: #94a3b8; }
.halaman-info { font-size: 13px; font-weight: 600; color: var(--redup); padding: 0 4px; }
.kwitansi {
    width: min(210mm, calc(100% - 32px)); min-height: 148.5mm; margin: 24px auto 0;
    display: flex; flex-direction: column;
    background: white; border: 1px solid #0c2342; border-top: 6px solid #0c2342;
    border-radius: 16px; padding: 7mm 8mm 6mm;
}
.kwitansi-kepala { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #e8eef6; }
.kwitansi-logo {
    width: 14mm; height: 14mm; flex: none; display: flex; align-items: center; justify-content: center;
    border: 1px solid #e8eef6; border-radius: 10px; background: #f4f7fb; color: #0c2342; overflow: hidden;
}
.kwitansi-logo svg, .kwitansi-logo img { width: 10mm; height: 10mm; object-fit: contain; }
.kwitansi-sekolah { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.kwitansi-kepala .redup { margin: 2px 0 0; font-size: 12px; }
.kwitansi-kode { margin-left: auto; text-align: right; }
.kwitansi-kode p { margin: 0; color: var(--redup); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.kwitansi-kode strong { display: block; margin-top: 2px; font-size: 13px; }
.kwitansi-rinci { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 10px; }
.kwitansi-rinci .penuh { grid-column: 1 / -1; }
.kwitansi-rinci span { display: block; color: var(--redup); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.kwitansi-rinci strong { display: block; margin-top: 2px; font-size: 13px; }
.kwitansi-jumlah {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: 12px; padding: 8px 12px; border-radius: 12px;
    background: #0c2342; color: white;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.kwitansi-jumlah span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.kwitansi-jumlah strong { font-size: 18px; }
.kwitansi-sisa { margin: 8px 0 0; text-align: right; font-size: 12px; font-weight: 700; color: #0c2342; }
.kwitansi-tabel { margin-top: 10px; }
.kwitansi .tabel th, .kwitansi .tabel td { padding: 4px 8px; font-size: 12px; }
.kwitansi-kaki { margin: auto 0 0; padding-top: 6px; border-top: 1px solid #e8eef6; text-align: center; color: var(--redup); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.aksi-kwitansi { width: min(210mm, calc(100% - 32px)); margin: 12px auto 24px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.aksi-kwitansi .redup { width: 100%; margin: 0; }
.logo-pratinjau {
    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--garis); border-radius: 12px; background: #f4f7fb; color: var(--navy); overflow: hidden;
}
.logo-pratinjau svg, .logo-pratinjau img { width: 40px; height: 40px; object-fit: contain; }
.tanda-tangan { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 16px; text-align: center; }
.tanda-tangan p { margin: 0; }
.tanda-tangan .ruang { height: 72px; }
.halaman-kwitansi .tanda-tangan .ruang { height: 36px; }
.tanda-tangan .nama { display: inline-block; min-width: 140px; margin-top: 4px; padding-top: 6px; border-top: 1px solid #0c2342; font-weight: 700; }
.tanda-satu { grid-template-columns: 1fr; }
.tanda-satu > div { width: min(200px, 100%); margin-left: auto; }
[hidden] { display: none !important; }
.form-pengeluaran { margin-bottom: 16px; }
.form-pengeluaran p { margin: 0; }
.baris-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.baris-label label { margin: 0; }
.centang { display: flex; gap: 8px; align-items: center; font-weight: 500; margin: 0; }
.pilihan-cara { border: 0; margin: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.pilihan-cara legend { font-size: 14px; font-weight: 600; padding: 0; margin-right: 4px; }
.kolom-centang { width: 64px; text-align: center; }
.sasaran-centang { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; cursor: pointer; }
.kotak-bayar { width: 28px; height: 28px; margin: 0; accent-color: var(--biru); cursor: pointer; }
.baris-bayar { cursor: pointer; }
.palang-bayar {
    position: sticky; bottom: 12px; z-index: 8;
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    margin-top: 8px; padding: 12px 16px;
    background: #fff; border: 1px solid var(--garis); border-radius: 18px;
    box-shadow: 0 16px 36px -20px rgb(15 23 42 / 0.55);
}
.palang-bayar .input { width: auto; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.popup-bayar {
    width: min(440px, calc(100vw - 32px));
    border: 0; border-radius: 18px; padding: 24px;
    box-shadow: 0 24px 50px -24px rgb(15 23 42 / 0.55);
}
.popup-bayar h2 { font-size: 22px; }
.popup-bayar p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.popup-bayar::backdrop { background: rgb(12 35 66 / 0.55); }
.peringatan p { margin: 0; }
.peringatan p + p { margin-top: 8px; }
.alur-peta { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; align-items: center; }
.alur-tengah { background: #e8f0ff; border: 2px solid #2f6bff; }
.kode { font-family: Consolas, monospace; background: #f3f6fb; padding: 2px 6px; border-radius: 6px; }
.lengkap { display: inline-flex; align-items: center; gap: 8px; min-width: 108px; }
.lengkap-jalur { width: 64px; height: 8px; background: #e4eaf2; border-radius: 99px; overflow: hidden; }
.lengkap-isi { display: block; height: 100%; background: var(--bahaya); }
.lengkap-isi.sedang { background: #b7791f; }
.lengkap-isi.penuh { background: var(--aman); }
.ikon-pratinjau { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--garis); border-radius: 10px; background: white; }
.sambutan {
    position: relative; overflow: hidden; min-height: 168px;
    border: 1px solid #dbe7ff; border-radius: 24px; padding: 28px 32px;
    background: linear-gradient(90deg, #e7f1ff, #f5f9ff 55%, #fff);
}
.sambutan h1 { font-size: 30px; margin: 4px 0 8px; }
.sambutan-isi { position: relative; z-index: 1; max-width: 560px; }
.sambutan .gambar { position: absolute; right: 8px; bottom: 0; width: 320px; height: 160px; pointer-events: none; }
.sapaan { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--redup); font-size: 14px; font-weight: 500; }
.sapaan svg { width: 18px; height: 18px; color: #f5b942; }
.kartu-angka {
    display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--garis); border-radius: 18px; padding: 16px;
    box-shadow: 0 12px 30px -24px rgb(15 23 42 / 0.45);
}
.bulat-ikon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.bulat-ikon svg { width: 20px; height: 20px; }
.bulat-ikon.biru { background: #3b82f6; }
.bulat-ikon.hijau { background: #22c55e; }
.bulat-ikon.jingga { background: #f59e0b; }
.bulat-ikon.ungu { background: #8b5cf6; }
.label-angka { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.label-angka.biru { color: #2563eb; }
.label-angka.hijau { color: #16a34a; }
.label-angka.jingga { color: #d97706; }
.label-angka.ungu { color: #7c3aed; }
.nilai-angka { display: block; margin-top: 2px; font-size: 22px; font-weight: 700; color: #0f172a; }
.catatan-angka { display: block; font-size: 12px; color: var(--redup); }
.petak-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.petak-item {
    display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--garis); border-radius: 16px; padding: 16px;
    box-shadow: 0 12px 30px -24px rgb(15 23 42 / 0.45);
}
.petak-item:hover { border-color: #c7d7fe; }
.petak-ikon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex: none; }
.petak-ikon svg { width: 20px; height: 20px; }
.petak-ikon.biru { background: #e8f1ff; color: #2563eb; }
.petak-ikon.hijau { background: #e8f8ee; color: #16a34a; }
.petak-ikon.ungu { background: #f3e8ff; color: #7c3aed; }
.petak-ikon.jingga { background: #fff4e5; color: #ea580c; }
.petak-item strong { display: block; }
.petak-item small { display: block; margin-top: 2px; color: var(--redup); font-size: 12px; line-height: 1.4; }
.petak-item .panah { margin-left: auto; color: #cbd5e1; font-size: 20px; }

.hanya-cetak { display: none; }
@media print {
    .no-cetak, .samping, .palang, .kaki, .tombol-menu, .popup-bayar { display: none !important; }
    .hanya-cetak { display: block; }
    .kerangka { display: block; }
    body { background: white; }
    body.halaman-kwitansi { margin: 0; background: white; }
    body.halaman-kwitansi .kwitansi {
        width: 210mm; height: 148.5mm; min-height: 0; max-width: none; margin: 0;
        border-radius: 0; box-shadow: none;
        padding: 6mm 8mm 5mm; overflow: hidden;
    }
    body.halaman-kwitansi .kwitansi-sekolah { font-size: 14px; }
    body.halaman-kwitansi .kwitansi-rinci { gap: 4px 12px; margin-top: 6px; }
    body.halaman-kwitansi .kwitansi-rinci strong { font-size: 12px; }
    body.halaman-kwitansi .kwitansi-jumlah { margin-top: 6px; padding: 6px 10px; }
    body.halaman-kwitansi .kwitansi-jumlah strong { font-size: 16px; }
    body.halaman-kwitansi .tabel th,
    body.halaman-kwitansi .tabel td { padding: 2px 6px; font-size: 11px; }
    body.halaman-kwitansi .tanda-tangan { gap: 12px; margin-top: 6px; }
    body.halaman-kwitansi .tanda-tangan .ruang { height: 28px; }
}
@media (max-width: 900px) {
    .kerangka { display: block; }
    .samping {
        position: fixed; z-index: 50; top: 0; bottom: 0; left: 0;
        width: min(18rem, 88vw); transform: translateX(-105%); transition: transform 0.2s ease;
    }
    body.menu-buka .samping { transform: none; }
    body.menu-buka .lapis { display: block; position: fixed; inset: 0; z-index: 40; background: rgb(15 23 42 / 0.4); }
    .tombol-menu { display: inline-flex; align-items: center; justify-content: center; }
    .pil-akun span:last-child, .pil-tahun { display: none; }
    .isi, .kaki, .palang { padding-left: 16px; padding-right: 16px; }
    .angka, .kolom, .jenjang, .alur-peta, .petak-menu, .masuk-petugas { grid-template-columns: 1fr; }
    .sambutan .gambar { display: none; }
    .masuk-kanan { display: none; }
    .masuk-atas { display: flex; }
}

.alat-tabel { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.kartu > .alat-tabel {
    background: #f3f7fd; margin: -18px -18px 14px; padding: 14px 18px;
    border-bottom: 1px solid #d7e4f5; border-radius: 17px 17px 0 0;
}
.alat-tabel > .input, .cari > .input, .cari > select.input {
    flex: 1 1 220px; width: auto; min-width: 180px; background: #fff;
}
.alat-kanan { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.alat-kanan label { margin: 0; font-size: 13px; font-weight: 600; color: var(--redup); }
.alat-kanan select.input { width: auto; min-width: 76px; padding: 8px 12px; border-radius: 999px; background: #fff; }
.alat-kanan .halaman { margin: 0; padding: 0; border: 0; }
.kartu-jarak { margin-bottom: 16px; }
.nama-baris { display: block; font-weight: 700; }
.nis { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.uang { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uang .redup { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; white-space: normal; }
.uang-lunas { color: var(--aman); }
.kolom-aksi { text-align: right; width: 1%; white-space: nowrap; }
.btn-kecil { padding: 7px 14px; font-size: 13px; }
.lencana {
    display: inline-flex; align-items: center; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
    background: #e7f0fc; color: #0c2342; font-size: 12px; font-weight: 600; line-height: 1.5;
}
.tabel td .lencana { margin-top: 0; }
.nama-baris + .lencana { margin-top: 4px; }
.lencana.lunas, .lencana.sah { background: #ecfdf3; color: #067647; }
.lencana.sebagian, .lencana.campur { background: #fff6e8; color: #8a5a00; }
.lencana.belum { background: #fef3f2; color: #b42318; }
.lencana.batal { background: #f1f5f9; color: #64748b; }
.tabel td.kosong { color: var(--redup); text-align: center; padding: 28px 16px; }
.halaman-bayar .tabel { border-collapse: separate; border-spacing: 0; }
.halaman-bayar .tabel th, .halaman-bayar .tabel td {
    background: #fff; border-bottom: 1px solid #e8eef6;
}
.halaman-bayar .tabel th {
    background: #e7f0fc; color: #0c2342; border-bottom: 1px solid #c5d7f2;
}
.halaman-bayar .tabel tr:first-child th:first-child { border-radius: 12px 0 0 0; }
.halaman-bayar .tabel tr:first-child th:last-child { border-radius: 0 12px 0 0; }
.halaman-bayar .tabel tr:hover td { background: #f7faff; }
.halaman-bayar .baris-bayar:has(input:checked) td { background: #eef4ff; }
.meta-murid { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.meta-murid > span {
    display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
    background: #fff; border: 1px solid var(--garis); color: var(--navy); font-size: 13px; font-weight: 600;
}
.judul-angkatan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.judul-angkatan .lencana { margin-top: 0; }
.input-jumlah { width: 9.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.input-tanggal { width: 11.5rem; }
.kosong-kalimat { margin: 0; color: var(--redup); }
.kolom-aksi .form-batal { justify-content: flex-end; }
.palang-bayar label { margin: 0; }
.palang-bayar .btn { margin-left: auto; white-space: nowrap; }
.ringkas-bayar { font-variant-numeric: tabular-nums; white-space: nowrap; }
.form-batal { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 220px; margin-top: 8px; margin-left: auto; }
.form-batal .input { width: 100%; }
.form-tambah { margin: 0; }
.form-tambah + .redup, .kartu > .redup { margin: 10px 0 0; }

button,
.btn,
summary,
[role="button"] {
    cursor: pointer;
}

button:disabled,
.btn:disabled {
    cursor: not-allowed;
}