/* ================= فونت ================= */
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* ================= متغیرها ================= */
:root {
    --hm-bg: #070B14;
    --hm-bg-soft: #0B1220;
    --hm-surface: #101827;
    --hm-surface-2: #162034;
    --hm-surface-3: #1E2A42;
    --hm-line: rgba(255, 255, 255, .07);
    --hm-line-gold: rgba(212, 175, 55, .22);

    --hm-gold: #D4AF37;
    --hm-gold-2: #F0D77B;
    --hm-gold-3: #A9842A;
    --hm-grad-gold: linear-gradient(135deg, #F5E08A 0%, #D4AF37 45%, #A9842A 100%);

    --hm-text: #EAF0F8;
    --hm-text-dim: #9BA8BC;
    --hm-text-mute: #6B7A91;

    --hm-green: #35C48A;
    --hm-red: #F0564C;
    --hm-amber: #F5A623;
    --hm-blue: #4A90E2;

    --hm-radius: 18px;
    --hm-radius-sm: 12px;
    --hm-radius-lg: 24px;

    --hm-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    --hm-shadow-soft: 0 8px 20px rgba(0, 0, 0, .28);

    --hm-header-h: 62px;
    --hm-nav-h: 66px;
    --hm-maxw: 640px;
}

/* ================= پایه ================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

html {
    -webkit-text-size-adjust: 100%;
    background: var(--hm-bg);
}

body {
    font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(212, 175, 55, .10), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(74, 144, 226, .07), transparent 55%),
        var(--hm-bg);
    color: var(--hm-text);
    font-size: 15px;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.2px;
}

h1 { font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

p { margin: 0; }

a {
    color: var(--hm-gold-2);
    text-decoration: none;
    transition: opacity .15s;
}
a:hover { opacity: .8; }

::selection { background: rgba(212, 175, 55, .3); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, .25); border-radius: 99px; }

/* ================= پوستهٔ برنامه ================= */
.hm-app {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.hm-main {
    flex: 1;
    width: 100%;
    max-width: var(--hm-maxw);
    margin: 0 auto;
    padding: calc(var(--hm-header-h) + 14px) 16px calc(var(--hm-nav-h) + 26px);
}

.hm-main--nopad { padding-left: 0; padding-right: 0; }
.hm-main--plain { padding-top: 16px; }
.hm-main--admin { max-width: 1080px; padding-bottom: 32px; }

/* ---------- هدر ---------- */
.hm-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 60;
    height: var(--hm-header-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: rgba(7, 11, 20, .82);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--hm-line);
}

.hm-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hm-header__logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px var(--hm-line-gold), 0 6px 16px rgba(212, 175, 55, .18);
    background: #0B1220;
    object-fit: contain;
}

.hm-header__title {
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--hm-grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hm-header__sub {
    font-size: .7rem;
    color: var(--hm-text-mute);
    line-height: 1.4;
}

.hm-header__spacer { flex: 1; }

.hm-iconbtn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--hm-line);
    background: var(--hm-surface);
    color: var(--hm-text-dim);
    cursor: pointer;
    transition: .18s;
    font-size: 1.05rem;
}
.hm-iconbtn:hover {
    color: var(--hm-gold-2);
    border-color: var(--hm-line-gold);
    background: var(--hm-surface-2);
}

/* ---------- نوار پایین ---------- */
.hm-bottomnav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    height: calc(var(--hm-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: stretch;
    background: rgba(11, 18, 32, .9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--hm-line);
    max-width: var(--hm-maxw);
    margin: 0 auto;
}

.hm-bottomnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--hm-text-mute);
    font-size: .68rem;
    font-weight: 500;
    transition: .18s;
    position: relative;
    cursor: pointer;
}

.hm-bottomnav__item svg { width: 22px; height: 22px; }

.hm-bottomnav__item.active { color: var(--hm-gold-2); }

.hm-bottomnav__item.active::before {
    content: '';
    position: absolute;
    top: 0;
    width: 34px;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: var(--hm-grad-gold);
    box-shadow: 0 2px 12px rgba(212, 175, 55, .6);
}

/* ---------- FAB ---------- */
.hm-fab {
    position: fixed;
    bottom: calc(var(--hm-nav-h) + 16px + env(safe-area-inset-bottom));
    inset-inline-start: 18px;
    z-index: 55;
    height: 54px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 99px;
    background: var(--hm-grad-gold);
    color: #241B04;
    font-family: inherit;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(212, 175, 55, .35);
    transition: .2s;
}
.hm-fab:hover { transform: translateY(-2px); }
.hm-fab:active { transform: scale(.97); }

/* ================= کارت ================= */
.hm-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    padding: 14px;
    box-shadow: var(--hm-shadow-soft);
}

.hm-card + .hm-card { margin-top: 8px; }

.hm-card--gold {
    border-color: var(--hm-line-gold);
    background: linear-gradient(180deg, rgba(212, 175, 55, .10), rgba(212, 175, 55, .02));
}

.hm-card--flat { background: var(--hm-surface); box-shadow: none; }

.hm-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 4px 8px;
}
.hm-section-title h2 { font-size: 1rem; }
.hm-section-title .link { font-size: .8rem; color: var(--hm-text-dim); }

/* ================= دکمه‌ها ================= */
.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 0 18px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: .18s;
    -webkit-tap-highlight-color: transparent;
}

.hm-btn:disabled { opacity: .5; cursor: not-allowed; }

.hm-btn--primary {
    background: var(--hm-grad-gold);
    color: #241B04;
    box-shadow: 0 10px 26px rgba(212, 175, 55, .28);
}
.hm-btn--primary:not(:disabled):active { transform: scale(.985); }

.hm-btn--ghost {
    background: var(--hm-surface-2);
    color: var(--hm-text);
    border: 1px solid var(--hm-line);
}

.hm-btn--outline {
    background: transparent;
    color: var(--hm-gold-2);
    border: 1px solid var(--hm-line-gold);
}

.hm-btn--danger {
    background: rgba(240, 86, 76, .12);
    color: #FF8A82;
    border: 1px solid rgba(240, 86, 76, .35);
}

.hm-btn--success {
    background: rgba(53, 196, 138, .12);
    color: #6BE3B0;
    border: 1px solid rgba(53, 196, 138, .35);
}

.hm-btn--sm {
    min-height: 38px;
    font-size: .82rem;
    border-radius: 11px;
    padding: 0 14px;
    width: auto;
}

.hm-btn-row { display: flex; gap: 10px; margin-top: 10px; }
.hm-btn-row > * { flex: 1; }

/* ================= فرم ================= */
.hm-field { margin-bottom: 12px; }

.hm-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--hm-text-dim);
    margin-bottom: 6px;
}

.hm-label .req { color: var(--hm-red); }

.hm-input,
.hm-select,
.hm-textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--hm-line);
    background: var(--hm-surface);
    color: var(--hm-text);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: .18s;
    -webkit-appearance: none;
    appearance: none;
}

.hm-input::placeholder,
.hm-textarea::placeholder { color: var(--hm-text-mute); }

.hm-input:focus,
.hm-select:focus,
.hm-textarea:focus {
    border-color: rgba(212, 175, 55, .55);
    background: var(--hm-surface-2);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .09);
}

.hm-input--ltr {
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
}

.hm-input--code {
    direction: ltr;
    text-align: center;
    font-size: 1.9rem;
    letter-spacing: 14px;
    font-weight: 700;
    padding-inline-start: 14px;
    font-variant-numeric: tabular-nums;
}

.hm-textarea {
    min-height: 96px;
    resize: vertical;
    font-size: .95rem;
    line-height: 1.8;
}

.hm-hint { font-size: .76rem; color: var(--hm-text-mute); margin-top: 5px; line-height: 1.7; }
.hm-hint--ok { color: #6BE3B0; }
.hm-hint--err { color: #FF8A82; }

/* ---------- فیلد رمز عبور با چشم ---------- */
.hm-pass { position: relative; }
.hm-pass .hm-input { padding-left: 48px; }
.hm-eye {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--hm-text-mute);
    cursor: pointer;
    border-radius: 10px;
    transition: .15s;
}
.hm-eye:hover { color: var(--hm-gold); background: rgba(212, 175, 55, .08); }
.hm-eye:focus-visible { outline: 2px solid rgba(212, 175, 55, .5); outline-offset: 1px; }
.hm-eye.is-on { color: var(--hm-gold); }
.hm-eye svg { display: block; }

/* ---------- مبلغ و شبا ---------- */
.hm-input--amount,
.hm-input--iban {
    font-family: 'Consolas', 'Courier New', monospace;
    letter-spacing: .6px;
    font-size: 1.02rem;
}

.hm-input--amount { font-weight: 700; }

.hm-amount-words {
    margin-top: 9px;
    padding: 10px 13px;
    border-radius: 12px;
    background: rgba(212, 175, 55, .07);
    border: 1px solid var(--hm-line-gold);
    line-height: 1.9;
}

.hm-amount-words__value {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--hm-gold-2);
    font-variant-numeric: tabular-nums;
}

.hm-amount-words__text {
    display: block;
    font-size: .8rem;
    color: var(--hm-text-dim);
    margin-top: 2px;
}

/* ---------- کادر شبا با پیشوند ثابت IR ---------- */
.hm-iban {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--hm-line);
    border-radius: 14px;
    background: var(--hm-surface);
    overflow: hidden;
    transition: .18s;
    /* شبا همیشه چپ‌به‌راست است تا IR در سمت چپ و ارقام به ترتیب درست دیده شوند */
    direction: ltr;
}

.hm-iban:focus-within {
    border-color: rgba(212, 175, 55, .55);
    background: var(--hm-surface-2);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .09);
}

.hm-iban__prefix {
    display: grid;
    place-items: center;
    padding: 0 6px;
    flex: 0 0 auto;
    background: var(--hm-grad-gold);
    color: #241B04;
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: 700;
    font-size: clamp(.82rem, 3.6vw, 1rem);
    letter-spacing: .3px;
    user-select: none;
    -webkit-user-select: none;
}

.hm-iban__box {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.hm-iban__ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 6px;
    direction: ltr;
    text-align: left;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: clamp(.76rem, 4vw, 1.05rem);
    line-height: 1;
}

.hm-iban__input {
    width: 100%;
    min-height: 50px;
    padding: 0 6px;
    border: none;
    outline: none;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--hm-gold-2);
    direction: ltr;
    text-align: left;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: clamp(.76rem, 4vw, 1.05rem);
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.hm-iban__input::selection { background: rgba(212, 175, 55, .35); }

.hm-iban__placeholder {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: .82rem;
    color: var(--hm-text-mute);
}

.hm-iban__g0 { color: var(--hm-gold-2); font-weight: 700; }
.hm-iban__g1 { color: #EAF0F8; }
.hm-iban__g2 { color: #7FA9D6; }

@media (min-width: 480px) {
    .hm-iban__ghost,
    .hm-iban__input,
    .hm-iban__prefix { font-size: 1.05rem; }
}

/* ---------- بلوک بات‌ها در تنظیمات ---------- */
.hm-bot-block {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    background: var(--hm-surface);
    border: 1px solid var(--hm-line);
}

.hm-bot-block .hm-hint { margin-bottom: 0; }

.hm-divider { height: 1px; background: var(--hm-line); margin: 14px 0; border: none; }

/* ================= پیام‌ها ================= */
.hm-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: .85rem;
    line-height: 1.75;
    margin-bottom: 12px;
    border: 1px solid transparent;
}

.hm-alert--error { background: rgba(240, 86, 76, .1); border-color: rgba(240, 86, 76, .28); color: #FFA9A3; }
.hm-alert--success { background: rgba(53, 196, 138, .1); border-color: rgba(53, 196, 138, .28); color: #7FEBC0; }
.hm-alert--info { background: rgba(74, 144, 226, .1); border-color: rgba(74, 144, 226, .28); color: #9CC7F5; }
.hm-alert--warn { background: rgba(245, 166, 35, .1); border-color: rgba(245, 166, 35, .3); color: #FFD08A; }

/* ================= نشان وضعیت ================= */
.hm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
}

.hm-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.hm-badge--new { background: rgba(74, 144, 226, .13); color: #7FB6F2; border-color: rgba(74, 144, 226, .25); }
.hm-badge--progress { background: rgba(245, 166, 35, .13); color: #FFC46B; border-color: rgba(245, 166, 35, .25); }
.hm-badge--info { background: rgba(212, 175, 55, .13); color: var(--hm-gold-2); border-color: var(--hm-line-gold); }
.hm-badge--done { background: rgba(53, 196, 138, .13); color: #6BE3B0; border-color: rgba(53, 196, 138, .25); }
.hm-badge--reject { background: rgba(240, 86, 76, .13); color: #FF8A82; border-color: rgba(240, 86, 76, .25); }
.hm-badge--muted { background: rgba(255, 255, 255, .06); color: var(--hm-text-mute); border-color: var(--hm-line); }

/* ================= کارت درخواست ================= */
.hm-reqlist { display: flex; flex-direction: column; gap: 8px; }

.hm-req {
    display: block;
    padding: 15px 16px;
    border-radius: var(--hm-radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
    border: 1px solid var(--hm-line);
    color: inherit;
    transition: .18s;
    position: relative;
    overflow: hidden;
}

.hm-req:hover {
    border-color: var(--hm-line-gold);
    background: var(--hm-surface-2);
    transform: translateY(-1px);
}

.hm-req__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.hm-req__amount {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--hm-gold-2);
    font-variant-numeric: tabular-nums;
}

.hm-req__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: .78rem;
    color: var(--hm-text-mute);
}

.hm-req__meta strong { color: var(--hm-text-dim); font-weight: 500; }

.hm-req__iban {
    direction: ltr;
    text-align: left;
    font-family: 'Consolas', monospace;
    letter-spacing: .4px;
    font-size: .8rem;
    color: var(--hm-text-dim);
}

.hm-req__assignee {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--hm-line);
    font-size: .78rem;
    color: var(--hm-text-dim);
}

.hm-req__assignee .who { color: var(--hm-gold-2); font-weight: 500; }

.hm-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 700;
    background: var(--hm-grad-gold);
    color: #241B04;
    flex: 0 0 auto;
}

/* ================= چت ================= */
.hm-chat { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }

.hm-msg {
    max-width: 84%;
    padding: 11px 14px;
    border-radius: 16px;
    font-size: .88rem;
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
    position: relative;
}

.hm-msg--customer {
    align-self: flex-start;
    background: var(--hm-surface-3);
    border-end-start-radius: 6px;
    color: var(--hm-text);
}

.hm-msg--admin {
    align-self: flex-end;
    background: linear-gradient(180deg, rgba(212, 175, 55, .22), rgba(212, 175, 55, .13));
    border: 1px solid var(--hm-line-gold);
    border-end-end-radius: 6px;
    color: #FFF3CF;
}

.hm-msg--system {
    align-self: center;
    max-width: 92%;
    background: rgba(255, 255, 255, .045);
    color: var(--hm-text-dim);
    font-size: .76rem;
    text-align: center;
    border-radius: 12px;
    padding: 8px 14px;
}

.hm-msg__meta {
    display: block;
    font-size: .66rem;
    color: var(--hm-text-mute);
    margin-top: 5px;
}

.hm-msg--internal {
    border: 1px dashed rgba(245, 166, 35, .4);
    background: rgba(245, 166, 35, .07);
    color: #FFD7A0;
}

.hm-chatbox {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 70;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(11, 18, 32, .95);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--hm-line);
    display: flex;
    gap: 9px;
    align-items: flex-end;
    max-width: var(--hm-maxw);
    margin: 0 auto;
}

.hm-chatbox textarea {
    flex: 1;
    min-height: 46px;
    max-height: 120px;
    padding: 11px 15px;
    border-radius: 14px;
    border: 1px solid var(--hm-line);
    background: var(--hm-surface);
    color: var(--hm-text);
    font-family: inherit;
    font-size: .9rem;
    resize: none;
    outline: none;
}
.hm-chatbox textarea:focus { border-color: rgba(212, 175, 55, .5); }

.hm-sendbtn {
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 14px;
    background: var(--hm-grad-gold);
    color: #241B04;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: .18s;
}
.hm-sendbtn:disabled { opacity: .4; }

/* ================= خالی ================= */
.hm-empty { text-align: center; padding: 46px 20px; color: var(--hm-text-mute); }
.hm-empty__icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(212, 175, 55, .08);
    border: 1px dashed var(--hm-line-gold);
    font-size: 1.9rem;
}
.hm-empty h3 { color: var(--hm-text-dim); margin-bottom: 6px; font-size: .95rem; }
.hm-empty p { font-size: .82rem; line-height: 1.9; }

/* ================= بارگذاری ================= */
.hm-spinner {
    width: 26px;
    height: 26px;
    border: 2.5px solid rgba(212, 175, 55, .22);
    border-top-color: var(--hm-gold);
    border-radius: 50%;
    animation: hm-spin .7s linear infinite;
    margin: 0 auto;
}

@keyframes hm-spin { to { transform: rotate(360deg); } }

.hm-authwait { min-height: 60vh; display: grid; place-items: center; }

.hm-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(7, 11, 20, .75);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
}

/* ================= سربرگ صفحه ================= */
.hm-page-head { margin: 2px 4px 12px; }
.hm-page-head h1 { font-size: 1.25rem; margin-bottom: 2px; }
.hm-page-head p { font-size: .82rem; color: var(--hm-text-mute); }

/* ================= تب ================= */
.hm-tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    background: var(--hm-surface);
    border: 1px solid var(--hm-line);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.hm-tabs::-webkit-scrollbar { display: none; }

.hm-tab {
    flex: 1 0 auto;
    min-width: 84px;
    padding: 9px 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--hm-text-dim);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: .18s;
    white-space: nowrap;
}
.hm-tab.active { background: var(--hm-grad-gold); color: #241B04; font-weight: 700; }
.hm-tab .count { display: inline-block; margin-inline-start: 5px; font-size: .7rem; opacity: .85; }

/* ================= آمار ================= */
.hm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.hm-stat {
    padding: 14px;
    border-radius: 16px;
    background: var(--hm-surface);
    border: 1px solid var(--hm-line);
    text-align: center;
}
.hm-stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hm-gold-2);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}
.hm-stat__label { font-size: .72rem; color: var(--hm-text-mute); margin-top: 2px; }

/* ================= جدول ================= */
.hm-table-wrap { overflow-x: auto; border-radius: var(--hm-radius); border: 1px solid var(--hm-line); }

.hm-table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 560px; }
.hm-table th {
    text-align: right;
    padding: 12px 14px;
    background: var(--hm-surface-2);
    color: var(--hm-text-dim);
    font-weight: 500;
    white-space: nowrap;
}
.hm-table td { padding: 12px 14px; border-top: 1px solid var(--hm-line); vertical-align: middle; }
.hm-table tbody tr:hover { background: rgba(255, 255, 255, .02); }

.mono {
    font-family: 'Consolas', monospace;
    direction: ltr;
    text-align: left;
    font-size: .8rem;
    letter-spacing: .3px;
}

/* ================= شیت پایین ================= */
.hm-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(4, 7, 13, .68);
    backdrop-filter: blur(6px);
    animation: hm-fade .2s ease;
}

@keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }

.hm-sheet {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 151;
    max-width: var(--hm-maxw);
    margin: 0 auto;
    background: var(--hm-bg-soft);
    border: 1px solid var(--hm-line);
    border-bottom: none;
    border-radius: 26px 26px 0 0;
    padding: 10px 18px calc(24px + env(safe-area-inset-bottom));
    animation: hm-slide .26s cubic-bezier(.2, .9, .3, 1);
    max-height: 88dvh;
    overflow-y: auto;
}

@keyframes hm-slide { from { transform: translateY(100%); } to { transform: translateY(0); } }

.hm-sheet__grip {
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .16);
    margin: 4px auto 16px;
}

.hm-sheet h3 { font-size: 1rem; margin-bottom: 14px; }

/* ================= لاگین ================= */
.hm-auth {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 20px calc(30px + env(safe-area-inset-bottom));
    max-width: 460px;
    margin: 0 auto;
    position: relative;
}

.hm-auth__logo {
    width: 116px;
    height: 116px;
    margin: 0 auto 18px;
    object-fit: contain;
    filter: drop-shadow(0 14px 34px rgba(212, 175, 55, .28));
    animation: hm-float 5s ease-in-out infinite;
}

@keyframes hm-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.hm-auth__brand {
    text-align: center;
    font-size: 1.12rem;
    font-weight: 700;
    background: var(--hm-grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 4px;
}

.hm-auth__sub { text-align: center; font-size: .78rem; color: var(--hm-text-mute); margin-bottom: 26px; }

.hm-auth__box {
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius-lg);
    padding: 22px 18px;
    box-shadow: var(--hm-shadow);
    backdrop-filter: blur(10px);
}

.hm-auth__box h2 { font-size: .95rem; margin-bottom: 4px; }

.hm-auth__box .sub { font-size: .78rem; color: var(--hm-text-mute); margin-bottom: 18px; line-height: 1.8; }

.hm-auth__foot { text-align: center; font-size: .74rem; color: var(--hm-text-mute); margin-top: 26px; line-height: 2; }

.hm-linkbtn {
    background: none;
    border: none;
    color: var(--hm-gold-2);
    font-family: inherit;
    font-size: .8rem;
    cursor: pointer;
    padding: 6px;
}

/* ================= شبکه ================= */
.hm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.hm-row { display: flex; align-items: center; gap: 10px; }
.hm-row--between { justify-content: space-between; }

.hm-text-dim { color: var(--hm-text-dim); }
.hm-text-mute { color: var(--hm-text-mute); }
.hm-text-gold { color: var(--hm-gold-2); }
.hm-text-sm { font-size: .8rem; }
.hm-text-xs { font-size: .72rem; }
.hm-bold { font-weight: 700; }
.hm-center { text-align: center; }
.hm-mt-1 { margin-top: 8px; }
.hm-mt-2 { margin-top: 16px; }
.hm-mt-3 { margin-top: 26px; }
.hm-mb-1 { margin-bottom: 8px; }

@media (max-width: 420px) {
    .hm-grid-2 { grid-template-columns: 1fr; }
    .hm-main { padding-left: 13px; padding-right: 13px; }
}

/* ================= کی‌ولیو ================= */
.hm-kv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--hm-line);
    font-size: .85rem;
}
.hm-kv:last-child { border-bottom: none; }
.hm-kv .k { color: var(--hm-text-mute); font-size: .8rem; }
.hm-kv .v { font-weight: 500; }

.hm-copy {
    background: none;
    border: 1px solid var(--hm-line);
    color: var(--hm-text-dim);
    border-radius: 9px;
    padding: 3px 9px;
    font-family: inherit;
    font-size: .72rem;
    cursor: pointer;
    transition: .15s;
}
.hm-copy:hover { color: var(--hm-gold-2); border-color: var(--hm-line-gold); }

.hm-pin {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(53, 196, 138, .08);
    border: 1px solid rgba(53, 196, 138, .25);
    border-radius: 12px;
    font-size: .8rem;
    color: #7FEBC0;
    margin-bottom: 14px;
}

/* ================= هیرو ================= */
.hm-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--hm-radius-lg);
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(212, 175, 55, .18), transparent 60%),
        linear-gradient(180deg, var(--hm-surface-2), var(--hm-surface));
    border: 1px solid var(--hm-line-gold);
    margin-bottom: 14px;
}

.hm-hero__avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--hm-grad-gold);
    color: #241B04;
    font-weight: 700;
    font-size: 1.2rem;
    flex: 0 0 auto;
}

.hm-hero__name { font-size: 1rem; font-weight: 700; }
.hm-hero__sub { font-size: .76rem; color: var(--hm-text-mute); }

/* ================= مراحل ================= */
.hm-steps { display: flex; align-items: center; gap: 4px; margin: 14px 0 4px; }
.hm-step { flex: 1; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.hm-step.on { background: var(--hm-grad-gold); }
.hm-step.done { background: var(--hm-green); }

.hm-steps-labels {
    display: flex;
    justify-content: space-between;
    font-size: .66rem;
    color: var(--hm-text-mute);
    margin-top: 7px;
}

/* ================= سوییچ ================= */
.hm-switch {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 99px;
    background: var(--hm-surface-3);
    border: 1px solid var(--hm-line);
    cursor: pointer;
    transition: .2s;
    flex: 0 0 auto;
}
.hm-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--hm-text-mute);
    transition: .2s;
}
.hm-switch.on { background: rgba(212, 175, 55, .25); border-color: var(--hm-line-gold); }
.hm-switch.on::after { inset-inline-start: calc(100% - 22px); background: var(--hm-gold-2); }

h1:focus {
    outline: none;
}

/* ================= نوار خطا (پیش‌فرض قالب) ================= */
#blazor-error-ui {
    color-scheme: dark;
    background: #7a2420;
    color: #FFE9E6;
    bottom: 0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .4);
    box-sizing: border-box;
    display: none;
    inset-inline: 0;
    padding: .7rem 1.25rem;
    position: fixed;
    z-index: 1000;
    font-family: 'Vazirmatn', sans-serif;
    font-size: .82rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    inset-inline-end: .75rem;
    top: .5rem;
}

#blazor-error-ui .reload {
    color: #F5E08A;
    margin-inline-start: 8px;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==========================================================================
   تم روشن (Light theme)
   با [data-theme="light"] روی <html> فعال می‌شود. این بخش بعد از تمام قواعد
   تیره می‌آید تا با ویژگی بالاتر، آن‌ها را بازنویسی کند.
   ========================================================================== */

[data-theme="light"] {
    --hm-bg: #F4F6FA;
    --hm-bg-soft: #FFFFFF;
    --hm-surface: #FFFFFF;
    --hm-surface-2: #F1F4F9;
    --hm-surface-3: #E7EDF6;

    --hm-line: rgba(16, 24, 40, .11);
    --hm-line-gold: rgba(169, 132, 42, .38);

    --hm-gold: #B8912B;
    --hm-gold-2: #8A6A14;
    --hm-gold-3: #6F540C;
    --hm-grad-gold: linear-gradient(135deg, #E8C765 0%, #C9A227 45%, #A5851E 100%);

    --hm-text: #101828;
    --hm-text-dim: #475467;
    --hm-text-mute: #667085;

    --hm-green: #0E8A5F;
    --hm-red: #C0392B;
    --hm-amber: #B26A00;
    --hm-blue: #1F6FD0;

    --hm-shadow: 0 18px 40px rgba(16, 24, 40, .13);
    --hm-shadow-soft: 0 6px 16px rgba(16, 24, 40, .08);
}

/* ---------- پس‌زمینهٔ صفحه ---------- */
[data-theme="light"] body {
    background:
        radial-gradient(1100px 520px at 100% -10%, rgba(184, 145, 43, .13), transparent 60%),
        radial-gradient(900px 480px at 0% 100%, rgba(31, 111, 208, .08), transparent 55%),
        var(--hm-bg);
    color: var(--hm-text);
}

/* ---------- سطوح شیشه‌ای ---------- */
[data-theme="light"] .hm-header {
    background: rgba(255, 255, 255, .88);
    border-bottom-color: var(--hm-line);
}

[data-theme="light"] .hm-bottomnav {
    background: rgba(255, 255, 255, .95);
    border-top-color: var(--hm-line);
}

[data-theme="light"] .hm-chatbox {
    background: rgba(255, 255, 255, .97);
    border-top-color: var(--hm-line);
}

[data-theme="light"] .hm-chatbox textarea,
[data-theme="light"] .hm-input,
[data-theme="light"] .hm-select,
[data-theme="light"] .hm-textarea,
[data-theme="light"] .hm-iban,
[data-theme="light"] .hm-iconbtn,
[data-theme="light"] .hm-stat,
[data-theme="light"] .hm-tabs,
[data-theme="light"] .hm-card--flat,
[data-theme="light"] .hm-bot-block {
    background: #FFFFFF;
    border-color: var(--hm-line);
    color: var(--hm-text);
}

[data-theme="light"] .hm-input::placeholder,
[data-theme="light"] .hm-textarea::placeholder,
[data-theme="light"] .hm-chatbox textarea::placeholder {
    color: #98A2B3;
}

[data-theme="light"] .hm-input:focus,
[data-theme="light"] .hm-select:focus,
[data-theme="light"] .hm-textarea:focus {
    background: #FFFFFF;
    border-color: rgba(169, 132, 42, .6);
    box-shadow: 0 0 0 4px rgba(184, 145, 43, .12);
}

/* ---------- کارت‌ها ---------- */
[data-theme="light"] .hm-card {
    background: #FFFFFF;
    border-color: var(--hm-line);
    box-shadow: var(--hm-shadow-soft);
}

[data-theme="light"] .hm-card--gold {
    background: linear-gradient(180deg, rgba(184, 145, 43, .12), rgba(184, 145, 43, .03));
    border-color: var(--hm-line-gold);
}

[data-theme="light"] .hm-auth__box {
    background: rgba(255, 255, 255, .92);
    border-color: var(--hm-line);
    box-shadow: 0 20px 46px rgba(16, 24, 40, .12);
}

[data-theme="light"] .hm-hero {
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(184, 145, 43, .2), transparent 60%),
        linear-gradient(180deg, #FFFDF6, #FFFFFF);
    border-color: var(--hm-line-gold);
}

[data-theme="light"] .hm-sheet {
    background: #FFFFFF;
    border-color: var(--hm-line);
}

[data-theme="light"] .hm-sheet-backdrop {
    background: rgba(16, 24, 40, .38);
}

[data-theme="light"] .hm-loading-overlay {
    background: rgba(244, 246, 250, .82);
}

/* ---------- کارت درخواست ---------- */
[data-theme="light"] .hm-req {
    background: #FFFFFF;
    border-color: var(--hm-line);
}

[data-theme="light"] .hm-req:hover {
    background: #FBFCFE;
    border-color: var(--hm-line-gold);
}

[data-theme="light"] .hm-req__assignee {
    border-top-color: rgba(16, 24, 40, .12);
}

/* ---------- دکمه‌ها ---------- */
[data-theme="light"] .hm-btn--ghost {
    background: #F1F4F9;
    color: var(--hm-text);
    border-color: var(--hm-line);
}

[data-theme="light"] .hm-btn--outline {
    background: #FFFFFF;
    color: var(--hm-gold-2);
    border-color: var(--hm-line-gold);
}

[data-theme="light"] .hm-btn--primary,
[data-theme="light"] .hm-fab,
[data-theme="light"] .hm-sendbtn,
[data-theme="light"] .hm-tab.active {
    color: #2B2000;
}

[data-theme="light"] .hm-btn--danger {
    background: #FDECEA;
    color: #B42318;
    border-color: #F3C2BE;
}

[data-theme="light"] .hm-btn--success {
    background: #E7F7EF;
    color: #067647;
    border-color: #A6E9C8;
}

[data-theme="light"] .hm-copy {
    background: #FFFFFF;
    color: var(--hm-text-dim);
    border-color: var(--hm-line);
}

/* ---------- هشدارها ---------- */
[data-theme="light"] .hm-alert--error {
    background: #FDECEA;
    border-color: #F3C2BE;
    color: #B42318;
}

[data-theme="light"] .hm-alert--success {
    background: #E7F7EF;
    border-color: #A6E9C8;
    color: #067647;
}

[data-theme="light"] .hm-alert--info {
    background: #EAF2FD;
    border-color: #BFD7F7;
    color: #175CD3;
}

[data-theme="light"] .hm-alert--warn {
    background: #FFF6E5;
    border-color: #F5D48A;
    color: #8A5800;
}

/* ---------- نشان‌ها ---------- */
[data-theme="light"] .hm-badge--new {
    background: #EAF2FD;
    color: #175CD3;
    border-color: #BFD7F7;
}

[data-theme="light"] .hm-badge--progress {
    background: #FFF6E5;
    color: #8A5800;
    border-color: #F5D48A;
}

[data-theme="light"] .hm-badge--info {
    background: #FDF6E1;
    color: var(--hm-gold-2);
    border-color: var(--hm-line-gold);
}

[data-theme="light"] .hm-badge--done {
    background: #E7F7EF;
    color: #067647;
    border-color: #A6E9C8;
}

[data-theme="light"] .hm-badge--reject {
    background: #FDECEA;
    color: #B42318;
    border-color: #F3C2BE;
}

[data-theme="light"] .hm-badge--muted {
    background: #F1F4F9;
    color: #475467;
    border-color: var(--hm-line);
}

/* ---------- چت ---------- */
[data-theme="light"] .hm-msg--customer {
    background: #EDF2F9;
    color: #101828;
}

[data-theme="light"] .hm-msg--admin {
    background: #FDF3D2;
    border-color: #E9D36A;
    color: #3E2F05;
}

[data-theme="light"] .hm-msg--system {
    background: #EFF2F7;
    color: #475467;
}

[data-theme="light"] .hm-msg--internal {
    background: #FFF7E6;
    border-color: #F0C77B;
    color: #7A4E00;
}

[data-theme="light"] .hm-msg__meta {
    color: #7C8698;
}

/* ---------- کنترل‌های ریز ---------- */
[data-theme="light"] .hm-divider {
    background: var(--hm-line);
}

[data-theme="light"] .hm-switch {
    background: #E4E9F2;
    border-color: var(--hm-line);
}

[data-theme="light"] .hm-switch::after {
    background: #98A2B3;
}

[data-theme="light"] .hm-switch.on {
    background: rgba(184, 145, 43, .3);
    border-color: var(--hm-line-gold);
}

[data-theme="light"] .hm-switch.on::after {
    background: var(--hm-gold-2);
}

[data-theme="light"] .hm-iban__g1 {
    color: #101828;
}

[data-theme="light"] .hm-iban__g2 {
    color: #1F6FD0;
}

[data-theme="light"] .hm-step {
    background: rgba(16, 24, 40, .1);
}

[data-theme="light"] .hm-pin {
    background: #E7F7EF;
    border-color: #A6E9C8;
    color: #067647;
}

[data-theme="light"] .hm-kv {
    border-bottom-color: var(--hm-line);
}

[data-theme="light"] .hm-empty__icon {
    background: rgba(184, 145, 43, .1);
    border-color: var(--hm-line-gold);
}

[data-theme="light"] .hm-table th {
    background: #F1F4F9;
    color: #475467;
}

[data-theme="light"] .hm-table td {
    border-top-color: var(--hm-line);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(16, 24, 40, .18);
}

[data-theme="light"] #blazor-error-ui {
    color-scheme: light;
    background: #B42318;
    color: #FFF6F5;
}

/* ==========================================================================
   دکمهٔ تغییر تم
   ========================================================================== */
.theme-icon-sun { display: none; }
[data-theme="light"] .theme-icon-sun { display: block; }
[data-theme="light"] .theme-icon-moon { display: none; }

.hm-theme-toggle--float {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top));
    inset-inline-start: 14px;
    z-index: 120;
    background: rgba(16, 24, 40, .55);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, .18);
    color: #EAF0F8;
}

[data-theme="light"] .hm-theme-toggle--float {
    background: rgba(255, 255, 255, .9);
    border-color: var(--hm-line);
    color: #475467;
}

/* ---------- نشان تعداد در تب‌ها ---------- */
.hm-tab__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-inline-start: 5px;
    border-radius: 99px;
    background: #F0564C;
    color: #FFFFFF;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
}

.hm-tab.active .hm-tab__dot {
    background: #241B04;
    color: #F5E08A;
}
/* ---------- پیوست‌های چت ---------- */
.hm-attach {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.hm-attach__media {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    border: 1px solid rgba(255, 255, 255, .1);
}

.hm-attach__media img {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    max-height: 260px;
    object-fit: cover;
}

.hm-attach__video {
    width: 100%;
    max-width: 260px;
    border-radius: 12px;
    background: #000;
}

.hm-attach__audio {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
}

.hm-attach__audio-icon { font-size: .95rem; }

.hm-attach__audio audio {
    width: 100%;
    height: 34px;
}

.hm-attach__file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: inherit;
    font-size: .76rem;
    text-decoration: none;
    max-width: 260px;
}

.hm-attach__file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-attach__file-size {
    opacity: .7;
    font-size: .7rem;
    white-space: nowrap;
}

/* ---------- نوار ابزار چت ---------- */
.hm-chatbox--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.hm-chatbox__tools {
    display: flex;
    align-items: center;
    gap: 4px;
    /* visible تا منوی پیوست (که بالای نوار باز می‌شود) بریده نشود */
    overflow: visible;
}

.hm-chatbox__row {
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.hm-chatbox__sep {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, .12);
    margin: 0 2px;
    flex: 0 0 auto;
}

.hm-tool {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--hm-line);
    background: var(--hm-surface);
    color: var(--hm-text-dim);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    transition: .15s;
}

.hm-tool:hover { border-color: var(--hm-line-gold); color: var(--hm-gold-2); }

.hm-tool--rec {
    background: rgba(240, 86, 76, .15);
    border-color: rgba(240, 86, 76, .5);
    color: #FF9A93;
    animation: hm-rec-pulse 1.2s ease-in-out infinite;
}

@keyframes hm-rec-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 86, 76, .45); }
    50%      { box-shadow: 0 0 0 6px rgba(240, 86, 76, 0); }
}

[data-theme="light"] .hm-attach__media { border-color: rgba(16, 24, 40, .12); }
[data-theme="light"] .hm-attach__file { background: #F1F4F9; border-color: rgba(16, 24, 40, .12); }
[data-theme="light"] .hm-chatbox__sep { background: rgba(16, 24, 40, .12); }

/* ============================================================
   ورود با اثر انگشت / چهره
   ============================================================ */
.hm-bio {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hm-line, rgba(255, 255, 255, .08));
}

.hm-bio__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    background: linear-gradient(180deg, rgba(212, 175, 75, .14), rgba(212, 175, 75, .05));
    border: 1px solid rgba(212, 175, 75, .45);
    color: var(--hm-gold-2, #E9C86A);
}

.hm-bio__btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(212, 175, 75, .22), rgba(212, 175, 75, .08));
}

.hm-bio__btn:disabled { opacity: .6; }

.hm-bio__icon { font-size: 1.15rem; line-height: 1; }

/* ============================================================
   مسیریابی اعلان‌ها (چیپ‌های کانال)
   ============================================================ */
.hm-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hm-line, rgba(255, 255, 255, .06));
    flex-wrap: wrap;
}

.hm-rule:last-of-type { border-bottom: none; }

.hm-rule__title {
    font-size: .82rem;
    color: var(--hm-text-2, #C9D2E0);
    flex: 1 1 140px;
    min-width: 120px;
}

.hm-rule__channels {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hm-rule__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .72rem;
    cursor: pointer;
    border: 1px solid var(--hm-line, rgba(255, 255, 255, .12));
    background: var(--hm-surface-3, rgba(255, 255, 255, .04));
    color: var(--hm-text-mute, #8A94A6);
    user-select: none;
    transition: all .15s ease;
}

.hm-rule__chip input { display: none; }

.hm-rule__chip.is-on {
    border-color: rgba(212, 175, 75, .6);
    background: rgba(212, 175, 75, .16);
    color: var(--hm-gold-2, #E9C86A);
    font-weight: 600;
}

/* ============================================================
   لاگ اعلان‌ها
   ============================================================ */
.hm-logs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    max-height: 520px;
    overflow-y: auto;
}

.hm-log {
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--hm-surface-3, rgba(255, 255, 255, .03));
    border-inline-start: 3px solid var(--hm-line, rgba(255, 255, 255, .12));
    font-size: .78rem;
}

.hm-log--ok { border-inline-start-color: #35C08A; }
.hm-log--fail { border-inline-start-color: #F0564C; }
.hm-log--skip { border-inline-start-color: #6B7A90; }

.hm-log__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.hm-log__badge {
    font-size: .68rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(212, 175, 75, .18);
    color: var(--hm-gold-2, #E9C86A);
    font-weight: 600;
}

.hm-log__event { color: var(--hm-text-2, #C9D2E0); }
.hm-log__time { margin-inline-start: auto; color: var(--hm-text-mute, #8A94A6); font-size: .7rem; }

.hm-log__body {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--hm-text-dim, #A9B4C4);
}

.hm-log__status { font-weight: 600; }

/* ============================================================
   منوی پیوست چت (دکمهٔ ➕ + فهرست گزینه‌ها)
   ============================================================ */
.hm-attach-wrap {
    position: relative;
    display: inline-flex;
}

.hm-attach-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    inset-inline-start: 0;
    z-index: 60;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--hm-line, rgba(255, 255, 255, .07));
    background: var(--hm-surface-2, #162034);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    animation: hm-attach-in .16s ease;
}

@keyframes hm-attach-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.hm-attach-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--hm-text, #EAF0F8);
    font: inherit;
    font-size: .9rem;
    text-align: start;
    cursor: pointer;
}

.hm-attach-menu__item:hover { background: var(--hm-surface-3, #1E2A42); }
.hm-attach-menu__item span:first-child { font-size: 1.05rem; }

[data-theme="light"] .hm-attach-menu {
    background: #FFFFFF;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .18);
}
[data-theme="light"] .hm-attach-menu__item:hover { background: #F1F4F9; }

/* ============================================================
   توست شناور (نمایش چندثانیه‌ای رخدادها در هر نقطهٔ صفحه)
   ============================================================ */
#hm-toast-root {
    position: fixed;
    bottom: max(18px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(92vw, 480px);
    pointer-events: none;
}

.hm-toast {
    pointer-events: auto;
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--hm-line, rgba(255, 255, 255, .07));
    background: var(--hm-surface-2, #162034);
    color: var(--hm-text, #EAF0F8);
    font-size: .9rem;
    line-height: 1.8;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .3s ease;
    cursor: pointer;
}

.hm-toast--in { opacity: 1; transform: translateY(0); }

.hm-toast--ok { border-color: rgba(53, 196, 138, .35); color: #7FEBC0; }
.hm-toast--error { border-color: rgba(240, 86, 76, .35); color: #FFA9A3; }
.hm-toast--warn { border-color: rgba(245, 166, 35, .35); color: #FFD08A; }
.hm-toast--info { border-color: rgba(74, 144, 226, .35); color: #9CC7F5; }

[data-theme="light"] .hm-toast {
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
}
[data-theme="light"] .hm-toast--ok { color: #0E7A4F; }
[data-theme="light"] .hm-toast--error { color: #B3261E; }
[data-theme="light"] .hm-toast--warn { color: #8A5A00; }
[data-theme="light"] .hm-toast--info { color: #1D5FBF; }

[data-theme="light"] .hm-bio { border-top-color: rgba(16, 24, 40, .1); }
[data-theme="light"] .hm-rule { border-bottom-color: rgba(16, 24, 40, .08); }
[data-theme="light"] .hm-rule__chip { background: #F1F4F9; border-color: rgba(16, 24, 40, .12); color: #5A6474; }
[data-theme="light"] .hm-rule__chip.is-on { background: rgba(178, 138, 30, .14); border-color: rgba(178, 138, 30, .5); color: #8A6A10; }
[data-theme="light"] .hm-log { background: #F7F9FC; }
[data-theme="light"] .hm-log__event { color: #3A4353; }
[data-theme="light"] .hm-log__body { color: #4A5464; }

/* ============================================================
   گفتگوهای دیده‌شده توسط بات (پیدا کردن Chat ID گروه)
   ============================================================ */
.hm-chats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.hm-chat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--hm-surface-3, rgba(255, 255, 255, .03));
    border: 1px solid var(--hm-line, rgba(255, 255, 255, .07));
}

.hm-chat-row__info { min-width: 0; flex: 1; }

.hm-chat-row__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--hm-text-1, #E8EDF5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-chat-row__badge {
    font-size: .65rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(212, 175, 75, .18);
    color: var(--hm-gold-2, #E9C86A);
    flex-shrink: 0;
}

.hm-chat-row__id {
    font-size: .72rem;
    color: var(--hm-text-dim, #A9B4C4);
    margin: 3px 0;
    direction: ltr;
    text-align: right;
    word-break: break-all;
}

[data-theme="light"] .hm-chat-row { background: #F7F9FC; border-color: rgba(16, 24, 40, .1); }
[data-theme="light"] .hm-chat-row__title { color: #1B2333; }
[data-theme="light"] .hm-chat-row__id { color: #4A5464; }

/* ============================================================
   تنظیمات: ناوبری زیربخش‌ها
   ============================================================ */
.hm-tabs--sub {
    background: transparent;
    border: none;
    padding: 0;
    gap: 6px;
    border-bottom: 1px solid var(--hm-line, rgba(255, 255, 255, .08));
    border-radius: 0;
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.hm-tabs--sub .hm-tab {
    min-width: auto;
    padding: 7px 13px;
    font-size: .78rem;
    border: 1px solid transparent;
}

.hm-tabs--sub .hm-tab:hover { background: rgba(255, 255, 255, .04); }

.hm-tabs--sub .hm-tab.active {
    background: rgba(212, 175, 75, .16);
    border-color: rgba(212, 175, 75, .45);
    color: var(--hm-gold-2, #E9C86A);
    font-weight: 700;
}

/* ============================================================
   تنظیمات: کارت‌های وضعیت (نمای کلی)
   ============================================================ */
.hm-health {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.hm-health__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--hm-surface, rgba(255, 255, 255, .04));
    border: 1px solid var(--hm-line, rgba(255, 255, 255, .08));
    text-decoration: none;
    color: inherit;
    transition: .16s;
    min-width: 0;
}

.hm-health__item:hover {
    border-color: rgba(212, 175, 75, .4);
    transform: translateY(-1px);
}

.hm-health__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hm-health__dot.ok { background: #35C08A; box-shadow: 0 0 0 3px rgba(53, 192, 138, .15); }
.hm-health__dot.warn { background: #E9B949; box-shadow: 0 0 0 3px rgba(233, 185, 73, .15); }
.hm-health__dot.bad { background: #F0564C; box-shadow: 0 0 0 3px rgba(240, 86, 76, .15); }

.hm-health__body { min-width: 0; }

.hm-health__title {
    font-size: .7rem;
    color: var(--hm-text-mute, #8A94A6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-health__value {
    font-size: .79rem;
    font-weight: 600;
    color: var(--hm-text-1, #E8EDF5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   تنظیمات: کاشی‌های بخش‌ها
   ============================================================ */
.hm-tile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border-radius: 14px;
    background: var(--hm-surface, rgba(255, 255, 255, .04));
    border: 1px solid var(--hm-line, rgba(255, 255, 255, .08));
    text-decoration: none;
    color: inherit;
    transition: .16s;
    min-width: 0;
}

.hm-tile:hover {
    border-color: rgba(212, 175, 75, .45);
    background: rgba(212, 175, 75, .06);
}

.hm-tile__icon {
    font-size: 1.35rem;
    line-height: 1;
    flex-shrink: 0;
    width: 1.6rem;
    text-align: center;
}

.hm-tile__body { min-width: 0; flex: 1; }

.hm-tile__title {
    font-size: .84rem;
    font-weight: 600;
    color: var(--hm-text-1, #E8EDF5);
    margin-bottom: 2px;
}

.hm-tile__desc {
    font-size: .71rem;
    color: var(--hm-text-mute, #8A94A6);
    line-height: 1.6;
}

.hm-tile__arrow {
    color: var(--hm-text-mute, #8A94A6);
    font-size: 1.1rem;
    flex-shrink: 0;
    transform: rotate(180deg);
}

/* ============================================================
   کنترل سگمنتی (انتخاب مخاطب)
   ============================================================ */
.hm-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--hm-surface-3, rgba(255, 255, 255, .04));
    border: 1px solid var(--hm-line, rgba(255, 255, 255, .07));
}

.hm-seg__btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--hm-text-dim, #A9B4C4);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: .16s;
}

.hm-seg__btn.active {
    background: var(--hm-grad-gold, linear-gradient(180deg, #E9C86A, #C9A445));
    color: #241B04;
    font-weight: 700;
}

[data-theme="light"] .hm-tabs--sub { border-bottom-color: rgba(16, 24, 40, .1); }
[data-theme="light"] .hm-tabs--sub .hm-tab:hover { background: rgba(16, 24, 40, .04); }
[data-theme="light"] .hm-tabs--sub .hm-tab.active { background: rgba(178, 138, 30, .14); border-color: rgba(178, 138, 30, .5); color: #8A6A10; }
[data-theme="light"] .hm-health__item { background: #F7F9FC; border-color: rgba(16, 24, 40, .1); }
[data-theme="light"] .hm-health__value { color: #1B2333; }
[data-theme="light"] .hm-tile { background: #F7F9FC; border-color: rgba(16, 24, 40, .1); }
[data-theme="light"] .hm-tile__title { color: #1B2333; }
[data-theme="light"] .hm-seg { background: #F1F4F9; border-color: rgba(16, 24, 40, .1); }

/* ============================================================
   صندوق: نوار تلفیقی وضعیت + فیلتر
   ============================================================ */
.hm-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 12px;
}

.hm-filters::-webkit-scrollbar { display: none; }

.hm-filter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--hm-line, rgba(255, 255, 255, .08));
    background: var(--hm-surface, rgba(255, 255, 255, .04));
    color: var(--hm-text-dim, #A9B4C4);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: .16s;
    white-space: nowrap;
}

.hm-filter:hover { border-color: rgba(212, 175, 75, .35); }

.hm-filter.active {
    background: var(--hm-grad-gold, linear-gradient(180deg, #E9C86A, #C9A445));
    border-color: transparent;
    color: #241B04;
    font-weight: 700;
}

.hm-filter__icon { font-size: .9rem; line-height: 1; }

.hm-filter__count {
    font-size: .7rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    min-width: 20px;
    text-align: center;
}

.hm-filter.active .hm-filter__count { background: rgba(0, 0, 0, .18); }

/* ============================================================
   کارت درخواست حذف‌شده
   ============================================================ */
.hm-reqcard--deleted {
    opacity: .88;
    border: 1px dashed var(--hm-line, rgba(255, 255, 255, .16));
    background: rgba(255, 255, 255, .02);
}

.hm-reqcard--deleted .hm-req__amount {
    color: var(--hm-text-dim, #A9B4C4);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

[data-theme="light"] .hm-filter { background: #F7F9FC; border-color: rgba(16, 24, 40, .1); color: #4A5464; }
[data-theme="light"] .hm-filter__count { background: rgba(16, 24, 40, .07); }
[data-theme="light"] .hm-filter.active .hm-filter__count { background: rgba(0, 0, 0, .14); }
[data-theme="light"] .hm-reqcard--deleted { background: #FAFBFD; border-color: rgba(16, 24, 40, .16); }

/* ================= آکاردئون تنظیمات ================= */
.hm-acc-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hm-acc {
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius-sm);
    background: var(--hm-surface);
    overflow: hidden;
}
.hm-acc + .hm-acc { margin-top: 10px; }

.hm-acc__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    background: transparent;
    border: 0;
    color: var(--hm-text);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
    transition: background .15s;
}
.hm-acc__head:hover { background: rgba(255, 255, 255, .03); }

.hm-acc__icon { font-size: 1.05rem; flex: 0 0 auto; }
.hm-acc__title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hm-acc__meta {
    flex: 1 1 auto;
    text-align: end;
    font-size: .72rem;
    font-weight: 500;
    color: var(--hm-text-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-acc__chev {
    flex: 0 0 auto;
    font-size: .85rem;
    color: var(--hm-text-mute);
    transition: transform .22s ease;
}
.hm-acc.is-open .hm-acc__chev { transform: rotate(180deg); color: var(--hm-gold-2); }

.hm-acc__body {
    height: 0;
    overflow: hidden;
    transition: height .24s ease;
}
.hm-acc.is-open .hm-acc__body { height: auto; }

.hm-acc__inner {
    padding: 4px 14px 16px;
    border-top: 1px solid var(--hm-line);
}

/* اسپن نامرئی برای اندازه‌گیری ارتفاع محتوا توسط JS */
.hm-acc__measure {
    display: block;
    position: absolute;
    visibility: hidden;
    height: auto;
    width: 100%;
    pointer-events: none;
    padding: 4px 14px 16px;
    box-sizing: border-box;
}

[data-theme="light"] .hm-acc__head:hover { background: rgba(16, 24, 40, .03); }
[data-theme="light"] .hm-acc { border-color: rgba(16, 24, 40, .12); }

/* ============================================================
   کنترل اسکرول عمودی
   هدف: صفحه‌های بلند به بخش‌های تاشو، نوارهای چسبان و
   ناحیه‌های اسکرول محدود شکسته شوند تا کاربر سردرگم نشود.
   ============================================================ */

/* ---------- نوار چسبان زیر هدر ---------- */
.hm-sticky {
    position: sticky;
    top: calc(var(--hm-header-h) + 6px);
    z-index: 40;
    background: rgba(7, 11, 20, .92);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-radius: 14px;
    padding: 6px;
    margin-bottom: 10px;
    border: 1px solid var(--hm-line);
}

.hm-sticky .hm-tabs,
.hm-sticky .hm-filters {
    margin-bottom: 0;
    border: none;
    background: transparent;
    padding: 0;
}

[data-theme="light"] .hm-sticky {
    background: rgba(255, 255, 255, .94);
    border-color: rgba(16, 24, 40, .1);
}

/* ---------- بخش تاشو (بدون جاوااسکریپت) ---------- */
.hm-collapse {
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius-sm);
    background: var(--hm-surface);
    margin-bottom: 10px;
    overflow: hidden;
}

.hm-collapse > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 700;
    color: var(--hm-text);
    list-style: none;
    user-select: none;
    transition: background .15s;
}

.hm-collapse > summary::-webkit-details-marker { display: none; }
.hm-collapse > summary:hover { background: rgba(255, 255, 255, .03); }

.hm-collapse > summary::after {
    content: '⌄';
    margin-inline-start: auto;
    font-size: .9rem;
    color: var(--hm-text-mute);
    transition: transform .2s ease;
}

.hm-collapse[open] > summary::after {
    transform: rotate(180deg);
    color: var(--hm-gold-2);
}

.hm-collapse__icon { font-size: 1.05rem; flex: 0 0 auto; }

.hm-collapse__meta {
    font-size: .72rem;
    font-weight: 500;
    color: var(--hm-text-mute);
    margin-inline-start: auto;
    margin-inline-end: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-collapse__body {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--hm-line);
}

.hm-collapse__body > .hm-card:first-child { margin-top: 10px; }

[data-theme="light"] .hm-collapse { background: #F7F9FC; border-color: rgba(16, 24, 40, .1); }
[data-theme="light"] .hm-collapse > summary:hover { background: rgba(16, 24, 40, .03); }

/* ---------- صفحهٔ گفتگو: ناحیهٔ اسکرول محدود ---------- */
/* ارتفاع دقیقاً برابر فضای باقی‌ماندهٔ .hm-main است تا فقط ناحیهٔ پیام‌ها اسکرول شود */
.hm-chatpage {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--hm-header-h) - var(--hm-nav-h) - 40px);
    min-height: 320px;
}

/* در پنل مدیریت نوار پایین وجود ندارد، اما نوار تب‌های بالای محتوا هست */
.hm-chatpage--admin {
    height: calc(100dvh - var(--hm-header-h) - 104px);
}

/* سرصفحهٔ ثابت گفتگو (مبلغ، وضعیت، دکمه‌ها) */
.hm-chatpage__head {
    flex: 0 0 auto;
    max-height: 46dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 6px;
}

/* ناحیهٔ پیام‌ها: تنها بخشی که اسکرول می‌شود */
.hm-chatpage__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 12px;
    scroll-behavior: smooth;
    position: relative;
}

/* کادر نوشتن: در جریان صفحه، نه شناور روی پیام‌ها */
.hm-chatpage__composer {
    flex: 0 0 auto;
    border-top: 1px solid var(--hm-line);
    background: rgba(11, 18, 32, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}

[data-theme="light"] .hm-chatpage__composer { background: rgba(255, 255, 255, .96); }

/* کادر نوشتن داخل جریان صفحه (نه شناور) */
.hm-chatbox--inline {
    position: static;
    inset: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
}

/* ---------- دکمهٔ «آخرین پیام» ---------- */
.hm-scrollbtn {
    position: absolute;
    inset-inline-end: 18px;
    bottom: 78px;
    z-index: 20;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--hm-line-gold);
    background: var(--hm-surface-2);
    color: var(--hm-gold-2);
    cursor: pointer;
    box-shadow: var(--hm-shadow-soft);
    transition: .18s;
}

.hm-scrollbtn:hover { background: var(--hm-surface-3); transform: translateY(-1px); }

.hm-scrollbtn__badge {
    position: absolute;
    top: -4px;
    inset-inline-start: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--hm-grad-gold);
    color: #241B04;
    font-size: .65rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* ---------- نوار عملیات چسبان پایین صفحه ---------- */
.hm-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 45;
    display: flex;
    gap: 8px;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    margin-top: 12px;
    background: linear-gradient(180deg, transparent, var(--hm-bg) 32%);
}

.hm-actionbar > * { flex: 1; }

/* ---------- فهرست فشرده (کارت‌های کوچک) ---------- */
.hm-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--hm-radius-sm);
    background: var(--hm-surface);
    border: 1px solid var(--hm-line);
    color: inherit;
    transition: .16s;
    min-width: 0;
}

.hm-compact:hover { border-color: var(--hm-line-gold); background: var(--hm-surface-2); }

.hm-compact__main { flex: 1; min-width: 0; }

.hm-compact__title {
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-compact__sub {
    font-size: .72rem;
    color: var(--hm-text-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-compact__side {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---------- فهرست با ارتفاع محدود و اسکرول داخلی ---------- */
.hm-scrollbox {
    max-height: 46dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--hm-radius-sm);
    border: 1px solid var(--hm-line);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hm-scrollbox--tall { max-height: 62dvh; }

/* ---------- نوار جستجوی چسبان ---------- */
.hm-searchbar {
    position: sticky;
    top: calc(var(--hm-header-h) + 6px);
    z-index: 38;
    padding: 6px 0;
    background: linear-gradient(180deg, var(--hm-bg) 70%, transparent);
}

/* ---------- شیت: ارتفاع و اسکرول بهتر ---------- */
.hm-sheet {
    max-height: 82dvh;
    overscroll-behavior: contain;
}

.hm-sheet__actions {
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    background: linear-gradient(180deg, transparent, var(--hm-bg-soft) 40%);
}

/* ---------- کاهش ارتفاع کارت‌های آماری در صفحه‌های شلوغ ---------- */
.hm-stats--tight .hm-stat { padding: 10px 8px; }
.hm-stats--tight .hm-stat__value { font-size: 1.2rem; }

/* ---------- موبایل: فشرده‌سازی بیشتر ---------- */
@media (max-width: 480px) {
    .hm-sticky { top: calc(var(--hm-header-h) + 2px); }
    .hm-scrollbox { max-height: 40dvh; }
    .hm-chatpage__scroll { padding-inline: 12px; }
}