:root{--bg: #f4f6fb;--kartu: #ffffff;--garis: #e6eaf3;--teks: #12172a;--teks-lembut: #6b7386;--utama: #4f46e5;--utama-lembut: #eef0ff;--masuk: #12a150;--keluar: #e2483d;--radius: 18px;--bayang: 0 8px 24px rgba(23, 31, 66, .07)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--teks);font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer}h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}.app{max-width:880px;margin:0 auto;padding:0 14px 110px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 4px 12px}.merek{display:flex;align-items:center;gap:10px;cursor:pointer}.merek .logo{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#6366f1,#4338ca);font-size:20px;box-shadow:0 6px 14px #4f46e559}.merek b{display:block;font-size:16px}.merek small{display:block;color:var(--teks-lembut);font-size:11.5px}.tombol-admin{border:1px solid var(--garis);background:#fff;border-radius:999px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--teks);box-shadow:var(--bayang)}.tombol-admin.aktif{background:var(--utama);border-color:var(--utama);color:#fff}.menu-atas{display:none;gap:6px;background:#fff;padding:6px;border-radius:16px;box-shadow:var(--bayang);margin-bottom:14px}.menu-atas .menu{flex:1;border:0;background:transparent;padding:10px;border-radius:12px;font-size:13.5px;font-weight:600;color:var(--teks-lembut);display:flex;align-items:center;justify-content:center;gap:7px}.menu-atas .menu.aktif{background:var(--utama-lembut);color:var(--utama)}.menu-bawah{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fffffff5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--garis);padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:40}.menu-bawah .tab{flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--teks-lembut);padding:4px 0}.menu-bawah .tab span{font-size:18px;filter:grayscale(.55);opacity:.75}.menu-bawah .tab.aktif{color:var(--utama)}.menu-bawah .tab.aktif span{filter:none;opacity:1}.banner-galat,.banner-info{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;border-radius:14px;padding:11px 14px;font-size:13px;margin-bottom:12px}.banner-galat{background:#fdecea;color:#a02a21;border:1px solid #f7c9c4}.banner-galat button{border:0;background:#a02a21;color:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600}.banner-info{background:#eef2ff;color:#3f3d9e;border:1px solid #dcdcfb}.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%);background:#12172a;color:#fff;padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;z-index:90;box-shadow:0 10px 24px #00000040;max-width:86vw;text-align:center}.tumpuk{display:flex;flex-direction:column;gap:13px}.kartu{background:var(--kartu);border-radius:var(--radius);padding:16px;box-shadow:var(--bayang)}.kartu.kosong{text-align:center;padding:22px 16px}.kartu.kosong p{color:var(--teks-lembut);font-size:13.5px;margin:8px 0 14px}.kartu-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.kartu-kepala h3{font-size:15px}.kartu-tanpa-pad{padding:4px 14px}.kosong-teks{color:var(--teks-lembut);font-size:13.5px;text-align:center;margin:10px 0}.teks-kecil{color:var(--teks-lembut);font-size:12px;margin:6px 0 0}.teks-kecil.tengah{text-align:center}.kartu-saldo{background:linear-gradient(135deg,#4f46e5,#6d28d9 55%,#9333ea);color:#fff;border-radius:22px;padding:18px;box-shadow:0 14px 30px #4f46e552}.kartu-saldo.kecil{padding:16px}.kartu-saldo-atas{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.label-terang{font-size:12px;color:#ffffffd1;display:block}.teks-kecil.terang{color:#fffc}.saldo-besar{display:block;font-size:27px;letter-spacing:-.02em;margin-top:2px}.tombol-terang{border:0;background:#ffffff2e;color:#fff;border-radius:999px;padding:9px 15px;font-weight:700;font-size:13px;white-space:nowrap}.daftar-dompet-mini{display:flex;gap:8px;overflow-x:auto;margin-top:14px;padding-bottom:2px;scrollbar-width:none}.daftar-dompet-mini::-webkit-scrollbar{display:none}.mini-dompet{display:flex;align-items:center;gap:7px;background:#ffffff26;border-radius:12px;padding:7px 11px;white-space:nowrap}.mini-dompet small{display:block;font-size:10.5px;color:#ffffffd9}.mini-dompet b{font-size:12.5px}.mini-kosong{font-size:12px;color:#ffffffd9}.grid-ringkas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.kartu.ringkas{padding:12px}.ringkas-kepala h3{font-size:12.5px;color:var(--teks-lembut);font-weight:600}.ringkas-kepala small{font-size:10px;color:#9aa1b3;display:block;margin-top:1px}.selisih{font-size:15px;font-weight:800;margin:8px 0 6px;letter-spacing:-.01em}.selisih.plus{color:var(--masuk)}.selisih.minus{color:var(--keluar)}.ringkas-kaki{display:flex;flex-direction:column;gap:1px;font-size:11px;font-weight:600}.masuk{color:var(--masuk)}.keluar{color:var(--keluar)}.donut-layout{display:flex;align-items:center;gap:14px}.donut-bungkus{position:relative;width:132px;flex:0 0 132px}.donut{width:132px;height:132px;display:block}.donut-tengah{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;pointer-events:none}.donut-tengah strong{font-size:13px;display:block}.donut-tengah span{font-size:10.5px;color:var(--teks-lembut)}.legend{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}.legend li{display:flex;align-items:center;gap:7px;font-size:12.5px}.legend i{width:9px;height:9px;border-radius:3px;flex:0 0 9px}.legend-nama{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.legend-nilai{color:var(--teks-lembut);font-variant-numeric:tabular-nums}.legend b{font-size:11.5px;color:var(--teks-lembut);min-width:32px;text-align:right}.bar-area{display:flex;flex-direction:column;gap:10px}.bar-legend{display:flex;gap:14px;font-size:11.5px;color:var(--teks-lembut);font-weight:600}.bar-legend .lg{display:inline-flex;align-items:center;gap:5px}.bar-legend .lg i{width:9px;height:9px;border-radius:3px}.bar-legend .lg.masuk i{background:#34d399}.bar-legend .lg.keluar i{background:#f87171}.bar-chart{display:flex;align-items:flex-end;gap:8px;height:150px}.bar-kolom{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}.bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}.bar{width:46%;max-width:16px;border-radius:5px 5px 3px 3px;min-height:0;transition:height .25s ease}.bar.masuk{background:linear-gradient(180deg,#4ade80,#22c55e)}.bar.keluar{background:linear-gradient(180deg,#fca5a5,#ef4444)}.bar-label{font-size:10px;color:var(--teks-lembut);font-weight:600}.daftar-item{display:flex;flex-direction:column}.item{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid #f1f3f9}.item:last-child{border-bottom:0}.item-ikon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;flex:0 0 38px}.item-tubuh{flex:1;min-width:0}.item-baris{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.item-judul{font-weight:650;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-nominal{font-weight:700;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}.item-nominal.masuk{color:var(--masuk)}.item-nominal.keluar{color:var(--keluar)}.item-nominal.transfer{color:var(--utama)}.item-sub{font-size:11.5px;color:var(--teks-lembut)}.item-catatan{margin:3px 0 0;font-size:12px;color:#5c6479;background:#f7f8fc;border-radius:8px;padding:5px 8px;display:inline-block}.item-bawah{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px}.item-aksi{display:flex;gap:6px;flex-wrap:wrap}.item-aksi button{border:1px solid var(--garis);background:#fff;border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:600;color:var(--teks-lembut)}.item-aksi button:hover{border-color:#c7cbe0;color:var(--teks)}.item-aksi button.bahaya,.tautan.bahaya{color:var(--keluar)}.tautan-foto{border:0;background:#f3f4fb;border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:600;color:var(--utama)}.tombol{border:0;background:var(--utama);color:#fff;border-radius:12px;padding:11px 18px;font-weight:700;font-size:14px}.tombol.utama{background:linear-gradient(135deg,#6366f1,#4f46e5);box-shadow:0 8px 18px #4f46e547}.tombol.abu{background:#eef0f7;color:#404a63;box-shadow:none}.tombol.kecil{padding:7px 13px;font-size:12.5px;border-radius:999px}.tombol.lebar{width:100%}.tombol:disabled{opacity:.6}.tautan{border:0;background:transparent;color:var(--utama);font-weight:700;font-size:12.5px;padding:2px 0}.fab{position:fixed;right:16px;bottom:84px;z-index:41;border:0;border-radius:999px;padding:13px 20px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-weight:700;font-size:14px;box-shadow:0 12px 24px #4f46e56b}.filter-kartu{display:flex;flex-direction:column;gap:10px;position:sticky;top:0;z-index:20}.cari-baris{display:flex;gap:8px}.input{width:100%;border:1px solid var(--garis);background:#fbfcff;border-radius:12px;padding:10px 12px;font-size:14px;outline:none}.input:focus{border-color:#b9bdf5;background:#fff;box-shadow:0 0 0 3px #6366f121}.input.kecil{padding:8px 10px;font-size:12.5px}.cari{flex:1}.filter-scroll{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}.filter-scroll::-webkit-scrollbar{display:none}.pil{border:1px solid var(--garis);background:#fff;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--teks-lembut);white-space:nowrap}.pil.aktif{background:var(--utama);border-color:var(--utama);color:#fff}.filter-baris{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.filter-baris .input{flex:1;min-width:110px}.rekap-baris{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:600;color:var(--teks-lembut);padding:0 4px}.grup-hari{display:flex;flex-direction:column;gap:6px}.grup-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px}.grup-kepala h3{font-size:13px;color:#39405a}.grup-kepala span{display:flex;gap:9px;font-size:11.5px;font-weight:700}.grup-hari .daftar-item{background:#fff;border-radius:var(--radius);box-shadow:var(--bayang)}.daftar-dompet{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.daftar-dompet li{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid #f0f2f9;border-radius:14px}.dompet-ikon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:18px;flex:0 0 40px}.dompet-info{flex:1;min-width:0}.dompet-info b{font-size:14px}.dompet-info small{display:block;font-size:11px;color:var(--teks-lembut)}.dompet-kanan{text-align:right}.dompet-kanan>b{font-size:13.5px;font-variant-numeric:tabular-nums}.dompet-kanan .item-aksi{justify-content:flex-end;margin-top:3px}.grid-kategori{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;margin-top:10px}.kartu-kategori{border:1px solid var(--garis);border-radius:14px;padding:11px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;background:#fff}.kategori-ikon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px}.kartu-kategori b{font-size:12.5px}.kartu-kategori .item-aksi button{padding:3px 8px;font-size:11px}.segmen{display:flex;gap:5px;background:#f1f3fa;border-radius:13px;padding:4px;margin-bottom:6px}.segmen button{flex:1;border:0;background:transparent;border-radius:10px;padding:9px 6px;font-size:13px;font-weight:650;color:var(--teks-lembut)}.segmen button.aktif{background:#fff;color:var(--teks);box-shadow:0 2px 8px #171f421f}.segmen button.aktif.keluar{color:var(--keluar)}.segmen button.aktif.masuk{color:var(--masuk)}.segmen.kecil button{padding:7px 6px;font-size:12px}.lapis{position:fixed;top:0;right:0;bottom:0;left:0;background:#10142673;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:0}.sheet{background:#fff;width:100%;max-width:520px;max-height:92vh;border-radius:22px 22px 0 0;display:flex;flex-direction:column;box-shadow:0 -12px 40px #0003;animation:naik .22s ease}@keyframes naik{0%{transform:translateY(18px);opacity:.6}to{transform:translateY(0);opacity:1}}.sheet-tengah{border-radius:20px;margin-bottom:8vh;max-height:84vh}.lapis:has(.sheet-tengah){align-items:center;padding:16px}.sheet-kepala{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px;border-bottom:1px solid #f1f3f9}.sheet-kepala h2{font-size:16px}.tombol-tutup{border:0;background:#f1f3fa;width:30px;height:30px;border-radius:999px;font-size:13px;color:#59607a}.sheet-isi{padding:14px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.sheet-aksi{display:flex;gap:9px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid #f1f3f9}.sheet-aksi .tombol{flex:1}.kaki-sheet{margin:0;padding:0 16px 12px;text-align:center;font-size:12px;color:var(--teks-lembut)}.label-kecil{display:block;font-size:11.5px;font-weight:700;color:#59607a;margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em}.label-nominal{display:block;font-size:11.5px;font-weight:700;color:#59607a;text-transform:uppercase}.input-nominal{display:flex;align-items:center;gap:8px;border:1px solid var(--garis);background:#fbfcff;border-radius:14px;padding:8px 14px}.input-nominal span{font-weight:700;color:var(--teks-lembut)}.input-nominal input{flex:1;border:0;background:transparent;outline:none;font-size:24px;font-weight:800;letter-spacing:-.02em;padding:4px 0;min-width:0}.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:9px}.pilih-kategori{display:flex;flex-wrap:wrap;gap:6px;max-height:132px;overflow-y:auto}.chip-kategori{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--garis);background:#fff;border-radius:999px;padding:6px 11px;font-size:12.5px;font-weight:600;color:#3d4460}.foto-baris{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pratinjau{width:52px;height:52px;object-fit:cover;border-radius:10px;border:1px solid var(--garis)}.lapis-foto{z-index:100;align-items:center;padding:20px}.lapis-foto img{max-width:100%;max-height:80vh;border-radius:14px}.kotak-ingat{background:#fff8e7;border:1px solid #f6e0b0;border-radius:12px;padding:10px 12px;font-size:12.5px;color:#7a5a13;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.kotak-ingat p{margin:0}.pesan-galat{background:#fdecea;color:#a02a21;border-radius:10px;padding:9px 11px;font-size:12.5px;margin:0}.form-admin{display:flex;flex-direction:column;gap:9px}.kartu-admin{display:flex;align-items:center;gap:11px;background:#f5f7ff;border-radius:14px;padding:12px}.avatar-admin{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;background:var(--utama);color:#fff;font-weight:700}.kartu-admin p{margin:2px 0 0}.daftar-info{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.daftar-info li{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--teks-lembut);border-bottom:1px solid #f1f3f9;padding-bottom:7px}.daftar-info li b{color:var(--teks)}.pemisah{position:relative;text-align:center;margin:4px 0}.pemisah:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--garis)}.pemisah span{position:relative;background:#fff;padding:0 10px;font-size:11.5px;color:var(--teks-lembut)}.tombol.sso{display:block;text-align:center;text-decoration:none;background:#12172a;color:#fff;border-radius:12px;padding:11px;font-weight:700;font-size:13.5px}.pilih-ikon{display:flex;flex-wrap:wrap;gap:6px}.ikon-opsi{width:36px;height:36px;border-radius:10px;border:1px solid var(--garis);background:#fff;font-size:16px;display:grid;place-items:center}.ikon-opsi.aktif{border-color:var(--utama);background:var(--utama-lembut)}.pilih-warna{display:flex;flex-wrap:wrap;gap:7px}.warna-opsi{width:26px;height:26px;border-radius:999px;border:2px solid transparent}.warna-opsi.aktif{border-color:#12172a;transform:scale(1.1)}.nav-periode{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 12px}.nav-periode strong{font-size:14px}.lingkar{width:32px;height:32px;border-radius:999px;border:1px solid var(--garis);background:#fff;font-size:16px;color:#4b5268;line-height:1}.tiga-angka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid #f1f3f9;padding-top:11px}.tiga-angka small{display:block;font-size:10.5px;color:var(--teks-lembut);font-weight:600}.tiga-angka b{font-size:13px;font-variant-numeric:tabular-nums}.insight{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}.insight li{display:flex;flex-direction:column;gap:1px;border-left:3px solid #dcdcfb;padding-left:10px}.insight span{font-size:11.5px;color:var(--teks-lembut)}.insight b{font-size:13px}@media (min-width: 760px){.app{padding:0 20px 40px}.menu-atas{display:flex}.menu-bawah{display:none}.fab{bottom:24px;right:calc(50% - 420px)}.grid-ringkas{gap:12px}.kartu.ringkas{padding:15px}.selisih{font-size:18px}.saldo-besar{font-size:32px}.donut-bungkus{width:168px;flex:0 0 168px}.donut{width:168px;height:168px}.donut-tengah strong{font-size:15px}.toast{bottom:30px}.sheet{border-radius:20px;margin-bottom:5vh}}