/**
 * Arshia brand layer — extracted from inline <style> blocks in functions.php
 * ---------------------------------------------------------------------------
 * These rules previously shipped as four wp_head callbacks at priorities
 * 999 / 997 / 996 / 995. They are emitted in that same order below so the
 * cascade is byte-for-byte equivalent to the old behaviour.
 *
 * Loaded with `main.css` as its dependency, so it always wins against base
 * styles without relying on !important where avoidable. The !important flags
 * below are intentional carry-overs: they were needed to beat plugin styles
 * that load after the theme, and removing them would change rendering.
 *
 * Constitution: Principle IV — no inline <style> blobs in PHP.
 */

/* ─────────────────────────────────────────────────────────────
   1. Brand tokens + header/section colours   (was: wp_head 999)
   ───────────────────────────────────────────────────────────── */

:root {
    --brand-blue: #352070;
    --brand-blue-dark: #2a1a5a;
    --brand-gold: #EEBB66;
    --brand-gold-light: #f5cc85;
}

/* ---- Header: white bg, readable text (no dark override!) ---- */
.header {
    background: #ffffff !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .06) !important;
}

.logo-text {
    color: var(--brand-blue) !important;
    font-size: 1.35rem;
    white-space: nowrap;
    font-weight: 800;
}

/* لوگوی افقی برند (P197): PNG/WebP با پس‌زمینۀ شفافِ واقعی، نسبت ۳:۱.
   ارتفاع‌محور: دسکتاپ ۶۴px (بازهٔ ۶۰–۷۰)، موبایل ۴۸px؛ عرض خودکار تا نسبت حفظ شود.
   انتخابگر دوکلاسی `.logo .logo-img` تا بر `.logo img{height:42px}`ِ main.css ببرد. */
.logo .logo-pic {
    display: contents;
}

.logo .logo-img {
    height: 64px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

@media (max-width: 600px) {
    .logo .logo-img {
        height: 48px;
    }
}

/* ─────────────────────────────────────────────────────────────
   7. نشان‌های «نوع نصب» — ویندوزی / وب / ابری
      روی کارت محصولات (آرشیو و فروشگاه) و صفحهٔ تک‌محصول.
      سه سطح نام‌گذاری عمدی‌اند: .ap-* برای کارت‌ها و .app-* برای
      صفحهٔ تک‌محصول، تا با استایل‌های موجود همان سطح تداخل نکنند.
   ───────────────────────────────────────────────────────────── */
.ap-vers,
.app-ver-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
}

.ap-ver,
.app-ver {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* ویندوزی — بنفش برند */
.ap-ver--win,
.app-ver--win {
    background: #f0ebfa;
    color: #352070;
    border-color: #d6ccf5;
}

/* تحت وب — سبز-آبی */
.ap-ver--web,
.app-ver--web {
    background: #e9f7ef;
    color: #1e7e4d;
    border-color: #bfe6d0;
}

/* ابری — آبی آسمانی، چون خدمت تازه است چشم می‌کشد */
.ap-ver--cloud,
.app-ver--cloud {
    background: #e8f3fd;
    color: #1b6ca8;
    border-color: #bcdcf3;
}

/* در صفحهٔ تک‌محصول چیپ‌ها کمی بزرگ‌ترند */
.app-ver {
    font-size: .85rem;
    padding: 5px 14px;
}

@media (max-width: 600px) {
    .ap-vers {
        gap: 5px;
    }

    .ap-ver {
        font-size: .72rem;
        padding: 2px 9px;
    }
}

/* کارت‌های اطلاعات تماس — صفحهٔ /contact/
   توجه: لینک‌های داخل محتوای نوشته‌ها با `a{color:var(--brand-blue)!important}`
   (قانون ۱ بالای همین فایل) بنفش می‌شوند؛ پس رنگ این لینک‌ها هم باید
   !important باشد وگرنه باز هم بنفش دیده می‌شوند. */
.ar-contact-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0 28px;
}

.ar-ci-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #f7f5fc;
    border: 1px solid #e7e1f3;
    border-radius: 14px;
    padding: 16px 18px;
}

.ar-ci-ico {
    font-size: 1.35rem;
    line-height: 1.5;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue);
}
/* MFS — در صفحهٔ تماس کلاس ar-ci-ico روی خودِ <svg> نشسته است؛ بدون
   width/height مرورگر آن را ۳۰۰×۱۵۰ رندر می‌کند و کارت را منفجر می‌کند.
   اندازه روی هر دو حالت (svg با کلاس، و svg داخل span) ست می‌شود. */
.ar-ci-ico svg,
svg.ar-ci-ico {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
}

/* MFS — آیکون خوشامد (MI-88) کنار سلامِ پنل باشگاه صفحهٔ اصلی */
.al-panel-head h3 svg.arshia-mi {
    vertical-align: -0.12em;
    color: var(--brand-gold);
}

/* AI Tools page icons */
.ai-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    vertical-align: -0.2em;
}
.ai-ico svg {
    width: 100%;
    height: 100%;
}

.ar-ci-body strong {
    display: block;
    color: var(--brand-blue);
    font-size: .95rem;
    margin-bottom: 6px;
}

.ar-ci-body a {
    display: block;
    color: #2d3436 !important;
    font-size: .92rem;
    line-height: 2;
}

.ar-ci-body a:hover {
    color: var(--brand-blue) !important;
}

.ar-ci-body p {
    margin: 0;
    color: #2d3436;
    font-size: .92rem;
    line-height: 1.9;
}

@media (max-width: 760px) {
    .ar-contact-info {
        grid-template-columns: 1fr;
    }
}

.nav-menu li a {
    color: #2d3436 !important;
}

.nav-menu li a:hover {
    color: var(--brand-blue) !important;
    background: #f0ebfa !important;
}

.mobile-toggle span {
    background: #2d3436 !important;
}

/* Dropdown sub-menu readable */
.nav-menu .sub-menu a {
    color: #2d3436 !important;
}

.nav-menu .sub-menu a:hover {
    color: var(--brand-blue) !important;
    background: #f0ebfa !important;
}

/* ---- Brand-coloured sections (NOT the header) ---- */
.arshia-ticker {
    background: var(--brand-blue) !important;
    color: #fff !important;
}

.arshia-blog-hero,
.arshia-archive-hero,
.arshia-db-header,
.arshia-newsletter-box,
.stats-section,
.cta-section {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark)) !important;
    color: #fff !important;
}

/* اسلایدهای جدید صفحهٔ اصلی تم بنفش تیره‌اند و متن فارسی خودشان را داخل
   تصویر دارند؛ گرادیان تیرهٔ پس‌زمینه متن طلایی داخل تصویر را کم‌نور می‌کرد.
   لایهٔ HTML فقط دکمهٔ CTA را در گوشهٔ خلوتِ پایین‌چپ نگه می‌دارد. */
.arshia-slide-overlay {
    background: none !important;
}

.arshia-slide-arrow:hover,
.arshia-slide-dot.is-active,
.arshia-newsletter-btn {
    background: var(--brand-gold) !important;
}

.arshia-newsletter-btn:hover {
    background: var(--brand-gold-light) !important;
}

.ashop-btn,
.ap-filter.is-active {
    background: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
}

.ap-filter.is-active {
    background: var(--brand-blue) !important;
    color: #fff !important;
}

/* ── لینک‌ها و متن‌های بنفش روی سطوح روشن ─────────────────────────
   اینجا قبلاً یک `a { color: var(--brand-blue) !important }` سراسری بود.
   چون !important بر استایل درون‌خطی هم پیروز می‌شود، متن سفیدِ دکمه‌های
   بنفشی که رنگشان را inline تعریف کرده‌اند (دکمه‌های محتوای
   job-descriptions، .arcmp-btn.is-primary، .arshia-ticker-link) را
   بنفش می‌کرد و متن عملاً ناپیدا می‌شد (۱٫۰۰:۱).
   main.css از قبل `a { color: var(--primary) }` را دارد، پس لینک‌های
   عادی بدون !important هم بنفش می‌مانند. اینجا فقط متن‌هایی می‌مانند
   که واقعاً به قاعدهٔ اختصاصی نیاز دارند. */
.ab-read-more,
.ap-title a:hover,
.arshia-faq-q:hover,
.ashop-price {
    color: var(--brand-blue) !important;
}

/* ── متن روشن روی سطوح بنفش/تیره ──────────────────────────────────
   فقط دکمه‌هایی فهرست می‌شوند که پس‌زمینهٔ تیره دارند. دکمه‌های
   روشن (.btn-white، .btn-outline، .btn-gold) عمداً اینجا نیستند؛
   آن‌ها متن بنفش می‌خواهند و پایین‌تر تعریف شده‌اند.
   قبلاً اینجا `a.btn` هم بود: چون هر دکمه‌ای کلاس .btn دارد، آن قاعده
   با `color:#fff !important` پروندهٔ .btn-outline و .btn-white را هم
   سفید می‌کرد — یعنی متن سفید روی زمینهٔ سفید (۱٫۰۰:۱). آن قاعده در
   زمانی لازم بود که `a { color: … !important }` سراسری وجود داشت؛
   با حذف آن، دیگر نیازی به آن نیست. */
.btn a,
.btn-primary,
.btn-ghost,
.arshia-portal-btn,
.alc-btn-primary,
.ashop-btn,
.arshia-dc-dl {
    color: #fff !important;
}

/* `.arshia-gr-btn` (پلاگین رشد) پس‌زمینهٔ گرادیان طلایی دارد
   (linear-gradient(#EEBB66,#d9a23f)) و خودش متن تیره #2b2040 می‌گذارد.
   این کلاس در فهرست بالا بود و `color:#fff !important` متن سفید را روی
   طلایی تحمیل می‌کرد: ۱٫۷۶:۱. بیرون آمد تا مقدار خود پلاگین بماند
   (#2b2040 روی #EEBB66 = ۸٫۴:۱ و روی #d9a23f = ۶٫۴:۱). */

/* .arshia-ticker-btn روی زمینهٔ طلایی است؛ متنش باید تیره بماند
   (پلاگین arshia-extra همین را تعریف می‌کند: #24154e روی #EEBB66 = ۹٫۲۴:۱).
   این کلاس قبلاً در فهرست بالا بود و متن سفید را با ۱٫۷۶:۱ تحمیل می‌کرد. */

/* دکمهٔ «مشاهده جزئیات» کارت محصول (.ap-cta) پس‌زمینهٔ بنفش دارد، پس متن
   باید سفید بماند؛ قاعدهٔ سراسری `a` در بالا بدون این مورد متن را هم‌رنگ
   پس‌زمینه می‌کرد (کنتراست ۱:۱). خاصیت !important لازم است چون همان
   قاعدهٔ سراسری هم !important است و specificity در برابر آن کار نمی‌کند. */
.app-canvas a.ap-cta {
    color: #fff !important;
}

/* همان ریشه، همان صفحه: دکمهٔ شبحِ هیروی آرشیو محصولات هم یک لینک است و
   متنش را قاعدهٔ سراسری بالا بنفش می‌کرد، در حالی که روی هیروی بنفش
   قرار دارد و تقریباً ناخوانا بود. این قاعده فقط همان مقداری را برمی‌گرداند
   که style-products.css از قبل برایش تعریف کرده (#fff). دکمهٔ اصلی طلایی
   (.app-hero-btn--primary) دست‌نخورده می‌ماند و نسخهٔ <button> این کلاس
   در صفحهٔ تک‌محصول هرگز گرفتار قاعدهٔ a نبوده است. */
.app-canvas a.app-hero-btn--ghost {
    color: #fff !important;
}

/* دکمه‌های روشن (.btn-white، .btn-outline) متن بنفش روی زمینهٔ روشن
   دارند. این بلوک عمداً بدون `!important` و با specificity پایین است تا
   main.css بتواند در :hover پس‌زمینه را بنفش و متن را سفید کند
   (`.btn-outline:hover` = 0,2,0 در برابر 0,1,1 این قاعده).
   نسخهٔ قبلی `color: var(--brand-blue) !important` بود و همان
   !important رنگ سفیدِ حالت hover را در ۶۹ واقعهٔ ۴۷ صفحه می‌بلعید؛
   نتیجه متن بنفش روی زمینهٔ بنفش با نسبت ۱٫۰۰:۱ بود.
   سطوح تیره (.cta-actions، .home-canvas .consult-band) با specificity
   بالاتر رنگ سفید خودشان را حفظ می‌کنند و دست‌نخورده می‌مانند. */
a.btn-white,
a.btn-outline,
.btn-white,
.btn-outline {
    color: var(--brand-blue);
}

/* ── قرارداد سطوح معکوس ───────────────────────────────────────────
   main.css به همهٔ `p` رنگ خاکستری می‌دهد. داخل بخش‌های بنفش آن
   خاکستری عوض نمی‌شود و روی #2a1a5a فقط ۲٫۸۷:۱ می‌دهد — فوتر و
   هر بخش CTA. هر سطح معکوس باید متنِ خودش را به ارث بدهد. */
:is(.cta-section, .stats-section, .arshia-blog-hero, .arshia-archive-hero,
    .arshia-db-header, .arshia-newsletter-box, .footer,
    .ar-course-content, .ar-course-side) :where(p) {
    color: inherit;
}

/* سربرگ‌های پلاگین ابزارهای آنلاین (arshia-ai-tools) هم همان قرارداد را
   می‌خواهند: خودشان `color: white` می‌گذارند و متن را به ارث می‌سپارند،
   اما قاعدهٔ `p { color: var(--text-light) }` در main.css همیشه بر
   ارث‌بری پیروز می‌شود. نتیجه: متن #636e72 روی زمینهٔ بنفش = ۲٫۵۲:۱ و
   روی سبز #217346 = ۱٫۱۱:۱. */
:is(.ai-header, .analysis-header, .excel-header, .crm-header, .chatbot-header) p {
    color: inherit;
}

/* دکمهٔ طلایی: متن بنفش روی زمینهٔ طلایی.
   پیش‌تر متن این دکمه سفید بود و روی #EEBB66 کنتراست ۱٫۷۶:۱ می‌داد
   یعنی CTA اصلی صفحهٔ اصلی عملاً خوانا نبود (P192-002 / P193).
   #352070 روی #EEBB66 = ۷٫۴۹:۱ (AA و AAA برای متن معمولی).
   زمینهٔ پایه هم اینجا تعریف می‌شود، چون بیرون از `.home-canvas`
   (مثلاً نتیجهٔ جست‌وجو) این کلاس هیچ زمینه‌ای نداشت و متن سفیدش
   روی صفحهٔ سفید دیده نمی‌شد. بدون `!important` تا حالت‌های
   hover/active موجود در style-home.css دست‌نخورده بمانند. */
.btn-gold {
    background-color: var(--brand-gold);
    border-color: var(--brand-gold);
}

a.btn-gold,
.btn-gold {
    color: var(--brand-blue) !important;
}

a.btn-gold:hover,
.btn-gold:hover {
    color: var(--brand-blue-dark) !important;
}

/* دکمهٔ شبح روی زمینهٔ تیره متن سفید می‌خواهد — دست‌نخورده. */
a.btn-ghost,
.btn-ghost {
    color: #fff !important;
}

/* Footer: deep brand blue is fine there */
.footer {
    background: var(--brand-blue-dark) !important;
}


/* ─────────────────────────────────────────────────────────────
   2. Compact footer layout   (was: wp_head 997)
   ───────────────────────────────────────────────────────────── */

/* Quick links in 2 columns to save height */
.footer .footer-col h4 + ul,
.footer .footer-col .menu,
.footer .footer-col > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.footer .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
    gap: 26px;
    align-items: start;
}

.footer-col h4 {
    margin-bottom: 12px;
    font-size: 15px;
}

.footer .footer-col li {
    font-size: 13px;
    line-height: 1.6;
}

.footer .footer-col li a {
    line-height: 1.5;
    margin-bottom: 4px;
}

.footer .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Compact newsletter */
.arshia-newsletter-box {
    padding: 24px 20px !important;
    max-width: 520px;
    margin: 0 auto;
}

.arshia-newsletter-title {
    font-size: 18px !important;
    margin-bottom: 6px !important;
}

.arshia-newsletter-desc {
    font-size: 12.5px !important;
    margin-bottom: 14px !important;
}

/* Compact overall footer spacing */
.footer {
    padding: 32px 20px 16px !important;
}

.footer-bottom {
    margin-top: 14px;
    font-size: 12.5px;
}

@media (max-width: 1024px) {
    .footer .footer-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 22px;
    }
}

@media (max-width: 800px) {
    .footer .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px;
    }
}

@media (max-width: 560px) {
    .footer .footer-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   3. Footer link colours — readable white on dark purple
      (was: wp_head 996)
   ───────────────────────────────────────────────────────────── */

.footer {
    color: #ffffff !important;
}

.footer a,
.footer .footer-col a {
    color: #ffffff !important;
    opacity: .92;
    transition: color .2s, opacity .2s;
}

.footer a:hover,
.footer .footer-col a:hover {
    color: #EEBB66 !important;
    opacity: 1;
}

.footer h3,
.footer h4,
.footer .footer-bottom p {
    color: #ffffff !important;
}

.footer .contact-info li,
.footer .footer-col li {
    color: rgba(255, 255, 255, .9) !important;
}

/* زیرلایهٔ سفید تضمین می‌کند لوگوی رسمی هر برند روی پس‌زمینهٔ بنفش تیره
   خوانا باشد، و hover/focus با طلایی سازمانی #EEBB66 مشخص است. */
.footer .social-links a {
    background: rgba(255, 255, 255, .96) !important;
    color: #352070 !important;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}

.footer .social-links a:hover,
.footer .social-links a:focus-visible {
    background: #EEBB66 !important;
    color: #352070 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

.footer .social-links a:focus-visible {
    outline: 3px solid #EEBB66 !important;
    outline-offset: 2px;
}

/* رنگ رسمی هر لوگو؛ fill در فایل SVG با currentColor خوانده می‌شود. */
.footer .social-telegram  .social-icon { color: #26A5E4; }
.footer .social-instagram .social-icon { color: #E4405F; }
.footer .social-linkedin  .social-icon { color: #0A66C2; }
.footer .social-whatsapp  .social-icon { color: #25D366; }
.footer .social-aparat    .social-icon { color: #ED145B; }
.footer .social-email     .social-icon { color: #352070; }
.footer .social-youtube   .social-icon { color: #FF0000; }

.footer .social-name {
    color: #352070 !important;
}

/* P174 — آیکون پاکت ایمیل در ستون «تماس با ما» (SVG به‌جای ایموجی 📧).
   بدون عرض صریح، span به عرض صفر جمع می‌شود و آیکون دیده نمی‌شود. */
.footer .contact-info .contact-ico {
    display: inline-flex;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.footer .contact-info .contact-ico svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

/* P175 — آیکون آدرس: آدرس چندخطی است، پس آیکون باید با خط اول هم‌تراز شود نه وسط بلوک */
.footer .contact-info li.contact-address {
    align-items: flex-start;
}
.footer .contact-info li.contact-address .contact-ico {
    margin-top: 3px;
}
.footer .contact-info li.contact-address .contact-text {
    min-width: 0;
    overflow-wrap: break-word;
}

/* P175 — ستون «تماس با ما» تک‌ستونه است، نه گرید ۲ستونهٔ عمومی فوتر.
   قاعدهٔ .footer .footer-col > ul ستون را 1fr 1fr می‌کرد و آدرس در نیم‌ستون
   به ۵ تا ۷ خط می‌شکست و در RTL از لبهٔ چپ بیرون می‌زد. minmax(0,1fr) هم
   اجازهٔ جمع‌شدن زیر min-content را می‌دهد تا سرریز افقی رخ ندهد. */
.footer .footer-col > ul.contact-info {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}


/* ─────────────────────────────────────────────────────────────
   4. AI Tools button fix — white text on purple
      (was: wp_head 995)
   ───────────────────────────────────────────────────────────── */

/* Keep global brand purple links, but NOT on buttons */
.ai-tool-btn,
.ai-tool-btn:visited,
.ai-tool-btn:link {
    color: #ffffff !important;
    background: #352070 !important;
    border: 1px solid #352070 !important;
}

.ai-tool-btn:hover {
    background: #EEBB66 !important;
    color: #1a1040 !important;
    border-color: #EEBB66 !important;
}

.upload-btn,
.ai-upload-btn {
    color: #352070 !important;
    background: #f0ebfa !important;
    border: 1px solid #352070 !important;
}

.upload-btn:hover,
.ai-upload-btn:hover {
    background: #352070 !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   5. Site slogan strip in the footer
      (was: inline style="" attributes in the wp_footer callback)
   ───────────────────────────────────────────────────────────── */

.arshia-slogan-footer {
    text-align: center;
    padding: 8px 0;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: 13px;
    color: #aaa;
    background: #2a1a5a;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.arshia-slogan-accent {
    color: #EEBB66;
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   6. اصلاح سرریز افقی سرصفحه در موبایل
      `.logo-text` با `white-space: nowrap` عرض min-content لوگو را به
      ۳۸۱px می‌رساند، در حالی که `.header-top` روی صفحهٔ ۳۹۰px فقط
      ~۳۴۲px جا دارد. نتیجه: کل body به راست می‌رود (left: 71px) و هر
      صفحه ۷۱px سرریز افقی پیدا می‌کند. با اجازهٔ شکستن خط و کمی
      کوچک‌ترکردن قلم، لوگو داخل عرض موجود جا می‌شود.
      ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .logo {
        min-width: 0;
    }

    .logo-text {
        font-size: 1.05rem;
        line-height: 1.25;
        white-space: normal;
    }
}

/* ─────────────────────────────────────────────────────────────
   7. نوار فراخوان اقدام پایان‌صفحه  (P193 → P192-019)
      صفحه‌های «درباره ما»، «معرفی سیستم‌ها» و «نمونه‌کارها» در ناحیهٔ
      <main> هیچ دکمه‌ای نداشتند. این بلوک توسط
      template-parts/cta-band.php رندر می‌شود و یک اقدام روشن با دو
      مقصد واقعی (درخواست دمو / تماس) در پایان محتوا می‌گذارد.
      ───────────────────────────────────────────────────────────── */
.arshia-cta-band {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    color: #fff;
    padding: 44px 0;
    margin-top: 48px;
}

.arshia-cta-band .cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.arshia-cta-band .cta-copy {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 640px;
}

.arshia-cta-band .cta-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    font-weight: 800;
    line-height: 1.6;
}

.arshia-cta-band .cta-text {
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: .98rem;
    line-height: 1.95;
}

.arshia-cta-band .cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.arshia-cta-band .cta-actions .btn {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .arshia-cta-band {
        padding: 32px 0;
        margin-top: 32px;
    }

    .arshia-cta-band .cta-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .arshia-cta-band .cta-copy {
        max-width: none;
    }

    .arshia-cta-band .cta-actions {
        flex-direction: column;
    }

    .arshia-cta-band .cta-actions .btn {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────
   P195 — لایهٔ کنتراست اجزای پلاگین
   ─────────────────────────────────────────────────────────────
   CSS پلاگین‌ها (arshia-shop، arshia-accounts، arshia-ecosystem،
   arshia-downloads، arshia-growth، arshia-contact) پیش از CSS تم بارگذاری
   می‌شود و از دامنهٔ قابل انتشار این قالب بیرون است. این لایه که آخرین
   فایل CSS تم است، فقط رنگ متن همان اجزا را به توکن‌های کنتراست تم
   برمی‌گرداند؛ هیچ چیدمان یا پس‌زمینه‌ای تغییر نمی‌کند.
   هر مقدار با tools/p195-ratio.js سنجیده شده است. */

.apc-item-desc,
.apc-muted,
.apc-fine,
.apc-item-price small,
.arshia-eco-empty,
.arshia-eco-idea-meta,
.arshia-dl-empty,
.arshia-acc-auth-foot,
.arshia-acc-auth-head p,
.arshia-acc-field small,
.arshia-acc-login-required,
.arshia-lr-admin .arshia-lr-stat .lbl {
    color: var(--text-muted);
}

/* برچسب طلایی قیمت‌ساز روی تینت طلایی */
.apc-item-price em {
    color: var(--gold-ink);
}

/* آیکون نمایش/مخفی رمز: #b3b0c4 روی سفید فقط ۲٫۱۲:۱ بود */
.arshia-acc-pass-toggle,
.arshia-acc-pass-toggle svg {
    color: #6a6580;
    stroke: #6a6580;
}

/* لینک‌های پایین فرم حساب کاربری */
.arshia-acc-auth-foot a {
    color: #352070;
}

/* یادداشت فرم تماس؛ استایل پلاگین درون <body> و بعد از تم می‌آید،
   پس با یک سطح specificity بالاتر خنثی می‌شود. */
.arshia-cf-submit .arshia-cf-note {
    color: var(--text-muted);
}

/* پیام‌های وضعیت: #059669 با متن سفید ۳٫۷۷:۱ بود */
.ag-msg.is-ok {
    background: #047857;
    color: #fff;
}

.arshia-cd-form-msg.is-ok {
    color: var(--ok-ink);
}

/* دکمهٔ تیکر روی زمینهٔ طلایی: قاعدهٔ سراسری `a:hover` رنگ فیروزه‌ای
   را به آن می‌داد و روی طلایی ۳:۱ می‌شد. */
.arshia-ticker-btn,
.arshia-ticker-btn:hover,
.arshia-ticker-btn:focus,
.arshia-ticker-btn:active {
    color: #24154e;
}

/* متن لینک تیکر روی بنفش: در هیچ حالتی نباید رنگ گشته شود.
   برخی استایل‌های پلاگین در حالت focus/active رنگ آبی‌ای می‌دادند
   که روی #352070 فقط ۱٫۶۴:۱ بود. */
.arshia-ticker-link,
.arshia-ticker-link:link,
.arshia-ticker-link:visited,
.arshia-ticker-link:hover,
.arshia-ticker-link:focus,
.arshia-ticker-link:active {
    color: inherit;
}

/* نشانگر اسلایدر هیرو: متن تیره روی حباب نیمه‌شفاف روشن */
.home-canvas .arshia-swiper-dots .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .78);
    color: #352070;
}

/* کارت آرشیو دوره (پلاگین arshia-courses) — نشان صلاحیت/قیمت با
   استایل درون‌خطی و بدون کلاس ساخته می‌شود؛ پس تنها راه هدفگیری
   در دامنهٔ قالب، انتخاب ویژگی است. دامنه به کارت دوره محدود شده
   تا هیچ جزء دیگری تحت تأثیر نباشد. */
.arshia-course-card [style*="background:#059669"] {
    background: #047857 !important;
}

.arshia-course-card [style*="background:#d97706"] {
    background: #b45309 !important;
}

/* همان وصله برای نشانِ صفحهٔ تکی دوره (P195). قالب دیگر این style را چاپ
   نمی‌کند و کلاس .ar-course-badge--{difficulty} را می‌دهد، پس این دو قاعده
   فقط برای باقی‌ماندهٔ هدر کشیدهٔ قدیمی است و بعد از انتشار بی‌اثر می‌شود.
   (در هر دو حالت نتیجه یکی: #b45309 = ۵٫۰۲:۱ و #047857 = ۵٫۴۸:۱) */
.ar-course-badge[style*="background:#059669"] {
    background: #047857 !important;
}

.ar-course-badge[style*="background:#d97706"] {
    background: #b45309 !important;
}

.arshia-course-card [style*="color:#888"] {
    color: var(--text-muted) !important;
}

/* ── .analyze-btn (پلاگین arshia-ai-tools) ────────────────────────
   دو فایل پلاگین (financial-analysis.php و excel-analyzer.php) هر دو
   `.analyze-btn` را با رنگ‌های متفاوت تعریف می‌کنند و روی صفحهٔ
   ابزارها با هم بارگذاری می‌شوند. نتیجهٔ ترکیب: پس‌زمینهٔ سبزِ تیرهٔ
   #185C37 از یکی و `color:#333` از دیگری، یعنی ۱٫۵۸:۱ روی :hover.
   همین ابزار در صفحهٔ دیگر بنفش است؛ یعنی همان کامپوننت در دو صفحه
   دو ظاهر داشت. اینجا یک‌بار و برای همیشه یکسان می‌شود:
   #fff روی #352070 = ۱۳٫۱۹:۱ و روی #2a1a5a = ۱۵٫۰۷:۱.
   `!important` ضروری است: پلاگین‌ها CSS خود را با تگ <style> داخل
   محتوا و بعد از این فایل چاپ می‌کنند؛ با specificity برابر
   (0,1,0) و 0,2,0 برای :hover، ترتیب بارگذاری آن‌ها را برنده می‌کند. */
.analyze-btn,
.analyze-btn:link,
.analyze-btn:visited {
    background: #352070 !important;
    border-color: #352070 !important;
    color: #fff !important;
}

.analyze-btn:hover,
.analyze-btn:focus,
.analyze-btn:active {
    background: #2a1a5a !important;
    border-color: #2a1a5a !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   آیکون‌های خطی رابط کاربری (سیستم MI) — Phase 03
   جایگزین ایموجی در متای نوشته، فهرست جستجو، صفحهٔ محصول و پورتال.
   اندازه از font-size می‌آید (1em) تا در متای ۱۳px و تیتر ۴۴px هر دو درست باشد.
   رنگ از currentColor ارث می‌برد؛ نیازی به رنگ صریح نیست.
   ───────────────────────────────────────────────────────────── */
.arshia-mi {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
    overflow: visible;
}

/* در متای نوشته کمی بزرگ‌تر و کم‌رنگ‌تر تا متن غالب بماند */
.arshia-post-meta .arshia-mi {
    width: 1.1em;
    height: 1.1em;
    opacity: .75;
}

/* در تیتر بزرگ (نتیجهٔ پرداخت) هم‌اندازهٔ متن */
.ac-result-ico .arshia-mi {
    width: 1em;
    height: 1em;
    vertical-align: -0.08em;
}

/* ─────────────────────────────────────────────────────────────
   P179 — مقیاس اندازهٔ آیکون بر اساس نقش (Design Tokens)

   قاعدهٔ «۱em» برای آیکون کنار متن درست است، ولی در متن‌های ریز
   (۱۲ تا ۱۳٫۶px) کادر آیکون را به ۱۲px می‌رساند و چون گلیف‌های خطی
   حدود ۲۰ واحد از بوم ۲۴ را پر می‌کنند، اندازهٔ دیده‌شده به ۹px
   می‌افتد. اندازه‌گیری واقعی DOM (۱۹ صفحه × ۵ عرض) نشان داد
   کوچک‌ترین جایگاه‌ها ۸٫۵ تا ۱۰٫۵px بودند.

   راه‌حل: یک کف برای همهٔ آیکون‌ها + اندازهٔ صریح برای نقش‌هایی که
   کادرشان از font-size والد کوچک‌تر می‌شد. مقدارها با اندازه‌گیری
   نوری (ink bbox) تعیین شده‌اند، نه با حدس.
   ───────────────────────────────────────────────────────────── */
:root {
    --ar-ico-text:    14px;  /* کنار متن ریز: متای نوشته، برچسب، جدول */
    --ar-ico-ui:      16px;  /* چیپ، لینک، دکمه */
    --ar-ico-card:    20px;  /* سرتیتر کارت */
    --ar-ico-feature: 24px;  /* ویژگی محصول */
    --ar-ico-section: 28px;  /* سرتیتر بخش */
    --ar-ico-display: 44px;  /* نتیجه/داشبورد */
}

/* کف اندازه: هیچ آیکون MI از ۱۴px کوچک‌تر دیده نمی‌شود.
   width/height اتریبیوتی خروجی arshia_mi_icon() همان ۱em است؛
   این دو خط فقط سقف پایین را تضمین می‌کنند و اندازه‌های بزرگ‌تر
   (مثل ۲۸px در سرتیتر دسته) دست‌نخورده می‌مانند. */
.arshia-mi {
    min-width: var(--ar-ico-text);
    min-height: var(--ar-ico-text);
}

/* چیپ «نوع نصب» — روی کارت محصول (.ap-ver، ۱۲٫۱۶px) و تک‌محصول
   (.app-ver، ۱۳٫۶px). قبلاً آیکون‌ها ۹٫۵ تا ۱۱٫۲px دیده می‌شدند. */
.ap-ver .arshia-mi,
.app-ver .arshia-mi {
    width: var(--ar-ico-ui);
    height: var(--ar-ico-ui);
    vertical-align: -0.2em;
}

/* ابر گلیف پهن-کوتاه است (bbox ۱۳٫۳ از ۲۴) و در همان کادر ۱۶px
   نوری ۱۰٫۷px می‌شد، در حالی که کامپیوتر ۱۲٫۵ و کره ۱۳٫۲ بودند.
   محاسبه: (bbox + stroke) × (کادر ÷ ۲۴) ⇒ برای هم‌وزنی ۱۹px لازم است. */
.app-ver--cloud .arshia-mi,
.ap-ver--cloud .arshia-mi {
    width: 19px;
    height: 19px;
}

/* لینک‌های دانلود (دانلود مستقیم / لینک رزرو) */
.download-link .arshia-mi {
    width: 15px;
    height: 15px;
    vertical-align: -0.15em;
}

/* متای نوشته: کوچک‌ترین جایگاه رابط (۱۲٫۵px کادر، ۹px نوری) */
.ab-meta .arshia-mi {
    width: var(--ar-ico-text);
    height: var(--ar-ico-text);
    vertical-align: -0.18em;
}

/* برچسب پلتفرم روی کارت سیستم */
.sc-tag .arshia-mi {
    width: var(--ar-ico-text);
    height: var(--ar-ico-text);
}

/* دکمهٔ اصلی هیرو: آیکونش پاکت توپر است (پرشدگی ۰٫۶۷ ارتفاع)
   پس کادر بزرگ‌تر لازم دارد تا نوری ۱۲px شود. */
.app-hero-btn .arshia-mi {
    width: 18px;
    height: 18px;
    vertical-align: -0.22em;
}

/* آیکون «مشاهده قابلیت‌ها» در کارت سیستم — SVG دست‌نویس، نه MI */
.system-card-cta svg {
    width: 18px;
    height: 18px;
}