:root{--bg:#f1f5f9;--card:#ffffff;--ink:#0f172a;--muted:#64748b;--green:#16a34a;--green-bg:#dcfce7;--blue:#2563eb;--blue-bg:#dbeafe;--amber:#d97706;--amber-bg:#fef3c7;--red:#dc2626;--red-bg:#fee2e2;--line:#e2e8f0;--primary:#4f46e5;--primary-2:#6366f1;--primary-bg:#eef2ff;--indigo-soft:#818cf8}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}a{color:var(--primary)}.page-h{font-size:20px;font-weight:800;margin-bottom:12px}.section-h{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700}.section-h a{font-size:12px;color:var(--primary);text-decoration:none}.muted{color:var(--muted)}.kartu{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}.summary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-radius:18px;padding:16px}.summary .lbl{font-size:12px;opacity:.85}.summary .big{font-size:26px;font-weight:800;margin-top:2px}.summary .row{display:flex;gap:10px;margin-top:14px}.summary .mini{flex:1 1;background:rgba(255,255,255,.16);border-radius:12px;padding:9px 10px}.summary .mini .l{font-size:10.5px;opacity:.9}.summary .mini .v{font-size:14px;font-weight:700;margin-top:2px}.banner{background:var(--amber-bg);color:#92400e;border-radius:12px;padding:12px;text-decoration:none;display:block;font-size:13.5px}.env .head{justify-content:space-between}.env .head,.env .name{display:flex;align-items:center}.env .name{font-weight:700;font-size:15px;gap:7px}.env .sisa{font-size:15px;font-weight:800}.env .meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}.env .meta b{color:var(--ink)}.tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}.tag-amplop{background:var(--blue-bg);color:var(--blue)}.tag-bulanan{background:var(--amber-bg);color:var(--amber)}.bar{height:9px;background:var(--bg);border-radius:6px;margin:10px 0 7px;overflow:hidden;display:flex}.bar .used{background:var(--red);height:100%}.bar .left{background:var(--green);height:100%}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.field{display:flex;flex-direction:column;gap:6px}.label{font-size:12px;color:var(--muted);font-weight:600}.inp{border:1.5px solid var(--line);border-radius:12px;padding:12px 13px;font-size:15px;color:var(--ink);background:#fff;width:100%}.inp:focus{outline:none;border-color:var(--primary)}.inp.big{font-size:24px;font-weight:800;color:var(--primary)}.inp.big::placeholder{color:#cbd5e1;font-weight:800}select.inp{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:#fff}.btn{background:var(--primary);color:#fff;text-align:center;padding:14px;border-radius:14px;font-weight:700;font-size:15px;border:none;width:100%;cursor:pointer}.btn:disabled{opacity:.6;cursor:default}.btn-ghost{background:var(--bg);color:var(--ink)}.btn-link{border:none;background:none;color:var(--primary);font-size:12px;cursor:pointer;padding:0}.btn-link.danger{color:var(--red)}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1.5px solid var(--line);border-radius:20px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--muted);background:#fff;cursor:pointer}.chip-on{background:var(--primary-bg);border-color:var(--primary);color:var(--primary)}.chip-cash.chip-on{background:var(--green-bg);border-color:var(--green);color:var(--green)}.sub-chips{margin-top:10px;padding-left:4px;border-left:3px solid var(--primary-bg)}.warning{background:var(--red-bg);color:var(--red)}.ok,.warning{border-radius:12px;padding:11px 13px;font-size:12.5px;line-height:1.5}.ok{background:var(--green-bg);color:var(--green)}.tr-row{display:flex;align-items:center;gap:10px}.tr-box{flex:1 1;border:1.5px solid var(--line);border-radius:12px;padding:11px}.tr-box .l{font-size:11px;color:var(--muted)}.tr-box .v{font-weight:700;font-size:14px;margin-top:3px}.arrow{font-size:20px;color:var(--primary)}.split{display:flex;gap:10px}.split .c{flex:1 1;border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;background:#fff}.split .c .l{font-size:11px;color:var(--muted)}.split .c .v{font-size:18px;font-weight:800;margin-top:3px}.cap{text-align:center;font-size:12px;color:var(--muted)}.pie-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}.pie{width:170px;height:170px}.pie,.pie .hole{border-radius:50%;display:flex;align-items:center;justify-content:center}.pie .hole{width:96px;height:96px;background:#fff;flex-direction:column}.pie .hole .t{font-size:10px;color:var(--muted)}.pie .hole .n{font-size:14px;font-weight:800}.legend{width:100%;display:flex;flex-direction:column;gap:8px}.legend .li{display:flex;align-items:center;gap:9px;font-size:13px}.legend .li .nm{flex:1 1}.app-shell{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}.app-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);position:-webkit-sticky;position:sticky;top:0;z-index:10}.app-brand{font-weight:800;font-size:16px;color:var(--ink);text-decoration:none}.app-header-actions{display:flex;gap:14px}.app-header-actions a{font-size:20px;text-decoration:none}.app-body{flex:1 1;padding:16px 16px 8px}.nav{display:flex;justify-content:space-around;border-top:1px solid var(--line);padding:10px 0 14px;position:-webkit-sticky;position:sticky;bottom:0;background:#fff}.nav .it{font-size:10px;color:var(--muted);text-align:center;display:flex;flex-direction:column;gap:3px;align-items:center;text-decoration:none}.nav .it.act{color:var(--primary);font-weight:700}.nav .ico{font-size:19px}.login-wrap{max-width:360px;margin:10vh auto;padding:24px}.stack{gap:12px}.stack,.stack-lg{display:flex;flex-direction:column}.stack-lg{gap:16px}.stack-sm{display:flex;flex-direction:column;gap:8px}.summary-title{font-weight:700;margin:8px 0;cursor:pointer}.period{display:flex;gap:8px;background:var(--bg);border-radius:12px;padding:5px}.period .p{flex:1 1;text-align:center;font-size:12px;font-weight:600;color:var(--muted);padding:8px;border-radius:9px;text-decoration:none}.period .p.on{background:var(--card);color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.08)}.period-custom{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.period-custom .inp{flex:1 1;min-width:130px}.period-custom .btn{width:auto;padding:10px 18px}.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}.modal-box{background:var(--card);border-radius:16px;padding:18px;width:100%;max-width:360px}.modal-box .baris{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px}.modal-box .baris .k{color:var(--muted)}.modal-catatan{background:var(--bg);border-radius:12px;padding:12px;font-size:14px;line-height:1.5;margin:8px 0;white-space:pre-wrap}.cetak-doc table td,.cetak-doc table th{border:1px solid #cbd5e1;padding:6px 9px}.cetak-doc table th{background:var(--bg)}@media print{.app-header,.nav,.no-print{display:none!important}.app-body{padding:0!important}.app-shell{max-width:none!important}.app-shell,body{background:#fff!important}.cetak-doc{color:#000}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}.skel{background:var(--line);border-radius:8px;animation:pulse 1.2s ease-in-out infinite}.kartu-link{text-decoration:none;color:inherit;display:block}@keyframes spin{to{transform:rotate(1turn)}}.spinner{display:inline-block;width:14px;height:14px;border:2px solid;border-top:2px solid transparent;border-radius:50%;animation:spin .6s linear infinite;vertical-align:-2px;margin-right:6px}