:root{--navy:#171F39;--navy-mid:#232E52;--orange:#F7941D;--orange-2:#EE6D2E;--orange-3:#FF8D46;
--orange-dark:#C46E0A;--orange-light:#FEE9D0;--cream:#FFF8F2;--cream-2:#FDF3EA;--border:#F0EBE5;
--body:#4A4540;--muted:#6b6560;--faint:#a09890;--teal:#0D4F4F;--teal-light:#E6F2F2;--green:#166534;--green-bg:#f0fdf4}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:#e9e7e3;color:var(--body);font-size:14px;line-height:1.55}
a{color:var(--orange-dark);text-decoration:none}a:hover{text-decoration:underline}
.topbar{background:var(--navy);color:#fff;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-0.01em}
.topbar .brand img{width:30px;height:30px;border-radius:7px;background:var(--cream);padding:2px}
.topbar nav a{color:rgba(255,255,255,0.75);font-weight:700;font-size:12.5px;margin-left:16px}
.topbar nav a:hover,.topbar nav a.active{color:#fff;text-decoration:none}
.topbar .who{font-size:11px;color:rgba(255,255,255,0.5)}
.container{max-width:1040px;margin:22px auto;padding:0 18px}
.pagehead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.pagehead h1{font-size:20px;font-weight:800;color:var(--navy)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.stat .l{font-size:10px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint)}
.stat .v{font-size:22px;font-weight:800;color:var(--navy);margin-top:3px}
.stat.hl .v{color:var(--green)}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:11px 13px;font-size:13px;border-bottom:1px solid var(--border)}
th{background:var(--cream-2);font-size:10px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:none}
td.r,th.r{text-align:right}
.badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:0.04em;padding:3px 9px;border-radius:99px}
.badge.lunas{background:var(--green-bg);color:var(--green)}
.badge.belum{background:#fff4e6;color:var(--orange-dark)}
.badge.tempo{background:#fef2f2;color:#b91c1c}
.btn{display:inline-block;font-family:inherit;font-weight:700;font-size:13px;border:none;border-radius:9px;padding:10px 16px;cursor:pointer;transition:filter .15s}
.btn:hover{filter:brightness(1.05);text-decoration:none}
.btn-p{background:linear-gradient(135deg,var(--orange-2),var(--orange-3));color:#fff}
.btn-n{background:var(--cream);color:var(--navy);border:1px solid var(--border)}
.btn-g{background:var(--green);color:#fff}
.btn-sm{padding:6px 11px;font-size:12px}
.monthnav{display:flex;align-items:center;gap:8px}
.monthnav input{font-family:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:#fff}
.empty{background:#fff;border:1px dashed var(--border);border-radius:12px;padding:30px;text-align:center;color:var(--muted)}
/* forms */
.form{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{margin-bottom:13px}
.field label{display:block;font-size:11px;font-weight:700;color:var(--navy);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:13px;color:var(--navy);background:var(--cream);border:1px solid var(--border);border-radius:8px;padding:9px 11px;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange)}
.field textarea{resize:vertical;min-height:52px}
.sub{font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);margin:6px 0 10px}
.child{background:var(--cream-2);border:1px solid var(--border);border-radius:12px;padding:13px;margin-bottom:11px}
.child .chead{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.child .rm{background:none;border:none;color:#c0392b;font-size:11px;font-weight:700;cursor:pointer}
.divide{height:1px;background:var(--border);margin:16px 0}
.modebar{display:flex;gap:6px;background:var(--cream);border:1px solid var(--border);border-radius:11px;padding:4px;margin-bottom:16px}
.modebar button{flex:1;font-family:inherit;font-size:12px;font-weight:700;border:none;background:transparent;color:var(--muted);padding:9px;border-radius:8px;cursor:pointer}
.modebar button.active{background:linear-gradient(135deg,var(--orange-2),var(--orange-3));color:#fff}
.hidden{display:none}
.hint{font-size:11px;color:var(--muted);margin-top:8px}
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.loginbox{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;width:340px;box-shadow:0 12px 40px rgba(23,31,57,0.12)}
.loginbox .lg{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.loginbox .lg img{width:40px;height:40px;border-radius:9px;background:var(--cream);padding:3px}
.loginbox h1{font-size:16px;font-weight:800;color:var(--navy)}
.loginbox .err{background:#fef2f2;color:#b91c1c;font-size:12px;padding:8px 11px;border-radius:8px;margin-bottom:12px}
.rowbtns{display:flex;gap:8px;flex-wrap:wrap}
/* ===== KARTU (cetak) ===== */
.stage{display:flex;flex-direction:column;align-items:center;gap:14px}
.card{width:480px;background:var(--cream);border-radius:22px;overflow:hidden;box-shadow:0 12px 40px rgba(23,31,57,0.16)}
.card-head{background:linear-gradient(150deg,#171F39,#232E52);padding:26px 28px 22px;position:relative;overflow:hidden}
.card-head::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.05) 1.2px,transparent 1.2px);background-size:16px 16px;opacity:.7}
.brandrow{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.logo-tile{width:56px;height:56px;border-radius:14px;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 5px 14px rgba(0,0,0,0.28)}
.logo-tile img{width:44px;height:auto;display:block}
.bt-name{font-size:19px;font-weight:800;color:#fff;line-height:1}
.bt-sub{font-family:'Lora',serif;font-style:italic;font-size:13px;color:rgba(247,148,29,0.95);margin-top:3px}
.pill{position:relative;z-index:1;display:inline-block;margin-top:18px;background:linear-gradient(135deg,var(--orange-2),var(--orange-3));color:#fff;font-size:11px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;padding:6px 14px;border-radius:99px}
.head-meta{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;margin-top:16px;gap:12px}
.hm-l{font-size:10px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:rgba(255,255,255,0.42)}
.hm-v{font-size:13px;font-weight:700;color:#fff;margin-top:2px}
.hm-r{text-align:right}
.card-body{padding:22px 28px 8px}
.recip{font-size:11px;color:var(--muted);margin-bottom:4px}.recip b{color:var(--navy)}
.c-periode{font-size:11px;color:var(--muted);margin-bottom:14px}.c-periode b{color:var(--orange-dark)}
.line{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:13px 0;border-bottom:1px solid var(--border)}
.line:first-of-type{border-top:1px solid var(--border)}
.li-name{font-size:15px;font-weight:800;color:var(--navy);line-height:1.2}
.li-meta{font-size:11.5px;color:var(--muted);margin-top:3px}.li-meta .tier{color:var(--orange-dark);font-weight:700}
.li-amt{font-size:14px;font-weight:800;color:var(--navy);white-space:nowrap;text-align:right}
.li-amt small{display:block;font-size:9.5px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:0.05em;margin-top:2px}
.c-total{display:flex;justify-content:space-between;align-items:center;background:var(--navy);border-radius:14px;padding:15px 20px;margin:16px 0 4px}
.c-total .t-l{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.55)}
.c-total .t-v{font-size:22px;font-weight:800;color:var(--orange)}
.bank{border:1.5px solid var(--border);background:#fff;border-radius:16px;margin:16px 0;overflow:hidden}
.bank-top{background:var(--cream-2);border-bottom:1px solid var(--border);padding:10px 18px;display:flex;align-items:center;justify-content:space-between}
.bank-top .l{font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange-dark)}
.bank-top .b{font-size:14px;font-weight:800;color:var(--navy)}
.bank-body{padding:14px 18px 16px}
.bank-norek{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:var(--navy);letter-spacing:0.03em}
.bank-atas{font-size:12px;color:var(--muted);margin-top:6px}.bank-atas b{color:var(--navy)}
.bank-tip{font-size:10.5px;color:var(--orange-dark);background:var(--orange-light);border-radius:8px;padding:8px 11px;margin-top:12px;line-height:1.5}
.duebox{display:flex;align-items:center;gap:13px;background:var(--orange-light);border:1.5px solid var(--orange);border-radius:14px;padding:13px 18px;margin:14px 0}
.duebox svg{width:34px;height:34px;flex-shrink:0}
.duebox .l{font-size:10px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--orange-dark)}
.duebox .v{font-size:15px;font-weight:800;color:var(--navy);margin-top:1px}
.duebox .n{font-size:10px;color:var(--orange-dark);margin-top:2px}
.trf{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted);background:var(--cream-2);border-radius:10px;padding:10px 14px;margin:12px 0 4px}
.trf b{color:var(--navy)}
.c-ket{background:var(--cream-2);border-left:3px solid var(--orange);border-radius:0 10px 10px 0;padding:11px 14px;margin:12px 0 4px}
.c-ket .l{font-size:9.5px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.c-ket .v{font-size:12.5px;color:var(--body)}
.card-foot{background:var(--teal-light);border-top:1px solid #d4e8e8;display:flex;justify-content:space-between;align-items:center;padding:14px 28px;margin-top:16px}
.card-foot img{height:34px;width:auto;display:block}
.card-foot .contact{text-align:right;font-size:10.5px;color:var(--teal);font-weight:700;line-height:1.7}
.wabox{width:480px;background:var(--cream-2);border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:4px}
.wabox h3{font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--navy);margin-bottom:4px}
.wa-text{width:100%;min-height:150px;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.55;color:var(--navy);background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px;resize:vertical}
.btn-copy{background:#25D366;color:#fff;margin-top:9px}.btn-copy.done{background:var(--navy)}
@media(max-width:560px){.card,.wabox{width:100%}.form .row{grid-template-columns:1fr}}
.badge.batal{background:#eef0f2;color:#64748b}
.badge.buat{background:var(--green-bg);color:var(--green)}
.badge.ubah{background:#fff4e6;color:var(--orange-dark)}
.badge.hapus{background:#fef2f2;color:#b91c1c}