:root {
  --green: #0b7a4b;
  --green-dark: #095c39;
  --bg: #f6f8f7;
  --card: #ffffff;
  --ink: #14201b;
  --muted: #5a6b62;
  --danger: #c0392b;
  --line: #e3ebe6;
}
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0; background: var(--bg); color: var(--ink);
}
.loading { text-align: center; padding: 3rem; color: var(--muted); }

header.bar {
  background: var(--green); color: #fff; padding: 1rem 1.1rem;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 10;
}
header.bar h1 { font-size: 1.15rem; margin: 0; }
header.bar .hdl { display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.entsel { max-width:62vw; font-size:.8rem; padding:.25rem .4rem; border-radius:8px;
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.15); color:#fff; }
.entsel option { color:#14201b; }
header.bar button { background: transparent; border: 1px solid rgba(255,255,255,.5);
  color: #fff; border-radius: 8px; padding: .35rem .6rem; font-size: .8rem; }

main { padding: 1rem; max-width: 640px; margin: 0 auto; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .9rem; }
.tile .label { color: var(--muted); font-size: .78rem; }
.tile .value { font-size: 1.25rem; font-weight: 700; margin-top: .2rem; }
.tile.wide { grid-column: 1 / -1; }
.value.neg { color: var(--danger); }

.capture {
  display: block; width: 100%; text-align: center; background: var(--green);
  color: #fff; border: none; border-radius: 12px; padding: 1rem; font-size: 1rem;
  font-weight: 600; margin-bottom: 1.25rem; cursor: pointer;
}
.capture:active { background: var(--green-dark); }
input[type="file"] { display: none; }

h2 { font-size: 1rem; margin: 1.25rem 0 .6rem; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: .85rem; margin-bottom: .7rem;
}
.card .vendor { font-weight: 600; }
.card .meta { color: var(--muted); font-size: .82rem; margin: .15rem 0 .6rem; }
.row { display: flex; gap: .5rem; }
.row button { flex: 1; border-radius: 8px; padding: .55rem; border: 1px solid var(--line);
  background: #fff; font-size: .85rem; cursor: pointer; }
.row button.primary { background: var(--green); color: #fff; border-color: var(--green); }
.row button.danger { color: var(--danger); }
.empty { color: var(--muted); text-align: center; padding: 1.2rem; }
.badge { font-size: .7rem; padding: .1rem .4rem; border-radius: 6px; background: #fff3cd; color: #7a5b00; }

/* Auth */
.auth { max-width: 360px; margin: 3rem auto; padding: 1.5rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; }
.auth h1 { color: var(--green); text-align: center; margin: 0 0 .3rem; }
.auth p.sub { text-align: center; color: var(--muted); margin: 0 0 1.2rem; font-size: .85rem; }
.auth label { display: block; font-size: .8rem; color: var(--muted); margin: .6rem 0 .2rem; }
.auth input { width: 100%; padding: .6rem; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; }
.auth button.primary { width: 100%; margin-top: 1rem; background: var(--green); color: #fff;
  border: none; border-radius: 8px; padding: .75rem; font-size: 1rem; font-weight: 600; }
.auth .toggle { text-align: center; margin-top: .9rem; font-size: .85rem; }
.auth .toggle a { color: var(--green); cursor: pointer; }
.err { color: var(--danger); font-size: .82rem; margin-top: .6rem; min-height: 1rem; }

/* Narrow-screen refinements (small Androids ~320-360px) */
* { min-width: 0; }
main { overflow-x: hidden; }
.value { overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .tiles { grid-template-columns: 1fr; }      /* stack tiles */
  header.bar h1 { font-size: 1rem; }
  .tile .value { font-size: 1.1rem; }
  .row { flex-wrap: wrap; }
}
.pill { display:flex; justify-content:space-between; align-items:center;
  background: var(--card); border:1px solid var(--line); border-radius:10px;
  padding:.7rem .85rem; margin-bottom:.5rem; font-size:.9rem; gap:.5rem; }
.pill .n { font-weight:700; }
.pill .n.warn { color: var(--danger); }
.capture.ledger { background:#3a6f5c; margin-top:-.5rem; }
.jline { display:flex; justify-content:space-between; gap:.5rem; font-size:.85rem; padding:.15rem 0; }
.jline .cr { color:#0b7a4b; }
.jline span:last-child { white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Mutasi Akun */
.mut-controls { display:flex; gap:.5rem; align-items:center; margin-bottom:.8rem; flex-wrap:wrap; }
.mut-controls select { flex:1; min-width:180px; padding:.5rem; border:1px solid var(--line); border-radius:8px; font-size:.9rem; background:#fff; }
.mnav { display:flex; align-items:center; gap:.4rem; }
.mnav button { border:1px solid var(--line); background:#fff; border-radius:8px; width:2rem; height:2rem; font-size:1rem; cursor:pointer; }
.mnav span { font-weight:600; font-size:.9rem; min-width:4.5rem; text-align:center; }
.explain { background:#eef6f1; border:1px solid #cfe6da; border-radius:10px; padding:.7rem .85rem; font-size:.82rem; color:#2c463a; margin-bottom:.8rem; line-height:1.45; }
.mchart { width:100%; height:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.mrow { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem; margin-bottom:.45rem; }
.mrow .mdesc { display:flex; justify-content:space-between; gap:.5rem; font-size:.82rem; color:var(--muted); }
.mrow .mdesc b { color:var(--ink); font-weight:600; }
.mrow .mamt { display:flex; gap:.7rem; margin-top:.25rem; font-size:.85rem; flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.mrow .in { color:#0b7a4b; font-weight:700; }
.mrow .out { color:var(--danger); font-weight:700; }
.mrow .bal { margin-left:auto; color:var(--muted); font-size:.78rem; }

/* Neraca saldo: debit vs kredit beda warna + tooltip */
:root { --dr:#1d6fb8; --cr:#b8541d; }
.legend { display:flex; gap:.8rem; align-items:center; margin-bottom:.5rem; font-size:.8rem; flex-wrap:wrap; }
.legend .tag { font-weight:700; cursor:help; }
.legend small { color:var(--muted); }
.tag.dr, .dr { color:var(--dr); }
.tag.cr, .cr { color:var(--cr); }
.tbwrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--card); }
table.tb { width:100%; border-collapse:collapse; font-size:.82rem; }
table.tb th, table.tb td { padding:.5rem .6rem; text-align:right; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
table.tb th.dr, table.tb td.dr { color:var(--dr); }
table.tb th.cr, table.tb td.cr { color:var(--cr); }
table.tb th:first-child, table.tb td.ac { text-align:left; color:var(--ink); }
table.tb th { cursor:help; background:#f0f5f2; }
table.tb tfoot td { font-weight:700; border-top:2px solid var(--line); }
table.tb tfoot .bal { text-align:center; color:var(--green); font-weight:700; }

/* Jurnal & detail */
.jcard { cursor:pointer; }
.jcard:active { background:#f2f7f4; }
.chev { color:var(--green); font-size:.78rem; float:right; font-weight:600; }
.jline .drt { color:var(--dr); font-weight:600; white-space:nowrap; }
.jline .crt { color:var(--cr); font-weight:600; white-space:nowrap; }
.dline { border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem; margin-bottom:.5rem; background:var(--card); border-left:4px solid; }
.dline.isdr { border-left-color:var(--dr); }
.dline.iscr { border-left-color:var(--cr); }
.dl-top { display:flex; justify-content:space-between; gap:.5rem; font-size:.88rem; }
.dl-top .drt { color:var(--dr); font-weight:700; white-space:nowrap; }
.dl-top .crt { color:var(--cr); font-weight:700; white-space:nowrap; }
.dl-memo { font-size:.8rem; color:var(--muted); margin-top:.3rem; line-height:1.4; }
.explain details pre { white-space:pre-wrap; font-size:.72rem; background:#f6f8f7; padding:.5rem; border-radius:6px; overflow-x:auto; }
.explain .imglink { display:inline-block; margin-top:.4rem; color:var(--green); font-weight:600; }

/* Kewajiban pajak */
.pill.pjk { cursor:pointer; }
.pfiling { border:1px solid var(--line); border-left:4px solid var(--muted); border-radius:10px; padding:.65rem .8rem; margin-bottom:.5rem; background:var(--card); cursor:pointer; }
.pfiling.late { border-left-color:var(--danger); }
.pfiling.done { border-left-color:var(--green); }
.pf-top { display:flex; justify-content:space-between; font-weight:600; font-size:.9rem; }
.pf-sub { font-size:.8rem; color:var(--muted); margin-top:.25rem; }
.pstat { margin-left:.3rem; font-weight:700; }
.pstat.late { color:var(--danger); }

/* Net worth */
.nwbig { background:linear-gradient(135deg,#0b7a4b,#095c39); color:#fff; border-radius:14px; padding:1.1rem; text-align:center; margin-bottom:1rem; }
.nwbig .lbl { font-size:.8rem; opacity:.85; }
.nwbig .val { font-size:1.8rem; font-weight:800; margin:.25rem 0; }
.nwbig .val.neg { color:#ffd2cc; }
.nwbig .sub { font-size:.78rem; opacity:.85; }

/* Form transaksi */
.flbl { display:block; font-size:.78rem; color:var(--muted); margin:.6rem 0 .2rem; }
.fin { width:100%; padding:.55rem; border:1px solid var(--line); border-radius:8px; font-size:.95rem; background:#fff; }
.tline { border:1px solid var(--line); border-radius:10px; padding:.5rem; margin-bottom:.5rem; background:var(--card); }
.tline2 { display:flex; gap:.4rem; margin-top:.4rem; }
.tline2 .side { flex:0 0 5.5rem; }
.tline2 .amt { flex:1; text-align:right; font-variant-numeric:tabular-nums; }
.tline2 .delline { flex:0 0 2.2rem; border:1px solid var(--line); background:#fff; border-radius:8px; color:var(--danger); }
.addline { width:100%; padding:.5rem; border:1px dashed var(--green); background:#eef6f1; color:var(--green); border-radius:8px; font-weight:600; margin-bottom:.6rem; }
.balbar { text-align:center; font-size:.85rem; margin:.5rem 0 .8rem; font-variant-numeric:tabular-nums; }
.balbar .okb { color:var(--green); font-weight:700; }
.balbar .nob { color:var(--danger); font-weight:700; }
.capture:disabled { opacity:.5; }
/* POS kasir */
.chip { display:inline-block; margin:.2rem; padding:.5rem .7rem; border:1px solid var(--line); border-radius:10px; background:#fff; font-weight:600; font-size:.9rem; }
.chip:disabled { opacity:.4; }
.chip small { color:#888; font-weight:400; }
.mini { margin-left:.4rem; padding:.15rem .5rem; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:.8rem; }
.qin { border:1px solid var(--line); border-radius:6px; padding:.15rem; font-size:.9rem; }

/* ===== Kasir full-screen (mode HP) ===== */
.kasir { position:fixed; inset:0; background:var(--bg,#f4f6f5); display:flex; flex-direction:column; z-index:50; }
.kasir-top { display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; background:var(--green); color:#fff; }
.kasir-top h1 { font-size:1.05rem; margin:0; flex:1; }
.kasir-top button { background:rgba(255,255,255,.2); color:#fff; border:0; border-radius:8px; padding:.4rem .7rem; font-weight:600; }
.kasir-shift { font-size:.72rem; opacity:.95; }
.kasir-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:.7rem; padding-bottom:9rem; }
.posgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
@media (min-width:520px){ .posgrid { grid-template-columns:repeat(3,1fr); } }
.postile { border:1px solid var(--line); border-radius:14px; background:var(--card,#fff); padding:.8rem .6rem; min-height:92px;
  display:flex; flex-direction:column; justify-content:space-between; text-align:left; font:inherit; position:relative; }
.postile:active { transform:scale(.97); }
.postile:disabled { opacity:.4; }
.postile .pn { font-weight:700; font-size:.95rem; line-height:1.15; }
.postile .pp { color:var(--green); font-weight:700; font-size:1rem; margin-top:.3rem; }
.postile .ps { font-size:.7rem; color:#888; }
.postile .qbadge { position:absolute; top:-8px; right:-8px; background:var(--danger); color:#fff; min-width:24px; height:24px;
  border-radius:12px; font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 .3rem; }
.kasir-bar { position:fixed; left:0; right:0; bottom:0; background:var(--card,#fff); border-top:1px solid var(--line);
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); box-shadow:0 -4px 16px rgba(0,0,0,.08); }
.kasir-bar .tot { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.5rem; }
.kasir-bar .tot .lbl { color:#888; font-size:.85rem; }
.kasir-bar .tot .val { font-size:1.8rem; font-weight:800; font-variant-numeric:tabular-nums; }
.paybtn { width:100%; padding:1rem; border:0; border-radius:14px; background:var(--green); color:#fff; font-size:1.15rem; font-weight:800; }
.paybtn:disabled { opacity:.4; }
/* Cart & payment sheet */
.sheet-back { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:60; display:flex; align-items:flex-end; }
.sheet { background:var(--card,#fff); width:100%; max-height:88vh; overflow-y:auto; border-radius:18px 18px 0 0;
  padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
.sheet h2 { margin:.2rem 0 .8rem; }
.crow { display:flex; align-items:center; gap:.5rem; padding:.5rem 0; border-bottom:1px solid var(--line); }
.crow .cn { flex:1; font-weight:600; }
.crow .cp { font-variant-numeric:tabular-nums; font-weight:700; min-width:5.5rem; text-align:right; }
.stepper { display:flex; align-items:center; gap:.1rem; }
.stepper button { width:38px; height:38px; border:1px solid var(--line); background:#fff; border-radius:10px; font-size:1.3rem; font-weight:700; }
.stepper span { min-width:2rem; text-align:center; font-weight:700; }
.paygrid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.8rem; }
.paygrid button { padding:.9rem .4rem; border:1px solid var(--line); border-radius:12px; background:#fff; font-weight:700; font-size:.95rem; }
.denoms { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; }
.denoms button { flex:1 1 28%; padding:.6rem; border:1px solid var(--line); border-radius:10px; background:#fff; font-weight:600; font-variant-numeric:tabular-nums; }
.sheet .fld { width:100%; padding:.7rem; border:1px solid var(--line); border-radius:10px; font-size:1.1rem; margin:.3rem 0; font-variant-numeric:tabular-nums; }
.sheet .close { width:100%; padding:.7rem; border:0; background:transparent; color:#888; margin-top:.5rem; }
@media (prefers-color-scheme: dark){ .kasir { background:#12151a; } }