/* ============ token : terang ============ */
:root{
  --ground:#eef3f6; --surface:#ffffff; --surface-2:#f5f9fb; --surface-3:#e9f0f4;
  --rule:#e2eaef; --rule-kuat:#c2d2dc;
  --ink:#0f2430; --ink-2:#5a7383; --ink-3:#93a8b5;
  --accent:#0ea5e9; --accent-teks:#0369a1; --accent-lembut:#e0f3fd; --di-atas-accent:#ffffff;
  --hijau:#10a06a; --hijau-lembut:#dcf5ea;
  --merah:#e0524c; --merah-lembut:#fdeae9;
  --kuning:#c07c07; --kuning-lembut:#fdf0d8;
  --nila:#6366f1; --nila-lembut:#e8e9fd;
  --di-atas-warna:#ffffff;
  --b1:0 1px 2px rgba(15,36,48,.05);
  --b2:0 2px 4px rgba(15,36,48,.05), 0 10px 26px -14px rgba(15,36,48,.28);
  --b3:0 -6px 30px -8px rgba(15,36,48,.22);
  --r-kartu:18px; --r-kecil:12px;
}
/* ============ token : gelap (ikut sistem) ============ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#080f15; --surface:#111b24; --surface-2:#17242f; --surface-3:#1d2d3a;
    --rule:#213240; --rule-kuat:#3a5265;
    --ink:#e6eef4; --ink-2:#90a8b9; --ink-3:#6b8496;
    --accent:#38bdf8; --accent-teks:#7dd3fc; --accent-lembut:#0d2f42; --di-atas-accent:#04202c;
    --hijau:#3ed398; --hijau-lembut:#0c2e23;
    --merah:#f4837c; --merah-lembut:#331a1b;
    --kuning:#e9b656; --kuning-lembut:#302510;
    --nila:#8b8df6; --nila-lembut:#1e2046;
    --di-atas-warna:#08131b;
    --b1:0 1px 2px rgba(0,0,0,.4);
    --b2:0 2px 4px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.8);
    --b3:0 -6px 30px -8px rgba(0,0,0,.7);
  }
}
/* ============ token : gelap (dipilih) ============ */
:root[data-theme="dark"]{
  --ground:#080f15; --surface:#111b24; --surface-2:#17242f; --surface-3:#1d2d3a;
  --rule:#213240; --rule-kuat:#3a5265;
  --ink:#e6eef4; --ink-2:#90a8b9; --ink-3:#6b8496;
  --accent:#38bdf8; --accent-teks:#7dd3fc; --accent-lembut:#0d2f42; --di-atas-accent:#04202c;
  --hijau:#3ed398; --hijau-lembut:#0c2e23;
  --merah:#f4837c; --merah-lembut:#331a1b;
  --kuning:#e9b656; --kuning-lembut:#302510;
  --nila:#8b8df6; --nila-lembut:#1e2046;
  --di-atas-warna:#08131b;
  --b1:0 1px 2px rgba(0,0,0,.4);
  --b2:0 2px 4px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.8);
  --b3:0 -6px 30px -8px rgba(0,0,0,.7);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.5;font-weight:500;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.fig{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.02em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ============ kerangka (ponsel dulu) ============ */
.app{min-height:100vh;display:flex;flex-direction:column}
.rail{display:none}
.appbar{
  position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--rule);
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;gap:12px;
}
.appbar h1{font-size:19px}
.appbar .ket{font-size:12px;color:var(--ink-3);font-weight:500;margin-top:1px}
.appbar .aksi{margin-left:auto;display:flex;gap:6px;align-items:center}
.ib{width:38px;height:38px;border-radius:11px;border:0;background:var(--surface-2);color:var(--ink-2);
  display:grid;place-items:center;transition:background .15s,color .15s}
.ib:hover{background:var(--surface-3);color:var(--ink)}
.ib svg{width:19px;height:19px}
.isi{flex:1;padding:16px 16px calc(104px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;background:var(--surface);
  border-top:1px solid var(--rule);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:var(--b3);
}
.tabbar button{flex:1;border:0;background:none;padding:6px 2px 4px;display:flex;flex-direction:column;
  align-items:center;gap:4px;color:var(--ink-3);font-size:10.5px;font-weight:600;border-radius:12px;min-height:52px}
.tabbar svg{width:22px;height:22px}
.tabbar button[aria-current="true"]{color:var(--accent-teks)}
.tabbar .tempat{position:relative;display:grid;place-items:center;width:42px;height:26px;border-radius:9px;transition:background .18s}
.tabbar button[aria-current="true"] .tempat{background:var(--accent-lembut)}
.tabbar .titik{position:absolute;top:-1px;right:4px;width:8px;height:8px;border-radius:50%;
  background:var(--kuning);border:2px solid var(--surface)}

.fab{
  position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:41;
  height:52px;padding:0 20px;border:0;border-radius:26px;background:var(--accent);color:var(--di-atas-accent);
  font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--b2);
  transition:transform .15s;
}
.fab:active{transform:scale(.96)}
.fab svg{width:20px;height:20px;stroke-width:2.4}

/* ============ kartu ============ */
.kartu{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-kartu);box-shadow:var(--b1);overflow:hidden}
.kartu-kepala{display:flex;align-items:center;gap:10px;padding:14px 16px 0}
.kartu-kepala h2{font-size:15px}
.kartu-kepala .ket{font-size:12px;color:var(--ink-3);font-weight:500}
.kartu-kepala .kanan{margin-left:auto;display:flex;gap:6px;align-items:center}
.kartu-kepala+.rows{margin-top:10px}

/* ============ kartu status selisih ============ */
.status{border-radius:var(--r-kartu);padding:18px;border:1px solid transparent;box-shadow:var(--b1)}
.status.klop{background:var(--hijau-lembut);border-color:color-mix(in srgb,var(--hijau) 22%,transparent)}
.status.geser{background:var(--kuning-lembut);border-color:color-mix(in srgb,var(--kuning) 24%,transparent)}
.status.netral{background:var(--surface);border-color:var(--rule)}
.status .atas{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.status .lbl{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--ink-2)}
.status .lencana{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:5px 11px;border-radius:20px;color:var(--di-atas-warna)}
.status.klop .lencana{background:var(--hijau)}
.status.geser .lencana{background:var(--kuning)}
.status.netral .lencana{background:var(--surface-3);color:var(--ink-2)}
.status .lencana svg{width:14px;height:14px;stroke-width:2.6}
.status .besar{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.status.klop .besar{color:var(--hijau)}
.status.geser .besar{color:var(--kuning)}
.status.netral .besar{color:var(--ink-3)}
.status .kaki{margin-top:9px;font-size:12.5px;color:var(--ink-2);font-weight:500;line-height:1.5}

/* ============ dua sisi ============ */
.sisi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sisi .kotak{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-kartu);padding:14px;box-shadow:var(--b1)}
.sisi .cap{font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--ink-3);
  display:flex;align-items:center;gap:6px;margin-bottom:8px}
.sisi .cap svg{width:14px;height:14px}
.sisi .nilai{font-size:19px;font-weight:800;letter-spacing:-.03em}
.sisi .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px;font-weight:500}

/* ============ baris daftar ============ */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:11px 16px;border:0;background:none;width:100%;
  text-align:left;border-top:1px solid var(--rule);min-height:58px}
.rows>.row:first-child{border-top:0}
button.row{transition:background .12s}
button.row:active{background:var(--surface-2)}
.chip{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;letter-spacing:-.02em}
.chip svg{width:19px;height:19px}
.chip.c-rek{background:var(--accent-lembut);color:var(--accent-teks)}
.chip.c-lok{background:var(--hijau-lembut);color:var(--hijau)}
.chip.c-hut{background:var(--merah-lembut);color:var(--merah)}
.chip.c-lnk{background:var(--nila-lembut);color:var(--nila)}
.row .teks{min-width:0;flex:1}
.row .nm{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.row .sub{font-size:12px;color:var(--ink-3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin-top:1px}
.row .kanan{margin-left:auto;text-align:right;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.row .angka{font-size:14.5px;font-weight:700}
.row .tgl{font-size:11px;color:var(--ink-3);font-weight:500}
.neg{color:var(--merah)} .pos{color:var(--hijau)}
.kosong{padding:32px 20px;text-align:center;color:var(--ink-3);font-size:13.5px;font-weight:500}
.kosong strong{display:block;color:var(--ink-2);font-weight:700;font-size:14.5px;margin-bottom:4px}
.kosong svg{width:34px;height:34px;stroke:var(--ink-3);opacity:.5;margin-bottom:10px;stroke-width:1.5}

/* ============ label & pil ============ */
.pil{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;font-weight:800;padding:3px 8px;
  border-radius:7px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.pil.rek{background:var(--accent-lembut);color:var(--accent-teks)}
.pil.lok{background:var(--hijau-lembut);color:var(--hijau)}
.pil.hut{background:var(--merah-lembut);color:var(--merah)}
.pil.ok{background:var(--hijau-lembut);color:var(--hijau)}
.pil.awas{background:var(--kuning-lembut);color:var(--kuning)}

/* ============ segmen & tombol ============ */
.seg{display:flex;background:var(--surface-3);border-radius:13px;padding:4px;gap:3px}
.seg button{flex:1;border:0;background:none;padding:9px 10px;border-radius:10px;font-size:13.5px;
  font-weight:600;color:var(--ink-2);transition:background .15s,color .15s;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--b1)}
.tbl{border:1px solid var(--rule);background:var(--surface);border-radius:11px;padding:8px 14px;font-size:13.5px;
  font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;min-height:40px;transition:border-color .15s,color .15s}
.tbl:hover{border-color:var(--rule-kuat);color:var(--ink)}
.tbl svg{width:16px;height:16px}
.tbl.utama{background:var(--accent);border-color:var(--accent);color:var(--di-atas-accent);font-weight:700}
.tbl:disabled{opacity:.4}
.tbl.blok{width:100%;justify-content:center;min-height:50px;font-size:15px;border-radius:14px}

/* ============ strip tanggal ============ */
.strip{display:flex;gap:7px;overflow-x:auto;padding:2px 16px;margin:0 -16px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip button{flex:0 0 auto;border:1px solid var(--rule);background:var(--surface);border-radius:13px;
  padding:8px 11px;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:52px;transition:all .15s}
.strip .h{font-size:10.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.strip .t{font-size:17px;font-weight:800;letter-spacing:-.03em}
.strip .n{font-size:9.5px;font-weight:700;color:var(--ink-3)}
.strip button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--di-atas-accent)}
.strip button[aria-pressed="true"] .h,.strip button[aria-pressed="true"] .n{color:var(--di-atas-accent);opacity:.85}

/* ============ pencarian ============ */
.cari{position:relative;display:flex;align-items:center}
.cari svg{position:absolute;left:13px;width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.cari input{width:100%;padding:12px 14px 12px 40px;border-radius:14px;border:1px solid var(--rule);
  background:var(--surface);font-size:14.5px;font-weight:500}
.cari input::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lembut)}

/* ============ buku besar : satu markup, dua bentuk ============ */
.bb{display:flex;flex-direction:column}
.bb-baris{display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:center;
  padding:11px 16px;border-top:1px solid var(--rule)}
.bb .bb-baris:first-child{border-top:0}
.bb-tgl{grid-row:1/3;font-size:11px;font-weight:700;color:var(--ink-2);background:var(--surface-3);
  border-radius:9px;padding:6px 8px;text-align:center;min-width:44px;line-height:1.25}
.bb-tgl b{display:block;font-size:14px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.bb-nm{font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-sub{grid-column:2;font-size:11.5px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bb-nom{grid-row:1/3;font-size:14.5px;font-weight:700;text-align:right;white-space:nowrap}

/* ============ cek silang ============ */
.sil{padding:14px 16px;border-top:1px solid var(--rule);display:flex;gap:12px;align-items:flex-start}
.sil:first-child{border-top:0}
.sil .teks{flex:1;min-width:0}
.sil .judul{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.sil .judul .nm{font-size:14.5px;font-weight:700}
.sil .alamat{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sil .banding{font-size:12px;color:var(--ink-2);margin-top:5px;font-weight:500}
.sil .banding b{font-weight:700;font-variant-numeric:tabular-nums}

/* ============ nota ============ */
.nota{display:flex;gap:11px;padding:13px 15px;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--rule);font-size:12.5px;color:var(--ink-2);line-height:1.55;font-weight:500}
.nota svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px;color:var(--ink-3)}
.nota b{color:var(--ink);font-weight:700}
.nota.awas{background:var(--kuning-lembut);border-color:transparent}
.nota.awas svg{color:var(--kuning)} .nota.awas b{color:var(--kuning)}

/* ============ lembar bawah ============ */
.tirai{position:fixed;inset:0;z-index:60;background:rgba(8,15,21,.5);opacity:0;pointer-events:none;
  transition:opacity .22s;backdrop-filter:blur(2px)}
.tirai.buka{opacity:1;pointer-events:auto}
.lembar{
  position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--surface);
  border-radius:24px 24px 0 0;box-shadow:var(--b3);transform:translateY(101%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);max-height:92vh;overflow-y:auto;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.lembar.buka{transform:translateY(0)}
.lembar-gagang{width:38px;height:4px;border-radius:2px;background:var(--rule-kuat);margin:9px auto 0}
.lembar-kepala{display:flex;align-items:center;gap:10px;padding:12px 18px 4px}
.lembar-kepala h2{font-size:17px}
.lembar-isi{padding:12px 18px 18px;display:flex;flex-direction:column;gap:15px}
.bidang{display:flex;flex-direction:column;gap:7px}
.bidang .lbl{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;color:var(--ink-3)}
.bidang select,.bidang input[type=text]{
  width:100%;padding:13px 14px;border-radius:13px;border:1px solid var(--rule);background:var(--surface-2);
  font-size:15px;font-weight:600;min-height:50px;
}
.arah{display:flex;gap:9px}
.arah button{flex:1;border:1.5px solid var(--rule);background:var(--surface);border-radius:13px;padding:12px;
  font-size:14px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;justify-content:center;gap:7px;min-height:50px}
.arah svg{width:17px;height:17px;stroke-width:2.4}
.arah button[aria-pressed="true"].plus{border-color:var(--hijau);background:var(--hijau-lembut);color:var(--hijau)}
.arah button[aria-pressed="true"].minus{border-color:var(--merah);background:var(--merah-lembut);color:var(--merah)}
.uang{display:flex;align-items:center;gap:10px;border:1.5px solid var(--rule);border-radius:14px;
  background:var(--surface-2);padding:0 15px;min-height:60px}
.uang:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lembut)}
.uang span{font-size:15px;font-weight:800;color:var(--ink-3)}
.uang input{flex:1;border:0;background:none;font-size:25px;font-weight:800;letter-spacing:-.03em;
  padding:0;min-width:0;font-variant-numeric:tabular-nums}
.uang input:focus{outline:none;box-shadow:none}
.uang input::placeholder{color:var(--ink-3);font-weight:700}

/* ============ sorot ============ */
.sorot{position:fixed;left:16px;right:16px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:70;
  background:var(--ink);color:var(--ground);padding:13px 16px;border-radius:14px;font-size:13.5px;font-weight:600;
  box-shadow:var(--b2);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s;
  display:flex;align-items:center;gap:9px}
.sorot.tampil{opacity:1;transform:translateY(0)}
.sorot svg{width:17px;height:17px;flex:0 0 17px;stroke-width:2.4}

/* ============ layar lebar ============ */
@media (min-width:1000px){
  .app{flex-direction:row}
  .rail{
    display:flex;flex-direction:column;width:238px;flex:0 0 238px;background:var(--surface);
    border-right:1px solid var(--rule);position:sticky;top:0;height:100vh;
  }
  .merek{display:flex;align-items:center;gap:11px;padding:22px 18px 16px}
  .merek-tanda{width:36px;height:36px;border-radius:11px;background:var(--accent);color:var(--di-atas-accent);
    display:grid;place-items:center;font-weight:800;font-size:17px;flex:0 0 auto}
  .merek-nm{font-size:18px;font-weight:800;letter-spacing:-.03em}
  .merek-sub{font-size:10.5px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-top:-2px}
  .rail-nav{display:flex;flex-direction:column;gap:2px;padding:6px 10px;flex:1}
  .rail-nav button{display:flex;align-items:center;gap:12px;padding:11px 12px;border:0;border-radius:12px;
    background:none;color:var(--ink-2);font-weight:600;font-size:14.5px;text-align:left;transition:background .13s,color .13s}
  .rail-nav button:hover{background:var(--surface-2);color:var(--ink)}
  .rail-nav button[aria-current="true"]{background:var(--accent-lembut);color:var(--accent-teks);font-weight:700}
  .rail-nav svg{width:20px;height:20px;flex:0 0 20px}
  .rail-nav .lonceng{margin-left:auto;background:var(--kuning);color:var(--di-atas-warna);font-size:10.5px;
    font-weight:800;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
  .rail-kaki{padding:12px 14px;border-top:1px solid var(--rule);display:flex;align-items:center;gap:9px}
  .tanda-demo{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
    border:1px dashed var(--rule-kuat);border-radius:6px;padding:4px 7px;margin-left:auto}
  .utama{flex:1;min-width:0;display:flex;flex-direction:column}
  .appbar{padding:20px 32px 16px}
  .appbar h1{font-size:23px}
  .isi{padding:22px 32px 60px;max-width:1120px;gap:16px}
  .tabbar{display:none}
  .fab{display:none}
  .sorot{left:auto;right:32px;bottom:28px;max-width:420px}
  .lembar{left:50%;right:auto;bottom:auto;top:50%;width:min(520px,92vw);border-radius:22px;
    transform:translate(-50%,-46%) scale(.96);opacity:0;transition:transform .2s,opacity .2s}
  .lembar.buka{transform:translate(-50%,-50%) scale(1);opacity:1}
  .lembar-gagang{display:none}
  .sisi{grid-template-columns:1fr 1fr;gap:16px}
  .status{padding:22px 24px}
  .status .besar{font-size:40px}
  .bb-baris{grid-template-columns:auto 240px 1fr auto;padding:12px 16px}
  .bb-sub{grid-column:3;grid-row:1;justify-content:flex-start}
  .bb-nm{grid-column:2;grid-row:1}
  .bb-baris .bb-tgl{grid-row:1}
  .bb-nom{grid-row:1}
  .dua{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
}
@media (max-width:999px){ .dua{display:flex;flex-direction:column;gap:14px} }

/* ================= tambahan versi server ================= */

/* ---- layar masuk ---- */
.gerbang{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;gap:18px;background:var(--ground)}
.gerbang .lambang{width:62px;height:62px;border-radius:19px;background:var(--accent);color:var(--di-atas-accent);
  display:grid;place-items:center;font-size:29px;font-weight:800;box-shadow:var(--b2)}
.gerbang h1{font-size:25px}
.gerbang p{margin:0;color:var(--ink-2);font-size:14px;text-align:center;max-width:34ch;line-height:1.55}
.gerbang form{width:100%;max-width:330px;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.gerbang input{width:100%;padding:15px;border-radius:15px;border:1.5px solid var(--rule);background:var(--surface);
  font-size:23px;font-weight:800;text-align:center;letter-spacing:.32em;font-variant-numeric:tabular-nums}
.gerbang .galat{color:var(--merah);font-size:13.5px;font-weight:600;text-align:center;min-height:20px}

/* ---- saldo akun di lembar catat ---- */
.saldo-kini{background:var(--surface-2);border:1px solid var(--rule);border-radius:14px;padding:12px 14px;
  display:flex;flex-direction:column;gap:8px}
.saldo-kini .atas{display:flex;align-items:baseline;gap:10px}
.saldo-kini .lbl2{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:800;color:var(--ink-3)}
.saldo-kini .nilai{margin-left:auto;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.saldo-kini .jadi{display:flex;align-items:baseline;gap:10px;padding-top:8px;border-top:1px dashed var(--rule)}
.saldo-kini .jadi .lbl2{color:var(--accent-teks)}
.saldo-kini .jadi .nilai{font-size:19px}
.saldo-kini .riwayat{display:flex;flex-direction:column;gap:3px;padding-top:8px;border-top:1px dashed var(--rule)}
.saldo-kini .riwayat div{display:flex;gap:9px;font-size:11.5px;color:var(--ink-3);font-weight:500}
.saldo-kini .riwayat b{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.saldo-kini.sepi{color:var(--ink-3);font-size:13px;font-weight:500}

/* ---- kalkulator ---- */
.kalk{border:1.5px solid var(--rule);border-radius:16px;background:var(--surface-2);overflow:hidden}
.kalk-layar{padding:12px 15px;display:flex;flex-direction:column;gap:3px;background:var(--surface);
  border-bottom:1px solid var(--rule);min-height:74px;justify-content:center}
.kalk-rumus{font-size:14px;color:var(--ink-2);font-weight:600;word-break:break-all;
  font-family:"IBM Plex Mono",monospace;min-height:20px}
.kalk-hasil{font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:right}
.kalk-hasil.galat{font-size:15px;color:var(--merah);font-weight:700}
.kalk-pita{max-height:96px;overflow-y:auto;padding:8px 15px;border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:4px;background:var(--surface-2)}
.kalk-pita div{display:flex;gap:10px;font-size:11.5px;font-family:"IBM Plex Mono",monospace;color:var(--ink-3)}
.kalk-pita b{margin-left:auto;color:var(--ink-2);font-weight:600}
.kalk-tombol{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.kalk-tombol button{border:0;background:var(--surface);padding:15px 4px;font-size:19px;font-weight:700;
  color:var(--ink);min-height:54px;transition:background .1s}
.kalk-tombol button:active{background:var(--surface-3)}
.kalk-tombol button.op{background:var(--surface-2);color:var(--accent-teks);font-weight:800}
.kalk-tombol button.hapus{background:var(--surface-2);color:var(--merah)}
.kalk-tombol button.sama{background:var(--accent);color:var(--di-atas-accent)}
.kalk-tombol button.pakai{grid-column:span 4;background:var(--hijau);color:var(--di-atas-warna);font-size:15px;font-weight:800}
.kalk-tombol button svg{width:19px;height:19px;stroke-width:2.4;vertical-align:-4px}

/* ---- penyunting pemetaan ---- */
.peta-baris{padding:12px 16px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.peta-baris:first-child{border-top:0}
.peta-atas{display:flex;align-items:center;gap:10px}
.peta-atas .nm{font-size:14.5px;font-weight:700;flex:1;min-width:0}
.peta-atas .nilai{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums}
.peta-kendali{display:grid;grid-template-columns:118px 1fr;gap:8px}
.peta-kendali select,.peta-kendali input{padding:9px 11px;border-radius:11px;border:1px solid var(--rule);
  background:var(--surface);font-size:13px;font-weight:600;width:100%;min-height:42px}
.peta-kendali input{font-family:"IBM Plex Mono",monospace;font-size:12px}

/* ---- bantuan kecil ---- */
.baris-aksi{display:flex;gap:9px;flex-wrap:wrap}
.baris-aksi .tbl{flex:1}
.memuat{padding:44px 20px;text-align:center;color:var(--ink-3);font-size:13.5px;font-weight:600}
.putar{width:26px;height:26px;border:2.5px solid var(--rule);border-top-color:var(--accent);border-radius:50%;
  margin:0 auto 12px;animation:putar .7s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.putar{animation:none}}
.pil.mati{background:var(--merah-lembut);color:var(--merah)}

/* ================= perapatan untuk ponsel ================= */
@media (max-width:480px){
  body{font-size:14.5px}
  .isi{padding:13px 13px calc(100px + env(safe-area-inset-bottom));gap:11px}
  .appbar{padding:calc(9px + env(safe-area-inset-top)) 14px 9px;gap:10px}
  .appbar h1{font-size:17.5px}
  .appbar .ket{font-size:11.5px}
  .ib{width:34px;height:34px;border-radius:10px}
  .ib svg{width:18px;height:18px}

  .kartu{border-radius:15px}
  .kartu-kepala{padding:12px 14px 0;gap:8px}
  .kartu-kepala h2{font-size:14px}
  .kartu-kepala .ket{font-size:11px}

  .status{padding:15px;border-radius:15px}
  .status .besar{font-size:28px}
  .status .lbl{font-size:10.5px}
  .status .lencana{font-size:11px;padding:4px 9px}
  .status .kaki{font-size:11.5px;margin-top:7px}

  .sisi{gap:8px}
  .sisi .kotak{padding:12px;border-radius:15px}
  .sisi .cap{font-size:10px;margin-bottom:6px}
  .sisi .nilai{font-size:16.5px}
  .sisi .sub{font-size:10.5px}

  .row{padding:9px 14px;min-height:52px;gap:10px}
  .chip{width:34px;height:34px;flex:0 0 34px;border-radius:11px;font-size:11.5px}
  .chip svg{width:17px;height:17px}
  .row .nm{font-size:13.5px}
  .row .sub{font-size:11px}
  .row .angka{font-size:13.5px}
  .row .tgl{font-size:10.5px}

  .strip button{min-width:47px;padding:7px 9px;border-radius:12px}
  .strip .h{font-size:9.5px}
  .strip .t{font-size:15.5px}
  .strip .n{font-size:9px}

  .bb-baris{padding:9px 14px;gap:2px 10px}
  .bb-tgl{min-width:40px;padding:5px 7px;font-size:10px}
  .bb-tgl b{font-size:13px}
  .bb-nm{font-size:13px}
  .bb-sub{font-size:10.5px}
  .bb-nom{font-size:13.5px}

  .sil{padding:12px 14px;gap:10px}
  .sil .judul .nm{font-size:13.5px}
  .sil .banding{font-size:11px}
  .sil .alamat{font-size:10px}

  .fab{height:47px;padding:0 17px;font-size:14px;bottom:calc(70px + env(safe-area-inset-bottom))}
  .tabbar button{font-size:9.5px;min-height:48px}
  .tabbar svg{width:20px;height:20px}
  .nota{padding:11px 13px;font-size:11.5px;border-radius:12px}
  .lembar-isi{padding:11px 15px 16px;gap:13px}
  .lembar-kepala h2{font-size:16px}
}

/* ================= JANGAN diubah ke bawah 16px =================
   iOS Safari memperbesar seluruh halaman sendiri begitu kolom isian
   yang disentuh punya font < 16px. Aturan ini sengaja ditaruh paling
   akhir supaya menang atas semua ukuran di atasnya. */
input, select, textarea{font-size:16px}
.cari input{font-size:16px}
.bidang select, .bidang input[type=text]{font-size:16px}
.peta-kendali select, .peta-kendali input{font-size:16px}
.gerbang input{font-size:22px}
.uang input{font-size:24px}

/* ================= buku besar: kolom sejajar, baris seragam ================= */
/* Angka pakai huruf lebar-tetap supaya digitnya berbaris lurus ke bawah —
   itu yang membuat daftar terbaca sebagai tabel, bukan tumpukan teks. */
.bb-nom{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bb-tgl b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
/* Baris kedua dikunci satu baris; kalau boleh melipat, tinggi tiap baris
   jadi berbeda-beda dan daftarnya terlihat berantakan. */
.bb-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-sub{flex-wrap:nowrap;min-width:0;overflow:hidden}
.bb-sub .pil{flex:0 0 auto}
.bb-ket{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:999px){
  .bb-baris{grid-template-columns:44px minmax(0,1fr) auto;align-items:center}
  .bb-tgl{width:44px;min-width:44px}
}

/* ================= strip tanggal: 5 hari, dibagi rata ================= */
.strip button{flex:1 1 0;min-width:0}

/* ================= buku besar: dikelompokkan per tanggal =================
   Menggantikan bentuk dua-baris. Tanggal tidak lagi diulang tiap mutasi;
   ia jadi judul kelompok beserta total hari itu, dan tiap mutasi cukup
   satu baris — nama di kiri, nominal rata kanan. */
.bb{display:flex;flex-direction:column}
.bb-hari{display:flex;align-items:baseline;gap:10px;padding:11px 16px 8px;
  background:var(--surface-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bb .bb-hari:first-child{border-top:0}
.bb-hari-tgl{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:800;color:var(--ink-2)}
.bb-hari-jml{margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;color:var(--ink-2)}

.bb-baris{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--rule)}
.bb-hari + .bb-baris{border-top:0}
.bb-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%}
.bb-dot.rek{background:var(--accent)}
.bb-dot.lok{background:var(--hijau)}
.bb-dot.hut{background:var(--merah)}
.bb-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;font-weight:600}
.bb-ket{color:var(--ink-3);font-weight:500;font-size:12.5px}
.bb-nom{flex:0 0 auto;text-align:right;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:700;letter-spacing:-.01em}

@media (max-width:480px){
  .bb-hari{padding:10px 14px 7px}
  .bb-baris{padding:9px 14px;gap:9px}
  .bb-nm{font-size:13.5px}
  .bb-ket{font-size:11.5px}
  .bb-nom{font-size:13px}
}