/* ==========================================================================
   صفحهٔ اصلی الگو هاب (هاب سوپراپ)

   زبانِ رنگیِ عمدیِ این صفحه — هر رنگ یک معنا دارد و جای دیگری استفاده نمی‌شود:
     • سرمه‌ای برند (#0B1E3D → #2D63B0) = اعتماد، ثبات، پولِ جدی. پایهٔ همه‌چیز.
     • فیروزه‌ای (#19C3B3 → #4ED9CC)   = دادهٔ زنده و رشد؛ رنگِ «برو»/CTA.
     • بنفش (#6D28D9 → #A78BFA)        = فقط و فقط هوش مصنوعی. هر جا بنفش دیدی،
                                          یعنی موتور AI الگو هاب پشتش است.
     • کهربایی (#B45309 → #FCD34D)     = فوریت و رویدادِ خبری.
     • سبز/قرمز بازار                   = فقط برای سود و زیان، نه تزئین.

   رنگ‌ها از توکن‌های styles.css می‌آیند تا هر دو تم (روشن و سرمه‌ای) یکدست بمانند.
   ========================================================================== */

:root, [data-theme="light"] {
  --hub-cut: #eef2f7;          /* دورِ بَج‌ها: هم‌رنگ پس‌زمینه تا روی آیکون «بریده» دیده شوند */
  --hub-soon: #64748b;
  --hub-rim: rgba(255,255,255,0);
  --hub-toast-bg: #162F55; --hub-toast-fg: #fff;
  --hub-ai: #6D28D9; --hub-ai-soft: rgba(109,40,217,.1);
  --hub-link: #0B6F66;
  --hub-up: #0E7C52; --hub-warn: #8A5A00; --hub-down: #C11C27;
}
[data-theme="dark"] {
  --hub-cut: #0b1727;
  --hub-soon: #475569;
  --hub-rim: rgba(255,255,255,.14);
  --hub-toast-bg: #e8eef6; --hub-toast-fg: #0b1727;
  --hub-ai: #C4B5FD; --hub-ai-soft: rgba(167,139,250,.16);
  --hub-link: var(--brand-light);
  --hub-up: #4FE0A6; --hub-warn: #FFC048; --hub-down: #FF8A93;
}

.hub { max-width: 1120px; margin: 0 auto; padding: 16px 0 28px; display: flex; flex-direction: column; gap: 22px; }
.hub-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hub-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- خوشامد + جست‌وجو ---------- */
.hub-top { display: flex; flex-direction: column; gap: 14px; }
.hub-greet__title { margin: 0; font-size: 1.28rem; font-weight: 900; color: var(--heading); line-height: 1.5; }
.hub-greet__title .accent { color: var(--brand-dark); }
[data-theme="dark"] .hub-greet__title .accent { color: var(--brand-light); }
.hub-greet__sub { margin: 2px 0 0; font-size: .8rem; font-weight: 600; color: var(--text-soft); }

.hub-search {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 8px 22px -16px rgba(22,47,85,.45);
  backdrop-filter: var(--blur-card); -webkit-backdrop-filter: var(--blur-card);
  transition: border-color var(--trans), box-shadow var(--trans); cursor: text;
}
.hub-search:focus-within { border-color: rgba(var(--brand-rgb), .6); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .14), 0 8px 22px -16px rgba(22,47,85,.45); }
.hub-search__ico { width: 21px; height: 21px; color: var(--text-dim); flex: none; }
.hub-search:focus-within .hub-search__ico { color: var(--brand-dark); }
.hub-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  color: var(--text); font-size: .92rem; font-weight: 600;
}
.hub-search input::placeholder { color: var(--text-dim); font-weight: 500; }
.hub-search input::-webkit-search-cancel-button { display: none; }
.hub-search__clear {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 0; padding: 0;
  border-radius: 50%; background: var(--chip); color: var(--text-soft); cursor: pointer;
}
.hub-search__clear svg { width: 14px; height: 14px; }
.hub-search__clear[hidden] { display: none; }

/* ---------- شبکهٔ سرویس‌ها ---------- */
.hub-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 4px; }
.hub-tile-wrap { display: flex; justify-content: center; min-width: 0; }
.hub-tile-wrap[hidden] { display: none; }
.hub-tile {
  --glow: rgba(22,47,85,.35);
  width: 100%; max-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 4px 2px; margin: 0; border: 0; background: none; border-radius: 18px;
  color: var(--text); text-align: center; cursor: pointer; font: inherit;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.hub-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hub-tile__icon {
  position: relative; isolation: isolate; width: 62px; height: 62px; border-radius: 19px; flex: none;
  box-shadow: 0 12px 20px -12px var(--glow), 0 2px 5px rgba(22,47,85,.10);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow var(--trans);
}
.hub-tile__icon::after { /* لبهٔ نوری در تم سرمه‌ای تا آیکون‌های تیره از پس‌زمینه جدا شوند */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--hub-rim);
}
.hub-tile__icon > svg { display: block; width: 100%; height: 100%; }
.hub-tile__label { font-size: .76rem; font-weight: 700; line-height: 1.5; color: var(--text); max-width: 100%; }
@media (hover: hover) {
  .hub-tile:hover .hub-tile__icon { transform: translateY(-4px); box-shadow: 0 18px 26px -12px var(--glow), 0 2px 5px rgba(22,47,85,.10); }
  .hub-tile:hover .hub-tile__label { color: var(--heading); }
}
.hub-tile:active .hub-tile__icon { transform: scale(.92); transition-duration: .08s; }
[data-theme="dark"] .hub-tile__icon { box-shadow: 0 14px 24px -12px var(--glow), 0 2px 6px rgba(0,0,0,.35); }

.hub-tile--market    { --glow: rgba(25,195,179,.75); }
.hub-tile--journal   { --glow: rgba(79,107,240,.75); }
.hub-tile--basket    { --glow: rgba(139,92,246,.75); }
.hub-tile--risk      { --glow: rgba(251,170,30,.8); }
.hub-tile--news      { --glow: rgba(242,84,91,.75); }
.hub-tile--exclusive { --glow: rgba(33,78,138,.85); }
.hub-tile--bot       { --glow: rgba(38,169,240,.75); }
.hub-tile--academy   { --glow: rgba(47,196,106,.75); }
.hub-tile--plans     { --glow: rgba(236,75,180,.75); }
.hub-tile--copy      { --glow: rgba(108,155,239,.55); }
.hub-tile--forex     { --glow: rgba(249,178,78,.55); }

.hub-tile.is-soon .hub-tile__icon > svg { filter: saturate(.5); opacity: .72; }
.hub-tile.is-soon .hub-tile__label { color: var(--text-dim); }
.hub-tile.is-shake .hub-tile__icon { animation: hubShake .42s ease; }
@keyframes hubShake { 0%,100% { transform: none; } 20% { transform: translateX(-4px) rotate(-4deg); } 40% { transform: translateX(4px) rotate(4deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* بَج‌ها: گوشهٔ بالا-چپ آیکون، با دورِ هم‌رنگ پس‌زمینه (مثل اپ‌های سوپراپ) */
.hub-badge {
  position: absolute; top: -8px; left: -10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--radius-pill);
  border: 2px solid var(--hub-cut); color: #fff; font-size: .6rem; font-weight: 800; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.35);
}
.hub-badge--live { background: linear-gradient(135deg, #22d98f, #10a86c); }
.hub-badge--live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: hubBlink 1.4s ease-in-out infinite; }
.hub-badge--ai { background: linear-gradient(135deg, #a78bfa, #6d28d9); letter-spacing: .3px; }
.hub-badge--hot { background: linear-gradient(135deg, #ff6b6b, #e0243b); }
.hub-badge--soon { background: var(--hub-soon); }
@keyframes hubBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.hub-empty { margin: 6px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px; border-radius: 18px; background: var(--chip); color: var(--text-soft); font-size: .84rem; font-weight: 700; }
.hub-empty svg { width: 20px; height: 20px; }
.hub-empty[hidden] { display: none; }

/* ==========================================================================
   بنرهای ورق‌خور — چهار بخش اصلی، هرکدام با امضای رنگی خودش و یک دکمهٔ ورود
   ========================================================================== */
.hub-banners { position: relative; }
.hub-banners__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: 26px; overscroll-behavior-x: contain;
}
.hub-banners__track::-webkit-scrollbar { display: none; }

.hub-bn {
  --accent: #4ED9CC;
  position: relative; isolation: isolate; overflow: hidden;
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 208px; padding: 20px 22px 20px 6px; border-radius: 26px; color: #fff;
}
.hub-bn__mesh {   /* شبکهٔ ظریفِ نمودار: حسِ «داشبورد» بدون شلوغ کردنِ متن */
  position: absolute; inset: 0; z-index: -1; opacity: .55; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 72%); mask-image: linear-gradient(90deg, #000, transparent 72%);
}
.hub-bn::after {  /* هالهٔ نرمِ گوشه، هم‌رنگِ امضای هر بنر */
  content: ""; position: absolute; z-index: -1; inset-block-start: -110px; inset-inline-start: -80px;
  width: 300px; height: 300px; border-radius: 50%; background: var(--accent); opacity: .16; filter: blur(26px);
}
.hub-bn--ai      { --accent: #A78BFA; background: linear-gradient(115deg, #241056 0%, #4C1D95 46%, #6D28D9 100%); }
.hub-bn--market  { --accent: #5EEAD4; background: linear-gradient(115deg, #052F2B 0%, #0E7A70 48%, #16A99B 100%); }
.hub-bn--journal { --accent: #7DD3FC; background: linear-gradient(115deg, #0B1E3D 0%, #1B3F70 50%, #2D63B0 100%); }
.hub-bn--news    { --accent: #FCD34D; background: linear-gradient(115deg, #101E38 0%, #4A2B12 56%, #B45309 100%); }
[data-theme="dark"] .hub-bn { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

.hub-bn__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.hub-bn__kicker {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.26);
  color: var(--accent); font-size: .7rem; font-weight: 800; white-space: nowrap;
}
.hub-bn__kicker svg { width: 13px; height: 13px; flex: none; }
.hub-bn__dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 3px rgba(52,211,153,.25); animation: hubBlink 1.5s ease-in-out infinite; }
.hub-bn__title { margin: 0; font-size: 1.16rem; font-weight: 900; line-height: 1.6; }
.hub-bn__title span { color: var(--accent); }
.hub-bn__text {
  margin: 0; font-size: .74rem; line-height: 1.9; font-weight: 500; color: rgba(255,255,255,.82);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* دکمهٔ سفیدِ پرکنتراست روی زمینهٔ رنگی — بالاترین نرخِ کلیک در بنرهای موبایل */
.hub-bn__cta {
  margin-top: 5px; display: inline-flex; align-items: center; gap: 4px; padding: 9px 16px 9px 12px;
  border-radius: var(--radius-pill); background: #fff; color: #10203C; font-size: .8rem; font-weight: 900;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.6);
  transition: transform var(--trans), box-shadow var(--trans);
}
.hub-bn__cta svg { width: 16px; height: 16px; transition: transform var(--trans); }
.hub-bn__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(0,0,0,.7); }
.hub-bn__cta:hover svg { transform: translateX(-3px); }
.hub-bn__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hub-bn__art { width: 156px; height: auto; flex: none; filter: drop-shadow(0 14px 22px rgba(0,0,0,.3)); }

.hub-banners__dots { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 6px; }
.hub-banners__dots button {
  position: relative; width: 7px; height: 7px; padding: 0; border: 0; margin: 0 3px;
  border-radius: var(--radius-pill); background: var(--border-strong); cursor: pointer;
  transition: width var(--trans), background var(--trans);
}
.hub-banners__dots button::before {   /* ناحیهٔ لمسِ ۲۴px بدون تغییرِ ظاهرِ نقطه */
  content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: max(100%, 24px); height: 24px;
}
.hub-banners__dots button.is-active { width: 24px; background: var(--brand); }
.hub-banners__dots button:focus-visible { outline: 2px solid var(--brand); outline-offset: 5px; }

/* ---------- حرکتِ تصویرِ بنرها ----------
   حالتِ پایهٔ هر تصویر همان قابِ پایانی است؛ پس بدون JS یا با «کاهش حرکت» چیزی
   کم نمی‌شود. hub.js به بنرِ جاری is-active می‌دهد و همان لحظه داستانِ آن بنر از
   اول پخش می‌شود (سبد چیده می‌شود، نمودار بالا می‌رود، معامله ثبت می‌شود، تیتر
   تایپ می‌شود) و بعد یک حلقهٔ آرامِ «زنده» می‌ماند. */
.bn-ping, .bn-caret { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hub-banners.is-motion .hub-bn__art { opacity: 0; transition: opacity .2s linear .45s; }
  .hub-banners.is-motion .hub-bn.is-active .hub-bn__art {
    opacity: 1; transition: opacity .35s ease; animation: bnFloat 7s ease-in-out infinite;
  }
  .hub-banners.is-off .hub-bn__art, .hub-banners.is-off .hub-bn__art * { animation-play-state: paused !important; }

  .bn-glow, .bn-pop, .bn-ping, .bn-ring, .bn-core, .bn-spark, .bn-alert { transform-box: fill-box; transform-origin: center; }
  .bn-type, .bn-countdown { transform-box: fill-box; transform-origin: 0 50%; }
  .bn-candle { transform-box: fill-box; transform-origin: 50% 100%; }
  .bn-orbit { transform-origin: 110px 90px; }

  /* اجزای مشترک */
  .is-active .bn-glow  { animation: bnGlow 4.5s ease-in-out infinite; }
  .is-active .bn-rise  { animation: bnRise .6s var(--d, 0s) cubic-bezier(.2,.8,.2,1) both; }
  .is-active .bn-fade  { animation: bnFade .7s var(--d, 0s) ease both; }
  .is-active .bn-pop   { animation: bnPop .55s var(--d, 0s) cubic-bezier(.3,1.4,.5,1) both; }
  .is-active .bn-type  { animation: bnType .45s var(--d, 0s) cubic-bezier(.3,.8,.3,1) both; }
  .is-active .bn-draw  { animation: bnDraw var(--t, .9s) var(--d, 0s) cubic-bezier(.6,0,.3,1) both; }
  .is-active .bn-ping  { animation: bnPing 1.9s var(--d, 0s) ease-out infinite; }
  .is-active .bn-blink { animation: hubBlink 1.3s ease-in-out infinite; }

  /* ۱) سبد چین هوشمند */
  .is-active .bn-seg--1 { animation: bnSeg .7s .25s cubic-bezier(.5,0,.2,1) both, bnRebalA 6s 2.3s ease-in-out infinite; }
  .is-active .bn-seg--2 { animation: bnSeg .6s .75s cubic-bezier(.5,0,.2,1) both, bnRebalB 6s 2.3s ease-in-out infinite; }
  .is-active .bn-seg--3 { animation: bnSeg .5s 1.15s cubic-bezier(.5,0,.2,1) both; }
  .is-active .bn-ring   { animation: bnSpin 26s linear infinite; }
  .is-active .bn-orbit  { animation: bnFade .5s 1.5s both, bnSpin 5.5s 1.5s linear infinite; }
  .is-active .bn-core   { animation: bnPop .6s 1.45s cubic-bezier(.3,1.4,.5,1) both, bnBeat 2.6s 2.4s ease-in-out infinite; }
  .is-active .bn-spark  { animation: bnTwinkle 2.6s ease-in-out infinite; }

  /* ۲) نمای بازار */
  .is-active .bn-mk-area { animation: bnWipe 1.5s .35s cubic-bezier(.6,0,.3,1) both; }
  .is-active .bn-candle { animation: bnGrow .55s var(--d, 0s) cubic-bezier(.3,1.4,.5,1) both; }
  .is-active .bn-candle--live { animation: bnGrow .55s var(--d, 0s) cubic-bezier(.3,1.4,.5,1) both, bnTick 2.2s 2.1s ease-in-out infinite; }
  @supports (offset-path: path("M0 0")) {
    .is-active .bn-mk-head {
      transform: none; offset-rotate: 0deg; offset-distance: 100%;
      offset-path: path("M26 128 54 112 82 118 110 88 138 96 166 62 194 46");
      animation: bnTravel 1.5s .35s cubic-bezier(.6,0,.3,1) both;
    }
  }

  /* ۴) اخبار اقتصادی */
  .is-active .bn-caret { animation: bnCaret .7s 1s steps(1) infinite; }
  .is-active .bn-countdown { animation: bnType 3s 1.1s cubic-bezier(.2,.6,.3,1) both; }
  .is-active .bn-alert { animation: bnPop .55s 2.2s cubic-bezier(.3,1.4,.5,1) both, bnShake 2.8s 3s ease-in-out infinite; }

  @keyframes bnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes bnGlow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: .7; } }
  @keyframes bnRise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes bnFade { from { opacity: 0; } }
  @keyframes bnPop { from { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.12); } }
  @keyframes bnType { from { transform: scaleX(0); } }
  @keyframes bnDraw {
    from { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
    6% { opacity: 1; }
    to { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
  }
  @keyframes bnPing { from { opacity: .6; transform: scale(1); } 70%, to { opacity: 0; transform: scale(2.1); } }
  @keyframes bnSeg { from { stroke-dasharray: 0 302; } }
  @keyframes bnRebalA { 50% { stroke-dasharray: 110 302; } }
  @keyframes bnRebalB { 50% { stroke-dasharray: 116 302; stroke-dashoffset: -112; } }
  @keyframes bnSpin { to { transform: rotate(360deg); } }
  @keyframes bnBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
  @keyframes bnTwinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.55) rotate(45deg); opacity: .5; } }
  @keyframes bnWipe { from { clip-path: inset(0 100% 0 0); opacity: 0; } 25% { opacity: 1; } to { clip-path: inset(0 0 0 0); } }
  @keyframes bnGrow { from { opacity: 0; transform: scaleY(0); } }
  @keyframes bnTick { 0%, 100% { transform: scaleY(1); } 35% { transform: scaleY(1.22); } 65% { transform: scaleY(.92); } }
  @keyframes bnTravel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
  @keyframes bnCaret { 0% { opacity: 1; } 50% { opacity: 0; } }
  @keyframes bnShake {
    0%, 22%, 100% { transform: rotate(0); }
    4% { transform: rotate(-14deg); } 8% { transform: rotate(12deg); }
    12% { transform: rotate(-8deg); } 16% { transform: rotate(5deg); }
  }
}

@media (max-width: 374px) {
  .hub-bn { min-height: 190px; padding: 16px 16px 16px 4px; }
  .hub-bn__art { width: 118px; }
  .hub-bn__text { display: none; }
}

/* ==========================================================================
   سربرگِ بخش‌ها
   ========================================================================== */
.hub-sec { display: flex; flex-direction: column; gap: 14px; }
.hub-sec__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hub-sec__badge {
  width: 44px; height: 44px; flex: none; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 18px -12px rgba(22,47,85,.55);
}
.hub-sec__badge svg { display: block; width: 100%; height: 100%; }
.hub-sec__titles { flex: 1 1 200px; min-width: 0; }
.hub-sec__title {
  margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 1.05rem; font-weight: 900; color: var(--heading); line-height: 1.6;
}
.hub-sec__sub { margin: 3px 0 0; font-size: .74rem; font-weight: 600; color: var(--text-soft); line-height: 1.85; }
.hub-sec__more {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 2px; flex: none;
  min-height: 28px; padding: 4px 2px;      /* هدفِ لمسِ کافی روی موبایل */
  font-size: .74rem; font-weight: 800; color: var(--hub-link);
}
.hub-sec__more svg { width: 15px; height: 15px; transition: transform var(--trans); }
.hub-sec__more:hover svg { transform: translateX(-3px); }
.hub-clock {
  display: none; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--chip);
  color: var(--text-soft); font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
@media (min-width: 600px) { .hub-clock { display: inline-flex; } }

.hub-chip {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill);
  color: #fff; font-size: .62rem; font-weight: 800; line-height: 1.7; white-space: nowrap;
}
.hub-chip--ai { background: linear-gradient(135deg, #a78bfa, #6d28d9); letter-spacing: .3px; }
.hub-chip--hot { background: linear-gradient(135deg, #ff6b6b, #e0243b); }

/* ---------- حالت‌های مشترک: اسکلت، پیام، دکمه ---------- */
@keyframes hubShimmer { to { transform: translateX(-100%); } }
.hub-skel { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.hub-skel span { display: block; height: 12px; border-radius: 6px; background: var(--chip); position: relative; overflow: hidden; }
.hub-skel span:nth-child(1) { width: 42%; }
.hub-skel span:nth-child(2) { width: 88%; height: 20px; }
.hub-skel span:nth-child(3) { width: 70%; }
.hub-skel span:nth-child(4) { width: 55%; }
.hub-skel span::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, var(--glass-hi), transparent); animation: hubShimmer 1.3s infinite; }
.hub-skel--bot span:nth-child(2) { height: 54px; }

.hub-note {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 26px 20px; border-radius: var(--radius-lg); background: var(--chip); color: var(--text-soft);
}
.hub-note strong { font-size: .88rem; font-weight: 800; color: var(--heading); }
.hub-note span { font-size: .76rem; line-height: 1.9; }
.hub-note__link { font-size: .78rem; font-weight: 800; color: var(--hub-link); }
.hub-note__link:hover { text-decoration: underline; }

.hub-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 10px 18px; border-radius: var(--radius-pill); font-size: .8rem; font-weight: 800;
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
}
.hub-btn--sm { padding: 9px 16px; font-size: .76rem; }
.hub-btn--solid {
  background: linear-gradient(120deg, var(--brand-light), var(--brand)); color: var(--on-brand);
  box-shadow: var(--shadow-brand);
}
.hub-btn--solid:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(var(--brand-rgb), .8); }
.hub-btn--ghost { background: var(--chip); color: var(--heading); border-color: var(--border-strong); }
.hub-btn--ghost:hover { background: var(--surface-2); }
.hub-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- نمای بازار روی صفحهٔ اصلی ---------- */
/* قیمت‌های کلیدی روی دسکتاپ دو ستونه می‌شود تا کارت بلند و خالی نماند. */
@media (min-width: 760px) {
  .hub-sec--market .keyprices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
}

/* ==========================================================================
   اخبار اقتصادی امروز (تحلیلش در صفحهٔ تقویم باز می‌شود)
   ========================================================================== */
.hub-eco { display: grid; gap: 14px; }
@media (min-width: 900px) { .hub-eco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub-eco.is-empty { grid-template-columns: 1fr; }

.hub-eco-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px;
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-soft); backdrop-filter: var(--blur-card); -webkit-backdrop-filter: var(--blur-card);
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.hub-eco-card::before {                 /* نوارِ حالتِ رویداد، لبهٔ راستِ کارت */
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 4px; background: var(--text-dim);
}
.hub-eco-card.is-released::before { background: var(--up); }
.hub-eco-card.is-waiting::before { background: var(--warn); }
.hub-eco-card.is-soon::before { background: var(--down); }
.hub-eco-card.is-upcoming::before { background: var(--blue-500); }
.hub-eco-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-pop); }

.hub-eco-card__head { display: flex; align-items: flex-start; gap: 12px; }
.hub-eco__when { flex: none; display: flex; flex-direction: column; gap: 2px; min-width: 64px; }
.hub-eco__when strong { font-size: 1.14rem; font-weight: 900; color: var(--heading); font-variant-numeric: tabular-nums; line-height: 1.3; }
.hub-eco__when span { font-size: .64rem; font-weight: 700; color: var(--text-soft); }
.hub-eco__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hub-eco__titles strong { font-size: .88rem; font-weight: 800; color: var(--heading); line-height: 1.7; }
.hub-eco__titles span { font-size: .66rem; font-weight: 600; color: var(--text-soft); direction: ltr; text-align: right; }
.hub-eco__state {
  flex: none; padding: 4px 10px; border-radius: var(--radius-pill); font-size: .66rem; font-weight: 800; white-space: nowrap;
  background: var(--chip); color: var(--text-soft);
}
.is-released .hub-eco__state { background: rgba(22,199,132,.14); color: var(--hub-up); }
.is-waiting .hub-eco__state { background: rgba(245,158,11,.16); color: var(--hub-warn); }
.is-soon .hub-eco__state { background: rgba(234,57,67,.14); color: var(--hub-down); }

.hub-eco__values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hub-eco__val {
  display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center;
  padding: 9px 6px; border-radius: 14px; background: var(--chip);
}
.hub-eco__val span { font-size: .66rem; font-weight: 800; color: var(--text-soft); letter-spacing: .3px; }
.hub-eco__val strong { font-size: .92rem; font-weight: 900; color: var(--heading); font-variant-numeric: tabular-nums; }
.hub-eco__val.is-actual { background: rgba(var(--brand-rgb), .12); }
.hub-eco__val.is-actual strong { color: var(--hub-link); }

/* دعوت به تحلیل AI — بنفش، چون در این صفحه بنفش یعنی هوش مصنوعی */
.hub-eco__cta {
  margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 14px; background: var(--hub-ai-soft); border: 1px solid rgba(139,92,246,.24);
  color: var(--hub-ai); font-size: .76rem; font-weight: 800;
  transition: background var(--trans), border-color var(--trans);
}
.hub-eco__cta:hover { background: rgba(139,92,246,.18); border-color: rgba(139,92,246,.45); }
.hub-eco__cta-arrow { margin-inline-start: auto; display: inline-flex; }
.hub-eco__cta-arrow svg { width: 16px; height: 16px; transition: transform var(--trans); }
.hub-eco__cta:hover .hub-eco__cta-arrow svg { transform: translateX(-3px); }

/* ==========================================================================
   برایند ربات الگو اسمارت — فقط رشد سرمایهٔ ماه جاری
   ========================================================================== */
.hub-growth {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; border-radius: 26px; color: #fff;
  background: radial-gradient(420px 240px at 88% 18%, rgba(78,217,204,.24) 0%, transparent 70%),
              linear-gradient(118deg, #0B1E3D 0%, #16355F 52%, #214E8A 100%);
  box-shadow: 0 24px 46px -26px rgba(11,30,61,.9), inset 0 1px 0 rgba(255,255,255,.1);
}
.hub-growth::before {   /* همان شبکهٔ داشبوردیِ بنرها، برای پیوستگیِ برند */
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.hub-growth__main { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 0; }
.hub-growth__body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; }
.hub-growth__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hub-growth__month { font-size: .8rem; font-weight: 800; color: #fff; }
.hub-growth__updated { font-size: .64rem; font-weight: 600; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }

/* فلکسِ شکستنی، نه دو ستونِ مساوی: درصدِ سه‌رقمی روی موبایل نباید به مبلغ بچسبد. */
.hub-growth__figures { flex: 1 1 250px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 30px; }
.hub-growth__figures > div { min-width: 0; flex: none; }
.hub-growth__label { display: block; font-size: .64rem; font-weight: 800; color: rgba(255,255,255,.6); margin-bottom: 3px; }
.hub-growth__pct strong {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  font-size: min(2.2rem, 8.4vw); font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums;
  color: #6FF0BE; white-space: nowrap;
}
.hub-growth__arrow { font-style: normal; font-size: .58em; line-height: 1; }
.hub-growth.is-down .hub-growth__pct strong { color: #FF9AA2; }
.hub-growth__amount strong { display: block; font-size: min(1.3rem, 5.4vw); font-weight: 900; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-growth__amount small { display: block; margin-top: 4px; font-size: .64rem; font-weight: 600; color: rgba(255,255,255,.58); }

.hub-growth__cta { flex: none; }

/* منحنی نوارِ پایینیِ خودش را دارد (در جریانِ چیدمان، نه روی عددها) و تا لبه‌های
   کارت می‌رود. سرِ منحنی یک نقطهٔ زنده است؛ چون SVG کشیده می‌شود، نقطه HTML است
   تا گرد بماند. جهت عمداً LTR است: زمان در نمودار از چپ به راست می‌رود. */
.hub-growth__chart { --pin-gap: 26px; position: relative; direction: ltr; height: 104px; margin-top: 12px; color: #6FF0BE; }
.hub-growth.is-down .hub-growth__chart { color: #FF9AA2; }
.hub-growth__plot {
  position: absolute; inset: 0 var(--pin-gap) 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%); mask-image: linear-gradient(90deg, transparent, #000 16%);
}
.hub-area { display: block; width: 100%; height: 100%; }
.hub-growth__pin {
  position: absolute; left: calc(100% - var(--pin-gap)); top: var(--y, 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: currentColor; border: 2.5px solid #fff; box-sizing: border-box;
  box-shadow: 0 0 14px currentColor;
}
.hub-growth__pin::after { content: ""; position: absolute; inset: -2.5px; border-radius: 50%; background: currentColor; opacity: 0; z-index: -1; }

/* پیش از دیده شدن (is-pre) عددها صفر و منحنی پنهان است؛ با رسیدنِ کارت به دید
   (is-in) عددها بالا می‌شمارند و منحنی از چپ رسم می‌شود. تازه‌سازی‌های بعدی
   بدون این دو کلاس و بی‌حرکت انجام می‌شود. */
.hub-growth.is-pre .hub-growth__plot { clip-path: inset(0 100% 0 0); }
.hub-growth.is-pre .hub-growth__pin, .hub-growth.is-pre .hub-growth__amount small { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hub-growth__arrow { animation: hubNudge 1.8s ease-in-out infinite; }
  .hub-growth.is-down .hub-growth__arrow { animation-direction: reverse; }
  .hub-growth__pin::after { animation: hubPing 1.9s ease-out infinite; }
  .hub-growth.is-in .hub-growth__plot { animation: hubReveal 1.6s cubic-bezier(.6,0,.25,1) both; }
  .hub-growth.is-in .hub-growth__pin { animation: hubPinIn .5s 1.45s cubic-bezier(.3,1.5,.5,1) both; }
  .hub-growth.is-in .hub-growth__figures > div { animation: hubRiseIn .6s cubic-bezier(.2,.8,.2,1) both; }
  .hub-growth.is-in .hub-growth__figures > div + div { animation-delay: .12s; }
  .hub-growth.is-in .hub-growth__amount small { animation: hubFadeIn .5s 1.3s both; }
  .hub-growth.is-in .hub-growth__cta { animation: hubRiseIn .6s .24s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes hubNudge { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
  @keyframes hubPing { from { opacity: .55; transform: scale(1); } 75%, to { opacity: 0; transform: scale(3.2); } }
  @keyframes hubReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes hubPinIn { from { opacity: 0; transform: scale(0); } }
  @keyframes hubRiseIn { from { opacity: 0; transform: translateY(12px); } }
  @keyframes hubFadeIn { from { opacity: 0; } }
}

@media (min-width: 720px) {
  .hub-growth__main { padding: 26px 28px 0; }
  .hub-growth__pct strong { font-size: 2.7rem; }
  .hub-growth__amount strong { font-size: 1.5rem; }
  .hub-growth__chart { --pin-gap: 34px; height: 132px; }
}

/* ==========================================================================
   تحلیل اختصاصی — آخرین تحلیل بازار خارجی
   ========================================================================== */
.hub-exc { display: block; }
.hub-exc-card {
  display: grid; gap: 0; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur-card); -webkit-backdrop-filter: var(--blur-card);
}
@media (min-width: 760px) { .hub-exc-card { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: stretch; } }
.hub-exc-card__media { display: block; position: relative; aspect-ratio: 16 / 9; background: #0B1E3D; }
.hub-exc-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 760px) { .hub-exc-card__media { aspect-ratio: auto; min-height: 100%; } }
.hub-exc-card__body { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.hub-exc-card__top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hub-exc-card__tag {
  padding: 3px 10px; border-radius: var(--radius-pill); font-size: .62rem; font-weight: 800;
  background: rgba(33,78,138,.14); color: var(--blue-700);
}
[data-theme="dark"] .hub-exc-card__tag { color: #9dc0ee; background: rgba(120,160,210,.16); }
.hub-exc-card__hash { font-size: .66rem; font-weight: 700; color: var(--hub-link); direction: ltr; }
.hub-exc-card__time { margin-inline-start: auto; font-size: .66rem; font-weight: 700; color: var(--text-soft); }
.hub-exc-card__text {
  margin: 0; font-size: .8rem; line-height: 2.05; font-weight: 500; color: var(--text-soft);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.hub-exc-card__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hub-exc-card__count { font-size: .7rem; font-weight: 700; color: var(--text-soft); }

/* ---------- پیام «به زودی» ---------- */
.hub-toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px); opacity: 0; max-width: calc(100vw - 32px);
  padding: 11px 18px; border-radius: 14px; background: var(--hub-toast-bg); color: var(--hub-toast-fg);
  font-size: .8rem; font-weight: 700; box-shadow: var(--shadow-pop); text-align: center;
  transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.hub-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- واکنش‌گرایی ---------- */
@media (max-width: 374px) {
  .hub-tile__icon { width: 56px; height: 56px; border-radius: 17px; }
  .hub-tile__label { font-size: .7rem; }
}
@media (min-width: 600px) {
  .hub { gap: 26px; }
  .hub-top { flex-direction: row; align-items: center; justify-content: space-between; }
  .hub-search { width: min(420px, 50%); }
  .hub-services {
    padding: 26px 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-soft); backdrop-filter: var(--blur-card); -webkit-backdrop-filter: var(--blur-card);
  }
  .hub-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 8px; }
  .hub-tile__icon { width: 70px; height: 70px; border-radius: 21px; }
  .hub-tile__label { font-size: .82rem; }
  .hub-bn { min-height: 250px; padding: 28px 34px 28px 18px; gap: 16px; }
  .hub-bn__title { font-size: 1.55rem; }
  .hub-bn__text { font-size: .84rem; max-width: 460px; }
  .hub-bn__art { width: 232px; }
  .hub-toast { bottom: calc(110px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) {
  .hub { gap: 34px; }
  .hub-sec__title { font-size: 1.16rem; }
  .hub-bn { min-height: 286px; }
  .hub-bn__title { font-size: 1.8rem; }
  .hub-bn__art { width: 278px; }
}
@media (min-width: 1024px) {
  .hub { padding-top: 26px; }
  .hub-tile__icon { width: 76px; height: 76px; border-radius: 23px; }
  .hub-toast { bottom: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-badge--live i, .hub-bn__dot, .hub-skel span::after { animation: none; }
  .hub-tile__icon, .hub-bn__cta, .hub-eco-card, .hub-btn, .hub-eco__cta { transition: none; }
  .hub-banners__track { scroll-behavior: auto; }
}

/* ==========================================================================
   لیگ ترید سنگاپور — کاشیِ اولِ شبکه و بنرِ تبلیغاتیِ بالای آیکون‌ها

   این بخش عمداً از زبانِ رنگیِ بقیهٔ صفحه بیرون می‌زند: شبِ سرمه‌ایِ سنگاپور،
   قرمز/سفیدِ پرچم، آبیِ توبیت (اسپانسر) و طلاییِ کاپ. مثل سربرگِ صفحهٔ مسابقه،
   رنگ‌ها ثابت‌اند و به تمِ روشن/تیره وابسته نیستند.

   حالتِ پایهٔ هر جزء قابِ ثابت و کامل است؛ همهٔ حرکت‌ها داخلِ
   prefers-reduced-motion: no-preference تعریف شده‌اند.
   ========================================================================== */

/* ---------- کاپ (مشترکِ کاشی و بنر) ---------- */
.lg-cup { display: block; width: 100%; height: 100%; overflow: visible; }
.lg-cup__mark--b, .lg-cup__shine { opacity: 0; }

/* ---------- پرچمِ مواج (مشترک) ----------
   پارچه از --n نوارِ عمودی ساخته شده که هرکدام همان تصویرِ پرچم را با جابه‌جاییِ
   خودش نشان می‌دهد؛ نوارها با تأخیرِ پله‌ای بالا و پایین می‌روند و موج می‌سازند.
   جهت LTR است: میله سمتِ چپ و هلالِ پرچم کنارِ میله. */
.lg-flag { position: relative; display: block; width: 100%; height: 100%; direction: ltr; }
.lg-flag__pole {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--pole, 2px); border-radius: 2px;
  background: linear-gradient(90deg, #F8FAFC, #94A3B8); box-shadow: 0 0 0 .5px rgba(15,23,42,.4);
}
.lg-flag__pole::before {   /* گویِ طلاییِ سرِ میله */
  content: ""; position: absolute; left: 50%; top: 0; width: calc(var(--pole, 2px) + 3px); aspect-ratio: 1;
  border-radius: 50%; transform: translate(-50%, -60%);
  background: radial-gradient(circle at 35% 30%, #FFF3B8, #F5B323 60%, #A9650A);
}
.lg-flag__cloth {
  position: absolute; left: var(--pole, 2px); top: 5%; width: var(--fw, 24px); aspect-ratio: 3 / 2;
  display: flex; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
.lg-flag__cloth i {
  flex: 1 0 0; min-width: 0; margin-right: -.4px;   /* هم‌پوشانیِ ریز تا بینِ نوارها درز نیفتد */
  background: url("../img/sg-flag.svg") no-repeat;
  background-size: calc(var(--n) * 100%) 100%;
  background-position: calc(var(--i) / (var(--n) - 1) * 100%) 0;
}

/* ---------- کاشیِ شبکه ---------- */
.hub-tile--league { --glow: rgba(245,179,35,.85); }
.hub-lgi { box-shadow: 0 12px 22px -10px rgba(245,179,35,.8), 0 2px 6px rgba(5,10,28,.3); }
.hub-lgi__ring {   /* حاشیهٔ رنگیِ چرخان دورِ آیکون */
  position: absolute; inset: -3px; z-index: -1; border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, #FFD766, #EF3340 50%, #3B82F6);
}
.hub-lgi__ring::before {
  content: ""; position: absolute; inset: -60%;
  background: conic-gradient(#FFD766, #EF3340, #FFFFFF, #3B82F6, #FFD766, #EF3340, #FFFFFF, #3B82F6, #FFD766);
  opacity: 0;
}
.hub-lgi__face {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: radial-gradient(90% 80% at 50% 28%, #2B4FC7 0%, #0D1E5C 50%, #060B24 100%);
}
.hub-lgi__face::before {   /* قرمزِ پرچم و آبیِ توبیت در دو گوشهٔ پایین */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 100% 100%, rgba(239,51,64,.62), transparent 70%),
              radial-gradient(60% 50% at 0 100%, rgba(0,89,251,.5), transparent 70%);
}
.hub-lgi__face::after {    /* همان براقیِ بالای بقیهٔ آیکون‌ها */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.05) 48%, transparent 50%);
}
.hub-lgi__rays {
  position: absolute; inset: -30%;
  background: repeating-conic-gradient(rgba(255,215,102,0) 0deg 10deg, rgba(255,215,102,.17) 10deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%); mask-image: radial-gradient(circle, #000 18%, transparent 66%);
}
.hub-lgi__face .lg-cup {   /* خودِ کاپ ۷۰٪ قابش است؛ قاب کمی از آیکون بیرون می‌زند تا کاپ پُر دیده شود */
  position: absolute; left: -4%; top: -3%; width: 108%; height: 108%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.hub-lgi__sheen {
  position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.55) 50%, transparent 66%);
}
/* پرچم روی لبهٔ بالاییِ آیکون کاشته شده و بیرون از آن در باد تکان می‌خورد. */
.hub-lgi__flag {
  position: absolute; z-index: 2; top: -14px; right: -13px; width: 27px; height: 19px;
  --pole: 2px; --fw: 24px; --amp: .12px; --step: .12s; --skew: 1.4deg;
}
.hub-lgi__spark {
  position: absolute; z-index: 2; width: 10px; height: 10px; background: #FFE9A3;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.hub-lgi__spark--a { left: -7px; bottom: 9px; }
.hub-lgi__spark--b { right: -6px; bottom: -3px; width: 8px; height: 8px; background: #fff; }
.hub-lgi__spark--c { left: 9px; bottom: -8px; width: 7px; height: 7px; background: #FF9AA2; }

.hub-badge--league { background: linear-gradient(135deg, #FF4D5E, #C81E3A); }
.hub-badge--league i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }

.hub-tile--league .hub-tile__label { font-weight: 900; color: #B4530A; }
[data-theme="dark"] .hub-tile--league .hub-tile__label { color: #FFD766; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hub-tile--league .hub-tile__label, .hub-tile--league:hover .hub-tile__label {
    background: linear-gradient(100deg, #B45309 0%, #DC2626 35%, #1D4ED8 65%, #B45309 100%) 0 0 / 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  [data-theme="dark"] .hub-tile--league .hub-tile__label, [data-theme="dark"] .hub-tile--league:hover .hub-tile__label {
    background-image: linear-gradient(100deg, #FFE08A 0%, #FFFFFF 30%, #FF9AA2 55%, #93C5FD 78%, #FFE08A 100%);
    color: transparent;
  }
}
@media (max-width: 374px) { .hub-lgi__ring { border-radius: 20px; } }
@media (min-width: 600px) { .hub-lgi__ring { border-radius: 24px; } .hub-lgi__flag { top: -15px; right: -14px; } }
@media (min-width: 1024px) { .hub-lgi__ring { border-radius: 26px; } }

/* ---------- بنرِ تبلیغاتی ---------- */
.hub-lg {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px;
  min-height: 232px; padding: 18px 16px 18px 2px; border-radius: 26px; color: #fff;
  background-color: #050A1C;
  background-image: radial-gradient(120% 90% at 0% -10%, rgba(0,89,251,.6) 0%, transparent 55%),
                    radial-gradient(90% 80% at 100% 0%, rgba(239,51,64,.48) 0%, transparent 58%),
                    linear-gradient(180deg, #050A1C 0%, #081233 62%, #0A1A4A 100%);
  box-shadow: 0 26px 50px -30px rgba(0,89,251,.95);
}
.hub-lg::before {   /* حاشیهٔ نوریِ قرمز/سفید/آبی که دورِ بنر می‌گردد */
  content: ""; position: absolute; inset: 0; z-index: 1; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, #EF3340, #FFFFFF, #0059FB, #FFD766, #EF3340) 0 0 / 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: .8;
}
.hub-lg__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.hub-lg__beam {
  position: absolute; inset: -40% auto auto -10%; width: 60%; height: 180%;
  background: conic-gradient(from 150deg at 30% 30%, transparent 0deg, rgba(96,165,250,.22) 22deg, transparent 46deg);
}
.hub-lg__stars {   /* سمتِ متن کم‌رنگ می‌شوند تا کنارِ حروف مثلِ نقطه دیده نشوند */
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, rgba(0,0,0,.22) 62%); mask-image: linear-gradient(90deg, #000 30%, rgba(0,0,0,.22) 62%);
}
.hub-lg__stars i {
  position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; border-radius: 50%;
  background: #fff; opacity: .55;
}
.hub-lg__sky {
  position: absolute; inset: auto 0 0 0; width: 100%; height: 92px; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, rgba(0,0,0,.3)); mask-image: linear-gradient(90deg, #000 40%, rgba(0,0,0,.3));
}

.hub-lg__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-inline-start: 4px; }
.hub-lg__kicker {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 11px; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.36); border: 1px solid rgba(255,255,255,.26);
  color: #FFD766; font-size: .68rem; font-weight: 800; white-space: nowrap;
}
.hub-lg__dot { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #FF4D5E; }
.hub-lg__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #FF4D5E; opacity: 0; }
.hub-lg__sponsor { display: none; padding-inline-start: 8px; border-inline-start: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.78); font-weight: 700; }
.hub-lg__sponsor b { color: #fff; font-weight: 900; }
.hub-lg__title { margin: 0; font-size: 1.36rem; font-weight: 900; line-height: 1.5; color: #fff; }
.hub-lg__title span { color: #FFD766; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hub-lg__title {
    background: linear-gradient(100deg, #FFFFFF 0%, #FFD9DC 26%, #FF6B76 48%, #FFFFFF 70%, #9CC2FF 100%) 0 0 / 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hub-lg__title span {
    background: linear-gradient(100deg, #FFE9A3 0%, #F5B323 45%, #FFF4BF 70%, #F5B323 100%) 0 0 / 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.hub-lg__wide { display: none; }
.hub-lg__en { display: none; margin: -5px 0 0; font-size: .58rem; font-weight: 700; letter-spacing: .32em; color: rgba(255,255,255,.55); }
.hub-lg__text {
  margin: 0; max-width: 460px; font-size: .74rem; line-height: 1.9; font-weight: 500; color: rgba(255,255,255,.84);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.hub-lg__live { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 2px; }
.hub-lg__live[hidden], .hub-lg__clock[hidden], .hub-lg__count[hidden], .hub-lg__until[hidden] { display: none; }
.hub-lg__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; font-size: .64rem; font-weight: 800; color: rgba(255,255,255,.72); }
.hub-lg__count { color: #A7F3D0; }
.hub-lg__until + .hub-lg__count::before { content: "·"; margin-inline-end: 8px; color: rgba(255,255,255,.5); }
.hub-lg__clock { display: flex; gap: 4px; }
.hub-lg__unit {
  display: flex; flex-direction: column; align-items: center; min-width: 35px; padding: 4px 4px 3px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.hub-lg__unit b { font-size: .98rem; font-weight: 900; line-height: 1.35; font-variant-numeric: tabular-nums; }
.hub-lg__unit small { font-size: .52rem; font-weight: 700; line-height: 1.5; color: rgba(255,255,255,.62); }

.hub-lg__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 6px; }
.hub-lg__cta {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 3px;
  padding: 11px 20px 11px 13px; border-radius: var(--radius-pill);
  background: linear-gradient(120deg, #FFE9A3 0%, #F7B733 48%, #E58A00 100%); color: #1B1200;
  font-size: .86rem; font-weight: 900; white-space: nowrap;
  box-shadow: 0 14px 28px -12px rgba(245,179,35,.95), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform var(--trans), box-shadow var(--trans);
}
.hub-lg__cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.7) 50%, transparent 68%);
}
.hub-lg__cta svg { width: 17px; height: 17px; transition: transform var(--trans); }
.hub-lg__cta:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -12px rgba(245,179,35,1), inset 0 1px 0 rgba(255,255,255,.6); }
.hub-lg__cta:hover svg { transform: translateX(-3px); }
.hub-lg__cta:focus-visible, .hub-lg__more:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hub-lg__more {
  display: none; padding: 9px 14px; border-radius: var(--radius-pill);
  background: rgba(5,10,28,.6); border: 1px solid rgba(255,255,255,.26);
  color: #fff; font-size: .74rem; font-weight: 800; white-space: nowrap;
  transition: background var(--trans), border-color var(--trans);
}
.hub-lg__more:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }

/* تصویرِ بنر: کاپِ چرخان روی هالهٔ طلایی، پرچمِ مواج پشتِ سرش و کاغذرنگی. */
.hub-lg__art { position: relative; width: 132px; height: 178px; flex: none; }
.hub-lg__halo {
  position: absolute; left: 58%; top: 60%; width: 128%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,215,102,.5) 0%, rgba(255,215,102,.14) 40%, transparent 68%);
}
.hub-lg__rays {
  position: absolute; left: 58%; top: 60%; width: 170%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: repeating-conic-gradient(rgba(255,215,102,0) 0deg 9deg, rgba(255,215,102,.2) 9deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%); mask-image: radial-gradient(circle, #000 12%, transparent 62%);
}
.hub-lg__flag {
  position: absolute; left: 3%; top: 6%; width: 50%; height: 80%;
  --pole: 3px; --fw: calc(100% - 3px); --amp: .14px; --step: .05s; --skew: .66deg;
}
.hub-lg__trophy { position: absolute; left: 14%; bottom: 5%; width: 88%; aspect-ratio: 1; filter: drop-shadow(0 12px 16px rgba(0,0,0,.5)); }
.hub-lg__floor {
  position: absolute; left: 20%; right: -6%; bottom: 3%; height: 11%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,215,102,.6), rgba(255,215,102,0) 70%);
}
.hub-lg__confetti { position: absolute; inset: 0; overflow: hidden; }
.hub-lg__confetti i {
  position: absolute; left: var(--x); top: -8%; width: 5px; height: 9px; border-radius: 1.5px;
  background: var(--c); opacity: 0;
}
.hub-lg__orbit { --orb: 52px; position: absolute; left: 58%; top: 54%; width: 0; height: 0; transform: scaleY(.3); }
.hub-lg__orbit i {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: #FFF3B8; box-shadow: 0 0 10px 2px rgba(255,215,102,.9); opacity: 0;
}

@media (max-width: 374px) {
  .hub-lg { min-height: 214px; padding: 16px 12px 16px 0; }
  .hub-lg__art { width: 104px; height: 150px; }
  .hub-lg__orbit { --orb: 42px; }
  .hub-lg__title { font-size: 1.2rem; }
  .hub-lg__text { display: none; }
}
@media (min-width: 600px) {
  .hub-lg { min-height: 264px; padding: 26px 34px 26px 16px; gap: 14px; }
  .hub-lg__copy { gap: 8px; }
  .hub-lg__sponsor, .hub-lg__more { display: inline-flex; }
  .hub-lg__sponsor { gap: 4px; }
  .hub-lg__en { display: block; }
  .hub-lg__wide { display: inline; }
  .hub-lg__title { font-size: 1.9rem; line-height: 1.4; }
  .hub-lg__text { font-size: .86rem; }
  .hub-lg__live { flex-direction: row; align-items: center; gap: 12px; margin-top: 4px; }
  .hub-lg__meta { order: 2; font-size: .72rem; flex-direction: column; align-items: flex-start; }
  .hub-lg__until + .hub-lg__count::before { content: none; }
  .hub-lg__clock { gap: 6px; }
  .hub-lg__unit { min-width: 46px; padding: 6px 6px 4px; border-radius: 13px; }
  .hub-lg__unit b { font-size: 1.24rem; }
  .hub-lg__unit small { font-size: .58rem; }
  .hub-lg__cta { padding: 13px 26px 13px 18px; font-size: .94rem; }
  .hub-lg__art { width: 214px; height: 236px; }
  .hub-lg__orbit { --orb: 84px; }
  .hub-lg__sky { height: 120px; }
  .hub-lg__flag { --pole: 4px; --fw: calc(100% - 4px); --amp: .21px; --skew: .6deg; }
  .hub-lg__confetti i { width: 6px; height: 11px; }
}
@media (min-width: 900px) {
  .hub-lg { min-height: 300px; padding: 30px 44px 30px 30px; }
  .hub-lg__title { font-size: 2.3rem; }
  .hub-lg__art { width: 262px; height: 270px; }
  .hub-lg__orbit { --orb: 102px; }
  .hub-lg__sky { height: 140px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* ── کاپِ چرخان ──
     بدنهٔ کاپ متقارن است و با چرخیدن عوض نمی‌شود؛ چرخش را سه چیز نشان می‌دهد:
     دسته‌ها که به پهلو می‌رسند و جمع می‌شوند (|cos|)، ستارهٔ روی بدنه که با
     x = R·sin و پهنای cos از یک لبه به لبهٔ دیگر می‌رود (و ستارهٔ پشتی نیم‌دور
     بعد می‌آید) و برقِ نوری که هر نیم‌دور از روی بدنه رد می‌شود. منحنی‌های
     cubic-bezier همان ربع‌موج‌های سینوسی‌اند. */
  .lg-cup { --spin: 2.8s; }
  .lg-cup__handles { transform-box: fill-box; transform-origin: center; animation: lgHandles var(--spin) infinite; }
  .lg-cup__mark { animation: lgMarkX var(--spin) infinite, lgMarkO var(--spin) linear infinite; }
  .lg-cup__mark-in { transform-box: fill-box; transform-origin: center; animation: lgMarkS var(--spin) infinite; }
  .lg-cup__mark--b, .lg-cup__mark--b .lg-cup__mark-in { animation-delay: calc(var(--spin) / -2); }
  .lg-cup__shine { opacity: .7; animation: lgShine calc(var(--spin) / 2) linear infinite; }
  @keyframes lgHandles {
    0%, 50%, 100% { transform: scaleX(.07); animation-timing-function: cubic-bezier(.61,1,.88,1); }
    25%, 75% { transform: scaleX(1); animation-timing-function: cubic-bezier(.12,0,.39,0); }
  }
  @keyframes lgMarkX {
    0% { transform: translateX(-11px); animation-timing-function: cubic-bezier(.12,0,.39,0); }
    25% { transform: translateX(0); animation-timing-function: cubic-bezier(.61,1,.88,1); }
    50%, 100% { transform: translateX(11px); }
  }
  @keyframes lgMarkS {
    0% { transform: scaleX(0); animation-timing-function: cubic-bezier(.61,1,.88,1); }
    25% { transform: scaleX(1); animation-timing-function: cubic-bezier(.12,0,.39,0); }
    50%, 100% { transform: scaleX(0); }
  }
  @keyframes lgMarkO { 0%, 50%, 100% { opacity: 0; } 5%, 45% { opacity: 1; } }
  @keyframes lgShine { from { transform: translateX(-16px); } 70%, to { transform: translateX(32px); } }

  /* ── پرچم ── نوارِ i با دامنهٔ i·amp بالا و پایین می‌رود و --step از نوارِ قبلی
     عقب‌تر است (موجِ رونده؛ دامنه کنارِ میله صفر است). کجیِ هر نوار شیبِ همان
     موج است — یک‌چهارم دوره جلوتر از جابه‌جایی — تا لبهٔ نوارها روی هم بنشیند و
     پارچه پله‌پله دیده نشود؛ برای همین جابه‌جایی با translate و کجی با transform
     است. --skew از amp، step و پهنای نوار درمی‌آید (tan = i·amp·ω·step / پهنا). */
  .lg-flag__cloth i {
    transform-origin: 0 50%;
    animation: lgWaveY 1.5s ease-in-out infinite, lgWaveK 1.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * var(--step) * -1), calc(var(--i) * var(--step) * -1 - .375s);
  }
  @keyframes lgWaveY {
    0%, 100% { translate: 0 calc(var(--i) * var(--amp) * -1); }
    50% { translate: 0 calc(var(--i) * var(--amp)); }
  }
  @keyframes lgWaveK {
    0%, 100% { transform: skewY(calc(var(--i) * var(--skew) * -1)); filter: brightness(1.07); }
    50% { transform: skewY(calc(var(--i) * var(--skew))); filter: brightness(.9); }
  }

  /* ── کاشی ── */
  .hub-lgi { animation: lgGlow 2.8s ease-in-out infinite; }
  .hub-lgi__ring::before { opacity: 1; animation: lgSpin 3.6s linear infinite; }
  .hub-lgi__rays { animation: lgSpin 16s linear infinite; }
  .hub-lgi__face .lg-cup { animation: lgBob 2.8s ease-in-out infinite; }
  .hub-lgi__sheen { animation: lgSheen 3.8s ease-in-out infinite; }
  .hub-lgi__spark { animation: lgTwinkle 2.3s ease-in-out infinite; }
  .hub-lgi__spark--b { animation-delay: -.8s; }
  .hub-lgi__spark--c { animation-delay: -1.5s; }
  .hub-badge--league { animation: lgBadge 2.4s ease-in-out infinite; }
  .hub-badge--league i { animation: hubBlink 1.2s ease-in-out infinite; }
  .hub-tile--league .hub-tile__label { animation: lgText 6s linear infinite; }

  /* ── بنر ── */
  .hub-lg.is-off, .hub-lg.is-off *, .hub-lg.is-off *::before, .hub-lg.is-off *::after { animation-play-state: paused !important; }
  .hub-lg::before { animation: lgBorder 6s linear infinite; }
  .hub-lg__beam { animation: lgBeam 9s ease-in-out infinite; }
  .hub-lg__stars i { animation: lgStar 3.2s ease-in-out var(--d) infinite; }
  .lg-win { animation: lgWin 5s steps(2, end) var(--d, 0s) infinite; }
  .lg-wheel { transform-box: fill-box; transform-origin: center; animation: lgSpin 46s linear infinite; }
  .lg-water { animation: lgWater 6s ease-in-out var(--d, 0s) infinite; }
  .hub-lg__dot::after { animation: lgPing 1.5s ease-out infinite; }
  .hub-lg__title, .hub-lg__title span { animation: lgText 7s linear infinite; }
  .hub-lg__cta { animation: lgCta 2.4s ease-in-out infinite; }
  .hub-lg__cta::after { animation: lgSheen 3.2s ease-in-out infinite; }
  .hub-lg__cta svg { animation: lgNudge 1.2s ease-in-out infinite; }
  .hub-lg__halo { animation: lgHalo 3.4s ease-in-out infinite; }
  .hub-lg__rays { animation: lgSpin 24s linear infinite; }
  .hub-lg__trophy { animation: lgFloat 4.2s ease-in-out infinite; }
  .hub-lg__floor { animation: lgFloor 4.2s ease-in-out infinite; }
  .hub-lg__confetti i { animation: lgConfetti 4.2s linear var(--d) infinite; }
  .hub-lg__orbit i { animation: lgOrbit 5s linear infinite, lgOrbitO 5s ease-in-out infinite; }
  .hub-lg__orbit i:nth-child(2) { animation-delay: -1.66s, -1.66s; background: #fff; }
  .hub-lg__orbit i:nth-child(3) { animation-delay: -3.33s, -3.33s; background: #FF9AA2; box-shadow: 0 0 10px 2px rgba(239,51,64,.9); }

  @keyframes lgSpin { to { transform: rotate(360deg); } }
  @keyframes lgGlow {
    0%, 100% { box-shadow: 0 12px 22px -10px rgba(245,179,35,.8), 0 0 0 0 rgba(239,51,64,0), 0 2px 6px rgba(5,10,28,.3); }
    50% { box-shadow: 0 16px 28px -8px rgba(239,51,64,.85), 0 0 20px 3px rgba(245,179,35,.6), 0 2px 6px rgba(5,10,28,.3); }
  }
  @keyframes lgBob { 0%, 100% { transform: translateY(1px) scale(1); } 50% { transform: translateY(-1.5px) scale(1.05); } }
  @keyframes lgSheen { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
  @keyframes lgTwinkle { 0%, 100% { transform: scale(.3) rotate(0deg); opacity: .2; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
  @keyframes lgBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
  @keyframes lgText { to { background-position: -220% 0; } }
  @keyframes lgBorder { to { background-position: -300% 0; } }
  @keyframes lgBeam { 0%, 100% { transform: rotate(-6deg); opacity: .55; } 50% { transform: rotate(8deg); opacity: 1; } }
  @keyframes lgStar { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .9; transform: scale(1.3); } }
  @keyframes lgWin { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
  @keyframes lgWater { 0%, 100% { transform: translateX(0); opacity: .35; } 50% { transform: translateX(14px); opacity: .75; } }
  @keyframes lgPing { from { opacity: .7; transform: scale(1); } 80%, to { opacity: 0; transform: scale(3); } }
  @keyframes lgCta {
    0%, 100% { box-shadow: 0 14px 28px -12px rgba(245,179,35,.95), 0 0 0 0 rgba(255,215,102,.5), inset 0 1px 0 rgba(255,255,255,.6); }
    50% { box-shadow: 0 16px 30px -10px rgba(245,179,35,1), 0 0 0 7px rgba(255,215,102,0), inset 0 1px 0 rgba(255,255,255,.6); }
  }
  @keyframes lgNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
  @keyframes lgHalo { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .85; } 50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; } }
  @keyframes lgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  @keyframes lgFloor { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .6; } }
  @keyframes lgConfetti {
    0% { transform: translateY(0) rotate(var(--r)); opacity: 0; }
    8% { opacity: .95; }
    85% { opacity: .9; }
    100% { transform: translateY(300px) rotate(calc(var(--r) + 560deg)); opacity: 0; }
  }
  /* مدارِ بیضی: والد با scaleY دایره را بیضی می‌کند و خودِ نقطه همان‌قدر در جهتِ
     عکس کشیده می‌شود تا گرد بماند؛ در نیمهٔ پشتیِ مدار کم‌رنگ می‌شود. */
  @keyframes lgOrbit {
    from { transform: rotate(0deg) translateX(var(--orb)) rotate(0deg) scaleY(3.33); }
    to { transform: rotate(360deg) translateX(var(--orb)) rotate(-360deg) scaleY(3.33); }
  }
  @keyframes lgOrbitO { 0%, 50%, 100% { opacity: .8; } 25% { opacity: 1; } 75% { opacity: .15; } }
}

/* ==========================================================================
   صفحهٔ «پیدا نشد» (۴۰۴)
   ========================================================================== */
.nf {
  max-width: 620px; margin: 0 auto; padding: 48px 20px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.nf__badge {
  width: 84px; height: 84px; display: grid; place-items: center; border-radius: 26px;
  background: linear-gradient(135deg, rgba(var(--brand-rgb), .16), rgba(33,78,138,.14));
  color: var(--brand-dark); border: 1px solid var(--border);
}
[data-theme="dark"] .nf__badge { color: var(--brand-light); }
.nf__badge svg { width: 40px; height: 40px; }
.nf__title { margin: 6px 0 0; font-size: 1.24rem; font-weight: 900; color: var(--heading); line-height: 1.6; }
.nf__text { margin: 0; font-size: .82rem; line-height: 2.05; font-weight: 500; color: var(--text-soft); }
.nf__cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.nf__links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.nf__links a {
  padding: 7px 14px; border-radius: var(--radius-pill); background: var(--chip);
  font-size: .74rem; font-weight: 700; color: var(--text-soft); transition: color var(--trans), background var(--trans);
}
.nf__links a:hover { color: var(--heading); background: var(--surface-2); }