/* ===== Theme tokens ===== */
:root[data-theme="dark"]{
  --primary:#1DB954;
  --primary-hover:#1ED760;
  --secondary:#535353;
  --neutral:#B3B3B3;
  --bg:#121212;
  --surface:#181818;
  --surface-l2:#282828;
  --surface-l3:#333333;
  --text-primary:#FFFFFF;
  --text-secondary:#A7A7A7;
  --border:#282828;
  --warning:#F59B23;
  --error:#E22134;
  --nav-bg:#0A0A0A;
  --alert-bg:linear-gradient(180deg,#2A2110,#221B0E);
  --alert-border:#4A3A14;
  --shadow-soft:rgba(0,0,0,0.5);
  --input-outline:#FFFFFF;
}
:root[data-theme="light"]{
  --primary:#1DB954;
  --primary-hover:#169C46;
  --secondary:#9E9E9E;
  --neutral:#6B6B6B;
  --bg:#F5F5F5;
  --surface:#FFFFFF;
  --surface-l2:#ECECEC;
  --surface-l3:#DDDDDD;
  --text-primary:#121212;
  --text-secondary:#5B5B5B;
  --border:#E2E2E2;
  --warning:#B96A0A;
  --error:#C21D2E;
  --nav-bg:#FFFFFF;
  --alert-bg:linear-gradient(180deg,#FFF3E0,#FFECC7);
  --alert-border:#F0C989;
  --shadow-soft:rgba(0,0,0,0.12);
  --input-outline:#121212;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text-primary);font-family:'DM Sans',sans-serif;}
body{-webkit-font-smoothing:antialiased;display:flex;justify-content:center;transition:background .2s ease,color .2s ease;}
.app{width:100%;max-width:430px;min-height:100vh;background:var(--bg);position:relative;display:flex;flex-direction:column;padding-bottom:78px;}

/* ===== Top bar (theme toggle) ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0;}
.topbar-brand{font-size:14px;font-weight:800;letter-spacing:-0.01em;}
.topbar-brand span{color:var(--primary);}
.theme-toggle{
  width:36px;height:36px;border-radius:9999px;background:var(--surface-l2);
  display:flex;align-items:center;justify-content:center;color:var(--text-primary);
  text-decoration:none;
}
.theme-toggle svg{width:18px;height:18px;}

/* ===== Header ===== */
.header{padding:16px 20px 8px;}
.greeting-row{display:flex;justify-content:space-between;align-items:flex-start;}
.greeting-label{font-size:12px;color:var(--text-secondary);font-weight:500;}
.greeting-name{font-size:20px;font-weight:700;letter-spacing:-0.01em;margin-top:2px;}
.avatar-toggle{display:flex;background:var(--surface-l2);border-radius:9999px;padding:2px;gap:2px;}
.avatar-toggle a{
  border:none;background:transparent;color:var(--text-secondary);
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:11px;
  padding:6px 12px;border-radius:9999px;cursor:pointer;text-decoration:none;
}
.avatar-toggle a.active{background:var(--text-primary);color:var(--bg);}

.balance-block{margin-top:18px;}
.balance-label{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-secondary);font-weight:700;}
.balance-amount{font-size:36px;font-weight:800;letter-spacing:-0.02em;margin-top:4px;}
.balance-sub{font-size:13px;color:var(--text-secondary);margin-top:6px;display:flex;gap:14px;flex-wrap:wrap;}
.balance-sub span b{color:var(--text-primary);font-weight:700;}

/* ===== Alert ===== */
.alert-card{margin:18px 20px 0;background:var(--alert-bg);border:1px solid var(--alert-border);border-radius:8px;padding:14px 16px;display:flex;align-items:center;gap:12px;}
.alert-icon{width:36px;height:36px;border-radius:9999px;background:rgba(245,155,35,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.alert-text{flex:1;font-size:13px;line-height:1.4;}
.alert-text b{color:var(--warning);font-weight:700;}
.alert-btn{background:var(--warning);color:#1A1200;border:none;border-radius:9999px;padding:8px 14px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:12px;white-space:nowrap;cursor:pointer;}

.saved-banner{margin:16px 20px 0;background:rgba(29,185,84,0.12);border:1px solid var(--primary);color:var(--primary);font-size:13px;font-weight:700;padding:10px 14px;border-radius:8px;}

/* ===== Section ===== */
.section{padding:0 20px;margin-top:28px;}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.section-title{font-size:16px;font-weight:700;}
.section-link{font-size:12px;color:var(--text-secondary);font-weight:700;background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:none;}

/* ===== Budget rows ===== */
.budget-row{margin-bottom:16px;}
.budget-row:last-child{margin-bottom:0;}
.budget-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.budget-name{font-size:14px;font-weight:700;}
.budget-nums{font-size:12px;color:var(--text-secondary);}
.budget-nums b{color:var(--text-primary);font-weight:700;}
.budget-track{height:6px;background:var(--surface-l2);border-radius:9999px;overflow:hidden;}
.budget-fill{height:100%;border-radius:9999px;transition:width .3s ease;}
.budget-fill.ok{background:var(--primary);}
.budget-fill.warn{background:var(--warning);}
.budget-fill.over{background:var(--error);}
.budget-pct{font-size:11px;font-weight:700;margin-top:4px;}
.budget-pct.ok{color:var(--primary);}
.budget-pct.warn{color:var(--warning);}
.budget-pct.over{color:var(--error);}

/* ===== Transaction list ===== */
.tx-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.tx-row:last-child{border-bottom:none;}
.tx-icon{width:40px;height:40px;border-radius:9999px;background:var(--surface-l2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;}
.tx-mid{flex:1;min-width:0;}
.tx-cat{font-size:14px;font-weight:700;}
.tx-meta{font-size:12px;color:var(--text-secondary);margin-top:1px;}
.tx-amount{font-size:14px;font-weight:700;white-space:nowrap;}
.tx-amount.out{color:var(--text-primary);}
.tx-amount.in{color:var(--primary);}

/* ===== Accounts strip ===== */
.accounts-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
.accounts-strip::-webkit-scrollbar{display:none;}
.account-card{flex:0 0 auto;width:150px;background:var(--surface);border-radius:8px;padding:14px;border:1px solid var(--border);}
.account-bank{font-size:11px;letter-spacing:0.06em;color:var(--text-secondary);font-weight:700;text-transform:uppercase;}
.account-owner{font-size:12px;color:var(--text-secondary);margin-top:8px;}
.account-balance{font-size:16px;font-weight:800;margin-top:2px;}

/* ===== Bottom nav ===== */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:64px;background:var(--nav-bg);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;z-index:20;}
.nav-item{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;cursor:pointer;padding:6px 10px;text-decoration:none;}
.nav-item.active{color:var(--text-primary);}
.nav-item svg{width:22px;height:22px;}

.fab{position:fixed;bottom:78px;left:50%;transform:translateX(calc(-50% + 155px));width:56px;height:56px;border-radius:9999px;background:var(--primary);border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(29,185,84,0.4);cursor:pointer;z-index:21;transition:transform .15s ease,background .15s ease;}
.fab:active{transform:translateX(calc(-50% + 155px)) scale(0.94);background:var(--primary-hover);}

/* ===== Modal (add transaction) ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:30;display:none;align-items:flex-end;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal-sheet{width:100%;max-width:430px;background:var(--surface);border-radius:16px 16px 0 0;padding:8px 20px 28px;max-height:90vh;overflow-y:auto;animation:slideUp .22s ease;}
@keyframes slideUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.sheet-handle{width:36px;height:4px;background:var(--surface-l2);border-radius:9999px;margin:10px auto 18px;}
.sheet-title{font-size:18px;font-weight:700;margin-bottom:16px;}

.tab-row{display:flex;background:var(--surface-l2);border-radius:9999px;padding:3px;margin-bottom:20px;}
.tab-btn{flex:1;border:none;background:transparent;color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-weight:700;font-size:13px;padding:9px 0;border-radius:9999px;cursor:pointer;}
.tab-btn.active{background:var(--primary);color:#FFFFFF;}

.amount-input-wrap{text-align:center;margin-bottom:22px;}
.amount-currency{font-size:14px;color:var(--text-secondary);font-weight:700;}
.amount-input{width:100%;background:transparent;border:none;color:var(--text-primary);font-family:'DM Sans',sans-serif;font-weight:800;font-size:40px;text-align:center;outline:none;margin-top:4px;}
.amount-input::placeholder{color:var(--secondary);}

.field{margin-bottom:16px;}
.field-label{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-secondary);font-weight:700;margin-bottom:8px;display:block;}
.field select,.field input[type=text],.field input[type=date]{width:100%;height:44px;background:var(--surface-l2);border:none;border-radius:4px;color:var(--text-primary);padding:0 12px;font-family:'DM Sans',sans-serif;font-size:14px;appearance:none;-webkit-appearance:none;}
.field select:focus,.field input:focus{outline:1px solid var(--input-outline);}
.select-wrap{position:relative;}
.select-wrap::after{content:"▾";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none;font-size:12px;}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.key{height:52px;background:var(--surface-l2);border:none;border-radius:8px;color:var(--text-primary);font-family:'DM Sans',sans-serif;font-weight:700;font-size:18px;cursor:pointer;}
.key:active{background:var(--surface-l3);}
.key.func{color:var(--text-secondary);font-size:16px;}

.primary-btn{width:100%;height:52px;background:var(--primary);border:none;border-radius:9999px;color:#FFFFFF;font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;}
.primary-btn:active{background:var(--primary-hover);}

/* Settings screen */
.settings-tabs{display:flex;gap:8px;padding:20px 20px 0;}
.stab{padding:8px 16px;border-radius:9999px;background:var(--surface-l2);border:none;color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-weight:700;font-size:13px;cursor:pointer;}
.stab.active{background:var(--text-primary);color:var(--bg);}

.setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);}
.setting-name{font-size:14px;font-weight:700;}
.setting-due{font-size:12px;color:var(--text-secondary);margin-top:2px;}
.setting-edit{width:110px;height:36px;background:var(--surface-l2);border:none;border-radius:4px;color:var(--text-primary);text-align:right;padding:0 10px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:13px;}
.setting-edit:focus{outline:1px solid var(--input-outline);}
.bill-status{font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 8px;border-radius:9999px;}
.bill-status.lunas{background:rgba(29,185,84,0.15);color:var(--primary);}
.bill-status.pending{background:rgba(245,155,35,0.15);color:var(--warning);}

.page-heading{padding:20px 20px 4px;font-size:22px;font-weight:800;letter-spacing:-0.02em;}
::-webkit-scrollbar{width:0;height:0;}