/* ══════════════════════════════════════════════════════════════════
   تکنکال — سامانهٔ طراحی

   موضوع: ابزار سنجش طلا برای کسی که در ایران پس‌اندازش را طلا می‌کند.
   کار صفحه: بگوید الان چه خبر است، و آیا به سیگنال باید اعتماد کرد.

   دو تم، یک ساختار. همهٔ رنگ‌ها توکنِ معنایی‌اند (--bg، --accent،
   --ink-on-accent، …) نه نامِ رنگ؛ پس تعویض تم فقط عوض‌کردن مقدارِ
   همان توکن‌هاست و هیچ قاعده‌ای دوباره نوشته نمی‌شود.

     شب  — نیلیِ عمیق با لهجهٔ برنج، رنگِ خودِ فلز.
     روز — سفید با لهجهٔ لیمویی، همان سبزی که در طراحی اولیه انتخاب شد.

   لیمویی روی سفید برای متن خوانا نیست، پس در تم روشن دو نقش جدا دارد:
   --accent برای پرکردن (دکمه، برچسب فعال) با متن تیره رویش، و
   --accent-text سبزِ تیره برای وقتی که خودِ رنگ باید متن باشد.

   سطح‌ها ساده‌اند، نه شیشه روی نور. گوی‌های پس‌زمینه ادعا می‌کردند
   داده‌اند (اندازه‌شان سهم هر عامل بود)، ولی کسی درصد را از یک لکهٔ
   مات و متحرک نمی‌خواند؛ همان سهم‌ها در معادلهٔ تب «شواهد» خواناست.

   تایپ — استعداد برای نمایش (هندسی و مکانیکی، مثل خودِ ابزار)،
   وزیرمتن برای خواندن (گرم‌تر، در اندازهٔ کوچک خواناتر).
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────── تم شب (پیش‌فرض) */
:root {
  color-scheme: dark;

  --bg:   #070912;
  --bg-2: #0b0e1b;

  /* روی زمینهٔ تقریباً سیاه، شیشهٔ ۴٫۵٪ عملاً نامرئی است و کارت‌ها
     مسطح دیده می‌شوند. مقدارها بالا رفت تا پنل واقعاً «روی» صفحه
     بنشیند، نه داخلش. */
  --glass:        rgba(255, 255, 255, .062);
  --glass-strong: rgba(255, 255, 255, .10);
  --glass-line:   rgba(255, 255, 255, .13);
  --glass-line-2: rgba(255, 255, 255, .22);
  --hairline:     rgba(255, 255, 255, .07);
  --inset:        rgba(255, 255, 255, .05);
  --blur: 22px;

  /* لهجه از دو عدد ساخته می‌شود، نه شش کد ثابت.
     با این کار عوض‌کردن رنگ سایت یعنی عوض‌کردن --brand-h، و خوانایی
     در هر دو تم خودبه‌خود حفظ می‌ماند — روشناییِ هر نقش ثابت است و
     فقط فام می‌چرخد. با شش کد ثابت، کاربر می‌توانست رنگی بگذارد که
     متنش روی پس‌زمینه دیده نشود. */
  --brand-h: 96;
  --brand-s: 82%;

  /* روشنایی‌ها برای *همهٔ* فام‌ها سنجیده شده‌اند، نه فقط سبز.
     با ۶۲٪ متنِ تیرهٔ روی دکمه برای فام آبی کنتراست ۳٫۴۴ می‌داد؛
     با ۷۰٪ بدترین حالت ۴٫۵۸ است. (۷۲ فام × ۳ اشباع سنجیده شد.) */
  --accent:        hsl(var(--brand-h) var(--brand-s) 70%);
  --accent-hi:     hsl(var(--brand-h) var(--brand-s) 78%);
  --accent-dim:    hsl(var(--brand-h) calc(var(--brand-s) * .8) 42%);
  /* ۶۶٪ برای فام آبی روی کارتِ شب ۳٫۳۸ می‌داد؛ ۷۲٪ کف را به
     ۴٫۵۹ می‌رساند. */
  --accent-text:   hsl(var(--brand-h) var(--brand-s) 72%);
  --num-tint:      hsl(var(--brand-h) var(--brand-s) 74%);
  --ink-on-accent: hsl(var(--brand-h) 55% 8%);
  --accent-soft:   hsl(var(--brand-h) var(--brand-s) 60% / .12);
  --accent-line:   hsl(var(--brand-h) var(--brand-s) 60% / .32);

  --ounce:  #a99bf5;
  /* آبی فولادی، نه فیروزه‌ای: بنفشِ انس کنار فیروزه‌ایِ دلار روی سرمه‌ای
     همان رنگ‌بندیِ داشبوردهای رمزارز بود. روی زمینهٔ شب ۸٫۲ به ۱. */
  --dollar: #86a9d6;
  --local:  hsl(calc(var(--brand-h) + 250) 70% 72%);

  --up:       #3ddc97;
  --up-dim:   #1f7f58;
  --down:     #ff6b81;
  --down-dim: #9c3b4b;
  --warn:     #f5b544;
  --warn-bg:  rgba(245, 181, 68, .11);
  --calm:     #8fa3c8;
  /* رنگ معامله‌گر — برنج، همان فلزی که سرآغاز این فایل وعده داده.
     پیش از این --brass تعریف نشده بود و ردیف معامله‌گر بی‌رنگ می‌ماند. */
  --brass:    #d6ad62;

  --text:  #f2f5fb;
  --muted: #96a3bd;
  --faint: #818da7;

  --lift: 0 2px 6px -2px rgba(0, 0, 0, .45);
  --topbar-bg: rgba(7, 9, 18, .62);
}

/* ─────────────────────────────────────────── تم روز */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:   #f4f9ee;              /* سفید با نجوایی از سبز */
  --bg-2: #eaf3e0;

  --glass:        rgba(255, 255, 255, .74);
  --glass-strong: rgba(255, 255, 255, .93);
  --glass-line:   rgba(22, 48, 26, .12);
  --glass-line-2: rgba(22, 48, 26, .20);
  --hairline:     rgba(22, 48, 26, .08);
  --inset:        rgba(22, 48, 26, .035);
  --blur: 18px;

  /* همان دو عدد، ولی روشنایی‌ها برای زمینهٔ سفید عوض می‌شوند:
     پرکردن روشن می‌ماند و متن تیره می‌شود. */
  --accent:        hsl(var(--brand-h) var(--brand-s) 70%);
  --accent-hi:     hsl(var(--brand-h) var(--brand-s) 82%);
  --accent-dim:    hsl(var(--brand-h) calc(var(--brand-s) * .7) 52%);
  --accent-text:   hsl(var(--brand-h) calc(var(--brand-s) * .85) 22%);
  --num-tint:      hsl(var(--brand-h) calc(var(--brand-s) * .9) 32%);
  --ink-on-accent: hsl(var(--brand-h) 60% 10%);
  --accent-soft:   hsl(var(--brand-h) var(--brand-s) 50% / .10);
  --accent-line:   hsl(var(--brand-h) var(--brand-s) 45% / .28);

  --ounce:  #6d4fe0;
  --dollar: #2e5f9e;   /* روی پنل روشن ۶٫۲ */
  --local:  hsl(calc(var(--brand-h) + 250) 62% 46%);

  /* روی پنلِ روشن: سبز ۴٫۴ → ۵٫۰، هشدار ۴٫۴ → ۵٫۲ */
  --up:       #127a47;
  --up-dim:   #8fd6ae;
  --down:     #d1344b;
  --down-dim: #efa3ae;
  --warn:     #955a08;
  --warn-bg:  rgba(164, 100, 10, .10);
  --calm:     #4a6076;
  --brass:    #8a6412;   /* روی زمینهٔ روز ۵٫۰ */

  --text:  #0f1a12;
  --muted: #495a4f;
  --faint: #647268;   /* روی زمینهٔ درونی ۴٫۲۹ بود، حالا ۴٫۶۶ */

  --lift: 0 2px 6px -3px rgba(22, 48, 26, .2);
  --topbar-bg: rgba(244, 249, 238, .78);
}

/* اگر کاربر انتخابی نکرده، ترجیح سیستم را دنبال کن */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f9ee; --bg-2: #eaf3e0;
    --glass: rgba(255,255,255,.74); --glass-strong: rgba(255,255,255,.93);
    --glass-line: rgba(22,48,26,.12); --glass-line-2: rgba(22,48,26,.20);
    --hairline: rgba(22,48,26,.08); --inset: rgba(22,48,26,.035);
    --blur: 18px;
    --accent: hsl(var(--brand-h) var(--brand-s) 70%);
    --accent-hi: hsl(var(--brand-h) var(--brand-s) 82%);
    --accent-dim: hsl(var(--brand-h) calc(var(--brand-s) * .7) 52%);
    --accent-text: hsl(var(--brand-h) calc(var(--brand-s) * .85) 22%);
    --num-tint: hsl(var(--brand-h) calc(var(--brand-s) * .9) 32%);
    --ink-on-accent: hsl(var(--brand-h) 60% 10%);
    --accent-soft: hsl(var(--brand-h) var(--brand-s) 50% / .10);
    --accent-line: hsl(var(--brand-h) var(--brand-s) 45% / .28);
    --ounce: #6d4fe0; --dollar: #2e5f9e;
    --local: hsl(calc(var(--brand-h) + 250) 62% 46%);
    --up: #127a47; --up-dim: #8fd6ae; --down: #d1344b; --down-dim: #efa3ae;
    --warn: #955a08; --warn-bg: rgba(164,100,10,.10); --calm: #4a6076;
    --brass: #8a6412;
    --text: #0f1a12; --muted: #495a4f; --faint: #647268;
    --lift: 0 2px 6px -3px rgba(22,48,26,.2);
    --topbar-bg: rgba(244,249,238,.78);
  }
}

/* ─────────────────────────────────────────── ثابت‌های بی‌رنگ */
:root {
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* لینک‌ها پیش‌فرضِ مرورگر را نمی‌گیرند. خط زیر متن، در فارسی روی
   کشیدگی حروف می‌افتد و ناخوانا می‌کند؛ در جاهایی که خط لازم است
   (متن صفحه‌ها) صریح گذاشته می‌شود. */
a { color: var(--accent-text); text-decoration: none }
a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px;
                  border-radius: 4px }
a:hover { text-decoration: none }
.say a, .panel-note a, .form-alt a, .foot a {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.say a:hover, .form-alt a:hover, .foot a:hover {
  text-decoration-color: currentColor;
}

/* clip نه hidden: overflow-x:hidden روی body آن را ظرف اسکرول می‌کرد
   (overflow-y خودبه‌خود auto می‌شد) و هیچ عنصر sticky کار نمی‌کرد —
   نوار بالا با صفحه بالا می‌رفت. clip همان بریدن افقی است بدون ظرف اسکرول. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Vazirmatn, 'Segoe UI', Tahoma, system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background .45s var(--ease), color .45s var(--ease);
}


.page { position: relative }

/* ══════════════════════════ چیدمان */
.wrap { max-width: 1400px; margin-inline: auto; padding-inline: var(--s5) }
@media (max-width: 720px) { .wrap { padding-inline: var(--s4) } }

/* ══════════════════════════ سطح
   نام کلاس «glass» مانده چون همهٔ قالب‌ها آن را دارند؛ خودش دیگر شیشه
   نیست. بدون گوی‌های پشتش، blur چیزی برای مات‌کردن نداشت و فقط هزینه بود. */
.glass {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  transition: background .45s var(--ease), border-color .45s var(--ease);
}

/* ══════════════════════════ نوار بالا */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--topbar-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--glass-line);
  transition: background .45s var(--ease), border-color .45s var(--ease);
}
.topbar > .wrap { display: flex; align-items: center; gap: var(--s3);
                  height: 64px }
.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: Estedad, Vazirmatn, sans-serif;
  font-weight: 800; font-size: 18px; letter-spacing: -.3px;
  white-space: nowrap;
}
.brand .ingot {
  width: 16px; height: 11px; border-radius: 2px;
  background: var(--brass);
  transform: skewX(-12deg);
}
.grow { flex: 1 }
.rule { width: 1px; height: 22px; background: var(--glass-line);
        margin-inline: var(--s2) }

/* ══════════════════════════ کنترل‌ها */
.field {
  appearance: none; font: inherit; font-size: 13px; color: var(--text);
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-sm);
  padding: 8px var(--s3); cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field:hover { border-color: var(--glass-line-2) }
.field option { background: var(--bg-2); color: var(--text) }

.cta {
  font: inherit; font-weight: 700; font-size: 13.5px;
  color: var(--ink-on-accent);
  background: var(--accent);
  border: 0; border-radius: var(--r-sm);
  padding: 9px var(--s5); cursor: pointer;
  transition: background .18s var(--ease);
}
.cta:hover { background: var(--accent-hi) }

/* کلید تم */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  font-size: 15px; line-height: 1; color: var(--muted);
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 999px; cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              transform .4s var(--ease);
}
.theme-toggle:hover { color: var(--accent-text);
                      border-color: var(--glass-line-2) }
.theme-toggle:active { transform: rotate(-30deg) }
/* آیکون‌های خطی — یک ضخامت و یک اندازه برای همه */
.ico { width: 17px; height: 17px; fill: none; stroke: currentColor;
       stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.theme-toggle .sun { display: none }
:root[data-theme="light"] .theme-toggle .sun { display: block }
:root[data-theme="light"] .theme-toggle .moon { display: none }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .sun { display: block }
  :root:not([data-theme="dark"]) .theme-toggle .moon { display: none }
}

/* حلقهٔ فوکوس — عمداً :where نیست تا ویژگی صفر نداشته باشد */
.field:focus-visible,
.cta:focus-visible,
.tab:focus-visible,
.chip:focus-visible,
.ghost:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

/* ══════════════════════════ سرصفحه */
/* سرصفحه حالا فقط قیمت است و جواب‌ها بلافاصله زیرش؛ ۷۲ پیکسل فاصلهٔ
   بالا برای وقتی بود که معادله و پنل حکم کنارش می‌نشستند. */
.hero { padding-block: var(--s5) var(--s5) }

/* برچسب کوچک بالای تیتر («eyebrow») برداشته شد: فاصلهٔ ۰٫۱۶em میان
   حروف پیوستهٔ فارسی ناهموار می‌افتاد و تیتر خودش کافی است. خط تاریخ
   حالا زیر نام نماد و پیش از قیمت است — وضعیت داده پیش از عدد. */
.date-line { margin: var(--s2) 0 0; font-size: 13px; line-height: 1.9;
             color: var(--muted) }
.sub-h { margin: var(--s4) 0 var(--s1); font-size: 13.5px; font-weight: 700;
         color: var(--muted) }
.sub-h:first-child { margin-block-start: 0 }

.sym { font-family: Estedad, Vazirmatn, sans-serif;
       font-size: clamp(26px, 3.4vw, 40px);
       font-weight: 800; letter-spacing: -.9px; line-height: 1.15; margin: 0 }
.price-line { display: flex; align-items: baseline; gap: var(--s3);
              flex-wrap: wrap; margin-block-start: var(--s2) }
.price {
  font-family: Estedad, Vazirmatn, sans-serif;
  font-size: clamp(38px, 6.2vw, 70px);
  font-weight: 800; line-height: 1; letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.price-unit { font-size: 15px; color: var(--muted) }

.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
             margin-block-start: var(--s3); font-size: 13.5px;
             color: var(--muted) }
.hero-meta b { color: var(--text); font-weight: 600;
               font-variant-numeric: tabular-nums }

/* ── معادله: پیش از این امضای سرصفحه، حالا اول تب «شواهد» */
.equation { border-radius: var(--r-lg) }
.eq-terms { display: flex; align-items: stretch; flex-wrap: wrap;
            gap: var(--s3); margin-block-start: var(--s3) }
.term {
  flex: 1 1 132px; min-width: 0;
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--inset); border: 1px solid var(--glass-line);
  border-block-start: 2px solid var(--tone, var(--muted));
  transition: background .2s var(--ease);
}
.term:hover { background: var(--glass-strong) }
/* ثابت‌های فیزیکی هرگز حرکت نمی‌کنند، پس نباید به‌اندازهٔ ورودی‌های
   بازار جلب توجه کنند. */
.term.konst { flex: 0 1 112px }
.term .t-k { font-size: 12.5px; color: var(--faint) }
.term .t-v {
  font-family: Estedad, Vazirmatn, sans-serif;
  font-size: clamp(15px, 1.4vw, 21px);
  font-weight: 800; line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--tone, var(--text));
  /* شکستن وسطِ عدد («۳۱٫۱۰» و بعد «۳») بدتر از سرریز است. عدد
     یک واحد است و باید یک واحد بماند؛ فونت کوچک می‌شود نه عدد. */
  white-space: nowrap;
}
.term.konst .t-v { font-size: 15px; color: var(--muted) }
.term .t-s { font-size: 12.5px; color: var(--muted) }
.op { align-self: center; font-family: Estedad, sans-serif; font-size: 20px;
      color: var(--faint); font-weight: 700; flex: 0 0 auto }

/* نتیجه ورودی نیست؛ ردیف خودش را دارد تا عدد نه‌رقمی له نشود */
.eq-out {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  margin-block-start: var(--s4);
  padding: var(--s3) var(--s5);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.eq-out .out-k { font-size: 13.5px; color: var(--muted) }
.eq-out .out-v {
  font-family: Estedad, Vazirmatn, sans-serif;
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 900; letter-spacing: -.7px;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  margin-inline-start: auto;
}
.eq-out .out-u { font-size: 13.5px; color: var(--faint) }

.shares { display: flex; height: 6px; border-radius: 999px; overflow: hidden;
          margin-block-start: var(--s4); background: var(--inset) }
.shares > i { display: block; height: 100% }
.share-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
                margin-block-start: var(--s2); font-size: 13px;
                color: var(--muted) }
.share-legend span { display: inline-flex; align-items: center; gap: 6px }
.share-legend i { width: 8px; height: 8px; border-radius: 2px;
                  background: currentColor }

/* ── نتیجهٔ تحلیل */
.verdict-panel { padding: var(--s5) }
.verdict-word {
  font-family: Estedad, Vazirmatn, sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800; letter-spacing: -.6px; line-height: 1.2;
  margin-block: var(--s2) var(--s3);
  color: var(--tone, var(--text));
}
/* ══════════════════════════ بج */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px var(--s3);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--tone, var(--muted));
  background: color-mix(in srgb, var(--tone, var(--muted)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone, var(--muted)) 32%, transparent);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%;
             background: currentColor }


/* ══════════════════════════ نوار کارنامه */
.alert {
  display: flex; gap: var(--s4); align-items: center;
  padding: var(--s4) var(--s5); border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  background: var(--warn-bg);
  margin-block-start: var(--s5);
}
.alert .sign {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 15%, transparent);
}
.alert .msg { flex: 1; min-width: 0 }
.alert .msg > b { color: var(--warn); font-weight: 700; display: block }
.alert .msg > span { color: var(--muted); font-size: 13.5px }

.ghost {
  font: inherit; font-size: 13.5px; color: var(--text);
  background: transparent; border: 1px solid var(--glass-line-2);
  border-radius: var(--r-sm); padding: 7px var(--s4);
  cursor: pointer; white-space: nowrap;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.ghost:hover { border-color: var(--warn); background: var(--glass) }
a.ghost { display: inline-flex; align-items: center; text-decoration: none }

/* ══════════════════════════ تب */
/* نوار تب زیر نوار بالا می‌چسبد: صفحهٔ تحلیل در موبایل چند هزار پیکسل
   است و پیش از این برای رفتن از «خلاصه» به «اعتبار» باید تا بالا برگشت.
   --topbar-h را theme.js از ارتفاع واقعی نوار بالا می‌گذارد. */
.tabs { display: flex; gap: var(--s1); margin-block-start: var(--s6);
        overflow-x: auto; scrollbar-width: none;
        border-bottom: 1px solid var(--glass-line);
        position: sticky; top: var(--topbar-h, 65px); z-index: 40;
        background: var(--bg);
        scroll-margin-top: var(--topbar-h, 65px) }
.tabs::-webkit-scrollbar { display: none }
.tab {
  position: relative; font: inherit; font-size: 13.5px; color: var(--muted);
  background: transparent; border: 0; padding: var(--s3) var(--s4);
  cursor: pointer; white-space: nowrap;
  transition: color .18s var(--ease);
}
.tab:hover { color: var(--text) }
.tab[aria-selected="true"] { color: var(--accent-text); font-weight: 700 }
.tab::after {
  content: ''; position: absolute; inset-inline: var(--s3); bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--accent-text);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s var(--ease-out);
}
.tab[aria-selected="true"]::after { transform: scaleX(1) }

/* ══════════════════════════ شبکه */
.layout { display: grid; gap: var(--s5);
          grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
          padding-block: var(--s6) var(--s8) }
@media (max-width: 1080px) { .layout { grid-template-columns: 1fr } }
.stack { display: grid; gap: var(--s5); align-content: start; min-width: 0 }

.panel { padding: var(--s5); min-width: 0 }
.panel-head { display: flex; align-items: center; gap: var(--s3);
              margin-block-end: var(--s4) }
/* ۱۵٫۵ پیکسل در برابر متن ۱۴٫۵ پیکسلی تیتر را تقریباً از متن جدا
   نمی‌کرد. سؤال‌های اصلی صفحه (جواب‌ها و کارت‌های سؤال) یک پله درشت‌ترند. */
.panel-title { font-family: Estedad, Vazirmatn, sans-serif;
               font-size: 17.5px; font-weight: 700; margin: 0;
               line-height: 1.5; color: var(--tone, var(--text)) }
.stance-panel .panel-title,
.sell-panel .panel-title { font-size: clamp(19px, 2vw, 22px); font-weight: 800 }
/* پنل جمع‌بندی رنگ حکم را می‌گیرد؛ تیترش نباید. */
.verdict-panel .panel-title { color: var(--text) }
.panel-note { color: var(--faint); font-size: 13px;
              margin-block: calc(var(--s3) * -1) var(--s3) }

.line { display: flex; align-items: baseline; gap: var(--s3);
        padding-block: var(--s2) }
.line + .line { border-block-start: 1px solid var(--hairline) }
.line .k { flex: 1; min-width: 0 }
.line .v { color: var(--muted); font-variant-numeric: tabular-nums;
           white-space: nowrap }
.line.lead .k, .line.lead .v { font-family: Estedad, Vazirmatn, sans-serif;
                               font-size: 16px; font-weight: 700;
                               color: var(--text) }

.reason { display: flex; gap: var(--s3); align-items: baseline;
          padding-block: var(--s2) }
.reason + .reason { border-block-start: 1px solid var(--hairline) }
.reason .r-t { flex: 1; min-width: 0 }
.reason .r-n { font-size: 12.5px; color: var(--faint) }
.reason .r-s { font-family: Estedad, sans-serif; font-weight: 800;
               font-size: 13px; font-variant-numeric: tabular-nums;
               color: var(--tone) }

.tf { display: grid; grid-template-columns: 1fr auto; gap: var(--s3);
      align-items: center; padding: var(--s3); border-radius: var(--r-md);
      transition: background .2s var(--ease) }
.tf:hover { background: var(--inset) }
.tf + .tf { margin-block-start: var(--s1) }
.tf .name { font-weight: 700 }
.tf .sub { font-size: 12.5px; color: var(--faint) }
.tf .val { font-family: Estedad, sans-serif; font-size: 22px;
           font-weight: 800; font-variant-numeric: tabular-nums;
           color: var(--tone); display: flex; align-items: center; gap: 6px }

.zone { display: grid; grid-template-columns: 3px 1fr auto; gap: var(--s3);
        align-items: center; padding-block: var(--s3) }
.zone + .zone { border-block-start: 1px solid var(--hairline) }
.zone .bar { height: 100%; min-height: 28px; border-radius: 2px;
             background: var(--tone) }
.zone .nm { font-weight: 600 }
.zone .st { font-size: 12.5px; color: var(--faint) }
.zone .rg { font-variant-numeric: tabular-nums; font-size: 13.5px;
            color: var(--muted); white-space: nowrap; text-align: end }

.stats { display: grid; gap: var(--s3);
         grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) }
.stat { padding: var(--s3) var(--s4); border-radius: var(--r-md);
        background: var(--inset); border: 1px solid var(--hairline) }
.stat .k { font-size: 12.5px; color: var(--faint) }
.stat .v { font-family: Estedad, sans-serif; font-size: 19px;
           font-weight: 800; font-variant-numeric: tabular-nums;
           margin-block-start: 2px; color: var(--tone, var(--text)) }

.say { color: var(--muted); font-size: 14.5px; margin-block: var(--s3) 0 }
/* طول سطر: کارت‌های تمام‌عرض در دسکتاپ پاراگراف را تا ۱۴۰ حرف می‌کشیدند.
   چشم در سطر بلند فارسی جای شروع سطر بعد را گم می‌کند. */
.say, .panel-note, .call-why, .call-record, .sell-advice, .sell-lines li,
.st-why, .st-watch, .eq-when, .alert .msg > span { max-width: 72ch }
.say.warn { color: var(--warn) }
.say.dim  { color: var(--faint) }
.say.tip  { color: var(--accent-text);
            border-block-start: 1px solid var(--glass-line);
            padding-block-start: var(--s3); margin-block-start: var(--s4) }

/* ══════════════════════════ نمودار */
.chart-panel { padding: var(--s4) }
.chart-bar { display: flex; gap: var(--s2); flex-wrap: wrap;
             margin-block-end: var(--s3) }
.chip { font: inherit; font-size: 13px; color: var(--muted);
        background: transparent; border: 1px solid var(--glass-line);
        border-radius: 999px; padding: 5px var(--s3); cursor: pointer;
        transition: all .18s var(--ease) }
.chip:hover { color: var(--text); border-color: var(--glass-line-2) }
.chip[aria-pressed="true"] { color: var(--ink-on-accent); font-weight: 700;
                             background: var(--accent);
                             border-color: var(--accent) }
#chart { height: 480px; width: 100% }
@media (max-width: 720px) { #chart { height: 320px } }

.foot { border-block-start: 1px solid var(--glass-line);
        padding-block: var(--s5) var(--s8);
        color: var(--faint); font-size: 13px }

/* ══════════════════════════ حرکت */
.js [data-rise] { opacity: 0; transform: translateY(14px);
              animation: rise .72s var(--ease-out) forwards;
              animation-delay: calc(var(--i, 0) * 70ms) }
@keyframes rise { to { opacity: 1; transform: none } }

/* پدیدارشدنِ هر بخش هنگام اسکرول برداشته شد: همهٔ پنل‌ها یک ورود
   یکسان داشتند و روی صفحه‌ای که کاربر در آن دنبال عدد است، هر اسکرول
   یعنی چند لحظه صبر تا متن برسد. تنها حرکت ورود، سرصفحه است. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rise] { opacity: 1; transform: none }
  html { scroll-behavior: auto }
}

/* ══════════════════════════ موبایل
   نوار بالا در ۳۷۵ پیکسل جا نمی‌شود: برند و کلیدها بالا می‌مانند و
   انتخابگرها به ردیف دوم می‌روند. کوچک‌کردن همه‌چیز، انتخابگر را
   غیرقابل‌لمس می‌کند. */
@media (max-width: 760px) {
  body { font-size: 14px }
  .topbar > .wrap { height: auto; flex-wrap: wrap;
                    padding-block: var(--s3); row-gap: var(--s3) }
  .topbar .rule { display: none }
  .topbar .brand { order: 0 }
  .topbar .theme-toggle { order: 1 }
  .topbar .cta { order: 2; margin-inline-start: auto;
                 padding-inline: var(--s4) }
  /* «ورود» کش می‌آمد و یک ردیف کامل می‌گرفت؛ دکمه است نه ورودی. */
  .topbar .field { order: 3; flex: 0 0 auto; min-width: 0;
                   padding-inline: var(--s4) }

  .hero { padding-block: var(--s6) var(--s5) }
  .price { letter-spacing: -1px }
  .price-line { gap: var(--s2) }

  .equation { padding: var(--s4) }
  .eq-terms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) }
  .eq-terms .op { display: none }
  .eq-terms .term { flex: none }
  .eq-out { padding-inline: var(--s4) }
  .eq-out .out-v { margin-inline-start: 0 }

  .panel, .verdict-panel { padding: var(--s4) }
  .layout { gap: var(--s4); padding-block: var(--s5) var(--s7) }
  .stack { gap: var(--s4) }
  .alert { flex-wrap: wrap; gap: var(--s3); padding: var(--s4) }
  .alert .ghost { margin-inline-start: auto }
  .stats { grid-template-columns: repeat(2, 1fr) }
  .tabs { margin-block-start: var(--s5) }
}

@media (max-width: 420px) {
  .eq-terms { grid-template-columns: 1fr }
  .stats { grid-template-columns: 1fr }
}


/* ══════════════════════════ ناوبری */
.nav { display: flex; gap: var(--s1); align-items: center }
.nav a {
  color: var(--muted); text-decoration: none; font-size: 13.5px;
  padding: 6px var(--s3); border-radius: var(--r-sm);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--glass) }
.nav a[aria-current="page"] { color: var(--accent-text); font-weight: 700;
                              background: var(--inset) }
.brand { text-decoration: none; color: inherit }

/* منوی کاربر */
.menu { position: relative }
.menu > summary { list-style: none; user-select: none }
.menu > summary::-webkit-details-marker { display: none }
.menu-body {
  position: absolute; inset-inline-end: 0; margin-block-start: var(--s2);
  min-width: 168px; padding: var(--s2); z-index: 60;
  display: grid; gap: 2px;
}
.menu-body a, .menu-body button {
  display: block; width: 100%; text-align: start;
  font: inherit; font-size: 13px; color: var(--text);
  background: transparent; border: 0; border-radius: var(--r-sm);
  padding: 8px var(--s3); cursor: pointer; text-decoration: none;
}
.menu-body a:hover, .menu-body button:hover { background: var(--inset) }
.menu-body form { margin: 0 }

/* ══════════════════════════ تابلوی قیمت */
.board-head {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  margin-block: var(--s7) var(--s4);
}
.board-title {
  font-family: Estedad, Vazirmatn, sans-serif;
  font-size: clamp(28px, 3.6vw, 44px); font-weight: 800;
  letter-spacing: -1px; margin: 0;
}
.board-sub { color: var(--muted); font-size: 13px }

.group { margin-block-end: var(--s6) }
.group-head { display: flex; align-items: center; gap: var(--s3);
              margin-block-end: var(--s4) }
.group-name { font-family: Estedad, Vazirmatn, sans-serif;
              font-size: 17px; font-weight: 800; margin: 0;
              letter-spacing: -.3px }

.cards { display: grid; gap: var(--s3);
         grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)) }

.quote {
  position: relative; display: block; text-decoration: none; color: inherit;
  padding: var(--s4); border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--glass-line);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.quote:hover { border-color: var(--glass-line-2);
               background: var(--glass-strong) }
.quote .q-top { display: flex; align-items: flex-start; gap: var(--s2) }
.quote .q-link {
  flex: 1; min-width: 0; font-weight: 700; font-size: 14px;
  color: inherit; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* لینک کل کارت را می‌پوشاند تا هرجای کارت قابل کلیک باشد، ولی ستاره
   روی آن می‌نشیند و کلیکش را نمی‌دزدد. */
.quote .q-link::after { content: ''; position: absolute; inset: 0; z-index: 1 }
.quote .q-name { font-weight: 700; font-size: 14px }
.quote .q-price {
  font-family: Estedad, Vazirmatn, sans-serif;
  font-size: 25px; font-weight: 800; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; line-height: 1.3;
  margin-block-start: var(--s2);
}
.quote .q-unit { font-size: 12.5px; color: var(--faint); font-weight: 400 }
.quote .q-alt { font-size: 13px; color: var(--muted);
                font-variant-numeric: tabular-nums }
.quote .q-chg { font-size: 13.5px; font-weight: 700;
                font-variant-numeric: tabular-nums; white-space: nowrap }
.quote .q-foot { display: flex; align-items: center; gap: var(--s2);
                 margin-block-start: var(--s2) }
.quote .q-src { font-size: 12px; color: var(--faint) }

/* ستارهٔ دنبال‌کردن — در جریانِ ردیف، نه روی نام.
   inset-inline-start در راست‌به‌چپ یعنی «راست»، یعنی دقیقاً همان‌جا که
   نام نماد است. موقعیت مطلق اینجا از پایه اشتباه بود. */
.star {
  position: relative; z-index: 2; flex: 0 0 auto;
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--faint); font-size: 14px;
  line-height: 1; padding: 0;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.star:hover { color: var(--accent-text); background: var(--inset) }
.star::before { content: ''; position: absolute; inset: -9px }
.star[aria-pressed="true"] { color: var(--accent) }

/* ══════════════════════════ فرم */
.form-card { max-width: 420px; margin: var(--s8) auto; padding: var(--s6) }
.form-card h1 { font-family: Estedad, Vazirmatn, sans-serif;
                font-size: 26px; font-weight: 800; margin: 0 0 var(--s2) }
.field-row { margin-block-end: var(--s4) }
.field-row label { display: block; font-size: 13px; font-weight: 600;
                   margin-block-end: 6px }
.input {
  width: 100%; font: inherit; font-size: 14px; color: var(--text);
  background: var(--inset); border: 1px solid var(--glass-line);
  border-radius: var(--r-sm); padding: 10px var(--s3);
  transition: border-color .18s var(--ease);
}
.input:focus { outline: 2px solid var(--accent-text); outline-offset: 2px;
               border-color: transparent }
.help { font-size: 12.5px; color: var(--faint); margin-block-start: 4px }
.err { font-size: 13px; color: var(--down); margin-block-start: 4px }
.form-card .cta { width: 100%; padding-block: 11px; margin-block-start: var(--s2) }
.form-alt { text-align: center; margin-block-start: var(--s4);
            font-size: 13px; color: var(--muted) }

/* ══════════════════════════ جدول ساده */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px }
.tbl th { text-align: start; font-weight: 600; color: var(--faint);
          font-size: 12.5px; padding-block: var(--s2);
          border-block-end: 1px solid var(--glass-line) }
.tbl td { padding-block: var(--s3); border-block-end: 1px solid var(--hairline);
          font-variant-numeric: tabular-nums }
.tbl tr:last-child td { border-block-end: 0 }

@media (max-width: 760px) {
  .nav { order: 4; width: 100%; overflow-x: auto; scrollbar-width: none }
  .nav::-webkit-scrollbar { display: none }
  .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
  .quote { padding: var(--s3) }
  .quote .q-price { font-size: 20px }
  .board-head { margin-block-start: var(--s5) }
}

/* نوار انتخاب نماد در صفحهٔ تحلیل */
.picker { display: flex; gap: var(--s3); align-items: center;
          flex-wrap: wrap; margin-block: var(--s6) 0 }
/* دکمهٔ فرم فقط برای وقتی است که جاوااسکریپت نیست؛ با آن، عوض‌کردن
   نماد خودش صفحه را عوض می‌کند. */
.js .picker-go { display: none }
.picker .field { flex: 0 1 auto; min-width: 0 }
@media (max-width: 560px) { .picker .field, .picker .cta { flex: 1 1 100% } }

/* ══════════════════════════ پنل تب */
.panel-pane { animation: fade .35s var(--ease-out) }
@keyframes fade { from { opacity: 0; transform: translateY(8px) } }

.pos-grid { display: grid; gap: var(--s3);
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) }
.pos-grid .field-row { margin-block-end: 0 }

.report {
  margin: 0; padding: var(--s4);
  background: var(--inset); border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  font-family: Vazirmatn, monospace; font-size: 13.5px; line-height: 2;
  white-space: pre-wrap; word-break: break-word;
  max-height: 72vh; overflow: auto;
}

code { font-family: Consolas, monospace; font-size: .92em;
       background: var(--inset); padding: 1px 5px; border-radius: 4px }

/* ══════════════════════════ آواتار */
.avatar-big, .avatar-sm {
  display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden;
  background: var(--accent);
  color: var(--ink-on-accent);
  font-family: Estedad, Vazirmatn, sans-serif; font-weight: 900;
  border: 2px solid var(--glass-line-2);
}
.avatar-big { width: 84px; height: 84px; font-size: 34px }
.avatar-sm  { width: 52px; height: 52px; font-size: 21px }
.avatar-big img, .avatar-sm img { width: 100%; height: 100%;
                                  object-fit: cover; display: block }
.avatar-row { display: flex; align-items: center; gap: var(--s3) }

/* آواتار کوچک در نوار بالا */
.menu > summary { display: inline-flex; align-items: center; gap: var(--s2) }
.avatar-xs { width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
             display: grid; place-items: center; font-size: 12px;
             font-weight: 800; flex: 0 0 auto;
             background: var(--accent);
             color: var(--ink-on-accent) }
.avatar-xs img { width: 100%; height: 100%; object-fit: cover }

input[type="file"] { font: inherit; font-size: 13.5px; color: var(--muted);
                     width: 100% }
input[type="file"]::file-selector-button {
  font: inherit; font-size: 13.5px; margin-inline-end: var(--s3);
  padding: 6px var(--s3); border-radius: var(--r-sm);
  border: 1px solid var(--glass-line); background: var(--inset);
  color: var(--text); cursor: pointer;
}

.brand .logo { height: 26px; width: auto; max-width: 130px;
                display: block; object-fit: contain }

/* متن صفحه‌های ساخته‌شده در پنل */
.prose { max-width: 78ch; margin-inline: auto; line-height: 2 }
.prose h2 { font-family: Estedad, Vazirmatn, sans-serif; font-size: 19px;
            font-weight: 700; margin-block: var(--s6) var(--s3) }
.prose h3 { font-size: 16px; font-weight: 700; margin-block: var(--s5) var(--s2) }
.prose p { margin-block: 0 var(--s4) }
.prose ul, .prose ol { padding-inline-start: var(--s5); margin-block: 0 var(--s4) }
.prose li { margin-block-end: var(--s2) }
.prose a { color: var(--accent-text); text-decoration: underline;
           text-underline-offset: 3px }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-md) }
.prose table { width: 100%; border-collapse: collapse; margin-block: var(--s4) }
.prose th, .prose td { padding: var(--s2) var(--s3); text-align: start;
                       border-block-end: 1px solid var(--hairline) }
.prose blockquote { margin: var(--s4) 0; padding-inline-start: var(--s4);
                    border-inline-start: 3px solid var(--accent);
                    color: var(--muted) }

/* ── تپش قیمت: جهت تغییر را نشان می‌دهد نه فقط اینکه عوض شد */
@keyframes tick-up {
  0%   { background: color-mix(in srgb, var(--up) 22%, transparent);
         border-color: var(--up) }
  100% { background: var(--glass); border-color: var(--glass-line) }
}
@keyframes tick-down {
  0%   { background: color-mix(in srgb, var(--down) 22%, transparent);
         border-color: var(--down) }
  100% { background: var(--glass); border-color: var(--glass-line) }
}
.quote.tick-up   { animation: tick-up 1.2s var(--ease-out) }
.quote.tick-down { animation: tick-down 1.2s var(--ease-out) }

.board-sub.stale { color: var(--warn) }
.board-sub.stale::after { content: ' — اتصال قطع است'; font-size: 12.5px }

@media (prefers-reduced-motion: reduce) {
  .quote.tick-up, .quote.tick-down { animation: none;
    outline: 2px solid var(--accent); outline-offset: 2px }
}

.avatar-field { display: grid; gap: var(--s2) }
.avatar-clear { display: inline-flex; align-items: center; gap: var(--s2);
                font-size: 13.5px; color: var(--muted); cursor: pointer;
                padding: 6px var(--s3); border-radius: var(--r-sm);
                border: 1px solid var(--glass-line); width: fit-content;
                transition: color .18s var(--ease), border-color .18s var(--ease) }
.avatar-clear:hover { color: var(--down); border-color: var(--down) }
.avatar-clear input { accent-color: var(--down); width: 15px; height: 15px }

/* ══════════════════════════════════════════════════════════════════
   لایهٔ آرام — جای «لایهٔ نئون» قبلی

   نئون از داشبوردهای شیشه‌ایِ رمزارز آمده بود: درخشش زیر دکمه‌ها، قیمت
   گرادیانی، حلقهٔ درخشان امتیاز، و سه گوی مات که یک‌سره حرکت می‌کردند.
   با لحن «بی‌هیجان» محصول جور نبود و روی گوشی — جایی که بیشتر کاربرها
   هستند — پردازنده و باتری می‌خورد. رنگ برند همان است که مدیر گذاشته؛
   فقط جایش پرکردن و متن است، نه هاله.
   ══════════════════════════════════════════════════════════════════ */

/* تیل آیکون کنار نام هر گروه در تابلو */
.tile {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 13px; font-size: 18px; line-height: 1;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.tile.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 14px }

/* تب فعال: پرکردنِ ملایمِ هم‌فام، نه فقط رنگ متن */
.tab[aria-selected="true"] {
  background: var(--accent-soft);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

[hidden] { display: none !important }

/* ══════════════════════════ «الان بفروشم؟»
   بیرون از تب‌ها و پهن، چون سؤال اصلی کاربر است. رنگش از --tone
   می‌آید که JS بر اساس نتیجه می‌گذارد. */
.sell-panel { border-color: color-mix(in srgb, var(--tone) 26%, var(--glass-line)) }
.sell-panel .pill {
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 34%, transparent);
  color: var(--tone); font-size: 13px; font-weight: 700;
  padding: 3px 11px; border-radius: 999px;
}
.sell-head {
  font-family: Estedad, Vazirmatn, sans-serif;
  font-size: clamp(17px, 2vw, 21px); font-weight: 800; line-height: 1.5;
  color: var(--tone); margin: var(--s2) 0 var(--s4);
}

/* نوارها زیر حکم و پیش از جزئیات. تمام‌عرض نمی‌شوند تا دو نوار با یک
   نگاه مقایسه شوند. */
.sell-panel > .sell-meter { max-width: 560px; margin-block: var(--s4) 0 }

/* پرش از ردیف‌های جواب («جزئیات و کارنامه») به کارت‌ها */
.stance-panel, .sell-panel {
  scroll-margin-top: calc(var(--topbar-h, 65px) + var(--s4));
}

/* «عددهای پشت این جواب» — جمع‌شده؛ بدون جاوااسکریپت و با صفحه‌کلید هم
   باز می‌شود. فلش با border کشیده می‌شود، نه با نویسهٔ یونیکد. */
.more { margin-block-start: var(--s4); padding-block-start: var(--s2);
        border-block-start: 1px solid var(--hairline) }
.more > summary {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 44px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 700; color: var(--accent-text);
}
.more > summary::-webkit-details-marker { display: none }
.more > summary::before {
  content: ''; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease);
}
.more[open] > summary::before { transform: translateY(2px) rotate(-135deg) }
.more > summary:focus-visible { outline: 2px solid var(--accent-text);
                                outline-offset: 3px; border-radius: 4px }
.more > .sell-head { margin-block-start: var(--s2) }
.more > .call-record { margin-block: var(--s4) 0 }

.sell-lines { margin: 0; padding: 0; list-style: none;
              display: grid; gap: var(--s3) }
.sell-lines li {
  position: relative; padding-inline-start: var(--s4);
  font-size: 14.5px; line-height: 1.95; color: var(--muted);
}
.sell-lines li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .82em;
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 70%, transparent);
}

/* دو نوار مقایسه */
.sell-meter {
  background: var(--inset); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: var(--s4);
}
.sell-mt { margin: 0 0 var(--s3); font-size: 13px; color: var(--faint);
           line-height: 1.7 }
.sell-bar { display: grid; grid-template-columns: 74px 1fr 42px;
            align-items: center; gap: var(--s3); margin-block-end: var(--s2) }
.sell-k { font-size: 13px; color: var(--muted) }
.sell-track { height: 9px; border-radius: 999px; background: var(--hairline);
              overflow: hidden }
.sell-track > i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--tone);
}
/* نوار مرجع راه‌راه است تا با نوار اصلی اشتباه نشود — وقتی هر دو
   عدد نزدیک‌اند (که نکتهٔ اصلی همین است) رنگِ تنها کافی نیست. */
.sell-bar.base .sell-track > i {
  background: repeating-linear-gradient(115deg,
    var(--faint) 0 5px, transparent 5px 10px), var(--hairline);
}
.sell-v { font-size: 13px; font-weight: 700; text-align: start;
          font-variant-numeric: tabular-nums }
.sell-cap { margin: var(--s3) 0 0; font-size: 12.5px; color: var(--faint) }

.sell-advice {
  margin: var(--s5) 0 0; padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
  font-size: 14px; line-height: 1.95; color: var(--text);
}

/* ── حکم مستقیم ──────────────────────────────────────────────────
   واژهٔ حکم رنگ خودش را دارد و برچسب اعتبار رنگ خودش را. عمداً جدا:
   «بفروش» با کارنامهٔ ردشده باید هم قرمزِ حکم را نشان بدهد هم
   هشدار اعتبار را، وگرنه کاربر فقط واژه را می‌بیند. */
/* حکم و اعتبارش یک جوابِ دوخطی‌اند، نه واژهٔ درشت و قرصی ریز کنارش.
   پیش از این «نگه‌دار» ۳۸ پیکسل با وزن ۹۰۰ بود و «قاعده: بی‌اثر»
   کنارش ۱۲٫۵ پیکسل: از نظر بصری دستور پیام اصلی بود و احتیاط پانویس. */
.call {
  display: grid; gap: var(--s2);
  margin-block: var(--s3) var(--s3);
  padding: var(--s4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--call-c) 8%, var(--inset));
  border: 1px solid color-mix(in srgb, var(--call-c) 26%, transparent);
  --call-c: var(--calm);
}
.call[data-call="sell"] { --call-c: var(--down) }
.call[data-call="buy"]  { --call-c: var(--up) }
.call[data-call="hold"] { --call-c: var(--calm) }
/* «سکه یا طلا؟»: هر دو حکمِ خرید است، پس رنگ جهت ندارد — فقط «حکم هست».
   برنج، نه سبزِ صعود: سبز در این صفحه فقط یعنی «بالا رفته». */
.call[data-call="coin"],
.call[data-call="gold"]   { --call-c: var(--brass) }
.call[data-call="either"] { --call-c: var(--calm) }

.call-word {
  font-family: Estedad, Vazirmatn, sans-serif;
  font-size: clamp(19px, 2.1vw, 23px); font-weight: 800;
  line-height: 1.45; color: var(--call-c);
}
.call-side { display: grid; gap: var(--s2); min-width: 0 }
.call-why { margin: 0; font-size: 14px; line-height: 1.85; color: var(--muted) }

.call-trust {
  justify-self: start;
  font-size: 15px; font-weight: 700; line-height: 1.6; padding: 5px 12px;
  border-radius: 999px; --t: var(--faint);
  color: var(--t); background: color-mix(in srgb, var(--t) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--t) 32%, transparent);
}
.call[data-trust="آزموده"]  .call-trust { --t: var(--up) }
.call[data-trust="بی‌اثر"]   .call-trust { --t: var(--warn) }
.call[data-trust="ردشده"]   .call-trust { --t: var(--down) }
.call[data-trust="نیازموده"] .call-trust { --t: var(--faint) }

.call-record {
  margin: 0 0 var(--s4); font-size: 13.5px; line-height: 1.9;
  color: var(--muted);
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--hairline);
}

/* قرص «کندل بسته» کنار قیمت زنده — خاموش‌تر از قیمت اصلی، چون
   مرجع است نه خبر. */
.pill.live.closed { --tone: var(--faint) }

/* واحد کنار برچسب ورودی قیمت — کوچک ولی حیاتی: بدون آن کاربر
   نمی‌داند ریال بنویسد یا تومان. */
.pos-unit { color: var(--accent-text); font-weight: 700; font-size: 13px }

/* ══════════════════════════ نمودار بزرگ
   نمودار کوچک برای نگاه سریع است؛ وقتی می‌خواهید الگو و موج و سطح
   را با هم ببینید، ۴۸۰ پیکسل کم است. حالت بزرگ تمام صفحه را
   می‌گیرد و لایه‌ها را جدا قابل خاموش‌کردن می‌کند. */
.chart-panel.zoom {
  position: fixed; inset: 0; z-index: 300;
  margin: 0; border-radius: 0; max-width: none;
  display: flex; flex-direction: column;
  background: var(--bg);
  padding: var(--s4) var(--s5);
  animation: zoomin .28s var(--ease-out);
  overflow-y: auto;
}
@keyframes zoomin { from { opacity: 0; transform: scale(.985) } }
/* با min-height:0 هرچه جا کم می‌آمد از نمودار کم می‌شد: در صفحهٔ کوتاه
   یا وقتی خواندنِ «قیمت من» باز بود، نمودارِ «بزرگ» در موبایل به ۱۸۰
   پیکسل می‌رسید — کوتاه‌تر از نمودار معمولی. حالا دست‌کم ۴۲۰ می‌ماند و
   اگر بقیه جا نشد، خود قاب اسکرول می‌خورد. ۴۲۰ و نه بیشتر: سرِ خواندنِ
   «قیمت من» باید پایین قاب پیدا بماند تا کاربر بداند زیرش چیزی هست. */
.chart-panel.zoom > * { flex-shrink: 0 }
.chart-panel.zoom #chart { flex: 1 1 auto; height: auto;
                           min-height: min(420px, 55vh) }
.chart-panel.zoom .layers { display: flex }
@media (max-width: 760px) {
  /* پانزده دکمهٔ لایه در موبایل شش ردیف می‌شد؛ یک ردیفِ لغزان کافی است
     و دکمهٔ نیمه‌بریده در لبه نشان می‌دهد که باز هم هست. */
  .chart-panel.zoom .layers { flex-wrap: nowrap; overflow-x: auto;
                              scrollbar-width: none }
  .chart-panel.zoom .layers::-webkit-scrollbar { display: none }
  .chart-panel.zoom .layers > * { flex: none }
}

/* دکمهٔ بزرگ‌نمایی از بقیهٔ چیپ‌ها جدا دیده شود */
.zoom-btn { border-color: var(--accent-line); color: var(--accent-text) }
.chart-panel.zoom .zoom-btn { background: var(--accent-soft) }

/* نوار لایه‌ها */
.layers {
  display: none; flex-wrap: wrap; gap: var(--s2);
  margin-block-end: var(--s3); padding-block-end: var(--s3);
  border-block-end: 1px solid var(--hairline);
}
.layers .lay-k { font-size: 12.5px; color: var(--faint);
                 align-self: center; margin-inline-end: var(--s2) }
.lay {
  font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--muted); background: transparent;
  border: 1px solid var(--glass-line); border-radius: 999px;
  padding: 4px 11px; transition: all .18s var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
}
.lay:hover { border-color: var(--accent-line); color: var(--text) }
.lay[aria-pressed="true"] {
  color: var(--ink-on-accent); background: var(--accent);
  border-color: transparent; font-weight: 700;
}
/* نقطهٔ رنگی = رنگ همان لایه روی نمودار */
.lay .dot-c { width: 7px; height: 7px; border-radius: 50%;
              background: var(--c, var(--muted)); flex: 0 0 auto }
.lay[aria-pressed="true"] .dot-c { background: var(--ink-on-accent) }
.lay .val { font-size: 12px; opacity: .75 }


/* ── صفحه‌های اعتماد: تماس، حذف حساب */
.ch-list { list-style: none; margin: var(--s4) 0 0; padding: 0;
           display: grid; gap: var(--s2) }
.ch-list li { display: flex; gap: var(--s3); align-items: baseline;
              padding-block: 6px; border-block-end: 1px solid var(--hairline) }
.ch-k { font-size: 13.5px; color: var(--muted); min-width: 140px }
.ch-v { font-size: 14px }
.ch-list a { color: var(--accent-text); font-size: 14px }

/* ناحیهٔ خطرناک: باید دیده شود ولی اشتباهی زده نشود */
.danger-zone { border-color: color-mix(in srgb, var(--down) 26%, var(--glass-line));
               margin-block-start: var(--s8) }
.cta.danger { background: var(--down); color: #fff;
              box-shadow: 0 8px 24px -12px var(--down) }
.cta.danger:hover { filter: brightness(1.08) }

/* «بازار بسته» — خبر نیست، پس رنگ جهت نمی‌گیرد */
.q-chg.closed { color: var(--faint); font-weight: 400 }

/* ══════════════════════════ با این تحلیل چه کنم؟
   سه ردیف، هرکدام برای یک وضعیت. عنوانِ وضعیت سمت راست و جواب
   سمت چپش، تا چشم بتواند فقط ردیف خودش را بخواند. */
.stance-panel { border-color: color-mix(in srgb, var(--tone) 22%, var(--glass-line)) }
.stance-rows { display: grid; gap: var(--s3); margin-block-start: var(--s3) }

.st-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--s4); align-items: start;
  padding: var(--s4);
  background: var(--inset); border-radius: var(--r-md);
}
@media (max-width: 760px) {
  .st-row { grid-template-columns: 1fr; gap: var(--s2) }
}
.st-who { font-size: 13px; color: var(--muted); line-height: 1.8 }
.st-head {
  font-family: Estedad, Vazirmatn, sans-serif;
  font-size: 17px; font-weight: 800; color: var(--tone);
  line-height: 1.5; letter-spacing: -.2px;
}
.st-why { margin: 6px 0 0; font-size: 14px; line-height: 1.95;
          color: var(--text) }
/* اعتبار همان قاعده، زیر تیتر ردیف — همان رنگ‌های کارت‌های سؤال */
.st-trust { margin-block-start: 2px; font-size: 13.5px; font-weight: 700;
            --t: var(--faint); color: var(--t) }
.st-trust[data-trust="آزموده"]  { --t: var(--up) }
.st-trust[data-trust="بی‌اثر"]   { --t: var(--warn) }
.st-trust[data-trust="ردشده"]   { --t: var(--down) }
.st-more { display: inline-flex; align-items: center; min-height: 44px;
           font-size: 13.5px; font-weight: 700; color: var(--accent-text) }
.st-watch {
  margin: var(--s3) 0 0; font-size: 13px; line-height: 1.9;
  color: var(--muted);
  padding-inline-start: var(--s3);
  border-inline-start: 2px solid var(--hairline);
}

/* ══════════════════════════ حالت بارگذاری
   تحلیل خودکار اجرا می‌شود ولی حدود یک ثانیه طول می‌کشد. تا پیش از
   این، صفحه در آن یک ثانیه پر از «—» بود و کاربر فکر می‌کرد باید
   دکمه‌ای بزند. حالا معلوم است چیزی در راه است.

   شرط روی body است، پس وقتی داده رسید (aria-busy برداشته می‌شود)
   همه با هم عادی می‌شوند و JS لازم نیست کلاسی را پاک کند. */
body[aria-busy="true"] .sk {
  color: transparent !important;
  border-radius: 6px;
  background: linear-gradient(100deg,
    var(--inset) 30%, var(--glass) 45%, var(--inset) 60%);
  background-size: 300% 100%;
  animation: sk-slide 1.3s var(--ease) infinite;
  user-select: none;
}
body[aria-busy="true"] .sk * { visibility: hidden }
body[aria-busy="true"] .sk-box {
  background: linear-gradient(100deg,
    var(--inset) 30%, var(--glass) 45%, var(--inset) 60%);
  background-size: 300% 100%;
  animation: sk-slide 1.3s var(--ease) infinite;
  border-radius: var(--r-md);
}
/* در RTL جهت حرکت هم باید برعکس باشد */
@keyframes sk-slide {
  from { background-position: 0% 50% }
  to   { background-position: 100% 50% }
}
@media (prefers-reduced-motion: reduce) {
  body[aria-busy="true"] .sk,
  body[aria-busy="true"] .sk-box { animation: none; background: var(--inset) }
}

/* نوار نازک بالای صفحه — نشانهٔ سراسری «در حال کار» */
body[aria-busy="true"]::before {
  content: ''; position: fixed; inset-block-start: 0; inset-inline: 0;
  height: 2px; z-index: 500;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: sk-bar 1.1s linear infinite;
}
@keyframes sk-bar {
  from { background-position: -40% 0 }
  to   { background-position: 140% 0 }
}

/* ══════════════════════════ منوی موبایل
   دو نسخه از یک فهرست: ‎.nav-desk در دسکتاپ، details در موبایل.
   پیش از این details در دسکتاپ با display:contents باز نگه داشته
   می‌شد، ولی مرورگرهای تازه محتوای details بسته را با
   ::details-content پنهان می‌کنند و لینک‌ها پهنای صفر می‌گرفتند. */
.nav-wrap { display: none }

@media (max-width: 760px) {
  .nav-desk { display: none }
  /* سربرگ در یک ردیف: برند، منو، تم، ورود */
  .nav-wrap { display: block; position: relative; order: 1 }
  .nav-wrap > summary {
    display: grid; place-content: center; gap: 4px;
    width: 44px; height: 44px; border-radius: var(--r-sm);
    border: 1px solid var(--glass-line); background: var(--glass);
    cursor: pointer; list-style: none;
  }
  .nav-wrap > summary::-webkit-details-marker { display: none }
  .nav-wrap > summary i {
    display: block; width: 17px; height: 2px; border-radius: 2px;
    background: var(--text);
  }
  .nav-wrap[open] > summary { border-color: var(--accent-line) }

  .nav-wrap > .nav {
    position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px);
    z-index: 60; min-width: 190px;
    display: grid; gap: 2px; padding: var(--s2);
    background: var(--bg-2);
    border: 1px solid var(--glass-line-2); border-radius: var(--r-md);
    box-shadow: var(--lift);
  }
  .nav-wrap > .nav a {
    padding: 12px var(--s3); border-radius: var(--r-sm);
    min-height: 44px; display: flex; align-items: center;
  }
  .nav-wrap > .nav a:hover,
  .nav-wrap > .nav a[aria-current="page"] { background: var(--accent-soft) }

  /* ناحیهٔ لمسی: انگشت از اشاره‌گر بزرگ‌تر است */
  .topbar .theme-toggle { width: 44px; height: 44px }
  .topbar .cta, .topbar .ghost { min-height: 44px }
  /* بقیهٔ کنترل‌ها هم: ورودی جست‌وجو، انتخاب تایم‌فریم، «ورود»،
     «کارنامه» و نام برند در موبایل ۲۷ تا ۴۱ پیکسل بودند */
  .field, .ghost, .topbar .brand { min-height: 44px }
  .tab { min-height: 44px }
  .chip, .lay { min-height: 44px }
}

@media (max-width: 760px) {
  /* فاصله‌گیرِ کشسان تمام فضای باقی را می‌گرفت و نام برند را تا یک
     حرف له می‌کرد. در موبایل جای خالی نداریم که پرش کنیم. */
  .topbar .grow { display: none }
  /* «ثبت‌نام» از نوار برداشته می‌شود: در ۳۷۵ پیکسل پنج دکمه جا
     نمی‌شوند و نام برند له می‌شد. لینک ثبت‌نام در صفحهٔ ورود و
     صفحهٔ اول هست، پس راهی بسته نمی‌شود. */
  .topbar > .wrap > .cta { display: none }
  .topbar .brand { flex: 1 1 auto }
  .topbar .brand {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 15px;
  }
  /* لوگو تا ۱۳۰ پیکسل عرض می‌گرفت و در ۳۷۵ پیکسل جایی برای نام
     برند نمی‌گذاشت — فقط یک حرفش دیده می‌شد. */
  .brand .logo { max-width: 30px; height: 24px; object-fit: contain }
  .topbar > .wrap { column-gap: var(--s2) }
}

/* ══════════════════════════ جست‌وجوی نماد
   select اصلی پنهان می‌شود ولی در DOM می‌ماند: مقدارش همان چیزی است
   که فرم می‌خواند، و بدون جاوااسکریپت خودش دیده می‌شود. */
/* ‏.picker صفت data-rise دارد و transform می‌گذارد — یعنی بستر
   ریخت‌بندیِ خودش را می‌سازد و z-index فهرست داخلش حبس می‌شود، پس
   محتوای بعدیِ صفحه رویش می‌افتد. دادن z-index به خودِ picker همان
   بستر را بالا می‌برد. */
.picker { position: relative; z-index: 90 }
.pick { position: relative; flex: 1 1 240px; min-width: 0 }
.pick-in { width: 100%; }
.pick-hidden { display: none }

.pick-list {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px);
  z-index: 80; max-height: 320px; overflow-y: auto;
  padding: 6px; border-radius: var(--r-md);
  border: 1px solid var(--glass-line-2); box-shadow: var(--lift);
  display: grid; gap: 2px;
  /* کشویی باید مات باشد. با شیشهٔ ۶ درصدی، متنِ پشتش خوانده می‌شد و
     فهرست ناخوانا بود. */
  background: var(--bg-2); backdrop-filter: none;
}
.pick-item {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; text-align: start; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--text);
  background: transparent; border: 0; border-radius: var(--r-sm);
  padding: 10px var(--s3); min-height: 40px;
}
.pick-item:hover, .pick-item.on { background: var(--accent-soft) }
.pick-item[aria-selected="true"] { color: var(--accent-text); font-weight: 700 }
.pick-name { flex: 1 1 auto; min-width: 0; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap }
.pick-group { font-size: 12px; color: var(--faint); flex: 0 0 auto }
.pick-empty { margin: 0; padding: var(--s4); font-size: 13px;
              color: var(--muted); text-align: center }
@media (max-width: 760px) { .pick-item { min-height: 44px } }

/* ══════════════════════════ «روی قیمت من تحلیل کن»
   کنار نمودار می‌نشیند نه در تب‌ها: کسی که این عدد را می‌نویسد
   می‌خواهد همان لحظه خطش را روی نمودار ببیند. */
.mine-bar {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; padding: var(--s3) var(--s4);
  border-block-start: 1px solid var(--glass-line);
}
.mine-bar label { font-size: 13px; color: var(--muted); flex: 0 0 auto }
.mine-bar label .u { color: var(--faint) }
.mine-bar .input {
  inline-size: 12ch; text-align: center; font-variant-numeric: tabular-nums;
}
.mine-hint { font-size: 12.5px; color: var(--faint); flex: 1 1 220px }
.mine-echo { flex: 1 1 100%; font-size: 13px; color: var(--muted);
             font-variant-numeric: tabular-nums }
.mine-echo:empty { display: none }
.mine-echo.warn { color: var(--warn); font-weight: 700 }

.mine-out { padding: 0 var(--s4) var(--s4) }

.mine-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tone) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
  margin-block-end: var(--s3);
}
.mine-head b { font-size: 15px; color: var(--tone) }
.mine-head .mine-pnl {
  margin-inline-start: auto; font-size: 17px; font-weight: 800;
  color: var(--tone); font-variant-numeric: tabular-nums;
}
.mine-head.tone-up   { --tone: var(--up) }
.mine-head.tone-down { --tone: var(--down) }
.mine-head.tone-warn { --tone: var(--warn) }
.mine-head.tone-calm { --tone: var(--calm) }

.mine-rows {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.mine-row {
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--glass-line);
  background: var(--glass);
}
.mine-row.tone-up   { --tone: var(--up) }
.mine-row.tone-down { --tone: var(--down) }
.mine-row.tone-calm { --tone: var(--calm) }
.mine-k { font-size: 12.5px; font-weight: 700; color: var(--tone, var(--muted)) }
.mine-v {
  font-size: 16px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; margin-block: 2px 4px;
}
.mine-why { font-size: 12.5px; color: var(--faint); line-height: 1.85 }
.mine-why b { color: var(--text) }

/* در حالت بزرگ‌نمایی، نوار و خواندن باید بمانند — همان‌جاست که کاربر
   خط خودش را کنار الگوها می‌بیند. */
.chart-panel.zoom .mine-bar { order: 3 }
.chart-panel.zoom .mine-out {
  order: 4; max-block-size: 34vh; overflow-y: auto;
}

@media (max-width: 760px) {
  .mine-hint { display: none }
  /* ۱۰ حرف برای عدد نه‌رقمیِ جداکننده‌دار (۱۱ نویسه) کم بود */
  .mine-bar .input { inline-size: auto; flex: 1 1 150px }
}

/* ══════════════════════════ واژه‌نامه — «یعنی چی؟»
   خط‌چین زیر واژه، نه رنگ: رنگ در این صفحه معنای دیگری دارد (سبز
   صعودی، قرمز نزولی) و واژهٔ سبزرنگ پیام اشتباه می‌دهد. */
.gl {
  border-block-end: 1px dashed var(--faint);
  cursor: help; padding-block-end: 1px;
}
.gl:hover, .gl:focus-visible {
  border-block-end-color: var(--accent); color: var(--accent-text, var(--text));
  outline: none;
}
.gl:focus-visible { border-radius: 2px; box-shadow: 0 0 0 2px var(--accent) }

#gl-pop {
  position: fixed; z-index: 9999; max-inline-size: min(30ch, 88vw);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--glass-solid, var(--bg-2, #1a1d24));
  border: 1px solid var(--glass-line);
  box-shadow: 0 8px 28px rgb(0 0 0 / .38);
  font-size: 13px; line-height: 1.95; color: var(--text);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}
#gl-pop.on { opacity: 1; transform: none }
#gl-pop b {
  display: block; color: var(--accent-text, var(--accent));
  font-size: 13.5px; margin-block-end: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #gl-pop { transition: none }
}