:root{ --bg:#f3f5f9; --card:#fff; --ink:#111a2e; --muted:#6b7488; --line:#e6e9f0; --navy:#0b1f4d; --navy2:#1e4a8f; --accent:#1e4a8f; --fab:#0b1f4d; --chip-on:#0b1f4d; --out:#e0772b; --in:#1a8f5c; --save:#6a4fd1; --suami:#1e5bd8; --istri:#d6417a; --r:18px; --danger-bg:#fde8e8; --danger:#b42318; --ok-bg:#e3f6ec; --ok:#146c43; --shadow:0 1px 2px rgba(0,0,0,.04); --top-bg:rgba(243,245,249,.86); color-scheme:light; } /* Tema gelap: mengikuti sistem, kecuali dipilih sendiri di Akun › Tampilan (). */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--bg:#0b0f18;--card:#151b28;--ink:#e9edf5;--muted:#8d97ab;--line:#262f41; --accent:#7fa8ff;--fab:#2f6bff;--chip-on:#2f6bff;--out:#f0924f;--in:#3cc48a;--save:#9b86ff; --danger-bg:#3a1a1c;--danger:#ff8a80;--ok-bg:#12321f;--ok:#6fdc9f; --shadow:none;--top-bg:rgba(11,15,24,.86);color-scheme:dark} } :root[data-theme="dark"]{--bg:#0b0f18;--card:#151b28;--ink:#e9edf5;--muted:#8d97ab;--line:#262f41; --accent:#7fa8ff;--fab:#2f6bff;--chip-on:#2f6bff;--out:#f0924f;--in:#3cc48a;--save:#9b86ff; --danger-bg:#3a1a1c;--danger:#ff8a80;--ok-bg:#12321f;--ok:#6fdc9f; --shadow:none;--top-bg:rgba(11,15,24,.86);color-scheme:dark} [hidden]{display:none!important} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%;overflow-x:clip} html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} body.lock{overflow:hidden} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;touch-action:manipulation} svg.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} #app{max-width:560px;margin:0 auto;padding:0 16px calc(104px + env(safe-area-inset-bottom))} .muted{color:var(--muted)} .card{background:var(--card);border-radius:var(--r);padding:14px 16px;margin:12px 0;box-shadow:var(--shadow)} .card-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px} .link{background:none;border:0;color:var(--accent);font-weight:600;padding:8px 4px;margin:-8px -4px} .big{font-size:26px;font-weight:700} /* header menempel: identitas + pemilih bulan selalu terlihat saat menggulir */ .top{position:sticky;top:0;z-index:4;margin:0 -16px;padding:calc(10px + env(safe-area-inset-top)) 16px 8px; background:var(--top-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .top-row{display:flex;align-items:center;gap:12px} .avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:none} .hello{flex:1;display:flex;flex-direction:column;min-width:0} .hello b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hello small{color:var(--muted);font-size:12.5px} .icon-btn{background:var(--card);border:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--shadow);flex:none} .month{display:flex;align-items:center;justify-content:space-between;margin-top:8px} .month b{font-size:15px} .month-pick{background:none;border:0;font-weight:700;font-size:15px;padding:8px 12px;border-radius:12px;display:inline-flex;align-items:center;gap:6px} .month-pick::after{content:"";width:7px;height:7px;border:solid var(--muted);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)} .month-pick:hover{background:var(--card)} .mp-year{display:flex;align-items:center;justify-content:space-between;margin:4px 0 12px}.mp-year b{font-size:18px}.mp-year .icon-btn{font-size:24px;line-height:1;background:var(--bg)} .mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px} .mp{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:14px 0;font-weight:600} .mp.now{border-color:var(--accent);color:var(--accent)} .mp.on{background:var(--chip-on);border-color:var(--chip-on);color:#fff} .month .icon-btn{width:36px;height:36px} .hero{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:24px;padding:18px 18px 16px;margin-top:6px} .hero-top{display:flex;justify-content:space-between;align-items:center;opacity:.9} .eye{background:rgba(255,255,255,.14);border:0;border-radius:10px;width:36px;height:32px;display:grid;place-items:center;color:#fff} .eye svg.i{width:19px;height:19px} .hero-amt{font-size:clamp(26px,8.5vw,34px);font-weight:800;margin:6px 0 14px;letter-spacing:-.5px;overflow-wrap:anywhere} .hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .hero-grid div{background:rgba(255,255,255,.1);border-radius:12px;padding:8px 10px;min-width:0} .hero-grid small{display:block;opacity:.8;font-size:12px} .hero-grid b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} body.hide .money{filter:blur(7px)} .score-hero{padding-bottom:18px} .score-row{display:flex;align-items:baseline;gap:10px;margin:8px 0 4px;flex-wrap:wrap} .score-num{font-size:46px;font-weight:800;letter-spacing:-1px} .pill{background:rgba(255,255,255,.16);padding:4px 12px;border-radius:20px;font-size:13px;font-weight:700} .score-sub{color:rgba(255,255,255,.82);margin:0} .quick{display:flex;gap:8px;align-items:center;padding:8px} .quick input{flex:1;border:0;background:transparent;padding:10px 8px;outline:0;min-width:0;margin:0} .quick{gap:6px} .qbtn{width:44px;height:44px;border-radius:14px;border:0;background:var(--bg);display:grid;place-items:center;flex:none;color:var(--accent)} .who{display:flex;align-items:center;gap:10px;margin:10px 0} .who .dot{width:10px;height:10px;border-radius:50%;flex:none} .who .nm{flex:1;min-width:0}.who .amt{font-weight:700} .bar{height:10px;border-radius:6px;background:var(--line);overflow:hidden;display:flex} .bar i{display:block;height:100%} .cat{margin:10px 0}.cat-row{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:4px} .cat-row b{text-align:right} .tx{display:flex;align-items:center;gap:12px;padding:10px 6px;margin:0 -6px;border-top:1px solid var(--line);border-radius:12px;cursor:pointer} .tx:first-child{border-top:0} .tx:active{background:var(--bg)} .tx .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:var(--bg);flex:none} .tx .mid{flex:1;min-width:0}.tx .mid b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600} .tx .mid small{color:var(--muted)} .tx .amt{font-weight:700;white-space:nowrap}.amt.keluar{color:var(--out)}.amt.masuk{color:var(--in)}.amt.tabung{color:var(--save)} .tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:8px;color:#fff;margin-left:4px;vertical-align:1px} .day{margin:16px 4px 4px;font-weight:600;color:var(--muted);font-size:13px;display:flex;justify-content:space-between} .empty{text-align:center;color:var(--muted);padding:16px 0} .chips{display:flex;gap:8px;overflow-x:auto;padding:6px 16px;margin:0 -16px;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chip{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:8px 14px;white-space:nowrap;flex:none} .chip.on{background:var(--chip-on);color:#fff;border-color:var(--chip-on)} /* nav bawah: 5 slot seimbang, tombol tambah di tengah */ .bottom{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));width:min(528px,calc(100% - 24px)); background:var(--card);border:1px solid var(--line);border-radius:24px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:6px;box-shadow:0 6px 24px rgba(0,0,0,.14);z-index:5} .nav{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:16px;color:var(--muted);min-height:50px} .nav span{font-size:11.5px;font-weight:600}.nav.on{color:var(--accent);background:var(--bg)} .fab{justify-self:center;width:58px;height:58px;border-radius:50%;border:0;background:var(--fab);color:#fff;display:grid;place-items:center;margin-top:-28px; box-shadow:0 6px 16px rgba(11,31,77,.35),0 0 0 5px var(--bg)} .fab svg.i{width:28px;height:28px;stroke-width:2.4} .fab span,.brand{display:none} .tab{display:none}.tab.active{display:block} .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.2s;z-index:10} .backdrop.on{opacity:1;pointer-events:auto} .sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:var(--card);border-radius:24px 24px 0 0; padding:0 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);visibility:hidden;transition:transform .25s,visibility .25s;z-index:11; max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain} .sheet.on{transform:none;visibility:visible} .sheet.drag{transition:none} .grab{position:sticky;top:0;background:var(--card);padding:10px 0 8px;margin:0 -18px;touch-action:none;z-index:1} .grab::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto} .sheet h3{margin:4px 0 12px} .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .opt{border:0;background:var(--bg);border-radius:16px;padding:16px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:28px} .opt span{font-size:13px;font-weight:600} label{display:block;font-size:13px;color:var(--muted);margin:10px 0} /* 16px mencegah iPhone memperbesar halaman saat kolom diketuk */ input,select,textarea{display:block;width:100%;margin-top:4px;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:11px 12px;outline:0;font-size:16px} input:focus,select:focus,textarea:focus{border-color:var(--accent)} .amount-in{font-size:28px;font-weight:700;text-align:right} .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--bg);border-radius:12px;padding:4px;gap:4px} .seg button{border:0;background:none;border-radius:9px;padding:9px}.seg button.on{background:var(--card);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.1)} .catgrid{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .btn{border:0;border-radius:14px;padding:14px 16px;font-weight:700;background:var(--bg);font-size:15px} .btn.primary{background:var(--fab);color:#fff}.btn.danger{background:var(--danger-bg);color:var(--danger)} .btn.block{display:block;width:100%;margin-top:14px;text-align:center;text-decoration:none} .row{display:flex;gap:8px}.row>*{flex:1;min-width:0} .review{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:8px 0} .review .row input,.review .row select{margin-top:0} .review .x{background:none;border:0;color:var(--danger);font-size:13px;padding:8px 0 2px} .mic{width:110px;height:110px;border-radius:50%;border:0;background:var(--fab);color:#fff;display:grid;place-items:center;margin:10px auto} .mic svg.i{width:46px;height:46px} .mic.rec{background:#d92d20;animation:pulse 1.2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,45,32,.5)}100%{box-shadow:0 0 0 22px rgba(217,45,32,0)}} .meter{height:8px;border-radius:4px;background:var(--line);overflow:hidden;width:180px;margin:4px auto 8px} .meter i{display:block;height:100%;width:0;background:var(--in);transition:width .08s} .heard{background:var(--bg);border-radius:12px;padding:10px 12px;margin:0 0 8px;font-style:italic} /* sumber dana */ .wal{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;border-top:1px solid var(--line);padding:10px 6px;margin:0 -6px;width:calc(100% + 12px);border-radius:12px;text-align:left} .wal:first-child{border-top:0} .wal:active{background:var(--bg)} .wal .ic{width:38px;height:38px;border-radius:12px;background:var(--bg);display:grid;place-items:center;font-size:19px;flex:none} .wal .nm{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-weight:600} .wal .nm .t{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wal .nm i{margin-left:0} .wal b{white-space:nowrap} .wal-actions{margin-top:8px}.wal-actions .btn{padding:11px 12px} .amt.trf{color:var(--muted)} .kc-row .nm small{display:block;color:var(--muted);font-size:12.5px} .wal-pick{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:13px} .wal-pick span{flex:none}.wal-pick select{flex:1} .swap{width:36px;height:36px;margin:2px auto -6px;font-size:18px} .badge-sv,.badge-debt{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:8px;margin-left:6px;vertical-align:1px} .badge-sv{background:color-mix(in srgb,var(--save) 16%,transparent);color:var(--save)} .badge-debt{background:color-mix(in srgb,var(--out) 16%,transparent);color:var(--out)} .wal-sum{font-size:12.5px;padding:8px 0 0;border-top:1px solid var(--line);margin-top:4px} .wal-head{width:100%;background:none;border:0;padding:6px 0;margin:-6px 0 2px;text-align:left;color:inherit;cursor:pointer;border-radius:10px} .wal-head small{font-weight:500} .wal-head .chev{display:inline-block;width:8px;height:8px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg); margin:0 4px 3px 12px;transition:transform .2s} .wal-head[aria-expanded="true"] .chev{transform:rotate(-135deg);margin-bottom:-1px} .wal-closed .wal-sum{border-top:0;padding-top:0;margin-top:0} .wal-sum b{color:var(--ink)}.wal-sum b.sv{color:var(--save)}.wal-sum b.out{color:var(--out)} .wal-actions{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:6px} .wal-actions .btn{font-size:13.5px;padding:11px 6px;white-space:nowrap} .kind-hint{display:block;margin-top:6px;font-size:12.5px} .kc-row .nm small.in{color:var(--in)}.kc-row .nm small.out{color:var(--out)} /* bagi saldo */ .sp-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:var(--bg);border-radius:14px;padding:10px;margin:10px 0;text-align:center;font-size:12px;color:var(--muted)} .sp-sum b{display:block;color:var(--ink);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sp-sum b.out{color:var(--out)} .sp-row{display:flex;align-items:center;gap:10px;margin:0;padding:8px 0;border-top:1px solid var(--line);color:var(--ink);font-size:15px} .sp-row:first-child{border-top:0} .sp-row .ic{width:36px;height:36px;border-radius:10px;background:var(--bg);display:grid;place-items:center;font-size:18px;flex:none} .sp-row .nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sp-row .nm .sub{display:block;font-weight:400;font-size:12px;color:var(--muted)} .sp-row .nm .sub .out{color:var(--out)} .sp-row input{width:130px;flex:none;margin:0} /* profil & avatar */ .avatar{padding:0;border:0;overflow:hidden;background:none;cursor:pointer} .av{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;object-fit:cover} .who-av{width:26px;height:26px;flex:none;font-size:12px} .menu-item>.av{width:32px;height:32px;flex:none;font-size:14px} .prof{display:flex;align-items:center;gap:16px;margin:4px 0 6px} .prof-av{width:96px;height:96px;flex:none;font-size:38px} .prof-btns{display:flex;flex-direction:column;gap:8px;flex:1} .prof-btns .btn{padding:11px 12px} /* tinjau struk/screenshot */ .scan-mode{margin:12px 0 4px}.scan-mode small{display:block;margin-top:6px;font-size:12.5px} .rcpt{border:1px solid var(--line);border-radius:16px;padding:10px 12px;margin:10px 0} .rcpt input,.rcpt select{margin:0;padding:9px 10px} .rcpt .row{margin-top:8px} .rcpt-h{display:flex;gap:6px;align-items:center} .rcpt-h input{font-weight:700;border-color:transparent;background:transparent;padding-left:0} .rcpt-h input:focus{border-color:var(--accent);background:var(--bg);padding-left:10px} .rcpt .x{background:none;border:0;color:var(--danger);width:34px;height:36px;flex:none;font-size:14px;padding:0} .its{margin-top:8px;border-top:1px dashed var(--line)} .it{display:grid;grid-template-columns:minmax(0,1fr) 104px 34px;gap:4px 6px;padding:8px 0;border-bottom:1px dashed var(--line);position:relative} .it .it-cat{grid-column:1 / span 2;font-size:14px;padding:6px 8px;color:var(--muted)} .it .qty{position:absolute;right:40px;top:-2px;font-size:11px;color:var(--muted)} .num{text-align:right;font-weight:600;font-variant-numeric:tabular-nums} .adj{display:grid;grid-template-columns:minmax(0,1fr) 104px 34px;gap:6px;align-items:center;padding:6px 0;font-size:14px;color:var(--muted)} .rcpt-f{display:flex;justify-content:space-between;align-items:baseline;padding-top:8px;margin-top:4px;border-top:1px solid var(--line)} .rcpt-f b{font-size:17px} .warn{background:#fff4e0;color:#8a5300;border-radius:10px;padding:8px 10px;font-size:13px;margin:8px 0 0} .warn .link{margin:0;padding:0;font-size:13px;text-decoration:underline} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .warn{background:#3a2a0d;color:#ffcf7a}} :root[data-theme="dark"] .warn{background:#3a2a0d;color:#ffcf7a} .details{background:var(--bg);border-radius:14px;padding:10px 12px;margin-top:12px;font-size:14px} .details .spin{margin:8px auto;width:24px;height:24px;border-width:3px} .d-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px dashed var(--line)} .d-row:first-of-type{margin-top:6px} .d-row.neg{color:var(--in)}.d-row.tot{border-top:1px solid var(--line);font-weight:700} .opts{grid-template-columns:repeat(2,1fr)} /* infografis alokasi (Insight) */ .alloc-lead{margin:0 0 12px;font-size:14px;color:var(--muted)} .alloc-lead b{color:var(--ink)} .warn-lead{color:var(--out)} .alloc-bar{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden} .aseg{min-width:4px;flex-basis:0;transition:opacity .15s} .alloc-leg{margin-top:10px} .aleg{display:grid;grid-template-columns:12px minmax(0,1fr) auto 40px;align-items:center;gap:10px;padding:7px 4px;border-radius:10px;font-size:14px;transition:opacity .15s;outline:0} .aleg+.aleg{border-top:1px solid var(--line)} .aleg i{width:12px;height:12px;border-radius:4px} .aleg .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .aleg b{white-space:nowrap} .aleg small{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums} .alloc.hl .aseg:not(.on),.alloc.hl .aleg:not(.on){opacity:.3} /* anggaran — status selalu disertai tulisan, warna hanya penegas */ .bud,.bud-sum{padding:9px 0;border-top:1px solid var(--line)} .bud-sum{border-top:0;padding-top:2px} .bud-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;margin-bottom:5px} .bud-h span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bud-h small{color:var(--muted)} .bud .bar,.bud-sum .bar{height:8px} .bud-note{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)} .b-ok .bar i{background:var(--in)} .b-warn .bar i{background:#e0a100}.b-warn .bud-note{color:#9a6c00} .b-over .bar i{background:var(--danger)}.b-over .bud-note{color:var(--danger);font-weight:600} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .b-warn .bar i{background:#fab219}:root:not([data-theme="light"]) .b-warn .bud-note{color:#ffcf7a}} :root[data-theme="dark"] .b-warn .bar i{background:#fab219}:root[data-theme="dark"] .b-warn .bud-note{color:#ffcf7a} .bud-total{grid-template-columns:1fr 1fr} .bd-row .nm{white-space:normal} .rec-t{display:inline-block;margin-top:5px;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:12px;padding:3px 9px;font-size:12px;font-weight:600} .rec-t.on{border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)} .once{font-style:normal;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:0 6px;margin-left:4px} .check{display:flex;gap:10px;align-items:flex-start;color:var(--ink);margin:8px 0} .check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent)} .check small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px} .phrase{color:var(--danger);letter-spacing:.5px} .btn:disabled{opacity:.45} .toast{white-space:pre-line} /* pie chart (donat) */ .donut{position:relative;width:200px;height:200px;margin:4px auto 6px} .donut svg{width:100%;height:100%;display:block;overflow:visible} .donut .aseg{transition:opacity .15s,stroke-width .15s;cursor:pointer} .donut .aseg.on{stroke-width:44} .slice-lbl{font-size:13px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none;font-variant-numeric:tabular-nums} .donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center} .donut-c small{color:var(--muted);font-size:12px} .donut-c b{font-size:17px} #allocOut,#allocIn{container-type:inline-size} @container (min-width:460px){.donut-wrap{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:center}.donut{width:190px;height:190px;margin:0}.donut-wrap .alloc-leg{margin-top:0}} .aleg.on{background:var(--bg)} /* riwayat: satu baris alat + ringkasan filter aktif */ .hist-bar{display:flex;align-items:center;gap:8px;margin:10px 0 6px} .hist-bar .view-seg{flex:1;margin:0;max-width:260px} .filter-btn{margin-left:auto;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:9px 14px;font-weight:600;color:var(--ink)} .filter-btn svg.i{width:18px;height:18px} .filter-btn.on{border-color:var(--accent);color:var(--accent)} .filter-btn i{font-style:normal;background:var(--accent);color:#fff;border-radius:9px;min-width:18px;height:18px;font-size:11.5px;display:grid;place-items:center;padding:0 5px} .hist-sum{display:flex;align-items:center;gap:8px;margin:2px 2px 4px;font-size:13.5px} .active-filters{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none} .active-filters::-webkit-scrollbar{display:none} .pill-f{flex:none;border:0;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-radius:14px;padding:5px 10px;font-size:12.5px;font-weight:600;white-space:nowrap} .pill-f span{opacity:.7;margin-left:2px} .hist-total{flex:none;white-space:nowrap} .hist-total b{font-size:15px} .f-group{margin:6px 0 14px} .f-group>b{display:block;font-size:13px;color:var(--muted);margin-bottom:6px} .f-chips{display:flex;flex-wrap:wrap;gap:6px} /* kalender */ .view-seg{grid-template-columns:1fr 1fr;margin:10px 0 4px} .cal{padding:10px 8px 8px} .cal-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;padding:2px 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line)} .cal-sum small{color:var(--muted);font-size:11.5px} .cal-sum b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .in{color:var(--in)}.out{color:var(--out)}.sv{color:var(--save)} .cal-h,.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px} .cal-h span{text-align:center;font-size:11.5px;font-weight:600;color:var(--muted);padding:4px 0} .cal-h span:last-child,.cd.sun .n{color:#d64545} .cd{border:0;background:none;border-radius:10px;min-height:58px;padding:4px 1px 5px;min-width:0;overflow:hidden; display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10.5px;line-height:1.25;font-weight:600} .cd.blank{visibility:hidden} .cd .n{font-size:13px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;margin-bottom:1px} .cd>span:not(.n){max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cd .dot{width:5px;height:5px;border-radius:50%;background:var(--save);margin-top:1px} .cd.has{background:color-mix(in srgb,var(--bg) 60%,transparent)} .cd.today .n{background:var(--chip-on);color:#fff} .cd.sel{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--accent)} .cd:active{background:var(--bg)} #calDay .btn{margin-top:10px} /* kategori */ .chip.add{border-style:dashed;color:var(--accent)} .newcat{display:flex;gap:6px;flex:1 1 100%} .newcat input{margin:0;padding:8px 12px} .kc-list{margin:10px 0} .kc-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line)} .kc-row:first-child{border-top:0} .kc-row .ic{width:36px;height:36px;border-radius:10px;background:var(--bg);display:grid;place-items:center;font-size:18px;flex:none} .kc-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kc-row .link{margin:0;padding:8px} .kc-del{border:0;background:none;color:var(--danger);width:36px;height:36px;border-radius:10px;font-size:15px} .kc-form{background:var(--bg);border-radius:16px;padding:12px;margin-top:6px} .kc-form input{background:var(--card)} .kc-form .btn{margin-top:10px}.kc-form .btn:not(.primary){background:var(--card)} .emoji-in{flex:0 0 58px!important;text-align:center;font-size:22px;padding:8px 4px;margin:0} .kc-form .row input{margin:0} .emojis{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px} .emojis button{border:0;background:var(--card);border-radius:10px;width:38px;height:38px;font-size:19px;padding:0} .center{text-align:center} .spin{width:36px;height:36px;border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp 1s linear infinite;margin:18px auto} @keyframes sp{to{transform:rotate(360deg)}} .menu-item{display:flex;align-items:center;gap:12px;width:100%;background:var(--bg);border:0;border-radius:14px;padding:14px;margin:8px 0;text-align:left;font-weight:600;text-decoration:none;color:inherit} .menu-item small{display:block;font-weight:400;color:var(--muted)} .menu-item.danger{color:var(--danger)} .toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:#111a2e;color:#fff;padding:10px 16px;border-radius:12px;opacity:0;transition:.2s;z-index:20;max-width:90%;pointer-events:none;text-align:center} .toast.on{opacity:1;transform:translateX(-50%)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toast{background:#e9edf5;color:#111a2e}} :root[data-theme="dark"] .toast{background:#e9edf5;color:#111a2e} /* toast bertombol (Urungkan): bisa diketuk, teks & tombol sebaris */ .toast.act{pointer-events:auto;display:flex;align-items:center;gap:14px;text-align:left;padding:6px 8px 6px 16px} .toast-act{background:none;border:0;color:#9dbcff;font-weight:700;padding:8px 10px;border-radius:8px;flex:none} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toast-act{color:#1e4a8f}} :root[data-theme="dark"] .toast-act{color:#1e4a8f} /* sering dicatat: satu baris chip yang bisa digeser */ .favs{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:2px 16px 4px;margin:-2px -16px 0;scrollbar-width:none} .favs::-webkit-scrollbar{display:none} .favs>small{flex:none;font-size:12.5px} .chip.fav{padding:7px 12px;font-size:14px} .chip.fav b{font-weight:600;color:var(--muted);margin-left:2px} .chip.fav:disabled{opacity:.5} .kc-wal{display:block;font-size:12.5px} /* form catat berbentuk daftar */ .fl{background:var(--bg);border-radius:16px;margin:12px 0;overflow:hidden} .fl-row{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:12px 14px;min-height:54px;border:0;border-top:1px solid var(--line); background:none;color:var(--ink);font-size:15px;text-align:left} .fl>.fl-row:first-child{border-top:0} .fl-row>span{flex:none;width:104px;color:var(--muted);font-size:14px} .fl-row input:not([type=checkbox]),.fl-row select{flex:1;min-width:0;width:auto;margin:0;border:0;background:none;padding:0;text-align:right;font-size:15px;border-radius:0} .fl-amt>i{font-style:normal;color:var(--muted);font-weight:600;font-size:13px;background:var(--card);border-radius:14px;padding:4px 10px;flex:none} .fl-row.fl-amt .amount-in{font-size:22px;font-weight:800;text-align:left} .fl-pick{cursor:pointer} .fl-pick b{flex:1;min-width:0;text-align:right;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chev-r{flex:none;width:8px;height:8px;border:solid var(--muted);border-width:2px 2px 0 0;transform:rotate(45deg);margin-right:2px} .fl-check{justify-content:space-between;cursor:pointer}.fl-check>span{width:auto} .fl-check input{width:22px;height:22px;margin:0;accent-color:var(--accent)} .fl-sub{padding:0 14px 12px}.fl-sub select{margin:0}.fl-sub .seg{margin:0}.fl-sub small{display:block;margin-top:6px;font-size:12.5px} .fl-note input{text-align:left!important} /* pemilih daftar di dalam sheet */ #sheetBody[data-picking]>:not(.picker){display:none!important} .pk-h{display:flex;align-items:center;gap:10px;margin:0 0 10px}.pk-h b{font-size:17px} .pk-h .icon-btn{font-size:24px;line-height:1;background:var(--bg)} .pk-search{margin:0 0 6px} .pk-add{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:10px 4px;color:var(--danger);font-weight:600;font-size:15px;text-align:left} .pk-add .ic,.pk-item .ic{width:42px;height:42px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:20px;flex:none} .pk-add .ic{background:var(--danger);color:#fff;font-size:22px} .pk-new{display:flex;gap:8px;margin:0 0 8px}.pk-new input{margin:0}.pk-new .btn{flex:none;margin:0} .pk-item{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;border-top:1px solid var(--line);padding:9px 4px; text-align:left;color:var(--ink);font-size:15.5px;cursor:pointer} .pk-list>.pk-item:first-child{border-top:0} .pk-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .pk-item small{display:block;color:var(--muted);font-size:12.5px} .pk-item>b{white-space:nowrap;font-size:14px} .pk-item.on .nm{font-weight:700} .pk-check{font-style:normal;color:var(--accent);font-weight:800;margin-left:4px} @media (hover:hover){.pk-item:hover,.fl-pick:hover{background:var(--bg)}.fl .fl-pick:hover{background:var(--line)}} /* jalan ke target & advisor */ .nw .bar{margin:8px 0 4px} .nw-list{margin:10px 0 4px;font-size:14px} .nw-list>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;border-top:1px solid var(--line)} .nw-list>div:first-child{border-top:0} .nw-list span{min-width:0}.nw-list small{display:block;font-size:11.5px} .nw-list b{white-space:nowrap} .nw-list .nw-use{color:var(--muted)}.nw-list .nw-use b{font-weight:600} .nw-list .nw-total{font-size:13px;color:var(--muted)}.nw-list .nw-total b{color:var(--ink)} .nw-parts{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 4px;font-size:13.5px;color:var(--muted)} .nw-parts b{color:var(--ink);margin-left:3px} .plan-hint{background:var(--bg);border-radius:12px;padding:10px 12px;font-size:13.5px;margin:10px 0} .plan-hint .link{margin:0;padding:0} .plan-line{font-size:14px;margin:10px 0} .plan-note{display:block;font-size:12px;margin-top:10px} .proj{position:relative;margin:6px 0 2px} .proj svg{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y} .proj .grid{stroke:var(--line);stroke-width:1} .proj .tgt{stroke:var(--ink);stroke-width:1;opacity:.45} .proj .cross{stroke:var(--muted);stroke-width:1} .proj .ax{fill:var(--muted);font-size:10px;text-anchor:end;dominant-baseline:central} .proj .ax.x{text-anchor:middle} .proj .tgt-t{fill:var(--ink);font-weight:700} .proj-tip{position:absolute;top:-6px;width:170px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px; font-size:12px;box-shadow:0 4px 16px rgba(0,0,0,.12);pointer-events:none;z-index:2} .proj-tip>b{display:block;margin-bottom:4px} .proj-tip span{display:grid;grid-template-columns:10px 1fr auto;gap:6px;align-items:center;color:var(--muted)} .proj-tip span b{color:var(--ink)} .proj-tip i,.scen-row i{width:10px;height:3px;border-radius:2px} .scen{margin:4px 0 8px} .scen-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto 38px;gap:8px;align-items:center;padding:7px 4px;font-size:14px;border-radius:10px} .scen-row+.scen-row{border-top:1px solid var(--line)} .scen-row i{width:12px} .scen-row small{text-align:right;font-variant-numeric:tabular-nums} .scen-row.mine{background:var(--bg)} .scen-row em{font-style:normal;font-size:11px;color:var(--accent);font-weight:700;margin-left:2px} .extra{color:var(--ink);font-size:13.5px;margin:12px 0 4px} .extra input[type=range]{padding:0;border:0;background:none;accent-color:var(--accent);margin-top:8px} .adv-sum{margin:0 0 12px;font-size:14.5px} .adv-h{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px} .adv-steps{margin:0;padding:0;list-style:none;counter-reset:s} .adv-steps li{counter-increment:s;position:relative;background:var(--bg);border-radius:14px;padding:10px 12px 10px 44px;margin:8px 0} .adv-steps li::before{content:counter(s);position:absolute;left:12px;top:10px;width:22px;height:22px;border-radius:50%;background:var(--chip-on); color:#fff;font-size:12.5px;font-weight:700;display:grid;place-items:center} .adv-steps p{margin:4px 0;font-size:14px} .adv-steps small{color:var(--in);font-size:13px;font-weight:600} .adv-list{margin:0;padding-left:18px;font-size:14px}.adv-list li{margin:6px 0} .adv-warn{background:var(--danger-bg);color:var(--danger);border-radius:12px;padding:4px 12px;margin:12px 0;font-size:13.5px} .f-sec{border-top:1px solid var(--line);padding-top:10px;margin-top:12px} .f-sec>b{display:block;font-size:14px} .kid{background:var(--bg);border-radius:14px;padding:8px 12px 12px;margin:8px 0} .kid-h{display:flex;align-items:center;justify-content:space-between} .kid-h b{font-size:13.5px} .kid input{background:var(--card)} .kid .seg{margin:8px 0 0} textarea{resize:vertical;min-height:70px} .theme-row{flex-wrap:wrap;cursor:default}.theme-row>span{flex:1} .theme-row .seg{flex:1 1 100%;margin:4px 0 0} /* pencarian riwayat & baris yang membuka Riwayat per kategori */ .hist-search{background:var(--card);margin:0 0 6px} .go{cursor:pointer;border-radius:10px} .go:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .aleg.go{grid-template-columns:12px minmax(0,1fr) auto 40px 10px} .aleg.go::after{content:"›";color:var(--muted);font-size:18px;line-height:1} @media (hover:hover){.cat.go:hover,.bud.go:hover{background:var(--bg)}} /* tagihan & transaksi rutin */ .bill{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)} .bill:first-child{border-top:0;padding-top:2px} .bill .ic{width:36px;height:36px;border-radius:12px;background:var(--bg);display:grid;place-items:center;font-size:18px} .bill .mid{min-width:0}.bill .mid b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bill .mid small{display:block;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bill .mid .due{color:var(--ink);font-weight:600}.bill .mid .late{color:var(--danger)}.bill .mid .soon{color:var(--out)} .bill-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px} .btn.sm{padding:7px 16px;font-size:14px;border-radius:10px;min-height:0} .rc-row{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-top:1px solid var(--line);padding:11px 0;text-align:left} .rc-row:first-child{border-top:0} .rc-row .ic{width:36px;height:36px;border-radius:12px;background:var(--bg);display:grid;place-items:center;font-size:18px;flex:none} .rc-row .nm{flex:1;min-width:0}.rc-row .nm small{display:block;font-size:12.5px} .rc-row>b{flex:none} .closing{border:1px solid color-mix(in srgb,var(--in) 35%,transparent)} .closing p{margin:0 0 10px} .info-btn{background:rgba(255,255,255,.18);border:0;color:#fff;border-radius:50%;width:22px;height:22px;font-size:12.5px;font-weight:700;padding:0;margin-left:4px;vertical-align:1px} /* auth */ body.auth{display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:16px} .auth-card{width:100%;max-width:400px} .auth-card h1{margin:6px 0 2px} .logo{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;font-weight:800;font-size:28px;display:grid;place-items:center} .alert{background:var(--danger-bg);color:var(--danger);padding:10px 12px;border-radius:12px;margin:10px 0} .alert.ok{background:var(--ok-bg);color:var(--ok)} /* ===== tablet ke atas (≥640px): isi dua kolom, header satu baris, lembar isian jadi dialog di tengah ===== Navigasi tetap di bawah (nyaman untuk jempol di tablet tegak); mulai 900px navigasi pindah ke samping. */ @media (min-width:640px){ #app{max-width:1120px;padding:0 24px calc(112px + env(safe-area-inset-bottom))} .top{margin:0 -24px;padding:calc(14px + env(safe-area-inset-top)) 24px 12px;display:flex;align-items:center;justify-content:space-between;gap:16px} .top .month{margin:0;gap:10px} .month b,.month-pick{min-width:150px;justify-content:center;text-align:center;font-size:16px} .hero-amt{font-size:36px} .tab.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px;align-items:start} #tab-history.active{grid-template-columns:minmax(0,1fr);max-width:820px;margin:0 auto} .col>.hero:first-child,.col>.card:first-child,.col>div:first-child>.day:first-child{margin-top:12px} .cd{min-height:78px;font-size:12px;padding-top:6px}.cd .n{font-size:14px;width:28px;height:28px} .hist-bar{margin-top:14px} .sheet{top:50%;bottom:auto;left:50%;right:auto;width:min(560px,calc(100vw - 48px));margin:0;border-radius:24px; transform:translate(-50%,-47%);opacity:0;transition:transform .2s,opacity .2s,visibility .2s;max-height:86vh;padding-bottom:22px} .sheet.on{transform:translate(-50%,-50%);opacity:1} .grab{padding:8px 0 4px;pointer-events:none}.grab::before{display:none} } /* ===== layar lebar (tablet mendatar, laptop, desktop ≥900px): navigasi jadi sidebar ===== */ @media (min-width:900px){ body{padding-left:248px} #app{padding:0 32px 40px} .top{margin:0 -32px;padding:16px 32px 12px} .hero-amt{font-size:40px} .tab.active{gap:0 24px} #tab-history.active{max-width:860px;margin:0} .cd{min-height:86px} .bottom{left:0;top:0;bottom:0;transform:none;width:248px;border:0;border-right:1px solid var(--line);border-radius:0; display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:20px 14px;box-shadow:none} .brand{display:flex;align-items:center;gap:10px;padding:0 8px 20px;font-size:18px} .brand .logo{width:36px;height:36px;border-radius:10px;font-size:18px} .fab{order:1;width:100%;height:48px;border-radius:14px;margin:0 0 16px;display:flex;justify-content:center;gap:8px;box-shadow:none;font-weight:700} .fab svg.i{width:20px;height:20px} .fab span{display:inline} .nav{order:2;flex-direction:row;justify-content:flex-start;gap:12px;padding:11px 12px;min-height:0;border-radius:12px} .nav span{font-size:14.5px} .nav:hover{background:var(--bg)} #btnMenu{order:3;margin-top:auto} .tx:hover{background:var(--bg)} .cd:not(.blank):hover{background:var(--bg)} .toast{bottom:28px;left:calc(50% + 124px)} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* atur urutan */ .kc-tools{display:flex;justify-content:flex-end;margin:0 0 2px}.kc-tools .link{margin:0;padding:6px 2px} .od-btn{width:40px;height:36px;border:1px solid var(--line);background:var(--card);border-radius:10px;font-size:13px;color:var(--ink);flex:none} .od-btn:disabled{opacity:.3} /* cadangan */ .bk-file{display:block;text-align:center;cursor:pointer;margin:8px 0 0} .bk-prev{background:var(--bg);border-radius:14px;padding:12px;margin:10px 0} .bk-prev>b{display:block}.bk-prev>small{display:block;font-size:12.5px}.bk-prev p{font-size:14px;margin:8px 0} .kc-row a.link{margin:0;padding:8px;text-decoration:none} /* hutang & piutang */ .debt{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)} .debt:first-child{border-top:0;padding-top:2px} .debt .ic{width:38px;height:38px;border-radius:12px;background:var(--bg);display:grid;place-items:center;font-size:19px} .debt .nm{min-width:0}.debt .nm>b{font-weight:600}.debt .nm i[class^="badge"]{margin-left:6px} .debt .nm small{display:block;color:var(--muted);font-size:12.5px} .debt .nm .bar{display:block;margin-top:6px;height:5px} .debt-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px} .fl-check>span small{display:block;font-size:12px} .fl-seg{flex-wrap:wrap}.fl-seg .seg{flex:1 1 100%;margin:6px 0 0} /* dana titipan */ .badge-fund{font-style:normal;font-size:11px;font-weight:700;padding:1px 7px;border-radius:8px;margin-left:6px;background:color-mix(in srgb,#b7791f 18%,transparent);color:#b7791f} #fundActions{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}