/* Buku DSI: tampilan */
:root{
  /* putih, hijau, biru */
  --kertas:#F5F8FA; --lembar:#FFFFFF; --tinta:#10283F; --redup:#5C6F82;
  --garis:#DCE6EE; --marjin:#8FD0B8;
  --hijau:#0B7A57; --hijau-tua:#096348; --hijau-lembut:#E4F4EE;
  --biru:#1B5FAE; --biru-tua:#0F3D73; --biru-lembut:#EAF2FC;
  --merah:#B4423A; --merah-lembut:#FBEDEB;
  --bayang:0 1px 2px rgba(16,40,63,.04),0 10px 28px -16px rgba(16,40,63,.18);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--kertas);color:var(--tinta);font:400 1rem/1.5 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;line-height:1.15;margin:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--biru);outline-offset:2px}

.atas{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--lembar);border-bottom:1px solid var(--garis)}
.atas::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--hijau),var(--biru))}
.merek{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.8rem 1rem .3rem;max-width:68rem;margin:0 auto}
.merek h1{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;color:var(--biru-tua)}
#sync{font-size:.8rem;color:var(--redup)}
#tabs{display:flex;gap:.25rem;overflow-x:auto;padding:.3rem .75rem .6rem;max-width:68rem;margin:0 auto;scrollbar-width:none}
#tabs::-webkit-scrollbar{display:none}
#tabs button{border:0;background:none;padding:.45rem .8rem;border-radius:999px;white-space:nowrap;color:var(--redup);font-weight:500}
#tabs button:hover{color:var(--biru-tua)}
#tabs button[aria-current="page"]{background:var(--biru-tua);color:#fff}

main{max-width:68rem;margin:0 auto;padding:1rem 1rem 5rem}
.judul{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin:0 0 .9rem}
.judul h2{font-size:1.6rem;font-weight:700;letter-spacing:-.015em;color:var(--biru-tua)}
.alat{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.9rem}
.alat input[type=search]{flex:1 1 9rem;min-width:0}
input:focus,select:focus{border-color:var(--hijau);outline:2px solid var(--hijau-lembut);outline-offset:0}
input,select{background:var(--lembar);border:1px solid var(--garis);border-radius:.5rem;padding:.55rem .7rem;min-height:2.6rem}
.btn{border:1px solid var(--garis);background:var(--lembar);border-radius:.5rem;padding:.55rem .9rem;min-height:2.6rem;font-weight:500}
.btn.utama{background:var(--hijau);border-color:var(--hijau);color:#fff}
.btn.utama:hover{background:var(--hijau-tua);border-color:var(--hijau-tua)}
.btn:not(.utama):not(.polos):hover{border-color:var(--biru)}
.btn.polos{background:none;border-color:transparent;color:var(--biru)}
.btn.bahaya{color:var(--merah)}
.btn[aria-pressed="true"]{background:var(--biru-lembut);border-color:var(--biru);color:var(--biru)}
.kembali{border:0;background:none;color:var(--biru);padding:.3rem 0;font-weight:500}

/* lembar folio: garis biru mendatar, garis marjin merah ganda di depan kolom angka */
.lembar{background:var(--lembar);border:1px solid var(--garis);border-radius:.8rem;box-shadow:var(--bayang);overflow:hidden;margin-bottom:1.1rem}
.lembar>h3{font-size:1rem;font-weight:700;padding:.7rem .9rem;border-bottom:2px solid var(--garis);display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.lembar>h3 span{font-family:"Instrument Sans",system-ui,sans-serif;font-weight:500;color:var(--redup);font-size:.9rem}
.baris{display:grid;grid-template-columns:minmax(0,1fr) 8.75rem;width:100%;border:0;border-bottom:1px solid var(--garis);background:none;text-align:left;padding:0;min-height:2.9rem;align-items:stretch}
.baris:last-child{border-bottom:0}
button.baris:hover{background:var(--hijau-lembut)}
.baris .nm{padding:.55rem .9rem;min-width:0;overflow-wrap:anywhere;align-self:center}
.baris .nm small{display:block;color:var(--redup);font-size:.82rem}
.baris .jm{padding:.55rem .9rem;border-left:3px double var(--marjin);min-width:0;text-align:right;font-weight:500;display:flex;flex-direction:column;justify-content:center}
.baris .jm small{color:var(--redup);font-weight:400;font-size:.8rem}
.baris.total{font-weight:600;background:var(--biru-lembut)}
.min{color:var(--merah)} .plus{color:var(--hijau)}
.cap{display:inline-block;padding:.05rem .5rem;border-radius:.3rem;font-size:.85rem;font-weight:600}
.cap.belum{background:var(--biru-lembut);color:var(--biru-tua)}
.cap.lunas{background:var(--hijau-lembut);color:var(--hijau)}
.redup{color:var(--redup)}
.tambah{display:block;width:100%;border:0;background:none;color:var(--biru);font-weight:500;padding:.7rem .9rem;text-align:left}

.angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:0;border:1px solid var(--garis);border-radius:.8rem;background:var(--lembar);margin-bottom:1.1rem;overflow:hidden;box-shadow:var(--bayang)}
.angka div{padding:.7rem .9rem;border-right:1px solid var(--garis);border-bottom:1px solid var(--garis);margin:0 -1px -1px 0}
.angka dt,.angka .l{font-size:.85rem;color:var(--redup)}
.angka .n{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:1.25rem;font-weight:700;letter-spacing:-.01em}

.gulir{overflow-x:auto}
table.folio{border-collapse:collapse;width:100%;font-size:.92rem}
.folio th,.folio td{border-bottom:1px solid var(--garis);padding:.45rem .6rem;text-align:right;white-space:nowrap}
.folio thead th{font-weight:600;color:var(--redup);border-bottom:2px solid var(--garis)}
.folio th:first-child{position:sticky;left:0;background:var(--lembar);text-align:left;border-right:3px double var(--marjin);font-weight:500;max-width:11rem;overflow:hidden;text-overflow:ellipsis}
.folio td[data-a]{cursor:pointer}
.folio td[data-a]:hover{background:var(--hijau-lembut)}
.folio tr.grup th{background:var(--biru-lembut);font-weight:700}
.folio tr.grup td{background:var(--biru-lembut)}
.folio tfoot th,.folio tfoot td{font-weight:600}
.folio .nol{color:var(--garis)}
.folio .kini{background:var(--biru-lembut)}

.strip{display:grid;grid-template-columns:repeat(12,1fr);gap:.2rem;margin:.6rem 0 1rem}
.strip span{text-align:center;font-size:.7rem;padding:.25rem 0;border-radius:.25rem;background:#EEF2F6;color:var(--redup)}
.strip span.y{background:var(--hijau-lembut);color:var(--hijau)}
.strip span.k{outline:2px solid var(--biru)}
.batang{height:.5rem;border-radius:.25rem;background:var(--biru-lembut);overflow:hidden;margin-top:.3rem}
.batang i{display:block;height:100%;background:linear-gradient(90deg,var(--hijau),var(--biru))}
.kosong{padding:2rem 1rem;text-align:center;color:var(--redup)}
.kosong .btn{margin-top:.8rem}
.catatan{font-size:.88rem;color:var(--redup);margin:-.4rem 0 1rem}
svg text{font:500 10px "Instrument Sans",system-ui,sans-serif;fill:var(--redup)}

dialog{border:1px solid var(--garis);border-radius:.9rem;box-shadow:0 24px 60px -20px rgba(15,61,115,.35);background:var(--lembar);color:var(--tinta);padding:0;width:min(30rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 2rem)}
dialog::backdrop{background:rgba(15,61,115,.35);backdrop-filter:blur(2px)}
dialog form{padding:1.1rem;display:block}
dialog h2{font-size:1.25rem;margin-bottom:.3rem}
dialog .ket{color:var(--redup);margin:0 0 .6rem}
dialog label{display:block;font-weight:500;font-size:.9rem;margin:.7rem 0 .25rem}
dialog input:not([type=checkbox]),dialog select{width:100%}
dialog label.cek{display:flex;gap:.5rem;align-items:center;font-weight:400}
dialog label.cek input{min-height:0;width:1.1rem;height:1.1rem}
dialog .aksi{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
#toast{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--biru-tua);color:#fff;padding:.6rem 1rem;border-radius:.5rem;opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100vw - 2rem);z-index:20}
#toast.muncul{opacity:1}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}
@media (min-width:48rem){.dua{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:start}}

/* ---------- tambahan versi mandiri ---------- */
.pengguna{display:flex;align-items:baseline;gap:.8rem;font-size:.85rem;white-space:nowrap}
.pengguna a{color:var(--biru);text-decoration:none;max-width:9rem;overflow:hidden;text-overflow:ellipsis}
.pengguna form{margin:0}
.tautan{border:0;background:none;padding:0;color:var(--redup);text-decoration:underline}
.halaman-masuk{display:grid;place-items:start center;min-height:100%;padding:12vh 1rem 2rem;background:linear-gradient(160deg,#EAF6F1 0%,#FFFFFF 46%,#EAF2FC 100%) fixed}
.masuk{width:min(24rem,100%)}
.masuk h1{font-size:2rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.3rem;color:var(--biru-tua)}
.masuk .formulir{border-top:3px solid var(--hijau)}
.masuk a{color:var(--biru)}
.formulir{padding:1.1rem;display:block}
.formulir label{display:block;font-weight:500;font-size:.9rem;margin:.7rem 0 .25rem}
.formulir label:first-of-type{margin-top:0}
.formulir input{width:100%}
.formulir .btn{margin-top:1.1rem;width:100%}
.peringatan,.kabar{padding:.6rem .8rem;border-radius:.5rem;margin:0 0 1rem}
.peringatan{background:var(--merah-lembut);color:var(--merah)}
.kabar{background:var(--hijau-lembut);color:var(--hijau)}
html,body{height:100%}


/* ---------- halaman sinkron ---------- */
.sinkron{max-width:46rem}
.sinkron .isi{padding:.9rem}
.sinkron .isi p{margin:0 0 .8rem}
.sinkron .isi label{display:block;font-weight:500;font-size:.9rem;margin:.2rem 0 .3rem}
.sinkron .isi input:not([type=radio]){width:100%;margin-bottom:.7rem}
.sinkron .isi form{margin:0 0 .4rem}
.sinkron .isi hr{border:0;border-top:1px solid var(--garis);margin:1rem 0}
.sinkron .aksi{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 .6rem}
.sinkron label.cek{display:flex;gap:.5rem;align-items:center;font-weight:400}
.sinkron label.cek input{min-height:0;width:1.1rem;height:1.1rem;margin:0}
.sinkron details{border-top:1px solid var(--garis);padding:.55rem 0}
.sinkron details ul{margin:.5rem 0 0;padding-left:1.2rem;font-size:.9rem}
.sinkron summary{cursor:pointer}
.sinkron .terap{margin-top:1rem}
.sinkron code{background:var(--biru-lembut);padding:.05rem .3rem;border-radius:.25rem;font-size:.9em}
.sinkron .lembar .angka{box-shadow:none;margin-bottom:.8rem}
.sinkron .lembar .angka dd{margin:0}
.sinkron .baris{grid-template-columns:1fr}