/* =========================================================================
   سیستم طراحی پیشگامان (pg.css)
   -------------------------------------------------------------------------
   CSS مدرن بدون ابزار Build و بدون کتابخانه: متغیرهای طراحی، لایه‌های CSS،
   ویژگی‌های منطقی (راست‌چین خودکار) و کامپوننت‌ها. راهنما و نمونه‌ی همه‌ی اجزا:
   صفحه‌ی ‎/ui-kit (فقط محیط توسعه) و docs/DESIGN.md.

   ترتیب لایه‌ها: reset ← base ← layout ← components ← site ← utilities
   (ابزارها همیشه بر کامپوننت‌ها غلبه می‌کنند، بدون !important).

   این فایل با site.css قدیمی یا Bootstrap در یک صفحه بارگذاری نمی‌شود.
   ========================================================================= */

@layer reset, base, layout, components, site, utilities;

/* ── قلم ─────────────────────────────────────────────────────────────── */
@font-face {
    font-family: "Vazirmatn";
    src: url("/lib/vazirmatn/Vazirmatn-Variable.woff2") format("woff2-variations"),
         url("/lib/vazirmatn/Vazirmatn-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ── متغیرهای طراحی ──────────────────────────────────────────────────── */
:root {
    /* سبز برند: رسمی و قابل اعتماد */
    --green-50: #eef8f3;
    --green-100: #d6efe2;
    --green-200: #afdec8;
    --green-300: #7fc6a7;
    --green-400: #48a982;
    --green-500: #1f8f66;
    --green-600: #137a57;
    --green-700: #0f6b4f;
    --green-800: #0d5640;
    --green-900: #0b4434;
    --green-950: #06291f;

    /* خنثی با ته‌رنگ سبز */
    --gray-0: #ffffff;
    --gray-25: #fbfcfb;
    --gray-50: #f5f7f6;
    --gray-100: #edf1ef;
    --gray-200: #e0e6e3;
    --gray-300: #c8d1cd;
    --gray-400: #9aa6a1;
    --gray-500: #6b7873;
    --gray-600: #4e5b56;
    --gray-700: #38443f;
    --gray-800: #24302b;
    --gray-900: #141c18;

    /* طلایی برای نشان «ویژه» و تأکید کم */
    --gold-50: #fdf7e9;
    --gold-100: #faecc8;
    --gold-400: #e3b04b;
    --gold-500: #cf9426;
    --gold-700: #8f5f0e;

    --red-50: #fdf1f0;
    --red-100: #fadcd9;
    --red-600: #c4321f;
    --red-700: #a3261a;
    --amber-50: #fef7e8;
    --amber-100: #fcebc4;
    --amber-600: #b86e00;
    --amber-700: #92570a;
    --blue-50: #eef4fd;
    --blue-100: #d8e6fb;
    --blue-600: #1f63c9;
    --blue-700: #1a50a3;

    /* نقش‌ها */
    --primary: var(--green-700);
    --primary-hover: var(--green-800);
    --primary-active: var(--green-900);
    --primary-soft: var(--green-50);
    --primary-soft-hover: var(--green-100);
    --on-primary: #ffffff;
    --accent: var(--gold-400);

    --bg: var(--gray-50);
    --surface: var(--gray-0);
    --surface-2: var(--gray-25);
    --surface-sunken: var(--gray-100);
    --border: var(--gray-200);
    --border-strong: var(--gray-300);
    --text: var(--gray-900);
    --text-2: var(--gray-600);
    --text-3: var(--gray-500);
    --text-inverse: #ffffff;

    --success: var(--green-600);
    --success-soft: var(--green-50);
    --warning: var(--amber-600);
    --warning-soft: var(--amber-50);
    --danger: var(--red-600);
    --danger-soft: var(--red-50);
    --info: var(--blue-600);
    --info-soft: var(--blue-50);

    --ring: 0 0 0 3px rgba(15, 107, 79, .28);
    --ring-danger: 0 0 0 3px rgba(196, 50, 31, .22);

    /* تایپوگرافی */
    --font: "Vazirmatn", system-ui, "Segoe UI", Tahoma, sans-serif;
    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.1875rem;
    --fs-xl: 1.375rem;
    --fs-2xl: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
    --fs-3xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    --fs-4xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
    --lh-tight: 1.45;
    --lh: 1.85;

    /* فاصله و اندازه */
    --s-1: .25rem;
    --s-2: .5rem;
    --s-3: .75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-10: 2.5rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-20: 5rem;

    --r-xs: 6px;
    --r-sm: 8px;
    --r: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-full: 999px;

    --sh-xs: 0 1px 2px rgba(20, 28, 24, .06);
    --sh-sm: 0 1px 3px rgba(20, 28, 24, .08), 0 1px 2px rgba(20, 28, 24, .04);
    --sh: 0 4px 14px -2px rgba(20, 28, 24, .08), 0 2px 4px -2px rgba(20, 28, 24, .05);
    --sh-lg: 0 18px 40px -12px rgba(20, 28, 24, .18), 0 6px 12px -6px rgba(20, 28, 24, .08);

    --container: 1200px;
    --container-narrow: 760px;
    --gutter: 16px;
    --header-h: 68px;

    --ease: cubic-bezier(.2, .7, .2, 1);
    --t: 160ms;

    --z-header: 40;
    --z-dropdown: 50;
    --z-drawer: 60;
    --z-modal: 70;
    --z-toast: 80;

    color-scheme: light;
}

@media (min-width: 768px) {
    :root { --gutter: 24px; --header-h: 72px; }
}

/* =========================================================================
   reset
   ========================================================================= */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { min-height: 100dvh; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; }
    img, video { height: auto; }
    input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
    button { cursor: pointer; background: none; border: 0; padding: 0; }
    a { color: inherit; text-decoration: none; }
    ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
    table { border-collapse: collapse; border-spacing: 0; }
    p, h1, h2, h3, h4, h5, h6, li { overflow-wrap: break-word; }
    [hidden] { display: none !important; }
    dialog { padding: 0; border: 0; color: inherit; background: none; max-width: none; max-height: none; }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    }
}

/* =========================================================================
   base
   ========================================================================= */
@layer base {
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

    body {
        font-family: var(--font);
        font-size: var(--fs-base);
        line-height: var(--lh);
        color: var(--text);
        background: var(--bg);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-feature-settings: "kern";
    }

    h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: 750; color: var(--text); letter-spacing: -.01em; }
    h1 { font-size: var(--fs-3xl); }
    h2 { font-size: var(--fs-2xl); }
    h3 { font-size: var(--fs-xl); }
    h4 { font-size: var(--fs-lg); }
    h5, h6 { font-size: var(--fs-md); }

    p { color: var(--text-2); }
    strong, b { font-weight: 700; color: var(--text); }
    small { font-size: var(--fs-sm); }
    hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--s-6); }
    code, kbd, samp { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; direction: ltr; unicode-bidi: isolate; }

    /* پیوند داخل متن: فقط رنگ برند، بدون زیرخط (تصمیم طراحی)؛ دسترسی‌پذیری با رنگ، وزن و حلقه‌ی فوکوس */
    :where(p, li, td, dd) a:not([class]) { color: var(--primary); font-weight: 500; text-decoration: none; transition: color var(--t); }
    :where(p, li, td, dd) a:not([class]):hover { color: var(--primary-hover); }

    ::selection { background: var(--green-100); color: var(--green-950); }

    :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
    :focus:not(:focus-visible) { outline: none; }

    /* آیکن SVG (‎<icon name="..." />) — اندازه از font-size، رنگ از متن */
    .i {
        display: inline-block;
        width: 1.25em;
        height: 1.25em;
        flex: none;
        vertical-align: -.25em;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.85;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .i-sm { font-size: .875em; }
    .i-lg { font-size: 1.25em; }
    .i-2x { font-size: 2em; }
    .i-rotate-90 { transform: rotate(90deg); }
    .i-flip { transform: scaleX(-1); }
    .i-spin { animation: pg-spin .8s linear infinite; }
    @keyframes pg-spin { to { transform: rotate(360deg); } }

    .skip-link {
        position: absolute; inset-inline-start: var(--s-4); top: -100px; z-index: 100;
        background: var(--primary); color: var(--on-primary); padding: var(--s-2) var(--s-4); border-radius: var(--r);
    }
    .skip-link:focus { top: var(--s-4); }
}

/* =========================================================================
   layout
   ========================================================================= */
@layer layout {
    .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
    .container-narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

    .section { padding-block: var(--s-12); }
    .section-lg { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap; }
    .section-head h2 { font-size: var(--fs-2xl); }
    .section-head p { margin-top: var(--s-1); }

    .stack { display: flex; flex-direction: column; gap: var(--stack, var(--s-4)); }
    .stack-sm { --stack: var(--s-2); }
    .stack-lg { --stack: var(--s-8); }
    .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--s-3)); }
    .cluster-sm { --cluster: var(--s-2); }

    .grid { display: grid; gap: var(--grid-gap, var(--s-5)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 280px)), 1fr)); }
    .grid-2 { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
    .grid-3, .grid-4 { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 640px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

    /* ستون کناری + محتوا (فیلترها، پنل کاربری)؛ روی موبایل زیر هم */
    .with-sidebar { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
    @media (min-width: 1024px) {
        .with-sidebar { grid-template-columns: var(--sidebar, 280px) minmax(0, 1fr); }
        .with-sidebar.is-end { grid-template-columns: minmax(0, 1fr) var(--sidebar, 320px); }
        .sticky-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
    }
}

/* =========================================================================
   components
   ========================================================================= */
@layer components {

    /* ── دکمه ─────────────────────────────────────────────────────────── */
    .btn {
        --btn-bg: var(--surface);
        --btn-fg: var(--text);
        --btn-bd: var(--border-strong);
        --btn-bg-h: var(--gray-50);
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--s-2);
        min-height: 44px;
        padding: 0 var(--s-5);
        border: 1.5px solid var(--btn-bd);
        border-radius: var(--r);
        background: var(--btn-bg);
        color: var(--btn-fg);
        font-size: var(--fs-sm);
        font-weight: 650;
        line-height: 1.2;
        white-space: nowrap;
        text-decoration: none;
        transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
        user-select: none;
    }
    .btn:hover { background: var(--btn-bg-h); }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { outline: none; box-shadow: var(--ring); }
    .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
    .btn .i { font-size: 1.05em; }

    .btn-primary { --btn-bg: var(--primary); --btn-fg: var(--on-primary); --btn-bd: var(--primary); --btn-bg-h: var(--primary-hover); box-shadow: 0 1px 2px rgba(6, 41, 31, .2), inset 0 1px 0 rgba(255, 255, 255, .12); }
    .btn-primary:hover { border-color: var(--primary-hover); }
    .btn-secondary { --btn-bg: var(--primary-soft); --btn-fg: var(--green-800); --btn-bd: transparent; --btn-bg-h: var(--primary-soft-hover); }
    .btn-outline { --btn-bg: transparent; --btn-fg: var(--primary); --btn-bd: var(--green-300); --btn-bg-h: var(--primary-soft); }
    .btn-ghost { --btn-bg: transparent; --btn-fg: var(--text-2); --btn-bd: transparent; --btn-bg-h: var(--gray-100); }
    .btn-ghost:hover { color: var(--text); }
    .btn-danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-bd: var(--danger); --btn-bg-h: var(--red-700); }
    .btn-danger-soft { --btn-bg: var(--danger-soft); --btn-fg: var(--red-700); --btn-bd: transparent; --btn-bg-h: var(--red-100); }
    .btn-accent { --btn-bg: var(--gold-400); --btn-fg: var(--gray-900); --btn-bd: var(--gold-400); --btn-bg-h: var(--gold-500); }
    .btn-light { --btn-bg: rgba(255, 255, 255, .12); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .28); --btn-bg-h: rgba(255, 255, 255, .2); }
    .btn-link { --btn-bg: transparent; --btn-bd: transparent; --btn-bg-h: transparent; --btn-fg: var(--primary); min-height: auto; padding: 0; }
    .btn-link:hover { color: var(--primary-hover); }

    .btn-sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-xs); border-radius: var(--r-sm); gap: var(--s-1); }
    .btn-lg { min-height: 52px; padding: 0 var(--s-6); font-size: var(--fs-base); border-radius: var(--r-lg); }
    .btn-block { display: flex; width: 100%; }
    .btn-icon { padding: 0; width: 44px; }
    .btn-icon.btn-sm { width: 36px; }
    .btn-icon.btn-lg { width: 52px; }
    .btn-icon .i { font-size: 1.2em; }

    /* حالت بارگذاری: aria-busy روی دکمه (validate.js پس از ارسال فرم می‌گذارد) */
    .btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
    .btn[aria-busy="true"] > * { visibility: hidden; }
    .btn[aria-busy="true"]::after {
        content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
        border-radius: 50%; border: 2px solid var(--btn-fg); border-inline-end-color: transparent;
        animation: pg-spin .7s linear infinite;
    }

    .btn-group { display: inline-flex; }
    .btn-group > .btn:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1.5px; }
    .btn-group > .btn:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }

    /* ── فرم ──────────────────────────────────────────────────────────── */
    .field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
    /* فاصله‌ی فیلدهای پیاپی؛ فیلد تله‌ی پنهان (hp-field) میان دو فیلد هم فاصله را نمی‌شکند */
    :where(.field, .field-row, .hp-field) + :where(.field, .field-row) { margin-top: var(--s-5); }
    /* ستون‌ها بر اساس پهنای خود ردیف (نه صفحه)؛ در کارت باریک خودکار زیر هم می‌روند */
    .field-row { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--field-min, 220px)), 1fr)); }

    .label { display: flex; align-items: baseline; gap: var(--s-1); font-size: var(--fs-sm); font-weight: 650; color: var(--text); line-height: 1.5; }
    .label .req { color: var(--danger); margin-inline-start: 2px; }
    .label .opt { font-weight: 400; color: var(--text-3); font-size: var(--fs-xs); }
    .label a { margin-inline-start: auto; font-weight: 500; color: var(--primary); }

    .input, .select, .textarea {
        width: 100%;
        min-height: 46px;
        padding: var(--s-2) var(--s-4);
        border: 1.5px solid var(--border-strong);
        border-radius: var(--r);
        background: var(--surface);
        color: var(--text);
        font-size: var(--fs-base);
        line-height: 1.6;
        transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
        appearance: none;
    }
    .textarea { min-height: 120px; padding-block: var(--s-3); resize: vertical; }
    .input::placeholder, .textarea::placeholder { color: var(--gray-400); }
    .input:hover, .select:hover, .textarea:hover { border-color: var(--gray-400); }
    .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
    .input:disabled, .select:disabled, .textarea:disabled, .input[readonly] { background: var(--surface-sunken); color: var(--text-3); cursor: not-allowed; }
    .select {
        padding-inline-end: var(--s-10);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7873' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left var(--s-3) center;
        background-size: 18px;
    }
    .select[multiple] { background-image: none; padding-inline-end: var(--s-4); min-height: 120px; }
    .input-sm { min-height: 38px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
    .input-lg { min-height: 54px; font-size: var(--fs-md); border-radius: var(--r-lg); }
    .ltr, .input[type="email"], .input[type="url"], .input[type="tel"], .input[dir="ltr"] { direction: ltr; text-align: start; unicode-bidi: plaintext; }
    .input[type="email"]::placeholder, .input[type="url"]::placeholder, .input[type="tel"]::placeholder { text-align: end; }

    /* خطا: کلاس‌های ASP.NET (asp-validation-for) و validate.js */
    .input-validation-error, .input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger) !important; }
    .input-validation-error:focus, .is-invalid:focus { box-shadow: var(--ring-danger) !important; }
    .field-error, .field-validation-error { display: flex; gap: var(--s-1); align-items: flex-start; font-size: var(--fs-xs); font-weight: 500; color: var(--danger); line-height: 1.6; }
    .field-validation-error::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 3px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
    .field-validation-valid:empty { display: none; }
    .hint { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.7; }

    /* خلاصه‌ی خطا (asp-validation-summary) */
    .validation-summary-valid { display: none; }
    .validation-summary-errors ul { margin: 0; padding-inline-start: var(--s-5); }
    .validation-summary-errors ul:has(> li:only-child) { list-style: none; padding: 0; }

    /* ورودی با آیکن یا دکمه */
    .input-group { position: relative; display: flex; align-items: stretch; }
    .input-group > .input { flex: 1; min-width: 0; }
    .input-group > .i, .input-group > .input-icon { position: absolute; inset-inline-start: var(--s-3); top: 50%; translate: 0 -50%; color: var(--text-3); pointer-events: none; font-size: 1.05rem; }
    /* فاصله‌ی ورودی با جهت فیزیکی: سایت راست‌چین است و آیکن همیشه سمت راست و دکمه سمت چپ می‌نشیند،
       حتی وقتی خود ورودی لاتین (dir="ltr"، مثل ایمیل) باشد */
    .input-group:has(> .i:first-child) > .input { padding-right: 2.6rem; }
    .input-group > .input-action { position: absolute; inset-inline-end: var(--s-1); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); color: var(--text-3); }
    .input-group > .input-action:hover { background: var(--gray-100); color: var(--text); }
    .input-group:has(> .input-action) > .input { padding-left: 3rem; }
    .input-addon { display: inline-flex; align-items: center; padding: 0 var(--s-3); border: 1.5px solid var(--border-strong); background: var(--surface-sunken); color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
    .input-group > .input-addon:first-child { border-inline-end: 0; border-start-start-radius: var(--r); border-end-start-radius: var(--r); }
    .input-group > .input-addon:last-child { border-inline-start: 0; border-start-end-radius: var(--r); border-end-end-radius: var(--r); }
    .input-group > .input-addon:first-child + .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .input-group > .input:has(+ .input-addon) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

    /* چک‌باکس، رادیو و کلید */
    .check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--text); cursor: pointer; line-height: 1.7; }
    .check input { appearance: none; flex: none; width: 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--gray-400); border-radius: 6px; background: var(--surface) center / 14px no-repeat; transition: background-color var(--t), border-color var(--t); cursor: pointer; }
    .check input[type="radio"] { border-radius: 50%; }
    .check input:hover { border-color: var(--primary); }
    .check input:focus-visible { outline: none; box-shadow: var(--ring); }
    .check input:checked { background-color: var(--primary); border-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l9 -10'/%3E%3C/svg%3E"); }
    .check input[type="radio"]:checked { background-image: radial-gradient(circle, #fff 0 4px, transparent 4.5px); }
    .check input.input-validation-error { border-color: var(--danger); }
    .check input:disabled { opacity: .5; cursor: not-allowed; }
    .check-hint { display: block; color: var(--text-3); font-size: var(--fs-xs); }

    .switch { display: inline-flex; gap: var(--s-3); align-items: center; font-size: var(--fs-sm); cursor: pointer; }
    .switch input { appearance: none; flex: none; position: relative; width: 42px; height: 24px; border-radius: var(--r-full); background: var(--gray-300); transition: background var(--t) var(--ease); cursor: pointer; }
    .switch input::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: inset-inline-start var(--t) var(--ease); }
    .switch input:checked { background: var(--primary); }
    .switch input:checked::after { inset-inline-start: 21px; }
    .switch input:focus-visible { outline: none; box-shadow: var(--ring); }

    /* انتخاب کارتی (مثل «کارجو هستم / کارفرما هستم») */
    .choice { position: relative; display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border: 1.5px solid var(--border); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; transition: border-color var(--t), background var(--t), box-shadow var(--t); }
    .choice:hover { border-color: var(--green-300); }
    .choice input { position: absolute; opacity: 0; pointer-events: none; }
    .choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
    .choice:has(input:focus-visible) { box-shadow: var(--ring); }
    .choice-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--gray-100); color: var(--text-2); font-size: 1.2rem; }
    .choice:has(input:checked) .choice-icon { background: var(--primary); color: #fff; }
    .choice-title { display: block; font-weight: 700; color: var(--text); line-height: 1.5; }
    .choice-desc { display: block; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.7; }

    /* ── کارت ─────────────────────────────────────────────────────────── */
    .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); }
    .card-body { padding: var(--s-5); }
    @media (min-width: 768px) { .card-body { padding: var(--s-6); } }
    .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
    .card-title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-md); font-weight: 700; color: var(--text); }
    .card-title .i { color: var(--primary); }
    .card-desc { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }
    .card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); background: var(--surface-2); border-end-start-radius: inherit; border-end-end-radius: inherit; }
    .card-link { display: block; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
    .card-link:hover { border-color: var(--green-200); box-shadow: var(--sh); transform: translateY(-2px); }
    .card-flat { box-shadow: none; }
    .card-muted { background: var(--surface-2); }

    /* ── نشان و برچسب ─────────────────────────────────────────────────── */
    /* plaintext: جهت متن از نخستین حرف (مهارت لاتینی مثل «.NET» درست نمایش داده می‌شود) */
    .badge, .chip, .combo-tag { unicode-bidi: plaintext; }
    .badge {
        --b-bg: var(--gray-100);
        --b-fg: var(--gray-700);
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 10px; border-radius: var(--r-full);
        background: var(--b-bg); color: var(--b-fg);
        font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; white-space: nowrap;
    }
    .badge .i { font-size: 1.1em; }
    .badge-primary, .badge-success { --b-bg: var(--green-50); --b-fg: var(--green-800); }
    .badge-warning { --b-bg: var(--amber-50); --b-fg: var(--amber-700); }
    .badge-danger { --b-bg: var(--red-50); --b-fg: var(--red-700); }
    .badge-info { --b-bg: var(--blue-50); --b-fg: var(--blue-700); }
    .badge-gold { --b-bg: var(--gold-50); --b-fg: var(--gold-700); }
    .badge-solid { --b-bg: var(--primary); --b-fg: #fff; }
    .badge-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
    .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

    .chip { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 34px; padding: 0 var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; transition: all var(--t) var(--ease); max-width: 100%; flex-wrap: wrap; }
    a.chip:hover, button.chip:hover, label.chip:hover { border-color: var(--primary); color: var(--primary); }
    .chip.is-active, .chip:has(input:checked) { background: var(--primary-soft); border-color: var(--green-300); color: var(--green-800); }
    .chip input { position: absolute; opacity: 0; pointer-events: none; }
    label.chip { position: relative; cursor: pointer; }
    .chip-remove { display: grid; place-items: center; width: 20px; height: 20px; margin-inline-end: -6px; border-radius: 50%; color: var(--text-3); }
    .chip-remove:hover { background: var(--gray-200); color: var(--text); }

    /* ── هشدار ────────────────────────────────────────────────────────── */
    .alert {
        --a-bg: var(--info-soft); --a-fg: var(--blue-700); --a-bd: var(--blue-100);
        display: flex; gap: var(--s-3); align-items: flex-start;
        padding: var(--s-3) var(--s-4); border: 1px solid var(--a-bd); border-radius: var(--r);
        background: var(--a-bg); color: var(--a-fg); font-size: var(--fs-sm); line-height: 1.8;
    }
    .alert > .i { flex: none; font-size: 1.15rem; margin-top: 3px; }
    .alert-body { flex: 1; min-width: 0; }
    .alert-body strong, .alert-title { color: inherit; font-weight: 700; display: block; }
    .alert-body p { color: inherit; }
    .alert-body ul { margin: var(--s-1) 0 0; padding-inline-start: var(--s-5); }
    .alert-success { --a-bg: var(--success-soft); --a-fg: var(--green-800); --a-bd: var(--green-100); }
    .alert-warning { --a-bg: var(--warning-soft); --a-fg: var(--amber-700); --a-bd: var(--amber-100); }
    .alert-danger { --a-bg: var(--danger-soft); --a-fg: var(--red-700); --a-bd: var(--red-100); }
    .alert-neutral { --a-bg: var(--surface-2); --a-fg: var(--text-2); --a-bd: var(--border); }
    .alert-close { margin-inline-start: auto; display: grid; place-items: center; width: 28px; height: 28px; margin-block: -2px; border-radius: var(--r-xs); color: inherit; opacity: .7; }
    .alert-close:hover { opacity: 1; background: rgba(0, 0, 0, .05); }

    /* ── اعلان شناور (pg.toast) ───────────────────────────────────────── */
    .toast-host { position: fixed; z-index: var(--z-toast); inset-block-end: var(--s-4); inset-inline: var(--s-4); display: flex; flex-direction: column; align-items: center; gap: var(--s-2); pointer-events: none; }
    @media (min-width: 640px) { .toast-host { inset-inline: auto var(--s-6); inset-block-end: var(--s-6); align-items: flex-end; } }
    .toast { pointer-events: auto; display: flex; gap: var(--s-3); align-items: flex-start; width: min(420px, 100%); padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--gray-900); color: #fff; box-shadow: var(--sh-lg); font-size: var(--fs-sm); line-height: 1.7; animation: pg-toast-in .22s var(--ease); }
    .toast > .i { flex: none; margin-top: 2px; font-size: 1.15rem; }
    .toast.is-success > .i { color: var(--green-300); }
    .toast.is-error > .i { color: #ff9b8f; }
    .toast.is-warning > .i { color: var(--gold-400); }
    .toast-text { flex: 1; }
    .toast-close { color: rgba(255, 255, 255, .7); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; }
    .toast-close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
    .toast.is-leaving { animation: pg-toast-out .18s ease-in forwards; }
    @keyframes pg-toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
    @keyframes pg-toast-out { to { opacity: 0; transform: translateY(6px); } }

    /* ── پنجره (dialog) و کشو ─────────────────────────────────────────── */
    .modal { width: min(560px, calc(100vw - 2 * var(--s-4))); margin: auto; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-lg); overflow: hidden; }
    .modal-lg { width: min(860px, calc(100vw - 2 * var(--s-4))); }
    .modal::backdrop, .drawer::backdrop { background: rgba(20, 28, 24, .48); backdrop-filter: blur(2px); }
    .modal[open] { animation: pg-modal-in .2s var(--ease); }
    .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
    .modal-title { font-size: var(--fs-md); font-weight: 700; }
    .modal-body { padding: var(--s-5); max-height: min(70vh, 640px); overflow: auto; }
    .modal-footer { display: flex; gap: var(--s-2); justify-content: flex-end; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); background: var(--surface-2); }
    @keyframes pg-modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

    .drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(380px, 88vw); height: 100dvh; background: var(--surface); box-shadow: var(--sh-lg); display: none; flex-direction: column; }
    .drawer[open] { display: flex; animation: pg-drawer-in .24s var(--ease); }
    .drawer-start { inset: 0 auto 0 0; }
    .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
    .drawer-body { flex: 1; overflow: auto; padding: var(--s-4) var(--s-5); }
    .drawer-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); display: grid; gap: var(--s-2); }
    @keyframes pg-drawer-in { from { transform: translateX(100%); } }
    .drawer-start[open] { animation-name: pg-drawer-in-start; }
    @keyframes pg-drawer-in-start { from { transform: translateX(-100%); } }

    /* ── منوی بازشو ───────────────────────────────────────────────────── */
    .dropdown { position: relative; display: inline-flex; }
    .dropdown-menu {
        position: absolute; z-index: var(--z-dropdown); top: calc(100% + 6px); inset-inline-end: 0;
        min-width: 220px; padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-lg);
        background: var(--surface); box-shadow: var(--sh-lg);
        max-width: calc(100vw - 2 * var(--s-4));
        /* بسته: display:none تا منوی پنهان در موبایل صفحه را عریض نکند (visibility:hidden هم جای اسکرول می‌گیرد) */
        display: none; opacity: 0; transform: translateY(-4px);
        transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
    }
    .dropdown-menu.is-start { inset-inline: 0 auto; }
    .dropdown.is-open > .dropdown-menu { display: block; opacity: 1; transform: none; }
    @starting-style { .dropdown.is-open > .dropdown-menu { opacity: 0; transform: translateY(-4px); } }
    .dropdown-item { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text); text-align: start; }
    .dropdown-item .i { color: var(--text-3); }
    .dropdown-item:hover, .dropdown-item:focus-visible { background: var(--gray-50); outline: none; }
    .dropdown-item:hover .i { color: var(--primary); }
    .dropdown-item.is-danger, .dropdown-item.is-danger .i { color: var(--danger); }
    .dropdown-sep { height: 1px; margin: var(--s-2) 0; background: var(--border); }
    .dropdown-label { padding: var(--s-1) var(--s-3); font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }

    /* ── زبانه ────────────────────────────────────────────────────────── */
    .tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); white-space: nowrap; transition: color var(--t); }
    .tab:hover { color: var(--text); }
    .tab[aria-selected="true"], .tab.is-active, .tab[aria-current="page"] { color: var(--primary); }
    .tab[aria-selected="true"]::after, .tab.is-active::after, .tab[aria-current="page"]::after { content: ""; position: absolute; inset-inline: var(--s-2); bottom: -1px; height: 2.5px; border-radius: 2px 2px 0 0; background: var(--primary); }
    .tab .badge { padding-inline: 7px; }
    .tabs-pill { border: 0; gap: var(--s-2); padding: 4px; background: var(--gray-100); border-radius: var(--r); width: fit-content; max-width: 100%; }
    .tabs-pill .tab { padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); }
    .tabs-pill .tab[aria-selected="true"], .tabs-pill .tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); }
    .tabs-pill .tab::after { display: none; }

    /* ── مسیر راهنما ──────────────────────────────────────────────────── */
    .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); color: var(--text-3); }
    .breadcrumbs ol { display: contents; list-style: none; padding: 0; }
    .breadcrumbs li { display: inline-flex; align-items: center; gap: var(--s-1); }
    .breadcrumbs li + li::before { content: ""; width: 14px; height: 14px; background: currentColor; opacity: .6; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6l6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
    .breadcrumbs a:hover { color: var(--primary); }
    .breadcrumbs [aria-current] { color: var(--text-2); }

    /* ── صفحه‌بندی ────────────────────────────────────────────────────── */
    .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); }
    .page-link { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 var(--s-2); border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); transition: all var(--t); }
    .page-link:hover { border-color: var(--primary); color: var(--primary); }
    .page-link[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }
    .page-link.is-disabled { opacity: .45; pointer-events: none; }
    .page-gap { display: grid; place-items: center; min-width: 28px; color: var(--text-3); }

    /* ── جدول ─────────────────────────────────────────────────────────── */
    .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
    .table { width: 100%; font-size: var(--fs-sm); }
    .table th { padding: var(--s-3) var(--s-4); text-align: start; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
    .table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
    .table tbody tr:last-child td { border-bottom: 0; }
    .table tbody tr:hover td { background: var(--gray-25); }
    .table .is-end { text-align: end; }
    .table .is-shrink { width: 1%; white-space: nowrap; }

    /* ── آواتار و لوگو ────────────────────────────────────────────────── */
    .avatar { --size: 40px; flex: none; display: inline-grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%; overflow: hidden; background: var(--green-100); color: var(--green-800); font-weight: 700; font-size: calc(var(--size) * .38); line-height: 1; }
    .avatar img { width: 100%; height: 100%; object-fit: cover; }
    .avatar-sm { --size: 32px; }
    .avatar-lg { --size: 56px; }
    .avatar-xl { --size: 88px; }
    .logo-box { --size: 56px; flex: none; display: grid; place-items: center; width: var(--size); height: var(--size); padding: 6px; border-radius: var(--r); border: 1px solid var(--border); background: #fff; color: var(--text-3); overflow: hidden; }
    .logo-box img { width: 100%; height: 100%; object-fit: contain; }
    .logo-box-sm { --size: 44px; }
    .logo-box-lg { --size: 88px; border-radius: var(--r-lg); }

    /* ── حالت خالی، اسکلت، پیشرفت ─────────────────────────────────────── */
    .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-12) var(--s-6); }
    .empty-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 1.6rem; }
    .empty h3 { font-size: var(--fs-lg); }
    .empty p { max-width: 42ch; font-size: var(--fs-sm); }

    .skeleton { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%); background-size: 200% 100%; animation: pg-shimmer 1.4s ease-in-out infinite; }
    @keyframes pg-shimmer { to { background-position: -200% 0; } }

    .progress { height: 8px; border-radius: var(--r-full); background: var(--gray-100); overflow: hidden; }
    .progress > span { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--primary); transition: width .4s var(--ease); }
    .progress-gold > span { background: var(--gold-400); }

    .spinner { display: inline-block; width: 20px; height: 20px; border: 2.5px solid var(--green-100); border-top-color: var(--primary); border-radius: 50%; animation: pg-spin .7s linear infinite; }

    /* ── مرحله‌ها (فرم چندمرحله‌ای، مثل ثبت آگهی) ────────────────────── */
    .steps { display: flex; gap: var(--s-2); counter-reset: step; list-style: none; padding: 0; }
    .step { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-3); counter-increment: step; }
    .step::before { content: ""; height: 4px; border-radius: 2px; background: var(--gray-200); }
    .step.is-done::before, .step.is-current::before { background: var(--primary); }
    .step.is-current { color: var(--text); font-weight: 700; }
    .step-label::before { content: counter(step, persian) ". "; }

    /* ── کاشی آمار ────────────────────────────────────────────────────── */
    .stat { display: flex; gap: var(--s-4); align-items: center; }
    .stat-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--r); background: var(--primary-soft); color: var(--primary); font-size: 1.3rem; }
    .stat-value { font-size: var(--fs-xl); font-weight: 800; color: var(--text); line-height: 1.3; }
    .stat-label { font-size: var(--fs-xs); color: var(--text-3); }

    /* ── راهنمای کوتاه روی نشانگر ([data-tip]) ─────────────────────────── */
    [data-tip] { position: relative; }
    [data-tip]::after {
        content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 4px; z-index: var(--z-dropdown);
        padding: 4px 10px; border-radius: var(--r-xs); background: var(--gray-900); color: #fff; font-size: var(--fs-xs); font-weight: 500; line-height: 1.6; white-space: nowrap;
        opacity: 0; pointer-events: none; transition: opacity var(--t), translate var(--t);
    }
    [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; }

    .divider { display: flex; align-items: center; gap: var(--s-3); color: var(--text-3); font-size: var(--fs-xs); }
    .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
    .kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; font-size: var(--fs-xs); background: var(--surface); }
}

/* =========================================================================
   site — اجزای مخصوص سایت عمومی و صفحه‌های حساب
   ========================================================================= */
@layer site {

    /* ── نشان برند ────────────────────────────────────────────────────── */
    .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); flex: none; }
    .brand-mark { width: 40px; height: 40px; flex: none; }
    .brand-text { display: flex; flex-direction: column; line-height: 1.2; }
    .brand-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
    .brand-tag { font-size: .6875rem; font-weight: 500; color: var(--text-3); margin-top: 2px; }
    .brand-logo { height: 40px; width: auto; }
    .brand.is-inverse { color: #fff; }
    .brand.is-inverse .brand-tag { color: rgba(255, 255, 255, .7); }

    /* ── سرصفحه ───────────────────────────────────────────────────────── */
    .site-header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--t), box-shadow var(--t); }
    .site-header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--sh-xs); }
    .site-header-inner { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }
    .site-nav { display: none; flex: 1; }
    .site-nav ul { display: flex; align-items: center; gap: var(--s-1); list-style: none; padding: 0; }
    .site-nav a, .site-nav button { display: inline-flex; align-items: center; gap: 4px; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); transition: color var(--t), background var(--t); }
    .site-nav a:hover, .site-nav button:hover { color: var(--text); background: var(--gray-50); }
    .site-nav a[aria-current="page"] { color: var(--primary); }
    .site-nav .dropdown-menu { inset-inline: 0 auto; }
    .site-actions { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
    .site-actions .hide-sm { display: none; }
    .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); color: var(--text); }
    .nav-toggle:hover { background: var(--gray-100); }
    @media (min-width: 640px) { .site-actions .hide-sm { display: inline-flex; } }
    @media (min-width: 1024px) {
        .site-nav { display: block; }
        .nav-toggle { display: none; }
    }
    .mobile-nav { display: flex; flex-direction: column; gap: 2px; }
    .mobile-nav a, .mobile-nav summary { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-sm); font-weight: 600; color: var(--text); cursor: pointer; list-style: none; }
    .mobile-nav summary::-webkit-details-marker { display: none; }
    .mobile-nav summary .i:last-child { margin-inline-start: auto; transition: transform var(--t); }
    .mobile-nav details[open] summary .i:last-child { transform: rotate(180deg); }
    .mobile-nav a:hover, .mobile-nav summary:hover { background: var(--gray-50); }
    .mobile-nav a .i, .mobile-nav summary .i:first-child { color: var(--text-3); }
    .mobile-nav .sub { padding-inline-start: var(--s-8); }
    .mobile-nav .sub a { font-weight: 500; color: var(--text-2); }
    .mobile-nav-sep { height: 1px; background: var(--border); margin: var(--s-2) var(--s-3); }

    /* ── جست‌وجوی اصلی (صفحه‌ی اول و فهرست آگهی‌ها) ───────────────────── */
    .search-bar { display: grid; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-lg); border: 1px solid var(--border); }
    .search-bar .input, .search-bar .select, .search-bar .combo-control { border: 0; box-shadow: none; min-height: 52px; background-color: var(--surface-2); }
    .search-bar .input:focus, .search-bar .select:focus { box-shadow: var(--ring); }
    @media (min-width: 768px) {
        .search-bar { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; align-items: center; }
        .search-bar .input, .search-bar .select, .search-bar .combo-control { background-color: transparent; }
        .search-bar > * + *:not(.btn) { border-inline-start: 1px solid var(--border); }
    }

    /* ── هیرو ─────────────────────────────────────────────────────────── */
    .hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 5vw, 6rem); background:
        radial-gradient(1200px 400px at 85% -10%, rgba(31, 143, 102, .14), transparent 60%),
        radial-gradient(800px 360px at 0% 110%, rgba(227, 176, 75, .12), transparent 60%),
        linear-gradient(180deg, #f7fbf9, var(--bg)); }
    .hero h1 { font-size: var(--fs-4xl); font-weight: 850; letter-spacing: -.025em; }
    .hero h1 em { font-style: normal; color: var(--primary); }
    .hero-lead { margin-top: var(--s-4); font-size: var(--fs-lg); max-width: 56ch; }
    .hero-dark { background: radial-gradient(900px 420px at 80% 0%, rgba(72, 169, 130, .28), transparent 60%), linear-gradient(160deg, var(--green-900), var(--green-950)); color: #fff; }
    .hero-dark h1, .hero-dark h2 { color: #fff; }
    .hero-dark h1 em { color: var(--green-300); }
    .hero-dark p { color: rgba(255, 255, 255, .78); }
    .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 12px 4px 6px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
    .eyebrow .badge { padding-block: 0; }

    /* ── کارت آگهی شغلی ───────────────────────────────────────────────── */
    .job-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
    .job-card:hover { border-color: var(--green-200); box-shadow: var(--sh); }
    .job-card.is-featured { border-color: var(--gold-100); background: linear-gradient(180deg, #fffdf7, var(--surface) 60%); }
    .job-card.is-featured::before { content: ""; position: absolute; inset-block: 16px; inset-inline-start: -1px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold-400); }
    .job-card-title { font-size: var(--fs-md); font-weight: 700; line-height: 1.6; color: var(--text); }
    .job-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
    .job-card-title a:hover { color: var(--primary); }
    .job-card-company { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--text-2); }
    .job-card-company .i { color: var(--info); font-size: 1rem; }
    .job-card-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--text-3); }
    .job-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
    .job-card-meta .i { font-size: 1.1em; }
    .job-card-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-3); }
    .job-card-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--border); font-size: var(--fs-xs); color: var(--text-3); }
    .job-card-salary { font-weight: 700; color: var(--green-800); font-size: var(--fs-sm); }
    .job-card-save { position: relative; z-index: 1; }
    .job-card-save[aria-pressed="true"] { color: var(--primary); }

    /* ── کارت شرکت ────────────────────────────────────────────────────── */
    .company-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-6) var(--s-5); }
    .company-card h3 { font-size: var(--fs-md); }
    .company-card .job-card-meta { justify-content: center; }

    /* ── پانویس ───────────────────────────────────────────────────────── */
    .site-footer { margin-top: var(--s-16); background: var(--green-950); color: rgba(255, 255, 255, .72); font-size: var(--fs-sm); }
    .site-footer a:hover { color: #fff; }
    .site-footer h2 { font-size: var(--fs-sm); font-weight: 700; color: #fff; margin-bottom: var(--s-3); }
    .site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
    .footer-grid { display: grid; gap: var(--s-8); padding-block: var(--s-12); grid-template-columns: 1fr; }
    @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr) 1.2fr; } }
    .footer-about p { color: rgba(255, 255, 255, .64); margin-top: var(--s-4); max-width: 36ch; line-height: 2; }
    .footer-social { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
    .footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); background: rgba(255, 255, 255, .06); color: #fff; transition: background var(--t); }
    .footer-social a:hover { background: rgba(255, 255, 255, .14); }
    .footer-trust { display: flex; gap: var(--s-3); flex-wrap: wrap; }
    .footer-trust-box { display: grid; place-items: center; width: 96px; height: 108px; border-radius: var(--r); background: #fff; color: var(--text-3); font-size: var(--fs-xs); text-align: center; padding: var(--s-2); }
    .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .08); font-size: var(--fs-xs); color: rgba(255, 255, 255, .5); }
    .footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }
    .footer-contact { margin-top: var(--s-4); }
    .footer-contact li { display: flex; align-items: center; gap: var(--s-2); }
    .footer-contact .i { color: rgba(255, 255, 255, .5); }
    .footer-trust-box img { display: block; max-width: 100%; height: auto; }

    /* ── صفحه‌های حساب (ورود، ثبت‌نام، بازیابی رمز) ───────────────────── */
    .auth { min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--surface); }
    @media (min-width: 1024px) { .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
    .auth-main { display: flex; flex-direction: column; padding: var(--s-5) var(--gutter); }
    @media (min-width: 768px) { .auth-main { padding: var(--s-8) var(--s-12); } }
    .auth-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
    .auth-back { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); color: var(--text-2); }
    .auth-back:hover { color: var(--primary); }
    .auth-box { width: 100%; max-width: 420px; margin: auto; padding-block: var(--s-10); }
    .auth-title { font-size: var(--fs-2xl); font-weight: 800; }
    .auth-lead { margin-top: var(--s-2); font-size: var(--fs-sm); line-height: 2; }
    .auth-form { margin-top: var(--s-8); }
    .auth-alt { margin-top: var(--s-6); text-align: center; font-size: var(--fs-sm); color: var(--text-2); }
    .auth-alt a { font-weight: 700; color: var(--primary); }
    .auth-foot { font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
    .auth-aside { display: none; position: relative; overflow: hidden; padding: var(--s-12); color: #fff;
        background: radial-gradient(700px 380px at 100% 0%, rgba(72, 169, 130, .35), transparent 60%),
                    radial-gradient(600px 400px at 0% 100%, rgba(227, 176, 75, .18), transparent 60%),
                    linear-gradient(155deg, var(--green-800), var(--green-950)); }
    @media (min-width: 1024px) { .auth-aside { display: flex; flex-direction: column; justify-content: center; } }
    .auth-aside::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); pointer-events: none; }
    .auth-aside-inner { position: relative; z-index: 1; max-width: 440px; margin-inline: auto; }
    .auth-aside h2 { color: #fff; font-size: var(--fs-3xl); font-weight: 800; line-height: 1.5; margin-top: var(--s-6); }
    .auth-aside h2 em { font-style: normal; color: var(--gold-400); }
    .auth-aside p { color: rgba(255, 255, 255, .75); margin-top: var(--s-3); }
    .auth-points { list-style: none; padding: 0; margin-top: var(--s-8); display: grid; gap: var(--s-4); }
    .auth-points li { display: flex; gap: var(--s-3); align-items: flex-start; color: rgba(255, 255, 255, .88); font-size: var(--fs-sm); line-height: 1.9; }
    .auth-points .i { flex: none; margin-top: 3px; padding: 5px; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: var(--gold-400); }
    .auth-aside-card { margin-top: var(--s-10); padding: var(--s-5); border-radius: var(--r-lg); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px); }
    .auth-aside-card .job-card-meta { color: rgba(255, 255, 255, .7); }

    /* صفحه‌ی پیام (تأیید ایمیل، نتیجه‌ی بازیابی) */
    .notice { text-align: center; }
    .notice-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto var(--s-5); border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 2rem; }
    .notice-icon.is-warning { background: var(--warning-soft); color: var(--warning); }
    .notice-icon.is-danger { background: var(--danger-soft); color: var(--danger); }

    /* کپچا */
    .captcha { display: flex; gap: var(--s-2); align-items: center; }
    .captcha img { height: 46px; width: auto; border-radius: var(--r); border: 1.5px solid var(--border-strong); background: #fff; }
    .hp-field { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

    /* ── پنل کاربر (‎/panel) ─────────────────────────────────────────── */
    .panel-shell { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: start; padding-block: var(--s-6) var(--s-16); }
    @media (min-width: 1024px) { .panel-shell { grid-template-columns: 240px minmax(0, 1fr); padding-block-start: var(--s-8); } }
    .panel-main { min-width: 0; }
    .panel-nav { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
    .panel-nav::-webkit-scrollbar { display: none; }
    .panel-nav-group { display: contents; }
    .panel-nav-title { display: none; }
    .panel-nav a { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); white-space: nowrap; transition: background var(--t), color var(--t); }
    .panel-nav a .i { color: var(--text-3); }
    .panel-nav a:hover { background: var(--surface); color: var(--text); }
    .panel-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--green-800); }
    .panel-nav a[aria-current="page"] .i { color: var(--primary); }
    @media (min-width: 1024px) {
        .panel-nav { position: sticky; top: calc(var(--header-h) + var(--s-4)); flex-direction: column; gap: var(--s-5); overflow: visible; margin: 0; padding: var(--s-4) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
        .panel-nav-group { display: flex; flex-direction: column; gap: 2px; }
        .panel-nav-title { display: block; padding: 0 var(--s-3) var(--s-1); font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
        .panel-nav a { white-space: normal; }
    }

    .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
    .page-head h1 { font-size: var(--fs-2xl); }
    .page-head p { margin-top: var(--s-1); font-size: var(--fs-sm); }
    .page-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--text-3); }
    .page-back:hover { color: var(--primary); }

    /* فهرست ساده‌ی ردیفی داخل کارت (آگهی‌ها، درخواست‌ها، موارد رزومه) */
    .row-list { list-style: none; padding: 0; margin: 0; }
    .row-item { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); }
    .row-list > .row-item:first-child { border-top: 0; }
    .row-item-body { flex: 1; min-width: 0; }
    .row-item-title { font-weight: 700; color: var(--text); line-height: 1.6; }
    a.row-item-title:hover { color: var(--primary); }
    .row-item-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); }
    .row-item-meta span { display: inline-flex; align-items: center; gap: 4px; }
    .row-item-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); justify-content: flex-end; }
    @media (max-width: 639.98px) { .row-item { flex-wrap: wrap; } .row-item-actions { width: 100%; justify-content: flex-start; } }

    /* متن چندپاراگرافی کاربر (JobFormat.Text) */
    .prose { color: var(--text-2); line-height: 2; }
    .prose p + p, .prose p + ul, .prose ul + p, .prose p + ol, .prose ol + p { margin-top: var(--s-3); }
    .prose ul, .prose ol { padding-inline-start: var(--s-6); display: grid; gap: var(--s-1); }
    .prose li::marker { color: var(--primary); }

    /* فهرست ویژگی‌ها (جزئیات آگهی) */
    .facts { display: grid; gap: var(--s-3) var(--s-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
    .fact { display: flex; gap: var(--s-3); align-items: flex-start; }
    .fact > .i { flex: none; margin-top: 4px; color: var(--primary); }
    .fact dt { font-size: var(--fs-xs); color: var(--text-3); }
    .fact dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }

    /* سنجه‌ی قدرت رمز */
    .strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
    .strength span { height: 4px; border-radius: 2px; background: var(--gray-200); transition: background var(--t); }
    .strength[data-level="1"] span:nth-child(-n+1) { background: var(--danger); }
    .strength[data-level="2"] span:nth-child(-n+2) { background: var(--warning); }
    .strength[data-level="3"] span:nth-child(-n+3) { background: var(--green-400); }
    .strength[data-level="4"] span { background: var(--primary); }

    /* ── سایت عمومی: صفحه‌ی اول ───────────────────────────────────────── */
    .home-hero { display: grid; gap: var(--s-8); align-items: center; }
    @media (min-width: 1024px) { .home-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
    .home-hero .search-bar { margin-top: var(--s-6); }
    .hero-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); align-items: center; font-size: var(--fs-sm); }
    .hero-dark .hero-chips .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; }
    .hero-dark .hero-chips .chip:hover { background: rgba(255, 255, 255, .16); }
    .hero-stats { display: grid; gap: var(--s-3); }
    .hero-stat { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff; }
    .hero-stat .stat-icon { background: rgba(255, 255, 255, .1); color: var(--gold-400); }
    .hero-stat strong { display: block; font-size: var(--fs-2xl); font-weight: 850; line-height: 1.2; }
    .hero-stat span { font-size: var(--fs-sm); color: rgba(255, 255, 255, .72); }

    .cat-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
    .cat-tile { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
    .cat-tile:hover { border-color: var(--green-300); box-shadow: var(--sh); transform: translateY(-1px); }
    .cat-tile .stat-icon { width: 44px; height: 44px; font-size: 1.2rem; }
    .cat-tile strong { display: block; font-size: var(--fs-sm); color: var(--text); line-height: 1.6; }
    .cat-tile span { font-size: var(--fs-xs); color: var(--text-3); }

    .audience { display: grid; gap: var(--s-5); }
    @media (min-width: 1024px) { .audience { grid-template-columns: 1fr 1fr; } }
    .audience-card { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-8); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); }
    .audience-card.is-employer { background: linear-gradient(160deg, var(--green-900), var(--green-950)); color: rgba(255, 255, 255, .8); border-color: transparent; }
    .audience-card.is-employer h2, .audience-card.is-employer h3 { color: #fff; }
    .audience-card h2 { font-size: var(--fs-xl); }
    .audience-steps { list-style: none; padding: 0; display: grid; gap: var(--s-4); counter-reset: aud; }
    .audience-steps li { display: grid; grid-template-columns: 36px 1fr; gap: var(--s-3); counter-increment: aud; }
    .audience-steps li::before { content: counter(aud, persian); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
    .audience-card.is-employer .audience-steps li::before { background: rgba(255, 255, 255, .1); color: #fff; }
    .audience-steps h3 { font-size: var(--fs-md); }
    .audience-steps p { font-size: var(--fs-sm); margin-top: 2px; }
    .audience-card .cluster { margin-top: auto; }

    .feature { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
    .feature h3 { font-size: var(--fs-md); }
    .feature p { font-size: var(--fs-sm); line-height: 2; }

    .place-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
    .place-list .chip span { color: var(--text-3); }

    .cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-8); border-radius: var(--r-xl); background: radial-gradient(600px 240px at 0% 0%, rgba(72, 169, 130, .25), transparent 70%), var(--green-900); color: rgba(255, 255, 255, .8); }
    .cta-band h2 { color: #fff; font-size: var(--fs-xl); }

    .faq-list { display: grid; gap: var(--s-2); }
    .faq-list details { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
    .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); font-weight: 700; cursor: pointer; list-style: none; }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary .i { flex: none; color: var(--text-3); transition: transform var(--t); }
    .faq-list details[open] summary .i { transform: rotate(180deg); }
    .faq-list .faq-answer { padding: 0 var(--s-5) var(--s-5); color: var(--text-2); line-height: 2; }

    /* ── کارت مطلب (مجله) ─────────────────────────────────────────────── */
    .post-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: box-shadow var(--t), transform var(--t); }
    .post-card:hover { box-shadow: var(--sh); transform: translateY(-2px); }
    .post-card-media { aspect-ratio: 16 / 10; background: var(--green-50); display: grid; place-items: center; color: var(--green-300); font-size: 2.5rem; }
    .post-card-media img { width: 100%; height: 100%; object-fit: cover; }
    .post-card-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; }
    .post-card-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; font-size: var(--fs-xs); color: var(--text-3); }
    .post-card h3 { font-size: var(--fs-md); line-height: 1.8; }
    .post-card h3 a::after { content: ""; position: absolute; inset: 0; }
    .post-card p { font-size: var(--fs-sm); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .post-card.is-featured { display: grid; }
    @media (min-width: 1024px) { .post-card.is-featured { grid-template-columns: 1.2fr 1fr; grid-column: 1 / -1; } .post-card.is-featured .post-card-media { aspect-ratio: auto; min-height: 100%; } .post-card.is-featured h3 { font-size: var(--fs-xl); } }

    /* ── متن غنی (مطلب مجله و صفحه‌های محتوایی؛ HTML پاک‌سازی‌شده‌ی ویرایشگر) ── */
    .prose-rich { color: var(--text-2); line-height: 2.1; font-size: var(--fs-md); overflow-wrap: anywhere; }
    .prose-rich > * + * { margin-top: var(--s-4); }
    .prose-rich h2 { font-size: var(--fs-xl); color: var(--text); margin-top: var(--s-10); scroll-margin-top: 90px; }
    .prose-rich h3 { font-size: var(--fs-lg); color: var(--text); margin-top: var(--s-8); }
    .prose-rich h4 { font-size: var(--fs-md); color: var(--text); margin-top: var(--s-6); }
    .prose-rich a { color: var(--primary); font-weight: 500; text-decoration: none; }
    .prose-rich a:hover { color: var(--primary-hover); }
    .prose-rich ul, .prose-rich ol { padding-inline-start: var(--s-6); display: grid; gap: var(--s-2); }
    .prose-rich li::marker { color: var(--primary); }
    .prose-rich img, .prose-rich video, .prose-rich iframe { max-width: 100%; height: auto; border-radius: var(--r); }
    .prose-rich figure figcaption { font-size: var(--fs-xs); color: var(--text-3); text-align: center; margin-top: var(--s-2); }
    .prose-rich blockquote { padding: var(--s-4) var(--s-5); border-inline-start: 4px solid var(--primary); background: var(--green-50); border-radius: var(--r-sm); color: var(--text); }
    .prose-rich pre, .prose-rich code { font-family: ui-monospace, Consolas, monospace; direction: ltr; text-align: left; }
    .prose-rich pre { padding: var(--s-4); border-radius: var(--r); background: var(--gray-900, #111827); color: #f3f4f6; overflow-x: auto; font-size: var(--fs-sm); }
    .prose-rich :not(pre) > code { padding: 1px 6px; border-radius: 4px; background: var(--gray-100); font-size: .9em; }
    .prose-rich table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; }
    .prose-rich th, .prose-rich td { border: 1px solid var(--border); padding: var(--s-2) var(--s-3); text-align: start; }
    .prose-rich th { background: var(--surface-2); color: var(--text); }
    .prose-rich hr { border: 0; border-top: 1px solid var(--border); }

    .toc { font-size: var(--fs-sm); }
    .toc ol { list-style: none; padding: 0; display: grid; gap: var(--s-1); counter-reset: toc; }
    .toc a { display: block; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); color: var(--text-2); }
    .toc a:hover { background: var(--gray-50); color: var(--primary); }

    .page-hero { padding-block: var(--s-10) var(--s-8); background: linear-gradient(180deg, var(--green-50), transparent); }
    .page-hero h1 { font-size: var(--fs-3xl); }
    .page-hero p { margin-top: var(--s-2); max-width: 64ch; font-size: var(--fs-lg); }
}

/* =========================================================================
   utilities — کم و هدفمند؛ برای چیدمان‌های یک‌باره
   ========================================================================= */
@layer utilities {
    .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

    .flex { display: flex; }
    .inline-flex { display: inline-flex; }
    .grid-auto { display: grid; }
    .block { display: block; }
    .hidden { display: none; }
    .flex-col { flex-direction: column; }
    .flex-wrap { flex-wrap: wrap; }
    .flex-1 { flex: 1; min-width: 0; }
    .shrink-0 { flex-shrink: 0; }
    .items-center { align-items: center; }
    .items-start { align-items: flex-start; }
    .justify-between { justify-content: space-between; }
    .justify-center { justify-content: center; }
    .justify-end { justify-content: flex-end; }
    .gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); }

    .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); } .mt-12 { margin-top: var(--s-12); }
    .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
    .ms-auto { margin-inline-start: auto; } .me-auto { margin-inline-end: auto; } .mx-auto { margin-inline: auto; }
    .p-0 { padding: 0; }

    .w-full { width: 100%; }
    .max-w-prose { max-width: 65ch; }

    .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-md { font-size: var(--fs-md); } .text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); }
    .text-center { text-align: center; } .text-start { text-align: start; } .text-end { text-align: end; }
    .text-muted { color: var(--text-3); } .text-soft { color: var(--text-2); } .text-body { color: var(--text); }
    .text-primary { color: var(--primary); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .text-gold { color: var(--gold-500); }
    .fw-normal { font-weight: 400; } .fw-medium { font-weight: 550; } .fw-bold { font-weight: 700; } .fw-black { font-weight: 850; }
    .nums { font-variant-numeric: tabular-nums; }
    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .nowrap { white-space: nowrap; }

    .rounded { border-radius: var(--r); } .rounded-lg { border-radius: var(--r-lg); } .rounded-full { border-radius: var(--r-full); }
    .shadow { box-shadow: var(--sh); } .shadow-lg { box-shadow: var(--sh-lg); }
    .bg-surface { background: var(--surface); } .bg-soft { background: var(--primary-soft); } .bg-muted { background: var(--surface-2); }
    .border { border: 1px solid var(--border); }

    @media (max-width: 639.98px) { .hide-mobile { display: none !important; } }
    @media (min-width: 640px) { .show-mobile { display: none !important; } }
    @media (max-width: 1023.98px) { .hide-tablet { display: none !important; } }
    @media (min-width: 1024px) { .show-tablet { display: none !important; } }
}

/* چاپ (فاکتور و هر صفحه‌ی پنل): فقط محتوای اصلی، بدون سرصفحه، منو، پاورقی و دکمه‌ها */
@layer utilities {
    @media print {
        .site-header, .site-footer, .panel-nav, .page-back, .page-head-actions, .toast-stack, .skip-link, [data-print] { display: none !important; }
        body { background: #fff; }
        .panel-shell { display: block; }
        .card { box-shadow: none; border-color: #999; }
    }
}