/* ════════════════════════════════════════
     CSS VARIABLES
  ════════════════════════════════════════ */
  :root {
    /* پس‌زمینه‌های ملایم و گرم */
    --bg:#faf7f2; --surface:#f3eee5; --card:#ffffff; --border:#d4cdb8;
    /* متن‌های پررنگ‌تر برای خوانایی بهتر */
    --ink:#1a1410; --ink2:#3d342a; --ink3:#6b6053;
    /* رنگ‌های اکسنت ملایم — مثل آبی پاستلی، سبز نعنایی، نارنجی شفقی */
    --accent:#5cb6d6; --accent2:#7bb986; --accent3:#e8a262;
    /* خطر ملایم‌تر */
    --danger:#d97570; --safe:#7bb986; --shadow:rgba(58,52,46,0.06);
  }
  [data-theme="dark"] {
    /* پس‌زمینه‌های ملایم تیره */
    --bg:#1a1a26; --surface:#222232; --card:#27273a; --border:#3d3d5a;
    /* متن‌های روشن‌تر در تم تاریک برای کنتراست بهتر */
    --ink:#f5f5fa; --ink2:#c5c5d8; --ink3:#8a8aac;
    /* اکسنت‌های ملایم در تم تاریک */
    --accent:#6cc5e0; --accent2:#8fc99a; --accent3:#e8b377;
    --danger:#e08882; --safe:#8fc99a; --shadow:rgba(0,0,0,0.3);
  }
  [data-theme="dark"] body { background:#0f0f1a; color:#e8e8f0; }
  [data-theme="dark"] .summary-card { background:#1e1e35; border-color:#2a2a44; }
  [data-theme="dark"] .accordion { background:#1a1a2e; border-color:#2a2a44; }
  [data-theme="dark"] .accordion-header { background:#1e1e35; color:#e8e8f0; }
  [data-theme="dark"] .form-group input,
  [data-theme="dark"] .form-group select,
  [data-theme="dark"] .form-group textarea { background:#0f0f1a; color:#e8e8f0; border-color:#2a2a44; }
  [data-theme="dark"] .bill-card,
  [data-theme="dark"] .exp-card,
  [data-theme="dark"] .alarm-card { background:#1e1e35; border-color:#2a2a44; color:#e8e8f0; }
  [data-theme="dark"] .drawer-nav { background:#1a1a2e; border-color:#2a2a44; }
  [data-theme="dark"] .drawer-item { color:#b0b0cc; }
  [data-theme="dark"] .drawer-item.active { background:#2a2a44; color:#5cb6d6; }
  [data-theme="dark"] .drawer-footer { background:#1a1a2e; border-color:#2a2a44; }
  [data-theme="dark"] .section-title { color:#b0b0cc; border-color:#2a2a44; }
  [data-theme="dark"] .backup-section { background:#1e1e35; }
  [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
    background:#1a1a2e !important; color:#e8e8f0 !important; border-color:#2a2a44 !important;
  }
  [data-theme="dark"] .rec-pick-item { background:#1e1e35; border-color:#2a2a44; }
  [data-theme="dark"] .alarm-popup { background:#1e1e35; color:#e8e8f0; }
  [data-theme="dark"] .topnav { background:#1a1a2e; border-bottom:1px solid #2a2a44; }
  [data-theme="dark"] .hamburger span { background:#e8e8f0; }
  [data-theme="dark"] .nav-page-title { color:#e8e8f0; }

  /* ════════════════════════════════════════
     BASE - MOBILE FIRST
  ════════════════════════════════════════ */
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

  body {
    font-family:'Vazirmatn',sans-serif;
    background:var(--bg);
    color:var(--ink);
    min-height:100vh;
    overscroll-behavior:none;
    -webkit-overflow-scrolling:touch;
  }
  body.latin { font-family:'IBM Plex Sans',sans-serif; }
  body.jp { font-family:'Noto Sans JP',sans-serif; }
  body.bengali { font-family:'Noto Sans Bengali',sans-serif; }
  body.devanagari { font-family:'Noto Sans Devanagari',sans-serif; }
  body.arabic-font { font-family:'Readex Pro',sans-serif; }

  /* ════ TOPNAV - MOBILE FIRST ════ */
  .topnav {
    background:var(--ink);
    color:white;
    padding:0 10px;
    padding-top:env(safe-area-inset-top);
    display:flex;
    align-items:center;
    gap:6px;
    height:calc(56px + env(safe-area-inset-top));
    position:sticky;
    top:0;
    z-index:202;
    /* همیشه چیدمان ثابت - با زبان عوض نمی‌شه */
    direction:ltr;
  }
  .nav-page-title {
    color:white;
    font-size:14px;
    font-weight:700;
    flex:1;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* تب فرعی (Account و Settings) در بالا */
  .topnav-tab {
    background:rgba(255,255,255,0.18);
    border:1px solid rgba(255,255,255,0.3);
    color:#fff;
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    cursor:pointer;
    flex-shrink:0;
    transition:all .2s;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    text-shadow:0 1px 2px rgba(0,0,0,0.2);
  }
  .topnav-tab:active { transform:scale(0.92); }
  .topnav-tab.active {
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }
  /* تب حساب کاربری - با رنگ سبز شب‌رنگ */
  .topnav-tab-account {
    background:rgba(74,222,128,0.25) !important;
    border:1.5px solid #4ade80 !important;
    box-shadow:0 0 8px rgba(74,222,128,0.5), inset 0 0 6px rgba(74,222,128,0.2) !important;
  }
  .topnav-tab-account.active {
    background:#22c55e !important;
    border-color:#16a34a !important;
    box-shadow:0 0 12px rgba(74,222,128,0.8) !important;
  }

  /* selectر زبان در بالا - همیشه سمت راست topnav ثابت می‌مونه فارغ از زبان */
  .topnav-lang {
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.15);
    color:rgba(255,255,255,0.9);
    font-size:11px;
    font-weight:700;
    padding:6px 8px;
    border-radius:18px;
    outline:none;
    cursor:pointer;
    flex-shrink:0;
    max-width:80px;
    /* چون topnav ltr است، margin-left:auto آن را به انتها (سمت راست) می‌فرستد */
    margin-left:auto;
    order:99;
  }
  .topnav-lang option { background:#1a1612;color:white; }

  .hamburger {
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:5px;
    position:absolute;
    right:12px;
    top:calc(50% + env(safe-area-inset-top)/2 + 3px);
    transform:translateY(-50%);
    touch-action:manipulation;
  }
  .hamburger span { display:block;width:24px;height:2.5px;background:white;border-radius:2px;transition:all .3s; }
  .hamburger.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity:0; }
  .hamburger.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

  #notif-bell-btn {
    background:rgba(255,255,255,0.18);
    border:1px solid rgba(255,255,255,0.3);
    cursor:pointer;
    width:38px;
    height:38px;
    border-radius:50%;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    position:relative;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    text-shadow:0 1px 2px rgba(0,0,0,0.2);
  }
  #notif-bell-btn:active { transform:scale(0.92); }

  /* ════ PAGE - MOBILE FIRST ════ */
  .page {
    display:none;
    padding:12px 12px calc(16px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
  }
  .page.active { display:block; animation:fadeUp .3s ease; }
  @keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

  /* ════ INCOME / EXPENSE TABS ════ */
  .exp-type-tabs {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:14px;
    padding:6px;
    background:var(--surface);
    border-radius:14px;
    border:1.5px solid var(--border);
  }
  .exp-type-tab {
    padding:11px 14px;
    border-radius:10px;
    cursor:pointer;
    text-align:center;
    font-size:14px;
    font-weight:800;
    color:var(--ink2);
    transition:all .2s;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .exp-type-tab:active { transform:scale(0.97); }
  .exp-type-tab.expense.active {
    background:linear-gradient(135deg, #d97570, #c25954);
    color:#fff;
    box-shadow:0 3px 10px rgba(217,117,112,0.35);
  }
  .exp-type-tab.income.active {
    background:linear-gradient(135deg, #7bb986, #5fa370);
    color:#fff;
    box-shadow:0 3px 10px rgba(123,185,134,0.35);
  }

  /* ════ TOAST ════ */
  .toast {
    position:fixed;
    bottom:calc(20px + env(safe-area-inset-bottom));
    left:50%;
    transform:translateX(-50%) translateY(80px);
    background:var(--ink);
    color:white;
    padding:10px 20px;
    border-radius:11px;
    font-size:13px;
    font-weight:600;
    z-index:999;
    transition:transform .3s;
    box-shadow:0 8px 24px rgba(0,0,0,.2);
    white-space:nowrap;
    font-family:inherit;
  }
  .toast.show { transform:translateX(-50%) translateY(0); }

  /* ════ SUMMARY CARDS - MOBILE FIRST ════ */
  .summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
  .summary-card {
    background:var(--card);
    border:1.5px solid var(--border);
    border-radius:14px;
    padding:14px;
    position:relative;
    overflow:hidden;
    box-shadow:0 2px 12px rgba(0,0,0,0.06);
  }
  .summary-card::before { content:'';position:absolute;top:0;inset-inline-end:0;width:60px;height:60px;border-radius:0 14px 0 60px;opacity:.08; }
  .summary-card.red::before { background:var(--danger); }
  .summary-card.green::before { background:var(--safe); }
  .summary-card.gold::before { background:var(--accent3); }
  .sc-label { font-size:11px;font-weight:800;color:var(--ink2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px; }
  .sc-value { font-size:18px;font-weight:900;color:var(--ink);line-height:1; }
  .sc-value small { font-size:11px;font-weight:700;color:var(--ink2); }
  .sc-sub { font-size:11px;color:var(--ink3);margin-top:4px; }

  /* ════ ACCORDION - MOBILE FIRST ════ */
  .accordion { background:var(--card);border:1.5px solid var(--border);border-radius:14px;margin-bottom:10px;overflow:hidden;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,0.05); }
  .accordion-header { display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none;transition:background .2s;min-height:52px;touch-action:manipulation; }
  .accordion-header:active { background:var(--surface); }
  .accordion-icon { font-size:20px;width:34px;height:34px;background:var(--surface);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
  .accordion-title { flex:1;font-size:14px;font-weight:800;color:var(--ink); }
  .accordion-count { font-size:12px;font-weight:800;background:var(--accent);color:white;padding:2px 9px;border-radius:20px;min-width:20px;text-align:center; }
  .accordion-arrow { font-size:12px;color:var(--ink3);transition:transform .3s;flex-shrink:0; }
  .accordion.open .accordion-arrow { transform:rotate(180deg); }
  .accordion-body { max-height:0;overflow:hidden;transition:max-height .5s ease; }
  .accordion.open .accordion-body { max-height:4000px;overflow:visible; }
  .accordion-inner { padding:0 14px 14px;overflow:hidden; }

  /* ════ FORMS - MOBILE FIRST ════ */
  .add-form { background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,0.05); }
  .form-group { display:flex;flex-direction:column;gap:4px;margin-bottom:12px; }
  .form-group label { font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin-bottom:4px; }
  .form-grid { display:grid;grid-template-columns:1fr;gap:8px; }
  .btn-add {
    width:100%;
    padding:13px;
    background:var(--accent);
    color:white;
    border:none;
    border-radius:12px;
    font-family:inherit;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    height:48px;
    touch-action:manipulation;
  }
  .btn-add:active { opacity:.85; }

  /* ════ INPUTS - MOBILE FIRST ════ */
  .add-form input[type="text"],
  .add-form input[type="number"],
  .add-form input[type="date"],
  .add-form input[type="time"],
  .add-form input[type="month"],
  .add-form select,
  .accordion-inner input[type="text"],
  .accordion-inner input[type="number"],
  .accordion-inner input[type="date"],
  .accordion-inner input[type="time"],
  .accordion-inner select {
    width:100%;
    box-sizing:border-box;
    padding:10px 12px;
    background:var(--bg);
    border:1.5px solid var(--border);
    border-radius:9px;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    outline:none;
    height:44px;
  }
  .add-form input:focus,
  .accordion-inner input:focus,
  .add-form select:focus,
  .accordion-inner select:focus { border-color:var(--accent); }

  /* ════ SAFETY: تمام فیلدهای فرم در همه زبان‌ها داخل کارت می‌مونن ════ */
  .add-form, .accordion-inner, .backup-section { overflow:hidden; }
  .add-form input, .add-form select, .accordion-inner input, .accordion-inner select { max-width:100%; }
  .form-group { overflow:hidden; min-width:0; }
  .form-grid > * { min-width:0; }
  /* جلوگیری از سرریز متن label در RTL/LTR */
  .form-group label { word-wrap:break-word;overflow-wrap:break-word; }

  /* ════ EXPENSE CARDS (لیست تاریخچه - card layout برای همه زبان‌ها) ════ */
  .expense-list {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:16px;
  }
  .expense-card {
    background:var(--card);
    border:1.5px solid var(--border);
    border-radius:12px;
    padding:12px 14px;
    transition:border-color .2s;
  }
  .expense-card:active { border-color:var(--accent); }
  .expense-card.income { border-inline-start:4px solid #7bb986; }
  .expense-card.expense { border-inline-start:4px solid #d97570; }
  .expense-card-row1 {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
    flex-wrap:wrap;
  }
  .expense-card-title {
    font-size:14px;
    font-weight:800;
    color:var(--ink);
    flex:1;
    min-width:120px;
    word-break:break-word;
  }
  .expense-card-amount {
    font-size:15px;
    font-weight:900;
    white-space:nowrap;
  }
  .expense-card-amount.income { color:#3d8a4a; }
  .expense-card-amount.expense { color:#c25954; }
  .expense-card-row2 {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    font-size:11px;
  }
  .expense-card-cat {
    padding:3px 10px;
    border-radius:14px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
  }
  .expense-card-meta {
    color:var(--ink2);
    font-weight:700;
  }
  .expense-card-pay {
    padding:2px 8px;
    border-radius:14px;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
  }
  .expense-card-pay.cash { background:rgba(123,185,134,0.15);color:#3d8a4a; }
  .expense-card-pay.card { background:rgba(92,182,214,0.15);color:#2980a8; }
  .expense-card-del {
    background:none;
    border:none;
    cursor:pointer;
    font-size:14px;
    padding:4px 6px;
    color:var(--ink3);
    margin-inline-start:auto;
  }
  .expense-card-del:active { color:var(--danger); }

  /* ════ EXPENSE TABLE ════ */
  .expense-table {
    background:var(--card);
    border:1.5px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    margin-bottom:16px;
  }
  .expense-table table { width:100%;border-collapse:collapse; }
  .expense-table th {
    background:var(--surface);
    color:var(--ink);
    font-size:11px;
    font-weight:800;
    padding:10px 8px;
    text-align:start;
    border-bottom:1.5px solid var(--border);
    white-space:nowrap;
  }
  .expense-table td {
    padding:10px 8px;
    border-bottom:1px solid var(--border);
    font-size:13px;
    font-weight:600;
    color:var(--ink);
  }
  .expense-table tr:last-child td { border-bottom:none; }
  .expense-table .empty-state { padding:24px;text-align:center; }
  .cat-badge {
    display:inline-block;
    padding:3px 10px;
    border-radius:14px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
  }
  .amount-income { color:#3d8a4a !important;font-weight:900;white-space:nowrap; }
  .amount-expense { color:#c25954 !important;font-weight:900;white-space:nowrap; }

  /* ════ SECTION TITLE ════ */
  .section-title { font-size:14px;font-weight:900;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:8px; }
  .section-title::after { content:'';flex:1;height:1.5px;background:var(--border);border-radius:2px; }

  /* ════ BILL/EXPENSE CARDS ════ */
  .bill-list { display:flex;flex-direction:column;gap:8px;margin-bottom:16px; }
  .bill-item { background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;transition:all .2s;flex-wrap:wrap; }
  .bill-item:active { border-color:var(--accent); }
  .bill-item.overdue { border-color:var(--danger);background:#fff8f7; }
  .bill-item.paid { opacity:.55; }
  .bill-icon { width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:var(--surface); }
  .bill-info { flex:1;min-width:70px; }
  .bill-name { font-size:14px;font-weight:800;color:var(--ink); }
  .bill-due { font-size:12px;font-weight:600;color:var(--ink2);margin-top:2px; }
  .bill-amount { font-size:14px;font-weight:900;color:var(--ink);white-space:nowrap; }
  .bill-amount small { font-size:11px;font-weight:600;color:var(--ink2); }
  .bill-status { font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;white-space:nowrap; }
  .bill-status.due { background:#fff3cd;color:#856404; }
  .bill-status.overdue { background:#fde8e8;color:var(--danger); }
  .bill-status.paid { background:#d4edda;color:var(--safe); }
  .btn-pay { padding:6px 12px;background:var(--accent2);color:white;border:none;border-radius:8px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;touch-action:manipulation; }
  .delete-btn { background:none;border:none;color:var(--ink3);cursor:pointer;font-size:15px;padding:4px 6px; }
  .delete-btn:active { color:var(--danger); }

  /* ════ ALARM CARDS ════ */
  .alarm-list { display:flex;flex-direction:column;gap:8px;margin-bottom:16px; }
  .alarm-card { background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;transition:border-color .2s; }
  .alarm-card:active { border-color:var(--accent); }
  /* alarm-item برای birthday/document/loan */
  .alarm-item {
    background:var(--card);
    border:1.5px solid var(--border);
    border-radius:12px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    gap:10px;
    transition:border-color .2s;
    margin-bottom:8px;
  }
  .alarm-item:active { border-color:var(--accent); }
  .alarm-icon {
    width:38px;height:38px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;
    flex-shrink:0;
    background:var(--surface);
  }
  .alarm-info { flex:1;min-width:70px; }
  .alarm-title { font-size:14px;font-weight:800;color:var(--ink);margin-bottom:3px; }
  .alarm-time { font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:2px; }
  .alarm-repeat { font-size:11px;font-weight:600;color:var(--ink3); }

  /* ════ BACKUP SECTION ════ */
  .backup-section { background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,0.05); }
  .backup-btns { display:flex;gap:8px;flex-wrap:wrap;margin-top:10px; }
  .btn-backup { padding:10px 16px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border:none;touch-action:manipulation; }
  .btn-export { background:var(--accent2);color:white; }
  .btn-import { background:var(--accent3);color:white; }
  .btn-clear { background:var(--danger);color:white; }

  /* ════ DRAWER ════ */
  .drawer-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:199;opacity:0;pointer-events:none;transition:opacity .3s; }
  .drawer-overlay.open { opacity:1;pointer-events:all; }
  .drawer { position:fixed;top:0;right:-300px;width:280px;height:100vh;background:var(--ink);z-index:201;transition:right .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;border-radius:16px 0 0 16px;box-shadow:-4px 0 20px rgba(0,0,0,0.3);padding-bottom:env(safe-area-inset-bottom); }
  .drawer.open { right:0; }
  .drawer-header { padding:24px 20px 20px;border-bottom:1px solid rgba(255,255,255,0.1); }
  .drawer-logo { font-size:24px;font-weight:900;color:var(--accent3); }
  .drawer-logo span { color:white; }
  .drawer-sub { font-size:12px;color:rgba(255,255,255,0.4);margin-top:4px; }
  .drawer-nav { padding:12px 0;flex:1; }
  .drawer-item { display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;transition:all .2s;border-inline-start:3px solid transparent;color:rgba(255,255,255,0.6);font-size:14px;font-weight:600;touch-action:manipulation; }
  .drawer-item:active { background:rgba(255,255,255,0.06);color:white; }
  .drawer-item.active { background:rgba(200,82,26,0.15);border-inline-start-color:var(--accent);color:white; }
  .drawer-item-icon { font-size:20px;width:28px;text-align:center;flex-shrink:0; }
  .drawer-item-label { flex:1; }
  .drawer-footer { padding:16px 20px;border-top:1px solid rgba(255,255,255,0.1); }
  .drawer-footer .lang-select { width:100%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:white;font-size:13px;font-weight:600;padding:9px 12px;border-radius:10px;outline:none;cursor:pointer; }
  .lang-select { background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:white;font-size:12px;font-weight:600;padding:5px 8px;border-radius:8px;outline:none;cursor:pointer;flex-shrink:0; }
  .lang-select option { background:#1a1612;color:white; }

  /* ════ BOTTOM NAV — Tab Bar (یک ردیف، ۵ تب) ════ */
  .bottom-nav {
    position:fixed;left:0;right:0;bottom:0;
    background:var(--card);
    border-top:1.5px solid var(--border);
    z-index:150;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 12px rgba(0,0,0,0.08);
    /* همیشه چیدمان ثابت بدون توجه به زبان */
    direction:ltr;
  }
  .bottom-nav-inner {
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:4px;
  }
  .bottom-nav-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:6px 2px;
    border-radius:10px;
    cursor:pointer;
    color:var(--ink3);
    text-align:center;
    background:transparent;
    border:none;
    transition:all .2s;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .bottom-nav-item:active {
    background:rgba(92,182,214,0.1);
    transform:scale(0.95);
  }
  .bottom-nav-item.active {
    color:var(--accent);
  }
  .bottom-nav-item.active .bottom-nav-icon-bg {
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
  }
  .bottom-nav-icon-bg { display:none; } .bottom-nav-icon-bg-DISABLED {
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    background:var(--bg);
    border:1.5px solid var(--border);
    transition:all .2s;
  }
  .bottom-nav-label {
    font-size:13px;
    font-weight:900;
    color:#1a1612;
    white-space:nowrap;
  }
  [data-theme="dark"] .bottom-nav-label {
    color:#e8e8f0;
  }
  .bottom-nav-item.active .bottom-nav-label {
    color:var(--accent);
  }

  /* اضافه کردن padding پایین به body */
  body { padding-bottom:calc(82px + env(safe-area-inset-bottom)); }

  /* ════ NOTIFICATIONS ════ */
  #notif-history-panel { position:fixed;top:calc(52px + env(safe-area-inset-top));left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:500;display:none; }
  #notif-history-inner { position:absolute;top:0;left:0;right:0;background:var(--card);border-radius:0 0 20px 20px;padding:16px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 30px rgba(0,0,0,0.3); }
  #notif-history-list { overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;-webkit-overflow-scrolling:touch; }

  /* ════ ANIMATIONS ════ */
  @keyframes bellPulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.3);opacity:0.7;} }
  @keyframes bellShake { 0%,100%{transform:rotate(0deg);} 20%{transform:rotate(-15deg);} 40%{transform:rotate(15deg);} 60%{transform:rotate(-10deg);} 80%{transform:rotate(10deg);} }
  .bell-shake { animation:bellShake 0.5s ease !important; }
  @keyframes bellShakeLoop {
    0%, 85%, 100% { transform: rotate(0deg); }
    87% { transform: rotate(-15deg); }
    89% { transform: rotate(15deg); }
    91% { transform: rotate(-10deg); }
    93% { transform: rotate(10deg); }
    95% { transform: rotate(-5deg); }
    97% { transform: rotate(5deg); }
  }
  .bell-shake-loop { animation: bellShakeLoop 2s ease-in-out infinite; transform-origin: top center; display:inline-block; }

  /* ════ MISC ════ */
  .empty-state { text-align:center;padding:28px;color:var(--ink2);font-size:13px;font-weight:700; }
  .search-bar { display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap; }
  .search-input { flex:1;min-width:120px;padding:9px 12px;background:var(--card);border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:13px;color:var(--ink);outline:none; }
  .search-input:focus { border-color:var(--accent); }
  .filter-select { padding:9px 10px;background:var(--card);border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:12px;color:var(--ink);outline:none;cursor:pointer; }
  .amount-wrap { display:flex;gap:6px;align-items:stretch;width:100%; }
  .amount-wrap input { flex:2;min-width:0; }
  .amount-wrap .currency-select { flex:1;min-width:90px;max-width:120px;padding:10px 12px;background:var(--bg);border:1.5px solid var(--border);border-radius:9px;font-size:14px;font-weight:800;color:var(--ink);outline:none;cursor:pointer; }

  /* ════ DRUM PICKER ════ */
  .drum-picker-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:flex-end;justify-content:center; }
  .drum-picker-sheet { background:var(--card);border-radius:20px 20px 0 0;padding:0 0 30px 0;width:100%;max-width:480px; }
  .drum-picker-header { display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border); }
  .drum-picker-title { font-size:15px;font-weight:800;color:var(--ink); }
  .drum-picker-confirm { background:var(--accent);color:white;border:none;border-radius:10px;padding:8px 20px;font-size:14px;font-weight:700;cursor:pointer; }
  .drum-picker-cancel { background:none;color:var(--ink3);border:none;font-size:14px;cursor:pointer; }
  .drum-picker-body { display:flex;justify-content:center;gap:4px;padding:16px 20px;position:relative; }
  .drum-picker-body::before,.drum-picker-body::after { content:'';position:absolute;left:0;right:0;height:35%;pointer-events:none;z-index:3; }
  .drum-picker-body::before { top:0;background:linear-gradient(to bottom,var(--card) 10%,transparent); }
  .drum-picker-body::after { bottom:0;background:linear-gradient(to top,var(--card) 10%,transparent); }
  .drum-col { flex:1;max-width:110px;height:220px;overflow:hidden;position:relative;cursor:grab; }
  .drum-col:active { cursor:grabbing; }
  .drum-col-inner { display:flex;flex-direction:column;align-items:center;will-change:transform; }
  .drum-item { height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:500;color:var(--ink3);user-select:none;width:100%;flex-shrink:0;position:relative;z-index:2; }
  .drum-item.selected { font-size:34px;font-weight:900;color:var(--accent);letter-spacing:1px; }
  .drum-selector { position:absolute;top:50%;transform:translateY(-50%);left:8px;right:8px;height:46px;background:transparent;border-radius:12px;pointer-events:none;z-index:1;border:none; }
  .drum-sep { display:flex;align-items:center;font-size:28px;font-weight:800;color:var(--ink);padding:0 2px;align-self:center;z-index:2;position:relative; }
  .time-trigger { width:100%;padding:11px 14px;background:var(--bg);border:1.5px solid var(--border);border-radius:9px;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;touch-action:manipulation; }
  .time-trigger:active { border-color:var(--accent); }

  /* ════ NUMBER SPINNER ════ */
  .num-spinner { display:flex;align-items:center;background:var(--bg);border:1.5px solid var(--border);border-radius:9px;overflow:hidden;width:100%; }
  .num-spinner-val { flex:1;text-align:center;font-size:15px;font-weight:700;color:var(--ink);padding:8px 4px;min-width:40px; }
  .num-spinner-btn { width:44px;height:44px;background:var(--surface);border:none;cursor:pointer;font-size:20px;color:var(--ink3);display:flex;align-items:center;justify-content:center;flex-shrink:0;touch-action:manipulation; }
  .num-spinner-btn:active { background:var(--accent);color:white; }

  /* ════ BUDGET ════ */
  .budget-list { display:flex;flex-direction:column;gap:10px;margin-bottom:16px; }
  .budget-item { background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px; }
  .budget-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }
  .budget-cat { font-size:14px;font-weight:800;color:var(--ink); }
  .budget-amounts { font-size:13px;font-weight:700;color:var(--ink); }
  .budget-bar-bg { height:8px;background:var(--surface);border-radius:10px;overflow:hidden; }
  .budget-bar-fill { height:100%;border-radius:10px;transition:width .6s ease; }
  .budget-bar-fill.ok { background:var(--safe); }
  .budget-bar-fill.warn { background:var(--accent3); }
  .budget-bar-fill.over { background:var(--danger); }
  .budget-status { font-size:12px;font-weight:800;margin-top:5px; }
  .budget-status.ok { color:var(--safe); }
  .budget-status.warn { color:#856404; }
  .budget-status.over { color:var(--danger); }

  /* ════ CHARTS ════ */
  .month-chart { background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:14px;margin-bottom:16px;overflow:hidden; }
  .chart-scroll { overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px; }
  .chart-bars { display:flex;gap:4px;align-items:flex-end;min-width:max-content;padding:0 4px; }
  .chart-bar-wrap { display:flex;flex-direction:column;align-items:center;gap:5px;height:140px;justify-content:flex-end;min-width:52px;cursor:pointer;border-radius:8px;padding:5px;transition:background .2s;position:relative; }
  .chart-bar-wrap:active { background:var(--surface); }
  .chart-bar-wrap.selected { background:rgba(59,159,214,.10); }
  .chart-bar { width:34px;border-radius:7px 7px 0 0;min-height:5px;transition:height .4s ease;background:#cdc4b4; }
  .chart-bar.prev { background:#cdc4b4; }
  .chart-bar.current { background:#3b9fd6;box-shadow:0 2px 8px rgba(59,159,214,.45); }
  .chart-label { font-size:12px;color:var(--ink2);font-weight:700; }
  .chart-bar-wrap.selected .chart-label { color:#2a8fb8;font-weight:900; }

  /* ════ PIE CHART ════ */
  .pie-section { display:flex;flex-direction:column;gap:14px;margin-bottom:16px; }
  .pie-wrap { background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:12px; }
  .pie-canvas-wrap { position:relative; }
  .pie-legend { display:flex;flex-direction:column;gap:6px;width:100%; }
  .pie-legend-item { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700; }
  .pie-legend-color { width:14px;height:14px;border-radius:4px;flex-shrink:0; }
  .pie-legend-label { flex:1;color:var(--ink);font-weight:700; }
  .pie-legend-val { font-weight:800;color:var(--ink); }
  .pie-legend-pct { font-size:12px;font-weight:700;color:var(--ink2); }
  .pie-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }

  /* ════ SMART COMBO ════ */
  .combo-wrap { position:relative; }
  .suggestions { display:none;position:absolute;top:calc(100% + 4px);inset-inline-start:0;width:100%;background:var(--card);border:1.5px solid var(--accent);border-radius:10px;z-index:100;max-height:180px;overflow-y:auto;box-shadow:0 4px 16px var(--shadow); }
  .suggestions.show { display:block; }
  .suggestion-item { padding:10px 14px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px; }
  .suggestion-item:last-child { border-bottom:none; }
  .suggestion-item:active { background:var(--surface); }

  /* ════ PWA BANNER ════ */
  .pwa-banner { position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));inset-inline-start:16px;inset-inline-end:16px;background:var(--ink);color:white;border-radius:14px;padding:14px 16px;display:none;align-items:center;gap:12px;z-index:9990;box-shadow:0 8px 30px rgba(0,0,0,0.3); }
  .pwa-banner.show { display:flex;animation:popIn .3s ease; }
  @keyframes popIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
  .pwa-banner-text { flex:1;font-size:13px;line-height:1.5; }
  .pwa-banner-text strong { display:block;font-size:14px;color:var(--accent3); }
  .btn-pwa-install { padding:8px 16px;background:var(--accent);color:white;border:none;border-radius:8px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap; }
  .btn-pwa-close { background:none;border:none;color:rgba(255,255,255,0.5);font-size:18px;cursor:pointer;padding:2px 6px; }

  /* ════ MODAL ════ */
  .modal-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:800;align-items:flex-end;justify-content:center;padding-bottom:env(safe-area-inset-bottom); }
  .modal-overlay.open { display:flex; }
  .modal-box { background:var(--card);border-radius:20px 20px 0 0;padding:20px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto; }

  /* ════ TABLET & DESKTOP ════ */
  @media(min-width:640px) {
    .topnav { padding:0 24px;height:56px; }
    .page { padding:20px;max-width:960px;margin:0 auto; }
    .summary-grid { grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px; }
    .summary-card { padding:18px;border-radius:16px; }
    .sc-value { font-size:22px; }
    .form-grid { grid-template-columns:1fr 1fr; }
    .accordion-header { padding:15px 18px; }
    .accordion-inner { padding:0 18px 18px; }
    .add-form { padding:18px; }
    .pie-section { flex-direction:row; }
    .modal-overlay { align-items:center;padding:20px; }
    .modal-box { border-radius:20px;max-height:80vh; }
  }