:root {
    /* --- مقادیر پیش‌فرض (fallback) — اگه تلگرام themeParams نداشت همین‌ها استفاده می‌شن --- */
    /* Task 18A — Genzo Trade rebrand: پالت بنفش/آبی قبلی (Ayda) با پالت سبز Genzo جایگزین شد. */
    /* بازگشت به پالت آبی/بنفش (طبق درخواست کاربر) — فقط رنگ‌های برند؛ --green/--red (نشانگر
       رشد/افت قیمت، معنای مالی دارن نه برندینگ) دست‌نخورده می‌مونن. */
    --bg: #0a0e1f;
    --surface: #131a33;
    --surface-2: #182142;
    --surface-3: #1d2a4d;
    --line: #2a3660;
    --text: #eaedfb;
    --text-dim: #8b93b8;
    --primary: #5457e0;
    --primary-soft: #22265c;
    --secondary: #7b7dff;
    --tertiary: #9d9fff;
    --green: #16c784;
    --red: #ea3943;
    --gold: #f5c542;
    --bronze: #d99a5b;
    --silverc: #c3c8da;

    /* نام‌های مرجع برند Genzo (همون مقادیر بالا، برای ارجاع مستقیم طبق نام‌گذاری Task 18A) */
    --genzo-green: #5457e0;
    --genzo-dark: #0a0e1f;
    --genzo-gold: #f5c542;
  }

  * { box-sizing: border-box; }

  html { direction: rtl; }
  html.lang-en { direction: ltr; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Vazirmatn', sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  /* اعداد: برای فارسی همون فونت Vazirmatn (که رقم فارسی درست و هم‌راستا داره) و برای انگلیسی JetBrains Mono */
  .num { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }
  .num.mono { font-family: 'JetBrains Mono', monospace; }
  .mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum' 1; }
  html.lang-fa .num { font-family: 'Vazirmatn', sans-serif; }

  header {
    padding: 18px 16px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 10;
    gap: 8px;
  }
  .brand { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
  .brand-logo { height: 30px; width: auto; display: block; }
  .brand-name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
  .brand-sub { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  .header-right { display: flex; align-items: center; gap: 8px; flex: none; }

  .lang-switch { display: flex; flex-direction: row; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px; flex: none; cursor: pointer; }
  .lang-switch span { font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 999px; color: var(--text-dim); transition: background 0.15s ease, color 0.15s ease; }
  .lang-switch span.active { background: var(--primary); color: #fff; }

  .plan-pill { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0; background: none; border: none; color: var(--text-dim); flex: none; }
  .plan-pill.active { color: var(--secondary); }
  .plan-pill-main { font-size: 11.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
  .plan-pill-name { direction: ltr; unicode-bidi: plaintext; max-width: 78px; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 3px; }
  .pill-user-icon { width: 10px; height: 10px; flex: none; opacity: 0.7; }
  .pill-user-icon svg { width: 100%; height: 100%; display: block; }
  .plan-pill-sub { font-size: 9.5px; opacity: 0.75; white-space: nowrap; }

  /* --- بوردر گرادینت ظریف دور کل اپ برای کاربر VIP --- */
  body.is-vip { box-shadow: inset 0 0 0 1.5px rgba(232, 200, 116, 0.35); }
  body.is-vip header { background: linear-gradient(180deg, rgba(232, 200, 116, 0.06), transparent); }
  body.is-vip .plan-pill.active { color: var(--gold); }
  body.is-vip .plan-pill.active .plan-pill-main { color: var(--gold); }

  main { padding: 14px 14px 96px; }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; animation: fadeIn 0.22s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

  .section-title { font-size: 13px; color: var(--text-dim); margin: 20px 4px 10px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
  .section-title.primary { font-size: 14.5px; font-weight: 700; color: var(--text); }
  .section-title .section-icon { font-size: 14px; opacity: 0.85; }
  .section-title .help-btn { margin-right: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-weight: 700; flex: none; }
  html.lang-en .section-title .help-btn { margin-right: 0; margin-left: auto; }

  .coin-row { display: flex; align-items: center; justify-content: space-between; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; gap: 8px; }
  .coin-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .coin-symbol { font-weight: 700; font-size: 15px; }
  .coin-name { font-size: 12px; color: var(--text-dim); }
  .coin-mid { flex: 1; display: flex; justify-content: center; }
  .coin-right { text-align: left; flex: none; }
  html.lang-en .coin-right { text-align: right; }
  .coin-price { font-size: 15px; font-weight: 600; }
  .coin-price .unit { font-size: 10px; color: var(--text-dim); font-weight: 400; margin-right: 3px; }
  html.lang-en .coin-price .unit { margin-right: 0; margin-left: 3px; }
  .coin-price svg { width: 12px; height: 12px; vertical-align: -1px; margin-left: 2px; color: var(--gold); }
  html.lang-en .coin-price svg { margin-left: 0; margin-right: 2px; }
  .coin-toman { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
  .coin-change { font-size: 12px; margin-top: 2px; display: inline-flex; padding: 2px 7px; border-radius: 8px; }
  .rank-badge { width: 20px; height: 20px; border-radius: 7px; background: var(--surface-2); color: var(--text-dim); font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
  .rank-badge.top { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; }
  .up { color: var(--green); background: rgba(79, 214, 148, 0.12); }
  .down { color: var(--red); background: rgba(255, 138, 128, 0.12); }

  /* اندازه‌ی نمایش با viewBox جدید (72x32) در markets.js هماهنگه؛ فقط عرض/ارتفاع نمایش کمی از
     viewBox کوچیک‌تره تا همچنان جمع‌وجور توی ردیف لیست جا بشه، خودِ SVG با preserveAspectRatio="none" کشیده می‌شه */
  .sparkline { width: 60px; height: 26px; flex: none; }
  .sparkline path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .sparkline.up path { stroke: var(--green); }
  .sparkline.down path { stroke: var(--red); }

  .star-btn { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
  .star-btn:active { transform: scale(0.88); }
  .star-btn svg { width: 16px; height: 16px; }
  .star-btn svg path { fill: none; stroke: var(--text-dim); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .star-btn.on { background: var(--primary-soft); border-color: var(--primary); }
  .star-btn.on svg path { fill: var(--secondary); stroke: var(--secondary); }

  /* Task 18E — Dynamic Markets: آیکون کوین (اختیاری، از asset.image واقعی)؛ اگه لود نشه onerror
     خودش <img> رو حذف می‌کنه، پس هیچ‌وقت آیکون شکسته/جاافتاده دیده نمی‌شه. */
  .coin-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; }
  .coin-price-na { font-size: 12px; color: var(--text-dim); }
  .markets-error-state .btn-small { width: auto; padding: 9px 18px; }

  .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
  .card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
  .card p { margin: 0 0 12px; font-size: 13px; color: var(--text-dim); line-height: 1.7; }

  button { font-family: inherit; border: none; border-radius: 12px; padding: 13px 16px; font-size: 14px; font-weight: 700; cursor: pointer; width: 100%; transition: transform 0.12s ease, opacity 0.12s ease; }
  button:active { transform: scale(0.985); }
  .btn-primary { background: linear-gradient(90deg, var(--primary), #5457e0); color: #fff; }
  .btn-outline { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
  .btn-row { display: flex; gap: 8px; }
  .btn-row button { flex: 1; }

  .alert-item { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; font-size: 13px; gap: 8px; }
  .alert-item .actions { display: flex; align-items: center; gap: 12px; flex: none; }
  .alert-item .edit { color: var(--secondary); font-size: 12px; cursor: pointer; }
  .alert-item .remove { color: var(--red); font-size: 12px; cursor: pointer; }

  /* هشدار هوشمند: برخلاف alert-item (که فقط ۲ لینک اکشن کوتاه داره: ویرایش/حذف)، اینجا هم متن
     توضیح طولانی‌تره و هم ۳ لینک اکشن داریم (فعال‌سازی/غیرفعال‌سازی + ویرایش + حذف)؛ اگه همه‌چیز
     توی یه ردیف افقی جا می‌شد (مثل alert-item)، روی صفحه‌های باریک متن له می‌شد یا اکشن‌ها می‌ریختن
     بیرون. به‌جاش عمودی چیده شده: توضیح بالا، ردیف اکشن‌ها پایین. */
  .smart-alert-item { padding: 13px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; font-size: 13px; }
  .smart-alert-desc { line-height: 1.7; word-break: break-word; }
  .smart-alert-status { opacity: 0.7; font-size: 11px; }
  .smart-alert-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .smart-alert-actions .edit { color: var(--secondary); font-size: 12px; cursor: pointer; }
  .smart-alert-actions .remove { color: var(--red); font-size: 12px; cursor: pointer; }

  .empty-state { text-align: center; padding: 26px 12px; color: var(--text-dim); }
  .empty-state .empty-icon { font-size: 28px; margin-bottom: 8px; opacity: 0.6; }
  .empty-state p { margin: 0; font-size: 13px; line-height: 1.7; }
  .empty-state .empty-state-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin: 2px 0 6px; line-height: 1.5; }
  /* Task 17F — CTA زیر empty-state (مثلاً «مشاهده بازارها» در Watchlist خالی)؛ button پیش‌فرض
     width:100% است، اینجا فشرده و وسط‌چین نگه می‌داریم تا در کنار متن مرکزی empty-state جا بیفتد. */
  .empty-state .empty-state-cta { width: auto; display: inline-block; padding: 10px 22px; margin-top: 14px; }
  .empty-note { color: var(--text-dim); font-size: 13px; padding: 14px 4px; }

  .watch-item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; overflow: hidden; }
  .watch-item-head { display: flex; align-items: center; gap: 8px; padding: 13px 14px; font-size: 13px; cursor: pointer; }
  .watch-item-left { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto; }
  .watch-star svg { width: 15px; height: 15px; fill: var(--secondary); stroke: var(--secondary); flex: none; }
  .watch-symbol { font-weight: 700; font-size: 14px; }
  .watch-name { font-size: 11px; color: var(--text-dim); }
  .watch-item-mid { flex: none; display: flex; justify-content: center; }
  .watch-item-right { display: flex; flex-direction: column; align-items: flex-end; text-align: left; flex: none; gap: 1px; }
  .watch-price { font-size: 13.5px; font-weight: 600; }
  .watch-toman { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
  .watch-chevron { flex: none; width: 16px; height: 16px; color: var(--text-dim); transition: transform 0.2s ease; margin-right: 2px; }
  html.lang-en .watch-chevron { margin-right: 0; margin-left: 2px; }
  .watch-chevron svg { width: 100%; height: 100%; }
  .watch-chevron.open { transform: rotate(180deg); }
  .up-text { color: var(--green); }
  .down-text { color: var(--red); }
  .neutral-text { color: var(--text-dim); }

  .watch-detail { max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.25s ease; padding: 0 14px; border-top: 0 solid var(--line); }
  .watch-detail.open { max-height: 220px; padding: 4px 14px 14px; border-top: 1px solid var(--line); }
  .watch-detail-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 12.5px; color: var(--text-dim); }
  .watch-detail-row b { color: var(--text); font-weight: 600; }

  /* ردیف اکشن (ویرایش/حذف) زیر هر آیتم دارایی در تب Portfolio — برخلاف watch-detail، همیشه نمایان است
     (بدون انیمیشن باز/بسته شدن)، چون در Portfolio نیازی به جزئیات تاشونده نیست. */
  .portfolio-asset-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 0 14px 12px; font-size: 12px; }
  .portfolio-asset-actions .edit { color: var(--secondary); cursor: pointer; }
  .portfolio-asset-actions .remove { color: var(--red); cursor: pointer; }
  /* بدون قیمت لحظه‌ای برای symbol (priceAvailable=false در Portfolio، یا lastPrices[symbol] نامشخص در
     Watchlist): به‌جای صفر گمراه‌کننده، برچسب "نامشخص/Unavailable" با رنگ کم‌رنگ. این کلاس بین
     Portfolio و Watchlist (Task 17F) reuse می‌شود — یک الگوی واحد برای «قیمت در دسترس نیست». */
  .portfolio-price-na { color: var(--text-dim); font-size: 12.5px; font-weight: 600; }
  /* پیام خطای اعتبارسنجی فرم Add/Edit — قبل از ارسال به سرور، یا خطای برگشتی از سرور */
  .portfolio-form-error { display: flex; align-items: flex-start; gap: 6px; background: rgba(255,138,128,0.1); border: 1px solid rgba(255,138,128,0.3); color: var(--red); font-size: 12px; line-height: 1.6; padding: 8px 10px; border-radius: 10px; margin-bottom: 10px; word-break: break-word; }
  .portfolio-form-error.hidden { display: none; }

  /* ====================== Task 17G: Alerts Sub-tabs (Price/Percent/Smart/History) ====================== */
  /* ناوبری داخلی تب Alerts — دقیقاً همون الگوی .mini-tabs/.mini-tab-btn موجود (Pulse/Plan currency)
     که چون scoped-به-id هست، بدون تداخل با اون‌ها دوباره استفاده می‌شه؛ کامپوننت جدیدی اضافه نشده. */
  #alertSubTabs.mini-tabs { margin-bottom: 14px; }
  #alertSubTabs .mini-tab-btn { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 4px; }
  #alertSubTabs .mini-tab-btn .icon { width: 14px; height: 14px; flex: none; }
  #alertSubTabs .mini-tab-btn span[data-i18n] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .alert-subpanel { display: none; }
  .alert-subpanel.active { display: block; animation: fadeIn 0.18s ease; }
  .alert-subpanel-desc { font-size: 12px; color: var(--text-dim); margin: -4px 0 12px; line-height: 1.7; }

  /* --- ردیف مشترک هشدار (Price/Percent) — هم‌خانواده با smart-alert-item، با status badge واضح --- */
  .alert-row-status { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; flex: none; }
  .alert-row-status.on { color: var(--green); background: rgba(79,214,148,0.12); }
  .alert-row-status.off { color: var(--text-dim); background: var(--surface-2); }
  .alert-item .alert-row-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
  .alert-item .alert-row-left > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .alert-item .actions .toggle { color: var(--text-dim); font-size: 12px; cursor: pointer; }

  /* smart-alert-actions از قبل توضیح/۳ اکشن رو عمودی می‌چیند (کامنت بالای تعریف اصلی‌اش)؛ اینجا
     فقط بج status رو با همون ظاهر alert-row-status هماهنگ می‌کنیم. */
  .smart-alert-status.alert-row-status { display: inline-flex; margin-top: 4px; }

  /* --- History: compact rows، جدیدترین مورد برجسته‌تر --- */
  .alert-history-item { padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; font-size: 12.5px; }
  .alert-history-item:first-child { border-color: var(--primary); background: linear-gradient(150deg, var(--primary-soft) 0%, var(--surface) 75%); }
  .alert-history-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
  .alert-history-coin { font-weight: 700; font-size: 13px; }
  .alert-history-time { font-size: 10.5px; color: var(--text-dim); flex: none; white-space: nowrap; }
  .alert-history-detail { color: var(--text-dim); line-height: 1.6; word-break: break-word; }

  @media (max-width: 360px) {
    #alertSubTabs .mini-tab-btn { font-size: 10.5px; padding: 9px 2px; }
    #alertSubTabs .mini-tab-btn .icon { width: 12px; height: 12px; }
    /* سه اکشن (toggle/edit/remove) روی Price/Percent Alert با لیبل فارسی کامل (مثلاً «غیرفعال‌سازی»)
       ممکنه توی عرض باریک جا نشه؛ به‌جای overflow افقی، ردیف اکشن‌ها به خط بعد می‌ره. */
    .alert-item { flex-wrap: wrap; }
    .alert-item .actions { flex: 1 1 100%; justify-content: flex-end; gap: 10px; }
  }
  @media (max-width: 320px) {
    #alertSubTabs .mini-tab-btn span[data-i18n] { max-width: 44px; }
  }

  .form-row { display: flex; gap: 8px; margin-bottom: 10px; }
  select, input { font-family: inherit; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 11px; font-size: 14px; width: 100%; }

  .locked-overlay { text-align: center; padding: 20px 10px; }
  .locked-overlay .lock-icon { font-size: 26px; margin-bottom: 8px; }

  /* ====================== هیرو صفحه خانه (بازطراحی) ====================== */
  .hero-card { position: relative; border-radius: 22px; padding: 20px 18px; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(150deg, var(--primary-soft) 0%, var(--surface) 65%); }
  .hero-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(123,125,255,0.28), transparent 55%); pointer-events: none; }
  .hero-card.tier-pro { background: linear-gradient(150deg, rgba(195,200,218,0.20) 0%, var(--surface) 65%); }
  .hero-card.tier-pro::before { background: radial-gradient(circle at 100% 0%, rgba(195,200,218,0.30), transparent 55%); }
  .hero-card.tier-pro_plus { background: linear-gradient(150deg, rgba(232,200,116,0.22) 0%, var(--surface) 65%); }
  .hero-card.tier-pro_plus::before { background: radial-gradient(circle at 100% 0%, rgba(232,200,116,0.32), transparent 55%); }

  .hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
  .hero-plan-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,0.06); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; }
  .hero-greeting { position: relative; font-size: 15.5px; font-weight: 700; margin: 0 0 3px; }
  .hero-sub { position: relative; font-size: 12px; color: var(--text-dim); margin: 0; }
  .hero-expiry { position: relative; font-size: 11.5px; color: var(--text-dim); text-align: left; }
  html.lang-en .hero-expiry { text-align: right; }

  /* Task 15C: نشان وضعیت اشتراک (active/expired/free) — فقط بر اساس داده‌ی واقعی expiresAt/plan از API */
  .sub-status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-top: 4px; }
  .sub-status-badge.is-active { color: var(--green); background: rgba(79, 214, 148, 0.14); }
  .sub-status-badge.is-expired { color: var(--red); background: rgba(255, 138, 128, 0.14); }
  .sub-status-badge.is-free { color: var(--text-dim); background: rgba(255,255,255,0.06); }
  .sub-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

  .hero-stats { position: relative; display: flex; gap: 10px; margin: 16px 0 14px; }
  .hero-stat { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; }
  .hero-stat-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
  .hero-stat-label { font-size: 11px; color: var(--text-dim); }
  .hero-stat-val { font-size: 12.5px; font-weight: 700; }
  .progress-track { height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
  .progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 0.3s ease; }
  .hero-stat.full .progress-fill { background: linear-gradient(90deg, var(--red), #ffb199); }
  .hero-stat.infinite .progress-track { background: linear-gradient(90deg, var(--primary), var(--secondary)); opacity: 0.35; }

  .hero-cta { position: relative; }

  /* ====================== مینی‌هیرو (نوار معرفی بالای تب‌های قیمت‌ها/دیده‌بان/هشدارها) ======================
     همون زبان بصری hero-card صفحه اصلی (گرادینت + بوردر گرد)، فقط سبک‌تر، تا سه‌تا تب وسط هم همون حس صفحه اصلی/پلن‌ها رو بدن */
  .mini-hero { position: relative; display: flex; align-items: center; gap: 12px; border-radius: 18px; padding: 14px 16px; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(150deg, var(--primary-soft) 0%, var(--surface) 65%); }
  .mini-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(123,125,255,0.24), transparent 55%); pointer-events: none; }
  .mini-hero-icon { position: relative; width: 38px; height: 38px; min-width: 38px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
  .mini-hero-icon .icon { width: 19px; height: 19px; color: var(--secondary); }
  .mini-hero-text { position: relative; min-width: 0; }
  .mini-hero-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 2px; }
  .mini-hero-sub { font-size: 11.5px; color: var(--text-dim); margin: 0; line-height: 1.5; }

  /* --- Task 17B: Profile tab shell --- */
  .profile-header { position: relative; display: flex; align-items: center; gap: 12px; border-radius: 18px; padding: 16px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(150deg, var(--primary-soft) 0%, var(--surface) 65%); }
  .profile-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(123,125,255,0.24), transparent 55%); pointer-events: none; }
  .profile-avatar { position: relative; width: 46px; height: 46px; min-width: 46px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: var(--secondary); overflow: hidden; }
  .profile-avatar .icon { width: 22px; height: 22px; color: var(--secondary); }
  .profile-header-text { position: relative; min-width: 0; flex: 1; }
  .profile-name { font-size: 15.5px; font-weight: 800; color: var(--text); margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-handle { font-size: 11.5px; color: var(--text-dim); margin: 0; direction: ltr; unicode-bidi: plaintext; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.lang-en .profile-handle { text-align: left; }
  .profile-plan-chip { position: relative; flex: none; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  body.is-vip .profile-plan-chip { color: var(--gold); border-color: rgba(232,200,116,0.4); background: rgba(232,200,116,0.1); }

  .profile-list { margin-bottom: 4px; }
  .profile-row { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; cursor: pointer; transition: background 0.15s ease; }
  .profile-row:active { background: var(--surface-2); }
  .profile-row-icon { width: 30px; height: 30px; min-width: 30px; border-radius: 9px; background: var(--primary-soft); color: var(--secondary); display: flex; align-items: center; justify-content: center; }
  .profile-row-icon .icon { width: 16px; height: 16px; }
  .profile-row-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); min-width: 0; }
  .profile-row-value { font-size: 12px; color: var(--text-dim); flex: none; }

  /* ====================== کارت‌های پلن (بازطراحی) ====================== */
  .plans-note { font-size: 11.5px; color: var(--text-dim); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; line-height: 1.7; }

  .welcome-card { border-radius: 20px; border: 1px solid var(--line); padding: 18px; margin-bottom: 16px; background: linear-gradient(150deg, var(--primary-soft) 0%, var(--surface) 65%); position: relative; overflow: hidden; }
  .welcome-greeting { font-size: 16.5px; font-weight: 800; margin: 0 0 3px; }
  .welcome-name { display: inline; font-size: inherit; font-weight: inherit; max-width: none; overflow: visible; text-overflow: unset; gap: 0; }
  .welcome-sub { font-size: 12px; color: var(--text-dim); margin: 0; }
  .welcome-sentiment { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); }
  .welcome-sentiment.positive { color: var(--green); border-color: rgba(60,199,140,0.35); background: rgba(60,199,140,0.1); }
  .welcome-sentiment.negative { color: var(--red); border-color: rgba(255,138,128,0.35); background: rgba(255,138,128,0.1); }
  .welcome-tickers { display: flex; gap: 8px; margin-top: 14px; }
  .welcome-ticker { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .welcome-ticker .wt-symbol { font-size: 10.5px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
  .welcome-ticker .wt-price { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .welcome-ticker .wt-change { font-size: 11.5px; font-weight: 700; }
  .wt-spark { margin-top: 4px; height: 22px; opacity: 0.85; }
  .wt-spark svg path { stroke-width: 1; }
  .wt-spark svg { width: 100%; height: 100%; display: block; }

  /* ====== Market Summary — کارت‌های ساختاریافته (Task 14C) ======
     داده‌ها عیناً از sections برگشتی /api/market-summary میان (overall/gainer/loser/watchlist/coin)؛
     اینجا فقط چیدمان و typography است، هیچ محاسبه‌ی جدیدی روی داده انجام نمی‌شه. */
  .ms-wrap { display: flex; flex-direction: column; gap: 10px; }

  /* نوار sentiment کلی — بالای همه، به‌عنوان مهم‌ترین خط خلاصه */
  .ms-sentiment { display: flex; align-items: center; gap: 10px; border-radius: 16px; padding: 14px 16px; border: 1px solid var(--line); background: var(--surface); }
  .ms-sentiment-icon { font-size: 20px; flex: none; line-height: 1; }
  .ms-sentiment-body { min-width: 0; flex: 1 1 auto; }
  .ms-sentiment-title { font-size: 13.5px; font-weight: 700; margin: 0 0 2px; }
  .ms-sentiment-sub { font-size: 11.5px; color: var(--text-dim); margin: 0; }
  .ms-sentiment.positive { border-color: rgba(79,214,148,0.35); background: linear-gradient(150deg, rgba(79,214,148,0.12) 0%, var(--surface) 70%); }
  .ms-sentiment.positive .ms-sentiment-title { color: var(--green); }
  .ms-sentiment.negative { border-color: rgba(255,138,128,0.35); background: linear-gradient(150deg, rgba(255,138,128,0.12) 0%, var(--surface) 70%); }
  .ms-sentiment.negative .ms-sentiment-title { color: var(--red); }
  .ms-sentiment.mixed { border-color: var(--line); }

  /* گرید Top Gainer / Top Loser — کنار هم روی موبایل هم جا می‌شه چون هرکدوم min-width:0 داره */
  .ms-movers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ms-mover-card { border-radius: 14px; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
  .ms-mover-label { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px; }
  .ms-mover-symbol { font-size: 14px; font-weight: 800; margin-bottom: 1px; }
  .ms-mover-change { font-size: 12.5px; font-weight: 700; }
  .ms-mover-price { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
  .ms-mover-card.gainer .ms-mover-change { color: var(--green); }
  .ms-mover-card.loser .ms-mover-change { color: var(--red); }

  /* عملکرد واچ‌لیست + روند حجم معاملات (هر دو از یه ساختار ردیفی مشترک استفاده می‌کنن) */
  .ms-watchlist { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); }
  .ms-watchlist-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .ms-watchlist-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
  .ms-watchlist-sub { font-size: 11px; color: var(--text-dim); }
  .ms-watchlist-avg { font-size: 14px; font-weight: 800; flex: none; }
  .ms-volume { border-style: dashed; }

  @media (max-width: 340px) {
    .ms-movers-grid { grid-template-columns: 1fr; }
    .ms-watchlist { flex-direction: column; align-items: flex-start; gap: 4px; }
    .ms-watchlist-avg { align-self: flex-end; }
    html.lang-en .ms-watchlist-avg { align-self: flex-start; }
  }

  .plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-bottom: 14px; position: relative; overflow: hidden; border-top: 3px solid var(--line); }
  .plan-card.tier-free { border-top-color: var(--text-dim); }
  .plan-card.tier-pro { border-top-color: var(--silverc); }
  .plan-card.tier-pro_plus { border-top-color: var(--gold); }

  .plain-status { padding: 2px 4px 18px; }
  .plain-status p { margin: 0 0 6px; font-size: 14px; color: var(--text-dim); }
  .plain-status p b { color: var(--text); font-weight: 700; }

  /* هایلایت «پیشنهاد ویژه» با رنگ خود پلن پرو هماهنگ شده، نه بنفش عمومی، تا با tier-pro تداخل/تضاد نداشته باشه */
  /* بج به‌صورت یه نوار کامل بالای کارت طراحی شده (نه یه برچسب شناور روی گوشه)، که به هر حالت رپ‌شدن عنوان/قیمت هیچ‌وقت روش نیوفته */
  .plan-card.highlight { border: 1.5px solid var(--silverc); border-top: none; background: linear-gradient(160deg, rgba(195,200,218,0.16), var(--surface) 60%); animation: glowPulse 2.6s ease-in-out infinite; padding-top: 0; }
  @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(195, 200, 218, 0.22); } 50% { box-shadow: 0 0 18px 2px rgba(195, 200, 218, 0.26); } }
  .plan-badge { position: relative; display: block; top: 0; right: 0; left: 0; margin: 0 -18px 14px; background: linear-gradient(90deg, var(--silverc), #eef0f6); color: #23242c; font-size: 11px; font-weight: 700; padding: 6px 18px; text-align: center; white-space: nowrap; z-index: 2; overflow: hidden; text-overflow: ellipsis; }
  .plan-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
  .plan-card-title { font-size: 16px; font-weight: 800; min-width: 0; word-break: break-word; display: flex; align-items: center; gap: 6px; }
  .plan-card-price-wrap { text-align: left; }
  html.lang-en .plan-card-price-wrap { text-align: right; }
  .plan-card-price { font-size: 20px; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
  .plan-card-price svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
  .plan-card-price .unit { font-size: 11px; color: var(--text-dim); font-weight: 500; }
  .plan-card-period { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
  .plan-card-toman { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
  .plan-card-stars { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gold); background: rgba(232,200,116,0.12); border: 1px solid rgba(232,200,116,0.3); padding: 3px 9px; border-radius: 999px; margin-top: 6px; }
  .plan-card-stars svg { width: 11px; height: 11px; }
  .plan-feature-list { list-style: none; padding: 0; margin: 0 0 14px; }
  .plan-feature-list li { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-dim); }
  .plan-feature-list li:last-child { border-bottom: none; }
  .plan-feature-list b { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
  .feat-yes { color: var(--green); }
  .feat-no { color: var(--text-dim); opacity: 0.6; }

  /* ====================== Task 17I: Plans/Subscription/Payment UI/UX Redesign ======================
     هدف: کارت‌های پلن کوتاه‌تر بشن (فقط ۳ ویژگیِ برجسته‌ی هر پلن همیشه دیده بشه)، و لیست کامل
     ویژگی‌ها (که قبلاً همیشه ۷ ردیف کامل روی صفحه بود و صفحه رو طولانی می‌کرد) به یک بخش
     تاشو/باز-شو منتقل بشه — دقیقاً با همون الگوی موجود watch-chevron/watch-detail (کامپوننت جدید
     ساخته نشده، فقط با کلاس‌های scoped جدید روی همون الگو reuse شده). */
  .plan-feature-list.compact li:nth-child(n+4) { display: none; }
  .plan-compare-toggle { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; background: none; border: none; border-top: 1px solid var(--line); color: var(--secondary); font-size: 12px; font-weight: 600; padding: 10px 0 0; margin-bottom: 10px; cursor: pointer; }
  .plan-compare-toggle .watch-chevron { width: 13px; height: 13px; margin: 0; }
  .plan-card.compare-open .plan-feature-list.compact li:nth-child(n+4) { display: flex; }

  /* --- Referral / Payment History: بخش‌های تاشو زیر Profile (Tertiary)، به‌جای دو بلوک بلندِ همیشه‌باز.
     همون الگوی .profile-row (هدر قابل‌کلیک) + .watch-detail (محتوای تاشو) که در پروژه از قبل هست. */
  .collapsible-section-header { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
  .collapsible-section-header .csh-icon { width: 30px; height: 30px; min-width: 30px; border-radius: 9px; background: var(--primary-soft); color: var(--secondary); display: flex; align-items: center; justify-content: center; }
  .collapsible-section-header .csh-icon .icon { width: 16px; height: 16px; }
  .collapsible-section-header .csh-title { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); min-width: 0; }
  .collapsible-section-header .csh-hint { font-size: 11.5px; color: var(--text-dim); flex: none; }
  .collapsible-section-header.open { border-radius: 14px 14px 0 0; border-bottom-color: transparent; }
  .collapsible-section-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.25s ease; padding: 0 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; background: var(--surface); margin-bottom: 8px; }
  .collapsible-section-body.open { max-height: 600px; padding: 4px 14px 14px; }

  /* --- Current plan hero: CTA اصلی واحد (بدون چند دکمه هم‌وزن)، Stars/USDT به‌صورت انتخاب واضح در بخش پلن‌ها --- */
  .plan-currency-hint { font-size: 10.5px; color: var(--text-dim); text-align: center; margin: -6px 0 12px; }

  @media (max-width: 360px) {
    .collapsible-section-header .csh-hint { display: none; }
  }

  .quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
  .quick-btn { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 4px; text-align: center; font-size: 11px; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .quick-btn .icon { width: 18px; height: 18px; }
  .quick-btn .icon-wrap { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--secondary); }
  .quick-btn:nth-child(2) .icon-wrap { background: rgba(76,215,246,0.14); color: var(--tertiary); }
  .quick-btn:nth-child(3) .icon-wrap { background: rgba(232,200,116,0.14); color: var(--gold); }
  .quick-btn:nth-child(4) .icon-wrap { background: rgba(255,138,128,0.14); color: var(--red); }
  .quick-btn span[data-i18n] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stat-row { display: flex; gap: 8px; margin-bottom: 14px; }
  .stat-box { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; text-align: center; }
  .stat-box .num { font-size: 18px; font-weight: 800; color: var(--secondary); }
  .stat-box .label { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

  .pulse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pulse-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align: center; }
  .pulse-label { font-size: 9.5px; color: var(--text-dim); margin-bottom: 6px; line-height: 1.3; }
  .pulse-coin { font-size: 13px; font-weight: 800; }
  .pulse-value { font-size: 11px; margin-top: 4px; }

  .mini-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
  .mini-tab-btn { flex: 1; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); font-size: 11.5px; font-weight: 600; padding: 9px 4px; border-radius: 10px; font-family: inherit; }
  .mini-tab-btn.active { background: var(--primary-soft); color: var(--secondary); border-color: var(--primary); }

  /* Task 17D — Markets: نوار Search/Sort. سرچ عرض باقی‌مانده رو می‌گیره، Sort و دکمه‌ی جهت compact می‌مونن */
  .markets-toolbar { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
  .markets-search-input { flex: 1; min-width: 0; width: auto; }
  .markets-sort-select { flex: none; width: auto; min-width: 96px; max-width: 132px; padding: 11px 8px; }
  .markets-sort-dir-btn { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 15px; line-height: 1; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; }
  .markets-sort-dir-btn:disabled { opacity: 0.4; }
  @media (max-width: 360px) {
    .markets-sort-select { min-width: 84px; max-width: 108px; font-size: 12.5px; }
    .markets-sort-dir-btn { width: 36px; height: 36px; font-size: 13px; }
  }
  @media (max-width: 320px) {
    .markets-toolbar { gap: 6px; }
    .markets-sort-select { min-width: 72px; max-width: 92px; padding: 11px 4px; font-size: 11.5px; }
  }

  .bottom-nav { position: fixed; bottom: 12px; left: 12px; right: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; display: flex; justify-content: space-around; padding: 8px 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 20; }
  .nav-btn { background: none; border: none; width: auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text-dim); font-size: 10px; padding: 6px 4px; border-radius: 12px; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; }
  .nav-btn span[data-i18n] { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-btn .icon { width: 18px; height: 18px; }
  .nav-btn.active { color: var(--secondary); background: var(--primary-soft); }
  body.is-vip .nav-btn.active { color: var(--gold); }
  .nav-btn:focus-visible, .profile-row:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

  .icon svg { width: 100%; height: 100%; display: block; }
  .icon svg path, .icon svg circle, .icon svg rect, .icon svg polyline { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

  @media (max-width: 380px) {
    /* با اضافه‌شدن تب Portfolio، نوار پایین حالا ۶ دکمه داره؛ توی صفحه‌های خیلی باریک (مثل iPhone SE،
       عرض ۳۲۰px) فونت رو کمی کوچیک‌تر و padding رو جمع‌تر می‌کنیم تا لیبل‌ها جا بشن و رپ نشن */
    .nav-btn { font-size: 9px; padding: 6px 2px; gap: 2px; }
    .nav-btn .icon { width: 16px; height: 16px; }
    .nav-btn span[data-i18n] { max-width: 44px; }
  }
  @media (max-width: 360px) {
    .coin-mid, .watch-item-mid { display: none; }
    .coin-price, .watch-price { font-size: 13.5px; }
    .plan-card-header { flex-direction: column; align-items: flex-start; }
    .plan-card-price-wrap { align-self: flex-end; text-align: left; }
    html.lang-en .plan-card-price-wrap { align-self: flex-start; text-align: right; }
    .hero-stats { flex-direction: column; }
  }
  @media (max-width: 340px) {
    .coin-name, .watch-name { display: none; }
  }
  @media (max-width: 320px) {
    /* عرض ۳۲۰px: فرم Add/Edit پورتفولیو (select + input کنار هم) و کارت خلاصه رو جمع‌تر می‌کنیم
       تا هیچ overflow افقی پیش نیاد */
    #tab-portfolio .form-row { flex-direction: column; }
    #tab-portfolio .welcome-greeting { font-size: 15px; }
    #tab-portfolio select, #tab-portfolio input { min-width: 0; }
    /* Task 17B: هدر پروفایل هم توی ۳۲۰px، چیپ پلن رو کمی جمع‌تر می‌کنیم تا کنار اسم/آواتار جا بشه */
    .profile-plan-chip { max-width: 76px; font-size: 10px; padding: 4px 7px; }
    .profile-name { font-size: 14px; }
  }
  .skeleton-row { height: 58px; border-radius: 14px; margin-bottom: 8px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%); background-size: 400% 100%; animation: skeletonShine 1.4s ease infinite; }
  @keyframes skeletonShine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

  #langSwitchOverlay { position: fixed; inset: 0; background: var(--bg); z-index: 200; display: none; padding: 16px; box-sizing: border-box; }
  #langSwitchOverlay.show { display: block; }
  #langSwitchOverlay .skeleton-row.wide { height: 70px; }
  #langSwitchOverlay .skeleton-row.short { width: 40%; height: 16px; }

  #coachOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 100; display: none; }
  #coachOverlay.show { display: block; }
  .coach-spot {
    position: absolute;
    border-radius: 16px;
    box-shadow: 0 0 0 4000px rgba(0,0,0,0.72);
    border: 2px solid var(--primary);
    transition: all 0.25s ease;
    pointer-events: none;
  }
  .coach-spot.hidden { opacity: 0; box-shadow: none; }
  .coach-box {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 96px;
    max-width: 420px;
    margin: 0 auto;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    animation: slideUp 0.2s ease;
  }
  .coach-box h4 { margin: 0 0 6px; font-size: 14.5px; }
  .coach-box p { margin: 0 0 14px; font-size: 12.5px; color: var(--text-dim); line-height: 1.75; }
  .coach-box .coach-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .coach-box .coach-skip { background: none; border: none; color: var(--text-dim); font-size: 12.5px; width: auto; padding: 6px 4px; font-weight: 500; }
  .coach-box .coach-next { width: auto; padding: 9px 18px; font-size: 12.5px; }
  .coach-box .coach-step { font-size: 11px; color: var(--text-dim); }
  .coach-dots { display: flex; gap: 4px; margin: 8px 0 0; }
  .coach-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
  .coach-dot.active { background: var(--primary); width: 14px; border-radius: 3px; }

  #helpSheet { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; display: none; align-items: flex-end; }
  #helpSheet.show { display: flex; }
  .help-sheet-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 20px 18px 26px; width: 100%; animation: slideUp 0.2s ease; }
  @keyframes slideUp { from { transform: translateY(16px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
  .help-sheet-box h4 { margin: 0 0 8px; font-size: 15px; }
  .help-sheet-box p { margin: 0 0 14px; font-size: 13px; color: var(--text-dim); line-height: 1.8; }

  /* پاپ‌آپ خطای اتصال — وقتی نت/پروکسی قطع می‌شه و درخواست اولیه لود اپ شکست می‌خوره */
  #connErrorOverlay { position: fixed; inset: 0; background: rgba(10,10,16,0.86); z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(2px); }
  #connErrorOverlay.show { display: flex; }
  .conn-error-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 26px 22px; width: 100%; max-width: 340px; text-align: center; animation: slideUp 0.2s ease; }
  .conn-error-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,138,128,0.14); color: var(--red); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
  .conn-error-icon svg { width: 26px; height: 26px; }
  .conn-error-box h4 { margin: 0 0 8px; font-size: 15.5px; }
  .conn-error-box p { margin: 0 0 18px; font-size: 13px; color: var(--text-dim); line-height: 1.8; }
  .conn-error-box .btn-primary { width: 100%; }

  /* پاپ‌آپ رسیدن به سقف پلن (واچ‌لیست/هشدار/هشدار درصدی/هشدار هوشمند) — جایگزین tg.showAlert()
     که فقط یک دکمه OK نیتیو تلگرام داشت و راهی برای رفتن مستقیم به ارتقای پلن نمی‌داد. */
  #planLimitOverlay { position: fixed; inset: 0; background: rgba(10,10,16,0.86); z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(2px); }
  #planLimitOverlay.show { display: flex; }
  .plan-limit-icon { background: rgba(245,197,66,0.14); color: var(--gold); }
  .plan-limit-actions { display: flex; gap: 8px; }
  .plan-limit-actions .btn-outline, .plan-limit-actions .btn-primary { flex: 1; width: auto; }

  /* ====================== Task 17E: Coin Detail Sheet (UX/UI polish of Task 13B) ====================== */
  .coin-row { cursor: pointer; }

  #coinDetailSheet { position: fixed; inset: 0; background: rgba(8,8,14,0.66); backdrop-filter: blur(2px); z-index: 110; display: none; align-items: flex-end; }
  #coinDetailSheet.show { display: flex; }
  .coin-detail-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 22px 22px 0 0; width: 100%; max-width: 480px; margin: 0 auto; max-height: 88vh; display: flex; flex-direction: column; animation: slideUp 0.22s ease; box-shadow: 0 -12px 32px rgba(0,0,0,0.35); }

  /* Task 19A: شیت پرداخت تتر داخل مینی‌اپ */
  #usdtPaySheet { position: fixed; inset: 0; background: rgba(8,8,14,0.66); backdrop-filter: blur(2px); z-index: 120; display: none; align-items: flex-end; }
  #usdtPaySheet.show { display: flex; }
  .usdt-pay-body { padding: 4px 18px 22px; }
  .usdt-pay-note { font-size: 13px; color: var(--text-dim); line-height: 1.8; margin: 0 0 16px; }
  .usdt-pay-row { margin-bottom: 14px; }
  .usdt-pay-label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
  .usdt-pay-copy-line { display: flex; align-items: center; gap: 8px; background: var(--surface-3, rgba(255,255,255,0.04)); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
  .usdt-pay-copy-line b { flex: 1; min-width: 0; font-size: 14px; word-break: break-all; }
  .usdt-pay-amount-line { border-color: rgba(245,197,66,0.35); }
  .usdt-pay-amount-line b { font-size: 16px; font-weight: 700; color: var(--gold); }
  .usdt-pay-wallet { font-size: 12px !important; }
  .usdt-pay-warning { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 8px 10px; background: rgba(245,197,66,0.12); border: 1px solid rgba(245,197,66,0.3); border-radius: 10px; font-size: 11.5px; line-height: 1.6; color: var(--gold); }
  .usdt-pay-warning-icon { flex: none; }
  /* باگ: قانون سراسری «button { width: 100%; }» باعث می‌شد این دکمه هم عرض ۱۰۰٪ بخواد؛ چون
     flex-shrink: 0 داشت ولی width auto نداشت، کل عرض ردیف رو می‌گرفت و متن آدرس/مبلغ کنارش
     (که flex:1 بود) به عرض تقریباً صفر فشرده می‌شد و با word-break: break-all حرف‌به‌حرف
     زیر هم می‌افتاد (دقیقاً چیزی که تو اسکرین‌شات دیده می‌شد). width: auto این رو برمی‌گردونه
     به عرض طبیعیِ متن دکمه، مثل بقیه‌ی دکمه‌های داخل ردیف‌های flex توی این پروژه. */
  .usdt-pay-copy-btn { flex-shrink: 0; width: auto; background: linear-gradient(90deg, var(--primary), #5457e0); color: #fff; border: none; border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
  .usdt-pay-countdown { text-align: center; font-size: 13px; color: var(--text-dim); margin-top: 4px; }

  /* توست کوچیک هم‌سبک با بقیه‌ی پاپ‌آپ‌های خودِ اپ (surface/line/radius یکسان) — جایگزین
     tg.showAlert() که یه دیالوگ نیتیو تلگرامه و از ظاهر تیره/گرد اپ خودمون کاملاً بیرونه. */
  .app-toast { position: fixed; left: 50%; bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)); transform: translate(-50%, 10px); background: var(--surface-2); border: 1px solid var(--line); color: var(--text); padding: 11px 18px; border-radius: 14px; font-size: 13px; font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 300; max-width: 86vw; text-align: center; }
  .app-toast.show { opacity: 1; transform: translate(-50%, 0); }
  .cd-sheet-handle { flex: none; display: flex; justify-content: center; padding: 8px 0 2px; }
  .cd-sheet-handle span { width: 36px; height: 4px; border-radius: 999px; background: var(--line); }
  .cd-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 14px; border-bottom: 1px solid var(--line); flex: none; gap: 10px; }
  .cd-sheet-header h4 { margin: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cd-close-btn { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; background: var(--surface-3); border: none; color: var(--text-dim); font-size: 15px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
  .cd-close-btn:active { background: var(--line); color: var(--text); }
  .coin-detail-body { padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* --- Price block: the single most important visual element in the sheet --- */
  .cd-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
  .cd-icon { margin-top: 2px; }
  .cd-head-left { min-width: 0; }
  .cd-symbol { font-weight: 800; font-size: 17px; line-height: 1.25; }
  .cd-rank-badge { font-size: 11px; font-weight: 600; color: var(--text-dim); background: var(--surface-2); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }
  .cd-name { font-size: 12px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cd-price-wrap { text-align: left; flex: none; }
  html.lang-en .cd-price-wrap { text-align: right; }
  .cd-price { font-size: 24px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
  .cd-price .unit { font-size: 11px; color: var(--text-dim); font-weight: 500; }
  .cd-price-na { font-size: 13px; color: var(--text-dim); }

  .cd-changes-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
  .cd-changes-row .coin-change { font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
  .cd-changes-row .coin-change.up { color: var(--green); background: rgba(79,214,148,0.12); }
  .cd-changes-row .coin-change.down { color: var(--red); background: rgba(255,138,128,0.12); }
  .cd-changes-row .coin-change:not(.up):not(.down) { color: var(--text-dim); background: var(--surface); }

  /* --- Chart: visually separated from the price block by its own card --- */
  .cd-chart-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 10px 8px; margin-bottom: 14px; }
  .cd-chart-title { font-size: 11px; color: var(--text-dim); margin: 0 4px 8px; font-weight: 600; }
  .cd-chart-svg { width: 100%; height: 92px; max-height: 25vh; display: block; }
  .cd-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .cd-chart-svg.up .cd-chart-line { stroke: var(--green); }
  .cd-chart-svg.down .cd-chart-line { stroke: var(--red); }
  .cd-chart-area { stroke: none; opacity: 0.14; }
  .cd-chart-svg.up .cd-chart-area { fill: var(--green); }
  .cd-chart-svg.down .cd-chart-area { fill: var(--red); }
  .cd-chart-empty { text-align: center; padding: 22px 0; margin: 0; }

  /* --- Stats: compact, deliberately less prominent than price --- */
  .cd-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .cd-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; min-width: 0; }
  .cd-stat-label { display: block; font-size: 10.5px; color: var(--text-dim); margin-bottom: 3px; font-weight: 500; }
  .cd-stat-val { font-size: 13px; font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .cd-source-note { font-size: 11px; color: var(--text-dim); margin-bottom: 14px; }
  .cd-no-data { padding: 16px 0; }

  /* --- Actions: Watchlist primary / Alert secondary, clearly separated from the info above --- */
  .cd-actions { margin-top: 4px; }
  .cd-error-state .btn-small { width: auto; padding: 9px 18px; }

  @media (max-width: 360px) {
    .cd-price { font-size: 21px; }
    .cd-symbol { font-size: 16px; }
    .cd-stats-grid { gap: 6px; }
    .cd-stat { padding: 8px 9px; }
  }
  @media (max-width: 320px) {
    .coin-detail-body { padding: 12px; }
    .cd-price { font-size: 19px; }
    .cd-chart-svg { height: 80px; }
    .cd-changes-row .coin-change { font-size: 11.5px; padding: 4px 8px; }
  }