/* ==========================================================================
   1. Cascade Layers / لایه‌بندی آبشاری
   --------------------------------------------------------------------------
   در این بخش ترتیب لایه‌های CSS تعریف می‌شود.
   هدف این است که بعدها قوانین پایه، کامپوننت‌ها و ابزارهای کمکی با هم
   درگیر نشوند و مجبور نشویم برای override کردن، selectorهای سنگین بنویسیم.
   ========================================================================== */

@layer reset, fonts, tokens, themes, base, layout, renderers, patterns, forms, auth, landing, profile, utilities, responsive, accessibility;


/* ==========================================================================
   2. Reset / ریست پایه مرورگر
   --------------------------------------------------------------------------
   در این بخش رفتار پیش‌فرض مرورگرها یکدست می‌شود.
   ریست باید کنترل‌شده باشد: ظاهرهای دردسرساز حذف شوند، اما دسترسی‌پذیری
   مثل focus keyboard خراب نشود.
   ========================================================================== */

@layer reset {
  /* همه عناصر با یک مدل اندازه‌گیری محاسبه می‌شوند تا padding و border عرض را غیرقابل پیش‌بینی نکنند. */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* پایه صفحه برای مرورگرهای موبایل آماده می‌شود؛ dvh ارتفاع واقعی viewport را بهتر از vh نشان می‌دهد. */
  html {
    min-block-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: auto;
  }

  body {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    margin: 0;
  }

  /* فاصله‌های پیش‌فرض متن‌ها حذف می‌شود تا فاصله‌گذاری بعداً با قواعد خودمان کنترل شود. */
  :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: 0;
  }

  :where(ul, ol) {
    margin: 0;
    padding: 0;
  }

  /* رسانه‌ها نباید از عرض ظرف خود بیرون بزنند؛ این قانون بعداً برای تصویرهای JSON هم مفید است. */
  :where(img, picture, svg, video, canvas) {
    display: block;
    max-inline-size: 100%;
  }

  /* با محدود شدن عرض، نسبت طبیعی تصویر و ویدیو حفظ می‌شود. */
  :where(img, svg, video, canvas) {
    block-size: auto;
  }

  /* کنترل‌های فرم فونت و رنگ محیط را می‌گیرند، اما ظاهر پیش‌فرض‌شان کامل حذف نمی‌شود. */
  :where(button, input, select, textarea) {
    margin: 0;
    font: inherit;
    color: inherit;
  }

  :where(button) {
    cursor: pointer;
  }

  /* دکمه غیرفعال نباید مانند یک دکمه قابل‌کلیک دیده شود. */
  :where(button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled) {
    cursor: not-allowed;
  }

  /* کاربر فقط ارتفاع نوشته بلند را تغییر می‌دهد تا عرض و چیدمان صفحه به‌هم نخورد. */
  :where(textarea) {
    resize: vertical;
  }

  :where(a) {
    color: inherit;
  }

  :where(table) {
    border-collapse: collapse;
    border-spacing: 0;
  }

  /* فوکوس کیبورد از بین نمی‌رود؛ فقط یک ظاهر پایه و قابل دیدن برای آن تعیین می‌شود. */
  :where(:focus-visible) {
    outline: 0.125rem solid currentColor;
    outline-offset: 0.25rem;
  }

  :where([hidden]) {
    display: none !important;
  }
}


/* ==========================================================================
   3. Fonts / فونت‌ها
   --------------------------------------------------------------------------
   در این بخش فونت‌های رسمی CI معرفی می‌شوند.
   فعلاً فونت اصلی پروژه Yekan Bakh است و مسیر فایل‌ها از پوشه ci/assets/fonts
   خوانده می‌شود.
   ========================================================================== */

@layer fonts {
  /* فونت خریداری‌شده پروژه؛ woff2 اولویت دارد و woff فقط پشتیبان مرورگرهای قدیمی‌تر است. */
  @font-face {
    font-family: "Yekan Bakh";
    src: url("/ci/assets/fonts/yekan-bakh/YekanBakh-Light.woff2") format("woff2"),
      url("/ci/assets/fonts/yekan-bakh/YekanBakh-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Yekan Bakh";
    src: url("/ci/assets/fonts/yekan-bakh/YekanBakh-Regular.woff2") format("woff2"),
      url("/ci/assets/fonts/yekan-bakh/YekanBakh-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Yekan Bakh";
    src: url("/ci/assets/fonts/yekan-bakh/YekanBakh-SemiBold.woff2") format("woff2"),
      url("/ci/assets/fonts/yekan-bakh/YekanBakh-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Yekan Bakh";
    src: url("/ci/assets/fonts/yekan-bakh/YekanBakh-Bold.woff2") format("woff2"),
      url("/ci/assets/fonts/yekan-bakh/YekanBakh-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Yekan Bakh";
    src: url("/ci/assets/fonts/yekan-bakh/YekanBakh-ExtraBold.woff2") format("woff2"),
      url("/ci/assets/fonts/yekan-bakh/YekanBakh-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Yekan Bakh";
    src: url("/ci/assets/fonts/yekan-bakh/YekanBakh-Black.woff2") format("woff2"),
      url("/ci/assets/fonts/yekan-bakh/YekanBakh-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
}


/* ==========================================================================
   4. Design Tokens / توکن‌های پایه طراحی
   --------------------------------------------------------------------------
   در این بخش مقدارهای خام و پایه تعریف می‌شوند:
   رنگ‌های اصلی، خانواده فونت، اندازه‌های پایه، فاصله‌ها، radiusها و سایه‌ها.
   این‌ها مثل مواد خام طراحی هستند و مستقیماً نباید همه‌جا مصرف شوند.
   ========================================================================== */

@layer tokens {
  :root {
    /* خانواده فونت رسمی CI */
    --font-family-primary: "Yekan Bakh", Tahoma, Arial, sans-serif;
    --font-family-heading: var(--font-family-primary);
    --ci-font-family-base: var(--font-family-primary);
    --ci-font-family-heading: var(--font-family-heading);

    /* رنگ‌های خام موجود در CI؛ این بخش کپی معنی‌دار از palette فعلی است، نه طراحی تازه. */
    --color-black: #000000;
    --color-black-rgb: 0, 0, 0;
    --color-white: #ffffff;
    --color-white-rgb: 255, 255, 255;

    --color-neutral-dark: #595959;
    --color-neutral-dark-rgb: 89, 89, 89;
    --color-neutral-base: #cccccc;
    --color-neutral-base-rgb: 204, 204, 204;
    --color-neutral-light: #eeeeee;
    --color-neutral-light-rgb: 238, 238, 238;

    --color-primary-dark: #7b766f;
    --color-primary-dark-rgb: 123, 118, 111;
    --color-primary-base: #f6ecde;
    --color-primary-base-rgb: 246, 236, 222;
    --color-primary-light: #fdfaf7;
    --color-primary-light-rgb: 253, 250, 247;

    --color-secondary-dark: #181a1a;
    --color-secondary-dark-rgb: 24, 26, 26;
    --color-secondary-base: #313435;
    --color-secondary-base-rgb: 49, 52, 53;
    --color-secondary-light: #cbcccc;
    --color-secondary-light-rgb: 203, 204, 204;

    --color-highlight-dark: #002553;
    --color-highlight-dark-rgb: 0, 37, 83;
    --color-highlight-base: #006ffd;
    --color-highlight-base-rgb: 0, 111, 253;
    --color-highlight-light: #bfdbfe;
    --color-highlight-light-rgb: 191, 219, 254;

    --color-success-dark: #003e1e;
    --color-success-dark-rgb: 0, 62, 30;
    --color-success-base: #007c3d;
    --color-success-base-rgb: 0, 124, 61;
    --color-success-light: #bfdece;
    --color-success-light-rgb: 191, 222, 206;

    --color-warning-dark: #7f3b00;
    --color-warning-dark-rgb: 127, 59, 0;
    --color-warning-base: #ff7700;
    --color-warning-base-rgb: 255, 119, 0;
    --color-warning-light: #ffddbf;
    --color-warning-light-rgb: 255, 221, 191;

    --color-danger-dark: #760e12;
    --color-danger-dark-rgb: 118, 14, 18;
    --color-danger-base: #ed1c24;
    --color-danger-base-rgb: 237, 28, 36;
    --color-danger-light: #fac6c8;
    --color-danger-light-rgb: 250, 198, 200;

    --color-info-dark: #7f6e00;
    --color-info-dark-rgb: 127, 110, 0;
    --color-info-base: #ffdd00;
    --color-info-base-rgb: 255, 221, 0;
    --color-info-light: #fff6bf;
    --color-info-light-rgb: 255, 246, 191;

    --color-gold-dark: #806c00;
    --color-gold-dark-rgb: 128, 108, 0;
    --color-gold-base: #ffd700;
    --color-gold-base-rgb: 255, 215, 0;
    --color-gold-light: #fff3bf;
    --color-gold-light-rgb: 255, 243, 191;

    --color-silver-dark: #606060;
    --color-silver-dark-rgb: 96, 96, 96;
    --color-silver-base: #c0c0c0;
    --color-silver-base-rgb: 192, 192, 192;
    --color-silver-light: #f2f4f5;
    --color-silver-light-rgb: 242, 244, 245;

    --color-bronze-dark: #663f19;
    --color-bronze-dark-rgb: 102, 63, 25;
    --color-bronze-base: #cd7f32;
    --color-bronze-base-rgb: 205, 127, 50;
    --color-bronze-light: #f0d8c2;
    --color-bronze-light-rgb: 240, 216, 194;

    /* اندازه‌های پایه نوشته؛ هر نام مقدار دقیق اندازه را نشان می‌دهد. */
    --text-size-0-5: 0.5rem;
    --text-size-0-75: 0.75rem;
    --text-size-1: 1rem;
    --text-size-1-125: 1.125rem;
    --text-size-1-25: 1.25rem;
    --text-size-1-5: 1.5rem;
    --text-size-1-75: 1.75rem;
    --text-size-2: 2rem;

    /* فاصله‌های پایه؛ هر نام مقدار دقیق فاصله را نشان می‌دهد. */
    --space-0-25: 0.25rem;
    --space-0-5: 0.5rem;
    --space-0-75: 0.75rem;
    --space-1: 1rem;
    --space-1-125: 1.125rem;
    --space-1-25: 1.25rem;
    --space-1-5: 1.5rem;
    --space-1-75: 1.75rem;
    --space-2: 2rem;
    --space-4: 4rem;

    /* ضخامت‌های پایه دورخط؛ این مقدارها فقط برای border و outline هستند. */
    --border-width-0-0625: 0.0625rem;
    --border-width-0-125: 0.125rem;

    /* فاصله‌های fluid؛ برای فاصله‌هایی که باید بین viewportهای مختلف نرم تغییر کنند. */
    --ci-space-fluid-1: clamp(0.75rem, 0.5rem + 0.75vw, 1.25rem);
    --ci-space-fluid-2: clamp(1rem, 0.75rem + 1.25vw, 1.75rem);
    --ci-space-fluid-3: clamp(1.5rem, 1rem + 2vw, 2.75rem);

    /* radiusهای پایه؛ فعلاً صفحه عمومی شناسه از radius تصویر استفاده نمی‌کند. */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    /* برای دکمه کشیده، گوشه گرد می‌خواهیم نه فرم بیضی؛ 50% فقط برای مربع و دایره است. */
    --radius-pill: 2.5rem;

    /* اندازه‌های صفحه و قاب چیدمان؛ این‌ها عرض و فاصله عمومی صفحه را کنترل می‌کنند. */
    --ci-width-text: 68ch;
    --ci-container-mobile-gutter: 1rem;
    --ci-container-tablet-min: 46rem;
    --ci-container-tablet-fluid: calc(43.75vw + 25rem);
    --ci-container-tablet-max: 60rem;
    --ci-container-desktop-ratio: 75vw;

  }
}


/* ==========================================================================
   5. Theme Tokens / توکن‌های معنایی تم
   --------------------------------------------------------------------------
   در این بخش توکن‌های خام به معنی‌های کاربردی تبدیل می‌شوند:
   پس‌زمینه، متن، متن کم‌رنگ، سطح، خط، لینک، فوکوس و حالت‌های روشن/تیره.
   تم تیره و روشن باید از همین بخش کنترل شود.
   ========================================================================== */

@layer themes {
  :root {
    /* تم بر اساس تنظیم سیستم‌عامل کاربر انتخاب می‌شود؛ فعلاً دکمه یا override دستی نداریم. */
    color-scheme: light dark;

    /* مقدار اول light-dark برای تم روشن است و مقدار دوم برای تم تیره. */
    --color-background: light-dark(var(--color-primary-light), var(--color-secondary-base));
    --color-text: light-dark(var(--color-secondary-dark), var(--color-primary-base));
    --color-text-muted: light-dark(
      rgba(var(--color-secondary-dark-rgb), 0.72),
      rgba(var(--color-primary-base-rgb), 0.82)
    );
    --color-border-soft: light-dark(
      rgba(var(--color-secondary-dark-rgb), 0.16),
      rgba(var(--color-primary-base-rgb), 0.14)
    );

    --ci-bg: var(--color-background);
    --ci-band: light-dark(var(--color-primary-base), var(--color-black));
    --ci-text: var(--color-text);
    --ci-muted: var(--color-text-muted);
    --ci-line: var(--color-border-soft);
    --ci-shadow: light-dark(rgba(var(--color-black-rgb), 0.18), rgba(var(--color-black-rgb), 0.42));
    --ci-surface: light-dark(rgba(var(--color-white-rgb), 0.72), rgba(var(--color-black-rgb), 0.32));
    --ci-surface-strong: light-dark(rgba(var(--color-white-rgb), 0.92), rgba(var(--color-black-rgb), 0.78));
    --ci-focus: light-dark(rgb(var(--color-highlight-base-rgb)), rgb(var(--color-primary-base-rgb)));
    --ci-content-rule: light-dark(rgba(var(--color-secondary-dark-rgb), 0.28), var(--color-black));
    --ci-content-reference-color: light-dark(
      rgba(var(--color-secondary-dark-rgb), 0.84),
      rgba(var(--color-primary-light-rgb), 0.92)
    );
  }
}


/* ==========================================================================
   6. Base Elements / عناصر پایه HTML
   --------------------------------------------------------------------------
   در این بخش رفتار عمومی body، لینک‌ها، دکمه‌ها، تصاویر، متن‌ها و فرم‌ها
   تنظیم می‌شود. این بخش نباید وارد طراحی اختصاصی کامپوننت‌ها شود.
   ========================================================================== */

@layer base {
  html {
    direction: rtl;
    overflow-x: clip;
  }

  body {
    background: var(--ci-bg);
    color: var(--ci-text);
    font-family: var(--ci-font-family-base);
    font-size: 1rem;
    line-height: 1.75;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }

  a {
    color: inherit;
    text-decoration-thickness: 0.0625em;
    text-underline-offset: 0.25em;
  }

  ::selection {
    background: var(--ci-focus);
    color: var(--ci-bg);
  }
}


/* ==========================================================================
   7. Layout Primitives / ابزارهای پایه چیدمان
   --------------------------------------------------------------------------
   در این بخش الگوهای عمومی چیدمان ساخته می‌شوند:
   container، stack، grid، cluster و عرض خواندن متن.
   این کلاس‌ها قرار است در صفحه‌های مختلف قابل استفاده باشند.
   ========================================================================== */

@layer layout {
  /* قاب عمومی صفحه‌های CI؛ برای لندینگ موقت، نام‌نویسی و ورود هم استفاده می‌شود. */
  .ci-shell {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: grid;
    grid-template-rows: var(--ci-shell-topbar-height) minmax(0, 1fr) minmax(var(--ci-shell-footer-height), auto);
    position: relative;
    isolation: isolate;
    overflow-x: clip;
  }

  /* محتوای صفحه باید بالاتر از پس‌زمینه‌های تزئینی مثل شبکه پویا بماند. */
  .ci-shell > :not(.ci-motion-grid) {
    position: relative;
    z-index: 1;
  }

  /* ظرف عمومی صفحه؛ موبایل با فاصله ثابت شروع می‌شود و در تبلت تا نسبت دسکتاپ نرم رشد می‌کند. */
  .ci-container {
    inline-size: calc(100% - (2 * var(--ci-container-mobile-gutter)));
    margin-inline: auto;
  }

  /* چیدمان عمودی عمومی؛ فاصله پیش‌فرض با متغیر قابل تغییر است. */
  .ci-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ci-stack-gap, var(--ci-space-fluid-2));
  }

  /* عرض مناسب برای خواندن متن بلند فارسی. */
  .ci-text-width {
    max-inline-size: var(--ci-width-text);
    margin-inline: auto;
  }
}

@layer responsive {
  @media (min-width: 48rem) {
    :root {
      --ci-images-edge-width: calc(
        (100dvw - clamp(
          var(--ci-container-tablet-min),
          var(--ci-container-tablet-fluid),
          var(--ci-container-tablet-max)
        )) / 2
      );
    }

    .ci-container {
      inline-size: clamp(
        var(--ci-container-tablet-min),
        var(--ci-container-tablet-fluid),
        var(--ci-container-tablet-max)
      );
    }
  }

  @media (min-width: 80rem) {
    :root {
      --ci-images-edge-width: calc((100dvw - var(--ci-container-desktop-ratio)) / 2);
    }

    .ci-container {
      inline-size: var(--ci-container-desktop-ratio);
    }
  }
}


/* ==========================================================================
   8. Content Renderers / رندرکننده‌های عمومی محتوای JSON
   --------------------------------------------------------------------------
   در این بخش کلاس‌های عمومی برای چیزهایی ساخته می‌شوند که JSON می‌فرستد:
   Heading، Subtitle، Text، Group، Reference، Image و موارد مشابه.
   این بخش نباید بر اساس گونه یا زیرگونه hard-code شود.
   ========================================================================== */

@layer renderers {
  :root {
    /* متن‌های خروجی JSON؛ عنوان، متن بلند و ارجاع‌ها از این مقدارها استفاده می‌کنند. */
    --ci-content-title-size: 1.5rem;
    --ci-content-subtitle-size: 1.125rem;
    --ci-content-section-title-size: 1.25rem;
    --ci-content-text-size: 1.125rem;
    --ci-content-text-leading: 2rem;
    --ci-content-reference-size: 1rem;
    --ci-content-reference-leading: 1.5rem;
    --ci-content-block-gap: 1rem;
    --ci-content-reference-inner-gap: 0.25rem;
    --ci-content-reference-separator-gap: 0.25rem;
    --ci-content-section-gap: 2rem;

    /* تصویر تکی یک primitive عمومی است و به گونه یا زیرگونه وابسته نیست. */
    --ci-image-profile-width: 22.5rem;
    --ci-image-profile-space-before: 1rem;
    --ci-image-profile-space-after: 1rem;
    --ci-image-hover-duration: 0.25s;
    --ci-image-hover-ease: ease-out;
    --ci-image-hover-lift: -0.125rem;
    --ci-image-hover-scale: 1;
    --ci-image-hover-saturate: 1.125;
    --ci-image-hover-contrast: 1.125;

    /* modifier تاییدشده گونه انسان فقط ظاهر تصویر اصلی انسان را تغییر می‌دهد. */
    --ci-person-image-glow: 0 0 1rem rgba(var(--color-black-rgb), 0.75);
    --ci-person-image-glow-hover: 0 0 2.25rem rgba(var(--color-black-rgb), 0.25);

  }

  .ci-visually-hidden {
    position: absolute;
    inline-size: 0.0625rem;
    block-size: 0.0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* تصویر عمومی از property با valueKind=Image ساخته می‌شود. */
  .ci-image {
    margin: 0;
  }

  .ci-images-shell {
    position: relative;
    inline-size: 100dvw;
    margin-inline: calc(50% - 50dvw);
    margin-block: var(--ci-content-section-gap);
    overflow: clip;
    isolation: isolate;
  }

  /* مجموعه تصویرهای عادی از renderer=ImageGallery ساخته می‌شود. */
  .ci-images {
    position: relative;
    z-index: 0;
    inline-size: 100%;
    display: flex;
    gap: var(--ci-images-gap);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--ci-images-center-padding);
    scroll-snap-type: inline mandatory;
    padding-inline: var(--ci-images-center-padding);
    padding-block-end: 0.5rem;
    scrollbar-width: none;
  }

  .ci-images::-webkit-scrollbar {
    display: none;
  }

  .ci-images-shell::before,
  .ci-images-shell::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inline-size: var(--ci-images-edge-width);
    z-index: 1;
    background: var(--ci-images-edge-background);
    -webkit-backdrop-filter: var(--ci-images-edge-backdrop);
    backdrop-filter: var(--ci-images-edge-backdrop);
    pointer-events: none;
  }

  .ci-images-shell::before {
    inset-inline-start: 0;
  }

  .ci-images-shell::after {
    inset-inline-end: 0;
  }

  .ci-images > .ci-image {
    flex: 0 0 min(100%, var(--ci-images-item-width));
    scroll-snap-align: center;
  }

  .ci-images-dotnav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
  }

  .ci-images-dotnav__link {
    position: relative;
    display: block;
    inline-size: var(--ci-images-dot-far-size);
    block-size: var(--ci-images-dot-far-size);
    overflow: hidden;
    border-radius: 999rem;
    background: var(--ci-images-dot-background);
    opacity: 0.5;
    transition:
      inline-size var(--ci-image-hover-duration) var(--ci-image-hover-ease),
      block-size var(--ci-image-hover-duration) var(--ci-image-hover-ease),
      opacity var(--ci-image-hover-duration) var(--ci-image-hover-ease);
  }

  .ci-images-dotnav__link::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0;
    border-radius: inherit;
    background: var(--ci-images-dot-active-background);
  }

  .ci-images-dotnav__link:hover,
  .ci-images-dotnav__link:focus-visible {
    opacity: 0.75;
  }

  .ci-images-dotnav__link[data-distance="1"] {
    inline-size: var(--ci-images-dot-size);
    block-size: var(--ci-images-dot-size);
    opacity: 0.65;
  }

  .ci-images-dotnav__link[data-distance="2"] {
    inline-size: var(--ci-images-dot-mid-size);
    block-size: var(--ci-images-dot-mid-size);
    opacity: 0.55;
  }

  .ci-images-dotnav__link[aria-selected="true"] {
    inline-size: var(--ci-images-dot-active-size);
    block-size: var(--ci-images-dot-size);
    outline: 0.0625rem solid var(--color-black);
    outline-offset: 0;
    opacity: 1;
  }

  .ci-images-dotnav__link[aria-selected="true"]::before {
    animation: ci-images-dot-timer var(--ci-images-dot-duration) linear forwards;
  }

  .ci-images-dotnav__link:focus-visible {
    outline: 0.125rem solid var(--ci-focus);
    outline-offset: 0.25rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .ci-images-dotnav__link::before {
      animation: none;
      inline-size: 100%;
    }
  }

  @keyframes ci-images-dot-timer {
    from {
      inline-size: 0;
    }

    to {
      inline-size: 100%;
    }
  }

  /* تصویر شناسه با semanticRole=PrimaryImage مشخص می‌شود و به گونه یا زیرگونه وابسته نیست. */
  .ci-image--profile {
    inline-size: min(100%, var(--ci-image-profile-width));
    aspect-ratio: 1 / 1;
    margin-block-start: var(--ci-image-profile-space-before);
    margin-block-end: var(--ci-image-profile-space-after);
    margin-inline: auto;
    overflow: hidden;
  }

  .ci-image__asset {
    display: block;
    inline-size: 100%;
    object-fit: cover;
    transition:
      transform var(--ci-image-hover-duration) var(--ci-image-hover-ease),
      filter var(--ci-image-hover-duration) var(--ci-image-hover-ease);
  }

  .ci-image--profile .ci-image__asset {
    block-size: 100%;
  }

  .ci-images .ci-image__asset {
    block-size: auto;
    object-fit: contain;
  }

  /* اولین modifier گونه‌ای: تصویر اصلی گونه انسان گرد و با درخشش بیرونی نمایش داده می‌شود. */
  .ci-profile--entity-person .ci-image--profile {
    border-radius: 50%;
    box-shadow: var(--ci-person-image-glow);
    transition: box-shadow var(--ci-image-hover-duration) var(--ci-image-hover-ease);
  }

  .ci-image--profile:hover .ci-image__asset {
    filter: saturate(var(--ci-image-hover-saturate)) contrast(var(--ci-image-hover-contrast));
    transform: translateY(var(--ci-image-hover-lift)) scale(var(--ci-image-hover-scale));
  }

  .ci-profile--entity-person .ci-image--profile:hover {
    box-shadow:
      var(--ci-person-image-glow),
      var(--ci-person-image-glow-hover);
  }

  /* عنوان اصلی از property با semanticRole=Heading ساخته می‌شود. */
  .ci-content-title {
    min-block-size: 2.5rem;
    display: grid;
    place-items: center;
    color: var(--ci-text);
    font-family: var(--ci-font-family-heading);
    font-size: var(--ci-content-title-size);
    font-weight: 700;
    line-height: 2rem;
    text-align: center;
  }

  /* عنوان فرعی از property با semanticRole=Subtitle ساخته می‌شود. */
  .ci-content-subtitle {
    min-block-size: 2rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--ci-text);
    font-family: var(--ci-font-family-heading);
    font-size: var(--ci-content-subtitle-size);
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* گروه عمومی از kind=group ساخته می‌شود و به گونه یا زیرگونه وابسته نیست. */
  .ci-content-section {
    --ci-stack-gap: var(--ci-content-block-gap);
  }

  /* گروه نواری + خطی: آیتم های کوتاه مثل نویسنده، بازگردان و ویراستار در یک نوار وسط چین می آیند. */
  .ci-content-section--strip.ci-content-section--line {
    --ci-stack-gap: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    min-block-size: var(--ci-content-reference-leading);
  }

  /* عنوان گروه وقتی نمایش داده می‌شود که group.showTitle=true باشد. */
  .ci-content-section-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    color: var(--ci-content-rule);
    font-family: var(--ci-font-family-heading);
    font-size: var(--ci-content-section-title-size);
    font-weight: 700;
    line-height: 2rem;
    text-align: center;
  }

  .ci-content-section-title::before,
  .ci-content-section-title::after {
    content: "";
    block-size: 0.125rem;
    background: var(--ci-content-rule);
  }

  /* متن بلند داخل گروه؛ چند property متنی پشت سر هم با فاصله کنترل‌شده مثل یک متن چندبخشی خوانده می‌شوند. */
  .ci-content-long-text {
    color: var(--ci-text);
    font-size: var(--ci-content-text-size);
    font-weight: 600;
    line-height: var(--ci-content-text-leading);
    text-align: justify;
    text-align-last: auto;
  }

  .ci-content-long-text-label {
    font-weight: inherit;
  }

  .ci-content-long-text-label::after {
    content: ": ";
  }

  .ci-content-long-text + .ci-content-long-text {
    margin-block-start: var(--ci-content-block-gap);
  }

  /* فهرست لینک های ارجاعی از property با valueKind=Reference و renderer=ProfileLinkList ساخته می شود. */
  .ci-content-reference-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem var(--ci-content-reference-inner-gap);
    color: var(--ci-content-reference-color);
    font-size: var(--ci-content-reference-size);
    font-weight: 600;
    line-height: var(--ci-content-reference-leading);
    text-align: center;
  }

  .ci-content-section--strip.ci-content-section--line > .ci-content-reference-list + .ci-content-reference-list::before {
    content: "|";
    margin-inline: var(--ci-content-reference-separator-gap);
  }

  .ci-content-reference-label::after {
    content: ":";
  }

  .ci-content-reference-items {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .ci-content-reference-link {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ci-content-reference-inner-gap);
    color: inherit;
    text-decoration: none;
  }

  .ci-content-reference-link:hover {
    color: var(--ci-muted);
  }
}


/* ==========================================================================
   9. Patterns / الگوهای کاربردی
   --------------------------------------------------------------------------
   در این بخش کامپوننت‌های ترکیبی و قابل استفاده دوباره قرار می‌گیرند.
   این الگوها از توکن‌ها و primitiveها استفاده می‌کنند و به یک صفحه خاص
   وابسته نیستند.
   ========================================================================== */

@layer patterns {
  :root {
    /* شبکه پویا؛ اندازه و جلوه‌های این کامپوننت مستقل از فرم و نوار بالا هستند. */
    --ci-motion-grid-card-width: 8rem;
    --ci-motion-grid-card-height: 11.25rem;
    --ci-motion-grid-gap: 2rem;
    --ci-motion-grid-stage-bleed: 24vmax;
    --ci-motion-grid-card-background: rgba(var(--color-black-rgb), 0.25);
    --ci-motion-grid-shadow-color: rgba(var(--color-black-rgb), 0.75);
    --ci-motion-grid-shadow-blur: 0.5;
    --ci-motion-grid-shadow-offset-y: 0.25;

    /* گالری تصویری چرخشی؛ تنظیمات آن از تصویر تکی مستقل هستند. */
    --ci-images-gap: 1rem;
    --ci-images-item-width: 25rem;
    --ci-images-center-padding: max(
      var(--ci-images-edge-width),
      calc((100dvw - min(100dvw, var(--ci-images-item-width))) / 2)
    );
    --ci-images-edge-width: var(--ci-container-mobile-gutter);
    --ci-images-edge-background: light-dark(
      rgba(var(--color-primary-light-rgb), 0.5),
      rgba(var(--color-secondary-base-rgb), 0.5)
    );
    --ci-images-edge-backdrop: blur(2rem) saturate(1.5);
    --ci-images-dot-size: 0.5rem;
    --ci-images-dot-far-size: 0.25rem;
    --ci-images-dot-mid-size: 0.375rem;
    --ci-images-dot-active-size: 2rem;
    --ci-images-dot-duration: 5s;
    --ci-images-dot-background: var(--color-neutral-base);
    --ci-images-dot-active-background: var(--color-black);

    /* نوار بالا؛ این اندازه‌ها فقط رفتار و ظاهر topbar را کنترل می‌کنند. */
    --ci-topbar-base-size: 0.75rem;
    --ci-shell-topbar-height: calc(5 * var(--ci-topbar-base-size));
    --ci-topbar-max-width: calc(102 * var(--ci-topbar-base-size));
    --ci-topbar-navigation-width: calc(82 * var(--ci-topbar-base-size));
    --ci-topbar-action-size: calc(5 * var(--ci-topbar-base-size));
    --ci-topbar-icon-size: calc(3 * var(--ci-topbar-base-size));
    --ci-topbar-account-size: 2rem;
    --ci-topbar-mobile-account-size: 1.75rem;
    --ci-topbar-panel-background: rgba(var(--color-black-rgb), 0.75);
    --ci-topbar-panel-backdrop: blur(calc(2 * var(--ci-topbar-base-size))) saturate(1.5);
    --ci-topbar-shadow: 0 0 calc(0.25 * var(--ci-topbar-base-size)) calc(0.25 * var(--ci-topbar-base-size)) rgba(var(--color-black-rgb), 0.25);
    --ci-topbar-panel-shadow: 0 calc(0.5 * var(--ci-topbar-base-size)) calc(0.75 * var(--ci-topbar-base-size)) rgba(var(--color-black-rgb), 0.25);
    --ci-topbar-link-size: calc(1.5 * var(--ci-topbar-base-size));
    --ci-topbar-panel-link-size: calc(1.25 * var(--ci-topbar-base-size));
    --ci-topbar-link-color: rgba(var(--color-primary-base-rgb), 0.8125);
    --ci-topbar-link-active-color: rgb(var(--color-primary-base-rgb));
    --ci-topbar-mobile-panel-gap: calc(0.5 * var(--ci-topbar-base-size));
    --ci-topbar-mobile-panel-padding: calc(1 * var(--ci-topbar-base-size));
    --ci-topbar-toggle-line-width: calc(1.5 * var(--ci-topbar-base-size));
    --ci-topbar-toggle-line-height: calc(0.125 * var(--ci-topbar-base-size));
    --ci-topbar-toggle-line-shift: calc(0.375 * var(--ci-topbar-base-size));
    --ci-topbar-motion-duration: 0.375s;
    --ci-topbar-motion-ease: cubic-bezier(0.42, 0, 0.16, 1);

    /* فوتر عمومی؛ ارتفاع آن منعطف است تا متن در موبایل قطع نشود. */
    --ci-shell-footer-height: 4rem;
    --ci-footer-gap: 0.125rem;
    --ci-footer-padding-block: 0.75rem;
    --ci-footer-padding-inline: 1.5rem;
    --ci-footer-shadow: 0 -0.25rem 0.25rem rgba(var(--color-black-rgb), 0.25);
    --ci-footer-text-size: 0.875rem;
    --ci-footer-text-leading: 1.5;
    --ci-footer-primary-text-size: 1rem;
  }

  /* شبکه پویا؛ پس‌زمینه متحرک مستقل برای صفحه‌هایی که به لایه تصویری زنده نیاز دارند. */
  .ci-motion-grid {
    position: fixed;
    top: 50%;
    left: 50%;
    inline-size: calc(100dvw + var(--ci-motion-grid-stage-bleed));
    block-size: calc(100dvh + var(--ci-motion-grid-stage-bleed));
    overflow: hidden;
    color: var(--ci-text);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 0;
  }

  .ci-motion-grid__canvas {
    inline-size: 100%;
    block-size: 100%;
    display: block;
  }

  .ci-motion-grid__source {
    display: none;
  }

  /* نوار بالای CI؛ در موبایل ناوبری افقی به پنل بازشونده تبدیل می‌شود. */
  .ci-topbar {
    inline-size: 100%;
    block-size: var(--ci-shell-topbar-height);
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    background: var(--ci-topbar-panel-background);
    box-shadow: var(--ci-topbar-shadow);
    backdrop-filter: var(--ci-topbar-panel-backdrop);
    -webkit-backdrop-filter: var(--ci-topbar-panel-backdrop);
    font-size: var(--ci-topbar-base-size);
  }

  .ci-topbar__container {
    inline-size: min(100%, var(--ci-topbar-max-width));
    block-size: var(--ci-shell-topbar-height);
    margin-inline: auto;
    position: relative;
    display: grid;
    grid-template-columns:
      var(--ci-topbar-action-size)
      var(--ci-topbar-action-size)
      minmax(0, var(--ci-topbar-navigation-width))
      var(--ci-topbar-action-size)
      var(--ci-topbar-action-size);
    align-items: center;
  }

  .ci-topbar__nav-toggle {
    display: none;
  }

  .ci-topbar__brand,
  .ci-topbar__brand-link,
  .ci-topbar__account {
    inline-size: var(--ci-topbar-action-size);
    block-size: var(--ci-topbar-action-size);
    display: grid;
    place-items: center;
    position: relative;
  }

  .ci-topbar__brand,
  .ci-topbar__brand-link {
    grid-column: 1;
  }

  .ci-topbar__brand + .ci-topbar__spacer,
  .ci-topbar__brand-link + .ci-topbar__spacer {
    grid-column: 2;
  }

  .ci-topbar__navigation {
    grid-column: 3;
    inline-size: var(--ci-topbar-navigation-width);
    block-size: var(--ci-shell-topbar-height);
  }

  .ci-topbar__navigation + .ci-topbar__spacer {
    grid-column: 4;
  }

  .ci-topbar__account {
    grid-column: 5;
  }

  .ci-topbar__brand-button,
  .ci-topbar__account-button {
    inline-size: var(--ci-topbar-action-size);
    block-size: var(--ci-topbar-action-size);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .ci-topbar__brand-button,
  .ci-topbar__brand-link,
  .ci-topbar__account-button,
  .ci-topbar__link {
    color: var(--ci-topbar-link-color);
    transition: color var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease),
      opacity var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease);
  }

  .ci-topbar__brand-link:hover,
  .ci-topbar__brand-link:focus-visible,
  .ci-topbar__brand-button:hover,
  .ci-topbar__brand-button:focus-visible,
  .ci-topbar__brand.is-open .ci-topbar__brand-button,
  .ci-topbar__account-button:hover,
  .ci-topbar__account-button:focus-visible,
  .ci-topbar__account.is-open .ci-topbar__account-button,
  .ci-topbar__link:hover,
  .ci-topbar__link:focus-visible {
    color: var(--ci-topbar-link-active-color);
    opacity: 1;
    outline: none;
  }

  .ci-topbar__brand-mark {
    inline-size: var(--ci-topbar-icon-size);
    block-size: var(--ci-topbar-icon-size);
    object-fit: contain;
    transition: filter 0.25s ease;
  }

  .ci-topbar__brand.is-open .ci-topbar__brand-mark {
    filter: drop-shadow(0 0 0.375rem rgba(var(--color-primary-base-rgb), 0.75));
  }

  .ci-topbar__panel {
    border-radius: 0 0 var(--ci-form-box-radius) var(--ci-form-box-radius);
    background: var(--ci-topbar-panel-background);
    box-shadow: var(--ci-topbar-panel-shadow);
    backdrop-filter: var(--ci-topbar-panel-backdrop);
    -webkit-backdrop-filter: var(--ci-topbar-panel-backdrop);
  }

  .ci-topbar__menu {
    block-size: var(--ci-shell-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
  }

  .ci-topbar__item {
    transition: opacity var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease),
      transform var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease);
  }

  .ci-topbar__link {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    font-family: var(--ci-font-family-base);
    font-size: var(--ci-topbar-link-size);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .ci-space-menu,
  .ci-account-menu {
    min-inline-size: 18rem;
    position: absolute;
    inset-block-start: var(--ci-shell-topbar-height);
    display: grid;
    padding-block: 1rem;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-3rem) scale(0.9375);
    transform-origin: top left;
    transition: opacity var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease),
      transform var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease);
    z-index: 130;
  }

  .ci-space-menu {
    inset-inline-start: auto;
    inset-inline-end: auto;
    right: 0;
    left: auto;
    transform: translateX(3rem) scale(0.9375);
    transform-origin: top right;
  }

  .ci-account-menu {
    inset-inline-end: 0;
  }

  .ci-space-menu[hidden],
  .ci-account-menu[hidden] {
    display: none;
  }

  .ci-space-menu.is-open,
  .ci-account-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
  }

  .ci-space-menu.is-open {
    transform: translateX(0) scale(1);
  }

  .ci-space-menu__item,
  .ci-account-menu__item {
    inline-size: 100%;
    display: block;
    padding-block: 0.75rem;
    padding-inline: 1.5rem;
    border: 0;
    background: transparent;
    color: rgba(var(--color-primary-base-rgb), 0.875);
    font-family: var(--ci-font-family-base);
    font-size: var(--ci-topbar-panel-link-size);
    font-weight: 700;
    line-height: 1.5;
    text-align: right;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    transform: translateX(-3.25rem);
    transition: opacity var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease),
      transform var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease),
      background-color 0.25s ease,
      color 0.25s ease;
  }

  .ci-space-menu__item {
    transform: translateX(3.25rem);
  }

  .ci-space-menu.is-open .ci-space-menu__item,
  .ci-account-menu.is-open .ci-account-menu__item {
    opacity: 1;
    transform: translateX(0);
  }

  .ci-space-menu__item:hover,
  .ci-space-menu__item:focus-visible,
  .ci-account-menu__item:hover,
  .ci-account-menu__item:focus-visible {
    background: rgba(var(--color-primary-base-rgb), 0.125);
    color: rgb(var(--color-highlight-base-rgb));
    outline: none;
  }

  .ci-account-menu__form {
    margin: 0;
  }

  .ci-topbar__account-frame {
    inline-size: var(--ci-topbar-account-size);
    block-size: var(--ci-topbar-account-size);
    display: grid;
    place-items: center;
    border-radius: 50%;
  }

  .ci-topbar__account-icon {
    inline-size: var(--ci-topbar-account-size);
    block-size: var(--ci-topbar-account-size);
    display: grid;
    place-items: center;
    border: var(--border-width-0-125) solid rgb(var(--color-highlight-base-rgb));
    border-radius: 50%;
    box-sizing: border-box;
    background: transparent;
    transition: box-shadow 0.25s ease;
  }

  .ci-topbar__account-button:hover .ci-topbar__account-icon,
  .ci-topbar__account-button:focus-visible .ci-topbar__account-icon,
  .ci-topbar__account.is-open .ci-topbar__account-icon {
    box-shadow: 0 0 0.375rem currentColor;
  }

  .ci-topbar__account-icon::before {
    content: "";
    inline-size: 100%;
    block-size: 100%;
    display: block;
    background: currentColor;
    -webkit-mask: url("/ci/assets/icons/User.svg") center / contain no-repeat;
    mask: url("/ci/assets/icons/User.svg") center / contain no-repeat;
  }

  .ci-topbar__search {
    inline-size: var(--ci-topbar-navigation-width);
    block-size: var(--ci-shell-topbar-height);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: auto;
    inset-inline-end: calc(2 * var(--ci-topbar-action-size));
    z-index: 120;
    padding-inline: var(--ci-topbar-action-size);
    overflow: visible;
  }

  .ci-topbar__search.is-hidden {
    opacity: 0;
    pointer-events: none;
  }

  .ci-topbar__search-icon,
  .ci-topbar__search-close {
    inline-size: var(--ci-topbar-action-size);
    block-size: var(--ci-topbar-action-size);
    display: grid;
    place-items: center;
    position: absolute;
    inset-block-start: 0;
    opacity: 0.5;
  }

  .ci-topbar__search-icon {
    right: 0.5rem;
  }

  .ci-topbar__search-icon::before {
    content: "";
    inline-size: 1.5em;
    block-size: 1.5em;
    position: absolute;
    top: 1.35em;
    left: 1.45em;
    border: 0.22em solid rgb(var(--color-primary-base-rgb));
    border-radius: 50%;
  }

  .ci-topbar__search-icon::after {
    content: "";
    inline-size: 0.875em;
    block-size: 0.22em;
    position: absolute;
    top: 2.75em;
    left: 2.65em;
    background: rgb(var(--color-primary-base-rgb));
    border-radius: var(--radius-pill);
    transform: rotate(45deg);
  }

  .ci-topbar__search-close {
    left: 0.75em;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: opacity var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease);
  }

  .ci-topbar__search-close:hover,
  .ci-topbar__search-close:focus-visible {
    opacity: 0.75;
    outline: none;
  }

  .ci-topbar__search-close::before,
  .ci-topbar__search-close::after {
    content: "";
    inline-size: 1.25rem;
    block-size: 0.1875rem;
    position: absolute;
    background: rgb(var(--color-primary-base-rgb));
    border-radius: var(--radius-pill);
  }

  .ci-topbar__search-close::before {
    transform: rotate(45deg);
  }

  .ci-topbar__search-close::after {
    transform: rotate(-45deg);
  }

  .ci-topbar__search-form {
    inline-size: 100%;
    block-size: var(--ci-shell-topbar-height);
    display: flex;
    align-items: center;
  }

  .ci-topbar__search-input {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: rgb(var(--color-primary-base-rgb));
    font-family: var(--ci-font-family-base);
    font-size: var(--ci-topbar-link-size);
    font-weight: 700;
    line-height: 1;
    padding: 0;
  }

  .ci-topbar__search-input::placeholder {
    color: rgba(var(--color-primary-base-rgb), 0.6875);
  }

  .ci-topbar__quick-links {
    position: absolute;
    inset-block-start: calc(var(--ci-shell-topbar-height) - 0.125rem);
    inset-inline: 0;
    padding: 1rem;
  }

  .ci-topbar__quick-links h2 {
    margin-block: 0.5rem 0;
    margin-inline: 2rem;
    color: rgba(var(--color-primary-base-rgb), 0.875);
    font-size: var(--ci-topbar-link-size);
    font-weight: 700;
    line-height: 1.5;
  }

  .ci-topbar__quick-links ul {
    margin-block-start: 0.75rem;
    list-style: none;
  }

  .ci-topbar__quick-links a {
    inline-size: 100%;
    display: inline-block;
    padding-block: 0.5rem;
    padding-inline: 3rem;
    color: rgba(var(--color-primary-base-rgb), 0.875);
    font-size: var(--ci-topbar-panel-link-size);
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
  }

  .ci-topbar__quick-links a:hover,
  .ci-topbar__quick-links a:focus-visible {
    background: rgba(var(--color-primary-base-rgb), 0.125);
    color: rgb(var(--color-highlight-base-rgb));
    outline: none;
  }

  .ci-topbar__menu.is-searching .ci-topbar__item {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
  }

  .ci-topbar__item:nth-last-of-type(1),
  .ci-topbar__menu.is-searching .ci-topbar__item:nth-last-of-type(7) {
    transition-delay: 0ms;
  }

  .ci-topbar__item:nth-last-of-type(2),
  .ci-topbar__menu.is-searching .ci-topbar__item:nth-last-of-type(6) {
    transition-delay: 40ms;
  }

  .ci-topbar__item:nth-last-of-type(3),
  .ci-topbar__menu.is-searching .ci-topbar__item:nth-last-of-type(5) {
    transition-delay: 80ms;
  }

  .ci-topbar__item:nth-last-of-type(4),
  .ci-topbar__menu.is-searching .ci-topbar__item:nth-last-of-type(4) {
    transition-delay: 120ms;
  }

  .ci-topbar__item:nth-last-of-type(5),
  .ci-topbar__menu.is-searching .ci-topbar__item:nth-last-of-type(3) {
    transition-delay: 160ms;
  }

  .ci-topbar__item:nth-last-of-type(6),
  .ci-topbar__menu.is-searching .ci-topbar__item:nth-last-of-type(2) {
    transition-delay: 200ms;
  }

  .ci-topbar__item:nth-last-of-type(7),
  .ci-topbar__menu.is-searching .ci-topbar__item:nth-last-of-type(1) {
    transition-delay: 240ms;
  }

  .ci-topbar__search-form,
  .ci-topbar__search-icon {
    opacity: 1;
    transform: translateX(0);
    transition: opacity var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease),
      transform var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease);
    transition-delay: 300ms;
  }

  .ci-topbar__search.is-hidden .ci-topbar__search-form,
  .ci-topbar__search.is-hidden .ci-topbar__search-icon {
    opacity: 0;
    transform: translateX(-3em);
  }

  .ci-topbar__search-close {
    transition: opacity var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease);
    transition-delay: 400ms;
  }

  .ci-topbar__search.is-hidden .ci-topbar__search-close {
    opacity: 0;
  }

  .ci-topbar__search.is-hidden .ci-topbar__quick-links h2 {
    opacity: 0;
    transform: translateX(-3em);
  }

  .ci-topbar__quick-links h2 {
    opacity: 1;
    transform: translateX(0);
    transition: opacity var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease),
      transform var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease);
    transition-delay: 100ms;
  }

  .ci-topbar__search.is-hidden .ci-topbar__quick-links li {
    opacity: 0;
    transform: translateX(-3.25em);
  }

  .ci-topbar__quick-links li {
    opacity: 1;
    transform: translateX(0);
    transition: opacity var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease),
      transform var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease);
  }

  .ci-topbar__quick-links li:nth-of-type(1) {
    transition-delay: 120ms;
  }

  .ci-topbar__quick-links li:nth-of-type(2) {
    transition-delay: 160ms;
  }

  .ci-topbar__quick-links li:nth-of-type(3) {
    transition-delay: 200ms;
  }

  .ci-topbar__quick-links li:nth-of-type(4) {
    transition-delay: 240ms;
  }

  .ci-topbar__quick-links li:nth-of-type(5) {
    transition-delay: 280ms;
  }

  .ci-topbar__scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(var(--color-secondary-base-rgb), 0.25);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease);
  }

  .ci-topbar__scrim.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .ci-topbar__scrim[hidden] {
    display: none;
  }

  /* فوتر عمومی CI؛ ارتفاع آن منعطف است تا در موبایل متن قطع یا فشرده نشود. */
  .ci-footer {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ci-footer-gap);
    padding-block: var(--ci-footer-padding-block);
    padding-inline: var(--ci-footer-padding-inline);
    background: var(--ci-band);
    box-shadow: var(--ci-footer-shadow);
    color: var(--ci-text);
    text-align: center;
  }

  .ci-footer p {
    font-size: var(--ci-footer-text-size);
    font-weight: 600;
    line-height: var(--ci-footer-text-leading);
  }

  .ci-footer p:first-child {
    font-size: var(--ci-footer-primary-text-size);
    font-weight: 700;
  }
}


/* ==========================================================================
   10. Form Primitives / اجزای عمومی فرم
   --------------------------------------------------------------------------
   در این بخش اجزای مشترک فرم‌ها تعریف می‌شوند:
   قاب، فیلد، input، پیام، لینک، checkbox و دکمه.
   ========================================================================== */

@layer forms {
  :root {
    /* اجزای عمومی فرم؛ همه اندازه‌ها مستقل از topbar و شبکه پویا هستند. */
    --ci-form-width: 46rem;
    --ci-form-gap: 2rem;
    --ci-form-box-height: 5rem;
    --ci-form-box-padding: 1rem;
    --ci-form-box-radius: 1rem;
    --ci-form-box-border-width: var(--border-width-0-0625);
    --ci-form-box-border-color: rgba(var(--color-neutral-dark-rgb), 0.75);
    --ci-form-control-background: rgba(var(--color-black-rgb), 0.5);
    --ci-form-control-backdrop: blur(2rem) saturate(1.5);
    --ci-form-input-background: rgba(var(--color-neutral-dark-rgb), 0.5);
    --ci-form-input-backdrop: blur(1.25rem) saturate(1.5);
    --ci-form-shadow: 0 0.5rem 1rem rgba(var(--color-black-rgb), 0.375);
    --ci-form-shadow-strong: 0 0.75rem 1.25rem rgba(var(--color-black-rgb), 0.375);
    --ci-form-title-size: 2rem;
    --ci-form-text-size: 1.5rem;
    --ci-form-message-size: 1.25rem;
    --ci-form-input-height: 3rem;
    --ci-form-checkbox-size: 3rem;
    --ci-form-checkbox-icon-size: 2rem;
    --ci-form-focus-ring: 0 0 0 var(--border-width-0-0625) rgba(var(--color-primary-base-rgb), 0.75);
  }

  .ci-auth__box {
    inline-size: 100%;
    block-size: var(--ci-form-box-height);
    display: flex;
    align-items: center;
    border: var(--ci-form-box-border-width) solid var(--ci-form-box-border-color);
    border-radius: var(--ci-form-box-radius);
    background: var(--ci-form-control-background);
    box-shadow: var(--ci-form-shadow);
    backdrop-filter: var(--ci-form-control-backdrop);
    -webkit-backdrop-filter: var(--ci-form-control-backdrop);
    color: rgb(var(--color-primary-base-rgb));
  }

  .ci-auth__title {
    justify-content: center;
    padding: var(--ci-form-box-padding);
    font-family: var(--ci-font-family-heading);
    font-size: var(--ci-form-title-size);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
  }

  .ci-auth__hint {
    justify-content: center;
    padding: var(--ci-form-box-padding);
    font-size: var(--ci-form-text-size);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
  }

  .ci-auth__link {
    text-decoration-line: underline;
    text-decoration-thickness: 0.125em;
    text-underline-offset: 0.25em;
    transition: color 0.25s ease;
  }

  .ci-auth__link:hover,
  .ci-auth__link:focus-visible {
    color: rgb(var(--color-highlight-base-rgb));
    outline: none;
  }

  .ci-auth__validation {
    inline-size: 100%;
    color: rgb(var(--color-danger-light-rgb));
    font-size: var(--ci-form-message-size);
    font-weight: 600;
    line-height: 1.75;
  }

  .ci-auth__validation--status {
    color: rgb(var(--color-success-light-rgb));
  }

  .ci-auth__validation:empty {
    display: none;
  }

  .ci-auth__validation ul {
    list-style: none;
  }

  .ci-auth__field {
    position: relative;
    padding: var(--ci-form-box-padding);
    overflow: hidden;
  }

  .ci-auth__field::before {
    content: "";
    position: absolute;
    inset: var(--ci-form-box-padding);
    background: var(--ci-form-input-background);
    backdrop-filter: var(--ci-form-input-backdrop);
    -webkit-backdrop-filter: var(--ci-form-input-backdrop);
    pointer-events: none;
  }

  .ci-auth__label {
    position: absolute;
    inline-size: 0.0625rem;
    block-size: 0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .ci-auth__input {
    inline-size: 100%;
    block-size: var(--ci-form-input-height);
    position: relative;
    z-index: 1;
    border: 0;
    outline: 0;
    padding-block: calc(0.5 * var(--ci-auth-base-size));
    padding-inline: var(--ci-auth-base-size);
    background: transparent;
    color: rgb(var(--color-primary-base-rgb));
    font-size: var(--ci-form-text-size);
    font-weight: 600;
    line-height: 1.25;
    text-align: right;
  }

  .ci-auth__input::placeholder {
    color: rgba(var(--color-primary-base-rgb), 0.5);
  }

  .ci-auth__input:focus {
    box-shadow: var(--ci-form-focus-ring);
  }

  /* کدهای عددی باید با جهت و چینش چپ‌به‌راست خوانده شوند. */
  .ci-auth__input--code {
    direction: ltr;
    text-align: left;
  }

  .ci-auth__checkbox-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .ci-auth__checkbox {
    inline-size: var(--ci-form-checkbox-size);
    block-size: var(--ci-form-checkbox-size);
    display: grid;
    grid-column: 2;
    place-items: center;
    align-self: center;
    border: 0;
    border-radius: calc(0.375 * var(--ci-auth-base-size));
    background: transparent;
    color: rgba(var(--color-primary-base-rgb), 0.875);
    transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  }

  .ci-auth__checkbox::before {
    content: "";
    inline-size: var(--ci-form-checkbox-icon-size);
    block-size: var(--ci-form-checkbox-icon-size);
    display: block;
    background: currentColor;
    -webkit-mask: url("/ci/assets/icons/checkbox-unmarked.svg") center / contain no-repeat;
    mask: url("/ci/assets/icons/checkbox-unmarked.svg") center / contain no-repeat;
  }

  .ci-auth__checkbox-input:checked + .ci-auth__checkbox {
    background: transparent;
    color: rgb(var(--color-primary-base-rgb));
    box-shadow: none;
  }

  .ci-auth__checkbox-input:checked + .ci-auth__checkbox::before {
    -webkit-mask-image: url("/ci/assets/icons/checkbox-marked.svg");
    mask-image: url("/ci/assets/icons/checkbox-marked.svg");
  }

  .ci-auth__checkbox-input:focus-visible + .ci-auth__checkbox {
    box-shadow: var(--ci-form-focus-ring);
  }

  .ci-auth__submit {
    inline-size: min(var(--ci-auth-action-column-width), 100%);
    block-size: var(--ci-form-box-height);
    align-self: flex-end;
    display: grid;
    place-items: center;
    padding-inline: var(--ci-form-box-padding);
    border: var(--ci-form-box-border-width) solid rgb(var(--color-success-base-rgb));
    border-radius: calc(2.5 * var(--ci-auth-base-size));
    background: rgba(var(--color-success-dark-rgb), 0.5);
    box-shadow: var(--ci-form-shadow);
    backdrop-filter: var(--ci-form-control-backdrop);
    -webkit-backdrop-filter: var(--ci-form-control-backdrop);
    color: rgb(var(--color-white-rgb));
    font-size: var(--ci-form-text-size);
    font-weight: 700;
    line-height: 1.5;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
  }

  .ci-auth__submit:hover,
  .ci-auth__submit:focus-visible {
    background: rgba(var(--color-success-base-rgb), 0.5);
    box-shadow: var(--ci-form-shadow-strong);
    outline: none;
  }

  .ci-auth__submit:active {
    transform: none;
  }

  .ci-auth__submit--highlight,
  .ci-auth__submit--login {
    inline-size: 100%;
    border-color: rgb(var(--color-highlight-base-rgb));
    background: rgba(var(--color-highlight-dark-rgb), 0.5);
  }

  .ci-auth__submit--login {
    grid-area: login;
  }

  .ci-auth__submit--highlight:hover,
  .ci-auth__submit--highlight:focus-visible,
  .ci-auth__submit--login:hover,
  .ci-auth__submit--login:focus-visible {
    background: rgba(var(--color-highlight-base-rgb), 0.5);
  }
}


/* ==========================================================================
   11. Auth Pages / صفحه‌های نام‌نویسی و ورود
   --------------------------------------------------------------------------
   در این بخش فقط چیدمان صفحه‌های ورود و نام‌نویسی کنترل می‌شود.
   اجزای داخلی فرم از لایه forms می‌آیند.
   ========================================================================== */

@layer auth {
  .ci-shell--auth {
    /* اندازه پایه Auth؛ همه ابعاد ویژه ورود و نام‌نویسی از همین مقدار ساخته می‌شوند. */
    --ci-auth-base-size: 0.75rem;
    --ci-form-width: calc(46 * var(--ci-auth-base-size));
    --ci-form-gap: calc(2 * var(--ci-auth-base-size));
    --ci-form-box-height: calc(5 * var(--ci-auth-base-size));
    --ci-form-box-padding: var(--ci-auth-base-size);
    --ci-form-box-radius: var(--ci-auth-base-size);
    --ci-form-control-backdrop: blur(calc(2 * var(--ci-auth-base-size))) saturate(1.5);
    --ci-form-input-backdrop: blur(calc(1.25 * var(--ci-auth-base-size))) saturate(1.5);
    --ci-form-shadow: 0 calc(0.5 * var(--ci-auth-base-size)) var(--ci-auth-base-size) rgba(var(--color-black-rgb), 0.375);
    --ci-form-shadow-strong: 0 calc(0.75 * var(--ci-auth-base-size)) calc(1.25 * var(--ci-auth-base-size)) rgba(var(--color-black-rgb), 0.375);
    --ci-form-title-size: calc(1.75 * var(--ci-auth-base-size));
    --ci-form-text-size: calc(1.5 * var(--ci-auth-base-size));
    --ci-form-message-size: calc(1.25 * var(--ci-auth-base-size));
    --ci-form-input-height: calc(3 * var(--ci-auth-base-size));
    --ci-form-checkbox-size: calc(3 * var(--ci-auth-base-size));
    --ci-form-checkbox-icon-size: calc(2 * var(--ci-auth-base-size));
    --ci-auth-gap: calc(2 * var(--ci-auth-base-size));
    --ci-auth-main-start-space: calc(4 * var(--ci-auth-base-size));
    --ci-auth-main-end-space: calc(8 * var(--ci-auth-base-size));
    --ci-auth-action-column-width: calc(22 * var(--ci-auth-base-size));
    --ci-auth-action-gap: calc(2 * var(--ci-auth-base-size));
    min-block-size: 100vh;
    min-block-size: 100dvh;
    grid-template-rows: var(--ci-shell-topbar-height) minmax(0, 1fr) minmax(var(--ci-shell-footer-height), auto);
    gap: var(--ci-auth-gap);
    overflow: visible;
    background: transparent;
  }

  .ci-shell--auth .ci-topbar {
    grid-row: 1;
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
  }

  .ci-shell--auth .ci-auth {
    grid-row: 2;
    align-items: stretch;
    grid-template-rows: var(--ci-auth-main-start-space) auto var(--ci-auth-main-end-space);
  }

  .ci-shell--auth .ci-footer {
    grid-row: 3;
  }

  .ci-shell--auth::before {
    content: none;
  }

  .ci-auth {
    min-block-size: 0;
    display: grid;
    justify-items: center;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow: visible;
    background: transparent;
    color: var(--ci-text);
    font-size: var(--ci-auth-base-size);
  }

  .ci-auth__column {
    inline-size: min(
      var(--ci-form-width),
      calc(100% - (2 * var(--ci-container-mobile-gutter)))
    );
  }

  .ci-auth__form {
    inline-size: 100%;
  }

  .ci-auth__column,
  .ci-auth__form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ci-form-gap);
  }

  .ci-auth__column {
    grid-row: 2;
    margin-block: 0;
  }

  .ci-auth__terms {
    display: grid;
    grid-template-columns:
      calc(2 * var(--ci-auth-base-size))
      var(--ci-form-checkbox-size)
      var(--ci-auth-base-size)
      minmax(0, calc(40 * var(--ci-auth-base-size)))
      var(--ci-auth-base-size);
    padding-block: var(--ci-form-box-padding);
  }

  .ci-auth__terms-text {
    grid-column: 4;
    align-self: center;
    color: rgb(var(--color-primary-base-rgb));
    font-size: var(--ci-form-text-size);
    font-weight: 600;
    line-height: 1.5;
  }

  .ci-auth__action-row {
    inline-size: 100%;
    display: grid;
    grid-template-columns: minmax(0, var(--ci-auth-action-column-width)) var(--ci-auth-action-gap) minmax(0, var(--ci-auth-action-column-width));
    grid-template-areas: "remember gap login";
    align-items: center;
  }

  .ci-auth__remember {
    inline-size: 100%;
    grid-area: remember;
    display: grid;
    grid-template-columns:
      var(--ci-auth-base-size)
      var(--ci-form-checkbox-size)
      0
      minmax(0, calc(16 * var(--ci-auth-base-size)))
      0;
    padding-block: var(--ci-form-box-padding);
    border-width: var(--border-width-0-125);
    border-color: rgb(var(--color-warning-base-rgb));
    border-radius: calc(2.5 * var(--ci-auth-base-size));
    background: rgba(var(--color-warning-dark-rgb), 0.5);
    color: rgb(var(--color-white-rgb));
    cursor: pointer;
  }

  .ci-auth__remember .ci-auth__checkbox,
  .ci-auth__remember .ci-auth__checkbox-input:checked + .ci-auth__checkbox {
    color: rgb(var(--color-warning-base-rgb));
  }

  .ci-auth__remember:hover {
    background: rgba(var(--color-warning-base-rgb), 0.5);
    box-shadow: var(--ci-form-shadow-strong);
  }

  .ci-auth__remember-text {
    grid-column: 4;
    align-self: center;
    padding-inline-start: 0;
    padding-inline-end: calc(3 * var(--ci-auth-base-size));
    color: rgb(var(--color-white-rgb));
    font-size: var(--ci-form-text-size);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }
}


/* ==========================================================================
   12. Temporary Landing / لندینگ موقت
   --------------------------------------------------------------------------
   در این بخش فقط صفحه لندینگ موقت کنترل می‌شود.
   این صفحه از قاب و کامپوننت های عمومی CI استفاده می کند، اما خودش
   کامپوننت عمومی محسوب نمی شود.
   ========================================================================== */

@layer landing {
  :root {
    /* لندینگ موقت؛ این مقدارها فقط ظاهر و فاصله‌های همان صفحه را کنترل می‌کنند. */
    --ci-home-width: 45rem;
    --ci-home-gap: 1.5rem;
    --ci-home-padding-block: 2.5rem;
    --ci-home-padding-inline: 1.5rem;
    --ci-home-brand-size: clamp(7.5rem, 12.5vw, 10rem);
    --ci-home-title-size: clamp(1.5rem, 2.5vw, 2rem);
    --ci-home-title-leading: 1.625;
    --ci-home-motion-grid-opacity: 0.125;
    --ci-home-brand-shadow: 0 0.5rem 0.75rem 0.375rem rgba(var(--color-black-rgb), 0.15),
      0 0.25rem 0.25rem rgba(var(--color-black-rgb), 0.3);
    --ci-home-title-shadow: 0 0.125rem 0.375rem rgba(var(--color-black-rgb), 0.18);
  }

  .ci-home {
    inline-size: min(100%, var(--ci-home-width));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ci-home-gap);
    padding-block: var(--ci-home-padding-block);
    padding-inline: var(--ci-home-padding-inline);
    text-align: center;
  }

  .ci-shell--home .ci-motion-grid {
    opacity: var(--ci-home-motion-grid-opacity);
  }

  .ci-home__brand {
    inline-size: var(--ci-home-brand-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: var(--ci-home-brand-shadow);
  }

  .ci-home__brand img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .ci-home h1 {
    color: var(--ci-text);
    font-size: var(--ci-home-title-size);
    font-weight: 700;
    line-height: var(--ci-home-title-leading);
    text-shadow: var(--ci-home-title-shadow);
  }

  .ci-home h1 span {
    display: block;
  }
}


/* ==========================================================================
   13. Profile Shell / پوسته عمومی صفحه شناسه
   --------------------------------------------------------------------------
   در این بخش قاب کلی صفحه عمومی شناسه تعریف می‌شود.
   منطق صفحه از JSON و content می‌آید؛ اینجا فقط ظاهر و چیدمان عمومی صفحه
   کنترل می‌شود.
   ========================================================================== */

@layer profile {
  :root {
    /* پوسته عمومی صفحه شناسه؛ این فاصله به قاب صفحه تعلق دارد. */
    --ci-profile-block-padding: 2rem;
  }

  /* پوسته عمومی صفحه شناسه؛ وابسته به گونه یا زیرگونه نیست و فقط قاب صفحه را می‌سازد. */
  .ci-profile {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    padding-block: var(--ci-profile-block-padding);
  }

  /* ستون اصلی صفحه که renderer JSON محتوای فاز اول را داخل آن می‌گذارد. */
  .ci-profile__content {
    --ci-stack-gap: 0;
  }

  /* بخش عنوان و زیرعنوان؛ طبق نمونه فیگما بین دو باکس فاصله جدا نداریم. */
  .ci-profile__intro {
    --ci-stack-gap: 0;
  }

  .ci-profile__intro + .ci-content-section--strip.ci-content-section--line {
    margin-block-start: 1rem;
  }

  .ci-content-section--strip.ci-content-section--line + .ci-content-section--strip.ci-content-section--line {
    margin-block-start: 0;
  }

  .ci-profile__intro + .ci-content-section:not(.ci-content-section--strip),
  .ci-content-section--strip.ci-content-section--line + .ci-content-section:not(.ci-content-section--strip),
  .ci-content-section:not(.ci-content-section--strip) + .ci-content-section {
    margin-block-start: var(--ci-content-section-gap);
  }
}


/* ==========================================================================
   14. Utilities / ابزارهای کمکی کوچک
   --------------------------------------------------------------------------
   در این بخش کلاس‌های کوچک و مستقل قرار می‌گیرند:
   مخفی‌سازی دسترس‌پذیر، محدود کردن عرض، کنترل overflow و کمک‌های مشابه.
   این کلاس‌ها باید کم، روشن و قابل پیش‌بینی باشند.
   ========================================================================== */


/* ==========================================================================
   15. Responsive Rules / قوانین واکنش‌گرا
   --------------------------------------------------------------------------
   در این بخش رفتار صفحه در اندازه‌های مختلف viewport و container تنظیم می‌شود.
   طراحی موبایل‌بیس است؛ یعنی حالت کوچک پایه است و از کوچک به بزرگ گسترش
   پیدا می‌کند.
   ========================================================================== */

@layer responsive {
  @media (max-width: 40rem) {
    :root {
      --ci-topbar-link-size: calc(1.25 * var(--ci-topbar-base-size));
      --ci-topbar-panel-link-size: calc(1.25 * var(--ci-topbar-base-size));
      --ci-shell-footer-height: 4.875rem;
      --ci-home-gap: 1.375rem;
      --ci-home-padding-block: 2rem;
      --ci-home-padding-inline: 1.375rem;
      --ci-home-title-size: clamp(1.5rem, 8vw, 1.875rem);
      --ci-home-title-leading: 1.75;
      --ci-form-width: 100%;
      --ci-form-gap: 1.5rem;
      --ci-form-text-size: 1.25rem;
      --ci-footer-text-size: 0.8125rem;
      --ci-footer-primary-text-size: 0.8125rem;
      --ci-auth-gap: 1.5rem;
      --ci-auth-action-gap: 1rem;
      --ci-auth-main-start-space: 2rem;
      --ci-auth-main-end-space: 4rem;
      --ci-topbar-toggle-line-shift: calc(0.5 * var(--ci-topbar-base-size));
      --ci-topbar-mobile-panel-width: 90dvw;
    }

    .ci-shell--auth {
      --ci-form-title-size: 1.25rem;
      --ci-form-text-size: 1rem;
      --ci-form-message-size: 0.75rem;
    }

    .ci-topbar__container {
      inline-size: 100%;
      grid-template-columns: var(--ci-topbar-action-size) minmax(0, 1fr) var(--ci-topbar-action-size);
    }

    .ci-topbar__nav-toggle {
      inline-size: var(--ci-topbar-action-size);
      block-size: var(--ci-topbar-action-size);
      grid-column: 1;
      display: grid;
      place-items: center;
      position: relative;
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--ci-topbar-link-active-color);
    }

    .ci-topbar__nav-toggle span {
      inline-size: var(--ci-topbar-toggle-line-width);
      block-size: var(--ci-topbar-toggle-line-height);
      position: absolute;
      background: currentColor;
      border-radius: var(--radius-pill);
      transform-origin: center;
      transition: transform var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease);
    }

    .ci-topbar__nav-toggle span:first-child {
      transform: translateY(calc(-1 * var(--ci-topbar-toggle-line-shift)));
    }

    .ci-topbar__nav-toggle span:last-child {
      transform: translateY(var(--ci-topbar-toggle-line-shift));
    }

    .ci-topbar.is-navigation-open .ci-topbar__nav-toggle span:first-child {
      transform: translateY(0) rotate(45deg);
    }

    .ci-topbar.is-navigation-open .ci-topbar__nav-toggle span:last-child {
      transform: translateY(0) rotate(-45deg);
    }

    .ci-topbar__brand,
    .ci-topbar__brand-link {
      grid-column: 2;
      justify-self: center;
    }

    .ci-topbar__account {
      grid-column: 3;
    }

    .ci-topbar__account-frame,
    .ci-topbar__account-icon {
      inline-size: var(--ci-topbar-mobile-account-size);
      block-size: var(--ci-topbar-mobile-account-size);
    }

    .ci-topbar__spacer {
      display: none;
    }

    .ci-topbar__navigation {
      inline-size: var(--ci-topbar-mobile-panel-width);
      block-size: calc(100dvh - var(--ci-shell-topbar-height));
      max-block-size: none;
      grid-column: 1 / -1;
      position: fixed;
      inset-block-start: var(--ci-shell-topbar-height);
      inset-inline-start: auto;
      inset-inline-end: 0;
      right: 0;
      left: auto;
      overflow: auto;
      background: var(--ci-topbar-panel-background);
      box-shadow: var(--ci-topbar-panel-shadow);
      backdrop-filter: var(--ci-topbar-panel-backdrop);
      -webkit-backdrop-filter: var(--ci-topbar-panel-backdrop);
      opacity: 0;
      pointer-events: none;
      transform: translateX(100%);
      transition:
        opacity var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease),
        transform var(--ci-topbar-motion-duration) var(--ci-topbar-motion-ease);
      z-index: 130;
    }

    .ci-topbar__navigation.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0);
    }

    .ci-topbar__menu {
      block-size: auto;
      display: grid;
      gap: var(--ci-topbar-mobile-panel-gap);
      padding: var(--ci-topbar-mobile-panel-padding);
    }

    .ci-topbar__item {
      opacity: 1;
      transform: none;
    }

    .ci-topbar__item:last-child {
      order: -1;
    }

    .ci-topbar__link {
      inline-size: 100%;
      display: block;
      padding-block: 0.875rem;
      padding-inline: 1rem;
      text-align: right;
    }

    .ci-space-menu,
    .ci-account-menu {
      inline-size: min(18rem, calc(100dvw - 2rem));
    }

    .ci-account-menu {
      inline-size: var(--ci-topbar-mobile-panel-width);
      block-size: calc(100dvh - var(--ci-shell-topbar-height));
      max-block-size: none;
      position: fixed;
      inset-block-start: var(--ci-shell-topbar-height);
      inset-inline-start: 0;
      inset-inline-end: auto;
      right: auto;
      left: 0;
      align-content: start;
      overflow: auto;
      transform: translateX(-100%) scale(1);
      transform-origin: top left;
    }

    .ci-account-menu__item {
      text-align: left;
    }

    .ci-account-menu.is-open {
      transform: translateX(0) scale(1);
    }

    .ci-space-menu {
      inset-inline-start: auto;
      inset-inline-end: auto;
      right: auto;
      left: 50%;
      transform: translateX(-50%) scale(0.9375);
      transform-origin: top center;
    }

    .ci-space-menu.is-open {
      transform: translateX(-50%) scale(1);
    }

    .ci-space-menu__item {
      text-align: center;
      transform: translateY(-0.5rem);
    }

    .ci-topbar__search {
      inline-size: var(--ci-topbar-mobile-panel-width);
      block-size: calc(100dvh - var(--ci-shell-topbar-height));
      inset-block-start: var(--ci-shell-topbar-height);
      inset-inline-start: auto;
      inset-inline-end: 0;
      right: 0;
      left: auto;
      padding-inline: var(--ci-topbar-action-size);
      background: var(--ci-topbar-panel-background);
      box-shadow: var(--ci-topbar-panel-shadow);
      backdrop-filter: var(--ci-topbar-panel-backdrop);
      -webkit-backdrop-filter: var(--ci-topbar-panel-backdrop);
      overflow: auto;
    }

    .ci-topbar__quick-links {
      max-block-size: calc(100dvh - var(--ci-shell-topbar-height));
      overflow: auto;
    }

  }

  @media (min-width: 80rem) {
    :root {
      --ci-image-profile-width: 25rem;
    }

    .ci-content-section-title {
      inline-size: 50%;
      margin-inline: auto;
    }
  }

}


/* ==========================================================================
   16. Motion and Accessibility / حرکت و دسترسی‌پذیری
   --------------------------------------------------------------------------
   در این بخش رفتارهای مربوط به motion، کاهش حرکت، contrast، focus و حالت‌های
   خاص مثل forced-colors تنظیم می‌شود تا صفحه برای همه کاربران قابل استفاده
   بماند.
   ========================================================================== */

@layer accessibility {
  @media (prefers-reduced-motion: reduce) {
    .ci-image__asset,
    .ci-profile--entity-person .ci-image--profile,
    .ci-topbar *,
    .ci-topbar__scrim {
      transition-duration: 1ms;
    }

    .ci-image--profile:hover .ci-image__asset {
      transform: none;
    }
  }

}