:root[data-mode="light"] {
  --bg: #fbfbfa;
  --bg-gradient-a: oklch(0.94 0.03 150);
  --bg-gradient-b: oklch(0.97 0.015 150);
  --fg: #14171a;
  --muted: oklch(0.45 0.01 150);
  --muted-faint: oklch(0.58 0.01 150);
  --border: rgba(0, 0, 0, .1);
  --border-light: rgba(0, 0, 0, .08);
  --border-strong: rgba(0, 0, 0, .16);
  --surface: #ffffff;
  --surface2: oklch(0.95 0.006 150);
  --input-bg: #ffffff;
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-on);
  --accent: #16a34a;
  --accent-dim: rgba(22, 163, 74, .1);
  --accent-border: rgba(22, 163, 74, .35);
  --accent-on: #ffffff;
  --danger: #dc2626;
  --danger-dim: rgba(220, 38, 38, .1);
  --danger-border: rgba(220, 38, 38, .28);
  --warning: #b45309;
  --warning-dim: rgba(180, 83, 9, .12);
  --nav-inactive: #8a8f8c;
  --nav-bg: rgba(255, 255, 255, .92);
  --dot: #e5e5e0;
  --desk-bg: oklch(0.9 0.005 150);
  --shadow-phone: 0 30px 80px rgba(0, 0, 0, .15), 0 0 0 8px #e5e5e0;
}
:root[data-mode="dark"] {
  --bg: #0b0d0c;
  --bg-gradient-a: oklch(0.24 0.03 150);
  --bg-gradient-b: oklch(0.17 0.02 150);
  --fg: #f2f4f2;
  --muted: oklch(0.68 0.01 150);
  --muted-faint: oklch(0.5 0.01 150);
  --border: rgba(255, 255, 255, .1);
  --border-light: rgba(255, 255, 255, .06);
  --border-strong: rgba(255, 255, 255, .12);
  --surface: oklch(0.15 0.008 150);
  --surface2: oklch(0.2 0.015 150);
  --input-bg: oklch(0.17 0.008 150);
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-on);
  --accent: #34d399;
  --accent-dim: rgba(52, 211, 153, .12);
  --accent-border: rgba(52, 211, 153, .3);
  --accent-on: #0a0d0b;
  --danger: #f87171;
  --danger-dim: rgba(248, 113, 113, .14);
  --danger-border: rgba(248, 113, 113, .18);
  --warning: #fbbf24;
  --warning-dim: rgba(251, 191, 36, .14);
  --nav-inactive: #8b968f;
  --nav-bg: oklch(0.1 0.006 150 / 0.9);
  --dot: rgba(255, 255, 255, .1);
  --desk-bg: oklch(0.16 0.006 150);
  --shadow-phone: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 8px oklch(0.09 0.006 150);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: "Vazirmatn", -apple-system, sans-serif;
  background: var(--bg);
  color: var(--fg);
  padding: 16px;
  padding-bottom: 96px;
  transition: background .15s, color .15s;
}

.screen { display: block; }
.screen.hidden { display: none; }
.hidden { display: none !important; }

/* ── دسترس‌پذیری: فوکوس همیشه دیده بشه ─────────────────── */
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button, .row-item, .chip, .choice-btn { min-height: 44px; }
.icon-btn { min-width: 44px; min-height: 44px; }

/* ── دکمه‌های ثابت بالای صفحه ───────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.topbar h1 { font-size: 19px; font-weight: 700; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: .5px solid var(--border); background: var(--surface2); color: var(--fg);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

/* ── کارت پایه ───────────────────────────────────────── */
.card {
  border: .5px solid var(--border); border-radius: 20px; padding: 20px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
}
.card-flat { border: .5px solid var(--border); border-radius: 14px; background: var(--surface); }

/* کارت گرادیانی برجسته (مثل «موقعیت مالی خالص» توی داشبورد) */
.card-hero {
  border-radius: 26px; padding: 24px 22px;
  background: linear-gradient(145deg, var(--bg-gradient-a), var(--bg-gradient-b));
  border: .5px solid var(--border-light);
}

/* ── نقطه‌های پیشرفت ─────────────────────────────────── */
.progress-dots { display: flex; gap: 4px; margin-bottom: 18px; }
.progress-dots .seg { flex: 1; height: 3px; border-radius: 3px; background: var(--dot); }
.progress-dots .seg.filled { background: var(--accent); }
.step-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.step-title { font-size: 19px; font-weight: 700; margin-bottom: 20px; }

/* ── دکمه‌ها ──────────────────────────────────────────── */
.btn-main {
  width: 100%; background: var(--btn-bg); color: var(--btn-fg);
  border: none; border-radius: 14px; padding: 14px; font-size: 15px;
  font-weight: 600; font-family: inherit; margin-top: 4px; cursor: pointer;
  min-height: 48px;
  box-shadow: 0 12px 26px var(--accent-border);
}
.btn-main:disabled { opacity: .45; cursor: not-allowed; }
.btn-outline {
  width: 100%; background: none; color: var(--fg);
  border: .5px solid var(--border-strong); border-radius: 14px; padding: 12px;
  font-size: 13px; font-family: inherit; margin-top: 8px; cursor: pointer;
  min-height: 44px;
}
.btn-ghost { background: none; border: none; color: var(--muted); font-family: inherit; font-size: 13px; cursor: pointer; }

.choice-btn {
  display: block; width: 100%; padding: 14px; border-radius: 14px;
  border: .5px solid var(--border); background: var(--surface); color: var(--fg);
  font-family: inherit; font-size: 14px; text-align: right; margin-bottom: 10px; cursor: pointer;
}
.choice-btn.active { background: var(--accent-dim); color: var(--fg); border-color: var(--accent-border); }
.chip-row { display: flex; gap: 8px; }
.chip {
  flex: 1; padding: 11px 4px; border-radius: 14px; border: .5px solid var(--border);
  background: var(--surface); color: var(--fg); font-family: inherit; font-size: 12px; cursor: pointer;
}
.chip.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-border); font-weight: 600; }

/* ── فرم‌ها ───────────────────────────────────────────── */
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
input[type=text], input[type=number], input[type=tel], textarea {
  width: 100%; padding: 12px 14px; border-radius: 14px;
  border: .5px solid var(--border); background: var(--input-bg); color: var(--fg);
  font-size: 15px; font-family: inherit; margin-bottom: 14px;
}
input[type=text]:focus, input[type=number]:focus, input[type=tel]:focus, textarea:focus {
  border-color: var(--accent-border);
}
textarea { min-height: 70px; resize: vertical; }
.amount-field {
  display: flex; align-items: baseline; gap: 8px;
  border-bottom: .5px solid var(--border); padding-bottom: 10px; margin-bottom: 8px;
}
.amount-field input {
  border: none; background: none; font-family: inherit; font-size: 28px; font-weight: 700;
  width: 0; flex: 1; min-width: 0; outline: none; text-align: right; padding: 0; margin: 0;
}
.amount-field .unit-label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.field-hint { font-size: 11px; color: var(--muted); margin-bottom: 16px; }
.hint-box { border: .5px solid var(--border); border-radius: 14px; padding: 12px; font-size: 12px; color: var(--muted); margin-bottom: 16px; background: var(--surface2); }

/* ── لیست‌های افقی (اعضا، وام‌ها) ────────────────────── */
.row-item {
  display: flex; align-items: center; gap: 10px; border: .5px solid var(--border);
  border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; background: var(--surface);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
}
.row-item.dashed { border-style: dashed; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; border: .5px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-weight: 600;
  font-size: 14px; flex-shrink: 0; overflow: hidden; background: var(--surface2);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.row-title { font-weight: 600; font-size: 14px; }
.row-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ── جدول مبلغ/جزئیات مرور ───────────────────────────── */
.review-line { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: .5px solid var(--border-light); font-size: 13px; }
.review-line:last-child { border-bottom: none; }
.review-line .k { color: var(--muted); }
.review-amount { font-size: 30px; font-weight: 800; margin-bottom: 4px; }
.review-target { font-size: 12px; color: var(--muted); margin-bottom: 14px; }

/* ── وضعیت‌ها و رنگ‌های معنایی ────────────────────────── */
.status-underline { text-decoration: underline; }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-accent { color: var(--accent); }
.badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.badge-danger { background: var(--danger-dim); color: var(--danger); }
.badge-warning { background: var(--warning-dim); color: var(--warning); }
.badge-accent { background: var(--accent-dim); color: var(--accent); }
.badge-muted { background: var(--surface2); color: var(--muted); }
.urgency-bar { width: 3px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }
.urgency-bar.danger { background: var(--danger); }
.urgency-bar.warning { background: var(--warning); }
.urgency-bar.accent { background: var(--accent); }

/* ── نوار پیشرفت مبلغ (کمپین، اقساط) ─────────────────── */
.progress-bar { height: 6px; background: var(--dot); border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.progress-bar .fill { height: 100%; background: var(--accent); }

/* ── آکاردئون ─────────────────────────────────────────── */
.acc-item { border-bottom: .5px solid var(--border-light); }
.acc-item:last-child { border-bottom: none; }
.acc-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; font-size: 13px; font-weight: 600; cursor: pointer; }
.acc-body { padding-bottom: 14px; font-size: 12px; color: var(--muted); line-height: 1.9; display: none; }
.acc-body.open { display: block; }
.acc-head i { transition: transform .15s; }
.acc-head.open i { transform: rotate(180deg); }

/* ── جدول قابل اسکرول ─────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 10px; white-space: nowrap; }
th { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 600; }
td { padding: 6px 8px; border-bottom: .5px solid var(--border-light); }

/* ── نوار ناوبری پایین ────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; right: 0; left: 0;
  background: var(--nav-bg); backdrop-filter: blur(14px); border-top: .5px solid var(--border);
  display: flex; justify-content: space-around; align-items: flex-end;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 10;
}
.nav-item {
  text-align: center; font-size: 10px; color: var(--nav-inactive); background: none; border: none;
  font-family: inherit; padding: 6px 8px; cursor: pointer; min-width: 44px;
}
.nav-item i { font-size: 21px; display: block; margin-bottom: 2px; }
.nav-item.active { color: var(--accent); }
.nav-fab {
  width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-on);
  display: flex; align-items: center; justify-content: center; font-size: 25px;
  margin-top: -22px; border: none; flex-shrink: 0; cursor: pointer;
  box-shadow: 0 6px 18px var(--accent-dim);
}

/* ── ابزار عمومی ──────────────────────────────────────── */
.center { text-align: center; }
.spinner {
  width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; margin: 80px auto 16px; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.big-icon { font-size: 40px; margin-bottom: 14px; color: var(--accent); }

/* ── چیپ فیلتر «وام‌های من» (پرشده، بدون کادر) ─────────────
   جدا از .chip عمومی نگه داشته شده تا فقط همین صفحه رو تحت تأثیر بذاره. */
.loan-filter-chip {
  flex-shrink: 0; white-space: nowrap; cursor: pointer;
  min-height: 40px; padding: 9px 16px; border-radius: 11px;
  font-size: 12.5px; font-weight: 500; border: none;
  background: var(--surface2); color: var(--muted);
  display: flex; align-items: center;
}
.loan-filter-chip.active { font-weight: 700; background: var(--accent); color: var(--accent-on); }
.loan-group-title { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.loan-group-title .line { flex: 1; height: 1px; background: var(--border); }

/* ── انعطاف روی صفحه‌های بزرگ‌تر (تبلت/لپ‌تاپ) ─────────────
   خود Mini App همیشه طراحی موبایلی می‌مونه (تلگرام هم روی دسکتاپ
   یه پنجره‌ی محدود نشونش می‌ده)، ولی وقتی مستقیم توی مرورگر عریض
   باز بشه، به‌جای کش اومدن تمام‌عرض، مثل بقیه‌ی اپ‌های موبایل‌محور
   یه ستون با عرض ثابت وسط صفحه نشون داده می‌شه. */
@media (min-width: 560px) {
  html { background: var(--desk-bg); }
  body {
    max-width: 440px;
    margin: 32px auto;
    min-height: calc(100vh - 64px);
    border-radius: 28px;
    box-shadow: var(--shadow-phone);
    overflow-x: hidden;
    position: relative;
  }
  .bottom-nav {
    max-width: 440px;
    margin: 0 auto;
    border-radius: 0 0 28px 28px;
  }
  #splash-screen { border-radius: 28px; }
}

/* صفحه‌های خیلی بزرگ (مانیتور دسکتاپ) — همون ستون رو کمی بزرگ‌تر و خواناتر می‌کنیم */
@media (min-width: 900px) {
  body { max-width: 460px; }
  .bottom-nav { max-width: 460px; }
}

/* ── اسپلش ورودی (طبق طراحی: گرادیان سبز متحرک + لوگو + متن) ─── */
#splash-screen {
  position: fixed; inset: 0; z-index: 99999;
  background: #000;
}
#splash-bg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Vazirmatn', sans-serif;
  background: linear-gradient(90deg, #0d9668, #34d399, #6ee7b7, #34d399, #0d9668);
  background-size: 220% 100%;
  animation:
    splash-bg-opacity 3000ms both,
    splash-bg-pan 3000ms linear both;
}
#splash-logo {
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  animation: splash-logo 3000ms both;
}
#splash-title {
  margin-top: 22px;
  font-size: 26px; font-weight: 800; color: #0a0d0b; letter-spacing: -.3px;
  animation: splash-title 3000ms both;
}
#splash-tagline {
  margin-top: 6px;
  font-size: 13px; color: rgba(10, 13, 11, .65);
  animation: splash-tagline 3000ms both;
}

@keyframes splash-bg-opacity {
  0% { opacity: 0; animation-timing-function: ease-out; }
  8% { opacity: 1; }
  88% { opacity: 1; animation-timing-function: ease-in; }
  100% { opacity: 0; }
}
@keyframes splash-bg-pan {
  0% { background-position: 0% 50%; }
  100% { background-position: 133% 50%; }
}
@keyframes splash-logo {
  0%, 8% { transform: scale(.4); opacity: 0; animation-timing-function: ease-out; }
  22% { transform: scale(.8); opacity: 1; }
  32% { transform: scale(1.08); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
  42%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes splash-title {
  0%, 42% { opacity: 0; transform: translateY(10px); animation-timing-function: ease-out; }
  58%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes splash-tagline {
  0%, 50% { opacity: 0; animation-timing-function: ease-out; }
  66%, 100% { opacity: 1; }
}