/* ============================================================
   YAR Design System — v3.0
   سبز برند #8FE04A فقط برای CTA/Active/Status مثبت.
   پس‌زمینه سفید، سطوح خاکستری خیلی روشن، متن گرافیت.
   RTL کامل، Dark Mode خودکار، reduced-motion.
   ============================================================ */

:root {
  /* ---------- سبز برند (محدود و کنترل‌شده) ---------- */
  --brand:            #8FE04A;
  --brand-2:          #A8E85C;
  --brand-hover:      #7AC636;
  --brand-soft:       #F1F9E7;
  --brand-line:       #CFEFAE;
  --on-brand:         #14210A;          /* متن روی سبز — کنتراست ۹+ */

  /* مع legacy neon حفظ می‌شود تا هیچ کد فعلی نشکند */
  --neon: var(--brand); --neon-hover: var(--brand-hover); --on-neon: var(--on-brand);
  --neon-soft: var(--brand-soft); --neon-line: var(--brand-line);

  /* نام‌های استفاده‌شده در مارک‌آپ قدیمی (قبلاً تعریف نشده بودند) */
  --gold: #8A6220;  --gold-soft: #F7F1E6;  --green-soft: #F1F9E7;  --green-line: #CFEFAE;

  /* ---------- رنگ پایه ---------- */
  --color-primary:        #357A1B;   /* سبز برای متن/لینک — کنتراست ۵.۳:۱ (AA) */
  --color-primary-soft:   #F1F9E7;
  --color-primary-hover:  #2F6E16;   /* ۶.۲:۱ */
  --brand-text:           #357A1B;   /* متن/لینک سبز — هرگز --brand روی سفید */
  --color-accent:         #8A6220;   /* طلایی — کنتراست ۴.۸:۱ روی #f7f1e6 */

  /* ---------- سطوح ---------- */
  --color-background:     #FFFFFF;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #F6F8FA;
  --color-surface-sunken-2:#EEF2F5;

  /* ---------- متن ---------- */
  --color-text:           #1A222B;   /* گرافیت تیره */
  --color-text-muted:     #5A6B7B;   /* blue-gray */
  --color-text-subtle:    #64748B;   /* ۴.۸:۱ — پیش‌تر ۲.۹:۱ بود و برای متن ۱۲px رد می‌شد */
  --color-border:         #E9EDF0;
  --color-border-strong:  #D6DDE3;

  /* ---------- وضعیت (نرم) ---------- */
  --color-success:        #217A33;   /* ۵.۴:۱ */
  --color-success-soft:   #EAF7EC;
  --color-warning:        #8A6414;   /* ۵.۴:۱ */
  --color-warning-soft:   var(--color-warning-soft, #FBF3E0);
  --color-danger:         #C4453B;   /* ۴.۹:۱ */
  --color-danger-soft:    #FBEBE9;
  --color-info:           #2A63B4;   /* ۵.۹:۱ */
  --color-info-soft:      #EAF1FC;

  /* ---------- فاصله‌گذاری ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;

  /* ---------- گوشه ---------- */
  --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 16px;  --radius-xl: 20px;

  /* ---------- سایه ---------- */
  --shadow-sm: 0 1px 2px rgba(16,24,32,.05);
  --shadow-md: 0 2px 8px rgba(16,24,32,.06), 0 1px 2px rgba(16,24,32,.04);
  --shadow-lg: 0 8px 24px rgba(16,24,32,.10);

  /* ---------- تایپوگرافی ---------- */
  --font-family: 'Vazirmatn', 'Estedad', 'IRANSans', -apple-system, system-ui, Tahoma, sans-serif;
  --font-numeric: 'Vazirmatn', 'Estedad', system-ui, sans-serif;
  --text-xs: 12px;  --text-sm: 13px;  --text-base: 15px;
  --text-lg: 17px;  --text-xl: 20px;  --text-2xl: 26px;  --text-3xl: 34px;
  --leading-tight: 1.35;  --leading-normal: 1.7;  --leading-relaxed: 1.9;
  --tracking-tight: -0.02em;

  /* ---------- حرکت ---------- */
  --ease: cubic-bezier(.32,.72,0,1);
  --duration-fast: 160ms;  --duration-base: 220ms;  --duration-slow: 400ms;

  /* ---------- چیدمان ---------- */
  --container: 1120px;
  --nav-height: 72px;          /* بند ۸: هدر ۷۲px */
  --dash-sidebar-w: 248px;

  /* ---------- مستعارهای ya-* (برای سبک جدید) ----------
   * این متغیرها روی همان رنگ‌های پایه نگاشت می‌شوند تا
   * تم سفید همه‌جا یکدست باشد. */
  --ya-bg:                     var(--color-background);
  --ya-surface:                var(--color-surface);
  --ya-surface-2:              var(--color-surface-sunken);
  --ya-surface-3:              var(--color-surface-sunken-2);
  --ya-text:                   var(--color-text);
  --ya-text-muted:             var(--color-text-muted);
  --ya-text-subtle:            var(--color-text-subtle);
  --ya-border:                 var(--color-border);
  --ya-brand-soft:             var(--brand-soft);
  --ya-brand-strong:           var(--color-primary);
  --ya-brand-border:           var(--brand-line);
  --ya-brand-glow:             rgba(143, 224, 74, .25);
  --ya-danger:                 var(--color-danger);
  --ya-danger-soft:            var(--color-danger-soft);
  --ya-danger-border:          #F0CFCB;
  --ya-success:                var(--color-success);
  --ya-shadow-sm:              var(--shadow-sm);
  --ya-shadow-lg:              var(--shadow-lg);
  --ya-radius-sm:              var(--radius-sm);
  --ya-radius-md:              var(--radius-md);
  --ya-radius-lg:              var(--radius-lg);
  --ya-radius-xl:              var(--radius-xl);
  --ya-text-xs:                var(--text-xs);
  --ya-text-sm:                var(--text-sm);
  --ya-text-base:              var(--text-base);
  --ya-text-lg:                var(--text-lg);
  --ya-text-xl:                var(--text-xl);
  --ya-text-2xl:               var(--text-2xl);
  --ya-space-2:                var(--space-2);
  --ya-space-3:                var(--space-3);
  --ya-space-4:                var(--space-4);
  --ya-space-5:                var(--space-5);
  --ya-space-6:                var(--space-6);

  /* ---------- z-index ---------- */
  --z-sticky: 900;
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}

/* ==================== تم روشن ثابت ====================
 * طبق درخواست: سایت همیشه تم سفید دارد — Dark Mode خودکار غیرفعال.
 * اگر بعداً لازم شد، با کلاس .dark روی <html> فعال می‌شود.
 */
html:not(.dark) { color-scheme: light; }
html.dark { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  /* غیرفعال — تم سفید ثابت است مگر اینکه html.dark تنظیم شود */
  html:not(.dark) :root {
    --color-background:     #FFFFFF;
    --color-surface:        #FFFFFF;
    --color-surface-raised: #FFFFFF;
    --color-surface-sunken: #F6F8FA;
    --color-surface-sunken-2:#EEF2F5;
    --color-text:           #1A222B;
    --color-text-muted:     #5A6B7B;
    --color-text-subtle:    #8B99A8;
    --color-border:         #E9EDF0;
    --color-border-strong:  #D6DDE3;
    --color-primary:        #3D8C1F;
    --color-primary-soft:   #F1F9E7;
    --color-primary-hover:  #2F6E16;
    --brand-soft:           #F1F9E7;
    --brand-line:           #CFEFAE;
    --color-success-soft:   #EAF7EC;
    --color-warning-soft:   var(--color-warning-soft, #FBF3E0);
    --color-danger-soft:    #FBEBE9;
    --color-info-soft:      #EAF1FC;
    --shadow-sm: 0 1px 2px rgba(16,24,32,.05);
    --shadow-md: 0 2px 8px rgba(16,24,32,.06), 0 1px 2px rgba(16,24,32,.04);
    --shadow-lg: 0 8px 24px rgba(16,24,32,.10);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip (نه hidden) تا position: sticky روی هدر کار کند —
     hidden یک scroll container می‌سازد و sticky را می‌شکند */
  overflow-x: clip;
}

html { overflow-x: clip; }

/* صفحات جدید یار — پس‌زمینه سفید یکدست */
.ya-page { background: var(--color-background); min-height: 100vh; }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }

/* ---------- تیترها (سلسله‌مراتب روشن — بند ۵۲) ---------- */
h1, h2, h3, h4, h5 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
h1 { font-size: clamp(28px, 4.5vw, var(--text-3xl)); font-weight: 800; }
h2 { font-size: clamp(22px, 3vw, var(--text-2xl)); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }

p { color: var(--color-text-muted); line-height: var(--leading-relaxed); }

/* ---------- دکمه‌ها (بند ۵۲ — restrained) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 11px 22px; border-radius: 50px; border: none; cursor: pointer;
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  transition: all var(--duration-base) var(--ease);
  text-decoration: none;
}
.btn-primary { background: var(--neon, var(--brand, #8FE04A)); color: var(--on-neon, var(--on-brand, #14210A)); }
.btn-primary:hover { background: var(--neon-hover, var(--brand-hover, #7AC636)); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-border-strong); }
.btn-outline:hover { border-color: var(--neon, var(--brand, #8FE04A)); background: var(--color-primary-soft); }
.btn-outline.active { border-color: var(--neon, var(--brand, #8FE04A)); background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; }
.btn-ghost { background: transparent; color: var(--color-text-muted); }
.btn-ghost:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.btn-sm { padding: 8px 16px; font-size: var(--text-xs); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- کارت‌ها (بند ۵۲ — rounded but restrained) ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--duration-base) var(--ease);
}
a.card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.static-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }

/* ---------- فرم (بند ۵۲ — precise) ---------- */
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); color: var(--color-text); }
.form-group .req { color: var(--color-danger); }
.form-control {
  width: 100%; padding: 12px 16px; font-size: var(--text-base);
  background: var(--color-surface); color: var(--color-text);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease); outline: none;
}
.form-control:focus { border-color: var(--neon, var(--brand, #8FE04A)); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.form-control::placeholder { color: var(--color-text-subtle); }
textarea.form-control { min-height: 110px; resize: vertical; line-height: var(--leading-relaxed); }

/* ---------- شبکه ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

/* ---------- نشان‌ها ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 50px;
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.badge-green { background: var(--color-primary-soft); color: var(--color-primary); }
.badge-gold  { background: #f7f1e6; color: var(--color-accent); }
.badge-gray  { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.badge-red   { background: #f9eeed; color: var(--color-danger); }

/* ---------- پرش به محتوای اصلی (a11y) ---------- */
.skip-link {
  position: absolute; inset-inline-start: 0; top: -100px; z-index: 2000;
  padding: 12px 20px; background: var(--brand, #8FE04A); color: var(--on-brand, #14210A);
  font-weight: 700; border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);
  text-decoration: none; transition: top var(--duration-fast, 160ms) var(--ease, ease);
}
.skip-link:focus { top: 0; outline: 3px solid var(--color-primary, #357A1B); outline-offset: 2px; }
html { scroll-padding-top: calc(var(--nav-height, 72px) + 16px); }


/* ---------- کلاس‌های استفاده‌شده در مارک‌آپ قدیمی (قبلاً بدون استایل) ---------- */
.ya-h-sm { font-size: clamp(18px, 2.4vw, 21px); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.icon-box {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand-text);
  font-size: 22px; line-height: 1; flex: none;
}
.avatar {
  width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-text); font-weight: 800; font-size: 16px; flex: none;
}
.nav-actions { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---------- جداول (بند ۵۲ — clean) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
table th, table td { padding: 13px 18px; text-align: start; font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
table th { background: var(--color-surface-sunken); font-weight: 600; font-size: var(--text-xs); color: var(--color-text-muted); text-transform: none; }
table tr:last-child td { border-bottom: none; }
table tbody tr { transition: background var(--duration-fast) var(--ease); }
table tbody tr:hover { background: var(--color-surface-sunken); }

/* ---------- ناوبری (بند ۵۲ — minimal navigation) ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 900;
  background: rgba(251,252,251,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: var(--nav-height); }
.nav-brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
.nav-brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--neon, var(--brand, #8FE04A)); display: grid; place-items: center; color: var(--on-neon, var(--on-brand, #14210A)); font-size: 16px; }
.nav-links { display: flex; align-items: center; gap: var(--space-1); }
.nav-links a { padding: 8px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); transition: all var(--duration-fast) var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--color-text); background: var(--color-surface-sunken); }

/* ---------- منوی موبایل .site-nav (قبلاً در ≤1024px کلاً حذف می‌شد) ---------- */
.nav-burger {
  display: none; width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
}
.nav-burger:hover { background: var(--color-surface-sunken); }
.nav-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(16,24,32,.45);
  z-index: 998; opacity: 0; visibility: hidden;
  transition: opacity var(--duration-base) var(--ease), visibility var(--duration-base);
}
.nav-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.nav-drawer {
  position: fixed; top: 0; inset-inline-end: 0; height: 100dvh; width: min(320px, 88vw);
  background: var(--color-surface); border-inline-start: 1px solid var(--color-border);
  z-index: 999; padding: var(--space-5) var(--space-4); overflow-y: auto;
  box-shadow: var(--shadow-lg);
  /* از transform استفاده نمی‌کنیم: در RTL کلیک‌ها را می‌بلعد (بند مستندشده در ya-dash) */
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-base) var(--ease), visibility var(--duration-base);
}
.nav-drawer.is-open { opacity: 1; visibility: visible; }
.nav-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.nav-drawer__close { width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.nav-drawer ul { list-style: none; display: grid; gap: var(--space-1); margin: 0; padding: 0; }
.nav-drawer ul a {
  display: block; padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: var(--text-base); font-weight: 500; color: var(--color-text); min-height: 44px;
}
.nav-drawer ul a:hover, .nav-drawer ul a.active { background: var(--color-surface-sunken); color: var(--color-primary); }
.nav-drawer__actions { display: grid; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.nav-drawer__actions .btn { justify-content: center; min-height: 44px; }

/* ---------- بخش‌ها (بند ۵۲ — strong whitespace) ---------- */
.section { padding: var(--space-8) 0; }
.section-alt { background: var(--color-surface-sunken); }
.section-head { max-width: 620px; margin: 0 auto var(--space-7); text-align: center; }
.section-head .eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--space-3); }
.section-head p { margin-top: var(--space-3); }

/* ---------- ایالت خالی ---------- */
.empty-state { text-align: center; padding: var(--space-7); color: var(--color-text-muted); }
.empty-state i { font-size: 28px; display: block; margin-bottom: var(--space-3); opacity: .5; }

/* ---------- اسکلتون بارگذاری ---------- */
.skeleton { border-radius: var(--radius-md); background: linear-gradient(90deg, var(--color-surface-sunken) 0%, #eaefeb 50%, var(--color-surface-sunken) 100%); background-size: 200px 100%; animation: skeleton 1.4s ease-in-out infinite; }
@keyframes skeleton { 0% { background-position: 0 0; } 100% { background-position: 200px 0; } }

/* ---------- اعداد مالی — خوانا و هم‌عرض ---------- */
.num, .kpi strong, .stat-num, .price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss02" on, "tnum" on;
  letter-spacing: 0;
  direction: ltr;
  unicode-bidi: embed;
}

/* ---------- فوکس قابل‌مشاهده (بند ۵۲ — Accessibility) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.dark :focus-visible { outline-color: var(--brand); }

/* ---------- انیمیشن ورود (بند ۵۲ — subtle) ---------- */
.reveal { opacity: 1; transform: none; }
body.js-ready .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); }
body.js-ready .reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- فوتر ---------- */
.site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-7) 0 var(--space-5); margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-7); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.footer-grid h4 { font-size: var(--text-sm); margin-bottom: var(--space-4); }
.footer-links { display: grid; gap: var(--space-3); }
.footer-links a { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--duration-fast) var(--ease); }
.footer-links a:hover { color: var(--color-primary); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-subtle); flex-wrap: wrap; }

/* ---------- پنل ---------- */
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.panel-head h3 { font-size: var(--text-base); font-weight: 600; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.kpi .k-ic { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; font-size: 17px; margin-bottom: var(--space-3); }
.kpi strong { display: block; font-size: var(--text-xl); font-weight: 700; letter-spacing: var(--tracking-tight); }
.kpi span { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- سایدبار ---------- */
.dash-wrap { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-5); padding: var(--space-5) 0; }
.sidebar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); height: fit-content; position: sticky; top: calc(var(--nav-height) + var(--space-4)); }
.side-nav a { display: flex; align-items: center; gap: var(--space-3); padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-muted); transition: all var(--duration-fast) var(--ease); }
.side-nav a:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.side-nav a.active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }

/* ---------- دکمه شناور ---------- */
.float-action { position: fixed; bottom: var(--space-5); inset-inline-start: var(--space-5); z-index: 800; width: 52px; height: 52px; border-radius: 50%; background: var(--neon, var(--brand, #8FE04A)); color: var(--on-neon, var(--on-brand, #14210A)); display: grid; place-items: center; font-size: 20px; box-shadow: var(--shadow-lg); border: none; cursor: pointer; transition: all var(--duration-base) var(--ease); }
.float-action:hover { transform: scale(1.06); }

/* ---------- صفحه ورود ---------- */
.form-page { padding: var(--space-7) 0; }
.form-card { max-width: 420px; margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-md); }
.form-card .form-logo { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--neon, var(--brand, #8FE04A)); display: grid; place-items: center; color: var(--on-neon, var(--on-brand, #14210A)); font-size: 24px; margin: 0 auto var(--space-4); }
.form-card h3 { text-align: center; margin-bottom: var(--space-2); }
.form-card .form-lead { text-align: center; font-size: var(--text-sm); margin-bottom: var(--space-5); }
.form-foot { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-5); }
.form-foot a { color: var(--color-primary); font-weight: 600; }

/* ---------- ریسپانسیو ---------- */
@media (max-width: 1024px) {
  .grid-4, .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .dash-wrap { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .site-nav .nav-actions { display: none; }
}
@media (max-width: 640px) {
  :root { --space-8: 48px; --space-7: 32px; }
  .container { padding: 0 var(--space-4); }
  .grid-2, .grid-3, .grid-4, .kpi-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .section { padding: var(--space-7) 0; }
  .footer-bottom { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  body.js-ready .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==================== زبانه‌ها (.tabs / .tab) ====================
   blog.html، courses.html و tools.html از این کلاس‌ها استفاده می‌کردند اما
   هیچ استایلی تعریف نشده بود — دکمه خاکستری پیش‌فرض مرورگر نمایش داده می‌شد. */
.tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}
.tab {
  appearance: none; border: 1px solid transparent; background: transparent;
  font-family: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  min-height: 40px; cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.tab:hover { color: var(--color-text); background: var(--color-surface-sunken); }
.tab.active {
  color: var(--color-primary); background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
}
.tab:focus-visible { outline: 2px solid var(--neon, var(--brand, #8FE04A)); outline-offset: 2px; }
@media (max-width: 640px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { flex-shrink: 0; }
}

/* ==================== دکمه شناور پشتیبانی (.float-chat) ====================
   در ۲۱ صفحه وجود داشت اما استایل نداشت — آیکن ساده ته صفحه می‌افتاد. */
.float-chat {
  position: fixed;
  inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 20px;
  z-index: 900;
  width: 54px; height: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--neon, var(--brand, #8FE04A)); color: var(--on-neon, var(--on-brand, #14210A));
  font-size: 22px; text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.float-chat:hover { background: var(--neon-hover, var(--brand-hover, #7AC636)); transform: translateY(-2px); }
.float-chat:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 3px; }
@media (max-width: 640px) {
  .float-chat { width: 48px; height: 48px; font-size: 20px; inset-inline-end: 16px; }
}

/* حالت خالی/خطا/بارگذاری درون شبکه‌ها تمام عرض ردیف را بگیرد (نه فقط ستون اول) */
:is(.grid-2, .grid-3, .grid-4) > :is(.ya-empty-state, .ya-error-state, .ya-skeleton-cards, .ya-skeleton-text, .empty-state) {
  grid-column: 1 / -1;
}

/* ==================== نشان‌های وضعیت (بند ۲۴/۴۴) ==================== */
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.badge-info    { background: var(--color-info-soft);    color: var(--color-info); }
.badge-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
}

/* ==================== اسکلتون (بند ۵۱ — Loading) ==================== */
.sk-line { height: 12px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.sk-card { height: 140px; border-radius: var(--radius-lg); }

/* ==================== اسکرول‌بار ==================== */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 50px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ==================== جلوگیری از overflow افقی (بند ۶) ==================== */
html, body { max-width: 100%; }
img, video, svg { max-width: 100%; }
pre, code { overflow-x: auto; }
.table-wrap { overflow-x: auto; }

/* ==================== انیمیشن‌های مشترک (بند ۷) ==================== */
@keyframes ya-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ya-slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ya-slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.ya-anim-fade { animation: ya-fade-in var(--duration-base) var(--ease) both; }
.ya-anim-up { animation: ya-slide-up var(--duration-base) var(--ease) both; }

/* ==================== متن کوتاه‌شده ==================== */
.line-clamp-1, .line-clamp-2, .line-clamp-3 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* ==================== نمایش فقط موبایل/دسکتاپ ==================== */
.only-mobile { display: none; }
@media (max-width: 768px) {
  .only-mobile { display: block; }
  .only-desktop { display: none !important; }
}

/* ============================================================
   کامپوننت‌های مشترک (ya-components.js)
   ============================================================ */

/* ---------- Toast ---------- */
.ya-toast-root {
  position: fixed; z-index: var(--z-toast);
  inset-block-start: calc(var(--nav-height) + var(--space-3));
  inset-inline-end: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none; max-width: min(380px, calc(100vw - 32px));
}
.ya-toast {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-info);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg); font-size: var(--text-sm); font-weight: 500;
  pointer-events: auto;
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.ya-toast--in { opacity: 1; transform: none; }
.ya-toast i { flex-shrink: 0; }
.ya-toast--success { border-inline-start-color: var(--color-success); }
.ya-toast--success i { color: var(--color-success); }
.ya-toast--warning { border-inline-start-color: var(--color-warning); }
.ya-toast--warning i { color: var(--color-warning); }
.ya-toast--error { border-inline-start-color: var(--color-danger); }
.ya-toast--error i { color: var(--color-danger); }
.ya-toast--info i { color: var(--color-info); }
.ya-toast > span { flex: 1; }
.ya-toast__x {
  background: none; border: none; cursor: pointer; color: var(--color-text-subtle);
  padding: var(--space-1); border-radius: var(--radius-sm); font-size: 12px;
}
.ya-toast__x:hover { color: var(--color-text); background: var(--color-surface-sunken); }

/* ---------- Overlay مشترک ---------- */
.ya-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(10, 16, 22, .42);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  opacity: 0; transition: opacity var(--duration-base) var(--ease);
  padding: var(--space-4);
}
.ya-overlay--in { opacity: 1; }
.ya-overlay--drawer { place-items: stretch; justify-items: stretch; }

/* ---------- Modal ---------- */
.ya-overlay .ya-modal {
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 88vh;
  display: flex; flex-direction: column;
  transform: translateY(16px) scale(.98); transition: transform var(--duration-base) var(--ease);
}
.ya-overlay--in .ya-modal { transform: none; }
.ya-overlay .ya-modal__head,
.ya-overlay .ya-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5); border-bottom: 1px solid var(--color-border);
}
.ya-overlay .ya-modal__head h3 { font-size: var(--text-lg); }
.ya-overlay .ya-modal__x, .ya-overlay .ya-drawer__x {
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
  width: 34px; height: 34px; border-radius: var(--radius-sm); font-size: 15px;
  display: grid; place-items: center;
}
.ya-overlay .ya-modal__x:hover, .ya-overlay .ya-drawer__x:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.ya-overlay .ya-modal__body { padding: var(--space-5); overflow-y: auto; }
.ya-overlay .ya-modal__foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--space-3); }
.ya-overlay .ya-confirm p { margin-bottom: var(--space-2); }
.ya-overlay .ya-confirm__btns { display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ---------- Drawer ---------- */
.ya-drawer {
  background: var(--color-surface); height: 100%; width: min(360px, 100%);
  margin-inline-start: auto;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(-24px); opacity: 0;
  transition: transform var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
}
.ya-overlay--in .ya-drawer { transform: none; opacity: 1; }
.ya-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border);
  min-height: 60px;
}
.ya-drawer__body { padding: var(--space-5); overflow-y: auto; flex: 1; }
.ya-drawer__foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); }

/* ---------- Breadcrumb ---------- */
.ya-crumb ol { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ya-crumb li { font-size: var(--text-xs); color: var(--color-text-subtle); display: flex; align-items: center; gap: var(--space-2); }
.ya-crumb li + li::before { content: '/'; color: var(--color-border-strong); }
.ya-crumb a { color: var(--color-text-muted); }
.ya-crumb a:hover { color: var(--color-primary); }
.ya-crumb li[aria-current] { color: var(--color-text); font-weight: 600; }

/* ---------- Empty / Error / Loading ----------
 * هر دو قرارداد نام‌گذاری پشتیبانی می‌شود:
 *   جدید  ya-components.js → __ic / h4 / p
 *   قدیم  ui.js            → __icon / __title / __hint / __action / __detail
 */
.ya-empty-state, .ya-error-state {
  text-align: center; padding: var(--space-7) var(--space-5);
  color: var(--color-text-muted);
  animation: ya-fade-in var(--duration-base) var(--ease) both;
}
.ya-empty-state__ic, .ya-error-state__ic,
.ya-empty-state__icon, .ya-error-state__icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--color-surface-sunken); color: var(--color-text-subtle);
  display: grid; place-items: center; margin: 0 auto var(--space-4);
  font-size: 24px;
}
.ya-error-state__ic, .ya-error-state__icon { background: var(--color-danger-soft); color: var(--color-danger); }
.ya-empty-state h4, .ya-error-state h4,
.ya-empty-state__title, .ya-error-state__title {
  font-size: var(--text-base); color: var(--color-text); margin-bottom: var(--space-2); font-weight: 700;
}
.ya-empty-state p, .ya-error-state p,
.ya-empty-state__hint, .ya-error-state__detail {
  font-size: var(--text-sm); margin-bottom: var(--space-4); color: var(--color-text-muted);
}
.ya-empty-state .btn, .ya-error-state .btn,
.ya-empty-state__action { margin: 0 auto; display: inline-flex; }

.ya-loading-state { display: contents; }

@media (max-width: 640px) {
  .ya-toast-root { inset-inline-end: var(--space-3); inset-inline-start: var(--space-3); max-width: none; }
  .ya-overlay { padding: 0; }
  .ya-overlay .ya-modal { max-width: none; max-height: 100vh; border-radius: 0; height: 100%; }
  .ya-drawer { width: 100%; }
}

/* ============================================================
   Header مشترک (ya-header.js) — بند ۸–۱۱
   ============================================================ */

/* ---------- Top Utility Bar ---------- */
.ya-topbar {
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
}
.ya-topbar__in {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5);
  height: 34px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.ya-topbar__brand { font-weight: 700; color: var(--color-primary); display: flex; align-items: center; gap: 6px; }
.ya-topbar__links { display: flex; align-items: center; gap: var(--space-5); overflow-x: auto; scrollbar-width: none; }
.ya-topbar__links::-webkit-scrollbar { display: none; }
.ya-topbar__links a {
  color: var(--color-text-muted); white-space: nowrap;
  display: flex; align-items: center; gap: 5px; transition: color var(--duration-fast) var(--ease);
}
.ya-topbar__links a:hover { color: var(--color-primary); }
.ya-topbar__partner { color: var(--color-primary) !important; font-weight: 700; }

/* ---------- Header اصلی — ۷۲px ---------- */
/* ---------- Container هدر (sticky روی کل صفحه) ---------- */
#yaHeader { position: sticky; top: 0; z-index: var(--z-sticky); }

.ya-head {
  position: relative;
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease);
}
.ya-head--scrolled {
  box-shadow: var(--shadow-md);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.ya-head__in {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5);
  height: var(--nav-height);
  display: flex; align-items: center; gap: var(--space-4);
}
.ya-brand { flex-shrink: 0; height: 40px; }
.ya-brand__img { height: 40px; width: auto; }

/* ---------- دکمه‌های هدر ---------- */
.ya-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px 18px; border-radius: 50px; border: none; cursor: pointer;
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  transition: all var(--duration-base) var(--ease); text-decoration: none;
}
.ya-btn--sm { padding: 7px 12px; font-size: var(--text-xs); }
.ya-btn--primary { background: var(--brand); color: var(--on-brand); }
.ya-btn--primary:hover { background: var(--brand-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ya-btn--ghost { background: transparent; color: var(--color-text-muted); }
.ya-btn--ghost:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.ya-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ya-guest { display: flex; align-items: center; gap: var(--space-2); }

/* ---------- Nav ---------- */
.ya-nav { display: flex; align-items: center; gap: var(--space-1); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ya-nav::-webkit-scrollbar { display: none; }
.ya-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted);
  background: none; border: none; cursor: pointer; font-family: inherit;
  transition: all var(--duration-fast) var(--ease); white-space: nowrap;
}
.ya-nav__link:hover { color: var(--color-text); background: var(--color-surface-sunken); }
.ya-nav__link.is-active { color: var(--color-primary); background: var(--color-primary-soft); }
.ya-nav__item { position: relative; }
.ya-nav__chev { font-size: 10px; transition: transform var(--duration-fast) var(--ease); }
.ya-nav__item.on .ya-nav__chev { transform: rotate(180deg); }

/* ---------- Mega Menu ---------- */
.ya-mega {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-3); min-width: 400px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), visibility var(--duration-fast);
  z-index: var(--z-sticky);
}
.ya-nav__item.on .ya-mega { opacity: 1; visibility: visible; transform: none; }
.ya-mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ya-mega__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease);
}
.ya-mega__item:hover { background: var(--color-surface-sunken); }
.ya-mega__ic {
  width: 36px; height: 36px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--color-primary-soft); color: var(--color-primary);
  display: grid; place-items: center; font-size: 15px;
}
.ya-mega__item b { display: block; font-size: var(--text-sm); color: var(--color-text); }
.ya-mega__item small { display: block; font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ---------- بخش راست هدر ---------- */
.ya-head__act { display: flex; align-items: center; gap: var(--space-2); flex: 0 1 auto; min-width: 0; }
.ya-user { display: flex; align-items: center; gap: var(--space-2); }
.ya-guest { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ya-icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  background: none; border: 1px solid var(--color-border); cursor: pointer;
  color: var(--color-text-muted); display: grid; place-items: center; font-size: 15px;
  transition: all var(--duration-fast) var(--ease);
}
.ya-icon-btn:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.ya-icon-btn__dot {
  position: absolute; top: -4px; inset-inline-end: -4px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 50px;
  background: var(--color-danger); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--color-surface);
}
.ya-user-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 10px 6px 14px; border-radius: 50px; cursor: pointer;
  background: none; border: 1px solid var(--color-border); font-family: inherit;
  transition: all var(--duration-fast) var(--ease);
}
.ya-user-btn:hover { background: var(--color-surface-sunken); }
.ya-user-btn__avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: var(--on-brand);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.ya-user-btn__name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Popovers ---------- */
.ya-user-menu, .ya-notif {
  position: absolute; top: calc(100% + 10px); inset-inline-end: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: var(--z-sticky); overflow: hidden;
  animation: ya-slide-down var(--duration-fast) var(--ease) both;
}
.ya-user-menu { width: 280px; }
.ya-user-menu__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.ya-user-menu__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 16px; font-weight: 700;
}
.ya-user-menu__head strong { display: block; font-size: var(--text-sm); }
.ya-user-menu__head small { display: block; font-size: var(--text-xs); color: var(--color-text-subtle); }
.ya-user-menu__sep { height: 1px; background: var(--color-border); }
.ya-user-menu__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-3) var(--space-4); border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--text-sm); color: var(--color-text); text-decoration: none;
  transition: background var(--duration-fast) var(--ease);
}
.ya-user-menu__item:hover { background: var(--color-surface-sunken); }
.ya-user-menu__item--danger { color: var(--color-danger); }
.ya-user-menu__item i { width: 18px; color: var(--color-text-subtle); }
.ya-user-menu__item--danger i { color: var(--color-danger); }

/* ---------- مرکز اعلان‌ها ---------- */
.ya-notif { width: 340px; max-width: calc(100vw - 32px); }
.ya-notif__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.ya-notif__all { background: none; border: none; cursor: pointer; color: var(--color-primary); font-size: var(--text-xs); font-weight: 600; font-family: inherit; }
.ya-notif__body { max-height: 340px; overflow-y: auto; }
.ya-notif__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.ya-notif__item:last-child { border-bottom: none; }
.ya-notif__item.is-unread { background: var(--color-primary-soft); }
.ya-notif__ic { width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--color-surface-sunken); color: var(--color-text-muted); display: grid; place-items: center; font-size: 13px; }
.ya-notif__item b { display: block; font-size: var(--text-sm); font-weight: 600; }
.ya-notif__item small { display: block; font-size: var(--text-xs); color: var(--color-text-subtle); line-height: 1.5; }
.ya-notif__empty, .ya-notif__loading { padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-subtle); }
.ya-notif__empty i { display: block; font-size: 22px; margin-bottom: var(--space-2); opacity: .5; }
.ya-notif__empty p { font-size: var(--text-xs); }

/* ---------- Burger ---------- */
.ya-burger {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: none; border: 1px solid var(--color-border); cursor: pointer;
  color: var(--color-text); display: none; place-items: center; font-size: 17px;
  flex-shrink: 0;
}
.ya-burger:hover { background: var(--color-surface-sunken); }

/* ---------- Mobile Drawer ---------- */
.ya-mobile {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(10, 16, 22, .45);
  opacity: 0; transition: opacity var(--duration-base) var(--ease);
}
.ya-mobile:not([hidden]) { opacity: 1; }
.ya-mobile__panel {
  background: var(--color-surface); height: 100%; width: min(340px, 100%);
  inset-inline-start: 0; display: flex; flex-direction: column;
  transform: translateX(-24px); transition: transform var(--duration-base) var(--ease);
  box-shadow: var(--shadow-lg);
}
.ya-mobile:not([hidden]) .ya-mobile__panel { transform: none; }
.ya-mobile__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border);
  font-size: var(--text-lg); font-weight: 700; min-height: 60px;
}
.ya-mobile__head button { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 18px; width: 36px; height: 36px; border-radius: var(--radius-sm); }
.ya-mobile__head button:hover { background: var(--color-surface-sunken); }
.ya-mobile__body { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4); }
.ya-mobile__group { margin-bottom: var(--space-4); }
.ya-mobile__group-t { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-subtle); padding: var(--space-2) var(--space-3); }
.ya-mobile__group a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 11px var(--space-3); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text);
  transition: background var(--duration-fast) var(--ease);
}
.ya-mobile__group a:hover { background: var(--color-surface-sunken); }
.ya-mobile__group a i { width: 20px; color: var(--color-text-subtle); }
.ya-mobile__foot { padding: var(--space-4); border-top: 1px solid var(--color-border); display: grid; gap: var(--space-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1140px) {
  .ya-topbar__brand { display: none; }
}
@media (max-width: 1024px) {
  .ya-nav { display: none; }
  .ya-burger { display: grid; }
  .ya-guest .ya-btn--ghost:first-child { display: none; }
}
@media (max-width: 768px) {
  .ya-head__in { gap: var(--space-3); }
  .ya-brand__img { height: 34px; }
  .ya-user-btn__name { display: none; }
  .ya-guest .ya-btn--ghost { display: none; }
}
@media (max-width: 480px) {
  .ya-head__in { padding: 0 var(--space-4); }
  .ya-topbar__in { padding: 0 var(--space-4); }
  .ya-head__act { margin-inline-start: auto; }
}

/* ============================================================
   Footer مشترک (ya-footer.js) — بند ۲۸
   ============================================================ */
.ya-foot {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-8);
}
.ya-foot__in { max-width: var(--container); margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-5); }
.ya-foot__grid {
  display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: var(--space-7);
  padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border);
}
.ya-foot__logo { display: block; margin-bottom: var(--space-4); }
.ya-foot__logo img { height: 44px; width: auto; }
.ya-foot__brand p { font-size: var(--text-sm); max-width: 300px; }
.ya-foot__col h4 { font-size: var(--text-sm); margin-bottom: var(--space-4); }
.ya-foot__col ul { display: grid; gap: var(--space-3); }
.ya-foot__col a { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--duration-fast) var(--ease); }
.ya-foot__col a:hover { color: var(--color-primary); }
.ya-foot__bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  padding-top: var(--space-5);
}
.ya-foot__legal { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.ya-foot__legal a { font-size: var(--text-xs); color: var(--color-text-muted); }
.ya-foot__legal a:hover { color: var(--color-primary); }
.ya-foot__trust {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--color-text-subtle);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm);
  padding: 4px 10px;
}
.ya-foot__trust i { color: var(--color-primary); }
.ya-foot__social { display: flex; gap: var(--space-2); margin-inline-start: auto; }
.ya-foot__social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-surface-sunken); color: var(--color-text-muted);
  display: grid; place-items: center; font-size: 15px;
  transition: all var(--duration-fast) var(--ease);
}
.ya-foot__social a:hover { background: var(--brand); color: var(--on-brand); transform: translateY(-2px); }
.ya-foot__copy { font-size: var(--text-xs); color: var(--color-text-subtle); width: 100%; text-align: center; padding-top: var(--space-3); }

@media (max-width: 1024px) {
  .ya-foot__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
@media (max-width: 640px) {
  .ya-foot__grid { grid-template-columns: 1fr; }
  .ya-foot__social { margin-inline-start: 0; }
  .ya-foot__copy { text-align: center; }
}

/* ============================================================
   صفحه اصلی (ya-home.js) — بند ۱۲–۲۷
   ============================================================ */

.ya-sec { padding: var(--space-8) 0; }
.ya-sec--alt { background: var(--color-surface-sunken); }
.ya-sec__in { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.ya-sec__h { max-width: 640px; margin: 0 0 var(--space-6); }
.ya-sec__h--row.ya-sec__h--admin { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.ya-sec__h--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.ya-eyebrow {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  color: var(--color-primary); letter-spacing: .06em; margin-bottom: var(--space-2);
}
.ya-sec__h h2 { margin-bottom: var(--space-2); }
.ya-sec__h p { font-size: var(--text-sm); }
.ya-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); white-space: nowrap;
}
.ya-more:hover { text-decoration: underline; }

/* ---------- شبکه‌ها ---------- */
.ya-grid { display: grid; gap: var(--space-5); }
.ya-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ya-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Hero ---------- */
.ya-hero {
  position: relative; overflow: hidden;
  background: var(--color-surface);
  padding: var(--space-8) 0 calc(var(--space-8) + 24px);
}
.ya-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 300px at 85% -5%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(460px 260px at 10% 105%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%);
}
.ya-hero__in { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.ya-hero__c { max-width: 760px; margin: 0 auto; text-align: center; }
.ya-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--color-primary-soft); color: var(--color-primary);
  border: 1px solid var(--brand-line);
  padding: 6px 14px; border-radius: 50px;
  font-size: var(--text-xs); font-weight: 700; margin-bottom: var(--space-5);
}
.ya-hero__title { font-size: clamp(26px, 4.2vw, 46px); font-weight: 800; line-height: 1.3; min-height: 1.3em; }
.ya-slogan { display: inline-block; }
.ya-slogan--in { animation: ya-slogan-in var(--duration-base) var(--ease) both; }
@keyframes ya-slogan-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ya-hero__sub { margin: var(--space-4) auto 0; max-width: 560px; font-size: var(--text-lg); }

/* ---------- Hero Search ---------- */
.ya-hero-search { position: relative; max-width: 620px; margin: var(--space-6) auto 0; }
.ya-hero-search form {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50px; padding: 6px 6px 6px var(--space-4);
  box-shadow: var(--shadow-md);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.ya-hero-search form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.ya-hero-search form > i { color: var(--color-text-subtle); font-size: 16px; flex-shrink: 0; }
.ya-hero-search input {
  flex: 1; border: none; background: none; outline: none;
  font-size: var(--text-base); font-family: inherit; color: var(--color-text);
  padding: 10px 4px; min-width: 0;
}
.ya-hero-search input::placeholder { color: var(--color-text-subtle); }
.ya-search__out {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-height: 400px; overflow-y: auto; z-index: var(--z-sticky);
  animation: ya-slide-down var(--duration-fast) var(--ease) both;
}
.ya-search__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
}
.ya-search__item:last-child { border-bottom: none; }
.ya-search__item:hover { background: var(--color-surface-sunken); }
.ya-search__cat {
  font-size: 10px; font-weight: 700; color: var(--color-primary);
  background: var(--color-primary-soft); padding: 3px 8px; border-radius: 50px; flex-shrink: 0;
}
.ya-search__txt { min-width: 0; }
.ya-search__txt b { display: block; font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ya-search__txt small { display: block; font-size: var(--text-xs); color: var(--color-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ya-search__empty, .ya-search__loading { padding: var(--space-5) var(--space-4); text-align: center; color: var(--color-text-subtle); }
.ya-search__empty i { display: block; font-size: 20px; margin-bottom: var(--space-2); opacity: .5; }
.ya-search__empty p { font-size: var(--text-sm); }

/* ---------- Hero CTA ---------- */
.ya-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }
.ya-btn--lg { padding: 13px 24px; font-size: var(--text-base); }

/* ---------- Trust Card ---------- */
.ya-trust {
  display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center;
  margin-top: var(--space-7); padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.ya-trust__item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 100px; }
.ya-trust__ic {
  width: 42px; height: 42px; border-radius: var(--radius-md);
  background: var(--color-primary-soft); color: var(--color-primary);
  display: grid; place-items: center; font-size: 17px;
}
.ya-trust__num { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
.ya-trust__item small { font-size: var(--text-xs); color: var(--color-text-subtle); text-align: center; }
.ya-trust__note {
  text-align: center; margin-top: var(--space-6); padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm); color: var(--color-text-subtle);
}

/* ---------- Quick Actions ---------- */
.ya-quick-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
}
.ya-quick {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text);
  transition: all var(--duration-base) var(--ease);
}
.ya-quick:hover { border-color: var(--brand-line); background: var(--color-primary-soft); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ya-quick__ic {
  width: 38px; height: 38px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--color-primary-soft); color: var(--color-primary);
  display: grid; place-items: center; font-size: 16px;
}

/* ---------- کارت سرویس ---------- */
.ya-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  transition: all var(--duration-base) var(--ease);
}
a.ya-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.ya-card__ic {
  width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--color-primary-soft); color: var(--color-primary);
  display: grid; place-items: center; font-size: 19px;
}
.ya-card h3 { font-size: var(--text-base); }
.ya-card p { font-size: var(--text-sm); flex: 1; }
.ya-card__cta {
  font-size: var(--text-sm); font-weight: 700; color: var(--color-primary);
  display: inline-flex; align-items: center; gap: 5px; margin-top: auto;
}
.ya-card--tool-lg { border-radius: var(--radius-xl); }

/* ---------- ابزارهای کوچک ---------- */
.ya-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.ya-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 50px; padding: 8px 16px;
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text);
  transition: all var(--duration-fast) var(--ease);
}
.ya-chip:hover { border-color: var(--brand); background: var(--color-primary-soft); color: var(--color-primary); }
.ya-chip i { color: var(--color-primary); font-size: 13px; }

/* ---------- دوره‌ها ---------- */
.ya-course__thumb {
  height: 120px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface-sunken));
  color: var(--color-primary); display: grid; place-items: center; font-size: 34px;
}
.ya-course__body { display: flex; flex-direction: column; gap: var(--space-2); }
.ya-course__body small { font-size: var(--text-xs); color: var(--color-text-muted); display: flex; align-items: center; gap: 5px; }
.ya-course__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); }
.ya-course__meta span { font-size: var(--text-xs); color: var(--color-text-muted); display: flex; align-items: center; gap: 4px; }
.ya-course__meta strong { font-size: var(--text-base); font-weight: 700; color: var(--color-primary); }

/* ---------- قانون ---------- */
.ya-card--law { padding: var(--space-4); }
.ya-card--law h3 { font-size: var(--text-sm); }
.ya-card--law small { font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ---------- AI ---------- */
.ya-ai {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6);
}
.ya-ai__side h2 { margin: var(--space-2) 0 var(--space-3); }
.ya-ai__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.ya-ai__chips button {
  background: var(--color-surface-sunken); border: 1px solid var(--color-border);
  border-radius: 50px; padding: 7px 14px; font-family: inherit; cursor: pointer;
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted);
  transition: all var(--duration-fast) var(--ease);
}
.ya-ai__chips button:hover { border-color: var(--brand); color: var(--color-primary); background: var(--color-primary-soft); }
.ya-ai__ask { display: flex; gap: var(--space-2); }
.ya-ai__ask input {
  flex: 1; padding: 12px 16px; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  font-family: inherit; font-size: var(--text-sm); color: var(--color-text); outline: none; min-width: 0;
}
.ya-ai__ask input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.ya-ai__out { display: flex; flex-direction: column; gap: var(--space-3); }
.ya-ai__q, .ya-ai__a { display: flex; gap: var(--space-3); }
.ya-ai__q i { width: 32px; height: 32px; border-radius: 50%; background: var(--color-surface-sunken); color: var(--color-text-muted); display: grid; place-items: center; flex-shrink: 0; }
.ya-ai__a i { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; flex-shrink: 0; }
.ya-ai__a p { font-size: var(--text-sm); color: var(--color-text); line-height: 1.8; }
.ya-ai__refs { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-xs); }
.ya-ai__refs b { color: var(--color-text-muted); }
.ya-ai__refs a { color: var(--color-primary); font-weight: 600; }
.ya-ai__refs a:hover { text-decoration: underline; }
.ya-ai__note {
  display: flex; align-items: center; gap: 6px; font-size: var(--text-xs);
  color: var(--color-warning); background: var(--color-warning-soft);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
}
.ya-ai__loading { display: contents; }

/* ---------- اخبار ---------- */
.ya-news__item {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); margin-bottom: var(--space-3);
  transition: all var(--duration-fast) var(--ease);
}
.ya-news__item:hover { border-color: var(--brand-line); background: var(--color-primary-soft); }
.ya-news__cat { font-size: 10px; font-weight: 700; color: var(--color-primary); }
.ya-news__item b { font-size: var(--text-sm); }
.ya-news__item small { font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ---------- نظرات ---------- */
.ya-quote {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
}
.ya-quote__stars { color: #F5A623; letter-spacing: 2px; }
.ya-quote p { font-size: var(--text-sm); color: var(--color-text); line-height: 1.8; }
.ya-quote__who { display: flex; flex-direction: column; }
.ya-quote__who b { font-size: var(--text-sm); }
.ya-quote__who small { font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ---------- FAQ ---------- */
.ya-faq { display: grid; gap: var(--space-3); }
.ya-faq details {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4); cursor: pointer;
}
.ya-faq details:hover { border-color: var(--color-border-strong); }
.ya-faq summary { font-weight: 600; font-size: var(--text-sm); list-style: none; }
.ya-faq summary::-webkit-details-marker { display: none; }
.ya-faq summary::before { content: '＋ '; color: var(--color-primary); font-weight: 700; }
.ya-faq details[open] summary::before { content: '－ '; }
.ya-faq details p { margin-top: var(--space-3); font-size: var(--text-sm); }

/* ---------- نمادها ---------- */
.ya-trust-badges { display: grid; gap: var(--space-3); align-content: start; }
.ya-trust-badge {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.ya-trust-badge i { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.ya-trust-badge b { display: block; font-size: var(--text-sm); }
.ya-trust-badge small { display: block; font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ---------- Plans ---------- */
.ya-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.ya-plan {
  position: relative; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
}
.ya-plan--pop { border-color: var(--brand); box-shadow: var(--shadow-md); }
.ya-plan__tag {
  position: absolute; top: -10px; inset-inline-start: 50%; transform: translateX(50%);
  background: var(--brand); color: var(--on-brand); font-size: 10px; font-weight: 700;
  padding: 3px 12px; border-radius: 50px;
}
.ya-plan h3 { font-size: var(--text-base); }
.ya-plan__price { font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); }
.ya-plan__price small { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
.ya-plan ul { display: grid; gap: var(--space-2); flex: 1; }
.ya-plan li { font-size: var(--text-xs); color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; }
.ya-plan li i { color: var(--color-primary); }
.ya-plans__note { text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.ya-plans__note a { color: var(--color-primary); font-weight: 600; }

/* ---------- Jobs ---------- */
.ya-jobs__body p { font-size: var(--text-sm); margin-bottom: var(--space-2); }

/* ---------- CTA پایانی ---------- */
.ya-cta { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-8) 0; }
.ya-cta__in { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); text-align: center; }
.ya-cta h2 { margin-bottom: var(--space-3); }

/* ---------- Social شناور ---------- */
.ya-social {
  position: fixed; inset-block-end: var(--space-5); inset-inline-start: var(--space-5);
  z-index: var(--z-sticky); display: flex; flex-direction: column; gap: var(--space-2);
}
.ya-social a {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text-muted); display: grid; place-items: center; font-size: 17px;
  box-shadow: var(--shadow-md); transition: all var(--duration-fast) var(--ease);
}
.ya-social a:hover { background: var(--brand); color: var(--on-brand); transform: translateY(-2px); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ya-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ya-quick-grid { grid-template-columns: repeat(2, 1fr); }
  .ya-plans { grid-template-columns: repeat(2, 1fr); }
  .ya-ai { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ya-grid--2, .ya-grid--3 { grid-template-columns: 1fr; }
  .ya-quick-grid { grid-template-columns: 1fr; }
  .ya-plans { grid-template-columns: 1fr; }
  .ya-sec { padding: var(--space-7) 0; }
  .ya-sec__in { padding: 0 var(--space-4); }
  .ya-sec__h--row { flex-direction: column; align-items: flex-start; }
  .ya-hero__search form { flex-wrap: wrap; border-radius: var(--radius-lg); }
  .ya-hero-search form > i { display: none; }
  .ya-hero-search input { flex: 1 1 100%; order: -1; padding: 12px 16px; border-radius: var(--radius-md); }
  .ya-hero-search form > .ya-btn { flex: 1; }
  .ya-trust { gap: var(--space-4); }
  .ya-social { display: none; }
  .ya-hero__title { min-height: 2.6em; }
}

/* ════════════════════════════════════════════
   Auth Pages — login/register/forgot (بند ۳۰–۳۳)
   ════════════════════════════════════════════ */
.ya-auth { min-height: 100vh; display: grid; place-items: center; padding: var(--space-5) var(--space-4); background: var(--ya-bg); }
.ya-auth__card { width: 100%; max-width: 460px; }
.ya-auth__card--wide { max-width: 640px; }
.ya-auth__head { text-align: center; margin-bottom: var(--space-6); }
.ya-auth__mark { width: 56px; height: 56px; border-radius: var(--ya-radius-lg); background: var(--brand); display: grid; place-items: center; color: #0b1208; font-size: 24px; margin: 0 auto var(--space-4); font-weight: 800; }
.ya-auth__head h1 { font-size: var(--ya-text-2xl); font-weight: 800; letter-spacing: -0.02em; }
.ya-auth__head p { font-size: var(--ya-text-sm); color: var(--ya-text-muted); margin-top: var(--space-2); }
.ya-auth__panel { background: var(--ya-surface); border: 1px solid var(--ya-border); border-radius: var(--ya-radius-xl); padding: var(--space-6); box-shadow: var(--ya-shadow-sm); }
.ya-auth__alert { display: none; margin-bottom: var(--space-4); padding: 12px 14px; border-radius: var(--ya-radius-md); font-size: var(--ya-text-sm); line-height: 1.5; gap: 8px; align-items: flex-start; }
.ya-auth__alert.is-show { display: flex; }
.ya-auth__alert--err { background: var(--ya-danger-soft); color: var(--ya-danger); border: 1px solid var(--ya-danger-border); }
.ya-auth__alert--ok { background: var(--ya-brand-soft); color: var(--ya-brand-strong); border: 1px solid var(--ya-brand-border); }
.ya-auth__alert i { margin-top: 2px; flex: none; }

/* نقش‌ها (role cards) */
.ya-roles { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.ya-role { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1.5px solid var(--ya-border); border-radius: var(--ya-radius-lg); background: var(--ya-surface); cursor: pointer; text-align: start; width: 100%; transition: border-color .15s, box-shadow .15s, background .15s; }
.ya-role:hover { border-color: var(--ya-brand-border); background: var(--ya-brand-soft); }
.ya-role[aria-pressed="true"] { border-color: var(--brand); background: var(--ya-brand-soft); box-shadow: 0 0 0 3px var(--ya-brand-glow); }
.ya-role__ic { width: 40px; height: 40px; border-radius: var(--ya-radius-md); background: var(--ya-surface-2); display: grid; place-items: center; color: var(--ya-brand-strong); font-size: 17px; flex: none; }
.ya-role[aria-pressed="true"] .ya-role__ic { background: var(--brand); color: #0b1208; }
.ya-role__t { font-weight: 700; font-size: var(--ya-text-sm); display: block; }
.ya-role__d { font-size: var(--ya-text-xs); color: var(--ya-text-muted); margin-top: 2px; display: block; line-height: 1.5; }

/* فیلدها */
.ya-field { margin-bottom: var(--space-4); }
.ya-field > label { display: block; font-size: var(--ya-text-sm); font-weight: 600; margin-bottom: 6px; }
.ya-field .req { color: var(--ya-danger); }
.ya-field .hint { font-size: var(--ya-text-xs); color: var(--ya-text-subtle); margin-top: 6px; line-height: 1.5; }
.ya-input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--ya-border); border-radius: var(--ya-radius-md); background: var(--ya-surface); color: var(--ya-text); font-size: var(--ya-text-sm); font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.ya-input::placeholder { color: var(--ya-text-subtle); }
.ya-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ya-brand-glow); }
.ya-input[aria-invalid="true"] { border-color: var(--ya-danger); }
.ya-input.is-ok { border-color: var(--ya-success); }
.ya-err { display: none; font-size: var(--ya-text-xs); color: var(--ya-danger); margin-top: 6px; }
.ya-err.is-show { display: block; }
.ya-pw { position: relative; }
.ya-pw .ya-input { padding-inline-start: 42px; }
.ya-pw__toggle { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--ya-text-subtle); cursor: pointer; padding: 4px; font-size: 15px; }
.ya-pw__toggle:hover { color: var(--ya-text-muted); }

/* OTP boxes */
.ya-otp { display: flex; gap: var(--space-2); justify-content: center; direction: ltr; margin: var(--space-2) 0 var(--space-5); }
.ya-otp input { width: 48px; height: 56px; text-align: center; font-size: var(--ya-text-xl); font-weight: 700; border: 1.5px solid var(--ya-border); border-radius: var(--ya-radius-md); background: var(--ya-surface); color: var(--ya-text); font-family: inherit; }
.ya-otp input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ya-brand-glow); }
.ya-otp input.is-filled { border-color: var(--ya-brand-border); background: var(--ya-brand-soft); }

/* ردیف فرم */
.ya-formrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); font-size: var(--ya-text-sm); flex-wrap: wrap; }
.ya-formrow label { display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--ya-text-muted); cursor: pointer; }
.ya-formrow a { color: var(--ya-brand-strong); font-weight: 700; }
.ya-formrow input[type=checkbox] { accent-color: var(--brand); width: 16px; height: 16px; }

/* جعبه تقسیم‌کننده */
.ya-div { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--ya-text-subtle); font-size: var(--ya-text-xs); }
.ya-div::before, .ya-div::after { content: ''; flex: 1; height: 1px; background: var(--ya-border); }
.ya-auth__foot { text-align: center; font-size: var(--ya-text-sm); color: var(--ya-text-muted); margin-top: var(--space-5); }
.ya-auth__foot a { color: var(--ya-brand-strong); font-weight: 700; }
.ya-auth__trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--space-6); font-size: var(--ya-text-xs); color: var(--ya-text-subtle); }

/* بازگشت مرحله */
.ya-stepback { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--ya-text-muted); font-size: var(--ya-text-sm); cursor: pointer; padding: 6px 0; margin-bottom: var(--space-2); font-family: inherit; }
.ya-stepback:hover { color: var(--ya-text); }

/* شمارش معکوس کد */
.ya-resend { text-align: center; font-size: var(--ya-text-sm); color: var(--ya-text-muted); margin-top: var(--space-3); }
.ya-resend button { background: none; border: none; color: var(--ya-brand-strong); font-weight: 700; cursor: pointer; font-family: inherit; font-size: inherit; padding: 2px 4px; }
.ya-resend button:disabled { color: var(--ya-text-subtle); cursor: not-allowed; font-weight: 400; }

@media (max-width: 560px) {
  .ya-otp input { width: 42px; height: 52px; }
  .ya-auth__panel { padding: var(--space-5) var(--space-4); }
}

/* ════════════════════════════════════════════
   Register extras (بند ۳۲)
   ════════════════════════════════════════════ */
.ya-strength { height: 4px; border-radius: 999px; background: var(--ya-surface-2); margin-top: var(--space-2); overflow: hidden; }
.ya-strength span { display: block; height: 100%; width: 0; transition: width .3s, background .3s; border-radius: 999px; }
.ya-strength span.s1 { width: 25%; background: var(--ya-danger); }
.ya-strength span.s2 { width: 50%; background: #f59e0b; }
.ya-strength span.s3 { width: 75%; background: var(--ya-success); }
.ya-strength span.s4 { width: 100%; background: var(--brand); }
.ya-benefits { display: grid; gap: var(--space-2); margin-top: var(--space-5); list-style: none; padding: 0; }
.ya-benefits li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--ya-text-xs); color: var(--ya-text-muted); }
.ya-benefits i { color: var(--brand-strong, #3f7a0b); font-size: 12px; }

/* ════════════════════════════════════════════
   Dashboard Shell (بند ۳۴–۴۰)
   ════════════════════════════════════════════ */
.ya-dash { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; background: var(--color-background); }
.ya-dash.is-collapsed { grid-template-columns: 72px 1fr; }

/* overlay فقط در موبایل است؛ در دسکتاپ نباید سلول گرید را اشغال کند */
.ya-dash__overlay { display: none; }

/* نوار کناری */
.ya-dside { background: var(--ya-surface); border-inline-start: 1px solid var(--ya-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ya-dside__head { padding: var(--space-4) var(--space-4) var(--space-3); display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--ya-border); }
.ya-dside__brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--ya-text-lg); color: var(--ya-text); text-decoration: none; }
.ya-dside__brand b { color: var(--brand-text); }
.ya-dside__collapse { margin-inline-start: auto; background: none; border: 1px solid var(--ya-border); border-radius: var(--ya-radius-sm); width: 28px; height: 28px; display: grid; place-items: center; color: var(--ya-text-muted); cursor: pointer; font-size: 12px; }
.ya-dside__collapse:hover { color: var(--ya-text); background: var(--ya-surface-2); }
.ya-dside__scroll { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-2); scrollbar-width: thin; }
.ya-dside__scroll::-webkit-scrollbar { width: 5px; }
.ya-dside__scroll::-webkit-scrollbar-thumb { background: var(--ya-border); border-radius: 99px; }
.ya-dnav { display: grid; gap: 2px; }

/* ═══ درخت ناوبری (۶ سطح — بند ۱۴ و ۴۱) ═══ */
.ya-dnav__grp { margin-bottom: 2px; }
.ya-dnav__label { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--ya-text-subtle); padding: var(--space-2) var(--space-3) 4px; text-transform: uppercase; }
.is-collapsed .ya-dnav__label { opacity: 0; height: 6px; padding: 0; overflow: hidden; }

/* دسته‌ی اصلی (L1) — دکمه‌ی بازشونده */
.ya-dnav__cat {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px var(--space-3); border-radius: var(--ya-radius-md);
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--ya-text); font-size: var(--ya-text-sm); font-weight: 700;
  text-align: start; white-space: nowrap;
  transition: background .12s;
}
.ya-dnav__cat:hover { background: var(--ya-surface-2); }
.ya-dnav__cat i.ya-dnav__cat-ic { width: 18px; text-align: center; flex: none; font-size: 15px; color: var(--ya-brand-strong); }
.ya-dnav__cat .ya-dnav__txt { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ya-dnav__caret { font-size: 10px; color: var(--ya-text-subtle); transition: transform .18s ease; }
.ya-dnav__grp[data-ya-open="1"] > .ya-dnav__cat .ya-dnav__caret { transform: rotate(180deg); }

/* زیردرخت (L2+) */
.ya-dnav__sub {
  display: none; padding-inline-start: 10px; margin: 2px 0 6px;
  border-inline-start: 2px solid var(--ya-border);
}
.ya-dnav__grp[data-ya-open="1"] > .ya-dnav__sub,
.ya-dnav__item.is-on > .ya-dnav__sub { display: grid; gap: 2px; }

.ya-dnav__item { display: grid; }

.ya-dnav__a { display: flex; align-items: center; gap: 10px; padding: 8px var(--space-3); border-radius: var(--ya-radius-md); color: var(--ya-text-muted); text-decoration: none; font-size: var(--ya-text-sm); font-weight: 500; transition: background .12s, color .12s; white-space: nowrap; }
.ya-dnav__a:hover { background: var(--ya-surface-2); color: var(--ya-text); }
.ya-dnav__a.is-active { background: var(--ya-brand-soft); color: var(--ya-brand-strong); font-weight: 700; }
.ya-dnav__a.is-locked { opacity: .55; }
.ya-dnav__a i { width: 18px; text-align: center; flex: none; font-size: 14px; }
.ya-dnav__a .ya-dnav__txt { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ya-dnav__lock { flex: none; font-size: 9px; color: var(--ya-text-subtle); }
.is-collapsed .ya-dnav__a { justify-content: center; padding: 9px 0; }
.is-collapsed .ya-dnav__a .ya-dnav__txt, .is-collapsed .ya-dnav__a .ya-dnav__badge,
.is-collapsed .ya-dnav__a .ya-dnav__lock, .is-collapsed .ya-dnav__caret { display: none; }
.is-collapsed .ya-dnav__cat { justify-content: center; padding: 10px 0; }
.is-collapsed .ya-dnav__cat .ya-dnav__txt { display: none; }
.is-collapsed .ya-dnav__sub { display: none !important; }
.ya-dnav__badge { margin-inline-start: auto; background: var(--ya-danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; padding: 0 5px; }

.ya-dside__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--ya-border); font-size: var(--ya-text-xs); color: var(--ya-text-subtle); display: flex; align-items: center; gap: 6px; }

/* محتوای اصلی */
.ya-dmain { display: flex; flex-direction: column; min-width: 0; }
.ya-dtop { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ya-surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ya-border); padding: var(--space-3) var(--space-5); display: flex; align-items: center; gap: var(--space-4); }
.ya-dtop__burger { display: none; background: none; border: 1px solid var(--ya-border); border-radius: var(--ya-radius-sm); width: 34px; height: 34px; place-items: center; color: var(--ya-text-muted); cursor: pointer; }
.ya-dtop__title { font-size: var(--ya-text-lg); font-weight: 800; margin: 0; }
.ya-dtop__sub { font-size: var(--ya-text-xs); color: var(--ya-text-subtle); margin-top: 2px; }
.ya-dtop__spacer { flex: 1; }

/* ═══ Header actions: help, bell, profile (بندهای ۱۶ و ۱۸) ═══ */
.ya-dtop__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }

.ya-dhelp { background: none; border: 1px solid var(--ya-border); border-radius: var(--ya-radius-md); width: 34px; height: 34px; display: grid; place-items: center; color: var(--ya-text-muted); cursor: pointer; }
.ya-dhelp:hover { color: var(--ya-text); background: var(--ya-surface-2); }

/* Profile Menu (بند ۱۶) */
.ya-prof { position: relative; }
.ya-prof__btn { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--ya-border); border-radius: var(--ya-radius-lg); padding: 4px 8px 4px 10px; cursor: pointer; font-family: inherit; color: var(--ya-text); }
.ya-prof__btn:hover { background: var(--ya-surface-2); }
.ya-prof__av { width: 30px; height: 30px; border-radius: 50%; background: var(--brand, #8FE04A); color: #0b1208; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.ya-prof__av--lg { width: 42px; height: 42px; font-size: 16px; }
.ya-prof__txt { display: grid; line-height: 1.3; min-width: 0; }
.ya-prof__txt b { font-size: var(--ya-text-xs); font-weight: 700; white-space: nowrap; }
.ya-prof__txt small { font-size: 10px; color: var(--ya-text-subtle); white-space: nowrap; }
.ya-prof__caret { font-size: 9px; color: var(--ya-text-subtle); }
.ya-prof__pop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 290px; max-width: calc(100vw - 32px);
  background: var(--ya-surface); border: 1px solid var(--ya-border); border-radius: var(--ya-radius-lg);
  box-shadow: var(--ya-shadow-lg); z-index: 70; overflow: hidden;
}
.ya-prof__head { padding: 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--ya-border); background: var(--ya-brand-soft); }
.ya-prof__head b { display: block; font-size: var(--ya-text-sm); }
.ya-prof__head small { color: var(--ya-text-muted); font-size: var(--ya-text-xs); }
.ya-prof__meta { padding: 10px 14px; display: grid; gap: 6px; border-bottom: 1px solid var(--ya-border); }
.ya-prof__meta div { display: flex; justify-content: space-between; gap: 8px; font-size: var(--ya-text-xs); }
.ya-prof__meta span { color: var(--ya-text-muted); }
.ya-prof__meta b { font-weight: 700; }
.ya-prof__meta small { color: var(--ya-text-subtle); }
.ya-prof__list { padding: 6px; display: grid; }
.ya-prof__list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ya-radius-md); color: var(--ya-text-muted); text-decoration: none; font-size: var(--ya-text-sm); }
.ya-prof__list a:hover { background: var(--ya-surface-2); color: var(--ya-text); }
.ya-prof__list a i { width: 16px; text-align: center; font-size: 13px; flex: none; }
.ya-prof__foot { padding: 6px; border-top: 1px solid var(--ya-border); display: grid; gap: 2px; }
.ya-prof__home { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ya-radius-md); color: var(--ya-text-muted); text-decoration: none; font-size: var(--ya-text-sm); }
.ya-prof__home:hover { background: var(--ya-surface-2); color: var(--ya-text); }
.ya-prof__home i { width: 16px; text-align: center; font-size: 13px; }
.ya-prof__logout { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ya-radius-md); background: none; border: none; font-family: inherit; color: var(--ya-danger); font-size: var(--ya-text-sm); cursor: pointer; text-align: start; }
.ya-prof__logout:hover { background: color-mix(in srgb, var(--ya-danger) 8%, transparent); }
.ya-prof__logout i { width: 16px; text-align: center; font-size: 13px; }

/* جستجوی سراسری (Ctrl+K) */
.ya-cmdk { display: flex; align-items: center; gap: 8px; background: var(--ya-surface-2); border: 1px solid var(--ya-border); border-radius: var(--ya-radius-md); padding: 7px 12px; color: var(--ya-text-muted); cursor: pointer; font-size: var(--ya-text-sm); min-width: 220px; }
.ya-cmdk:hover { border-color: var(--ya-brand-border); }
.ya-cmdk kbd { margin-inline-start: auto; font-family: inherit; font-size: 10px; background: var(--ya-surface); border: 1px solid var(--ya-border); border-radius: 4px; padding: 1px 5px; color: var(--ya-text-subtle); }

/* پنل Ctrl+K */
.ya-cmdk-panel { position: fixed; inset: 0; z-index: var(--z-modal); display: none; }
.ya-cmdk-panel.is-open { display: block; }
.ya-cmdk__bg { position: absolute; inset: 0; background: rgba(6, 10, 4, .5); backdrop-filter: blur(2px); }
.ya-cmdk__box { position: absolute; top: 12vh; inset-inline: 50%; transform: translateX(50%); width: 92%; max-width: 560px; background: var(--ya-surface); border: 1px solid var(--ya-border); border-radius: var(--ya-radius-lg); box-shadow: var(--ya-shadow-lg); overflow: hidden; max-height: 60vh; display: flex; flex-direction: column; }
.ya-cmdk__input { width: 100%; padding: 14px 16px; border: none; border-bottom: 1px solid var(--ya-border); background: transparent; color: var(--ya-text); font-size: var(--ya-text-base); font-family: inherit; }
.ya-cmdk__input:focus { outline: none; }
.ya-cmdk__list { overflow-y: auto; padding: var(--space-2); }
.ya-cmdk__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--ya-radius-md); color: var(--ya-text-muted); font-size: var(--ya-text-sm); cursor: pointer; }
.ya-cmdk__item i { width: 18px; text-align: center; flex: none; }
.ya-cmdk__item.is-sel { background: var(--ya-brand-soft); color: var(--ya-brand-strong); font-weight: 700; }
.ya-cmdk__item small { margin-inline-start: auto; color: var(--ya-text-subtle); font-size: 10px; }
.ya-cmdk__empty { padding: var(--space-6); text-align: center; color: var(--ya-text-subtle); font-size: var(--ya-text-sm); }

/* اعلان‌ها */
.ya-dbell { position: relative; background: none; border: 1px solid var(--ya-border); border-radius: var(--ya-radius-md); width: 34px; height: 34px; display: grid; place-items: center; color: var(--ya-text-muted); cursor: pointer; }
.ya-dbell:hover { color: var(--ya-text); background: var(--ya-surface-2); }
.ya-dbell__dot { position: absolute; top: -4px; inset-inline-end: -4px; background: var(--ya-danger); color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 99px; display: grid; place-items: center; border: 2px solid var(--ya-surface); }
.ya-dbell__pop { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 340px; max-width: calc(100vw - 32px); background: var(--ya-surface); border: 1px solid var(--ya-border); border-radius: var(--ya-radius-lg); box-shadow: var(--ya-shadow-lg); z-index: 60; overflow: hidden; }
.ya-dbell__pop-h { padding: 12px 14px; border-bottom: 1px solid var(--ya-border); font-weight: 700; font-size: var(--ya-text-sm); display: flex; align-items: center; justify-content: space-between; }
.ya-dbell__list { max-height: 320px; overflow-y: auto; }
.ya-dbell__n { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--ya-border); font-size: var(--ya-text-sm); }
.ya-dbell__n:last-child { border-bottom: none; }
.ya-dbell__n.is-unread { background: var(--ya-brand-soft); }
.ya-dbell__n i { margin-top: 3px; flex: none; }
.ya-dbell__n b { display: block; font-size: var(--ya-text-sm); }
.ya-dbell__n small { color: var(--ya-text-subtle); font-size: var(--ya-text-xs); line-height: 1.5; }
.ya-dbell__pop-f { padding: 10px 14px; text-align: center; }

/* مسیر روشن */
.ya-dbcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--ya-text-xs); color: var(--ya-text-subtle); padding: var(--space-2) var(--space-5); border-bottom: 1px solid var(--ya-border); background: var(--ya-surface); }
.ya-dbcrumb a { color: var(--ya-text-muted); text-decoration: none; }
.ya-dbcrumb a:hover { color: var(--ya-brand-strong); }
.ya-dbcrumb span { color: var(--ya-text-subtle); }

.ya-dcontent { padding: var(--space-5); flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .ya-dash { grid-template-columns: 1fr; }
  /* کشوی موبایل: در RTL به لبه‌ی راست (هم‌خان با سایدبار دسکتاپ) چسبیده و
     برای مخفی‌شدن به سمت راست (خارج از صفحه) جابه‌جا می‌شود. در غیر اینصورت
     translateX(100%) در RTL روی صفحه می‌ماند، کلیک‌ها را می‌بلعد و دکمه‌ی همبرگر
     را می‌پوشاند. */
  .ya-dside {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    width: min(250px, 78vw); height: auto;
    z-index: var(--z-drawer);
    transform: translateX(100%); transition: transform .25s;
    box-shadow: var(--ya-shadow-lg);
  }
  .ya-dash.is-open .ya-dside { transform: none; }
  /* موبایل: حالت جمع‌شده‌ی دسکتاپ رو لغو کن — متن‌ها و زیرمنوها باید پیداتر باشن */
  .ya-dash.is-collapsed { grid-template-columns: 1fr; }
  .ya-dash.is-collapsed .ya-dnav__label { opacity: 1; height: auto; padding: var(--space-2) var(--space-3) 4px; }
  .ya-dash.is-collapsed .ya-dnav__a { justify-content: start; padding: 8px var(--space-3); }
  .ya-dash.is-collapsed .ya-dnav__a .ya-dnav__txt, .ya-dash.is-collapsed .ya-dnav__a .ya-dnav__badge,
  .ya-dash.is-collapsed .ya-dnav__a .ya-dnav__lock, .ya-dash.is-collapsed .ya-dnav__caret { display: revert !important; }
  .ya-dash.is-collapsed .ya-dnav__cat { justify-content: start; padding: 10px var(--space-3); }
  .ya-dash.is-collapsed .ya-dnav__cat .ya-dnav__txt { display: inline !important; }
  .ya-dash.is-collapsed .ya-dnav__sub { display: none !important; }
  .ya-dash.is-collapsed .ya-dnav__grp[data-ya-open="1"] > .ya-dnav__sub,
  .ya-dash.is-collapsed .ya-dnav__item.is-on > .ya-dnav__sub { display: grid !important; }
  .ya-dash__overlay { display: none; position: fixed; inset: 0; background: rgba(6,10,4,.5); z-index: var(--z-drawer); }
  .ya-dash.is-open .ya-dash__overlay { display: block; }
  /* هدر بالاتر از نوار پایین موبایل (۹۰۰) تا بازشده‌های پروفایل/اعلان پشت آن نروند */
  .ya-dtop { padding: var(--space-3); flex-wrap: wrap; z-index: 950; }
  .ya-dtop__burger { display: grid; }
  .ya-cmdk { min-width: 0; flex: 1; max-width: 200px; }
  .ya-cmdk kbd { display: none; }
  .ya-dcontent { padding: var(--space-4); }
  /* موبایل: متن پروفایل مخفی، فقط آواتار */
  .ya-prof__txt, .ya-prof__caret, .ya-dhelp { display: none; }
  .ya-prof__btn { padding: 3px; border: none; }
  .ya-prof__pop { width: calc(100vw - 32px); }
  /* در صفحه‌های کوتاه (افقی) برش نخورند و داخلشان اسکرول شود */
  .ya-prof__pop, .ya-dbell__pop {
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
  }
  /* از لبه‌ی راست صفحه بیرون نزند */
  .ya-dbell__pop { width: calc(100vw - 90px); }
}
@media (max-width: 520px) {
  .ya-dtop__titles { min-width: 0; }
  .ya-dtop__title { font-size: var(--ya-text-base); }
  .ya-dtop__sub { display: none; }
}

/* ════════════════════════════════════════════
   Dashboard widgets (بند ۴۱–۴۵)
   ════════════════════════════════════════════ */
.ya-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.ya-kpi {
  position: relative;
  background: var(--ya-surface); border: 1px solid var(--ya-border);
  border-radius: var(--ya-radius-lg); padding: var(--space-4);
  transition: box-shadow var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.ya-kpi:hover { box-shadow: var(--shadow-md); border-color: var(--brand-line); }
/* دو چیدمان KPI — ui.js انباشته، ya-dash-home.js ردیفی */
.ya-kpi--row { display: flex; gap: var(--space-3); align-items: flex-start; }
.ya-kpi--stack { display: block; }
.ya-kpi--empty { background: var(--color-surface-sunken); }
.ya-kpi__ic { width: 38px; height: 38px; border-radius: var(--ya-radius-md); background: var(--ya-brand-soft); color: var(--ya-brand-strong); display: grid; place-items: center; font-size: 16px; flex: none; }
.ya-kpi__body { display: grid; gap: 2px; min-width: 0; }
.ya-kpi__body small { font-size: var(--ya-text-xs); color: var(--ya-text-muted); }
.ya-kpi__body strong { font-size: var(--ya-text-xl); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ya-kpi__trend { font-size: var(--ya-text-xs); color: var(--ya-success); font-variant-numeric: tabular-nums; }
.ya-kpi__trend.is-down { color: var(--ya-danger); }
.ya-kpi__src { font-size: 9px !important; color: var(--ya-text-subtle) !important; opacity: .8; }
.ya-kpi__err { font-size: var(--ya-text-xs); color: var(--color-danger); font-weight: 600; }
.ya-kpi__retry {
  margin-top: var(--space-2); padding: 4px 10px; min-height: 28px;
  font-size: var(--ya-text-xs); font-weight: 600; cursor: pointer;
  color: var(--color-primary); background: var(--brand-soft);
  border: 1px solid var(--brand-line); border-radius: 50px;
}
.ya-kpi__retry:hover { background: var(--brand-line); }

/* ---------- نوار شکست نرم بخش‌های صفحه (بارگذاری ناقص API) ---------- */
.ya-softfail {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  flex-wrap: wrap; margin: var(--space-4) auto; max-width: var(--container);
  padding: 10px var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted);
  background: var(--color-warning-soft); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.ya-softfail__btn {
  min-height: 36px; padding: 6px 14px; cursor: pointer;
  font-size: var(--text-xs); font-weight: 700;
  color: var(--color-primary); background: var(--color-surface);
  border: 1px solid var(--brand-line); border-radius: 50px;
}
.ya-softfail__btn:hover { background: var(--brand-soft); }
.ya-kpi__skel { display: inline-block; width: 64px; height: 20px; border-radius: 6px; background: var(--ya-surface-2); animation: ya-pulse 1.2s ease-in-out infinite; }

.ya-dgrid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: start; }

/* ═══ Quick Actions (بند ۲۸) ═══ */
.ya-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-3); }
.ya-quick__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-3) var(--space-2); border: 1px solid var(--ya-border); border-radius: var(--ya-radius-lg); background: var(--ya-surface); color: var(--ya-text); text-decoration: none; cursor: pointer; font-family: inherit; font-size: var(--ya-text-xs); font-weight: 600; transition: border-color .15s, background .15s, transform .15s; text-align: center; }
.ya-quick__btn:hover { border-color: var(--ya-brand-border); background: var(--ya-brand-soft); transform: translateY(-2px); }
.ya-quick__btn i { width: 34px; height: 34px; border-radius: var(--ya-radius-md); background: var(--ya-surface-2); color: var(--ya-brand-strong); display: grid; place-items: center; font-size: 15px; }
.ya-quick__btn:hover i { background: var(--brand, #8FE04A); color: #0b1208; }
.ya-quick__btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ═══ Onboarding Wizard (بند ۲۷) ═══ */
.ya-onb { }
.ya-onb__steps { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-4); }
.ya-onb__step { display: flex; align-items: center; gap: 6px; font-size: var(--ya-text-xs); color: var(--ya-text-subtle); }
.ya-onb__dot { width: 22px; height: 22px; border-radius: 50%; background: var(--ya-surface-2); color: var(--ya-text-subtle); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.ya-onb__step.is-active .ya-onb__dot { background: var(--brand, #8FE04A); color: #0b1208; }
.ya-onb__step.is-active { color: var(--ya-text); font-weight: 700; }
.ya-onb__line { flex: 1; height: 2px; background: var(--ya-border); border-radius: 99px; }
.ya-onb__line.is-done { background: var(--brand, #8FE04A); }

.ya-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.ya-mod { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-2); border: 1px solid var(--ya-border); border-radius: var(--ya-radius-lg); background: var(--ya-surface); text-decoration: none; color: var(--ya-text); transition: border-color .15s, background .15s, transform .15s; text-align: center; }
.ya-mod:hover { border-color: var(--ya-brand-border); background: var(--ya-brand-soft); transform: translateY(-2px); }
.ya-mod__ic { width: 40px; height: 40px; border-radius: var(--ya-radius-md); background: var(--ya-surface-2); color: var(--ya-brand-strong); display: grid; place-items: center; font-size: 18px; }
.ya-mod:hover .ya-mod__ic { background: var(--brand); color: #0b1208; }
.ya-mod__t { font-size: var(--ya-text-xs); font-weight: 600; line-height: 1.4; }

.ya-row { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--ya-border); }
.ya-row:last-child { border-bottom: none; }
.ya-row__ic { width: 34px; height: 34px; border-radius: var(--ya-radius-md); background: var(--ya-surface-2); display: grid; place-items: center; color: var(--ya-text-muted); font-size: 14px; flex: none; }
.ya-row__body { flex: 1; min-width: 0; }
.ya-row__body b { display: block; font-size: var(--ya-text-sm); }
.ya-row__body small { color: var(--ya-text-subtle); font-size: var(--ya-text-xs); }
.ya-row__amt { font-weight: 700; font-size: var(--ya-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ya-skel-row { height: 40px; border-radius: var(--ya-radius-md); background: var(--ya-surface-2); margin-bottom: var(--space-2); animation: ya-pulse 1.2s ease-in-out infinite; }

.ya-userinfo { display: grid; gap: 2px; margin-top: var(--space-3); }
.ya-userinfo__row { display: flex; justify-content: space-between; gap: var(--space-4); padding: 9px 0; border-bottom: 1px solid var(--ya-border); font-size: var(--ya-text-sm); }
.ya-userinfo__row:last-child { border-bottom: none; }
.ya-userinfo__row span { color: var(--ya-text-muted); }
.ya-userinfo__row b { font-weight: 700; }

@keyframes ya-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

@media (max-width: 1100px) {
  .ya-kpis { grid-template-columns: repeat(2, 1fr); }
  .ya-dgrid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ya-kpis { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   Error Pages (بند ۵۰)
   ════════════════════════════════════════════ */
.ya-error { min-height: 100vh; display: grid; place-items: center; padding: var(--space-5) var(--space-4); background: var(--ya-bg); }
.ya-error__card { text-align: center; max-width: 460px; }
.ya-error__code { font-size: 96px; font-weight: 900; line-height: 1; color: var(--brand-text); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ya-error__ic { width: 56px; height: 56px; border-radius: var(--ya-radius-lg); background: var(--ya-brand-soft); color: var(--ya-brand-strong); display: grid; place-items: center; font-size: 24px; margin: 0 auto var(--space-4); }
.ya-error h1 { font-size: var(--ya-text-2xl); font-weight: 800; margin: var(--space-4) 0 var(--space-2); }
.ya-error p { color: var(--ya-text-muted); font-size: var(--ya-text-sm); line-height: 1.7; margin-bottom: var(--space-6); }
.ya-error__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.ya-error__search { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--ya-border); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--ya-text-sm); color: var(--ya-text-muted); }
.ya-error__search a { color: var(--ya-brand-strong); font-weight: 700; text-decoration: none; }

@media (max-width: 480px) {
  .ya-error__code { font-size: 72px; }
  .ya-error__actions { flex-direction: column; }
}

/* ════════════════════════════════════════════
   Mobile Bottom Bar — خانه/وبلاگ/داشبورد/ورود (بند ۸ موبایل)
   ════════════════════════════════════════════ */
.ya-tabbar {
  display: none;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-block-start: 1px solid var(--color-border);
  padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 22px -14px rgba(16, 24, 32, .22);
}
.ya-tabbar__item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 7px 4px; text-decoration: none;
  font-size: 10.5px; font-weight: 600; color: var(--color-text-subtle);
  background: none; border: none; cursor: pointer; font-family: inherit;
  transition: color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
  border-radius: var(--radius-md);
}
.ya-tabbar__item i { font-size: 17px; }
.ya-tabbar__item.is-active { color: var(--color-primary); }
.ya-tabbar__item.is-active i { color: var(--color-primary); }
.ya-tabbar__item:active { background: var(--brand-soft); }
.ya-tabbar__dot {
  position: absolute; top: 4px; inset-inline-end: calc(50% - 18px);
  min-width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-danger); border: 1.5px solid #fff;
}
.ya-tabbar__item { position: relative; }

/* پدینگ بدنه برای جلوگیری از پنهان شدن محتوا زیر نوار */
body.ya-has-tabbar { padding-block-end: calc(68px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 640px) {
  .ya-tabbar { display: flex; }
}

/* ════════════════════════════════════════════════════════════════
   Admin Dashboard (بندهای ۳ و ۱۱)
   ════════════════════════════════════════════════════════════════ */
.ya-admtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--ya-border); margin-bottom: var(--space-4); }
.ya-admtab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 14px; font-family: inherit; font-size: var(--ya-text-sm); font-weight: 600;
  color: var(--ya-text-muted); cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: color .12s, border-color .12s;
}
.ya-admtab:hover { color: var(--ya-text); }
.ya-admtab.is-active { color: var(--ya-brand-strong); border-bottom-color: var(--ya-brand-strong); }
.ya-admtab i { font-size: 13px; }

.ya-admin__body > :first-child { margin-top: 0; }

/* Pill/بجج وضعیت */
.ya-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  white-space: nowrap; line-height: 1.7;
}
.ya-pill--ok { background: color-mix(in srgb, var(--ya-success, #22c55e) 12%, transparent); color: var(--ya-success, #15803d); }
.ya-pill--warn { background: color-mix(in srgb, var(--ya-warning, #f59e0b) 14%, transparent); color: var(--ya-warning, #b45309); }
.ya-pill--err { background: color-mix(in srgb, var(--ya-danger, #ef4444) 12%, transparent); color: var(--ya-danger, #b91c1c); }
.ya-pill--muted { background: var(--ya-surface-2); color: var(--ya-text-subtle); }

/* جداول دیتا */
.ya-tbl-wrap { overflow-x: auto; border: 1px solid var(--ya-border); border-radius: var(--ya-radius-md); }
.ya-tbl { width: 100%; border-collapse: collapse; font-size: var(--ya-text-xs); min-width: 640px; }
.ya-tbl thead th { text-align: start; padding: 9px 12px; background: var(--ya-surface-2); color: var(--ya-text-muted); font-weight: 700; border-bottom: 1px solid var(--ya-border); white-space: nowrap; }
.ya-tbl tbody td { padding: 9px 12px; border-bottom: 1px solid var(--ya-border); color: var(--ya-text); vertical-align: middle; }
.ya-tbl tbody tr:last-child td { border-bottom: none; }
.ya-tbl tbody tr:hover { background: var(--ya-surface-2); }
.ya-tbl small { color: var(--ya-text-subtle); font-weight: 400; }

@media (max-width: 640px) {
  .ya-admtab { padding: 9px 10px; font-size: var(--ya-text-xs); }
  .ya-admtab span { display: none; }
}