:root{
  /* ===== design tokens baru (design-reference/amplop-redesign-v2.html) ===== */
  --ink:#1D2338; --ink-soft:#2B3352;
  --paper:#F6F3EC; --card:#FFFFFF; --line:#E9E3D6; --muted:#8A8577; --text:#2A2A26;
  --brass:#A97E3F; --brass-bright:#C9A05B; --brass-soft:#F1E7D4;
  --sage:#3E7256; --sage-soft:#E7F0EA;
  --clay:#B2503F; --clay-soft:#F7E9E5;
  --radius:18px;
  --shadow:0 1px 2px rgba(29,35,56,.05), 0 8px 24px -12px rgba(29,35,56,.12);
  --shadow-lg:0 2px 4px rgba(29,35,56,.06), 0 20px 48px -20px rgba(29,35,56,.25);

  /* ===== token lama, dipertahankan sementara untuk komponen yang belum
     direstyle di tahap berjalan — akan dibersihkan tahap demi tahap ===== */
  --bg:var(--paper); --primary:#3A4FA0; --deep:#232F66;
  --kraft:#C9822E; --kraft-soft:#F6E7D2;
  --green:#2E9E6B; --green-soft:#E2F3EA;
  --red:#D14B44; --red-soft:#FAE8E6;
  --r:16px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
body{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  background:var(--paper); color:var(--text); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(78px + env(safe-area-inset-bottom));
}
h1,h2,h3,.disp{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-weight:600; letter-spacing:-.015em}
.serif{font-family:'Poppins',system-ui,-apple-system,sans-serif}
.num{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* ===== logo (dipakai di sidebar & topbar mobile) ===== */
.logo-mark{width:30px; height:23px; border-radius:6px; position:relative; flex:none;
  background:linear-gradient(160deg,#F3EDDF,#E4DAC2); box-shadow:inset 0 0 0 1px rgba(29,35,56,.15)}
.logo-mark::before{content:''; position:absolute; inset:0; clip-path:polygon(0 0,100% 0,50% 62%);
  background:linear-gradient(180deg,var(--brass-bright),var(--brass)); border-radius:6px 6px 0 0}
.logo-name{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-weight:700; font-size:18px; color:var(--ink)}
.logo-name em{font-style:normal; color:var(--brass)}
.logo-row{display:flex; align-items:center; gap:9px}

/* ===== app shell ===== */
.app{display:block}
.sidebar{display:none}
.gear{background:rgba(255,255,255,.13); border:none; color:#fff; width:36px; height:36px;
  border-radius:50%; font-size:16px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; line-height:1; padding:0}
.gear svg{width:18px; height:18px}

.main{max-width:560px; margin:0 auto; padding:16px 16px 24px}
.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,var(--paper) 78%,rgba(246,243,236,0)); margin:-16px -16px 14px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 10px}
.m-logo{display:flex; flex:none}
.period{position:relative; flex:1; min-width:64px}
.period-compact{display:flex; align-items:center; gap:7px; width:100%; background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:9px 12px; box-shadow:var(--shadow); font-weight:700; font-size:12.5px; color:var(--ink); cursor:pointer}
.period-compact .cal{width:15px; height:15px; flex:none; stroke:var(--muted)}
.period-compact span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center}
.period-compact .chev{width:13px; height:13px; flex:none; stroke:var(--muted); transition:transform .15s}
.period.open .period-compact .chev{transform:rotate(180deg)}
.period-inline{display:none; align-items:center; gap:2px; position:absolute; top:calc(100% + 8px); left:0; z-index:30;
  width:max-content; min-width:220px; max-width:min(300px, calc(100vw - 32px));
  background:var(--card); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-lg); padding:5px}
.period.open .period-inline{display:flex}
.period-inline button{width:34px; height:34px; border-radius:50%; border:none; background:transparent; color:var(--muted);
  cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; flex:none}
.period-inline button:hover{background:var(--paper)}
.period-inline .label{font-weight:700; font-size:13px; padding:0 4px; color:var(--ink); white-space:nowrap;
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:center}
.m-gear{display:flex; width:38px; height:38px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); cursor:pointer; align-items:center; justify-content:center;
  box-shadow:var(--shadow); flex:none; padding:0}
.m-gear svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

.page{display:none}
.page.active{display:block; animation:fade .18s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}

/* ===== mobile bottom nav + FAB ===== */
.bottom-nav{position:fixed; left:12px; right:12px; bottom:12px; z-index:50; display:flex;
  background:rgba(29,35,56,.94); backdrop-filter:blur(12px); border-radius:20px; padding:8px;
  box-shadow:0 16px 40px -12px rgba(29,35,56,.5)}
.bnav-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; background:transparent;
  border:none; color:#9BA0B8; font-weight:700; font-size:10px; padding:8px 4px; border-radius:14px; cursor:pointer}
.bnav-item svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.bnav-item.active{color:#E4C88F; background:rgba(201,160,91,.14)}
.fab{position:fixed; right:20px; bottom:88px; z-index:50; width:56px; height:56px; border-radius:18px;
  border:none; cursor:pointer; background:linear-gradient(180deg,var(--brass-bright),var(--brass)); color:#241A08;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(169,126,63,.75), inset 0 1px 0 rgba(255,255,255,.35)}
.fab svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round}

/* hero */
.hero{position:relative; overflow:hidden; background:linear-gradient(150deg,#232A47 0%,var(--ink) 55%,#181D30 100%);
  border-radius:20px; padding:26px 22px 24px; color:#F6F3EC; box-shadow:var(--shadow-lg); margin-bottom:14px}
.hero::before{content:''; position:absolute; top:-1px; right:-40px; width:340px; height:230px;
  background:linear-gradient(180deg,rgba(201,160,91,.16),rgba(201,160,91,0));
  clip-path:polygon(0 0,100% 0,50% 78%); pointer-events:none}
.hero .eyebrow{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#9BA0B8; margin-bottom:10px}
.hero .amount{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-weight:600; font-size:clamp(32px,8vw,52px); letter-spacing:-.02em; line-height:1.05}
.hero .amount span{font-size:.55em; color:#9BA0B8; font-weight:500; margin-right:6px}
.hero-amount-row{display:flex; align-items:center; gap:10px}
.balance-eye{border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#F6F3EC;
  width:26px; height:26px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:0; flex:none}
.balance-eye svg{width:13px; height:13px}
.balance-eye.on-light{background:var(--card); border-color:var(--line); color:var(--ink); box-shadow:var(--shadow)}
.hero-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; font-size:12.5px;
  font-weight:600; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:#D8D4C6}
.chip.gold{background:rgba(201,160,91,.16); border-color:rgba(201,160,91,.35); color:#E4C88F}
.chip b{color:#fff; font-weight:700}
.hero-stats{display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:20px;
  background:rgba(255,255,255,.1); border-radius:16px; overflow:hidden}
.hero-stat{background:rgba(255,255,255,.05); padding:13px 16px}
.hero-stat .k{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9BA0B8;
  display:flex; align-items:center; gap:7px}
.hero-stat .k i{width:8px; height:8px; border-radius:50%; flex:none; display:inline-block}
.hero-stat.in .k i{background:#6FB08D}
.hero-stat.out .k i{background:#D08A7C}
.hero-stat .v{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-size:18px; font-weight:600; margin-top:4px}
.hero-stat.in .v{color:#A9D3BC}
.hero-stat.out .v{color:#E8B7AC}

h2.section{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-weight:600; font-size:18px; color:var(--ink);
  margin:22px 0 12px; display:flex; align-items:baseline; justify-content:space-between; gap:12px}
h2.section:first-child{margin-top:0}
h2.section .link{font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; color:var(--brass);
  text-decoration:none; background:none; border:none; cursor:pointer; padding:0}
h2.section .link:hover{text-decoration:underline}
h2.section .section-sub{font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:600; color:var(--muted)}

.stat-toggle-row{display:flex; justify-content:center; margin-bottom:14px}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:14px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.stat .k{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.stat .v{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-size:20px; font-weight:600; color:var(--ink); margin-top:6px; letter-spacing:-.01em}
.stat .v.pos{color:var(--sage)}
.stat .v.neg{color:var(--clay)}
.card{background:var(--card); border-radius:var(--r); padding:16px; box-shadow:var(--shadow); margin-bottom:14px}
.card h2{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-weight:600; font-size:16.5px; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.card h2 small{font-family:'Poppins',sans-serif; font-weight:600; color:var(--muted); font-size:12px}
details.card summary{cursor:pointer; list-style:none; font-family:'Poppins',system-ui,-apple-system,sans-serif; font-weight:600; font-size:16.5px; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center}
details.card summary::-webkit-details-marker{display:none}
details.card summary::after{content:'▾'; color:var(--muted); font-size:12px; font-weight:700}
details.card[open] summary{margin-bottom:12px}
details.card hr{border:none; border-top:1px solid var(--line); margin:16px 0}
.sub-h{font-size:13.5px; font-weight:800; margin-bottom:8px}

/* ===== Pengaturan: grid 2 kolom ===== */
.set-grid{display:grid; grid-template-columns:1fr; gap:16px; align-items:start}
.acct{display:flex; align-items:center; justify-content:space-between; gap:12px}
.acct .who b{display:block; font-size:14.5px; color:var(--ink)}
.acct .who span{font-size:12.5px; color:var(--muted)}
.btn-out{border:1px solid var(--line); background:var(--card); color:var(--clay); font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:11px; cursor:pointer}
.btn-out:hover{background:var(--clay-soft); border-color:#E7C7BF}
.preset{display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:1px solid var(--line);
  background:var(--paper); border-radius:13px; padding:13px 16px; font-weight:700; font-size:14px; color:var(--ink); cursor:pointer}
.preset:hover{background:var(--brass-soft); border-color:#E0CFA9}
.preset + .preset{margin-top:8px}

/* ===== signature: envelope cards ===== */
.env-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.env-card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:46px 15px 16px; box-shadow:var(--shadow); overflow:hidden; cursor:pointer; transition:transform .18s, box-shadow .18s}
.env-flap{position:absolute; top:0; left:0; right:0; height:40px; background:linear-gradient(180deg,#F0EADC,#E7DFCB);
  border-bottom:1px solid var(--line)}
.env-flap::after{content:''; position:absolute; inset:0; clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(180deg,#EBE2CE,#DFD3B6); filter:drop-shadow(0 1px 1px rgba(29,35,56,.08))}
.env-seal{position:absolute; top:26px; left:50%; transform:translateX(-50%); width:26px; height:26px; border-radius:50%;
  z-index:2; background:radial-gradient(circle at 35% 30%,#D3AC66,#A97E3F 70%);
  box-shadow:0 2px 5px rgba(122,90,43,.4), inset 0 1px 2px rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center; font-size:12px}
.env-card.over .env-seal{background:radial-gradient(circle at 35% 30%,#D08A7C,#B2503F 70%)}
.env-name{font-weight:700; font-size:14.5px; color:var(--ink); display:flex; align-items:center; gap:7px;
  margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.env-left{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-.01em}
.env-left.neg{color:var(--clay)}
.env-of{font-size:12px; color:var(--muted); margin-top:1px}
.meter{height:6px; border-radius:99px; background:#EFEADD; margin-top:14px; overflow:hidden}
.meter i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brass-bright),var(--brass))}
.meter i.low{background:linear-gradient(90deg,#D9B679,var(--brass-bright))}
.meter i.full{background:linear-gradient(90deg,#D08A7C,var(--clay))}
.env-foot{display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:11.5px;
  font-weight:600; color:var(--muted)}
.env-foot .pct{color:var(--brass)}
.env-card.over .env-foot .pct{color:var(--clay)}

.bar{height:7px; background:var(--paper); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--primary); border-radius:99px; transition:width .4s ease}
.bar i.warn{background:var(--kraft)} .bar i.over{background:var(--red)}
/* ===== Cicilan: ringkasan beban & kartu pinjaman ===== */
.loan-sum{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.loan-sum .t b{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-size:22px; color:var(--ink)}
.loan-sum .t span{font-size:12.5px; color:var(--muted); display:block}
.loan-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px}
.loan-card{padding:22px 24px; margin-bottom:0; cursor:pointer}
.loan-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:4px}
.loan-head b{font-size:16px; color:var(--ink)}
.loan-head .sub{font-size:12.5px; color:var(--muted)}
.loan-meta{display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; color:var(--muted); margin-top:10px}
.loan-meta b{font-family:'Poppins',system-ui,-apple-system,sans-serif; color:var(--ink); font-size:14px}
.strip{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:11px 14px; margin-bottom:10px; box-shadow:var(--shadow)}
.strip .ic{font-size:19px; flex-shrink:0}
.strip .txt{flex:1; min-width:0; font-size:13.5px; font-weight:700}
.strip .txt small{display:block; font-weight:500; color:var(--muted); font-size:11.5px; margin-top:1px}
.usage{display:flex; flex-direction:column; gap:12px}
.usage .row .top{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px}
.usage .row .top .cat{font-weight:700}
.usage .row .top .amt{color:var(--muted); font-weight:600}

/* bills */
.bill-row{display:flex; align-items:center; gap:14px; padding:14px 0}
.bill-row + .bill-row{border-top:1px solid var(--line)}
.date-badge{width:42px; height:46px; border-radius:12px; flex:none; background:var(--paper); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center}
.date-badge b{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-size:16px; color:var(--ink); line-height:1}
.date-badge span{font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--muted); margin-top:2px; text-transform:uppercase}
.bill-info{flex:1; min-width:0}
.bill-info b{font-size:14px; color:var(--ink)}
.bill-info .sub{font-size:12px; color:var(--muted); margin-top:1px}
.bill-row.paid{opacity:.6}
.bill-row.late .date-badge{background:var(--clay-soft); border-color:transparent}
.bill-row.late .date-badge b, .bill-row.late .date-badge span{color:var(--clay)}
.tag{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:5px 11px;
  border-radius:999px; white-space:nowrap; flex:none}
.tag.paid{background:var(--sage-soft); color:var(--sage)}
.tag.due{background:var(--brass-soft); color:var(--brass)}
.tag.late{background:var(--clay-soft); color:var(--clay)}
/* FITUR: TABUNGAN TUJUAN — belum siap go-live, sengaja dikomentari seluruhnya
.tag.ok{background:var(--sage-soft); color:var(--sage)}
.tag.warn{background:var(--clay-soft); color:var(--clay)}

.fund-card{cursor:pointer}
.fund-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px}
.fund-name{display:flex; align-items:center; gap:8px; font-family:'Poppins',system-ui,-apple-system,sans-serif; font-weight:600; font-size:14px; color:var(--ink)}
.fund-ic{font-size:17px}
.fund-pct{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-weight:600; font-size:13px; color:var(--brass)}
.fund-bar i{background:linear-gradient(90deg,var(--brass-bright),var(--brass))}
.fund-nom{display:flex; align-items:baseline; gap:8px; margin-top:10px}
.fund-nom b{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-size:16px; color:var(--ink)}
.fund-nom span{font-size:12.5px; color:var(--muted)}
.fund-actions{display:flex; gap:8px; margin-top:14px}
.fund-card--open{border:1.5px dashed rgba(58,79,160,.35); background:rgba(58,79,160,.04)}
.fund-card--open .fund-head{margin-bottom:0}
*/

/* transactions */
.search{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:12px 16px; box-shadow:var(--shadow); margin-bottom:14px}
.search svg{width:17px; height:17px; stroke:var(--muted); fill:none; stroke-width:2; flex:none}
.search input{border:none; outline:none; background:transparent; font:inherit; color:var(--text); width:100%}
.search input::placeholder{color:var(--muted)}
.filters{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; overflow-x:auto; scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filter{border:1px solid var(--line); background:var(--card); color:var(--muted); font-weight:700; font-size:13px;
  padding:8px 16px; border-radius:999px; cursor:pointer; flex-shrink:0}
.filter.active{background:var(--ink); border-color:var(--ink); color:#F6F3EC}
.tx-mini-filter{-webkit-appearance:none; appearance:none; border:1px solid var(--line); background:var(--card);
  color:var(--ink); font:inherit; font-weight:700; font-size:13px; padding:8px 14px; border-radius:999px;
  cursor:pointer; box-shadow:var(--shadow)}
select.tx-mini-filter{padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8577' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center}
.tx-mini-filter:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 4px rgba(169,126,63,.12)}
.tx-day{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:22px 4px 8px}
.tx-day:first-of-type{margin-top:4px}
.tx-row{display:flex; align-items:center; gap:14px; padding:14px 20px}
.tx-row + .tx-row{border-top:1px solid var(--line)}
.tx-ico{width:42px; height:42px; border-radius:13px; flex:none; font-size:19px; display:flex; align-items:center;
  justify-content:center; background:var(--paper); border:1px solid var(--line)}
.tx-ico.in{background:var(--sage-soft); border-color:#D3E3D9}
.tx-info{flex:1; min-width:0}
.tx-info b{font-size:14.5px; color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tx-info span{font-size:12.5px; color:var(--muted)}
.tx-amt{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-weight:600; font-size:16px; white-space:nowrap}
.tx-amt.out{color:var(--ink)}
.tx-amt.in{color:var(--sage)}
.tx-del{border:none; background:none; color:#C7C2B4; font-size:15px; cursor:pointer; padding:4px; flex:none;
  display:inline-flex; align-items:center; justify-content:center}
.tx-del svg{width:16px; height:16px}

/* forms */
label.f{display:block; font-size:12px; font-weight:700; color:var(--muted); margin:12px 0 5px}
input.f, select.f{width:100%; padding:12px 13px; border:1.5px solid var(--line); border-radius:12px;
  font:inherit; font-size:15px; background:var(--card); color:var(--ink)}
input.f:focus, select.f:focus{outline:none; border-color:var(--primary)}
.report-range-trigger{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--card);
  font:inherit; font-size:14.5px; color:var(--ink); cursor:pointer; text-align:left}
.report-range-trigger:hover{border-color:var(--brass)}
.report-range-trigger .car{color:var(--muted); font-size:12px; flex:none}

/* range picker popover — dipakai di Report (Pengaturan) & filter tanggal Transaksi */
.range-picker{position:relative; display:inline-flex; max-width:100%}
.range-popover{position:fixed; z-index:70; display:none; background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:12px}
.range-picker.open .range-popover{display:block}
.range-presets{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.range-popover .date-range-group{margin:0}
.date-range-group{display:flex; align-items:center; gap:6px; width:100%; padding:0 13px;
  border:1.5px solid var(--line); border-radius:12px; background:var(--paper)}
.date-range-group input[type=date]{flex:1; min-width:0; border:none; background:transparent; padding:12px 0;
  font:inherit; font-size:14px; color:var(--ink)}
.date-range-group input[type=date]:focus{outline:none}
.date-range-group:focus-within{border-color:var(--primary)}
.date-range-group span{color:var(--muted); font-weight:700; flex:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; cursor:pointer;
  border-radius:12px; padding:12px 18px; font:inherit; font-weight:700; font-size:14.5px}
.btn.p{background:var(--primary); color:#fff; width:100%}
.btn.p:active{background:var(--deep)}
.btn.ghost{background:var(--paper); color:var(--ink)}
.btn.sm{padding:8px 12px; font-size:13px; border-radius:10px}
.btn.dngr{background:var(--red-soft); color:var(--red)}
.btn.ok{background:var(--green-soft); color:var(--green)}
.seg{display:flex; background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:4px; gap:4px; margin-top:6px}
.seg button{flex:1; border:none; background:none; font:inherit; font-weight:700; font-size:13.5px;
  padding:9px 0; border-radius:10px; cursor:pointer; color:var(--muted)}
.seg button.on{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}

/* ===== Amplop: toolbar & tabel alokasi ===== */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.btn-soft{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--card);
  color:var(--ink); font-weight:700; font-size:13px; padding:10px 16px; border-radius:12px; cursor:pointer;
  box-shadow:var(--shadow)}
.btn-soft:hover{transform:translateY(-1px)}
.btn-soft.primary{background:var(--ink); border-color:var(--ink); color:#F6F3EC}
.alloc-row{display:flex; align-items:center; gap:10px; padding:13px 20px}
.alloc-row + .alloc-row{border-top:1px solid var(--line)}
.alloc-row .name{flex:1; min-width:120px; font-weight:600; font-size:14.5px; color:var(--ink); display:flex; align-items:center; gap:10px}
.alloc-row .name i{font-style:normal; font-size:17px}
.alloc-input{width:104px; text-align:right; font-family:'Poppins',system-ui,-apple-system,sans-serif; font-size:15px; font-weight:600;
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; background:var(--paper); color:var(--ink); outline:none}
.alloc-input:focus{border-color:var(--brass); background:#fff}
.alloc-input.zero{color:var(--muted); font-weight:500}
.mini-act{display:flex; gap:4px}
.mini-act button{width:32px; height:32px; border-radius:9px; border:none; background:transparent; color:var(--muted);
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0}
.mini-act button:hover{background:var(--paper); color:var(--ink)}
.mini-act svg{width:15px; height:15px}
.alloc-summary{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:18px 22px;
  margin:14px -16px -16px; background:linear-gradient(180deg,#FBF9F3,#F4EFE3); border-top:1px solid var(--line);
  border-radius:0 0 var(--r) var(--r)}
.alloc-summary .cell b{display:block; font-family:'Poppins',system-ui,-apple-system,sans-serif; font-size:19px; color:var(--ink)}
.alloc-summary .cell span{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.alloc-summary .cell.ok b{color:var(--sage)}
.alloc-summary .cell.warn b{color:var(--clay)}

.env-usage{display:flex; flex-direction:column}
.env-usage-row{padding:13px 0}
.env-usage-row + .env-usage-row{border-top:1px dashed var(--line)}
.env-usage-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:12px}
.env-usage-head b{font-size:14px; color:var(--ink); font-weight:600}
.env-usage-head .amt{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-size:15px; font-weight:600; color:var(--ink)}
.env-usage-head .amt small{color:var(--muted); font-family:'Poppins',sans-serif; font-weight:600; font-size:12px}
.env-usage-head .amt.over{color:var(--clay)}
.env-usage-bar{height:8px; border-radius:99px; background:#EFEADD; overflow:hidden}
.env-usage-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#2B3352,var(--ink))}
.env-usage-bar i.warn{background:linear-gradient(90deg,var(--brass-bright),var(--brass))}
.env-usage-bar i.over{background:linear-gradient(90deg,#D08A7C,var(--clay))}
.neg{color:var(--red)} .pos{color:var(--green)}

.wallet-row{display:flex; justify-content:space-between; align-items:center; padding:15px 0}
.wallet-row + .wallet-row{border-top:1px solid var(--line)}
.wallet-row .w b{font-size:14.5px; color:var(--ink); display:block}
.wallet-row .w span{font-size:12px; color:var(--muted)}
.wallet-row .amt{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-size:17px; font-weight:600; color:var(--ink)}
.wallet-row .amt.zero{color:var(--muted); font-weight:500}
.wallet-row .amt.neg{color:var(--clay)}

.legend{display:flex; gap:16px; justify-content:flex-end; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:8px}
.legend i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.legend .li i{background:var(--sage)}
.legend .lo i{background:var(--brass)}
.cash-chart{display:flex; align-items:flex-end; height:160px; padding:10px 4px 0}
.cash-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; min-width:0}
.cash-bars{display:flex; align-items:flex-end; gap:5px; height:100%}
.cash-bars i{width:11px; border-radius:6px 6px 3px 3px; display:block; min-height:3px}
.cash-bars .in{background:linear-gradient(180deg,#5B9878,var(--sage))}
.cash-bars .out{background:linear-gradient(180deg,var(--brass-bright),var(--brass))}
.cash-col span{font-size:11px; font-weight:700; color:var(--muted)}
.trend span{font-size:9.5px; color:var(--muted); font-weight:600}

.list-item{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line)}
.list-item:last-child{border-bottom:none}
.list-item .grow{flex:1; min-width:0}
.list-item .t1{font-weight:700; font-size:14px}
.list-item .t2{font-size:12px; color:var(--muted)}

/* ===== tampilan desktop (browser biasa, BUKAN pwa terinstall) =====
   PWA terinstall (display-mode:standalone) tetap pakai tampilan mobile di atas. */
@media (min-width:861px) and (display-mode:browser){
  body{padding-bottom:0}
  .app{display:grid; grid-template-columns:248px 1fr; min-height:100vh}
  .sidebar{display:flex; flex-direction:column; gap:8px; background:var(--ink); color:#EDEAE0;
    padding:28px 20px; position:sticky; top:0; height:100vh}
  .sidebar .logo-row{padding:0 8px 24px}
  .sidebar .logo-name{color:#F6F3EC}
  .main{margin:0 auto; max-width:1060px; width:100%; padding:32px 40px 96px}
  .m-logo, .m-gear{display:none}
  .topbar{position:static; background:none; margin:0 0 28px; padding:0}
  .period-compact{display:none}
  .period-inline{display:flex; position:static; box-shadow:var(--shadow)}

  .btn-record{display:flex; align-items:center; justify-content:center; gap:8px;
    background:linear-gradient(180deg,var(--brass-bright),var(--brass)); color:#241A08;
    font-weight:700; font-size:14px; border:none; border-radius:14px; padding:13px 16px; cursor:pointer;
    box-shadow:0 8px 20px -8px rgba(169,126,63,.7), inset 0 1px 0 rgba(255,255,255,.35); margin-bottom:18px}
  .btn-record:hover{transform:translateY(-1px)}
  .nav{display:flex; flex-direction:column; gap:4px}
  .nav-item{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px;
    color:#B9B4A4; font-weight:600; font-size:14.5px; cursor:pointer; border:none; background:transparent;
    text-align:left; width:100%}
  .nav-item svg{width:19px; height:19px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round}
  .nav-item:hover{color:#F6F3EC; background:rgba(255,255,255,.06)}
  .nav-item.active{color:#F6F3EC; background:rgba(255,255,255,.1)}
  .nav-item.active svg{stroke:var(--brass-bright)}
  .nav-label{font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:#6E6A5C; padding:16px 12px 6px}
  .sidebar-foot{margin-top:auto; padding:14px 12px; border-top:1px solid rgba(255,255,255,.1);
    display:flex; align-items:center; gap:10px}
  .sidebar-foot .gear{background:rgba(255,255,255,.1); width:32px; height:32px; flex:none}
  .avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(140deg,var(--brass-bright),#7A5A2B);
    display:flex; align-items:center; justify-content:center; font-weight:700; color:#241A08; font-size:13px; flex:none}
  .who{font-size:12.5px; line-height:1.3; overflow:hidden; flex:1; min-width:0}
  .who b{display:block; color:#EDEAE0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sync{display:inline-flex; align-items:center; gap:5px; color:#8B8776; font-size:11.5px; font-weight:600}
  .sync-ind{width:7px; height:7px; border-radius:50%; background:#5D9C7B; box-shadow:0 0 0 3px rgba(93,156,123,.2);
    display:inline-block; flex:none}

  .bottom-nav, .fab{display:none}

  /* manfaatkan lebar layar: grid lebih banyak kolom, bukan tumpuk memanjang ke bawah */
  #rp-recap-btn{width:auto; padding-left:24px; padding-right:24px}

  /* Beranda: hero & kartu amplop versi desktop (Tahap 3) */
  .hero{padding:34px 36px 30px; border-radius:24px}
  .hero-stat{padding:16px 20px}
  .hero-stat .v{font-size:22px}
  h2.section{font-size:19px; margin:34px 0 14px}
  .env-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px}
  .env-card{padding:52px 20px 20px}
  .env-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
  .env-left{font-size:23px}

  /* Amplop: tabel alokasi versi desktop (Tahap 5) */
  .alloc-row{gap:14px}
  .alloc-input{width:130px}

  /* Cicilan: kartu pinjaman versi desktop (Tahap 7) */
  .loan-grid{grid-template-columns:1fr 1fr}

  /* Pengaturan: grid 2 kolom versi desktop (Tahap 8) */
  .set-grid{grid-template-columns:1fr 1fr}
}

.modal-bg{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  padding:22px; background:rgba(24,29,48,.55); backdrop-filter:blur(5px)}
.modal-bg.open{display:flex}
#confirm-modal{z-index:65} /* selalu di atas modal lain — dipakai sebagai konfirmasi dari dalam modal lain juga */
.modal{width:min(440px,100%); max-height:min(88vh,760px); overflow:auto; background:var(--card);
  border-radius:24px; padding:26px 26px 24px; box-shadow:var(--shadow-lg); animation:pop .22s ease; position:relative}
.modal::before{content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,var(--brass-bright),var(--brass)); border-radius:24px 24px 0 0}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1; transform:none}}
.modal h3{font-size:17px; font-weight:800; display:flex; justify-content:space-between; align-items:center}
.modal h3 button{border:none; background:var(--paper); width:30px; height:30px; border-radius:50%; font-size:14px; cursor:pointer}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px}
.modal-head h3{font-family:'Poppins',system-ui,-apple-system,sans-serif; font-weight:600; font-size:20px; color:var(--ink)}
.modal-x{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; flex:none}
.modal-x:hover{background:var(--line)}
.field{margin-bottom:16px}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:7px; letter-spacing:.02em}
.input, select.input{width:100%; border:1.5px solid var(--line); border-radius:13px; padding:13px 15px;
  font:inherit; font-size:14.5px; color:var(--text); background:var(--paper); outline:none; appearance:none}
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8577' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:42px}
.input:focus, select.input:focus{border-color:var(--brass); background:#fff; box-shadow:0 0 0 4px rgba(169,126,63,.12)}
.input::placeholder{color:#B3AE9E}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.btn-primary{width:100%; background:var(--ink); color:#F6F3EC; border:none; border-radius:14px; font-weight:800;
  font-size:15px; padding:15px; cursor:pointer; margin-top:6px; box-shadow:0 10px 24px -10px rgba(29,35,56,.5)}
.btn-primary:hover{transform:translateY(-1px); background:var(--ink-soft)}
.btn-danger{background:var(--clay-soft); color:var(--clay); border:none; border-radius:14px; font-weight:800;
  font-size:15px; padding:15px 22px; cursor:pointer}
.btn-danger:hover{background:#F1DBD4}
.modal-actions{display:flex; gap:10px; margin-top:6px}
.modal-actions .btn-primary{margin-top:0}
.emoji-input{width:74px; text-align:center; font-size:22px}
@media (max-width:640px){
  .modal-bg{align-items:flex-end; padding:0}
  .modal{width:100%; max-height:92vh; border-radius:24px 24px 0 0; animation:sheet .26s ease;
    padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
@keyframes sheet{from{transform:translateY(40px); opacity:.6}to{transform:none; opacity:1}}
.empty{text-align:center; color:var(--muted); font-size:13.5px; padding:22px 10px}
.empty b{display:block; font-family:'Poppins',sans-serif; font-size:14.5px; color:var(--ink); margin-bottom:3px}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(96px + env(safe-area-inset-bottom));
  background:var(--deep); color:#fff; font-size:13px; font-weight:600; padding:10px 18px; border-radius:99px;
  z-index:110; opacity:0; pointer-events:none; transition:opacity .25s; max-width:calc(100vw - 32px); text-align:center}
.toast.show{opacity:1}
.hint{font-size:12px; color:var(--muted); margin-top:8px}

/* ===== auth gate ===== */
#auth-gate{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(201,160,91,.14), transparent 60%),
    linear-gradient(150deg,#232A47 0%,var(--ink) 60%,#161B2C 100%);
}
#auth-gate.open{display:flex}
.ag-card{width:min(420px,100%); background:var(--card); border-radius:24px; padding:34px 32px 30px;
  box-shadow:var(--shadow-lg); animation:fade .3s ease}
.ag-back{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--muted);
  text-decoration:none; margin-bottom:22px; background:none; border:none; cursor:pointer}
.ag-back:hover{color:var(--ink)}
.ag-logo{display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:8px}
.ag-card p.sub{text-align:center; font-size:14px; color:#6B665A; margin-bottom:26px; margin-top:0}
.ag-err{display:none; background:var(--clay-soft); color:var(--clay); font-size:13px; font-weight:600;
  border-radius:10px; padding:10px 12px; margin-top:12px}
.ag-err.show{display:block}
.ag-info{display:none; background:var(--sage-soft); color:var(--sage); font-size:13px; font-weight:600;
  border-radius:10px; padding:10px 12px; margin-top:12px}
.ag-info.show{display:block}
.auth-links{display:flex; justify-content:center; align-items:center; gap:14px; margin-top:20px; font-size:13.5px;
  font-weight:700; flex-wrap:wrap}
.auth-links button{background:none; border:none; color:var(--brass); cursor:pointer; font:inherit; font-weight:700; font-size:13.5px}
.auth-links button:hover{text-decoration:underline}
.input-wrap{position:relative}
.input-wrap input{padding-right:44px}
.input-wrap .eye{position:absolute; right:4px; top:50%; transform:translateY(-50%); border:none; background:none;
  cursor:pointer; color:var(--muted); padding:8px; display:flex; align-items:center; justify-content:center}
.input-wrap .eye svg{width:17px; height:17px}
#recap-hide-btn svg{width:12px; height:12px}

/* ===== aksesibilitas (design-reference Tahap 1) ===== */
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}