/* ===================================================================
   ارزکس Mini App — نسخه‌ی ساده و مطمئن

   اصول این بازنویسی (بعد از باگ‌های نسخه‌ی قبل):
   1. رنگ‌ها کاملاً مستقل از رنگ‌های واقعی تم تلگرامن - قبلاً var(--tg-theme-bg-color, ...)
      باعث می‌شد با تم روشن تلگرام، کل صفحه سفید/بی‌طراحی بشه. اینجا دو پالت خودمون
      (تیره + روشن) از قبل طراحی شده، و فقط بر اساس اینکه تلگرام «روشنه یا تیره»
      (tg.colorScheme، نه رنگ‌های دقیقش) بین این دو پالت خودمون سوییچ می‌کنیم.
   2. هیچ کجای این فایل به ارتفاع صفحه (100dvh/100vh) یا فلکس‌باکس تمام‌صفحه
      وابسته نیست - چون خیلی از WebViewهای اندروید dvh رو درست پشتیبانی
      نمی‌کنن و باعث می‌شد منوی پایین از صفحه خارج بشه. اینجا صفحه مثل یک
      صفحه‌ی وب عادی اسکرول می‌شه؛ فقط هدر و تب‌ها با position:sticky بالا می‌مونن.
   3. بدون انیمیشن‌های سنگین (بدون ticker متحرک بی‌نهایت، بدون چرخش سه‌بعدی
      قیمت، بدون ژست سوایپ) - فقط چیزهایی که واقعاً به سرعت/سادگی کمک می‌کنن.
   =================================================================== */

:root,
:root[data-theme="dark"] {
  --bg: #0D0F13;
  --panel: #14171D;
  --line: rgba(255, 255, 255, 0.08);
  --text: #F1EEE7;
  --hint: #8B887F;
  --brass: #CDA43B;
  --brass-soft: rgba(205, 164, 59, 0.15);
  --rise: #4FAE7A;
  --rise-soft: rgba(79, 174, 122, 0.15);
  --fall: #D6604A;
  --fall-soft: rgba(214, 96, 74, 0.15);
}

:root[data-theme="light"] {
  --bg: #F7F5F1;
  --panel: #FFFFFF;
  --line: rgba(20, 18, 12, 0.09);
  --text: #211F1A;
  --hint: #79756C;
  --brass: #A9781E;
  --brass-soft: rgba(169, 120, 30, 0.12);
  --rise: #2F8C5B;
  --rise-soft: rgba(47, 140, 91, 0.12);
  --fall: #C1462F;
  --fall-soft: rgba(193, 70, 47, 0.12);
}

/* پیش‌فرض قبل از اجرای JS (مثلاً موقع تست بیرون از تلگرام): از prefers-color-scheme مرورگر پیروی کن */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F7F5F1;
    --panel: #FFFFFF;
    --line: rgba(20, 18, 12, 0.09);
    --text: #211F1A;
    --hint: #79756C;
    --brass: #A9781E;
    --brass-soft: rgba(169, 120, 30, 0.12);
    --rise: #2F8C5B;
    --rise-soft: rgba(47, 140, 91, 0.12);
    --fall: #C1462F;
    --fall-soft: rgba(193, 70, 47, 0.12);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  transition: background-color .2s ease, color .2s ease;
}

button { font-family: inherit; }

/* ---------------- هدر و تب‌ها (هر دو sticky، نه fixed - نیازی به محاسبه‌ی ارتفاع ندارن) ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-weight: 800;
  font-size: 15px;
  color: var(--brass);
}

.updated {
  font-size: 11px;
  color: var(--hint);
  font-variant-numeric: tabular-nums;
}

.tabs {
  position: sticky;
  top: 52px;
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--hint);
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.tab.active {
  background: var(--brass-soft);
  border-color: var(--brass);
  color: var(--brass);
}

/* ---------------- لیست قیمت ---------------- */

#content { padding: 4px 12px 24px; }

.list { margin: 0; padding: 0; list-style: none; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 2px;
}
.row:not(:first-child) { border-top: 1px solid var(--line); }

.row .id { display: flex; align-items: center; gap: 10px; min-width: 0; }

.tag {
  flex-shrink: 0;
  min-width: 32px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brass);
}

.names { min-width: 0; }
.name { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code { display: block; font-size: 10.5px; color: var(--hint); direction: ltr; text-align: right; }

.figures { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.icon-btn {
  appearance: none; border: none; background: transparent;
  color: var(--line);
  padding: 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.icon-btn svg { width: 17px; height: 17px; transition: transform .15s ease, color .15s ease; }
.icon-btn.active.fav svg { color: var(--brass); fill: var(--brass-soft); }
.icon-btn.active.bell svg { color: var(--rise); fill: var(--rise-soft); }
.icon-btn:active svg { transform: scale(.85); }

.pct {
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 3px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.pct.up   { color: var(--rise); background: var(--rise-soft); }
.pct.down { color: var(--fall); background: var(--fall-soft); }

.amounts { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 76px; }

.amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14.5px;
  transition: color .4s ease;
}
.amount.flash-up   { color: var(--rise); }
.amount.flash-down { color: var(--fall); }

.usd { font-size: 10px; font-weight: 500; color: var(--hint); direction: ltr; }

/* ---------------- Skeleton (ساده، بدون shimmer متحرک سنگین) ---------------- */

.skeleton {
  height: 44px;
  margin: 8px 2px;
  border-radius: 8px;
  background: var(--panel);
  list-style: none;
}

/* ---------------- حالت خالی و خطا ---------------- */

.empty, .error-box {
  text-align: center;
  padding: 50px 24px;
  color: var(--hint);
}
.empty p, .error-box p { color: var(--text); font-weight: 600; font-size: 13.5px; margin: 0 0 6px; }
.empty span { font-size: 12px; }

.error-box button {
  margin-top: 12px;
  border: 1px solid var(--brass);
  color: var(--brass);
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

/* ---------------- شیت هشدار قیمت ---------------- */

.sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end;
  z-index: 20;
}

.sheet {
  width: 100%;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}

.sheet-handle { width: 36px; height: 4px; background: var(--line); border-radius: 2px; margin: 4px auto 14px; }
.sheet-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.sheet-sub { font-size: 12px; color: var(--hint); margin: 0 0 14px; }

.sheet-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: center;
  margin-bottom: 14px;
}
.sheet-input:focus { outline: none; border-color: var(--brass); }

.sheet-actions { display: flex; gap: 8px; }
.sheet-btn { flex: 1; border: none; border-radius: 10px; padding: 12px; font-size: 13.5px; font-weight: 700; font-family: inherit; }
.sheet-btn.primary { background: var(--brass); color: #1a1406; }
.sheet-btn.danger { background: var(--fall-soft); color: var(--fall); }

.sheet-cancel {
  display: block; width: 100%;
  background: transparent; border: none;
  color: var(--hint); font-family: inherit; font-size: 13px;
  padding: 12px; margin-top: 2px;
}