:root{
  --bg:#eef1f6; --surface:#fff; --surface-2:#f7f9fc; --text:#16233b; --muted:#6c7a91;
  --border:#e2e8f2; --primary:#2f6fed; --primary-soft:#e8f0ff;
  --green:#17a06a; --green-soft:#e6f7f0; --red:#e0474c; --red-soft:#fdecec;
  --amber:#e8a020; --amber-soft:#fdf3e2; --purple:#8b5cf6; --purple-soft:#f1ecfe;
  --shadow:0 6px 24px rgba(22,35,59,.08); --radius:16px;
}
html[data-theme="dark"]{
  --bg:#0f1522; --surface:#161e2e; --surface-2:#1c2537; --text:#e8eefb; --muted:#94a3b8;
  --border:#26314a; --primary:#4b86f7; --primary-soft:#1b2942;
  --green:#2bc98a; --green-soft:#122b23; --red:#f2696e; --red-soft:#2b1416;
  --amber:#f2b13d; --amber-soft:#2b2313; --purple:#a78bfa; --purple-soft:#221c3a;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{height:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; font-family:'Vazirmatn',Tahoma,sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
button,input,select,textarea{font-family:'Vazirmatn',Tahoma,sans-serif; font-size:inherit; color:inherit;}
button{touch-action:manipulation}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* Utility */
.spacer{flex:1}
.pill{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:12px;color:var(--muted); white-space:nowrap}
.hint{font-size:12px;color:var(--muted);line-height:1.9}
.kv{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--border);font-size:13px; gap:10px; flex-wrap:wrap}
.kv:last-child{border-bottom:0}
.empty{padding:34px 12px;text-align:center;color:var(--muted);font-size:13px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:7px;vertical-align:middle}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.badge.expense{background:var(--red-soft);color:var(--red)}
.badge.income{background:var(--green-soft);color:var(--green)}
.badge.amber{background:var(--amber-soft);color:var(--amber)}
.badge.purple{background:var(--purple-soft);color:var(--purple)}
.badge.blue{background:var(--primary-soft);color:var(--primary)}
.amount{font-weight:700;white-space:nowrap}
.amount.expense{color:var(--red)} .amount.income{color:var(--green)}