/* ================= فونت ================= */
@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: 16px;
    box-shadow: var(--hm-shadow-soft);
}

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

.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: 22px 4px 10px;
}
.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: 12px; }
.hm-btn-row > * { flex: 1; }

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

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

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

.hm-input,
.hm-select,
.hm-textarea {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    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.6rem;
    letter-spacing: 12px;
    font-weight: 700;
    padding-inline-start: 22px;
    font-variant-numeric: tabular-nums;
}

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

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

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

/* ================= پیام‌ها ================= */
.hm-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 14px;
    font-size: .85rem;
    line-height: 1.75;
    margin-bottom: 16px;
    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: 10px; }

.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: 4px 4px 18px; }
.hm-page-head h1 { font-size: 1.25rem; margin-bottom: 4px; }
.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: 16px;
    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: 10px;
    margin-bottom: 16px;
}

.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: 14px;
    padding: 18px;
    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: 18px;
}

.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;
}