/* ═══════════════════════════════════════════════════════════════════════════
   skin.css — پوستهٔ استاتیک آی‌سون (نسخهٔ آینهٔ سایت داینامیک)
   ---------------------------------------------------------------------------
   - CSS خالص و دست‌نویس — بدون فریمورک/پری‌پروسسور (pretty-print، تودرتویی ۴ اسپیس)
   - سند RTL است؛ ویژگی‌های منطقی (margin-inline-start و…) در همه‌جا رعایت شده.
   - تم: روشن/تاریک روی متغیرهای CSS با html[data-theme="dark"].
   - پالت: فیروزه‌ای teal-600 (#0d9488) به‌عنوان رنگ اصلی + emerald/amber/rose/cyan/violet/zinc/orange
     برای بج‌ها. هیچ رنگ آبی/نیلی (blue/indigo) استفاده نشده است.
   - نشانه‌گذاری دقیق کامپوننت‌ها: scripts/skin/lib.mjs (قرارداد: scripts/skin/CONTRACT.md)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── فونت فارسی Vazirmatn ─────────────────────────── */

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ─────────────────────────── متغیرهای تم — حالت روشن ───────────────────────────
   مقادیر عیناً از src/app/globals.css (تم پزشکی teal) کپی شده‌اند. */

:root {
    /* رنگ‌های پایه */
    --bg: oklch(0.99 0.005 180);
    --fg: oklch(0.22 0.03 200);
    --card: oklch(1 0 0);
    --card-fg: oklch(0.22 0.03 200);
    --popover: oklch(1 0 0);
    --popover-fg: oklch(0.22 0.03 200);
    /* رنگ اصلی: teal-600 */
    --primary: oklch(0.55 0.11 182);
    --primary-fg: oklch(0.985 0.005 180);
    --primary-hover: oklch(0.5 0.11 182);
    --primary-soft: oklch(0.55 0.11 182 / 0.08);
    /* ثانویه/خنثی */
    --secondary: oklch(0.95 0.02 182);
    --secondary-fg: oklch(0.35 0.06 182);
    --secondary-hover: oklch(0.9 0.03 182);
    --muted: oklch(0.96 0.008 180);
    --muted-fg: oklch(0.5 0.02 190);
    --accent: oklch(0.93 0.035 168);
    --accent-fg: oklch(0.32 0.07 168);
    --subtle: oklch(0.965 0.008 180);
    --row-hover: oklch(0.96 0.008 180 / 0.7);
    /* خطر */
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-hover: oklch(0.52 0.22 27);
    /* خط/ورودی/حلقهٔ فوکوس */
    --border: oklch(0.91 0.015 182);
    --input: oklch(0.91 0.015 182);
    --ring: oklch(0.55 0.11 182);
    --ring-soft: oklch(0.55 0.11 182 / 0.18);
    /* سطوح ویژه */
    --header-bg: rgb(255 255 255 / 0.7);
    --scrollbar: oklch(0.65 0.08 182 / 0.5);
    --prose-strong: oklch(0.4 0.08 182);
    /* سایه‌ها */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 14px rgb(0 0 0 / 0.08);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.14);
    /* شعاع‌ها (سبک shadcn/ui نیویورک) */
    --radius: 0.75rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    /* فونت‌ها */
    --font-sans: "Vazirmatn", ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    /* پالت تُن‌های بج/کارت‌آمار (متن + پس‌زمینهٔ ملایم) */
    --tone-teal: #115e59;
    --tone-teal-bg: #ccfbf1;
    --tone-emerald: #065f46;
    --tone-emerald-bg: #d1fae5;
    --tone-amber: #92400e;
    --tone-amber-bg: #fef3c7;
    --tone-rose: #9f1239;
    --tone-rose-bg: #ffe4e6;
    --tone-cyan: #155e75;
    --tone-cyan-bg: #cffafe;
    --tone-violet: #5b21b6;
    --tone-violet-bg: #ede9fe;
    --tone-zinc: #3f3f46;
    --tone-zinc-bg: #f4f4f5;
    --tone-orange: #9a3412;
    --tone-orange-bg: #ffedd5;
    color-scheme: light;
}

/* ─────────────────────────── متغیرهای تم — حالت تاریک ─────────────────────────── */

html[data-theme="dark"] {
    --bg: oklch(0.19 0.02 195);
    --fg: oklch(0.95 0.01 180);
    --card: oklch(0.23 0.025 195);
    --card-fg: oklch(0.95 0.01 180);
    --popover: oklch(0.23 0.025 195);
    --popover-fg: oklch(0.95 0.01 180);
    /* رنگ اصلی در تاریک: teal-500 */
    --primary: oklch(0.68 0.11 182);
    --primary-fg: oklch(0.16 0.03 195);
    --primary-hover: oklch(0.72 0.11 182);
    --primary-soft: oklch(0.68 0.11 182 / 0.14);
    --secondary: oklch(0.28 0.03 190);
    --secondary-fg: oklch(0.9 0.02 180);
    --secondary-hover: oklch(0.33 0.03 190);
    --muted: oklch(0.28 0.02 190);
    --muted-fg: oklch(0.65 0.02 185);
    --accent: oklch(0.3 0.04 178);
    --accent-fg: oklch(0.9 0.03 178);
    --subtle: oklch(0.22 0.02 192);
    --row-hover: rgb(255 255 255 / 0.04);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-hover: oklch(0.64 0.19 22);
    --border: rgb(255 255 255 / 0.12);
    --input: rgb(255 255 255 / 0.16);
    --ring: oklch(0.68 0.11 182);
    --ring-soft: oklch(0.68 0.11 182 / 0.22);
    --header-bg: rgb(20 27 32 / 0.7);
    --scrollbar: oklch(0.55 0.06 182 / 0.45);
    --prose-strong: oklch(0.75 0.09 182);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
    --shadow-md: 0 4px 14px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
    /* تُن‌ها در تاریک: پس‌زمینهٔ شفاف تیره + متن روشن */
    --tone-teal: #5eead4;
    --tone-teal-bg: rgb(20 184 166 / 0.16);
    --tone-emerald: #6ee7b7;
    --tone-emerald-bg: rgb(16 185 129 / 0.16);
    --tone-amber: #fcd34d;
    --tone-amber-bg: rgb(245 158 11 / 0.16);
    --tone-rose: #fda4af;
    --tone-rose-bg: rgb(244 63 94 / 0.16);
    --tone-cyan: #67e8f9;
    --tone-cyan-bg: rgb(6 182 212 / 0.16);
    --tone-violet: #c4b5fd;
    --tone-violet-bg: rgb(139 92 246 / 0.18);
    --tone-zinc: #d4d4d8;
    --tone-zinc-bg: rgb(113 113 122 / 0.22);
    --tone-orange: #fdba74;
    --tone-orange-bg: rgb(249 115 22 / 0.16);
    color-scheme: dark;
}

/* ─────────────────────────── پایه و ریست ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { direction: rtl; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    /* پایهٔ Tailwind داینامیک: html 16px + line-height 1.5 */
    font-size: 1rem;
    line-height: 1.5;
    font-feature-settings: "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { line-height: 1.6; font-weight: 700; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--primary); width: 1rem; height: 1rem; flex-shrink: 0; }
table { border-collapse: collapse; border-spacing: 0; text-align: start; }
::selection { background: oklch(0.55 0.11 182 / 0.25); }
[hidden] { display: none !important; }

/* ─────────────────────────── ابزارهای عمومی ─────────────────────────── */

.container { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
.hidden { display: none !important; }
.grow { flex: 1 1 auto; }
.muted { color: var(--muted-fg); }
.mono, [dir="ltr"] { direction: ltr; unicode-bidi: embed; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: start; }
.text-end { text-align: end; }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ─────────────────────────── آیکون‌ها (svg.ic) ─────────────────────────── */

svg.ic { width: 16px; height: 16px; flex-shrink: 0; }
.ic-primary { color: var(--primary); }
.send-flip { transform: scaleX(-1); }

/* اندازه‌های بافتاری آیکون از والد تعیین می‌شود */
.icon-btn .ic { width: 18px; height: 18px; }
.stat-icon .ic { width: 22px; height: 22px; }
.empty-icon .ic { width: 26px; height: 26px; }
.ai-fab .ic { width: 26px; height: 26px; }
.ai-bot-tile .ic, .ai-card-tile .ic, .cta-icon .ic { width: 20px; height: 20px; }
.icon-tile .ic, .info-tile .ic, .doc-tile .ic, .notif-tile .ic { width: 18px; height: 18px; }
.product-thumb .ic { width: 24px; height: 24px; }
.card-meta .ic, .article-meta .ic, .patient-meta .ic, .notif-meta .ic { width: 14px; height: 14px; }
.star-btn .ic { width: 20px; height: 20px; }

/* ─────────────────────────── فوکوس و اسکرول‌بار ─────────────────────────── */

a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
/* اسکرول‌بار باریک‌تر برای نواحی پاپ‌آپ/گفتگو */
.dropdown-menu-scroll::-webkit-scrollbar, .ai-messages::-webkit-scrollbar, .jalali-pop::-webkit-scrollbar { width: 5px; }
.dropdown-menu-scroll::-webkit-scrollbar-thumb, .ai-messages::-webkit-scrollbar-thumb, .jalali-pop::-webkit-scrollbar-thumb { background: var(--primary); opacity: 0.6; }

/* ─────────────────────────── انیمیشن‌ها ─────────────────────────── */

@keyframes fade-in {
    from { opacity: 0; }
}
@keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
}
@keyframes drop-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
}
@keyframes scale-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
}
@keyframes modal-out {
    to { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateY(10px); }
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
}
@keyframes ai-pop-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
}
@keyframes ai-typing-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-4px); opacity: 1; }
}
@keyframes fab-ping {
    0% { transform: scale(1); opacity: 0.6; }
    80%, 100% { transform: scale(2.1); opacity: 0; }
}
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.9; }
}

/* ─────────────────────────── دکمه‌ها ─────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Button داینامیک: text-sm (14px/20px) + font-medium (500) + rounded-md */
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
/* اندازه‌ها — دقیقاً shadcn: default h-9=36 · sm h-8=32 · lg h-10=40 */
.btn-sm { height: 2rem; padding-inline: 0.75rem; font-size: 0.875rem; border-radius: 0.375rem; }
.btn-sm .ic { width: 14px; height: 14px; }
.btn-md { height: 2.25rem; padding-inline: 1rem; }
.btn-md .ic { width: 16px; height: 16px; }
.btn-lg { height: 2.5rem; padding-inline: 1.5rem; font-size: 0.875rem; border-radius: 0.375rem; }
.btn-lg .ic { width: 16px; height: 16px; }
/* داینامیک: has-[>svg] پدینگ افقی دکمه را کم می‌کند (lg: px-4 = 16px) */
.btn-md:has(> .ic) { padding-inline: 0.75rem; }
.btn-lg:has(> .ic) { padding-inline: 1rem; }
/* واریانت‌ها */
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline { background: var(--card); color: var(--fg); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-outline:hover { background: var(--muted); }
.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { background: var(--muted); }
.btn-secondary { background: var(--secondary); color: var(--secondary-fg); }
.btn-secondary:hover { background: var(--secondary-hover); }
.btn-destructive { background: var(--destructive); color: #fff; box-shadow: var(--shadow-sm); }
.btn-destructive:hover { background: var(--destructive-hover); }
a.btn { text-decoration: none; }

/* آیکون‌دکمهٔ جدول و ابزار */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    color: var(--muted-fg);
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: var(--muted); color: var(--fg); }
.icon-btn.danger { color: var(--tone-rose); }
.icon-btn.danger:hover { background: var(--tone-rose-bg); color: var(--tone-rose); }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ─────────────────────────── سربرگ صفحهٔ پنل ─────────────────────────── */

.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.page-title { font-size: 1.25rem; font-weight: 800; line-height: 1.6; }
.page-desc, .panel-desc { margin-block-start: 0.25rem; font-size: 0.8125rem; color: var(--muted-fg); }
.page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ─────────────────────────── کارت آمار ─────────────────────────── */

.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.stat-icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-block-end: 0.25rem; }
.stat-icon.tone-teal { background: var(--tone-teal-bg); color: var(--tone-teal); }
.stat-icon.tone-emerald { background: var(--tone-emerald-bg); color: var(--tone-emerald); }
.stat-icon.tone-amber { background: var(--tone-amber-bg); color: var(--tone-amber); }
.stat-icon.tone-rose { background: var(--tone-rose-bg); color: var(--tone-rose); }
.stat-icon.tone-cyan { background: var(--tone-cyan-bg); color: var(--tone-cyan); }
.stat-icon.tone-zinc { background: var(--tone-zinc-bg); color: var(--tone-zinc); }
.stat-label { font-size: 0.75rem; color: var(--muted-fg); }
.stat-value { font-size: 1.375rem; font-weight: 800; line-height: 1.5; font-variant-numeric: tabular-nums; }
.stat-hint { font-size: 0.6875rem; color: var(--muted-fg); }

/* ─────────────────────────── فرم‌ها: ورودی/برچسب/راهنما ─────────────────────────── */

.label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; margin-block-end: 0.5rem; }
.req { color: var(--destructive); font-weight: 700; }
.hint { margin-block-start: 0.375rem; font-size: 0.75rem; color: var(--muted-fg); }
.input {
    width: 100%;
    height: 2.375rem;
    padding-inline: 0.75rem;
    background: var(--card);
    border: 1px solid var(--input);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--fg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--muted-fg); }
.input:focus, .textarea:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-soft); }
.input:disabled, .textarea:disabled { opacity: 0.6; cursor: not-allowed; background: var(--muted); }
.textarea {
    width: 100%;
    min-height: 5.625rem;
    padding: 0.625rem 0.75rem;
    background: var(--card);
    border: 1px solid var(--input);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--fg);
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* جعبهٔ جستجو — آیکون در انتهای منطقی (چپ در RTL) */
.search-box { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.search-box .input { padding-inline-end: 2.5rem; }
.search-box .search-icon { position: absolute; inset-inline-end: 0.75rem; color: var(--muted-fg); pointer-events: none; }

/* ─────────────────────────── دراپ‌داون انتخاب (Select) ─────────────────────────── */

.select { position: relative; display: block; }
.select-btn {
    width: 100%;
    height: 2.375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0.75rem;
    background: var(--card);
    border: 1px solid var(--input);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    text-align: start;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select-btn:hover { border-color: var(--primary); }
.select-btn:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-soft); }
.select-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-btn > .ic { color: var(--muted-fg); transition: transform 0.2s ease; }
.select.open .select-btn { border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-soft); }
.select.open .select-btn > .ic { transform: rotate(180deg); }
.select-menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 55;
    min-width: 100%;
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.25rem;
    background: var(--popover);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    box-shadow: var(--shadow-lg);
    display: none;
}
.select.open .select-menu { display: block; animation: drop-in 0.15s ease-out; }
.select-option {
    display: block;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    text-align: start;
    color: var(--fg);
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.select-option:hover { background: var(--muted); }
.select-option.selected { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

/* ─────────────────────────── سوییچ ─────────────────────────── */

.switch {
    position: relative;
    width: 2.625rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.switch-dot {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
    transition: transform 0.2s ease;
}
.switch:hover { border-color: var(--primary); }
.switch.on { background: var(--primary); border-color: var(--primary); }
/* در RTL نقطه از سمت راست به چپ می‌رود */
.switch.on .switch-dot { transform: translateX(-1.125rem); }

/* ─────────────────────────── فیلد تاریخ شمسی ─────────────────────────── */

.jalali-field { position: relative; display: block; }
.jalali-field .input { padding-inline-end: 3.875rem; }
.jalali-icon { position: absolute; inset-inline-end: 0.75rem; top: 50%; transform: translateY(-50%); display: flex; color: var(--muted-fg); pointer-events: none; }
.jalali-clear {
    position: absolute;
    inset-inline-end: 2.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-fg);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.jalali-clear:hover { background: var(--tone-rose-bg); color: var(--tone-rose); }
.jalali-clear .ic { width: 13px; height: 13px; }
/* پاپ‌آپ تقویم شمسی — محتوا و جای‌گذاری دقیق (top/left فیزیکی) توسط skin.js */
.jalali-pop {
    position: fixed;
    z-index: 55;
    width: 17.5rem;
    padding: 0.625rem;
    background: var(--popover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.jalali-pop-header { display: flex; align-items: center; gap: 0.25rem; margin-block-end: 0.5rem; }
.jalali-pop-title { flex: 1 1 auto; text-align: center; font-size: 0.8125rem; font-weight: 700; }
.jalali-nav, .jalali-today { padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.7188rem; cursor: pointer; }
.jalali-nav { color: var(--muted-fg); }
.jalali-nav:hover { background: var(--muted); color: var(--fg); }
.jalali-nav .ic { width: 14px; height: 14px; display: block; }
.jalali-today { color: var(--primary); font-weight: 600; }
.jalali-today:hover { background: var(--muted); }
.jalali-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.6875rem; color: var(--muted-fg); margin-block-end: 0.25rem; }
.jalali-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jalali-day { padding: 0.375rem 0; border-radius: 0.375rem; font-size: 0.75rem; text-align: center; transition: background-color 0.12s ease, color 0.12s ease; }
.jalali-day:hover { background: var(--muted); }
.jalali-day.muted { opacity: 0.35; }
.jalali-day.today { background: var(--accent); color: var(--accent-fg); font-weight: 700; }
.jalali-day.selected { background: var(--primary); color: var(--primary-fg); font-weight: 700; }

/* ─────────────────────────── مودال (dialog بومی) ─────────────────────────── */

dialog.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 1rem;
    background: transparent;
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
}
dialog.modal[open] { display: flex; }
dialog.modal::backdrop { background: rgb(15 23 42 / 0.5); backdrop-filter: blur(4px); }
.modal-card {
    width: min(32rem, 100%);
    max-height: calc(100vh - 2rem);
    background: var(--card);
    color: var(--card-fg);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: scale-in 0.15s ease-out;
}
.modal-sm { width: min(28rem, 100%); }
.modal-md { width: min(32rem, 100%); }
.modal-lg { width: min(40rem, 100%); }
.modal-xl { width: min(48rem, 100%); }
.modal-2xl { width: min(56rem, 100%); }
/* بستن ملایم: کلاس .closing برای ۱۲۰ms توسط skin.js نگه داشته می‌شود */
dialog.modal.closing .modal-card { animation: modal-out 0.12s ease-in forwards; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 700; }
.modal-title .ic { color: var(--primary); }
.modal-desc { padding: 0.75rem 1.25rem 0; font-size: 0.8125rem; color: var(--muted-fg); flex-shrink: 0; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--border); flex-shrink: 0; }

/* ─────────────────────────── جدول و صفحه‌بندی ─────────────────────────── */

.table-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: auto; }
.table-scroll { max-height: 70vh; }
table.table { width: 100%; font-size: 0.875rem; }
table.table th { padding: 0.625rem 0.875rem; font-size: 0.75rem; font-weight: 600; color: var(--muted-fg); background: var(--subtle); text-align: start; white-space: nowrap; }
table.table td { padding: 0.75rem 0.875rem; border-block-start: 1px solid var(--border); vertical-align: middle; }
table.table tbody tr { transition: background-color 0.15s ease; }
table.table tbody tr:hover { background: var(--row-hover); }
.tr-click { cursor: pointer; }
/* صفحه‌بندی */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem; }
.pagination-info, .pagination-status { font-size: 0.75rem; color: var(--muted-fg); }
.pagination-btns { display: flex; align-items: center; gap: 0.5rem; }

/* ─────────────────────────── حالت خالی ─────────────────────────── */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    padding: 2.5rem 1.25rem;
    background: var(--card);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
}
.empty-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: 0.25rem;
}
.empty-title { font-size: 0.875rem; font-weight: 700; }
.empty-desc { font-size: 0.8125rem; color: var(--muted-fg); max-width: 32rem; }
.empty-action { margin-block-start: 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }

/* ─────────────────────────── تب‌ها ─────────────────────────── */

.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.tabs-list { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 0.25rem; background: var(--muted); border-radius: var(--radius); }
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-fg);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tab-btn:hover { color: var(--fg); }
.tab-btn.active { background: var(--card); color: var(--fg); font-weight: 600; box-shadow: var(--shadow-sm); }
.tab-badge { padding: 0 0.4375rem; border-radius: 999px; background: var(--tone-teal-bg); color: var(--tone-teal); font-size: 0.6563rem; font-weight: 700; line-height: 1.6; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-in 0.2s ease-out; }

/* ─────────────────────────── آکاردئون ─────────────────────────── */

.accordion-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.accordion-item + .accordion-item { margin-block-start: 0.625rem; }
.accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    text-align: start;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.15s ease;
}
.accordion-trigger:hover { background: var(--row-hover); }
.accordion-num {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}
.accordion-q { flex: 1 1 auto; min-width: 0; }
.accordion-chevron { color: var(--muted-fg); transition: transform 0.25s ease; }
.accordion-item.open .accordion-chevron { transform: rotate(180deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.accordion-item.open > .accordion-content { max-height: 1280px; }
.accordion-content > .rich-content { padding: 0 1rem 1rem; }

/* ─────────────────────────── بج‌ها و چیپ‌ها ─────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    /* Badge داینامیک: px-2.5 py-0.5 text-xs (12px/16px) + rounded-md — ارتفاع ≈ 22px */
    padding: 0.125rem 0.625rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
}
.badge-teal { background: var(--tone-teal-bg); color: var(--tone-teal); }
.badge-emerald { background: var(--tone-emerald-bg); color: var(--tone-emerald); }
.badge-amber { background: var(--tone-amber-bg); color: var(--tone-amber); }
.badge-rose { background: var(--tone-rose-bg); color: var(--tone-rose); }
.badge-cyan { background: var(--tone-cyan-bg); color: var(--tone-cyan); }
.badge-violet { background: var(--tone-violet-bg); color: var(--tone-violet); }
.badge-zinc { background: var(--tone-zinc-bg); color: var(--tone-zinc); }
.badge-outline { background: transparent; color: var(--fg); border: 1px solid var(--border); }
.badge-orange { background: var(--tone-orange-bg); color: var(--tone-orange); }
.badge-assign {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 0.375rem;
    background: var(--tone-teal-bg);
    color: var(--tone-teal);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}
/* چیپ عمومی — معادل Badge secondary داینامیک (rounded-md · px-3 py-1 · text-xs) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    background: var(--secondary);
    color: var(--secondary-fg);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}
.chip .ic { width: 0.75rem; height: 0.75rem; color: var(--primary); }
.chip-xs { padding: 0 0.5rem; font-size: 0.625rem; }
.pill {
    display: inline-flex;
    align-items: center;
    /* هیروی داینامیک: px-3.5 py-1.5 text-xs + gap-1.5 → ارتفاع 30px */
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    color: rgb(23 23 23 / 0.8);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] .pill { color: rgb(250 250 250 / 0.8); }
.pill .ic { width: 0.875rem; height: 0.875rem; color: var(--primary); }
.count-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.75rem;
    border-radius: 999px;
    background: var(--muted);
    border: 1px solid var(--border);
    color: var(--muted-fg);
    font-size: 0.7188rem;
    font-weight: 500;
}
.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.625rem;
    border-radius: 0.5rem;
    background: var(--muted);
    color: var(--muted-fg);
    font-size: 0.7188rem;
    font-weight: 500;
}
.faq-count {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.875rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
}
.key-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    direction: ltr;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-fg);
}
.action-code {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    direction: ltr;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-fg);
}

/* ─────────────────────────── کارت ─────────────────────────── */

/* مقادیر عیناً از shadcn/ui: Card = py-6 gap-6؛ CardHeader/Content = px-6 */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 1.5rem; padding-block: 1.5rem; }
/* rounded-2xl داینامیک برای کارت‌های سایت */
.card.r2 { border-radius: 1rem; }
/* CardTitle text-lg (18/28) + font-semibold + آیکون h-5 (20) — flex عین داینامیک */
.card-title.ct-lg { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.card-title.ct-lg .ic { width: 1.25rem; height: 1.25rem; }
/* CardHeader عین shadcn: grid auto-rows-min grid-rows-[auto_auto] gap-1.5 px-6
   (ردیف دوم خالی حتی با یک فرزند → 6px فانتوم مثل داینامیک) */
.card-header { display: grid; grid-auto-rows: min-content; grid-template-rows: auto auto; align-items: start; gap: 0.375rem; padding-inline: 1.5rem; }
.card > .card-header:first-child, .card > .card-body:first-child, .card > .card-footer:first-child { padding-block-start: 0; }
.card > :last-child { margin-block-end: 0; }
.card-title { font-size: 1rem; font-weight: 600; line-height: 1.75rem; color: var(--fg); }
.card-desc { font-size: 0.875rem; color: var(--muted-fg); line-height: 1.75rem; }
.card-body { padding-inline: 1.5rem; }
.card-footer { padding: 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.card-footer.border-top { border-top: 1px solid var(--border); padding-block-start: 1.5rem; margin-block-start: 1.5rem; }

/* ─────────────────────────── قبل/بعد از درمان ─────────────────────────── */

.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (min-width: 640px) { .before-after { gap: 0.75rem; } }
/* کارت فشردهٔ گزارش (صفحهٔ اصلی): تصاویر با mt-auto به پایین می‌چسبند */
.case-compact > .before-after { margin-block-start: auto; }
.before-after.ratio-square .ba-fig { aspect-ratio: 1 / 1; }
.before-after.ratio-4-3 .ba-fig { aspect-ratio: 4 / 3; }
.ba-fig { position: relative; border-radius: 0.75rem; border: 1px solid var(--border); overflow: hidden; background: var(--muted); margin: 0; }
.ba-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* برچسب‌ها — عین داینامیک: bottom-2 start-2 + px-2.5 py-1 text-[11px]→sm:text-xs + توپر rose/emerald-600 */
.ba-caption { position: absolute; bottom: 0.5rem; inset-inline-start: 0.5rem; padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.6875rem; line-height: 1rem; font-weight: 700; box-shadow: var(--shadow-sm); z-index: 1; }
@media (min-width: 640px) { .ba-caption { font-size: 0.75rem; } }
.ba-caption.before { background: rgb(225 29 72 / 0.95); color: #fff; }
.ba-caption.after { background: rgb(5 150 105 / 0.95); color: #fff; }
.ba-fig.empty { background: transparent; border: 1.5px dashed var(--border); display: grid; place-items: center; }
.ba-empty-text { font-size: 0.75rem; color: var(--muted-fg); }

/* ─────────────────────────── بردکرامب ─────────────────────────── */

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-end: 1.5rem; font-size: 0.75rem; color: var(--muted-fg); }
.crumb { display: inline-flex; align-items: center; gap: 0.25rem; }
a.crumb:hover { color: var(--primary); }
.crumb-sep { color: var(--muted-fg); }
.select-native { position: absolute; border: 0; padding: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.crumb + .crumb::before { content: none; }
.crumb.current { color: var(--fg); font-weight: 700; }
.crumb .ic { width: 14px; height: 14px; }

/* ─────────────────────────── عنوان بخش سایت ─────────────────────────── */

/* عیناً مطابق SectionHeading داینامیک: mb-10 + gap-3 + eyebrow گرد + h2 responsive
   پیش‌فرض داینامیک = center (items-center text-center) */
.section-heading { display: flex; flex-direction: column; gap: 0.75rem; margin-block-end: 2.5rem; align-items: center; text-align: center; }
.section-heading.center { align-items: center; text-align: center; }
.section-heading.start { align-items: flex-start; text-align: start; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--primary); font-size: 0.75rem; font-weight: 700; line-height: 1rem; }
.eyebrow-pill { gap: 0.5rem; border: 1px solid rgb(13 148 136 / 0.25); background: rgb(13 148 136 / 0.05); border-radius: 999px; padding: 0.25rem 0.875rem; margin-block-end: 0; }
/* بج هیرو (Badge outline): py-1.5 px-3.5 + border-primary/30 + bg-primary/10 → 30px */
.eyebrow:not(.eyebrow-pill) { border: 1px solid rgb(13 148 136 / 0.3); background: rgb(13 148 136 / 0.1); border-radius: 999px; padding: 0.375rem 0.875rem; }
.section-title { font-size: 1.5rem; font-weight: 800; line-height: 1.375; }
.section-desc { color: var(--muted-fg); font-size: 0.875rem; line-height: 2; max-width: 42rem; }

/* ─────────────────────────── توست ─────────────────────────── */

/* ظرف توست — کلاس .toast-container توسط skin.js ساخته می‌شود */
.toast-container, .toast-wrap {
    position: fixed;
    bottom: 1rem;
    inset-inline-end: 1rem;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: var(--popover);
    color: var(--popover-fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 0.8125rem;
    font-weight: 500;
    pointer-events: auto;
    animation: toast-in 0.25s ease-out;
    cursor: pointer;
}
.toast-icon { display: inline-flex; flex-shrink: 0; color: var(--tone-emerald); margin-block-start: 0.125rem; }
.toast-icon .ic { width: 16px; height: 16px; }
.toast-text { flex: 1 1 auto; min-width: 0; }
.toast-out { animation: toast-out 0.3s ease-in forwards; }
.toast .ic { flex-shrink: 0; color: var(--primary); margin-block-start: 0.125rem; }
.toast.success, .toast-success { border-color: var(--tone-emerald); }
.toast.success .ic, .toast-success .ic, .toast-success .toast-icon { color: var(--tone-emerald); }
.toast.error, .toast-error { border-color: var(--tone-rose); }
.toast.error .ic, .toast-error .ic, .toast-error .toast-icon { color: var(--tone-rose); }

/* ─────────────────────────── اسکلتون (بارگذاری) ─────────────────────────── */

.skeleton { display: block; height: 0.75rem; border-radius: 999px; background: var(--muted); animation: skeleton-pulse 1.6s ease-in-out infinite; }
.ai-skeleton-line { display: block; height: 0.625rem; border-radius: 999px; background: var(--muted); margin-block-start: 0.5rem; animation: skeleton-pulse 1.6s ease-in-out infinite; }
.ai-skeleton-line.w75 { width: 75%; }
.ai-skeleton-line.w100 { width: 100%; }
.ai-skeleton-line.w60 { width: 60%; }

/* ─────────────────────────── چیدمان سایت — پوسته و هدر ─────────────────────────── */

.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 1 auto; width: 100%; }

/* پدینگ بخش‌های سایت — معادل Tailwind نسخهٔ داینامیک:
   sec-md = py-12 sm:py-16 · sec-lg = py-16 sm:py-20 · sec-sm = py-10 · sec-cta = py-14 sm:py-16 */
.sec { }
/* داینامیک: py-16(64) موبایل → sm:py-20(80) — مطابق هر بخش صفحهٔ اصلی */
.sec-md { padding-block: 3rem; }
.sec-lg { padding-block: 4rem; }
.sec-sm { padding-block: 2.5rem; }
.sec-cta { padding-block: 3.5rem; }
.sec-alt { background: color-mix(in srgb, var(--secondary) 40%, transparent); }
/* کارت مقاله: p-6 sm:p-8 داینامیک */
@media (min-width: 640px) {
    .article-card > .card-body { padding: 2rem; }
}

/* کانتینر باریک (max-w-4xl داینامیک) برای هیرو/بدنهٔ صفحات مقاله‌ای */
.container-narrow { width: 100%; max-width: 56rem; margin-inline: auto; padding-inline: 1rem; }
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.header-bar { height: 4rem; display: flex; align-items: center; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; }
/* لوگوی هدر — عین داینامیک: h-9 w-9 rounded-xl bg-primary font-extrabold text-lg */
.brand-logo {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: var(--primary);
    color: var(--primary-fg);
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.brand-name { font-size: 1.125rem; font-weight: 800; }
.brand-tag { font-size: 0.625rem; color: var(--muted-fg); }
/* ناوبری اصلی */
.main-nav { display: none; align-items: center; gap: 2px; }
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    /* عین داینامیک: px-3.5 py-2 rounded-lg text-sm font-medium */
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(23 23 23 / 0.8);
    transition: background-color 0.15s ease, color 0.15s ease;
}
html[data-theme="dark"] .nav-link { color: rgb(250 250 250 / 0.8); }
.nav-link:hover { background: var(--muted); color: var(--fg); }
.nav-link.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 0.5rem; }
.phone-link { display: none; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--muted-fg); transition: color 0.15s ease; }
.phone-link:hover { color: var(--primary); }
.login-link { color: var(--fg); }
.mobile-menu-btn { display: inline-flex; }
/* ردیف دوم هدر (منوی فرعی) */
.header-bar-2 { display: none; background: color-mix(in srgb, var(--muted) 40%, transparent); border-top: 1px solid var(--border); }
.second-nav { display: flex; align-items: center; gap: 0.25rem; height: 2.5rem; overflow-x: auto; scrollbar-width: none; }
.second-nav::-webkit-scrollbar { display: none; }
/* نقطهٔ جداکنندهٔ منوی فرعی — عین h-1 w-1 bg-muted-foreground/40 داینامیک */
.nav-dot { width: 0.25rem; height: 0.25rem; border-radius: 999px; background: color-mix(in srgb, var(--muted-fg) 40%, transparent); flex-shrink: 0; }
.second-link {
    white-space: nowrap;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-fg);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.second-link:hover { background: var(--muted); color: var(--fg); }
.second-link.active { color: var(--primary); font-weight: 700; }
/* دکمهٔ تغییر تم — خورشید در روشن، ماه در تاریک */
.theme-toggle { flex-shrink: 0; }
.theme-moon { display: none; }
html[data-theme="dark"] .theme-sun { display: none; }
html[data-theme="dark"] .theme-moon { display: block; }

/* ─────────────────────────── دراور موبایل ─────────────────────────── */

.drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 70;
    width: min(20rem, 88vw);
    background: var(--card);
    border-inline-end: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
/* در RTL سمت inline-start همان سمت راست است؛ دراور از راست باز می‌شود */
.drawer.open { transform: translateX(0); visibility: visible; transition: transform 0.3s ease; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgb(15 23 42 / 0.45); animation: fade-in 0.2s ease-out; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.875rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.drawer-nav { flex: 1 1 auto; padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.drawer-label { padding: 0.5rem 0.75rem 0.25rem; font-size: 0.6875rem; font-weight: 700; color: var(--muted-fg); }
.drawer-sep { height: 1px; background: var(--border); margin: 0.625rem 0.75rem; }
.drawer-cta { margin-block-start: 0.375rem; }
/* دراورهای چیدمان ادمین/پنل — کمی باریک‌تر از دراور سایت */
.drawer-admin, .drawer-panel { width: min(18rem, 88vw); }

/* ─────────────────────────── فوتر سایت ─────────────────────────── */

/* فوتر — عین داینامیک: bg-secondary/40 + grid gap-10 md:2 lg:4 + py-12 */
.site-footer { background: color-mix(in srgb, var(--secondary) 40%, transparent); border-top: 1px solid var(--border); margin-block-start: auto; }
html[data-theme="dark"] .site-footer { background: color-mix(in srgb, var(--card) 40%, transparent); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3rem 0; }
/* لوگوی فوتر: h-10 w-10 text-xl */
.site-footer .brand-logo { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
.site-footer .brand-tag { font-size: 0.75rem; }
.footer-brand { display: flex; flex-direction: column; }
.footer-about { margin-block-start: 1rem; font-size: 0.875rem; line-height: 1.75rem; color: var(--muted-fg); }
.footer-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1rem; }
/* چیپ فوتر: rounded-full bg-background border px-3 py-1 text-xs */
.footer-chips .chip { border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--muted-fg); }
.footer-chips .chip .ic { color: var(--primary); }
/* ستون‌ها — عین داینامیک: title mb-4 + space-y-2.5 (لینک‌ها) / space-y-3 (تماس) */
.footer-col { display: flex; flex-direction: column; }
.footer-col-title { font-size: 1rem; line-height: 1.5rem; font-weight: 700; margin-block-end: 1rem; }
.footer-link { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-fg); transition: color 0.15s ease; }
.footer-link + .footer-link { margin-block-start: 0.625rem; }
.footer-link:hover { color: var(--primary); }
.footer-contact { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-fg); transition: color 0.15s ease; }
.footer-contact + .footer-contact { margin-block-start: 0.75rem; }
.footer-contact:hover { color: var(--primary); }
.footer-contact .ic { width: 1rem; height: 1rem; color: var(--primary); flex-shrink: 0; }
/* نوار پایانی: mt-10 pt-6 border-t text-xs + pb-2rem ظرف داینامیک */
.footer-bottom { padding-block: 0; }
.footer-bottom-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.75rem; line-height: 1.0625rem; color: var(--muted-fg); border-top: 1px solid var(--border); margin-block-start: 2.5rem; padding-block: 1.5rem 2rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ─────────────────────────── چیدمان ادمین ─────────────────────────── */

.admin-shell { min-height: 100vh; background: var(--bg); }
.admin-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: 16rem;
    z-index: 30;
    display: none;
    flex-direction: column;
    background: var(--card);
    border-inline-end: 1px solid var(--border);
}
.sidebar-brand { display: flex; align-items: center; gap: 0.625rem; padding: 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sidebar-brand .brand-name { font-size: 0.875rem; }
.sidebar-brand .brand-tag { font-size: 0.625rem; }
.sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-fg);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-item:hover { background: var(--muted); color: var(--fg); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.nav-item .ic { width: 17px; height: 17px; }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user { padding: 0.75rem 1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.125rem; flex-shrink: 0; }
.sidebar-user-name { font-size: 0.8125rem; font-weight: 700; }
.sidebar-user-role { font-size: 0.7188rem; color: var(--muted-fg); }
.admin-main { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }
.admin-header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-inline: 1rem;
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.admin-header-title { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.admin-title { font-size: 0.9375rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 0.5rem; }
.admin-content { flex: 1 1 auto; width: 100%; max-width: 80rem; margin-inline: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* ─────────────────────────── چیدمان پنل مشتری ─────────────────────────── */

.panel-shell { display: flex; min-height: 100vh; background: var(--bg); }
.panel-sidebar {
    display: none;
    position: sticky;
    top: 0;
    height: 100vh;
    width: 16rem;
    flex-shrink: 0;
    flex-direction: column;
    background: var(--card);
    border-inline-end: 1px solid var(--border);
}
.panel-sidebar-note { padding: 0.75rem 1rem; border-top: 1px solid var(--border); font-size: 0.7188rem; color: var(--muted-fg); flex-shrink: 0; }
.panel-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.panel-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-inline: 1rem;
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.panel-title { font-size: 0.9375rem; font-weight: 700; }
.panel-header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 0.5rem; }
.panel-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding: 1rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.panel-footer { margin-block-start: auto; padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); background: var(--subtle); font-size: 0.7188rem; color: var(--muted-fg); }
.greeting { font-size: 1.25rem; font-weight: 800; }

/* ─────────────────────────── چیدمان ورود/ثبت‌نام ─────────────────────────── */

.auth-shell { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--primary-soft), var(--bg) 45%); }
.auth-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 1rem; }
.auth-main { flex: 1 1 auto; display: grid; place-items: center; padding: 1.5rem 1rem; }
.auth-card {
    width: 100%;
    max-width: 28rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.auth-title { font-size: 1.375rem; font-weight: 800; }
.auth-subtitle { font-size: 0.8125rem; color: var(--muted-fg); line-height: 1.9; }
.auth-footer { padding: 1rem; text-align: center; font-size: 0.7188rem; color: var(--muted-fg); border-top: 1px solid var(--border); }
.login-form { display: flex; flex-direction: column; gap: 0.875rem; text-align: start; }
.error-banner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: var(--tone-rose-bg);
    color: var(--tone-rose);
    border: 1px solid rgb(244 63 94 / 0.35);
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
}
/* ورود سریع نقش‌محور */
.quick-login-box { border: 1.5px dashed var(--border); border-radius: 1rem; background: var(--subtle); padding: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.quick-login-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.quick-login-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: start;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.quick-login-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.quick-hint { font-size: 0.6875rem; font-weight: 400; color: var(--muted-fg); }

/* ─────────────────────────── دراپ‌داون هدر (اعلان/کاربر) ─────────────────────────── */

.dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 60;
    min-width: 14rem;
    max-width: calc(100vw - 2rem);
    background: var(--popover);
    color: var(--popover-fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: none;
}
.dropdown.open .dropdown-menu { display: block; animation: drop-in 0.16s ease-out; }
.dropdown-menu.notif-menu { width: 22rem; }
.dropdown-menu.user-menu { width: 15rem; }
.dropdown-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); }
.dropdown-title { font-size: 0.8125rem; font-weight: 700; }
.dropdown-menu-scroll { max-height: 20rem; overflow-y: auto; padding: 0.25rem; }
.dropdown-label { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); }
.dropdown-name { font-size: 0.8125rem; font-weight: 700; }
.dropdown-email { font-size: 0.6875rem; color: var(--muted-fg); direction: ltr; unicode-bidi: embed; }
.dropdown-role { margin-block-start: 0.25rem; }
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    text-align: start;
    transition: background-color 0.12s ease;
}
.dropdown-item:hover { background: var(--muted); }
.dropdown-item.danger { color: var(--tone-rose); }
.dropdown-item.danger:hover { background: var(--tone-rose-bg); }
.dropdown-footer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    transition: background-color 0.12s ease;
}
.dropdown-footer-link:hover { background: var(--muted); }
.dropdown-empty { padding: 1rem; text-align: center; font-size: 0.75rem; color: var(--muted-fg); }
/* آیتم اعلان */
.notif-item { display: flex; flex-direction: column; gap: 0.1875rem; padding: 0.625rem 0.625rem; border-radius: 0.5rem; transition: background-color 0.12s ease; }
.notif-item:hover { background: var(--muted); }
.notif-item.unread { background: var(--primary-soft); }
.notif-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.notif-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--primary); flex-shrink: 0; }
.notif-title { font-size: 0.7813rem; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-title.strong { color: var(--fg); font-weight: 700; }
.notif-body { font-size: 0.75rem; color: var(--muted-fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-meta { font-size: 0.6563rem; color: var(--muted-fg); }
/* زنگ اعلان‌ها */
.bell-btn { position: relative; }
.bell-badge {
    position: absolute;
    top: -0.25rem;
    inset-inline-end: -0.25rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-fg);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
    border: 2px solid var(--card);
}
.bell-badge.bell-primary { background: var(--primary); }
/* دکمهٔ کاربر */
.user-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.625rem 0.25rem 0.25rem; border-radius: 999px; transition: background-color 0.15s ease; }
.user-btn:hover { background: var(--muted); }
.user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.user-name-sm { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.user-name-col { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.user-org-sm { font-size: 0.6563rem; color: var(--muted-fg); }

/* ─────────────────────────── ویجت دستیار هوشمند (AI) ─────────────────────────── */

/* دکمهٔ شناور — در RTL سمت inline-end یعنی دورترین گوشه (چپ پایین) */
.ai-fab {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    z-index: 45;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgb(13 148 136 / 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ai-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 30px rgb(13 148 136 / 0.5); }
.ai-fab-tip {
    position: absolute;
    inset-inline-start: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: var(--fg);
    color: var(--bg);
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
@media (min-width: 640px) {
    .ai-fab:hover .ai-fab-tip { opacity: 1; }
}
.ai-fab-dot {
    position: absolute;
    top: 3px;
    inset-inline-end: 3px;
    width: 0.6875rem;
    height: 0.6875rem;
    border-radius: 999px;
    background: #34d399;
    border: 2px solid #fff;
}
.ai-fab-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 999px; background: #34d399; animation: fab-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
/* پنل گفتگو */
.ai-panel {
    position: fixed;
    inset-block-end: 5rem;
    inset-inline-end: 1rem;
    z-index: 46;
    width: min(23.5rem, calc(100vw - 1.5rem));
    height: min(26rem, calc(100vh - 7rem));
    background: var(--popover);
    color: var(--popover-fg);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ai-panel:not([hidden]) { animation: ai-pop-in 0.22s ease-out; }
.ai-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    flex-shrink: 0;
}
.ai-panel-brand { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.ai-bot-tile {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: rgb(255 255 255 / 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ai-title { font-size: 0.8125rem; font-weight: 800; }
.ai-status { font-size: 0.6875rem; color: rgb(255 255 255 / 0.8); }
.ai-panel-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
.ai-panel-actions .icon-btn { color: rgb(255 255 255 / 0.85); }
.ai-panel-actions .icon-btn:hover { background: rgb(255 255 255 / 0.18); color: #fff; }
.ai-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.625rem; }
.ai-quick-wrap { background: var(--subtle); border: 1px dashed var(--border); border-radius: var(--radius); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ai-quick-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 700; }
.ai-quick-label .ic { width: 14px; height: 14px; color: var(--primary); }
.ai-quick-list { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ai-quick {
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--fg);
    text-align: start;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.ai-quick:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.ai-disclaimer { font-size: 0.6563rem; color: var(--muted-fg); line-height: 1.8; }
/* حباب‌های پیام — پیام کاربر در انتهای منطقی (چپ)، پاسخ ربات در آغاز (راست) */
.ai-msg { display: flex; max-width: 88%; }
.ai-msg.user { align-self: flex-end; }
.ai-msg.bot { align-self: flex-start; }
.ai-bubble { padding: 0.625rem 0.75rem; border-radius: 1rem; font-size: 0.7813rem; line-height: 1.9; }
.ai-msg.user .ai-bubble { background: var(--primary); color: var(--primary-fg); border-start-end-radius: 0.375rem; }
.ai-msg.bot .ai-bubble { background: var(--muted); color: var(--fg); border-start-start-radius: 0.375rem; }
.ai-bubble p { margin-block-end: 0.25rem; }
.ai-bubble p:last-child { margin-block-end: 0; }
/* نشانگر در حال تایپ */
.ai-typing {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    background: var(--muted);
    border-radius: 1rem;
    border-start-start-radius: 0.375rem;
    width: fit-content;
}
.ai-typing .dot, .ai-typing-dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--muted-fg); animation: ai-typing-bounce 1.2s infinite; }
.ai-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.ai-typing .dot:nth-child(3) { animation-delay: 0.3s; }
/* ردیف ورودی */
.ai-input-row { display: flex; gap: 0.5rem; padding: 0.625rem 0.75rem; border-top: 1px solid var(--border); background: var(--card); flex-shrink: 0; }
.ai-input-row .input { flex: 1 1 auto; height: 2.375rem; }
.ai-send {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 0.625rem;
    background: var(--primary);
    color: var(--primary-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}
.ai-send:hover { background: var(--primary-hover); }
.ai-send .ic { width: 17px; height: 17px; }
/* کارت تحلیل هوش مصنوعی */
.ai-card-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1rem 0; }
.ai-card-tile {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ai-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1rem 0; }
.ai-loading { padding: 0.875rem 1rem; font-size: 0.7813rem; color: var(--muted-fg); }
.ai-result { padding: 0.25rem 1rem 0.5rem; font-size: 0.8125rem; line-height: 2; }
.ai-result h3, .ai-result h4 { font-size: 0.875rem; margin: 0.75rem 0 0.375rem; color: var(--primary); }
.ai-result p { margin-block: 0.375rem; }
.ai-result strong { color: var(--prose-strong); }
.ai-result ul { list-style: disc; padding-inline-start: 1.25rem; margin-block: 0.375rem; }
.ai-card-footer { border-top: 1px solid var(--border); padding: 0.75rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.375rem; }
.ai-saved-title { font-size: 0.75rem; font-weight: 700; }
.ai-saved-empty { font-size: 0.75rem; color: var(--muted-fg); }

/* ─────────────────────────── محتوای غنی (مقالات/صفحات) ─────────────────────────── */

/* عیناً article-content داینامیک (globals.css) — بدون تزئین اضافه */
.article-content { line-height: 2; font-size: 0.875rem; }
.rich-content { line-height: 2; font-size: 0.875rem; }
.rich-content > *:first-child, .article-content > *:first-child { margin-block-start: 0; }
.article-content h2, .rich-content h2 { font-size: 1.35rem; font-weight: 700; margin: 2rem 0 1rem; color: var(--prose-strong); line-height: 2; }
html[data-theme="dark"] .article-content h2, html[data-theme="dark"] .rich-content h2 { color: oklch(0.75 0.09 182); }
.article-content h3, .rich-content h3 { font-size: 1.15rem; font-weight: 700; margin: 1.5rem 0 0.75rem; line-height: 2; }
.article-content p, .rich-content p { margin: 0 0 1rem; }
.article-content ul, .article-content ol, .rich-content ul, .rich-content ol { margin: 0 1.25rem 1rem 0; padding-inline-start: 0.5rem; }
.article-content li, .rich-content li { margin: 0 0 0.5rem; list-style-type: disc; }
.article-content strong, .rich-content strong { font-weight: 700; color: var(--prose-strong); }
html[data-theme="dark"] .article-content strong, html[data-theme="dark"] .rich-content strong { color: oklch(0.75 0.09 182); }
.rich-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.rich-content strong { font-weight: 800; color: var(--prose-strong); }
.rich-content blockquote { border-inline-start: 4px solid var(--primary); background: var(--primary-soft); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1rem 0; }
.rich-content img { max-width: 100%; height: auto; display: block; border-radius: 1rem; margin: 1.25rem auto; }
.rich-content table { width: 100%; font-size: 0.9em; }
.rich-content th, .rich-content td { border: 1px solid var(--border); padding: 0.5rem 0.875rem; text-align: start; }
.rich-content th { background: var(--subtle); font-weight: 600; }
.rich-content hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* ─────────────────────────── هیرو و بخش‌های عمومی سایت ─────────────────────────── */

/* عیناً مطابق هیرو داینامیک: فریم گرد + تصویر aspect-4/3 + نوار ضمیمه */
.hero { padding-block: 3.5rem; background: linear-gradient(180deg, var(--primary-soft), transparent 85%); overflow: hidden; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero-text { display: flex; flex-direction: column; align-items: flex-start; }
.hero-text > * + * { margin-block-start: 1.25rem; }
.hero-text .hero-actions, .hero-text .hero-pills { margin-block-start: 2rem; }
.hero-text .eyebrow { margin-block-end: 0; }
.hero-title { font-size: 1.875rem; font-weight: 900; line-height: 1.35; }
.gradient-text { background: linear-gradient(to left, var(--primary), #10b981); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-desc { color: var(--muted-fg); font-size: 0.875rem; line-height: 2.25rem; max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.hero-media { position: relative; min-width: 0; max-width: 28rem; }
.hero-glow { position: absolute; inset: -1.5rem; border-radius: 2.5rem; background: linear-gradient(to top left, rgb(13 148 136 / 0.2), rgb(52 211 153 / 0.1)); filter: blur(2.5rem); pointer-events: none; }
.hero-frame { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--card); }
.hero-frame .hero-img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; display: block; border: none; border-radius: 0; box-shadow: none; }
.hero-img { width: 100%; display: block; }
.trust-bar { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border); background: var(--header-bg); padding: 0.75rem; backdrop-filter: blur(4px); }
.trust-item { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 0.5rem; text-align: center; font-size: 0.6875rem; line-height: 1rem; font-weight: 700; color: rgb(63 63 70 / 0.75); }
.trust-item .ic { width: 1rem; height: 1rem; color: var(--primary); flex-shrink: 0; }
.trust-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1rem; }
.frame-169 .hero-img { aspect-ratio: 16 / 9; }
.frame-caption { display: flex; align-items: center; gap: 0.5rem; border-top: 1px solid var(--border); background: var(--header-bg); padding: 0.75rem 1rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-fg); backdrop-filter: blur(4px); }
.frame-caption .ic { width: 1rem; height: 1rem; color: var(--primary); flex-shrink: 0; }
.func-list { display: flex; flex-direction: column; gap: 0.75rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.func-list li { display: flex; align-items: center; gap: 0.625rem; border: 1px solid var(--border); background: var(--card); border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; box-shadow: var(--shadow-sm); }
.func-list .ic { width: 1.125rem; height: 1.125rem; color: var(--primary); flex-shrink: 0; }
.tech-sub-title { margin-block-start: 1.75rem; font-size: 1rem; font-weight: 700; }
.tech-desc { color: var(--muted-fg); font-size: 1rem; line-height: 2.25rem; }
.tech-desc .mono { font-weight: 700; color: var(--fg); }
/* هدر داخلی بخش‌های سایت */
.page-hero { padding-block: 2.5rem; background: linear-gradient(180deg, var(--primary-soft), transparent); border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: 1.5rem; font-weight: 800; }
.page-hero p { margin-block-start: 0.75rem; color: var(--muted-fg); font-size: 0.875rem; line-height: 1.75; }
/* شروع انیمیشن اسکرول */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ─────────────────────────── شبکه‌های کارت سایت ─────────────────────────── */

/* همهٔ گریدهای داینامیک: gap-6 = 24px (کارت‌های grid gap-6) */
.cards-grid-2, .cards-grid-3, .cards-grid-4 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
/* همکاری با مراکز درمانی (داینامیک: gap-6 lg:grid-cols-2 lg:gap-8) — قاعدهٔ پایه قبل از رسپانسیو */
.coop-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }

/* ─────────── کارت‌های آیکون‌دار سایت (عین Card/CardHeader/CardContent داینامیک) ───────────
   Card: rounded-2xl(16) · py-6(24) · gap-6(24) · shadow-sm — رشد عمودی دقیق:
   مکانیسم/مزایا: 24 + آیکون(44) + 6 + عنوان(28) + pb-3(12) + gap-6(24) + متن + 24
   ویژگی‌ها/استانداردها: CardContent p-6 (24 دور همه) + gap-3(12) درون‌خطی */
.icon-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    padding-block: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.icon-card:hover { box-shadow: var(--shadow-md); }
.icon-card .card-header { display: grid; grid-auto-rows: min-content; grid-template-rows: auto auto; align-items: start; gap: 0.375rem; padding-inline: 1.5rem; }
/* CardHeader pb-3 / pb-4 داینامیک (معمول در کارت‌های سایت) */
.card-header.ch-pb3 { padding-block-end: 0.75rem; }
.card-header.ch-pb4 { padding-block-end: 1rem; }
.icon-card .card-body { padding-inline: 1.5rem; }
/* CardContent flex flex-col gap-3 p-6 (ویژگی‌ها/استانداردها) */
.card-stack { padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.icon-card .card-title { font-size: 1rem; font-weight: 700; line-height: 1.75rem; }
.icon-card .card-desc { font-size: 0.875rem; color: var(--muted-fg); line-height: 1.75rem; margin: 0; }
/* مکانیسم: CardTitle = font-semibold */
.mech-card .card-title { font-weight: 600; }
/* استانداردها: h3 text-sm font-bold + p text-xs leading-6 + کارت bg-background/80 + border-primary/15 */
.standards-card .card-title { font-size: 0.875rem; }
.standards-card .card-desc { font-size: 0.75rem; line-height: 1.5rem; }
.standards-card { border-color: rgb(13 148 136 / 0.15); background: color-mix(in srgb, var(--card) 80%, transparent); }
html[data-theme="dark"] .standards-card { background: color-mix(in srgb, var(--card) 80%, var(--bg)); }
/* کاشی آیکون — عین داینامیک: h-11 w-11 (44px) rounded-xl(12) + آیکون h-5.5 (22px) */
.icon-tile { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-tile .ic { width: 1.375rem; height: 1.375rem; }
.icon-tile.it-soft { background: rgb(13 148 136 / 0.1); color: var(--tone-teal); }
.icon-tile.it-grad { background: linear-gradient(to top left, var(--primary), #10b981); color: #fff; box-shadow: var(--shadow-sm); }
.icon-tile.it-solid { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.icon-tile.tone-teal { background: var(--tone-teal-bg); color: var(--tone-teal); }
.icon-tile.tone-emerald { background: var(--tone-emerald-bg); color: var(--tone-emerald); }
.icon-tile.tone-amber { background: var(--tone-amber-bg); color: var(--tone-amber); }
.icon-tile.tone-rose { background: var(--tone-rose-bg); color: var(--tone-rose); }
.icon-tile.tone-cyan { background: var(--tone-cyan-bg); color: var(--tone-cyan); }
.icon-tile.tone-violet { background: var(--tone-violet-bg); color: var(--tone-violet); }
.icon-tile.tone-zinc { background: var(--tone-zinc-bg); color: var(--tone-zinc); }
.icon-tile.tone-orange { background: var(--tone-orange-bg); color: var(--tone-orange); }

/* آیتم‌های چیپ‌مانند لیست (li.reunded-xl border px-4 py-3 text-sm) — موارد مصرف/همکاری */
.chip-list { display: flex; flex-direction: column; gap: 0.75rem; }
.chip-list li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--secondary) 30%, transparent);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}
.chip-list li .ic { width: 1rem; height: 1rem; color: var(--primary); flex-shrink: 0; }
/* خدمات همکاری: bg-background + shadow-sm + گرید دوستونه */
.chip-list.cols-2 { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .chip-list.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chip-list.shadowed li { background: var(--card); box-shadow: var(--shadow-sm); }
/* آیتم‌های نقطه‌دار (li.dot px-3.5 py-2.5) — زخم‌های حاد/مزمن */
.dot-list { display: grid; gap: 0.625rem; }
@media (min-width: 640px) { .dot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dot-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}
.dot-list li::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--primary); flex-shrink: 0; }
.dot-list.emerald li::before { background: #10b981; }

/* ─────────────────────────── فهرست تیک‌دار و مقایسه ─────────────────────────── */

.list-check { display: flex; flex-direction: column; gap: 0.625rem; }
.list-check li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; line-height: 1.75rem; }
.list-check li .ic { color: var(--tone-emerald); width: 1rem; height: 1rem; margin-block-start: 0.25rem; }
.compare-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
/* p-6 sm:p-8 → 24px موبایل / 32px ≥sm */
.compare-card { border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--border); }
@media (min-width: 640px) { .compare-card { padding: 2rem; } }
.compare-card.amber { background: rgb(255 251 235 / 0.7); border-color: rgb(253 230 138 / 0.7); }
.compare-card.teal { background: linear-gradient(to top left, rgb(13 148 136 / 0.1), rgb(16 185 129 / 0.1)); border-color: rgb(153 246 228 / 0.7); }
html[data-theme="dark"] .compare-card.amber { background: rgb(69 26 3 / 0.3); border-color: rgb(120 53 15 / 0.5); }
html[data-theme="dark"] .compare-card.teal { border-color: rgb(19 78 74 / 0.5); }
.compare-card.amber .compare-title { color: #78350f; }
.compare-card.teal .compare-title { color: #134e4a; }
html[data-theme="dark"] .compare-card.amber .compare-title { color: #fde68a; }
html[data-theme="dark"] .compare-card.teal .compare-title { color: #ccfbf1; }
.compare-card.amber .compare-list li { color: rgb(69 26 3 / 0.9); }
html[data-theme="dark"] .compare-card.amber .compare-list li { color: rgb(254 243 199 / 0.9); }
.compare-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; margin-block-end: 1.25rem; }
.compare-title .ic { width: 1.25rem; height: 1.25rem; }
.compare-desc { margin-block: 0; font-size: 1rem; line-height: 2.25rem; color: rgb(23 23 23 / 0.85); }
html[data-theme="dark"] .compare-desc { color: rgb(250 250 250 / 0.85); }
.compare-list { display: flex; flex-direction: column; gap: 0.875rem; }
.compare-list li { position: relative; padding-inline-start: 1.25rem; font-size: 0.875rem; line-height: 1.75rem; }
.compare-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.625rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--tone-amber); }
.compare-card.teal .compare-list li::before { background: var(--tone-teal); }
.compare-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1.5rem; }
/* جدول مشخصات فنی — عین داینامیک: py-3.5→sm:py-4 (16) · px-4→sm:px-6 (24) · w-2/5 · zebra bg-muted/40 */
.specs-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.specs-table tr:nth-child(odd) { background: color-mix(in srgb, var(--muted) 40%, transparent); }
.specs-table tr:nth-child(even) { background: var(--bg); }
.specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: 0; }
.specs-table th { width: 40%; text-align: start; padding: 0.875rem 1rem; font-weight: 700; line-height: 1.25rem; }
.specs-table td { padding: 0.875rem 1rem; color: var(--muted-fg); line-height: 1.25rem; }
@media (min-width: 640px) {
    .specs-table th { padding: 1rem 1.5rem; }
    .specs-table td { padding: 1rem 1.5rem; }
}
.specs-table th, .specs-table td { border-bottom: 1px solid var(--border); }
/* کارت فلش (CardContent p-0 داینامیک — Card همچنان py-6 دارد) + یادداشت mt-4 text-xs */
.card-flush { padding-inline: 0; overflow: hidden; }
.specs-note { margin-block-start: 1rem; text-align: center; font-size: 0.75rem; line-height: 1.5rem; color: var(--muted-fg); }
/* ظرف max-w-5xl داینامیک (مشخصات فنی) */
.container-5xl { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .container-5xl { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container-5xl { padding-inline: 2rem; } }
/* ردیف دکمه‌های وسط‌چین (mt-8 flex justify-center gap-3) */
.btn-row { margin-block-start: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
/* یادداشت تولید سفارشی (mt-6 flex gap-2 text-sm) */
.note-line { margin-block-start: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-fg); text-align: center; }
.note-line .ic { width: 1rem; height: 1rem; color: var(--primary); flex-shrink: 0; }

/* ─────────────────────────── نوار فراخوان (CTA) ─────────────────────────── */

/* CTA — عیناً مطابق داینامیک: py-16(64) → sm:py-20(80) + گرادیان teal→emerald */
.cta-section { position: relative; overflow: hidden; padding-block: 4rem; background: linear-gradient(to top left, var(--primary), #059669); color: #fff; }
.cta-bg { position: absolute; inset: 0; background: linear-gradient(to top left, var(--primary), #059669); }
.cta-grid { position: relative; display: grid; gap: 2rem; align-items: center; }
.cta-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.cta-center .cta-desc { max-width: 42rem; }
/* h2: text-2xl(24/33) → sm:text-3xl(30/41) + font-black */
.cta-title { font-size: 1.5rem; font-weight: 900; line-height: 1.375; color: #fff; }
/* p: mt-4(16) + text-sm(14/32 leading-8) → sm:text-base(16/36 leading-9) */
.cta-desc { margin-block-start: 1rem; color: rgb(255 255 255 / 0.9); font-size: 0.875rem; line-height: 2rem; }
/* دکمه‌ها: mt-7(28) + gap-3(12) */
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.75rem; }
.cta-center .cta-actions { margin-block-start: 0; justify-content: center; }
.btn-cta-outline { border: 1px solid rgb(255 255 255 / 0.4); background: transparent; color: #fff; }
.btn-cta-outline:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
/* کارت تماس: rounded-2xl(16) + p-6(24) + gap-4(16) + bg-white/10 */
.cta-contact-card { display: grid; gap: 1rem; border: 1px solid rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.1); border-radius: 1rem; padding: 1.5rem; backdrop-filter: blur(4px); }
/* آیتم تماس: py-3.5(14) px-4(16) gap-3(12) + rounded-xl(12) + text-sm(14/20) → 48px */
.cta-contact-item { display: flex; align-items: center; gap: 0.75rem; border-radius: 0.75rem; background: rgb(255 255 255 / 0.1); padding: 0.875rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: #fff; transition: background 0.15s ease; }
.cta-contact-item:hover { background: rgb(255 255 255 / 0.2); }
.cta-contact-item .ic { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.cta-contact-sep { grid-column: 1 / -1; height: 1px; background: rgb(255 255 255 / 0.2); }
.cta-contact-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; line-height: 1.5rem; color: rgb(255 255 255 / 0.8); margin: 0; }
.cta-contact-note .ic { width: 1rem; height: 1rem; flex-shrink: 0; }
.cta-note { margin-block-start: 0.75rem; font-size: 0.75rem; color: rgb(255 255 255 / 0.75); }

/* هیروی صفحهٔ محصول: py-14 sm:py-20 (بدون lg:py-24) */
@media (min-width: 1024px) { .hero.hero-md { padding-block: 5rem; } }
/* CTA محصول: py-14 sm:py-16 + desc leading-8 */
.cta-section.cta-product { padding-block: 3.5rem; }
.cta-product .cta-desc { line-height: 2rem; }
@media (min-width: 640px) { .cta-section.cta-product { padding-block: 4rem; } }
/* ─────────────────────────── کارت مدل محصول ─────────────────────────── */

.model-card { overflow: hidden; border-radius: 1rem; }
.model-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--muted); }
.model-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* بج مدل — عین Badge داینامیک: teal-100/emerald-100 (نه توپر) + px-2.5 py-0.5 text-xs */
.model-badge {
    position: absolute;
    top: 0.75rem;
    inset-inline-start: 0.75rem;
    padding: 0.125rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: #fff;
}
.model-badge.pad { background: #ccfbf1; color: #115e59; }
.model-badge.graft { background: #d1fae5; color: #065f46; }
html[data-theme="dark"] .model-badge.pad { background: #042f2e; color: #5eead4; }
html[data-theme="dark"] .model-badge.graft { background: #022c22; color: #6ee7b7; }
.model-variants { padding: 0 1.5rem; }
/* CardTitle text-lg (18/28) + font-semibold */
.model-card .card-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.model-card .card-header { gap: 0.375rem; padding-block-end: 0.75rem; }
.model-card .card-header .card-desc { margin: 0; font-size: 0.875rem; line-height: 1.75rem; }
.model-variants .card-desc { margin: 0; }
/* li: px-3.5(14) py-2.5(10) text-sm(14/20) → 41px — span داخلی flex عین داینامیک */
.variant-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.875rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.variant-row > span:first-child { display: flex; align-items: center; gap: 0.5rem; }
.variant-row + .variant-row { border-top: 1px solid var(--border); }
.variant-row .ic { width: 0.875rem; height: 0.875rem; color: var(--primary); flex-shrink: 0; }
.variant-row strong { color: var(--primary); font-weight: 700; line-height: 1.25rem; }
.variant-list { border: 1px solid var(--border); border-radius: 0.75rem; background: color-mix(in srgb, var(--secondary) 30%, transparent); }
.variant-list > .card-desc { padding: 0.75rem; margin: 0; }

/* ─────────────────────────── کارت قیمت (ProductPriceTable) ─────────────────────────── */

/* عین داینامیک: CardHeader flex-row bg-secondary/40 + جدول h-10/p-2 + فوتر border-t */
.price-card { display: flex; flex-direction: column; gap: 0; }
.price-card .card-header { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding-block: 1.5rem; background: color-mix(in srgb, var(--secondary) 40%, transparent); }
.price-card .card-header > div:first-child { display: flex; flex-direction: column; gap: 0.375rem; }
.price-card .card-header .card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.price-card .card-header .card-title .ic { width: 1.25rem; height: 1.25rem; }
.price-card .card-body { padding: 0; overflow-x: auto; }
.price-table { width: 100%; font-size: 0.875rem; }
.price-table th { height: 2.5rem; padding: 0 0.5rem; font-weight: 500; color: var(--fg); text-align: start; vertical-align: middle; background: color-mix(in srgb, var(--muted) 60%, transparent); border-bottom: 1px solid var(--border); }
.price-table td { padding: 0.5rem; text-align: start; vertical-align: middle; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border); }
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table td strong { color: var(--primary); }
.first-row-badge {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 0.5rem;
    padding: 0.125rem 0.625rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted-fg);
    font-size: 0.625rem;
    font-weight: 500;
    vertical-align: middle;
}
/* فوتر قیمت: border-t bg-secondary/30 px-6 py-4 → sm:flex-row */
.price-footer { display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--secondary) 30%, transparent); padding: 1rem 1.5rem; }
@media (min-width: 640px) { .price-footer { flex-direction: row; align-items: center; justify-content: space-between; } }
.price-note { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; line-height: 1.5rem; color: var(--muted-fg); margin: 0; }
.price-note .ic { width: 1rem; height: 1rem; color: var(--primary); flex-shrink: 0; }
/* ظرف max-w-6xl (قیمت‌گذاری محصول) + گپ grid gap-8 */
.container-6xl { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .container-6xl { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container-6xl { padding-inline: 2rem; } }
.stack-gap-lg { display: flex; flex-direction: column; gap: 2rem; }

/* ─────────────────────────── کارت رسانه (وبلاگ/گالری) ─────────────────────────── */

.media-card {
    background: var(--card);
    border: 1px solid var(--border);
    /* rounded-2xl + py-6 + gap-6 — عین Card داینامیک */
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-block: 1.5rem;
    transition: box-shadow 0.2s ease;
}
.media-card:hover { box-shadow: var(--shadow-md); }
.media-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--muted); }
.media-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.media-card:hover .media-cover img { transform: scale(1.05); }
/* نشان کاور: عین بج‌های داینامیک (px-2.5 py-0.5 text-xs → 22px) */
.cover-badge, .cover-badge-2 { position: absolute; top: 0.75rem; padding: 0.125rem 0.625rem; border-radius: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.cover-badge { inset-inline-start: 0.75rem; background: #ccfbf1; color: #115e59; }
.cover-badge-2 { inset-inline-end: 0.75rem; background: var(--header-bg); color: var(--fg); border: 1px solid var(--border); font-size: 0.75rem; backdrop-filter: blur(4px); }
html[data-theme="dark"] .cover-badge { background: #042f2e; color: #5eead4; }
.card-excerpt { font-size: 0.875rem; color: var(--muted-fg); line-height: 1.75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-fg); }
.meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.meta-item .ic { width: 0.875rem; height: 0.875rem; }
.media-card .card-title { font-size: 1rem; line-height: 1.75rem; font-weight: 700; }
.media-card .card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
/* کارت نوع زخم: CardContent p-5 بلوکی + p.mt-2.5 (بدون فلکس-گپ) */
.media-card .card-body.body-block { display: block; }
.media-card .card-body.body-block .card-excerpt { margin-block-start: 0.625rem; }
.media-card > .card-footer {
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: color-mix(in srgb, var(--secondary) 30%, transparent);
    /* CardFooter داینامیک با border-t: pt-6(24) + py-3.5(14) → 55px */
    padding: 1.5rem 1.5rem 0.875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
}
.read-link { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--primary); font-size: 0.75rem; line-height: 1rem; font-weight: 700; transition: color 0.15s ease; }
.read-link .ic { width: 0.875rem; height: 0.875rem; }
.text-link { color: var(--primary); font-weight: 500; }
.text-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.read-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ─────────────────────────── کارت گزارش درمان ─────────────────────────── */

.case-card {
    background: var(--card);
    border: 1px solid var(--border);
    /* rounded-2xl — عین Card داینامیک */
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: box-shadow 0.2s ease;
}
.case-card:hover { box-shadow: var(--shadow-md); }
.case-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.patient-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-fg); }
.case-card .card-title { font-weight: 700; }
/* کارت فشردهٔ پیش‌نمایش صفحهٔ اصلی — عین داینامیک: Card(py-6 gap-6) > CardContent(p-5 flex col gap-4) */
.case-stack { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.case-stack > .before-after { margin-block-start: auto; }
.case-compact .case-badges, .case-compact .patient-meta { margin: 0; }
.chips-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ─── آکاردئون: h3 پوشانندهٔ دکمه (ساختار عین Radix Accordion) ─── */
.accordion-h { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.accordion-h .accordion-trigger { width: 100%; }

/* ─── نمایش/مخفی‌کردن رمز (فرم ثبت‌نام — Eye/EyeOff داینامیک) ─── */
.pass-wrap { position: relative; }
.pass-wrap .input { padding-inline-end: 2.75rem; }
.pass-eye {
    position: absolute;
    inset-inline-end: 0.75rem;
    bottom: 0.55rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-fg);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.pass-eye:hover { color: var(--fg); }
.pass-eye .ic { width: 1rem; height: 1rem; }
.pass-eye .ic-off { display: none; }
.pass-eye.show .ic-on { display: none; }
.pass-eye.show .ic-off { display: block; }

/* ─────────────────────────── صفحهٔ مقاله ─────────────────────────── */

.article-hero {
    padding-block: 3rem;
    background: linear-gradient(180deg, var(--primary-soft), transparent);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.article-hero h1 { font-size: 1.5rem; font-weight: 900; line-height: 1.4; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; font-size: 0.75rem; color: var(--muted-fg); }
.article-body { display: grid; gap: 1.5rem; }
.source-card {
    background: var(--subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.8125rem;
}
.tags-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.related-section { display: grid; gap: 0.75rem; }

/* ─────────────────────────── تماس با ما ─────────────────────────── */

.contact-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.contact-info-card, .contact-form-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.info-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px dashed var(--border); }
.info-row:last-child { border-bottom: none; }
.info-tile {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--tone-teal-bg);
    color: var(--tone-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.info-text { font-size: 0.8438rem; min-width: 0; }
.form-note { font-size: 0.7188rem; color: var(--muted-fg); background: var(--muted); padding: 0.5rem 0.75rem; border-radius: 0.5rem; }

/* ─────────────────────────── سوالات متداول ─────────────────────────── */

.faq-list { display: flex; flex-direction: column; gap: 0.625rem; }

/* ─────────────────────────── بخش‌های ادمین — ابزار و شبکه‌ها ─────────────────────────── */

.filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.filters-row .search-box { flex: 1 1 240px; }
.filters-row .select { flex: 0 1 220px; }
.counter { font-size: 0.75rem; color: var(--muted-fg); margin-inline-start: auto; }
.admin-grid-2 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.summary-strip { display: grid; gap: 1rem; grid-template-columns: 1fr; }

/* ─────────────────────────── نمودار مالی ─────────────────────────── */

.chart-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* میله‌ها افقیِ LTR خوانده می‌شوند */
.dual-chart { direction: ltr; display: flex; align-items: flex-end; justify-content: space-around; gap: 0.625rem; padding-block: 1rem 0.25rem; }
.chart-group { flex: 1 1 auto; max-width: 4rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.chart-bars { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 8.25rem; }
.bar-income { width: 0.875rem; min-height: 4px; background: var(--primary); border-radius: 999px 999px 0 0; }
.bar-expense { width: 0.875rem; min-height: 4px; background: #fb7185; border-radius: 999px 999px 0 0; }
.chart-month { direction: rtl; font-size: 0.6875rem; color: var(--muted-fg); }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; font-size: 0.75rem; color: var(--muted-fg); }
.chart-legend .leg-income::before, .chart-legend .leg-expense::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-inline-end: 0.375rem; }
.chart-legend .leg-income::before { background: var(--primary); }
.chart-legend .leg-expense::before { background: #fb7185; }

/* ─────────────────────────── کارتابل (کانبان) ─────────────────────────── */

.kanban { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.kanban-col {
    background: var(--subtle);
    border: 1px solid var(--border);
    border-top: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.kanban-col.col-todo { border-top-color: var(--tone-zinc); }
.kanban-col.col-progress { border-top-color: var(--tone-amber); }
.kanban-col.col-done { border-top-color: var(--tone-emerald); }
.kanban-col.col-rejected { border-top-color: var(--tone-rose); }
.kanban-col-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; }
.kanban-count {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding-inline: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--muted-fg);
    line-height: 1.5;
}
.task-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    padding: 0.75rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.task-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); }
.task-title { font-size: 0.8125rem; font-weight: 700; }
.task-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.task-desc { font-size: 0.75rem; color: var(--muted-fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-meta { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-block-start: 0.25rem; }
.task-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-fg);
    font-size: 0.625rem;
    font-weight: 600;
}
.task-chip.overdue { background: var(--tone-rose-bg); color: var(--tone-rose); }
.task-chip.request { background: var(--tone-amber-bg); color: var(--tone-amber); }
.task-chip.from-thread { background: var(--tone-cyan-bg); color: var(--tone-cyan); }

/* ─────────────────────────── پیام‌ها (گفتگو) ─────────────────────────── */

.msg-layout { display: grid; gap: 1rem; }
.thread-list {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 34rem;
    overflow-y: auto;
    min-height: 0;
}
.thread-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.thread-item:hover { background: var(--row-hover); }
.thread-item.active { background: var(--primary-soft); }
.thread-item.active .thread-subject { color: var(--primary); }
.thread-subject { font-size: 0.8125rem; font-weight: 600; }
.thread-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.thread-preview { font-size: 0.75rem; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-pane {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 34rem;
    overflow: hidden;
}
.conv-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.conv-subject { font-size: 0.875rem; font-weight: 700; }
.conv-meta { font-size: 0.6875rem; color: var(--muted-fg); }
.msg-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
/* حباب کارمند: آغازگر (راست در RTL) با پس‌زمینهٔ اصلی */
.msg-row { display: flex; }
.msg-row.staff { justify-content: flex-start; }
.msg-row.customer { justify-content: flex-end; }
.msg-bubble { max-width: 78%; padding: 0.625rem 0.875rem; border-radius: 1.25rem; font-size: 0.8125rem; line-height: 1.9; }
.msg-bubble.staff { background: var(--primary); color: var(--primary-fg); border-start-start-radius: 0.375rem; }
.msg-bubble.customer { background: var(--muted); color: var(--fg); border-start-end-radius: 0.375rem; }
.msg-sender { font-size: 0.6875rem; opacity: 0.8; margin-block-end: 0.125rem; }
.msg-text { min-width: 0; }
.msg-time { font-size: 0.625rem; opacity: 0.7; margin-block-start: 0.25rem; }
.reply-form { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.75rem 1rem; border-top: 1px solid var(--border); flex-shrink: 0; }
.reply-form .textarea { flex: 1 1 auto; min-height: 2.375rem; }
.staff-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1rem 0.75rem; flex-shrink: 0; }

/* ─────────────────────────── ابزارهای ادمین — کارت‌های خاص ─────────────────────────── */

.block-card { display: flex; flex-direction: column; gap: 0.5rem; }
.dropzone {
    border: 2px dashed var(--border);
    border-radius: 1rem;
    padding: 2.25rem 1.25rem;
    text-align: center;
    color: var(--muted-fg);
    background: var(--card);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.dropzone:hover, .dropzone.drag, .dropzone.dragover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.dropzone .ic { width: 26px; height: 26px; margin-inline: auto; }
.kind-filter { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; background: var(--muted); border-radius: var(--radius); }
.seg-btn { padding: 0.4375rem 1rem; border-radius: 0.625rem; font-size: 0.8125rem; font-weight: 500; color: var(--muted-fg); transition: background-color 0.15s ease, color 0.15s ease; }
.seg-btn:hover { color: var(--fg); }
.seg-btn.active { background: var(--card); color: var(--fg); font-weight: 600; box-shadow: var(--shadow-sm); }
.media-grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.media-grid .media-card:hover { transform: none; }
.media-grid .media-card .thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; background: var(--muted); display: block; }
.media-name { font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-meta { font-size: 0.6875rem; color: var(--muted-fg); }
.media-actions { display: flex; gap: 0.25rem; margin-block-start: 0.375rem; }
.doc-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px dashed var(--border); }
.doc-row:last-child { border-bottom: none; }
.doc-tile {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--muted);
    color: var(--muted-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─────────────────────────── مدیریت FAQ و منو ─────────────────────────── */

.faq-admin-list { display: flex; flex-direction: column; gap: 0.625rem; }
.faq-admin-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.625rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem 0.875rem;
}
.faq-order-circle {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.faq-controls { display: flex; gap: 0.25rem; flex-shrink: 0; }
.faq-body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; }
.faq-footer {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    border-top: 1px dashed var(--border);
    padding-block-start: 0.5rem;
    margin-block-start: 0.125rem;
    font-size: 0.7188rem;
    color: var(--muted-fg);
}
.menu-groups { display: flex; flex-direction: column; gap: 1rem; }
.menu-group-card { display: flex; flex-direction: column; gap: 0.25rem; }
.menu-item-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--border); font-size: 0.8125rem; }
.menu-item-row:last-child { border-bottom: none; }
.url-chip {
    font-family: var(--font-mono);
    direction: ltr;
    font-size: 0.6875rem;
    background: var(--muted);
    color: var(--muted-fg);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.menu-count-pill {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
}

/* ─────────────────────────── نظرسنجی‌ها و نقش‌ها ─────────────────────────── */

.survey-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.875rem 1rem;
}
.survey-meta { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.survey-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.question-card { display: flex; flex-direction: column; gap: 0.625rem; }
.option-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.option-row:hover { border-color: var(--primary); background: var(--primary-soft); }
.roles-info-card { display: flex; flex-direction: column; gap: 0.625rem; }
.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--tone-teal-bg);
    color: var(--tone-teal);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ─────────────────────────── محصولات ادمین ─────────────────────────── */

.product-card { overflow: hidden; }
.product-head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1rem 0.25rem; }
.product-thumb {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius);
    background: var(--muted);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-summary { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.variant-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.product-card.expanded .variant-panel { max-height: 640px; }
.variant-table { width: 100%; font-size: 0.8125rem; margin-block: 0.5rem 0; }
.variant-table th, .variant-table td { padding: 0.5rem 1rem; border-top: 1px solid var(--border); text-align: start; }
.variant-table th { font-size: 0.7188rem; font-weight: 600; color: var(--muted-fg); background: var(--subtle); }
.qa-grid { display: grid; gap: 0.625rem; grid-template-columns: 1fr; }
.qa-btn {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-align: start;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem 0.875rem;
    font-size: 0.8438rem;
    font-weight: 600;
    transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.qa-btn:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.recent-card { padding: 0.5rem 1rem 0.75rem; }
.recent-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.8125rem;
    transition: color 0.15s ease;
}
.recent-link:last-child { border-bottom: none; }
.recent-link:hover { color: var(--primary); }
.recent-link .ic { color: var(--muted-fg); width: 15px; height: 15px; }
.footer-updated { font-size: 0.6875rem; color: var(--muted-fg); }
.recipient-picker { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.625rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.picker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 0.8125rem; }
.group-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 0.6875rem;
    font-weight: 600;
}

/* ─────────────────────────── بخش‌های پنل مشتری ─────────────────────────── */

.cta-card {
    background: linear-gradient(135deg, var(--primary-soft), var(--tone-emerald-bg));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.cta-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cta-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.cta-title { font-size: 0.875rem; font-weight: 700; }
.cta-sub { font-size: 0.7813rem; color: var(--muted-fg); }
.cta-arrow { color: var(--primary); flex-shrink: 0; }
.chip-filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip-filter {
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted-fg);
    font-size: 0.7813rem;
    font-weight: 500;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.chip-filter:hover { border-color: var(--primary); color: var(--primary); }
.chip-filter.selected { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); font-weight: 600; }
.order-card-m { padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.order-layout { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
.variant-row-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.875rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.qty-stepper { display: inline-flex; align-items: stretch; background: var(--card); border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; }
.stepper-btn {
    width: 2rem;
    height: 2.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-fg);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.stepper-btn:hover { background: var(--muted); color: var(--fg); }
.qty-value { min-width: 2.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: var(--tone-zinc-bg);
    color: var(--tone-zinc);
    font-size: 0.6875rem;
    font-weight: 600;
}
.summary-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.summary-empty { border: 1.5px dashed var(--border); border-radius: 0.625rem; padding: 1.25rem 0.75rem; text-align: center; font-size: 0.7813rem; color: var(--muted-fg); }
.summary-items { display: flex; flex-direction: column; }
.summary-item { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.375rem 0; border-bottom: 1px dashed var(--border); font-size: 0.8125rem; }
/* ساختار داخلی آیتم‌هایی که skin.js به‌صورت پویا می‌سازد */
.summary-item-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.summary-item-name { font-size: 0.8125rem; font-weight: 600; }
.summary-item-meta { font-size: 0.6875rem; color: var(--muted-fg); }
.summary-item-price { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.summary-total { display: flex; justify-content: space-between; gap: 0.75rem; padding-block-start: 0.5rem; font-size: 0.9375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.helper-note { background: var(--subtle); border: 1px solid var(--border); border-radius: 0.625rem; padding: 0.625rem 0.75rem; font-size: 0.75rem; color: var(--muted-fg); line-height: 1.9; }
.help-card { gap: 0.625rem; }
.help-bullets { display: flex; flex-direction: column; gap: 0.5rem; }
.help-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; line-height: 1.9; }
.help-item .ic { color: var(--tone-teal); flex-shrink: 0; margin-block-start: 0.3125rem; }
.survey-card-panel { gap: 0.75rem; }
.question-block { display: flex; flex-direction: column; gap: 0.625rem; padding-block: 0.75rem; border-bottom: 1px dashed var(--border); }
.question-block:last-child { border-bottom: none; }
.radio-row, .check-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.radio-row:hover, .check-row:hover { border-color: var(--primary); background: var(--primary-soft); }
.star-row { display: flex; align-items: center; gap: 0.125rem; }
.star-btn {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.5rem;
    color: var(--muted-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, transform 0.1s ease;
}
.star-btn:hover { color: var(--tone-amber); transform: scale(1.08); }
.star-btn.active { color: #f59e0b; }
.star-btn.active .ic { fill: #f59e0b; stroke: #f59e0b; }
.star-label { margin-inline-start: 0.5rem; font-size: 0.75rem; color: var(--muted-fg); }
/* اعلان‌های پنل */
.notif-page-list { display: flex; flex-direction: column; gap: 0.625rem; }
.notif-row-panel { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.875rem; }
.notif-tile {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--muted);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.notif-chip {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-fg);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.5;
}
/* خط زمانی وضعیت سفارش (۵ مرحله) */
.status-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; padding-block: 0.5rem; }
.timeline-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; min-width: 0; }
.step-circle {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--card);
    color: var(--muted-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.step-connector { position: absolute; top: 0.9375rem; inset-inline-start: calc(50% + 1.5rem); width: calc(100% - 3rem); height: 2px; background: var(--border); }
.timeline-step:last-child .step-connector { display: none; }
.timeline-step.done .step-circle { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.timeline-step.done .step-connector { background: var(--primary); }
.timeline-step.current .step-circle { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 5px var(--ring-soft); }
.timeline-step.future .step-circle { background: var(--muted); }
.step-label { font-size: 0.7188rem; color: var(--muted-fg); line-height: 1.6; }
.timeline-step.done .step-label, .timeline-step.current .step-label { color: var(--fg); font-weight: 600; }
.tracking-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.75rem;
    border-radius: 999px;
    background: var(--tone-teal-bg);
    color: var(--tone-teal);
    font-family: var(--font-mono);
    direction: ltr;
    font-size: 0.7188rem;
    font-weight: 600;
}
.invoice-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.invoice-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 0.375rem;
    background: var(--muted);
    border: 1px solid var(--border);
    color: var(--muted-fg);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}
.notes-box { background: var(--subtle); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.875rem 1rem; font-size: 0.8125rem; line-height: 2; }

/* ─────────────────────────── صفحهٔ کاتالوگ پوسته ─────────────────────────── */

.catalog-header { background: linear-gradient(135deg, #0d9488, #059669); color: #fff; padding: 3rem 0 2.5rem; }
.catalog-header h1 { font-size: 1.75rem; font-weight: 800; }
.catalog-header p { margin-block-start: 0.5rem; max-width: 40rem; font-size: 0.875rem; color: rgb(255 255 255 / 0.85); line-height: 2; }
.catalog-section-title { font-size: 1.125rem; font-weight: 800; margin-block: 2rem 1rem; }
.catalog-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.catalog-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.catalog-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); }
.catalog-behaviors { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.catalog-behaviors > * {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-fg);
    font-size: 0.6875rem;
    font-weight: 500;
}
.catalog-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    align-self: flex-start;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #0d9488, #059669);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgb(13 148 136 / 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.catalog-download:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgb(13 148 136 / 0.4); }
.catalog-download .ic { width: 18px; height: 18px; }

/* ─────────────────────────── رسپانسیو — نقاط شکست sm/md/lg/xl ─────────────────────────── */

/* مخفی‌سازی ستون‌های جدول و عناصر در عرض‌های کم */
@media (max-width: 639.98px) {
    .hide-sm { display: none !important; }
    /* دکمهٔ «ورود» هدر فقط ≥sm — مطابق hidden sm:inline-flex داینامیک */
    .header-actions .login-link { display: none; }
}
@media (max-width: 767.98px) {
    .hide-md { display: none !important; }
    .stat-value { font-size: 1.175rem; }
}
/* دکمهٔ بازگشت به فهرست گفتگوها فقط در موبایل معنا دارد */
[data-conv-back] { display: none; }
/* هیروی صفحهٔ اصلی/محصول: در موبایل تصویر بالا سپس متن (مطابق order-1/order-2 داینامیک) */
@media (max-width: 1023.98px) {
    .hero-grid .hero-media { order: -1; }
}
@media (max-width: 1023.98px) {
    .hide-lg { display: none !important; }
    .before-after { gap: 0.625rem; }
    /* پیام‌ها: در موبایل فقط فهرست یا فقط گفتگو (.show-conv توسط skin.js) */
    .msg-layout:not(.show-conv) .conv-pane { display: none; }
    .msg-layout.show-conv .thread-list { display: none; }
    .msg-layout.show-conv [data-conv-back] { display: inline-flex; }
}

/* ≥ sm (640px) */
@media (min-width: 640px) {
    .container { padding-inline: 1.5rem; }
    .container-narrow { padding-inline: 1.5rem; }
    .sec-md { padding-block: 4rem; }
    .sec-lg { padding-block: 5rem; }
    .sec-cta { padding-block: 4rem; }
    .hero { padding-block: 5rem; }
    /* py-16 → sm:py-20 = 80px */
    .cta-section { padding-block: 5rem; }
    /* text-sm → sm:text-base (16/36) */
    .cta-desc { font-size: 1rem; line-height: 2.25rem; }
    .cta-title { font-size: 1.875rem; }
    .cta-contact-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-hero { padding-block: 3.5rem; }
    .article-hero { padding-block: 4rem; }
    .hero-title { font-size: 2.25rem; }
    .hero-desc { font-size: 1rem; line-height: 2.25; }
    .media-card .card-title { font-size: 1.125rem; }
    .article-content, .rich-content { font-size: 1rem; }
    .trust-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .trust-item { font-size: 0.75rem; }
    .trust-item + .trust-item { border-inline-start: 1px solid var(--border); }
    .page-hero h1 { font-size: 1.875rem; }
    .article-hero h1 { font-size: 1.875rem; }
    .section-title { font-size: 1.875rem; }
    .section-desc { font-size: 1rem; }
    .cards-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cards-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-login-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .related-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: auto; }
}

/* ≥ md (768px) */
@media (min-width: 768px) {
    /* cards-grid-2 داینامیک = md:grid-cols-2 */
    .cards-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* مزایای بالینی داینامیک = md:grid-cols-3 */
    .cards-grid-3.md3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≥ lg (1024px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .cards-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .container { padding-inline: 2rem; }
    .container-narrow { padding-inline: 2rem; }
    .hero { padding-block: 6rem; }
    .hero-title.hero-title-sm { font-size: 2.25rem; }
    .cta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
    .hero-grid { gap: 3.5rem; }
    .hero-title { font-size: 3rem; line-height: 1.3; }
    .hero-media { max-width: none; }
    .article-hero h1 { font-size: 2.25rem; }
    .section-title { font-size: 2.25rem; }
    .main-nav { display: flex; }
    .mobile-menu-btn { display: none; }
    .header-bar-2 { display: block; }
    .cards-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* چرا آی‌سون: lg:grid-cols-2 lg:gap-8 */
    .compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
    /* مدل‌ها: lg:gap-8 */
    .cards-grid-2.g8 { gap: 2rem; }
    /* همکاری: lg:grid-cols-2 lg:gap-8 */
    .coop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
    .contact-grid { grid-template-columns: 2fr 3fr; }
    .article-body { grid-template-columns: minmax(0, 1fr) 320px; }
    .admin-sidebar { display: flex; }
    .admin-main { margin-inline-start: 16rem; }
    .admin-header { padding-inline: 1.5rem; }
    .admin-content { padding: 1.25rem 1.5rem; }
    .panel-sidebar { display: flex; }
    .panel-header { padding-inline: 1.5rem; }
    .panel-content { padding: 1.25rem 1.5rem 2rem; }
    .msg-layout { grid-template-columns: 21.25rem minmax(0, 1fr); }
    .msg-layout .thread-list, .msg-layout .conv-pane { max-height: calc(100vh - 11rem); }
    .order-layout { grid-template-columns: minmax(0, 1fr) 360px; }
    .order-layout > .summary-card { position: sticky; top: 4.75rem; }
    .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* وبلاگ/زخم‌ها/گزارش‌ها: lg:grid-cols-3 */
    .cards-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ≥ xl (1280px) */
@media (min-width: 1280px) {
    /* تلفن هدر داینامیک = hidden xl:flex */
    .phone-link { display: inline-flex; }
    .admin-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kanban { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cards-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─────────────────────────── دسترس‌پذیری — کاهش حرکت ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .reveal { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}

/* ─── مکمل: کارت‌های موبایل سفارش (پنل مشتری) ─── */
.order-cards-m
{
    display: grid;
    gap: 12px;
}

@media (min-width: 768px)
{
    .order-cards-m
    {
        display: none;
    }
}