/* ═══════════════════════════════════════════════════════════
   HVAC Applied — International B2B Design System
   Inspired by enterprise applied-HVAC patterns (light, photo-led)
═══════════════════════════════════════════════════════════ */


:root {
    --ha-blue: #00A1E4;
    --ha-blue-deep: #0077B6;
    --ha-blue-soft: #E8F7FC;
    --ha-ink: #1C2430;
    --ha-muted: #5B6775;
    --ha-line: #E3E8EF;
    --ha-paper: #FFFFFF;
    --ha-mist: #F5F7FA;
    --ha-sunk: #F1F5F9;
    --ha-eco: #2E9E5B;
    --ha-amber: #E8A317;
    --ha-shadow: 0 18px 50px rgba(28, 36, 48, .08);
    --ha-font: 'Vazirmatn', 'Sora', system-ui, sans-serif;
    --ha-display: 'Sora', 'Vazirmatn', system-ui, sans-serif;
}

/* ── Landing shell ── */
.svc-body {
    margin: 0;
    background: var(--ha-paper);
    font-family: var(--ha-font);
    color: var(--ha-ink);
}

/* فقط آیکون چت پشتیبانی بماند — بدون برچسب متنی زیر آن */
.svc-body .cw-launcher-label { display: none !important; }

.svc-app.lp-wrap {
    font-family: var(--ha-font);
    min-height: 100vh;
    background: var(--ha-paper);
    color: var(--ha-ink);
}

/* ── Utility bar ── */
.ha-util {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
    padding: 8px 40px;
    background: var(--ha-mist);
    border-bottom: 1px solid var(--ha-line);
    font-size: .78rem;
}
.ha-util a {
    color: var(--ha-muted);
    text-decoration: none;
    transition: color .2s;
}
.ha-util a:hover { color: var(--ha-blue-deep); }
.ha-util__eco {
    color: var(--ha-eco) !important;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ── Main header ── */
.ha-header {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 14px 40px;
    background: var(--ha-paper);
    border-bottom: 1px solid transparent;
    position: sticky;
    top: 0;
    z-index: 80;
    transition: box-shadow .25s, border-color .25s;
}
.ha-header--scrolled {
    box-shadow: 0 4px 24px rgba(28, 36, 48, .06);
    border-bottom-color: var(--ha-line);
}
.ha-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.ha-brand__mark {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(145deg, var(--ha-blue) 0%, var(--ha-blue-deep) 100%);
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--ha-display);
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: -.02em;
    box-shadow: 0 8px 20px rgba(0, 161, 228, .28);
}
.ha-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.ha-brand__name {
    font-family: var(--ha-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.03em;
    color: var(--ha-ink);
}
.ha-brand__name em {
    font-style: normal;
    color: var(--ha-blue);
}
.ha-brand__sub {
    font-size: .68rem;
    color: var(--ha-muted);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ha-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: auto;
    margin-left: 0;
}
.ha-nav a {
    color: var(--ha-ink);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    transition: background .2s, color .2s;
}
.ha-nav a:hover { background: var(--ha-blue-soft); color: var(--ha-blue-deep); }
.ha-header__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--ha-blue-soft);
    color: var(--ha-blue-deep) !important;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background .2s;
}
.ha-header__live:hover { background: var(--ha-blue); color: #fff !important; }
/* نامِ حسابِ واردشده، کنارِ «کارشناسانِ آنلاین» — فقط وقتی واردید نشان داده می‌شود. */
.ha-header__who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--ha-sunk, #f1f5f9);
    color: var(--ha-ink);
    font-size: .84rem;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 720px) { .ha-header__who { max-width: 96px; padding: 9px 10px; } }
.ha-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--ha-blue);
    color: #fff !important;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 161, 228, .28);
    transition: transform .2s, background .2s, box-shadow .2s;
}
.ha-header__cta:hover {
    background: var(--ha-blue-deep);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 119, 182, .32);
}

/* ── Hero — light applied composition (Daikin-like) ── */
.ha-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
    padding: 30px 40px;
    background:
        radial-gradient(1200px 480px at 85% -10%, rgba(0, 161, 228, .12), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F7FBFD 55%, #EEF5F9 100%);
    overflow: hidden;
}
.ha-hero__content {
    position: relative;
    z-index: 2;
    flex: 0 1 460px;
    min-width: 0;
    max-width: 560px;
    animation: ha-rise .9s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ha-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ha-hero__brand {
    font-family: var(--ha-display);
    font-size: clamp(1.75rem, 3.8vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--ha-ink);
    margin: 0 0 18px;
    line-height: 1.05;
}
.ha-hero__brand span { color: var(--ha-blue); }
.ha-hero h1 {
    margin: 0 0 14px;
    font-family: var(--ha-display);
    font-size: clamp(1.85rem, 4.4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
    color: var(--ha-ink);
    text-transform: uppercase;
}
.ha-hero h1 em {
    font-style: normal;
    color: var(--ha-blue);
}
.ha-hero__lead {
    margin: 0 0 28px;
    max-width: 540px;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--ha-muted);
    font-weight: 400;
}
.ha-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.ha-hero__media {
    position: relative;
    flex: 0 1 760px;
    min-width: 0;
    min-height: 440px;
    max-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 45%, var(--ha-blue-soft) 0%, #fff 65%);
}
/* ردیفِ سوم: همیشه بعدِ محتوا+عکس، تمامِ عرض را می‌گیرد تا به ردیفِ
   بعدی برود — یعنی زیرِ عکس، نه کنارِ متن. */
.ha-hero__apps {
    position: relative;
    z-index: 2;
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
}
.ha-hero__wheel-wrap {
    position: relative;
    display: inline-block;
    max-width: 96%;
    max-height: 100%;
    line-height: 0;
}
.ha-hero__wheel-img { display: block; max-width: 100%; max-height: min(64vh, 700px); width: auto; height: auto; }
.ha-hero__click-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.ha-hero__sector {
    fill: transparent;
    stroke: transparent;
    cursor: pointer;
    outline: none;
    transition: .18s;
}
.ha-hero__sector:hover, .ha-hero__sector:focus {
    fill: rgba(0, 161, 228, .14);
    stroke: rgba(0, 161, 228, .5);
    stroke-width: 4;
}
.ha-hero__sector:active { fill: rgba(0, 161, 228, .26); }

/* ── مودال ویزارد سرویس (از روی چرخ هدر) ── */
.ha-wizard-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 34, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 16px;
}
.ha-wizard-modal__box {
    background: #fff;
    border-radius: 18px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 22px 22px 26px;
    position: relative;
    box-shadow: 0 30px 70px rgba(2, 6, 23, .35);
}
.ha-wizard-modal__close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--ha-mist);
    color: var(--ha-ink);
    font-size: 1rem;
    cursor: pointer;
    z-index: 1;
}
.ha-wizard-modal__close:hover { background: var(--ha-blue-soft); }
.ha-wizard-loading { padding: 30px 0; text-align: center; color: var(--ha-muted); }
.ha-wizard-done { text-align: center; padding: 20px 4px; }
.ha-wizard-done__icon { font-size: 2.4rem; display: block; margin-bottom: 10px; }
.ha-wizard-done h3 { margin: 0 0 8px; color: var(--ha-ink); }
.ha-wizard-done p { margin: 0 0 6px; color: var(--ha-muted); font-size: .9rem; }
.ha-wizard-done code { background: var(--ha-mist); padding: 2px 10px; border-radius: 6px; }
.ha-wizard-done__hint { margin-bottom: 18px !important; }
@media (max-width: 480px) {
    .ha-wizard-modal__box { padding: 20px 16px 22px; }
}
.ha-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 4px;
    font-family: inherit;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.ha-btn--primary {
    background: var(--ha-blue);
    color: #fff;
    box-shadow: 0 10px 28px rgba(0, 161, 228, .35);
}
.ha-btn--primary:hover {
    background: #0089c4;
    transform: translateY(-2px);
}
.ha-btn--ghost {
    background: transparent;
    color: var(--ha-ink);
    border: 1.5px solid #C9D3DE;
}
.ha-btn--ghost:hover {
    border-color: var(--ha-blue);
    color: var(--ha-blue-deep);
    background: var(--ha-blue-soft);
    transform: translateY(-2px);
}
.ha-btn--dark {
    background: var(--ha-ink);
    color: #fff;
}
.ha-btn--dark:hover { background: #0f1720; transform: translateY(-2px); }
.ha-btn--outline {
    background: transparent;
    color: var(--ha-ink);
    border: 1.5px solid var(--ha-line);
}
.ha-btn--outline:hover {
    border-color: var(--ha-blue);
    color: var(--ha-blue-deep);
}

/* ── Sections ── */
.ha-section {
    padding: 72px 40px;
}
.ha-section--mist { background: var(--ha-mist); }
.ha-section--ink {
    background: linear-gradient(135deg, #0f1a24 0%, #163048 55%, #0f1a24 100%);
    color: #fff;
}
.ha-section__head {
    max-width: 680px;
    margin: 0 0 40px;
}
.ha-section__head h2 {
    margin: 0 0 12px;
    font-family: var(--ha-display);
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
    color: inherit;
}
.ha-section__head p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ha-muted);
}
.ha-section--ink .ha-section__head p { color: rgba(255, 255, 255, .68); }
.ha-kicker {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ha-blue);
    margin-bottom: 10px;
}
.ha-section--ink .ha-kicker { color: #7dd3fc; }

/* Solutions — one job per block, not card-heavy clutter */
.ha-solutions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--ha-line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--ha-paper);
}
.ha-sol {
    padding: 32px 28px;
    border-left: 1px solid var(--ha-line);
    transition: background .25s;
}
.ha-sol:first-child { border-left: none; }
.ha-sol:hover { background: var(--ha-blue-soft); }
.ha-sol__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    color: var(--ha-blue);
}
.ha-sol__icon svg { width: 100%; height: 100%; }
.ha-sol h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ha-ink);
}
.ha-sol p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--ha-muted);
}

/* هفت خدمت — معرفی کارتی + دکمه‌ی «اطلاعات بیشتر» */
.ha-services7__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.ha-services7__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 36px;
}
.ha-svc7-card {
    background: var(--ha-paper);
    border: 1px solid var(--ha-line);
    border-radius: 14px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ha-svc7-card:hover { transform: translateY(-4px); box-shadow: var(--ha-shadow); border-color: var(--ha-blue); }
.ha-svc7-card__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--ha-blue-soft);
    color: var(--ha-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
}
.ha-svc7-card h3 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--ha-ink); }
.ha-svc7-card p { margin: 0; font-size: .86rem; line-height: 1.7; color: var(--ha-muted); flex: 1; }
.ha-svc7-card__more {
    display: none;
    margin: 0;
    padding-top: 10px;
    border-top: 1px dashed var(--ha-line);
    font-size: .84rem;
    line-height: 1.8;
    color: var(--ha-ink);
}
.ha-svc7-card--open .ha-svc7-card__more { display: block; }
.ha-svc7-card--open .ha-svc7-card__btn { color: var(--ha-blue-deep); }

/* نوار اعتماد */
.ha-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 44px;
    background: var(--ha-ink);
    border-radius: 14px;
    overflow: hidden;
}
.ha-trust__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    border-left: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
}
.ha-trust__item:first-child { border-left: none; }
.ha-trust__icon { font-size: 1.4rem; flex-shrink: 0; }
.ha-trust__item strong { display: block; font-size: .86rem; font-weight: 700; }
.ha-trust__item span { display: block; font-size: .74rem; color: rgba(255, 255, 255, .6); margin-top: 2px; }

@media (max-width: 1024px) {
    .ha-services7__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .ha-services7__grid { grid-template-columns: 1fr; }
    .ha-trust { grid-template-columns: 1fr 1fr; }
    .ha-trust__item:nth-child(3) { border-left: none; }
}

/* Intelligence band */
.ha-iq {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}
.ha-iq__visual {
    position: relative;
    min-height: 340px;
    border-radius: 4px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(0, 161, 228, .2), rgba(15, 26, 36, .45)),
        url('/acc-engine/assets/img/portals/service/story-tech.jpg') center/cover;
    box-shadow: var(--ha-shadow);
    animation: ha-fade-in 1.1s ease both .2s;
}
@keyframes ha-fade-in {
    from { opacity: 0; transform: scale(.98); }
    to   { opacity: 1; transform: scale(1); }
}
.ha-iq__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 28px;
}
.ha-iq__stat strong {
    display: block;
    font-family: var(--ha-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
}
.ha-iq__stat span {
    font-size: .82rem;
    color: rgba(255, 255, 255, .65);
}

/* Access portals — interaction containers (allowed) */
.ha-portals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
}
.ha-portal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 28px 24px;
    background: var(--ha-paper);
    border: 1px solid var(--ha-line);
    border-radius: 4px;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
    color: inherit;
    transition: border-color .2s, transform .2s, box-shadow .25s;
    position: relative;
    overflow: hidden;
}
.ha-portal::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--ha-blue);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s ease;
}
.ha-portal:hover {
    border-color: var(--ha-blue);
    transform: translateY(-3px);
    box-shadow: var(--ha-shadow);
}
.ha-portal:hover::before { transform: scaleX(1); }
.ha-portal__tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ha-blue);
}
.ha-portal strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ha-ink);
    letter-spacing: -.02em;
}
.ha-portal small {
    font-size: .88rem;
    color: var(--ha-muted);
    line-height: 1.55;
}
.ha-portal__go {
    margin-top: auto;
    padding-top: 14px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ha-blue-deep);
}
.ha-portal--talent { background: linear-gradient(180deg, #fff 0%, #F0FBFF 100%); }
.ha-portal--marketer { background: linear-gradient(180deg, #fff 0%, #FFFBF2 100%); }
.ha-portal--marketer::before { background: var(--ha-amber); }
.ha-portal--marketer .ha-portal__tag { color: #b45309; }

/* Case / proof */
.ha-case {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    background: var(--ha-paper);
    border: 1px solid var(--ha-line);
    overflow: hidden;
}
.ha-case__media {
    min-height: 320px;
    background:
        linear-gradient(135deg, rgba(0, 161, 228, .15), rgba(28, 36, 48, .45)),
        url('/acc-engine/assets/img/portals/service/story-building.jpg') center/cover;
}
.ha-case__body { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.ha-case__body h3 {
    margin: 0 0 14px;
    font-family: var(--ha-display);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.3;
}
.ha-case__body p {
    margin: 0 0 22px;
    color: var(--ha-muted);
    line-height: 1.7;
    font-size: .95rem;
}

/* HVAC Assistant — بخش «سناریوهای آزمایشی» و قاعده‌هایش حذف شدند. */
.ha-btn--sm {
    padding: 8px 14px;
    font-size: .8rem;
}
.ha-assistant {
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 55%, #0e7490 100%);
    color: #fff;
    border-radius: 18px;
    padding: 28px 24px;
    margin-bottom: 20px;
}
.ha-assistant__head .ha-kicker { color: #7dd3fc; }
.ha-assistant__head h3 {
    margin: 6px 0 8px;
    font-family: var(--ha-display);
    font-size: 1.45rem;
}
.ha-assistant__head p {
    margin: 0 0 16px;
    opacity: .85;
    font-size: .92rem;
}
.ha-assist-input {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: .95rem;
    resize: vertical;
    margin-bottom: 12px;
    box-sizing: border-box;
}
.ha-assist-out {
    margin-top: 14px;
    background: rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: .9rem;
}
.ha-assist-result ul { margin: 6px 0 10px; padding-right: 18px; }
.ha-assist-conf {
    display: inline-block;
    margin-right: 8px;
    background: rgba(125, 211, 252, .25);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .75rem;
}
.ha-assist-hint { opacity: .8; font-size: .82rem; }
.ha-assist-err { color: #fecaca; margin: 0; }
.svc-demo-hint {
    margin-top: 12px;
    font-size: .8rem;
    color: #64748b;
}
.svc-case-card--focus {
    outline: 2px solid #0ea5e9;
    background: #f0f9ff;
}
.cw-sup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-top: 8px;
}
.cw-sup-table th, .cw-sup-table td {
    border: 1px solid #e2e8f0;
    padding: 4px 6px;
    text-align: right;
}
.cw-sup-table th { background: #f1f5f9; }

/* Help strip — Daikin-style */
.ha-help {
    background: var(--ha-ink);
    color: #fff;
    padding: 48px 40px;
}
.ha-help__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.ha-help h2 {
    margin: 0 0 8px;
    font-family: var(--ha-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.03em;
}
.ha-help p {
    margin: 0;
    color: rgba(255, 255, 255, .65);
    font-size: .95rem;
}
.ha-help__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ha-help__actions .ha-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    border-radius: 4px;
    padding: 12px 18px;
    font-size: .88rem;
}
.ha-help__actions .ha-btn:hover {
    background: var(--ha-blue);
    border-color: var(--ha-blue);
}
.ha-help__actions .ha-btn--solid {
    background: var(--ha-blue);
    border-color: var(--ha-blue);
}

/* Footer */
.ha-footer {
    padding: 28px 40px;
    background: #0a1118;
    color: rgba(255, 255, 255, .45);
    font-size: .8rem;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ha-footer a { color: rgba(255, 255, 255, .55); text-decoration: none; }
.ha-footer a:hover { color: #fff; }

/* Scroll reveal */
.ha-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
.ha-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Auth screens — light applied theme */
.svc-app:not(.lp-wrap):not(.svc-app--workspace):not(.svc-talent) {
    min-height: 100vh;
    background: var(--ha-mist);
    color: var(--ha-ink);
}
.svc-app:not(.lp-wrap):not(.svc-app--workspace) .svc-header {
    background: var(--ha-paper);
    border-bottom: 1px solid var(--ha-line);
    color: var(--ha-ink);
}
.svc-app:not(.lp-wrap):not(.svc-app--workspace) .svc-brand {
    color: var(--ha-ink);
    font-family: var(--ha-display);
    font-weight: 800;
}
.svc-auth-card {
    max-width: 420px;
    margin: 48px auto;
    padding: 36px 32px;
    background: var(--ha-paper);
    border: 1px solid var(--ha-line);
    border-radius: 4px;
    box-shadow: var(--ha-shadow);
}
.svc-auth-card h3 {
    margin: 0 0 8px;
    font-family: var(--ha-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ha-ink);
    letter-spacing: -.02em;
}
.svc-auth-card p { color: var(--ha-muted); }
.svc-inp {
    background: var(--ha-mist);
    border: 1px solid var(--ha-line);
    color: var(--ha-ink);
    border-radius: 4px;
}
.svc-inp:focus { border-color: var(--ha-blue); box-shadow: 0 0 0 3px rgba(0, 161, 228, .15); }
.svc-btn--primary {
    background: var(--ha-blue);
    border-radius: 4px;
    padding: 12px 20px;
}
.svc-btn--primary:hover { background: var(--ha-blue-deep); }

/* Workspace header polish */
.svc-app--workspace .svc-header {
    background: #0f1a24;
    height: 60px;
}
.svc-app--workspace .svc-brand {
    font-family: var(--ha-display);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}
.svc-app--workspace .svc-brand::before {
    content: 'HA';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    border-radius: 6px;
    background: var(--ha-blue);
    font-size: .65rem;
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 1024px) {
    .ha-solutions { grid-template-columns: 1fr 1fr; }
    .ha-sol:nth-child(3) { border-right: none; }
    .ha-sol { border-top: 1px solid var(--ha-line); }
    .ha-sol:nth-child(-n+2) { border-top: none; }
    .ha-portals { grid-template-columns: 1fr 1fr; }
    .ha-iq, .ha-case { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .ha-util, .ha-header, .ha-section, .ha-help, .ha-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
    .ha-nav { display: none; }
    .ha-util { display: none; }
    .ha-header { gap: 10px; }
    .ha-header__live-label { display: none; }
    .ha-header__live { padding: 9px 11px; }
    .ha-header__cta { padding: 9px 14px; font-size: .86rem; }
    .ha-brand__sub { display: none; }
    .ha-hero { flex-direction: column; align-items: stretch; padding: 24px 20px; }
    .ha-hero__content { max-width: 100%; flex: 0 0 auto; }
    .ha-hero__media { min-height: 38vh; flex: 0 0 auto; width: 100%; }
    .ha-hero__wheel-img { max-height: 38vh; }
    /* padding-bottom: دکمهٔ شناورِ چتِ پشتیبانی (#acc-chat-launcher در
       chat-widget.css) پایین-راستِ صفحه ثابت است؛ وقتی کاربر درست تا
       آخرِ همین شبکهٔ کاشی اسکرول می‌کند، بدونِ این فاصله رویِ متنِ
       ردیفِ آخر می‌افتد — دیده شد رویِ کاشیِ «پیوستنِ به ما». */
    .ha-hero__apps { flex: 0 0 auto; margin-top: 20px; padding-bottom: 90px; }
    /* اینجا قبلاً `.ha-apps { grid-template-columns: 1fr; max-width: 100% }`
       بود — بازماندهٔ نسخهٔ یک‌ستونی. کدِ مرده بود: قاعدهٔ پایهٔ .ha-apps با
       همین وزن ولی ~۲۶۰۰ خط پایین‌تر می‌آید و بازنویسی‌اش می‌کرد. برداشته شد
       تا کسی فکر نکند این بازه چیدمانِ جدا دارد. */
    .ha-solutions, .ha-portals { grid-template-columns: 1fr; }
    .ha-sol { border-left: none !important; border-top: 1px solid var(--ha-line); }
    .ha-sol:first-child { border-top: none; }
    .ha-iq__stats { grid-template-columns: 1fr 1fr; }
    .ha-help__inner { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   بخش «چه کاری برایتان انجام دهیم؟» — هفت مسیر درخواست به‌صورت
   کارت واقعی. جایگزین سکتورهای نامرئی چرخ هیرو که روی لمس (بدون
   hover) هیچ نشانه‌ای نداشتند.
   ══════════════════════════════════════════════════════════════ */
.ha-request {
    padding: 64px 24px 56px;
    background: var(--ha-mist);
    border-block: 1px solid var(--ha-line);
}
.ha-request .ha-section__head { max-width: 720px; margin-inline: auto; text-align: center; }

.ha-request__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 16px;
    max-width: 1080px;
    margin: 28px auto 0;
}
.ha-reqcard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 26px 22px 22px;
    min-height: 182px;
    border: 1px solid var(--ha-line);
    border-radius: 14px;
    background: var(--ha-paper);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ha-reqcard:hover,
.ha-reqcard:focus-visible {
    transform: translateY(-3px);
    border-color: var(--ha-blue);
    box-shadow: var(--ha-shadow);
    outline: none;
}
.ha-reqcard:focus-visible { outline: 2px solid var(--ha-blue); outline-offset: 3px; }
.ha-reqcard:active { transform: translateY(-1px); }
.ha-reqcard__icon { font-size: 2.15rem; line-height: 1; }
.ha-reqcard__title { font-size: 1.24rem; font-weight: 700; line-height: 1.5; color: var(--ha-ink); }
.ha-reqcard__desc { display: block; font-size: .96rem; color: var(--ha-muted); line-height: 1.8; flex: 1; }
.ha-reqcard__go { font-size: .95rem; font-weight: 700; color: var(--ha-blue); }

.ha-request__foot {
    margin: 24px auto 0;
    text-align: center;
    font-size: .88rem;
    color: var(--ha-muted);
}
.ha-linkbtn {
    background: none;
    border: 0;
    padding: 0 4px;
    font: inherit;
    font-weight: 700;
    color: var(--ha-blue);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ha-linkbtn:hover { color: var(--ha-blue-deep); }

/* انتخاب نوع خدمت داخل مودال */
.ha-wizpick__title { margin: 0 0 4px; font-size: 1.18rem; font-weight: 700; color: var(--ha-ink); }
.ha-wizpick__sub { margin: 0 0 18px; font-size: .88rem; color: var(--ha-muted); }
.ha-wizpick__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(174px, 1fr));
    gap: 12px;
}
.ha-wizpick__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 15px;
    min-height: 128px;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: var(--ha-paper);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}
.ha-wizpick__item:hover,
.ha-wizpick__item:focus-visible {
    border-color: var(--ha-blue);
    background: var(--ha-blue-soft);
    outline: none;
}
.ha-wizpick__item:focus-visible { outline: 2px solid var(--ha-blue); outline-offset: 2px; }
.ha-wizpick__icon { font-size: 1.8rem; line-height: 1; }
.ha-wizpick__item strong { font-size: 1.1rem; color: var(--ha-ink); }
.ha-wizpick__desc { display: block; font-size: .88rem; color: var(--ha-muted); line-height: 1.7; }

/* صفحهٔ تأیید — کد پیگیری قابل کپی */
.ha-wizard-done__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.ha-code {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 14px auto 8px;
    padding: 12px 16px;
    border: 1px dashed var(--ha-blue);
    border-radius: 12px;
    background: var(--ha-blue-soft);
}
.ha-code__label { font-size: .78rem; color: var(--ha-muted); }
.ha-code__val {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 1.34rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--ha-blue-deep);
    user-select: all;
}
.ha-code__copy {
    padding: 6px 14px;
    border: 1px solid var(--ha-blue);
    border-radius: 8px;
    background: var(--ha-paper);
    color: var(--ha-blue-deep);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}
.ha-code__copy:hover { background: var(--ha-blue); color: #fff; }
.ha-wizard-loading--err { color: #b91c1c; }

@media (max-width: 640px) {
    .ha-request { padding: 44px 16px 40px; }
    .ha-request__grid { grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 12px; }
    .ha-reqcard { min-height: 158px; padding: 20px 16px 16px; }
    .ha-reqcard__icon { font-size: 1.9rem; }
    .ha-reqcard__title { font-size: 1.12rem; }
    .ha-reqcard__desc { font-size: .9rem; }
    .ha-code__val { font-size: 1.15rem; }
}

/* روی دستگاه لمسی، سکتورهای چرخ هیرو hover ندارند — یک راهنمای
   کوچک نشان می‌دهیم که کاربر بداند کارت‌های پایین همان کار را می‌کنند. */
@media (hover: none) {
    .ha-hero__wheel-wrap::after {
        content: 'برای انتخاب خدمت، کارت‌های پایین صفحه ↓';
        display: block;
        margin-top: 8px;
        font-size: .76rem;
        color: var(--ha-muted);
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════════
   دستیار تشخیص خدمت — پاسخ داده‌محور + هدایت به بخش درست سایت
   ══════════════════════════════════════════════════════════════ */
.ha-assistant {
    max-width: 1080px;
    margin: 34px auto 0;
    padding: 26px 24px;
    border: 1px solid var(--ha-line);
    border-radius: 16px;
    background: var(--ha-paper);
    box-shadow: var(--ha-shadow);
}
.ha-assistant__head h3 { margin: 6px 0 6px; font-size: 1.32rem; font-weight: 700; color: var(--ha-ink); }
.ha-assistant__head p { margin: 0 0 16px; font-size: .95rem; line-height: 1.9; color: var(--ha-muted); }

.ha-assist-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: var(--ha-mist);
    font: inherit;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--ha-ink);
    resize: vertical;
}
.ha-assist-input:focus { outline: 2px solid var(--ha-blue); outline-offset: 1px; background: var(--ha-paper); }

.ha-assist-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.ha-assist-examples { display: flex; gap: 12px; flex-wrap: wrap; font-size: .9rem; }

.ha-assist-out { margin-top: 18px; }
.ha-assist-loading, .ha-assist-err { margin: 0; font-size: .95rem; }
.ha-assist-loading { color: var(--ha-muted); }
.ha-assist-err { color: #b91c1c; }

.ha-assist-result { display: flex; flex-direction: column; gap: 14px; }
.ha-assist-answer {
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--ha-blue-soft);
    font-size: 1.02rem;
    line-height: 2;
    color: var(--ha-ink);
}

/* مقصد — همان «منویی» که باز می‌شود */
.ha-assist-dest {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border: 1px solid var(--ha-blue);
    border-radius: 12px;
    background: var(--ha-paper);
}
.ha-assist-dest__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; }
.ha-assist-dest__lead { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ha-blue); font-weight: 700; }
.ha-assist-dest__text strong { font-size: 1.12rem; color: var(--ha-ink); }
.ha-assist-dest__text small { font-size: .9rem; color: var(--ha-muted); line-height: 1.7; }

.ha-assist-track {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; border-radius: 12px;
    background: var(--ha-mist); border: 1px dashed var(--ha-line);
}
.ha-assist-track code { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: .14em; color: var(--ha-blue-deep); }
.ha-assist-track__status { font-size: .92rem; color: var(--ha-ink); font-weight: 600; }

/* حقایقی که از دیتابیس آمده */
.ha-assist-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 0; padding: 0; list-style: none;
}
.ha-assist-facts li {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--ha-mist); border: 1px solid var(--ha-line);
}
.ha-assist-facts b { font-size: 1.05rem; color: var(--ha-ink); }
.ha-assist-facts span { font-size: .84rem; color: var(--ha-muted); line-height: 1.6; }

.ha-assist-block h4 { margin: 0 0 6px; font-size: .95rem; font-weight: 700; color: var(--ha-ink); }
.ha-assist-block ul { margin: 0; padding-inline-start: 1.2em; font-size: .93rem; line-height: 1.9; color: var(--ha-muted); }
.ha-assist-block li { margin-bottom: 4px; }
.ha-assist-probs b { color: var(--ha-blue-deep); }

.ha-assist-alts { display: flex; gap: 8px; flex-wrap: wrap; }
.ha-assist-alt {
    padding: 8px 14px; border: 1px solid var(--ha-line); border-radius: 999px;
    background: var(--ha-paper); font: inherit; font-size: .9rem; color: var(--ha-ink); cursor: pointer;
}
.ha-assist-alt:hover { border-color: var(--ha-blue); color: var(--ha-blue-deep); }

/* شفافیت — همان الگوی «چرا این پیشنهاد؟» پورتال هوش مصنوعی */
.ha-assist-why { border-top: 1px solid var(--ha-line); padding-top: 12px; }
.ha-assist-why summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--ha-muted); }
.ha-assist-why summary span { font-weight: 400; color: var(--ha-blue); }
.ha-assist-why[open] summary { margin-bottom: 10px; }
.ha-assist-steps { margin: 0; padding-inline-start: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.ha-assist-steps li { font-size: .88rem; line-height: 1.8; }
.ha-assist-steps b { display: block; color: var(--ha-ink); }
.ha-assist-steps span { color: var(--ha-muted); }

@media (max-width: 640px) {
    .ha-assistant { padding: 20px 16px; margin-top: 26px; }
    .ha-assist-facts { grid-template-columns: 1fr 1fr; }
    .ha-assist-dest { gap: 12px; }
}

/* دکمهٔ متنی داخل فرم‌های ورود (ارسال مجدد کد) */
.svc-link {
    background: none; border: 0; padding: 4px 0; margin-top: 6px;
    font: inherit; font-size: .85rem; color: var(--ha-blue);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.svc-link:hover { color: var(--ha-blue-deep); }
.svc-msg--ok { color: var(--ha-eco); }

/* دیالوگ امتیازدهی — از لینک پیامک پایان کار */
.ha-rate{display:flex;flex-direction:column;gap:12px;text-align:center}
.ha-rate__title{margin:0;font-size:1.2rem;font-weight:700;color:var(--ha-ink)}
.ha-rate__sub{margin:0;font-size:.9rem;color:var(--ha-muted)}
.ha-rate__sub code{font-family:ui-monospace,Consolas,monospace;letter-spacing:.12em;color:var(--ha-blue-deep)}
.ha-rate__stars{display:flex;justify-content:center;gap:6px}
.ha-star{background:none;border:0;padding:2px 4px;font-size:2.1rem;line-height:1;cursor:pointer;color:var(--ha-line);transition:color .12s,transform .12s}
.ha-star:hover,.ha-star.is-on{color:var(--ha-amber)}
.ha-star:active{transform:scale(.92)}
.ha-star:focus-visible{outline:2px solid var(--ha-blue);outline-offset:2px;border-radius:4px}
.ha-rate__msg{min-height:1.2em;font-size:.88rem;color:#b91c1c}

/* ══════════════ انبارهای تأمین‌کننده ══════════════ */
.svc-wh{display:flex;flex-direction:column;gap:18px}
.svc-wh-head h4{margin:0 0 4px;font-size:1.1rem;font-weight:700;color:var(--ha-ink)}
.svc-wh-head p{margin:0;font-size:.9rem;line-height:1.9;color:var(--ha-muted)}
.svc-wh-alerts{padding:12px 16px;border:1px solid var(--ha-amber);border-radius:10px;background:#fff8e6}
.svc-wh-alerts strong{display:block;margin-bottom:6px;font-size:.9rem;color:#8a5600}
.svc-wh-alerts ul{margin:0;padding-inline-start:1.2em;font-size:.86rem;line-height:1.9;color:var(--ha-ink)}
.svc-wh-low{color:#b91c1c;font-weight:700}
.svc-wh-tablewrap{overflow-x:auto;border:1px solid var(--ha-line);border-radius:10px;background:var(--ha-paper)}
.svc-wh-table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:640px}
.svc-wh-table th,.svc-wh-table td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--ha-line);vertical-align:top}
.svc-wh-table thead th{background:var(--ha-mist);font-size:.75rem;letter-spacing:.03em;color:var(--ha-muted);font-weight:700;white-space:nowrap}
.svc-wh-table tbody tr:last-child td{border-bottom:0}
.svc-wh-table small{color:var(--ha-muted);font-size:.78rem}
.svc-wh-table code{font-family:ui-monospace,Consolas,monospace;font-size:.82rem;color:var(--ha-blue-deep)}
.svc-wh-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.svc-wh-row--off{opacity:.55}
.svc-wh-on{color:var(--ha-eco);font-weight:600}
.svc-wh-off{color:var(--ha-muted)}
.svc-wh-empty{text-align:center;color:var(--ha-muted);padding:22px 12px}
.svc-wh-form{padding:18px;border:1px solid var(--ha-line);border-radius:12px;background:var(--ha-paper)}
.svc-wh-form h4{margin:0 0 12px;font-size:1rem;font-weight:700;color:var(--ha-ink)}
.svc-wh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.svc-wh-form label{display:flex;flex-direction:column;gap:4px;font-size:.84rem;color:var(--ha-muted)}
.svc-wh-form input,.svc-wh-form select,.svc-wh-form textarea{
  padding:9px 11px;border:1px solid var(--ha-line);border-radius:8px;
  background:var(--ha-mist);font:inherit;font-size:.92rem;color:var(--ha-ink)}
.svc-wh-form input:focus,.svc-wh-form select:focus,.svc-wh-form textarea:focus{outline:2px solid var(--ha-blue);outline-offset:1px;background:var(--ha-paper)}
.svc-wh-full{display:flex;flex-direction:column;gap:4px;margin-top:12px;font-size:.84rem;color:var(--ha-muted)}
.svc-wh-form button{margin-top:14px}
.svc-wh-msg{min-height:1.2em;margin-top:8px;font-size:.86rem}
.svc-wh-msg--err{color:#b91c1c}
@media(max-width:640px){.svc-wh-grid{grid-template-columns:1fr 1fr}}

/* ══════════════ داشبورد نقش‌ها ══════════════ */
.svc-roledash{display:flex;flex-direction:column;gap:16px}
.svc-roledash__h{margin:6px 0 0;font-size:.98rem;font-weight:700;color:var(--ha-ink)}
.svc-roledash__hint{margin:4px 0 0;font-size:.85rem;color:var(--ha-muted);line-height:1.8}
.svc-rolelist{display:flex;flex-direction:column;gap:8px}
.svc-rolerow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border:1px solid var(--ha-line);border-radius:10px;background:var(--ha-paper)}
.svc-rolerow__main{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0}
.svc-rolerow__main code{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;
  letter-spacing:.1em;color:var(--ha-blue-deep)}
.svc-rolerow__main strong{font-size:.96rem;color:var(--ha-ink)}
.svc-rolerow__main small{font-size:.82rem;color:var(--ha-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-rolerow__meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.svc-rolerow__when{font-size:.8rem;color:var(--ha-muted);font-variant-numeric:tabular-nums}
.svc-chip{padding:3px 10px;border-radius:999px;font-size:.76rem;font-weight:600;white-space:nowrap}
.svc-chip--wait{background:var(--ha-mist);color:var(--ha-muted)}
.svc-chip--go{background:var(--ha-blue-soft);color:var(--ha-blue-deep)}
.svc-chip--ok{background:#e3f4ea;color:var(--ha-eco)}
.svc-chip--off{background:#f1f1f1;color:#888}
.svc-chip--urgent{background:#fdeaea;color:#b91c1c}

/* ══════════ قیمت لحظه‌ای ══════════ */
.ha-quote { padding: 64px 20px; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); }
.ha-quote__box {
    max-width: 1080px; margin: 28px auto 0; background: #fff;
    border: 1px solid #e2e8f0; border-radius: 18px; padding: 24px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .07);
}
.ha-quote__form {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px; align-items: end;
}
.ha-quote__form label {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 14px; font-weight: 600; color: #334155;
}
.ha-quote__form select,
.ha-quote__form input {
    font: inherit; font-weight: 400; font-size: 15px; padding: 11px 12px;
    border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a;
}
.ha-quote__form select:focus,
.ha-quote__form input:focus { outline: 2px solid #0ea5e9; outline-offset: 1px; border-color: #0ea5e9; }
.ha-quote__form > button { min-height: 45px; }

.ha-quote__result { margin-top: 22px; padding-top: 22px; border-top: 1px solid #e2e8f0; }
.ha-quote__band {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.ha-quote__from, .ha-quote__to { font-size: 34px; font-weight: 800; color: #0f172a; letter-spacing: -.5px; }
.ha-quote__dash { font-size: 16px; color: #64748b; }
.ha-quote__cur  { font-size: 16px; color: #475569; font-weight: 600; }
.ha-quote__conf { margin: 6px 0 18px; font-size: 13.5px; color: #64748b; }
.ha-quote__note { font-size: 16px; color: #0f172a; margin-bottom: 8px; }
.ha-quote__err  { font-size: 15px; color: #b91c1c; }
.ha-quote__ok   { font-size: 15px; color: #15803d; font-weight: 600; }

.ha-quote__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.ha-quote__cols h4 { font-size: 14px; color: #334155; margin-bottom: 8px; }
.ha-quote__cols ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.ha-quote__cols li { font-size: 14px; color: #475569; padding-right: 20px; position: relative; }
.ha-quote__cols li::before { content: '✓'; position: absolute; right: 0; color: #16a34a; font-weight: 700; }
.ha-quote__ex li::before { content: '×'; color: #dc2626; }

.ha-quote__break { margin-top: 16px; }
.ha-quote__break summary { cursor: pointer; font-size: 14px; color: #0369a1; font-weight: 600; }
.ha-quote__break ul { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ha-quote__break li { font-size: 13.5px; color: #64748b; font-variant-numeric: tabular-nums; }

.ha-quote__upsell {
    margin-top: 18px; padding: 14px 16px; border-radius: 12px;
    background: #f0fdf4; border: 1px solid #bbf7d0;
    display: flex; flex-direction: column; gap: 4px;
}
.ha-quote__upsell strong { font-size: 15px; color: #14532d; }
.ha-quote__upsell span   { font-size: 13px; color: #3f6212; }

.ha-quote__cta {
    margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.ha-quote__save { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ha-quote__save input {
    font: inherit; font-size: 15px; padding: 11px 12px; min-width: 250px;
    border: 1px solid #cbd5e1; border-radius: 10px;
}
@media (max-width: 640px) {
    .ha-quote { padding: 44px 14px; }
    .ha-quote__box { padding: 18px; }
    .ha-quote__from, .ha-quote__to { font-size: 27px; }
    .ha-quote__save input { min-width: 100%; }
}

/* ══════════ قراردادهای نگهداری ══════════ */
.ha-plans { padding: 64px 20px; }
.ha-plans__grid {
    max-width: 1080px; margin: 28px auto 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
.ha-plans__loading { text-align: center; color: #94a3b8; font-size: 14px; }
.ha-plan {
    position: relative; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 16px; padding: 24px 22px;
    display: flex; flex-direction: column; gap: 12px;
}
.ha-plan--best { border-color: #0ea5e9; box-shadow: 0 16px 40px rgba(14, 165, 233, .16); }
.ha-plan__flag {
    position: absolute; top: -11px; inset-inline-start: 22px;
    background: #0ea5e9; color: #fff; font-size: 12px; font-weight: 700;
    padding: 3px 12px; border-radius: 9px;
}
.ha-plan h3 { font-size: 20px; color: #0f172a; }
.ha-plan__fee { font-size: 14px; color: #475569; font-variant-numeric: tabular-nums; }
.ha-plan__fee strong { font-size: 26px; color: #0f172a; letter-spacing: -.5px; }
.ha-plan ul { list-style: none; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ha-plan li { font-size: 14px; color: #475569; padding-right: 20px; position: relative; }
.ha-plan li::before { content: '✓'; position: absolute; right: 0; color: #0ea5e9; font-weight: 700; }
.ha-plan__sla { font-size: 13px; color: #64748b; border-top: 1px dashed #e2e8f0; padding-top: 10px; }
@media (max-width: 640px) { .ha-plans { padding: 44px 14px; } }
.svc-rolerow__meta small{font-size:.8rem;color:var(--ha-muted)}

/* ══════════════════════════════════════════════════════════════════════
   HVAC360 — چهار مسیر و نرخ‌نامه

   موبایل-اول: بیشتر بازدیدها از گوشی است، پس چیدمانِ پایه یک‌ستونه است و
   ستون‌ها فقط وقتی جا هست اضافه می‌شوند. جدول‌ها هم داخل ظرفِ خودشان اسکرول
   می‌کنند تا هیچ‌وقت کل صفحه به‌پهنا نلغزد.
   ══════════════════════════════════════════════════════════════════════ */

.ha-hero__tag {
    margin-top: 14px;
    font-size: clamp(.82rem, 2.6vw, .95rem);
    letter-spacing: .01em;
    color: var(--ha-blue-deep);
    font-weight: 600;
}

/* زنجیرهٔ «مشتری ← مشاوره ← …» برداشته شد؛ قاعده‌های .hv-chain هم با آن
   رفتند تا CSS مرده کسی را دنبال نخودسیاه نفرستد. */

/* ── کارت مسیر ────────────────────────────────────────────────────── */
.hv-paths__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 620px)  { .hv-paths__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .hv-paths__grid { grid-template-columns: repeat(4, 1fr); } }

.hv-path {
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    border: 1px solid var(--ha-line);
    border-radius: 18px;
    background: var(--ha-paper);
    box-shadow: var(--ha-shadow);
    transition: transform .18s ease, border-color .18s ease;
}
.hv-path:hover { transform: translateY(-3px); border-color: var(--ha-blue); }
.hv-path__icon { font-size: 1.9rem; line-height: 1; }
.hv-path__aud {
    margin: 10px 0 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ha-blue);
}
.hv-path h3 {
    margin: 0 0 8px;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--ha-ink);
}
.hv-path p {
    margin: 0 0 16px;
    font-size: .87rem;
    line-height: 1.75;
    color: var(--ha-muted);
}

/* مسیر کار: شماره‌ها معنا دارند، پس شمارهٔ خودکارِ ol نگه داشته شده. */
.hv-path__steps {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    counter-reset: hvstep;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.hv-path__steps li {
    counter-increment: hvstep;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .83rem;
    color: var(--ha-ink);
}
.hv-path__steps li::before {
    content: counter(hvstep);
    flex: none;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ha-mist);
    color: var(--ha-muted);
    font-size: .68rem;
    font-weight: 700;
}
.hv-path__cta {
    margin-top: auto;
    padding: 11px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--ha-blue);
    color: #fff;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease;
}
.hv-path__cta:hover { background: var(--ha-blue-deep); }

/* نرخ‌نامهٔ نمایشی برداشته شد؛ داده حالا پشت ماشین‌حساب است، نه روی صفحه.
   قاعده‌های .hv-price/.hv-rate/.hv-cap/.hv-full هم با آن رفتند — CSS مرده
   بعداً کسی را دنبال نخودسیاه می‌فرستد. */

/* ══════════════════════════════════════════════════════════════════════
   سرصفحهٔ وسط‌چین برای دو بخش قیمت و قرارداد
   ══════════════════════════════════════════════════════════════════════ */
.hv-paths .ha-section__head,
.ha-quote .ha-section__head,
.ha-plans .ha-section__head {
    text-align: center;
    margin-inline: auto;
    max-width: 60ch;
}
.hv-paths .ha-section__head p,
.ha-quote .ha-section__head p,
.ha-plans .ha-section__head p { margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════════════
   کارت قرارداد — سربرگِ فلزی

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

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

   گرادیان دو-ایستگاهی با یک خطِ روشن در میانه، همان چیزی است که سطح فلز را
   تداعی می‌کند؛ رنگِ تخت، پلاستیک به نظر می‌رسد.
   ══════════════════════════════════════════════════════════════════════ */
.ha-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;                      /* پدینگ حالا داخل سربرگ و بدنه است */
    border: 1px solid var(--ha-line);
    border-radius: 20px;
    background: var(--ha-paper);
    --m1: #8A5228;                   /* پیش‌فرض: برنز */
    --m2: #653A1A;
    --m-ink: #FFFFFF;
    --sheen: rgba(255, 255, 255, .22);
}
/* رمپِ فلز عمداً تیره است. نسخهٔ روشن‌ترِ قبلی زیبا بود ولی متنِ سفید روی
   بازتابش ۱٫۴۸:۱ کنتراست داشت (نقره) و ۱٫۸۹:۱ (برنز) — یعنی عملاً خوانا
   نبود. طلا چون جوهرش تیره است مشکلی نداشت و روشن ماند. */
.ha-plan[data-plan-key="bronze"] { --m1: #8A5228; --m2: #653A1A; --m-ink: #FFFFFF; --sheen: rgba(255,255,255,.22); }
.ha-plan[data-plan-key="silver"] { --m1: #67727E; --m2: #49525B; --m-ink: #FFFFFF; --sheen: rgba(255,255,255,.22); }
.ha-plan[data-plan-key="gold"]   { --m1: #D9AE45; --m2: #B98F26; --m-ink: #3A2C05; --sheen: rgba(255,255,255,.34); }

/* ── سربرگ ── */
.ha-plan__cap {
    position: relative;
    padding: 26px 22px 22px;
    /* دو لایه: رمپِ پایه، و رویش یک بازتابِ شفاف.
       بازتاب با رنگِ روشن ساخته نمی‌شود بلکه با سفیدِ نیمه‌شفاف — این‌طور
       روشناییِ زیرِ متن فقط کمی بالا می‌رود، نه اینکه به سفید برسد. */
    background:
        linear-gradient(115deg,
            transparent 38%, var(--sheen) 50%, transparent 62%),
        linear-gradient(135deg,
            var(--m2) 0%, var(--m1) 45%, var(--m1) 55%, var(--m2) 100%);
    color: var(--m-ink);
}
.ha-plan__cap h3 {
    margin: 10px 0 14px;
    font-size: 1.28rem;
    font-weight: 800;
    color: inherit;
    letter-spacing: -.01em;
}
.ha-plan__fee {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    color: inherit;
}
.ha-plan__from { font-size: .82rem; opacity: .8; }
.ha-plan__fee strong {
    font-size: 1.45rem;
    font-weight: 800;
    color: inherit;
    letter-spacing: -.02em;
}
.ha-plan__unit { font-size: .8rem; opacity: .85; }

/* نقطه‌های سطح — روی فلز، پس از رنگِ متنِ همان سربرگ می‌گیرند. */
.ha-plan__dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .3);
}
.ha-plan[data-plan-key="gold"] .ha-plan__dots {
    background: rgba(58, 44, 5, .12);
    border-color: rgba(58, 44, 5, .2);
}
.ha-plan__dots i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .3;
}
.ha-plan__dots i.is-on { opacity: 1; }

/* ── بدنه ── */
.ha-plan__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
}
.ha-plan__body ul { margin: 0 0 16px; padding: 0; list-style: none; }
.ha-plan__body li {
    position: relative;
    padding-inline-start: 22px;
    margin-bottom: 10px;
    font-size: .88rem;
    line-height: 1.7;
    color: var(--ha-ink);
}
.ha-plan__body li::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    color: var(--m1);
    font-weight: 700;
}
.ha-plan__sla {
    margin: 0 0 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--ha-line);
    font-size: .82rem;
    color: var(--ha-muted);
}
.ha-plan__body .ha-btn { margin-top: auto; width: 100%; text-align: center; }

/* دکمهٔ فرعی، قابِ همان فلز را می‌گیرد؛ دکمهٔ اصلی آبیِ برند می‌ماند:
   رنگِ «عمل» در کل سایت یکی است، و نقره‌ایِ خاکستری روی دکمه «غیرفعال»
   خوانده می‌شود. */
.ha-plan .ha-btn--ghost {
    border-color: color-mix(in srgb, var(--m1) 45%, var(--ha-line));
    color: var(--m2);
}
.ha-plan .ha-btn--ghost:hover {
    background: color-mix(in srgb, var(--m1) 10%, #fff);
    border-color: var(--m1);
}

/* ── نشانِ «بهترین ارزش» و کارت برگزیده ── */
.ha-plan__flag {
    position: absolute;
    inset-block-start: 14px;
    /* سمت مقابلِ نقطه‌های سطح. هر دو در ابتدای سربرگ بودند و روی هم می‌افتادند.
       inset-inline-start باید صریح auto شود: قاعدهٔ قدیمی‌ترِ همین فایل آن را
       ۲۲px می‌گذارد و وقتی هر دو سر ست باشند، عنصر تا تهِ عرض کش می‌آید —
       نشان از ۲۹ تا ۳۳۸ پهن شده بود و باز هم روی نقطه‌ها می‌افتاد. */
    inset-inline-start: auto;
    inset-inline-end: 14px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ha-blue);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 161, 228, .35);
}
.ha-plan--best {
    border-color: var(--ha-blue);
    box-shadow: 0 20px 48px rgba(0, 161, 228, .18);
}
@media (min-width: 900px) {
    .ha-plan--best { transform: translateY(-10px); }
}

/* ══════════════════════════════════════════════════════════════════════
   راهنمای نگهداری — دکمه در سرصفحه، محتوا در پنجره

   بلوکِ بلندِ قبلی ۲۲ ردیف را روی سرِ کسی می‌ریخت که فقط آمده بود قیمت
   قرارداد را ببیند. حالا یک دکمه است؛ هر که خواست باز می‌کند.
   ══════════════════════════════════════════════════════════════════════ */
.hv-guide__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 18px auto 0;
    padding: 12px 18px;
    border: 1px solid var(--ha-line);
    border-radius: 14px;
    background: var(--ha-paper);
    box-shadow: 0 6px 18px rgba(28, 36, 48, .06);
    font-family: inherit;
    text-align: start;               /* سرصفحه وسط‌چین است؛ متنِ دکمه نباید باشد */
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hv-guide__btn:hover {
    border-color: var(--ha-blue);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 161, 228, .16);
}
.hv-guide__btn:focus-visible {
    outline: 2px solid var(--ha-blue);
    outline-offset: 2px;
}
.hv-guide__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--ha-blue-soft);
    color: var(--ha-blue-deep);
}
.hv-guide__txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ha-ink);
    line-height: 1.5;
}
.hv-guide__txt small { font-size: .76rem; font-weight: 500; color: var(--ha-muted); }
.hv-guide__go { flex: none; color: var(--ha-blue); font-size: 1.05rem; }

/* ── پنجره ── */
.hv-modal {
    width: min(980px, calc(100vw - 28px));
    max-height: min(86vh, 820px);
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--ha-paper);
    color: var(--ha-ink);
    box-shadow: 0 30px 80px rgba(28, 36, 48, .28);
    overflow: hidden;
}
.hv-modal::backdrop { background: rgba(15, 23, 42, .55); }
.hv-modal[open] { display: flex; flex-direction: column; }

.hv-modal__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--ha-line);
}
.hv-modal__head h3 { margin: 0 0 6px; font-size: 1.08rem; color: var(--ha-ink); }
.hv-modal__head p {
    margin: 0;
    max-width: 68ch;
    font-size: .85rem;
    line-height: 1.9;
    color: var(--ha-muted);
}
.hv-modal__x {
    flex: none;
    margin-inline-start: auto;
    width: 34px; height: 34px;
    border: 1px solid var(--ha-line);
    border-radius: 10px;
    background: var(--ha-paper);
    color: var(--ha-muted);
    font-size: .9rem;
    cursor: pointer;
}
.hv-modal__x:hover { border-color: var(--ha-blue); color: var(--ha-blue-deep); }

/* بدنه خودش اسکرول می‌کند، نه کل صفحه — فهرست بلند روی گوشی. */
.hv-modal__body {
    padding: 20px 22px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.hv-full__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 760px) { .hv-full__grid { grid-template-columns: repeat(3, 1fr); } }

.hv-full__box {
    padding: 18px;
    border-radius: 16px;
    background: var(--ha-mist);
}
.hv-full__box h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ha-line);
    font-size: .92rem;
    color: var(--ha-ink);
}
.hv-full__n {
    margin-inline-start: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ha-paper);
    color: var(--ha-muted);
    font-size: .72rem;
    font-weight: 700;
}
.hv-full__box ul { margin: 0; padding: 0; list-style: none; }
.hv-full__box li {
    position: relative;
    padding-inline-start: 18px;
    margin-bottom: 7px;
    font-size: .84rem;
    line-height: 1.75;
    color: var(--ha-muted);
}
.hv-full__box li::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    color: var(--ha-eco);
    font-size: .76rem;
}

/* ── دو دکمهٔ قهرمان، یک ردیف روی گوشی ──────────────────────────────
   با پدینگ ۲۶ پیکسلی، دو دکمه ۳۶۶ پیکسل می‌خواستند و در عرض ۳۳۵ پیکسلیِ
   گوشی می‌شکستند. پدینگ و اندازهٔ قلم کمی جمع می‌شوند و هر دو سهم مساوی
   از ردیف می‌گیرند.

   min-width: 0 لازم است: آیتمِ فلکس به‌طور پیش‌فرض کوچک‌تر از محتوایش
   نمی‌شود و flex: 1 بی‌اثر می‌ماند. */
@media (max-width: 560px) {
    .ha-hero__actions { flex-wrap: nowrap; gap: 10px; }
    .ha-hero__actions .ha-btn {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 10px;
        font-size: .85rem;
        /* بدون nowrap: در ۳۲۰ پیکسل متنِ «ثبت درخواست سرویس» جا نمی‌شود و با
           nowrap بریده می‌شد. حالا دو خط می‌شود — دکمه کمی بلندتر، ولی متن
           کامل. دکمه‌ای که نیمهٔ کلمه‌اش پیدا نیست، به‌درد نمی‌خورد. */
        text-align: center;
        line-height: 1.4;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   انبار قطعات — فلش‌کارت

   موبایل-اول به معنای واقعی: چیدمان پایه یک کارت تمام‌عرض است و صفحهٔ
   بزرگ‌تر فقط همان کارت را جادارتر می‌کند، نه اینکه شبکه‌ای بسازد. چهل
   قلم در یک شبکه روی گوشی یعنی کاربر هیچ‌وقت به تهش نمی‌رسد.
   ══════════════════════════════════════════════════════════════════════ */
.hv-inv__tools { margin-bottom: 18px; }
.hv-inv__search {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--ha-line);
    border-radius: 12px;
    background: var(--ha-paper);
    font-family: inherit;
    font-size: .9rem;
    color: var(--ha-ink);
}
.hv-inv__search:focus {
    outline: none;
    border-color: var(--ha-blue);
    box-shadow: 0 0 0 3px rgba(0, 161, 228, .15);
}

/* نوار دسته‌ها روی گوشی افقی می‌لغزد؛ شکستن به چند سطر ارتفاع می‌خورد. */
.hv-inv__chips {
    display: flex;
    gap: 7px;
    margin-top: 11px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 3px;
}
.hv-inv__chips::-webkit-scrollbar { display: none; }
.hv-inv__chip {
    flex: none;
    padding: 7px 14px;
    border: 1px solid var(--ha-line);
    border-radius: 999px;
    background: var(--ha-paper);
    color: var(--ha-muted);
    font-family: inherit;
    font-size: .82rem;
    white-space: nowrap;
    cursor: pointer;
}
.hv-inv__chip[aria-pressed="true"] {
    background: var(--ha-blue);
    border-color: var(--ha-blue);
    color: #fff;
    font-weight: 600;
}
.hv-inv__chip b { font-weight: 500; opacity: .7; margin-inline-start: 5px; }

/* ── عرشه ── */
.hv-deck__stage { min-height: 420px; }

.hv-card {
    background: var(--ha-paper);
    border: 1px solid var(--ha-line);
    border-radius: 18px;
    box-shadow: var(--ha-shadow);
    overflow: hidden;
}
.hv-card__inner { display: block; }

/* چرخش با نمایش/پنهان، نه transform سه‌بعدی: روی مرورگرهای درون‌برنامه‌ای
   (اینستاگرام و مانندش) backface-visibility ناپایدار است و کارت وسط
   چرخش گیر می‌کند. */
.hv-card__face { display: none; padding: 18px; }
.hv-card:not(.is-flipped) .hv-card__front { display: block; }
.hv-card.is-flipped .hv-card__back { display: block; }

.hv-card__row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.hv-card__cat {
    padding: 4px 11px;
    border-radius: 7px;
    background: var(--ha-blue-soft);
    color: var(--ha-blue-deep);
    font-size: .74rem;
    font-weight: 600;
}
.hv-card__price {
    margin-inline-start: auto;
    padding: 4px 11px;
    border-radius: 7px;
    background: rgba(232, 163, 23, .12);
    color: var(--ha-amber);
    font-size: .76rem;
    font-weight: 700;
}

.hv-card__brand {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ha-blue);
    text-transform: uppercase;
}
.hv-card__name {
    margin: 5px 0 6px;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--ha-ink);
}
.hv-card__model {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--ha-mist);
    color: var(--ha-muted);
    font-size: .82rem;
    direction: ltr;
    unicode-bidi: embed;
}

.hv-card__peek { margin: 16px 0 18px; display: grid; gap: 8px; }
.hv-card__peek > div {
    display: flex;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dotted var(--ha-line);
}
.hv-card__peek dt { flex: none; min-width: 5.4rem; color: var(--ha-muted); font-size: .84rem; }
.hv-card__peek dd { margin: 0; font-size: .86rem; color: var(--ha-ink); }

.hv-card__flip {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--ha-blue);
    border-radius: 12px;
    background: var(--ha-blue);
    color: #fff;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
}
.hv-card__flip:hover { background: var(--ha-blue-deep); }
.hv-card__flip--back {
    width: auto;
    margin-inline-start: auto;
    padding: 6px 13px;
    background: none;
    border-color: var(--ha-line);
    color: var(--ha-muted);
    font-size: .78rem;
    font-weight: 500;
}
.hv-card__flip--back:hover { background: var(--ha-mist); color: var(--ha-ink); }

/* جدول پشت کارت، داخل ظرف خودش می‌لغزد — نه کل صفحه. */
.hv-card__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* table-layout:fixed لازم است، نه سلیقه: با auto، برچسبِ بلندِ فارسی مثل
   «توان اسمی (اسب بخار)» عرض ذاتی‌اش را تحمیل می‌کند و ستون‌های مقدار له
   می‌شوند. روی ۳۷۵ پیکسل اندازه گرفته شد: برچسب ۲۸۷ پیکسل از ۳۰۹ را می‌گرفت
   و برای دو ستونِ مقایسه فقط ۷۴ و ۷۹ پیکسل می‌ماند. */
.hv-card__t { width: 100%; border-collapse: collapse; font-size: .84rem; table-layout: fixed; }
.hv-card__t thead td {
    padding: 0 10px 10px;
    border-bottom: 2px solid var(--ha-line);
    vertical-align: bottom;
}
.hv-card__t thead td b {
    display: block;
    color: var(--ha-blue);
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.hv-card__t thead td span {
    display: block;
    margin-top: 2px;
    color: var(--ha-muted);
    font-size: .76rem;
    direction: ltr;
    unicode-bidi: embed;
}
.hv-card__t th {
    padding: 9px 0 9px 10px;
    text-align: start;
    font-weight: 500;
    color: var(--ha-muted);
    /* nowrap برداشته شد: با برچسب‌های واقعی، عرض را منفجر می‌کرد. حالا
       می‌پیچد و ستون مقدار جا دارد. */
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--ha-line);
    width: 44%;
}
/* در حالت مقایسه، برچسب سهم کمتری می‌برد تا دو ستون مقدار قابل خواندن بمانند. */
.hv-card.is-cmp .hv-card__t th { width: 34%; }
.hv-card__t td { overflow-wrap: anywhere; }
.hv-card__t td {
    padding: 9px 10px;
    text-align: start;
    color: var(--ha-ink);
    border-bottom: 1px solid var(--ha-line);
}
/* سطری که مقدارش فرق دارد، رنگ می‌گیرد — تفاوت باید نخوانده دیده شود. */
.hv-card__t tr.is-diff td { background: rgba(232, 163, 23, .1); }
.hv-card__t tr.is-diff th { color: var(--ha-amber); font-weight: 700; }

.hv-card__cmp {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--ha-line);
    display: grid;
    gap: 8px;
}
.hv-card__cmp label { font-size: .8rem; font-weight: 600; color: var(--ha-ink); }
.hv-card__cmp select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ha-line);
    border-radius: 10px;
    background: var(--ha-paper);
    font-family: inherit;
    font-size: .85rem;
    color: var(--ha-ink);
}
.hv-card__clear {
    justify-self: start;
    padding: 6px 13px;
    border: 1px solid var(--ha-line);
    border-radius: 9px;
    background: none;
    color: var(--ha-muted);
    font-family: inherit;
    font-size: .78rem;
    cursor: pointer;
}
.hv-card__clear:hover { border-color: var(--ha-amber); color: var(--ha-amber); }

/* ── ناوبری عرشه ── */
.hv-deck__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}
.hv-deck__arrow {
    width: 46px; height: 46px;
    flex: none;
    border: 1px solid var(--ha-line);
    border-radius: 50%;
    background: var(--ha-paper);
    color: var(--ha-blue);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.hv-deck__arrow:hover { border-color: var(--ha-blue); background: var(--ha-blue-soft); }
.hv-deck__arrow:focus-visible { outline: 2px solid var(--ha-blue); outline-offset: 2px; }
.hv-deck__count {
    flex: 1;
    text-align: center;
    font-size: .84rem;
    color: var(--ha-muted);
    font-weight: 600;
}
.hv-deck__empty {
    margin: 0;
    padding: 46px 20px;
    text-align: center;
    color: var(--ha-muted);
    font-size: .88rem;
    border: 1px dashed var(--ha-line);
    border-radius: 16px;
}

.hv-inv__foot {
    margin: 24px 0 0;
    padding: 14px 18px;
    border-inline-start: 3px solid var(--ha-amber);
    border-radius: 0 10px 10px 0;
    background: var(--ha-paper);
    font-size: .82rem;
    line-height: 1.85;
    color: var(--ha-muted);
}

/* صفحهٔ بزرگ: همان یک کارت، فقط جادارتر و وسط. */
@media (min-width: 720px) {
    .hv-deck { max-width: 720px; margin-inline: auto; }
    .hv-card__face { padding: 26px 28px; }
    .hv-card__name { font-size: 1.25rem; }
}

/* ── تصویر کارت ────────────────────────────────────────────────────
   طرح برداری با currentColor، پس در تم روشن و تیره خودش را تطبیق می‌دهد.
   ارتفاع ثابت است تا کارت‌ها هنگام ورق‌خوردن بالا و پایین نپرند. */
.hv-card__art {
    display: grid;
    place-items: center;
    height: 132px;
    margin: 0 0 16px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 42%,
            var(--ha-blue-soft) 0%,
            color-mix(in srgb, var(--ha-blue-soft) 45%, var(--ha-paper)) 62%,
            var(--ha-paper) 100%);
    border: 1px solid var(--ha-line);
    color: var(--ha-blue-deep);
}
.hv-card__art svg { width: 132px; height: auto; max-height: 100px; opacity: .92; }

/* ── عکس محصول روی طرح ──
   هر دو در یک سلولِ گرید می‌نشینند. طرح تا وقتی عکس نیامده دیده می‌شود؛ عکس
   که بار شد رویش می‌آید. اگر لینک بشکند، JS تگ img را برمی‌دارد و طرح سر
   جایش می‌ماند — پس هیچ حالتی جای خالی نمی‌دهد.

   contain نه cover: قطعهٔ صنعتی را نباید برید. نسبت‌ها بسیار متفاوت‌اند
   (کپسول گاز بلند، کمپرسور پهن) و برش، همان چیزی را می‌اندازد که کاربر
   می‌خواهد ببیند. */
.hv-card__art { position: relative; }
.hv-card__fallback { display: grid; place-items: center; }
.hv-card__img {
    position: absolute;
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: contain;
    border-radius: 10px;
    opacity: 0;
    transition: opacity .25s ease;
    /* پس‌زمینهٔ روشن، چون بیشتر عکس‌ها روی زمینهٔ سفید گرفته شده‌اند و در
       تم تیره بدون این، لبه‌شان با کارت قاطی می‌شود. */
    background: #fff;
}
.hv-card__img.is-ok { opacity: 1; }

/* بندانگشتی سربرگ مقایسه */
.hv-card__thumb {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--ha-line);
    border-radius: 8px;
    margin-bottom: 6px;
}

@media (min-width: 720px) {
    .hv-card__art { height: 158px; }
    .hv-card__art svg { width: 158px; max-height: 120px; }
}

/* ── پیگیری با کد ────────────────────────────────────────────────────
   موبایل-اول: ورودی و دکمه روی گوشی زیر هم، روی صفحهٔ بزرگ‌تر کنار هم. */
.ha-track {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid var(--ha-line);
    border-radius: 14px;
    background: var(--ha-paper);
}
.ha-track > label {
    display: block;
    margin-bottom: 10px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--ha-ink);
}
.ha-track__row { display: grid; grid-template-columns: 1fr; gap: 9px; }
@media (min-width: 520px) { .ha-track__row { grid-template-columns: 1fr auto; } }

.ha-track__row input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--ha-line);
    border-radius: 11px;
    background: var(--ha-paper);
    font-family: inherit;
    font-size: .92rem;
    letter-spacing: .06em;
    color: var(--ha-ink);
}
.ha-track__row input:focus {
    outline: none;
    border-color: var(--ha-blue);
    box-shadow: 0 0 0 3px rgba(0, 161, 228, .15);
}
.ha-track__row .ha-btn { white-space: nowrap; }

.ha-track__out { margin-top: 12px; font-size: .86rem; line-height: 1.8; }
.ha-track__out.is-warn { color: var(--ha-amber); }

.ha-track__card {
    display: grid;
    gap: 9px;
    padding: 14px;
    border-radius: 12px;
    background: var(--ha-mist);
}
.ha-track__st { font-size: 1rem; font-weight: 800; color: var(--ha-blue-deep); }
.ha-track__meta {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    font-size: .82rem; color: var(--ha-muted);
}
.ha-track__meta code { direction: ltr; unicode-bidi: embed; }
.ha-track__pay { justify-self: start; text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════
   جست‌وجوی کدِ خطا — دو حالتِ تعاملِ متفاوت (کدِ دقیق / علامت)، چون دو
   مصرفِ واقعی همین‌قدر متفاوت‌اند.
   ══════════════════════════════════════════════════════════════════════ */
.hv-err__panel {
    background: var(--ha-paper);
    border: 1px solid var(--ha-line);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
}
.hv-err__tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.hv-err__tab {
    flex: 1;
    padding: 9px 10px;
    border: 1px solid var(--ha-line);
    border-radius: 10px;
    background: var(--ha-mist);
    color: var(--ha-muted);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}
.hv-err__tab.is-active { background: var(--ha-blue); border-color: var(--ha-blue); color: #fff; }

.hv-err__row { display: flex; gap: 8px; flex-wrap: wrap; }
/* ردیفِ سه کشوییِ برند/سری/کد. سری و کد جای بیشتری می‌خواهند چون نامشان
   بلند است (نامِ سری کامل، و کد به‌همراه نامِ خطا)، ولی برند کوتاه است. */
.hv-err__row--picks { margin-bottom: 8px; }
.hv-err__row--picks select { min-width: 150px; }
.hv-err__row--picks select[data-ref="errBrand"] { flex: 0 1 190px; }
.hv-err__row--picks select[data-ref="errCodeSel"] { flex: 2 1 260px; direction: ltr; text-align: start; }
.hv-err__row select:disabled { opacity: .55; cursor: not-allowed; }
.hv-err__row select,
.hv-err__row input {
    flex: 1;
    min-width: 120px;
    padding: 11px 13px;
    border: 1px solid var(--ha-line);
    border-radius: 10px;
    background: var(--ha-paper);
    font-family: inherit;
    font-size: .88rem;
    color: var(--ha-ink);
}
.hv-err__row select:focus,
.hv-err__row input:focus { outline: none; border-color: var(--ha-blue); box-shadow: 0 0 0 3px rgba(0, 161, 228, .15); }
/* کدِ خطا معمولاً لاتین است؛ چپ‌به‌راست نگه‌داشتنش خوانایی را حفظ می‌کند. */
[data-ref="errCode"] { direction: ltr; text-align: start; font-family: monospace; letter-spacing: .04em; }
.hv-err__go {
    flex: none;
    padding: 11px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--ha-blue);
    color: #fff;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
}
.hv-err__hint { margin: 8px 0 0; font-size: .76rem; color: var(--ha-muted); }

.hv-err__chips {
    display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 3px; margin-bottom: 14px;
}
.hv-err__chips::-webkit-scrollbar { display: none; }
.hv-err__chip {
    flex: none; padding: 7px 14px; border: 1px solid var(--ha-line); border-radius: 999px;
    background: var(--ha-paper); color: var(--ha-muted); font-family: inherit;
    font-size: .8rem; white-space: nowrap; cursor: pointer;
}
.hv-err__chip b { font-weight: 500; opacity: .7; margin-inline-start: 5px; }

.hv-err__results { display: flex; flex-direction: column; gap: 10px; }
.hv-err__empty {
    text-align: center; padding: 26px 10px; color: var(--ha-muted); font-size: .84rem;
    background: var(--ha-mist); border-radius: 12px;
}
.hv-err__card {
    background: var(--ha-paper);
    border: 1px solid var(--ha-line);
    border-inline-start: 3px solid var(--ha-blue);
    border-radius: 12px;
    padding: 14px 16px;
}
.hv-err__card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.hv-err__code {
    font-family: monospace; direction: ltr; font-weight: 800; font-size: 1rem;
    color: var(--ha-blue-deep); background: var(--ha-blue-soft); padding: 3px 10px; border-radius: 8px;
}
.hv-err__unit { font-size: .74rem; color: var(--ha-muted); border: 1px solid var(--ha-line); border-radius: 999px; padding: 2px 9px; }
.hv-err__led { font-size: .74rem; color: var(--ha-amber); }
.hv-err__mode-title { margin: 0 0 8px; font-size: .96rem; font-weight: 700; color: var(--ha-ink); }
.hv-err__field { margin: 0 0 6px; font-size: .84rem; color: var(--ha-ink); line-height: 1.6; }
.hv-err__field b { color: var(--ha-muted); font-weight: 600; }
.hv-err__field--fix { padding: 8px 10px; background: var(--ha-mist); border-radius: 8px; }
.hv-err__cite { margin: 8px 0 0; font-size: .74rem; color: var(--ha-muted); }
.hv-err__foot { margin-top: 14px; font-size: .78rem; color: var(--ha-muted); text-align: center; }

.hv-doc__row { display: flex; gap: 8px; flex-wrap: wrap; }
/* ردیفِ سه کشوییِ نوع/منبع/درس. نامِ درس بلندترین است، پس بیشترین سهم را
   می‌گیرد؛ نوعِ محتوا فقط دو گزینه دارد و باریک می‌ماند. */
.hv-doc__row--picks { margin-bottom: 8px; }
.hv-doc__row--picks select { min-width: 150px; }
.hv-doc__row--picks select[data-ref="docKind"] { flex: 0 1 200px; }
.hv-doc__row--picks select[data-ref="docHeading"] { flex: 2 1 280px; }
.hv-doc__row select {
    flex: 1;
    min-width: 130px;
    padding: 11px 13px;
    border: 1px solid var(--ha-line);
    border-radius: 10px;
    background: var(--ha-paper);
    font-family: inherit;
    font-size: .88rem;
    color: var(--ha-ink);
}
.hv-doc__row select:focus { outline: none; border-color: var(--ha-blue); box-shadow: 0 0 0 3px rgba(0, 161, 228, .15); }
.hv-doc__row select:disabled { opacity: .55; cursor: not-allowed; }
.hv-doc__hint { margin: 6px 2px 0; font-size: .8rem; color: var(--ha-muted); }
/* نشانِ نوعِ مطلب روی کارت — آموزشی از عیب‌یابی در یک نگاه جدا شود. */
.hv-doc__kind {
    font-size: .7rem;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--ha-line);
    color: var(--ha-muted);
}
.hv-doc__kind--train { border-color: var(--ha-blue); color: var(--ha-blue); }
.hv-doc__row input {
    flex: 1;
    min-width: 120px;
    padding: 11px 13px;
    border: 1px solid var(--ha-line);
    border-radius: 10px;
    background: var(--ha-paper);
    font-family: inherit;
    font-size: .88rem;
    color: var(--ha-ink);
}
.hv-doc__row input:focus { outline: none; border-color: var(--ha-blue); box-shadow: 0 0 0 3px rgba(0, 161, 228, .15); }
.hv-doc__go {
    flex: none;
    padding: 11px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--ha-blue);
    color: #fff;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
}

.hv-doc__chips {
    display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 3px; margin: 14px 0;
}
.hv-doc__chips::-webkit-scrollbar { display: none; }
.hv-doc__chip {
    flex: none; padding: 7px 14px; border: 1px solid var(--ha-line); border-radius: 999px;
    background: var(--ha-paper); color: var(--ha-muted); font-family: inherit;
    font-size: .8rem; white-space: nowrap; cursor: pointer;
}
.hv-doc__chip b { font-weight: 500; opacity: .7; margin-inline-start: 5px; }
/* برچسبِ فعال باید دیده شود، وگرنه کاربر نمی‌فهمد چرا فهرست کوتاه شده. */
.hv-doc__chip.is-active {
    background: var(--ha-blue);
    border-color: var(--ha-blue);
    color: #fff;
}
.hv-doc__chip.is-active b { opacity: .85; }

.hv-doc__results { display: flex; flex-direction: column; gap: 10px; }
.hv-doc__empty {
    text-align: center; padding: 26px 10px; color: var(--ha-muted); font-size: .84rem;
    background: var(--ha-mist); border-radius: 12px;
}
.hv-doc__card {
    background: var(--ha-paper);
    border: 1px solid var(--ha-line);
    border-inline-start: 3px solid var(--ha-blue);
    border-radius: 12px;
    padding: 14px 16px;
}
.hv-doc__card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.hv-doc__topic-badge { font-size: .74rem; color: var(--ha-muted); border: 1px solid var(--ha-line); border-radius: 999px; padding: 2px 9px; }
.hv-doc__body { white-space: pre-line; font-size: .84rem; line-height: 1.75; color: var(--ha-ink); margin: 0 0 8px; }
.hv-doc__cite { margin: 8px 0 0; font-size: .74rem; color: var(--ha-muted); }
.hv-doc__foot { margin-top: 14px; font-size: .78rem; color: var(--ha-muted); text-align: center; }

/* ══════════════════════════════════════════════════════════════════════
   دستیار هوشمند مستقل — کارتِ هر دسته (کدِ خطا/سند/دانش‌نامه/کلی) +
   کنترلِ بازخوردِ کوچکِ زیرِ هرکدام.
   ══════════════════════════════════════════════════════════════════════ */
.hv-cat-card {
    background: var(--ha-paper);
    border: 1px solid var(--ha-line);
    border-inline-start: 3px solid var(--ha-blue);
    border-radius: 12px;
    padding: 14px 16px;
}
.hv-cat-card__label {
    display: inline-block;
    font-size: .74rem;
    color: var(--ha-muted);
    border: 1px solid var(--ha-line);
    border-radius: 999px;
    padding: 2px 9px;
    margin-bottom: 8px;
}
/* چند ردیف در یک بخش: هر ردیف با یک خطِ جداکننده، تا معلوم باشد
   سرویس‌منوالِ یک برند چند تطابق داشته است. */
.hv-cat-card__item + .hv-cat-card__item {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--ha-line);
}
/* بخشی که نتیجه‌ای نداشته حذف نمی‌شود، فقط کم‌رنگ می‌شود — کاربر باید
   ببیند آنجا هم جست‌وجو شده است. */
.hv-cat-card--empty { border-inline-start-color: var(--ha-line); opacity: .72; }
.hv-cat-card__none { color: var(--ha-muted); font-size: .86rem; margin: 0; }

.hv-fb { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.hv-fb__btn {
    padding: 6px 12px;
    border: 1px solid var(--ha-line);
    border-radius: 8px;
    background: var(--ha-paper);
    color: var(--ha-ink);
    font-family: inherit;
    font-size: .82rem;
    cursor: pointer;
}
.hv-fb__btn--yes:hover { border-color: #16a34a; }
.hv-fb__btn--no:hover { border-color: #dc2626; }
.hv-fb__note { font-size: .8rem; color: var(--ha-muted); }
.hv-fb__correction {
    width: 100%;
    border: 1px solid var(--ha-line);
    border-radius: 8px;
    padding: 9px 11px;
    font-family: inherit;
    font-size: .86rem;
    color: var(--ha-ink);
    background: var(--ha-mist);
    resize: vertical;
}

.ha-track__alt { margin: 11px 0 0; font-size: .82rem; color: var(--ha-muted); }

/* ═══════════════ پنجرهٔ محتوای صفحهٔ منبع ═══════════════ */
/* ارجاعِ کلیک‌پذیر: باید دکمه به‌نظر برسد وگرنه کسی رویش کلیک نمی‌کند،
   ولی نباید مثلِ دکمهٔ اصلی پررنگ باشد چون کارِ فرعی است. */
.hv-err__cite--link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: start;
    background: none;
    border: none;
    border-top: 1px dashed var(--ha-line);
    margin-top: 8px;
    padding: 8px 0 0;
    font: inherit;
    font-size: .78rem;
    color: var(--ha-muted);
    cursor: pointer;
}
.hv-err__cite--link:hover { color: var(--ha-blue); }
.hv-err__cite-go {
    margin-inline-start: auto;
    flex: none;
    font-size: .72rem;
    padding: 2px 9px;
    border: 1px solid var(--ha-line);
    border-radius: 999px;
    white-space: nowrap;
}
.hv-err__cite--link:hover .hv-err__cite-go { border-color: var(--ha-blue); }

.ha-page { position: fixed; inset: 0; z-index: 1200; display: flex; }
/* بدونِ این، دکمهٔ بستن بی‌اثر به‌نظر می‌رسید: کد hidden را درست تنظیم
   می‌کرد ولی «display:flex» این کلاس بر قاعدهٔ پیش‌فرضِ مرورگر برای
   [hidden] غلبه می‌کرد (ویژگیِ کلاس بالاتر از انتخابگرِ صفتِ UA است)، پس
   پنجره باز می‌ماند. */
.ha-page[hidden] { display: none; }
.ha-page__backdrop { position: absolute; inset: 0; background: rgba(10, 22, 34, .55); }
.ha-page__panel {
    position: relative;
    margin: auto;
    width: min(760px, calc(100vw - 24px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--ha-paper);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(10, 22, 34, .3);
    overflow: hidden;
}
.ha-page__head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ha-line);
}
.ha-page__head h3 { margin: 0; font-size: .95rem; font-weight: 600; flex: 1; }
.ha-page__close {
    flex: none; width: 30px; height: 30px;
    border: 1px solid var(--ha-line); border-radius: 8px;
    background: none; cursor: pointer; color: var(--ha-muted); font-size: .9rem;
}
.ha-page__close:hover { border-color: var(--ha-blue); color: var(--ha-blue); }
.ha-page__body { padding: 16px 18px; overflow-y: auto; }
.ha-page__note { margin: 0 0 12px; font-size: .8rem; color: var(--ha-muted); }
.ha-page__empty { margin: 0; font-size: .86rem; color: var(--ha-muted); }
.ha-page__row + .ha-page__row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ha-line); }
.ha-page__row h4 { margin: 6px 0 8px; font-size: .9rem; font-weight: 600; }
.ha-page__row p { margin: 0 0 6px; font-size: .84rem; line-height: 1.75; }
.ha-page__row-head { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ha-page__code {
    direction: ltr; font-family: monospace; font-size: .82rem;
    padding: 2px 9px; border-radius: 6px;
    background: var(--ha-blue); color: #fff;
}
.ha-page__tag {
    font-size: .7rem; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--ha-line); color: var(--ha-muted);
}
/* متنِ قطعه‌ها چندخطی است و شکستِ خطِ منبع باید حفظ شود. */
.ha-page__text { font-size: .84rem; line-height: 1.85; white-space: pre-wrap; }
.ha-page__foot {
    padding: 10px 18px; border-top: 1px solid var(--ha-line);
    font-size: .74rem; color: var(--ha-muted);
}
/* پشتِ پنجره نباید اسکرول شود، وگرنه کاربر گم می‌کند کجا بود. */
body.is-page-open { overflow: hidden; }


/* ═══════════════ روندِ عیب‌یابی ═══════════════ */

/* دکمهٔ ورود روی کارتِ کدِ خطا — باید دعوت‌کننده باشد چون کارِ اصلی است،
   ولی نه آن‌قدر که محتوای کارت را تحت‌الشعاع قرار دهد. */
.ha-diag__open {
    display: flex; align-items: center; gap: 10px; width: 100%;
    margin: 10px 0 0; padding: 10px 13px;
    border: 1px solid var(--ha-blue); border-radius: 10px;
    background: rgba(0, 161, 228, .06);
    font: inherit; font-size: .84rem; font-weight: 600;
    color: var(--ha-blue); cursor: pointer; text-align: start;
}
.ha-diag__open:hover { background: rgba(0, 161, 228, .12); }
.ha-diag__open-go { margin-inline-start: auto; font-weight: 400; opacity: .8; }

.ha-diag { position: fixed; inset: 0; z-index: 1300; display: flex; }
.ha-diag[hidden] { display: none; }
.ha-diag__backdrop { position: absolute; inset: 0; background: rgba(10, 22, 34, .55); }
.ha-diag__panel {
    position: relative; margin: auto;
    width: min(820px, calc(100vw - 24px));
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    background: var(--ha-paper); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(10, 22, 34, .3); overflow: hidden;
}
.ha-diag__head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--ha-line);
}
.ha-diag__title { flex: 1; }
.ha-diag__title h3 { margin: 0; font-size: .95rem; font-weight: 600; }
.ha-diag__title p { margin: 3px 0 0; font-size: .76rem; color: var(--ha-muted); }
.ha-diag__close {
    flex: none; width: 30px; height: 30px;
    border: 1px solid var(--ha-line); border-radius: 8px;
    background: none; cursor: pointer; color: var(--ha-muted);
}
.ha-diag__close:hover { border-color: var(--ha-blue); color: var(--ha-blue); }
.ha-diag__tabs { display: flex; gap: 6px; padding: 10px 18px 0; border-bottom: 1px solid var(--ha-line); }
.ha-diag__tab {
    padding: 8px 14px; border: none; background: none; cursor: pointer;
    font: inherit; font-size: .82rem; color: var(--ha-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ha-diag__tab.is-active { color: var(--ha-blue); border-bottom-color: var(--ha-blue); font-weight: 600; }
.ha-diag__body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.ha-diag__foot {
    padding: 10px 18px; border-top: 1px solid var(--ha-line);
    font-size: .74rem; color: var(--ha-muted);
}
.ha-diag__empty { margin: 0; font-size: .86rem; color: var(--ha-muted); }

/* رنگِ نوعِ گام تنها راهِ تشخیصِ سریعِ «این کار است یا تصمیم» است. */
.ha-diag__step, .ha-diag__node {
    border: 1px solid var(--ha-line); border-inline-start: 4px solid var(--ha-line);
    border-radius: 12px; padding: 14px 16px; background: var(--ha-paper);
}
.is-check   { border-inline-start-color: #3b82f6; }
.is-measure { border-inline-start-color: #8b5cf6; }
.is-action  { border-inline-start-color: #f59e0b; }
.is-cause   { border-inline-start-color: #10b981; background: rgba(16, 185, 129, .05); }

.ha-diag__step-head, .ha-diag__node-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.ha-diag__no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--ha-ink); color: var(--ha-paper);
    font-size: .78rem; font-weight: 600;
}
.ha-diag__kind { font-size: .72rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--ha-line); color: var(--ha-muted); }
.ha-diag__step h4 { margin: 0 0 10px; font-size: .95rem; font-weight: 600; line-height: 1.7; }
.ha-diag__metas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ha-diag__meta { font-size: .74rem; padding: 3px 9px; border-radius: 6px; background: var(--ha-mist, rgba(0,0,0,.04)); color: var(--ha-muted); }
.ha-diag__meta--tool { color: var(--ha-blue); background: rgba(0, 161, 228, .08); }
.ha-diag__safety {
    margin: 0 0 10px; padding: 8px 11px; border-radius: 8px;
    background: rgba(245, 158, 11, .1); color: #92400e;
    font-size: .78rem; line-height: 1.7;
}

.ha-diag__choice { display: flex; gap: 8px; flex-wrap: wrap; }
.ha-diag__btn {
    flex: 1; min-width: 130px; padding: 11px 14px;
    border-radius: 10px; border: 1px solid var(--ha-line);
    font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
    background: var(--ha-paper); color: var(--ha-ink);
}
.ha-diag__btn--ok  { border-color: #10b981; color: #047857; }
.ha-diag__btn--ok:hover  { background: rgba(16, 185, 129, .1); }
.ha-diag__btn--bad { border-color: #ef4444; color: #b91c1c; }
.ha-diag__btn--bad:hover { background: rgba(239, 68, 68, .1); }
.ha-diag__btn--ghost { flex: none; font-weight: 400; color: var(--ha-muted); }

.ha-diag__result { margin: 0 0 8px; font-size: .88rem; line-height: 1.85; }
.ha-diag__detail { margin: 0 0 12px; font-size: .8rem; color: var(--ha-muted); line-height: 1.8; }

/* مسیرِ طی‌شده — تشخیص رفت‌وبرگشت دارد و باید بشود برگشت. */
.ha-diag__trail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; font-size: .76rem; color: var(--ha-muted); }
.ha-diag__crumb {
    border: 1px solid var(--ha-line); border-radius: 6px; background: none;
    padding: 2px 8px; font: inherit; font-size: .76rem; color: var(--ha-muted); cursor: pointer;
}
.ha-diag__crumb:hover { border-color: var(--ha-blue); color: var(--ha-blue); }

.ha-diag__teach { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--ha-line); }
.ha-diag__teach-item + .ha-diag__teach-item { margin-top: 6px; }
.ha-diag__teach-item summary {
    cursor: pointer; font-size: .82rem; font-weight: 600;
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.ha-diag__teach-cite { font-weight: 400; font-size: .72rem; color: var(--ha-muted); }
.ha-diag__teach-body { margin-top: 8px; font-size: .82rem; line-height: 1.85; white-space: pre-wrap; color: var(--ha-ink); }

/* نمودار: ستونِ عمودی با پیکان — در صفحهٔ باریک هم می‌خواند، برخلافِ
   نمودارِ افقی که روی موبایل باید کوچک شود و ناخوانا می‌گردد. */
.ha-diag__graph { display: flex; flex-direction: column; gap: 10px; }
.ha-diag__node { cursor: pointer; }
.ha-diag__node:hover { box-shadow: 0 3px 12px rgba(10, 22, 34, .1); }
.ha-diag__node-text { margin: 0; font-size: .85rem; line-height: 1.75; }
.ha-diag__edges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ha-diag__edge { font-size: .74rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ha-line); color: var(--ha-muted); }
.ha-diag__edge--ok  { border-color: #10b981; color: #047857; }
.ha-diag__edge--bad { border-color: #ef4444; color: #b91c1c; }

body.is-diag-open { overflow: hidden; }

/* ═══════════════ صفحهٔ فرودِ تک‌بخشی ═══════════════

   is-solo فقط سربرگ و قهرمان را نگه می‌دارد. بقیهٔ بخش‌ها با display پنهان
   می‌شوند، نه حذف — مارک‌آپ و رویدادهایشان سرِ جایشان است و برگرداندنِ
   صفحه یعنی برداشتنِ همین یک کلاس در ServiceAppView.

   استثناها عمدی‌اند: پنجرهٔ ثبتِ درخواست فرزندِ مستقیمِ همین ظرف است و
   دکمهٔ قهرمان بازش می‌کند، پس اگر پنهان شود دکمه بی‌صدا از کار می‌افتد.
   نوارِ پایینِ گوشی هم همین‌طور — کتابخانهٔ تب‌بار آن را داخلِ همین ظرف
   می‌چسباند. */
.ha-applied.is-solo > *:not(.ha-header):not(.ha-hero):not(.ha-wizard-modal):not(.acc-portal-tabbar) {
    display: none !important;
}
.ha-applied.is-solo {
    background: #fff;
    min-height: 100vh;
}
body.svc-body:has(.ha-applied.is-solo) { background: #fff; }

/* سه دکمه در یک خط. wrap عمداً برداشته نشده — روی نمایشگرِ باریک شکستن
   بهتر از سرریز است — ولی روی دسکتاپ nowrap تضمین می‌کند خطِ دوم نیاید. */
.ha-hero__actions--trio {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* nowrap به‌تنهایی کافی نبود: white-space: nowrap کفِ عرضِ هر دکمه را روی
   عرضِ متنش قفل می‌کند، پس flex-shrink کاری از پیش نمی‌برد و سه دکمه ۱۲
   پیکسل از ستونِ ۴۶۰ پیکسلیِ قهرمان بیرون می‌زدند. پس فاصله و بالشتکِ
   افقی در همین بریک‌پوینت کم می‌شود — نه در حالتِ پایه، که دکمه‌های
   جاهای دیگر ریز نشوند. */
/* هر سه دکمه هم‌اندازه: عرضِ یکسان با flex-basis صفر، و ارتفاعِ یکسان با
   stretch. پیش از این nowrap داشتند و هرکدام به‌اندازهٔ متنِ خودش پهن
   می‌شد؛ نتیجه سه دکمهٔ نامساوی بود و اگر یکی می‌شکست، بقیه نمی‌شکستند.
   حالا اگر یکی دو خطی شود، هر سه دو خطی‌اند. */
.ha-hero__actions--trio { align-items: stretch; }
.ha-hero__actions--trio .ha-btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
/* کادرِ نامرئی برای دکمهٔ اول — تنها راهِ مساوی شدنِ عرض‌ها.
   با flex-basis صفر، بالشتک و کادرِ هر آیتم روی سهمِ مساویِ فضای آزاد
   *اضافه* می‌شود. دکمهٔ اول border: none دارد و دو تای دیگر ۱ پیکسل، پس:
     اولی  = ۲۴ (بالشتک) + ۱۲۲٫۶۷ = ۱۴۶٫۶۷
     بقیه  = ۲۶ (بالشتک+کادر) + ۱۲۲٫۶۷ = ۱۴۸٫۶۷
   دقیقاً همان دو پیکسلی که در چشم می‌آمد. box-sizing این را حل نمی‌کند
   چون flex-basis صفر به جعبهٔ محتوا اشاره می‌کند، نه جعبهٔ کادر. */
.ha-hero__actions--trio .ha-btn--primary { border: 1px solid transparent; }

/* روی گوشی هر سه دکمه دو خطی می‌شوند — هر کلمه یک خط.
   پیش از این فقط «درخواست سرویس» می‌شکست و دو تای دیگر یک خطی می‌ماندند؛
   ارتفاعِ جعبه‌ها به لطفِ stretch یکی بود ولی متنِ داخلشان ناهمگون. حالا
   شکستن از عرضِ متن نمی‌آید، از همین قاعده می‌آید — پس همیشه هر سه یکسان
   است، فارغ از اینکه برچسب‌ها بعداً چقدر بلند یا کوتاه شوند. */
@media (max-width: 767px) {
    .ha-hero__actions--trio .ha-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.45;
        padding-block: 10px;
    }
    .ha-hero__actions--trio .ha-btn > span { display: block; }
}
@media (min-width: 900px) {
    .ha-hero__actions--trio { flex-wrap: nowrap; gap: 8px; }
    .ha-hero__actions--trio .ha-btn {
        padding-inline: 12px;
        font-size: .9rem;
    }
}
.ha-btn.ha-btn--ai {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #0ea5e9;
    background: #e0f2fe;
    color: #075985;
    text-decoration: none;
    font-weight: 700;
}
.ha-btn.ha-btn--ai:hover { background: #bae6fd; }

/* ═══ سربرگِ صفحهٔ دستیار ═══ */
.ha-header--assist { justify-content: space-between; }
.ha-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #dbeafe;
    background: #f8fbff;
    color: #1d4ed8;
    flex: 0 0 auto;
}
.ha-home:hover { background: #e0f2fe; }
.ha-home svg { width: 20px; height: 20px; fill: currentColor; }

/* text-align به‌تنهایی کافی نبود: ظرف max-width: 680px دارد و حاشیهٔ
   کناری‌اش صفر است، پس در RTL کلِ بلوک به لبهٔ راستِ صفحه می‌چسبد و
   *متنِ وسط‌چینِ یک جعبهٔ راست‌چسبیده* را می‌بینیم، نه چیزی وسطِ صفحه.
   روی نمایشگرِ باریک تفاوتش ناچیز است و همین گمراهم کرد؛ روی نمایشگرِ
   عریض فاصله چند صد پیکسل می‌شود. حاشیهٔ خودکار خودِ جعبه را وسط
   می‌آورد. */
.ha-section__head--center {
    text-align: center;
    margin-inline: auto;
}
.ha-assist-lead {
    margin: 0;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: #334155;
}

/* ═══════════════ قطعه در دستیار: سطرِ گروه و پنجرهٔ فلش‌کارت ═══════════

   کارت‌های داخلِ پنجره از همان کلاس‌های hv-card بخشِ انبار استفاده می‌کنند
   و اینجا فقط ظرفشان تعریف می‌شود — دو زبانِ بصریِ جدا برای یک چیز ساختن،
   بدترین کاری بود که می‌شد کرد. */
.hv-partgrp__list { display: grid; gap: 8px; margin: 6px 0 10px; }
.hv-partgrp {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
}
.hv-partgrp:hover { border-color: #7dd3fc; background: #f8fcff; }
.hv-partgrp__main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.hv-partgrp__name { font-size: .95rem; color: #0f172a; }
.hv-partgrp__meta { font-size: .8rem; color: #64748b; }
.hv-partgrp__n {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: .78rem;
    font-weight: 700;
}
.hv-partgrp__go { flex: 0 0 auto; color: #94a3b8; font-size: 1.2rem; }

.hv-parts {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
/* بدونِ این، display: flex بالا بر [hidden] می‌چربد و پنجره هیچ‌وقت بسته
   نمی‌شود — همان اشتباهی که یک بار در پنجرهٔ صفحهٔ سند رخ داد. */
.hv-parts[hidden] { display: none !important; }
.hv-parts__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.hv-parts__panel {
    position: relative;
    width: min(560px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.hv-parts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.hv-parts__head h3 { margin: 0; font-size: 1rem; color: #0f172a; }
.hv-parts__close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0 4px;
}
.hv-parts__stage { padding: 14px 16px; overflow: auto; }

/* روی گوشی پنجره سرریز نداشت، ولی با حاشیهٔ ۱۶ پیکسلی عملاً لبه‌تا‌لبه
   دیده می‌شد و شبیهِ صفحه بود نه پنجره. کمی باریک‌تر می‌شود تا حاشیه
   پیدا باشد و کارت هم جا بماند: ۸۸vw روی ۳۷۵ یعنی ۳۳۰ پیکسل با ۲۲
   پیکسل حاشیه در هر طرف. بالشتکِ داخلی هم کم می‌شود تا آنچه از عرض کم
   شد، به خودِ کارت برگردد. */
@media (max-width: 767px) {
    .hv-parts { padding: 12px; }
    .hv-parts__panel { width: min(560px, 88vw); max-height: 86vh; }
    .hv-parts__stage { padding: 12px; }
    .hv-parts__head { padding: 11px 13px; }
    .hv-parts__foot { padding: 9px 13px; }
}
.hv-parts__stage .hv-card { margin: 0; }
.hv-parts__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid #e2e8f0;
    font-size: .82rem;
    color: #64748b;
}
.hv-parts__nav {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: .82rem;
    color: #0f172a;
}
.hv-parts__nav:hover { border-color: #7dd3fc; }
body.is-parts-open { overflow: hidden; }

/* یادداشتِ «این را خواستیم و کاتالوگ نداشت». عمداً کم‌رنگ‌تر از سطرِ
   گروه است: خبر است نه نتیجه، ولی باید دیده شود — سکوت به‌جایش یعنی
   کاربر فکر کند خواسته‌اش نادیده گرفته شده. */
.hv-partgrp__note {
    margin: 8px 0 0;
    padding: 8px 11px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    font-size: .8rem;
    color: #64748b;
    line-height: 1.7;
}

/* ═══════════════ نامِ قطعه در متنِ پاسخ ═══════════════

   آبی یعنی در کاتالوگ هست و کلیک قطعه‌های مرتبط را می‌آورد؛ قرمز یعنی
   نداریم. رنگ به‌تنهایی حاملِ معنا نیست — آبی خط‌چینِ زیرین و نشانگرِ
   دست دارد، قرمز خط‌خوردگیِ ملایم — تا برای کسی که رنگ را تفکیک نمی‌کند
   هم فرقشان پیدا باشد. */
.hv-partref { border-radius: 3px; padding: 0 1px; }
.hv-partref.is-in {
    color: #1d4ed8;
    border-bottom: 1px dashed #93c5fd;
    cursor: pointer;
    font-weight: 600;
}
.hv-partref.is-in:hover { background: #e0f2fe; }
.hv-partref.is-in:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
.hv-partref.is-out {
    color: #b91c1c;
    text-decoration: line-through;
    text-decoration-color: rgba(185, 28, 28, .45);
}
.hv-parts__wait { margin: 0; padding: 26px 6px; text-align: center; color: #64748b; font-size: .88rem; }

/* ═══ صفحهٔ دستیار: بالا آوردنِ کادرِ پرسش ═══

   روی گوشی وقتی صفحه‌کلید باز می‌شود ارتفاعِ دیدرس نصف می‌شود؛ با
   بالشتکِ قبلی، دکمهٔ «بپرس» زیرِ صفحه‌کلید می‌ماند و کاربر نمی‌دانست
   باید اسکرول کند. پس هم فاصله‌های بالا کم شد و هم خودِ کادر کوتاه‌تر. */
.ha-header--assist + .ha-section { padding-top: 14px; }
.ha-header--assist + .ha-section .ha-section__head { margin-bottom: 10px; }
.ha-assist-input { min-height: 84px; }
/* min-height کف می‌گذارد نه سقف؛ ارتفاعِ واقعی از rows="3" می‌آید و ۱۲۱
   پیکسل می‌شود. برای کوتاه کردنِ کادر، سقف لازم است. */
@media (max-width: 767px) {
    .ha-header--assist + .ha-section { padding-top: 8px; }
    .ha-assist-input { min-height: 62px; max-height: 96px; }
    .ha-assist-lead { font-size: .95rem; }
}
/* وقتی ارتفاعِ دیدرس کم است — یعنی عملاً صفحه‌کلید باز است — کادر تا
   حداقلِ خوانا کوچک می‌شود تا دکمه در همان نما بماند. */
@media (max-height: 560px) {
    .ha-header--assist + .ha-section { padding-top: 6px; }
    .ha-assist-input { min-height: 48px; max-height: 72px; }
}

/* یادداشتِ سطحِ دسترسیِ دستیار — فقط برای بازدیدکنندهٔ عادی دیده می‌شود.

   انتخابگر عمداً با ظرفش نوشته شده: قاعدهٔ موجودِ «.ha-section__head p»
   خاص‌تر از یک کلاسِ تنها بود و margin: auto را صفر می‌کرد. متن وسط‌چین
   می‌شد ولی خودِ جعبهٔ ۶۴۰ پیکسلی در ظرفِ ۶۸۰ پیکسلی به راست می‌چسبید —
   یعنی چهل پیکسل کج، که در چشم می‌آمد بی‌آنکه علتش پیدا باشد. */
.ha-section__head .ha-assist-note {
    margin: 8px auto 0;
    max-width: 640px;
    text-align: center;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: .82rem;
    color: #64748b;
    line-height: 1.8;
}
.ha-assist-note a { color: #1d4ed8; font-weight: 700; }

/* ═══════════════ پنلِ دسترسیِ پایگاه دانش ═══════════════ */
.kba__lead { margin: 4px 0 0; font-size: .85rem; color: #64748b; line-height: 1.9; }
.kba__pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.kba__pick select { min-width: 240px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-family: inherit; }
.kba__state { font-size: .82rem; color: #16a34a; font-weight: 700; }
.kba__state.is-limited { color: #b45309; }
.kba__rows { display: grid; gap: 8px; margin-bottom: 12px; }
.kba__empty { margin: 0; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 10px;
              font-size: .85rem; color: #64748b; background: #f8fafc; }
.kba__row { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
            border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.kba__area { font-weight: 700; font-size: .88rem; color: #0f172a; }
.kba__scope { flex: 1 1 auto; font-size: .84rem; color: #475569; }
.kba__del { border: none; background: transparent; color: #b91c1c; font-size: 1.2rem;
            line-height: 1; cursor: pointer; padding: 0 4px; }
.kba__add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.kba__add select { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-family: inherit; }
.kba__foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kba__msg { font-size: .82rem; }
.kba__msg.is-ok { color: #16a34a; }
.kba__msg.is-bad { color: #b91c1c; }

/* ═══════════════ گفتگوی ادامه‌دارِ دستیار ═══════════════ */
.ha-chat {
    margin-top: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.ha-chat__log {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 260px;
    overflow-y: auto;
    padding: 12px;
}
.ha-chat__msg {
    margin: 0;
    max-width: 86%;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: .86rem;
    line-height: 1.8;
}
.ha-chat__msg--bot { align-self: flex-start; background: #f1f5f9; color: #0f172a; }
.ha-chat__msg--me  { align-self: flex-end;   background: #e0f2fe; color: #075985; }
.ha-chat__bar {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.ha-chat__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    font-family: inherit;
    font-size: .88rem;
}
.ha-chat__input:focus { outline: 2px solid #7dd3fc; outline-offset: -1px; }

/* رونوشتِ گفتگو، بعد از پایان یافتنش. باز می‌ماند چون تازه نوشته شده و
   کاربر باید ببیند پاسخِ جدید بر پایهٔ چه چیزی ساخته شده. */
.ha-chat__done {
    margin: 0 0 12px;
    padding: 10px 13px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}
.ha-chat__done > summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: #334155; }
.ha-chat__pairs { margin: 9px 0 0; display: grid; gap: 7px; }
.ha-chat__pair dt { font-size: .8rem; color: #64748b; }
.ha-chat__pair dd { margin: 2px 0 0; font-size: .87rem; color: #0f172a; font-weight: 600; }

/* گفتگوی خودکار همان قالب را دارد، فقط بلندتر: اینجا نوبت‌ها به چند پرسشِ
   از پیش تعیین‌شده محدود نیستند و کاربر تا هر جا بخواهد ادامه می‌دهد. */
.ha-chat--talk .ha-chat__log { max-height: 360px; }
.ha-chat--talk .ha-chat__msg { white-space: pre-wrap; }
.ha-chat__cites {
    align-self: flex-start;
    max-width: 86%;
    display: grid;
    gap: 4px;
    margin: -3px 0 3px;
}

/* ═══════════════ پنجرهٔ ورودِ تکنسین ═══════════════ */
.ha-assist-note__login {
    border: none;
    background: transparent;
    color: #1d4ed8;
    font-weight: 700;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.ha-login {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
/* بدونِ این، display: flex بر [hidden] می‌چربد — همان تلهٔ پنجره‌های قبلی. */
.ha-login[hidden] { display: none !important; }
.ha-login__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.ha-login__panel {
    position: relative;
    width: min(380px, 92vw);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.ha-login__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.ha-login__head h3 { margin: 0; font-size: 1rem; color: #0f172a; }
.ha-login__close {
    border: none; background: transparent; font-size: 1.5rem; line-height: 1;
    color: #64748b; cursor: pointer; padding: 0 4px;
}
.ha-login__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.ha-login__body label { font-size: .82rem; color: #475569; font-weight: 600; }
.ha-login__body input {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    font-family: inherit;
    font-size: .95rem;
    letter-spacing: .04em;
}
.ha-login__body input:focus { outline: 2px solid #7dd3fc; outline-offset: -1px; }
.ha-login__body [data-login-step2] { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ha-login__msg { margin: 2px 0 0; font-size: .82rem; min-height: 1.2em; }
.ha-login__msg.is-ok { color: #16a34a; }
.ha-login__msg.is-bad { color: #b91c1c; }

/* ═══════════════ نقشه و دکمه‌های گفتگو ═══════════════ */
.ha-chat__map, .ha-chat__enough {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 9px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: .82rem;
    color: #0f172a;
    cursor: pointer;
    white-space: nowrap;
}
.ha-chat__map:hover, .ha-chat__enough:hover { border-color: #7dd3fc; background: #f0f9ff; }
.ha-chat__foot { padding: 0 12px 10px; }
.ha-chat__enough { border-style: dashed; color: #64748b; }

.ha-map {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ha-map[hidden] { display: none !important; }
.ha-map__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.ha-map__panel {
    position: relative;
    width: min(620px, 94vw);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.ha-map__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid #e2e8f0;
}
.ha-map__head h3 { margin: 0; font-size: .98rem; color: #0f172a; }
.ha-map__close { border: none; background: transparent; font-size: 1.5rem; line-height: 1; color: #64748b; cursor: pointer; }
.ha-map__canvas { height: min(56vh, 420px); width: 100%; }
.ha-map__bar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 11px 16px; border-top: 1px solid #e2e8f0; background: #f8fafc;
}
.ha-map__bar input {
    flex: 1 1 180px; min-width: 0; padding: 9px 11px;
    border: 1px solid #cbd5e1; border-radius: 9px; font-family: inherit; font-size: .86rem;
}
.ha-map__here {
    border: 1px solid #cbd5e1; background: #fff; border-radius: 9px;
    padding: 8px 11px; font-family: inherit; font-size: .82rem; cursor: pointer;
}

/* پیامِ «برای ادامه وارد شوید» — زیرِ دکمهٔ گفتگو، نه به‌جای آن، تا معلوم
   باشد کجا بود و چرا باز نشد. */
.ha-chat__needlogin {
    margin: 8px 0 0;
    padding: 9px 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    font-size: .83rem;
    color: #64748b;
    line-height: 1.9;
}

/* جعبهٔ کدِ حالتِ «بدونِ پیامک». رنگِ هشدار دارد نه رنگِ موفقیت: این یک
   دور زدنِ موقتیِ امنیتی است و نباید شبیهِ یک قابلیتِ عادی به‌نظر برسد. */
.ha-login__demo {
    margin: 2px 0 0;
    padding: 9px 12px;
    border: 1px dashed #f59e0b;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: .86rem;
    line-height: 1.9;
}
.ha-login__demo b { font-size: 1.1rem; letter-spacing: .12em; }
.ha-login__demo span { display: block; font-size: .76rem; color: #b45309; }

/* ═══════════════ نشانِ «چه کسی وارد است» ═══════════════ */
.ha-who {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-inline-start: auto;
    margin-inline-end: 8px;
    font-size: .8rem;
}
.ha-who__name { color: #0f172a; font-weight: 700; }
.ha-who__role {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: .72rem;
    font-weight: 700;
}
.ha-who__out, .ha-who__login {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 8px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: .76rem;
    color: #475569;
    cursor: pointer;
}
.ha-who__login { border-color: #7dd3fc; color: #1d4ed8; font-weight: 700; }
.ha-who__out:hover, .ha-who__login:hover { background: #f0f9ff; }
@media (max-width: 480px) {
    .ha-who__name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ═══════════════ داشبوردِ مشتری ═══════════════ */
.cdash { display: grid; gap: 14px; }

/* کارتِ «کاری که با شماست» — فقط وقتی می‌آید که واقعاً کاری هست، وگرنه
   هشدارِ همیشگی بی‌ارزش می‌شود. */
.cdash__todo {
    padding: 12px 14px;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    background: #fffbeb;
}
.cdash__todo-head { margin: 0 0 8px; font-size: .9rem; color: #92400e; }
.cdash__todo-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 0; border-top: 1px dashed #fde68a;
}
.cdash__todo-row:first-of-type { border-top: none; }
.cdash__todo-txt { flex: 1 1 220px; font-size: .86rem; color: #78350f; line-height: 1.9; }
.cdash__todo-act { display: flex; gap: 7px; }
.cdash__btn {
    border: 1px solid #cbd5e1; background: #fff; border-radius: 8px;
    padding: 6px 12px; font-family: inherit; font-size: .8rem; cursor: pointer; color: #0f172a;
}
.cdash__btn--ok { border-color: #16a34a; background: #16a34a; color: #fff; font-weight: 700; }
.cdash__btn:disabled { opacity: .5; cursor: default; }
.cdash__counter {
    display: grid; gap: 6px; margin-top: 6px; padding: 10px;
    border: 1px dashed #fcd34d; border-radius: 10px; background: #fffdf5;
}
.cdash__counter input, .cdash__counter textarea {
    font-family: inherit; font-size: .85rem; color: #0f172a;
    border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 9px; background: #fff; resize: vertical;
}
.cdash__case .cdash__counter { margin-top: 10px; }
.cdash__case > .cdash__btn { margin-top: 8px; }

.cdash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cdash__stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 12px 6px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
}
.cdash__stat-n { font-size: 1.35rem; font-weight: 800; color: #0f172a; }
.cdash__stat-l { font-size: .74rem; color: #64748b; text-align: center; }
@media (max-width: 560px) { .cdash__stats { grid-template-columns: repeat(2, 1fr); } }

.cdash__tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cdash__tab {
    border: 1px solid #e2e8f0; background: #fff; border-radius: 999px;
    padding: 7px 14px; font-family: inherit; font-size: .84rem; color: #475569; cursor: pointer;
}
.cdash__tab.is-on { border-color: #0ea5e9; background: #e0f2fe; color: #075985; font-weight: 700; }
.cdash__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; margin-inline-start: 5px; padding: 0 4px;
    border-radius: 999px; background: #dc2626; color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 1;
}

.cdash__body { display: grid; gap: 10px; }
.cdash__loading, .cdash__empty {
    margin: 0; padding: 18px; text-align: center; color: #64748b; font-size: .86rem;
    border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc;
}
.cdash__empty a { color: #1d4ed8; font-weight: 700; }

.cdash__case {
    padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
    border-inline-start: 4px solid #cbd5e1;
}
.cdash__case.is-open { border-inline-start-color: #0ea5e9; }
.cdash__case.is-done { border-inline-start-color: #16a34a; }
.cdash__case-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cdash__code { font-family: monospace; font-weight: 700; color: #0f172a; }
.cdash__type { font-size: .82rem; color: #475569; }
.cdash__status {
    font-size: .74rem; padding: 2px 9px; border-radius: 999px;
    background: #f1f5f9; color: #475569;
}
.cdash__urgent {
    font-size: .72rem; padding: 2px 9px; border-radius: 999px;
    background: #fee2e2; color: #b91c1c; font-weight: 700;
}
.cdash__complaint { margin: 0 0 8px; font-size: .85rem; color: #334155; line-height: 1.9; }
.cdash__rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; margin: 0; }
.cdash__rows dt { font-size: .74rem; color: #94a3b8; }
.cdash__rows dd { margin: 0; font-size: .82rem; color: #0f172a; }
@media (max-width: 560px) { .cdash__rows { grid-template-columns: 1fr; } }
.cdash__geo { margin: 8px 0 0; font-size: .78rem; color: #16a34a; }

.cdash__thread, .cdash__device {
    padding: 11px 13px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
    display: grid; gap: 4px;
}
.cdash__thread-q { margin: 0; font-weight: 700; font-size: .88rem; color: #0f172a; }
.cdash__thread-s { margin: 0; font-size: .82rem; color: #475569; line-height: 1.9; }
.cdash__thread-meta { font-size: .74rem; color: #94a3b8; }
.cdash__device { cursor: pointer; }
.cdash__device-head { display: grid; gap: 4px; }
.cdash__device span { font-size: .82rem; color: #475569; }
.cdash__device-site { color: #94a3b8 !important; font-size: .76rem !important; }
.cdash__device-detail {
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0;
    display: grid; gap: 6px; cursor: default;
}
.cdash__device-detail h5 { margin: 0; font-size: .78rem; color: #94a3b8; font-weight: 700; }
.cdash__device-hrow {
    display: flex; justify-content: space-between; gap: 8px;
    font-size: .8rem; color: #334155; padding: 4px 0; border-top: 1px dashed #f1f5f9;
}
.cdash__device-hrow:first-of-type { border-top: none; }
.cdash__device-cost { margin: 4px 0 0; font-size: .84rem; color: #0f172a; }
.cdash__device-warn {
    margin: 4px 0 0; padding: 7px 10px; font-size: .8rem; color: #92400e;
    background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px;
}

.cdash__notif {
    padding: 11px 13px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
    display: grid; gap: 4px; cursor: default;
}
.cdash__notif.is-unread { border-color: #7dd3fc; background: #f0f9ff; cursor: pointer; }
.cdash__notif-t { margin: 0; font-weight: 700; font-size: .87rem; color: #0f172a; display: flex; align-items: center; gap: 7px; }
.cdash__notif-dot { width: 7px; height: 7px; border-radius: 999px; background: #0ea5e9; flex-shrink: 0; }
.cdash__notif-b { margin: 0; font-size: .82rem; color: #475569; line-height: 1.9; }
.cdash__notif-meta { font-size: .74rem; color: #94a3b8; }

.cdash__form { display: grid; gap: 10px; }
.cdash__field { display: grid; gap: 4px; font-size: .82rem; color: #475569; }
.cdash__field input, .cdash__field textarea {
    font-family: inherit; font-size: .88rem; color: #0f172a;
    border: 1px solid #cbd5e1; border-radius: 9px; padding: 8px 10px; background: #fff;
    resize: vertical;
}
.cdash__field input:focus, .cdash__field textarea:focus { outline: 2px solid #7dd3fc; outline-offset: 1px; }
.cdash__field.is-static input { background: #f1f5f9; color: #64748b; }
.cdash__form .cdash__btn--ok { justify-self: start; }

/* بازگشت به صفحهٔ اصلیِ سایت، در سربرگِ پورتال. */
.svc-dash-hero__home {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35);
    color: inherit; text-decoration: none; font-size: .8rem; white-space: nowrap;
}
.svc-dash-hero__home:hover { background: rgba(255, 255, 255, .15); }

/* ═══════════════ ردیفِ دومِ قهرمان و راهنما ═══════════════ */
.ha-hero__links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ha-herolink {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px dashed #94a3b8; background: transparent; border-radius: 999px;
    padding: 7px 14px; font-family: inherit; font-size: .84rem; color: #334155; cursor: pointer;
}
.ha-herolink:hover { border-color: #0ea5e9; color: #075985; background: #f0f9ff; }

.pguide { display: grid; gap: 8px; }
.pguide__lead { margin: 0 0 4px; font-size: .84rem; color: #64748b; line-height: 1.9; }
.pguide__item {
    border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; padding: 10px 13px;
}
.pguide__item > summary {
    cursor: pointer; font-weight: 700; font-size: .9rem; color: #0f172a; list-style: none;
}
.pguide__item > summary::-webkit-details-marker { display: none; }
.pguide__item[open] > summary { margin-bottom: 8px; }
.pguide__item ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 5px; }
.pguide__item li { font-size: .85rem; color: #475569; line-height: 1.9; }

.ha-guide {
    position: fixed; inset: 0; z-index: 1350;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ha-guide[hidden] { display: none !important; }
.ha-guide__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.ha-guide__panel {
    position: relative; width: min(620px, 94vw); max-height: 88vh;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.ha-guide__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; border-bottom: 1px solid #e2e8f0;
}
.ha-guide__head h3 { margin: 0; font-size: 1rem; color: #0f172a; }
.ha-guide__close { border: none; background: transparent; font-size: 1.5rem; line-height: 1; color: #64748b; cursor: pointer; }
.ha-guide__body { padding: 14px 16px; overflow-y: auto; }

/* ═══════════════ شبکهٔ کاشیِ خدمات ═══════════════

   الگوی آشنای اپلیکیشن‌های خدماتی: مربعِ گردگوشه با آیکونِ درشت و برچسبِ
   زیرش. اندازه‌ها از قاعده می‌آیند نه سلیقه: هدفِ لمس دستِ‌کم ۶۴ پیکسل
   (کوچک‌تر از این روی گوشی خطای لمس می‌دهد) و برچسب دو خطِ کوتاه.

   رنگ دستهٔ کار را می‌گوید نه هویتِ تک‌تکِ کاشی‌ها را: خدمت، پیگیری،
   هوشمند، کمکی. هشت رنگِ متفاوت زیبا به‌نظر می‌رسد و معنایی نمی‌سازد. */
.ha-apps {
    display: grid;
    /* دسکتاپ مجبور به سه‌ستونیِ گوشی نیست — هرچند کاشی که عرض جا داد
       می‌نشیند (auto-fit، حداقلِ عرضِ هر کاشی ۱۴۰px). auto-fit به‌جایِ
       auto-fill چون با ۹ کاشیِ ثابت، auto-fill یک ستونِ خالی ته‌ردیف
       می‌گذاشت (فاصلهٔ مرده)؛ auto-fit همان ستون‌ها را کش می‌دهد تا عرض
       کامل پر شود. زیرِ ۵۶۰px همچنان سه‌ستونیِ ثابت است (پایین‌تر
       override می‌شود). */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 28px;
    /* ۸۲۰px بود و زیرِ عرضِ متن+عکسِ بالای سرش (که تا حدودِ ۵۶۰+۳۲+۷۶۰px
       می‌رسد) خیلی باریک می‌ماند و کاشی‌ها وسطِ یک نوارِ خالی می‌نشستند —
       همان چیزی که کاربر با اسکرین‌شات نشان داد. عددِ تازه دقیقاً همان
       سقفِ عرضِ ردیفِ بالاست، پس دو ردیف زیرِ هم می‌ایستند. */
    max-width: 1352px;
    width: 100%;
}
.ha-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 88px;
    padding: 12px 6px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    color: #0f172a;
    transition: transform .12s ease, box-shadow .12s ease;
}
.ha-app:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .1); }
.ha-app:active { transform: translateY(0); }
.ha-app__icon {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 14px; font-size: 1.35rem; line-height: 1;
}
.ha-app__label { font-size: .76rem; font-weight: 700; text-align: center; line-height: 1.5; }

/* دسته‌ها */
.ha-app--svc .ha-app__icon { background: #e0f2fe; }
.ha-app--go  .ha-app__icon { background: #dcfce7; }
.ha-app--ai  .ha-app__icon { background: #ede9fe; }
.ha-app--aux .ha-app__icon { background: #f1f5f9; }

/* کاشیِ نخست پررنگ‌تر است: پرکاربردترین کار نباید هم‌وزنِ بقیه دیده شود. */
.ha-app[data-app="request"] { border-color: #7dd3fc; background: #f0f9ff; }

@media (max-width: 560px) {
    /* سه‌ستونی، مثلِ دسکتاپ (که آن هم سه‌ستونی است) — نسخهٔ یک‌ستونی/ردیفی قبلاً امتحان شد ولی
       کاربر گفت قرار بود سه‌تا در هر ردیف باشد، نه یکی. چیدمانِ داخلیِ
       کاشی هم به همان حالتِ ستونیِ اصلی برگشت (آیکون بالا، برچسب پایین)
       چون چیدمانِ ردیفی در یک‌سومِ عرض جا نمی‌شود؛ فقط اندازه‌ها از
       نسخهٔ خیلی کوچکِ اولیه بزرگ‌تر ماندند. */
    .ha-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .ha-app {
        flex-direction: column; justify-content: center; align-items: center;
        gap: 8px; padding: 14px 8px; min-height: 92px; border-radius: 16px;
    }
    .ha-app__icon { width: 44px; height: 44px; font-size: 1.35rem; }
    .ha-app__label { font-size: .8rem; text-align: center; }
}

/* ═══════════════ نمای خلاصهٔ نقش ═══════════════ */
.rov { display: grid; gap: 10px; margin: 0 0 14px; }
.rov[hidden] { display: none !important; }
.rov__todo {
    padding: 11px 14px;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    background: #fffbeb;
}
.rov__todo h4 { margin: 0 0 6px; font-size: .86rem; color: #92400e; }
.rov__todo ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.rov__todo li { font-size: .84rem; color: #78350f; line-height: 1.9; }
.rov__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.rov__stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 11px 8px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
}
.rov__n { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.rov__l { font-size: .73rem; color: #64748b; text-align: center; }

/* ═══════════════ چرخهٔ پرونده و صافیِ وضعیت ═══════════════

   نوارِ پیشرفت افقی است و چهار گام دارد. گامِ فعلی پررنگ، گام‌های گذشته
   سبز، و آینده خاکستری — همان قراردادی که همه‌جا از آن استفاده می‌شود،
   پس نیازی به راهنما ندارد. */
.cdash__flow {
    display: flex; align-items: flex-start; justify-content: space-between;
    list-style: none; margin: 0 0 10px; padding: 0; position: relative;
}
.cdash__flow::before {
    content: ''; position: absolute; top: 7px; inset-inline: 8%;
    height: 2px; background: #e2e8f0;
}
.cdash__flow li {
    position: relative; z-index: 1; display: flex; flex-direction: column;
    align-items: center; gap: 5px; flex: 1 1 0; min-width: 0;
}
.cdash__flow-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid #cbd5e1;
}
.cdash__flow-l { font-size: .7rem; color: #94a3b8; text-align: center; line-height: 1.4; }
.cdash__flow li.is-done .cdash__flow-dot { background: #16a34a; border-color: #16a34a; }
.cdash__flow li.is-done .cdash__flow-l { color: #16a34a; }
.cdash__flow li.is-now .cdash__flow-dot {
    background: #0ea5e9; border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .18);
}
.cdash__flow li.is-now .cdash__flow-l { color: #075985; font-weight: 700; }
.cdash__flow--off {
    display: block; margin: 0 0 10px; padding: 7px 11px; border-radius: 9px;
    background: #fef2f2; color: #b91c1c; font-size: .8rem;
}
.cdash__flow--off::before { display: none; }

.cdash__filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.cdash__chip {
    border: 1px solid #e2e8f0; background: #fff; border-radius: 999px;
    padding: 5px 12px; font-family: inherit; font-size: .78rem; color: #475569; cursor: pointer;
}
.cdash__chip.is-on { border-color: #0ea5e9; background: #e0f2fe; color: #075985; font-weight: 700; }

/* ═══════════════ سربرگِ دستیار روی نمای باریک ═══════════════

   سربرگ یک ردیفِ nowrap بود: نشان + هویت + خانه. با نامِ بلندِ حسابِ
   کارکنان («کارشناس فنی (دمو)») روی گوشی جا نمی‌شد و آیکونِ خانه از
   صفحه بیرون می‌زد — بیرون‌زدنش هم بی‌صدا بود چون هیچ اسکرولی نشان
   نمی‌داد، فقط دکمه دیده نمی‌شد.

   سه کار: ردیف اجازهٔ شکستن می‌گیرد، بخشِ هویت کوچک‌شدنی می‌شود و نام
   با سه‌نقطه بریده می‌شود، و روی نمای خیلی باریک نشانِ نقش برداشته
   می‌شود — نقش از نامِ حساب هم پیداست و دو بار گفتنش ارزشِ آن فضا را
   ندارد. */
.ha-header--assist { flex-wrap: wrap; gap: 8px; }
.ha-header--assist .ha-brand { flex: 0 1 auto; min-width: 0; }
.ha-who { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.ha-who__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ha-home { flex: 0 0 auto; }
@media (max-width: 620px) {
    .ha-who__role { display: none; }
    .ha-who__name { max-width: 130px; }
    .ha-header--assist .ha-brand__sub { display: none; }
}

/* نشانِ تنها در سربرگِ دستیار — بدونِ واژه‌نشان، تا جا برای آیکونِ خانه
   بماند. نبودِ ha-brand__text یعنی چیدمانِ درونیِ نشان هم باید ساده شود،
   وگرنه فاصلهٔ خالیِ آن ستون سرِ جایش می‌ماند. */
.ha-brand--mark-only { gap: 0; }
.ha-brand--mark-only .ha-brand__mark { margin: 0; }

/* نشانِ تنها در سربرگِ دستیار — بدونِ واژه‌نشان، تا جا برای آیکونِ خانه
   بماند. نبودِ ha-brand__text یعنی فاصلهٔ درونیِ نشان هم باید صفر شود،
   وگرنه ستونِ خالیِ آن سرِ جایش می‌ماند. */
.ha-brand--mark-only { gap: 0; }
.ha-brand--mark-only .ha-brand__mark { margin: 0; }

/* ═══════════════ پوششِ پایگاه دانش (بالای دستیار) ═══════════════

   صفحهٔ دستیار با یک کادرِ خالی باز می‌شد و بازدیدکننده هیچ نشانی نداشت
   که پشتش ۴۸ سرویس‌منوال و بیش از هزار روندِ گام‌به‌گام هست. این پنل
   همان را نشان می‌دهد — با عددهای زنده، نه متنِ تبلیغاتی. */
.ha-kb {
    max-width: 980px;
    margin: 0 auto 22px;
    padding: 0 16px;
}
.ha-kb__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.ha-kb__cell {
    background: var(--ha-paper);
    border: 1px solid var(--ha-line);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}
.ha-kb__n {
    font-family: var(--ha-display);
    font-size: calc(26px * var(--svc-k, 1));
    font-weight: 700;
    line-height: 1.1;
    color: var(--ha-blue-deep);
    /* ارقام در ستون‌های کنارِ هم باید هم‌عرض بیفتند، وگرنه ردیف می‌لرزد. */
    font-variant-numeric: tabular-nums;
}
.ha-kb__label { font-size: calc(13px * var(--svc-k, 1)); font-weight: 600; color: var(--ha-ink); }
.ha-kb__sub   { font-size: calc(11.5px * var(--svc-k, 1)); color: var(--ha-muted); }

.ha-kb__brands {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 6px 18px;
}
.ha-kb__brand {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: calc(12px * var(--svc-k, 1));
}
.ha-kb__bname { font-weight: 600; color: var(--ha-ink); min-width: 62px; }
.ha-kb__bar {
    height: 6px;
    border-radius: 3px;
    background: var(--ha-line);
    overflow: hidden;
}
/* نوار از راست پر می‌شود چون کلِ صفحه RTL است و پرشدن از چپ
   خلافِ جهتِ خواندن دیده می‌شود. */
.ha-kb__bar > i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ha-blue) 0%, var(--ha-eco) 100%);
    border-radius: 3px;
}
.ha-kb__bnum { color: var(--ha-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ha-kb__foot { margin: 10px 0 0; font-size: calc(12px * var(--svc-k, 1)); color: var(--ha-muted); text-align: center; }

/* ═══════════════ کارتِ کدِ خطا در پاسخِ دستیار ═══════════════

   ترتیبِ بلوک‌ها همان ترتیبی است که تکنسینِ سرِ دستگاه لازم دارد:
   چه شد → چطور می‌فهمم → چه کار کنم → از کجا آمده. */
.hv-ec { display: flex; flex-direction: column; gap: 10px; }
.hv-ec__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hv-ec__code {
    font-family: var(--ha-display);
    font-weight: 700;
    font-size: calc(15px * var(--svc-k, 1));
    background: var(--ha-blue-soft);
    color: var(--ha-blue-deep);
    border-radius: 8px;
    padding: 3px 10px;
    /* کدها لاتین‌اند و باید در متنِ راست‌به‌چپ نشکنند. */
    unicode-bidi: isolate;
}
.hv-ec__mode  { font-weight: 600; color: var(--ha-ink); font-size: calc(13.5px * var(--svc-k, 1)); }
.hv-ec__brand {
    font-size: calc(11px * var(--svc-k, 1));
    color: var(--ha-muted);
    border: 1px solid var(--ha-line);
    border-radius: 999px;
    padding: 2px 9px;
}
.hv-ec__block { border-inline-start: 3px solid var(--ha-line); padding-inline-start: 10px; }
/* بلوکِ «چه کار کنم» عمداً برجسته‌تر است — همان چیزی است که کاربر
   برایش آمده. */
.hv-ec__block--do { border-inline-start-color: var(--ha-eco); }
.hv-ec__h {
    margin: 0 0 4px;
    font-size: calc(12px * var(--svc-k, 1));
    font-weight: 700;
    color: var(--ha-muted);
    letter-spacing: .02em;
}
.hv-ec__causes,
.hv-ec__steps { margin: 0; padding-inline-start: 18px; display: grid; gap: 3px; }
.hv-ec__causes { list-style: disc; }
.hv-ec__steps  { list-style: decimal; }
.hv-ec__causes li,
.hv-ec__steps li { font-size: calc(13px * var(--svc-k, 1)); line-height: 1.7; color: var(--ha-ink); }
.hv-ec__more { margin: 4px 0 0; font-size: calc(11.5px * var(--svc-k, 1)); color: var(--ha-muted); }

.hv-ec__det > summary {
    cursor: pointer;
    font-size: calc(12px * var(--svc-k, 1));
    font-weight: 600;
    color: var(--ha-blue-deep);
    list-style: none;
}
.hv-ec__det > summary::-webkit-details-marker { display: none; }
.hv-ec__det > summary::before { content: '▾ '; }
.hv-ec__det[open] > summary::before { content: '▴ '; }
.hv-ec__det p { margin: 6px 0 0; font-size: calc(12.5px * var(--svc-k, 1)); line-height: 1.7; color: var(--ha-muted); }

/* نشانِ منشأ: می‌گوید این رویه از خودِ آن کد نیامده بلکه رویهٔ خانوادگی
   است. صادقانه بودنش مهم‌تر از دیده‌نشدنش است، ولی نباید هم‌وزنِ خودِ
   رویه به‌نظر برسد. */
.hv-ec__prov {
    margin: 0;
    font-size: calc(11.5px * var(--svc-k, 1));
    line-height: 1.6;
    color: var(--ha-amber);
    background: #FFF8E9;
    border: 1px solid #F3E2BC;
    border-radius: 8px;
    padding: 5px 9px;
}
.hv-ec__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (max-width: 520px) {
    .ha-kb__n { font-size: calc(22px * var(--svc-k, 1)); }
    .ha-kb__cell { padding: 11px 10px; }
    .hv-ec__causes li, .hv-ec__steps li { font-size: calc(12.5px * var(--svc-k, 1)); }
}

/* دو کدِ خطا در یک بخش پشتِ سرِ هم می‌آیند و بدونِ خط جدا کننده به‌هم
   می‌چسبند — مخصوصاً وقتی هر دو فهرستِ گام دارند. */
.hv-ec + .hv-ec {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--ha-line);
}

/* ═══════════════ شکل‌های صفحهٔ سند ═══════════════

   بسیاری از رویه‌های عملیِ این پیکره در شکل‌اند نه در متن. جایشان بالای
   متنِ صفحه است و باید با یک کلیک بزرگ شوند — نمودارِ سیم‌کشی در
   بندانگشتی خوانده نمی‌شود. */
.ha-page__figs { margin: 0 0 14px; }
.ha-page__figrow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ha-page__fig {
    margin: 0;
    flex: 0 1 auto;
    border: 1px solid var(--ha-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--ha-mist);
}
.ha-page__figbox {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    min-height: 96px;
    padding: 6px;
    font-size: calc(11.5px * var(--svc-k, 1));
    color: var(--ha-muted);
}
.ha-page__figbox img {
    display: block;
    max-width: 240px;
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: 6px;
}
.ha-page__fig.is-ready { cursor: zoom-in; }
/* حالتِ بزرگ‌نمایی: شکل تمامِ عرضِ پنجره را می‌گیرد تا جزئیاتش خوانده شود. */
.ha-page__fig.is-zoom { flex-basis: 100%; cursor: zoom-out; }
.ha-page__fig.is-zoom .ha-page__figbox img { max-width: 100%; max-height: none; }

/* نشانگرِ «این صفحه شکل دارد» روی دکمهٔ منبع. رنگش با نشانِ برند یکی نیست
   تا با برچسب‌های دیگر قاطی نشود. */
.hv-err__cite-fig {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: calc(11px * var(--svc-k, 1));
    font-weight: 600;
    color: var(--ha-eco);
    background: #E9F6EE;
    border: 1px solid #C8E6D3;
}

/* ═══════════════ انتخابِ منبعِ جست‌وجو ═══════════════

   چیپِ تیک‌خور، نه فهرستِ کشویی: تکنسین باید در یک نگاه ببیند چه منابعی
   هست و چندتا انتخاب شده، بی‌اینکه چیزی باز کند. */
.ha-src {
    max-width: 980px;
    margin: 0 auto 14px;
    padding: 0 16px;
}
.ha-src__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}
.ha-src__title { font-size: calc(12.5px * var(--svc-k, 1)); font-weight: 600; color: var(--ha-muted); }
.ha-src__all {
    font: inherit;
    font-size: calc(12px * var(--svc-k, 1));
    padding: 3px 12px;
    border-radius: 999px;
    border: 1px solid var(--ha-line);
    background: var(--ha-paper);
    color: var(--ha-muted);
    cursor: pointer;
}
.ha-src__all.is-on {
    border-color: var(--ha-blue);
    background: var(--ha-blue-soft);
    color: var(--ha-blue-deep);
    font-weight: 600;
}
.ha-src__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ha-src__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--ha-line);
    border-radius: 999px;
    background: var(--ha-paper);
    font-size: calc(12.5px * var(--svc-k, 1));
    cursor: pointer;
    user-select: none;
    transition: border-color .12s, background .12s;
}
.ha-src__chip input { accent-color: var(--ha-blue); margin: 0; cursor: pointer; }
.ha-src__chip:hover { border-color: var(--ha-blue); }
.ha-src__chip.is-on {
    border-color: var(--ha-blue);
    background: var(--ha-blue-soft);
}
.ha-src__name { font-weight: 600; color: var(--ha-ink); }
.ha-src__n { font-size: calc(11px * var(--svc-k, 1)); color: var(--ha-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
    .ha-src__chip { font-size: calc(12px * var(--svc-k, 1)); padding: 4px 9px; }
    .ha-src__n { display: none; }
}

/* ═══════════════ پاراگراف‌بندیِ پاسخِ آزادِ «هوش واقعی» ═══════════════

   formatModelAnswer() در AiAssistantView.js متنِ خامِ مدل را به این سه
   بلوک می‌شکند: پاراگراف، تیترِ زیربخش («نکتهٔ ایمنی:»)، و فهرستِ
   شماره‌دار. اینجا فقط قالبِ بصریِ همان بلوک‌هاست. */
.ha-ai__h {
    margin: 12px 0 5px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--ha-blue-deep);
}
.ha-ai__list {
    margin: 0 0 8px;
    padding-inline-start: 1.3em;
    display: grid;
    gap: 6px;
}
.ha-ai__list li {
    font-size: .84rem;
    line-height: 1.7;
    color: var(--ha-ink);
}
.ha-ai__list li strong { color: var(--ha-muted); font-weight: 600; }