/* =========================================================
   KasQ · Mengelola Keuanganku
   Design tokens
   ========================================================= */
:root{
  --bg:#0A0E17;
  --bg-soft:#0E1421;
  --surface:#131B2A;
  --surface-2:#182133;
  --surface-3:#1E2940;
  --border:#25324B;
  --border-soft:#1D2739;
  --text:#E9EEF9;
  --text-dim:#A3B0C7;
  --muted:#76839C;
  --primary:#26C06A;
  --primary-2:#0FA98A;
  --primary-soft:rgba(38,192,106,.15);
  --fab-atas:#43DA8E;
  --fab-bibir:#0A7C46;
  --luar-app:#05080D;
  --kaca:rgba(23,32,48,.55);
  --kaca-garis:rgba(255,255,255,.13);
  --kaca-kilau:rgba(255,255,255,.26);
  --kaca-alas:rgba(0,0,0,.22);
  --accent:#38BDF8;
  --accent-soft:rgba(56,189,248,.14);
  --income:#2DD48F;
  --income-soft:rgba(45,212,143,.13);
  --expense:#FB6F84;
  --expense-soft:rgba(251,111,132,.13);
  --saving:#F7B44C;
  --saving-soft:rgba(247,180,76,.13);
  --danger:#F2544B;
  --shadow-sm:0 2px 8px rgba(0,0,0,.28);
  --shadow:0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-lg:0 30px 70px -25px rgba(0,0,0,.75);
  --r-xs:8px; --r-sm:11px; --r-md:14px; --r-lg:20px; --r-xl:26px;
  --sidebar-w:252px;
  /* Aplikasi selalu memakai tata letak ponsel. Isinya dikurung dalam satu kolom
     selebar ponsel dan diletakkan di tengah layar, juga di monitor lebar. */
  --lebar-app:440px;
  --tepi-app:max(0px, calc((100vw - var(--lebar-app)) / 2));
  --font:"Inter","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --ease:cubic-bezier(.22,.68,.32,1);
}
[data-theme="light"]{
  --bg:#EEF1F8;
  --bg-soft:#F5F7FC;
  --surface:#FFFFFF;
  --surface-2:#F4F6FC;
  --surface-3:#EAEFF9;
  --border:#DFE5F1;
  --border-soft:#EAEFF7;
  --text:#111A2E;
  --text-dim:#4B5670;
  --muted:#78849C;
  --primary:#12A150;
  --primary-2:#0B8C72;
  --primary-soft:rgba(18,161,80,.11);
  --fab-atas:#2CC06E;
  --fab-bibir:#0A6B36;
  --luar-app:#D8DFEC;
  --kaca:rgba(255,255,255,.6);
  --kaca-garis:rgba(30,45,80,.12);
  --kaca-kilau:rgba(255,255,255,.95);
  --kaca-alas:rgba(30,45,80,.1);
  --accent:#0E8FC4;
  --accent-soft:rgba(14,143,196,.11);
  --income:#12A971;
  --income-soft:rgba(18,169,113,.11);
  --expense:#E4415C;
  --expense-soft:rgba(228,65,92,.10);
  --saving:#D9861B;
  --saving-soft:rgba(217,134,27,.12);
  --danger:#DC2F35;
  --shadow-sm:0 2px 8px rgba(30,45,80,.07);
  --shadow:0 12px 28px -14px rgba(30,45,80,.22);
  --shadow-lg:0 32px 64px -28px rgba(30,45,80,.32);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{
  cursor:pointer;background:none;border:none;padding:0;
  /* Mematikan perbesaran ketuk-dua-kali di ponsel. Tanpa ini, mengetik angka
     yang sama dua kali dengan cepat di kalkulator malah memperbesar layar.
     Mencubit layar untuk memperbesar tetap bisa, jadi tidak menyusahkan yang
     penglihatannya terbatas. */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
/* Tombol tidak perlu bisa diseleksi teksnya. Ketukan cepat berulang kerap
   memunculkan sorotan seleksi dan menu salin yang mengganggu. */
.calc-key,.tab,.chip,.seg-pills button,.quick-amts button{
  -webkit-user-select:none;user-select:none;
}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
svg{display:block}
a{color:var(--primary)}
::selection{background:var(--primary);color:#fff}

/* Batang gulir disembunyikan di seluruh aplikasi. Menggulirnya tetap jalan
   seperti biasa, baik dengan roda tetikus, sentuhan, maupun papan ketik, hanya
   batangnya saja yang tidak digambar. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}

/* ============ Layout ============ */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh;height:100dvh;overflow:hidden}
.app[hidden]{display:none;visibility:hidden;pointer-events:none}
.sidebar-scrim{display:none}

.sidebar{
  display:flex;flex-direction:column;gap:14px;
  background:var(--bg-soft);border-right:1px solid var(--border-soft);
  padding:20px 14px 16px;overflow:hidden;
}
.brand{display:flex;align-items:center;gap:11px;padding:2px 6px 10px}
.brand-mark{
  width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--primary),var(--primary-2));
  box-shadow:0 8px 20px -8px var(--primary);
}
.brand-mark svg{width:23px;height:23px}
.brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.brand-text strong{font-size:16.5px;letter-spacing:-.2px}
.brand-text span{
  font-size:11.2px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar .sidebar-close{display:none}

.nav{display:flex;flex-direction:column;gap:3px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
  color:var(--text-dim);font-size:14.3px;font-weight:500;position:relative;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.nav-item .ni-icon{width:20px;height:20px;flex:none;opacity:.9}
.nav-item .ni-icon svg{width:20px;height:20px}
.nav-item:hover{background:var(--surface);color:var(--text)}
.nav-item.is-active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.nav-item.is-active::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--primary);
}

.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.mini-card{
  background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border:1px solid var(--border-soft);border-radius:var(--r-md);
  padding:13px 14px;display:flex;flex-direction:column;gap:2px;
}
.mini-label{font-size:11.5px;color:var(--muted);letter-spacing:.2px}
.mini-value{font-size:19px;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.mini-sub{font-size:11.5px;color:var(--muted)}

.theme-toggle{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);
  color:var(--text-dim);font-size:13.5px;transition:background .16s;
}
.theme-toggle:hover{background:var(--surface)}
.tt-track{width:38px;height:21px;border-radius:99px;background:var(--surface-3);position:relative;flex:none}
.tt-thumb{
  position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;
  background:var(--primary);transition:transform .22s var(--ease);
}
[data-theme="light"] .tt-thumb{transform:translateX(17px)}

/* ============ Topbar ============ */
.main{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg)}
.topbar{
  display:flex;align-items:center;gap:14px;padding:16px 26px 14px;
  border-bottom:1px solid var(--border-soft);background:var(--bg);flex:none;
}
.topbar-title{min-width:0;flex:1}
.topbar-title h1{
  font-size:20.5px;letter-spacing:-.45px;font-weight:650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-title p{font-size:12.8px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{display:flex;align-items:center;gap:9px}

.icon-btn{
  width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--text-dim);border:1px solid transparent;transition:.16s var(--ease);
}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn.sm{width:28px;height:28px;border-radius:var(--r-xs)}
.icon-btn.sm svg{width:16px;height:16px}
.icon-btn.danger:hover{background:rgba(242,84,75,.13);color:var(--danger)}
.menu-btn{display:none}

.subbar{
  display:flex;align-items:center;gap:11px;flex:none;
  padding:11px 26px;border-bottom:1px solid var(--border-soft);background:var(--bg);
}
.subbar-label{
  font-size:11.5px;font-weight:650;color:var(--muted);
  letter-spacing:.5px;text-transform:uppercase;
}
.month-picker{
  display:flex;align-items:center;gap:2px;background:var(--surface);
  border:1px solid var(--border-soft);border-radius:var(--r-sm);padding:3px;
}
.month-label{
  padding:4px 10px;font-size:13.4px;font-weight:600;color:var(--text);border-radius:var(--r-xs);
  min-width:124px;text-align:center;transition:background .15s;
}
.month-label:hover{background:var(--surface-2)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:var(--r-sm);font-size:13.8px;font-weight:600;
  border:1px solid var(--border);color:var(--text);background:var(--surface);
  transition:.16s var(--ease);white-space:nowrap;
}
.btn svg{width:17px;height:17px}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff;
  box-shadow:0 8px 20px -10px var(--primary);
}
.btn-primary:hover{filter:brightness(1.08);background:linear-gradient(135deg,var(--primary),var(--primary-2))}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-soft{background:var(--surface-2);border-color:var(--border-soft)}
.btn-danger{background:transparent;border-color:transparent;color:var(--danger)}
.btn-danger:hover{background:rgba(242,84,75,.12)}
.btn-danger-solid{background:var(--danger);border-color:transparent;color:#fff}
.btn-danger-solid:hover{filter:brightness(1.08);background:var(--danger)}
.btn-block{width:100%}
.btn-sm{padding:6px 11px;font-size:12.8px;border-radius:var(--r-xs)}
.btn-sm svg{width:15px;height:15px}
.btn:disabled{opacity:.45;pointer-events:none}

/* ============ Views / grid ============ */
.scroll-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:22px 26px 8px}
.scroll-pad{height:26px}
.view{display:flex;flex-direction:column;gap:16px;animation:fadeUp .28s var(--ease)}
.view[hidden]{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}

.card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--shadow-sm);position:relative;min-width:0;
}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-head h2{font-size:15.5px;font-weight:650;letter-spacing:-.2px}
.card-head p{font-size:12.3px;color:var(--muted);margin-top:2px}
.ch-actions{display:flex;gap:6px;align-items:center;flex:none}
.card-head.stack{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px}
.card-head.stack > div:first-child{flex:none;min-width:0}

/* ============ Hero balance ============ */
.hero{
  border-radius:var(--r-xl);padding:24px;position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(125deg,#1FA85E 0%,#12A17E 48%,#0C8E93 100%);
  box-shadow:0 22px 46px -22px rgba(18,161,110,.72);
}
.hero::after{
  content:"";position:absolute;right:-70px;top:-90px;width:290px;height:290px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);
}
.hero::before{
  content:"";position:absolute;left:-60px;bottom:-120px;width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 65%);
}
.hero-inner{position:relative;z-index:1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hero-label{font-size:12.5px;opacity:.82;letter-spacing:.3px;display:flex;align-items:center;gap:7px}
.hero-label svg{width:15px;height:15px;flex:none}
.hint svg{width:14px;height:14px}
.hero-amount{font-size:37px;font-weight:700;letter-spacing:-1.4px;margin-top:5px;font-variant-numeric:tabular-nums;line-height:1.1}
.hero-note{font-size:12.5px;opacity:.82;margin-top:7px;line-height:1.55;max-width:56ch}

/* ============ Stat tiles ============ */
.stat{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:16px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow-sm);min-width:0;
}
.stat-top{display:flex;align-items:center;gap:10px}
.stat-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.stat-ic svg{width:18px;height:18px}
.stat-name{font-size:12.6px;color:var(--muted);font-weight:500}
.stat-val{font-size:22px;font-weight:680;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1.15}
.stat-foot{
  font-size:11.8px;color:var(--muted);display:flex;align-items:center;gap:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.stat-foot > span{
  display:inline-flex;align-items:center;gap:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.stat-foot > span svg{flex:none}
.stat-foot svg{width:13px;height:13px}
.up{color:var(--income)} .down{color:var(--expense)}
.ic-income{background:var(--income-soft);color:var(--income)}
.ic-expense{background:var(--expense-soft);color:var(--expense)}
.ic-saving{background:var(--saving-soft);color:var(--saving)}
.ic-primary{background:var(--accent-soft);color:var(--accent)}

/* Kartu gabungan: dua ringkasan berdampingan dalam satu kartu */
.span-2{grid-column:span 2}
.stat-pair{padding:16px;display:flex;flex-direction:column;gap:12px}
.pair{display:grid;grid-template-columns:1fr 1fr;flex:1;align-items:start}
.pair-half{display:flex;flex-direction:column;gap:9px;min-width:0;padding-right:14px}
.pair-half + .pair-half{
  border-left:1px solid var(--border-soft);padding-left:14px;padding-right:0;
}
.pair-more{
  display:flex;flex-direction:column;gap:5px;
  margin-top:3px;padding-top:9px;border-top:1px solid var(--border-soft);
}
.pair-more > div{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11.6px}
.pair-more span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pair-more b{font-weight:640;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============ Transaction list ============ */
.tx-group{margin-bottom:6px}
.tx-daysep{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px;margin:13px 0 7px;font-size:12.2px;font-weight:640;
  color:var(--text-dim);background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:var(--r-sm);
  position:sticky;top:-1px;z-index:2;
}
.tx-group:first-of-type .tx-daysep{margin-top:0}
.tx-daysep .dsum{font-variant-numeric:tabular-nums;font-weight:600}
.tx{
  display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:var(--r-md);
  transition:background .14s;cursor:pointer;position:relative;
}
.tx:hover{background:var(--surface-2)}
.tx-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none}
.tx-ic svg{width:19px;height:19px}
.tx-body{flex:1;min-width:0}
.tx-title{font-size:14px;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.tx-amt{font-size:14.2px;font-weight:640;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.tx-amt.in{color:var(--income)} .tx-amt.out{color:var(--expense)} .tx-amt.sav{color:var(--saving)}
.tx-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s;flex:none}
.tx:hover .tx-actions{opacity:1}
.tx-badge{
  font-size:10px;font-weight:600;padding:2px 6px;border-radius:5px;flex:none;
  background:var(--saving-soft);color:var(--saving);letter-spacing:.2px;white-space:nowrap;
}
.tx-title.with-badge{display:flex;align-items:center;gap:6px;min-width:0}
.tx-title.with-badge > .tt-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ============ Empty state ============ */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:34px 18px;text-align:center}
.empty-ic{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border-soft);
}
.empty-ic svg{width:26px;height:26px}
.empty h3{font-size:14.5px;font-weight:600}
.empty p{font-size:12.8px;color:var(--muted);max-width:290px}

/* ============ Category breakdown ============ */
.cat-row{display:flex;align-items:center;gap:11px;padding:8px 2px}
.cat-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.cat-ic svg{width:16px;height:16px}
.cat-mid{flex:1;min-width:0}
.cat-line1{display:flex;justify-content:space-between;gap:10px;font-size:13.2px;margin-bottom:5px}
.cat-line1 b{font-weight:600;font-variant-numeric:tabular-nums}
.cat-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.bar-track{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.bar-fill{height:100%;border-radius:99px;transition:width .5s var(--ease)}
.cat-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;width:58px;flex:none}
.cat-pct{font-size:11.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.cat-delta{
  display:inline-flex;align-items:center;gap:1px;white-space:nowrap;
  font-size:10.4px;font-weight:650;font-variant-numeric:tabular-nums;
}
.cat-delta svg{width:11px;height:11px;flex:none}
.cat-delta.up{color:var(--income)}
.cat-delta.down{color:var(--expense)}
.cat-delta.rata,.cat-delta.baru{color:var(--muted);font-weight:600}

/* ============ Savings ============ */
.goal{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:17px;display:flex;flex-direction:column;gap:13px;box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);position:relative;overflow:hidden;
}
.goal:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.goal.done{border-color:var(--income)}
.goal-top{display:flex;align-items:flex-start;gap:12px}
.goal-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}
.goal-ic svg{width:22px;height:22px}
.goal-info{flex:1;min-width:0}
.goal-name{font-size:15px;font-weight:640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal-meta{font-size:12px;color:var(--muted);margin-top:2px}
.goal-amt{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.goal-amt b{font-size:20px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.goal-amt span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.goal-bar{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.goal-bar i{display:block;height:100%;border-radius:99px;transition:width .6s var(--ease)}
.goal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.goal-pct{font-size:12.3px;color:var(--muted);font-variant-numeric:tabular-nums}
.goal-btns{display:flex;gap:6px}
.chip-done{
  position:absolute;top:12px;right:12px;font-size:10.5px;font-weight:700;letter-spacing:.3px;
  background:var(--income-soft);color:var(--income);padding:3px 8px;border-radius:99px;
}

/* ============ Ring ============ */
.ring-wrap{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.ring{position:relative;width:172px;height:172px;flex:none}
.ring svg{width:100%;height:100%}
.ring-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
}
.ring-center small{font-size:11.3px;color:var(--muted)}
.ring-center b{font-size:19px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-direction:column;gap:8px;flex:1;min-width:150px}
.legend-item{display:flex;align-items:center;gap:9px;font-size:12.8px}
.legend-dot{width:9px;height:9px;border-radius:3px;flex:none}
.legend-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-dim)}
.legend-val{font-variant-numeric:tabular-nums;font-weight:600;font-size:12.3px}

/* ============ Forms ============ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.field > label{font-size:12.4px;font-weight:600;color:var(--text-dim);letter-spacing:.1px}
.hint{font-size:11.5px;color:var(--muted);line-height:1.45;margin:0}
.input,.select,.textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:var(--r-sm);padding:10px 12px;font-size:14px;color:var(--text);
  transition:border-color .15s,box-shadow .15s,background .15s;outline:none;
}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
/* Di perangkat sentuh font isian dijaga minimal 16px. Di bawah angka itu Safari
   iOS otomatis memperbesar halaman begitu papan ketik terbuka, dan perbesarannya
   tidak kembali sendiri setelah selesai mengetik. */
@media (pointer:coarse){
  .input,.select,.textarea{font-size:16px}
}
/* Beri jarak saat peramban menggulir isian yang sedang difokus ke dalam layar,
   supaya tidak menempel persis di tepi atas papan ketik. */
.input,.select,.textarea,.amount-input{scroll-margin:20px}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--surface)
}
.textarea{resize:vertical;min-height:74px;line-height:1.5}
.select{appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376839C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px}
/* Isian tanggal bawaan ponsel punya lebar minimum sendiri dan kerap melebihi
   kolomnya, sehingga isi popup jadi bisa digeser ke kiri dan kanan. Tampilan
   bawaannya dimatikan dan lebarnya dikunci supaya ikut kolomnya. */
input[type="date"]{
  cursor:pointer;-webkit-appearance:none;appearance:none;
  min-width:0;max-width:100%;
}
/* Anak grid bawaannya tidak boleh menyusut di bawah lebar isinya. Dinolkan
   supaya isian selebar apa pun tetap terkurung di dalam kolomnya. */
.row > *{min-width:0}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.7)}
.row{display:grid;gap:12px}
.row-2{grid-template-columns:1fr 1fr}

.amount-wrap{position:relative}
.amount-wrap .cur{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  font-size:16px;font-weight:600;color:var(--muted);pointer-events:none;
}
.amount-input{
  width:100%;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-md);
  padding:14px 14px 14px 46px;font-size:25px;font-weight:680;letter-spacing:-.5px;
  color:var(--text);outline:none;font-variant-numeric:tabular-nums;transition:.15s;
}
.amount-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--surface)}
.amount-input.in-tone{color:var(--income)} .amount-input.out-tone{color:var(--expense)}
.quick-amts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.quick-amt{
  padding:5px 10px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border-soft);
  font-size:11.8px;color:var(--text-dim);font-weight:500;transition:.14s;
}
.quick-amt:hover{border-color:var(--primary);color:var(--primary)}

/* Segmented */
.segment{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:var(--r-md);padding:4px}
.segment button{
  padding:9px;border-radius:var(--r-xs);font-size:13.6px;font-weight:600;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:7px;transition:.16s var(--ease);
}
.segment button svg{width:16px;height:16px}
.segment button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.segment button.on[data-type="expense"]{color:var(--expense)}
.segment button.on[data-type="income"]{color:var(--income)}

/* Toggle switch */
.switch{display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
.switch input{display:none}
.sw-track{width:42px;height:24px;border-radius:99px;background:var(--surface-3);position:relative;flex:none;transition:background .2s}
.sw-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--muted);transition:.22s var(--ease)}
.switch input:checked + .sw-track{background:var(--primary)}
.switch input:checked + .sw-track::after{transform:translateX(18px);background:#fff}
.sw-text{min-width:0}
.sw-text b{display:block;font-size:13.6px;font-weight:600}
.sw-text small{display:block;font-size:11.8px;color:var(--muted);margin-top:1px}

/* ============ Category chips ============ */
.chip-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;
  max-height:238px;overflow-y:auto;padding:3px;margin:-3px;
}
.chip{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 5px 9px;
  border-radius:var(--r-md);border:1.5px solid var(--border-soft);background:var(--surface-2);
  transition:.15s var(--ease);text-align:center;
}
.chip:hover{border-color:var(--border);transform:translateY(-1px)}
.chip.on{border-color:var(--primary);background:var(--primary-soft)}
.chip-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.chip-ic svg{width:17px;height:17px}
.chip-label{
  font-size:11px;line-height:1.25;color:var(--text-dim);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  word-break:break-word;
}
.chip.on .chip-label{color:var(--primary);font-weight:600}
.chip.chip-add{border-style:dashed;background:transparent}
.chip.chip-add .chip-ic{background:var(--surface-2);color:var(--muted)}
.chip.chip-add:hover{border-color:var(--primary)}
.chip.chip-add:hover .chip-ic{color:var(--primary)}

/* ============ Modal ============ */
.modal-root{position:fixed;inset:0;pointer-events:none;z-index:80}
.modal-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;pointer-events:auto}
.modal-back{position:absolute;inset:0;background:rgba(4,8,16,.62);backdrop-filter:blur(4px);animation:fade .2s var(--ease)}
[data-theme="light"] .modal-back{background:rgba(20,30,55,.42)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:100%;max-width:472px;
  max-height:calc(100vh - 44px);display:flex;flex-direction:column;overflow:hidden;
  animation:pop .26s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
.modal.wide{max-width:560px}
.modal.narrow{max-width:392px}
.modal-head{
  display:flex;align-items:center;gap:12px;padding:17px 18px 13px;flex:none;
  border-bottom:1px solid var(--border-soft);
}
.modal-head h3{font-size:16px;font-weight:650;letter-spacing:-.25px;flex:1;min-width:0}
.modal-head p{font-size:12.2px;color:var(--muted);margin-top:2px}
.modal-body{padding:18px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}
.modal-foot{
  display:flex;gap:9px;padding:14px 18px;border-top:1px solid var(--border-soft);flex:none;
  background:var(--surface);
}
/* Pembungkus tombol dibuat transparan agar tombolnya jadi flex item langsung */
.modal-foot > div{display:contents}
.modal-foot .btn{flex:1}
.modal-foot.stack{flex-direction:column}
/* Formulir transaksi: hapus 20% · batal 20% · simpan 60% */
.modal-foot.foot-tx .btn,
.modal-foot.foot-tx2 .btn{min-width:0;padding-left:8px;padding-right:8px}
.modal-foot.foot-tx .btn{flex:0 1 20%}
.modal-foot.foot-tx .btn-primary{flex:0 1 60%}
/* Tanpa tombol hapus, proporsinya dibagi ulang: batal 25% · simpan 75% */
.modal-foot.foot-tx2 .btn{flex:0 1 25%}
.modal-foot.foot-tx2 .btn-primary{flex:0 1 75%}

/* ============ Toast ============ */
.toast-root{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:120;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
@media all{
  .toast-root{bottom:calc(96px + env(safe-area-inset-bottom))}
}
.toast{
  display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:99px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);
  font-size:13.3px;font-weight:520;animation:toastIn .3s var(--ease);max-width:88vw;
}
.toast svg{width:17px;height:17px;flex:none}
.toast.ok svg{color:var(--income)} .toast.err svg{color:var(--danger)} .toast.info svg{color:var(--primary)}
.toast.hide{animation:toastOut .25s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}

/* ============ Category manager (sortable list) ============ */
.sort-list{display:flex;flex-direction:column;gap:6px;position:relative}
.sort-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--border-soft);
  transition:box-shadow .16s,transform .16s,opacity .16s;
  /* Sengaja TIDAK memakai touch-action:none di sini. Seretan hanya dimulai dari
     gagangnya, jadi kalau seluruh baris dimatikan sentuhannya, daftar yang
     panjang tidak bisa digulir sama sekali di layar sentuh. */
}
.sort-item.dragging{
  box-shadow:var(--shadow-lg);background:var(--surface);border-color:var(--primary);
  z-index:5;position:relative;cursor:grabbing;
}
.sort-item.shift{transition:transform .2s var(--ease)}
.drag-handle{
  width:26px;height:30px;display:grid;place-items:center;color:var(--muted);
  cursor:grab;flex:none;border-radius:6px;touch-action:none;
}
.drag-handle:hover{color:var(--text);background:var(--surface-3)}
.drag-handle:active{cursor:grabbing}
.drag-handle svg{width:16px;height:16px;pointer-events:none}
.sort-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.sort-ic svg{width:17px;height:17px}
.sort-name{flex:1;min-width:0;font-size:13.7px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sort-name small{display:block;font-size:11.2px;color:var(--muted);font-weight:400;margin-top:1px}
.sort-acts{display:flex;gap:2px;flex:none}

/* ============ Icon & color picker ============ */
.color-grid{display:flex;flex-wrap:wrap;gap:8px}
.color-dot{
  width:30px;height:30px;border-radius:10px;position:relative;transition:.15s var(--ease);
  border:2px solid transparent;
}
.color-dot:hover{transform:scale(1.09)}
.color-dot.on{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset}
.color-dot.on::after{
  content:"";position:absolute;inset:0;margin:auto;width:9px;height:5px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg) translate(1px,-2px);
}

.icon-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:4px;scrollbar-width:none}
.icon-tabs::-webkit-scrollbar{display:none}
.icon-tab{
  padding:6px 12px;border-radius:99px;font-size:12.2px;font-weight:550;white-space:nowrap;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border-soft);transition:.15s;
}
.icon-tab:hover{color:var(--text)}
.icon-tab.on{background:var(--primary);color:#fff;border-color:transparent}
.icon-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px;
  max-height:216px;overflow-y:auto;padding:4px;margin:-4px;
}
.icon-cell{
  aspect-ratio:1;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--surface-2);border:1.5px solid transparent;color:var(--text-dim);transition:.14s var(--ease);
}
.icon-cell svg{width:20px;height:20px}
.icon-cell:hover{border-color:var(--border);color:var(--text);transform:translateY(-1px)}
.icon-cell.on{border-color:var(--primary);background:var(--primary-soft)}
.icon-group-title{font-size:11.5px;font-weight:650;color:var(--muted);letter-spacing:.4px;
  text-transform:uppercase;margin:12px 0 7px}
.icon-group-title:first-child{margin-top:0}

.preview-row{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--border-soft);margin-bottom:14px;
}
.preview-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}
.preview-ic svg{width:22px;height:22px}
.preview-txt b{display:block;font-size:14.5px;font-weight:620}
.preview-txt small{font-size:11.8px;color:var(--muted)}

/* ============ Filters / misc ============ */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.search{position:relative;flex:1;min-width:180px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.search .input{padding-left:34px}
.seg-pills{display:flex;gap:3px;background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:var(--r-sm);padding:3px}
.seg-pills button{padding:6px 13px;border-radius:var(--r-xs);font-size:12.8px;font-weight:560;color:var(--muted);transition:.15s}
.seg-pills button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.seg-pills button.on[data-f="income"]{color:var(--income)}
.seg-pills button.on[data-f="expense"]{color:var(--expense)}

/* Sepasang tombol di kepala kartu: tinggi seragam 43px */
.card-tools{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;
  width:100%;max-width:400px;margin-left:auto;
}
.card-tools .btn{height:43px;font-size:13.4px;padding-left:10px;padding-right:10px;min-width:0}
.seg-pills.full{display:grid;grid-template-columns:repeat(3,1fr);height:43px;padding:3px;flex:none}
.seg-pills.full button{
  padding:0 14px;height:100%;display:flex;align-items:center;justify-content:center;
}
/* Kartu utama: nominal ditonjolkan */
.stat-lead .stat-name{min-height:0}
.stat-lead .stat-val{font-size:31px;letter-spacing:-1px}
.stat-lead .btn{margin-top:3px}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:99px;background:var(--surface-2);color:var(--text-dim)}
.tag svg{width:12px;height:12px}
.tag.on{background:var(--income-soft);color:var(--income)}
.tag.off{background:var(--surface-3);color:var(--muted)}

.info-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--border-soft);font-size:13.4px}
.info-row:last-child{border-bottom:none}
.info-row .k{color:var(--muted);font-size:12.8px;min-width:0}
.info-row .v{
  font-weight:600;font-variant-numeric:tabular-nums;text-align:right;
  white-space:nowrap;flex:none;
}

.callout{
  display:flex;gap:11px;padding:13px;border-radius:var(--r-md);
  background:var(--primary-soft);border:1px solid rgba(38,192,106,.22);font-size:12.7px;line-height:1.55;
}
.callout svg{width:17px;height:17px;flex:none;color:var(--primary);margin-top:1px}
.callout b{display:block;margin-bottom:2px;font-size:13px}
.callout.warn{background:var(--saving-soft);border-color:rgba(247,180,76,.22)}
.callout.warn svg{color:var(--saving)}

.divider{height:1px;background:var(--border-soft);margin:14px 0}
.section-title{font-size:12.4px;font-weight:680;color:var(--muted);letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:10px}
.list-scroll{max-height:340px;overflow-y:auto;margin:0 -6px;padding:0 6px}

/* ============ Charts ============ */
.chart-box{width:100%;overflow:hidden}
.chart-box svg{width:100%;height:auto;display:block;overflow:visible}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-soft)}
.cl-item{display:flex;align-items:center;gap:7px;font-size:12.3px;color:var(--text-dim)}
.cl-dot{width:9px;height:9px;border-radius:3px}
.cl-item b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:620}

/* ============ Tabbar (mobile) ============ */
.tabbar{display:none}

/* ============ Responsive ============ */
@media all{
  .g-main{grid-template-columns:1fr}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media all{
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:270px;z-index:70;transform:translateX(-102%);
    transition:transform .3s var(--ease);box-shadow:var(--shadow-lg);
  }
  .app.nav-open .sidebar{transform:none}
  .sidebar-scrim{
    display:block;position:fixed;inset:0;background:rgba(4,8,16,.55);z-index:60;opacity:0;pointer-events:none;
    transition:opacity .25s;backdrop-filter:blur(2px);
  }
  .app.nav-open .sidebar-scrim{opacity:1;pointer-events:auto}
  .sidebar .sidebar-close{display:grid;margin-left:auto;flex:none}
  .menu-btn{display:grid}
  .topbar{padding:12px 16px 11px;gap:10px}
  .topbar-title h1{font-size:18px}
  .subbar{padding:9px 16px;gap:9px}
  .subbar-label{display:none}
  .subbar .month-picker{flex:1}
  .subbar .month-label{flex:1;min-width:0}
  .scroll-area{padding:16px 16px 8px}
  .scroll-pad{height:106px}
  .month-label{min-width:0;font-size:13px}
  .g-3,.g-2{grid-template-columns:1fr}
  .tx-actions{display:none}
  .tx{padding:8px}
  .tx-ic{width:36px;height:36px}
  .tx-daysep{padding:7px 10px;margin:9px 0 4px}
  .tx-group{margin-bottom:0}
  .filters{flex-direction:column;align-items:stretch;gap:9px}
  .filters .search{width:100%;min-width:0}
  .seg-pills.full{width:100%;min-width:0}
  .card-tools{max-width:none}
  .card-head{flex-wrap:wrap}
  .card-head > div:first-child{flex:1 1 auto;min-width:160px}
  .hero-amount{font-size:30px}
  .hero{padding:20px}
}

@media all{
  /* Redaman pendek: pekat di tepi paling bawah, habis di tengah tinggi bar */
  .main::after{
    content:"";position:fixed;left:0;right:0;bottom:0;
    height:calc(47px + env(safe-area-inset-bottom));
    pointer-events:none;z-index:40;
    background:linear-gradient(to top, var(--bg) 0%, var(--bg) 45%, transparent 100%);
  }
  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
    position:fixed;z-index:50;height:62px;
    left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
    border-radius:999px;
    /* Kaca cair: latar tembus pandang yang mengaburkan isi halaman di belakangnya */
    background:var(--kaca);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    backdrop-filter:blur(24px) saturate(180%);
    border:1px solid var(--kaca-garis);
    box-shadow:
      inset 0 1px 0 var(--kaca-kilau),
      inset 0 -1px 0 var(--kaca-alas),
      0 12px 32px -14px rgba(0,0,0,.5);
  }
  /* Peramban tanpa dukungan blur tetap dapat bar yang jelas terbaca */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .tabbar{background:var(--surface);border-color:var(--border-soft)}
  }
  .tab{
    position:relative;display:flex;align-items:center;justify-content:center;
    height:100%;color:var(--muted);transition:color .18s var(--ease);
  }
  /* Label disembunyikan secara visual, tetap terbaca pembaca layar */
  .tab > span:not(.t-icon){
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .tab .t-icon{display:grid;place-items:center;transition:transform .22s var(--ease)}
  .tab .t-icon svg{width:22px;height:22px}
  .tab.on{color:var(--primary)}
  .tab.on .t-icon{transform:translateY(-4px)}
  .tab.on::after{
    content:"";position:absolute;left:50%;bottom:12px;
    width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
    background:var(--primary);animation:tabDot .26s var(--ease);
  }
  @keyframes tabDot{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

  /* Tombol tengah duduk di dalam bar, dibuat timbul seperti tombol fisik */
  .tab-fab{
    width:48px;height:48px;border-radius:50%;color:#fff;
    justify-self:center;align-self:center;margin-bottom:5px;
    background:linear-gradient(180deg,var(--fab-atas) 0%,var(--primary) 50%,var(--primary-2) 100%);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.55),
      inset 0 -4px 6px rgba(0,0,0,.28),
      0 0 0 1px rgba(0,0,0,.3),
      0 5px 0 var(--fab-bibir),
      0 8px 13px -4px rgba(0,0,0,.55);
    transition:transform .1s var(--ease),box-shadow .1s var(--ease);
  }
  /* Kilau di punggung tombol supaya permukaannya terasa cembung */
  .tab-fab::before{
    content:"";position:absolute;left:7px;right:7px;top:5px;height:44%;
    border-radius:50% / 60%;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0));
    transition:opacity .1s var(--ease);
  }
  .tab-fab:active{
    transform:translateY(4px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.32),
      inset 0 -2px 5px rgba(0,0,0,.34),
      0 0 0 1px rgba(0,0,0,.3),
      0 1px 0 var(--fab-bibir),
      0 3px 8px -5px rgba(0,0,0,.55);
  }
  .tab-fab:active::before{opacity:.45}
  .tab-fab .t-icon{position:relative;z-index:1}
  .tab-fab .t-icon svg{width:24px;height:24px;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.34))}
  .tab-fab.on::after,.tab-fab .t-icon{transform:none}
  .modal-layer{align-items:flex-end;padding:0}
  .modal{
    max-width:none;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:calc(100dvh - 34px);
    animation:sheet .3s var(--ease);
  }
  @keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
  /* Di ponsel daftar tidak dibatasi tingginya sendiri. Dua wadah gulir yang
     bertumpuk bikin seretan jari sering nyangkut di wadah dalam, jadi cukup
     badan popupnya saja yang menggulir. */
  .list-scroll{max-height:none;overflow-y:visible;margin:0;padding:0}
  .modal-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .ring{width:150px;height:150px}
}
@media all{
  .g-4{gap:11px}
  .stat{padding:13px;gap:7px}
  .stat-ic{width:31px;height:31px;border-radius:9px}
  .stat-ic svg{width:15px;height:15px}
  .stat-name{font-size:11.6px;line-height:1.3;min-height:2.6em;display:flex;align-items:center}
  .stat-val{font-size:17.5px;letter-spacing:-.35px}
  .stat-lead .stat-val{font-size:26px;letter-spacing:-.7px}
  .stat-foot{font-size:10.6px;flex-wrap:nowrap;gap:4px}
  .stat-foot svg{width:12px;height:12px}
  .row-2{grid-template-columns:1fr}
  .hero-amount{font-size:27px}
  .chip-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}
}

/* ============ Utilities ============ */
.flex{display:flex} .between{justify-content:space-between} .center{align-items:center}
.gap-6{gap:6px} .gap-10{gap:10px} .gap-14{gap:14px} .wrap{flex-wrap:wrap}
.mt-4{margin-top:4px} .mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px}
.mb-0{margin-bottom:0} .mb-8{margin-bottom:8px} .mb-14{margin-bottom:14px}
.txt-muted{color:var(--muted)} .txt-dim{color:var(--text-dim)}
.txt-sm{font-size:12.4px} .txt-xs{font-size:11.5px}
.nowrap{white-space:nowrap} .tnum{font-variant-numeric:tabular-nums}
.grow{flex:1;min-width:0} .hidden{display:none!important}
.fw6{font-weight:600} .fw7{font-weight:700}
.c-income{color:var(--income)} .c-expense{color:var(--expense)}
.c-saving{color:var(--saving)} .c-primary{color:var(--primary)}

/* ============ Range slider ============ */
input[type="range"]{
  -webkit-appearance:none;appearance:none;background:transparent;height:22px;cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:6px;border-radius:99px;background:var(--surface-3);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;margin-top:-6px;
  background:var(--primary);border:3px solid var(--surface);box-shadow:0 2px 8px -2px var(--primary);
  transition:transform .14s var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.12)}
input[type="range"]::-moz-range-track{height:6px;border-radius:99px;background:var(--surface-3)}
input[type="range"]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--primary);
  border:3px solid var(--surface);box-shadow:0 2px 8px -2px var(--primary);
}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--primary-soft)}

/* Perangkat sentuh: baris transaksi cukup diketuk untuk membuka editor */
@media (hover:none){
  .tx-actions{display:none}
  .tx{padding:11px 8px}
}

/* ============ Popover pemilih bulan ============ */
.popover{
  position:fixed;z-index:75;width:274px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:12px;animation:popIn .18s var(--ease);
}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.pop-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:10px;padding:0 2px;
}
.pop-head strong{font-size:15px;font-weight:650;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.month-cell{
  position:relative;padding:11px 4px 13px;border-radius:var(--r-sm);
  font-size:13px;font-weight:560;color:var(--text-dim);
  border:1.5px solid transparent;transition:.15s var(--ease);
}
.month-cell:hover{background:var(--surface-2);color:var(--text)}
.month-cell.now{border-color:var(--border);color:var(--text)}
.month-cell.on{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;border-color:transparent;font-weight:680;
  box-shadow:0 6px 16px -8px var(--primary);
}
.mc-dot{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--primary);
}
.month-cell.on .mc-dot{background:rgba(255,255,255,.9)}
.pop-foot{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft)}
.pop-legend{
  display:flex;align-items:center;gap:6px;justify-content:center;
  font-size:11px;color:var(--muted);margin-top:8px;
}
.pop-legend i{width:4px;height:4px;border-radius:50%;background:var(--primary);display:block}

.month-label{display:flex;align-items:center;justify-content:center;gap:6px}
.month-label svg{width:14px;height:14px;opacity:.6;flex:none;transition:transform .2s var(--ease)}
.month-label[aria-expanded="true"] svg{transform:rotate(180deg);opacity:1}

/* ============ Kalkulator ============ */
.g-calc{display:grid;gap:16px;grid-template-columns:minmax(0,404px) minmax(0,1fr)}
.calc-display{
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:18px;text-align:right;min-height:116px;margin-bottom:14px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
}
.calc-expr{
  font-size:14px;color:var(--muted);min-height:22px;line-height:1.55;
  font-variant-numeric:tabular-nums;word-break:break-all;
}
.calc-result{
  font-size:34px;font-weight:700;letter-spacing:-1.1px;line-height:1.15;
  font-variant-numeric:tabular-nums;word-break:break-all;
}
.calc-result.err{font-size:17px;font-weight:600;color:var(--danger);letter-spacing:0}
.calc-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.calc-key{
  height:58px;border-radius:var(--r-md);font-size:19px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border-soft);color:var(--text);
  display:grid;place-items:center;transition:.12s var(--ease);user-select:none;
}
.calc-key:hover{background:var(--surface-3)}
.calc-key:active{transform:scale(.95)}
.calc-key.op{color:var(--primary);font-size:21px}
.calc-key.fn{color:var(--muted);font-size:16.5px;font-weight:650}
.calc-key.eq{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;border-color:transparent;box-shadow:0 8px 18px -10px var(--primary);
}
.calc-key.eq:hover{filter:brightness(1.08)}
.calc-key svg{width:19px;height:19px}
.calc-actions{display:flex;gap:9px;margin-top:14px}
.calc-actions .btn{flex:1;min-width:0}
.hist-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 11px;border-radius:var(--r-sm);cursor:pointer;transition:background .14s;
}
.hist-item:hover{background:var(--surface-2)}
.hist-expr{
  font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hist-res{font-size:15px;font-weight:640;font-variant-numeric:tabular-nums;flex:none}
@media all{
  .g-calc{grid-template-columns:1fr}
  .calc-key{height:56px}
}

/* ============ Layar masuk ============ */
.auth{
  /* Diberi lapisan sendiri di atas wadah popup, supaya sisa popup yang belum
     sempat terhapus tidak pernah bisa menutupi layar masuk. */
  position:relative;z-index:140;
  /* Tinggi dipatok, bukan min-height, supaya layar ini jadi wadah gulirnya
     sendiri. Body memang overflow:hidden demi kerangka aplikasi, jadi kalau
     dibiarkan tumbuh, isinya yang lebih tinggi dari layar tidak bisa digulir. */
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:26px 18px calc(26px + env(safe-area-inset-bottom));
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(38,192,106,.22), transparent 62%),
    radial-gradient(760px 460px at 92% 8%, rgba(15,169,138,.20), transparent 60%),
    var(--bg);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
/* Margin auto, bukan justify-content:center. Saat ruang berlebih isinya tetap
   di tengah, tapi saat isinya lebih tinggi dari layar margin auto jadi nol,
   jadi bagian atas tidak terpotong dan semuanya tetap terjangkau. */
.auth > :first-child{margin-top:auto}
.auth > :last-child{margin-bottom:auto}
.auth[hidden]{display:none;visibility:hidden;pointer-events:none}
.auth-panel{
  width:100%;max-width:412px;background:var(--surface);
  border:1px solid var(--border-soft);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);padding:24px;animation:fadeUp .3s var(--ease);
}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.auth-brand .brand-mark{width:44px;height:44px;border-radius:14px}
.auth-brand .brand-mark svg{width:25px;height:25px}
.auth-brand .brand-text strong{font-size:18px}
.auth-title{font-size:19px;font-weight:680;letter-spacing:-.4px;margin-bottom:3px}
.auth-sub{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:18px}
.auth-foot{
  font-size:11.5px;color:var(--muted);text-align:center;max-width:412px;line-height:1.6;
}
.auth-err{
  display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border-radius:var(--r-sm);
  background:rgba(242,84,75,.12);border:1px solid rgba(242,84,75,.26);
  color:var(--danger);font-size:12.6px;line-height:1.5;margin-bottom:14px;
}
.auth-err svg{width:16px;height:16px;flex:none;margin-top:1px}
.auth-switch{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--border-soft);
  text-align:center;font-size:13px;color:var(--muted);
}
.auth-switch button{
  color:var(--primary);font-weight:640;font-size:13px;
  text-decoration:underline;text-underline-offset:3px;
}
.auth-users{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.auth-user{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--border-soft);
  transition:.15s var(--ease);text-align:left;width:100%;
}
.auth-user:hover{border-color:var(--primary);transform:translateY(-1px)}
.auth-user.on{border-color:var(--primary);background:var(--primary-soft)}
.auth-avatar{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-weight:700;font-size:14.5px;color:#fff;
}
.auth-user-txt{min-width:0;flex:1}
.auth-user-txt b{display:block;font-size:13.8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-user-txt small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:42px}
.pw-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--muted);
}
.pw-eye:hover{background:var(--surface-3);color:var(--text)}
.pw-eye svg{width:17px;height:17px}
.auth-busy{opacity:.6;pointer-events:none}

/* Tombol akses akun di pojok kanan header */
.acct-btn{
  display:flex;align-items:center;gap:9px;max-width:210px;
  padding:4px 11px 4px 4px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border-soft);
  transition:.15s var(--ease);
}
.acct-btn:hover{border-color:var(--primary);background:var(--surface-3)}
.acct-btn.on{border-color:var(--primary);background:var(--primary-soft)}
.acct-btn .auth-avatar{width:32px;height:32px;font-size:13px}
.acct-txt{min-width:0;text-align:left}
.acct-txt b{
  display:block;font-size:13px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.acct-txt small{display:block;font-size:11px;color:var(--muted);line-height:1.25}
.acct-btn > svg{width:15px;height:15px;color:var(--muted);flex:none;transition:transform .18s var(--ease)}
.acct-btn.on > svg{transform:rotate(180deg)}

/* Menu akun yang muncul dari tombol itu */
.pop-akun{width:252px;padding:10px}
.pop-akun-head{
  display:flex;align-items:center;gap:10px;padding:5px 6px 11px;
  border-bottom:1px solid var(--border-soft);margin-bottom:8px;
}
.pop-akun-head .auth-avatar{width:38px;height:38px;font-size:15px}
.pop-akun-head div{min-width:0}
.pop-akun-head b{
  display:block;font-size:14px;font-weight:650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pop-akun-head small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.pop-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:500;color:var(--text);transition:background .14s;
}
.pop-item:hover{background:var(--surface-2)}
.pop-item svg{width:17px;height:17px;color:var(--muted);flex:none}
.pop-item.danger,.pop-item.danger svg{color:var(--danger)}
.pop-sep{height:1px;background:var(--border-soft);margin:6px 4px}

@media all{
  /* Di ponsel tombol tambah dipegang navbar, akun jadi lingkaran avatar saja */
  .add-btn{display:none}
  .acct-btn{
    width:42px;height:42px;padding:0;gap:0;max-width:none;
    border-radius:50%;justify-content:center;
  }
  .acct-btn .auth-avatar{width:100%;height:100%;font-size:14px}
  .acct-txt,.acct-btn > svg{display:none}
}

/* ============ Sambutan pertama (ala OOBE) ============ */
.oobe{
  position:fixed;inset:0;z-index:200;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:34px;text-align:center;cursor:pointer;user-select:none;
  background:#06140F;animation:oobeIn .7s var(--ease);
}
.oobe[hidden]{display:none;visibility:hidden;pointer-events:none;animation:none}
.oobe::before{
  content:"";position:absolute;inset:-35%;
  background:
    radial-gradient(closest-side, rgba(34,197,110,.58), transparent 70%) 18% 28%/62% 62% no-repeat,
    radial-gradient(closest-side, rgba(13,148,136,.55), transparent 70%) 82% 22%/58% 58% no-repeat,
    radial-gradient(closest-side, rgba(132,204,22,.28), transparent 70%) 52% 88%/62% 62% no-repeat;
  filter:blur(8px);animation:oobeSwirl 20s ease-in-out infinite alternate;
}
@keyframes oobeIn{from{opacity:0}to{opacity:1}}
@keyframes oobeSwirl{from{transform:rotate(0deg) scale(1)}to{transform:rotate(15deg) scale(1.14)}}
.oobe.oobe-out{animation:oobeOut .6s var(--ease) forwards}
@keyframes oobeOut{to{opacity:0}}
.oobe-inner{position:relative;z-index:1;max-width:780px}
.oobe-line{
  display:block;color:#fff;font-weight:600;letter-spacing:-1.3px;line-height:1.26;
  font-size:clamp(27px,5.6vw,52px);animation:oobeLine 1.3s var(--ease);
}
@keyframes oobeLine{
  from{opacity:0;transform:translateY(16px);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.oobe-logo{
  width:68px;height:68px;border-radius:21px;margin:0 auto 24px;display:grid;place-items:center;
  background:rgba(255,255,255,.17);color:#fff;backdrop-filter:blur(6px);
  animation:oobeLine 1s var(--ease);
}
.oobe-logo svg{width:35px;height:35px}
.oobe{cursor:default}

@media (prefers-reduced-motion:reduce){
  .oobe::before{animation:none}
  .oobe,.oobe-line,.oobe-logo{animation-duration:.01ms}
}

/* ============ Bingkai kolom ponsel ============ */
/* Seluruh aplikasi hidup di dalam satu kolom selebar ponsel yang diletakkan di
   tengah layar. Elemen yang memakai position:fixed mengacu ke jendela, bukan ke
   kolom ini, jadi tepi kiri dan kanannya dihitung sendiri lewat --tepi-app. */
body{background:var(--luar-app)}

.app,
.auth{
  max-width:var(--lebar-app);
  margin-left:auto;margin-right:auto;
}
.app{
  background:var(--bg);
  border-left:1px solid var(--border-soft);
  border-right:1px solid var(--border-soft);
  box-shadow:0 0 60px -10px rgba(0,0,0,.45);
}
/* Garis tepi disembunyikan saat kolomnya sudah selebar layar */
@media (max-width:440px){
  .app{border-left:none;border-right:none}
}

.oobe,
.modal-root{left:var(--tepi-app);right:var(--tepi-app)}

/* Menu geser menempel di tepi kolom, dan saat tertutup harus terdorong keluar
   layar sepenuhnya, bukan cuma keluar kolom, agar tidak mengintip di sisi kiri. */
.sidebar{
  left:var(--tepi-app);
  transform:translateX(calc(-102% - var(--tepi-app)));
}
.sidebar-scrim{
  left:var(--tepi-app);right:var(--tepi-app);
  width:auto;
}
.tabbar{
  left:calc(var(--tepi-app) + 16px);
  right:calc(var(--tepi-app) + 16px);
}
.main::after{left:var(--tepi-app);right:var(--tepi-app)}
.toast{max-width:calc(var(--lebar-app) - 40px)}

/* ============ Layar mulai ============ */
.mulai{
  position:fixed;top:0;bottom:0;z-index:150;overflow:hidden;
  left:var(--tepi-app);right:var(--tepi-app);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:32px 22px calc(32px + env(safe-area-inset-bottom));
  background:#04100B;animation:oobeIn .5s var(--ease);
}
.mulai[hidden]{display:none;visibility:hidden;pointer-events:none;animation:none}
/* Dua lapis cahaya hijau yang bergerak pelan seperti lampu yang menyapu ruangan */
.mulai::before,.mulai::after{content:"";position:absolute;inset:-40%;pointer-events:none}
.mulai::before{
  background:
    radial-gradient(closest-side, rgba(38,192,106,.34), transparent 72%) 22% 26%/58% 58% no-repeat,
    radial-gradient(closest-side, rgba(15,169,138,.30), transparent 72%) 80% 30%/52% 52% no-repeat;
  animation:mulaiSapu 18s ease-in-out infinite alternate;
}
.mulai::after{
  background:radial-gradient(closest-side, rgba(132,204,22,.15), transparent 72%) 50% 86%/62% 62% no-repeat;
  animation:mulaiNapas 7s ease-in-out infinite alternate;
}
@keyframes mulaiSapu{
  from{transform:translate3d(-4%,-2%,0) rotate(0deg) scale(1)}
  to{transform:translate3d(5%,3%,0) rotate(16deg) scale(1.18)}
}
@keyframes mulaiNapas{
  from{opacity:.42;transform:scale(.94)}
  to{opacity:.88;transform:scale(1.1)}
}
.mulai-isi{
  position:relative;z-index:1;width:100%;max-width:420px;
  display:flex;flex-direction:column;align-items:center;
}
.mulai-mark{
  width:84px;height:84px;border-radius:26px;display:grid;place-items:center;
  background:rgba(255,255,255,.15);color:#fff;
  box-shadow:0 20px 46px -18px rgba(0,0,0,.7);
  animation:mulaiNaik .8s var(--ease) both;
}
.mulai-mark svg{width:44px;height:44px}
.mulai-nama{
  margin-top:22px;color:#fff;font-weight:700;line-height:1.1;letter-spacing:-1.4px;
  font-size:clamp(32px,9vw,44px);animation:mulaiNaik .8s .1s var(--ease) both;
}
.mulai-tagline{
  margin-top:9px;color:rgba(255,255,255,.72);font-size:15px;letter-spacing:.2px;
  animation:mulaiNaik .8s .2s var(--ease) both;
}
.mulai-btn{
  margin-top:36px;width:100%;max-width:280px;
  padding:14px 22px;font-size:15.5px;border-radius:999px;
  animation:mulaiNaik .8s .32s var(--ease) both;
}
@keyframes mulaiNaik{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .mulai::before,.mulai::after{animation:none}
  .mulai,.mulai-mark,.mulai-nama,.mulai-tagline,.mulai-btn{animation-duration:.01ms}
}

/* ============ Hak cipta ============ */
.copyright{
  text-align:center;font-size:11.8px;color:var(--text-dim);
  line-height:1.75;padding:4px 0 2px;letter-spacing:.1px;
}
.copyright span{font-size:11.2px}

/* ---------- Tombol Google di layar masuk ---------- */
.auth-or{
  display:flex;align-items:center;gap:10px;margin:14px 0 12px;
  font-size:12px;color:var(--muted);
}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border-soft)}
.btn-google{gap:10px}
.btn-google svg{width:18px;height:18px;flex:none}