/* ===== Tokens (balanced palette) ===== */
:root{
  --bg:#0f172a; --card:#111827; --muted:#64748b; --text:#e2e8f0; --border:#1f2937;

  /* Core accents */
  --accent:#22c55e;   /* success / positive */
  --danger:#ef4444;   /* error / stop */

  /* BUY/SELL tints (less alarming) */
  --side-buy:#06b6d4; /* cyan */
  --side-sell:#f59e0b;/* amber */

  /* Event badges (OPEN = info blue, CLOSE = neutral slate) */
  --badge-open-bg:#0b1e3a;   --badge-open-br:#1e40af; --badge-open-tx:#bfdbfe;
  --badge-close-bg:#1f2937;  --badge-close-br:#334155; --badge-close-tx:#cbd5e1;

  /* Dedicated TP/SL (stay green/red) */
  --tp-bg:#052e1a;  --tp-br:#166534;  --tp-tx:#a7f3d0;
  --sl-bg:#3f1a1a;  --sl-br:#7f1d1d;  --sl-tx:#fecaca;

  /* Active status (informational blue) */
  --status-active-bg:#e0f2fe; --status-active-br:#38bdf8; --status-active-tx:#0369a1;

  /* Rewards */
  --reward-neg:#f59e0b;

  /* Focus ring */
  --focus:#3b82f6;

  /* ===== Topbar (DARK default) ===== */
  /* شیشه‌ایِ تیره با هماهنگی پس‌زمینه */
  --topbar-glass-1: color-mix(in oklab, var(--bg) 90%, transparent);
  --topbar-glass-2: color-mix(in oklab, var(--bg) 0%,  transparent);
  --topbar-border:  color-mix(in oklab, var(--border) 70%, transparent);
  --topbar-solid:   color-mix(in oklab, var(--bg) 92%, var(--card) 8%);
  --topbar-shadow:  0 10px 24px rgba(0,0,0,.18);

  /* ===== Safe-area (iOS notch) ===== */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}
/* fallback برای iOS 11 */
@supports (padding-top: constant(safe-area-inset-top)) {
  :root{
    --safe-top:    constant(safe-area-inset-top);
    --safe-right:  constant(safe-area-inset-right);
    --safe-bottom: constant(safe-area-inset-bottom);
    --safe-left:   constant(safe-area-inset-left);
  }
}

body.light-theme{
  --bg:#f8fafc; --card:#ffffff; --muted:#64748b; --text:#0f172a; --border:#e2e8f0;

  --accent:#16a34a; --danger:#b91c1c;
  --side-buy:#0891b2;
  --side-sell:#d97706;

  /* Event badges (light) */
  --badge-open-bg:#e0f2fe;  --badge-open-br:#93c5fd; --badge-open-tx:#1e3a8a;
  --badge-close-bg:#f1f5f9; --badge-close-br:#cbd5e1; --badge-close-tx:#334155;

  /* Dedicated TP/SL (light) */
  --tp-bg:#e8f7ef;  --tp-br:#86efac;  --tp-tx:#065f46;
  --sl-bg:#fde8e8;  --sl-br:#fecaca;  --sl-tx:#7f1d1d;

  --status-active-bg:#e0f2fe; --status-active-br:#38bdf8; --status-active-tx:#0369a1;

  --reward-neg:#d97706;

  /* Focus ring tweak in light */
  --focus:#2563eb;

  /* ===== Topbar (LIGHT) ===== */
  /* شیشه‌ایِ روشنِ هماهنگ با card */
  --topbar-glass-1: color-mix(in oklab, var(--card) 86%, transparent);
  --topbar-glass-2: color-mix(in oklab, var(--card) 0%,  transparent);
  --topbar-border:  color-mix(in oklab, var(--border) 70%, transparent);
  --topbar-solid:   color-mix(in oklab, var(--card) 96%, var(--bg) 4%);
  --topbar-shadow:  0 10px 24px rgba(15,23,42,.06);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--text); margin:0; padding:0;
}
.wrap{
  width:100%; max-width:1000px;
  /* ↑ به‌روزرسانی: فاصله از ناچ */
  margin: calc(80px + var(--safe-top)) auto 24px;
  padding:0 16px;
}

/* ===== Topbar ===== */
.meta-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;

  /* ↑ به‌روزرسانی: safe-area بالا */
  padding-top: calc(10px + var(--safe-top));
  padding-bottom: 10px;

  border-bottom:1px solid var(--topbar-border);
  box-shadow: var(--topbar-shadow);
  background:
    linear-gradient(to bottom, var(--topbar-glass-1) 0%, var(--topbar-glass-2) 100%);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  backdrop-filter:saturate(120%) blur(8px);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* Fallback برای مرورگرهایی که blur ندارند: سطح نیمه‌شفاف و تمیز */
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .meta-header{
    background: var(--topbar-solid);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}
.meta-header .meta-inner{
  width:100%; max-width:1000px;
  /* ↑ به‌روزرسانی: safe-area کناری */
  padding:0 calc(16px + var(--safe-right)) 0 calc(16px + var(--safe-left));
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.meta-side{ display:flex; align-items:center; gap:8px; }

/* Sun/Moon visibility based on html class (ست‌شده در early theme) */
html.light #sun{display:inline}
html.light #moon{display:none}
html.dark  #sun{display:none}
html.dark  #moon{display:inline}

/* ===== Pills ===== */
.pill{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--border); background:transparent; color:var(--text);
  padding:6px 10px; border-radius:999px; cursor:pointer; text-decoration:none;
  height:36px; line-height:24px; font-size:13px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pill .icon{ width:16px; height:16px; display:block }
.pill .chev{ width:16px; height:16px; opacity:.7 }
.pill:hover{ background: color-mix(in oklab, var(--text) 10%, transparent); }

/* Focus ring for pill/toggle */
.pill:focus-visible, .toggle:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Outline pill */
.pill-outline{
  display:inline-flex; gap:3px; border:1px solid var(--border);
  background:transparent; color:var(--text);
  padding:6px 14px; border-radius:999px; cursor:pointer;
  font-size:13px; text-decoration:none; height:36px; line-height:15px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pill-outline:hover{ background: color-mix(in oklab, var(--text) 10%, transparent); }

/* ===== Language dropdown ===== */
.lang-wrap{ position:relative }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:220px; background:var(--card); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 12px 36px rgba(0,0,0,.22);
  padding:6px; display:none;
}
.lang-menu.open{ display:block; animation: langMenuFade .16s ease; }
.lang-item{
  width:100%; text-align:left; padding:8px 10px; background:transparent;
  border:none; color:var(--text); border-radius:8px; cursor:pointer; font:inherit;
  display:flex; align-items:center; gap:.6rem; min-height:40px;
  transition: background .15s ease, color .15s ease, outline-color .15s ease, border-color .15s ease;
}
.lang-item:hover{ background: color-mix(in oklab, var(--text) 10%, transparent); }
.lang-item.is-active{
  outline: 2px solid color-mix(in oklab, var(--focus) 40%, transparent);
  outline-offset: 0;
  border: 1px solid color-mix(in oklab, var(--focus) 60%, var(--border));
  background: color-mix(in oklab, var(--focus) 12%, var(--card));
}
.lang-item:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }

.lang-overlay{ position:fixed; inset:0; display:none; z-index:999; background:transparent; }
.lang-overlay.open{ display:block }

.flag{
  display:inline-block; flex:0 0 auto;
  width: 1.25em; height: 1.25em;
  background-size: cover; background-position: center;
  border-radius: 2px; box-shadow: 0 0 0 1px #e5e7eb;
  margin-inline-end: .5rem;
}
.flag-en { background-image: url('/assets/flags/gb.svg'); }
.flag-ru { background-image: url('/assets/flags/ru.svg'); }
.flag-zh { background-image: url('/assets/flags/cn.svg'); }
.flag-hi { background-image: url('/assets/flags/in.svg'); }
.flag-fa { background-image: url('/assets/flags/ir.svg'); }
.flag-ar { background-image: url('/assets/flags/sa.svg'); }

/* ===== Header ===== */
.header{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:18px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0; flex:1}
.logo{height:44px; display:flex; align-items:center}
.logo-img{max-height:44px; width:auto; display:none}
body.light-theme .logo-light{display:inline-block}
body.dark-theme  .logo-dark {display:inline-block}
.ttl{display:flex; flex-direction:column; min-width:0}
.ttl h1{margin:0; font-size:18px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ttl p{margin:2px 0 0; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.actions{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.toggle{
  display:inline-flex; align-items:center; gap:2px; border:1px solid var(--border);
  background:transparent; color:var(--text); padding:6px 10px; border-radius:999px; cursor:pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.toggle svg{width:16px;height:16px}
.toggle:hover{ background: color-mix(in oklab, var(--text) 10%, transparent); }

/* ===== Card/Table ===== */
.card{
  margin-top:12px; background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:18px; box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.tablewrap{overflow-x:auto}
.thead{position:sticky; top:0; z-index:1; background:var(--card); border-bottom:1px solid var(--border)}
.th,.td{
  padding:10px 12px; text-align:left; font-size:13px;
  border-bottom:1px solid var(--border); height:40px; white-space:nowrap
}
.th{font-weight:700; color:var(--muted)}
.tbody{max-height:60vh; overflow:auto; display:block}
.grid7{
  display:grid;
  grid-template-columns:120px 120px 90px 90px 120px 100px 100px 170px;
  align-items:center
}
.tr:last-child .td{border-bottom:none}
.t-right{text-align:right}

/* ===== Badges (Event) ===== */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  border-radius:999px; font-size:11px; border:1px solid;
}
.open {  background:var(--badge-open-bg);  border-color:var(--badge-open-br);  color:var(--badge-open-tx) }
.close{  background:var(--badge-close-bg); border-color:var(--badge-close-br); color:var(--badge-close-tx) }

/* ===== Direction (BUY/SELL) ===== */
.buy  { color:var(--side-buy);  font-weight:800 }
.sell { color:var(--side-sell); font-weight:800 }
.muted{color:var(--muted)}
.empty{padding:14px; text-align:center; color:var(--muted)}

/* ===== Errors / footer ===== */
.err{ margin:10px; padding:10px; border:1px solid var(--sl-br); background:var(--sl-bg); color:var(--sl-tx); border-radius:12px }
.foot{ text-align:center; color:var(--muted); font-size:12px; padding:10px 12px }

/* ===== Reward colors ===== */
.reward-pos{ color:var(--accent);     font-weight:700 }
.reward-neg{ color:var(--reward-neg); font-weight:700 }
.reward-zero{color:var(--muted)}

/* ===== Status Badges ===== */
.status{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px;
  font-size:11px; border:1px solid; font-weight:600;
}
.status-active{ background:var(--status-active-bg); border-color:var(--status-active-br); color:var(--status-active-tx) }
.status-tp{ background:var(--tp-bg); border-color:var(--tp-br); color:var(--accent) }
.status-sl{ background:var(--sl-bg); border-color:var(--sl-br); color:var(--danger) }

/* ===== Footer ===== */
.copyright{ text-align:center; color:var(--muted); font-size:12px; margin:60px 0 0 }

/* ===== Breakpoints ===== */
@media (max-width: 880px){
  .th,.td{padding:9px 10px}
  .grid7{grid-template-columns:110px 110px 80px 80px 110px 90px 90px 160px}
}
@media (max-width: 680px){
  .grid7{min-width: 840px}
  .thead{position:sticky}
  .th,.td{padding:8px 10px; font-size:12px}
  .logo-img{max-height:38px}
  .header{padding:14px}
  .wrap{margin: calc(72px + var(--safe-top)) auto 20px}
}
@media (max-width: 480px){
  .grid7{min-width: 840px}
  .ttl h1{font-size:16px}
  .card{border-radius:14px}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .header,.card{box-shadow:none}
}

/* Signals footer layout + small pill */
.foot.foot-flex{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.pill-sm{
  height:28px; padding:4px 10px; font-size:12px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ===== RTL tweaks ===== */
[dir="rtl"] .lang-menu{ right:auto; left:0; }
[dir="rtl"] .lang-item{ text-align:start; }

/* ===== Subtle appear animation ===== */
@keyframes langMenuFade{
  from { opacity:0; transform:translateY(-6px) scale(.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ===== Scrollbar Style ===== */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track {
  background: color-mix(in oklab, var(--card) 96%, transparent);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--text) 40%, transparent);
  border-radius: 8px;
  border: 2px solid var(--card);
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--accent) 55%, transparent); }
::-webkit-scrollbar-thumb:active{ background: color-mix(in oklab, var(--accent) 70%, transparent); }
::-webkit-scrollbar-corner { background: var(--card); }

/* ===== Firefox ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, #d6d6d6 40%, transparent) var(--card);
}

/* ===== (اختیاری) اگر ناوبری پایین سراسری داری ===== */
.mobile-nav{ padding-bottom: calc(12px + var(--safe-bottom)); }