/* مصروفك (Masroofak) — "Blue Titanium" theme: midnight navy, frosted glass, thin numerals. */

/* IBM Plex Sans Arabic 5.3.0 (OFL-1.1, vendor/fonts/ibm-plex-sans-arabic-LICENSE-OFL.txt), from the @fontsource npm tarball. */
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 200; src: url(./vendor/fonts/plex-arabic-arabic-200.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 300; src: url(./vendor/fonts/plex-arabic-arabic-300.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 400; src: url(./vendor/fonts/plex-arabic-arabic-400.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 500; src: url(./vendor/fonts/plex-arabic-arabic-500.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 600; src: url(./vendor/fonts/plex-arabic-arabic-600.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 200; src: url(./vendor/fonts/plex-arabic-latin-200.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 300; src: url(./vendor/fonts/plex-arabic-latin-300.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 400; src: url(./vendor/fonts/plex-arabic-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 500; src: url(./vendor/fonts/plex-arabic-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 600; src: url(./vendor/fonts/plex-arabic-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  color-scheme: dark;
  --bg: #05080f;
  --fg: #eef3fb;
  --muted: #8b97ad;
  --faint: #5d6a82;
  --chip: rgba(160, 190, 255, 0.06);
  --chip-strong: rgba(150, 180, 240, 0.15);
  --line: rgba(170, 200, 255, 0.11);
  --line-strong: rgba(170, 200, 255, 0.22);
  --card: linear-gradient(155deg, rgba(150, 180, 240, 0.16), rgba(255, 255, 255, 0.025) 62%);
  --card-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(200, 220, 255, 0.14);
  --field: rgba(6, 11, 22, 0.55);
  --track: rgba(170, 200, 255, 0.09);
  --bar: linear-gradient(90deg, #4f6fa8, #d9e6ff);
  --accent: #dfe9ff;
  --accent-fg: #0b1424;
  --blue: #8fb1ff;
  --income: #8fe0c2;
  --danger: #ff8a8a;
  --warn: #f3c886;
  --danger-fg: #2a0707;
  --divider: rgba(170, 200, 255, 0.07);
  --page-bg: linear-gradient(180deg, #121a2a 0%, #080d18 420px, #05080f 100%);
  --glow-1: rgba(90, 130, 210, 0.30);
  --glow-2: rgba(60, 90, 170, 0.18);
  --shade-bg: radial-gradient(120% 80% at 0% 0%, rgba(90, 130, 210, 0.35), transparent 60%), linear-gradient(180deg, #0f1726, #05080f);
  --sheet-bg: linear-gradient(180deg, #0f1726, #05080f);
  --dialog-bg: linear-gradient(155deg, #18233a, #0c1322);
  --overlay: rgba(3, 6, 12, 0.7);
  --float-bg: linear-gradient(155deg, #1b2740, #0f1727);
  --dock-bg: rgba(18, 26, 42, 0.72);
  --float-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  --dialog-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  --toast-bg: rgba(223, 233, 255, 0.96);
  --toast-fg: #0b1424;
  --toast-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  --inset-bg: rgba(6, 11, 22, 0.45);
  --sheen: rgba(255, 255, 255, 0.06);
  --accent-glow: rgba(143, 177, 255, 0.28);
  --submit-glow: rgba(143, 177, 255, 0.22);
  --blue-tint: rgba(143, 177, 255, 0.20);
  --blue-tint-2: rgba(143, 177, 255, 0.04);
  --income-tint: rgba(143, 224, 194, 0.08);
  --income-tint-2: rgba(143, 224, 194, 0.12);
  --income-line: rgba(143, 224, 194, 0.35);
  --danger-line: rgba(255, 138, 138, 0.3);
  --warn-line: rgba(243, 200, 134, 0.35);
  --amt-placeholder: rgba(238, 243, 251, 0.25);
  --blur-text: rgba(238, 243, 251, 0.75);
  --on-blue: #08101f;
  --listening-fg: #1a0606;
  --goal-bar: linear-gradient(90deg, #5aa58a, #8fe0c2);
  --brand-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(170, 200, 255, 0.18);
  --page-shadow: 0 0 80px rgba(0, 0, 0, 0.45);
  --search-cancel: invert(0.7);
  --radius: 24px;
  --font: 'Plex Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* legacy names still used by a few templates */
  --text-primary: var(--fg); --text-secondary: var(--muted); --text-muted: var(--faint);
  --accent-green: var(--income); --accent-red: var(--danger); --accent-amber: var(--warn); --accent-blue: var(--blue);
  --border: var(--line); --border-light: var(--line-strong);
}

/* Light theme «لؤلؤي» (chosen by the owner, 2026-10-20). boot.js sets data-theme before the
   first paint: the phone's setting, or the one picked in Settings. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f8;
  --fg: #0e1a2f;
  --muted: #5a6880;
  --faint: #8692a8;
  --chip: rgba(30, 60, 120, 0.05);
  --chip-strong: rgba(30, 60, 120, 0.10);
  --line: rgba(30, 60, 120, 0.12);
  --line-strong: rgba(30, 60, 120, 0.22);
  --card: linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.66) 62%);
  --card-shadow: 0 14px 34px rgba(30, 50, 90, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --field: rgba(255, 255, 255, 0.78);
  --track: rgba(30, 60, 120, 0.10);
  --bar: linear-gradient(90deg, #8aa6dc, #1d3a6e);
  --accent: #14284d;
  --accent-fg: #ffffff;
  --blue: #2f5bc4;
  --income: #0e8a62;
  --danger: #cf3a3a;
  --warn: #a96800;
  --danger-fg: #ffffff;
  --divider: rgba(30, 60, 120, 0.07);
  --page-bg: linear-gradient(180deg, #f8fafd 0%, #eef2f8 420px, #e8edf5 100%);
  --glow-1: rgba(120, 160, 230, 0.26);
  --glow-2: rgba(150, 180, 240, 0.20);
  --shade-bg: radial-gradient(120% 80% at 0% 0%, rgba(120, 160, 230, 0.32), transparent 60%), linear-gradient(180deg, #f8fafd, #e6ecf5);
  --sheet-bg: linear-gradient(180deg, #f8fafd, #e9eef6);
  --dialog-bg: linear-gradient(155deg, #ffffff, #f1f4fa);
  --overlay: rgba(20, 30, 50, 0.35);
  --float-bg: linear-gradient(155deg, #ffffff, #eef2f9);
  --dock-bg: rgba(255, 255, 255, 0.80);
  --float-shadow: 0 14px 36px rgba(30, 50, 90, 0.16);
  --dialog-shadow: 0 26px 60px rgba(30, 50, 90, 0.22);
  --toast-bg: rgba(20, 40, 77, 0.96);
  --toast-fg: #ffffff;
  --toast-shadow: 0 14px 34px rgba(30, 50, 90, 0.25);
  --inset-bg: rgba(240, 244, 250, 0.85);
  --sheen: rgba(255, 255, 255, 0.5);
  --accent-glow: rgba(20, 40, 77, 0.25);
  --submit-glow: rgba(20, 40, 77, 0.20);
  --blue-tint: rgba(47, 91, 196, 0.12);
  --blue-tint-2: rgba(47, 91, 196, 0.03);
  --income-tint: rgba(14, 138, 98, 0.08);
  --income-tint-2: rgba(14, 138, 98, 0.10);
  --income-line: rgba(14, 138, 98, 0.35);
  --danger-line: rgba(207, 58, 58, 0.30);
  --warn-line: rgba(169, 104, 0, 0.35);
  --amt-placeholder: rgba(14, 26, 47, 0.22);
  --blur-text: rgba(14, 26, 47, 0.6);
  --on-blue: #ffffff;
  --listening-fg: #ffffff;
  --goal-bar: linear-gradient(90deg, #6fcaa8, #0e8a62);
  --brand-shadow: 0 10px 24px rgba(30, 50, 90, 0.18), 0 0 0 1px rgba(30, 60, 120, 0.10);
  --page-shadow: 0 0 60px rgba(30, 50, 90, 0.12);
  --search-cancel: none;
}

html.i18n-wait body { visibility: hidden; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-y: none; }
/* Phone layout everywhere. The insets keep content clear of the notch, the status bar
   (the installed app draws under it) and the home indicator. */
body {
  font-family: var(--font); font-weight: 400; color: var(--fg); min-height: 100vh; min-height: 100dvh; overflow-x: hidden;
  max-width: 440px; margin-inline: auto;
  padding: calc(18px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) calc(118px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overscroll-behavior-y: none;
  background: var(--page-bg) fixed;
  -webkit-font-smoothing: antialiased;
}
body::before, body::after { content: ""; position: fixed; pointer-events: none; z-index: -1; border-radius: 50%; }
body::before { width: 520px; height: 520px; top: -220px; left: -200px; background: radial-gradient(circle, var(--glow-1), transparent 65%); }
body::after { width: 460px; height: 460px; top: 260px; right: -280px; background: radial-gradient(circle, var(--glow-2), transparent 65%); }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.num { direction: ltr; unicode-bidi: isolate; display: inline-block; font-variant-numeric: lining-nums tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.sm { width: 16px; height: 16px; }

/* On a computer the same phone column sits in the middle of the screen. */
@media (min-width: 600px) {
  body { border-inline: 1px solid var(--line); box-shadow: var(--page-shadow); }
}
/* No grey flash, text selection or long-press menu on controls; no double-tap zoom delay. */
button, .seg-btn, .item-chip, .bill-cell, .tx-item, .dock-pill, .round, .hero { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- header ---------- */
.top-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.eyebrow { font-size: 0.78rem; font-weight: 300; color: var(--muted); }
.top-title { font-size: 1.45rem; font-weight: 500; letter-spacing: -0.2px; margin-top: 2px; }
.hdr-actions { display: flex; gap: 8px; }
.round { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); border: 1px solid var(--line); color: var(--fg); backdrop-filter: blur(12px); font-size: 0.9rem; font-weight: 500; }
.round:active { transform: scale(0.96); }
#privacyBtn .eye-off { display: none; }
#privacyBtn.revealed .eye-on { display: none; }
#privacyBtn.revealed .eye-off { display: block; }
#privacyBtn.revealed { color: var(--warn); border-color: var(--warn-line); }
.status-line { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--muted); font-weight: 300; margin-bottom: 18px; }
.status-line::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--income); box-shadow: 0 0 10px var(--income); }
.plan-badge { margin-inline-start: auto; padding: 2px 10px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--fg); font-weight: 400; font-size: 0.7rem; }
.plan-badge:empty { display: none; }
.status-pill { color: inherit; }

/* ---------- tabs ---------- */
.tab-pane { display: none; animation: rise 0.28s ease; }
.tab-pane.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- glass surfaces ---------- */
.glass, .pro-module, .card-obsidian, .card-space-titanium {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
  box-shadow: var(--card-shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); position: relative;
}
.hero { border-radius: 28px; padding: 22px; border-color: var(--line-strong); overflow: hidden; cursor: pointer; user-select: none; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 35%, var(--sheen) 50%, transparent 65%); }
.hero-num { font-size: 3rem; font-weight: 200; letter-spacing: -1.5px; line-height: 1.15; margin: 6px 0 16px; }
.hero-num small, .big-num small { font-size: 1rem; font-weight: 300; color: var(--muted); letter-spacing: 0; }
.big-num { font-size: 2.3rem; font-weight: 200; letter-spacing: -1px; line-height: 1.2; margin: 6px 0 10px; }
.split { display: flex; justify-content: space-between; gap: 10px; font-size: 0.76rem; color: var(--muted); font-weight: 300; }
.split b { display: block; margin-top: 2px; font-size: 1.06rem; color: var(--fg); font-weight: 400; }
.bar { height: 4px; background: var(--track); border-radius: 4px; margin-top: 16px; overflow: hidden; }
.bar i, .bar > div { display: block; height: 100%; width: 0; background: var(--bar); border-radius: 4px; transition: width 0.5s ease; }
.hint { font-size: 0.72rem; color: var(--faint); font-weight: 300; margin-top: 12px; }
.mask { letter-spacing: 4px; color: var(--muted); }

.sec { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 22px 2px 10px; font-size: 0.95rem; font-weight: 500; }
.sec small, .sec .meta { font-size: 0.76rem; color: var(--muted); font-weight: 300; }
.card-title { font-size: 1rem; font-weight: 500; margin-bottom: 4px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.label-en { font-size: 0.66rem; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); }
.note { font-size: 0.76rem; color: var(--muted); line-height: 1.7; font-weight: 300; }
.note.small { font-size: 0.7rem; color: var(--faint); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.82rem; }
.row-between + .row-between { margin-top: 8px; }
.row-between span { color: var(--muted); font-weight: 300; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stack > * + * { margin-top: 8px; }
.inset { background: var(--inset-bg); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin-top: 12px; }
.badge { padding: 3px 10px; border-radius: 99px; background: var(--chip-strong); border: 1px solid var(--line-strong); font-size: 0.7rem; font-weight: 400; color: var(--fg); white-space: nowrap; }
.badge.green { color: var(--income); border-color: var(--income-line); background: var(--income-tint); }

/* ---------- category selector (round icons) ---------- */
.cat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 4px 0 16px; text-align: center; }
.seg-btn { background: none; border: none; font-size: 0.68rem; color: var(--muted); font-weight: 300; padding: 0; line-height: 1.4; }
.seg-btn .round { width: 48px; height: 48px; margin: 0 auto 6px; }
.seg-btn.active { color: var(--fg); font-weight: 500; }
.seg-btn.active .round { background: var(--accent); color: var(--accent-fg); border-color: transparent; box-shadow: 0 8px 22px var(--accent-glow); }
.seg-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg-chips .seg-btn { border: 1px solid var(--line); background: var(--chip); border-radius: 14px; padding: 10px 6px; min-height: 46px; font-size: 0.84rem; }
.seg-chips .seg-btn.active { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

/* ---------- amount entry ---------- */
.amt-display { text-align: center; position: relative; padding: 6px 0 4px; }
.amt-input { width: 100%; background: transparent; border: none; color: var(--fg); font-size: 2.6rem; font-weight: 200; text-align: center; outline: none; margin: 4px 0 6px; letter-spacing: -1px; }
.amt-input::placeholder { color: var(--amt-placeholder); }
.voice-pill { position: absolute; inset-inline-end: 0; top: -4px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; background: var(--chip); color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 6px 13px; font-size: 0.74rem; }
.voice-pill.listening { background: var(--danger); color: var(--listening-fg); border-color: transparent; }
.q-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.q-row .q-btn { flex: 1; padding: 8px 0; min-width: 0; }
.q-btn { background: var(--chip); border: 1px solid var(--line); color: var(--fg); padding: 8px 12px; min-height: 44px; border-radius: 12px; font-size: 0.8rem; font-weight: 400; transition: background 0.15s ease, transform 0.1s ease; }
.q-btn:active { transform: scale(0.97); background: var(--chip-strong); }
@media (hover: hover) { .q-btn:hover { background: var(--chip-strong); } .del-btn:hover { color: var(--danger); } }
.q-btn.wide { width: 100%; padding: 11px; }
.q-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 500; }
.q-btn.danger { color: var(--danger); }
.q-btn.good { color: var(--income); }
.q-btn.info { color: var(--blue); }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.item-chip { display: inline-flex; align-items: center; min-height: 40px; background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 6px 14px; border-radius: 99px; font-size: 0.8rem; font-weight: 300; cursor: pointer; }
.item-chip.active { background: var(--chip-strong); border-color: var(--line-strong); color: var(--fg); font-weight: 400; }
.pro-input, .field { width: 100%; background: var(--field); border: 1px solid var(--line); color: var(--fg); padding: 12px 14px; border-radius: 14px; font-size: 0.86rem; margin-bottom: 9px; outline: none; transition: border-color 0.15s ease; }
.pro-input:focus { border-color: var(--line-strong); }
.pro-input::placeholder { color: var(--faint); }
select.pro-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: 16px 50%, 21px 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-left: 32px !important; }
.field-label { display: block; font-size: 0.76rem; color: var(--muted); font-weight: 300; margin-bottom: 5px; }
.pro-submit-btn { width: 100%; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 16px; padding: 14px; font-size: 0.92rem; font-weight: 500; box-shadow: 0 10px 26px var(--submit-glow); }
.pro-submit-btn:active { transform: scale(0.99); }
.pro-submit-btn:disabled { opacity: 0.6; }
.preview-box { font-size: 0.74rem; color: var(--muted); line-height: 1.7; background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; margin-top: 8px; }

/* ---------- bills ---------- */
.bills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bill-cell { background: var(--chip); border: 1px solid var(--line); border-radius: 18px; padding: 12px 13px; font-size: 0.78rem; color: var(--muted); cursor: pointer; display: flex; flex-direction: column; gap: 4px; position: relative; }
.bill-cell b { font-size: 0.98rem; font-weight: 400; color: var(--fg); }
.bill-cell.paid { background: var(--chip-strong); border-color: var(--line-strong); color: var(--fg); }
.bill-cell.paid::after { content: "✓"; position: absolute; inset-inline-end: 12px; top: 10px; font-size: 0.8rem; color: var(--income); }

/* ---------- transactions ---------- */
.tx-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tx-tools .pro-input { margin: 0; padding: 10px 12px; font-size: 0.8rem; }
.summary-bar { font-size: 0.74rem; color: var(--muted); font-weight: 300; margin: 10px 2px 0; }
.summary-bar strong { color: var(--fg); font-weight: 400; }
.tx-list-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px; max-height: 520px; overflow-y: auto; backdrop-filter: blur(24px); box-shadow: var(--card-shadow); }
.tx-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); cursor: pointer; }
.tx-item:last-child { border-bottom: none; }
.tx-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--chip); border: 1px solid var(--line); color: var(--fg); flex: none; }
.tx-ico.in { color: var(--income); }
.tx-mid { flex: 1; min-width: 0; }
.tx-mid .t { font-size: 0.9rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-mid .s { font-size: 0.72rem; color: var(--muted); font-weight: 300; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-amt { font-size: 0.95rem; font-weight: 400; white-space: nowrap; }
.tx-amt.in { color: var(--income); }
.tx-end { display: flex; align-items: center; gap: 10px; }
.del-btn { background: var(--chip); color: var(--faint); border: 1px solid var(--line); border-radius: 50%; width: 36px; height: 36px; font-size: 0.74rem; flex: none; }
.empty { padding: 26px 8px; text-align: center; color: var(--faint); font-size: 0.82rem; font-weight: 300; }
.more-btn { width: 100%; background: none; border: none; border-top: 1px solid var(--line); color: var(--blue); padding: 13px; font-size: 0.8rem; }

/* ---------- wealth / vault ---------- */
.engine-row + .engine-row { margin-top: 16px; }
.engine-row .row-between b { font-weight: 400; }
.engine-row .bar { margin-top: 8px; }
.evo-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: 0.76rem; color: var(--muted); font-weight: 300; }
.evo-row:last-child { border-bottom: none; }
.evo-row strong { color: var(--fg); font-weight: 400; }
.evo-row .nw strong { color: var(--income); }
.evo-box { max-height: 260px; overflow-y: auto; }
.rate-input { width: 64px; height: 42px; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; text-align: center; padding: 4px; font-size: 0.82rem; }
.yield-stats .row-between strong { font-weight: 400; }
.yield-stats .row-between strong.good { color: var(--income); }
.inline-form { display: flex; gap: 8px; margin-top: 12px; }
.inline-form .pro-input { margin: 0; }
.inline-form .pro-input, .inline-form .q-btn { height: 46px; }
.inline-form .q-btn { white-space: nowrap; padding: 0 18px; border-radius: 14px; }
.advisor-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); margin-bottom: 10px; }
.advisor-toggle button { background: none; border: none; border-radius: 12px; padding: 9px 4px; min-height: 42px; font-size: 0.78rem; color: var(--muted); }
.advisor-toggle button.on { background: var(--accent); color: var(--accent-fg); font-weight: 500; }
.advisor-result { background: linear-gradient(155deg, var(--blue-tint), var(--blue-tint-2)); border: 1px solid var(--line-strong); border-radius: 20px; padding: 16px; margin-bottom: 10px; }
.advisor-result .tier { font-size: 0.74rem; color: var(--blue); font-weight: 400; }
.advisor-result .best { font-size: 1.8rem; font-weight: 200; margin: 4px 0; }
.advisor-result .best small { font-size: 0.8rem; color: var(--muted); font-weight: 300; }
.advisor-result .cmp { font-size: 0.78rem; color: var(--muted); line-height: 1.7; font-weight: 300; }
.advisor-result strong, .pf strong { color: var(--fg); font-weight: 400; }
.pf { background: var(--chip); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; font-size: 0.78rem; color: var(--muted); line-height: 1.7; font-weight: 300; }
.pf + .pf { margin-top: 8px; }
.pf.best-pf { border-color: var(--line-strong); background: var(--chip-strong); }
.pf .pf-head { display: flex; justify-content: space-between; gap: 8px; color: var(--fg); font-weight: 400; font-size: 0.82rem; }
.pf .pf-head .good { color: var(--income); }
.tier-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 10px; }
.tier-btns .q-btn.on { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

/* ---------- settings ---------- */
.backup-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: 0.78rem; }
.backup-row:last-child { border-bottom: none; }
.backup-row .when { color: var(--muted); font-weight: 300; font-size: 0.72rem; margin-top: 2px; }
.backup-row .acts { display: flex; gap: 6px; }
.bill-edit-row { display: grid; grid-template-columns: 1fr 110px 30px; gap: 8px; align-items: center; margin-bottom: 8px; }
.bill-edit-row .pro-input { margin: 0; }

/* ---------- dock ---------- */
.pro-dock-container { position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); max-width: 412px; transition: transform 0.25s ease, opacity 0.2s ease; margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 7px; border-radius: 28px; background: var(--dock-bg); border: 1px solid var(--line); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); box-shadow: var(--float-shadow); z-index: 100; }
/* While the keyboard is up the bar would sit on top of the field being typed in. */
body.kb-open .pro-dock-container { transform: translateY(160%); opacity: 0; pointer-events: none; }
.dock-pill { background: none; border: none; border-radius: 20px; padding: 9px 2px 8px; min-height: 52px; color: var(--muted); font-size: 0.7rem; font-weight: 300; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: background 0.2s ease, color 0.2s ease; }
.dock-pill.active { color: var(--fg); background: var(--chip-strong); font-weight: 500; }

/* ---------- overlays ---------- */
.toast { position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: var(--toast-bg); color: var(--toast-fg); padding: 11px 22px; border-radius: 99px; font-weight: 500; font-size: 0.84rem; z-index: 260; display: none; box-shadow: var(--toast-shadow); text-align: center; min-width: 240px; max-width: calc(100vw - 32px); }
.account-shade { position: fixed; inset: 0; z-index: 250; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); background: var(--shade-bg); }
.account-shade.open { display: flex; }
.account-card { margin: auto; width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 28px; padding: 26px 22px; box-shadow: var(--card-shadow); backdrop-filter: blur(24px); }
.brand-mark { width: 56px; height: 56px; border-radius: 16px; overflow: hidden; margin-bottom: 14px; box-shadow: var(--brand-shadow); }
.brand-mark svg { width: 100%; height: 100%; display: block; }
#accountTitle { font-size: 1.35rem; font-weight: 500; margin: 2px 0 6px; }
#accountMessage { font-size: 0.8rem; color: var(--muted); line-height: 1.7; font-weight: 300; margin-bottom: 14px; }
.account-input { width: 100%; background: var(--field); border: 1px solid var(--line); color: var(--fg); border-radius: 14px; padding: 13px 14px; margin: 6px 0 12px; direction: ltr; text-align: left; outline: none; font-size: 0.9rem; }
.account-input:focus { border-color: var(--line-strong); }
.account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.account-actions button, .account-secondary { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--chip); color: var(--fg); font-weight: 400; font-size: 0.86rem; }
.account-actions button:first-child { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 500; }
.account-secondary { width: 100%; margin-top: 8px; background: none; border-color: transparent; color: var(--blue); }
.dialog-shade { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; overflow-y: auto; padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); background: var(--overlay); backdrop-filter: blur(12px); }
.dialog-shade.open { display: flex; }
.dialog-card { width: 100%; max-width: 390px; background: var(--dialog-bg); border: 1px solid var(--line-strong); border-radius: 26px; padding: 22px; box-shadow: var(--dialog-shadow); }
.dialog-text { font-size: 0.9rem; line-height: 1.8; white-space: pre-line; margin-bottom: 16px; font-weight: 300; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dialog-actions.single { grid-template-columns: 1fr; }
.dialog-actions button { border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px; min-height: 48px; background: var(--chip); color: var(--fg); font-weight: 400; font-size: 0.84rem; }
.dialog-actions button.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 500; }
.dialog-actions button.danger { background: var(--danger); color: var(--danger-fg); border-color: transparent; font-weight: 500; }

/* ---------- privacy ---------- */
body.privacy-on .sensitive:not(.peek) { filter: blur(7px); user-select: none; cursor: pointer; }
body.privacy-on .sensitive-input:not(:focus) { color: transparent; text-shadow: 0 0 9px var(--blur-text); }

/* Below 16px, iOS zooms the page in when a field is focused. */
/* iPhone zooms into any field under 16px: on touch screens every field is 16px, the log's
   compact search, period and date fields included. */
@media (pointer: coarse) { .pro-input, .field, .account-input, .rate-input, .tx-tools .pro-input, .tx-range .pro-input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
#advisorMilestoneBox .row-between { flex-direction: column; align-items: flex-start; gap: 3px; }

/* ---------- install prompt ---------- */
.install-banner { position: fixed; z-index: 120; left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); bottom: calc(88px + env(safe-area-inset-bottom)); max-width: 412px; margin-inline: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; background: var(--float-bg); border: 1px solid var(--line-strong); box-shadow: var(--float-shadow); animation: rise 0.3s ease; }
.install-banner[hidden] { display: none; }
.install-banner .brand-mark { width: 42px; height: 42px; border-radius: 13px; font-size: 1.05rem; margin: 0; flex: none; box-shadow: none; }
.install-banner .txt { flex: 1; min-width: 0; font-size: 0.8rem; line-height: 1.55; }
.install-banner .txt b { display: block; font-weight: 500; font-size: 0.86rem; }
.install-banner .txt span { color: var(--muted); font-weight: 300; }
.install-banner .q-btn { min-height: 40px; padding: 0 14px; white-space: nowrap; }
.install-banner .close { background: none; border: none; color: var(--faint); width: 36px; height: 36px; font-size: 0.9rem; flex: none; }
.share-glyph { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
/* Small round icon buttons get a 46px touch area without looking bigger. */
.del-btn, .install-banner .close { position: relative; }
.del-btn::after, .install-banner .close::after { content: ""; position: absolute; inset: -5px; }
/* Voice and bank-message pills above the amount. */
.entry-tools { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.entry-tools .voice-pill { position: static; }
.voice-pill.on { background: var(--blue); color: var(--on-blue); border-color: transparent; }
/* Five category circles must fit on a 320px screen. */
.seg-btn .round { width: clamp(38px, 12.4vw, 48px); height: clamp(38px, 12.4vw, 48px); }
.cat-row { gap: 2px; }
@media (max-width: 350px) { .seg-btn { font-size: 0.62rem; } .q-row .q-btn { font-size: 0.74rem; } .split { font-size: 0.7rem; } .hero-num { font-size: 2.6rem; } }

/* App lock (PIN / fingerprint). Above the sign-in screen, below in-app dialogs. */
.lock-shade { position: fixed; inset: 0; z-index: 310; display: none; overflow-y: auto; padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); background: var(--shade-bg); }
.lock-shade.open { display: flex; }
.lock-card { margin: auto; width: 100%; max-width: 340px; text-align: center; }
.lock-card .brand-mark { margin: 0 auto 14px; }
#lockTitle { font-size: 1.25rem; font-weight: 500; margin-bottom: 6px; }
#lockMessage { color: var(--muted); font-size: 0.86rem; min-height: 2.6em; margin: 0 0 14px; }
#lockMessage.error { color: var(--danger); }
.lock-dots { display: flex; justify-content: center; gap: 16px; margin-bottom: 26px; direction: ltr; }
.lock-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: background 0.12s ease; }
.lock-dots i.on { background: var(--accent); border-color: var(--accent); }
.lock-dots.shake { animation: lock-shake 0.4s ease; }
@keyframes lock-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.lock-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; direction: ltr; margin-bottom: 10px; }
.lock-pad button { height: 64px; border-radius: 50%; width: 64px; justify-self: center; background: var(--chip); border: 1px solid var(--line); color: var(--fg); font-size: 1.45rem; font-weight: 300; display: flex; align-items: center; justify-content: center; }
.lock-pad button:active { background: var(--chip-strong); transform: scale(0.96); }
.lock-pad button[data-lock-key="del"], .lock-pad button[data-lock-key="bio"] { background: none; border-color: transparent; font-size: 1.2rem; }
.lock-pad .ico { width: 28px; height: 28px; }
.lock-pad button.off { visibility: hidden; }
.privacy-cover { position: fixed; inset: 0; z-index: 320; display: none; align-items: center; justify-content: center; background: var(--sheet-bg); }
html.app-covered .privacy-cover { display: flex; }
@media (max-height: 640px) { .lock-pad button { height: 54px; width: 54px; } .lock-dots { margin-bottom: 16px; } }

/* Monthly spending limits (home screen). */
.limits-list { display: grid; gap: 8px; }
.limit-row { background: var(--chip); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; }
.limit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.84rem; }
.limit-head b { font-weight: 400; font-size: 0.86rem; white-space: nowrap; }
.limit-row .bar { margin-top: 10px; height: 5px; }
.limit-rest { margin-top: 6px; font-size: 0.74rem; color: var(--muted); }
.limit-row.warn .bar i { background: var(--warn); }
.limit-row.warn .limit-rest { color: var(--warn); }
.limit-row.over { border-color: var(--danger-line); }
.limit-row.over .bar i { background: var(--danger); }
.limit-row.over .limit-rest { color: var(--danger); }

/* Month report: a small line inside the balance card, brighter when last month's report is ready. */
.hero-report { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 0 0; background: none; border: none; border-top: 1px solid var(--line); border-radius: 0; color: var(--muted); font-size: 0.8rem; text-align: start; }
.hero-report .go { margin-inline-start: auto; }
.hero-report.fresh { color: var(--blue); font-weight: 500; }
.report-shade { position: fixed; inset: 0; z-index: 240; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--sheet-bg); padding: calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.report-shade.open { display: block; }
body.report-open { overflow: hidden; }
body.report-open .pro-dock-container, body.report-open .install-banner { display: none; }
.report-sheet { max-width: 440px; margin: 0 auto; }
.report-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#reportTitle { font-size: 1.1rem; font-weight: 500; text-align: center; flex: 1; }
.report-months { margin-bottom: 12px; }
.report-months .item-chip.locked { opacity: 0.55; }
.report-hero .hero-num { margin-bottom: 6px; }
.chg { font-size: 0.78rem; color: var(--muted); display: inline-block; margin-top: 4px; }
.chg.good, .good { color: var(--income); }
.chg.bad, .bad { color: var(--danger); }
.muted { color: var(--muted); font-weight: 300; }
.report-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.report-stat { background: var(--chip); border: 1px solid var(--line); border-radius: 18px; padding: 12px 13px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.report-stat > span { font-size: 0.74rem; color: var(--muted); }
.report-stat b { font-size: 1.02rem; font-weight: 400; }
.report-stat small { font-size: 0.68rem; color: var(--faint); }
.report-bar + .report-bar { margin-top: 14px; }
.report-bar .bar { margin-top: 8px; }
.report-insight { font-size: 0.84rem; line-height: 1.7; }
.report-insight + .report-insight { margin-top: 6px; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; margin-bottom: 12px; }
.check-row input { width: 18px; height: 18px; accent-color: var(--blue); }
.share-preview { display: block; width: 100%; max-width: 240px; margin: 0 auto 12px; border-radius: 16px; border: 1px solid var(--line); aspect-ratio: 4 / 5; background: var(--chip); }
.row-between strong .sensitive { color: inherit; }

/* Savings goals (home screen). */
.goal-card { background: var(--chip); border: 1px solid var(--line); border-radius: 18px; padding: 13px 14px; }
.goal-card .bar { margin-top: 10px; height: 6px; }
.goal-card .bar i { background: var(--goal-bar); }
.goal-line { margin-top: 8px; font-size: 0.86rem; }
.goal-plan { margin-top: 4px; font-size: 0.74rem; color: var(--muted); line-height: 1.6; }
.goal-card.late .goal-plan { color: var(--warn); }
.goal-card.done { border-color: var(--income-line); background: linear-gradient(135deg, var(--income-tint-2), var(--chip)); }
.goal-actions { display: flex; gap: 8px; margin-top: 10px; }
.goal-actions .q-btn { flex: 1; min-height: 40px; }
input[type="month"].pro-input { direction: ltr; text-align: right; }

/* Transaction log: custom range + search total. */
.tx-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.tx-range label { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--muted); min-width: 0; }
.tx-range .pro-input { flex: 1; width: 100%; }
@media (max-width: 380px) { .tx-range { grid-template-columns: 1fr; } .tx-range label > span { width: 2em; } }
.tx-range .pro-input { margin: 0; padding: 9px 10px; font-size: 0.78rem; direction: ltr; min-width: 0; }
.search-result { margin: 10px 0 0; padding: 14px 16px; }
.search-total { font-size: 2rem; font-weight: 200; margin: 4px 0; }
input[type="search"]::-webkit-search-cancel-button { filter: var(--search-cancel); }
/* The hidden attribute always wins over a class that sets display. */
[hidden] { display: none !important; }

/* Loans and debts. */
.debt-summary { width: 100%; text-align: start; background: var(--chip); border: 1px solid var(--line); border-radius: 18px; padding: 13px 14px; color: var(--fg); }
.debt-summary.empty { background: none; border-style: dashed; border-color: var(--line-strong); color: var(--blue); font-size: 0.8rem; line-height: 1.7; }
.debt-sum-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.debt-sum-row > div { display: flex; flex-direction: column; gap: 3px; }
.debt-sum-row span { font-size: 0.74rem; color: var(--muted); }
.debt-sum-row b { font-size: 1.05rem; font-weight: 400; }
.debt-due-line { margin-top: 10px; font-size: 0.76rem; color: var(--warn); }
.debt-card .badge { font-size: 0.64rem; margin-inline-start: 6px; vertical-align: middle; }
.debt-card.in .limit-head b { color: var(--income); }
.debt-card.out .limit-head b { color: var(--danger); }
.debt-card.done .limit-head b { color: var(--muted); }
.debt-card .bar i { background: var(--bar); }
.seg-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.seg-toggle label { position: relative; }
.seg-toggle input { position: absolute; opacity: 0; inset: 0; }
.seg-toggle span { display: block; text-align: center; padding: 11px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--chip); font-size: 0.8rem; }
.seg-toggle input:checked + span { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 500; }
.seg-toggle input:focus-visible + span { outline: 2px solid var(--blue); }
#debtForm input[type="date"] { direction: ltr; min-width: 0; width: 100%; }
.debt-dates > div { min-width: 0; }
@media (max-width: 380px) { .debt-dates { grid-template-columns: 1fr; gap: 0; } }

/* Bank message confirm sheet. */
.sms-original { margin: 6px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--field); border: 1px solid var(--line); font-size: 0.8rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; max-height: 9em; overflow-y: auto; color: var(--muted); }
.warn-text { color: var(--warn); margin: -4px 0 10px; }
#smsSheet input[type="date"] { direction: ltr; min-width: 0; width: 100%; }
#smsSheet select.pro-input { width: 100%; }

/* Pro subscription. */
.pro-perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pro-perks li { font-size: 0.84rem; line-height: 1.6; padding-inline-start: 22px; position: relative; }
.pro-perks li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--income); }
.pay-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.pay-plan { display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 14px 8px; border-radius: 18px; border: 1px solid var(--line); background: var(--chip); color: var(--fg); }
.pay-plan span { font-size: 0.8rem; color: var(--muted); }
.pay-plan b { font-size: 1.4rem; font-weight: 400; }
.pay-plan small { font-size: 0.7rem; color: var(--income); }
.pay-plan.on { border-color: var(--blue); background: linear-gradient(135deg, var(--blue-tint), var(--chip)); box-shadow: 0 0 0 1px var(--blue) inset; }
.pay-step { font-size: 0.84rem; margin: 12px 0 6px; line-height: 1.6; }
.pay-target { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--field); border: 1px solid var(--line-strong); font-size: 1rem; word-break: break-all; }
.pay-target .q-btn { min-height: 36px; flex: none; }
.pay-row { padding: 6px 0; }
.pay-status.pending { color: var(--warn); }
.pay-status.approved { color: var(--income); }
.pay-status.rejected { color: var(--danger); }
.admin-req.approved { border-color: var(--income-line); }
.admin-req.rejected { opacity: 0.7; }
.src-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.src-table th, .src-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: end; font-weight: 400; }
.src-table th:first-child { text-align: start; }
.src-table thead th { font-size: 0.72rem; color: var(--muted); }
.src-table tr.zero { color: var(--muted); }
.src-table tfoot th, .src-table tfoot td { border-bottom: 0; font-weight: 600; }

/* «حسابي». */
.avatar { background-size: cover; background-position: center; }
.avatar.has-photo { border-color: var(--line-strong); }
.account-head { text-align: center; }
.avatar-lg { width: 96px; height: 96px; border-radius: 50%; margin: 4px auto 10px; display: grid; place-items: center; font-size: 2.2rem; font-weight: 300; background-color: var(--chip-strong); border: 1px solid var(--line-strong); }
.avatar-actions { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.avatar-actions .q-btn { min-height: 38px; display: inline-flex; align-items: center; cursor: pointer; }
.account-head .field-label { text-align: start; display: block; }
.acct-rows { margin-top: 14px; text-align: start; }
.acct-rows strong { font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-details { border-top: 1px solid var(--line); padding: 10px 0 2px; }
.acct-details summary { cursor: pointer; font-size: 0.86rem; padding: 12px 0; list-style-position: inside; }
.acct-details[open] summary { margin-bottom: 8px; }
.acct-details .account-input { margin: 4px 0 8px; direction: inherit; text-align: start; }
.acct-details input[type="email"].account-input, .acct-details input[type="password"].account-input { direction: ltr; text-align: left; }
.danger-zone { border-color: var(--danger-line); }
.danger-zone summary { color: var(--danger); }
.q-btn:disabled { opacity: 0.45; }

/* Home: recent transactions, item/notes toggles. */
.log-open { margin-top: 8px; }
.link-btn { background: none; border: none; color: var(--blue); font-size: 0.8rem; padding: 6px 2px 10px; }
.link-btn.tap { min-height: 44px; padding: 0 4px; }
body.install-on { padding-bottom: calc(196px + env(safe-area-inset-bottom)); }
[role="button"][tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.item-chip.other-chip { border-style: dashed; color: var(--blue); }
#txSheetTitle .meta { font-size: 0.74rem; color: var(--muted); font-weight: 300; margin-inline-start: 6px; }

/* Wealth: budget presets inside the basics row. */
.strat-inline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.strat-inline .seg-btn { border: 1px solid var(--line); background: var(--chip); color: var(--muted); padding: 8px 4px; font-size: 0.72rem; min-height: 36px; border-radius: 12px; }
.strat-inline .seg-btn.active { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 500; }

/* Savings page: compact yield, simulator behind a button. */
.yield-accrued { font-size: 0.82rem; line-height: 1.6; margin: 0; }
.yield-details { margin-top: 10px; }
.sim-details { margin-top: 16px; }
.sim-details > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 12px; }
.sim-details > summary::-webkit-details-marker { display: none; }
.sim-details[open] > summary { margin-bottom: 12px; }

/* Settings: one foldable section per topic. */
.settings-list { display: grid; gap: 10px; max-width: 560px; margin: 0 auto; }
.settings-list > section, .settings-list > details { margin: 0; }
.set-sec { padding: 0; }
.set-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 18px; }
.set-sec > summary::-webkit-details-marker { display: none; }
.set-sec > summary::after { content: "‹"; margin-inline-start: auto; color: var(--muted); font-size: 1.2rem; transition: transform 0.2s ease; }
.set-sec[open] > summary::after { transform: rotate(-90deg); }
.set-title { font-size: 0.95rem; font-weight: 500; }
.set-sub { font-size: 0.74rem; color: var(--muted); font-weight: 300; margin-inline-start: auto; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.set-body { padding: 0 18px 18px; }
.set-subhead { font-size: 0.84rem; margin: 4px 0 8px; }
/* Today page: folded fixed bills, and one «أضف» line instead of empty boxes. */
.bills-home { margin-top: 18px; }
.bills-home .bills-grid { margin: 0; }
.add-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 16px 2px 4px; font-size: 0.8rem; color: var(--muted); }
.add-line .link-btn { padding: 8px 2px; min-height: 40px; }
.tx-item[role=button] { cursor: pointer; }
.bills-home .set-title { white-space: nowrap; }
.bills-home .set-sub { max-width: none; flex: 1; min-width: 0; }
@media (max-width: 360px) { .bills-home > summary { flex-wrap: wrap; row-gap: 2px; } .bills-home .set-sub { order: 3; flex-basis: 100%; text-align: start; } }
/* Launch screen: logo + three dots until the account is known (sign-in form or wallet). */
.boot-shade { position: fixed; inset: 0; z-index: 260; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; background: var(--shade-bg); }
.boot-shade.open { display: flex; }
.boot-shade .brand-mark { margin: 0; width: 64px; height: 64px; border-radius: 18px; }
.boot-dots { display: flex; gap: 7px; }
.boot-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: 0.35; animation: boot-dot 1.2s ease-in-out infinite; }
.boot-dots i:nth-child(2) { animation-delay: 0.2s; }
.boot-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes boot-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 0.9; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .boot-dots i { animation: none; opacity: 0.6; } }
.boot-slow { font-size: 0.8rem; color: var(--muted); line-height: 1.8; max-width: 280px; }
/* The lock and the hidden-app cover sit above dialogs; only the lock's own questions
   («نسيت الرمز؟») show above the lock. */
.dialog-shade.over-lock { z-index: 330; }
/* Appearance and language. */
.seg-toggle.three { grid-template-columns: repeat(3, 1fr); }
.lang-switch { margin-top: 4px; font-size: 0.82rem; }
/* English reads left to right: the few things drawn for right-to-left. */
html[dir="ltr"] select.pro-input { background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%; padding-left: 14px; padding-right: 32px !important; }
html[dir="ltr"] input[type="month"].pro-input { text-align: left; }
html[dir="ltr"] .set-sec > summary::after { content: "›"; }
html[dir="ltr"] .set-sec[open] > summary::after { transform: rotate(90deg); }
html[dir="ltr"] .hero-report .go { transform: scaleX(-1); }

/* Welcome screen before sign-in, and the sign-in / sign-up modes. */
.welcome-points { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 12px; }
.welcome-points li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; font-size: 0.82rem; line-height: 1.65; color: var(--muted); font-weight: 300; }
.welcome-points b { display: block; color: var(--fg); font-weight: 500; font-size: 0.88rem; }
.welcome-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--chip-strong); color: var(--income); }
.welcome-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.welcome-foot { text-align: center; margin-top: 10px; }
.welcome-links { text-align: center; margin: -6px 0 0; }
.welcome-links a { color: var(--blue); text-decoration: none; display: inline-block; padding: 12px 4px; }
.account-actions.single { grid-template-columns: 1fr; }
.account-actions.single button { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 500; padding: 14px; }
.account-actions button[hidden] { display: none; }

/* Opened inside TikTok / Instagram / Facebook: ask for the real browser. */
.inapp-notice { display: grid; gap: 6px; margin: 4px 0 16px; padding: 14px; border-radius: 16px; border: 1px solid var(--warn); background: rgba(243, 200, 134, 0.08); font-size: 0.8rem; line-height: 1.65; }
.inapp-notice b { color: var(--warn); font-weight: 500; font-size: 0.88rem; }
.inapp-notice span { color: var(--muted); font-weight: 300; }
.inapp-notice .q-btn { justify-self: start; margin-top: 4px; }

/* First minute after sign-up. */
#onboardGate { z-index: 255; }
.onboard-card { display: grid; gap: 12px; }
.onboard-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 4px; }
.onboard-dots i { width: 28px; height: 4px; border-radius: 4px; background: var(--track); }
.onboard-dots i.on { background: var(--income); }
.onboard-step { display: grid; gap: 12px; }
.onboard-step[hidden] { display: none; }
.onboard-title { font-size: 1.15rem; font-weight: 500; line-height: 1.5; }
.onboard-bills { display: grid; gap: 8px; }
.onboard-bill { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center; font-size: 0.86rem; }
.onboard-bill .pro-input { margin: 0; text-align: center; }
.onboard-allow { font-size: 3rem; font-weight: 200; line-height: 1.1; color: var(--income); }
.onboard-allow small { font-size: 1rem; color: var(--muted); }
.onboard-tips { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; font-size: 0.8rem; color: var(--muted); font-weight: 300; line-height: 1.65; }

/* Free: download a backup now and then. */
.backup-nudge { display: grid; gap: 8px; margin-top: 12px; font-size: 0.8rem; line-height: 1.65; }
.backup-nudge b { font-weight: 500; font-size: 0.88rem; }
.backup-nudge > span { color: var(--muted); font-weight: 300; }

/* «الثروة» and «الادخار» on Free: the page is a blurred preview under a Pro card. */
.pro-lock-card { position: sticky; top: calc(12px + env(safe-area-inset-top)); z-index: 5; display: grid; gap: 10px; margin-bottom: 14px; }
.pro-lock-card .eyebrow { color: var(--income); font-weight: 500; }
.pro-lock-card p { margin: 0; font-size: 0.84rem; line-height: 1.7; color: var(--fg); font-weight: 300; }
.tab-pane.pro-locked > .desktop-grid-2 { filter: blur(5px); opacity: 0.55; pointer-events: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .tab-pane.pro-locked > .desktop-grid-2 { filter: none; opacity: 0.35; } }
.nudge-row { display: flex; gap: 8px; }
.nudge-row .q-btn { flex: 1; }
/* First month free (0012): a quiet line on Today while the trial runs, brighter in its last week. */
.trial-strip { width: 100%; display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 16px;
  background: var(--chip); border: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; text-align: start; }
.trial-strip .go { margin-inline-start: auto; }
.trial-strip.urgent { color: var(--fg); font-weight: 500; border-color: var(--line-strong);
  background: linear-gradient(135deg, rgba(143, 177, 255, 0.22), rgba(143, 224, 194, 0.12)); }
.pay-offer { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--line-strong); font-size: 0.8rem; line-height: 1.7; }
.pay-plan s.was { color: var(--faint); font-weight: 300; font-size: 0.8em; margin-inline-end: 2px; }
.plain-list { margin: 0; padding-inline-start: 18px; font-size: 0.84rem; line-height: 1.9; }
.plain-list.off { color: var(--muted); }
.invite-link { overflow-wrap: anywhere; font-size: 0.8rem; }