/* کارگاه — استایلِ پایه (RTL). فازِ ۱: فقط اسکلتِ ظاهری. */

/*
 * سیستمِ طراحی (فازِ ۱۴ — بازطراحیِ ظاهری با الهام از «ازنو» / azno.space).
 * فقط ظاهر است؛ منطق/مسیر/داده تغییری نکرده.
 * آبیِ اصلی، سرمه‌ایِ عنوان‌ها، خاکستریِ متنِ فرعی، کهربایی برای ستاره‌ها،
 * گوشه‌های گرد و سایه‌های نرم به‌جای خطوطِ تیز.
 */
:root {
    --brand: #2563eb;          /* آبیِ اصلی */
    --brand-dark: #1d4ed8;
    --brand-soft: #eef4ff;     /* پس‌زمینه‌ی روشنِ آبی (چیپِ فعال/هاور) */
    --ink: #10203c;            /* سرمه‌ایِ عنوان‌ها */
    --muted: #64748b;          /* خاکستریِ متنِ فرعی */
    --bg: #f6f8fc;
    --surface: #ffffff;
    --border: #e8edf4;         /* خاکستریِ روشنِ حاشیه‌ی کارت */
    --star: #f5a623;           /* کهربایی — ستاره‌ها */
    --ok: #1e9e6a;
    --ok-bg: #e7f7ef;
    --err: #d64550;
    --err-bg: #fdeced;
    --info: #2563eb;
    --info-bg: #eef4ff;
    --radius: 16px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    --shadow: 0 6px 22px rgba(15, 35, 75, .06);
    --shadow-hover: 0 14px 34px rgba(15, 35, 75, .12);
    --container: 1120px;
}

* { box-sizing: border-box; }

/* فازِ ۳۲: شبکه‌ی ایمنیِ سراسری در برابرِ پن/اسکرولِ افقیِ ناخواسته — با
   اندازه‌گیریِ زنده در موبایل تاییدشد که انتخابِ یک دسته (باز/بستن) گاهی
   صفحه را چند ده پیکسل افقاً جابه‌جا می‌کرد (نه از سرریزِ واقعیِ محتوا،
   چون تکِ‌تکِ عناصر با اندازه‌گیریِ scroll-independent امن بودند — بیشتر
   شبیهِ رفتارِ داخلیِ مرورگر/ابزارِ تست بود). چون سایت RTL است و هیچ محتوایی
   عمداً نیازی به اسکرولِ افقی ندارد، overflow-x:hidden رویِ ریشه یک
   محافظِ کم‌ریسک و همیشه-درست است. */
html, body { margin: 0; padding: 0; overflow-x: hidden; }

body {
    font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.8;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 20px;
}

/* --- هدر --- */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 800;
    font-size: 20px;
}
.brand__mark {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 20px;
}

/* --- محتوای اصلی --- */
main.container {
    flex: 1 0 auto;
    padding-block: 40px;
}

/* --- Hero (تیترِ تایپوگرافیک، بدونِ بنر) --- */
.hero { text-align: center; padding: 20px 12px 8px; }
.hero__title { font-size: clamp(30px, 5vw, 46px); margin: 0 0 10px; color: var(--ink); font-weight: 800; letter-spacing: -.5px; }
.hero__subtitle { font-size: 17px; margin: 0 auto 8px; color: var(--muted); max-width: 560px; }
.hero__note { font-size: 14px; color: var(--muted); margin: 0; }
.hero__note a { color: var(--brand); text-decoration: none; font-weight: 700; }
.hero__note a:hover { color: var(--brand-dark); text-decoration: underline; }

/* --- Health check --- */
.health {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 14px;
}
.health__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.health--ok { background: var(--ok-bg); border-color: #bfe9d4; }
.health--ok .health__dot { background: var(--ok); }
.health--fail { background: var(--err-bg); border-color: #f6c9cd; }
.health--fail .health__dot { background: var(--err); }
.health__label { font-weight: 700; }

/* --- پیام‌های فلش --- */
.flash {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    border: 1px solid transparent;
    font-size: 14px;
}
.flash--success { background: var(--ok-bg); color: var(--ok); border-color: #bfe9d4; }
.flash--error { background: var(--err-bg); color: var(--err); border-color: #f6c9cd; }
.flash--info { background: var(--info-bg); color: var(--info); border-color: #c8dbfb; }

/* --- ناوبری هدر (دکمه‌های قرصی) --- */
.site-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nav-link {
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink);
    font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    font-family: inherit; transition: background .12s, border-color .12s, color .12s;
}
.nav-link:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.nav-link--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.nav-link--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.nav-link--btn { background: transparent; }
.nav-link__icon { font-size: 15px; line-height: 1; }
.nav-logout { margin: 0; }
.nav-wallet { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- کارتِ فرم (ورود/داشبورد) --- */
.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
    max-width: 460px;
    margin-inline: auto;
}
.auth-card__title { font-size: 24px; margin: 0 0 6px; color: var(--ink); }
.auth-card__sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.auth-card__foot { margin-top: 18px; text-align: center; font-size: 13px; }
.auth-card__foot a { color: var(--brand); text-decoration: none; font-weight: 700; }

.field-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.field-input {
    width: 100%; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: 10px; font: inherit; background: #fff;
}
.field-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.field-input--code { letter-spacing: .5em; text-align: center; font-size: 20px; font-weight: 700; }
.field-hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

.btn-primary {
    margin-top: 20px; width: 100%; padding: 13px; background: var(--brand); color: #fff;
    border: 0; border-radius: var(--radius-pill); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
    transition: background .12s, box-shadow .12s;
}
.btn-primary:hover { background: var(--brand-dark); box-shadow: 0 6px 18px rgba(37,99,235,.28); }
.btn-ghost {
    padding: 10px 18px; background: transparent; color: var(--err); border: 1px solid #f6c9cd;
    border-radius: var(--radius-pill); font: inherit; font-weight: 700; cursor: pointer;
}
.btn-ghost:hover { background: var(--err-bg); }
.mt-16 { margin-top: 16px; }

/* --- زوجِ کلید/مقدار (داشبورد) --- */
.kv { display: flex; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.kv:last-of-type { border-bottom: 0; }
.kv__key { font-weight: 700; color: var(--muted); min-width: 130px; }
.role-pill {
    display: inline-block; background: var(--info-bg); color: var(--info);
    border-radius: 999px; padding: 2px 12px; font-size: 13px; font-weight: 700; margin-inline-end: 6px;
}

/* --- زنگوله‌ی اعلان --- */
.nav-bell { position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); text-decoration: none; }
.nav-bell:hover { border-color: var(--brand); }
.nav-bell__icon { font-size: 18px; line-height: 1; }
.nav-bell__badge { position: absolute; top: -6px; inset-inline-start: -6px; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 999px; background: var(--err); color: #fff; font-size: 11px;
    font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* --- کارتِ فرمِ عریض (رزومه/اعلان) --- */
.auth-card--wide { max-width: 720px; }

/* --- نوارِ نقش --- */
.role-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.role-tab-form { margin: 0; }
.role-tab { padding: 10px 20px; border: 1px solid var(--border); background: var(--surface);
    border-radius: 999px; font: inherit; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; }
.role-tab:hover { border-color: var(--brand); color: var(--brand); }
.role-tab.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --- چیدمانِ داشبورد --- */
.dash-grid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } }

.profile-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 24px; text-align: center; }
.profile-card__avatar { width: 88px; height: 88px; margin: 0 auto 12px; border-radius: 50%;
    overflow: hidden; background: #eee; display: grid; place-items: center; }
.profile-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback { font-size: 36px; font-weight: 800; color: var(--brand); }
.profile-card__name { font-weight: 800; font-size: 18px; }
.profile-card__phone { color: var(--muted); font-size: 13px; margin-top: 4px; }
.profile-card__resume { margin: 14px 0; }
.profile-card__links { display: flex; flex-direction: column; gap: 8px; }

.badge { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: #fff3e0; color: #b76e00; }

.dash-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 28px; min-height: 200px; }
.section-title { font-size: 18px; margin: 0 0 18px; }
.empty-state { text-align: center; color: var(--muted); padding: 24px 0; }
.empty-state__hint { font-size: 13px; opacity: .85; }
.btn-primary--inline { display: inline-block; width: auto; text-decoration: none; padding: 10px 22px; margin-top: 12px; }

/* --- بازگشت به داشبورد --- */
.dash-back { margin: 0 0 12px; font-size: 13px; }
.dash-back a { color: var(--brand); text-decoration: none; font-weight: 700; }

/* --- ویرایشِ آواتار --- */
.avatar-edit { display: flex; justify-content: center; margin-bottom: 16px; }
.avatar-edit__preview { width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
    background: #eee; display: grid; place-items: center; border: 1px solid var(--border); }
.avatar-edit__preview img { width: 100%; height: 100%; object-fit: cover; }
textarea.field-input { resize: vertical; font-family: inherit; line-height: 1.8; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
.req { color: var(--err); }

/* --- وضعیتِ رزومه --- */
.resume-status { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 20px; }
.resume-status--ok { background: var(--ok-bg); border-color: #bfe9d4; }
.resume-status--warn { background: #fff3e0; border-color: #f2d9a8; }
.resume-checklist { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.resume-checklist .done { color: var(--ok); font-weight: 700; }
.resume-checklist .todo { color: var(--muted); }
.resume-updated { font-size: 12px; color: var(--muted); margin: 10px 0 0; }

/* --- فهرستِ اعلان‌ها --- */
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.notif-head .auth-card__title { margin: 0; }
.notif-list { list-style: none; padding: 0; margin: 0; }
.notif { display: flex; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid var(--border);
    border-radius: 12px; margin-bottom: 10px; }
.notif--unread { background: #f6f5ff; border-color: #ddd8fb; }
.notif--read { opacity: .8; }
.notif--important { border-inline-start: 4px solid var(--err); }
.notif__title { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif__body { color: var(--muted); font-size: 14px; margin-top: 4px; }
.notif__time { color: var(--muted); font-size: 12px; margin-top: 6px; }
.notif__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.notif .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; }

/* --- مدرس‌شدن: دو مسیر --- */
.badge--err { background: var(--err-bg); color: var(--err); }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
@media (max-width: 560px) { .paths { grid-template-columns: 1fr; } }
.path-card { border: 1px solid var(--border); border-radius: 14px; padding: 20px; text-align: center; background: #faf9ff; }
.path-card__title { margin: 0 0 8px; font-size: 17px; }
.path-card__price { font-size: 22px; font-weight: 800; color: var(--brand); margin-bottom: 8px; }
.path-card__desc { color: var(--muted); font-size: 13px; min-height: 48px; }
.btn-ghost--full { width: 100%; }
.pay-box { border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin: 16px 0; background: #faf9ff; }

/* فهرستِ پلن‌هایِ اشتراکِ قابلِ‌انتخاب (فازِ ۴۲) — رادیوهایِ ساده، بدونِ جاوااسکریپتِ جدید. */
.plan-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.plan-option { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.plan-option:hover { border-color: var(--brand); }
.plan-option input[type="radio"] { flex: 0 0 auto; }
.plan-option:has(input:checked) { border-color: var(--brand); background: #f4f7ff; }
.plan-option__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 1; }
.plan-option__name { font-weight: 700; }
.plan-option__price { color: var(--brand); font-weight: 800; }
.plan-option__duration { color: var(--muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .plan-option { transition: none; } }
.dash-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* --- فهرستِ کارگاه‌های مدرس --- */
.mw-list { list-style: none; padding: 0; margin: 0; }
.mw { display: flex; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid var(--border);
    border-radius: 12px; margin-bottom: 10px; }
.mw__title { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mw__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 13px; margin-top: 6px; }
.mw__reject { margin-top: 8px; color: var(--err); font-size: 13px; background: var(--err-bg);
    padding: 8px 12px; border-radius: 8px; }
.mw__actions { display: flex; align-items: center; }

/* --- ردیفِ جلسه در فرمِ ساخت (یک‌خطی: تاریخ+روزِ هفته+شروع+مدت+پایان) — هر فیلد
   دقیقاً به‌اندازه‌ی محتوایش عرض دارد (نه flex:1 که کل عرض را می‌گرفت)، تا همه
   در یک خط جا شوند. --- */
.session-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--border); }
.session-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.session-row .jfield { flex: 0 0 auto; min-width: 0; }
.session-row [data-jalali-date] { width: 128px; }
.session-row [data-jalali-time] { width: 76px; }
.session-row__wd { flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.session-row__end { flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.session-row__dirty { flex: 0 0 auto; padding: 2px 8px; font-size: 11px; }
/* .badge روی این عنصر display:inline-block می‌گذارد که هم‌ویژگی با قاعده‌ی
   مرورگر برایِ ویژگیِ hidden است — بدونِ این قاعده، عنصر با وجودِ hidden هم
   نمایش داده می‌شود (چون قاعده‌ی نویسنده بعد از قاعده‌ی UA می‌آید و برنده می‌شود). */
.session-row__dirty[hidden] { display: none; }
.session-remove { flex: 0 0 auto; padding: 6px 12px; }

/* --- فیلدِ عددیِ کوچک (تعداد/مدت به دقیقه) — نه full-width، فقط به‌اندازه‌ی چند رقم --- */
.field-input--num { flex: 0 0 auto; width: 56px; max-width: 56px; padding-inline: 6px; text-align: center; }

/* --- افزودنِ سریعِ جلسه‌هایِ تکرارشونده (فازِ ۲۹) --- */
.qadd { background: #faf9ff; border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin: 16px 0 22px; }
.qadd__title { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.qadd__sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.qadd__row { margin-bottom: 14px; }
.qadd__row:last-child { margin-bottom: 0; }
.qadd__weekdays { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.qadd__stopwrap { margin-top: 10px; }
.qadd__preview { font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px; margin: 14px 0; }
.qadd__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.qadd__confirm { margin-top: 12px; }
.qadd__confirm-actions { display: flex; gap: 8px; margin-top: 8px; }
.qadd .filter-chip { cursor: pointer; }

/* --- پیش‌نمایشِ کاورِ فضا --- */
.venue-cover-preview { height: 140px; border-radius: 12px; background-size: cover; background-position: center;
    border: 1px solid var(--border); margin: 8px 0; }

/* --- نظرها --- */
.review-avg { font-size: 14px; color: #f5a623; font-weight: 700; margin-inline-start: 8px; }
.review__date { color: var(--muted); font-size: 12px; margin-top: 4px; }
.review-form { background: #faf9ff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
/* هانی‌پاتِ ضدِ‌باتِ فرمِ نظر (فازِ ۴۷) — position:absolute + بیرون از صفحه، عمداً نه
   display:none/visibility:hidden/[hidden] (که برخی ربات‌هایِ ساده تشخیص می‌دهند و
   از پرکردنش صرف‌نظر می‌کنند)، تا برایِ یک انسانِ واقعی کاملاً نامرئی و
   غیرِقابلِ‌تب‌کردن بماند اما همچنان در DOM/چیدمانِ معمولی حاضر باشد. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rating-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; margin-bottom: 12px; }
.rating-star { cursor: pointer; }
.rating-star input { position: absolute; opacity: 0; }
.rating-star span { display: inline-block; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; font-weight: 700; color: var(--muted); background: #fff; }
.rating-star input:checked + span { background: #fff3e0; color: #b76e00; border-color: #f2d9a8; }

/* --- کلیک‌پذیریِ اعلان --- */
.notif__link { display: block; text-decoration: none; color: inherit; }
.notif__link:hover .notif__title { color: var(--brand); }

/* --- کنسولِ ادمین --- */
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.admin-nav__link { padding: 8px 16px; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: 14px; }
.admin-nav__link:hover { color: var(--brand); }
.admin-nav__link.is-active { background: var(--brand); color: #fff; }

/* زیرتب‌های در انتظار/بایگانی (فازِ ۱۷) */
.subtabs { display: flex; gap: 8px; margin: 14px 0 4px; }
.subtab { padding: 6px 14px; border-radius: var(--radius-pill); text-decoration: none; color: var(--muted); font-weight: 700; font-size: 13px; border: 1px solid var(--border); }
.subtab:hover { color: var(--brand); }
.subtab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
    padding: 20px; text-align: center; text-decoration: none; color: var(--ink); display: block; }
.stat-card--alert { border-color: #f2d9a8; background: #fff9ef; }
.stat-card__num { font-size: 30px; font-weight: 800; color: var(--brand); }
.stat-card__label { color: var(--muted); font-size: 13px; margin-top: 4px; }

.admin-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; min-width: 0; }
.admin-actions form { margin: 0; }
.reject-form { display: flex; gap: 6px; }
.reject-form .field-input { padding: 8px 10px; font-size: 13px; }
.admin-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 22px; margin-bottom: 24px; }

.table-wrap { overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; }
.fin-table th, .fin-table td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--border); font-size: 14px; }
.fin-table thead th { background: #faf9ff; font-weight: 800; }
.fin-table tfoot th { background: #f4f2ff; font-weight: 800; }

/* --- بلیت --- */
.ticket { max-width: 620px; margin-inline: auto; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.ticket__head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px dashed var(--border);
    padding-bottom: 14px; margin-bottom: 18px; }
.ticket__brand { font-weight: 800; color: var(--brand); font-size: 20px; }
.ticket__label { color: var(--muted); font-size: 13px; }
.ticket__title { font-size: 22px; margin: 0 0 18px; }
.ticket__grid { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.ticket__info { flex: 1 1 260px; }
.ticket__sessions { margin-top: 12px; }
.ticket__qr { flex: 0 0 auto; text-align: center; }
.ticket__qr svg { width: 200px; height: 200px; border: 1px solid var(--border); border-radius: 8px; }
.ticket__code { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* --- roster --- */
.roster { margin: 0; padding-inline-start: 22px; }
.roster__item { padding: 6px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .5rem; }
.roster__item a { color: inherit; text-decoration: none; }
.roster__item a:hover { text-decoration: underline; }
.roster__name { flex: 1 1 auto; }
.roster__phone { color: var(--muted); font-size: 13px; }
.roster__amount { color: var(--ink); font-weight: 600; font-size: 13px; margin-inline-start: .5rem; }
.roster-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.btn-ghost--sm { padding: 6px 12px; font-size: 13px; }
.hub-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* اشتراک‌گذاریِ کارگاه (فازِ ۱۷) */
.share { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.share__qr svg { width: 140px; height: 140px; border: 1px solid var(--border); border-radius: 10px; background:#fff; }
.share__body { flex: 1 1 260px; }
.share__row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.share__row .field-input { flex: 1 1 auto; }
.roster__item:last-child { border-bottom: 0; }

/* --- ریسپانسیو: چیدمانِ فهرست‌ها روی موبایل --- */
@media (max-width: 560px) {
    .mw { flex-direction: column; align-items: stretch; }
    .mw__actions, .admin-actions { align-items: stretch; min-width: 0; }
    .admin-actions { flex-direction: column; }
    .reject-form { flex-wrap: wrap; }
    .notif { flex-direction: column; }
    .notif__actions { align-items: stretch; }
    .ticket__grid { flex-direction: column; }
    .ticket__qr { align-self: center; }
    .admin-nav { overflow-x: auto; flex-wrap: nowrap; }
    .admin-nav__link { white-space: nowrap; }
    .filters__row { flex-direction: column; }
    .qadd__actions { flex-direction: column; align-items: stretch; }
}

/* --- سرِ صفحه‌ی داخلی --- */
.page-head { margin-bottom: 20px; text-align: center; }
.page-head__title { font-size: clamp(24px, 4vw, 34px); margin: 0 0 6px; font-weight: 800; color: var(--ink); }
.page-head__sub { color: var(--muted); margin: 0; font-size: 15px; }
.page-head__sub a { color: var(--brand); text-decoration: none; font-weight: 700; }

/* --- نوارِ جستجو (کانتینرِ قرصیِ واحد) --- */
.searchbar { display: flex; align-items: stretch; gap: 8px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow);
    padding: 8px; margin: 0 auto 18px; max-width: 760px; }
.searchbar__field { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.searchbar__field .search-icon { color: var(--muted); flex: none; }
.searchbar__field input { border: 0; outline: none; width: 100%; font: inherit; background: transparent; color: var(--ink); }
.searchbar__chip { flex: 0 0 auto; display: flex; align-items: center; }
.searchbar__chip select { border: 0; outline: none; background: var(--brand-soft); color: var(--brand);
    font: inherit; font-weight: 700; padding: 10px 16px; border-radius: var(--radius-pill); cursor: pointer; }
.searchbar__go { flex: 0 0 auto; border: 0; background: var(--brand); color: #fff; font: inherit; font-weight: 700;
    padding: 0 22px; border-radius: var(--radius-pill); cursor: pointer; }
.searchbar__go:hover { background: var(--brand-dark); }
@media (max-width: 560px) { .searchbar { flex-wrap: wrap; border-radius: var(--radius); }
    .searchbar__field { flex-basis: 100%; padding: 10px 14px; } .searchbar__chip, .searchbar__go { flex: 1 1 auto; }
    .searchbar__chip select, .searchbar__go { width: 100%; justify-content: center; padding: 12px; } }

/* --- چیپ‌های فیلتر --- */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 14px; font-weight: 700;
    padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.filter-chip:hover { border-color: var(--brand); color: var(--brand); }
.filter-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- سرِ بخش (عنوان + مشاهده‌ی همه) --- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 16px; }
.section-head__title { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0; }
.section-head__all { color: var(--brand); text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; }

/* --- گریدِ کارت‌ها --- */
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }

.wcard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none;
    color: var(--ink); transition: transform .14s, box-shadow .14s; }
.wcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
/* لینکِ کششیِ عنوان: کلِ کارت را قابلِ کلیک به صفحه‌ی کارگاه می‌کند (بدونِ <a> تودرتو). */
.wcard__link { color: inherit; text-decoration: none; }
.wcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wcard:hover .wcard__link { color: var(--brand); }
/* لینک‌های نامِ مدرس/فضا: مستقل و بالای لینکِ کششی. */
.wcard__namelink { position: relative; z-index: 2; color: inherit; font-weight: 700; text-decoration: none; }
.wcard__namelink:hover { color: var(--brand); text-decoration: underline; }
.wcard__cover { height: 150px; background-size: cover; background-position: center; position: relative; }
.wcard__cover--ph, .ws__cover--ph { background-image: linear-gradient(135deg, #2563eb 0%, #7aa2f7 100%); }
.wcard__badge { position: absolute; top: 12px; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill); }
.wcard__badge--cat { inset-inline-start: 12px; background: rgba(255,255,255,.94); color: var(--brand); }
.wcard__badge--seats { inset-inline-end: 12px; background: rgba(16,32,60,.72); color: #fff; }
.wcard__badge--full { background: rgba(214,69,80,.92); color: #fff; }
.wcard__badge--done { background: rgba(16,32,60,.72); color: #fff; }
.wcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.wcard__title { font-size: 17px; margin: 0; font-weight: 800; color: var(--ink); }
.wcard__subtitle { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.wcard__rating { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 700; }
.wcard__rating .star { color: var(--star); }
.wcard__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 12px; }
.wcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.wcard__price { font-weight: 800; color: var(--ink); font-size: 17px; }
.wcard__price-unit { font-size: 12px; color: var(--muted); font-weight: 600; }
.wcard__cta { color: var(--brand); font-weight: 700; font-size: 14px; }

/* --- جزئیاتِ کارگاه/فضا --- */
.ws { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden; }
.ws__cover { height: 240px; background-size: cover; background-position: center; position: relative; }
.ws__grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding: 28px; }
@media (max-width: 720px) { .ws__grid { grid-template-columns: 1fr; } }
.ws__title { font-size: clamp(22px, 3.5vw, 28px); margin: 0 0 12px; font-weight: 800; color: var(--ink); }
.ws__summary { color: #334155; line-height: 2; }
.ws__side { background: var(--brand-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; align-self: start; }
.ws__price { font-size: 26px; font-weight: 800; color: var(--brand); text-align: center; margin-bottom: 14px; }
.ws__facts { margin-top: 16px; }
.ws__facts a { color: var(--brand); text-decoration: none; }

.session-list, .review-list { list-style: none; padding: 0; margin: 0 0 8px; }
.session { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 14px; }
.review { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow); }
.review__head { display: flex; justify-content: space-between; gap: 8px; }
.review__stars { color: var(--star); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--brand-soft); color: var(--brand); border-radius: var(--radius-pill); padding: 5px 14px; font-size: 13px; font-weight: 700; }

/* --- دکمه‌ی شناورِ سراسری (FAB) --- */
.fab { position: fixed; inset-block-end: 22px; inset-inline-start: 22px; z-index: 30;
    display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff;
    text-decoration: none; font-weight: 700; font-size: 14px; padding: 12px 20px;
    border-radius: var(--radius-pill); box-shadow: 0 10px 26px rgba(37,99,235,.4); }
.fab:hover { background: var(--brand-dark); }

/* --- نمای عمومیِ مدرس --- */
.profile-hero { display: flex; gap: 20px; align-items: center; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; margin-bottom: 24px; flex-wrap: wrap; }
.profile-hero__avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: #eee;
    display: grid; place-items: center; flex: none; }
.profile-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero__name { font-size: 24px; margin: 0 0 8px; display: inline-block; margin-inline-end: 10px; }
.profile-hero__bio { color: #444; line-height: 2; margin: 12px 0 0; }

/* --- تعرفه --- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 20px; }
.pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 28px; text-align: center; }
.pricing-card__num { font-size: 34px; font-weight: 800; color: var(--brand); }
.pricing-card__label { font-weight: 700; margin: 6px 0; }
.pricing-card__desc { color: var(--muted); font-size: 14px; margin: 0; }

/* --- متنِ صفحاتِ ثابت --- */
.prose { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 28px; line-height: 2.1; max-width: 820px; }
.prose p { margin: 0 0 14px; }
.prose .section-title { font-size: 17px; margin: 20px 0 8px; }
.contact-list { margin: 16px 0; }
.faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--shadow); }
.faq__q { font-weight: 700; cursor: pointer; }
.faq__a { color: #444; margin: 10px 0 0; line-height: 2; }

/* --- ناوبریِ فوتر --- */
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-bottom: 12px; }
.footer-nav a { color: var(--muted); text-decoration: none; font-size: 13px; }
.footer-nav a:hover { color: var(--brand); }
.footer-copy { margin: 0; }

/* --- پروفایلِ عمومی (فازِ ۱۶) --- */
.profile-hero__rating { color: var(--star); font-weight: 700; margin-inline-start: .5rem; }
.profile-hero__rating small { color: var(--muted); font-weight: 400; }
.profile-hero__headline { margin: .5rem 0 0; color: var(--muted); }
.profile-resume { margin-top: 1.5rem; }
.profile-resume__bio { margin: 0 0 1rem; line-height: 1.9; }
.profile-resume__row { margin: .6rem 0; }
.profile-resume__list { margin: .35rem 0 0; padding-inline-start: 1.2rem; }
.profile-resume__list li { margin: .2rem 0; }
.attended-list { display: flex; flex-direction: column; gap: .6rem; }
.attended-item { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .8rem 1rem; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; }
.attended-item:hover { box-shadow: var(--shadow); }
.attended-item__title { font-weight: 600; color: var(--ink); }
.attended-item__by { color: var(--muted); margin-inline-start: auto; }

/* --- آواتار (تصویر یا حروفِ اولِ تولیدی) --- */
.avatar-img, .avatar-svg { border-radius: 50%; object-fit: cover; vertical-align: middle; display: inline-block; flex: none; }
.nav-link__avatar { display: inline-flex; margin-inline-end: .4rem; }
.wcard__by { display: inline-flex; align-items: center; gap: .3rem; }

/* حالتِ در حالِ بارگذاریِ ناوبریِ قطعه‌ای (فازِ ۱۸) — بازخوردِ ظریف، بدونِ فلاش. */
#app-content.is-loading { opacity: .55; transition: opacity .12s ease; pointer-events: none; }
.review__author { display: inline-flex; align-items: center; gap: .5rem; }
.review__author a { color: inherit; text-decoration: none; }
.review__author a:hover { text-decoration: underline; }

/* --- فوتنوتِ حساب‌های تست (فقط محیطِ توسعه) --- */
.dev-accounts { max-width: 460px; margin: 18px auto 0; padding: 14px 16px; border: 1px dashed #b9c4d6;
    border-radius: var(--radius-sm); background: #f2f5fa; color: var(--muted); font-size: 12.5px; }
.dev-accounts__head { font-weight: 800; color: #64748b; margin-bottom: 8px; }
.dev-accounts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dev-accounts__phone { font-weight: 700; color: #334155; }
.dev-accounts__foot { margin-top: 8px; font-size: 11.5px; opacity: .85; }

/* --- فوتر --- */
.site-footer {
    flex: none;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-block: 20px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* =====================================================================
   فازِ ۱۹ — منو/پاپ‌اور/مودال، حرکتِ نرم، و بازطراحیِ داشبورد
   ===================================================================== */

/* --- منوی کشویی (⋮) و پاپ‌اور --- */
.menu { position: relative; display: inline-block; }
.menu__btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); border-radius: var(--radius-pill);
    cursor: pointer; font-size: 18px; line-height: 1; transition: background .12s, border-color .12s, color .12s; }
.menu__btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.menu__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 40;
    min-width: 190px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-hover); padding: 6px;
    opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top; pointer-events: none;
    transition: opacity .16s ease, transform .16s ease; }
.menu.is-open > .menu__panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.menu__item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start;
    padding: 9px 12px; border: 0; background: transparent; border-radius: 10px; cursor: pointer;
    color: var(--ink); font: inherit; text-decoration: none; transition: background .12s; }
.menu__item:hover { background: var(--brand-soft); }
.menu__item--danger { color: var(--err); }
.menu__item--danger:hover { background: var(--err-bg); }
.menu__sep { height: 1px; background: var(--border); margin: 5px 4px; }
.menu__form { margin: 0; }
.menu__form .menu__item { min-width: 0; }

/* پاپ‌اورِ اعلان‌ها */
.menu__panel--popover { min-width: 340px; max-width: 92vw; padding: 0; }
.popover__msg { padding: 22px; text-align: center; color: var(--muted); font-size: 13px; }
.popover__head { display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border); }
.popover__head strong { font-size: 14px; color: var(--ink); }
.popover__list { max-height: 360px; overflow-y: auto; }
.popover__item { display: block; padding: 11px 14px; border-bottom: 1px solid var(--border);
    color: inherit; text-decoration: none; transition: background .12s; }
.popover__item:last-child { border-bottom: 0; }
.popover__item:hover { background: var(--brand-soft); }
.popover__item--unread { background: #f7faff; }
.popover__row { display: flex; align-items: center; gap: 7px; }
.popover__ttl { font-weight: 700; font-size: 13px; color: var(--ink); }
.popover__body { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.popover__time { color: var(--muted); font-size: 11px; margin-top: 3px; }
.popover__foot { padding: 10px 14px; text-align: center; border-top: 1px solid var(--border); }
.popover__foot a { color: var(--brand); font-weight: 700; font-size: 13px; text-decoration: none; }
.popover__empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13px; }

/* --- مودال --- */
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center;
    justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15,32,60,.45); opacity: 0;
    transition: opacity .18s ease; }
.modal__box { position: relative; z-index: 1; width: 100%; max-width: 440px; background: var(--surface);
    border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 24px;
    opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .18s ease, transform .18s ease; }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__box { opacity: 1; transform: translateY(0) scale(1); }
.modal__title { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.modal__msg { margin: 0 0 18px; color: var(--muted); line-height: 1.8; }
.modal__actions { display: flex; gap: 10px; justify-content: flex-start; margin-top: 18px; }
.btn-danger { padding: 10px 20px; border: 0; border-radius: var(--radius-pill); background: var(--err);
    color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background .12s, transform .12s; }
.btn-danger:hover { background: #be3742; }

/* --- چیپِ لینکِ نامِ مدرس/فضا روی کارت (آیتمِ ۶) --- */
.link-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px;
    border: 1px solid var(--border); background: var(--brand-soft); border-radius: var(--radius-pill);
    color: var(--ink); font-size: 12px; font-weight: 700; text-decoration: none; line-height: 1.6;
    position: relative; z-index: 2; transition: background .13s, border-color .13s, color .13s; }
.link-chip:hover { background: #dfeaff; border-color: var(--brand); color: var(--brand-dark); }
.link-chip__ic { font-size: 12px; line-height: 1; }
.link-chip .avatar-svg, .link-chip .avatar-img { margin-inline-end: 1px; }
.link-chip--static { background: transparent; border-color: transparent; color: var(--muted); font-weight: 600; cursor: default; }
.link-chip--static:hover { background: transparent; border-color: transparent; color: var(--muted); }
.wcard__date { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; }
.wcard__meta { align-items: center; }

/* --- بازطراحیِ داشبورد (آیتم‌های ۳/۴/۵) --- */
.dash { display: flex; flex-direction: column; gap: 20px; }
/* پوسته‌ی ماندگارِ داشبورد (فازِ ۲۰) — روی همه‌ی صفحه‌های /dashboard ثابت می‌ماند. */
.dash-shell { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.dash-hero { display: flex; align-items: center; gap: 16px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.dash-hero__id { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.dash-hero__id:hover .dash-hero__name { color: var(--brand); }
.dash-hero__meta { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dash-hero__name { margin: 0; font-size: 21px; color: var(--ink); font-weight: 800; }
.dash-hero__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.role-chip { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--radius-pill);
    background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; font-weight: 700; }

.role-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat-pill { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; transition: box-shadow .13s, transform .13s; }
.stat-pill:hover { box-shadow: var(--shadow); }
.stat-pill__num { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.stat-pill__label { font-size: 12px; color: var(--muted); }

.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.qa { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-weight: 700;
    font-size: 14px; text-decoration: none; cursor: pointer; transition: background .13s, border-color .13s, box-shadow .13s, transform .13s; }
.qa:hover { background: var(--brand-soft); border-color: var(--brand); box-shadow: var(--shadow); }
.qa__ic { font-size: 16px; line-height: 1; }
.qa--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.qa--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.qa--muted { color: var(--muted); }
/* تبِ کنشِ سریعِ بخشِ جاری (فازِ ۲۰) */
.qa.is-active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); box-shadow: inset 0 0 0 1px var(--brand); }
.qa--primary.is-active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; box-shadow: none; }
.qa--muted.is-active { color: var(--brand-dark); }
.dash-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px 22px; }

/* نمای فقط‌خواندنیِ رزومه (آیتمِ ۵) */
.resume-view__group { margin: 14px 0; }
.resume-view__group h3 { font-size: 14px; color: var(--muted); margin: 0 0 6px; font-weight: 700; }
.resume-view__group p { margin: 0; line-height: 1.9; }
.resume-view__chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- بازخوردِ هاورِ عمومی (حرکتِ نرم) --- */
.btn-primary, .nav-link, .btn-ghost, .filter-chip, .wcard, .stat-card {
    transition: background .13s ease, border-color .13s ease, box-shadow .13s ease, color .13s ease, transform .13s ease; }

/* --- احترام به prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
    .menu__panel, .modal__box, .modal__backdrop { transition: none !important; }
    .wcard:hover, .qa:hover, .stat-pill:hover { transform: none !important; }
}

@media (max-width: 560px) {
    .dash-hero { flex-direction: column; align-items: flex-start; text-align: start; }
    .menu__panel--popover { min-width: 280px; }
    .modal__actions { flex-direction: column-reverse; }
    .modal__actions > * { width: 100%; }
}

/* =====================================================================
   فازِ ۲۱ — داشبورد: ریلِ عمودیِ تب (سمتِ راستِ RTL)
   ===================================================================== */
.dash2 { display: grid; gap: 20px; align-items: start;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-areas: "top top" "rail content"; }
.dash2__top { grid-area: top; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; }
.dash2__idbar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash2__idmeta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dash2__name { font-size: 18px; font-weight: 800; color: var(--ink); }
.dash2__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dash2__cta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.dash2__rail { grid-area: rail; display: flex; flex-direction: column; gap: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 10px; position: sticky; top: 84px; }
.dash2__tab { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
    text-decoration: none; color: var(--ink); font-weight: 700; font-size: 14px;
    transition: background .13s, color .13s; }
.dash2__tab:hover { background: var(--brand-soft); color: var(--brand-dark); }
.dash2__tab.is-active { background: var(--brand); color: #fff; }
.dash2__tab-ic { font-size: 17px; line-height: 1; width: 22px; text-align: center; }

.dash2__content { grid-area: content; min-width: 0; }
/* کارتِ محتوا تمام‌عرضِ ناحیه — override برای auth-cardهای قدیمی داخلِ محتوا */
.dash2__content .auth-card { max-width: none; margin: 0; }
.dash2-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 22px 24px; }
.dash2-panel__title { font-size: 22px; margin: 0 0 4px; color: var(--ink); font-weight: 800; }

/* دکمه‌های قرصیِ نوارِ بالا */
.btn-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit;
    font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer;
    transition: background .13s, border-color .13s, color .13s, box-shadow .13s; }
.btn-pill:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.btn-pill--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-pill--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-pill--ghost { color: var(--muted); }

/* گریدِ خلاصه‌ی فعالیت */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 14px; }
.summary-card { background: var(--brand-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; transition: box-shadow .13s, transform .13s; }
.summary-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.summary-card__ic { font-size: 20px; line-height: 1; }
.summary-card__num { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.summary-card__label { font-size: 12px; color: var(--muted); }

/* علایق (چک‌باکس‌های چیپی) */
.interests-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.interest-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 700;
    transition: background .12s, border-color .12s; }
.interest-chip:hover { border-color: var(--brand); }
.interest-chip:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.interest-chip input { accent-color: var(--brand); }

/* دکمه‌های placeholderِ ارتقای نقش روی hero خانه (فازِ ۲۱، بخشِ ۳) */
.hero-upgrade { position: absolute; inset-inline-end: 14px; top: 14px; display: flex; flex-direction: column; gap: 8px;
    opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.hero { position: relative; }
.hero:hover .hero-upgrade, .hero:focus-within .hero-upgrade { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hero-upgrade__btn { border: 1px solid var(--brand); background: var(--surface); color: var(--brand-dark);
    border-radius: var(--radius-pill); padding: 8px 16px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
    box-shadow: var(--shadow); transition: background .13s, color .13s; }
.hero-upgrade__btn:hover { background: var(--brand); color: #fff; }

@media (max-width: 820px) {
    .dash2 { grid-template-columns: 1fr; grid-template-areas: "top" "rail" "content"; }
    .dash2__rail { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
    .dash2__tab { white-space: nowrap; }
    .hero-upgrade { opacity: 1; transform: none; pointer-events: auto; position: static; flex-direction: row;
        justify-content: center; margin-top: 12px; }
}

/* =====================================================================
   فازِ ۲۲ — گوشه‌ی ثابتِ ارتقای نقش (جایگزینِ .fab / .hero-upgrade)
   ===================================================================== */
.role-fab { position: fixed; inset-inline-start: 20px; bottom: 20px; z-index: 30;
    display: flex; flex-direction: column; gap: 8px; }
.role-fab__btn { display: inline-block; text-decoration: none; border: 1px solid var(--brand);
    background: var(--brand); color: #fff;
    border-radius: var(--radius-pill); padding: 11px 20px; font: inherit; font-weight: 700;
    font-size: 14px; cursor: pointer; box-shadow: var(--shadow-hover);
    transition: background .13s, transform .13s; }
.role-fab__btn:hover { background: var(--brand-dark); transform: translateY(-1px); }
/* بازخوردِ گزارش‌شده — «دو دکمه‌ی پایین پشتشان را هاید می‌کنند»: چون
   .role-fab دائم position:fixed است، همیشه رویِ هرچه در همان نقطه‌ی *صفحه*
   باشد می‌نشیند — نه فقط پایینِ صفحه، بلکه هرچه، هنگامِ اسکرول، از زیرِ
   همان نقطه‌ی ثابتِ صفحه‌نمایش رد شود. دو تلاشِ اول (margin روی جای‌نگه‌دار،
   بعد padding-bottom روی کلِ main) هیچ‌کدام کافی نبود — با اندازه‌گیریِ
   زنده تاییدشد: کارت‌هایِ واقعیِ کارگاه (ارتفاعِ متغیر) هرجایِ صفحه که
   باشند، وقتی کاربر تا آن‌جا اسکرول کند، دوباره زیرِ fabِ ثابت می‌افتند —
   ریشه‌ی مشکل خودِ position:fixed است، نه کمبودِ فاصله در یک نقطه‌ی خاص.
   رفعِ واقعی: در موبایل، .role-fab اصلاً fixed نیست — بخشی از جریانِ عادیِ
   صفحه می‌شود (همان‌جا که در HTML هست: انتهایِ صفحه‌ی خانه، بعدِ نقشه)، پس
   هیچ‌وقت رویِ چیزِ دیگری نمی‌نشیند. */
@media (max-width: 640px) {
    .role-fab { position: static; margin: 28px auto 0; width: fit-content; }
}

/* چیپ‌های علایق روی پروفایلِ عمومی + بخش‌بندیِ در حالِ برگزاری/تمام‌شده (فازِ ۲۲) */
.profile-hero__interests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* نمای فقط‌خواندنیِ پروفایل (فازِ ۲۲، بخشِ ۶) */
.pview__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; }
.pview__item { background: var(--brand-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; }
.pview__k { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.pview__v { font-size: 15px; font-weight: 700; color: var(--ink); }
.pview__chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* فرمِ تکمیلِ پروفایل داخلِ مودالِ ثبت‌نام (فازِ ۲۲، بخشِ ۳) */
#profile-modal .modal__box { max-width: 560px; }
#profile-modal .interests-grid { max-height: 180px; overflow-y: auto; }

/* مودالِ «ارتقایِ حساب» (فازِ ۳۳) — پهن‌تر، چون شاملِ کارتِ انتخابِ نقش + فرم است */
#upgrade-modal .modal__box { max-width: 640px; max-height: 88vh; overflow-y: auto; }

/* =====================================================================
   فازِ ۲۴ — پیکرِ شمسی (تاریخ/ساعت)، آرشیوِ کارگاه، تقویمِ جلسه‌ها
   ===================================================================== */

/* --- فیلدِ نمایشیِ پیکر (readonly) + پاپ‌آپِ مشترک --- */
.jfield { position: relative; }
.jfield__display { cursor: pointer; background: #fff; }
.jfield__display:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.jpop { position: absolute; z-index: 50; top: calc(100% + 6px); inset-inline-start: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover); padding: 12px; max-width: min(300px, 90vw); }

/* --- تقویمِ تاریخ --- */
.jcal { width: 288px; max-width: 90vw; }
.jcal__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.jcal__nav { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-pill);
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--brand); font-weight: 700; flex: none; font-size: 15px; }
.jcal__nav:hover { background: var(--brand-soft); border-color: var(--brand); }
.jcal__sels { display: flex; gap: 4px; flex: 1; min-width: 0; }
.jcal__sel { flex: 1; min-width: 0; padding: 6px 4px; border: 1px solid var(--border); border-radius: 8px;
    font: inherit; font-size: 13px; background: #fff; color: var(--ink); }
.jcal__dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px;
    color: var(--muted); margin-bottom: 5px; }
.jcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jcal__day { border: 0; background: transparent; aspect-ratio: 1/1; border-radius: 8px; font: inherit;
    font-size: 13px; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.jcal__day:hover { background: var(--brand-soft); }
.jcal__day--empty { visibility: hidden; cursor: default; }
.jcal__day--today { box-shadow: inset 0 0 0 1px var(--brand); font-weight: 700; }
.jcal__day--selected { background: var(--brand); color: #fff; font-weight: 700; }
.jcal__day--selected:hover { background: var(--brand-dark); }

/* --- پیکرِ ساعت --- */
.jtimepop { width: 180px; display: flex; gap: 8px; }
.jtimepop__col { flex: 1; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.jtimepop__item { border: 0; background: transparent; padding: 7px 0; border-radius: 8px; font: inherit;
    font-size: 14px; color: var(--ink); cursor: pointer; text-align: center; }
.jtimepop__item:hover { background: var(--brand-soft); }
.jtimepop__item.is-sel { background: var(--brand); color: #fff; font-weight: 700; }

/* --- انتخابِ موضوع با جستجو (فازِ ۲۶) — روی همین selectِ سرورساخته --- */
.tfield { position: relative; }
.tfield__native { display: none; } /* فقط پس از ارتقایِ جاوااسکریپت مخفی می‌شود؛ همچنان فیلدِ واقعیِ فرم است */
.tfield__display { cursor: text; background: #fff; }
.tfield__display:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.tfield__panel { position: absolute; z-index: 50; top: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover); padding: 6px; max-height: 260px; overflow-y: auto; }
.tfield__item { display: block; width: 100%; text-align: start; border: 0; background: transparent;
    padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.tfield__item:hover { background: var(--brand-soft); }
.tfield__item.is-sel { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.tfield__empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }

@media (max-width: 560px) {
    .share__row { flex-wrap: wrap; }
}

/* --- تقویمِ فشرده‌ی جلسه‌ها روی صفحه‌ی عمومیِ کارگاه (فازِ ۲۴، بخشِ ۷) --- */
.scal { max-width: 380px; margin: 0 0 10px; }
.scal__radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.scal__page { display: none; }
.scal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.scal__title { font-weight: 700; font-size: 15px; color: var(--ink); }
.scal__nav { font-size: 12px; color: var(--brand); font-weight: 700; cursor: pointer; padding: 5px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); user-select: none; }
.scal__nav:hover { background: var(--brand-soft); border-color: var(--brand); }
.scal__nav--ph { visibility: hidden; padding: 5px 12px; border: 1px solid transparent; }
.scal__dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px;
    color: var(--muted); margin-bottom: 4px; }
.scal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.scal__cell { aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 8px; font-size: 13px; color: var(--muted); line-height: 1.15; }
.scal__cell--empty { visibility: hidden; }
.scal__cell--session { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.scal__cell--edge { background: var(--brand); color: #fff; }
.scal__num { line-height: 1.1; }
.scal__time { font-size: 10px; line-height: 1.2; opacity: .9; }

/* تعویضِ صفحه‌ی ماه با رادیوهایِ پنهان (بدونِ جاوااسکریپت) — تا ۲۴ ماهِ متمایز،
   بیش از کافی برایِ هر کارگاهِ واقعی. */
#scal-r0:checked ~ .scal__pages #scal-p0,
#scal-r1:checked ~ .scal__pages #scal-p1,
#scal-r2:checked ~ .scal__pages #scal-p2,
#scal-r3:checked ~ .scal__pages #scal-p3,
#scal-r4:checked ~ .scal__pages #scal-p4,
#scal-r5:checked ~ .scal__pages #scal-p5,
#scal-r6:checked ~ .scal__pages #scal-p6,
#scal-r7:checked ~ .scal__pages #scal-p7,
#scal-r8:checked ~ .scal__pages #scal-p8,
#scal-r9:checked ~ .scal__pages #scal-p9,
#scal-r10:checked ~ .scal__pages #scal-p10,
#scal-r11:checked ~ .scal__pages #scal-p11,
#scal-r12:checked ~ .scal__pages #scal-p12,
#scal-r13:checked ~ .scal__pages #scal-p13,
#scal-r14:checked ~ .scal__pages #scal-p14,
#scal-r15:checked ~ .scal__pages #scal-p15,
#scal-r16:checked ~ .scal__pages #scal-p16,
#scal-r17:checked ~ .scal__pages #scal-p17,
#scal-r18:checked ~ .scal__pages #scal-p18,
#scal-r19:checked ~ .scal__pages #scal-p19,
#scal-r20:checked ~ .scal__pages #scal-p20,
#scal-r21:checked ~ .scal__pages #scal-p21,
#scal-r22:checked ~ .scal__pages #scal-p22,
#scal-r23:checked ~ .scal__pages #scal-p23 { display: block; }

/* =====================================================================
   فازِ ۲۵ — نمره‌دهیِ مدرس به شرکت‌کننده (۰ تا ۱۰)
   عمداً از ستاره‌های ۱ تا ۵ (نظرِ شرکت‌کننده→کارگاه) کاملاً متفاوت‌اند تا با هم
   اشتباه گرفته نشوند: اینجا عدد است، نه ستاره؛ رنگش سبز/خنثی است، نه کهربایی.
   ===================================================================== */
.roster__item--scored { flex-wrap: wrap; align-items: flex-start; padding-block: 10px; }
.pscore { flex: 1 1 100%; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
    padding-top: 8px; border-top: 1px dashed var(--border); }
.pscore__label { flex: 0 0 auto; font-size: 12px; color: var(--muted); align-self: center; }
/* flex-basis عمداً «auto» است، نه یک عددِ پیکسلی: در .pscore__flex-direction:column
   (موبایل)، flex-basisِ عددی رویِ محورِ عمودی اعمال می‌شود و همان عدد را به‌جایِ
   عرض، به‌عنوانِ ارتفاع می‌گیرد — باگی که در تستِ ۳۷۵px پیدا شد. width/min-width
   همیشه درست کار می‌کنند، صرف‌نظر از جهتِ فلکس. */
.pscore__input { flex: 0 0 auto; width: 64px; padding: 7px 8px; border: 1px solid var(--border);
    border-radius: 8px; font: inherit; text-align: center; }
.pscore__input:focus { outline: none; border-color: var(--ok); box-shadow: 0 0 0 3px rgba(30,158,106,.15); }
.pscore__comment { flex: 1 1 auto; min-width: 200px; padding: 7px 10px; border: 1px solid var(--border);
    border-radius: 8px; font: inherit; font-size: 13px; }
.pscore__comment:focus { outline: none; border-color: var(--ok); box-shadow: 0 0 0 3px rgba(30,158,106,.15); }

/* نمایشِ نمره در تبِ «ثبت‌نام‌های من»ِ شرکت‌کننده — خصوصی، فقط برایِ خودش. */
.pscore-badge { margin-top: 6px; padding: 8px 12px; background: var(--ok-bg); border: 1px solid #bfe9d4;
    border-radius: 10px; }
.pscore-badge__val { font-size: 13px; font-weight: 700; color: var(--ok); }
.pscore-badge__comment { margin: 4px 0 0; font-size: 12.5px; color: #2f6b52; line-height: 1.7; }

@media (max-width: 560px) {
    .pscore { flex-direction: column; align-items: stretch; }
    .pscore__input { width: 100%; }
}

/* =====================================================================
   فازِ ۳۰/۳۱ — نقشه‌ی دسته‌بندیِ خانه (جایگزینِ نوارِ جستجو/چیپ/گریدِ قبلی، فقط
   در خانه). فقط از توکن‌هایِ :root استفاده می‌کند (--brand/--brand-dark/
   --brand-soft/--ink/--muted/--surface/--border/--radius*/--shadow*) +
   گرادیانِ ثابتِ .wcard__cover--ph — هیچ رنگِ جدیدی اضافه نشده.

   فازِ ۳۱: (۱) خودِ .catmap اکنون کلِ ناحیه‌ی هیرو را در بر می‌گیرد (بخشِ
   .hero مستقل حذف شد). (۲) به‌جایِ پنلِ شناورِ کنارِ هر گره (فازِ ۳۰)، کلیک
   روی یک دسته کلِ حلقه (خطوط+گره‌ها، نه خودِ دایره‌ی مرکز) را می‌چرخاند تا
   آن دسته همیشه در نقطه‌ی ثابتِ «پایین» بنشیند.

   فازِ ۳۱ (به‌روزرسانیِ میان‌فاز، به‌درخواستِ مستقیمِ مالکِ پروژه): متنِ
   توضیحیِ .catmap__intro (تیتر+زیرتیتر+توضیح) به‌کلی حذف شد. نمایشگاه
   (.catmap__showcase) دیگر یک پنلِ درون‌جریانِ زیرِ نقشه نیست؛ در عرضِ
   ≥۱۰۲۱px یک ستونِ ثابتِ سمتِ راست، کنارِ نقشه، است (همیشه در DOM حاضر —
   پیش از انتخاب جای‌نگه‌دار، پس از کلیک محتوایِ دسته)؛ در ۷۲۱-۱۰۲۰px هنوز
   زیرِ نقشه می‌نشیند (پشته‌ای)؛ در <۷۲۱px کلاً پنهان است (موبایل فقط از
   آکاردئونِ بومیِ <details> استفاده می‌کند). =====================================================================
*/
.catmap { margin: 8px 0 40px; }

.catmap__layout { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.catmap__mapcol { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* --- نمایشگاه: پیش از انتخاب یک جای‌نگه‌دارِ ساده، پس از کلیک محتوایِ همان
   دسته (کپی‌شده از .catmap-panel__list، نه بازسازی). --- */
/* فازِ ۳۲، §۱ (لایه‌ی دفاعیِ دومِ رفعِ روی‌همافتادگی، مستقل از اصلاحِ هندسیِ
   بالاتر در home-category-map.js): .catmap__stage یک position:relative است،
   پس فرزندانِ position:absoluteاش (گره‌ها) — طبقِ قاعده‌ی استانداردِ چیدمانِ
   CSS — همیشه رویِ خواهرهایِ static می‌نشینند (.catmap__branch، و
   .catmap__showcase که خواهرِ .catmap__mapcol است) — صرفِ‌نظر از ترتیبِ DOM،
   حتی اگر هندسه هرگز خطا نکند. با دادنِ position:relative + z-index به خودِ
   این خواهرها، آن‌ها هم وارد مقایسه‌ی z-index معمولی می‌شوند و همیشه بالاتر
   می‌مانند — یک شبکه‌ی ایمنی مستقل، نه جایگزینِ اصلاحِ هندسی. (لینکِ
   آرشیوِ کارگاه که این‌جا بود، طیِ همین فاز §۳ به فوتر منتقل شد.) */
.catmap__branch { position: relative; z-index: 1; }
.catmap__showcase { position: relative; z-index: 1; width: 100%; max-width: 640px; }
.catmap__showcase-empty { margin: 0; padding: 28px 20px; text-align: center; color: var(--muted);
    font-size: 14.5px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface); }
/* فازِ ۳۲ (به‌درخواستِ زنده‌ی مالکِ پروژه — «یک قابِ آبی، کمی بزرگ‌تر از
   خودِ لیست، با گوشه‌های گرد»؛ سپس: «زبانه‌ی مثلثی هم در همین قاب ادغام
   شود»؛ سپس: «پرِ توپر باشد، نه فقط استروک»): قاب رویِ کلِ
   .catmap__showcase-body (سرتیتر+شمارنده+بستن، هم خودِ گریدِ کارگاه‌ها) است
   — چون زبانه‌ی مثلثیِ موجود (.catmap__showcase.is-open::before، پایین‌تر)
   از قبل رویِ لبه‌ی *بالاییِ* همینِ showcase-body می‌نشیند. پرِ توپرِ
   var(--brand) (نه دیگر --brand-soft+بردر) — رنگِ متن/شمارنده/دکمه‌ی
   بستن هم پایین‌تر برایِ contrast رویِ این زمینه‌ی آبیِ توپر تنظیم شد. */
.catmap__showcase-body { display: none; padding: 14px; background: var(--brand); border-radius: 18px; }
.catmap__showcase.is-open .catmap__showcase-empty { display: none; }
/* فازِ ۳۲ (به‌درخواستِ زنده‌ی مالکِ پروژه — «برایِ آن جعبه یک انیمیشنِ
   reveal بگذار»): display:none→block خودش قابلِ transition نیست، پس یک
   animation (نه transition) رویِ همان قانونی که display را عوض می‌کند —
   هر بار عنصر از حالتِ hidden به رندرشده برگردد (یعنی دقیقاً هر بار
   نمایشگاه از بسته به باز می‌رود، نه در هر سوییچِ محتوایِ داخلی‌اش، چون
   کلاسِ is-open در سوییچ‌هایِ بعدی از قبل حاضر است و دوباره اضافه نمی‌شود)
   از نو اجرا می‌شود. */
.catmap__showcase.is-open .catmap__showcase-body {
    display: block;
    animation: catmap-showcase-reveal .5s cubic-bezier(.22, .8, .28, 1);
}
@keyframes catmap-showcase-reveal {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* فازِ ۳۲، §۴: پیش‌تر این‌جا .catmap__showcase در <۷۲۱px کاملاً پنهان بود
   (موبایل فقط آکاردئون داشت، نمایشگاهی در کار نبود). حالا که موبایل هم
   حالتِ شعاعی دارد، نمایشگاه در آن‌جا هم لازم است — قانونِ پایه‌یِ
   .catmap__showcase (بالاتر: width:100%; max-width:640px) خودش برایِ
   موبایل هم کافی/مناسب است، پس چیزی برایِ override کردن نمانده؛ فقط خودِ
   قانونِ حذف‌شد. سایزِ ثابت‌هایِ مخصوصِ حالتِ شعاعیِ موبایل، پایین‌تر در همان
   بلوکِ @media(max-width:720px) که قبلاً برایِ سایزِ دایره/گره بود. */

/* --- ≥۱۰۲۱px: دو ستون؛ نمایشگاه (بعد از نقشه در DOM) با order:-1 به‌صورتِ
   بصری اول/راست می‌نشیند (بدونِ تغییرِ ترتیبِ DOM که پشته‌ای هنوز به آن نیاز
   دارد: نقشه بالا، نمایشگاه زیرش). --- */
@media (min-width: 1021px) {
    .catmap__layout { flex-direction: row; align-items: flex-start; justify-content: center; gap: 44px; }
    .catmap__mapcol { flex: 1 1 auto; min-width: 0; max-width: 640px; }
    .catmap__showcase { order: -1; flex: 0 0 380px; max-width: 380px; align-self: stretch; }
    .catmap__branch { display: none; }
    /* نقشه، حالا که ستونِ اختصاصی دارد، محسوسً بزرگ‌تر از اندازه‌ی فازِ ۳۰
       (که در عرضِ کاملِ محتوا وسط‌چین بود) — پایه‌ی ۱۷۶/۱۲۴px، باز هم ضربدرِ
       --catmap-scale برایِ واکنش به حجمِ محتوا (بخشِ ۵). */
    .catmap__stage.is-radial { min-height: 560px; }
    .catmap__stage.is-radial .catmap__center { width: calc(176px * var(--catmap-scale, 1));
        height: calc(176px * var(--catmap-scale, 1)); }
    .catmap__stage.is-radial .catmap-mark { width: calc(124px * var(--catmap-scale, 1)); }
}

/* width:100% صریح لازم است — mapcol فلکس‌ستونی با align-items:center است، و
   وقتی حالتِ شعاعی فرزندانِ stage را absolute می‌کند (از جریانِ عادی خارج)،
   بدونِ این خط stage به عرضِ محتوایِ خودش (۰، چون دیگر محتوایی در جریانِ
   عادی ندارد) جمع می‌شود — باگی که مستقیماً منجر به اشتباهِ cx/عرضِ در دسترس
   در home-category-map.js می‌شد. */
.catmap__stage { position: relative; width: 100%; }
.catmap__center { width: calc(136px * var(--catmap-scale, 1)); height: calc(136px * var(--catmap-scale, 1));
    margin: 0 auto 20px; border-radius: 50%; background: var(--brand); color: #fff; display: flex;
    align-items: center; justify-content: center; box-shadow: var(--shadow-hover);
    animation: catmap-hub-pulse 2.2s ease-out infinite; }
/* فازِ ۳۲ (به‌درخواستِ زنده‌ی مالکِ پروژه — «دایره با درخشش/پالس، کاربر را
   به لمس/کلیک دعوت کند»؛ سپس صریحاً: «پالس پیوسته باشد، متوقف نشود»): یک
   هالوی نرمِ گسترش‌یابنده/محوشونده، دورِ خودِ نشان — در دسکتاپ هم پیوسته
   (infinite)، نه فقط چند بار. موبایل (پایین‌تر، override با
   data-catmap-inviting) هم پیوسته است، اما مشروط به «هنوز چیزی باز
   نشده» — همان دعوت‌به‌لمس. */
@keyframes catmap-hub-pulse {
    0% { box-shadow: var(--shadow-hover), 0 0 0 0 rgba(37, 99, 235, .45); }
    70% { box-shadow: var(--shadow-hover), 0 0 0 26px rgba(37, 99, 235, 0); }
    100% { box-shadow: var(--shadow-hover), 0 0 0 0 rgba(37, 99, 235, 0); }
}
.catmap-mark { width: calc(96px * var(--catmap-scale, 1)); height: auto; }
/* فازِ ۳۲، §۴ — نسخه‌ی دومِ نشان، فقط برایِ چرخِ موبایل (پایین‌تر در همین
   فایل: @media(max-width:720px) با display:flex نشانش می‌دهد). این‌جا
   عمداً پنهان است تا در ≥۷۲۱px هیچ اثری نداشته باشد — عنصرِ کاملاً جدیدی
   است، ویرایشِ چیزیِ موجود نیست. */
.catmap__mobile-hub { display: none; }
.catmap__hub-branch { display: none; } /* فقط موبایل — پایین‌تر */
.catmap__ring { position: relative; }
.catmap__lines { display: none; }

.catmap__nodes { display: flex; flex-direction: column; gap: 12px; max-width: 620px; margin: 0 auto; }

.catmap-item { border: 0; background: none; }
.catmap-item > summary { list-style: none; cursor: pointer; }
.catmap-item > summary::-webkit-details-marker { display: none; }
.catmap-item > summary::marker { content: ''; }

.catmap-node { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 18px; border: 1px solid var(--border); background: var(--surface);
    border-radius: var(--radius-sm); box-shadow: var(--shadow); font-weight: 700; color: var(--ink);
    transition: border-color .15s, background .15s, color .15s; }
.catmap-node:hover { border-color: var(--brand); color: var(--brand); }
.catmap-node__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
    height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--brand-soft);
    color: var(--brand); font-size: 12px; font-weight: 800; }
.catmap-item.is-active .catmap-node,
.catmap-item[open]:not([data-catmap-radial]) > .catmap-node { background: var(--brand); border-color: var(--brand); color: #fff; }
.catmap-item.is-active .catmap-node__count,
.catmap-item[open]:not([data-catmap-radial]) > .catmap-node .catmap-node__count { background: rgba(255,255,255,.22); color: #fff; }

.catmap-panel { margin-top: 10px; padding: 6px 2px 2px; }
.catmap-panel__list { display: flex; flex-direction: column; gap: 10px; }

/* --- کارتِ کارگاه (هم در آکاردئونِ موبایل، هم منبعِ کپی‌شونده به نمایشگاهِ
   دسکتاپ). فازِ ۳۱ (بازطراحیِ میان‌فاز، به‌درخواستِ مالکِ پروژه): بدونِ
   بنرِ کاور — لاغرتر، آواتارِ بزرگ‌ترِ مدرس (خودش لینک به پروفایلِ عمومی)،
   چیپِ نامِ مدرس/فضا (لینکِ مستقل)، نشانِ ظرفیت/جای‌خالی، و یک دکمه‌ی
   «ثبت‌نام ›» — همه به صفحه‌ی عمومیِ همان کارگاه. لینک‌ها خواهرِ هم‌اند
   (نه تودرتو) — همان قاعده‌ی .wcard (فازِ ۱۸) برایِ HTML معتبر. --- */
.catmap-wcard { display: flex; flex-direction: column; border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden; color: inherit;
    background: var(--surface); box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.catmap-wcard:hover { border-color: var(--brand); box-shadow: var(--shadow-hover); }
.catmap-wcard__top { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 10px; }
.catmap-wcard__avatar { flex: 0 0 auto; display: block; line-height: 0; border-radius: 50%; }
.catmap-wcard__avatar .avatar-img, .catmap-wcard__avatar .avatar-svg { display: block; }
.catmap-wcard__body { min-width: 0; flex: 1 1 auto; }
.catmap-wcard__title { margin: 0 0 6px; font-size: 14.5px; font-weight: 700;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catmap-wcard__titlelink { color: var(--ink); text-decoration: none; }
.catmap-wcard__titlelink:hover { color: var(--brand); }
.catmap-wcard__links { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.catmap-wcard__chip { font-size: 11.5px; color: var(--muted); text-decoration: none;
    border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 9px;
    max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catmap-wcard__chip:hover { border-color: var(--brand); color: var(--brand); }
.catmap-wcard__status { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.catmap-wcard__badge { font-size: 11px; font-weight: 700; color: var(--ok); background: var(--ok-bg);
    padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.catmap-wcard__badge--full { color: var(--err); background: var(--err-bg); }
.catmap-wcard__price { font-size: 13px; font-weight: 800; color: var(--brand-dark); white-space: nowrap; }
.catmap-wcard__enroll { display: block; text-align: center; padding: 10px; font-size: 13px;
    font-weight: 700; color: var(--brand); text-decoration: none; border-top: 1px solid var(--border);
    background: var(--brand-soft); transition: background .15s, color .15s; }
.catmap-wcard__enroll:hover { background: var(--brand); color: #fff; }

/* --- شاخه‌ی نقطه‌چین (فقط وقتی دسته‌ای باز است) --- فازِ ۳۲ (تاریخچه: یک
   حلقه‌ی همیشگیِ marching-ants → یک ترنزیشنِ یک‌باره‌ی clip-path، هم‌زمان با
   بازشدن؛ بازخوردِ آخر: «دیگر اصلاً دیده نمی‌شود، برایم مهم است، برگردانش
   و بهتر انیمیشنش کن» — رنگِ قبلی (var(--border)، خاکستریِ خیلی روشن) رویِ
   پس‌زمینه‌ی روشنِ صفحه عملاً نامرئی بود، نه واقعاً حذف‌شده). رفع: رنگ به
   var(--brand) (همان آبیِ نشان) تغییر کرد — قابلِ‌دیدن و هم‌رنگِ خودِ
   دایره؛ ضخامت از ۲px به ۳px؛ منحنیِ ترنزیشن به یک «back»ِ فنری
   (overshoot) با مدتِ بیشتر تغییر کرد — به‌جایِ رسمِ صافِ یک‌نواخت، خط با
   کمی جهش/برگشت می‌رسد، حسِ زنده‌تری می‌دهد. */
.catmap__branch { width: 3px; height: 26px; margin: 0 auto;
    background-image: repeating-linear-gradient(to bottom, var(--brand) 0 6px, transparent 6px 12px);
    background-size: 3px 12px; background-repeat: repeat-y;
    opacity: 0; clip-path: inset(0 0 100% 0);
    transition: opacity .3s ease, clip-path .65s cubic-bezier(.34, 1.4, .4, 1); }
.catmap__branch.is-visible { opacity: 1; clip-path: inset(0 0 0% 0); }

/* --- محتوایِ داخلِ نمایشگاه (سرتیتر+گرید) — نمایشِ خودِ ستون همیشگی است
   (بالاتر، .catmap__showcase)، فقط جای‌نگه‌دار/بدنه‌ی داخلی سوییچ می‌شود. --- */
.catmap-showcase__head { display: flex; align-items: center; gap: 10px; padding: 14px 4px 16px; }
/* فازِ ۳۲: با پرِ توپرِ آبیِ جدیدِ showcase-body (بالاتر)، رنگ‌هایِ قبلی
   (متنِ تیره، شمارنده‌ی آبی‌روشن) دیگر contrastِ کافی ندارند — همه به سفید/
   نیمه‌شفافِ سفید تغییر کردند، دقیقاً همان الگویی که خودِ دایره‌ی نشان
   (متنِ سفید رویِ پرِ آبی) از قبل استفاده می‌کند. */
.catmap-showcase__title { margin: 0; font-size: 17px; font-weight: 800; color: #fff; }
.catmap-showcase__count { background: rgb(255 255 255 / .22); color: #fff; font-size: 12px; font-weight: 800;
    padding: 3px 10px; border-radius: var(--radius-pill); }
.catmap-showcase__close { margin-inline-start: auto; border: 1px solid rgb(255 255 255 / .4); background: rgb(255 255 255 / .15);
    color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; }
.catmap-showcase__close:hover { border-color: #fff; background: rgb(255 255 255 / .28); }
/* فازِ ۳۲: اسکرولِ داخلی — با تعدادِ زیادِ کارگاه، فقط خودِ لیست اسکرول
   می‌شود، نه کلِ صفحه (سرتیتر/شمارنده/بستن همیشه دیده می‌مانند، چون بیرونِ
   .catmap-showcase__grid‌اند). overscroll-behavior:contain از سرریزِ
   اسکرول به صفحه (وقتی به انتهایِ لیست می‌رسد) جلوگیری می‌کند. */
/* فازِ ۳۲ (بازخوردِ زنده — «آن یکی جعبه‌ی پشتِ کارت‌های کارگاه هم آبیِ
   توپر شود»): این گرید هم، هم‌سو با showcase-body (بالاتر)، پرِ توپرِ
   var(--brand) می‌گیرد — نه یک رنگِ جدا/روشن‌تر، تا با جعبه‌ی بیرونی یکی
   دیده شود، نه یک جعبه‌ی تودرتوی مجزا. */
.catmap-showcase__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px;
    padding: 10px; transition: opacity .18s ease;
    background: var(--brand); border-radius: 14px;
    max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }

/* --- خطوطِ شعاعی (SVG، فقط در حالتِ شعاعی) --- */
.catmap__stage.is-radial .catmap__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: visible; }
.catmap__stage.is-radial .catmap__lines line { stroke: var(--border); stroke-width: 2; fill: none;
    transition: stroke-dashoffset .8s ease; }

/* --- حالتِ شعاعیِ ≥۷۲۱px (بعد از اجرایِ جاوااسکریپت) — نسخه‌ی موبایل
   (<۷۲۱px، فازِ ۳۲، §۴) در بلوکِ جداگانه‌ی خودش، پایین‌تر در همین فایل. --- */
@media (min-width: 721px) {
    .catmap__stage.is-radial { min-height: 480px; }
    /* z-index بالاتر از حلقه/خطوط — فازِ ۳۱، رفعِ باگِ خط‌کشیدنِ روی نشان: چون
       پرِ دایره‌ی مرکز plain و کدر (var(--brand)) است، همین کافی است تا هر
       بخشی از خط که داخلِ شعاعِ دایره می‌افتد را کامل بپوشاند. */
    .catmap__stage.is-radial .catmap__center { position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%); margin: 0; z-index: 2; }
    .catmap__stage.is-radial .catmap__ring { position: absolute; inset: 0; transform-origin: 50% 50%;
        transition: transform .9s cubic-bezier(.32, 1.2, .4, 1); }
    .catmap__stage.is-radial .catmap__nodes { position: static; max-width: none; display: block; }
    /* left/top به‌صورتِ پیکسلِ مطلق با جاوااسکریپت تنظیم می‌شود (نسبت به‌ی
       .catmap__ring — که دقیقاً هم‌اندازه‌ی stage است، پس همان مختصاتِ
       getBoundingClientRectِ stage معتبر می‌ماند — مستقلِ از RTL)؛ transform
       فقط خودِ آیتم را روی همان نقطه وسط‌چین می‌کند؛ چرخشِ حلقه جداگانه روی
       .catmap-node (چیپِ داخلی) با یک ضدچرخش خنثی می‌شود تا برچسب همیشه
       ایستاده بماند. */
    .catmap__stage.is-radial .catmap-item { position: absolute; top: 0; left: 0;
        transform: translate(-50%, -50%); width: max-content; }
    .catmap__stage.is-radial .catmap-node { white-space: nowrap;
        font-size: calc(16px * var(--catmap-scale, 1));
        transition: border-color .15s, background .15s, color .15s, transform .9s cubic-bezier(.32, 1.2, .4, 1); }
    /* فازِ ۳۲: به‌درخواستِ مستقیمِ مالکِ پروژه، شمارنده این‌جا هم (نه فقط
       موبایل) حذف شد تا خودِ متن بزرگ‌تر باشد — انحرافِ آگاهانه از محدودیتِ
       اولیه‌ی «هیچ تغییری در ≥۷۲۱px»، طبقِ دستورِ زنده‌ی همین فاز. */
    .catmap__stage.is-radial .catmap-node__count { display: none; }
    .catmap__stage.is-radial .catmap-panel { display: none !important; }
}

/* --- فازِ ۳۲، §۴ (بازطراحیِ چرخ، به‌درخواستِ زنده‌ی مالکِ پروژه): موبایل
   دیگر «همان مکانیزمِ ≥۷۲۱px با ثابت‌هایِ کوچک‌تر» نیست — یک استعاره‌ی
   کاملاً متفاوت است: «چرخ‌وفلکِ» خیلی بزرگ که مرکزِ واقعی‌اش بیرونِ قابِ
   دیدِ stage (بالایِ آن) است؛ فقط یک کمانِ باریک از پایینِ آن، از پنجره‌ی
   کوچکِ stage (اکنون overflow:hidden) دیده می‌شود. نشانِ چرخ خودش (نه
   بخشی از حلقه) بالایِ همین پنجره، ثابت و همیشه دیده، می‌نشیند
   (.catmap__mobile-hub — نسخه‌ی دومِ نشان، فقط برایِ همین حالت؛
   .catmap__center‌ِ اصلی این‌جا مخفی می‌شود). چرخاندن هم با درگ (پوینتر،
   در home-category-map.js) هم با تپِ مستقیم روی یک چیپ ممکن است؛ چیپ‌ها
   با مماسِ مدار می‌چرخند (نه ایستاده) — فقط در جایگاهِ ثابتِ پایین، مماس
   دقیقاً افقی/خواناست. عمداً یک بلوکِ جدا است، نه ویرایشِ بلوکِ ≥۷۲۱px —
   تا هیچ تغییری در تجربه‌ی دسکتاپ/پشته‌ای ندهد. بدونِ جاوااسکریپت
   .catmap__stage هرگز کلاسِ is-radial نمی‌گیرد، پس این قوانین بی‌اثرند و
   همان <details>ِ بومی (fallback) باقی می‌ماند. --- */
@media (max-width: 720px) {
    .catmap__center { display: none; } /* جایگزین: .catmap__mobile-hub، زیر */

    /* z-index بالاتر از stage/ring — پایین‌تر ببینید («چرا stage رویِ نشان
       کشیده می‌شود») — بدونِ position، z-index بی‌اثر است. */
    .catmap__mobile-hub { position: relative; z-index: 2; display: flex; align-items: center;
        justify-content: center; width: 230px; height: 230px; margin: 0 auto; border-radius: 50%;
        background: var(--brand); color: #fff; box-shadow: var(--shadow-hover); cursor: pointer;
        animation: none; }
    /* فازِ ۳۲ (به‌درخواستِ زنده‌ی مالکِ پروژه — «کاربر با لمسِ نشان، برچسب‌ها
       را بیرون بیاورد؛ هر وقت برچسبی دیده نمی‌شود، با یک لمس برگردند»):
       برخلافِ دسکتاپ (۳ بارِ ثابت)، این‌جا واقعاً یک CTA است — تا وقتی هیچ
       دسته‌ای باز نیست، پیوسته می‌زند (data-catmap-inviting، در
       home-category-map.js: هر بار activeItem به null برسد، از جمله بعدِ
       زدنِ × — دقیقاً همان مشکلِ گزارش‌شده). دسته‌ای که باز شود، همین
       ویژگی برداشته و پالس متوقف می‌شود؛ دیگر نیازی به راهنمای CTAِ زنده
       نیست. */
    .catmap__mobile-hub[data-catmap-inviting] { animation: catmap-hub-pulse 2s ease-out infinite; }
    .catmap__mobile-hub .catmap-mark { width: 158px; height: auto; }
    /* فاصله‌ی بینِ نشان و برچسب — با همین شاخه‌ی نقطه‌چین پر می‌شود (نه
       رویِ‌همافتادگی؛ آن رویکرد در تستِ قبلی مشکل‌ساز بود). فازِ ۳۲: با
       اندازه‌گیریِ زنده تاییدشد که هیچ پیکسلی از یک چیپِ درحالِ چرخش واقعاً
       رویِ نشان نمی‌افتد (overflow:hidden‌ِ stage درست کار می‌کند)، اما با
       فاصله‌ی قبلی (۱۴px) یک چیپِ کج‌شده در گوشه‌اش آن‌قدر به نشان نزدیک
       می‌شد که «چسبیده» به‌نظر می‌رسید — این فاصله برایِ رفعِ همان توهمِ
       بصری بزرگ‌تر شد. */
    /* فازِ ۳۲ (به‌درخواستِ زنده‌ی مالکِ پروژه — «خط‌چین‌ها را در موبایل حذف
       کن، از یک عنصرِ بصریِ دیگر برایِ نشان‌دادنِ رابطه‌ی نشان←دسته←کارگاه
       استفاده کن»): خودِ عنصر (و فاصله‌یِ ثابتی که برایش رزرو شده بود) حذف
       نشد — چون بازچینیِ ارتفاع/فاصله‌ی قابِ دیدِ چرخ به آن وابسته است —
       فقط دیگر دیده نمی‌شود. جایگزین: یک زبانه‌ی مثلثی‌شکل (::before رویِ
       خودِ چیپِ فعال و رویِ نمایشگاه)، پایین‌تر. */
    .catmap__hub-branch { display: block; width: 3px; height: 30px; margin: 0 auto;
        opacity: 0 !important; visibility: hidden; }

    .catmap-node { padding: 13px 8px; font-size: 13.5px; }

    /* stageِ موبایل = پنجره‌ی کوچک؛ overflow:hidden فقط این‌جاست (نه در
       ≥۷۲۱px، که کلِ دایره باید دیده شود). خودِ باکس با margin-topِ منفی به
       بالا کشیده شده — عمداً، تا حاشیه‌ی بالاییِ overflow:hiddenِ آن دقیقاً
       زیرِ خودِ نشان (که حالا z-index‌ش بالاتر است) بیفتد، نه در فضایِ خالیِ
       بینِ نشان و قاب؛ چیپی که حینِ چرخش تا آن بالا می‌رسد، به‌جایِ یک
       بریدگیِ صافِ زشت، طبیعی زیرِ خودِ دایره‌ی نشان محو/پنهان می‌شود.
       ارتفاعِ *پایینیِ* قابِ دید هم اکنون ۱۱۳px است (پیش‌تر ۷۸px بود) — با
       رفعِ باگِ «شعاعِ نامتساوی» (مرکزِ چرخش دیگر از رویِ فاصله از لبه‌ی
       پایینِ قاب حساب نمی‌شود، مستقیم از رویِ مرکزِ واقعیِ خودِ نشان
       اندازه‌گیری می‌شود — بالاتر در home-category-map.js)، چیپِ جایگاهِ
       ثابت با اندازه‌گیریِ زنده ۲۳px از این لبه‌ی پایین رد می‌شد؛ ۱۱۳ (۷۸+۳۵،
       حاشیه‌ی امن) این را می‌پوشاند. */
    .catmap__stage.is-radial { min-height: 0; height: 373px; margin-top: -260px;
        overflow: hidden; touch-action: none; }
    /* فازِ ۳۲ (به‌درخواستِ زنده‌ی مالکِ پروژه — «انیمیشن/ترنزیشن نرم‌تر»؛ سپس
       دوباره صریحاً: «هنوز خیلی سریع است»): مدت پله‌پله از ۰٫۶۲s تا ۱٫۱s
       افزایش یافت — چرخش/جاگیریِ نهایی حالا محسوساً آرام‌تر حس می‌شود. */
    .catmap__stage.is-radial .catmap__ring { position: absolute; inset: 0;
        transition: transform 1.1s cubic-bezier(.16, .84, .3, 1); }
    .catmap__stage.is-radial .catmap__nodes { position: static; max-width: none; display: block; }
    .catmap__stage.is-radial .catmap-item { position: absolute; top: 0; left: 0; width: max-content; }
    /* برخلافِ ≥۷۲۱px (که چیپ‌ها با ضدچرخش همیشه ایستاده می‌مانند)، این‌جا
       چیپ‌ها با --tangent (یک‌بار در layoutMobileWheel تنظیم می‌شود، نه در
       هر applyRing) با مماسِ مدار می‌چرخند — فقط جایگاهِ ثابتِ پایین این
       مماس دقیقاً افقی است. */
    .catmap__stage.is-radial .catmap-item .catmap-node {
        transform: translate(-50%, -50%) rotate(var(--tangent, 0deg)); }
    /* پدینگِ عمودی ۱۴px می‌ماند (برایِ ابعادِ لمسیِ ≥۴۴px، حتی در کوچک‌ترینِ
       فونت)؛ فقط افقی/فونت کوچک‌تر شدند — به‌درخواستِ مالکِ پروژه، «برچسبِ
       کوچک‌تر». */
    .catmap__stage.is-radial .catmap-node { white-space: nowrap; padding: 14px 9px;
        font-size: calc(12px * var(--catmap-scale, 1)); cursor: grab;
        transition: border-color .15s, background .15s, color .15s; }
    .catmap__stage.is-radial .catmap-node:active { cursor: grabbing; }
    .catmap__stage.is-radial .catmap-node__count { display: none; } /* به‌درخواستِ مالکِ پروژه — فضا برایِ متنِ بزرگ‌تر */
    /* فازِ ۳۲ (به‌درخواستِ زنده‌ی مالکِ پروژه — «سه‌نقطه نشان ندهد»): پیش‌تر
       max-width:130px + ellipsis برچسب‌هایِ بلند را می‌برید. حذف شد — چیپ
       حالا به‌اندازه‌یِ کاملِ متن (white-space:nowrap از قانونِ پایه‌یِ
       .catmap-node) عریض می‌شود؛ چون فاصله‌ی زاویه‌ایِ بینِ گره‌ها (بالاتر،
       layoutMobileWheel) از رویِ همین offsetWidthِ *واقعیِ* رندرشده حساب
       می‌شود، نه یک عددِ ثابت، چیپِ عریض‌تر خودکار فاصله‌ی بیشتری از همسایه‌اش
       می‌گیرد — نیازی به هیچ تنظیمِ دیگری نیست. */
    .catmap__stage.is-radial .catmap-node__label { display: inline-block; vertical-align: middle; }
    .catmap__stage.is-radial .catmap-panel { display: none !important; }

    /* فازِ ۳۲: خط‌چینِ نقشه↔نمایشگاه هم در موبایل حذف شد (همان دلیلِ
       .catmap__hub-branch، بالاتر) — جایگزینش زبانه‌ی مثلثی‌شکلِ رویِ خودِ
       نمایشگاه است. */
    .catmap__branch { height: 18px; opacity: 0 !important; visibility: hidden; }

    /* فازِ ۳۲ (جایگزینِ خط‌چین — زبانه‌ی مثلثی، هم‌رنگِ خودِ عنصرِ فرزند):
       رویِ چیپِ فعال (نشان←دسته) و رویِ نمایشگاه (دسته←کارگاه)، یک مثلثِ
       کوچکِ روبه‌بالا — دقیقاً همان استعاره‌ی رایجِ «دنباله‌ی حبابِ گفتگو»،
       که رابطه‌ی مالکیت/تعلق را بدونِ نیاز به خطِ اتصال نشان می‌دهد. */
    .catmap-item.is-active .catmap-node { position: relative; }
    .catmap-item.is-active .catmap-node::before {
        content: ''; position: absolute; top: -7px; left: 50%;
        transform: translateX(-50%);
        border-left: 7px solid transparent; border-right: 7px solid transparent;
        border-bottom: 7px solid var(--brand);
    }
    .catmap__showcase { position: relative; }
    .catmap__showcase.is-open::before {
        content: ''; position: absolute; top: -9px; left: 50%;
        transform: translateX(-50%);
        border-left: 8px solid transparent; border-right: 8px solid transparent;
        border-bottom: 9px solid var(--brand);
    }

    /* گریدِ نمایشگاه در عرض‌هایِ خیلی باریک (۳۶۰-۴۲۸px) — auto-fit با
       minmax(230px,1fr) خودش به یک ستون جمع می‌شود (۲۳۰ از عرضِ در دسترس
       کمتر است). به‌درخواستِ مستقیمِ مالکِ پروژه، سقفِ اسکرولِ داخلیِ ≥۷۲۱px
       (max-height:60vh از قانونِ پایه) این‌جا خنثی می‌شود — در موبایل «دو
       ناحیه‌ی اسکرولِ جدا» (صفحه + خودِ لیست) گیج‌کننده است؛ فقط صفحه اسکرول
       می‌کند، مثلِ حالتِ درون‌جریانِ اصلیِ فازِ ۳۱. */
    .catmap-showcase__grid { max-height: none; overflow-y: visible; }

    /* ابعادِ لمسی ≥۴۴px (§۴) — دکمه‌ی بستنِ نمایشگاه در ≥۷۲۱px عمداً ۳۰px
       است (کنارِ عنوان/شمارنده، در یک ردیفِ فشرده)؛ این‌جا فقط برایِ موبایل
       بزرگ‌تر می‌شود، بدونِ تغییر در ≥۷۲۱px. */
    .catmap-showcase__close { width: 44px; height: 44px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .catmap__stage.is-radial .catmap__lines line { transition: none; }
    .catmap__stage.is-radial .catmap__ring,
    .catmap__stage.is-radial .catmap-node,
    .catmap-item { transition: none !important; }
    .catmap__showcase, .catmap__branch, .catmap-showcase__grid { transition: none !important; }
}

/* --- چک‌باکسِ پذیرشِ قوانین (فازِ ۳۳) --- */
.field-check { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0; font-size: 13px; color: var(--muted); }
.field-check input { margin-top: 3px; flex: 0 0 auto; }
.field-check a { color: var(--brand); font-weight: 700; text-decoration: none; }
.field-check a:hover { text-decoration: underline; }

/* --- پنلِ «ارتقایِ حساب» (فازِ ۳۳) — انتخابِ نقش با رادیوهایِ پنهان، بدونِ JSِ جدید،
   دقیقاً همان الگویِ رادیو-محورِ تقویمِ جلساتِ فازِ ۲۴ (#scal-r{i}:checked ~ ...). --- */
.upg__radio { position: absolute; opacity: 0; pointer-events: none; }
.upg__picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
@media (max-width: 560px) { .upg__picker { grid-template-columns: 1fr; } }
.upg__card { display: block; cursor: pointer; border: 1px solid var(--border); border-radius: 14px;
    padding: 16px; text-align: center; background: #faf9ff; transition: border-color .12s, box-shadow .12s; }
.upg__card:hover { border-color: var(--brand); }
.upg__card-title { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.upg__card-badge { display: inline-block; margin-top: 8px; border-radius: 999px; padding: 2px 12px;
    font-size: 12px; font-weight: 700; background: var(--ok-bg); color: var(--ok); }
.upg__card-badge--pending { background: #fff3e0; color: #b76e00; }
.upg__page { display: none; }
#upg-r-instructor:checked ~ .upg__picker label[for="upg-r-instructor"],
#upg-r-venue:checked ~ .upg__picker label[for="upg-r-venue"] { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
#upg-r-instructor:checked ~ .upg__pages .upg__page--instructor { display: block; }
#upg-r-venue:checked ~ .upg__pages .upg__page--venue { display: block; }

/* --- بازه‌ی تاریخِ گزارشِ مالی + نمودارِ میله‌ایِ درآمدِ ماهانه (فازِ ۴۶) — بدونِ
   کتابخانه‌ی خارجی، هم‌روحِ QRِ خودمیزبان/CSVِ بدونِ کتابخانه‌ی فازهایِ پیشین. --- */
.finance-range { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 14px 0 20px; }
.finance-range > div:not(.finance-range__actions) { min-width: 160px; }
.finance-range__actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 560px) { .finance-range { flex-direction: column; align-items: stretch; } }

.fin-chart { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 20px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; }
.fin-chart__row { display: grid; grid-template-columns: 100px 1fr 130px; align-items: center; gap: 10px; }
.fin-chart__label { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-chart__track { background: var(--bg); border-radius: var(--radius-pill); height: 14px; overflow: hidden; }
.fin-chart__bar { height: 100%; background: var(--brand); border-radius: var(--radius-pill); min-width: 3px; transition: width .25s ease; }
.fin-chart__value { font-size: 13px; font-weight: 700; color: var(--ink); }
@media (max-width: 560px) { .fin-chart__row { grid-template-columns: 1fr; gap: 4px; } }