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

   زبانِ رنگیِ عمدیِ این صفحه — هر رنگ یک معنا دارد و جای دیگری استفاده نمی‌شود:
     • سرمه‌ای برند (#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; }

@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; gap: 14px; padding: 20px 22px 24px;
  border-radius: 26px; color: #fff; min-height: 232px;
  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__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 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.hub-growth__figures > div { min-width: 0; }
.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__curve {
  position: absolute; z-index: -1; inset-inline: 0; inset-block-end: 0; height: 96px; color: #6FF0BE;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%);
}
.hub-growth.is-down .hub-growth__curve { color: #FF9AA2; }
.hub-area { display: block; width: 100%; height: 100%; }
.hub-growth__cta { align-self: flex-start; margin-top: 2px; }

@media (min-width: 720px) {
  .hub-growth { padding: 26px 28px 28px; }
  .hub-growth__pct strong { font-size: 2.7rem; }
  .hub-growth__amount strong { font-size: 1.5rem; }
  .hub-growth__curve { 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; }
}

/* ==========================================================================
   صفحهٔ «پیدا نشد» (۴۰۴)
   ========================================================================== */
.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); }