/* ══════════════════════════════════════════════════════════
   بخشِ «استراتژی‌هایِ اسپات» — هم رویِ صفحه‌یِ اصلی هم صفحه‌یِ /spot/
   فایلِ جدا عمداً: style.css (۵۱ کیلوبایت) دست نخورد، چون آسیب‌پذیر به
   آپلودِ نصفه است و نگهبانِ --css-ok روی آخرین قانونش حساب می‌کند.
   فقط از توکن‌هایِ موجود (--card, --line, --up, --blue, --purple, ...)
   استفاده می‌کند؛ رنگ یا فونتِ تازه‌ای تعریف نمی‌کند.
   همه‌چیز بدونِ جاوااسکریپت کامل و درست دیده می‌شود (حالتِ پایه = حالتِ نهایی).
   ══════════════════════════════════════════════════════════ */

/* ── قابِ بخش ─────────────────────────────────────────────
   band در style.css فقط پرچمِ فاصله‌گذاریه و پس‌زمینه ندارد؛ هر بخش
   پس‌زمینه‌یِ خودش را می‌آورد (مثلِ .tf-sec). بخشِ بعدی (استراتژی‌ساز)
   هم band است و پدینگِ بالایش نصف می‌شد؛ چون این بخش پس‌زمینه‌یِ
   متفاوت دارد، فاصله‌یِ کامل برمی‌گردد. */
.spot-sec{background:#0E1330;border-block:1px solid var(--line-soft)}
.sec.band.spot-sec + .sec.band{padding-block-start:var(--sp)}

/* ── نوارِ ویژگی‌هایِ اسپات ───────────────────────────────── */
.sp-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-block-end:30px}
.sp-fact{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:14px;
  padding:14px 16px;display:flex;gap:12px;align-items:center}
.sp-fact i{font-style:normal;font-size:1.35rem;flex:none;width:40px;height:40px;
  display:grid;place-items:center;border-radius:11px;background:var(--ink);border:1px solid var(--line)}
.sp-fact b{display:block;font-size:.92rem;font-weight:700;color:var(--bone);line-height:1.5}
.sp-fact span{display:block;font-size:.8rem;color:var(--mute);line-height:1.6}

/* ── کارتِ هر استراتژی ────────────────────────────────────── */
.sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sp-card{--acc:var(--blue);position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 22px rgba(0,0,0,.28);
  transition:transform .3s,border-color .3s}
.sp-card::before{content:'';position:absolute;inset-inline:0;inset-block-start:0;height:3px;
  background:var(--acc)}
.sp-card:hover{transform:translateY(-5px);border-color:var(--acc)}
.sp-card.pb{--acc:var(--up)}
.sp-card.bo{--acc:var(--purple)}

.sp-art{margin:0;padding:18px 18px 0;background:
  radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.05),transparent 70%)}
.sp-art svg{width:100%;height:auto;aspect-ratio:300/120;overflow:visible}
.sp-art figcaption{font-size:.72rem;color:var(--mute);text-align:center;padding-block:6px 2px;opacity:.85}

.sp-body{padding:14px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.sp-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp-head h3{font-size:1.08rem;font-weight:700;line-height:1.5;flex:1 1 auto}
.sp-tf{font-size:.76rem;font-weight:500;color:var(--acc);border:1px solid var(--acc);
  border-radius:99px;padding:2px 11px;white-space:nowrap}
.sp-idea{color:var(--mute);font-size:.92rem;line-height:1.85}

.sp-rules{list-style:none;display:grid;gap:8px;padding:0;margin:0}
.sp-rules li{position:relative;padding-inline-start:24px;font-size:.88rem;color:var(--mute);line-height:1.75}
.sp-rules li::before{content:'';position:absolute;inset-inline-start:0;inset-block-start:.62em;
  width:14px;height:14px;border-radius:50%;background:var(--acc);opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sp-rules b{color:var(--bone);font-weight:500}

.sp-exit{margin-block-start:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding-block-start:14px;border-block-start:1px dashed var(--line)}
.sp-exit div{background:var(--ink);border:1px solid var(--line-soft);border-radius:11px;
  padding:9px 8px;text-align:center}
.sp-exit small{display:block;font-size:.7rem;color:var(--mute);line-height:1.5}
.sp-exit b{display:block;font-size:.84rem;font-weight:700;margin-block-start:2px;line-height:1.5}
.sp-exit .st b{color:var(--dn)}
.sp-exit .tg b{color:var(--up)}

/* ── پیامِ نمونه + مسیرِ کار ──────────────────────────────── */
.sp-flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;
  align-items:start;margin-block-start:44px}
.sp-flow h3{font-size:1.15rem;font-weight:700;margin-block-end:6px}
.sp-flow .sub{color:var(--mute);font-size:.9rem;margin-block-end:18px}

.sp-steps{list-style:none;display:grid;gap:0;padding:0;margin:0;position:relative}
.sp-steps li{position:relative;padding-inline-start:54px;padding-block-end:22px}
.sp-steps li:last-child{padding-block-end:0}
.sp-steps li::before{content:attr(data-n);position:absolute;inset-inline-start:0;inset-block-start:0;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;
  background:var(--grad);color:#fff;font-size:.95rem;z-index:1}
.sp-steps li::after{content:'';position:absolute;inset-inline-start:18px;inset-block-start:38px;
  inset-block-end:0;width:2px;background:var(--line)}
.sp-steps li:last-child::after{display:none}
.sp-steps h4{font-size:.98rem;font-weight:700;margin-block-end:3px;line-height:1.6}
.sp-steps p{color:var(--mute);font-size:.88rem;line-height:1.8}

.sp-mini{margin-block-start:22px;background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:14px;padding:14px 16px;font-size:.86rem;color:var(--mute);line-height:1.85}
.sp-mini b{color:var(--bone);font-weight:700}

.sp-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-block-start:34px}
.sp-note{margin-block-start:18px;font-size:.82rem;color:var(--mute);max-width:70ch;line-height:1.9}

/* پیامِ تلگرامیِ نمونه — از کلاس‌هایِ .out موجود استفاده می‌کند؛ این‌ها فقط تفاوت‌ها هستند */
.sp-msg .ol-spot{color:var(--up);font-weight:700}

/* ══ صفحه‌یِ اختصاصیِ /spot/ ═════════════════════════════ */
.sp-qnav{display:flex;flex-wrap:wrap;gap:8px;margin-block:18px 4px}
.sp-qnav a{font-size:.82rem;color:var(--mute);background:var(--surface);border:1px solid var(--line);
  padding:6px 14px;border-radius:99px;transition:color .2s,border-color .2s}
.sp-qnav a:hover{color:var(--bone);border-color:var(--purple)}

.sp-page{--col:880px}
.sp-page .ac-body,.sp-page .sp-tablewrap,.sp-page .sp-strat,.sp-page .sp-split,
.sp-page .sp-steps,.sp-page .ac-faq,.sp-page .ac-rel,.sp-page .sp-note{max-width:var(--col)}
.sp-page .sp-steps{margin-block-start:6px}
.sp-page .ac-body h2{scroll-margin-block-start:84px}

.sp-tablewrap{overflow-x:auto;margin-block:6px 22px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);-webkit-overflow-scrolling:touch}
.sp-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.sp-table th,.sp-table td{padding:12px 16px;text-align:start;vertical-align:top;line-height:1.7}
.sp-table thead th{font-size:.82rem;font-weight:700;color:var(--bone);background:var(--surface-2);
  border-block-end:1px solid var(--line)}
.sp-table tbody th{font-weight:500;color:var(--bone);white-space:nowrap}
.sp-table td{color:var(--mute)}
.sp-table tbody tr+tr>*{border-block-start:1px solid var(--line-soft)}
.sp-table .yes{color:var(--up)}
.sp-table .no{color:var(--dn)}

.sp-strat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 22px 8px;margin-block:22px;border-inline-start:4px solid var(--blue)}
.sp-strat.pb{border-inline-start-color:var(--up)}
.sp-strat.bo{border-inline-start-color:var(--purple)}
.sp-strat .sp-tf{margin-inline-start:8px;vertical-align:middle;color:var(--bone);border-color:var(--line)}
.sp-strat dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-block:14px 14px}
.sp-strat dt{color:var(--bone);font-weight:700;font-size:.9rem;white-space:nowrap}
.sp-strat dd{color:var(--mute);font-size:.94rem;line-height:1.85;margin:0}

.sp-page .sp-strat h3{font-size:1.18rem;font-weight:700;margin-block:0 6px;line-height:1.6}
.sp-page .sp-split h3{font-size:1rem;font-weight:700;margin-block:0 8px}
.sp-page .sp-split ul{margin:0;padding-inline-start:20px;color:var(--mute);font-size:.94rem;line-height:1.9}
.sp-page .sp-split li{margin-block-end:4px}
.sp-page .sp-strat dd b{color:var(--bone);font-weight:700}
.sp-strat dd .cond-h{font-size:.84rem;color:var(--bone);font-weight:500;margin-block:0 4px}
.sp-strat dd .cond-h:not(:first-child){margin-block-start:10px}
.sp-strat dd ul.cond{list-style:none;padding:0;margin:0 0 4px;display:grid;gap:4px}
.sp-strat dd ul.cond li{position:relative;padding-inline-start:16px;font-size:.92rem;line-height:1.8;margin:0}
.sp-strat dd ul.cond li::before{content:'';position:absolute;inset-inline-start:0;inset-block-start:.78em;
  width:6px;height:6px;border-radius:50%;background:var(--blue)}
.sp-strat.pb dd ul.cond li::before{background:var(--up)}
.sp-strat.bo dd ul.cond li::before{background:var(--purple)}
.sp-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-block:18px 26px}
.sp-split>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.sp-split .ok{border-color:rgba(45,212,167,.45)}
.sp-split .bad{border-color:rgba(240,85,107,.45)}

/* ── موبایل ──────────────────────────────────────────────── */
@media (max-width:980px){
  .sp-grid{grid-template-columns:1fr 1fr}
  .sp-facts{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .sp-flow{grid-template-columns:1fr;gap:30px}
}
@media (max-width:640px){
  .sp-grid{grid-template-columns:1fr}
  .sp-facts{grid-template-columns:1fr}
  .sp-split{grid-template-columns:1fr}
  .sp-strat dl{grid-template-columns:1fr;gap:2px}
  .sp-strat dd{margin-block-end:10px}
  .sp-cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sp-card,.sp-qnav a{transition:none}
  .sp-card:hover{transform:none}
}

/* آخرین قانون — اگر این متغیر برنگشت یعنی فایل ناقص رسیده (مثلِ نگهبانِ style.css) */
:root{--spot-css-ok:1}