/* ---------------------------------------------------------------------------
   پلتفرم ملی گردشگری سلامت ایران
   پالت روشن و آرام — برخلاف پروژه‌های گیمینگ که تم تاریک دارند. دلیلش محصول است:
   مخاطب این صفحه‌ها بیماری است که دربارهٔ درمان خودش تصمیم می‌گیرد، و اعتماد با
   سطح روشن، فضای خالی و تایپوگرافی خوانا ساخته می‌شود نه با افکت.
   --------------------------------------------------------------------------- */

:root {
    --ht-bg: #f4f7f9;
    --ht-surface: #ffffff;
    --ht-surface-2: #eef3f6;
    --ht-border: #dce4ea;
    --ht-border-strong: #c3d0d9;

    --ht-text: #152a35;
    --ht-text-dim: #5d7585;
    --ht-text-faint: #8ba0ad;

    --ht-primary: #0f766e;        /* فیروزه‌ای — رنگ اصلی برند */
    --ht-primary-dark: #115e59;
    --ht-primary-light: #ccfbf1;

    --ht-accent: #0369a1;
    --ht-accent-light: #e0f2fe;

    --ht-gold: #b45309;           /* لهجهٔ گرم ایرانی، برای نشان و تأکید */
    --ht-gold-light: #fef3c7;

    --ht-ok: #047857;
    --ht-ok-light: #d1fae5;
    --ht-warn: #b45309;
    --ht-warn-light: #fef3c7;
    --ht-bad: #b91c1c;
    --ht-bad-light: #fee2e2;

    --ht-radius: 12px;
    --ht-radius-sm: 8px;
    --ht-radius-lg: 18px;
    --ht-shadow: 0 1px 2px rgba(21, 42, 53, .06), 0 2px 8px rgba(21, 42, 53, .04);
    --ht-shadow-lg: 0 4px 24px rgba(21, 42, 53, .10);

    /* ---- برجستگی ----------------------------------------------------------
       سه‌بعدی‌بودن یک شیء روی صفحه سه چیز است و نه یکی: نورِ باریکِ بالا که
       می‌گوید لبه رو به بالاست، سایهٔ نازکِ داخلیِ پایین که ضخامت می‌دهد، و
       سایهٔ بیرونی که شیء را از کاغذ جدا می‌کند. هر سه با هم یک تراز را
       می‌سازند؛ هرکدام تنها، یک کارتِ تخت با سایه است.
       -------------------------------------------------------------------- */
    --ht-relief-1:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 rgba(21, 42, 53, .05),
        0 1px 2px rgba(21, 42, 53, .07),
        0 3px 6px -2px rgba(21, 42, 53, .08);

    --ht-relief-2:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -1px 0 rgba(21, 42, 53, .07),
        0 2px 4px rgba(21, 42, 53, .07),
        0 10px 20px -8px rgba(21, 42, 53, .18);

    --ht-relief-3:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 0 rgba(21, 42, 53, .08),
        0 4px 8px rgba(21, 42, 53, .08),
        0 22px 38px -14px rgba(21, 42, 53, .26);

    /* فرورفته: همان نور و سایه، وارونه — برای چیزی که فشرده یا فعال است */
    --ht-press:
        inset 0 2px 4px rgba(21, 42, 53, .22),
        inset 0 -1px 0 rgba(255, 255, 255, .25);

    /* ---- مقیاسِ اندازه ----------------------------------------------------
       بزرگ و کوچک معنا دارند: شمارهٔ یک صفحه از تیترش بزرگ‌تر است و تیتر از
       متن. clamp اجازه می‌دهد همین نسبت‌ها روی موبایل هم بماند بی آنکه تیترِ
       اصلی سه خط شود.
       -------------------------------------------------------------------- */
    --ht-fs-display: clamp(2.25rem, 1.15rem + 3.7vw, 4.1rem);
    --ht-fs-h1: clamp(1.85rem, 1.2rem + 2.1vw, 2.85rem);
    --ht-fs-h2: clamp(1.3rem, 1.1rem + .85vw, 1.75rem);
    --ht-fs-h3: 1.12rem;
    --ht-fs-lead: clamp(1rem, .94rem + .3vw, 1.18rem);
    --ht-fs-small: .88rem;
    --ht-fs-micro: .74rem;
}

/* ---- خانوادهٔ رنگ --------------------------------------------------------
   دوازده لحن برای دوازده تخصص. هر کلاس فقط سه متغیر می‌گذارد و اجزای زیر
   همان متغیرها را می‌خوانند؛ پس افزودنِ تخصصِ سیزدهم یک کلاسِ سه‌خطی است و
   نه یک کپیِ دیگر از کلِ کارت.
   ------------------------------------------------------------------------ */
.ht-hue-teal    { --hue: #0f766e; --hue-dark: #115e59; --hue-tint: #d5f5ef; }
.ht-hue-azure   { --hue: #0369a1; --hue-dark: #075985; --hue-tint: #ddeffb; }
.ht-hue-violet  { --hue: #6d28d9; --hue-dark: #5b21b6; --hue-tint: #ece2fd; }
.ht-hue-rose    { --hue: #be123c; --hue-dark: #9f1239; --hue-tint: #fde0e6; }
.ht-hue-amber   { --hue: #b45309; --hue-dark: #92400e; --hue-tint: #fdeccd; }
.ht-hue-emerald { --hue: #047857; --hue-dark: #065f46; --hue-tint: #d2f3e4; }
.ht-hue-indigo  { --hue: #4338ca; --hue-dark: #3730a3; --hue-tint: #e2e2fb; }
.ht-hue-cyan    { --hue: #0e7490; --hue-dark: #155e75; --hue-tint: #d6f0f6; }
.ht-hue-plum    { --hue: #a21caf; --hue-dark: #86198f; --hue-tint: #f8e0fa; }
.ht-hue-slate   { --hue: #475569; --hue-dark: #334155; --hue-tint: #e4e9f0; }
.ht-hue-olive   { --hue: #4d7c0f; --hue-dark: #3f6212; --hue-tint: #e6f3cf; }
.ht-hue-sienna  { --hue: #9a3412; --hue-dark: #7c2d12; --hue-tint: #fce3d6; }

@font-face {
    font-family: Vazirmatn;
    src: url('../lib/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../lib/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url('../lib/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

html { font-size: 15px; }

@media (min-width: 768px) {
    html { font-size: 16px; }
}

/* قلم‌های چینی عمداً دانلود نمی‌شوند و از سیستم می‌آیند.
   وزیرمتن نویسهٔ هان ندارد، پس در صفحهٔ چینی مرورگر خودش جانشین می‌گذارد و
   انتخابش روی هر سیستم فرق می‌کند — یعنی سطرها ناهماهنگ می‌شوند. نام‌بردنِ
   صریحِ قلم‌های سیستمی این را قطعی می‌کند، بی آنکه چند مگابایت وب‌فونت CJK
   روی هر بازدید بنشیند؛ یک وب‌فونت چینی از کلِ بقیهٔ سایت سنگین‌تر است و
   بیمارِ فارسی‌زبان هم آن را دانلود می‌کرد. */
html, body {
    background: var(--ht-bg);
    color: var(--ht-text);
    font-family: Vazirmatn, Tahoma, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC',
                 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1 0 auto; }

a { color: var(--ht-primary); text-decoration: none; }
a:hover { color: var(--ht-primary-dark); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

/* ارقام لاتین در جاهایی که باید لاتین بمانند: شماره پرونده، کد، ایمیل */
.num-en, code, .ht-mono {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    direction: ltr;
    unicode-bidi: embed;
}

/* ---------- نوار بالا ---------- */
.ht-topbar {
    background: var(--ht-surface);
    border-bottom: 1px solid var(--ht-border);
    padding: .65rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.ht-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ht-text);
}

.ht-brand:hover { color: var(--ht-primary); text-decoration: none; }

.ht-brand-mark {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--ht-primary), var(--ht-accent));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    flex: none;
}

.ht-brand-sub {
    display: block;
    font-size: .7rem;
    font-weight: 400;
    color: var(--ht-text-faint);
    letter-spacing: .02em;
}

.ht-topbar .nav-link {
    color: var(--ht-text-dim);
    font-weight: 500;
    padding: .4rem .8rem !important;
}

.ht-topbar .nav-link:hover,
.ht-topbar .nav-link.active { color: var(--ht-primary); }

/* ---------- دکمه‌ها ---------- */
.ht-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: var(--ht-radius-sm);
    padding: .5rem 1.1rem;
    font-weight: 500;
    font-size: .95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.ht-btn-primary { background: var(--ht-primary); color: #fff; }
.ht-btn-primary:hover { background: var(--ht-primary-dark); color: #fff; text-decoration: none; }

.ht-btn-outline {
    background: transparent;
    border-color: var(--ht-border-strong);
    color: var(--ht-text);
}

.ht-btn-outline:hover {
    border-color: var(--ht-primary);
    color: var(--ht-primary);
    text-decoration: none;
}

.ht-btn-soft { background: var(--ht-surface-2); color: var(--ht-text); }
.ht-btn-soft:hover { background: var(--ht-border); color: var(--ht-text); text-decoration: none; }

.ht-btn-danger { background: var(--ht-bad); color: #fff; }
.ht-btn-danger:hover { background: #991b1b; color: #fff; text-decoration: none; }

.ht-btn-sm { padding: .3rem .7rem; font-size: .85rem; }

/* ---------- کارت ---------- */
.ht-card {
    background: var(--ht-surface);
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius);
    box-shadow: var(--ht-shadow);
}

.ht-card-body { padding: 1.25rem; }

.ht-card-head {
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--ht-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.ht-card-head h2,
.ht-card-head h3,
.ht-card-head h5 { margin: 0; font-size: 1.02rem; }

.ht-card-hover { transition: box-shadow .15s, transform .15s, border-color .15s; }

.ht-card-hover:hover {
    box-shadow: var(--ht-shadow-lg);
    border-color: var(--ht-primary-light);
    transform: translateY(-2px);
}

/* ---------- کارت آماری ---------- */
.ht-stat {
    background: var(--ht-surface);
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius);
    padding: 1rem 1.1rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.ht-stat::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 3px;
    background: var(--ht-primary);
}

.ht-stat.is-ok::before { background: var(--ht-ok); }
.ht-stat.is-warn::before { background: var(--ht-warn); }
.ht-stat.is-bad::before { background: var(--ht-bad); }
.ht-stat.is-accent::before { background: var(--ht-accent); }
.ht-stat.is-gold::before { background: var(--ht-gold); }

/* کارتی که با دابل‌کلیک باز می‌شود.

   نشانه‌اش ظریف است و نه یک دکمهٔ تمام‌عیار: این کارت پیش از هر چیز یک عدد
   است که خوانده می‌شود، و اگر مثل دکمه دیده شود، داشبورد به یک ردیف دکمه
   تبدیل می‌شود. پس فقط نشانگر و یک بالا‌آمدنِ کوچک در هاور، و حلقهٔ فوکوس
   برای کسی که با صفحه‌کلید می‌گردد. */
[data-ht-open] {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

[data-ht-open]:hover {
    transform: translateY(-2px);
    box-shadow: var(--ht-relief-1);
}

[data-ht-open]:focus-visible {
    outline: 2px solid var(--ht-primary);
    outline-offset: 2px;
}

.ht-stat-label {
    color: var(--ht-text-dim);
    font-size: .82rem;
    margin-bottom: .3rem;
}

.ht-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.ht-stat-note {
    color: var(--ht-text-faint);
    font-size: .78rem;
    margin-top: .2rem;
}

/* عددی که اندازه‌گیری نشده، صفر نشان داده نمی‌شود — صفر برای مدیر یعنی «بد» */
.ht-unmeasured {
    color: var(--ht-text-faint);
    font-size: 1rem;
    font-weight: 400;
}

/* ---------- جدول ---------- */
.ht-table-wrap {
    background: var(--ht-surface);
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius);
    overflow: hidden;
    box-shadow: var(--ht-shadow);
}

.ht-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.ht-table thead th {
    background: var(--ht-surface-2);
    color: var(--ht-text-dim);
    font-size: .82rem;
    font-weight: 600;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--ht-border);
    text-align: right;
    white-space: nowrap;
}

.ht-table tbody td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--ht-border);
    vertical-align: middle;
    font-size: .92rem;
}

.ht-table tbody tr:last-child td { border-bottom: none; }
.ht-table tbody tr:hover { background: var(--ht-surface-2); }

.ht-table-sm tbody td,
.ht-table-sm thead th { padding: .5rem .7rem; font-size: .86rem; }

@media (max-width: 767px) {
    /* ---------- جدول روی گوشی ----------
       min-width روی همهٔ جدول‌ها می‌نشست، ولی کادرِ لغزان فقط جایی
       بود که مارک‌آپ `.ht-table-wrap` گذاشته بود — ۴۶ جدول از ۱۳۴تا. بقیه
       داخلِ کارت‌اند و کادر ندارند، چون کارت خودش قاب و حاشیه دارد؛ و آن‌ها
       با همان min-width کلِ صفحه را پهن می‌کردند: داشبوردِ کارتابل روی صفحهٔ ۳۷۵
       پیکسلی ۶۸۰ پیکسل می‌شد و همه‌چیز افقی می‌لغزید.

       قاعدهٔ درست: min-width مالِ کادرِ لغزان است و نه مالِ جدول. هر جا کادر
       هست — `.ht-table-wrap` یا کارتی که جدول فرزندِ مستقیمش است — جدول می‌لغزد و
       خوانا می‌ماند؛ هر جا نیست، جدول جمع می‌شود و صفحه را با خودش نمی‌برد. */
    .ht-table { min-width: 0; }

    /* سرستونِ جدولِ جمع‌شونده باید بشکند، وگرنه nowrap خودش عرض را
       تحمیل می‌کند و همان مشکل از راهِ دیگر برمی‌گردد. */
    .ht-table thead th { white-space: normal; }

    .ht-table-wrap,
    .ht-card:has(> .ht-table),
    .ht-card-body:has(> .ht-table) { overflow-x: auto; }

    .ht-table-wrap > .ht-table,
    .ht-card > .ht-table,
    .ht-card-body > .ht-table { min-width: 44rem; }

    /* سرِ کارت با جدول هم‌قد می‌شود؛ وگرنه تا جدول را بلغزانی، عنوان و
       خطِ زیرش وسطِ راه تمام می‌شوند. */
    .ht-card:has(> .ht-table) > .ht-card-head { min-width: 44rem; }
}

/* ---------- نشان ---------- */
.ht-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .76rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ht-ok { background: var(--ht-ok-light); color: var(--ht-ok); }
.ht-wait { background: var(--ht-accent-light); color: var(--ht-accent); }
.ht-warn { background: var(--ht-warn-light); color: var(--ht-warn); }
.ht-bad { background: var(--ht-bad-light); color: var(--ht-bad); }
.ht-draft { background: var(--ht-surface-2); color: var(--ht-text-dim); }

/* نشان «عضو تأییدشده» — همیشه با تاریخ اعتبار و همیشه کنار متن سلب مسئولیت */
.ht-verified {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--ht-primary-light);
    color: var(--ht-primary-dark);
    border: 1px solid #99f6e4;
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .8rem;
    font-weight: 600;
}

.ht-verified-date {
    font-weight: 400;
    color: var(--ht-primary);
    font-size: .74rem;
}

/* ---------- متن سلب مسئولیت ---------- */
.ht-disclaimer {
    background: var(--ht-gold-light);
    border: 1px solid #fcd34d;
    border-radius: var(--ht-radius-sm);
    padding: .65rem .85rem;
    color: #78350f;
    font-size: .84rem;
    line-height: 1.7;
    display: flex;
    gap: .5rem;
}

.ht-disclaimer i { flex: none; margin-top: .15rem; }

.ht-note {
    background: var(--ht-accent-light);
    border: 1px solid #bae6fd;
    border-radius: var(--ht-radius-sm);
    padding: .65rem .85rem;
    color: #075985;
    font-size: .86rem;
    line-height: 1.7;
}

/* ---------- هشدار و کد پیگیری -----------------------------------------------
   ht-note آبی است و «اطلاع» می‌دهد. وقتی متن می‌گوید «اینجا جای مسئلهٔ پزشکی
   نیست»، آبی کم است: خواننده‌ای که درد دارد باید رنگ را هم ببیند.
   -------------------------------------------------------------------------- */
.ht-note-warn {
    background: var(--ht-warn-light);
    border-color: #fcd34d;
    color: #78350f;
}

/* سبز برای «این کار بی‌خطر است» و سرخ برای «این کار پیامدی دارد که باید
   بدانی». در صفحهٔ ترجمهٔ ماشینی، تفاوتِ این دو رنگ تفاوتِ «متن در شبکهٔ
   خودت می‌ماند» با «متن از کشور بیرون می‌رود» است — جمله‌ای که نباید در یک
   پاراگرافِ آبی گم شود. */
.ht-note-ok {
    background: var(--ht-ok-light);
    border-color: #6ee7b7;
    color: #065f46;
}

.ht-note-danger {
    background: var(--ht-bad-light);
    border-color: #fca5a5;
    color: #7f1d1d;
}

/* نشانِ منبعِ ترجمه، کنارِ متنِ ترجمه‌شده در اتاق مشاوره. کوچک است چون
   برچسب است و نه عنوان، ولی هرگز پنهان نمی‌شود. */
.ht-mt-badge {
    font-size: .68rem;
    padding: .1rem .4rem;
    vertical-align: middle;
}

/* کدِ پیگیری یک بار و فقط در یک صفحه دیده می‌شود، پس درشت و قابلِ انتخاب است:
   کاربر یا کپی‌اش می‌کند یا از روی صفحه رونویسی. */
.ht-code-box {
    display: inline-block;
    padding: .7rem 1.2rem;
    border: 2px dashed var(--ht-primary);
    border-radius: var(--ht-radius-sm);
    background: var(--ht-surface-2);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--ht-primary);
    user-select: all;
}

/* ---------- فرم ---------- */
.form-control, .form-select {
    background: var(--ht-surface);
    border: 1px solid var(--ht-border-strong);
    color: var(--ht-text);
    border-radius: var(--ht-radius-sm);
    padding: .5rem .8rem;
    font-size: .95rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--ht-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}

.form-control::placeholder { color: var(--ht-text-faint); }

/* ---------- نمایش گذرواژه ---------------------------------------------------
   روی صفحه‌ای که خودش گذرواژه‌ها را فهرست می‌کند، ورودیِ همیشه‌ستاره‌دار
   بی‌معنی است: کاربر از روی فهرست می‌خواند و نمی‌تواند بسنجد درست تایپ کرده
   یا نه. پوشش و جهتش را اسکریپت می‌سازد؛ اینجا فقط ظاهرِ دکمه است.
   -------------------------------------------------------------------------- */
.ht-pwd {
    position: relative;
    display: block;
}

/* جای دکمه از خودِ ورودی گرفته می‌شود تا متن زیرش نرود. هر دو — این فاصله و
   inset دکمه — با جهتِ پوشش حساب می‌شوند، که اسکریپت از خودِ ورودی برداشته. */
.ht-pwd > .form-control { padding-inline-end: 2.5rem; }

.ht-pwd-eye {
    position: absolute;
    inset-inline-end: .3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--ht-text-faint);
    border-radius: var(--ht-radius-sm);
    cursor: pointer;
    transition: color .12s, background .12s;
}

.ht-pwd-eye:hover { color: var(--ht-primary); background: var(--ht-surface-2); }
.ht-pwd-eye[aria-pressed="true"] { color: var(--ht-primary); }

.ht-pwd-eye:focus-visible {
    outline: 2px solid var(--ht-primary);
    outline-offset: 1px;
    color: var(--ht-primary);
}

.form-label {
    color: var(--ht-text-dim);
    font-size: .88rem;
    font-weight: 500;
    margin-bottom: .3rem;
}

.form-text { color: var(--ht-text-faint); font-size: .8rem; }

.text-danger, .field-validation-error {
    color: var(--ht-bad) !important;
    font-size: .84rem;
}

.validation-summary-errors {
    background: var(--ht-bad-light);
    border: 1px solid #fca5a5;
    border-radius: var(--ht-radius-sm);
    padding: .7rem .9rem;
    color: #7f1d1d;
    font-size: .88rem;
}

.validation-summary-errors ul { margin: 0; padding-inline-start: 1.2rem; }

/* ---------- هشدار ---------- */
.ht-alert {
    border-radius: var(--ht-radius-sm);
    padding: .7rem 1rem;
    font-size: .92rem;
    border: 1px solid transparent;
}

.ht-alert-ok { background: var(--ht-ok-light); border-color: #6ee7b7; color: #065f46; }
.ht-alert-bad { background: var(--ht-bad-light); border-color: #fca5a5; color: #7f1d1d; }
.ht-alert-warn { background: var(--ht-warn-light); border-color: #fcd34d; color: #78350f; }

/* ---------- عنوان بخش ---------- */
/* ---------- رتبه و امتیاز ----------------------------------------------------
   شمارهٔ رتبه در یک دایره می‌نشیند تا از ستون‌های عددیِ کنارش — که همه امتیازند —
   جدا دیده شود. سه رتبهٔ نخست رنگِ برند می‌گیرند و نه مدالِ طلا و نقره: این
   جدول کارنامه است و نه مسابقه.
   -------------------------------------------------------------------------- */
.ht-rank {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--ht-surface-2);
    color: var(--ht-text-dim);
    font-weight: 700;
    font-size: .85rem;
}

.ht-rank.is-top {
    background: var(--ht-primary);
    color: #fff;
    box-shadow: var(--ht-relief-1);
}

.ht-score-pill {
    display: inline-block;
    min-width: 2.6rem;
    text-align: center;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .88rem;
    background: var(--ht-surface-2);
}

.ht-score-pill.ht-score-good { background: var(--ht-ok-light); color: var(--ht-ok); }
.ht-score-pill.ht-score-mid { background: var(--ht-warn-light); color: var(--ht-warn); }
.ht-score-pill.ht-score-low { background: var(--ht-bad-light); color: var(--ht-bad); }

/* ---------- قرص‌های انتخاب ---------------------------------------------------
   یک انتخابِ چندگزینه‌ای که همهٔ گزینه‌هایش همزمان دیده می‌شوند. برای جایی که
   نخستین کارِ بازدیدکننده همین انتخاب است، select بدتر است: باید بازش کند تا
   بفهمد چه گزینه‌هایی هست و هرکدام چند تا دارد.
   -------------------------------------------------------------------------- */
.ht-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.ht-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--ht-border);
    background: var(--ht-surface);
    color: var(--ht-text-dim);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .12s, background .12s, border-color .12s;
}

.ht-chip:hover {
    color: var(--ht-primary-dark);
    border-color: var(--ht-border-strong);
    text-decoration: none;
}

.ht-chip > span {
    font-size: .74rem;
    font-weight: 700;
    padding: .05rem .35rem;
    border-radius: 999px;
    background: var(--ht-surface-2);
    color: var(--ht-text-faint);
}

.ht-chip.is-on {
    background: var(--ht-primary);
    border-color: var(--ht-primary);
    color: #fff;
}

.ht-chip.is-on > span { background: rgba(255, 255, 255, .22); color: #fff; }

/* گزینه‌ای که عضوی ندارد پنهان نمی‌شود، کم‌رنگ می‌شود: نبودنش هم خبر است. */
.ht-chip.is-empty { opacity: .55; }

/* ---------- نقشه ------------------------------------------------------------
   ارتفاعِ صریح لازم است: Leaflet روی ظرفی با ارتفاعِ صفر بی هیچ خطایی یک
   مستطیلِ خالی می‌سازد.
   -------------------------------------------------------------------------- */
.ht-map {
    height: 20rem;
    border-radius: var(--ht-radius);
    border: 1px solid var(--ht-border);
    overflow: hidden;
    background: var(--ht-surface-2);
}

/* کاشی‌های نقشه در صفحهٔ راست‌به‌چپ نباید آینه شوند. */
.ht-map .leaflet-container { direction: ltr; }

@media (max-width: 575px) { .ht-map { height: 15rem; } }

/* ---------- سطرِ «برچسب و مقدار» ---------------------------------------------
   یک واقعیتِ دوستونی بی جدول. جدولِ دوستونی برای چهار سطر، چهار سطرِ نشانه‌گذاری
   اضافه می‌خواهد و روی گوشی هم باید دوباره چیده شود؛ این یکی خودش می‌شکند.
   -------------------------------------------------------------------------- */
.ht-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .3rem 0;
    font-size: .9rem;
    border-bottom: 1px dashed var(--ht-border);
}

.ht-kv:last-child { border-bottom: 0; }
.ht-kv > span { color: var(--ht-text-dim); }
.ht-kv > b { font-weight: 700; text-align: end; }

/* ---------- دکمهٔ بازگشت -----------------------------------------------------
   کم‌رنگ است و نه دکمهٔ اصلی: کارِ صفحه آن پایین است و این فقط راهِ خروج. ولی
   جای ثابتی دارد — بالا و سمتِ آغازِ ستونِ محتوا، روی هر صفحه‌ای که جایی بالای
   خودش دارد — چون چیزی که جایش عوض شود، هر بار باید پیدا شود.
   -------------------------------------------------------------------------- */
.ht-back { margin-bottom: .75rem; }

.ht-back-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ht-text-dim);
    padding: .3rem .6rem .3rem .45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: color .12s, background .12s, border-color .12s;
}

.ht-back-btn:hover {
    color: var(--ht-primary-dark);
    background: var(--ht-surface);
    border-color: var(--ht-border);
    text-decoration: none;
}

.ht-back-btn:focus-visible {
    outline: 2px solid var(--ht-primary);
    outline-offset: 2px;
}

/* «عقب» در راست‌به‌چپ سمتِ راست است. یک آیکن با یک برگردان، نه دو آیکن در
   قالب — وگرنه زبانِ هفتم که اضافه شود، شرطِ قالب باید دوباره نوشته شود. */
[dir="rtl"] .ht-back-btn > i { transform: scaleX(-1); }

/* روی صفحهٔ چاپ‌شده و در کنارِ نوارِ پایینِ گوشی جایی نمی‌گیرد. */
@media (max-width: 991px) {
    .ht-back { margin-bottom: .6rem; }
}

.ht-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-inline-start: .65rem;
    border-inline-start: 3px solid var(--ht-primary);
    line-height: 1.6;
}

.ht-eyebrow {
    color: var(--ht-text-faint);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .4rem;
}

/* ---------- ساید‌بار پنل ---------- */
.ht-shell {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding-block: 1.25rem;
}

.ht-sidebar {
    background: var(--ht-surface);
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius);
    padding: .75rem;
    width: 15rem;
    flex: none;
    position: sticky;
    top: 4.5rem;
    box-shadow: var(--ht-shadow);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

.ht-sidebar-head {
    padding: .5rem .6rem .75rem;
    border-bottom: 1px solid var(--ht-border);
    margin-bottom: .5rem;
}

.ht-sidebar-head strong {
    font-size: .95rem;
    display: block;
    color: var(--ht-text-dim);
    font-weight: 600;
}

/* نامِ کاربر از عنوانِ پنلِ بالایش پررنگ‌تر است و نه کم‌رنگ‌تر: عنوان را کاربر
   از منو هم می‌خواند، ولی «با کدام حساب واردم» جای دیگری نوشته نشده. */
.ht-sidebar-user {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .3rem;
    min-width: 0;
}

.ht-sidebar-avatar {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(140deg, var(--ht-primary), var(--ht-accent));
    box-shadow: var(--ht-relief-1);
}

.ht-sidebar-name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--ht-primary-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ht-sidebar-group {
    color: var(--ht-text-faint);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .7rem .6rem .25rem;
}

.ht-sidebar a {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--ht-text-dim);
    padding: .45rem .6rem;
    border-radius: var(--ht-radius-sm);
    font-size: .9rem;
    font-weight: 500;
}

.ht-sidebar a:hover {
    background: var(--ht-surface-2);
    color: var(--ht-text);
    text-decoration: none;
}

.ht-sidebar a.active {
    background: var(--ht-primary);
    color: #fff;
}

.ht-sidebar a i { font-size: 1rem; flex: none; }

.ht-sidebar-count {
    margin-inline-start: auto;
    background: var(--ht-bad);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0 .35rem;
    min-width: 1.15rem;
    text-align: center;
}

.ht-sidebar a.active .ht-sidebar-count { background: rgba(255, 255, 255, .28); }

.ht-content { flex: 1; min-width: 0; }

@media (max-width: 991px) {
    /* align-items در قاعدهٔ پایه flex-start است، و آنجا درست است: ستون‌ها
       کنار همند و باید از بالا صاف شوند. ولی تا جهت ستونی می‌شود، همان
       مقدار معنایش عوض می‌شود: محورِ عرضی حالا محورِ عرضِ فرزندان است، پس
       `.ht-content` به اندازهٔ محتوایش پهن می‌شد و نه به اندازهٔ صفحه.

       نتیجه این بود که min-width جدول ستون را باز می‌کرد و `overflow-x: auto`
       روی کادرِ جدول هیچ‌وقت به کار نمی‌افتاد — چیزی برای لغزاندن نبود،
       چون خودِ ستون هم‌قدِ جدول شده بود و به‌جایش کلِ صفحه می‌لغزید. */
    .ht-shell { flex-direction: column; align-items: stretch; }
    .ht-sidebar { width: 100%; position: static; max-height: none; display: none; }
    .ht-sidebar.is-open { display: block; }
    body.has-tabs { padding-bottom: 4.2rem; }
}

/* ---------- نوار تب موبایل ---------- */
.ht-tabs {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    background: var(--ht-surface);
    border-top: 1px solid var(--ht-border);
    z-index: 1040;
    padding: .3rem .2rem;
}

.ht-tabs a, .ht-tabs button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    color: var(--ht-text-dim);
    font-size: .68rem;
    padding: .3rem 0;
    background: none;
    border: none;
}

.ht-tabs a.active { color: var(--ht-primary); }
.ht-tabs a i, .ht-tabs button i { font-size: 1.15rem; }

@media (max-width: 991px) {
    .ht-tabs { display: flex; }
}

/* ---------- خط زمانی مراحل پرونده ---------- */
.ht-stages {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    padding-bottom: .4rem;
}

.ht-stage {
    flex: 1;
    min-width: 4.5rem;
    text-align: center;
    font-size: .72rem;
    color: var(--ht-text-faint);
    position: relative;
    padding-top: 1.4rem;
}

.ht-stage::before {
    content: '';
    position: absolute;
    top: .35rem;
    inset-inline: 0;
    height: 3px;
    background: var(--ht-border);
}

.ht-stage:first-child::before { inset-inline-start: 50%; }
.ht-stage:last-child::before { inset-inline-end: 50%; }

.ht-stage::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: calc(50% - .35rem);
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--ht-surface);
    border: 2px solid var(--ht-border-strong);
}

.ht-stage.is-done { color: var(--ht-primary); }
.ht-stage.is-done::before { background: var(--ht-primary); }
.ht-stage.is-done::after { background: var(--ht-primary); border-color: var(--ht-primary); }

.ht-stage.is-current { color: var(--ht-primary-dark); font-weight: 700; }

.ht-stage.is-current::after {
    background: #fff;
    border-color: var(--ht-primary);
    box-shadow: 0 0 0 3px var(--ht-primary-light);
}

/* ---------- تقویم سفر ---------- */
.ht-timeline { position: relative; padding-inline-start: 1.6rem; }

.ht-timeline::before {
    content: '';
    position: absolute;
    inset-block: .4rem;
    inset-inline-start: .35rem;
    width: 2px;
    background: var(--ht-border);
}

.ht-timeline-item { position: relative; padding-bottom: 1.1rem; }

.ht-timeline-item::before {
    content: '';
    position: absolute;
    top: .35rem;
    inset-inline-start: -1.6rem;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: var(--ht-surface);
    border: 2px solid var(--ht-border-strong);
}

.ht-timeline-item.is-done::before { background: var(--ht-ok); border-color: var(--ht-ok); }
.ht-timeline-item.is-missed::before { background: var(--ht-bad); border-color: var(--ht-bad); }
.ht-timeline-item.is-confirmed::before { background: var(--ht-primary); border-color: var(--ht-primary); }

.ht-timeline-time { font-size: .8rem; color: var(--ht-text-dim); }
.ht-timeline-title { font-weight: 600; font-size: .95rem; }

/* ---------- هیرو درگاه ---------- */
.ht-hero {
    background:
        radial-gradient(ellipse at 15% 0%, rgba(15, 118, 110, .14), transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(3, 105, 161, .12), transparent 55%),
        var(--ht-surface);
    border-bottom: 1px solid var(--ht-border);
    padding: 3.5rem 0 3rem;
}

.ht-hero h1 {
    font-size: 2.1rem;
    line-height: 1.5;
    margin-bottom: .9rem;
}

.ht-hero p.lead {
    color: var(--ht-text-dim);
    font-size: 1.05rem;
    line-height: 1.9;
    max-width: 44rem;
}

@media (min-width: 768px) {
    .ht-hero h1 { font-size: 2.6rem; }
}

/* ---------- کارت تخصص ---------- */
.ht-tile {
    display: block;
    background: var(--ht-surface);
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius);
    padding: 1.1rem;
    height: 100%;
    color: var(--ht-text);
    transition: box-shadow .15s, transform .15s, border-color .15s;
}

.ht-tile:hover {
    box-shadow: var(--ht-shadow-lg);
    border-color: var(--ht-primary-light);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--ht-text);
}

.ht-tile-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 10px;
    background: var(--ht-primary-light);
    color: var(--ht-primary-dark);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    margin-bottom: .7rem;
}

.ht-tile strong { display: block; font-size: 1rem; margin-bottom: .2rem; }
.ht-tile small { color: var(--ht-text-dim); font-size: .84rem; line-height: 1.7; }

/* ---------- حالت خالی ---------- */
.ht-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ht-text-dim);
}

.ht-empty i {
    font-size: 2.2rem;
    color: var(--ht-text-faint);
    display: block;
    margin-bottom: .6rem;
}

.ht-empty p { margin: 0; font-size: .95rem; }

/* ---------- نوار پیشرفت ---------- */
.ht-progress {
    height: 6px;
    background: var(--ht-surface-2);
    border-radius: 999px;
    overflow: hidden;
}

.ht-progress-bar { height: 100%; background: var(--ht-primary); border-radius: 999px; }

/* ---------- امتیاز ---------- */
.ht-score {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.ht-score-good { color: var(--ht-ok); }
.ht-score-mid { color: var(--ht-warn); }
.ht-score-low { color: var(--ht-bad); }

/* ---------- فوتر ---------- */
.ht-footer {
    background: var(--ht-surface);
    border-top: 1px solid var(--ht-border);
    padding: 2.2rem 0 1.2rem;
    margin-top: 2.5rem;
    color: var(--ht-text-dim);
    font-size: .88rem;
}

.ht-footer h6 { color: var(--ht-text); font-weight: 700; margin-bottom: .7rem; font-size: .92rem; }
.ht-footer ul { list-style: none; padding: 0; margin: 0; }
.ht-footer li { margin-bottom: .35rem; }
.ht-footer a { color: var(--ht-text-dim); }
.ht-footer a:hover { color: var(--ht-primary); }

.ht-footer-bottom {
    border-top: 1px solid var(--ht-border);
    margin-top: 1.4rem;
    padding-top: 1rem;
    font-size: .82rem;
    color: var(--ht-text-faint);
}

/* ---------- نقشهٔ ظرفیت ---------- */
#ht-capacity-map {
    height: 28rem;
    border-radius: var(--ht-radius);
    border: 1px solid var(--ht-border);
}

/* ---------- چاپ ---------- */
@media print {
    .ht-topbar, .ht-sidebar, .ht-tabs, .ht-footer, .ht-no-print { display: none !important; }
    .ht-shell { padding: 0; }
    body { background: #fff; }
    .ht-card, .ht-table-wrap { box-shadow: none; border-color: #999; }
}


/* ---------------------------------------------------------------------------
   زبان‌های چپ‌به‌راست
   Vazirmatn حرفِ لاتین دارد ولی سیریلیک ندارد، پس در روسی جایش را به فونتِ
   سیستم می‌دهد. انگلیسی، ترکی و آذربایجانی هم با فونتِ سیستم خواناترند، چون
   Vazirmatn برای متنِ فارسی تنظیم شده و فاصله‌گذاریِ لاتینش بازتر از لازم است.
   -------------------------------------------------------------------------- */
html[dir="ltr"] body,
html[dir="ltr"] .ht-brand,
html[dir="ltr"] input,
html[dir="ltr"] select,
html[dir="ltr"] textarea,
html[dir="ltr"] button {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* فلشِ «همهٔ تخصص‌ها ←» در حالتِ چپ‌به‌راست باید برعکس بچرخد. */
html[dir="ltr"] .bi-arrow-left::before {
    content: "\f138";
}

/* کلیدِ تغییر زبان */
.ht-lang {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.ht-lang .dropdown-menu {
    min-width: 11rem;
    font-size: .9rem;
}

.ht-lang .dropdown-item.active,
.ht-lang .dropdown-item:active {
    background: var(--ht-primary, #0d6efd);
    color: #fff;
}

/* نشانِ «ترجمهٔ ماشینی» — عمداً کم‌رنگ و کوچک است ولی حذف‌شدنی نیست. */
.ht-machine {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: var(--ht-text-faint);
    border: 1px dashed var(--ht-border, #d8d8d8);
    border-radius: .4rem;
    padding: .1rem .45rem;
}

/* ===========================================================================
   لایهٔ برجستگی — کادر، عمق و عکس
   ---------------------------------------------------------------------------
   این بخش بعد از اجزای پایه می‌آید و جاهایی را که باید برجسته شوند بازنویسی
   می‌کند. جدا نگه داشته شده تا پیدا باشد چه چیزی ساختار است و چه چیزی ظاهر:
   اگر روزی این بخش برداشته شود، سایت همچنان کار می‌کند و فقط تخت می‌شود.
   =========================================================================== */

/* ---------- متنِ برجسته ----------------------------------------------------
   سایهٔ متن روی زمینهٔ روشن باید نازک باشد: یک نورِ سفید بالای حرف و دو سایهٔ
   کم‌رنگ زیرش. بیشتر از این، متن را به دکورِ دههٔ نود تبدیل می‌کند و خواندن
   را سخت — و این صفحه را کسی می‌خواند که دربارهٔ جراحی‌اش تصمیم می‌گیرد.
   -------------------------------------------------------------------------- */
.ht-relief-text {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .85),
        0 2px 1px rgba(21, 42, 53, .10),
        0 5px 12px rgba(21, 42, 53, .13);
}

/* روی عکس و زمینهٔ تیره وارونه می‌شود: سایهٔ تیره، نه نورِ سفید */
.ht-relief-text-dark {
    text-shadow:
        0 1px 0 rgba(0, 0, 0, .3),
        0 2px 4px rgba(0, 0, 0, .35),
        0 10px 28px rgba(0, 0, 0, .4);
}

.ht-grad-text {
    background-image: linear-gradient(165deg, var(--ht-text) 8%, var(--ht-primary) 58%, var(--ht-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* زمینهٔ متنیِ شفاف سایه نمی‌پذیرد، پس اینجا سایه نداریم */
}

.ht-display {
    font-size: var(--ht-fs-display);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.015em;
}

h1 { font-size: var(--ht-fs-h1); }

.ht-section-title {
    font-size: var(--ht-fs-h2);
    border-inline-start-width: 4px;
    padding-inline-start: .75rem;
    margin-bottom: 1.1rem;
}

.ht-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--ht-fs-micro);
    color: var(--ht-primary-dark);
    background: var(--ht-primary-light);
    border: 1px solid rgba(15, 118, 110, .22);
    border-radius: 999px;
    padding: .3rem .75rem;
    box-shadow: var(--ht-relief-1);
    text-transform: none;
    letter-spacing: .02em;
    margin-bottom: .9rem;
}

/* ---------- نوارِ اعتماد ----------------------------------------------------
   بالاتر از منو، پیش از هر چیزِ دیگر: چند عددِ قابلِ راستی‌آزمایی. بیمارِ
   خارجی پیش از آنکه بداند این سایت چه می‌فروشد، می‌خواهد بداند پشتش کیست.
   -------------------------------------------------------------------------- */
.ht-trustbar {
    background: linear-gradient(100deg, var(--ht-primary-dark), var(--ht-primary) 45%, var(--ht-accent));
    color: rgba(255, 255, 255, .94);
    font-size: var(--ht-fs-micro);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18);

    /* بالاتر از نوارِ منو می‌ایستد — وگرنه فهرستِ بازشدهٔ زبان زیرِ منو
       گیر می‌کند. نوارِ منو sticky است و z-index دارد، پس زمینهٔ چیدمانِ
       خودش را می‌سازد؛ فهرستی که از این نوارِ بی‌جایگاه باز می‌شود هر z-indexی
       داشته باشد پشتِ آن می‌افتد.

       دو نوار هیچ‌وقت روی هم نمی‌افتند — این بالایِ آن است، و تا منو
       بچسبد این از دید رفته — پس بالا بردنش چیزی را نمی‌پوشاند. زیرِ مرزِ
       گفتگوهای Bootstrap (۱۰۵۵) می‌ماند. */
    position: relative;
    z-index: 1035;
}

.ht-trustbar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.3rem;
    padding-block: .45rem;
}

.ht-trustbar span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.ht-trustbar i { opacity: .85; }

.ht-trustbar b {
    font-weight: 700;
    color: #fff;
}

@media (max-width: 575px) {
    /* روی موبایل فقط دو قلمِ اول می‌مانند؛ نوار نباید سه خط شود.
       فرزندِ مستقیمِ container، وگرنه span داخلِ دکمهٔ زبان را هم می‌گرفت. */
    .ht-trustbar > .container > span:nth-child(n+3) { display: none; }
}

/* ---------- منوی کادربندی‌شده ----------------------------------------------
   هر قلمِ منو یک کادرِ برجسته است و قلمِ جاری فرورفته — همان قراردادِ دکمهٔ
   فیزیکی. بی کادر، «کجا هستم» را فقط رنگِ متن می‌گفت، و رنگِ متن در منوی
   هفت‌قلمی به‌سختی دیده می‌شود.
   -------------------------------------------------------------------------- */
.ht-topbar {
    padding: .55rem 0;
    box-shadow: 0 1px 0 var(--ht-border), 0 6px 18px -12px rgba(21, 42, 53, .35);
}

.ht-brand-mark {
    border-radius: 11px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -2px 0 rgba(0, 0, 0, .18),
        0 4px 10px -3px rgba(15, 118, 110, .55);
}

.ht-topbar .navbar-nav { gap: .3rem; }

.ht-topbar .nav-item > .nav-link {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: .42rem .78rem !important;
    font-size: .93rem;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s;

    /* چینی هیچ مرزِ کلمه‌ای ندارد، پس مرورگر بین دو نویسهٔ یک واژه هم
       می‌شکند: «首页» در منو دو سطر می‌شد و عمودی خوانده می‌شد. در فارسی و
       انگلیسی این اتفاق نمی‌افتاد چون شکستن فقط سرِ فاصله ممکن بود. */
    white-space: nowrap;
}

.ht-topbar .nav-item > .nav-link:hover {
    background: var(--ht-surface);
    border-color: var(--ht-border);
    box-shadow: var(--ht-relief-1);
    transform: translateY(-1px);
    text-decoration: none;
}

.ht-topbar .nav-item > .nav-link.active {
    color: #fff;
    background: linear-gradient(180deg, var(--ht-primary), var(--ht-primary-dark));
    border-color: var(--ht-primary-dark);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 3px 8px -2px rgba(15, 118, 110, .5);
    transform: none;
}

/* ---------- ردیفی که صفحه را هل نمی‌دهد ------------------------------------
   نُه قلمِ منو را زبان طولانی‌تر و کوتاه‌تر می‌کند. اندازه گرفتم: همین ردیف در
   چینی ۱۲۹۶ پیکسل می‌خواهد، در فارسی ۱۳۴۰، در عربی ۱۴۱۰، در انگلیسی ۱۴۶۷، در
   ترکی ۱۶۳۰، در آذربایجانی ۱۷۱۷ و در روسی ۱۷۳۲ — و جای موجود در عرضِ ۱۶۰۰
   پیکسل فقط ۱۲۹۶ است. یعنی شش زبان از هفت زبان روی یک نمایشگرِ کاملاً معمولی
   سرریز می‌کردند.

   در فارسی و عربی بدتر بود: چون جهت راست‌به‌چپ است، سرریز به سمتِ چپ می‌رفت و
   مرورگر برایش نوارِ اسکرولِ صفحه نمی‌ساخت — قلم‌های آخرِ منو نه دیده می‌شدند
   و نه با اسکرول به دست می‌آمدند.

   دو لایه، چون لایهٔ دوم جاوااسکریپت است و جاوااسکریپت ممکن است نرسد:

   یک، ردیف اجازهٔ شکستن می‌گیرد. بدترین حالت یک منوی دوخطی است و نه صفحه‌ای
   که افقی می‌لرزد یا قلمِ دست‌نیافتنی دارد.

   دو، site.js اندازه را می‌سنجد و قلم‌های انتهایی را به کشوی «بیشتر» می‌برد،
   پس در عمل ردیف یک‌خطی می‌ماند.

   min-width روی .navbar-collapse لازم است چون پیش‌فرضِ min-width برای عنصرِ
   فلکس auto است: فهرست حاضر نمی‌شد از عرضِ محتوایش کوچک‌تر شود و به‌جای آن
   کلِ ظرف را بیرون می‌زد.
   -------------------------------------------------------------------------- */
.ht-topbar .navbar-collapse { min-width: 0; }
.ht-topbar .navbar-nav { flex-wrap: wrap; row-gap: .3rem; }

/* بوت‌استرپ روی .dropdown چیزی برای display نمی‌گذارد، ولی یک قاعدهٔ آیندهٔ
   display روی .nav-item کشویِ پنهان را پیدا می‌کرد؛ این یکی جلویش را می‌گیرد. */
.ht-nav-more[hidden] { display: none !important; }

.ht-nav-more-menu {
    border-radius: var(--ht-radius);
    border-color: var(--ht-border);
    box-shadow: var(--ht-relief-3);
    padding: .35rem;
    min-width: 12rem;
}

/* قلم‌های جابه‌جاشده همان <li class="nav-item"> خودشان می‌مانند و کلاس عوض
   نمی‌کنند: اگر قلمِ جاری داخلِ کشو برود، همان کادرِ پررنگِ «اینجا هستید» را
   با خودش می‌برد و بازدیدکننده جایش را گم نمی‌کند. */
.ht-nav-more-menu .nav-item { width: 100%; }

.ht-nav-more-menu .nav-item > .nav-link {
    display: block;
    width: 100%;
    border-radius: var(--ht-radius-sm);
    padding: .45rem .7rem !important;
    font-size: .92rem;
}

.ht-nav-more-menu .nav-item > .nav-link:hover { transform: none; }

/* کلیدِ زبان: کادرِ همیشگی، چون تنها قلمی است که بازدیدکننده دنبالش می‌گردد */
.ht-lang > .nav-link {
    border-color: var(--ht-border) !important;
    background: var(--ht-surface-2);
    box-shadow: var(--ht-relief-1);
}

.ht-lang .dropdown-menu {
    border-radius: var(--ht-radius);
    border-color: var(--ht-border);
    box-shadow: var(--ht-relief-3);
    padding: .35rem;
}

.ht-lang .dropdown-item {
    border-radius: var(--ht-radius-sm);
    padding: .45rem .7rem;
    font-size: .92rem;
}

.ht-lang .dropdown-item.active {
    background: var(--ht-primary);
    box-shadow: var(--ht-relief-1);
}

/* ---------- دکمه‌های برجسته ---------- */
.ht-btn {
    border-radius: 10px;
    box-shadow: var(--ht-relief-1);
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s;
}

.ht-btn:hover { transform: translateY(-1px); box-shadow: var(--ht-relief-2); }
.ht-btn:active { transform: translateY(1px); box-shadow: var(--ht-press); }

.ht-btn-primary {
    background: linear-gradient(180deg, var(--ht-primary), var(--ht-primary-dark));
    border-color: var(--ht-primary-dark);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 3px 8px -2px rgba(15, 118, 110, .45);
}

.ht-btn-primary:hover {
    background: linear-gradient(180deg, #14857b, var(--ht-primary-dark));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 8px 16px -4px rgba(15, 118, 110, .5);
}

.ht-btn-lg {
    padding: .72rem 1.5rem;
    font-size: 1.02rem;
    border-radius: 12px;
}

/* دکمهٔ روشن روی عکس — زمینهٔ تیرهٔ هیرو */
.ht-btn-glass {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    backdrop-filter: blur(6px);
}

.ht-btn-glass:hover {
    background: rgba(255, 255, 255, .24);
    color: #fff;
    text-decoration: none;
}

/* ---------- هیروی عکس‌دار ---------------------------------------------------
   عکسِ پشت، یک پردهٔ تیرهٔ فیروزه‌ای رویش، و متنِ سفید. پرده دو کار می‌کند:
   متن را خوانا نگه می‌دارد و رنگِ برند را به عکسی می‌دهد که رنگِ خودش را
   دارد — پس عوض‌کردنِ عکس، قالب را به هم نمی‌ریزد.
   -------------------------------------------------------------------------- */
.ht-hero {
    position: relative;
    isolation: isolate;
    border-bottom: none;
    padding: 4.25rem 0 3.75rem;
    color: #fff;
    background: #0b3b3a;
    overflow: hidden;
}

.ht-hero-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
}

.ht-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, rgba(8, 47, 46, .94) 12%, rgba(8, 47, 46, .72) 52%, rgba(3, 60, 86, .58)),
        radial-gradient(ellipse at 80% 110%, rgba(3, 105, 161, .5), transparent 60%);
}

/* لبهٔ پایین: گذرِ نرم به زمینهٔ روشنِ صفحه، تا خط‌کشیِ ناگهانی نباشد */
.ht-hero::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 5rem;
    z-index: -1;
    background: linear-gradient(to bottom, transparent, var(--ht-bg));
}

.ht-hero h1 {
    font-size: var(--ht-fs-display);
    line-height: 1.3;
    margin-bottom: 1rem;
    color: #fff;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, .3),
        0 2px 6px rgba(0, 0, 0, .35),
        0 14px 34px rgba(0, 0, 0, .45);
}

.ht-hero p.lead {
    color: rgba(255, 255, 255, .88);
    font-size: var(--ht-fs-lead);
    line-height: 1.95;
    max-width: 40rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.ht-hero .ht-eyebrow {
    color: #fff;
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* کارتِ آمار روی هیرو — شیشه‌ای، تا عکس پشتش حس شود */
.ht-hero-stats {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: var(--ht-radius-lg);
    padding: 1.35rem;
    backdrop-filter: blur(14px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 26px 50px -20px rgba(0, 0, 0, .6);
}

.ht-hero-stats .ht-stat-value {
    font-size: 2.1rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

.ht-hero-stats .ht-stat-label {
    color: rgba(255, 255, 255, .78);
    font-size: var(--ht-fs-micro);
}

.ht-hero-stats hr {
    border-color: rgba(255, 255, 255, .25);
    opacity: 1;
}

.ht-hero-stats .ht-disclaimer {
    color: rgba(255, 255, 255, .8);
    font-size: var(--ht-fs-micro);
    line-height: 1.8;
}

/* اعتبارِ عکسِ هیرو — کوچک، گوشه، ولی هست */
.ht-photo-credit {
    position: absolute;
    inset-inline-end: .75rem;
    bottom: .5rem;
    z-index: 1;
    font-size: .66rem;
    color: rgba(255, 255, 255, .5);
}

.ht-photo-credit a { color: inherit; text-decoration: underline; }
.ht-photo-credit a:hover { color: rgba(255, 255, 255, .85); }

/* ---------- کاشیِ تخصص: کادرِ رنگی و برجسته ---------- */
.ht-tile {
    position: relative;
    border-radius: 14px;
    padding: 1.15rem 1.1rem;
    border-color: var(--ht-border);
    box-shadow: var(--ht-relief-1);
    overflow: hidden;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}

/* نوارِ رنگیِ بالای کاشی: لحنِ تخصص، پیش از خواندنِ نامش */
.ht-tile::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hue, var(--ht-primary)), var(--hue-dark, var(--ht-primary-dark)));
    opacity: .9;
}

.ht-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--ht-relief-3);
    border-color: var(--hue-tint, var(--ht-primary-light));
}

.ht-tile-icon {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 12px;
    font-size: 1.45rem;
    background: linear-gradient(160deg, var(--hue, var(--ht-primary)), var(--hue-dark, var(--ht-primary-dark)));
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -2px 0 rgba(0, 0, 0, .16),
        0 6px 12px -4px rgba(21, 42, 53, .4);
    transition: transform .18s;
}

.ht-tile:hover .ht-tile-icon { transform: translateY(-2px) scale(1.04); }

.ht-tile strong {
    font-size: 1.02rem;
    color: var(--hue-dark, var(--ht-text));
}

/* کاشیِ فشرده — بازارهای هدف، که فقط یک نام و یک نامِ بومی دارند */
.ht-tile-compact { padding: .85rem .7rem; }
.ht-tile-compact strong { font-size: .95rem; }

/* ---------- کارتِ عکس‌دارِ مقصد ---------------------------------------------
   شهر را عکسش معرفی می‌کند و نه نامش: کسی که «یزد» را نمی‌شناسد، از روی
   تصویرِ میدانِ امیرچخماق تصمیم می‌گیرد که بخواند یا نه.
   -------------------------------------------------------------------------- */
.ht-photo-card {
    display: block;
    position: relative;
    border-radius: var(--ht-radius-lg);
    overflow: hidden;
    min-height: 13.5rem;
    color: #fff;
    box-shadow: var(--ht-relief-2);
    transition: box-shadow .2s, transform .2s;
    isolation: isolate;
}

.ht-photo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ht-relief-3);
    color: #fff;
    text-decoration: none;
}

.ht-photo-card-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.ht-photo-card:hover .ht-photo-card-img { transform: scale(1.07); }

.ht-photo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(6, 30, 38, .92) 4%, rgba(6, 30, 38, .55) 42%, rgba(6, 30, 38, .12) 78%);
}

.ht-photo-card-body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1rem 1.1rem;
}

.ht-photo-card-body strong {
    display: block;
    font-size: 1.15rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

.ht-photo-card-body small {
    display: block;
    color: rgba(255, 255, 255, .82);
    font-size: var(--ht-fs-small);
    line-height: 1.7;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.ht-photo-card-tag {
    position: absolute;
    inset-inline-start: .85rem;
    top: .85rem;
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .7rem;
    backdrop-filter: blur(8px);
}

/* ---------- پنلِ عکس‌دارِ بزرگ ---------- */
.ht-feature {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 17rem;
    border-radius: var(--ht-radius-lg);
    overflow: hidden;
    color: #fff;
    box-shadow: var(--ht-relief-2);
    isolation: isolate;
}

.ht-feature-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.ht-feature:hover .ht-feature-img { transform: scale(1.05); }

.ht-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(7, 37, 44, .93), rgba(7, 37, 44, .5) 55%, rgba(7, 37, 44, .18));
}

.ht-feature-body { padding: 1.4rem 1.5rem; width: 100%; }

.ht-feature-body h3 {
    font-size: 1.3rem;
    margin-bottom: .45rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.ht-feature-body p {
    color: rgba(255, 255, 255, .85);
    font-size: var(--ht-fs-small);
    line-height: 1.85;
    margin-bottom: .9rem;
}

/* ---------- آمارِ برجسته ---------- */
.ht-stat-value {
    font-size: 1.75rem;
    letter-spacing: -.01em;
}

.ht-stat {
    box-shadow: var(--ht-relief-1);
    border-radius: 14px;
}

/* ---------- نوارِ مرحله‌های پرونده، برجسته ---------- */
.ht-stage::after {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 2px 4px rgba(21, 42, 53, .18);
}

.ht-stage.is-current::after {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .4),
        0 0 0 4px var(--ht-primary-light),
        0 4px 10px -2px rgba(15, 118, 110, .5);
}

/* ---------- کارت و سایدبارِ کادربندی‌شده ---------- */
.ht-card { box-shadow: var(--ht-relief-1); }
.ht-card-hover:hover { box-shadow: var(--ht-relief-3); transform: translateY(-3px); }

.ht-sidebar {
    box-shadow: var(--ht-relief-2);
    padding: .6rem;
}

/* هر دستهٔ منو یک کادرِ خودش دارد: چشم گروه‌ها را می‌بیند و نه یک ستونِ
   بیست‌تایی از لینک. */
.ht-sidebar-box {
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius-sm);
    background: linear-gradient(180deg, #fbfdfe, var(--ht-surface-2));
    padding: .3rem;
    margin-bottom: .5rem;
    box-shadow: var(--ht-relief-1);
}

.ht-sidebar-group {
    padding: .4rem .55rem .3rem;
    color: var(--ht-text-dim);
    border-bottom: 1px dashed var(--ht-border);
    margin-bottom: .25rem;
}

.ht-sidebar a {
    border: 1px solid transparent;
    transition: background .14s, color .14s, border-color .14s, box-shadow .14s, transform .12s;
}

.ht-sidebar a:hover {
    background: var(--ht-surface);
    border-color: var(--ht-border);
    box-shadow: var(--ht-relief-1);
    transform: translateY(-1px);
}

.ht-sidebar a.active {
    background: linear-gradient(180deg, var(--ht-primary), var(--ht-primary-dark));
    border-color: var(--ht-primary-dark);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 3px 7px -2px rgba(15, 118, 110, .55);
    transform: none;
}

/* ---------- صفحهٔ اعتبارِ عکس‌ها ---------- */
.ht-credit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
}

.ht-credit-item {
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius);
    overflow: hidden;
    background: var(--ht-surface);
    box-shadow: var(--ht-relief-1);
}

.ht-credit-item img {
    display: block;
    width: 100%;
    height: 7.5rem;
    object-fit: cover;
}

.ht-credit-item div {
    padding: .6rem .75rem;
    font-size: var(--ht-fs-micro);
    line-height: 1.8;
    color: var(--ht-text-dim);
}

/* ---------- فوتر ---------- */
.ht-footer { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

/* ---------- حرکت ---------------------------------------------------------
   هرکس که «کاهشِ حرکت» را در سیستمش روشن کرده، همین را می‌خواهد. برجستگی
   می‌ماند و فقط جابه‌جایی و بزرگ‌نمایی برداشته می‌شود.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .ht-tile:hover,
    .ht-card-hover:hover,
    .ht-photo-card:hover,
    .ht-btn:hover,
    .ht-sidebar a:hover,
    .ht-topbar .nav-item > .nav-link:hover { transform: none; }

    .ht-photo-card:hover .ht-photo-card-img,
    .ht-feature:hover .ht-feature-img,
    .ht-tile:hover .ht-tile-icon { transform: none; }
}

/* ---------- چاپ ---------- */
@media print {
    .ht-hero-photo, .ht-photo-card-img, .ht-feature-img { display: none; }
}

/* ---------- کارتی که لحنِ رنگی دارد ------------------------------------
   کاشیِ تخصص در صفحهٔ اصلی و کارتِ همان تخصص در فهرستِ تخصص‌ها باید یک رنگ
   داشته باشند، وگرنه رنگ به‌جای نشانه، تزیین می‌شود. ساختارِ دو جزء فرق
   دارد (یکی کاشی است و یکی کارت با بدنه)، پس نوار و آیکن اینجا دوباره
   تعریف می‌شوند و نه با کپی‌کردنِ کلاسِ کاشی روی کارت — که فاصله‌ها را دو
   برابر می‌کرد.
   -------------------------------------------------------------------- */
.ht-card-hue {
    position: relative;
    overflow: hidden;
}

.ht-card-hue::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hue, var(--ht-primary)), var(--hue-dark, var(--ht-primary-dark)));
}

.ht-card-hue:hover { border-color: var(--hue-tint, var(--ht-primary-light)); }

.ht-card-hue .ht-tile-icon {
    background: linear-gradient(160deg, var(--hue, var(--ht-primary)), var(--hue-dark, var(--ht-primary-dark)));
    color: #fff;
}

.ht-card-hue h2 a { color: var(--hue-dark, var(--ht-text)); }

/* برچسبِ شمارِ مرکز روی کارتِ عکس‌دار — بیرون از گوشه، درونِ متن */
.ht-photo-card-tag.position-static {
    position: static;
    backdrop-filter: none;
    background: rgba(255, 255, 255, .2);
}

/* هشدارِ طلاییِ ht-disclaimer روی کارتِ شیشه‌ایِ هیرو خوانده نمی‌شود: زمینهٔ
   کرم روی زمینهٔ تیره یک لکه است و متنِ قهوه‌ای‌اش هم کنتراست ندارد. همان
   هشدار، با رنگ‌های خودِ هیرو. */
.ht-hero-stats .ht-disclaimer {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .28);
    color: rgba(255, 255, 255, .85);
}

/* نامِ برند در زبان‌های دیگر بلندتر از فارسی است و در منوی کادربندی‌شده به
   سه خط می‌شکست. دو خط، با نامِ لاتینِ زیرش، همان چیزی است که باید دیده شود. */
.ht-brand > span { line-height: 1.35; }
.ht-brand-sub { white-space: nowrap; }

@media (min-width: 992px) {
    .ht-brand { max-width: 15rem; }
}

/* ---------- کاشیِ تخصص با عکسِ درمان ---------------------------------------
   نوارِ عکس بالای کاشی می‌نشیند و آیکنِ رنگی نیمی روی عکس و نیمی روی کارت —
   همان گره‌ای که عکس را به رنگِ تخصص وصل می‌کند. بی این هم‌پوشانی، کاشی دو
   تکهٔ بی‌ربط می‌شد: یک عکس، و زیرش یک کارتِ رنگی.
   -------------------------------------------------------------------------- */
.ht-tile-photo { padding: 0; overflow: hidden; }

.ht-tile-img {
    display: block;
    position: relative;
    height: 7.5rem;
    overflow: hidden;
    background: var(--hue-tint, var(--ht-surface-2));
}

.ht-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.ht-tile-photo:hover .ht-tile-img img { transform: scale(1.06); }

/* پردهٔ کم‌رنگِ رنگِ تخصص روی عکس، تا دوازده عکسِ ناهمرنگ یک مجموعه به نظر
   برسند و نه دوازده عکسِ جدا. */
.ht-tile-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--hue, #0f766e) 55%, transparent));
    mix-blend-mode: multiply;
}

.ht-tile-photo .ht-tile-icon {
    margin: -1.45rem 1.05rem .55rem;
    position: relative;
    z-index: 1;
}

.ht-tile-photo strong,
.ht-tile-photo small { padding-inline: 1.05rem; }
.ht-tile-photo small { display: block; padding-bottom: 1.05rem; }

/* نوارِ عکس روی کارتِ فهرستِ تخصص‌ها */
.ht-card-img {
    height: 8.5rem;
    overflow: hidden;
    border-radius: var(--ht-radius) var(--ht-radius) 0 0;
}

.ht-card-img img { width: 100%; height: 100%; object-fit: cover; }

.ht-card-hue .ht-card-img + .ht-card-body .ht-tile-icon {
    margin-top: -2.1rem;
    position: relative;
    z-index: 1;
}

/* ---------- سربرگِ عکس‌دارِ صفحهٔ تخصص ---------- */
.ht-topic {
    position: relative;
    isolation: isolate;
    color: #fff;
    padding: 3rem 0 2.5rem;
    overflow: hidden;
    background: var(--hue-dark, var(--ht-primary-dark));
}

.ht-topic-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ht-topic::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--hue-dark, #115e59) 94%, transparent) 10%,
        color-mix(in srgb, var(--hue, #0f766e) 72%, transparent) 60%,
        color-mix(in srgb, var(--hue, #0f766e) 42%, transparent));
}

.ht-topic h1 {
    font-size: var(--ht-fs-h1);
    margin-bottom: .6rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

.ht-topic p {
    color: rgba(255, 255, 255, .9);
    line-height: 2;
    max-width: 46rem;
    margin-bottom: .5rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.ht-topic small { color: rgba(255, 255, 255, .62); font-size: var(--ht-fs-micro); }

/* ---------- حساب‌های نمونه (فقط محیط توسعه) ---------- */
.ht-dev-card { border-color: #fcd34d; }

.ht-demo-group {
    border: 1px solid var(--ht-border);
    border-inline-start: 3px solid var(--hue, var(--ht-primary));
    border-radius: var(--ht-radius-sm);
    margin-bottom: .6rem;
    overflow: hidden;
    box-shadow: var(--ht-relief-1);
}

.ht-demo-group-head {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .7rem;
    background: var(--hue-tint, var(--ht-surface-2));
    color: var(--hue-dark, var(--ht-text));
    font-size: .82rem;
    font-weight: 700;
}

.ht-demo-group-head span { font-weight: 400; opacity: .75; }

.ht-demo-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    text-align: start;
    border: 0;
    border-top: 1px solid var(--ht-border);
    background: var(--ht-surface);
    padding: .5rem .7rem;
    cursor: pointer;
    transition: background .12s;
}

.ht-demo-group > .ht-demo-row:first-of-type { border-top: 0; }
.ht-demo-row:hover { background: var(--ht-surface-2); }

.ht-demo-who { flex: 1; min-width: 0; }
.ht-demo-who strong { display: block; font-size: .88rem; font-weight: 600; }
.ht-demo-who small { color: var(--ht-text-faint); font-size: .76rem; }

.ht-demo-creds { display: flex; flex-direction: column; gap: .1rem; text-align: end; }
.ht-demo-creds code { font-size: .72rem; color: var(--ht-text-dim); background: none; padding: 0; }

.ht-demo-row > i { color: var(--ht-text-faint); flex: none; }
.ht-demo-row:hover > i { color: var(--ht-primary); }

@media (max-width: 575px) {
    .ht-demo-row { flex-wrap: wrap; }
    .ht-demo-creds { text-align: start; width: 100%; }
}

/* ---------- کارت شناسایی ---------------------------------------------------
   اندازه‌اش نسبتِ کارتِ بانکی را دنبال می‌کند، چون همان‌جایی می‌رود که کارت
   می‌رود: جیب، کیف، و پشتِ شیشهٔ میز. در چاپ هم همین نسبت می‌ماند.
   -------------------------------------------------------------------------- */
.ht-idcard {
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius-lg);
    overflow: hidden;
    background: var(--ht-surface);
    box-shadow: var(--ht-relief-3);
}

.ht-idcard-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1.1rem;
    background: linear-gradient(100deg, var(--ht-primary-dark), var(--ht-primary) 60%, var(--ht-accent));
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18);
}

.ht-idcard-mark {
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    background: #fff;
    border-radius: 10px;
    padding: 2px;
}

.ht-idcard-head strong { display: block; font-size: .98rem; line-height: 1.4; }
.ht-idcard-head small { display: block; font-size: .66rem; opacity: .8; letter-spacing: .06em; }

.ht-idcard-badge {
    margin-inline-start: auto;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    padding: .18rem .6rem;
    font-size: .72rem;
    white-space: nowrap;
}

.ht-idcard-body {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.1rem;
    flex-wrap: wrap;
}

.ht-idcard-who { flex: 1; min-width: 12rem; }
.ht-idcard-who h1 { font-size: 1.35rem; margin-bottom: .2rem; }
.ht-idcard-who p { color: var(--ht-text-dim); font-size: .9rem; margin-bottom: .7rem; }

.ht-idcard-code {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ht-primary-dark);
    background: var(--ht-primary-light);
    border: 1px solid rgba(15, 118, 110, .25);
    border-radius: var(--ht-radius-sm);
    padding: .25rem .7rem;
    box-shadow: var(--ht-relief-1);
}

.ht-idcard-who small { display: block; margin-top: .45rem; color: var(--ht-text-faint); font-size: .8rem; }
.ht-idcard-unverified { color: var(--ht-warn) !important; }

.ht-idcard-qr { text-align: center; flex: none; }
.ht-idcard-qr img, .ht-idcard-qr canvas { display: block; border-radius: 6px; }
.ht-idcard-qr small { display: block; margin-top: .35rem; color: var(--ht-text-faint); font-size: .7rem; }

.ht-idcard-foot {
    padding: .6rem 1.1rem;
    border-top: 1px solid var(--ht-border);
    background: var(--ht-surface-2);
    color: var(--ht-text-dim);
    font-size: .74rem;
    line-height: 1.8;
}

/* ---------- جعبهٔ کد ---------- */
.ht-code-form { display: flex; gap: .5rem; }
.ht-code-form input { text-align: center; font-size: 1.1rem; letter-spacing: .1em; }

.ht-code-hints {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem .9rem;
    font-size: .78rem;
    color: var(--ht-text-faint);
}

.ht-code-hints code { background: var(--ht-surface-2); padding: 0 .3rem; border-radius: 4px; }

/* ---------- نمونهٔ پیامک ----------------------------------------------------
   شکلِ حبابِ پیامک روی گوشی، چون چیزی که نشان می‌دهیم یک پیامک است و نه یک
   ردیفِ جدول. برچسبِ «نمایشی» از خودِ حباب جدا نمی‌شود.
   -------------------------------------------------------------------------- */
.ht-sms {
    background: var(--ht-surface);
    border: 1px solid var(--ht-border);
    border-radius: 16px;
    padding: .9rem 1rem;
    box-shadow: var(--ht-relief-2);
    position: relative;
}

.ht-sms + .ht-sms { margin-top: .7rem; }

.ht-sms-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    color: var(--ht-text-faint);
    margin-bottom: .45rem;
}

.ht-sms-head .ht-badge { margin-inline-start: auto; }
.ht-sms-body { font-size: .88rem; line-height: 1.95; }

.ht-sms-phone {
    background: linear-gradient(180deg, #16343f, #0e252d);
    border-radius: 22px;
    padding: 1.1rem .9rem;
    box-shadow: var(--ht-relief-3);
}

.ht-sms-phone .ht-sms { border-color: transparent; }

/* ---------- چاپِ کارت ---------- */
@media print {
    .ht-topbar, .ht-trustbar, .ht-footer, .ht-no-print { display: none !important; }
    .ht-idcard { box-shadow: none; border-color: #999; }
    .ht-idcard-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* نشانِ برند حالا یک تصویر است و نه کادرِ گرادیانِ آیکن‌دار: پس‌زمینه و سایهٔ
   داخلی برداشته می‌شوند، وگرنه دورِ یک لوگوی شفاف یک مربعِ فیروزه‌ای می‌ماند. */
.ht-brand-mark {
    background: none;
    box-shadow: none;
    width: 2.3rem;
    height: 2.3rem;
    padding: 0;
    border-radius: 0;
    object-fit: contain;
}

/* کارتِ نمونه روی صفحهٔ اصلی: همان کارت، کوچک‌تر و کلیک‌پذیر. */
.ht-idcard-sample {
    display: block;
    color: inherit;
    transition: transform .18s, box-shadow .18s;
}

.ht-idcard-sample:hover {
    transform: translateY(-3px);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--ht-relief-3);
}

.ht-idcard-sample .ht-idcard-body { padding: .9rem; gap: .75rem; }
.ht-idcard-sample .ht-idcard-who h1 { font-size: 1.05rem; }
.ht-idcard-sample .ht-idcard-who p { font-size: .8rem; margin-bottom: .5rem; }
.ht-idcard-sample .ht-idcard-code { font-size: 1rem; }
.ht-idcard-sample .ht-idcard-head { padding: .6rem .8rem; }
.ht-idcard-sample .ht-idcard-mark { width: 2rem; height: 2rem; }
.ht-idcard-sample .ht-idcard-head strong { font-size: .82rem; }
.ht-idcard-sample .ht-idcard-head small { font-size: .58rem; }

.ht-idcard-qr-stub {
    width: 3.6rem;
    height: 3.6rem;
    display: grid;
    place-items: center;
    border: 1px dashed var(--ht-border-strong);
    border-radius: 8px;
    color: var(--ht-text-faint);
    font-size: 1.8rem;
}

/* شناسهٔ عضو زیر دکمه‌ها — کوچک، ولی کلیک‌پذیر، چون همان چیزی است که روی
   کارت چاپ می‌شود و بازدیدکننده باید بتواند ببیند کارتش چه شکلی است. */
.ht-idcard-codelink {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .84rem;
    letter-spacing: .06em;
    color: var(--ht-text-dim);
    border: 1px dashed var(--ht-border-strong);
    border-radius: 999px;
    padding: .15rem .7rem;
}

.ht-idcard-codelink:hover {
    color: var(--ht-primary);
    border-color: var(--ht-primary);
    text-decoration: none;
}

/* ---------- منوی موبایل ------------------------------------------------
   کادربندیِ منو تا اینجا فقط روی دسکتاپ دیده می‌شد: کادر و برجستگیِ هر قلم
   به :hover گره خورده بود، و روی لمس hover وجود ندارد. نتیجه این بود که
   منوی بازشدهٔ موبایل یک ستونِ متنِ شناور می‌شد — همان چیزی که قرار بود
   کادربندی از بین ببرد.

   اینجا کادر همیشگی است و نه روی hover، چون روی صفحهٔ لمسی «حالتِ عادی»
   تنها حالتی است که کاربر می‌بیند.
   ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .ht-topbar .navbar-collapse {
        margin-top: .75rem;
        padding: .6rem;
        background: var(--ht-surface-2);
        border: 1px solid var(--ht-border);
        border-radius: var(--ht-radius);
        box-shadow: var(--ht-relief-2);
    }

    .ht-topbar .navbar-nav { gap: .35rem; margin: 0; }

    /* هر قلم یک کادرِ کامل و تمام‌عرض: هدفِ لمس درشت می‌شود و فهرست
       به‌جای ستونی از متن، ستونی از دکمه‌ها می‌شود. */
    .ht-topbar .nav-item > .nav-link {
        background: var(--ht-surface);
        border-color: var(--ht-border);
        border-radius: 10px;
        box-shadow: var(--ht-relief-1);
        padding: .6rem .85rem !important;
        display: flex;
        align-items: center;
        gap: .5rem;
        min-height: 2.75rem;
    }

    .ht-topbar .nav-item > .nav-link.active {
        background: linear-gradient(180deg, var(--ht-primary), var(--ht-primary-dark));
        border-color: var(--ht-primary-dark);
        color: #fff;
    }

    /* دستهٔ دوم — زبان، ورود، عضویت — با یک خط از فهرستِ پیمایش جدا می‌شود.
       بی این، «عضویت در اکوسیستم» قلمِ هشتمِ منو به نظر می‌رسید. */
    .ht-topbar .navbar-nav + .navbar-nav {
        margin-top: .6rem;
        padding-top: .6rem;
        border-top: 1px dashed var(--ht-border-strong);
    }

    .ht-lang > .nav-link { justify-content: space-between; }

    .ht-lang .dropdown-menu {
        width: 100%;
        box-shadow: var(--ht-relief-2);
    }

    /* دکمهٔ ثبت‌نام در فهرست، تمام‌عرض و هم‌قدِ بقیه. */
    .ht-topbar .navbar-nav .ht-btn {
        width: 100%;
        justify-content: center;
        min-height: 2.75rem;
        border-radius: 10px;
    }

    /* دکمهٔ «خروج» که داخل یک فرم نشسته هم باید کادرِ خودش را داشته باشد. */
    .ht-topbar .nav-item form { width: 100%; }
    .ht-topbar .nav-item form .nav-link { width: 100%; justify-content: center; }

    .navbar-toggler {
        border: 1px solid var(--ht-border) !important;
        border-radius: 10px;
        background: var(--ht-surface);
        box-shadow: var(--ht-relief-1);
        padding: .25rem .55rem;
    }
}

/* ---------- موارد پیشنهادی برای بررسی ---------- */
.ht-agegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .6rem;
}

.ht-ageitem {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    border: 1px solid var(--ht-border);
    border-inline-start: 3px solid var(--ht-accent);
    border-radius: var(--ht-radius-sm);
    background: var(--ht-surface);
    padding: .6rem .7rem;
    box-shadow: var(--ht-relief-1);
}

.ht-ageitem > i {
    color: var(--ht-accent);
    font-size: 1.05rem;
    flex: none;
    margin-top: .1rem;
}

.ht-ageitem strong { display: block; font-size: .88rem; font-weight: 600; }
.ht-ageitem small { color: var(--ht-text-dim); font-size: .78rem; line-height: 1.75; }

/* ---------- کلید زبان در نوار بالا --------------------------------------
   از منو به نوارِ اعتماد آمد. روی زمینهٔ تیرهٔ نوار می‌نشیند، پس رنگ‌هایش
   وارونهٔ حالتِ قبلی‌اند، و همیشه دیده می‌شود — چیزی که وقتی ته منوی
   جمع‌شدهٔ موبایل بود، نبود.
   ------------------------------------------------------------------------ */
.ht-lang-top { margin-inline-start: auto; }

.ht-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .34);
    color: #fff;
    border-radius: 999px;
    padding: .18rem .7rem;
    font-size: var(--ht-fs-micro);
    font-weight: 500;
    line-height: 1.7;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.ht-lang-toggle:hover,
.ht-lang-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, .26);
    border-color: rgba(255, 255, 255, .6);
}

.ht-lang-caret { font-size: .6rem; opacity: .8; }

/* فهرستِ بازشده روی زمینهٔ روشنِ صفحه می‌افتد و نه روی نوار، پس رنگِ عادی. */
.ht-lang-top .dropdown-menu {
    border-radius: var(--ht-radius);
    border-color: var(--ht-border);
    box-shadow: var(--ht-relief-3);
    padding: .35rem;
    min-width: 11rem;
}

.ht-lang-top .dropdown-item {
    border-radius: var(--ht-radius-sm);
    padding: .45rem .7rem;
    font-size: .92rem;
}

.ht-lang-top .dropdown-item.active { background: var(--ht-primary); }

/* روی موبایل، قلم‌های سوم به بعدِ نوار پنهان می‌شوند تا نوار سه خط نشود —
   ولی کلیدِ زبان از آن قاعده مستثناست، چون کلِ دلیلِ آوردنش به اینجا همین
   بود که روی گوشی هم بی‌گشتن پیدا شود. */
@media (max-width: 575px) {
    .ht-trustbar .ht-lang-top { display: inline-flex; }
    .ht-trustbar > .container > span:nth-child(2) { display: none; }

    /* نامِ زبان روی گوشی هم می‌ماند: کلِ دلیلِ آوردنِ این کلید به نوارِ بالا
       این بود که کسی که صفحه را نمی‌خواند «العربية» را ببیند. */
    .ht-lang-toggle span { display: inline; }
}

/* ---------- صفحهٔ ورود ------------------------------------------------------
   دو ستون: فرم، و پنلی که می‌گوید پشتِ این فرم چیست. روی موبایل فرم اول
   می‌آید و پنل بعدش — کسی که روی صفحهٔ ورود ایستاده آمده وارد شود و نه
   معرفی بخواند.
   -------------------------------------------------------------------------- */
.ht-login { padding-block: 2.5rem 3.5rem; }

.ht-login-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
    max-width: 62rem;
    margin-inline: auto;
}

@media (min-width: 992px) {
    .ht-login-split { grid-template-columns: 1.15fr .85fr; }
}

.ht-login-form {
    background: var(--ht-surface);
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius-lg);
    padding: 1.75rem;
    box-shadow: var(--ht-relief-2);
    order: 1;
}

.ht-login-form h1 { font-size: 1.4rem; margin-bottom: .3rem; }
.ht-login-lead { color: var(--ht-text-dim); font-size: .9rem; line-height: 1.9; margin-bottom: 1.25rem; }

/* پنلِ برند */
.ht-login-brand {
    order: 2;
    border-radius: var(--ht-radius-lg);
    padding: 1.75rem;
    color: #fff;
    background:
        radial-gradient(ellipse at 80% 0%, rgba(3, 105, 161, .45), transparent 60%),
        linear-gradient(160deg, var(--ht-primary-dark), #0b3b3a 70%);
    box-shadow: var(--ht-relief-3);
}

@media (min-width: 992px) {
    /* روی دسکتاپ پنل کنارِ فرم می‌نشیند و نه زیرش. */
    .ht-login-brand { order: 0; position: sticky; top: 5rem; }
}

/* روی گوشی پنل زیرِ فرم است — ولی نه وقتی فهرستِ حساب‌ها درونش
   است: آن وقت دلیلِ بازکردنِ صفحه خودِ فهرست است و نه فرمِ خالی. */
@media (max-width: 991.98px) {
    .ht-login-brand:has(.ht-demo) { order: 0; }
}

.ht-login-mark {
    width: 3.2rem;
    height: 3.2rem;
    background: #fff;
    border-radius: 12px;
    padding: 3px;
    margin-bottom: 1rem;
}

.ht-login-brand h2 { font-size: 1.25rem; margin-bottom: .5rem; }

.ht-login-brand p {
    color: rgba(255, 255, 255, .82);
    font-size: .88rem;
    line-height: 1.95;
    margin-bottom: 1.25rem;
}

.ht-login-brand ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }

.ht-login-brand li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .86rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .92);
}

.ht-login-brand li i { color: rgba(255, 255, 255, .62); margin-top: .15rem; flex: none; }

/* ---------- حساب‌های نمونه -------------------------------------------------
   کارتی روشن در دلِ پنلِ تیره. جایش دو بار عوض شد و دلیلش هر دو بار یکی بود:
   نصبی که نمایشی است، این فهرست بالاترین چیزِ کارش است و نه پانوشتِ صفحه.
   -------------------------------------------------------------------------- */
.ht-demo {
    background: var(--ht-surface);
    color: var(--ht-text);
    border-radius: var(--ht-radius);
    padding: .85rem;
    box-shadow: var(--ht-relief-2);
}

.ht-demo-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ht-text);
    margin-bottom: .6rem;
}

.ht-demo-head i { color: var(--ht-primary); }

.ht-demo-head small {
    margin-inline-start: auto;
    font-size: .72rem;
    font-weight: 400;
    color: var(--ht-text-faint);
}

.ht-demo-warn { margin: 0 0 .6rem; font-size: .76rem; line-height: 1.75; }

/* فهرست هر چقدر بلند شود، ستونِ خودش می‌لغزد و نه صفحه — وگرنه نوزده ردیف
   پنل را از قدِ فرم درازتر می‌کرد. */
.ht-demo-scroll {
    max-height: 19rem;
    overflow-y: auto;
    border-radius: var(--ht-radius-sm);
}

/* جدولِ پایه min-width دارد تا ستون‌هایش له نشوند. این یکی چهار ستونِ
   کوتاه دارد و در ستونی باریک می‌نشیند؛ آن قاعده اینجا فقط کلِ صفحه را روی
   گوشی افقی می‌لغزاند — ۶۶۰ پیکسل جدول در ۳۷۵ پیکسل صفحه. */
.ht-demo-table { margin: 0; font-size: .78rem; min-width: 0; }

.ht-demo-table th {
    font-size: .74rem;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--ht-surface-2);
    z-index: 1;
}

.ht-demo-table td { vertical-align: middle; }
.ht-demo-table code {
    font-size: .72rem;
    color: var(--ht-text-dim);
    background: none;
    padding: 0;
    /* نمی‌شکند. گذرواژه‌ای که روی دو خط افتاده باشد خواندنی نیست — درست
       همان چیزی که قرار است تایپ شود. اگر جا کم بیاید کادرِ فهرست افقی
       می‌لغزد و نه متن. */
    white-space: nowrap;
}

/* جا تنگ است: چهار ستون در ستونی که روی دسکتاپ حدود ۴۰۰ پیکسل است. */
.ht-demo-table th,
.ht-demo-table td { padding-inline: .35rem; }

.ht-demo-role { display: block; font-weight: 600; color: var(--ht-text); white-space: nowrap; }
.ht-demo-table small { color: var(--ht-text-faint); font-size: .7rem; }

.ht-demo-go {
    border: 1px solid var(--ht-border);
    background: var(--ht-surface);
    color: var(--ht-primary);
    border-radius: 7px;
    width: 1.85rem;
    height: 1.85rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--ht-relief-1);
    transition: background .12s, color .12s;
}

.ht-demo-go:hover { background: var(--ht-primary); color: #fff; border-color: var(--ht-primary-dark); }

@media (max-width: 575px) {
    /* روی گوشی ستونِ گذرواژه زیرِ نامِ کاربری می‌رود تا جدول افقی نلغزد. */
    .ht-demo-table thead { display: none; }
    .ht-demo-table tr { display: grid; grid-template-columns: 2rem 1fr; gap: .2rem .5rem; padding: .4rem 0; }
    .ht-demo-table td { border: 0; padding: 0; }
    .ht-demo-table td:first-child { grid-row: span 3; }

    /* روی گوشی هر قلم خطِ خودش را دارد، پس ایمیلِ بلند می‌تواند بشکند و
       نشکستنش صفحه را افقی می‌لغزاند. گذرواژه کوتاه است و جا می‌شود. */
    .ht-demo-table td:nth-child(3) code { white-space: normal; overflow-wrap: anywhere; }
}

/* خلاصهٔ اعتبارسنجی وقتی خطایی نیست جا نمی‌گیرد. تگ‌هلپر در آن حالت کلاسِ
   validation-summary-valid می‌گذارد؛ پیش از این کلاسِ خطا در مارک‌آپ
   کدگذاری شده بود و یک کادرِ قرمزِ خالی بالای فرم می‌ماند. */
.validation-summary-valid { display: none; }

/* ---------------------------------------------------------------------------
   نصبِ اپ — نوارِ پیشنهاد، فهرستِ مزیت‌ها و گام‌های نصب
   --------------------------------------------------------------------------- */

.ht-install-bar {
    position: fixed;
    inset-inline: 12px;
    bottom: 12px;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    border: 1px solid var(--ht-border-strong);
    border-radius: var(--ht-radius);
    background: var(--ht-surface);
    box-shadow: var(--ht-shadow-lg);
    font-size: .9rem;
}

.ht-install-bar > span { flex: 1 1 14rem; color: var(--ht-text); }

.ht-install-no {
    border: 0;
    background: transparent;
    color: var(--ht-text-dim);
    font-size: .86rem;
    text-decoration: underline;
    padding: .25rem .4rem;
    cursor: pointer;
}

.ht-install-no:hover { color: var(--ht-text); }

@media print { .ht-install-bar { display: none; } }

.ht-list { list-style: none; margin: 0; padding: 0; }

.ht-list li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .45rem 0;
    color: var(--ht-text-dim);
    font-size: .92rem;
}

.ht-list li i { color: var(--ht-primary); margin-top: .15rem; }

.ht-steps { padding-inline-start: 1.1rem; margin: 0; color: var(--ht-text-dim); font-size: .9rem; }
.ht-steps li { padding: .25rem 0; }

/* وقتی دکمهٔ نصبِ خودکار هست، گام‌های دستی راهنمای پشتیبان‌اند و نه راهِ اصلی. */
.ht-steps-secondary { font-size: .82rem; color: var(--ht-text-faint); }

/* صفحهٔ برون‌خط چیدمانِ خودش را دارد و پس‌زمینهٔ body از _Layout نمی‌آید. */
.ht-offline-page { background: var(--ht-bg); color: var(--ht-text); }

/* اثرانگشت فایل — تک‌عرض، چون قرار است کاراکتر‌به‌کاراکتر با رشتهٔ دیگری
   سنجیده شود و در قلم معمولی ۱ و l و I شبیه هم‌اند. */
.ht-hash {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    letter-spacing: .04em;
    line-height: 1.9;
    word-break: break-all;
    text-align: start;
}